/* Historical token/primitive provenance only: eip-design-kit-v3@930a4eb96667eb95f05c39a7b3dddce6ad8a79f8
   Current WebUI production presentation: eip-webui-v3@c98b2f1b5e111a1400f5c8c53671a4b187b1f55c
   Blog-only rules begin after the shared shell. */
@font-face { font-family:'IBM Plex Sans'; font-style:italic; font-weight:400; font-display:swap; src:url("./fonts/fontsource-5.3.0/ibm-plex-sans-cyrillic-ext-400-italic.woff2") format("woff2"); unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F; }
@font-face { font-family:'IBM Plex Sans'; font-style:normal; font-weight:400; font-display:swap; src:url("./fonts/fontsource-5.3.0/ibm-plex-sans-cyrillic-ext-400-normal.woff2") format("woff2"); unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F; }
@font-face { font-family:'IBM Plex Sans'; font-style:normal; font-weight:500; font-display:swap; src:url("./fonts/fontsource-5.3.0/ibm-plex-sans-cyrillic-ext-500-normal.woff2") format("woff2"); unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F; }
@font-face { font-family:'IBM Plex Sans'; font-style:normal; font-weight:600; font-display:swap; src:url("./fonts/fontsource-5.3.0/ibm-plex-sans-cyrillic-ext-600-normal.woff2") format("woff2"); unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F; }
@font-face { font-family:'IBM Plex Sans'; font-style:normal; font-weight:700; font-display:swap; src:url("./fonts/fontsource-5.3.0/ibm-plex-sans-cyrillic-ext-700-normal.woff2") format("woff2"); unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F; }
@font-face { font-family:'IBM Plex Sans'; font-style:italic; font-weight:400; font-display:swap; src:url("./fonts/fontsource-5.3.0/ibm-plex-sans-cyrillic-400-italic.woff2") format("woff2"); unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family:'IBM Plex Sans'; font-style:normal; font-weight:400; font-display:swap; src:url("./fonts/fontsource-5.3.0/ibm-plex-sans-cyrillic-400-normal.woff2") format("woff2"); unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family:'IBM Plex Sans'; font-style:normal; font-weight:500; font-display:swap; src:url("./fonts/fontsource-5.3.0/ibm-plex-sans-cyrillic-500-normal.woff2") format("woff2"); unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family:'IBM Plex Sans'; font-style:normal; font-weight:600; font-display:swap; src:url("./fonts/fontsource-5.3.0/ibm-plex-sans-cyrillic-600-normal.woff2") format("woff2"); unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family:'IBM Plex Sans'; font-style:normal; font-weight:700; font-display:swap; src:url("./fonts/fontsource-5.3.0/ibm-plex-sans-cyrillic-700-normal.woff2") format("woff2"); unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family:'IBM Plex Sans'; font-style:italic; font-weight:400; font-display:swap; src:url("./fonts/fontsource-5.3.0/ibm-plex-sans-greek-400-italic.woff2") format("woff2"); unicode-range:U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF; }
@font-face { font-family:'IBM Plex Sans'; font-style:normal; font-weight:400; font-display:swap; src:url("./fonts/fontsource-5.3.0/ibm-plex-sans-greek-400-normal.woff2") format("woff2"); unicode-range:U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF; }
@font-face { font-family:'IBM Plex Sans'; font-style:normal; font-weight:500; font-display:swap; src:url("./fonts/fontsource-5.3.0/ibm-plex-sans-greek-500-normal.woff2") format("woff2"); unicode-range:U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF; }
@font-face { font-family:'IBM Plex Sans'; font-style:normal; font-weight:600; font-display:swap; src:url("./fonts/fontsource-5.3.0/ibm-plex-sans-greek-600-normal.woff2") format("woff2"); unicode-range:U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF; }
@font-face { font-family:'IBM Plex Sans'; font-style:normal; font-weight:700; font-display:swap; src:url("./fonts/fontsource-5.3.0/ibm-plex-sans-greek-700-normal.woff2") format("woff2"); unicode-range:U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF; }
@font-face { font-family:'IBM Plex Sans'; font-style:italic; font-weight:400; font-display:swap; src:url("./fonts/fontsource-5.3.0/ibm-plex-sans-vietnamese-400-italic.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; }
@font-face { font-family:'IBM Plex Sans'; font-style:normal; font-weight:400; font-display:swap; src:url("./fonts/fontsource-5.3.0/ibm-plex-sans-vietnamese-400-normal.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; }
@font-face { font-family:'IBM Plex Sans'; font-style:normal; font-weight:500; font-display:swap; src:url("./fonts/fontsource-5.3.0/ibm-plex-sans-vietnamese-500-normal.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; }
@font-face { font-family:'IBM Plex Sans'; font-style:normal; font-weight:600; font-display:swap; src:url("./fonts/fontsource-5.3.0/ibm-plex-sans-vietnamese-600-normal.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; }
@font-face { font-family:'IBM Plex Sans'; font-style:normal; font-weight:700; font-display:swap; src:url("./fonts/fontsource-5.3.0/ibm-plex-sans-vietnamese-700-normal.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; }
@font-face { font-family:'IBM Plex Sans'; font-style:italic; font-weight:400; font-display:swap; src:url("./fonts/fontsource-5.3.0/ibm-plex-sans-latin-ext-400-italic.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; }
@font-face { font-family:'IBM Plex Sans'; font-style:normal; font-weight:400; font-display:swap; src:url("./fonts/fontsource-5.3.0/ibm-plex-sans-latin-ext-400-normal.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; }
@font-face { font-family:'IBM Plex Sans'; font-style:normal; font-weight:500; font-display:swap; src:url("./fonts/fontsource-5.3.0/ibm-plex-sans-latin-ext-500-normal.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; }
@font-face { font-family:'IBM Plex Sans'; font-style:normal; font-weight:600; font-display:swap; src:url("./fonts/fontsource-5.3.0/ibm-plex-sans-latin-ext-600-normal.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; }
@font-face { font-family:'IBM Plex Sans'; font-style:normal; font-weight:700; font-display:swap; src:url("./fonts/fontsource-5.3.0/ibm-plex-sans-latin-ext-700-normal.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; }
@font-face { font-family:'IBM Plex Sans'; font-style:italic; font-weight:400; font-display:swap; src:url("./fonts/fontsource-5.3.0/ibm-plex-sans-latin-400-italic.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:'IBM Plex Sans'; font-style:normal; font-weight:400; font-display:swap; src:url("./fonts/fontsource-5.3.0/ibm-plex-sans-latin-400-normal.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:'IBM Plex Sans'; font-style:normal; font-weight:500; font-display:swap; src:url("./fonts/fontsource-5.3.0/ibm-plex-sans-latin-500-normal.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:'IBM Plex Sans'; font-style:normal; font-weight:600; font-display:swap; src:url("./fonts/fontsource-5.3.0/ibm-plex-sans-latin-600-normal.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:'IBM Plex Sans'; font-style:normal; font-weight:700; font-display:swap; src:url("./fonts/fontsource-5.3.0/ibm-plex-sans-latin-700-normal.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:'IBM Plex Mono'; font-style:italic; font-weight:400; font-display:swap; src:url("./fonts/fontsource-5.3.0/ibm-plex-mono-cyrillic-ext-400-italic.woff2") format("woff2"); unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F; }
@font-face { font-family:'IBM Plex Mono'; font-style:normal; font-weight:400; font-display:swap; src:url("./fonts/fontsource-5.3.0/ibm-plex-mono-cyrillic-ext-400-normal.woff2") format("woff2"); unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F; }
@font-face { font-family:'IBM Plex Mono'; font-style:normal; font-weight:500; font-display:swap; src:url("./fonts/fontsource-5.3.0/ibm-plex-mono-cyrillic-ext-500-normal.woff2") format("woff2"); unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F; }
@font-face { font-family:'IBM Plex Mono'; font-style:normal; font-weight:600; font-display:swap; src:url("./fonts/fontsource-5.3.0/ibm-plex-mono-cyrillic-ext-600-normal.woff2") format("woff2"); unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F; }
@font-face { font-family:'IBM Plex Mono'; font-style:normal; font-weight:700; font-display:swap; src:url("./fonts/fontsource-5.3.0/ibm-plex-mono-cyrillic-ext-700-normal.woff2") format("woff2"); unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F; }
@font-face { font-family:'IBM Plex Mono'; font-style:italic; font-weight:400; font-display:swap; src:url("./fonts/fontsource-5.3.0/ibm-plex-mono-cyrillic-400-italic.woff2") format("woff2"); unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family:'IBM Plex Mono'; font-style:normal; font-weight:400; font-display:swap; src:url("./fonts/fontsource-5.3.0/ibm-plex-mono-cyrillic-400-normal.woff2") format("woff2"); unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family:'IBM Plex Mono'; font-style:normal; font-weight:500; font-display:swap; src:url("./fonts/fontsource-5.3.0/ibm-plex-mono-cyrillic-500-normal.woff2") format("woff2"); unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family:'IBM Plex Mono'; font-style:normal; font-weight:600; font-display:swap; src:url("./fonts/fontsource-5.3.0/ibm-plex-mono-cyrillic-600-normal.woff2") format("woff2"); unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family:'IBM Plex Mono'; font-style:normal; font-weight:700; font-display:swap; src:url("./fonts/fontsource-5.3.0/ibm-plex-mono-cyrillic-700-normal.woff2") format("woff2"); unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family:'IBM Plex Mono'; font-style:italic; font-weight:400; font-display:swap; src:url("./fonts/fontsource-5.3.0/ibm-plex-mono-vietnamese-400-italic.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; }
@font-face { font-family:'IBM Plex Mono'; font-style:normal; font-weight:400; font-display:swap; src:url("./fonts/fontsource-5.3.0/ibm-plex-mono-vietnamese-400-normal.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; }
@font-face { font-family:'IBM Plex Mono'; font-style:normal; font-weight:500; font-display:swap; src:url("./fonts/fontsource-5.3.0/ibm-plex-mono-vietnamese-500-normal.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; }
@font-face { font-family:'IBM Plex Mono'; font-style:normal; font-weight:600; font-display:swap; src:url("./fonts/fontsource-5.3.0/ibm-plex-mono-vietnamese-600-normal.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; }
@font-face { font-family:'IBM Plex Mono'; font-style:normal; font-weight:700; font-display:swap; src:url("./fonts/fontsource-5.3.0/ibm-plex-mono-vietnamese-700-normal.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; }
@font-face { font-family:'IBM Plex Mono'; font-style:italic; font-weight:400; font-display:swap; src:url("./fonts/fontsource-5.3.0/ibm-plex-mono-latin-ext-400-italic.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; }
@font-face { font-family:'IBM Plex Mono'; font-style:normal; font-weight:400; font-display:swap; src:url("./fonts/fontsource-5.3.0/ibm-plex-mono-latin-ext-400-normal.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; }
@font-face { font-family:'IBM Plex Mono'; font-style:normal; font-weight:500; font-display:swap; src:url("./fonts/fontsource-5.3.0/ibm-plex-mono-latin-ext-500-normal.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; }
@font-face { font-family:'IBM Plex Mono'; font-style:normal; font-weight:600; font-display:swap; src:url("./fonts/fontsource-5.3.0/ibm-plex-mono-latin-ext-600-normal.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; }
@font-face { font-family:'IBM Plex Mono'; font-style:normal; font-weight:700; font-display:swap; src:url("./fonts/fontsource-5.3.0/ibm-plex-mono-latin-ext-700-normal.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; }
@font-face { font-family:'IBM Plex Mono'; font-style:italic; font-weight:400; font-display:swap; src:url("./fonts/fontsource-5.3.0/ibm-plex-mono-latin-400-italic.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:'IBM Plex Mono'; font-style:normal; font-weight:400; font-display:swap; src:url("./fonts/fontsource-5.3.0/ibm-plex-mono-latin-400-normal.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:'IBM Plex Mono'; font-style:normal; font-weight:500; font-display:swap; src:url("./fonts/fontsource-5.3.0/ibm-plex-mono-latin-500-normal.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:'IBM Plex Mono'; font-style:normal; font-weight:600; font-display:swap; src:url("./fonts/fontsource-5.3.0/ibm-plex-mono-latin-600-normal.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:'IBM Plex Mono'; font-style:normal; font-weight:700; font-display:swap; src:url("./fonts/fontsource-5.3.0/ibm-plex-mono-latin-700-normal.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:dark;
  --bg:#0a0e12; --bg-raised:#0e141a; --bg-overlay:#131b23; --bg-hover:#16202a;
  --line:#1b2530; --line-strong:#27333f;
  --text:#e6edf3; --text-dim:#b6c1cb; --text-faint:#929fab;
  --accent:#34e0a4; --accent-dim:rgba(52,224,164,.12); --accent-line:rgba(52,224,164,.35); --accent-ink:#05281c;
  --info:#a78bfa; --info-dim:rgba(167,139,250,.1); --info-line:rgba(167,139,250,.28);
  --sans:'IBM Plex Sans',system-ui,-apple-system,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,'SF Mono',Menlo,monospace;
  --fs-xs:11px; --fs-sm:12.5px; --fs-base:13.5px; --fs-md:15px; --fs-lg:17px;
  --fs-xl:22px; --fs-2xl:28px; --fs-3xl:36px; --fs-4xl:52px;
  --lh-body:1.6; --tag-tracking:.18em;
  --r-sm:4px; --r-md:6px; --r-lg:8px; --r-xl:10px;
  --shadow-card:inset 0 1px 0 rgba(255,255,255,.035);
  --shadow-hover:inset 0 1px 0 rgba(255,255,255,.05),0 4px 16px rgba(0,0,0,.35);
  --page-glow:radial-gradient(1100px 420px at 50% -160px,rgba(52,224,164,.05),transparent 70%);
  --focus-ring:2px solid var(--accent); --ease:cubic-bezier(.25,.1,.25,1); --t-fast:120ms; --t-base:180ms;
}

[data-theme="light"] {
  color-scheme:light;
  --bg:#f4f6f8; --bg-raised:#fff; --bg-overlay:#e8edf2; --bg-hover:#e7ecf0;
  --line:#d5dde5; --line-strong:#c6d1da; --text:#17222b; --text-dim:#3f4d58; --text-faint:#596b79;
  --accent:#086b4e; --accent-dim:rgba(8,107,78,.10); --accent-line:rgba(8,107,78,.38); --accent-ink:#fff;
  --info:#7637e1; --info-dim:rgba(118,55,225,.07); --info-line:rgba(118,55,225,.28);
  --shadow-card:0 1px 2px rgba(23,34,43,.06),0 2px 6px rgba(23,34,43,.04);
  --shadow-hover:0 2px 4px rgba(23,34,43,.08),0 8px 20px rgba(23,34,43,.09);
  --page-glow:none;
}

* { box-sizing:border-box; margin:0; }
html { background:var(--bg); scroll-behavior:smooth; }
/* Page shell: main takes the slack so a short page (a one-post tag archive)
   still puts the footer at the bottom instead of floating it mid-screen.
   width:100% because .wrap carries a max-width, which stops a flex item from
   stretching and would otherwise leave main content-sized and too wide. */
body {
  min-height:100vh; display:flex; flex-direction:column;
  color:var(--text); background-color:var(--bg); background-image:var(--page-glow);
  background-repeat:no-repeat; font:var(--fs-base)/var(--lh-body) var(--sans); -webkit-font-smoothing:antialiased;
  transition:background-color var(--t-base) var(--ease);
}
body>main { flex:1 0 auto; width:100%; min-width:0; }
h1,h2,h3,h4 { text-wrap:balance; }
p { text-wrap:pretty; }
/* balance equalises line lengths — right for a short centred display heading,
   wrong for a left-aligned, data-driven title, where it under-fills the column
   while the text beneath runs full width. Nothing listed here is centred:
   text-align:center appears in this file only on .empty and figcaption.
   A/B measured over the built dist/ — 39 routes (27 posts, 10 tag pages, index,
   tag index) x 4 widths (375/768/1024/1440), 156 renders, 391 headings that
   actually wrap, each measured twice with only this rule toggled. Column use is
   the widest line over the available width. A line box is the union of client
   rects overlapping vertically by more than HALF the shorter rect's height.
   Both simpler tests fail here: equal-top splits a heading containing an inline
   <code> into phantom lines, and any-overlap merges real lines, because these
   headings set line-height 1.12-1.25 while their rects measure ~1.32em, so
   consecutive lines overlap by ~2.6px. 304 improve, 86
   are identical, 1 loses 1.81pp. Worst case under balance, and what pretty
   makes of it:
     .post-card h3      52.1% -> 88.9% @768   (188 wrapping)
     .prose h2          52.4% -> 65.5% @375   (39)
     .archive-row h3    53.6% -> 91.5% @768   (36)
     .article-layout h1 55.3% -> 85.8% @1440  (107)
     .prose h3          55.7% -> 64.9% @375   (18)
     .blog-hero h2      59.8% -> 97.0% @1024  (3)
   No heading gains or loses a line at any width, so nothing reflows. The single
   regression is the article h1 on /blog/posts/introducing-eip-mcp-server/ at
   375px, 97.3% -> 95.5%.
   The article h1 is included for a second reason: it is the SAME title string
   the list views render. Extracted from the built dist/ and compared character
   by character: the article h1 matches .post-card h3 for all 27 posts and
   .archive-row h3 for the 20 that appear in an archive, with zero mismatches.
   .blog-hero h2 is the featured slot on /blog/ and so carries exactly one
   title, which also matches its own h1. Leaving the h1 on balance would wrap
   one title one way in the article and another in every list that links to it.
   .prose h4 and .page-heading h1 are listed for category consistency, not for
   measured effect: .prose h4 never wraps (36 instances) and .page-heading h1
   reaches two lines only below 414px, on 4 of 209 tag pages. One of those four
   improves (77.2% -> 95.2% at 320px); the other three are hyphenated names
   short enough that both algorithms pick the same break. Leaving them out would
   mean the same tag name wraps one way in a heading and another in the card
   below it.
   The wrap/pretty pair is load-bearing, not redundant: an engine that ships
   balance but not pretty drops the second declaration, and without the
   fallback these fall back to the global balance rather than to normal
   wrapping. Order is pinned; adjacency is not. */
.post-card h3, .archive-row h3,
.blog-hero h2,
.article-layout h1,
.page-heading h1,
.prose h2, .prose h3, .prose h4 { text-wrap:wrap; text-wrap:pretty; }
a { color:var(--accent); text-decoration:none; }
a:hover { text-decoration:underline; }
button { font:inherit; }
::selection { background:var(--accent-dim); }
:focus-visible { outline:var(--focus-ring); outline-offset:2px; border-radius:var(--r-sm); }
:focus:not(:focus-visible) { outline:none; }
[id] { scroll-margin-top:72px; }
.skip {
  position:absolute; z-index:100; top:0; left:-9999px; padding:10px 16px; border-radius:0 0 var(--r-md) 0;
  color:var(--accent-ink); background:var(--accent); font:700 var(--fs-sm)/1 var(--mono);
}
.skip:focus { position:fixed; left:0; text-decoration:none; }
.sr-only {
  position:absolute; width:1px; height:1px; padding:0; overflow:hidden; clip:rect(0,0,0,0);
  white-space:nowrap; border:0;
}
.ico { width:1em; height:1em; fill:none; stroke:currentColor; stroke-width:1.75; stroke-linecap:round; stroke-linejoin:round; }

.btn {
  display:inline-flex; align-items:center; gap:7px; height:30px; padding:0 12px; border:1px solid var(--line-strong);
  border-radius:var(--r-md); color:var(--text-dim); background:var(--bg-overlay); cursor:pointer;
  font:500 var(--fs-xs)/1 var(--mono); white-space:nowrap;
  transition:color var(--t-fast),border-color var(--t-fast),background var(--t-fast);
}
.btn:hover { color:var(--accent); border-color:var(--accent-line); background:var(--accent-dim); text-decoration:none; }
.btn:active { transform:translateY(1px); }
/* quiet, not invisible: this is the only action in several page headings */
.btn--ghost { border-color:var(--line-strong); background:none; }
.btn--ghost:hover { color:var(--text); border-color:var(--line-strong); background:var(--bg-overlay); }
.tag {
  display:inline-flex; align-items:center; gap:5px; height:20px; padding:0 8px; border:1px solid var(--line);
  border-radius:var(--r-sm); color:var(--text-dim); background:transparent;
  font:400 10px/1 var(--mono); white-space:nowrap;
}
a.tag:hover { color:var(--accent); border-color:var(--line-strong); text-decoration:none; }
/* A tag link is 20px tall by design and the density is the point, so grow the
   hit area behind it rather than the tag. Kept inside the row gap so
   neighbouring targets never overlap. Matches the app and the kit. */
@media (pointer:coarse) {
  a.tag { position:relative; }
  a.tag::after { content:""; position:absolute; inset:-3px -2px; }
  .article-head .post-tags { gap:12px; }
  .article-head a.tag { height:34px; padding:0 12px; font-size:11px; }
  .article-head a.tag::after { inset:-5px -2px; }
  .article-layout .code-head .btn { height:40px; padding:0 14px; }
}
.tag--accent { color:var(--accent); border-color:var(--accent-line); background:var(--accent-dim); }
a.tag--accent:hover { color:var(--accent); filter:brightness(1.1); border-color:var(--accent-line); background:var(--accent-dim); }

/* One link tree at every width. Above the collapse breakpoint .nav-menu is
   display:contents, so .nav-links and .nav-right lay out as direct flex
   children of .nav; below it the same wrapper becomes a disclosure panel.
   Matches the application header; the two implementations stay aligned
   visually without sharing a runtime. */
/* Sticky belongs on the header, not on .nav. A sticky box can only travel
   inside its containing block, and <header> is exactly as tall as the nav it
   holds — so the old rule had zero travel and the bar scrolled away. */
/* body > header, not a bare header. This repo has exactly one <header> today
   (templates/base.html), so this is hardening rather than a fix: a bare selector
   captures every future nested <header> too, and a nested one would pin itself
   over its own content. The webui, which does have nested headers, needs it. */
body > header { position:sticky; z-index:10; top:0; }
.nav {
  position:relative; display:flex; align-items:center; gap:26px; height:56px; padding:0 28px;
  border-bottom:1px solid var(--line); background:color-mix(in srgb,var(--bg) 90%,transparent);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
}
.nav-menu { display:contents; }
.nav-toggle { display:none; }
.logo { display:flex; flex:none; align-items:center; gap:10px; color:var(--text); font-size:16px; font-weight:700; }
.logo:hover { text-decoration:none; }
.logo-word { display:inline-flex; gap:0; font-family:var(--mono); font-weight:600; letter-spacing:0; white-space:nowrap; }
.logo-word .dash { margin:0 .5px; color:var(--text-faint); font-weight:400; }
.logo .hl { color:var(--accent); }
.logomark {
  display:grid; place-items:center; width:26px; height:26px; border:1px solid var(--accent-line); border-radius:var(--r-md);
  color:var(--accent); background:var(--accent-dim);
  box-shadow:inset 0 1px 0 color-mix(in srgb,var(--text) 6%,transparent);
}
.logomark .ico { width:14px; height:14px; stroke-width:2.25; }
.nav-links { display:flex; align-self:stretch; align-items:center; gap:22px; }
.nav-links a { position:relative; display:inline-flex; height:100%; align-items:center; color:var(--text-dim); font-family:var(--mono); font-size:var(--fs-sm); font-weight:500; letter-spacing:.02em; white-space:nowrap; }
.nav-links a:hover { color:var(--text); text-decoration:none; }
.nav-links a[aria-current="page"] { color:var(--text); }
.nav-secondary { display:flex; align-self:stretch; align-items:center; gap:18px; margin-left:auto; }
.nav-secondary a { position:relative; display:inline-flex; height:100%; align-items:center; color:var(--text-faint); font-family:var(--mono); font-size:var(--fs-sm); font-weight:500; letter-spacing:.02em; white-space:nowrap; }
.nav-secondary a:hover { color:var(--text); text-decoration:none; }
.nav-secondary a[aria-current="page"] { color:var(--text); }
.nav-right { display:flex; align-items:center; gap:10px; }
.nav-links a[aria-current="page"]::after,.nav-secondary a[aria-current="page"]::after { content:""; position:absolute; right:0; bottom:0; left:0; height:1px; background:linear-gradient(90deg,var(--accent-line),var(--accent) 70%); }
.nav-links a[aria-current="page"]::before,.nav-secondary a[aria-current="page"]::before { content:""; position:absolute; z-index:1; right:-1px; bottom:-2px; width:5px; height:5px; border-radius:50%; background:var(--accent); box-shadow:0 0 0 2px var(--bg),0 0 9px color-mix(in srgb,var(--accent) 42%,transparent); }
.theme-dot { width:8px; height:8px; border-radius:50%; background:var(--accent); box-shadow:0 0 0 3px var(--accent-dim); }
[data-theme="light"] .theme-dot { background:transparent; box-shadow:inset 0 0 0 1.5px var(--accent),0 0 0 3px var(--accent-dim); }
.theme-name { min-width:5ch; text-align:left; }
.theme-name::before { content:"Dark"; }
[data-theme="light"] .theme-name::before { content:"Paper"; }
.theme-toggle { display:none; }
html[data-js] .theme-toggle { display:inline-flex; }
.wrap { width:100%; max-width:1180px; margin:0 auto; padding:0 28px; }
.foot { position:relative; margin-top:64px; padding:16px 28px 14px; color:var(--text-faint); background:color-mix(in srgb,var(--bg-raised) 42%,transparent); font-family:var(--mono); font-size:var(--fs-sm); }
.foot .brand { color:var(--text-dim); letter-spacing:.01em; font-weight:600; }
.foot-prompt { margin-right:5px; color:var(--accent); font-weight:600; }
.foot-signal-track { position:relative; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); }
.foot-signal-track::before { content:""; position:absolute; top:4px; left:8%; right:8%; height:1px; pointer-events:none; background:linear-gradient(90deg,var(--accent-dim),var(--accent-line),var(--accent-dim)); }
.foot-signal-link { position:relative; z-index:1; display:grid; min-width:0; justify-items:center; align-content:start; gap:8px; color:var(--text-dim); font-size:10px; text-decoration:none; }
.foot-signal-link:hover { text-decoration:none; }
.foot-signal-node { width:9px; height:9px; border:2px solid var(--bg-raised); border-radius:50%; background:var(--accent); box-shadow:0 0 0 1px var(--accent-line),0 0 11px color-mix(in srgb,var(--accent) 17%,transparent); }
.foot-signal-label { display:inline-flex; min-width:0; align-items:center; gap:5px; padding-bottom:2px; border-bottom:1px solid var(--accent-line); line-height:1.25; }
.foot-signal-chevron { color:var(--accent); font-size:12px; line-height:8px; }
.foot-signal-link:hover .foot-signal-label,.foot-signal-link:focus-visible .foot-signal-label { color:var(--accent); border-bottom-color:var(--accent); }
.foot-signal-link[aria-current="page"] .foot-signal-label { color:var(--text); }
.foot-meta { display:flex; justify-content:space-between; gap:18px; margin-top:13px; padding-top:9px; border-top:1px solid var(--line); color:var(--text-faint); font-size:10px; }
.foot-meta-tail { display:flex; align-items:center; gap:18px; }
.foot-tagline { color:var(--text-faint); }
.foot-utility { display:flex; align-items:center; gap:7px; white-space:nowrap; }
.foot-utility a { display:inline-flex; align-items:center; justify-content:center; color:var(--text-faint); }
.foot-utility a:hover { color:var(--text); text-decoration:underline; text-underline-offset:3px; }
.foot-utility a[aria-current="page"] { color:var(--text); }
@media (pointer:coarse) { .foot-signal-link { min-height:44px; } }
@media (pointer:coarse) { .foot-utility a { min-width:44px; min-height:44px; } }

.page-heading { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:baseline; column-gap:16px; row-gap:10px; padding-top:32px; }
.page-heading>div:first-child { display:contents; }
.page-heading h1 { grid-column:1; grid-row:1; min-width:0; font-size:26px; font-weight:600; line-height:1.35; letter-spacing:-.01em; overflow-wrap:anywhere; }
.page-heading p { grid-column:1/-1; grid-row:2; max-width:none; color:var(--text-dim); }
.page-heading-actions { display:flex; grid-column:2; grid-row:1; align-items:center; gap:8px; flex-wrap:wrap; }
.page-heading + .blog-hero,.page-heading + section { margin-top:20px; }
.page-heading + section>.section-heading { margin-top:0; }
.section-heading { margin:38px 0 12px; color:var(--text-dim); font:600 10px/1 var(--mono); letter-spacing:var(--tag-tracking); text-transform:uppercase; }

.blog-hero {
  display:block; overflow:hidden; margin-bottom:44px; border:1px solid var(--line); border-radius:var(--r-xl);
  color:var(--text); background:var(--bg-raised); box-shadow:var(--shadow-card);
  transition:border-color var(--t-fast),box-shadow var(--t-fast),transform var(--t-fast);
}
.blog-hero:hover { border-color:var(--line-strong); box-shadow:var(--shadow-hover); text-decoration:none; }
.blog-hero-cover { aspect-ratio:1200/320; border-bottom:1px solid var(--line); background:var(--bg-overlay); }
.blog-hero-cover img { display:block; width:100%; height:100%; object-fit:cover; }
.blog-hero-body { padding:24px; }
.blog-hero h2 { margin:12px 0 9px; font-size:var(--fs-2xl); line-height:1.2; letter-spacing:-.02em; }
.blog-hero:hover h2 { color:var(--accent); }
.blog-hero-body>p { max-width:none; color:var(--text-dim); font-size:var(--fs-md); }
.post-meta { display:flex; flex-wrap:wrap; align-items:center; gap:7px 13px; margin-top:14px; color:var(--text-faint); font:400 var(--fs-xs)/1.4 var(--mono); }
.post-meta-primary { margin:14px 0 18px; color:var(--text-dim); }
.post-list { border-top:1px solid var(--line); }
.post-card { display:grid; grid-template-columns:72px minmax(0,1fr); gap:20px; padding:22px 0; border-bottom:1px solid var(--line); }
.post-card>time { padding-top:3px; color:var(--text-faint); font:500 var(--fs-xs)/1.5 var(--mono); }
.post-card>time b { display:block; color:var(--text-dim); font-size:13px; }
.post-card>div { min-width:0; }
.post-card h3 { font-size:var(--fs-lg); line-height:1.35; overflow-wrap:break-word; }
.post-card h3 a { color:var(--text); }
.post-card h3 a:hover { color:var(--accent); }
.post-card>div>p { margin-top:7px; color:var(--text-dim); font-size:14px; overflow-wrap:break-word; }
.archive { margin-top:46px; }
.archive-year { display:grid; grid-template-columns:64px minmax(0,1fr); gap:18px; padding:17px 0; border-top:1px solid var(--line); }
.archive-year:last-child { border-bottom:1px solid var(--line); }
.archive-year>h3 { position:sticky; top:76px; align-self:start; padding-top:6px; color:var(--text-dim); font:600 13px/1 var(--mono); }
/* Baseline, not stretch: with the summary gone the date and read time are
   single lines beside a title that may wrap, and they should sit on its first
   line rather than centre against the whole block. */
.archive-row { display:grid; grid-template-columns:58px minmax(0,1fr) 48px; gap:14px; padding:9px 0; align-items:baseline; }
.archive-row time,.archive-row>span { color:var(--text-faint); font:400 var(--fs-xs)/1.5 var(--mono); }
.archive-row h3 { font-size:14px; line-height:1.4; }
.archive-row h3 a { color:var(--text); }
/* Matches `.post-card h3 a:hover`. The row is now nothing but this link, so the
   global underline is the only thing marking 20 of 27 posts as reachable. */
.archive-row h3 a:hover { color:var(--accent); }
.empty { padding:36px; border:1px solid var(--line); border-radius:var(--r-xl); background:var(--bg-raised); text-align:center; }
.panel { margin-bottom:20px; overflow:hidden; border:1px solid var(--line); border-radius:var(--r-xl); background:var(--bg-raised); box-shadow:var(--shadow-card); }
.panel-head { position:relative; display:flex; align-items:center; flex-wrap:wrap; gap:10px; padding:11px 16px; border-bottom:1px solid var(--line); background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 5%,var(--bg-overlay)),var(--bg-overlay)); }
.panel-head::after { content:""; position:absolute; bottom:-1px; left:0; right:0; height:1px; pointer-events:none; background:linear-gradient(90deg,var(--accent-line),transparent 62%); }
.panel-body { padding:18px 20px; }
.panel-body p { color:var(--text-dim); font-size:var(--fs-base); line-height:1.7; }
.message { margin-top:26px; }
.message-title { font:600 26px/1.35 var(--sans); letter-spacing:-.01em; text-transform:none; }
.message .panel-body p { min-width:0; overflow-wrap:anywhere; }
.error-page { display:grid; align-content:center; min-height:52svh; padding:36px 0 64px; }

.article-layout { display:grid; grid-template-columns:minmax(0,1fr) 210px; gap:48px; align-items:start; padding-top:32px; }
.article-layout article { min-width:0; }
.article-head { padding-bottom:22px; border-bottom:1px solid var(--line); }
.article-layout h1 { max-width:900px; color:var(--text); font-size:clamp(26px,4.6vw,34px); font-weight:600; line-height:1.18; letter-spacing:-.02em; }
.article-head .post-meta-primary { margin:13px 0 14px; }
.article-head .post-tags { margin-bottom:0; }
.post-cover { overflow:hidden; margin:24px 0 26px; border:1px solid var(--line); border-radius:var(--r-xl); background:var(--bg-overlay); box-shadow:var(--shadow-card); }
.post-cover img { display:block; width:100%; height:auto; }
.post-tags { display:flex; flex-wrap:wrap; gap:7px; margin-bottom:32px; }
.toc { position:sticky; top:78px; max-height:calc(100dvh - 96px); overflow-y:auto; overscroll-behavior:contain; }
.toc>p { margin-bottom:10px; color:var(--text-dim); font:600 10px/1 var(--mono); letter-spacing:var(--tag-tracking); text-transform:uppercase; }
.toc a { display:block; padding:5px 0 5px 12px; border-left:1px solid var(--line); color:var(--text-dim); font-size:12.5px; line-height:1.45; }
.toc a.sub { padding-left:24px; font-size:12px; }
.toc a:hover,.toc a.active { border-left-color:var(--accent); color:var(--accent); text-decoration:none; }

/* Prose sits in normal flow with no scroller of its own, so a string with no break
   opportunity that is wider than the line box - a session path, a hash, an inline
   FileOutputStream("...") call - pushes the whole page sideways on a narrow
   viewport. break-word rather than anywhere: it breaks those strings without also
   shrinking min-content, which would make prose tables collapse their columns
   instead of scrolling inside .prose table's own overflow-x. Fenced blocks keep
   their single-line rendering because .code-body pre is min-width:max-content, so
   their line box never gets narrow enough to force a break. */
.prose { color:var(--text); font-size:17px; line-height:1.7; overflow-wrap:break-word; }
.prose>p { margin:0 0 20px; }
.prose .lead { margin-bottom:26px; color:var(--text); font-size:var(--fs-lg); line-height:1.6; }
.prose h2 { margin:44px 0 15px; color:var(--text); font-size:var(--fs-xl); font-weight:600; line-height:1.3; letter-spacing:-.01em; }
.prose h3 { margin:30px 0 11px; color:var(--text); font-size:var(--fs-lg); font-weight:600; line-height:1.4; }
.prose h4 { margin:26px 0 9px; color:var(--text); font-size:var(--fs-md); font-weight:600; line-height:1.4; }
.prose strong { color:var(--text); font-weight:600; }
.prose ul,.prose ol { margin:0 0 20px; padding-left:1.55em; }
.prose li { margin-bottom:8px; padding-left:4px; }
.prose li::marker { color:var(--accent); }
.prose hr { margin:34px 0; border:0; border-top:1px solid var(--line); }
.prose a { color:var(--accent); text-decoration:underline; text-decoration-color:color-mix(in srgb,var(--accent) 62%,var(--bg)); text-decoration-thickness:1px; text-underline-offset:.18em; }
.prose a:hover { text-decoration-color:var(--accent); }
.prose code { padding:1px 6px; border:1px solid var(--line); border-radius:var(--r-sm); color:var(--text); background:var(--bg-overlay); font:inherit; font-family:var(--mono); font-size:.86em; }
.prose blockquote { margin:24px 0; padding:15px 19px; border-left:2px solid var(--accent); border-radius:0 var(--r-lg) var(--r-lg) 0; color:var(--text-dim); background:var(--bg-raised); }
.prose blockquote>:first-child { margin-top:0; }
.prose blockquote>:last-child { margin-bottom:0; }
.prose table { display:block; width:100%; margin:24px 0; overflow-x:auto; border:1px solid var(--line); border-radius:var(--r-lg); border-collapse:collapse; background:var(--bg-raised); font-size:14px; }
.prose th { padding:9px 12px; border-bottom:1px solid var(--line-strong); color:var(--text-dim); background:var(--bg-overlay); text-align:left; font:500 10px/1.4 var(--mono); letter-spacing:.12em; text-transform:uppercase; }
.prose td { padding:10px 12px; border-bottom:1px solid var(--line); }
.prose details { margin:22px 0; border:1px solid var(--line); border-radius:var(--r-lg); background:var(--bg-raised); }
.prose details>summary { padding:13px 16px; color:var(--text); cursor:pointer; font-weight:600; }
.prose details>*:not(summary) { margin-right:16px; margin-left:16px; }
.post-figure { margin:30px 0; }
.post-figure img { display:block; width:100%; height:auto; border:1px solid var(--line); border-radius:var(--r-lg); background:var(--bg-overlay); }
.post-figure figcaption { margin-top:10px; color:var(--text-dim); font-size:var(--fs-sm); line-height:1.5; text-align:center; }
.video { position:relative; overflow:hidden; margin:28px 0; padding-top:56.25%; border:1px solid var(--line); border-radius:var(--r-xl); background:#000; }
.video iframe { position:absolute; inset:0; width:100%; height:100%; border:0; }

.code-panel { overflow:hidden; margin:24px 0; border:1px solid var(--line); border-radius:var(--r-lg); background:#080b0f; }
.code-head { display:flex; align-items:center; justify-content:space-between; min-height:42px; padding:6px 10px 6px 14px; border-bottom:1px solid var(--line); background:var(--bg-overlay); }
.code-head>span { color:var(--text-dim); font:500 10px/1 var(--mono); letter-spacing:.1em; text-transform:uppercase; }
.code-head .btn { height:26px; }
.code-body { overflow:auto; max-height:620px; }
.code-body:focus-visible { outline-offset:-2px; }
.code-body pre { min-width:max-content; padding:17px 19px; color:#d8dee9; font:12.5px/1.65 var(--mono); tab-size:4; }
.code-body code { padding:0; border:0; color:inherit; background:none; font:inherit; }
.code-body .k,.code-body .kd,.code-body .kn { color:#c792ea; }
.code-body .s,.code-body .s1,.code-body .s2,.code-body .sa { color:#c3e88d; }
.code-body .c,.code-body .c1,.code-body .cm { color:#8796aa; font-style:italic; }
.code-body .nf,.code-body .nb { color:#82aaff; }
.code-body .n,.code-body .nv { color:#d8dee9; }
.code-body .mi,.code-body .mf { color:#f78c6c; }
.code-body .o { color:#89ddff; }
[data-theme="light"] .code-panel { background:#111820; }

.demo-gallery { margin:30px 0; }
.demo-gallery>figcaption { margin-bottom:14px; color:var(--text-dim); font:600 10px/1 var(--mono); letter-spacing:var(--tag-tracking); text-transform:uppercase; }
.demo-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr)); gap:12px; }
.demo-card { overflow:hidden; border:1px solid var(--line); border-radius:var(--r-lg); background:var(--bg-raised); }
.demo-bar { display:flex; align-items:center; gap:10px; padding:10px 12px; border-bottom:1px solid var(--line); background:var(--bg-overlay); }
.demo-bar>span { display:flex; gap:4px; }
.demo-bar i { display:block; width:6px; height:6px; border-radius:50%; background:var(--text-faint); }
.demo-bar b { color:var(--text-dim); font:500 10px/1 var(--mono); }
.demo-card pre { overflow-x:auto; padding:15px; color:var(--text); font:12px/1.6 var(--mono); }
.demo-card pre span { color:var(--accent); }
.demo-card p { padding:0 15px 15px; color:var(--text-dim); font-size:var(--fs-sm); }

.post-navigation { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; margin-top:48px; padding-top:20px; border-top:1px solid var(--line); }
.post-navigation a { display:grid; min-width:0; padding:13px 15px; border:1px solid var(--line); border-radius:var(--r-lg); color:inherit; background:var(--bg-raised); box-shadow:var(--shadow-card); transition:border-color var(--t-fast),background var(--t-fast); }
.post-navigation a.next { margin-left:0; text-align:left; }
.post-navigation span { color:var(--text-faint); font:500 10px/1 var(--mono); letter-spacing:.12em; text-transform:uppercase; }
.post-navigation b { margin-top:6px; color:var(--text-dim); font-size:14px; font-weight:500; }
.post-navigation a:hover { border-color:var(--line-strong); background:var(--bg-hover); text-decoration:none; }
.post-navigation a:hover b { color:var(--accent); }
.all-posts { margin-top:24px; }

.tag-cloud { display:flex; flex-wrap:wrap; gap:8px; padding:0; list-style:none; }
.tag-cloud .tag { height:26px; padding:0 10px; }
.tag-count { flex:none; color:var(--text-dim); font-weight:500; }
.topic-feature-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); align-items:start; gap:14px; margin-top:20px; }
.topic-panel { min-width:0; border:1px solid var(--line); border-radius:var(--r-xl); background:var(--bg-raised); box-shadow:var(--shadow-card); }
.topic-panel--wide { grid-column:1/-1; }
.topic-panel-head { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:13px 16px; border-bottom:1px solid var(--line); border-radius:var(--r-xl) var(--r-xl) 0 0; background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 5%,var(--bg-overlay)),var(--bg-overlay)); }
.topic-panel-head .section-heading { margin:0; }
.topic-panel-head>span,.topic-singletons-head>span { flex:none; color:var(--text-faint); font:500 10px/1.4 var(--mono); letter-spacing:.04em; }
.topic-panel>.tag-cloud { padding:16px; }
.topics-page .tag-cloud>li { max-width:100%; }
.topics-page .tag-cloud .tag,.post-card .tag,.tag-archive .tag { max-width:100%; height:auto; min-height:26px; padding:5px 10px; line-height:1.35; white-space:normal; overflow-wrap:anywhere; }
.topic-singletons { margin-top:38px; }
.topic-singletons-head { display:flex; align-items:flex-end; justify-content:space-between; gap:16px; padding-bottom:12px; border-bottom:1px solid var(--line); }
.topic-singletons-head .section-heading { margin:0 0 7px; }
.topic-singletons-head p { color:var(--text-dim); font-size:var(--fs-sm); }
.topic-jump { display:flex; flex-wrap:wrap; gap:6px; padding:12px 0; }
.topic-jump .btn { flex:0 0 auto; justify-content:center; width:32px; height:32px; padding:0; font-size:11px; }
.topic-alpha-list { column-count:3; column-gap:24px; }
.topic-letter-group { display:grid; grid-template-columns:28px minmax(0,1fr); gap:12px; padding:14px 0; break-inside:avoid; border-top:1px solid var(--line); }
.topic-letter-group h3 { padding-top:6px; color:var(--accent); font:600 13px/1 var(--mono); }
.topic-letter-group .tag-cloud { min-width:0; }

.tag-archive-month+.tag-archive-month { margin-top:28px; }
.tag-archive-month-head { display:flex; align-items:baseline; justify-content:space-between; gap:12px; padding-bottom:9px; border-bottom:1px solid var(--line); }
.tag-archive-month-head h2 { color:var(--text-dim); font:600 10px/1 var(--mono); letter-spacing:var(--tag-tracking); text-transform:uppercase; }
.tag-archive-month-head>span { flex:none; color:var(--text-faint); font:500 10px/1 var(--mono); }
.tag-archive-list { margin:0; padding:0; list-style:none; }
.tag-archive-row { display:grid; grid-template-columns:32px minmax(0,1fr) 76px; gap:14px; align-items:start; padding:16px 0; border-bottom:1px solid var(--line); }
.tag-archive-day { padding-top:3px; color:var(--text-dim); font:500 var(--fs-sm)/1.45 var(--mono); text-align:right; font-variant-numeric:tabular-nums; }
.tag-archive-main { min-width:0; }
.tag-archive-main h3 { font-size:15px; font-weight:600; line-height:1.45; text-wrap:pretty; overflow-wrap:break-word; }
.tag-archive-main h3 a { color:var(--text); }
.tag-archive-main h3 a:hover { color:var(--accent); text-decoration:none; }
.tag-archive-main>p { margin-top:5px; color:var(--text-dim); font-size:13.5px; line-height:1.65; text-wrap:pretty; overflow-wrap:break-word; }
.tag-archive-meta { margin-top:10px; }
.tag-archive-read { padding-top:4px; color:var(--text-dim); font:500 10.5px/1.4 var(--mono); text-align:right; white-space:nowrap; }
.tag-archive-read-inline { display:none; }

@media (pointer:coarse) {
  .page-heading-actions .btn { min-height:40px; }
  .topics-page .tag-cloud { row-gap:12px; }
  .topics-page .tag-cloud .tag,.post-card .tag,.tag-archive .tag { min-height:34px; padding:7px 12px; }
  .topic-jump .btn { width:40px; height:40px; }
}

.reading-progress { position:fixed; z-index:60; top:0; left:0; width:100%; height:3px; background:var(--accent); transform:scaleX(0); transform-origin:0 50%; }
@supports (animation-timeline:scroll()) {
  .reading-progress { animation:reading-progress linear both; animation-timeline:scroll(root); }
  @keyframes reading-progress { to { transform:scaleX(1); } }
}

@media (prefers-reduced-motion:no-preference) {
  .blog-hero:hover { transform:translateY(-1px); }
}
/* Between the collapse point and 1024px the inline row carries eight
   destinations, so the shell trades rhythm gaps for fit instead of wrapping.
   Matches the application header's mid-width compression. */
@media (max-width:1024px) {
  .nav { gap:16px; }
  .nav-links { gap:14px; }
  .nav-secondary { gap:13px; }
}
/* The inline head script sets html[data-js] before first paint. Without script,
   the same link tree stays visible as a wrapped strip instead of disappearing
   behind a control nothing can open. */
@media (max-width:900px) {
  .topic-feature-grid { grid-template-columns:minmax(0,1fr); }
  .topic-panel--wide { grid-column:auto; }
  .topic-alpha-list { column-count:2; }
  .article-layout { grid-template-columns:minmax(0,1fr); }
  .toc { display:none; }
  .nav { flex-wrap:wrap; height:auto; min-height:56px; padding:9px 28px; gap:10px 14px; }
  .nav-links { align-self:auto; flex-wrap:wrap; gap:8px 16px; }
  .nav-links a { height:auto; }
  .nav-secondary { display:flex; align-self:auto; align-items:center; flex-wrap:wrap; gap:8px 16px; margin-left:0; font:500 var(--fs-sm)/1 var(--mono); }
  .nav-secondary a { height:auto; color:var(--text-dim); white-space:nowrap; }
  .nav-secondary a:hover { color:var(--text); text-decoration:none; }
  .nav-right { margin-left:auto; }
  html[data-js] .nav { flex-wrap:nowrap; height:56px; padding:0 28px; gap:14px; }
  html[data-js] .nav-toggle { display:inline-flex; margin-left:auto; height:40px; padding:0 12px; gap:9px; color:var(--text-dim); }
  .nav-toggle-bars {
    position:relative; width:15px; height:1.5px; border-radius:2px; background:currentColor;
    transition:background var(--t-fast) var(--ease);
  }
  .nav-toggle-bars::before,.nav-toggle-bars::after {
    content:""; position:absolute; left:0; width:15px; height:1.5px; border-radius:2px; background:currentColor;
    transition:transform var(--t-fast) var(--ease);
  }
  .nav-toggle-bars::before { top:-5px; }
  .nav-toggle-bars::after { top:5px; }
  .nav-toggle[aria-expanded="true"] .nav-toggle-bars { background:transparent; }
  .nav-toggle[aria-expanded="true"] .nav-toggle-bars::before { transform:translateY(5px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] .nav-toggle-bars::after { transform:translateY(-5px) rotate(-45deg); }
  /* display:none, not visibility — it is what takes the destinations out of the
     tab order. Open is a complete sheet below the 56px header, not a short menu
     floating over an inert page. Its own scroll keeps every row reachable in a
     short landscape viewport. */
  html[data-js] .nav-menu {
    display:none; position:absolute; top:calc(100% + 1px); left:0; right:0;
    height:calc(100dvh - 56px); overflow-y:auto; overscroll-behavior:contain;
    padding:8px max(28px,env(safe-area-inset-right)) max(16px,env(safe-area-inset-bottom)) max(28px,env(safe-area-inset-left)); border-bottom:1px solid var(--line-strong); background:var(--bg-raised);
    box-shadow:0 18px 34px color-mix(in srgb,var(--text) 16%,transparent);
  }
  html[data-js] .nav-menu[data-open="true"] { display:flex; flex-direction:column; animation:nav-menu-in 140ms var(--ease) both; }
  html[data-js] .nav-links { align-items:stretch; flex-direction:column; flex-wrap:nowrap; gap:0; }
  html[data-js] .nav-secondary { align-items:stretch; flex-direction:column; flex-wrap:nowrap; gap:0; margin-top:0; padding-top:0; border-top:1px solid var(--line-strong); }
  /* One full-width 48px row grammar for every destination. The single group
     divider above .nav-secondary is the only internal rule in the menu. */
  html[data-js] .nav-links a,html[data-js] .nav-secondary a {
    display:flex; align-items:center; justify-content:flex-start; width:100%; height:48px; padding:0 14px;
    border:0; font-size:var(--fs-md); text-align:left;
  }
  .nav-links a[aria-current="page"]::before,.nav-secondary a[aria-current="page"]::before { display:none; }
  html[data-js] .nav-links a[aria-current="page"]::after,html[data-js] .nav-secondary a[aria-current="page"]::after { display:none; }
  html[data-js] .nav-links a[aria-current="page"],html[data-js] .nav-secondary a[aria-current="page"] {
    color:var(--accent); background:var(--accent-dim); box-shadow:inset 2px 0 0 var(--accent);
  }
  html[data-js] .nav-right { width:100%; margin-top:auto; margin-left:0; padding-top:14px; }
  html[data-js] .nav-right .btn { height:40px; padding:0 14px; }
  @keyframes nav-menu-in { from { opacity:0; transform:translateY(-4px); } }
}
@media (max-width:700px) {
  .archive-row { grid-template-columns:52px minmax(0,1fr); }
  .archive-row>span { display:none; }
}
@media (max-width:600px) {
  .wrap { padding:0 18px; }
  .nav { padding:9px 18px; }
  html[data-js] .nav { padding:0 18px; }
  html[data-js] .nav-menu { padding:8px max(18px,env(safe-area-inset-right)) max(16px,env(safe-area-inset-bottom)) max(18px,env(safe-area-inset-left)); }
  .page-heading { grid-template-columns:minmax(0,1fr); }
  .page-heading-actions { grid-column:1; grid-row:3; }
  .foot { padding:18px; }
  .foot-signal-track { grid-template-columns:repeat(2,minmax(0,1fr)); gap:4px 12px; }
  .foot-signal-track::before { display:none; }
  .foot-signal-link { grid-template-columns:auto minmax(0,1fr); min-height:44px; align-items:center; align-content:center; justify-items:start; gap:8px; }
  .foot-signal-label { white-space:normal; overflow-wrap:anywhere; }
  .foot-meta { align-items:flex-start; flex-direction:column; gap:5px; }
  .foot-meta-tail { align-items:flex-start; flex-direction:column; gap:5px; }
  .blog-hero-body { padding:18px; }
  .blog-hero h2 { font-size:var(--fs-xl); }
  .post-card { grid-template-columns:minmax(0,1fr); gap:8px; padding:19px 0; }
  .post-card>time { display:flex; gap:5px; }
  .post-card>time b { display:inline; }
  .tag-archive-row { grid-template-columns:26px minmax(0,1fr); gap:10px; padding:15px 0; }
  .tag-archive-read { display:none; }
  .tag-archive-read-inline { display:inline; }
  .archive-year { grid-template-columns:minmax(0,1fr); gap:10px; }
  .archive-year>h3 { position:static; }
  .topic-panel-head,.topic-singletons-head { align-items:flex-start; flex-direction:column; gap:7px; }
  .topic-panel>.tag-cloud { padding:14px; }
  .topic-alpha-list { column-count:1; }
  .topic-letter-group { grid-template-columns:24px minmax(0,1fr); gap:10px; }
  .article-layout { gap:0; }
  .article-layout h1 { font-size:26px; }
  .post-cover { margin-bottom:22px; }
  .prose { font-size:16px; line-height:1.68; }
  .post-navigation { grid-template-columns:minmax(0,1fr); }
}
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { scroll-behavior:auto!important; transition:none!important; animation:none!important; }
  .reading-progress { display:none; }
}