/*!*************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/.pnpm/next@14.2.35_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[2].use[1]!./node_modules/.pnpm/next@14.2.35_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/build/webpack/loaders/next-font-loader/index.js??ruleSet[1].rules[14].oneOf[2].use[2]!./node_modules/.pnpm/next@14.2.35_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/font/google/target.css?{"path":"app/layout.tsx","import":"Montserrat","arguments":[{"subsets":["latin"],"weight":["300","400","500","600"],"variable":"--font-montserrat","display":"swap"}],"variableName":"montserrat"} ***!
  \*************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/* cyrillic-ext */
@font-face {
  font-family: '__Montserrat_5f5322';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(/_next/static/media/b1f344208eb4edfe-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_5f5322';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(/_next/static/media/48e2044251ef3125-s.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: '__Montserrat_5f5322';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(/_next/static/media/bf24a9759715e608-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_5f5322';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(/_next/static/media/1f173e5e25f3efee-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_5f5322';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(/_next/static/media/904be59b21bd51cb-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: '__Montserrat_5f5322';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/_next/static/media/b1f344208eb4edfe-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_5f5322';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/_next/static/media/48e2044251ef3125-s.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: '__Montserrat_5f5322';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/_next/static/media/bf24a9759715e608-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_5f5322';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/_next/static/media/1f173e5e25f3efee-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_5f5322';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/_next/static/media/904be59b21bd51cb-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: '__Montserrat_5f5322';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/_next/static/media/b1f344208eb4edfe-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_5f5322';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/_next/static/media/48e2044251ef3125-s.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: '__Montserrat_5f5322';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/_next/static/media/bf24a9759715e608-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_5f5322';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/_next/static/media/1f173e5e25f3efee-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_5f5322';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/_next/static/media/904be59b21bd51cb-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: '__Montserrat_5f5322';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/_next/static/media/b1f344208eb4edfe-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_5f5322';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/_next/static/media/48e2044251ef3125-s.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: '__Montserrat_5f5322';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/_next/static/media/bf24a9759715e608-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_5f5322';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/_next/static/media/1f173e5e25f3efee-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_5f5322';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/_next/static/media/904be59b21bd51cb-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_5f5322';src: local("Arial");ascent-override: 85.79%;descent-override: 22.25%;line-gap-override: 0.00%;size-adjust: 112.83%
}.__className_5f5322 {font-family: '__Montserrat_5f5322', '__Montserrat_Fallback_5f5322';font-style: normal
}.__variable_5f5322 {--font-montserrat: '__Montserrat_5f5322', '__Montserrat_Fallback_5f5322'
}

/*!**************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/.pnpm/next@14.2.35_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[2].use[1]!./node_modules/.pnpm/next@14.2.35_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/build/webpack/loaders/next-font-loader/index.js??ruleSet[1].rules[14].oneOf[2].use[2]!./node_modules/.pnpm/next@14.2.35_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/font/google/target.css?{"path":"app/layout.tsx","import":"Cormorant_Garamond","arguments":[{"subsets":["latin"],"weight":["300","400","500","600"],"style":"normal","variable":"--font-display","display":"swap","preload":true,"fallback":["Georgia","Times New Roman","serif"]}],"variableName":"cormorant"} ***!
  \**************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/* cyrillic-ext */
@font-face {
  font-family: '__Cormorant_Garamond_c15ed6';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(/_next/static/media/393d45a2251e223a-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: '__Cormorant_Garamond_c15ed6';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(/_next/static/media/8715d2ed531152f4-s.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: '__Cormorant_Garamond_c15ed6';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(/_next/static/media/c48b38fe8bb532f3-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: '__Cormorant_Garamond_c15ed6';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(/_next/static/media/48410f3df60da620-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: '__Cormorant_Garamond_c15ed6';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(/_next/static/media/7b89a4fd5e90ede0-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: '__Cormorant_Garamond_c15ed6';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/_next/static/media/393d45a2251e223a-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: '__Cormorant_Garamond_c15ed6';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/_next/static/media/8715d2ed531152f4-s.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: '__Cormorant_Garamond_c15ed6';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/_next/static/media/c48b38fe8bb532f3-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: '__Cormorant_Garamond_c15ed6';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/_next/static/media/48410f3df60da620-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: '__Cormorant_Garamond_c15ed6';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/_next/static/media/7b89a4fd5e90ede0-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: '__Cormorant_Garamond_c15ed6';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/_next/static/media/393d45a2251e223a-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: '__Cormorant_Garamond_c15ed6';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/_next/static/media/8715d2ed531152f4-s.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: '__Cormorant_Garamond_c15ed6';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/_next/static/media/c48b38fe8bb532f3-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: '__Cormorant_Garamond_c15ed6';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/_next/static/media/48410f3df60da620-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: '__Cormorant_Garamond_c15ed6';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/_next/static/media/7b89a4fd5e90ede0-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: '__Cormorant_Garamond_c15ed6';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/_next/static/media/393d45a2251e223a-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: '__Cormorant_Garamond_c15ed6';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/_next/static/media/8715d2ed531152f4-s.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: '__Cormorant_Garamond_c15ed6';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/_next/static/media/c48b38fe8bb532f3-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: '__Cormorant_Garamond_c15ed6';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/_next/static/media/48410f3df60da620-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: '__Cormorant_Garamond_c15ed6';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/_next/static/media/7b89a4fd5e90ede0-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: '__Cormorant_Garamond_Fallback_c15ed6';src: local("Times New Roman");ascent-override: 95.27%;descent-override: 29.59%;line-gap-override: 0.00%;size-adjust: 96.98%
}.__className_c15ed6 {font-family: '__Cormorant_Garamond_c15ed6', '__Cormorant_Garamond_Fallback_c15ed6', Georgia, Times New Roman, serif;font-style: normal
}.__variable_c15ed6 {--font-display: '__Cormorant_Garamond_c15ed6', '__Cormorant_Garamond_Fallback_c15ed6', Georgia, Times New Roman, serif
}

/*!**************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/.pnpm/next@14.2.35_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[3].use[1]!./node_modules/.pnpm/next@14.2.35_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/build/webpack/loaders/next-font-loader/index.js??ruleSet[1].rules[14].oneOf[3].use[2]!./node_modules/.pnpm/next@14.2.35_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/font/local/target.css?{"path":"app/layout.tsx","import":"","arguments":[{"src":"./fonts/Rollgates-Luxury.ttf","weight":"400","style":"normal","variable":"--font-brand","display":"swap","fallback":["Montserrat","Helvetica Neue","Arial","sans-serif"]}],"variableName":"rollgates"} ***!
  \**************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
@font-face {
font-family: '__rollgates_74b3bf';
src: url(/_next/static/media/b4e3338cac72e89b-s.p.ttf) format('truetype');
font-display: swap;
font-weight: 400;
font-style: normal;
}@font-face {font-family: '__rollgates_Fallback_74b3bf';src: local("Arial");ascent-override: 79.93%;descent-override: 26.64%;line-gap-override: 0.00%;size-adjust: 93.83%
}.__className_74b3bf {font-family: '__rollgates_74b3bf', '__rollgates_Fallback_74b3bf', Montserrat, Helvetica Neue, Arial, sans-serif;font-weight: 400;font-style: normal
}.__variable_74b3bf {--font-brand: '__rollgates_74b3bf', '__rollgates_Fallback_74b3bf', Montserrat, Helvetica Neue, Arial, sans-serif
}

/*!***********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/.pnpm/next@14.2.35_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[3].use[1]!./node_modules/.pnpm/next@14.2.35_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/build/webpack/loaders/next-font-loader/index.js??ruleSet[1].rules[14].oneOf[3].use[2]!./node_modules/.pnpm/next@14.2.35_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/font/local/target.css?{"path":"app/layout.tsx","import":"","arguments":[{"src":"./fonts/Montserrat-latin-variable.woff2","weight":"100 900","style":"normal","variable":"--font-figures","display":"swap","adjustFontFallback":false,"fallback":[],"declarations":[{"prop":"unicode-range","value":"U+0030-0039, U+0025, U+002B, U+002C-002E, U+00A0, U+202F, U+2212, U+20AC"}]}],"variableName":"figures"} ***!
  \***********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
@font-face {
unicode-range: U+0030-0039, U+0025, U+002B, U+002C-002E, U+00A0, U+202F, U+2212, U+20AC;
font-family: '__figures_e7091c';
src: url(/_next/static/media/da70673de0ab2c81.p.woff2) format('woff2');
font-display: swap;
font-weight: 100 900;
font-style: normal;
}.__className_e7091c {font-family: '__figures_e7091c';font-style: normal
}.__variable_e7091c {--font-figures: '__figures_e7091c'
}

/*!*********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/.pnpm/next@14.2.35_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[12].use[2]!./node_modules/.pnpm/next@14.2.35_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[12].use[3]!./app/globals.css ***!
  \*********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
*, ::before, ::after {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}

::backdrop {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}/*
! tailwindcss v3.4.14 | MIT License | https://tailwindcss.com
*//*
1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
*/

*,
::before,
::after {
  box-sizing: border-box; /* 1 */
  border-width: 0; /* 2 */
  border-style: solid; /* 2 */
  border-color: #e5e7eb; /* 2 */
}

::before,
::after {
  --tw-content: '';
}

/*
1. Use a consistent sensible line-height in all browsers.
2. Prevent adjustments of font size after orientation changes in iOS.
3. Use a more readable tab size.
4. Use the user's configured `sans` font-family by default.
5. Use the user's configured `sans` font-feature-settings by default.
6. Use the user's configured `sans` font-variation-settings by default.
7. Disable tap highlights on iOS
*/

html,
:host {
  line-height: 1.5; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
  -moz-tab-size: 4; /* 3 */
  -o-tab-size: 4;
     tab-size: 4; /* 3 */
  font-family: var(--font-montserrat), Montserrat, "Helvetica Neue", Arial, sans-serif; /* 4 */
  font-feature-settings: normal; /* 5 */
  font-variation-settings: normal; /* 6 */
  -webkit-tap-highlight-color: transparent; /* 7 */
}

/*
1. Remove the margin in all browsers.
2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
*/

body {
  margin: 0; /* 1 */
  line-height: inherit; /* 2 */
}

/*
1. Add the correct height in Firefox.
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
3. Ensure horizontal rules are visible by default.
*/

hr {
  height: 0; /* 1 */
  color: inherit; /* 2 */
  border-top-width: 1px; /* 3 */
}

/*
Add the correct text decoration in Chrome, Edge, and Safari.
*/

abbr:where([title]) {
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
}

/*
Remove the default font size and weight for headings.
*/

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}

/*
Reset links to optimize for opt-in styling instead of opt-out.
*/

a {
  color: inherit;
  text-decoration: inherit;
}

/*
Add the correct font weight in Edge and Safari.
*/

b,
strong {
  font-weight: bolder;
}

/*
1. Use the user's configured `mono` font-family by default.
2. Use the user's configured `mono` font-feature-settings by default.
3. Use the user's configured `mono` font-variation-settings by default.
4. Correct the odd `em` font sizing in all browsers.
*/

code,
kbd,
samp,
pre {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; /* 1 */
  font-feature-settings: normal; /* 2 */
  font-variation-settings: normal; /* 3 */
  font-size: 1em; /* 4 */
}

/*
Add the correct font size in all browsers.
*/

small {
  font-size: 80%;
}

/*
Prevent `sub` and `sup` elements from affecting the line height in all browsers.
*/

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/*
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
3. Remove gaps between table borders by default.
*/

table {
  text-indent: 0; /* 1 */
  border-color: inherit; /* 2 */
  border-collapse: collapse; /* 3 */
}

/*
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
3. Remove default padding in all browsers.
*/

button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-feature-settings: inherit; /* 1 */
  font-variation-settings: inherit; /* 1 */
  font-size: 100%; /* 1 */
  font-weight: inherit; /* 1 */
  line-height: inherit; /* 1 */
  letter-spacing: inherit; /* 1 */
  color: inherit; /* 1 */
  margin: 0; /* 2 */
  padding: 0; /* 3 */
}

/*
Remove the inheritance of text transform in Edge and Firefox.
*/

button,
select {
  text-transform: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Remove default button styles.
*/

button,
input:where([type='button']),
input:where([type='reset']),
input:where([type='submit']) {
  -webkit-appearance: button; /* 1 */
  background-color: transparent; /* 2 */
  background-image: none; /* 2 */
}

/*
Use the modern Firefox focus style for all focusable elements.
*/

:-moz-focusring {
  outline: auto;
}

/*
Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
*/

:-moz-ui-invalid {
  box-shadow: none;
}

/*
Add the correct vertical alignment in Chrome and Firefox.
*/

progress {
  vertical-align: baseline;
}

/*
Correct the cursor style of increment and decrement buttons in Safari.
*/

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}

/*
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/

[type='search'] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/*
Remove the inner padding in Chrome and Safari on macOS.
*/

::-webkit-search-decoration {
  -webkit-appearance: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to `inherit` in Safari.
*/

::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/*
Add the correct display in Chrome and Safari.
*/

summary {
  display: list-item;
}

/*
Removes the default spacing and border for appropriate elements.
*/

blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
  margin: 0;
}

fieldset {
  margin: 0;
  padding: 0;
}

legend {
  padding: 0;
}

ol,
ul,
menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

/*
Reset default styling for dialogs.
*/
dialog {
  padding: 0;
}

/*
Prevent resizing textareas horizontally by default.
*/

textarea {
  resize: vertical;
}

/*
1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
2. Set the default placeholder color to the user's configured gray 400 color.
*/

input::-moz-placeholder, textarea::-moz-placeholder {
  opacity: 1; /* 1 */
  color: #9ca3af; /* 2 */
}

input::placeholder,
textarea::placeholder {
  opacity: 1; /* 1 */
  color: #9ca3af; /* 2 */
}

/*
Set the default cursor for buttons.
*/

button,
[role="button"] {
  cursor: pointer;
}

/*
Make sure disabled buttons don't get the pointer cursor.
*/
:disabled {
  cursor: default;
}

/*
1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
   This can trigger a poorly considered lint error in some tools but is included by design.
*/

img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block; /* 1 */
  vertical-align: middle; /* 2 */
}

/*
Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
*/

img,
video {
  max-width: 100%;
  height: auto;
}

/* Make elements with the HTML hidden attribute stay hidden by default */
[hidden]:where(:not([hidden="until-found"])) {
  display: none;
}
  html {
    -webkit-text-size-adjust: 100%;
    /* Cormorant Garamond fournit des chiffres classiques (lining) : les
       montants s'alignent en colonnes via `tabular-nums`, déclaré pour les
       tableaux et pour toute police de repli. */
    font-variant-numeric: lining-nums;
    /* La gouttière du défilement reste réservée même quand la page est courte :
       changer d'onglet ne fait plus glisser toute la mise en page de 10 px
       quand la barre de défilement apparaît ou disparaît. */
    scrollbar-gutter: stable;
  }

  body {
    background-color: rgb(var(--paper));
    color: rgb(var(--ink));
    font-family: var(--font-montserrat), Montserrat, 'Helvetica Neue', Arial, sans-serif;
    font-weight: 300;
    letter-spacing: 0.005em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  /* Les montants, les stocks et la matrice des chambres s'alignent en colonnes
     monospacées : un chiffre par case, d'une ligne à l'autre. */
  /* Tableaux : la police du site, chiffres tabulaires — les montants s'alignent
     en colonnes comme sur un relevé de banque privée (plus de machine à écrire). */
  table,
  .tabular {
    font-family: var(--font-figures), var(--font-montserrat), Montserrat, 'Helvetica Neue', Arial, sans-serif;
    font-variant-numeric: tabular-nums lining-nums;
    font-feature-settings: 'tnum' 1, 'lnum' 1, 'kern' 1;
  }

  ::-moz-selection {
    background-color: var(--page-selection-bg);
    color: var(--page-selection-ink);
  }

  ::selection {
    background-color: var(--page-selection-bg);
    color: var(--page-selection-ink);
  }

  /* -------------------------------------------------------------------------
     Menus déroulants natifs (select / option).
     `color-scheme` seul ne suffit pas : sur le thème encre, le navigateur peint
     la liste ouverte avec son propre fond clair alors que les options héritent
     de l'encre claire du champ — le texte devient blanc sur blanc jusqu'au
     survol. On fixe donc explicitement le fond et l'encre de chaque option
     avec les jetons du thème : la liste reste lisible dans les deux peaux,
     quel que soit le select du poste (formulaire d'inscription, filtres,
     sélecteurs de module).
     ------------------------------------------------------------------------- */
  select option,
  select optgroup {
    background-color: rgb(var(--paper-card));
    color: rgb(var(--ink));
    font-weight: 400;
  }

  select option:checked,
  select option:hover {
    background-color: rgb(var(--paper-deep));
    color: rgb(var(--ink));
  }

  /* Dans le module Jarvis, la liste suit les jetons `--jv-*` du shell. */
  .jarvis-shell select option,
  .jarvis-shell select optgroup {
    background-color: var(--jv-raised);
    color: var(--jv-ink);
  }

  .jarvis-shell select option:checked,
  .jarvis-shell select option:hover {
    background-color: var(--jv-inset);
    color: var(--jv-ink);
  }

  /* Anneau de focus : filet net, jamais de halo. */
  :focus-visible {
    outline: 1px solid var(--page-focus);
    outline-offset: 2px;
  }

  /* -------------------------------------------------------------------------
     Barres de défilement.
     Aucun rail à l'intérieur du document : les zones défilantes (barre de
     modules, tableaux, journal d'audit) gardent leur défilement mais ne
     dessinent plus de barre. Seule la fenêtre conserve le sien, sinon on ne
     sait plus où l'on en est dans une page de 3 500 px.
     ------------------------------------------------------------------------- */
  * {
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* ancien Edge */
  }
  *::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
  }

  html {
    scrollbar-width: thin;
    scrollbar-color: #2e3f58 transparent;
  }
  html::-webkit-scrollbar {
    display: block;
    width: 10px;
    height: 10px;
  }
  html::-webkit-scrollbar-track {
    background: transparent;
  }
  html::-webkit-scrollbar-thumb {
    background-color: #2e3f58;
    border: 2px solid transparent;
    background-clip: content-box;
  }
  html::-webkit-scrollbar-thumb:hover {
    background-color: #405575;
  }

  /* Cormorant Garamond est chargée en 300→600 : le 500 des titres existe
     vraiment, aucune graisse n'est synthétisée par le navigateur. */
  h1,
  h2,
  h3,
  .display,
  .wordmark {
    font-weight: 500;
    font-synthesis: none;
  }
/* Micro-libellé : capitales espacées, encre faible. Le geste récurrent du
     site (« WHAT TO EXPECT? », « ROOMS | SUITES | VILLAS »). */
.label-caps {
    font-size: 11.5px;
    line-height: 16px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-weight: 500;
    color: rgb(var(--ink-mute));
  }
/* Signature : THE SOURCE / MARRAKECH, lettres très espacées. Cormorant est
     étroit : on ouvre plus largement que sur la script précédente pour que le
     nom garde la respiration d'une façade d'hôtel. */
.wordmark {
    font-family: var(--font-brand), var(--font-montserrat), Montserrat, sans-serif;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    line-height: 1;
  }
/* Titre : la police de titres du site officiel (Rollgates Luxury), toujours
     en capitales comme sur thesourcemarrakech.com. Les chiffres d'un titre
     viennent de --font-figures (Montserrat), jamais des chiffres ronds de la
     police d'affichage. Graisse légère : le trait fin des capitales Art déco. */
.display {
    font-family: var(--font-figures), var(--font-brand), var(--font-montserrat), Montserrat, sans-serif;
    font-weight: 300;
    font-synthesis: none;
    text-transform: uppercase;
    letter-spacing: 0.035em;
    line-height: 1.14;
    font-variant-numeric: lining-nums;
  }
/* Montants et chiffres clés : la rigueur d'une banque privée — Montserrat
     (la police du site), chiffres alignés et tabulaires, graisse moyenne. */
.figure {
    font-family: var(--font-figures), var(--font-montserrat), Montserrat, 'Helvetica Neue', Arial, sans-serif;
    font-weight: 500;
    font-variant-numeric: tabular-nums lining-nums;
    font-feature-settings: 'tnum' 1, 'lnum' 1;
    letter-spacing: -0.012em;
  }
/* L'unité d'un montant : petite, espacée, en retrait — « 430 600 MAD ». */
.figure-unit {
    margin-left: 0.32em;
    font-size: 0.42em;
    font-weight: 600;
    letter-spacing: 0.16em;
    color: rgb(var(--ink-mute));
    vertical-align: 0.12em;
  }
/* En-tête éditorial d'un module : sur-titre capitales, titre serif, filet.
     C'est la grammaire des sections du site. */
.module-head {
    border-bottom: 1px solid rgb(var(--rule-strong));
    padding-bottom: 13px;
  }
/* Barre de modules : le défilement horizontal reste possible au doigt, mais
     aucun rail visible — le site n'en montre aucun. */
.no-scrollbar {
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
.no-scrollbar::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
  }
/* Ligne de conduite majuscule, comme le sur-titre du hero. */
.subcaps {
    text-transform: uppercase;
    letter-spacing: 0.16em;
    font-size: 11px;
    font-weight: 400;
    line-height: 1.6;
  }
/* Bandeau d'alerte : filet gauche, pas d'aplat. */
.alert-rule {
    border-left-width: 2px;
    border-left-style: solid;
    padding-left: 10px;
    font-size: 11.5px;
    line-height: 17px;
  }
/*
   * Champ de saisie : trait inférieur seul, comme une ligne à remplir.
   * À utiliser sur input, select et textarea ; ajouter w-full si besoin.
   */
.\!field {
    background-color: transparent !important;
    border: 0 !important;
    border-bottom: 1px solid rgb(var(--rule-strong)) !important;
    border-radius: 0 !important;
    padding: 5px 0 6px !important;
    color: rgb(var(--ink)) !important;
    font-size: 12.5px !important;
    line-height: 18px !important;
    font-weight: 400 !important;
    width: 100% !important;
  }
.field {
    background-color: transparent;
    border: 0;
    border-bottom: 1px solid rgb(var(--rule-strong));
    border-radius: 0;
    padding: 5px 0 6px;
    color: rgb(var(--ink));
    font-size: 12.5px;
    line-height: 18px;
    font-weight: 400;
    width: 100%;
  }
.\!field:focus {
    outline: none !important;
    border-bottom-color: rgb(var(--accent-500)) !important;
  }
.field:focus {
    outline: none;
    border-bottom-color: rgb(var(--accent-500));
  }
.\!field::-moz-placeholder {
    color: rgb(var(--ink-mute)) !important;
  }
.\!field::placeholder {
    color: rgb(var(--ink-mute)) !important;
  }
.field::-moz-placeholder {
    color: rgb(var(--ink-mute));
  }
.field::placeholder {
    color: rgb(var(--ink-mute));
  }
select.\!field {
    cursor: pointer !important;
    padding-right: 18px !important;
  }
select.field {
    cursor: pointer;
    padding-right: 18px;
  }
textarea.\!field {
    resize: vertical !important;
  }
textarea.field {
    resize: vertical;
  }
/* ---- Boutons ----------------------------------------------------------
     Capitales espacées, angles droits, un filet OU un aplat. Jamais les deux
     en même temps, jamais d'ombre. Sur la nuit, l'aplat primaire est clair. */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border-radius: 0;
    padding: 9px 15px;
    font-size: 9.5px;
    line-height: 12px;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    white-space: nowrap;
    transition: background-color 120ms linear, color 120ms linear, border-color 120ms linear;
  }
.btn-solid {
    background-color: rgb(var(--ink));
    border: 1px solid rgb(var(--ink));
    color: rgb(var(--ink-inverse));
  }
.btn-solid:hover {
    background-color: rgb(var(--ink-soft));
    border-color: rgb(var(--ink-soft));
  }
.btn-quiet {
    background-color: transparent;
    border: 1px solid rgb(var(--rule-strong));
    color: rgb(var(--ink-soft));
  }
.btn-quiet:hover {
    border-color: rgb(var(--ink-mute));
    color: rgb(var(--ink));
  }
/* Barre de modules : capitales espacées, l'actif marqué au filet. */
.module-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 11px 10px 10px;
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: rgb(var(--ink-mute));
    white-space: nowrap;
    transition: color 120ms linear;
  }
.module-link:hover {
    color: rgb(var(--ink));
  }
.module-link[aria-current='page'] {
    color: rgb(var(--ink));
  }
/* Le filet d'onglet existe toujours : il se déploie depuis le centre au
     lieu d'apparaître d'un coup. `transform` seul — composité, sans reflow. */
.module-link::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 1px;
    background-color: rgb(var(--accent-600));
    transform: scaleX(0);
    transition: transform 240ms cubic-bezier(0.22, 1, 0.36, 1);
  }
.module-link[aria-current='page']::after {
    transform: scaleX(1);
  }
/* ---- Mouvement -------------------------------------------------------
     Entrées brèves, opacité + translation uniquement (propriétés composées
     par le GPU) : un module qui s'ouvre glisse, il ne clignote pas. */
/* `backwards`, jamais `both` : un `transform` conservé après l'animation
     crée un bloc conteneur et détache les descendants `position: fixed` de la
     fenêtre (le plein écran de Jarvis retombait sous l'en-tête). */
.view-enter {
    animation: view-enter 190ms cubic-bezier(0.22, 1, 0.36, 1) backwards;
  }
/* Le cadre d'un module garde toujours une hauteur utile : le pied de page ne
     remonte jamais d'un coup pendant qu'un écran court s'affiche. */
.pms-main {
    min-height: 62vh;
  }
/* Un écran long (Rachid, Matière) : les sections sous le pli ne sont ni
     mises en page ni peintes avant d'approcher de la fenêtre. L'onglet s'ouvre
     sur sa première page, le reste se calcule en défilant. La hauteur
     provisoire évite un ascenseur qui saute ; l'impression voit tout. */
.pms-fold {
    content-visibility: auto;
    contain-intrinsic-size: auto 720px;
  }
.toast-enter {
    animation: toast-enter 220ms cubic-bezier(0.22, 1, 0.36, 1) both;
  }
.modal-backdrop {
    animation: fade-in 180ms ease-out both;
  }
.modal-panel {
    animation: modal-enter 240ms cubic-bezier(0.22, 1, 0.36, 1) both;
  }
/* --- Thème crème (défaut): la planche d'observatoire ---------------------- */
.jarvis-shell {
    /* Surfaces : papiers chauds, joins diaphanes. */
    --jv-canvas: #f6f1e8;
    --jv-panel: #fbf8f2;
    --jv-raised: #fffdf8;
    --jv-inset: #efe8dc;
    --jv-rule: #e0d7c6;
    --jv-rule-strong: #cfc2ac;
    --jv-plate: #f2ede1;

    /* Encres : sépia profond, jamais du noir pur. */
    --jv-ink: #2a2620;
    --jv-soft: #54504a;
    --jv-mute: #6b655a;
    --jv-faint: #8d867a;

    /* Accents : laiton usé, acier sombre. */
    --jv-brass: #a8844f;
    --jv-bronze: #8e6f42;
    --jv-brass-wash: #f0e9db;
    --jv-brass-line: #d8cbb0;

    --jv-signal: #3c6076;
    --jv-signal-soft: #5d7f92;
    --jv-signal-wash: #e7e3d8;
    --jv-signal-line: #c8d6d9;
    /* Le texte qui repose sur un aplat « signal ». */
    --jv-signal-ink: #f8f5ee;

    /* États. */
    --jv-ok: #1d7a57;
    --jv-ok-wash: #e2ede2;
    --jv-warn: #a3700f;
    --jv-warn-wash: #f2ead6;
    --jv-crit: #b23b2a;
    --jv-crit-wash: #f4e2dd;

    /* Familles : encres profondes, lisibles sur le papier. */
    --jv-f-chambre: #5e7489;
    --jv-f-tache: #a2593f;
    --jv-f-stock: #5f7757;
    --jv-f-dossier: #705a8a;
    --jv-f-note: #96566b;

    /* La scène du median : un ciel pâlé (lumina high → lecture claire). */
    --jv-graph: #efe9dc;
    --jv-graph-grid: #ddd3c0;
    --jv-graph-edge: #c3b69c;

    /* Le volume : ciel crème, nébuleuses d'aquarelle, étoiles d'encre. */
    --jv-space-top: #f8f4ec;
    --jv-space-bottom: #e7dfcf;
    --jv-nebula-1: 150, 148, 178;
    --jv-nebula-2: 206, 168, 140;
    --jv-nebula-3: 148, 176, 196;
    --jv-star: #3c4254;
    --jv-galaxy: #4a4658;
    --jv-orbit: #b9ac95;

    /* Décors du shell. */
    --jv-wordmark-glow: rgba(168, 132, 79, 0.25);
    --jv-command-1: rgba(251, 248, 242, 0.72);
    --jv-command-2: rgba(246, 241, 232, 0.92);

    --jv-shadow: 0 1px 0 rgba(255, 255, 255, 0.55), 0 18px 44px -30px rgba(80, 60, 40, 0.4);

    color-scheme: light;
    background-color: var(--jv-canvas);
    color: var(--jv-ink);
  }
/* --- Thème encre : la nuit de l'espace ------------------------------------ */
html[data-theme='ink'] .jarvis-shell {
    /* Surfaces : la console flotte dans la nuit. */
    --jv-canvas: #050a14;
    --jv-panel: #0a1120;
    --jv-raised: #0e1a2c;
    --jv-inset: #070e1a;
    --jv-rule: #16263c;
    --jv-rule-strong: #26425f;
    --jv-plate: #04070f;

    /* Encres. */
    --jv-ink: #e9f2ff;
    --jv-soft: #bacbe4;
    --jv-mute: #8499b8;
    --jv-faint: #6f85a3;

    /* Accents : le signal éclaire, laiton chaud. */
    --jv-brass: #f0c987;
    --jv-bronze: #d9ac6b;
    --jv-brass-wash: #1a1710;
    --jv-brass-line: #3d3320;

    --jv-signal: #74e0ff;
    --jv-signal-soft: #3aa8c9;
    --jv-signal-wash: #0a1e28;
    --jv-signal-line: #1c4d5f;
    --jv-signal-ink: #03121a;

    /* États. */
    --jv-ok: #6fe0b0;
    --jv-ok-wash: #092018;
    --jv-warn: #f2c57c;
    --jv-warn-wash: #211a0e;
    --jv-crit: #ff9c8c;
    --jv-crit-wash: #24110f;

    /* Familles : cinq nébuleuses, lisibles sur le vide. */
    --jv-f-chambre: #7fd6ff;
    --jv-f-tache: #ffb27a;
    --jv-f-stock: #a6e88c;
    --jv-f-dossier: #c9a7ff;
    --jv-f-note: #ff9db4;

    /* La scène : profondeur de l'espace (lumina low → rendu additif). */
    --jv-graph: #04070f;
    --jv-graph-grid: #101d2e;
    --jv-graph-edge: #1d3a57;

    /* Le volume : nébuleuses qui brillent, voie lactée, étoiles. */
    --jv-space-top: #050a14;
    --jv-space-bottom: #02050b;
    --jv-nebula-1: 86, 132, 255;
    --jv-nebula-2: 176, 96, 255;
    --jv-nebula-3: 42, 196, 220;
    --jv-star: #ecf5ff;
    --jv-galaxy: #c6d8ff;
    --jv-orbit: #26446b;

    /* Décors du shell. */
    --jv-wordmark-glow: rgba(116, 224, 255, 0.34);
    --jv-command-1: rgba(6, 12, 22, 0.4);
    --jv-command-2: rgba(3, 7, 15, 0.8);

    --jv-shadow: 0 1px 0 rgba(255, 255, 255, 0.04), 0 24px 60px -34px rgba(0, 0, 0, 0.95);

    color-scheme: dark;
    background-color: var(--jv-canvas);
    color: var(--jv-ink);
  }
/* --- Le socle typographique du module -------------------------------- */
.jarvis-shell .label-caps {
    color: var(--jv-faint);
    letter-spacing: 0.16em;
    font-size: 10.5px;
  }
.jarvis-shell .display {
    color: var(--jv-ink);
  }
.jarvis-shell ::-moz-selection {
    background: var(--jv-brass-line);
    color: var(--jv-ink);
  }
.jarvis-shell ::selection {
    background: var(--jv-brass-line);
    color: var(--jv-ink);
  }
.jarvis-shell :focus-visible {
    outline: 1px solid var(--jv-brass);
    outline-offset: 2px;
  }
/* --- Cartes : plus des panneaux, des sections posées sur la page -------
     Aucun fond, aucun cadre, aucune ombre, aucun verre : les blocs de Jarvis
     sont des suites de lignes qui respirent avec le PMS. Les en-têtes gardent
     leur filet, seule charpente qui reste. */
.jv-card {
    position: relative;
    background: transparent;
    border: 0;
    box-shadow: none;
    backdrop-filter: none;
  }
.jv-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--jv-rule);
  }
/* Sur un téléphone, l'en-tête du réseau se replie : le titre au-dessus, les
     sélecteurs en dessous, plutôt qu'un sélecteur coupé au bord de la carte. */
@media (max-width: 639px) {
    .jv-card-head {
      flex-wrap: wrap;
    }

    .jv-card-head > div {
      flex-wrap: wrap;
      min-width: 0;
      max-width: 100%;
    }
  }
.jv-title {
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--jv-soft);
  }
/* --- Champs ---------------------------------------------------------- */
.jarvis-shell .field {
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--jv-rule-strong);
    border-radius: 0;
    padding: 6px 0 7px;
    color: var(--jv-ink);
    font-size: 13px;
    line-height: 18px;
    font-weight: 400;
    width: 100%;
  }
.jarvis-shell .\!field {
    background: transparent !important;
    border: 0 !important;
    border-bottom: 1px solid var(--jv-rule-strong) !important;
    border-radius: 0 !important;
    padding: 6px 0 7px !important;
    color: var(--jv-ink) !important;
    font-size: 13px !important;
    line-height: 18px !important;
    font-weight: 400 !important;
    width: 100% !important;
  }
/* Un select de console : filet de signal, fond de vide. */
.jv-select {
    height: 28px;
    max-width: 210px;
    padding: 0 8px;
    background: var(--jv-inset);
    border: 1px solid var(--jv-rule-strong);
    color: var(--jv-soft);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 10px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }
.jv-select:hover,
  .jv-select:focus {
    border-color: var(--jv-signal);
    color: var(--jv-ink);
    outline: none;
  }
.jarvis-shell .field::-moz-placeholder {
    color: var(--jv-faint);
    font-weight: 300;
  }
.jarvis-shell .field::placeholder {
    color: var(--jv-faint);
    font-weight: 300;
  }
.jarvis-shell .\!field::-moz-placeholder {
    color: var(--jv-faint) !important;
    font-weight: 300 !important;
  }
.jarvis-shell .\!field::placeholder {
    color: var(--jv-faint) !important;
    font-weight: 300 !important;
  }
.jarvis-shell .field:focus {
    outline: none;
    border-bottom-color: var(--jv-brass);
  }
.jarvis-shell .\!field:focus {
    outline: none !important;
    border-bottom-color: var(--jv-brass) !important;
  }
.jarvis-shell select.field {
    padding-right: 16px;
  }
.jarvis-shell select.\!field {
    padding-right: 16px !important;
  }
/* Un champ encadré, pour les filtres et la recherche. */
.jv-input {
    display: flex;
    align-items: center;
    gap: 7px;
    height: 30px;
    padding: 0 9px;
    background: var(--jv-inset);
    border: 1px solid var(--jv-rule);
    color: var(--jv-ink);
    font-size: 12px;
  }
.jv-input:focus-within {
    border-color: var(--jv-signal);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--jv-signal) 30%, transparent);
  }
.jv-input input {
    flex: 1;
    min-width: 0;
    background: transparent;
    border: 0;
    outline: none;
    color: var(--jv-ink);
    font-size: 12px;
  }
.jv-input input::-moz-placeholder {
    color: var(--jv-faint);
  }
.jv-input input::placeholder {
    color: var(--jv-faint);
  }
/* --- Boutons : même hauteur, même filet, deux poids ------------------ */
.jarvis-shell .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 32px;
    border-radius: 0;
    padding: 0 12px;
    font-size: 9.5px;
    line-height: 1;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    white-space: nowrap;
    transition: background-color 140ms linear, color 140ms linear, border-color 140ms linear, box-shadow 140ms linear;
  }
.jarvis-shell .btn-solid {
    background: var(--jv-signal);
    border: 1px solid var(--jv-signal);
    color: var(--jv-signal-ink);
    font-weight: 600;
    box-shadow: 0 0 24px -10px var(--jv-signal);
  }
.jarvis-shell .btn-solid:hover {
    background: color-mix(in srgb, var(--jv-signal) 82%, white);
    border-color: color-mix(in srgb, var(--jv-signal) 82%, white);
    box-shadow: 0 0 30px -8px var(--jv-signal);
  }
.jarvis-shell .btn-quiet {
    background: var(--jv-raised);
    border: 1px solid var(--jv-rule-strong);
    color: var(--jv-soft);
  }
.jarvis-shell .btn-quiet:hover {
    border-color: var(--jv-signal);
    color: var(--jv-ink);
    box-shadow: 0 0 22px -14px var(--jv-signal);
  }
/* Un filtre actif se lit au filet, jamais à un aplat criard. */
.jarvis-shell .btn-quiet[data-on='true'] {
    border-color: var(--jv-signal);
    color: var(--jv-ink);
  }
.jarvis-shell .btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
  }
.jv-btn-ghost {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 28px;
    width: 28px;
    border: 1px solid var(--jv-rule);
    background: var(--jv-raised);
    color: var(--jv-mute);
  }
.jv-btn-ghost:hover {
    border-color: var(--jv-signal);
    color: var(--jv-ink);
  }
/* --- Les outils de l'aperçu ----------------------------------------
     Une boîte à outils, pas des boutons au hasard : des boutons-icônes
     discrets, des sélecteurs segmentés (icône + libellé, l'actif souligné
     de cyan), des pastilles de compte, des groupes séparés d'un filet. Le
     panneau mesure SA largeur (container query) : étroit, les libellés
     s'effacent et l'icône reste — rien ne déborde jamais. */
.jv-preview {
    container-type: inline-size;
  }
.jv-tool {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: 1px solid transparent;
    border-radius: 6px;
    background: transparent;
    color: var(--jv-mute);
    transition: color 120ms ease-out, background 120ms ease-out, border-color 120ms ease-out;
  }
.jv-tool:hover:not(:disabled) {
    color: var(--jv-ink);
    background: var(--jv-raised);
    border-color: var(--jv-rule);
  }
.jv-tool:focus-visible,
  .jv-seg-btn:focus-visible,
  .jv-chipbtn:focus-visible {
    outline: 1px solid var(--jv-signal);
    outline-offset: 1px;
  }
.jv-tool:disabled {
    opacity: 0.35;
    cursor: default;
  }
.jv-tool[aria-pressed='true'] {
    color: var(--jv-signal);
    background: color-mix(in srgb, var(--jv-signal) 10%, transparent);
    border-color: color-mix(in srgb, var(--jv-signal) 35%, transparent);
  }
.jv-seg {
    display: inline-flex;
    flex: none;
    align-items: center;
    gap: 2px;
    padding: 2px;
    border: 1px solid var(--jv-rule);
    border-radius: 8px;
    background: var(--jv-inset);
  }
.jv-seg-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    height: 24px;
    min-width: 26px;
    padding: 0 7px;
    border-radius: 6px;
    font-size: 11px;
    line-height: 1;
    white-space: nowrap;
    color: var(--jv-faint);
    transition: color 120ms ease-out, background 120ms ease-out, box-shadow 120ms ease-out;
  }
.jv-seg-btn > svg {
    flex: none;
  }
.jv-seg-btn:hover {
    color: var(--jv-ink);
  }
.jv-seg-btn[aria-pressed='true'],
  .jv-seg-btn[aria-selected='true'] {
    color: var(--jv-ink);
    background: var(--jv-raised);
    box-shadow:
      inset 0 -1.5px 0 var(--jv-signal),
      0 0 0 1px var(--jv-rule);
  }
.jv-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 16px;
    height: 15px;
    padding: 0 4px;
    border: 1px solid var(--jv-rule);
    border-radius: 999px;
    background: var(--jv-raised);
    font: 600 9.5px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    color: var(--jv-mute);
  }
.jv-seg-btn[aria-pressed='true'] .jv-badge,
  .jv-seg-btn[aria-selected='true'] .jv-badge {
    color: var(--jv-signal);
    border-color: color-mix(in srgb, var(--jv-signal) 40%, transparent);
  }
.jv-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 14px;
  }
.jv-toolbar-group {
    display: inline-flex;
    flex: none;
    align-items: center;
    gap: 2px;
  }
.jv-sep {
    flex: none;
    width: 1px;
    height: 18px;
    background: var(--jv-rule);
  }
.jv-swatch {
    display: inline-block;
    flex: none;
    width: 12px;
    height: 12px;
    border: 1px solid var(--jv-rule-strong);
    border-radius: 999px;
  }
.jv-chipbtn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 24px;
    padding: 0 8px;
    border: 1px solid var(--jv-rule);
    border-radius: 6px;
    background: var(--jv-raised);
    font-size: 11px;
    line-height: 1;
    white-space: nowrap;
    color: var(--jv-soft);
    transition: color 120ms ease-out, border-color 120ms ease-out;
  }
.jv-chipbtn:hover {
    color: var(--jv-ink);
    border-color: var(--jv-signal);
  }
/* Les libellés « larges » n'apparaissent qu'avec de la place. */
.jv-seg-label--wide {
    display: none;
  }
@container (min-width: 860px) {
    .jv-seg-label--wide {
      display: inline;
    }
  }
/* Les formats gardent leur libellé tant qu'il y a la place. */
@container (max-width: 640px) {
    .jv-seg-label--fmt {
      display: none;
    }
  }
.jv-seg-btn:disabled {
    opacity: 0.35;
    cursor: default;
  }
/* Étroit : les onglets ne gardent que l'icône, sauf l'onglet actif. */
@container (max-width: 540px) {
    .jv-seg-btn:not([aria-selected='true']) .jv-seg-label--tab {
      display: none;
    }
  }
@container (max-width: 420px) {
    .jv-seg-label--tab {
      display: none;
    }
  }
/* --- Rose des caps --------------------------------------------------
     Un cercle fin et une aiguille de laiton : on lit d'un coup d'œil sous
     quel angle on regarde la Source. L'aiguille est tournée par la boucle de
     dessin (transform), jamais par un rendu React. */
/* Les deux repères de l'axe : un trait en haut, un plus court en bas. */
/* --- Puces d'état ---------------------------------------------------- */
.jv-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 22px;
    padding: 0 8px;
    border: 1px solid var(--jv-rule);
    background: var(--jv-raised);
    color: var(--jv-mute);
    font-size: 9.5px;
    font-weight: 500;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    white-space: nowrap;
  }
/* Sur un téléphone, un nom de modèle peut être plus long que l'écran : la
     puce se replie au lieu de déborder. */
@media (max-width: 639px) {
    .jv-pill {
      height: auto;
      min-height: 22px;
      padding: 4px 8px;
      line-height: 1.35;
      white-space: normal;
    }
  }
.jv-pill[data-tone='ok'] {
    border-color: color-mix(in srgb, var(--jv-ok) 32%, transparent);
    background: var(--jv-ok-wash);
    color: var(--jv-ok);
  }
.jv-pill[data-tone='warn'] {
    border-color: color-mix(in srgb, var(--jv-warn) 32%, transparent);
    background: var(--jv-warn-wash);
    color: var(--jv-warn);
  }
.jv-pill[data-tone='crit'] {
    border-color: color-mix(in srgb, var(--jv-crit) 32%, transparent);
    background: var(--jv-crit-wash);
    color: var(--jv-crit);
  }
/* --- Marqueur de famille --------------------------------------------- */
.jv-dot {
    display: inline-block;
    height: 6px;
    width: 6px;
    flex: none;
    border-radius: 50%;
    box-shadow: 0 0 7px currentColor;
  }
.jv-dot[data-shape='square'] {
    border-radius: 0;
  }
.jv-dot[data-shape='diamond'] {
    border-radius: 0;
    transform: rotate(45deg);
    height: 5px;
    width: 5px;
  }
.jv-dot[data-shape='ring'] {
    background: transparent !important;
    border: 1.5px solid currentColor;
  }
/* --- Barre de défilement du module ----------------------------------- */
.jarvis-shell ::-webkit-scrollbar-thumb {
    background-color: var(--jv-rule-strong);
  }
/* Le réseau : son en-tête et ses barres perdent filet et retrait latéral.
     Il ne reste qu'une suite de lignes — titre, commandes, ciel — posées à
     même la page du PMS. */
.jv-bare > .jv-card-head {
    padding: 0 0 6px;
    border-bottom: 0;
  }
.jv-bare .jv-console-bar,
  .jv-bare .jv-console-foot {
    padding-left: 0;
    padding-right: 0;
  }
.jv-bare .jv-console-bar {
    padding-top: 0;
  }
.jv-bare .jv-console-foot {
    border-top: 0;
  }
/* La ligne « Aperçu d'Aziz » : une bande entre deux filets, pas une boîte. */
.jv-band {
    border-left: 0;
    border-right: 0;
    background: transparent;
  }
/* La scène : plus de planche. Le ciel du réseau se pose directement sur la
     carte de la page — ni fond, ni cadre, ni coins de visée. */
.jv-plate {
    position: relative;
    background: transparent;
    border: 0;
    box-shadow: none;
  }
/* Les commandes de la scène : une ligne posée sur la page, pas une barre
     d'instruments. Les puces, le champ et les boutons restent, le châssis part. */
.jv-console-bar {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px 14px 8px;
    border-bottom: 0;
    background: transparent;
  }
@media (min-width: 1024px) {
    .jv-console-bar {
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
    }
  }
.jv-console-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 4px 16px;
    padding: 8px 14px 10px;
    border-top: 0;
    background: transparent;
  }
/* Repère vivant : le pouls du réseau, deux pixels. */
.jv-live {
    display: inline-block;
    height: 6px;
    width: 6px;
    border-radius: 50%;
    background: var(--jv-signal);
    box-shadow: 0 0 10px var(--jv-signal);
    animation: jv-pulse 2.6s ease-in-out infinite;
  }
.jv-hud {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 8.5px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--jv-faint);
  }
/* La transcription du plein écran : le texte, posé directement sur le ciel
     — aucun châssis, aucun verre, aucun cadre. Centrée, bornée en largeur ET
     en hauteur, elle ne sort jamais du cadre ; elle défile pour relire la
     conversation, la dernière réplique en bas. */
.jv-transcript {
    position: absolute;
    left: 50%;
    bottom: clamp(12px, 3.5%, 32px);
    z-index: 15;
    width: min(76ch, calc(100% - 48px));
    max-height: min(34%, 18em);
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
.jv-transcript-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 12px 18px 14px;
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--jv-signal) 40%, transparent) transparent;
    /* Le haut s'efface doucement : on sent qu'il y a de quoi remonter. */
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 1.6em, #000 100%);
    mask-image: linear-gradient(to bottom, transparent 0, #000 1.6em, #000 100%);
  }
.jv-transcript-scroll:focus-visible {
    outline: 1px solid var(--jv-signal);
    outline-offset: -3px;
  }
.jv-transcript-scroll::-webkit-scrollbar {
    width: 6px;
  }
.jv-transcript-scroll::-webkit-scrollbar-thumb {
    border-radius: 3px;
    background: color-mix(in srgb, var(--jv-signal) 40%, transparent);
  }
.jv-transcript-track {
    display: flex;
    flex-direction: column;
    gap: 9px;
    padding-top: 1.1em;
  }
.jv-transcript-line {
    margin: 0;
    display: grid;
    grid-template-columns: 4.2em minmax(0, 1fr);
    -moz-column-gap: 12px;
         column-gap: 12px;
    align-items: baseline;
    font-size: clamp(13.5px, 0.72vw + 7.2px, 17.5px);
    line-height: 1.5;
    font-weight: 400;
    letter-spacing: 0.004em;
    color: var(--jv-ink);
    text-align: left;
    text-wrap: pretty;
    overflow-wrap: anywhere;
    /* Pas de fond derrière le texte : c'est l'ombre qui le détache des
       étoiles, sans jamais assombrir la galaxie. Trois épaisseurs — le trait,
       l'auréole serrée, la nuit large — pour tenir sur le noyau même. */
    text-shadow:
      0 1px 1px rgba(0, 0, 0, 0.95),
      0 0 3px rgba(0, 0, 0, 0.92),
      0 0 10px rgba(0, 0, 0, 0.85),
      0 0 26px rgba(0, 0, 0, 0.6);
    transition:
      opacity 240ms ease,
      font-size 240ms ease;
  }
/* Les répliques passées : plus petites et atténuées, mais entières. */
.jv-transcript-line[data-past='true'] {
    font-size: clamp(11.5px, 0.5vw + 6.8px, 13.5px);
    opacity: 0.74;
  }
.jv-transcript-line[data-past='true']:hover {
    opacity: 1;
  }
.jv-transcript-line[data-who='aziz'] .jv-transcript-text {
    color: var(--jv-signal);
  }
.jv-transcript-line[data-live='true'] .jv-transcript-text::after {
    content: '▍';
    margin-left: 2px;
    animation: jv-caret 1s steps(1) infinite;
  }
.jv-transcript-who {
    justify-self: end;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 8.5px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--jv-faint);
    white-space: nowrap;
    transform: translateY(-1px);
    text-shadow:
      0 1px 2px rgba(0, 0, 0, 0.9),
      0 0 12px rgba(0, 0, 0, 0.72);
  }
.jv-transcript-line[data-who='aziz'] .jv-transcript-who {
    color: color-mix(in srgb, var(--jv-signal) 70%, var(--jv-faint));
  }
/* Le bouton « dernière réplique » a, lui, un fond : posé sur des mots, il
     doit rester cliquable sans les mangler. */
.jv-transcript-latest {
    position: absolute;
    right: 0;
    bottom: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 24px;
    padding: 0 11px;
    border: 1px solid color-mix(in srgb, var(--jv-signal) 55%, transparent);
    border-radius: 12px;
    background: color-mix(in srgb, #0b0f19 82%, transparent);
    backdrop-filter: blur(8px);
    color: var(--jv-signal);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 9px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    cursor: pointer;
  }
.jv-transcript-latest:hover {
    background: color-mix(in srgb, var(--jv-signal) 14%, #0b0f19);
  }
/* La commande de transcription : même filet que le reste de l'instrument,
     et un point qui dit l'état sans changer la largeur du bouton. */
.jv-transcript-toggle {
    pointer-events: auto;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 24px;
    padding: 0 10px;
    border: 1px solid color-mix(in srgb, var(--jv-signal) 20%, transparent);
    border-radius: 12px;
    background: color-mix(in srgb, #0b0f19 44%, transparent);
    backdrop-filter: blur(10px);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 8.5px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--jv-faint);
    cursor: pointer;
    transition:
      color 160ms ease,
      border-color 160ms ease,
      background 160ms ease;
  }
.jv-transcript-toggle:hover {
    color: var(--jv-ink);
    border-color: color-mix(in srgb, var(--jv-signal) 42%, transparent);
  }
.jv-transcript-toggle:focus-visible {
    outline: 1px solid var(--jv-signal);
    outline-offset: 2px;
  }
.jv-transcript-toggle[data-on='true'] {
    color: var(--jv-signal);
    border-color: color-mix(in srgb, var(--jv-signal) 40%, transparent);
  }
.jv-transcript-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    border: 1px solid currentColor;
  }
.jv-transcript-toggle[data-on='true'] .jv-transcript-dot {
    background: currentColor;
    box-shadow: 0 0 6px currentColor;
  }
@media (max-width: 640px) {
    .jv-transcript {
      width: calc(100% - 24px);
      max-height: 40%;
    }
    .jv-transcript-scroll {
      padding: 9px 12px 10px;
    }
    .jv-transcript-line {
      grid-template-columns: minmax(0, 1fr);
      row-gap: 2px;
    }
    .jv-transcript-who {
      justify-self: start;
    }
  }
@keyframes jv-caret {
    50% {
      opacity: 0;
    }
  }
.jv-tooltip {
    background: var(--jv-raised);
    border: 1px solid var(--jv-rule-strong);
    box-shadow: var(--jv-shadow), 0 0 0 1px color-mix(in srgb, var(--jv-signal) 10%, transparent);
    padding: 10px 12px;
    backdrop-filter: blur(4px);
  }
.jv-veil {
    background: color-mix(in srgb, var(--jv-canvas) 84%, transparent);
  }
/* Filtres de famille : une puce = un marqueur + un nom + un compte. */
.jv-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 26px;
    flex: none;
    padding: 0 8px;
    border: 1px solid var(--jv-rule);
    background: var(--jv-inset);
    color: var(--jv-mute);
    font-size: 9.5px;
    font-weight: 500;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    white-space: nowrap;
    transition: background-color 120ms linear, border-color 120ms linear, color 120ms linear;
  }
.jv-chip:hover {
    border-color: var(--jv-signal-line);
    color: var(--jv-ink);
  }
.jv-chip[data-active='true'] {
    background: var(--jv-raised);
    border-color: var(--jv-rule-strong);
    color: var(--jv-ink);
  }
.jv-chip[data-active='false'] {
    color: var(--jv-faint);
    border-style: dashed;
  }
.jv-chip[data-active='false'] .jv-dot {
    opacity: 0.35;
  }
.jv-chip-count {
    font-variant-numeric: tabular-nums;
    font-size: 9px;
    letter-spacing: 0.04em;
    color: var(--jv-faint);
  }
/* Un cadre intérieur, pour isoler un bloc de données dans une carte. */
/* ==========================================================================
     La console Jarvis : nuit étoilée, panneaux de verre, signal cyan
     ========================================================================== */
/* La coque elle-même n'est plus un panneau : ni fond, ni filet, ni marge
     intérieure. Jarvis se pose à même la page du PMS. */
.jarvis-shell {
    position: relative;
    isolation: isolate;
    padding: 0;
    border: 0;
    background: transparent;
  }
/* Le thème encre pose sa propre couleur de fond avec plus de spécificité. */
html[data-theme='ink'] .jarvis-shell {
    background: transparent;
  }
.jv-eyebrow {
    font-size: 9.5px;
    font-weight: 500;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--jv-signal-soft);
  }
.jv-wordmark {
    font-family: var(--font-display), 'Cormorant Garamond', Georgia, serif;
    font-weight: 500;
    font-size: clamp(42px, 6vw, 62px);
    line-height: 0.86;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--jv-ink);
    text-shadow: 0 0 38px var(--jv-wordmark-glow);
  }
.jv-tagline {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 9px;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--jv-faint);
    padding-bottom: 7px;
  }
.jv-lede {
    margin-top: 12px;
    max-width: 66ch;
    font-size: 12.5px;
    line-height: 1.7;
    color: var(--jv-mute);
  }
/* Ruban de télémétrie sous l'en-tête. */
.jv-telemetry {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 22px;
    margin-top: 18px;
    padding: 8px 0;
    border-top: 1px solid var(--jv-rule);
    border-bottom: 1px solid var(--jv-rule);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 9px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--jv-faint);
  }
.jv-telemetry b {
    font-weight: 500;
    color: var(--jv-soft);
    letter-spacing: 0.1em;
  }
.jv-telemetry .jv-telemetry-hot {
    color: var(--jv-signal);
  }
.jv-telemetry .jv-telemetry-hot b {
    color: var(--jv-signal);
  }
/* La feuille de commande : un seul champ, un seul geste. */
.jv-command {
    border-top: 1px solid var(--jv-rule);
    padding: 12px;
    background: linear-gradient(180deg, var(--jv-command-1), var(--jv-command-2));
  }
.jv-command-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
  }
.jv-prompt {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 46px;
    padding: 0 8px 0 12px;
    border: 1px solid var(--jv-rule-strong);
    background: var(--jv-inset);
    transition: border-color 140ms linear, box-shadow 140ms linear;
  }
.jv-prompt:focus-within {
    border-color: var(--jv-signal);
    box-shadow:
      0 0 0 1px color-mix(in srgb, var(--jv-signal) 55%, transparent),
      0 0 34px -12px color-mix(in srgb, var(--jv-signal) 55%, transparent);
  }
.jv-glyph {
    flex: none;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 17px;
    line-height: 1;
    color: var(--jv-signal);
    opacity: 0.9;
  }
.jv-prompt input {
    flex: 1;
    min-width: 0;
    background: transparent;
    border: 0;
    outline: none;
    color: var(--jv-ink);
    font-size: 13.5px;
    letter-spacing: 0.01em;
  }
.jv-prompt input::-moz-placeholder {
    color: var(--jv-faint);
  }
.jv-prompt input::placeholder {
    color: var(--jv-faint);
  }
.jv-prompt-send {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    height: 32px;
    width: 38px;
    border: 1px solid var(--jv-signal);
    background: var(--jv-signal);
    color: #03121a;
    box-shadow: 0 0 24px -10px var(--jv-signal);
    transition: background-color 140ms linear, box-shadow 140ms linear, opacity 140ms linear;
  }
.jv-prompt-send:hover {
    background: #a6ecff;
  }
/* Le dépôt d'un fichier : le trombone dans l'invite, et l'invite qui s'ouvre au glisser-déposer. */
.jv-prompt-attach {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    height: 32px;
    width: 32px;
    border: 1px solid var(--jv-rule-strong);
    background: transparent;
    color: var(--jv-soft);
    transition: color 140ms linear, border-color 140ms linear, opacity 140ms linear;
  }
.jv-prompt-attach:hover:not(:disabled) {
    color: var(--jv-signal);
    border-color: var(--jv-signal);
  }
.jv-prompt-attach:disabled {
    opacity: 0.5;
  }
.jv-prompt-drop {
    border-style: dashed;
    border-color: var(--jv-signal);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--jv-signal) 55%, transparent);
  }
.jv-attachment {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    max-width: 100%;
    padding: 4px 8px;
    border: 1px solid var(--jv-signal-line);
    background: var(--jv-signal-wash);
    color: var(--jv-ink);
    font-size: 11px;
  }
.jv-attachment-name {
    max-width: 240px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
.jv-prompt-send:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    box-shadow: none;
  }
.jv-command-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 9px;
  }
.jv-command-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 2px 16px;
    margin-top: 9px;
    font-size: 10.5px;
    color: var(--jv-faint);
  }
/* L'état du majordome, en marge de la consigne. */
.jv-state {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 9.5px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--jv-faint);
  }
/* Pastille d'état dans les en-têtes de carte. */
.jv-beacon {
    display: inline-block;
    height: 5px;
    width: 5px;
    flex: none;
    border-radius: 50%;
    background: var(--jv-faint);
  }
.jv-beacon[data-tone='signal'] {
    background: var(--jv-signal);
    box-shadow: 0 0 9px var(--jv-signal);
  }
.jv-beacon[data-tone='ok'] {
    background: var(--jv-ok);
    box-shadow: 0 0 9px var(--jv-ok);
  }
.jv-beacon[data-tone='busy'] {
    background: var(--jv-brass);
    box-shadow: 0 0 9px var(--jv-brass);
  }
.jv-convo-scroll {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: 460px;
    min-height: 140px;
    overflow-y: auto;
    padding: 14px 16px 18px;
    scroll-behavior: smooth;
    overscroll-behavior: contain;
  }
/* Une conversation de l'historique : une ligne de papier, pas un bouton chrome. */
.jv-history-row {
    display: block;
    width: 100%;
    padding: 6px 8px;
    border: 1px solid transparent;
    background: transparent;
    cursor: pointer;
  }
.jv-history-row:hover {
    border-color: var(--jv-rule-strong);
    background: var(--jv-inset);
  }
.jv-history-row[data-active='true'] {
    border-color: var(--jv-signal);
    background: var(--jv-signal-wash);
  }
.jv-history-row:disabled {
    cursor: not-allowed;
    opacity: 0.5;
  }
.jv-convo-empty {
    margin: auto;
    max-width: 34ch;
    text-align: center;
    font-size: 12px;
    line-height: 1.5;
    color: var(--jv-faint);
  }
.jv-convo-row {
    display: flex;
    animation: jv-convo-in 220ms ease-out both;
  }
.jv-convo-row[data-role='user'] {
    justify-content: flex-end;
  }
.jv-convo-bubble {
    max-width: min(78%, 620px);
    border: 1px solid var(--jv-rule);
    padding: 8px 12px 10px;
    background: var(--jv-panel);
    transition: border-color 200ms ease, opacity 200ms ease;
  }
.jv-convo-bubble[data-role='user'] {
    background: var(--jv-signal-wash);
    border-color: var(--jv-signal-line);
  }
.jv-convo-bubble[data-role='aziz'][data-status='live'] {
    border-color: var(--jv-signal-soft);
  }
.jv-convo-bubble[data-status='interrupted'] {
    opacity: 0.72;
  }
/* La réplique retrouvée par la recherche : elle s'éclaire, puis s'efface. */
.jv-convo-bubble[data-flash='true'] {
    border-color: var(--jv-signal);
    animation: jv-convo-flash 2.6s ease-out both;
  }
.jv-convo-bubble[data-status='error'] {
    border-color: var(--jv-crit, #b4533f);
  }
.jv-convo-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 3px;
    font-family: var(--font-mono, ui-monospace, monospace);
    font-size: 9.5px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--jv-mute);
  }
.jv-convo-time {
    margin-left: auto;
    letter-spacing: 0.04em;
    color: var(--jv-faint);
  }
.jv-convo-flag {
    border: 1px solid var(--jv-rule-strong);
    padding: 0 4px;
    color: var(--jv-faint);
  }
.jv-convo-text {
    margin: 0;
    white-space: pre-wrap;
    font-size: 14.5px;
    line-height: 1.5;
    color: var(--jv-ink);
  }
.jv-convo-bubble[data-role='aziz'] .jv-convo-text {
    font-size: 15.5px;
  }
.jv-convo-caret {
    display: inline-block;
    width: 7px;
    height: 1.05em;
    margin-left: 2px;
    vertical-align: -0.15em;
    background: var(--jv-signal);
    animation: jv-convo-blink 900ms steps(2, start) infinite;
  }
.jv-convo-speaking {
    color: var(--jv-signal);
    animation: jv-convo-pulse 1.1s ease-in-out infinite;
  }
/* Les repères du tour : ce qu'Aziz avait en tête, en une ligne discrète. */
.jv-convo-recall {
    display: flex;
    align-items: center;
    gap: 5px;
    margin: 7px 0 0;
    padding-top: 6px;
    border-top: 1px dashed var(--jv-rule);
    font-family: var(--font-mono, ui-monospace, monospace);
    font-size: 10px;
    color: var(--jv-faint);
  }
.jv-convo-recall > span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
.jv-convo-recall svg {
    flex-shrink: 0;
  }
.jv-convo-receipts {
    margin: 7px 0 0;
    padding: 6px 0 0;
    list-style: none;
    border-top: 1px solid var(--jv-rule);
    font-family: var(--font-mono, ui-monospace, monospace);
    font-size: 11px;
    color: var(--jv-soft);
  }
.jv-convo-receipts li[data-ok='true'] {
    color: var(--jv-ok);
  }
.jv-convo-receipts li[data-ok='false'] {
    color: var(--jv-crit, #b4533f);
  }
.jv-convo-system {
    align-self: center;
    margin: 2px 0;
    font-family: var(--font-mono, ui-monospace, monospace);
    font-size: 10.5px;
    color: var(--jv-faint);
  }
.jv-convo-system[data-tone='crit'] {
    color: var(--jv-crit, #b4533f);
  }
.jv-convo-pending .jv-convo-text {
    display: flex;
    align-items: center;
    gap: 8px;
  }
.jv-convo-hint {
    font-size: 12px;
    color: var(--jv-mute);
  }
.jv-convo-dots {
    display: inline-flex;
    gap: 4px;
  }
.jv-convo-dots i {
    width: 6px;
    height: 6px;
    border-radius: 9999px;
    background: var(--jv-signal);
    animation: jv-convo-dot 1.2s ease-in-out infinite;
  }
.jv-convo-dots i:nth-child(2) {
    animation-delay: 0.15s;
  }
.jv-convo-dots i:nth-child(3) {
    animation-delay: 0.3s;
  }
@keyframes jv-convo-in {
    from {
      opacity: 0;
      transform: translateY(4px);
    }
    to {
      opacity: 1;
      transform: none;
    }
  }
@keyframes jv-convo-blink {
    to {
      visibility: hidden;
    }
  }
@keyframes jv-convo-flash {
    0%,
    30% {
      background: var(--jv-signal-wash);
      box-shadow: 0 0 0 2px var(--jv-signal-line);
    }
    100% {
      box-shadow: 0 0 0 0 transparent;
    }
  }
@keyframes jv-convo-pulse {
    50% {
      opacity: 0.35;
    }
  }
@keyframes jv-convo-dot {
    0%,
    80%,
    100% {
      opacity: 0.25;
      transform: translateY(0);
    }
    40% {
      opacity: 1;
      transform: translateY(-3px);
    }
  }
@media (prefers-reduced-motion: reduce) {
    .jv-convo-row,
    .jv-convo-bubble[data-flash='true'],
    .jv-convo-caret,
    .jv-convo-speaking,
    .jv-convo-dots i {
      animation: none;
    }
  }
.jv-vu {
    display: inline-block;
    width: 96px;
    height: 6px;
    border: 1px solid var(--jv-rule-strong);
    background: var(--jv-panel);
    overflow: hidden;
    vertical-align: middle;
  }
.jv-vu-bar {
    display: block;
    height: 100%;
    background: var(--jv-signal);
    transform-origin: left center;
    transition: transform 90ms linear;
  }
.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;
}
.pointer-events-none {
  pointer-events: none;
}
.\!visible {
  visibility: visible !important;
}
.visible {
  visibility: visible;
}
.invisible {
  visibility: hidden;
}
.static {
  position: static;
}
.fixed {
  position: fixed;
}
.absolute {
  position: absolute;
}
.relative {
  position: relative;
}
.sticky {
  position: sticky;
}
.inset-0 {
  inset: 0px;
}
.inset-x-0 {
  left: 0px;
  right: 0px;
}
.inset-x-2 {
  left: 0.5rem;
  right: 0.5rem;
}
.inset-x-4 {
  left: 1rem;
  right: 1rem;
}
.inset-y-0 {
  top: 0px;
  bottom: 0px;
}
.-right-1 {
  right: -0.25rem;
}
.-top-1 {
  top: -0.25rem;
}
.bottom-0 {
  bottom: 0px;
}
.bottom-2 {
  bottom: 0.5rem;
}
.bottom-3 {
  bottom: 0.75rem;
}
.bottom-5 {
  bottom: 1.25rem;
}
.bottom-\[76px\] {
  bottom: 76px;
}
.left-0 {
  left: 0px;
}
.left-1\/2 {
  left: 50%;
}
.left-2 {
  left: 0.5rem;
}
.right-0 {
  right: 0px;
}
.right-1 {
  right: 0.25rem;
}
.right-3 {
  right: 0.75rem;
}
.right-4 {
  right: 1rem;
}
.right-5 {
  right: 1.25rem;
}
.top-0 {
  top: 0px;
}
.top-2 {
  top: 0.5rem;
}
.top-2\.5 {
  top: 0.625rem;
}
.top-3 {
  top: 0.75rem;
}
.top-4 {
  top: 1rem;
}
.top-8 {
  top: 2rem;
}
.top-full {
  top: 100%;
}
.z-10 {
  z-index: 10;
}
.z-20 {
  z-index: 20;
}
.z-30 {
  z-index: 30;
}
.z-40 {
  z-index: 40;
}
.z-50 {
  z-index: 50;
}
.z-\[9999\] {
  z-index: 9999;
}
.col-span-2 {
  grid-column: span 2 / span 2;
}
.col-span-3 {
  grid-column: span 3 / span 3;
}
.col-start-1 {
  grid-column-start: 1;
}
.row-start-1 {
  grid-row-start: 1;
}
.-mx-1 {
  margin-left: -0.25rem;
  margin-right: -0.25rem;
}
.-mx-4 {
  margin-left: -1rem;
  margin-right: -1rem;
}
.-mx-5 {
  margin-left: -1.25rem;
  margin-right: -1.25rem;
}
.mx-0\.5 {
  margin-left: 0.125rem;
  margin-right: 0.125rem;
}
.mx-auto {
  margin-left: auto;
  margin-right: auto;
}
.-mt-7 {
  margin-top: -1.75rem;
}
.mb-0\.5 {
  margin-bottom: 0.125rem;
}
.mb-1 {
  margin-bottom: 0.25rem;
}
.mb-1\.5 {
  margin-bottom: 0.375rem;
}
.mb-2 {
  margin-bottom: 0.5rem;
}
.mb-3 {
  margin-bottom: 0.75rem;
}
.mb-4 {
  margin-bottom: 1rem;
}
.ml-0\.5 {
  margin-left: 0.125rem;
}
.ml-1 {
  margin-left: 0.25rem;
}
.ml-1\.5 {
  margin-left: 0.375rem;
}
.ml-2 {
  margin-left: 0.5rem;
}
.ml-6 {
  margin-left: 1.5rem;
}
.ml-\[74px\] {
  margin-left: 74px;
}
.ml-auto {
  margin-left: auto;
}
.mr-1 {
  margin-right: 0.25rem;
}
.mt-0\.5 {
  margin-top: 0.125rem;
}
.mt-1 {
  margin-top: 0.25rem;
}
.mt-1\.5 {
  margin-top: 0.375rem;
}
.mt-10 {
  margin-top: 2.5rem;
}
.mt-2 {
  margin-top: 0.5rem;
}
.mt-2\.5 {
  margin-top: 0.625rem;
}
.mt-3 {
  margin-top: 0.75rem;
}
.mt-4 {
  margin-top: 1rem;
}
.mt-5 {
  margin-top: 1.25rem;
}
.mt-6 {
  margin-top: 1.5rem;
}
.mt-7 {
  margin-top: 1.75rem;
}
.mt-8 {
  margin-top: 2rem;
}
.mt-9 {
  margin-top: 2.25rem;
}
.mt-\[-2px\] {
  margin-top: -2px;
}
.mt-\[4pt\] {
  margin-top: 4pt;
}
.mt-\[6pt\] {
  margin-top: 6pt;
}
.mt-auto {
  margin-top: auto;
}
.line-clamp-2 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.block {
  display: block;
}
.inline-block {
  display: inline-block;
}
.inline {
  display: inline;
}
.flex {
  display: flex;
}
.inline-flex {
  display: inline-flex;
}
.table {
  display: table;
}
.grid {
  display: grid;
}
.\!hidden {
  display: none !important;
}
.hidden {
  display: none;
}
.\!h-6 {
  height: 1.5rem !important;
}
.h-0\.5 {
  height: 0.125rem;
}
.h-1 {
  height: 0.25rem;
}
.h-1\.5 {
  height: 0.375rem;
}
.h-16 {
  height: 4rem;
}
.h-2 {
  height: 0.5rem;
}
.h-2\.5 {
  height: 0.625rem;
}
.h-20 {
  height: 5rem;
}
.h-3 {
  height: 0.75rem;
}
.h-3\.5 {
  height: 0.875rem;
}
.h-4 {
  height: 1rem;
}
.h-5 {
  height: 1.25rem;
}
.h-6 {
  height: 1.5rem;
}
.h-7 {
  height: 1.75rem;
}
.h-8 {
  height: 2rem;
}
.h-9 {
  height: 2.25rem;
}
.h-\[104px\] {
  height: 104px;
}
.h-\[15mm\] {
  height: 15mm;
}
.h-\[15px\] {
  height: 15px;
}
.h-\[18px\] {
  height: 18px;
}
.h-\[380px\] {
  height: 380px;
}
.h-\[38px\] {
  height: 38px;
}
.h-\[3px\] {
  height: 3px;
}
.h-\[430px\] {
  height: 430px;
}
.h-\[440px\] {
  height: 440px;
}
.h-\[68px\] {
  height: 68px;
}
.h-\[70vh\] {
  height: 70vh;
}
.h-\[86vh\] {
  height: 86vh;
}
.h-\[92px\] {
  height: 92px;
}
.h-\[calc\(100vh-220px\)\] {
  height: calc(100vh - 220px);
}
.h-fit {
  height: -moz-fit-content;
  height: fit-content;
}
.h-full {
  height: 100%;
}
.h-px {
  height: 1px;
}
.max-h-36 {
  max-height: 9rem;
}
.max-h-40 {
  max-height: 10rem;
}
.max-h-52 {
  max-height: 13rem;
}
.max-h-56 {
  max-height: 14rem;
}
.max-h-60 {
  max-height: 15rem;
}
.max-h-64 {
  max-height: 16rem;
}
.max-h-72 {
  max-height: 18rem;
}
.max-h-\[220px\] {
  max-height: 220px;
}
.max-h-\[260px\] {
  max-height: 260px;
}
.max-h-\[360px\] {
  max-height: 360px;
}
.max-h-\[440px\] {
  max-height: 440px;
}
.max-h-\[560px\] {
  max-height: 560px;
}
.max-h-\[88vh\] {
  max-height: 88vh;
}
.max-h-full {
  max-height: 100%;
}
.min-h-0 {
  min-height: 0px;
}
.min-h-\[120px\] {
  min-height: 120px;
}
.min-h-\[132px\] {
  min-height: 132px;
}
.min-h-\[148px\] {
  min-height: 148px;
}
.min-h-\[160px\] {
  min-height: 160px;
}
.min-h-\[260px\] {
  min-height: 260px;
}
.min-h-\[36px\] {
  min-height: 36px;
}
.min-h-\[420px\] {
  min-height: 420px;
}
.min-h-\[440px\] {
  min-height: 440px;
}
.min-h-\[520px\] {
  min-height: 520px;
}
.min-h-\[80px\] {
  min-height: 80px;
}
.min-h-screen {
  min-height: 100vh;
}
.\!w-6 {
  width: 1.5rem !important;
}
.w-1 {
  width: 0.25rem;
}
.w-1\.5 {
  width: 0.375rem;
}
.w-1\/3 {
  width: 33.333333%;
}
.w-12 {
  width: 3rem;
}
.w-14 {
  width: 3.5rem;
}
.w-16 {
  width: 4rem;
}
.w-2 {
  width: 0.5rem;
}
.w-2\.5 {
  width: 0.625rem;
}
.w-20 {
  width: 5rem;
}
.w-24 {
  width: 6rem;
}
.w-28 {
  width: 7rem;
}
.w-3 {
  width: 0.75rem;
}
.w-3\.5 {
  width: 0.875rem;
}
.w-32 {
  width: 8rem;
}
.w-4 {
  width: 1rem;
}
.w-40 {
  width: 10rem;
}
.w-44 {
  width: 11rem;
}
.w-5 {
  width: 1.25rem;
}
.w-6 {
  width: 1.5rem;
}
.w-60 {
  width: 15rem;
}
.w-64 {
  width: 16rem;
}
.w-7 {
  width: 1.75rem;
}
.w-8 {
  width: 2rem;
}
.w-\[140px\] {
  width: 140px;
}
.w-\[180px\] {
  width: 180px;
}
.w-\[18px\] {
  width: 18px;
}
.w-\[200px\] {
  width: 200px;
}
.w-\[228px\] {
  width: 228px;
}
.w-\[58px\] {
  width: 58px;
}
.w-\[62px\] {
  width: 62px;
}
.w-auto {
  width: auto;
}
.w-fit {
  width: -moz-fit-content;
  width: fit-content;
}
.w-full {
  width: 100%;
}
.w-px {
  width: 1px;
}
.min-w-0 {
  min-width: 0px;
}
.min-w-\[130px\] {
  min-width: 130px;
}
.min-w-\[150px\] {
  min-width: 150px;
}
.min-w-\[15px\] {
  min-width: 15px;
}
.min-w-\[16px\] {
  min-width: 16px;
}
.min-w-\[170px\] {
  min-width: 170px;
}
.min-w-\[220px\] {
  min-width: 220px;
}
.min-w-\[230px\] {
  min-width: 230px;
}
.min-w-\[240px\] {
  min-width: 240px;
}
.min-w-\[40px\] {
  min-width: 40px;
}
.min-w-\[44px\] {
  min-width: 44px;
}
.min-w-\[52px\] {
  min-width: 52px;
}
.min-w-\[620px\] {
  min-width: 620px;
}
.min-w-\[640px\] {
  min-width: 640px;
}
.min-w-\[680px\] {
  min-width: 680px;
}
.min-w-\[760px\] {
  min-width: 760px;
}
.min-w-\[90px\] {
  min-width: 90px;
}
.min-w-full {
  min-width: 100%;
}
.max-w-2xl {
  max-width: 42rem;
}
.max-w-5xl {
  max-width: 64rem;
}
.max-w-\[150px\] {
  max-width: 150px;
}
.max-w-\[200px\] {
  max-width: 200px;
}
.max-w-\[220px\] {
  max-width: 220px;
}
.max-w-\[240px\] {
  max-width: 240px;
}
.max-w-\[320px\] {
  max-width: 320px;
}
.max-w-\[340px\] {
  max-width: 340px;
}
.max-w-\[360px\] {
  max-width: 360px;
}
.max-w-\[36ch\] {
  max-width: 36ch;
}
.max-w-\[420px\] {
  max-width: 420px;
}
.max-w-\[440px\] {
  max-width: 440px;
}
.max-w-\[85\%\] {
  max-width: 85%;
}
.max-w-\[92\%\] {
  max-width: 92%;
}
.max-w-\[calc\(100vw-32px\)\] {
  max-width: calc(100vw - 32px);
}
.max-w-\[min\(200px\2c 38cqw\)\] {
  max-width: min(200px,38cqw);
}
.max-w-full {
  max-width: 100%;
}
.max-w-lg {
  max-width: 32rem;
}
.max-w-md {
  max-width: 28rem;
}
.max-w-page {
  max-width: 1240px;
}
.max-w-sm {
  max-width: 24rem;
}
.max-w-xl {
  max-width: 36rem;
}
.flex-1 {
  flex: 1 1 0%;
}
.shrink {
  flex-shrink: 1;
}
.shrink-0 {
  flex-shrink: 0;
}
.grow {
  flex-grow: 1;
}
.basis-\[240px\] {
  flex-basis: 240px;
}
.border-collapse {
  border-collapse: collapse;
}
.-translate-x-1\/2 {
  --tw-translate-x: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.rotate-180 {
  --tw-rotate: 180deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.transform {
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
@keyframes pulse {

  50% {
    opacity: .5;
  }
}
.animate-pulse {
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
@keyframes spin {

  to {
    transform: rotate(360deg);
  }
}
.animate-spin {
  animation: spin 1s linear infinite;
}
.cursor-default {
  cursor: default;
}
.cursor-not-allowed {
  cursor: not-allowed;
}
.cursor-pointer {
  cursor: pointer;
}
.touch-none {
  touch-action: none;
}
.select-none {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.resize-none {
  resize: none;
}
.resize {
  resize: both;
}
.list-decimal {
  list-style-type: decimal;
}
.list-disc {
  list-style-type: disc;
}
.grid-cols-1 {
  grid-template-columns: repeat(1, minmax(0, 1fr));
}
.grid-cols-11 {
  grid-template-columns: repeat(11, 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-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.grid-cols-5 {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}
.grid-cols-6 {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}
.grid-cols-7 {
  grid-template-columns: repeat(7, minmax(0, 1fr));
}
.grid-cols-\[1fr_4\.5rem\] {
  grid-template-columns: 1fr 4.5rem;
}
.grid-cols-\[1fr_7rem_4\.5rem\] {
  grid-template-columns: 1fr 7rem 4.5rem;
}
.grid-cols-\[64px_1fr_1fr_auto\] {
  grid-template-columns: 64px 1fr 1fr auto;
}
.grid-cols-\[minmax\(0\2c 1fr\)_repeat\(4\2c 84px\)_auto\] {
  grid-template-columns: minmax(0,1fr) repeat(4,84px) auto;
}
.grid-cols-\[repeat\(auto-fit\2c minmax\(11\.5rem\2c 1fr\)\)\] {
  grid-template-columns: repeat(auto-fit,minmax(11.5rem,1fr));
}
.flex-col {
  flex-direction: column;
}
.flex-wrap {
  flex-wrap: wrap;
}
.place-items-center {
  place-items: center;
}
.items-start {
  align-items: flex-start;
}
.items-end {
  align-items: flex-end;
}
.items-center {
  align-items: center;
}
.items-baseline {
  align-items: baseline;
}
.items-stretch {
  align-items: stretch;
}
.justify-start {
  justify-content: flex-start;
}
.justify-end {
  justify-content: flex-end;
}
.justify-center {
  justify-content: center;
}
.justify-between {
  justify-content: space-between;
}
.gap-0 {
  gap: 0px;
}
.gap-0\.5 {
  gap: 0.125rem;
}
.gap-1 {
  gap: 0.25rem;
}
.gap-1\.5 {
  gap: 0.375rem;
}
.gap-2 {
  gap: 0.5rem;
}
.gap-2\.5 {
  gap: 0.625rem;
}
.gap-3 {
  gap: 0.75rem;
}
.gap-4 {
  gap: 1rem;
}
.gap-5 {
  gap: 1.25rem;
}
.gap-6 {
  gap: 1.5rem;
}
.gap-px {
  gap: 1px;
}
.gap-x-1 {
  -moz-column-gap: 0.25rem;
       column-gap: 0.25rem;
}
.gap-x-2 {
  -moz-column-gap: 0.5rem;
       column-gap: 0.5rem;
}
.gap-x-3 {
  -moz-column-gap: 0.75rem;
       column-gap: 0.75rem;
}
.gap-x-4 {
  -moz-column-gap: 1rem;
       column-gap: 1rem;
}
.gap-y-1 {
  row-gap: 0.25rem;
}
.gap-y-1\.5 {
  row-gap: 0.375rem;
}
.gap-y-2 {
  row-gap: 0.5rem;
}
.space-y-0\.5 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.125rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.125rem * var(--tw-space-y-reverse));
}
.space-y-1 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.25rem * var(--tw-space-y-reverse));
}
.space-y-1\.5 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.375rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.375rem * var(--tw-space-y-reverse));
}
.space-y-2 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
}
.space-y-2\.5 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.625rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.625rem * var(--tw-space-y-reverse));
}
.space-y-3 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.75rem * var(--tw-space-y-reverse));
}
.space-y-4 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1rem * var(--tw-space-y-reverse));
}
.space-y-5 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(1.25rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1.25rem * var(--tw-space-y-reverse));
}
.divide-y > :not([hidden]) ~ :not([hidden]) {
  --tw-divide-y-reverse: 0;
  border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
  border-bottom-width: calc(1px * var(--tw-divide-y-reverse));
}
.divide-jv-rule > :not([hidden]) ~ :not([hidden]) {
  border-color: var(--jv-rule);
}
.divide-rule > :not([hidden]) ~ :not([hidden]) {
  --tw-divide-opacity: 1;
  border-color: rgb(var(--rule) / var(--tw-divide-opacity));
}
.overflow-auto {
  overflow: auto;
}
.overflow-hidden {
  overflow: hidden;
}
.overflow-x-auto {
  overflow-x: auto;
}
.overflow-y-auto {
  overflow-y: auto;
}
.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.whitespace-nowrap {
  white-space: nowrap;
}
.whitespace-pre-line {
  white-space: pre-line;
}
.whitespace-pre-wrap {
  white-space: pre-wrap;
}
.break-words {
  overflow-wrap: break-word;
}
.break-all {
  word-break: break-all;
}
.rounded {
  border-radius: 0px;
}
.rounded-full {
  border-radius: 9999px;
}
.rounded-md {
  border-radius: 0.375rem;
}
.rounded-sm {
  border-radius: 0px;
}
.rounded-t-md {
  border-top-left-radius: 0.375rem;
  border-top-right-radius: 0.375rem;
}
.border {
  border-width: 1px;
}
.border-0 {
  border-width: 0px;
}
.border-y {
  border-top-width: 1px;
  border-bottom-width: 1px;
}
.border-b {
  border-bottom-width: 1px;
}
.border-b-0 {
  border-bottom-width: 0px;
}
.border-b-2 {
  border-bottom-width: 2px;
}
.border-l {
  border-left-width: 1px;
}
.border-l-2 {
  border-left-width: 2px;
}
.border-l-\[3px\] {
  border-left-width: 3px;
}
.border-t {
  border-top-width: 1px;
}
.border-t-0 {
  border-top-width: 0px;
}
.border-dashed {
  border-style: dashed;
}
.border-\[\#00d8f6\] {
  --tw-border-opacity: 1;
  border-color: rgb(0 216 246 / var(--tw-border-opacity));
}
.border-\[var\(--jv-warn\)\] {
  border-color: var(--jv-warn);
}
.border-accent-200 {
  --tw-border-opacity: 1;
  border-color: rgb(var(--accent-200) / var(--tw-border-opacity));
}
.border-accent-300 {
  --tw-border-opacity: 1;
  border-color: rgb(var(--accent-300) / var(--tw-border-opacity));
}
.border-accent-500 {
  --tw-border-opacity: 1;
  border-color: rgb(var(--accent-500) / var(--tw-border-opacity));
}
.border-accent-500\/30 {
  border-color: rgb(var(--accent-500) / 0.3);
}
.border-accent-500\/40 {
  border-color: rgb(var(--accent-500) / 0.4);
}
.border-accent-700 {
  --tw-border-opacity: 1;
  border-color: rgb(var(--accent-700) / var(--tw-border-opacity));
}
.border-accent-700\/30 {
  border-color: rgb(var(--accent-700) / 0.3);
}
.border-accent-800\/40 {
  border-color: rgb(var(--accent-800) / 0.4);
}
.border-black {
  --tw-border-opacity: 1;
  border-color: rgb(0 0 0 / var(--tw-border-opacity));
}
.border-crit {
  --tw-border-opacity: 1;
  border-color: rgb(var(--crit) / var(--tw-border-opacity));
}
.border-crit\/20 {
  border-color: rgb(var(--crit) / 0.2);
}
.border-crit\/30 {
  border-color: rgb(var(--crit) / 0.3);
}
.border-crit\/40 {
  border-color: rgb(var(--crit) / 0.4);
}
.border-info {
  --tw-border-opacity: 1;
  border-color: rgb(var(--info) / var(--tw-border-opacity));
}
.border-info\/20 {
  border-color: rgb(var(--info) / 0.2);
}
.border-info\/30 {
  border-color: rgb(var(--info) / 0.3);
}
.border-info\/40 {
  border-color: rgb(var(--info) / 0.4);
}
.border-ink {
  --tw-border-opacity: 1;
  border-color: rgb(var(--ink) / var(--tw-border-opacity));
}
.border-ink-inverse\/40 {
  border-color: rgb(var(--ink-inverse) / 0.4);
}
.border-ink\/10 {
  border-color: rgb(var(--ink) / 0.1);
}
.border-ink\/15 {
  border-color: rgb(var(--ink) / 0.15);
}
.border-ink\/20 {
  border-color: rgb(var(--ink) / 0.2);
}
.border-ink\/30 {
  border-color: rgb(var(--ink) / 0.3);
}
.border-ink\/40 {
  border-color: rgb(var(--ink) / 0.4);
}
.border-ink\/70 {
  border-color: rgb(var(--ink) / 0.7);
}
.border-jv-ink {
  border-color: var(--jv-ink);
}
.border-jv-ok {
  border-color: var(--jv-ok);
}
.border-jv-rule {
  border-color: var(--jv-rule);
}
.border-jv-rule-strong {
  border-color: var(--jv-rule-strong);
}
.border-jv-warn {
  border-color: var(--jv-warn);
}
.border-neutral-300 {
  --tw-border-opacity: 1;
  border-color: rgb(212 212 212 / var(--tw-border-opacity));
}
.border-ok {
  --tw-border-opacity: 1;
  border-color: rgb(var(--ok) / var(--tw-border-opacity));
}
.border-ok\/20 {
  border-color: rgb(var(--ok) / 0.2);
}
.border-ok\/30 {
  border-color: rgb(var(--ok) / 0.3);
}
.border-ok\/40 {
  border-color: rgb(var(--ok) / 0.4);
}
.border-ok\/50 {
  border-color: rgb(var(--ok) / 0.5);
}
.border-rule {
  --tw-border-opacity: 1;
  border-color: rgb(var(--rule) / var(--tw-border-opacity));
}
.border-rule-strong {
  --tw-border-opacity: 1;
  border-color: rgb(var(--rule-strong) / var(--tw-border-opacity));
}
.border-transparent {
  border-color: transparent;
}
.border-warn {
  --tw-border-opacity: 1;
  border-color: rgb(var(--warn) / var(--tw-border-opacity));
}
.border-warn\/20 {
  border-color: rgb(var(--warn) / 0.2);
}
.border-warn\/30 {
  border-color: rgb(var(--warn) / 0.3);
}
.border-warn\/40 {
  border-color: rgb(var(--warn) / 0.4);
}
.border-l-accent-400 {
  --tw-border-opacity: 1;
  border-left-color: rgb(var(--accent-400) / var(--tw-border-opacity));
}
.border-l-crit {
  --tw-border-opacity: 1;
  border-left-color: rgb(var(--crit) / var(--tw-border-opacity));
}
.border-l-ink {
  --tw-border-opacity: 1;
  border-left-color: rgb(var(--ink) / var(--tw-border-opacity));
}
.border-l-ok {
  --tw-border-opacity: 1;
  border-left-color: rgb(var(--ok) / var(--tw-border-opacity));
}
.border-l-warn {
  --tw-border-opacity: 1;
  border-left-color: rgb(var(--warn) / var(--tw-border-opacity));
}
.bg-\[\#00d8f6\] {
  --tw-bg-opacity: 1;
  background-color: rgb(0 216 246 / var(--tw-bg-opacity));
}
.bg-\[\#04070f\]\/80 {
  background-color: rgb(4 7 15 / 0.8);
}
.bg-\[\#04070f\]\/85 {
  background-color: rgb(4 7 15 / 0.85);
}
.bg-\[\#04070f\]\/90 {
  background-color: rgb(4 7 15 / 0.9);
}
.bg-\[\#0b0f19\]\/90 {
  background-color: rgb(11 15 25 / 0.9);
}
.bg-\[var\(--jv-warn-wash\)\] {
  background-color: var(--jv-warn-wash);
}
.bg-accent-400 {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--accent-400) / var(--tw-bg-opacity));
}
.bg-accent-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--accent-50) / var(--tw-bg-opacity));
}
.bg-accent-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--accent-500) / var(--tw-bg-opacity));
}
.bg-accent-500\/10 {
  background-color: rgb(var(--accent-500) / 0.1);
}
.bg-accent-500\/15 {
  background-color: rgb(var(--accent-500) / 0.15);
}
.bg-accent-500\/5 {
  background-color: rgb(var(--accent-500) / 0.05);
}
.bg-accent-600 {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--accent-600) / var(--tw-bg-opacity));
}
.bg-accent-600\/20 {
  background-color: rgb(var(--accent-600) / 0.2);
}
.bg-accent-700\/10 {
  background-color: rgb(var(--accent-700) / 0.1);
}
.bg-accent-950\/30 {
  background-color: rgb(var(--accent-950) / 0.3);
}
.bg-black {
  --tw-bg-opacity: 1;
  background-color: rgb(0 0 0 / var(--tw-bg-opacity));
}
.bg-black\/30 {
  background-color: rgb(0 0 0 / 0.3);
}
.bg-black\/35 {
  background-color: rgb(0 0 0 / 0.35);
}
.bg-black\/70 {
  background-color: rgb(0 0 0 / 0.7);
}
.bg-brand {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--brand) / var(--tw-bg-opacity));
}
.bg-brand-deep {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--brand-deep) / var(--tw-bg-opacity));
}
.bg-crit {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--crit) / var(--tw-bg-opacity));
}
.bg-crit\/10 {
  background-color: rgb(var(--crit) / 0.1);
}
.bg-crit\/15 {
  background-color: rgb(var(--crit) / 0.15);
}
.bg-crit\/5 {
  background-color: rgb(var(--crit) / 0.05);
}
.bg-info {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--info) / var(--tw-bg-opacity));
}
.bg-info\/10 {
  background-color: rgb(var(--info) / 0.1);
}
.bg-ink {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--ink) / var(--tw-bg-opacity));
}
.bg-ink-soft {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--ink-soft) / var(--tw-bg-opacity));
}
.bg-ink\/20 {
  background-color: rgb(var(--ink) / 0.2);
}
.bg-ink\/40 {
  background-color: rgb(var(--ink) / 0.4);
}
.bg-ink\/5 {
  background-color: rgb(var(--ink) / 0.05);
}
.bg-jv-canvas {
  background-color: var(--jv-canvas);
}
.bg-jv-crit-wash {
  background-color: var(--jv-crit-wash);
}
.bg-jv-inset {
  background-color: var(--jv-inset);
}
.bg-jv-raised {
  background-color: var(--jv-raised);
}
.bg-jv-warn-wash {
  background-color: var(--jv-warn-wash);
}
.bg-ok {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--ok) / var(--tw-bg-opacity));
}
.bg-ok\/10 {
  background-color: rgb(var(--ok) / 0.1);
}
.bg-ok\/15 {
  background-color: rgb(var(--ok) / 0.15);
}
.bg-ok\/30 {
  background-color: rgb(var(--ok) / 0.3);
}
.bg-ok\/5 {
  background-color: rgb(var(--ok) / 0.05);
}
.bg-ok\/60 {
  background-color: rgb(var(--ok) / 0.6);
}
.bg-paper {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--paper) / var(--tw-bg-opacity));
}
.bg-paper-card {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--paper-card) / var(--tw-bg-opacity));
}
.bg-paper-card\/95 {
  background-color: rgb(var(--paper-card) / 0.95);
}
.bg-paper-deep {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--paper-deep) / var(--tw-bg-opacity));
}
.bg-paper-deep\/30 {
  background-color: rgb(var(--paper-deep) / 0.3);
}
.bg-paper-deep\/60 {
  background-color: rgb(var(--paper-deep) / 0.6);
}
.bg-rule {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--rule) / var(--tw-bg-opacity));
}
.bg-rule-strong {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--rule-strong) / var(--tw-bg-opacity));
}
.bg-transparent {
  background-color: transparent;
}
.bg-warn {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--warn) / var(--tw-bg-opacity));
}
.bg-warn\/10 {
  background-color: rgb(var(--warn) / 0.1);
}
.bg-warn\/15 {
  background-color: rgb(var(--warn) / 0.15);
}
.bg-warn\/5 {
  background-color: rgb(var(--warn) / 0.05);
}
.bg-warn\/60 {
  background-color: rgb(var(--warn) / 0.6);
}
.bg-white {
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
}
.fill-current {
  fill: currentColor;
}
.object-contain {
  -o-object-fit: contain;
     object-fit: contain;
}
.object-cover {
  -o-object-fit: cover;
     object-fit: cover;
}
.object-top {
  -o-object-position: top;
     object-position: top;
}
.p-0\.5 {
  padding: 0.125rem;
}
.p-1 {
  padding: 0.25rem;
}
.p-1\.5 {
  padding: 0.375rem;
}
.p-2 {
  padding: 0.5rem;
}
.p-2\.5 {
  padding: 0.625rem;
}
.p-3 {
  padding: 0.75rem;
}
.p-3\.5 {
  padding: 0.875rem;
}
.p-4 {
  padding: 1rem;
}
.p-5 {
  padding: 1.25rem;
}
.p-6 {
  padding: 1.5rem;
}
.\!px-1 {
  padding-left: 0.25rem !important;
  padding-right: 0.25rem !important;
}
.px-0\.5 {
  padding-left: 0.125rem;
  padding-right: 0.125rem;
}
.px-1 {
  padding-left: 0.25rem;
  padding-right: 0.25rem;
}
.px-1\.5 {
  padding-left: 0.375rem;
  padding-right: 0.375rem;
}
.px-2 {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}
.px-2\.5 {
  padding-left: 0.625rem;
  padding-right: 0.625rem;
}
.px-3 {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}
.px-3\.5 {
  padding-left: 0.875rem;
  padding-right: 0.875rem;
}
.px-4 {
  padding-left: 1rem;
  padding-right: 1rem;
}
.px-5 {
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}
.px-6 {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}
.py-0 {
  padding-top: 0px;
  padding-bottom: 0px;
}
.py-0\.5 {
  padding-top: 0.125rem;
  padding-bottom: 0.125rem;
}
.py-1 {
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}
.py-1\.5 {
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
}
.py-10 {
  padding-top: 2.5rem;
  padding-bottom: 2.5rem;
}
.py-11 {
  padding-top: 2.75rem;
  padding-bottom: 2.75rem;
}
.py-16 {
  padding-top: 4rem;
  padding-bottom: 4rem;
}
.py-2 {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}
.py-2\.5 {
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
}
.py-24 {
  padding-top: 6rem;
  padding-bottom: 6rem;
}
.py-3 {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}
.py-3\.5 {
  padding-top: 0.875rem;
  padding-bottom: 0.875rem;
}
.py-4 {
  padding-top: 1rem;
  padding-bottom: 1rem;
}
.py-5 {
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
}
.py-6 {
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}
.py-8 {
  padding-top: 2rem;
  padding-bottom: 2rem;
}
.py-px {
  padding-top: 1px;
  padding-bottom: 1px;
}
.pb-0 {
  padding-bottom: 0px;
}
.pb-1 {
  padding-bottom: 0.25rem;
}
.pb-1\.5 {
  padding-bottom: 0.375rem;
}
.pb-2 {
  padding-bottom: 0.5rem;
}
.pb-24 {
  padding-bottom: 6rem;
}
.pb-3 {
  padding-bottom: 0.75rem;
}
.pb-4 {
  padding-bottom: 1rem;
}
.pb-40 {
  padding-bottom: 10rem;
}
.pl-1 {
  padding-left: 0.25rem;
}
.pl-14 {
  padding-left: 3.5rem;
}
.pl-2 {
  padding-left: 0.5rem;
}
.pl-2\.5 {
  padding-left: 0.625rem;
}
.pl-3 {
  padding-left: 0.75rem;
}
.pl-4 {
  padding-left: 1rem;
}
.pl-5 {
  padding-left: 1.25rem;
}
.pl-6 {
  padding-left: 1.5rem;
}
.pl-7 {
  padding-left: 1.75rem;
}
.pl-\[168px\] {
  padding-left: 168px;
}
.pr-1 {
  padding-right: 0.25rem;
}
.pr-1\.5 {
  padding-right: 0.375rem;
}
.pr-2 {
  padding-right: 0.5rem;
}
.pr-3 {
  padding-right: 0.75rem;
}
.pr-3\.5 {
  padding-right: 0.875rem;
}
.pr-4 {
  padding-right: 1rem;
}
.pt-1 {
  padding-top: 0.25rem;
}
.pt-1\.5 {
  padding-top: 0.375rem;
}
.pt-2 {
  padding-top: 0.5rem;
}
.pt-2\.5 {
  padding-top: 0.625rem;
}
.pt-20 {
  padding-top: 5rem;
}
.pt-24 {
  padding-top: 6rem;
}
.pt-3 {
  padding-top: 0.75rem;
}
.pt-4 {
  padding-top: 1rem;
}
.pt-5 {
  padding-top: 1.25rem;
}
.pt-6 {
  padding-top: 1.5rem;
}
.pt-7 {
  padding-top: 1.75rem;
}
.text-left {
  text-align: left;
}
.text-center {
  text-align: center;
}
.text-right {
  text-align: right;
}
.align-top {
  vertical-align: top;
}
.align-\[-2px\] {
  vertical-align: -2px;
}
.font-mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
}
.font-sans {
  font-family: var(--font-montserrat), Montserrat, "Helvetica Neue", Arial, sans-serif;
}
.\!text-\[9px\] {
  font-size: 9px !important;
}
.text-2xl {
  font-size: 23px;
  line-height: 27px;
}
.text-2xs {
  font-size: 11px;
  line-height: 15px;
}
.text-\[10\.5px\] {
  font-size: 10.5px;
}
.text-\[10px\] {
  font-size: 10px;
}
.text-\[11\.5px\] {
  font-size: 11.5px;
}
.text-\[11px\] {
  font-size: 11px;
}
.text-\[12\.5px\] {
  font-size: 12.5px;
}
.text-\[12pt\] {
  font-size: 12pt;
}
.text-\[12px\] {
  font-size: 12px;
}
.text-\[13\.5px\] {
  font-size: 13.5px;
}
.text-\[13px\] {
  font-size: 13px;
}
.text-\[14px\] {
  font-size: 14px;
}
.text-\[16px\] {
  font-size: 16px;
}
.text-\[17px\] {
  font-size: 17px;
}
.text-\[18px\] {
  font-size: 18px;
}
.text-\[19px\] {
  font-size: 19px;
}
.text-\[20px\] {
  font-size: 20px;
}
.text-\[21px\] {
  font-size: 21px;
}
.text-\[22px\] {
  font-size: 22px;
}
.text-\[23px\] {
  font-size: 23px;
}
.text-\[24px\] {
  font-size: 24px;
}
.text-\[25px\] {
  font-size: 25px;
}
.text-\[26px\] {
  font-size: 26px;
}
.text-\[27px\] {
  font-size: 27px;
}
.text-\[28px\] {
  font-size: 28px;
}
.text-\[30px\] {
  font-size: 30px;
}
.text-\[32px\] {
  font-size: 32px;
}
.text-\[34px\] {
  font-size: 34px;
}
.text-\[6pt\] {
  font-size: 6pt;
}
.text-\[8pt\] {
  font-size: 8pt;
}
.text-\[9\.5px\] {
  font-size: 9.5px;
}
.text-\[9px\] {
  font-size: 9px;
}
.text-base {
  font-size: 14.5px;
  line-height: 22px;
}
.text-lg {
  font-size: 16px;
  line-height: 23px;
}
.text-sm {
  font-size: 13.5px;
  line-height: 20px;
}
.text-xl {
  font-size: 18px;
  line-height: 24px;
}
.text-xs {
  font-size: 12.5px;
  line-height: 18px;
}
.font-black {
  font-weight: 900;
}
.font-light {
  font-weight: 300;
}
.font-medium {
  font-weight: 500;
}
.font-normal {
  font-weight: 400;
}
.font-semibold {
  font-weight: 600;
}
.uppercase {
  text-transform: uppercase;
}
.capitalize {
  text-transform: capitalize;
}
.normal-case {
  text-transform: none;
}
.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);
}
.leading-4 {
  line-height: 1rem;
}
.leading-5 {
  line-height: 1.25rem;
}
.leading-6 {
  line-height: 1.5rem;
}
.leading-\[1\.12\] {
  line-height: 1.12;
}
.leading-\[1\.1\] {
  line-height: 1.1;
}
.leading-\[1\.22\] {
  line-height: 1.22;
}
.leading-\[1\.2\] {
  line-height: 1.2;
}
.leading-\[15px\] {
  line-height: 15px;
}
.leading-none {
  line-height: 1;
}
.leading-relaxed {
  line-height: 1.625;
}
.leading-snug {
  line-height: 1.375;
}
.leading-tight {
  line-height: 1.25;
}
.tracking-\[0\.12em\] {
  letter-spacing: 0.12em;
}
.tracking-\[0\.14em\] {
  letter-spacing: 0.14em;
}
.tracking-\[0\.16em\] {
  letter-spacing: 0.16em;
}
.tracking-\[0\.18em\] {
  letter-spacing: 0.18em;
}
.tracking-\[0\.1em\] {
  letter-spacing: 0.1em;
}
.tracking-\[0\.22em\] {
  letter-spacing: 0.22em;
}
.tracking-\[0\.24em\] {
  letter-spacing: 0.24em;
}
.tracking-\[0\.26em\] {
  letter-spacing: 0.26em;
}
.tracking-\[0\.28em\] {
  letter-spacing: 0.28em;
}
.tracking-\[0\.2em\] {
  letter-spacing: 0.2em;
}
.tracking-\[0\.3em\] {
  letter-spacing: 0.3em;
}
.tracking-brand {
  letter-spacing: 0.3em;
}
.tracking-normal {
  letter-spacing: 0em;
}
.tracking-tight {
  letter-spacing: -0.01em;
}
.tracking-wide {
  letter-spacing: 0.025em;
}
.tracking-wider {
  letter-spacing: 0.05em;
}
.tracking-widest {
  letter-spacing: 0.1em;
}
.text-\[\#e6f9fd\] {
  --tw-text-opacity: 1;
  color: rgb(230 249 253 / var(--tw-text-opacity));
}
.text-\[var\(--jv-warn\)\] {
  color: var(--jv-warn);
}
.text-accent-200 {
  --tw-text-opacity: 1;
  color: rgb(var(--accent-200) / var(--tw-text-opacity));
}
.text-accent-600 {
  --tw-text-opacity: 1;
  color: rgb(var(--accent-600) / var(--tw-text-opacity));
}
.text-accent-700 {
  --tw-text-opacity: 1;
  color: rgb(var(--accent-700) / var(--tw-text-opacity));
}
.text-accent-700\/80 {
  color: rgb(var(--accent-700) / 0.8);
}
.text-black {
  --tw-text-opacity: 1;
  color: rgb(0 0 0 / var(--tw-text-opacity));
}
.text-crit {
  --tw-text-opacity: 1;
  color: rgb(var(--crit) / var(--tw-text-opacity));
}
.text-crit\/80 {
  color: rgb(var(--crit) / 0.8);
}
.text-info {
  --tw-text-opacity: 1;
  color: rgb(var(--info) / var(--tw-text-opacity));
}
.text-ink {
  --tw-text-opacity: 1;
  color: rgb(var(--ink) / var(--tw-text-opacity));
}
.text-ink-faint {
  --tw-text-opacity: 1;
  color: rgb(var(--ink-faint) / var(--tw-text-opacity));
}
.text-ink-inverse {
  --tw-text-opacity: 1;
  color: rgb(var(--ink-inverse) / var(--tw-text-opacity));
}
.text-ink-inverse\/70 {
  color: rgb(var(--ink-inverse) / 0.7);
}
.text-ink-inverse\/80 {
  color: rgb(var(--ink-inverse) / 0.8);
}
.text-ink-mute {
  --tw-text-opacity: 1;
  color: rgb(var(--ink-mute) / var(--tw-text-opacity));
}
.text-ink-soft {
  --tw-text-opacity: 1;
  color: rgb(var(--ink-soft) / var(--tw-text-opacity));
}
.text-ink\/50 {
  color: rgb(var(--ink) / 0.5);
}
.text-ink\/60 {
  color: rgb(var(--ink) / 0.6);
}
.text-ink\/65 {
  color: rgb(var(--ink) / 0.65);
}
.text-ink\/70 {
  color: rgb(var(--ink) / 0.7);
}
.text-ink\/75 {
  color: rgb(var(--ink) / 0.75);
}
.text-ink\/80 {
  color: rgb(var(--ink) / 0.8);
}
.text-jv-crit {
  color: var(--jv-crit);
}
.text-jv-faint {
  color: var(--jv-faint);
}
.text-jv-ink {
  color: var(--jv-ink);
}
.text-jv-mute {
  color: var(--jv-mute);
}
.text-jv-ok {
  color: var(--jv-ok);
}
.text-jv-soft {
  color: var(--jv-soft);
}
.text-jv-warn {
  color: var(--jv-warn);
}
.text-neutral-500 {
  --tw-text-opacity: 1;
  color: rgb(115 115 115 / var(--tw-text-opacity));
}
.text-neutral-600 {
  --tw-text-opacity: 1;
  color: rgb(82 82 82 / var(--tw-text-opacity));
}
.text-ok {
  --tw-text-opacity: 1;
  color: rgb(var(--ok) / var(--tw-text-opacity));
}
.text-warn {
  --tw-text-opacity: 1;
  color: rgb(var(--warn) / var(--tw-text-opacity));
}
.underline {
  text-decoration-line: underline;
}
.line-through {
  text-decoration-line: line-through;
}
.no-underline {
  text-decoration-line: none;
}
.decoration-crit\/40 {
  text-decoration-color: rgb(var(--crit) / 0.4);
}
.decoration-jv-rule {
  text-decoration-color: var(--jv-rule);
}
.decoration-ok\/40 {
  text-decoration-color: rgb(var(--ok) / 0.4);
}
.decoration-rule {
  text-decoration-color: rgb(var(--rule) / 1);
}
.decoration-rule-strong {
  text-decoration-color: rgb(var(--rule-strong) / 1);
}
.decoration-dotted {
  text-decoration-style: dotted;
}
.underline-offset-2 {
  text-underline-offset: 2px;
}
.underline-offset-4 {
  text-underline-offset: 4px;
}
.antialiased {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.accent-accent-500 {
  accent-color: rgb(var(--accent-500) / 1);
}
.opacity-0 {
  opacity: 0;
}
.opacity-35 {
  opacity: 0.35;
}
.opacity-60 {
  opacity: 0.6;
}
.opacity-70 {
  opacity: 0.7;
}
.opacity-80 {
  opacity: 0.8;
}
.shadow {
  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0_0_24px_rgba\(0\2c 216\2c 246\2c 0\.35\)\] {
  --tw-shadow: 0 0 24px rgba(0,216,246,0.35);
  --tw-shadow-colored: 0 0 24px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-lg {
  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-xl {
  --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.outline-none {
  outline: 2px solid transparent;
  outline-offset: 2px;
}
.outline {
  outline-style: solid;
}
.outline-1 {
  outline-width: 1px;
}
.outline-ink {
  outline-color: rgb(var(--ink) / 1);
}
.ring {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.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);
}
.invert {
  --tw-invert: invert(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 {
  --tw-backdrop-blur: blur(8px);
  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, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-\[width\] {
  transition-property: width;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-colors {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-transform {
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.duration-200 {
  transition-duration: 200ms;
}

/* ==========================================================================
   THÈMES — deux peaux, un seul jeu de classes
   ==========================================================================
   Les couleurs sont des canaux RGB : Tailwind les compose en
   `rgb(var(--paper) / <alpha-value>)`, donc `bg-ok/10` fonctionne dans les
   deux thèmes. `data-theme` sur <html> est la seule bascule.

   · crème (défaut) — le papier de la maison : la surface de travail du jour.
   · encre (alternate) — la nuit du poste, historique du produit.
   -------------------------------------------------------------------------- */

:root,
html[data-theme='cream'] {
  color-scheme: light;

  /* Surfaces — aux couleurs réelles du site thesourcemarrakech.com :
     un seul crème (#F9F2EA) porte l'en-tête, le corps et les panneaux ; les
     cartes l'éclairent d'un cheveu, les enfoncements l'approfondissent. */
  --paper: 249 242 234; /* #F9F2EA — le crème du site */
  --paper-card: 253 250 244; /* #FCFAF4 */
  --paper-deep: 238 231 218; /* #EEE7DA */
  --brand: 249 242 234; /* #F9F2EA — la plaque de signature porte le crème exact */
  --brand-deep: 238 232 221; /* #EEE8DD */

  /* Encres — contrastes mesurés sur #F9F2EA : 13,9:1 · 8,4:1 · 5,0:1 · 4,7:1.
     Le gris le plus clair reste au-dessus de 4,5:1 : les micro-libellés de 10 à
     12 px (sous-titres de panneaux, colonnes d'audit) restent lisibles sans
     grossir. */
  --ink: 25 29 32; /* #191D20 — l'encre du site (Elementor « text ») */
  --ink-soft: 85 70 64; /* #554640 — le brun du site */
  --ink-mute: 94 86 77; /* #5E564D — le taupe du site */
  --ink-faint: 112 104 95; /* #70685F */
  --ink-inverse: 255 253 248; /* #FFFDF8 */

  /* Filets */
  --rule: 226 218 204; /* #E2DACC */
  --rule-strong: 211 199 180; /* #D3C7B4 */

  /* Rose de la maison, rampe claire : les tons 50/100 lavent, 700 écrit */
  --accent-50: 251 239 241; /* #FBEFF1 — l'échelle part du bordeaux officiel #791023 */
  --accent-100: 245 218 223; /* #F5DADF */
  --accent-200: 235 181 191; /* #EBB5BF */
  --accent-300: 217 138 153; /* #D98A99 */
  --accent-400: 191 90 110; /* #BF5A6E */
  --accent-500: 160 48 74; /* #A0304A */
  --accent-600: 138 29 51; /* #8A1D33 */
  --accent-700: 121 16 35; /* #791023 — l'accent du site */
  --accent-800: 96 12 28; /* #600C1C */
  --accent-900: 72 9 21; /* #480915 */
  --accent-950: 48 6 14; /* #30060E */

  /* États : assez sombres pour rester lisibles sur le papier */
  --ok: 47 107 75; /* #2F6B4B */
  --warn: 138 98 24; /* #8A6218 */
  --crit: 162 67 47; /* #A2432F */
  --info: 75 95 117; /* #4B5F75 */

  --page-selection-bg: #efbfcb;
  --page-selection-ink: #28241e;
  --page-focus: #c04361;
}

html[data-theme='ink'] {
  color-scheme: dark;

  /* Surfaces */
  --paper: 11 15 23; /* #0B0F17 */
  --paper-card: 15 22 34; /* #0F1622 */
  --paper-deep: 19 28 43; /* #131C2B */
  --brand: 16 26 41; /* #101A29 */
  --brand-deep: 10 17 25; /* #0A1119 */

  /* Encres — contrastes sur #0B0F17 : 14,9:1 · 10,4:1 · 6,3:1 · 4,6:1 */
  --ink: 230 236 245; /* #E6ECF5 */
  --ink-soft: 195 206 221; /* #C3CEDD */
  --ink-mute: 147 161 181; /* #93A1B5 */
  --ink-faint: 124 139 160; /* #7C8BA0 */
  --ink-inverse: 11 15 23; /* #0B0F17 */

  /* Filets */
  --rule: 30 41 59; /* #1E293B */
  --rule-strong: 46 63 88; /* #2E3F58 */

  /* Rose de la maison, rampe nuit : 50/100 lavent, 700 éclaire */
  --accent-50: 27 16 23; /* #1B1017 */
  --accent-100: 42 24 33; /* #2A1821 */
  --accent-200: 231 178 196; /* #E7B2C4 */
  --accent-300: 240 185 204; /* #F0B9CC */
  --accent-400: 241 143 175; /* #F18FAF */
  --accent-500: 228 105 143; /* #E4698F */
  --accent-600: 242 169 193; /* #F2A9C1 */
  --accent-700: 246 195 210; /* #F6C3D2 */
  --accent-800: 58 31 43; /* #3A1F2B */
  --accent-900: 41 22 33; /* #291621 */
  --accent-950: 32 18 26; /* #20121A */

  /* États */
  --ok: 111 191 155; /* #6FBF9B */
  --warn: 221 174 91; /* #DDAE5B */
  --crit: 227 131 122; /* #E3837A */
  --info: 143 160 182; /* #8FA0B6 */

  --page-selection-bg: #e4698f;
  --page-selection-ink: #0b0f17;
  --page-focus: #e4698f;
}

/* L'emblème existe en deux encres : celui du papier sur la nuit, celui de la
   nuit sur le papier. Une seule image est montée à l'écran — et le crème est
   le défaut, y compris quand <html> ne porte aucun attribut. */
.theme-on-ink {
  display: none;
}
html[data-theme='ink'] .theme-on-cream {
  display: none;
}
html[data-theme='ink'] .theme-on-ink {
  display: inline-block;
}

/* --------------------------------------------------------------------------
   Socle — même structure dans les deux thèmes : un fond, une encre, un accent.
   Aucune ombre portée, aucun dégradé, aucun arrondi.
   -------------------------------------------------------------------------- */

@keyframes view-enter {
  from {
    opacity: 0;
    transform: translate3d(0, 4px, 0);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes toast-enter {
  from {
    opacity: 0;
    transform: translate3d(0, 10px, 0);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes modal-enter {
  from {
    opacity: 0;
    transform: translate3d(0, 8px, 0) scale(0.985);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Bascule de thème : un fondu de 280 ms, posé le temps du changement puis
   retiré — aucune transition permanente ne ralentit le reste de l'écran. */
html.theme-switching,
html.theme-switching *,
html.theme-switching *::before,
html.theme-switching *::after {
  transition: background-color 280ms ease, border-color 280ms ease, color 280ms ease, fill 280ms ease !important;
}

@media (prefers-reduced-motion: reduce) {
  .view-enter,
  .toast-enter,
  .modal-backdrop,
  .modal-panel {
    animation: none;
  }
  .module-link::after {
    transition: none;
  }
  html.theme-switching,
  html.theme-switching *,
  html.theme-switching *::before,
  html.theme-switching *::after {
    transition: none !important;
  }
}

/* --------------------------------------------------------------------------
   Tactile — sous 900 px, aucune cible interactive sous 44 px.
   La densité éditoriale ne change pas (tailles de texte, filets, espacements
   restent) : seules les boîtes de contrôle prennent la hauteur du doigt.
   `min-height` / `min-width` priment sur les `h-7 w-7` de Tailwind, donc la
   grille de disponibilité et les boutons-icônes suivent sans retouche.
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  button,
  [role='button'],
  summary,
  select,
  input:not([type='checkbox']):not([type='radio']),
  textarea {
    min-height: 44px;
  }

  button,
  [role='button'] {
    min-width: 44px;
  }

  .module-link {
    min-height: 44px;
    padding-top: 14px;
    padding-bottom: 13px;
  }

  /* La case reste petite, mais c'est le libellé entier qui répond. */
  input[type='checkbox'],
  input[type='radio'] {
    width: 18px;
    height: 18px;
  }

  /* La signature tient dans l'en-tête étroit : moins d'interlettrage, pas de
     troncature du nom de la maison. */
  .wordmark {
    letter-spacing: 0.2em;
  }

  label:has(> input[type='checkbox']),
  label:has(> input[type='radio']) {
    min-height: 44px;
  }
}

/*
 * Impression. Le document de devis (`.print-only`) n'existe que sur papier :
 * il est retiré de l'écran et l'interface (`.print-hide`, `.no-print`) est
 * retirée du papier. Sans cette règle, le devis s'affiche à la suite du
 * tableau de bord.
 */
.print-only {
  display: none;
}

@media print {
  .pms-fold {
    content-visibility: visible;
  }

  @page {
    size: A4;
    margin: 16mm 15mm 18mm;
  }

  html,
  body {
    background: #fff !important;
    color: #111;
    font-family: var(--font-montserrat), Montserrat, Arial, sans-serif;
  }

  .no-print,
  .print-hide {
    display: none !important;
  }

  .print-only {
    display: block !important;
    color: #111;
    font-size: 10.5pt;
    line-height: 1.45;
  }

  /* Sur papier, la hiérarchie vient de la graisse et du filet, pas du gris. */
  .print-only .label-caps {
    color: #111 !important;
    font-size: 8pt;
    letter-spacing: 0.1em;
  }

  .print-only .text-neutral-500,
  .print-only .text-neutral-600 {
    color: #444 !important;
  }

  .print-only .display {
    color: #111;
  }

  .print-only table {
    width: 100%;
    border-collapse: collapse;
  }

  .print-only th,
  .print-only td {
    padding-top: 4pt;
    padding-bottom: 4pt;
  }

  .print-only tr,
  .print-only thead {
    -moz-column-break-inside: avoid;
         break-inside: avoid;
  }

  /* Bloc des totaux : plus large sur papier pour qu'aucun montant ne se
     coupe de son libellé. */
  .print-only .w-64 {
    width: 92mm;
    -moz-column-break-inside: avoid;
         break-inside: avoid;
    page-break-inside: avoid;
  }

  .print-only .w-64 > div > span:last-child {
    white-space: nowrap;
  }
}

/* ==========================================================================
   JARVIS — le réseau de la maison, flottant dans une galaxie
   ==========================================================================
   Un seul jeu de jetons, posé sur `.jarvis-shell`, lu par le Canvas et par le
   DOM : la carte, les panneaux, les contrôles, les infobulles et les neurones
   ne peuvent donc pas diverger.

   Le module suit le thème du poste : crème (défaut, plat d'astronome) ou
   encre (nuit du poste). Le rendu Canvas relit les jetons à chaque bascule.
   Encre: la nuit de l'espace — profonds bleus, lueurs, additif. Crème: une
   planche d'observatoire — papiers chauds, encres profondes, encre sépia.
   -------------------------------------------------------------------------- */

/* Le Canva du graphe : ni sélection de texte, ni menu contextuel de navigateur. */
.jv-canvas {
  display: block;
  width: 100%;
  height: 100%;
  cursor: grab;
  touch-action: none;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  background-color: #04070f;
}

/* Le volume du réseau reste dans la nuit : quel que soit le thème du poste,
   crème ou encre, le ciel du volume et ses surcouches (HUD, infobulle, zoom,
   liste de repli) portent toujours la palette encre. Les jetons sont repris
   du thème nuit — même sémantique, même source que le Canvas. */
.jv-sky {
  color-scheme: dark;
  /* Le ciel n'a pas de fond : la toile le peint, et ses bords se fondent dans
     la page. Un fond opaque ferait un écran posé sur la carte. */
  background-color: transparent;
  --jv-canvas: #050a14;
  --jv-panel: #0a1120;
  --jv-raised: #0e1a2c;
  --jv-inset: #070e1a;
  --jv-rule: #16263c;
  --jv-rule-strong: #26425f;
  --jv-plate: #04070f;
  --jv-ink: #e9f2ff;
  --jv-soft: #bacbe4;
  --jv-mute: #8499b8;
  --jv-faint: #6f85a3;
  --jv-brass: #f0c987;
  --jv-bronze: #d9ac6b;
  --jv-signal: #74e0ff;
  --jv-signal-soft: #3aa8c9;
  --jv-signal-ink: #03121a;
}

/* ==========================================================================
   LES DEUX CIELS, POSÉS DANS LA PAGE
   ==========================================================================
   Ni planche, ni barre d'instruments, ni repères de visée : l'Œil comme la
   galaxie occupent la carte de bord à bord et leurs bords se dissolvent dans
   le papier (ou dans la nuit). On ne regarde pas un instrument posé sur le
   PMS : on regarde par la fenêtre de la maison.
   -------------------------------------------------------------------------- */

.jv-eye {
  position: relative;
  width: 100%;
}

/* Le ciel lui-même ne peint rien : seule la toile, masquée, se fond. */
.jv-eye-stage {
  background-color: transparent;
  isolation: isolate;
}

/* Les deux ciels — l'Œil et la galaxie — se fondent de la même façon :
   quelques pour cent de chaque bord s'effacent dans la carte. */
.jv-blend-canvas {
  -webkit-mask-image:
    linear-gradient(to bottom, transparent 0%, #000 5%, #000 95%, transparent 100%),
    linear-gradient(to right, transparent 0%, #000 3%, #000 97%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to bottom, transparent 0%, #000 5%, #000 95%, transparent 100%),
    linear-gradient(to right, transparent 0%, #000 3%, #000 97%, transparent 100%);
  -webkit-mask-composite: source-in, xor;
          mask-composite: intersect;
}

/* Sur le papier, la nuit ne se dissout pas : un fondu large sur du crème
   fabrique un halo gris qui cercle l'image et se lit comme un cadre flou —
   plus le fondu s'élargit, plus la brume est visible. On garde donc le
   plateau sombre aligné sur la colonne et on n'adoucit que les derniers
   pixels (8 px en haut et en bas, 6 px sur les côtés) : le bord d'un tirage
   posé sur la feuille, pas une fumée. Le thème encre, où la nuit se fond
   déjà dans la nuit, garde son fondu en pourcentage.

   `:where()` laisse cette règle au même poids que la base, donc le plein
   écran (`mask-image: none`) continue de l'emporter. */
:where(html:not([data-theme='ink'])) .jv-blend-canvas {
  --jv-edge-y: 8px;
  --jv-edge-x: 6px;
  --jv-edge-mask:
    linear-gradient(
      to bottom,
      transparent 0,
      rgb(0 0 0 / 0.2) calc(var(--jv-edge-y) * 0.3),
      rgb(0 0 0 / 0.62) calc(var(--jv-edge-y) * 0.62),
      rgb(0 0 0 / 0.9) calc(var(--jv-edge-y) * 0.85),
      #000 var(--jv-edge-y),
      #000 calc(100% - var(--jv-edge-y)),
      rgb(0 0 0 / 0.9) calc(100% - var(--jv-edge-y) * 0.85),
      rgb(0 0 0 / 0.62) calc(100% - var(--jv-edge-y) * 0.62),
      rgb(0 0 0 / 0.2) calc(100% - var(--jv-edge-y) * 0.3),
      transparent 100%
    ),
    linear-gradient(
      to right,
      transparent 0,
      rgb(0 0 0 / 0.2) calc(var(--jv-edge-x) * 0.3),
      rgb(0 0 0 / 0.62) calc(var(--jv-edge-x) * 0.62),
      rgb(0 0 0 / 0.9) calc(var(--jv-edge-x) * 0.85),
      #000 var(--jv-edge-x),
      #000 calc(100% - var(--jv-edge-x)),
      rgb(0 0 0 / 0.9) calc(100% - var(--jv-edge-x) * 0.85),
      rgb(0 0 0 / 0.62) calc(100% - var(--jv-edge-x) * 0.62),
      rgb(0 0 0 / 0.2) calc(100% - var(--jv-edge-x) * 0.3),
      transparent 100%
    );
  -webkit-mask-image: var(--jv-edge-mask);
  mask-image: var(--jv-edge-mask);
}

/* L'Œil contemple : il ne se saisit pas comme la galaxie. Sa toile reste
   nuit tant que ses nuanceurs se compilent, puis s'allume en fondu. */
.jv-eye-canvas {
  cursor: default;
  opacity: 0;
  transition: opacity 480ms ease-out;
}
.jv-eye-canvas[data-ready='true'] {
  opacity: 1;
}

/* Le plein écran : discret, il n'apparaît qu'au survol ou au clavier. */
.jv-eye-control {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 20;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 1px solid rgb(233 242 255 / 0.16);
  border-radius: 999px;
  background: rgb(4 7 15 / 0.3);
  color: rgb(233 242 255 / 0.72);
  backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity 0.35s ease, border-color 0.3s ease, color 0.3s ease, background-color 0.3s ease;
}
.jv-eye:hover .jv-eye-control,
.jv-eye-control:focus-visible {
  opacity: 1;
}
.jv-eye-control:hover {
  border-color: rgb(240 201 135 / 0.6);
  background: rgb(4 7 15 / 0.5);
  color: rgb(240 201 135);
}
/* Écran tactile : pas de survol, le bouton reste là. */
@media (hover: none) {
  .jv-eye-control {
    opacity: 1;
  }
}

.jv-canvas[data-dragging='true'] {
  cursor: grabbing;
}

.jv-canvas[data-hover='true'] {
  cursor: pointer;
}

/* ==========================================================================
   LE RÉSEAU EN PLEIN ÉCRAN
   ==========================================================================
   La carte des connaissances prend la fenêtre entière : l'en-tête collant de
   la page passe dessous (la coque monte au-dessus de lui), le corps cesse de
   défiler, et la feuille de consigne reste au pied — on regarde le réseau ET
   on lui parle, sans quitter l'écran.

   Ces règles vivent hors des couches Tailwind : le cadre plein écran doit
   l'emporter sur les hauteurs et les paddings utilitaires, sans `!important`.
   -------------------------------------------------------------------------- */
.jarvis-shell[data-immersive='true'] {
  position: relative;
  z-index: 40;
}

.jv-immersive {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  flex-direction: column;
  width: 100vw;
  height: 100dvh;
  border: 0;
  border-radius: 0;
  background: var(--jv-panel);
  box-shadow: none;
  backdrop-filter: none;
}

.jv-immersive > .jv-card-head {
  flex: none;
}

.jv-immersive .jv-plate {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  width: 100%;
  min-height: 0;
  border: 0;
}

.jv-immersive .jv-plate > .relative {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
}

.jv-immersive .jv-sky {
  flex: 1 1 auto;
  height: auto;
  min-height: 0;
  /* Rien de ce qui est posé sur le ciel ne sort du cadre de la galaxie. */
  overflow: hidden;
}

/* Plein écran : la carte n'existe plus, le ciel prend tout — pour l'Œil
   comme pour la galaxie. */
.jv-immersive > .jv-stage-wrap {
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
}

.jv-immersive > .jv-stage-wrap .jv-eye {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
}

.jv-immersive > .jv-stage-wrap .jv-eye-stage {
  flex: 1 1 auto;
  height: auto;
  min-height: 0;
}

.jv-immersive .jv-blend-canvas {
  -webkit-mask-image: none;
  mask-image: none;
}

.jv-immersive .jv-command {
  flex: none;
  overflow-y: auto;
  max-height: 46dvh;
}

/* Le corps de l'aperçu : sa hauteur vient de la poignée (inline), jamais
   d'un format figé ; ces bornes ne sont que le garde-fou du rendu. */
.jv-preview-body {
  min-height: 220px;
  max-height: 78dvh;
  overflow-y: auto;
  overscroll-behavior: contain;
}
/* Onglet Rendu : le cadre prend toute la place, le corps ne défile pas. */
.jv-preview-body--fill {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Plein écran avec l'aperçu : le réseau et la consigne à gauche, l'aperçu
   d'Aziz en colonne pleine hauteur à droite. La grille ne déplace pas la
   carte dans le DOM : la galaxie n'est jamais remontée en ouvrant l'aperçu. */
.jv-immersive[data-preview='true'] {
  display: grid;
  /* La largeur vient de la poignée (usePaneResize). Le clamp est la dernière
     ligne de défense : même une valeur mémorisée hors bornes reste saine. */
  /* Jusqu'à presque toute la fenêtre : 360 px restent à la vue de gauche
     (même valeur que PREVIEW_KEEP_LEFT dans JarvisConsole). */
  grid-template-columns: minmax(360px, 1fr) clamp(300px, var(--jv-preview-w, 42vw), calc(100vw - 360px));
  grid-template-rows: auto minmax(0, 1fr) auto;
  position: relative;
}
.jv-immersive[data-preview='true'] > .jv-card-head {
  grid-column: 1 / -1;
}
.jv-immersive[data-preview='true'] > .jv-stage-wrap {
  grid-column: 1;
  grid-row: 2;
}
.jv-immersive[data-preview='true'] > .jv-command {
  grid-column: 1;
  grid-row: 3;
}
.jv-immersive-preview {
  position: relative;
  grid-column: 2;
  grid-row: 2 / 4;
  display: flex;
  flex-direction: column;
  min-height: 0;
  border-left: 1px solid var(--jv-rule);
  animation: fade-in 180ms ease-out both;
}
.jv-immersive-preview > .jv-card {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.jv-immersive-preview .jv-preview-body {
  flex: 1 1 auto;
  height: auto;
  max-height: none;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
/* Le rendu de l'atelier prend toute la hauteur libre de la colonne. */
.jv-immersive-preview .jv-preview-stage {
  flex: 1 1 auto;
  height: auto;
  min-height: 320px;
}
/* La scène d'un appareil : la page y est rendue à sa vraie largeur, puis
   réduite pour tenir dans le panneau (sans barre de défilement parasite). */
.jv-preview-stage {
  position: relative;
}

/* Le canevas en plein cadre : la planche passe au « top layer » du navigateur
   (popover manuel) sans changer d'élément. Fermée, elle reste une planche
   ordinaire — les styles que le navigateur pose sur [popover] (bordure, marge
   auto, taille au contenu) sont neutralisés ici. */
.jv-preview-stage[popover] {
  inset: auto;
  width: auto;
  height: auto;
  margin: 0;
  padding: 0;
  border: 0;
  color: inherit;
}
.jv-preview-stage[popover]:popover-open {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  max-width: none;
  max-height: none;
  margin: 0;
  border-radius: 0;
  z-index: 9000;
}
.jv-preview-stage.jv-stage--immersed {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  max-width: none;
  max-height: none;
  margin: 0;
  border-radius: 0;
  z-index: 9000;
}
.jv-preview-stage[popover]::backdrop {
  background: transparent;
}
/* Le bouton Échap du plein cadre se clique (la pastille ordinaire ne l'est pas). */
.jv-canvas-tag--live {
  pointer-events: auto;
}

/* Tablette, mobile : l'écran simulé porte un fin cadre d'appareil. */
.jv-device > iframe {
  border-radius: 14px;
  box-shadow: 0 0 0 6px var(--jv-plate), 0 0 0 7px var(--jv-rule-strong), 0 18px 40px -18px rgba(0, 0, 0, 0.7);
}

/* La grille de composition du canevas : tiers, axes, marges de 6 %. */
.jv-canvas-grid {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(to right, transparent calc(33.333% - 0.5px), rgba(116, 224, 255, 0.45) calc(33.333% - 0.5px), rgba(116, 224, 255, 0.45) calc(33.333% + 0.5px), transparent calc(33.333% + 0.5px)),
    linear-gradient(to right, transparent calc(66.666% - 0.5px), rgba(116, 224, 255, 0.45) calc(66.666% - 0.5px), rgba(116, 224, 255, 0.45) calc(66.666% + 0.5px), transparent calc(66.666% + 0.5px)),
    linear-gradient(to bottom, transparent calc(33.333% - 0.5px), rgba(116, 224, 255, 0.45) calc(33.333% - 0.5px), rgba(116, 224, 255, 0.45) calc(33.333% + 0.5px), transparent calc(33.333% + 0.5px)),
    linear-gradient(to bottom, transparent calc(66.666% - 0.5px), rgba(116, 224, 255, 0.45) calc(66.666% - 0.5px), rgba(116, 224, 255, 0.45) calc(66.666% + 0.5px), transparent calc(66.666% + 0.5px)),
    linear-gradient(to right, transparent calc(50% - 0.5px), rgba(116, 224, 255, 0.22) calc(50% - 0.5px), rgba(116, 224, 255, 0.22) calc(50% + 0.5px), transparent calc(50% + 0.5px)),
    linear-gradient(to bottom, transparent calc(50% - 0.5px), rgba(116, 224, 255, 0.22) calc(50% - 0.5px), rgba(116, 224, 255, 0.22) calc(50% + 0.5px), transparent calc(50% + 0.5px));
}
.jv-canvas-grid::after {
  content: '';
  position: absolute;
  inset: 6%;
  border: 1px dashed rgba(116, 224, 255, 0.4);
}
.jv-canvas-tag,
.jv-canvas-tag--on {
  background: rgba(4, 7, 15, 0.78);
  border: 1px solid var(--jv-rule-strong);
  color: var(--jv-soft);
  pointer-events: none;
}
.jv-canvas-tag--on {
  color: var(--jv-signal);
  border-color: var(--jv-signal-soft);
}
.jv-chipbtn[aria-pressed='true'] {
  color: var(--jv-signal);
  border-color: var(--jv-signal-soft);
}

/* --- Le Navigateur, comme dans Claude Desktop ---------------------------- */

/* L'icône du site dans l'onglet. */
.jv-favicon {
  width: 12px;
  height: 12px;
  flex: none;
  border-radius: 2px;
  -o-object-fit: contain;
     object-fit: contain;
}

/* Les repères @n : les commandes de la page, numérotées comme Aziz les lit. */
.jv-ref {
  position: absolute;
  pointer-events: none;
  border: 1px solid rgba(0, 216, 246, 0.75);
  border-radius: 3px;
  box-shadow: inset 0 0 0 1px rgba(4, 7, 15, 0.35);
}
.jv-ref > b {
  position: absolute;
  left: -1px;
  top: -1px;
  transform: translateY(-100%);
  min-width: 16px;
  padding: 0 3px;
  border-radius: 3px 3px 3px 0;
  background: #00d8f6;
  color: #04131a;
  font: 600 9px/14px ui-monospace, SFMono-Regular, Menlo, monospace;
  text-align: center;
  white-space: nowrap;
}

/* Le curseur d'Aziz : là où sa main vient de se poser, 1,8 s. */
.jv-aziz-cursor {
  position: absolute;
  pointer-events: none;
  z-index: 3;
  width: 0;
  height: 0;
  animation: jv-aziz-fade 1.8s ease-out both;
}
.jv-aziz-ring {
  position: absolute;
  left: -14px;
  top: -14px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid #00d8f6;
  opacity: 0.9;
  animation: jv-aziz-ring 0.9s ease-out both;
}
.jv-aziz-cursor--hover .jv-aziz-ring {
  border-style: dashed;
}
.jv-aziz-cursor--type .jv-aziz-ring {
  border-radius: 4px;
  animation: none;
  opacity: 0.6;
}
.jv-aziz-pointer {
  position: absolute;
  left: -2px;
  top: -2px;
  width: 18px;
  height: 18px;
  color: #00d8f6;
  fill: rgba(4, 7, 15, 0.9);
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.6));
}
.jv-aziz-cursor > em {
  position: absolute;
  left: 16px;
  top: 14px;
  max-width: 260px;
  padding: 2px 7px;
  border-radius: 4px;
  background: rgba(4, 7, 15, 0.92);
  border: 1px solid rgba(0, 216, 246, 0.55);
  color: #e6f9fd;
  font: 500 10.5px/1.4 system-ui, sans-serif;
  font-style: normal;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.jv-aziz-box {
  position: absolute;
  border: 1.5px solid rgba(0, 216, 246, 0.85);
  border-radius: 3px;
  background: rgba(0, 216, 246, 0.08);
}
@keyframes jv-aziz-ring {
  from {
    transform: scale(0.4);
    opacity: 1;
  }
  to {
    transform: scale(1.6);
    opacity: 0;
  }
}
@keyframes jv-aziz-fade {
  0%,
  70% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

/* La barre d'état : le lien sous la souris, le moteur, la fenêtre simulée. */
.jv-statusbar {
  display: flex;
  flex: none;
  align-items: center;
  gap: 10px;
  min-height: 22px;
  padding: 2px 4px 0;
  border-top: 1px solid var(--jv-rule);
  font: 10.5px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--jv-faint);
}
.jv-statusbar > .jv-status-main {
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--jv-soft);
}

/* La console de la page : erreurs, avertissements, requêtes en échec. */
.jv-console {
  display: flex;
  flex-direction: column;
  flex: none;
  height: clamp(96px, 30%, 168px);
  border-top: 1px solid var(--jv-rule);
  background: var(--jv-inset);
  font: 10.5px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace;
}
.jv-console-head {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 6px;
  border-bottom: 1px solid var(--jv-rule);
  font-family: system-ui, sans-serif;
  font-size: 11px;
}
.jv-console-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  padding: 2px 6px;
}
.jv-console-line {
  display: flex;
  gap: 8px;
  padding: 1px 0;
  border-bottom: 1px dotted var(--jv-rule);
  color: var(--jv-soft);
  word-break: break-word;
}
.jv-console-line > time {
  flex: none;
  color: var(--jv-mute);
}
.jv-console-line--error {
  color: var(--jv-warn);
}
.jv-console-line--warn {
  color: var(--jv-soft);
}
.jv-console-line > .src {
  margin-left: auto;
  flex: none;
  max-width: 34%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--jv-mute);
}

/* Un menu posé sous un bouton (capture, onglet). */
.jv-menu {
  position: absolute;
  z-index: 30;
  min-width: 200px;
  padding: 4px;
  border: 1px solid var(--jv-rule-strong);
  border-radius: 8px;
  background: var(--jv-raised);
  box-shadow: 0 14px 34px -14px rgba(0, 0, 0, 0.65);
  animation: fade-in 120ms ease-out both;
}
.jv-menu > button,
.jv-menu > a {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 5px;
  font-size: 11.5px;
  color: var(--jv-soft);
  text-align: left;
}
.jv-menu > button:hover,
.jv-menu > a:hover {
  background: var(--jv-inset);
  color: var(--jv-ink);
}
.jv-menu > button:disabled {
  opacity: 0.4;
  pointer-events: none;
}
.jv-menu > hr {
  margin: 4px 2px;
  border: 0;
  border-top: 1px solid var(--jv-rule);
}
.jv-menu > p {
  padding: 2px 8px 4px;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--jv-mute);
}

/* Le panneau latéral du Navigateur : plan, historique, favoris. */
.jv-side {
  width: 230px;
  flex: none;
  overflow-y: auto;
  border-left: 1px solid var(--jv-rule);
  padding-left: 8px;
  font-size: 11px;
}
.jv-side-row {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  min-width: 0;
  padding: 3px 2px;
  border-radius: 4px;
  text-align: left;
  color: var(--jv-soft);
}
.jv-side-row:hover {
  background: var(--jv-inset);
  color: var(--jv-ink);
}
.jv-side-row > .t {
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.jv-side-row > .h {
  flex: none;
  max-width: 40%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font: 10px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--jv-faint);
}

/* --- Les poignées (components/jarvis/usePaneResize.ts) -------------------
   Un vrai affordance : une ligne discrète qui s'allume au survol et reste
   visible au clavier. 10 px de prise, 3 px de trait. */
.jv-grip {
  touch-action: none;
  background: transparent;
  transition: background 140ms ease-out, box-shadow 140ms ease-out;
}
.jv-grip::after {
  content: '';
  position: absolute;
  border-radius: 999px;
  background: var(--jv-rule);
  transition: background 140ms ease-out, transform 140ms ease-out;
}
.jv-grip:hover::after,
.jv-grip:focus-visible::after,
.jv-grip[data-active='true']::after {
  background: var(--jv-accent, var(--jv-ink));
}
.jv-grip:focus-visible {
  outline: 2px solid var(--jv-accent, var(--jv-ink));
  outline-offset: -2px;
}
/* Colonne de droite : la poignée est sur son bord gauche. */
.jv-grip-x {
  position: absolute;
  top: 0;
  bottom: 0;
  left: -5px;
  z-index: 5;
  width: 10px;
  cursor: col-resize;
}
.jv-grip-x::after {
  top: 50%;
  left: 4px;
  width: 2px;
  height: 44px;
  transform: translateY(-50%);
}
.jv-grip-x:hover::after,
.jv-grip-x[data-active='true']::after {
  height: 72px;
}
/* Panneau empilé : la poignée est sous son corps. */
.jv-grip-y {
  position: relative;
  flex: none;
  height: 10px;
  cursor: row-resize;
  border-top: 1px solid transparent;
}
.jv-grip-y::after {
  bottom: 2px;
  left: 50%;
  width: 44px;
  height: 3px;
  transform: translateX(-50%);
}
.jv-grip-y:hover::after,
.jv-grip-y[data-active='true']::after {
  width: 72px;
}
/* Pendant le geste : aucun texte sélectionné, le curseur ne clignote plus. */
body[data-jv-resizing] {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
body[data-jv-resizing='x'] {
  cursor: col-resize;
}
body[data-jv-resizing='y'] {
  cursor: row-resize;
}
body[data-jv-resizing] * {
  cursor: inherit !important;
}

/* Écran étroit : l'aperçu passe sous le réseau, la consigne reste en bas. */
@media (max-width: 900px) {
  .jv-immersive[data-preview='true'] {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr) minmax(0, 42dvh) auto;
  }
  .jv-immersive[data-preview='true'] > .jv-command {
    grid-row: 4;
  }
  .jv-immersive-preview {
    grid-column: 1;
    grid-row: 3;
    border-left: 0;
    border-top: 1px solid var(--jv-rule);
  }
  .jv-immersive-preview .jv-preview-stage {
    min-height: 200px;
  }
  /* Empilé, la largeur n'a plus de sens : la poignée horizontale disparaît. */
  .jv-grip-x {
    display: none;
  }
  .jv-immersive[data-preview='true'] .jv-command {
    max-height: 30dvh;
  }
}

@media (prefers-reduced-motion: reduce) {
  .jv-immersive-preview {
    animation: none;
  }
}

/* ==========================================================================
   JARVIS — planche du graphe, filtres et feuille de commande
   ==========================================================================
   Compléments au thème papier : la planche (surface du graphe), les puces de
   famille et le marqueur de mesure. Mêmes jetons `--jv-*`, donc un seul dessin
   pour le crème et l'encre.
   -------------------------------------------------------------------------- */

@keyframes jv-pulse {
  0%,
  100% {
    opacity: 0.35;
    transform: scale(0.82);
  }
  50% {
    opacity: 1;
    transform: scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .jv-live {
    animation: none;
  }
}


/* ==========================================================================
   AZIZ — le fil de la conversation (direct)
   ========================================================================== */


/* --------------------------------------------------------------------------
   Montants en « font-mono » : la même rigueur que les tableaux — Montserrat à
   chiffres tabulaires — sauf dans la console d'Aziz et les blocs de code, qui
   gardent leur vraie chasse fixe. Placé après les utilitaires : prioritaire.
   -------------------------------------------------------------------------- */
.font-mono:not(:where(.jarvis-shell *, pre, pre *, code, code *)) {
  font-family: var(--font-figures), var(--font-montserrat), Montserrat, 'Helvetica Neue', Arial, sans-serif;
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: 'tnum' 1, 'lnum' 1;
  font-weight: 500;
  letter-spacing: -0.005em;
}

/* Le logo officiel : noir sur transparent en papier, inversé en encre. */
html[data-theme='ink'] .brand-logo {
  filter: invert(1) brightness(0.96);
}

/* ==========================================================================
   LE SCEAU D'AZIZ — le bijou du coin (components/jarvis/AzizPill)
   ==========================================================================
   Au repos, l'Œil seul dans l'angle : ni plaque, ni cadre, rien qui masque un
   élément du PMS. Au survol, au clavier, ou dès qu'Aziz s'éveille, le nom,
   l'état et les mains libres se déploient vers la gauche. Une lueur fait le
   tour du sceau quand il veille ; le halo et le filet sous le libellé sont
   pilotés par la boucle rAF du composant (opacité / transform seulement).
   -------------------------------------------------------------------------- */

@property --aziz-angle {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}

/* Le socle : ancré au coin, il ne capte le pointeur que sur ses boutons. */
.aziz-dock {
  --aziz-gutter: clamp(10px, 1.6vw, 22px);
  position: fixed;
  right: var(--aziz-gutter);
  bottom: var(--aziz-gutter);
  z-index: 50;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-end;
  gap: 10px;
  isolation: isolate;
  pointer-events: none;
}

.aziz-body {
  pointer-events: auto;
  display: flex;
  align-items: center;
  padding: 3px;
  border: 1px solid transparent;
  border-radius: 999px;
  transition:
    background-color 0.45s ease,
    border-color 0.45s ease,
    box-shadow 0.45s ease;
}

/* Éveillé, survolé ou au clavier : le bijou s'habille d'un verre de la maison. */
.aziz-dock[data-awake='true'] .aziz-body,
.aziz-dock:hover .aziz-body,
.aziz-dock:focus-within .aziz-body {
  border-color: rgb(var(--rule-strong) / 0.55);
  background: rgb(var(--paper-card) / 0.72);
  box-shadow: 0 22px 46px -30px rgba(28, 18, 10, 0.55);
  backdrop-filter: blur(14px) saturate(1.05);
}
html[data-theme='ink'] .aziz-dock[data-awake='true'] .aziz-body,
html[data-theme='ink'] .aziz-dock:hover .aziz-body,
html[data-theme='ink'] .aziz-dock:focus-within .aziz-body {
  background: rgb(var(--paper-card) / 0.62);
  box-shadow: 0 22px 50px -28px rgba(0, 0, 0, 0.9);
}

.aziz-open {
  display: flex;
  align-items: center;
  height: 44px;
  padding: 0 2px 0 0;
  border: 0;
  border-radius: 999px;
  background: none;
  color: inherit;
  text-align: left;
  cursor: pointer;
  outline: none;
}
.aziz-open.is-here {
  cursor: default;
}
.aziz-open:focus-visible {
  box-shadow: 0 0 0 1px rgb(var(--accent-500) / 0.85);
}

/* --- Le sceau ------------------------------------------------------------- */
.aziz-seal {
  position: relative;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 999px;
}

/* Le filet du sceau. */
.aziz-seal::before {
  content: '';
  position: absolute;
  inset: 1px;
  border-radius: inherit;
  border: 1px solid rgb(var(--ink-faint) / 0.24);
  transition: border-color 0.5s ease, box-shadow 0.5s ease;
}
.aziz-dock[data-awake='true'] .aziz-seal::before {
  border-color: rgb(var(--accent-500) / 0.45);
  box-shadow: 0 0 22px -6px rgb(var(--accent-500) / 0.55);
}

/* La lueur qui parcourt le filet du sceau. */
.aziz-halo {
  position: absolute;
  inset: -4px;
  border-radius: inherit;
  padding: 1px;
  pointer-events: none;
  background: conic-gradient(
    from var(--aziz-angle),
    transparent 0 62%,
    rgb(var(--accent-500) / 0.15) 74%,
    rgb(var(--accent-500)) 88%,
    rgb(var(--accent-300)) 91%,
    transparent 95%
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.8s ease;
  animation: aziz-orbit 5.5s linear infinite;
}
.aziz-dock[data-awake='true'] .aziz-halo {
  opacity: 0.9;
}
.aziz-dock[data-mode='hearing'] .aziz-halo,
.aziz-dock[data-mode='speaking'] .aziz-halo {
  opacity: 1;
  animation-duration: 3.2s;
}
.aziz-dock[data-mode='thinking'] .aziz-halo {
  animation-duration: 1.8s;
}

@keyframes aziz-orbit {
  to {
    --aziz-angle: 360deg;
  }
}

/* Le halo, derrière le sceau et le libellé. */
.aziz-aura {
  position: absolute;
  right: -6px;
  bottom: -8px;
  width: 150px;
  height: 104px;
  z-index: -1;
  pointer-events: none;
  opacity: 0;
  transform-origin: 86% 70%;
  background: radial-gradient(closest-side, rgb(var(--accent-500) / 0.24), rgb(var(--accent-500) / 0.07) 62%, transparent);
  will-change: opacity, transform;
}

/* L'onde du réveil. */
.aziz-ripple {
  position: absolute;
  inset: 2px;
  border: 1px solid rgb(var(--accent-500));
  border-radius: 9999px;
  pointer-events: none;
  animation: aziz-ripple 1.1s cubic-bezier(0.2, 0.7, 0.2, 1) forwards;
}
@keyframes aziz-ripple {
  from {
    transform: scale(0.6);
    opacity: 0.9;
  }
  to {
    transform: scale(2.4);
    opacity: 0;
  }
}

/* --- Le libellé, replié au repos -----------------------------------------
   Largeur nulle : le sceau seul tient le coin. Le nom ne s'ouvre qu'au
   survol, au clavier, ou quand Aziz veille — jamais au détriment du PMS. */
.aziz-words {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  width: 0;
  min-width: 0;
  margin-left: 0;
  padding: 0;
  overflow: hidden;
  white-space: nowrap;
  opacity: 0;
  transform: translateX(6px);
  transition:
    width 0.52s cubic-bezier(0.2, 0.8, 0.2, 1),
    margin-left 0.52s cubic-bezier(0.2, 0.8, 0.2, 1),
    opacity 0.3s ease,
    transform 0.52s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.aziz-dock[data-awake='true'] .aziz-words,
.aziz-dock:hover .aziz-words,
.aziz-dock:focus-within .aziz-words {
  width: 7.6rem;
  margin-left: 8px;
  opacity: 1;
  transform: none;
}

/* Le mot qui change : il se dépose, de flou à net. */
.aziz-status {
  animation: aziz-word 0.55s cubic-bezier(0.2, 0.8, 0.2, 1);
  font-family: var(--font-display), 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-size: 17px;
  line-height: 19px;
  color: rgb(var(--ink-mute));
  transition: color 0.5s ease;
}
.aziz-status.is-awake {
  color: rgb(var(--ink));
}
@keyframes aziz-word {
  from {
    opacity: 0;
    filter: blur(4px);
    transform: translateY(3px);
    letter-spacing: 0.06em;
  }
  to {
    opacity: 1;
    filter: blur(0);
    transform: none;
    letter-spacing: normal;
  }
}

/* Le filet sous le libellé : la voix, en une ligne. */
.aziz-filet {
  display: block;
  height: 1px;
  width: 100%;
  margin-top: 4px;
  transform-origin: left center;
  background: linear-gradient(90deg, rgb(var(--accent-500)), rgb(var(--accent-300) / 0.7) 70%, transparent);
  transform: scaleX(0.2);
  will-change: transform;
}
.aziz-dock[data-mode='off'] .aziz-filet {
  background: rgb(var(--ink-faint) / 0.45);
}

/* Le nom : l'enseigne de la maison (Rollgates, capitales Art déco). */
.aziz-name {
  font-family: var(--font-brand), var(--font-montserrat), Montserrat, sans-serif;
  font-size: 10.5px;
  line-height: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgb(var(--ink-faint));
}

/* --- Les mains libres -----------------------------------------------------
   Replié au repos avec le libellé : un seul bijou dans l'angle, pas une barre. */
.aziz-toggle {
  display: grid;
  place-items: center;
  width: 0;
  height: 34px;
  margin-left: 0;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 999px;
  overflow: hidden;
  visibility: hidden;
  opacity: 0;
  transform: scale(0.8);
  color: rgb(var(--ink-soft));
  background: transparent;
  cursor: pointer;
  outline: none;
  transition:
    width 0.45s cubic-bezier(0.2, 0.8, 0.2, 1),
    margin-left 0.45s cubic-bezier(0.2, 0.8, 0.2, 1),
    opacity 0.3s ease,
    transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1),
    border-color 0.3s ease,
    background-color 0.3s ease,
    color 0.3s ease;
}
.aziz-dock[data-awake='true'] .aziz-toggle,
.aziz-dock:hover .aziz-toggle,
.aziz-dock:focus-within .aziz-toggle {
  width: 34px;
  margin-left: 2px;
  border-color: rgb(var(--rule-strong) / 0.6);
  visibility: visible;
  opacity: 1;
  transform: none;
}
.aziz-toggle:hover {
  border-color: rgb(var(--accent-500) / 0.7);
  background: rgb(var(--accent-50));
  color: rgb(var(--accent-700));
}
.aziz-toggle.is-awake {
  color: rgb(var(--accent-700));
  border-color: rgb(var(--accent-500) / 0.55);
}
.aziz-toggle:focus-visible {
  box-shadow: 0 0 0 1px rgb(var(--accent-500));
}
/* La transcription : le même état que le bouton du plein écran. Allumée, le
   pictogramme prend l'accent ; l'aperçu, lui, se pose au-dessus du sceau. */
.aziz-captions.is-on {
  color: rgb(var(--accent-700));
  border-color: rgb(var(--accent-500) / 0.55);
  background: rgb(var(--accent-50) / 0.7);
}

/* --- L'aperçu du fil, au-dessus du sceau ----------------------------------
   Le verre de la maison (celui du socle éveillé), ourlé d'un filet. Les
   répliques en italique de papeterie, les noms en capitales de l'enseigne :
   l'aperçu est de la même étoffe que le sceau — ni une bulle, ni une console.
   Il ne prend le pointeur que lorsqu'il est visible, et seulement pour
   défiler. */
.aziz-transcript {
  position: relative;
  width: min(23rem, calc(100vw - 2 * var(--aziz-gutter)));
  max-height: 0;
  margin-right: 4px;
  border: 1px solid rgb(var(--rule-strong) / 0.55);
  border-radius: 14px;
  background: rgb(var(--paper-card) / 0.78);
  box-shadow: 0 24px 48px -30px rgba(28, 18, 10, 0.5);
  backdrop-filter: blur(16px) saturate(1.05);
  -webkit-backdrop-filter: blur(16px) saturate(1.05);
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px) scale(0.985);
  transform-origin: 90% 100%;
  pointer-events: none;
  transition:
    max-height 0.5s cubic-bezier(0.2, 0.8, 0.2, 1),
    opacity 0.32s ease,
    transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1),
    visibility 0s linear 0.5s;
}
.aziz-transcript[data-shown='true'] {
  max-height: min(11.5em, 36vh);
  opacity: 1;
  visibility: visible;
  transform: none;
  pointer-events: auto;
  transition:
    max-height 0.55s cubic-bezier(0.2, 0.8, 0.2, 1),
    opacity 0.4s ease 0.05s,
    transform 0.55s cubic-bezier(0.2, 0.8, 0.2, 1),
    visibility 0s;
}
html[data-theme='ink'] .aziz-transcript {
  background: rgb(var(--paper-card) / 0.7);
  box-shadow: 0 24px 54px -28px rgba(0, 0, 0, 0.9);
}

.aziz-transcript-scroll {
  max-height: min(11.5em, 36vh);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 14px 16px 12px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  scrollbar-width: none;
  /* Le haut s'efface : on sent qu'il y a eu des mots avant. */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 1.4em, #000 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 1.4em, #000 100%);
}
.aziz-transcript-scroll::-webkit-scrollbar {
  display: none;
}

.aziz-transcript-line {
  margin: 0;
  display: grid;
  grid-template-columns: 3.6em minmax(0, 1fr);
  -moz-column-gap: 10px;
       column-gap: 10px;
  align-items: baseline;
  font-family: var(--font-display), 'Cormorant Garamond', Georgia, serif;
  font-size: 15px;
  line-height: 1.38;
  color: rgb(var(--ink));
  text-wrap: pretty;
  overflow-wrap: anywhere;
  transition:
    opacity 0.3s ease,
    font-size 0.3s ease;
}
.aziz-transcript-line[data-past='true'] {
  font-size: 13px;
  opacity: 0.62;
}
.aziz-transcript-line[data-who='aziz'] .aziz-transcript-text {
  font-style: italic;
  color: rgb(var(--accent-700));
}
.aziz-transcript-line[data-live='true'] .aziz-transcript-text::after {
  content: '';
  display: inline-block;
  width: 1px;
  height: 0.85em;
  margin-left: 3px;
  vertical-align: -0.1em;
  background: currentColor;
  animation: aziz-caret 1s steps(1) infinite;
}
@keyframes aziz-caret {
  50% {
    opacity: 0;
  }
}

.aziz-transcript-who {
  justify-self: end;
  font-family: var(--font-brand), var(--font-montserrat), Montserrat, sans-serif;
  font-size: 8.5px;
  line-height: 1;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgb(var(--ink-faint));
  white-space: nowrap;
  transform: translateY(-1px);
}
.aziz-transcript-line[data-who='aziz'] .aziz-transcript-who {
  color: rgb(var(--accent-500) / 0.85);
}

/* Le filet du bas : la même ligne que sous le libellé ; pleine quand épinglé. */
.aziz-transcript-filet {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgb(var(--accent-500) / 0.55) 30%, rgb(var(--accent-300) / 0.6) 70%, transparent);
  opacity: 0.45;
  transition: opacity 0.4s ease;
}
.aziz-transcript[data-pinned='true'] .aziz-transcript-filet {
  opacity: 1;
}

@media (max-width: 640px) {
  .aziz-transcript-line {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 2px;
  }
  .aziz-transcript-who {
    justify-self: start;
  }
}

@media (prefers-reduced-motion: reduce) {
  .aziz-halo,
  .aziz-ripple,
  .aziz-status {
    animation: none;
  }
  .aziz-words,
  .aziz-toggle,
  .aziz-body,
  .aziz-transcript,
  .aziz-transcript[data-shown='true'] {
    transition-duration: 0.01ms;
  }
}

/* ==========================================================================
   LA CONSTELLATION DE LA CONVERSATION (components/jarvis/LiveConstellation)
   ==========================================================================
   Posée en haut à gauche du ciel — l'Œil comme la galaxie, onglet ou plein
   écran. Pas de verre, pas de cadre : des étoiles et un fil sur la nuit. */

.jv-constel {
  position: absolute;
  left: clamp(10px, 2%, 22px);
  top: clamp(10px, 2.4%, 20px);
  z-index: 18;
  /* Les étoiles sont posées en absolu : le calque fixe lui-même sa largeur,
     sinon il se referme sur son titre et le casse en deux lignes. */
  width: min(320px, calc(100% - 96px));
  pointer-events: auto;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  color: var(--jv-soft, #bacbe4);
  font-family: Montserrat, system-ui, sans-serif;
  animation: jv-constel-in 420ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

@keyframes jv-constel-in {
  from { opacity: 0; transform: translateX(-6px); }
  to { opacity: 1; transform: none; }
}

.jv-constel-head {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0 0 2px 10px;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--jv-faint, #6f85a3);
}

.jv-constel-dot {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--jv-signal, #74e0ff);
  box-shadow: 0 0 10px var(--jv-signal, #74e0ff);
  animation: jv-constel-pulse 1.8s ease-in-out infinite;
}

@keyframes jv-constel-pulse {
  0%, 100% { opacity: 0.55; transform: scale(0.85); }
  50% { opacity: 1; transform: scale(1.1); }
}

.jv-constel-body {
  position: relative;
  transition: height 240ms ease;
}

.jv-constel-thread {
  position: absolute;
  left: 0;
  top: 0;
  overflow: visible;
}

.jv-constel-thread line {
  stroke: var(--jv-signal, #74e0ff);
  stroke-width: 1;
  stroke-dasharray: 3 4;
  opacity: 0.32;
}

.jv-constel-thread line[data-last='true'] {
  opacity: 0.7;
  animation: jv-constel-draw 600ms ease-out both;
}

@keyframes jv-constel-draw {
  from { stroke-dashoffset: 60; opacity: 0; }
  to { stroke-dashoffset: 0; opacity: 0.7; }
}

.jv-constel-star {
  position: absolute;
  left: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  height: 30px;
  padding: 0 10px 0 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: opacity 600ms ease;
  animation: jv-constel-arrive 520ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

@keyframes jv-constel-arrive {
  from { opacity: 0; transform: translateY(6px); }
  to { transform: none; }
}

.jv-constel-glyph {
  position: relative;
  display: grid;
  place-items: center;
  width: 16px;
  height: 16px;
  margin-left: calc(var(--jv-constel-x) - 8px);
  flex: none;
}

.jv-constel-core {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--jv-constel-c);
  box-shadow:
    0 0 6px var(--jv-constel-c),
    0 0 14px color-mix(in srgb, var(--jv-constel-c) 55%, transparent);
}

/* Un ensemble (« chambres sales · 7 ») : une étoile cernée, pas une seule. */
.jv-constel-star[data-ensemble='true'] .jv-constel-core {
  outline: 1px solid color-mix(in srgb, var(--jv-constel-c) 70%, transparent);
  outline-offset: 3px;
}

/* La dernière mention brûle : un anneau de signal qui s'ouvre une fois. */
.jv-constel-star[data-last='true'] .jv-constel-glyph::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 999px;
  border: 1px solid var(--jv-signal, #74e0ff);
  animation: jv-constel-ripple 1.6s ease-out both;
}

@keyframes jv-constel-ripple {
  from { opacity: 0.9; transform: scale(0.6); }
  to { opacity: 0; transform: scale(2.6); }
}

.jv-constel-label {
  font-size: 12px;
  line-height: 1.2;
  letter-spacing: 0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 230px;
  text-shadow: 0 1px 10px rgb(4 7 15 / 0.9), 0 0 2px rgb(4 7 15 / 0.9);
}

.jv-constel-star[data-last='true'] .jv-constel-label {
  color: var(--jv-ink, #e9f2ff);
}

/* Qui l'a dit : le directeur en douceur, Aziz dans la teinte du signal. */
.jv-constel-star[data-who='aziz'] .jv-constel-label {
  color: color-mix(in srgb, var(--jv-signal, #74e0ff) 70%, var(--jv-ink, #e9f2ff));
}

.jv-constel-star:hover .jv-constel-label,
.jv-constel-star:focus-visible .jv-constel-label {
  color: var(--jv-ink, #e9f2ff);
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--jv-signal, #74e0ff) 60%, transparent);
  text-underline-offset: 3px;
}

.jv-constel-star:focus-visible {
  outline: none;
}

@media (max-width: 640px) {
  .jv-constel-label { max-width: 150px; font-size: 11px; }
}

@media (prefers-reduced-motion: reduce) {
  .jv-constel, .jv-constel-star, .jv-constel-thread line[data-last='true'], .jv-constel-dot,
  .jv-constel-star[data-last='true'] .jv-constel-glyph::before { animation: none; }
}

.placeholder\:text-ink-faint::-moz-placeholder {
  --tw-text-opacity: 1;
  color: rgb(var(--ink-faint) / var(--tw-text-opacity));
}

.placeholder\:text-ink-faint::placeholder {
  --tw-text-opacity: 1;
  color: rgb(var(--ink-faint) / var(--tw-text-opacity));
}

.placeholder\:text-ink\/40::-moz-placeholder {
  color: rgb(var(--ink) / 0.4);
}

.placeholder\:text-ink\/40::placeholder {
  color: rgb(var(--ink) / 0.4);
}

.first\:border-t-0:first-child {
  border-top-width: 0px;
}

.first\:pt-0:first-child {
  padding-top: 0px;
}

.first\:pt-0\.5:first-child {
  padding-top: 0.125rem;
}

.last\:border-b-0:last-child {
  border-bottom-width: 0px;
}

.hover\:border:hover {
  border-width: 1px;
}

.hover\:border-ink-mute:hover {
  --tw-border-opacity: 1;
  border-color: rgb(var(--ink-mute) / var(--tw-border-opacity));
}

.hover\:border-rule-strong:hover {
  --tw-border-opacity: 1;
  border-color: rgb(var(--rule-strong) / var(--tw-border-opacity));
}

.hover\:bg-accent-500\/20:hover {
  background-color: rgb(var(--accent-500) / 0.2);
}

.hover\:bg-brand-deep:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--brand-deep) / var(--tw-bg-opacity));
}

.hover\:bg-crit\/20:hover {
  background-color: rgb(var(--crit) / 0.2);
}

.hover\:bg-ink-soft:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--ink-soft) / var(--tw-bg-opacity));
}

.hover\:bg-jv-inset:hover {
  background-color: var(--jv-inset);
}

.hover\:bg-ok\/20:hover {
  background-color: rgb(var(--ok) / 0.2);
}

.hover\:bg-paper:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--paper) / var(--tw-bg-opacity));
}

.hover\:bg-paper-card:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--paper-card) / var(--tw-bg-opacity));
}

.hover\:bg-paper-deep:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--paper-deep) / var(--tw-bg-opacity));
}

.hover\:bg-paper-deep\/60:hover {
  background-color: rgb(var(--paper-deep) / 0.6);
}

.hover\:bg-warn\/20:hover {
  background-color: rgb(var(--warn) / 0.2);
}

.hover\:text-accent-700:hover {
  --tw-text-opacity: 1;
  color: rgb(var(--accent-700) / var(--tw-text-opacity));
}

.hover\:text-ink:hover {
  --tw-text-opacity: 1;
  color: rgb(var(--ink) / var(--tw-text-opacity));
}

.hover\:text-ink\/80:hover {
  color: rgb(var(--ink) / 0.8);
}

.hover\:text-jv-crit:hover {
  color: var(--jv-crit);
}

.hover\:text-jv-ink:hover {
  color: var(--jv-ink);
}

.hover\:text-jv-soft:hover {
  color: var(--jv-soft);
}

.hover\:underline:hover {
  text-decoration-line: underline;
}

.hover\:decoration-crit:hover {
  text-decoration-color: rgb(var(--crit) / 1);
}

.hover\:decoration-ink:hover {
  text-decoration-color: rgb(var(--ink) / 1);
}

.hover\:decoration-ok:hover {
  text-decoration-color: rgb(var(--ok) / 1);
}

.hover\:opacity-100:hover {
  opacity: 1;
}

.hover\:opacity-80:hover {
  opacity: 0.8;
}

.hover\:brightness-125:hover {
  --tw-brightness: brightness(1.25);
  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);
}

.focus\:border-ink-mute:focus {
  --tw-border-opacity: 1;
  border-color: rgb(var(--ink-mute) / var(--tw-border-opacity));
}

.focus\:border-ink\/60:focus {
  border-color: rgb(var(--ink) / 0.6);
}

.focus\:outline-none:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
}

.focus-visible\:ring-1:focus-visible {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.focus-visible\:ring-\[var\(--jv-signal\)\]:focus-visible {
  --tw-ring-color: var(--jv-signal);
}

.disabled\:opacity-50:disabled {
  opacity: 0.5;
}

.disabled\:opacity-60:disabled {
  opacity: 0.6;
}

.group[open] .group-open\:rotate-90 {
  --tw-rotate: 90deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.group:hover .group-hover\:translate-x-0\.5 {
  --tw-translate-x: 0.125rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.group:hover .group-hover\:opacity-100 {
  opacity: 1;
}

@media (min-width: 640px) {

  .sm\:col-span-1 {
    grid-column: span 1 / span 1;
  }

  .sm\:col-span-3 {
    grid-column: span 3 / span 3;
  }

  .sm\:col-span-4 {
    grid-column: span 4 / span 4;
  }

  .sm\:col-span-5 {
    grid-column: span 5 / span 5;
  }

  .sm\:block {
    display: block;
  }

  .sm\:inline {
    display: inline;
  }

  .sm\:flex {
    display: flex;
  }

  .sm\:inline-flex {
    display: inline-flex;
  }

  .sm\:table-cell {
    display: table-cell;
  }

  .sm\:grid {
    display: grid;
  }

  .sm\:hidden {
    display: none;
  }

  .sm\:h-\[124px\] {
    height: 124px;
  }

  .sm\:h-\[440px\] {
    height: 440px;
  }

  .sm\:h-\[46px\] {
    height: 46px;
  }

  .sm\:h-\[540px\] {
    height: 540px;
  }

  .sm\:h-\[560px\] {
    height: 560px;
  }

  .sm\:h-\[84px\] {
    height: 84px;
  }

  .sm\:max-w-xs {
    max-width: 20rem;
  }

  .sm\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sm\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .sm\:grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .sm\:grid-cols-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .sm\:grid-cols-6 {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .sm\:grid-cols-\[160px_1fr_190px_auto\] {
    grid-template-columns: 160px 1fr 190px auto;
  }

  .sm\:grid-cols-\[1fr_140px_auto\] {
    grid-template-columns: 1fr 140px auto;
  }

  .sm\:flex-row {
    flex-direction: row;
  }

  .sm\:items-end {
    align-items: flex-end;
  }

  .sm\:items-center {
    align-items: center;
  }

  .sm\:items-baseline {
    align-items: baseline;
  }

  .sm\:justify-end {
    justify-content: flex-end;
  }

  .sm\:gap-2 {
    gap: 0.5rem;
  }

  .sm\:gap-3 {
    gap: 0.75rem;
  }

  .sm\:p-4 {
    padding: 1rem;
  }

  .sm\:p-6 {
    padding: 1.5rem;
  }

  .sm\:px-4 {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .sm\:px-5 {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }

  .sm\:py-3\.5 {
    padding-top: 0.875rem;
    padding-bottom: 0.875rem;
  }

  .sm\:text-center {
    text-align: center;
  }

  .sm\:text-right {
    text-align: right;
  }

  .sm\:text-\[22px\] {
    font-size: 22px;
  }

  .sm\:text-\[31px\] {
    font-size: 31px;
  }

  .sm\:text-\[34px\] {
    font-size: 34px;
  }

  .sm\:text-\[44px\] {
    font-size: 44px;
  }

  .sm\:tracking-\[0\.42em\] {
    letter-spacing: 0.42em;
  }
}

@media (min-width: 768px) {

  .md\:col-span-2 {
    grid-column: span 2 / span 2;
  }

  .md\:col-span-3 {
    grid-column: span 3 / span 3;
  }

  .md\:col-span-4 {
    grid-column: span 4 / span 4;
  }

  .md\:col-span-5 {
    grid-column: span 5 / span 5;
  }

  .md\:col-span-6 {
    grid-column: span 6 / span 6;
  }

  .md\:block {
    display: block;
  }

  .md\:inline {
    display: inline;
  }

  .md\:inline-flex {
    display: inline-flex;
  }

  .md\:table-cell {
    display: table-cell;
  }

  .md\:w-64 {
    width: 16rem;
  }

  .md\:w-auto {
    width: auto;
  }

  .md\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .md\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .md\:grid-cols-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .md\:grid-cols-6 {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .md\:grid-cols-\[1fr_2fr_1fr_1fr_auto\] {
    grid-template-columns: 1fr 2fr 1fr 1fr auto;
  }

  .md\:grid-cols-\[1fr_auto\] {
    grid-template-columns: 1fr auto;
  }

  .md\:flex-row {
    flex-direction: row;
  }

  .md\:items-center {
    align-items: center;
  }
}

@media (min-width: 1024px) {

  .lg\:col-span-2 {
    grid-column: span 2 / span 2;
  }

  .lg\:-mx-8 {
    margin-left: -2rem;
    margin-right: -2rem;
  }

  .lg\:inline {
    display: inline;
  }

  .lg\:inline-flex {
    display: inline-flex;
  }

  .lg\:inline-grid {
    display: inline-grid;
  }

  .lg\:h-\[496px\] {
    height: 496px;
  }

  .lg\:h-\[620px\] {
    height: 620px;
  }

  .lg\:h-\[650px\] {
    height: 650px;
  }

  .lg\:w-\[214px\] {
    width: 214px;
  }

  .lg\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .lg\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .lg\:grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .lg\:grid-cols-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .lg\:grid-cols-6 {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .lg\:grid-cols-7 {
    grid-template-columns: repeat(7, minmax(0, 1fr));
  }

  .lg\:grid-cols-\[1\.25fr_1fr\] {
    grid-template-columns: 1.25fr 1fr;
  }

  .lg\:grid-cols-\[320px_1fr\] {
    grid-template-columns: 320px 1fr;
  }

  .lg\:border-b-0 {
    border-bottom-width: 0px;
  }

  .lg\:border-r {
    border-right-width: 1px;
  }

  .lg\:px-6 {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }

  .lg\:px-8 {
    padding-left: 2rem;
    padding-right: 2rem;
  }

  .lg\:py-14 {
    padding-top: 3.5rem;
    padding-bottom: 3.5rem;
  }
}

@media (min-width: 1280px) {

  .xl\:flex {
    display: flex;
  }

  .xl\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .xl\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .xl\:grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .xl\:grid-cols-6 {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .xl\:grid-cols-\[repeat\(auto-fit\2c minmax\(200px\2c 1fr\)\)\] {
    grid-template-columns: repeat(auto-fit,minmax(200px,1fr));
  }
}