unplugin-fonts icon indicating copy to clipboard operation
unplugin-fonts copied to clipboard

Dont work in dev mode

Open espensgr opened this issue 2 years ago • 1 comments

This is the code i'm using:

VitePluginFonts({
  custom: {
    families: [
    {
      name: 'Mainson Neue',
      src: './src/fonts/regular/*',
    },
    {
      name: 'Mainson Neue Extended',
      src: './src/fonts/extended/*',
    }
    ],
  },
})

It adds an fonts.css (http://localhost:5173/@vite-plugin-fonts/fonts.css) with the hot replacement, but the url for the files is url(/src/fonts/font-name). It should add the localhost in front i guess? In build mode it generates the right font file with hashed names etc. Using Vite 3.0.9

Anyone else have this problem.

espensgr avatar Aug 24 '22 13:08 espensgr

I'm seeing the same thing. My fonts.css (same place as yours) looks like the following. Notice the empty string assigned to __vite__css, the default export:

import { createHotContext as __vite__createHotContext } from "/@vite/client";import.meta.hot = __vite__createHotContext("/@vite-plugin-fonts/fonts.css");import { updateStyle as __vite__updateStyle, removeStyle as __vite__removeStyle } from "/@vite/client"
const __vite__id = "/@vite-plugin-fonts/fonts.css"
const __vite__css = ""
__vite__updateStyle(__vite__id, __vite__css)
import.meta.hot.accept()
export default __vite__css
import.meta.hot.prune(() => __vite__removeStyle(__vite__id))

My config looks like this:

VitePluginFonts({
    google: {
        families: [
            {
                name: "Montserrat",
                styles: "wght@400;500;600;700",
            },
            {
                name: "Economica",
                styles: "ital,wght@1,700",
            },
        ],
    },
}),

trevorblades avatar Sep 08 '22 05:09 trevorblades

Hi @trevorblades @espensgr

This should now be solved in the v1.0.0

Feel free to reopen the issue if it still here!

stafyniaksacha avatar Mar 20 '23 12:03 stafyniaksacha

This still dont work. The url is still /src/fonts/font-name Here is the __x00__unfonts.css file in dev:

import {createHotContext as __vite__createHotContext} from "/@vite/client";
import.meta.hot = __vite__createHotContext("/@id/__x00__unfonts.css");
import {updateStyle as __vite__updateStyle, removeStyle as __vite__removeStyle} from "/@vite/client"
const __vite__id = "\u0000unfonts.css"
const __vite__css = "@font-face {\n  font-family: 'Coanda';\n  src: url('/src/fonts/Coanda/Coanda-Black.woff') format('woff'),\n\t\turl('/src/fonts/Coanda/Coanda-Black.woff2') format('woff2'),local('Coanda');\n  font-weight: 900;\n  font-style: normal;\n  font-display: swap;\n}\n@font-face {\n  font-family: 'GTAmerica';\n  src: url('/src/fonts/GTAmerica/Standard/GT-America-Standard-Black-Italic.woff') format('woff'),\n\t\turl('/src/fonts/GTAmerica/Standard/GT-America-Standard-Black-Italic.woff2') format('woff2'),local('GTAmerica');\n  font-weight: 900;\n  font-style: italic;\n  font-display: swap;\n}\n@font-face {\n  font-family: 'GTAmerica';\n  src: url('/src/fonts/GTAmerica/Standard/GT-America-Standard-Black.woff') format('woff'),\n\t\turl('/src/fonts/GTAmerica/Standard/GT-America-Standard-Black.woff2') format('woff2'),local('GTAmerica');\n  font-weight: 900;\n  font-style: normal;\n  font-display: swap;\n}\n@font-face {\n  font-family: 'GTAmerica';\n  src: url('/src/fonts/GTAmerica/Standard/GT-America-Standard-Bold-Italic.woff') format('woff'),\n\t\turl('/src/fonts/GTAmerica/Standard/GT-America-Standard-Bold-Italic.woff2') format('woff2'),local('GTAmerica');\n  font-weight: 700;\n  font-style: italic;\n  font-display: swap;\n}\n@font-face {\n  font-family: 'GTAmerica';\n  src: url('/src/fonts/GTAmerica/Standard/GT-America-Standard-Bold.woff') format('woff'),\n\t\turl('/src/fonts/GTAmerica/Standard/GT-America-Standard-Bold.woff2') format('woff2'),local('GTAmerica');\n  font-weight: 700;\n  font-style: normal;\n  font-display: swap;\n}\n@font-face {\n  font-family: 'GTAmerica';\n  src: url('/src/fonts/GTAmerica/Standard/GT-America-Standard-Light-Italic.woff') format('woff'),\n\t\turl('/src/fonts/GTAmerica/Standard/GT-America-Standard-Light-Italic.woff2') format('woff2'),local('GTAmerica');\n  font-weight: 300;\n  font-style: italic;\n  font-display: swap;\n}\n@font-face {\n  font-family: 'GTAmerica';\n  src: url('/src/fonts/GTAmerica/Standard/GT-America-Standard-Light.woff') format('woff'),\n\t\turl('/src/fonts/GTAmerica/Standard/GT-America-Standard-Light.woff2') format('woff2'),local('GTAmerica');\n  font-weight: 300;\n  font-style: normal;\n  font-display: swap;\n}\n@font-face {\n  font-family: 'GTAmerica';\n  src: url('/src/fonts/GTAmerica/Standard/GT-America-Standard-Medium-Italic.woff') format('woff'),\n\t\turl('/src/fonts/GTAmerica/Standard/GT-America-Standard-Medium-Italic.woff2') format('woff2'),local('GTAmerica');\n  font-weight: 500;\n  font-style: italic;\n  font-display: swap;\n}\n@font-face {\n  font-family: 'GTAmerica';\n  src: url('/src/fonts/GTAmerica/Standard/GT-America-Standard-Medium.woff') format('woff'),\n\t\turl('/src/fonts/GTAmerica/Standard/GT-America-Standard-Medium.woff2') format('woff2'),local('GTAmerica');\n  font-weight: 500;\n  font-style: normal;\n  font-display: swap;\n}\n@font-face {\n  font-family: 'GTAmerica';\n  src: url('/src/fonts/GTAmerica/Standard/GT-America-Standard-Regular-Italic.woff') format('woff'),\n\t\turl('/src/fonts/GTAmerica/Standard/GT-America-Standard-Regular-Italic.woff2') format('woff2'),local('GTAmerica');\n  font-weight: 400;\n  font-style: italic;\n  font-display: swap;\n}\n@font-face {\n  font-family: 'GTAmerica';\n  src: url('/src/fonts/GTAmerica/Standard/GT-America-Standard-Regular.woff') format('woff'),\n\t\turl('/src/fonts/GTAmerica/Standard/GT-America-Standard-Regular.woff2') format('woff2'),local('GTAmerica');\n  font-weight: 400;\n  font-style: normal;\n  font-display: swap;\n}\n@font-face {\n  font-family: 'GTAmerica';\n  src: url('/src/fonts/GTAmerica/Standard/GT-America-Standard-Thin-Italic.woff') format('woff'),\n\t\turl('/src/fonts/GTAmerica/Standard/GT-America-Standard-Thin-Italic.woff2') format('woff2'),local('GTAmerica');\n  font-weight: 100;\n  font-style: italic;\n  font-display: swap;\n}\n@font-face {\n  font-family: 'GTAmerica';\n  src: url('/src/fonts/GTAmerica/Standard/GT-America-Standard-Thin.woff') format('woff'),\n\t\turl('/src/fonts/GTAmerica/Standard/GT-America-Standard-Thin.woff2') format('woff2'),local('GTAmerica');\n  font-weight: 100;\n  font-style: normal;\n  font-display: swap;\n}\n@font-face {\n  font-family: 'GTAmerica';\n  src: url('/src/fonts/GTAmerica/Standard/GT-America-Standard-Ultra-Light-Italic.woff') format('woff'),\n\t\turl('/src/fonts/GTAmerica/Standard/GT-America-Standard-Ultra-Light-Italic.woff2') format('woff2'),local('GTAmerica');\n  font-weight: 300;\n  font-style: italic;\n  font-display: swap;\n}\n@font-face {\n  font-family: 'GTAmerica';\n  src: url('/src/fonts/GTAmerica/Standard/GT-America-Standard-Ultra-Light.woff') format('woff'),\n\t\turl('/src/fonts/GTAmerica/Standard/GT-America-Standard-Ultra-Light.woff2') format('woff2'),local('GTAmerica');\n  font-weight: 300;\n  font-style: normal;\n  font-display: swap;\n}\n@font-face {\n  font-family: 'GTAmerica-Compressed';\n  src: url('/src/fonts/GTAmerica/Compressed/GT-America-Compressed-Black-Italic.woff') format('woff'),\n\t\turl('/src/fonts/GTAmerica/Compressed/GT-America-Compressed-Black-Italic.woff2') format('woff2'),local('GTAmerica-Compressed');\n  font-weight: 900;\n  font-style: italic;\n  font-display: swap;\n}\n@font-face {\n  font-family: 'GTAmerica-Compressed';\n  src: url('/src/fonts/GTAmerica/Compressed/GT-America-Compressed-Black.woff') format('woff'),\n\t\turl('/src/fonts/GTAmerica/Compressed/GT-America-Compressed-Black.woff2') format('woff2'),local('GTAmerica-Compressed');\n  font-weight: 900;\n  font-style: normal;\n  font-display: swap;\n}\n@font-face {\n  font-family: 'GTAmerica-Compressed';\n  src: url('/src/fonts/GTAmerica/Compressed/GT-America-Compressed-Bold-Italic.woff') format('woff'),\n\t\turl('/src/fonts/GTAmerica/Compressed/GT-America-Compressed-Bold-Italic.woff2') format('woff2'),local('GTAmerica-Compressed');\n  font-weight: 700;\n  font-style: italic;\n  font-display: swap;\n}\n@font-face {\n  font-family: 'GTAmerica-Compressed';\n  src: url('/src/fonts/GTAmerica/Compressed/GT-America-Compressed-Bold.woff') format('woff'),\n\t\turl('/src/fonts/GTAmerica/Compressed/GT-America-Compressed-Bold.woff2') format('woff2'),local('GTAmerica-Compressed');\n  font-weight: 700;\n  font-style: normal;\n  font-display: swap;\n}\n@font-face {\n  font-family: 'GTAmerica-Compressed';\n  src: url('/src/fonts/GTAmerica/Compressed/GT-America-Compressed-Light-Italic.woff') format('woff'),\n\t\turl('/src/fonts/GTAmerica/Compressed/GT-America-Compressed-Light-Italic.woff2') format('woff2'),local('GTAmerica-Compressed');\n  font-weight: 300;\n  font-style: italic;\n  font-display: swap;\n}\n@font-face {\n  font-family: 'GTAmerica-Compressed';\n  src: url('/src/fonts/GTAmerica/Compressed/GT-America-Compressed-Light.woff') format('woff'),\n\t\turl('/src/fonts/GTAmerica/Compressed/GT-America-Compressed-Light.woff2') format('woff2'),local('GTAmerica-Compressed');\n  font-weight: 300;\n  font-style: normal;\n  font-display: swap;\n}\n@font-face {\n  font-family: 'GTAmerica-Compressed';\n  src: url('/src/fonts/GTAmerica/Compressed/GT-America-Compressed-Medium-Italic.woff') format('woff'),\n\t\turl('/src/fonts/GTAmerica/Compressed/GT-America-Compressed-Medium-Italic.woff2') format('woff2'),local('GTAmerica-Compressed');\n  font-weight: 500;\n  font-style: italic;\n  font-display: swap;\n}\n@font-face {\n  font-family: 'GTAmerica-Compressed';\n  src: url('/src/fonts/GTAmerica/Compressed/GT-America-Compressed-Medium.woff') format('woff'),\n\t\turl('/src/fonts/GTAmerica/Compressed/GT-America-Compressed-Medium.woff2') format('woff2'),local('GTAmerica-Compressed');\n  font-weight: 500;\n  font-style: normal;\n  font-display: swap;\n}\n@font-face {\n  font-family: 'GTAmerica-Compressed';\n  src: url('/src/fonts/GTAmerica/Compressed/GT-America-Compressed-Regular-Italic.woff') format('woff'),\n\t\turl('/src/fonts/GTAmerica/Compressed/GT-America-Compressed-Regular-Italic.woff2') format('woff2'),local('GTAmerica-Compressed');\n  font-weight: 400;\n  font-style: italic;\n  font-display: swap;\n}\n@font-face {\n  font-family: 'GTAmerica-Compressed';\n  src: url('/src/fonts/GTAmerica/Compressed/GT-America-Compressed-Regular.woff') format('woff'),\n\t\turl('/src/fonts/GTAmerica/Compressed/GT-America-Compressed-Regular.woff2') format('woff2'),local('GTAmerica-Compressed');\n  font-weight: 400;\n  font-style: normal;\n  font-display: swap;\n}\n@font-face {\n  font-family: 'GTAmerica-Compressed';\n  src: url('/src/fonts/GTAmerica/Compressed/GT-America-Compressed-Thin-Italic.woff') format('woff'),\n\t\turl('/src/fonts/GTAmerica/Compressed/GT-America-Compressed-Thin-Italic.woff2') format('woff2'),local('GTAmerica-Compressed');\n  font-weight: 100;\n  font-style: italic;\n  font-display: swap;\n}\n@font-face {\n  font-family: 'GTAmerica-Compressed';\n  src: url('/src/fonts/GTAmerica/Compressed/GT-America-Compressed-Thin.woff') format('woff'),\n\t\turl('/src/fonts/GTAmerica/Compressed/GT-America-Compressed-Thin.woff2') format('woff2'),local('GTAmerica-Compressed');\n  font-weight: 100;\n  font-style: normal;\n  font-display: swap;\n}\n@font-face {\n  font-family: 'GTAmerica-Compressed';\n  src: url('/src/fonts/GTAmerica/Compressed/GT-America-Compressed-Ultra-Light-Italic.woff') format('woff'),\n\t\turl('/src/fonts/GTAmerica/Compressed/GT-America-Compressed-Ultra-Light-Italic.woff2') format('woff2'),local('GTAmerica-Compressed');\n  font-weight: 300;\n  font-style: italic;\n  font-display: swap;\n}\n@font-face {\n  font-family: 'GTAmerica-Compressed';\n  src: url('/src/fonts/GTAmerica/Compressed/GT-America-Compressed-Ultra-Light.woff') format('woff'),\n\t\turl('/src/fonts/GTAmerica/Compressed/GT-America-Compressed-Ultra-Light.woff2') format('woff2'),local('GTAmerica-Compressed');\n  font-weight: 300;\n  font-style: normal;\n  font-display: swap;\n}\n@font-face {\n  font-family: 'GTAmerica-Condensed';\n  src: url('/src/fonts/GTAmerica/Condensed/GT-America-Condensed-Black-Italic.woff') format('woff'),\n\t\turl('/src/fonts/GTAmerica/Condensed/GT-America-Condensed-Black-Italic.woff2') format('woff2'),local('GTAmerica-Condensed');\n  font-weight: 900;\n  font-style: italic;\n  font-display: swap;\n}\n@font-face {\n  font-family: 'GTAmerica-Condensed';\n  src: url('/src/fonts/GTAmerica/Condensed/GT-America-Condensed-Black.woff') format('woff'),\n\t\turl('/src/fonts/GTAmerica/Condensed/GT-America-Condensed-Black.woff2') format('woff2'),local('GTAmerica-Condensed');\n  font-weight: 900;\n  font-style: normal;\n  font-display: swap;\n}\n@font-face {\n  font-family: 'GTAmerica-Condensed';\n  src: url('/src/fonts/GTAmerica/Condensed/GT-America-Condensed-Bold-Italic.woff') format('woff'),\n\t\turl('/src/fonts/GTAmerica/Condensed/GT-America-Condensed-Bold-Italic.woff2') format('woff2'),local('GTAmerica-Condensed');\n  font-weight: 700;\n  font-style: italic;\n  font-display: swap;\n}\n@font-face {\n  font-family: 'GTAmerica-Condensed';\n  src: url('/src/fonts/GTAmerica/Condensed/GT-America-Condensed-Bold.woff') format('woff'),\n\t\turl('/src/fonts/GTAmerica/Condensed/GT-America-Condensed-Bold.woff2') format('woff2'),local('GTAmerica-Condensed');\n  font-weight: 700;\n  font-style: normal;\n  font-display: swap;\n}\n@font-face {\n  font-family: 'GTAmerica-Condensed';\n  src: url('/src/fonts/GTAmerica/Condensed/GT-America-Condensed-Light-Italic.woff') format('woff'),\n\t\turl('/src/fonts/GTAmerica/Condensed/GT-America-Condensed-Light-Italic.woff2') format('woff2'),local('GTAmerica-Condensed');\n  font-weight: 300;\n  font-style: italic;\n  font-display: swap;\n}\n@font-face {\n  font-family: 'GTAmerica-Condensed';\n  src: url('/src/fonts/GTAmerica/Condensed/GT-America-Condensed-Light.woff') format('woff'),\n\t\turl('/src/fonts/GTAmerica/Condensed/GT-America-Condensed-Light.woff2') format('woff2'),local('GTAmerica-Condensed');\n  font-weight: 300;\n  font-style: normal;\n  font-display: swap;\n}\n@font-face {\n  font-family: 'GTAmerica-Condensed';\n  src: url('/src/fonts/GTAmerica/Condensed/GT-America-Condensed-Medium-Italic.woff') format('woff'),\n\t\turl('/src/fonts/GTAmerica/Condensed/GT-America-Condensed-Medium-Italic.woff2') format('woff2'),local('GTAmerica-Condensed');\n  font-weight: 500;\n  font-style: italic;\n  font-display: swap;\n}\n@font-face {\n  font-family: 'GTAmerica-Condensed';\n  src: url('/src/fonts/GTAmerica/Condensed/GT-America-Condensed-Medium.woff') format('woff'),\n\t\turl('/src/fonts/GTAmerica/Condensed/GT-America-Condensed-Medium.woff2') format('woff2'),local('GTAmerica-Condensed');\n  font-weight: 500;\n  font-style: normal;\n  font-display: swap;\n}\n@font-face {\n  font-family: 'GTAmerica-Condensed';\n  src: url('/src/fonts/GTAmerica/Condensed/GT-America-Condensed-Regular-Italic.woff') format('woff'),\n\t\turl('/src/fonts/GTAmerica/Condensed/GT-America-Condensed-Regular-Italic.woff2') format('woff2'),local('GTAmerica-Condensed');\n  font-weight: 400;\n  font-style: italic;\n  font-display: swap;\n}\n@font-face {\n  font-family: 'GTAmerica-Condensed';\n  src: url('/src/fonts/GTAmerica/Condensed/GT-America-Condensed-Regular.woff') format('woff'),\n\t\turl('/src/fonts/GTAmerica/Condensed/GT-America-Condensed-Regular.woff2') format('woff2'),local('GTAmerica-Condensed');\n  font-weight: 400;\n  font-style: normal;\n  font-display: swap;\n}\n@font-face {\n  font-family: 'GTAmerica-Condensed';\n  src: url('/src/fonts/GTAmerica/Condensed/GT-America-Condensed-Thin-Italic.woff') format('woff'),\n\t\turl('/src/fonts/GTAmerica/Condensed/GT-America-Condensed-Thin-Italic.woff2') format('woff2'),local('GTAmerica-Condensed');\n  font-weight: 100;\n  font-style: italic;\n  font-display: swap;\n}\n@font-face {\n  font-family: 'GTAmerica-Condensed';\n  src: url('/src/fonts/GTAmerica/Condensed/GT-America-Condensed-Thin.woff') format('woff'),\n\t\turl('/src/fonts/GTAmerica/Condensed/GT-America-Condensed-Thin.woff2') format('woff2'),local('GTAmerica-Condensed');\n  font-weight: 100;\n  font-style: normal;\n  font-display: swap;\n}\n@font-face {\n  font-family: 'GTAmerica-Condensed';\n  src: url('/src/fonts/GTAmerica/Condensed/GT-America-Condensed-Ultra-Light-Italic.woff') format('woff'),\n\t\turl('/src/fonts/GTAmerica/Condensed/GT-America-Condensed-Ultra-Light-Italic.woff2') format('woff2'),local('GTAmerica-Condensed');\n  font-weight: 300;\n  font-style: italic;\n  font-display: swap;\n}\n@font-face {\n  font-family: 'GTAmerica-Condensed';\n  src: url('/src/fonts/GTAmerica/Condensed/GT-America-Condensed-Ultra-Light.woff') format('woff'),\n\t\turl('/src/fonts/GTAmerica/Condensed/GT-America-Condensed-Ultra-Light.woff2') format('woff2'),local('GTAmerica-Condensed');\n  font-weight: 300;\n  font-style: normal;\n  font-display: swap;\n}\n@font-face {\n  font-family: 'GTAmerica-Mono';\n  src: url('/src/fonts/GTAmerica/Mono/GT-America-Mono-Black-Italic.woff') format('woff'),\n\t\turl('/src/fonts/GTAmerica/Mono/GT-America-Mono-Black-Italic.woff2') format('woff2'),local('GTAmerica-Mono');\n  font-weight: 900;\n  font-style: italic;\n  font-display: swap;\n}\n@font-face {\n  font-family: 'GTAmerica-Mono';\n  src: url('/src/fonts/GTAmerica/Mono/GT-America-Mono-Black.woff') format('woff'),\n\t\turl('/src/fonts/GTAmerica/Mono/GT-America-Mono-Black.woff2') format('woff2'),local('GTAmerica-Mono');\n  font-weight: 900;\n  font-style: normal;\n  font-display: swap;\n}\n@font-face {\n  font-family: 'GTAmerica-Mono';\n  src: url('/src/fonts/GTAmerica/Mono/GT-America-Mono-Bold-Italic.woff') format('woff'),\n\t\turl('/src/fonts/GTAmerica/Mono/GT-America-Mono-Bold-Italic.woff2') format('woff2'),local('GTAmerica-Mono');\n  font-weight: 700;\n  font-style: italic;\n  font-display: swap;\n}\n@font-face {\n  font-family: 'GTAmerica-Mono';\n  src: url('/src/fonts/GTAmerica/Mono/GT-America-Mono-Bold.woff') format('woff'),\n\t\turl('/src/fonts/GTAmerica/Mono/GT-America-Mono-Bold.woff2') format('woff2'),local('GTAmerica-Mono');\n  font-weight: 700;\n  font-style: normal;\n  font-display: swap;\n}\n@font-face {\n  font-family: 'GTAmerica-Mono';\n  src: url('/src/fonts/GTAmerica/Mono/GT-America-Mono-Light-Italic.woff') format('woff'),\n\t\turl('/src/fonts/GTAmerica/Mono/GT-America-Mono-Light-Italic.woff2') format('woff2'),local('GTAmerica-Mono');\n  font-weight: 300;\n  font-style: italic;\n  font-display: swap;\n}\n@font-face {\n  font-family: 'GTAmerica-Mono';\n  src: url('/src/fonts/GTAmerica/Mono/GT-America-Mono-Light.woff') format('woff'),\n\t\turl('/src/fonts/GTAmerica/Mono/GT-America-Mono-Light.woff2') format('woff2'),local('GTAmerica-Mono');\n  font-weight: 300;\n  font-style: normal;\n  font-display: swap;\n}\n@font-face {\n  font-family: 'GTAmerica-Mono';\n  src: url('/src/fonts/GTAmerica/Mono/GT-America-Mono-Medium-Italic.woff') format('woff'),\n\t\turl('/src/fonts/GTAmerica/Mono/GT-America-Mono-Medium-Italic.woff2') format('woff2'),local('GTAmerica-Mono');\n  font-weight: 500;\n  font-style: italic;\n  font-display: swap;\n}\n@font-face {\n  font-family: 'GTAmerica-Mono';\n  src: url('/src/fonts/GTAmerica/Mono/GT-America-Mono-Medium.woff') format('woff'),\n\t\turl('/src/fonts/GTAmerica/Mono/GT-America-Mono-Medium.woff2') format('woff2'),local('GTAmerica-Mono');\n  font-weight: 500;\n  font-style: normal;\n  font-display: swap;\n}\n@font-face {\n  font-family: 'GTAmerica-Mono';\n  src: url('/src/fonts/GTAmerica/Mono/GT-America-Mono-Regular-Italic.woff') format('woff'),\n\t\turl('/src/fonts/GTAmerica/Mono/GT-America-Mono-Regular-Italic.woff2') format('woff2'),local('GTAmerica-Mono');\n  font-weight: 400;\n  font-style: italic;\n  font-display: swap;\n}\n@font-face {\n  font-family: 'GTAmerica-Mono';\n  src: url('/src/fonts/GTAmerica/Mono/GT-America-Mono-Regular.woff') format('woff'),\n\t\turl('/src/fonts/GTAmerica/Mono/GT-America-Mono-Regular.woff2') format('woff2'),local('GTAmerica-Mono');\n  font-weight: 400;\n  font-style: normal;\n  font-display: swap;\n}\n@font-face {\n  font-family: 'GTAmerica-Mono';\n  src: url('/src/fonts/GTAmerica/Mono/GT-America-Mono-Thin-Italic.woff') format('woff'),\n\t\turl('/src/fonts/GTAmerica/Mono/GT-America-Mono-Thin-Italic.woff2') format('woff2'),local('GTAmerica-Mono');\n  font-weight: 100;\n  font-style: italic;\n  font-display: swap;\n}\n@font-face {\n  font-family: 'GTAmerica-Mono';\n  src: url('/src/fonts/GTAmerica/Mono/GT-America-Mono-Thin.woff') format('woff'),\n\t\turl('/src/fonts/GTAmerica/Mono/GT-America-Mono-Thin.woff2') format('woff2'),local('GTAmerica-Mono');\n  font-weight: 100;\n  font-style: normal;\n  font-display: swap;\n}\n@font-face {\n  font-family: 'GTAmerica-Mono';\n  src: url('/src/fonts/GTAmerica/Mono/GT-America-Mono-Ultra-Light-Italic.woff') format('woff'),\n\t\turl('/src/fonts/GTAmerica/Mono/GT-America-Mono-Ultra-Light-Italic.woff2') format('woff2'),local('GTAmerica-Mono');\n  font-weight: 300;\n  font-style: italic;\n  font-display: swap;\n}\n@font-face {\n  font-family: 'GTAmerica-Mono';\n  src: url('/src/fonts/GTAmerica/Mono/GT-America-Mono-Ultra-Light.woff') format('woff'),\n\t\turl('/src/fonts/GTAmerica/Mono/GT-America-Mono-Ultra-Light.woff2') format('woff2'),local('GTAmerica-Mono');\n  font-weight: 300;\n  font-style: normal;\n  font-display: swap;\n}\n"
__vite__updateStyle(__vite__id, __vite__css)
import.meta.hot.accept()
export default __vite__css
import.meta.hot.prune(()=>__vite__removeStyle(__vite__id))

And here is the app.pcss in comparison:

import {createHotContext as __vite__createHotContext} from "/@vite/client";
import.meta.hot = __vite__createHotContext("/src/css/app.pcss");
import {updateStyle as __vite__updateStyle, removeStyle as __vite__removeStyle} from "/@vite/client"
const __vite__id = "/var/www/html/src/css/app.pcss"
const __vite__css = "/*\n! tailwindcss v3.2.7 | MIT License | https://tailwindcss.com\n*//*\n1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)\n2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)\n*/\n\n*,\n::before,\n::after {\n  box-sizing: border-box; /* 1 */\n  border-width: 0; /* 2 */\n  border-style: solid; /* 2 */\n  border-color: currentColor; /* 2 */\n}\n\n::before,\n::after {\n  --tw-content: '';\n}\n\n/*\n1. Use a consistent sensible line-height in all browsers.\n2. Prevent adjustments of font size after orientation changes in iOS.\n3. Use a more readable tab size.\n4. Use the user's configured `sans` font-family by default.\n5. Use the user's configured `sans` font-feature-settings by default.\n*/\n\nhtml {\n  line-height: 1.5; /* 1 */\n  -webkit-text-size-adjust: 100%; /* 2 */\n  -moz-tab-size: 4; /* 3 */\n  -o-tab-size: 4;\n     tab-size: 4; /* 3 */\n  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\"; /* 4 */\n  font-feature-settings: normal; /* 5 */\n}\n\n/*\n1. Remove the margin in all browsers.\n2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.\n*/\n\nbody {\n  margin: 0; /* 1 */\n  line-height: inherit; /* 2 */\n}\n\n/*\n1. Add the correct height in Firefox.\n2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)\n3. Ensure horizontal rules are visible by default.\n*/\n\nhr {\n  height: 0; /* 1 */\n  color: inherit; /* 2 */\n  border-top-width: 1px; /* 3 */\n}\n\n/*\nAdd the correct text decoration in Chrome, Edge, and Safari.\n*/\n\nabbr:where([title]) {\n  -webkit-text-decoration: underline dotted;\n          text-decoration: underline dotted;\n}\n\n/*\nRemove the default font size and weight for headings.\n*/\n\nh1,\nh2,\nh3,\nh4,\nh5,\nh6 {\n  font-size: inherit;\n  font-weight: inherit;\n}\n\n/*\nReset links to optimize for opt-in styling instead of opt-out.\n*/\n\na {\n  color: inherit;\n  text-decoration: inherit;\n}\n\n/*\nAdd the correct font weight in Edge and Safari.\n*/\n\nb,\nstrong {\n  font-weight: bolder;\n}\n\n/*\n1. Use the user's configured `mono` font family by default.\n2. Correct the odd `em` font sizing in all browsers.\n*/\n\ncode,\nkbd,\nsamp,\npre {\n  font-family: \"GTAmerica-Mono\", sans-serif; /* 1 */\n  font-size: 1em; /* 2 */\n}\n\n/*\nAdd the correct font size in all browsers.\n*/\n\nsmall {\n  font-size: 80%;\n}\n\n/*\nPrevent `sub` and `sup` elements from affecting the line height in all browsers.\n*/\n\nsub,\nsup {\n  font-size: 75%;\n  line-height: 0;\n  position: relative;\n  vertical-align: baseline;\n}\n\nsub {\n  bottom: -0.25em;\n}\n\nsup {\n  top: -0.5em;\n}\n\n/*\n1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)\n2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)\n3. Remove gaps between table borders by default.\n*/\n\ntable {\n  text-indent: 0; /* 1 */\n  border-color: inherit; /* 2 */\n  border-collapse: collapse; /* 3 */\n}\n\n/*\n1. Change the font styles in all browsers.\n2. Remove the margin in Firefox and Safari.\n3. Remove default padding in all browsers.\n*/\n\nbutton,\ninput,\noptgroup,\nselect,\ntextarea {\n  font-family: inherit; /* 1 */\n  font-size: 100%; /* 1 */\n  font-weight: inherit; /* 1 */\n  line-height: inherit; /* 1 */\n  color: inherit; /* 1 */\n  margin: 0; /* 2 */\n  padding: 0; /* 3 */\n}\n\n/*\nRemove the inheritance of text transform in Edge and Firefox.\n*/\n\nbutton,\nselect {\n  text-transform: none;\n}\n\n/*\n1. Correct the inability to style clickable types in iOS and Safari.\n2. Remove default button styles.\n*/\n\nbutton,\n[type='button'],\n[type='reset'],\n[type='submit'] {\n  -webkit-appearance: button; /* 1 */\n  background-color: transparent; /* 2 */\n  background-image: none; /* 2 */\n}\n\n/*\nUse the modern Firefox focus style for all focusable elements.\n*/\n\n:-moz-focusring {\n  outline: auto;\n}\n\n/*\nRemove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)\n*/\n\n:-moz-ui-invalid {\n  box-shadow: none;\n}\n\n/*\nAdd the correct vertical alignment in Chrome and Firefox.\n*/\n\nprogress {\n  vertical-align: baseline;\n}\n\n/*\nCorrect the cursor style of increment and decrement buttons in Safari.\n*/\n\n::-webkit-inner-spin-button,\n::-webkit-outer-spin-button {\n  height: auto;\n}\n\n/*\n1. Correct the odd appearance in Chrome and Safari.\n2. Correct the outline style in Safari.\n*/\n\n[type='search'] {\n  -webkit-appearance: textfield; /* 1 */\n  outline-offset: -2px; /* 2 */\n}\n\n/*\nRemove the inner padding in Chrome and Safari on macOS.\n*/\n\n::-webkit-search-decoration {\n  -webkit-appearance: none;\n}\n\n/*\n1. Correct the inability to style clickable types in iOS and Safari.\n2. Change font properties to `inherit` in Safari.\n*/\n\n::-webkit-file-upload-button {\n  -webkit-appearance: button; /* 1 */\n  font: inherit; /* 2 */\n}\n\n/*\nAdd the correct display in Chrome and Safari.\n*/\n\nsummary {\n  display: list-item;\n}\n\n/*\nRemoves the default spacing and border for appropriate elements.\n*/\n\nblockquote,\ndl,\ndd,\nh1,\nh2,\nh3,\nh4,\nh5,\nh6,\nhr,\nfigure,\np,\npre {\n  margin: 0;\n}\n\nfieldset {\n  margin: 0;\n  padding: 0;\n}\n\nlegend {\n  padding: 0;\n}\n\nol,\nul,\nmenu {\n  list-style: none;\n  margin: 0;\n  padding: 0;\n}\n\n/*\nPrevent resizing textareas horizontally by default.\n*/\n\ntextarea {\n  resize: vertical;\n}\n\n/*\n1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)\n2. Set the default placeholder color to the user's configured gray 400 color.\n*/\n\ninput::-moz-placeholder, textarea::-moz-placeholder {\n  opacity: 1; /* 1 */\n  color: #9ca3af; /* 2 */\n}\n\ninput::placeholder,\ntextarea::placeholder {\n  opacity: 1; /* 1 */\n  color: #9ca3af; /* 2 */\n}\n\n/*\nSet the default cursor for buttons.\n*/\n\nbutton,\n[role=\"button\"] {\n  cursor: pointer;\n}\n\n/*\nMake sure disabled buttons don't get the pointer cursor.\n*/\n:disabled {\n  cursor: default;\n}\n\n/*\n1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)\n2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)\n   This can trigger a poorly considered lint error in some tools but is included by design.\n*/\n\nimg,\nsvg,\nvideo,\ncanvas,\naudio,\niframe,\nembed,\nobject {\n  display: block; /* 1 */\n  vertical-align: middle; /* 2 */\n}\n\n/*\nConstrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)\n*/\n\nimg,\nvideo {\n  max-width: 100%;\n  height: auto;\n}\n\n/* Make elements with the HTML hidden attribute stay hidden by default */\n[hidden] {\n  display: none;\n}\n\n[type='text'],[type='email'],[type='url'],[type='password'],[type='number'],[type='date'],[type='datetime-local'],[type='month'],[type='search'],[type='tel'],[type='time'],[type='week'],[multiple],textarea,select {\n  -webkit-appearance: none;\n     -moz-appearance: none;\n          appearance: none;\n  background-color: #fff;\n  border-color: #6b7280;\n  border-width: 1px;\n  border-radius: 0px;\n  padding-top: 0.5rem;\n  padding-right: 0.75rem;\n  padding-bottom: 0.5rem;\n  padding-left: 0.75rem;\n  font-size: 1rem;\n  line-height: 1.5rem;\n  --tw-shadow: 0 0 #0000;\n}\n\n[type='text']:focus, [type='email']:focus, [type='url']:focus, [type='password']:focus, [type='number']:focus, [type='date']:focus, [type='datetime-local']:focus, [type='month']:focus, [type='search']:focus, [type='tel']:focus, [type='time']:focus, [type='week']:focus, [multiple]:focus, textarea:focus, select:focus {\n  outline: 2px solid transparent;\n  outline-offset: 2px;\n  --tw-ring-inset: var(--tw-empty,/*!*/ /*!*/);\n  --tw-ring-offset-width: 0px;\n  --tw-ring-offset-color: #fff;\n  --tw-ring-color: #2563eb;\n  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);\n  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);\n  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n  border-color: #2563eb;\n}\n\ninput::-moz-placeholder, textarea::-moz-placeholder {\n  color: #6b7280;\n  opacity: 1;\n}\n\ninput::placeholder,textarea::placeholder {\n  color: #6b7280;\n  opacity: 1;\n}\n\n::-webkit-datetime-edit-fields-wrapper {\n  padding: 0;\n}\n\n::-webkit-date-and-time-value {\n  min-height: 1.5em;\n}\n\n::-webkit-datetime-edit,::-webkit-datetime-edit-year-field,::-webkit-datetime-edit-month-field,::-webkit-datetime-edit-day-field,::-webkit-datetime-edit-hour-field,::-webkit-datetime-edit-minute-field,::-webkit-datetime-edit-second-field,::-webkit-datetime-edit-millisecond-field,::-webkit-datetime-edit-meridiem-field {\n  padding-top: 0;\n  padding-bottom: 0;\n}\n\nselect {\n  background-image: url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e\");\n  background-position: right 0.5rem center;\n  background-repeat: no-repeat;\n  background-size: 1.5em 1.5em;\n  padding-right: 2.5rem;\n  -webkit-print-color-adjust: exact;\n          print-color-adjust: exact;\n}\n\n[multiple] {\n  background-image: initial;\n  background-position: initial;\n  background-repeat: unset;\n  background-size: initial;\n  padding-right: 0.75rem;\n  -webkit-print-color-adjust: unset;\n          print-color-adjust: unset;\n}\n\n[type='checkbox'],[type='radio'] {\n  -webkit-appearance: none;\n     -moz-appearance: none;\n          appearance: none;\n  padding: 0;\n  -webkit-print-color-adjust: exact;\n          print-color-adjust: exact;\n  display: inline-block;\n  vertical-align: middle;\n  background-origin: border-box;\n  -webkit-user-select: none;\n     -moz-user-select: none;\n          user-select: none;\n  flex-shrink: 0;\n  height: 1rem;\n  width: 1rem;\n  color: #2563eb;\n  background-color: #fff;\n  border-color: #6b7280;\n  border-width: 1px;\n  --tw-shadow: 0 0 #0000;\n}\n\n[type='checkbox'] {\n  border-radius: 0px;\n}\n\n[type='radio'] {\n  border-radius: 100%;\n}\n\n[type='checkbox']:focus,[type='radio']:focus {\n  outline: 2px solid transparent;\n  outline-offset: 2px;\n  --tw-ring-inset: var(--tw-empty,/*!*/ /*!*/);\n  --tw-ring-offset-width: 2px;\n  --tw-ring-offset-color: #fff;\n  --tw-ring-color: #2563eb;\n  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);\n  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);\n  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n}\n\n[type='checkbox']:checked,[type='radio']:checked {\n  border-color: transparent;\n  background-color: currentColor;\n  background-size: 100% 100%;\n  background-position: center;\n  background-repeat: no-repeat;\n}\n\n[type='checkbox']:checked {\n  background-image: url(\"data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e\");\n}\n\n[type='radio']:checked {\n  background-image: url(\"data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e\");\n}\n\n[type='checkbox']:checked:hover,[type='checkbox']:checked:focus,[type='radio']:checked:hover,[type='radio']:checked:focus {\n  border-color: transparent;\n  background-color: currentColor;\n}\n\n[type='checkbox']:indeterminate {\n  background-image: url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3e%3cpath stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 8h8'/%3e%3c/svg%3e\");\n  border-color: transparent;\n  background-color: currentColor;\n  background-size: 100% 100%;\n  background-position: center;\n  background-repeat: no-repeat;\n}\n\n[type='checkbox']:indeterminate:hover,[type='checkbox']:indeterminate:focus {\n  border-color: transparent;\n  background-color: currentColor;\n}\n\n[type='file'] {\n  background: unset;\n  border-color: inherit;\n  border-width: 0;\n  border-radius: 0;\n  padding: 0;\n  font-size: unset;\n  line-height: inherit;\n}\n\n[type='file']:focus {\n  outline: 1px solid ButtonText;\n  outline: 1px auto -webkit-focus-ring-color;\n}\n\n\tbody {\n  font-family: GTAmerica, \"Helvetica Neue\", Arial, sans-serif;\n}\n\n\t/*\n\t* Text styles\n\t*/\n\t.font-h1 {\n  font-family: \"GTAmerica-Condensed\", sans-serif;\n  font-size: 1.75rem;\n  font-weight: 100;\n  text-transform: uppercase;\n  font-style: italic;\n  line-height: 2rem;\n}\n\t@media (min-width: 640px) {\n\n  .font-h1 {\n    font-size: 2.5rem;\n    line-height: 1em;\n  }\n}\n\t@media (min-width: 768px) {\n\n  .font-h1 {\n    font-size: 3.5rem;\n  }\n}\n\t@media (min-width: 1280px) {\n\n  .font-h1 {\n    font-size: 5rem;\n  }\n}\n\n\t.font-h1-article {\n  font-family: GTAmerica, \"Helvetica Neue\", Arial, sans-serif;\n  font-size: 1.75rem;\n  font-weight: 900;\n  font-style: italic;\n  line-height: 2rem;\n  letter-spacing: 0.02em;\n}\n\n\t@media (min-width: 768px) {\n\n  .font-h1-article {\n    font-size: 2.5rem;\n    line-height: 3rem;\n  }\n}\n\n\t@media (min-width: 1280px) {\n\n  .font-h1-article {\n    font-size: 3.5rem;\n    line-height: 4rem;\n  }\n}\n\n\t.font-h2 {\n  font-family: GTAmerica, \"Helvetica Neue\", Arial, sans-serif;\n  font-size: 1.25rem;\n  font-weight: 700;\n  font-style: italic;\n  line-height: 1.5rem;\n  letter-spacing: 0.01em;\n}\n\n\t@media (min-width: 768px) {\n\n  .font-h2 {\n    font-size: 1.5rem;\n    line-height: 1.75rem;\n  }\n}\n\n\t@media (min-width: 1536px) {\n\n  .font-h2 {\n    font-size: 2rem;\n    line-height: 2.25rem;\n    letter-spacing: 0.02em;\n  }\n}\n\n\t.font-h3 {\n  font-family: \"GTAmerica-Compressed\", sans-serif;\n  font-size: 2rem;\n  font-weight: 900;\n  text-transform: uppercase;\n  font-style: italic;\n  line-height: 1em;\n}\n\n\t@media (min-width: 768px) {\n\n  .font-h3 {\n    font-size: 3.5rem;\n  }\n}\n\n\t@media (min-width: 1280px) {\n\n  .font-h3 {\n    font-size: 5rem;\n  }\n}\n\n\t.font-h4 {\n  font-family: \"GTAmerica-Condensed\", sans-serif;\n  font-size: 1.25rem;\n  font-weight: 500;\n  line-height: 1.75rem;\n}\n\n\t@media (min-width: 768px) {\n\n  .font-h4 {\n    font-size: 1.5rem;\n    line-height: 2.25rem;\n  }\n}\n\n\t@media (min-width: 1280px) {\n\n  .font-h4 {\n    font-size: 1.75rem;\n    line-height: 2.25rem;\n  }\n}\n\n\t.font-h5 {\n  font-family: \"GTAmerica-Condensed\", sans-serif;\n  font-size: 1.125rem;\n  font-weight: 700;\n  font-style: italic;\n  line-height: 1.5rem;\n  letter-spacing: 0.02em;\n}\n\n\t@media (min-width: 768px) {\n\n  .font-h5 {\n    font-size: 1.25rem;\n  }\n}\n\n\t.font-p {\n  font-family: GTAmerica, \"Helvetica Neue\", Arial, sans-serif;\n  font-size: 1rem;\n  font-weight: 300;\n  line-height: 1.375rem;\n  letter-spacing: 0.01em;\n}\n\n\t@media (min-width: 768px) {\n\n  .font-p {\n    font-size: 1.125rem;\n    line-height: 1.75rem;\n  }\n}\n\n\t@media (min-width: 1280px) {\n\n  .font-p {\n    font-size: 1.25rem;\n    line-height: 2rem;\n  }\n}\n\n\t.font-p-medium {\n  font-family: GTAmerica, \"Helvetica Neue\", Arial, sans-serif;\n  font-size: 1rem;\n  font-weight: 500;\n  line-height: 1.375rem;\n  letter-spacing: 0.01em;\n}\n\n\t@media (min-width: 768px) {\n\n  .font-p-medium {\n    font-size: 1.125rem;\n  }\n}\n\n\t@media (min-width: 1280px) {\n\n  .font-p-medium {\n    font-size: 1.25rem;\n    line-height: 2rem;\n  }\n}\n\n\t.font-p-medium-mono {\n  font-family: \"GTAmerica-Mono\", sans-serif;\n  font-size: 1rem;\n  font-weight: 500;\n  line-height: 1.375rem;\n  letter-spacing: 0.01em;\n}\n\n\t@media (min-width: 768px) {\n\n  .font-p-medium-mono {\n    font-size: 1.125rem;\n  }\n}\n\n\t@media (min-width: 1280px) {\n\n  .font-p-medium-mono {\n    font-size: 1.25rem;\n    line-height: 2rem;\n  }\n}\n\n\t.font-p-number {\n  font-family: \"Coanda\", sans-serif;\n  font-size: 1rem;\n  font-weight: 900;\n  line-height: 1.375rem;\n  letter-spacing: 0.02em;\n}\n\n\t@media (min-width: 768px) {\n\n  .font-p-number {\n    font-size: 1.125rem;\n    line-height: 1.25rem;\n  }\n}\n\n\t@media (min-width: 1280px) {\n\n  .font-p-number {\n    font-size: 1.25rem;\n  }\n}\n\n\t.font-number-big {\n  font-family: \"Coanda\", sans-serif;\n  font-size: 31.25vw;\n  font-weight: 900;\n  text-transform: uppercase;\n  --tw-numeric-spacing: tabular-nums;\n  font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);\n  line-height: 1em;\n}\n\n\t@media (min-width: 768px) {\n\n  .font-number-big {\n    font-size: 17vw;\n  }\n}\n\n\t@media (min-width: 1024px) {\n\n  .font-number-big {\n    font-size: 16vw;\n    letter-spacing: 0.02em;\n  }\n}\n\n\t.font-number-medium {\n  font-family: \"Coanda\", sans-serif;\n  font-size: 4rem;\n  font-weight: 900;\n  text-transform: uppercase;\n  --tw-numeric-spacing: tabular-nums;\n  font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);\n  line-height: 1em;\n  letter-spacing: 0.02em;\n}\n\n\t@media (min-width: 1024px) {\n\n  .font-number-medium {\n    font-size: 5rem;\n  }\n}\n\n\t.font-number-small {\n  font-family: \"Coanda\", sans-serif;\n  font-size: .75rem;\n  font-weight: 900;\n  text-transform: uppercase;\n  line-height: 1rem;\n  letter-spacing: 0.02em;\n}\n\n\t@media (min-width: 768px) {\n\n  .font-number-small {\n    font-size: .875rem;\n    line-height: 1rem;\n  }\n}\n\n\t@media (min-width: 1280px) {\n\n  .font-number-small {\n    font-size: 1rem;\n    line-height: 1.25rem;\n  }\n}\n\n\t.font-time {\n  font-family: \"Coanda\", sans-serif;\n  font-size: 1.5rem;\n  font-weight: 900;\n  text-transform: uppercase;\n  letter-spacing: 0.02em;\n}\n\n\t@media (min-width: 768px) {\n\n  .font-time {\n    font-size: 2rem;\n  }\n}\n\n\t@media (min-width: 1280px) {\n\n  .font-time {\n    font-size: 3rem;\n  }\n}\n\n\t.font-ingress {\n  font-family: GTAmerica, \"Helvetica Neue\", Arial, sans-serif;\n  font-size: 1.125rem;\n  font-weight: 400;\n  line-height: 1.5rem;\n  letter-spacing: 0.01em;\n}\n\n\t@media (min-width: 768px) {\n\n  .font-ingress {\n    font-size: 1.25rem;\n    line-height: 2rem;\n  }\n}\n\n\t@media (min-width: 1280px) {\n\n  .font-ingress {\n    font-size: 1.5rem;\n    line-height: 2.25rem;\n  }\n}\n\n\t.font-caption-text {\n  font-family: GTAmerica, \"Helvetica Neue\", Arial, sans-serif;\n  font-size: .75rem;\n  font-weight: 400;\n  line-height: 1rem;\n  letter-spacing: 0.01em;\n}\n\n\t@media (min-width: 768px) {\n\n  .font-caption-text {\n    font-size: .875rem;\n    line-height: 1rem;\n  }\n}\n\n\t@media (min-width: 1280px) {\n\n  .font-caption-text {\n    font-size: 1rem;\n    line-height: 1.25rem;\n  }\n}\n\n\t.font-label-text {\n  font-family: GTAmerica, \"Helvetica Neue\", Arial, sans-serif;\n  font-size: .75rem;\n  font-weight: 900;\n  font-style: italic;\n  line-height: 1rem;\n  letter-spacing: 0.01em;\n}\n\n\t.font-category-tags {\n  font-family: GTAmerica, \"Helvetica Neue\", Arial, sans-serif;\n  font-size: .75rem;\n  font-weight: 400;\n  text-transform: uppercase;\n  font-style: italic;\n  line-height: .875rem;\n  letter-spacing: 0.04em;\n}\n\n\t@media (min-width: 768px) {\n\n  .font-category-tags {\n    font-size: .875rem;\n    line-height: 1.25rem;\n  }\n}\n\n\t@media (min-width: 1280px) {\n\n  .font-category-tags {\n    font-size: 1rem;\n  }\n}\n\n\t.font-indicator-large {\n  font-family: \"GTAmerica-Compressed\", sans-serif;\n  font-size: 1.5rem;\n  font-weight: 100;\n  text-transform: uppercase;\n  font-style: italic;\n  line-height: 1.5rem;\n  letter-spacing: 0.04em;\n}\n\n\t@media (min-width: 768px) {\n\n  .font-indicator-large {\n    font-size: 2rem;\n    line-height: 2.5rem;\n  }\n}\n\n\t@media (min-width: 1280px) {\n\n  .font-indicator-large {\n    font-size: 3rem;\n    line-height: 3rem;\n  }\n}\n\n\t.font-indicator-black {\n  font-family: \"GTAmerica-Compressed\", sans-serif;\n  font-size: 1.125rem;\n  font-weight: 900;\n  text-transform: uppercase;\n  font-style: italic;\n  line-height: 2.25rem;\n  letter-spacing: 0.03em;\n}\n\n\t@media (min-width: 768px) {\n\n  .font-indicator-black {\n    font-size: 1.5rem;\n  }\n}\n\n\t@media (min-width: 1280px) {\n\n  .font-indicator-black {\n    font-size: 2rem;\n    line-height: 2.25rem;\n  }\n}\n\n\t.font-indicator-medium {\n  font-family: \"GTAmerica-Condensed\", sans-serif;\n  font-size: 1.25rem;\n  font-weight: 500;\n  font-style: italic;\n  line-height: 1.5rem;\n}\n\n\t@media (min-width: 768px) {\n\n  .font-indicator-medium {\n    font-size: 1.5rem;\n    line-height: 2.25rem;\n    letter-spacing: 0.02em;\n  }\n}\n\n\t@media (min-width: 1280px) {\n\n  .font-indicator-medium {\n    font-size: 2rem;\n  }\n}\n\n\t.font-indicator-light {\n  font-family: \"GTAmerica-Compressed\", sans-serif;\n  font-size: 1.125rem;\n  font-weight: 300;\n  text-transform: uppercase;\n  font-style: italic;\n  line-height: 1.5rem;\n  letter-spacing: 0.04em;\n}\n\n\t@media (min-width: 768px) {\n\n  .font-indicator-light {\n    font-size: 1.5rem;\n  }\n}\n\n\t@media (min-width: 1280px) {\n\n  .font-indicator-light {\n    font-size: 2rem;\n    line-height: 2.25rem;\n  }\n}\n\n\t.btn {\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  padding-left: 1.25rem;\n  padding-right: 1.25rem;\n  padding-top: 0.75rem;\n  padding-bottom: 0.75rem;\n  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n  transition-duration: 150ms;\n}\n\n\t.btn:disabled {\n  cursor: not-allowed;\n}\n\n\t\t.btn::before {\n\t\t\tcontent: '';\n\t\t\tposition: absolute;\n\t\t\ttop: 0px;\n\t\t\tright: 0px;\n\t\t\tbottom: 0px;\n\t\t\tleft: 0px;\n\t\t\t--tw-skew-x: -12deg;\n\t\t\ttransform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n\t\t\tborder-radius: 0.25rem;\n\t\t\tborder-width: 2px;\n\t\t\tborder-color: currentColor;\n\t\t\ttransition-property: color, background-color, border-color, text-decoration-color, fill, stroke;\n\t\t\ttransition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n\t\t\ttransition-duration: 150ms;\n\t\t}\n\n\t\t.btn svg:nth-child(2) {\n  position: relative;\n  margin-left: 0.5rem;\n  height: 1rem;\n  width: 1rem;\n  fill: currentColor;\n  transition-property: transform;\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n  transition-duration: 150ms;\n}\n\n\t\t.group:hover .btn svg:nth-child(2) {\n  --tw-translate-x: 0.5rem;\n  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n\n\t\t.btn-smal {\n  padding-top: 0.5rem;\n  padding-bottom: 0.5rem;\n}\n\n\t\t.btn-border {\n  --tw-text-opacity: 1;\n  color: rgb(148 126 82 / var(--tw-text-opacity));\n}\n\n\t\t.btn-border::before {\n  content: var(--tw-content);\n  --tw-border-opacity: 1;\n  border-color: rgb(148 126 82 / var(--tw-border-opacity));\n}\n\n\t\t.btn-border:hover {\n  --tw-text-opacity: 1;\n  color: rgb(250 250 250 / var(--tw-text-opacity));\n}\n\n\t\t.btn-border:hover::before {\n  content: var(--tw-content);\n  --tw-bg-opacity: 1;\n  background-color: rgb(148 126 82 / var(--tw-bg-opacity));\n}\n\n\t\t.btn-full {\n  --tw-text-opacity: 1;\n  color: rgb(250 250 250 / var(--tw-text-opacity));\n}\n\n\t\t.btn-full::before {\n  content: var(--tw-content);\n  --tw-bg-opacity: 1;\n  background-color: rgb(148 126 82 / var(--tw-bg-opacity));\n}\n\n\t\t.btn-full:hover {\n  --tw-text-opacity: 1;\n  color: rgb(148 126 82 / var(--tw-text-opacity));\n}\n\n\t\t.btn-full:hover::before {\n  --tw-border-opacity: 1;\n  border-color: rgb(148 126 82 / var(--tw-border-opacity));\n  content: var(--tw-content);\n  background-color: transparent;\n}\n\n\t\t.btn-slett {\n  --tw-text-opacity: 1;\n  color: rgb(250 250 250 / var(--tw-text-opacity));\n}\n\n\t\t.btn-slett::before {\n  content: var(--tw-content);\n  --tw-bg-opacity: 1;\n  background-color: rgb(189 39 49 / var(--tw-bg-opacity));\n}\n\n\t\t.btn-slett:hover {\n  --tw-text-opacity: 1;\n  color: rgb(189 39 49 / var(--tw-text-opacity));\n}\n\n\t\t.btn-slett:hover::before {\n  --tw-border-opacity: 1;\n  border-color: rgb(189 39 49 / var(--tw-border-opacity));\n  content: var(--tw-content);\n  background-color: transparent;\n}\n\n\t.tag {\n  font-family: GTAmerica, \"Helvetica Neue\", Arial, sans-serif;\n  font-size: .75rem;\n  font-weight: 400;\n  text-transform: uppercase;\n  font-style: italic;\n  line-height: .875rem;\n  letter-spacing: 0.04em;\n}\n\n\t@media (min-width: 768px) {\n\n  .tag {\n    font-size: .875rem;\n    line-height: 1.25rem;\n  }\n}\n\n\t@media (min-width: 1280px) {\n\n  .tag {\n    font-size: 1rem;\n  }\n}\n\n\t.tag {\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  padding-left: 1.25rem;\n  padding-right: 1.25rem;\n  padding-top: 0.75rem;\n  padding-bottom: 0.75rem;\n  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n  transition-duration: 150ms;\n}\n\n\t.tag:disabled {\n  cursor: not-allowed;\n}\n\n\t.tag::before {\n\t\t\tcontent: '';\n\t\t\tposition: absolute;\n\t\t\ttop: 0px;\n\t\t\tright: 0px;\n\t\t\tbottom: 0px;\n\t\t\tleft: 0px;\n\t\t\t--tw-skew-x: -12deg;\n\t\t\ttransform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n\t\t\tborder-radius: 0.25rem;\n\t\t\tborder-width: 2px;\n\t\t\tborder-color: currentColor;\n\t\t\ttransition-property: color, background-color, border-color, text-decoration-color, fill, stroke;\n\t\t\ttransition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n\t\t\ttransition-duration: 150ms;\n\t\t}\n\n\t.tag svg:nth-child(2) {\n  position: relative;\n  margin-left: 0.5rem;\n  height: 1rem;\n  width: 1rem;\n  fill: currentColor;\n  transition-property: transform;\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n  transition-duration: 150ms;\n}\n\n\t.group:hover .tag svg:nth-child(2) {\n  --tw-translate-x: 0.5rem;\n  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n\n\t.tag {\n  margin-left: 0.75rem;\n  margin-right: 0.75rem;\n  margin-top: 0.5rem;\n  margin-bottom: 0.5rem;\n  display: flex;\n  cursor: pointer;\n  --tw-text-opacity: 1;\n  color: rgb(133 110 65 / var(--tw-text-opacity));\n  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n  transition-duration: 150ms;\n}\n\n\t.tag::before {\n  border-width: 0px;\n  content: var(--tw-content);\n  --tw-bg-opacity: 1;\n  background-color: rgb(236 231 222 / var(--tw-bg-opacity));\n}\n\n\t\t.tag > span {\n  position: relative;\n}\n\n\t\t\t.tag > span:nth-of-type(2) {\n  font-family: \"Coanda\", sans-serif;\n  font-size: .75rem;\n  font-weight: 900;\n  text-transform: uppercase;\n  line-height: 1rem;\n  letter-spacing: 0.02em;\n}\n\n\t\t\t@media (min-width: 768px) {\n\n  .tag > span:nth-of-type(2) {\n    font-size: .875rem;\n    line-height: 1rem;\n  }\n}\n\n\t\t\t@media (min-width: 1280px) {\n\n  .tag > span:nth-of-type(2) {\n    font-size: 1rem;\n    line-height: 1.25rem;\n  }\n}\n\n\t\t\t.tag > span:nth-of-type(2) {\n  margin-left: 0.5rem;\n}\n\n\t\t\t@media (min-width: 768px) {\n\n  .tag > span:nth-of-type(2) {\n    padding-top: 0.125rem;\n  }\n}\n\n\t\t.tag.active {\n  --tw-text-opacity: 1;\n  color: rgb(250 250 250 / var(--tw-text-opacity));\n}\n\n\t\t.tag.active::before {\n  content: var(--tw-content);\n  --tw-bg-opacity: 1;\n  background-color: rgb(148 126 82 / var(--tw-bg-opacity));\n}\n\n\t\t.tag.active:hover::before {\n  content: var(--tw-content);\n  --tw-bg-opacity: 1;\n  background-color: rgb(148 126 82 / var(--tw-bg-opacity));\n}\n\n\t.css--animate-line {\n\t\tbackground: linear-gradient(0deg, #dadada, #dadada) left 100% no-repeat;\n\t\tbackground-size: 100% 2px;\n\t\tposition: relative;\n\t\twhite-space: nowrap;\n\t\ttext-decoration-line: none;\n\t}\n\n\t\t.css--animate-line:hover::after {\n\t\t\tbackground-size: 100% 2px;\n\t\t}\n\n\t\t.css--animate-line::after {\n\t\t\tbackground: linear-gradient(0deg, #856e41, #856e41) left 100% no-repeat;\n\t\t\tbackground-size: 0 2px;\n\t\t\ttransition: 0.3s;\n\t\t\tcontent: '';\n\t\t\tposition: absolute;\n\t\t\ttop: 0px;\n\t\t\tright: 0px;\n\t\t\tbottom: 0px;\n\t\t\tleft: 0px;\n\t\t}\n\n\t.css--animate-line-fill {\n\t\tbackground: linear-gradient(0deg, #d7cbb4, #d7cbb4) left 100% no-repeat;\n\t\tbackground-size: 100% 2px;\n\t\ttransition: 0.3s;\n\t\tposition: relative;\n\t\twhite-space: nowrap;\n\t\ttext-decoration-line: none;\n\t}\n\n\t\t.css--animate-line-fill:hover {\n\t\t\tbackground-size: 100% 100%;\n\t\t}\n\n\t.css--animate-line-simple {\n\t\tbackground: linear-gradient(0deg, currentColor, currentColor) left 100% no-repeat;\n\t\tbackground-size: 0 1px;\n\t\ttransition: 0.3s;\n\t\ttext-decoration-line: none;\n\t}\n\n\t\t.css--animate-line-simple:hover {\n\t\t\tbackground-size: 100% 1px;\n\t\t}\n\n\t.css--animate-line-simple-big {\n\t\tbackground: linear-gradient(0deg, currentColor, currentColor) left 100% no-repeat;\n\t\tbackground-size: 0 2px;\n\t\ttransition: 0.3s;\n\t\ttext-decoration-line: none;\n\t}\n\n\t\t.css--animate-line-simple-big:hover {\n\t\t\tbackground-size: 100% 2px;\n\t\t}\n\n\t.error {\n  border-radius: 0.25rem;\n  border-width: 1px;\n  --tw-border-opacity: 1;\n  border-color: rgb(189 39 49 / var(--tw-border-opacity));\n  padding: 0.5rem;\n  --tw-text-opacity: 1;\n  color: rgb(189 39 49 / var(--tw-text-opacity));\n}\n\n\tnav a {\n  text-decoration-line: underline;\n}\n\n\t\tnav a.active {\n  pointer-events: none;\n  border-radius: 0.25rem;\n  --tw-bg-opacity: 1;\n  background-color: rgb(250 250 250 / var(--tw-bg-opacity));\n  padding-left: 0.5rem;\n  padding-right: 0.5rem;\n  text-decoration-line: none;\n}\n\n\t.virtuell-input {\n  position: relative;\n  display: block;\n  width: 100%;\n  border-radius: 0.25rem;\n  border-width: 0px;\n  padding-top: 0.5rem;\n  padding-bottom: 0.5rem;\n  --tw-text-opacity: 1;\n  color: rgb(148 126 82 / var(--tw-text-opacity));\n  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);\n  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);\n  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);\n  --tw-ring-inset: inset;\n  --tw-ring-opacity: 1;\n  --tw-ring-color: rgb(148 126 82 / var(--tw-ring-opacity));\n}\n\n\t.virtuell-input::-moz-placeholder {\n  --tw-text-opacity: 1;\n  color: rgb(215 203 180 / var(--tw-text-opacity));\n}\n\n\t.virtuell-input::placeholder {\n  --tw-text-opacity: 1;\n  color: rgb(215 203 180 / var(--tw-text-opacity));\n}\n\n\t.virtuell-input:focus {\n  z-index: 10;\n  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);\n  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);\n  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);\n  --tw-ring-inset: inset;\n  --tw-ring-opacity: 1;\n  --tw-ring-color: rgb(99 82 48 / var(--tw-ring-opacity));\n}\n\n\t@media (min-width: 640px) {\n\n  .virtuell-input {\n    line-height: 1.5rem;\n  }\n}\n\n*, ::before, ::after {\n  --tw-border-spacing-x: 0;\n  --tw-border-spacing-y: 0;\n  --tw-translate-x: 0;\n  --tw-translate-y: 0;\n  --tw-rotate: 0;\n  --tw-skew-x: 0;\n  --tw-skew-y: 0;\n  --tw-scale-x: 1;\n  --tw-scale-y: 1;\n  --tw-pan-x:  ;\n  --tw-pan-y:  ;\n  --tw-pinch-zoom:  ;\n  --tw-scroll-snap-strictness: proximity;\n  --tw-ordinal:  ;\n  --tw-slashed-zero:  ;\n  --tw-numeric-figure:  ;\n  --tw-numeric-spacing:  ;\n  --tw-numeric-fraction:  ;\n  --tw-ring-inset:  ;\n  --tw-ring-offset-width: 0px;\n  --tw-ring-offset-color: #fff;\n  --tw-ring-color: rgb(59 130 246 / 0.5);\n  --tw-ring-offset-shadow: 0 0 #0000;\n  --tw-ring-shadow: 0 0 #0000;\n  --tw-shadow: 0 0 #0000;\n  --tw-shadow-colored: 0 0 #0000;\n  --tw-blur:  ;\n  --tw-brightness:  ;\n  --tw-contrast:  ;\n  --tw-grayscale:  ;\n  --tw-hue-rotate:  ;\n  --tw-invert:  ;\n  --tw-saturate:  ;\n  --tw-sepia:  ;\n  --tw-drop-shadow:  ;\n  --tw-backdrop-blur:  ;\n  --tw-backdrop-brightness:  ;\n  --tw-backdrop-contrast:  ;\n  --tw-backdrop-grayscale:  ;\n  --tw-backdrop-hue-rotate:  ;\n  --tw-backdrop-invert:  ;\n  --tw-backdrop-opacity:  ;\n  --tw-backdrop-saturate:  ;\n  --tw-backdrop-sepia:  ;\n}\n\n::backdrop {\n  --tw-border-spacing-x: 0;\n  --tw-border-spacing-y: 0;\n  --tw-translate-x: 0;\n  --tw-translate-y: 0;\n  --tw-rotate: 0;\n  --tw-skew-x: 0;\n  --tw-skew-y: 0;\n  --tw-scale-x: 1;\n  --tw-scale-y: 1;\n  --tw-pan-x:  ;\n  --tw-pan-y:  ;\n  --tw-pinch-zoom:  ;\n  --tw-scroll-snap-strictness: proximity;\n  --tw-ordinal:  ;\n  --tw-slashed-zero:  ;\n  --tw-numeric-figure:  ;\n  --tw-numeric-spacing:  ;\n  --tw-numeric-fraction:  ;\n  --tw-ring-inset:  ;\n  --tw-ring-offset-width: 0px;\n  --tw-ring-offset-color: #fff;\n  --tw-ring-color: rgb(59 130 246 / 0.5);\n  --tw-ring-offset-shadow: 0 0 #0000;\n  --tw-ring-shadow: 0 0 #0000;\n  --tw-shadow: 0 0 #0000;\n  --tw-shadow-colored: 0 0 #0000;\n  --tw-blur:  ;\n  --tw-brightness:  ;\n  --tw-contrast:  ;\n  --tw-grayscale:  ;\n  --tw-hue-rotate:  ;\n  --tw-invert:  ;\n  --tw-saturate:  ;\n  --tw-sepia:  ;\n  --tw-drop-shadow:  ;\n  --tw-backdrop-blur:  ;\n  --tw-backdrop-brightness:  ;\n  --tw-backdrop-contrast:  ;\n  --tw-backdrop-grayscale:  ;\n  --tw-backdrop-hue-rotate:  ;\n  --tw-backdrop-invert:  ;\n  --tw-backdrop-opacity:  ;\n  --tw-backdrop-saturate:  ;\n  --tw-backdrop-sepia:  ;\n}\n.container {\n  width: 100%;\n}\n@media (min-width: 640px) {\n\n  .container {\n    max-width: 640px;\n  }\n}\n@media (min-width: 768px) {\n\n  .container {\n    max-width: 768px;\n  }\n}\n@media (min-width: 1024px) {\n\n  .container {\n    max-width: 1024px;\n  }\n}\n@media (min-width: 1280px) {\n\n  .container {\n    max-width: 1280px;\n  }\n}\n@media (min-width: 1536px) {\n\n  .container {\n    max-width: 1536px;\n  }\n}\n.form-input,.form-textarea,.form-select,.form-multiselect {\n  -webkit-appearance: none;\n     -moz-appearance: none;\n          appearance: none;\n  background-color: #fff;\n  border-color: #6b7280;\n  border-width: 1px;\n  border-radius: 0px;\n  padding-top: 0.5rem;\n  padding-right: 0.75rem;\n  padding-bottom: 0.5rem;\n  padding-left: 0.75rem;\n  font-size: 1rem;\n  line-height: 1.5rem;\n  --tw-shadow: 0 0 #0000;\n}\n.form-input:focus, .form-textarea:focus, .form-select:focus, .form-multiselect:focus {\n  outline: 2px solid transparent;\n  outline-offset: 2px;\n  --tw-ring-inset: var(--tw-empty,/*!*/ /*!*/);\n  --tw-ring-offset-width: 0px;\n  --tw-ring-offset-color: #fff;\n  --tw-ring-color: #2563eb;\n  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);\n  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);\n  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n  border-color: #2563eb;\n}\n.form-input::-moz-placeholder, .form-textarea::-moz-placeholder {\n  color: #6b7280;\n  opacity: 1;\n}\n.form-input::placeholder,.form-textarea::placeholder {\n  color: #6b7280;\n  opacity: 1;\n}\n.form-input::-webkit-datetime-edit-fields-wrapper {\n  padding: 0;\n}\n.form-input::-webkit-date-and-time-value {\n  min-height: 1.5em;\n}\n.form-input::-webkit-datetime-edit,.form-input::-webkit-datetime-edit-year-field,.form-input::-webkit-datetime-edit-month-field,.form-input::-webkit-datetime-edit-day-field,.form-input::-webkit-datetime-edit-hour-field,.form-input::-webkit-datetime-edit-minute-field,.form-input::-webkit-datetime-edit-second-field,.form-input::-webkit-datetime-edit-millisecond-field,.form-input::-webkit-datetime-edit-meridiem-field {\n  padding-top: 0;\n  padding-bottom: 0;\n}\n.sr-only {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  white-space: nowrap;\n  border-width: 0;\n}\n.pointer-events-none {\n  pointer-events: none;\n}\n.collapse {\n  visibility: collapse;\n}\n.fixed {\n  position: fixed;\n}\n.absolute {\n  position: absolute;\n}\n.relative {\n  position: relative;\n}\n.sticky {\n  position: sticky;\n}\n.inset-0 {\n  top: 0px;\n  right: 0px;\n  bottom: 0px;\n  left: 0px;\n}\n.-inset-y-4 {\n  top: -1rem;\n  bottom: -1rem;\n}\n.inset-x-0 {\n  left: 0px;\n  right: 0px;\n}\n.inset-x-4 {\n  left: 1rem;\n  right: 1rem;\n}\n.-left-2 {\n  left: -0.5rem;\n}\n.-right-3 {\n  right: -0.75rem;\n}\n.-top-2 {\n  top: -0.5rem;\n}\n.bottom-0 {\n  bottom: 0px;\n}\n.bottom-0\\.5 {\n  bottom: 0.125rem;\n}\n.bottom-10 {\n  bottom: 2.5rem;\n}\n.bottom-2 {\n  bottom: 0.5rem;\n}\n.bottom-40 {\n  bottom: 10rem;\n}\n.bottom-5 {\n  bottom: 1.25rem;\n}\n.bottom-6 {\n  bottom: 1.5rem;\n}\n.bottom-7 {\n  bottom: 1.75rem;\n}\n.bottom-full {\n  bottom: 100%;\n}\n.left-0 {\n  left: 0px;\n}\n.left-0\\.5 {\n  left: 0.125rem;\n}\n.left-1\\/2 {\n  left: 50%;\n}\n.left-10 {\n  left: 2.5rem;\n}\n.left-2 {\n  left: 0.5rem;\n}\n.left-20 {\n  left: 5rem;\n}\n.left-4 {\n  left: 1rem;\n}\n.left-5 {\n  left: 1.25rem;\n}\n.left-full {\n  left: 100%;\n}\n.right-0 {\n  right: 0px;\n}\n.right-1\\/4 {\n  right: 25%;\n}\n.right-10 {\n  right: 2.5rem;\n}\n.right-2 {\n  right: 0.5rem;\n}\n.right-3 {\n  right: 0.75rem;\n}\n.right-4 {\n  right: 1rem;\n}\n.right-5 {\n  right: 1.25rem;\n}\n.right-full {\n  right: 100%;\n}\n.top-0 {\n  top: 0px;\n}\n.top-0\\.5 {\n  top: 0.125rem;\n}\n.top-1\\/2 {\n  top: 50%;\n}\n.top-10 {\n  top: 2.5rem;\n}\n.top-2 {\n  top: 0.5rem;\n}\n.top-3 {\n  top: 0.75rem;\n}\n.top-4 {\n  top: 1rem;\n}\n.top-40 {\n  top: 10rem;\n}\n.top-5 {\n  top: 1.25rem;\n}\n.top-\\[5vh\\] {\n  top: 5vh;\n}\n.top-full {\n  top: 100%;\n}\n.z-10 {\n  z-index: 10;\n}\n.z-20 {\n  z-index: 20;\n}\n.z-30 {\n  z-index: 30;\n}\n.z-40 {\n  z-index: 40;\n}\n.z-50 {\n  z-index: 50;\n}\n.z-\\[100\\] {\n  z-index: 100;\n}\n.z-n1 {\n  z-index: -1;\n}\n.order-last {\n  order: 9999;\n}\n.m-2 {\n  margin: 0.5rem;\n}\n.m-auto {\n  margin: auto;\n}\n.-mx-1 {\n  margin-left: -0.25rem;\n  margin-right: -0.25rem;\n}\n.-mx-2 {\n  margin-left: -0.5rem;\n  margin-right: -0.5rem;\n}\n.-mx-4 {\n  margin-left: -1rem;\n  margin-right: -1rem;\n}\n.-mx-6 {\n  margin-left: -1.5rem;\n  margin-right: -1.5rem;\n}\n.-mx-px {\n  margin-left: -1px;\n  margin-right: -1px;\n}\n.mx-0 {\n  margin-left: 0px;\n  margin-right: 0px;\n}\n.mx-0\\.5 {\n  margin-left: 0.125rem;\n  margin-right: 0.125rem;\n}\n.mx-1 {\n  margin-left: 0.25rem;\n  margin-right: 0.25rem;\n}\n.mx-2 {\n  margin-left: 0.5rem;\n  margin-right: 0.5rem;\n}\n.mx-4 {\n  margin-left: 1rem;\n  margin-right: 1rem;\n}\n.mx-6 {\n  margin-left: 1.5rem;\n  margin-right: 1.5rem;\n}\n.mx-auto {\n  margin-left: auto;\n  margin-right: auto;\n}\n.my-0 {\n  margin-top: 0px;\n  margin-bottom: 0px;\n}\n.my-1 {\n  margin-top: 0.25rem;\n  margin-bottom: 0.25rem;\n}\n.my-1\\.5 {\n  margin-top: 0.375rem;\n  margin-bottom: 0.375rem;\n}\n.my-10 {\n  margin-top: 2.5rem;\n  margin-bottom: 2.5rem;\n}\n.my-12 {\n  margin-top: 3rem;\n  margin-bottom: 3rem;\n}\n.my-14 {\n  margin-top: 3.5rem;\n  margin-bottom: 3.5rem;\n}\n.my-16 {\n  margin-top: 4rem;\n  margin-bottom: 4rem;\n}\n.my-2 {\n  margin-top: 0.5rem;\n  margin-bottom: 0.5rem;\n}\n.my-20 {\n  margin-top: 5rem;\n  margin-bottom: 5rem;\n}\n.my-3 {\n  margin-top: 0.75rem;\n  margin-bottom: 0.75rem;\n}\n.my-4 {\n  margin-top: 1rem;\n  margin-bottom: 1rem;\n}\n.my-6 {\n  margin-top: 1.5rem;\n  margin-bottom: 1.5rem;\n}\n.my-7 {\n  margin-top: 1.75rem;\n  margin-bottom: 1.75rem;\n}\n.my-8 {\n  margin-top: 2rem;\n  margin-bottom: 2rem;\n}\n.my-\\[2px\\] {\n  margin-top: 2px;\n  margin-bottom: 2px;\n}\n.-mb-2 {\n  margin-bottom: -0.5rem;\n}\n.-mb-3 {\n  margin-bottom: -0.75rem;\n}\n.-mb-6 {\n  margin-bottom: -1.5rem;\n}\n.-ml-1\\/2 {\n  margin-left: -50%;\n}\n.-ml-px {\n  margin-left: -1px;\n}\n.-mr-4 {\n  margin-right: -1rem;\n}\n.-mt-0 {\n  margin-top: -0px;\n}\n.-mt-0\\.5 {\n  margin-top: -0.125rem;\n}\n.-mt-3 {\n  margin-top: -0.75rem;\n}\n.mb-1 {\n  margin-bottom: 0.25rem;\n}\n.mb-10 {\n  margin-bottom: 2.5rem;\n}\n.mb-11 {\n  margin-bottom: 2.75rem;\n}\n.mb-2 {\n  margin-bottom: 0.5rem;\n}\n.mb-3 {\n  margin-bottom: 0.75rem;\n}\n.mb-4 {\n  margin-bottom: 1rem;\n}\n.mb-5 {\n  margin-bottom: 1.25rem;\n}\n.mb-6 {\n  margin-bottom: 1.5rem;\n}\n.mb-8 {\n  margin-bottom: 2rem;\n}\n.ml-0 {\n  margin-left: 0px;\n}\n.ml-0\\.5 {\n  margin-left: 0.125rem;\n}\n.ml-1 {\n  margin-left: 0.25rem;\n}\n.ml-1\\.5 {\n  margin-left: 0.375rem;\n}\n.ml-2 {\n  margin-left: 0.5rem;\n}\n.ml-4 {\n  margin-left: 1rem;\n}\n.ml-8 {\n  margin-left: 2rem;\n}\n.ml-auto {\n  margin-left: auto;\n}\n.mr-0 {\n  margin-right: 0px;\n}\n.mr-1 {\n  margin-right: 0.25rem;\n}\n.mr-1\\.5 {\n  margin-right: 0.375rem;\n}\n.mr-1\\/12 {\n  margin-right: 8.333333333%;\n}\n.mr-2 {\n  margin-right: 0.5rem;\n}\n.mr-3 {\n  margin-right: 0.75rem;\n}\n.mr-4 {\n  margin-right: 1rem;\n}\n.mr-6 {\n  margin-right: 1.5rem;\n}\n.mr-auto {\n  margin-right: auto;\n}\n.mt-1 {\n  margin-top: 0.25rem;\n}\n.mt-10 {\n  margin-top: 2.5rem;\n}\n.mt-11 {\n  margin-top: 2.75rem;\n}\n.mt-12 {\n  margin-top: 3rem;\n}\n.mt-14 {\n  margin-top: 3.5rem;\n}\n.mt-2 {\n  margin-top: 0.5rem;\n}\n.mt-28 {\n  margin-top: 7rem;\n}\n.mt-3 {\n  margin-top: 0.75rem;\n}\n.mt-4 {\n  margin-top: 1rem;\n}\n.mt-6 {\n  margin-top: 1.5rem;\n}\n.mt-7 {\n  margin-top: 1.75rem;\n}\n.mt-8 {\n  margin-top: 2rem;\n}\n.block {\n  display: block;\n}\n.inline {\n  display: inline;\n}\n.flex {\n  display: flex;\n}\n.inline-flex {\n  display: inline-flex;\n}\n.table {\n  display: table;\n}\n.table-cell {\n  display: table-cell;\n}\n.grid {\n  display: grid;\n}\n.hidden {\n  display: none;\n}\n.aspect-video {\n  aspect-ratio: 16 / 9;\n}\n.h-12 {\n  height: 3rem;\n}\n.h-16 {\n  height: 4rem;\n}\n.h-20 {\n  height: 5rem;\n}\n.h-3 {\n  height: 0.75rem;\n}\n.h-32 {\n  height: 8rem;\n}\n.h-4 {\n  height: 1rem;\n}\n.h-40 {\n  height: 10rem;\n}\n.h-5 {\n  height: 1.25rem;\n}\n.h-6 {\n  height: 1.5rem;\n}\n.h-7 {\n  height: 1.75rem;\n}\n.h-8 {\n  height: 2rem;\n}\n.h-\\[17vw\\] {\n  height: 17vw;\n}\n.h-\\[500px\\] {\n  height: 500px;\n}\n.h-\\[50vw\\] {\n  height: 50vw;\n}\n.h-\\[80vh\\] {\n  height: 80vh;\n}\n.h-\\[95vh\\] {\n  height: 95vh;\n}\n.h-auto {\n  height: auto;\n}\n.h-full {\n  height: 100%;\n}\n.h-screen {\n  height: 100vh;\n}\n.max-h-14 {\n  max-height: 3.5rem;\n}\n.max-h-20 {\n  max-height: 5rem;\n}\n.max-h-full {\n  max-height: 100%;\n}\n.min-h-\\[100px\\] {\n  min-height: 100px;\n}\n.min-h-full {\n  min-height: 100%;\n}\n.w-1 {\n  width: 0.25rem;\n}\n.w-1\\/12 {\n  width: 8.333333%;\n}\n.w-1\\/2 {\n  width: 50%;\n}\n.w-1\\/3 {\n  width: 33.333333%;\n}\n.w-10 {\n  width: 2.5rem;\n}\n.w-11\\/12 {\n  width: 91.666667%;\n}\n.w-12 {\n  width: 3rem;\n}\n.w-2\\/12 {\n  width: 16.666667%;\n}\n.w-2\\/3 {\n  width: 66.666667%;\n}\n.w-2\\/5 {\n  width: 40%;\n}\n.w-20 {\n  width: 5rem;\n}\n.w-24 {\n  width: 6rem;\n}\n.w-28 {\n  width: 7rem;\n}\n.w-3 {\n  width: 0.75rem;\n}\n.w-3\\/12 {\n  width: 25%;\n}\n.w-3\\/4 {\n  width: 75%;\n}\n.w-3\\/5 {\n  width: 60%;\n}\n.w-4 {\n  width: 1rem;\n}\n.w-4\\/12 {\n  width: 33.333333%;\n}\n.w-40 {\n  width: 10rem;\n}\n.w-5 {\n  width: 1.25rem;\n}\n.w-5\\/12 {\n  width: 41.666667%;\n}\n.w-6 {\n  width: 1.5rem;\n}\n.w-7 {\n  width: 1.75rem;\n}\n.w-7\\/12 {\n  width: 58.333333%;\n}\n.w-8 {\n  width: 2rem;\n}\n.w-\\[10\\%\\] {\n  width: 10%;\n}\n.w-\\[100\\%\\] {\n  width: 100%;\n}\n.w-\\[15\\%\\] {\n  width: 15%;\n}\n.w-\\[20\\%\\] {\n  width: 20%;\n}\n.w-\\[200\\%\\] {\n  width: 200%;\n}\n.w-\\[200px\\] {\n  width: 200px;\n}\n.w-\\[25\\%\\] {\n  width: 25%;\n}\n.w-\\[30\\%\\] {\n  width: 30%;\n}\n.w-\\[35\\%\\] {\n  width: 35%;\n}\n.w-\\[40\\%\\] {\n  width: 40%;\n}\n.w-\\[400\\%\\] {\n  width: 400%;\n}\n.w-\\[45\\%\\] {\n  width: 45%;\n}\n.w-\\[5\\%\\] {\n  width: 5%;\n}\n.w-\\[50\\%\\] {\n  width: 50%;\n}\n.w-\\[55\\%\\] {\n  width: 55%;\n}\n.w-\\[60\\%\\] {\n  width: 60%;\n}\n.w-\\[600\\%\\] {\n  width: 600%;\n}\n.w-\\[65\\%\\] {\n  width: 65%;\n}\n.w-\\[70\\%\\] {\n  width: 70%;\n}\n.w-\\[70px\\] {\n  width: 70px;\n}\n.w-\\[75\\%\\] {\n  width: 75%;\n}\n.w-\\[80\\%\\] {\n  width: 80%;\n}\n.w-\\[80vw\\] {\n  width: 80vw;\n}\n.w-\\[85\\%\\] {\n  width: 85%;\n}\n.w-\\[90\\%\\] {\n  width: 90%;\n}\n.w-\\[90vw\\] {\n  width: 90vw;\n}\n.w-\\[93px\\] {\n  width: 93px;\n}\n.w-\\[95\\%\\] {\n  width: 95%;\n}\n.w-auto {\n  width: auto;\n}\n.w-full {\n  width: 100%;\n}\n.min-w-full {\n  min-width: 100%;\n}\n.max-w-5xl {\n  max-width: 64rem;\n}\n.max-w-\\[1000px\\] {\n  max-width: 1000px;\n}\n.max-w-\\[340px\\] {\n  max-width: 340px;\n}\n.max-w-\\[400px\\] {\n  max-width: 400px;\n}\n.max-w-\\[90px\\] {\n  max-width: 90px;\n}\n.max-w-md {\n  max-width: 28rem;\n}\n.flex-1 {\n  flex: 1 1 0%;\n}\n.flex-shrink-0 {\n  flex-shrink: 0;\n}\n.flex-grow {\n  flex-grow: 1;\n}\n.border-collapse {\n  border-collapse: collapse;\n}\n.origin-bottom-left {\n  transform-origin: bottom left;\n}\n.origin-top-left {\n  transform-origin: top left;\n}\n.-translate-x-1\\/2 {\n  --tw-translate-x: -50%;\n  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n.-translate-y-1\\/2 {\n  --tw-translate-y: -50%;\n  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n.-translate-y-2\\/3 {\n  --tw-translate-y: -66.666667%;\n  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n.-translate-y-3\\/4 {\n  --tw-translate-y: -75%;\n  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n.-translate-y-6 {\n  --tw-translate-y: -1.5rem;\n  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n.-translate-y-8 {\n  --tw-translate-y: -2rem;\n  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n.-translate-y-full {\n  --tw-translate-y: -100%;\n  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n.translate-x-full {\n  --tw-translate-x: 100%;\n  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n.translate-y-4 {\n  --tw-translate-y: 1rem;\n  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n.-rotate-2 {\n  --tw-rotate: -2deg;\n  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n.-rotate-45 {\n  --tw-rotate: -45deg;\n  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n.rotate-180 {\n  --tw-rotate: 180deg;\n  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n.rotate-2 {\n  --tw-rotate: 2deg;\n  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n.rotate-90 {\n  --tw-rotate: 90deg;\n  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n.transform {\n  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n.cursor-pointer {\n  cursor: pointer;\n}\n.resize {\n  resize: both;\n}\n.grid-cols-1 {\n  grid-template-columns: repeat(1, minmax(0, 1fr));\n}\n.grid-cols-2 {\n  grid-template-columns: repeat(2, minmax(0, 1fr));\n}\n.grid-cols-3 {\n  grid-template-columns: repeat(3, minmax(0, 1fr));\n}\n.flex-col {\n  flex-direction: column;\n}\n.flex-wrap {\n  flex-wrap: wrap;\n}\n.items-start {\n  align-items: flex-start;\n}\n.items-center {\n  align-items: center;\n}\n.justify-end {\n  justify-content: flex-end;\n}\n.justify-center {\n  justify-content: center;\n}\n.justify-between {\n  justify-content: space-between;\n}\n.gap-1 {\n  gap: 0.25rem;\n}\n.gap-2 {\n  gap: 0.5rem;\n}\n.gap-4 {\n  gap: 1rem;\n}\n.gap-6 {\n  gap: 1.5rem;\n}\n.space-y-6 > :not([hidden]) ~ :not([hidden]) {\n  --tw-space-y-reverse: 0;\n  margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));\n  margin-bottom: calc(1.5rem * var(--tw-space-y-reverse));\n}\n.space-y-8 > :not([hidden]) ~ :not([hidden]) {\n  --tw-space-y-reverse: 0;\n  margin-top: calc(2rem * calc(1 - var(--tw-space-y-reverse)));\n  margin-bottom: calc(2rem * var(--tw-space-y-reverse));\n}\n.divide-y > :not([hidden]) ~ :not([hidden]) {\n  --tw-divide-y-reverse: 0;\n  border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));\n  border-bottom-width: calc(1px * var(--tw-divide-y-reverse));\n}\n.divide-gold > :not([hidden]) ~ :not([hidden]) {\n  --tw-divide-opacity: 1;\n  border-color: rgb(148 126 82 / var(--tw-divide-opacity));\n}\n.divide-gold-light > :not([hidden]) ~ :not([hidden]) {\n  --tw-divide-opacity: 1;\n  border-color: rgb(215 203 180 / var(--tw-divide-opacity));\n}\n.self-start {\n  align-self: flex-start;\n}\n.overflow-auto {\n  overflow: auto;\n}\n.overflow-hidden {\n  overflow: hidden;\n}\n.overflow-y-auto {\n  overflow-y: auto;\n}\n.whitespace-nowrap {\n  white-space: nowrap;\n}\n.rounded {\n  border-radius: 0.25rem;\n}\n.rounded-full {\n  border-radius: 9999px;\n}\n.rounded-lg {\n  border-radius: 0.5rem;\n}\n.rounded-none {\n  border-radius: 0px;\n}\n.rounded-b-md {\n  border-bottom-right-radius: 0.375rem;\n  border-bottom-left-radius: 0.375rem;\n}\n.rounded-t-md {\n  border-top-left-radius: 0.375rem;\n  border-top-right-radius: 0.375rem;\n}\n.border {\n  border-width: 1px;\n}\n.border-0 {\n  border-width: 0px;\n}\n.border-2 {\n  border-width: 2px;\n}\n.border-b-2 {\n  border-bottom-width: 2px;\n}\n.border-l {\n  border-left-width: 1px;\n}\n.border-r {\n  border-right-width: 1px;\n}\n.border-t {\n  border-top-width: 1px;\n}\n.border-t-2 {\n  border-top-width: 2px;\n}\n.border-none {\n  border-style: none;\n}\n.border-black\\/10 {\n  border-color: rgb(51 51 51 / 0.1);\n}\n.border-current {\n  border-color: currentColor;\n}\n.border-gold {\n  --tw-border-opacity: 1;\n  border-color: rgb(148 126 82 / var(--tw-border-opacity));\n}\n.border-gold-light {\n  --tw-border-opacity: 1;\n  border-color: rgb(215 203 180 / var(--tw-border-opacity));\n}\n.border-red {\n  --tw-border-opacity: 1;\n  border-color: rgb(189 39 49 / var(--tw-border-opacity));\n}\n.border-silver {\n  --tw-border-opacity: 1;\n  border-color: rgb(218 218 218 / var(--tw-border-opacity));\n}\n.border-white {\n  --tw-border-opacity: 1;\n  border-color: rgb(250 250 250 / var(--tw-border-opacity));\n}\n.bg-black {\n  --tw-bg-opacity: 1;\n  background-color: rgb(51 51 51 / var(--tw-bg-opacity));\n}\n.bg-gold {\n  --tw-bg-opacity: 1;\n  background-color: rgb(148 126 82 / var(--tw-bg-opacity));\n}\n.bg-gold-extra-light {\n  --tw-bg-opacity: 1;\n  background-color: rgb(236 231 222 / var(--tw-bg-opacity));\n}\n.bg-gold-light {\n  --tw-bg-opacity: 1;\n  background-color: rgb(215 203 180 / var(--tw-bg-opacity));\n}\n.bg-gold-yellow {\n  --tw-bg-opacity: 1;\n  background-color: rgb(217 167 41 / var(--tw-bg-opacity));\n}\n.bg-gold\\/60 {\n  background-color: rgb(148 126 82 / 0.6);\n}\n.bg-red-light {\n  --tw-bg-opacity: 1;\n  background-color: rgb(250 210 212 / var(--tw-bg-opacity));\n}\n.bg-transparent {\n  background-color: transparent;\n}\n.bg-white {\n  --tw-bg-opacity: 1;\n  background-color: rgb(250 250 250 / var(--tw-bg-opacity));\n}\n.bg-opacity-95 {\n  --tw-bg-opacity: 0.95;\n}\n.fill-black {\n  fill: #333;\n}\n.fill-current {\n  fill: currentColor;\n}\n.fill-error {\n  fill: #8F0006;\n}\n.fill-gold {\n  fill: #947E52;\n}\n.fill-gold-dark {\n  fill: #635230;\n}\n.fill-gold-extra-light {\n  fill: #ECE7DE;\n}\n.fill-gold-text {\n  fill: #856E41;\n}\n.fill-green {\n  fill: #50AE2F;\n}\n.fill-white {\n  fill: #fafafa;\n}\n.stroke-\\[\\#202020\\] {\n  stroke: #202020;\n}\n.stroke-gold {\n  stroke: #947E52;\n}\n.stroke-gold-extra-light {\n  stroke: #ECE7DE;\n}\n.stroke-4 {\n  stroke-width: 4px;\n}\n.object-contain {\n  -o-object-fit: contain;\n     object-fit: contain;\n}\n.object-cover {\n  -o-object-fit: cover;\n     object-fit: cover;\n}\n.p-1 {\n  padding: 0.25rem;\n}\n.p-2 {\n  padding: 0.5rem;\n}\n.p-3 {\n  padding: 0.75rem;\n}\n.p-4 {\n  padding: 1rem;\n}\n.p-6 {\n  padding: 1.5rem;\n}\n.px-2 {\n  padding-left: 0.5rem;\n  padding-right: 0.5rem;\n}\n.px-3 {\n  padding-left: 0.75rem;\n  padding-right: 0.75rem;\n}\n.px-4 {\n  padding-left: 1rem;\n  padding-right: 1rem;\n}\n.px-5 {\n  padding-left: 1.25rem;\n  padding-right: 1.25rem;\n}\n.py-1 {\n  padding-top: 0.25rem;\n  padding-bottom: 0.25rem;\n}\n.py-1\\.5 {\n  padding-top: 0.375rem;\n  padding-bottom: 0.375rem;\n}\n.py-10 {\n  padding-top: 2.5rem;\n  padding-bottom: 2.5rem;\n}\n.py-12 {\n  padding-top: 3rem;\n  padding-bottom: 3rem;\n}\n.py-18 {\n  padding-top: 4.5rem;\n  padding-bottom: 4.5rem;\n}\n.py-2 {\n  padding-top: 0.5rem;\n  padding-bottom: 0.5rem;\n}\n.py-2\\.5 {\n  padding-top: 0.625rem;\n  padding-bottom: 0.625rem;\n}\n.py-3 {\n  padding-top: 0.75rem;\n  padding-bottom: 0.75rem;\n}\n.py-3\\.5 {\n  padding-top: 0.875rem;\n  padding-bottom: 0.875rem;\n}\n.py-4 {\n  padding-top: 1rem;\n  padding-bottom: 1rem;\n}\n.pb-10 {\n  padding-bottom: 2.5rem;\n}\n.pb-16 {\n  padding-bottom: 4rem;\n}\n.pb-2 {\n  padding-bottom: 0.5rem;\n}\n.pb-7 {\n  padding-bottom: 1.75rem;\n}\n.pb-8 {\n  padding-bottom: 2rem;\n}\n.pb-\\[56\\.25\\%\\] {\n  padding-bottom: 56.25%;\n}\n.pl-2 {\n  padding-left: 0.5rem;\n}\n.pl-4 {\n  padding-left: 1rem;\n}\n.pl-5 {\n  padding-left: 1.25rem;\n}\n.pl-7 {\n  padding-left: 1.75rem;\n}\n.pl-8 {\n  padding-left: 2rem;\n}\n.pr-1 {\n  padding-right: 0.25rem;\n}\n.pr-11 {\n  padding-right: 2.75rem;\n}\n.pr-3 {\n  padding-right: 0.75rem;\n}\n.pt-0 {\n  padding-top: 0px;\n}\n.pt-0\\.5 {\n  padding-top: 0.125rem;\n}\n.pt-10 {\n  padding-top: 2.5rem;\n}\n.pt-12 {\n  padding-top: 3rem;\n}\n.pt-16 {\n  padding-top: 4rem;\n}\n.pt-18 {\n  padding-top: 4.5rem;\n}\n.pt-20 {\n  padding-top: 5rem;\n}\n.pt-4 {\n  padding-top: 1rem;\n}\n.text-left {\n  text-align: left;\n}\n.text-center {\n  text-align: center;\n}\n.text-right {\n  text-align: right;\n}\n.align-middle {\n  vertical-align: middle;\n}\n.font-mono {\n  font-family: \"GTAmerica-Mono\", sans-serif;\n}\n.font-numbers {\n  font-family: \"Coanda\", sans-serif;\n}\n.text-3 {\n  font-size: .75rem;\n}\n.text-6 {\n  font-size: 1.5rem;\n}\n.text-8 {\n  font-size: 2rem;\n}\n.text-\\[12vw\\] {\n  font-size: 12vw;\n}\n.text-\\[200px\\] {\n  font-size: 200px;\n}\n.font-bold {\n  font-weight: 700;\n}\n.font-medium {\n  font-weight: 500;\n}\n.font-semibold {\n  font-weight: 600;\n}\n.uppercase {\n  text-transform: uppercase;\n}\n.lowercase {\n  text-transform: lowercase;\n}\n.normal-case {\n  text-transform: none;\n}\n.not-italic {\n  font-style: normal;\n}\n.tabular-nums {\n  --tw-numeric-spacing: tabular-nums;\n  font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);\n}\n.leading-none {\n  line-height: 1em;\n}\n.tracking-2 {\n  letter-spacing: 0.02em;\n}\n.text-black {\n  --tw-text-opacity: 1;\n  color: rgb(51 51 51 / var(--tw-text-opacity));\n}\n.text-error {\n  --tw-text-opacity: 1;\n  color: rgb(143 0 6 / var(--tw-text-opacity));\n}\n.text-gold {\n  --tw-text-opacity: 1;\n  color: rgb(148 126 82 / var(--tw-text-opacity));\n}\n.text-gold-dark {\n  --tw-text-opacity: 1;\n  color: rgb(99 82 48 / var(--tw-text-opacity));\n}\n.text-gold-extra-light {\n  --tw-text-opacity: 1;\n  color: rgb(236 231 222 / var(--tw-text-opacity));\n}\n.text-gold-light {\n  --tw-text-opacity: 1;\n  color: rgb(215 203 180 / var(--tw-text-opacity));\n}\n.text-gold-text {\n  --tw-text-opacity: 1;\n  color: rgb(133 110 65 / var(--tw-text-opacity));\n}\n.text-red {\n  --tw-text-opacity: 1;\n  color: rgb(189 39 49 / var(--tw-text-opacity));\n}\n.text-white {\n  --tw-text-opacity: 1;\n  color: rgb(250 250 250 / var(--tw-text-opacity));\n}\n.underline {\n  text-decoration-line: underline;\n}\n.opacity-0 {\n  opacity: 0;\n}\n.opacity-25 {\n  opacity: 0.25;\n}\n.shadow-2xl {\n  --tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);\n  --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);\n  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.shadow-xl {\n  --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);\n  --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);\n  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.ring-1 {\n  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);\n  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);\n  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);\n}\n.ring-inset {\n  --tw-ring-inset: inset;\n}\n.ring-gold {\n  --tw-ring-opacity: 1;\n  --tw-ring-color: rgb(148 126 82 / var(--tw-ring-opacity));\n}\n.ring-gold-light {\n  --tw-ring-opacity: 1;\n  --tw-ring-color: rgb(215 203 180 / var(--tw-ring-opacity));\n}\n.grayscale {\n  --tw-grayscale: grayscale(100%);\n  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);\n}\n.filter {\n  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);\n}\n.backdrop-blur-sm {\n  --tw-backdrop-blur: blur(4px);\n  -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);\n          backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);\n}\n.transition-\\[opacity\\2c transform\\] {\n  transition-property: opacity,transform;\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n  transition-duration: 150ms;\n}\n.transition-all {\n  transition-property: all;\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n  transition-duration: 150ms;\n}\n.transition-colors {\n  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n  transition-duration: 150ms;\n}\n.transition-transform {\n  transition-property: transform;\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n  transition-duration: 150ms;\n}\n.duration-300 {\n  transition-duration: 300ms;\n}\n.duration-700 {\n  transition-duration: 700ms;\n}\n.ease-in-out {\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n}\n.will-change-transform {\n  will-change: transform;\n}\n\nbody.dev:before {\n  position: fixed;\n  top: 0px;\n  left: 0px;\n  --tw-bg-opacity: 1;\n  background-color: rgb(189 39 49 / var(--tw-bg-opacity));\n  padding-left: 0.5rem;\n  padding-right: 0.5rem;\n  padding-top: 0.25rem;\n  padding-bottom: 0.25rem;\n  --tw-text-opacity: 1;\n  color: rgb(250 250 250 / var(--tw-text-opacity));\n  --tw-content: 'xs';\n  content: var(--tw-content);\n}\n\n@media (min-width: 640px) {\n\n  body.dev:before {\n    --tw-content: 'sm';\n    content: var(--tw-content);\n  }\n}\n\n@media (min-width: 768px) {\n\n  body.dev:before {\n    --tw-content: 'md';\n    content: var(--tw-content);\n  }\n}\n\n@media (min-width: 1024px) {\n\n  body.dev:before {\n    --tw-content: 'lg';\n    content: var(--tw-content);\n  }\n}\n\n@media (min-width: 1280px) {\n\n  body.dev:before {\n    --tw-content: 'xl';\n    content: var(--tw-content);\n  }\n}\n\n@media (min-width: 1536px) {\n\n  body.dev:before {\n    --tw-content: '2xl';\n    content: var(--tw-content);\n  }\n}\n\n.lazyload,\n.lazyloading {\n\topacity: 0;\n}\n\n.lazyloaded,\n.swiper-initialized {\n\topacity: 1;\n\ttransition: opacity 300ms, transform 300ms;\n}\n\n.ticker {\n\tanimation: ticker infinite linear;\n\twill-change: transform;\n}\n\n@media (min-width: 768px) {\n\n  .ticker.ticker-on-scroll {\n    animation: none;\n  }\n}\n\n.ticker.ticker--reverse {\n\t\tanimation-direction: reverse;\n\t}\n\n@keyframes ticker {\n\t0% {\n\t\ttransform: translateX(-10%);\n\t}\n\t100% {\n\t\ttransform: translateX(-110%);\n\t}\n}\n\n.js--expandable-header {\n  cursor: pointer;\n}\n\n@media (min-width: 768px) {\n\n  .md\\:js--expandable-off {\n    cursor: default;\n  }\n}\n\n.js--expandable {\n\twill-change: max-height, padding;\n\ttransition: max-height 0.4s ease-in-out, padding 0.4s ease-in-out;\n\tmax-height: 0px;\n\toverflow: hidden;\n}\n\n@media (min-width: 768px) {\n\n  .md\\:js--expandable-off + .js--expandable {\n    max-height: -moz-max-content;\n    max-height: max-content;\n    overflow: visible;\n  }\n}\n\nol {\n\tcounter-reset: orderlist;\n}\n\nol li span::before {\n\tcounter-increment: orderlist;\n\tcontent: counter(orderlist);\n}\n\n.css--mapbox-wrapper {\n\ttop: calc(100vh - 10rem);\n\tposition: sticky;\n\tleft: 0px;\n\tright: 0px;\n\tz-index: 40;\n\theight: 6rem;\n\toverflow: hidden;\n\tborder-radius: 0.5rem;\n\tborder-width: 2px;\n\t--tw-border-opacity: 1;\n\tborder-color: rgb(133 110 65 / var(--tw-border-opacity));\n}\n\n@media (min-width: 768px) {\n\n  .css--mapbox-wrapper {\n    left: auto;\n    right: 2rem;\n    height: 14rem;\n    width: 11rem;\n  }\n}\n\n@media (min-width: 1024px) {\n\n  .css--mapbox-wrapper {\n    right: 3.5rem;\n  }\n}\n\n@media (min-width: 1280px) {\n\n  .css--mapbox-wrapper {\n    right: 5rem;\n  }\n}\n\n.css--mapbox-wrapper .css--marker {\n  font-family: \"Coanda\", sans-serif;\n  font-size: 1rem;\n  font-weight: 900;\n  line-height: 1.375rem;\n  letter-spacing: 0.02em;\n}\n\n@media (min-width: 768px) {\n\n  .css--mapbox-wrapper .css--marker {\n    font-size: 1.125rem;\n    line-height: 1.25rem;\n  }\n}\n\n@media (min-width: 1280px) {\n\n  .css--mapbox-wrapper .css--marker {\n    font-size: 1.25rem;\n  }\n}\n\n.css--mapbox-wrapper .css--marker {\n  display: flex;\n  height: 0.5rem;\n  width: 0.5rem;\n  border-radius: 9999px;\n  --tw-text-opacity: 1;\n  color: rgb(236 231 222 / var(--tw-text-opacity));\n}\n\n.css--mapbox-wrapper .css--marker span {\n  margin: auto;\n  display: none;\n}\n\n.css--mapbox-wrapper.large {\n  position: fixed;\n  bottom: 5rem;\n  top: auto;\n  height: 80vh;\n  width: auto;\n}\n\n@media (min-width: 768px) {\n\n  .css--mapbox-wrapper.large {\n    left: 2rem;\n  }\n}\n\n@media (min-width: 1024px) {\n\n  .css--mapbox-wrapper.large {\n    left: 3.5rem;\n  }\n}\n\n@media (min-width: 1280px) {\n\n  .css--mapbox-wrapper.large {\n    left: 5rem;\n  }\n}\n\n.css--mapbox-wrapper.large .css--marker {\n  height: 3rem;\n  width: 3rem;\n}\n\n.css--mapbox-wrapper.large .css--marker span {\n  display: block;\n}\n\n@media (min-width: 768px) {\n\t.css--mapbox-wrapper {\n\t\ttop: calc(100vh - 19rem);\n\t}\n}\n\n.selection\\:bg-gold-light *::-moz-selection {\n  --tw-bg-opacity: 1;\n  background-color: rgb(215 203 180 / var(--tw-bg-opacity));\n}\n\n.selection\\:bg-gold-light *::selection {\n  --tw-bg-opacity: 1;\n  background-color: rgb(215 203 180 / var(--tw-bg-opacity));\n}\n\n.selection\\:text-black *::-moz-selection {\n  --tw-text-opacity: 1;\n  color: rgb(51 51 51 / var(--tw-text-opacity));\n}\n\n.selection\\:text-black *::selection {\n  --tw-text-opacity: 1;\n  color: rgb(51 51 51 / var(--tw-text-opacity));\n}\n\n.selection\\:bg-gold-light::-moz-selection {\n  --tw-bg-opacity: 1;\n  background-color: rgb(215 203 180 / var(--tw-bg-opacity));\n}\n\n.selection\\:bg-gold-light::selection {\n  --tw-bg-opacity: 1;\n  background-color: rgb(215 203 180 / var(--tw-bg-opacity));\n}\n\n.selection\\:text-black::-moz-selection {\n  --tw-text-opacity: 1;\n  color: rgb(51 51 51 / var(--tw-text-opacity));\n}\n\n.selection\\:text-black::selection {\n  --tw-text-opacity: 1;\n  color: rgb(51 51 51 / var(--tw-text-opacity));\n}\n\n.before\\:pointer-events-none::before {\n  content: var(--tw-content);\n  pointer-events: none;\n}\n\n.before\\:absolute::before {\n  content: var(--tw-content);\n  position: absolute;\n}\n\n.before\\:inset-0::before {\n  content: var(--tw-content);\n  top: 0px;\n  right: 0px;\n  bottom: 0px;\n  left: 0px;\n}\n\n.before\\:-left-1::before {\n  content: var(--tw-content);\n  left: -0.25rem;\n}\n\n.before\\:top-0::before {\n  content: var(--tw-content);\n  top: 0px;\n}\n\n.before\\:h-3::before {\n  content: var(--tw-content);\n  height: 0.75rem;\n}\n\n.before\\:w-3::before {\n  content: var(--tw-content);\n  width: 0.75rem;\n}\n\n.before\\:rounded::before {\n  content: var(--tw-content);\n  border-radius: 0.25rem;\n}\n\n.before\\:rounded-full::before {\n  content: var(--tw-content);\n  border-radius: 9999px;\n}\n\n.before\\:border-0::before {\n  content: var(--tw-content);\n  border-width: 0px;\n}\n\n.before\\:border-2::before {\n  content: var(--tw-content);\n  border-width: 2px;\n}\n\n.before\\:border-b-4::before {\n  content: var(--tw-content);\n  border-bottom-width: 4px;\n}\n\n.before\\:border-t-4::before {\n  content: var(--tw-content);\n  border-top-width: 4px;\n}\n\n.before\\:border-current::before {\n  content: var(--tw-content);\n  border-color: currentColor;\n}\n\n.before\\:border-gold::before {\n  content: var(--tw-content);\n  --tw-border-opacity: 1;\n  border-color: rgb(148 126 82 / var(--tw-border-opacity));\n}\n\n.before\\:border-gold-dark::before {\n  content: var(--tw-content);\n  --tw-border-opacity: 1;\n  border-color: rgb(99 82 48 / var(--tw-border-opacity));\n}\n\n.before\\:bg-gold::before {\n  content: var(--tw-content);\n  --tw-bg-opacity: 1;\n  background-color: rgb(148 126 82 / var(--tw-bg-opacity));\n}\n\n.before\\:bg-gold-extra-light::before {\n  content: var(--tw-content);\n  --tw-bg-opacity: 1;\n  background-color: rgb(236 231 222 / var(--tw-bg-opacity));\n}\n\n.before\\:bg-gold-light::before {\n  content: var(--tw-content);\n  --tw-bg-opacity: 1;\n  background-color: rgb(215 203 180 / var(--tw-bg-opacity));\n}\n\n.after\\:absolute::after {\n  content: var(--tw-content);\n  position: absolute;\n}\n\n.after\\:inset-0::after {\n  content: var(--tw-content);\n  top: 0px;\n  right: 0px;\n  bottom: 0px;\n  left: 0px;\n}\n\n.after\\:-left-1::after {\n  content: var(--tw-content);\n  left: -0.25rem;\n}\n\n.after\\:bottom-0::after {\n  content: var(--tw-content);\n  bottom: 0px;\n}\n\n.after\\:right-4::after {\n  content: var(--tw-content);\n  right: 1rem;\n}\n\n.after\\:top-full::after {\n  content: var(--tw-content);\n  top: 100%;\n}\n\n.after\\:z-10::after {\n  content: var(--tw-content);\n  z-index: 10;\n}\n\n.after\\:-mt-1::after {\n  content: var(--tw-content);\n  margin-top: -0.25rem;\n}\n\n.after\\:-mt-1\\.5::after {\n  content: var(--tw-content);\n  margin-top: -0.375rem;\n}\n\n.after\\:h-0::after {\n  content: var(--tw-content);\n  height: 0px;\n}\n\n.after\\:h-0\\.5::after {\n  content: var(--tw-content);\n  height: 0.125rem;\n}\n\n.after\\:h-3::after {\n  content: var(--tw-content);\n  height: 0.75rem;\n}\n\n.after\\:w-0::after {\n  content: var(--tw-content);\n  width: 0px;\n}\n\n.after\\:w-3::after {\n  content: var(--tw-content);\n  width: 0.75rem;\n}\n\n.after\\:rotate-45::after {\n  content: var(--tw-content);\n  --tw-rotate: 45deg;\n  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n\n.after\\:rounded-full::after {\n  content: var(--tw-content);\n  border-radius: 9999px;\n}\n\n.after\\:bg-black::after {\n  content: var(--tw-content);\n  --tw-bg-opacity: 1;\n  background-color: rgb(51 51 51 / var(--tw-bg-opacity));\n}\n\n.after\\:bg-gold::after {\n  content: var(--tw-content);\n  --tw-bg-opacity: 1;\n  background-color: rgb(148 126 82 / var(--tw-bg-opacity));\n}\n\n.after\\:bg-gold-extra-light::after {\n  content: var(--tw-content);\n  --tw-bg-opacity: 1;\n  background-color: rgb(236 231 222 / var(--tw-bg-opacity));\n}\n\n.after\\:bg-gold-light::after {\n  content: var(--tw-content);\n  --tw-bg-opacity: 1;\n  background-color: rgb(215 203 180 / var(--tw-bg-opacity));\n}\n\n.after\\:opacity-0::after {\n  content: var(--tw-content);\n  opacity: 0;\n}\n\n.after\\:transition-all::after {\n  content: var(--tw-content);\n  transition-property: all;\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n  transition-duration: 150ms;\n}\n\n.hover\\:bg-gold\\/20:hover {\n  background-color: rgb(148 126 82 / 0.2);\n}\n\n.hover\\:text-gold:hover {\n  --tw-text-opacity: 1;\n  color: rgb(148 126 82 / var(--tw-text-opacity));\n}\n\n.hover\\:text-white:hover {\n  --tw-text-opacity: 1;\n  color: rgb(250 250 250 / var(--tw-text-opacity));\n}\n\n.hover\\:grayscale-0:hover {\n  --tw-grayscale: grayscale(0);\n  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);\n}\n\n.hover\\:before\\:border-gold:hover::before {\n  content: var(--tw-content);\n  --tw-border-opacity: 1;\n  border-color: rgb(148 126 82 / var(--tw-border-opacity));\n}\n\n.hover\\:before\\:bg-gold:hover::before {\n  content: var(--tw-content);\n  --tw-bg-opacity: 1;\n  background-color: rgb(148 126 82 / var(--tw-bg-opacity));\n}\n\n.hover\\:before\\:bg-gold-dark:hover::before {\n  content: var(--tw-content);\n  --tw-bg-opacity: 1;\n  background-color: rgb(99 82 48 / var(--tw-bg-opacity));\n}\n\n.hover\\:before\\:bg-gold-light:hover::before {\n  content: var(--tw-content);\n  --tw-bg-opacity: 1;\n  background-color: rgb(215 203 180 / var(--tw-bg-opacity));\n}\n\n.hover\\:before\\:bg-transparent:hover::before {\n  content: var(--tw-content);\n  background-color: transparent;\n}\n\n.hover\\:after\\:w-full:hover::after {\n  content: var(--tw-content);\n  width: 100%;\n}\n\n.focus\\:z-10:focus {\n  z-index: 10;\n}\n\n.focus\\:border-gold-text:focus {\n  --tw-border-opacity: 1;\n  border-color: rgb(133 110 65 / var(--tw-border-opacity));\n}\n\n.focus\\:outline-none:focus {\n  outline: 2px solid transparent;\n  outline-offset: 2px;\n}\n\n.focus\\:ring-2:focus {\n  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);\n  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);\n  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);\n}\n\n.focus\\:ring-inset:focus {\n  --tw-ring-inset: inset;\n}\n\n.focus\\:ring-gold-dark:focus {\n  --tw-ring-opacity: 1;\n  --tw-ring-color: rgb(99 82 48 / var(--tw-ring-opacity));\n}\n\n.disabled\\:opacity-25:disabled {\n  opacity: 0.25;\n}\n\n.disabled\\:opacity-50:disabled {\n  opacity: 0.5;\n}\n\n.group:hover .group-hover\\:block {\n  display: block;\n}\n\n.group:hover .group-hover\\:translate-x-2 {\n  --tw-translate-x: 0.5rem;\n  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n\n.group:hover .group-hover\\:translate-x-4 {\n  --tw-translate-x: 1rem;\n  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n\n.group:hover .group-hover\\:translate-y-0 {\n  --tw-translate-y: 0px;\n  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n\n.group:hover .group-hover\\:-rotate-90 {\n  --tw-rotate: -90deg;\n  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n\n.group:hover .group-hover\\:rotate-180 {\n  --tw-rotate: 180deg;\n  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n\n.group:hover .group-hover\\:scale-110 {\n  --tw-scale-x: 1.1;\n  --tw-scale-y: 1.1;\n  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n\n.group:hover .group-hover\\:fill-black {\n  fill: #333;\n}\n\n.group:hover .group-hover\\:fill-white {\n  fill: #fafafa;\n}\n\n.group:hover .group-hover\\:text-black {\n  --tw-text-opacity: 1;\n  color: rgb(51 51 51 / var(--tw-text-opacity));\n}\n\n.group:hover .group-hover\\:text-gold-text {\n  --tw-text-opacity: 1;\n  color: rgb(133 110 65 / var(--tw-text-opacity));\n}\n\n.group:hover .group-hover\\:text-white {\n  --tw-text-opacity: 1;\n  color: rgb(250 250 250 / var(--tw-text-opacity));\n}\n\n.group:hover .group-hover\\:opacity-100 {\n  opacity: 1;\n}\n\n.group:hover .group-hover\\:after\\:opacity-40::after {\n  content: var(--tw-content);\n  opacity: 0.4;\n}\n\n.peer:-moz-placeholder-shown ~ .peer-placeholder-shown\\:translate-y-0 {\n  --tw-translate-y: 0px;\n  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n\n.peer:placeholder-shown ~ .peer-placeholder-shown\\:translate-y-0 {\n  --tw-translate-y: 0px;\n  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n\n.peer:-moz-placeholder-shown ~ .peer-placeholder-shown\\:text-4 {\n  font-size: 1rem;\n}\n\n.peer:placeholder-shown ~ .peer-placeholder-shown\\:text-4 {\n  font-size: 1rem;\n}\n\n@media (min-width: 640px) {\n\n  .sm\\:top-1 {\n    top: 0.25rem;\n  }\n\n  .sm\\:mr-1 {\n    margin-right: 0.25rem;\n  }\n\n  .sm\\:block {\n    display: block;\n  }\n\n  .sm\\:px-6 {\n    padding-left: 1.5rem;\n    padding-right: 1.5rem;\n  }\n\n  .sm\\:leading-6 {\n    line-height: 1.5rem;\n  }\n}\n\n@media (min-width: 768px) {\n\n  .md\\:static {\n    position: static;\n  }\n\n  .md\\:-left-10 {\n    left: -2.5rem;\n  }\n\n  .md\\:left-0 {\n    left: 0px;\n  }\n\n  .md\\:left-7 {\n    left: 1.75rem;\n  }\n\n  .md\\:left-auto {\n    left: auto;\n  }\n\n  .md\\:right-20 {\n    right: 5rem;\n  }\n\n  .md\\:right-3 {\n    right: 0.75rem;\n  }\n\n  .md\\:right-7 {\n    right: 1.75rem;\n  }\n\n  .md\\:right-8 {\n    right: 2rem;\n  }\n\n  .md\\:top-0 {\n    top: 0px;\n  }\n\n  .md\\:top-0\\.5 {\n    top: 0.125rem;\n  }\n\n  .md\\:top-1 {\n    top: 0.25rem;\n  }\n\n  .md\\:top-4 {\n    top: 1rem;\n  }\n\n  .md\\:top-5 {\n    top: 1.25rem;\n  }\n\n  .md\\:z-30 {\n    z-index: 30;\n  }\n\n  .md\\:-order-1 {\n    order: -1;\n  }\n\n  .md\\:order-2 {\n    order: 2;\n  }\n\n  .md\\:col-span-2 {\n    grid-column: span 2 / span 2;\n  }\n\n  .md\\:col-span-3 {\n    grid-column: span 3 / span 3;\n  }\n\n  .md\\:col-span-7 {\n    grid-column: span 7 / span 7;\n  }\n\n  .md\\:col-start-2 {\n    grid-column-start: 2;\n  }\n\n  .md\\:m-0 {\n    margin: 0px;\n  }\n\n  .md\\:-mx-5 {\n    margin-left: -1.25rem;\n    margin-right: -1.25rem;\n  }\n\n  .md\\:-mx-6 {\n    margin-left: -1.5rem;\n    margin-right: -1.5rem;\n  }\n\n  .md\\:-mx-8 {\n    margin-left: -2rem;\n    margin-right: -2rem;\n  }\n\n  .md\\:mx-0 {\n    margin-left: 0px;\n    margin-right: 0px;\n  }\n\n  .md\\:mx-4 {\n    margin-left: 1rem;\n    margin-right: 1rem;\n  }\n\n  .md\\:mx-5 {\n    margin-left: 1.25rem;\n    margin-right: 1.25rem;\n  }\n\n  .md\\:mx-6 {\n    margin-left: 1.5rem;\n    margin-right: 1.5rem;\n  }\n\n  .md\\:mx-\\[10\\%\\] {\n    margin-left: 10%;\n    margin-right: 10%;\n  }\n\n  .md\\:mx-auto {\n    margin-left: auto;\n    margin-right: auto;\n  }\n\n  .md\\:my-0 {\n    margin-top: 0px;\n    margin-bottom: 0px;\n  }\n\n  .md\\:my-18 {\n    margin-top: 4.5rem;\n    margin-bottom: 4.5rem;\n  }\n\n  .md\\:my-20 {\n    margin-top: 5rem;\n    margin-bottom: 5rem;\n  }\n\n  .md\\:my-28 {\n    margin-top: 7rem;\n    margin-bottom: 7rem;\n  }\n\n  .md\\:my-32 {\n    margin-top: 8rem;\n    margin-bottom: 8rem;\n  }\n\n  .md\\:my-4 {\n    margin-top: 1rem;\n    margin-bottom: 1rem;\n  }\n\n  .md\\:-mb-16 {\n    margin-bottom: -4rem;\n  }\n\n  .md\\:mb-1 {\n    margin-bottom: 0.25rem;\n  }\n\n  .md\\:mb-10 {\n    margin-bottom: 2.5rem;\n  }\n\n  .md\\:mb-14 {\n    margin-bottom: 3.5rem;\n  }\n\n  .md\\:mb-16 {\n    margin-bottom: 4rem;\n  }\n\n  .md\\:mb-2 {\n    margin-bottom: 0.5rem;\n  }\n\n  .md\\:mb-20 {\n    margin-bottom: 5rem;\n  }\n\n  .md\\:mb-4 {\n    margin-bottom: 1rem;\n  }\n\n  .md\\:ml-0 {\n    margin-left: 0px;\n  }\n\n  .md\\:ml-1\\/12 {\n    margin-left: 8.333333333%;\n  }\n\n  .md\\:ml-1\\/4 {\n    margin-left: 25%;\n  }\n\n  .md\\:ml-1\\/6 {\n    margin-left: 16.66666667%;\n  }\n\n  .md\\:ml-2 {\n    margin-left: 0.5rem;\n  }\n\n  .md\\:ml-5 {\n    margin-left: 1.25rem;\n  }\n\n  .md\\:ml-\\[10\\%\\] {\n    margin-left: 10%;\n  }\n\n  .md\\:ml-auto {\n    margin-left: auto;\n  }\n\n  .md\\:mr-2 {\n    margin-right: 0.5rem;\n  }\n\n  .md\\:mr-4 {\n    margin-right: 1rem;\n  }\n\n  .md\\:mr-auto {\n    margin-right: auto;\n  }\n\n  .md\\:mt-0 {\n    margin-top: 0px;\n  }\n\n  .md\\:mt-10 {\n    margin-top: 2.5rem;\n  }\n\n  .md\\:mt-12 {\n    margin-top: 3rem;\n  }\n\n  .md\\:mt-14 {\n    margin-top: 3.5rem;\n  }\n\n  .md\\:mt-16 {\n    margin-top: 4rem;\n  }\n\n  .md\\:mt-18 {\n    margin-top: 4.5rem;\n  }\n\n  .md\\:mt-2 {\n    margin-top: 0.5rem;\n  }\n\n  .md\\:mt-20 {\n    margin-top: 5rem;\n  }\n\n  .md\\:mt-4 {\n    margin-top: 1rem;\n  }\n\n  .md\\:mt-6 {\n    margin-top: 1.5rem;\n  }\n\n  .md\\:mt-8 {\n    margin-top: 2rem;\n  }\n\n  .md\\:block {\n    display: block;\n  }\n\n  .md\\:inline {\n    display: inline;\n  }\n\n  .md\\:flex {\n    display: flex;\n  }\n\n  .md\\:grid {\n    display: grid;\n  }\n\n  .md\\:hidden {\n    display: none;\n  }\n\n  .md\\:h-10 {\n    height: 2.5rem;\n  }\n\n  .md\\:h-28 {\n    height: 7rem;\n  }\n\n  .md\\:h-6 {\n    height: 1.5rem;\n  }\n\n  .md\\:h-8 {\n    height: 2rem;\n  }\n\n  .md\\:h-\\[14vw\\] {\n    height: 14vw;\n  }\n\n  .md\\:h-\\[50vh\\] {\n    height: 50vh;\n  }\n\n  .md\\:max-h-40 {\n    max-height: 10rem;\n  }\n\n  .md\\:max-h-screen {\n    max-height: 100vh;\n  }\n\n  .md\\:w-1\\/12 {\n    width: 8.333333%;\n  }\n\n  .md\\:w-1\\/2 {\n    width: 50%;\n  }\n\n  .md\\:w-1\\/3 {\n    width: 33.333333%;\n  }\n\n  .md\\:w-1\\/4 {\n    width: 25%;\n  }\n\n  .md\\:w-10\\/12 {\n    width: 83.333333%;\n  }\n\n  .md\\:w-11\\/12 {\n    width: 91.666667%;\n  }\n\n  .md\\:w-2\\/12 {\n    width: 16.666667%;\n  }\n\n  .md\\:w-2\\/3 {\n    width: 66.666667%;\n  }\n\n  .md\\:w-3\\/12 {\n    width: 25%;\n  }\n\n  .md\\:w-3\\/4 {\n    width: 75%;\n  }\n\n  .md\\:w-4\\/12 {\n    width: 33.333333%;\n  }\n\n  .md\\:w-4\\/5 {\n    width: 80%;\n  }\n\n  .md\\:w-44 {\n    width: 11rem;\n  }\n\n  .md\\:w-5\\/12 {\n    width: 41.666667%;\n  }\n\n  .md\\:w-56 {\n    width: 14rem;\n  }\n\n  .md\\:w-6 {\n    width: 1.5rem;\n  }\n\n  .md\\:w-7\\/12 {\n    width: 58.333333%;\n  }\n\n  .md\\:w-8 {\n    width: 2rem;\n  }\n\n  .md\\:w-\\[10\\%\\] {\n    width: 10%;\n  }\n\n  .md\\:w-\\[47\\%\\] {\n    width: 47%;\n  }\n\n  .md\\:w-auto {\n    width: auto;\n  }\n\n  .md\\:w-full {\n    width: 100%;\n  }\n\n  .md\\:max-w-none {\n    max-width: none;\n  }\n\n  .md\\:-translate-y-9 {\n    --tw-translate-y: -2.25rem;\n    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n  }\n\n  .md\\:translate-y-2\\/3 {\n    --tw-translate-y: 66.666667%;\n    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n  }\n\n  .md\\:grid-cols-12 {\n    grid-template-columns: repeat(12, minmax(0, 1fr));\n  }\n\n  .md\\:grid-cols-2 {\n    grid-template-columns: repeat(2, minmax(0, 1fr));\n  }\n\n  .md\\:grid-cols-3 {\n    grid-template-columns: repeat(3, minmax(0, 1fr));\n  }\n\n  .md\\:grid-cols-4 {\n    grid-template-columns: repeat(4, minmax(0, 1fr));\n  }\n\n  .md\\:flex-row {\n    flex-direction: row;\n  }\n\n  .md\\:flex-wrap {\n    flex-wrap: wrap;\n  }\n\n  .md\\:flex-nowrap {\n    flex-wrap: nowrap;\n  }\n\n  .md\\:items-center {\n    align-items: center;\n  }\n\n  .md\\:justify-center {\n    justify-content: center;\n  }\n\n  .md\\:justify-between {\n    justify-content: space-between;\n  }\n\n  .md\\:gap-6 {\n    gap: 1.5rem;\n  }\n\n  .md\\:gap-x-\\[5\\%\\] {\n    -moz-column-gap: 5%;\n         column-gap: 5%;\n  }\n\n  .md\\:gap-y-10 {\n    row-gap: 2.5rem;\n  }\n\n  .md\\:gap-y-9 {\n    row-gap: 2.25rem;\n  }\n\n  .md\\:border-0 {\n    border-width: 0px;\n  }\n\n  .md\\:border-3 {\n    border-width: 3px;\n  }\n\n  .md\\:border-b-2 {\n    border-bottom-width: 2px;\n  }\n\n  .md\\:border-current {\n    border-color: currentColor;\n  }\n\n  .md\\:bg-transparent {\n    background-color: transparent;\n  }\n\n  .md\\:p-18 {\n    padding: 4.5rem;\n  }\n\n  .md\\:p-2 {\n    padding: 0.5rem;\n  }\n\n  .md\\:px-0 {\n    padding-left: 0px;\n    padding-right: 0px;\n  }\n\n  .md\\:px-12 {\n    padding-left: 3rem;\n    padding-right: 3rem;\n  }\n\n  .md\\:px-4 {\n    padding-left: 1rem;\n    padding-right: 1rem;\n  }\n\n  .md\\:px-6 {\n    padding-left: 1.5rem;\n    padding-right: 1.5rem;\n  }\n\n  .md\\:px-7 {\n    padding-left: 1.75rem;\n    padding-right: 1.75rem;\n  }\n\n  .md\\:px-8 {\n    padding-left: 2rem;\n    padding-right: 2rem;\n  }\n\n  .md\\:py-10 {\n    padding-top: 2.5rem;\n    padding-bottom: 2.5rem;\n  }\n\n  .md\\:py-20 {\n    padding-top: 5rem;\n    padding-bottom: 5rem;\n  }\n\n  .md\\:py-3 {\n    padding-top: 0.75rem;\n    padding-bottom: 0.75rem;\n  }\n\n  .md\\:py-4 {\n    padding-top: 1rem;\n    padding-bottom: 1rem;\n  }\n\n  .md\\:py-40 {\n    padding-top: 10rem;\n    padding-bottom: 10rem;\n  }\n\n  .md\\:py-6 {\n    padding-top: 1.5rem;\n    padding-bottom: 1.5rem;\n  }\n\n  .md\\:py-8 {\n    padding-top: 2rem;\n    padding-bottom: 2rem;\n  }\n\n  .md\\:pb-2 {\n    padding-bottom: 0.5rem;\n  }\n\n  .md\\:pl-0 {\n    padding-left: 0px;\n  }\n\n  .md\\:pl-4 {\n    padding-left: 1rem;\n  }\n\n  .md\\:pr-2 {\n    padding-right: 0.5rem;\n  }\n\n  .md\\:pt-1 {\n    padding-top: 0.25rem;\n  }\n\n  .md\\:pt-2 {\n    padding-top: 0.5rem;\n  }\n\n  .md\\:pt-20 {\n    padding-top: 5rem;\n  }\n\n  .md\\:pt-32 {\n    padding-top: 8rem;\n  }\n\n  .md\\:text-left {\n    text-align: left;\n  }\n\n  .md\\:text-right {\n    text-align: right;\n  }\n\n  .md\\:before\\:pointer-events-none::before {\n    content: var(--tw-content);\n    pointer-events: none;\n  }\n\n  .md\\:before\\:border-2::before {\n    content: var(--tw-content);\n    border-width: 2px;\n  }\n\n  .md\\:before\\:transition-colors::before {\n    content: var(--tw-content);\n    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;\n    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n    transition-duration: 150ms;\n  }\n\n  .md\\:hover\\:before\\:bg-current:hover::before {\n    content: var(--tw-content);\n    background-color: currentColor;\n  }\n\n  .group:hover .md\\:group-hover\\:scale-110 {\n    --tw-scale-x: 1.1;\n    --tw-scale-y: 1.1;\n    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n  }\n}\n\n@media (min-width: 1024px) {\n\n  .lg\\:right-14 {\n    right: 3.5rem;\n  }\n\n  .lg\\:-mx-14 {\n    margin-left: -3.5rem;\n    margin-right: -3.5rem;\n  }\n\n  .lg\\:block {\n    display: block;\n  }\n\n  .lg\\:hidden {\n    display: none;\n  }\n\n  .lg\\:w-\\[60vw\\] {\n    width: 60vw;\n  }\n\n  .lg\\:grid-cols-4 {\n    grid-template-columns: repeat(4, minmax(0, 1fr));\n  }\n\n  .lg\\:p-8 {\n    padding: 2rem;\n  }\n\n  .lg\\:px-0 {\n    padding-left: 0px;\n    padding-right: 0px;\n  }\n\n  .lg\\:px-14 {\n    padding-left: 3.5rem;\n    padding-right: 3.5rem;\n  }\n\n  .lg\\:px-8 {\n    padding-left: 2rem;\n    padding-right: 2rem;\n  }\n\n  .lg\\:py-10 {\n    padding-top: 2.5rem;\n    padding-bottom: 2.5rem;\n  }\n\n  .lg\\:text-\\[10vw\\] {\n    font-size: 10vw;\n  }\n}\n\n@media (min-width: 1280px) {\n\n  .xl\\:absolute {\n    position: absolute;\n  }\n\n  .xl\\:left-0 {\n    left: 0px;\n  }\n\n  .xl\\:left-1\\/2 {\n    left: 50%;\n  }\n\n  .xl\\:left-20 {\n    left: 5rem;\n  }\n\n  .xl\\:left-auto {\n    left: auto;\n  }\n\n  .xl\\:right-0 {\n    right: 0px;\n  }\n\n  .xl\\:right-20 {\n    right: 5rem;\n  }\n\n  .xl\\:right-auto {\n    right: auto;\n  }\n\n  .xl\\:top-0 {\n    top: 0px;\n  }\n\n  .xl\\:top-0\\.5 {\n    top: 0.125rem;\n  }\n\n  .xl\\:top-1 {\n    top: 0.25rem;\n  }\n\n  .xl\\:top-1\\.5 {\n    top: 0.375rem;\n  }\n\n  .xl\\:top-1\\/2 {\n    top: 50%;\n  }\n\n  .xl\\:top-2 {\n    top: 0.5rem;\n  }\n\n  .xl\\:top-4 {\n    top: 1rem;\n  }\n\n  .xl\\:top-7 {\n    top: 1.75rem;\n  }\n\n  .xl\\:col-span-1 {\n    grid-column: span 1 / span 1;\n  }\n\n  .xl\\:col-span-3 {\n    grid-column: span 3 / span 3;\n  }\n\n  .xl\\:col-span-4 {\n    grid-column: span 4 / span 4;\n  }\n\n  .xl\\:col-span-6 {\n    grid-column: span 6 / span 6;\n  }\n\n  .xl\\:col-start-2 {\n    grid-column-start: 2;\n  }\n\n  .xl\\:col-start-4 {\n    grid-column-start: 4;\n  }\n\n  .xl\\:col-start-7 {\n    grid-column-start: 7;\n  }\n\n  .xl\\:col-start-8 {\n    grid-column-start: 8;\n  }\n\n  .xl\\:-mx-10 {\n    margin-left: -2.5rem;\n    margin-right: -2.5rem;\n  }\n\n  .xl\\:-mx-20 {\n    margin-left: -5rem;\n    margin-right: -5rem;\n  }\n\n  .xl\\:mx-10 {\n    margin-left: 2.5rem;\n    margin-right: 2.5rem;\n  }\n\n  .xl\\:mx-auto {\n    margin-left: auto;\n    margin-right: auto;\n  }\n\n  .xl\\:my-32 {\n    margin-top: 8rem;\n    margin-bottom: 8rem;\n  }\n\n  .xl\\:my-40 {\n    margin-top: 10rem;\n    margin-bottom: 10rem;\n  }\n\n  .xl\\:my-60 {\n    margin-top: 15rem;\n    margin-bottom: 15rem;\n  }\n\n  .xl\\:my-8 {\n    margin-top: 2rem;\n    margin-bottom: 2rem;\n  }\n\n  .xl\\:-mb-24 {\n    margin-bottom: -6rem;\n  }\n\n  .xl\\:-mb-4 {\n    margin-bottom: -1rem;\n  }\n\n  .xl\\:-mb-6 {\n    margin-bottom: -1.5rem;\n  }\n\n  .xl\\:-mt-4 {\n    margin-top: -1rem;\n  }\n\n  .xl\\:mb-16 {\n    margin-bottom: 4rem;\n  }\n\n  .xl\\:mb-20 {\n    margin-bottom: 5rem;\n  }\n\n  .xl\\:mb-24 {\n    margin-bottom: 6rem;\n  }\n\n  .xl\\:mb-6 {\n    margin-bottom: 1.5rem;\n  }\n\n  .xl\\:ml-0 {\n    margin-left: 0px;\n  }\n\n  .xl\\:ml-1 {\n    margin-left: 0.25rem;\n  }\n\n  .xl\\:ml-1\\/12 {\n    margin-left: 8.333333333%;\n  }\n\n  .xl\\:ml-1\\/2 {\n    margin-left: 50%;\n  }\n\n  .xl\\:ml-1\\/3 {\n    margin-left: 33.333333333%;\n  }\n\n  .xl\\:ml-1\\/4 {\n    margin-left: 25%;\n  }\n\n  .xl\\:ml-1\\/6 {\n    margin-left: 16.66666667%;\n  }\n\n  .xl\\:ml-3 {\n    margin-left: 0.75rem;\n  }\n\n  .xl\\:ml-4 {\n    margin-left: 1rem;\n  }\n\n  .xl\\:mr-0 {\n    margin-right: 0px;\n  }\n\n  .xl\\:mr-1 {\n    margin-right: 0.25rem;\n  }\n\n  .xl\\:mr-1\\/4 {\n    margin-right: 25%;\n  }\n\n  .xl\\:mr-10 {\n    margin-right: 2.5rem;\n  }\n\n  .xl\\:mr-14 {\n    margin-right: 3.5rem;\n  }\n\n  .xl\\:mr-4 {\n    margin-right: 1rem;\n  }\n\n  .xl\\:mr-8 {\n    margin-right: 2rem;\n  }\n\n  .xl\\:mt-0 {\n    margin-top: 0px;\n  }\n\n  .xl\\:mt-10 {\n    margin-top: 2.5rem;\n  }\n\n  .xl\\:mt-12 {\n    margin-top: 3rem;\n  }\n\n  .xl\\:mt-16 {\n    margin-top: 4rem;\n  }\n\n  .xl\\:mt-20 {\n    margin-top: 5rem;\n  }\n\n  .xl\\:mt-40 {\n    margin-top: 10rem;\n  }\n\n  .xl\\:mt-56 {\n    margin-top: 14rem;\n  }\n\n  .xl\\:mt-6 {\n    margin-top: 1.5rem;\n  }\n\n  .xl\\:mt-8 {\n    margin-top: 2rem;\n  }\n\n  .xl\\:block {\n    display: block;\n  }\n\n  .xl\\:flex {\n    display: flex;\n  }\n\n  .xl\\:hidden {\n    display: none;\n  }\n\n  .xl\\:h-14 {\n    height: 3.5rem;\n  }\n\n  .xl\\:h-20 {\n    height: 5rem;\n  }\n\n  .xl\\:h-36 {\n    height: 9rem;\n  }\n\n  .xl\\:h-6 {\n    height: 1.5rem;\n  }\n\n  .xl\\:h-8 {\n    height: 2rem;\n  }\n\n  .xl\\:w-1\\/2 {\n    width: 50%;\n  }\n\n  .xl\\:w-1\\/3 {\n    width: 33.333333%;\n  }\n\n  .xl\\:w-1\\/4 {\n    width: 25%;\n  }\n\n  .xl\\:w-1\\/5 {\n    width: 20%;\n  }\n\n  .xl\\:w-1\\/6 {\n    width: 16.666667%;\n  }\n\n  .xl\\:w-10\\/12 {\n    width: 83.333333%;\n  }\n\n  .xl\\:w-2\\/3 {\n    width: 66.666667%;\n  }\n\n  .xl\\:w-2\\/5 {\n    width: 40%;\n  }\n\n  .xl\\:w-20 {\n    width: 5rem;\n  }\n\n  .xl\\:w-3\\/4 {\n    width: 75%;\n  }\n\n  .xl\\:w-3\\/5 {\n    width: 60%;\n  }\n\n  .xl\\:w-5\\/12 {\n    width: 41.666667%;\n  }\n\n  .xl\\:w-56 {\n    width: 14rem;\n  }\n\n  .xl\\:w-6 {\n    width: 1.5rem;\n  }\n\n  .xl\\:w-6\\/12 {\n    width: 50%;\n  }\n\n  .xl\\:w-7\\/12 {\n    width: 58.333333%;\n  }\n\n  .xl\\:w-8 {\n    width: 2rem;\n  }\n\n  .xl\\:w-80 {\n    width: 20rem;\n  }\n\n  .xl\\:w-\\[1200px\\] {\n    width: 1200px;\n  }\n\n  .xl\\:w-auto {\n    width: auto;\n  }\n\n  .xl\\:w-full {\n    width: 100%;\n  }\n\n  .xl\\:-translate-x-1\\/2 {\n    --tw-translate-x: -50%;\n    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n  }\n\n  .xl\\:-translate-y-1\\/2 {\n    --tw-translate-y: -50%;\n    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n  }\n\n  .xl\\:-translate-y-9 {\n    --tw-translate-y: -2.25rem;\n    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n  }\n\n  .xl\\:translate-y-0 {\n    --tw-translate-y: 0px;\n    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n  }\n\n  .xl\\:scale-90 {\n    --tw-scale-x: .9;\n    --tw-scale-y: .9;\n    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n  }\n\n  .xl\\:grid-cols-12 {\n    grid-template-columns: repeat(12, minmax(0, 1fr));\n  }\n\n  .xl\\:grid-cols-3 {\n    grid-template-columns: repeat(3, minmax(0, 1fr));\n  }\n\n  .xl\\:grid-cols-4 {\n    grid-template-columns: repeat(4, minmax(0, 1fr));\n  }\n\n  .xl\\:grid-cols-8 {\n    grid-template-columns: repeat(8, minmax(0, 1fr));\n  }\n\n  .xl\\:flex-wrap {\n    flex-wrap: wrap;\n  }\n\n  .xl\\:items-start {\n    align-items: flex-start;\n  }\n\n  .xl\\:justify-between {\n    justify-content: space-between;\n  }\n\n  .xl\\:gap-12 {\n    gap: 3rem;\n  }\n\n  .xl\\:gap-x-6 {\n    -moz-column-gap: 1.5rem;\n         column-gap: 1.5rem;\n  }\n\n  .xl\\:object-left {\n    -o-object-position: left;\n       object-position: left;\n  }\n\n  .xl\\:px-0 {\n    padding-left: 0px;\n    padding-right: 0px;\n  }\n\n  .xl\\:px-20 {\n    padding-left: 5rem;\n    padding-right: 5rem;\n  }\n\n  .xl\\:px-3 {\n    padding-left: 0.75rem;\n    padding-right: 0.75rem;\n  }\n\n  .xl\\:px-9 {\n    padding-left: 2.25rem;\n    padding-right: 2.25rem;\n  }\n\n  .xl\\:py-1 {\n    padding-top: 0.25rem;\n    padding-bottom: 0.25rem;\n  }\n\n  .xl\\:py-1\\.5 {\n    padding-top: 0.375rem;\n    padding-bottom: 0.375rem;\n  }\n\n  .xl\\:py-12 {\n    padding-top: 3rem;\n    padding-bottom: 3rem;\n  }\n\n  .xl\\:py-2 {\n    padding-top: 0.5rem;\n    padding-bottom: 0.5rem;\n  }\n\n  .xl\\:py-28 {\n    padding-top: 7rem;\n    padding-bottom: 7rem;\n  }\n\n  .xl\\:py-6 {\n    padding-top: 1.5rem;\n    padding-bottom: 1.5rem;\n  }\n\n  .xl\\:py-8 {\n    padding-top: 2rem;\n    padding-bottom: 2rem;\n  }\n\n  .xl\\:pb-14 {\n    padding-bottom: 3.5rem;\n  }\n\n  .xl\\:pb-32 {\n    padding-bottom: 8rem;\n  }\n\n  .xl\\:pr-6 {\n    padding-right: 1.5rem;\n  }\n\n  .xl\\:pt-1 {\n    padding-top: 0.25rem;\n  }\n\n  .xl\\:pt-1\\.5 {\n    padding-top: 0.375rem;\n  }\n\n  .xl\\:pt-16 {\n    padding-top: 4rem;\n  }\n\n  .xl\\:pt-24 {\n    padding-top: 6rem;\n  }\n\n  .xl\\:pt-40 {\n    padding-top: 10rem;\n  }\n\n  .xl\\:pt-60 {\n    padding-top: 15rem;\n  }\n\n  .xl\\:text-3-4 {\n    font-size: .875rem;\n  }\n\n  .xl\\:text-\\[120px\\] {\n    font-size: 120px;\n  }\n\n  .xl\\:text-\\[300px\\] {\n    font-size: 300px;\n  }\n\n  .peer:-moz-placeholder-shown ~ .xl\\:peer-placeholder-shown\\:-translate-y-2 {\n    --tw-translate-y: -0.5rem;\n    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n  }\n\n  .peer:placeholder-shown ~ .xl\\:peer-placeholder-shown\\:-translate-y-2 {\n    --tw-translate-y: -0.5rem;\n    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n  }\n}\n\n@media (min-width: 1536px) {\n\n  .\\32xl\\:-mb-32 {\n    margin-bottom: -8rem;\n  }\n\n  .\\32xl\\:ml-1 {\n    margin-left: 0.25rem;\n  }\n\n  .\\32xl\\:ml-5 {\n    margin-left: 1.25rem;\n  }\n\n  .\\32xl\\:mr-5 {\n    margin-right: 1.25rem;\n  }\n\n  .\\32xl\\:mr-8 {\n    margin-right: 2rem;\n  }\n\n  .\\32xl\\:grid {\n    display: grid;\n  }\n\n  .\\32xl\\:py-12 {\n    padding-top: 3rem;\n    padding-bottom: 3rem;\n  }\n\n  .\\32xl\\:py-16 {\n    padding-top: 4rem;\n    padding-bottom: 4rem;\n  }\n}\n"
__vite__updateStyle(__vite__id, __vite__css)
import.meta.hot.accept()
export default __vite__css
import.meta.hot.prune(()=>__vite__removeStyle(__vite__id))

Here is the injected style tags in head: image

looks like the id and the meta.hot is not set right for some reason. Im using DDEV as local development, but it seems to get the rest of the imports right.

espensgr avatar Mar 21 '23 15:03 espensgr

This is a normal behavior. unfonts.css is a virtual file, that's why it has a null byte in front (\u0000 or /@id/x00), it does not exist on your disk. During build, css is directly injected to head script, so you don't have a network request!

Note that the file can be empty, that meen no css is required (in that case, you will have head link tag injects to your head)

Still in dev mode, url are relative to the project root. At build time, they are moved to vite client output, and mapped by vite (filename will get hashed, also base prefix should be handled)

stafyniaksacha avatar Mar 21 '23 16:03 stafyniaksacha

Okey, that make sense i guess. But the fonts should get loaded, and they dont because of the /src/fonts url. Any idea on why it is not loading from the right url?

espensgr avatar Mar 22 '23 07:03 espensgr

This is still an issue, it's still trying to load from /src/fonts/ in dev mode. Anyone else still have this problem after 1.0.0? or any fix to it?

espensgr avatar Aug 03 '23 12:08 espensgr

Just as a follow up on this, i got a fix in my case. The fix was to set origin in the vite server config:

const vitePort: number = 5173;
server: {
      host: '0.0.0.0',
      strictPort: true,
      port: vitePort,
      cors: true,
      origin: `${process.env.DDEV_PRIMARY_URL}:${vitePort}`
 },

espensgr avatar Apr 25 '24 08:04 espensgr