/* cyrillic-ext */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/ibmplexmono/v20/-F63fjptAgt5VM-kVkqdyU8n1iIq129k.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: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/ibmplexmono/v20/-F63fjptAgt5VM-kVkqdyU8n1isq129k.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/ibmplexmono/v20/-F63fjptAgt5VM-kVkqdyU8n1iAq129k.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: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/ibmplexmono/v20/-F63fjptAgt5VM-kVkqdyU8n1iEq129k.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: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/ibmplexmono/v20/-F63fjptAgt5VM-kVkqdyU8n1i8q1w.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: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/ibmplexmono/v20/-F6qfjptAgt5VM-kVkqdyU8n3twJwl1FgtIU.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: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/ibmplexmono/v20/-F6qfjptAgt5VM-kVkqdyU8n3twJwlRFgtIU.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/ibmplexmono/v20/-F6qfjptAgt5VM-kVkqdyU8n3twJwl9FgtIU.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: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/ibmplexmono/v20/-F6qfjptAgt5VM-kVkqdyU8n3twJwl5FgtIU.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: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/ibmplexmono/v20/-F6qfjptAgt5VM-kVkqdyU8n3twJwlBFgg.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: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/ibmplexmono/v20/-F6qfjptAgt5VM-kVkqdyU8n3vAOwl1FgtIU.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: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/ibmplexmono/v20/-F6qfjptAgt5VM-kVkqdyU8n3vAOwlRFgtIU.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/ibmplexmono/v20/-F6qfjptAgt5VM-kVkqdyU8n3vAOwl9FgtIU.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: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/ibmplexmono/v20/-F6qfjptAgt5VM-kVkqdyU8n3vAOwl5FgtIU.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: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/ibmplexmono/v20/-F6qfjptAgt5VM-kVkqdyU8n3vAOwlBFgg.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: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/ibmplexsans/v23/zYXzKVElMYYaJe8bpLHnCwDKr932-G7dytD-Dmu1syxTKYbABA.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: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/ibmplexsans/v23/zYXzKVElMYYaJe8bpLHnCwDKr932-G7dytD-Dmu1syxaKYbABA.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/ibmplexsans/v23/zYXzKVElMYYaJe8bpLHnCwDKr932-G7dytD-Dmu1syxdKYbABA.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: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/ibmplexsans/v23/zYXzKVElMYYaJe8bpLHnCwDKr932-G7dytD-Dmu1syxRKYbABA.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: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/ibmplexsans/v23/zYXzKVElMYYaJe8bpLHnCwDKr932-G7dytD-Dmu1syxQKYbABA.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: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/ibmplexsans/v23/zYXzKVElMYYaJe8bpLHnCwDKr932-G7dytD-Dmu1syxeKYY.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: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/ibmplexsans/v23/zYXzKVElMYYaJe8bpLHnCwDKr932-G7dytD-Dmu1syxTKYbABA.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: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/ibmplexsans/v23/zYXzKVElMYYaJe8bpLHnCwDKr932-G7dytD-Dmu1syxaKYbABA.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/ibmplexsans/v23/zYXzKVElMYYaJe8bpLHnCwDKr932-G7dytD-Dmu1syxdKYbABA.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: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/ibmplexsans/v23/zYXzKVElMYYaJe8bpLHnCwDKr932-G7dytD-Dmu1syxRKYbABA.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: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/ibmplexsans/v23/zYXzKVElMYYaJe8bpLHnCwDKr932-G7dytD-Dmu1syxQKYbABA.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: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/ibmplexsans/v23/zYXzKVElMYYaJe8bpLHnCwDKr932-G7dytD-Dmu1syxeKYY.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: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/ibmplexsans/v23/zYXzKVElMYYaJe8bpLHnCwDKr932-G7dytD-Dmu1syxTKYbABA.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: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/ibmplexsans/v23/zYXzKVElMYYaJe8bpLHnCwDKr932-G7dytD-Dmu1syxaKYbABA.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/ibmplexsans/v23/zYXzKVElMYYaJe8bpLHnCwDKr932-G7dytD-Dmu1syxdKYbABA.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: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/ibmplexsans/v23/zYXzKVElMYYaJe8bpLHnCwDKr932-G7dytD-Dmu1syxRKYbABA.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: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/ibmplexsans/v23/zYXzKVElMYYaJe8bpLHnCwDKr932-G7dytD-Dmu1syxQKYbABA.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: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/ibmplexsans/v23/zYXzKVElMYYaJe8bpLHnCwDKr932-G7dytD-Dmu1syxeKYY.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: 'IBM Plex Sans Condensed';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/ibmplexsanscondensed/v15/Gg8gN4UfRSqiPg7Jn2ZI12V4DCEwkj1E4LVeHY527LvhpYY1Fw.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* vietnamese */
@font-face {
  font-family: 'IBM Plex Sans Condensed';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/ibmplexsanscondensed/v15/Gg8gN4UfRSqiPg7Jn2ZI12V4DCEwkj1E4LVeHY527LvjpYY1Fw.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: 'IBM Plex Sans Condensed';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/ibmplexsanscondensed/v15/Gg8gN4UfRSqiPg7Jn2ZI12V4DCEwkj1E4LVeHY527LvipYY1Fw.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: 'IBM Plex Sans Condensed';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/ibmplexsanscondensed/v15/Gg8gN4UfRSqiPg7Jn2ZI12V4DCEwkj1E4LVeHY527LvspYY.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: 'IBM Plex Sans Condensed';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/ibmplexsanscondensed/v15/Gg8gN4UfRSqiPg7Jn2ZI12V4DCEwkj1E4LVeHY4S7bvhpYY1Fw.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* vietnamese */
@font-face {
  font-family: 'IBM Plex Sans Condensed';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/ibmplexsanscondensed/v15/Gg8gN4UfRSqiPg7Jn2ZI12V4DCEwkj1E4LVeHY4S7bvjpYY1Fw.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: 'IBM Plex Sans Condensed';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/ibmplexsanscondensed/v15/Gg8gN4UfRSqiPg7Jn2ZI12V4DCEwkj1E4LVeHY4S7bvipYY1Fw.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: 'IBM Plex Sans Condensed';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/ibmplexsanscondensed/v15/Gg8gN4UfRSqiPg7Jn2ZI12V4DCEwkj1E4LVeHY4S7bvspYY.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;
}

:root{
  color-scheme:light;
  --paper:#F5F4F0; --surface:#FFFFFF; --surface-2:#EDEBE4; --surface-3:#E4E1D8;
  --ink:#151A20; --ink-2:#4A535E; --ink-3:#656E78;
  --rule:#D6D2C8; --grid:#E6E3DA;
  --accent:#1F5F8B; --accent-soft:#E2EDF4; --accent-ink:#164A6D;
  --ok:#2C6E4E; --ok-soft:#E0EEE6;
  --warn:#96660F; --warn-soft:#F5EBD8;
  --oos:#A6362E; --oos-soft:#F5E3E0;
  --shadow:0 1px 2px rgba(21,26,32,.06), 0 8px 24px -16px rgba(21,26,32,.28);
  --f-disp:"IBM Plex Sans Condensed","Helvetica Neue",Arial,sans-serif;
  --f-body:"IBM Plex Sans","Helvetica Neue",Arial,sans-serif;
  --f-mono:"IBM Plex Mono","SF Mono",Menlo,monospace;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --paper:#11151A; --surface:#171C22; --surface-2:#1E242C; --surface-3:#262D36;
    --ink:#E7EAEE; --ink-2:#A6AFBA; --ink-3:#838C97;
    --rule:#2B323B; --grid:#212831;
    --accent:#74B4DE; --accent-soft:#15303F; --accent-ink:#9CCBEA;
    --ok:#63BE92; --ok-soft:#152E23;
    --warn:#D6A342; --warn-soft:#2E2413;
    --oos:#E0776D; --oos-soft:#33201E;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 24px -16px rgba(0,0,0,.8);
  }
}
/* La elección explícita gana en ambos sentidos: claro sobre un sistema oscuro
   y oscuro sobre un sistema claro. color-scheme arrastra además los controles
   nativos (desplegables, flechas de los campos numéricos, barras de scroll). */
:root[data-theme="light"]{color-scheme:light}
:root[data-theme="dark"]{
  color-scheme:dark;
  --paper:#11151A; --surface:#171C22; --surface-2:#1E242C; --surface-3:#262D36;
  --ink:#E7EAEE; --ink-2:#A6AFBA; --ink-3:#838C97;
  --rule:#2B323B; --grid:#212831;
  --accent:#74B4DE; --accent-soft:#15303F; --accent-ink:#9CCBEA;
  --ok:#63BE92; --ok-soft:#152E23;
  --warn:#D6A342; --warn-soft:#2E2413;
  --oos:#E0776D; --oos-soft:#33201E;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 24px -16px rgba(0,0,0,.8);
}

*{box-sizing:border-box}
body{background:var(--paper);color:var(--ink);font-family:var(--f-body);font-size:15px;line-height:1.6;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:var(--f-disp);font-weight:600;text-wrap:balance;line-height:1.15;margin:0}
p{margin:0}
a{color:var(--accent);text-decoration-thickness:1px;text-underline-offset:2px}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:2px}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
@media (prefers-reduced-motion:no-preference){:root{scroll-behavior:smooth}}

/* ---------- shell ---------- */
.shell{display:grid;grid-template-columns:232px minmax(0,1fr);gap:0;max-width:1800px;margin:0 auto}
/* En monitores panorámicos el índice puede respirar un poco más */
@media (min-width:1600px){.shell{grid-template-columns:264px minmax(0,1fr)}}
.rail{position:sticky;top:0;align-self:start;height:100vh;max-height:100vh;box-sizing:border-box;display:flex;flex-direction:column;overflow:hidden;border-right:1px solid var(--rule);background:var(--paper);padding:0}
.rail-top{flex-shrink:0;padding:24px 16px 0;display:flex;flex-direction:column}
.rail-brand{font-family:var(--f-disp);font-size:18px;letter-spacing:.01em;line-height:1.1;margin-bottom:4px}
.rail-sub{font-family:var(--f-mono);font-size:10.5px;color:var(--ink-3);letter-spacing:.04em;text-transform:uppercase;margin-bottom:22px}
.rail nav{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;display:flex;flex-direction:column;gap:2px;padding:12px 16px 42px;scrollbar-width:thin}
.rail .grp{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink-2);font-weight:600;padding:14px 8px 4px;border-bottom:1px solid var(--rule);margin-bottom:3px}
.rail .grp:first-child{padding-top:0}
.rail a{display:grid;grid-template-columns:26px 1fr;gap:6px;align-items:baseline;padding:6px 8px;border-radius:4px;color:var(--ink-2);text-decoration:none;font-size:13.5px;line-height:1.3}
.rail a span{font-family:var(--f-mono);font-size:10.5px;color:var(--ink-3)}
.rail a:hover{background:var(--surface-2);color:var(--ink)}
.rail a.on{background:var(--accent-soft);color:var(--accent-ink);font-weight:500}
.rail a.on span{color:var(--accent)}
main{padding:0 clamp(16px,3.4vw,52px) 96px;min-width:0}
section{padding-top:56px;scroll-margin-top:16px}
/* El contenedor se ensancha para que cartas, tablas y herramientas aprovechen el
   monitor. La legibilidad se protege aparte: el texto corrido nunca pasa de ~74
   caracteres por línea, porque a partir de ahí el ojo pierde el salto de renglón. */
.wrap{max-width:1400px}
.prose{max-width:66ch}
main p{max-width:74ch}
main ul,main ol{max-width:76ch}
/* excepciones: texto que vive dentro de una caja ya estrecha y debe llenarla */
.metric small,.qcell p,.model .ex,.gl-row p,.readout div,caption{max-width:none}

/* ---------- headings ---------- */
.eyebrow{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.10em;text-transform:uppercase;color:var(--accent);margin-bottom:8px;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.eyebrow b{font-weight:500;color:var(--ink-3)}
h2{font-size:clamp(24px,3vw,31px);letter-spacing:-.012em;margin-bottom:10px}
h3{font-size:19px;letter-spacing:-.006em;margin-bottom:6px}
h4{font-size:14px;letter-spacing:.01em;margin-bottom:4px}
.lede{color:var(--ink-2);font-size:16px;margin-bottom:22px}
.src{font-family:var(--f-mono);font-size:10.5px;color:var(--ink-3);letter-spacing:.02em;white-space:nowrap}

/* ---------- hero ---------- */
.hero{padding:44px 0 4px;border-bottom:1px solid var(--rule)}
.hero-band{background:
   linear-gradient(var(--grid) 1px,transparent 1px) 0 0/100% 22px,
   linear-gradient(90deg,var(--grid) 1px,transparent 1px) 0 0/22px 100%,
   var(--surface);
  border:1px solid var(--rule);border-radius:3px;padding:26px 26px 22px;position:relative;overflow:hidden}
.hero-band::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,var(--surface) 30%,transparent 78%);pointer-events:none}
.hero-band>*{position:relative;z-index:1}
.hero h1{font-size:clamp(30px,4.6vw,46px);letter-spacing:-.02em;line-height:1.03;max-width:26ch;text-wrap:wrap}
.hero .kicker{font-family:var(--f-mono);font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--accent);margin-bottom:12px}
.hero p{max-width:60ch;color:var(--ink-2);margin-top:14px}
.facts{display:flex;flex-wrap:wrap;gap:0;margin-top:24px;border-top:1px solid var(--rule)}
.fact{padding:12px 22px 4px 0;margin-right:22px;border-right:1px solid var(--rule)}
.fact:last-child{border-right:0}
.fact b{display:block;font-family:var(--f-mono);font-size:19px;font-weight:500;letter-spacing:-.01em;color:var(--ink)}
.fact span{font-size:11.5px;color:var(--ink-3);letter-spacing:.02em}

/* ---------- generic blocks ---------- */
.card{background:var(--surface);border:1px solid var(--rule);border-radius:3px;padding:18px 20px}
.grid{display:grid;gap:14px}
.g2{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(228px,1fr))}
.g4{grid-template-columns:repeat(auto-fit,minmax(178px,1fr))}
.stack{display:flex;flex-direction:column;gap:14px}
.row{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.mono{font-family:var(--f-mono);font-variant-numeric:tabular-nums}
.muted{color:var(--ink-2)}
.small{font-size:13px}
hr.sep{border:0;border-top:1px solid var(--rule);margin:34px 0 0}

/* change list */
.change{display:grid;grid-template-columns:auto 1fr;gap:0 16px;padding:16px 0;border-top:1px solid var(--rule)}
.change:first-child{border-top:0}
.change .tag{font-family:var(--f-mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;padding:3px 7px;border-radius:2px;height:fit-content;background:var(--accent-soft);color:var(--accent-ink);white-space:nowrap}
.change h3{font-size:16.5px}
.change p{color:var(--ink-2);font-size:14px;max-width:70ch;margin-top:3px}
.change .then-now{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px;font-family:var(--f-mono);font-size:12px}
.change .then-now i{font-style:normal;padding:2px 8px;border:1px solid var(--rule);border-radius:2px;background:var(--surface-2);color:var(--ink-2)}
.change .then-now i.new{border-color:var(--accent);color:var(--accent-ink);background:var(--accent-soft)}

/* toc */
.toc{border-top:1px solid var(--rule)}
.toc-row{display:grid;grid-template-columns:34px 1fr auto;gap:12px;align-items:baseline;padding:9px 6px;border-bottom:1px solid var(--rule);font-size:14.5px}
.toc-row:hover{background:var(--surface-2)}
.toc-row .n{font-family:var(--f-mono);font-size:12px;color:var(--accent)}
.toc-row .p{font-family:var(--f-mono);font-size:12px;color:var(--ink-3)}
.toc-row em{font-style:normal;color:var(--ink-2);font-size:13px;display:block}

/* tables */
.tbl-wrap{overflow-x:auto;border:1px solid var(--rule);border-radius:3px;background:var(--surface)}
table{border-collapse:collapse;width:100%;font-size:13.5px}
th,td{padding:8px 12px;text-align:left;border-bottom:1px solid var(--rule);white-space:nowrap}
thead th{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2);font-weight:500;background:var(--surface-2)}
tbody tr:last-child td{border-bottom:0}
td.num,th.num{text-align:right;font-family:var(--f-mono);font-variant-numeric:tabular-nums}
tbody tr.hl{background:var(--accent-soft)}
tbody tr.hl td{color:var(--accent-ink);font-weight:500}
caption{caption-side:bottom;text-align:left;padding:8px 12px;font-size:12px;color:var(--ink-3)}
#s05-foot{max-width:none;margin-top:16px;padding-top:12px;border-top:1px solid var(--rule);line-height:1.55}

/* controls */
label.fld{display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--ink-2)}
label.fld b{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);font-weight:500}
input[type=number],input[type=text],select,textarea{font-family:var(--f-mono);font-size:13px;color:var(--ink);background:var(--surface);border:1px solid var(--rule);border-radius:3px;padding:7px 9px;width:100%}
textarea{line-height:1.5;resize:vertical}
select{cursor:pointer}
button{font-family:var(--f-body);font-size:13px;font-weight:500;color:var(--ink);background:var(--surface);border:1px solid var(--rule);border-radius:3px;padding:7px 13px;cursor:pointer}
button:hover{background:var(--surface-2)}
button.primary{background:var(--accent);border-color:var(--accent);color:#fff}
button.primary:hover{filter:brightness(1.08)}
.seg{display:inline-flex;border:1px solid var(--rule);border-radius:3px;overflow:hidden;background:var(--surface)}
.seg button{border:0;border-radius:0;border-right:1px solid var(--rule);font-size:12.5px;padding:6px 12px}
.seg button:last-child{border-right:0}
.seg button[aria-pressed=true]{background:var(--accent);color:#fff}
button:disabled{opacity:.42;cursor:not-allowed}
button:disabled:hover{background:var(--surface)}

/* control de tema en el índice lateral */
.themectl{margin:14px 0 10px}
.langctl{margin:0 0 18px}
.themectl .lbl,.langctl .lbl{font-family:var(--f-mono);font-size:9.5px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--ink-3);display:block;margin-bottom:5px}
.themectl .seg,.langctl .seg{width:100%}
.themectl .seg button,.langctl .seg button{flex:1;padding:5px 4px;font-size:11.5px;text-align:center;white-space:nowrap}

/* Resultados obsoletos mientras se teclea: se atenúan en lugar de borrarse.
   Antes se limpiaba el lienzo en cada pulsación y el panel parpadeaba. */
body.recalc #metrics,body.recalc .chartbox,body.recalc #stability{opacity:.4}
@media (prefers-reduced-motion:no-preference){
  #metrics,.chartbox,#stability{transition:opacity .14s ease}
}
#calc-status{align-self:center}

/* pills / verdicts */
.pill{display:inline-flex;align-items:center;gap:6px;font-family:var(--f-mono);font-size:11px;letter-spacing:.04em;text-transform:uppercase;padding:3px 9px;border-radius:2px;border:1px solid transparent}
/* El display de una clase de autor gana a [hidden] de la hoja del navegador, así que
   sin esto el badge «Recalculando…» de la calculadora se veía siempre. */
.pill[hidden]{display:none}
.pill.ok{background:var(--ok-soft);color:var(--ok);border-color:var(--ok)}
.pill.warn{background:var(--warn-soft);color:var(--warn);border-color:var(--warn)}
.pill.bad{background:var(--oos-soft);color:var(--oos);border-color:var(--oos)}
.pill.neutral{background:var(--surface-2);color:var(--ink-2);border-color:var(--rule)}

/* metric tiles */
/* 3 columnas fijas: son 9 métricas, así que la rejilla queda siempre completa.
   Con auto-fit, al ensanchar quedaba una celda vacía que se veía como un bloque gris,
   porque la separación entre tarjetas es el fondo del contenedor. */
.metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--rule);border:1px solid var(--rule);border-radius:3px;overflow:hidden}
.metric{background:var(--surface);padding:12px 14px}
.metric b{display:block;font-family:var(--f-mono);font-size:23px;font-weight:500;letter-spacing:-.02em;font-variant-numeric:tabular-nums;line-height:1.15}
.metric span{font-family:var(--f-mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.metric small{display:block;font-size:11.5px;color:var(--ink-3);margin-top:2px}
.metric.lead span{color:var(--ink-2)}
.metric.lead b{color:var(--accent)}
.metric.bad b{color:var(--oos)}
.metric.good b{color:var(--ok)}

/* chart */
.chartbox{border:1px solid var(--rule);border-radius:3px;background:var(--surface);padding:10px 12px 4px}
.chartbox[data-chart-zoom]{position:relative}
.chartbox[data-chart-zoom] svg{cursor:zoom-in}
.chart-head{display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:2px}
.chart-head h4{font-family:var(--f-mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);font-weight:500}
.chart-head-actions{display:inline-flex;align-items:center;gap:8px;margin-left:auto}
.chart-zoom-btn{font-family:var(--f-mono);font-size:10px;letter-spacing:.02em;color:var(--ink-3);background:var(--surface-2);border:1px solid var(--rule);border-radius:3px;padding:2px 7px;cursor:pointer;line-height:1.4;display:inline-flex;align-items:center;gap:3px;transition:color .12s,background .12s,border-color .12s;white-space:nowrap}
.chart-zoom-btn:hover{color:var(--accent-ink);background:var(--accent-soft);border-color:var(--accent)}
.chart-zoom-btn:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
svg{display:block;width:100%;height:auto}

/* chart zoom modal / lightbox */
.chart-modal-backdrop{position:fixed;inset:0;z-index:100;background:rgba(17,21,26,.72);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);display:flex;align-items:center;justify-content:center;padding:clamp(10px,2.5vw,24px);overflow:hidden}
.chart-modal-backdrop[hidden]{display:none!important}
.chart-modal-window{background:var(--surface);border:1px solid var(--rule);border-radius:6px;box-shadow:var(--shadow),0 16px 48px -12px rgba(0,0,0,.5);width:min(92vw,1260px);max-height:min(88vh,860px);display:flex;flex-direction:column;overflow:hidden;animation:chartModalIn .14s ease-out}
@keyframes chartModalIn{from{opacity:0;transform:scale(.97)}to{opacity:1;transform:scale(1)}}
.chart-modal-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 16px;border-bottom:1px solid var(--rule);background:var(--surface-2);flex-shrink:0}
.chart-modal-title-wrap{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;min-width:0}
.chart-modal-title{font-family:var(--f-disp);font-size:16px;font-weight:600;margin:0;color:var(--ink)}
.chart-modal-src{font-family:var(--f-mono);font-size:11px;color:var(--ink-3)}
.chart-modal-close{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;padding:0;font-size:22px;line-height:1;border-radius:4px;border:1px solid var(--rule);background:var(--surface);color:var(--ink-2);cursor:pointer;flex-shrink:0;transition:background .12s,color .12s,border-color .12s}
.chart-modal-close:hover{background:var(--accent-soft);color:var(--accent-ink);border-color:var(--accent)}
.chart-modal-close:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.chart-modal-body{padding:16px 20px;overflow:hidden;display:flex;align-items:center;justify-content:center;flex:1 1 auto;min-height:0;background:var(--surface)}
.chart-modal-body svg{width:100%;max-width:100%;max-height:calc(88vh - 100px);height:auto;display:block;cursor:default}
.chart-modal-foot{padding:6px 16px;border-top:1px solid var(--rule);background:var(--surface-2);font-size:11px;font-family:var(--f-mono);color:var(--ink-3);display:flex;justify-content:space-between;align-items:center;flex-shrink:0}
body.modal-open{overflow:hidden}
@media (max-width:600px){
  .chart-modal-backdrop{padding:6px}
  .chart-modal-window{width:96vw;max-height:90vh}
  .chart-modal-body{padding:8px 10px}
  .chart-modal-title{font-size:14px}
  .chart-modal-src{font-size:10px}
  .chart-modal-foot{display:none}
}

/* wizard */
.wz-q{font-size:15px;font-weight:500;margin-bottom:10px}
.wz-opts{display:flex;flex-wrap:wrap;gap:8px}
.wz-opts button{text-align:left;max-width:340px}
.wz-crumbs{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px;font-family:var(--f-mono);font-size:11px}
.wz-crumbs i{font-style:normal;padding:2px 7px;background:var(--surface-2);border:1px solid var(--rule);border-radius:2px;color:var(--ink-2)}
.result{border-left:3px solid var(--accent);background:var(--accent-soft);padding:14px 16px;border-radius:0 3px 3px 0}
.result h3{color:var(--accent-ink)}
.result ul{margin:8px 0 0;padding-left:18px;font-size:13.5px;color:var(--ink-2)}
.result li{margin-bottom:3px}

/* checklist */
.chk-bar{height:3px;background:var(--surface-3);border-radius:2px;overflow:hidden;margin-top:10px}
.chk-bar i{display:block;height:100%;background:var(--accent);width:0;transition:width .2s}

/* models */
.model{background:var(--surface);border:1px solid var(--rule);border-radius:3px;padding:14px 15px;display:flex;flex-direction:column;gap:7px}
.model.stable{border-color:var(--ok)}
.model h4{font-family:var(--f-mono);font-size:15px;letter-spacing:.02em;color:var(--accent)}
.model.stable h4{color:var(--ok)}
.model dl{display:grid;grid-template-columns:auto 1fr;gap:2px 10px;margin:0;font-size:12.5px}
.model dt{font-family:var(--f-mono);font-size:10px;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-3);padding-top:3px}
.model dd{margin:0;color:var(--ink-2)}
.model .ex{font-size:12.5px;color:var(--ink-3);border-top:1px dashed var(--rule);padding-top:7px}

/* quadrants */
.quad{display:grid;grid-template-columns:auto 1fr 1fr;grid-template-rows:auto auto auto;gap:8px;align-items:stretch}
.quad .axis-y{writing-mode:vertical-rl;transform:rotate(180deg);font-family:var(--f-mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);display:flex;align-items:center;justify-content:center;grid-row:1/3}
.quad .axis-x{grid-column:2/4;font-family:var(--f-mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);text-align:center}
.qcell{border:1px solid var(--rule);border-radius:3px;padding:13px 14px;background:var(--surface);min-height:104px}
.qcell b{font-family:var(--f-mono);font-size:11px;letter-spacing:.06em;display:block;margin-bottom:4px}
.qcell p{font-size:13px;color:var(--ink-2)}
.qcell.q1{border-color:var(--ok);background:var(--ok-soft)}
.qcell.q1 b{color:var(--ok)}
.qcell.q4{border-color:var(--oos);background:var(--oos-soft)}
.qcell.q4 b{color:var(--oos)}
.qcell.q2 b,.qcell.q3 b{color:var(--warn)}
.qcell.q2,.qcell.q3{background:var(--warn-soft);border-color:var(--warn)}

/* rules list */
.rule-item{display:grid;grid-template-columns:26px 1fr;gap:12px;padding:11px 0;border-bottom:1px solid var(--rule);align-items:start}
.rule-item:last-child{border-bottom:0}
.rule-item .k{font-family:var(--f-mono);font-size:12px;color:#fff;background:var(--accent);border-radius:2px;text-align:center;padding:2px 0;line-height:1.5}
.rule-item p{font-size:13.5px;color:var(--ink-2)}
.rule-item strong{color:var(--ink);font-weight:500}

/* glossary */
.gl-tools{display:flex;flex-direction:column;gap:12px;margin-bottom:16px}
.gl-search{max-width:420px}
.gl-filters{display:flex;flex-wrap:wrap;gap:6px}
.gl-filters button{min-height:32px;padding:5px 10px;font-size:12px;border-radius:999px;color:var(--ink-2)}
.gl-filters button[aria-pressed=true]{background:var(--accent-soft);border-color:var(--accent);color:var(--accent-ink)}
.gl{display:grid;grid-template-columns:minmax(0,1fr);border-top:1px solid var(--rule)}
.gl-row{display:flex;min-width:0;flex-direction:column;gap:4px;padding:14px 6px 15px;border-bottom:1px solid var(--rule)}
.gl-cat{align-self:flex-start;font-family:var(--f-mono);font-size:9.5px;line-height:1.3;letter-spacing:.08em;
  text-transform:uppercase;color:var(--accent-ink);background:var(--accent-soft);padding:2px 6px;border-radius:2px}
.gl-term{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px}
.gl-term b{font-size:15px;font-weight:600;color:var(--ink)}
.gl-en{font-style:normal;color:var(--ink-3);font-size:12.5px;font-family:var(--f-mono)}
.gl-row p{color:var(--ink-2);font-size:13px;line-height:1.5}
.gl-meta{display:flex;flex-wrap:wrap;align-items:baseline;gap:5px 12px;margin-top:3px}
.gl-link{font-family:var(--f-mono);font-size:11.5px;color:var(--accent-ink);text-decoration:none}
.gl-link:hover,.gl-link:focus-visible{text-decoration:underline}
.gl-empty{grid-column:1/-1}
@media (min-width:1200px){
  .gl{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:32px}
}

/* --- capa didáctica --- */
input[type=range]{width:100%;accent-color:var(--accent);height:20px;cursor:pointer;background:transparent}
/* Los simuladores no ganan nada por ser gigantes: la campana crece en alto al mismo
   ritmo que en ancho y acaba ocupando media pantalla. Se les pone techo. */
.simgrid{display:grid;grid-template-columns:minmax(0,1fr) 232px;gap:16px;align-items:start;max-width:1180px}
@media (max-width:760px){.simgrid{grid-template-columns:1fr}}
.simctl{display:flex;flex-direction:column;gap:12px}
.simctl .val{font-family:var(--f-mono);font-size:12px;color:var(--accent);font-variant-numeric:tabular-nums}
.readout{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--rule);border:1px solid var(--rule);border-radius:3px;overflow:hidden}
.readout div{background:var(--surface);padding:9px 11px}
.readout span{font-family:var(--f-mono);font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);display:block}
.readout b{font-family:var(--f-mono);font-size:19px;font-weight:500;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
/* la frase en lenguaje llano no cabe en media columna: ocupa la fila entera */
.readout div.wide{grid-column:1/-1}
.readout div.wide b{font-size:14px;letter-spacing:0;color:var(--ink)}
.lesson{border-left:3px solid var(--accent);background:var(--accent-soft);color:var(--accent-ink);
  padding:10px 13px;border-radius:0 3px 3px 0;font-size:13.5px;min-height:56px}
.lesson b{font-weight:600}
.presets{display:flex;flex-wrap:wrap;gap:6px}
.presets button{font-size:12px;padding:5px 10px}

.myth{display:grid;grid-template-columns:auto 1fr;gap:0 14px;padding:14px 0;border-top:1px solid var(--rule)}
.myth:first-child{border-top:0}
.myth .x{font-family:var(--f-mono);font-size:11px;letter-spacing:.05em;text-transform:uppercase;
  padding:3px 8px;border-radius:2px;height:fit-content;white-space:nowrap;background:var(--oos-soft);color:var(--oos);border:1px solid var(--oos)}
.myth h4{font-size:15.5px;margin-bottom:3px}
.myth p{font-size:13.5px;color:var(--ink-2);max-width:72ch}
.myth p.fix{margin-top:6px;color:var(--ink);border-left:2px solid var(--ok);padding-left:10px}

.q{border:1px solid var(--rule);border-radius:3px;background:var(--surface);padding:14px 16px}
.q+.q{margin-top:10px}
.q .qn{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--accent);margin-bottom:5px}
.q h4{font-size:15px;margin-bottom:10px;font-family:var(--f-body);font-weight:500;line-height:1.45}
.q .opts{display:flex;flex-direction:column;gap:6px}
.q .opts button{text-align:left;width:100%;font-weight:400;line-height:1.4;padding:8px 11px}
.q .opts button.pick-ok{background:var(--ok-soft);border-color:var(--ok);color:var(--ok);font-weight:500;opacity:1}
.q .opts button.pick-no{background:var(--oos-soft);border-color:var(--oos);color:var(--oos);opacity:1}
.q .opts button[disabled]{cursor:default;opacity:.62}
.q .opts button[disabled]:hover{background:var(--surface)}
.q .opts button.pick-ok:hover{background:var(--ok-soft)}
.q .opts button.pick-no:hover{background:var(--oos-soft)}
.q .fb{margin-top:10px;font-size:13.5px;color:var(--ink-2);border-left:3px solid var(--rule);padding-left:11px}

/* entrenamiento de lectura de cartas */
.tr-opts{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:7px}
.tr-opts button{text-align:left;line-height:1.35;padding:9px 12px;font-weight:400}
.tr-opts button b{display:block;font-family:var(--f-mono);font-size:10.5px;letter-spacing:.05em;
  text-transform:uppercase;color:var(--accent);font-weight:500;margin-bottom:2px}
.tr-opts button.ok{background:var(--ok-soft);border-color:var(--ok);color:var(--ok);opacity:1}
.tr-opts button.ok b{color:var(--ok)}
.tr-opts button.no{background:var(--oos-soft);border-color:var(--oos);color:var(--oos);opacity:1}
.tr-opts button.no b{color:var(--oos)}
.tr-opts button:disabled{cursor:default}
.tr-opts button:disabled:hover{background:var(--surface)}
.tr-opts button.ok:hover{background:var(--ok-soft)}
.tr-opts button.no:hover{background:var(--oos-soft)}
.tr-fb{border-left:3px solid var(--accent);background:var(--accent-soft);padding:13px 15px;border-radius:0 3px 3px 0}
.tr-fb h4{color:var(--accent-ink);font-size:15.5px;margin-bottom:6px}
.tr-fb dl{display:grid;grid-template-columns:auto 1fr;gap:5px 12px;margin:8px 0 0;font-size:13.5px}
.tr-fb dt{font-family:var(--f-mono);font-size:10px;letter-spacing:.05em;text-transform:uppercase;
  color:var(--accent);padding-top:3px}
.tr-fb dd{margin:0;color:var(--accent-ink)}
.q .fb b{color:var(--ink)}
.score{display:inline-flex;gap:8px;align-items:baseline;font-size:13px;
  background:var(--surface);border:1px solid var(--rule);border-radius:3px;padding:6px 13px}
.score b{font-family:var(--f-mono);font-size:16px;font-variant-numeric:tabular-nums;color:var(--accent)}
.score i{font-style:normal;font-size:12px;color:var(--ink-3)}
#quiz-done .result ul{margin-top:4px}
#quiz-done .result li{color:var(--accent-ink)}

/* footer */
footer{margin-top:60px;padding-top:20px;border-top:1px solid var(--rule);font-size:12.5px;color:var(--ink-3);max-width:74ch}
footer p+p{margin-top:8px}

/* accordion */
details.acc{border:1px solid var(--rule);border-radius:3px;background:var(--surface);overflow:hidden}
details.acc+details.acc{margin-top:8px}
details.acc summary{cursor:pointer;padding:11px 14px;font-weight:500;font-size:14.5px;display:flex;justify-content:space-between;gap:12px;align-items:center;list-style:none}
details.acc summary::-webkit-details-marker{display:none}
details.acc summary::after{content:"+";font-family:var(--f-mono);color:var(--ink-3)}
details.acc[open] summary::after{content:"−"}
details.acc[open] summary{border-bottom:1px solid var(--rule);background:var(--surface-2)}
.acc-body{padding:14px}
.acc-body p{font-size:13.5px;color:var(--ink-2);max-width:70ch}
.acc-body ul{font-size:13.5px;color:var(--ink-2);margin:8px 0 0;padding-left:18px}
.formula{font-family:var(--f-mono);font-size:13px;background:var(--surface-2);border:1px solid var(--rule);border-radius:3px;padding:9px 12px;margin-top:10px;overflow-x:auto;white-space:pre;color:var(--ink)}

@media print{
  :root{scroll-behavior:auto}
  .rail,.seg,button,.wz-opts,.presets,.score,.chk-bar,#quiz-done{display:none!important}
  /* el cuestionario se imprime como hoja de ejercicios: opciones sí, botones no */
  .q .opts button{display:block!important;border:0;background:none;padding:1px 0 1px 16px;
    text-indent:-16px;color:var(--ink);font-size:13px}
  .q .opts button::before{content:"☐  "}
  .q .fb{display:none!important}
  .q{break-inside:avoid}
  .shell{display:block;max-width:none}
  main{padding:0}
  section{padding-top:22px;break-inside:avoid}
  .card,.chartbox,.tbl-wrap,.model,.qcell,details.acc{break-inside:avoid;box-shadow:none}
  details.acc{border:0}
  details.acc .acc-body{display:block!important}
  a{text-decoration:none}
  .hero-band{background:none;border:0;padding:0}
}
@media (max-width:560px){
  /* con 3 columnas fijas, en móvil las cifras necesitan bajar de cuerpo para no desbordar */
  .metric b{font-size:18px}
  .metric{padding:10px 9px}
}
@media (max-width:880px){
  .shell{grid-template-columns:1fr}
  .rail{position:static;height:auto;border-right:0;border-bottom:1px solid var(--rule);padding:16px}
  .rail nav{flex-direction:row;flex-wrap:wrap;gap:4px}
  .rail .grp{display:none}
  .rail a{grid-template-columns:auto auto;padding:5px 9px;border:1px solid var(--rule);border-radius:3px;font-size:12.5px}
  .change{grid-template-columns:minmax(0,1fr);gap:7px}
  .change .tag{justify-self:start}
  .change .src{white-space:normal}
  .chart-head .src{white-space:normal}
}

/* ============ capa didáctica v2: inspección, cuadrantes, simuladores ============ */
/* Tooltip flotante único de la página: lo rellenan los gráficos interactivos.
   position:fixed para que no dependa del overflow del contenedor del SVG. */
#spc-tip{position:fixed;z-index:60;pointer-events:none;opacity:0;transform:translateY(2px);
  background:var(--ink);color:var(--paper);font-family:var(--f-mono);font-size:11.5px;line-height:1.5;
  padding:8px 10px;border-radius:3px;max-width:340px;transition:opacity .08s ease}
#spc-tip b{color:#fff}
#spc-tip.on{opacity:1}
/* valor fijo del tooltip resaltado con anillo */
circle.pt{cursor:crosshair}
circle.pt.focusring{stroke:var(--paper);stroke-width:2.5;stroke-dasharray:none;fill:var(--accent)}
/* filas del informe de estabilidad que actúan como enlace a la carta */
.stab-link{cursor:pointer}
.stab-link:hover{background:var(--surface-2)}
.stab-link:hover .k{outline:2px solid var(--accent)}

/* métricas clicables y su panel de fórmula sustituida */
.metric{cursor:pointer}
.metric:hover{background:var(--surface-2)}
.metric.picked{box-shadow:inset 0 -3px 0 var(--accent)}
.metric .db{display:none;position:absolute}
.mdetail{font-family:var(--f-mono);font-size:12px;color:var(--ink-2);
  border:1px dashed var(--rule);border-radius:3px;padding:9px 12px;margin-top:8px;white-space:pre-wrap;overflow-wrap:break-word;word-break:break-word;line-height:1.5}
.mdetail b{color:var(--ink)}

/* panel genérico de herramienta debajo de un gráfico (what-if, resolución, gestor) */
.toolpanel{border:1px solid var(--rule);border-radius:3px;background:var(--surface);padding:14px 16px;margin-top:12px}
.toolpanel h4{font-family:var(--f-mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);font-weight:500;margin-bottom:8px}
.toolgrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(240px,300px);gap:14px;align-items:start}
@media (max-width:820px){.toolgrid{grid-template-columns:minmax(0,1fr)}}
.notewarn{border-left:3px solid var(--warn);background:var(--warn-soft);padding:9px 12px;border-radius:0 3px 3px 0;font-size:13px;color:var(--ink);margin-top:8px}
.notewarn b{color:var(--warn)}

/* matriz de cuadrantes interactiva */
.quadwrap{display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px;align-items:stretch;max-width:980px}
@media (max-width:700px){.quadwrap{grid-template-columns:auto}}
#quad-svg text{font-family:var(--f-mono)}
.quadlegend{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:8px;font-size:12px;color:var(--ink-2);align-items:baseline}
.quadlegend .sw{display:inline-block;width:10px;height:10px;border-radius:2px;vertical-align:-1px;margin-right:5px}

/* gestor de estudios guardados */
.studymgr{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.studymgr input[type=text]{max-width:280px}
.saved-list{width:100%;margin-top:6px}
.saved-item{display:flex;gap:8px;align-items:center;padding:7px 9px;border-bottom:1px solid var(--rule);font-size:13px}
.saved-item:last-child{border-bottom:0}
.saved-item b{font-weight:500;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.saved-item .meta{font-family:var(--f-mono);font-size:11px;color:var(--ink-3);white-space:nowrap}
.saved-item button{font-size:11.5px;padding:4px 9px}

/* cartas apiladas sincronizadas (carrera de detección) */
.racestack .chartbox+.chartbox{margin-top:6px}
.race-alarm{padding:2px 7px;border-radius:2px;background:var(--oos-soft);color:var(--oos);font-family:var(--f-mono);font-size:10.5px;letter-spacing:.04em}
.race-alarm.no-alarm{background:var(--surface-2);color:var(--ink-3)}
.race-alarm .none{background:none;color:var(--ink-3)}
.race-eq{font-family:var(--f-mono);font-size:12px;background:var(--surface-2);border:1px solid var(--rule);border-radius:3px;padding:8px 11px;margin-top:8px;white-space:pre;overflow-x:auto}

/* simulador de sobrecontrol */
.ocap-log{font-size:12.5px;color:var(--ink-2);max-height:150px;overflow-y:auto;border:1px solid var(--rule);border-radius:3px;background:var(--surface-2);padding:8px 11px}
.ocap-log div{padding:2px 0;border-bottom:1px dashed var(--rule)}
.ocap-log div:last-child{border-bottom:0}
.ocap-log .bad{color:var(--oos)}
.ocap-log .ok{color:var(--ok)}
.ocap-summary{line-height:1.45}
.ocap-stats{font-size:12.5px;margin:4px 0}
.ocap-errors{margin-top:8px;border-top:1px solid var(--rule);padding-top:8px}
.ocap-err-item{background:var(--surface);padding:6px 9px;border-radius:3px;border-left:3px solid var(--oos);font-size:12px;line-height:1.4}
.ocap-err-item b{color:var(--ink)}

/* estrategia de subgrupos activa */
.seg .val{font-family:var(--f-mono);color:var(--accent);font-size:11px;margin-left:6px}

/* cobertura del informe: tres estados sobre la checklist existente */
/* ============ Fase A: jerarquía de navegación, hero y resultado ============ */
/* Grupo de herramientas del rail: mismo lenguaje visual, sin color nuevo. */

/* Hero: primero la acción, después el respaldo documental. */
.hero-lede{max-width:64ch}
.hero-cta{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:18px}
.btn-primary{display:inline-flex;align-items:center;padding:9px 16px;border:1px solid var(--accent);
  border-radius:3px;background:var(--accent);color:var(--paper);font-family:var(--f-body);font-size:14px;
  font-weight:500;line-height:1.2;text-decoration:none}
.btn-primary:hover{background:var(--accent-ink);border-color:var(--accent-ink)}
.btn-quiet{display:inline-flex;align-items:center;padding:9px 13px;border:1px solid var(--rule);
  border-radius:3px;background:var(--surface);color:var(--ink-2);font-size:14px;line-height:1.2;text-decoration:none}
.btn-quiet:hover{border-color:var(--accent);color:var(--accent-ink)}
.hero-second{margin-top:18px;font-size:13.5px;color:var(--ink-2);max-width:64ch}
.facts-label{font-family:var(--f-mono);font-size:10px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--ink-3);margin-top:28px;padding-bottom:7px;border-bottom:1px solid var(--rule)}

/* Resultado: la conclusión es el foco; las estadísticas de apoyo la acompañan. */
.verdict-head{border-bottom:1px solid var(--rule);padding-bottom:13px;margin-bottom:12px}
.verdict-kicker{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.verdict-focal{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-top:5px}
.verdict-value{font-family:var(--f-mono);font-size:38px;font-weight:500;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;line-height:1.05;color:var(--ink)}
.verdict-value.is-ok{color:var(--ok)}
.verdict-value.is-bad{color:var(--oos)}
.verdict-unit{font-family:var(--f-mono);font-size:14px;color:var(--ink-2)}
.verdict-target{font-family:var(--f-mono);font-size:12px;color:var(--ink-3)}
.verdict-state{font-family:var(--f-disp);font-size:17px;font-weight:600;margin-top:3px;color:var(--ink-2)}
.verdict-state.is-ok{color:var(--ok)}
.verdict-state.is-bad{color:var(--oos)}
.verdict-state.is-warn{color:var(--warn)}
/* Dos niveles de chip: decisión arriba, contexto a revisar debajo. */
.pill-row-context{margin-top:7px;align-items:center}
.pill-label{font-family:var(--f-mono);font-size:9.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--ink-3)}
.pill-row-context .pill{background:none}
.pill-row-context .pill.neutral{border-color:var(--rule);color:var(--ink-2)}
.pill-row-context .pill.warn{border-color:var(--warn);color:var(--warn)}

/* Métricas: el índice decisivo manda; n·k, x̄ y s quedan como apoyo. */
.metric.lead{box-shadow:inset 3px 0 0 var(--accent)}
.metric.lead b{font-size:30px}
.metric-support b{font-size:17px;color:var(--ink-2)}
@media (max-width:560px){.verdict-value{font-size:30px}.metric.lead b{font-size:24px}}

/* ============ Fase B: flujo de la calculadora y navegacion compacta ============ */
/* Pasos numerados: el flujo normal se lee de arriba abajo. */
.stepblock{border-top:1px solid var(--rule);padding-top:12px}
.stepblock:first-of-type{border-top:0;padding-top:0}
.stephead{display:flex;align-items:center;gap:8px;font-family:var(--f-mono);font-size:10.5px;
  letter-spacing:.09em;text-transform:uppercase;color:var(--ink-2);margin-bottom:10px}
.stepnum{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;
  border:1px solid var(--accent);border-radius:2px;color:var(--accent);font-size:10px}

/* Configuracion traida del asistente. */
.resolved-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  border:1px solid var(--accent);background:var(--accent-soft);border-radius:3px;padding:10px 12px}
.resolved-bar[hidden]{display:none}
.resolved-txt{font-size:13px;color:var(--accent-ink)}
.resolved-txt b{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;display:block}

/* Ajustes avanzados y bloques plegables secundarios. */
.adv-details,.fmt-details,.diag-details{border:1px solid var(--rule);border-radius:3px;background:var(--surface)}
.adv-details>summary,.fmt-details>summary,.diag-details>summary{cursor:pointer;padding:9px 12px;list-style:none;
  display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;
  font-family:var(--f-mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2)}
.adv-details>summary::-webkit-details-marker,.fmt-details>summary::-webkit-details-marker,
.diag-details>summary::-webkit-details-marker{display:none}
.adv-details>summary::after,.fmt-details>summary::after,.diag-details>summary::after{content:"+";font-family:var(--f-mono);color:var(--ink-3)}
.adv-details[open]>summary::after,.fmt-details[open]>summary::after,.diag-details[open]>summary::after{content:"−"}
.adv-details[open]>summary,.fmt-details[open]>summary,.diag-details[open]>summary{border-bottom:1px solid var(--rule);background:var(--surface-2)}
.adv-details>summary:focus-visible,.fmt-details>summary:focus-visible,.diag-details>summary:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.adv-current{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.02em;text-transform:none;color:var(--ink-2)}
.adv-details>p,.adv-details>.grid,.fmt-details>p{margin:10px 12px}
.adv-details>p:last-child,.fmt-details>p:last-child{margin-bottom:12px}
.diag-details>.grid{margin:12px}

/* Entrada de datos. */
.paste-hint{font-size:12.5px;color:var(--ink-2);background:var(--surface-2);border-left:2px solid var(--accent);
  padding:8px 10px;border-radius:0 3px 3px 0}
#data{font-family:var(--f-mono)}

/* Que revisar a continuacion: presentacion del estado que ya existe. */
.next-actions{margin-top:10px;border-top:1px solid var(--rule);padding-top:9px}
.next-actions b{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2)}
.next-actions ul{margin:6px 0 0;padding-left:17px}
.next-actions li{font-size:12.5px;color:var(--ink-2);margin-top:4px;max-width:62ch}

/* Barra compacta y cajon: sin efecto por encima del punto de ruptura. */
.mobilebar{display:none}
.rail-scrim{display:none}
@media (max-width:880px){
  .mobilebar{display:flex;align-items:center;gap:10px;position:sticky;top:0;z-index:60;
    background:var(--paper);border-bottom:1px solid var(--rule);padding:8px 12px}
  .mobilebar-btn{font-family:var(--f-mono);font-size:12px;padding:7px 11px;border:1px solid var(--rule);
    border-radius:3px;background:var(--surface);color:var(--ink);cursor:pointer}
  .mobilebar-btn:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
  .mobilebar-title{font-family:var(--f-mono);font-size:11.5px;letter-spacing:.04em;text-transform:uppercase;
    color:var(--ink-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .rail{position:fixed;top:0;left:0;bottom:0;width:min(300px,86vw);height:auto;z-index:80;
    transform:translateX(-100%);transition:transform .18s ease-out;border-right:1px solid var(--rule);
    border-bottom:0;overflow-y:auto;padding:18px 14px 40px;display:block}
  body.nav-open .rail{transform:none}
  .rail-top{padding:0}
  .rail nav{overflow-y:visible;flex:none;padding:0;display:flex;flex-direction:column;flex-wrap:nowrap;gap:1px}
  .rail .grp{display:block}
  .quicknav{margin-bottom:14px}
  .rail a{grid-template-columns:26px 1fr;border:0;padding:7px 8px;font-size:13.5px}
  .rail-scrim{display:block;position:fixed;inset:0;z-index:70;background:rgba(0,0,0,.38)}
  .rail-scrim[hidden]{display:none}
  body.nav-open{overflow:hidden}
}
@media (prefers-reduced-motion:reduce){.rail{transition:none}}

/* B7: la calculadora respira en anchos pequenos. */
@media (max-width:560px){
  .metrics{grid-template-columns:repeat(2,minmax(0,1fr))}
  .g4{grid-template-columns:minmax(0,1fr)}
  .resolved-bar{align-items:flex-start}
}

/* ============ Fase C: acabado visual ============ */
/* Una capa final y acotada consolida los patrones existentes sin alterar el
   marcado, el flujo de la calculadora ni la lógica de las herramientas. */
:root{
  --radius:4px;
  --control-h:38px;
  --on-accent:#fff;
  --type-meta:10.5px;
  --type-small:12.5px;
  --space-card:20px;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){--on-accent:#0B141B}
}
:root[data-theme="dark"]{--on-accent:#0B141B}

/* Jerarquía tipográfica y ritmo editorial. */
body{line-height:1.58}
section{padding-top:64px}
h2{font-size:clamp(26px,3vw,33px);letter-spacing:-.018em;margin-bottom:12px}
h3{font-size:20px;letter-spacing:-.01em;margin-bottom:8px}
h4{font-size:14.5px}
.lede{font-size:16.5px;line-height:1.55;margin-bottom:26px}
.small{font-size:var(--type-small)}
.eyebrow,.src,.verdict-kicker,.stephead{font-size:var(--type-meta)}
.eyebrow{margin-bottom:9px}
.src{line-height:1.45}

/* Superficies relacionadas, con una única jerarquía de borde y radio. */
.card,.model,.qcell,.q,details.acc,.adv-details,.fmt-details,.diag-details,
.toolpanel,.chartbox,.tbl-wrap,.readout,.score,.ocap-log{
  border-radius:var(--radius);
}
.card{padding:var(--space-card) 22px}
.model,.qcell,.q{padding:16px 18px}
.toolpanel{padding:17px 19px;margin-top:16px}
.grid{gap:16px}
.stack{gap:16px}
.row{gap:10px 12px}
hr.sep{margin-top:40px}
.stepblock{padding-top:16px}
.stepblock+.stepblock{margin-top:2px}
.stephead{margin-bottom:12px;color:var(--ink-2);font-weight:500}
.stepnum{width:20px;height:20px}
.resolved-bar{padding:12px 14px}
.paste-hint{padding:9px 12px;line-height:1.5}
.adv-details>summary,.fmt-details>summary,.diag-details>summary{padding:11px 14px}
.adv-details>p,.adv-details>.grid,.fmt-details>p{margin:12px 14px}
.diag-details>.grid{margin:14px}
.acc-body{padding:16px 18px}

/* Controles: altura, foco y tactilidad comunes. */
input[type=number],input[type=text],select,textarea{
  min-height:var(--control-h);padding:8px 10px;border-radius:var(--radius);
  transition:border-color .12s ease,box-shadow .12s ease,background .12s ease;
}
textarea{padding:10px 12px;line-height:1.55}
input[type=number]:hover,input[type=text]:hover,select:hover,textarea:hover{border-color:var(--ink-3)}
input[type=number]:focus,input[type=text]:focus,select:focus,textarea:focus{
  border-color:var(--accent);outline:0;box-shadow:0 0 0 2px var(--accent-soft);
}
label.fld{gap:6px}
label.fld b{font-size:var(--type-meta);line-height:1.35}

/* Jerarquía de acciones: primarias sólidas, secundarias delineadas y ayudas
   discretas. Se conservan las clases e identificadores existentes. */
button,.btn-primary,.btn-quiet{
  min-height:36px;padding:8px 14px;border-radius:var(--radius);line-height:1.2;
  display:inline-flex;align-items:center;justify-content:center;gap:5px;
  transition:background .12s ease,border-color .12s ease,color .12s ease,box-shadow .12s ease;
}
button:hover{border-color:var(--ink-3)}
button:active:not(:disabled),.btn-primary:active,.btn-quiet:active{box-shadow:inset 0 1px 2px rgba(21,26,32,.16)}
button.primary{color:var(--on-accent);box-shadow:0 1px 2px rgba(21,26,32,.12)}
button.primary:hover{filter:none;background:var(--accent-ink);border-color:var(--accent-ink)}
.btn-primary{color:var(--on-accent)}
.btn-quiet,#ex-stable,#ex-drift,
.presets button,[data-back],[data-reset]{background:var(--surface-2);color:var(--ink-2)}
.btn-quiet:hover,#ex-stable:hover,#ex-drift:hover,
.presets button:hover,[data-back]:hover,[data-reset]:hover{
  background:var(--accent-soft);border-color:var(--accent);color:var(--accent-ink);
}
button:disabled{box-shadow:none}
.seg{border-radius:var(--radius)}
.seg button{min-height:34px;padding:7px 13px}
.seg button[aria-pressed=true]{color:var(--on-accent)}
.chart-zoom-btn{min-height:28px;padding:4px 8px}
.chart-modal-close{min-height:30px;padding:0}

/* Estados breves, legibles sin convertir cada etiqueta en protagonista. */
.pill{min-height:24px;padding:4px 9px;border-radius:3px;font-size:10.5px;font-weight:500;line-height:1.25}
.pill-row-context{gap:7px 9px;margin-top:9px}
.race-alarm{border-radius:3px}

/* El veredicto y el índice decisivo forman el foco visual del resultado. */
#verdict>.card{border-top:3px solid var(--accent);padding:22px 24px;box-shadow:var(--shadow)}
.verdict-head{padding-bottom:15px;margin-bottom:14px}
.verdict-focal{gap:8px 12px;margin-top:7px}
.verdict-value{font-size:40px}
.verdict-state{font-size:18px;margin-top:5px}
.metrics{border-radius:var(--radius)}
.metric{min-height:92px;padding:15px 16px;display:flex;flex-direction:column;justify-content:center}
.metric span{font-size:10.5px;line-height:1.35}
.metric b{margin-top:2px;font-size:24px;line-height:1.12}
.metric small{margin-top:4px;line-height:1.35}
.metric.lead{background:var(--accent-soft);box-shadow:inset 3px 0 0 var(--accent)}
.metric.lead b{font-size:31px}
.metric-support{color:var(--ink-2)}
.mdetail{padding:11px 14px;margin-top:10px}

/* Tablas y gráficos: más aire, encabezados firmes y diagnósticos subordinados. */
th,td{padding:10px 13px}
thead th{padding-top:11px;padding-bottom:9px;border-bottom:2px solid var(--rule);font-size:10.5px}
tbody tr:hover{background:var(--surface-2)}
caption{padding:9px 13px}
.chartbox{padding:13px 15px 7px}
.chart-head{margin-bottom:5px}
.chart-head h4{font-size:11px;font-weight:600;color:var(--ink-2)}
#box-chart-loc,#box-chart-var{padding-top:15px}
.diag-details{margin-top:16px}
.diag-details .chartbox{background:var(--paper)}
.rule-item{padding:12px 0}
.saved-item{padding:9px 10px}

/* Navegación más calmada y precisa. */
.rail-brand{font-size:18px;margin-bottom:4px}
.rail-sub{margin-bottom:22px}
.rail nav{gap:2px}
.rail .grp{padding-top:20px;padding-bottom:6px}
.rail a{padding:7px 9px;border-radius:var(--radius)}
.rail a.on{box-shadow:inset 2px 0 0 var(--accent)}

@media (max-width:880px){
  main{padding:0 clamp(16px,4vw,30px) 80px}
  section{padding-top:52px;scroll-margin-top:52px}
  .mobilebar{min-height:50px;padding:8px 16px;background:var(--surface);box-shadow:0 1px 0 var(--rule)}
  .mobilebar-btn{min-width:44px;min-height:44px}
  .rail{width:min(320px,88vw);padding:22px 16px 44px;background:var(--surface)}
  .rail a{min-height:44px;align-items:center}
  .card{padding:18px 20px}
  #verdict>.card{padding:20px 22px}
}

@media (max-width:560px){
  :root{--space-card:16px;--control-h:42px}
  main{padding:0 14px 68px}
  section{padding-top:44px;scroll-margin-top:50px}
  .hero{padding-top:28px}
  .hero-band{padding:21px 18px 19px}
  .hero h1{font-size:clamp(29px,9vw,38px);line-height:1.06}
  h2{font-size:26px;line-height:1.12}
  h3{font-size:18.5px}
  .lede{font-size:15.5px;margin-bottom:22px}
  .card{padding:16px}
  .model,.qcell,.q,.toolpanel{padding:15px}
  .grid,.stack{gap:14px}
  button{min-height:44px;padding:9px 13px}
  .seg{width:100%}
  .seg button{flex:1;min-height:42px;white-space:normal}
  #ex-stable,#ex-drift,#copy{flex:1 1 132px}
  #data{min-height:220px}
  #verdict>.card{padding:18px 17px}
  .verdict-value{font-size:32px}
  .metric{min-height:88px;padding:13px 11px}
  .metric b{font-size:19px}
  .metric.lead b{font-size:25px}
  .metric small{font-size:11px}
  .chartbox{padding:11px 10px 5px}
  .chart-head-actions{gap:6px}
  .chart-zoom-btn{min-height:32px}
  th,td{padding:9px 11px}
  .studymgr button{flex:1 1 145px}
  .saved-item{flex-wrap:wrap}
  .saved-item b{flex-basis:100%}
}
/* ============ Fase C: fin ============ */

/* ---------- V4-A: accesos rápidos, separados del índice numerado ---------- */
/* Son atajos, no navegación indexada: viven fuera de #nav y por eso quedan fuera
   del scroll-spy y nunca reciben aria-current. */
.quicknav{display:flex;flex-direction:column;gap:2px;margin-bottom:0;padding-bottom:14px;
  border-bottom:1px solid var(--rule)}
.quicknav-lbl{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink-3);font-weight:600;padding:0 9px 7px}
.quicknav a{display:block;padding:7px 9px;border-radius:var(--radius);color:var(--ink-2);
  text-decoration:none;font-size:13.5px;line-height:1.3}
.quicknav a:hover{background:var(--surface-2);color:var(--ink)}
.quicknav a:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
@media (max-width:880px){
  .quicknav a{display:flex;align-items:center;min-height:44px}
}
@media print{.quicknav{display:none!important}}

/* ---------- V4-B: modulos interactivos, anclas y subnavegacion ---------- */
/* Subenlaces del rail: claramente subordinados, sin numero de capitulo falso. */
.rail a.subnav{grid-template-columns:14px 1fr;gap:5px;padding:5px 9px 5px 20px;font-size:12.5px;
  color:var(--ink-2);align-items:start}
.rail a.subnav .sub-mark{font-family:var(--f-mono);font-size:11px;color:var(--ink-3);line-height:1.45}
.rail a.subnav .sub-txt{line-height:1.35}
.rail a.subnav .sub-tag{display:block;font-style:normal;font-family:var(--f-mono);font-size:9px;
  letter-spacing:.11em;text-transform:uppercase;color:var(--ink-3);margin-top:2px}
.rail a.subnav:hover{background:var(--surface-2);color:var(--ink)}
.rail a.subnav.on-sub{color:var(--accent-ink);background:var(--accent-soft)}
.rail a.subnav.on-sub .sub-mark,.rail a.subnav.on-sub .sub-tag{color:var(--accent)}

/* Rotulo del modulo dentro del documento. */
.imod-tag{margin-top:34px;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;
  scroll-margin-top:24px}
.imod-badge{font-family:var(--f-mono);font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;
  font-weight:600;color:var(--accent-ink);border:1px solid var(--accent);border-radius:2px;padding:2px 7px}
.imod-micro{font-size:12.5px;color:var(--ink-2)}
.imod-title{margin-top:7px}

/* Llamada interna al simulador (seccion 09). */
.modcall{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin:16px 0 4px;
  padding:12px 14px;border:1px solid var(--rule);border-left:2px solid var(--accent);
  border-radius:var(--radius);background:var(--surface);text-decoration:none;color:var(--ink-2)}
.modcall:hover{background:var(--surface-2)}
.modcall-tag{font-family:var(--f-mono);font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;
  font-weight:600;color:var(--accent-ink)}
.modcall-txt{font-size:13.5px;flex:1 1 260px}
.modcall-go{font-family:var(--f-mono);font-size:11.5px;color:var(--accent-ink);white-space:nowrap}
@media (max-width:880px){
  .rail a.subnav{min-height:44px;align-items:center;padding-left:22px}
}
@media (max-width:560px){
  .modcall{gap:6px}
  .modcall-go{width:100%}
}

/* V4-B (ext.): los dos modulos de la seccion 00 conservan el ritmo vertical que
   tenian sus encabezados antes de recibir el rotulo (h3 #1 sin margen, h3 #2 con 30px). */
#intuition-capability{margin-top:0}
#intuition-control-limits{margin-top:30px}

/* ---------- V4-C2: composición de la sección 01 ---------- */
/* En pantallas anchas la prosa quedaba limitada a 70ch dentro de una columna mucho
   más ancha, dejando un tercio del ancho vacío. Dos columnas editoriales usan ese
   espacio sin alargar la línea de lectura. Por debajo del punto de ruptura se
   conserva exactamente el comportamiento de una sola columna. */
.change-link{margin-top:8px}
.change-link a{font-family:var(--f-mono);font-size:12px;color:var(--accent-ink);text-decoration:none}
.change-link a:hover{text-decoration:underline}
.target-source-link{font-family:var(--f-mono);font-size:12px;color:var(--accent-ink);
  text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:2px}
.target-source-link:hover,.target-source-link:focus-visible{color:var(--accent);text-decoration-thickness:2px}
@media (min-width:1200px){
  #novedades .card{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:34px;row-gap:0}
  /* la columna de contenido debe poder encogerse: sin minmax(0,…) el ancho mínimo
     de una cita sin cortes ensancharía la pista y desbordaría la página */
  #novedades .change{grid-template-columns:auto minmax(0,1fr)}
  /* con la medida estrecha, las citas largas se envuelven en lugar de empujar */
  #novedades .src{white-space:normal}
  /* la prosa pasa a llenar su columna: el tope de 70ch ya no aplica aquí */
  #novedades .change p{max-width:none}
  /* separadores: solo la primera fila queda sin filete superior */
  #novedades .change{border-top:1px solid var(--rule)}
  #novedades .change:nth-child(-n+2){border-top:0}
}

/* ---------- V4-E2a: los cuatro mitos en 2x2 en escritorio ancho ---------- */
/* Mismo punto de ruptura y mismo lenguaje de filetes que la seccion 01. Por debajo
   de 1200px no se aplica nada y la lista vuelve a una sola columna. */
@media (min-width:1200px){
  .mythgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:34px;row-gap:0;
    align-items:start}
  /* la columna de contenido debe poder encogerse dentro de su celda */
  .mythgrid .myth{grid-template-columns:auto minmax(0,1fr)}
  /* el texto llena su columna: el tope de 72ch ya no aplica aqui */
  .mythgrid .myth p{max-width:none}
  /* solo la primera fila queda sin filete superior */
  .mythgrid .myth{border-top:1px solid var(--rule)}
  .mythgrid .myth:nth-child(-n+2){border-top:0}
}

/* ---------- V4-E4c: alineación de índice, matriz y cartas ---------- */
#indice .toc{max-width:900px}
#indice .toc-row{grid-template-columns:34px minmax(0,1fr) 58px;gap:10px}
#indice .toc-row .p{font-size:12.5px;font-weight:500;color:var(--ink-2)}
#chart-cards details.acc summary{display:grid;grid-template-columns:minmax(0,1fr) 190px 18px;
  gap:12px;align-items:center}
#chart-cards .chart-card-title{min-width:0}
#chart-cards details.acc summary .src{justify-self:end;text-align:right;white-space:nowrap}
#chart-cards details.acc summary::after{width:18px;text-align:center;justify-self:center}
@media (max-width:600px){
  #chart-cards details.acc summary{grid-template-columns:minmax(0,1fr) 18px;gap:3px 10px}
  #chart-cards .chart-card-title{grid-column:1;grid-row:1}
  #chart-cards details.acc summary .src{grid-column:1;grid-row:2;justify-self:start;text-align:left}
  #chart-cards details.acc summary::after{grid-column:2;grid-row:1/3}
}

/* ===================== 分章版：章页顶栏（替代首页 hero） =====================
   每个章节页本来只有自己那一节，整块 hero 会把正文挤到首屏之外，
   所以章页改为一条紧凑面包屑 + 相邻章快捷跳转。 */
.pagebar{display:flex;align-items:center;justify-content:space-between;gap:18px;
  flex-wrap:wrap;padding:22px 0 0;margin:0 0 4px}
.crumb{display:flex;align-items:center;gap:9px;margin:0;min-width:0;
  font:500 var(--type-meta)/1.4 var(--f-mono);letter-spacing:.06em;color:var(--ink-3)}
.crumb a{color:var(--ink-3);text-decoration:none;border-bottom:1px solid transparent;
  transition:color .15s,border-color .15s;white-space:nowrap}
.crumb a:hover{color:var(--accent);border-bottom-color:var(--accent)}
.crumb .sep{color:var(--rule);user-select:none}
.crumb .grp{white-space:nowrap}
.crumb .cur{color:var(--ink);font-weight:600;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis}
.pagebar .pn{display:flex;gap:16px;flex-wrap:wrap;
  font:500 var(--type-meta)/1.4 var(--f-mono);letter-spacing:.06em}
.pagebar .pn a{color:var(--ink-3);text-decoration:none;border-bottom:1px solid transparent;
  transition:color .15s,border-color .15s;white-space:nowrap}
.pagebar .pn a:hover{color:var(--accent);border-bottom-color:var(--accent)}
.pagebar .pn a span{color:var(--rule);margin:0 3px}

/* ===================== 分章版：页脚章间导航 ===================== */
.chapnav{display:flex;gap:12px;align-items:stretch;justify-content:space-between;
  margin:40px 0 0;padding-top:20px;border-top:1px solid var(--rule);flex-wrap:wrap}
.chapnav a{display:flex;flex-direction:column;gap:3px;text-decoration:none;
  border:1px solid var(--rule);border-radius:var(--radius);background:var(--surface);
  padding:10px 16px;min-width:150px;transition:border-color .15s,box-shadow .15s,transform .15s}
.chapnav a:hover{border-color:var(--accent);box-shadow:var(--shadow);transform:translateY(-1px)}
.chapnav .k{font:500 var(--type-meta)/1.3 var(--f-mono);letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-3)}
.chapnav b{font:600 14px/1.35 var(--f-disp);color:var(--ink)}
.chapnav .chapnav-home{align-items:center;justify-content:center;text-align:center;
  min-width:96px;font:600 13px/1.2 var(--f-disp);color:var(--accent) !important}
.chapnav .next{text-align:right;align-items:flex-end}

/* ===================== 分章版：目录页 ===================== */
.chapgroups{margin-top:8px}
.chapgroup{margin:32px 0 0}
.chapgroup-h{display:flex;align-items:center;gap:12px;margin:0 0 14px}
.chapgroup-h b{font:600 var(--type-meta)/1 var(--f-mono);letter-spacing:.16em;
  text-transform:uppercase;color:var(--accent);white-space:nowrap}
.chapgroup-h i{flex:1;height:1px;background:var(--rule);display:block}
.chapgroup-h span{font:400 var(--type-small)/1 var(--f-body);color:var(--ink-3)}
.chapgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(276px,1fr));gap:14px}
.chapcard{display:flex;flex-direction:column;gap:7px;text-decoration:none;
  border:1px solid var(--rule);border-radius:var(--radius);background:var(--surface);
  padding:16px 18px 17px;transition:border-color .15s,box-shadow .15s,transform .15s}
.chapcard:hover{border-color:var(--accent);box-shadow:var(--shadow);transform:translateY(-2px)}
.chapcard .no{font:600 11px/1 var(--f-mono);letter-spacing:.08em;color:var(--accent)}
.chapcard h3{margin:0;font:600 15.5px/1.35 var(--f-disp);color:var(--ink)}
.chapcard p{margin:0;font-size:var(--type-small);line-height:1.62;color:var(--ink-2)}
.chapcard .tag{align-self:flex-start;margin-top:2px;font:500 var(--type-meta)/1 var(--f-mono);
  letter-spacing:.06em;color:var(--warn);border:1px solid var(--warn);
  border-radius:999px;padding:3px 8px}
@media (max-width:640px){
  .chapnav a{min-width:0;flex:1}
  .chapgrid{grid-template-columns:1fr}
  .pagebar{padding-top:16px}
  .pagebar .pn{display:none}          /* 窄屏靠页脚章间导航，顶栏只留面包屑 */
}