@nuxt/scripts 0.7.1 → 0.8.0

package/dist/runtime/components/ScriptYouTubePlayer.vue

@@ -1,171 +1,174 @@
-<script setup lang="ts">
-/// <reference types="youtube" />
-import { computed, onMounted, ref, watch } from 'vue'
-import type { HTMLAttributes, ImgHTMLAttributes, Ref } from 'vue'
-import { defu } from 'defu'
-import type { ElementScriptTrigger } from '../types'
-import { useScriptTriggerElement } from '../composables/useScriptTriggerElement'
-import { useScriptYouTubePlayer } from '../registry/youtube-player'
-import { useHead } from '#imports'
-
-const props = withDefaults(defineProps<{
-  placeholderAttrs?: ImgHTMLAttributes
-  rootAttrs?: HTMLAttributes
-  aboveTheFold?: boolean
-  trigger?: ElementScriptTrigger
-  videoId: string
-  playerVars?: YT.PlayerVars
-  width?: number
-  height?: number
-}>(), {
-  trigger: 'mousedown',
-  // @ts-expect-error untyped
-  playerVars: { autoplay: 0, playsinline: 1 },
-  width: 640,
-  height: 480,
-})
-
-const emits = defineEmits<{
-  'ready': [e: YT.PlayerEvent]
-  'state-change': [e: YT.OnStateChangeEvent, target: YT.Player]
-  'playback-quality-change': [e: YT.OnPlaybackQualityChangeEvent, target: YT.Player]
-  'playback-rate-change': [e: YT.OnPlaybackRateChangeEvent, target: YT.Player]
-  'error': [e: YT.OnErrorEvent, target: YT.Player]
-}>()
-const events: (keyof YT.Events)[] = [
-  'onReady',
-  'onStateChange',
-  'onPlaybackQualityChange',
-  'onPlaybackRateChange',
-  'onError',
-  'onApiChange',
-]
-const rootEl = ref()
-const youtubeEl = ref()
-const ready = ref(false)
-const trigger = useScriptTriggerElement({ trigger: props.trigger, el: rootEl })
-const { onLoaded, status } = useScriptYouTubePlayer({
-  scriptOptions: {
-    trigger,
-  },
-})
-
-const player: Ref<YT.Player | undefined> = ref()
-let clickTriggered = false
-if (props.trigger === 'mousedown') {
-  trigger.then(() => {
-    clickTriggered = true
-  })
-}
-onMounted(() => {
-  onLoaded(async (instance) => {
-    const YouTube: typeof YT & { ready: (fn: () => void) => void } = await instance.YT
-    await new Promise<void>((resolve) => {
-      if (typeof YT.Player === 'undefined')
-        YouTube.ready(resolve)
-      else
-        resolve()
-    })
-    player.value = new YT.Player(youtubeEl.value, {
-      ...props,
-      events: Object.fromEntries(events.map(event => [event, (e: any) => {
-        const emitEventName = event.replace(/([A-Z])/g, '-$1').replace('on-', '').toLowerCase()
-        // @ts-expect-error untyped
-        emits(emitEventName, e)
-        if (event === 'onReady') {
-          ready.value = true
-          if (clickTriggered) {
-            player.value?.playVideo()
-            clickTriggered = false
-          }
-          watch(() => props.videoId, () => {
-            player.value?.loadVideoById(props.videoId)
-          })
-        }
-      }])),
-    })
-  })
-  watch(status, (status) => {
-    if (status === 'error') {
-      // @ts-expect-error untyped
-      emits('error')
-    }
-  })
-})
-
-defineExpose({
-  player,
-})
-
-const rootAttrs = computed(() => {
-  return defu(props.rootAttrs, {
-    'aria-busy': status.value === 'loading',
-    'aria-label': status.value === 'awaitingLoad'
-      ? 'YouTube Player - Placeholder'
-      : status.value === 'loading'
-        ? 'YouTube Player - Loading'
-        : 'YouTube Player - Loaded',
-    'aria-live': 'polite',
-    'role': 'application',
-    'style': {
-      cursor: 'pointer',
-      position: 'relative',
-      backgroundColor: 'black',
-      maxWidth: '100%',
-      width: `${props.width}px`,
-      height: `'auto'`,
-      aspectRatio: `${props.width}/${props.height}`,
-    },
-  }) as HTMLAttributes
-})
-
-const placeholder = computed(() => `https://i.ytimg.com/vi_webp/${props.videoId}/sddefault.webp`)
-
-if (import.meta.server) {
-  // dns-prefetch https://i.vimeocdn.com
-  useHead({
-    link: [
-      {
-        rel: props.aboveTheFold ? 'preconnect' : 'dns-prefetch',
-        href: 'https://i.ytimg.com',
-      },
-      props.aboveTheFold
-        // we can preload the placeholder image
-        ? {
-            rel: 'preload',
-            as: 'image',
-            href: placeholder.value,
-          }
-        : {},
-    ],
-  })
-}
-
-const placeholderAttrs = computed(() => {
-  return defu(props.placeholderAttrs, {
-    src: placeholder.value,
-    alt: '',
-    loading: props.aboveTheFold ? 'eager' : 'lazy',
-    style: {
-      width: '100%',
-      objectFit: 'contain',
-      height: '100%',
-    },
-  } satisfies ImgHTMLAttributes)
-})
-</script>
-
-<template>
-  <div ref="rootEl" v-bind="rootAttrs">
-    <div ref="youtubeEl" style="width: 100%; height: 100%; position: absolute; top: 0; left: 0;" />
-    <slot v-if="!ready" :placeholder="placeholder" name="placeholder">
-      <img v-bind="placeholderAttrs">
-    </slot>
-    <slot v-if="status === 'loading'" name="loading">
-      <ScriptLoadingIndicator />
-    </slot>
-    <slot v-if="status === 'awaitingLoad'" name="awaitingLoad" />
-    <slot v-else-if="status === 'error'" name="error" />
-    <slot />
-  </div>
-</template>
+<script setup lang="ts">
+/// <reference types="youtube" />
+import { computed, onMounted, ref, watch } from 'vue'
+import type { HTMLAttributes, ImgHTMLAttributes, Ref } from 'vue'
+import { defu } from 'defu'
+import type { ElementScriptTrigger } from '../types'
+import { useScriptTriggerElement } from '../composables/useScriptTriggerElement'
+import { useScriptYouTubePlayer } from '../registry/youtube-player'
+import { useHead } from '#imports'
+
+const props = withDefaults(defineProps<{
+  placeholderAttrs?: ImgHTMLAttributes
+  rootAttrs?: HTMLAttributes
+  aboveTheFold?: boolean
+  trigger?: ElementScriptTrigger
+  videoId: string
+  playerVars?: YT.PlayerVars
+  width?: number
+  height?: number
+}>(), {
+  trigger: 'mousedown',
+  // @ts-expect-error untyped
+  playerVars: { autoplay: 0, playsinline: 1 },
+  width: 640,
+  height: 480,
+})
+
+const emits = defineEmits<{
+  'ready': [e: YT.PlayerEvent]
+  'state-change': [e: YT.OnStateChangeEvent, target: YT.Player]
+  'playback-quality-change': [e: YT.OnPlaybackQualityChangeEvent, target: YT.Player]
+  'playback-rate-change': [e: YT.OnPlaybackRateChangeEvent, target: YT.Player]
+  'error': [e: YT.OnErrorEvent, target: YT.Player]
+}>()
+const events: (keyof YT.Events)[] = [
+  'onReady',
+  'onStateChange',
+  'onPlaybackQualityChange',
+  'onPlaybackRateChange',
+  'onError',
+  'onApiChange',
+]
+const rootEl = ref()
+const youtubeEl = ref()
+const ready = ref(false)
+const trigger = useScriptTriggerElement({ trigger: props.trigger, el: rootEl })
+const { onLoaded, status } = useScriptYouTubePlayer({
+  scriptOptions: {
+    trigger,
+  },
+})
+
+const player: Ref<YT.Player | undefined> = ref()
+let clickTriggered = false
+if (props.trigger === 'mousedown' && trigger instanceof Promise) {
+  trigger.then(() => {
+    clickTriggered = true
+  })
+}
+onMounted(() => {
+  onLoaded(async (instance) => {
+    const YouTube: typeof YT & { ready: (fn: () => void) => void } = await instance.YT
+    await new Promise<void>((resolve) => {
+      if (typeof YT.Player === 'undefined')
+        YouTube.ready(resolve)
+      else
+        resolve()
+    })
+    player.value = new YT.Player(youtubeEl.value, {
+      ...props,
+      events: Object.fromEntries(events.map(event => [event, (e: any) => {
+        const emitEventName = event.replace(/([A-Z])/g, '-$1').replace('on-', '').toLowerCase()
+        // @ts-expect-error untyped
+        emits(emitEventName, e)
+        if (event === 'onReady') {
+          ready.value = true
+          if (clickTriggered) {
+            player.value?.playVideo()
+            clickTriggered = false
+          }
+          watch(() => props.videoId, () => {
+            player.value?.loadVideoById(props.videoId)
+          })
+        }
+      }])),
+    })
+  })
+  watch(status, (status) => {
+    if (status === 'error') {
+      // @ts-expect-error untyped
+      emits('error')
+    }
+  })
+})
+
+defineExpose({
+  player,
+})
+
+const rootAttrs = computed(() => {
+  return defu(props.rootAttrs, {
+    'aria-busy': status.value === 'loading',
+    'aria-label': status.value === 'awaitingLoad'
+      ? 'YouTube Player - Placeholder'
+      : status.value === 'loading'
+        ? 'YouTube Player - Loading'
+        : 'YouTube Player - Loaded',
+    'aria-live': 'polite',
+    'role': 'application',
+    'style': {
+      cursor: 'pointer',
+      position: 'relative',
+      backgroundColor: 'black',
+      maxWidth: '100%',
+      width: `${props.width}px`,
+      height: `'auto'`,
+      aspectRatio: `${props.width}/${props.height}`,
+    },
+    ...(trigger instanceof Promise ? trigger.ssrAttrs || {} : {}),
+  }) as HTMLAttributes
+})
+
+const placeholder = computed(() => `https://i.ytimg.com/vi_webp/${props.videoId}/sddefault.webp`)
+
+if (import.meta.server) {
+  // dns-prefetch https://i.vimeocdn.com
+  useHead({
+    link: [
+      {
+        key: `nuxt-script-youtube-img`,
+        rel: props.aboveTheFold ? 'preconnect' : 'dns-prefetch',
+        href: 'https://i.ytimg.com',
+      },
+      props.aboveTheFold
+        // we can preload the placeholder image
+        ? {
+            key: `nuxt-script-youtube-img`,
+            rel: 'preload',
+            as: 'image',
+            href: placeholder.value,
+          }
+        : {},
+    ],
+  })
+}
+
+const placeholderAttrs = computed(() => {
+  return defu(props.placeholderAttrs, {
+    src: placeholder.value,
+    alt: '',
+    loading: props.aboveTheFold ? 'eager' : 'lazy',
+    style: {
+      width: '100%',
+      objectFit: 'contain',
+      height: '100%',
+    },
+  } satisfies ImgHTMLAttributes)
+})
+</script>
+
+<template>
+  <div ref="rootEl" v-bind="rootAttrs">
+    <div ref="youtubeEl" style="width: 100%; height: 100%; position: absolute; top: 0; left: 0;" />
+    <slot v-if="!ready" :placeholder="placeholder" name="placeholder">
+      <img v-bind="placeholderAttrs">
+    </slot>
+    <slot v-if="status === 'loading'" name="loading">
+      <ScriptLoadingIndicator />
+    </slot>
+    <slot v-if="status === 'awaitingLoad'" name="awaitingLoad" />
+    <slot v-else-if="status === 'error'" name="error" />
+    <slot />
+  </div>
+</template>

package/dist/runtime/composables/useScript.js

@@ -1,23 +1,38 @@
 import { resolveScriptKey } from "unhead";
 import { defu } from "defu";
 import { useScript as _useScript } from "@unhead/vue";
-import { injectHead, onNuxtReady, useNuxtApp, useRuntimeConfig, reactive } from "#imports";
+import { injectHead, onNuxtReady, useHead, useNuxtApp, useRuntimeConfig, reactive } from "#imports";
 function useNuxtScriptRuntimeConfig() {
   return useRuntimeConfig().public["nuxt-scripts"];
 }
 export function useScript(input, options) {
   input = typeof input === "string" ? { src: input } : input;
   options = defu(options, useNuxtScriptRuntimeConfig()?.defaultScriptOptions);
-  if (options.trigger === "onNuxtReady")
+  const rel = options.trigger === "onNuxtReady" ? "preload" : "preconnect";
+  const id = resolveScriptKey(input);
+  if (options.trigger !== "server" && (rel === "preload" || !input.src.startsWith("/"))) {
+    useHead({
+      link: [
+        {
+          rel,
+          as: rel === "preload" ? "script" : void 0,
+          href: input.src,
+          crossorigin: input.src.startsWith("/") ? void 0 : typeof input.crossorigin !== "undefined" ? input.crossorigin : "anonymous",
+          key: `nuxt-script-${id}`,
+          tagPriority: rel === "preload" ? "high" : 0,
+          fetchpriority: "low"
+        }
+      ]
+    });
+  }
+  if (options.trigger === "onNuxtReady") {
     options.trigger = onNuxtReady;
+  }
   const nuxtApp = useNuxtApp();
-  const id = resolveScriptKey(input);
   nuxtApp.$scripts = nuxtApp.$scripts || reactive({});
-  if (nuxtApp.$scripts[id]) {
-    return nuxtApp.$scripts[id];
-  }
+  const exists = !!nuxtApp.$scripts?.[id];
   if (import.meta.client) {
-    if (!nuxtApp._scripts?.[id]) {
+    if (!exists) {
       performance?.mark?.("mark_feature_usage", {
         detail: {
           feature: options.performanceMarkFeature ?? `nuxt-scripts:${id}`
@@ -32,6 +47,9 @@ export function useScript(input, options) {
       nuxtApp._scripts[instance.id] = payload;
       nuxtApp.hooks.callHook("scripts:updated", { scripts: nuxtApp._scripts });
     };
+    if (exists) {
+      return instance;
+    }
     const payload = {
       ...options.devtools,
       src: input.src,

package/dist/runtime/composables/useScriptTriggerElement.d.ts

@@ -14,4 +14,6 @@ export interface ElementScriptTriggerOptions {
 /**
  * Create a trigger for an element to load a script based on specific element events.
  */
-export declare function useScriptTriggerElement(options: ElementScriptTriggerOptions): Promise<void>;
+export declare function useScriptTriggerElement(options: ElementScriptTriggerOptions): Promise<void> & {
+    ssrAttrs?: Record<string, string>;
+} | 'onNuxtReady';

package/dist/runtime/composables/useScriptTriggerElement.js

@@ -2,9 +2,11 @@ import {
   useEventListener,
   useIntersectionObserver
 } from "@vueuse/core";
+import { tryOnScopeDispose, tryOnMounted } from "@vueuse/shared";
+import { watch } from "vue";
 function useElementVisibilityPromise(element) {
   let observer;
-  return new Promise((resolve) => {
+  return new Promise((resolve, reject) => {
     observer = useIntersectionObserver(
       element,
       (intersectionObserverEntries) => {
@@ -18,32 +20,57 @@ function useElementVisibilityPromise(element) {
         threshold: 0
       }
     );
+    tryOnScopeDispose(reject);
+  }).catch(() => {
   }).finally(() => {
     observer.stop();
   });
 }
 export function useScriptTriggerElement(options) {
   const { el, trigger } = options;
-  if (import.meta.server || !el)
-    return new Promise(() => {
-    });
   const triggers = (Array.isArray(options.trigger) ? options.trigger : [options.trigger]).filter(Boolean);
-  if (el && triggers.some((t) => ["visibility", "visible"].includes(t)))
+  if (!trigger || triggers.includes("immediate") || triggers.includes("onNuxtReady")) {
+    return "onNuxtReady";
+  }
+  if (triggers.some((t) => ["visibility", "visible"].includes(t))) {
+    if (import.meta.server || !el)
+      return new Promise(() => {
+      });
     return useElementVisibilityPromise(el);
-  if (!trigger)
-    return Promise.resolve();
-  if (!triggers.includes("immediate")) {
-    return new Promise((resolve) => {
-      const _ = useEventListener(
-        typeof el !== "undefined" ? el : document.body,
-        triggers,
-        () => {
-          resolve();
-          _();
-        },
-        { once: true, passive: true }
-      );
+  }
+  const ssrAttrs = {};
+  if (import.meta.server) {
+    triggers.forEach((trigger2) => {
+      ssrAttrs[`on${trigger2}`] = `this.dataset.script_${trigger2} = true`;
     });
   }
-  return Promise.resolve();
+  const p = new Promise((resolve, reject) => {
+    const target = typeof el !== "undefined" ? el : document.body;
+    const _ = useEventListener(
+      target,
+      triggers,
+      () => {
+        _();
+        resolve();
+      },
+      { once: true, passive: true }
+    );
+    tryOnMounted(() => {
+      watch(target, ($el) => {
+        if ($el) {
+          triggers.forEach((trigger2) => {
+            if ($el.dataset[`script_${trigger2}`]) {
+              _();
+              resolve();
+            }
+          });
+        }
+      }, {
+        immediate: true
+      });
+    });
+    tryOnScopeDispose(reject);
+  }).catch(() => {
+  });
+  return Object.assign(p, { ssrAttrs });
 }

package/dist/runtime/registry/google-adsense.js

@@ -1,6 +1,5 @@
-import { optional } from "valibot";
 import { useRegistryScript } from "../utils.js";
-import { object, string } from "#nuxt-scripts-validator";
+import { object, string, optional } from "#nuxt-scripts-validator";
 import { useHead } from "#imports";
 export const GoogleAdsenseOptions = object({
   /**
@@ -18,19 +17,17 @@ export function useScriptGoogleAdsense(_options) {
       use() {
         return { adsbygoogle: window.adsbygoogle };
       },
-      // allow dataLayer to be accessed on the server
-      stub: import.meta.client ? void 0 : ({ fn }) => {
-        return fn === "adsbygoogle" ? [] : void 0;
-      },
       beforeInit() {
-        useHead({
-          meta: [
-            {
-              name: "google-adsense-account",
-              content: options?.client
-            }
-          ]
-        });
+        if (options?.client) {
+          useHead({
+            meta: [
+              {
+                name: "google-adsense-account",
+                content: options?.client
+              }
+            ]
+          });
+        }
       }
     }
   }), _options);

package/dist/runtime/types.js

@@ -1,2 +1,2 @@
-import { object } from "valibot";
+import { object } from "#nuxt-scripts-validator";
 const _emptyOptions = object({});

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "@nuxt/scripts",
   "type": "module",
-  "version": "0.7.1",
-  "packageManager": "pnpm@9.7.1",
+  "version": "0.8.0",
+  "packageManager": "pnpm@9.9.0",
   "description": "Load third-party scripts with better performance, privacy and DX in Nuxt Apps.",
   "author": {
     "website": "https://harlanzw.com",
@@ -65,15 +65,15 @@
     ]
   },
   "dependencies": {
-    "@nuxt/devtools-kit": "^1.3.14",
-    "@nuxt/devtools-ui-kit": "^1.3.14",
-    "@nuxt/kit": "^3.12.4",
-    "@types/google.maps": "^3.55.12",
+    "@nuxt/devtools-kit": "^1.4.1",
+    "@nuxt/devtools-ui-kit": "^1.4.1",
+    "@nuxt/kit": "^3.13.0",
+    "@types/google.maps": "^3.57.0",
     "@types/stripe-v3": "^3.1.33",
     "@types/vimeo__player": "^2.18.3",
-    "@types/youtube": "^0.0.50",
-    "@unhead/vue": "^1.10.0",
-    "@vueuse/core": "^11.0.1",
+    "@types/youtube": "^0.1.0",
+    "@unhead/vue": "^1.10.3",
+    "@vueuse/core": "^11.0.3",
     "consola": "^3.2.3",
     "defu": "^6.1.4",
     "h3": "^1.12.0",
@@ -82,33 +82,33 @@
     "ofetch": "^1.3.4",
     "ohash": "^1.1.3",
     "pathe": "^1.1.2",
-    "pkg-types": "^1.1.3",
+    "pkg-types": "^1.2.0",
     "semver": "^7.6.3",
-    "shiki": "1.14.1",
+    "shiki": "1.16.1",
     "sirv": "^2.0.4",
     "std-env": "^3.7.0",
     "third-party-capital": "2.3.0",
     "ufo": "^1.5.4",
-    "unimport": "^3.11.0",
-    "unplugin": "^1.12.2",
+    "unimport": "^3.11.1",
+    "unplugin": "^1.12.3",
     "unstorage": "^1.10.2",
-    "valibot": "^0.38.0"
+    "valibot": "^0.41.0"
   },
   "devDependencies": {
-    "@nuxt/devtools-ui-kit": "^1.3.14",
-    "@nuxt/eslint-config": "^0.5.1",
+    "@nuxt/devtools-ui-kit": "^1.4.1",
+    "@nuxt/eslint-config": "^0.5.5",
     "@nuxt/module-builder": "^0.8.3",
     "@nuxt/test-utils": "3.14.1",
     "@types/semver": "^7.5.8",
-    "@typescript-eslint/typescript-estree": "^8.2.0",
-    "@unhead/schema": "^1.10.0",
+    "@typescript-eslint/typescript-estree": "^8.4.0",
+    "@unhead/schema": "^1.10.3",
     "acorn-loose": "^8.4.0",
-    "bumpp": "^9.5.1",
+    "bumpp": "^9.5.2",
     "changelogen": "^0.5.5",
-    "eslint": "9.9.0",
+    "eslint": "9.9.1",
     "eslint-plugin-n": "^17.10.2",
     "knitwork": "^1.1.0",
-    "nuxt": "^3.12.4",
+    "nuxt": "^3.13.0",
     "nuxt-scripts-devtools": "workspace:*",
     "playwright-core": "^1.46.1",
     "typescript": "^5.5.4",
@@ -117,16 +117,17 @@
     "vue-router": "^4.4.3"
   },
   "resolutions": {
+    "@nuxt/schema": "3.13.0",
     "@nuxt/scripts": "workspace:*",
-    "@unhead/dom": "1.10.0",
-    "@unhead/schema": "1.10.0",
-    "@unhead/shared": "1.10.0",
-    "@unhead/ssr": "1.10.0",
-    "@unhead/vue": "1.10.0",
-    "nuxt": "^3.12.4",
+    "@unhead/dom": "1.10.2",
+    "@unhead/schema": "1.10.4",
+    "@unhead/shared": "1.10.4",
+    "@unhead/ssr": "1.10.4",
+    "@unhead/vue": "1.10.4",
+    "nuxt": "^3.13.0",
     "nuxt-scripts-devtools": "workspace:*",
     "shiki": "1.10.3",
-    "unhead": "1.10.0",
+    "unhead": "1.10.4",
     "vue": "^3.4.38",
     "vue-router": "^4.4.3"
   }

package/dist/client/_nuxt/builds/meta/e4092e18-9a58-41ab-947e-35e1f2082b75.json

@@ -1 +0,0 @@
-{"id":"e4092e18-9a58-41ab-947e-35e1f2082b75","timestamp":1724318010522,"matcher":{"static":{},"wildcard":{},"dynamic":{}},"prerendered":[]}

package/dist/client/_nuxt/error-404.CHrXIISA.css

@@ -1 +0,0 @@
-.spotlight[data-v-379fced0]{background:linear-gradient(45deg,#00dc82,#36e4da 50%,#0047e1);bottom:-30vh;filter:blur(20vh);height:40vh}.gradient-border[data-v-379fced0]{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:.5rem;position:relative}@media (prefers-color-scheme:light){.gradient-border[data-v-379fced0]{background-color:#ffffff4d}.gradient-border[data-v-379fced0]:before{background:linear-gradient(90deg,#e2e2e2,#e2e2e2 25%,#00dc82,#36e4da 75%,#0047e1)}}@media (prefers-color-scheme:dark){.gradient-border[data-v-379fced0]{background-color:#1414144d}.gradient-border[data-v-379fced0]:before{background:linear-gradient(90deg,#303030,#303030 25%,#00dc82,#36e4da 75%,#0047e1)}}.gradient-border[data-v-379fced0]:before{background-size:400% auto;border-radius:.5rem;bottom:0;content:"";left:0;-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:.5;padding:2px;position:absolute;right:0;top:0;transition:background-position .3s ease-in-out,opacity .2s ease-in-out;width:100%}.gradient-border[data-v-379fced0]:hover:before{background-position:-50% 0;opacity:1}.fixed[data-v-379fced0]{position:fixed}.left-0[data-v-379fced0]{left:0}.right-0[data-v-379fced0]{right:0}.z-10[data-v-379fced0]{z-index:10}.z-20[data-v-379fced0]{z-index:20}.grid[data-v-379fced0]{display:grid}.mb-16[data-v-379fced0]{margin-bottom:4rem}.mb-8[data-v-379fced0]{margin-bottom:2rem}.max-w-520px[data-v-379fced0]{max-width:520px}.min-h-screen[data-v-379fced0]{min-height:100vh}.w-full[data-v-379fced0]{width:100%}.flex[data-v-379fced0]{display:flex}.cursor-pointer[data-v-379fced0]{cursor:pointer}.place-content-center[data-v-379fced0]{place-content:center}.items-center[data-v-379fced0]{align-items:center}.justify-center[data-v-379fced0]{justify-content:center}.overflow-hidden[data-v-379fced0]{overflow:hidden}.bg-white[data-v-379fced0]{--un-bg-opacity:1;background-color:rgb(255 255 255/var(--un-bg-opacity))}.px-4[data-v-379fced0]{padding-left:1rem;padding-right:1rem}.px-8[data-v-379fced0]{padding-left:2rem;padding-right:2rem}.py-2[data-v-379fced0]{padding-bottom:.5rem;padding-top:.5rem}.text-center[data-v-379fced0]{text-align:center}.text-8xl[data-v-379fced0]{font-size:6rem;line-height:1}.text-xl[data-v-379fced0]{font-size:1.25rem;line-height:1.75rem}.text-black[data-v-379fced0]{--un-text-opacity:1;color:rgb(0 0 0/var(--un-text-opacity))}.font-light[data-v-379fced0]{font-weight:300}.font-medium[data-v-379fced0]{font-weight:500}.leading-tight[data-v-379fced0]{line-height:1.25}.font-sans[data-v-379fced0]{font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji}.antialiased[data-v-379fced0]{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}@media (prefers-color-scheme:dark){.dark\:bg-black[data-v-379fced0]{--un-bg-opacity:1;background-color:rgb(0 0 0/var(--un-bg-opacity))}.dark\:text-white[data-v-379fced0]{--un-text-opacity:1;color:rgb(255 255 255/var(--un-text-opacity))}}@media (min-width:640px){.sm\:px-0[data-v-379fced0]{padding-left:0;padding-right:0}.sm\:px-6[data-v-379fced0]{padding-left:1.5rem;padding-right:1.5rem}.sm\:py-3[data-v-379fced0]{padding-bottom:.75rem;padding-top:.75rem}.sm\:text-4xl[data-v-379fced0]{font-size:2.25rem;line-height:2.5rem}.sm\:text-xl[data-v-379fced0]{font-size:1.25rem;line-height:1.75rem}}