@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/ibm-plex-mono-cyrillic-ext-normal-400.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/ibm-plex-mono-cyrillic-normal-400.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/ibm-plex-mono-vietnamese-normal-400.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/ibm-plex-mono-latin-ext-normal-400.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/ibm-plex-mono-latin-normal-400.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/ibm-plex-mono-cyrillic-ext-normal-500.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/ibm-plex-mono-cyrillic-normal-500.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/ibm-plex-mono-vietnamese-normal-500.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/ibm-plex-mono-latin-ext-normal-500.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/ibm-plex-mono-latin-normal-500.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/ibm-plex-mono-cyrillic-ext-normal-600.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/ibm-plex-mono-cyrillic-normal-600.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/ibm-plex-mono-vietnamese-normal-600.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/ibm-plex-mono-latin-ext-normal-600.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/ibm-plex-mono-latin-normal-600.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-stretch: 100%;
  font-display: swap;
  src: url(/fonts/ibm-plex-sans-cyrillic-ext-normal-var.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-stretch: 100%;
  font-display: swap;
  src: url(/fonts/ibm-plex-sans-cyrillic-normal-var.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-stretch: 100%;
  font-display: swap;
  src: url(/fonts/ibm-plex-sans-greek-normal-var.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-stretch: 100%;
  font-display: swap;
  src: url(/fonts/ibm-plex-sans-vietnamese-normal-var.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-stretch: 100%;
  font-display: swap;
  src: url(/fonts/ibm-plex-sans-latin-ext-normal-var.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-stretch: 100%;
  font-display: swap;
  src: url(/fonts/ibm-plex-sans-latin-normal-var.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-stretch: 100%;
  font-display: swap;
  src: url(/fonts/ibm-plex-sans-cyrillic-ext-normal-var.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-stretch: 100%;
  font-display: swap;
  src: url(/fonts/ibm-plex-sans-cyrillic-normal-var.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-stretch: 100%;
  font-display: swap;
  src: url(/fonts/ibm-plex-sans-greek-normal-var.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-stretch: 100%;
  font-display: swap;
  src: url(/fonts/ibm-plex-sans-vietnamese-normal-var.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-stretch: 100%;
  font-display: swap;
  src: url(/fonts/ibm-plex-sans-latin-ext-normal-var.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-stretch: 100%;
  font-display: swap;
  src: url(/fonts/ibm-plex-sans-latin-normal-var.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-stretch: 100%;
  font-display: swap;
  src: url(/fonts/ibm-plex-sans-cyrillic-ext-normal-var.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-stretch: 100%;
  font-display: swap;
  src: url(/fonts/ibm-plex-sans-cyrillic-normal-var.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-stretch: 100%;
  font-display: swap;
  src: url(/fonts/ibm-plex-sans-greek-normal-var.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-stretch: 100%;
  font-display: swap;
  src: url(/fonts/ibm-plex-sans-vietnamese-normal-var.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-stretch: 100%;
  font-display: swap;
  src: url(/fonts/ibm-plex-sans-latin-ext-normal-var.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-stretch: 100%;
  font-display: swap;
  src: url(/fonts/ibm-plex-sans-latin-normal-var.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-stretch: 100%;
  font-display: swap;
  src: url(/fonts/ibm-plex-sans-cyrillic-ext-normal-var.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-stretch: 100%;
  font-display: swap;
  src: url(/fonts/ibm-plex-sans-cyrillic-normal-var.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-stretch: 100%;
  font-display: swap;
  src: url(/fonts/ibm-plex-sans-greek-normal-var.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-stretch: 100%;
  font-display: swap;
  src: url(/fonts/ibm-plex-sans-vietnamese-normal-var.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-stretch: 100%;
  font-display: swap;
  src: url(/fonts/ibm-plex-sans-latin-ext-normal-var.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-stretch: 100%;
  font-display: swap;
  src: url(/fonts/ibm-plex-sans-latin-normal-var.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{
--bg:#eceae4;--bg-2:#f4f3ef;--surface:#fff;--surface-2:#f6f5f1;--surface-3:#efeee9;
--border:#d7d4cb;--border-2:#e3e0d8;--border-strong:#c3bfb3;
--text:#23282e;--text-2:#5a6069;--text-3:#63686f;
--accent:#2f547d;--accent-press:#243f5e;--accent-soft:#e6ebf1;--accent-line:#c3d0de;--on-accent:#fff;
--r:8px;--r-lg:11px;--r-xl:14px;
--sh-1:0 1px 2px rgba(30,35,40,.07);--sh-2:0 4px 14px rgba(30,35,40,.09),0 1px 3px rgba(30,35,40,.06);
--sans:"IBM Plex Sans",system-ui,-apple-system,sans-serif;
--mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
color-scheme:only light;}
@media screen{:root[data-theme="dark"]{
--bg:#141619;--bg-2:#17191d;--surface:#1d2024;--surface-2:#22252a;--surface-3:#282b31;
--border:#363a41;--border-2:#2d3036;--border-strong:#474c54;
--text:#e8e5de;--text-2:#b6b2a9;--text-3:#97948d;
--accent:#82a9d9;--accent-press:#6d95c8;--accent-soft:#1f2c3b;--accent-line:#35506f;--on-accent:#0e1621;
--sh-1:0 1px 2px rgba(0,0,0,.45);--sh-2:0 4px 16px rgba(0,0,0,.42),0 1px 3px rgba(0,0,0,.35);
color-scheme:dark;}}
*{box-sizing:border-box}html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--sans);line-height:1.6;
font-size:17px;-webkit-font-smoothing:antialiased}
/* The homepage's faint hexagons behind every /latex page and the /learn-latex course (2026-11-02: "add our hexagon
   style to the background of the pages", then "add the hexagons to the /learn-latex/ pages too"): the same tile
   (public/bg/hex.svg, every 291 x 168 px) under the same soft glow at the top, as theme.css gives body:has(.lp.lp-pro).
   Light theme only, like the homepage's. The blog shares this stylesheet, not the class. */
:root:not([data-theme="dark"]) body.hex-bg{background-color:var(--bg);
background-image:radial-gradient(1500px 860px at 50% -180px,rgba(255,255,255,.78),rgba(255,255,255,0) 72%),url("/bg/hex.svg");
background-size:auto,291px 168px;background-repeat:no-repeat,repeat;background-position:center top,center 0}
a{color:var(--accent);text-decoration:none}a:hover{text-decoration:underline}
main p a:not([class]){text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:2px;text-decoration-color:color-mix(in srgb,currentColor 45%,transparent)}main p a:not([class]):hover{text-decoration-color:currentColor}
.wrap{max-width:1180px;margin:0 auto;padding:0 28px}
header.site{position:sticky;top:0;z-index:30;border-bottom:1px solid var(--border);
background:color-mix(in srgb,var(--bg) 86%,transparent);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
header.site .wrap{display:flex;align-items:center;justify-content:space-between;gap:12px;height:64px}
.wordmark{display:inline-flex;align-items:center;font-weight:600;font-size:16px;letter-spacing:-.01em;color:var(--text)}
.wordmark:hover{text-decoration:none}
.wordmark::before{content:"N";width:24px;height:24px;margin-right:9px;display:grid;place-items:center;
border-radius:6px;background:var(--accent);color:#fff;font-size:14px;font-weight:700}
/* the N mark keeps the brand navy and white letter in dark mode, as in the app */
@media screen{:root[data-theme="dark"] .wordmark::before{background:#2f547d}}
.wordmark .tex{color:var(--accent)}
.hdr-actions{display:flex;align-items:center;gap:10px;position:relative}
.cta-top{height:38px;display:inline-flex;align-items:center;padding:0 16px;border-radius:var(--r);
background:var(--accent);color:var(--on-accent);font-size:14px;font-weight:600;border:1px solid var(--accent)}
.cta-top:hover{background:var(--accent-press);border-color:var(--accent-press);text-decoration:none}
.hmenu-btn{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;flex:0 0 auto;
border:1px solid var(--border);border-radius:var(--r);background:var(--surface);color:var(--text-2);cursor:pointer}
.hmenu-btn:hover{color:var(--text);border-color:var(--border-strong);background:var(--surface-2)}
.hmenu{position:absolute;top:calc(100% + 10px);right:0;z-index:40;min-width:210px;display:flex;flex-direction:column;
gap:1px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--sh-2);padding:8px}
.hmenu[hidden]{display:none}
.hmenu a,.hmenu button{display:block;width:100%;text-align:left;padding:9px 12px;border-radius:var(--r);
color:var(--text-2);font:inherit;font-size:14px;font-weight:500;background:none;border:0;cursor:pointer;text-decoration:none}
.hmenu a:hover,.hmenu button:hover{background:var(--surface-2);color:var(--text);text-decoration:none}
.hmenu a[hidden],.hmenu button[hidden]{display:none}
.hmenu-signout{color:var(--danger);border-top:1px solid var(--border-2);margin-top:5px;padding-top:11px}
@media(max-width:460px){.cta-top{display:none}}
main{padding:34px 0 8px}
.crumbs{font-size:13px;color:var(--text-2);margin:0 0 18px}.crumbs a{color:var(--text-2)}.crumbs a:hover{color:var(--accent)}
h1{font-size:clamp(27px,5vw,36px);line-height:1.15;margin:0 0 8px;font-weight:600;letter-spacing:-.015em;
color:var(--text);text-wrap:balance}
.lede{color:var(--text-2);font-size:18px;margin:0 0 26px;max-width:60ch}
.hero{display:flex;flex-wrap:wrap;gap:20px 28px;align-items:center;background:var(--surface);
border:1px solid var(--border);border-radius:var(--r-xl);padding:26px 28px;margin:0 0 28px;box-shadow:var(--sh-1)}
.mathhero{flex:0 1 auto;min-width:0;max-width:100%;overflow-x:auto;overflow-y:hidden;color:var(--text)}
.mathhero .katex{font-size:2.3em}
.hero .cmd{flex:1 1 260px;min-width:0}
.katex{color:inherit}
.katex-display{margin:0}
.cmdlabel{font-size:11.5px;text-transform:uppercase;letter-spacing:.09em;color:var(--text-3);margin:0 0 8px;font-weight:600}
.copy{display:flex;align-items:stretch;gap:10px}
code,.code{font-family:var(--mono)}
.copy code{background:var(--surface-2);border:1px solid var(--border);color:var(--text);padding:11px 14px;
border-radius:var(--r);display:flex;align-items:center;flex:1;overflow-x:auto;white-space:pre;font-size:15px}
.copybtn{border:1px solid var(--accent);background:var(--accent);color:var(--on-accent);font:inherit;font-size:14px;font-weight:600;
padding:0 18px;border-radius:var(--r);cursor:pointer;white-space:nowrap}
.copybtn:hover{background:var(--accent-press);border-color:var(--accent-press)}
h2{font-size:19px;margin:32px 0 12px;font-weight:600;color:var(--text)}
.rows{border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden;background:var(--surface);box-shadow:var(--sh-1)}
.row{display:flex;flex-wrap:wrap;gap:4px 16px;align-items:baseline;padding:12px 18px;border-top:1px solid var(--border-2)}
.row:first-child{border-top:0}
.row code{color:var(--accent);white-space:pre;font-size:14.5px;max-width:100%;overflow-x:auto}.row .note{color:var(--text-2);font-size:14.5px}
.prose{margin:2px 0 4px}.prose p{margin:0 0 15px;color:var(--text)}
.ways .copy{margin:0 0 10px}.ways .copy+h2{margin-top:30px}
/* inline maths + command mentions inside prose/tips/faq/lede */
.lede .katex,.prose .katex,.tips .katex,.qa .katex,.ex .note .katex{font-size:1em}
code.tok{font-family:var(--mono);font-size:.88em;background:var(--surface-2);border:1px solid var(--border);
border-radius:5px;padding:1px 5px;color:var(--accent)}
.ex{margin:0 0 18px;border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden;background:var(--surface);box-shadow:var(--sh-1)}
.ex-render{padding:16px 18px;background:var(--surface-2);border-bottom:1px solid var(--border);color:var(--text);overflow-x:auto}
.ex-render .katex{font-size:1.15em}
.ex-code{display:flex;align-items:stretch}
.ex-code code{flex:1;min-width:0;padding:11px 16px;color:var(--text);white-space:pre;overflow-x:auto;font-size:14px}
.ex-copy{border:0;border-left:1px solid var(--border);background:var(--surface);color:var(--accent);border-radius:0;padding:0 16px;font-weight:600}
.ex-copy:hover{background:var(--surface-2);border-color:var(--border)}
.ex .note{color:var(--text-3);font-size:14px;padding:10px 18px 12px;margin:0;border-top:1px solid var(--border-2)}
.tips{margin:4px 0 8px;padding-left:22px}.tips li{margin:0 0 9px;color:var(--text);line-height:1.55}
/* FAQ: each question a dropdown (2026-11-02: "make all the faq's drop downs so they look better"), the
   homepage's (.faq-item in theme.css): a white card, "+" that turns to a navy minus when open */
.faq{display:flex;flex-direction:column;gap:10px}
.qa{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:2px 20px;
transition:border-color .18s cubic-bezier(.22,.61,.36,1),box-shadow .18s cubic-bezier(.22,.61,.36,1)}
.qa:hover{border-color:var(--border-strong)}
.qa[open]{box-shadow:var(--sh-1)}
/* A question runs as text (a command or formula in it stays in its sentence), the sign pinned at the right */
.qa .q{display:block;position:relative;list-style:none;cursor:pointer;padding:16px 38px 16px 0;margin:0;font-weight:600;
color:var(--text)}
.qa .q::-webkit-details-marker{display:none}
.qa .q::after{content:"+";position:absolute;right:0;top:50%;transform:translateY(-50%);color:var(--text-3);font-weight:400;
font-size:22px;line-height:1;transition:color .18s cubic-bezier(.22,.61,.36,1)}
.qa[open] .q::after{content:"\2212";color:var(--accent)}
.qa .q:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:4px}
.qa .a{color:var(--text-2);margin:0;padding:0 0 18px;font-size:16px;max-width:70ch}
.chips{display:flex;flex-wrap:wrap;gap:9px;margin:10px 0 0}
.chip{font-size:14.5px;color:var(--text-2);padding:8px 14px;border:1px solid var(--border);border-radius:999px;background:var(--surface)}
.chip:hover{color:var(--text);border-color:var(--accent-line);background:var(--surface-2);text-decoration:none}
.appcta{margin:36px 0 14px;background:var(--accent-soft);border:1px solid var(--accent-line);border-radius:var(--r-xl);padding:24px 26px}
.appcta h2{margin:0 0 6px;color:var(--accent-press)}
.appcta p{margin:0 0 16px;color:var(--text-2);max-width:56ch}
.appcta a.go{display:inline-block;background:var(--accent);color:var(--on-accent);font-weight:600;padding:11px 20px;border-radius:var(--r)}
.appcta a.go:hover{background:var(--accent-press);text-decoration:none}
.findercta{margin:16px 0 8px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-xl);padding:20px 24px}
.findercta h2{margin:0 0 6px}
.findercta p{margin:0 0 14px;color:var(--text-2);max-width:56ch}
.findercta a.go{display:inline-block;background:var(--accent);color:var(--on-accent);font-weight:600;padding:10px 18px;border-radius:var(--r)}
.findercta a.go:hover{background:var(--accent-press);text-decoration:none}
.ctapair{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(330px,100%),1fr));gap:14px;margin:16px 0 8px}
.ctapair .findercta{margin:0}
.findernote{margin:10px 0 0;font-size:14px;color:var(--text-3)}
.notesnote{margin:4px 0 14px}
.appcta p.appcta-more{margin-top:-8px;font-size:14.5px}
.lp-foot{display:flex;align-items:flex-start;justify-content:space-between;gap:32px 48px;padding:40px 0;
border-top:1px solid var(--border);color:var(--text-3);font-size:12.5px;flex-wrap:wrap;margin-top:24px}
.lp-foot-brand{display:flex;flex-direction:column;gap:8px}
.lp-foot-tag{color:var(--text-3);font-size:12px}
.lp-foot-cols{display:grid;grid-template-columns:repeat(4,auto);gap:22px 44px}
.lp-foot-col{display:flex;flex-direction:column;gap:9px}
.lp-foot-h{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--text-3);margin:0 0 2px}
.lp-foot-col a{color:var(--text-2);text-decoration:none;font-weight:500;font-size:13px}
.lp-foot-col a:hover{color:var(--accent);text-decoration:none}
@media(max-width:620px){.lp-foot-cols{grid-template-columns:repeat(2,1fr)}}
/* The language switch at the very bottom of a page, just the names in their own languages, English / Русский / 中文
   (the app's .lp-foot-lang, theme.css) */
.lp-foot-lang{flex-basis:100%;display:flex;flex-wrap:wrap;justify-content:center;gap:0 8px;margin-top:4px;padding-top:22px;
border-top:1px solid var(--border);font-size:13px;color:var(--text-3)}
.lp-foot-lang>a{color:var(--text-2);text-decoration:none}
.lp-foot-lang>a:hover,.lp-foot-lang>a:focus-visible{color:var(--accent);text-decoration:underline}
.lp-foot-lang>.is-current{color:var(--text);font-weight:600}
/* Instagram and LinkedIn, the footer's last row: small grey icons (the app's .lp-foot-social, theme.css) */
.lp-foot-social{flex-basis:100%;display:flex;justify-content:center;gap:14px}
.lp-foot-lang+.lp-foot-social{margin-top:-14px}
.lp-foot-social a{display:inline-flex;padding:4px;border-radius:6px;color:var(--text-3)}
.lp-foot-social a:hover,.lp-foot-social a:focus-visible{color:var(--text-2);text-decoration:none}
.lp-foot-social svg{width:18px;height:18px;display:block}
/* hub: a tidy tile grid per category (not raw bullet lists) */
.hubcount{color:var(--text-3);font-size:15px;margin:0 0 24px}
.catblock{margin:30px 0 6px}.catblock h2{margin:0 0 13px}
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.tile{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;
background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:20px 12px 16px;
box-shadow:var(--sh-1);text-align:center;min-height:118px;
transition:border-color .12s,box-shadow .12s,transform .12s}
.tile:hover{border-color:var(--accent-line);box-shadow:var(--sh-2);text-decoration:none;transform:translateY(-1px)}
.tmath{color:var(--text);display:flex;align-items:center;justify-content:center;min-height:2.1em;max-width:100%;overflow:hidden}
.tmath .katex{font-size:1.3em}
.tname{font-size:13px;color:var(--text-2);font-weight:500;line-height:1.3}
/* language switch in a header (site-chrome.mjs langSwitch; the /latex pages' is in the footer since 2026-11-02) +
   Chinese pages: CJK fallback fonts after Plex (Plex has no CJK glyphs) */
.lang-switch{display:inline-flex;align-items:center;height:38px;padding:0 10px;border-radius:var(--r);
color:var(--text-2);font-size:14px;font-weight:500;white-space:nowrap}
.lang-switch:hover{color:var(--text);background:var(--surface-2);text-decoration:none}
html:lang(zh) body{font-family:"IBM Plex Sans","PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans CJK SC",
"Source Han Sans SC",system-ui,-apple-system,sans-serif;line-height:1.75}
html:lang(zh) h1{letter-spacing:0}