/*!*************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[2].use[1]!./node_modules/next/dist/build/webpack/loaders/next-font-loader/index.js??ruleSet[1].rules[14].oneOf[2].use[2]!./node_modules/next/font/google/target.css?{"path":"src/app/layout.tsx","import":"Space_Grotesk","arguments":[{"subsets":["latin"],"weight":["400","500","600","700"],"variable":"--font-space-grotesk","display":"swap"}],"variableName":"spaceGrotesk"} ***!
  \*************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/* vietnamese */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/_next/static/media/e1aab0933260df4d-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: 'Space Grotesk';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/_next/static/media/b7387a63dd068245-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/_next/static/media/36966cca54120369-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;
}
/* vietnamese */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/_next/static/media/e1aab0933260df4d-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: 'Space Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/_next/static/media/b7387a63dd068245-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/_next/static/media/36966cca54120369-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;
}
/* vietnamese */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/_next/static/media/e1aab0933260df4d-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: 'Space Grotesk';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/_next/static/media/b7387a63dd068245-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/_next/static/media/36966cca54120369-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;
}
/* vietnamese */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/_next/static/media/e1aab0933260df4d-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: 'Space Grotesk';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/_next/static/media/b7387a63dd068245-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/_next/static/media/36966cca54120369-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: 'Space Grotesk Fallback';src: local("Arial");ascent-override: 89.71%;descent-override: 26.62%;line-gap-override: 0.00%;size-adjust: 109.69%
}.__className_49a339 {font-family: 'Space Grotesk', 'Space Grotesk Fallback';font-style: normal
}.__variable_49a339 {--font-space-grotesk: 'Space Grotesk', 'Space Grotesk Fallback'
}

/*!*****************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[2].use[1]!./node_modules/next/dist/build/webpack/loaders/next-font-loader/index.js??ruleSet[1].rules[14].oneOf[2].use[2]!./node_modules/next/font/google/target.css?{"path":"src/app/layout.tsx","import":"Sora","arguments":[{"subsets":["latin"],"weight":["300","400","500","600","700"],"variable":"--font-sora","display":"swap"}],"variableName":"sora"} ***!
  \*****************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/* latin-ext */
@font-face {
  font-family: 'Sora';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(/_next/static/media/1d4eaed977255102-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Sora';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(/_next/static/media/f3f7e95f2dbc4fe4-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;
}
/* latin-ext */
@font-face {
  font-family: 'Sora';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/_next/static/media/1d4eaed977255102-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Sora';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/_next/static/media/f3f7e95f2dbc4fe4-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;
}
/* latin-ext */
@font-face {
  font-family: 'Sora';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/_next/static/media/1d4eaed977255102-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Sora';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/_next/static/media/f3f7e95f2dbc4fe4-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;
}
/* latin-ext */
@font-face {
  font-family: 'Sora';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/_next/static/media/1d4eaed977255102-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Sora';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/_next/static/media/f3f7e95f2dbc4fe4-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;
}
/* latin-ext */
@font-face {
  font-family: 'Sora';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/_next/static/media/1d4eaed977255102-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Sora';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/_next/static/media/f3f7e95f2dbc4fe4-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: 'Sora Fallback';src: local("Arial");ascent-override: 85.29%;descent-override: 25.50%;line-gap-override: 0.00%;size-adjust: 113.73%
}.__className_4559c1 {font-family: 'Sora', 'Sora Fallback';font-style: normal
}.__variable_4559c1 {--font-sora: 'Sora', 'Sora Fallback'
}

/*!****************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[2].use[1]!./node_modules/next/dist/build/webpack/loaders/next-font-loader/index.js??ruleSet[1].rules[14].oneOf[2].use[2]!./node_modules/next/font/google/target.css?{"path":"src/app/layout.tsx","import":"JetBrains_Mono","arguments":[{"subsets":["latin"],"weight":["400","500","600","700"],"variable":"--font-jetbrains-mono","display":"swap"}],"variableName":"jetbrainsMono"} ***!
  \****************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/* cyrillic-ext */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/_next/static/media/edc640959b0c7826-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: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/_next/static/media/ac0e76ddaeeb7981-s.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/_next/static/media/64d784ea54a4acde-s.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/_next/static/media/ff71da380fbe67dd-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: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/_next/static/media/6d831b18ae5b01dc-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/_next/static/media/558ca1a6aa3cb55e-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: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/_next/static/media/edc640959b0c7826-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: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/_next/static/media/ac0e76ddaeeb7981-s.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/_next/static/media/64d784ea54a4acde-s.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/_next/static/media/ff71da380fbe67dd-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: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/_next/static/media/6d831b18ae5b01dc-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/_next/static/media/558ca1a6aa3cb55e-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: 'JetBrains Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/_next/static/media/edc640959b0c7826-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: 'JetBrains Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/_next/static/media/ac0e76ddaeeb7981-s.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/_next/static/media/64d784ea54a4acde-s.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/_next/static/media/ff71da380fbe67dd-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: 'JetBrains Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/_next/static/media/6d831b18ae5b01dc-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/_next/static/media/558ca1a6aa3cb55e-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: 'JetBrains Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/_next/static/media/edc640959b0c7826-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: 'JetBrains Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/_next/static/media/ac0e76ddaeeb7981-s.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/_next/static/media/64d784ea54a4acde-s.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/_next/static/media/ff71da380fbe67dd-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: 'JetBrains Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/_next/static/media/6d831b18ae5b01dc-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/_next/static/media/558ca1a6aa3cb55e-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: 'JetBrains Mono Fallback';src: local("Arial");ascent-override: 75.79%;descent-override: 22.29%;line-gap-override: 0.00%;size-adjust: 134.59%
}.__className_f9e569 {font-family: 'JetBrains Mono', 'JetBrains Mono Fallback';font-style: normal
}.__variable_f9e569 {--font-jetbrains-mono: 'JetBrains Mono', 'JetBrains Mono Fallback'
}

/*!*****************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[3]!./src/app/globals.css ***!
  \*****************************************************************************************************************************************************************************************************************************************************************/
/*
 * Vantage design tokens — lifted verbatim from the source design (Vantage App.dc.html).
 * One home for the palette, type scale, and surface treatments the whole app reads.
 */
:root {
  /* surfaces */
  --bg: #0b0c0f;
  --panel: #0e0f13;
  --panel-hover: rgba(255, 255, 255, 0.025);
  --panel-header: rgba(255, 255, 255, 0.02);
  --line: rgba(255, 255, 255, 0.08);
  --line-soft: rgba(255, 255, 255, 0.06);
  --line-faint: rgba(255, 255, 255, 0.05);
  --fill: rgba(255, 255, 255, 0.04);
  --fill-2: rgba(255, 255, 255, 0.03);

  /* accent + semantic */
  --gold: #f4b652;
  --gold-hi: #ffca6b;
  --gold-dim: rgba(244, 182, 82, 0.14);
  --gold-glow: rgba(244, 182, 82, 0.5);
  --green: #3ddc97;
  --red: #ff5d6c;
  --red-soft: #ff8b96;
  --purple: #9b8cff;
  --blue: #6ea8ff;
  /* coach: the accent for report-derived content joined onto match surfaces (per-death takeaways,
     per-fight verdicts, phase reads, the item you didn't build). Answers "which of this is the
     coach talking?" — aliased to --blue so it stays one hue across every annotated surface. */
  --coach: #6ea8ff;
  --coach-dim: rgba(110, 168, 255, 0.12);
  --coach-line: rgba(110, 168, 255, 0.32);

  /* text */
  --text: #e8e6e3;
  --text-hi: #f7f6f4;
  --text-bright: #f4f3f1;
  --muted: rgba(255, 255, 255, 0.6);
  --muted-2: rgba(255, 255, 255, 0.5);
  --faint: rgba(255, 255, 255, 0.4);
  --faint-2: rgba(255, 255, 255, 0.35);
  --ghost: rgba(255, 255, 255, 0.32);

  /* type — wired to next/font CSS variables set in layout.tsx */
  --font-display: var(--font-space-grotesk), system-ui, sans-serif;
  --font-body: var(--font-sora), system-ui, sans-serif;
  --font-mono: var(--font-jetbrains-mono), ui-monospace, monospace;

  /*
   * TYPE SCALE — the only place a font size is written down.
   *
   * Every `font:` shorthand and `fontSize` in the app resolves to one of these steps, so changing
   * the app's type means editing this block and nothing else. `--fs-scale` multiplies the whole
   * ramp at once: set it to 1.05 to make the app a touch larger everywhere, or reset it in a media
   * query to retune type for one breakpoint without touching a component.
   *
   * `--fs-scale` is a ROOT knob, not a per-subtree one. The `var()` inside each step resolves where
   * the step is DECLARED (here), so re-declaring `--fs-scale` on some inner element does nothing —
   * verified, not assumed. A media query works because it retargets `:root` itself. To scale one
   * subtree, re-declare the steps you need on it.
   *
   * The steps are the sizes the design actually used, minus the half-pixel drift (8.5/10.5/12.5/…)
   * that accumulated from hand-tuning individual panels. 9px is the floor — nothing renders smaller.
   *
   * Three places DON'T read these, and must not be migrated to them:
   *   - the OG/Twitter card routes (`lib/og/`, `*opengraph-image.tsx`) — satori resolves no CSS vars
   *   - `app/global-error.tsx` — the stylesheet may never have loaded
   *   - SVG `<text>` in a scaled viewBox (`MapCanvas`) — those px are user units, not pixels
   * `npm run check:type-scale` (wired into `npm test`) holds that line.
   */
  --fs-scale: 1;
  /* Added to every step BEFORE the multiplier. `--fs-scale` is proportional (1.1 grows a 34px
     headline by 3.4px and a 9px label by 0.9px); this is the flat one — +2px is +2px everywhere,
     which is what "bump the whole app up a bit" usually means for dense UI, where the small end is
     what's actually straining. Set it to 0 to sit exactly on the base ramp. */
  --fs-nudge: 2px;
  --fs-1: calc((9px + var(--fs-nudge)) * var(--fs-scale)); /* dense column headers, pill badges — the floor */
  --fs-2: calc((10px + var(--fs-nudge)) * var(--fs-scale)); /* mono labels, eyebrows, step keys */
  --fs-3: calc((11px + var(--fs-nudge)) * var(--fs-scale)); /* captions — hero/item names, table cells */
  --fs-4: calc((12px + var(--fs-nudge)) * var(--fs-scale)); /* secondary UI text, compact prose */
  --fs-5: calc((13px + var(--fs-nudge)) * var(--fs-scale)); /* body default */
  --fs-6: calc((14px + var(--fs-nudge)) * var(--fs-scale)); /* lead body, small headings */
  --fs-7: calc((15px + var(--fs-nudge)) * var(--fs-scale)); /* headings */
  --fs-8: calc((16px + var(--fs-nudge)) * var(--fs-scale)); /* section headings, large prose */
  --fs-9: calc((18px + var(--fs-nudge)) * var(--fs-scale)); /* panel titles */
  --fs-10: calc((20px + var(--fs-nudge)) * var(--fs-scale)); /* stat numerals */
  --fs-11: calc((22px + var(--fs-nudge)) * var(--fs-scale)); /* page titles */
  --fs-12: calc((24px + var(--fs-nudge)) * var(--fs-scale)); /* marketing subheads */
  --fs-13: calc((28px + var(--fs-nudge)) * var(--fs-scale)); /* marketing headlines */
  --fs-14: calc((30px + var(--fs-nudge)) * var(--fs-scale)); /* display numerals */
  --fs-15: calc((34px + var(--fs-nudge)) * var(--fs-scale)); /* hero headlines */

  /*
   * Fluid steps — the marketing pages only. These scale with the viewport rather than the ramp, so
   * they deliberately ignore `--fs-scale`; a headline that is 4.6vw is already responsive.
   *
   * They are one-per-tier rather than folded together, because a marketing headline is a
   * composition, not a UI size: the homepage hero is meant to outrun a legal page's title. Kept
   * here anyway so that every font size in the app is in this block — and so the near-duplicates
   * are visible side by side the next time someone wonders whether four hero sizes earn their keep.
   */
  /* `--fs-nudge` is added to all three terms, not just the ends: at a mid-size viewport the vw term
     is the one that wins, so nudging only the floor and ceiling would leave the headlines untouched
     exactly where most people read them. */
  --fs-fluid-hero: clamp(calc(30px + var(--fs-nudge)), calc(4.6vw + var(--fs-nudge)), calc(54px + var(--fs-nudge))); /* homepage + method hero */
  --fs-fluid-h1: clamp(calc(31px + var(--fs-nudge)), calc(4.6vw + var(--fs-nudge)), calc(48px + var(--fs-nudge))); /* marketing page titles (Prose) */
  --fs-fluid-h1-sm: clamp(calc(30px + var(--fs-nudge)), calc(4.4vw + var(--fs-nudge)), calc(42px + var(--fs-nudge))); /* waitlist */
  --fs-fluid-h1-xs: clamp(calc(27px + var(--fs-nudge)), calc(3.8vw + var(--fs-nudge)), calc(36px + var(--fs-nudge))); /* invite */
  --fs-fluid-h2: clamp(calc(25px + var(--fs-nudge)), calc(3.3vw + var(--fs-nudge)), calc(36px + var(--fs-nudge))); /* beat headings */
  --fs-fluid-h3: clamp(calc(23px + var(--fs-nudge)), calc(2.9vw + var(--fs-nudge)), calc(32px + var(--fs-nudge))); /* section headings */
  --fs-fluid-quote: clamp(calc(18px + var(--fs-nudge)), calc(2.3vw + var(--fs-nudge)), calc(23px + var(--fs-nudge))); /* pull quotes */
  --fs-fluid-lead: clamp(calc(16px + var(--fs-nudge)), calc(1.9vw + var(--fs-nudge)), calc(18px + var(--fs-nudge))); /* lead paragraphs */

  /* geometry */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 14px;
  --r-xl: 16px;
  --maxw: 1180px;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a {
  color: var(--gold);
  text-decoration: none;
}
a:hover {
  color: var(--gold-hi);
}

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-thumb {
  background: #26282e;
  border-radius: 6px;
}
::-webkit-scrollbar-track {
  background: var(--bg);
}

input,
button,
textarea,
select {
  font-family: inherit;
}

@keyframes vfade {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.vscreen {
  animation: vfade 0.25s ease;
}

/* shared surface primitive */
.panel {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--panel);
}

/* Live indicator on a tournament that is playing right now. The pulse is the one piece of ambient
   motion in the product, and it earns it: "is this on" is the question the Tournaments tab exists
   to answer, and a static dot answers it identically to a finished one. */
.live-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex: none;
  background: currentColor;
  box-shadow: 0 0 0 0 currentColor;
  animation: live-pulse 2s infinite;
}
@keyframes live-pulse {
  70% {
    box-shadow: 0 0 0 7px rgba(255, 93, 108, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(255, 93, 108, 0);
  }
}
@media (prefers-reduced-motion: reduce) {
  .live-dot {
    animation: none;
  }
}

/* Tournament standings + placement grids. Classes rather than inline styles so the media queries
   below can drop columns — the same pattern as .vmatch-grid and .vsb-grid. */
.vstand {
  display: grid;
  grid-template-columns: 28px 24px minmax(0, 1fr) 66px 74px 52px 96px;
  grid-gap: 12px;
  gap: 12px;
  align-items: center;
}
/* A STAGE's standings (StructureView) drop the game-win column the derived table keeps: Valve serves
   `tiebreak_game_win_pct` already scaled to a percentage, so rendering it as a fraction printed
   "10000%". The column was a tiebreaker detail nobody reads next to W-L, so it is gone rather than
   rescaled — one fewer number to get wrong. */
.vstand-stage {
  grid-template-columns: 28px 24px minmax(0, 1fr) 66px 74px 96px;
}
.vstand-head {
  padding: 8px 16px;
  font-family: var(--font-mono);
  font-size: var(--fs-1);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ghost);
}
.vstand-row {
  padding: 9px 16px;
  border-top: 1px solid var(--line-faint);
}
.vstand-row:hover {
  background: var(--panel-hover);
}
.vstand-name {
  font-size: var(--fs-4);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.vrun-row {
  display: grid;
  grid-template-columns: 24px minmax(0, 150px) minmax(0, 1fr) 140px;
  grid-gap: 12px;
  gap: 12px;
  align-items: center;
  padding: 8px 16px;
  border-top: 1px solid var(--line-faint);
}
.vrun-row:hover {
  background: var(--panel-hover);
}
.vpodium {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 10px;
  gap: 10px;
  padding: 18px 16px;
  align-items: end;
}
.vpod {
  border: 1px solid var(--line-faint);
  border-radius: var(--r-sm);
  background: var(--fill-2);
  padding: 14px 12px;
  text-align: center;
}
.vpod-first {
  border-color: rgba(244, 182, 82, 0.4);
  background: linear-gradient(180deg, rgba(244, 182, 82, 0.1), var(--fill-2));
}
.vladder {
  display: grid;
  grid-template-columns: 64px 24px minmax(0, 1fr) 160px;
  grid-gap: 12px;
  gap: 12px;
  align-items: center;
  padding: 9px 16px;
  border-top: 1px solid var(--line-faint);
}
.vladder:hover {
  background: var(--panel-hover);
}

@media (max-width: 860px) {
  .vstand {
    grid-template-columns: 26px 22px minmax(0, 1fr) 60px 70px;
  }
  .vstand-stage {
    grid-template-columns: 26px 22px minmax(0, 1fr) 60px 70px;
  }
  .vstand-diff,
  .vstand-form {
    display: none;
  }
  .vrun-row {
    grid-template-columns: 22px minmax(0, 110px) minmax(0, 1fr);
  }
  .vrun-exit {
    display: none;
  }
  .vladder {
    grid-template-columns: 58px 22px minmax(0, 1fr);
  }
  .vladder-out {
    display: none;
  }
  .vpodium {
    grid-template-columns: 1fr;
  }
}

/* Day heading over a group of series. A class rather than inline styles because the grouping moved
   into a client component (reader-local buckets) and the heading moved with it. */
.vday {
  display: flex;
  align-items: center;
  gap: 12px;
  font: 600 var(--fs-1) var(--font-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--faint-2);
  padding: 20px 2px 10px;
  margin: 0;
}
.vday-rule { flex: 1 1; height: 1px; background: var(--line-faint); }

/* --- Valve tournament structure: stage strip, standings cuts, bracket --- */
.vpanel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line-faint);
  background: var(--panel-header);
  flex-wrap: wrap;
}
.vstages {
  display: flex;
  gap: 1px;
  background: var(--line-faint);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
}
.vstage {
  flex: 1 1;
  min-width: 0;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border: none;
  background: var(--panel);
  color: inherit;
  font: inherit;
  text-align: left;
  padding: 12px 15px;
  cursor: pointer;
  transition: background 0.15s ease;
}
.vstage:hover { background: var(--panel-hover); }
.vstage[aria-selected="true"] { background: linear-gradient(180deg, var(--gold-dim), transparent 70%); }
.vstage-n { font: 600 var(--fs-5) var(--font-display); color: var(--text-hi); }
.vstage[aria-selected="true"] .vstage-n { color: var(--gold); }
.vstage-s { font: 500 var(--fs-2) var(--font-mono); color: var(--faint-2); margin-top: 3px; }
.vstage-bar { height: 3px; border-radius: 2px; background: var(--fill); margin-top: 9px; overflow: hidden; }
.vstage-bar i { display: block; height: 100%; background: var(--gold); opacity: 0.75; }

/* The advancement cut. A line with a label is the cheapest way to show a reader where they stand
   relative to qualifying — and the numbers behind it are Valve's, not ours. */
.vcut { position: relative; border-top: 1px solid rgba(244, 182, 82, 0.45); }
.vcut::before {
  content: attr(data-cut);
  position: absolute;
  top: -9px;
  right: 14px;
  background: var(--panel);
  padding: 0 8px;
  font: 600 var(--fs-1) var(--font-mono);
  letter-spacing: 0.09em;
  color: var(--gold);
}
.vcut-out { border-top-color: rgba(255, 93, 108, 0.4); }
.vcut-out::before { color: var(--red); }

.vbracket { padding: 20px 16px; overflow-x: auto; }
.vrounds { display: flex; gap: 26px; min-width: 760px; }
.vround { display: flex; flex-direction: column; justify-content: space-around; gap: 14px; flex: 1 1; min-width: 148px; }
.vround-h {
  font: 600 var(--fs-1) var(--font-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--faint-2);
  text-align: center;
  margin-bottom: 4px;
}
.vtie { position: relative; border: 1px solid var(--line-faint); border-radius: 7px; background: var(--fill-2); overflow: hidden; }
.vtie-gf { border-color: rgba(244, 182, 82, 0.45); background: linear-gradient(180deg, rgba(244, 182, 82, 0.09), var(--fill-2)); }
.vround:not(:last-child) .vtie::after {
  content: "";
  position: absolute;
  right: -26px;
  top: 50%;
  width: 26px;
  height: 1px;
  background: var(--line-faint);
}
.vslot { display: grid; grid-template-columns: 18px minmax(0, 1fr) 22px; grid-gap: 8px; gap: 8px; align-items: center; padding: 6px 9px; font-size: var(--fs-3); }
.vslot + .vslot { border-top: 1px solid var(--line-faint); }
.vslot-who { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--muted-2); }
.vslot-tbd { color: var(--ghost); font-style: italic; }
.vslot-sc { font: 600 var(--fs-3) var(--font-mono); text-align: right; color: var(--ghost); }
.vtie-cap {
  font: 500 var(--fs-1) var(--font-mono);
  color: var(--ghost);
  padding: 4px 9px;
  border-top: 1px solid var(--line-faint);
  background: rgba(0, 0, 0, 0.18);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* A live tie, and the strip inside it. The border and the wash are the only signal that separates a
   game happening NOW from the twenty finished ones beside it, so they carry the emphasis rather than
   a badge — at bracket scale a slot is 148px wide and a badge would not fit. */
.vtie-now { border-color: rgba(255, 93, 108, 0.5); box-shadow: 0 0 0 1px rgba(255, 93, 108, 0.14); }
.vtie-live {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 7px 9px;
  border-top: 1px solid var(--line-faint);
  background: rgba(255, 93, 108, 0.07);
}

.vlower { margin-top: 26px; padding-top: 22px; border-top: 1px dashed var(--line-faint); }
.vlower-h { font: 600 var(--fs-2) var(--font-mono); letter-spacing: 0.12em; color: var(--red); margin-bottom: 14px; }

/* The live board — every concurrent game as a card. auto-FIT, not auto-fill: on a quiet day there is
   exactly one game and it should fill the panel rather than sit in a 320px column beside three empty
   tracks; on a group-stage day the same rule lays four out in a grid. */
.vlive-board {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  grid-gap: 1px;
  gap: 1px;
  background: var(--line-faint);
}
.vlive-card {
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 13px 16px 14px;
  background: var(--panel);
}
a.vlive-card:hover { background: var(--panel-hover); }
.vlive-head { display: flex; align-items: center; gap: 9px; min-width: 0; }
/* A side's five picks. nowrap is load-bearing — see DraftRow. */
.vdraft { display: flex; gap: 3px; flex: none; flex-wrap: nowrap; justify-content: flex-start; }
.vdraft-r { justify-content: flex-end; }
/* 22px crest, name, kills, then the draft pushed to the right edge. */
.vlive-side { display: grid; grid-template-columns: 22px minmax(0, 1fr) 30px auto; grid-gap: 9px; gap: 9px; align-items: center; }
.vlive-name {
  font: 600 var(--fs-4) var(--font-display);
  color: var(--text-hi);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* The broadcast bar: two teams at equal weight with the score between them. Collapses to a stack on
   a phone, where three columns would give each team about 90px. */
.vbcast {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  grid-gap: 20px;
  gap: 20px;
  align-items: center;
  padding: 22px 24px 18px;
}
@media (max-width: 720px) {
  .vbcast { grid-template-columns: minmax(0, 1fr); gap: 16px; text-align: center; }
  .vlive-side { grid-template-columns: 22px minmax(0, 1fr) 30px; }
  .vlive-side > :last-child { display: none; }
}

/* The kickoff time is sized for the WORST timezone, not the local one. `timeZoneName: "short"`
   renders a half-hour offset in full — "Thu, Dec 31, 7:00 AM GMT+10:30" measures 196px against
   163px for the same instant in PDT — so a column fitted to PDT wraps for Adelaide, Kolkata,
   Kathmandu and Chatham. 200px covers every zone measured, and the two team columns are flexible
   and have the room to give. */
.vsched-row {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr) 44px minmax(0, 1fr) 84px;
  grid-gap: 12px;
  gap: 12px;
  align-items: center;
  padding: 9px 16px;
  border-top: 1px solid var(--line-faint);
}
.vsched-row:hover { background: var(--panel-hover); }
/* An expandable row is a <button>, so it needs the element defaults stripped back to the grid the
   non-expandable <div> rows already are. */
.vsched-open {
  width: 100%;
  text-align: inherit;
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  border-top: 1px solid var(--line-faint);
  cursor: pointer;
}
.vsched-open:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }
.vsched-games { padding: 4px 16px 12px; background: var(--fill-2); border-top: 1px solid var(--line-faint); }
/* A game chip's side row: side pill, crest, team (+ win star), the five picks, kills.
   The draft is a fixed track, so the team name is the only thing that gives ground as the card
   narrows — and it ellipsizes rather than pushing the heroes out of the row. */
.vgame-side { display: grid; grid-template-columns: 42px 18px minmax(0, 1fr) auto 26px; grid-gap: 7px; gap: 7px; align-items: center; }
.vgame-pill {
  font: 600 var(--fs-1) var(--font-mono);
  letter-spacing: 0.06em;
  padding: 1px 4px;
  border-radius: 3px;
  border: 1px solid;
  text-align: center;
  white-space: nowrap;
}
.vgame-rad { color: var(--green); border-color: rgba(61, 220, 151, 0.34); background: rgba(61, 220, 151, 0.09); }
.vgame-dire { color: var(--red); border-color: rgba(255, 93, 108, 0.34); background: rgba(255, 93, 108, 0.09); }
.vgame-name {
  font-size: var(--fs-3);
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.vgame-heroes { display: flex; gap: 2px; flex: none; }
/* 22px, not 26. Five portraits plus their gaps is a fixed 118px track, and every pixel it takes
   comes straight off the team name — which was ellipsizing to "Zero Te…" on a laptop. A hero is
   still recognisable at 22px; a truncated team name is not recoverable. */
.vgame-hero { width: 22px; height: 13px; border-radius: 2px; display: block; background: var(--fill); }
@media (max-width: 620px) {
  /* Below this a 26px portrait × 5 plus a team name is not a row, it is a squeeze. The heroes are
     the first thing to go, because the scoreline still works without them. */
  .vgame-side { grid-template-columns: 42px 18px minmax(0, 1fr) 26px; }
  .vgame-heroes { display: none; }
}

/* Where a stage's schedule stops being history. A rule with the word set into it, rather than a
   heading — the rows on both sides are the same kind of thing, and this marks a boundary between
   them rather than opening a new section. */
.vsched-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px 8px;
  border-top: 1px solid var(--line-faint);
  font: 600 var(--fs-1) var(--font-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--faint-2);
}
.vsched-divider::after {
  content: "";
  flex: 1 1;
  height: 1px;
  background: var(--line-faint);
}

.vsched-when { white-space: nowrap; }
.vsched-side { display: flex; align-items: center; gap: 9px; min-width: 0; }
.vsched-r { flex-direction: row-reverse; }

@media (max-width: 860px) {
  .vstages { flex-direction: column; }
  /* A phone cannot spare 200px for a timestamp AND still name two teams, so here the time keeps the
     two lines it needs and the column stays at 96px. Measured: 96, 104 and 112 all wrap to exactly
     two lines, so widening it buys nothing and costs 4-8px of team name on a row that only has ~70.
     Wrapping is the right answer at this width; it was the wrong one at full width, where the room
     existed and went unused. */
  .vsched-row { grid-template-columns: 96px minmax(0, 1fr) 40px minmax(0, 1fr); }
  .vsched-when { white-space: normal; }
  .vsched-row > :nth-child(5) { display: none; }
}

/* mono label used everywhere for section headers / stat captions */
.mono-label {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: var(--fs-3);
  letter-spacing: 0.07em;
  color: var(--muted);
}

/* Match table grid — a class (not inline) so the media queries below can retarget the
   columns, exactly as the source design does. */
.vmatch-grid {
  display: grid;
  grid-template-columns: 3px minmax(0, 1fr) 78px 136px 92px 116px 168px;
  grid-gap: 14px;
  gap: 14px;
}

/* The row's middle columns (result, K/D/A, GPM, duration) share one wrapper so the phone layout
   can move them as a unit. On desktop the wrapper dissolves — its children stay direct grid items
   in the columns above. */
.vmatch-mid {
  display: contents;
}

.match-row:hover {
  background: var(--panel-hover);
}

/* Team scoreboard grid — a class so the media query can drop columns on narrow screens. */
.vsb-grid {
  display: grid;
  grid-template-columns: minmax(150px, 1.5fr) 104px 74px 62px 46px 60px 60px minmax(214px, 236px);
  grid-gap: 10px;
  gap: 10px;
}
/* An expandable scoreboard row. The hover wash is an inset shadow, not a background, so it layers
   over whatever tint the row wrapper carries (viewer gold / smurf red) instead of replacing it. */
.vsb-row {
  cursor: pointer;
}
.vsb-row:hover {
  box-shadow: inset 0 0 0 9999px rgba(255, 255, 255, 0.03);
}
.vsb-row:focus-visible {
  outline: 1px solid var(--gold-dim);
  outline-offset: -1px;
}

/* Scoreboard player identity — deliberately quieter than the hero name it trails. The anchor form
   overrides the global gold link colour and only warms up on hover, so ten names never compete with
   the stats. */
.vsb-name,
a.vsb-name {
  color: var(--faint);
  transition: color 0.15s ease;
}
a.vsb-name:hover {
  color: var(--gold);
}

.coach-card {
  transition: border-color 0.15s ease;
}
.coach-card:hover {
  border-color: rgba(244, 182, 82, 0.5) !important;
}

/* Heroes grid — clickable cards that link to the Matches page filtered to that hero. */
.hero-card {
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.hero-card:hover {
  border-color: rgba(244, 182, 82, 0.5) !important;
  transform: translateY(-2px);
}
.hero-card .hero-card-cta {
  opacity: 0;
  transition: opacity 0.15s ease;
}
.hero-card:hover .hero-card-cta {
  opacity: 1;
}

.logout-btn {
  transition: background 0.15s ease;
}
.logout-btn:hover {
  background: rgba(255, 93, 108, 0.12) !important;
}

.vpad {
  padding-left: 30px;
  padding-right: 30px;
}

/* ---- responsive (mirrors the source design breakpoints) ---- */
@media (max-width: 1000px) {
  .vpad {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  .vgrid2 {
    /* minmax(0,·), not bare 1fr — 1fr's auto minimum lets a wide child (a row of fixed-width
       columns) blow the track past the viewport instead of making the child shrink. */
    grid-template-columns: minmax(0, 1fr) !important;
  }
}
/* Skeleton shimmer for the report cold-open. */
.skeleton {
  background: linear-gradient(90deg, var(--fill-2) 25%, var(--fill) 40%, var(--fill-2) 60%);
  background-size: 300% 100%;
  animation: skeleton-shimmer 1.5s ease-in-out infinite;
}
@keyframes skeleton-shimmer {
  0% {
    background-position: 130% 0;
  }
  100% {
    background-position: -130% 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .skeleton {
    animation: none;
  }
}

/* Structured report reader — sticky ToC rail + collapsible section stack. */
.report-progress {
  position: -webkit-sticky;
  position: sticky;
  top: 71px;
  height: 2px;
  border-radius: 2px;
  background: var(--line);
  overflow: hidden;
  margin-bottom: 20px;
  z-index: 4;
}
.report-progress span {
  display: block;
  height: 100%;
  transition: width 0.1s linear;
}
.report-reader-grid {
  display: grid;
  /* fixed ToC + a capped content column (shrinks on smaller viewports, caps prose width on wide) */
  grid-template-columns: 220px minmax(0, 780px);
  grid-gap: 44px;
  gap: 44px;
  align-items: start;
}
.report-toc {
  position: -webkit-sticky;
  position: sticky;
  top: 84px;
  align-self: start;
  max-height: calc(100vh - 104px);
  overflow-y: auto;
}
.report-toc::-webkit-scrollbar {
  width: 0;
}
@media (max-width: 720px) {
  .report-reader-grid {
    /* minmax(0,·), not bare 1fr: 1fr's auto minimum lets one wide child (a fixed-column table, an
       unconstrained image) blow the track out to its min-content and widen the whole page — the
       phone layout clamps the column and makes each wide child reflow instead. */
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
  }
  .report-toc {
    position: static;
    max-height: none;
  }
  .report-toc nav {
    flex-direction: row !important;
    overflow-x: auto;
    gap: 6px !important;
    padding-bottom: 6px;
  }
  .report-toc nav button {
    flex: none;
    max-width: 168px;
  }
}

/* Report prose typography — tuned for scanning. */
/* Lead paragraph (a section's opening) reads a touch larger — reader only, not the match-page callouts. */
.report-reader .report-md > p:first-child {
  font-size: var(--fs-7);
  line-height: 1.7;
  color: var(--text);
}
/* Draft versus band: two lineups facing across a divider. Below the breakpoint the sides stack
   instead of wrapping — five-across in a narrow column orphans the last hero onto its own row. */
.report-vs {
  display: flex;
  align-items: center;
  gap: 14px;
}
.report-vs-side {
  display: flex;
  flex: 1 1;
  min-width: 0;
  gap: 8px;
  flex-wrap: wrap;
}
.report-vs-theirs {
  justify-content: flex-end;
}
@media (max-width: 1060px) {
  .report-vs {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .report-vs-theirs {
    justify-content: flex-start;
  }
  .report-vs-mid {
    align-self: flex-start;
  }
}

/* Teamfight card: narrative left, the drillable takeaway pinned right so it reads as a column down
   the section. Below the breakpoint two columns of small text get cramped, so it stacks. */
.report-fight-body {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
}
.report-fight-next {
  padding: 13px 15px;
  background: color-mix(in srgb, var(--gold) 5%, transparent);
  border-left: 1px solid color-mix(in srgb, var(--gold) 16%, transparent);
}
@media (max-width: 1060px) {
  .report-fight-body {
    grid-template-columns: minmax(0, 1fr);
  }
  .report-fight-next {
    border-left: none;
    border-top: 1px solid color-mix(in srgb, var(--gold) 16%, transparent);
  }
}

/* Markdown nested in a component's own chrome: the caller owns the type scale and the spacing. */
.report-reader .report-md-tight > p:first-child {
  font: inherit;
  color: inherit;
}
.report-md-tight > *:last-child {
  margin-bottom: 0;
}
/* Label lead-ins: `**State at start:**` / `*Skill area:*` → uppercase mono tags. */
.report-lbl {
  font: 600 var(--fs-2) var(--font-mono);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-right: 8px;
  white-space: nowrap;
}
.report-lbl-strong {
  color: var(--gold);
}
.report-lbl-em {
  color: var(--blue);
}
/* Subtle stat emphasis — crisp tabular figures, a touch brighter. */
.report-md .stat {
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
  color: var(--text-hi);
  font-weight: 500;
}
/* Unordered lists get a gold dash marker; ordered lists keep numbers, tinted. */
.report-md ul > li {
  position: relative;
  padding-left: 16px;
}
.report-md ul > li::before {
  content: "–";
  position: absolute;
  left: 0;
  color: var(--gold);
  font-weight: 600;
}
.report-md ol > li::marker {
  color: var(--gold);
  font: 600 var(--fs-4) var(--font-mono);
}

/* Entity tags in report prose — hero/item/ability references, color-coded + hover-carded.
   Mirrors the eval UI's .ent-tag, mapped to Vantage's color vars. */
.ent-tag {
  cursor: help;
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
  text-underline-offset: 2px;
  transition: color 0.12s, -webkit-text-decoration-color 0.12s;
  transition: color 0.12s, text-decoration-color 0.12s;
  transition: color 0.12s, text-decoration-color 0.12s, -webkit-text-decoration-color 0.12s;
}
.ent-tag[data-kind="item"] {
  color: color-mix(in srgb, var(--gold) 55%, var(--text));
  -webkit-text-decoration-color: color-mix(in srgb, var(--gold) 55%, transparent);
          text-decoration-color: color-mix(in srgb, var(--gold) 55%, transparent);
}
.ent-tag[data-kind="ability"] {
  color: color-mix(in srgb, var(--purple) 62%, var(--text));
  -webkit-text-decoration-color: color-mix(in srgb, var(--purple) 55%, transparent);
          text-decoration-color: color-mix(in srgb, var(--purple) 55%, transparent);
}
.ent-tag[data-kind="hero"] {
  color: color-mix(in srgb, var(--blue) 60%, var(--text));
  -webkit-text-decoration-color: color-mix(in srgb, var(--blue) 55%, transparent);
          text-decoration-color: color-mix(in srgb, var(--blue) 55%, transparent);
}
.ent-tag[data-kind="item"]:hover {
  color: var(--gold);
  -webkit-text-decoration-color: currentColor;
          text-decoration-color: currentColor;
}
.ent-tag[data-kind="ability"]:hover {
  color: var(--purple);
  -webkit-text-decoration-color: currentColor;
          text-decoration-color: currentColor;
}
.ent-tag[data-kind="hero"]:hover {
  color: var(--blue);
  -webkit-text-decoration-color: currentColor;
          text-decoration-color: currentColor;
}

@keyframes vspin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes vpulse {
  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.35;
    transform: scale(0.72);
  }
}

/* Indeterminate progress: a highlight sweeps across a track. Sweep color = --vshimmer-color. */
.vshimmer {
  position: relative;
  overflow: hidden;
  background: var(--line);
}
.vshimmer::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, var(--vshimmer-color, var(--gold)) 50%, transparent);
  transform: translateX(-100%);
  animation: vshimmer-sweep 1.25s ease-in-out infinite;
}
@keyframes vshimmer-sweep {
  to {
    transform: translateX(100%);
  }
}
@media (prefers-reduced-motion: reduce) {
  .vshimmer::after {
    animation: none;
    transform: none;
    opacity: 0.4;
  }
}

/* Report markdown embedded in a compact surface (Top-3 card) — kill the block paragraph margins. */
.coach-inline p {
  margin: 0 !important;
}

/* A timestamp / row that opens a moment-replay popover on hover. */
.moment-tag {
  border-bottom: 1px dotted var(--faint);
  transition: color 0.12s ease, border-color 0.12s ease;
}
.moment-tag:hover {
  color: var(--gold);
  border-bottom-color: var(--gold);
}
.moment-tag::after {
  content: "▸";
  font-size: 0.8em;
  margin-left: 2px;
  opacity: 0;
  transition: opacity 0.12s ease;
}
.moment-tag:hover::after {
  opacity: 0.7;
}

.vfoot-link {
  transition: color 0.15s ease;
}
.vfoot-link:hover {
  color: var(--text-bright) !important;
}

/* ── Coaching hub ─────────────────────────────────────────────────────────────
   The desk-and-rail layout collapses in stages: the rail drops under the evidence
   column first (its content is a companion, never the only home for anything), then
   the assignment's focus/priorities band stacks, then the priority cards go single
   file. Nothing is rail-only, so a narrow viewport loses layout, not content. */
@media (max-width: 1060px) {
  .vrail {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  .vsidebar {
    position: static !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    align-items: start !important;
  }
  /* The signed-in footer carries five link columns beside the brand, and there is a band between
     the wide layout and the two-column stack where brand + 5 squeezes "Billing & credits" onto two
     lines. Give the brand its own row and let the columns breathe. Applies to both footers — the
     marketing one is brand + 4 and gains the same room. */
  .vfoot-grid {
    grid-template-columns: repeat(3, 1fr) !important;
  }
  .vfoot-grid > :first-child {
    grid-column: 1 / -1;
    max-width: none !important;
  }
}
@media (max-width: 900px) {
  .vassign {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  .vsidebar {
    grid-template-columns: 1fr !important;
  }
}
@media (max-width: 700px) {
  .vprios {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  .vhide-sm {
    display: none !important;
  }
}

@media (max-width: 880px) {
  .vgrid3 {
    grid-template-columns: 1fr 1fr !important;
  }
  .vplans,
  .vpacks {
    grid-template-columns: 1fr !important;
  }
  .vhero-grid {
    grid-template-columns: 1fr 1fr !important;
  }
  .vgrowth {
    grid-template-columns: 1fr 1fr !important;
  }
  .vfoot-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 28px !important;
  }
  .vfoot-bottom {
    justify-content: flex-start !important;
  }
  .vfoot-bottom > span {
    text-align: left !important;
  }
  .vribbon {
    grid-template-columns: repeat(4, 1fr) !important;
  }
  .vhud {
    flex-wrap: wrap !important;
  }
  .vhud > * {
    flex: 1 1 auto !important;
  }
  .vbuild {
    gap: 24px !important;
  }
  .vsb-grid {
    grid-template-columns: minmax(104px, 1.3fr) 96px 54px 52px minmax(90px, 1fr) !important;
    gap: 8px !important;
  }
  .vsb-lh,
  .vsb-gpm,
  .vsb-heal {
    display: none !important;
  }
}
@media (max-width: 960px) {
  .vcol-gpm {
    display: none !important;
  }
  .vmatch-grid {
    grid-template-columns: 3px minmax(0, 1fr) 78px 136px 116px 168px !important;
  }
}
@media (max-width: 820px) {
  .vcol-dur {
    display: none !important;
  }
  .vmatch-grid {
    grid-template-columns: 3px minmax(0, 1fr) 70px 120px 140px !important;
  }
}
/* Under 880px the filter chips + search stopped sharing a row: chips wrap, search gets its own
   full-width line. */
@media (max-width: 880px) {
  .vmatch-filters {
    flex-wrap: wrap;
  }
  .vmatch-search {
    flex: 1 1 100%;
  }
  .vmatch-search input {
    width: 100% !important;
    box-sizing: border-box;
  }
}
@media (max-width: 640px) {
  .vpad {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }
  .vgrid3 {
    grid-template-columns: 1fr !important;
  }
  .vhero-grid {
    grid-template-columns: 1fr !important;
  }
  .vribbon {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  /* Phone: each match reads as a card — hero line on top, result + K/D/A beneath, the report CTA
     pinned right across both lines. The column-header row has nothing to label, so it goes. */
  .vmatch-head {
    display: none !important;
  }
  .vmatch-grid {
    grid-template-columns: 3px minmax(0, 1fr) auto !important;
    gap: 5px 12px !important;
  }
  .vmatch-grid > :first-child {
    grid-row: 1 / span 2;
    align-self: stretch;
    height: auto !important;
  }
  .vmatch-mid {
    display: flex;
    align-items: baseline;
    gap: 12px;
    grid-column: 2;
  }
  .vmatch-cta {
    grid-row: 1 / span 2;
    grid-column: 3;
    align-self: center;
  }

  /* Team scoreboard: DMG goes the way LH/GPM/HEAL already went, the hero column gets the width
     back, and the item icons drop to their own line under the row — six of them beside a hero name
     was never going to fit a phone. */
  .vsb-grid {
    grid-template-columns: minmax(0, 1fr) 96px 52px !important;
  }
  .vsb-dmg {
    display: none !important;
  }
  .vsb-grid > span.vsb-items {
    display: none !important; /* the header label — the icons line labels itself */
  }
  .vsb-grid > div.vsb-items {
    grid-column: 1 / -1;
    justify-content: flex-start !important;
  }

  /* Report reader: head-to-head rows put the metric label on its own line — five fixed columns
     never fit — and the per-death table drops the takeaway to a full-width line under its signal
     row (the WHERE track becomes the flexible one) and loses the ALONE bar. */
  .mir-row {
    flex-wrap: wrap;
    row-gap: 4px;
  }
  .mir-label {
    width: 100% !important;
  }
  .rpd-grid,
  .rpd-row {
    grid-template-columns: 48px 44px minmax(0, 1fr) 52px !important;
  }
  .rpd-alone {
    display: none !important;
  }
  .rpd-grid .rpd-take {
    display: none !important;
  }
  .rpd-row .rpd-take {
    grid-column: 1 / -1;
  }

  /* Following feed: the player name takes its own line; K/D/A and mode go (the match page has
     them); the hero name flexes beside the portrait, result, time and link. */
  .ffeed-row {
    flex-wrap: wrap;
    row-gap: 5px;
  }
  .ffeed-name {
    width: auto !important;
    flex: 1 1 100% !important;
  }
  .ffeed-hero {
    width: auto !important;
    flex: 1 1 !important;
    min-width: 0;
  }
  .ffeed-kda,
  .ffeed-mode {
    display: none !important;
  }

  /* Coaching patterns: the per-game strip drops to its own line; the label flexes and ellipsizes
     beside the count + state chip. */
  .pat-row {
    flex-wrap: wrap;
    row-gap: 8px;
  }
  .pat-label {
    width: auto !important;
    /* basis 0, not auto: with flex-wrap, an item's BASE size decides wrapping before shrink gets a
       say — a long label with basis auto pushes the chevron onto its own line instead of
       ellipsizing. */
    flex: 1 1 !important;
    min-width: 0;
  }
  .pat-strip {
    flex: 1 1 100% !important;
    order: 4;
  }
}

/* Anything an authored report embeds reflows with the column instead of widening the page. */
.report-md img {
  max-width: 100%;
  height: auto;
}

/* ============================================================================
   Marketing site — the signed-out front door. Scoped `hs-` so nothing here can
   reach into the app's surfaces, which share this stylesheet.
   ============================================================================ */

/* The reel: a horizontal filmstrip the visitor can drag. */
.hs-reel {
  scrollbar-width: thin;
}
.hs-reel::-webkit-scrollbar {
  height: 5px;
}
.hs-reel::-webkit-scrollbar-thumb {
  background: var(--line);
  border-radius: 3px;
}
.hs-cell {
  transition: transform 0.2s ease, border-color 0.2s ease;
}
.hs-cell:hover {
  transform: translateY(-3px);
}

/* The spine: the game clock running down the page, with a node per beat. The rail is positioned to
   land under the timestamps — it is derived from the same 120px column the beats use, so the two
   cannot drift apart when --maxw changes. */
.hs-rail {
  position: absolute;
  left: calc(50% - (var(--maxw) / 2) + 28px + 60px);
  top: 0;
  bottom: 0;
  width: 1px;
  background: linear-gradient(180deg, transparent, var(--line) 5%, var(--line) 92%, transparent);
}
.hs-beat {
  position: relative;
  display: grid;
  grid-template-columns: 120px 1fr;
  grid-gap: 38px;
  gap: 38px;
  padding: 0 0 68px;
  align-items: start;
}
.hs-clock {
  position: relative;
  text-align: right;
  padding-right: 28px;
}
.hs-node {
  position: absolute;
  right: -5px;
  top: 5px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 1px solid;
}

/* The 23:14 map. Pure CSS — nothing to fetch, nothing that can fail. */
.hs-map {
  position: relative;
  height: 300px;
  border-radius: 16px;
  overflow: hidden;
  background: radial-gradient(120% 130% at 30% 20%, #171c24, #0c0e12 70%);
  border: 1px solid var(--line);
}
.hs-map-grid {
  position: absolute;
  inset: 0;
  opacity: 0.45;
  background:
    linear-gradient(rgba(255, 255, 255, 0.038) 1px, transparent 1px) 0 0 / 100% 44px,
    linear-gradient(90deg, rgba(255, 255, 255, 0.038) 1px, transparent 1px) 0 0 / 44px 100%;
}
.hs-map-river {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    118deg,
    transparent 46%,
    rgba(110, 168, 255, 0.09) 47.5%,
    rgba(110, 168, 255, 0.09) 52.5%,
    transparent 54%
  );
}

.hs-tiles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 12px;
  gap: 12px;
}
.hs-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 56px;
  gap: 56px;
}
.hs-voice {
  display: grid;
  grid-template-columns: 196px 1fr;
  grid-gap: 32px;
  gap: 32px;
  padding: 23px 0;
  border-bottom: 1px solid var(--line-soft);
  transition: background 0.18s ease;
}
.hs-voice:hover {
  background: rgba(255, 255, 255, 0.014);
}
.hs-voice q {
  quotes: "\201C" "\201D";
}

/* Below the content width the rail can no longer sit under a centred column — it moves to the
   gutter and the beats become a single column beside it. */
@media (max-width: 1180px) {
  .hs-rail {
    left: 88px;
  }
}
@media (max-width: 900px) {
  .hs-tiles {
    grid-template-columns: 1fr;
  }
  .hs-split {
    grid-template-columns: 1fr;
    gap: 34px;
  }
  .hs-voice {
    grid-template-columns: 1fr;
    gap: 13px;
  }
}
@media (max-width: 820px) {
  .hs-rail {
    left: 11px;
  }
  .hs-beat {
    grid-template-columns: 1fr;
    gap: 14px;
    padding-left: 38px;
  }
  .hs-clock {
    text-align: left;
    padding-right: 0;
    display: flex;
    align-items: baseline;
    gap: 10px;
  }
  .hs-node {
    right: auto;
    left: -32px;
    top: 6px;
  }
  .hs-map {
    height: 230px;
  }
}
/* ============================================================================
   Header responsive — desktop chrome vs the mobile sheet (MobileMenu).
   The bar keeps the glanceable pair (credit pill, bell) at every width; under
   the cutoffs the nav links and the profile popover fold into the sheet and
   the burger takes the popover's place. Product folds at 1024px (four working
   surfaces + the actions cluster need ~980px), the pitch at 880px (where the
   invite CTA has to win the row). !important because the header's layout is
   inline styles — these queries are the one place that overrides them.
   ============================================================================ */
.hdr-burger {
  display: none;
}
@media (max-width: 1180px) {
  .site-header {
    padding: 13px 20px !important;
  }
  .hdr-left {
    gap: 20px !important;
  }
  .hdr-nav {
    gap: 16px !important;
  }
}
@media (max-width: 1024px) {
  .hdr-nav-product {
    display: none !important;
  }
  .site-header[data-auth="in"] .hdr-profile {
    display: none !important;
  }
  .site-header[data-auth="in"] .hdr-burger {
    display: flex;
  }
}
@media (max-width: 880px) {
  .hdr-nav-pitch {
    display: none !important;
  }
  .site-header[data-auth="out"] .hdr-signin {
    display: none !important;
  }
  .site-header[data-auth="out"] .hdr-burger {
    display: flex;
  }
}
@media (max-width: 640px) {
  .site-header {
    padding: 11px 14px !important;
  }
}

/* ============================================================================
   Homepage — the reel carousel, the visualizations, and the two-sided read.
   Scoped `hs-` alongside the rest of the marketing rules above.
   ============================================================================ */

/* ---- the reel: a focus carousel over crops of the real minimap ---- */
.hs-stage {
  position: relative;
  height: 330px;
  margin-bottom: 14px;
  overflow: hidden;
  /* Feather the edges so cards leave the strip rather than being clipped by it. */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.hs-card {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 236px;
  margin: -150px 0 0 -118px;
  border-radius: 13px;
  overflow: hidden;
  background: var(--panel);
  border: 1px solid var(--line);
  cursor: pointer;
  will-change: transform, opacity;
  transition:
    transform 0.46s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.46s cubic-bezier(0.22, 1, 0.36, 1),
    border-color 0.3s ease,
    box-shadow 0.3s ease;
}
.hs-card.key {
  border-color: rgba(244, 182, 82, 0.5);
  box-shadow: 0 0 0 1px rgba(244, 182, 82, 0.16), 0 0 46px rgba(244, 182, 82, 0.2);
}
.hs-crop {
  position: relative;
  height: 146px;
  background-repeat: no-repeat;
  /* The raster is much brighter than this page; the focused card gets some of it back. */
  filter: saturate(0.88) brightness(0.82);
  transition: filter 0.4s ease;
}
.hs-card.on .hs-crop {
  filter: saturate(0.95) brightness(0.9);
}
.hs-ring {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 26px;
  height: 26px;
  margin: -13px 0 0 -13px;
  border-radius: 50%;
  border: 2px solid var(--red);
  box-shadow: 0 0 0 4px rgba(255, 93, 108, 0.14), 0 0 20px rgba(255, 93, 108, 0.5);
}
.hs-ring::after {
  content: "";
  position: absolute;
  inset: 8px;
  border-radius: 50%;
  background: var(--red);
}
.hs-card.key .hs-ring {
  border-color: var(--gold);
  box-shadow: 0 0 0 5px rgba(244, 182, 82, 0.16), 0 0 26px var(--gold-glow);
}
.hs-card.key .hs-ring::after {
  background: var(--gold);
}
.hs-stamp {
  position: absolute;
  left: 10px;
  top: 9px;
  font: 600 var(--fs-3) var(--font-mono);
  color: #fff;
  text-shadow: 0 1px 6px #000;
}
.hs-idx {
  position: absolute;
  right: 10px;
  top: 8px;
  padding: 2px 6px;
  border-radius: 5px;
  background: rgba(6, 7, 9, 0.7);
  font: 700 var(--fs-2) var(--font-mono);
  color: var(--ghost);
}
.hs-cbody {
  padding: 12px 13px 14px;
  opacity: 0.55;
  transition: opacity 0.4s ease;
}
.hs-card.on .hs-cbody {
  opacity: 1;
}
.hs-by {
  font: 500 var(--fs-3) var(--font-mono);
  color: var(--faint);
  margin-bottom: 6px;
}
.hs-cause {
  font: 400 var(--fs-4)/1.45 var(--font-body);
  color: var(--text-bright);
  min-height: 36px;
}
.hs-meta {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
  margin-top: 10px;
}
.hs-chip {
  padding: 2.5px 7px;
  border-radius: 5px;
  font: 600 var(--fs-1) var(--font-mono);
  letter-spacing: 0.09em;
  background: rgba(255, 255, 255, 0.05);
  color: var(--ghost);
}
.hs-chip.near {
  background: rgba(255, 93, 108, 0.12);
  color: var(--red);
}
.hs-rnav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
}
.hs-rbtn {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--fill-2);
  color: var(--muted);
  font: 500 var(--fs-6) var(--font-display);
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: 0.16s ease;
}
.hs-rbtn:hover {
  background: var(--fill);
  color: var(--text-hi);
  border-color: var(--faint-2);
}
.hs-rdots {
  display: flex;
  gap: 5px;
  align-items: center;
}
.hs-rdot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--line);
  border: none;
  padding: 0;
  cursor: pointer;
  transition: 0.2s ease;
}
.hs-rdot.on {
  background: var(--gold);
  width: 16px;
  border-radius: 3px;
}
.hs-rcap {
  text-align: center;
  margin-top: 11px;
  font: 500 var(--fs-1) var(--font-mono);
  letter-spacing: 0.2em;
  color: var(--ghost);
}

/* ---- the match identity strip ---- */
.hs-mid {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
  justify-content: center;
  margin: 19px auto 0;
  padding: 8px 15px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--fill-2);
  font: 500 var(--fs-2) var(--font-mono);
  letter-spacing: 0.07em;
  color: var(--faint-2);
}
.hs-mid b {
  color: var(--text-bright);
  font-weight: 600;
}
.hs-mid .loss {
  color: var(--red);
  font-weight: 600;
}
.hs-mid .grade {
  color: var(--gold);
  font-weight: 700;
}

/* ---- the real map, dimmed into the page ---- */
.hs-mapdim {
  filter: saturate(0.88) brightness(0.86);
}
.hs-mapleg {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 10px;
  font: 500 var(--fs-1) var(--font-mono);
  letter-spacing: 0.1em;
  color: var(--faint-2);
}
.hs-mapleg span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.hs-mapleg i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  display: inline-block;
}

/* ---- visualization shells ---- */
.hs-viz {
  margin-top: 26px;
  padding: 16px 18px 14px;
  border-radius: 13px;
  background: var(--panel);
  border: 1px solid var(--line);
}
.hs-viz-hd {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  font: 600 var(--fs-1) var(--font-mono);
  letter-spacing: 0.14em;
  color: var(--faint-2);
  margin-bottom: 12px;
}
.hs-viz-hd .rt {
  margin-left: auto;
  color: var(--ghost);
  letter-spacing: 0.1em;
}

/* ---- forwardness gauge ---- */
.hs-gauge {
  position: relative;
  height: 26px;
  margin: 4px 0 6px;
}
.hs-gauge .track {
  position: absolute;
  left: 0;
  right: 0;
  top: 12px;
  height: 2px;
  background: var(--line);
}
.hs-gauge .span {
  position: absolute;
  top: 12px;
  height: 2px;
  background: linear-gradient(90deg, var(--blue), var(--red));
}
.hs-gauge .tick {
  position: absolute;
  top: 6px;
  width: 1px;
  height: 14px;
  background: var(--faint-2);
}
.hs-gauge .team,
.hs-gauge .you {
  position: absolute;
  top: 50%;
  border-radius: 50%;
  transform: translate(-50%, -50%);
}
.hs-gauge .team {
  width: 11px;
  height: 11px;
  background: var(--blue);
  box-shadow: 0 0 0 4px rgba(110, 168, 255, 0.16);
}
.hs-gauge .you {
  width: 14px;
  height: 14px;
  background: var(--red);
  box-shadow: 0 0 0 5px rgba(255, 93, 108, 0.16), 0 0 16px rgba(255, 93, 108, 0.5);
}
.hs-gauge-lbl {
  display: flex;
  justify-content: space-between;
  font: 500 var(--fs-1) var(--font-mono);
  letter-spacing: 0.08em;
  color: var(--ghost);
}
.hs-gauge-cap {
  margin: 10px 0 0;
  font: 400 var(--fs-4)/1.5 var(--font-body);
  color: var(--muted-2);
}
.hs-gauge-cap b {
  color: var(--red);
  font: 600 var(--fs-4) var(--font-mono);
}
.hs-sbar {
  display: flex;
  height: 26px;
  border-radius: 7px;
  overflow: hidden;
  margin-top: 12px;
}
.hs-sbar div {
  display: flex;
  align-items: center;
  justify-content: center;
  font: 600 var(--fs-1) var(--font-mono);
  letter-spacing: 0.06em;
}
.hs-sbar .a {
  background: rgba(255, 93, 108, 0.26);
  color: #ffb3ba;
}
.hs-sbar .b {
  background: rgba(255, 255, 255, 0.05);
  color: var(--faint);
}

/* ---- assignment trend ---- */
.hs-trend {
  position: relative;
  height: 132px;
  margin-top: 20px;
}
.hs-trend svg {
  display: block;
  width: 100%;
  height: 100%;
}
/* Round marks must sit OUTSIDE the stretched viewBox — a <circle> in a
   preserveAspectRatio="none" plot renders as an ellipse. */
.hs-tdot {
  position: absolute;
  width: 9px;
  height: 9px;
  margin: -4.5px 0 0 -4.5px;
  border-radius: 50%;
  border: 2px solid var(--panel);
  box-sizing: content-box;
}
.hs-tdot.last {
  width: 12px;
  height: 12px;
  margin: -6px 0 0 -6px;
  box-shadow: 0 0 16px rgba(61, 220, 151, 0.6);
}
.hs-tdot em {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 15px;
  font: 600 var(--fs-1) var(--font-mono);
  font-style: normal;
  color: var(--text-bright);
  white-space: nowrap;
}
.hs-trend-ax {
  display: flex;
  justify-content: space-between;
  margin-top: 7px;
  font: 500 var(--fs-1) var(--font-mono);
  color: var(--ghost);
}
.hs-tnote {
  margin-top: 11px;
  font: 500 var(--fs-1) var(--font-mono);
  letter-spacing: 0.1em;
  color: var(--ghost);
}

/* ---- keep / change ---- */
.hs-hands {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 14px;
  gap: 14px;
  margin-top: 26px;
}
.hs-hand {
  border-radius: 14px;
  overflow: hidden;
  background: var(--panel);
  border: 1px solid var(--line);
}
.hs-hand.keep {
  border-color: rgba(61, 220, 151, 0.3);
  background: linear-gradient(180deg, rgba(61, 220, 151, 0.06), var(--panel) 58%);
}
.hs-hand.fix {
  border-color: rgba(244, 182, 82, 0.3);
  background: linear-gradient(180deg, rgba(244, 182, 82, 0.06), var(--panel) 58%);
}
.hs-hand-hd {
  padding: 11px 17px;
  border-bottom: 1px solid var(--line-soft);
  font: 600 var(--fs-1) var(--font-mono);
  letter-spacing: 0.16em;
}
.hs-hand.keep .hs-hand-hd {
  color: var(--green);
}
.hs-hand.fix .hs-hand-hd {
  color: var(--gold);
}
.hs-hand-bd {
  padding: 18px 17px;
}
.hs-hand-bd h4 {
  margin: 0 0 8px;
  font: 600 var(--fs-7)/1.34 var(--font-display);
  color: var(--text-hi);
}
.hs-hand-bd .ev {
  font: 600 var(--fs-3) var(--font-mono);
  color: var(--faint);
  margin-bottom: 11px;
}
.hs-hand-bd p {
  margin: 0;
  font: 300 var(--fs-5)/1.6 var(--font-body);
  color: var(--muted-2);
}
.hs-hand-bd .do {
  margin-top: 13px;
  padding-top: 12px;
  border-top: 1px solid var(--line-faint);
  font: 400 var(--fs-5)/1.55 var(--font-body);
  color: var(--text);
}
.hs-hand-bd .do span {
  display: block;
  font: 600 var(--fs-1) var(--font-mono);
  letter-spacing: 0.16em;
  margin-bottom: 5px;
}
.hs-hand.keep .do span {
  color: var(--green);
}
.hs-hand.fix .do span {
  color: var(--gold);
}

/* ---- the drill ---- */
.hs-drill {
  margin-top: 26px;
  border-radius: 15px;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(244, 182, 82, 0.08), var(--panel) 58%);
  border: 1px solid rgba(244, 182, 82, 0.34);
}
.hs-drill-hd {
  padding: 12px 20px;
  border-bottom: 1px solid rgba(244, 182, 82, 0.2);
  font: 600 var(--fs-1) var(--font-mono);
  letter-spacing: 0.16em;
  color: var(--gold);
}
.hs-drill-bd {
  padding: 20px 20px 18px;
}
.hs-leg {
  display: grid;
  grid-template-columns: 70px 1fr;
  grid-gap: 14px;
  gap: 14px;
  align-items: baseline;
  padding: 11px 0;
  border-bottom: 1px solid var(--line-faint);
}
.hs-leg:last-of-type {
  border-bottom: none;
}
.hs-leg .l {
  font: 600 var(--fs-1) var(--font-mono);
  letter-spacing: 0.16em;
  color: var(--faint-2);
  text-align: right;
}
.hs-leg .t {
  font: 300 var(--fs-7)/1.58 var(--font-body);
  color: var(--text);
}
.hs-leg.act .t {
  color: var(--text-hi);
}
.hs-leg.act .l {
  color: var(--gold);
}
.hs-tgt {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 15px;
  padding: 12px 15px;
  border-radius: 10px;
  background: rgba(61, 220, 151, 0.07);
  border: 1px solid rgba(61, 220, 151, 0.26);
}
.hs-tgt .l {
  font: 600 var(--fs-1) var(--font-mono);
  letter-spacing: 0.16em;
  color: var(--green);
}
.hs-tgt .v {
  font: 600 var(--fs-6) var(--font-display);
  color: var(--text-hi);
}

@media (max-width: 880px) {
  .hs-hands {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 640px) {
  .hs-leg {
    grid-template-columns: 1fr;
    gap: 4px;
  }
  .hs-leg .l {
    text-align: left;
  }
}
@media (prefers-reduced-motion: reduce) {
  .hs-card {
    transition: none;
  }
}

/* ============================================================================
   /how-it-works — the conveyor: alternating step bands, each with its figure.
   ============================================================================ */

.hw-step {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 44px;
  gap: 44px;
  align-items: start;
  padding-top: 52px;
  margin-top: 52px;
  border-top: 1px solid var(--line-soft);
}
/* Swap which side the figure sits on. Four identical bands read as a table. */
.hw-step.flip > .hw-figcol {
  order: -1;
}
.hw-num {
  font: 700 clamp(46px, 6vw, 74px) / 1 var(--font-display);
  letter-spacing: -0.05em;
  color: rgba(244, 182, 82, 0.16);
  margin-bottom: -14px;
}
.hw-figcol {
  position: relative;
}
@media (max-width: 900px) {
  .hw-step {
    /* minmax(0,·): don't let a wide figure blow the single column past the viewport. */
    grid-template-columns: minmax(0, 1fr);
    gap: 26px;
  }
  /* On one column the figure always follows its prose — flipping would orphan it. */
  .hw-step.flip > .hw-figcol {
    order: 0;
  }
}

/* ---- shared figure shell ---- */
.hw-fig {
  padding: 16px 18px 15px;
  border-radius: 13px;
  background: var(--panel);
  border: 1px solid var(--line);
}
.hw-fig-hd {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  font: 600 var(--fs-1) var(--font-mono);
  letter-spacing: 0.14em;
  color: var(--faint-2);
  margin-bottom: 12px;
}
.hw-fig-hd .rt {
  margin-left: auto;
  color: var(--ghost);
}

/* ---- 1 · the parsed combat log ---- */
.hw-term {
  font: 500 var(--fs-3)/1.85 var(--font-mono);
  color: var(--muted-2);
  max-height: 210px;
  overflow: hidden;
  position: relative;
}
/* The log is a slice of something much longer — fade the cut rather than ending it flat. */
.hw-term::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 44px;
  background: linear-gradient(transparent, var(--panel));
}
.hw-ln {
  display: grid;
  grid-template-columns: 52px 96px 1fr 54px;
  grid-gap: 10px;
  gap: 10px;
  opacity: 0;
  transition: opacity 0.4s ease;
}
.hw-ln.in {
  opacity: 1;
}
.hw-ln .t {
  color: var(--ghost);
}
.hw-ln .a {
  color: var(--blue);
}
.hw-ln .i {
  color: var(--muted);
}
.hw-ln .v {
  color: var(--red);
  text-align: right;
}
.hw-counts {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 12px;
  gap: 12px;
  margin-top: 14px;
}
.hw-count {
  padding: 15px 14px;
  border-radius: 11px;
  background: var(--fill-2);
  border: 1px solid var(--line-faint);
  text-align: center;
}
.hw-count-v {
  font: 700 clamp(20px, 2.4vw, 27px) var(--font-display);
  color: var(--gold);
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}
.hw-count-k {
  font: 500 var(--fs-1) var(--font-mono);
  letter-spacing: 0.11em;
  color: var(--faint-2);
  margin-top: 5px;
}
@media (max-width: 640px) {
  .hw-counts {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ---- 2 · deaths grouped by cause ---- */
.hw-cluster {
  position: relative;
  height: 250px;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--line);
}
.hw-cluster img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.8) brightness(0.6);
}
.hw-d {
  position: absolute;
  width: 20px;
  height: 20px;
  margin: -10px 0 0 -10px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font: 700 var(--fs-1) var(--font-mono);
  color: #0b0c0f;
  background: var(--red);
  transition: all 1s cubic-bezier(0.22, 1, 0.36, 1);
}
.hw-cluster.grouped .hw-d.dive {
  background: var(--gold);
  box-shadow: 0 0 0 3px rgba(244, 182, 82, 0.2);
}
.hw-cluster.grouped .hw-d.other {
  opacity: 0.28;
  transform: scale(0.7);
}
.hw-cl-cap {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 10px;
  font: 500 var(--fs-1) var(--font-mono);
  letter-spacing: 0.1em;
  color: var(--faint-2);
}
.hw-cl-cap span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.hw-cl-cap i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  display: inline-block;
}

/* ---- 3 · the five voices ---- */
.hw-voices {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.hw-vtab {
  padding: 6px 12px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--fill-2);
  color: var(--muted-2);
  font: 600 var(--fs-3) var(--font-display);
  cursor: pointer;
  transition: 0.16s ease;
}
.hw-vtab:hover {
  color: var(--text);
}
.hw-vtab.on {
  font-weight: 700;
}
.hw-vquote {
  margin: 0;
  font: 300 clamp(15.5px, 1.9vw, 17.5px) / 1.6 var(--font-body);
  color: var(--text-hi);
  min-height: 82px;
  animation: hw-fade 0.34s ease;
}
.hw-vwho {
  margin-top: 12px;
  font: 500 var(--fs-2) var(--font-mono);
  letter-spacing: 0.1em;
  color: var(--faint-2);
  text-transform: uppercase;
}
@keyframes hw-fade {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
}

/* ---- 4 · the graded target ---- */
.hw-trend {
  position: relative;
  height: 128px;
  margin-top: 16px;
}
.hw-trend svg {
  display: block;
  width: 100%;
  height: 100%;
}
/* The line draws itself once, on entry. */
.hw-draw {
  stroke-dasharray: 300;
  stroke-dashoffset: 300;
  transition: stroke-dashoffset 1.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.hw-trend.in .hw-draw {
  stroke-dashoffset: 0;
}
.hw-tdot {
  position: absolute;
  width: 9px;
  height: 9px;
  margin: -4.5px 0 0 -4.5px;
  border-radius: 50%;
  border: 2px solid var(--panel);
  box-sizing: content-box;
  opacity: 0;
  transition: opacity 0.4s ease;
}
.hw-trend.in .hw-tdot {
  opacity: 1;
}
.hw-tdot.last {
  width: 12px;
  height: 12px;
  margin: -6px 0 0 -6px;
  box-shadow: 0 0 16px rgba(61, 220, 151, 0.6);
}
.hw-tdot em {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 15px;
  font: 600 var(--fs-1) var(--font-mono);
  font-style: normal;
  color: var(--text-bright);
  white-space: nowrap;
}
.hw-trend-ax {
  display: flex;
  justify-content: space-between;
  margin-top: 7px;
  font: 500 var(--fs-1) var(--font-mono);
  color: var(--ghost);
}

@media (prefers-reduced-motion: reduce) {
  .hw-ln,
  .hw-tdot {
    opacity: 1;
    transition: none;
  }
  .hw-d {
    transition: none;
  }
  .hw-draw {
    transition: none;
    stroke-dashoffset: 0;
  }
  .hw-vquote {
    animation: none;
  }
}

/* ============================================================================
   /method — the curriculum, one area at a time.
   ============================================================================ */

.mt-legend {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  align-items: center;
  margin: 4px 0 18px;
  font: 500 var(--fs-1) var(--font-mono);
  letter-spacing: 0.11em;
  color: var(--faint-2);
}
.mt-legend span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.mt-legend b {
  font: 700 var(--fs-4) var(--font-display);
  color: var(--gold);
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}
.mt-sens-key {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--purple);
  display: inline-block;
}

.mt-acc {
  border: 1px solid var(--line);
  border-radius: 15px;
  overflow: hidden;
  background: var(--panel);
}
.mt-row {
  border-bottom: 1px solid var(--line-faint);
}
.mt-row:last-child {
  border-bottom: none;
}
.mt-head {
  width: 100%;
  display: grid;
  grid-template-columns: 30px 1fr auto;
  grid-gap: 15px;
  gap: 15px;
  align-items: center;
  padding: 16px 20px;
  background: none;
  border: none;
  color: inherit;
  cursor: pointer;
  text-align: left;
  transition: background 0.2s ease;
}
.mt-head:hover {
  background: rgba(255, 255, 255, 0.02);
}
.mt-row.on .mt-head {
  background: linear-gradient(90deg, rgba(244, 182, 82, 0.07), transparent 70%);
}
.mt-n {
  font: 700 var(--fs-3) var(--font-mono);
  color: var(--ghost);
  transition: color 0.25s ease;
}
.mt-row.on .mt-n {
  color: var(--gold);
}
/* Both are spans inside a grid cell — without `block` they run together on one line. */
.mt-nm {
  display: block;
  font: 600 var(--fs-7) var(--font-display);
  color: var(--text-hi);
  letter-spacing: -0.014em;
}
.mt-q {
  display: block;
  font: 300 var(--fs-5)/1.5 var(--font-body);
  color: var(--muted-2);
  margin-top: 3px;
}
.mt-cx {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid var(--line);
  display: grid;
  place-items: center;
  font: 500 var(--fs-5) var(--font-display);
  color: var(--faint);
  transition: transform 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}
.mt-row.on .mt-cx {
  transform: rotate(45deg);
  border-color: var(--gold);
  color: var(--gold);
}

/* 0fr → 1fr animates height without measuring the content in JS. */
.mt-body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.mt-row.on .mt-body {
  grid-template-rows: 1fr;
}
.mt-body > div {
  overflow: hidden;
}
.mt-pad {
  padding: 4px 20px 22px 65px;
}
.mt-sub {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font: 600 var(--fs-1) var(--font-mono);
  letter-spacing: 0.16em;
  color: var(--faint-2);
  text-transform: uppercase;
  margin: 16px 0 8px;
}
.mt-sub:first-child {
  margin-top: 0;
}
.mt-count {
  font: 500 var(--fs-1) var(--font-mono);
  letter-spacing: 0.1em;
  color: var(--ghost);
  text-transform: none;
}
.mt-p {
  margin: 0;
  font: 300 var(--fs-6)/1.65 var(--font-body);
  color: var(--muted);
  max-width: 62ch;
}
.mt-mistake {
  margin-top: 14px;
  padding: 14px 16px;
  border-radius: 11px;
  background: rgba(255, 93, 108, 0.07);
  border: 1px solid rgba(255, 93, 108, 0.22);
}
.mt-mistake h4 {
  margin: 0 0 5px;
  font: 600 var(--fs-5) var(--font-display);
  color: var(--text-bright);
}
.mt-mistake p {
  margin: 0;
  font: 300 var(--fs-5)/1.55 var(--font-body);
  color: var(--muted-2);
  max-width: 58ch;
}
.mt-metrics {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
}
.mt-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 9px;
  border-radius: 6px;
  background: var(--fill-2);
  border: 1px solid var(--line-faint);
  font: 500 var(--fs-3) var(--font-mono);
  color: var(--muted-2);
}
.mt-chip.primary {
  background: var(--gold-dim);
  border-color: rgba(244, 182, 82, 0.3);
  color: var(--text-bright);
}
.mt-ar {
  font: 700 var(--fs-2) var(--font-mono);
  font-style: normal;
}
.mt-ar.up {
  color: var(--green);
}
.mt-ar.dn {
  color: var(--gold);
}
.mt-sens {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--purple);
  opacity: 0.85;
}
.mt-go {
  display: inline-flex;
  margin-top: 16px;
  font: 600 var(--fs-3) var(--font-mono);
  letter-spacing: 0.1em;
  color: var(--gold);
}

@media (max-width: 640px) {
  .mt-pad {
    padding-left: 20px;
  }
  .mt-head {
    grid-template-columns: 24px 1fr auto;
    gap: 11px;
    padding: 14px 16px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .mt-body,
  .mt-cx {
    transition: none;
  }
}

/* ── Admin System: the instrument ───────────────────────────────────────────── */
.inst-hovercol {
  cursor: pointer;
  border-radius: 10px;
  transition: background 0.12s ease;
}
.inst-hovercol:hover,
.inst-hovercol:focus-visible {
  background: rgba(255, 255, 255, 0.025);
  outline: none;
}
.pulse-track {
  cursor: crosshair;
}
/* NOW mode: a station ring blooms when a worker claims or a mote arrives. */
.inst-pulse-ring {
  transform: translate(-50%, -50%) scale(0.4);
  opacity: 0.85;
  animation: inst-pulse-bloom 1s ease-out forwards;
  pointer-events: none;
}
@keyframes inst-pulse-bloom {
  to {
    transform: translate(-50%, -50%) scale(1.9);
    opacity: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .inst-pulse-ring {
    animation: none;
    opacity: 0;
  }
  .inst-mote {
    transition: none !important;
  }
}

/* ── Draft panel: vertical pick rail (Radiant left, Dire right) ─────────────── */
.draft-step {
  display: grid;
  grid-template-columns: 1fr 64px 1fr;
  align-items: center;
  padding: 6px 0;
}
.draft-step-card {
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 0;
  grid-row: 1;
}
.draft-step-card.radiant {
  grid-column: 1;
  flex-direction: row-reverse;
  text-align: right;
  justify-self: end;
}
.draft-step-card.dire {
  grid-column: 3;
  justify-self: start;
}
.draft-step-dot {
  grid-column: 2;
  grid-row: 1;
}
.draft-portrait {
  width: 72px;
  height: 40px;
  border-radius: 4px;
  object-fit: cover;
  display: block;
}
@media (max-width: 720px) {
  .draft-step {
    grid-template-columns: 1fr 44px 1fr;
  }
  .draft-portrait {
    width: 54px;
    height: 30px;
  }
}