/*!***********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/.pnpm/next@16.2.6_@babel+core@7.29.7_@playwright+test@1.58.2_react-dom@19.2.6_react@19.2.6__react@19.2.6_sass@1.77.4/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[2].use[1]!./node_modules/.pnpm/next@16.2.6_@babel+core@7.29.7_@playwright+test@1.58.2_react-dom@19.2.6_react@19.2.6__react@19.2.6_sass@1.77.4/node_modules/next/dist/build/webpack/loaders/next-font-loader/index.js??ruleSet[1].rules[15].oneOf[2].use[2]!./node_modules/.pnpm/next@16.2.6_@babel+core@7.29.7_@playwright+test@1.58.2_react-dom@19.2.6_react@19.2.6__react@19.2.6_sass@1.77.4/node_modules/next/font/google/target.css?{"path":"src/app/(site)/layout.tsx","import":"Montserrat","arguments":[{"subsets":["latin","cyrillic"],"weight":["700"],"variable":"--font-montserrat","display":"swap"}],"variableName":"montserrat"} ***!
  \***********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/* cyrillic-ext */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/_next/static/media/1164bad3a0289b49-s.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/_next/static/media/a99cac6e526aa727-s.p.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/_next/static/media/e469955cea812956-s.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/_next/static/media/d8710e769e1438a7-s.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/_next/static/media/0ba443039d62fc5b-s.p.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}@font-face {font-family: 'Montserrat Fallback';src: local("Arial");ascent-override: 85.79%;descent-override: 22.25%;line-gap-override: 0.00%;size-adjust: 112.83%
}.__className_8f5e6f {font-family: 'Montserrat', 'Montserrat Fallback';font-weight: 700;font-style: normal
}.__variable_8f5e6f {--font-montserrat: 'Montserrat', 'Montserrat Fallback'
}

/*!*******************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/.pnpm/next@16.2.6_@babel+core@7.29.7_@playwright+test@1.58.2_react-dom@19.2.6_react@19.2.6__react@19.2.6_sass@1.77.4/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[2].use[1]!./node_modules/.pnpm/next@16.2.6_@babel+core@7.29.7_@playwright+test@1.58.2_react-dom@19.2.6_react@19.2.6__react@19.2.6_sass@1.77.4/node_modules/next/dist/build/webpack/loaders/next-font-loader/index.js??ruleSet[1].rules[15].oneOf[2].use[2]!./node_modules/.pnpm/next@16.2.6_@babel+core@7.29.7_@playwright+test@1.58.2_react-dom@19.2.6_react@19.2.6__react@19.2.6_sass@1.77.4/node_modules/next/font/google/target.css?{"path":"src/app/(site)/layout.tsx","import":"Inter","arguments":[{"subsets":["latin","cyrillic"],"variable":"--font-inter","display":"swap","preload":false}],"variableName":"inter"} ***!
  \*******************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/* cyrillic-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/_next/static/media/ba9851c3c22cd980-s.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/_next/static/media/21350d82a1f187e9-s.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/_next/static/media/c5fe6dc8356a8c31-s.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/_next/static/media/19cfc7226ec3afaa-s.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/_next/static/media/df0a9ae256c0569c-s.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/_next/static/media/8e9860b6e62d6359-s.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/_next/static/media/e4af272ccee01ff0-s.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}@font-face {font-family: 'Inter Fallback';src: local("Arial");ascent-override: 90.44%;descent-override: 22.52%;line-gap-override: 0.00%;size-adjust: 107.12%
}.__className_62543b {font-family: 'Inter', 'Inter Fallback';font-style: normal
}.__variable_62543b {--font-inter: 'Inter', 'Inter Fallback'
}

/*!************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/.pnpm/next@16.2.6_@babel+core@7.29.7_@playwright+test@1.58.2_react-dom@19.2.6_react@19.2.6__react@19.2.6_sass@1.77.4/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[2].use[1]!./node_modules/.pnpm/next@16.2.6_@babel+core@7.29.7_@playwright+test@1.58.2_react-dom@19.2.6_react@19.2.6__react@19.2.6_sass@1.77.4/node_modules/next/dist/build/webpack/loaders/next-font-loader/index.js??ruleSet[1].rules[15].oneOf[2].use[2]!./node_modules/.pnpm/next@16.2.6_@babel+core@7.29.7_@playwright+test@1.58.2_react-dom@19.2.6_react@19.2.6__react@19.2.6_sass@1.77.4/node_modules/next/font/google/target.css?{"path":"src/app/(site)/layout.tsx","import":"DM_Sans","arguments":[{"subsets":["latin"],"variable":"--font-dmsans","display":"swap","preload":false}],"variableName":"dmsans"} ***!
  \************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/* latin-ext */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 100 1000;
  font-display: swap;
  src: url(/_next/static/media/7ab938503e4547a1-s.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 100 1000;
  font-display: swap;
  src: url(/_next/static/media/13971731025ec697-s.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}@font-face {font-family: 'DM Sans Fallback';src: local("Arial");ascent-override: 94.90%;descent-override: 29.66%;line-gap-override: 0.00%;size-adjust: 104.53%
}.__className_b6afbc {font-family: 'DM Sans', 'DM Sans Fallback';font-style: normal
}.__variable_b6afbc {--font-dmsans: 'DM Sans', 'DM Sans Fallback'
}

/*!**********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/.pnpm/next@16.2.6_@babel+core@7.29.7_@playwright+test@1.58.2_react-dom@19.2.6_react@19.2.6__react@19.2.6_sass@1.77.4/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[2].use[1]!./node_modules/.pnpm/next@16.2.6_@babel+core@7.29.7_@playwright+test@1.58.2_react-dom@19.2.6_react@19.2.6__react@19.2.6_sass@1.77.4/node_modules/next/dist/build/webpack/loaders/next-font-loader/index.js??ruleSet[1].rules[15].oneOf[2].use[2]!./node_modules/.pnpm/next@16.2.6_@babel+core@7.29.7_@playwright+test@1.58.2_react-dom@19.2.6_react@19.2.6__react@19.2.6_sass@1.77.4/node_modules/next/font/google/target.css?{"path":"src/app/(site)/layout.tsx","import":"Neucha","arguments":[{"subsets":["latin","cyrillic"],"weight":"400","variable":"--font-neucha","display":"block"}],"variableName":"neucha"} ***!
  \**********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/* cyrillic */
@font-face {
  font-family: 'Neucha';
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url(/_next/static/media/d5745f591ddb774b-s.p.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* latin */
@font-face {
  font-family: 'Neucha';
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url(/_next/static/media/b2d1eea89d3ce738-s.p.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}@font-face {font-family: 'Neucha Fallback';src: local("Arial");ascent-override: 92.57%;descent-override: 34.35%;line-gap-override: 5.76%;size-adjust: 83.02%
}.__className_72a2dc {font-family: 'Neucha', 'Neucha Fallback';font-weight: 400;font-style: normal
}.__variable_72a2dc {--font-neucha: 'Neucha', 'Neucha Fallback'
}

/*!***********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/.pnpm/next@16.2.6_@babel+core@7.29.7_@playwright+test@1.58.2_react-dom@19.2.6_react@19.2.6__react@19.2.6_sass@1.77.4/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[2].use[1]!./node_modules/.pnpm/next@16.2.6_@babel+core@7.29.7_@playwright+test@1.58.2_react-dom@19.2.6_react@19.2.6__react@19.2.6_sass@1.77.4/node_modules/next/dist/build/webpack/loaders/next-font-loader/index.js??ruleSet[1].rules[15].oneOf[2].use[2]!./node_modules/.pnpm/next@16.2.6_@babel+core@7.29.7_@playwright+test@1.58.2_react-dom@19.2.6_react@19.2.6__react@19.2.6_sass@1.77.4/node_modules/next/font/google/target.css?{"path":"src/app/(site)/layout.tsx","import":"Nunito","arguments":[{"subsets":["latin","cyrillic"],"weight":["400","600","700"],"variable":"--font-nunito","display":"swap"}],"variableName":"nunito"} ***!
  \***********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/* cyrillic-ext */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/_next/static/media/abfec168c8990f67-s.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/_next/static/media/3131c862d4942660-s.p.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/_next/static/media/6a9c36ea9dc9b36b-s.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/_next/static/media/e1694c6cb47c173f-s.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/_next/static/media/ee40bb094c99a29a-s.p.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/_next/static/media/abfec168c8990f67-s.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/_next/static/media/3131c862d4942660-s.p.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/_next/static/media/6a9c36ea9dc9b36b-s.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/_next/static/media/e1694c6cb47c173f-s.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/_next/static/media/ee40bb094c99a29a-s.p.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/_next/static/media/abfec168c8990f67-s.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/_next/static/media/3131c862d4942660-s.p.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/_next/static/media/6a9c36ea9dc9b36b-s.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/_next/static/media/e1694c6cb47c173f-s.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/_next/static/media/ee40bb094c99a29a-s.p.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}@font-face {font-family: 'Nunito Fallback';src: local("Arial");ascent-override: 99.71%;descent-override: 34.82%;line-gap-override: 0.00%;size-adjust: 101.39%
}.__className_daf96f {font-family: 'Nunito', 'Nunito Fallback';font-style: normal
}.__variable_daf96f {--font-nunito: 'Nunito', 'Nunito Fallback'
}

/*!********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/.pnpm/next@16.2.6_@babel+core@7.29.7_@playwright+test@1.58.2_react-dom@19.2.6_react@19.2.6__react@19.2.6_sass@1.77.4/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[2]!./node_modules/.pnpm/next@16.2.6_@babel+core@7.29.7_@playwright+test@1.58.2_react-dom@19.2.6_react@19.2.6__react@19.2.6_sass@1.77.4/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[3]!./src/app/(site)/globals.css ***!
  \********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/*! tailwindcss v4.3.2 | MIT License | https://tailwindcss.com */
@layer properties;
@layer theme, base, components, utilities;
@layer theme {
  :root, :host {
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
      "Courier New", monospace;
    --color-black: #000;
    --color-white: #fff;
    --spacing: 0.25rem;
    --container-xs: 20rem;
    --container-sm: 24rem;
    --container-md: 28rem;
    --container-xl: 36rem;
    --container-2xl: 42rem;
    --container-3xl: 48rem;
    --container-4xl: 56rem;
    --container-5xl: 64rem;
    --text-xs: 0.75rem;
    --text-xs--line-height: calc(1 / 0.75);
    --text-sm: 0.875rem;
    --text-sm--line-height: calc(1.25 / 0.875);
    --text-base: 1rem;
    --text-base--line-height: calc(1.5 / 1);
    --text-lg: 1.125rem;
    --text-lg--line-height: calc(1.75 / 1.125);
    --text-xl: 1.25rem;
    --text-xl--line-height: calc(1.75 / 1.25);
    --text-2xl: 1.5rem;
    --text-2xl--line-height: calc(2 / 1.5);
    --text-3xl: 1.875rem;
    --text-3xl--line-height: calc(2.25 / 1.875);
    --text-4xl: 2.25rem;
    --text-4xl--line-height: calc(2.5 / 2.25);
    --text-5xl: 3rem;
    --text-5xl--line-height: 1;
    --text-6xl: 3.75rem;
    --text-6xl--line-height: 1;
    --text-7xl: 4.5rem;
    --text-7xl--line-height: 1;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --leading-tight: 1.25;
    --leading-snug: 1.375;
    --leading-normal: 1.5;
    --leading-relaxed: 1.625;
    --radius-lg: 0.5rem;
    --radius-xl: 0.75rem;
    --radius-2xl: 1rem;
    --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
    --blur-sm: 8px;
    --blur-xl: 24px;
    --aspect-video: 16 / 9;
    --default-transition-duration: 150ms;
    --default-font-family: var(--font-body-active), ui-sans-serif, system-ui, sans-serif;
    --default-mono-font-family: var(--font-mono);
    --color-ink: var(--color-text);
    --color-line: var(--color-line);
    --shadow-lift: var(--shadow-lift);
    --shadow-lift-soft: var(--shadow-lift-soft);
    --font-display: var(--font-neucha), 'Comic Sans MS', cursive;
  }
}
@layer base {
  *, ::after, ::before, ::backdrop, ::file-selector-button {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    border: 0 solid;
  }
  html, :host {
    line-height: 1.5;
    -webkit-text-size-adjust: 100%;
    tab-size: 4;
    font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
    font-feature-settings: var(--default-font-feature-settings, normal);
    font-variation-settings: var(--default-font-variation-settings, normal);
    -webkit-tap-highlight-color: transparent;
  }
  hr {
    height: 0;
    color: inherit;
    border-top-width: 1px;
  }
  abbr:where([title]) {
    -webkit-text-decoration: underline dotted;
    text-decoration: underline dotted;
  }
  h1, h2, h3, h4, h5, h6 {
    font-size: inherit;
    font-weight: inherit;
  }
  a {
    color: inherit;
    -webkit-text-decoration: inherit;
    text-decoration: inherit;
  }
  b, strong {
    font-weight: bolder;
  }
  code, kbd, samp, pre {
    font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
    font-feature-settings: var(--default-mono-font-feature-settings, normal);
    font-variation-settings: var(--default-mono-font-variation-settings, normal);
    font-size: 1em;
  }
  small {
    font-size: 80%;
  }
  sub, sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
  }
  sub {
    bottom: -0.25em;
  }
  sup {
    top: -0.5em;
  }
  table {
    text-indent: 0;
    border-color: inherit;
    border-collapse: collapse;
  }
  :-moz-focusring {
    outline: auto;
  }
  progress {
    vertical-align: baseline;
  }
  summary {
    display: list-item;
  }
  ol, ul, menu {
    list-style: none;
  }
  img, svg, video, canvas, audio, iframe, embed, object {
    display: block;
    vertical-align: middle;
  }
  img, video {
    max-width: 100%;
    height: auto;
  }
  button, input, select, optgroup, textarea, ::file-selector-button {
    font: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    letter-spacing: inherit;
    color: inherit;
    border-radius: 0;
    background-color: transparent;
    opacity: 1;
  }
  :where(select:is([multiple], [size])) optgroup {
    font-weight: bolder;
  }
  :where(select:is([multiple], [size])) optgroup option {
    padding-inline-start: 20px;
  }
  ::file-selector-button {
    margin-inline-end: 4px;
  }
  ::placeholder {
    opacity: 1;
  }
  @supports (not (-webkit-appearance: -apple-pay-button))  or (contain-intrinsic-size: 1px) {
    ::placeholder {
      color: currentcolor;
      @supports (color: color-mix(in lab, red, red)) {
        color: color-mix(in oklab, currentcolor 50%, transparent);
      }
    }
  }
  textarea {
    resize: vertical;
  }
  ::-webkit-search-decoration {
    -webkit-appearance: none;
  }
  ::-webkit-date-and-time-value {
    min-height: 1lh;
    text-align: inherit;
  }
  ::-webkit-datetime-edit {
    display: inline-flex;
  }
  ::-webkit-datetime-edit-fields-wrapper {
    padding: 0;
  }
  ::-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 {
    padding-block: 0;
  }
  ::-webkit-calendar-picker-indicator {
    line-height: 1;
  }
  :-moz-ui-invalid {
    box-shadow: none;
  }
  button, input:where([type="button"], [type="reset"], [type="submit"]), ::file-selector-button {
    appearance: button;
  }
  ::-webkit-inner-spin-button, ::-webkit-outer-spin-button {
    height: auto;
  }
  [hidden]:where(:not([hidden="until-found"])) {
    display: none !important;
  }
}
@layer utilities {
  .\@container {
    container-type: inline-size;
  }
  .pointer-events-none {
    pointer-events: none;
  }
  .\!visible {
    visibility: visible !important;
  }
  .collapse {
    visibility: collapse;
  }
  .invisible {
    visibility: hidden;
  }
  .visible {
    visibility: visible;
  }
  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border-width: 0;
  }
  .absolute {
    position: absolute;
  }
  .fixed {
    position: fixed;
  }
  .relative {
    position: relative;
  }
  .static {
    position: static;
  }
  .sticky {
    position: sticky;
  }
  .inset-0 {
    inset: 0;
  }
  .inset-x-0 {
    inset-inline: 0;
  }
  .inset-y-0 {
    inset-block: 0;
  }
  .-top-4 {
    top: calc(var(--spacing) * -4);
  }
  .top-0 {
    top: 0;
  }
  .top-1 {
    top: var(--spacing);
  }
  .top-1\/2 {
    top: calc(1 / 2 * 100%);
  }
  .top-2 {
    top: calc(var(--spacing) * 2);
  }
  .top-3 {
    top: calc(var(--spacing) * 3);
  }
  .top-4 {
    top: calc(var(--spacing) * 4);
  }
  .top-\[-20\%\] {
    top: -20%;
  }
  .top-\[-22\%\] {
    top: -22%;
  }
  .top-\[0\.35rem\] {
    top: 0.35rem;
  }
  .top-\[calc\(var\(--nav-h\)\+1rem\)\] {
    top: calc(var(--nav-h) + 1rem);
  }
  .top-\[var\(--nav-h\)\] {
    top: var(--nav-h);
  }
  .-right-3 {
    right: calc(var(--spacing) * -3);
  }
  .-right-4 {
    right: calc(var(--spacing) * -4);
  }
  .-right-\[14\%\] {
    right: calc(14% * -1);
  }
  .right-0 {
    right: 0;
  }
  .right-1 {
    right: var(--spacing);
  }
  .right-2 {
    right: calc(var(--spacing) * 2);
  }
  .right-3 {
    right: calc(var(--spacing) * 3);
  }
  .right-4 {
    right: calc(var(--spacing) * 4);
  }
  .right-\[-2\%\] {
    right: -2%;
  }
  .right-\[-3\%\] {
    right: -3%;
  }
  .right-\[10\%\] {
    right: 10%;
  }
  .-bottom-2 {
    bottom: calc(var(--spacing) * -2);
  }
  .-bottom-6 {
    bottom: calc(var(--spacing) * -6);
  }
  .-bottom-\[12\%\] {
    bottom: calc(12% * -1);
  }
  .-bottom-\[14\%\] {
    bottom: calc(14% * -1);
  }
  .bottom-0 {
    bottom: 0;
  }
  .bottom-1 {
    bottom: var(--spacing);
  }
  .bottom-2\.5 {
    bottom: calc(var(--spacing) * 2.5);
  }
  .bottom-3 {
    bottom: calc(var(--spacing) * 3);
  }
  .bottom-4 {
    bottom: calc(var(--spacing) * 4);
  }
  .bottom-8 {
    bottom: calc(var(--spacing) * 8);
  }
  .bottom-\[-25\%\] {
    bottom: -25%;
  }
  .bottom-\[-26\%\] {
    bottom: -26%;
  }
  .bottom-\[calc\(4\.75rem\+env\(safe-area-inset-bottom\)\)\] {
    bottom: calc(4.75rem + env(safe-area-inset-bottom));
  }
  .-left-3 {
    left: calc(var(--spacing) * -3);
  }
  .-left-\[5\.5px\] {
    left: calc(5.5px * -1);
  }
  .-left-\[6\%\] {
    left: calc(6% * -1);
  }
  .left-0 {
    left: 0;
  }
  .left-1 {
    left: var(--spacing);
  }
  .left-1\/2 {
    left: calc(1 / 2 * 100%);
  }
  .left-2\.5 {
    left: calc(var(--spacing) * 2.5);
  }
  .left-3 {
    left: calc(var(--spacing) * 3);
  }
  .left-4 {
    left: calc(var(--spacing) * 4);
  }
  .left-6 {
    left: calc(var(--spacing) * 6);
  }
  .left-\[-2\%\] {
    left: -2%;
  }
  .left-\[-3\%\] {
    left: -3%;
  }
  .left-\[clamp\(0\.25rem\,4vw\,3\.5rem\)\] {
    left: clamp(0.25rem, 4vw, 3.5rem);
  }
  .isolate {
    isolation: isolate;
  }
  .-z-10 {
    z-index: calc(10 * -1);
  }
  .z-2 {
    z-index: 2;
  }
  .z-3 {
    z-index: 3;
  }
  .z-10 {
    z-index: 10;
  }
  .z-20 {
    z-index: 20;
  }
  .z-30 {
    z-index: 30;
  }
  .z-35 {
    z-index: 35;
  }
  .z-40 {
    z-index: 40;
  }
  .z-50 {
    z-index: 50;
  }
  .z-\[1\] {
    z-index: 1;
  }
  .z-\[2\] {
    z-index: 2;
  }
  .z-\[35\] {
    z-index: 35;
  }
  .z-\[55\] {
    z-index: 55;
  }
  .z-\[60\] {
    z-index: 60;
  }
  .z-\[90\] {
    z-index: 90;
  }
  .z-\[95\] {
    z-index: 95;
  }
  .z-\[96\] {
    z-index: 96;
  }
  .z-\[120\] {
    z-index: 120;
  }
  .col-span-1 {
    grid-column: span 1 / span 1;
  }
  .col-span-2 {
    grid-column: span 2 / span 2;
  }
  .col-span-3 {
    grid-column: span 3 / span 3;
  }
  .row-span-2 {
    grid-row: span 2 / span 2;
  }
  .float-right {
    float: right;
  }
  .container {
    width: 100%;
    @media (width >= 40rem) {
      max-width: 40rem;
    }
    @media (width >= 48rem) {
      max-width: 48rem;
    }
    @media (width >= 64rem) {
      max-width: 64rem;
    }
    @media (width >= 80rem) {
      max-width: 80rem;
    }
    @media (width >= 96rem) {
      max-width: 96rem;
    }
  }
  .m-0 {
    margin: 0;
  }
  .m-3 {
    margin: calc(var(--spacing) * 3);
  }
  .m-4 {
    margin: calc(var(--spacing) * 4);
  }
  .m-auto {
    margin: auto;
  }
  .-mx-5 {
    margin-inline: calc(var(--spacing) * -5);
  }
  .mx-\[clamp\(1\.25rem\,4\.5vw\,3\.75rem\)\] {
    margin-inline: clamp(1.25rem, 4.5vw, 3.75rem);
  }
  .mx-auto {
    margin-inline: auto;
  }
  .my-8 {
    margin-block: calc(var(--spacing) * 8);
  }
  .my-10 {
    margin-block: calc(var(--spacing) * 10);
  }
  .my-auto {
    margin-block: auto;
  }
  .-mt-2 {
    margin-top: calc(var(--spacing) * -2);
  }
  .-mt-4 {
    margin-top: calc(var(--spacing) * -4);
  }
  .-mt-5 {
    margin-top: calc(var(--spacing) * -5);
  }
  .-mt-6 {
    margin-top: calc(var(--spacing) * -6);
  }
  .-mt-7 {
    margin-top: calc(var(--spacing) * -7);
  }
  .mt-0\.5 {
    margin-top: calc(var(--spacing) * 0.5);
  }
  .mt-1 {
    margin-top: var(--spacing);
  }
  .mt-1\.5 {
    margin-top: calc(var(--spacing) * 1.5);
  }
  .mt-2 {
    margin-top: calc(var(--spacing) * 2);
  }
  .mt-2\.5 {
    margin-top: calc(var(--spacing) * 2.5);
  }
  .mt-3 {
    margin-top: calc(var(--spacing) * 3);
  }
  .mt-3\.5 {
    margin-top: calc(var(--spacing) * 3.5);
  }
  .mt-4 {
    margin-top: calc(var(--spacing) * 4);
  }
  .mt-5 {
    margin-top: calc(var(--spacing) * 5);
  }
  .mt-6 {
    margin-top: calc(var(--spacing) * 6);
  }
  .mt-7 {
    margin-top: calc(var(--spacing) * 7);
  }
  .mt-8 {
    margin-top: calc(var(--spacing) * 8);
  }
  .mt-9 {
    margin-top: calc(var(--spacing) * 9);
  }
  .mt-10 {
    margin-top: calc(var(--spacing) * 10);
  }
  .mt-12 {
    margin-top: calc(var(--spacing) * 12);
  }
  .mt-\[-2px\] {
    margin-top: -2px;
  }
  .mt-auto {
    margin-top: auto;
  }
  .mr-1 {
    margin-right: var(--spacing);
  }
  .mr-1\.5 {
    margin-right: calc(var(--spacing) * 1.5);
  }
  .mr-2 {
    margin-right: calc(var(--spacing) * 2);
  }
  .mr-auto {
    margin-right: auto;
  }
  .-mb-10 {
    margin-bottom: calc(var(--spacing) * -10);
  }
  .mb-1 {
    margin-bottom: var(--spacing);
  }
  .mb-1\.5 {
    margin-bottom: calc(var(--spacing) * 1.5);
  }
  .mb-2 {
    margin-bottom: calc(var(--spacing) * 2);
  }
  .mb-3 {
    margin-bottom: calc(var(--spacing) * 3);
  }
  .mb-4 {
    margin-bottom: calc(var(--spacing) * 4);
  }
  .mb-6 {
    margin-bottom: calc(var(--spacing) * 6);
  }
  .mb-7 {
    margin-bottom: calc(var(--spacing) * 7);
  }
  .mb-8 {
    margin-bottom: calc(var(--spacing) * 8);
  }
  .mb-10 {
    margin-bottom: calc(var(--spacing) * 10);
  }
  .mb-\[clamp\(2rem\,4\.5vw\,3\.75rem\)\] {
    margin-bottom: clamp(2rem, 4.5vw, 3.75rem);
  }
  .-ml-\[5px\] {
    margin-left: calc(5px * -1);
  }
  .ml-1 {
    margin-left: var(--spacing);
  }
  .ml-1\.5 {
    margin-left: calc(var(--spacing) * 1.5);
  }
  .ml-2 {
    margin-left: calc(var(--spacing) * 2);
  }
  .ml-4 {
    margin-left: calc(var(--spacing) * 4);
  }
  .ml-\[4px\] {
    margin-left: 4px;
  }
  .ml-\[5px\] {
    margin-left: 5px;
  }
  .ml-auto {
    margin-left: auto;
  }
  .line-clamp-2 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }
  .line-clamp-3 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
  }
  .block {
    display: block;
  }
  .contents {
    display: contents;
  }
  .flex {
    display: flex;
  }
  .grid {
    display: grid;
  }
  .hidden {
    display: none;
  }
  .inline {
    display: inline;
  }
  .inline-block {
    display: inline-block;
  }
  .inline-flex {
    display: inline-flex;
  }
  .inline-grid {
    display: inline-grid;
  }
  .table {
    display: table;
  }
  .\!aspect-auto {
    aspect-ratio: auto !important;
  }
  .aspect-\[3\/2\] {
    aspect-ratio: 3/2;
  }
  .aspect-\[3\/4\] {
    aspect-ratio: 3/4;
  }
  .aspect-\[4\/3\] {
    aspect-ratio: 4/3;
  }
  .aspect-\[4\/5\] {
    aspect-ratio: 4/5;
  }
  .aspect-\[9\/16\] {
    aspect-ratio: 9/16;
  }
  .aspect-\[16\/9\] {
    aspect-ratio: 16/9;
  }
  .aspect-\[16\/10\] {
    aspect-ratio: 16/10;
  }
  .aspect-\[461\.18\/479\.04\] {
    aspect-ratio: 461.18/479.04;
  }
  .aspect-square {
    aspect-ratio: 1 / 1;
  }
  .aspect-video {
    aspect-ratio: var(--aspect-video);
  }
  .\!size-12 {
    width: calc(var(--spacing) * 12) !important;
    height: calc(var(--spacing) * 12) !important;
  }
  .size-1\.5 {
    width: calc(var(--spacing) * 1.5);
    height: calc(var(--spacing) * 1.5);
  }
  .size-2\.5 {
    width: calc(var(--spacing) * 2.5);
    height: calc(var(--spacing) * 2.5);
  }
  .size-4 {
    width: calc(var(--spacing) * 4);
    height: calc(var(--spacing) * 4);
  }
  .size-5 {
    width: calc(var(--spacing) * 5);
    height: calc(var(--spacing) * 5);
  }
  .size-6 {
    width: calc(var(--spacing) * 6);
    height: calc(var(--spacing) * 6);
  }
  .size-8 {
    width: calc(var(--spacing) * 8);
    height: calc(var(--spacing) * 8);
  }
  .size-9 {
    width: calc(var(--spacing) * 9);
    height: calc(var(--spacing) * 9);
  }
  .size-10 {
    width: calc(var(--spacing) * 10);
    height: calc(var(--spacing) * 10);
  }
  .size-11 {
    width: calc(var(--spacing) * 11);
    height: calc(var(--spacing) * 11);
  }
  .size-12 {
    width: calc(var(--spacing) * 12);
    height: calc(var(--spacing) * 12);
  }
  .size-14 {
    width: calc(var(--spacing) * 14);
    height: calc(var(--spacing) * 14);
  }
  .size-20 {
    width: calc(var(--spacing) * 20);
    height: calc(var(--spacing) * 20);
  }
  .size-24 {
    width: calc(var(--spacing) * 24);
    height: calc(var(--spacing) * 24);
  }
  .size-40 {
    width: calc(var(--spacing) * 40);
    height: calc(var(--spacing) * 40);
  }
  .size-44 {
    width: calc(var(--spacing) * 44);
    height: calc(var(--spacing) * 44);
  }
  .size-\[1\.6rem\] {
    width: 1.6rem;
    height: 1.6rem;
  }
  .size-\[42px\] {
    width: 42px;
    height: 42px;
  }
  .size-\[46px\] {
    width: 46px;
    height: 46px;
  }
  .size-\[74px\] {
    width: 74px;
    height: 74px;
  }
  .size-\[208px\] {
    width: 208px;
    height: 208px;
  }
  .size-\[clamp\(46px\,10vw\,52px\)\] {
    width: clamp(46px, 10vw, 52px);
    height: clamp(46px, 10vw, 52px);
  }
  .size-full {
    width: 100%;
    height: 100%;
  }
  .h-0 {
    height: 0;
  }
  .h-2\.5 {
    height: calc(var(--spacing) * 2.5);
  }
  .h-8 {
    height: calc(var(--spacing) * 8);
  }
  .h-11 {
    height: calc(var(--spacing) * 11);
  }
  .h-12 {
    height: calc(var(--spacing) * 12);
  }
  .h-16 {
    height: calc(var(--spacing) * 16);
  }
  .h-80 {
    height: calc(var(--spacing) * 80);
  }
  .h-\[2\.5em\] {
    height: 2.5em;
  }
  .h-\[2\.65rem\] {
    height: 2.65rem;
  }
  .h-\[3px\] {
    height: 3px;
  }
  .h-\[54px\] {
    height: 54px;
  }
  .h-\[64\%\] {
    height: 64%;
  }
  .h-\[64px\] {
    height: 64px;
  }
  .h-\[70\%\] {
    height: 70%;
  }
  .h-\[72\%\] {
    height: 72%;
  }
  .h-\[74\%\] {
    height: 74%;
  }
  .h-\[120px\] {
    height: 120px;
  }
  .h-\[150px\] {
    height: 150px;
  }
  .h-\[200px\] {
    height: 200px;
  }
  .h-\[210px\] {
    height: 210px;
  }
  .h-\[220px\] {
    height: 220px;
  }
  .h-\[calc\(100\%-1rem\)\] {
    height: calc(100% - 1rem);
  }
  .h-auto {
    height: auto;
  }
  .h-fit {
    height: fit-content;
  }
  .h-full {
    height: 100%;
  }
  .max-h-\[52vh\] {
    max-height: 52vh;
  }
  .max-h-\[82vh\] {
    max-height: 82vh;
  }
  .max-h-\[86svh\] {
    max-height: 86svh;
  }
  .max-h-\[620px\] {
    max-height: 620px;
  }
  .max-h-\[min\(52vw\,420px\)\] {
    max-height: min(52vw, 420px);
  }
  .max-h-\[min\(75vh\,572px\)\] {
    max-height: min(75vh, 572px);
  }
  .max-h-\[min\(90dvh\,44rem\)\] {
    max-height: min(90dvh, 44rem);
  }
  .max-h-\[min\(90svh\,700px\)\] {
    max-height: min(90svh, 700px);
  }
  .max-h-\[min\(95vw\,620px\)\] {
    max-height: min(95vw, 620px);
  }
  .max-h-\[min\(130vw\,720px\)\] {
    max-height: min(130vw, 720px);
  }
  .max-h-full {
    max-height: 100%;
  }
  .min-h-0 {
    min-height: 0;
  }
  .min-h-11 {
    min-height: calc(var(--spacing) * 11);
  }
  .min-h-12 {
    min-height: calc(var(--spacing) * 12);
  }
  .min-h-\[3\.4em\] {
    min-height: 3.4em;
  }
  .min-h-\[6rem\] {
    min-height: 6rem;
  }
  .min-h-\[78svh\] {
    min-height: 78svh;
  }
  .min-h-\[100svh\] {
    min-height: 100svh;
  }
  .min-h-\[230px\] {
    min-height: 230px;
  }
  .w-0\.5 {
    width: calc(var(--spacing) * 0.5);
  }
  .w-2\.5 {
    width: calc(var(--spacing) * 2.5);
  }
  .w-7 {
    width: calc(var(--spacing) * 7);
  }
  .w-11 {
    width: calc(var(--spacing) * 11);
  }
  .w-12 {
    width: calc(var(--spacing) * 12);
  }
  .w-40 {
    width: calc(var(--spacing) * 40);
  }
  .w-48 {
    width: calc(var(--spacing) * 48);
  }
  .w-\[2\.65rem\] {
    width: 2.65rem;
  }
  .w-\[52\%\] {
    width: 52%;
  }
  .w-\[62\%\] {
    width: 62%;
  }
  .w-\[64px\] {
    width: 64px;
  }
  .w-\[84\%\] {
    width: 84%;
  }
  .w-\[96px\] {
    width: 96px;
  }
  .w-\[120px\] {
    width: 120px;
  }
  .w-\[150px\] {
    width: 150px;
  }
  .w-\[152px\] {
    width: 152px;
  }
  .w-\[260px\] {
    width: 260px;
  }
  .w-\[calc\(100\%-2rem\)\] {
    width: calc(100% - 2rem);
  }
  .w-\[clamp\(7rem\,18vw\,12rem\)\] {
    width: clamp(7rem, 18vw, 12rem);
  }
  .w-\[clamp\(84px\,11vw\,150px\)\] {
    width: clamp(84px, 11vw, 150px);
  }
  .w-\[clamp\(84px\,15vw\,180px\)\] {
    width: clamp(84px, 15vw, 180px);
  }
  .w-\[clamp\(85px\,14\.5vw\,167px\)\] {
    width: clamp(85px, 14.5vw, 167px);
  }
  .w-\[min\(18vw\,230px\)\] {
    width: min(18vw, 230px);
  }
  .w-\[min\(19rem\,calc\(100vw-2rem\)\)\] {
    width: min(19rem, calc(100vw - 2rem));
  }
  .w-\[min\(30vw\,220px\)\] {
    width: min(30vw, 220px);
  }
  .w-\[min\(32vw\,230px\)\] {
    width: min(32vw, 230px);
  }
  .w-\[min\(34vw\,260px\)\] {
    width: min(34vw, 260px);
  }
  .w-\[min\(36vw\,265px\)\] {
    width: min(36vw, 265px);
  }
  .w-\[min\(40vw\,440px\)\] {
    width: min(40vw, 440px);
  }
  .w-\[min\(62vw\,700px\)\] {
    width: min(62vw, 700px);
  }
  .w-auto {
    width: auto;
  }
  .w-fit {
    width: fit-content;
  }
  .w-full {
    width: 100%;
  }
  .w-max {
    width: max-content;
  }
  .max-w-2xl {
    max-width: var(--container-2xl);
  }
  .max-w-3xl {
    max-width: var(--container-3xl);
  }
  .max-w-4xl {
    max-width: var(--container-4xl);
  }
  .max-w-5xl {
    max-width: var(--container-5xl);
  }
  .max-w-\[12ch\] {
    max-width: 12ch;
  }
  .max-w-\[28rem\] {
    max-width: 28rem;
  }
  .max-w-\[40rem\] {
    max-width: 40rem;
  }
  .max-w-\[44ch\] {
    max-width: 44ch;
  }
  .max-w-\[46ch\] {
    max-width: 46ch;
  }
  .max-w-\[52ch\] {
    max-width: 52ch;
  }
  .max-w-\[56ch\] {
    max-width: 56ch;
  }
  .max-w-\[58ch\] {
    max-width: 58ch;
  }
  .max-w-\[62ch\] {
    max-width: 62ch;
  }
  .max-w-\[210px\] {
    max-width: 210px;
  }
  .max-w-\[300px\] {
    max-width: 300px;
  }
  .max-w-\[360px\] {
    max-width: 360px;
  }
  .max-w-\[760px\] {
    max-width: 760px;
  }
  .max-w-\[840px\] {
    max-width: 840px;
  }
  .max-w-\[900px\] {
    max-width: 900px;
  }
  .max-w-\[1080px\] {
    max-width: 1080px;
  }
  .max-w-\[min\(92vw\,1400px\)\] {
    max-width: min(92vw, 1400px);
  }
  .max-w-full {
    max-width: 100%;
  }
  .max-w-md {
    max-width: var(--container-md);
  }
  .max-w-none {
    max-width: none;
  }
  .max-w-prose {
    max-width: 65ch;
  }
  .max-w-sm {
    max-width: var(--container-sm);
  }
  .max-w-xl {
    max-width: var(--container-xl);
  }
  .max-w-xs {
    max-width: var(--container-xs);
  }
  .min-w-0 {
    min-width: 0;
  }
  .min-w-\[2\.6ch\] {
    min-width: 2.6ch;
  }
  .min-w-\[3\.5rem\] {
    min-width: 3.5rem;
  }
  .min-w-\[52px\] {
    min-width: 52px;
  }
  .min-w-\[240px\] {
    min-width: 240px;
  }
  .min-w-full {
    min-width: 100%;
  }
  .flex-1 {
    flex: 1;
  }
  .shrink-0 {
    flex-shrink: 0;
  }
  .grow {
    flex-grow: 1;
  }
  .basis-0 {
    flex-basis: 0;
  }
  .basis-\[calc\(100\%-3\.75rem\)\] {
    flex-basis: calc(100% - 3.75rem);
  }
  .border-collapse {
    border-collapse: collapse;
  }
  .origin-left {
    transform-origin: 0;
  }
  .-translate-x-1\/2 {
    --tw-translate-x: calc(calc(1 / 2 * 100%) * -1);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }
  .-translate-y-1\/2 {
    --tw-translate-y: calc(calc(1 / 2 * 100%) * -1);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }
  .translate-y-full {
    --tw-translate-y: 100%;
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }
  .scale-0 {
    --tw-scale-x: 0%;
    --tw-scale-y: 0%;
    --tw-scale-z: 0%;
    scale: var(--tw-scale-x) var(--tw-scale-y);
  }
  .scale-110 {
    --tw-scale-x: 110%;
    --tw-scale-y: 110%;
    --tw-scale-z: 110%;
    scale: var(--tw-scale-x) var(--tw-scale-y);
  }
  .-scale-x-100 {
    --tw-scale-x: calc(100% * -1);
    scale: var(--tw-scale-x) var(--tw-scale-y);
  }
  .-rotate-6 {
    rotate: calc(6deg * -1);
  }
  .-rotate-\[8deg\] {
    rotate: calc(8deg * -1);
  }
  .-rotate-\[11deg\] {
    rotate: calc(11deg * -1);
  }
  .rotate-180 {
    rotate: 180deg;
  }
  .rotate-\[5deg\] {
    rotate: 5deg;
  }
  .rotate-\[6deg\] {
    rotate: 6deg;
  }
  .rotate-\[9deg\] {
    rotate: 9deg;
  }
  .rotate-\[10deg\] {
    rotate: 10deg;
  }
  .transform {
    transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
  }
  .cursor-default {
    cursor: default;
  }
  .cursor-grab {
    cursor: grab;
  }
  .cursor-grabbing {
    cursor: grabbing;
  }
  .cursor-pointer {
    cursor: pointer;
  }
  .cursor-zoom-in {
    cursor: zoom-in;
  }
  .touch-none {
    touch-action: none;
  }
  .resize {
    resize: both;
  }
  .snap-x {
    scroll-snap-type: x var(--tw-scroll-snap-strictness);
  }
  .snap-mandatory {
    --tw-scroll-snap-strictness: mandatory;
  }
  .snap-start {
    scroll-snap-align: start;
  }
  .scroll-mt-24 {
    scroll-margin-top: calc(var(--spacing) * 24);
  }
  .scroll-px-5 {
    scroll-padding-inline: calc(var(--spacing) * 5);
  }
  .scrollbar-none {
    scrollbar-width: none;
  }
  .list-none {
    list-style-type: none;
  }
  .grid-flow-dense {
    grid-auto-flow: dense;
  }
  .auto-rows-\[170px\] {
    grid-auto-rows: 170px;
  }
  .auto-rows-\[180px\] {
    grid-auto-rows: 180px;
  }
  .grid-cols-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
  .grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .grid-cols-\[3\.5rem_1fr\] {
    grid-template-columns: 3.5rem 1fr;
  }
  .grid-cols-\[repeat\(auto-fill\,minmax\(240px\,1fr\)\)\] {
    grid-template-columns: repeat(auto-fill,minmax(240px,1fr));
  }
  .grid-cols-\[repeat\(auto-fill\,minmax\(260px\,1fr\)\)\] {
    grid-template-columns: repeat(auto-fill,minmax(260px,1fr));
  }
  .grid-cols-\[repeat\(auto-fill\,minmax\(280px\,1fr\)\)\] {
    grid-template-columns: repeat(auto-fill,minmax(280px,1fr));
  }
  .grid-cols-\[repeat\(auto-fit\,minmax\(220px\,1fr\)\)\] {
    grid-template-columns: repeat(auto-fit,minmax(220px,1fr));
  }
  .grid-cols-\[repeat\(auto-fit\,minmax\(230px\,1fr\)\)\] {
    grid-template-columns: repeat(auto-fit,minmax(230px,1fr));
  }
  .grid-cols-\[repeat\(auto-fit\,minmax\(240px\,1fr\)\)\] {
    grid-template-columns: repeat(auto-fit,minmax(240px,1fr));
  }
  .grid-cols-\[repeat\(auto-fit\,minmax\(260px\,1fr\)\)\] {
    grid-template-columns: repeat(auto-fit,minmax(260px,1fr));
  }
  .grid-rows-\[0fr\] {
    grid-template-rows: 0fr;
  }
  .grid-rows-\[1fr\] {
    grid-template-rows: 1fr;
  }
  .flex-col {
    flex-direction: column;
  }
  .flex-wrap {
    flex-wrap: wrap;
  }
  .place-items-center {
    place-items: center;
  }
  .content-start {
    align-content: flex-start;
  }
  .items-baseline {
    align-items: baseline;
  }
  .items-center {
    align-items: center;
  }
  .items-end {
    align-items: flex-end;
  }
  .items-start {
    align-items: flex-start;
  }
  .justify-between {
    justify-content: space-between;
  }
  .justify-center {
    justify-content: center;
  }
  .justify-end {
    justify-content: flex-end;
  }
  .gap-1 {
    gap: var(--spacing);
  }
  .gap-1\.5 {
    gap: calc(var(--spacing) * 1.5);
  }
  .gap-2 {
    gap: calc(var(--spacing) * 2);
  }
  .gap-2\.5 {
    gap: calc(var(--spacing) * 2.5);
  }
  .gap-3 {
    gap: calc(var(--spacing) * 3);
  }
  .gap-3\.5 {
    gap: calc(var(--spacing) * 3.5);
  }
  .gap-4 {
    gap: calc(var(--spacing) * 4);
  }
  .gap-5 {
    gap: calc(var(--spacing) * 5);
  }
  .gap-6 {
    gap: calc(var(--spacing) * 6);
  }
  .gap-8 {
    gap: calc(var(--spacing) * 8);
  }
  .gap-9 {
    gap: calc(var(--spacing) * 9);
  }
  .gap-10 {
    gap: calc(var(--spacing) * 10);
  }
  .gap-\[3px\] {
    gap: 3px;
  }
  .space-y-1 {
    :where(& > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(var(--spacing) * var(--tw-space-y-reverse));
      margin-block-end: calc(var(--spacing) * calc(1 - var(--tw-space-y-reverse)));
    }
  }
  .space-y-2\.5 {
    :where(& > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(calc(var(--spacing) * 2.5) * var(--tw-space-y-reverse));
      margin-block-end: calc(calc(var(--spacing) * 2.5) * calc(1 - var(--tw-space-y-reverse)));
    }
  }
  .space-y-10 {
    :where(& > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(calc(var(--spacing) * 10) * var(--tw-space-y-reverse));
      margin-block-end: calc(calc(var(--spacing) * 10) * calc(1 - var(--tw-space-y-reverse)));
    }
  }
  .space-y-11 {
    :where(& > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(calc(var(--spacing) * 11) * var(--tw-space-y-reverse));
      margin-block-end: calc(calc(var(--spacing) * 11) * calc(1 - var(--tw-space-y-reverse)));
    }
  }
  .gap-x-2 {
    column-gap: calc(var(--spacing) * 2);
  }
  .gap-x-2\.5 {
    column-gap: calc(var(--spacing) * 2.5);
  }
  .gap-x-3 {
    column-gap: calc(var(--spacing) * 3);
  }
  .gap-x-4 {
    column-gap: calc(var(--spacing) * 4);
  }
  .gap-x-5 {
    column-gap: calc(var(--spacing) * 5);
  }
  .gap-x-6 {
    column-gap: calc(var(--spacing) * 6);
  }
  .gap-x-7 {
    column-gap: calc(var(--spacing) * 7);
  }
  .gap-y-0\.5 {
    row-gap: calc(var(--spacing) * 0.5);
  }
  .gap-y-1 {
    row-gap: var(--spacing);
  }
  .gap-y-1\.5 {
    row-gap: calc(var(--spacing) * 1.5);
  }
  .divide-y {
    :where(& > :not(:last-child)) {
      --tw-divide-y-reverse: 0;
      border-bottom-style: var(--tw-border-style);
      border-top-style: var(--tw-border-style);
      border-top-width: calc(1px * var(--tw-divide-y-reverse));
      border-bottom-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
    }
  }
  .divide-\[var\(--color-line\)\] {
    :where(& > :not(:last-child)) {
      border-color: var(--color-line);
    }
  }
  .divide-white\/15 {
    :where(& > :not(:last-child)) {
      border-color: color-mix(in srgb, #fff 15%, transparent);
      @supports (color: color-mix(in lab, red, red)) {
        border-color: color-mix(in oklab, var(--color-white) 15%, transparent);
      }
    }
  }
  .self-center {
    align-self: center;
  }
  .self-start {
    align-self: flex-start;
  }
  .truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .overflow-hidden {
    overflow: hidden;
  }
  .overflow-x-auto {
    overflow-x: auto;
  }
  .overflow-x-clip {
    overflow-x: clip;
  }
  .overflow-x-hidden {
    overflow-x: hidden;
  }
  .overflow-y-auto {
    overflow-y: auto;
  }
  .overscroll-contain {
    overscroll-behavior: contain;
  }
  .scroll-smooth {
    scroll-behavior: smooth;
  }
  .rounded {
    border-radius: 0.25rem;
  }
  .rounded-2xl {
    border-radius: var(--radius-2xl);
  }
  .rounded-\[3px\] {
    border-radius: 3px;
  }
  .rounded-\[8px\] {
    border-radius: 8px;
  }
  .rounded-\[10px\] {
    border-radius: 10px;
  }
  .rounded-\[12px\] {
    border-radius: 12px;
  }
  .rounded-\[13px\] {
    border-radius: 13px;
  }
  .rounded-\[14px\] {
    border-radius: 14px;
  }
  .rounded-\[15px\] {
    border-radius: 15px;
  }
  .rounded-\[16px\] {
    border-radius: 16px;
  }
  .rounded-\[21px\] {
    border-radius: 21px;
  }
  .rounded-\[50\%\] {
    border-radius: 50%;
  }
  .rounded-\[calc\(var\(--radius-card\)\*1\.3\)\] {
    border-radius: calc(var(--radius-card) * 1.3);
  }
  .rounded-\[var\(--radius-band\)\] {
    border-radius: var(--radius-band);
  }
  .rounded-\[var\(--radius-card\)\] {
    border-radius: var(--radius-card);
  }
  .rounded-full {
    border-radius: calc(infinity * 1px);
  }
  .rounded-lg {
    border-radius: var(--radius-lg);
  }
  .rounded-none {
    border-radius: 0;
  }
  .rounded-xl {
    border-radius: var(--radius-xl);
  }
  .border {
    border-style: var(--tw-border-style);
    border-width: 1px;
  }
  .border-0 {
    border-style: var(--tw-border-style);
    border-width: 0px;
  }
  .border-2 {
    border-style: var(--tw-border-style);
    border-width: 2px;
  }
  .border-4 {
    border-style: var(--tw-border-style);
    border-width: 4px;
  }
  .border-\[1\.5px\] {
    border-style: var(--tw-border-style);
    border-width: 1.5px;
  }
  .border-\[3px\] {
    border-style: var(--tw-border-style);
    border-width: 3px;
  }
  .border-t {
    border-top-style: var(--tw-border-style);
    border-top-width: 1px;
  }
  .border-b {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
  }
  .border-b-2 {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 2px;
  }
  .border-l {
    border-left-style: var(--tw-border-style);
    border-left-width: 1px;
  }
  .border-l-\[1\.5px\] {
    border-left-style: var(--tw-border-style);
    border-left-width: 1.5px;
  }
  .border-l-\[3px\] {
    border-left-style: var(--tw-border-style);
    border-left-width: 3px;
  }
  .border-\[color-mix\(in_srgb\,var\(--m\)_35\%\,transparent\)\] {
    border-color: var(--m);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in srgb,var(--m) 35%,transparent);
    }
  }
  .border-\[var\(--accent\)\] {
    border-color: var(--accent);
  }
  .border-\[var\(--accent\,\#0097B2\)\] {
    border-color: var(--accent,#0097B2);
  }
  .border-\[var\(--accent-soft\)\] {
    border-color: var(--accent-soft);
  }
  .border-\[var\(--accent-tint-strong\,var\(--color-line\)\)\] {
    border-color: var(--accent-tint-strong,var(--color-line));
  }
  .border-\[var\(--color-line\)\] {
    border-color: var(--color-line);
  }
  .border-\[var\(--color-primary\)\] {
    border-color: var(--color-primary);
  }
  .border-\[var\(--color-surface\)\] {
    border-color: var(--color-surface);
  }
  .border-\[var\(--dark-line\)\] {
    border-color: var(--dark-line);
  }
  .border-\[var\(--dark-line\,\#22333a\)\] {
    border-color: var(--dark-line,#22333a);
  }
  .border-\[var\(--dark-line\,\#31434a\)\] {
    border-color: var(--dark-line,#31434a);
  }
  .border-current {
    border-color: currentcolor;
  }
  .border-current\/40 {
    border-color: currentcolor;
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, currentcolor 40%, transparent);
    }
  }
  .border-line {
    border-color: var(--color-line);
  }
  .border-transparent {
    border-color: transparent;
  }
  .border-white\/10 {
    border-color: color-mix(in srgb, #fff 10%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-white) 10%, transparent);
    }
  }
  .border-white\/15 {
    border-color: color-mix(in srgb, #fff 15%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-white) 15%, transparent);
    }
  }
  .border-white\/25 {
    border-color: color-mix(in srgb, #fff 25%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-white) 25%, transparent);
    }
  }
  .border-white\/35 {
    border-color: color-mix(in srgb, #fff 35%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-white) 35%, transparent);
    }
  }
  .border-white\/70 {
    border-color: color-mix(in srgb, #fff 70%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-white) 70%, transparent);
    }
  }
  .bg-\[\#f3efe7\] {
    background-color: #f3efe7;
  }
  .bg-\[color-mix\(in_srgb\,var\(--accent\)_22\%\,transparent\)\] {
    background-color: var(--accent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in srgb,var(--accent) 22%,transparent);
    }
  }
  .bg-\[color-mix\(in_srgb\,var\(--accent-soft\)_12\%\,transparent\)\] {
    background-color: var(--accent-soft);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in srgb,var(--accent-soft) 12%,transparent);
    }
  }
  .bg-\[color-mix\(in_srgb\,var\(--accent-soft\)_14\%\,transparent\)\] {
    background-color: var(--accent-soft);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in srgb,var(--accent-soft) 14%,transparent);
    }
  }
  .bg-\[color-mix\(in_srgb\,var\(--color-ink\)_8\%\,transparent\)\] {
    background-color: var(--color-ink);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in srgb,var(--color-ink) 8%,transparent);
    }
  }
  .bg-\[color-mix\(in_srgb\,var\(--color-line\)_45\%\,var\(--color-surface\)\)\] {
    background-color: var(--color-line);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in srgb,var(--color-line) 45%,var(--color-surface));
    }
  }
  .bg-\[color-mix\(in_srgb\,var\(--dark\)_6\%\,transparent\)\] {
    background-color: var(--dark);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in srgb,var(--dark) 6%,transparent);
    }
  }
  .bg-\[color-mix\(in_srgb\,var\(--dark\)_7\%\,transparent\)\] {
    background-color: var(--dark);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in srgb,var(--dark) 7%,transparent);
    }
  }
  .bg-\[color-mix\(in_srgb\,var\(--dark\)_75\%\,transparent\)\] {
    background-color: var(--dark);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in srgb,var(--dark) 75%,transparent);
    }
  }
  .bg-\[rgba\(16\,28\,32\,0\.06\)\] {
    background-color: rgba(16,28,32,0.06);
  }
  .bg-\[rgba\(16\,28\,32\,0\.75\)\] {
    background-color: rgba(16,28,32,0.75);
  }
  .bg-\[rgba\(78\,195\,214\,0\.12\)\] {
    background-color: rgba(78,195,214,0.12);
  }
  .bg-\[var\(--accent\)\] {
    background-color: var(--accent);
  }
  .bg-\[var\(--accent-deep\)\] {
    background-color: var(--accent-deep);
  }
  .bg-\[var\(--accent-soft\)\] {
    background-color: var(--accent-soft);
  }
  .bg-\[var\(--accent-tint\)\] {
    background-color: var(--accent-tint);
  }
  .bg-\[var\(--accent-tint\)\]\/45 {
    background-color: var(--accent-tint);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--accent-tint) 45%, transparent);
    }
  }
  .bg-\[var\(--accent-tint\)\]\/70 {
    background-color: var(--accent-tint);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--accent-tint) 70%, transparent);
    }
  }
  .bg-\[var\(--card-clay-tint\)\] {
    background-color: var(--card-clay-tint);
  }
  .bg-\[var\(--card-honey-tint\)\] {
    background-color: var(--card-honey-tint);
  }
  .bg-\[var\(--card-indigo-tint\)\] {
    background-color: var(--card-indigo-tint);
  }
  .bg-\[var\(--card-moss-tint\)\] {
    background-color: var(--card-moss-tint);
  }
  .bg-\[var\(--card-plum-tint\)\] {
    background-color: var(--card-plum-tint);
  }
  .bg-\[var\(--card-sand-tint\)\] {
    background-color: var(--card-sand-tint);
  }
  .bg-\[var\(--card-teal-tint\)\] {
    background-color: var(--card-teal-tint);
  }
  .bg-\[var\(--color-bg-alt\,\#f6f4ef\)\] {
    background-color: var(--color-bg-alt,#f6f4ef);
  }
  .bg-\[var\(--color-line\)\] {
    background-color: var(--color-line);
  }
  .bg-\[var\(--color-primary\)\] {
    background-color: var(--color-primary);
  }
  .bg-\[var\(--color-surface\)\] {
    background-color: var(--color-surface);
  }
  .bg-\[var\(--dark\)\] {
    background-color: var(--dark);
  }
  .bg-\[var\(--dark\)\]\/88 {
    background-color: var(--dark);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--dark) 88%, transparent);
    }
  }
  .bg-\[var\(--dark\,\#101c20\)\] {
    background-color: var(--dark,#101c20);
  }
  .bg-\[var\(--sand-tint\)\] {
    background-color: var(--sand-tint);
  }
  .bg-black {
    background-color: var(--color-black);
  }
  .bg-black\/15 {
    background-color: color-mix(in srgb, #000 15%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-black) 15%, transparent);
    }
  }
  .bg-black\/20 {
    background-color: color-mix(in srgb, #000 20%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-black) 20%, transparent);
    }
  }
  .bg-black\/40 {
    background-color: color-mix(in srgb, #000 40%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-black) 40%, transparent);
    }
  }
  .bg-black\/55 {
    background-color: color-mix(in srgb, #000 55%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-black) 55%, transparent);
    }
  }
  .bg-black\/60 {
    background-color: color-mix(in srgb, #000 60%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-black) 60%, transparent);
    }
  }
  .bg-black\/92 {
    background-color: color-mix(in srgb, #000 92%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-black) 92%, transparent);
    }
  }
  .bg-brand-soft {
    background-color: var(--color-primary-soft);
  }
  .bg-card {
    background-color: var(--color-surface);
  }
  .bg-sand {
    background-color: var(--color-accent);
  }
  .bg-transparent {
    background-color: transparent;
  }
  .bg-white {
    background-color: var(--color-white);
  }
  .bg-white\/5 {
    background-color: color-mix(in srgb, #fff 5%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-white) 5%, transparent);
    }
  }
  .bg-white\/12 {
    background-color: color-mix(in srgb, #fff 12%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-white) 12%, transparent);
    }
  }
  .bg-white\/75 {
    background-color: color-mix(in srgb, #fff 75%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-white) 75%, transparent);
    }
  }
  .bg-white\/80 {
    background-color: color-mix(in srgb, #fff 80%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-white) 80%, transparent);
    }
  }
  .bg-white\/85 {
    background-color: color-mix(in srgb, #fff 85%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-white) 85%, transparent);
    }
  }
  .bg-white\/90 {
    background-color: color-mix(in srgb, #fff 90%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-white) 90%, transparent);
    }
  }
  .bg-white\/\[0\.08\] {
    background-color: color-mix(in srgb, #fff 8%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-white) 8%, transparent);
    }
  }
  .bg-gradient-to-br {
    --tw-gradient-position: to bottom right in oklab;
    background-image: linear-gradient(var(--tw-gradient-stops));
  }
  .bg-gradient-to-t {
    --tw-gradient-position: to top in oklab;
    background-image: linear-gradient(var(--tw-gradient-stops));
  }
  .bg-\[linear-gradient\(135deg\,var\(--accent-tint\)\,var\(--color-bg\)_65\%\)\] {
    background-image: linear-gradient(135deg,var(--accent-tint),var(--color-bg) 65%);
  }
  .bg-\[linear-gradient\(165deg\,var\(--accent-tint\)\,var\(--color-bg\)_45\%\)\] {
    background-image: linear-gradient(165deg,var(--accent-tint),var(--color-bg) 45%);
  }
  .from-\[var\(--accent\)\] {
    --tw-gradient-from: var(--accent);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .from-black\/65 {
    --tw-gradient-from: color-mix(in srgb, #000 65%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-gradient-from: color-mix(in oklab, var(--color-black) 65%, transparent);
    }
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .from-black\/70 {
    --tw-gradient-from: color-mix(in srgb, #000 70%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-gradient-from: color-mix(in oklab, var(--color-black) 70%, transparent);
    }
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .to-\[var\(--accent-deep\)\] {
    --tw-gradient-to: var(--accent-deep);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .to-transparent {
    --tw-gradient-to: transparent;
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .\[mask-image\:url\(\'\/logo\/logo-white\.svg\'\)\] {
    mask-image: url('/logo/logo-white.svg');
  }
  .\[mask-size\:contain\] {
    mask-size: contain;
  }
  .\[mask-position\:center\] {
    mask-position: center;
  }
  .\[mask-repeat\:no-repeat\] {
    mask-repeat: no-repeat;
  }
  .object-contain {
    object-fit: contain;
  }
  .object-cover {
    object-fit: cover;
  }
  .p-0 {
    padding: 0;
  }
  .p-1 {
    padding: var(--spacing);
  }
  .p-2 {
    padding: calc(var(--spacing) * 2);
  }
  .p-3 {
    padding: calc(var(--spacing) * 3);
  }
  .p-4 {
    padding: calc(var(--spacing) * 4);
  }
  .p-5 {
    padding: calc(var(--spacing) * 5);
  }
  .p-6 {
    padding: calc(var(--spacing) * 6);
  }
  .p-7 {
    padding: calc(var(--spacing) * 7);
  }
  .p-9 {
    padding: calc(var(--spacing) * 9);
  }
  .p-10 {
    padding: calc(var(--spacing) * 10);
  }
  .p-\[clamp\(1\.5rem\,3\.5vw\,2\.5rem\)\] {
    padding: clamp(1.5rem, 3.5vw, 2.5rem);
  }
  .p-\[clamp\(2rem\,4\.5vw\,3\.75rem\)\] {
    padding: clamp(2rem, 4.5vw, 3.75rem);
  }
  .px-0 {
    padding-inline: 0;
  }
  .px-0\.5 {
    padding-inline: calc(var(--spacing) * 0.5);
  }
  .px-1 {
    padding-inline: var(--spacing);
  }
  .px-1\.5 {
    padding-inline: calc(var(--spacing) * 1.5);
  }
  .px-2 {
    padding-inline: calc(var(--spacing) * 2);
  }
  .px-2\.5 {
    padding-inline: calc(var(--spacing) * 2.5);
  }
  .px-3 {
    padding-inline: calc(var(--spacing) * 3);
  }
  .px-3\.5 {
    padding-inline: calc(var(--spacing) * 3.5);
  }
  .px-4 {
    padding-inline: calc(var(--spacing) * 4);
  }
  .px-5 {
    padding-inline: calc(var(--spacing) * 5);
  }
  .px-6 {
    padding-inline: calc(var(--spacing) * 6);
  }
  .px-7 {
    padding-inline: calc(var(--spacing) * 7);
  }
  .px-8 {
    padding-inline: calc(var(--spacing) * 8);
  }
  .px-9 {
    padding-inline: calc(var(--spacing) * 9);
  }
  .px-\[clamp\(1\.25rem\,4\.5vw\,3\.75rem\)\] {
    padding-inline: clamp(1.25rem, 4.5vw, 3.75rem);
  }
  .px-\[clamp\(1\.25rem\,4vw\,3\.5rem\)\] {
    padding-inline: clamp(1.25rem, 4vw, 3.5rem);
  }
  .py-0 {
    padding-block: 0;
  }
  .py-0\.5 {
    padding-block: calc(var(--spacing) * 0.5);
  }
  .py-1 {
    padding-block: var(--spacing);
  }
  .py-1\.5 {
    padding-block: calc(var(--spacing) * 1.5);
  }
  .py-2 {
    padding-block: calc(var(--spacing) * 2);
  }
  .py-2\.5 {
    padding-block: calc(var(--spacing) * 2.5);
  }
  .py-3 {
    padding-block: calc(var(--spacing) * 3);
  }
  .py-3\.5 {
    padding-block: calc(var(--spacing) * 3.5);
  }
  .py-4 {
    padding-block: calc(var(--spacing) * 4);
  }
  .py-5 {
    padding-block: calc(var(--spacing) * 5);
  }
  .py-6 {
    padding-block: calc(var(--spacing) * 6);
  }
  .py-8 {
    padding-block: calc(var(--spacing) * 8);
  }
  .py-10 {
    padding-block: calc(var(--spacing) * 10);
  }
  .py-\[clamp\(1\.5rem\,4vw\,3rem\)\] {
    padding-block: clamp(1.5rem, 4vw, 3rem);
  }
  .py-\[clamp\(2\.5rem\,5vw\,4\.375rem\)\] {
    padding-block: clamp(2.5rem, 5vw, 4.375rem);
  }
  .py-\[clamp\(2\.5rem\,5vw\,4rem\)\] {
    padding-block: clamp(2.5rem, 5vw, 4rem);
  }
  .py-\[clamp\(2\.25rem\,4\.5vw\,3\.5rem\)\] {
    padding-block: clamp(2.25rem, 4.5vw, 3.5rem);
  }
  .\!pt-\[…\] {
    padding-top: … !important;
  }
  .pt-0 {
    padding-top: 0;
  }
  .pt-0\.5 {
    padding-top: calc(var(--spacing) * 0.5);
  }
  .pt-1 {
    padding-top: var(--spacing);
  }
  .pt-1\.5 {
    padding-top: calc(var(--spacing) * 1.5);
  }
  .pt-3 {
    padding-top: calc(var(--spacing) * 3);
  }
  .pt-4 {
    padding-top: calc(var(--spacing) * 4);
  }
  .pt-6 {
    padding-top: calc(var(--spacing) * 6);
  }
  .pt-10 {
    padding-top: calc(var(--spacing) * 10);
  }
  .pt-12 {
    padding-top: calc(var(--spacing) * 12);
  }
  .pt-14 {
    padding-top: calc(var(--spacing) * 14);
  }
  .pt-16 {
    padding-top: calc(var(--spacing) * 16);
  }
  .pt-\[6vh\] {
    padding-top: 6vh;
  }
  .pt-\[12\%\] {
    padding-top: 12%;
  }
  .pt-\[calc\(var\(--nav-h\)\+clamp\(2\.5rem\,6vw\,4\.5rem\)\)\] {
    padding-top: calc(var(--nav-h) + clamp(2.5rem, 6vw, 4.5rem));
  }
  .pt-\[clamp\(1\.5rem\,3vw\,2\.5rem\)\] {
    padding-top: clamp(1.5rem, 3vw, 2.5rem);
  }
  .pt-\[clamp\(2\.5rem\,5vw\,4rem\)\] {
    padding-top: clamp(2.5rem, 5vw, 4rem);
  }
  .pt-\[clamp\(5rem\,11vh\,9\.375rem\)\] {
    padding-top: clamp(5rem, 11vh, 9.375rem);
  }
  .pt-\[var\(--nav-h\)\] {
    padding-top: var(--nav-h);
  }
  .pt-\[var\(--section-pad\)\] {
    padding-top: var(--section-pad);
  }
  .pr-5 {
    padding-right: calc(var(--spacing) * 5);
  }
  .pr-\[5\.2rem\] {
    padding-right: 5.2rem;
  }
  .pb-0 {
    padding-bottom: 0;
  }
  .pb-0\.5 {
    padding-bottom: calc(var(--spacing) * 0.5);
  }
  .pb-1 {
    padding-bottom: var(--spacing);
  }
  .pb-2 {
    padding-bottom: calc(var(--spacing) * 2);
  }
  .pb-4 {
    padding-bottom: calc(var(--spacing) * 4);
  }
  .pb-5 {
    padding-bottom: calc(var(--spacing) * 5);
  }
  .pb-7 {
    padding-bottom: calc(var(--spacing) * 7);
  }
  .pb-9 {
    padding-bottom: calc(var(--spacing) * 9);
  }
  .pb-10 {
    padding-bottom: calc(var(--spacing) * 10);
  }
  .pb-12 {
    padding-bottom: calc(var(--spacing) * 12);
  }
  .pb-16 {
    padding-bottom: calc(var(--spacing) * 16);
  }
  .pb-\[calc\(0\.75rem\+env\(safe-area-inset-bottom\)\)\] {
    padding-bottom: calc(0.75rem + env(safe-area-inset-bottom));
  }
  .pb-\[calc\(1\.5rem\+env\(safe-area-inset-bottom\,0px\)\)\] {
    padding-bottom: calc(1.5rem + env(safe-area-inset-bottom,0px));
  }
  .pb-\[clamp\(2\.25rem\,7vh\,6\.875rem\)\] {
    padding-bottom: clamp(2.25rem, 7vh, 6.875rem);
  }
  .pb-\[clamp\(2rem\,4\.5vw\,3\.75rem\)\] {
    padding-bottom: clamp(2rem, 4.5vw, 3.75rem);
  }
  .pb-\[clamp\(3\.5rem\,8vw\,6\.5rem\)\] {
    padding-bottom: clamp(3.5rem, 8vw, 6.5rem);
  }
  .pb-\[var\(--section-pad\)\] {
    padding-bottom: var(--section-pad);
  }
  .pl-0 {
    padding-left: 0;
  }
  .pl-2 {
    padding-left: calc(var(--spacing) * 2);
  }
  .pl-3 {
    padding-left: calc(var(--spacing) * 3);
  }
  .pl-4 {
    padding-left: calc(var(--spacing) * 4);
  }
  .pl-5 {
    padding-left: calc(var(--spacing) * 5);
  }
  .pl-6 {
    padding-left: calc(var(--spacing) * 6);
  }
  .pl-8 {
    padding-left: calc(var(--spacing) * 8);
  }
  .pl-11 {
    padding-left: calc(var(--spacing) * 11);
  }
  .pl-\[1\.85rem\] {
    padding-left: 1.85rem;
  }
  .text-center {
    text-align: center;
  }
  .text-left {
    text-align: left;
  }
  .text-right {
    text-align: right;
  }
  .font-\[family-name\:var\(--font-display\)\] {
    font-family: var(--font-display);
  }
  .font-\[family-name\:var\(--font-montserrat\)\] {
    font-family: var(--font-montserrat);
  }
  .font-\[family-name\:var\(--font-neucha\)\] {
    font-family: var(--font-neucha);
  }
  .font-\[family-name\:var\(--font-nunito\)\] {
    font-family: var(--font-nunito);
  }
  .font-display {
    font-family: var(--font-neucha), 'Comic Sans MS', cursive;
  }
  .font-mono {
    font-family: var(--font-mono);
  }
  .\!text-2xl {
    font-size: var(--text-2xl) !important;
    line-height: var(--tw-leading, var(--text-2xl--line-height)) !important;
  }
  .\!text-3xl {
    font-size: var(--text-3xl) !important;
    line-height: var(--tw-leading, var(--text-3xl--line-height)) !important;
  }
  .\!text-4xl {
    font-size: var(--text-4xl) !important;
    line-height: var(--tw-leading, var(--text-4xl--line-height)) !important;
  }
  .\!text-5xl {
    font-size: var(--text-5xl) !important;
    line-height: var(--tw-leading, var(--text-5xl--line-height)) !important;
  }
  .\!text-6xl {
    font-size: var(--text-6xl) !important;
    line-height: var(--tw-leading, var(--text-6xl--line-height)) !important;
  }
  .\!text-base {
    font-size: var(--text-base) !important;
    line-height: var(--tw-leading, var(--text-base--line-height)) !important;
  }
  .\!text-lg {
    font-size: var(--text-lg) !important;
    line-height: var(--tw-leading, var(--text-lg--line-height)) !important;
  }
  .\!text-sm {
    font-size: var(--text-sm) !important;
    line-height: var(--tw-leading, var(--text-sm--line-height)) !important;
  }
  .\!text-xl {
    font-size: var(--text-xl) !important;
    line-height: var(--tw-leading, var(--text-xl--line-height)) !important;
  }
  .text-2xl {
    font-size: var(--text-2xl);
    line-height: var(--tw-leading, var(--text-2xl--line-height));
  }
  .text-3xl {
    font-size: var(--text-3xl);
    line-height: var(--tw-leading, var(--text-3xl--line-height));
  }
  .text-4xl {
    font-size: var(--text-4xl);
    line-height: var(--tw-leading, var(--text-4xl--line-height));
  }
  .text-5xl {
    font-size: var(--text-5xl);
    line-height: var(--tw-leading, var(--text-5xl--line-height));
  }
  .text-7xl {
    font-size: var(--text-7xl);
    line-height: var(--tw-leading, var(--text-7xl--line-height));
  }
  .text-lg {
    font-size: var(--text-lg);
    line-height: var(--tw-leading, var(--text-lg--line-height));
  }
  .text-sm {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
  }
  .text-xl {
    font-size: var(--text-xl);
    line-height: var(--tw-leading, var(--text-xl--line-height));
  }
  .text-xs {
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
  }
  .\!text-\[0\.9rem\] {
    font-size: 0.9rem !important;
  }
  .\!text-\[1\.1rem\] {
    font-size: 1.1rem !important;
  }
  .\!text-\[1\.2rem\] {
    font-size: 1.2rem !important;
  }
  .\!text-\[1\.4rem\] {
    font-size: 1.4rem !important;
  }
  .\!text-\[1\.5rem\] {
    font-size: 1.5rem !important;
  }
  .\!text-\[1\.6rem\] {
    font-size: 1.6rem !important;
  }
  .\!text-\[1\.15rem\] {
    font-size: 1.15rem !important;
  }
  .\!text-\[1\.25rem\] {
    font-size: 1.25rem !important;
  }
  .\!text-\[1\.55rem\] {
    font-size: 1.55rem !important;
  }
  .\!text-\[1\.65rem\] {
    font-size: 1.65rem !important;
  }
  .\!text-\[1\.75rem\] {
    font-size: 1.75rem !important;
  }
  .text-\[0\.8rem\] {
    font-size: 0.8rem;
  }
  .text-\[0\.9rem\] {
    font-size: 0.9rem;
  }
  .text-\[0\.69rem\] {
    font-size: 0.69rem;
  }
  .text-\[0\.75rem\] {
    font-size: 0.75rem;
  }
  .text-\[0\.78rem\] {
    font-size: 0.78rem;
  }
  .text-\[0\.82rem\] {
    font-size: 0.82rem;
  }
  .text-\[0\.85rem\] {
    font-size: 0.85rem;
  }
  .text-\[0\.86rem\] {
    font-size: 0.86rem;
  }
  .text-\[0\.88rem\] {
    font-size: 0.88rem;
  }
  .text-\[0\.92rem\] {
    font-size: 0.92rem;
  }
  .text-\[0\.94rem\] {
    font-size: 0.94rem;
  }
  .text-\[0\.95rem\] {
    font-size: 0.95rem;
  }
  .text-\[0\.96rem\] {
    font-size: 0.96rem;
  }
  .text-\[0\.98rem\] {
    font-size: 0.98rem;
  }
  .text-\[1\.1rem\] {
    font-size: 1.1rem;
  }
  .text-\[1\.02rem\] {
    font-size: 1.02rem;
  }
  .text-\[1\.2rem\] {
    font-size: 1.2rem;
  }
  .text-\[1\.3rem\] {
    font-size: 1.3rem;
  }
  .text-\[1\.4rem\] {
    font-size: 1.4rem;
  }
  .text-\[1\.05rem\] {
    font-size: 1.05rem;
  }
  .text-\[1\.5rem\] {
    font-size: 1.5rem;
  }
  .text-\[1\.06rem\] {
    font-size: 1.06rem;
  }
  .text-\[1\.08rem\] {
    font-size: 1.08rem;
  }
  .text-\[1\.12rem\] {
    font-size: 1.12rem;
  }
  .text-\[1\.13rem\] {
    font-size: 1.13rem;
  }
  .text-\[1\.15rem\] {
    font-size: 1.15rem;
  }
  .text-\[1\.19rem\] {
    font-size: 1.19rem;
  }
  .text-\[1\.25rem\] {
    font-size: 1.25rem;
  }
  .text-\[1\.31rem\] {
    font-size: 1.31rem;
  }
  .text-\[1\.35rem\] {
    font-size: 1.35rem;
  }
  .text-\[1\.38rem\] {
    font-size: 1.38rem;
  }
  .text-\[1\.63rem\] {
    font-size: 1.63rem;
  }
  .text-\[1\.125rem\] {
    font-size: 1.125rem;
  }
  .text-\[1rem\] {
    font-size: 1rem;
  }
  .text-\[3\.25rem\] {
    font-size: 3.25rem;
  }
  .text-\[4rem\] {
    font-size: 4rem;
  }
  .text-\[7rem\] {
    font-size: 7rem;
  }
  .text-\[clamp\(1\.2rem\,2\.4vw\,1\.7rem\)\] {
    font-size: clamp(1.2rem, 2.4vw, 1.7rem);
  }
  .text-\[clamp\(1\.4rem\,2\.6vw\,1\.75rem\)\] {
    font-size: clamp(1.4rem, 2.6vw, 1.75rem);
  }
  .text-\[clamp\(1\.4rem\,3vw\,1\.85rem\)\] {
    font-size: clamp(1.4rem, 3vw, 1.85rem);
  }
  .text-\[clamp\(1\.5rem\,2\.6vw\,2\.25rem\)\] {
    font-size: clamp(1.5rem, 2.6vw, 2.25rem);
  }
  .text-\[clamp\(1\.5rem\,2\.6vw\,2\.125rem\)\] {
    font-size: clamp(1.5rem, 2.6vw, 2.125rem);
  }
  .text-\[clamp\(1\.5rem\,2\.6vw\,2rem\)\] {
    font-size: clamp(1.5rem, 2.6vw, 2rem);
  }
  .text-\[clamp\(1\.5rem\,2\.8vw\,2\.125rem\)\] {
    font-size: clamp(1.5rem, 2.8vw, 2.125rem);
  }
  .text-\[clamp\(1\.5rem\,2\.8vw\,2rem\)\] {
    font-size: clamp(1.5rem, 2.8vw, 2rem);
  }
  .text-\[clamp\(1\.5rem\,3vw\,2rem\)\] {
    font-size: clamp(1.5rem, 3vw, 2rem);
  }
  .text-\[clamp\(1\.06rem\,1\.5vw\,1\.31rem\)\] {
    font-size: clamp(1.06rem, 1.5vw, 1.31rem);
  }
  .text-\[clamp\(1\.6rem\,2\.6vw\,2\.125rem\)\] {
    font-size: clamp(1.6rem, 2.6vw, 2.125rem);
  }
  .text-\[clamp\(1\.7rem\,3\.4vw\,2\.5rem\)\] {
    font-size: clamp(1.7rem, 3.4vw, 2.5rem);
  }
  .text-\[clamp\(1\.9rem\,3\.2vw\,2\.6rem\)\] {
    font-size: clamp(1.9rem, 3.2vw, 2.6rem);
  }
  .text-\[clamp\(1\.9rem\,3\.6vw\,2\.75rem\)\] {
    font-size: clamp(1.9rem, 3.6vw, 2.75rem);
  }
  .text-\[clamp\(1\.9rem\,4vw\,3rem\)\] {
    font-size: clamp(1.9rem, 4vw, 3rem);
  }
  .text-\[clamp\(1\.19rem\,1\.8vw\,1\.56rem\)\] {
    font-size: clamp(1.19rem, 1.8vw, 1.56rem);
  }
  .text-\[clamp\(1\.35rem\,3vw\,1\.75rem\)\] {
    font-size: clamp(1.35rem, 3vw, 1.75rem);
  }
  .text-\[clamp\(1\.75rem\,3\.2vw\,2\.625rem\)\] {
    font-size: clamp(1.75rem, 3.2vw, 2.625rem);
  }
  .text-\[clamp\(1\.75rem\,3vw\,2\.5rem\)\] {
    font-size: clamp(1.75rem, 3vw, 2.5rem);
  }
  .text-\[clamp\(1\.875rem\,3\.6vw\,3rem\)\] {
    font-size: clamp(1.875rem, 3.6vw, 3rem);
  }
  .text-\[clamp\(2\.1rem\,4vw\,3rem\)\] {
    font-size: clamp(2.1rem, 4vw, 3rem);
  }
  .text-\[clamp\(2\.5rem\,5vw\,4\.75rem\)\] {
    font-size: clamp(2.5rem, 5vw, 4.75rem);
  }
  .text-\[clamp\(2\.125rem\,4\.6vw\,3\.625rem\)\] {
    font-size: clamp(2.125rem, 4.6vw, 3.625rem);
  }
  .text-\[clamp\(4\.5rem\,7vw\,6\.875rem\)\] {
    font-size: clamp(4.5rem, 7vw, 6.875rem);
  }
  .text-\[clamp\(26px\,3\.4vw\,42px\)\] {
    font-size: clamp(26px, 3.4vw, 42px);
  }
  .text-\[clamp\(90px\,16vw\,190px\)\] {
    font-size: clamp(90px, 16vw, 190px);
  }
  .leading-\[1\.1\] {
    --tw-leading: 1.1;
    line-height: 1.1;
  }
  .leading-\[1\.02\] {
    --tw-leading: 1.02;
    line-height: 1.02;
  }
  .leading-\[1\.3\] {
    --tw-leading: 1.3;
    line-height: 1.3;
  }
  .leading-\[1\.7\] {
    --tw-leading: 1.7;
    line-height: 1.7;
  }
  .leading-\[1\.08\] {
    --tw-leading: 1.08;
    line-height: 1.08;
  }
  .leading-\[1\.14\] {
    --tw-leading: 1.14;
    line-height: 1.14;
  }
  .leading-\[1\.25\] {
    --tw-leading: 1.25;
    line-height: 1.25;
  }
  .leading-\[1\.35\] {
    --tw-leading: 1.35;
    line-height: 1.35;
  }
  .leading-\[1\.45\] {
    --tw-leading: 1.45;
    line-height: 1.45;
  }
  .leading-\[1\.55\] {
    --tw-leading: 1.55;
    line-height: 1.55;
  }
  .leading-\[1\.65\] {
    --tw-leading: 1.65;
    line-height: 1.65;
  }
  .leading-none {
    --tw-leading: 1;
    line-height: 1;
  }
  .leading-normal {
    --tw-leading: var(--leading-normal);
    line-height: var(--leading-normal);
  }
  .leading-relaxed {
    --tw-leading: var(--leading-relaxed);
    line-height: var(--leading-relaxed);
  }
  .leading-snug {
    --tw-leading: var(--leading-snug);
    line-height: var(--leading-snug);
  }
  .leading-tight {
    --tw-leading: var(--leading-tight);
    line-height: var(--leading-tight);
  }
  .font-bold {
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
  }
  .font-medium {
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
  }
  .font-normal {
    --tw-font-weight: var(--font-weight-normal);
    font-weight: var(--font-weight-normal);
  }
  .font-semibold {
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
  }
  .tracking-\[0\.5px\] {
    --tw-tracking: 0.5px;
    letter-spacing: 0.5px;
  }
  .tracking-\[3px\] {
    --tw-tracking: 3px;
    letter-spacing: 3px;
  }
  .text-balance {
    text-wrap: balance;
  }
  .text-wrap {
    text-wrap: wrap;
  }
  .break-words {
    overflow-wrap: break-word;
  }
  .whitespace-nowrap {
    white-space: nowrap;
  }
  .whitespace-pre-line {
    white-space: pre-line;
  }
  .\!text-\[var\(--accent-deep\)\] {
    color: var(--accent-deep) !important;
  }
  .\!text-\[var\(--accent-soft\)\] {
    color: var(--accent-soft) !important;
  }
  .\!text-\[var\(--dark-fg\)\] {
    color: var(--dark-fg) !important;
  }
  .\!text-white {
    color: var(--color-white) !important;
  }
  .text-\[\#6b7478\] {
    color: #6b7478;
  }
  .text-\[\#6d8087\] {
    color: #6d8087;
  }
  .text-\[\#8a9296\] {
    color: #8a9296;
  }
  .text-\[\#8ea6ab\] {
    color: #8ea6ab;
  }
  .text-\[\#9aa6a9\] {
    color: #9aa6a9;
  }
  .text-\[\#9fabae\] {
    color: #9fabae;
  }
  .text-\[\#b9c6c9\] {
    color: #b9c6c9;
  }
  .text-\[\#cfd8da\] {
    color: #cfd8da;
  }
  .text-\[var\(--accent\)\] {
    color: var(--accent);
  }
  .text-\[var\(--accent-deep\)\] {
    color: var(--accent-deep);
  }
  .text-\[var\(--accent-deep\)\]\/30 {
    color: var(--accent-deep);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--accent-deep) 30%, transparent);
    }
  }
  .text-\[var\(--accent-soft\)\] {
    color: var(--accent-soft);
  }
  .text-\[var\(--brand\)\] {
    color: var(--brand);
  }
  .text-\[var\(--card-clay-ink\)\] {
    color: var(--card-clay-ink);
  }
  .text-\[var\(--card-clay-strong\)\] {
    color: var(--card-clay-strong);
  }
  .text-\[var\(--card-honey-ink\)\] {
    color: var(--card-honey-ink);
  }
  .text-\[var\(--card-honey-strong\)\] {
    color: var(--card-honey-strong);
  }
  .text-\[var\(--card-indigo-ink\)\] {
    color: var(--card-indigo-ink);
  }
  .text-\[var\(--card-indigo-strong\)\] {
    color: var(--card-indigo-strong);
  }
  .text-\[var\(--card-moss-ink\)\] {
    color: var(--card-moss-ink);
  }
  .text-\[var\(--card-moss-strong\)\] {
    color: var(--card-moss-strong);
  }
  .text-\[var\(--card-plum-ink\)\] {
    color: var(--card-plum-ink);
  }
  .text-\[var\(--card-plum-strong\)\] {
    color: var(--card-plum-strong);
  }
  .text-\[var\(--card-sand-ink\)\] {
    color: var(--card-sand-ink);
  }
  .text-\[var\(--card-sand-strong\)\] {
    color: var(--card-sand-strong);
  }
  .text-\[var\(--card-teal-ink\)\] {
    color: var(--card-teal-ink);
  }
  .text-\[var\(--card-teal-strong\)\] {
    color: var(--card-teal-strong);
  }
  .text-\[var\(--color-muted\)\] {
    color: var(--color-muted);
  }
  .text-\[var\(--color-primary\)\] {
    color: var(--color-primary);
  }
  .text-\[var\(--color-text\)\] {
    color: var(--color-text);
  }
  .text-\[var\(--dark\)\] {
    color: var(--dark);
  }
  .text-\[var\(--dark-fg\)\] {
    color: var(--dark-fg);
  }
  .text-\[var\(--dark-fg-muted\)\] {
    color: var(--dark-fg-muted);
  }
  .text-\[var\(--form-link\,var\(--color-primary-strong\)\)\] {
    color: var(--form-link,var(--color-primary-strong));
  }
  .text-\[var\(--ink\)\] {
    color: var(--ink);
  }
  .text-\[var\(--m\)\] {
    color: var(--m);
  }
  .text-\[var\(--muted\,\#4c5a5e\)\] {
    color: var(--muted,#4c5a5e);
  }
  .text-\[var\(--sand\)\] {
    color: var(--sand);
  }
  .text-\[var\(--sand-ink\)\] {
    color: var(--sand-ink);
  }
  .text-\[var\(--sand-ink-strong\)\] {
    color: var(--sand-ink-strong);
  }
  .text-\[var\(--text-quiet\)\] {
    color: var(--text-quiet);
  }
  .text-brand-strong {
    color: var(--color-primary-strong);
  }
  .text-brand-strong\/30 {
    color: var(--color-primary-strong);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-primary-strong) 30%, transparent);
    }
  }
  .text-ink {
    color: var(--color-text);
  }
  .text-soft {
    color: var(--color-muted);
  }
  .text-soft\/90 {
    color: var(--color-muted);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-muted) 90%, transparent);
    }
  }
  .text-white {
    color: var(--color-white);
  }
  .text-white\/60 {
    color: color-mix(in srgb, #fff 60%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-white) 60%, transparent);
    }
  }
  .text-white\/70 {
    color: color-mix(in srgb, #fff 70%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-white) 70%, transparent);
    }
  }
  .text-white\/80 {
    color: color-mix(in srgb, #fff 80%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-white) 80%, transparent);
    }
  }
  .text-white\/85 {
    color: color-mix(in srgb, #fff 85%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-white) 85%, transparent);
    }
  }
  .text-white\/90 {
    color: color-mix(in srgb, #fff 90%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-white) 90%, transparent);
    }
  }
  .capitalize {
    text-transform: capitalize;
  }
  .lowercase {
    text-transform: lowercase;
  }
  .italic {
    font-style: italic;
  }
  .tabular-nums {
    --tw-numeric-spacing: tabular-nums;
    font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);
  }
  .no-underline {
    text-decoration-line: none;
  }
  .underline {
    text-decoration-line: underline;
  }
  .decoration-\[var\(--accent\)\] {
    text-decoration-color: var(--accent);
  }
  .underline-offset-2 {
    text-underline-offset: 2px;
  }
  .underline-offset-4 {
    text-underline-offset: 4px;
  }
  .accent-\[var\(--color-primary\)\] {
    accent-color: var(--color-primary);
  }
  .accent-soft {
    accent-color: var(--color-muted);
  }
  .opacity-0 {
    opacity: 0%;
  }
  .opacity-5 {
    opacity: 5%;
  }
  .opacity-20 {
    opacity: 20%;
  }
  .opacity-30 {
    opacity: 30%;
  }
  .opacity-40 {
    opacity: 40%;
  }
  .opacity-45 {
    opacity: 45%;
  }
  .opacity-50 {
    opacity: 50%;
  }
  .opacity-55 {
    opacity: 55%;
  }
  .opacity-65 {
    opacity: 65%;
  }
  .opacity-75 {
    opacity: 75%;
  }
  .opacity-90 {
    opacity: 90%;
  }
  .opacity-100 {
    opacity: 100%;
  }
  .opacity-\[\.45\] {
    opacity: .45;
  }
  .opacity-\[0\.12\] {
    opacity: 0.12;
  }
  .opacity-\[0\.32\] {
    opacity: 0.32;
  }
  .opacity-\[var\(--card-veil-rest\,\.18\)\] {
    opacity: var(--card-veil-rest,.18);
  }
  .opacity-\[var\(--hero-photo-tint\,\.88\)\] {
    opacity: var(--hero-photo-tint,.88);
  }
  .mix-blend-multiply {
    mix-blend-mode: multiply;
  }
  .shadow {
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .shadow-2xl {
    --tw-shadow: 0 25px 50px -12px var(--tw-shadow-color, rgb(0 0 0 / 0.25));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .shadow-\[0_6px_18px_-6px_rgba\(0\,0\,0\,0\.5\)\] {
    --tw-shadow: 0 6px 18px -6px var(--tw-shadow-color, rgba(0,0,0,0.5));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .shadow-\[0_6px_18px_-6px_rgba\(0\,0\,0\,0\.6\)\] {
    --tw-shadow: 0 6px 18px -6px var(--tw-shadow-color, rgba(0,0,0,0.6));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .shadow-\[0_6px_18px_-6px_rgba\(0\,0\,0\,0\.45\)\] {
    --tw-shadow: 0 6px 18px -6px var(--tw-shadow-color, rgba(0,0,0,0.45));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .shadow-\[0_10px_24px_color-mix\(in_srgb\,var\(--dark\)_28\%\,transparent\)\] {
    --tw-shadow: 0 10px 24px var(--tw-shadow-color, var(--dark));
    @supports (color: color-mix(in lab, red, red)) {
      --tw-shadow: 0 10px 24px var(--tw-shadow-color, color-mix(in srgb,var(--dark) 28%,transparent));
    }
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .shadow-\[0_10px_28px_-8px_var\(--accent-deep\)\] {
    --tw-shadow: 0 10px 28px -8px var(--tw-shadow-color, var(--accent-deep));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .shadow-\[0_10px_30px_-18px_rgba\(0\,0\,0\,0\.55\)\] {
    --tw-shadow: 0 10px 30px -18px var(--tw-shadow-color, rgba(0,0,0,0.55));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .shadow-\[0_18px_40px_color-mix\(in_srgb\,var\(--dark\)_18\%\,transparent\)\] {
    --tw-shadow: 0 18px 40px var(--tw-shadow-color, var(--dark));
    @supports (color: color-mix(in lab, red, red)) {
      --tw-shadow: 0 18px 40px var(--tw-shadow-color, color-mix(in srgb,var(--dark) 18%,transparent));
    }
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .shadow-\[0_20px_38px_rgba\(16\,28\,32\,0\.13\)\] {
    --tw-shadow: 0 20px 38px var(--tw-shadow-color, rgba(16,28,32,0.13));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .shadow-lg {
    --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .shadow-md {
    --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .shadow-sm {
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .ring {
    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .ring-1 {
    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .ring-4 {
    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .ring-\[var\(--accent\)\] {
    --tw-ring-color: var(--accent);
  }
  .ring-\[var\(--color-bg\)\] {
    --tw-ring-color: var(--color-bg);
  }
  .outline {
    outline-style: var(--tw-outline-style);
    outline-width: 1px;
  }
  .blur {
    --tw-blur: blur(8px);
    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,);
  }
  .blur-xl {
    --tw-blur: blur(var(--blur-xl));
    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,);
  }
  .grayscale {
    --tw-grayscale: grayscale(100%);
    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,);
  }
  .filter {
    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,);
  }
  .backdrop-blur-sm {
    --tw-backdrop-blur: blur(var(--blur-sm));
    -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,);
    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,);
  }
  .backdrop-filter {
    -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,);
    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,);
  }
  .transition {
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--ease-site));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  .transition-\[background-color\,border-color\,color\,opacity\,scale\] {
    transition-property: background-color,border-color,color,opacity,scale;
    transition-timing-function: var(--tw-ease, var(--ease-site));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  .transition-\[background-color\,opacity\,scale\] {
    transition-property: background-color,opacity,scale;
    transition-timing-function: var(--tw-ease, var(--ease-site));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  .transition-\[background-color\,scale\] {
    transition-property: background-color,scale;
    transition-timing-function: var(--tw-ease, var(--ease-site));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  .transition-\[background-color\,transform\] {
    transition-property: background-color,transform;
    transition-timing-function: var(--tw-ease, var(--ease-site));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  .transition-\[border-color\,box-shadow\] {
    transition-property: border-color,box-shadow;
    transition-timing-function: var(--tw-ease, var(--ease-site));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  .transition-\[border-color\,opacity\,transform\] {
    transition-property: border-color,opacity,transform;
    transition-timing-function: var(--tw-ease, var(--ease-site));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  .transition-\[border-color\,opacity\] {
    transition-property: border-color,opacity;
    transition-timing-function: var(--tw-ease, var(--ease-site));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  .transition-\[grid-template-rows\] {
    transition-property: grid-template-rows;
    transition-timing-function: var(--tw-ease, var(--ease-site));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  .transition-\[transform\,border-color\,box-shadow\] {
    transition-property: transform,border-color,box-shadow;
    transition-timing-function: var(--tw-ease, var(--ease-site));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  .transition-\[transform\,box-shadow\] {
    transition-property: transform,box-shadow;
    transition-timing-function: var(--tw-ease, var(--ease-site));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  .transition-\[transform\,opacity\] {
    transition-property: transform,opacity;
    transition-timing-function: var(--tw-ease, var(--ease-site));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  .transition-\[width\,background-color\] {
    transition-property: width,background-color;
    transition-timing-function: var(--tw-ease, var(--ease-site));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  .transition-all {
    transition-property: all;
    transition-timing-function: var(--tw-ease, var(--ease-site));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  .transition-colors {
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
    transition-timing-function: var(--tw-ease, var(--ease-site));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  .transition-opacity {
    transition-property: opacity;
    transition-timing-function: var(--tw-ease, var(--ease-site));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  .transition-shadow {
    transition-property: box-shadow;
    transition-timing-function: var(--tw-ease, var(--ease-site));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  .transition-transform {
    transition-property: transform, translate, scale, rotate;
    transition-timing-function: var(--tw-ease, var(--ease-site));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  .duration-150 {
    --tw-duration: 150ms;
    transition-duration: 150ms;
  }
  .duration-200 {
    --tw-duration: 200ms;
    transition-duration: 200ms;
  }
  .duration-250 {
    --tw-duration: 250ms;
    transition-duration: 250ms;
  }
  .duration-300 {
    --tw-duration: 300ms;
    transition-duration: 300ms;
  }
  .duration-500 {
    --tw-duration: 500ms;
    transition-duration: 500ms;
  }
  .duration-700 {
    --tw-duration: 700ms;
    transition-duration: 700ms;
  }
  .ease-in-out {
    --tw-ease: var(--ease-in-out);
    transition-timing-function: var(--ease-in-out);
  }
  .ease-out {
    --tw-ease: var(--ease-site);
    transition-timing-function: var(--ease-site);
  }
  .outline-none {
    --tw-outline-style: none;
    outline-style: none;
  }
  .select-none {
    -webkit-user-select: none;
    user-select: none;
  }
  .\[counter-reset\:li\] {
    counter-reset: li;
  }
  .group-open\:rotate-90 {
    &:is(:where(.group):is([open], :popover-open, :open) *) {
      rotate: 90deg;
    }
  }
  .group-hover\:translate-x-0\.5 {
    &:is(:where(.group):hover *) {
      @media (hover: hover) {
        --tw-translate-x: calc(var(--spacing) * 0.5);
        translate: var(--tw-translate-x) var(--tw-translate-y);
      }
    }
  }
  .group-hover\:-translate-y-\[5px\] {
    &:is(:where(.group):hover *) {
      @media (hover: hover) {
        --tw-translate-y: calc(5px * -1);
        translate: var(--tw-translate-x) var(--tw-translate-y);
      }
    }
  }
  .group-hover\:scale-105 {
    &:is(:where(.group):hover *) {
      @media (hover: hover) {
        --tw-scale-x: 105%;
        --tw-scale-y: 105%;
        --tw-scale-z: 105%;
        scale: var(--tw-scale-x) var(--tw-scale-y);
      }
    }
  }
  .group-hover\:scale-110 {
    &:is(:where(.group):hover *) {
      @media (hover: hover) {
        --tw-scale-x: 110%;
        --tw-scale-y: 110%;
        --tw-scale-z: 110%;
        scale: var(--tw-scale-x) var(--tw-scale-y);
      }
    }
  }
  .group-hover\:scale-\[1\.03\] {
    &:is(:where(.group):hover *) {
      @media (hover: hover) {
        scale: 1.03;
      }
    }
  }
  .group-hover\:scale-\[1\.04\] {
    &:is(:where(.group):hover *) {
      @media (hover: hover) {
        scale: 1.04;
      }
    }
  }
  .group-hover\:scale-\[1\.05\] {
    &:is(:where(.group):hover *) {
      @media (hover: hover) {
        scale: 1.05;
      }
    }
  }
  .group-hover\:bg-black\/30 {
    &:is(:where(.group):hover *) {
      @media (hover: hover) {
        background-color: color-mix(in srgb, #000 30%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          background-color: color-mix(in oklab, var(--color-black) 30%, transparent);
        }
      }
    }
  }
  .group-hover\:bg-black\/80 {
    &:is(:where(.group):hover *) {
      @media (hover: hover) {
        background-color: color-mix(in srgb, #000 80%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          background-color: color-mix(in oklab, var(--color-black) 80%, transparent);
        }
      }
    }
  }
  .group-hover\:bg-white {
    &:is(:where(.group):hover *) {
      @media (hover: hover) {
        background-color: var(--color-white);
      }
    }
  }
  .group-hover\:text-\[var\(--accent-deep\)\] {
    &:is(:where(.group):hover *) {
      @media (hover: hover) {
        color: var(--accent-deep);
      }
    }
  }
  .group-hover\:text-\[var\(--accent-soft\)\] {
    &:is(:where(.group):hover *) {
      @media (hover: hover) {
        color: var(--accent-soft);
      }
    }
  }
  .group-hover\:underline {
    &:is(:where(.group):hover *) {
      @media (hover: hover) {
        text-decoration-line: underline;
      }
    }
  }
  .group-hover\:opacity-30 {
    &:is(:where(.group):hover *) {
      @media (hover: hover) {
        opacity: 30%;
      }
    }
  }
  .group-hover\:opacity-50 {
    &:is(:where(.group):hover *) {
      @media (hover: hover) {
        opacity: 50%;
      }
    }
  }
  .group-hover\:opacity-60 {
    &:is(:where(.group):hover *) {
      @media (hover: hover) {
        opacity: 60%;
      }
    }
  }
  .group-hover\:opacity-100 {
    &:is(:where(.group):hover *) {
      @media (hover: hover) {
        opacity: 100%;
      }
    }
  }
  .group-hover\:opacity-\[var\(--card-veil-hover\,\.5\)\] {
    &:is(:where(.group):hover *) {
      @media (hover: hover) {
        opacity: var(--card-veil-hover,.5);
      }
    }
  }
  .group-hover\:shadow-\[0_14px_28px_color-mix\(in_srgb\,var\(--dark\)_10\%\,transparent\)\] {
    &:is(:where(.group):hover *) {
      @media (hover: hover) {
        --tw-shadow: 0 14px 28px var(--tw-shadow-color, var(--dark));
        @supports (color: color-mix(in lab, red, red)) {
          --tw-shadow: 0 14px 28px var(--tw-shadow-color, color-mix(in srgb,var(--dark) 10%,transparent));
        }
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
      }
    }
  }
  .group-hover\/play\:scale-110 {
    &:is(:where(.group\/play):hover *) {
      @media (hover: hover) {
        --tw-scale-x: 110%;
        --tw-scale-y: 110%;
        --tw-scale-z: 110%;
        scale: var(--tw-scale-x) var(--tw-scale-y);
      }
    }
  }
  .group-hover\/play\:bg-black\/80 {
    &:is(:where(.group\/play):hover *) {
      @media (hover: hover) {
        background-color: color-mix(in srgb, #000 80%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          background-color: color-mix(in oklab, var(--color-black) 80%, transparent);
        }
      }
    }
  }
  .group-hover\/strip\:opacity-100 {
    &:is(:where(.group\/strip):hover *) {
      @media (hover: hover) {
        opacity: 100%;
      }
    }
  }
  .group-active\:scale-90 {
    &:is(:where(.group):active *) {
      --tw-scale-x: 90%;
      --tw-scale-y: 90%;
      --tw-scale-z: 90%;
      scale: var(--tw-scale-x) var(--tw-scale-y);
    }
  }
  .group-active\:duration-75 {
    &:is(:where(.group):active *) {
      --tw-duration: 75ms;
      transition-duration: 75ms;
    }
  }
  .group-active\/play\:scale-90 {
    &:is(:where(.group\/play):active *) {
      --tw-scale-x: 90%;
      --tw-scale-y: 90%;
      --tw-scale-z: 90%;
      scale: var(--tw-scale-x) var(--tw-scale-y);
    }
  }
  .group-active\/play\:bg-black\/90 {
    &:is(:where(.group\/play):active *) {
      background-color: color-mix(in srgb, #000 90%, transparent);
      @supports (color: color-mix(in lab, red, red)) {
        background-color: color-mix(in oklab, var(--color-black) 90%, transparent);
      }
    }
  }
  .group-active\/play\:duration-75 {
    &:is(:where(.group\/play):active *) {
      --tw-duration: 75ms;
      transition-duration: 75ms;
    }
  }
  .placeholder\:text-soft {
    &::placeholder {
      color: var(--color-muted);
    }
  }
  .backdrop\:bg-black\/55 {
    &::backdrop {
      background-color: color-mix(in srgb, #000 55%, transparent);
      @supports (color: color-mix(in lab, red, red)) {
        background-color: color-mix(in oklab, var(--color-black) 55%, transparent);
      }
    }
  }
  .before\:absolute {
    &::before {
      content: var(--tw-content);
      position: absolute;
    }
  }
  .before\:top-3 {
    &::before {
      content: var(--tw-content);
      top: calc(var(--spacing) * 3);
    }
  }
  .before\:bottom-3 {
    &::before {
      content: var(--tw-content);
      bottom: calc(var(--spacing) * 3);
    }
  }
  .before\:left-\[7px\] {
    &::before {
      content: var(--tw-content);
      left: 7px;
    }
  }
  .before\:w-\[2px\] {
    &::before {
      content: var(--tw-content);
      width: 2px;
    }
  }
  .before\:bg-\[var\(--color-line\)\] {
    &::before {
      content: var(--tw-content);
      background-color: var(--color-line);
    }
  }
  .before\:content-\[\'\'\] {
    &::before {
      --tw-content: '';
      content: var(--tw-content);
    }
  }
  .after\:absolute {
    &::after {
      content: var(--tw-content);
      position: absolute;
    }
  }
  .after\:inset-0 {
    &::after {
      content: var(--tw-content);
      inset: 0;
    }
  }
  .after\:rounded-\[var\(--radius-card\)\] {
    &::after {
      content: var(--tw-content);
      border-radius: var(--radius-card);
    }
  }
  .first\:mt-0 {
    &:first-child {
      margin-top: 0;
    }
  }
  .last\:border-0 {
    &:last-child {
      border-style: var(--tw-border-style);
      border-width: 0px;
    }
  }
  .last\:pb-0 {
    &:last-child {
      padding-bottom: 0;
    }
  }
  .focus-within\:ring-2 {
    &:focus-within {
      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }
  }
  .focus-within\:ring-\[var\(--accent-deep\)\] {
    &:focus-within {
      --tw-ring-color: var(--accent-deep);
    }
  }
  .focus-within\:ring-offset-2 {
    &:focus-within {
      --tw-ring-offset-width: 2px;
      --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    }
  }
  .hover\:-translate-y-0\.5 {
    &:hover {
      @media (hover: hover) {
        --tw-translate-y: calc(var(--spacing) * -0.5);
        translate: var(--tw-translate-x) var(--tw-translate-y);
      }
    }
  }
  .hover\:-translate-y-1 {
    &:hover {
      @media (hover: hover) {
        --tw-translate-y: calc(var(--spacing) * -1);
        translate: var(--tw-translate-x) var(--tw-translate-y);
      }
    }
  }
  .hover\:-translate-y-\[5px\] {
    &:hover {
      @media (hover: hover) {
        --tw-translate-y: calc(5px * -1);
        translate: var(--tw-translate-x) var(--tw-translate-y);
      }
    }
  }
  .hover\:scale-105 {
    &:hover {
      @media (hover: hover) {
        --tw-scale-x: 105%;
        --tw-scale-y: 105%;
        --tw-scale-z: 105%;
        scale: var(--tw-scale-x) var(--tw-scale-y);
      }
    }
  }
  .hover\:scale-\[1\.03\] {
    &:hover {
      @media (hover: hover) {
        scale: 1.03;
      }
    }
  }
  .hover\:border-\[var\(--accent\)\] {
    &:hover {
      @media (hover: hover) {
        border-color: var(--accent);
      }
    }
  }
  .hover\:border-\[var\(--accent-deep\)\] {
    &:hover {
      @media (hover: hover) {
        border-color: var(--accent-deep);
      }
    }
  }
  .hover\:border-\[var\(--accent-soft\)\] {
    &:hover {
      @media (hover: hover) {
        border-color: var(--accent-soft);
      }
    }
  }
  .hover\:border-\[var\(--brand\)\] {
    &:hover {
      @media (hover: hover) {
        border-color: var(--brand);
      }
    }
  }
  .hover\:border-\[var\(--color-primary\)\] {
    &:hover {
      @media (hover: hover) {
        border-color: var(--color-primary);
      }
    }
  }
  .hover\:border-\[var\(--m\)\] {
    &:hover {
      @media (hover: hover) {
        border-color: var(--m);
      }
    }
  }
  .hover\:border-white {
    &:hover {
      @media (hover: hover) {
        border-color: var(--color-white);
      }
    }
  }
  .hover\:bg-\[var\(--accent-soft\)\] {
    &:hover {
      @media (hover: hover) {
        background-color: var(--accent-soft);
      }
    }
  }
  .hover\:bg-\[var\(--accent-tint\)\] {
    &:hover {
      @media (hover: hover) {
        background-color: var(--accent-tint);
      }
    }
  }
  .hover\:bg-\[var\(--brand\)\] {
    &:hover {
      @media (hover: hover) {
        background-color: var(--brand);
      }
    }
  }
  .hover\:bg-\[var\(--color-primary-strong\)\] {
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-primary-strong);
      }
    }
  }
  .hover\:bg-\[var\(--m\)\] {
    &:hover {
      @media (hover: hover) {
        background-color: var(--m);
      }
    }
  }
  .hover\:bg-black\/5 {
    &:hover {
      @media (hover: hover) {
        background-color: color-mix(in srgb, #000 5%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          background-color: color-mix(in oklab, var(--color-black) 5%, transparent);
        }
      }
    }
  }
  .hover\:bg-black\/80 {
    &:hover {
      @media (hover: hover) {
        background-color: color-mix(in srgb, #000 80%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          background-color: color-mix(in oklab, var(--color-black) 80%, transparent);
        }
      }
    }
  }
  .hover\:bg-white\/5 {
    &:hover {
      @media (hover: hover) {
        background-color: color-mix(in srgb, #fff 5%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          background-color: color-mix(in oklab, var(--color-white) 5%, transparent);
        }
      }
    }
  }
  .hover\:bg-white\/10 {
    &:hover {
      @media (hover: hover) {
        background-color: color-mix(in srgb, #fff 10%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          background-color: color-mix(in oklab, var(--color-white) 10%, transparent);
        }
      }
    }
  }
  .hover\:bg-white\/90 {
    &:hover {
      @media (hover: hover) {
        background-color: color-mix(in srgb, #fff 90%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          background-color: color-mix(in oklab, var(--color-white) 90%, transparent);
        }
      }
    }
  }
  .hover\:bg-white\/\[\.06\] {
    &:hover {
      @media (hover: hover) {
        background-color: color-mix(in srgb, #fff 6%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          background-color: color-mix(in oklab, var(--color-white) 6%, transparent);
        }
      }
    }
  }
  .hover\:text-\[var\(--accent\)\] {
    &:hover {
      @media (hover: hover) {
        color: var(--accent);
      }
    }
  }
  .hover\:text-\[var\(--accent-deep\)\] {
    &:hover {
      @media (hover: hover) {
        color: var(--accent-deep);
      }
    }
  }
  .hover\:text-\[var\(--accent-soft\)\] {
    &:hover {
      @media (hover: hover) {
        color: var(--accent-soft);
      }
    }
  }
  .hover\:text-\[var\(--color-primary\)\] {
    &:hover {
      @media (hover: hover) {
        color: var(--color-primary);
      }
    }
  }
  .hover\:text-\[var\(--color-text\)\] {
    &:hover {
      @media (hover: hover) {
        color: var(--color-text);
      }
    }
  }
  .hover\:text-brand-strong {
    &:hover {
      @media (hover: hover) {
        color: var(--color-primary-strong);
      }
    }
  }
  .hover\:text-white {
    &:hover {
      @media (hover: hover) {
        color: var(--color-white);
      }
    }
  }
  .hover\:no-underline {
    &:hover {
      @media (hover: hover) {
        text-decoration-line: none;
      }
    }
  }
  .hover\:underline {
    &:hover {
      @media (hover: hover) {
        text-decoration-line: underline;
      }
    }
  }
  .hover\:opacity-80 {
    &:hover {
      @media (hover: hover) {
        opacity: 80%;
      }
    }
  }
  .hover\:opacity-100 {
    &:hover {
      @media (hover: hover) {
        opacity: 100%;
      }
    }
  }
  .hover\:shadow-\[0_12px_26px_color-mix\(in_srgb\,var\(--dark\)_10\%\,transparent\)\] {
    &:hover {
      @media (hover: hover) {
        --tw-shadow: 0 12px 26px var(--tw-shadow-color, var(--dark));
        @supports (color: color-mix(in lab, red, red)) {
          --tw-shadow: 0 12px 26px var(--tw-shadow-color, color-mix(in srgb,var(--dark) 10%,transparent));
        }
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
      }
    }
  }
  .hover\:shadow-\[0_16px_34px_color-mix\(in_srgb\,var\(--dark\)_12\%\,transparent\)\] {
    &:hover {
      @media (hover: hover) {
        --tw-shadow: 0 16px 34px var(--tw-shadow-color, var(--dark));
        @supports (color: color-mix(in lab, red, red)) {
          --tw-shadow: 0 16px 34px var(--tw-shadow-color, color-mix(in srgb,var(--dark) 12%,transparent));
        }
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
      }
    }
  }
  .hover\:shadow-lift {
    &:hover {
      @media (hover: hover) {
        --tw-shadow: var(--shadow-lift);
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
      }
    }
  }
  .hover\:shadow-lift-soft {
    &:hover {
      @media (hover: hover) {
        --tw-shadow: var(--shadow-lift-soft);
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
      }
    }
  }
  .hover\:shadow-md {
    &:hover {
      @media (hover: hover) {
        --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
      }
    }
  }
  .focus\:not-sr-only {
    &:focus {
      position: static;
      width: auto;
      height: auto;
      padding: 0;
      margin: 0;
      overflow: visible;
      clip-path: none;
      white-space: normal;
    }
  }
  .focus\:fixed {
    &:focus {
      position: fixed;
    }
  }
  .focus\:top-4 {
    &:focus {
      top: calc(var(--spacing) * 4);
    }
  }
  .focus\:left-4 {
    &:focus {
      left: calc(var(--spacing) * 4);
    }
  }
  .focus\:z-\[100\] {
    &:focus {
      z-index: 100;
    }
  }
  .focus\:rounded-full {
    &:focus {
      border-radius: calc(infinity * 1px);
    }
  }
  .focus\:bg-card {
    &:focus {
      background-color: var(--color-surface);
    }
  }
  .focus\:px-5 {
    &:focus {
      padding-inline: calc(var(--spacing) * 5);
    }
  }
  .focus\:py-3 {
    &:focus {
      padding-block: calc(var(--spacing) * 3);
    }
  }
  .focus\:font-bold {
    &:focus {
      --tw-font-weight: var(--font-weight-bold);
      font-weight: var(--font-weight-bold);
    }
  }
  .focus\:shadow-xl {
    &:focus {
      --tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 8px 10px -6px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }
  }
  .focus\:outline-none {
    &:focus {
      --tw-outline-style: none;
      outline-style: none;
    }
  }
  .focus-visible\:outline-2 {
    &:focus-visible {
      outline-style: var(--tw-outline-style);
      outline-width: 2px;
    }
  }
  .focus-visible\:outline-offset-2 {
    &:focus-visible {
      outline-offset: 2px;
    }
  }
  .focus-visible\:outline-\[var\(--accent-deep\)\] {
    &:focus-visible {
      outline-color: var(--accent-deep);
    }
  }
  .active\:scale-90 {
    &:active {
      --tw-scale-x: 90%;
      --tw-scale-y: 90%;
      --tw-scale-z: 90%;
      scale: var(--tw-scale-x) var(--tw-scale-y);
    }
  }
  .active\:scale-\[0\.97\] {
    &:active {
      scale: 0.97;
    }
  }
  .active\:bg-black\/90 {
    &:active {
      background-color: color-mix(in srgb, #000 90%, transparent);
      @supports (color: color-mix(in lab, red, red)) {
        background-color: color-mix(in oklab, var(--color-black) 90%, transparent);
      }
    }
  }
  .active\:duration-75 {
    &:active {
      --tw-duration: 75ms;
      transition-duration: 75ms;
    }
  }
  .disabled\:scale-100 {
    &:disabled {
      --tw-scale-x: 100%;
      --tw-scale-y: 100%;
      --tw-scale-z: 100%;
      scale: var(--tw-scale-x) var(--tw-scale-y);
    }
  }
  .disabled\:opacity-30 {
    &:disabled {
      opacity: 30%;
    }
  }
  .disabled\:opacity-35 {
    &:disabled {
      opacity: 35%;
    }
  }
  .disabled\:hover\:border-\[var\(--color-line\)\] {
    &:disabled {
      &:hover {
        @media (hover: hover) {
          border-color: var(--color-line);
        }
      }
    }
  }
  .disabled\:hover\:bg-black\/60 {
    &:disabled {
      &:hover {
        @media (hover: hover) {
          background-color: color-mix(in srgb, #000 60%, transparent);
          @supports (color: color-mix(in lab, red, red)) {
            background-color: color-mix(in oklab, var(--color-black) 60%, transparent);
          }
        }
      }
    }
  }
  .disabled\:hover\:bg-card {
    &:disabled {
      &:hover {
        @media (hover: hover) {
          background-color: var(--color-surface);
        }
      }
    }
  }
  .has-\[\:checked\]\:border-\[var\(--accent-deep\)\] {
    &:has(*:is(:checked)) {
      border-color: var(--accent-deep);
    }
  }
  .has-\[\:checked\]\:bg-\[var\(--accent-tint\)\] {
    &:has(*:is(:checked)) {
      background-color: var(--accent-tint);
    }
  }
  .has-\[\:focus-visible\]\:outline {
    &:has(*:is(:focus-visible)) {
      outline-style: var(--tw-outline-style);
      outline-width: 1px;
    }
  }
  .has-\[\:focus-visible\]\:outline-2 {
    &:has(*:is(:focus-visible)) {
      outline-style: var(--tw-outline-style);
      outline-width: 2px;
    }
  }
  .has-\[\:focus-visible\]\:outline-offset-2 {
    &:has(*:is(:focus-visible)) {
      outline-offset: 2px;
    }
  }
  .has-\[\:focus-visible\]\:outline-\[var\(--accent-deep\)\] {
    &:has(*:is(:focus-visible)) {
      outline-color: var(--accent-deep);
    }
  }
  .motion-reduce\:transition-none {
    @media (prefers-reduced-motion: reduce) {
      transition-property: none;
    }
  }
  .motion-reduce\:group-hover\/play\:scale-100 {
    @media (prefers-reduced-motion: reduce) {
      &:is(:where(.group\/play):hover *) {
        @media (hover: hover) {
          --tw-scale-x: 100%;
          --tw-scale-y: 100%;
          --tw-scale-z: 100%;
          scale: var(--tw-scale-x) var(--tw-scale-y);
        }
      }
    }
  }
  .motion-reduce\:group-active\/play\:scale-100 {
    @media (prefers-reduced-motion: reduce) {
      &:is(:where(.group\/play):active *) {
        --tw-scale-x: 100%;
        --tw-scale-y: 100%;
        --tw-scale-z: 100%;
        scale: var(--tw-scale-x) var(--tw-scale-y);
      }
    }
  }
  .motion-reduce\:active\:scale-100 {
    @media (prefers-reduced-motion: reduce) {
      &:active {
        --tw-scale-x: 100%;
        --tw-scale-y: 100%;
        --tw-scale-z: 100%;
        scale: var(--tw-scale-x) var(--tw-scale-y);
      }
    }
  }
  .max-\[1115px\]\:col-span-2 {
    @media (width < 1115px) {
      grid-column: span 2 / span 2;
    }
  }
  .max-lg\:mx-auto {
    @media (width < 64rem) {
      margin-inline: auto;
    }
  }
  .max-lg\:max-w-md {
    @media (width < 64rem) {
      max-width: var(--container-md);
    }
  }
  .max-md\:hidden {
    @media (width < 48rem) {
      display: none;
    }
  }
  .max-md\:pb-\[7\.5rem\] {
    @media (width < 48rem) {
      padding-bottom: 7.5rem;
    }
  }
  .max-sm\:mb-0 {
    @media (width < 40rem) {
      margin-bottom: 0;
    }
  }
  .max-sm\:hidden {
    @media (width < 40rem) {
      display: none;
    }
  }
  .max-sm\:w-full {
    @media (width < 40rem) {
      width: 100%;
    }
  }
  .max-sm\:max-w-none {
    @media (width < 40rem) {
      max-width: none;
    }
  }
  .max-sm\:rounded-b-none {
    @media (width < 40rem) {
      border-bottom-right-radius: 0;
      border-bottom-left-radius: 0;
    }
  }
  .max-sm\:object-\[30\%_center\] {
    @media (width < 40rem) {
      object-position: 30% center;
    }
  }
  .min-\[1116px\]\:col-span-2 {
    @media (width >= 1116px) {
      grid-column: span 2 / span 2;
    }
  }
  .min-\[1116px\]\:col-span-3 {
    @media (width >= 1116px) {
      grid-column: span 3 / span 3;
    }
  }
  .min-\[1116px\]\:row-span-2 {
    @media (width >= 1116px) {
      grid-row: span 2 / span 2;
    }
  }
  .sm\:top-4 {
    @media (width >= 40rem) {
      top: calc(var(--spacing) * 4);
    }
  }
  .sm\:right-4 {
    @media (width >= 40rem) {
      right: calc(var(--spacing) * 4);
    }
  }
  .sm\:right-6 {
    @media (width >= 40rem) {
      right: calc(var(--spacing) * 6);
    }
  }
  .sm\:bottom-6 {
    @media (width >= 40rem) {
      bottom: calc(var(--spacing) * 6);
    }
  }
  .sm\:left-6 {
    @media (width >= 40rem) {
      left: calc(var(--spacing) * 6);
    }
  }
  .sm\:col-span-1 {
    @media (width >= 40rem) {
      grid-column: span 1 / span 1;
    }
  }
  .sm\:col-span-2 {
    @media (width >= 40rem) {
      grid-column: span 2 / span 2;
    }
  }
  .sm\:col-span-3 {
    @media (width >= 40rem) {
      grid-column: span 3 / span 3;
    }
  }
  .sm\:mt-0 {
    @media (width >= 40rem) {
      margin-top: 0;
    }
  }
  .sm\:ml-3 {
    @media (width >= 40rem) {
      margin-left: calc(var(--spacing) * 3);
    }
  }
  .sm\:block {
    @media (width >= 40rem) {
      display: block;
    }
  }
  .sm\:flex {
    @media (width >= 40rem) {
      display: flex;
    }
  }
  .sm\:hidden {
    @media (width >= 40rem) {
      display: none;
    }
  }
  .sm\:inline-flex {
    @media (width >= 40rem) {
      display: inline-flex;
    }
  }
  .sm\:size-16 {
    @media (width >= 40rem) {
      width: calc(var(--spacing) * 16);
      height: calc(var(--spacing) * 16);
    }
  }
  .sm\:size-28 {
    @media (width >= 40rem) {
      width: calc(var(--spacing) * 28);
      height: calc(var(--spacing) * 28);
    }
  }
  .sm\:size-36 {
    @media (width >= 40rem) {
      width: calc(var(--spacing) * 36);
      height: calc(var(--spacing) * 36);
    }
  }
  .sm\:h-\[168px\] {
    @media (width >= 40rem) {
      height: 168px;
    }
  }
  .sm\:h-\[260px\] {
    @media (width >= 40rem) {
      height: 260px;
    }
  }
  .sm\:h-\[280px\] {
    @media (width >= 40rem) {
      height: 280px;
    }
  }
  .sm\:w-\[168px\] {
    @media (width >= 40rem) {
      width: 168px;
    }
  }
  .sm\:w-\[calc\(\(100\%-24px\)\/2\)\] {
    @media (width >= 40rem) {
      width: calc((100% - 24px) / 2);
    }
  }
  .sm\:max-w-\[34rem\] {
    @media (width >= 40rem) {
      max-width: 34rem;
    }
  }
  .sm\:basis-0 {
    @media (width >= 40rem) {
      flex-basis: 0;
    }
  }
  .sm\:grid-cols-2 {
    @media (width >= 40rem) {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  .sm\:grid-cols-3 {
    @media (width >= 40rem) {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }
  .sm\:grid-cols-\[1fr_auto\] {
    @media (width >= 40rem) {
      grid-template-columns: 1fr auto;
    }
  }
  .sm\:grid-cols-\[6rem_1fr\] {
    @media (width >= 40rem) {
      grid-template-columns: 6rem 1fr;
    }
  }
  .sm\:grid-cols-\[11rem_minmax\(0\,1fr\)\] {
    @media (width >= 40rem) {
      grid-template-columns: 11rem minmax(0,1fr);
    }
  }
  .sm\:grid-cols-\[auto_1fr\] {
    @media (width >= 40rem) {
      grid-template-columns: auto 1fr;
    }
  }
  .sm\:flex-row {
    @media (width >= 40rem) {
      flex-direction: row;
    }
  }
  .sm\:items-center {
    @media (width >= 40rem) {
      align-items: center;
    }
  }
  .sm\:items-start {
    @media (width >= 40rem) {
      align-items: flex-start;
    }
  }
  .sm\:justify-center {
    @media (width >= 40rem) {
      justify-content: center;
    }
  }
  .sm\:justify-start {
    @media (width >= 40rem) {
      justify-content: flex-start;
    }
  }
  .sm\:gap-3 {
    @media (width >= 40rem) {
      gap: calc(var(--spacing) * 3);
    }
  }
  .sm\:gap-4 {
    @media (width >= 40rem) {
      gap: calc(var(--spacing) * 4);
    }
  }
  .sm\:gap-5 {
    @media (width >= 40rem) {
      gap: calc(var(--spacing) * 5);
    }
  }
  .sm\:gap-6 {
    @media (width >= 40rem) {
      gap: calc(var(--spacing) * 6);
    }
  }
  .sm\:gap-7 {
    @media (width >= 40rem) {
      gap: calc(var(--spacing) * 7);
    }
  }
  .sm\:gap-x-8 {
    @media (width >= 40rem) {
      column-gap: calc(var(--spacing) * 8);
    }
  }
  .sm\:p-4 {
    @media (width >= 40rem) {
      padding: calc(var(--spacing) * 4);
    }
  }
  .sm\:p-5 {
    @media (width >= 40rem) {
      padding: calc(var(--spacing) * 5);
    }
  }
  .sm\:p-6 {
    @media (width >= 40rem) {
      padding: calc(var(--spacing) * 6);
    }
  }
  .sm\:p-7 {
    @media (width >= 40rem) {
      padding: calc(var(--spacing) * 7);
    }
  }
  .sm\:p-8 {
    @media (width >= 40rem) {
      padding: calc(var(--spacing) * 8);
    }
  }
  .sm\:p-9 {
    @media (width >= 40rem) {
      padding: calc(var(--spacing) * 9);
    }
  }
  .sm\:px-4 {
    @media (width >= 40rem) {
      padding-inline: calc(var(--spacing) * 4);
    }
  }
  .sm\:px-5 {
    @media (width >= 40rem) {
      padding-inline: calc(var(--spacing) * 5);
    }
  }
  .sm\:px-6 {
    @media (width >= 40rem) {
      padding-inline: calc(var(--spacing) * 6);
    }
  }
  .sm\:px-8 {
    @media (width >= 40rem) {
      padding-inline: calc(var(--spacing) * 8);
    }
  }
  .sm\:py-4 {
    @media (width >= 40rem) {
      padding-block: calc(var(--spacing) * 4);
    }
  }
  .sm\:pt-\[12vh\] {
    @media (width >= 40rem) {
      padding-top: 12vh;
    }
  }
  .sm\:pl-6 {
    @media (width >= 40rem) {
      padding-left: calc(var(--spacing) * 6);
    }
  }
  .sm\:pl-14 {
    @media (width >= 40rem) {
      padding-left: calc(var(--spacing) * 14);
    }
  }
  .sm\:text-left {
    @media (width >= 40rem) {
      text-align: left;
    }
  }
  .sm\:text-2xl {
    @media (width >= 40rem) {
      font-size: var(--text-2xl);
      line-height: var(--tw-leading, var(--text-2xl--line-height));
    }
  }
  .md\:static {
    @media (width >= 48rem) {
      position: static;
    }
  }
  .md\:sticky {
    @media (width >= 48rem) {
      position: sticky;
    }
  }
  .md\:top-\[calc\(var\(--nav-h\)\+1\.5rem\)\] {
    @media (width >= 48rem) {
      top: calc(var(--nav-h) + 1.5rem);
    }
  }
  .md\:order-1 {
    @media (width >= 48rem) {
      order: 1;
    }
  }
  .md\:order-2 {
    @media (width >= 48rem) {
      order: 2;
    }
  }
  .md\:col-span-1 {
    @media (width >= 48rem) {
      grid-column: span 1 / span 1;
    }
  }
  .md\:col-start-1 {
    @media (width >= 48rem) {
      grid-column-start: 1;
    }
  }
  .md\:col-start-2 {
    @media (width >= 48rem) {
      grid-column-start: 2;
    }
  }
  .md\:row-span-2 {
    @media (width >= 48rem) {
      grid-row: span 2 / span 2;
    }
  }
  .md\:row-span-3 {
    @media (width >= 48rem) {
      grid-row: span 3 / span 3;
    }
  }
  .md\:row-start-1 {
    @media (width >= 48rem) {
      grid-row-start: 1;
    }
  }
  .md\:-mx-6 {
    @media (width >= 48rem) {
      margin-inline: calc(var(--spacing) * -6);
    }
  }
  .md\:mt-6 {
    @media (width >= 48rem) {
      margin-top: calc(var(--spacing) * 6);
    }
  }
  .md\:mt-\[clamp\(2rem\,4\.5vw\,3\.75rem\)\] {
    @media (width >= 48rem) {
      margin-top: clamp(2rem, 4.5vw, 3.75rem);
    }
  }
  .md\:mb-4 {
    @media (width >= 48rem) {
      margin-bottom: calc(var(--spacing) * 4);
    }
  }
  .md\:ml-0 {
    @media (width >= 48rem) {
      margin-left: 0;
    }
  }
  .md\:ml-8 {
    @media (width >= 48rem) {
      margin-left: calc(var(--spacing) * 8);
    }
  }
  .md\:block {
    @media (width >= 48rem) {
      display: block;
    }
  }
  .md\:grid {
    @media (width >= 48rem) {
      display: grid;
    }
  }
  .md\:hidden {
    @media (width >= 48rem) {
      display: none;
    }
  }
  .md\:aspect-auto {
    @media (width >= 48rem) {
      aspect-ratio: auto;
    }
  }
  .md\:\!size-16 {
    @media (width >= 48rem) {
      width: calc(var(--spacing) * 16) !important;
      height: calc(var(--spacing) * 16) !important;
    }
  }
  .md\:size-20 {
    @media (width >= 48rem) {
      width: calc(var(--spacing) * 20);
      height: calc(var(--spacing) * 20);
    }
  }
  .md\:size-24 {
    @media (width >= 48rem) {
      width: calc(var(--spacing) * 24);
      height: calc(var(--spacing) * 24);
    }
  }
  .md\:size-\[clamp\(160px\,18vw\,220px\)\] {
    @media (width >= 48rem) {
      width: clamp(160px, 18vw, 220px);
      height: clamp(160px, 18vw, 220px);
    }
  }
  .md\:h-\[66px\] {
    @media (width >= 48rem) {
      height: 66px;
    }
  }
  .md\:min-h-\[280px\] {
    @media (width >= 48rem) {
      min-height: 280px;
    }
  }
  .md\:w-\[calc\(\(100\%-0\.875rem\)\/2\)\] {
    @media (width >= 48rem) {
      width: calc((100% - 0.875rem) / 2);
    }
  }
  .md\:scroll-px-6 {
    @media (width >= 48rem) {
      scroll-padding-inline: calc(var(--spacing) * 6);
    }
  }
  .md\:auto-rows-\[225px\] {
    @media (width >= 48rem) {
      grid-auto-rows: 225px;
    }
  }
  .md\:grid-cols-2 {
    @media (width >= 48rem) {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  .md\:grid-cols-3 {
    @media (width >= 48rem) {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }
  .md\:grid-cols-\[1\.1fr_1fr\] {
    @media (width >= 48rem) {
      grid-template-columns: 1.1fr 1fr;
    }
  }
  .md\:grid-cols-\[minmax\(0\,1fr\)_minmax\(0\,360px\)\] {
    @media (width >= 48rem) {
      grid-template-columns: minmax(0,1fr) minmax(0,360px);
    }
  }
  .md\:grid-cols-\[minmax\(0\,5fr\)_minmax\(0\,6fr\)\] {
    @media (width >= 48rem) {
      grid-template-columns: minmax(0,5fr) minmax(0,6fr);
    }
  }
  .md\:grid-cols-\[minmax\(0\,360px\)_minmax\(0\,1fr\)\] {
    @media (width >= 48rem) {
      grid-template-columns: minmax(0,360px) minmax(0,1fr);
    }
  }
  .md\:grid-cols-\[repeat\(3\,max-content\)\] {
    @media (width >= 48rem) {
      grid-template-columns: repeat(3,max-content);
    }
  }
  .md\:grid-cols-\[repeat\(auto-fit\,minmax\(340px\,1fr\)\)\] {
    @media (width >= 48rem) {
      grid-template-columns: repeat(auto-fit,minmax(340px,1fr));
    }
  }
  .md\:flex-row {
    @media (width >= 48rem) {
      flex-direction: row;
    }
  }
  .md\:items-center {
    @media (width >= 48rem) {
      align-items: center;
    }
  }
  .md\:items-end {
    @media (width >= 48rem) {
      align-items: flex-end;
    }
  }
  .md\:justify-between {
    @media (width >= 48rem) {
      justify-content: space-between;
    }
  }
  .md\:justify-end {
    @media (width >= 48rem) {
      justify-content: flex-end;
    }
  }
  .md\:gap-3 {
    @media (width >= 48rem) {
      gap: calc(var(--spacing) * 3);
    }
  }
  .md\:gap-12 {
    @media (width >= 48rem) {
      gap: calc(var(--spacing) * 12);
    }
  }
  .md\:gap-x-6 {
    @media (width >= 48rem) {
      column-gap: calc(var(--spacing) * 6);
    }
  }
  .md\:gap-x-8 {
    @media (width >= 48rem) {
      column-gap: calc(var(--spacing) * 8);
    }
  }
  .md\:p-9 {
    @media (width >= 48rem) {
      padding: calc(var(--spacing) * 9);
    }
  }
  .md\:p-10 {
    @media (width >= 48rem) {
      padding: calc(var(--spacing) * 10);
    }
  }
  .md\:px-6 {
    @media (width >= 48rem) {
      padding-inline: calc(var(--spacing) * 6);
    }
  }
  .md\:pt-\[clamp\(6\.5rem\,14vh\,9\.375rem\)\] {
    @media (width >= 48rem) {
      padding-top: clamp(6.5rem, 14vh, 9.375rem);
    }
  }
  .md\:pb-\[clamp\(3\.75rem\,10vh\,6\.875rem\)\] {
    @media (width >= 48rem) {
      padding-bottom: clamp(3.75rem, 10vh, 6.875rem);
    }
  }
  .md\:pl-0 {
    @media (width >= 48rem) {
      padding-left: 0;
    }
  }
  .md\:\!text-6xl {
    @media (width >= 48rem) {
      font-size: var(--text-6xl) !important;
      line-height: var(--tw-leading, var(--text-6xl--line-height)) !important;
    }
  }
  .md\:text-2xl {
    @media (width >= 48rem) {
      font-size: var(--text-2xl);
      line-height: var(--tw-leading, var(--text-2xl--line-height));
    }
  }
  .md\:text-3xl {
    @media (width >= 48rem) {
      font-size: var(--text-3xl);
      line-height: var(--tw-leading, var(--text-3xl--line-height));
    }
  }
  .md\:text-5xl {
    @media (width >= 48rem) {
      font-size: var(--text-5xl);
      line-height: var(--tw-leading, var(--text-5xl--line-height));
    }
  }
  .md\:text-\[1\.18rem\] {
    @media (width >= 48rem) {
      font-size: 1.18rem;
    }
  }
  .md\:text-\[10rem\] {
    @media (width >= 48rem) {
      font-size: 10rem;
    }
  }
  .md\:leading-\[1\.8\] {
    @media (width >= 48rem) {
      --tw-leading: 1.8;
      line-height: 1.8;
    }
  }
  .lg\:sticky {
    @media (width >= 64rem) {
      position: sticky;
    }
  }
  .lg\:top-28 {
    @media (width >= 64rem) {
      top: calc(var(--spacing) * 28);
    }
  }
  .lg\:top-\[calc\(var\(--nav-h\)\+1\.5rem\)\] {
    @media (width >= 64rem) {
      top: calc(var(--nav-h) + 1.5rem);
    }
  }
  .lg\:col-span-1 {
    @media (width >= 64rem) {
      grid-column: span 1 / span 1;
    }
  }
  .lg\:col-span-2 {
    @media (width >= 64rem) {
      grid-column: span 2 / span 2;
    }
  }
  .lg\:col-span-3 {
    @media (width >= 64rem) {
      grid-column: span 3 / span 3;
    }
  }
  .lg\:col-span-4 {
    @media (width >= 64rem) {
      grid-column: span 4 / span 4;
    }
  }
  .lg\:row-span-2 {
    @media (width >= 64rem) {
      grid-row: span 2 / span 2;
    }
  }
  .lg\:block {
    @media (width >= 64rem) {
      display: block;
    }
  }
  .lg\:grid {
    @media (width >= 64rem) {
      display: grid;
    }
  }
  .lg\:w-\[calc\(\(100\%-1\.75rem\)\/3\)\] {
    @media (width >= 64rem) {
      width: calc((100% - 1.75rem) / 3);
    }
  }
  .lg\:w-\[calc\(\(100\%-48px\)\/3\)\] {
    @media (width >= 64rem) {
      width: calc((100% - 48px) / 3);
    }
  }
  .lg\:grid-cols-3 {
    @media (width >= 64rem) {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }
  .lg\:grid-cols-4 {
    @media (width >= 64rem) {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
  }
  .lg\:grid-cols-\[1\.1fr_1fr\] {
    @media (width >= 64rem) {
      grid-template-columns: 1.1fr 1fr;
    }
  }
  .lg\:grid-cols-\[minmax\(0\,1fr\)_310px\] {
    @media (width >= 64rem) {
      grid-template-columns: minmax(0,1fr) 310px;
    }
  }
  .lg\:grid-cols-\[minmax\(0\,1fr\)_minmax\(0\,2fr\)\] {
    @media (width >= 64rem) {
      grid-template-columns: minmax(0,1fr) minmax(0,2fr);
    }
  }
  .lg\:grid-cols-\[minmax\(0\,1fr\)_minmax\(300px\,420px\)\] {
    @media (width >= 64rem) {
      grid-template-columns: minmax(0,1fr) minmax(300px,420px);
    }
  }
  .lg\:gap-12 {
    @media (width >= 64rem) {
      gap: calc(var(--spacing) * 12);
    }
  }
  .lg\:self-start {
    @media (width >= 64rem) {
      align-self: flex-start;
    }
  }
  .xl\:mr-2 {
    @media (width >= 80rem) {
      margin-right: calc(var(--spacing) * 2);
    }
  }
  .xl\:mr-2\.5 {
    @media (width >= 80rem) {
      margin-right: calc(var(--spacing) * 2.5);
    }
  }
  .xl\:flex {
    @media (width >= 80rem) {
      display: flex;
    }
  }
  .xl\:grid {
    @media (width >= 80rem) {
      display: grid;
    }
  }
  .xl\:hidden {
    @media (width >= 80rem) {
      display: none;
    }
  }
  .xl\:w-\[calc\(\(100\%-72px\)\/4\)\] {
    @media (width >= 80rem) {
      width: calc((100% - 72px) / 4);
    }
  }
  .xl\:gap-2\.5 {
    @media (width >= 80rem) {
      gap: calc(var(--spacing) * 2.5);
    }
  }
  .\32 xl\:mr-3 {
    @media (width >= 96rem) {
      margin-right: calc(var(--spacing) * 3);
    }
  }
  .\32 xl\:mr-3\.5 {
    @media (width >= 96rem) {
      margin-right: calc(var(--spacing) * 3.5);
    }
  }
  .\32 xl\:flex {
    @media (width >= 96rem) {
      display: flex;
    }
  }
  .\32 xl\:max-w-\[84rem\] {
    @media (width >= 96rem) {
      max-width: 84rem;
    }
  }
  .\32 xl\:gap-3 {
    @media (width >= 96rem) {
      gap: calc(var(--spacing) * 3);
    }
  }
  .\32 xl\:gap-3\.5 {
    @media (width >= 96rem) {
      gap: calc(var(--spacing) * 3.5);
    }
  }
  .\32 xl\:px-5 {
    @media (width >= 96rem) {
      padding-inline: calc(var(--spacing) * 5);
    }
  }
  .dark\:bg-white\/10 {
    @media (prefers-color-scheme: dark) {
      background-color: color-mix(in srgb, #fff 10%, transparent);
      @supports (color: color-mix(in lab, red, red)) {
        background-color: color-mix(in oklab, var(--color-white) 10%, transparent);
      }
    }
  }
  .\[\&\>div\]\:mb-0 {
    &>div {
      margin-bottom: 0;
    }
  }
  .\[\@media\(hover\:none\)\]\:border-\[var\(--brand\)\] {
    @media (hover:none) {
      border-color: var(--brand);
    }
  }
  .\[\@media\(hover\:none\)\]\:border-\[var\(--m\)\] {
    @media (hover:none) {
      border-color: var(--m);
    }
  }
  .\[\@media\(hover\:none\)\]\:bg-\[var\(--brand\)\] {
    @media (hover:none) {
      background-color: var(--brand);
    }
  }
  .\[\@media\(hover\:none\)\]\:bg-\[var\(--m\)\] {
    @media (hover:none) {
      background-color: var(--m);
    }
  }
  .\[\@media\(hover\:none\)\]\:text-white {
    @media (hover:none) {
      color: var(--color-white);
    }
  }
}
@font-face {
  font-family: 'Material Symbols Outlined';
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url('/fonts/material-symbols-subset.woff2?v=5d7c13d14b') format('woff2');
}
.material-symbols-outlined {
  font-family: 'Material Symbols Outlined';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
}
@layer base {
  .material-symbols-outlined {
    width: 1em;
    overflow-x: clip;
  }
}
.medal-icon-gold {
  color: var(--medal-gold);
  -webkit-text-stroke: 0.06em var(--medal-gold-edge);
  paint-order: stroke fill;
}
:root,
[data-theme='lider'] {
  --accent: #0097b2;
  --accent-deep: #00778d;
  --accent-soft: #4ec3d6;
  --accent-tint: #e3f3f6;
  --sand: #c7b299;
  --sand-tint: #f3ecdf;
  --sand-ink: #8f7a56;
  --sand-ink-strong: #6d5c3d;
  --card-teal-tint: #e3f3f6;
  --card-teal-ink: #0097b2;
  --card-teal-strong: #00778d;
  --card-indigo-tint: #e7edf8;
  --card-indigo-ink: #4b74ab;
  --card-indigo-strong: #3d6293;
  --card-sand-tint: #f3ecdf;
  --card-sand-ink: #a2895f;
  --card-sand-strong: #6d5c3d;
  --card-clay-tint: #f8e9e3;
  --card-clay-ink: #bc6f59;
  --card-clay-strong: #9c5442;
  --card-plum-tint: #f0e9f5;
  --card-plum-ink: #9070a8;
  --card-plum-strong: #6f5088;
  --card-moss-tint: #e8f0e3;
  --card-moss-ink: #74975f;
  --card-moss-strong: #55743f;
  --card-honey-tint: #fbf1d8;
  --card-honey-ink: #c08a1e;
  --card-honey-strong: #7d5a10;
  --medal-gold: #f2bd1d;
  --medal-gold-edge: #a07800;
  --medal-silver: #7d858b;
  --medal-bronze: #a5673f;
  --card-veil-rest: 0.18;
  --card-veil-hover: 0.18;
  --hero-photo-tint: 0.88;
  --dark: #101c20;
  --panel: #182a30;
  --dark-line: #22333a;
  --dark-fg: #cfd8da;
  --dark-fg-muted: #b9c6c9;
  --text-quiet: #8a9296;
  --color-primary: var(--accent-deep);
  --color-accent: var(--sand);
  --color-bg: #fbfaf8;
  --color-surface: #ffffff;
  --color-text: #14252b;
  --color-muted: #4c5a5e;
  --on-primary: #ffffff;
  color-scheme: light;
}
:root {
  --color-line: #e6e2da;
  --color-primary-soft: var(--accent-tint);
  --color-primary-strong: var(--color-primary);
  @supports (color: color-mix(in lab, red, red)) {
    --color-primary-strong: color-mix(in srgb, var(--color-primary) 85%, var(--color-text));
  }
  --footer-bg: var(--dark);
  --footer-fg: var(--dark-fg);
  --shadow-lift: 0 14px 30px var(--dark);
  @supports (color: color-mix(in lab, red, red)) {
    --shadow-lift: 0 14px 30px color-mix(in srgb, var(--dark) 10%, transparent);
  }
  --shadow-lift-soft: 0 14px 30px var(--dark);
  @supports (color: color-mix(in lab, red, red)) {
    --shadow-lift-soft: 0 14px 30px color-mix(in srgb, var(--dark) 8%, transparent);
  }
  --ease-site: cubic-bezier(0.16, 1, 0.3, 1);
  --section-gap: clamp(3.5rem, 6vw, 5rem);
  --section-pad: calc(var(--section-gap) / 2);
  --radius-card: 0.865rem;
  --radius-band: 1.21rem;
  --nav-row-h: 4.5rem;
  --banner-h: 0px;
  --nav-h: calc(var(--nav-row-h) + var(--banner-h));
}
:root {
  font-size: 100%;
}
html {
  background-color: var(--dark);
  scrollbar-width: thin;
  scrollbar-color: var(--accent-deep, #00778d) var(--dark, #101c20);
}
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
  background-color: var(--dark, #101c20);
}
::-webkit-scrollbar-track,
::-webkit-scrollbar-track-piece,
::-webkit-scrollbar-corner,
::-webkit-scrollbar-button {
  background-color: var(--dark, #101c20) !important;
  background: var(--dark, #101c20) !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}
::-webkit-scrollbar-thumb {
  background-color: var(--accent-deep, #00778d) !important;
  border-radius: 9999px !important;
  border: 2px solid var(--dark, #101c20) !important;
  background-clip: padding-box !important;
}
::-webkit-scrollbar-thumb:hover {
  background-color: var(--accent, #0097b2) !important;
}
html[data-opaque-overlay] body {
  background: #000;
}
html[data-opaque-overlay] body > *:not([data-opaque-overlay-root]) {
  visibility: hidden;
}
html[data-fontsize='sm'] {
  font-size: 93.75%;
}
html[data-fontsize='lg'] {
  font-size: 115%;
}
html[data-contrast='high'] {
  --accent: #005566;
  --accent-deep: #005566;
  --accent-tint: #ffffff;
  --sand-tint: #ffffff;
  --sand-ink: #4a3c22;
  --sand-ink-strong: #4a3c22;
  --dark: #000000;
  --panel: #0d0d0d;
  --dark-line: rgba(255, 255, 255, 0.45);
  --color-primary: #005566;
  --color-accent: #6d5433;
  --color-bg: #ffffff;
  --color-surface: #ffffff;
  --color-text: #000000;
  --color-muted: #1f2a2e;
  --on-primary: #ffffff;
  --color-line: rgba(0, 0, 0, 0.45);
  color-scheme: light;
}
html[data-contrast='high'] a {
  text-decoration: underline;
}
:root, html[data-font='montserrat'] {
  --font-body-active: var(--font-nunito);
}
html[data-font='inter'] {
  --font-body-active: var(--font-inter);
}
html[data-font='dmsans'] {
  --font-body-active: var(--font-dmsans);
}
@layer base {
  * {
    border-color: var(--color-line);
  }
  html {
    scroll-behavior: auto;
    scroll-padding-top: calc(var(--nav-h) + 1rem);
    max-width: 100%;
    overflow-y: auto;
    overflow-y: overlay;
    scrollbar-gutter: auto;
    overflow-x: clip;
  }
  body {
    background-color: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-body-active), ui-sans-serif, system-ui, sans-serif;
    transition: background-color 0.3s var(--ease-site), color 0.3s var(--ease-site);
    -webkit-font-smoothing: antialiased;
    max-width: 100%;
    overflow-x: clip;
    position: relative;
    isolation: isolate;
  }
  h1, h2 {
    font-family: var(--font-neucha), 'Comic Sans MS', cursive;
    font-weight: 400 !important;
    line-height: 1.08;
    text-wrap: balance;
  }
  h3, h4 {
    font-family: var(--font-nunito), ui-sans-serif, sans-serif;
    font-weight: 600;
    line-height: 1.25;
    text-wrap: balance;
  }
  ::selection {
    background: var(--accent);
    color: #ffffff;
  }
  :focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
    border-radius: 2px;
  }
  :is(.group:hover, .dd-play) .dd-gantry {
    animation: dd-gantry 4s ease-in-out infinite;
  }
  @keyframes dd-gantry {
    0% {
      transform: translateY(36px);
    }
    10.2% {
      transform: translateY(28px);
    }
    21.3% {
      transform: translateY(23px);
    }
    32.3% {
      transform: translateY(18px);
    }
    42.5% {
      transform: translateY(13px);
    }
    54.4% {
      transform: translateY(8px);
    }
    64.6% {
      transform: translateY(4px);
    }
    74.8%, 96.6% {
      transform: translateY(2px);
    }
    100% {
      transform: translateY(36px);
    }
  }
  :is(.group:hover, .dd-play) .dd-head {
    animation: dd-head 4s ease-in-out infinite;
  }
  @keyframes dd-head {
    0% {
      transform: translateX(0);
    }
    10.2% {
      transform: translateX(-7px);
    }
    21.3% {
      transform: translateX(7px);
    }
    32.3% {
      transform: translateX(-5px);
    }
    42.5% {
      transform: translateX(5px);
    }
    54.4% {
      transform: translateX(-3.5px);
    }
    64.6% {
      transform: translateX(3.5px);
    }
    74.8% {
      transform: translateX(-2px);
    }
    85%, 100% {
      transform: translateX(0);
    }
  }
  :is(.group:hover, .dd-play) .dd-print {
    animation: dd-print 4s ease-in-out infinite;
  }
  @keyframes dd-print {
    0% {
      clip-path: inset(100% 0 0 0);
    }
    10.2% {
      clip-path: inset(76% 0 0 0);
    }
    32.3% {
      clip-path: inset(52% 0 0 0);
    }
    54.4% {
      clip-path: inset(24% 0 0 0);
    }
    74.8%, 100% {
      clip-path: inset(0 0 0 0);
    }
  }
  :is(.group:hover, .dd-play) .dd-write {
    animation: dd-trace 5.4s ease-in-out var(--dd-delay, 0s) infinite backwards;
  }
  :is(.group:hover, .dd-play) .dd-pointer {
    animation: dd-pointer 5.4s ease-in-out infinite;
  }
  @keyframes dd-pointer {
    0%, 8% {
      transform: translate(0, 0);
    }
    18% {
      transform: translate(-5px, 2px);
    }
    30% {
      transform: translate(3px, -1px);
    }
    46% {
      transform: translate(38px, -13px);
    }
    72% {
      transform: translate(40px, -14px);
    }
    88%, 100% {
      transform: translate(0, 0);
    }
  }
  :is(.group:hover, .dd-play) .dd-steam {
    animation: dd-steam 4s ease-in-out var(--dd-delay, 0s) infinite;
  }
  @keyframes dd-steam {
    0% {
      transform: translateY(6px) skewX(0deg);
      opacity: 0;
    }
    18% {
      opacity: 0.9;
    }
    40% {
      transform: translateY(-4px) skewX(4deg);
    }
    65% {
      transform: translateY(-12px) skewX(-4deg);
      opacity: 0.7;
    }
    100% {
      transform: translateY(-22px) skewX(2deg);
      opacity: 0;
    }
  }
  .dd-rays-play {
    transform-box: fill-box;
    transform-origin: center;
    animation: dd-cap-rays 3s ease-out forwards;
  }
  @keyframes dd-cap-rays {
    0% {
      transform: rotate(0deg) scale(0.8);
      opacity: 0;
    }
    12% {
      transform: rotate(16deg) scale(1);
      opacity: 1;
    }
    86% {
      transform: rotate(108deg) scale(1);
      opacity: 1;
    }
    100% {
      transform: rotate(120deg) scale(1.12);
      opacity: 0;
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .dd-rays-play {
      animation: none;
      opacity: 0;
    }
  }
  .dd-answer {
    stroke-dasharray: 1;
  }
  :is(.group:hover, .dd-play) .dd-answer--1 {
    animation: dd-answer-1 4.4s linear infinite;
  }
  :is(.group:hover, .dd-play) .dd-answer--2 {
    animation: dd-answer-2 4.4s linear infinite;
  }
  :is(.group:hover, .dd-play) .dd-answer--3 {
    animation: dd-answer-3 4.4s linear infinite;
  }
  @keyframes dd-answer-1 {
    0%, 6% {
      stroke-dashoffset: 1;
      opacity: 1;
    }
    20% {
      stroke-dashoffset: 0;
    }
    95% {
      stroke-dashoffset: 0;
      opacity: 1;
    }
    99%, 100% {
      stroke-dashoffset: 0;
      opacity: 0;
    }
  }
  @keyframes dd-answer-2 {
    0%, 29% {
      stroke-dashoffset: 1;
      opacity: 1;
    }
    45% {
      stroke-dashoffset: 0;
    }
    95% {
      stroke-dashoffset: 0;
      opacity: 1;
    }
    99%, 100% {
      stroke-dashoffset: 0;
      opacity: 0;
    }
  }
  @keyframes dd-answer-3 {
    0%, 54% {
      stroke-dashoffset: 1;
      opacity: 1;
    }
    70% {
      stroke-dashoffset: 0;
    }
    95% {
      stroke-dashoffset: 0;
      opacity: 1;
    }
    99%, 100% {
      stroke-dashoffset: 0;
      opacity: 0;
    }
  }
  .dd-pen-scribble {
    transform-origin: 78.2px 33.4px;
  }
  :is(.group:hover, .dd-play) .dd-pen-scribble {
    animation: dd-pen-scribble 4.4s linear infinite;
  }
  @keyframes dd-pen-scribble {
    0%, 6% {
      transform: rotate(0deg);
    }
    9% {
      transform: rotate(-2.4deg);
    }
    12% {
      transform: rotate(2.2deg);
    }
    15% {
      transform: rotate(-2deg);
    }
    18% {
      transform: rotate(1.6deg);
    }
    20%, 29% {
      transform: rotate(0deg);
    }
    32% {
      transform: rotate(-2.4deg);
    }
    35% {
      transform: rotate(2.2deg);
    }
    38% {
      transform: rotate(-2deg);
    }
    42% {
      transform: rotate(1.6deg);
    }
    45%, 54% {
      transform: rotate(0deg);
    }
    57% {
      transform: rotate(-2.4deg);
    }
    60% {
      transform: rotate(2.2deg);
    }
    63% {
      transform: rotate(-2deg);
    }
    67% {
      transform: rotate(1.6deg);
    }
    70%, 100% {
      transform: rotate(0deg);
    }
  }
  :is(.group:hover, .dd-play) .dd-pen-walk {
    animation: dd-pen-walk 4.4s ease-in-out infinite;
  }
  @keyframes dd-pen-walk {
    0% {
      transform: translate(8px, 40px);
    }
    6%, 20% {
      transform: translate(-36.9px, 0.6px);
    }
    29%, 45% {
      transform: translate(-17.9px, 19.6px);
    }
    54%, 70% {
      transform: translate(-28.9px, 34.6px);
    }
    77%, 100% {
      transform: translate(8px, 40px);
    }
  }
  @media (prefers-reduced-motion: reduce) {
    html {
      scroll-behavior: auto;
    }
    *, *::before, *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
    }
  }
}
@layer components {
  .container-site {
    margin-inline: auto;
    width: 100%;
    max-width: 74rem;
    padding-inline: 1.25rem;
    @media (width >= 48rem) {
      padding-inline: 2rem;
    }
  }
  .section {
    padding-block: var(--section-pad);
  }
  .eyebrow {
    display: inline-flex;
    align-items: center;
    font-size: clamp(0.84rem, 1vw, 0.94rem);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-muted);
  }
  .eyebrow--caps {
    font-size: clamp(0.9rem, 1.4vw, 1.06rem);
    font-weight: 400;
    letter-spacing: 4px;
    text-transform: uppercase;
  }
  .section-title {
    font-size: clamp(2.125rem, 4vw, 3.375rem);
    margin-top: 0.6rem;
  }
  .display {
    font-family: var(--font-neucha), 'Comic Sans MS', cursive;
    font-weight: 400;
    font-size: clamp(2.875rem, 7.2vw, 6.5rem);
    line-height: 1.06;
  }
  .hero-photo-tint {
    background-color: var(--dark);
  }
  .hero-on-photo {
    text-shadow: 0 1px 2px var(--dark);
    @supports (color: color-mix(in lab, red, red)) {
      text-shadow: 0 1px 2px color-mix(in srgb, var(--dark) 70%, transparent);
    }
  }
  @supports (color: oklch(from red l c h)) {
    .hero-photo-tint {
      background-color: oklch(from var(--dark) l calc(c * 0.5) h);
    }
  }
  .hero-line {
    display: block;
    opacity: 0;
    transform: translateY(0.5em);
    animation: heroLineIn 0.7s var(--ease-site) both;
    animation-delay: calc(var(--i, 0) * 0.1s + 0.2s);
  }
  .hero-particles {
    animation: heroFadeIn 0.5s ease-out 0.15s both;
  }
  @keyframes heroFadeIn {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }
  .hero-fade {
    opacity: 0;
    transform: translateY(0.8rem);
    animation: heroLineIn 0.6s var(--ease-site) both;
  }
  @keyframes heroLineIn {
    to {
      opacity: 1;
      transform: none;
    }
  }
  .hero-word {
    display: inline-block;
    opacity: 0;
    transform: translateY(0.5em);
    animation: heroLineIn 0.5s var(--ease-site) both;
    animation-delay: calc(var(--w, 0) * 0.015s + 0.7s);
  }
  .hero-btn {
    display: inline-flex;
    opacity: 0;
    animation: heroBtnIn 0.5s var(--ease-site) both;
  }
  @keyframes heroBtnIn {
    from {
      opacity: 0;
      transform: scale(1.12);
    }
    to {
      opacity: 1;
      transform: scale(1);
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .hero-btn {
      opacity: 1;
      transform: none;
      animation: none;
    }
  }
  .hl-marker {
    position: relative;
    color: #fff;
    border-radius: 0.12em;
    padding: 0.02em 0.16em;
  }
  .hl-marker::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    background: var(--color-primary);
    transform: scaleX(0);
    transform-origin: left center;
    animation: markerSweep 0.5s cubic-bezier(0.5, 0, 0.2, 1) both;
    animation-delay: calc(var(--i, 0) * 0.1s + 0.53s);
  }
  @keyframes markerSweep {
    to {
      transform: scaleX(1);
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .hero-line,
    .hero-fade,
    .hero-word {
      opacity: 1;
      transform: none;
      animation: none;
    }
    .hl-marker::before {
      transform: none;
      animation: none;
    }
  }
  .display-num {
    font-family: var(--font-neucha), 'Comic Sans MS', cursive;
    font-weight: 400;
    line-height: 1;
  }
  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    border-radius: 0.845rem;
    font-weight: 600;
    font-size: 0.95rem;
    line-height: 1;
    padding: 0.9rem 1.75rem;
    cursor: pointer;
    border: 1.5px solid transparent;
    transition: transform 0.2s var(--ease-site), box-shadow 0.2s var(--ease-site), background-color 0.2s var(--ease-site),
      color 0.2s var(--ease-site), border-color 0.2s var(--ease-site);
    white-space: nowrap;
  }
  .btn:active {
    transform: translateY(1px);
  }
  .btn-primary {
    background: var(--color-primary);
    color: var(--on-primary);
    box-shadow: 0 8px 24px -10px var(--color-primary);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 8px 24px -10px color-mix(in srgb, var(--color-primary) 55%, transparent);
    }
  }
  .btn-primary:hover {
    box-shadow: 0 12px 30px -10px var(--color-primary);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 12px 30px -10px color-mix(in srgb, var(--color-primary) 72%, transparent);
    }
    background: var(--color-primary);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--color-primary) 88%, white);
    }
    transform: translateY(-1px);
  }
  .btn-accent {
    background: var(--color-accent);
    color: #241d12;
  }
  .btn-accent:hover {
    filter: brightness(1.06);
    transform: translateY(-1px);
  }
  .btn-outline {
    border-color: var(--color-text);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in srgb, var(--color-text) 28%, transparent);
    }
    color: var(--color-text);
    background: transparent;
  }
  .btn-outline:hover {
    border-color: var(--color-primary);
    color: var(--color-primary-strong);
    background: var(--color-primary);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--color-primary) 8%, transparent);
    }
  }
  .btn-ghost {
    color: var(--color-primary-strong);
    background: transparent;
    padding-inline: 1rem;
  }
  .btn-ghost:hover {
    background: var(--color-primary-soft);
  }
  .btn-inverse {
    background: #ffffff;
    color: var(--color-text);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
  }
  .btn-inverse:hover {
    transform: translateY(-1px);
    filter: brightness(1.03);
  }
  .link-more {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.38rem 0.42rem 0.38rem 0.95rem;
    border: 1.5px solid var(--color-line);
    border-radius: 999px;
    font-size: 1.02rem;
    font-weight: 600;
    line-height: 1.2;
    color: var(--accent-deep);
    text-decoration: none;
    transition: border-color 0.15s var(--ease-site), background-color 0.15s var(--ease-site);
  }
  .link-more:hover {
    border-color: var(--accent-deep);
    background: var(--accent-tint);
    text-decoration: none;
  }
  .link-more .material-symbols-outlined {
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 999px;
    background: var(--accent-tint);
    font-size: 1.1rem;
    line-height: 1.75rem;
    text-align: center;
    transition: transform 0.18s var(--ease-site), background-color 0.15s var(--ease-site);
  }
  .link-more:hover .material-symbols-outlined {
    transform: translateX(2px);
    background: var(--color-surface);
  }
  .link-more--on-dark {
    color: #fff;
    border-color: rgba(255, 255, 255, 0.28);
  }
  .link-more--on-dark:hover {
    border-color: #fff;
    background: rgba(255, 255, 255, 0.1);
  }
  .link-more--on-dark .material-symbols-outlined {
    background: rgba(255, 255, 255, 0.14);
  }
  .link-more--on-dark:hover .material-symbols-outlined {
    background: rgba(255, 255, 255, 0.22);
  }
  .link-back {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.38rem 0.95rem 0.38rem 0.42rem;
    border: 1.5px solid var(--color-line);
    border-radius: 999px;
    font-size: 0.98rem;
    font-weight: 600;
    line-height: 1.2;
    color: var(--accent-deep);
    text-decoration: none;
    transition: border-color 0.15s var(--ease-site), background-color 0.15s var(--ease-site);
  }
  .link-back:hover {
    border-color: var(--accent-deep);
    background: var(--accent-tint);
    text-decoration: none;
  }
  .link-back .material-symbols-outlined {
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 999px;
    background: var(--accent-tint);
    font-size: 1.1rem;
    line-height: 1.75rem;
    text-align: center;
    transition: transform 0.18s var(--ease-site), background-color 0.15s var(--ease-site);
  }
  .link-back:hover .material-symbols-outlined {
    transform: translateX(-2px);
    background: var(--color-surface);
  }
  .link-arrow {
    text-decoration: none;
  }
  .link-arrow .material-symbols-outlined {
    transition: transform 0.18s var(--ease-site);
  }
  .link-arrow:hover .material-symbols-outlined,
  .group:hover .link-arrow .material-symbols-outlined {
    transform: translateX(3px);
  }
  .card {
    background: var(--color-surface);
    border: 1.5px solid var(--color-line);
    border-radius: var(--radius-card);
    transition: transform 0.15s var(--ease-site), box-shadow 0.15s var(--ease-site), border-color 0.15s var(--ease-site);
  }
  .card-hover:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lift);
  }
  .bento-card {
    border: 1.5px solid var(--color-line);
    background: var(--color-surface);
    border-radius: var(--radius-card);
    transition: transform 0.15s var(--ease-site), box-shadow 0.15s var(--ease-site);
  }
  .bento-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lift);
  }
  .tint-teal {
    background: linear-gradient(145deg, var(--accent-tint) 0%, var(--accent-tint) 100%);
    @supports (color: color-mix(in lab, red, red)) {
      background: linear-gradient(145deg, color-mix(in srgb, var(--accent-tint) 90%, white) 0%, var(--accent-tint) 100%);
    }
    border-color: var(--accent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in srgb, var(--accent) 15%, transparent);
    }
  }
  .tint-sand {
    background: linear-gradient(145deg, var(--sand-tint) 0%, var(--sand-tint) 100%);
    @supports (color: color-mix(in lab, red, red)) {
      background: linear-gradient(145deg, color-mix(in srgb, var(--sand-tint) 88%, white) 0%, var(--sand-tint) 100%);
    }
    border-color: var(--sand-ink);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in srgb, var(--sand-ink) 14%, transparent);
    }
  }
  .tint-dark {
    background: linear-gradient(150deg, #18282e 0%, var(--dark) 75%, #0b1417 100%);
    color: #ffffff;
    border-color: var(--accent-soft);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in srgb, var(--accent-soft) 18%, transparent);
    }
  }
  .card-photo-bubble {
    overflow: hidden;
    -webkit-mask-image: radial-gradient(
      circle closest-side,
      #000 50%,
      rgba(0, 0, 0, 0.88) 62%,
      rgba(0, 0, 0, 0.6) 73%,
      rgba(0, 0, 0, 0.3) 83%,
      rgba(0, 0, 0, 0.1) 92%,
      transparent 99%
    );
    mask-image: radial-gradient(
      circle closest-side,
      #000 50%,
      rgba(0, 0, 0, 0.88) 62%,
      rgba(0, 0, 0, 0.6) 73%,
      rgba(0, 0, 0, 0.3) 83%,
      rgba(0, 0, 0, 0.1) 92%,
      transparent 99%
    );
    transform: rotate(var(--tilt, 0deg));
    transition: transform 0.35s var(--ease-site);
  }
  .group:hover .card-photo-bubble {
    transform: rotate(var(--tilt, 0deg)) scale(1.07);
  }
  .card-photo-title {
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.85), 0 0 10px rgba(255, 255, 255, 0.7);
  }
  .card-photo-text {
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.9), 0 0 12px rgba(255, 255, 255, 0.75);
    transition: text-shadow 0.3s var(--ease-site);
  }
  .card-photo-text--dark {
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55), 0 0 14px rgba(0, 0, 0, 0.4);
    transition: text-shadow 0.3s var(--ease-site);
  }
  .group:hover .card-photo-text,
  .group:hover .card-photo-text--dark {
    text-shadow: none;
  }
  .card-doodle {
    opacity: var(--dd-opacity, 0.13);
    transition: opacity 0.25s var(--ease-site);
  }
  :is(.group:hover, .dd-play) .card-doodle {
    opacity: min(1, calc(var(--dd-opacity, 0.13) * 1.7));
  }
  .dd-review .card-doodle {
    opacity: 0.9;
  }
  .sport-doodle {
    --dd-opacity: 0.55;
  }
  .sd-bounce {
    transform-origin: 60px 100px;
  }
  .sd-swing {
    transform-origin: 60px 8px;
  }
  .sd-tick {
    transform-origin: 60px 66px;
  }
  .sd-hop {
    transform-origin: 62px 104px;
  }
  .sd-tail--left {
    transform-origin: 57px 60px;
  }
  .sd-tail--right {
    transform-origin: 63px 60px;
  }
  .sd-shadow {
    transform-origin: 60px 104px;
  }
  .sd-speed {
    opacity: 0;
  }
  .sd-sway {
    transform-origin: 36px 70px;
  }
  @media (prefers-reduced-motion: no-preference) {
    .sd-draw {
      stroke-dasharray: 1 1;
      stroke-dashoffset: 1;
    }
    .dd-play .sd-draw {
      animation: sd-draw 1.1s ease-out var(--dd-delay, 0s) forwards;
    }
    .dd-play .sd-bounce {
      animation: sd-bounce 1.4s linear 1.2s infinite;
    }
    .dd-play .sd-shadow {
      animation: sd-shadow 1.4s linear 1.2s infinite;
    }
    .dd-play .sd-slide {
      animation: sd-slide 3.2s ease-in-out 1.4s infinite;
    }
    .dd-play .sd-speed {
      animation: sd-speed 3.2s ease-in-out 1.4s infinite;
    }
    .dd-play .sd-swing {
      animation: sd-swing 3.6s ease-in-out 1.1s infinite;
    }
    .dd-play .sd-tick {
      animation: sd-tick 4s steps(8) 1.2s infinite;
    }
    .dd-play .sd-hop {
      animation: sd-hop 2.4s ease-in-out 1.2s infinite;
    }
    .dd-play .sd-tail--left {
      animation: sd-flutter 2.2s ease-in-out 1.2s infinite;
    }
    .dd-play .sd-tail--right {
      animation: sd-flutter 2.2s ease-in-out 1.5s infinite reverse;
    }
    .dd-play .sd-drift {
      animation: sd-drift 3s ease-in-out 1.3s infinite;
    }
    .dd-play .sd-sway {
      animation: sd-sway 3.4s ease-in-out 1.2s infinite;
    }
  }
  @keyframes sd-draw {
    to {
      stroke-dashoffset: 0;
    }
  }
  @keyframes sd-bounce {
    0% {
      transform: translateY(0) scale(1.08, 0.9);
      animation-timing-function: cubic-bezier(0.3, 0.6, 0.6, 1);
    }
    7% {
      transform: translateY(-2px) scale(0.98, 1.03);
      animation-timing-function: cubic-bezier(0.25, 0.6, 0.5, 1);
    }
    46% {
      transform: translateY(-16px) scale(1, 1);
      animation-timing-function: cubic-bezier(0.55, 0, 0.85, 0.45);
    }
    90% {
      transform: translateY(0) scale(0.97, 1.04);
      animation-timing-function: cubic-bezier(0.2, 0.7, 0.4, 1);
    }
    100% {
      transform: translateY(0) scale(1.08, 0.9);
    }
  }
  @keyframes sd-shadow {
    0%, 90%, 100% {
      transform: scaleX(1);
    }
    46% {
      transform: scaleX(0.7);
      animation-timing-function: cubic-bezier(0.55, 0, 0.85, 0.45);
    }
    0% {
      animation-timing-function: cubic-bezier(0.25, 0.6, 0.5, 1);
    }
  }
  @keyframes sd-slide {
    0%, 100% {
      transform: translateX(0);
    }
    45%, 60% {
      transform: translateX(-12px);
    }
  }
  @keyframes sd-speed {
    0%, 20%, 70%, 100% {
      opacity: 0;
    }
    40% {
      opacity: 1;
    }
  }
  @keyframes sd-swing {
    0%, 100% {
      transform: rotate(0deg);
    }
    30% {
      transform: rotate(5deg);
    }
    70% {
      transform: rotate(-5deg);
    }
  }
  @keyframes sd-tick {
    to {
      transform: rotate(360deg);
    }
  }
  @keyframes sd-hop {
    0%, 60%, 100% {
      transform: translateY(0) rotate(0deg);
    }
    30% {
      transform: translateY(-9px) rotate(-6deg);
    }
  }
  @keyframes sd-flutter {
    0%, 100% {
      transform: rotate(0deg);
    }
    50% {
      transform: rotate(6deg);
    }
  }
  @keyframes sd-drift {
    0%, 100% {
      transform: translateX(0);
    }
    50% {
      transform: translateX(-5px);
    }
  }
  @keyframes sd-sway {
    0%, 100% {
      transform: rotate(0deg);
    }
    50% {
      transform: rotate(-5deg);
    }
  }
  .dd-gear {
    transform-origin: 60px 60px;
    transition: transform 0.8s var(--ease-site);
  }
  :is(.group:hover, .dd-play) .dd-gear {
    animation: dd-spin 9s linear infinite;
  }
  @keyframes dd-spin {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(360deg);
    }
  }
  .dd-beam {
    transform-origin: 60px 31px;
  }
  .dd-pan--left {
    transform-origin: 22px 33px;
  }
  .dd-pan--right {
    transform-origin: 98px 33px;
  }
  :is(.group:hover, .dd-play) .dd-beam {
    animation: dd-sway 5s ease-out infinite;
  }
  :is(.group:hover, .dd-play) .dd-pan {
    animation: dd-sway-level 5s ease-out infinite;
  }
  @keyframes dd-sway {
    0% {
      transform: rotate(0deg);
    }
    8.3% {
      transform: rotate(4.6deg);
    }
    19.3% {
      transform: rotate(-3.1deg);
    }
    29.4% {
      transform: rotate(1.9deg);
    }
    38.2% {
      transform: rotate(-0.9deg);
    }
    46%, 100% {
      transform: rotate(0deg);
    }
  }
  @keyframes dd-sway-level {
    0% {
      transform: rotate(0deg);
    }
    8.3% {
      transform: rotate(-4.6deg);
    }
    19.3% {
      transform: rotate(3.1deg);
    }
    29.4% {
      transform: rotate(-1.9deg);
    }
    38.2% {
      transform: rotate(0.9deg);
    }
    46%, 100% {
      transform: rotate(0deg);
    }
  }
  .dd-pencil {
    transform-origin: 77.4px 34.1px;
  }
  :is(.group:hover, .dd-play) .dd-pencil {
    animation: dd-write-move 4.5s linear infinite;
  }
  @keyframes dd-write-move {
    0% {
      transform: none;
      animation-timing-function: cubic-bezier(0.45, 0, 0.55, 1);
    }
    10% {
      transform: translate(1px, 16px) rotate(-1.5deg);
      animation-timing-function: ease-in-out;
    }
    22% {
      transform: translate(2px, 17px) rotate(3deg);
      animation-timing-function: ease-in-out;
    }
    34% {
      transform: translate(3px, 16.5px) rotate(-3deg);
      animation-timing-function: ease-in-out;
    }
    46% {
      transform: translate(4px, 17px) rotate(3deg);
      animation-timing-function: ease-in-out;
    }
    58% {
      transform: translate(2px, 16.5px) rotate(-1.5deg);
      animation-timing-function: cubic-bezier(0.45, 0, 0.55, 1);
    }
    70%, 100% {
      transform: none;
    }
  }
  :is(.group:hover, .dd-play) .dd-curve {
    animation: dd-trace 3.4s ease-in-out infinite;
  }
  :is(.group:hover, .dd-play) .dd-hatch {
    animation: dd-trace 3.4s ease-in-out var(--dd-delay, 0s) infinite backwards;
  }
  @keyframes dd-trace {
    0% {
      stroke-dasharray: 1 1;
      stroke-dashoffset: 1;
    }
    28% {
      stroke-dasharray: 1 1;
      stroke-dashoffset: 0;
    }
    78% {
      stroke-dasharray: 1 1;
      stroke-dashoffset: 0;
    }
    100% {
      stroke-dasharray: 1 1;
      stroke-dashoffset: -1;
    }
  }
  :is(.group:hover, .dd-play) .dd-grow {
    animation: dd-grow 6s ease-in-out var(--dd-delay, 0s) infinite backwards;
  }
  @keyframes dd-grow {
    0% {
      stroke-dasharray: 1 1;
      stroke-dashoffset: 1;
    }
    15% {
      stroke-dasharray: 1 1;
      stroke-dashoffset: 0;
    }
    83% {
      stroke-dasharray: 1 1;
      stroke-dashoffset: 0;
    }
    95%, 100% {
      stroke-dasharray: 1 1;
      stroke-dashoffset: -1;
    }
  }
  :is(.group:hover, .dd-play) .dd-lid {
    animation: dd-lid 4s ease-in-out infinite;
  }
  @keyframes dd-lid {
    0%, 12% {
      transform: rotate(0deg);
    }
    32%, 62% {
      transform: rotate(-16deg);
    }
    82%, 100% {
      transform: rotate(0deg);
    }
  }
  :is(.group:hover, .dd-play) .dd-rain {
    animation: dd-rain 2.2s linear var(--dd-delay, 0s) infinite backwards;
  }
  @keyframes dd-rain {
    0% {
      transform: translateY(-14px);
      opacity: 0;
    }
    18% {
      opacity: 0.9;
    }
    82% {
      opacity: 0.9;
    }
    100% {
      transform: translateY(18px);
      opacity: 0;
    }
  }
  .dd-glow {
    opacity: 0;
  }
  :is(.group:hover, .dd-play) .dd-glow {
    animation: dd-glow 4.4s steps(1, end) infinite;
  }
  @keyframes dd-glow {
    0% {
      opacity: 0;
    }
    10% {
      opacity: 1;
    }
    62% {
      opacity: 0;
    }
    100% {
      opacity: 0;
    }
  }
  .dd-bubble {
    transform-box: fill-box;
    transform-origin: center;
  }
  :is(.group:hover, .dd-play) .dd-bubble {
    animation: dd-bubble 3.2s ease-in var(--dd-delay, 0s) infinite backwards;
  }
  @keyframes dd-bubble {
    0% {
      transform: translateY(3px) scale(0.6);
      opacity: 0;
    }
    20% {
      opacity: 0.9;
    }
    78% {
      opacity: 0.9;
    }
    100% {
      transform: translateY(-14px) scale(1);
      opacity: 0;
    }
  }
  :is(.group:hover, .dd-play) .dd-focus {
    animation: dd-focus 4.9s ease-in-out infinite;
  }
  @keyframes dd-focus {
    0%, 19% {
      transform: translateY(0);
    }
    44%, 71% {
      transform: translateY(6px);
    }
    93%, 100% {
      transform: translateY(0);
    }
  }
  :is(.group:hover, .dd-play) .dd-sleeve {
    animation: dd-sleeve 4.9s ease-in-out infinite;
  }
  @keyframes dd-sleeve {
    0%, 19% {
      transform: translateY(0);
    }
    44%, 71% {
      transform: translateY(2px);
    }
    93%, 100% {
      transform: translateY(0);
    }
  }
  :is(.group:hover, .dd-play) .dd-knob {
    animation: dd-knob 4.9s ease-in-out infinite;
  }
  @keyframes dd-knob {
    0%, 19% {
      transform: rotate(0deg);
    }
    44%, 71% {
      transform: rotate(150deg);
    }
    93%, 100% {
      transform: rotate(0deg);
    }
  }
  .dd-crack {
    opacity: 0;
  }
  :is(.group:hover, .dd-play) .dd-crack {
    animation: dd-crack 4.9s ease-in-out infinite;
  }
  @keyframes dd-crack {
    0%, 41% {
      opacity: 0;
    }
    48%, 69% {
      opacity: 1;
    }
    77%, 100% {
      opacity: 0;
    }
  }
  :is(.group:hover, .dd-play) .dd-hand {
    animation: dd-hand 5s linear infinite;
  }
  @keyframes dd-hand {
    0%, 6% {
      transform: rotate(0deg);
    }
    70%, 100% {
      transform: rotate(360deg);
    }
  }
  :is(.group:hover, .dd-play) .dd-crown {
    animation: dd-crown 5s ease-out infinite;
  }
  @keyframes dd-crown {
    0%, 2% {
      transform: translateY(-4px);
    }
    6%, 68% {
      transform: translateY(0);
    }
    74%, 100% {
      transform: translateY(-4px);
    }
  }
  :is(.group:hover, .dd-play) .dd-crown-stem {
    animation: dd-crown-stem 5s ease-out infinite;
  }
  @keyframes dd-crown-stem {
    0%, 2% {
      transform: scaleY(1);
    }
    6%, 68% {
      transform: scaleY(0);
    }
    74%, 100% {
      transform: scaleY(1);
    }
  }
  .dd-note-swing {
    transform-origin: 58px 85px;
  }
  :is(.group:hover, .dd-play) .dd-note-swing {
    animation: dd-metronome 4s ease-in-out infinite;
  }
  @keyframes dd-metronome {
    0%, 60%, 100% {
      transform: rotate(0deg);
    }
    15% {
      transform: rotate(8deg);
    }
    45% {
      transform: rotate(-8deg);
    }
  }
  :is(.group:hover, .dd-play) .dd-fly {
    animation: dd-fly 4s linear var(--dd-delay, 0s) infinite;
  }
  @keyframes dd-fly {
    0% {
      transform: none;
      opacity: 0;
    }
    22%, 72% {
      opacity: 1;
    }
    100% {
      transform: translate(8px, -4px);
      opacity: 0;
    }
  }
  .dd-trophy {
    transform-origin: 60px 105px;
  }
  :is(.group:hover, .dd-play) .dd-trophy {
    animation: dd-jump 4s cubic-bezier(0.34, 1.56, 0.64, 1) infinite;
  }
  @keyframes dd-jump {
    0%, 30%, 100% {
      transform: translateY(0) scaleY(1);
    }
    5% {
      transform: translateY(0) scaleY(0.95);
    }
    15% {
      transform: translateY(-12px) scaleY(1.05);
    }
    25% {
      transform: translateY(0) scaleY(0.95);
    }
  }
  .dd-sparkle {
    transform-origin: 24px 25px;
    opacity: 0;
  }
  :is(.group:hover, .dd-play) .dd-sparkle {
    animation: dd-shine 4s ease-in-out infinite;
  }
  @keyframes dd-shine {
    0%, 10%, 30%, 100% {
      opacity: 0;
      transform: scale(0) rotate(-45deg);
    }
    20% {
      opacity: 1;
      transform: scale(1.2) rotate(0deg);
    }
  }
  :is(.group:hover, .dd-play) .dd-ballot {
    animation: dd-drop 4s linear infinite;
  }
  @keyframes dd-drop {
    0% {
      transform: translateY(-8px);
      opacity: 0;
    }
    2% {
      opacity: 1;
    }
    4% {
      transform: translateY(-8px);
      opacity: 1;
      animation-timing-function: cubic-bezier(0.55, 0, 0.85, 0.35);
    }
    38% {
      transform: translateY(38px);
      opacity: 1;
    }
    41% {
      transform: translateY(38px);
      opacity: 0;
    }
    46%, 100% {
      transform: translateY(-8px);
      opacity: 0;
    }
  }
  :is(.group:hover, .dd-play) .dd-nod {
    animation: dd-metronome 4s ease-in-out var(--dd-delay, 0s) infinite;
  }
  .dd-tassel {
    transform-origin: 113px 37px;
  }
  :is(.group:hover, .dd-play) .dd-tassel {
    animation: dd-metronome 4s ease-in-out infinite;
  }
  :is(.group:hover, .dd-play) .dd-carriage {
    animation: dd-carriage 3.4s ease-in-out infinite;
  }
  @keyframes dd-carriage {
    0% {
      transform: translateX(0);
    }
    35% {
      transform: translateX(-7px);
    }
    70% {
      transform: translateX(6px);
    }
    90%, 100% {
      transform: translateX(0);
    }
  }
  @media (hover: none) {
    button:active,
    a.btn:active,
    [role='button']:active {
      transform: scale(0.96);
      filter: brightness(0.94);
      transition: transform 0.08s var(--ease-site), filter 0.08s var(--ease-site);
    }
  }
  .dd-tap {
    transform-box: view-box;
    transform-origin: 114.56px 108.16px;
    animation: dd-tap 2.8s ease-in-out infinite;
  }
  @keyframes dd-tap {
    0% {
      transform: translate(3.12px, 3.9px) rotate(51.34deg) scale(1.1, 1.03) rotate(-51.34deg);
    }
    14%, 26% {
      transform: translate(0px, 0px) rotate(51.34deg) scale(1, 1) rotate(-51.34deg);
    }
    40%, 100% {
      transform: translate(3.12px, 3.9px) rotate(51.34deg) scale(1.1, 1.03) rotate(-51.34deg);
    }
  }
  .dd-ripple {
    transform-box: fill-box;
    transform-origin: center;
    opacity: 0;
    animation: dd-ripple 2.8s ease-out infinite;
  }
  .dd-ripple--2 {
    animation-delay: 0.18s;
  }
  @keyframes dd-ripple {
    0%, 14% {
      transform: scale(0.35);
      opacity: 0;
    }
    18% {
      opacity: 0.75;
    }
    46%, 100% {
      transform: scale(1.5);
      opacity: 0;
    }
  }
  .dd-like {
    transform-box: fill-box;
    transform-origin: center;
    animation: dd-like 2.8s ease-out infinite;
  }
  @keyframes dd-like {
    0%, 14% {
      transform: scale(1);
    }
    20% {
      transform: scale(1.28);
    }
    30% {
      transform: scale(0.98);
    }
    38%, 100% {
      transform: scale(1);
    }
  }
  .dd-like-fill {
    opacity: 0;
    animation: dd-like-fill 2.8s ease-out infinite;
  }
  @keyframes dd-like-fill {
    0%, 16% {
      opacity: 0;
    }
    22%, 84% {
      opacity: 1;
    }
    92%, 100% {
      opacity: 0;
    }
  }
  .dd-bubble-up {
    animation-name: dd-bubble-up;
    animation-timing-function: cubic-bezier(0.4, 0.05, 0.6, 1);
    animation-iteration-count: infinite;
    opacity: 0;
  }
  @keyframes dd-bubble-up {
    0% {
      transform: translate(0, 0) scale(0.7);
      opacity: 0;
    }
    12% {
      opacity: 0.75;
    }
    70% {
      opacity: 0.55;
    }
    100% {
      transform: translate(var(--drift, 8px), var(--rise, -130px)) scale(1.15);
      opacity: 0;
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .dd-bubble-up {
      animation: none;
      opacity: 0;
    }
    .dd-tap,
    .dd-ripple,
    .dd-like,
    .dd-like-fill,
    :is(.group:hover, .dd-play) .dd-print,
    :is(.group:hover, .dd-play) .dd-steam,
    :is(.group:hover, .dd-play) .dd-gantry,
    :is(.group:hover, .dd-play) .dd-head,
    :is(.group:hover, .dd-play) .dd-answer--1,
    :is(.group:hover, .dd-play) .dd-answer--2,
    :is(.group:hover, .dd-play) .dd-answer--3,
    :is(.group:hover, .dd-play) .dd-pen-scribble,
    :is(.group:hover, .dd-play) .dd-pen-walk,
    :is(.group:hover, .dd-play) .dd-nod,
    :is(.group:hover, .dd-play) .dd-tassel,
    :is(.group:hover, .dd-play) .dd-carriage,
    :is(.group:hover, .dd-play) .dd-pointer,
    :is(.group:hover, .dd-play) .dd-write,
    :is(.group:hover, .dd-play) .dd-gear,
    :is(.group:hover, .dd-play) .dd-beam,
    :is(.group:hover, .dd-play) .dd-pan,
    :is(.group:hover, .dd-play) .dd-pencil,
    :is(.group:hover, .dd-play) .dd-curve,
    :is(.group:hover, .dd-play) .dd-hatch,
    :is(.group:hover, .dd-play) .dd-note-swing,
    :is(.group:hover, .dd-play) .dd-fly,
    :is(.group:hover, .dd-play) .dd-trophy,
    :is(.group:hover, .dd-play) .dd-sparkle,
    :is(.group:hover, .dd-play) .dd-ballot {
      animation: none;
      transform: none;
    }
  }
  html[data-contrast='high'] .card-doodle {
    display: none;
  }
  .fab-panel {
    transform-origin: bottom right;
    will-change: transform, opacity;
  }
  .fab-panel--in {
    animation: fab-genie-in 0.36s var(--ease-site) both;
  }
  .fab-panel--out {
    animation: fab-genie-out 0.2s ease-in both;
  }
  @keyframes fab-genie-in {
    0% {
      opacity: 0;
      transform: translate(14px, 30px) scale(0.16, 0.05);
    }
    45% {
      opacity: 1;
    }
    100% {
      opacity: 1;
      transform: none;
    }
  }
  @keyframes fab-genie-out {
    0% {
      opacity: 1;
      transform: none;
    }
    55% {
      opacity: 1;
    }
    100% {
      opacity: 0;
      transform: translate(14px, 30px) scale(0.16, 0.05);
    }
  }
  .fab-ico {
    grid-area: 1 / 1;
    transition: transform 0.3s var(--ease-site), opacity 0.18s var(--ease-site);
  }
  .fab-ico--off {
    transform: rotate(-90deg) scale(0.4);
    opacity: 0;
  }
  @media (prefers-reduced-motion: reduce) {
    .fab-panel--in, .fab-panel--out {
      animation-duration: 0.01s;
    }
    .fab-ico {
      transition: none;
    }
  }
  .social-ig:hover {
    background-image: linear-gradient(38deg, #f9ce34 0%, #ee2a7b 34%, #d62976 62%, #6228d7 100%);
    border-color: transparent;
  }
  .social-ig:hover [stroke] {
    stroke: #fff;
  }
  .social-ig:hover [fill]:not([fill='none']) {
    fill: #fff;
  }
  @media (hover: none) {
    .social-ig {
      background-image: linear-gradient(38deg, #f9ce34 0%, #ee2a7b 34%, #d62976 62%, #6228d7 100%);
      border-color: transparent;
    }
    .social-ig [stroke] {
      stroke: #fff;
    }
    .social-ig [fill]:not([fill='none']) {
      fill: #fff;
    }
  }
  .band {
    position: relative;
    border-radius: var(--radius-band);
    overflow: hidden;
  }
  .band-dark {
    background: linear-gradient(140deg, #182a32 0%, var(--dark) 48%, #0a1317 100%);
    color: #ffffff;
    box-shadow: 0 8px 24px var(--dark);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 8px 24px color-mix(in srgb, var(--dark) 8%, transparent);
    }
  }
  .band-accent {
    background: linear-gradient(135deg, var(--accent) 0%, var(--accent-deep) 60%, var(--accent-deep) 100%);
    @supports (color: color-mix(in lab, red, red)) {
      background: linear-gradient(135deg, var(--accent) 0%, var(--accent-deep) 60%, color-mix(in srgb, var(--accent-deep) 85%, var(--dark)) 100%);
    }
    color: #ffffff;
    box-shadow: 0 8px 24px var(--dark);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 8px 24px color-mix(in srgb, var(--dark) 8%, transparent);
    }
  }
  .site-doodles {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-color: var(--color-primary);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in srgb, var(--color-primary) 30%, var(--color-line));
    }
    opacity: 0.42;
    mask-image: url('/doodles-tile.svg'),
      linear-gradient(to right, #000, rgb(0 0 0 / 0.5) 24%, rgb(0 0 0 / 0.5) 76%, #000);
    mask-size: 1330px, 100% 100%;
    mask-repeat: repeat, no-repeat;
    mask-composite: intersect;
  }
  @media (max-width: 1023px) {
    .site-doodles {
      mask-size: 950px, 100% 100%;
      opacity: 0.28;
    }
  }
  .watermark {
    position: absolute;
    inset: var(--watermark-inset, auto);
    width: var(--watermark-size, auto);
    opacity: var(--watermark-opacity, 0.06);
    pointer-events: none;
    user-select: none;
  }
  .badge {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    border-radius: 999px;
    padding: 0.3rem 0.8rem;
    font-size: 0.75rem;
    font-weight: 600;
    background: var(--color-primary-soft);
    color: var(--color-primary-strong);
    border: 1px solid var(--color-primary);
    @supports (color: color-mix(in lab, red, red)) {
      border: 1px solid color-mix(in srgb, var(--color-primary) 22%, transparent);
    }
  }
  .rich-text table {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-collapse: collapse;
  }
  .field-label {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 0.375rem;
  }
  .field-input {
    width: 100%;
    border: 1.5px solid var(--color-line);
    border-radius: 0.75rem;
    background: var(--color-line);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--color-line) 20%, var(--color-surface));
    }
    color: var(--color-text);
    padding: 0.75rem 1rem;
    font-size: 1rem;
    transition: border-color 0.2s var(--ease-site), box-shadow 0.2s var(--ease-site), background-color 0.2s var(--ease-site);
  }
  @media (min-width: 640px) {
    .field-input {
      font-size: 0.95rem;
    }
  }
  .field-input:focus {
    outline: none;
    background: var(--color-surface);
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-primary);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 18%, transparent);
    }
  }
  .field-error {
    color: #c0392b;
    font-size: 0.8rem;
    margin-top: 0.3rem;
  }
  .form-dark {
    background: linear-gradient(150deg, #182a32 0%, var(--dark) 60%, #0c1518 100%);
    color: #ffffff;
    box-shadow: 0 8px 24px var(--dark);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 8px 24px color-mix(in srgb, var(--dark) 8%, transparent);
    }
  }
  .form-dark .field-label {
    color: var(--dark-fg);
  }
  .form-dark .field-input {
    background: var(--panel);
    border-color: var(--dark-line);
    color: #ffffff;
  }
  .form-dark .field-input:focus {
    border-color: var(--accent-soft);
  }
  .form-dark .field-error {
    color: #ff8a7a;
  }
  .form-dark {
    --form-link: var(--accent-soft);
  }
  .glass-dark {
    background: var(--dark);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--dark) 97%, transparent);
    }
  }
  header.glass-dark {
    background: transparent;
    isolation: isolate;
  }
  header.glass-dark::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: var(--dark);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--dark) 92%, transparent);
    }
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
  }
  [data-nav-shell] * {
    scroll-margin-top: calc(-1 * (var(--nav-h) + 1rem));
  }
  .caption-veil {
    --veil-mix: 82%;
    --veil-fade: 3rem;
    --veil-dip: 7px;
    isolation: isolate;
  }
  .group:hover .caption-veil {
    --veil-mix: 93%;
  }
  .caption-veil::before {
    content: '';
    position: absolute;
    inset: calc(-1 * var(--veil-fade)) 0 0;
    z-index: -1;
    pointer-events: none;
    --v: var(--color-surface);
    --l: calc(var(--veil-fade) + var(--veil-dip));
    background: linear-gradient(
      to bottom,
      transparent 0,
      var(--v) calc(var(--l) * 0.15),
      var(--v) calc(var(--l) * 0.35),
      var(--v) calc(var(--l) * 0.55),
      var(--v) calc(var(--l) * 0.75),
      var(--v) calc(var(--l) * 0.9),
      var(--v) var(--l)
    );
    @supports (color: color-mix(in lab, red, red)) {
      background: linear-gradient(
      to bottom,
      transparent 0,
      color-mix(in srgb, var(--v) calc(var(--veil-mix) * 0.04), transparent) calc(var(--l) * 0.15),
      color-mix(in srgb, var(--v) calc(var(--veil-mix) * 0.16), transparent) calc(var(--l) * 0.35),
      color-mix(in srgb, var(--v) calc(var(--veil-mix) * 0.4), transparent) calc(var(--l) * 0.55),
      color-mix(in srgb, var(--v) calc(var(--veil-mix) * 0.7), transparent) calc(var(--l) * 0.75),
      color-mix(in srgb, var(--v) calc(var(--veil-mix) * 0.92), transparent) calc(var(--l) * 0.9),
      color-mix(in srgb, var(--v) var(--veil-mix), transparent) var(--l)
    );
    }
  }
  .rich-text {
    font-size: 1.02rem;
    line-height: 1.75;
  }
  .rich-text > * + *,
  .rich-text :where(.payload-richtext) > * + * {
    margin-top: 1em;
  }
  .rich-text h2 {
    font-size: clamp(2.125rem, 4vw, 3.375rem);
    line-height: 1.1;
    margin-top: 2.6rem;
    margin-bottom: 1.1rem;
  }
  .rich-text h3 {
    font-family: var(--font-neucha), 'Comic Sans MS', cursive;
    font-weight: 400;
    font-size: 1.45rem;
    margin-top: 1.6rem;
  }
  .rich-text a {
    color: var(--color-primary-strong);
    text-decoration: underline;
    text-underline-offset: 3px;
  }
  .rich-text ul {
    list-style: disc;
    padding-left: 1.4rem;
  }
  .rich-text ol {
    list-style: decimal;
    padding-left: 1.4rem;
  }
  .rich-text li {
    margin-top: 0.4em;
  }
  .rich-text blockquote {
    border-left: 3px solid var(--accent);
    background: var(--accent-tint);
    border-radius: 0 var(--radius-card) var(--radius-card) 0;
    padding: 1rem 1.25rem;
    color: var(--color-text);
  }
  .rich-text img {
    border-radius: var(--radius-card);
  }
}
@layer utilities {
  .text-balance {
    text-wrap: balance;
  }
  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
  }
}
@keyframes scrollHint {
  0%, 100% {
    transform: translateY(0);
    opacity: 0.9;
  }
  50% {
    transform: translateY(8px);
    opacity: 0.4;
  }
}
.scroll-hint {
  animation: scrollHint 1.8s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .scroll-hint {
    animation: none;
  }
}
@keyframes bannerFade {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.banner-fade {
  animation: bannerFade 0.45s ease both;
}
@media (prefers-reduced-motion: reduce) {
  .banner-fade {
    animation: none;
  }
}
@keyframes search-flash {
  0% {
    background-color: color-mix(in srgb, var(--color-primary) 18%, var(--color-bg));
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-primary) 30%, transparent);
    border-color: var(--color-primary);
  }
  30% {
    background-color: color-mix(in srgb, var(--color-primary) 30%, var(--color-bg));
    box-shadow: 0 0 0 8px color-mix(in srgb, var(--color-primary) 40%, transparent);
    border-color: var(--color-primary-strong);
  }
  100% {
    background-color: transparent;
    box-shadow: none;
  }
}
.search-highlight {
  animation: search-flash 2.5s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}
@keyframes laurel-breathe {
  0%,
  100% {
    transform: translateY(0) rotate(0deg);
  }
  50% {
    transform: translateY(-2px) rotate(-1.6deg);
  }
}
.award-stat .laurel-anim {
  animation: laurel-breathe 6s ease-in-out infinite;
  transform-origin: 50% 85%;
}
.award-stat .laurel-anim:last-child {
  animation-direction: reverse;
}
.award-stat:nth-child(2) .laurel-anim {
  animation-delay: 0.9s;
}
.award-stat:nth-child(3) .laurel-anim {
  animation-delay: 1.8s;
}
@media (prefers-reduced-motion: reduce) {
  .award-stat .laurel-anim {
    animation: none;
  }
}
@keyframes flag-wave {
  0%,
  100% {
    transform: skewY(0deg) scaleY(1);
  }
  50% {
    transform: skewY(-1.6deg) scaleY(1.03);
  }
}
.flag-doodle [data-cloth] {
  transform-origin: 10px 45px;
  animation: flag-wave 5s ease-in-out infinite;
}
.flag-stat:nth-child(2) .flag-doodle [data-cloth] {
  animation-duration: 6.2s;
  animation-delay: 0.5s;
}
.flag-stat:nth-child(3) .flag-doodle [data-cloth] {
  animation-duration: 4.4s;
  animation-delay: 1.1s;
}
@media (prefers-reduced-motion: reduce) {
  .flag-doodle [data-cloth] {
    animation: none;
  }
}
@keyframes boat-rock {
  0%,
  100% {
    transform: rotate(-3deg) translateY(1px);
  }
  50% {
    transform: rotate(3deg) translateY(-2px);
  }
}
@keyframes boat-wave {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-60px);
  }
}
.boat-doodle__hull {
  transform-origin: 85px 86px;
  animation: boat-rock 4.5s ease-in-out infinite;
}
.boat-doodle__wave {
  animation: boat-wave linear infinite;
}
.boat-doodle__wave--1 {
  animation-duration: 9s;
}
.boat-doodle__wave--2 {
  animation-duration: 6.5s;
  opacity: 0.75;
}
.boat-doodle__wave--3 {
  animation-duration: 12s;
  opacity: 0.55;
}
.boat-doodle__ripple {
  opacity: 0.7;
}
@media (prefers-reduced-motion: reduce) {
  .boat-doodle__hull,
  .boat-doodle__wave {
    animation: none;
  }
}
.scroll-panel {
  position: relative;
}
.scroll-panel__list {
  max-height: min(60vh, 34rem);
  overflow-y: auto;
  padding-right: 0.75rem;
  scrollbar-width: thin;
  scrollbar-color: var(--accent) transparent;
}
.scroll-panel__list::-webkit-scrollbar {
  width: 6px;
}
.scroll-panel__list::-webkit-scrollbar-thumb {
  background: var(--accent);
  border-radius: 999px;
}
.scroll-panel::after {
  content: '';
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 3rem;
  pointer-events: none;
  background: linear-gradient(to bottom, transparent, var(--color-bg));
}
.thumbs-scroll {
  scrollbar-width: thin;
  scrollbar-color: var(--accent-deep, var(--accent)) transparent;
}
.thumbs-scroll::-webkit-scrollbar {
  height: 6px;
}
.thumbs-scroll::-webkit-scrollbar-track {
  background: transparent;
}
.thumbs-scroll::-webkit-scrollbar-thumb {
  background: var(--accent-deep, var(--accent));
  border-radius: 999px;
}
.scrollbar-none {
  scrollbar-width: none;
}
.scrollbar-none::-webkit-scrollbar {
  display: none;
}
.img-skeleton {
  position: relative;
  overflow: hidden;
  background-color: var(--color-bg-alt, #f6f4ef);
}
.modal-scroll {
  scrollbar-width: thin;
  scrollbar-color: var(--color-ink) transparent;
  @supports (color: color-mix(in lab, red, red)) {
    scrollbar-color: color-mix(in srgb, var(--color-ink) 15%, transparent) transparent;
  }
}
.modal-scroll::-webkit-scrollbar {
  width: 6px;
  background: transparent;
}
.modal-scroll::-webkit-scrollbar-track {
  background: transparent;
}
.modal-scroll::-webkit-scrollbar-thumb {
  background: var(--color-ink);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--color-ink) 15%, transparent);
  }
  border-radius: 4px;
}
[data-block-type="faqAccordion"]:last-child {
  background: linear-gradient(180deg, rgb(196 221 227 / 0.175), rgb(196 221 227 / 0.7));
}
[data-block-id]:has(+ [data-block-type="faqAccordion"]:last-child) {
  background: linear-gradient(180deg, transparent, rgb(196 221 227 / 0.175));
}
[data-block-type="documentsList"]:last-child {
  background: linear-gradient(180deg, rgb(196 221 227 / 0.15), rgb(196 221 227 / 0.595));
}
[data-block-id]:has(+ [data-block-type="documentsList"]:last-child) {
  background: linear-gradient(180deg, transparent, rgb(196 221 227 / 0.15));
}
:is([data-block-type="schedule"], [data-block-type="clubsGrid"], [data-block-type="staffDirectory"], [data-block-type="eventsList"], [data-block-type="athletesGrid"], [data-block-type="contactSection"], [data-block-type="traditionsCalendar"], [data-block-type="safetyCabinet"]):last-child {
  background: linear-gradient(180deg, rgb(196 221 227 / 0), rgb(196 221 227 / 0.175) 35%, rgb(196 221 227 / 0.7)) bottom / 100% min(100%, 900px) no-repeat;
}
@media (prefers-reduced-motion: no-preference) {
  html:not(.smoke-ready) :is(h1, .section-title, .display, [data-smoke-after], [data-cascade] > *):not([data-smoke-skip], [data-smoke-skip] *) {
    opacity: 0;
    animation: smoke-failsafe 0s 3s forwards;
  }
}
@keyframes smoke-failsafe {
  to {
    opacity: 1;
  }
}
@property --tw-translate-x {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-translate-y {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-translate-z {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-scale-x {
  syntax: "*";
  inherits: false;
  initial-value: 1;
}
@property --tw-scale-y {
  syntax: "*";
  inherits: false;
  initial-value: 1;
}
@property --tw-scale-z {
  syntax: "*";
  inherits: false;
  initial-value: 1;
}
@property --tw-rotate-x {
  syntax: "*";
  inherits: false;
}
@property --tw-rotate-y {
  syntax: "*";
  inherits: false;
}
@property --tw-rotate-z {
  syntax: "*";
  inherits: false;
}
@property --tw-skew-x {
  syntax: "*";
  inherits: false;
}
@property --tw-skew-y {
  syntax: "*";
  inherits: false;
}
@property --tw-scroll-snap-strictness {
  syntax: "*";
  inherits: false;
  initial-value: proximity;
}
@property --tw-space-y-reverse {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-divide-y-reverse {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-border-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}
@property --tw-gradient-position {
  syntax: "*";
  inherits: false;
}
@property --tw-gradient-from {
  syntax: "<color>";
  inherits: false;
  initial-value: #0000;
}
@property --tw-gradient-via {
  syntax: "<color>";
  inherits: false;
  initial-value: #0000;
}
@property --tw-gradient-to {
  syntax: "<color>";
  inherits: false;
  initial-value: #0000;
}
@property --tw-gradient-stops {
  syntax: "*";
  inherits: false;
}
@property --tw-gradient-via-stops {
  syntax: "*";
  inherits: false;
}
@property --tw-gradient-from-position {
  syntax: "<length-percentage>";
  inherits: false;
  initial-value: 0%;
}
@property --tw-gradient-via-position {
  syntax: "<length-percentage>";
  inherits: false;
  initial-value: 50%;
}
@property --tw-gradient-to-position {
  syntax: "<length-percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-leading {
  syntax: "*";
  inherits: false;
}
@property --tw-font-weight {
  syntax: "*";
  inherits: false;
}
@property --tw-tracking {
  syntax: "*";
  inherits: false;
}
@property --tw-ordinal {
  syntax: "*";
  inherits: false;
}
@property --tw-slashed-zero {
  syntax: "*";
  inherits: false;
}
@property --tw-numeric-figure {
  syntax: "*";
  inherits: false;
}
@property --tw-numeric-spacing {
  syntax: "*";
  inherits: false;
}
@property --tw-numeric-fraction {
  syntax: "*";
  inherits: false;
}
@property --tw-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-shadow-color {
  syntax: "*";
  inherits: false;
}
@property --tw-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-inset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-inset-shadow-color {
  syntax: "*";
  inherits: false;
}
@property --tw-inset-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-ring-color {
  syntax: "*";
  inherits: false;
}
@property --tw-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-inset-ring-color {
  syntax: "*";
  inherits: false;
}
@property --tw-inset-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-ring-inset {
  syntax: "*";
  inherits: false;
}
@property --tw-ring-offset-width {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}
@property --tw-ring-offset-color {
  syntax: "*";
  inherits: false;
  initial-value: #fff;
}
@property --tw-ring-offset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-outline-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}
@property --tw-blur {
  syntax: "*";
  inherits: false;
}
@property --tw-brightness {
  syntax: "*";
  inherits: false;
}
@property --tw-contrast {
  syntax: "*";
  inherits: false;
}
@property --tw-grayscale {
  syntax: "*";
  inherits: false;
}
@property --tw-hue-rotate {
  syntax: "*";
  inherits: false;
}
@property --tw-invert {
  syntax: "*";
  inherits: false;
}
@property --tw-opacity {
  syntax: "*";
  inherits: false;
}
@property --tw-saturate {
  syntax: "*";
  inherits: false;
}
@property --tw-sepia {
  syntax: "*";
  inherits: false;
}
@property --tw-drop-shadow {
  syntax: "*";
  inherits: false;
}
@property --tw-drop-shadow-color {
  syntax: "*";
  inherits: false;
}
@property --tw-drop-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-drop-shadow-size {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-blur {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-brightness {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-contrast {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-grayscale {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-hue-rotate {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-invert {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-opacity {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-saturate {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-sepia {
  syntax: "*";
  inherits: false;
}
@property --tw-duration {
  syntax: "*";
  inherits: false;
}
@property --tw-ease {
  syntax: "*";
  inherits: false;
}
@property --tw-content {
  syntax: "*";
  initial-value: "";
  inherits: false;
}
@layer properties {
  @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
    *, ::before, ::after, ::backdrop {
      --tw-translate-x: 0;
      --tw-translate-y: 0;
      --tw-translate-z: 0;
      --tw-scale-x: 1;
      --tw-scale-y: 1;
      --tw-scale-z: 1;
      --tw-rotate-x: initial;
      --tw-rotate-y: initial;
      --tw-rotate-z: initial;
      --tw-skew-x: initial;
      --tw-skew-y: initial;
      --tw-scroll-snap-strictness: proximity;
      --tw-space-y-reverse: 0;
      --tw-divide-y-reverse: 0;
      --tw-border-style: solid;
      --tw-gradient-position: initial;
      --tw-gradient-from: #0000;
      --tw-gradient-via: #0000;
      --tw-gradient-to: #0000;
      --tw-gradient-stops: initial;
      --tw-gradient-via-stops: initial;
      --tw-gradient-from-position: 0%;
      --tw-gradient-via-position: 50%;
      --tw-gradient-to-position: 100%;
      --tw-leading: initial;
      --tw-font-weight: initial;
      --tw-tracking: initial;
      --tw-ordinal: initial;
      --tw-slashed-zero: initial;
      --tw-numeric-figure: initial;
      --tw-numeric-spacing: initial;
      --tw-numeric-fraction: initial;
      --tw-shadow: 0 0 #0000;
      --tw-shadow-color: initial;
      --tw-shadow-alpha: 100%;
      --tw-inset-shadow: 0 0 #0000;
      --tw-inset-shadow-color: initial;
      --tw-inset-shadow-alpha: 100%;
      --tw-ring-color: initial;
      --tw-ring-shadow: 0 0 #0000;
      --tw-inset-ring-color: initial;
      --tw-inset-ring-shadow: 0 0 #0000;
      --tw-ring-inset: initial;
      --tw-ring-offset-width: 0px;
      --tw-ring-offset-color: #fff;
      --tw-ring-offset-shadow: 0 0 #0000;
      --tw-outline-style: solid;
      --tw-blur: initial;
      --tw-brightness: initial;
      --tw-contrast: initial;
      --tw-grayscale: initial;
      --tw-hue-rotate: initial;
      --tw-invert: initial;
      --tw-opacity: initial;
      --tw-saturate: initial;
      --tw-sepia: initial;
      --tw-drop-shadow: initial;
      --tw-drop-shadow-color: initial;
      --tw-drop-shadow-alpha: 100%;
      --tw-drop-shadow-size: initial;
      --tw-backdrop-blur: initial;
      --tw-backdrop-brightness: initial;
      --tw-backdrop-contrast: initial;
      --tw-backdrop-grayscale: initial;
      --tw-backdrop-hue-rotate: initial;
      --tw-backdrop-invert: initial;
      --tw-backdrop-opacity: initial;
      --tw-backdrop-saturate: initial;
      --tw-backdrop-sepia: initial;
      --tw-duration: initial;
      --tw-ease: initial;
      --tw-content: "";
    }
  }
}



/*!*******************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/.pnpm/next@16.2.6_@babel+core@7.29.7_@playwright+test@1.58.2_react-dom@19.2.6_react@19.2.6__react@19.2.6_sass@1.77.4/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[2]!./node_modules/.pnpm/next@16.2.6_@babel+core@7.29.7_@playwright+test@1.58.2_react-dom@19.2.6_react@19.2.6__react@19.2.6_sass@1.77.4/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[3]!./src/components/blocks/statsDoodle.css ***!
  \*******************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/* Малюнок у картці статистики. Окремий файл, а не утиліти Tailwind: Turbopack
   у dev віддавав застарілий CSS без нових класів.
   Телефон: завжди праворуч угорі, вдвічі більший, ніж 19.10 (власник 2026-10-20:
   «стали замалі»). Висоти плитки він не додає (власник 2026-10-20: опущений під
   малюнок текст робив плитки зайво високими): малюнок – ледь помітний шар у
   порожньому правому верхньому куті, число і підпис лежать над ним.
   З 768 px – як було: кут з адмінки і повний розмір 132 px */
.stat-card {
  --stat-doodle: 72px;
}
.stat-card--lead {
  --stat-doodle: 144px;
}
@media (min-width: 400px) {
  .stat-card { --stat-doodle: 112px; }
  .stat-card--lead { --stat-doodle: 144px; }
}

.stat-doodle {
  top: 0.25rem;
  right: 0.25rem;
  bottom: auto;
  left: auto;
  width: var(--stat-doodle);
}

/* на телефоні малюнок під текстом, тож без підсилення, яким тату оживає в полі зору.
   Квадрат трохи вище краю: контури малюнків мають поля всередині, і так їхній
   низ закінчується над підписом, а не перекреслює його */
@media (max-width: 767.98px) {
  .stat-card .stat-doodle {
    top: -0.375rem;
    opacity: var(--dd-opacity, 0.13);
  }
}

@media (min-width: 768px) {
  .stat-doodle { width: 132px; }
  .stat-doodle--br,
  .stat-doodle--bl { top: auto; bottom: 0.25rem; }
  .stat-doodle--tl,
  .stat-doodle--bl { right: auto; left: 0.25rem; }
}

/*!************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/.pnpm/next@16.2.6_@babel+core@7.29.7_@playwright+test@1.58.2_react-dom@19.2.6_react@19.2.6__react@19.2.6_sass@1.77.4/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[2]!./node_modules/.pnpm/next@16.2.6_@babel+core@7.29.7_@playwright+test@1.58.2_react-dom@19.2.6_react@19.2.6__react@19.2.6_sass@1.77.4/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[3]!./src/components/blocks/surfaceGradients.css ***!
  \************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/* Ледь помітні градієнти на пласких плашках головної (власник 2026-10-20). Градієнт іде
   від трохи СВІТЛІШОГО відтінку того самого кольору до самого кольору: світлота в OKLCH
   підіймається, а насиченість і тон лишаються, тож кут не вицвітає до білого і не зливається
   зі сторінкою. Без білих відсвітів (власник: «світлий кут виглядає дивно»).
   Кольори – лише змінні теми. Браузер без відносних кольорів показує рівну заливку.
   Окремий файл, а не globals.css: Turbopack у dev віддавав застарілий CSS */
.grad-sand { background-color: var(--sand-tint); }
.grad-teal { background-color: var(--accent-tint); }
.grad-dark { background-color: var(--dark); }
.grad-primary { background-color: var(--color-primary); }

@supports (color: oklch(from red l c h)) {
  .grad-sand {
    background-image: linear-gradient(150deg, oklch(from var(--sand-tint) calc(l + 0.025) calc(c * 1.1) h) 0%, var(--sand-tint) 75%);
  }
  .grad-teal {
    background-image: linear-gradient(150deg, oklch(from var(--accent-tint) calc(l + 0.02) calc(c * 1.15) h) 0%, var(--accent-tint) 75%);
  }
  .grad-dark {
    background-image: linear-gradient(150deg, oklch(from var(--dark) calc(l + 0.07) c h) 0%, var(--dark) 75%);
  }
  /* під білим дрібним текстом: світліший край у правому верхньому куті, а текст стоїть зліва
     на самому --color-primary, тож контраст 4.7:1 не падає */
  .grad-primary {
    background-image: linear-gradient(240deg, oklch(from var(--color-primary) calc(l + 0.05) c h) 0%, var(--color-primary) 65%);
  }
}

html[data-contrast='high'] :is(.grad-sand, .grad-teal, .grad-dark, .grad-primary) {
  background-image: none;
}

/*!********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/.pnpm/next@16.2.6_@babel+core@7.29.7_@playwright+test@1.58.2_react-dom@19.2.6_react@19.2.6__react@19.2.6_sass@1.77.4/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[2]!./node_modules/.pnpm/next@16.2.6_@babel+core@7.29.7_@playwright+test@1.58.2_react-dom@19.2.6_react@19.2.6__react@19.2.6_sass@1.77.4/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[3]!./src/components/blocks/paperSticker.css ***!
  \********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/* Картки профілів навчання як паперові наліпки (власник 2026-10-20: «як справжні
   паперові стікери, а не плоскі одноколірні плашки»). Варіант D з проби
   docs/probes/paper-stickers-proba.html: дрібне зерно + мʼякі волокна множенням
   поверх тінту родини, тонкий світлий висічений край і легка тінь, без нахилу.
   Фактура – SVG-шум у data URI (≈1 КБ разом), лежить ПІД текстом (z-index -1
   в ізольованому контексті), тож контраст тексту майже не змінюється.
   Окремий файл, а не утиліти Tailwind: Turbopack у dev віддавав застарілий CSS */
/* .paper-grain – лише фактура паперу без висіченого краю (картки «Чому Ліцей 100»);
   сила зерна – через --paper-grain-strength, а не копією правил */
.paper-sticker,
.paper-grain {
  isolation: isolate;
}
.paper-sticker {
  --sticker-edge: color-mix(in srgb, var(--color-surface, #fff) 92%, var(--sand, #f3ecdf));
  --sticker-shadow: 0 0 0 3px var(--sticker-edge), 0 1px 2px rgb(16 28 32 / 0.06), 0 6px 14px -10px rgb(16 28 32 / 0.22);
  box-shadow: var(--sticker-shadow);
}
.paper-sticker:hover {
  box-shadow: 0 0 0 3px var(--sticker-edge), var(--shadow-lift, 0 14px 30px rgb(16 28 32 / 0.1));
}
.paper-sticker::before,
.paper-sticker::after,
.paper-grain::before,
.paper-grain::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  pointer-events: none;
}
.paper-sticker::before,
.paper-grain::before {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='s'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.06 .3' numOctaves='2' seed='11' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .3 0 0 0 0 .26 0 0 0 0 .2 0 0 0 .9 -.38'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23s)'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .3 0 0 0 0 .22 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 200px, 160px;
  mix-blend-mode: multiply;
  opacity: calc(0.24 * var(--paper-grain-strength, 1));
}
/* світло з лівого верхнього кута – папір, а не пластик */
.paper-sticker::after,
.paper-grain::after {
  background: linear-gradient(150deg, rgb(255 255 255 / 0.35), transparent 40%);
}
html[data-contrast='high'] :is(.paper-sticker, .paper-grain)::before,
html[data-contrast='high'] :is(.paper-sticker, .paper-grain)::after {
  display: none;
}
/* картки «Чому Ліцей 100»: зерно слабше, ніж на наліпках профілів – 0.9, потім ще на 20 % (власник 2026-10-20) */
.paper-grain--soft {
  --paper-grain-strength: 0.72;
}

/*!***********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/.pnpm/next@16.2.6_@babel+core@7.29.7_@playwright+test@1.58.2_react-dom@19.2.6_react@19.2.6__react@19.2.6_sass@1.77.4/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[2]!./node_modules/.pnpm/next@16.2.6_@babel+core@7.29.7_@playwright+test@1.58.2_react-dom@19.2.6_react@19.2.6__react@19.2.6_sass@1.77.4/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[3]!./src/components/blocks/directorAddress.css ***!
  \***********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/* Звернення директора – варіант B з проби docs/probes/director-address-proba.html
   (власник 2026-10-20: сміливий лист, фото-поляроїд БЕЗ скотчу, рукописний підпис).
   Фактура паперу – спільний .paper-grain з paperSticker.css, тут лише розкладка.
   Окремий файл поруч із компонентом, а не globals.css: Turbopack у dev віддавав застарілий CSS */

.da-home,
.da-band,
.da-sheet {
  position: relative;
}

/* ---------- поляроїд ---------- */
.da-polaroid {
  position: relative;
  margin: 0;
  padding: 12px 12px 14px;
  background: var(--color-surface, #fff);
  box-shadow: 0 1px 2px rgb(16 28 32 / 0.08), 0 14px 30px -14px rgb(16 28 32 / 0.35);
  rotate: -3deg;
}
.da-photo {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--accent-tint);
}
/* фото 640×427 альбомне: кадр 4:5 тримає обличчя, як у пробі */
.da-photo img {
  object-fit: cover;
  object-position: 57% 40%;
}
.da-polaroid figcaption {
  margin-top: 10px;
  text-align: center;
  font: 400 1.15rem/1.2 var(--font-display);
  color: var(--color-muted);
}

/* ---------- рукописний підпис ---------- */
.da-sign {
  display: inline-block;
  font: 400 clamp(2rem, 3vw, 2.6rem)/1 var(--font-display);
  color: var(--accent-deep);
}
.da-sign svg {
  display: block;
  width: 100%;
  height: 14px;
  margin-top: 2px;
  overflow: visible;
}

/* ---------- уривок на головній ---------- */
.da-home {
  display: grid;
  gap: 2rem;
  justify-items: center;
  text-align: center;
  background: var(--accent-tint);
  border-radius: var(--radius-band, 17px);
  padding: 2.5rem 1.25rem 2rem;
}
.da-home .da-polaroid {
  width: 190px;
}
.da-home-text {
  margin: 0.75rem 0 0;
  font: 400 1.3rem/1.35 var(--font-display);
}
/* текст обрізаний на межі речення; останній рядок мʼяко згасає, далі – «Читати далі» */
.da-excerpt {
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 1.7em), rgb(0 0 0 / 0.3));
  mask-image: linear-gradient(to bottom, #000 calc(100% - 1.7em), rgb(0 0 0 / 0.3));
}
.da-hello {
  display: block;
  margin-bottom: 0.25rem;
  color: var(--accent-deep);
}
.da-p {
  display: block;
  margin-top: 0.5rem;
}
.da-wide {
  display: none;
}
.da-home .da-sign {
  margin-top: 1.5rem;
}
.da-role {
  margin: 0.25rem 0 0;
  color: var(--color-muted);
}
.da-home .btn {
  margin-top: 1.5rem;
}
@media (width >= 48rem) {
  .da-home {
    grid-template-columns: 250px minmax(0, 1fr);
    justify-items: start;
    align-items: center;
    text-align: left;
    gap: 4rem;
    padding: 3.5rem 4rem;
  }
  .da-home .da-polaroid {
    width: 250px;
  }
  .da-home-text {
    font-size: clamp(1.45rem, 1.9vw, 1.7rem);
    max-width: 44ch;
  }
  .da-wide {
    display: inline;
  }
}

/* ---------- повний лист на «Про ліцей» ---------- */
.da-band {
  background: var(--sand-tint);
  border-radius: var(--radius-band, 17px);
  padding: 2rem 0.875rem;
}
.da-band .section-title {
  margin-bottom: 0;
}
/* телефон: заголовок на всю ширину плити, 6.6em – довжина «Слово директора» цим шрифтом */
@media (width < 37.5rem) {
  .da-band .section-title {
    font-size: min(calc((100vw - 4.25rem) / 6.6), 3.375rem);
  }
}
.da-letter {
  display: grid;
  gap: 2rem;
}
.da-letter .da-polaroid {
  width: 210px;
  justify-self: center;
  rotate: -2deg;
}
.da-sheet {
  background: var(--color-surface, #fff);
  border-radius: 6px;
  padding: 2rem 1.375rem;
  box-shadow: 0 0 0 1.5px var(--color-line, #e6e2da), 0 18px 40px -26px rgb(16 28 32 / 0.4);
  --paper-grain-strength: 0.65;
}
.da-sheet-hello {
  margin: 0 0 1.5rem;
  font: 400 1.7rem/1.2 var(--font-display);
  color: var(--accent-deep);
}
.da-letter-text {
  font-size: 1.04rem;
  line-height: 1.72;
}
.da-sign-block {
  margin-top: 2rem;
}
.da-regards {
  margin: 0 0 0.35rem;
  font: 400 1.5rem/1.2 var(--font-display);
  color: var(--accent-deep);
}
.da-sign-block .da-sign {
  font-size: clamp(2.3rem, 3.4vw, 3rem);
}
.da-sign-block .da-role {
  margin-top: 0.75rem;
  font-size: 15px;
}
@media (width >= 56.25rem) {
  .da-band {
    padding: 3.5rem;
  }
  .da-letter {
    grid-template-columns: 260px minmax(0, 1fr);
    gap: 3.5rem;
    align-items: start;
  }
  .da-letter .da-polaroid {
    position: sticky;
    top: 110px;
    width: 260px;
    margin-top: 2rem;
  }
  .da-sheet {
    padding: 3.5rem 4.5rem 3rem;
  }
  .da-sheet-hello {
    font-size: 2.1rem;
  }
  .da-regards {
    font-size: 1.8rem;
  }
  .da-letter-text {
    font-size: 1.1rem;
    max-width: 64ch;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .da-home .btn .material-symbols-outlined {
    transition: transform 0.2s;
  }
  .da-home .btn:hover .material-symbols-outlined {
    transform: translateX(3px);
  }
}

/*!*************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/.pnpm/next@16.2.6_@babel+core@7.29.7_@playwright+test@1.58.2_react-dom@19.2.6_react@19.2.6__react@19.2.6_sass@1.77.4/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[2]!./node_modules/.pnpm/next@16.2.6_@babel+core@7.29.7_@playwright+test@1.58.2_react-dom@19.2.6_react@19.2.6__react@19.2.6_sass@1.77.4/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[3]!./src/components/blocks/profileCardDoodle.css ***!
  \*************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/* Малюнок картки профілю («Обери свій шлях»). Від 768 px – у правому нижньому куті.
   Телефон: у правому верхньому куті поруч з іконкою, того самого розміру 152 px
   (власник 2026-10-20). Текст обтікає слід малюнка (float), тож короткий заголовок
   стоїть поруч, а довгий опускається під малюнок, а не налазить на нього.
   Слід закінчується там, де починається опис під однорядковим заголовком: контури
   малюнків сидять у квадраті 152 px з полями ≈ 20 px, тож квадрат піднято на 0.75rem,
   і нижній край малюнків не доходить до першого рядка опису – він на всю ширину.
   Окремий файл, а не утиліти Tailwind: Turbopack у dev віддавав застарілий CSS */
.profile-doodle {
  right: 0.25rem;
  bottom: 0.25rem;
  width: 152px;
}
.profile-card-text {
  display: flow-root;
}
.profile-card-text > :not(.profile-doodle-float) + * {
  margin-top: 0.625rem;
}
.profile-doodle-float {
  display: none;
}

@media (max-width: 767.98px) {
  .profile-doodle {
    top: -0.75rem;
    bottom: auto;
  }
  .profile-doodle-float {
    display: block;
    float: right;
    width: 8rem;
    height: 6rem;
  }
}

/*!************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/.pnpm/next@16.2.6_@babel+core@7.29.7_@playwright+test@1.58.2_react-dom@19.2.6_react@19.2.6__react@19.2.6_sass@1.77.4/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[2]!./node_modules/.pnpm/next@16.2.6_@babel+core@7.29.7_@playwright+test@1.58.2_react-dom@19.2.6_react@19.2.6__react@19.2.6_sass@1.77.4/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[3]!./src/components/blocks/photoSliderStrip.css ***!
  \************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/* Стрічка мініатюр під слайдером: смуга прокрутки трохи нижче мініатюр, а не
   впритул до них (власник 2026-10-20, «Живі емоції ліцею» на /life).
   Окремий файл, а не утиліти Tailwind: Turbopack у dev віддавав застарілий CSS */
.thumbs-scroll.thumbs-scroll--spaced {
  padding-top: 0.25rem;
  padding-bottom: 0.875rem;
}

/*!***********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/.pnpm/next@16.2.6_@babel+core@7.29.7_@playwright+test@1.58.2_react-dom@19.2.6_react@19.2.6__react@19.2.6_sass@1.77.4/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[2]!./node_modules/.pnpm/next@16.2.6_@babel+core@7.29.7_@playwright+test@1.58.2_react-dom@19.2.6_react@19.2.6__react@19.2.6_sass@1.77.4/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[3]!./src/components/blocks/featureCarousel.css ***!
  \***********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/* Карусель блоку переваг, варіант А з docs/materials/cards-probe (власник 2026-11-06).
   Окремий файл, а не globals.css: Turbopack у dev віддає застарілий CSS */
.feature-carousel-slides {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}
.feature-carousel-slide {
  grid-area: 1 / 1;
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  border-radius: var(--radius-band);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.6s var(--ease-site), visibility 0s linear 0.6s;
}
.feature-carousel-slide.is-active {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.6s var(--ease-site), visibility 0s;
}
.feature-carousel-photo {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}
.feature-carousel-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.75rem;
  min-width: 0;
  padding: 1.5rem;
}
.feature-carousel-title {
  font-size: 1.75rem;
  font-weight: 600;
  line-height: 1.2;
}
.feature-carousel-text {
  font-size: 1.1rem;
  line-height: 1.55;
  white-space: pre-line;
}
.feature-carousel-body > .btn {
  margin-top: auto;
}

.feature-carousel-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-top: 1rem;
}
.feature-carousel-dots {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
.feature-carousel-buttons {
  display: flex;
  gap: 0.5rem;
}
.feature-carousel-dot {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 0.75rem;
}
.feature-carousel-dot-mark {
  position: relative;
  display: block;
  width: 0.625rem;
  height: 0.625rem;
  overflow: hidden;
  border-radius: 999px;
  background: color-mix(in srgb, var(--color-muted) 35%, var(--color-line));
  transition: width 0.3s var(--ease-site), background-color 0.15s var(--ease-site);
}
.feature-carousel-dot:hover .feature-carousel-dot-mark {
  background: var(--color-muted);
}
.feature-carousel-dot.is-active .feature-carousel-dot-mark {
  width: 2rem;
}
.feature-carousel-dot-fill {
  position: absolute;
  inset: 0;
  background: var(--color-primary);
  transform-origin: left;
  animation: feature-carousel-progress var(--feature-carousel-ms) linear forwards;
}
@keyframes feature-carousel-progress {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}
.feature-carousel[data-paused='true'] .feature-carousel-dot-fill {
  animation-play-state: paused;
}
.feature-carousel[data-static='true'] .feature-carousel-dot-fill {
  animation: none;
}
.feature-carousel-button {
  display: inline-grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 1.5px solid color-mix(in srgb, var(--color-muted) 30%, var(--color-line));
  border-radius: 999px;
  background: var(--color-surface);
  color: var(--color-text);
  transition: border-color 0.2s var(--ease-site), color 0.2s var(--ease-site), scale 0.2s var(--ease-site);
}
.feature-carousel-button:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}
.feature-carousel-button:active {
  scale: 0.9;
  transition-duration: 0.075s;
}
@media (prefers-reduced-motion: reduce) {
  .feature-carousel-button { transition: none; }
  .feature-carousel-button:active { scale: 1; }
}
.feature-carousel-button svg {
  width: 1.125rem;
  height: 1.125rem;
  fill: currentColor;
}
.feature-carousel-dot:focus-visible,
.feature-carousel-button:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* телефон: шість крапок по 44 px не вміщаються в один ряд з трьома кнопками */
@media (width < 30rem) {
  .feature-carousel-dots {
    width: 100%;
    justify-content: space-between;
  }
  .feature-carousel-buttons {
    width: 100%;
    justify-content: flex-end;
  }
}

@media (width >= 48rem) {
  .feature-carousel-slide {
    flex-direction: row-reverse;
    min-height: 27rem;
  }
  .feature-carousel-photo {
    flex: 0 0 58%;
    aspect-ratio: auto;
  }
  .feature-carousel-body {
    gap: 1rem;
    padding: 2rem;
  }
  .feature-carousel-title {
    font-size: 2.1rem;
  }
  .feature-carousel-text {
    font-size: 1.2rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .feature-carousel-slide,
  .feature-carousel-slide.is-active,
  .feature-carousel-dot-mark {
    transition: none;
  }
}

/*!*************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/.pnpm/next@16.2.6_@babel+core@7.29.7_@playwright+test@1.58.2_react-dom@19.2.6_react@19.2.6__react@19.2.6_sass@1.77.4/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[2]!./node_modules/.pnpm/next@16.2.6_@babel+core@7.29.7_@playwright+test@1.58.2_react-dom@19.2.6_react@19.2.6__react@19.2.6_sass@1.77.4/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[3]!./src/components/blocks/compactCardDoodle.css ***!
  \*************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/* Малюнок компактної картки без фото (гуртки на головній). Живе в місці НАД
   підписом, а не по центру всієї картки: по центру його нижня половина тонула
   під плашкою (власник 2026-10-19). Висота береться від вільного місця, тож
   малюнок цілий за будь-якої довжини підпису і ширини картки.
   Окремий файл, а не утиліти Tailwind: Turbopack у dev віддавав застарілий CSS */
.compact-doodle-slot {
  position: relative;
  z-index: 10;
  display: flex;
  flex: 1 1 0%;
  min-height: 0;
  align-items: center;
  justify-content: center;
  padding: 5% 8%;
}
.compact-doodle-slot > .compact-doodle {
  position: relative;
  height: 100%;
  width: auto;
  max-width: 100%;
  max-height: 12rem;
}

/* Малюнок поверх знімка (гуртки з фото, як на /clubs): невеликий, у правому
   нижньому куті знімка над підписом – угорі по центру часто сам предмет кадру.
   Білий – над затемненням; у кольорі теми (футбол на білій емблемі, власник
   2026-10-20) – без затемнення і помітніший */
.compact-doodle-slot.compact-doodle-slot--photo {
  align-items: flex-end;
  justify-content: flex-end;
  padding: 0.5rem 0.5rem 0.375rem;
}
.compact-doodle-slot--photo > .compact-photo-doodle {
  height: min(100%, 3.25rem);
  --dd-opacity: 0.3;
}
.compact-doodle-slot--photo > .compact-photo-doodle--tinted {
  --dd-opacity: 0.42;
}
@media (min-width: 640px) {
  .compact-doodle-slot--photo > .compact-photo-doodle { height: min(100%, 5rem); }
}
/* тінь лише в кутку під білим малюнком: суцільне затемнення гасило саме фото */
.photo-doodle-shade {
  background: radial-gradient(circle at var(--shade-at, 100% 100%), rgb(0 0 0 / 0.34), rgb(0 0 0 / 0) 55%);
  transition: opacity 0.5s;
}
.photo-doodle-shade[data-corner="tr"] { --shade-at: 100% 0%; }
.photo-doodle-shade[data-corner="bl"] { --shade-at: 0% 100%; }
.photo-doodle-shade[data-corner="tl"] { --shade-at: 0% 0%; }
.group:hover .photo-doodle-shade { opacity: 0.6; }

/*!*********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/.pnpm/next@16.2.6_@babel+core@7.29.7_@playwright+test@1.58.2_react-dom@19.2.6_react@19.2.6__react@19.2.6_sass@1.77.4/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[2]!./node_modules/.pnpm/next@16.2.6_@babel+core@7.29.7_@playwright+test@1.58.2_react-dom@19.2.6_react@19.2.6__react@19.2.6_sass@1.77.4/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[3]!./src/components/blocks/photoCardText.css ***!
  \*********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/* Текст карток з фото-кружечком («Чому Ліцей 100»).
   Телефон (одна колонка): кружечок закриває лише правий верхній кут, тож текст
   обтікає його слід (float), а нижче займає всю ширину картки – вузька колонка
   21ch робила картки високими (власник 2026-10-20). Слід завширшки як колишній
   відступ заголовка 5.2rem, заввишки до низу кружечка (--bubble-bottom з таблиці
   нахилів), з поправкою на внутрішній відступ картки 1.5rem.
   Від 768 px карток кілька в ряд – як було: flex-колонка, опис не ширший за 21ch.
   Окремий файл, а не утиліти Tailwind: Turbopack у dev віддавав застарілий CSS */
@media (max-width: 767.98px) {
  .photo-card-body {
    display: flow-root;
  }
  .photo-card-body > :not(.photo-card-float) + * {
    margin-top: 0.75rem;
  }
  .photo-card-float {
    float: right;
    width: 5.2rem;
    height: calc(var(--bubble-bottom) - 1.5rem);
    margin-left: 0.5rem;
  }
  .photo-card-body .card-photo-title {
    padding-right: 0;
  }
}

@media (min-width: 768px) {
  .photo-card-float {
    display: none;
  }
  .photo-card-text {
    max-width: 21ch;
  }
}

/* широка картка в неповному ряду: текст іде нижче кружечка, вузька колонка там лише марнує місце */
.photo-card-sized {
  container-type: inline-size;
}
@container (min-width: 480px) {
  .photo-card-text {
    max-width: 46ch;
  }
}

/*!*****************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/.pnpm/next@16.2.6_@babel+core@7.29.7_@playwright+test@1.58.2_react-dom@19.2.6_react@19.2.6__react@19.2.6_sass@1.77.4/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[2]!./node_modules/.pnpm/next@16.2.6_@babel+core@7.29.7_@playwright+test@1.58.2_react-dom@19.2.6_react@19.2.6__react@19.2.6_sass@1.77.4/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[3]!./src/components/site/floatingCta.css ***!
  \*****************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/* розміри, тінь і відступи – як у ContactFab (size-14, bottom 4.75rem над мобільною смугою CTA, від sm – 1.5rem) */
.floating-cta {
  position: fixed;
  z-index: 35;
  left: 1rem;
  bottom: calc(4.75rem + env(safe-area-inset-bottom));
  display: inline-flex;
  align-items: center;
  height: 3.5rem;
  padding-inline: 1.75rem;
  border-radius: 9999px;
  background: var(--accent-deep);
  color: #fff;
  font-weight: 700;
  font-size: 1.02rem;
  white-space: nowrap;
  box-shadow: 0 10px 24px color-mix(in srgb, var(--dark) 28%, transparent);
  transition: transform 0.2s var(--ease-site);
}

.floating-cta:hover {
  transform: scale(1.04);
}

@media (min-width: 640px) {
  .floating-cta {
    left: 1.5rem;
    bottom: 1.5rem;
  }
}

/* зʼявляється з-під нижнього краю, як і все плаваюче; без руху – одразу на місці */
@media (prefers-reduced-motion: no-preference) {
  .floating-cta {
    animation: floating-cta-in 0.4s var(--ease-site) 0.3s both;
  }
}

@keyframes floating-cta-in {
  from {
    opacity: 0;
    translate: 0 1.5rem;
  }
}

/* кнопка «Редагувати» для адміністратора займає той самий кут: піднімається над записом */
body:has(.floating-cta) .edit-page-button {
  bottom: calc(9.25rem + env(safe-area-inset-bottom));
}

@media (min-width: 640px) {
  body:has(.floating-cta) .edit-page-button {
    bottom: 6rem;
  }
}

/* на сторінці з плаваючим записом нижній бар «Завітати до ліцею» не дублює заклик під ним */
body:has(.floating-cta) .mobile-cta-bar { display: none; }

/*!***************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/.pnpm/next@16.2.6_@babel+core@7.29.7_@playwright+test@1.58.2_react-dom@19.2.6_react@19.2.6__react@19.2.6_sass@1.77.4/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[2]!./node_modules/.pnpm/next@16.2.6_@babel+core@7.29.7_@playwright+test@1.58.2_react-dom@19.2.6_react@19.2.6__react@19.2.6_sass@1.77.4/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[3]!./src/components/site/heroQuote.css ***!
  \***************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/*
 * Цитата в шапці внутрішньої сторінки (варіант C з docs/probes/quote-in-hero-proba.html,
 * затверджено власником 2026-10-19): від 700 px (iPad mini вертикально – 744) – колонка праворуч від заголовка з великим
 * портретом у бірюзовому ореолі; вужче – під підзаголовком, портрет 70 px праворуч від тексту.
 */
.hq-grid {
  display: grid;
  gap: 28px;
  align-items: center;
}

.hq {
  /*
   * Текст і портрет – пліч-о-пліч з фіксованим проміжком, текст по центру висоти портрета;
   * фігура обтягує вміст і стоїть у кінці колонки, тож коротка цитата не відʼїжджає від
   * портрета на широкому екрані (власник 2026-10-19, /psychology і /traditions на 2000 px).
   * Сітка, а не обгортка тексту: figcaption має лишатися прямим нащадком figure.
   * Рядки 1fr зверху й знизу забирають зайву висоту, коли портрет вищий за текст.
   */
  display: grid;
  grid-template-columns: minmax(0, auto) auto;
  grid-template-rows: 1fr auto auto 1fr;
  column-gap: 26px;
  justify-self: end;
  width: fit-content;
  max-width: 100%;
  margin: 0;
}

.hq-text,
.hq-mark,
.hq-caption {
  grid-column: 1;
}

.hq-text,
.hq-mark {
  grid-row: 2;
}

.hq-caption {
  grid-row: 3;
}

.hq-text {
  margin: 0;
  font: 700 clamp(1.5rem, 2.3vw, 2.1rem) / 1.12 var(--font-amatic), var(--font-neucha), cursive;
  letter-spacing: 0.02em;
  color: #fff;
}

.hq-mark {
  /* ліворуч від першого рядка, у проміжку між колонками: на текст не заходить (власник 2026-10-19);
     48 px проміжку: -50 px лишає знак у проміжку і з довгим однорядковим заголовком (/psychology).
     Нульовий розмір: знак ділить клітинку з першим рядком, але не розсуває сітку */
  position: relative;
  align-self: start;
  width: 0;
  height: 0;
  overflow: visible;
  left: -50px;
  top: -16px;
  font: 400 80px / 1 Georgia, serif;
  color: var(--accent);
  opacity: 0.55;
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
}

.hq-cite {
  display: block;
  margin-top: 10px;
  font-style: normal;
  font-weight: 700;
  font-size: 14px;
  color: var(--accent-soft);
}

.hq-source {
  display: block;
  font-weight: 400;
  color: var(--dark-fg-muted);
}

.hq-portrait {
  grid-column: 2;
  grid-row: 1 / -1;
  align-self: center;
  width: clamp(88px, 11.2vw, 144px);
  height: clamp(88px, 11.2vw, 144px);
  overflow: hidden;
  border-radius: 50%;
  /* без білого: портрет заповнює коло сам, а світлий фон давав би білий обідок
     навколо кремового тла (Сковорода, власник 2026-10-19) */
  background: var(--dark);
  border: 4px solid var(--accent-soft);
  box-shadow: 0 0 0 8px color-mix(in srgb, var(--accent-soft) 15%, transparent);
}

/* цитата без портрета: одна колонка, без проміжку під коло */
.hq-noportrait {
  column-gap: 0;
}

/*
 * Дерево чи літак ростуть у правому нижньому куті: на широкому екрані там портрет,
 * на вузькому – рукописний текст цитати, який поверх кольорового малюнка не читається
 */
.hq-decor-off {
  display: none;
}

/* світла копія під шапкою існує лише для телефона */
.hq-below {
  display: none;
}

@media (min-width: 700px) {
  .hq-grid {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    column-gap: 48px;
    row-gap: 0;
  }

  .hq-grid > .hq {
    grid-column: 2;
    grid-row: 1 / span 2;
  }

  .hq-cta {
    grid-column: 1;
    grid-row: 2;
  }
}

@media (max-width: 699px) {
  /* під підзаголовком: текст ліворуч, портрет 70 px праворуч від нього (власник 2026-10-19) */
  .hq {
    justify-self: start;
    grid-template-columns: minmax(0, auto) 70px;
    column-gap: 16px;
  }

  .hq-portrait {
    width: 70px;
    height: 70px;
  }

  .hq-noportrait {
    grid-template-columns: minmax(0, auto);
  }

  .hq-noportrait .hq-text,
  .hq-noportrait .hq-caption {
    grid-column: 1;
  }

  .hq-mark {
    display: none;
  }

  /* цитата виходить із шапки у світлий блок під нею: шапка лишається заввишки з текст (власник 2026-10-20) */
  .hq-grid > .hq {
    display: none;
  }

  .hq-below {
    display: block;
    padding-top: 2.75rem;
  }

  .hq-below .hq-text {
    color: var(--color-text);
  }

  .hq-below .hq-cite {
    color: var(--color-primary);
  }

  .hq-below .hq-source {
    color: var(--color-muted);
  }

  /* відступ до кнопки дає проміжок сітки, власний mt-7 його подвоїв би */
  .hq-cta > .btn {
    margin-top: 0;
  }
}