CINXE.COM

<!DOCTYPE html><html lang="en" class="__variable_10b8bd __variable_d52403 __variable_f498c6 __variable_8db913 antialiased dark:bg-gray-950"><head><meta charSet="utf-8"/><meta name="viewport" content="width=device-width, initial-scale=1"/><link rel="preload" href="/_next/static/media/0336a89fb4e7fc1d-s.p.woff2" as="font" crossorigin="" type="font/woff2"/><link rel="preload" href="/_next/static/media/162e1140ce5a788f-s.p.woff2" as="font" crossorigin="" type="font/woff2"/><link rel="preload" href="/_next/static/media/37581c031699de0a-s.p.woff2" as="font" crossorigin="" type="font/woff2"/><link rel="preload" href="/_next/static/media/44abb7d9d613e278-s.p.woff2" as="font" crossorigin="" type="font/woff2"/><link rel="preload" href="/_next/static/media/551ac2b2ce969c74-s.p.woff2" as="font" crossorigin="" type="font/woff2"/><link rel="preload" href="/_next/static/media/5ba23b2b0ac11fa6-s.p.woff2" as="font" crossorigin="" type="font/woff2"/><link rel="preload" href="/_next/static/media/5f4877925f1cef50-s.p.woff2" as="font" crossorigin="" type="font/woff2"/><link rel="preload" href="/_next/static/media/ba487c32d105d659-s.p.woff2" as="font" crossorigin="" type="font/woff2"/><link rel="preload" href="/_next/static/media/c91adde9f78caceb-s.p.woff2" as="font" crossorigin="" type="font/woff2"/><link rel="preload" href="/_next/static/media/dab80f54fa5deafc-s.p.woff2" as="font" crossorigin="" type="font/woff2"/><link rel="preload" as="image" href="/_next/static/media/cover.de1997f7.png"/><link rel="preload" as="image" href="/_next/static/media/responsive-1.fd2e9248.png"/><link rel="preload" as="image" href="/_next/static/media/responsive-2.8cfea49d.png"/><link rel="preload" as="image" href="/_next/static/media/responsive-3.e7467feb.png"/><link rel="preload" as="image" href="/_next/static/media/responsive-4.8e943ba2.png"/><link rel="preload" as="image" href="/_next/static/media/responsive-5.660185c2.png"/><link rel="preload" as="image" href="/_next/static/media/filters.debd0951.png"/><link rel="preload" as="image" href="/_next/static/media/dark-mode.light.288405b1.png"/><link rel="preload" as="image" href="/_next/static/media/dark-mode.dark.7219ba2e.png"/><link rel="preload" as="image" href="/_next/static/media/css-grid-1.d6b88d05.png"/><link rel="stylesheet" href="/_next/static/css/5fdf400d5849dfa6.css" data-precedence="next"/><link rel="stylesheet" href="/_next/static/css/b639fd46f42b2130.css" data-precedence="next"/><link rel="preload" as="script" fetchPriority="low" href="/_next/static/chunks/webpack-6e1cabe7d001b142.js"/><script src="/_next/static/chunks/593520b5-0a4b147f418a8ad2.js" async=""></script><script src="/_next/static/chunks/7733-0f0727c60f4d5c11.js" async=""></script><script src="/_next/static/chunks/main-app-dc310e686034b2de.js" async=""></script><script src="/_next/static/chunks/3621f9d8-d2947e92eca5a3b5.js" async=""></script><script src="/_next/static/chunks/4279-c5e301872b461aec.js" async=""></script><script src="/_next/static/chunks/7018-165373a669236895.js" async=""></script><script src="/_next/static/chunks/8948-06cb47a08a95a31a.js" async=""></script><script src="/_next/static/chunks/3602-93f6ff02000f4620.js" async=""></script><script src="/_next/static/chunks/1696-874ed4db6222baa1.js" async=""></script><script src="/_next/static/chunks/7892-6f4e0813343b109c.js" async=""></script><script src="/_next/static/chunks/1867-594369b131c69c50.js" async=""></script><script src="/_next/static/chunks/9274-6dbe1fb478effbcb.js" async=""></script><script src="/_next/static/chunks/app/(docs)/layout-99b228f12449e942.js" async=""></script><script src="/_next/static/chunks/6816-a40e0b5a4a86198e.js" async=""></script><script src="/_next/static/chunks/3693-2cc8d25462655fbd.js" async=""></script><script src="/_next/static/chunks/app/page-bba54c82bd4138b4.js" async=""></script><script src="/_next/static/chunks/9568-c60fec21e907f6d4.js" async=""></script><script src="/_next/static/chunks/app/layout-7affc687873763d6.js" async=""></script><link rel="preload" as="image" href="/_next/static/media/css-grid-1.mobile.d0afc6a2.png"/><link rel="preload" as="image" href="/_next/static/media/css-grid-2.d645692f.png"/><link rel="preload" as="image" href="/_next/static/media/css-grid-3.45c4c3d5.png"/><link rel="preload" as="image" href="/_next/static/media/css-grid-4.308d73d9.png"/><link rel="preload" as="image" href="/_next/static/media/avatar-4.61762eae.png"/><link rel="preload" as="image" href="/_next/static/media/avatar-5.80ec4bd6.png"/><link rel="preload" as="image" href="/_next/static/media/avatar-6.4477a8c2.png"/><link rel="preload" as="image" href="/_next/static/media/avatar-7.7aeec531.png"/><link rel="preload" as="image" href="/_next/static/media/avatar-1.4512b883.png"/><link rel="preload" as="image" href="/_next/static/media/avatar-2.74328963.png"/><link rel="preload" as="image" href="/_next/static/media/avatar-3.905e2d38.png"/><link rel="preload" as="image" href="/_next/static/media/3d-transforms.ebde7a6a.jpeg"/><link rel="preload" as="image" href="/_next/static/media/templates-col-1.44d582cd.png"/><link rel="preload" as="image" href="/_next/static/media/templates-col-2.9768ca29.png"/><link rel="preload" as="image" href="/_next/static/media/templates-col-3.08018dac.png"/><link rel="preload" href="data:text/javascript;base64,CiAgaWYgKCEoJ191cGRhdGVUaGVtZScgaW4gd2luZG93KSkgewogICAgd2luZG93Ll91cGRhdGVUaGVtZSA9IGZ1bmN0aW9uIHVwZGF0ZVRoZW1lKHRoZW1lKSB7CiAgICAgIGxldCBjbGFzc0xpc3QgPSBkb2N1bWVudC5kb2N1bWVudEVsZW1lbnQuY2xhc3NMaXN0OwoKICAgICAgY2xhc3NMaXN0LnJlbW92ZSgibGlnaHQiLCAiZGFyayIsICJzeXN0ZW0iKTsKICAgICAgZG9jdW1lbnQucXVlcnlTZWxlY3RvckFsbCgnbWV0YVtuYW1lPSJ0aGVtZS1jb2xvciJdJykuZm9yRWFjaChlbCA9PiBlbC5yZW1vdmUoKSkKICAgICAgaWYgKHRoZW1lID09PSAnZGFyaycpIHsKICAgICAgICBjbGFzc0xpc3QuYWRkKCdkYXJrJykKCiAgICAgICAgbGV0IG1ldGEgPSBkb2N1bWVudC5jcmVhdGVFbGVtZW50KCdtZXRhJykKICAgICAgICBtZXRhLm5hbWUgPSAndGhlbWUtY29sb3InCiAgICAgICAgbWV0YS5jb250ZW50ID0gJ29rbGNoKC4xMyAuMDI4IDI2MS42OTIpJwogICAgICAgIGRvY3VtZW50LmhlYWQuYXBwZW5kQ2hpbGQobWV0YSkKICAgICAgfSBlbHNlIGlmICh0aGVtZSA9PT0gJ2xpZ2h0JykgewogICAgICAgIGNsYXNzTGlzdC5hZGQoJ2xpZ2h0JykKCiAgICAgICAgbGV0IG1ldGEgPSBkb2N1bWVudC5jcmVhdGVFbGVtZW50KCdtZXRhJykKICAgICAgICBtZXRhLm5hbWUgPSAndGhlbWUtY29sb3InCiAgICAgICAgbWV0YS5jb250ZW50ID0gJ3doaXRlJwogICAgICAgIGRvY3VtZW50LmhlYWQuYXBwZW5kQ2hpbGQobWV0YSkKICAgICAgfSBlbHNlIHsKICAgICAgICBjbGFzc0xpc3QuYWRkKCdzeXN0ZW0nKQoKICAgICAgICBsZXQgbWV0YTEgPSBkb2N1bWVudC5jcmVhdGVFbGVtZW50KCdtZXRhJykKICAgICAgICBtZXRhMS5uYW1lID0gJ3RoZW1lLWNvbG9yJwogICAgICAgIG1ldGExLmNvbnRlbnQgPSAnb2tsY2goLjEzIC4wMjggMjYxLjY5MiknCiAgICAgICAgbWV0YTEubWVkaWEgPSAnKHByZWZlcnMtY29sb3Itc2NoZW1lOiBkYXJrKScKICAgICAgICBkb2N1bWVudC5oZWFkLmFwcGVuZENoaWxkKG1ldGExKQoKICAgICAgICBsZXQgbWV0YTIgPSBkb2N1bWVudC5jcmVhdGVFbGVtZW50KCdtZXRhJykKICAgICAgICBtZXRhMi5uYW1lID0gJ3RoZW1lLWNvbG9yJwogICAgICAgIG1ldGEyLmNvbnRlbnQgPSAnd2hpdGUnCiAgICAgICAgbWV0YTIubWVkaWEgPSAnKHByZWZlcnMtY29sb3Itc2NoZW1lOiBsaWdodCknCiAgICAgICAgZG9jdW1lbnQuaGVhZC5hcHBlbmRDaGlsZChtZXRhMikKICAgICAgfQogICAgfQoKICAgIHRyeSB7CiAgICAgIF91cGRhdGVUaGVtZShsb2NhbFN0b3JhZ2UuY3VycmVudFRoZW1lKQogICAgfSBjYXRjaCAoXykge30KCiAgICB0cnkgewogICAgICBpZiAoLyhNYWN8aVBob25lfGlQb2R8aVBhZCkvaS50ZXN0KG5hdmlnYXRvci5wbGF0Zm9ybSkpIHsKICAgICAgICBkb2N1bWVudC5kb2N1bWVudEVsZW1lbnQuY2xhc3NMaXN0LmFkZCgnb3MtbWFjb3MnKQogICAgICB9CiAgICB9IGNhdGNoIChfKSB7fQogIH0K" as="script"/><meta name="next-size-adjust" content=""/><link rel="preconnect" href="https://KNPXZI5B0M-dsn.algolia.net" crossorigin="anonymous"/><link rel="apple-touch-icon" sizes="180x180" href="/favicons/apple-touch-icon.png?v=4"/><link rel="icon" type="image/png" sizes="32x32" href="/favicons/favicon-32x32.png?v=4"/><link rel="icon" type="image/png" sizes="16x16" href="/favicons/favicon-16x16.png?v=4"/><link rel="manifest" href="/favicons/site.webmanifest?v=4"/><link rel="mask-icon" href="/favicons/safari-pinned-tab.svg?v=4" color="#38bdf8"/><link rel="shortcut icon" href="/favicons/favicon.ico?v=4"/><link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="/feeds/feed.xml"/><link rel="alternate" type="application/atom+xml" title="Atom 1.0" href="/feeds/atom.xml"/><link rel="alternate" type="application/json" title="JSON Feed" href="/feeds/feed.json"/><meta name="apple-mobile-web-app-title" content="Tailwind CSS"/><meta name="application-name" content="Tailwind CSS"/><meta name="msapplication-TileColor" content="#38bdf8"/><meta name="msapplication-config" content="/favicons/browserconfig.xml?v=4"/><script type="text/javascript"> if (!('_updateTheme' in window)) { window._updateTheme = function updateTheme(theme) { let classList = document.documentElement.classList; classList.remove("light", "dark", "system"); document.querySelectorAll('meta[name="theme-color"]').forEach(el => el.remove()) if (theme === 'dark') { classList.add('dark') let meta = document.createElement('meta') meta.name = 'theme-color' meta.content = 'oklch(.13 .028 261.692)' document.head.appendChild(meta) } else if (theme === 'light') { classList.add('light') let meta = document.createElement('meta') meta.name = 'theme-color' meta.content = 'white' document.head.appendChild(meta) } else { classList.add('system') let meta1 = document.createElement('meta') meta1.name = 'theme-color' meta1.content = 'oklch(.13 .028 261.692)' meta1.media = '(prefers-color-scheme: dark)' document.head.appendChild(meta1) let meta2 = document.createElement('meta') meta2.name = 'theme-color' meta2.content = 'white' meta2.media = '(prefers-color-scheme: light)' document.head.appendChild(meta2) } } try { _updateTheme(localStorage.currentTheme) } catch (_) {} try { if (/(Mac|iPhone|iPod|iPad)/i.test(navigator.platform)) { document.documentElement.classList.add('os-macos') } } catch (_) {} } </script><title>Tailwind CSS - Rapidly build modern websites without ever leaving your HTML.</title><meta name="description" content="Tailwind CSS is a utility-first CSS framework for rapidly building modern websites without ever leaving your HTML."/><meta property="og:title" content="Tailwind CSS - Rapidly build modern websites without ever leaving your HTML."/><meta property="og:description" content="Tailwind CSS is a utility-first CSS framework for rapidly building modern websites without ever leaving your HTML."/><meta property="og:image:type" content="image/jpeg"/><meta property="og:image:width" content="1200"/><meta property="og:image:height" content="630"/><meta property="og:image" content="https://tailwindcss.com/opengraph-image.jpg?fbee406903dc9e88"/><meta name="twitter:card" content="summary_large_image"/><meta name="twitter:title" content="Tailwind CSS - Rapidly build modern websites without ever leaving your HTML."/><meta name="twitter:description" content="Tailwind CSS is a utility-first CSS framework for rapidly building modern websites without ever leaving your HTML."/><meta name="twitter:image:type" content="image/jpeg"/><meta name="twitter:image:width" content="1200"/><meta name="twitter:image:height" content="630"/><meta name="twitter:image" content="https://tailwindcss.com/opengraph-image.jpg?fbee406903dc9e88"/><link rel="icon" href="/favicon.ico" type="image/x-icon" sizes="48x48"/><script>document.querySelectorAll('body link[rel="icon"], body link[rel="apple-touch-icon"]').forEach(el => document.head.appendChild(el))</script><script src="/_next/static/chunks/polyfills-42372ed130431b0a.js" noModule=""></script></head><body><template data-dgst="BAILOUT_TO_CLIENT_SIDE_RENDERING"></template><div class="isolate"><div class="max-w-screen overflow-x-hidden"><div class="fixed inset-x-0 top-0 z-10 border-b border-black/5 dark:border-white/10"><div class="bg-white dark:bg-gray-950"><div class="flex h-14 items-center justify-between gap-8 px-4 sm:px-6"><div class="flex items-center gap-4"><a class="shrink-0" aria-label="Home" href="/"><svg viewBox="0 0 167 21" fill="none" class="h-5 text-black dark:text-white"><path class="fill-sky-400" d="M17.183 0C12.6 0 9.737 2.291 8.59 6.873c1.719-2.29 3.723-3.15 6.014-2.577 1.307.326 2.242 1.274 3.275 2.324 1.685 1.71 3.635 3.689 7.894 3.689 4.582 0 7.445-2.291 8.591-6.872-1.718 2.29-3.723 3.15-6.013 2.576-1.308-.326-2.243-1.274-3.276-2.324C23.39 1.98 21.44 0 17.183 0ZM8.59 10.309C4.01 10.309 1.145 12.6 0 17.182c1.718-2.291 3.723-3.15 6.013-2.577 1.308.326 2.243 1.274 3.276 2.324 1.685 1.71 3.635 3.689 7.894 3.689 4.582 0 7.445-2.29 8.59-6.872-1.718 2.29-3.722 3.15-6.013 2.577-1.307-.327-2.242-1.276-3.276-2.325-1.684-1.71-3.634-3.689-7.893-3.689Z"></path><path fill="currentColor" d="M51.547 8.688h-3v5.803c0 1.548 1.016 1.524 3 1.427v2.346c-4.015.483-5.611-.629-5.611-3.773V8.688H43.71V6.172h2.225V2.925l2.612-.774v4.021h2.998v2.516Zm11.43-2.516h2.61v12.092h-2.61v-1.741c-.92 1.28-2.346 2.055-4.233 2.055-3.288 0-6.021-2.78-6.021-6.36 0-3.603 2.733-6.36 6.021-6.36 1.886 0 3.313.774 4.233 2.032V6.172Zm-3.821 9.915c2.176 0 3.82-1.62 3.82-3.87 0-2.248-1.644-3.868-3.82-3.868-2.177 0-3.821 1.62-3.821 3.869s1.644 3.87 3.82 3.87ZM69.94 4.36a1.687 1.687 0 0 1-1.668-1.669c.002-.443.179-.868.491-1.18a1.662 1.662 0 0 1 2.354 0c.312.312.49.737.491 1.18 0 .895-.75 1.669-1.668 1.669Zm-1.306 13.905V6.172h2.612v12.092h-2.612Zm5.635 0V.609h2.611v17.654H74.27ZM93.834 6.172h2.757l-3.797 12.092h-2.563l-2.516-8.15-2.539 8.15h-2.563L78.816 6.172h2.757l2.346 8.343 2.54-8.343h2.49l2.514 8.343 2.37-8.343ZM99.83 4.36c-.92 0-1.669-.774-1.669-1.669.002-.443.18-.868.492-1.18a1.661 1.661 0 0 1 2.354 0c.313.312.49.737.492 1.18 0 .895-.75 1.669-1.669 1.669Zm-1.306 13.905V6.172h2.612v12.092h-2.612ZM110.52 5.858c2.708 0 4.643 1.838 4.643 4.982v7.423h-2.612v-7.158c0-1.838-1.064-2.804-2.708-2.804-1.717 0-3.071 1.015-3.071 3.482v6.48h-2.612V6.174h2.612V7.72c.798-1.257 2.103-1.862 3.748-1.862Zm17.024-4.522h2.612v16.927h-2.612v-1.741c-.918 1.282-2.345 2.055-4.231 2.055-3.289 0-6.022-2.78-6.022-6.36 0-3.603 2.733-6.36 6.022-6.36 1.886 0 3.313.774 4.231 2.032V1.336Zm-3.821 14.751c2.177 0 3.821-1.62 3.821-3.87 0-2.248-1.644-3.868-3.821-3.868-2.176 0-3.82 1.62-3.82 3.869s1.644 3.87 3.82 3.87Zm15.187 2.49c-3.651 0-6.384-2.78-6.384-6.36 0-3.602 2.733-6.359 6.384-6.359 2.37 0 4.426 1.233 5.393 3.12l-2.249 1.306c-.532-1.137-1.717-1.863-3.168-1.863-2.128 0-3.748 1.62-3.748 3.797 0 2.176 1.62 3.797 3.748 3.797 1.451 0 2.636-.75 3.216-1.863l2.249 1.282c-1.015 1.91-3.071 3.144-5.441 3.144Zm9.746-9.068c0 2.201 6.505.87 6.505 5.345 0 2.419-2.104 3.724-4.716 3.724-2.418 0-4.159-1.089-4.933-2.83l2.249-1.305c.387 1.088 1.355 1.74 2.684 1.74 1.161 0 2.056-.386 2.056-1.354 0-2.151-6.505-.942-6.505-5.27 0-2.274 1.959-3.701 4.425-3.701 1.983 0 3.628.92 4.474 2.515l-2.2 1.233c-.436-.943-1.283-1.378-2.274-1.378-.943 0-1.765.41-1.765 1.281Zm11.148 0c0 2.201 6.505.87 6.505 5.345 0 2.419-2.104 3.724-4.716 3.724-2.418 0-4.158-1.089-4.933-2.83l2.249-1.305c.387 1.088 1.354 1.74 2.684 1.74 1.161 0 2.056-.386 2.056-1.354 0-2.151-6.505-.942-6.505-5.27 0-2.274 1.959-3.701 4.426-3.701 1.982 0 3.627.92 4.473 2.515l-2.2 1.233c-.435-.943-1.282-1.378-2.273-1.378-.944 0-1.766.41-1.766 1.281Z"></path></svg></a><button class="flex items-center gap-0.5 rounded-2xl bg-gray-950/5 py-0.5 pr-1.5 pl-2.5 text-xs/5 font-medium text-gray-950 tabular-nums hover:bg-gray-950/7.5 data-active:bg-gray-950/7.5 dark:bg-white/10 dark:text-white dark:hover:bg-white/12.5 dark:data-active:bg-white/12.5" aria-label="Select version of library" id="headlessui-menu-button-«R1skulb»" type="button" aria-haspopup="menu" aria-expanded="false" data-headlessui-state="">v4.1<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon" class="size-4 fill-gray-400"><path fill-rule="evenodd" d="M4.22 6.22a.75.75 0 0 1 1.06 0L8 8.94l2.72-2.72a.75.75 0 1 1 1.06 1.06l-3.25 3.25a.75.75 0 0 1-1.06 0L4.22 7.28a.75.75 0 0 1 0-1.06Z" clip-rule="evenodd"></path></svg></button></div><div class="flex items-center gap-6 max-md:hidden"><button type="button" class="inline-flex items-center gap-1 rounded-full bg-gray-950/2 px-2 py-1 inset-ring inset-ring-gray-950/8 dark:bg-white/5 dark:inset-ring-white/2"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" class="-ml-0.5 size-4 fill-gray-600 dark:fill-gray-500"><path fill-rule="evenodd" d="M9.965 11.026a5 5 0 1 1 1.06-1.06l2.755 2.754a.75.75 0 1 1-1.06 1.06l-2.755-2.754ZM10.5 7a3.5 3.5 0 1 1-7 0 3.5 3.5 0 0 1 7 0Z" clip-rule="evenodd"></path></svg><kbd class="hidden font-sans text-xs/4 text-gray-500 dark:text-gray-400 [.os-macos_&]:block">⌘K</kbd><kbd class="hidden font-sans text-xs/4 text-gray-500 not-[.os-macos_&]:block dark:text-gray-400">Ctrl K</kbd></button><a class="text-sm/6 text-gray-950 dark:text-white" href="/docs">Docs</a><a class="text-sm/6 text-gray-950 dark:text-white" href="/blog">Blog</a><a class="text-sm/6 text-gray-950 dark:text-white" href="/showcase">Showcase</a><a href="/plus?ref=top" class="group relative px-1.5 text-sm/6 text-sky-800 dark:text-sky-300"><span class="absolute inset-0 border border-dashed border-sky-300/60 bg-sky-400/10 group-hover:bg-sky-400/15 dark:border-sky-300/30"></span>Plus<svg width="5" height="5" viewBox="0 0 5 5" class="absolute top-[-2px] left-[-2px] fill-sky-300 dark:fill-sky-300/50"><path d="M2 0h1v2h2v1h-2v2h-1v-2h-2v-1h2z"></path></svg><svg width="5" height="5" viewBox="0 0 5 5" class="absolute top-[-2px] right-[-2px] fill-sky-300 dark:fill-sky-300/50"><path d="M2 0h1v2h2v1h-2v2h-1v-2h-2v-1h2z"></path></svg><svg width="5" height="5" viewBox="0 0 5 5" class="absolute bottom-[-2px] left-[-2px] fill-sky-300 dark:fill-sky-300/50"><path d="M2 0h1v2h2v1h-2v2h-1v-2h-2v-1h2z"></path></svg><svg width="5" height="5" viewBox="0 0 5 5" class="absolute right-[-2px] bottom-[-2px] fill-sky-300 dark:fill-sky-300/50"><path d="M2 0h1v2h2v1h-2v2h-1v-2h-2v-1h2z"></path></svg></a><a aria-label="GitHub repository" href="https://github.com/tailwindlabs/tailwindcss"><svg viewBox="0 0 20 20" class="size-5 fill-black/40 dark:fill-gray-400"><path d="M10 0C4.475 0 0 4.475 0 10a9.994 9.994 0 006.838 9.488c.5.087.687-.213.687-.476 0-.237-.013-1.024-.013-1.862-2.512.463-3.162-.612-3.362-1.175-.113-.287-.6-1.175-1.025-1.412-.35-.188-.85-.65-.013-.663.788-.013 1.35.725 1.538 1.025.9 1.512 2.337 1.087 2.912.825.088-.65.35-1.088.638-1.338-2.225-.25-4.55-1.112-4.55-4.937 0-1.088.387-1.987 1.025-2.688-.1-.25-.45-1.274.1-2.65 0 0 .837-.262 2.75 1.026a9.28 9.28 0 012.5-.338c.85 0 1.7.112 2.5.337 1.912-1.3 2.75-1.024 2.75-1.024.55 1.375.2 2.4.1 2.65.637.7 1.025 1.587 1.025 2.687 0 3.838-2.337 4.688-4.562 4.938.362.312.675.912.675 1.85 0 1.337-.013 2.412-.013 2.75 0 .262.188.574.688.474A10.016 10.016 0 0020 10c0-5.525-4.475-10-10-10z"></path></svg></a></div><div class="flex items-center gap-2.5 md:hidden"><button type="button" aria-label="Search" class="inline-grid size-7 place-items-center rounded-md"><svg viewBox="0 0 16 16" fill="currentColor" class="size-4"><path fill-rule="evenodd" d="M9.965 11.026a5 5 0 1 1 1.06-1.06l2.755 2.754a.75.75 0 1 1-1.06 1.06l-2.755-2.754ZM10.5 7a3.5 3.5 0 1 1-7 0 3.5 3.5 0 0 1 7 0Z" clip-rule="evenodd"></path></svg></button><button type="button" class="relative inline-grid size-7 place-items-center rounded-md text-gray-950 hover:bg-gray-950/5 dark:text-white dark:hover:bg-white/10 undefined" aria-label="Navigation"><span class="absolute top-1/2 left-1/2 size-11 -translate-1/2 [@media(pointer:fine)]:hidden"></span><svg viewBox="0 0 16 16" fill="currentColor" class="size-4"><path d="M8 2a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM8 6.5a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM9.5 12.5a1.5 1.5 0 1 0-3 0 1.5 1.5 0 0 0 3 0Z"></path></svg></button><span hidden="" style="position:fixed;top:1px;left:1px;width:1px;height:0;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0;display:none"></span></div></div></div></div><div class="grid min-h-dvh grid-cols-1 grid-rows-[1fr_1px_auto_1px_auto] justify-center pt-14.25 [--gutter-width:2.5rem] md:-mx-4 md:grid-cols-[var(--gutter-width)_minmax(0,var(--breakpoint-2xl))_var(--gutter-width)] lg:mx-0"><div class="col-start-1 row-span-full row-start-1 hidden border-x border-x-(--pattern-fg) bg-[image:repeating-linear-gradient(315deg,_var(--pattern-fg)_0,_var(--pattern-fg)_1px,_transparent_0,_transparent_50%)] bg-[size:10px_10px] bg-fixed [--pattern-fg:var(--color-black)]/5 md:block dark:[--pattern-fg:var(--color-white)]/10"></div><div class="grid gap-24 pb-24 text-gray-950 sm:gap-40 md:pb-40 dark:text-white"><div><div aria-hidden="true" class="flex h-16 items-end px-2 font-mono text-xs/6 whitespace-pre text-black/20 max-sm:px-4 sm:h-24 dark:text-white/25"><span class="hidden max-sm:inline">text-4xl </span><span class="hidden sm:max-md:inline">text-5xl </span><span class="hidden lg:max-xl:inline">text-6xl </span><span class="hidden xl:inline">text-8xl </span><span class="inline dark:hidden">text-gray-950 </span><span class="hidden dark:inline">text-white </span>tracking-tighter <span class="max-sm:hidden">text-balance</span></div><div class="relative before:absolute before:top-0 before:h-px before:w-[200vw] before:bg-gray-950/5 dark:before:bg-white/10 before:-left-[100vw] after:absolute after:bottom-0 after:h-px after:w-[200vw] after:bg-gray-950/5 dark:after:bg-white/10 after:-left-[100vw]"><h1 class="px-2 text-4xl tracking-tighter text-balance max-lg:font-medium max-sm:px-4 sm:text-5xl lg:text-6xl xl:text-8xl">Rapidly build modern websites without ever leaving your HTML.</h1></div><div aria-hidden="true" class="flex h-6 items-end px-2 font-mono text-xs/6 whitespace-pre text-black/20 max-sm:px-4 sm:h-10 dark:text-white/25">text-lg <span class="inline dark:hidden">text-gray-950</span><span class="hidden dark:inline">text-white</span> font-medium</div><div class="relative before:absolute before:top-0 before:h-px before:w-[200vw] before:bg-gray-950/5 dark:before:bg-white/10 before:-left-[100vw] after:absolute after:bottom-0 after:h-px after:w-[200vw] after:bg-gray-950/5 dark:after:bg-white/10 after:-left-[100vw]"><p class="max-w-(--breakpoint-md) px-2 text-lg/7 font-medium text-gray-600 max-sm:px-4 dark:text-gray-400">A utility-first CSS framework packed with classes like <span class="font-mono text-[1.0625rem] text-sky-500 dark:text-sky-400">flex</span>, <span class="font-mono text-[1.0625rem] text-sky-500 dark:text-sky-400">pt-4</span>, <span class="font-mono text-[1.0625rem] text-sky-500 dark:text-sky-400">text-center</span> and <span class="font-mono text-[1.0625rem] text-sky-500 dark:text-sky-400">rotate-90</span> that can be composed to build any design, directly in your markup.</p></div><div class="mt-10 px-4 sm:hidden relative before:absolute before:top-0 before:h-px before:w-[200vw] before:bg-gray-950/5 dark:before:bg-white/10 before:-left-[100vw] after:absolute after:bottom-0 after:h-px after:w-[200vw] after:bg-gray-950/5 dark:after:bg-white/10 after:-left-[100vw]"><a class="z-1 w-full text-center inline-block rounded-4xl bg-black px-4 py-2 text-sm/6 font-semibold text-white hover:bg-gray-800 dark:bg-gray-700 dark:hover:bg-gray-600" href="docs/installation">Get started</a></div><div class="mt-4 sm:mt-10 sm:px-2 relative before:absolute before:top-0 before:h-px before:w-[200vw] before:bg-gray-950/5 dark:before:bg-white/10 before:-left-[100vw] after:absolute after:bottom-0 after:h-px after:w-[200vw] after:bg-gray-950/5 dark:after:bg-white/10 after:-left-[100vw]"><div class="flex gap-4 max-sm:px-4"><a class="z-1 max-sm:hidden inline-block rounded-4xl bg-black px-4 py-2 text-sm/6 font-semibold text-white hover:bg-gray-800 dark:bg-gray-700 dark:hover:bg-gray-600" href="docs/installation">Get started</a><button type="button" class="grid w-full grid-cols-[auto_1fr_auto] items-center gap-1 rounded-full px-4 py-2 text-left text-sm/6 text-gray-950/50 inset-ring inset-ring-gray-950/8 sm:w-80 dark:bg-white/5 dark:text-white/50 dark:inset-ring-white/15"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" class="-ml-0.5 size-4 fill-gray-600 dark:fill-gray-500"><path fill-rule="evenodd" d="M9.965 11.026a5 5 0 1 1 1.06-1.06l2.755 2.754a.75.75 0 1 1-1.06 1.06l-2.755-2.754ZM10.5 7a3.5 3.5 0 1 1-7 0 3.5 3.5 0 0 1 7 0Z" clip-rule="evenodd"></path></svg>Quick search<kbd class="hidden font-sans text-xs/4 text-gray-500 dark:text-gray-400 [.os-macos_&]:block"><span class="opacity-60">⌘</span>K</kbd><kbd class="hidden font-sans text-xs/4 text-gray-500 not-[.os-macos_&]:block dark:text-gray-400"><span class="opacity-60">Ctrl</span> K</kbd></button></div></div><div class="mt-24 relative before:absolute before:top-0 before:h-px before:w-[200vw] before:bg-gray-950/5 dark:before:bg-white/10 before:-left-[100vw] after:absolute after:bottom-0 after:h-px after:w-[200vw] after:bg-gray-950/5 dark:after:bg-white/10 after:-left-[100vw]"><div class="grid grid-cols-1 lg:grid-cols-3"><div class="bg-gray-950/5 p-2 lg:col-span-2 lg:-mx-px dark:bg-white/10"><div class="rounded-xl bg-gray-950"><div class="rounded-xl p-1 text-sm scheme-dark dark:inset-ring dark:inset-ring-white/10"><div class="flex gap-2 p-2"><span class="size-3 rounded-full bg-white/20"></span><span class="size-3 rounded-full bg-white/20"></span><span class="size-3 rounded-full bg-white/20"></span></div><div class="with-line-numbers text-[13px]/6 *:*:p-3!"><div class="*:flex *:*:max-w-none *:*:shrink-0 *:*:grow *:overflow-auto *:rounded-lg *:bg-white/10! *:p-5 dark:*:bg-white/5! **:[.line]:isolate **:[.line]:block **:[.line]:not-last:min-h-[1lh] *:inset-ring *:inset-ring-white/10 dark:*:inset-ring-white/5"><pre tabindex="0"><code><code><span class="line"><span style="color:var(--color-slate-400)"><</span><span style="color:var(--color-pink-400)">div</span><span style="color:var(--color-slate-400)"> </span><span style="color:var(--color-slate-300)">class</span><span style="color:var(--color-slate-400)">=</span><span style="color:var(--color-sky-300)">"flex flex-col items-center rounded-2xl"</span><span style="color:var(--color-slate-400)">></span></span><span class="line"><span> </span><span style="color:var(--color-slate-400)"><</span><span style="color:var(--color-pink-400)">div</span><span style="color:var(--color-slate-400)">></span></span><span class="line"><span> </span><span style="color:var(--color-slate-400)"><</span><span style="color:var(--color-pink-400)">img</span><span style="color:var(--color-slate-400)"> </span><span style="color:var(--color-slate-300)">class</span><span style="color:var(--color-slate-400)">=</span><span style="color:var(--color-sky-300)">"size-48 shadow-xl"</span><span style="color:var(--color-slate-400)"> </span><span style="color:var(--color-slate-300)">alt</span><span style="color:var(--color-slate-400)">=</span><span style="color:var(--color-sky-300)">""</span><span style="color:var(--color-slate-400)"> </span><span style="color:var(--color-slate-300)">src</span><span style="color:var(--color-slate-400)">=</span><span style="color:var(--color-sky-300)">"/img/cover.png"</span><span style="color:var(--color-slate-400)"> /></span></span><span class="line"><span> </span><span style="color:var(--color-slate-400)"></</span><span style="color:var(--color-pink-400)">div</span><span style="color:var(--color-slate-400)">></span></span><span class="line"><span> </span><span style="color:var(--color-slate-400)"><</span><span style="color:var(--color-pink-400)">div</span><span style="color:var(--color-slate-400)"> </span><span style="color:var(--color-slate-300)">class</span><span style="color:var(--color-slate-400)">=</span><span style="color:var(--color-sky-300)">"flex"</span><span style="color:var(--color-slate-400)">></span></span><span class="line"><span> </span><span style="color:var(--color-slate-400)"><</span><span style="color:var(--color-pink-400)">span</span><span style="color:var(--color-slate-400)">></span><span style="color:var(--color-slate-50)">Class Warfare</span><span style="color:var(--color-slate-400)"></</span><span style="color:var(--color-pink-400)">span</span><span style="color:var(--color-slate-400)">></span></span><span class="line"><span> </span><span style="color:var(--color-slate-400)"><</span><span style="color:var(--color-pink-400)">span</span><span style="color:var(--color-slate-400)">></span><span style="color:var(--color-slate-50)">The Anti-Patterns</span><span style="color:var(--color-slate-400)"></</span><span style="color:var(--color-pink-400)">span</span><span style="color:var(--color-slate-400)">></span></span><span class="line"><span> </span><span style="color:var(--color-slate-400)"><</span><span style="color:var(--color-pink-400)">span</span><span style="color:var(--color-slate-400)"> </span><span style="color:var(--color-slate-300)">class</span><span style="color:var(--color-slate-400)">=</span><span style="color:var(--color-sky-300)">"flex"</span><span style="color:var(--color-slate-400)">></span></span><span class="line"><span> </span><span style="color:var(--color-slate-400)"><</span><span style="color:var(--color-pink-400)">span</span><span style="color:var(--color-slate-400)">></span><span style="color:var(--color-slate-50)">No. 4</span><span style="color:var(--color-slate-400)"></</span><span style="color:var(--color-pink-400)">span</span><span style="color:var(--color-slate-400)">></span></span><span class="line"><span> </span><span style="color:var(--color-slate-400)"><</span><span style="color:var(--color-pink-400)">span</span><span style="color:var(--color-slate-400)">></span><span style="color:var(--color-slate-50)">·</span><span style="color:var(--color-slate-400)"></</span><span style="color:var(--color-pink-400)">span</span><span style="color:var(--color-slate-400)">></span></span><span class="line"><span> </span><span style="color:var(--color-slate-400)"><</span><span style="color:var(--color-pink-400)">span</span><span style="color:var(--color-slate-400)">></span><span style="color:var(--color-slate-50)">2025</span><span style="color:var(--color-slate-400)"></</span><span style="color:var(--color-pink-400)">span</span><span style="color:var(--color-slate-400)">></span></span><span class="line"><span> </span><span style="color:var(--color-slate-400)"></</span><span style="color:var(--color-pink-400)">span</span><span style="color:var(--color-slate-400)">></span></span><span class="line"><span> </span><span style="color:var(--color-slate-400)"></</span><span style="color:var(--color-pink-400)">div</span><span style="color:var(--color-slate-400)">></span></span><span class="line"><span style="color:var(--color-slate-400)"></</span><span style="color:var(--color-pink-400)">div</span><span style="color:var(--color-slate-400)">></span></span></code></code></pre></div></div></div></div></div><div class="relative border-(--pattern-fg) bg-[image:repeating-linear-gradient(315deg,_var(--pattern-fg)_0,_var(--pattern-fg)_1px,_transparent_0,_transparent_50%)] bg-[size:10px_10px] bg-fixed [--pattern-fg:var(--color-black)]/5 max-lg:h-66 max-lg:border-t lg:border-l dark:[--pattern-fg:var(--color-white)]/10"><div class="absolute right-1/2 max-lg:bottom-8 max-md:translate-x-1/2 md:right-16 lg:top-1/2 lg:-translate-y-1/2 2xl:right-1/2 2xl:translate-x-[calc(50%-3rem)]"><div class="@container rounded-3xl bg-black/5 p-2 outline outline-white/15 backdrop-blur-md dark:bg-white/10 w-[262px] xl:ml-[3rem]"><div class="relative flex w-full flex-col rounded-2xl bg-white outline outline-black/5 dark:bg-gray-950"><img alt="" class="size-48 shadow-xl transition-[border-radius] duration-350 dark:outline-1 dark:-outline-offset-1 dark:outline-white/10" src="/_next/static/media/cover.de1997f7.png" width="192" height="192"/><div class="flex flex-col"><span class="text-gray-950 transition-[font-size] duration-350 dark:text-white">Class Warfare</span><span class="text-gray-950 transition-colors duration-350 dark:text-white">The Anti-Patterns</span><span class="flex text-gray-950 transition-colors duration-350 dark:text-white"><span>No. 4</span><span>·</span><span>2025</span></span></div></div></div></div></div></div></div></div><div class="relative max-w-full"><div aria-hidden="true" class="hidden h-4 items-end px-2 font-mono text-xs/6 whitespace-pre text-black/20 max-sm:px-4 2xl:visible 2xl:flex dark:text-white/25">text-4xl <span class="inline dark:hidden">text-gray-950</span><span class="hidden dark:inline">text-white</span> tracking-tighter text-balance</div><div class="2xl:before:hidden 2xl:after:hidden relative before:absolute before:top-0 before:h-px before:w-[200vw] before:bg-gray-950/5 dark:before:bg-white/10 before:-left-[100vw] after:absolute after:bottom-0 after:h-px after:w-[200vw] after:bg-gray-950/5 dark:after:bg-white/10 after:-left-[100vw]"><p class="text-sky-500 dark:text-sky-400 top-0 -left-[var(--gutter-width)] origin-bottom-right text-left font-mono text-sm font-semibold tracking-widest uppercase max-2xl:mb-4 max-2xl:px-2 max-sm:px-4 sm:text-xs 2xl:absolute 2xl:-translate-x-full 2xl:-translate-y-full 2xl:-rotate-90 2xl:text-right">Why Tailwind CSS?</p></div><div class="relative before:absolute before:top-0 before:h-px before:w-[200vw] before:bg-gray-950/5 dark:before:bg-white/10 before:-left-[100vw] after:absolute after:bottom-0 after:h-px after:w-[200vw] after:bg-gray-950/5 dark:after:bg-white/10 after:-left-[100vw]"><h2 class="max-w-lg px-2 text-[2.5rem]/10 font-medium tracking-tighter text-balance max-sm:px-4 2xl:mt-0">Built for the modern web.</h2></div><div aria-hidden="true" class="flex h-6 items-end px-2 font-mono text-xs/6 whitespace-pre text-black/20 max-sm:px-4 sm:h-10 dark:text-white/25">text-base <span class="inline dark:hidden">text-gray-950</span><span class="hidden dark:inline">text-white</span></div><div class="relative before:absolute before:top-0 before:h-px before:w-[200vw] before:bg-gray-950/5 dark:before:bg-white/10 before:-left-[100vw] after:absolute after:bottom-0 after:h-px after:w-[200vw] after:bg-gray-950/5 dark:after:bg-white/10 after:-left-[100vw]"><p class="max-w-(--breakpoint-md) px-2 text-base/7 text-gray-600 max-sm:px-4 dark:text-gray-400">Tailwind is unapologetically modern, and takes advantage of all the latest and greatest CSS features to make the developer experience as enjoyable as possible.</p></div><div class="mt-16 relative before:absolute before:top-0 before:h-px before:w-[200vw] before:bg-gray-950/5 dark:before:bg-white/10 before:-left-[100vw] after:absolute after:bottom-0 after:h-px after:w-[200vw] after:bg-gray-950/5 dark:after:bg-white/10 after:-left-[100vw]"><div class="grid w-full grid-flow-dense grid-cols-30 gap-2 bg-gray-950/5 p-2 dark:bg-white/10"><div class="@container isolate flex flex-col gap-2 overflow-hidden rounded-2xl bg-white p-2 outline outline-gray-950/5 dark:bg-gray-950 dark:outline-white/10 col-span-full"><div class="flex flex-col gap-6 p-6 @md:flex-row @md:gap-x-8 @md:p-8"><div class="flex h-18 w-28 shrink-0 items-center justify-center"><svg class="text-gray-950 [--site-background:var(--color-white)] dark:text-white dark:[--site-background:var(--color-gray-950)]" width="112" height="72" viewBox="0 0 112 72" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M62.3532 62.3285L94.3961 43.8285C95.5919 43.1382 96.1897 42.2333 96.1897 41.3285L96.1898 38.3285C96.1898 37.4237 95.5919 36.5189 94.3962 35.8285L48.4968 9.3285C46.1054 7.94779 42.228 7.94779 39.8366 9.3285L7.79365 27.8285C6.59792 28.5189 6.00005 29.4237 6.00005 30.3285V33.3427C6.00625 34.2428 6.6041 35.1418 7.7936 35.8285L53.6929 62.3285C56.0844 63.7092 59.9617 63.7092 62.3532 62.3285Z" fill="var(--site-background)"></path><path d="M7.7936 32.8285C6.59786 32.1381 5.99999 31.2333 6 30.3285C6.00001 29.4237 6.59787 28.5189 7.7936 27.8285L39.8365 9.3285C42.228 7.94779 46.1053 7.94779 48.4968 9.3285L94.3961 35.8285C95.5919 36.5189 96.1897 37.4237 96.1897 38.3285C96.1897 39.2333 95.5919 40.1381 94.3961 40.8285L62.3532 59.3285C59.9617 60.7092 56.0844 60.7092 53.6929 59.3285L7.7936 32.8285Z" fill="var(--site-background)"></path><path d="M6 30.3285C6.00001 29.4237 6.59787 28.5189 7.7936 27.8285L39.8365 9.3285C42.228 7.94779 46.1053 7.94779 48.4968 9.3285L94.3961 35.8285C95.5919 36.5189 96.1897 37.4237 96.1897 38.3285M6 30.3285C5.99999 31.2333 6.59786 32.1381 7.7936 32.8285L53.6929 59.3285C56.0844 60.7092 59.9617 60.7092 62.3532 59.3285L94.3961 40.8285C95.5919 40.1381 96.1897 39.2333 96.1897 38.3285M6 30.3285V33.3427C6.0062 34.2428 6.60405 35.1418 7.79355 35.8285L53.6929 62.3285C56.0844 63.7092 59.9617 63.7092 62.3531 62.3285L94.3961 43.8285C95.5918 43.1382 96.1897 42.2333 96.1897 41.3285L96.1897 38.3285" stroke="currentColor"></path><path d="M10.3922 31.3281C9.43562 30.7758 9.43562 29.8804 10.3922 29.3281L42.4351 10.8281C43.3917 10.2758 44.9427 10.2758 45.8992 10.8281L91.7986 37.3281C92.7552 37.8804 92.7552 38.7758 91.7986 39.3281L59.7557 57.8281C58.7991 58.3804 57.2481 58.3804 56.2916 57.8281L10.3922 31.3281Z" fill="var(--site-background)" stroke="currentColor" stroke-opacity="0.3"></path><path d="M91.1283 42.8285L104.119 35.3285C105.075 34.7762 105.554 34.0523 105.554 33.3284L105.554 30.3284C105.554 29.6046 105.075 28.8807 104.119 28.3284L70.3437 8.82843C68.4306 7.72386 65.3287 7.72386 63.4155 8.82843L50.4252 16.3284C49.4686 16.8807 48.9903 17.6046 48.9903 18.3284L48.9902 21.3284C48.9902 22.0523 49.4685 22.7762 50.4251 23.3285L84.2001 42.8285C86.1133 43.933 89.2151 43.933 91.1283 42.8285Z" fill="var(--site-background)"></path><path d="M105.554 30.3284C105.554 29.6046 105.075 28.8807 104.119 28.3284L70.3437 8.82843C68.4306 7.72386 65.3287 7.72386 63.4155 8.82843L50.4252 16.3284C49.4686 16.8807 48.9903 17.6046 48.9903 18.3284M105.554 30.3284C105.554 31.0523 105.075 31.7761 104.119 32.3284L91.1284 39.8284C89.2152 40.933 86.1133 40.933 84.2001 39.8284L50.4252 20.3284C49.4686 19.7761 48.9903 19.0523 48.9903 18.3284M105.554 30.3284L105.554 33.3284C105.554 34.0523 105.075 34.7762 104.119 35.3285L91.1283 42.8285C89.2151 43.933 86.1133 43.933 84.2001 42.8285L50.4251 23.3285C49.4685 22.7762 48.9902 22.0523 48.9902 21.3284L48.9903 18.3284" stroke="currentColor"></path><rect width="6" height="2" rx="1" transform="matrix(0.866025 -0.5 0.866025 0.5 56.4883 15.3281)" fill="currentColor"></rect></svg></div><div><span class="text-xl/10 font-medium text-gray-950 @md:text-2xl/10 dark:text-white">Responsive design</span><p class="max-w-xl text-sm/7 text-gray-600 dark:text-gray-400">Okay, it’s not exactly cutting edge, but just throw a screen size in front of literally any utility to apply it at a specific breakpoint.</p></div></div><div class="flex-1"></div><div class="h-112 p-4 sm:p-8 relative overflow-hidden rounded-lg bg-gray-950/[2.5%] after:pointer-events-none after:absolute after:inset-0 after:rounded-lg after:inset-ring after:inset-ring-gray-950/5 dark:after:inset-ring-white/10 bg-[image:radial-gradient(var(--pattern-fg)_1px,_transparent_0)] bg-[size:10px_10px] bg-fixed [--pattern-fg:var(--color-gray-950)]/5 dark:[--pattern-fg:var(--color-white)]/10"><div class="group flex flex-col gap-2"><div class="flex justify-start not-sm:hidden"><div class="flex w-10 shrink-0 grow-0 gap-2"><div class="h-8 w-px shrink-0 bg-gray-950/20 dark:bg-white/30"></div><span class="text-gray-950 dark:text-white"><div class="font-mono text-[13px]/7 text-gray-950 dark:text-white">Mobile</div></span></div><div class="ml-150 flex w-32 shrink-0 grow-0 gap-2"><div class="h-8 w-px shrink-0 bg-gray-950/20 not-group-has-data-sm:bg-gray-950/5 dark:bg-white/30 dark:not-group-has-data-sm:bg-white/10"></div><span class="not-group-has-data-sm:opacity-40"><div class="font-mono text-[13px]/7 text-gray-950 dark:text-white">sm</div></span></div><div class="flex w-64 shrink-0 grow-0 gap-2"><div class="h-8 w-px shrink-0 bg-gray-950/20 not-group-has-data-md:bg-gray-950/5 dark:bg-white/30 dark:not-group-has-data-md:bg-white/10"></div><span class="not-group-has-data-md:opacity-40"><div class="font-mono text-[13px]/7 text-gray-950 dark:text-white">md</div></span></div><div class="flex w-64 shrink-0 grow-0 gap-2"><div class="h-8 w-px shrink-0 bg-gray-950/20 not-group-has-data-lg:bg-gray-950/5 dark:bg-white/30 dark:not-group-has-data-lg:bg-white/10"></div><span class="not-group-has-data-lg:opacity-40"><div class="font-mono text-[13px]/7 text-gray-950 dark:text-white">lg</div></span></div><div class="flex w-64 shrink-0 grow-0 gap-2"><div class="h-8 w-px shrink-0 bg-gray-950/20 not-group-has-data-xl:bg-gray-950/5 dark:bg-white/30 dark:not-group-has-data-xl:bg-white/10"></div><span class="not-group-has-data-xl:opacity-40"><div class="font-mono text-[13px]/7 text-gray-950 dark:text-white">xl</div></span></div></div><div class="relative"><div class="@container max-sm:mr-0!" style="margin-right:0px"><div class="relative grid gap-10 rounded-t-2xl bg-white p-6 pb-10 ring ring-gray-950/5 @min-[theme(--breakpoint-lg)]:grid-cols-2 @min-[theme(--breakpoint-lg)]:px-20 @min-[theme(--breakpoint-lg)]:py-8 @min-[theme(--breakpoint-lg)]:pb-10 dark:bg-gray-950 dark:ring-white/10"><div class="flex flex-1 flex-col"><div class="relative mb-4 overflow-hidden rounded-lg @max-[theme(--breakpoint-xl)]:-mx-4 @max-[theme(--breakpoint-xl)]:-mt-4 @min-[theme(--breakpoint-lg)]:hidden"><div class="grid grid-cols-1 gap-2 @min-[theme(--breakpoint-sm)]:grid-cols-4"><img alt="" src="/_next/static/media/responsive-1.fd2e9248.png" class="h-48 w-full rounded-lg bg-gray-950/5 object-cover @min-[theme(--breakpoint-sm)]:col-span-2 @min-[theme(--breakpoint-sm)]:h-40"/><img alt="" src="/_next/static/media/responsive-2.8cfea49d.png" class="col-span-2 h-48 w-full rounded-lg bg-gray-950/5 object-cover @max-[theme(--breakpoint-sm)]:hidden @min-[theme(--breakpoint-md)]:col-span-1 @min-[theme(--breakpoint-sm)]:h-40"/><img alt="" src="/_next/static/media/responsive-3.e7467feb.png" class="h-48 w-full rounded-lg bg-gray-950/5 object-cover @max-[theme(--breakpoint-md)]:hidden @min-[theme(--breakpoint-sm)]:h-40"/></div><div class="absolute inset-0 flex flex-col justify-end gap-2 bg-linear-to-b from-transparent via-transparent to-gray-950 p-6 @min-[theme(--breakpoint-sm)]:hidden"><span class="text-sm/6 font-semibold text-white/80">Entire house</span><span class="text-xl/6 font-semibold text-white">Beach House on Lake Huron</span></div></div><span class="font-medium text-gray-500 @max-[theme(--breakpoint-sm)]:hidden dark:text-gray-500">Entire house</span><div class="grid grid-cols-1 gap-4 @min-[theme(--breakpoint-sm)]:grid-cols-[1fr_auto] @min-[theme(--breakpoint-xl)]:grid-cols-1"><div><span class="mt-2 text-3xl font-semibold text-gray-950 @max-[theme(--breakpoint-sm)]:hidden dark:text-white">Beach House on Lake Huron</span><span class="mt-2 flex gap-2"><span class="flex items-center gap-1 text-pink-600 dark:text-pink-500"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon" class="size-4"><path fill-rule="evenodd" d="M8 1.75a.75.75 0 0 1 .692.462l1.41 3.393 3.664.293a.75.75 0 0 1 .428 1.317l-2.791 2.39.853 3.575a.75.75 0 0 1-1.12.814L7.998 12.08l-3.135 1.915a.75.75 0 0 1-1.12-.814l.852-3.574-2.79-2.39a.75.75 0 0 1 .427-1.318l3.663-.293 1.41-3.393A.75.75 0 0 1 8 1.75Z" clip-rule="evenodd"></path></svg><span class="text-sm/6 font-medium">2.66</span></span><span class="text-sm/6 text-gray-500">(128 reviews)</span><span class="text-pink-300 dark:text-gray-600">·</span><span class="text-sm/6 font-medium text-pink-600 dark:text-pink-500">Bayfield, ON</span></span></div><div class="@min-[theme(--breakpoint-lg)]:hidden"><button type="button" class="w-full rounded-lg bg-pink-500 px-3 py-2 text-sm/6 font-bold text-white @min-[theme(--breakpoint-sm)]:w-auto">Check availability</button></div></div><div><p class="mt-4 line-clamp-2 text-sm/6 text-gray-600 @min-[theme(--breakpoint-xl)]:max-w-md dark:text-gray-400">This sunny and spacious room is for those traveling light and looking for a comfy and cozy place to lay their head for a night... <span class="hidden font-bold text-pink-600 before:text-white sm:@max-[theme(--breakpoint-sm)]:inline-block dark:text-pink-500">Show more</span></p><span class="mt-3 inline-block shrink-0 text-sm/6 font-semibold text-pink-600 dark:text-pink-500">Show more</span></div><div class="mt-6 @max-[theme(--breakpoint-lg)]:hidden"><button type="button" class="w-auto rounded-lg bg-pink-500 px-3 py-2 text-sm/6 font-bold text-white">Check availability</button></div></div><div class="grid grid-cols-4 grid-rows-2 gap-2 @max-[theme(--breakpoint-lg)]:hidden"><img alt="" src="/_next/static/media/responsive-1.fd2e9248.png" class="col-span-4 h-[150px] w-full rounded-lg bg-gray-950/5 object-cover @min-[theme(--breakpoint-xl)]:col-span-2 @min-[theme(--breakpoint-xl)]:row-span-2 @min-[theme(--breakpoint-xl)]:aspect-square @min-[theme(--breakpoint-xl)]:h-[308px]"/><img alt="" src="/_next/static/media/responsive-2.8cfea49d.png" class="col-span-2 h-[150px] w-full rounded-lg bg-gray-950/5 @max-[theme(--breakpoint-xl)]:aspect-square @min-[theme(--breakpoint-xl)]:col-span-1"/><img alt="" src="/_next/static/media/responsive-3.e7467feb.png" class="col-span-2 h-[150px] w-full rounded-lg bg-gray-950/5 @max-[theme(--breakpoint-xl)]:aspect-square @min-[theme(--breakpoint-xl)]:col-span-1"/><div class="contents @max-[theme(--breakpoint-xl)]:hidden"><img alt="" src="/_next/static/media/responsive-4.8e943ba2.png" class="aspect-square size-[150px] rounded-lg bg-gray-950/5"/><img alt="" src="/_next/static/media/responsive-5.660185c2.png" class="aspect-square size-[150px] rounded-lg bg-gray-950/5"/></div></div></div></div><div><div class="relative ml-100"><div></div></div><div title="Drag to resize" class="pointer-events-auto absolute top-[186px] -right-4 z-50 -mt-6 h-12 w-1.5 cursor-ew-resize rounded-full max-lg:hidden bg-slate-950/20 group-data-dragging:bg-slate-950/40 hover:bg-slate-950/40 dark:bg-slate-500 dark:group-data-dragging:bg-slate-300 dark:hover:bg-slate-300" draggable="false" style="transform:none;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;touch-action:pan-y"></div></div></div></div></div></div><div class="@container isolate flex flex-col gap-2 overflow-hidden rounded-2xl bg-white p-2 outline outline-gray-950/5 dark:bg-gray-950 dark:outline-white/10 col-span-full md:col-span-15"><div class="flex flex-col gap-6 p-6 @md:flex-row @md:gap-x-8 @md:p-8"><div class="flex h-18 w-28 shrink-0 items-center justify-center"><svg class="text-gray-950 [--site-background:var(--color-white)] dark:text-white dark:[--site-background:var(--color-gray-950)]" width="112" height="72" viewBox="0 0 112 72" fill="none" xmlns="http://www.w3.org/2000/svg"><rect width="112" height="72" fill="var(--site-background)"></rect><path d="M66.4883 54.4995L107.192 30.9995V27.9995M66.4883 54.4995L25.7852 30.9995V27.9995M66.4883 54.4995V51.4995M25.7852 27.9995L66.4883 4.49951L107.192 27.9995M25.7852 27.9995L66.4883 51.4995M107.192 27.9995L66.4883 51.4995" stroke="currentColor"></path><path d="M4.99414 34.9995L45.6973 11.4995L50.0289 14.0003L47.432 15.4996L45.7004 14.4999L10.1934 34.9999L41.3703 52.9999L52.6288 46.4998M4.99414 34.9995L45.6973 58.4995M4.99414 34.9995L4.9953 36.9995L45.6985 60.4995M45.6973 58.4995L45.6985 60.4995M45.6973 58.4995L59.5551 50.4987M45.6985 60.4995L61.2878 51.499M30.9766 46.9998V35.8282C30.9766 35.3036 31.224 34.8124 31.655 34.3913" stroke="currentColor"></path><g filter="url(#filter0_f_457_1608)"><path d="M25.7852 30.9998L50.0308 17.0015M66.4883 7.49976L107.192 30.9998M66.4883 7.49976V4.49976M66.4883 7.49976L52.6277 15.5022M86.3961 34.9984L86.3972 36.9984L63.8831 49.9969M86.3961 34.9984L62.1504 48.9966M86.3961 34.9984L52.6277 15.5022M56.9542 32.9987H35.8724C35.4346 32.9987 35.0102 33.0319 34.6064 33.0941M53.4893 32.9988V27.413C53.4893 26.6319 54.586 25.9988 55.9388 25.9988H65.6137M55.2241 44.9977L76.8728 32.4988L50.0308 17.0015M50.0308 17.0015L52.6277 15.5022M43.5322 24.2488C45.2062 25.2153 45.2062 26.7823 43.5322 27.7488C41.8581 28.7153 39.144 28.7153 37.47 27.7488C35.796 26.7823 35.796 25.2153 37.47 24.2488C39.144 23.2823 41.8581 23.2823 43.5322 24.2488Z" stroke="currentColor" stroke-opacity="0.3"></path></g><defs><filter id="filter0_f_457_1608" x="23.5352" y="2.49976" width="85.9062" height="49.9302" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"></feFlood><feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"></feBlend><feGaussianBlur stdDeviation="1" result="effect1_foregroundBlur_457_1608"></feGaussianBlur></filter></defs></svg></div><div><span class="text-xl/10 font-medium text-gray-950 @md:text-2xl/10 dark:text-white">Filters</span><p class="max-w-xl text-sm/7 text-gray-600 dark:text-gray-400">What’s a website these days without a few backdrop blurs? Keep stacking filters until your designer asks you to please, please stop.</p></div></div><div class="flex-1"></div><div class="h-112 relative overflow-hidden rounded-lg bg-gray-950/[2.5%] after:pointer-events-none after:absolute after:inset-0 after:rounded-lg after:inset-ring after:inset-ring-gray-950/5 dark:after:inset-ring-white/10 bg-[image:radial-gradient(var(--pattern-fg)_1px,_transparent_0)] bg-[size:10px_10px] bg-fixed [--pattern-fg:var(--color-gray-950)]/5 dark:[--pattern-fg:var(--color-white)]/10"><div class="@container relative flex size-full items-center justify-center"><div class="no-scrollbar z-10 -my-1 flex snap-x snap-mandatory gap-(--gap) overflow-x-auto py-1 [--gap:--spacing(10)] [--size:--spacing(72)]"><div class="flex snap-proximity snap-end"><div class="w-[calc(50cqw-(var(--size)/2)-(var(--gap)))]"></div></div><div data-target="true" class="flex snap-center snap-always flex-col items-center gap-2"><div class="font-mono text-[13px]/7 text-gray-950 dark:text-white">blur-sm</div><div class="shadow ring inset-ring ring-gray-950/10 inset-ring-white/20"><div class="size-(--size) bg-white/15 backdrop-blur-sm"></div></div></div><div data-target="true" class="flex snap-center snap-always flex-col items-center gap-2"><div class="font-mono text-[13px]/7 text-gray-950 dark:text-white">brightness-150</div><div class="shadow ring inset-ring ring-gray-950/10 inset-ring-white/20"><div class="size-(--size) bg-white/15 backdrop-brightness-150"></div></div></div><div data-target="true" class="flex snap-center snap-always flex-col items-center gap-2"><div class="font-mono text-[13px]/7 text-gray-950 dark:text-white">grayscale</div><div class="shadow ring inset-ring ring-gray-950/10 inset-ring-white/20"><div class="size-(--size) bg-white/15 backdrop-grayscale"></div></div></div><div data-target="true" class="flex snap-center snap-always flex-col items-center gap-2"><div class="font-mono text-[13px]/7 text-gray-950 dark:text-white">contrast-150</div><div class="shadow ring inset-ring ring-gray-950/10 inset-ring-white/20"><div class="size-(--size) bg-white/15 backdrop-contrast-150"></div></div></div><div data-target="true" class="flex snap-center snap-always flex-col items-center gap-2"><div class="font-mono text-[13px]/7 text-gray-950 dark:text-white">saturate-200</div><div class="shadow ring inset-ring ring-gray-950/10 inset-ring-white/20"><div class="size-(--size) bg-white/15 backdrop-saturate-200"></div></div></div><div data-target="true" class="flex snap-center snap-always flex-col items-center gap-2"><div class="font-mono text-[13px]/7 text-gray-950 dark:text-white">sepia</div><div class="shadow ring inset-ring ring-gray-950/10 inset-ring-white/20"><div class="size-(--size) bg-white/15 backdrop-sepia"></div></div></div><div class="flex snap-proximity snap-end"><div class="w-[calc(50cqw-(var(--size)/2)-(var(--gap)))]"></div></div></div><div class="absolute inset-0 mt-8 flex items-center justify-center"><img alt="" src="/_next/static/media/filters.debd0951.png" class="size-64 inset-ring inset-ring-gray-950/10"/></div></div></div></div><div class="@container isolate flex flex-col gap-2 overflow-hidden rounded-2xl bg-white p-2 outline outline-gray-950/5 dark:bg-gray-950 dark:outline-white/10 col-span-full md:col-span-15"><div class="flex flex-col gap-6 p-6 @md:flex-row @md:gap-x-8 @md:p-8"><div class="flex h-18 w-28 shrink-0 items-center justify-center"><svg class="text-gray-950 [--site-background:var(--color-white)] dark:text-white dark:[--site-background:var(--color-gray-950)]" width="112" height="72" viewBox="0 0 112 72" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M71.7615 59.503L94.2781 46.503C97.7457 44.501 99.4795 41.8771 99.4796 39.2531L99.4796 36.2531C99.4796 33.6291 97.7458 31.0051 94.2782 29.003C87.3429 24.999 76.0987 24.999 69.1634 29.003L46.6468 42.003C43.1791 44.0051 41.4453 46.6291 41.4453 49.2531V52.2531C41.4453 54.8771 43.1791 57.501 46.6467 59.503C53.582 63.5071 64.8262 63.5071 71.7615 59.503Z" fill="var(--site-background)"></path><path d="M99.4796 36.2531C99.4796 33.6291 97.7458 31.0051 94.2782 29.003C87.3429 24.999 76.0987 24.999 69.1634 29.003L46.6468 42.003C43.1791 44.0051 41.4453 46.6291 41.4453 49.2531M99.4796 36.2531C99.4796 38.8771 97.7458 41.501 94.2782 43.503L71.7615 56.503C64.8263 60.5071 53.582 60.5071 46.6468 56.503C43.1792 54.501 41.4453 51.8771 41.4453 49.2531M99.4796 36.2531L99.4796 39.2531C99.4795 41.8771 97.7457 44.501 94.2781 46.503L71.7615 59.503C64.8262 63.5071 53.582 63.5071 46.6467 59.503C43.1791 57.501 41.4453 54.8771 41.4453 52.2531V49.2531" stroke="currentColor"></path><path d="M71.7601 41.0028C77.2604 44.1784 86.1783 44.1784 91.6786 41.0028C94.4288 39.415 95.8039 37.3339 95.8039 35.2528V32.2528C95.8039 30.1717 94.4288 28.0906 91.6786 26.5028C86.1783 23.3272 77.2604 23.3272 71.76 26.5028C69.0165 28.0868 67.6415 30.1616 67.6348 32.2377V35.2528C67.6348 37.3339 69.0099 39.415 71.7601 41.0028Z" fill="var(--site-background)"></path><path d="M67.6348 32.2377C67.6281 34.3238 69.0032 36.4111 71.76 38.0028C77.2604 41.1785 86.1783 41.1785 91.6786 38.0028C94.4288 36.415 95.8039 34.3339 95.8039 32.2528M67.6348 32.2377C67.6415 30.1616 69.0165 28.0868 71.76 26.5028C77.2604 23.3272 86.1783 23.3272 91.6786 26.5028C94.4288 28.0906 95.8039 30.1717 95.8039 32.2528M67.6348 32.2377V35.2528C67.6348 37.3339 69.0099 39.415 71.7601 41.0028C77.2604 44.1784 86.1783 44.1784 91.6786 41.0028C94.4288 39.415 95.8039 37.3339 95.8039 35.2528V32.2528" stroke="currentColor"></path><path d="M75.2239 28.5L76.956 29.5M81.719 26.9492V28.3634M88.2141 28.5L86.4821 29.5M90.9046 32.25H88.4551M86.4827 35L88.2147 36M81.719 36.1406V37.5548M76.9553 35L75.2233 36M74.9827 32.25H72.5332M83.8841 31C85.0799 31.6904 85.0799 32.8096 83.8841 33.5C82.6884 34.1904 80.7497 34.1904 79.554 33.5C78.3583 32.8096 78.3583 31.6904 79.554 31C80.7497 30.3096 82.6884 30.3096 83.8841 31Z" stroke="currentColor" stroke-linecap="round"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M64.8328 29.503L42.3161 42.503C35.3809 46.5071 24.1367 46.5071 17.2014 42.503C13.7413 40.5053 12.0075 37.8883 12 35.27V32.2531C12 29.7918 13.5255 27.3305 16.5765 25.3824C17.9961 23.2104 20.98 21.4814 24.735 20.6535L39.7181 12.003C46.6533 7.99898 57.8976 7.99898 64.8328 12.003C68.3005 14.0051 70.0343 16.6291 70.0343 19.2531V22.2531C70.0342 24.8771 68.3004 27.501 64.8328 29.503Z" fill="var(--site-background)"></path><path d="M12 32.2531C12 29.6291 13.7338 27.0051 17.2015 25.003L39.7181 12.003C46.6534 7.99898 57.8976 7.99898 64.8328 12.003C68.3005 14.0051 70.0343 16.6291 70.0343 19.2531M12 32.2531C12 34.8771 13.7339 37.501 17.2015 39.503C24.1367 43.5071 35.3809 43.5071 42.3162 39.503L64.8329 26.503C68.3005 24.501 70.0343 21.8771 70.0343 19.2531M12 32.2531V35.27C12.0075 37.8883 13.7413 40.5053 17.2014 42.503C24.1367 46.5071 35.3809 46.5071 42.3162 42.503L64.8328 29.503C68.3004 27.501 70.0343 24.8771 70.0343 22.2531V19.2531" stroke="currentColor"></path><path d="M15.6738 31.2531C15.6738 35.7441 21.9797 39.3848 29.7584 39.3848C37.5371 39.3848 43.843 35.7441 43.843 31.2531L43.843 28.2531C43.843 23.762 37.5371 20.1213 29.7585 20.1213C21.9798 20.1213 15.6739 23.762 15.6739 28.2531L15.6738 31.2531Z" fill="var(--site-background)"></path><path d="M30.1939 23.6619L30.3702 22.9495L30.5465 23.6619C30.6235 23.973 31.0469 24.2175 31.5857 24.2619L32.8197 24.3637L31.5857 24.4655C31.0469 24.5099 30.6235 24.7543 30.5465 25.0655L30.3702 25.7779L30.1939 25.0655C30.117 24.7543 29.6936 24.5099 29.1547 24.4655L27.9207 24.3637L29.1547 24.2619C29.6936 24.2175 30.117 23.973 30.1939 23.6619Z" fill="currentColor"></path><path d="M35.0507 26.4584L35.2692 25.0708L35.4877 26.4584C35.5391 26.7848 35.9722 27.0481 36.5342 27.0944L37.7187 27.1921L36.5342 27.2898C35.9722 27.3361 35.5391 27.5994 35.4877 27.9258L35.2692 29.3134L35.0507 27.9258C34.9993 27.5994 34.5662 27.3361 34.0042 27.2898L32.8197 27.1921L34.0042 27.0944C34.5662 27.0481 34.9993 26.7848 35.0507 26.4584Z" fill="currentColor"></path><path d="M43.843 28.2531C43.843 28.2531 43.843 28.253 43.843 28.2531ZM43.843 28.2531C43.8428 32.744 37.537 36.3848 29.7585 36.3848C21.9798 36.3848 15.6739 32.7441 15.6739 28.2531M43.843 28.2531C43.843 23.762 37.5371 20.1213 29.7585 20.1213C21.9798 20.1213 15.6739 23.762 15.6739 28.2531M43.843 28.2531L43.843 31.2531C43.843 35.7441 37.5371 39.3848 29.7584 39.3848C21.9797 39.3848 15.6738 35.7441 15.6738 31.2531L15.6739 28.2531M29.7579 33.5561C24.6848 33.5561 20.5723 31.1817 20.5723 28.2528C20.5723 26.2428 22.509 24.494 25.3637 23.5945C24.6514 24.3481 24.2465 25.2125 24.2465 26.1314C24.2465 29.0604 28.359 31.4347 33.4321 31.4347C35.0238 31.4347 36.521 31.201 37.8262 30.7897C36.2682 32.4379 33.2392 33.5561 29.7579 33.5561ZM30.3702 22.9495L30.1939 23.6619C30.117 23.973 29.6936 24.2175 29.1547 24.2619L27.9207 24.3637L29.1547 24.4655C29.6936 24.5099 30.117 24.7543 30.1939 25.0655L30.3702 25.7779L30.5465 25.0655C30.6235 24.7543 31.0469 24.5099 31.5857 24.4655L32.8197 24.3637L31.5857 24.2619C31.0469 24.2175 30.6235 23.973 30.5465 23.6619L30.3702 22.9495ZM35.2692 25.0708L35.0507 26.4584C34.9993 26.7848 34.5662 27.0481 34.0042 27.0944L32.8197 27.1921L34.0042 27.2898C34.5662 27.3361 34.9993 27.5994 35.0507 27.9258L35.2692 29.3134L35.4877 27.9258C35.5391 27.5994 35.9722 27.3361 36.5342 27.2898L37.7187 27.1921L36.5342 27.0944C35.9722 27.0481 35.5391 26.7848 35.4877 26.4584L35.2692 25.0708Z" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path></svg></div><div><span class="text-xl/10 font-medium text-gray-950 @md:text-2xl/10 dark:text-white">Dark mode</span><p class="max-w-xl text-sm/7 text-gray-600 dark:text-gray-400">If you’re not a fan of burning your retinas, just stick <code class="font-medium text-gray-950 dark:text-white">dark:</code> in front of any color to apply it in dark mode.</p></div></div><div class="flex-1"></div><div class="h-112 p-4 sm:p-8 relative overflow-hidden rounded-lg bg-gray-950/[2.5%] after:pointer-events-none after:absolute after:inset-0 after:rounded-lg after:inset-ring after:inset-ring-gray-950/5 dark:after:inset-ring-white/10 bg-[image:radial-gradient(var(--pattern-fg)_1px,_transparent_0)] bg-[size:10px_10px] bg-fixed [--pattern-fg:var(--color-gray-950)]/5 dark:[--pattern-fg:var(--color-white)]/10"><div class="@container"><div class="my-4 -mb-16 sm:my-0 @min-[--theme(--breakpoint-sm)]:-mx-8"><div class="absolute inset-x-1/2 inset-y-0 z-10 h-screen w-1 -translate-x-1/2 bg-sky-400" style="transform:none"></div><div><div title="Drag to resize" class="absolute inset-1/2 z-10 flex size-10 shrink-0 -translate-1/2 cursor-ew-resize items-center justify-center rounded-full bg-sky-500" draggable="false" style="transform:none;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;touch-action:pan-y"><svg class="relative z-10" width="15" height="8" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="m1 4 3-3M1 4l3 3M1 4h13m0 0-3-3m3 3-3 3" class="stroke-white" stroke-linecap="round" stroke-linejoin="round"></path></svg><div class="absolute inset-1 rounded-full bg-sky-500 not-in-data-dragging:animate-ping"></div></div></div><div class="isolate flex h-full w-full items-center justify-center"><div class="relative grid h-112 w-[375px] grid-cols-1 grid-rows-1 overflow-hidden rounded-t-4xl bg-gray-950/10 outline outline-gray-950/10 dark:outline-white/10"><div class="col-start-1 row-start-1"><img class="absolute inset-0 [clip:rect(0px,calc(var(--midpoint)-var(--offset)),621px,0px)]" src="/_next/static/media/dark-mode.light.288405b1.png" style="--offset:0px"/></div><div class="col-start-1 row-start-1"><img src="/_next/static/media/dark-mode.dark.7219ba2e.png"/></div></div></div></div></div></div></div><div class="@container isolate flex flex-col gap-2 overflow-hidden rounded-2xl bg-white p-2 outline outline-gray-950/5 dark:bg-gray-950 dark:outline-white/10 col-span-full md:col-span-15 xl:col-span-12"><div class="flex flex-col gap-6 p-6 @md:flex-row @md:gap-x-8 @md:p-8"><div class="flex h-18 w-28 shrink-0 items-center justify-center"><svg class="text-gray-950 [--site-background:var(--color-white)] dark:text-white dark:[--site-background:var(--color-gray-950)]" width="112" height="72" viewBox="0 0 112 72" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#clip0_408_5776)"><path d="M52.1952 5.0003L4.56383 32.5003C3.60721 33.0526 3.12888 33.7765 3.12891 34.5004V37.5004C3.12892 38.2242 3.60721 38.9481 4.56378 39.5003L52.1952 67.0003C54.1083 68.1049 57.2102 68.1049 59.1234 67.0003L106.755 39.5003C107.711 38.9481 108.19 38.2242 108.19 37.5004V34.5004C108.19 33.7765 107.711 33.0526 106.755 32.5003L59.1234 5.0003C57.2103 3.89573 54.1084 3.89573 52.1952 5.0003Z" fill="var(--site-background)"></path><path d="M3.12891 34.5004C3.12888 33.7765 3.60721 33.0526 4.56383 32.5003L52.1952 5.0003C54.1084 3.89573 57.2103 3.89573 59.1234 5.0003L106.755 32.5003C107.711 33.0526 108.19 33.7765 108.19 34.5004M3.12891 34.5004C3.12893 35.2242 3.60727 35.948 4.56383 36.5003L52.1952 64.0003C54.1084 65.1049 57.2103 65.1049 59.1234 64.0003L106.755 36.5003C107.711 35.948 108.19 35.2242 108.19 34.5004M3.12891 34.5004V37.5004C3.12892 38.2242 3.60721 38.9481 4.56378 39.5003L52.1952 67.0003C54.1083 68.1049 57.2102 68.1049 59.1234 67.0003L106.755 39.5003C107.711 38.9481 108.19 38.2242 108.19 37.5004V34.5004" stroke="currentColor"></path><path d="M13.2223 38.5L59.9877 11.5C60.4659 11.2239 61.2414 11.2239 61.7197 11.5L103.289 35.5M13.2223 38.5L54.7915 62.5C55.2698 62.7761 56.0453 62.7761 56.5236 62.5L103.289 35.5M13.2223 38.5L12.3563 38C11.878 37.7239 11.878 37.2761 12.3563 37L59.9877 9.5C60.4659 9.22386 61.2414 9.22386 61.7197 9.5L104.155 34C104.633 34.2761 104.633 34.7239 104.155 35L103.289 35.5" stroke="currentColor"></path><path d="M10.7309 33.4928C10.7277 33.2238 10.5484 32.9554 10.1928 32.7501C9.4754 32.3359 8.3122 32.3359 7.59476 32.7501C7.23924 32.9554 7.0599 33.2238 7.05673 33.4928M10.7309 33.4928C10.7341 33.7667 10.5548 34.0412 10.1928 34.2501C9.4754 34.6643 8.3122 34.6643 7.59476 34.2501C7.23284 34.0412 7.0535 33.7667 7.05673 33.4928M10.7309 33.4928V34.5001C10.7308 34.7715 10.5515 35.043 10.1928 35.2501C9.47536 35.6643 8.31216 35.6643 7.59472 35.2501C7.24053 35.0456 7.0612 34.7783 7.05673 34.5103V33.4928" stroke="currentColor" stroke-opacity="0.3"></path><path d="M15.061 31.0001C15.061 30.7287 14.8816 30.4572 14.5229 30.2501C13.8054 29.8359 12.6422 29.8359 11.9248 30.2501C11.5681 30.4561 11.3887 30.7257 11.3867 30.9956M15.061 31.0001C15.0609 31.2716 14.8816 31.543 14.5229 31.7501C13.8054 32.1643 12.6422 32.1643 11.9248 31.7501C11.5641 31.5419 11.3847 31.2685 11.3867 30.9956M15.061 31.0001V32.0033C15.0596 32.2736 14.8802 32.5438 14.5229 32.7501C13.8054 33.1643 12.6422 33.1643 11.9248 32.7501C11.5675 32.5438 11.3881 32.2736 11.3867 32.0033V30.9956" stroke="currentColor" stroke-opacity="0.3"></path><path d="M15.7168 28.5001C15.7168 28.7716 15.8962 29.043 16.2549 29.2501C16.9723 29.6643 18.1355 29.6643 18.853 29.2501C19.2117 29.043 19.391 28.7716 19.391 28.5001M15.7168 28.5001C15.7168 28.2287 15.8962 27.9572 16.2549 27.7501C16.9723 27.3359 18.1355 27.3359 18.853 27.7501C19.2117 27.9572 19.391 28.2287 19.391 28.5001M15.7168 28.5001L15.7169 29.5001C15.7169 29.7715 15.8962 30.043 16.2549 30.2501C16.9724 30.6643 18.1356 30.6643 18.853 30.2501C19.2117 30.043 19.3911 29.7715 19.3911 29.5001L19.391 28.5001" stroke="currentColor" stroke-opacity="0.3"></path><rect width="8" height="2" rx="0.5" transform="matrix(0.866025 -0.5 0.866025 0.5 24.4805 39.5)" fill="currentColor" fill-opacity="0.3"></rect><rect width="8" height="2" rx="0.5" transform="matrix(0.866025 -0.5 0.866025 0.5 41.8027 49.5)" fill="currentColor" fill-opacity="0.3"></rect><rect width="8" height="2" rx="0.5" transform="matrix(0.866025 -0.5 0.866025 0.5 19.2852 38.5)" fill="currentColor" fill-opacity="0.3"></rect><rect width="5" height="2" rx="0.5" transform="matrix(0.866025 -0.5 0.866025 0.5 33.1406 34.5)" fill="currentColor" fill-opacity="0.3"></rect><rect width="5" height="2" rx="0.5" transform="matrix(0.866025 -0.5 0.866025 0.5 50.4629 44.5)" fill="currentColor" fill-opacity="0.3"></rect><rect width="7" height="2" rx="0.5" transform="matrix(0.866025 -0.5 0.866025 0.5 29.6777 40.5)" fill="currentColor" fill-opacity="0.3"></rect><rect width="7" height="2" rx="0.5" transform="matrix(0.866025 -0.5 0.866025 0.5 46.998 50.5)" fill="currentColor" fill-opacity="0.3"></rect><rect width="4" height="2" rx="0.5" transform="matrix(0.866025 -0.5 0.866025 0.5 34.873 41.5)" fill="currentColor" fill-opacity="0.3"></rect><rect width="4" height="2" rx="0.5" transform="matrix(0.866025 -0.5 0.866025 0.5 53.9258 54.5)" fill="currentColor" fill-opacity="0.3"></rect><rect width="4" height="2" rx="0.5" transform="matrix(0.866025 -0.5 0.866025 0.5 52.1934 51.5)" fill="currentColor" fill-opacity="0.3"></rect><rect width="4" height="2" rx="0.5" transform="matrix(0.866025 -0.5 0.866025 0.5 36.6055 44.5)" fill="currentColor" fill-opacity="0.3"></rect><rect width="4" height="2" rx="0.5" transform="matrix(0.866025 -0.5 0.866025 0.5 55.6582 57.5)" fill="currentColor" fill-opacity="0.3"></rect><rect width="4" height="2" rx="0.5" transform="matrix(0.866025 -0.5 0.866025 0.5 38.3379 47.5)" fill="currentColor" fill-opacity="0.3"></rect><rect width="7" height="2" rx="0.5" transform="matrix(0.866025 -0.5 0.866025 0.5 39.2031 31)" fill="currentColor" fill-opacity="0.3"></rect><rect width="5" height="2" rx="0.5" transform="matrix(0.866025 -0.5 0.866025 0.5 56.5234 41)" fill="currentColor" fill-opacity="0.3"></rect><rect width="6" height="2" rx="0.5" transform="matrix(0.866025 -0.5 0.866025 0.5 37.4727 36)" fill="currentColor" fill-opacity="0.3"></rect><rect width="6" height="2" rx="0.5" transform="matrix(0.866025 -0.5 0.866025 0.5 54.793 46)" fill="currentColor" fill-opacity="0.3"></rect><rect width="9" height="2" rx="0.5" transform="matrix(0.866025 -0.5 0.866025 0.5 40.0703 38.5)" fill="currentColor" fill-opacity="0.3"></rect><rect width="9" height="2" rx="0.5" transform="matrix(0.866025 -0.5 0.866025 0.5 57.3906 48.5)" fill="currentColor" fill-opacity="0.3"></rect><rect width="4" height="2" rx="0.5" transform="matrix(0.866025 -0.5 0.866025 0.5 44.3984 32)" fill="currentColor" fill-opacity="0.3"></rect><rect width="12" height="2" rx="0.5" transform="matrix(0.866025 -0.5 0.866025 0.5 61.7207 42)" fill="currentColor" fill-opacity="0.3"></rect><rect width="7" height="2" rx="0.5" transform="matrix(0.866025 -0.5 0.866025 0.5 49.5957 33)" fill="currentColor" fill-opacity="0.3"></rect><rect width="7" height="2" rx="0.5" transform="matrix(0.866025 -0.5 0.866025 0.5 66.918 43)" fill="currentColor" fill-opacity="0.3"></rect><rect width="10" height="2" rx="0.5" transform="matrix(0.866025 -0.5 0.866025 0.5 57.3906 28.5)" fill="currentColor" fill-opacity="0.3"></rect><rect width="10" height="2" rx="0.5" transform="matrix(0.866025 -0.5 0.866025 0.5 74.7109 38.5)" fill="currentColor" fill-opacity="0.3"></rect></g><defs><clipPath id="clip0_408_5776"><rect width="112" height="72" fill="var(--site-background)"></rect></clipPath></defs></svg></div><div><span class="text-xl/10 font-medium text-gray-950 @md:text-2xl/10 dark:text-white">CSS variables</span><p class="max-w-xl text-sm/7 text-gray-600 dark:text-gray-400">Customizing your theme is as simple as creating a few CSS variables.</p></div></div><div class="flex-1"></div><div class="h-112 p-4 sm:p-8 relative overflow-hidden rounded-lg bg-gray-950/[2.5%] after:pointer-events-none after:absolute after:inset-0 after:rounded-lg after:inset-ring after:inset-ring-gray-950/5 dark:after:inset-ring-white/10 bg-[image:radial-gradient(var(--pattern-fg)_1px,_transparent_0)] bg-[size:10px_10px] bg-fixed [--pattern-fg:var(--color-gray-950)]/5 dark:[--pattern-fg:var(--color-white)]/10"><div class="-mr-16 -mb-16"><div class="rounded-xl bg-gray-950"><div class="rounded-xl p-1 text-sm scheme-dark dark:inset-ring dark:inset-ring-white/10"><div class="flex gap-2 p-2"><span class="size-3 rounded-full bg-white/20"></span><span class="size-3 rounded-full bg-white/20"></span><span class="size-3 rounded-full bg-white/20"></span></div><div class="with-line-numbers text-[13px]/6 *:*:p-3!"><div class="*:flex *:*:max-w-none *:*:shrink-0 *:*:grow *:overflow-auto *:rounded-lg *:bg-white/10! *:p-5 dark:*:bg-white/5! **:[.line]:isolate **:[.line]:not-last:min-h-[1lh] *:inset-ring *:inset-ring-white/10 dark:*:inset-ring-white/5"><pre class="shiki tailwindcss-theme" style="background-color:transparent;color:var(--color-slate-50)" tabindex="0"><code><div class="line"><span style="color:var(--color-slate-300)">@theme</span><span style="color:var(--color-slate-300)"> {</span></div><div class="line"><span style="color:var(--color-teal-200)"> --font-sans</span><span style="color:var(--color-slate-300)">: </span><span style="color:var(--color-sky-300)">"Inter"</span><span style="color:var(--color-slate-300)">,</span><span style="color:var(--color-slate-50)"> sans-serif</span><span style="color:var(--color-slate-300)">;</span></div><div class="line"><span style="color:var(--color-teal-200)"> --font-mono</span><span style="color:var(--color-slate-300)">: </span><span style="color:var(--color-sky-300)">"IBM Plex Mono"</span><span style="color:var(--color-slate-300)">,</span><span style="color:var(--color-slate-50)"> monospace</span><span style="color:var(--color-slate-300)">;</span></div><div class="line"></div><div class="line"><span style="color:var(--color-teal-200)"> --text-tiny</span><span style="color:var(--color-slate-300)">: </span><span style="color:var(--color-slate-50)">0.625</span><span style="color:var(--color-teal-100)">rem</span><span style="color:var(--color-slate-300)">;</span></div><div class="line"><span style="color:var(--color-teal-200)"> --text-tiny--line-height</span><span style="color:var(--color-slate-300)">: </span><span style="color:var(--color-slate-50)">1.5</span><span style="color:var(--color-teal-100)">rem</span><span style="color:var(--color-slate-300)">;</span></div><div class="line"></div><div class="line"><span style="color:var(--color-teal-200)"> --color-mint-100</span><span style="color:var(--color-slate-300)">: </span><span style="color:var(--color-blue-200)">oklch</span><span style="color:var(--color-slate-300)">(</span><span style="color:var(--color-slate-50)">0.97 0.15 145</span><span style="color:var(--color-slate-300)">);</span></div><div class="line"><span style="color:var(--color-teal-200)"> --color-mint-200</span><span style="color:var(--color-slate-300)">: </span><span style="color:var(--color-blue-200)">oklch</span><span style="color:var(--color-slate-300)">(</span><span style="color:var(--color-slate-50)">0.92 0.18 145</span><span style="color:var(--color-slate-300)">);</span></div><div class="line"><span style="color:var(--color-teal-200)"> --color-mint-300</span><span style="color:var(--color-slate-300)">: </span><span style="color:var(--color-blue-200)">oklch</span><span style="color:var(--color-slate-300)">(</span><span style="color:var(--color-slate-50)">0.85 0.22 145</span><span style="color:var(--color-slate-300)">);</span></div><div class="line"><span style="color:var(--color-teal-200)"> --color-mint-400</span><span style="color:var(--color-slate-300)">: </span><span style="color:var(--color-blue-200)">oklch</span><span style="color:var(--color-slate-300)">(</span><span style="color:var(--color-slate-50)">0.78 0.25 145</span><span style="color:var(--color-slate-300)">);</span></div><div class="line"><span style="color:var(--color-teal-200)"> --color-mint-500</span><span style="color:var(--color-slate-300)">: </span><span style="color:var(--color-blue-200)">oklch</span><span style="color:var(--color-slate-300)">(</span><span style="color:var(--color-slate-50)">0.7 0.28 145</span><span style="color:var(--color-slate-300)">);</span></div><div class="line"><span style="color:var(--color-teal-200)"> --color-mint-600</span><span style="color:var(--color-slate-300)">: </span><span style="color:var(--color-blue-200)">oklch</span><span style="color:var(--color-slate-300)">(</span><span style="color:var(--color-slate-50)">0.63 0.3 145</span><span style="color:var(--color-slate-300)">);</span></div><div class="line"><span style="color:var(--color-teal-200)"> --color-mint-700</span><span style="color:var(--color-slate-300)">: </span><span style="color:var(--color-blue-200)">oklch</span><span style="color:var(--color-slate-300)">(</span><span style="color:var(--color-slate-50)">0.56 0.32 145</span><span style="color:var(--color-slate-300)">);</span></div><div class="line"><span style="color:var(--color-teal-200)"> --color-mint-800</span><span style="color:var(--color-slate-300)">: </span><span style="color:var(--color-blue-200)">oklch</span><span style="color:var(--color-slate-300)">(</span><span style="color:var(--color-slate-50)">0.48 0.35 145</span><span style="color:var(--color-slate-300)">);</span></div><div class="line"><span style="color:var(--color-teal-200)"> --color-mint-900</span><span style="color:var(--color-slate-300)">: </span><span style="color:var(--color-blue-200)">oklch</span><span style="color:var(--color-slate-300)">(</span><span style="color:var(--color-slate-50)">0.4 0.37 145</span><span style="color:var(--color-slate-300)">);</span></div><div class="line"><span style="color:var(--color-teal-200)"> --color-mint-950</span><span style="color:var(--color-slate-300)">: </span><span style="color:var(--color-blue-200)">oklch</span><span style="color:var(--color-slate-300)">(</span><span style="color:var(--color-slate-50)">0.3 0.4 145</span><span style="color:var(--color-slate-300)">);</span></div><div class="line"><span style="color:var(--color-slate-300)">}</span></div></code></pre></div></div></div></div></div></div></div><div class="@container isolate flex flex-col gap-2 overflow-hidden rounded-2xl bg-white p-2 outline outline-gray-950/5 dark:bg-gray-950 dark:outline-white/10 col-span-full xl:col-span-18"><div class="flex flex-col gap-6 p-6 @md:flex-row @md:gap-x-8 @md:p-8"><div class="flex h-18 w-28 shrink-0 items-center justify-center"><svg class="text-gray-950 [--site-background:var(--color-white)] dark:text-white dark:[--site-background:var(--color-gray-950)]" width="112" height="72" viewBox="0 0 112 72" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#clip0_505_21654)"><rect width="112" height="72" fill="var(--site-background)"></rect><path d="M61.0051 60.7787L108.637 33.2787C109.114 33.0031 109.353 32.6421 109.354 32.2809L109.354 30.2774C109.353 29.9159 109.114 29.5545 108.637 29.2787L96.5122 22.2787C95.5556 21.7264 94.0046 21.7264 93.0481 22.2787L45.4167 49.7787C44.9515 50.0473 44.7125 50.397 44.6998 50.749L44.6998 52.749C44.6863 53.1208 44.9253 53.495 45.4167 53.7787L57.541 60.7787C58.4976 61.331 60.0485 61.331 61.0051 60.7787Z" fill="var(--site-background)"></path><path d="M109.352 30.2776C109.351 29.9161 109.112 29.5548 108.635 29.279L96.5102 22.279C95.5536 21.7267 94.0027 21.7267 93.0461 22.279L45.4147 49.779C44.9495 50.0475 44.7105 50.3973 44.6978 50.7492M109.352 30.2776C109.353 30.64 109.113 31.0025 108.635 31.279L61.0032 58.779C60.0466 59.3312 58.4956 59.3312 57.5391 58.779L45.4147 51.779C44.9233 51.4953 44.6844 51.121 44.6978 50.7492M109.352 30.2776L109.352 32.2811C109.351 32.6423 109.112 33.0034 108.635 33.279L61.0032 60.779C60.0466 61.3312 58.4956 61.3312 57.5391 60.779L45.4147 53.779C44.9233 53.4953 44.6844 53.121 44.6978 52.7492L44.6978 50.7492" stroke="currentColor"></path><path d="M92.6147 22.5293C92.3755 22.3912 91.9878 22.3912 91.7486 22.5293C91.5095 22.6674 91.5095 22.8912 91.7486 23.0293L92.6147 22.5293ZM91.7486 23.0293L107.337 32.0293L108.203 31.5293L92.6147 22.5293L91.7486 23.0293Z" fill="currentColor" fill-opacity="0.3"></path><path d="M86.5522 26.0293C86.313 25.8912 85.9253 25.8912 85.6861 26.0293C85.447 26.1674 85.447 26.3912 85.6861 26.5293L86.5522 26.0293ZM85.6861 26.5293L101.275 35.5293L102.141 35.0293L86.5522 26.0293L85.6861 26.5293Z" fill="currentColor" fill-opacity="0.3"></path><path d="M83.9545 27.5293C83.7154 27.3912 83.3276 27.3912 83.0885 27.5293C82.8493 27.6674 82.8493 27.8912 83.0885 28.0293L83.9545 27.5293ZM83.0885 28.0293L98.6769 37.0293L99.543 36.5293L83.9545 27.5293L83.0885 28.0293Z" fill="currentColor" fill-opacity="0.3"></path><path d="M75.2943 32.5293C75.0552 32.3912 74.6675 32.3912 74.4283 32.5293C74.1892 32.6674 74.1892 32.8912 74.4283 33.0293L75.2943 32.5293ZM74.4283 33.0293L90.0168 42.0293L90.8828 41.5293L75.2943 32.5293L74.4283 33.0293Z" fill="currentColor" fill-opacity="0.3"></path><path d="M66.6322 37.5293C66.3931 37.3912 66.0054 37.3912 65.7662 37.5293C65.5271 37.6674 65.5271 37.8912 65.7662 38.0293L66.6322 37.5293ZM65.7662 38.0293L81.3547 47.0293L82.2207 46.5293L66.6322 37.5293L65.7662 38.0293Z" fill="currentColor" fill-opacity="0.3"></path><path d="M60.5717 41.0293C60.3325 40.8912 59.9448 40.8912 59.7057 41.0293C59.4665 41.1674 59.4665 41.3912 59.7057 41.5293L60.5717 41.0293ZM59.7057 41.5293L75.2941 50.5293L76.1601 50.0293L60.5717 41.0293L59.7057 41.5293Z" fill="currentColor" fill-opacity="0.3"></path><path d="M57.9721 42.5293C57.7329 42.3912 57.3452 42.3912 57.106 42.5293C56.8669 42.6674 56.8669 42.8912 57.106 43.0293L57.9721 42.5293ZM57.106 43.0293L72.6945 52.0293L73.5605 51.5293L57.9721 42.5293L57.106 43.0293Z" fill="currentColor" fill-opacity="0.3"></path><path d="M51.9115 46.0293C51.6724 45.8912 51.2846 45.8912 51.0455 46.0293C50.8064 46.1674 50.8064 46.3912 51.0455 46.5293L51.9115 46.0293ZM51.0455 46.5293L66.634 55.5293L67.5 55.0293L51.9115 46.0293L51.0455 46.5293Z" fill="currentColor" fill-opacity="0.3"></path><path d="M77.892 31.0293C77.6529 30.8912 77.2651 30.8912 77.026 31.0293C76.7868 31.1674 76.7868 31.3912 77.026 31.5293L77.892 31.0293ZM77.026 31.5293L92.6144 40.5293L93.4805 40.0293L77.892 31.0293L77.026 31.5293Z" fill="currentColor" fill-opacity="0.3"></path><path d="M69.2318 36.0293C68.9927 35.8912 68.605 35.8912 68.3658 36.0293C68.1267 36.1674 68.1267 36.3912 68.3658 36.5293L69.2318 36.0293ZM68.3658 36.5293L83.9543 45.5293L84.8203 45.0293L69.2318 36.0293L68.3658 36.5293Z" fill="currentColor" fill-opacity="0.3"></path><path d="M63.806 57.8106L81.2403 20.2449C81.3094 20.096 81.3347 19.9463 81.3207 19.8003L81.3207 17.8004C81.2637 17.2067 80.5572 16.6751 79.5083 16.5128L62.9461 13.9506C61.6394 13.7485 60.2962 14.1962 59.9461 14.9506L42.5118 52.5163C42.4366 52.6785 42.4133 52.8416 42.4361 52.9998L42.4361 54.9998C42.5195 55.5776 43.218 56.0897 44.2439 56.2484L60.806 58.8106C62.1128 59.0127 63.4559 58.565 63.806 57.8106Z" fill="var(--site-background)"></path><path d="M42.5118 54.5163C42.4366 54.6785 42.4133 54.8416 42.4361 54.9998M81.3207 17.8004C81.2637 17.2067 80.5572 16.6751 79.5083 16.5128L62.9461 13.9506C61.6394 13.7485 60.2962 14.1962 59.9461 14.9506L42.5118 52.5163C42.4366 52.6785 42.4133 52.8416 42.4361 52.9998M81.3207 17.8004C81.3347 17.9463 81.3094 18.096 81.2403 18.2449L63.806 55.8106C63.4559 56.565 62.1128 57.0127 60.806 56.8106L44.2439 54.2484C43.218 54.0897 42.5195 53.5776 42.4361 52.9998M81.3207 17.8004L81.3207 19.8003C81.3347 19.9463 81.3094 20.096 81.2403 20.2449L63.806 57.8106C63.4559 58.565 62.1128 59.0127 60.806 58.8106L44.2439 56.2484C43.218 56.0897 42.5195 55.5776 42.4361 54.9998M42.4361 52.9998L42.4361 54.9998" stroke="currentColor"></path><path d="M59.627 15.6328L80.9212 18.927" stroke="currentColor" stroke-opacity="0.3"></path><path d="M57.4082 20.4141L78.7024 23.7083" stroke="currentColor" stroke-opacity="0.3"></path><path d="M56.457 22.4629L77.7513 25.7571" stroke="currentColor" stroke-opacity="0.3"></path><path d="M53.2871 29.2932L74.5813 32.5874" stroke="currentColor" stroke-opacity="0.3"></path><path d="M50.1172 36.1233L71.4114 39.4175" stroke="currentColor" stroke-opacity="0.3"></path><path d="M47.8984 40.9043L69.1927 44.1985" stroke="currentColor" stroke-opacity="0.3"></path><path d="M46.9473 42.9534L68.2415 46.2476" stroke="currentColor" stroke-opacity="0.3"></path><path d="M44.7285 47.7344L66.0227 51.0286" stroke="currentColor" stroke-opacity="0.3"></path><path d="M54.2383 27.2441L75.5325 30.5384" stroke="currentColor" stroke-opacity="0.3"></path><path d="M51.0684 34.0742L72.3626 37.3684" stroke="currentColor" stroke-opacity="0.3"></path><path d="M63.653 55.8955L47.0908 58.4576C45.7841 58.6598 44.441 58.2121 44.0908 57.4576L26.6565 19.8919C26.5957 19.7609 26.5689 19.6292 26.5728 19.5L26.5723 17.5C26.5912 16.8854 27.3082 16.3268 28.388 16.1598L44.9502 13.5976C46.2569 13.3955 47.6 13.8432 47.9502 14.5976L65.3845 52.1633C65.4367 52.2757 65.4638 52.3886 65.468 52.5L65.468 54.4872C65.4695 54.516 65.4695 54.5448 65.468 54.5734C65.4356 55.1809 64.7221 55.7301 63.653 55.8955Z" fill="var(--site-background)"></path><path d="M65.3851 54.1634C65.4487 54.3006 65.4752 54.4385 65.468 54.5734M65.468 54.5734C65.4356 55.1809 64.7221 55.7301 63.653 55.8955L47.0908 58.4576C45.7841 58.6598 44.441 58.2121 44.0908 57.4576L26.6565 19.8919C26.5957 19.7609 26.5689 19.6292 26.5728 19.5L26.5723 17.5C26.5912 16.8854 27.3082 16.3268 28.388 16.1598L44.9502 13.5976C46.2569 13.3955 47.6 13.8432 47.9502 14.5976L65.3845 52.1633C65.4367 52.2757 65.4638 52.3886 65.468 52.5L65.468 54.5734Z" stroke="currentColor"></path><path d="M65.3854 54.1637C65.4491 54.3008 65.4756 54.4387 65.4684 54.5737M26.5726 17.5002C26.5916 16.8856 27.3086 16.3271 28.3884 16.16L44.9506 13.5979C46.2573 13.3957 47.6004 13.8434 47.9506 14.5979L65.3849 52.1636C65.437 52.276 65.4642 52.3889 65.4684 52.5002M26.5726 17.5002C26.5687 17.6294 26.5955 17.7611 26.6563 17.8921L44.0906 55.4578C44.4408 56.2122 45.7839 56.6599 47.0906 56.4578L63.6528 53.8956C64.7648 53.7236 65.4921 53.1364 65.4684 52.5002M26.5726 17.5002L26.5732 19.5002C26.5692 19.6294 26.5961 19.7611 26.6569 19.8922L44.0912 57.4579C44.4414 58.2123 45.7845 58.66 47.0912 58.4579L63.6534 55.8957C64.7225 55.7303 65.436 55.1811 65.4684 54.5737M65.4684 52.5002L65.4684 54.5737" stroke="currentColor"></path><path d="M26.9746 18.5747L48.2688 15.2805" stroke="currentColor" stroke-opacity="0.3"></path><path d="M29.1953 23.356L50.4895 20.0617" stroke="currentColor" stroke-opacity="0.3"></path><path d="M30.1445 25.405L51.4388 22.1108" stroke="currentColor" stroke-opacity="0.3"></path><path d="M33.3145 32.2351L54.6087 28.9409" stroke="currentColor" stroke-opacity="0.3"></path><path d="M36.4844 39.0652L57.7786 35.771" stroke="currentColor" stroke-opacity="0.3"></path><path d="M38.7031 43.8462L59.9974 40.552" stroke="currentColor" stroke-opacity="0.3"></path><path d="M39.6543 45.8953L60.9485 42.601" stroke="currentColor" stroke-opacity="0.3"></path><path d="M41.873 50.6765L63.1673 47.3823" stroke="currentColor" stroke-opacity="0.3"></path><path d="M32.3652 30.186L53.6595 26.8918" stroke="currentColor" stroke-opacity="0.3"></path><path d="M35.5352 37.0161L56.8294 33.7219" stroke="currentColor" stroke-opacity="0.3"></path><path d="M53.2094 59.2794L65.3338 52.2794C65.8045 52.0076 66.0436 51.6527 66.051 51.2965L66.0515 49.2665C66.0461 48.9089 65.8072 48.5523 65.3346 48.2794L17.7032 20.7794C16.7466 20.2272 15.1957 20.2272 14.2391 20.7794L2.11471 27.7794C1.66285 28.0403 1.42425 28.3778 1.3991 28.7195V30.715C1.36899 31.0981 1.60721 31.4869 2.11392 31.7794L49.7453 59.2794C50.7019 59.8317 52.2528 59.8317 53.2094 59.2794Z" fill="var(--site-background)"></path><path d="M1.39715 28.7192C1.4223 28.3775 1.66089 28.0401 2.11276 27.7792L14.2371 20.7792C15.1937 20.2269 16.7446 20.2269 17.7012 20.7792L65.3326 48.2792C65.8052 48.5521 66.0441 48.9087 66.0496 49.2663M1.39715 28.7192C1.36906 29.1009 1.60725 29.4878 2.11197 29.7792L49.7442 57.2792C50.7007 57.8315 52.2517 57.8315 53.2083 57.2792L65.3318 50.2792C65.8158 49.9998 66.0551 49.6325 66.0496 49.2663M1.39715 28.7192V30.7147C1.36704 31.0978 1.60526 31.4867 2.11197 31.7792L49.7434 59.2792C50.6999 59.8315 52.2509 59.8315 53.2075 59.2792L65.3318 52.2792C65.8026 52.0074 66.0417 51.6525 66.0491 51.2963L66.0496 49.2663" stroke="currentColor"></path><path d="M19.0039 21.5293C19.243 21.3912 19.243 21.1674 19.0039 21.0293C18.7647 20.8912 18.377 20.8912 18.1379 21.0293L19.0039 21.5293ZM3.41543 30.5293L19.0039 21.5293L18.1379 21.0293L2.54941 30.0293L3.41543 30.5293Z" fill="currentColor" fill-opacity="0.3"></path><path d="M25.0644 25.0293C25.3036 24.8912 25.3036 24.6674 25.0644 24.5293C24.8253 24.3912 24.4376 24.3912 24.1984 24.5293L25.0644 25.0293ZM9.47598 34.0293L25.0644 25.0293L24.1984 24.5293L8.60996 33.5293L9.47598 34.0293Z" fill="currentColor" fill-opacity="0.3"></path><path d="M27.664 26.5293C27.9032 26.3912 27.9032 26.1674 27.664 26.0293C27.4249 25.8912 27.0372 25.8912 26.798 26.0293L27.664 26.5293ZM12.0756 35.5293L27.664 26.5293L26.798 26.0293L11.2096 35.0293L12.0756 35.5293Z" fill="currentColor" fill-opacity="0.3"></path><path d="M36.3242 31.5293C36.5634 31.3912 36.5634 31.1674 36.3242 31.0293C36.0851 30.8912 35.6973 30.8912 35.4582 31.0293L36.3242 31.5293ZM20.7357 40.5293L36.3242 31.5293L35.4582 31.0293L19.8697 40.0293L20.7357 40.5293Z" fill="currentColor" fill-opacity="0.3"></path><path d="M44.9844 36.5293C45.2235 36.3912 45.2235 36.1674 44.9844 36.0293C44.7452 35.8912 44.3575 35.8912 44.1183 36.0293L44.9844 36.5293ZM29.3959 45.5293L44.9844 36.5293L44.1183 36.0293L28.5299 45.0293L29.3959 45.5293Z" fill="currentColor" fill-opacity="0.3"></path><path d="M51.0469 40.0293C51.286 39.8912 51.286 39.6674 51.0469 39.5293C50.8077 39.3912 50.42 39.3912 50.1808 39.5293L51.0469 40.0293ZM35.4584 49.0293L51.0469 40.0293L50.1808 39.5293L34.5924 48.5293L35.4584 49.0293Z" fill="currentColor" fill-opacity="0.3"></path><path d="M53.6445 41.5293C53.8837 41.3912 53.8837 41.1674 53.6445 41.0293C53.4054 40.8912 53.0176 40.8912 52.7785 41.0293L53.6445 41.5293ZM38.0561 50.5293L53.6445 41.5293L52.7785 41.0293L37.19 50.0293L38.0561 50.5293Z" fill="currentColor" fill-opacity="0.3"></path><path d="M59.707 45.0293C59.9462 44.8912 59.9462 44.6674 59.707 44.5293C59.4679 44.3912 59.0801 44.3912 58.841 44.5293L59.707 45.0293ZM44.1186 54.0293L59.707 45.0293L58.841 44.5293L43.2525 53.5293L44.1186 54.0293Z" fill="currentColor" fill-opacity="0.3"></path><path d="M33.7265 30.0293C33.9657 29.8912 33.9657 29.6674 33.7265 29.5293C33.4874 29.3912 33.0997 29.3912 32.8605 29.5293L33.7265 30.0293ZM18.1381 39.0293L33.7265 30.0293L32.8605 29.5293L17.2721 38.5293L18.1381 39.0293Z" fill="currentColor" fill-opacity="0.3"></path><path d="M42.3867 35.0293C42.6259 34.8912 42.6259 34.6674 42.3867 34.5293C42.1476 34.3912 41.7598 34.3912 41.5207 34.5293L42.3867 35.0293ZM26.7982 44.0293L42.3867 35.0293L41.5207 34.5293L25.9322 43.5293L26.7982 44.0293Z" fill="currentColor" fill-opacity="0.3"></path><circle cx="1.5" cy="1.5" r="1.5" transform="matrix(0.866025 -0.5 0.866025 0.5 56.6738 49.2793)" stroke="currentColor"></circle></g><defs><clipPath id="clip0_505_21654"><rect width="112" height="72" fill="var(--site-background)"></rect></clipPath></defs></svg></div><div><span class="text-xl/10 font-medium text-gray-950 @md:text-2xl/10 dark:text-white">P3 colors</span><p class="max-w-xl text-sm/7 text-gray-600 dark:text-gray-400">The color palette now uses more vibrant wide gamut colors without you needing to understand what any of that even means.</p></div></div><div class="flex-1"></div><div class="h-112 p-4 sm:p-8 relative overflow-hidden rounded-lg bg-gray-950/[2.5%] after:pointer-events-none after:absolute after:inset-0 after:rounded-lg after:inset-ring after:inset-ring-gray-950/5 dark:after:inset-ring-white/10 bg-[image:radial-gradient(var(--pattern-fg)_1px,_transparent_0)] bg-[size:10px_10px] bg-fixed [--pattern-fg:var(--color-gray-950)]/5 dark:[--pattern-fg:var(--color-white)]/10"><div class="mt-8 -mr-16 -mb-16 sm:mt-0"><div class="group grid grid-cols-[repeat(var(--columns),var(--width))] gap-1.5 [--height:--spacing(6)] [--width:--spacing(10)] sm:[--height:--spacing(10)] sm:[--width:--spacing(16)]" style="--sin:0.7071067811865475;--cos:0.7071067811865476;--angle:-45deg;--columns:18"><div></div><div><div class="pointer-events-none h-[calc(var(--width)*var(--sin)+var(--height)*var(--cos))] w-[calc(var(--width)*var(--cos)+var(--height)*var(--sin))] translate-x-5 translate-y-2 sm:translate-x-8 sm:translate-y-5"><div class="rotate-(--angle)"><div class="font-mono text-[13px]/7 text-gray-950 dark:text-white">red</div></div></div></div><div><div class="pointer-events-none h-[calc(var(--width)*var(--sin)+var(--height)*var(--cos))] w-[calc(var(--width)*var(--cos)+var(--height)*var(--sin))] translate-x-5 translate-y-2 sm:translate-x-8 sm:translate-y-5"><div class="rotate-(--angle)"><div class="font-mono text-[13px]/7 text-gray-950 dark:text-white">orange</div></div></div></div><div><div class="pointer-events-none h-[calc(var(--width)*var(--sin)+var(--height)*var(--cos))] w-[calc(var(--width)*var(--cos)+var(--height)*var(--sin))] translate-x-5 translate-y-2 sm:translate-x-8 sm:translate-y-5"><div class="rotate-(--angle)"><div class="font-mono text-[13px]/7 text-gray-950 dark:text-white">amber</div></div></div></div><div><div class="pointer-events-none h-[calc(var(--width)*var(--sin)+var(--height)*var(--cos))] w-[calc(var(--width)*var(--cos)+var(--height)*var(--sin))] translate-x-5 translate-y-2 sm:translate-x-8 sm:translate-y-5"><div class="rotate-(--angle)"><div class="font-mono text-[13px]/7 text-gray-950 dark:text-white">yellow</div></div></div></div><div><div class="pointer-events-none h-[calc(var(--width)*var(--sin)+var(--height)*var(--cos))] w-[calc(var(--width)*var(--cos)+var(--height)*var(--sin))] translate-x-5 translate-y-2 sm:translate-x-8 sm:translate-y-5"><div class="rotate-(--angle)"><div class="font-mono text-[13px]/7 text-gray-950 dark:text-white">lime</div></div></div></div><div><div class="pointer-events-none h-[calc(var(--width)*var(--sin)+var(--height)*var(--cos))] w-[calc(var(--width)*var(--cos)+var(--height)*var(--sin))] translate-x-5 translate-y-2 sm:translate-x-8 sm:translate-y-5"><div class="rotate-(--angle)"><div class="font-mono text-[13px]/7 text-gray-950 dark:text-white">green</div></div></div></div><div><div class="pointer-events-none h-[calc(var(--width)*var(--sin)+var(--height)*var(--cos))] w-[calc(var(--width)*var(--cos)+var(--height)*var(--sin))] translate-x-5 translate-y-2 sm:translate-x-8 sm:translate-y-5"><div class="rotate-(--angle)"><div class="font-mono text-[13px]/7 text-gray-950 dark:text-white">emerald</div></div></div></div><div><div class="pointer-events-none h-[calc(var(--width)*var(--sin)+var(--height)*var(--cos))] w-[calc(var(--width)*var(--cos)+var(--height)*var(--sin))] translate-x-5 translate-y-2 sm:translate-x-8 sm:translate-y-5"><div class="rotate-(--angle)"><div class="font-mono text-[13px]/7 text-gray-950 dark:text-white">teal</div></div></div></div><div><div class="pointer-events-none h-[calc(var(--width)*var(--sin)+var(--height)*var(--cos))] w-[calc(var(--width)*var(--cos)+var(--height)*var(--sin))] translate-x-5 translate-y-2 sm:translate-x-8 sm:translate-y-5"><div class="rotate-(--angle)"><div class="font-mono text-[13px]/7 text-gray-950 dark:text-white">cyan</div></div></div></div><div><div class="pointer-events-none h-[calc(var(--width)*var(--sin)+var(--height)*var(--cos))] w-[calc(var(--width)*var(--cos)+var(--height)*var(--sin))] translate-x-5 translate-y-2 sm:translate-x-8 sm:translate-y-5"><div class="rotate-(--angle)"><div class="font-mono text-[13px]/7 text-gray-950 dark:text-white">sky</div></div></div></div><div><div class="pointer-events-none h-[calc(var(--width)*var(--sin)+var(--height)*var(--cos))] w-[calc(var(--width)*var(--cos)+var(--height)*var(--sin))] translate-x-5 translate-y-2 sm:translate-x-8 sm:translate-y-5"><div class="rotate-(--angle)"><div class="font-mono text-[13px]/7 text-gray-950 dark:text-white">blue</div></div></div></div><div><div class="pointer-events-none h-[calc(var(--width)*var(--sin)+var(--height)*var(--cos))] w-[calc(var(--width)*var(--cos)+var(--height)*var(--sin))] translate-x-5 translate-y-2 sm:translate-x-8 sm:translate-y-5"><div class="rotate-(--angle)"><div class="font-mono text-[13px]/7 text-gray-950 dark:text-white">indigo</div></div></div></div><div><div class="pointer-events-none h-[calc(var(--width)*var(--sin)+var(--height)*var(--cos))] w-[calc(var(--width)*var(--cos)+var(--height)*var(--sin))] translate-x-5 translate-y-2 sm:translate-x-8 sm:translate-y-5"><div class="rotate-(--angle)"><div class="font-mono text-[13px]/7 text-gray-950 dark:text-white">violet</div></div></div></div><div><div class="pointer-events-none h-[calc(var(--width)*var(--sin)+var(--height)*var(--cos))] w-[calc(var(--width)*var(--cos)+var(--height)*var(--sin))] translate-x-5 translate-y-2 sm:translate-x-8 sm:translate-y-5"><div class="rotate-(--angle)"><div class="font-mono text-[13px]/7 text-gray-950 dark:text-white">purple</div></div></div></div><div><div class="pointer-events-none h-[calc(var(--width)*var(--sin)+var(--height)*var(--cos))] w-[calc(var(--width)*var(--cos)+var(--height)*var(--sin))] translate-x-5 translate-y-2 sm:translate-x-8 sm:translate-y-5"><div class="rotate-(--angle)"><div class="font-mono text-[13px]/7 text-gray-950 dark:text-white">fuchsia</div></div></div></div><div><div class="pointer-events-none h-[calc(var(--width)*var(--sin)+var(--height)*var(--cos))] w-[calc(var(--width)*var(--cos)+var(--height)*var(--sin))] translate-x-5 translate-y-2 sm:translate-x-8 sm:translate-y-5"><div class="rotate-(--angle)"><div class="font-mono text-[13px]/7 text-gray-950 dark:text-white">pink</div></div></div></div><div><div class="pointer-events-none h-[calc(var(--width)*var(--sin)+var(--height)*var(--cos))] w-[calc(var(--width)*var(--cos)+var(--height)*var(--sin))] translate-x-5 translate-y-2 sm:translate-x-8 sm:translate-y-5"><div class="rotate-(--angle)"><div class="font-mono text-[13px]/7 text-gray-950 dark:text-white">rose</div></div></div></div><div class="relative"><div class="absolute -mt-1 w-screen border-t border-gray-950/5 dark:border-white/10"></div><div class="flex h-(--height) w-(--width) items-center"><div class="font-mono text-[13px]/7 text-gray-950 dark:text-white">950</div></div></div><div class="relative"><div class="pointer-events-none absolute -top-1 -left-1 h-screen border-l border-gray-950/5 dark:border-white/10"></div><div class="pointer-events-none absolute -top-1 -left-1 h-16 origin-top-left translate-px rotate-225 border-l border-gray-950/5 sm:h-24 dark:border-white/10"></div><div style="--color:var(--color-red-950)" class="h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10" data-headlessui-state=""></div></div><div class="relative"><div class="pointer-events-none absolute -top-1 -left-1 h-screen border-l border-gray-950/5 dark:border-white/10"></div><div class="pointer-events-none absolute -top-1 -left-1 h-16 origin-top-left translate-px rotate-225 border-l border-gray-950/5 sm:h-24 dark:border-white/10"></div><div style="--color:var(--color-orange-950)" class="h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10" data-headlessui-state=""></div></div><div class="relative"><div class="pointer-events-none absolute -top-1 -left-1 h-screen border-l border-gray-950/5 dark:border-white/10"></div><div class="pointer-events-none absolute -top-1 -left-1 h-16 origin-top-left translate-px rotate-225 border-l border-gray-950/5 sm:h-24 dark:border-white/10"></div><div style="--color:var(--color-amber-950)" class="h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10" data-headlessui-state=""></div></div><div class="relative"><div class="pointer-events-none absolute -top-1 -left-1 h-screen border-l border-gray-950/5 dark:border-white/10"></div><div class="pointer-events-none absolute -top-1 -left-1 h-16 origin-top-left translate-px rotate-225 border-l border-gray-950/5 sm:h-24 dark:border-white/10"></div><div style="--color:var(--color-yellow-950)" class="h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10" data-headlessui-state=""></div></div><div class="relative"><div class="pointer-events-none absolute -top-1 -left-1 h-screen border-l border-gray-950/5 dark:border-white/10"></div><div class="pointer-events-none absolute -top-1 -left-1 h-16 origin-top-left translate-px rotate-225 border-l border-gray-950/5 sm:h-24 dark:border-white/10"></div><div style="--color:var(--color-lime-950)" class="h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10" data-headlessui-state=""></div></div><div class="relative"><div class="pointer-events-none absolute -top-1 -left-1 h-screen border-l border-gray-950/5 dark:border-white/10"></div><div class="pointer-events-none absolute -top-1 -left-1 h-16 origin-top-left translate-px rotate-225 border-l border-gray-950/5 sm:h-24 dark:border-white/10"></div><div style="--color:var(--color-green-950)" class="h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10" data-headlessui-state=""></div></div><div class="relative"><div class="pointer-events-none absolute -top-1 -left-1 h-screen border-l border-gray-950/5 dark:border-white/10"></div><div class="pointer-events-none absolute -top-1 -left-1 h-16 origin-top-left translate-px rotate-225 border-l border-gray-950/5 sm:h-24 dark:border-white/10"></div><div style="--color:var(--color-emerald-950)" class="h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10" data-headlessui-state=""></div></div><div class="relative"><div class="pointer-events-none absolute -top-1 -left-1 h-screen border-l border-gray-950/5 dark:border-white/10"></div><div class="pointer-events-none absolute -top-1 -left-1 h-16 origin-top-left translate-px rotate-225 border-l border-gray-950/5 sm:h-24 dark:border-white/10"></div><div style="--color:var(--color-teal-950)" class="h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10" data-headlessui-state=""></div></div><div class="relative"><div class="pointer-events-none absolute -top-1 -left-1 h-screen border-l border-gray-950/5 dark:border-white/10"></div><div class="pointer-events-none absolute -top-1 -left-1 h-16 origin-top-left translate-px rotate-225 border-l border-gray-950/5 sm:h-24 dark:border-white/10"></div><div style="--color:var(--color-cyan-950)" class="h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10" data-headlessui-state=""></div></div><div class="relative"><div class="pointer-events-none absolute -top-1 -left-1 h-screen border-l border-gray-950/5 dark:border-white/10"></div><div class="pointer-events-none absolute -top-1 -left-1 h-16 origin-top-left translate-px rotate-225 border-l border-gray-950/5 sm:h-24 dark:border-white/10"></div><div style="--color:var(--color-sky-950)" class="h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10" data-headlessui-state=""></div></div><div class="relative"><div class="pointer-events-none absolute -top-1 -left-1 h-screen border-l border-gray-950/5 dark:border-white/10"></div><div class="pointer-events-none absolute -top-1 -left-1 h-16 origin-top-left translate-px rotate-225 border-l border-gray-950/5 sm:h-24 dark:border-white/10"></div><div style="--color:var(--color-blue-950)" class="h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10" data-headlessui-state=""></div></div><div class="relative"><div class="pointer-events-none absolute -top-1 -left-1 h-screen border-l border-gray-950/5 dark:border-white/10"></div><div class="pointer-events-none absolute -top-1 -left-1 h-16 origin-top-left translate-px rotate-225 border-l border-gray-950/5 sm:h-24 dark:border-white/10"></div><div style="--color:var(--color-indigo-950)" class="h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10" data-headlessui-state=""></div></div><div class="relative"><div class="pointer-events-none absolute -top-1 -left-1 h-screen border-l border-gray-950/5 dark:border-white/10"></div><div class="pointer-events-none absolute -top-1 -left-1 h-16 origin-top-left translate-px rotate-225 border-l border-gray-950/5 sm:h-24 dark:border-white/10"></div><div style="--color:var(--color-violet-950)" class="h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10" data-headlessui-state=""></div></div><div class="relative"><div class="pointer-events-none absolute -top-1 -left-1 h-screen border-l border-gray-950/5 dark:border-white/10"></div><div class="pointer-events-none absolute -top-1 -left-1 h-16 origin-top-left translate-px rotate-225 border-l border-gray-950/5 sm:h-24 dark:border-white/10"></div><div style="--color:var(--color-purple-950)" class="h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10" data-headlessui-state=""></div></div><div class="relative"><div class="pointer-events-none absolute -top-1 -left-1 h-screen border-l border-gray-950/5 dark:border-white/10"></div><div class="pointer-events-none absolute -top-1 -left-1 h-16 origin-top-left translate-px rotate-225 border-l border-gray-950/5 sm:h-24 dark:border-white/10"></div><div style="--color:var(--color-fuchsia-950)" class="h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10" data-headlessui-state=""></div></div><div class="relative"><div class="pointer-events-none absolute -top-1 -left-1 h-screen border-l border-gray-950/5 dark:border-white/10"></div><div class="pointer-events-none absolute -top-1 -left-1 h-16 origin-top-left translate-px rotate-225 border-l border-gray-950/5 sm:h-24 dark:border-white/10"></div><div style="--color:var(--color-pink-950)" class="h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10" data-headlessui-state=""></div></div><div class="relative"><div class="pointer-events-none absolute -top-1 -left-1 h-screen border-l border-gray-950/5 dark:border-white/10"></div><div class="pointer-events-none absolute -top-1 -left-1 h-16 origin-top-left translate-px rotate-225 border-l border-gray-950/5 sm:h-24 dark:border-white/10"></div><div style="--color:var(--color-rose-950)" class="h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10" data-headlessui-state=""></div></div><div class="relative"><div class="absolute -mt-1 w-screen border-t border-gray-950/5 dark:border-white/10"></div><div class="flex h-(--height) w-(--width) items-center"><div class="font-mono text-[13px]/7 text-gray-950 dark:text-white">900</div></div></div><div class="relative"><div style="--color:var(--color-red-900)" class="h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10" data-headlessui-state=""></div></div><div class="relative"><div style="--color:var(--color-orange-900)" class="h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10" data-headlessui-state=""></div></div><div class="relative"><div style="--color:var(--color-amber-900)" class="h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10" data-headlessui-state=""></div></div><div class="relative"><div style="--color:var(--color-yellow-900)" class="h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10" data-headlessui-state=""></div></div><div class="relative"><div style="--color:var(--color-lime-900)" class="h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10" data-headlessui-state=""></div></div><div class="relative"><div style="--color:var(--color-green-900)" class="h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10" data-headlessui-state=""></div></div><div class="relative"><div style="--color:var(--color-emerald-900)" class="h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10" data-headlessui-state=""></div></div><div class="relative"><div style="--color:var(--color-teal-900)" class="h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10" data-headlessui-state=""></div></div><div class="relative"><div style="--color:var(--color-cyan-900)" class="h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10" data-headlessui-state=""></div></div><div class="relative"><div style="--color:var(--color-sky-900)" class="h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10" data-headlessui-state=""></div></div><div class="relative"><div style="--color:var(--color-blue-900)" class="h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10" data-headlessui-state=""></div></div><div class="relative"><div style="--color:var(--color-indigo-900)" class="h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10" data-headlessui-state=""></div></div><div class="relative"><div style="--color:var(--color-violet-900)" class="h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10" data-headlessui-state=""></div></div><div class="relative"><div style="--color:var(--color-purple-900)" class="h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10" data-headlessui-state=""></div></div><div class="relative"><div style="--color:var(--color-fuchsia-900)" class="h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10" data-headlessui-state=""></div></div><div class="relative"><div style="--color:var(--color-pink-900)" class="h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10" data-headlessui-state=""></div></div><div class="relative"><div style="--color:var(--color-rose-900)" class="h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10" data-headlessui-state=""></div></div><div class="relative"><div class="absolute -mt-1 w-screen border-t border-gray-950/5 dark:border-white/10"></div><div class="flex h-(--height) w-(--width) items-center"><div class="font-mono text-[13px]/7 text-gray-950 dark:text-white">800</div></div></div><div class="relative"><div style="--color:var(--color-red-800)" class="h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10" data-headlessui-state=""></div></div><div class="relative"><div style="--color:var(--color-orange-800)" class="h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10" data-headlessui-state=""></div></div><div class="relative"><div style="--color:var(--color-amber-800)" class="h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10" data-headlessui-state=""></div></div><div class="relative"><div style="--color:var(--color-yellow-800)" class="h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10" data-headlessui-state=""></div></div><div class="relative"><div style="--color:var(--color-lime-800)" class="h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10" data-headlessui-state=""></div></div><div class="relative"><div style="--color:var(--color-green-800)" class="h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10" data-headlessui-state=""></div></div><div class="relative"><div style="--color:var(--color-emerald-800)" class="h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10" data-headlessui-state=""></div></div><div class="relative"><div style="--color:var(--color-teal-800)" class="h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10" data-headlessui-state=""></div></div><div class="relative"><div style="--color:var(--color-cyan-800)" class="h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10" data-headlessui-state=""></div></div><div class="relative"><div style="--color:var(--color-sky-800)" class="h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10" data-headlessui-state=""></div></div><div class="relative"><div style="--color:var(--color-blue-800)" class="h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10" data-headlessui-state=""></div></div><div class="relative"><div style="--color:var(--color-indigo-800)" class="h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10" data-headlessui-state=""></div></div><div class="relative"><div style="--color:var(--color-violet-800)" class="h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10" data-headlessui-state=""></div></div><div class="relative"><div style="--color:var(--color-purple-800)" class="h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10" data-headlessui-state=""></div></div><div class="relative"><div style="--color:var(--color-fuchsia-800)" class="h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10" data-headlessui-state=""></div></div><div class="relative"><div style="--color:var(--color-pink-800)" class="h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10" data-headlessui-state=""></div></div><div class="relative"><div style="--color:var(--color-rose-800)" class="h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10" data-headlessui-state=""></div></div><div class="relative"><div class="absolute -mt-1 w-screen border-t border-gray-950/5 dark:border-white/10"></div><div class="flex h-(--height) w-(--width) items-center"><div class="font-mono text-[13px]/7 text-gray-950 dark:text-white">700</div></div></div><div class="relative"><div style="--color:var(--color-red-700)" class="h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10" data-headlessui-state=""></div></div><div class="relative"><div style="--color:var(--color-orange-700)" class="h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10" data-headlessui-state=""></div></div><div class="relative"><div style="--color:var(--color-amber-700)" class="h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10" data-headlessui-state=""></div></div><div class="relative"><div style="--color:var(--color-yellow-700)" class="h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10" data-headlessui-state=""></div></div><div class="relative"><div style="--color:var(--color-lime-700)" class="h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10" data-headlessui-state=""></div></div><div class="relative"><div style="--color:var(--color-green-700)" class="h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10" data-headlessui-state=""></div></div><div class="relative"><div style="--color:var(--color-emerald-700)" class="h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10" data-headlessui-state=""></div></div><div class="relative"><div style="--color:var(--color-teal-700)" class="h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10" data-headlessui-state=""></div></div><div class="relative"><div style="--color:var(--color-cyan-700)" class="h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10" data-headlessui-state=""></div></div><div class="relative"><div style="--color:var(--color-sky-700)" class="h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10" data-headlessui-state=""></div></div><div class="relative"><div style="--color:var(--color-blue-700)" class="h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10" data-headlessui-state=""></div></div><div class="relative"><div style="--color:var(--color-indigo-700)" class="h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10" data-headlessui-state=""></div></div><div class="relative"><div style="--color:var(--color-violet-700)" class="h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10" data-headlessui-state=""></div></div><div class="relative"><div style="--color:var(--color-purple-700)" class="h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10" data-headlessui-state=""></div></div><div class="relative"><div style="--color:var(--color-fuchsia-700)" class="h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10" data-headlessui-state=""></div></div><div class="relative"><div style="--color:var(--color-pink-700)" class="h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10" data-headlessui-state=""></div></div><div class="relative"><div style="--color:var(--color-rose-700)" class="h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10" data-headlessui-state=""></div></div><div class="relative"><div class="absolute -mt-1 w-screen border-t border-gray-950/5 dark:border-white/10"></div><div class="flex h-(--height) w-(--width) items-center"><div class="font-mono text-[13px]/7 text-gray-950 dark:text-white">600</div></div></div><div class="relative"><div style="--color:var(--color-red-600)" class="h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10" data-headlessui-state=""></div></div><div class="relative"><div style="--color:var(--color-orange-600)" class="h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10" data-headlessui-state=""></div></div><div class="relative"><div style="--color:var(--color-amber-600)" class="h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10" data-headlessui-state=""></div></div><div class="relative"><div style="--color:var(--color-yellow-600)" class="h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10" data-headlessui-state=""></div></div><div class="relative"><div style="--color:var(--color-lime-600)" class="h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10" data-headlessui-state=""></div></div><div class="relative"><div style="--color:var(--color-green-600)" class="h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10" data-headlessui-state=""></div></div><div class="relative"><div style="--color:var(--color-emerald-600)" class="h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10" data-headlessui-state=""></div></div><div class="relative"><div style="--color:var(--color-teal-600)" class="h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10" data-headlessui-state=""></div></div><div class="relative"><div style="--color:var(--color-cyan-600)" class="h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10" data-headlessui-state=""></div></div><div class="relative"><div style="--color:var(--color-sky-600)" class="h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10" data-headlessui-state=""></div></div><div class="relative"><div style="--color:var(--color-blue-600)" class="h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10" data-headlessui-state=""></div></div><div class="relative"><div style="--color:var(--color-indigo-600)" class="h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10" data-headlessui-state=""></div></div><div class="relative"><div style="--color:var(--color-violet-600)" class="h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10" data-headlessui-state=""></div></div><div class="relative"><div style="--color:var(--color-purple-600)" class="h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10" data-headlessui-state=""></div></div><div class="relative"><div style="--color:var(--color-fuchsia-600)" class="h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10" data-headlessui-state=""></div></div><div class="relative"><div style="--color:var(--color-pink-600)" class="h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10" data-headlessui-state=""></div></div><div class="relative"><div style="--color:var(--color-rose-600)" class="h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10" data-headlessui-state=""></div></div><div class="relative"><div class="absolute -mt-1 w-screen border-t border-gray-950/5 dark:border-white/10"></div><div class="flex h-(--height) w-(--width) items-center"><div class="font-mono text-[13px]/7 text-gray-950 dark:text-white">500</div></div></div><div class="relative"><div style="--color:var(--color-red-500)" class="h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10" data-headlessui-state=""></div></div><div class="relative"><div style="--color:var(--color-orange-500)" class="h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10" data-headlessui-state=""></div></div><div class="relative"><div style="--color:var(--color-amber-500)" class="h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10" data-headlessui-state=""></div></div><div class="relative"><div style="--color:var(--color-yellow-500)" class="h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10" data-headlessui-state=""></div></div><div class="relative"><div style="--color:var(--color-lime-500)" class="h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10" data-headlessui-state=""></div></div><div class="relative"><div style="--color:var(--color-green-500)" class="h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10" data-headlessui-state=""></div></div><div class="relative"><div style="--color:var(--color-emerald-500)" class="h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10" data-headlessui-state=""></div></div><div class="relative"><div style="--color:var(--color-teal-500)" class="h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10" data-headlessui-state=""></div></div><div class="relative"><div style="--color:var(--color-cyan-500)" class="h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10" data-headlessui-state=""></div></div><div class="relative"><div style="--color:var(--color-sky-500)" class="h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10" data-headlessui-state=""></div></div><div class="relative"><div style="--color:var(--color-blue-500)" class="h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10" data-headlessui-state=""></div></div><div class="relative"><div style="--color:var(--color-indigo-500)" class="h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10" data-headlessui-state=""></div></div><div class="relative"><div style="--color:var(--color-violet-500)" class="h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10" data-headlessui-state=""></div></div><div class="relative"><div style="--color:var(--color-purple-500)" class="h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10" data-headlessui-state=""></div></div><div class="relative"><div style="--color:var(--color-fuchsia-500)" class="h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10" data-headlessui-state=""></div></div><div class="relative"><div style="--color:var(--color-pink-500)" class="h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10" data-headlessui-state=""></div></div><div class="relative"><div style="--color:var(--color-rose-500)" class="h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10" data-headlessui-state=""></div></div><div class="relative"><div class="absolute -mt-1 w-screen border-t border-gray-950/5 dark:border-white/10"></div><div class="flex h-(--height) w-(--width) items-center"><div class="font-mono text-[13px]/7 text-gray-950 dark:text-white">400</div></div></div><div class="relative"><div style="--color:var(--color-red-400)" class="h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10" data-headlessui-state=""></div></div><div class="relative"><div style="--color:var(--color-orange-400)" class="h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10" data-headlessui-state=""></div></div><div class="relative"><div style="--color:var(--color-amber-400)" class="h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10" data-headlessui-state=""></div></div><div class="relative"><div style="--color:var(--color-yellow-400)" class="h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10" data-headlessui-state=""></div></div><div class="relative"><div style="--color:var(--color-lime-400)" class="h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10" data-headlessui-state=""></div></div><div class="relative"><div style="--color:var(--color-green-400)" class="h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10" data-headlessui-state=""></div></div><div class="relative"><div style="--color:var(--color-emerald-400)" class="h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10" data-headlessui-state=""></div></div><div class="relative"><div style="--color:var(--color-teal-400)" class="h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10" data-headlessui-state=""></div></div><div class="relative"><div style="--color:var(--color-cyan-400)" class="h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10" data-headlessui-state=""></div></div><div class="relative"><div style="--color:var(--color-sky-400)" class="h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10" data-headlessui-state=""></div></div><div class="relative"><div style="--color:var(--color-blue-400)" class="h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10" data-headlessui-state=""></div></div><div class="relative"><div style="--color:var(--color-indigo-400)" class="h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10" data-headlessui-state=""></div></div><div class="relative"><div style="--color:var(--color-violet-400)" class="h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10" data-headlessui-state=""></div></div><div class="relative"><div style="--color:var(--color-purple-400)" class="h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10" data-headlessui-state=""></div></div><div class="relative"><div style="--color:var(--color-fuchsia-400)" class="h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10" data-headlessui-state=""></div></div><div class="relative"><div style="--color:var(--color-pink-400)" class="h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10" data-headlessui-state=""></div></div><div class="relative"><div style="--color:var(--color-rose-400)" class="h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10" data-headlessui-state=""></div></div><div class="relative"><div class="absolute -mt-1 w-screen border-t border-gray-950/5 dark:border-white/10"></div><div class="flex h-(--height) w-(--width) items-center"><div class="font-mono text-[13px]/7 text-gray-950 dark:text-white">300</div></div></div><div class="relative"><div style="--color:var(--color-red-300)" class="h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10" data-headlessui-state=""></div></div><div class="relative"><div style="--color:var(--color-orange-300)" class="h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10" data-headlessui-state=""></div></div><div class="relative"><div style="--color:var(--color-amber-300)" class="h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10" data-headlessui-state=""></div></div><div class="relative"><div style="--color:var(--color-yellow-300)" class="h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10" data-headlessui-state=""></div></div><div class="relative"><div style="--color:var(--color-lime-300)" class="h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10" data-headlessui-state=""></div></div><div class="relative"><div style="--color:var(--color-green-300)" class="h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10" data-headlessui-state=""></div></div><div class="relative"><div style="--color:var(--color-emerald-300)" class="h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10" data-headlessui-state=""></div></div><div class="relative"><div style="--color:var(--color-teal-300)" class="h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10" data-headlessui-state=""></div></div><div class="relative"><div style="--color:var(--color-cyan-300)" class="h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10" data-headlessui-state=""></div></div><div class="relative"><div style="--color:var(--color-sky-300)" class="h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10" data-headlessui-state=""></div></div><div class="relative"><div style="--color:var(--color-blue-300)" class="h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10" data-headlessui-state=""></div></div><div class="relative"><div style="--color:var(--color-indigo-300)" class="h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10" data-headlessui-state=""></div></div><div class="relative"><div style="--color:var(--color-violet-300)" class="h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10" data-headlessui-state=""></div></div><div class="relative"><div style="--color:var(--color-purple-300)" class="h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10" data-headlessui-state=""></div></div><div class="relative"><div style="--color:var(--color-fuchsia-300)" class="h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10" data-headlessui-state=""></div></div><div class="relative"><div style="--color:var(--color-pink-300)" class="h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10" data-headlessui-state=""></div></div><div class="relative"><div style="--color:var(--color-rose-300)" class="h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10" data-headlessui-state=""></div></div><div class="relative"><div class="absolute -mt-1 w-screen border-t border-gray-950/5 dark:border-white/10"></div><div class="flex h-(--height) w-(--width) items-center"><div class="font-mono text-[13px]/7 text-gray-950 dark:text-white">200</div></div></div><div class="relative"><div style="--color:var(--color-red-200)" class="h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10" data-headlessui-state=""></div></div><div class="relative"><div style="--color:var(--color-orange-200)" class="h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10" data-headlessui-state=""></div></div><div class="relative"><div style="--color:var(--color-amber-200)" class="h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10" data-headlessui-state=""></div></div><div class="relative"><div style="--color:var(--color-yellow-200)" class="h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10" data-headlessui-state=""></div></div><div class="relative"><div style="--color:var(--color-lime-200)" class="h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10" data-headlessui-state=""></div></div><div class="relative"><div style="--color:var(--color-green-200)" class="h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10" data-headlessui-state=""></div></div><div class="relative"><div style="--color:var(--color-emerald-200)" class="h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10" data-headlessui-state=""></div></div><div class="relative"><div style="--color:var(--color-teal-200)" class="h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10" data-headlessui-state=""></div></div><div class="relative"><div style="--color:var(--color-cyan-200)" class="h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10" data-headlessui-state=""></div></div><div class="relative"><div style="--color:var(--color-sky-200)" class="h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10" data-headlessui-state=""></div></div><div class="relative"><div style="--color:var(--color-blue-200)" class="h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10" data-headlessui-state=""></div></div><div class="relative"><div style="--color:var(--color-indigo-200)" class="h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10" data-headlessui-state=""></div></div><div class="relative"><div style="--color:var(--color-violet-200)" class="h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10" data-headlessui-state=""></div></div><div class="relative"><div style="--color:var(--color-purple-200)" class="h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10" data-headlessui-state=""></div></div><div class="relative"><div style="--color:var(--color-fuchsia-200)" class="h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10" data-headlessui-state=""></div></div><div class="relative"><div style="--color:var(--color-pink-200)" class="h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10" data-headlessui-state=""></div></div><div class="relative"><div style="--color:var(--color-rose-200)" class="h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10" data-headlessui-state=""></div></div><div class="relative"><div class="absolute -mt-1 w-screen border-t border-gray-950/5 dark:border-white/10"></div><div class="flex h-(--height) w-(--width) items-center"><div class="font-mono text-[13px]/7 text-gray-950 dark:text-white">100</div></div></div><div class="relative"><div style="--color:var(--color-red-100)" class="h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10" data-headlessui-state=""></div></div><div class="relative"><div style="--color:var(--color-orange-100)" class="h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10" data-headlessui-state=""></div></div><div class="relative"><div style="--color:var(--color-amber-100)" class="h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10" data-headlessui-state=""></div></div><div class="relative"><div style="--color:var(--color-yellow-100)" class="h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10" data-headlessui-state=""></div></div><div class="relative"><div style="--color:var(--color-lime-100)" class="h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10" data-headlessui-state=""></div></div><div class="relative"><div style="--color:var(--color-green-100)" class="h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10" data-headlessui-state=""></div></div><div class="relative"><div style="--color:var(--color-emerald-100)" class="h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10" data-headlessui-state=""></div></div><div class="relative"><div style="--color:var(--color-teal-100)" class="h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10" data-headlessui-state=""></div></div><div class="relative"><div style="--color:var(--color-cyan-100)" class="h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10" data-headlessui-state=""></div></div><div class="relative"><div style="--color:var(--color-sky-100)" class="h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10" data-headlessui-state=""></div></div><div class="relative"><div style="--color:var(--color-blue-100)" class="h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10" data-headlessui-state=""></div></div><div class="relative"><div style="--color:var(--color-indigo-100)" class="h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10" data-headlessui-state=""></div></div><div class="relative"><div style="--color:var(--color-violet-100)" class="h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10" data-headlessui-state=""></div></div><div class="relative"><div style="--color:var(--color-purple-100)" class="h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10" data-headlessui-state=""></div></div><div class="relative"><div style="--color:var(--color-fuchsia-100)" class="h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10" data-headlessui-state=""></div></div><div class="relative"><div style="--color:var(--color-pink-100)" class="h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10" data-headlessui-state=""></div></div><div class="relative"><div style="--color:var(--color-rose-100)" class="h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10" data-headlessui-state=""></div></div><div class="relative"><div class="absolute -mt-1 w-screen border-t border-gray-950/5 dark:border-white/10"></div><div class="flex h-(--height) w-(--width) items-center"><div class="font-mono text-[13px]/7 text-gray-950 dark:text-white">50</div></div></div><div class="relative"><div style="--color:var(--color-red-50)" class="h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10" data-headlessui-state=""></div></div><div class="relative"><div style="--color:var(--color-orange-50)" class="h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10" data-headlessui-state=""></div></div><div class="relative"><div style="--color:var(--color-amber-50)" class="h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10" data-headlessui-state=""></div></div><div class="relative"><div style="--color:var(--color-yellow-50)" class="h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10" data-headlessui-state=""></div></div><div class="relative"><div style="--color:var(--color-lime-50)" class="h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10" data-headlessui-state=""></div></div><div class="relative"><div style="--color:var(--color-green-50)" class="h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10" data-headlessui-state=""></div></div><div class="relative"><div style="--color:var(--color-emerald-50)" class="h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10" data-headlessui-state=""></div></div><div class="relative"><div style="--color:var(--color-teal-50)" class="h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10" data-headlessui-state=""></div></div><div class="relative"><div style="--color:var(--color-cyan-50)" class="h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10" data-headlessui-state=""></div></div><div class="relative"><div style="--color:var(--color-sky-50)" class="h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10" data-headlessui-state=""></div></div><div class="relative"><div style="--color:var(--color-blue-50)" class="h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10" data-headlessui-state=""></div></div><div class="relative"><div style="--color:var(--color-indigo-50)" class="h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10" data-headlessui-state=""></div></div><div class="relative"><div style="--color:var(--color-violet-50)" class="h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10" data-headlessui-state=""></div></div><div class="relative"><div style="--color:var(--color-purple-50)" class="h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10" data-headlessui-state=""></div></div><div class="relative"><div style="--color:var(--color-fuchsia-50)" class="h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10" data-headlessui-state=""></div></div><div class="relative"><div style="--color:var(--color-pink-50)" class="h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10" data-headlessui-state=""></div></div><div class="relative"><div style="--color:var(--color-rose-50)" class="h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10" data-headlessui-state=""></div></div></div></div></div></div><div class="@container isolate flex flex-col gap-2 overflow-hidden rounded-2xl bg-white p-2 outline outline-gray-950/5 dark:bg-gray-950 dark:outline-white/10 col-span-full xl:col-span-15"><div class="flex flex-col gap-6 p-6 @md:flex-row @md:gap-x-8 @md:p-8"><div class="flex h-18 w-28 shrink-0 items-center justify-center"><svg class="text-gray-950 [--site-background:var(--color-white)] dark:text-white dark:[--site-background:var(--color-gray-950)]" width="112" height="72" viewBox="0 0 112 72" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M2.73306 34L53.8286 4.50003C54.7851 3.94774 56.3361 3.94774 57.2927 4.50003L70.283 12C70.7607 12.2758 70.9999 12.6372 71.0005 12.9986V15.9986C71.0011 16.361 70.7619 16.7235 70.283 17L72.8811 15.5C73.8377 14.9477 75.3886 14.9477 76.3452 15.5L89.3356 23C89.8145 23.2765 90.0536 23.639 90.053 24.0014V26.9986C90.0536 27.361 89.8145 27.7235 89.3356 28L91.9337 26.5C92.8903 25.9477 94.4412 25.9477 95.3978 26.5L108.388 34C108.866 34.2758 109.105 34.6372 109.106 34.9986V38C109.106 38.3619 108.866 38.7239 108.388 39L95.3978 46.5C94.4412 47.0523 92.8903 47.0523 91.9337 46.5L89.3356 45C89.8145 45.2765 90.0536 45.639 90.053 46.0014V49C90.053 49.3619 89.8139 49.7239 89.3356 50L76.3452 57.5C75.3886 58.0523 73.8377 58.0523 72.8811 57.5L70.283 56C70.7607 56.2758 70.9999 56.6372 71.0005 56.9986V60C71.0005 60.3619 70.7613 60.7239 70.283 61L57.2927 68.5C56.3361 69.0523 54.7851 69.0523 53.8286 68.5L21.7856 50C21.3073 49.7239 21.0682 49.3619 21.0682 49L21.0682 46.0014C21.0676 45.6391 21.3066 45.2767 21.7852 45.0003L19.1875 46.5C18.231 47.0523 16.68 47.0523 15.7234 46.5L2.73306 39C2.25476 38.7239 2.01561 38.3619 2.01562 38V34.9986C2.01624 34.6372 2.25538 34.2758 2.73306 34Z" fill="var(--site-background)"></path><path d="M109.106 34.9986C109.105 34.6372 108.866 34.2758 108.388 34L95.3978 26.5C94.4412 25.9477 92.8903 25.9477 91.9337 26.5L78.9433 34C78.4644 34.2765 78.2252 34.639 78.2259 35.0014M109.106 34.9986C109.106 35.361 108.867 35.7235 108.388 36L95.3978 43.5C94.4412 44.0523 92.8903 44.0523 91.9337 43.5L78.9433 36C78.4656 35.7242 78.2265 35.3629 78.2259 35.0014M109.106 34.9986V38C109.106 38.3619 108.866 38.7239 108.388 39L95.3978 46.5C94.4412 47.0523 92.8903 47.0523 91.9337 46.5L78.9433 39C78.465 38.7239 78.2258 38.3619 78.2259 38V35.0014M90.053 46.0014C90.0536 45.639 89.8145 45.2765 89.3356 45L76.3452 37.5C75.3886 36.9477 73.8377 36.9477 72.8811 37.5L59.8907 45C59.4118 45.2765 59.1727 45.639 59.1733 46.0014M90.053 46.0014C90.0524 46.3629 89.8133 46.7242 89.3356 47L76.3452 54.5C75.3886 55.0523 73.8377 55.0523 72.8811 54.5L59.8907 47C59.4131 46.7242 59.1739 46.3629 59.1733 46.0014M90.053 46.0014V49C90.053 49.3619 89.8139 49.7239 89.3356 50L76.3452 57.5C75.3886 58.0523 73.8377 58.0523 72.8811 57.5L59.8907 50C59.4124 49.7239 59.1733 49.3619 59.1733 49V46.0014M71.0005 56.9986C70.9999 56.6372 70.7607 56.2758 70.283 56L38.2401 37.5C37.2835 36.9477 35.7326 36.9477 34.776 37.5L21.7856 45C21.3067 45.2765 21.0676 45.639 21.0682 46.0014M71.0005 56.9986C71.0011 57.361 70.7619 57.7235 70.283 58L57.2927 65.5C56.3361 66.0523 54.7851 66.0523 53.8286 65.5L21.7856 47C21.3079 46.7242 21.0688 46.3629 21.0682 46.0014M71.0005 56.9986V60C71.0005 60.3619 70.7613 60.7239 70.283 61L57.2927 68.5C56.3361 69.0523 54.7851 69.0523 53.8286 68.5L21.7856 50C21.3073 49.7239 21.0682 49.3619 21.0682 49L21.0682 46.0014M40.1207 35.0014C40.1201 34.639 40.3593 34.2765 40.8382 34L72.8811 15.5C73.8377 14.9477 75.3886 14.9477 76.3452 15.5L89.3356 23C89.8145 23.2765 90.0536 23.639 90.053 24.0014M40.1207 35.0014C40.1214 35.3629 40.3605 35.7242 40.8382 36L53.8286 43.5C54.7851 44.0523 56.3361 44.0523 57.2927 43.5L89.3356 25C89.8133 24.7242 90.0524 24.3629 90.053 24.0014M40.1207 35.0014V38C40.1207 38.3619 40.3599 38.7239 40.8382 39L53.8286 46.5C54.7851 47.0523 56.3361 47.0523 57.2927 46.5L89.3356 28C89.8145 27.7235 90.0536 27.361 90.053 26.9986V24.0014M71.0005 12.9986C70.9999 12.6372 70.7607 12.2758 70.283 12L57.2927 4.50003C56.3361 3.94774 54.7851 3.94774 53.8286 4.50003L2.73306 34C2.25538 34.2758 2.01624 34.6372 2.01563 34.9986M71.0005 12.9986C71.0011 13.361 70.7619 13.7235 70.283 14L19.1875 43.5C18.231 44.0523 16.68 44.0523 15.7234 43.5L2.73306 36C2.25416 35.7235 2.01501 35.361 2.01563 34.9986M71.0005 12.9986V15.9986C71.0011 16.361 70.7619 16.7235 70.283 17L19.1875 46.5C18.231 47.0523 16.68 47.0523 15.7234 46.5L2.73306 39C2.25476 38.7239 2.01561 38.3619 2.01562 38L2.01563 34.9986" stroke="currentColor"></path></svg></div><div><span class="text-xl/10 font-medium text-gray-950 @md:text-2xl/10 dark:text-white">CSS grid layout</span><p class="max-w-xl text-sm/7 text-gray-600 dark:text-gray-400">Using grid utilities directly in your HTML makes it so much easier to reason about complex layouts.</p></div></div><div class="flex-1"></div><div class="h-112 p-4 sm:p-8 relative overflow-hidden rounded-lg bg-gray-950/[2.5%] after:pointer-events-none after:absolute after:inset-0 after:rounded-lg after:inset-ring after:inset-ring-gray-950/5 dark:after:inset-ring-white/10 bg-[image:radial-gradient(var(--pattern-fg)_1px,_transparent_0)] bg-[size:10px_10px] bg-fixed [--pattern-fg:var(--color-gray-950)]/5 dark:[--pattern-fg:var(--color-white)]/10"><div class="-mr-16 -mb-8 [--size:--spacing(48)] lg:flex lg:justify-center xl:block"><div class="-mt-18 sm:-mt-26"><div class="bg-white p-6 ring ring-gray-950/5 sm:p-16 dark:bg-gray-950 dark:ring-white/10"><h3 class="text-base/6 font-semibold text-gray-950 dark:text-white">Browse properties</h3><div class="mt-6 grid grid-cols-[repeat(2,var(--size))] grid-rows-[repeat(3,var(--size))] gap-2 sm:grid-cols-[repeat(3,var(--size))] sm:grid-rows-[repeat(2,var(--size))]"><div class="relative col-span-2 row-span-1 overflow-hidden rounded-t-2xl sm:col-span-1 sm:row-span-2 sm:rounded-none sm:rounded-l-2xl dark:outline dark:outline-white/10"><img alt="" class="not-sm:hidden" src="/_next/static/media/css-grid-1.d6b88d05.png"/><img alt="" class="sm:hidden" src="/_next/static/media/css-grid-1.mobile.d0afc6a2.png"/><div class="absolute inset-0 flex items-end bg-linear-to-b from-transparent via-transparent to-gray-950"><span class="p-4 text-sm/5 font-semibold text-white">Treehouses</span></div></div><div class="relative dark:outline dark:outline-white/10"><img alt="" src="/_next/static/media/css-grid-2.d645692f.png"/><div class="absolute inset-0 flex items-end bg-linear-to-b from-transparent via-transparent to-gray-950"><span class="p-4 text-sm/5 font-semibold text-white">Mansions</span></div></div><div class="relative overflow-hidden sm:rounded-tr-2xl dark:outline dark:outline-white/10"><img alt="" src="/_next/static/media/css-grid-3.45c4c3d5.png"/><div class="absolute inset-0 flex items-end bg-linear-to-b from-transparent via-transparent to-gray-950"><span class="p-4 text-sm/5 font-semibold text-white">Lakefront cottages</span></div></div><div class="relative col-span-2 overflow-hidden rounded-b-2xl sm:rounded-bl-none dark:outline dark:outline-white/10"><img alt="" class="aspect-2/1" src="/_next/static/media/css-grid-4.308d73d9.png"/><div class="absolute inset-0 flex items-end bg-linear-to-b from-transparent via-transparent to-gray-950"><span class="p-4 text-sm/5 font-semibold text-white">Designer homes</span></div></div></div></div></div></div></div></div><div class="@container isolate flex flex-col gap-2 overflow-hidden rounded-2xl bg-white p-2 outline outline-gray-950/5 dark:bg-gray-950 dark:outline-white/10 col-span-full xl:col-span-15"><div class="flex flex-col gap-6 p-6 @md:flex-row @md:gap-x-8 @md:p-8"><div class="flex h-18 w-28 shrink-0 items-center justify-center"><svg class="text-gray-950 [--site-background:var(--color-white)] dark:text-white dark:[--site-background:var(--color-gray-950)]" width="112" height="72" viewBox="0 0 112 72" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#clip0_408_5765)"><path d="M11.3887 58.234C11.3887 59.5912 12.2855 60.9484 14.0791 61.984C17.6663 64.055 23.4823 64.055 27.0694 61.984C28.863 60.9484 29.7598 59.5912 29.7598 58.234M11.3887 58.234C11.3887 56.8767 12.2855 55.5195 14.0791 54.484C17.6663 52.4129 23.4823 52.4129 27.0694 54.484C28.8631 55.5195 29.7598 56.8767 29.7598 58.234M11.3887 58.234V61.234C11.3887 62.5912 12.2855 63.9484 14.0791 64.984C17.6663 67.055 23.4823 67.055 27.0694 64.984C28.863 63.9484 29.7598 62.5912 29.7598 61.234V58.234" stroke="currentColor" stroke-opacity="0.2"></path><path d="M44.3896 44.484C38.8892 41.3084 29.9714 41.3084 24.471 44.484C21.7208 46.0718 20.3457 48.1529 20.3458 50.234L20.3457 53.234C20.3457 55.3151 21.7208 57.3962 24.471 58.984C29.9713 62.1597 38.8892 62.1597 44.3896 58.984C47.1397 57.3962 48.5148 55.3151 48.5148 53.234V50.2555C48.5243 48.1673 47.1493 46.0773 44.3896 44.484Z" fill="var(--site-background)" fill-opacity="0.4"></path><path d="M20.3458 50.234C20.3458 52.3151 21.7208 54.3962 24.471 55.984C29.9714 59.1597 38.8892 59.1597 44.3896 55.984C47.1303 54.4017 48.5054 52.3294 48.5148 50.2555M20.3458 50.234C20.3457 48.1529 21.7208 46.0718 24.471 44.484C29.9714 41.3084 38.8892 41.3084 44.3896 44.484C47.1493 46.0773 48.5243 48.1673 48.5148 50.2555M20.3458 50.234L20.3457 53.234C20.3457 55.3151 21.7208 57.3962 24.471 58.984C29.9713 62.1597 38.8892 62.1597 44.3896 58.984C47.1397 57.3962 48.5148 55.3151 48.5148 53.234V50.2555" stroke="currentColor" stroke-opacity="0.4"></path><path d="M61.7097 34.484C54.2962 30.2038 42.2765 30.2038 34.8629 34.484C31.1562 36.6241 29.3028 39.429 29.3028 42.234L29.3027 45.234C29.3027 48.0389 31.1561 50.8439 34.8629 52.984C42.2764 57.2642 54.2961 57.2642 61.7097 52.984C65.4164 50.8439 67.2698 48.0389 67.2698 45.234V42.2104C67.2595 39.4133 65.4061 36.6181 61.7097 34.484Z" fill="var(--site-background)" fill-opacity="0.6"></path><path d="M29.3028 42.234C29.3028 45.0389 31.1562 47.8439 34.8629 49.984C42.2765 54.2642 54.2962 54.2642 61.7097 49.984C65.4269 47.8379 67.2802 45.0232 67.2698 42.2104M29.3028 42.234C29.3028 39.429 31.1562 36.6241 34.8629 34.484C42.2765 30.2038 54.2962 30.2038 61.7097 34.484C65.4061 36.6181 67.2595 39.4133 67.2698 42.2104M29.3028 42.234L29.3027 45.234C29.3027 48.0389 31.1561 50.8439 34.8629 52.984C42.2764 57.2642 54.2961 57.2642 61.7097 52.984C65.4164 50.8439 67.2698 48.0389 67.2698 45.234V42.2104" stroke="currentColor" stroke-opacity="0.6"></path><path d="M79.0318 24.484C69.7051 19.0992 54.5835 19.0992 45.2568 24.484C40.5934 27.1764 38.2618 30.7052 38.2618 34.234L38.2617 37.234C38.2617 40.7628 40.5934 44.2916 45.2567 46.984C54.5835 52.3688 69.705 52.3688 79.0317 46.984C83.6951 44.2916 86.0268 40.7628 86.0268 37.234L86.0268 34.234C86.0268 30.7052 83.6951 27.1764 79.0318 24.484Z" fill="var(--site-background)" fill-opacity="0.8"></path><path d="M38.2618 34.234C38.2618 37.7628 40.5934 41.2916 45.2568 43.984C54.5835 49.3688 69.7051 49.3688 79.0318 43.984C83.6951 41.2916 86.0268 37.7628 86.0268 34.234M38.2618 34.234C38.2618 30.7052 40.5934 27.1764 45.2568 24.484C54.5835 19.0992 69.7051 19.0992 79.0318 24.484C83.6951 27.1764 86.0268 30.7052 86.0268 34.234M38.2618 34.234L38.2617 37.234C38.2617 40.7628 40.5934 44.2916 45.2567 46.984C54.5835 52.3688 69.705 52.3688 79.0317 46.984C83.6951 44.2916 86.0268 40.7628 86.0268 37.234L86.0268 34.234" stroke="currentColor" stroke-opacity="0.8"></path><path d="M55.6487 37.9841C66.8885 44.4734 85.112 44.4734 96.3519 37.9841C101.972 34.7394 104.782 30.4867 104.782 26.2341L104.782 23.2341C104.782 18.9814 101.972 14.7287 96.3518 11.4841C85.112 4.99473 66.8885 4.99473 55.6487 11.4841C50.0287 14.7287 47.2188 18.9814 47.2188 23.2341L47.2188 26.2341C47.2188 30.4867 50.0287 34.7394 55.6487 37.9841Z" fill="var(--site-background)"></path><path d="M104.782 23.2341C104.782 18.9814 101.972 14.7287 96.3518 11.4841C85.112 4.99473 66.8885 4.99473 55.6487 11.4841C50.0287 14.7287 47.2188 18.9814 47.2188 23.2341M104.782 23.2341C104.782 27.4867 101.972 31.7394 96.3518 34.9841C85.112 41.4734 66.8885 41.4734 55.6487 34.9841C50.0287 31.7394 47.2187 27.4867 47.2188 23.2341M104.782 23.2341L104.782 26.2341C104.782 30.4867 101.972 34.7394 96.3519 37.9841C85.112 44.4734 66.8885 44.4734 55.6487 37.9841C50.0287 34.7394 47.2188 30.4867 47.2188 26.2341L47.2188 23.2341" stroke="currentColor"></path></g><defs><clipPath id="clip0_408_5765"><rect width="112" height="72" fill="var(--site-background)"></rect></clipPath></defs></svg></div><div><span class="text-xl/10 font-medium text-gray-950 @md:text-2xl/10 dark:text-white">Transitions and animations</span><p class="max-w-xl text-sm/7 text-gray-600 dark:text-gray-400">Transitions that work the way you'd expect — throw a few utilities on an element and you're in business.</p></div></div><div class="flex-1"></div><div class="grid h-112 gap-[inherit]"><div class="relative overflow-hidden rounded-lg bg-gray-950/[2.5%] after:pointer-events-none after:absolute after:inset-0 after:rounded-lg after:inset-ring after:inset-ring-gray-950/5 dark:after:inset-ring-white/10 bg-[image:radial-gradient(var(--pattern-fg)_1px,_transparent_0)] bg-[size:10px_10px] bg-fixed [--pattern-fg:var(--color-gray-950)]/5 dark:[--pattern-fg:var(--color-white)]/10"><div class="flex h-full flex-col justify-between px-6 py-10 sm:p-10"><div class="grid grid-cols-[auto_1fr] gap-8 sm:gap-11"><svg class="size-16 rounded-lg bg-white text-gray-800 shadow-sm sm:size-18 dark:bg-gray-900 dark:text-white dark:inset-ring dark:inset-ring-white/5" viewBox="0 0 65 65" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8 56.9441L56 8.94409" stroke="currentColor" stroke-opacity="0.3"></path><path d="M8 56.9441L56 8.94409" stroke="currentColor" stroke-dasharray="0px 1px" pathLength="1" stroke-dashoffset="0px"></path></svg><div class="flex w-full min-w-0 flex-col justify-between pt-1 pb-4"><p class="flex font-mono text-xs text-nowrap text-clip text-gray-700 dark:text-gray-200"><span class="hidden sm:visible">transition duration-750</span><span class="font-medium text-gray-950 dark:text-white">linear</span></p><div class="@container relative grid grid-cols-[auto_1fr_auto] items-center px-4 sm:px-5"><div class="absolute size-8 rounded-lg bg-sky-400 shadow-lg shadow-sky-400/50 transition-none sm:size-10"></div><div class="size-2 rounded-full border border-gray-950/20 dark:border-gray-700"></div><div class="h-px w-full bg-gray-950/20 dark:bg-gray-700"></div><div class="size-2 rounded-full border border-gray-950/20 dark:border-gray-700"></div></div></div></div><div class="grid grid-cols-[auto_1fr] gap-8 sm:gap-11"><svg class="size-16 rounded-lg bg-white text-gray-800 shadow-sm sm:size-18 dark:bg-gray-900 dark:text-white dark:inset-ring dark:inset-ring-white/5" viewBox="0 0 65 65" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8 57C8 57 32 9 56 9" stroke="currentColor" stroke-opacity="0.3"></path><path d="M8 57C8 57 32 9 56 9" stroke="currentColor" stroke-dasharray="0px 1px" pathLength="1" stroke-dashoffset="0px"></path></svg><div class="flex w-full min-w-0 flex-col justify-between pt-1 pb-4"><p class="flex font-mono text-xs text-nowrap text-clip text-gray-700 dark:text-gray-200"><span class="hidden sm:visible">transition duration-750</span><span class="font-medium text-gray-950 dark:text-white">ease-out</span></p><div class="@container relative grid max-w-full grid-cols-[auto_1fr_auto] items-center px-4 sm:px-5"><div class="absolute size-8 rounded-lg bg-purple-400 shadow-lg shadow-purple-400/50 transition-none sm:size-10"></div><div class="size-2 rounded-full border border-gray-950/20 dark:border-gray-700"></div><div class="h-px w-full bg-gray-950/20 dark:bg-gray-700"></div><div class="size-2 rounded-full border border-gray-950/20 dark:border-gray-700"></div></div></div></div><div class="grid grid-cols-[auto_1fr] gap-8 sm:gap-11"><svg class="size-16 rounded-lg bg-white text-gray-800 shadow-sm sm:size-18 dark:bg-gray-900 dark:text-white dark:inset-ring dark:inset-ring-white/5" viewBox="0 0 65 65" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8 57C32 57 32 9 56 9" stroke="currentColor" stroke-opacity="0.3"></path><path d="M8 57C32 57 32 9 56 9" stroke="currentColor" stroke-dasharray="0px 1px" pathLength="1" stroke-dashoffset="0px"></path></svg><div class="flex w-full min-w-0 flex-col justify-between pt-1 pb-4"><p class="flex-1 font-mono text-xs text-nowrap text-clip text-gray-700 dark:text-gray-200"><span class="hidden sm:visible">transition duration-750</span><span class="font-medium text-gray-950 dark:text-white">ease-in-out</span></p><div class="@container relative grid grid-cols-[auto_1fr_auto] items-center px-4 sm:px-5"><div class="absolute size-8 rounded-lg bg-pink-400 shadow-lg shadow-pink-400/50 transition-none sm:size-10"></div><div class="size-2 rounded-full border border-gray-950/20 dark:border-gray-700"></div><div class="h-px w-full bg-gray-950/20 dark:bg-gray-700"></div><div class="size-2 rounded-full border border-gray-950/20 dark:border-gray-700"></div></div></div></div><div class="grid grid-cols-[auto_1fr] gap-8 sm:gap-11"><svg class="size-16 rounded-lg bg-white text-gray-800 shadow-sm sm:size-18 dark:bg-gray-900 dark:text-white dark:inset-ring dark:inset-ring-white/5" viewBox="0 0 65 65" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8 57C32 57 56 9 56 9" stroke="currentColor" stroke-opacity="0.3"></path><path d="M8 57C32 57 56 9 56 9" stroke="currentColor" stroke-dasharray="0px 1px" pathLength="1" stroke-dashoffset="0px"></path></svg><div class="flex w-full min-w-0 flex-col justify-between pt-1 pb-4"><p class="flex font-mono text-xs text-nowrap text-clip text-gray-700 dark:text-gray-200"><span class="hidden sm:visible">transition duration-750</span><span class="font-medium text-gray-950 dark:text-white">ease-in</span></p><div class="@container relative grid grid-cols-[auto_1fr_auto] items-center px-4 sm:px-5"><div class="absolute size-8 rounded-lg bg-indigo-400 shadow-lg shadow-indigo-400/50 transition-none sm:size-10"></div><div class="size-2 rounded-full border border-gray-950/20 dark:border-gray-700"></div><div class="h-px w-full bg-gray-950/20 dark:bg-gray-700"></div><div class="size-2 rounded-full border border-gray-950/20 dark:border-gray-700"></div></div></div></div></div></div></div></div><div class="@container isolate flex flex-col gap-2 overflow-hidden rounded-2xl bg-white p-2 outline outline-gray-950/5 dark:bg-gray-950 dark:outline-white/10 col-span-full md:col-span-15 xl:col-span-10"><div class="flex flex-col gap-6 p-6 @md:flex-row @md:gap-x-8 @md:p-8"><div class="flex h-18 w-28 shrink-0 items-center justify-center"><svg class="text-gray-950 [--site-background:var(--color-white)] dark:text-white dark:[--site-background:var(--color-gray-950)]" width="112" height="72" viewBox="0 0 112 72" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#clip0_408_5751)"><path d="M52.0956 7.50006L4.4642 35.0001C3.51163 35.55 3.03334 36.2701 3.02935 36.9909V40.0129C3.03497 40.7325 3.51324 41.451 4.46417 42.0001L52.0956 69.5001C54.0087 70.6046 57.1106 70.6046 59.0238 69.5001L106.655 42.0001C107.612 41.4478 108.09 40.7239 108.09 40.0001V36.9909C108.086 36.2701 107.608 35.55 106.655 35.0001L59.0238 7.50006C57.1106 6.39549 54.0088 6.39549 52.0956 7.50006Z" fill="var(--site-background)"></path><path d="M108.09 36.9909C108.086 36.2701 107.608 35.55 106.655 35.0001L59.0238 7.50006C57.1106 6.39549 54.0088 6.39549 52.0956 7.50006L4.4642 35.0001C3.51163 35.55 3.03334 36.2701 3.02935 36.9909M108.09 36.9909C108.094 37.7178 107.616 38.4455 106.655 39.0001L59.0238 66.5001C57.1106 67.6046 54.0088 67.6046 52.0956 66.5001L4.4642 39.0001C3.5036 38.4455 3.02532 37.7178 3.02935 36.9909M108.09 36.9909V40.0001C108.09 40.7239 107.612 41.4478 106.655 42.0001L59.0238 69.5001C57.1106 70.6046 54.0087 70.6046 52.0956 69.5001L4.46417 42.0001C3.51324 41.451 3.03497 40.7325 3.02935 40.0129V36.9909" stroke="currentColor"></path><path d="M16.8848 33.9903C16.8891 33.2697 17.3674 32.5499 18.3196 32.0001L52.0946 12.5001C54.0078 11.3955 57.1097 11.3955 59.0228 12.5001L92.7978 32.0001C93.7501 32.5499 94.2284 33.2697 94.2327 33.9903M16.8848 33.9903C16.8805 34.7174 17.3588 35.4453 18.3196 36.0001L52.0946 55.5001C54.0078 56.6046 57.1097 56.6046 59.0228 55.5001L92.7978 36.0001C93.7587 35.4453 94.237 34.7174 94.2327 33.9903M16.8848 33.9903V37.0001C16.8848 37.7239 17.3631 38.4478 18.3197 39.0001L52.0947 58.5001C54.0078 59.6046 57.1097 59.6046 59.0229 58.5001L92.7979 39.0001C93.7544 38.4478 94.2327 37.7239 94.2327 37.0001L94.2327 33.9903" stroke="currentColor"></path><path d="M30.7422 30.9998C30.7422 30.2759 31.2205 29.5521 32.1771 28.9998L52.0956 17.4998C54.0088 16.3952 57.1107 16.3952 59.0238 17.4998L78.9424 28.9998C79.899 29.5521 80.3773 30.2759 80.3773 30.9998M30.7422 30.9998C30.7422 31.7237 31.2205 32.4475 32.1771 32.9998L52.0956 44.4998C54.0088 45.6044 57.1107 45.6044 59.0238 44.4998L78.9424 32.9998C79.899 32.4475 80.3773 31.7237 80.3773 30.9998M30.7422 30.9998V33.9998C30.7422 34.7237 31.2205 35.4475 32.1771 35.9998L52.0956 47.4998C54.0088 48.6044 57.1107 48.6044 59.0238 47.4998L78.9424 35.9998C79.899 35.4475 80.3773 34.7237 80.3773 33.9998V30.9998" stroke="currentColor"></path></g><defs><clipPath id="clip0_408_5751"><rect width="112" height="72" fill="var(--site-background)"></rect></clipPath></defs></svg></div><div><span class="text-xl/10 font-medium text-gray-950 @md:text-2xl/10 dark:text-white">Cascade layers</span><p class="max-w-xl text-sm/7 text-gray-600 dark:text-gray-400">Tailwind uses CSS layers so you don’t have to worry about specificity issues.</p></div></div><div class="flex-1"></div><div class="h-112 p-4 sm:p-8 relative overflow-hidden rounded-lg bg-gray-950/[2.5%] after:pointer-events-none after:absolute after:inset-0 after:rounded-lg after:inset-ring after:inset-ring-gray-950/5 dark:after:inset-ring-white/10 bg-[image:radial-gradient(var(--pattern-fg)_1px,_transparent_0)] bg-[size:10px_10px] bg-fixed [--pattern-fg:var(--color-gray-950)]/5 dark:[--pattern-fg:var(--color-white)]/10"><div class="-mr-16 -mb-16"><div class="rounded-xl bg-gray-950"><div class="rounded-xl p-1 text-sm scheme-dark dark:inset-ring dark:inset-ring-white/10"><div class="flex gap-2 p-2"><span class="size-3 rounded-full bg-white/20"></span><span class="size-3 rounded-full bg-white/20"></span><span class="size-3 rounded-full bg-white/20"></span></div><div class="with-line-numbers text-[13px]/6 *:*:p-3!"><div class="*:flex *:*:max-w-none *:*:shrink-0 *:*:grow *:overflow-auto *:rounded-lg *:bg-white/10! *:p-5 dark:*:bg-white/5! **:[.line]:isolate **:[.line]:not-last:min-h-[1lh] *:inset-ring *:inset-ring-white/10 dark:*:inset-ring-white/5"><pre class="shiki tailwindcss-theme" style="background-color:transparent;color:var(--color-slate-50)" tabindex="0"><code><div class="line"><span style="color:var(--color-slate-300)">@layer</span><span style="color:var(--color-slate-50)"> theme</span><span style="color:var(--color-slate-300)">,</span><span style="color:var(--color-slate-50)"> base</span><span style="color:var(--color-slate-300)">,</span><span style="color:var(--color-slate-50)"> components</span><span style="color:var(--color-slate-300)">,</span><span style="color:var(--color-slate-50)"> utilities</span><span style="color:var(--color-slate-300)">;</span></div><div class="line"></div><div class="line"><span style="color:var(--color-slate-300)">@layer</span><span style="color:var(--color-slate-50)"> theme </span><span style="color:var(--color-slate-300)">{</span></div><div class="line"><span style="color:var(--color-pink-400)"> :root</span><span style="color:var(--color-slate-300)"> {</span></div><div class="line"><span style="color:var(--color-slate-400);font-style:italic"> /* Your theme variables */</span></div><div class="line"><span style="color:var(--color-slate-300)"> }</span></div><div class="line"><span style="color:var(--color-slate-300)">}</span></div><div class="line"></div><div class="line"><span style="color:var(--color-slate-300)">@layer</span><span style="color:var(--color-slate-50)"> base </span><span style="color:var(--color-slate-300)">{</span></div><div class="line"><span style="color:var(--color-slate-400);font-style:italic"> /* Preflight styles */</span></div><div class="line"><span style="color:var(--color-slate-300)">}</span></div><div class="line"></div><div class="line"><span style="color:var(--color-slate-300)">@layer</span><span style="color:var(--color-slate-50)"> components </span><span style="color:var(--color-slate-300)">{</span></div><div class="line"><span style="color:var(--color-slate-400);font-style:italic"> /* Your custom components */</span></div><div class="line"><span style="color:var(--color-slate-300)">}</span></div><div class="line"></div><div class="line"><span style="color:var(--color-slate-300)">@layer</span><span style="color:var(--color-slate-50)"> utilities </span><span style="color:var(--color-slate-300)">{</span></div><div class="line"><span style="color:var(--color-slate-400);font-style:italic"> /* Your utility classes */</span></div><div class="line"><span style="color:var(--color-slate-300)">}</span></div></code></pre></div></div></div></div></div></div></div><div class="@container isolate flex flex-col gap-2 overflow-hidden rounded-2xl bg-white p-2 outline outline-gray-950/5 dark:bg-gray-950 dark:outline-white/10 col-span-full md:col-span-15 xl:col-span-10"><div class="flex flex-col gap-6 p-6 @md:flex-row @md:gap-x-8 @md:p-8"><div class="flex h-18 w-28 shrink-0 items-center justify-center"><svg class="text-gray-950 [--site-background:var(--color-white)] dark:text-white dark:[--site-background:var(--color-gray-950)]" width="112" height="72" viewBox="0 0 112 72" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#clip0_408_5693)"><rect width="63" height="63" rx="2" transform="matrix(0.866025 -0.5 0.866025 0.5 1 38)" stroke="currentColor" stroke-opacity="0.3" stroke-dasharray="3 3"></rect><path d="M91.066 26L77.2096 34C76.7313 34.2762 76.4922 34.6381 76.4922 35.0001V38.0283C76.5043 38.3807 76.7433 38.731 77.2091 39L91.0655 47C92.0221 47.5523 93.5731 47.5523 94.5296 47L108.386 39C108.864 38.7239 109.103 38.362 109.103 38.0001L109.104 35.0001C109.104 34.6381 108.865 34.2762 108.387 34L94.5301 26C93.5736 25.4477 92.0226 25.4477 91.066 26Z" fill="var(--site-background)" stroke="currentColor"></path><path d="M53.8274 47.5L39.971 55.5C39.4927 55.7762 39.2536 56.1381 39.2536 56.5001L39.252 59.5001C39.252 59.862 39.4911 60.2239 39.9694 60.5L53.8258 68.5C54.7824 69.0523 56.3333 69.0523 57.2899 68.5L71.1463 60.5C71.6246 60.2239 71.8637 59.862 71.8637 59.5001L71.8654 56.5001C71.8654 56.1381 71.6262 55.7762 71.1479 55.5L57.2915 47.5C56.3349 46.9477 54.784 46.9477 53.8274 47.5Z" fill="var(--site-background)"></path><path d="M16.5883 26L2.73193 34C2.25362 34.2762 2.01447 34.6381 2.01449 35.0001L2.01367 38.0001C2.01371 38.362 2.25285 38.7239 2.73111 39L16.5875 47C17.5441 47.5523 19.095 47.5523 20.0516 47L33.908 39C34.3863 38.7239 34.6254 38.362 34.6255 38.0001L34.6263 35.0001C34.6263 34.6381 34.3871 34.2762 33.9088 34L20.0524 26C19.0959 25.4477 17.5449 25.4477 16.5883 26Z" fill="var(--site-background)"></path><path d="M53.8278 4.50027L39.9713 12.5003C39.4931 12.7764 39.254 13.1382 39.2539 13.5001V16.5568C39.2776 16.8997 39.516 17.2385 39.9694 17.5002L53.8258 25.5002C54.7824 26.0525 56.3333 26.0525 57.2899 25.5002L71.1463 17.5002C71.6247 17.224 71.8638 16.862 71.8637 16.5001V13.4437C71.8401 13.1008 71.6016 12.762 71.1483 12.5003L57.2919 4.50027C56.3353 3.94799 54.7843 3.94799 53.8278 4.50027Z" fill="var(--site-background)"></path><path d="M34.6263 35.0001C34.6263 34.6381 34.3871 34.2762 33.9088 34L20.0524 26C19.0959 25.4477 17.5449 25.4477 16.5883 26L2.73193 34C2.25362 34.2762 2.01447 34.6381 2.01449 35.0001M34.6263 35.0001C34.6263 35.362 34.3871 35.7239 33.9088 36L20.0524 44C19.0959 44.5523 17.5449 44.5523 16.5883 44L2.73193 36C2.25365 35.7239 2.0145 35.362 2.01449 35.0001M34.6263 35.0001L34.6255 38.0001C34.6254 38.362 34.3863 38.7239 33.908 39L20.0516 47C19.095 47.5523 17.5441 47.5523 16.5875 47L2.73111 39C2.25285 38.7239 2.01371 38.362 2.01367 38.0001L2.01449 35.0001" stroke="currentColor"></path><path d="M71.8654 56.5001C71.8654 56.1381 71.6262 55.7762 71.1479 55.5L57.2915 47.5C56.3349 46.9477 54.784 46.9477 53.8274 47.5L39.971 55.5C39.4927 55.7762 39.2536 56.1381 39.2536 56.5001M71.8654 56.5001C71.8654 56.862 71.6262 57.2239 71.1479 57.5L57.2915 65.5C56.3349 66.0523 54.784 66.0523 53.8274 65.5L39.971 57.5C39.4927 57.2239 39.2536 56.862 39.2536 56.5001M71.8654 56.5001L71.8637 59.5001C71.8637 59.862 71.6246 60.2239 71.1463 60.5L57.2899 68.5C56.3333 69.0523 54.7824 69.0523 53.8258 68.5L39.9694 60.5C39.4911 60.2239 39.252 59.862 39.252 59.5001L39.2536 56.5001" stroke="currentColor"></path><path d="M71.8637 13.4437C71.8401 13.1008 71.6016 12.762 71.1483 12.5003L57.2919 4.50027C56.3353 3.94799 54.7843 3.94799 53.8278 4.50027L39.9713 12.5003C39.4931 12.7764 39.254 13.1382 39.2539 13.5001M71.8637 13.4437C71.89 13.8242 71.6515 14.2097 71.1483 14.5003L57.2919 22.5003C56.3353 23.0526 54.7843 23.0526 53.8278 22.5003L39.9713 14.5003C39.493 14.2241 39.2538 13.8621 39.2539 13.5001M71.8637 13.4437V16.5001C71.8638 16.862 71.6247 17.224 71.1463 17.5002L57.2899 25.5002C56.3333 26.0525 54.7824 26.0525 53.8258 25.5002L39.9694 17.5002C39.516 17.2385 39.2776 16.8997 39.2539 16.5568V13.5001" stroke="currentColor"></path><path d="M109.104 35.0001C109.104 34.6381 108.865 34.2762 108.387 34L94.5301 26C93.5735 25.4477 92.0226 25.4477 91.066 26L77.2096 34C76.7313 34.2762 76.4922 34.6381 76.4922 35.0001M109.104 35.0001C109.104 35.362 108.865 35.7239 108.387 36L94.5301 44C93.5735 44.5523 92.0226 44.5523 91.066 44L77.2096 36C76.7313 35.7239 76.4922 35.362 76.4922 35.0001M109.104 35.0001L109.103 38.0001C109.103 38.362 108.864 38.7239 108.386 39L94.5296 47C93.5731 47.5523 92.0221 47.5523 91.0655 47L77.2091 39C76.7433 38.731 76.5043 38.3807 76.4922 38.0283V35.0001" stroke="currentColor"></path><path d="M19.1868 32.5001L51.2297 14.0001M51.2297 14.0001V18.0001M51.2297 14.0001H44.3015" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path><path d="M91.9324 37.5001L59.8894 56.0001M59.8894 56.0001L59.8894 52.0001M59.8894 56.0001L66.8176 56.0001" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path><path d="M59.8894 14.0001L91.9324 32.5001M91.9324 32.5001L85.0041 32.5001M91.9324 32.5001L91.9324 28.5001" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path><path d="M51.2297 56.0001L19.1868 37.5001M19.1868 37.5001H26.115M19.1868 37.5001V41.5001" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path></g><defs><clipPath id="clip0_408_5693"><rect width="112" height="72" fill="var(--site-background)"></rect></clipPath></defs></svg></div><div><span class="text-xl/10 font-medium text-gray-950 @md:text-2xl/10 dark:text-white">Logical properties</span><p class="max-w-xl text-sm/7 text-gray-600 dark:text-gray-400">Supporting multiple language text directions is no longer a nightmare.</p></div></div><div class="flex-1"></div><div class="h-112 relative overflow-hidden rounded-lg bg-gray-950/[2.5%] after:pointer-events-none after:absolute after:inset-0 after:rounded-lg after:inset-ring after:inset-ring-gray-950/5 dark:after:inset-ring-white/10 bg-[image:radial-gradient(var(--pattern-fg)_1px,_transparent_0)] bg-[size:10px_10px] bg-fixed [--pattern-fg:var(--color-gray-950)]/5 dark:[--pattern-fg:var(--color-white)]/10"><div class="flex px-8 pt-8"><div class="w-full -translate-x-4"><div class="font-mono text-[13px]/7 text-gray-950 dark:text-white">ltr</div></div><div class="w-full translate-x-4 translate-y-20 text-right"><div class="font-mono text-[13px]/7 text-gray-950 dark:text-white">rtl</div></div></div><div class="@container relative isolate flex h-full items-center justify-center"><div class="absolute bottom-12 -left-2 z-1 w-[60cqw] shrink-0 divide-y divide-gray-950/5 rounded-xl bg-white shadow-2xl inset-ring inset-ring-gray-950/5 dark:divide-white/5 dark:bg-gray-800 dark:inset-ring-white/5"><div class="flex items-center justify-start gap-4 p-6"><div class="shrink-0"><img alt="" src="/_next/static/media/avatar-4.61762eae.png" class="size-12 shrink-0 rounded-full bg-gray-950/5 outline -outline-offset-1 outline-gray-950/10 dark:outline-white/10"/></div><div class="flex flex-col truncate"><span class="text-sm/6 font-medium text-gray-950 dark:text-white">Will Winton</span><span class="truncate text-sm/6 text-gray-500 dark:text-gray-400">Director of Operations</span></div></div><div class="flex items-center justify-start gap-4 p-6"><div class="shrink-0"><img alt="" src="/_next/static/media/avatar-5.80ec4bd6.png" class="size-12 shrink-0 rounded-full bg-gray-950/5 outline -outline-offset-1 outline-gray-950/10 dark:outline-white/10"/></div><div class="flex flex-col truncate"><span class="text-sm/6 font-medium text-gray-950 dark:text-white">Kristin Yardly</span><span class="truncate text-sm/6 text-gray-500 dark:text-gray-400">Marketing Coordinator</span></div></div><div class="flex items-center justify-start gap-4 p-6"><div class="shrink-0"><img alt="" src="/_next/static/media/avatar-6.4477a8c2.png" class="size-12 shrink-0 rounded-full bg-gray-950/5 outline -outline-offset-1 outline-gray-950/10 dark:outline-white/10"/></div><div class="flex flex-col truncate"><span class="text-sm/6 font-medium text-gray-950 dark:text-white">Emanual Cuccittini</span><span class="truncate text-sm/6 text-gray-500 dark:text-gray-400">Staff Engineer</span></div></div><div class="flex items-center justify-start gap-4 p-6"><div class="shrink-0"><img alt="" src="/_next/static/media/avatar-7.7aeec531.png" class="size-12 shrink-0 rounded-full bg-gray-950/5 outline -outline-offset-1 outline-gray-950/10 dark:outline-white/10"/></div><div class="flex flex-col truncate"><span class="text-sm/6 font-medium text-gray-950 dark:text-white">Kiara Smith</span><span class="truncate text-sm/6 text-gray-500 dark:text-gray-400">VP of Engineering</span></div></div></div><div class="absolute -right-3 bottom-12 w-[50cqw] shrink-0 divide-y divide-gray-950/5 rounded-xl bg-white shadow-2xl inset-ring inset-ring-gray-950/5 dark:divide-white/5 dark:bg-gray-800 dark:inset-ring-white/5"><div class="flex items-center justify-start gap-4 p-6" dir="rtl"><div class="shrink-0"><img alt="" src="/_next/static/media/avatar-1.4512b883.png" class="size-12 shrink-0 rounded-full bg-gray-950/5 outline -outline-offset-1 outline-gray-950/10 dark:outline-white/10"/></div><div class="flex flex-col truncate"><span class="text-sm/6 font-medium text-gray-950 dark:text-white">سارة أحمد</span><span class="truncate text-sm/6 text-gray-500 dark:text-gray-400">مديرة مشاريع</span></div></div><div class="flex items-center justify-start gap-4 p-6" dir="rtl"><div class="shrink-0"><img alt="" src="/_next/static/media/avatar-2.74328963.png" class="size-12 shrink-0 rounded-full bg-gray-950/5 outline -outline-offset-1 outline-gray-950/10 dark:outline-white/10"/></div><div class="flex flex-col truncate"><span class="text-sm/6 font-medium text-gray-950 dark:text-white">علي محمد</span><span class="truncate text-sm/6 text-gray-500 dark:text-gray-400">مطور برمجيات</span></div></div><div class="flex items-center justify-start gap-4 p-6" dir="rtl"><div class="shrink-0"><img alt="" src="/_next/static/media/avatar-3.905e2d38.png" class="size-12 shrink-0 rounded-full bg-gray-950/5 outline -outline-offset-1 outline-gray-950/10 dark:outline-white/10"/></div><div class="flex flex-col truncate"><span class="text-sm/6 font-medium text-gray-950 dark:text-white">خالد عمر</span><span class="truncate text-sm/6 text-gray-500 dark:text-gray-400">مصمم واجهات المستخدم</span></div></div></div></div></div></div><div class="@container isolate flex flex-col gap-2 overflow-hidden rounded-2xl bg-white p-2 outline outline-gray-950/5 dark:bg-gray-950 dark:outline-white/10 col-span-full md:col-span-15 xl:col-span-10"><div class="flex flex-col gap-6 p-6 @md:flex-row @md:gap-x-8 @md:p-8"><div class="flex h-18 w-28 shrink-0 items-center justify-center"><svg class="text-gray-950 [--site-background:var(--color-white)] dark:text-white dark:[--site-background:var(--color-gray-950)]" width="112" height="72" viewBox="0 0 112 72" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#clip0_408_5756)"><path d="M52.9631 4.99998L3.59961 33.5C2.88216 33.9142 2.52344 34.4571 2.52345 35L2.52344 38C2.52344 38.5429 2.88215 39.0858 3.59958 39.5L52.963 68C54.3979 68.8284 56.7243 68.8284 58.1592 68L107.523 39.5C108.24 39.0858 108.599 38.5429 108.599 38V34.9952C108.597 34.4539 108.238 33.913 107.523 33.5L58.1592 4.99998C56.7243 4.17156 54.3979 4.17156 52.9631 4.99998Z" fill="var(--site-background)"></path><path d="M108.599 34.9952C108.597 34.4539 108.238 33.913 107.523 33.5L58.1592 4.99998C56.7243 4.17156 54.3979 4.17156 52.9631 4.99998L3.59961 33.5C2.88216 33.9142 2.52344 34.4571 2.52345 35M108.599 34.9952C108.601 35.5397 108.242 36.0845 107.523 36.5L58.1592 65C56.7243 65.8284 54.3979 65.8284 52.9631 65L3.59961 36.5C2.88218 36.0858 2.52346 35.5429 2.52345 35M108.599 34.9952V38C108.599 38.5429 108.24 39.0858 107.523 39.5L58.1592 68C56.7243 68.8284 54.3979 68.8284 52.963 68L3.59958 39.5C2.88215 39.0858 2.52344 38.5429 2.52344 38L2.52345 35" stroke="currentColor"></path><rect width="47" height="47" rx="3" transform="matrix(0.866025 -0.5 0.866025 0.5 1 35)" stroke="currentColor" stroke-opacity="0.3" stroke-dasharray="3 3"></rect><rect width="31" height="31" rx="3" transform="matrix(0.866025 -0.5 0.866025 0.5 1 35)" stroke="currentColor" stroke-opacity="0.3" stroke-dasharray="3 3"></rect><rect width="15" height="15" rx="3" transform="matrix(0.866025 -0.5 0.866025 0.5 1 35)" stroke="currentColor" stroke-opacity="0.3" stroke-dasharray="3 3"></rect></g><defs><clipPath id="clip0_408_5756"><rect width="112" height="72" fill="var(--site-background)"></rect></clipPath></defs></svg></div><div><span class="text-xl/10 font-medium text-gray-950 @md:text-2xl/10 dark:text-white">Container queries</span><p class="max-w-xl text-sm/7 text-gray-600 dark:text-gray-400">Tag an element as a container to let children adapt to changes in its size.</p></div></div><div class="flex-1"></div><div class="h-112 p-4 sm:p-8 relative overflow-hidden rounded-lg bg-gray-950/[2.5%] after:pointer-events-none after:absolute after:inset-0 after:rounded-lg after:inset-ring after:inset-ring-gray-950/5 dark:after:inset-ring-white/10 bg-[image:radial-gradient(var(--pattern-fg)_1px,_transparent_0)] bg-[size:10px_10px] bg-fixed [--pattern-fg:var(--color-gray-950)]/5 dark:[--pattern-fg:var(--color-white)]/10"><div class="-mr-16 -mb-16"><div class="rounded-xl bg-gray-950"><div class="rounded-xl p-1 text-sm scheme-dark dark:inset-ring dark:inset-ring-white/10"><div class="flex gap-2 p-2"><span class="size-3 rounded-full bg-white/20"></span><span class="size-3 rounded-full bg-white/20"></span><span class="size-3 rounded-full bg-white/20"></span></div><div class="with-line-numbers text-[13px]/6 *:*:p-3!"><div class="*:flex *:*:max-w-none *:*:shrink-0 *:*:grow *:overflow-auto *:rounded-lg *:bg-white/10! *:p-5 dark:*:bg-white/5! **:[.line]:isolate **:[.line]:not-last:min-h-[1lh] *:inset-ring *:inset-ring-white/10 dark:*:inset-ring-white/5"><pre class="shiki tailwindcss-theme" style="background-color:transparent;color:var(--color-slate-50)" tabindex="0"><code><div class="line"><span style="color:var(--color-slate-400)"><</span><span style="color:var(--color-pink-400)">div</span><span style="color:var(--color-slate-300)"> class</span><span style="color:var(--color-slate-400)">=</span><span style="color:var(--color-sky-300)">"</span><span style="color:var(--color-sky-300)" class="highlighted-word relative before:absolute before:-inset-x-0.5 before:-inset-y-0.25 before:-z-10 before:block before:rounded-sm before:bg-[lab(19.93_-1.66_-9.7)] [.highlighted-word_+_&]:before:rounded-l-none">@container</span><span style="color:var(--color-sky-300)">"</span><span style="color:var(--color-slate-400)">></span></div><div class="line"><span style="color:var(--color-slate-400)"> <</span><span style="color:var(--color-pink-400)">div</span><span style="color:var(--color-slate-300)"> class</span><span style="color:var(--color-slate-400)">=</span><span style="color:var(--color-sky-300)">"grid grid-cols-1 </span><span style="color:var(--color-sky-300)" class="highlighted-word relative before:absolute before:-inset-x-0.5 before:-inset-y-0.25 before:-z-10 before:block before:rounded-sm before:bg-[lab(19.93_-1.66_-9.7)] [.highlighted-word_+_&]:before:rounded-l-none">@sm:grid-cols-2</span><span style="color:var(--color-sky-300)">"</span><span style="color:var(--color-slate-400)">></span></div><div class="line"><span style="color:var(--color-slate-400)"> <</span><span style="color:var(--color-pink-400)">img</span></div><div class="line"><span style="color:var(--color-slate-300)"> src</span><span style="color:var(--color-slate-400)">=</span><span style="color:var(--color-sky-300)">"/img/photo-1.jpg"</span></div><div class="line"><span style="color:var(--color-slate-300)"> class</span><span style="color:var(--color-slate-400)">=</span><span style="color:var(--color-sky-300)">"aspect-square </span><span style="color:var(--color-sky-300)" class="highlighted-word relative before:absolute before:-inset-x-0.5 before:-inset-y-0.25 before:-z-10 before:block before:rounded-sm before:bg-[lab(19.93_-1.66_-9.7)] [.highlighted-word_+_&]:before:rounded-l-none">@sm:aspect-3/2</span><span style="color:var(--color-sky-300)"> object-cover"</span></div><div class="line"><span style="color:var(--color-slate-400)"> /></span></div><div class="line"><span style="color:var(--color-slate-400)"> <</span><span style="color:var(--color-pink-400)">img</span></div><div class="line"><span style="color:var(--color-slate-300)"> src</span><span style="color:var(--color-slate-400)">=</span><span style="color:var(--color-sky-300)">"/img/photo-2.jpg"</span></div><div class="line"><span style="color:var(--color-slate-300)"> class</span><span style="color:var(--color-slate-400)">=</span><span style="color:var(--color-sky-300)">"aspect-square </span><span style="color:var(--color-sky-300)" class="highlighted-word relative before:absolute before:-inset-x-0.5 before:-inset-y-0.25 before:-z-10 before:block before:rounded-sm before:bg-[lab(19.93_-1.66_-9.7)] [.highlighted-word_+_&]:before:rounded-l-none">@sm:aspect-3/2</span><span style="color:var(--color-sky-300)"> object-cover"</span></div><div class="line"><span style="color:var(--color-slate-400)"> /></span></div><div class="line"><span style="color:var(--color-slate-400)"> <</span><span style="color:var(--color-pink-400)">img</span></div><div class="line"><span style="color:var(--color-slate-300)"> src</span><span style="color:var(--color-slate-400)">=</span><span style="color:var(--color-sky-300)">"/img/photo-3.jpg"</span></div><div class="line"><span style="color:var(--color-slate-300)"> class</span><span style="color:var(--color-slate-400)">=</span><span style="color:var(--color-sky-300)">"aspect-square </span><span style="color:var(--color-sky-300)" class="highlighted-word relative before:absolute before:-inset-x-0.5 before:-inset-y-0.25 before:-z-10 before:block before:rounded-sm before:bg-[lab(19.93_-1.66_-9.7)] [.highlighted-word_+_&]:before:rounded-l-none">@sm:aspect-3/2</span><span style="color:var(--color-sky-300)"> object-cover"</span></div><div class="line"><span style="color:var(--color-slate-400)"> /></span></div><div class="line"><span style="color:var(--color-slate-400)"> <</span><span style="color:var(--color-pink-400)">img</span></div><div class="line"><span style="color:var(--color-slate-300)"> src</span><span style="color:var(--color-slate-400)">=</span><span style="color:var(--color-sky-300)">"/img/photo-4.jpg"</span></div><div class="line"><span style="color:var(--color-slate-300)"> class</span><span style="color:var(--color-slate-400)">=</span><span style="color:var(--color-sky-300)">"aspect-square </span><span style="color:var(--color-sky-300)" class="highlighted-word relative before:absolute before:-inset-x-0.5 before:-inset-y-0.25 before:-z-10 before:block before:rounded-sm before:bg-[lab(19.93_-1.66_-9.7)] [.highlighted-word_+_&]:before:rounded-l-none">@sm:aspect-3/2</span><span style="color:var(--color-sky-300)"> object-cover"</span></div><div class="line"><span style="color:var(--color-slate-400)"> /></span></div><div class="line"><span style="color:var(--color-slate-400)"> </</span><span style="color:var(--color-pink-400)">div</span><span style="color:var(--color-slate-400)">></span></div><div class="line"><span style="color:var(--color-slate-400)"></</span><span style="color:var(--color-pink-400)">div</span><span style="color:var(--color-slate-400)">></span></div></code></pre></div></div></div></div></div></div></div><div class="@container isolate flex flex-col gap-2 overflow-hidden rounded-2xl bg-white p-2 outline outline-gray-950/5 dark:bg-gray-950 dark:outline-white/10 col-span-full md:col-span-15"><div class="flex flex-col gap-6 p-6 @md:flex-row @md:gap-x-8 @md:p-8"><div class="flex h-18 w-28 shrink-0 items-center justify-center"><svg class="text-gray-950 [--site-background:var(--color-white)] dark:text-white dark:[--site-background:var(--color-gray-950)]" width="112" height="72" viewBox="0 0 112 72" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#clip0_408_5730)"><path d="M51.2301 6.00001L5.33071 32.5C4.1443 33.185 3.54647 34.0811 3.53722 34.9788V38C3.53721 38.9048 4.13508 39.8097 5.33082 40.5L51.2302 67C53.6216 68.3807 57.4989 68.3807 59.8904 67L105.79 40.5C106.985 39.8097 107.583 38.9048 107.583 38L107.583 35C107.583 34.0952 106.985 33.1904 105.79 32.5L59.8903 6.00001C57.4988 4.6193 53.6215 4.6193 51.2301 6.00001Z" fill="var(--site-background)"></path><path d="M107.583 35C107.583 34.0952 106.985 33.1904 105.79 32.5L59.8903 6.00001C57.4988 4.6193 53.6215 4.6193 51.2301 6.00001L5.33071 32.5C4.1443 33.185 3.54647 34.0811 3.53722 34.9788M107.583 35C107.583 35.9048 106.985 36.8097 105.79 37.5L59.8903 64C57.4988 65.3807 53.6215 65.3807 51.2301 64L5.33071 37.5C4.12565 36.8043 3.52782 35.8907 3.53722 34.9788M107.583 35L107.583 38C107.583 38.9048 106.985 39.8097 105.79 40.5L59.8904 67C57.4989 68.3807 53.6216 68.3807 51.2302 67L5.33082 40.5C4.13508 39.8097 3.53721 38.9048 3.53722 38V34.9788" stroke="currentColor"></path><path d="M54.6946 61.9999C55.1729 62.276 55.9484 62.276 56.4267 61.9999L100.594 36.4999L56.4267 10.9999C55.9484 10.7238 55.1729 10.7237 54.6946 10.9999L10.5273 36.4999L54.6946 61.9999Z" fill="url(#paint0_linear_408_5730)"></path><path d="M100.593 36.4999L56.4257 10.9999C55.9474 10.7238 55.1719 10.7237 54.6936 10.9999L10.5263 36.4999M100.593 36.4999L102.325 35.4999C102.803 35.2238 102.803 34.776 102.325 34.4999L56.4257 7.99989C55.9474 7.72375 55.1719 7.72375 54.6936 7.99989L8.79427 34.4999C8.31597 34.776 8.31597 35.2237 8.79427 35.4999L10.5263 36.4999M100.593 36.4999L56.4257 61.9999C55.9474 62.276 55.1719 62.276 54.6936 61.9999L10.5263 36.4999" stroke="currentColor"></path><path d="M79.6783 25.5L70.152 31C69.1954 31.5523 68.4199 32.8954 68.4199 34V45C68.4199 45.5161 68.5892 45.8888 68.8672 46.0831L70.6723 47.1287C70.9847 47.3015 71.4123 47.2723 71.884 47L74.9151 45.25L76.6472 46.25L78.3792 43.25L81.4103 41.5C82.3669 40.9477 83.1424 39.6046 83.1424 38.5V27.5C83.1424 26.9318 82.9371 26.5374 82.6076 26.3635L80.8672 25.3592C80.557 25.2 80.1386 25.2342 79.6783 25.5Z" fill="var(--site-background)"></path><path d="M70.6723 47.1287C70.3512 46.951 70.152 46.5599 70.152 46L70.152 35C70.152 33.8954 70.9274 32.5523 71.884 32L81.4103 26.5C81.8748 26.2318 82.2966 26.1994 82.6076 26.3635M70.6723 47.1287C70.9847 47.3015 71.4123 47.2723 71.884 47L74.9151 45.25L76.6472 46.25L78.3792 43.25L81.4103 41.5C82.3669 40.9477 83.1424 39.6046 83.1424 38.5V27.5C83.1424 26.9318 82.9371 26.5374 82.6076 26.3635M70.6723 47.1287L68.8672 46.0831C68.5892 45.8888 68.4199 45.5161 68.4199 45V34C68.4199 32.8954 69.1954 31.5523 70.152 31L79.6783 25.5C80.1386 25.2342 80.557 25.2 80.8672 25.3592L82.6076 26.3635" stroke="currentColor"></path><path d="M71.8848 34L81.411 28.5V39.5L71.8848 45V34Z" stroke="currentColor"></path><path d="M39.8404 2.49999L30.3141 7.99999C29.3575 8.55227 28.582 9.89542 28.582 11V22C28.582 22.5161 28.7513 22.8888 29.0293 23.0831L30.8344 24.1287C31.1468 24.3015 31.5744 24.2723 32.0461 24L35.0772 22.25L36.8093 23.25L38.5413 20.25L41.5724 18.5C42.529 17.9477 43.3045 16.6046 43.3045 15.5V4.49998C43.3045 3.93176 43.0992 3.53737 42.7697 3.36352L41.0293 2.35916C40.7191 2.20002 40.3007 2.23421 39.8404 2.49999Z" fill="var(--site-background)"></path><path d="M30.8344 24.1287C30.5133 23.951 30.3141 23.5599 30.3141 23L30.3141 12C30.3141 10.8954 31.0896 9.55227 32.0461 8.99998L41.5724 3.49999C42.0369 3.23181 42.4587 3.19942 42.7697 3.36352M30.8344 24.1287C31.1468 24.3015 31.5744 24.2723 32.0461 24L35.0772 22.25L36.8093 23.25L38.5413 20.25L41.5724 18.5C42.529 17.9477 43.3045 16.6046 43.3045 15.5V4.49998C43.3045 3.93176 43.0992 3.53737 42.7697 3.36352M30.8344 24.1287L29.0293 23.0831C28.7513 22.8888 28.582 22.5161 28.582 22V11C28.582 9.89542 29.3575 8.55227 30.3141 7.99999L39.8404 2.49999C40.3007 2.23421 40.7191 2.20002 41.0293 2.35916L42.7697 3.36352" stroke="currentColor"></path><path d="M32.0469 11L41.5732 5.5V16.5L32.0469 22V11Z" fill="currentColor" fill-opacity="0.75" stroke="currentColor"></path></g><defs><linearGradient id="paint0_linear_408_5730" x1="10.501" y1="36" x2="55.5607" y2="62.207" gradientUnits="userSpaceOnUse"><stop stop-color="currentColor" stop-opacity="0.75"></stop><stop offset="1" stop-color="var(--site-background)"></stop></linearGradient><clipPath id="clip0_408_5730"><rect width="112" height="72" fill="var(--site-background)"></rect></clipPath></defs></svg></div><div><span class="text-xl/10 font-medium text-gray-950 @md:text-2xl/10 dark:text-white">Gradients</span><p class="max-w-xl text-sm/7 text-gray-600 dark:text-gray-400">No need to remember that complicated gradient syntax — create silky-smooth gradients with just a few utility classes.</p></div></div><div class="flex-1"></div><div class="h-112 p-4 sm:p-8 relative overflow-hidden rounded-lg bg-gray-950/[2.5%] after:pointer-events-none after:absolute after:inset-0 after:rounded-lg after:inset-ring after:inset-ring-gray-950/5 dark:after:inset-ring-white/10 bg-[image:radial-gradient(var(--pattern-fg)_1px,_transparent_0)] bg-[size:10px_10px] bg-fixed [--pattern-fg:var(--color-gray-950)]/5 dark:[--pattern-fg:var(--color-white)]/10"><div class="-mt-27 -mr-124 -mb-8 bg-white px-6 py-16 ring ring-gray-950/5 md:px-16 xl:-mr-26 dark:bg-gray-950 dark:ring-white/10"><div class="flex flex-col gap-2"><span class="text-sm/7 font-medium text-gray-950/75 dark:text-white/75">Power Meets Precision</span><h3 class="text-4xl/12 font-semibold text-gray-950 dark:text-white">Redefining real-time performance</h3><p class="text-lg/7 font-medium text-gray-950/75 dark:text-white/75">Our next-generation rendering engine delivers unmatched speed and efficiency, empowering creators to push boundaries like never before.</p></div><div class="mt-10 flex flex-col gap-10"><div class="flex gap-6"><div class="flex flex-1 flex-col gap-2.5"><span class="text-base/7 font-medium text-gray-950 dark:text-white">Render time performance</span><div class="h-2.5 w-full rounded-full bg-linear-to-r from-emerald-500 to-sky-400 ring-1 ring-gray-950/10 ring-inset dark:from-emerald-400 dark:ring-white/10"></div></div><span class="text-3xl/12 font-semibold text-gray-950 dark:text-white">6.4x</span></div><div class="flex gap-6"><div class="flex flex-1 flex-col gap-2.5"><span class="text-base/7 font-medium text-gray-950 dark:text-white">Real-time frame rate</span><div class="h-2.5 w-3/4 rounded-full bg-linear-to-r from-pink-600 to-amber-300 ring-1 ring-gray-950/10 ring-inset dark:from-pink-500 dark:to-amber-200 dark:ring-white/10"></div></div><span class="text-3xl/12 font-semibold text-gray-950 dark:text-white">4.2x</span></div><div class="flex gap-6"><div class="flex flex-1 flex-col gap-2.5"><span class="text-base/7 font-medium text-gray-950 dark:text-white">Multi-platform build time</span><div class="h-2.5 w-1/2 rounded-full bg-linear-to-r from-purple-600 to-cyan-400 ring-1 ring-gray-950/10 ring-inset dark:from-purple-500 dark:ring-white/10"></div></div><span class="text-3xl/12 font-semibold text-gray-950 dark:text-white">2.7x</span></div></div></div></div></div><div class="@container isolate flex flex-col gap-2 overflow-hidden rounded-2xl bg-white p-2 outline outline-gray-950/5 dark:bg-gray-950 dark:outline-white/10 col-span-full md:col-span-15"><div class="flex flex-col gap-6 p-6 @md:flex-row @md:gap-x-8 @md:p-8"><div class="flex h-18 w-28 shrink-0 items-center justify-center"><svg class="text-gray-950 [--site-background:var(--color-white)] dark:text-white dark:[--site-background:var(--color-gray-950)]" width="112" height="72" viewBox="0 0 112 72" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#clip0_408_5745)"><rect width="63" height="63" rx="4" transform="matrix(0.866025 -0.5 0.866025 0.5 1.92969 39.814)" stroke="currentColor" stroke-dasharray="3 3"></rect><path d="M6.82052 32.0748C4.71896 30.8759 4.9198 28.8839 7.24809 27.8339L42.7856 11.8071C44.6906 10.948 47.3962 11.0195 49.1572 11.9756L100.957 40.0964C102.762 41.0766 103.015 42.6809 101.546 43.8334L73.7036 65.6789C71.933 67.0682 68.4396 67.2268 66.3145 66.0145L6.82052 32.0748Z" fill="currentColor" fill-opacity="0.3"></path><path d="M74.1457 62.6688L101.618 43.5542C102.344 43.0493 102.721 42.4339 102.745 41.8139V38.6818C102.722 38.0961 102.384 37.5131 101.729 37.0222L56.8938 3.4116C55.3193 2.23135 52.4292 1.95847 50.2856 2.78769L13.3287 17.0838C11.9732 17.6082 11.2255 18.4488 11.1608 19.3139V22.3139C11.1111 22.9798 11.4661 23.6601 12.2601 24.2219L66.5802 62.651C68.5301 64.0305 72.1763 64.0391 74.1457 62.6688Z" fill="var(--site-background)"></path><path d="M102.745 38.6818C102.722 38.0961 102.384 37.5131 101.729 37.0222L56.8938 3.4116C55.3193 2.23135 52.4292 1.95847 50.2856 2.78769L13.3287 17.0838C11.9732 17.6082 11.2255 18.4488 11.1608 19.3139M102.745 38.6818C102.772 39.3459 102.395 40.0135 101.618 40.5542L74.1457 59.6688C72.1763 61.0391 68.5301 61.0305 66.5802 59.651L12.2601 21.2219C11.4661 20.6601 11.1111 19.9798 11.1608 19.3139M102.745 38.6818V41.8139C102.721 42.4339 102.344 43.0493 101.618 43.5542L74.1457 62.6688C72.1763 64.0391 68.5301 64.0305 66.5802 62.651L12.2601 24.2219C11.4661 23.6601 11.1111 22.9798 11.1608 22.3139V19.3139" stroke="currentColor"></path></g><defs><clipPath id="clip0_408_5745"><rect width="112" height="72" fill="var(--site-background)"></rect></clipPath></defs></svg></div><div><span class="text-xl/10 font-medium text-gray-950 @md:text-2xl/10 dark:text-white">3D transforms</span><p class="max-w-xl text-sm/7 text-gray-600 dark:text-gray-400">Sometimes two dimensions aren’t enough. Scale, rotate, and translate any element in 3D space to add a touch of depth.</p></div></div><div class="flex-1"></div><div class="h-112 p-4 sm:p-8 relative overflow-hidden rounded-lg bg-gray-950/[2.5%] after:pointer-events-none after:absolute after:inset-0 after:rounded-lg after:inset-ring after:inset-ring-gray-950/5 dark:after:inset-ring-white/10 bg-[image:radial-gradient(var(--pattern-fg)_1px,_transparent_0)] bg-[size:10px_10px] bg-fixed [--pattern-fg:var(--color-gray-950)]/5 dark:[--pattern-fg:var(--color-white)]/10"><div class="grid size-full place-content-center"><div class="-translate-y-4 transition duration-300 perspective-[1200px] perspective-origin-top"><img alt="" src="/_next/static/media/3d-transforms.ebde7a6a.jpeg" class="absolute inset-0 size-82 rounded-2xl shadow-2xl outline outline-gray-950/5 transition duration-300 transform-3d" tabindex="0" style="transform:none"/><div class="col-start-1 row-start-1 size-82 rounded-2xl bg-gray-950/5 p-2 shadow-inner inset-ring inset-ring-gray-950/5 dark:bg-white/10 dark:inset-ring-white/10"><div class="size-full rounded-lg outline outline-gray-950/10 outline-dashed"></div></div></div></div></div></div></div></div></div><div class="relative max-w-full"><div aria-hidden="true" class="hidden h-4 items-end px-2 font-mono text-xs/6 whitespace-pre text-black/20 max-sm:px-4 2xl:visible 2xl:flex dark:text-white/25">text-4xl <span class="inline dark:hidden">text-gray-950</span><span class="hidden dark:inline">text-white</span> tracking-tighter text-balance</div><div class="2xl:before:hidden 2xl:after:hidden relative before:absolute before:top-0 before:h-px before:w-[200vw] before:bg-gray-950/5 dark:before:bg-white/10 before:-left-[100vw] after:absolute after:bottom-0 after:h-px after:w-[200vw] after:bg-gray-950/5 dark:after:bg-white/10 after:-left-[100vw]"><p class="text-pink-500 dark:text-pink-400 top-0 -left-[var(--gutter-width)] origin-bottom-right text-left font-mono text-sm font-semibold tracking-widest uppercase max-2xl:mb-4 max-2xl:px-2 max-sm:px-4 sm:text-xs 2xl:absolute 2xl:-translate-x-full 2xl:-translate-y-full 2xl:-rotate-90 2xl:text-right">How it works</p></div><div class="relative before:absolute before:top-0 before:h-px before:w-[200vw] before:bg-gray-950/5 dark:before:bg-white/10 before:-left-[100vw] after:absolute after:bottom-0 after:h-px after:w-[200vw] after:bg-gray-950/5 dark:after:bg-white/10 after:-left-[100vw]"><h2 class="mt-4 px-2 text-[2.5rem]/10 font-medium tracking-tighter max-sm:px-4 2xl:mt-0">Ship faster and smaller.</h2></div><div class="flex h-6 items-end px-2 font-mono text-xs/6 whitespace-pre text-black/20 max-sm:px-4 sm:h-10 dark:text-white/25">text-base <span class="inline dark:hidden">text-gray-950</span><span class="hidden dark:inline">text-white</span></div><div class="relative before:absolute before:top-0 before:h-px before:w-[200vw] before:bg-gray-950/5 dark:before:bg-white/10 before:-left-[100vw] after:absolute after:bottom-0 after:h-px after:w-[200vw] after:bg-gray-950/5 dark:after:bg-white/10 after:-left-[100vw]"><p class="max-w-(--breakpoint-md) px-2 text-base/7 text-gray-600 max-sm:px-4 dark:text-gray-400">Tailwind automatically removes all unused CSS when building for production, which means your final CSS bundle is the smallest it could possibly be. In fact, most Tailwind projects ship less than 10kB of CSS to the client.</p></div><div class="mt-16 relative before:absolute before:top-0 before:h-px before:w-[200vw] before:bg-gray-950/5 dark:before:bg-white/10 before:-left-[100vw] after:absolute after:bottom-0 after:h-px after:w-[200vw] after:bg-gray-950/5 dark:after:bg-white/10 after:-left-[100vw]"><div class="w-full bg-gray-950/5 p-2 dark:bg-white/10"><div class="not-prose"><div class="@container rounded-xl bg-gray-950 in-[figure]:-mx-1 in-[figure]:-mb-1"><div class="rounded-xl p-1 text-sm scheme-dark dark:bg-white/5 dark:inset-ring dark:inset-ring-white/10"><div class="group"><div class="flex w-fit gap-2 p-1 pb-2"><span class="inline-flex size-3 items-center justify-center rounded-full bg-white/20"><span class="inline-flex size-1.5 items-center justify-center rounded-full bg-white/20 transition-opacity duration-300 ease-in opacity-0 group-data-modified:opacity-100 group-data-modified:duration-100 group-data-modified:ease-linear"></span></span><span class="size-3 rounded-full bg-white/20"></span><span class="size-3 rounded-full bg-white/20"></span></div><div class="flex w-full flex-col gap-1 lg:h-132.5 lg:flex-row"><div class="flex flex-col gap-1 lg:w-1/2 xl:w-5/8"><div aria-label="panel, HTML editor, animated" class="isolate flex flex-col overflow-hidden rounded-lg bg-white/10 dark:bg-white/5 inset-ring inset-ring-white/5 min-h-0 flex-1 max-lg:max-h-76" data-scroll-anchor="true"><div class="sticky top-0 left-0 z-10 col-start-1 row-start-1 mb-px flex items-center gap-2 border-b border-b-white/5 bg-white/2.5 bg-clip-padding p-1 text-white backdrop-blur-lg" role="presentation" aria-label="Tab Bar"><button class="isolate rounded-sm px-2 py-1 text-xs/5 text-white inset-ring-white/5 hover:bg-white/10 aria-selected:bg-white/10 aria-selected:inset-ring group-data-modified:italic" role="presentation" aria-selected="true">index.html</button><button class="isolate rounded-sm px-2 py-1 text-xs/5 text-white inset-ring-white/5 hover:bg-white/10 aria-selected:bg-white/10 aria-selected:inset-ring" role="presentation">app.css</button><button class="isolate rounded-sm px-2 py-1 text-xs/5 text-white inset-ring-white/5 hover:bg-white/10 aria-selected:bg-white/10 aria-selected:inset-ring italic" role="presentation">package.json</button></div><div aria-label="editor, readonly, html file" class="*:flex *:*:max-w-none *:*:shrink-0 *:*:grow *:rounded-lg *:px-3 *:py-2 **:[.line]:isolate **:[.line]:block **:[.line]:not-last:min-h-[1lh] **:[code]:pr-4 **:[code]:w-full **:[pre]:w-full **:[pre]:whitespace-pre-wrap text-[0.8125rem]/[1.5rem] with-line-numbers"><pre class="shiki tailwindcss-theme" style="background-color:transparent;color:var(--color-slate-50)" tabindex="0"><code><span class="line"><span style="color:var(--color-slate-400)"><!</span><span style="color:var(--color-pink-400)">DOCTYPE</span><span style="color:var(--color-slate-300)"> html</span><span style="color:var(--color-slate-400)">></span></span><span class="line"><span style="color:var(--color-slate-400)"><</span><span style="color:var(--color-pink-400)">html</span><span style="color:var(--color-slate-300)"> lang</span><span style="color:var(--color-slate-400)">=</span><span style="color:var(--color-sky-300)">"en"</span><span style="color:var(--color-slate-400)">></span></span><span class="line"><span style="color:var(--color-slate-400)"> <</span><span style="color:var(--color-pink-400)">head</span><span style="color:var(--color-slate-400)">></span></span><span class="line"><span style="color:var(--color-slate-400)"> <</span><span style="color:var(--color-pink-400)">meta</span><span style="color:var(--color-slate-300)"> charset</span><span style="color:var(--color-slate-400)">=</span><span style="color:var(--color-sky-300)">"UTF-8"</span><span style="color:var(--color-slate-400)"> /></span></span><span class="line"><span style="color:var(--color-slate-400)"> <</span><span style="color:var(--color-pink-400)">meta</span><span style="color:var(--color-slate-300)"> name</span><span style="color:var(--color-slate-400)">=</span><span style="color:var(--color-sky-300)">"viewport"</span><span style="color:var(--color-slate-300)"> content</span><span style="color:var(--color-slate-400)">=</span><span style="color:var(--color-sky-300)">"width=device-width, initial-scale=1.0"</span><span style="color:var(--color-slate-400)"> /></span></span><span class="line"><span style="color:var(--color-slate-400)"> <</span><span style="color:var(--color-pink-400)">title</span><span style="color:var(--color-slate-400)">></span><span style="color:var(--color-slate-50)">Tailwind CSS</span><span style="color:var(--color-slate-400)"></</span><span style="color:var(--color-pink-400)">title</span><span style="color:var(--color-slate-400)">></span></span><span class="line"><span style="color:var(--color-slate-400)"> <</span><span style="color:var(--color-pink-400)">link</span><span style="color:var(--color-slate-300)"> rel</span><span style="color:var(--color-slate-400)">=</span><span style="color:var(--color-sky-300)">"stylesheet"</span><span style="color:var(--color-slate-300)"> href</span><span style="color:var(--color-slate-400)">=</span><span style="color:var(--color-sky-300)">"/build.css"</span><span style="color:var(--color-slate-400)"> /></span></span><span class="line"><span style="color:var(--color-slate-400)"> </</span><span style="color:var(--color-pink-400)">head</span><span style="color:var(--color-slate-400)">></span></span><span class="line"><span style="color:var(--color-slate-400)"> <</span><span style="color:var(--color-pink-400)">body</span><span style="color:var(--color-slate-400)">></span></span><span class="line"><span style="color:var(--color-slate-400)"> <</span><span style="color:var(--color-pink-400)">button</span><span style="color:var(--color-slate-300)"> class</span><span style="color:var(--color-slate-400)">=</span><span style="color:var(--color-sky-300)">"<span class="transition-opacity duration-300 group-data-finished:opacity-0 after:absolute after:mt-1.5 after:inline-block after:h-[1.2em] after:w-px after:border-r-2 after:border-sky-400 after:bg-transparent after:content-['']"></span>"</span><span style="color:var(--color-slate-400)">></</span><span style="color:var(--color-pink-400)">button</span><span style="color:var(--color-slate-400)">></span></span><span class="line"><span style="color:var(--color-slate-400)"> </</span><span style="color:var(--color-pink-400)">body</span><span style="color:var(--color-slate-400)">></span></span><span class="line"><span style="color:var(--color-slate-400)"></</span><span style="color:var(--color-pink-400)">html</span><span style="color:var(--color-slate-400)">></span></span></code></pre></div></div><div aria-label="panel, terminal, animated" class="isolate flex flex-col overflow-hidden rounded-lg bg-white/10 dark:bg-white/5 inset-ring inset-ring-white/5 h-32 shrink-0 lg:h-46" data-scroll-anchor="true"><div class="sticky top-0 left-0 z-10 col-start-1 row-start-1 mb-px flex items-center gap-2 border-b border-b-white/5 bg-white/2.5 bg-clip-padding p-1 text-white backdrop-blur-lg" role="presentation" aria-label="Tab Bar"><button class="isolate rounded-sm px-2 py-1 text-xs/5 text-white inset-ring-white/5 hover:bg-white/10 aria-selected:bg-white/10 aria-selected:inset-ring" role="presentation" aria-selected="true">Terminal</button></div><div class="*:flex *:*:max-w-none *:*:shrink-0 *:*:grow *:rounded-lg *:px-4 *:py-2 **:[.line]:isolate **:[.line]:block **:[.line]:not-last:min-h-[1lh] **:[code]:pr-4 text-[0.8125rem]/[1.5rem]"><pre class="text-slate-50"><code></code></pre></div></div></div><div class="flex h-66 flex-col gap-2.5 lg:h-auto lg:w-1/2 xl:w-3/8"><div aria-label="panel, built CSS, animated" class="isolate flex flex-col overflow-hidden rounded-lg bg-white/10 dark:bg-white/5 inset-ring inset-ring-white/5 h-full" data-scroll-anchor="true"><div class="sticky top-0 left-0 z-10 col-start-1 row-start-1 mb-px flex items-center gap-2 border-b border-b-white/5 bg-white/2.5 bg-clip-padding p-1 text-white backdrop-blur-lg" role="presentation" aria-label="Tab Bar"><button class="isolate rounded-sm px-2 py-1 text-xs/5 text-white inset-ring-white/5 hover:bg-white/10 aria-selected:bg-white/10 aria-selected:inset-ring" role="presentation" aria-selected="true">build.css</button></div><div aria-label="editor, readonly, built CSS" class="opacity-0 group-data-finished:opacity-100 group-data-running:opacity-100 *:flex *:*:max-w-none *:*:shrink-0 *:*:grow *:rounded-lg *:px-4 *:py-2 **:[.line]:isolate **:[.line]:block **:[.line]:not-last:min-h-[1lh] **:[code]:pr-4 **:[code]:w-full **:[pre]:w-full **:[pre]:whitespace-pre-wrap text-[0.8125rem]/[1.5rem] with-line-numbers"><pre class="shiki tailwindcss-theme" style="background-color:transparent;color:var(--color-slate-50)" tabindex="0"><code><span class="line"><span style="color:var(--color-slate-300)">@layer</span><span style="color:var(--color-slate-50)"> utilities </span><span style="color:var(--color-slate-300)">{</span></span><span class="line"><span style="color:var(--color-slate-50)">}</span></span></code></pre></div></div></div></div></div></div></div></div></div></div></div><div class="relative max-w-full"><div aria-hidden="true" class="h-6 max-w-screen items-end px-2 font-mono text-xs/6 whitespace-pre text-black/20 max-sm:px-4 2xl:flex dark:text-white/25">text-4xl <span class="inline dark:hidden">text-gray-950</span><span class="hidden dark:inline">text-white</span> tracking-tighter</div><div class="2xl:before:hidden 2xl:after:hidden relative before:absolute before:top-0 before:h-px before:w-[200vw] before:bg-gray-950/5 dark:before:bg-white/10 before:-left-[100vw] after:absolute after:bottom-0 after:h-px after:w-[200vw] after:bg-gray-950/5 dark:after:bg-white/10 after:-left-[100vw]"><p class="text-fuchsia-500 dark:text-fuchsia-400 top-0 -left-[var(--gutter-width)] origin-bottom-right text-left font-mono text-sm font-semibold tracking-widest uppercase max-2xl:mb-4 max-2xl:px-2 max-sm:px-4 sm:text-xs 2xl:absolute 2xl:-translate-x-full 2xl:-translate-y-full 2xl:-rotate-90 2xl:text-right">Tailwind in the wild</p></div><div class="relative before:absolute before:top-0 before:h-px before:w-[200vw] before:bg-gray-950/5 dark:before:bg-white/10 before:-left-[100vw] after:absolute after:bottom-0 after:h-px after:w-[200vw] after:bg-gray-950/5 dark:after:bg-white/10 after:-left-[100vw]"><h2 class="max-w-lg px-2 text-[2.5rem]/10 font-medium tracking-tighter text-balance max-sm:px-4">Build whatever you want, without touching your CSS file.</h2></div><div class="flex h-6 items-end px-2 font-mono text-xs/6 whitespace-pre text-black/20 max-sm:px-4 sm:h-10 dark:text-white/25">text-base <span class="inline dark:hidden">text-gray-950</span><span class="hidden dark:inline">text-white</span></div><div class="relative before:absolute before:top-0 before:h-px before:w-[200vw] before:bg-gray-950/5 dark:before:bg-white/10 before:-left-[100vw] after:absolute after:bottom-0 after:h-px after:w-[200vw] after:bg-gray-950/5 dark:after:bg-white/10 after:-left-[100vw]"><p class="max-w-(--breakpoint-md) px-2 text-base/7 text-gray-600 max-sm:px-4 dark:text-gray-400">Because Tailwind is so low-level, it never encourages you to design the same site twice. Some of your favorite sites are built with Tailwind, and you probably had no idea.</p></div><div class="mt-18 relative before:absolute before:top-0 before:h-px before:w-[200vw] before:bg-gray-950/5 dark:before:bg-white/10 before:-left-[100vw] after:absolute after:bottom-0 after:h-px after:w-[200vw] after:bg-gray-950/5 dark:after:bg-white/10 after:-left-[100vw]"><div class="h-auto bg-gray-950/5 p-2 dark:bg-white/10"><div class="@container isolate flex flex-col gap-2 overflow-hidden rounded-2xl bg-white p-2 outline outline-gray-950/5 dark:bg-gray-950 dark:outline-white/10 flex h-full flex-row overflow-hidden p-0!"><div class="hidden flex-col gap-2 lg:flex"><a href="https://openai.com/" rel="noreferrer" target="_blank" class="group relative opacity-75 transition-opacity hover:opacity-100"><div class="absolute top-1/2 left-1/2 z-10 hidden -translate-x-1/2 -translate-y-1/2 transform flex-row items-center gap-[calc(1rem/16*7)] rounded-full border border-gray-950 bg-gray-950/90 py-0.5 pr-2 pb-1 pl-3 text-center font-mono text-sm/6 font-medium text-white opacity-0 inset-ring inset-ring-white/10 transition-opacity group-hover:flex group-hover:opacity-100">openai.com<svg viewBox="0 0 16 16" fill="currentColor" class="size-4"><path fill-rule="evenodd" d="M4.22 11.78a.75.75 0 0 1 0-1.06L9.44 5.5H5.75a.75.75 0 0 1 0-1.5h5.5a.75.75 0 0 1 .75.75v5.5a.75.75 0 0 1-1.5 0V6.56l-5.22 5.22a.75.75 0 0 1-1.06 0Z" clip-rule="evenodd"></path></svg></div><img alt="OpenAI" loading="lazy" width="303" height="257" decoding="async" data-nimg="1" style="color:transparent" srcSet="/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fopenai.7382a1a8.png&w=384&q=75 1x, /_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fopenai.7382a1a8.png&w=640&q=75 2x" src="/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fopenai.7382a1a8.png&w=640&q=75"/></a><a href="https://opalcamera.com/" rel="noreferrer" target="_blank" class="group relative opacity-75 transition-opacity hover:opacity-100"><div class="absolute top-1/2 left-1/2 z-10 hidden -translate-x-1/2 -translate-y-1/2 transform flex-row items-center gap-[calc(1rem/16*7)] rounded-full border border-gray-950 bg-gray-950/90 py-0.5 pr-2 pb-1 pl-3 text-center font-mono text-sm/6 font-medium text-white opacity-0 inset-ring inset-ring-white/10 transition-opacity group-hover:flex group-hover:opacity-100">opalcamera.com<svg viewBox="0 0 16 16" fill="currentColor" class="size-4"><path fill-rule="evenodd" d="M4.22 11.78a.75.75 0 0 1 0-1.06L9.44 5.5H5.75a.75.75 0 0 1 0-1.5h5.5a.75.75 0 0 1 .75.75v5.5a.75.75 0 0 1-1.5 0V6.56l-5.22 5.22a.75.75 0 0 1-1.06 0Z" clip-rule="evenodd"></path></svg></div><img alt="Opal" loading="lazy" width="303" height="426" decoding="async" data-nimg="1" style="color:transparent" srcSet="/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fopal.e71c9d52.png&w=384&q=75 1x, /_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fopal.e71c9d52.png&w=640&q=75 2x" src="/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fopal.e71c9d52.png&w=640&q=75"/></a><a href="https://feastables.com/" rel="noreferrer" target="_blank" class="group relative opacity-75 transition-opacity hover:opacity-100"><div class="absolute top-1/2 left-1/2 z-10 hidden -translate-x-1/2 -translate-y-1/2 transform flex-row items-center gap-[calc(1rem/16*7)] rounded-full border border-gray-950 bg-gray-950/90 py-0.5 pr-2 pb-1 pl-3 text-center font-mono text-sm/6 font-medium text-white opacity-0 inset-ring inset-ring-white/10 transition-opacity group-hover:flex group-hover:opacity-100">feastables.com<svg viewBox="0 0 16 16" fill="currentColor" class="size-4"><path fill-rule="evenodd" d="M4.22 11.78a.75.75 0 0 1 0-1.06L9.44 5.5H5.75a.75.75 0 0 1 0-1.5h5.5a.75.75 0 0 1 .75.75v5.5a.75.75 0 0 1-1.5 0V6.56l-5.22 5.22a.75.75 0 0 1-1.06 0Z" clip-rule="evenodd"></path></svg></div><img alt="Feastables" loading="lazy" width="303" height="417" decoding="async" data-nimg="1" style="color:transparent" srcSet="/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Ffeastables.d874fae5.png&w=384&q=75 1x, /_next/image?url=%2F_next%2Fstatic%2Fmedia%2Ffeastables.d874fae5.png&w=640&q=75 2x" src="/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Ffeastables.d874fae5.png&w=640&q=75"/></a></div><div class="flex flex-col gap-2"><a href="https://gumroad.com/" rel="noreferrer" target="_blank" class="group relative opacity-75 transition-opacity hover:opacity-100"><div class="absolute top-1/2 left-1/2 z-10 hidden -translate-x-1/2 -translate-y-1/2 transform flex-row items-center gap-[calc(1rem/16*7)] rounded-full border border-gray-950 bg-gray-950/90 py-0.5 pr-2 pb-1 pl-3 text-center font-mono text-sm/6 font-medium text-white opacity-0 inset-ring inset-ring-white/10 transition-opacity group-hover:flex group-hover:opacity-100">gumroad.com<svg viewBox="0 0 16 16" fill="currentColor" class="size-4"><path fill-rule="evenodd" d="M4.22 11.78a.75.75 0 0 1 0-1.06L9.44 5.5H5.75a.75.75 0 0 1 0-1.5h5.5a.75.75 0 0 1 .75.75v5.5a.75.75 0 0 1-1.5 0V6.56l-5.22 5.22a.75.75 0 0 1-1.06 0Z" clip-rule="evenodd"></path></svg></div><img alt="Gumroad" loading="lazy" width="200" height="404" decoding="async" data-nimg="1" style="color:transparent" srcSet="/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fgumroad.c0cce34f.png&w=256&q=75 1x, /_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fgumroad.c0cce34f.png&w=640&q=75 2x" src="/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fgumroad.c0cce34f.png&w=640&q=75"/></a><a href="https://skims.com/" rel="noreferrer" target="_blank" class="group relative opacity-75 transition-opacity hover:opacity-100"><div class="absolute top-1/2 left-1/2 z-10 hidden -translate-x-1/2 -translate-y-1/2 transform flex-row items-center gap-[calc(1rem/16*7)] rounded-full border border-gray-950 bg-gray-950/90 py-0.5 pr-2 pb-1 pl-3 text-center font-mono text-sm/6 font-medium text-white opacity-0 inset-ring inset-ring-white/10 transition-opacity group-hover:flex group-hover:opacity-100">skims.com<svg viewBox="0 0 16 16" fill="currentColor" class="size-4"><path fill-rule="evenodd" d="M4.22 11.78a.75.75 0 0 1 0-1.06L9.44 5.5H5.75a.75.75 0 0 1 0-1.5h5.5a.75.75 0 0 1 .75.75v5.5a.75.75 0 0 1-1.5 0V6.56l-5.22 5.22a.75.75 0 0 1-1.06 0Z" clip-rule="evenodd"></path></svg></div><img alt="Skims" loading="lazy" width="200" height="393" decoding="async" data-nimg="1" style="color:transparent" srcSet="/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fskims.f2c24417.png&w=256&q=75 1x, /_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fskims.f2c24417.png&w=640&q=75 2x" src="/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fskims.f2c24417.png&w=640&q=75"/></a><a href="https://reddit.com/" rel="noreferrer" target="_blank" class="group relative opacity-75 transition-opacity hover:opacity-100"><div class="absolute top-1/2 left-1/2 z-10 hidden -translate-x-1/2 -translate-y-1/2 transform flex-row items-center gap-[calc(1rem/16*7)] rounded-full border border-gray-950 bg-gray-950/90 py-0.5 pr-2 pb-1 pl-3 text-center font-mono text-sm/6 font-medium text-white opacity-0 inset-ring inset-ring-white/10 transition-opacity group-hover:flex group-hover:opacity-100">reddit.com<svg viewBox="0 0 16 16" fill="currentColor" class="size-4"><path fill-rule="evenodd" d="M4.22 11.78a.75.75 0 0 1 0-1.06L9.44 5.5H5.75a.75.75 0 0 1 0-1.5h5.5a.75.75 0 0 1 .75.75v5.5a.75.75 0 0 1-1.5 0V6.56l-5.22 5.22a.75.75 0 0 1-1.06 0Z" clip-rule="evenodd"></path></svg></div><img alt="Reddit" loading="lazy" width="200" height="303" decoding="async" data-nimg="1" style="color:transparent" srcSet="/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Freddit.407699f3.png&w=256&q=75 1x, /_next/image?url=%2F_next%2Fstatic%2Fmedia%2Freddit.407699f3.png&w=640&q=75 2x" src="/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Freddit.407699f3.png&w=640&q=75"/></a></div><div class="hidden flex-col gap-2 sm:flex"><a href="https://rivian.com/" rel="noreferrer" target="_blank" class="group relative opacity-75 transition-opacity hover:opacity-100"><div class="absolute top-1/2 left-1/2 z-10 hidden -translate-x-1/2 -translate-y-1/2 transform flex-row items-center gap-[calc(1rem/16*7)] rounded-full border border-gray-950 bg-gray-950/90 py-0.5 pr-2 pb-1 pl-3 text-center font-mono text-sm/6 font-medium text-white opacity-0 inset-ring inset-ring-white/10 transition-opacity group-hover:flex group-hover:opacity-100">rivian.com<svg viewBox="0 0 16 16" fill="currentColor" class="size-4"><path fill-rule="evenodd" d="M4.22 11.78a.75.75 0 0 1 0-1.06L9.44 5.5H5.75a.75.75 0 0 1 0-1.5h5.5a.75.75 0 0 1 .75.75v5.5a.75.75 0 0 1-1.5 0V6.56l-5.22 5.22a.75.75 0 0 1-1.06 0Z" clip-rule="evenodd"></path></svg></div><img alt="Rivian" loading="lazy" width="500" height="310" decoding="async" data-nimg="1" style="color:transparent" srcSet="/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Frivian.63ceefe0.png&w=640&q=75 1x, /_next/image?url=%2F_next%2Fstatic%2Fmedia%2Frivian.63ceefe0.png&w=1080&q=75 2x" src="/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Frivian.63ceefe0.png&w=1080&q=75"/></a><a href="https://shopify.com/" rel="noreferrer" target="_blank" class="group relative opacity-75 transition-opacity hover:opacity-100"><div class="absolute top-1/2 left-1/2 z-10 hidden -translate-x-1/2 -translate-y-1/2 transform flex-row items-center gap-[calc(1rem/16*7)] rounded-full border border-gray-950 bg-gray-950/90 py-0.5 pr-2 pb-1 pl-3 text-center font-mono text-sm/6 font-medium text-white opacity-0 inset-ring inset-ring-white/10 transition-opacity group-hover:flex group-hover:opacity-100">shopify.com<svg viewBox="0 0 16 16" fill="currentColor" class="size-4"><path fill-rule="evenodd" d="M4.22 11.78a.75.75 0 0 1 0-1.06L9.44 5.5H5.75a.75.75 0 0 1 0-1.5h5.5a.75.75 0 0 1 .75.75v5.5a.75.75 0 0 1-1.5 0V6.56l-5.22 5.22a.75.75 0 0 1-1.06 0Z" clip-rule="evenodd"></path></svg></div><img alt="Shopify" loading="lazy" width="500" height="465" decoding="async" data-nimg="1" style="color:transparent" srcSet="/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fshopify.f320205a.png&w=640&q=75 1x, /_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fshopify.f320205a.png&w=1080&q=75 2x" src="/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fshopify.f320205a.png&w=1080&q=75"/></a><a href="https://clerk.dev/" rel="noreferrer" target="_blank" class="group relative opacity-75 transition-opacity hover:opacity-100"><div class="absolute top-1/2 left-1/2 z-10 hidden -translate-x-1/2 -translate-y-1/2 transform flex-row items-center gap-[calc(1rem/16*7)] rounded-full border border-gray-950 bg-gray-950/90 py-0.5 pr-2 pb-1 pl-3 text-center font-mono text-sm/6 font-medium text-white opacity-0 inset-ring inset-ring-white/10 transition-opacity group-hover:flex group-hover:opacity-100">clerk.dev<svg viewBox="0 0 16 16" fill="currentColor" class="size-4"><path fill-rule="evenodd" d="M4.22 11.78a.75.75 0 0 1 0-1.06L9.44 5.5H5.75a.75.75 0 0 1 0-1.5h5.5a.75.75 0 0 1 .75.75v5.5a.75.75 0 0 1-1.5 0V6.56l-5.22 5.22a.75.75 0 0 1-1.06 0Z" clip-rule="evenodd"></path></svg></div><img alt="Clerk" loading="lazy" width="500" height="325" decoding="async" data-nimg="1" style="color:transparent" srcSet="/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fclerk.45113e95.png&w=640&q=75 1x, /_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fclerk.45113e95.png&w=1080&q=75 2x" src="/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fclerk.45113e95.png&w=1080&q=75"/></a></div><div class="hidden flex-col gap-2 xl:flex"><a href="https://www.theverge.com/" rel="noreferrer" target="_blank" class="group relative opacity-75 transition-opacity hover:opacity-100"><div class="absolute top-1/2 left-1/2 z-10 hidden -translate-x-1/2 -translate-y-1/2 transform flex-row items-center gap-[calc(1rem/16*7)] rounded-full border border-gray-950 bg-gray-950/90 py-0.5 pr-2 pb-1 pl-3 text-center font-mono text-sm/6 font-medium text-white opacity-0 inset-ring inset-ring-white/10 transition-opacity group-hover:flex group-hover:opacity-100">theverge.com<svg viewBox="0 0 16 16" fill="currentColor" class="size-4"><path fill-rule="evenodd" d="M4.22 11.78a.75.75 0 0 1 0-1.06L9.44 5.5H5.75a.75.75 0 0 1 0-1.5h5.5a.75.75 0 0 1 .75.75v5.5a.75.75 0 0 1-1.5 0V6.56l-5.22 5.22a.75.75 0 0 1-1.06 0Z" clip-rule="evenodd"></path></svg></div><img alt="The Verge" loading="lazy" width="200" height="408" decoding="async" data-nimg="1" style="color:transparent" srcSet="/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fverge.5758388b.png&w=256&q=75 1x, /_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fverge.5758388b.png&w=640&q=75 2x" src="/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fverge.5758388b.png&w=640&q=75"/></a><a href="https://io.google/" rel="noreferrer" target="_blank" class="group relative opacity-75 transition-opacity hover:opacity-100"><div class="absolute top-1/2 left-1/2 z-10 hidden -translate-x-1/2 -translate-y-1/2 transform flex-row items-center gap-[calc(1rem/16*7)] rounded-full border border-gray-950 bg-gray-950/90 py-0.5 pr-2 pb-1 pl-3 text-center font-mono text-sm/6 font-medium text-white opacity-0 inset-ring inset-ring-white/10 transition-opacity group-hover:flex group-hover:opacity-100">io.google<svg viewBox="0 0 16 16" fill="currentColor" class="size-4"><path fill-rule="evenodd" d="M4.22 11.78a.75.75 0 0 1 0-1.06L9.44 5.5H5.75a.75.75 0 0 1 0-1.5h5.5a.75.75 0 0 1 .75.75v5.5a.75.75 0 0 1-1.5 0V6.56l-5.22 5.22a.75.75 0 0 1-1.06 0Z" clip-rule="evenodd"></path></svg></div><img alt="Google IO" loading="lazy" width="200" height="419" decoding="async" data-nimg="1" style="color:transparent" srcSet="/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fgoogleio.cd41475f.png&w=256&q=75 1x, /_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fgoogleio.cd41475f.png&w=640&q=75 2x" src="/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fgoogleio.cd41475f.png&w=640&q=75"/></a><a href="https://ted.com/" rel="noreferrer" target="_blank" class="group relative opacity-75 transition-opacity hover:opacity-100"><div class="absolute top-1/2 left-1/2 z-10 hidden -translate-x-1/2 -translate-y-1/2 transform flex-row items-center gap-[calc(1rem/16*7)] rounded-full border border-gray-950 bg-gray-950/90 py-0.5 pr-2 pb-1 pl-3 text-center font-mono text-sm/6 font-medium text-white opacity-0 inset-ring inset-ring-white/10 transition-opacity group-hover:flex group-hover:opacity-100">ted.com<svg viewBox="0 0 16 16" fill="currentColor" class="size-4"><path fill-rule="evenodd" d="M4.22 11.78a.75.75 0 0 1 0-1.06L9.44 5.5H5.75a.75.75 0 0 1 0-1.5h5.5a.75.75 0 0 1 .75.75v5.5a.75.75 0 0 1-1.5 0V6.56l-5.22 5.22a.75.75 0 0 1-1.06 0Z" clip-rule="evenodd"></path></svg></div><img alt="TED Talks" loading="lazy" width="200" height="273" decoding="async" data-nimg="1" style="color:transparent" srcSet="/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fted.8ce01dbc.png&w=256&q=75 1x, /_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fted.8ce01dbc.png&w=640&q=75 2x" src="/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fted.8ce01dbc.png&w=640&q=75"/></a></div><div class="flex flex-col gap-2"><a href="https://poolside.ai/" rel="noreferrer" target="_blank" class="group relative opacity-75 transition-opacity hover:opacity-100"><div class="absolute top-1/2 left-1/2 z-10 hidden -translate-x-1/2 -translate-y-1/2 transform flex-row items-center gap-[calc(1rem/16*7)] rounded-full border border-gray-950 bg-gray-950/90 py-0.5 pr-2 pb-1 pl-3 text-center font-mono text-sm/6 font-medium text-white opacity-0 inset-ring inset-ring-white/10 transition-opacity group-hover:flex group-hover:opacity-100">poolside.ai<svg viewBox="0 0 16 16" fill="currentColor" class="size-4"><path fill-rule="evenodd" d="M4.22 11.78a.75.75 0 0 1 0-1.06L9.44 5.5H5.75a.75.75 0 0 1 0-1.5h5.5a.75.75 0 0 1 .75.75v5.5a.75.75 0 0 1-1.5 0V6.56l-5.22 5.22a.75.75 0 0 1-1.06 0Z" clip-rule="evenodd"></path></svg></div><img alt="Poolside" loading="lazy" width="293" height="247" decoding="async" data-nimg="1" style="color:transparent" srcSet="/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fpoolside.a98f917b.png&w=384&q=75 1x, /_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fpoolside.a98f917b.png&w=640&q=75 2x" src="/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fpoolside.a98f917b.png&w=640&q=75"/></a><a href="https://midjourney.com/" rel="noreferrer" target="_blank" class="group relative opacity-75 transition-opacity hover:opacity-100"><div class="absolute top-1/2 left-1/2 z-10 hidden -translate-x-1/2 -translate-y-1/2 transform flex-row items-center gap-[calc(1rem/16*7)] rounded-full border border-gray-950 bg-gray-950/90 py-0.5 pr-2 pb-1 pl-3 text-center font-mono text-sm/6 font-medium text-white opacity-0 inset-ring inset-ring-white/10 transition-opacity group-hover:flex group-hover:opacity-100">midjourney.com<svg viewBox="0 0 16 16" fill="currentColor" class="size-4"><path fill-rule="evenodd" d="M4.22 11.78a.75.75 0 0 1 0-1.06L9.44 5.5H5.75a.75.75 0 0 1 0-1.5h5.5a.75.75 0 0 1 .75.75v5.5a.75.75 0 0 1-1.5 0V6.56l-5.22 5.22a.75.75 0 0 1-1.06 0Z" clip-rule="evenodd"></path></svg></div><img alt="Midjourney" loading="lazy" width="293" height="498" decoding="async" data-nimg="1" style="color:transparent" srcSet="/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fmidjourney.99f345b9.png&w=384&q=75 1x, /_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fmidjourney.99f345b9.png&w=640&q=75 2x" src="/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fmidjourney.99f345b9.png&w=640&q=75"/></a><a href="https://nasa.gov/" rel="noreferrer" target="_blank" class="group relative opacity-75 transition-opacity hover:opacity-100"><div class="absolute top-1/2 left-1/2 z-10 hidden -translate-x-1/2 -translate-y-1/2 transform flex-row items-center gap-[calc(1rem/16*7)] rounded-full border border-gray-950 bg-gray-950/90 py-0.5 pr-2 pb-1 pl-3 text-center font-mono text-sm/6 font-medium text-white opacity-0 inset-ring inset-ring-white/10 transition-opacity group-hover:flex group-hover:opacity-100">nasa.gov<svg viewBox="0 0 16 16" fill="currentColor" class="size-4"><path fill-rule="evenodd" d="M4.22 11.78a.75.75 0 0 1 0-1.06L9.44 5.5H5.75a.75.75 0 0 1 0-1.5h5.5a.75.75 0 0 1 .75.75v5.5a.75.75 0 0 1-1.5 0V6.56l-5.22 5.22a.75.75 0 0 1-1.06 0Z" clip-rule="evenodd"></path></svg></div><img alt="NASA" loading="lazy" width="293" height="354" decoding="async" data-nimg="1" style="color:transparent" srcSet="/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fnasa.aa60f22d.png&w=384&q=75 1x, /_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fnasa.aa60f22d.png&w=640&q=75 2x" src="/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fnasa.aa60f22d.png&w=640&q=75"/></a></div></div></div></div></div><div class="relative max-w-full"><div aria-hidden="true" class="hidden h-4 items-end px-2 font-mono text-xs/6 whitespace-pre text-black/20 max-sm:px-4 2xl:visible 2xl:flex dark:text-white/25">text-4xl <span class="inline dark:hidden">text-gray-950</span><span class="hidden dark:inline">text-white</span> tracking-tighter text-balance</div><div class="2xl:before:hidden 2xl:after:hidden relative before:absolute before:top-0 before:h-px before:w-[200vw] before:bg-gray-950/5 dark:before:bg-white/10 before:-left-[100vw] after:absolute after:bottom-0 after:h-px after:w-[200vw] after:bg-gray-950/5 dark:after:bg-white/10 after:-left-[100vw]"><p class="text-pink-600 dark:text-pink-500 top-0 -left-[var(--gutter-width)] origin-bottom-right text-left font-mono text-sm font-semibold tracking-widest uppercase max-2xl:mb-4 max-2xl:px-2 max-sm:px-4 sm:text-xs 2xl:absolute 2xl:-translate-x-full 2xl:-translate-y-full 2xl:-rotate-90 2xl:text-right">Ready-made Components</p></div><div class="relative before:absolute before:top-0 before:h-px before:w-[200vw] before:bg-gray-950/5 dark:before:bg-white/10 before:-left-[100vw] after:absolute after:bottom-0 after:h-px after:w-[200vw] after:bg-gray-950/5 dark:after:bg-white/10 after:-left-[100vw]"><h2 class="px-2 text-[2.5rem]/10 font-medium tracking-tighter max-sm:px-4 2xl:mt-0">Move even faster with Tailwind Plus.</h2></div><div aria-hidden="true" class="flex h-6 items-end px-2 font-mono text-xs/6 whitespace-pre text-black/20 max-sm:px-4 sm:h-10 dark:text-white/25">text-base <span class="inline dark:hidden">text-gray-950</span><span class="hidden dark:inline">text-white</span></div><div class="relative before:absolute before:top-0 before:h-px before:w-[200vw] before:bg-gray-950/5 dark:before:bg-white/10 before:-left-[100vw] after:absolute after:bottom-0 after:h-px after:w-[200vw] after:bg-gray-950/5 dark:after:bg-white/10 after:-left-[100vw]"><p class="max-w-(--breakpoint-md) px-2 text-base/7 text-gray-600 max-sm:px-4 dark:text-gray-400">Tailwind Plus is a collection of beautiful, fully responsive UI components, designed and developed by us, the creators of Tailwind CSS. It's got hundreds of ready-to-use examples to choose from, and is guaranteed to help you find the perfect starting point for what you want to build.</p></div><div class="mt-10 relative before:absolute before:top-0 before:h-px before:w-[200vw] before:bg-gray-950/5 dark:before:bg-white/10 before:-left-[100vw] after:absolute after:bottom-0 after:h-px after:w-[200vw] after:bg-gray-950/5 dark:after:bg-white/10 after:-left-[100vw]"><div class="px-2 max-sm:px-4"><a href="https://tailwindcss.com/plus?ref=home" class="inline-block rounded-4xl bg-black px-4 py-2 text-sm/6 font-semibold text-white hover:bg-gray-800 dark:bg-gray-700 dark:hover:bg-gray-600">Explore Tailwind Plus</a></div></div><button type="button" aria-hidden="true" style="position:fixed;top:1px;left:1px;width:1px;height:0;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0"></button><div><div class="mt-16 relative before:absolute before:top-0 before:h-px before:w-[200vw] before:bg-gray-950/5 dark:before:bg-white/10 before:-left-[100vw] after:absolute after:bottom-0 after:h-px after:w-[200vw] after:bg-gray-950/5 dark:after:bg-white/10 after:-left-[100vw]"><div class="mt-16 grid w-full overflow-x-hidden"><div class="grid grid-cols-[repeat(3,_minmax(125px,_1fr))] divide-x divide-gray-950/10 overflow-x-auto text-gray-950 dark:divide-white/10 dark:text-white" role="tablist" aria-orientation="horizontal"><button class="group flex items-center gap-4 p-4 text-sm/7 focus:outline-none max-lg:flex-col sm:p-6 lg:grid lg:grid-cols-[auto_1fr] data-selected:bg-pink-500/5 data-selected:text-pink-600 dark:data-selected:text-pink-500" id="headlessui-tabs-tab-«R5nl8ulb»" role="tab" type="button" aria-selected="true" tabindex="0" data-headlessui-state="selected" data-selected=""><svg xmlns="http://www.w3.org/2000/svg" width="120" height="74" fill="none" viewBox="0 0 120 72" class="transition-transform duration-300 group-hover:-translate-y-0.5 group-data-selected:translate-y-0"><path shape-rendering="geometricPrecision" class="fill-white dark:fill-gray-950" d="M56.066 6 8.435 33.5C7.478 34.053 7 34.776 7 35.5v3c0 .724.478 1.448 1.435 2L56.066 68c1.913 1.105 5.015 1.105 6.929 0l47.631-27.5c.957-.552 1.435-1.276 1.435-2v-3c0-.724-.479-1.447-1.435-2L62.995 6c-1.914-1.104-5.015-1.104-6.929 0"></path><path shape-rendering="geometricPrecision" stroke="currentColor" d="M112.09 35.496c-.001-.723-.479-1.447-1.435-2l-47.632-27.5c-1.913-1.104-5.015-1.104-6.928 0l-47.631 27.5c-.957.553-1.435 1.277-1.435 2m105.061 0c0 .724-.479 1.448-1.435 2l-47.632 27.5c-1.913 1.105-5.015 1.105-6.928 0l-47.631-27.5c-.957-.552-1.435-1.276-1.435-2m105.061 0v3c0 .724-.479 1.448-1.435 2l-47.632 27.5c-1.913 1.105-5.015 1.105-6.928 0l-47.631-27.5c-.957-.552-1.435-1.276-1.435-2v-3"></path><path shape-rendering="geometricPrecision" stroke="currentColor" stroke-opacity="0.3" d="M11.062 35.996c-.478-.276-.478-.724 0-1l47.632-27.5c.478-.276 1.253-.276 1.732 0l30.31 17.5c.479.277.479.724 0 1l-47.63 27.5c-.479.276-1.255.276-1.733 0zM45.703 55.996c-.478-.276-.478-.724 0-1l47.632-27.5c.478-.276 1.254-.276 1.732 0l12.99 7.5c.479.276.479.724 0 1l-47.631 27.5c-.478.276-1.254.276-1.732 0z"></path><circle shape-rendering="geometricPrecision" cx="1.5" cy="1.5" r="1.5" fill="currentColor" transform="matrix(.86603 -.5 .86603 .5 16.258 35.496)"></circle><path shape-rendering="geometricPrecision" stroke="currentColor" stroke-linecap="round" d="m22.32 33.496 3.464-2M56.961 13.496l3.465-2M49.168 17.996l4.33-2.5M42.24 21.996l3.463-2"></path><path stroke="currentColor" stroke-linecap="round" stroke-opacity="0.3" d="m41.373 38.496 23.383-13.5"></path><path shape-rendering="geometricPrecision" stroke="currentColor" stroke-linecap="round" d="m53.498 55.496 6.928-4M69.086 46.496l6.928-4M84.674 37.496l6.929-4"></path><path shape-rendering="geometricPrecision" stroke="currentColor" stroke-linecap="round" stroke-opacity="0.3" d="m56.096 56.996 9.526-5.5M71.684 47.996l9.526-5.5M87.273 38.996l9.526-5.5M58.693 58.496l8.66-5M74.282 49.496l8.66-5M89.87 40.496l8.66-5M46.57 38.496l18.186-10.5"></path><rect shape-rendering="geometricPrecision" width="28" height="2" fill="currentColor" rx="0.5" transform="matrix(.86603 -.5 .86603 .5 33.579 34.496)"></rect><rect shape-rendering="geometricPrecision" width="32" height="2" fill="currentColor" rx="0.5" transform="matrix(.86603 -.5 .86603 .5 35.311 37.496)"></rect><rect shape-rendering="geometricPrecision" width="10" height="3" fill="currentColor" rx="1.5" transform="matrix(.86603 -.5 .86603 .5 48.301 39.996)"></rect><rect shape-rendering="geometricPrecision" width="10" height="3" fill="currentColor" fill-opacity="0.3" rx="1.5" transform="matrix(.86603 -.5 .86603 .5 58.693 33.996)"></rect></svg><div class="text-center xl:text-left"><p class="font-mono text-sm font-semibold tracking-widest uppercase">Templates</p><p class="mt-2 hidden text-sm text-gray-600 lg:block dark:text-gray-400">Visually-stunning, easy to customize site templates built with React and Next.js.</p></div></button><button class="group flex items-center gap-4 p-4 text-sm/7 focus:outline-none max-lg:flex-col sm:p-6 lg:grid lg:grid-cols-[auto_1fr] data-selected:bg-indigo-500/5 data-selected:text-indigo-600 dark:data-selected:text-indigo-500" id="headlessui-tabs-tab-«R9nl8ulb»" role="tab" type="button" aria-selected="false" tabindex="-1" data-headlessui-state=""><svg xmlns="http://www.w3.org/2000/svg" width="120" height="74" fill="none" viewBox="0 0 120 72"><path class="fill-white dark:fill-gray-950" d="M56.095 7 8.464 34.5c-.957.553-1.435 1.276-1.435 2v3c0 .724.478 1.448 1.435 2L56.095 69c1.913 1.105 5.015 1.105 6.928 0l47.632-27.5c.956-.552 1.435-1.276 1.435-2v-3c-.001-.724-.479-1.447-1.435-2L63.023 7c-1.913-1.104-5.015-1.104-6.928 0"></path><path stroke="currentColor" stroke-opacity="0.4" d="M112.09 36.5c-.001-.724-.479-1.447-1.435-2L63.023 7c-1.913-1.104-5.015-1.104-6.928 0L8.464 34.5c-.957.553-1.435 1.276-1.435 2m105.061 0c0 .724-.479 1.448-1.435 2L63.023 66c-1.913 1.105-5.015 1.105-6.928 0L8.464 38.5c-.957-.552-1.435-1.276-1.435-2m105.061 0v3c0 .724-.479 1.448-1.435 2L63.023 69c-1.913 1.105-5.015 1.105-6.928 0L8.464 41.5c-.957-.552-1.435-1.276-1.435-2v-3"></path><path fill="currentColor" stroke="currentColor" d="M11.062 37c-.478-.276-.478-.724 0-1L58.694 8.5c.478-.276 1.253-.276 1.732 0l2.598 1.5c.478.276.478.724 0 1L15.392 38.5c-.478.276-1.253.276-1.732 0z" opacity="0.1"></path><g fill="currentColor" stroke="currentColor" opacity="0.1"><path d="M19.723 42c-.479-.276-.479-.724 0-1l47.63-27.5c.48-.276 1.255-.276 1.733 0L89.004 25c.479.276.479.724 0 1l-47.63 27.5c-.48.276-1.255.276-1.733 0z"></path><path d="M34.445 31.5c-.479-.276-.479-.724 0-1L49.167 22c.478-.276 1.254-.276 1.732 0l23.383 13.5c.478.276.478.724 0 1L59.559 45c-.478.276-1.253.276-1.732 0z"></path></g><path fill="currentColor" stroke="currentColor" d="M45.703 57c-.478-.276-.478-.724 0-1l47.632-27.5c.478-.276 1.254-.276 1.732 0l12.99 7.5c.479.276.479.724 0 1L60.426 64.5c-.478.276-1.254.276-1.732 0z" opacity="0.1"></path><g class="transition-transform duration-300 group-hover:-translate-y-0.5 group-data-selected:translate-y-0"><path class="fill-white dark:fill-gray-950" stroke="currentColor" d="M11.062 32c-.478-.276-.478-.724 0-1L58.694 3.5c.478-.276 1.253-.276 1.732 0L63.024 5c.478.276.478.724 0 1L15.392 33.5c-.478.276-1.253.276-1.732 0z"></path><path class="fill-white dark:fill-gray-950" stroke="currentColor" d="M19.723 37c-.479-.276-.479-.724 0-1l47.63-27.5c.48-.276 1.255-.276 1.733 0L89.004 20c.479.276.479.724 0 1l-47.63 27.5c-.48.276-1.255.276-1.733 0z"></path><path stroke="currentColor" stroke-opacity="0.3" d="M37.909 44.5c-.478-.276-.478-.724 0-1l9.526-5.5c.479-.276 1.254-.276 1.732 0l1.732 1c.479.276.479.724 0 1l-9.526 5.5c-.478.276-1.254.276-1.732 0z"></path><path class="fill-white dark:fill-gray-950" stroke="currentColor" d="M34.445 26.5c-.479-.276-.479-.724 0-1L49.167 17c.478-.276 1.254-.276 1.732 0l23.383 13.5c.478.276.478.724 0 1L59.559 40c-.478.276-1.253.276-1.732 0z"></path><path stroke="currentColor" stroke-opacity="0.3" d="M56.096 36c-.479-.276-.479-.724 0-1l9.526-5.5c.478-.276 1.254-.276 1.732 0l1.732 1c.478.276.478.724 0 1L59.56 37c-.479.276-1.254.276-1.732 0zM70.818 25.5c-.478-.276-.478-.724 0-1l9.526-5.5c.479-.276 1.254-.276 1.733 0l1.732 1c.478.276.478.724 0 1l-9.527 5.5c-.478.276-1.254.276-1.732 0z"></path><path class="fill-white dark:fill-gray-950" stroke="currentColor" d="M45.703 52c-.478-.276-.478-.724 0-1l47.632-27.5c.478-.276 1.254-.276 1.732 0l12.99 7.5c.479.276.479.724 0 1L60.426 59.5c-.478.276-1.254.276-1.732 0z"></path><path stroke="currentColor" stroke-opacity="0.3" d="M93.335 34.5c-.478-.276-.478-.724 0-1l6.062-3.5c.478-.276 1.254-.276 1.732 0l1.732 1c.478.276.478.724 0 1l-6.062 3.5c-.478.276-1.254.276-1.732 0zM77.746 43.5c-.478-.276-.478-.724 0-1L89.004 36c.478-.276 1.254-.276 1.732 0l1.732 1c.479.276.479.724 0 1L81.21 44.5c-.478.276-1.254.276-1.732 0z"></path></g></svg><div class="text-center xl:text-left"><p class="font-mono text-sm font-semibold tracking-widest uppercase">UI Blocks</p><p class="mt-2 hidden text-sm text-gray-600 lg:block dark:text-gray-400">Over 500+ professionally designed, fully responsive, expertly crafted components.</p></div></button><button class="group flex items-center gap-4 p-4 text-sm/7 focus:outline-none max-lg:flex-col sm:p-6 lg:grid lg:grid-cols-[auto_1fr] data-selected:bg-sky-500/5 data-selected:text-sky-600 dark:data-selected:text-sky-500" id="headlessui-tabs-tab-«Rdnl8ulb»" role="tab" type="button" aria-selected="false" tabindex="-1" data-headlessui-state=""><svg xmlns="http://www.w3.org/2000/svg" width="120" height="74" fill="none" viewBox="0 0 120 72"><path class="fill-white dark:fill-gray-950" d="M56.095 6 8.464 33.5c-.957.553-1.435 1.276-1.435 2v3c0 .724.478 1.448 1.435 2L56.095 68c1.913 1.105 5.015 1.105 6.928 0l47.632-27.5c.956-.552 1.435-1.276 1.435-2v-3c-.001-.724-.479-1.447-1.435-2L63.023 6c-1.913-1.104-5.015-1.104-6.928 0"></path><g stroke="currentColor" opacity="0.1"><path fill="currentColor" d="M60.425 52.5c-.478-.276-.478-.724 0-1L87.272 36c.478-.276 1.254-.276 1.732 0l1.732 1c.478.276.478.724 0 1L63.89 53.5c-.478.276-1.253.276-1.732 0zM54.363 49c-.956-.552-.956-1.448 0-2l3.464-2c.957-.552 2.508-.552 3.464 0 .957.552.957 1.448 0 2l-3.464 2c-.956.552-2.507.552-3.464 0Z"></path><path stroke-linecap="round" d="m63.89 43.5 12.124-7"></path><path fill="currentColor" d="M46.57 44.5c-.48-.276-.48-.724 0-1L73.415 28c.478-.276 1.254-.276 1.732 0l1.732 1c.478.276.478.724 0 1L50.033 45.5c-.478.276-1.254.276-1.732 0z"></path><path stroke-linecap="round" d="m43.105 42.5 10.392-6"></path><path fill="currentColor" d="M37.043 39c-.478-.276-.478-.724 0-1L63.89 22.5c.478-.276 1.253-.276 1.732 0l1.732 1c.478.276.478.724 0 1L40.507 40c-.478.276-1.254.276-1.732 0z"></path><path stroke-linecap="round" d="m33.579 37 10.392-6"></path></g><path stroke="currentColor" stroke-opacity="0.4" d="M112.09 35.5c-.001-.724-.479-1.447-1.435-2L63.023 6c-1.913-1.104-5.015-1.104-6.928 0L8.464 33.5c-.957.553-1.435 1.276-1.435 2m105.061 0c0 .724-.479 1.448-1.435 2L63.023 65c-1.913 1.105-5.015 1.105-6.928 0L8.464 37.5c-.957-.552-1.435-1.276-1.435-2m105.061 0v3c0 .724-.479 1.448-1.435 2L63.023 68c-1.913 1.105-5.015 1.105-6.928 0L8.464 40.5c-.957-.552-1.435-1.276-1.435-2v-3"></path><path stroke="currentColor" stroke-opacity="0.4" d="M17.99 40c-.478-.276-.478-.724 0-1l47.632-27.5c.478-.276 1.254-.276 1.732 0L108.057 35c.478.276.478.724 0 1L60.426 63.5c-.479.276-1.254.276-1.732 0z"></path><path fill="currentColor" stroke="currentColor" d="M11.062 36c-.478-.276-.478-.724 0-1L58.694 7.5c.478-.276 1.253-.276 1.732 0L63.024 9c.478.276.478.724 0 1L15.392 37.5c-.478.276-1.253.276-1.732 0z" opacity="0.1"></path><g class="transition-transform duration-300 group-hover:-translate-y-0.5 group-data-selected:translate-y-0"><path class="fill-current" fill-opacity="0.3" stroke="currentColor" d="M60.425 47.5c-.478-.276-.478-.724 0-1L87.272 31c.478-.276 1.254-.276 1.732 0l1.732 1c.478.276.478.724 0 1L63.89 48.5c-.478.276-1.253.276-1.732 0zM54.363 44c-.956-.552-.956-1.448 0-2l3.464-2c.957-.552 2.508-.552 3.464 0 .957.552.957 1.448 0 2l-3.464 2c-.956.552-2.507.552-3.464 0Z"></path><circle cx="2" cy="2" r="2" class="fill-white dark:fill-gray-950" stroke="currentColor" transform="matrix(.86603 -.5 .86603 .5 56.095 41)"></circle><path stroke="currentColor" stroke-linecap="round" d="m63.89 38.5 12.124-7"></path><path class="fill-white dark:fill-gray-950" stroke="currentColor" d="M46.57 39.5c-.48-.276-.48-.724 0-1L73.415 23c.478-.276 1.254-.276 1.732 0l1.732 1c.478.276.478.724 0 1L50.033 40.5c-.478.276-1.254.276-1.732 0z"></path><path stroke="currentColor" stroke-linecap="round" d="m43.105 37.5 10.392-6"></path><path class="fill-white dark:fill-gray-950" stroke="currentColor" d="M37.043 34c-.478-.276-.478-.724 0-1L63.89 17.5c.478-.276 1.253-.276 1.732 0l1.732 1c.478.276.478.724 0 1L40.507 35c-.478.276-1.254.276-1.732 0z"></path><path stroke="currentColor" stroke-linecap="round" d="m33.579 32 10.392-6"></path><path class="fill-white dark:fill-gray-950" stroke="currentColor" d="M11.062 31c-.478-.276-.478-.724 0-1L58.694 2.5c.478-.276 1.253-.276 1.732 0L63.024 4c.478.276.478.724 0 1L15.392 32.5c-.478.276-1.253.276-1.732 0z"></path></g></svg><div class="text-center xl:text-left"><p class="font-mono text-sm font-semibold tracking-widest uppercase">UI Kit</p><p class="mt-2 hidden text-sm text-gray-600 lg:block dark:text-gray-400">A starter kit for building your own component systems with React and Tailwind CSS.</p></div></button></div></div></div><div class="mt-4 relative before:absolute before:top-0 before:h-px before:w-[200vw] before:bg-gray-950/5 dark:before:bg-white/10 before:-left-[100vw] after:absolute after:bottom-0 after:h-px after:w-[200vw] after:bg-gray-950/5 dark:after:bg-white/10 after:-left-[100vw]"><div><div class="bg-gray-950/5 p-2 dark:bg-white/10" id="headlessui-tabs-panel-«R6nl8ulb»" role="tabpanel" tabindex="0" data-headlessui-state="selected" data-selected=""><div class="@container isolate flex flex-col gap-2 overflow-hidden rounded-2xl bg-white p-2 outline outline-gray-950/5 dark:bg-gray-950 dark:outline-white/10 relative isolate h-148 w-full overflow-hidden bg-white/75! p-0!"><div class="absolute -left-[300%] h-150 w-380 min-[500px]:-left-[250%] sm:-left-[200%] md:-left-[150%] lg:-left-[100%] xl:-left-[80%] 2xl:-left-[65%]"><div class="grid origin-top-left scale-120 rotate-x-55 rotate-y-0 -rotate-z-45 grid-cols-3 transform-3d"><img src="/_next/static/media/templates-col-1.44d582cd.png" width="450" height="2156" alt="" style="transform:translateY(700px)"/><img src="/_next/static/media/templates-col-2.9768ca29.png" width="450" height="2307" alt="" style="transform:translateY(50px)"/><img src="/_next/static/media/templates-col-3.08018dac.png" width="450" height="1843.5" alt="" style="transform:translateY(800px)"/></div></div></div></div><span aria-hidden="true" id="headlessui-tabs-panel-«Ranl8ulb»" role="tabpanel" tabindex="-1" style="position:fixed;top:1px;left:1px;width:1px;height:0;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0"></span><span aria-hidden="true" id="headlessui-tabs-panel-«Renl8ulb»" role="tabpanel" tabindex="-1" style="position:fixed;top:1px;left:1px;width:1px;height:0;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0"></span></div></div></div></div></div><div class="row-span-full row-start-1 hidden border-x border-x-(--pattern-fg) bg-[image:repeating-linear-gradient(315deg,_var(--pattern-fg)_0,_var(--pattern-fg)_1px,_transparent_0,_transparent_50%)] bg-[size:10px_10px] bg-fixed [--pattern-fg:var(--color-black)]/5 md:col-start-3 md:block dark:[--pattern-fg:var(--color-white)]/10"></div><div class="col-start-1 row-start-3 md:col-start-2 relative before:absolute before:top-0 before:h-px before:w-[200vw] before:bg-gray-950/5 dark:before:bg-white/10 before:-left-[100vw] after:absolute after:bottom-0 after:h-px after:w-[200vw] after:bg-gray-950/5 dark:after:bg-white/10 after:-left-[100vw]"><footer class="bg-white text-sm/loose text-gray-950 dark:bg-gray-950 dark:text-white"><div class="flex gap-4 p-4 md:hidden *:first:border-l-0 *:last:border-r-0"><div class="flex flex-1 flex-col gap-10"><div><h3 class="font-semibold">Learn</h3><ul class="mt-4 grid gap-4"><li><a class="hover:underline" href="/docs">Documentation</a></li><li><a class="hover:underline" href="/showcase">Showcase</a></li><li><a class="hover:underline" href="/blog">Blog</a></li><li><a class="hover:underline" href="https://play.tailwindcss.com/">Playground</a></li></ul></div><div><h3 class="font-semibold">Resources</h3><ul class="mt-4 grid gap-4"><li><a class="hover:underline" href="https://www.refactoringui.com">Refactoring UI</a></li><li><a class="hover:underline" href="https://headlessui.com">Headless UI</a></li><li><a class="hover:underline" href="https://heroicons.com">Heroicons</a></li><li><a class="hover:underline" href="https://heropatterns.com">Hero Patterns</a></li></ul></div></div><div class="flex flex-1 flex-col gap-10"><div><h3 class="mb-2 font-semibold"><a href="/plus?ref=footer" class="hover:underline">Tailwind Plus</a></h3><ul class="mt-4 grid gap-4"><li><a href="/plus/ui-blocks?ref=footer" class="hover:underline">UI Blocks</a></li><li><a href="/plus/templates?ref=footer" class="hover:underline">Templates</a></li><li><a href="/plus/ui-kit?ref=footer" class="hover:underline">UI Kit</a></li></ul></div><div><h3 class="font-semibold">Community</h3><ul class="mt-4 grid gap-4"><li><a class="hover:underline" href="https://github.com/tailwindlabs/tailwindcss">GitHub</a></li><li><a class="hover:underline" href="https://tailwindcss.com/discord">Discord</a></li><li><a class="hover:underline" href="https://x.com/tailwindcss">X</a></li></ul></div></div></div><div class="mx-auto hidden w-full grid-cols-4 justify-between gap-y-0 md:grid md:grid-cols-4 md:gap-6 md:gap-x-4 lg:gap-8 *:first:border-l-0 *:last:border-r-0"><div class="border-x border-b border-gray-950/5 py-10 pl-2 not-md:border-0 md:border-b-0 dark:border-white/10"><h3 class="font-semibold">Learn</h3><ul class="mt-4 grid gap-4"><li><a class="hover:underline" href="/docs">Documentation</a></li><li><a class="hover:underline" href="/showcase">Showcase</a></li><li><a class="hover:underline" href="/blog">Blog</a></li><li><a class="hover:underline" href="https://play.tailwindcss.com/">Playground</a></li></ul></div><div class="border-x border-b border-gray-950/5 py-10 pl-2 not-md:border-0 md:border-b-0 dark:border-white/10"><h3 class="mb-2 font-semibold"><a href="/plus?ref=footer" class="hover:underline">Tailwind Plus</a></h3><ul class="mt-4 grid gap-4"><li><a href="/plus/ui-blocks?ref=footer" class="hover:underline">UI Blocks</a></li><li><a href="/plus/templates?ref=footer" class="hover:underline">Templates</a></li><li><a href="/plus/ui-kit?ref=footer" class="hover:underline">UI Kit</a></li></ul></div><div class="border-x border-b border-gray-950/5 py-10 pl-2 not-md:border-0 sm:border-b-0 dark:border-white/10"><h3 class="font-semibold">Resources</h3><ul class="mt-4 grid gap-4"><li><a class="hover:underline" href="https://www.refactoringui.com">Refactoring UI</a></li><li><a class="hover:underline" href="https://headlessui.com">Headless UI</a></li><li><a class="hover:underline" href="https://heroicons.com">Heroicons</a></li><li><a class="hover:underline" href="https://heropatterns.com">Hero Patterns</a></li></ul></div><div class="border-x border-gray-950/5 py-10 pl-2 not-md:border-0 dark:border-white/10"><h3 class="font-semibold">Community</h3><ul class="mt-4 grid gap-4"><li><a class="hover:underline" href="https://github.com/tailwindlabs/tailwindcss">GitHub</a></li><li><a class="hover:underline" href="https://tailwindcss.com/discord">Discord</a></li><li><a class="hover:underline" href="https://x.com/tailwindcss">X</a></li></ul></div></div></footer></div><div class="col-start-1 row-start-5 grid md:col-start-2"><div class="px-2 pt-10 pb-24"><div class="mx-auto flex w-full flex-col items-start gap-6 sm:flex-row sm:items-center sm:justify-between sm:gap-8 px-4 md:px-6 lg:px-8"><div class="relative z-0 inline-grid grid-cols-3 gap-0.5 rounded-full bg-gray-950/5 p-0.75 text-gray-950 dark:bg-white/10 dark:text-white" id="headlessui-radiogroup-«R6oulb»" role="radiogroup"><span class="rounded-full p-1.5 *:size-7 data-checked:bg-white data-checked:ring data-checked:inset-ring data-checked:ring-gray-950/10 data-checked:inset-ring-white/10 sm:p-0 dark:data-checked:bg-gray-700 dark:data-checked:text-white dark:data-checked:ring-transparent" aria-label="System theme" id="headlessui-radio-«R6moulb»" role="radio" aria-checked="false" tabindex="-1" data-headlessui-state=""><svg viewBox="0 0 28 28" fill="none"><path d="M7.5 8.5C7.5 7.94772 7.94772 7.5 8.5 7.5H19.5C20.0523 7.5 20.5 7.94772 20.5 8.5V16.5C20.5 17.0523 20.0523 17.5 19.5 17.5H8.5C7.94772 17.5 7.5 17.0523 7.5 16.5V8.5Z" stroke="currentColor"></path><path d="M7.5 8.5C7.5 7.94772 7.94772 7.5 8.5 7.5H19.5C20.0523 7.5 20.5 7.94772 20.5 8.5V14.5C20.5 15.0523 20.0523 15.5 19.5 15.5H8.5C7.94772 15.5 7.5 15.0523 7.5 14.5V8.5Z" stroke="currentColor"></path><path d="M16.5 20.5V17.5H11.5V20.5M16.5 20.5H11.5M16.5 20.5H17.5M11.5 20.5H10.5" stroke="currentColor" stroke-linecap="round"></path></svg></span><span class="rounded-full p-1.5 *:size-7 data-checked:bg-white data-checked:ring data-checked:inset-ring data-checked:ring-gray-950/10 data-checked:inset-ring-white/10 sm:p-0 dark:data-checked:bg-gray-700 dark:data-checked:text-white dark:data-checked:ring-transparent" aria-label="Light theme" id="headlessui-radio-«Ramoulb»" role="radio" aria-checked="false" tabindex="-1" data-headlessui-state=""><svg viewBox="0 0 28 28" fill="none"><circle cx="14" cy="14" r="3.5" stroke="currentColor"></circle><path d="M14 8.5V6.5" stroke="currentColor" stroke-linecap="round"></path><path d="M17.889 10.1115L19.3032 8.69727" stroke="currentColor" stroke-linecap="round"></path><path d="M19.5 14L21.5 14" stroke="currentColor" stroke-linecap="round"></path><path d="M17.889 17.8885L19.3032 19.3027" stroke="currentColor" stroke-linecap="round"></path><path d="M14 21.5V19.5" stroke="currentColor" stroke-linecap="round"></path><path d="M8.69663 19.3029L10.1108 17.8887" stroke="currentColor" stroke-linecap="round"></path><path d="M6.5 14L8.5 14" stroke="currentColor" stroke-linecap="round"></path><path d="M8.69663 8.69711L10.1108 10.1113" stroke="currentColor" stroke-linecap="round"></path></svg></span><span class="rounded-full p-1.5 *:size-7 data-checked:bg-white data-checked:ring data-checked:inset-ring data-checked:ring-gray-950/10 data-checked:inset-ring-white/10 sm:p-0 dark:data-checked:bg-gray-700 dark:data-checked:text-white dark:data-checked:ring-transparent" aria-label="Dark theme" id="headlessui-radio-«Remoulb»" role="radio" aria-checked="false" tabindex="-1" data-headlessui-state=""><svg viewBox="0 0 28 28" fill="none"><path d="M10.5 9.99914C10.5 14.1413 13.8579 17.4991 18 17.4991C19.0332 17.4991 20.0176 17.2902 20.9132 16.9123C19.7761 19.6075 17.109 21.4991 14 21.4991C9.85786 21.4991 6.5 18.1413 6.5 13.9991C6.5 10.8902 8.39167 8.22304 11.0868 7.08594C10.7089 7.98159 10.5 8.96597 10.5 9.99914Z" stroke="currentColor" stroke-linejoin="round"></path><path d="M16.3561 6.50754L16.5 5.5L16.6439 6.50754C16.7068 6.94752 17.0525 7.29321 17.4925 7.35607L18.5 7.5L17.4925 7.64393C17.0525 7.70679 16.7068 8.05248 16.6439 8.49246L16.5 9.5L16.3561 8.49246C16.2932 8.05248 15.9475 7.70679 15.5075 7.64393L14.5 7.5L15.5075 7.35607C15.9475 7.29321 16.2932 6.94752 16.3561 6.50754Z" fill="currentColor" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path><path d="M20.3561 11.5075L20.5 10.5L20.6439 11.5075C20.7068 11.9475 21.0525 12.2932 21.4925 12.3561L22.5 12.5L21.4925 12.6439C21.0525 12.7068 20.7068 13.0525 20.6439 13.4925L20.5 14.5L20.3561 13.4925C20.2932 13.0525 19.9475 12.7068 19.5075 12.6439L18.5 12.5L19.5075 12.3561C19.9475 12.2932 20.2932 11.9475 20.3561 11.5075Z" fill="currentColor" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path></svg></span></div><div class="flex flex-col gap-4 text-sm/6 text-gray-700 sm:flex-row sm:gap-2 sm:pr-4 dark:text-gray-400"><span>Copyright © 2025 Tailwind Labs Inc.</span><span class="max-sm:hidden">·</span><a class="hover:underline" href="/brand">Trademark Policy</a></div></div></div></div></div><div class="fixed!" aria-hidden="true"><input type="text" tabindex="-1"/></div></div></div><script src="/_next/static/chunks/webpack-6e1cabe7d001b142.js" async=""></script><script>(self.__next_f=self.__next_f||[]).push([0])</script><script>self.__next_f.push([1,"1:\"$Sreact.fragment\"\n3:I[49274,[\"7448\",\"static/chunks/3621f9d8-d2947e92eca5a3b5.js\",\"4279\",\"static/chunks/4279-c5e301872b461aec.js\",\"7018\",\"static/chunks/7018-165373a669236895.js\",\"8948\",\"static/chunks/8948-06cb47a08a95a31a.js\",\"3602\",\"static/chunks/3602-93f6ff02000f4620.js\",\"1696\",\"static/chunks/1696-874ed4db6222baa1.js\",\"7892\",\"static/chunks/7892-6f4e0813343b109c.js\",\"1867\",\"static/chunks/1867-594369b131c69c50.js\",\"9274\",\"static/chunks/9274-6dbe1fb478effbcb.js\",\"6882\",\"static/chunks/app/(docs)/layout-99b228f12449e942.js\"],\"Header\"]\n4:I[62973,[\"7448\",\"static/chunks/3621f9d8-d2947e92eca5a3b5.js\",\"4279\",\"static/chunks/4279-c5e301872b461aec.js\",\"7018\",\"static/chunks/7018-165373a669236895.js\",\"8948\",\"static/chunks/8948-06cb47a08a95a31a.js\",\"6816\",\"static/chunks/6816-a40e0b5a4a86198e.js\",\"3602\",\"static/chunks/3602-93f6ff02000f4620.js\",\"1696\",\"static/chunks/1696-874ed4db6222baa1.js\",\"3693\",\"static/chunks/3693-2cc8d25462655fbd.js\",\"7892\",\"static/chunks/7892-6f4e0813343b109c.js\",\"1867\",\"static/chunks/1867-594369b131c69c50.js\",\"9274\",\"static/chunks/9274-6dbe1fb478effbcb.js\",\"8974\",\"static/chunks/app/page-bba54c82bd4138b4.js\"],\"default\"]\n5:I[59111,[\"7448\",\"static/chunks/3621f9d8-d2947e92eca5a3b5.js\",\"4279\",\"static/chunks/4279-c5e301872b461aec.js\",\"7018\",\"static/chunks/7018-165373a669236895.js\",\"8948\",\"static/chunks/8948-06cb47a08a95a31a.js\",\"6816\",\"static/chunks/6816-a40e0b5a4a86198e.js\",\"3602\",\"static/chunks/3602-93f6ff02000f4620.js\",\"1696\",\"static/chunks/1696-874ed4db6222baa1.js\",\"3693\",\"static/chunks/3693-2cc8d25462655fbd.js\",\"7892\",\"static/chunks/7892-6f4e0813343b109c.js\",\"1867\",\"static/chunks/1867-594369b131c69c50.js\",\"9274\",\"static/chunks/9274-6dbe1fb478effbcb.js\",\"8974\",\"static/chunks/app/page-bba54c82bd4138b4.js\"],\"Resizable\"]\n6:I[59111,[\"7448\",\"static/chunks/3621f9d8-d2947e92eca5a3b5.js\",\"4279\",\"static/chunks/4279-c5e301872b461aec.js\",\"7018\",\"static/chunks/7018-165373a669236895.js\",\"8948\",\"static/chunks/8948-06cb47a08a95a31a.js\",\"6816\",\"static/chunks/6816-a40e0b5a4a86198e.js\",\"3602\",\"static/chunks/3602-93f6ff0200"])</script><script>self.__next_f.push([1,"0f4620.js\",\"1696\",\"static/chunks/1696-874ed4db6222baa1.js\",\"3693\",\"static/chunks/3693-2cc8d25462655fbd.js\",\"7892\",\"static/chunks/7892-6f4e0813343b109c.js\",\"1867\",\"static/chunks/1867-594369b131c69c50.js\",\"9274\",\"static/chunks/9274-6dbe1fb478effbcb.js\",\"8974\",\"static/chunks/app/page-bba54c82bd4138b4.js\"],\"ResizablePanel\"]\n7:I[59111,[\"7448\",\"static/chunks/3621f9d8-d2947e92eca5a3b5.js\",\"4279\",\"static/chunks/4279-c5e301872b461aec.js\",\"7018\",\"static/chunks/7018-165373a669236895.js\",\"8948\",\"static/chunks/8948-06cb47a08a95a31a.js\",\"6816\",\"static/chunks/6816-a40e0b5a4a86198e.js\",\"3602\",\"static/chunks/3602-93f6ff02000f4620.js\",\"1696\",\"static/chunks/1696-874ed4db6222baa1.js\",\"3693\",\"static/chunks/3693-2cc8d25462655fbd.js\",\"7892\",\"static/chunks/7892-6f4e0813343b109c.js\",\"1867\",\"static/chunks/1867-594369b131c69c50.js\",\"9274\",\"static/chunks/9274-6dbe1fb478effbcb.js\",\"8974\",\"static/chunks/app/page-bba54c82bd4138b4.js\"],\"ResizableHandle\"]\n8:I[2618,[\"7448\",\"static/chunks/3621f9d8-d2947e92eca5a3b5.js\",\"4279\",\"static/chunks/4279-c5e301872b461aec.js\",\"7018\",\"static/chunks/7018-165373a669236895.js\",\"8948\",\"static/chunks/8948-06cb47a08a95a31a.js\",\"6816\",\"static/chunks/6816-a40e0b5a4a86198e.js\",\"3602\",\"static/chunks/3602-93f6ff02000f4620.js\",\"1696\",\"static/chunks/1696-874ed4db6222baa1.js\",\"3693\",\"static/chunks/3693-2cc8d25462655fbd.js\",\"7892\",\"static/chunks/7892-6f4e0813343b109c.js\",\"1867\",\"static/chunks/1867-594369b131c69c50.js\",\"9274\",\"static/chunks/9274-6dbe1fb478effbcb.js\",\"8974\",\"static/chunks/app/page-bba54c82bd4138b4.js\"],\"Autoscroll\"]\na:I[62951,[\"7448\",\"static/chunks/3621f9d8-d2947e92eca5a3b5.js\",\"4279\",\"static/chunks/4279-c5e301872b461aec.js\",\"7018\",\"static/chunks/7018-165373a669236895.js\",\"8948\",\"static/chunks/8948-06cb47a08a95a31a.js\",\"6816\",\"static/chunks/6816-a40e0b5a4a86198e.js\",\"3602\",\"static/chunks/3602-93f6ff02000f4620.js\",\"1696\",\"static/chunks/1696-874ed4db6222baa1.js\",\"3693\",\"static/chunks/3693-2cc8d25462655fbd.js\",\"7892\",\"static/chunks/7892-6f4e0813343b109c.js\",\"1867\",\"static/chunks/1867-594369b131c69c50.js\",\"9274\","])</script><script>self.__next_f.push([1,"\"static/chunks/9274-6dbe1fb478effbcb.js\",\"8974\",\"static/chunks/app/page-bba54c82bd4138b4.js\"],\"DarkMode\"]\nc:I[91341,[\"7448\",\"static/chunks/3621f9d8-d2947e92eca5a3b5.js\",\"4279\",\"static/chunks/4279-c5e301872b461aec.js\",\"7018\",\"static/chunks/7018-165373a669236895.js\",\"8948\",\"static/chunks/8948-06cb47a08a95a31a.js\",\"6816\",\"static/chunks/6816-a40e0b5a4a86198e.js\",\"3602\",\"static/chunks/3602-93f6ff02000f4620.js\",\"1696\",\"static/chunks/1696-874ed4db6222baa1.js\",\"3693\",\"static/chunks/3693-2cc8d25462655fbd.js\",\"7892\",\"static/chunks/7892-6f4e0813343b109c.js\",\"1867\",\"static/chunks/1867-594369b131c69c50.js\",\"9274\",\"static/chunks/9274-6dbe1fb478effbcb.js\",\"8974\",\"static/chunks/app/page-bba54c82bd4138b4.js\"],\"Tooltip\"]\nd:I[91341,[\"7448\",\"static/chunks/3621f9d8-d2947e92eca5a3b5.js\",\"4279\",\"static/chunks/4279-c5e301872b461aec.js\",\"7018\",\"static/chunks/7018-165373a669236895.js\",\"8948\",\"static/chunks/8948-06cb47a08a95a31a.js\",\"6816\",\"static/chunks/6816-a40e0b5a4a86198e.js\",\"3602\",\"static/chunks/3602-93f6ff02000f4620.js\",\"1696\",\"static/chunks/1696-874ed4db6222baa1.js\",\"3693\",\"static/chunks/3693-2cc8d25462655fbd.js\",\"7892\",\"static/chunks/7892-6f4e0813343b109c.js\",\"1867\",\"static/chunks/1867-594369b131c69c50.js\",\"9274\",\"static/chunks/9274-6dbe1fb478effbcb.js\",\"8974\",\"static/chunks/app/page-bba54c82bd4138b4.js\"],\"TooltipTrigger\"]\ne:I[91341,[\"7448\",\"static/chunks/3621f9d8-d2947e92eca5a3b5.js\",\"4279\",\"static/chunks/4279-c5e301872b461aec.js\",\"7018\",\"static/chunks/7018-165373a669236895.js\",\"8948\",\"static/chunks/8948-06cb47a08a95a31a.js\",\"6816\",\"static/chunks/6816-a40e0b5a4a86198e.js\",\"3602\",\"static/chunks/3602-93f6ff02000f4620.js\",\"1696\",\"static/chunks/1696-874ed4db6222baa1.js\",\"3693\",\"static/chunks/3693-2cc8d25462655fbd.js\",\"7892\",\"static/chunks/7892-6f4e0813343b109c.js\",\"1867\",\"static/chunks/1867-594369b131c69c50.js\",\"9274\",\"static/chunks/9274-6dbe1fb478effbcb.js\",\"8974\",\"static/chunks/app/page-bba54c82bd4138b4.js\"],\"TooltipPanel\"]\n11:I[17086,[\"7448\",\"static/chunks/3621f9d8-d2947e92eca5a3b5.js\",\"4279\",\"static/chunks/4279-c5e301872b461aec.j"])</script><script>self.__next_f.push([1,"s\",\"7018\",\"static/chunks/7018-165373a669236895.js\",\"8948\",\"static/chunks/8948-06cb47a08a95a31a.js\",\"6816\",\"static/chunks/6816-a40e0b5a4a86198e.js\",\"3602\",\"static/chunks/3602-93f6ff02000f4620.js\",\"1696\",\"static/chunks/1696-874ed4db6222baa1.js\",\"3693\",\"static/chunks/3693-2cc8d25462655fbd.js\",\"7892\",\"static/chunks/7892-6f4e0813343b109c.js\",\"1867\",\"static/chunks/1867-594369b131c69c50.js\",\"9274\",\"static/chunks/9274-6dbe1fb478effbcb.js\",\"8974\",\"static/chunks/app/page-bba54c82bd4138b4.js\"],\"TransitionsSection\"]\n14:I[34705,[\"7448\",\"static/chunks/3621f9d8-d2947e92eca5a3b5.js\",\"4279\",\"static/chunks/4279-c5e301872b461aec.js\",\"7018\",\"static/chunks/7018-165373a669236895.js\",\"8948\",\"static/chunks/8948-06cb47a08a95a31a.js\",\"6816\",\"static/chunks/6816-a40e0b5a4a86198e.js\",\"3602\",\"static/chunks/3602-93f6ff02000f4620.js\",\"1696\",\"static/chunks/1696-874ed4db6222baa1.js\",\"3693\",\"static/chunks/3693-2cc8d25462655fbd.js\",\"7892\",\"static/chunks/7892-6f4e0813343b109c.js\",\"1867\",\"static/chunks/1867-594369b131c69c50.js\",\"9274\",\"static/chunks/9274-6dbe1fb478effbcb.js\",\"8974\",\"static/chunks/app/page-bba54c82bd4138b4.js\"],\"Transforms3d\"]\n15:I[79588,[\"7448\",\"static/chunks/3621f9d8-d2947e92eca5a3b5.js\",\"4279\",\"static/chunks/4279-c5e301872b461aec.js\",\"7018\",\"static/chunks/7018-165373a669236895.js\",\"8948\",\"static/chunks/8948-06cb47a08a95a31a.js\",\"6816\",\"static/chunks/6816-a40e0b5a4a86198e.js\",\"3602\",\"static/chunks/3602-93f6ff02000f4620.js\",\"1696\",\"static/chunks/1696-874ed4db6222baa1.js\",\"3693\",\"static/chunks/3693-2cc8d25462655fbd.js\",\"7892\",\"static/chunks/7892-6f4e0813343b109c.js\",\"1867\",\"static/chunks/1867-594369b131c69c50.js\",\"9274\",\"static/chunks/9274-6dbe1fb478effbcb.js\",\"8974\",\"static/chunks/app/page-bba54c82bd4138b4.js\"],\"EditorAnimation\"]\n16:I[47714,[\"7448\",\"static/chunks/3621f9d8-d2947e92eca5a3b5.js\",\"4279\",\"static/chunks/4279-c5e301872b461aec.js\",\"7018\",\"static/chunks/7018-165373a669236895.js\",\"8948\",\"static/chunks/8948-06cb47a08a95a31a.js\",\"6816\",\"static/chunks/6816-a40e0b5a4a86198e.js\",\"3602\",\"static/chunks/3602-93f6ff02000f4620.js\",\"1696"])</script><script>self.__next_f.push([1,"\",\"static/chunks/1696-874ed4db6222baa1.js\",\"3693\",\"static/chunks/3693-2cc8d25462655fbd.js\",\"7892\",\"static/chunks/7892-6f4e0813343b109c.js\",\"1867\",\"static/chunks/1867-594369b131c69c50.js\",\"9274\",\"static/chunks/9274-6dbe1fb478effbcb.js\",\"8974\",\"static/chunks/app/page-bba54c82bd4138b4.js\"],\"AnchoredToBottom\"]\n17:I[79588,[\"7448\",\"static/chunks/3621f9d8-d2947e92eca5a3b5.js\",\"4279\",\"static/chunks/4279-c5e301872b461aec.js\",\"7018\",\"static/chunks/7018-165373a669236895.js\",\"8948\",\"static/chunks/8948-06cb47a08a95a31a.js\",\"6816\",\"static/chunks/6816-a40e0b5a4a86198e.js\",\"3602\",\"static/chunks/3602-93f6ff02000f4620.js\",\"1696\",\"static/chunks/1696-874ed4db6222baa1.js\",\"3693\",\"static/chunks/3693-2cc8d25462655fbd.js\",\"7892\",\"static/chunks/7892-6f4e0813343b109c.js\",\"1867\",\"static/chunks/1867-594369b131c69c50.js\",\"9274\",\"static/chunks/9274-6dbe1fb478effbcb.js\",\"8974\",\"static/chunks/app/page-bba54c82bd4138b4.js\"],\"TypingAnimation\"]\n18:I[79588,[\"7448\",\"static/chunks/3621f9d8-d2947e92eca5a3b5.js\",\"4279\",\"static/chunks/4279-c5e301872b461aec.js\",\"7018\",\"static/chunks/7018-165373a669236895.js\",\"8948\",\"static/chunks/8948-06cb47a08a95a31a.js\",\"6816\",\"static/chunks/6816-a40e0b5a4a86198e.js\",\"3602\",\"static/chunks/3602-93f6ff02000f4620.js\",\"1696\",\"static/chunks/1696-874ed4db6222baa1.js\",\"3693\",\"static/chunks/3693-2cc8d25462655fbd.js\",\"7892\",\"static/chunks/7892-6f4e0813343b109c.js\",\"1867\",\"static/chunks/1867-594369b131c69c50.js\",\"9274\",\"static/chunks/9274-6dbe1fb478effbcb.js\",\"8974\",\"static/chunks/app/page-bba54c82bd4138b4.js\"],\"TerminalAnimation\"]\n1a:I[36816,[\"7448\",\"static/chunks/3621f9d8-d2947e92eca5a3b5.js\",\"4279\",\"static/chunks/4279-c5e301872b461aec.js\",\"7018\",\"static/chunks/7018-165373a669236895.js\",\"8948\",\"static/chunks/8948-06cb47a08a95a31a.js\",\"6816\",\"static/chunks/6816-a40e0b5a4a86198e.js\",\"3602\",\"static/chunks/3602-93f6ff02000f4620.js\",\"1696\",\"static/chunks/1696-874ed4db6222baa1.js\",\"3693\",\"static/chunks/3693-2cc8d25462655fbd.js\",\"7892\",\"static/chunks/7892-6f4e0813343b109c.js\",\"1867\",\"static/chunks/1867-594369b131c69c50.js\",\"9274\",\"st"])</script><script>self.__next_f.push([1,"atic/chunks/9274-6dbe1fb478effbcb.js\",\"8974\",\"static/chunks/app/page-bba54c82bd4138b4.js\"],\"Image\"]\n1b:I[16534,[\"7448\",\"static/chunks/3621f9d8-d2947e92eca5a3b5.js\",\"4279\",\"static/chunks/4279-c5e301872b461aec.js\",\"7018\",\"static/chunks/7018-165373a669236895.js\",\"8948\",\"static/chunks/8948-06cb47a08a95a31a.js\",\"6816\",\"static/chunks/6816-a40e0b5a4a86198e.js\",\"3602\",\"static/chunks/3602-93f6ff02000f4620.js\",\"1696\",\"static/chunks/1696-874ed4db6222baa1.js\",\"3693\",\"static/chunks/3693-2cc8d25462655fbd.js\",\"7892\",\"static/chunks/7892-6f4e0813343b109c.js\",\"1867\",\"static/chunks/1867-594369b131c69c50.js\",\"9274\",\"static/chunks/9274-6dbe1fb478effbcb.js\",\"8974\",\"static/chunks/app/page-bba54c82bd4138b4.js\"],\"default\"]\n1c:I[44279,[\"7448\",\"static/chunks/3621f9d8-d2947e92eca5a3b5.js\",\"4279\",\"static/chunks/4279-c5e301872b461aec.js\",\"7018\",\"static/chunks/7018-165373a669236895.js\",\"8948\",\"static/chunks/8948-06cb47a08a95a31a.js\",\"3602\",\"static/chunks/3602-93f6ff02000f4620.js\",\"1696\",\"static/chunks/1696-874ed4db6222baa1.js\",\"7892\",\"static/chunks/7892-6f4e0813343b109c.js\",\"1867\",\"static/chunks/1867-594369b131c69c50.js\",\"9274\",\"static/chunks/9274-6dbe1fb478effbcb.js\",\"6882\",\"static/chunks/app/(docs)/layout-99b228f12449e942.js\"],\"\"]\n1d:I[79619,[\"7448\",\"static/chunks/3621f9d8-d2947e92eca5a3b5.js\",\"4279\",\"static/chunks/4279-c5e301872b461aec.js\",\"7018\",\"static/chunks/7018-165373a669236895.js\",\"8948\",\"static/chunks/8948-06cb47a08a95a31a.js\",\"3602\",\"static/chunks/3602-93f6ff02000f4620.js\",\"1696\",\"static/chunks/1696-874ed4db6222baa1.js\",\"7892\",\"static/chunks/7892-6f4e0813343b109c.js\",\"1867\",\"static/chunks/1867-594369b131c69c50.js\",\"9274\",\"static/chunks/9274-6dbe1fb478effbcb.js\",\"6882\",\"static/chunks/app/(docs)/layout-99b228f12449e942.js\"],\"default\"]\n1e:I[6026,[],\"MetadataBoundary\"]\n20:I[6026,[],\"OutletBoundary\"]\n23:I[51162,[],\"AsyncMetadataOutlet\"]\n25:I[6026,[],\"ViewportBoundary\"]\n27:I[64629,[],\"\"]\n:HL[\"/_next/static/media/0336a89fb4e7fc1d-s.p.woff2\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}]\n:HL[\"/_next/static/media/162e1140ce5a788f-s.p.woff2\","])</script><script>self.__next_f.push([1,"\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}]\n:HL[\"/_next/static/media/37581c031699de0a-s.p.woff2\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}]\n:HL[\"/_next/static/media/44abb7d9d613e278-s.p.woff2\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}]\n:HL[\"/_next/static/media/551ac2b2ce969c74-s.p.woff2\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}]\n:HL[\"/_next/static/media/5ba23b2b0ac11fa6-s.p.woff2\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}]\n:HL[\"/_next/static/media/5f4877925f1cef50-s.p.woff2\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}]\n:HL[\"/_next/static/media/ba487c32d105d659-s.p.woff2\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}]\n:HL[\"/_next/static/media/c91adde9f78caceb-s.p.woff2\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}]\n:HL[\"/_next/static/media/dab80f54fa5deafc-s.p.woff2\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}]\n:HL[\"/_next/static/css/5fdf400d5849dfa6.css\",\"style\"]\n:HL[\"/_next/static/css/b639fd46f42b2130.css\",\"style\"]\n9:T56c,M43.843 28.2531C43.843 28.2531 43.843 28.253 43.843 28.2531ZM43.843 28.2531C43.8428 32.744 37.537 36.3848 29.7585 36.3848C21.9798 36.3848 15.6739 32.7441 15.6739 28.2531M43.843 28.2531C43.843 23.762 37.5371 20.1213 29.7585 20.1213C21.9798 20.1213 15.6739 23.762 15.6739 28.2531M43.843 28.2531L43.843 31.2531C43.843 35.7441 37.5371 39.3848 29.7584 39.3848C21.9797 39.3848 15.6738 35.7441 15.6738 31.2531L15.6739 28.2531M29.7579 33.5561C24.6848 33.5561 20.5723 31.1817 20.5723 28.2528C20.5723 26.2428 22.509 24.494 25.3637 23.5945C24.6514 24.3481 24.2465 25.2125 24.2465 26.1314C24.2465 29.0604 28.359 31.4347 33.4321 31.4347C35.0238 31.4347 36.521 31.201 37.8262 30.7897C36.2682 32.4379 33.2392 33.5561 29.7579 33.5561ZM30.3702 22.9495L30.1939 23.6619C30.117 23.973 29.6936 24.2175 29.1547 24.2619L27.9207 24.3637L29.1547 24.4655C29.6936 24.5099 30.117 24.7543 30.1939 25.0655L30.3702 25.7779L30.5465 25.0655C30.6235 24.7543 31.0469 24.5099 31.5857 24.4655L32.8197 24.3637L31.5857 24.2619C31.0469 24.2175 30.6235 23.973 30.5465 23.6619L30.3702 22.9495ZM35.2692 25.0708L35.0507 26.4584C34"])</script><script>self.__next_f.push([1,".9993 26.7848 34.5662 27.0481 34.0042 27.0944L32.8197 27.1921L34.0042 27.2898C34.5662 27.3361 34.9993 27.5994 35.0507 27.9258L35.2692 29.3134L35.4877 27.9258C35.5391 27.5994 35.9722 27.3361 36.5342 27.2898L37.7187 27.1921L36.5342 27.0944C35.9722 27.0481 35.5391 26.7848 35.4877 26.4584L35.2692 25.0708Zb:T14ca,"])</script><script>self.__next_f.push([1,"\u003cpre class=\"shiki tailwindcss-theme\" style=\"background-color:transparent;color:var(--color-slate-50)\" tabindex=\"0\"\u003e\u003ccode\u003e\u003cdiv class=\"line\"\u003e\u003cspan style=\"color:var(--color-slate-300)\"\u003e@theme\u003c/span\u003e\u003cspan style=\"color:var(--color-slate-300)\"\u003e {\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"line\"\u003e\u003cspan style=\"color:var(--color-teal-200)\"\u003e --font-sans\u003c/span\u003e\u003cspan style=\"color:var(--color-slate-300)\"\u003e: \u003c/span\u003e\u003cspan style=\"color:var(--color-sky-300)\"\u003e\"Inter\"\u003c/span\u003e\u003cspan style=\"color:var(--color-slate-300)\"\u003e,\u003c/span\u003e\u003cspan style=\"color:var(--color-slate-50)\"\u003e sans-serif\u003c/span\u003e\u003cspan style=\"color:var(--color-slate-300)\"\u003e;\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"line\"\u003e\u003cspan style=\"color:var(--color-teal-200)\"\u003e --font-mono\u003c/span\u003e\u003cspan style=\"color:var(--color-slate-300)\"\u003e: \u003c/span\u003e\u003cspan style=\"color:var(--color-sky-300)\"\u003e\"IBM Plex Mono\"\u003c/span\u003e\u003cspan style=\"color:var(--color-slate-300)\"\u003e,\u003c/span\u003e\u003cspan style=\"color:var(--color-slate-50)\"\u003e monospace\u003c/span\u003e\u003cspan style=\"color:var(--color-slate-300)\"\u003e;\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"line\"\u003e\u003c/div\u003e\u003cdiv class=\"line\"\u003e\u003cspan style=\"color:var(--color-teal-200)\"\u003e --text-tiny\u003c/span\u003e\u003cspan style=\"color:var(--color-slate-300)\"\u003e: \u003c/span\u003e\u003cspan style=\"color:var(--color-slate-50)\"\u003e0.625\u003c/span\u003e\u003cspan style=\"color:var(--color-teal-100)\"\u003erem\u003c/span\u003e\u003cspan style=\"color:var(--color-slate-300)\"\u003e;\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"line\"\u003e\u003cspan style=\"color:var(--color-teal-200)\"\u003e --text-tiny--line-height\u003c/span\u003e\u003cspan style=\"color:var(--color-slate-300)\"\u003e: \u003c/span\u003e\u003cspan style=\"color:var(--color-slate-50)\"\u003e1.5\u003c/span\u003e\u003cspan style=\"color:var(--color-teal-100)\"\u003erem\u003c/span\u003e\u003cspan style=\"color:var(--color-slate-300)\"\u003e;\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"line\"\u003e\u003c/div\u003e\u003cdiv class=\"line\"\u003e\u003cspan style=\"color:var(--color-teal-200)\"\u003e --color-mint-100\u003c/span\u003e\u003cspan style=\"color:var(--color-slate-300)\"\u003e: \u003c/span\u003e\u003cspan style=\"color:var(--color-blue-200)\"\u003eoklch\u003c/span\u003e\u003cspan style=\"color:var(--color-slate-300)\"\u003e(\u003c/span\u003e\u003cspan style=\"color:var(--color-slate-50)\"\u003e0.97 0.15 145\u003c/span\u003e\u003cspan style=\"color:var(--color-slate-300)\"\u003e);\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"line\"\u003e\u003cspan style=\"color:var(--color-teal-200)\"\u003e --color-mint-200\u003c/span\u003e\u003cspan style=\"color:var(--color-slate-300)\"\u003e: \u003c/span\u003e\u003cspan style=\"color:var(--color-blue-200)\"\u003eoklch\u003c/span\u003e\u003cspan style=\"color:var(--color-slate-300)\"\u003e(\u003c/span\u003e\u003cspan style=\"color:var(--color-slate-50)\"\u003e0.92 0.18 145\u003c/span\u003e\u003cspan style=\"color:var(--color-slate-300)\"\u003e);\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"line\"\u003e\u003cspan style=\"color:var(--color-teal-200)\"\u003e --color-mint-300\u003c/span\u003e\u003cspan style=\"color:var(--color-slate-300)\"\u003e: \u003c/span\u003e\u003cspan style=\"color:var(--color-blue-200)\"\u003eoklch\u003c/span\u003e\u003cspan style=\"color:var(--color-slate-300)\"\u003e(\u003c/span\u003e\u003cspan style=\"color:var(--color-slate-50)\"\u003e0.85 0.22 145\u003c/span\u003e\u003cspan style=\"color:var(--color-slate-300)\"\u003e);\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"line\"\u003e\u003cspan style=\"color:var(--color-teal-200)\"\u003e --color-mint-400\u003c/span\u003e\u003cspan style=\"color:var(--color-slate-300)\"\u003e: \u003c/span\u003e\u003cspan style=\"color:var(--color-blue-200)\"\u003eoklch\u003c/span\u003e\u003cspan style=\"color:var(--color-slate-300)\"\u003e(\u003c/span\u003e\u003cspan style=\"color:var(--color-slate-50)\"\u003e0.78 0.25 145\u003c/span\u003e\u003cspan style=\"color:var(--color-slate-300)\"\u003e);\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"line\"\u003e\u003cspan style=\"color:var(--color-teal-200)\"\u003e --color-mint-500\u003c/span\u003e\u003cspan style=\"color:var(--color-slate-300)\"\u003e: \u003c/span\u003e\u003cspan style=\"color:var(--color-blue-200)\"\u003eoklch\u003c/span\u003e\u003cspan style=\"color:var(--color-slate-300)\"\u003e(\u003c/span\u003e\u003cspan style=\"color:var(--color-slate-50)\"\u003e0.7 0.28 145\u003c/span\u003e\u003cspan style=\"color:var(--color-slate-300)\"\u003e);\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"line\"\u003e\u003cspan style=\"color:var(--color-teal-200)\"\u003e --color-mint-600\u003c/span\u003e\u003cspan style=\"color:var(--color-slate-300)\"\u003e: \u003c/span\u003e\u003cspan style=\"color:var(--color-blue-200)\"\u003eoklch\u003c/span\u003e\u003cspan style=\"color:var(--color-slate-300)\"\u003e(\u003c/span\u003e\u003cspan style=\"color:var(--color-slate-50)\"\u003e0.63 0.3 145\u003c/span\u003e\u003cspan style=\"color:var(--color-slate-300)\"\u003e);\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"line\"\u003e\u003cspan style=\"color:var(--color-teal-200)\"\u003e --color-mint-700\u003c/span\u003e\u003cspan style=\"color:var(--color-slate-300)\"\u003e: \u003c/span\u003e\u003cspan style=\"color:var(--color-blue-200)\"\u003eoklch\u003c/span\u003e\u003cspan style=\"color:var(--color-slate-300)\"\u003e(\u003c/span\u003e\u003cspan style=\"color:var(--color-slate-50)\"\u003e0.56 0.32 145\u003c/span\u003e\u003cspan style=\"color:var(--color-slate-300)\"\u003e);\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"line\"\u003e\u003cspan style=\"color:var(--color-teal-200)\"\u003e --color-mint-800\u003c/span\u003e\u003cspan style=\"color:var(--color-slate-300)\"\u003e: \u003c/span\u003e\u003cspan style=\"color:var(--color-blue-200)\"\u003eoklch\u003c/span\u003e\u003cspan style=\"color:var(--color-slate-300)\"\u003e(\u003c/span\u003e\u003cspan style=\"color:var(--color-slate-50)\"\u003e0.48 0.35 145\u003c/span\u003e\u003cspan style=\"color:var(--color-slate-300)\"\u003e);\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"line\"\u003e\u003cspan style=\"color:var(--color-teal-200)\"\u003e --color-mint-900\u003c/span\u003e\u003cspan style=\"color:var(--color-slate-300)\"\u003e: \u003c/span\u003e\u003cspan style=\"color:var(--color-blue-200)\"\u003eoklch\u003c/span\u003e\u003cspan style=\"color:var(--color-slate-300)\"\u003e(\u003c/span\u003e\u003cspan style=\"color:var(--color-slate-50)\"\u003e0.4 0.37 145\u003c/span\u003e\u003cspan style=\"color:var(--color-slate-300)\"\u003e);\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"line\"\u003e\u003cspan style=\"color:var(--color-teal-200)\"\u003e --color-mint-950\u003c/span\u003e\u003cspan style=\"color:var(--color-slate-300)\"\u003e: \u003c/span\u003e\u003cspan style=\"color:var(--color-blue-200)\"\u003eoklch\u003c/span\u003e\u003cspan style=\"color:var(--color-slate-300)\"\u003e(\u003c/span\u003e\u003cspan style=\"color:var(--color-slate-50)\"\u003e0.3 0.4 145\u003c/span\u003e\u003cspan style=\"color:var(--color-slate-300)\"\u003e);\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"line\"\u003e\u003cspan style=\"color:var(--color-slate-300)\"\u003e}\u003c/span\u003e\u003c/div\u003e\u003c/code\u003e\u003c/pre\u003e"])</script><script>self.__next_f.push([1,"f:T490,M2.73306 34L53.8286 4.50003C54.7851 3.94774 56.3361 3.94774 57.2927 4.50003L70.283 12C70.7607 12.2758 70.9999 12.6372 71.0005 12.9986V15.9986C71.0011 16.361 70.7619 16.7235 70.283 17L72.8811 15.5C73.8377 14.9477 75.3886 14.9477 76.3452 15.5L89.3356 23C89.8145 23.2765 90.0536 23.639 90.053 24.0014V26.9986C90.0536 27.361 89.8145 27.7235 89.3356 28L91.9337 26.5C92.8903 25.9477 94.4412 25.9477 95.3978 26.5L108.388 34C108.866 34.2758 109.105 34.6372 109.106 34.9986V38C109.106 38.3619 108.866 38.7239 108.388 39L95.3978 46.5C94.4412 47.0523 92.8903 47.0523 91.9337 46.5L89.3356 45C89.8145 45.2765 90.0536 45.639 90.053 46.0014V49C90.053 49.3619 89.8139 49.7239 89.3356 50L76.3452 57.5C75.3886 58.0523 73.8377 58.0523 72.8811 57.5L70.283 56C70.7607 56.2758 70.9999 56.6372 71.0005 56.9986V60C71.0005 60.3619 70.7613 60.7239 70.283 61L57.2927 68.5C56.3361 69.0523 54.7851 69.0523 53.8286 68.5L21.7856 50C21.3073 49.7239 21.0682 49.3619 21.0682 49L21.0682 46.0014C21.0676 45.6391 21.3066 45.2767 21.7852 45.0003L19.1875 46.5C18.231 47.0523 16.68 47.0523 15.7234 46.5L2.73306 39C2.25476 38.7239 2.01561 38.3619 2.01562 38V34.9986C2.01624 34.6372 2.25538 34.2758 2.73306 34Z10:Ta6d,"])</script><script>self.__next_f.push([1,"M109.106 34.9986C109.105 34.6372 108.866 34.2758 108.388 34L95.3978 26.5C94.4412 25.9477 92.8903 25.9477 91.9337 26.5L78.9433 34C78.4644 34.2765 78.2252 34.639 78.2259 35.0014M109.106 34.9986C109.106 35.361 108.867 35.7235 108.388 36L95.3978 43.5C94.4412 44.0523 92.8903 44.0523 91.9337 43.5L78.9433 36C78.4656 35.7242 78.2265 35.3629 78.2259 35.0014M109.106 34.9986V38C109.106 38.3619 108.866 38.7239 108.388 39L95.3978 46.5C94.4412 47.0523 92.8903 47.0523 91.9337 46.5L78.9433 39C78.465 38.7239 78.2258 38.3619 78.2259 38V35.0014M90.053 46.0014C90.0536 45.639 89.8145 45.2765 89.3356 45L76.3452 37.5C75.3886 36.9477 73.8377 36.9477 72.8811 37.5L59.8907 45C59.4118 45.2765 59.1727 45.639 59.1733 46.0014M90.053 46.0014C90.0524 46.3629 89.8133 46.7242 89.3356 47L76.3452 54.5C75.3886 55.0523 73.8377 55.0523 72.8811 54.5L59.8907 47C59.4131 46.7242 59.1739 46.3629 59.1733 46.0014M90.053 46.0014V49C90.053 49.3619 89.8139 49.7239 89.3356 50L76.3452 57.5C75.3886 58.0523 73.8377 58.0523 72.8811 57.5L59.8907 50C59.4124 49.7239 59.1733 49.3619 59.1733 49V46.0014M71.0005 56.9986C70.9999 56.6372 70.7607 56.2758 70.283 56L38.2401 37.5C37.2835 36.9477 35.7326 36.9477 34.776 37.5L21.7856 45C21.3067 45.2765 21.0676 45.639 21.0682 46.0014M71.0005 56.9986C71.0011 57.361 70.7619 57.7235 70.283 58L57.2927 65.5C56.3361 66.0523 54.7851 66.0523 53.8286 65.5L21.7856 47C21.3079 46.7242 21.0688 46.3629 21.0682 46.0014M71.0005 56.9986V60C71.0005 60.3619 70.7613 60.7239 70.283 61L57.2927 68.5C56.3361 69.0523 54.7851 69.0523 53.8286 68.5L21.7856 50C21.3073 49.7239 21.0682 49.3619 21.0682 49L21.0682 46.0014M40.1207 35.0014C40.1201 34.639 40.3593 34.2765 40.8382 34L72.8811 15.5C73.8377 14.9477 75.3886 14.9477 76.3452 15.5L89.3356 23C89.8145 23.2765 90.0536 23.639 90.053 24.0014M40.1207 35.0014C40.1214 35.3629 40.3605 35.7242 40.8382 36L53.8286 43.5C54.7851 44.0523 56.3361 44.0523 57.2927 43.5L89.3356 25C89.8133 24.7242 90.0524 24.3629 90.053 24.0014M40.1207 35.0014V38C40.1207 38.3619 40.3599 38.7239 40.8382 39L53.8286 46.5C54.7851 47.0523 56.3361 47.0523 57.2927 46.5L89.3356 28C89.8145 27.7235 90.0536 27.361 90.053 26.9986V24.0014M71.0005 12.9986C70.9999 12.6372 70.7607 12.2758 70.283 12L57.2927 4.50003C56.3361 3.94774 54.7851 3.94774 53.8286 4.50003L2.73306 34C2.25538 34.2758 2.01624 34.6372 2.01563 34.9986M71.0005 12.9986C71.0011 13.361 70.7619 13.7235 70.283 14L19.1875 43.5C18.231 44.0523 16.68 44.0523 15.7234 43.5L2.73306 36C2.25416 35.7235 2.01501 35.361 2.01563 34.9986M71.0005 12.9986V15.9986C71.0011 16.361 70.7619 16.7235 70.283 17L19.1875 46.5C18.231 47.0523 16.68 47.0523 15.7234 46.5L2.73306 39C2.25476 38.7239 2.01561 38.3619 2.01562 38L2.01563 34.9986"])</script><script>self.__next_f.push([1,"12:T9b7,"])</script><script>self.__next_f.push([1,"\u003cpre class=\"shiki tailwindcss-theme\" style=\"background-color:transparent;color:var(--color-slate-50)\" tabindex=\"0\"\u003e\u003ccode\u003e\u003cdiv class=\"line\"\u003e\u003cspan style=\"color:var(--color-slate-300)\"\u003e@layer\u003c/span\u003e\u003cspan style=\"color:var(--color-slate-50)\"\u003e theme\u003c/span\u003e\u003cspan style=\"color:var(--color-slate-300)\"\u003e,\u003c/span\u003e\u003cspan style=\"color:var(--color-slate-50)\"\u003e base\u003c/span\u003e\u003cspan style=\"color:var(--color-slate-300)\"\u003e,\u003c/span\u003e\u003cspan style=\"color:var(--color-slate-50)\"\u003e components\u003c/span\u003e\u003cspan style=\"color:var(--color-slate-300)\"\u003e,\u003c/span\u003e\u003cspan style=\"color:var(--color-slate-50)\"\u003e utilities\u003c/span\u003e\u003cspan style=\"color:var(--color-slate-300)\"\u003e;\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"line\"\u003e\u003c/div\u003e\u003cdiv class=\"line\"\u003e\u003cspan style=\"color:var(--color-slate-300)\"\u003e@layer\u003c/span\u003e\u003cspan style=\"color:var(--color-slate-50)\"\u003e theme \u003c/span\u003e\u003cspan style=\"color:var(--color-slate-300)\"\u003e{\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"line\"\u003e\u003cspan style=\"color:var(--color-pink-400)\"\u003e :root\u003c/span\u003e\u003cspan style=\"color:var(--color-slate-300)\"\u003e {\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"line\"\u003e\u003cspan style=\"color:var(--color-slate-400);font-style:italic\"\u003e /* Your theme variables */\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"line\"\u003e\u003cspan style=\"color:var(--color-slate-300)\"\u003e }\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"line\"\u003e\u003cspan style=\"color:var(--color-slate-300)\"\u003e}\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"line\"\u003e\u003c/div\u003e\u003cdiv class=\"line\"\u003e\u003cspan style=\"color:var(--color-slate-300)\"\u003e@layer\u003c/span\u003e\u003cspan style=\"color:var(--color-slate-50)\"\u003e base \u003c/span\u003e\u003cspan style=\"color:var(--color-slate-300)\"\u003e{\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"line\"\u003e\u003cspan style=\"color:var(--color-slate-400);font-style:italic\"\u003e /* Preflight styles */\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"line\"\u003e\u003cspan style=\"color:var(--color-slate-300)\"\u003e}\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"line\"\u003e\u003c/div\u003e\u003cdiv class=\"line\"\u003e\u003cspan style=\"color:var(--color-slate-300)\"\u003e@layer\u003c/span\u003e\u003cspan style=\"color:var(--color-slate-50)\"\u003e components \u003c/span\u003e\u003cspan style=\"color:var(--color-slate-300)\"\u003e{\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"line\"\u003e\u003cspan style=\"color:var(--color-slate-400);font-style:italic\"\u003e /* Your custom components */\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"line\"\u003e\u003cspan style=\"color:var(--color-slate-300)\"\u003e}\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"line\"\u003e\u003c/div\u003e\u003cdiv class=\"line\"\u003e\u003cspan style=\"color:var(--color-slate-300)\"\u003e@layer\u003c/span\u003e\u003cspan style=\"color:var(--color-slate-50)\"\u003e utilities \u003c/span\u003e\u003cspan style=\"color:var(--color-slate-300)\"\u003e{\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"line\"\u003e\u003cspan style=\"color:var(--color-slate-400);font-style:italic\"\u003e /* Your utility classes */\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"line\"\u003e\u003cspan style=\"color:var(--color-slate-300)\"\u003e}\u003c/span\u003e\u003c/div\u003e\u003c/code\u003e\u003c/pre\u003e"])</script><script>self.__next_f.push([1,"13:T1640,"])</script><script>self.__next_f.push([1,"\u003cpre class=\"shiki tailwindcss-theme\" style=\"background-color:transparent;color:var(--color-slate-50)\" tabindex=\"0\"\u003e\u003ccode\u003e\u003cdiv class=\"line\"\u003e\u003cspan style=\"color:var(--color-slate-400)\"\u003e\u0026#x3C;\u003c/span\u003e\u003cspan style=\"color:var(--color-pink-400)\"\u003ediv\u003c/span\u003e\u003cspan style=\"color:var(--color-slate-300)\"\u003e class\u003c/span\u003e\u003cspan style=\"color:var(--color-slate-400)\"\u003e=\u003c/span\u003e\u003cspan style=\"color:var(--color-sky-300)\"\u003e\"\u003c/span\u003e\u003cspan style=\"color:var(--color-sky-300)\" class=\"highlighted-word relative before:absolute before:-inset-x-0.5 before:-inset-y-0.25 before:-z-10 before:block before:rounded-sm before:bg-[lab(19.93_-1.66_-9.7)] [.highlighted-word_+_\u0026#x26;]:before:rounded-l-none\"\u003e@container\u003c/span\u003e\u003cspan style=\"color:var(--color-sky-300)\"\u003e\"\u003c/span\u003e\u003cspan style=\"color:var(--color-slate-400)\"\u003e\u003e\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"line\"\u003e\u003cspan style=\"color:var(--color-slate-400)\"\u003e \u0026#x3C;\u003c/span\u003e\u003cspan style=\"color:var(--color-pink-400)\"\u003ediv\u003c/span\u003e\u003cspan style=\"color:var(--color-slate-300)\"\u003e class\u003c/span\u003e\u003cspan style=\"color:var(--color-slate-400)\"\u003e=\u003c/span\u003e\u003cspan style=\"color:var(--color-sky-300)\"\u003e\"grid grid-cols-1 \u003c/span\u003e\u003cspan style=\"color:var(--color-sky-300)\" class=\"highlighted-word relative before:absolute before:-inset-x-0.5 before:-inset-y-0.25 before:-z-10 before:block before:rounded-sm before:bg-[lab(19.93_-1.66_-9.7)] [.highlighted-word_+_\u0026#x26;]:before:rounded-l-none\"\u003e@sm:grid-cols-2\u003c/span\u003e\u003cspan style=\"color:var(--color-sky-300)\"\u003e\"\u003c/span\u003e\u003cspan style=\"color:var(--color-slate-400)\"\u003e\u003e\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"line\"\u003e\u003cspan style=\"color:var(--color-slate-400)\"\u003e \u0026#x3C;\u003c/span\u003e\u003cspan style=\"color:var(--color-pink-400)\"\u003eimg\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"line\"\u003e\u003cspan style=\"color:var(--color-slate-300)\"\u003e src\u003c/span\u003e\u003cspan style=\"color:var(--color-slate-400)\"\u003e=\u003c/span\u003e\u003cspan style=\"color:var(--color-sky-300)\"\u003e\"/img/photo-1.jpg\"\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"line\"\u003e\u003cspan style=\"color:var(--color-slate-300)\"\u003e class\u003c/span\u003e\u003cspan style=\"color:var(--color-slate-400)\"\u003e=\u003c/span\u003e\u003cspan style=\"color:var(--color-sky-300)\"\u003e\"aspect-square \u003c/span\u003e\u003cspan style=\"color:var(--color-sky-300)\" class=\"highlighted-word relative before:absolute before:-inset-x-0.5 before:-inset-y-0.25 before:-z-10 before:block before:rounded-sm before:bg-[lab(19.93_-1.66_-9.7)] [.highlighted-word_+_\u0026#x26;]:before:rounded-l-none\"\u003e@sm:aspect-3/2\u003c/span\u003e\u003cspan style=\"color:var(--color-sky-300)\"\u003e object-cover\"\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"line\"\u003e\u003cspan style=\"color:var(--color-slate-400)\"\u003e /\u003e\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"line\"\u003e\u003cspan style=\"color:var(--color-slate-400)\"\u003e \u0026#x3C;\u003c/span\u003e\u003cspan style=\"color:var(--color-pink-400)\"\u003eimg\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"line\"\u003e\u003cspan style=\"color:var(--color-slate-300)\"\u003e src\u003c/span\u003e\u003cspan style=\"color:var(--color-slate-400)\"\u003e=\u003c/span\u003e\u003cspan style=\"color:var(--color-sky-300)\"\u003e\"/img/photo-2.jpg\"\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"line\"\u003e\u003cspan style=\"color:var(--color-slate-300)\"\u003e class\u003c/span\u003e\u003cspan style=\"color:var(--color-slate-400)\"\u003e=\u003c/span\u003e\u003cspan style=\"color:var(--color-sky-300)\"\u003e\"aspect-square \u003c/span\u003e\u003cspan style=\"color:var(--color-sky-300)\" class=\"highlighted-word relative before:absolute before:-inset-x-0.5 before:-inset-y-0.25 before:-z-10 before:block before:rounded-sm before:bg-[lab(19.93_-1.66_-9.7)] [.highlighted-word_+_\u0026#x26;]:before:rounded-l-none\"\u003e@sm:aspect-3/2\u003c/span\u003e\u003cspan style=\"color:var(--color-sky-300)\"\u003e object-cover\"\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"line\"\u003e\u003cspan style=\"color:var(--color-slate-400)\"\u003e /\u003e\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"line\"\u003e\u003cspan style=\"color:var(--color-slate-400)\"\u003e \u0026#x3C;\u003c/span\u003e\u003cspan style=\"color:var(--color-pink-400)\"\u003eimg\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"line\"\u003e\u003cspan style=\"color:var(--color-slate-300)\"\u003e src\u003c/span\u003e\u003cspan style=\"color:var(--color-slate-400)\"\u003e=\u003c/span\u003e\u003cspan style=\"color:var(--color-sky-300)\"\u003e\"/img/photo-3.jpg\"\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"line\"\u003e\u003cspan style=\"color:var(--color-slate-300)\"\u003e class\u003c/span\u003e\u003cspan style=\"color:var(--color-slate-400)\"\u003e=\u003c/span\u003e\u003cspan style=\"color:var(--color-sky-300)\"\u003e\"aspect-square \u003c/span\u003e\u003cspan style=\"color:var(--color-sky-300)\" class=\"highlighted-word relative before:absolute before:-inset-x-0.5 before:-inset-y-0.25 before:-z-10 before:block before:rounded-sm before:bg-[lab(19.93_-1.66_-9.7)] [.highlighted-word_+_\u0026#x26;]:before:rounded-l-none\"\u003e@sm:aspect-3/2\u003c/span\u003e\u003cspan style=\"color:var(--color-sky-300)\"\u003e object-cover\"\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"line\"\u003e\u003cspan style=\"color:var(--color-slate-400)\"\u003e /\u003e\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"line\"\u003e\u003cspan style=\"color:var(--color-slate-400)\"\u003e \u0026#x3C;\u003c/span\u003e\u003cspan style=\"color:var(--color-pink-400)\"\u003eimg\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"line\"\u003e\u003cspan style=\"color:var(--color-slate-300)\"\u003e src\u003c/span\u003e\u003cspan style=\"color:var(--color-slate-400)\"\u003e=\u003c/span\u003e\u003cspan style=\"color:var(--color-sky-300)\"\u003e\"/img/photo-4.jpg\"\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"line\"\u003e\u003cspan style=\"color:var(--color-slate-300)\"\u003e class\u003c/span\u003e\u003cspan style=\"color:var(--color-slate-400)\"\u003e=\u003c/span\u003e\u003cspan style=\"color:var(--color-sky-300)\"\u003e\"aspect-square \u003c/span\u003e\u003cspan style=\"color:var(--color-sky-300)\" class=\"highlighted-word relative before:absolute before:-inset-x-0.5 before:-inset-y-0.25 before:-z-10 before:block before:rounded-sm before:bg-[lab(19.93_-1.66_-9.7)] [.highlighted-word_+_\u0026#x26;]:before:rounded-l-none\"\u003e@sm:aspect-3/2\u003c/span\u003e\u003cspan style=\"color:var(--color-sky-300)\"\u003e object-cover\"\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"line\"\u003e\u003cspan style=\"color:var(--color-slate-400)\"\u003e /\u003e\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"line\"\u003e\u003cspan style=\"color:var(--color-slate-400)\"\u003e \u0026#x3C;/\u003c/span\u003e\u003cspan style=\"color:var(--color-pink-400)\"\u003ediv\u003c/span\u003e\u003cspan style=\"color:var(--color-slate-400)\"\u003e\u003e\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"line\"\u003e\u003cspan style=\"color:var(--color-slate-400)\"\u003e\u0026#x3C;/\u003c/span\u003e\u003cspan style=\"color:var(--color-pink-400)\"\u003ediv\u003c/span\u003e\u003cspan style=\"color:var(--color-slate-400)\"\u003e\u003e\u003c/span\u003e\u003c/div\u003e\u003c/code\u003e\u003c/pre\u003e"])</script><script>self.__next_f.push([1,"0:{\"P\":null,\"b\":\"oj_duYVx0WCHFglp-GJY0\",\"p\":\"\",\"c\":[\"\",\"\"],\"i\":false,\"f\":[[[\"\",{\"children\":[\"__PAGE__\",{}]},\"$undefined\",\"$undefined\",true],[\"\",[\"$\",\"$1\",\"c\",{\"children\":[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/css/5fdf400d5849dfa6.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/css/b639fd46f42b2130.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}]],\"$L2\"]}],{\"children\":[\"__PAGE__\",[\"$\",\"$1\",\"c\",{\"children\":[[\"$\",\"div\",null,{\"className\":\"max-w-screen overflow-x-hidden\",\"children\":[[\"$\",\"div\",null,{\"className\":\"fixed inset-x-0 top-0 z-10 border-b border-black/5 dark:border-white/10\",\"children\":[\"$\",\"$L3\",null,{}]}],[\"$\",\"div\",null,{\"className\":\"grid min-h-dvh grid-cols-1 grid-rows-[1fr_1px_auto_1px_auto] justify-center pt-14.25 [--gutter-width:2.5rem] md:-mx-4 md:grid-cols-[var(--gutter-width)_minmax(0,var(--breakpoint-2xl))_var(--gutter-width)] lg:mx-0\",\"children\":[[\"$\",\"div\",null,{\"className\":\"col-start-1 row-span-full row-start-1 hidden border-x border-x-(--pattern-fg) bg-[image:repeating-linear-gradient(315deg,_var(--pattern-fg)_0,_var(--pattern-fg)_1px,_transparent_0,_transparent_50%)] bg-[size:10px_10px] bg-fixed [--pattern-fg:var(--color-black)]/5 md:block dark:[--pattern-fg:var(--color-white)]/10\"}],[\"$\",\"div\",null,{\"className\":\"grid gap-24 pb-24 text-gray-950 sm:gap-40 md:pb-40 dark:text-white\",\"children\":[[\"$\",\"$L4\",null,{}],[\"$\",\"div\",null,{\"className\":\"relative max-w-full\",\"children\":[[\"$\",\"div\",null,{\"aria-hidden\":\"true\",\"className\":\"hidden h-4 items-end px-2 font-mono text-xs/6 whitespace-pre text-black/20 max-sm:px-4 2xl:visible 2xl:flex dark:text-white/25\",\"children\":[\"text-4xl \",[\"$\",\"span\",null,{\"className\":\"inline dark:hidden\",\"children\":\"text-gray-950\"}],[\"$\",\"span\",null,{\"className\":\"hidden dark:inline\",\"children\":\"text-white\"}],\" tracking-tighter text-balance\"]}],[\"$\",\"div\",null,{\"className\":\"2xl:before:hidden 2xl:after:hidden relative before:absolute before:top-0 before:h-px before:w-[200vw] before:bg-gray-950/5 dark:before:bg-white/10 before:-left-[100vw] after:absolute after:bottom-0 after:h-px after:w-[200vw] after:bg-gray-950/5 dark:after:bg-white/10 after:-left-[100vw]\",\"children\":[\"$\",\"p\",null,{\"className\":\"text-sky-500 dark:text-sky-400 top-0 -left-[var(--gutter-width)] origin-bottom-right text-left font-mono text-sm font-semibold tracking-widest uppercase max-2xl:mb-4 max-2xl:px-2 max-sm:px-4 sm:text-xs 2xl:absolute 2xl:-translate-x-full 2xl:-translate-y-full 2xl:-rotate-90 2xl:text-right\",\"children\":\"Why Tailwind CSS?\"}]}],[\"$\",\"div\",null,{\"className\":\"relative before:absolute before:top-0 before:h-px before:w-[200vw] before:bg-gray-950/5 dark:before:bg-white/10 before:-left-[100vw] after:absolute after:bottom-0 after:h-px after:w-[200vw] after:bg-gray-950/5 dark:after:bg-white/10 after:-left-[100vw]\",\"children\":[\"$\",\"h2\",null,{\"className\":\"max-w-lg px-2 text-[2.5rem]/10 font-medium tracking-tighter text-balance max-sm:px-4 2xl:mt-0\",\"children\":\"Built for the modern web.\"}]}],[\"$\",\"div\",null,{\"aria-hidden\":\"true\",\"className\":\"flex h-6 items-end px-2 font-mono text-xs/6 whitespace-pre text-black/20 max-sm:px-4 sm:h-10 dark:text-white/25\",\"children\":[\"text-base \",[\"$\",\"span\",null,{\"className\":\"inline dark:hidden\",\"children\":\"text-gray-950\"}],[\"$\",\"span\",null,{\"className\":\"hidden dark:inline\",\"children\":\"text-white\"}]]}],[\"$\",\"div\",null,{\"className\":\"relative before:absolute before:top-0 before:h-px before:w-[200vw] before:bg-gray-950/5 dark:before:bg-white/10 before:-left-[100vw] after:absolute after:bottom-0 after:h-px after:w-[200vw] after:bg-gray-950/5 dark:after:bg-white/10 after:-left-[100vw]\",\"children\":[\"$\",\"p\",null,{\"className\":\"max-w-(--breakpoint-md) px-2 text-base/7 text-gray-600 max-sm:px-4 dark:text-gray-400\",\"children\":\"Tailwind is unapologetically modern, and takes advantage of all the latest and greatest CSS features to make the developer experience as enjoyable as possible.\"}]}],[\"$\",\"div\",null,{\"className\":\"mt-16 relative before:absolute before:top-0 before:h-px before:w-[200vw] before:bg-gray-950/5 dark:before:bg-white/10 before:-left-[100vw] after:absolute after:bottom-0 after:h-px after:w-[200vw] after:bg-gray-950/5 dark:after:bg-white/10 after:-left-[100vw]\",\"children\":[\"$\",\"div\",null,{\"className\":\"grid w-full grid-flow-dense grid-cols-30 gap-2 bg-gray-950/5 p-2 dark:bg-white/10\",\"children\":[[\"$\",\"div\",null,{\"className\":\"@container isolate flex flex-col gap-2 overflow-hidden rounded-2xl bg-white p-2 outline outline-gray-950/5 dark:bg-gray-950 dark:outline-white/10 col-span-full\",\"children\":[[[\"$\",\"div\",null,{\"className\":\"flex flex-col gap-6 p-6 @md:flex-row @md:gap-x-8 @md:p-8\",\"children\":[[\"$\",\"div\",null,{\"className\":\"flex h-18 w-28 shrink-0 items-center justify-center\",\"children\":[\"$\",\"svg\",null,{\"className\":\"text-gray-950 [--site-background:var(--color-white)] dark:text-white dark:[--site-background:var(--color-gray-950)]\",\"width\":112,\"height\":72,\"viewBox\":\"0 0 112 72\",\"fill\":\"none\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"children\":[[\"$\",\"path\",null,{\"d\":\"M62.3532 62.3285L94.3961 43.8285C95.5919 43.1382 96.1897 42.2333 96.1897 41.3285L96.1898 38.3285C96.1898 37.4237 95.5919 36.5189 94.3962 35.8285L48.4968 9.3285C46.1054 7.94779 42.228 7.94779 39.8366 9.3285L7.79365 27.8285C6.59792 28.5189 6.00005 29.4237 6.00005 30.3285V33.3427C6.00625 34.2428 6.6041 35.1418 7.7936 35.8285L53.6929 62.3285C56.0844 63.7092 59.9617 63.7092 62.3532 62.3285Z\",\"fill\":\"var(--site-background)\"}],[\"$\",\"path\",null,{\"d\":\"M7.7936 32.8285C6.59786 32.1381 5.99999 31.2333 6 30.3285C6.00001 29.4237 6.59787 28.5189 7.7936 27.8285L39.8365 9.3285C42.228 7.94779 46.1053 7.94779 48.4968 9.3285L94.3961 35.8285C95.5919 36.5189 96.1897 37.4237 96.1897 38.3285C96.1897 39.2333 95.5919 40.1381 94.3961 40.8285L62.3532 59.3285C59.9617 60.7092 56.0844 60.7092 53.6929 59.3285L7.7936 32.8285Z\",\"fill\":\"var(--site-background)\"}],[\"$\",\"path\",null,{\"d\":\"M6 30.3285C6.00001 29.4237 6.59787 28.5189 7.7936 27.8285L39.8365 9.3285C42.228 7.94779 46.1053 7.94779 48.4968 9.3285L94.3961 35.8285C95.5919 36.5189 96.1897 37.4237 96.1897 38.3285M6 30.3285C5.99999 31.2333 6.59786 32.1381 7.7936 32.8285L53.6929 59.3285C56.0844 60.7092 59.9617 60.7092 62.3532 59.3285L94.3961 40.8285C95.5919 40.1381 96.1897 39.2333 96.1897 38.3285M6 30.3285V33.3427C6.0062 34.2428 6.60405 35.1418 7.79355 35.8285L53.6929 62.3285C56.0844 63.7092 59.9617 63.7092 62.3531 62.3285L94.3961 43.8285C95.5918 43.1382 96.1897 42.2333 96.1897 41.3285L96.1897 38.3285\",\"stroke\":\"currentColor\"}],[\"$\",\"path\",null,{\"d\":\"M10.3922 31.3281C9.43562 30.7758 9.43562 29.8804 10.3922 29.3281L42.4351 10.8281C43.3917 10.2758 44.9427 10.2758 45.8992 10.8281L91.7986 37.3281C92.7552 37.8804 92.7552 38.7758 91.7986 39.3281L59.7557 57.8281C58.7991 58.3804 57.2481 58.3804 56.2916 57.8281L10.3922 31.3281Z\",\"fill\":\"var(--site-background)\",\"stroke\":\"currentColor\",\"strokeOpacity\":\"0.3\"}],[\"$\",\"path\",null,{\"d\":\"M91.1283 42.8285L104.119 35.3285C105.075 34.7762 105.554 34.0523 105.554 33.3284L105.554 30.3284C105.554 29.6046 105.075 28.8807 104.119 28.3284L70.3437 8.82843C68.4306 7.72386 65.3287 7.72386 63.4155 8.82843L50.4252 16.3284C49.4686 16.8807 48.9903 17.6046 48.9903 18.3284L48.9902 21.3284C48.9902 22.0523 49.4685 22.7762 50.4251 23.3285L84.2001 42.8285C86.1133 43.933 89.2151 43.933 91.1283 42.8285Z\",\"fill\":\"var(--site-background)\"}],[\"$\",\"path\",null,{\"d\":\"M105.554 30.3284C105.554 29.6046 105.075 28.8807 104.119 28.3284L70.3437 8.82843C68.4306 7.72386 65.3287 7.72386 63.4155 8.82843L50.4252 16.3284C49.4686 16.8807 48.9903 17.6046 48.9903 18.3284M105.554 30.3284C105.554 31.0523 105.075 31.7761 104.119 32.3284L91.1284 39.8284C89.2152 40.933 86.1133 40.933 84.2001 39.8284L50.4252 20.3284C49.4686 19.7761 48.9903 19.0523 48.9903 18.3284M105.554 30.3284L105.554 33.3284C105.554 34.0523 105.075 34.7762 104.119 35.3285L91.1283 42.8285C89.2151 43.933 86.1133 43.933 84.2001 42.8285L50.4251 23.3285C49.4685 22.7762 48.9902 22.0523 48.9902 21.3284L48.9903 18.3284\",\"stroke\":\"currentColor\"}],[\"$\",\"rect\",null,{\"width\":6,\"height\":2,\"rx\":1,\"transform\":\"matrix(0.866025 -0.5 0.866025 0.5 56.4883 15.3281)\",\"fill\":\"currentColor\"}]]}]}],[\"$\",\"div\",null,{\"children\":[[\"$\",\"span\",null,{\"className\":\"text-xl/10 font-medium text-gray-950 @md:text-2xl/10 dark:text-white\",\"children\":\"Responsive design\"}],[\"$\",\"p\",null,{\"className\":\"max-w-xl text-sm/7 text-gray-600 dark:text-gray-400\",\"children\":\"Okay, it’s not exactly cutting edge, but just throw a screen size in front of literally any utility to apply it at a specific breakpoint.\"}]]}]]}],[\"$\",\"div\",null,{\"className\":\"flex-1\"}]],[\"$\",\"div\",null,{\"className\":\"h-112 p-4 sm:p-8 relative overflow-hidden rounded-lg bg-gray-950/[2.5%] after:pointer-events-none after:absolute after:inset-0 after:rounded-lg after:inset-ring after:inset-ring-gray-950/5 dark:after:inset-ring-white/10 bg-[image:radial-gradient(var(--pattern-fg)_1px,_transparent_0)] bg-[size:10px_10px] bg-fixed [--pattern-fg:var(--color-gray-950)]/5 dark:[--pattern-fg:var(--color-white)]/10\",\"children\":[\"$\",\"div\",null,{\"className\":\"group flex flex-col gap-2\",\"children\":[[\"$\",\"div\",null,{\"className\":\"flex justify-start not-sm:hidden\",\"children\":[[\"$\",\"div\",null,{\"className\":\"flex w-10 shrink-0 grow-0 gap-2\",\"children\":[[\"$\",\"div\",null,{\"className\":\"h-8 w-px shrink-0 bg-gray-950/20 dark:bg-white/30\"}],[\"$\",\"span\",null,{\"className\":\"text-gray-950 dark:text-white\",\"children\":[\"$\",\"div\",null,{\"className\":\"font-mono text-[13px]/7 text-gray-950 dark:text-white\",\"children\":\"Mobile\"}]}]]}],[\"$\",\"div\",null,{\"className\":\"ml-150 flex w-32 shrink-0 grow-0 gap-2\",\"children\":[[\"$\",\"div\",null,{\"className\":\"h-8 w-px shrink-0 bg-gray-950/20 not-group-has-data-sm:bg-gray-950/5 dark:bg-white/30 dark:not-group-has-data-sm:bg-white/10\"}],[\"$\",\"span\",null,{\"className\":\"not-group-has-data-sm:opacity-40\",\"children\":[\"$\",\"div\",null,{\"className\":\"font-mono text-[13px]/7 text-gray-950 dark:text-white\",\"children\":\"sm\"}]}]]}],[\"$\",\"div\",null,{\"className\":\"flex w-64 shrink-0 grow-0 gap-2\",\"children\":[[\"$\",\"div\",null,{\"className\":\"h-8 w-px shrink-0 bg-gray-950/20 not-group-has-data-md:bg-gray-950/5 dark:bg-white/30 dark:not-group-has-data-md:bg-white/10\"}],[\"$\",\"span\",null,{\"className\":\"not-group-has-data-md:opacity-40\",\"children\":[\"$\",\"div\",null,{\"className\":\"font-mono text-[13px]/7 text-gray-950 dark:text-white\",\"children\":\"md\"}]}]]}],[\"$\",\"div\",null,{\"className\":\"flex w-64 shrink-0 grow-0 gap-2\",\"children\":[[\"$\",\"div\",null,{\"className\":\"h-8 w-px shrink-0 bg-gray-950/20 not-group-has-data-lg:bg-gray-950/5 dark:bg-white/30 dark:not-group-has-data-lg:bg-white/10\"}],[\"$\",\"span\",null,{\"className\":\"not-group-has-data-lg:opacity-40\",\"children\":[\"$\",\"div\",null,{\"className\":\"font-mono text-[13px]/7 text-gray-950 dark:text-white\",\"children\":\"lg\"}]}]]}],[\"$\",\"div\",null,{\"className\":\"flex w-64 shrink-0 grow-0 gap-2\",\"children\":[[\"$\",\"div\",null,{\"className\":\"h-8 w-px shrink-0 bg-gray-950/20 not-group-has-data-xl:bg-gray-950/5 dark:bg-white/30 dark:not-group-has-data-xl:bg-white/10\"}],[\"$\",\"span\",null,{\"className\":\"not-group-has-data-xl:opacity-40\",\"children\":[\"$\",\"div\",null,{\"className\":\"font-mono text-[13px]/7 text-gray-950 dark:text-white\",\"children\":\"xl\"}]}]]}]]}],[\"$\",\"$L5\",null,{\"children\":[[\"$\",\"$L6\",null,{\"className\":\"@container max-sm:mr-0!\",\"children\":[\"$\",\"div\",null,{\"className\":\"relative grid gap-10 rounded-t-2xl bg-white p-6 pb-10 ring ring-gray-950/5 @min-[theme(--breakpoint-lg)]:grid-cols-2 @min-[theme(--breakpoint-lg)]:px-20 @min-[theme(--breakpoint-lg)]:py-8 @min-[theme(--breakpoint-lg)]:pb-10 dark:bg-gray-950 dark:ring-white/10\",\"children\":[[\"$\",\"div\",null,{\"className\":\"flex flex-1 flex-col\",\"children\":[[\"$\",\"div\",null,{\"className\":\"relative mb-4 overflow-hidden rounded-lg @max-[theme(--breakpoint-xl)]:-mx-4 @max-[theme(--breakpoint-xl)]:-mt-4 @min-[theme(--breakpoint-lg)]:hidden\",\"children\":[[\"$\",\"div\",null,{\"className\":\"grid grid-cols-1 gap-2 @min-[theme(--breakpoint-sm)]:grid-cols-4\",\"children\":[[\"$\",\"img\",null,{\"alt\":\"\",\"src\":\"/_next/static/media/responsive-1.fd2e9248.png\",\"className\":\"h-48 w-full rounded-lg bg-gray-950/5 object-cover @min-[theme(--breakpoint-sm)]:col-span-2 @min-[theme(--breakpoint-sm)]:h-40\"}],[\"$\",\"img\",null,{\"alt\":\"\",\"src\":\"/_next/static/media/responsive-2.8cfea49d.png\",\"className\":\"col-span-2 h-48 w-full rounded-lg bg-gray-950/5 object-cover @max-[theme(--breakpoint-sm)]:hidden @min-[theme(--breakpoint-md)]:col-span-1 @min-[theme(--breakpoint-sm)]:h-40\"}],[\"$\",\"img\",null,{\"alt\":\"\",\"src\":\"/_next/static/media/responsive-3.e7467feb.png\",\"className\":\"h-48 w-full rounded-lg bg-gray-950/5 object-cover @max-[theme(--breakpoint-md)]:hidden @min-[theme(--breakpoint-sm)]:h-40\"}]]}],[\"$\",\"div\",null,{\"className\":\"absolute inset-0 flex flex-col justify-end gap-2 bg-linear-to-b from-transparent via-transparent to-gray-950 p-6 @min-[theme(--breakpoint-sm)]:hidden\",\"children\":[[\"$\",\"span\",null,{\"className\":\"text-sm/6 font-semibold text-white/80\",\"children\":\"Entire house\"}],[\"$\",\"span\",null,{\"className\":\"text-xl/6 font-semibold text-white\",\"children\":\"Beach House on Lake Huron\"}]]}]]}],[\"$\",\"span\",null,{\"className\":\"font-medium text-gray-500 @max-[theme(--breakpoint-sm)]:hidden dark:text-gray-500\",\"children\":\"Entire house\"}],[\"$\",\"div\",null,{\"className\":\"grid grid-cols-1 gap-4 @min-[theme(--breakpoint-sm)]:grid-cols-[1fr_auto] @min-[theme(--breakpoint-xl)]:grid-cols-1\",\"children\":[[\"$\",\"div\",null,{\"children\":[[\"$\",\"span\",null,{\"className\":\"mt-2 text-3xl font-semibold text-gray-950 @max-[theme(--breakpoint-sm)]:hidden dark:text-white\",\"children\":\"Beach House on Lake Huron\"}],[\"$\",\"span\",null,{\"className\":\"mt-2 flex gap-2\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1 text-pink-600 dark:text-pink-500\",\"children\":[[\"$\",\"svg\",null,{\"xmlns\":\"http://www.w3.org/2000/svg\",\"viewBox\":\"0 0 16 16\",\"fill\":\"currentColor\",\"aria-hidden\":\"true\",\"data-slot\":\"icon\",\"ref\":\"$undefined\",\"aria-labelledby\":\"$undefined\",\"className\":\"size-4\",\"children\":[null,[\"$\",\"path\",null,{\"fillRule\":\"evenodd\",\"d\":\"M8 1.75a.75.75 0 0 1 .692.462l1.41 3.393 3.664.293a.75.75 0 0 1 .428 1.317l-2.791 2.39.853 3.575a.75.75 0 0 1-1.12.814L7.998 12.08l-3.135 1.915a.75.75 0 0 1-1.12-.814l.852-3.574-2.79-2.39a.75.75 0 0 1 .427-1.318l3.663-.293 1.41-3.393A.75.75 0 0 1 8 1.75Z\",\"clipRule\":\"evenodd\"}]]}],[\"$\",\"span\",null,{\"className\":\"text-sm/6 font-medium\",\"children\":\"2.66\"}]]}],[\"$\",\"span\",null,{\"className\":\"text-sm/6 text-gray-500\",\"children\":\"(128 reviews)\"}],[\"$\",\"span\",null,{\"className\":\"text-pink-300 dark:text-gray-600\",\"children\":\"·\"}],[\"$\",\"span\",null,{\"className\":\"text-sm/6 font-medium text-pink-600 dark:text-pink-500\",\"children\":\"Bayfield, ON\"}]]}]]}],[\"$\",\"div\",null,{\"className\":\"@min-[theme(--breakpoint-lg)]:hidden\",\"children\":[\"$\",\"button\",null,{\"type\":\"button\",\"className\":\"w-full rounded-lg bg-pink-500 px-3 py-2 text-sm/6 font-bold text-white @min-[theme(--breakpoint-sm)]:w-auto\",\"children\":\"Check availability\"}]}]]}],[\"$\",\"div\",null,{\"children\":[[\"$\",\"p\",null,{\"className\":\"mt-4 line-clamp-2 text-sm/6 text-gray-600 @min-[theme(--breakpoint-xl)]:max-w-md dark:text-gray-400\",\"children\":[\"This sunny and spacious room is for those traveling light and looking for a comfy and cozy place to lay their head for a night...\",\" \",[\"$\",\"span\",null,{\"className\":\"hidden font-bold text-pink-600 before:text-white sm:@max-[theme(--breakpoint-sm)]:inline-block dark:text-pink-500\",\"children\":\"Show more\"}]]}],[\"$\",\"span\",null,{\"className\":\"mt-3 inline-block shrink-0 text-sm/6 font-semibold text-pink-600 dark:text-pink-500\",\"children\":\"Show more\"}]]}],[\"$\",\"div\",null,{\"className\":\"mt-6 @max-[theme(--breakpoint-lg)]:hidden\",\"children\":[\"$\",\"button\",null,{\"type\":\"button\",\"className\":\"w-auto rounded-lg bg-pink-500 px-3 py-2 text-sm/6 font-bold text-white\",\"children\":\"Check availability\"}]}]]}],[\"$\",\"div\",null,{\"className\":\"grid grid-cols-4 grid-rows-2 gap-2 @max-[theme(--breakpoint-lg)]:hidden\",\"children\":[[\"$\",\"img\",null,{\"alt\":\"\",\"src\":\"/_next/static/media/responsive-1.fd2e9248.png\",\"className\":\"col-span-4 h-[150px] w-full rounded-lg bg-gray-950/5 object-cover @min-[theme(--breakpoint-xl)]:col-span-2 @min-[theme(--breakpoint-xl)]:row-span-2 @min-[theme(--breakpoint-xl)]:aspect-square @min-[theme(--breakpoint-xl)]:h-[308px]\"}],[\"$\",\"img\",null,{\"alt\":\"\",\"src\":\"/_next/static/media/responsive-2.8cfea49d.png\",\"className\":\"col-span-2 h-[150px] w-full rounded-lg bg-gray-950/5 @max-[theme(--breakpoint-xl)]:aspect-square @min-[theme(--breakpoint-xl)]:col-span-1\"}],[\"$\",\"img\",null,{\"alt\":\"\",\"src\":\"/_next/static/media/responsive-3.e7467feb.png\",\"className\":\"col-span-2 h-[150px] w-full rounded-lg bg-gray-950/5 @max-[theme(--breakpoint-xl)]:aspect-square @min-[theme(--breakpoint-xl)]:col-span-1\"}],[\"$\",\"div\",null,{\"className\":\"contents @max-[theme(--breakpoint-xl)]:hidden\",\"children\":[[\"$\",\"img\",null,{\"alt\":\"\",\"src\":\"/_next/static/media/responsive-4.8e943ba2.png\",\"className\":\"aspect-square size-[150px] rounded-lg bg-gray-950/5\"}],[\"$\",\"img\",null,{\"alt\":\"\",\"src\":\"/_next/static/media/responsive-5.660185c2.png\",\"className\":\"aspect-square size-[150px] rounded-lg bg-gray-950/5\"}]]}]]}]]}]}],[\"$\",\"$L7\",null,{\"className\":\"pointer-events-auto absolute top-[186px] -right-4 z-50 -mt-6 h-12 w-1.5 cursor-ew-resize rounded-full max-lg:hidden bg-slate-950/20 group-data-dragging:bg-slate-950/40 hover:bg-slate-950/40 dark:bg-slate-500 dark:group-data-dragging:bg-slate-300 dark:hover:bg-slate-300\"}]]}]]}]}]]}],[\"$\",\"div\",null,{\"className\":\"@container isolate flex flex-col gap-2 overflow-hidden rounded-2xl bg-white p-2 outline outline-gray-950/5 dark:bg-gray-950 dark:outline-white/10 col-span-full md:col-span-15\",\"children\":[[[\"$\",\"div\",null,{\"className\":\"flex flex-col gap-6 p-6 @md:flex-row @md:gap-x-8 @md:p-8\",\"children\":[[\"$\",\"div\",null,{\"className\":\"flex h-18 w-28 shrink-0 items-center justify-center\",\"children\":[\"$\",\"svg\",null,{\"className\":\"text-gray-950 [--site-background:var(--color-white)] dark:text-white dark:[--site-background:var(--color-gray-950)]\",\"width\":112,\"height\":72,\"viewBox\":\"0 0 112 72\",\"fill\":\"none\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"children\":[[\"$\",\"rect\",null,{\"width\":112,\"height\":72,\"fill\":\"var(--site-background)\"}],[\"$\",\"path\",null,{\"d\":\"M66.4883 54.4995L107.192 30.9995V27.9995M66.4883 54.4995L25.7852 30.9995V27.9995M66.4883 54.4995V51.4995M25.7852 27.9995L66.4883 4.49951L107.192 27.9995M25.7852 27.9995L66.4883 51.4995M107.192 27.9995L66.4883 51.4995\",\"stroke\":\"currentColor\"}],[\"$\",\"path\",null,{\"d\":\"M4.99414 34.9995L45.6973 11.4995L50.0289 14.0003L47.432 15.4996L45.7004 14.4999L10.1934 34.9999L41.3703 52.9999L52.6288 46.4998M4.99414 34.9995L45.6973 58.4995M4.99414 34.9995L4.9953 36.9995L45.6985 60.4995M45.6973 58.4995L45.6985 60.4995M45.6973 58.4995L59.5551 50.4987M45.6985 60.4995L61.2878 51.499M30.9766 46.9998V35.8282C30.9766 35.3036 31.224 34.8124 31.655 34.3913\",\"stroke\":\"currentColor\"}],[\"$\",\"g\",null,{\"filter\":\"url(#filter0_f_457_1608)\",\"children\":[\"$\",\"path\",null,{\"d\":\"M25.7852 30.9998L50.0308 17.0015M66.4883 7.49976L107.192 30.9998M66.4883 7.49976V4.49976M66.4883 7.49976L52.6277 15.5022M86.3961 34.9984L86.3972 36.9984L63.8831 49.9969M86.3961 34.9984L62.1504 48.9966M86.3961 34.9984L52.6277 15.5022M56.9542 32.9987H35.8724C35.4346 32.9987 35.0102 33.0319 34.6064 33.0941M53.4893 32.9988V27.413C53.4893 26.6319 54.586 25.9988 55.9388 25.9988H65.6137M55.2241 44.9977L76.8728 32.4988L50.0308 17.0015M50.0308 17.0015L52.6277 15.5022M43.5322 24.2488C45.2062 25.2153 45.2062 26.7823 43.5322 27.7488C41.8581 28.7153 39.144 28.7153 37.47 27.7488C35.796 26.7823 35.796 25.2153 37.47 24.2488C39.144 23.2823 41.8581 23.2823 43.5322 24.2488Z\",\"stroke\":\"currentColor\",\"strokeOpacity\":\"0.3\"}]}],[\"$\",\"defs\",null,{\"children\":[\"$\",\"filter\",null,{\"id\":\"filter0_f_457_1608\",\"x\":\"23.5352\",\"y\":\"2.49976\",\"width\":\"85.9062\",\"height\":\"49.9302\",\"filterUnits\":\"userSpaceOnUse\",\"colorInterpolationFilters\":\"sRGB\",\"children\":[[\"$\",\"feFlood\",null,{\"floodOpacity\":0,\"result\":\"BackgroundImageFix\"}],[\"$\",\"feBlend\",null,{\"mode\":\"normal\",\"in\":\"SourceGraphic\",\"in2\":\"BackgroundImageFix\",\"result\":\"shape\"}],[\"$\",\"feGaussianBlur\",null,{\"stdDeviation\":1,\"result\":\"effect1_foregroundBlur_457_1608\"}]]}]}]]}]}],[\"$\",\"div\",null,{\"children\":[[\"$\",\"span\",null,{\"className\":\"text-xl/10 font-medium text-gray-950 @md:text-2xl/10 dark:text-white\",\"children\":\"Filters\"}],[\"$\",\"p\",null,{\"className\":\"max-w-xl text-sm/7 text-gray-600 dark:text-gray-400\",\"children\":\"What’s a website these days without a few backdrop blurs? Keep stacking filters until your designer asks you to please, please stop.\"}]]}]]}],[\"$\",\"div\",null,{\"className\":\"flex-1\"}]],[\"$\",\"div\",null,{\"className\":\"h-112 relative overflow-hidden rounded-lg bg-gray-950/[2.5%] after:pointer-events-none after:absolute after:inset-0 after:rounded-lg after:inset-ring after:inset-ring-gray-950/5 dark:after:inset-ring-white/10 bg-[image:radial-gradient(var(--pattern-fg)_1px,_transparent_0)] bg-[size:10px_10px] bg-fixed [--pattern-fg:var(--color-gray-950)]/5 dark:[--pattern-fg:var(--color-white)]/10\",\"children\":[\"$\",\"div\",null,{\"className\":\"@container relative flex size-full items-center justify-center\",\"children\":[[\"$\",\"$L8\",null,{\"className\":\"no-scrollbar z-10 -my-1 flex snap-x snap-mandatory gap-(--gap) overflow-x-auto py-1 [--gap:--spacing(10)] [--size:--spacing(72)]\",\"children\":[[\"$\",\"div\",null,{\"className\":\"flex snap-proximity snap-end\",\"children\":[\"$\",\"div\",null,{\"className\":\"w-[calc(50cqw-(var(--size)/2)-(var(--gap)))]\"}]}],[[\"$\",\"div\",\"blur-sm\",{\"data-target\":true,\"className\":\"flex snap-center snap-always flex-col items-center gap-2\",\"children\":[[\"$\",\"div\",null,{\"className\":\"font-mono text-[13px]/7 text-gray-950 dark:text-white\",\"children\":\"blur-sm\"}],[\"$\",\"div\",null,{\"className\":\"shadow ring inset-ring ring-gray-950/10 inset-ring-white/20\",\"children\":[\"$\",\"div\",null,{\"className\":\"size-(--size) bg-white/15 backdrop-blur-sm\"}]}]]}],[\"$\",\"div\",\"brightness-150\",{\"data-target\":true,\"className\":\"flex snap-center snap-always flex-col items-center gap-2\",\"children\":[[\"$\",\"div\",null,{\"className\":\"font-mono text-[13px]/7 text-gray-950 dark:text-white\",\"children\":\"brightness-150\"}],[\"$\",\"div\",null,{\"className\":\"shadow ring inset-ring ring-gray-950/10 inset-ring-white/20\",\"children\":[\"$\",\"div\",null,{\"className\":\"size-(--size) bg-white/15 backdrop-brightness-150\"}]}]]}],[\"$\",\"div\",\"grayscale\",{\"data-target\":true,\"className\":\"flex snap-center snap-always flex-col items-center gap-2\",\"children\":[[\"$\",\"div\",null,{\"className\":\"font-mono text-[13px]/7 text-gray-950 dark:text-white\",\"children\":\"grayscale\"}],[\"$\",\"div\",null,{\"className\":\"shadow ring inset-ring ring-gray-950/10 inset-ring-white/20\",\"children\":[\"$\",\"div\",null,{\"className\":\"size-(--size) bg-white/15 backdrop-grayscale\"}]}]]}],[\"$\",\"div\",\"contrast-150\",{\"data-target\":true,\"className\":\"flex snap-center snap-always flex-col items-center gap-2\",\"children\":[[\"$\",\"div\",null,{\"className\":\"font-mono text-[13px]/7 text-gray-950 dark:text-white\",\"children\":\"contrast-150\"}],[\"$\",\"div\",null,{\"className\":\"shadow ring inset-ring ring-gray-950/10 inset-ring-white/20\",\"children\":[\"$\",\"div\",null,{\"className\":\"size-(--size) bg-white/15 backdrop-contrast-150\"}]}]]}],[\"$\",\"div\",\"saturate-200\",{\"data-target\":true,\"className\":\"flex snap-center snap-always flex-col items-center gap-2\",\"children\":[[\"$\",\"div\",null,{\"className\":\"font-mono text-[13px]/7 text-gray-950 dark:text-white\",\"children\":\"saturate-200\"}],[\"$\",\"div\",null,{\"className\":\"shadow ring inset-ring ring-gray-950/10 inset-ring-white/20\",\"children\":[\"$\",\"div\",null,{\"className\":\"size-(--size) bg-white/15 backdrop-saturate-200\"}]}]]}],[\"$\",\"div\",\"sepia\",{\"data-target\":true,\"className\":\"flex snap-center snap-always flex-col items-center gap-2\",\"children\":[[\"$\",\"div\",null,{\"className\":\"font-mono text-[13px]/7 text-gray-950 dark:text-white\",\"children\":\"sepia\"}],[\"$\",\"div\",null,{\"className\":\"shadow ring inset-ring ring-gray-950/10 inset-ring-white/20\",\"children\":[\"$\",\"div\",null,{\"className\":\"size-(--size) bg-white/15 backdrop-sepia\"}]}]]}]],[\"$\",\"div\",null,{\"className\":\"flex snap-proximity snap-end\",\"children\":[\"$\",\"div\",null,{\"className\":\"w-[calc(50cqw-(var(--size)/2)-(var(--gap)))]\"}]}]]}],[\"$\",\"div\",null,{\"className\":\"absolute inset-0 mt-8 flex items-center justify-center\",\"children\":[\"$\",\"img\",null,{\"alt\":\"\",\"src\":\"/_next/static/media/filters.debd0951.png\",\"className\":\"size-64 inset-ring inset-ring-gray-950/10\"}]}]]}]}]]}],[\"$\",\"div\",null,{\"className\":\"@container isolate flex flex-col gap-2 overflow-hidden rounded-2xl bg-white p-2 outline outline-gray-950/5 dark:bg-gray-950 dark:outline-white/10 col-span-full md:col-span-15\",\"children\":[[[\"$\",\"div\",null,{\"className\":\"flex flex-col gap-6 p-6 @md:flex-row @md:gap-x-8 @md:p-8\",\"children\":[[\"$\",\"div\",null,{\"className\":\"flex h-18 w-28 shrink-0 items-center justify-center\",\"children\":[\"$\",\"svg\",null,{\"className\":\"text-gray-950 [--site-background:var(--color-white)] dark:text-white dark:[--site-background:var(--color-gray-950)]\",\"width\":112,\"height\":72,\"viewBox\":\"0 0 112 72\",\"fill\":\"none\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"children\":[[\"$\",\"path\",null,{\"d\":\"M71.7615 59.503L94.2781 46.503C97.7457 44.501 99.4795 41.8771 99.4796 39.2531L99.4796 36.2531C99.4796 33.6291 97.7458 31.0051 94.2782 29.003C87.3429 24.999 76.0987 24.999 69.1634 29.003L46.6468 42.003C43.1791 44.0051 41.4453 46.6291 41.4453 49.2531V52.2531C41.4453 54.8771 43.1791 57.501 46.6467 59.503C53.582 63.5071 64.8262 63.5071 71.7615 59.503Z\",\"fill\":\"var(--site-background)\"}],[\"$\",\"path\",null,{\"d\":\"M99.4796 36.2531C99.4796 33.6291 97.7458 31.0051 94.2782 29.003C87.3429 24.999 76.0987 24.999 69.1634 29.003L46.6468 42.003C43.1791 44.0051 41.4453 46.6291 41.4453 49.2531M99.4796 36.2531C99.4796 38.8771 97.7458 41.501 94.2782 43.503L71.7615 56.503C64.8263 60.5071 53.582 60.5071 46.6468 56.503C43.1792 54.501 41.4453 51.8771 41.4453 49.2531M99.4796 36.2531L99.4796 39.2531C99.4795 41.8771 97.7457 44.501 94.2781 46.503L71.7615 59.503C64.8262 63.5071 53.582 63.5071 46.6467 59.503C43.1791 57.501 41.4453 54.8771 41.4453 52.2531V49.2531\",\"stroke\":\"currentColor\"}],[\"$\",\"path\",null,{\"d\":\"M71.7601 41.0028C77.2604 44.1784 86.1783 44.1784 91.6786 41.0028C94.4288 39.415 95.8039 37.3339 95.8039 35.2528V32.2528C95.8039 30.1717 94.4288 28.0906 91.6786 26.5028C86.1783 23.3272 77.2604 23.3272 71.76 26.5028C69.0165 28.0868 67.6415 30.1616 67.6348 32.2377V35.2528C67.6348 37.3339 69.0099 39.415 71.7601 41.0028Z\",\"fill\":\"var(--site-background)\"}],[\"$\",\"path\",null,{\"d\":\"M67.6348 32.2377C67.6281 34.3238 69.0032 36.4111 71.76 38.0028C77.2604 41.1785 86.1783 41.1785 91.6786 38.0028C94.4288 36.415 95.8039 34.3339 95.8039 32.2528M67.6348 32.2377C67.6415 30.1616 69.0165 28.0868 71.76 26.5028C77.2604 23.3272 86.1783 23.3272 91.6786 26.5028C94.4288 28.0906 95.8039 30.1717 95.8039 32.2528M67.6348 32.2377V35.2528C67.6348 37.3339 69.0099 39.415 71.7601 41.0028C77.2604 44.1784 86.1783 44.1784 91.6786 41.0028C94.4288 39.415 95.8039 37.3339 95.8039 35.2528V32.2528\",\"stroke\":\"currentColor\"}],[\"$\",\"path\",null,{\"d\":\"M75.2239 28.5L76.956 29.5M81.719 26.9492V28.3634M88.2141 28.5L86.4821 29.5M90.9046 32.25H88.4551M86.4827 35L88.2147 36M81.719 36.1406V37.5548M76.9553 35L75.2233 36M74.9827 32.25H72.5332M83.8841 31C85.0799 31.6904 85.0799 32.8096 83.8841 33.5C82.6884 34.1904 80.7497 34.1904 79.554 33.5C78.3583 32.8096 78.3583 31.6904 79.554 31C80.7497 30.3096 82.6884 30.3096 83.8841 31Z\",\"stroke\":\"currentColor\",\"strokeLinecap\":\"round\"}],[\"$\",\"path\",null,{\"fillRule\":\"evenodd\",\"clipRule\":\"evenodd\",\"d\":\"M64.8328 29.503L42.3161 42.503C35.3809 46.5071 24.1367 46.5071 17.2014 42.503C13.7413 40.5053 12.0075 37.8883 12 35.27V32.2531C12 29.7918 13.5255 27.3305 16.5765 25.3824C17.9961 23.2104 20.98 21.4814 24.735 20.6535L39.7181 12.003C46.6533 7.99898 57.8976 7.99898 64.8328 12.003C68.3005 14.0051 70.0343 16.6291 70.0343 19.2531V22.2531C70.0342 24.8771 68.3004 27.501 64.8328 29.503Z\",\"fill\":\"var(--site-background)\"}],[\"$\",\"path\",null,{\"d\":\"M12 32.2531C12 29.6291 13.7338 27.0051 17.2015 25.003L39.7181 12.003C46.6534 7.99898 57.8976 7.99898 64.8328 12.003C68.3005 14.0051 70.0343 16.6291 70.0343 19.2531M12 32.2531C12 34.8771 13.7339 37.501 17.2015 39.503C24.1367 43.5071 35.3809 43.5071 42.3162 39.503L64.8329 26.503C68.3005 24.501 70.0343 21.8771 70.0343 19.2531M12 32.2531V35.27C12.0075 37.8883 13.7413 40.5053 17.2014 42.503C24.1367 46.5071 35.3809 46.5071 42.3162 42.503L64.8328 29.503C68.3004 27.501 70.0343 24.8771 70.0343 22.2531V19.2531\",\"stroke\":\"currentColor\"}],[\"$\",\"path\",null,{\"d\":\"M15.6738 31.2531C15.6738 35.7441 21.9797 39.3848 29.7584 39.3848C37.5371 39.3848 43.843 35.7441 43.843 31.2531L43.843 28.2531C43.843 23.762 37.5371 20.1213 29.7585 20.1213C21.9798 20.1213 15.6739 23.762 15.6739 28.2531L15.6738 31.2531Z\",\"fill\":\"var(--site-background)\"}],[\"$\",\"path\",null,{\"d\":\"M30.1939 23.6619L30.3702 22.9495L30.5465 23.6619C30.6235 23.973 31.0469 24.2175 31.5857 24.2619L32.8197 24.3637L31.5857 24.4655C31.0469 24.5099 30.6235 24.7543 30.5465 25.0655L30.3702 25.7779L30.1939 25.0655C30.117 24.7543 29.6936 24.5099 29.1547 24.4655L27.9207 24.3637L29.1547 24.2619C29.6936 24.2175 30.117 23.973 30.1939 23.6619Z\",\"fill\":\"currentColor\"}],[\"$\",\"path\",null,{\"d\":\"M35.0507 26.4584L35.2692 25.0708L35.4877 26.4584C35.5391 26.7848 35.9722 27.0481 36.5342 27.0944L37.7187 27.1921L36.5342 27.2898C35.9722 27.3361 35.5391 27.5994 35.4877 27.9258L35.2692 29.3134L35.0507 27.9258C34.9993 27.5994 34.5662 27.3361 34.0042 27.2898L32.8197 27.1921L34.0042 27.0944C34.5662 27.0481 34.9993 26.7848 35.0507 26.4584Z\",\"fill\":\"currentColor\"}],[\"$\",\"path\",null,{\"d\":\"$9\",\"stroke\":\"currentColor\",\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\"}]]}]}],[\"$\",\"div\",null,{\"children\":[[\"$\",\"span\",null,{\"className\":\"text-xl/10 font-medium text-gray-950 @md:text-2xl/10 dark:text-white\",\"children\":\"Dark mode\"}],[\"$\",\"p\",null,{\"className\":\"max-w-xl text-sm/7 text-gray-600 dark:text-gray-400\",\"children\":[\"If you’re not a fan of burning your retinas, just stick\",\" \",[\"$\",\"code\",null,{\"className\":\"font-medium text-gray-950 dark:text-white\",\"children\":\"dark:\"}],\" in front of any color to apply it in dark mode.\"]}]]}]]}],[\"$\",\"div\",null,{\"className\":\"flex-1\"}]],[\"$\",\"div\",null,{\"className\":\"h-112 p-4 sm:p-8 relative overflow-hidden rounded-lg bg-gray-950/[2.5%] after:pointer-events-none after:absolute after:inset-0 after:rounded-lg after:inset-ring after:inset-ring-gray-950/5 dark:after:inset-ring-white/10 bg-[image:radial-gradient(var(--pattern-fg)_1px,_transparent_0)] bg-[size:10px_10px] bg-fixed [--pattern-fg:var(--color-gray-950)]/5 dark:[--pattern-fg:var(--color-white)]/10\",\"children\":[\"$\",\"$La\",null,{}]}]]}],[\"$\",\"div\",null,{\"className\":\"@container isolate flex flex-col gap-2 overflow-hidden rounded-2xl bg-white p-2 outline outline-gray-950/5 dark:bg-gray-950 dark:outline-white/10 col-span-full md:col-span-15 xl:col-span-12\",\"children\":[[[\"$\",\"div\",null,{\"className\":\"flex flex-col gap-6 p-6 @md:flex-row @md:gap-x-8 @md:p-8\",\"children\":[[\"$\",\"div\",null,{\"className\":\"flex h-18 w-28 shrink-0 items-center justify-center\",\"children\":[\"$\",\"svg\",null,{\"className\":\"text-gray-950 [--site-background:var(--color-white)] dark:text-white dark:[--site-background:var(--color-gray-950)]\",\"width\":112,\"height\":72,\"viewBox\":\"0 0 112 72\",\"fill\":\"none\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"children\":[[\"$\",\"g\",null,{\"clipPath\":\"url(#clip0_408_5776)\",\"children\":[[\"$\",\"path\",null,{\"d\":\"M52.1952 5.0003L4.56383 32.5003C3.60721 33.0526 3.12888 33.7765 3.12891 34.5004V37.5004C3.12892 38.2242 3.60721 38.9481 4.56378 39.5003L52.1952 67.0003C54.1083 68.1049 57.2102 68.1049 59.1234 67.0003L106.755 39.5003C107.711 38.9481 108.19 38.2242 108.19 37.5004V34.5004C108.19 33.7765 107.711 33.0526 106.755 32.5003L59.1234 5.0003C57.2103 3.89573 54.1084 3.89573 52.1952 5.0003Z\",\"fill\":\"var(--site-background)\"}],[\"$\",\"path\",null,{\"d\":\"M3.12891 34.5004C3.12888 33.7765 3.60721 33.0526 4.56383 32.5003L52.1952 5.0003C54.1084 3.89573 57.2103 3.89573 59.1234 5.0003L106.755 32.5003C107.711 33.0526 108.19 33.7765 108.19 34.5004M3.12891 34.5004C3.12893 35.2242 3.60727 35.948 4.56383 36.5003L52.1952 64.0003C54.1084 65.1049 57.2103 65.1049 59.1234 64.0003L106.755 36.5003C107.711 35.948 108.19 35.2242 108.19 34.5004M3.12891 34.5004V37.5004C3.12892 38.2242 3.60721 38.9481 4.56378 39.5003L52.1952 67.0003C54.1083 68.1049 57.2102 68.1049 59.1234 67.0003L106.755 39.5003C107.711 38.9481 108.19 38.2242 108.19 37.5004V34.5004\",\"stroke\":\"currentColor\"}],[\"$\",\"path\",null,{\"d\":\"M13.2223 38.5L59.9877 11.5C60.4659 11.2239 61.2414 11.2239 61.7197 11.5L103.289 35.5M13.2223 38.5L54.7915 62.5C55.2698 62.7761 56.0453 62.7761 56.5236 62.5L103.289 35.5M13.2223 38.5L12.3563 38C11.878 37.7239 11.878 37.2761 12.3563 37L59.9877 9.5C60.4659 9.22386 61.2414 9.22386 61.7197 9.5L104.155 34C104.633 34.2761 104.633 34.7239 104.155 35L103.289 35.5\",\"stroke\":\"currentColor\"}],[\"$\",\"path\",null,{\"d\":\"M10.7309 33.4928C10.7277 33.2238 10.5484 32.9554 10.1928 32.7501C9.4754 32.3359 8.3122 32.3359 7.59476 32.7501C7.23924 32.9554 7.0599 33.2238 7.05673 33.4928M10.7309 33.4928C10.7341 33.7667 10.5548 34.0412 10.1928 34.2501C9.4754 34.6643 8.3122 34.6643 7.59476 34.2501C7.23284 34.0412 7.0535 33.7667 7.05673 33.4928M10.7309 33.4928V34.5001C10.7308 34.7715 10.5515 35.043 10.1928 35.2501C9.47536 35.6643 8.31216 35.6643 7.59472 35.2501C7.24053 35.0456 7.0612 34.7783 7.05673 34.5103V33.4928\",\"stroke\":\"currentColor\",\"strokeOpacity\":\"0.3\"}],[\"$\",\"path\",null,{\"d\":\"M15.061 31.0001C15.061 30.7287 14.8816 30.4572 14.5229 30.2501C13.8054 29.8359 12.6422 29.8359 11.9248 30.2501C11.5681 30.4561 11.3887 30.7257 11.3867 30.9956M15.061 31.0001C15.0609 31.2716 14.8816 31.543 14.5229 31.7501C13.8054 32.1643 12.6422 32.1643 11.9248 31.7501C11.5641 31.5419 11.3847 31.2685 11.3867 30.9956M15.061 31.0001V32.0033C15.0596 32.2736 14.8802 32.5438 14.5229 32.7501C13.8054 33.1643 12.6422 33.1643 11.9248 32.7501C11.5675 32.5438 11.3881 32.2736 11.3867 32.0033V30.9956\",\"stroke\":\"currentColor\",\"strokeOpacity\":\"0.3\"}],[\"$\",\"path\",null,{\"d\":\"M15.7168 28.5001C15.7168 28.7716 15.8962 29.043 16.2549 29.2501C16.9723 29.6643 18.1355 29.6643 18.853 29.2501C19.2117 29.043 19.391 28.7716 19.391 28.5001M15.7168 28.5001C15.7168 28.2287 15.8962 27.9572 16.2549 27.7501C16.9723 27.3359 18.1355 27.3359 18.853 27.7501C19.2117 27.9572 19.391 28.2287 19.391 28.5001M15.7168 28.5001L15.7169 29.5001C15.7169 29.7715 15.8962 30.043 16.2549 30.2501C16.9724 30.6643 18.1356 30.6643 18.853 30.2501C19.2117 30.043 19.3911 29.7715 19.3911 29.5001L19.391 28.5001\",\"stroke\":\"currentColor\",\"strokeOpacity\":\"0.3\"}],[\"$\",\"rect\",null,{\"width\":8,\"height\":2,\"rx\":\"0.5\",\"transform\":\"matrix(0.866025 -0.5 0.866025 0.5 24.4805 39.5)\",\"fill\":\"currentColor\",\"fillOpacity\":\"0.3\"}],[\"$\",\"rect\",null,{\"width\":8,\"height\":2,\"rx\":\"0.5\",\"transform\":\"matrix(0.866025 -0.5 0.866025 0.5 41.8027 49.5)\",\"fill\":\"currentColor\",\"fillOpacity\":\"0.3\"}],[\"$\",\"rect\",null,{\"width\":8,\"height\":2,\"rx\":\"0.5\",\"transform\":\"matrix(0.866025 -0.5 0.866025 0.5 19.2852 38.5)\",\"fill\":\"currentColor\",\"fillOpacity\":\"0.3\"}],[\"$\",\"rect\",null,{\"width\":5,\"height\":2,\"rx\":\"0.5\",\"transform\":\"matrix(0.866025 -0.5 0.866025 0.5 33.1406 34.5)\",\"fill\":\"currentColor\",\"fillOpacity\":\"0.3\"}],[\"$\",\"rect\",null,{\"width\":5,\"height\":2,\"rx\":\"0.5\",\"transform\":\"matrix(0.866025 -0.5 0.866025 0.5 50.4629 44.5)\",\"fill\":\"currentColor\",\"fillOpacity\":\"0.3\"}],[\"$\",\"rect\",null,{\"width\":7,\"height\":2,\"rx\":\"0.5\",\"transform\":\"matrix(0.866025 -0.5 0.866025 0.5 29.6777 40.5)\",\"fill\":\"currentColor\",\"fillOpacity\":\"0.3\"}],[\"$\",\"rect\",null,{\"width\":7,\"height\":2,\"rx\":\"0.5\",\"transform\":\"matrix(0.866025 -0.5 0.866025 0.5 46.998 50.5)\",\"fill\":\"currentColor\",\"fillOpacity\":\"0.3\"}],[\"$\",\"rect\",null,{\"width\":4,\"height\":2,\"rx\":\"0.5\",\"transform\":\"matrix(0.866025 -0.5 0.866025 0.5 34.873 41.5)\",\"fill\":\"currentColor\",\"fillOpacity\":\"0.3\"}],[\"$\",\"rect\",null,{\"width\":4,\"height\":2,\"rx\":\"0.5\",\"transform\":\"matrix(0.866025 -0.5 0.866025 0.5 53.9258 54.5)\",\"fill\":\"currentColor\",\"fillOpacity\":\"0.3\"}],[\"$\",\"rect\",null,{\"width\":4,\"height\":2,\"rx\":\"0.5\",\"transform\":\"matrix(0.866025 -0.5 0.866025 0.5 52.1934 51.5)\",\"fill\":\"currentColor\",\"fillOpacity\":\"0.3\"}],[\"$\",\"rect\",null,{\"width\":4,\"height\":2,\"rx\":\"0.5\",\"transform\":\"matrix(0.866025 -0.5 0.866025 0.5 36.6055 44.5)\",\"fill\":\"currentColor\",\"fillOpacity\":\"0.3\"}],[\"$\",\"rect\",null,{\"width\":4,\"height\":2,\"rx\":\"0.5\",\"transform\":\"matrix(0.866025 -0.5 0.866025 0.5 55.6582 57.5)\",\"fill\":\"currentColor\",\"fillOpacity\":\"0.3\"}],[\"$\",\"rect\",null,{\"width\":4,\"height\":2,\"rx\":\"0.5\",\"transform\":\"matrix(0.866025 -0.5 0.866025 0.5 38.3379 47.5)\",\"fill\":\"currentColor\",\"fillOpacity\":\"0.3\"}],[\"$\",\"rect\",null,{\"width\":7,\"height\":2,\"rx\":\"0.5\",\"transform\":\"matrix(0.866025 -0.5 0.866025 0.5 39.2031 31)\",\"fill\":\"currentColor\",\"fillOpacity\":\"0.3\"}],[\"$\",\"rect\",null,{\"width\":5,\"height\":2,\"rx\":\"0.5\",\"transform\":\"matrix(0.866025 -0.5 0.866025 0.5 56.5234 41)\",\"fill\":\"currentColor\",\"fillOpacity\":\"0.3\"}],[\"$\",\"rect\",null,{\"width\":6,\"height\":2,\"rx\":\"0.5\",\"transform\":\"matrix(0.866025 -0.5 0.866025 0.5 37.4727 36)\",\"fill\":\"currentColor\",\"fillOpacity\":\"0.3\"}],[\"$\",\"rect\",null,{\"width\":6,\"height\":2,\"rx\":\"0.5\",\"transform\":\"matrix(0.866025 -0.5 0.866025 0.5 54.793 46)\",\"fill\":\"currentColor\",\"fillOpacity\":\"0.3\"}],[\"$\",\"rect\",null,{\"width\":9,\"height\":2,\"rx\":\"0.5\",\"transform\":\"matrix(0.866025 -0.5 0.866025 0.5 40.0703 38.5)\",\"fill\":\"currentColor\",\"fillOpacity\":\"0.3\"}],[\"$\",\"rect\",null,{\"width\":9,\"height\":2,\"rx\":\"0.5\",\"transform\":\"matrix(0.866025 -0.5 0.866025 0.5 57.3906 48.5)\",\"fill\":\"currentColor\",\"fillOpacity\":\"0.3\"}],[\"$\",\"rect\",null,{\"width\":4,\"height\":2,\"rx\":\"0.5\",\"transform\":\"matrix(0.866025 -0.5 0.866025 0.5 44.3984 32)\",\"fill\":\"currentColor\",\"fillOpacity\":\"0.3\"}],[\"$\",\"rect\",null,{\"width\":12,\"height\":2,\"rx\":\"0.5\",\"transform\":\"matrix(0.866025 -0.5 0.866025 0.5 61.7207 42)\",\"fill\":\"currentColor\",\"fillOpacity\":\"0.3\"}],[\"$\",\"rect\",null,{\"width\":7,\"height\":2,\"rx\":\"0.5\",\"transform\":\"matrix(0.866025 -0.5 0.866025 0.5 49.5957 33)\",\"fill\":\"currentColor\",\"fillOpacity\":\"0.3\"}],[\"$\",\"rect\",null,{\"width\":7,\"height\":2,\"rx\":\"0.5\",\"transform\":\"matrix(0.866025 -0.5 0.866025 0.5 66.918 43)\",\"fill\":\"currentColor\",\"fillOpacity\":\"0.3\"}],[\"$\",\"rect\",null,{\"width\":10,\"height\":2,\"rx\":\"0.5\",\"transform\":\"matrix(0.866025 -0.5 0.866025 0.5 57.3906 28.5)\",\"fill\":\"currentColor\",\"fillOpacity\":\"0.3\"}],[\"$\",\"rect\",null,{\"width\":10,\"height\":2,\"rx\":\"0.5\",\"transform\":\"matrix(0.866025 -0.5 0.866025 0.5 74.7109 38.5)\",\"fill\":\"currentColor\",\"fillOpacity\":\"0.3\"}]]}],[\"$\",\"defs\",null,{\"children\":[\"$\",\"clipPath\",null,{\"id\":\"clip0_408_5776\",\"children\":[\"$\",\"rect\",null,{\"width\":112,\"height\":72,\"fill\":\"var(--site-background)\"}]}]}]]}]}],[\"$\",\"div\",null,{\"children\":[[\"$\",\"span\",null,{\"className\":\"text-xl/10 font-medium text-gray-950 @md:text-2xl/10 dark:text-white\",\"children\":\"CSS variables\"}],[\"$\",\"p\",null,{\"className\":\"max-w-xl text-sm/7 text-gray-600 dark:text-gray-400\",\"children\":\"Customizing your theme is as simple as creating a few CSS variables.\"}]]}]]}],[\"$\",\"div\",null,{\"className\":\"flex-1\"}]],[\"$\",\"div\",null,{\"className\":\"h-112 p-4 sm:p-8 relative overflow-hidden rounded-lg bg-gray-950/[2.5%] after:pointer-events-none after:absolute after:inset-0 after:rounded-lg after:inset-ring after:inset-ring-gray-950/5 dark:after:inset-ring-white/10 bg-[image:radial-gradient(var(--pattern-fg)_1px,_transparent_0)] bg-[size:10px_10px] bg-fixed [--pattern-fg:var(--color-gray-950)]/5 dark:[--pattern-fg:var(--color-white)]/10\",\"children\":[\"$\",\"div\",null,{\"className\":\"-mr-16 -mb-16\",\"children\":[\"$\",\"div\",null,{\"className\":\"rounded-xl bg-gray-950\",\"children\":[\"$\",\"div\",null,{\"className\":\"rounded-xl p-1 text-sm scheme-dark dark:inset-ring dark:inset-ring-white/10\",\"children\":[[\"$\",\"div\",null,{\"className\":\"flex gap-2 p-2\",\"children\":[[\"$\",\"span\",null,{\"className\":\"size-3 rounded-full bg-white/20\"}],[\"$\",\"span\",null,{\"className\":\"size-3 rounded-full bg-white/20\"}],[\"$\",\"span\",null,{\"className\":\"size-3 rounded-full bg-white/20\"}]]}],[\"$\",\"div\",null,{\"className\":\"with-line-numbers text-[13px]/6 *:*:p-3!\",\"children\":[\"$\",\"div\",null,{\"className\":\"*:flex *:*:max-w-none *:*:shrink-0 *:*:grow *:overflow-auto *:rounded-lg *:bg-white/10! *:p-5 dark:*:bg-white/5! **:[.line]:isolate **:[.line]:not-last:min-h-[1lh] *:inset-ring *:inset-ring-white/10 dark:*:inset-ring-white/5\",\"dangerouslySetInnerHTML\":{\"__html\":\"$b\"}}]}]]}]}]}]}]]}],[\"$\",\"div\",null,{\"className\":\"@container isolate flex flex-col gap-2 overflow-hidden rounded-2xl bg-white p-2 outline outline-gray-950/5 dark:bg-gray-950 dark:outline-white/10 col-span-full xl:col-span-18\",\"children\":[[[\"$\",\"div\",null,{\"className\":\"flex flex-col gap-6 p-6 @md:flex-row @md:gap-x-8 @md:p-8\",\"children\":[[\"$\",\"div\",null,{\"className\":\"flex h-18 w-28 shrink-0 items-center justify-center\",\"children\":[\"$\",\"svg\",null,{\"className\":\"text-gray-950 [--site-background:var(--color-white)] dark:text-white dark:[--site-background:var(--color-gray-950)]\",\"width\":112,\"height\":72,\"viewBox\":\"0 0 112 72\",\"fill\":\"none\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"children\":[[\"$\",\"g\",null,{\"clipPath\":\"url(#clip0_505_21654)\",\"children\":[[\"$\",\"rect\",null,{\"width\":112,\"height\":72,\"fill\":\"var(--site-background)\"}],[\"$\",\"path\",null,{\"d\":\"M61.0051 60.7787L108.637 33.2787C109.114 33.0031 109.353 32.6421 109.354 32.2809L109.354 30.2774C109.353 29.9159 109.114 29.5545 108.637 29.2787L96.5122 22.2787C95.5556 21.7264 94.0046 21.7264 93.0481 22.2787L45.4167 49.7787C44.9515 50.0473 44.7125 50.397 44.6998 50.749L44.6998 52.749C44.6863 53.1208 44.9253 53.495 45.4167 53.7787L57.541 60.7787C58.4976 61.331 60.0485 61.331 61.0051 60.7787Z\",\"fill\":\"var(--site-background)\"}],[\"$\",\"path\",null,{\"d\":\"M109.352 30.2776C109.351 29.9161 109.112 29.5548 108.635 29.279L96.5102 22.279C95.5536 21.7267 94.0027 21.7267 93.0461 22.279L45.4147 49.779C44.9495 50.0475 44.7105 50.3973 44.6978 50.7492M109.352 30.2776C109.353 30.64 109.113 31.0025 108.635 31.279L61.0032 58.779C60.0466 59.3312 58.4956 59.3312 57.5391 58.779L45.4147 51.779C44.9233 51.4953 44.6844 51.121 44.6978 50.7492M109.352 30.2776L109.352 32.2811C109.351 32.6423 109.112 33.0034 108.635 33.279L61.0032 60.779C60.0466 61.3312 58.4956 61.3312 57.5391 60.779L45.4147 53.779C44.9233 53.4953 44.6844 53.121 44.6978 52.7492L44.6978 50.7492\",\"stroke\":\"currentColor\"}],[\"$\",\"path\",null,{\"d\":\"M92.6147 22.5293C92.3755 22.3912 91.9878 22.3912 91.7486 22.5293C91.5095 22.6674 91.5095 22.8912 91.7486 23.0293L92.6147 22.5293ZM91.7486 23.0293L107.337 32.0293L108.203 31.5293L92.6147 22.5293L91.7486 23.0293Z\",\"fill\":\"currentColor\",\"fillOpacity\":\"0.3\"}],[\"$\",\"path\",null,{\"d\":\"M86.5522 26.0293C86.313 25.8912 85.9253 25.8912 85.6861 26.0293C85.447 26.1674 85.447 26.3912 85.6861 26.5293L86.5522 26.0293ZM85.6861 26.5293L101.275 35.5293L102.141 35.0293L86.5522 26.0293L85.6861 26.5293Z\",\"fill\":\"currentColor\",\"fillOpacity\":\"0.3\"}],[\"$\",\"path\",null,{\"d\":\"M83.9545 27.5293C83.7154 27.3912 83.3276 27.3912 83.0885 27.5293C82.8493 27.6674 82.8493 27.8912 83.0885 28.0293L83.9545 27.5293ZM83.0885 28.0293L98.6769 37.0293L99.543 36.5293L83.9545 27.5293L83.0885 28.0293Z\",\"fill\":\"currentColor\",\"fillOpacity\":\"0.3\"}],[\"$\",\"path\",null,{\"d\":\"M75.2943 32.5293C75.0552 32.3912 74.6675 32.3912 74.4283 32.5293C74.1892 32.6674 74.1892 32.8912 74.4283 33.0293L75.2943 32.5293ZM74.4283 33.0293L90.0168 42.0293L90.8828 41.5293L75.2943 32.5293L74.4283 33.0293Z\",\"fill\":\"currentColor\",\"fillOpacity\":\"0.3\"}],[\"$\",\"path\",null,{\"d\":\"M66.6322 37.5293C66.3931 37.3912 66.0054 37.3912 65.7662 37.5293C65.5271 37.6674 65.5271 37.8912 65.7662 38.0293L66.6322 37.5293ZM65.7662 38.0293L81.3547 47.0293L82.2207 46.5293L66.6322 37.5293L65.7662 38.0293Z\",\"fill\":\"currentColor\",\"fillOpacity\":\"0.3\"}],[\"$\",\"path\",null,{\"d\":\"M60.5717 41.0293C60.3325 40.8912 59.9448 40.8912 59.7057 41.0293C59.4665 41.1674 59.4665 41.3912 59.7057 41.5293L60.5717 41.0293ZM59.7057 41.5293L75.2941 50.5293L76.1601 50.0293L60.5717 41.0293L59.7057 41.5293Z\",\"fill\":\"currentColor\",\"fillOpacity\":\"0.3\"}],[\"$\",\"path\",null,{\"d\":\"M57.9721 42.5293C57.7329 42.3912 57.3452 42.3912 57.106 42.5293C56.8669 42.6674 56.8669 42.8912 57.106 43.0293L57.9721 42.5293ZM57.106 43.0293L72.6945 52.0293L73.5605 51.5293L57.9721 42.5293L57.106 43.0293Z\",\"fill\":\"currentColor\",\"fillOpacity\":\"0.3\"}],[\"$\",\"path\",null,{\"d\":\"M51.9115 46.0293C51.6724 45.8912 51.2846 45.8912 51.0455 46.0293C50.8064 46.1674 50.8064 46.3912 51.0455 46.5293L51.9115 46.0293ZM51.0455 46.5293L66.634 55.5293L67.5 55.0293L51.9115 46.0293L51.0455 46.5293Z\",\"fill\":\"currentColor\",\"fillOpacity\":\"0.3\"}],[\"$\",\"path\",null,{\"d\":\"M77.892 31.0293C77.6529 30.8912 77.2651 30.8912 77.026 31.0293C76.7868 31.1674 76.7868 31.3912 77.026 31.5293L77.892 31.0293ZM77.026 31.5293L92.6144 40.5293L93.4805 40.0293L77.892 31.0293L77.026 31.5293Z\",\"fill\":\"currentColor\",\"fillOpacity\":\"0.3\"}],[\"$\",\"path\",null,{\"d\":\"M69.2318 36.0293C68.9927 35.8912 68.605 35.8912 68.3658 36.0293C68.1267 36.1674 68.1267 36.3912 68.3658 36.5293L69.2318 36.0293ZM68.3658 36.5293L83.9543 45.5293L84.8203 45.0293L69.2318 36.0293L68.3658 36.5293Z\",\"fill\":\"currentColor\",\"fillOpacity\":\"0.3\"}],[\"$\",\"path\",null,{\"d\":\"M63.806 57.8106L81.2403 20.2449C81.3094 20.096 81.3347 19.9463 81.3207 19.8003L81.3207 17.8004C81.2637 17.2067 80.5572 16.6751 79.5083 16.5128L62.9461 13.9506C61.6394 13.7485 60.2962 14.1962 59.9461 14.9506L42.5118 52.5163C42.4366 52.6785 42.4133 52.8416 42.4361 52.9998L42.4361 54.9998C42.5195 55.5776 43.218 56.0897 44.2439 56.2484L60.806 58.8106C62.1128 59.0127 63.4559 58.565 63.806 57.8106Z\",\"fill\":\"var(--site-background)\"}],[\"$\",\"path\",null,{\"d\":\"M42.5118 54.5163C42.4366 54.6785 42.4133 54.8416 42.4361 54.9998M81.3207 17.8004C81.2637 17.2067 80.5572 16.6751 79.5083 16.5128L62.9461 13.9506C61.6394 13.7485 60.2962 14.1962 59.9461 14.9506L42.5118 52.5163C42.4366 52.6785 42.4133 52.8416 42.4361 52.9998M81.3207 17.8004C81.3347 17.9463 81.3094 18.096 81.2403 18.2449L63.806 55.8106C63.4559 56.565 62.1128 57.0127 60.806 56.8106L44.2439 54.2484C43.218 54.0897 42.5195 53.5776 42.4361 52.9998M81.3207 17.8004L81.3207 19.8003C81.3347 19.9463 81.3094 20.096 81.2403 20.2449L63.806 57.8106C63.4559 58.565 62.1128 59.0127 60.806 58.8106L44.2439 56.2484C43.218 56.0897 42.5195 55.5776 42.4361 54.9998M42.4361 52.9998L42.4361 54.9998\",\"stroke\":\"currentColor\"}],[\"$\",\"path\",null,{\"d\":\"M59.627 15.6328L80.9212 18.927\",\"stroke\":\"currentColor\",\"strokeOpacity\":\"0.3\"}],[\"$\",\"path\",null,{\"d\":\"M57.4082 20.4141L78.7024 23.7083\",\"stroke\":\"currentColor\",\"strokeOpacity\":\"0.3\"}],[\"$\",\"path\",null,{\"d\":\"M56.457 22.4629L77.7513 25.7571\",\"stroke\":\"currentColor\",\"strokeOpacity\":\"0.3\"}],[\"$\",\"path\",null,{\"d\":\"M53.2871 29.2932L74.5813 32.5874\",\"stroke\":\"currentColor\",\"strokeOpacity\":\"0.3\"}],[\"$\",\"path\",null,{\"d\":\"M50.1172 36.1233L71.4114 39.4175\",\"stroke\":\"currentColor\",\"strokeOpacity\":\"0.3\"}],[\"$\",\"path\",null,{\"d\":\"M47.8984 40.9043L69.1927 44.1985\",\"stroke\":\"currentColor\",\"strokeOpacity\":\"0.3\"}],[\"$\",\"path\",null,{\"d\":\"M46.9473 42.9534L68.2415 46.2476\",\"stroke\":\"currentColor\",\"strokeOpacity\":\"0.3\"}],[\"$\",\"path\",null,{\"d\":\"M44.7285 47.7344L66.0227 51.0286\",\"stroke\":\"currentColor\",\"strokeOpacity\":\"0.3\"}],[\"$\",\"path\",null,{\"d\":\"M54.2383 27.2441L75.5325 30.5384\",\"stroke\":\"currentColor\",\"strokeOpacity\":\"0.3\"}],[\"$\",\"path\",null,{\"d\":\"M51.0684 34.0742L72.3626 37.3684\",\"stroke\":\"currentColor\",\"strokeOpacity\":\"0.3\"}],[\"$\",\"path\",null,{\"d\":\"M63.653 55.8955L47.0908 58.4576C45.7841 58.6598 44.441 58.2121 44.0908 57.4576L26.6565 19.8919C26.5957 19.7609 26.5689 19.6292 26.5728 19.5L26.5723 17.5C26.5912 16.8854 27.3082 16.3268 28.388 16.1598L44.9502 13.5976C46.2569 13.3955 47.6 13.8432 47.9502 14.5976L65.3845 52.1633C65.4367 52.2757 65.4638 52.3886 65.468 52.5L65.468 54.4872C65.4695 54.516 65.4695 54.5448 65.468 54.5734C65.4356 55.1809 64.7221 55.7301 63.653 55.8955Z\",\"fill\":\"var(--site-background)\"}],[\"$\",\"path\",null,{\"d\":\"M65.3851 54.1634C65.4487 54.3006 65.4752 54.4385 65.468 54.5734M65.468 54.5734C65.4356 55.1809 64.7221 55.7301 63.653 55.8955L47.0908 58.4576C45.7841 58.6598 44.441 58.2121 44.0908 57.4576L26.6565 19.8919C26.5957 19.7609 26.5689 19.6292 26.5728 19.5L26.5723 17.5C26.5912 16.8854 27.3082 16.3268 28.388 16.1598L44.9502 13.5976C46.2569 13.3955 47.6 13.8432 47.9502 14.5976L65.3845 52.1633C65.4367 52.2757 65.4638 52.3886 65.468 52.5L65.468 54.5734Z\",\"stroke\":\"currentColor\"}],[\"$\",\"path\",null,{\"d\":\"M65.3854 54.1637C65.4491 54.3008 65.4756 54.4387 65.4684 54.5737M26.5726 17.5002C26.5916 16.8856 27.3086 16.3271 28.3884 16.16L44.9506 13.5979C46.2573 13.3957 47.6004 13.8434 47.9506 14.5979L65.3849 52.1636C65.437 52.276 65.4642 52.3889 65.4684 52.5002M26.5726 17.5002C26.5687 17.6294 26.5955 17.7611 26.6563 17.8921L44.0906 55.4578C44.4408 56.2122 45.7839 56.6599 47.0906 56.4578L63.6528 53.8956C64.7648 53.7236 65.4921 53.1364 65.4684 52.5002M26.5726 17.5002L26.5732 19.5002C26.5692 19.6294 26.5961 19.7611 26.6569 19.8922L44.0912 57.4579C44.4414 58.2123 45.7845 58.66 47.0912 58.4579L63.6534 55.8957C64.7225 55.7303 65.436 55.1811 65.4684 54.5737M65.4684 52.5002L65.4684 54.5737\",\"stroke\":\"currentColor\"}],[\"$\",\"path\",null,{\"d\":\"M26.9746 18.5747L48.2688 15.2805\",\"stroke\":\"currentColor\",\"strokeOpacity\":\"0.3\"}],[\"$\",\"path\",null,{\"d\":\"M29.1953 23.356L50.4895 20.0617\",\"stroke\":\"currentColor\",\"strokeOpacity\":\"0.3\"}],[\"$\",\"path\",null,{\"d\":\"M30.1445 25.405L51.4388 22.1108\",\"stroke\":\"currentColor\",\"strokeOpacity\":\"0.3\"}],[\"$\",\"path\",null,{\"d\":\"M33.3145 32.2351L54.6087 28.9409\",\"stroke\":\"currentColor\",\"strokeOpacity\":\"0.3\"}],[\"$\",\"path\",null,{\"d\":\"M36.4844 39.0652L57.7786 35.771\",\"stroke\":\"currentColor\",\"strokeOpacity\":\"0.3\"}],[\"$\",\"path\",null,{\"d\":\"M38.7031 43.8462L59.9974 40.552\",\"stroke\":\"currentColor\",\"strokeOpacity\":\"0.3\"}],[\"$\",\"path\",null,{\"d\":\"M39.6543 45.8953L60.9485 42.601\",\"stroke\":\"currentColor\",\"strokeOpacity\":\"0.3\"}],[\"$\",\"path\",null,{\"d\":\"M41.873 50.6765L63.1673 47.3823\",\"stroke\":\"currentColor\",\"strokeOpacity\":\"0.3\"}],[\"$\",\"path\",null,{\"d\":\"M32.3652 30.186L53.6595 26.8918\",\"stroke\":\"currentColor\",\"strokeOpacity\":\"0.3\"}],[\"$\",\"path\",null,{\"d\":\"M35.5352 37.0161L56.8294 33.7219\",\"stroke\":\"currentColor\",\"strokeOpacity\":\"0.3\"}],[\"$\",\"path\",null,{\"d\":\"M53.2094 59.2794L65.3338 52.2794C65.8045 52.0076 66.0436 51.6527 66.051 51.2965L66.0515 49.2665C66.0461 48.9089 65.8072 48.5523 65.3346 48.2794L17.7032 20.7794C16.7466 20.2272 15.1957 20.2272 14.2391 20.7794L2.11471 27.7794C1.66285 28.0403 1.42425 28.3778 1.3991 28.7195V30.715C1.36899 31.0981 1.60721 31.4869 2.11392 31.7794L49.7453 59.2794C50.7019 59.8317 52.2528 59.8317 53.2094 59.2794Z\",\"fill\":\"var(--site-background)\"}],[\"$\",\"path\",null,{\"d\":\"M1.39715 28.7192C1.4223 28.3775 1.66089 28.0401 2.11276 27.7792L14.2371 20.7792C15.1937 20.2269 16.7446 20.2269 17.7012 20.7792L65.3326 48.2792C65.8052 48.5521 66.0441 48.9087 66.0496 49.2663M1.39715 28.7192C1.36906 29.1009 1.60725 29.4878 2.11197 29.7792L49.7442 57.2792C50.7007 57.8315 52.2517 57.8315 53.2083 57.2792L65.3318 50.2792C65.8158 49.9998 66.0551 49.6325 66.0496 49.2663M1.39715 28.7192V30.7147C1.36704 31.0978 1.60526 31.4867 2.11197 31.7792L49.7434 59.2792C50.6999 59.8315 52.2509 59.8315 53.2075 59.2792L65.3318 52.2792C65.8026 52.0074 66.0417 51.6525 66.0491 51.2963L66.0496 49.2663\",\"stroke\":\"currentColor\"}],[\"$\",\"path\",null,{\"d\":\"M19.0039 21.5293C19.243 21.3912 19.243 21.1674 19.0039 21.0293C18.7647 20.8912 18.377 20.8912 18.1379 21.0293L19.0039 21.5293ZM3.41543 30.5293L19.0039 21.5293L18.1379 21.0293L2.54941 30.0293L3.41543 30.5293Z\",\"fill\":\"currentColor\",\"fillOpacity\":\"0.3\"}],[\"$\",\"path\",null,{\"d\":\"M25.0644 25.0293C25.3036 24.8912 25.3036 24.6674 25.0644 24.5293C24.8253 24.3912 24.4376 24.3912 24.1984 24.5293L25.0644 25.0293ZM9.47598 34.0293L25.0644 25.0293L24.1984 24.5293L8.60996 33.5293L9.47598 34.0293Z\",\"fill\":\"currentColor\",\"fillOpacity\":\"0.3\"}],[\"$\",\"path\",null,{\"d\":\"M27.664 26.5293C27.9032 26.3912 27.9032 26.1674 27.664 26.0293C27.4249 25.8912 27.0372 25.8912 26.798 26.0293L27.664 26.5293ZM12.0756 35.5293L27.664 26.5293L26.798 26.0293L11.2096 35.0293L12.0756 35.5293Z\",\"fill\":\"currentColor\",\"fillOpacity\":\"0.3\"}],[\"$\",\"path\",null,{\"d\":\"M36.3242 31.5293C36.5634 31.3912 36.5634 31.1674 36.3242 31.0293C36.0851 30.8912 35.6973 30.8912 35.4582 31.0293L36.3242 31.5293ZM20.7357 40.5293L36.3242 31.5293L35.4582 31.0293L19.8697 40.0293L20.7357 40.5293Z\",\"fill\":\"currentColor\",\"fillOpacity\":\"0.3\"}],[\"$\",\"path\",null,{\"d\":\"M44.9844 36.5293C45.2235 36.3912 45.2235 36.1674 44.9844 36.0293C44.7452 35.8912 44.3575 35.8912 44.1183 36.0293L44.9844 36.5293ZM29.3959 45.5293L44.9844 36.5293L44.1183 36.0293L28.5299 45.0293L29.3959 45.5293Z\",\"fill\":\"currentColor\",\"fillOpacity\":\"0.3\"}],[\"$\",\"path\",null,{\"d\":\"M51.0469 40.0293C51.286 39.8912 51.286 39.6674 51.0469 39.5293C50.8077 39.3912 50.42 39.3912 50.1808 39.5293L51.0469 40.0293ZM35.4584 49.0293L51.0469 40.0293L50.1808 39.5293L34.5924 48.5293L35.4584 49.0293Z\",\"fill\":\"currentColor\",\"fillOpacity\":\"0.3\"}],[\"$\",\"path\",null,{\"d\":\"M53.6445 41.5293C53.8837 41.3912 53.8837 41.1674 53.6445 41.0293C53.4054 40.8912 53.0176 40.8912 52.7785 41.0293L53.6445 41.5293ZM38.0561 50.5293L53.6445 41.5293L52.7785 41.0293L37.19 50.0293L38.0561 50.5293Z\",\"fill\":\"currentColor\",\"fillOpacity\":\"0.3\"}],[\"$\",\"path\",null,{\"d\":\"M59.707 45.0293C59.9462 44.8912 59.9462 44.6674 59.707 44.5293C59.4679 44.3912 59.0801 44.3912 58.841 44.5293L59.707 45.0293ZM44.1186 54.0293L59.707 45.0293L58.841 44.5293L43.2525 53.5293L44.1186 54.0293Z\",\"fill\":\"currentColor\",\"fillOpacity\":\"0.3\"}],[\"$\",\"path\",null,{\"d\":\"M33.7265 30.0293C33.9657 29.8912 33.9657 29.6674 33.7265 29.5293C33.4874 29.3912 33.0997 29.3912 32.8605 29.5293L33.7265 30.0293ZM18.1381 39.0293L33.7265 30.0293L32.8605 29.5293L17.2721 38.5293L18.1381 39.0293Z\",\"fill\":\"currentColor\",\"fillOpacity\":\"0.3\"}],[\"$\",\"path\",null,{\"d\":\"M42.3867 35.0293C42.6259 34.8912 42.6259 34.6674 42.3867 34.5293C42.1476 34.3912 41.7598 34.3912 41.5207 34.5293L42.3867 35.0293ZM26.7982 44.0293L42.3867 35.0293L41.5207 34.5293L25.9322 43.5293L26.7982 44.0293Z\",\"fill\":\"currentColor\",\"fillOpacity\":\"0.3\"}],[\"$\",\"circle\",null,{\"cx\":\"1.5\",\"cy\":\"1.5\",\"r\":\"1.5\",\"transform\":\"matrix(0.866025 -0.5 0.866025 0.5 56.6738 49.2793)\",\"stroke\":\"currentColor\"}]]}],[\"$\",\"defs\",null,{\"children\":[\"$\",\"clipPath\",null,{\"id\":\"clip0_505_21654\",\"children\":[\"$\",\"rect\",null,{\"width\":112,\"height\":72,\"fill\":\"var(--site-background)\"}]}]}]]}]}],[\"$\",\"div\",null,{\"children\":[[\"$\",\"span\",null,{\"className\":\"text-xl/10 font-medium text-gray-950 @md:text-2xl/10 dark:text-white\",\"children\":\"P3 colors\"}],[\"$\",\"p\",null,{\"className\":\"max-w-xl text-sm/7 text-gray-600 dark:text-gray-400\",\"children\":\"The color palette now uses more vibrant wide gamut colors without you needing to understand what any of that even means.\"}]]}]]}],[\"$\",\"div\",null,{\"className\":\"flex-1\"}]],[\"$\",\"div\",null,{\"className\":\"h-112 p-4 sm:p-8 relative overflow-hidden rounded-lg bg-gray-950/[2.5%] after:pointer-events-none after:absolute after:inset-0 after:rounded-lg after:inset-ring after:inset-ring-gray-950/5 dark:after:inset-ring-white/10 bg-[image:radial-gradient(var(--pattern-fg)_1px,_transparent_0)] bg-[size:10px_10px] bg-fixed [--pattern-fg:var(--color-gray-950)]/5 dark:[--pattern-fg:var(--color-white)]/10\",\"children\":[\"$\",\"div\",null,{\"className\":\"mt-8 -mr-16 -mb-16 sm:mt-0\",\"children\":[\"$\",\"div\",null,{\"className\":\"group grid grid-cols-[repeat(var(--columns),var(--width))] gap-1.5 [--height:--spacing(6)] [--width:--spacing(10)] sm:[--height:--spacing(10)] sm:[--width:--spacing(16)]\",\"style\":{\"--sin\":0.7071067811865475,\"--cos\":0.7071067811865476,\"--angle\":\"-45deg\",\"--columns\":18},\"children\":[[\"$\",\"div\",null,{}],[[\"$\",\"div\",\"red\",{\"children\":[\"$\",\"div\",null,{\"className\":\"pointer-events-none h-[calc(var(--width)*var(--sin)+var(--height)*var(--cos))] w-[calc(var(--width)*var(--cos)+var(--height)*var(--sin))] translate-x-5 translate-y-2 sm:translate-x-8 sm:translate-y-5\",\"children\":[\"$\",\"div\",null,{\"className\":\"rotate-(--angle)\",\"children\":[\"$\",\"div\",null,{\"className\":\"font-mono text-[13px]/7 text-gray-950 dark:text-white\",\"children\":\"red\"}]}]}]}],[\"$\",\"div\",\"orange\",{\"children\":[\"$\",\"div\",null,{\"className\":\"pointer-events-none h-[calc(var(--width)*var(--sin)+var(--height)*var(--cos))] w-[calc(var(--width)*var(--cos)+var(--height)*var(--sin))] translate-x-5 translate-y-2 sm:translate-x-8 sm:translate-y-5\",\"children\":[\"$\",\"div\",null,{\"className\":\"rotate-(--angle)\",\"children\":[\"$\",\"div\",null,{\"className\":\"font-mono text-[13px]/7 text-gray-950 dark:text-white\",\"children\":\"orange\"}]}]}]}],[\"$\",\"div\",\"amber\",{\"children\":[\"$\",\"div\",null,{\"className\":\"pointer-events-none h-[calc(var(--width)*var(--sin)+var(--height)*var(--cos))] w-[calc(var(--width)*var(--cos)+var(--height)*var(--sin))] translate-x-5 translate-y-2 sm:translate-x-8 sm:translate-y-5\",\"children\":[\"$\",\"div\",null,{\"className\":\"rotate-(--angle)\",\"children\":[\"$\",\"div\",null,{\"className\":\"font-mono text-[13px]/7 text-gray-950 dark:text-white\",\"children\":\"amber\"}]}]}]}],[\"$\",\"div\",\"yellow\",{\"children\":[\"$\",\"div\",null,{\"className\":\"pointer-events-none h-[calc(var(--width)*var(--sin)+var(--height)*var(--cos))] w-[calc(var(--width)*var(--cos)+var(--height)*var(--sin))] translate-x-5 translate-y-2 sm:translate-x-8 sm:translate-y-5\",\"children\":[\"$\",\"div\",null,{\"className\":\"rotate-(--angle)\",\"children\":[\"$\",\"div\",null,{\"className\":\"font-mono text-[13px]/7 text-gray-950 dark:text-white\",\"children\":\"yellow\"}]}]}]}],[\"$\",\"div\",\"lime\",{\"children\":[\"$\",\"div\",null,{\"className\":\"pointer-events-none h-[calc(var(--width)*var(--sin)+var(--height)*var(--cos))] w-[calc(var(--width)*var(--cos)+var(--height)*var(--sin))] translate-x-5 translate-y-2 sm:translate-x-8 sm:translate-y-5\",\"children\":[\"$\",\"div\",null,{\"className\":\"rotate-(--angle)\",\"children\":[\"$\",\"div\",null,{\"className\":\"font-mono text-[13px]/7 text-gray-950 dark:text-white\",\"children\":\"lime\"}]}]}]}],[\"$\",\"div\",\"green\",{\"children\":[\"$\",\"div\",null,{\"className\":\"pointer-events-none h-[calc(var(--width)*var(--sin)+var(--height)*var(--cos))] w-[calc(var(--width)*var(--cos)+var(--height)*var(--sin))] translate-x-5 translate-y-2 sm:translate-x-8 sm:translate-y-5\",\"children\":[\"$\",\"div\",null,{\"className\":\"rotate-(--angle)\",\"children\":[\"$\",\"div\",null,{\"className\":\"font-mono text-[13px]/7 text-gray-950 dark:text-white\",\"children\":\"green\"}]}]}]}],[\"$\",\"div\",\"emerald\",{\"children\":[\"$\",\"div\",null,{\"className\":\"pointer-events-none h-[calc(var(--width)*var(--sin)+var(--height)*var(--cos))] w-[calc(var(--width)*var(--cos)+var(--height)*var(--sin))] translate-x-5 translate-y-2 sm:translate-x-8 sm:translate-y-5\",\"children\":[\"$\",\"div\",null,{\"className\":\"rotate-(--angle)\",\"children\":[\"$\",\"div\",null,{\"className\":\"font-mono text-[13px]/7 text-gray-950 dark:text-white\",\"children\":\"emerald\"}]}]}]}],[\"$\",\"div\",\"teal\",{\"children\":[\"$\",\"div\",null,{\"className\":\"pointer-events-none h-[calc(var(--width)*var(--sin)+var(--height)*var(--cos))] w-[calc(var(--width)*var(--cos)+var(--height)*var(--sin))] translate-x-5 translate-y-2 sm:translate-x-8 sm:translate-y-5\",\"children\":[\"$\",\"div\",null,{\"className\":\"rotate-(--angle)\",\"children\":[\"$\",\"div\",null,{\"className\":\"font-mono text-[13px]/7 text-gray-950 dark:text-white\",\"children\":\"teal\"}]}]}]}],[\"$\",\"div\",\"cyan\",{\"children\":[\"$\",\"div\",null,{\"className\":\"pointer-events-none h-[calc(var(--width)*var(--sin)+var(--height)*var(--cos))] w-[calc(var(--width)*var(--cos)+var(--height)*var(--sin))] translate-x-5 translate-y-2 sm:translate-x-8 sm:translate-y-5\",\"children\":[\"$\",\"div\",null,{\"className\":\"rotate-(--angle)\",\"children\":[\"$\",\"div\",null,{\"className\":\"font-mono text-[13px]/7 text-gray-950 dark:text-white\",\"children\":\"cyan\"}]}]}]}],[\"$\",\"div\",\"sky\",{\"children\":[\"$\",\"div\",null,{\"className\":\"pointer-events-none h-[calc(var(--width)*var(--sin)+var(--height)*var(--cos))] w-[calc(var(--width)*var(--cos)+var(--height)*var(--sin))] translate-x-5 translate-y-2 sm:translate-x-8 sm:translate-y-5\",\"children\":[\"$\",\"div\",null,{\"className\":\"rotate-(--angle)\",\"children\":[\"$\",\"div\",null,{\"className\":\"font-mono text-[13px]/7 text-gray-950 dark:text-white\",\"children\":\"sky\"}]}]}]}],[\"$\",\"div\",\"blue\",{\"children\":[\"$\",\"div\",null,{\"className\":\"pointer-events-none h-[calc(var(--width)*var(--sin)+var(--height)*var(--cos))] w-[calc(var(--width)*var(--cos)+var(--height)*var(--sin))] translate-x-5 translate-y-2 sm:translate-x-8 sm:translate-y-5\",\"children\":[\"$\",\"div\",null,{\"className\":\"rotate-(--angle)\",\"children\":[\"$\",\"div\",null,{\"className\":\"font-mono text-[13px]/7 text-gray-950 dark:text-white\",\"children\":\"blue\"}]}]}]}],[\"$\",\"div\",\"indigo\",{\"children\":[\"$\",\"div\",null,{\"className\":\"pointer-events-none h-[calc(var(--width)*var(--sin)+var(--height)*var(--cos))] w-[calc(var(--width)*var(--cos)+var(--height)*var(--sin))] translate-x-5 translate-y-2 sm:translate-x-8 sm:translate-y-5\",\"children\":[\"$\",\"div\",null,{\"className\":\"rotate-(--angle)\",\"children\":[\"$\",\"div\",null,{\"className\":\"font-mono text-[13px]/7 text-gray-950 dark:text-white\",\"children\":\"indigo\"}]}]}]}],[\"$\",\"div\",\"violet\",{\"children\":[\"$\",\"div\",null,{\"className\":\"pointer-events-none h-[calc(var(--width)*var(--sin)+var(--height)*var(--cos))] w-[calc(var(--width)*var(--cos)+var(--height)*var(--sin))] translate-x-5 translate-y-2 sm:translate-x-8 sm:translate-y-5\",\"children\":[\"$\",\"div\",null,{\"className\":\"rotate-(--angle)\",\"children\":[\"$\",\"div\",null,{\"className\":\"font-mono text-[13px]/7 text-gray-950 dark:text-white\",\"children\":\"violet\"}]}]}]}],[\"$\",\"div\",\"purple\",{\"children\":[\"$\",\"div\",null,{\"className\":\"pointer-events-none h-[calc(var(--width)*var(--sin)+var(--height)*var(--cos))] w-[calc(var(--width)*var(--cos)+var(--height)*var(--sin))] translate-x-5 translate-y-2 sm:translate-x-8 sm:translate-y-5\",\"children\":[\"$\",\"div\",null,{\"className\":\"rotate-(--angle)\",\"children\":[\"$\",\"div\",null,{\"className\":\"font-mono text-[13px]/7 text-gray-950 dark:text-white\",\"children\":\"purple\"}]}]}]}],[\"$\",\"div\",\"fuchsia\",{\"children\":[\"$\",\"div\",null,{\"className\":\"pointer-events-none h-[calc(var(--width)*var(--sin)+var(--height)*var(--cos))] w-[calc(var(--width)*var(--cos)+var(--height)*var(--sin))] translate-x-5 translate-y-2 sm:translate-x-8 sm:translate-y-5\",\"children\":[\"$\",\"div\",null,{\"className\":\"rotate-(--angle)\",\"children\":[\"$\",\"div\",null,{\"className\":\"font-mono text-[13px]/7 text-gray-950 dark:text-white\",\"children\":\"fuchsia\"}]}]}]}],[\"$\",\"div\",\"pink\",{\"children\":[\"$\",\"div\",null,{\"className\":\"pointer-events-none h-[calc(var(--width)*var(--sin)+var(--height)*var(--cos))] w-[calc(var(--width)*var(--cos)+var(--height)*var(--sin))] translate-x-5 translate-y-2 sm:translate-x-8 sm:translate-y-5\",\"children\":[\"$\",\"div\",null,{\"className\":\"rotate-(--angle)\",\"children\":[\"$\",\"div\",null,{\"className\":\"font-mono text-[13px]/7 text-gray-950 dark:text-white\",\"children\":\"pink\"}]}]}]}],[\"$\",\"div\",\"rose\",{\"children\":[\"$\",\"div\",null,{\"className\":\"pointer-events-none h-[calc(var(--width)*var(--sin)+var(--height)*var(--cos))] w-[calc(var(--width)*var(--cos)+var(--height)*var(--sin))] translate-x-5 translate-y-2 sm:translate-x-8 sm:translate-y-5\",\"children\":[\"$\",\"div\",null,{\"className\":\"rotate-(--angle)\",\"children\":[\"$\",\"div\",null,{\"className\":\"font-mono text-[13px]/7 text-gray-950 dark:text-white\",\"children\":\"rose\"}]}]}]}]],[[\"$\",\"$1\",\"950\",{\"children\":[[\"$\",\"div\",null,{\"className\":\"relative\",\"children\":[[\"$\",\"div\",null,{\"className\":\"absolute -mt-1 w-screen border-t border-gray-950/5 dark:border-white/10\"}],[\"$\",\"div\",null,{\"className\":\"flex h-(--height) w-(--width) items-center\",\"children\":[\"$\",\"div\",null,{\"className\":\"font-mono text-[13px]/7 text-gray-950 dark:text-white\",\"children\":950}]}]]}],[[\"$\",\"$Lc\",\"red\",{\"as\":\"div\",\"showDelayMs\":100,\"hideDelayMs\":0,\"className\":\"relative\",\"children\":[[[\"$\",\"div\",null,{\"className\":\"pointer-events-none absolute -top-1 -left-1 h-screen border-l border-gray-950/5 dark:border-white/10\"}],[\"$\",\"div\",null,{\"className\":\"pointer-events-none absolute -top-1 -left-1 h-16 origin-top-left translate-px rotate-225 border-l border-gray-950/5 sm:h-24 dark:border-white/10\"}]],[\"$\",\"$Ld\",null,{\"children\":[\"$\",\"div\",null,{\"style\":{\"--color\":\"var(--color-red-950)\"},\"className\":\"h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10\"}]}],[\"$\",\"$Le\",null,{\"as\":\"div\",\"anchor\":\"top\",\"className\":\"pointer-events-none z-10 translate-y-2 rounded-full border border-gray-950 bg-gray-950/90 py-0.5 pr-2 pb-1 pl-3 text-center font-mono text-xs/6 font-medium whitespace-nowrap text-white opacity-100 inset-ring inset-ring-white/10 transition-[opacity] starting:opacity-0\",\"children\":\"oklch(25.8% 0.092 26.042)\"}]]}],[\"$\",\"$Lc\",\"orange\",{\"as\":\"div\",\"showDelayMs\":100,\"hideDelayMs\":0,\"className\":\"relative\",\"children\":[[[\"$\",\"div\",null,{\"className\":\"pointer-events-none absolute -top-1 -left-1 h-screen border-l border-gray-950/5 dark:border-white/10\"}],[\"$\",\"div\",null,{\"className\":\"pointer-events-none absolute -top-1 -left-1 h-16 origin-top-left translate-px rotate-225 border-l border-gray-950/5 sm:h-24 dark:border-white/10\"}]],[\"$\",\"$Ld\",null,{\"children\":[\"$\",\"div\",null,{\"style\":{\"--color\":\"var(--color-orange-950)\"},\"className\":\"h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10\"}]}],[\"$\",\"$Le\",null,{\"as\":\"div\",\"anchor\":\"top\",\"className\":\"pointer-events-none z-10 translate-y-2 rounded-full border border-gray-950 bg-gray-950/90 py-0.5 pr-2 pb-1 pl-3 text-center font-mono text-xs/6 font-medium whitespace-nowrap text-white opacity-100 inset-ring inset-ring-white/10 transition-[opacity] starting:opacity-0\",\"children\":\"oklch(26.6% 0.079 36.259)\"}]]}],[\"$\",\"$Lc\",\"amber\",{\"as\":\"div\",\"showDelayMs\":100,\"hideDelayMs\":0,\"className\":\"relative\",\"children\":[[[\"$\",\"div\",null,{\"className\":\"pointer-events-none absolute -top-1 -left-1 h-screen border-l border-gray-950/5 dark:border-white/10\"}],[\"$\",\"div\",null,{\"className\":\"pointer-events-none absolute -top-1 -left-1 h-16 origin-top-left translate-px rotate-225 border-l border-gray-950/5 sm:h-24 dark:border-white/10\"}]],[\"$\",\"$Ld\",null,{\"children\":[\"$\",\"div\",null,{\"style\":{\"--color\":\"var(--color-amber-950)\"},\"className\":\"h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10\"}]}],[\"$\",\"$Le\",null,{\"as\":\"div\",\"anchor\":\"top\",\"className\":\"pointer-events-none z-10 translate-y-2 rounded-full border border-gray-950 bg-gray-950/90 py-0.5 pr-2 pb-1 pl-3 text-center font-mono text-xs/6 font-medium whitespace-nowrap text-white opacity-100 inset-ring inset-ring-white/10 transition-[opacity] starting:opacity-0\",\"children\":\"oklch(27.9% 0.077 45.635)\"}]]}],[\"$\",\"$Lc\",\"yellow\",{\"as\":\"div\",\"showDelayMs\":100,\"hideDelayMs\":0,\"className\":\"relative\",\"children\":[[[\"$\",\"div\",null,{\"className\":\"pointer-events-none absolute -top-1 -left-1 h-screen border-l border-gray-950/5 dark:border-white/10\"}],[\"$\",\"div\",null,{\"className\":\"pointer-events-none absolute -top-1 -left-1 h-16 origin-top-left translate-px rotate-225 border-l border-gray-950/5 sm:h-24 dark:border-white/10\"}]],[\"$\",\"$Ld\",null,{\"children\":[\"$\",\"div\",null,{\"style\":{\"--color\":\"var(--color-yellow-950)\"},\"className\":\"h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10\"}]}],[\"$\",\"$Le\",null,{\"as\":\"div\",\"anchor\":\"top\",\"className\":\"pointer-events-none z-10 translate-y-2 rounded-full border border-gray-950 bg-gray-950/90 py-0.5 pr-2 pb-1 pl-3 text-center font-mono text-xs/6 font-medium whitespace-nowrap text-white opacity-100 inset-ring inset-ring-white/10 transition-[opacity] starting:opacity-0\",\"children\":\"oklch(28.6% 0.066 53.813)\"}]]}],[\"$\",\"$Lc\",\"lime\",{\"as\":\"div\",\"showDelayMs\":100,\"hideDelayMs\":0,\"className\":\"relative\",\"children\":[[[\"$\",\"div\",null,{\"className\":\"pointer-events-none absolute -top-1 -left-1 h-screen border-l border-gray-950/5 dark:border-white/10\"}],[\"$\",\"div\",null,{\"className\":\"pointer-events-none absolute -top-1 -left-1 h-16 origin-top-left translate-px rotate-225 border-l border-gray-950/5 sm:h-24 dark:border-white/10\"}]],[\"$\",\"$Ld\",null,{\"children\":[\"$\",\"div\",null,{\"style\":{\"--color\":\"var(--color-lime-950)\"},\"className\":\"h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10\"}]}],[\"$\",\"$Le\",null,{\"as\":\"div\",\"anchor\":\"top\",\"className\":\"pointer-events-none z-10 translate-y-2 rounded-full border border-gray-950 bg-gray-950/90 py-0.5 pr-2 pb-1 pl-3 text-center font-mono text-xs/6 font-medium whitespace-nowrap text-white opacity-100 inset-ring inset-ring-white/10 transition-[opacity] starting:opacity-0\",\"children\":\"oklch(27.4% 0.072 132.109)\"}]]}],[\"$\",\"$Lc\",\"green\",{\"as\":\"div\",\"showDelayMs\":100,\"hideDelayMs\":0,\"className\":\"relative\",\"children\":[[[\"$\",\"div\",null,{\"className\":\"pointer-events-none absolute -top-1 -left-1 h-screen border-l border-gray-950/5 dark:border-white/10\"}],[\"$\",\"div\",null,{\"className\":\"pointer-events-none absolute -top-1 -left-1 h-16 origin-top-left translate-px rotate-225 border-l border-gray-950/5 sm:h-24 dark:border-white/10\"}]],[\"$\",\"$Ld\",null,{\"children\":[\"$\",\"div\",null,{\"style\":{\"--color\":\"var(--color-green-950)\"},\"className\":\"h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10\"}]}],[\"$\",\"$Le\",null,{\"as\":\"div\",\"anchor\":\"top\",\"className\":\"pointer-events-none z-10 translate-y-2 rounded-full border border-gray-950 bg-gray-950/90 py-0.5 pr-2 pb-1 pl-3 text-center font-mono text-xs/6 font-medium whitespace-nowrap text-white opacity-100 inset-ring inset-ring-white/10 transition-[opacity] starting:opacity-0\",\"children\":\"oklch(26.6% 0.065 152.934)\"}]]}],[\"$\",\"$Lc\",\"emerald\",{\"as\":\"div\",\"showDelayMs\":100,\"hideDelayMs\":0,\"className\":\"relative\",\"children\":[[[\"$\",\"div\",null,{\"className\":\"pointer-events-none absolute -top-1 -left-1 h-screen border-l border-gray-950/5 dark:border-white/10\"}],[\"$\",\"div\",null,{\"className\":\"pointer-events-none absolute -top-1 -left-1 h-16 origin-top-left translate-px rotate-225 border-l border-gray-950/5 sm:h-24 dark:border-white/10\"}]],[\"$\",\"$Ld\",null,{\"children\":[\"$\",\"div\",null,{\"style\":{\"--color\":\"var(--color-emerald-950)\"},\"className\":\"h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10\"}]}],[\"$\",\"$Le\",null,{\"as\":\"div\",\"anchor\":\"top\",\"className\":\"pointer-events-none z-10 translate-y-2 rounded-full border border-gray-950 bg-gray-950/90 py-0.5 pr-2 pb-1 pl-3 text-center font-mono text-xs/6 font-medium whitespace-nowrap text-white opacity-100 inset-ring inset-ring-white/10 transition-[opacity] starting:opacity-0\",\"children\":\"oklch(26.2% 0.051 172.552)\"}]]}],[\"$\",\"$Lc\",\"teal\",{\"as\":\"div\",\"showDelayMs\":100,\"hideDelayMs\":0,\"className\":\"relative\",\"children\":[[[\"$\",\"div\",null,{\"className\":\"pointer-events-none absolute -top-1 -left-1 h-screen border-l border-gray-950/5 dark:border-white/10\"}],[\"$\",\"div\",null,{\"className\":\"pointer-events-none absolute -top-1 -left-1 h-16 origin-top-left translate-px rotate-225 border-l border-gray-950/5 sm:h-24 dark:border-white/10\"}]],[\"$\",\"$Ld\",null,{\"children\":[\"$\",\"div\",null,{\"style\":{\"--color\":\"var(--color-teal-950)\"},\"className\":\"h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10\"}]}],[\"$\",\"$Le\",null,{\"as\":\"div\",\"anchor\":\"top\",\"className\":\"pointer-events-none z-10 translate-y-2 rounded-full border border-gray-950 bg-gray-950/90 py-0.5 pr-2 pb-1 pl-3 text-center font-mono text-xs/6 font-medium whitespace-nowrap text-white opacity-100 inset-ring inset-ring-white/10 transition-[opacity] starting:opacity-0\",\"children\":\"oklch(27.7% 0.046 192.524)\"}]]}],[\"$\",\"$Lc\",\"cyan\",{\"as\":\"div\",\"showDelayMs\":100,\"hideDelayMs\":0,\"className\":\"relative\",\"children\":[[[\"$\",\"div\",null,{\"className\":\"pointer-events-none absolute -top-1 -left-1 h-screen border-l border-gray-950/5 dark:border-white/10\"}],[\"$\",\"div\",null,{\"className\":\"pointer-events-none absolute -top-1 -left-1 h-16 origin-top-left translate-px rotate-225 border-l border-gray-950/5 sm:h-24 dark:border-white/10\"}]],[\"$\",\"$Ld\",null,{\"children\":[\"$\",\"div\",null,{\"style\":{\"--color\":\"var(--color-cyan-950)\"},\"className\":\"h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10\"}]}],[\"$\",\"$Le\",null,{\"as\":\"div\",\"anchor\":\"top\",\"className\":\"pointer-events-none z-10 translate-y-2 rounded-full border border-gray-950 bg-gray-950/90 py-0.5 pr-2 pb-1 pl-3 text-center font-mono text-xs/6 font-medium whitespace-nowrap text-white opacity-100 inset-ring inset-ring-white/10 transition-[opacity] starting:opacity-0\",\"children\":\"oklch(30.2% 0.056 229.695)\"}]]}],[\"$\",\"$Lc\",\"sky\",{\"as\":\"div\",\"showDelayMs\":100,\"hideDelayMs\":0,\"className\":\"relative\",\"children\":[[[\"$\",\"div\",null,{\"className\":\"pointer-events-none absolute -top-1 -left-1 h-screen border-l border-gray-950/5 dark:border-white/10\"}],[\"$\",\"div\",null,{\"className\":\"pointer-events-none absolute -top-1 -left-1 h-16 origin-top-left translate-px rotate-225 border-l border-gray-950/5 sm:h-24 dark:border-white/10\"}]],[\"$\",\"$Ld\",null,{\"children\":[\"$\",\"div\",null,{\"style\":{\"--color\":\"var(--color-sky-950)\"},\"className\":\"h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10\"}]}],[\"$\",\"$Le\",null,{\"as\":\"div\",\"anchor\":\"top\",\"className\":\"pointer-events-none z-10 translate-y-2 rounded-full border border-gray-950 bg-gray-950/90 py-0.5 pr-2 pb-1 pl-3 text-center font-mono text-xs/6 font-medium whitespace-nowrap text-white opacity-100 inset-ring inset-ring-white/10 transition-[opacity] starting:opacity-0\",\"children\":\"oklch(29.3% 0.066 243.157)\"}]]}],[\"$\",\"$Lc\",\"blue\",{\"as\":\"div\",\"showDelayMs\":100,\"hideDelayMs\":0,\"className\":\"relative\",\"children\":[[[\"$\",\"div\",null,{\"className\":\"pointer-events-none absolute -top-1 -left-1 h-screen border-l border-gray-950/5 dark:border-white/10\"}],[\"$\",\"div\",null,{\"className\":\"pointer-events-none absolute -top-1 -left-1 h-16 origin-top-left translate-px rotate-225 border-l border-gray-950/5 sm:h-24 dark:border-white/10\"}]],[\"$\",\"$Ld\",null,{\"children\":[\"$\",\"div\",null,{\"style\":{\"--color\":\"var(--color-blue-950)\"},\"className\":\"h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10\"}]}],[\"$\",\"$Le\",null,{\"as\":\"div\",\"anchor\":\"top\",\"className\":\"pointer-events-none z-10 translate-y-2 rounded-full border border-gray-950 bg-gray-950/90 py-0.5 pr-2 pb-1 pl-3 text-center font-mono text-xs/6 font-medium whitespace-nowrap text-white opacity-100 inset-ring inset-ring-white/10 transition-[opacity] starting:opacity-0\",\"children\":\"oklch(28.2% 0.091 267.935)\"}]]}],[\"$\",\"$Lc\",\"indigo\",{\"as\":\"div\",\"showDelayMs\":100,\"hideDelayMs\":0,\"className\":\"relative\",\"children\":[[[\"$\",\"div\",null,{\"className\":\"pointer-events-none absolute -top-1 -left-1 h-screen border-l border-gray-950/5 dark:border-white/10\"}],[\"$\",\"div\",null,{\"className\":\"pointer-events-none absolute -top-1 -left-1 h-16 origin-top-left translate-px rotate-225 border-l border-gray-950/5 sm:h-24 dark:border-white/10\"}]],[\"$\",\"$Ld\",null,{\"children\":[\"$\",\"div\",null,{\"style\":{\"--color\":\"var(--color-indigo-950)\"},\"className\":\"h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10\"}]}],[\"$\",\"$Le\",null,{\"as\":\"div\",\"anchor\":\"top\",\"className\":\"pointer-events-none z-10 translate-y-2 rounded-full border border-gray-950 bg-gray-950/90 py-0.5 pr-2 pb-1 pl-3 text-center font-mono text-xs/6 font-medium whitespace-nowrap text-white opacity-100 inset-ring inset-ring-white/10 transition-[opacity] starting:opacity-0\",\"children\":\"oklch(25.7% 0.09 281.288)\"}]]}],[\"$\",\"$Lc\",\"violet\",{\"as\":\"div\",\"showDelayMs\":100,\"hideDelayMs\":0,\"className\":\"relative\",\"children\":[[[\"$\",\"div\",null,{\"className\":\"pointer-events-none absolute -top-1 -left-1 h-screen border-l border-gray-950/5 dark:border-white/10\"}],[\"$\",\"div\",null,{\"className\":\"pointer-events-none absolute -top-1 -left-1 h-16 origin-top-left translate-px rotate-225 border-l border-gray-950/5 sm:h-24 dark:border-white/10\"}]],[\"$\",\"$Ld\",null,{\"children\":[\"$\",\"div\",null,{\"style\":{\"--color\":\"var(--color-violet-950)\"},\"className\":\"h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10\"}]}],[\"$\",\"$Le\",null,{\"as\":\"div\",\"anchor\":\"top\",\"className\":\"pointer-events-none z-10 translate-y-2 rounded-full border border-gray-950 bg-gray-950/90 py-0.5 pr-2 pb-1 pl-3 text-center font-mono text-xs/6 font-medium whitespace-nowrap text-white opacity-100 inset-ring inset-ring-white/10 transition-[opacity] starting:opacity-0\",\"children\":\"oklch(28.3% 0.141 291.089)\"}]]}],[\"$\",\"$Lc\",\"purple\",{\"as\":\"div\",\"showDelayMs\":100,\"hideDelayMs\":0,\"className\":\"relative\",\"children\":[[[\"$\",\"div\",null,{\"className\":\"pointer-events-none absolute -top-1 -left-1 h-screen border-l border-gray-950/5 dark:border-white/10\"}],[\"$\",\"div\",null,{\"className\":\"pointer-events-none absolute -top-1 -left-1 h-16 origin-top-left translate-px rotate-225 border-l border-gray-950/5 sm:h-24 dark:border-white/10\"}]],[\"$\",\"$Ld\",null,{\"children\":[\"$\",\"div\",null,{\"style\":{\"--color\":\"var(--color-purple-950)\"},\"className\":\"h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10\"}]}],[\"$\",\"$Le\",null,{\"as\":\"div\",\"anchor\":\"top\",\"className\":\"pointer-events-none z-10 translate-y-2 rounded-full border border-gray-950 bg-gray-950/90 py-0.5 pr-2 pb-1 pl-3 text-center font-mono text-xs/6 font-medium whitespace-nowrap text-white opacity-100 inset-ring inset-ring-white/10 transition-[opacity] starting:opacity-0\",\"children\":\"oklch(29.1% 0.149 302.717)\"}]]}],[\"$\",\"$Lc\",\"fuchsia\",{\"as\":\"div\",\"showDelayMs\":100,\"hideDelayMs\":0,\"className\":\"relative\",\"children\":[[[\"$\",\"div\",null,{\"className\":\"pointer-events-none absolute -top-1 -left-1 h-screen border-l border-gray-950/5 dark:border-white/10\"}],[\"$\",\"div\",null,{\"className\":\"pointer-events-none absolute -top-1 -left-1 h-16 origin-top-left translate-px rotate-225 border-l border-gray-950/5 sm:h-24 dark:border-white/10\"}]],[\"$\",\"$Ld\",null,{\"children\":[\"$\",\"div\",null,{\"style\":{\"--color\":\"var(--color-fuchsia-950)\"},\"className\":\"h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10\"}]}],[\"$\",\"$Le\",null,{\"as\":\"div\",\"anchor\":\"top\",\"className\":\"pointer-events-none z-10 translate-y-2 rounded-full border border-gray-950 bg-gray-950/90 py-0.5 pr-2 pb-1 pl-3 text-center font-mono text-xs/6 font-medium whitespace-nowrap text-white opacity-100 inset-ring inset-ring-white/10 transition-[opacity] starting:opacity-0\",\"children\":\"oklch(29.3% 0.136 325.661)\"}]]}],[\"$\",\"$Lc\",\"pink\",{\"as\":\"div\",\"showDelayMs\":100,\"hideDelayMs\":0,\"className\":\"relative\",\"children\":[[[\"$\",\"div\",null,{\"className\":\"pointer-events-none absolute -top-1 -left-1 h-screen border-l border-gray-950/5 dark:border-white/10\"}],[\"$\",\"div\",null,{\"className\":\"pointer-events-none absolute -top-1 -left-1 h-16 origin-top-left translate-px rotate-225 border-l border-gray-950/5 sm:h-24 dark:border-white/10\"}]],[\"$\",\"$Ld\",null,{\"children\":[\"$\",\"div\",null,{\"style\":{\"--color\":\"var(--color-pink-950)\"},\"className\":\"h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10\"}]}],[\"$\",\"$Le\",null,{\"as\":\"div\",\"anchor\":\"top\",\"className\":\"pointer-events-none z-10 translate-y-2 rounded-full border border-gray-950 bg-gray-950/90 py-0.5 pr-2 pb-1 pl-3 text-center font-mono text-xs/6 font-medium whitespace-nowrap text-white opacity-100 inset-ring inset-ring-white/10 transition-[opacity] starting:opacity-0\",\"children\":\"oklch(28.4% 0.109 3.907)\"}]]}],[\"$\",\"$Lc\",\"rose\",{\"as\":\"div\",\"showDelayMs\":100,\"hideDelayMs\":0,\"className\":\"relative\",\"children\":[[[\"$\",\"div\",null,{\"className\":\"pointer-events-none absolute -top-1 -left-1 h-screen border-l border-gray-950/5 dark:border-white/10\"}],[\"$\",\"div\",null,{\"className\":\"pointer-events-none absolute -top-1 -left-1 h-16 origin-top-left translate-px rotate-225 border-l border-gray-950/5 sm:h-24 dark:border-white/10\"}]],[\"$\",\"$Ld\",null,{\"children\":[\"$\",\"div\",null,{\"style\":{\"--color\":\"var(--color-rose-950)\"},\"className\":\"h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10\"}]}],[\"$\",\"$Le\",null,{\"as\":\"div\",\"anchor\":\"top\",\"className\":\"pointer-events-none z-10 translate-y-2 rounded-full border border-gray-950 bg-gray-950/90 py-0.5 pr-2 pb-1 pl-3 text-center font-mono text-xs/6 font-medium whitespace-nowrap text-white opacity-100 inset-ring inset-ring-white/10 transition-[opacity] starting:opacity-0\",\"children\":\"oklch(27.1% 0.105 12.094)\"}]]}]]]}],[\"$\",\"$1\",\"900\",{\"children\":[[\"$\",\"div\",null,{\"className\":\"relative\",\"children\":[[\"$\",\"div\",null,{\"className\":\"absolute -mt-1 w-screen border-t border-gray-950/5 dark:border-white/10\"}],[\"$\",\"div\",null,{\"className\":\"flex h-(--height) w-(--width) items-center\",\"children\":[\"$\",\"div\",null,{\"className\":\"font-mono text-[13px]/7 text-gray-950 dark:text-white\",\"children\":900}]}]]}],[[\"$\",\"$Lc\",\"red\",{\"as\":\"div\",\"showDelayMs\":100,\"hideDelayMs\":0,\"className\":\"relative\",\"children\":[false,[\"$\",\"$Ld\",null,{\"children\":[\"$\",\"div\",null,{\"style\":{\"--color\":\"var(--color-red-900)\"},\"className\":\"h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10\"}]}],[\"$\",\"$Le\",null,{\"as\":\"div\",\"anchor\":\"top\",\"className\":\"pointer-events-none z-10 translate-y-2 rounded-full border border-gray-950 bg-gray-950/90 py-0.5 pr-2 pb-1 pl-3 text-center font-mono text-xs/6 font-medium whitespace-nowrap text-white opacity-100 inset-ring inset-ring-white/10 transition-[opacity] starting:opacity-0\",\"children\":\"oklch(39.6% 0.141 25.723)\"}]]}],[\"$\",\"$Lc\",\"orange\",{\"as\":\"div\",\"showDelayMs\":100,\"hideDelayMs\":0,\"className\":\"relative\",\"children\":[false,[\"$\",\"$Ld\",null,{\"children\":[\"$\",\"div\",null,{\"style\":{\"--color\":\"var(--color-orange-900)\"},\"className\":\"h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10\"}]}],[\"$\",\"$Le\",null,{\"as\":\"div\",\"anchor\":\"top\",\"className\":\"pointer-events-none z-10 translate-y-2 rounded-full border border-gray-950 bg-gray-950/90 py-0.5 pr-2 pb-1 pl-3 text-center font-mono text-xs/6 font-medium whitespace-nowrap text-white opacity-100 inset-ring inset-ring-white/10 transition-[opacity] starting:opacity-0\",\"children\":\"oklch(40.8% 0.123 38.172)\"}]]}],[\"$\",\"$Lc\",\"amber\",{\"as\":\"div\",\"showDelayMs\":100,\"hideDelayMs\":0,\"className\":\"relative\",\"children\":[false,[\"$\",\"$Ld\",null,{\"children\":[\"$\",\"div\",null,{\"style\":{\"--color\":\"var(--color-amber-900)\"},\"className\":\"h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10\"}]}],[\"$\",\"$Le\",null,{\"as\":\"div\",\"anchor\":\"top\",\"className\":\"pointer-events-none z-10 translate-y-2 rounded-full border border-gray-950 bg-gray-950/90 py-0.5 pr-2 pb-1 pl-3 text-center font-mono text-xs/6 font-medium whitespace-nowrap text-white opacity-100 inset-ring inset-ring-white/10 transition-[opacity] starting:opacity-0\",\"children\":\"oklch(41.4% 0.112 45.904)\"}]]}],[\"$\",\"$Lc\",\"yellow\",{\"as\":\"div\",\"showDelayMs\":100,\"hideDelayMs\":0,\"className\":\"relative\",\"children\":[false,[\"$\",\"$Ld\",null,{\"children\":[\"$\",\"div\",null,{\"style\":{\"--color\":\"var(--color-yellow-900)\"},\"className\":\"h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10\"}]}],[\"$\",\"$Le\",null,{\"as\":\"div\",\"anchor\":\"top\",\"className\":\"pointer-events-none z-10 translate-y-2 rounded-full border border-gray-950 bg-gray-950/90 py-0.5 pr-2 pb-1 pl-3 text-center font-mono text-xs/6 font-medium whitespace-nowrap text-white opacity-100 inset-ring inset-ring-white/10 transition-[opacity] starting:opacity-0\",\"children\":\"oklch(42.1% 0.095 57.708)\"}]]}],[\"$\",\"$Lc\",\"lime\",{\"as\":\"div\",\"showDelayMs\":100,\"hideDelayMs\":0,\"className\":\"relative\",\"children\":[false,[\"$\",\"$Ld\",null,{\"children\":[\"$\",\"div\",null,{\"style\":{\"--color\":\"var(--color-lime-900)\"},\"className\":\"h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10\"}]}],[\"$\",\"$Le\",null,{\"as\":\"div\",\"anchor\":\"top\",\"className\":\"pointer-events-none z-10 translate-y-2 rounded-full border border-gray-950 bg-gray-950/90 py-0.5 pr-2 pb-1 pl-3 text-center font-mono text-xs/6 font-medium whitespace-nowrap text-white opacity-100 inset-ring inset-ring-white/10 transition-[opacity] starting:opacity-0\",\"children\":\"oklch(40.5% 0.101 131.063)\"}]]}],[\"$\",\"$Lc\",\"green\",{\"as\":\"div\",\"showDelayMs\":100,\"hideDelayMs\":0,\"className\":\"relative\",\"children\":[false,[\"$\",\"$Ld\",null,{\"children\":[\"$\",\"div\",null,{\"style\":{\"--color\":\"var(--color-green-900)\"},\"className\":\"h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10\"}]}],[\"$\",\"$Le\",null,{\"as\":\"div\",\"anchor\":\"top\",\"className\":\"pointer-events-none z-10 translate-y-2 rounded-full border border-gray-950 bg-gray-950/90 py-0.5 pr-2 pb-1 pl-3 text-center font-mono text-xs/6 font-medium whitespace-nowrap text-white opacity-100 inset-ring inset-ring-white/10 transition-[opacity] starting:opacity-0\",\"children\":\"oklch(39.3% 0.095 152.535)\"}]]}],[\"$\",\"$Lc\",\"emerald\",{\"as\":\"div\",\"showDelayMs\":100,\"hideDelayMs\":0,\"className\":\"relative\",\"children\":[false,[\"$\",\"$Ld\",null,{\"children\":[\"$\",\"div\",null,{\"style\":{\"--color\":\"var(--color-emerald-900)\"},\"className\":\"h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10\"}]}],[\"$\",\"$Le\",null,{\"as\":\"div\",\"anchor\":\"top\",\"className\":\"pointer-events-none z-10 translate-y-2 rounded-full border border-gray-950 bg-gray-950/90 py-0.5 pr-2 pb-1 pl-3 text-center font-mono text-xs/6 font-medium whitespace-nowrap text-white opacity-100 inset-ring inset-ring-white/10 transition-[opacity] starting:opacity-0\",\"children\":\"oklch(37.8% 0.077 168.94)\"}]]}],[\"$\",\"$Lc\",\"teal\",{\"as\":\"div\",\"showDelayMs\":100,\"hideDelayMs\":0,\"className\":\"relative\",\"children\":[false,[\"$\",\"$Ld\",null,{\"children\":[\"$\",\"div\",null,{\"style\":{\"--color\":\"var(--color-teal-900)\"},\"className\":\"h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10\"}]}],[\"$\",\"$Le\",null,{\"as\":\"div\",\"anchor\":\"top\",\"className\":\"pointer-events-none z-10 translate-y-2 rounded-full border border-gray-950 bg-gray-950/90 py-0.5 pr-2 pb-1 pl-3 text-center font-mono text-xs/6 font-medium whitespace-nowrap text-white opacity-100 inset-ring inset-ring-white/10 transition-[opacity] starting:opacity-0\",\"children\":\"oklch(38.6% 0.063 188.416)\"}]]}],[\"$\",\"$Lc\",\"cyan\",{\"as\":\"div\",\"showDelayMs\":100,\"hideDelayMs\":0,\"className\":\"relative\",\"children\":[false,[\"$\",\"$Ld\",null,{\"children\":[\"$\",\"div\",null,{\"style\":{\"--color\":\"var(--color-cyan-900)\"},\"className\":\"h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10\"}]}],[\"$\",\"$Le\",null,{\"as\":\"div\",\"anchor\":\"top\",\"className\":\"pointer-events-none z-10 translate-y-2 rounded-full border border-gray-950 bg-gray-950/90 py-0.5 pr-2 pb-1 pl-3 text-center font-mono text-xs/6 font-medium whitespace-nowrap text-white opacity-100 inset-ring inset-ring-white/10 transition-[opacity] starting:opacity-0\",\"children\":\"oklch(39.8% 0.07 227.392)\"}]]}],[\"$\",\"$Lc\",\"sky\",{\"as\":\"div\",\"showDelayMs\":100,\"hideDelayMs\":0,\"className\":\"relative\",\"children\":[false,[\"$\",\"$Ld\",null,{\"children\":[\"$\",\"div\",null,{\"style\":{\"--color\":\"var(--color-sky-900)\"},\"className\":\"h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10\"}]}],[\"$\",\"$Le\",null,{\"as\":\"div\",\"anchor\":\"top\",\"className\":\"pointer-events-none z-10 translate-y-2 rounded-full border border-gray-950 bg-gray-950/90 py-0.5 pr-2 pb-1 pl-3 text-center font-mono text-xs/6 font-medium whitespace-nowrap text-white opacity-100 inset-ring inset-ring-white/10 transition-[opacity] starting:opacity-0\",\"children\":\"oklch(39.1% 0.09 240.876)\"}]]}],[\"$\",\"$Lc\",\"blue\",{\"as\":\"div\",\"showDelayMs\":100,\"hideDelayMs\":0,\"className\":\"relative\",\"children\":[false,[\"$\",\"$Ld\",null,{\"children\":[\"$\",\"div\",null,{\"style\":{\"--color\":\"var(--color-blue-900)\"},\"className\":\"h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10\"}]}],[\"$\",\"$Le\",null,{\"as\":\"div\",\"anchor\":\"top\",\"className\":\"pointer-events-none z-10 translate-y-2 rounded-full border border-gray-950 bg-gray-950/90 py-0.5 pr-2 pb-1 pl-3 text-center font-mono text-xs/6 font-medium whitespace-nowrap text-white opacity-100 inset-ring inset-ring-white/10 transition-[opacity] starting:opacity-0\",\"children\":\"oklch(37.9% 0.146 265.522)\"}]]}],[\"$\",\"$Lc\",\"indigo\",{\"as\":\"div\",\"showDelayMs\":100,\"hideDelayMs\":0,\"className\":\"relative\",\"children\":[false,[\"$\",\"$Ld\",null,{\"children\":[\"$\",\"div\",null,{\"style\":{\"--color\":\"var(--color-indigo-900)\"},\"className\":\"h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10\"}]}],[\"$\",\"$Le\",null,{\"as\":\"div\",\"anchor\":\"top\",\"className\":\"pointer-events-none z-10 translate-y-2 rounded-full border border-gray-950 bg-gray-950/90 py-0.5 pr-2 pb-1 pl-3 text-center font-mono text-xs/6 font-medium whitespace-nowrap text-white opacity-100 inset-ring inset-ring-white/10 transition-[opacity] starting:opacity-0\",\"children\":\"oklch(35.9% 0.144 278.697)\"}]]}],[\"$\",\"$Lc\",\"violet\",{\"as\":\"div\",\"showDelayMs\":100,\"hideDelayMs\":0,\"className\":\"relative\",\"children\":[false,[\"$\",\"$Ld\",null,{\"children\":[\"$\",\"div\",null,{\"style\":{\"--color\":\"var(--color-violet-900)\"},\"className\":\"h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10\"}]}],[\"$\",\"$Le\",null,{\"as\":\"div\",\"anchor\":\"top\",\"className\":\"pointer-events-none z-10 translate-y-2 rounded-full border border-gray-950 bg-gray-950/90 py-0.5 pr-2 pb-1 pl-3 text-center font-mono text-xs/6 font-medium whitespace-nowrap text-white opacity-100 inset-ring inset-ring-white/10 transition-[opacity] starting:opacity-0\",\"children\":\"oklch(38% 0.189 293.745)\"}]]}],[\"$\",\"$Lc\",\"purple\",{\"as\":\"div\",\"showDelayMs\":100,\"hideDelayMs\":0,\"className\":\"relative\",\"children\":[false,[\"$\",\"$Ld\",null,{\"children\":[\"$\",\"div\",null,{\"style\":{\"--color\":\"var(--color-purple-900)\"},\"className\":\"h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10\"}]}],[\"$\",\"$Le\",null,{\"as\":\"div\",\"anchor\":\"top\",\"className\":\"pointer-events-none z-10 translate-y-2 rounded-full border border-gray-950 bg-gray-950/90 py-0.5 pr-2 pb-1 pl-3 text-center font-mono text-xs/6 font-medium whitespace-nowrap text-white opacity-100 inset-ring inset-ring-white/10 transition-[opacity] starting:opacity-0\",\"children\":\"oklch(38.1% 0.176 304.987)\"}]]}],[\"$\",\"$Lc\",\"fuchsia\",{\"as\":\"div\",\"showDelayMs\":100,\"hideDelayMs\":0,\"className\":\"relative\",\"children\":[false,[\"$\",\"$Ld\",null,{\"children\":[\"$\",\"div\",null,{\"style\":{\"--color\":\"var(--color-fuchsia-900)\"},\"className\":\"h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10\"}]}],[\"$\",\"$Le\",null,{\"as\":\"div\",\"anchor\":\"top\",\"className\":\"pointer-events-none z-10 translate-y-2 rounded-full border border-gray-950 bg-gray-950/90 py-0.5 pr-2 pb-1 pl-3 text-center font-mono text-xs/6 font-medium whitespace-nowrap text-white opacity-100 inset-ring inset-ring-white/10 transition-[opacity] starting:opacity-0\",\"children\":\"oklch(40.1% 0.17 325.612)\"}]]}],[\"$\",\"$Lc\",\"pink\",{\"as\":\"div\",\"showDelayMs\":100,\"hideDelayMs\":0,\"className\":\"relative\",\"children\":[false,[\"$\",\"$Ld\",null,{\"children\":[\"$\",\"div\",null,{\"style\":{\"--color\":\"var(--color-pink-900)\"},\"className\":\"h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10\"}]}],[\"$\",\"$Le\",null,{\"as\":\"div\",\"anchor\":\"top\",\"className\":\"pointer-events-none z-10 translate-y-2 rounded-full border border-gray-950 bg-gray-950/90 py-0.5 pr-2 pb-1 pl-3 text-center font-mono text-xs/6 font-medium whitespace-nowrap text-white opacity-100 inset-ring inset-ring-white/10 transition-[opacity] starting:opacity-0\",\"children\":\"oklch(40.8% 0.153 2.432)\"}]]}],[\"$\",\"$Lc\",\"rose\",{\"as\":\"div\",\"showDelayMs\":100,\"hideDelayMs\":0,\"className\":\"relative\",\"children\":[false,[\"$\",\"$Ld\",null,{\"children\":[\"$\",\"div\",null,{\"style\":{\"--color\":\"var(--color-rose-900)\"},\"className\":\"h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10\"}]}],[\"$\",\"$Le\",null,{\"as\":\"div\",\"anchor\":\"top\",\"className\":\"pointer-events-none z-10 translate-y-2 rounded-full border border-gray-950 bg-gray-950/90 py-0.5 pr-2 pb-1 pl-3 text-center font-mono text-xs/6 font-medium whitespace-nowrap text-white opacity-100 inset-ring inset-ring-white/10 transition-[opacity] starting:opacity-0\",\"children\":\"oklch(41% 0.159 10.272)\"}]]}]]]}],[\"$\",\"$1\",\"800\",{\"children\":[[\"$\",\"div\",null,{\"className\":\"relative\",\"children\":[[\"$\",\"div\",null,{\"className\":\"absolute -mt-1 w-screen border-t border-gray-950/5 dark:border-white/10\"}],[\"$\",\"div\",null,{\"className\":\"flex h-(--height) w-(--width) items-center\",\"children\":[\"$\",\"div\",null,{\"className\":\"font-mono text-[13px]/7 text-gray-950 dark:text-white\",\"children\":800}]}]]}],[[\"$\",\"$Lc\",\"red\",{\"as\":\"div\",\"showDelayMs\":100,\"hideDelayMs\":0,\"className\":\"relative\",\"children\":[false,[\"$\",\"$Ld\",null,{\"children\":[\"$\",\"div\",null,{\"style\":{\"--color\":\"var(--color-red-800)\"},\"className\":\"h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10\"}]}],[\"$\",\"$Le\",null,{\"as\":\"div\",\"anchor\":\"top\",\"className\":\"pointer-events-none z-10 translate-y-2 rounded-full border border-gray-950 bg-gray-950/90 py-0.5 pr-2 pb-1 pl-3 text-center font-mono text-xs/6 font-medium whitespace-nowrap text-white opacity-100 inset-ring inset-ring-white/10 transition-[opacity] starting:opacity-0\",\"children\":\"oklch(44.4% 0.177 26.899)\"}]]}],[\"$\",\"$Lc\",\"orange\",{\"as\":\"div\",\"showDelayMs\":100,\"hideDelayMs\":0,\"className\":\"relative\",\"children\":[false,[\"$\",\"$Ld\",null,{\"children\":[\"$\",\"div\",null,{\"style\":{\"--color\":\"var(--color-orange-800)\"},\"className\":\"h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10\"}]}],[\"$\",\"$Le\",null,{\"as\":\"div\",\"anchor\":\"top\",\"className\":\"pointer-events-none z-10 translate-y-2 rounded-full border border-gray-950 bg-gray-950/90 py-0.5 pr-2 pb-1 pl-3 text-center font-mono text-xs/6 font-medium whitespace-nowrap text-white opacity-100 inset-ring inset-ring-white/10 transition-[opacity] starting:opacity-0\",\"children\":\"oklch(47% 0.157 37.304)\"}]]}],[\"$\",\"$Lc\",\"amber\",{\"as\":\"div\",\"showDelayMs\":100,\"hideDelayMs\":0,\"className\":\"relative\",\"children\":[false,[\"$\",\"$Ld\",null,{\"children\":[\"$\",\"div\",null,{\"style\":{\"--color\":\"var(--color-amber-800)\"},\"className\":\"h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10\"}]}],[\"$\",\"$Le\",null,{\"as\":\"div\",\"anchor\":\"top\",\"className\":\"pointer-events-none z-10 translate-y-2 rounded-full border border-gray-950 bg-gray-950/90 py-0.5 pr-2 pb-1 pl-3 text-center font-mono text-xs/6 font-medium whitespace-nowrap text-white opacity-100 inset-ring inset-ring-white/10 transition-[opacity] starting:opacity-0\",\"children\":\"oklch(47.3% 0.137 46.201)\"}]]}],[\"$\",\"$Lc\",\"yellow\",{\"as\":\"div\",\"showDelayMs\":100,\"hideDelayMs\":0,\"className\":\"relative\",\"children\":[false,[\"$\",\"$Ld\",null,{\"children\":[\"$\",\"div\",null,{\"style\":{\"--color\":\"var(--color-yellow-800)\"},\"className\":\"h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10\"}]}],[\"$\",\"$Le\",null,{\"as\":\"div\",\"anchor\":\"top\",\"className\":\"pointer-events-none z-10 translate-y-2 rounded-full border border-gray-950 bg-gray-950/90 py-0.5 pr-2 pb-1 pl-3 text-center font-mono text-xs/6 font-medium whitespace-nowrap text-white opacity-100 inset-ring inset-ring-white/10 transition-[opacity] starting:opacity-0\",\"children\":\"oklch(47.6% 0.114 61.907)\"}]]}],[\"$\",\"$Lc\",\"lime\",{\"as\":\"div\",\"showDelayMs\":100,\"hideDelayMs\":0,\"className\":\"relative\",\"children\":[false,[\"$\",\"$Ld\",null,{\"children\":[\"$\",\"div\",null,{\"style\":{\"--color\":\"var(--color-lime-800)\"},\"className\":\"h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10\"}]}],[\"$\",\"$Le\",null,{\"as\":\"div\",\"anchor\":\"top\",\"className\":\"pointer-events-none z-10 translate-y-2 rounded-full border border-gray-950 bg-gray-950/90 py-0.5 pr-2 pb-1 pl-3 text-center font-mono text-xs/6 font-medium whitespace-nowrap text-white opacity-100 inset-ring inset-ring-white/10 transition-[opacity] starting:opacity-0\",\"children\":\"oklch(45.3% 0.124 130.933)\"}]]}],[\"$\",\"$Lc\",\"green\",{\"as\":\"div\",\"showDelayMs\":100,\"hideDelayMs\":0,\"className\":\"relative\",\"children\":[false,[\"$\",\"$Ld\",null,{\"children\":[\"$\",\"div\",null,{\"style\":{\"--color\":\"var(--color-green-800)\"},\"className\":\"h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10\"}]}],[\"$\",\"$Le\",null,{\"as\":\"div\",\"anchor\":\"top\",\"className\":\"pointer-events-none z-10 translate-y-2 rounded-full border border-gray-950 bg-gray-950/90 py-0.5 pr-2 pb-1 pl-3 text-center font-mono text-xs/6 font-medium whitespace-nowrap text-white opacity-100 inset-ring inset-ring-white/10 transition-[opacity] starting:opacity-0\",\"children\":\"oklch(44.8% 0.119 151.328)\"}]]}],[\"$\",\"$Lc\",\"emerald\",{\"as\":\"div\",\"showDelayMs\":100,\"hideDelayMs\":0,\"className\":\"relative\",\"children\":[false,[\"$\",\"$Ld\",null,{\"children\":[\"$\",\"div\",null,{\"style\":{\"--color\":\"var(--color-emerald-800)\"},\"className\":\"h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10\"}]}],[\"$\",\"$Le\",null,{\"as\":\"div\",\"anchor\":\"top\",\"className\":\"pointer-events-none z-10 translate-y-2 rounded-full border border-gray-950 bg-gray-950/90 py-0.5 pr-2 pb-1 pl-3 text-center font-mono text-xs/6 font-medium whitespace-nowrap text-white opacity-100 inset-ring inset-ring-white/10 transition-[opacity] starting:opacity-0\",\"children\":\"oklch(43.2% 0.095 166.913)\"}]]}],[\"$\",\"$Lc\",\"teal\",{\"as\":\"div\",\"showDelayMs\":100,\"hideDelayMs\":0,\"className\":\"relative\",\"children\":[false,[\"$\",\"$Ld\",null,{\"children\":[\"$\",\"div\",null,{\"style\":{\"--color\":\"var(--color-teal-800)\"},\"className\":\"h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10\"}]}],[\"$\",\"$Le\",null,{\"as\":\"div\",\"anchor\":\"top\",\"className\":\"pointer-events-none z-10 translate-y-2 rounded-full border border-gray-950 bg-gray-950/90 py-0.5 pr-2 pb-1 pl-3 text-center font-mono text-xs/6 font-medium whitespace-nowrap text-white opacity-100 inset-ring inset-ring-white/10 transition-[opacity] starting:opacity-0\",\"children\":\"oklch(43.7% 0.078 188.216)\"}]]}],[\"$\",\"$Lc\",\"cyan\",{\"as\":\"div\",\"showDelayMs\":100,\"hideDelayMs\":0,\"className\":\"relative\",\"children\":[false,[\"$\",\"$Ld\",null,{\"children\":[\"$\",\"div\",null,{\"style\":{\"--color\":\"var(--color-cyan-800)\"},\"className\":\"h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10\"}]}],[\"$\",\"$Le\",null,{\"as\":\"div\",\"anchor\":\"top\",\"className\":\"pointer-events-none z-10 translate-y-2 rounded-full border border-gray-950 bg-gray-950/90 py-0.5 pr-2 pb-1 pl-3 text-center font-mono text-xs/6 font-medium whitespace-nowrap text-white opacity-100 inset-ring inset-ring-white/10 transition-[opacity] starting:opacity-0\",\"children\":\"oklch(45% 0.085 224.283)\"}]]}],[\"$\",\"$Lc\",\"sky\",{\"as\":\"div\",\"showDelayMs\":100,\"hideDelayMs\":0,\"className\":\"relative\",\"children\":[false,[\"$\",\"$Ld\",null,{\"children\":[\"$\",\"div\",null,{\"style\":{\"--color\":\"var(--color-sky-800)\"},\"className\":\"h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10\"}]}],[\"$\",\"$Le\",null,{\"as\":\"div\",\"anchor\":\"top\",\"className\":\"pointer-events-none z-10 translate-y-2 rounded-full border border-gray-950 bg-gray-950/90 py-0.5 pr-2 pb-1 pl-3 text-center font-mono text-xs/6 font-medium whitespace-nowrap text-white opacity-100 inset-ring inset-ring-white/10 transition-[opacity] starting:opacity-0\",\"children\":\"oklch(44.3% 0.11 240.79)\"}]]}],[\"$\",\"$Lc\",\"blue\",{\"as\":\"div\",\"showDelayMs\":100,\"hideDelayMs\":0,\"className\":\"relative\",\"children\":[false,[\"$\",\"$Ld\",null,{\"children\":[\"$\",\"div\",null,{\"style\":{\"--color\":\"var(--color-blue-800)\"},\"className\":\"h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10\"}]}],[\"$\",\"$Le\",null,{\"as\":\"div\",\"anchor\":\"top\",\"className\":\"pointer-events-none z-10 translate-y-2 rounded-full border border-gray-950 bg-gray-950/90 py-0.5 pr-2 pb-1 pl-3 text-center font-mono text-xs/6 font-medium whitespace-nowrap text-white opacity-100 inset-ring inset-ring-white/10 transition-[opacity] starting:opacity-0\",\"children\":\"oklch(42.4% 0.199 265.638)\"}]]}],[\"$\",\"$Lc\",\"indigo\",{\"as\":\"div\",\"showDelayMs\":100,\"hideDelayMs\":0,\"className\":\"relative\",\"children\":[false,[\"$\",\"$Ld\",null,{\"children\":[\"$\",\"div\",null,{\"style\":{\"--color\":\"var(--color-indigo-800)\"},\"className\":\"h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10\"}]}],[\"$\",\"$Le\",null,{\"as\":\"div\",\"anchor\":\"top\",\"className\":\"pointer-events-none z-10 translate-y-2 rounded-full border border-gray-950 bg-gray-950/90 py-0.5 pr-2 pb-1 pl-3 text-center font-mono text-xs/6 font-medium whitespace-nowrap text-white opacity-100 inset-ring inset-ring-white/10 transition-[opacity] starting:opacity-0\",\"children\":\"oklch(39.8% 0.195 277.366)\"}]]}],[\"$\",\"$Lc\",\"violet\",{\"as\":\"div\",\"showDelayMs\":100,\"hideDelayMs\":0,\"className\":\"relative\",\"children\":[false,[\"$\",\"$Ld\",null,{\"children\":[\"$\",\"div\",null,{\"style\":{\"--color\":\"var(--color-violet-800)\"},\"className\":\"h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10\"}]}],[\"$\",\"$Le\",null,{\"as\":\"div\",\"anchor\":\"top\",\"className\":\"pointer-events-none z-10 translate-y-2 rounded-full border border-gray-950 bg-gray-950/90 py-0.5 pr-2 pb-1 pl-3 text-center font-mono text-xs/6 font-medium whitespace-nowrap text-white opacity-100 inset-ring inset-ring-white/10 transition-[opacity] starting:opacity-0\",\"children\":\"oklch(43.2% 0.232 292.759)\"}]]}],[\"$\",\"$Lc\",\"purple\",{\"as\":\"div\",\"showDelayMs\":100,\"hideDelayMs\":0,\"className\":\"relative\",\"children\":[false,[\"$\",\"$Ld\",null,{\"children\":[\"$\",\"div\",null,{\"style\":{\"--color\":\"var(--color-purple-800)\"},\"className\":\"h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10\"}]}],[\"$\",\"$Le\",null,{\"as\":\"div\",\"anchor\":\"top\",\"className\":\"pointer-events-none z-10 translate-y-2 rounded-full border border-gray-950 bg-gray-950/90 py-0.5 pr-2 pb-1 pl-3 text-center font-mono text-xs/6 font-medium whitespace-nowrap text-white opacity-100 inset-ring inset-ring-white/10 transition-[opacity] starting:opacity-0\",\"children\":\"oklch(43.8% 0.218 303.724)\"}]]}],[\"$\",\"$Lc\",\"fuchsia\",{\"as\":\"div\",\"showDelayMs\":100,\"hideDelayMs\":0,\"className\":\"relative\",\"children\":[false,[\"$\",\"$Ld\",null,{\"children\":[\"$\",\"div\",null,{\"style\":{\"--color\":\"var(--color-fuchsia-800)\"},\"className\":\"h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10\"}]}],[\"$\",\"$Le\",null,{\"as\":\"div\",\"anchor\":\"top\",\"className\":\"pointer-events-none z-10 translate-y-2 rounded-full border border-gray-950 bg-gray-950/90 py-0.5 pr-2 pb-1 pl-3 text-center font-mono text-xs/6 font-medium whitespace-nowrap text-white opacity-100 inset-ring inset-ring-white/10 transition-[opacity] starting:opacity-0\",\"children\":\"oklch(45.2% 0.211 324.591)\"}]]}],[\"$\",\"$Lc\",\"pink\",{\"as\":\"div\",\"showDelayMs\":100,\"hideDelayMs\":0,\"className\":\"relative\",\"children\":[false,[\"$\",\"$Ld\",null,{\"children\":[\"$\",\"div\",null,{\"style\":{\"--color\":\"var(--color-pink-800)\"},\"className\":\"h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10\"}]}],[\"$\",\"$Le\",null,{\"as\":\"div\",\"anchor\":\"top\",\"className\":\"pointer-events-none z-10 translate-y-2 rounded-full border border-gray-950 bg-gray-950/90 py-0.5 pr-2 pb-1 pl-3 text-center font-mono text-xs/6 font-medium whitespace-nowrap text-white opacity-100 inset-ring inset-ring-white/10 transition-[opacity] starting:opacity-0\",\"children\":\"oklch(45.9% 0.187 3.815)\"}]]}],[\"$\",\"$Lc\",\"rose\",{\"as\":\"div\",\"showDelayMs\":100,\"hideDelayMs\":0,\"className\":\"relative\",\"children\":[false,[\"$\",\"$Ld\",null,{\"children\":[\"$\",\"div\",null,{\"style\":{\"--color\":\"var(--color-rose-800)\"},\"className\":\"h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10\"}]}],[\"$\",\"$Le\",null,{\"as\":\"div\",\"anchor\":\"top\",\"className\":\"pointer-events-none z-10 translate-y-2 rounded-full border border-gray-950 bg-gray-950/90 py-0.5 pr-2 pb-1 pl-3 text-center font-mono text-xs/6 font-medium whitespace-nowrap text-white opacity-100 inset-ring inset-ring-white/10 transition-[opacity] starting:opacity-0\",\"children\":\"oklch(45.5% 0.188 13.697)\"}]]}]]]}],[\"$\",\"$1\",\"700\",{\"children\":[[\"$\",\"div\",null,{\"className\":\"relative\",\"children\":[[\"$\",\"div\",null,{\"className\":\"absolute -mt-1 w-screen border-t border-gray-950/5 dark:border-white/10\"}],[\"$\",\"div\",null,{\"className\":\"flex h-(--height) w-(--width) items-center\",\"children\":[\"$\",\"div\",null,{\"className\":\"font-mono text-[13px]/7 text-gray-950 dark:text-white\",\"children\":700}]}]]}],[[\"$\",\"$Lc\",\"red\",{\"as\":\"div\",\"showDelayMs\":100,\"hideDelayMs\":0,\"className\":\"relative\",\"children\":[false,[\"$\",\"$Ld\",null,{\"children\":[\"$\",\"div\",null,{\"style\":{\"--color\":\"var(--color-red-700)\"},\"className\":\"h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10\"}]}],[\"$\",\"$Le\",null,{\"as\":\"div\",\"anchor\":\"top\",\"className\":\"pointer-events-none z-10 translate-y-2 rounded-full border border-gray-950 bg-gray-950/90 py-0.5 pr-2 pb-1 pl-3 text-center font-mono text-xs/6 font-medium whitespace-nowrap text-white opacity-100 inset-ring inset-ring-white/10 transition-[opacity] starting:opacity-0\",\"children\":\"oklch(50.5% 0.213 27.518)\"}]]}],[\"$\",\"$Lc\",\"orange\",{\"as\":\"div\",\"showDelayMs\":100,\"hideDelayMs\":0,\"className\":\"relative\",\"children\":[false,[\"$\",\"$Ld\",null,{\"children\":[\"$\",\"div\",null,{\"style\":{\"--color\":\"var(--color-orange-700)\"},\"className\":\"h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10\"}]}],[\"$\",\"$Le\",null,{\"as\":\"div\",\"anchor\":\"top\",\"className\":\"pointer-events-none z-10 translate-y-2 rounded-full border border-gray-950 bg-gray-950/90 py-0.5 pr-2 pb-1 pl-3 text-center font-mono text-xs/6 font-medium whitespace-nowrap text-white opacity-100 inset-ring inset-ring-white/10 transition-[opacity] starting:opacity-0\",\"children\":\"oklch(55.3% 0.195 38.402)\"}]]}],[\"$\",\"$Lc\",\"amber\",{\"as\":\"div\",\"showDelayMs\":100,\"hideDelayMs\":0,\"className\":\"relative\",\"children\":[false,[\"$\",\"$Ld\",null,{\"children\":[\"$\",\"div\",null,{\"style\":{\"--color\":\"var(--color-amber-700)\"},\"className\":\"h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10\"}]}],[\"$\",\"$Le\",null,{\"as\":\"div\",\"anchor\":\"top\",\"className\":\"pointer-events-none z-10 translate-y-2 rounded-full border border-gray-950 bg-gray-950/90 py-0.5 pr-2 pb-1 pl-3 text-center font-mono text-xs/6 font-medium whitespace-nowrap text-white opacity-100 inset-ring inset-ring-white/10 transition-[opacity] starting:opacity-0\",\"children\":\"oklch(55.5% 0.163 48.998)\"}]]}],[\"$\",\"$Lc\",\"yellow\",{\"as\":\"div\",\"showDelayMs\":100,\"hideDelayMs\":0,\"className\":\"relative\",\"children\":[false,[\"$\",\"$Ld\",null,{\"children\":[\"$\",\"div\",null,{\"style\":{\"--color\":\"var(--color-yellow-700)\"},\"className\":\"h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10\"}]}],[\"$\",\"$Le\",null,{\"as\":\"div\",\"anchor\":\"top\",\"className\":\"pointer-events-none z-10 translate-y-2 rounded-full border border-gray-950 bg-gray-950/90 py-0.5 pr-2 pb-1 pl-3 text-center font-mono text-xs/6 font-medium whitespace-nowrap text-white opacity-100 inset-ring inset-ring-white/10 transition-[opacity] starting:opacity-0\",\"children\":\"oklch(55.4% 0.135 66.442)\"}]]}],[\"$\",\"$Lc\",\"lime\",{\"as\":\"div\",\"showDelayMs\":100,\"hideDelayMs\":0,\"className\":\"relative\",\"children\":[false,[\"$\",\"$Ld\",null,{\"children\":[\"$\",\"div\",null,{\"style\":{\"--color\":\"var(--color-lime-700)\"},\"className\":\"h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10\"}]}],[\"$\",\"$Le\",null,{\"as\":\"div\",\"anchor\":\"top\",\"className\":\"pointer-events-none z-10 translate-y-2 rounded-full border border-gray-950 bg-gray-950/90 py-0.5 pr-2 pb-1 pl-3 text-center font-mono text-xs/6 font-medium whitespace-nowrap text-white opacity-100 inset-ring inset-ring-white/10 transition-[opacity] starting:opacity-0\",\"children\":\"oklch(53.2% 0.157 131.589)\"}]]}],[\"$\",\"$Lc\",\"green\",{\"as\":\"div\",\"showDelayMs\":100,\"hideDelayMs\":0,\"className\":\"relative\",\"children\":[false,[\"$\",\"$Ld\",null,{\"children\":[\"$\",\"div\",null,{\"style\":{\"--color\":\"var(--color-green-700)\"},\"className\":\"h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10\"}]}],[\"$\",\"$Le\",null,{\"as\":\"div\",\"anchor\":\"top\",\"className\":\"pointer-events-none z-10 translate-y-2 rounded-full border border-gray-950 bg-gray-950/90 py-0.5 pr-2 pb-1 pl-3 text-center font-mono text-xs/6 font-medium whitespace-nowrap text-white opacity-100 inset-ring inset-ring-white/10 transition-[opacity] starting:opacity-0\",\"children\":\"oklch(52.7% 0.154 150.069)\"}]]}],[\"$\",\"$Lc\",\"emerald\",{\"as\":\"div\",\"showDelayMs\":100,\"hideDelayMs\":0,\"className\":\"relative\",\"children\":[false,[\"$\",\"$Ld\",null,{\"children\":[\"$\",\"div\",null,{\"style\":{\"--color\":\"var(--color-emerald-700)\"},\"className\":\"h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10\"}]}],[\"$\",\"$Le\",null,{\"as\":\"div\",\"anchor\":\"top\",\"className\":\"pointer-events-none z-10 translate-y-2 rounded-full border border-gray-950 bg-gray-950/90 py-0.5 pr-2 pb-1 pl-3 text-center font-mono text-xs/6 font-medium whitespace-nowrap text-white opacity-100 inset-ring inset-ring-white/10 transition-[opacity] starting:opacity-0\",\"children\":\"oklch(50.8% 0.118 165.612)\"}]]}],[\"$\",\"$Lc\",\"teal\",{\"as\":\"div\",\"showDelayMs\":100,\"hideDelayMs\":0,\"className\":\"relative\",\"children\":[false,[\"$\",\"$Ld\",null,{\"children\":[\"$\",\"div\",null,{\"style\":{\"--color\":\"var(--color-teal-700)\"},\"className\":\"h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10\"}]}],[\"$\",\"$Le\",null,{\"as\":\"div\",\"anchor\":\"top\",\"className\":\"pointer-events-none z-10 translate-y-2 rounded-full border border-gray-950 bg-gray-950/90 py-0.5 pr-2 pb-1 pl-3 text-center font-mono text-xs/6 font-medium whitespace-nowrap text-white opacity-100 inset-ring inset-ring-white/10 transition-[opacity] starting:opacity-0\",\"children\":\"oklch(51.1% 0.096 186.391)\"}]]}],[\"$\",\"$Lc\",\"cyan\",{\"as\":\"div\",\"showDelayMs\":100,\"hideDelayMs\":0,\"className\":\"relative\",\"children\":[false,[\"$\",\"$Ld\",null,{\"children\":[\"$\",\"div\",null,{\"style\":{\"--color\":\"var(--color-cyan-700)\"},\"className\":\"h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10\"}]}],[\"$\",\"$Le\",null,{\"as\":\"div\",\"anchor\":\"top\",\"className\":\"pointer-events-none z-10 translate-y-2 rounded-full border border-gray-950 bg-gray-950/90 py-0.5 pr-2 pb-1 pl-3 text-center font-mono text-xs/6 font-medium whitespace-nowrap text-white opacity-100 inset-ring inset-ring-white/10 transition-[opacity] starting:opacity-0\",\"children\":\"oklch(52% 0.105 223.128)\"}]]}],[\"$\",\"$Lc\",\"sky\",{\"as\":\"div\",\"showDelayMs\":100,\"hideDelayMs\":0,\"className\":\"relative\",\"children\":[false,[\"$\",\"$Ld\",null,{\"children\":[\"$\",\"div\",null,{\"style\":{\"--color\":\"var(--color-sky-700)\"},\"className\":\"h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10\"}]}],[\"$\",\"$Le\",null,{\"as\":\"div\",\"anchor\":\"top\",\"className\":\"pointer-events-none z-10 translate-y-2 rounded-full border border-gray-950 bg-gray-950/90 py-0.5 pr-2 pb-1 pl-3 text-center font-mono text-xs/6 font-medium whitespace-nowrap text-white opacity-100 inset-ring inset-ring-white/10 transition-[opacity] starting:opacity-0\",\"children\":\"oklch(50% 0.134 242.749)\"}]]}],[\"$\",\"$Lc\",\"blue\",{\"as\":\"div\",\"showDelayMs\":100,\"hideDelayMs\":0,\"className\":\"relative\",\"children\":[false,[\"$\",\"$Ld\",null,{\"children\":[\"$\",\"div\",null,{\"style\":{\"--color\":\"var(--color-blue-700)\"},\"className\":\"h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10\"}]}],[\"$\",\"$Le\",null,{\"as\":\"div\",\"anchor\":\"top\",\"className\":\"pointer-events-none z-10 translate-y-2 rounded-full border border-gray-950 bg-gray-950/90 py-0.5 pr-2 pb-1 pl-3 text-center font-mono text-xs/6 font-medium whitespace-nowrap text-white opacity-100 inset-ring inset-ring-white/10 transition-[opacity] starting:opacity-0\",\"children\":\"oklch(48.8% 0.243 264.376)\"}]]}],[\"$\",\"$Lc\",\"indigo\",{\"as\":\"div\",\"showDelayMs\":100,\"hideDelayMs\":0,\"className\":\"relative\",\"children\":[false,[\"$\",\"$Ld\",null,{\"children\":[\"$\",\"div\",null,{\"style\":{\"--color\":\"var(--color-indigo-700)\"},\"className\":\"h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10\"}]}],[\"$\",\"$Le\",null,{\"as\":\"div\",\"anchor\":\"top\",\"className\":\"pointer-events-none z-10 translate-y-2 rounded-full border border-gray-950 bg-gray-950/90 py-0.5 pr-2 pb-1 pl-3 text-center font-mono text-xs/6 font-medium whitespace-nowrap text-white opacity-100 inset-ring inset-ring-white/10 transition-[opacity] starting:opacity-0\",\"children\":\"oklch(45.7% 0.24 277.023)\"}]]}],[\"$\",\"$Lc\",\"violet\",{\"as\":\"div\",\"showDelayMs\":100,\"hideDelayMs\":0,\"className\":\"relative\",\"children\":[false,[\"$\",\"$Ld\",null,{\"children\":[\"$\",\"div\",null,{\"style\":{\"--color\":\"var(--color-violet-700)\"},\"className\":\"h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10\"}]}],[\"$\",\"$Le\",null,{\"as\":\"div\",\"anchor\":\"top\",\"className\":\"pointer-events-none z-10 translate-y-2 rounded-full border border-gray-950 bg-gray-950/90 py-0.5 pr-2 pb-1 pl-3 text-center font-mono text-xs/6 font-medium whitespace-nowrap text-white opacity-100 inset-ring inset-ring-white/10 transition-[opacity] starting:opacity-0\",\"children\":\"oklch(49.1% 0.27 292.581)\"}]]}],[\"$\",\"$Lc\",\"purple\",{\"as\":\"div\",\"showDelayMs\":100,\"hideDelayMs\":0,\"className\":\"relative\",\"children\":[false,[\"$\",\"$Ld\",null,{\"children\":[\"$\",\"div\",null,{\"style\":{\"--color\":\"var(--color-purple-700)\"},\"className\":\"h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10\"}]}],[\"$\",\"$Le\",null,{\"as\":\"div\",\"anchor\":\"top\",\"className\":\"pointer-events-none z-10 translate-y-2 rounded-full border border-gray-950 bg-gray-950/90 py-0.5 pr-2 pb-1 pl-3 text-center font-mono text-xs/6 font-medium whitespace-nowrap text-white opacity-100 inset-ring inset-ring-white/10 transition-[opacity] starting:opacity-0\",\"children\":\"oklch(49.6% 0.265 301.924)\"}]]}],[\"$\",\"$Lc\",\"fuchsia\",{\"as\":\"div\",\"showDelayMs\":100,\"hideDelayMs\":0,\"className\":\"relative\",\"children\":[false,[\"$\",\"$Ld\",null,{\"children\":[\"$\",\"div\",null,{\"style\":{\"--color\":\"var(--color-fuchsia-700)\"},\"className\":\"h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10\"}]}],[\"$\",\"$Le\",null,{\"as\":\"div\",\"anchor\":\"top\",\"className\":\"pointer-events-none z-10 translate-y-2 rounded-full border border-gray-950 bg-gray-950/90 py-0.5 pr-2 pb-1 pl-3 text-center font-mono text-xs/6 font-medium whitespace-nowrap text-white opacity-100 inset-ring inset-ring-white/10 transition-[opacity] starting:opacity-0\",\"children\":\"oklch(51.8% 0.253 323.949)\"}]]}],[\"$\",\"$Lc\",\"pink\",{\"as\":\"div\",\"showDelayMs\":100,\"hideDelayMs\":0,\"className\":\"relative\",\"children\":[false,[\"$\",\"$Ld\",null,{\"children\":[\"$\",\"div\",null,{\"style\":{\"--color\":\"var(--color-pink-700)\"},\"className\":\"h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10\"}]}],[\"$\",\"$Le\",null,{\"as\":\"div\",\"anchor\":\"top\",\"className\":\"pointer-events-none z-10 translate-y-2 rounded-full border border-gray-950 bg-gray-950/90 py-0.5 pr-2 pb-1 pl-3 text-center font-mono text-xs/6 font-medium whitespace-nowrap text-white opacity-100 inset-ring inset-ring-white/10 transition-[opacity] starting:opacity-0\",\"children\":\"oklch(52.5% 0.223 3.958)\"}]]}],[\"$\",\"$Lc\",\"rose\",{\"as\":\"div\",\"showDelayMs\":100,\"hideDelayMs\":0,\"className\":\"relative\",\"children\":[false,[\"$\",\"$Ld\",null,{\"children\":[\"$\",\"div\",null,{\"style\":{\"--color\":\"var(--color-rose-700)\"},\"className\":\"h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10\"}]}],[\"$\",\"$Le\",null,{\"as\":\"div\",\"anchor\":\"top\",\"className\":\"pointer-events-none z-10 translate-y-2 rounded-full border border-gray-950 bg-gray-950/90 py-0.5 pr-2 pb-1 pl-3 text-center font-mono text-xs/6 font-medium whitespace-nowrap text-white opacity-100 inset-ring inset-ring-white/10 transition-[opacity] starting:opacity-0\",\"children\":\"oklch(51.4% 0.222 16.935)\"}]]}]]]}],[\"$\",\"$1\",\"600\",{\"children\":[[\"$\",\"div\",null,{\"className\":\"relative\",\"children\":[[\"$\",\"div\",null,{\"className\":\"absolute -mt-1 w-screen border-t border-gray-950/5 dark:border-white/10\"}],[\"$\",\"div\",null,{\"className\":\"flex h-(--height) w-(--width) items-center\",\"children\":[\"$\",\"div\",null,{\"className\":\"font-mono text-[13px]/7 text-gray-950 dark:text-white\",\"children\":600}]}]]}],[[\"$\",\"$Lc\",\"red\",{\"as\":\"div\",\"showDelayMs\":100,\"hideDelayMs\":0,\"className\":\"relative\",\"children\":[false,[\"$\",\"$Ld\",null,{\"children\":[\"$\",\"div\",null,{\"style\":{\"--color\":\"var(--color-red-600)\"},\"className\":\"h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10\"}]}],[\"$\",\"$Le\",null,{\"as\":\"div\",\"anchor\":\"top\",\"className\":\"pointer-events-none z-10 translate-y-2 rounded-full border border-gray-950 bg-gray-950/90 py-0.5 pr-2 pb-1 pl-3 text-center font-mono text-xs/6 font-medium whitespace-nowrap text-white opacity-100 inset-ring inset-ring-white/10 transition-[opacity] starting:opacity-0\",\"children\":\"oklch(57.7% 0.245 27.325)\"}]]}],[\"$\",\"$Lc\",\"orange\",{\"as\":\"div\",\"showDelayMs\":100,\"hideDelayMs\":0,\"className\":\"relative\",\"children\":[false,[\"$\",\"$Ld\",null,{\"children\":[\"$\",\"div\",null,{\"style\":{\"--color\":\"var(--color-orange-600)\"},\"className\":\"h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10\"}]}],[\"$\",\"$Le\",null,{\"as\":\"div\",\"anchor\":\"top\",\"className\":\"pointer-events-none z-10 translate-y-2 rounded-full border border-gray-950 bg-gray-950/90 py-0.5 pr-2 pb-1 pl-3 text-center font-mono text-xs/6 font-medium whitespace-nowrap text-white opacity-100 inset-ring inset-ring-white/10 transition-[opacity] starting:opacity-0\",\"children\":\"oklch(64.6% 0.222 41.116)\"}]]}],[\"$\",\"$Lc\",\"amber\",{\"as\":\"div\",\"showDelayMs\":100,\"hideDelayMs\":0,\"className\":\"relative\",\"children\":[false,[\"$\",\"$Ld\",null,{\"children\":[\"$\",\"div\",null,{\"style\":{\"--color\":\"var(--color-amber-600)\"},\"className\":\"h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10\"}]}],[\"$\",\"$Le\",null,{\"as\":\"div\",\"anchor\":\"top\",\"className\":\"pointer-events-none z-10 translate-y-2 rounded-full border border-gray-950 bg-gray-950/90 py-0.5 pr-2 pb-1 pl-3 text-center font-mono text-xs/6 font-medium whitespace-nowrap text-white opacity-100 inset-ring inset-ring-white/10 transition-[opacity] starting:opacity-0\",\"children\":\"oklch(66.6% 0.179 58.318)\"}]]}],[\"$\",\"$Lc\",\"yellow\",{\"as\":\"div\",\"showDelayMs\":100,\"hideDelayMs\":0,\"className\":\"relative\",\"children\":[false,[\"$\",\"$Ld\",null,{\"children\":[\"$\",\"div\",null,{\"style\":{\"--color\":\"var(--color-yellow-600)\"},\"className\":\"h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10\"}]}],[\"$\",\"$Le\",null,{\"as\":\"div\",\"anchor\":\"top\",\"className\":\"pointer-events-none z-10 translate-y-2 rounded-full border border-gray-950 bg-gray-950/90 py-0.5 pr-2 pb-1 pl-3 text-center font-mono text-xs/6 font-medium whitespace-nowrap text-white opacity-100 inset-ring inset-ring-white/10 transition-[opacity] starting:opacity-0\",\"children\":\"oklch(68.1% 0.162 75.834)\"}]]}],[\"$\",\"$Lc\",\"lime\",{\"as\":\"div\",\"showDelayMs\":100,\"hideDelayMs\":0,\"className\":\"relative\",\"children\":[false,[\"$\",\"$Ld\",null,{\"children\":[\"$\",\"div\",null,{\"style\":{\"--color\":\"var(--color-lime-600)\"},\"className\":\"h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10\"}]}],[\"$\",\"$Le\",null,{\"as\":\"div\",\"anchor\":\"top\",\"className\":\"pointer-events-none z-10 translate-y-2 rounded-full border border-gray-950 bg-gray-950/90 py-0.5 pr-2 pb-1 pl-3 text-center font-mono text-xs/6 font-medium whitespace-nowrap text-white opacity-100 inset-ring inset-ring-white/10 transition-[opacity] starting:opacity-0\",\"children\":\"oklch(64.8% 0.2 131.684)\"}]]}],[\"$\",\"$Lc\",\"green\",{\"as\":\"div\",\"showDelayMs\":100,\"hideDelayMs\":0,\"className\":\"relative\",\"children\":[false,[\"$\",\"$Ld\",null,{\"children\":[\"$\",\"div\",null,{\"style\":{\"--color\":\"var(--color-green-600)\"},\"className\":\"h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10\"}]}],[\"$\",\"$Le\",null,{\"as\":\"div\",\"anchor\":\"top\",\"className\":\"pointer-events-none z-10 translate-y-2 rounded-full border border-gray-950 bg-gray-950/90 py-0.5 pr-2 pb-1 pl-3 text-center font-mono text-xs/6 font-medium whitespace-nowrap text-white opacity-100 inset-ring inset-ring-white/10 transition-[opacity] starting:opacity-0\",\"children\":\"oklch(62.7% 0.194 149.214)\"}]]}],[\"$\",\"$Lc\",\"emerald\",{\"as\":\"div\",\"showDelayMs\":100,\"hideDelayMs\":0,\"className\":\"relative\",\"children\":[false,[\"$\",\"$Ld\",null,{\"children\":[\"$\",\"div\",null,{\"style\":{\"--color\":\"var(--color-emerald-600)\"},\"className\":\"h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10\"}]}],[\"$\",\"$Le\",null,{\"as\":\"div\",\"anchor\":\"top\",\"className\":\"pointer-events-none z-10 translate-y-2 rounded-full border border-gray-950 bg-gray-950/90 py-0.5 pr-2 pb-1 pl-3 text-center font-mono text-xs/6 font-medium whitespace-nowrap text-white opacity-100 inset-ring inset-ring-white/10 transition-[opacity] starting:opacity-0\",\"children\":\"oklch(59.6% 0.145 163.225)\"}]]}],[\"$\",\"$Lc\",\"teal\",{\"as\":\"div\",\"showDelayMs\":100,\"hideDelayMs\":0,\"className\":\"relative\",\"children\":[false,[\"$\",\"$Ld\",null,{\"children\":[\"$\",\"div\",null,{\"style\":{\"--color\":\"var(--color-teal-600)\"},\"className\":\"h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10\"}]}],[\"$\",\"$Le\",null,{\"as\":\"div\",\"anchor\":\"top\",\"className\":\"pointer-events-none z-10 translate-y-2 rounded-full border border-gray-950 bg-gray-950/90 py-0.5 pr-2 pb-1 pl-3 text-center font-mono text-xs/6 font-medium whitespace-nowrap text-white opacity-100 inset-ring inset-ring-white/10 transition-[opacity] starting:opacity-0\",\"children\":\"oklch(60% 0.118 184.704)\"}]]}],[\"$\",\"$Lc\",\"cyan\",{\"as\":\"div\",\"showDelayMs\":100,\"hideDelayMs\":0,\"className\":\"relative\",\"children\":[false,[\"$\",\"$Ld\",null,{\"children\":[\"$\",\"div\",null,{\"style\":{\"--color\":\"var(--color-cyan-600)\"},\"className\":\"h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10\"}]}],[\"$\",\"$Le\",null,{\"as\":\"div\",\"anchor\":\"top\",\"className\":\"pointer-events-none z-10 translate-y-2 rounded-full border border-gray-950 bg-gray-950/90 py-0.5 pr-2 pb-1 pl-3 text-center font-mono text-xs/6 font-medium whitespace-nowrap text-white opacity-100 inset-ring inset-ring-white/10 transition-[opacity] starting:opacity-0\",\"children\":\"oklch(60.9% 0.126 221.723)\"}]]}],[\"$\",\"$Lc\",\"sky\",{\"as\":\"div\",\"showDelayMs\":100,\"hideDelayMs\":0,\"className\":\"relative\",\"children\":[false,[\"$\",\"$Ld\",null,{\"children\":[\"$\",\"div\",null,{\"style\":{\"--color\":\"var(--color-sky-600)\"},\"className\":\"h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10\"}]}],[\"$\",\"$Le\",null,{\"as\":\"div\",\"anchor\":\"top\",\"className\":\"pointer-events-none z-10 translate-y-2 rounded-full border border-gray-950 bg-gray-950/90 py-0.5 pr-2 pb-1 pl-3 text-center font-mono text-xs/6 font-medium whitespace-nowrap text-white opacity-100 inset-ring inset-ring-white/10 transition-[opacity] starting:opacity-0\",\"children\":\"oklch(58.8% 0.158 241.966)\"}]]}],[\"$\",\"$Lc\",\"blue\",{\"as\":\"div\",\"showDelayMs\":100,\"hideDelayMs\":0,\"className\":\"relative\",\"children\":[false,[\"$\",\"$Ld\",null,{\"children\":[\"$\",\"div\",null,{\"style\":{\"--color\":\"var(--color-blue-600)\"},\"className\":\"h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10\"}]}],[\"$\",\"$Le\",null,{\"as\":\"div\",\"anchor\":\"top\",\"className\":\"pointer-events-none z-10 translate-y-2 rounded-full border border-gray-950 bg-gray-950/90 py-0.5 pr-2 pb-1 pl-3 text-center font-mono text-xs/6 font-medium whitespace-nowrap text-white opacity-100 inset-ring inset-ring-white/10 transition-[opacity] starting:opacity-0\",\"children\":\"oklch(54.6% 0.245 262.881)\"}]]}],[\"$\",\"$Lc\",\"indigo\",{\"as\":\"div\",\"showDelayMs\":100,\"hideDelayMs\":0,\"className\":\"relative\",\"children\":[false,[\"$\",\"$Ld\",null,{\"children\":[\"$\",\"div\",null,{\"style\":{\"--color\":\"var(--color-indigo-600)\"},\"className\":\"h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10\"}]}],[\"$\",\"$Le\",null,{\"as\":\"div\",\"anchor\":\"top\",\"className\":\"pointer-events-none z-10 translate-y-2 rounded-full border border-gray-950 bg-gray-950/90 py-0.5 pr-2 pb-1 pl-3 text-center font-mono text-xs/6 font-medium whitespace-nowrap text-white opacity-100 inset-ring inset-ring-white/10 transition-[opacity] starting:opacity-0\",\"children\":\"oklch(51.1% 0.262 276.966)\"}]]}],[\"$\",\"$Lc\",\"violet\",{\"as\":\"div\",\"showDelayMs\":100,\"hideDelayMs\":0,\"className\":\"relative\",\"children\":[false,[\"$\",\"$Ld\",null,{\"children\":[\"$\",\"div\",null,{\"style\":{\"--color\":\"var(--color-violet-600)\"},\"className\":\"h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10\"}]}],[\"$\",\"$Le\",null,{\"as\":\"div\",\"anchor\":\"top\",\"className\":\"pointer-events-none z-10 translate-y-2 rounded-full border border-gray-950 bg-gray-950/90 py-0.5 pr-2 pb-1 pl-3 text-center font-mono text-xs/6 font-medium whitespace-nowrap text-white opacity-100 inset-ring inset-ring-white/10 transition-[opacity] starting:opacity-0\",\"children\":\"oklch(54.1% 0.281 293.009)\"}]]}],[\"$\",\"$Lc\",\"purple\",{\"as\":\"div\",\"showDelayMs\":100,\"hideDelayMs\":0,\"className\":\"relative\",\"children\":[false,[\"$\",\"$Ld\",null,{\"children\":[\"$\",\"div\",null,{\"style\":{\"--color\":\"var(--color-purple-600)\"},\"className\":\"h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10\"}]}],[\"$\",\"$Le\",null,{\"as\":\"div\",\"anchor\":\"top\",\"className\":\"pointer-events-none z-10 translate-y-2 rounded-full border border-gray-950 bg-gray-950/90 py-0.5 pr-2 pb-1 pl-3 text-center font-mono text-xs/6 font-medium whitespace-nowrap text-white opacity-100 inset-ring inset-ring-white/10 transition-[opacity] starting:opacity-0\",\"children\":\"oklch(55.8% 0.288 302.321)\"}]]}],[\"$\",\"$Lc\",\"fuchsia\",{\"as\":\"div\",\"showDelayMs\":100,\"hideDelayMs\":0,\"className\":\"relative\",\"children\":[false,[\"$\",\"$Ld\",null,{\"children\":[\"$\",\"div\",null,{\"style\":{\"--color\":\"var(--color-fuchsia-600)\"},\"className\":\"h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10\"}]}],[\"$\",\"$Le\",null,{\"as\":\"div\",\"anchor\":\"top\",\"className\":\"pointer-events-none z-10 translate-y-2 rounded-full border border-gray-950 bg-gray-950/90 py-0.5 pr-2 pb-1 pl-3 text-center font-mono text-xs/6 font-medium whitespace-nowrap text-white opacity-100 inset-ring inset-ring-white/10 transition-[opacity] starting:opacity-0\",\"children\":\"oklch(59.1% 0.293 322.896)\"}]]}],[\"$\",\"$Lc\",\"pink\",{\"as\":\"div\",\"showDelayMs\":100,\"hideDelayMs\":0,\"className\":\"relative\",\"children\":[false,[\"$\",\"$Ld\",null,{\"children\":[\"$\",\"div\",null,{\"style\":{\"--color\":\"var(--color-pink-600)\"},\"className\":\"h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10\"}]}],[\"$\",\"$Le\",null,{\"as\":\"div\",\"anchor\":\"top\",\"className\":\"pointer-events-none z-10 translate-y-2 rounded-full border border-gray-950 bg-gray-950/90 py-0.5 pr-2 pb-1 pl-3 text-center font-mono text-xs/6 font-medium whitespace-nowrap text-white opacity-100 inset-ring inset-ring-white/10 transition-[opacity] starting:opacity-0\",\"children\":\"oklch(59.2% 0.249 0.584)\"}]]}],[\"$\",\"$Lc\",\"rose\",{\"as\":\"div\",\"showDelayMs\":100,\"hideDelayMs\":0,\"className\":\"relative\",\"children\":[false,[\"$\",\"$Ld\",null,{\"children\":[\"$\",\"div\",null,{\"style\":{\"--color\":\"var(--color-rose-600)\"},\"className\":\"h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10\"}]}],[\"$\",\"$Le\",null,{\"as\":\"div\",\"anchor\":\"top\",\"className\":\"pointer-events-none z-10 translate-y-2 rounded-full border border-gray-950 bg-gray-950/90 py-0.5 pr-2 pb-1 pl-3 text-center font-mono text-xs/6 font-medium whitespace-nowrap text-white opacity-100 inset-ring inset-ring-white/10 transition-[opacity] starting:opacity-0\",\"children\":\"oklch(58.6% 0.253 17.585)\"}]]}]]]}],[\"$\",\"$1\",\"500\",{\"children\":[[\"$\",\"div\",null,{\"className\":\"relative\",\"children\":[[\"$\",\"div\",null,{\"className\":\"absolute -mt-1 w-screen border-t border-gray-950/5 dark:border-white/10\"}],[\"$\",\"div\",null,{\"className\":\"flex h-(--height) w-(--width) items-center\",\"children\":[\"$\",\"div\",null,{\"className\":\"font-mono text-[13px]/7 text-gray-950 dark:text-white\",\"children\":500}]}]]}],[[\"$\",\"$Lc\",\"red\",{\"as\":\"div\",\"showDelayMs\":100,\"hideDelayMs\":0,\"className\":\"relative\",\"children\":[false,[\"$\",\"$Ld\",null,{\"children\":[\"$\",\"div\",null,{\"style\":{\"--color\":\"var(--color-red-500)\"},\"className\":\"h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10\"}]}],[\"$\",\"$Le\",null,{\"as\":\"div\",\"anchor\":\"top\",\"className\":\"pointer-events-none z-10 translate-y-2 rounded-full border border-gray-950 bg-gray-950/90 py-0.5 pr-2 pb-1 pl-3 text-center font-mono text-xs/6 font-medium whitespace-nowrap text-white opacity-100 inset-ring inset-ring-white/10 transition-[opacity] starting:opacity-0\",\"children\":\"oklch(63.7% 0.237 25.331)\"}]]}],[\"$\",\"$Lc\",\"orange\",{\"as\":\"div\",\"showDelayMs\":100,\"hideDelayMs\":0,\"className\":\"relative\",\"children\":[false,[\"$\",\"$Ld\",null,{\"children\":[\"$\",\"div\",null,{\"style\":{\"--color\":\"var(--color-orange-500)\"},\"className\":\"h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10\"}]}],[\"$\",\"$Le\",null,{\"as\":\"div\",\"anchor\":\"top\",\"className\":\"pointer-events-none z-10 translate-y-2 rounded-full border border-gray-950 bg-gray-950/90 py-0.5 pr-2 pb-1 pl-3 text-center font-mono text-xs/6 font-medium whitespace-nowrap text-white opacity-100 inset-ring inset-ring-white/10 transition-[opacity] starting:opacity-0\",\"children\":\"oklch(70.5% 0.213 47.604)\"}]]}],[\"$\",\"$Lc\",\"amber\",{\"as\":\"div\",\"showDelayMs\":100,\"hideDelayMs\":0,\"className\":\"relative\",\"children\":[false,[\"$\",\"$Ld\",null,{\"children\":[\"$\",\"div\",null,{\"style\":{\"--color\":\"var(--color-amber-500)\"},\"className\":\"h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10\"}]}],[\"$\",\"$Le\",null,{\"as\":\"div\",\"anchor\":\"top\",\"className\":\"pointer-events-none z-10 translate-y-2 rounded-full border border-gray-950 bg-gray-950/90 py-0.5 pr-2 pb-1 pl-3 text-center font-mono text-xs/6 font-medium whitespace-nowrap text-white opacity-100 inset-ring inset-ring-white/10 transition-[opacity] starting:opacity-0\",\"children\":\"oklch(76.9% 0.188 70.08)\"}]]}],[\"$\",\"$Lc\",\"yellow\",{\"as\":\"div\",\"showDelayMs\":100,\"hideDelayMs\":0,\"className\":\"relative\",\"children\":[false,[\"$\",\"$Ld\",null,{\"children\":[\"$\",\"div\",null,{\"style\":{\"--color\":\"var(--color-yellow-500)\"},\"className\":\"h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10\"}]}],[\"$\",\"$Le\",null,{\"as\":\"div\",\"anchor\":\"top\",\"className\":\"pointer-events-none z-10 translate-y-2 rounded-full border border-gray-950 bg-gray-950/90 py-0.5 pr-2 pb-1 pl-3 text-center font-mono text-xs/6 font-medium whitespace-nowrap text-white opacity-100 inset-ring inset-ring-white/10 transition-[opacity] starting:opacity-0\",\"children\":\"oklch(79.5% 0.184 86.047)\"}]]}],[\"$\",\"$Lc\",\"lime\",{\"as\":\"div\",\"showDelayMs\":100,\"hideDelayMs\":0,\"className\":\"relative\",\"children\":[false,[\"$\",\"$Ld\",null,{\"children\":[\"$\",\"div\",null,{\"style\":{\"--color\":\"var(--color-lime-500)\"},\"className\":\"h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10\"}]}],[\"$\",\"$Le\",null,{\"as\":\"div\",\"anchor\":\"top\",\"className\":\"pointer-events-none z-10 translate-y-2 rounded-full border border-gray-950 bg-gray-950/90 py-0.5 pr-2 pb-1 pl-3 text-center font-mono text-xs/6 font-medium whitespace-nowrap text-white opacity-100 inset-ring inset-ring-white/10 transition-[opacity] starting:opacity-0\",\"children\":\"oklch(76.8% 0.233 130.85)\"}]]}],[\"$\",\"$Lc\",\"green\",{\"as\":\"div\",\"showDelayMs\":100,\"hideDelayMs\":0,\"className\":\"relative\",\"children\":[false,[\"$\",\"$Ld\",null,{\"children\":[\"$\",\"div\",null,{\"style\":{\"--color\":\"var(--color-green-500)\"},\"className\":\"h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10\"}]}],[\"$\",\"$Le\",null,{\"as\":\"div\",\"anchor\":\"top\",\"className\":\"pointer-events-none z-10 translate-y-2 rounded-full border border-gray-950 bg-gray-950/90 py-0.5 pr-2 pb-1 pl-3 text-center font-mono text-xs/6 font-medium whitespace-nowrap text-white opacity-100 inset-ring inset-ring-white/10 transition-[opacity] starting:opacity-0\",\"children\":\"oklch(72.3% 0.219 149.579)\"}]]}],[\"$\",\"$Lc\",\"emerald\",{\"as\":\"div\",\"showDelayMs\":100,\"hideDelayMs\":0,\"className\":\"relative\",\"children\":[false,[\"$\",\"$Ld\",null,{\"children\":[\"$\",\"div\",null,{\"style\":{\"--color\":\"var(--color-emerald-500)\"},\"className\":\"h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10\"}]}],[\"$\",\"$Le\",null,{\"as\":\"div\",\"anchor\":\"top\",\"className\":\"pointer-events-none z-10 translate-y-2 rounded-full border border-gray-950 bg-gray-950/90 py-0.5 pr-2 pb-1 pl-3 text-center font-mono text-xs/6 font-medium whitespace-nowrap text-white opacity-100 inset-ring inset-ring-white/10 transition-[opacity] starting:opacity-0\",\"children\":\"oklch(69.6% 0.17 162.48)\"}]]}],[\"$\",\"$Lc\",\"teal\",{\"as\":\"div\",\"showDelayMs\":100,\"hideDelayMs\":0,\"className\":\"relative\",\"children\":[false,[\"$\",\"$Ld\",null,{\"children\":[\"$\",\"div\",null,{\"style\":{\"--color\":\"var(--color-teal-500)\"},\"className\":\"h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10\"}]}],[\"$\",\"$Le\",null,{\"as\":\"div\",\"anchor\":\"top\",\"className\":\"pointer-events-none z-10 translate-y-2 rounded-full border border-gray-950 bg-gray-950/90 py-0.5 pr-2 pb-1 pl-3 text-center font-mono text-xs/6 font-medium whitespace-nowrap text-white opacity-100 inset-ring inset-ring-white/10 transition-[opacity] starting:opacity-0\",\"children\":\"oklch(70.4% 0.14 182.503)\"}]]}],[\"$\",\"$Lc\",\"cyan\",{\"as\":\"div\",\"showDelayMs\":100,\"hideDelayMs\":0,\"className\":\"relative\",\"children\":[false,[\"$\",\"$Ld\",null,{\"children\":[\"$\",\"div\",null,{\"style\":{\"--color\":\"var(--color-cyan-500)\"},\"className\":\"h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10\"}]}],[\"$\",\"$Le\",null,{\"as\":\"div\",\"anchor\":\"top\",\"className\":\"pointer-events-none z-10 translate-y-2 rounded-full border border-gray-950 bg-gray-950/90 py-0.5 pr-2 pb-1 pl-3 text-center font-mono text-xs/6 font-medium whitespace-nowrap text-white opacity-100 inset-ring inset-ring-white/10 transition-[opacity] starting:opacity-0\",\"children\":\"oklch(71.5% 0.143 215.221)\"}]]}],[\"$\",\"$Lc\",\"sky\",{\"as\":\"div\",\"showDelayMs\":100,\"hideDelayMs\":0,\"className\":\"relative\",\"children\":[false,[\"$\",\"$Ld\",null,{\"children\":[\"$\",\"div\",null,{\"style\":{\"--color\":\"var(--color-sky-500)\"},\"className\":\"h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10\"}]}],[\"$\",\"$Le\",null,{\"as\":\"div\",\"anchor\":\"top\",\"className\":\"pointer-events-none z-10 translate-y-2 rounded-full border border-gray-950 bg-gray-950/90 py-0.5 pr-2 pb-1 pl-3 text-center font-mono text-xs/6 font-medium whitespace-nowrap text-white opacity-100 inset-ring inset-ring-white/10 transition-[opacity] starting:opacity-0\",\"children\":\"oklch(68.5% 0.169 237.323)\"}]]}],[\"$\",\"$Lc\",\"blue\",{\"as\":\"div\",\"showDelayMs\":100,\"hideDelayMs\":0,\"className\":\"relative\",\"children\":[false,[\"$\",\"$Ld\",null,{\"children\":[\"$\",\"div\",null,{\"style\":{\"--color\":\"var(--color-blue-500)\"},\"className\":\"h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10\"}]}],[\"$\",\"$Le\",null,{\"as\":\"div\",\"anchor\":\"top\",\"className\":\"pointer-events-none z-10 translate-y-2 rounded-full border border-gray-950 bg-gray-950/90 py-0.5 pr-2 pb-1 pl-3 text-center font-mono text-xs/6 font-medium whitespace-nowrap text-white opacity-100 inset-ring inset-ring-white/10 transition-[opacity] starting:opacity-0\",\"children\":\"oklch(62.3% 0.214 259.815)\"}]]}],[\"$\",\"$Lc\",\"indigo\",{\"as\":\"div\",\"showDelayMs\":100,\"hideDelayMs\":0,\"className\":\"relative\",\"children\":[false,[\"$\",\"$Ld\",null,{\"children\":[\"$\",\"div\",null,{\"style\":{\"--color\":\"var(--color-indigo-500)\"},\"className\":\"h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10\"}]}],[\"$\",\"$Le\",null,{\"as\":\"div\",\"anchor\":\"top\",\"className\":\"pointer-events-none z-10 translate-y-2 rounded-full border border-gray-950 bg-gray-950/90 py-0.5 pr-2 pb-1 pl-3 text-center font-mono text-xs/6 font-medium whitespace-nowrap text-white opacity-100 inset-ring inset-ring-white/10 transition-[opacity] starting:opacity-0\",\"children\":\"oklch(58.5% 0.233 277.117)\"}]]}],[\"$\",\"$Lc\",\"violet\",{\"as\":\"div\",\"showDelayMs\":100,\"hideDelayMs\":0,\"className\":\"relative\",\"children\":[false,[\"$\",\"$Ld\",null,{\"children\":[\"$\",\"div\",null,{\"style\":{\"--color\":\"var(--color-violet-500)\"},\"className\":\"h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10\"}]}],[\"$\",\"$Le\",null,{\"as\":\"div\",\"anchor\":\"top\",\"className\":\"pointer-events-none z-10 translate-y-2 rounded-full border border-gray-950 bg-gray-950/90 py-0.5 pr-2 pb-1 pl-3 text-center font-mono text-xs/6 font-medium whitespace-nowrap text-white opacity-100 inset-ring inset-ring-white/10 transition-[opacity] starting:opacity-0\",\"children\":\"oklch(60.6% 0.25 292.717)\"}]]}],[\"$\",\"$Lc\",\"purple\",{\"as\":\"div\",\"showDelayMs\":100,\"hideDelayMs\":0,\"className\":\"relative\",\"children\":[false,[\"$\",\"$Ld\",null,{\"children\":[\"$\",\"div\",null,{\"style\":{\"--color\":\"var(--color-purple-500)\"},\"className\":\"h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10\"}]}],[\"$\",\"$Le\",null,{\"as\":\"div\",\"anchor\":\"top\",\"className\":\"pointer-events-none z-10 translate-y-2 rounded-full border border-gray-950 bg-gray-950/90 py-0.5 pr-2 pb-1 pl-3 text-center font-mono text-xs/6 font-medium whitespace-nowrap text-white opacity-100 inset-ring inset-ring-white/10 transition-[opacity] starting:opacity-0\",\"children\":\"oklch(62.7% 0.265 303.9)\"}]]}],[\"$\",\"$Lc\",\"fuchsia\",{\"as\":\"div\",\"showDelayMs\":100,\"hideDelayMs\":0,\"className\":\"relative\",\"children\":[false,[\"$\",\"$Ld\",null,{\"children\":[\"$\",\"div\",null,{\"style\":{\"--color\":\"var(--color-fuchsia-500)\"},\"className\":\"h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10\"}]}],[\"$\",\"$Le\",null,{\"as\":\"div\",\"anchor\":\"top\",\"className\":\"pointer-events-none z-10 translate-y-2 rounded-full border border-gray-950 bg-gray-950/90 py-0.5 pr-2 pb-1 pl-3 text-center font-mono text-xs/6 font-medium whitespace-nowrap text-white opacity-100 inset-ring inset-ring-white/10 transition-[opacity] starting:opacity-0\",\"children\":\"oklch(66.7% 0.295 322.15)\"}]]}],[\"$\",\"$Lc\",\"pink\",{\"as\":\"div\",\"showDelayMs\":100,\"hideDelayMs\":0,\"className\":\"relative\",\"children\":[false,[\"$\",\"$Ld\",null,{\"children\":[\"$\",\"div\",null,{\"style\":{\"--color\":\"var(--color-pink-500)\"},\"className\":\"h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10\"}]}],[\"$\",\"$Le\",null,{\"as\":\"div\",\"anchor\":\"top\",\"className\":\"pointer-events-none z-10 translate-y-2 rounded-full border border-gray-950 bg-gray-950/90 py-0.5 pr-2 pb-1 pl-3 text-center font-mono text-xs/6 font-medium whitespace-nowrap text-white opacity-100 inset-ring inset-ring-white/10 transition-[opacity] starting:opacity-0\",\"children\":\"oklch(65.6% 0.241 354.308)\"}]]}],[\"$\",\"$Lc\",\"rose\",{\"as\":\"div\",\"showDelayMs\":100,\"hideDelayMs\":0,\"className\":\"relative\",\"children\":[false,[\"$\",\"$Ld\",null,{\"children\":[\"$\",\"div\",null,{\"style\":{\"--color\":\"var(--color-rose-500)\"},\"className\":\"h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10\"}]}],[\"$\",\"$Le\",null,{\"as\":\"div\",\"anchor\":\"top\",\"className\":\"pointer-events-none z-10 translate-y-2 rounded-full border border-gray-950 bg-gray-950/90 py-0.5 pr-2 pb-1 pl-3 text-center font-mono text-xs/6 font-medium whitespace-nowrap text-white opacity-100 inset-ring inset-ring-white/10 transition-[opacity] starting:opacity-0\",\"children\":\"oklch(64.5% 0.246 16.439)\"}]]}]]]}],[\"$\",\"$1\",\"400\",{\"children\":[[\"$\",\"div\",null,{\"className\":\"relative\",\"children\":[[\"$\",\"div\",null,{\"className\":\"absolute -mt-1 w-screen border-t border-gray-950/5 dark:border-white/10\"}],[\"$\",\"div\",null,{\"className\":\"flex h-(--height) w-(--width) items-center\",\"children\":[\"$\",\"div\",null,{\"className\":\"font-mono text-[13px]/7 text-gray-950 dark:text-white\",\"children\":400}]}]]}],[[\"$\",\"$Lc\",\"red\",{\"as\":\"div\",\"showDelayMs\":100,\"hideDelayMs\":0,\"className\":\"relative\",\"children\":[false,[\"$\",\"$Ld\",null,{\"children\":[\"$\",\"div\",null,{\"style\":{\"--color\":\"var(--color-red-400)\"},\"className\":\"h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10\"}]}],[\"$\",\"$Le\",null,{\"as\":\"div\",\"anchor\":\"top\",\"className\":\"pointer-events-none z-10 translate-y-2 rounded-full border border-gray-950 bg-gray-950/90 py-0.5 pr-2 pb-1 pl-3 text-center font-mono text-xs/6 font-medium whitespace-nowrap text-white opacity-100 inset-ring inset-ring-white/10 transition-[opacity] starting:opacity-0\",\"children\":\"oklch(70.4% 0.191 22.216)\"}]]}],[\"$\",\"$Lc\",\"orange\",{\"as\":\"div\",\"showDelayMs\":100,\"hideDelayMs\":0,\"className\":\"relative\",\"children\":[false,[\"$\",\"$Ld\",null,{\"children\":[\"$\",\"div\",null,{\"style\":{\"--color\":\"var(--color-orange-400)\"},\"className\":\"h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10\"}]}],[\"$\",\"$Le\",null,{\"as\":\"div\",\"anchor\":\"top\",\"className\":\"pointer-events-none z-10 translate-y-2 rounded-full border border-gray-950 bg-gray-950/90 py-0.5 pr-2 pb-1 pl-3 text-center font-mono text-xs/6 font-medium whitespace-nowrap text-white opacity-100 inset-ring inset-ring-white/10 transition-[opacity] starting:opacity-0\",\"children\":\"oklch(75% 0.183 55.934)\"}]]}],[\"$\",\"$Lc\",\"amber\",{\"as\":\"div\",\"showDelayMs\":100,\"hideDelayMs\":0,\"className\":\"relative\",\"children\":[false,[\"$\",\"$Ld\",null,{\"children\":[\"$\",\"div\",null,{\"style\":{\"--color\":\"var(--color-amber-400)\"},\"className\":\"h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10\"}]}],[\"$\",\"$Le\",null,{\"as\":\"div\",\"anchor\":\"top\",\"className\":\"pointer-events-none z-10 translate-y-2 rounded-full border border-gray-950 bg-gray-950/90 py-0.5 pr-2 pb-1 pl-3 text-center font-mono text-xs/6 font-medium whitespace-nowrap text-white opacity-100 inset-ring inset-ring-white/10 transition-[opacity] starting:opacity-0\",\"children\":\"oklch(82.8% 0.189 84.429)\"}]]}],[\"$\",\"$Lc\",\"yellow\",{\"as\":\"div\",\"showDelayMs\":100,\"hideDelayMs\":0,\"className\":\"relative\",\"children\":[false,[\"$\",\"$Ld\",null,{\"children\":[\"$\",\"div\",null,{\"style\":{\"--color\":\"var(--color-yellow-400)\"},\"className\":\"h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10\"}]}],[\"$\",\"$Le\",null,{\"as\":\"div\",\"anchor\":\"top\",\"className\":\"pointer-events-none z-10 translate-y-2 rounded-full border border-gray-950 bg-gray-950/90 py-0.5 pr-2 pb-1 pl-3 text-center font-mono text-xs/6 font-medium whitespace-nowrap text-white opacity-100 inset-ring inset-ring-white/10 transition-[opacity] starting:opacity-0\",\"children\":\"oklch(85.2% 0.199 91.936)\"}]]}],[\"$\",\"$Lc\",\"lime\",{\"as\":\"div\",\"showDelayMs\":100,\"hideDelayMs\":0,\"className\":\"relative\",\"children\":[false,[\"$\",\"$Ld\",null,{\"children\":[\"$\",\"div\",null,{\"style\":{\"--color\":\"var(--color-lime-400)\"},\"className\":\"h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10\"}]}],[\"$\",\"$Le\",null,{\"as\":\"div\",\"anchor\":\"top\",\"className\":\"pointer-events-none z-10 translate-y-2 rounded-full border border-gray-950 bg-gray-950/90 py-0.5 pr-2 pb-1 pl-3 text-center font-mono text-xs/6 font-medium whitespace-nowrap text-white opacity-100 inset-ring inset-ring-white/10 transition-[opacity] starting:opacity-0\",\"children\":\"oklch(84.1% 0.238 128.85)\"}]]}],[\"$\",\"$Lc\",\"green\",{\"as\":\"div\",\"showDelayMs\":100,\"hideDelayMs\":0,\"className\":\"relative\",\"children\":[false,[\"$\",\"$Ld\",null,{\"children\":[\"$\",\"div\",null,{\"style\":{\"--color\":\"var(--color-green-400)\"},\"className\":\"h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10\"}]}],[\"$\",\"$Le\",null,{\"as\":\"div\",\"anchor\":\"top\",\"className\":\"pointer-events-none z-10 translate-y-2 rounded-full border border-gray-950 bg-gray-950/90 py-0.5 pr-2 pb-1 pl-3 text-center font-mono text-xs/6 font-medium whitespace-nowrap text-white opacity-100 inset-ring inset-ring-white/10 transition-[opacity] starting:opacity-0\",\"children\":\"oklch(79.2% 0.209 151.711)\"}]]}],[\"$\",\"$Lc\",\"emerald\",{\"as\":\"div\",\"showDelayMs\":100,\"hideDelayMs\":0,\"className\":\"relative\",\"children\":[false,[\"$\",\"$Ld\",null,{\"children\":[\"$\",\"div\",null,{\"style\":{\"--color\":\"var(--color-emerald-400)\"},\"className\":\"h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10\"}]}],[\"$\",\"$Le\",null,{\"as\":\"div\",\"anchor\":\"top\",\"className\":\"pointer-events-none z-10 translate-y-2 rounded-full border border-gray-950 bg-gray-950/90 py-0.5 pr-2 pb-1 pl-3 text-center font-mono text-xs/6 font-medium whitespace-nowrap text-white opacity-100 inset-ring inset-ring-white/10 transition-[opacity] starting:opacity-0\",\"children\":\"oklch(76.5% 0.177 163.223)\"}]]}],[\"$\",\"$Lc\",\"teal\",{\"as\":\"div\",\"showDelayMs\":100,\"hideDelayMs\":0,\"className\":\"relative\",\"children\":[false,[\"$\",\"$Ld\",null,{\"children\":[\"$\",\"div\",null,{\"style\":{\"--color\":\"var(--color-teal-400)\"},\"className\":\"h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10\"}]}],[\"$\",\"$Le\",null,{\"as\":\"div\",\"anchor\":\"top\",\"className\":\"pointer-events-none z-10 translate-y-2 rounded-full border border-gray-950 bg-gray-950/90 py-0.5 pr-2 pb-1 pl-3 text-center font-mono text-xs/6 font-medium whitespace-nowrap text-white opacity-100 inset-ring inset-ring-white/10 transition-[opacity] starting:opacity-0\",\"children\":\"oklch(77.7% 0.152 181.912)\"}]]}],[\"$\",\"$Lc\",\"cyan\",{\"as\":\"div\",\"showDelayMs\":100,\"hideDelayMs\":0,\"className\":\"relative\",\"children\":[false,[\"$\",\"$Ld\",null,{\"children\":[\"$\",\"div\",null,{\"style\":{\"--color\":\"var(--color-cyan-400)\"},\"className\":\"h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10\"}]}],[\"$\",\"$Le\",null,{\"as\":\"div\",\"anchor\":\"top\",\"className\":\"pointer-events-none z-10 translate-y-2 rounded-full border border-gray-950 bg-gray-950/90 py-0.5 pr-2 pb-1 pl-3 text-center font-mono text-xs/6 font-medium whitespace-nowrap text-white opacity-100 inset-ring inset-ring-white/10 transition-[opacity] starting:opacity-0\",\"children\":\"oklch(78.9% 0.154 211.53)\"}]]}],[\"$\",\"$Lc\",\"sky\",{\"as\":\"div\",\"showDelayMs\":100,\"hideDelayMs\":0,\"className\":\"relative\",\"children\":[false,[\"$\",\"$Ld\",null,{\"children\":[\"$\",\"div\",null,{\"style\":{\"--color\":\"var(--color-sky-400)\"},\"className\":\"h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10\"}]}],[\"$\",\"$Le\",null,{\"as\":\"div\",\"anchor\":\"top\",\"className\":\"pointer-events-none z-10 translate-y-2 rounded-full border border-gray-950 bg-gray-950/90 py-0.5 pr-2 pb-1 pl-3 text-center font-mono text-xs/6 font-medium whitespace-nowrap text-white opacity-100 inset-ring inset-ring-white/10 transition-[opacity] starting:opacity-0\",\"children\":\"oklch(74.6% 0.16 232.661)\"}]]}],[\"$\",\"$Lc\",\"blue\",{\"as\":\"div\",\"showDelayMs\":100,\"hideDelayMs\":0,\"className\":\"relative\",\"children\":[false,[\"$\",\"$Ld\",null,{\"children\":[\"$\",\"div\",null,{\"style\":{\"--color\":\"var(--color-blue-400)\"},\"className\":\"h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10\"}]}],[\"$\",\"$Le\",null,{\"as\":\"div\",\"anchor\":\"top\",\"className\":\"pointer-events-none z-10 translate-y-2 rounded-full border border-gray-950 bg-gray-950/90 py-0.5 pr-2 pb-1 pl-3 text-center font-mono text-xs/6 font-medium whitespace-nowrap text-white opacity-100 inset-ring inset-ring-white/10 transition-[opacity] starting:opacity-0\",\"children\":\"oklch(70.7% 0.165 254.624)\"}]]}],[\"$\",\"$Lc\",\"indigo\",{\"as\":\"div\",\"showDelayMs\":100,\"hideDelayMs\":0,\"className\":\"relative\",\"children\":[false,[\"$\",\"$Ld\",null,{\"children\":[\"$\",\"div\",null,{\"style\":{\"--color\":\"var(--color-indigo-400)\"},\"className\":\"h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10\"}]}],[\"$\",\"$Le\",null,{\"as\":\"div\",\"anchor\":\"top\",\"className\":\"pointer-events-none z-10 translate-y-2 rounded-full border border-gray-950 bg-gray-950/90 py-0.5 pr-2 pb-1 pl-3 text-center font-mono text-xs/6 font-medium whitespace-nowrap text-white opacity-100 inset-ring inset-ring-white/10 transition-[opacity] starting:opacity-0\",\"children\":\"oklch(67.3% 0.182 276.935)\"}]]}],[\"$\",\"$Lc\",\"violet\",{\"as\":\"div\",\"showDelayMs\":100,\"hideDelayMs\":0,\"className\":\"relative\",\"children\":[false,[\"$\",\"$Ld\",null,{\"children\":[\"$\",\"div\",null,{\"style\":{\"--color\":\"var(--color-violet-400)\"},\"className\":\"h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10\"}]}],[\"$\",\"$Le\",null,{\"as\":\"div\",\"anchor\":\"top\",\"className\":\"pointer-events-none z-10 translate-y-2 rounded-full border border-gray-950 bg-gray-950/90 py-0.5 pr-2 pb-1 pl-3 text-center font-mono text-xs/6 font-medium whitespace-nowrap text-white opacity-100 inset-ring inset-ring-white/10 transition-[opacity] starting:opacity-0\",\"children\":\"oklch(70.2% 0.183 293.541)\"}]]}],[\"$\",\"$Lc\",\"purple\",{\"as\":\"div\",\"showDelayMs\":100,\"hideDelayMs\":0,\"className\":\"relative\",\"children\":[false,[\"$\",\"$Ld\",null,{\"children\":[\"$\",\"div\",null,{\"style\":{\"--color\":\"var(--color-purple-400)\"},\"className\":\"h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10\"}]}],[\"$\",\"$Le\",null,{\"as\":\"div\",\"anchor\":\"top\",\"className\":\"pointer-events-none z-10 translate-y-2 rounded-full border border-gray-950 bg-gray-950/90 py-0.5 pr-2 pb-1 pl-3 text-center font-mono text-xs/6 font-medium whitespace-nowrap text-white opacity-100 inset-ring inset-ring-white/10 transition-[opacity] starting:opacity-0\",\"children\":\"oklch(71.4% 0.203 305.504)\"}]]}],[\"$\",\"$Lc\",\"fuchsia\",{\"as\":\"div\",\"showDelayMs\":100,\"hideDelayMs\":0,\"className\":\"relative\",\"children\":[false,[\"$\",\"$Ld\",null,{\"children\":[\"$\",\"div\",null,{\"style\":{\"--color\":\"var(--color-fuchsia-400)\"},\"className\":\"h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10\"}]}],[\"$\",\"$Le\",null,{\"as\":\"div\",\"anchor\":\"top\",\"className\":\"pointer-events-none z-10 translate-y-2 rounded-full border border-gray-950 bg-gray-950/90 py-0.5 pr-2 pb-1 pl-3 text-center font-mono text-xs/6 font-medium whitespace-nowrap text-white opacity-100 inset-ring inset-ring-white/10 transition-[opacity] starting:opacity-0\",\"children\":\"oklch(74% 0.238 322.16)\"}]]}],[\"$\",\"$Lc\",\"pink\",{\"as\":\"div\",\"showDelayMs\":100,\"hideDelayMs\":0,\"className\":\"relative\",\"children\":[false,[\"$\",\"$Ld\",null,{\"children\":[\"$\",\"div\",null,{\"style\":{\"--color\":\"var(--color-pink-400)\"},\"className\":\"h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10\"}]}],[\"$\",\"$Le\",null,{\"as\":\"div\",\"anchor\":\"top\",\"className\":\"pointer-events-none z-10 translate-y-2 rounded-full border border-gray-950 bg-gray-950/90 py-0.5 pr-2 pb-1 pl-3 text-center font-mono text-xs/6 font-medium whitespace-nowrap text-white opacity-100 inset-ring inset-ring-white/10 transition-[opacity] starting:opacity-0\",\"children\":\"oklch(71.8% 0.202 349.761)\"}]]}],[\"$\",\"$Lc\",\"rose\",{\"as\":\"div\",\"showDelayMs\":100,\"hideDelayMs\":0,\"className\":\"relative\",\"children\":[false,[\"$\",\"$Ld\",null,{\"children\":[\"$\",\"div\",null,{\"style\":{\"--color\":\"var(--color-rose-400)\"},\"className\":\"h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10\"}]}],[\"$\",\"$Le\",null,{\"as\":\"div\",\"anchor\":\"top\",\"className\":\"pointer-events-none z-10 translate-y-2 rounded-full border border-gray-950 bg-gray-950/90 py-0.5 pr-2 pb-1 pl-3 text-center font-mono text-xs/6 font-medium whitespace-nowrap text-white opacity-100 inset-ring inset-ring-white/10 transition-[opacity] starting:opacity-0\",\"children\":\"oklch(71.2% 0.194 13.428)\"}]]}]]]}],[\"$\",\"$1\",\"300\",{\"children\":[[\"$\",\"div\",null,{\"className\":\"relative\",\"children\":[[\"$\",\"div\",null,{\"className\":\"absolute -mt-1 w-screen border-t border-gray-950/5 dark:border-white/10\"}],[\"$\",\"div\",null,{\"className\":\"flex h-(--height) w-(--width) items-center\",\"children\":[\"$\",\"div\",null,{\"className\":\"font-mono text-[13px]/7 text-gray-950 dark:text-white\",\"children\":300}]}]]}],[[\"$\",\"$Lc\",\"red\",{\"as\":\"div\",\"showDelayMs\":100,\"hideDelayMs\":0,\"className\":\"relative\",\"children\":[false,[\"$\",\"$Ld\",null,{\"children\":[\"$\",\"div\",null,{\"style\":{\"--color\":\"var(--color-red-300)\"},\"className\":\"h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10\"}]}],[\"$\",\"$Le\",null,{\"as\":\"div\",\"anchor\":\"top\",\"className\":\"pointer-events-none z-10 translate-y-2 rounded-full border border-gray-950 bg-gray-950/90 py-0.5 pr-2 pb-1 pl-3 text-center font-mono text-xs/6 font-medium whitespace-nowrap text-white opacity-100 inset-ring inset-ring-white/10 transition-[opacity] starting:opacity-0\",\"children\":\"oklch(80.8% 0.114 19.571)\"}]]}],[\"$\",\"$Lc\",\"orange\",{\"as\":\"div\",\"showDelayMs\":100,\"hideDelayMs\":0,\"className\":\"relative\",\"children\":[false,[\"$\",\"$Ld\",null,{\"children\":[\"$\",\"div\",null,{\"style\":{\"--color\":\"var(--color-orange-300)\"},\"className\":\"h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10\"}]}],[\"$\",\"$Le\",null,{\"as\":\"div\",\"anchor\":\"top\",\"className\":\"pointer-events-none z-10 translate-y-2 rounded-full border border-gray-950 bg-gray-950/90 py-0.5 pr-2 pb-1 pl-3 text-center font-mono text-xs/6 font-medium whitespace-nowrap text-white opacity-100 inset-ring inset-ring-white/10 transition-[opacity] starting:opacity-0\",\"children\":\"oklch(83.7% 0.128 66.29)\"}]]}],[\"$\",\"$Lc\",\"amber\",{\"as\":\"div\",\"showDelayMs\":100,\"hideDelayMs\":0,\"className\":\"relative\",\"children\":[false,[\"$\",\"$Ld\",null,{\"children\":[\"$\",\"div\",null,{\"style\":{\"--color\":\"var(--color-amber-300)\"},\"className\":\"h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10\"}]}],[\"$\",\"$Le\",null,{\"as\":\"div\",\"anchor\":\"top\",\"className\":\"pointer-events-none z-10 translate-y-2 rounded-full border border-gray-950 bg-gray-950/90 py-0.5 pr-2 pb-1 pl-3 text-center font-mono text-xs/6 font-medium whitespace-nowrap text-white opacity-100 inset-ring inset-ring-white/10 transition-[opacity] starting:opacity-0\",\"children\":\"oklch(87.9% 0.169 91.605)\"}]]}],[\"$\",\"$Lc\",\"yellow\",{\"as\":\"div\",\"showDelayMs\":100,\"hideDelayMs\":0,\"className\":\"relative\",\"children\":[false,[\"$\",\"$Ld\",null,{\"children\":[\"$\",\"div\",null,{\"style\":{\"--color\":\"var(--color-yellow-300)\"},\"className\":\"h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10\"}]}],[\"$\",\"$Le\",null,{\"as\":\"div\",\"anchor\":\"top\",\"className\":\"pointer-events-none z-10 translate-y-2 rounded-full border border-gray-950 bg-gray-950/90 py-0.5 pr-2 pb-1 pl-3 text-center font-mono text-xs/6 font-medium whitespace-nowrap text-white opacity-100 inset-ring inset-ring-white/10 transition-[opacity] starting:opacity-0\",\"children\":\"oklch(90.5% 0.182 98.111)\"}]]}],[\"$\",\"$Lc\",\"lime\",{\"as\":\"div\",\"showDelayMs\":100,\"hideDelayMs\":0,\"className\":\"relative\",\"children\":[false,[\"$\",\"$Ld\",null,{\"children\":[\"$\",\"div\",null,{\"style\":{\"--color\":\"var(--color-lime-300)\"},\"className\":\"h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10\"}]}],[\"$\",\"$Le\",null,{\"as\":\"div\",\"anchor\":\"top\",\"className\":\"pointer-events-none z-10 translate-y-2 rounded-full border border-gray-950 bg-gray-950/90 py-0.5 pr-2 pb-1 pl-3 text-center font-mono text-xs/6 font-medium whitespace-nowrap text-white opacity-100 inset-ring inset-ring-white/10 transition-[opacity] starting:opacity-0\",\"children\":\"oklch(89.7% 0.196 126.665)\"}]]}],[\"$\",\"$Lc\",\"green\",{\"as\":\"div\",\"showDelayMs\":100,\"hideDelayMs\":0,\"className\":\"relative\",\"children\":[false,[\"$\",\"$Ld\",null,{\"children\":[\"$\",\"div\",null,{\"style\":{\"--color\":\"var(--color-green-300)\"},\"className\":\"h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10\"}]}],[\"$\",\"$Le\",null,{\"as\":\"div\",\"anchor\":\"top\",\"className\":\"pointer-events-none z-10 translate-y-2 rounded-full border border-gray-950 bg-gray-950/90 py-0.5 pr-2 pb-1 pl-3 text-center font-mono text-xs/6 font-medium whitespace-nowrap text-white opacity-100 inset-ring inset-ring-white/10 transition-[opacity] starting:opacity-0\",\"children\":\"oklch(87.1% 0.15 154.449)\"}]]}],[\"$\",\"$Lc\",\"emerald\",{\"as\":\"div\",\"showDelayMs\":100,\"hideDelayMs\":0,\"className\":\"relative\",\"children\":[false,[\"$\",\"$Ld\",null,{\"children\":[\"$\",\"div\",null,{\"style\":{\"--color\":\"var(--color-emerald-300)\"},\"className\":\"h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10\"}]}],[\"$\",\"$Le\",null,{\"as\":\"div\",\"anchor\":\"top\",\"className\":\"pointer-events-none z-10 translate-y-2 rounded-full border border-gray-950 bg-gray-950/90 py-0.5 pr-2 pb-1 pl-3 text-center font-mono text-xs/6 font-medium whitespace-nowrap text-white opacity-100 inset-ring inset-ring-white/10 transition-[opacity] starting:opacity-0\",\"children\":\"oklch(84.5% 0.143 164.978)\"}]]}],[\"$\",\"$Lc\",\"teal\",{\"as\":\"div\",\"showDelayMs\":100,\"hideDelayMs\":0,\"className\":\"relative\",\"children\":[false,[\"$\",\"$Ld\",null,{\"children\":[\"$\",\"div\",null,{\"style\":{\"--color\":\"var(--color-teal-300)\"},\"className\":\"h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10\"}]}],[\"$\",\"$Le\",null,{\"as\":\"div\",\"anchor\":\"top\",\"className\":\"pointer-events-none z-10 translate-y-2 rounded-full border border-gray-950 bg-gray-950/90 py-0.5 pr-2 pb-1 pl-3 text-center font-mono text-xs/6 font-medium whitespace-nowrap text-white opacity-100 inset-ring inset-ring-white/10 transition-[opacity] starting:opacity-0\",\"children\":\"oklch(85.5% 0.138 181.071)\"}]]}],[\"$\",\"$Lc\",\"cyan\",{\"as\":\"div\",\"showDelayMs\":100,\"hideDelayMs\":0,\"className\":\"relative\",\"children\":[false,[\"$\",\"$Ld\",null,{\"children\":[\"$\",\"div\",null,{\"style\":{\"--color\":\"var(--color-cyan-300)\"},\"className\":\"h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10\"}]}],[\"$\",\"$Le\",null,{\"as\":\"div\",\"anchor\":\"top\",\"className\":\"pointer-events-none z-10 translate-y-2 rounded-full border border-gray-950 bg-gray-950/90 py-0.5 pr-2 pb-1 pl-3 text-center font-mono text-xs/6 font-medium whitespace-nowrap text-white opacity-100 inset-ring inset-ring-white/10 transition-[opacity] starting:opacity-0\",\"children\":\"oklch(86.5% 0.127 207.078)\"}]]}],[\"$\",\"$Lc\",\"sky\",{\"as\":\"div\",\"showDelayMs\":100,\"hideDelayMs\":0,\"className\":\"relative\",\"children\":[false,[\"$\",\"$Ld\",null,{\"children\":[\"$\",\"div\",null,{\"style\":{\"--color\":\"var(--color-sky-300)\"},\"className\":\"h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10\"}]}],[\"$\",\"$Le\",null,{\"as\":\"div\",\"anchor\":\"top\",\"className\":\"pointer-events-none z-10 translate-y-2 rounded-full border border-gray-950 bg-gray-950/90 py-0.5 pr-2 pb-1 pl-3 text-center font-mono text-xs/6 font-medium whitespace-nowrap text-white opacity-100 inset-ring inset-ring-white/10 transition-[opacity] starting:opacity-0\",\"children\":\"oklch(82.8% 0.111 230.318)\"}]]}],[\"$\",\"$Lc\",\"blue\",{\"as\":\"div\",\"showDelayMs\":100,\"hideDelayMs\":0,\"className\":\"relative\",\"children\":[false,[\"$\",\"$Ld\",null,{\"children\":[\"$\",\"div\",null,{\"style\":{\"--color\":\"var(--color-blue-300)\"},\"className\":\"h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10\"}]}],[\"$\",\"$Le\",null,{\"as\":\"div\",\"anchor\":\"top\",\"className\":\"pointer-events-none z-10 translate-y-2 rounded-full border border-gray-950 bg-gray-950/90 py-0.5 pr-2 pb-1 pl-3 text-center font-mono text-xs/6 font-medium whitespace-nowrap text-white opacity-100 inset-ring inset-ring-white/10 transition-[opacity] starting:opacity-0\",\"children\":\"oklch(80.9% 0.105 251.813)\"}]]}],[\"$\",\"$Lc\",\"indigo\",{\"as\":\"div\",\"showDelayMs\":100,\"hideDelayMs\":0,\"className\":\"relative\",\"children\":[false,[\"$\",\"$Ld\",null,{\"children\":[\"$\",\"div\",null,{\"style\":{\"--color\":\"var(--color-indigo-300)\"},\"className\":\"h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10\"}]}],[\"$\",\"$Le\",null,{\"as\":\"div\",\"anchor\":\"top\",\"className\":\"pointer-events-none z-10 translate-y-2 rounded-full border border-gray-950 bg-gray-950/90 py-0.5 pr-2 pb-1 pl-3 text-center font-mono text-xs/6 font-medium whitespace-nowrap text-white opacity-100 inset-ring inset-ring-white/10 transition-[opacity] starting:opacity-0\",\"children\":\"oklch(78.5% 0.115 274.713)\"}]]}],[\"$\",\"$Lc\",\"violet\",{\"as\":\"div\",\"showDelayMs\":100,\"hideDelayMs\":0,\"className\":\"relative\",\"children\":[false,[\"$\",\"$Ld\",null,{\"children\":[\"$\",\"div\",null,{\"style\":{\"--color\":\"var(--color-violet-300)\"},\"className\":\"h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10\"}]}],[\"$\",\"$Le\",null,{\"as\":\"div\",\"anchor\":\"top\",\"className\":\"pointer-events-none z-10 translate-y-2 rounded-full border border-gray-950 bg-gray-950/90 py-0.5 pr-2 pb-1 pl-3 text-center font-mono text-xs/6 font-medium whitespace-nowrap text-white opacity-100 inset-ring inset-ring-white/10 transition-[opacity] starting:opacity-0\",\"children\":\"oklch(81.1% 0.111 293.571)\"}]]}],[\"$\",\"$Lc\",\"purple\",{\"as\":\"div\",\"showDelayMs\":100,\"hideDelayMs\":0,\"className\":\"relative\",\"children\":[false,[\"$\",\"$Ld\",null,{\"children\":[\"$\",\"div\",null,{\"style\":{\"--color\":\"var(--color-purple-300)\"},\"className\":\"h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10\"}]}],[\"$\",\"$Le\",null,{\"as\":\"div\",\"anchor\":\"top\",\"className\":\"pointer-events-none z-10 translate-y-2 rounded-full border border-gray-950 bg-gray-950/90 py-0.5 pr-2 pb-1 pl-3 text-center font-mono text-xs/6 font-medium whitespace-nowrap text-white opacity-100 inset-ring inset-ring-white/10 transition-[opacity] starting:opacity-0\",\"children\":\"oklch(82.7% 0.119 306.383)\"}]]}],[\"$\",\"$Lc\",\"fuchsia\",{\"as\":\"div\",\"showDelayMs\":100,\"hideDelayMs\":0,\"className\":\"relative\",\"children\":[false,[\"$\",\"$Ld\",null,{\"children\":[\"$\",\"div\",null,{\"style\":{\"--color\":\"var(--color-fuchsia-300)\"},\"className\":\"h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10\"}]}],[\"$\",\"$Le\",null,{\"as\":\"div\",\"anchor\":\"top\",\"className\":\"pointer-events-none z-10 translate-y-2 rounded-full border border-gray-950 bg-gray-950/90 py-0.5 pr-2 pb-1 pl-3 text-center font-mono text-xs/6 font-medium whitespace-nowrap text-white opacity-100 inset-ring inset-ring-white/10 transition-[opacity] starting:opacity-0\",\"children\":\"oklch(83.3% 0.145 321.434)\"}]]}],[\"$\",\"$Lc\",\"pink\",{\"as\":\"div\",\"showDelayMs\":100,\"hideDelayMs\":0,\"className\":\"relative\",\"children\":[false,[\"$\",\"$Ld\",null,{\"children\":[\"$\",\"div\",null,{\"style\":{\"--color\":\"var(--color-pink-300)\"},\"className\":\"h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10\"}]}],[\"$\",\"$Le\",null,{\"as\":\"div\",\"anchor\":\"top\",\"className\":\"pointer-events-none z-10 translate-y-2 rounded-full border border-gray-950 bg-gray-950/90 py-0.5 pr-2 pb-1 pl-3 text-center font-mono text-xs/6 font-medium whitespace-nowrap text-white opacity-100 inset-ring inset-ring-white/10 transition-[opacity] starting:opacity-0\",\"children\":\"oklch(82.3% 0.12 346.018)\"}]]}],[\"$\",\"$Lc\",\"rose\",{\"as\":\"div\",\"showDelayMs\":100,\"hideDelayMs\":0,\"className\":\"relative\",\"children\":[false,[\"$\",\"$Ld\",null,{\"children\":[\"$\",\"div\",null,{\"style\":{\"--color\":\"var(--color-rose-300)\"},\"className\":\"h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10\"}]}],[\"$\",\"$Le\",null,{\"as\":\"div\",\"anchor\":\"top\",\"className\":\"pointer-events-none z-10 translate-y-2 rounded-full border border-gray-950 bg-gray-950/90 py-0.5 pr-2 pb-1 pl-3 text-center font-mono text-xs/6 font-medium whitespace-nowrap text-white opacity-100 inset-ring inset-ring-white/10 transition-[opacity] starting:opacity-0\",\"children\":\"oklch(81% 0.117 11.638)\"}]]}]]]}],[\"$\",\"$1\",\"200\",{\"children\":[[\"$\",\"div\",null,{\"className\":\"relative\",\"children\":[[\"$\",\"div\",null,{\"className\":\"absolute -mt-1 w-screen border-t border-gray-950/5 dark:border-white/10\"}],[\"$\",\"div\",null,{\"className\":\"flex h-(--height) w-(--width) items-center\",\"children\":[\"$\",\"div\",null,{\"className\":\"font-mono text-[13px]/7 text-gray-950 dark:text-white\",\"children\":200}]}]]}],[[\"$\",\"$Lc\",\"red\",{\"as\":\"div\",\"showDelayMs\":100,\"hideDelayMs\":0,\"className\":\"relative\",\"children\":[false,[\"$\",\"$Ld\",null,{\"children\":[\"$\",\"div\",null,{\"style\":{\"--color\":\"var(--color-red-200)\"},\"className\":\"h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10\"}]}],[\"$\",\"$Le\",null,{\"as\":\"div\",\"anchor\":\"top\",\"className\":\"pointer-events-none z-10 translate-y-2 rounded-full border border-gray-950 bg-gray-950/90 py-0.5 pr-2 pb-1 pl-3 text-center font-mono text-xs/6 font-medium whitespace-nowrap text-white opacity-100 inset-ring inset-ring-white/10 transition-[opacity] starting:opacity-0\",\"children\":\"oklch(88.5% 0.062 18.334)\"}]]}],[\"$\",\"$Lc\",\"orange\",{\"as\":\"div\",\"showDelayMs\":100,\"hideDelayMs\":0,\"className\":\"relative\",\"children\":[false,[\"$\",\"$Ld\",null,{\"children\":[\"$\",\"div\",null,{\"style\":{\"--color\":\"var(--color-orange-200)\"},\"className\":\"h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10\"}]}],[\"$\",\"$Le\",null,{\"as\":\"div\",\"anchor\":\"top\",\"className\":\"pointer-events-none z-10 translate-y-2 rounded-full border border-gray-950 bg-gray-950/90 py-0.5 pr-2 pb-1 pl-3 text-center font-mono text-xs/6 font-medium whitespace-nowrap text-white opacity-100 inset-ring inset-ring-white/10 transition-[opacity] starting:opacity-0\",\"children\":\"oklch(90.1% 0.076 70.697)\"}]]}],[\"$\",\"$Lc\",\"amber\",{\"as\":\"div\",\"showDelayMs\":100,\"hideDelayMs\":0,\"className\":\"relative\",\"children\":[false,[\"$\",\"$Ld\",null,{\"children\":[\"$\",\"div\",null,{\"style\":{\"--color\":\"var(--color-amber-200)\"},\"className\":\"h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10\"}]}],[\"$\",\"$Le\",null,{\"as\":\"div\",\"anchor\":\"top\",\"className\":\"pointer-events-none z-10 translate-y-2 rounded-full border border-gray-950 bg-gray-950/90 py-0.5 pr-2 pb-1 pl-3 text-center font-mono text-xs/6 font-medium whitespace-nowrap text-white opacity-100 inset-ring inset-ring-white/10 transition-[opacity] starting:opacity-0\",\"children\":\"oklch(92.4% 0.12 95.746)\"}]]}],[\"$\",\"$Lc\",\"yellow\",{\"as\":\"div\",\"showDelayMs\":100,\"hideDelayMs\":0,\"className\":\"relative\",\"children\":[false,[\"$\",\"$Ld\",null,{\"children\":[\"$\",\"div\",null,{\"style\":{\"--color\":\"var(--color-yellow-200)\"},\"className\":\"h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10\"}]}],[\"$\",\"$Le\",null,{\"as\":\"div\",\"anchor\":\"top\",\"className\":\"pointer-events-none z-10 translate-y-2 rounded-full border border-gray-950 bg-gray-950/90 py-0.5 pr-2 pb-1 pl-3 text-center font-mono text-xs/6 font-medium whitespace-nowrap text-white opacity-100 inset-ring inset-ring-white/10 transition-[opacity] starting:opacity-0\",\"children\":\"oklch(94.5% 0.129 101.54)\"}]]}],[\"$\",\"$Lc\",\"lime\",{\"as\":\"div\",\"showDelayMs\":100,\"hideDelayMs\":0,\"className\":\"relative\",\"children\":[false,[\"$\",\"$Ld\",null,{\"children\":[\"$\",\"div\",null,{\"style\":{\"--color\":\"var(--color-lime-200)\"},\"className\":\"h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10\"}]}],[\"$\",\"$Le\",null,{\"as\":\"div\",\"anchor\":\"top\",\"className\":\"pointer-events-none z-10 translate-y-2 rounded-full border border-gray-950 bg-gray-950/90 py-0.5 pr-2 pb-1 pl-3 text-center font-mono text-xs/6 font-medium whitespace-nowrap text-white opacity-100 inset-ring inset-ring-white/10 transition-[opacity] starting:opacity-0\",\"children\":\"oklch(93.8% 0.127 124.321)\"}]]}],[\"$\",\"$Lc\",\"green\",{\"as\":\"div\",\"showDelayMs\":100,\"hideDelayMs\":0,\"className\":\"relative\",\"children\":[false,[\"$\",\"$Ld\",null,{\"children\":[\"$\",\"div\",null,{\"style\":{\"--color\":\"var(--color-green-200)\"},\"className\":\"h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10\"}]}],[\"$\",\"$Le\",null,{\"as\":\"div\",\"anchor\":\"top\",\"className\":\"pointer-events-none z-10 translate-y-2 rounded-full border border-gray-950 bg-gray-950/90 py-0.5 pr-2 pb-1 pl-3 text-center font-mono text-xs/6 font-medium whitespace-nowrap text-white opacity-100 inset-ring inset-ring-white/10 transition-[opacity] starting:opacity-0\",\"children\":\"oklch(92.5% 0.084 155.995)\"}]]}],[\"$\",\"$Lc\",\"emerald\",{\"as\":\"div\",\"showDelayMs\":100,\"hideDelayMs\":0,\"className\":\"relative\",\"children\":[false,[\"$\",\"$Ld\",null,{\"children\":[\"$\",\"div\",null,{\"style\":{\"--color\":\"var(--color-emerald-200)\"},\"className\":\"h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10\"}]}],[\"$\",\"$Le\",null,{\"as\":\"div\",\"anchor\":\"top\",\"className\":\"pointer-events-none z-10 translate-y-2 rounded-full border border-gray-950 bg-gray-950/90 py-0.5 pr-2 pb-1 pl-3 text-center font-mono text-xs/6 font-medium whitespace-nowrap text-white opacity-100 inset-ring inset-ring-white/10 transition-[opacity] starting:opacity-0\",\"children\":\"oklch(90.5% 0.093 164.15)\"}]]}],[\"$\",\"$Lc\",\"teal\",{\"as\":\"div\",\"showDelayMs\":100,\"hideDelayMs\":0,\"className\":\"relative\",\"children\":[false,[\"$\",\"$Ld\",null,{\"children\":[\"$\",\"div\",null,{\"style\":{\"--color\":\"var(--color-teal-200)\"},\"className\":\"h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10\"}]}],[\"$\",\"$Le\",null,{\"as\":\"div\",\"anchor\":\"top\",\"className\":\"pointer-events-none z-10 translate-y-2 rounded-full border border-gray-950 bg-gray-950/90 py-0.5 pr-2 pb-1 pl-3 text-center font-mono text-xs/6 font-medium whitespace-nowrap text-white opacity-100 inset-ring inset-ring-white/10 transition-[opacity] starting:opacity-0\",\"children\":\"oklch(91% 0.096 180.426)\"}]]}],[\"$\",\"$Lc\",\"cyan\",{\"as\":\"div\",\"showDelayMs\":100,\"hideDelayMs\":0,\"className\":\"relative\",\"children\":[false,[\"$\",\"$Ld\",null,{\"children\":[\"$\",\"div\",null,{\"style\":{\"--color\":\"var(--color-cyan-200)\"},\"className\":\"h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10\"}]}],[\"$\",\"$Le\",null,{\"as\":\"div\",\"anchor\":\"top\",\"className\":\"pointer-events-none z-10 translate-y-2 rounded-full border border-gray-950 bg-gray-950/90 py-0.5 pr-2 pb-1 pl-3 text-center font-mono text-xs/6 font-medium whitespace-nowrap text-white opacity-100 inset-ring inset-ring-white/10 transition-[opacity] starting:opacity-0\",\"children\":\"oklch(91.7% 0.08 205.041)\"}]]}],[\"$\",\"$Lc\",\"sky\",{\"as\":\"div\",\"showDelayMs\":100,\"hideDelayMs\":0,\"className\":\"relative\",\"children\":[false,[\"$\",\"$Ld\",null,{\"children\":[\"$\",\"div\",null,{\"style\":{\"--color\":\"var(--color-sky-200)\"},\"className\":\"h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10\"}]}],[\"$\",\"$Le\",null,{\"as\":\"div\",\"anchor\":\"top\",\"className\":\"pointer-events-none z-10 translate-y-2 rounded-full border border-gray-950 bg-gray-950/90 py-0.5 pr-2 pb-1 pl-3 text-center font-mono text-xs/6 font-medium whitespace-nowrap text-white opacity-100 inset-ring inset-ring-white/10 transition-[opacity] starting:opacity-0\",\"children\":\"oklch(90.1% 0.058 230.902)\"}]]}],[\"$\",\"$Lc\",\"blue\",{\"as\":\"div\",\"showDelayMs\":100,\"hideDelayMs\":0,\"className\":\"relative\",\"children\":[false,[\"$\",\"$Ld\",null,{\"children\":[\"$\",\"div\",null,{\"style\":{\"--color\":\"var(--color-blue-200)\"},\"className\":\"h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10\"}]}],[\"$\",\"$Le\",null,{\"as\":\"div\",\"anchor\":\"top\",\"className\":\"pointer-events-none z-10 translate-y-2 rounded-full border border-gray-950 bg-gray-950/90 py-0.5 pr-2 pb-1 pl-3 text-center font-mono text-xs/6 font-medium whitespace-nowrap text-white opacity-100 inset-ring inset-ring-white/10 transition-[opacity] starting:opacity-0\",\"children\":\"oklch(88.2% 0.059 254.128)\"}]]}],[\"$\",\"$Lc\",\"indigo\",{\"as\":\"div\",\"showDelayMs\":100,\"hideDelayMs\":0,\"className\":\"relative\",\"children\":[false,[\"$\",\"$Ld\",null,{\"children\":[\"$\",\"div\",null,{\"style\":{\"--color\":\"var(--color-indigo-200)\"},\"className\":\"h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10\"}]}],[\"$\",\"$Le\",null,{\"as\":\"div\",\"anchor\":\"top\",\"className\":\"pointer-events-none z-10 translate-y-2 rounded-full border border-gray-950 bg-gray-950/90 py-0.5 pr-2 pb-1 pl-3 text-center font-mono text-xs/6 font-medium whitespace-nowrap text-white opacity-100 inset-ring inset-ring-white/10 transition-[opacity] starting:opacity-0\",\"children\":\"oklch(87% 0.065 274.039)\"}]]}],[\"$\",\"$Lc\",\"violet\",{\"as\":\"div\",\"showDelayMs\":100,\"hideDelayMs\":0,\"className\":\"relative\",\"children\":[false,[\"$\",\"$Ld\",null,{\"children\":[\"$\",\"div\",null,{\"style\":{\"--color\":\"var(--color-violet-200)\"},\"className\":\"h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10\"}]}],[\"$\",\"$Le\",null,{\"as\":\"div\",\"anchor\":\"top\",\"className\":\"pointer-events-none z-10 translate-y-2 rounded-full border border-gray-950 bg-gray-950/90 py-0.5 pr-2 pb-1 pl-3 text-center font-mono text-xs/6 font-medium whitespace-nowrap text-white opacity-100 inset-ring inset-ring-white/10 transition-[opacity] starting:opacity-0\",\"children\":\"oklch(89.4% 0.057 293.283)\"}]]}],[\"$\",\"$Lc\",\"purple\",{\"as\":\"div\",\"showDelayMs\":100,\"hideDelayMs\":0,\"className\":\"relative\",\"children\":[false,[\"$\",\"$Ld\",null,{\"children\":[\"$\",\"div\",null,{\"style\":{\"--color\":\"var(--color-purple-200)\"},\"className\":\"h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10\"}]}],[\"$\",\"$Le\",null,{\"as\":\"div\",\"anchor\":\"top\",\"className\":\"pointer-events-none z-10 translate-y-2 rounded-full border border-gray-950 bg-gray-950/90 py-0.5 pr-2 pb-1 pl-3 text-center font-mono text-xs/6 font-medium whitespace-nowrap text-white opacity-100 inset-ring inset-ring-white/10 transition-[opacity] starting:opacity-0\",\"children\":\"oklch(90.2% 0.063 306.703)\"}]]}],[\"$\",\"$Lc\",\"fuchsia\",{\"as\":\"div\",\"showDelayMs\":100,\"hideDelayMs\":0,\"className\":\"relative\",\"children\":[false,[\"$\",\"$Ld\",null,{\"children\":[\"$\",\"div\",null,{\"style\":{\"--color\":\"var(--color-fuchsia-200)\"},\"className\":\"h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10\"}]}],[\"$\",\"$Le\",null,{\"as\":\"div\",\"anchor\":\"top\",\"className\":\"pointer-events-none z-10 translate-y-2 rounded-full border border-gray-950 bg-gray-950/90 py-0.5 pr-2 pb-1 pl-3 text-center font-mono text-xs/6 font-medium whitespace-nowrap text-white opacity-100 inset-ring inset-ring-white/10 transition-[opacity] starting:opacity-0\",\"children\":\"oklch(90.3% 0.076 319.62)\"}]]}],[\"$\",\"$Lc\",\"pink\",{\"as\":\"div\",\"showDelayMs\":100,\"hideDelayMs\":0,\"className\":\"relative\",\"children\":[false,[\"$\",\"$Ld\",null,{\"children\":[\"$\",\"div\",null,{\"style\":{\"--color\":\"var(--color-pink-200)\"},\"className\":\"h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10\"}]}],[\"$\",\"$Le\",null,{\"as\":\"div\",\"anchor\":\"top\",\"className\":\"pointer-events-none z-10 translate-y-2 rounded-full border border-gray-950 bg-gray-950/90 py-0.5 pr-2 pb-1 pl-3 text-center font-mono text-xs/6 font-medium whitespace-nowrap text-white opacity-100 inset-ring inset-ring-white/10 transition-[opacity] starting:opacity-0\",\"children\":\"oklch(89.9% 0.061 343.231)\"}]]}],[\"$\",\"$Lc\",\"rose\",{\"as\":\"div\",\"showDelayMs\":100,\"hideDelayMs\":0,\"className\":\"relative\",\"children\":[false,[\"$\",\"$Ld\",null,{\"children\":[\"$\",\"div\",null,{\"style\":{\"--color\":\"var(--color-rose-200)\"},\"className\":\"h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10\"}]}],[\"$\",\"$Le\",null,{\"as\":\"div\",\"anchor\":\"top\",\"className\":\"pointer-events-none z-10 translate-y-2 rounded-full border border-gray-950 bg-gray-950/90 py-0.5 pr-2 pb-1 pl-3 text-center font-mono text-xs/6 font-medium whitespace-nowrap text-white opacity-100 inset-ring inset-ring-white/10 transition-[opacity] starting:opacity-0\",\"children\":\"oklch(89.2% 0.058 10.001)\"}]]}]]]}],[\"$\",\"$1\",\"100\",{\"children\":[[\"$\",\"div\",null,{\"className\":\"relative\",\"children\":[[\"$\",\"div\",null,{\"className\":\"absolute -mt-1 w-screen border-t border-gray-950/5 dark:border-white/10\"}],[\"$\",\"div\",null,{\"className\":\"flex h-(--height) w-(--width) items-center\",\"children\":[\"$\",\"div\",null,{\"className\":\"font-mono text-[13px]/7 text-gray-950 dark:text-white\",\"children\":100}]}]]}],[[\"$\",\"$Lc\",\"red\",{\"as\":\"div\",\"showDelayMs\":100,\"hideDelayMs\":0,\"className\":\"relative\",\"children\":[false,[\"$\",\"$Ld\",null,{\"children\":[\"$\",\"div\",null,{\"style\":{\"--color\":\"var(--color-red-100)\"},\"className\":\"h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10\"}]}],[\"$\",\"$Le\",null,{\"as\":\"div\",\"anchor\":\"top\",\"className\":\"pointer-events-none z-10 translate-y-2 rounded-full border border-gray-950 bg-gray-950/90 py-0.5 pr-2 pb-1 pl-3 text-center font-mono text-xs/6 font-medium whitespace-nowrap text-white opacity-100 inset-ring inset-ring-white/10 transition-[opacity] starting:opacity-0\",\"children\":\"oklch(93.6% 0.032 17.717)\"}]]}],[\"$\",\"$Lc\",\"orange\",{\"as\":\"div\",\"showDelayMs\":100,\"hideDelayMs\":0,\"className\":\"relative\",\"children\":[false,[\"$\",\"$Ld\",null,{\"children\":[\"$\",\"div\",null,{\"style\":{\"--color\":\"var(--color-orange-100)\"},\"className\":\"h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10\"}]}],[\"$\",\"$Le\",null,{\"as\":\"div\",\"anchor\":\"top\",\"className\":\"pointer-events-none z-10 translate-y-2 rounded-full border border-gray-950 bg-gray-950/90 py-0.5 pr-2 pb-1 pl-3 text-center font-mono text-xs/6 font-medium whitespace-nowrap text-white opacity-100 inset-ring inset-ring-white/10 transition-[opacity] starting:opacity-0\",\"children\":\"oklch(95.4% 0.038 75.164)\"}]]}],[\"$\",\"$Lc\",\"amber\",{\"as\":\"div\",\"showDelayMs\":100,\"hideDelayMs\":0,\"className\":\"relative\",\"children\":[false,[\"$\",\"$Ld\",null,{\"children\":[\"$\",\"div\",null,{\"style\":{\"--color\":\"var(--color-amber-100)\"},\"className\":\"h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10\"}]}],[\"$\",\"$Le\",null,{\"as\":\"div\",\"anchor\":\"top\",\"className\":\"pointer-events-none z-10 translate-y-2 rounded-full border border-gray-950 bg-gray-950/90 py-0.5 pr-2 pb-1 pl-3 text-center font-mono text-xs/6 font-medium whitespace-nowrap text-white opacity-100 inset-ring inset-ring-white/10 transition-[opacity] starting:opacity-0\",\"children\":\"oklch(96.2% 0.059 95.617)\"}]]}],[\"$\",\"$Lc\",\"yellow\",{\"as\":\"div\",\"showDelayMs\":100,\"hideDelayMs\":0,\"className\":\"relative\",\"children\":[false,[\"$\",\"$Ld\",null,{\"children\":[\"$\",\"div\",null,{\"style\":{\"--color\":\"var(--color-yellow-100)\"},\"className\":\"h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10\"}]}],[\"$\",\"$Le\",null,{\"as\":\"div\",\"anchor\":\"top\",\"className\":\"pointer-events-none z-10 translate-y-2 rounded-full border border-gray-950 bg-gray-950/90 py-0.5 pr-2 pb-1 pl-3 text-center font-mono text-xs/6 font-medium whitespace-nowrap text-white opacity-100 inset-ring inset-ring-white/10 transition-[opacity] starting:opacity-0\",\"children\":\"oklch(97.3% 0.071 103.193)\"}]]}],[\"$\",\"$Lc\",\"lime\",{\"as\":\"div\",\"showDelayMs\":100,\"hideDelayMs\":0,\"className\":\"relative\",\"children\":[false,[\"$\",\"$Ld\",null,{\"children\":[\"$\",\"div\",null,{\"style\":{\"--color\":\"var(--color-lime-100)\"},\"className\":\"h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10\"}]}],[\"$\",\"$Le\",null,{\"as\":\"div\",\"anchor\":\"top\",\"className\":\"pointer-events-none z-10 translate-y-2 rounded-full border border-gray-950 bg-gray-950/90 py-0.5 pr-2 pb-1 pl-3 text-center font-mono text-xs/6 font-medium whitespace-nowrap text-white opacity-100 inset-ring inset-ring-white/10 transition-[opacity] starting:opacity-0\",\"children\":\"oklch(96.7% 0.067 122.328)\"}]]}],[\"$\",\"$Lc\",\"green\",{\"as\":\"div\",\"showDelayMs\":100,\"hideDelayMs\":0,\"className\":\"relative\",\"children\":[false,[\"$\",\"$Ld\",null,{\"children\":[\"$\",\"div\",null,{\"style\":{\"--color\":\"var(--color-green-100)\"},\"className\":\"h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10\"}]}],[\"$\",\"$Le\",null,{\"as\":\"div\",\"anchor\":\"top\",\"className\":\"pointer-events-none z-10 translate-y-2 rounded-full border border-gray-950 bg-gray-950/90 py-0.5 pr-2 pb-1 pl-3 text-center font-mono text-xs/6 font-medium whitespace-nowrap text-white opacity-100 inset-ring inset-ring-white/10 transition-[opacity] starting:opacity-0\",\"children\":\"oklch(96.2% 0.044 156.743)\"}]]}],[\"$\",\"$Lc\",\"emerald\",{\"as\":\"div\",\"showDelayMs\":100,\"hideDelayMs\":0,\"className\":\"relative\",\"children\":[false,[\"$\",\"$Ld\",null,{\"children\":[\"$\",\"div\",null,{\"style\":{\"--color\":\"var(--color-emerald-100)\"},\"className\":\"h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10\"}]}],[\"$\",\"$Le\",null,{\"as\":\"div\",\"anchor\":\"top\",\"className\":\"pointer-events-none z-10 translate-y-2 rounded-full border border-gray-950 bg-gray-950/90 py-0.5 pr-2 pb-1 pl-3 text-center font-mono text-xs/6 font-medium whitespace-nowrap text-white opacity-100 inset-ring inset-ring-white/10 transition-[opacity] starting:opacity-0\",\"children\":\"oklch(95% 0.052 163.051)\"}]]}],[\"$\",\"$Lc\",\"teal\",{\"as\":\"div\",\"showDelayMs\":100,\"hideDelayMs\":0,\"className\":\"relative\",\"children\":[false,[\"$\",\"$Ld\",null,{\"children\":[\"$\",\"div\",null,{\"style\":{\"--color\":\"var(--color-teal-100)\"},\"className\":\"h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10\"}]}],[\"$\",\"$Le\",null,{\"as\":\"div\",\"anchor\":\"top\",\"className\":\"pointer-events-none z-10 translate-y-2 rounded-full border border-gray-950 bg-gray-950/90 py-0.5 pr-2 pb-1 pl-3 text-center font-mono text-xs/6 font-medium whitespace-nowrap text-white opacity-100 inset-ring inset-ring-white/10 transition-[opacity] starting:opacity-0\",\"children\":\"oklch(95.3% 0.051 180.801)\"}]]}],[\"$\",\"$Lc\",\"cyan\",{\"as\":\"div\",\"showDelayMs\":100,\"hideDelayMs\":0,\"className\":\"relative\",\"children\":[false,[\"$\",\"$Ld\",null,{\"children\":[\"$\",\"div\",null,{\"style\":{\"--color\":\"var(--color-cyan-100)\"},\"className\":\"h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10\"}]}],[\"$\",\"$Le\",null,{\"as\":\"div\",\"anchor\":\"top\",\"className\":\"pointer-events-none z-10 translate-y-2 rounded-full border border-gray-950 bg-gray-950/90 py-0.5 pr-2 pb-1 pl-3 text-center font-mono text-xs/6 font-medium whitespace-nowrap text-white opacity-100 inset-ring inset-ring-white/10 transition-[opacity] starting:opacity-0\",\"children\":\"oklch(95.6% 0.045 203.388)\"}]]}],[\"$\",\"$Lc\",\"sky\",{\"as\":\"div\",\"showDelayMs\":100,\"hideDelayMs\":0,\"className\":\"relative\",\"children\":[false,[\"$\",\"$Ld\",null,{\"children\":[\"$\",\"div\",null,{\"style\":{\"--color\":\"var(--color-sky-100)\"},\"className\":\"h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10\"}]}],[\"$\",\"$Le\",null,{\"as\":\"div\",\"anchor\":\"top\",\"className\":\"pointer-events-none z-10 translate-y-2 rounded-full border border-gray-950 bg-gray-950/90 py-0.5 pr-2 pb-1 pl-3 text-center font-mono text-xs/6 font-medium whitespace-nowrap text-white opacity-100 inset-ring inset-ring-white/10 transition-[opacity] starting:opacity-0\",\"children\":\"oklch(95.1% 0.026 236.824)\"}]]}],[\"$\",\"$Lc\",\"blue\",{\"as\":\"div\",\"showDelayMs\":100,\"hideDelayMs\":0,\"className\":\"relative\",\"children\":[false,[\"$\",\"$Ld\",null,{\"children\":[\"$\",\"div\",null,{\"style\":{\"--color\":\"var(--color-blue-100)\"},\"className\":\"h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10\"}]}],[\"$\",\"$Le\",null,{\"as\":\"div\",\"anchor\":\"top\",\"className\":\"pointer-events-none z-10 translate-y-2 rounded-full border border-gray-950 bg-gray-950/90 py-0.5 pr-2 pb-1 pl-3 text-center font-mono text-xs/6 font-medium whitespace-nowrap text-white opacity-100 inset-ring inset-ring-white/10 transition-[opacity] starting:opacity-0\",\"children\":\"oklch(93.2% 0.032 255.585)\"}]]}],[\"$\",\"$Lc\",\"indigo\",{\"as\":\"div\",\"showDelayMs\":100,\"hideDelayMs\":0,\"className\":\"relative\",\"children\":[false,[\"$\",\"$Ld\",null,{\"children\":[\"$\",\"div\",null,{\"style\":{\"--color\":\"var(--color-indigo-100)\"},\"className\":\"h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10\"}]}],[\"$\",\"$Le\",null,{\"as\":\"div\",\"anchor\":\"top\",\"className\":\"pointer-events-none z-10 translate-y-2 rounded-full border border-gray-950 bg-gray-950/90 py-0.5 pr-2 pb-1 pl-3 text-center font-mono text-xs/6 font-medium whitespace-nowrap text-white opacity-100 inset-ring inset-ring-white/10 transition-[opacity] starting:opacity-0\",\"children\":\"oklch(93% 0.034 272.788)\"}]]}],[\"$\",\"$Lc\",\"violet\",{\"as\":\"div\",\"showDelayMs\":100,\"hideDelayMs\":0,\"className\":\"relative\",\"children\":[false,[\"$\",\"$Ld\",null,{\"children\":[\"$\",\"div\",null,{\"style\":{\"--color\":\"var(--color-violet-100)\"},\"className\":\"h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10\"}]}],[\"$\",\"$Le\",null,{\"as\":\"div\",\"anchor\":\"top\",\"className\":\"pointer-events-none z-10 translate-y-2 rounded-full border border-gray-950 bg-gray-950/90 py-0.5 pr-2 pb-1 pl-3 text-center font-mono text-xs/6 font-medium whitespace-nowrap text-white opacity-100 inset-ring inset-ring-white/10 transition-[opacity] starting:opacity-0\",\"children\":\"oklch(94.3% 0.029 294.588)\"}]]}],[\"$\",\"$Lc\",\"purple\",{\"as\":\"div\",\"showDelayMs\":100,\"hideDelayMs\":0,\"className\":\"relative\",\"children\":[false,[\"$\",\"$Ld\",null,{\"children\":[\"$\",\"div\",null,{\"style\":{\"--color\":\"var(--color-purple-100)\"},\"className\":\"h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10\"}]}],[\"$\",\"$Le\",null,{\"as\":\"div\",\"anchor\":\"top\",\"className\":\"pointer-events-none z-10 translate-y-2 rounded-full border border-gray-950 bg-gray-950/90 py-0.5 pr-2 pb-1 pl-3 text-center font-mono text-xs/6 font-medium whitespace-nowrap text-white opacity-100 inset-ring inset-ring-white/10 transition-[opacity] starting:opacity-0\",\"children\":\"oklch(94.6% 0.033 307.174)\"}]]}],[\"$\",\"$Lc\",\"fuchsia\",{\"as\":\"div\",\"showDelayMs\":100,\"hideDelayMs\":0,\"className\":\"relative\",\"children\":[false,[\"$\",\"$Ld\",null,{\"children\":[\"$\",\"div\",null,{\"style\":{\"--color\":\"var(--color-fuchsia-100)\"},\"className\":\"h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10\"}]}],[\"$\",\"$Le\",null,{\"as\":\"div\",\"anchor\":\"top\",\"className\":\"pointer-events-none z-10 translate-y-2 rounded-full border border-gray-950 bg-gray-950/90 py-0.5 pr-2 pb-1 pl-3 text-center font-mono text-xs/6 font-medium whitespace-nowrap text-white opacity-100 inset-ring inset-ring-white/10 transition-[opacity] starting:opacity-0\",\"children\":\"oklch(95.2% 0.037 318.852)\"}]]}],[\"$\",\"$Lc\",\"pink\",{\"as\":\"div\",\"showDelayMs\":100,\"hideDelayMs\":0,\"className\":\"relative\",\"children\":[false,[\"$\",\"$Ld\",null,{\"children\":[\"$\",\"div\",null,{\"style\":{\"--color\":\"var(--color-pink-100)\"},\"className\":\"h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10\"}]}],[\"$\",\"$Le\",null,{\"as\":\"div\",\"anchor\":\"top\",\"className\":\"pointer-events-none z-10 translate-y-2 rounded-full border border-gray-950 bg-gray-950/90 py-0.5 pr-2 pb-1 pl-3 text-center font-mono text-xs/6 font-medium whitespace-nowrap text-white opacity-100 inset-ring inset-ring-white/10 transition-[opacity] starting:opacity-0\",\"children\":\"oklch(94.8% 0.028 342.258)\"}]]}],[\"$\",\"$Lc\",\"rose\",{\"as\":\"div\",\"showDelayMs\":100,\"hideDelayMs\":0,\"className\":\"relative\",\"children\":[false,[\"$\",\"$Ld\",null,{\"children\":[\"$\",\"div\",null,{\"style\":{\"--color\":\"var(--color-rose-100)\"},\"className\":\"h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10\"}]}],[\"$\",\"$Le\",null,{\"as\":\"div\",\"anchor\":\"top\",\"className\":\"pointer-events-none z-10 translate-y-2 rounded-full border border-gray-950 bg-gray-950/90 py-0.5 pr-2 pb-1 pl-3 text-center font-mono text-xs/6 font-medium whitespace-nowrap text-white opacity-100 inset-ring inset-ring-white/10 transition-[opacity] starting:opacity-0\",\"children\":\"oklch(94.1% 0.03 12.58)\"}]]}]]]}],[\"$\",\"$1\",\"50\",{\"children\":[[\"$\",\"div\",null,{\"className\":\"relative\",\"children\":[[\"$\",\"div\",null,{\"className\":\"absolute -mt-1 w-screen border-t border-gray-950/5 dark:border-white/10\"}],[\"$\",\"div\",null,{\"className\":\"flex h-(--height) w-(--width) items-center\",\"children\":[\"$\",\"div\",null,{\"className\":\"font-mono text-[13px]/7 text-gray-950 dark:text-white\",\"children\":50}]}]]}],[[\"$\",\"$Lc\",\"red\",{\"as\":\"div\",\"showDelayMs\":100,\"hideDelayMs\":0,\"className\":\"relative\",\"children\":[false,[\"$\",\"$Ld\",null,{\"children\":[\"$\",\"div\",null,{\"style\":{\"--color\":\"var(--color-red-50)\"},\"className\":\"h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10\"}]}],[\"$\",\"$Le\",null,{\"as\":\"div\",\"anchor\":\"top\",\"className\":\"pointer-events-none z-10 translate-y-2 rounded-full border border-gray-950 bg-gray-950/90 py-0.5 pr-2 pb-1 pl-3 text-center font-mono text-xs/6 font-medium whitespace-nowrap text-white opacity-100 inset-ring inset-ring-white/10 transition-[opacity] starting:opacity-0\",\"children\":\"oklch(97.1% 0.013 17.38)\"}]]}],[\"$\",\"$Lc\",\"orange\",{\"as\":\"div\",\"showDelayMs\":100,\"hideDelayMs\":0,\"className\":\"relative\",\"children\":[false,[\"$\",\"$Ld\",null,{\"children\":[\"$\",\"div\",null,{\"style\":{\"--color\":\"var(--color-orange-50)\"},\"className\":\"h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10\"}]}],[\"$\",\"$Le\",null,{\"as\":\"div\",\"anchor\":\"top\",\"className\":\"pointer-events-none z-10 translate-y-2 rounded-full border border-gray-950 bg-gray-950/90 py-0.5 pr-2 pb-1 pl-3 text-center font-mono text-xs/6 font-medium whitespace-nowrap text-white opacity-100 inset-ring inset-ring-white/10 transition-[opacity] starting:opacity-0\",\"children\":\"oklch(98% 0.016 73.684)\"}]]}],[\"$\",\"$Lc\",\"amber\",{\"as\":\"div\",\"showDelayMs\":100,\"hideDelayMs\":0,\"className\":\"relative\",\"children\":[false,[\"$\",\"$Ld\",null,{\"children\":[\"$\",\"div\",null,{\"style\":{\"--color\":\"var(--color-amber-50)\"},\"className\":\"h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10\"}]}],[\"$\",\"$Le\",null,{\"as\":\"div\",\"anchor\":\"top\",\"className\":\"pointer-events-none z-10 translate-y-2 rounded-full border border-gray-950 bg-gray-950/90 py-0.5 pr-2 pb-1 pl-3 text-center font-mono text-xs/6 font-medium whitespace-nowrap text-white opacity-100 inset-ring inset-ring-white/10 transition-[opacity] starting:opacity-0\",\"children\":\"oklch(98.7% 0.022 95.277)\"}]]}],[\"$\",\"$Lc\",\"yellow\",{\"as\":\"div\",\"showDelayMs\":100,\"hideDelayMs\":0,\"className\":\"relative\",\"children\":[false,[\"$\",\"$Ld\",null,{\"children\":[\"$\",\"div\",null,{\"style\":{\"--color\":\"var(--color-yellow-50)\"},\"className\":\"h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10\"}]}],[\"$\",\"$Le\",null,{\"as\":\"div\",\"anchor\":\"top\",\"className\":\"pointer-events-none z-10 translate-y-2 rounded-full border border-gray-950 bg-gray-950/90 py-0.5 pr-2 pb-1 pl-3 text-center font-mono text-xs/6 font-medium whitespace-nowrap text-white opacity-100 inset-ring inset-ring-white/10 transition-[opacity] starting:opacity-0\",\"children\":\"oklch(98.7% 0.026 102.212)\"}]]}],[\"$\",\"$Lc\",\"lime\",{\"as\":\"div\",\"showDelayMs\":100,\"hideDelayMs\":0,\"className\":\"relative\",\"children\":[false,[\"$\",\"$Ld\",null,{\"children\":[\"$\",\"div\",null,{\"style\":{\"--color\":\"var(--color-lime-50)\"},\"className\":\"h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10\"}]}],[\"$\",\"$Le\",null,{\"as\":\"div\",\"anchor\":\"top\",\"className\":\"pointer-events-none z-10 translate-y-2 rounded-full border border-gray-950 bg-gray-950/90 py-0.5 pr-2 pb-1 pl-3 text-center font-mono text-xs/6 font-medium whitespace-nowrap text-white opacity-100 inset-ring inset-ring-white/10 transition-[opacity] starting:opacity-0\",\"children\":\"oklch(98.6% 0.031 120.757)\"}]]}],[\"$\",\"$Lc\",\"green\",{\"as\":\"div\",\"showDelayMs\":100,\"hideDelayMs\":0,\"className\":\"relative\",\"children\":[false,[\"$\",\"$Ld\",null,{\"children\":[\"$\",\"div\",null,{\"style\":{\"--color\":\"var(--color-green-50)\"},\"className\":\"h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10\"}]}],[\"$\",\"$Le\",null,{\"as\":\"div\",\"anchor\":\"top\",\"className\":\"pointer-events-none z-10 translate-y-2 rounded-full border border-gray-950 bg-gray-950/90 py-0.5 pr-2 pb-1 pl-3 text-center font-mono text-xs/6 font-medium whitespace-nowrap text-white opacity-100 inset-ring inset-ring-white/10 transition-[opacity] starting:opacity-0\",\"children\":\"oklch(98.2% 0.018 155.826)\"}]]}],[\"$\",\"$Lc\",\"emerald\",{\"as\":\"div\",\"showDelayMs\":100,\"hideDelayMs\":0,\"className\":\"relative\",\"children\":[false,[\"$\",\"$Ld\",null,{\"children\":[\"$\",\"div\",null,{\"style\":{\"--color\":\"var(--color-emerald-50)\"},\"className\":\"h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10\"}]}],[\"$\",\"$Le\",null,{\"as\":\"div\",\"anchor\":\"top\",\"className\":\"pointer-events-none z-10 translate-y-2 rounded-full border border-gray-950 bg-gray-950/90 py-0.5 pr-2 pb-1 pl-3 text-center font-mono text-xs/6 font-medium whitespace-nowrap text-white opacity-100 inset-ring inset-ring-white/10 transition-[opacity] starting:opacity-0\",\"children\":\"oklch(97.9% 0.021 166.113)\"}]]}],[\"$\",\"$Lc\",\"teal\",{\"as\":\"div\",\"showDelayMs\":100,\"hideDelayMs\":0,\"className\":\"relative\",\"children\":[false,[\"$\",\"$Ld\",null,{\"children\":[\"$\",\"div\",null,{\"style\":{\"--color\":\"var(--color-teal-50)\"},\"className\":\"h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10\"}]}],[\"$\",\"$Le\",null,{\"as\":\"div\",\"anchor\":\"top\",\"className\":\"pointer-events-none z-10 translate-y-2 rounded-full border border-gray-950 bg-gray-950/90 py-0.5 pr-2 pb-1 pl-3 text-center font-mono text-xs/6 font-medium whitespace-nowrap text-white opacity-100 inset-ring inset-ring-white/10 transition-[opacity] starting:opacity-0\",\"children\":\"oklch(98.4% 0.014 180.72)\"}]]}],[\"$\",\"$Lc\",\"cyan\",{\"as\":\"div\",\"showDelayMs\":100,\"hideDelayMs\":0,\"className\":\"relative\",\"children\":[false,[\"$\",\"$Ld\",null,{\"children\":[\"$\",\"div\",null,{\"style\":{\"--color\":\"var(--color-cyan-50)\"},\"className\":\"h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10\"}]}],[\"$\",\"$Le\",null,{\"as\":\"div\",\"anchor\":\"top\",\"className\":\"pointer-events-none z-10 translate-y-2 rounded-full border border-gray-950 bg-gray-950/90 py-0.5 pr-2 pb-1 pl-3 text-center font-mono text-xs/6 font-medium whitespace-nowrap text-white opacity-100 inset-ring inset-ring-white/10 transition-[opacity] starting:opacity-0\",\"children\":\"oklch(98.4% 0.019 200.873)\"}]]}],[\"$\",\"$Lc\",\"sky\",{\"as\":\"div\",\"showDelayMs\":100,\"hideDelayMs\":0,\"className\":\"relative\",\"children\":[false,[\"$\",\"$Ld\",null,{\"children\":[\"$\",\"div\",null,{\"style\":{\"--color\":\"var(--color-sky-50)\"},\"className\":\"h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10\"}]}],[\"$\",\"$Le\",null,{\"as\":\"div\",\"anchor\":\"top\",\"className\":\"pointer-events-none z-10 translate-y-2 rounded-full border border-gray-950 bg-gray-950/90 py-0.5 pr-2 pb-1 pl-3 text-center font-mono text-xs/6 font-medium whitespace-nowrap text-white opacity-100 inset-ring inset-ring-white/10 transition-[opacity] starting:opacity-0\",\"children\":\"oklch(97.7% 0.013 236.62)\"}]]}],[\"$\",\"$Lc\",\"blue\",{\"as\":\"div\",\"showDelayMs\":100,\"hideDelayMs\":0,\"className\":\"relative\",\"children\":[false,[\"$\",\"$Ld\",null,{\"children\":[\"$\",\"div\",null,{\"style\":{\"--color\":\"var(--color-blue-50)\"},\"className\":\"h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10\"}]}],[\"$\",\"$Le\",null,{\"as\":\"div\",\"anchor\":\"top\",\"className\":\"pointer-events-none z-10 translate-y-2 rounded-full border border-gray-950 bg-gray-950/90 py-0.5 pr-2 pb-1 pl-3 text-center font-mono text-xs/6 font-medium whitespace-nowrap text-white opacity-100 inset-ring inset-ring-white/10 transition-[opacity] starting:opacity-0\",\"children\":\"oklch(97% 0.014 254.604)\"}]]}],[\"$\",\"$Lc\",\"indigo\",{\"as\":\"div\",\"showDelayMs\":100,\"hideDelayMs\":0,\"className\":\"relative\",\"children\":[false,[\"$\",\"$Ld\",null,{\"children\":[\"$\",\"div\",null,{\"style\":{\"--color\":\"var(--color-indigo-50)\"},\"className\":\"h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10\"}]}],[\"$\",\"$Le\",null,{\"as\":\"div\",\"anchor\":\"top\",\"className\":\"pointer-events-none z-10 translate-y-2 rounded-full border border-gray-950 bg-gray-950/90 py-0.5 pr-2 pb-1 pl-3 text-center font-mono text-xs/6 font-medium whitespace-nowrap text-white opacity-100 inset-ring inset-ring-white/10 transition-[opacity] starting:opacity-0\",\"children\":\"oklch(96.2% 0.018 272.314)\"}]]}],[\"$\",\"$Lc\",\"violet\",{\"as\":\"div\",\"showDelayMs\":100,\"hideDelayMs\":0,\"className\":\"relative\",\"children\":[false,[\"$\",\"$Ld\",null,{\"children\":[\"$\",\"div\",null,{\"style\":{\"--color\":\"var(--color-violet-50)\"},\"className\":\"h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10\"}]}],[\"$\",\"$Le\",null,{\"as\":\"div\",\"anchor\":\"top\",\"className\":\"pointer-events-none z-10 translate-y-2 rounded-full border border-gray-950 bg-gray-950/90 py-0.5 pr-2 pb-1 pl-3 text-center font-mono text-xs/6 font-medium whitespace-nowrap text-white opacity-100 inset-ring inset-ring-white/10 transition-[opacity] starting:opacity-0\",\"children\":\"oklch(96.9% 0.016 293.756)\"}]]}],[\"$\",\"$Lc\",\"purple\",{\"as\":\"div\",\"showDelayMs\":100,\"hideDelayMs\":0,\"className\":\"relative\",\"children\":[false,[\"$\",\"$Ld\",null,{\"children\":[\"$\",\"div\",null,{\"style\":{\"--color\":\"var(--color-purple-50)\"},\"className\":\"h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10\"}]}],[\"$\",\"$Le\",null,{\"as\":\"div\",\"anchor\":\"top\",\"className\":\"pointer-events-none z-10 translate-y-2 rounded-full border border-gray-950 bg-gray-950/90 py-0.5 pr-2 pb-1 pl-3 text-center font-mono text-xs/6 font-medium whitespace-nowrap text-white opacity-100 inset-ring inset-ring-white/10 transition-[opacity] starting:opacity-0\",\"children\":\"oklch(97.7% 0.014 308.299)\"}]]}],[\"$\",\"$Lc\",\"fuchsia\",{\"as\":\"div\",\"showDelayMs\":100,\"hideDelayMs\":0,\"className\":\"relative\",\"children\":[false,[\"$\",\"$Ld\",null,{\"children\":[\"$\",\"div\",null,{\"style\":{\"--color\":\"var(--color-fuchsia-50)\"},\"className\":\"h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10\"}]}],[\"$\",\"$Le\",null,{\"as\":\"div\",\"anchor\":\"top\",\"className\":\"pointer-events-none z-10 translate-y-2 rounded-full border border-gray-950 bg-gray-950/90 py-0.5 pr-2 pb-1 pl-3 text-center font-mono text-xs/6 font-medium whitespace-nowrap text-white opacity-100 inset-ring inset-ring-white/10 transition-[opacity] starting:opacity-0\",\"children\":\"oklch(97.7% 0.017 320.058)\"}]]}],[\"$\",\"$Lc\",\"pink\",{\"as\":\"div\",\"showDelayMs\":100,\"hideDelayMs\":0,\"className\":\"relative\",\"children\":[false,[\"$\",\"$Ld\",null,{\"children\":[\"$\",\"div\",null,{\"style\":{\"--color\":\"var(--color-pink-50)\"},\"className\":\"h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10\"}]}],[\"$\",\"$Le\",null,{\"as\":\"div\",\"anchor\":\"top\",\"className\":\"pointer-events-none z-10 translate-y-2 rounded-full border border-gray-950 bg-gray-950/90 py-0.5 pr-2 pb-1 pl-3 text-center font-mono text-xs/6 font-medium whitespace-nowrap text-white opacity-100 inset-ring inset-ring-white/10 transition-[opacity] starting:opacity-0\",\"children\":\"oklch(97.1% 0.014 343.198)\"}]]}],[\"$\",\"$Lc\",\"rose\",{\"as\":\"div\",\"showDelayMs\":100,\"hideDelayMs\":0,\"className\":\"relative\",\"children\":[false,[\"$\",\"$Ld\",null,{\"children\":[\"$\",\"div\",null,{\"style\":{\"--color\":\"var(--color-rose-50)\"},\"className\":\"h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 hover:opacity-100 dark:inset-ring-white/10\"}]}],[\"$\",\"$Le\",null,{\"as\":\"div\",\"anchor\":\"top\",\"className\":\"pointer-events-none z-10 translate-y-2 rounded-full border border-gray-950 bg-gray-950/90 py-0.5 pr-2 pb-1 pl-3 text-center font-mono text-xs/6 font-medium whitespace-nowrap text-white opacity-100 inset-ring inset-ring-white/10 transition-[opacity] starting:opacity-0\",\"children\":\"oklch(96.9% 0.015 12.422)\"}]]}]]]}]]]}]}]}]]}],[\"$\",\"div\",null,{\"className\":\"@container isolate flex flex-col gap-2 overflow-hidden rounded-2xl bg-white p-2 outline outline-gray-950/5 dark:bg-gray-950 dark:outline-white/10 col-span-full xl:col-span-15\",\"children\":[[[\"$\",\"div\",null,{\"className\":\"flex flex-col gap-6 p-6 @md:flex-row @md:gap-x-8 @md:p-8\",\"children\":[[\"$\",\"div\",null,{\"className\":\"flex h-18 w-28 shrink-0 items-center justify-center\",\"children\":[\"$\",\"svg\",null,{\"className\":\"text-gray-950 [--site-background:var(--color-white)] dark:text-white dark:[--site-background:var(--color-gray-950)]\",\"width\":112,\"height\":72,\"viewBox\":\"0 0 112 72\",\"fill\":\"none\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"children\":[[\"$\",\"path\",null,{\"d\":\"$f\",\"fill\":\"var(--site-background)\"}],[\"$\",\"path\",null,{\"d\":\"$10\",\"stroke\":\"currentColor\"}]]}]}],[\"$\",\"div\",null,{\"children\":[[\"$\",\"span\",null,{\"className\":\"text-xl/10 font-medium text-gray-950 @md:text-2xl/10 dark:text-white\",\"children\":\"CSS grid layout\"}],[\"$\",\"p\",null,{\"className\":\"max-w-xl text-sm/7 text-gray-600 dark:text-gray-400\",\"children\":\"Using grid utilities directly in your HTML makes it so much easier to reason about complex layouts.\"}]]}]]}],[\"$\",\"div\",null,{\"className\":\"flex-1\"}]],[\"$\",\"div\",null,{\"className\":\"h-112 p-4 sm:p-8 relative overflow-hidden rounded-lg bg-gray-950/[2.5%] after:pointer-events-none after:absolute after:inset-0 after:rounded-lg after:inset-ring after:inset-ring-gray-950/5 dark:after:inset-ring-white/10 bg-[image:radial-gradient(var(--pattern-fg)_1px,_transparent_0)] bg-[size:10px_10px] bg-fixed [--pattern-fg:var(--color-gray-950)]/5 dark:[--pattern-fg:var(--color-white)]/10\",\"children\":[\"$\",\"div\",null,{\"className\":\"-mr-16 -mb-8 [--size:--spacing(48)] lg:flex lg:justify-center xl:block\",\"children\":[\"$\",\"div\",null,{\"className\":\"-mt-18 sm:-mt-26\",\"children\":[\"$\",\"div\",null,{\"className\":\"bg-white p-6 ring ring-gray-950/5 sm:p-16 dark:bg-gray-950 dark:ring-white/10\",\"children\":[[\"$\",\"h3\",null,{\"className\":\"text-base/6 font-semibold text-gray-950 dark:text-white\",\"children\":\"Browse properties\"}],[\"$\",\"div\",null,{\"className\":\"mt-6 grid grid-cols-[repeat(2,var(--size))] grid-rows-[repeat(3,var(--size))] gap-2 sm:grid-cols-[repeat(3,var(--size))] sm:grid-rows-[repeat(2,var(--size))]\",\"children\":[[\"$\",\"div\",null,{\"className\":\"relative col-span-2 row-span-1 overflow-hidden rounded-t-2xl sm:col-span-1 sm:row-span-2 sm:rounded-none sm:rounded-l-2xl dark:outline dark:outline-white/10\",\"children\":[[\"$\",\"img\",null,{\"alt\":\"\",\"className\":\"not-sm:hidden\",\"src\":\"/_next/static/media/css-grid-1.d6b88d05.png\"}],[\"$\",\"img\",null,{\"alt\":\"\",\"className\":\"sm:hidden\",\"src\":\"/_next/static/media/css-grid-1.mobile.d0afc6a2.png\"}],[\"$\",\"div\",null,{\"className\":\"absolute inset-0 flex items-end bg-linear-to-b from-transparent via-transparent to-gray-950\",\"children\":[\"$\",\"span\",null,{\"className\":\"p-4 text-sm/5 font-semibold text-white\",\"children\":\"Treehouses\"}]}]]}],[\"$\",\"div\",null,{\"className\":\"relative dark:outline dark:outline-white/10\",\"children\":[[\"$\",\"img\",null,{\"alt\":\"\",\"src\":\"/_next/static/media/css-grid-2.d645692f.png\"}],[\"$\",\"div\",null,{\"className\":\"absolute inset-0 flex items-end bg-linear-to-b from-transparent via-transparent to-gray-950\",\"children\":[\"$\",\"span\",null,{\"className\":\"p-4 text-sm/5 font-semibold text-white\",\"children\":\"Mansions\"}]}]]}],[\"$\",\"div\",null,{\"className\":\"relative overflow-hidden sm:rounded-tr-2xl dark:outline dark:outline-white/10\",\"children\":[[\"$\",\"img\",null,{\"alt\":\"\",\"src\":\"/_next/static/media/css-grid-3.45c4c3d5.png\"}],[\"$\",\"div\",null,{\"className\":\"absolute inset-0 flex items-end bg-linear-to-b from-transparent via-transparent to-gray-950\",\"children\":[\"$\",\"span\",null,{\"className\":\"p-4 text-sm/5 font-semibold text-white\",\"children\":\"Lakefront cottages\"}]}]]}],[\"$\",\"div\",null,{\"className\":\"relative col-span-2 overflow-hidden rounded-b-2xl sm:rounded-bl-none dark:outline dark:outline-white/10\",\"children\":[[\"$\",\"img\",null,{\"alt\":\"\",\"className\":\"aspect-2/1\",\"src\":\"/_next/static/media/css-grid-4.308d73d9.png\"}],[\"$\",\"div\",null,{\"className\":\"absolute inset-0 flex items-end bg-linear-to-b from-transparent via-transparent to-gray-950\",\"children\":[\"$\",\"span\",null,{\"className\":\"p-4 text-sm/5 font-semibold text-white\",\"children\":\"Designer homes\"}]}]]}]]}]]}]}]}]}]]}],[\"$\",\"div\",null,{\"className\":\"@container isolate flex flex-col gap-2 overflow-hidden rounded-2xl bg-white p-2 outline outline-gray-950/5 dark:bg-gray-950 dark:outline-white/10 col-span-full xl:col-span-15\",\"children\":[[[\"$\",\"div\",null,{\"className\":\"flex flex-col gap-6 p-6 @md:flex-row @md:gap-x-8 @md:p-8\",\"children\":[[\"$\",\"div\",null,{\"className\":\"flex h-18 w-28 shrink-0 items-center justify-center\",\"children\":[\"$\",\"svg\",null,{\"className\":\"text-gray-950 [--site-background:var(--color-white)] dark:text-white dark:[--site-background:var(--color-gray-950)]\",\"width\":112,\"height\":72,\"viewBox\":\"0 0 112 72\",\"fill\":\"none\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"children\":[[\"$\",\"g\",null,{\"clipPath\":\"url(#clip0_408_5765)\",\"children\":[[\"$\",\"path\",null,{\"d\":\"M11.3887 58.234C11.3887 59.5912 12.2855 60.9484 14.0791 61.984C17.6663 64.055 23.4823 64.055 27.0694 61.984C28.863 60.9484 29.7598 59.5912 29.7598 58.234M11.3887 58.234C11.3887 56.8767 12.2855 55.5195 14.0791 54.484C17.6663 52.4129 23.4823 52.4129 27.0694 54.484C28.8631 55.5195 29.7598 56.8767 29.7598 58.234M11.3887 58.234V61.234C11.3887 62.5912 12.2855 63.9484 14.0791 64.984C17.6663 67.055 23.4823 67.055 27.0694 64.984C28.863 63.9484 29.7598 62.5912 29.7598 61.234V58.234\",\"stroke\":\"currentColor\",\"strokeOpacity\":\"0.2\"}],[\"$\",\"path\",null,{\"d\":\"M44.3896 44.484C38.8892 41.3084 29.9714 41.3084 24.471 44.484C21.7208 46.0718 20.3457 48.1529 20.3458 50.234L20.3457 53.234C20.3457 55.3151 21.7208 57.3962 24.471 58.984C29.9713 62.1597 38.8892 62.1597 44.3896 58.984C47.1397 57.3962 48.5148 55.3151 48.5148 53.234V50.2555C48.5243 48.1673 47.1493 46.0773 44.3896 44.484Z\",\"fill\":\"var(--site-background)\",\"fillOpacity\":\"0.4\"}],[\"$\",\"path\",null,{\"d\":\"M20.3458 50.234C20.3458 52.3151 21.7208 54.3962 24.471 55.984C29.9714 59.1597 38.8892 59.1597 44.3896 55.984C47.1303 54.4017 48.5054 52.3294 48.5148 50.2555M20.3458 50.234C20.3457 48.1529 21.7208 46.0718 24.471 44.484C29.9714 41.3084 38.8892 41.3084 44.3896 44.484C47.1493 46.0773 48.5243 48.1673 48.5148 50.2555M20.3458 50.234L20.3457 53.234C20.3457 55.3151 21.7208 57.3962 24.471 58.984C29.9713 62.1597 38.8892 62.1597 44.3896 58.984C47.1397 57.3962 48.5148 55.3151 48.5148 53.234V50.2555\",\"stroke\":\"currentColor\",\"strokeOpacity\":\"0.4\"}],[\"$\",\"path\",null,{\"d\":\"M61.7097 34.484C54.2962 30.2038 42.2765 30.2038 34.8629 34.484C31.1562 36.6241 29.3028 39.429 29.3028 42.234L29.3027 45.234C29.3027 48.0389 31.1561 50.8439 34.8629 52.984C42.2764 57.2642 54.2961 57.2642 61.7097 52.984C65.4164 50.8439 67.2698 48.0389 67.2698 45.234V42.2104C67.2595 39.4133 65.4061 36.6181 61.7097 34.484Z\",\"fill\":\"var(--site-background)\",\"fillOpacity\":\"0.6\"}],[\"$\",\"path\",null,{\"d\":\"M29.3028 42.234C29.3028 45.0389 31.1562 47.8439 34.8629 49.984C42.2765 54.2642 54.2962 54.2642 61.7097 49.984C65.4269 47.8379 67.2802 45.0232 67.2698 42.2104M29.3028 42.234C29.3028 39.429 31.1562 36.6241 34.8629 34.484C42.2765 30.2038 54.2962 30.2038 61.7097 34.484C65.4061 36.6181 67.2595 39.4133 67.2698 42.2104M29.3028 42.234L29.3027 45.234C29.3027 48.0389 31.1561 50.8439 34.8629 52.984C42.2764 57.2642 54.2961 57.2642 61.7097 52.984C65.4164 50.8439 67.2698 48.0389 67.2698 45.234V42.2104\",\"stroke\":\"currentColor\",\"strokeOpacity\":\"0.6\"}],[\"$\",\"path\",null,{\"d\":\"M79.0318 24.484C69.7051 19.0992 54.5835 19.0992 45.2568 24.484C40.5934 27.1764 38.2618 30.7052 38.2618 34.234L38.2617 37.234C38.2617 40.7628 40.5934 44.2916 45.2567 46.984C54.5835 52.3688 69.705 52.3688 79.0317 46.984C83.6951 44.2916 86.0268 40.7628 86.0268 37.234L86.0268 34.234C86.0268 30.7052 83.6951 27.1764 79.0318 24.484Z\",\"fill\":\"var(--site-background)\",\"fillOpacity\":\"0.8\"}],[\"$\",\"path\",null,{\"d\":\"M38.2618 34.234C38.2618 37.7628 40.5934 41.2916 45.2568 43.984C54.5835 49.3688 69.7051 49.3688 79.0318 43.984C83.6951 41.2916 86.0268 37.7628 86.0268 34.234M38.2618 34.234C38.2618 30.7052 40.5934 27.1764 45.2568 24.484C54.5835 19.0992 69.7051 19.0992 79.0318 24.484C83.6951 27.1764 86.0268 30.7052 86.0268 34.234M38.2618 34.234L38.2617 37.234C38.2617 40.7628 40.5934 44.2916 45.2567 46.984C54.5835 52.3688 69.705 52.3688 79.0317 46.984C83.6951 44.2916 86.0268 40.7628 86.0268 37.234L86.0268 34.234\",\"stroke\":\"currentColor\",\"strokeOpacity\":\"0.8\"}],[\"$\",\"path\",null,{\"d\":\"M55.6487 37.9841C66.8885 44.4734 85.112 44.4734 96.3519 37.9841C101.972 34.7394 104.782 30.4867 104.782 26.2341L104.782 23.2341C104.782 18.9814 101.972 14.7287 96.3518 11.4841C85.112 4.99473 66.8885 4.99473 55.6487 11.4841C50.0287 14.7287 47.2188 18.9814 47.2188 23.2341L47.2188 26.2341C47.2188 30.4867 50.0287 34.7394 55.6487 37.9841Z\",\"fill\":\"var(--site-background)\"}],[\"$\",\"path\",null,{\"d\":\"M104.782 23.2341C104.782 18.9814 101.972 14.7287 96.3518 11.4841C85.112 4.99473 66.8885 4.99473 55.6487 11.4841C50.0287 14.7287 47.2188 18.9814 47.2188 23.2341M104.782 23.2341C104.782 27.4867 101.972 31.7394 96.3518 34.9841C85.112 41.4734 66.8885 41.4734 55.6487 34.9841C50.0287 31.7394 47.2187 27.4867 47.2188 23.2341M104.782 23.2341L104.782 26.2341C104.782 30.4867 101.972 34.7394 96.3519 37.9841C85.112 44.4734 66.8885 44.4734 55.6487 37.9841C50.0287 34.7394 47.2188 30.4867 47.2188 26.2341L47.2188 23.2341\",\"stroke\":\"currentColor\"}]]}],[\"$\",\"defs\",null,{\"children\":[\"$\",\"clipPath\",null,{\"id\":\"clip0_408_5765\",\"children\":[\"$\",\"rect\",null,{\"width\":112,\"height\":72,\"fill\":\"var(--site-background)\"}]}]}]]}]}],[\"$\",\"div\",null,{\"children\":[[\"$\",\"span\",null,{\"className\":\"text-xl/10 font-medium text-gray-950 @md:text-2xl/10 dark:text-white\",\"children\":\"Transitions and animations\"}],[\"$\",\"p\",null,{\"className\":\"max-w-xl text-sm/7 text-gray-600 dark:text-gray-400\",\"children\":\"Transitions that work the way you'd expect — throw a few utilities on an element and you're in business.\"}]]}]]}],[\"$\",\"div\",null,{\"className\":\"flex-1\"}]],[\"$\",\"div\",null,{\"className\":\"grid h-112 gap-[inherit]\",\"children\":[\"$\",\"div\",null,{\"className\":\"relative overflow-hidden rounded-lg bg-gray-950/[2.5%] after:pointer-events-none after:absolute after:inset-0 after:rounded-lg after:inset-ring after:inset-ring-gray-950/5 dark:after:inset-ring-white/10 bg-[image:radial-gradient(var(--pattern-fg)_1px,_transparent_0)] bg-[size:10px_10px] bg-fixed [--pattern-fg:var(--color-gray-950)]/5 dark:[--pattern-fg:var(--color-white)]/10\",\"children\":[\"$\",\"$L11\",null,{}]}]}]]}],[\"$\",\"div\",null,{\"className\":\"@container isolate flex flex-col gap-2 overflow-hidden rounded-2xl bg-white p-2 outline outline-gray-950/5 dark:bg-gray-950 dark:outline-white/10 col-span-full md:col-span-15 xl:col-span-10\",\"children\":[[[\"$\",\"div\",null,{\"className\":\"flex flex-col gap-6 p-6 @md:flex-row @md:gap-x-8 @md:p-8\",\"children\":[[\"$\",\"div\",null,{\"className\":\"flex h-18 w-28 shrink-0 items-center justify-center\",\"children\":[\"$\",\"svg\",null,{\"className\":\"text-gray-950 [--site-background:var(--color-white)] dark:text-white dark:[--site-background:var(--color-gray-950)]\",\"width\":112,\"height\":72,\"viewBox\":\"0 0 112 72\",\"fill\":\"none\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"children\":[[\"$\",\"g\",null,{\"clipPath\":\"url(#clip0_408_5751)\",\"children\":[[\"$\",\"path\",null,{\"d\":\"M52.0956 7.50006L4.4642 35.0001C3.51163 35.55 3.03334 36.2701 3.02935 36.9909V40.0129C3.03497 40.7325 3.51324 41.451 4.46417 42.0001L52.0956 69.5001C54.0087 70.6046 57.1106 70.6046 59.0238 69.5001L106.655 42.0001C107.612 41.4478 108.09 40.7239 108.09 40.0001V36.9909C108.086 36.2701 107.608 35.55 106.655 35.0001L59.0238 7.50006C57.1106 6.39549 54.0088 6.39549 52.0956 7.50006Z\",\"fill\":\"var(--site-background)\"}],[\"$\",\"path\",null,{\"d\":\"M108.09 36.9909C108.086 36.2701 107.608 35.55 106.655 35.0001L59.0238 7.50006C57.1106 6.39549 54.0088 6.39549 52.0956 7.50006L4.4642 35.0001C3.51163 35.55 3.03334 36.2701 3.02935 36.9909M108.09 36.9909C108.094 37.7178 107.616 38.4455 106.655 39.0001L59.0238 66.5001C57.1106 67.6046 54.0088 67.6046 52.0956 66.5001L4.4642 39.0001C3.5036 38.4455 3.02532 37.7178 3.02935 36.9909M108.09 36.9909V40.0001C108.09 40.7239 107.612 41.4478 106.655 42.0001L59.0238 69.5001C57.1106 70.6046 54.0087 70.6046 52.0956 69.5001L4.46417 42.0001C3.51324 41.451 3.03497 40.7325 3.02935 40.0129V36.9909\",\"stroke\":\"currentColor\"}],[\"$\",\"path\",null,{\"d\":\"M16.8848 33.9903C16.8891 33.2697 17.3674 32.5499 18.3196 32.0001L52.0946 12.5001C54.0078 11.3955 57.1097 11.3955 59.0228 12.5001L92.7978 32.0001C93.7501 32.5499 94.2284 33.2697 94.2327 33.9903M16.8848 33.9903C16.8805 34.7174 17.3588 35.4453 18.3196 36.0001L52.0946 55.5001C54.0078 56.6046 57.1097 56.6046 59.0228 55.5001L92.7978 36.0001C93.7587 35.4453 94.237 34.7174 94.2327 33.9903M16.8848 33.9903V37.0001C16.8848 37.7239 17.3631 38.4478 18.3197 39.0001L52.0947 58.5001C54.0078 59.6046 57.1097 59.6046 59.0229 58.5001L92.7979 39.0001C93.7544 38.4478 94.2327 37.7239 94.2327 37.0001L94.2327 33.9903\",\"stroke\":\"currentColor\"}],[\"$\",\"path\",null,{\"d\":\"M30.7422 30.9998C30.7422 30.2759 31.2205 29.5521 32.1771 28.9998L52.0956 17.4998C54.0088 16.3952 57.1107 16.3952 59.0238 17.4998L78.9424 28.9998C79.899 29.5521 80.3773 30.2759 80.3773 30.9998M30.7422 30.9998C30.7422 31.7237 31.2205 32.4475 32.1771 32.9998L52.0956 44.4998C54.0088 45.6044 57.1107 45.6044 59.0238 44.4998L78.9424 32.9998C79.899 32.4475 80.3773 31.7237 80.3773 30.9998M30.7422 30.9998V33.9998C30.7422 34.7237 31.2205 35.4475 32.1771 35.9998L52.0956 47.4998C54.0088 48.6044 57.1107 48.6044 59.0238 47.4998L78.9424 35.9998C79.899 35.4475 80.3773 34.7237 80.3773 33.9998V30.9998\",\"stroke\":\"currentColor\"}]]}],[\"$\",\"defs\",null,{\"children\":[\"$\",\"clipPath\",null,{\"id\":\"clip0_408_5751\",\"children\":[\"$\",\"rect\",null,{\"width\":112,\"height\":72,\"fill\":\"var(--site-background)\"}]}]}]]}]}],[\"$\",\"div\",null,{\"children\":[[\"$\",\"span\",null,{\"className\":\"text-xl/10 font-medium text-gray-950 @md:text-2xl/10 dark:text-white\",\"children\":\"Cascade layers\"}],[\"$\",\"p\",null,{\"className\":\"max-w-xl text-sm/7 text-gray-600 dark:text-gray-400\",\"children\":\"Tailwind uses CSS layers so you don’t have to worry about specificity issues.\"}]]}]]}],[\"$\",\"div\",null,{\"className\":\"flex-1\"}]],[\"$\",\"div\",null,{\"className\":\"h-112 p-4 sm:p-8 relative overflow-hidden rounded-lg bg-gray-950/[2.5%] after:pointer-events-none after:absolute after:inset-0 after:rounded-lg after:inset-ring after:inset-ring-gray-950/5 dark:after:inset-ring-white/10 bg-[image:radial-gradient(var(--pattern-fg)_1px,_transparent_0)] bg-[size:10px_10px] bg-fixed [--pattern-fg:var(--color-gray-950)]/5 dark:[--pattern-fg:var(--color-white)]/10\",\"children\":[\"$\",\"div\",null,{\"className\":\"-mr-16 -mb-16\",\"children\":[\"$\",\"div\",null,{\"className\":\"rounded-xl bg-gray-950\",\"children\":[\"$\",\"div\",null,{\"className\":\"rounded-xl p-1 text-sm scheme-dark dark:inset-ring dark:inset-ring-white/10\",\"children\":[[\"$\",\"div\",null,{\"className\":\"flex gap-2 p-2\",\"children\":[[\"$\",\"span\",null,{\"className\":\"size-3 rounded-full bg-white/20\"}],[\"$\",\"span\",null,{\"className\":\"size-3 rounded-full bg-white/20\"}],[\"$\",\"span\",null,{\"className\":\"size-3 rounded-full bg-white/20\"}]]}],[\"$\",\"div\",null,{\"className\":\"with-line-numbers text-[13px]/6 *:*:p-3!\",\"children\":[\"$\",\"div\",null,{\"className\":\"*:flex *:*:max-w-none *:*:shrink-0 *:*:grow *:overflow-auto *:rounded-lg *:bg-white/10! *:p-5 dark:*:bg-white/5! **:[.line]:isolate **:[.line]:not-last:min-h-[1lh] *:inset-ring *:inset-ring-white/10 dark:*:inset-ring-white/5\",\"dangerouslySetInnerHTML\":{\"__html\":\"$12\"}}]}]]}]}]}]}]]}],[\"$\",\"div\",null,{\"className\":\"@container isolate flex flex-col gap-2 overflow-hidden rounded-2xl bg-white p-2 outline outline-gray-950/5 dark:bg-gray-950 dark:outline-white/10 col-span-full md:col-span-15 xl:col-span-10\",\"children\":[[[\"$\",\"div\",null,{\"className\":\"flex flex-col gap-6 p-6 @md:flex-row @md:gap-x-8 @md:p-8\",\"children\":[[\"$\",\"div\",null,{\"className\":\"flex h-18 w-28 shrink-0 items-center justify-center\",\"children\":[\"$\",\"svg\",null,{\"className\":\"text-gray-950 [--site-background:var(--color-white)] dark:text-white dark:[--site-background:var(--color-gray-950)]\",\"width\":112,\"height\":72,\"viewBox\":\"0 0 112 72\",\"fill\":\"none\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"children\":[[\"$\",\"g\",null,{\"clipPath\":\"url(#clip0_408_5693)\",\"children\":[[\"$\",\"rect\",null,{\"width\":63,\"height\":63,\"rx\":2,\"transform\":\"matrix(0.866025 -0.5 0.866025 0.5 1 38)\",\"stroke\":\"currentColor\",\"strokeOpacity\":\"0.3\",\"strokeDasharray\":\"3 3\"}],[\"$\",\"path\",null,{\"d\":\"M91.066 26L77.2096 34C76.7313 34.2762 76.4922 34.6381 76.4922 35.0001V38.0283C76.5043 38.3807 76.7433 38.731 77.2091 39L91.0655 47C92.0221 47.5523 93.5731 47.5523 94.5296 47L108.386 39C108.864 38.7239 109.103 38.362 109.103 38.0001L109.104 35.0001C109.104 34.6381 108.865 34.2762 108.387 34L94.5301 26C93.5736 25.4477 92.0226 25.4477 91.066 26Z\",\"fill\":\"var(--site-background)\",\"stroke\":\"currentColor\"}],[\"$\",\"path\",null,{\"d\":\"M53.8274 47.5L39.971 55.5C39.4927 55.7762 39.2536 56.1381 39.2536 56.5001L39.252 59.5001C39.252 59.862 39.4911 60.2239 39.9694 60.5L53.8258 68.5C54.7824 69.0523 56.3333 69.0523 57.2899 68.5L71.1463 60.5C71.6246 60.2239 71.8637 59.862 71.8637 59.5001L71.8654 56.5001C71.8654 56.1381 71.6262 55.7762 71.1479 55.5L57.2915 47.5C56.3349 46.9477 54.784 46.9477 53.8274 47.5Z\",\"fill\":\"var(--site-background)\"}],[\"$\",\"path\",null,{\"d\":\"M16.5883 26L2.73193 34C2.25362 34.2762 2.01447 34.6381 2.01449 35.0001L2.01367 38.0001C2.01371 38.362 2.25285 38.7239 2.73111 39L16.5875 47C17.5441 47.5523 19.095 47.5523 20.0516 47L33.908 39C34.3863 38.7239 34.6254 38.362 34.6255 38.0001L34.6263 35.0001C34.6263 34.6381 34.3871 34.2762 33.9088 34L20.0524 26C19.0959 25.4477 17.5449 25.4477 16.5883 26Z\",\"fill\":\"var(--site-background)\"}],[\"$\",\"path\",null,{\"d\":\"M53.8278 4.50027L39.9713 12.5003C39.4931 12.7764 39.254 13.1382 39.2539 13.5001V16.5568C39.2776 16.8997 39.516 17.2385 39.9694 17.5002L53.8258 25.5002C54.7824 26.0525 56.3333 26.0525 57.2899 25.5002L71.1463 17.5002C71.6247 17.224 71.8638 16.862 71.8637 16.5001V13.4437C71.8401 13.1008 71.6016 12.762 71.1483 12.5003L57.2919 4.50027C56.3353 3.94799 54.7843 3.94799 53.8278 4.50027Z\",\"fill\":\"var(--site-background)\"}],[\"$\",\"path\",null,{\"d\":\"M34.6263 35.0001C34.6263 34.6381 34.3871 34.2762 33.9088 34L20.0524 26C19.0959 25.4477 17.5449 25.4477 16.5883 26L2.73193 34C2.25362 34.2762 2.01447 34.6381 2.01449 35.0001M34.6263 35.0001C34.6263 35.362 34.3871 35.7239 33.9088 36L20.0524 44C19.0959 44.5523 17.5449 44.5523 16.5883 44L2.73193 36C2.25365 35.7239 2.0145 35.362 2.01449 35.0001M34.6263 35.0001L34.6255 38.0001C34.6254 38.362 34.3863 38.7239 33.908 39L20.0516 47C19.095 47.5523 17.5441 47.5523 16.5875 47L2.73111 39C2.25285 38.7239 2.01371 38.362 2.01367 38.0001L2.01449 35.0001\",\"stroke\":\"currentColor\"}],[\"$\",\"path\",null,{\"d\":\"M71.8654 56.5001C71.8654 56.1381 71.6262 55.7762 71.1479 55.5L57.2915 47.5C56.3349 46.9477 54.784 46.9477 53.8274 47.5L39.971 55.5C39.4927 55.7762 39.2536 56.1381 39.2536 56.5001M71.8654 56.5001C71.8654 56.862 71.6262 57.2239 71.1479 57.5L57.2915 65.5C56.3349 66.0523 54.784 66.0523 53.8274 65.5L39.971 57.5C39.4927 57.2239 39.2536 56.862 39.2536 56.5001M71.8654 56.5001L71.8637 59.5001C71.8637 59.862 71.6246 60.2239 71.1463 60.5L57.2899 68.5C56.3333 69.0523 54.7824 69.0523 53.8258 68.5L39.9694 60.5C39.4911 60.2239 39.252 59.862 39.252 59.5001L39.2536 56.5001\",\"stroke\":\"currentColor\"}],[\"$\",\"path\",null,{\"d\":\"M71.8637 13.4437C71.8401 13.1008 71.6016 12.762 71.1483 12.5003L57.2919 4.50027C56.3353 3.94799 54.7843 3.94799 53.8278 4.50027L39.9713 12.5003C39.4931 12.7764 39.254 13.1382 39.2539 13.5001M71.8637 13.4437C71.89 13.8242 71.6515 14.2097 71.1483 14.5003L57.2919 22.5003C56.3353 23.0526 54.7843 23.0526 53.8278 22.5003L39.9713 14.5003C39.493 14.2241 39.2538 13.8621 39.2539 13.5001M71.8637 13.4437V16.5001C71.8638 16.862 71.6247 17.224 71.1463 17.5002L57.2899 25.5002C56.3333 26.0525 54.7824 26.0525 53.8258 25.5002L39.9694 17.5002C39.516 17.2385 39.2776 16.8997 39.2539 16.5568V13.5001\",\"stroke\":\"currentColor\"}],[\"$\",\"path\",null,{\"d\":\"M109.104 35.0001C109.104 34.6381 108.865 34.2762 108.387 34L94.5301 26C93.5735 25.4477 92.0226 25.4477 91.066 26L77.2096 34C76.7313 34.2762 76.4922 34.6381 76.4922 35.0001M109.104 35.0001C109.104 35.362 108.865 35.7239 108.387 36L94.5301 44C93.5735 44.5523 92.0226 44.5523 91.066 44L77.2096 36C76.7313 35.7239 76.4922 35.362 76.4922 35.0001M109.104 35.0001L109.103 38.0001C109.103 38.362 108.864 38.7239 108.386 39L94.5296 47C93.5731 47.5523 92.0221 47.5523 91.0655 47L77.2091 39C76.7433 38.731 76.5043 38.3807 76.4922 38.0283V35.0001\",\"stroke\":\"currentColor\"}],[\"$\",\"path\",null,{\"d\":\"M19.1868 32.5001L51.2297 14.0001M51.2297 14.0001V18.0001M51.2297 14.0001H44.3015\",\"stroke\":\"currentColor\",\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\"}],[\"$\",\"path\",null,{\"d\":\"M91.9324 37.5001L59.8894 56.0001M59.8894 56.0001L59.8894 52.0001M59.8894 56.0001L66.8176 56.0001\",\"stroke\":\"currentColor\",\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\"}],[\"$\",\"path\",null,{\"d\":\"M59.8894 14.0001L91.9324 32.5001M91.9324 32.5001L85.0041 32.5001M91.9324 32.5001L91.9324 28.5001\",\"stroke\":\"currentColor\",\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\"}],[\"$\",\"path\",null,{\"d\":\"M51.2297 56.0001L19.1868 37.5001M19.1868 37.5001H26.115M19.1868 37.5001V41.5001\",\"stroke\":\"currentColor\",\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\"}]]}],[\"$\",\"defs\",null,{\"children\":[\"$\",\"clipPath\",null,{\"id\":\"clip0_408_5693\",\"children\":[\"$\",\"rect\",null,{\"width\":112,\"height\":72,\"fill\":\"var(--site-background)\"}]}]}]]}]}],[\"$\",\"div\",null,{\"children\":[[\"$\",\"span\",null,{\"className\":\"text-xl/10 font-medium text-gray-950 @md:text-2xl/10 dark:text-white\",\"children\":\"Logical properties\"}],[\"$\",\"p\",null,{\"className\":\"max-w-xl text-sm/7 text-gray-600 dark:text-gray-400\",\"children\":\"Supporting multiple language text directions is no longer a nightmare.\"}]]}]]}],[\"$\",\"div\",null,{\"className\":\"flex-1\"}]],[\"$\",\"div\",null,{\"className\":\"h-112 relative overflow-hidden rounded-lg bg-gray-950/[2.5%] after:pointer-events-none after:absolute after:inset-0 after:rounded-lg after:inset-ring after:inset-ring-gray-950/5 dark:after:inset-ring-white/10 bg-[image:radial-gradient(var(--pattern-fg)_1px,_transparent_0)] bg-[size:10px_10px] bg-fixed [--pattern-fg:var(--color-gray-950)]/5 dark:[--pattern-fg:var(--color-white)]/10\",\"children\":[[\"$\",\"div\",null,{\"className\":\"flex px-8 pt-8\",\"children\":[[\"$\",\"div\",null,{\"className\":\"w-full -translate-x-4\",\"children\":[\"$\",\"div\",null,{\"className\":\"font-mono text-[13px]/7 text-gray-950 dark:text-white\",\"children\":\"ltr\"}]}],[\"$\",\"div\",null,{\"className\":\"w-full translate-x-4 translate-y-20 text-right\",\"children\":[\"$\",\"div\",null,{\"className\":\"font-mono text-[13px]/7 text-gray-950 dark:text-white\",\"children\":\"rtl\"}]}]]}],[\"$\",\"div\",null,{\"className\":\"@container relative isolate flex h-full items-center justify-center\",\"children\":[[\"$\",\"div\",null,{\"className\":\"absolute bottom-12 -left-2 z-1 w-[60cqw] shrink-0 divide-y divide-gray-950/5 rounded-xl bg-white shadow-2xl inset-ring inset-ring-gray-950/5 dark:divide-white/5 dark:bg-gray-800 dark:inset-ring-white/5\",\"children\":[[\"$\",\"div\",\"0\",{\"className\":\"flex items-center justify-start gap-4 p-6\",\"children\":[[\"$\",\"div\",null,{\"className\":\"shrink-0\",\"children\":[\"$\",\"img\",null,{\"alt\":\"\",\"src\":\"/_next/static/media/avatar-4.61762eae.png\",\"className\":\"size-12 shrink-0 rounded-full bg-gray-950/5 outline -outline-offset-1 outline-gray-950/10 dark:outline-white/10\"}]}],[\"$\",\"div\",null,{\"className\":\"flex flex-col truncate\",\"children\":[[\"$\",\"span\",null,{\"className\":\"text-sm/6 font-medium text-gray-950 dark:text-white\",\"children\":\"Will Winton\"}],[\"$\",\"span\",null,{\"className\":\"truncate text-sm/6 text-gray-500 dark:text-gray-400\",\"children\":\"Director of Operations\"}]]}]]}],[\"$\",\"div\",\"1\",{\"className\":\"flex items-center justify-start gap-4 p-6\",\"children\":[[\"$\",\"div\",null,{\"className\":\"shrink-0\",\"children\":[\"$\",\"img\",null,{\"alt\":\"\",\"src\":\"/_next/static/media/avatar-5.80ec4bd6.png\",\"className\":\"size-12 shrink-0 rounded-full bg-gray-950/5 outline -outline-offset-1 outline-gray-950/10 dark:outline-white/10\"}]}],[\"$\",\"div\",null,{\"className\":\"flex flex-col truncate\",\"children\":[[\"$\",\"span\",null,{\"className\":\"text-sm/6 font-medium text-gray-950 dark:text-white\",\"children\":\"Kristin Yardly\"}],[\"$\",\"span\",null,{\"className\":\"truncate text-sm/6 text-gray-500 dark:text-gray-400\",\"children\":\"Marketing Coordinator\"}]]}]]}],[\"$\",\"div\",\"2\",{\"className\":\"flex items-center justify-start gap-4 p-6\",\"children\":[[\"$\",\"div\",null,{\"className\":\"shrink-0\",\"children\":[\"$\",\"img\",null,{\"alt\":\"\",\"src\":\"/_next/static/media/avatar-6.4477a8c2.png\",\"className\":\"size-12 shrink-0 rounded-full bg-gray-950/5 outline -outline-offset-1 outline-gray-950/10 dark:outline-white/10\"}]}],[\"$\",\"div\",null,{\"className\":\"flex flex-col truncate\",\"children\":[[\"$\",\"span\",null,{\"className\":\"text-sm/6 font-medium text-gray-950 dark:text-white\",\"children\":\"Emanual Cuccittini\"}],[\"$\",\"span\",null,{\"className\":\"truncate text-sm/6 text-gray-500 dark:text-gray-400\",\"children\":\"Staff Engineer\"}]]}]]}],[\"$\",\"div\",\"3\",{\"className\":\"flex items-center justify-start gap-4 p-6\",\"children\":[[\"$\",\"div\",null,{\"className\":\"shrink-0\",\"children\":[\"$\",\"img\",null,{\"alt\":\"\",\"src\":\"/_next/static/media/avatar-7.7aeec531.png\",\"className\":\"size-12 shrink-0 rounded-full bg-gray-950/5 outline -outline-offset-1 outline-gray-950/10 dark:outline-white/10\"}]}],[\"$\",\"div\",null,{\"className\":\"flex flex-col truncate\",\"children\":[[\"$\",\"span\",null,{\"className\":\"text-sm/6 font-medium text-gray-950 dark:text-white\",\"children\":\"Kiara Smith\"}],[\"$\",\"span\",null,{\"className\":\"truncate text-sm/6 text-gray-500 dark:text-gray-400\",\"children\":\"VP of Engineering\"}]]}]]}]]}],[\"$\",\"div\",null,{\"className\":\"absolute -right-3 bottom-12 w-[50cqw] shrink-0 divide-y divide-gray-950/5 rounded-xl bg-white shadow-2xl inset-ring inset-ring-gray-950/5 dark:divide-white/5 dark:bg-gray-800 dark:inset-ring-white/5\",\"children\":[[\"$\",\"div\",\"0\",{\"className\":\"flex items-center justify-start gap-4 p-6\",\"dir\":\"rtl\",\"children\":[[\"$\",\"div\",null,{\"className\":\"shrink-0\",\"children\":[\"$\",\"img\",null,{\"alt\":\"\",\"src\":\"/_next/static/media/avatar-1.4512b883.png\",\"className\":\"size-12 shrink-0 rounded-full bg-gray-950/5 outline -outline-offset-1 outline-gray-950/10 dark:outline-white/10\"}]}],[\"$\",\"div\",null,{\"className\":\"flex flex-col truncate\",\"children\":[[\"$\",\"span\",null,{\"className\":\"text-sm/6 font-medium text-gray-950 dark:text-white\",\"children\":\"سارة أحمد\"}],[\"$\",\"span\",null,{\"className\":\"truncate text-sm/6 text-gray-500 dark:text-gray-400\",\"children\":\"مديرة مشاريع\"}]]}]]}],[\"$\",\"div\",\"1\",{\"className\":\"flex items-center justify-start gap-4 p-6\",\"dir\":\"rtl\",\"children\":[[\"$\",\"div\",null,{\"className\":\"shrink-0\",\"children\":[\"$\",\"img\",null,{\"alt\":\"\",\"src\":\"/_next/static/media/avatar-2.74328963.png\",\"className\":\"size-12 shrink-0 rounded-full bg-gray-950/5 outline -outline-offset-1 outline-gray-950/10 dark:outline-white/10\"}]}],[\"$\",\"div\",null,{\"className\":\"flex flex-col truncate\",\"children\":[[\"$\",\"span\",null,{\"className\":\"text-sm/6 font-medium text-gray-950 dark:text-white\",\"children\":\"علي محمد\"}],[\"$\",\"span\",null,{\"className\":\"truncate text-sm/6 text-gray-500 dark:text-gray-400\",\"children\":\"مطور برمجيات\"}]]}]]}],[\"$\",\"div\",\"2\",{\"className\":\"flex items-center justify-start gap-4 p-6\",\"dir\":\"rtl\",\"children\":[[\"$\",\"div\",null,{\"className\":\"shrink-0\",\"children\":[\"$\",\"img\",null,{\"alt\":\"\",\"src\":\"/_next/static/media/avatar-3.905e2d38.png\",\"className\":\"size-12 shrink-0 rounded-full bg-gray-950/5 outline -outline-offset-1 outline-gray-950/10 dark:outline-white/10\"}]}],[\"$\",\"div\",null,{\"className\":\"flex flex-col truncate\",\"children\":[[\"$\",\"span\",null,{\"className\":\"text-sm/6 font-medium text-gray-950 dark:text-white\",\"children\":\"خالد عمر\"}],[\"$\",\"span\",null,{\"className\":\"truncate text-sm/6 text-gray-500 dark:text-gray-400\",\"children\":\"مصمم واجهات المستخدم\"}]]}]]}]]}]]}]]}]]}],[\"$\",\"div\",null,{\"className\":\"@container isolate flex flex-col gap-2 overflow-hidden rounded-2xl bg-white p-2 outline outline-gray-950/5 dark:bg-gray-950 dark:outline-white/10 col-span-full md:col-span-15 xl:col-span-10\",\"children\":[[[\"$\",\"div\",null,{\"className\":\"flex flex-col gap-6 p-6 @md:flex-row @md:gap-x-8 @md:p-8\",\"children\":[[\"$\",\"div\",null,{\"className\":\"flex h-18 w-28 shrink-0 items-center justify-center\",\"children\":[\"$\",\"svg\",null,{\"className\":\"text-gray-950 [--site-background:var(--color-white)] dark:text-white dark:[--site-background:var(--color-gray-950)]\",\"width\":112,\"height\":72,\"viewBox\":\"0 0 112 72\",\"fill\":\"none\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"children\":[[\"$\",\"g\",null,{\"clipPath\":\"url(#clip0_408_5756)\",\"children\":[[\"$\",\"path\",null,{\"d\":\"M52.9631 4.99998L3.59961 33.5C2.88216 33.9142 2.52344 34.4571 2.52345 35L2.52344 38C2.52344 38.5429 2.88215 39.0858 3.59958 39.5L52.963 68C54.3979 68.8284 56.7243 68.8284 58.1592 68L107.523 39.5C108.24 39.0858 108.599 38.5429 108.599 38V34.9952C108.597 34.4539 108.238 33.913 107.523 33.5L58.1592 4.99998C56.7243 4.17156 54.3979 4.17156 52.9631 4.99998Z\",\"fill\":\"var(--site-background)\"}],[\"$\",\"path\",null,{\"d\":\"M108.599 34.9952C108.597 34.4539 108.238 33.913 107.523 33.5L58.1592 4.99998C56.7243 4.17156 54.3979 4.17156 52.9631 4.99998L3.59961 33.5C2.88216 33.9142 2.52344 34.4571 2.52345 35M108.599 34.9952C108.601 35.5397 108.242 36.0845 107.523 36.5L58.1592 65C56.7243 65.8284 54.3979 65.8284 52.9631 65L3.59961 36.5C2.88218 36.0858 2.52346 35.5429 2.52345 35M108.599 34.9952V38C108.599 38.5429 108.24 39.0858 107.523 39.5L58.1592 68C56.7243 68.8284 54.3979 68.8284 52.963 68L3.59958 39.5C2.88215 39.0858 2.52344 38.5429 2.52344 38L2.52345 35\",\"stroke\":\"currentColor\"}],[\"$\",\"rect\",null,{\"width\":47,\"height\":47,\"rx\":3,\"transform\":\"matrix(0.866025 -0.5 0.866025 0.5 1 35)\",\"stroke\":\"currentColor\",\"strokeOpacity\":\"0.3\",\"strokeDasharray\":\"3 3\"}],[\"$\",\"rect\",null,{\"width\":31,\"height\":31,\"rx\":3,\"transform\":\"matrix(0.866025 -0.5 0.866025 0.5 1 35)\",\"stroke\":\"currentColor\",\"strokeOpacity\":\"0.3\",\"strokeDasharray\":\"3 3\"}],[\"$\",\"rect\",null,{\"width\":15,\"height\":15,\"rx\":3,\"transform\":\"matrix(0.866025 -0.5 0.866025 0.5 1 35)\",\"stroke\":\"currentColor\",\"strokeOpacity\":\"0.3\",\"strokeDasharray\":\"3 3\"}]]}],[\"$\",\"defs\",null,{\"children\":[\"$\",\"clipPath\",null,{\"id\":\"clip0_408_5756\",\"children\":[\"$\",\"rect\",null,{\"width\":112,\"height\":72,\"fill\":\"var(--site-background)\"}]}]}]]}]}],[\"$\",\"div\",null,{\"children\":[[\"$\",\"span\",null,{\"className\":\"text-xl/10 font-medium text-gray-950 @md:text-2xl/10 dark:text-white\",\"children\":\"Container queries\"}],[\"$\",\"p\",null,{\"className\":\"max-w-xl text-sm/7 text-gray-600 dark:text-gray-400\",\"children\":\"Tag an element as a container to let children adapt to changes in its size.\"}]]}]]}],[\"$\",\"div\",null,{\"className\":\"flex-1\"}]],[\"$\",\"div\",null,{\"className\":\"h-112 p-4 sm:p-8 relative overflow-hidden rounded-lg bg-gray-950/[2.5%] after:pointer-events-none after:absolute after:inset-0 after:rounded-lg after:inset-ring after:inset-ring-gray-950/5 dark:after:inset-ring-white/10 bg-[image:radial-gradient(var(--pattern-fg)_1px,_transparent_0)] bg-[size:10px_10px] bg-fixed [--pattern-fg:var(--color-gray-950)]/5 dark:[--pattern-fg:var(--color-white)]/10\",\"children\":[\"$\",\"div\",null,{\"className\":\"-mr-16 -mb-16\",\"children\":[\"$\",\"div\",null,{\"className\":\"rounded-xl bg-gray-950\",\"children\":[\"$\",\"div\",null,{\"className\":\"rounded-xl p-1 text-sm scheme-dark dark:inset-ring dark:inset-ring-white/10\",\"children\":[[\"$\",\"div\",null,{\"className\":\"flex gap-2 p-2\",\"children\":[[\"$\",\"span\",null,{\"className\":\"size-3 rounded-full bg-white/20\"}],[\"$\",\"span\",null,{\"className\":\"size-3 rounded-full bg-white/20\"}],[\"$\",\"span\",null,{\"className\":\"size-3 rounded-full bg-white/20\"}]]}],[\"$\",\"div\",null,{\"className\":\"with-line-numbers text-[13px]/6 *:*:p-3!\",\"children\":[\"$\",\"div\",null,{\"className\":\"*:flex *:*:max-w-none *:*:shrink-0 *:*:grow *:overflow-auto *:rounded-lg *:bg-white/10! *:p-5 dark:*:bg-white/5! **:[.line]:isolate **:[.line]:not-last:min-h-[1lh] *:inset-ring *:inset-ring-white/10 dark:*:inset-ring-white/5\",\"dangerouslySetInnerHTML\":{\"__html\":\"$13\"}}]}]]}]}]}]}]]}],[\"$\",\"div\",null,{\"className\":\"@container isolate flex flex-col gap-2 overflow-hidden rounded-2xl bg-white p-2 outline outline-gray-950/5 dark:bg-gray-950 dark:outline-white/10 col-span-full md:col-span-15\",\"children\":[[[\"$\",\"div\",null,{\"className\":\"flex flex-col gap-6 p-6 @md:flex-row @md:gap-x-8 @md:p-8\",\"children\":[[\"$\",\"div\",null,{\"className\":\"flex h-18 w-28 shrink-0 items-center justify-center\",\"children\":[\"$\",\"svg\",null,{\"className\":\"text-gray-950 [--site-background:var(--color-white)] dark:text-white dark:[--site-background:var(--color-gray-950)]\",\"width\":112,\"height\":72,\"viewBox\":\"0 0 112 72\",\"fill\":\"none\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"children\":[[\"$\",\"g\",null,{\"clipPath\":\"url(#clip0_408_5730)\",\"children\":[[\"$\",\"path\",null,{\"d\":\"M51.2301 6.00001L5.33071 32.5C4.1443 33.185 3.54647 34.0811 3.53722 34.9788V38C3.53721 38.9048 4.13508 39.8097 5.33082 40.5L51.2302 67C53.6216 68.3807 57.4989 68.3807 59.8904 67L105.79 40.5C106.985 39.8097 107.583 38.9048 107.583 38L107.583 35C107.583 34.0952 106.985 33.1904 105.79 32.5L59.8903 6.00001C57.4988 4.6193 53.6215 4.6193 51.2301 6.00001Z\",\"fill\":\"var(--site-background)\"}],[\"$\",\"path\",null,{\"d\":\"M107.583 35C107.583 34.0952 106.985 33.1904 105.79 32.5L59.8903 6.00001C57.4988 4.6193 53.6215 4.6193 51.2301 6.00001L5.33071 32.5C4.1443 33.185 3.54647 34.0811 3.53722 34.9788M107.583 35C107.583 35.9048 106.985 36.8097 105.79 37.5L59.8903 64C57.4988 65.3807 53.6215 65.3807 51.2301 64L5.33071 37.5C4.12565 36.8043 3.52782 35.8907 3.53722 34.9788M107.583 35L107.583 38C107.583 38.9048 106.985 39.8097 105.79 40.5L59.8904 67C57.4989 68.3807 53.6216 68.3807 51.2302 67L5.33082 40.5C4.13508 39.8097 3.53721 38.9048 3.53722 38V34.9788\",\"stroke\":\"currentColor\"}],[\"$\",\"path\",null,{\"d\":\"M54.6946 61.9999C55.1729 62.276 55.9484 62.276 56.4267 61.9999L100.594 36.4999L56.4267 10.9999C55.9484 10.7238 55.1729 10.7237 54.6946 10.9999L10.5273 36.4999L54.6946 61.9999Z\",\"fill\":\"url(#paint0_linear_408_5730)\"}],[\"$\",\"path\",null,{\"d\":\"M100.593 36.4999L56.4257 10.9999C55.9474 10.7238 55.1719 10.7237 54.6936 10.9999L10.5263 36.4999M100.593 36.4999L102.325 35.4999C102.803 35.2238 102.803 34.776 102.325 34.4999L56.4257 7.99989C55.9474 7.72375 55.1719 7.72375 54.6936 7.99989L8.79427 34.4999C8.31597 34.776 8.31597 35.2237 8.79427 35.4999L10.5263 36.4999M100.593 36.4999L56.4257 61.9999C55.9474 62.276 55.1719 62.276 54.6936 61.9999L10.5263 36.4999\",\"stroke\":\"currentColor\"}],[\"$\",\"path\",null,{\"d\":\"M79.6783 25.5L70.152 31C69.1954 31.5523 68.4199 32.8954 68.4199 34V45C68.4199 45.5161 68.5892 45.8888 68.8672 46.0831L70.6723 47.1287C70.9847 47.3015 71.4123 47.2723 71.884 47L74.9151 45.25L76.6472 46.25L78.3792 43.25L81.4103 41.5C82.3669 40.9477 83.1424 39.6046 83.1424 38.5V27.5C83.1424 26.9318 82.9371 26.5374 82.6076 26.3635L80.8672 25.3592C80.557 25.2 80.1386 25.2342 79.6783 25.5Z\",\"fill\":\"var(--site-background)\"}],[\"$\",\"path\",null,{\"d\":\"M70.6723 47.1287C70.3512 46.951 70.152 46.5599 70.152 46L70.152 35C70.152 33.8954 70.9274 32.5523 71.884 32L81.4103 26.5C81.8748 26.2318 82.2966 26.1994 82.6076 26.3635M70.6723 47.1287C70.9847 47.3015 71.4123 47.2723 71.884 47L74.9151 45.25L76.6472 46.25L78.3792 43.25L81.4103 41.5C82.3669 40.9477 83.1424 39.6046 83.1424 38.5V27.5C83.1424 26.9318 82.9371 26.5374 82.6076 26.3635M70.6723 47.1287L68.8672 46.0831C68.5892 45.8888 68.4199 45.5161 68.4199 45V34C68.4199 32.8954 69.1954 31.5523 70.152 31L79.6783 25.5C80.1386 25.2342 80.557 25.2 80.8672 25.3592L82.6076 26.3635\",\"stroke\":\"currentColor\"}],[\"$\",\"path\",null,{\"d\":\"M71.8848 34L81.411 28.5V39.5L71.8848 45V34Z\",\"stroke\":\"currentColor\"}],[\"$\",\"path\",null,{\"d\":\"M39.8404 2.49999L30.3141 7.99999C29.3575 8.55227 28.582 9.89542 28.582 11V22C28.582 22.5161 28.7513 22.8888 29.0293 23.0831L30.8344 24.1287C31.1468 24.3015 31.5744 24.2723 32.0461 24L35.0772 22.25L36.8093 23.25L38.5413 20.25L41.5724 18.5C42.529 17.9477 43.3045 16.6046 43.3045 15.5V4.49998C43.3045 3.93176 43.0992 3.53737 42.7697 3.36352L41.0293 2.35916C40.7191 2.20002 40.3007 2.23421 39.8404 2.49999Z\",\"fill\":\"var(--site-background)\"}],[\"$\",\"path\",null,{\"d\":\"M30.8344 24.1287C30.5133 23.951 30.3141 23.5599 30.3141 23L30.3141 12C30.3141 10.8954 31.0896 9.55227 32.0461 8.99998L41.5724 3.49999C42.0369 3.23181 42.4587 3.19942 42.7697 3.36352M30.8344 24.1287C31.1468 24.3015 31.5744 24.2723 32.0461 24L35.0772 22.25L36.8093 23.25L38.5413 20.25L41.5724 18.5C42.529 17.9477 43.3045 16.6046 43.3045 15.5V4.49998C43.3045 3.93176 43.0992 3.53737 42.7697 3.36352M30.8344 24.1287L29.0293 23.0831C28.7513 22.8888 28.582 22.5161 28.582 22V11C28.582 9.89542 29.3575 8.55227 30.3141 7.99999L39.8404 2.49999C40.3007 2.23421 40.7191 2.20002 41.0293 2.35916L42.7697 3.36352\",\"stroke\":\"currentColor\"}],[\"$\",\"path\",null,{\"d\":\"M32.0469 11L41.5732 5.5V16.5L32.0469 22V11Z\",\"fill\":\"currentColor\",\"fillOpacity\":\"0.75\",\"stroke\":\"currentColor\"}]]}],[\"$\",\"defs\",null,{\"children\":[[\"$\",\"linearGradient\",null,{\"id\":\"paint0_linear_408_5730\",\"x1\":\"10.501\",\"y1\":36,\"x2\":\"55.5607\",\"y2\":\"62.207\",\"gradientUnits\":\"userSpaceOnUse\",\"children\":[[\"$\",\"stop\",null,{\"stopColor\":\"currentColor\",\"stopOpacity\":\"0.75\"}],[\"$\",\"stop\",null,{\"offset\":1,\"stopColor\":\"var(--site-background)\"}]]}],[\"$\",\"clipPath\",null,{\"id\":\"clip0_408_5730\",\"children\":[\"$\",\"rect\",null,{\"width\":112,\"height\":72,\"fill\":\"var(--site-background)\"}]}]]}]]}]}],[\"$\",\"div\",null,{\"children\":[[\"$\",\"span\",null,{\"className\":\"text-xl/10 font-medium text-gray-950 @md:text-2xl/10 dark:text-white\",\"children\":\"Gradients\"}],[\"$\",\"p\",null,{\"className\":\"max-w-xl text-sm/7 text-gray-600 dark:text-gray-400\",\"children\":\"No need to remember that complicated gradient syntax — create silky-smooth gradients with just a few utility classes.\"}]]}]]}],[\"$\",\"div\",null,{\"className\":\"flex-1\"}]],[\"$\",\"div\",null,{\"className\":\"h-112 p-4 sm:p-8 relative overflow-hidden rounded-lg bg-gray-950/[2.5%] after:pointer-events-none after:absolute after:inset-0 after:rounded-lg after:inset-ring after:inset-ring-gray-950/5 dark:after:inset-ring-white/10 bg-[image:radial-gradient(var(--pattern-fg)_1px,_transparent_0)] bg-[size:10px_10px] bg-fixed [--pattern-fg:var(--color-gray-950)]/5 dark:[--pattern-fg:var(--color-white)]/10\",\"children\":[\"$\",\"div\",null,{\"className\":\"-mt-27 -mr-124 -mb-8 bg-white px-6 py-16 ring ring-gray-950/5 md:px-16 xl:-mr-26 dark:bg-gray-950 dark:ring-white/10\",\"children\":[[\"$\",\"div\",null,{\"className\":\"flex flex-col gap-2\",\"children\":[[\"$\",\"span\",null,{\"className\":\"text-sm/7 font-medium text-gray-950/75 dark:text-white/75\",\"children\":\"Power Meets Precision\"}],[\"$\",\"h3\",null,{\"className\":\"text-4xl/12 font-semibold text-gray-950 dark:text-white\",\"children\":\"Redefining real-time performance\"}],[\"$\",\"p\",null,{\"className\":\"text-lg/7 font-medium text-gray-950/75 dark:text-white/75\",\"children\":\"Our next-generation rendering engine delivers unmatched speed and efficiency, empowering creators to push boundaries like never before.\"}]]}],[\"$\",\"div\",null,{\"className\":\"mt-10 flex flex-col gap-10\",\"children\":[[\"$\",\"div\",null,{\"className\":\"flex gap-6\",\"children\":[[\"$\",\"div\",null,{\"className\":\"flex flex-1 flex-col gap-2.5\",\"children\":[[\"$\",\"span\",null,{\"className\":\"text-base/7 font-medium text-gray-950 dark:text-white\",\"children\":\"Render time performance\"}],[\"$\",\"div\",null,{\"className\":\"h-2.5 w-full rounded-full bg-linear-to-r from-emerald-500 to-sky-400 ring-1 ring-gray-950/10 ring-inset dark:from-emerald-400 dark:ring-white/10\"}]]}],[\"$\",\"span\",null,{\"className\":\"text-3xl/12 font-semibold text-gray-950 dark:text-white\",\"children\":\"6.4x\"}]]}],[\"$\",\"div\",null,{\"className\":\"flex gap-6\",\"children\":[[\"$\",\"div\",null,{\"className\":\"flex flex-1 flex-col gap-2.5\",\"children\":[[\"$\",\"span\",null,{\"className\":\"text-base/7 font-medium text-gray-950 dark:text-white\",\"children\":\"Real-time frame rate\"}],[\"$\",\"div\",null,{\"className\":\"h-2.5 w-3/4 rounded-full bg-linear-to-r from-pink-600 to-amber-300 ring-1 ring-gray-950/10 ring-inset dark:from-pink-500 dark:to-amber-200 dark:ring-white/10\"}]]}],[\"$\",\"span\",null,{\"className\":\"text-3xl/12 font-semibold text-gray-950 dark:text-white\",\"children\":\"4.2x\"}]]}],[\"$\",\"div\",null,{\"className\":\"flex gap-6\",\"children\":[[\"$\",\"div\",null,{\"className\":\"flex flex-1 flex-col gap-2.5\",\"children\":[[\"$\",\"span\",null,{\"className\":\"text-base/7 font-medium text-gray-950 dark:text-white\",\"children\":\"Multi-platform build time\"}],[\"$\",\"div\",null,{\"className\":\"h-2.5 w-1/2 rounded-full bg-linear-to-r from-purple-600 to-cyan-400 ring-1 ring-gray-950/10 ring-inset dark:from-purple-500 dark:ring-white/10\"}]]}],[\"$\",\"span\",null,{\"className\":\"text-3xl/12 font-semibold text-gray-950 dark:text-white\",\"children\":\"2.7x\"}]]}]]}]]}]}]]}],[\"$\",\"div\",null,{\"className\":\"@container isolate flex flex-col gap-2 overflow-hidden rounded-2xl bg-white p-2 outline outline-gray-950/5 dark:bg-gray-950 dark:outline-white/10 col-span-full md:col-span-15\",\"children\":[[[\"$\",\"div\",null,{\"className\":\"flex flex-col gap-6 p-6 @md:flex-row @md:gap-x-8 @md:p-8\",\"children\":[[\"$\",\"div\",null,{\"className\":\"flex h-18 w-28 shrink-0 items-center justify-center\",\"children\":[\"$\",\"svg\",null,{\"className\":\"text-gray-950 [--site-background:var(--color-white)] dark:text-white dark:[--site-background:var(--color-gray-950)]\",\"width\":112,\"height\":72,\"viewBox\":\"0 0 112 72\",\"fill\":\"none\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"children\":[[\"$\",\"g\",null,{\"clipPath\":\"url(#clip0_408_5745)\",\"children\":[[\"$\",\"rect\",null,{\"width\":63,\"height\":63,\"rx\":4,\"transform\":\"matrix(0.866025 -0.5 0.866025 0.5 1.92969 39.814)\",\"stroke\":\"currentColor\",\"strokeDasharray\":\"3 3\"}],[\"$\",\"path\",null,{\"d\":\"M6.82052 32.0748C4.71896 30.8759 4.9198 28.8839 7.24809 27.8339L42.7856 11.8071C44.6906 10.948 47.3962 11.0195 49.1572 11.9756L100.957 40.0964C102.762 41.0766 103.015 42.6809 101.546 43.8334L73.7036 65.6789C71.933 67.0682 68.4396 67.2268 66.3145 66.0145L6.82052 32.0748Z\",\"fill\":\"currentColor\",\"fillOpacity\":\"0.3\"}],[\"$\",\"path\",null,{\"d\":\"M74.1457 62.6688L101.618 43.5542C102.344 43.0493 102.721 42.4339 102.745 41.8139V38.6818C102.722 38.0961 102.384 37.5131 101.729 37.0222L56.8938 3.4116C55.3193 2.23135 52.4292 1.95847 50.2856 2.78769L13.3287 17.0838C11.9732 17.6082 11.2255 18.4488 11.1608 19.3139V22.3139C11.1111 22.9798 11.4661 23.6601 12.2601 24.2219L66.5802 62.651C68.5301 64.0305 72.1763 64.0391 74.1457 62.6688Z\",\"fill\":\"var(--site-background)\"}],[\"$\",\"path\",null,{\"d\":\"M102.745 38.6818C102.722 38.0961 102.384 37.5131 101.729 37.0222L56.8938 3.4116C55.3193 2.23135 52.4292 1.95847 50.2856 2.78769L13.3287 17.0838C11.9732 17.6082 11.2255 18.4488 11.1608 19.3139M102.745 38.6818C102.772 39.3459 102.395 40.0135 101.618 40.5542L74.1457 59.6688C72.1763 61.0391 68.5301 61.0305 66.5802 59.651L12.2601 21.2219C11.4661 20.6601 11.1111 19.9798 11.1608 19.3139M102.745 38.6818V41.8139C102.721 42.4339 102.344 43.0493 101.618 43.5542L74.1457 62.6688C72.1763 64.0391 68.5301 64.0305 66.5802 62.651L12.2601 24.2219C11.4661 23.6601 11.1111 22.9798 11.1608 22.3139V19.3139\",\"stroke\":\"currentColor\"}]]}],[\"$\",\"defs\",null,{\"children\":[\"$\",\"clipPath\",null,{\"id\":\"clip0_408_5745\",\"children\":[\"$\",\"rect\",null,{\"width\":112,\"height\":72,\"fill\":\"var(--site-background)\"}]}]}]]}]}],[\"$\",\"div\",null,{\"children\":[[\"$\",\"span\",null,{\"className\":\"text-xl/10 font-medium text-gray-950 @md:text-2xl/10 dark:text-white\",\"children\":\"3D transforms\"}],[\"$\",\"p\",null,{\"className\":\"max-w-xl text-sm/7 text-gray-600 dark:text-gray-400\",\"children\":\"Sometimes two dimensions aren’t enough. Scale, rotate, and translate any element in 3D space to add a touch of depth.\"}]]}]]}],[\"$\",\"div\",null,{\"className\":\"flex-1\"}]],[\"$\",\"div\",null,{\"className\":\"h-112 p-4 sm:p-8 relative overflow-hidden rounded-lg bg-gray-950/[2.5%] after:pointer-events-none after:absolute after:inset-0 after:rounded-lg after:inset-ring after:inset-ring-gray-950/5 dark:after:inset-ring-white/10 bg-[image:radial-gradient(var(--pattern-fg)_1px,_transparent_0)] bg-[size:10px_10px] bg-fixed [--pattern-fg:var(--color-gray-950)]/5 dark:[--pattern-fg:var(--color-white)]/10\",\"children\":[\"$\",\"$L14\",null,{}]}]]}]]}]}]]}],[\"$\",\"div\",null,{\"className\":\"relative max-w-full\",\"children\":[[\"$\",\"div\",null,{\"aria-hidden\":\"true\",\"className\":\"hidden h-4 items-end px-2 font-mono text-xs/6 whitespace-pre text-black/20 max-sm:px-4 2xl:visible 2xl:flex dark:text-white/25\",\"children\":[\"text-4xl \",[\"$\",\"span\",null,{\"className\":\"inline dark:hidden\",\"children\":\"text-gray-950\"}],[\"$\",\"span\",null,{\"className\":\"hidden dark:inline\",\"children\":\"text-white\"}],\" tracking-tighter text-balance\"]}],[\"$\",\"div\",null,{\"className\":\"2xl:before:hidden 2xl:after:hidden relative before:absolute before:top-0 before:h-px before:w-[200vw] before:bg-gray-950/5 dark:before:bg-white/10 before:-left-[100vw] after:absolute after:bottom-0 after:h-px after:w-[200vw] after:bg-gray-950/5 dark:after:bg-white/10 after:-left-[100vw]\",\"children\":[\"$\",\"p\",null,{\"className\":\"text-pink-500 dark:text-pink-400 top-0 -left-[var(--gutter-width)] origin-bottom-right text-left font-mono text-sm font-semibold tracking-widest uppercase max-2xl:mb-4 max-2xl:px-2 max-sm:px-4 sm:text-xs 2xl:absolute 2xl:-translate-x-full 2xl:-translate-y-full 2xl:-rotate-90 2xl:text-right\",\"children\":\"How it works\"}]}],[\"$\",\"div\",null,{\"className\":\"relative before:absolute before:top-0 before:h-px before:w-[200vw] before:bg-gray-950/5 dark:before:bg-white/10 before:-left-[100vw] after:absolute after:bottom-0 after:h-px after:w-[200vw] after:bg-gray-950/5 dark:after:bg-white/10 after:-left-[100vw]\",\"children\":[\"$\",\"h2\",null,{\"className\":\"mt-4 px-2 text-[2.5rem]/10 font-medium tracking-tighter max-sm:px-4 2xl:mt-0\",\"children\":\"Ship faster and smaller.\"}]}],[\"$\",\"div\",null,{\"className\":\"flex h-6 items-end px-2 font-mono text-xs/6 whitespace-pre text-black/20 max-sm:px-4 sm:h-10 dark:text-white/25\",\"children\":[\"text-base \",[\"$\",\"span\",null,{\"className\":\"inline dark:hidden\",\"children\":\"text-gray-950\"}],[\"$\",\"span\",null,{\"className\":\"hidden dark:inline\",\"children\":\"text-white\"}]]}],[\"$\",\"div\",null,{\"className\":\"relative before:absolute before:top-0 before:h-px before:w-[200vw] before:bg-gray-950/5 dark:before:bg-white/10 before:-left-[100vw] after:absolute after:bottom-0 after:h-px after:w-[200vw] after:bg-gray-950/5 dark:after:bg-white/10 after:-left-[100vw]\",\"children\":[\"$\",\"p\",null,{\"className\":\"max-w-(--breakpoint-md) px-2 text-base/7 text-gray-600 max-sm:px-4 dark:text-gray-400\",\"children\":\"Tailwind automatically removes all unused CSS when building for production, which means your final CSS bundle is the smallest it could possibly be. In fact, most Tailwind projects ship less than 10kB of CSS to the client.\"}]}],[\"$\",\"div\",null,{\"className\":\"mt-16 relative before:absolute before:top-0 before:h-px before:w-[200vw] before:bg-gray-950/5 dark:before:bg-white/10 before:-left-[100vw] after:absolute after:bottom-0 after:h-px after:w-[200vw] after:bg-gray-950/5 dark:after:bg-white/10 after:-left-[100vw]\",\"children\":[\"$\",\"div\",null,{\"className\":\"w-full bg-gray-950/5 p-2 dark:bg-white/10\",\"children\":[\"$\",\"div\",null,{\"className\":\"not-prose\",\"children\":[\"$\",\"div\",null,{\"className\":\"@container rounded-xl bg-gray-950 in-[figure]:-mx-1 in-[figure]:-mb-1\",\"children\":[\"$\",\"div\",null,{\"className\":\"rounded-xl p-1 text-sm scheme-dark dark:bg-white/5 dark:inset-ring dark:inset-ring-white/10\",\"children\":[\"$\",\"$L15\",null,{\"timeline\":[{\"terminal\":[[\"$\",\"$1\",\"1\",{\"children\":[[\"$\",\"span\",null,{\"className\":\"text-purple-300\",\"aria-hidden\":\"true\",\"children\":\"≈\"}],[\"$\",\"span\",null,{\"aria-label\":\"Tailwind CSS\",\"children\":\" tailwindcss \"}],[\"$\",\"span\",null,{\"className\":\"text-purple-300\",\"children\":\"v4.0.0\"}]]}],[\"$\",\"span\",\"2\",{}],[\"$\",\"$1\",\"3\",{\"children\":[[\"$\",\"span\",null,{\"children\":\"Done in \"}],[\"$\",\"span\",null,{\"className\":\"text-sky-300\",\"children\":\"12ms\"}]]}]]},{\"class\":\"flex\",\"terminal\":[[\"$\",\"$1\",\"4\",{\"children\":[[\"$\",\"span\",null,{\"children\":\"Done in \"}],[\"$\",\"span\",null,{\"className\":\"text-sky-300\",\"children\":\"668µs\"}]]}]]},{\"class\":\"items-center\",\"terminal\":[[\"$\",\"$1\",\"5\",{\"children\":[[\"$\",\"span\",null,{\"children\":\"Done in \"}],[\"$\",\"span\",null,{\"className\":\"text-sky-300\",\"children\":\"425µs\"}]]}]]},{\"class\":\"bg-blue-500\",\"terminal\":[[\"$\",\"$1\",\"6\",{\"children\":[[\"$\",\"span\",null,{\"children\":\"Done in \"}],[\"$\",\"span\",null,{\"className\":\"text-sky-300\",\"children\":\"451µs\"}]]}]]},{\"class\":\"px-4\",\"terminal\":[[\"$\",\"$1\",\"7\",{\"children\":[[\"$\",\"span\",null,{\"children\":\"Done in \"}],[\"$\",\"span\",null,{\"className\":\"text-sky-300\",\"children\":\"940µs\"}]]}]]},{\"class\":\"py-3\",\"terminal\":[[\"$\",\"$1\",\"7\",{\"children\":[[\"$\",\"span\",null,{\"children\":\"Done in \"}],[\"$\",\"span\",null,{\"className\":\"text-sky-300\",\"children\":\"2ms\"}]]}]]},{\"class\":\"text-white\",\"terminal\":[[\"$\",\"$1\",\"8\",{\"children\":[[\"$\",\"span\",null,{\"children\":\"Done in \"}],[\"$\",\"span\",null,{\"className\":\"text-sky-300\",\"children\":\"1ms\"}]]}]]},{\"class\":\"hover:bg-blue-400\",\"terminal\":[[\"$\",\"$1\",\"9\",{\"children\":[[\"$\",\"span\",null,{\"children\":\"Done in \"}],[\"$\",\"span\",null,{\"className\":\"text-sky-300\",\"children\":\"993µs\"}]]}]]}],\"children\":[[\"$\",\"div\",null,{\"className\":\"flex w-fit gap-2 p-1 pb-2\",\"children\":[[\"$\",\"span\",null,{\"className\":\"inline-flex size-3 items-center justify-center rounded-full bg-white/20\",\"children\":[\"$\",\"span\",null,{\"className\":\"inline-flex size-1.5 items-center justify-center rounded-full bg-white/20 transition-opacity duration-300 ease-in opacity-0 group-data-modified:opacity-100 group-data-modified:duration-100 group-data-modified:ease-linear\"}]}],[\"$\",\"span\",null,{\"className\":\"size-3 rounded-full bg-white/20\"}],[\"$\",\"span\",null,{\"className\":\"size-3 rounded-full bg-white/20\"}]]}],[\"$\",\"div\",null,{\"className\":\"flex w-full flex-col gap-1 lg:h-132.5 lg:flex-row\",\"children\":[[\"$\",\"div\",null,{\"className\":\"flex flex-col gap-1 lg:w-1/2 xl:w-5/8\",\"children\":[[\"$\",\"$L16\",null,{\"aria-label\":\"panel, HTML editor, animated\",\"enabled\":true,\"className\":\"isolate flex flex-col overflow-hidden rounded-lg bg-white/10 dark:bg-white/5 inset-ring inset-ring-white/5 min-h-0 flex-1 max-lg:max-h-76\",\"children\":[[\"$\",\"div\",null,{\"className\":\"sticky top-0 left-0 z-10 col-start-1 row-start-1 mb-px flex items-center gap-2 border-b border-b-white/5 bg-white/2.5 bg-clip-padding p-1 text-white backdrop-blur-lg\",\"role\":\"presentation\",\"aria-label\":\"Tab Bar\",\"children\":[[\"$\",\"button\",null,{\"className\":\"isolate rounded-sm px-2 py-1 text-xs/5 text-white inset-ring-white/5 hover:bg-white/10 aria-selected:bg-white/10 aria-selected:inset-ring group-data-modified:italic\",\"role\":\"presentation\",\"aria-selected\":true,\"children\":\"index.html\"}],[\"$\",\"button\",null,{\"className\":\"isolate rounded-sm px-2 py-1 text-xs/5 text-white inset-ring-white/5 hover:bg-white/10 aria-selected:bg-white/10 aria-selected:inset-ring\",\"role\":\"presentation\",\"aria-selected\":\"$undefined\",\"children\":\"app.css\"}],[\"$\",\"button\",null,{\"className\":\"isolate rounded-sm px-2 py-1 text-xs/5 text-white inset-ring-white/5 hover:bg-white/10 aria-selected:bg-white/10 aria-selected:inset-ring italic\",\"role\":\"presentation\",\"aria-selected\":\"$undefined\",\"children\":\"package.json\"}]]}],[\"$\",\"div\",null,{\"aria-label\":\"editor, readonly, html file\",\"className\":\"*:flex *:*:max-w-none *:*:shrink-0 *:*:grow *:rounded-lg *:px-3 *:py-2 **:[.line]:isolate **:[.line]:block **:[.line]:not-last:min-h-[1lh] **:[code]:pr-4 **:[code]:w-full **:[pre]:w-full **:[pre]:whitespace-pre-wrap text-[0.8125rem]/[1.5rem] with-line-numbers\",\"children\":[[\"$\",\"pre\",\"pre-0\",{\"className\":\"shiki tailwindcss-theme\",\"style\":{\"backgroundColor\":\"transparent\",\"color\":\"var(--color-slate-50)\"},\"tabIndex\":\"0\",\"children\":[\"$\",\"code\",\"code-0\",{\"children\":[[\"$\",\"span\",\"span-0\",{\"className\":\"line\",\"children\":[[\"$\",\"span\",\"span-0\",{\"style\":{\"color\":\"var(--color-slate-400)\"},\"children\":\"\u003c!\"}],[\"$\",\"span\",\"span-1\",{\"style\":{\"color\":\"var(--color-pink-400)\"},\"children\":\"DOCTYPE\"}],[\"$\",\"span\",\"span-2\",{\"style\":{\"color\":\"var(--color-slate-300)\"},\"children\":\" html\"}],[\"$\",\"span\",\"span-3\",{\"style\":{\"color\":\"var(--color-slate-400)\"},\"children\":\"\u003e\"}]]}],[\"$\",\"span\",\"span-1\",{\"className\":\"line\",\"children\":[[\"$\",\"span\",\"span-0\",{\"style\":{\"color\":\"var(--color-slate-400)\"},\"children\":\"\u003c\"}],[\"$\",\"span\",\"span-1\",{\"style\":{\"color\":\"var(--color-pink-400)\"},\"children\":\"html\"}],[\"$\",\"span\",\"span-2\",{\"style\":{\"color\":\"var(--color-slate-300)\"},\"children\":\" lang\"}],[\"$\",\"span\",\"span-3\",{\"style\":{\"color\":\"var(--color-slate-400)\"},\"children\":\"=\"}],[\"$\",\"span\",\"span-4\",{\"style\":{\"color\":\"var(--color-sky-300)\"},\"children\":\"\\\"en\\\"\"}],[\"$\",\"span\",\"span-5\",{\"style\":{\"color\":\"var(--color-slate-400)\"},\"children\":\"\u003e\"}]]}],[\"$\",\"span\",\"span-2\",{\"className\":\"line\",\"children\":[[\"$\",\"span\",\"span-0\",{\"style\":{\"color\":\"var(--color-slate-400)\"},\"children\":\" \u003c\"}],[\"$\",\"span\",\"span-1\",{\"style\":{\"color\":\"var(--color-pink-400)\"},\"children\":\"head\"}],[\"$\",\"span\",\"span-2\",{\"style\":{\"color\":\"var(--color-slate-400)\"},\"children\":\"\u003e\"}]]}],[\"$\",\"span\",\"span-3\",{\"className\":\"line\",\"children\":[[\"$\",\"span\",\"span-0\",{\"style\":{\"color\":\"var(--color-slate-400)\"},\"children\":\" \u003c\"}],[\"$\",\"span\",\"span-1\",{\"style\":{\"color\":\"var(--color-pink-400)\"},\"children\":\"meta\"}],[\"$\",\"span\",\"span-2\",{\"style\":{\"color\":\"var(--color-slate-300)\"},\"children\":\" charset\"}],[\"$\",\"span\",\"span-3\",{\"style\":{\"color\":\"var(--color-slate-400)\"},\"children\":\"=\"}],[\"$\",\"span\",\"span-4\",{\"style\":{\"color\":\"var(--color-sky-300)\"},\"children\":\"\\\"UTF-8\\\"\"}],[\"$\",\"span\",\"span-5\",{\"style\":{\"color\":\"var(--color-slate-400)\"},\"children\":\" /\u003e\"}]]}],[\"$\",\"span\",\"span-4\",{\"className\":\"line\",\"children\":[[\"$\",\"span\",\"span-0\",{\"style\":{\"color\":\"var(--color-slate-400)\"},\"children\":\" \u003c\"}],[\"$\",\"span\",\"span-1\",{\"style\":{\"color\":\"var(--color-pink-400)\"},\"children\":\"meta\"}],[\"$\",\"span\",\"span-2\",{\"style\":{\"color\":\"var(--color-slate-300)\"},\"children\":\" name\"}],[\"$\",\"span\",\"span-3\",{\"style\":{\"color\":\"var(--color-slate-400)\"},\"children\":\"=\"}],[\"$\",\"span\",\"span-4\",{\"style\":{\"color\":\"var(--color-sky-300)\"},\"children\":\"\\\"viewport\\\"\"}],[\"$\",\"span\",\"span-5\",{\"style\":{\"color\":\"var(--color-slate-300)\"},\"children\":\" content\"}],[\"$\",\"span\",\"span-6\",{\"style\":{\"color\":\"var(--color-slate-400)\"},\"children\":\"=\"}],[\"$\",\"span\",\"span-7\",{\"style\":{\"color\":\"var(--color-sky-300)\"},\"children\":\"\\\"width=device-width, initial-scale=1.0\\\"\"}],[\"$\",\"span\",\"span-8\",{\"style\":{\"color\":\"var(--color-slate-400)\"},\"children\":\" /\u003e\"}]]}],[\"$\",\"span\",\"span-5\",{\"className\":\"line\",\"children\":[[\"$\",\"span\",\"span-0\",{\"style\":{\"color\":\"var(--color-slate-400)\"},\"children\":\" \u003c\"}],[\"$\",\"span\",\"span-1\",{\"style\":{\"color\":\"var(--color-pink-400)\"},\"children\":\"title\"}],[\"$\",\"span\",\"span-2\",{\"style\":{\"color\":\"var(--color-slate-400)\"},\"children\":\"\u003e\"}],[\"$\",\"span\",\"span-3\",{\"style\":{\"color\":\"var(--color-slate-50)\"},\"children\":\"Tailwind CSS\"}],[\"$\",\"span\",\"span-4\",{\"style\":{\"color\":\"var(--color-slate-400)\"},\"children\":\"\u003c/\"}],[\"$\",\"span\",\"span-5\",{\"style\":{\"color\":\"var(--color-pink-400)\"},\"children\":\"title\"}],[\"$\",\"span\",\"span-6\",{\"style\":{\"color\":\"var(--color-slate-400)\"},\"children\":\"\u003e\"}]]}],[\"$\",\"span\",\"span-6\",{\"className\":\"line\",\"children\":[[\"$\",\"span\",\"span-0\",{\"style\":{\"color\":\"var(--color-slate-400)\"},\"children\":\" \u003c\"}],[\"$\",\"span\",\"span-1\",{\"style\":{\"color\":\"var(--color-pink-400)\"},\"children\":\"link\"}],[\"$\",\"span\",\"span-2\",{\"style\":{\"color\":\"var(--color-slate-300)\"},\"children\":\" rel\"}],[\"$\",\"span\",\"span-3\",{\"style\":{\"color\":\"var(--color-slate-400)\"},\"children\":\"=\"}],[\"$\",\"span\",\"span-4\",{\"style\":{\"color\":\"var(--color-sky-300)\"},\"children\":\"\\\"stylesheet\\\"\"}],[\"$\",\"span\",\"span-5\",{\"style\":{\"color\":\"var(--color-slate-300)\"},\"children\":\" href\"}],[\"$\",\"span\",\"span-6\",{\"style\":{\"color\":\"var(--color-slate-400)\"},\"children\":\"=\"}],[\"$\",\"span\",\"span-7\",{\"style\":{\"color\":\"var(--color-sky-300)\"},\"children\":\"\\\"/build.css\\\"\"}],[\"$\",\"span\",\"span-8\",{\"style\":{\"color\":\"var(--color-slate-400)\"},\"children\":\" /\u003e\"}]]}],[\"$\",\"span\",\"span-7\",{\"className\":\"line\",\"children\":[[\"$\",\"span\",\"span-0\",{\"style\":{\"color\":\"var(--color-slate-400)\"},\"children\":\" \u003c/\"}],[\"$\",\"span\",\"span-1\",{\"style\":{\"color\":\"var(--color-pink-400)\"},\"children\":\"head\"}],[\"$\",\"span\",\"span-2\",{\"style\":{\"color\":\"var(--color-slate-400)\"},\"children\":\"\u003e\"}]]}],[\"$\",\"span\",\"span-8\",{\"className\":\"line\",\"children\":[[\"$\",\"span\",\"span-0\",{\"style\":{\"color\":\"var(--color-slate-400)\"},\"children\":\" \u003c\"}],[\"$\",\"span\",\"span-1\",{\"style\":{\"color\":\"var(--color-pink-400)\"},\"children\":\"body\"}],[\"$\",\"span\",\"span-2\",{\"style\":{\"color\":\"var(--color-slate-400)\"},\"children\":\"\u003e\"}]]}],[\"$\",\"span\",\"span-9\",{\"className\":\"line\",\"children\":[[\"$\",\"span\",\"span-0\",{\"style\":{\"color\":\"var(--color-slate-400)\"},\"children\":\" \u003c\"}],[\"$\",\"span\",\"span-1\",{\"style\":{\"color\":\"var(--color-pink-400)\"},\"children\":\"button\"}],[\"$\",\"span\",\"span-2\",{\"style\":{\"color\":\"var(--color-slate-300)\"},\"children\":\" class\"}],[\"$\",\"span\",\"span-3\",{\"style\":{\"color\":\"var(--color-slate-400)\"},\"children\":\"=\"}],[\"$\",\"span\",\"span-4\",{\"style\":{\"color\":\"var(--color-sky-300)\"},\"children\":[\"\\\"\",[\"$\",\"$L17\",null,{}],[\"$\",\"span\",null,{\"className\":\"transition-opacity duration-300 group-data-finished:opacity-0 after:absolute after:mt-1.5 after:inline-block after:h-[1.2em] after:w-px after:border-r-2 after:border-sky-400 after:bg-transparent after:content-['']\"}],\"\\\"\"]}],[\"$\",\"span\",\"span-5\",{\"style\":{\"color\":\"var(--color-slate-400)\"},\"children\":\"\u003e\u003c/\"}],[\"$\",\"span\",\"span-6\",{\"style\":{\"color\":\"var(--color-pink-400)\"},\"children\":\"button\"}],[\"$\",\"span\",\"span-7\",{\"style\":{\"color\":\"var(--color-slate-400)\"},\"children\":\"\u003e\"}]]}],[\"$\",\"span\",\"span-10\",{\"className\":\"line\",\"children\":[[\"$\",\"span\",\"span-0\",{\"style\":{\"color\":\"var(--color-slate-400)\"},\"children\":\" \u003c/\"}],[\"$\",\"span\",\"span-1\",{\"style\":{\"color\":\"var(--color-pink-400)\"},\"children\":\"body\"}],[\"$\",\"span\",\"span-2\",{\"style\":{\"color\":\"var(--color-slate-400)\"},\"children\":\"\u003e\"}]]}],[\"$\",\"span\",\"span-11\",{\"className\":\"line\",\"children\":[[\"$\",\"span\",\"span-0\",{\"style\":{\"color\":\"var(--color-slate-400)\"},\"children\":\"\u003c/\"}],[\"$\",\"span\",\"span-1\",{\"style\":{\"color\":\"var(--color-pink-400)\"},\"children\":\"html\"}],[\"$\",\"span\",\"span-2\",{\"style\":{\"color\":\"var(--color-slate-400)\"},\"children\":\"\u003e\"}]]}]]}]}]]}]]}],[\"$\",\"$L16\",null,{\"aria-label\":\"panel, terminal, animated\",\"enabled\":true,\"className\":\"isolate flex flex-col overflow-hidden rounded-lg bg-white/10 dark:bg-white/5 inset-ring inset-ring-white/5 h-32 shrink-0 lg:h-46\",\"children\":[[\"$\",\"div\",null,{\"className\":\"sticky top-0 left-0 z-10 col-start-1 row-start-1 mb-px flex items-center gap-2 border-b border-b-white/5 bg-white/2.5 bg-clip-padding p-1 text-white backdrop-blur-lg\",\"role\":\"presentation\",\"aria-label\":\"Tab Bar\",\"children\":[\"$\",\"button\",null,{\"className\":\"isolate rounded-sm px-2 py-1 text-xs/5 text-white inset-ring-white/5 hover:bg-white/10 aria-selected:bg-white/10 aria-selected:inset-ring\",\"role\":\"presentation\",\"aria-selected\":true,\"children\":\"Terminal\"}]}],[\"$\",\"div\",null,{\"className\":\"*:flex *:*:max-w-none *:*:shrink-0 *:*:grow *:rounded-lg *:px-4 *:py-2 **:[.line]:isolate **:[.line]:block **:[.line]:not-last:min-h-[1lh] **:[code]:pr-4 text-[0.8125rem]/[1.5rem]\",\"children\":[\"$\",\"pre\",null,{\"className\":\"text-slate-50\",\"children\":[\"$\",\"code\",null,{\"children\":[\"$\",\"$L18\",null,{}]}]}]}]]}]]}],[\"$\",\"div\",null,{\"className\":\"flex h-66 flex-col gap-2.5 lg:h-auto lg:w-1/2 xl:w-3/8\",\"children\":[\"$\",\"$L16\",null,{\"aria-label\":\"panel, built CSS, animated\",\"enabled\":true,\"className\":\"isolate flex flex-col overflow-hidden rounded-lg bg-white/10 dark:bg-white/5 inset-ring inset-ring-white/5 h-full\",\"children\":[[\"$\",\"div\",null,{\"className\":\"sticky top-0 left-0 z-10 col-start-1 row-start-1 mb-px flex items-center gap-2 border-b border-b-white/5 bg-white/2.5 bg-clip-padding p-1 text-white backdrop-blur-lg\",\"role\":\"presentation\",\"aria-label\":\"Tab Bar\",\"children\":[\"$\",\"button\",null,{\"className\":\"isolate rounded-sm px-2 py-1 text-xs/5 text-white inset-ring-white/5 hover:bg-white/10 aria-selected:bg-white/10 aria-selected:inset-ring\",\"role\":\"presentation\",\"aria-selected\":true,\"children\":\"build.css\"}]}],\"$L19\"]}]}]]}]]}]}]}]}]}]}]]}],[\"$\",\"div\",null,{\"className\":\"relative max-w-full\",\"children\":[[\"$\",\"div\",null,{\"aria-hidden\":\"true\",\"className\":\"h-6 max-w-screen items-end px-2 font-mono text-xs/6 whitespace-pre text-black/20 max-sm:px-4 2xl:flex dark:text-white/25\",\"children\":[\"text-4xl \",[\"$\",\"span\",null,{\"className\":\"inline dark:hidden\",\"children\":\"text-gray-950\"}],[\"$\",\"span\",null,{\"className\":\"hidden dark:inline\",\"children\":\"text-white\"}],\" tracking-tighter\"]}],[\"$\",\"div\",null,{\"className\":\"2xl:before:hidden 2xl:after:hidden relative before:absolute before:top-0 before:h-px before:w-[200vw] before:bg-gray-950/5 dark:before:bg-white/10 before:-left-[100vw] after:absolute after:bottom-0 after:h-px after:w-[200vw] after:bg-gray-950/5 dark:after:bg-white/10 after:-left-[100vw]\",\"children\":[\"$\",\"p\",null,{\"className\":\"text-fuchsia-500 dark:text-fuchsia-400 top-0 -left-[var(--gutter-width)] origin-bottom-right text-left font-mono text-sm font-semibold tracking-widest uppercase max-2xl:mb-4 max-2xl:px-2 max-sm:px-4 sm:text-xs 2xl:absolute 2xl:-translate-x-full 2xl:-translate-y-full 2xl:-rotate-90 2xl:text-right\",\"children\":\"Tailwind in the wild\"}]}],[\"$\",\"div\",null,{\"className\":\"relative before:absolute before:top-0 before:h-px before:w-[200vw] before:bg-gray-950/5 dark:before:bg-white/10 before:-left-[100vw] after:absolute after:bottom-0 after:h-px after:w-[200vw] after:bg-gray-950/5 dark:after:bg-white/10 after:-left-[100vw]\",\"children\":[\"$\",\"h2\",null,{\"className\":\"max-w-lg px-2 text-[2.5rem]/10 font-medium tracking-tighter text-balance max-sm:px-4\",\"children\":\"Build whatever you want, without touching your CSS file.\"}]}],[\"$\",\"div\",null,{\"className\":\"flex h-6 items-end px-2 font-mono text-xs/6 whitespace-pre text-black/20 max-sm:px-4 sm:h-10 dark:text-white/25\",\"children\":[\"text-base \",[\"$\",\"span\",null,{\"className\":\"inline dark:hidden\",\"children\":\"text-gray-950\"}],[\"$\",\"span\",null,{\"className\":\"hidden dark:inline\",\"children\":\"text-white\"}]]}],[\"$\",\"div\",null,{\"className\":\"relative before:absolute before:top-0 before:h-px before:w-[200vw] before:bg-gray-950/5 dark:before:bg-white/10 before:-left-[100vw] after:absolute after:bottom-0 after:h-px after:w-[200vw] after:bg-gray-950/5 dark:after:bg-white/10 after:-left-[100vw]\",\"children\":[\"$\",\"p\",null,{\"className\":\"max-w-(--breakpoint-md) px-2 text-base/7 text-gray-600 max-sm:px-4 dark:text-gray-400\",\"children\":\"Because Tailwind is so low-level, it never encourages you to design the same site twice. Some of your favorite sites are built with Tailwind, and you probably had no idea.\"}]}],[\"$\",\"div\",null,{\"className\":\"mt-18 relative before:absolute before:top-0 before:h-px before:w-[200vw] before:bg-gray-950/5 dark:before:bg-white/10 before:-left-[100vw] after:absolute after:bottom-0 after:h-px after:w-[200vw] after:bg-gray-950/5 dark:after:bg-white/10 after:-left-[100vw]\",\"children\":[\"$\",\"div\",null,{\"className\":\"h-auto bg-gray-950/5 p-2 dark:bg-white/10\",\"children\":[\"$\",\"div\",null,{\"className\":\"@container isolate flex flex-col gap-2 overflow-hidden rounded-2xl bg-white p-2 outline outline-gray-950/5 dark:bg-gray-950 dark:outline-white/10 flex h-full flex-row overflow-hidden p-0!\",\"children\":[[\"$\",\"div\",null,{\"className\":\"hidden flex-col gap-2 lg:flex\",\"children\":[[\"$\",\"a\",null,{\"href\":\"https://openai.com/\",\"rel\":\"noreferrer\",\"target\":\"_blank\",\"className\":\"group relative opacity-75 transition-opacity hover:opacity-100\",\"children\":[[\"$\",\"div\",null,{\"className\":\"absolute top-1/2 left-1/2 z-10 hidden -translate-x-1/2 -translate-y-1/2 transform flex-row items-center gap-[calc(1rem/16*7)] rounded-full border border-gray-950 bg-gray-950/90 py-0.5 pr-2 pb-1 pl-3 text-center font-mono text-sm/6 font-medium text-white opacity-0 inset-ring inset-ring-white/10 transition-opacity group-hover:flex group-hover:opacity-100\",\"children\":[\"openai.com\",[\"$\",\"svg\",null,{\"viewBox\":\"0 0 16 16\",\"fill\":\"currentColor\",\"className\":\"size-4\",\"children\":[\"$\",\"path\",null,{\"fillRule\":\"evenodd\",\"d\":\"M4.22 11.78a.75.75 0 0 1 0-1.06L9.44 5.5H5.75a.75.75 0 0 1 0-1.5h5.5a.75.75 0 0 1 .75.75v5.5a.75.75 0 0 1-1.5 0V6.56l-5.22 5.22a.75.75 0 0 1-1.06 0Z\",\"clipRule\":\"evenodd\"}]}]]}],[\"$\",\"$L1a\",null,{\"src\":{\"src\":\"/_next/static/media/openai.7382a1a8.png\",\"height\":513,\"width\":606,\"blurDataURL\":\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAHCAMAAAACh/xsAAAAVFBMVEX3/PrvbLj0m8rkhL+6sNzIr9/toM32+ffufb3yrdXfWaK8uuLjkc/nYa/Elb/Kg7Sxo9bBh7fIn9fTb6O2l8Dja7Xec7bdltHYsc33yeXzotHviLeNt10/AAAACHRSTlP5////////9dU7sk0AAAAJcEhZcwAAFiUAABYlAUlSJPAAAAA8SURBVHicLcFHAoAwCATAhQBCirHX///TizOYRMqS3LDNo2jyQLnWrqcHtHo+qgca0Z4bBV7mx4xv/IYPSAoCCySTq0sAAAAASUVORK5CYII=\",\"blurWidth\":8,\"blurHeight\":7},\"alt\":\"OpenAI\",\"width\":303}]]}],[\"$\",\"a\",null,{\"href\":\"https://opalcamera.com/\",\"rel\":\"noreferrer\",\"target\":\"_blank\",\"className\":\"group relative opacity-75 transition-opacity hover:opacity-100\",\"children\":[[\"$\",\"div\",null,{\"className\":\"absolute top-1/2 left-1/2 z-10 hidden -translate-x-1/2 -translate-y-1/2 transform flex-row items-center gap-[calc(1rem/16*7)] rounded-full border border-gray-950 bg-gray-950/90 py-0.5 pr-2 pb-1 pl-3 text-center font-mono text-sm/6 font-medium text-white opacity-0 inset-ring inset-ring-white/10 transition-opacity group-hover:flex group-hover:opacity-100\",\"children\":[\"opalcamera.com\",[\"$\",\"svg\",null,{\"viewBox\":\"0 0 16 16\",\"fill\":\"currentColor\",\"className\":\"size-4\",\"children\":[\"$\",\"path\",null,{\"fillRule\":\"evenodd\",\"d\":\"M4.22 11.78a.75.75 0 0 1 0-1.06L9.44 5.5H5.75a.75.75 0 0 1 0-1.5h5.5a.75.75 0 0 1 .75.75v5.5a.75.75 0 0 1-1.5 0V6.56l-5.22 5.22a.75.75 0 0 1-1.06 0Z\",\"clipRule\":\"evenodd\"}]}]]}],[\"$\",\"$L1a\",null,{\"src\":{\"src\":\"/_next/static/media/opal.e71c9d52.png\",\"height\":851,\"width\":606,\"blurDataURL\":\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAICAMAAADtGH4KAAAAHlBMVEXx8fL////4+Pja29vQ0NDh4eHq6upWan1HR0e5ublb9l5JAAAABXRSTlP+/Pz7/uhMLEsAAAAJcEhZcwAAFiUAABYlAUlSJPAAAAAsSURBVHicNcXBDcAwEALBhQsk7r9hK5Y8n6HFgua8AiPeYPv2Bck8f6JBnQ0P9wCMe43dKAAAAABJRU5ErkJggg==\",\"blurWidth\":6,\"blurHeight\":8},\"alt\":\"Opal\",\"width\":303}]]}],[\"$\",\"a\",null,{\"href\":\"https://feastables.com/\",\"rel\":\"noreferrer\",\"target\":\"_blank\",\"className\":\"group relative opacity-75 transition-opacity hover:opacity-100\",\"children\":[[\"$\",\"div\",null,{\"className\":\"absolute top-1/2 left-1/2 z-10 hidden -translate-x-1/2 -translate-y-1/2 transform flex-row items-center gap-[calc(1rem/16*7)] rounded-full border border-gray-950 bg-gray-950/90 py-0.5 pr-2 pb-1 pl-3 text-center font-mono text-sm/6 font-medium text-white opacity-0 inset-ring inset-ring-white/10 transition-opacity group-hover:flex group-hover:opacity-100\",\"children\":[\"feastables.com\",[\"$\",\"svg\",null,{\"viewBox\":\"0 0 16 16\",\"fill\":\"currentColor\",\"className\":\"size-4\",\"children\":[\"$\",\"path\",null,{\"fillRule\":\"evenodd\",\"d\":\"M4.22 11.78a.75.75 0 0 1 0-1.06L9.44 5.5H5.75a.75.75 0 0 1 0-1.5h5.5a.75.75 0 0 1 .75.75v5.5a.75.75 0 0 1-1.5 0V6.56l-5.22 5.22a.75.75 0 0 1-1.06 0Z\",\"clipRule\":\"evenodd\"}]}]]}],[\"$\",\"$L1a\",null,{\"src\":{\"src\":\"/_next/static/media/feastables.d874fae5.png\",\"height\":834,\"width\":606,\"blurDataURL\":\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAICAMAAADtGH4KAAAASFBMVEW4zNXKyr3Cu7XWxL2i2uRQ2P3g2c6+09hixOWhw9bHzJ9V2v6q1+LubajOqKy4xJyYxdCJkrOHmrTm49rSp7P1scTToqH/Z6b2TcblAAAACnRSTlP+/////////P39rnIViwAAAAlwSFlzAAAWJQAAFiUBSVIk8AAAADlJREFUeJwdxUkSgCAMAMFJSAKCiOL2/59aZV+askDOtPXt/cbt2a6EW60SuCXRP9Wg2T4PcIsh5wcsdAGE70avsQAAAABJRU5ErkJggg==\",\"blurWidth\":6,\"blurHeight\":8},\"alt\":\"Feastables\",\"width\":303}]]}]]}],[\"$\",\"div\",null,{\"className\":\"flex flex-col gap-2\",\"children\":[[\"$\",\"a\",null,{\"href\":\"https://gumroad.com/\",\"rel\":\"noreferrer\",\"target\":\"_blank\",\"className\":\"group relative opacity-75 transition-opacity hover:opacity-100\",\"children\":[[\"$\",\"div\",null,{\"className\":\"absolute top-1/2 left-1/2 z-10 hidden -translate-x-1/2 -translate-y-1/2 transform flex-row items-center gap-[calc(1rem/16*7)] rounded-full border border-gray-950 bg-gray-950/90 py-0.5 pr-2 pb-1 pl-3 text-center font-mono text-sm/6 font-medium text-white opacity-0 inset-ring inset-ring-white/10 transition-opacity group-hover:flex group-hover:opacity-100\",\"children\":[\"gumroad.com\",[\"$\",\"svg\",null,{\"viewBox\":\"0 0 16 16\",\"fill\":\"currentColor\",\"className\":\"size-4\",\"children\":[\"$\",\"path\",null,{\"fillRule\":\"evenodd\",\"d\":\"M4.22 11.78a.75.75 0 0 1 0-1.06L9.44 5.5H5.75a.75.75 0 0 1 0-1.5h5.5a.75.75 0 0 1 .75.75v5.5a.75.75 0 0 1-1.5 0V6.56l-5.22 5.22a.75.75 0 0 1-1.06 0Z\",\"clipRule\":\"evenodd\"}]}]]}],[\"$\",\"$L1a\",null,{\"src\":{\"src\":\"/_next/static/media/gumroad.c0cce34f.png\",\"height\":808,\"width\":400,\"blurDataURL\":\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAICAMAAADp7a43AAAAOVBMVEX6tj3igs3jqtfOdbxTLFdAKR3whtr3rGTqsCPlnl94SGqkW5nWc8HRb7z5vuzVpw6ueWmTYGL/zRT8vwP3AAAACnRSTlP+////9PT//vPzydoAvgAAAAlwSFlzAAAWJQAAFiUBSVIk8AAAACtJREFUeJwFwYcBACAIwLACigP3/8eaoKoLH9NxEUfMhOg9oBR4525ayvUDD64A5N2Y6PwAAAAASUVORK5CYII=\",\"blurWidth\":4,\"blurHeight\":8},\"alt\":\"Gumroad\",\"width\":200}]]}],[\"$\",\"a\",null,{\"href\":\"https://skims.com/\",\"rel\":\"noreferrer\",\"target\":\"_blank\",\"className\":\"group relative opacity-75 transition-opacity hover:opacity-100\",\"children\":[[\"$\",\"div\",null,{\"className\":\"absolute top-1/2 left-1/2 z-10 hidden -translate-x-1/2 -translate-y-1/2 transform flex-row items-center gap-[calc(1rem/16*7)] rounded-full border border-gray-950 bg-gray-950/90 py-0.5 pr-2 pb-1 pl-3 text-center font-mono text-sm/6 font-medium text-white opacity-0 inset-ring inset-ring-white/10 transition-opacity group-hover:flex group-hover:opacity-100\",\"children\":[\"skims.com\",[\"$\",\"svg\",null,{\"viewBox\":\"0 0 16 16\",\"fill\":\"currentColor\",\"className\":\"size-4\",\"children\":[\"$\",\"path\",null,{\"fillRule\":\"evenodd\",\"d\":\"M4.22 11.78a.75.75 0 0 1 0-1.06L9.44 5.5H5.75a.75.75 0 0 1 0-1.5h5.5a.75.75 0 0 1 .75.75v5.5a.75.75 0 0 1-1.5 0V6.56l-5.22 5.22a.75.75 0 0 1-1.06 0Z\",\"clipRule\":\"evenodd\"}]}]]}],[\"$\",\"$L1a\",null,{\"src\":{\"src\":\"/_next/static/media/skims.f2c24417.png\",\"height\":785,\"width\":400,\"blurDataURL\":\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAICAMAAADp7a43AAAALVBMVEWqsLe5y9jh19GRlJeZnqSlpanw7+6QmaHHys2svsrT1Nb29vWan6jn4t7c3d/vcZPmAAAAA3RSTlP7/f0h+Um+AAAACXBIWXMAABYlAAAWJQFJUiTwAAAAKElEQVR4nAXBhwEAIAjAsCIbx//nmgAIli6oeqN2GnVL5k0RsTfrVnwLkgC/NwjDQwAAAABJRU5ErkJggg==\",\"blurWidth\":4,\"blurHeight\":8},\"alt\":\"Skims\",\"width\":200}]]}],[\"$\",\"a\",null,{\"href\":\"https://reddit.com/\",\"rel\":\"noreferrer\",\"target\":\"_blank\",\"className\":\"group relative opacity-75 transition-opacity hover:opacity-100\",\"children\":[[\"$\",\"div\",null,{\"className\":\"absolute top-1/2 left-1/2 z-10 hidden -translate-x-1/2 -translate-y-1/2 transform flex-row items-center gap-[calc(1rem/16*7)] rounded-full border border-gray-950 bg-gray-950/90 py-0.5 pr-2 pb-1 pl-3 text-center font-mono text-sm/6 font-medium text-white opacity-0 inset-ring inset-ring-white/10 transition-opacity group-hover:flex group-hover:opacity-100\",\"children\":[\"reddit.com\",[\"$\",\"svg\",null,{\"viewBox\":\"0 0 16 16\",\"fill\":\"currentColor\",\"className\":\"size-4\",\"children\":[\"$\",\"path\",null,{\"fillRule\":\"evenodd\",\"d\":\"M4.22 11.78a.75.75 0 0 1 0-1.06L9.44 5.5H5.75a.75.75 0 0 1 0-1.5h5.5a.75.75 0 0 1 .75.75v5.5a.75.75 0 0 1-1.5 0V6.56l-5.22 5.22a.75.75 0 0 1-1.06 0Z\",\"clipRule\":\"evenodd\"}]}]]}],[\"$\",\"$L1a\",null,{\"src\":{\"src\":\"/_next/static/media/reddit.407699f3.png\",\"height\":606,\"width\":400,\"blurDataURL\":\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAICAMAAAAGL8UJAAAAJ1BMVEXg4N3b3dns48/y6+HS19D08vH49/bn5ePi4d/s6unczbrQzMn7++GwIRIlAAAABXRSTlP+/v78+37qUuYAAAAJcEhZcwAAFiUAABYlAUlSJPAAAAAtSURBVHicFcjJEQAgDAOxTcBOOPqvl0FPMTIm5N55EcemVsiskkxFlxnSf2g9E10A0W+HULEAAAAASUVORK5CYII=\",\"blurWidth\":5,\"blurHeight\":8},\"alt\":\"Reddit\",\"width\":200}]]}]]}],[\"$\",\"div\",null,{\"className\":\"hidden flex-col gap-2 sm:flex\",\"children\":[[\"$\",\"a\",null,{\"href\":\"https://rivian.com/\",\"rel\":\"noreferrer\",\"target\":\"_blank\",\"className\":\"group relative opacity-75 transition-opacity hover:opacity-100\",\"children\":[[\"$\",\"div\",null,{\"className\":\"absolute top-1/2 left-1/2 z-10 hidden -translate-x-1/2 -translate-y-1/2 transform flex-row items-center gap-[calc(1rem/16*7)] rounded-full border border-gray-950 bg-gray-950/90 py-0.5 pr-2 pb-1 pl-3 text-center font-mono text-sm/6 font-medium text-white opacity-0 inset-ring inset-ring-white/10 transition-opacity group-hover:flex group-hover:opacity-100\",\"children\":[\"rivian.com\",[\"$\",\"svg\",null,{\"viewBox\":\"0 0 16 16\",\"fill\":\"currentColor\",\"className\":\"size-4\",\"children\":[\"$\",\"path\",null,{\"fillRule\":\"evenodd\",\"d\":\"M4.22 11.78a.75.75 0 0 1 0-1.06L9.44 5.5H5.75a.75.75 0 0 1 0-1.5h5.5a.75.75 0 0 1 .75.75v5.5a.75.75 0 0 1-1.5 0V6.56l-5.22 5.22a.75.75 0 0 1-1.06 0Z\",\"clipRule\":\"evenodd\"}]}]]}],[\"$\",\"$L1a\",null,{\"src\":{\"src\":\"/_next/static/media/rivian.63ceefe0.png\",\"height\":619,\"width\":1000,\"blurDataURL\":\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAFCAMAAABPT11nAAAAQlBMVEWVdmB5bWp2dXV3YFBFPDghHRp7al4tKypTTEtxbGzDu8BIQDpaRjfYzM+lkHyemaBeU0uZh3mRiYyhl5hjS0Ktp65AaitkAAAACnRSTlP6/v7+9/j3+fv+iGDo3QAAAAlwSFlzAAAWJQAAFiUBSVIk8AAAADBJREFUeJwFwYUBACAMA7CigwlD/3+VBOzPjAewnY3PVbTeY5iSoGNNFRIAtWUq9AEpDwGaLOyeMAAAAABJRU5ErkJggg==\",\"blurWidth\":8,\"blurHeight\":5},\"alt\":\"Rivian\",\"width\":500}]]}],[\"$\",\"a\",null,{\"href\":\"https://shopify.com/\",\"rel\":\"noreferrer\",\"target\":\"_blank\",\"className\":\"group relative opacity-75 transition-opacity hover:opacity-100\",\"children\":[[\"$\",\"div\",null,{\"className\":\"absolute top-1/2 left-1/2 z-10 hidden -translate-x-1/2 -translate-y-1/2 transform flex-row items-center gap-[calc(1rem/16*7)] rounded-full border border-gray-950 bg-gray-950/90 py-0.5 pr-2 pb-1 pl-3 text-center font-mono text-sm/6 font-medium text-white opacity-0 inset-ring inset-ring-white/10 transition-opacity group-hover:flex group-hover:opacity-100\",\"children\":[\"shopify.com\",[\"$\",\"svg\",null,{\"viewBox\":\"0 0 16 16\",\"fill\":\"currentColor\",\"className\":\"size-4\",\"children\":[\"$\",\"path\",null,{\"fillRule\":\"evenodd\",\"d\":\"M4.22 11.78a.75.75 0 0 1 0-1.06L9.44 5.5H5.75a.75.75 0 0 1 0-1.5h5.5a.75.75 0 0 1 .75.75v5.5a.75.75 0 0 1-1.5 0V6.56l-5.22 5.22a.75.75 0 0 1-1.06 0Z\",\"clipRule\":\"evenodd\"}]}]]}],[\"$\",\"$L1a\",null,{\"src\":{\"src\":\"/_next/static/media/shopify.f320205a.png\",\"height\":929,\"width\":1000,\"blurDataURL\":\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAHCAMAAAACh/xsAAAARVBMVEUMEhV/f4FjZ2gXHR49QEV3d3kwMzqNjIkDBwhuWlIhKi1VU1FtbmpHSU1oYmEeJCEkLTFeXl5VV1pOVFpMUVdNVDxcUTWomX4eAAAACnRSTlP+/////////v7+H9LDnAAAAAlwSFlzAAAWJQAAFiUBSVIk8AAAADpJREFUeJwFwYcBwCAMAzBnQhN2x/+nVkJpV7FOhMbDWHfCrJ/bNUGkqg8PRIjMtQIVEAAVvtP9e+cPNkUBzJjKzzMAAAAASUVORK5CYII=\",\"blurWidth\":8,\"blurHeight\":7},\"alt\":\"Shopify\",\"width\":500}]]}],[\"$\",\"a\",null,{\"href\":\"https://clerk.dev/\",\"rel\":\"noreferrer\",\"target\":\"_blank\",\"className\":\"group relative opacity-75 transition-opacity hover:opacity-100\",\"children\":[[\"$\",\"div\",null,{\"className\":\"absolute top-1/2 left-1/2 z-10 hidden -translate-x-1/2 -translate-y-1/2 transform flex-row items-center gap-[calc(1rem/16*7)] rounded-full border border-gray-950 bg-gray-950/90 py-0.5 pr-2 pb-1 pl-3 text-center font-mono text-sm/6 font-medium text-white opacity-0 inset-ring inset-ring-white/10 transition-opacity group-hover:flex group-hover:opacity-100\",\"children\":[\"clerk.dev\",[\"$\",\"svg\",null,{\"viewBox\":\"0 0 16 16\",\"fill\":\"currentColor\",\"className\":\"size-4\",\"children\":[\"$\",\"path\",null,{\"fillRule\":\"evenodd\",\"d\":\"M4.22 11.78a.75.75 0 0 1 0-1.06L9.44 5.5H5.75a.75.75 0 0 1 0-1.5h5.5a.75.75 0 0 1 .75.75v5.5a.75.75 0 0 1-1.5 0V6.56l-5.22 5.22a.75.75 0 0 1-1.06 0Z\",\"clipRule\":\"evenodd\"}]}]]}],[\"$\",\"$L1a\",null,{\"src\":{\"src\":\"/_next/static/media/clerk.45113e95.png\",\"height\":650,\"width\":1000,\"blurDataURL\":\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAFCAMAAABPT11nAAAACVBMVEX6+vr9/f3y8vP3xBqnAAAAAXRSTlP89O1mUQAAAAlwSFlzAAAWJQAAFiUBSVIk8AAAACFJREFUeJxjYGBiYmBkZGQAA0YmEAHiwxkgKZAsIxMTAwACmAAd6Q1YfQAAAABJRU5ErkJggg==\",\"blurWidth\":8,\"blurHeight\":5},\"alt\":\"Clerk\",\"width\":500}]]}]]}],[\"$\",\"div\",null,{\"className\":\"hidden flex-col gap-2 xl:flex\",\"children\":[[\"$\",\"a\",null,{\"href\":\"https://www.theverge.com/\",\"rel\":\"noreferrer\",\"target\":\"_blank\",\"className\":\"group relative opacity-75 transition-opacity hover:opacity-100\",\"children\":[[\"$\",\"div\",null,{\"className\":\"absolute top-1/2 left-1/2 z-10 hidden -translate-x-1/2 -translate-y-1/2 transform flex-row items-center gap-[calc(1rem/16*7)] rounded-full border border-gray-950 bg-gray-950/90 py-0.5 pr-2 pb-1 pl-3 text-center font-mono text-sm/6 font-medium text-white opacity-0 inset-ring inset-ring-white/10 transition-opacity group-hover:flex group-hover:opacity-100\",\"children\":[\"theverge.com\",[\"$\",\"svg\",null,{\"viewBox\":\"0 0 16 16\",\"fill\":\"currentColor\",\"className\":\"size-4\",\"children\":[\"$\",\"path\",null,{\"fillRule\":\"evenodd\",\"d\":\"M4.22 11.78a.75.75 0 0 1 0-1.06L9.44 5.5H5.75a.75.75 0 0 1 0-1.5h5.5a.75.75 0 0 1 .75.75v5.5a.75.75 0 0 1-1.5 0V6.56l-5.22 5.22a.75.75 0 0 1-1.06 0Z\",\"clipRule\":\"evenodd\"}]}]]}],[\"$\",\"$L1a\",null,{\"src\":{\"src\":\"/_next/static/media/verge.5758388b.png\",\"height\":408,\"width\":200,\"blurDataURL\":\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAICAMAAADp7a43AAAAJ1BMVEVjW1VYVlMbGxs+Pj1saWclJSWPjIlPS0cwMjIODg5pRD6EeXJ0dHSKCLUVAAAAAnRSTlP+/qap3hAAAAAJcEhZcwAACxMAAAsTAQCanBgAAAAoSURBVHicBcGHEQAwDAKxP8B22v7zRmIS48vgOU13zIs2koSrBF71AQzDAJcX17b4AAAAAElFTkSuQmCC\",\"blurWidth\":4,\"blurHeight\":8},\"alt\":\"The Verge\",\"width\":200}]]}],[\"$\",\"a\",null,{\"href\":\"https://io.google/\",\"rel\":\"noreferrer\",\"target\":\"_blank\",\"className\":\"group relative opacity-75 transition-opacity hover:opacity-100\",\"children\":[[\"$\",\"div\",null,{\"className\":\"absolute top-1/2 left-1/2 z-10 hidden -translate-x-1/2 -translate-y-1/2 transform flex-row items-center gap-[calc(1rem/16*7)] rounded-full border border-gray-950 bg-gray-950/90 py-0.5 pr-2 pb-1 pl-3 text-center font-mono text-sm/6 font-medium text-white opacity-0 inset-ring inset-ring-white/10 transition-opacity group-hover:flex group-hover:opacity-100\",\"children\":[\"io.google\",[\"$\",\"svg\",null,{\"viewBox\":\"0 0 16 16\",\"fill\":\"currentColor\",\"className\":\"size-4\",\"children\":[\"$\",\"path\",null,{\"fillRule\":\"evenodd\",\"d\":\"M4.22 11.78a.75.75 0 0 1 0-1.06L9.44 5.5H5.75a.75.75 0 0 1 0-1.5h5.5a.75.75 0 0 1 .75.75v5.5a.75.75 0 0 1-1.5 0V6.56l-5.22 5.22a.75.75 0 0 1-1.06 0Z\",\"clipRule\":\"evenodd\"}]}]]}],[\"$\",\"$L1a\",null,{\"src\":{\"src\":\"/_next/static/media/googleio.cd41475f.png\",\"height\":837,\"width\":400,\"blurDataURL\":\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAICAMAAADp7a43AAAAPFBMVEXU09Pz9PG/v8GTenjAz+318u/Jxr/i4uLd3t7d3N1qYmVRTEqusa+orbDl4tuGkJN/gIJsb3zHzbWen6IfEOWIAAAACnRSTlP+/////////f36MdTqHwAAAAlwSFlzAAAWJQAAFiUBSVIk8AAAACtJREFUeJwFwYkBABAMALGjpajf/rtKqFTDoJBUEyHnwBDp7BgPb96Ft+YfDykA+TCa1gQAAAAASUVORK5CYII=\",\"blurWidth\":4,\"blurHeight\":8},\"alt\":\"Google IO\",\"width\":200}]]}],[\"$\",\"a\",null,{\"href\":\"https://ted.com/\",\"rel\":\"noreferrer\",\"target\":\"_blank\",\"className\":\"group relative opacity-75 transition-opacity hover:opacity-100\",\"children\":[[\"$\",\"div\",null,{\"className\":\"absolute top-1/2 left-1/2 z-10 hidden -translate-x-1/2 -translate-y-1/2 transform flex-row items-center gap-[calc(1rem/16*7)] rounded-full border border-gray-950 bg-gray-950/90 py-0.5 pr-2 pb-1 pl-3 text-center font-mono text-sm/6 font-medium text-white opacity-0 inset-ring inset-ring-white/10 transition-opacity group-hover:flex group-hover:opacity-100\",\"children\":[\"ted.com\",[\"$\",\"svg\",null,{\"viewBox\":\"0 0 16 16\",\"fill\":\"currentColor\",\"className\":\"size-4\",\"children\":[\"$\",\"path\",null,{\"fillRule\":\"evenodd\",\"d\":\"M4.22 11.78a.75.75 0 0 1 0-1.06L9.44 5.5H5.75a.75.75 0 0 1 0-1.5h5.5a.75.75 0 0 1 .75.75v5.5a.75.75 0 0 1-1.5 0V6.56l-5.22 5.22a.75.75 0 0 1-1.06 0Z\",\"clipRule\":\"evenodd\"}]}]]}],[\"$\",\"$L1a\",null,{\"src\":{\"src\":\"/_next/static/media/ted.8ce01dbc.png\",\"height\":546,\"width\":400,\"blurDataURL\":\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAICAMAAADtGH4KAAAATlBMVEXNzcsIAwMZEBQuJync0s0NBwsVCAvEwsLHqK/RoqcmCxBHKBgCCRo3MzhaRj0sGBlFIyV/SSxkVWZEO0JuUzqbZjqLWTloNBt3Lhc5Hxg32JROAAAACnRSTlP4////+f//9fn5GeW8QwAAAAlwSFlzAAAWJQAAFiUBSVIk8AAAADlJREFUeJwFwQkCgCAIBMAFhAo8K7X/v7QZIF0nDrzj29ZQx5pd4BFxP2BTroLuOZeC5mYsUCUi/QE64wHbaMbrugAAAABJRU5ErkJggg==\",\"blurWidth\":6,\"blurHeight\":8},\"alt\":\"TED Talks\",\"width\":200}]]}]]}],[\"$\",\"div\",null,{\"className\":\"flex flex-col gap-2\",\"children\":[[\"$\",\"a\",null,{\"href\":\"https://poolside.ai/\",\"rel\":\"noreferrer\",\"target\":\"_blank\",\"className\":\"group relative opacity-75 transition-opacity hover:opacity-100\",\"children\":[[\"$\",\"div\",null,{\"className\":\"absolute top-1/2 left-1/2 z-10 hidden -translate-x-1/2 -translate-y-1/2 transform flex-row items-center gap-[calc(1rem/16*7)] rounded-full border border-gray-950 bg-gray-950/90 py-0.5 pr-2 pb-1 pl-3 text-center font-mono text-sm/6 font-medium text-white opacity-0 inset-ring inset-ring-white/10 transition-opacity group-hover:flex group-hover:opacity-100\",\"children\":[\"poolside.ai\",[\"$\",\"svg\",null,{\"viewBox\":\"0 0 16 16\",\"fill\":\"currentColor\",\"className\":\"size-4\",\"children\":[\"$\",\"path\",null,{\"fillRule\":\"evenodd\",\"d\":\"M4.22 11.78a.75.75 0 0 1 0-1.06L9.44 5.5H5.75a.75.75 0 0 1 0-1.5h5.5a.75.75 0 0 1 .75.75v5.5a.75.75 0 0 1-1.5 0V6.56l-5.22 5.22a.75.75 0 0 1-1.06 0Z\",\"clipRule\":\"evenodd\"}]}]]}],[\"$\",\"$L1a\",null,{\"src\":{\"src\":\"/_next/static/media/poolside.a98f917b.png\",\"height\":494,\"width\":586,\"blurDataURL\":\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAHCAMAAAACh/xsAAAAElBMVEX++/n///749vfw8PPh3PPKxPAORSnvAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAKUlEQVR4nC3JwREAIBCDQEK0/5adU5cn4F6AfJIAmdJqS6Kxs5672uYACFYAToAzb4QAAAAASUVORK5CYII=\",\"blurWidth\":8,\"blurHeight\":7},\"alt\":\"Poolside\",\"width\":293}]]}],[\"$\",\"a\",null,{\"href\":\"https://midjourney.com/\",\"rel\":\"noreferrer\",\"target\":\"_blank\",\"className\":\"group relative opacity-75 transition-opacity hover:opacity-100\",\"children\":[[\"$\",\"div\",null,{\"className\":\"absolute top-1/2 left-1/2 z-10 hidden -translate-x-1/2 -translate-y-1/2 transform flex-row items-center gap-[calc(1rem/16*7)] rounded-full border border-gray-950 bg-gray-950/90 py-0.5 pr-2 pb-1 pl-3 text-center font-mono text-sm/6 font-medium text-white opacity-0 inset-ring inset-ring-white/10 transition-opacity group-hover:flex group-hover:opacity-100\",\"children\":[\"midjourney.com\",[\"$\",\"svg\",null,{\"viewBox\":\"0 0 16 16\",\"fill\":\"currentColor\",\"className\":\"size-4\",\"children\":[\"$\",\"path\",null,{\"fillRule\":\"evenodd\",\"d\":\"M4.22 11.78a.75.75 0 0 1 0-1.06L9.44 5.5H5.75a.75.75 0 0 1 0-1.5h5.5a.75.75 0 0 1 .75.75v5.5a.75.75 0 0 1-1.5 0V6.56l-5.22 5.22a.75.75 0 0 1-1.06 0Z\",\"clipRule\":\"evenodd\"}]}]]}],[\"$\",\"$L1a\",null,{\"src\":{\"src\":\"/_next/static/media/midjourney.99f345b9.png\",\"height\":996,\"width\":586,\"blurDataURL\":\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAICAMAAAAGL8UJAAAASFBMVEWNjIyYeECFYzyCh3qytq+PfmBjXVn59fTQ0tH+//9wYkzQvKsjGxrCr52zg3SicTzz8fNhfYmuu75+eGa6nYRMPy+Rg2idmplCyam9AAAACXRSTlP9/////////P2VmI32AAAACXBIWXMAABYlAAAWJQFJUiTwAAAAM0lEQVR4nAXBCQLAEBAEwcYSg1wS/P+nqjiyAVqpNWShJFRnDKheLqLTO4/+uwwe+/q7AR74AXyTB5xIAAAAAElFTkSuQmCC\",\"blurWidth\":5,\"blurHeight\":8},\"alt\":\"Midjourney\",\"width\":293}]]}],[\"$\",\"a\",null,{\"href\":\"https://nasa.gov/\",\"rel\":\"noreferrer\",\"target\":\"_blank\",\"className\":\"group relative opacity-75 transition-opacity hover:opacity-100\",\"children\":[[\"$\",\"div\",null,{\"className\":\"absolute top-1/2 left-1/2 z-10 hidden -translate-x-1/2 -translate-y-1/2 transform flex-row items-center gap-[calc(1rem/16*7)] rounded-full border border-gray-950 bg-gray-950/90 py-0.5 pr-2 pb-1 pl-3 text-center font-mono text-sm/6 font-medium text-white opacity-0 inset-ring inset-ring-white/10 transition-opacity group-hover:flex group-hover:opacity-100\",\"children\":[\"nasa.gov\",[\"$\",\"svg\",null,{\"viewBox\":\"0 0 16 16\",\"fill\":\"currentColor\",\"className\":\"size-4\",\"children\":[\"$\",\"path\",null,{\"fillRule\":\"evenodd\",\"d\":\"M4.22 11.78a.75.75 0 0 1 0-1.06L9.44 5.5H5.75a.75.75 0 0 1 0-1.5h5.5a.75.75 0 0 1 .75.75v5.5a.75.75 0 0 1-1.5 0V6.56l-5.22 5.22a.75.75 0 0 1-1.06 0Z\",\"clipRule\":\"evenodd\"}]}]]}],[\"$\",\"$L1a\",null,{\"src\":{\"src\":\"/_next/static/media/nasa.aa60f22d.png\",\"height\":708,\"width\":586,\"blurDataURL\":\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAICAMAAAAC2hU0AAAARVBMVEU3NTVua2tOS0uIh4dYVVP18/NrZGApJypCPz96dXV/clRhYWKBgID9/f1ZSzR3alCZiWWcm5uYfTnr5eaTkpKNjIwSERF4cxQdAAAACHRSTlP+/////////kgsYtwAAAAJcEhZcwAAFiUAABYlAUlSJPAAAAA6SURBVHicBcEHAsAgCACxE0HA0d3+/6lNcIAQIrRkHkTLHP1Css6ydzy0tK3xOaEqjDrr+5yYLbN1/zASAblEE4zXAAAAAElFTkSuQmCC\",\"blurWidth\":7,\"blurHeight\":8},\"alt\":\"NASA\",\"width\":293}]]}]]}]]}]}]}]]}],[\"$\",\"$L1b\",null,{}]]}],[\"$\",\"div\",null,{\"className\":\"row-span-full row-start-1 hidden border-x border-x-(--pattern-fg) bg-[image:repeating-linear-gradient(315deg,_var(--pattern-fg)_0,_var(--pattern-fg)_1px,_transparent_0,_transparent_50%)] bg-[size:10px_10px] bg-fixed [--pattern-fg:var(--color-black)]/5 md:col-start-3 md:block dark:[--pattern-fg:var(--color-white)]/10\"}],[\"$\",\"div\",null,{\"className\":\"col-start-1 row-start-3 md:col-start-2 relative before:absolute before:top-0 before:h-px before:w-[200vw] before:bg-gray-950/5 dark:before:bg-white/10 before:-left-[100vw] after:absolute after:bottom-0 after:h-px after:w-[200vw] after:bg-gray-950/5 dark:after:bg-white/10 after:-left-[100vw]\",\"children\":[\"$\",\"footer\",null,{\"className\":\"bg-white text-sm/loose text-gray-950 dark:bg-gray-950 dark:text-white\",\"children\":[[\"$\",\"div\",null,{\"className\":\"flex gap-4 p-4 md:hidden *:first:border-l-0 *:last:border-r-0\",\"children\":[[\"$\",\"div\",null,{\"className\":\"flex flex-1 flex-col gap-10\",\"children\":[[\"$\",\"div\",null,{\"children\":[[\"$\",\"h3\",null,{\"className\":\"font-semibold\",\"children\":\"Learn\"}],[\"$\",\"ul\",null,{\"className\":\"mt-4 grid gap-4\",\"children\":[[\"$\",\"li\",null,{\"children\":[\"$\",\"$L1c\",null,{\"href\":\"/docs\",\"className\":\"hover:underline\",\"children\":\"Documentation\"}]}],[\"$\",\"li\",null,{\"children\":[\"$\",\"$L1c\",null,{\"href\":\"/showcase\",\"className\":\"hover:underline\",\"children\":\"Showcase\"}]}],[\"$\",\"li\",null,{\"children\":[\"$\",\"$L1c\",null,{\"href\":\"/blog\",\"className\":\"hover:underline\",\"children\":\"Blog\"}]}],[\"$\",\"li\",null,{\"children\":[\"$\",\"$L1c\",null,{\"href\":\"https://play.tailwindcss.com/\",\"className\":\"hover:underline\",\"children\":\"Playground\"}]}]]}]]}],[\"$\",\"div\",null,{\"children\":[[\"$\",\"h3\",null,{\"className\":\"font-semibold\",\"children\":\"Resources\"}],[\"$\",\"ul\",null,{\"className\":\"mt-4 grid gap-4\",\"children\":[[\"$\",\"li\",null,{\"children\":[\"$\",\"$L1c\",null,{\"href\":\"https://www.refactoringui.com\",\"className\":\"hover:underline\",\"children\":\"Refactoring UI\"}]}],[\"$\",\"li\",null,{\"children\":[\"$\",\"$L1c\",null,{\"href\":\"https://headlessui.com\",\"className\":\"hover:underline\",\"children\":\"Headless UI\"}]}],[\"$\",\"li\",null,{\"children\":[\"$\",\"$L1c\",null,{\"href\":\"https://heroicons.com\",\"className\":\"hover:underline\",\"children\":\"Heroicons\"}]}],[\"$\",\"li\",null,{\"children\":[\"$\",\"$L1c\",null,{\"href\":\"https://heropatterns.com\",\"className\":\"hover:underline\",\"children\":\"Hero Patterns\"}]}]]}]]}]]}],[\"$\",\"div\",null,{\"className\":\"flex flex-1 flex-col gap-10\",\"children\":[[\"$\",\"div\",null,{\"children\":[[\"$\",\"h3\",null,{\"className\":\"mb-2 font-semibold\",\"children\":[\"$\",\"a\",null,{\"href\":\"/plus?ref=footer\",\"className\":\"hover:underline\",\"children\":\"Tailwind Plus\"}]}],[\"$\",\"ul\",null,{\"className\":\"mt-4 grid gap-4\",\"children\":[[\"$\",\"li\",null,{\"children\":[\"$\",\"a\",null,{\"href\":\"/plus/ui-blocks?ref=footer\",\"className\":\"hover:underline\",\"children\":\"UI Blocks\"}]}],[\"$\",\"li\",null,{\"children\":[\"$\",\"a\",null,{\"href\":\"/plus/templates?ref=footer\",\"className\":\"hover:underline\",\"children\":\"Templates\"}]}],[\"$\",\"li\",null,{\"children\":[\"$\",\"a\",null,{\"href\":\"/plus/ui-kit?ref=footer\",\"className\":\"hover:underline\",\"children\":\"UI Kit\"}]}]]}]]}],[\"$\",\"div\",null,{\"children\":[[\"$\",\"h3\",null,{\"className\":\"font-semibold\",\"children\":\"Community\"}],[\"$\",\"ul\",null,{\"className\":\"mt-4 grid gap-4\",\"children\":[[\"$\",\"li\",null,{\"children\":[\"$\",\"$L1c\",null,{\"href\":\"https://github.com/tailwindlabs/tailwindcss\",\"className\":\"hover:underline\",\"children\":\"GitHub\"}]}],[\"$\",\"li\",null,{\"children\":[\"$\",\"$L1c\",null,{\"href\":\"https://tailwindcss.com/discord\",\"className\":\"hover:underline\",\"children\":\"Discord\"}]}],[\"$\",\"li\",null,{\"children\":[\"$\",\"$L1c\",null,{\"href\":\"https://x.com/tailwindcss\",\"className\":\"hover:underline\",\"children\":\"X\"}]}]]}]]}]]}]]}],[\"$\",\"div\",null,{\"className\":\"mx-auto hidden w-full grid-cols-4 justify-between gap-y-0 md:grid md:grid-cols-4 md:gap-6 md:gap-x-4 lg:gap-8 *:first:border-l-0 *:last:border-r-0\",\"children\":[[\"$\",\"div\",null,{\"className\":\"border-x border-b border-gray-950/5 py-10 pl-2 not-md:border-0 md:border-b-0 dark:border-white/10\",\"children\":[[\"$\",\"h3\",null,{\"className\":\"font-semibold\",\"children\":\"Learn\"}],[\"$\",\"ul\",null,{\"className\":\"mt-4 grid gap-4\",\"children\":[[\"$\",\"li\",null,{\"children\":[\"$\",\"$L1c\",null,{\"href\":\"/docs\",\"className\":\"hover:underline\",\"children\":\"Documentation\"}]}],[\"$\",\"li\",null,{\"children\":[\"$\",\"$L1c\",null,{\"href\":\"/showcase\",\"className\":\"hover:underline\",\"children\":\"Showcase\"}]}],[\"$\",\"li\",null,{\"children\":[\"$\",\"$L1c\",null,{\"href\":\"/blog\",\"className\":\"hover:underline\",\"children\":\"Blog\"}]}],[\"$\",\"li\",null,{\"children\":[\"$\",\"$L1c\",null,{\"href\":\"https://play.tailwindcss.com/\",\"className\":\"hover:underline\",\"children\":\"Playground\"}]}]]}]]}],[\"$\",\"div\",null,{\"className\":\"border-x border-b border-gray-950/5 py-10 pl-2 not-md:border-0 md:border-b-0 dark:border-white/10\",\"children\":[[\"$\",\"h3\",null,{\"className\":\"mb-2 font-semibold\",\"children\":[\"$\",\"a\",null,{\"href\":\"/plus?ref=footer\",\"className\":\"hover:underline\",\"children\":\"Tailwind Plus\"}]}],[\"$\",\"ul\",null,{\"className\":\"mt-4 grid gap-4\",\"children\":[[\"$\",\"li\",null,{\"children\":[\"$\",\"a\",null,{\"href\":\"/plus/ui-blocks?ref=footer\",\"className\":\"hover:underline\",\"children\":\"UI Blocks\"}]}],[\"$\",\"li\",null,{\"children\":[\"$\",\"a\",null,{\"href\":\"/plus/templates?ref=footer\",\"className\":\"hover:underline\",\"children\":\"Templates\"}]}],[\"$\",\"li\",null,{\"children\":[\"$\",\"a\",null,{\"href\":\"/plus/ui-kit?ref=footer\",\"className\":\"hover:underline\",\"children\":\"UI Kit\"}]}]]}]]}],[\"$\",\"div\",null,{\"className\":\"border-x border-b border-gray-950/5 py-10 pl-2 not-md:border-0 sm:border-b-0 dark:border-white/10\",\"children\":[[\"$\",\"h3\",null,{\"className\":\"font-semibold\",\"children\":\"Resources\"}],[\"$\",\"ul\",null,{\"className\":\"mt-4 grid gap-4\",\"children\":[[\"$\",\"li\",null,{\"children\":[\"$\",\"$L1c\",null,{\"href\":\"https://www.refactoringui.com\",\"className\":\"hover:underline\",\"children\":\"Refactoring UI\"}]}],[\"$\",\"li\",null,{\"children\":[\"$\",\"$L1c\",null,{\"href\":\"https://headlessui.com\",\"className\":\"hover:underline\",\"children\":\"Headless UI\"}]}],[\"$\",\"li\",null,{\"children\":[\"$\",\"$L1c\",null,{\"href\":\"https://heroicons.com\",\"className\":\"hover:underline\",\"children\":\"Heroicons\"}]}],[\"$\",\"li\",null,{\"children\":[\"$\",\"$L1c\",null,{\"href\":\"https://heropatterns.com\",\"className\":\"hover:underline\",\"children\":\"Hero Patterns\"}]}]]}]]}],[\"$\",\"div\",null,{\"className\":\"border-x border-gray-950/5 py-10 pl-2 not-md:border-0 dark:border-white/10\",\"children\":[[\"$\",\"h3\",null,{\"className\":\"font-semibold\",\"children\":\"Community\"}],[\"$\",\"ul\",null,{\"className\":\"mt-4 grid gap-4\",\"children\":[[\"$\",\"li\",null,{\"children\":[\"$\",\"$L1c\",null,{\"href\":\"https://github.com/tailwindlabs/tailwindcss\",\"className\":\"hover:underline\",\"children\":\"GitHub\"}]}],[\"$\",\"li\",null,{\"children\":[\"$\",\"$L1c\",null,{\"href\":\"https://tailwindcss.com/discord\",\"className\":\"hover:underline\",\"children\":\"Discord\"}]}],[\"$\",\"li\",null,{\"children\":[\"$\",\"$L1c\",null,{\"href\":\"https://x.com/tailwindcss\",\"className\":\"hover:underline\",\"children\":\"X\"}]}]]}]]}]]}]]}]}],[\"$\",\"div\",null,{\"className\":\"col-start-1 row-start-5 grid md:col-start-2\",\"children\":[\"$\",\"div\",null,{\"className\":\"px-2 pt-10 pb-24\",\"children\":[\"$\",\"div\",null,{\"className\":\"mx-auto flex w-full flex-col items-start gap-6 sm:flex-row sm:items-center sm:justify-between sm:gap-8 px-4 md:px-6 lg:px-8\",\"children\":[[\"$\",\"$L1d\",null,{}],[\"$\",\"div\",null,{\"className\":\"flex flex-col gap-4 text-sm/6 text-gray-700 sm:flex-row sm:gap-2 sm:pr-4 dark:text-gray-400\",\"children\":[[\"$\",\"span\",null,{\"children\":\"Copyright © 2025 Tailwind Labs Inc.\"}],[\"$\",\"span\",null,{\"className\":\"max-sm:hidden\",\"children\":\"·\"}],[\"$\",\"$L1c\",null,{\"href\":\"/brand\",\"className\":\"hover:underline\",\"children\":\"Trademark Policy\"}]]}]]}]}]}]]}],[\"$\",\"div\",null,{\"className\":\"fixed!\",\"aria-hidden\":\"true\",\"children\":[\"$\",\"input\",null,{\"type\":\"text\",\"tabIndex\":-1}]}]]}],[\"$\",\"$L1e\",null,{\"children\":\"$L1f\"}],null,[\"$\",\"$L20\",null,{\"children\":[\"$L21\",\"$L22\",[\"$\",\"$L23\",null,{\"promise\":\"$@24\"}]]}]]}],{},null,false]},null,false],[\"$\",\"$1\",\"h\",{\"children\":[null,[\"$\",\"$1\",\"3avi_Udz8NYipr2lE9UEY\",{\"children\":[[\"$\",\"$L25\",null,{\"children\":\"$L26\"}],[\"$\",\"meta\",null,{\"name\":\"next-size-adjust\",\"content\":\"\"}]]}],null]}],false]],\"m\":\"$undefined\",\"G\":[\"$27\",\"$undefined\"],\"s\":false,\"S\":true}\n"])</script><script>self.__next_f.push([1,"29:I[30198,[\"4279\",\"static/chunks/4279-c5e301872b461aec.js\",\"7018\",\"static/chunks/7018-165373a669236895.js\",\"7892\",\"static/chunks/7892-6f4e0813343b109c.js\",\"9568\",\"static/chunks/9568-c60fec21e907f6d4.js\",\"7177\",\"static/chunks/app/layout-7affc687873763d6.js\"],\"\"]\n2b:I[12783,[\"4279\",\"static/chunks/4279-c5e301872b461aec.js\",\"7018\",\"static/chunks/7018-165373a669236895.js\",\"7892\",\"static/chunks/7892-6f4e0813343b109c.js\",\"9568\",\"static/chunks/9568-c60fec21e907f6d4.js\",\"7177\",\"static/chunks/app/layout-7affc687873763d6.js\"],\"default\"]\n2c:I[28936,[\"4279\",\"static/chunks/4279-c5e301872b461aec.js\",\"7018\",\"static/chunks/7018-165373a669236895.js\",\"7892\",\"static/chunks/7892-6f4e0813343b109c.js\",\"9568\",\"static/chunks/9568-c60fec21e907f6d4.js\",\"7177\",\"static/chunks/app/layout-7affc687873763d6.js\"],\"SearchProvider\"]\n2d:I[79619,[\"7448\",\"static/chunks/3621f9d8-d2947e92eca5a3b5.js\",\"4279\",\"static/chunks/4279-c5e301872b461aec.js\",\"7018\",\"static/chunks/7018-165373a669236895.js\",\"8948\",\"static/chunks/8948-06cb47a08a95a31a.js\",\"3602\",\"static/chunks/3602-93f6ff02000f4620.js\",\"1696\",\"static/chunks/1696-874ed4db6222baa1.js\",\"7892\",\"static/chunks/7892-6f4e0813343b109c.js\",\"1867\",\"static/chunks/1867-594369b131c69c50.js\",\"9274\",\"static/chunks/9274-6dbe1fb478effbcb.js\",\"6882\",\"static/chunks/app/(docs)/layout-99b228f12449e942.js\"],\"ThemeProvider\"]\n2e:I[62210,[],\"\"]\n2f:I[54992,[],\"\"]\n30:\"$Sreact.suspense\"\n31:I[51162,[],\"AsyncMetadata\"]\n28:T5d9,\n if (!('_updateTheme' in window)) {\n window._updateTheme = function updateTheme(theme) {\n let classList = document.documentElement.classList;\n\n classList.remove(\"light\", \"dark\", \"system\");\n document.querySelectorAll('meta[name=\"theme-color\"]').forEach(el =\u003e el.remove())\n if (theme === 'dark') {\n classList.add('dark')\n\n let meta = document.createElement('meta')\n meta.name = 'theme-color'\n meta.content = 'oklch(.13 .028 261.692)'\n document.head.appendChild(meta)\n } else if (theme === 'light') {\n classList.add('light')\n\n let meta = "])</script><script>self.__next_f.push([1,"document.createElement('meta')\n meta.name = 'theme-color'\n meta.content = 'white'\n document.head.appendChild(meta)\n } else {\n classList.add('system')\n\n let meta1 = document.createElement('meta')\n meta1.name = 'theme-color'\n meta1.content = 'oklch(.13 .028 261.692)'\n meta1.media = '(prefers-color-scheme: dark)'\n document.head.appendChild(meta1)\n\n let meta2 = document.createElement('meta')\n meta2.name = 'theme-color'\n meta2.content = 'white'\n meta2.media = '(prefers-color-scheme: light)'\n document.head.appendChild(meta2)\n }\n }\n\n try {\n _updateTheme(localStorage.currentTheme)\n } catch (_) {}\n\n try {\n if (/(Mac|iPhone|iPod|iPad)/i.test(navigator.platform)) {\n document.documentElement.classList.add('os-macos')\n }\n } catch (_) {}\n }\n2a:T7e8,data:text/javascript;base64,CiAgaWYgKCEoJ191cGRhdGVUaGVtZScgaW4gd2luZG93KSkgewogICAgd2luZG93Ll91cGRhdGVUaGVtZSA9IGZ1bmN0aW9uIHVwZGF0ZVRoZW1lKHRoZW1lKSB7CiAgICAgIGxldCBjbGFzc0xpc3QgPSBkb2N1bWVudC5kb2N1bWVudEVsZW1lbnQuY2xhc3NMaXN0OwoKICAgICAgY2xhc3NMaXN0LnJlbW92ZSgibGlnaHQiLCAiZGFyayIsICJzeXN0ZW0iKTsKICAgICAgZG9jdW1lbnQucXVlcnlTZWxlY3RvckFsbCgnbWV0YVtuYW1lPSJ0aGVtZS1jb2xvciJdJykuZm9yRWFjaChlbCA9PiBlbC5yZW1vdmUoKSkKICAgICAgaWYgKHRoZW1lID09PSAnZGFyaycpIHsKICAgICAgICBjbGFzc0xpc3QuYWRkKCdkYXJrJykKCiAgICAgICAgbGV0IG1ldGEgPSBkb2N1bWVudC5jcmVhdGVFbGVtZW50KCdtZXRhJykKICAgICAgICBtZXRhLm5hbWUgPSAndGhlbWUtY29sb3InCiAgICAgICAgbWV0YS5jb250ZW50ID0gJ29rbGNoKC4xMyAuMDI4IDI2MS42OTIpJwogICAgICAgIGRvY3VtZW50LmhlYWQuYXBwZW5kQ2hpbGQobWV0YSkKICAgICAgfSBlbHNlIGlmICh0aGVtZSA9PT0gJ2xpZ2h0JykgewogICAgICAgIGNsYXNzTGlzdC5hZGQoJ2xpZ2h0JykKCiAgICAgICAgbGV0IG1ldGEgPSBkb2N1bWVudC5jcmVhdGVFbGVtZW50KCdtZXRhJykKICAgICAgICBtZXRhLm5hbWUgPSAndGhlbWUtY29sb3InCiAgICAgICAgbWV0YS5jb250ZW50ID0gJ3doaXRlJwogICAgICAgIGRvY3VtZW50LmhlYWQuYXBwZW5kQ2hpbGQobWV0YSkKICAgICAgfSBlbHNlIHsKICAgICAgICBjbGFzc0xpc3QuYWRkKCdzeXN0ZW0nKQoKICAgICAgICBsZXQgbWV0YTEgPSBkb2N1bWVudC5jcmVhdGVFbGVtZW50KCdtZXRhJ"])</script><script>self.__next_f.push([1,"ykKICAgICAgICBtZXRhMS5uYW1lID0gJ3RoZW1lLWNvbG9yJwogICAgICAgIG1ldGExLmNvbnRlbnQgPSAnb2tsY2goLjEzIC4wMjggMjYxLjY5MiknCiAgICAgICAgbWV0YTEubWVkaWEgPSAnKHByZWZlcnMtY29sb3Itc2NoZW1lOiBkYXJrKScKICAgICAgICBkb2N1bWVudC5oZWFkLmFwcGVuZENoaWxkKG1ldGExKQoKICAgICAgICBsZXQgbWV0YTIgPSBkb2N1bWVudC5jcmVhdGVFbGVtZW50KCdtZXRhJykKICAgICAgICBtZXRhMi5uYW1lID0gJ3RoZW1lLWNvbG9yJwogICAgICAgIG1ldGEyLmNvbnRlbnQgPSAnd2hpdGUnCiAgICAgICAgbWV0YTIubWVkaWEgPSAnKHByZWZlcnMtY29sb3Itc2NoZW1lOiBsaWdodCknCiAgICAgICAgZG9jdW1lbnQuaGVhZC5hcHBlbmRDaGlsZChtZXRhMikKICAgICAgfQogICAgfQoKICAgIHRyeSB7CiAgICAgIF91cGRhdGVUaGVtZShsb2NhbFN0b3JhZ2UuY3VycmVudFRoZW1lKQogICAgfSBjYXRjaCAoXykge30KCiAgICB0cnkgewogICAgICBpZiAoLyhNYWN8aVBob25lfGlQb2R8aVBhZCkvaS50ZXN0KG5hdmlnYXRvci5wbGF0Zm9ybSkpIHsKICAgICAgICBkb2N1bWVudC5kb2N1bWVudEVsZW1lbnQuY2xhc3NMaXN0LmFkZCgnb3MtbWFjb3MnKQogICAgICB9CiAgICB9IGNhdGNoIChfKSB7fQogIH0K"])</script><script>self.__next_f.push([1,"2:[\"$\",\"html\",null,{\"lang\":\"en\",\"className\":\"__variable_10b8bd __variable_d52403 __variable_f498c6 __variable_8db913 antialiased dark:bg-gray-950\",\"suppressHydrationWarning\":true,\"children\":[[\"$\",\"head\",null,{\"children\":[[\"$\",\"link\",null,{\"rel\":\"apple-touch-icon\",\"sizes\":\"180x180\",\"href\":\"/favicons/apple-touch-icon.png?v=4\"}],[\"$\",\"link\",null,{\"rel\":\"icon\",\"type\":\"image/png\",\"sizes\":\"32x32\",\"href\":\"/favicons/favicon-32x32.png?v=4\"}],[\"$\",\"link\",null,{\"rel\":\"icon\",\"type\":\"image/png\",\"sizes\":\"16x16\",\"href\":\"/favicons/favicon-16x16.png?v=4\"}],[\"$\",\"link\",null,{\"rel\":\"manifest\",\"href\":\"/favicons/site.webmanifest?v=4\"}],[\"$\",\"link\",null,{\"rel\":\"mask-icon\",\"href\":\"/favicons/safari-pinned-tab.svg?v=4\",\"color\":\"#38bdf8\"}],[\"$\",\"link\",null,{\"rel\":\"shortcut icon\",\"href\":\"/favicons/favicon.ico?v=4\"}],[\"$\",\"link\",null,{\"rel\":\"alternate\",\"type\":\"application/rss+xml\",\"title\":\"RSS 2.0\",\"href\":\"/feeds/feed.xml\"}],[\"$\",\"link\",null,{\"rel\":\"alternate\",\"type\":\"application/atom+xml\",\"title\":\"Atom 1.0\",\"href\":\"/feeds/atom.xml\"}],[\"$\",\"link\",null,{\"rel\":\"alternate\",\"type\":\"application/json\",\"title\":\"JSON Feed\",\"href\":\"/feeds/feed.json\"}],[\"$\",\"meta\",null,{\"name\":\"apple-mobile-web-app-title\",\"content\":\"Tailwind CSS\"}],[\"$\",\"meta\",null,{\"name\":\"application-name\",\"content\":\"Tailwind CSS\"}],[\"$\",\"meta\",null,{\"name\":\"msapplication-TileColor\",\"content\":\"#38bdf8\"}],[\"$\",\"meta\",null,{\"name\":\"msapplication-config\",\"content\":\"/favicons/browserconfig.xml?v=4\"}],[\"$\",\"script\",null,{\"type\":\"text/javascript\",\"dangerouslySetInnerHTML\":{\"__html\":\"$28\"}}],[\"$\",\"$L29\",null,{\"src\":\"$2a\"}]]}],[\"$\",\"body\",null,{\"children\":[[\"$\",\"$L2b\",null,{}],[\"$\",\"$L2c\",null,{\"children\":[\"$\",\"$L2d\",null,{\"children\":[\"$\",\"div\",null,{\"className\":\"isolate\",\"children\":[\"$\",\"$L2e\",null,{\"parallelRouterKey\":\"children\",\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L2f\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":[[\"$\",\"div\",null,{\"className\":\"max-w-screen overflow-x-hidden\",\"children\":[[\"$\",\"div\",null,{\"className\":\"fixed inset-x-0 top-0 z-10 border-b border-black/5 dark:border-white/10\",\"children\":[\"$\",\"$L3\",null,{}]}],[\"$\",\"div\",null,{\"className\":\"grid min-h-dvh grid-cols-1 grid-rows-[1fr_1px_auto_1px_auto] justify-center pt-14.25 [--gutter-width:2.5rem] lg:grid-cols-[var(--gutter-width)_minmax(0,var(--breakpoint-2xl))_var(--gutter-width)]\",\"children\":[[\"$\",\"div\",null,{\"className\":\"col-start-1 row-span-full row-start-1 hidden border-x border-x-(--pattern-fg) bg-[image:repeating-linear-gradient(315deg,_var(--pattern-fg)_0,_var(--pattern-fg)_1px,_transparent_0,_transparent_50%)] bg-[size:10px_10px] bg-fixed [--pattern-fg:var(--color-black)]/5 lg:block dark:[--pattern-fg:var(--color-white)]/10\"}],[\"$\",\"div\",null,{\"className\":\"text-gray-950 dark:text-white\",\"children\":[\"$\",\"div\",null,{\"className\":\"flex h-[calc(100vh-3.5rem)] items-center justify-center\",\"children\":[\"$\",\"div\",null,{\"className\":\"flex flex-auto flex-col items-center justify-center px-4 text-center sm:flex-row\",\"children\":[[\"$\",\"h1\",null,{\"className\":\"text-2xl font-extrabold tracking-tight text-gray-900 sm:mr-6 sm:border-r sm:border-gray-900/10 sm:pr-6 sm:text-3xl dark:text-gray-200 sm:dark:border-gray-300/10\",\"children\":\"404\"}],[\"$\",\"h2\",null,{\"className\":\"mt-2 text-gray-700 sm:mt-0 dark:text-gray-400\",\"children\":\"This page could not be found.\"}]]}]}]}],[\"$\",\"div\",null,{\"className\":\"row-span-full row-start-1 hidden border-x border-x-(--pattern-fg) bg-[image:repeating-linear-gradient(315deg,_var(--pattern-fg)_0,_var(--pattern-fg)_1px,_transparent_0,_transparent_50%)] bg-[size:10px_10px] bg-fixed [--pattern-fg:var(--color-black)]/5 lg:col-start-3 lg:block dark:[--pattern-fg:var(--color-white)]/10\"}]]}]]}],[]],\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}]}]}]}]]}]]}]\n"])</script><script>self.__next_f.push([1,"1f:[\"$\",\"$30\",null,{\"fallback\":null,\"children\":[\"$\",\"$L31\",null,{\"promise\":\"$@32\"}]}]\n"])</script><script>self.__next_f.push([1,"22:null\n"])</script><script>self.__next_f.push([1,"32:{\"metadata\":[[\"$\",\"title\",\"0\",{\"children\":\"Tailwind CSS - Rapidly build modern websites without ever leaving your HTML.\"}],[\"$\",\"meta\",\"1\",{\"name\":\"description\",\"content\":\"Tailwind CSS is a utility-first CSS framework for rapidly building modern websites without ever leaving your HTML.\"}],[\"$\",\"meta\",\"2\",{\"property\":\"og:title\",\"content\":\"Tailwind CSS - Rapidly build modern websites without ever leaving your HTML.\"}],[\"$\",\"meta\",\"3\",{\"property\":\"og:description\",\"content\":\"Tailwind CSS is a utility-first CSS framework for rapidly building modern websites without ever leaving your HTML.\"}],[\"$\",\"meta\",\"4\",{\"property\":\"og:image:type\",\"content\":\"image/jpeg\"}],[\"$\",\"meta\",\"5\",{\"property\":\"og:image:width\",\"content\":\"1200\"}],[\"$\",\"meta\",\"6\",{\"property\":\"og:image:height\",\"content\":\"630\"}],[\"$\",\"meta\",\"7\",{\"property\":\"og:image\",\"content\":\"https://tailwindcss.com/opengraph-image.jpg?fbee406903dc9e88\"}],[\"$\",\"meta\",\"8\",{\"name\":\"twitter:card\",\"content\":\"summary_large_image\"}],[\"$\",\"meta\",\"9\",{\"name\":\"twitter:title\",\"content\":\"Tailwind CSS - Rapidly build modern websites without ever leaving your HTML.\"}],[\"$\",\"meta\",\"10\",{\"name\":\"twitter:description\",\"content\":\"Tailwind CSS is a utility-first CSS framework for rapidly building modern websites without ever leaving your HTML.\"}],[\"$\",\"meta\",\"11\",{\"name\":\"twitter:image:type\",\"content\":\"image/jpeg\"}],[\"$\",\"meta\",\"12\",{\"name\":\"twitter:image:width\",\"content\":\"1200\"}],[\"$\",\"meta\",\"13\",{\"name\":\"twitter:image:height\",\"content\":\"630\"}],[\"$\",\"meta\",\"14\",{\"name\":\"twitter:image\",\"content\":\"https://tailwindcss.com/opengraph-image.jpg?fbee406903dc9e88\"}],[\"$\",\"link\",\"15\",{\"rel\":\"icon\",\"href\":\"/favicon.ico\",\"type\":\"image/x-icon\",\"sizes\":\"48x48\"}]],\"error\":null,\"digest\":\"$undefined\"}\n24:{\"metadata\":\"$32:metadata\",\"error\":null,\"digest\":\"$undefined\"}\n26:[[\"$\",\"meta\",\"0\",{\"charSet\":\"utf-8\"}],[\"$\",\"meta\",\"1\",{\"name\":\"viewport\",\"content\":\"width=device-width, initial-scale=1\"}]]\n"])</script><script>self.__next_f.push([1,"21:null\n"])</script><script>self.__next_f.push([1,"33:I[79588,[\"7448\",\"static/chunks/3621f9d8-d2947e92eca5a3b5.js\",\"4279\",\"static/chunks/4279-c5e301872b461aec.js\",\"7018\",\"static/chunks/7018-165373a669236895.js\",\"8948\",\"static/chunks/8948-06cb47a08a95a31a.js\",\"6816\",\"static/chunks/6816-a40e0b5a4a86198e.js\",\"3602\",\"static/chunks/3602-93f6ff02000f4620.js\",\"1696\",\"static/chunks/1696-874ed4db6222baa1.js\",\"3693\",\"static/chunks/3693-2cc8d25462655fbd.js\",\"7892\",\"static/chunks/7892-6f4e0813343b109c.js\",\"1867\",\"static/chunks/1867-594369b131c69c50.js\",\"9274\",\"static/chunks/9274-6dbe1fb478effbcb.js\",\"8974\",\"static/chunks/app/page-bba54c82bd4138b4.js\"],\"ShowOutputClassAnimation\"]\n"])</script><script>self.__next_f.push([1,"19:[\"$\",\"div\",null,{\"aria-label\":\"editor, readonly, built CSS\",\"className\":\"opacity-0 group-data-finished:opacity-100 group-data-running:opacity-100 *:flex *:*:max-w-none *:*:shrink-0 *:*:grow *:rounded-lg *:px-4 *:py-2 **:[.line]:isolate **:[.line]:block **:[.line]:not-last:min-h-[1lh] **:[code]:pr-4 **:[code]:w-full **:[pre]:w-full **:[pre]:whitespace-pre-wrap text-[0.8125rem]/[1.5rem] with-line-numbers\",\"children\":[[\"$\",\"pre\",\"pre-0\",{\"className\":\"shiki tailwindcss-theme\",\"style\":{\"backgroundColor\":\"transparent\",\"color\":\"var(--color-slate-50)\"},\"tabIndex\":\"0\",\"children\":[\"$\",\"code\",\"code-0\",{\"children\":[[\"$\",\"span\",\"span-0\",{\"className\":\"line\",\"children\":[[\"$\",\"span\",\"span-0\",{\"style\":{\"color\":\"var(--color-slate-300)\"},\"children\":\"@layer\"}],[\"$\",\"span\",\"span-1\",{\"style\":{\"color\":\"var(--color-slate-50)\"},\"children\":\" utilities \"}],[\"$\",\"span\",\"span-2\",{\"style\":{\"color\":\"var(--color-slate-300)\"},\"children\":\"{\"}]]}],[\"$\",\"$L33\",\"div-0\",{\"index\":0,\"children\":[[\"$\",\"span\",\"span-0\",{\"className\":\"line\",\"children\":[[\"$\",\"span\",\"span-0\",{\"data-indent\":\"\",\"children\":\" \"}],[\"$\",\"span\",\"span-1\",{\"style\":{\"color\":\"var(--color-pink-400)\"},\"children\":\".flex\"}],[\"$\",\"span\",\"span-2\",{\"style\":{\"color\":\"var(--color-slate-300)\"},\"children\":\" {\"}]]}],[\"$\",\"span\",\"span-1\",{\"className\":\"line\",\"children\":[[\"$\",\"span\",\"span-0\",{\"data-indent\":\"\",\"children\":\" \"}],[\"$\",\"span\",\"span-1\",{\"style\":{\"color\":\"var(--color-sky-300)\"},\"children\":\"display\"}],[\"$\",\"span\",\"span-2\",{\"style\":{\"color\":\"var(--color-slate-300)\"},\"children\":\": \"}],[\"$\",\"span\",\"span-3\",{\"style\":{\"color\":\"var(--color-slate-50)\"},\"children\":\"flex\"}],[\"$\",\"span\",\"span-4\",{\"style\":{\"color\":\"var(--color-slate-300)\"},\"children\":\";\"}]]}],[\"$\",\"span\",\"span-2\",{\"className\":\"line\",\"children\":[[\"$\",\"span\",\"span-0\",{\"data-indent\":\"\",\"children\":\" \"}],[\"$\",\"span\",\"span-1\",{\"style\":{\"color\":\"var(--color-slate-300)\"},\"children\":\"}\"}]]}]]}],[\"$\",\"$L33\",\"div-1\",{\"index\":1,\"children\":[[\"$\",\"span\",\"span-0\",{\"className\":\"line\",\"children\":[[\"$\",\"span\",\"span-0\",{\"data-indent\":\"\",\"children\":\" \"}],[\"$\",\"span\",\"span-1\",{\"style\":{\"color\":\"var(--color-pink-400)\"},\"children\":\".items-center\"}],[\"$\",\"span\",\"span-2\",{\"style\":{\"color\":\"var(--color-slate-300)\"},\"children\":\" {\"}]]}],[\"$\",\"span\",\"span-1\",{\"className\":\"line\",\"children\":[[\"$\",\"span\",\"span-0\",{\"data-indent\":\"\",\"children\":\" \"}],[\"$\",\"span\",\"span-1\",{\"style\":{\"color\":\"var(--color-sky-300)\"},\"children\":\"align-items\"}],[\"$\",\"span\",\"span-2\",{\"style\":{\"color\":\"var(--color-slate-300)\"},\"children\":\": \"}],[\"$\",\"span\",\"span-3\",{\"style\":{\"color\":\"var(--color-slate-50)\"},\"children\":\"center\"}],[\"$\",\"span\",\"span-4\",{\"style\":{\"color\":\"var(--color-slate-300)\"},\"children\":\";\"}]]}],[\"$\",\"span\",\"span-2\",{\"className\":\"line\",\"children\":[[\"$\",\"span\",\"span-0\",{\"data-indent\":\"\",\"children\":\" \"}],[\"$\",\"span\",\"span-1\",{\"style\":{\"color\":\"var(--color-slate-300)\"},\"children\":\"}\"}]]}]]}],[\"$\",\"$L33\",\"div-2\",{\"index\":2,\"children\":[[\"$\",\"span\",\"span-0\",{\"className\":\"line\",\"children\":[[\"$\",\"span\",\"span-0\",{\"data-indent\":\"\",\"children\":\" \"}],[\"$\",\"span\",\"span-1\",{\"style\":{\"color\":\"var(--color-pink-400)\"},\"children\":\".bg-blue-500\"}],[\"$\",\"span\",\"span-2\",{\"style\":{\"color\":\"var(--color-slate-300)\"},\"children\":\" {\"}]]}],[\"$\",\"span\",\"span-1\",{\"className\":\"line\",\"children\":[[\"$\",\"span\",\"span-0\",{\"data-indent\":\"\",\"children\":\" \"}],[\"$\",\"span\",\"span-1\",{\"style\":{\"color\":\"var(--color-sky-300)\"},\"children\":\"background-color\"}],[\"$\",\"span\",\"span-2\",{\"style\":{\"color\":\"var(--color-slate-300)\"},\"children\":\": \"}],[\"$\",\"span\",\"span-3\",{\"style\":{\"color\":\"var(--color-blue-200)\"},\"children\":\"var\"}],[\"$\",\"span\",\"span-4\",{\"style\":{\"color\":\"var(--color-slate-300)\"},\"children\":\"(\"}],[\"$\",\"span\",\"span-5\",{\"style\":{\"color\":\"var(--color-teal-200)\"},\"children\":\"--color-blue-500\"}],[\"$\",\"span\",\"span-6\",{\"style\":{\"color\":\"var(--color-slate-300)\"},\"children\":\",\"}],[\"$\",\"span\",\"span-7\",{\"style\":{\"color\":\"var(--color-blue-200)\"},\"children\":\" oklch\"}],[\"$\",\"span\",\"span-8\",{\"style\":{\"color\":\"var(--color-slate-300)\"},\"children\":\"(\"}],[\"$\",\"span\",\"span-9\",{\"style\":{\"color\":\"var(--color-slate-50)\"},\"children\":\"62.3\"}],[\"$\",\"span\",\"span-10\",{\"style\":{\"color\":\"var(--color-teal-100)\"},\"children\":\"%\"}],[\"$\",\"span\",\"span-11\",{\"style\":{\"color\":\"var(--color-slate-50)\"},\"children\":\" 0.214 259.815\"}],[\"$\",\"span\",\"span-12\",{\"style\":{\"color\":\"var(--color-slate-300)\"},\"children\":\"));\"}]]}],[\"$\",\"span\",\"span-2\",{\"className\":\"line\",\"children\":[[\"$\",\"span\",\"span-0\",{\"data-indent\":\"\",\"children\":\" \"}],[\"$\",\"span\",\"span-1\",{\"style\":{\"color\":\"var(--color-slate-300)\"},\"children\":\"}\"}]]}]]}],[\"$\",\"$L33\",\"div-3\",{\"index\":3,\"children\":[[\"$\",\"span\",\"span-0\",{\"className\":\"line\",\"children\":[[\"$\",\"span\",\"span-0\",{\"data-indent\":\"\",\"children\":\" \"}],[\"$\",\"span\",\"span-1\",{\"style\":{\"color\":\"var(--color-pink-400)\"},\"children\":\".px-4\"}],[\"$\",\"span\",\"span-2\",{\"style\":{\"color\":\"var(--color-slate-300)\"},\"children\":\" {\"}]]}],[\"$\",\"span\",\"span-1\",{\"className\":\"line\",\"children\":[[\"$\",\"span\",\"span-0\",{\"data-indent\":\"\",\"children\":\" \"}],[\"$\",\"span\",\"span-1\",{\"style\":{\"color\":\"var(--color-sky-300)\"},\"children\":\"padding-inline\"}],[\"$\",\"span\",\"span-2\",{\"style\":{\"color\":\"var(--color-slate-300)\"},\"children\":\": \"}],[\"$\",\"span\",\"span-3\",{\"style\":{\"color\":\"var(--color-blue-200)\"},\"children\":\"calc\"}],[\"$\",\"span\",\"span-4\",{\"style\":{\"color\":\"var(--color-slate-300)\"},\"children\":\"(\"}],[\"$\",\"span\",\"span-5\",{\"style\":{\"color\":\"var(--color-blue-200)\"},\"children\":\"var\"}],[\"$\",\"span\",\"span-6\",{\"style\":{\"color\":\"var(--color-slate-300)\"},\"children\":\"(\"}],[\"$\",\"span\",\"span-7\",{\"style\":{\"color\":\"var(--color-teal-200)\"},\"children\":\"--spacing\"}],[\"$\",\"span\",\"span-8\",{\"style\":{\"color\":\"var(--color-slate-300)\"},\"children\":\",\"}],[\"$\",\"span\",\"span-9\",{\"style\":{\"color\":\"var(--color-slate-50)\"},\"children\":\" 0.25\"}],[\"$\",\"span\",\"span-10\",{\"style\":{\"color\":\"var(--color-teal-100)\"},\"children\":\"rem\"}],[\"$\",\"span\",\"span-11\",{\"style\":{\"color\":\"var(--color-slate-300)\"},\"children\":\")\"}],[\"$\",\"span\",\"span-12\",{\"style\":{\"color\":\"var(--color-slate-300)\"},\"children\":\" *\"}],[\"$\",\"span\",\"span-13\",{\"style\":{\"color\":\"var(--color-slate-50)\"},\"children\":\" 4\"}],[\"$\",\"span\",\"span-14\",{\"style\":{\"color\":\"var(--color-slate-300)\"},\"children\":\");\"}]]}],[\"$\",\"span\",\"span-2\",{\"className\":\"line\",\"children\":[[\"$\",\"span\",\"span-0\",{\"data-indent\":\"\",\"children\":\" \"}],[\"$\",\"span\",\"span-1\",{\"style\":{\"color\":\"var(--color-slate-300)\"},\"children\":\"}\"}]]}]]}],[\"$\",\"$L33\",\"div-4\",{\"index\":4,\"children\":[[\"$\",\"span\",\"span-0\",{\"className\":\"line\",\"children\":[[\"$\",\"span\",\"span-0\",{\"data-indent\":\"\",\"children\":\" \"}],[\"$\",\"span\",\"span-1\",{\"style\":{\"color\":\"var(--color-pink-400)\"},\"children\":\".py-3\"}],[\"$\",\"span\",\"span-2\",{\"style\":{\"color\":\"var(--color-slate-300)\"},\"children\":\" {\"}]]}],[\"$\",\"span\",\"span-1\",{\"className\":\"line\",\"children\":[[\"$\",\"span\",\"span-0\",{\"data-indent\":\"\",\"children\":\" \"}],[\"$\",\"span\",\"span-1\",{\"style\":{\"color\":\"var(--color-sky-300)\"},\"children\":\"padding-block\"}],[\"$\",\"span\",\"span-2\",{\"style\":{\"color\":\"var(--color-slate-300)\"},\"children\":\": \"}],[\"$\",\"span\",\"span-3\",{\"style\":{\"color\":\"var(--color-blue-200)\"},\"children\":\"calc\"}],[\"$\",\"span\",\"span-4\",{\"style\":{\"color\":\"var(--color-slate-300)\"},\"children\":\"(\"}],[\"$\",\"span\",\"span-5\",{\"style\":{\"color\":\"var(--color-blue-200)\"},\"children\":\"var\"}],[\"$\",\"span\",\"span-6\",{\"style\":{\"color\":\"var(--color-slate-300)\"},\"children\":\"(\"}],[\"$\",\"span\",\"span-7\",{\"style\":{\"color\":\"var(--color-teal-200)\"},\"children\":\"--spacing\"}],[\"$\",\"span\",\"span-8\",{\"style\":{\"color\":\"var(--color-slate-300)\"},\"children\":\",\"}],[\"$\",\"span\",\"span-9\",{\"style\":{\"color\":\"var(--color-slate-50)\"},\"children\":\" 0.25\"}],[\"$\",\"span\",\"span-10\",{\"style\":{\"color\":\"var(--color-teal-100)\"},\"children\":\"rem\"}],[\"$\",\"span\",\"span-11\",{\"style\":{\"color\":\"var(--color-slate-300)\"},\"children\":\")\"}],[\"$\",\"span\",\"span-12\",{\"style\":{\"color\":\"var(--color-slate-300)\"},\"children\":\" *\"}],[\"$\",\"span\",\"span-13\",{\"style\":{\"color\":\"var(--color-slate-50)\"},\"children\":\" 3\"}],[\"$\",\"span\",\"span-14\",{\"style\":{\"color\":\"var(--color-slate-300)\"},\"children\":\");\"}]]}],[\"$\",\"span\",\"span-2\",{\"className\":\"line\",\"children\":[[\"$\",\"span\",\"span-0\",{\"data-indent\":\"\",\"children\":\" \"}],[\"$\",\"span\",\"span-1\",{\"style\":{\"color\":\"var(--color-slate-300)\"},\"children\":\"}\"}]]}]]}],[\"$\",\"$L33\",\"div-5\",{\"index\":5,\"children\":[[\"$\",\"span\",\"span-0\",{\"className\":\"line\",\"children\":[[\"$\",\"span\",\"span-0\",{\"data-indent\":\"\",\"children\":\" \"}],[\"$\",\"span\",\"span-1\",{\"style\":{\"color\":\"var(--color-pink-400)\"},\"children\":\".text-white\"}],[\"$\",\"span\",\"span-2\",{\"style\":{\"color\":\"var(--color-slate-300)\"},\"children\":\" {\"}]]}],[\"$\",\"span\",\"span-1\",{\"className\":\"line\",\"children\":[[\"$\",\"span\",\"span-0\",{\"data-indent\":\"\",\"children\":\" \"}],[\"$\",\"span\",\"span-1\",{\"style\":{\"color\":\"var(--color-sky-300)\"},\"children\":\"color\"}],[\"$\",\"span\",\"span-2\",{\"style\":{\"color\":\"var(--color-slate-300)\"},\"children\":\": \"}],[\"$\",\"span\",\"span-3\",{\"style\":{\"color\":\"var(--color-blue-200)\"},\"children\":\"var\"}],[\"$\",\"span\",\"span-4\",{\"style\":{\"color\":\"var(--color-slate-300)\"},\"children\":\"(\"}],[\"$\",\"span\",\"span-5\",{\"style\":{\"color\":\"var(--color-teal-200)\"},\"children\":\"--color-white\"}],[\"$\",\"span\",\"span-6\",{\"style\":{\"color\":\"var(--color-slate-300)\"},\"children\":\",\"}],[\"$\",\"span\",\"span-7\",{\"style\":{\"color\":\"var(--color-slate-50)\"},\"children\":\" #fff\"}],[\"$\",\"span\",\"span-8\",{\"style\":{\"color\":\"var(--color-slate-300)\"},\"children\":\");\"}]]}],[\"$\",\"span\",\"span-2\",{\"className\":\"line\",\"children\":[[\"$\",\"span\",\"span-0\",{\"data-indent\":\"\",\"children\":\" \"}],[\"$\",\"span\",\"span-1\",{\"style\":{\"color\":\"var(--color-slate-300)\"},\"children\":\"}\"}]]}]]}],[\"$\",\"$L33\",\"div-6\",{\"index\":6,\"children\":[[\"$\",\"span\",\"span-0\",{\"className\":\"line\",\"children\":[[\"$\",\"span\",\"span-0\",{\"data-indent\":\"\",\"children\":\" \"}],[\"$\",\"span\",\"span-1\",{\"style\":{\"color\":\"var(--color-pink-400)\"},\"children\":\".hover\"}],[\"$\",\"span\",\"span-2\",{\"style\":{\"color\":\"var(--color-slate-300)\"},\"children\":\"\\\\:\"}],[\"$\",\"span\",\"span-3\",{\"style\":{\"color\":\"var(--color-pink-400)\"},\"children\":\"bg-blue-400\"}],[\"$\",\"span\",\"span-4\",{\"style\":{\"color\":\"var(--color-slate-300)\"},\"children\":\" {\"}]]}],[\"$\",\"span\",\"span-1\",{\"className\":\"line\",\"children\":[[\"$\",\"span\",\"span-0\",{\"data-indent\":\"\",\"children\":\" \"}],[\"$\",\"span\",\"span-1\",{\"style\":{\"color\":\"var(--color-slate-300)\"},\"children\":\"\u0026:\"}],[\"$\",\"span\",\"span-2\",{\"style\":{\"color\":\"var(--color-slate-50)\"},\"children\":\"hover {\"}]]}],[\"$\",\"span\",\"span-2\",{\"className\":\"line\",\"children\":[[\"$\",\"span\",\"span-0\",{\"data-indent\":\"\",\"children\":\" \"}],[\"$\",\"span\",\"span-1\",{\"style\":{\"color\":\"var(--color-slate-50)\"},\"children\":\"@media (hover: hover\"}],[\"$\",\"span\",\"span-2\",{\"style\":{\"color\":\"var(--color-slate-300)\"},\"children\":\") {\"}]]}],[\"$\",\"span\",\"span-3\",{\"className\":\"line\",\"children\":[[\"$\",\"span\",\"span-0\",{\"data-indent\":\"\",\"children\":\" \"}],[\"$\",\"span\",\"span-1\",{\"style\":{\"color\":\"var(--color-sky-300)\"},\"children\":\"background-color\"}],[\"$\",\"span\",\"span-2\",{\"style\":{\"color\":\"var(--color-slate-300)\"},\"children\":\": \"}],[\"$\",\"span\",\"span-3\",{\"style\":{\"color\":\"var(--color-blue-200)\"},\"children\":\"var\"}],[\"$\",\"span\",\"span-4\",{\"style\":{\"color\":\"var(--color-slate-300)\"},\"children\":\"(\"}],[\"$\",\"span\",\"span-5\",{\"style\":{\"color\":\"var(--color-teal-200)\"},\"children\":\"--color-blue-400\"}],[\"$\",\"span\",\"span-6\",{\"style\":{\"color\":\"var(--color-slate-300)\"},\"children\":\",\"}],[\"$\",\"span\",\"span-7\",{\"style\":{\"color\":\"var(--color-blue-200)\"},\"children\":\" oklch\"}],[\"$\",\"span\",\"span-8\",{\"style\":{\"color\":\"var(--color-slate-300)\"},\"children\":\"(\"}],[\"$\",\"span\",\"span-9\",{\"style\":{\"color\":\"var(--color-slate-50)\"},\"children\":\"70.7\"}],[\"$\",\"span\",\"span-10\",{\"style\":{\"color\":\"var(--color-teal-100)\"},\"children\":\"%\"}],[\"$\",\"span\",\"span-11\",{\"style\":{\"color\":\"var(--color-slate-50)\"},\"children\":\" 0.165 254.624\"}],[\"$\",\"span\",\"span-12\",{\"style\":{\"color\":\"var(--color-slate-300)\"},\"children\":\"));\"}]]}],[\"$\",\"span\",\"span-4\",{\"className\":\"line\",\"children\":[[\"$\",\"span\",\"span-0\",{\"data-indent\":\"\",\"children\":\" \"}],[\"$\",\"span\",\"span-1\",{\"style\":{\"color\":\"var(--color-slate-300)\"},\"children\":\"}\"}]]}],[\"$\",\"span\",\"span-5\",{\"className\":\"line\",\"children\":[[\"$\",\"span\",\"span-0\",{\"data-indent\":\"\",\"children\":\" \"}],[\"$\",\"span\",\"span-1\",{\"style\":{\"color\":\"var(--color-slate-300)\"},\"children\":\"}\"}]]}],[\"$\",\"span\",\"span-6\",{\"className\":\"line\",\"children\":[[\"$\",\"span\",\"span-0\",{\"data-indent\":\"\",\"children\":\" \"}],[\"$\",\"span\",\"span-1\",{\"style\":{\"color\":\"var(--color-slate-50)\"},\"children\":\"}\"}]]}]]}],[\"$\",\"span\",\"span-1\",{\"className\":\"line\",\"children\":[\"$\",\"span\",\"span-0\",{\"style\":{\"color\":\"var(--color-slate-50)\"},\"children\":\"}\"}]}]]}]}]]}]\n"])</script></body></html>