/* enoki full stylesheet. Consumers import this once. */

/* anton-vietnamese-400-normal */
@font-face {
  font-family: 'Anton';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/fonts/anton-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;
}

/* anton-latin-ext-400-normal */
@font-face {
  font-family: 'Anton';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/fonts/anton-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;
}

/* anton-latin-400-normal */
@font-face {
  font-family: 'Anton';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/fonts/anton-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;
}
/* archivo-vietnamese-400-normal */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/fonts/archivo-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;
}

/* archivo-latin-ext-400-normal */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/fonts/archivo-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;
}

/* archivo-latin-400-normal */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/fonts/archivo-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;
}
/* archivo-vietnamese-500-normal */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(/fonts/archivo-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;
}

/* archivo-latin-ext-500-normal */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(/fonts/archivo-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;
}

/* archivo-latin-500-normal */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(/fonts/archivo-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;
}
/* archivo-vietnamese-600-normal */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(/fonts/archivo-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;
}

/* archivo-latin-ext-600-normal */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(/fonts/archivo-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;
}

/* archivo-latin-600-normal */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(/fonts/archivo-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;
}
/* archivo-vietnamese-700-normal */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(/fonts/archivo-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;
}

/* archivo-latin-ext-700-normal */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(/fonts/archivo-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;
}

/* archivo-latin-700-normal */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(/fonts/archivo-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;
}
/* archivo-vietnamese-800-normal */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-display: swap;
  font-weight: 800;
  src: url(/fonts/archivo-vietnamese-800-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;
}

/* archivo-latin-ext-800-normal */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-display: swap;
  font-weight: 800;
  src: url(/fonts/archivo-latin-ext-800-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;
}

/* archivo-latin-800-normal */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-display: swap;
  font-weight: 800;
  src: url(/fonts/archivo-latin-800-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;
}
/* source-serif-4-cyrillic-ext-400-normal */
@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/fonts/source-serif-4-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;
}

/* source-serif-4-cyrillic-400-normal */
@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/fonts/source-serif-4-cyrillic-400-normal.woff2) format('woff2');
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}

/* source-serif-4-greek-400-normal */
@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/fonts/source-serif-4-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;
}

/* source-serif-4-vietnamese-400-normal */
@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/fonts/source-serif-4-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;
}

/* source-serif-4-latin-ext-400-normal */
@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/fonts/source-serif-4-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;
}

/* source-serif-4-latin-400-normal */
@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/fonts/source-serif-4-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;
}
/* source-serif-4-cyrillic-ext-700-normal */
@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(/fonts/source-serif-4-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;
}

/* source-serif-4-cyrillic-700-normal */
@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(/fonts/source-serif-4-cyrillic-700-normal.woff2) format('woff2');
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}

/* source-serif-4-greek-700-normal */
@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(/fonts/source-serif-4-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;
}

/* source-serif-4-vietnamese-700-normal */
@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(/fonts/source-serif-4-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;
}

/* source-serif-4-latin-ext-700-normal */
@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(/fonts/source-serif-4-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;
}

/* source-serif-4-latin-700-normal */
@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(/fonts/source-serif-4-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;
}
/* source-serif-4-cyrillic-ext-400-italic */
@font-face {
  font-family: 'Source Serif 4';
  font-style: italic;
  font-display: swap;
  font-weight: 400;
  src: url(/fonts/source-serif-4-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;
}

/* source-serif-4-cyrillic-400-italic */
@font-face {
  font-family: 'Source Serif 4';
  font-style: italic;
  font-display: swap;
  font-weight: 400;
  src: url(/fonts/source-serif-4-cyrillic-400-italic.woff2) format('woff2');
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}

/* source-serif-4-greek-400-italic */
@font-face {
  font-family: 'Source Serif 4';
  font-style: italic;
  font-display: swap;
  font-weight: 400;
  src: url(/fonts/source-serif-4-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;
}

/* source-serif-4-vietnamese-400-italic */
@font-face {
  font-family: 'Source Serif 4';
  font-style: italic;
  font-display: swap;
  font-weight: 400;
  src: url(/fonts/source-serif-4-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;
}

/* source-serif-4-latin-ext-400-italic */
@font-face {
  font-family: 'Source Serif 4';
  font-style: italic;
  font-display: swap;
  font-weight: 400;
  src: url(/fonts/source-serif-4-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;
}

/* source-serif-4-latin-400-italic */
@font-face {
  font-family: 'Source Serif 4';
  font-style: italic;
  font-display: swap;
  font-weight: 400;
  src: url(/fonts/source-serif-4-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;
}

/* MapLibre GL chrome lives in figures.css (the heavy chunk), not here. */

/* enoki tokens. Values transcribed from design.md 3.1.
   Deviations (WCAG AA, decided 2026-08-22): paper accent darkened,
   carbon code pastels darkened. See design.md 3.1 notes. */

:root {
  /* -- paper (default) ------------------------------------------------ */
  --en-paper: #efe9db;
  --en-paper2: #e7ddc9;
  --en-paper3: #ddd0b6;
  /* card surfaces (diagram nodes): lifted off the paper2 figure slab */
  --en-card: #fffdf6;
  --en-ink: #16130e;
  --en-ink2: #5a5140;
  --en-line: #16130e;
  --en-accent: #c21c00;
  --en-red: #a31221;
  --en-blue: #1546ff;
  --en-green: #0f8a46;
  --en-amber: #e08e05;
  --en-grid: rgba(22, 19, 14, 0.06);
  --en-sh: #16130e;
  --en-code-sky: #8fd1ff;
  --en-code-mint: #9be0b6;
  --en-code-yellow: #ffd873;
  --en-code-dim: #8c8270;

  --en-sh-1: 1px 1px 0 var(--en-sh);
  --en-sh-2: 2px 2px 0 var(--en-sh);
  --en-sh-3: 3px 3px 0 var(--en-sh);
  --en-sh-4: 4px 4px 0 var(--en-sh);
  --en-sh-5: 5px 5px 0 var(--en-sh);
  --en-sh-6: 6px 6px 0 var(--en-sh);
  --en-sh-8: 8px 8px 0 var(--en-sh);
  color-scheme: light;
}

:root[data-theme="carbon"],
[data-theme="carbon"] {
  --en-paper: #141110;
  --en-paper2: #1d1813;
  --en-paper3: #27201a;
  /* card surfaces (diagram nodes): lifted off the paper2 figure slab */
  --en-card: #2a231b;
  --en-ink: #f1ead9;
  --en-ink2: #b8ac93;
  --en-line: #f1ead9;
  --en-accent: #ff5a3c;
  --en-red: #ff453a;
  --en-blue: #6f92ff;
  --en-green: #37c579;
  --en-amber: #f0b429;
  --en-grid: rgba(241, 234, 217, 0.05);
  --en-sh: rgba(0, 0, 0, 0.55);
  --en-code-sky: #006cb8;
  --en-code-mint: #257846;
  --en-code-yellow: #876200;
  --en-code-dim: #6f6553;

  --en-sh-1: 1px 1px 0 var(--en-sh);
  --en-sh-2: 2px 2px 0 var(--en-sh);
  --en-sh-3: 3px 3px 0 var(--en-sh);
  --en-sh-4: 4px 4px 0 var(--en-sh);
  --en-sh-5: 5px 5px 0 var(--en-sh);
  --en-sh-6: 6px 6px 0 var(--en-sh);
  --en-sh-8: 8px 8px 0 var(--en-sh);
  color-scheme: dark;
}

:root {
  /* type --------------------------------------------------------------- */
  --en-disp: "Anton", "Archivo", sans-serif;
  --en-ui: "Archivo", system-ui, sans-serif;
  --en-body: "Source Serif 4", Georgia, "Times New Roman", serif;
  --en-mono:
    ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;

  --en-f-hero: clamp(64px, 15vw, 190px);
  --en-f-h2: clamp(34px, 7vw, 64px);
  --en-f-stat: clamp(34px, 6vw, 54px);
  --en-f-stepnum: 30px;
  --en-f-brand: 26px;
  --en-f-sub: clamp(16px, 2.4vw, 21px);
  --en-f-lede: 16px;
  --en-f-step-body: 14px;
  --en-f-mono-14: 14px;
  --en-f-mono-13: 13px;
  --en-f-mono-12: 12px;
  --en-f-mono-11: 11px;
  --en-f-mono-10: 10px;
  --en-f-mono-9: 9px;
  --en-f-mono-8: 8.5px;
  --en-f-code: 12.5px;

  --en-tr-disp: 1px;
  --en-tr-mono: 1px;
  --en-tr-dense: 2px;
  --en-lh-hero: 0.82;
  --en-lh-h2: 0.9;
  --en-lh-brand: 0.95;
  --en-lh-body: 1.55;

  /* shape -------------------------------------------------------------- */
  --en-r: 0px;
  --en-r-svg: 4px;
  --en-bw: 2px;
  --en-bw-thin: 1.5px;

  /* geometry: interior scale. Padding tokens name the component they
     fit (design 6.5/7.1/7.2/7.8). Spacing tokens are the shared steps. */
  --en-sp-1: 4px;
  --en-sp-2: 8px;
  --en-sp-3: 12px;
  --en-sp-4: 16px;
  --en-sp-5: 24px;
  --en-sp-6: 32px;
  --en-p-bar: 9px 12px;
  --en-p-chip: 5px 9px;
  --en-p-stat: 16px 14px;
  --en-p-board: 20px 22px;
  --en-code-bg: var(--en-ink);
  --en-code-1: var(--en-paper);
  --en-lh-mono: 1.7;

  /* layout ------------------------------------------------------------- */
  --en-cell: 44px;
  --en-wrap-max: 1160px;
  --en-gutter: 26px;
  --en-sec-pad: 70px;
  --en-topbar-h: 37px;
  --en-rail-w: 220px;
  --en-prog-h: 3px;

  --en-z-grid: 0;
  --en-z-content: 1;
  --en-z-rail: 40;
  --en-z-prog: 60;
  --en-z-topbar: 70;
  --en-z-tip: 80;
  --en-z-overlay: 90;
  --en-z-toast: 100;

  /* motion ------------------------------------------------------------- */
  --en-ease-ui: ease;
  --en-ease-out: cubic-bezier(0.2, 0.9, 0.2, 1);
  --en-ease-pop: cubic-bezier(0.2, 1.4, 0.3, 1);
  --en-ease-step: steps(1, end);
  --en-ease-lin: linear;

  --en-d-press: 0.08s;
  --en-d-quick: 0.12s;
  --en-d-reveal: 0.7s;
  --en-d-reveal-delay: 0.09s;
  --en-d-draw: 1s;
  --en-d-draw-2: 0.7s;
  --en-d-pop: 0.4s;
  --en-d-blink: 1.1s;
  --en-d-breathe: 4s;
  --en-d-marquee: 26s;
  --en-d-beat: 620ms;
  --en-d-count: 1100ms;
  --en-d-tooltip: 0.12s;
}

/* enoki reset: the minimum the library needs from the document. */

*,
*::before,
*::after {
  box-sizing: border-box;
}

/* The UA default 8px body margin shows as a white strip around the
   paper background. The library owns the full page, so claim it. */
body {
  margin: 0;
}

html {
  scroll-behavior: smooth;
}

:focus-visible {
  outline: var(--en-bw) solid var(--en-accent);
  outline-offset: 2px;
}

/* Raw code elements fall back to the UA generic mono (SF Mono on Mac,
   Consolas on Windows). Claim them with the house mono so every code
   surface renders identically. Components that set their own font keep
   winning on specificity. */
code,
kbd,
pre,
samp {
  font-family: var(--en-mono);
}

::selection {
  background: var(--en-accent);
  color: var(--en-paper);
}

/* Reduced motion: kill library animation, keep final states. Scoped to the
   house class prefix as well as data-enoki: Radix portals render outside
   any data-enoki tree, and consumers must not need to attribute-stamp an
   element to get the contract. The final-state rules compound
   [class*='en-'] with the state class to keep (0,2,0) specificity, since
   the base rules in motion.css load after reset.css. */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  [data-enoki],
  [data-enoki] *,
  [class*="en-"],
  [class*="en-"] * {
    /* biome-ignore lint/complexity/noImportantStyles: see above */
    animation: none !important;
    /* biome-ignore lint/complexity/noImportantStyles: see above */
    transition: none !important;
  }

  [class*="en-"].en-reveal {
    transform: none;
    opacity: 1;
  }

  [class*="en-"].en-draw {
    stroke-dasharray: none;
    stroke-dashoffset: 0;
  }

  [class*="en-"].en-blink,
  [class*="en-"].en-heartbeat {
    opacity: 1;
    transform: none;
  }

  [class*="en-"].en-marquee-track {
    transform: none;
  }

  [class*="en-"].en-btn:hover,
  [class*="en-"].en-btn:active {
    transform: none;
  }
}

/* enoki motion. Durations and easings live in tokens.css. */

@keyframes en-blink {
  50% {
    opacity: 0.15;
  }
}

@keyframes en-beat {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.35);
  }
}

@keyframes en-reveal {
  from {
    transform: translateY(26px);
    opacity: 0;
  }
  to {
    transform: none;
    opacity: 1;
  }
}

@keyframes en-draw {
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes en-dialog-in {
  from {
    transform: translate(-50%, calc(-50% + 10px));
    opacity: 0;
  }
  to {
    transform: translate(-50%, -50%);
    opacity: 1;
  }
}

@keyframes en-dialog-out {
  from {
    transform: translate(-50%, -50%);
    opacity: 1;
  }
  to {
    transform: translate(-50%, calc(-50% + 10px));
    opacity: 0;
  }
}

@keyframes en-sheet-in {
  from {
    transform: translateX(40px);
    opacity: 0;
  }
  to {
    transform: none;
    opacity: 1;
  }
}

@keyframes en-sheet-in-left {
  from {
    transform: translateX(-40px);
    opacity: 0;
  }
  to {
    transform: none;
    opacity: 1;
  }
}

@keyframes en-fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes en-toast-in {
  from {
    transform: translateX(16px);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes en-marquee {
  to {
    transform: translateX(-50%);
  }
}

.en-blink {
  animation: en-blink var(--en-d-blink) var(--en-ease-step) infinite;
}

.en-heartbeat {
  animation: en-beat var(--en-d-beat) var(--en-ease-pop) infinite;
}

/* Reveal gates the animation: the component adds .is-in when the element
   enters the viewport. Without .is-in the element stays hidden. */
.en-reveal {
  transform: translateY(26px);
  opacity: 0.001;
}

.en-reveal.is-in {
  animation: en-reveal var(--en-d-reveal) var(--en-ease-out)
    var(--en-reveal-delay, 0s) forwards;
}

.en-draw {
  stroke-dasharray: var(--en-draw-len, 300px);
  stroke-dashoffset: var(--en-draw-len, 300px);
  animation: en-draw var(--en-d-draw) var(--en-ease-out) forwards;
}

.en-marquee-track {
  display: inline-flex;
  gap: 48px;
  white-space: nowrap;
  will-change: transform;
  /* the track holds the two ticker halves at natural width; never compress,
     otherwise the halves overlap and loop with a seam */
  flex: none;
  animation: en-marquee var(--en-d-marquee) var(--en-ease-lin) infinite;
}

/* enoki type utilities. Compose family + size classes. */

.en-f-disp {
  font-family: var(--en-disp);
  text-transform: uppercase;
  letter-spacing: var(--en-tr-disp);
  font-weight: 400;
}

.en-f-mono {
  font-family: var(--en-mono);
  text-transform: uppercase;
  letter-spacing: var(--en-tr-mono);
  font-weight: 400;
}

.en-f-mono-bold {
  font-family: var(--en-mono);
  text-transform: uppercase;
  letter-spacing: var(--en-tr-mono);
  font-weight: 700;
}

.en-f-body {
  font-family: var(--en-body);
}

.en-track-dense {
  letter-spacing: var(--en-tr-dense);
}

.en-t-hero {
  font-size: var(--en-f-hero);
  line-height: var(--en-lh-hero);
}

.en-t-h2 {
  font-size: var(--en-f-h2);
  line-height: var(--en-lh-h2);
}

.en-t-stat {
  font-size: var(--en-f-stat);
  line-height: 1;
}

.en-t-stepnum {
  font-size: var(--en-f-stepnum);
  line-height: 1;
}

.en-t-brand {
  font-size: var(--en-f-brand);
  line-height: var(--en-lh-brand);
}

.en-t-sub {
  font-size: var(--en-f-sub);
}

.en-lh-body {
  line-height: var(--en-lh-body);
}

.en-s-8 {
  font-size: var(--en-f-mono-8);
}
.en-s-9 {
  font-size: var(--en-f-mono-9);
}
.en-s-10 {
  font-size: var(--en-f-mono-10);
}
.en-s-11 {
  font-size: var(--en-f-mono-11);
}
.en-s-12 {
  font-size: var(--en-f-mono-12);
}
.en-s-125 {
  font-size: var(--en-f-code);
}
.en-s-13 {
  font-size: var(--en-f-mono-13);
}
.en-s-14 {
  font-size: var(--en-f-mono-14);
}
.en-s-16 {
  font-size: var(--en-f-lede);
}

.en-hollow {
  color: transparent;
  -webkit-text-stroke: 2px var(--en-ink);
}

.en-mark-quiet {
  background: linear-gradient(transparent 62%, var(--en-paper3) 62%);
  padding: 0 2px;
}

.en-mark-hot {
  background: var(--en-accent);
  color: var(--en-paper);
  padding: 0 4px;
}

/* enoki layout: exposed grid, wrap, sections. */

.en-root {
  background: var(--en-paper);
  color: var(--en-ink);
  font-family: var(--en-ui);
  min-height: 100%;
}

.en-grid {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: var(--en-z-grid);
  background-image:
    linear-gradient(var(--en-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--en-grid) 1px, transparent 1px);
  background-size: var(--en-cell) var(--en-cell);
}

.en-grid--rel {
  position: absolute;
}

.en-wrap {
  width: 100%;
  max-width: var(--en-wrap-max);
  margin-inline: auto;
  padding-inline: var(--en-gutter);
  position: relative;
  z-index: var(--en-z-content);
}

@media (max-width: 600px) {
  .en-wrap {
    padding-inline: 16px;
  }
}

/* Visually hidden, still announced by screen readers and indexed by
   crawlers. Used for static H1s on pages whose visible heading is
   rendered by JS (e.g. <en-hero>). */
.en-vh {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.en-sec {
  padding-block: var(--en-sec-pad);
  border-top: var(--en-bw) solid var(--en-ink);
  scroll-margin-top: 48px;
}

.en-sec:first-child {
  border-top: 0;
}

.en-shead {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 16px;
  padding-bottom: 14px;
  margin-bottom: 8px;
  border-bottom: var(--en-bw) solid var(--en-line);
}

.en-shead-num {
  flex: none;
  font-family: var(--en-ui);
  font-size: var(--en-f-mono-14);
  font-weight: 700;
  line-height: 1;
  color: var(--en-accent);
  border: var(--en-bw) solid var(--en-line);
  background: var(--en-paper2);
  padding: 4px 8px;
}

.en-shead-title {
  font-family: var(--en-disp);
  text-transform: uppercase;
  letter-spacing: var(--en-tr-disp);
  font-weight: 400;
  font-size: var(--en-f-h2);
  line-height: var(--en-lh-h2);
  margin: 0;
}

.en-shead-blurb {
  margin: 0 0 3px auto;
  font-family: var(--en-body);
  font-size: 13px;
  line-height: var(--en-lh-body);
  color: var(--en-ink2);
  max-width: 280px;
}

/* Mobile: the right-pinned 280px box is a desktop device (it sits at the
   right end of the num+title row). Below 600px it wraps to its own line and
   its left edge lands under the title, reading as a random indent.
   Left-align it to the container edge instead. Must come after the base
   rule above (equal specificity, source order wins). */
@media (max-width: 600px) {
  .en-shead-blurb {
    margin: 0;
    max-width: none;
  }
}


/* Icon. Inherits currentColor, never its own palette. */

.en-icon {
  display: inline-block;
  vertical-align: middle;
  flex: none;
}

/* Button + IconButton. Spec 7.3 + 5.4: a key being pressed, not a spring.
   Exactly two weights: full .en-btn (shadow 6) and .en-btn--mini (shadow 3).
   Press: rest -> hover lift (+2/-2, shadow up 2) -> active sink (+3/+3,
   shadow down 4). 80ms ease, both transform and box-shadow. */

.en-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  font-family: var(--en-ui);
  font-size: var(--en-f-mono-13);
  font-weight: 700;
  letter-spacing: var(--en-tr-mono);
  text-transform: uppercase;
  line-height: 1;
  color: var(--en-paper);
  background: var(--en-accent);
  border: var(--en-bw) solid var(--en-line);
  border-radius: var(--en-r);
  padding: 13px 18px;
  box-shadow: var(--en-sh-6);
  cursor: pointer;
  white-space: nowrap;
  transition:
    transform var(--en-d-press) var(--en-ease-ui),
    box-shadow var(--en-d-press) var(--en-ease-ui);
}

.en-btn--ghost {
  color: var(--en-ink);
  background: var(--en-paper2);
}

.en-btn--on {
  color: var(--en-paper);
  background: var(--en-accent);
}

.en-btn--mini {
  padding: 7px 11px;
  font-size: var(--en-f-mono-11);
  box-shadow: var(--en-sh-3);
}

.en-btn--icon {
  padding: 12px;
}

.en-btn--icon.en-btn--mini {
  padding: 8px;
}

.en-btn:hover:not(:disabled) {
  transform: translate(-2px, -2px);
  box-shadow: var(--en-sh-8);
}

.en-btn:active:not(:disabled) {
  transform: translate(3px, 3px);
  box-shadow: var(--en-sh-2);
}

.en-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.en-btn:focus-visible {
  outline: var(--en-bw) solid var(--en-accent);
  outline-offset: 2px;
}

.en-btn-ic {
  display: inline-flex;
  align-items: center;
}

/* Field: label / control / hint / error. The mono label is the tab on the
   form ticket; the error is the red stamp. */

.en-field {
  display: grid;
  gap: 7px;
  align-content: start;
}

.en-field-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--en-ui);
  font-size: var(--en-f-mono-11);
  font-weight: 700;
  letter-spacing: var(--en-tr-mono);
  text-transform: uppercase;
  color: var(--en-ink);
}

.en-field-hint {
  margin: 0;
  font-family: var(--en-ui);
  font-size: var(--en-f-mono-11);
  line-height: var(--en-lh-body);
  color: var(--en-ink2);
}

.en-field-error {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--en-ui);
  font-size: var(--en-f-mono-11);
  font-weight: 700;
  letter-spacing: var(--en-tr-mono);
  text-transform: uppercase;
  color: var(--en-accent);
}

/* Input + Textarea ground. paper2 well, 2px line, mono. The control is a
   slot cut in the sheet; error re-inks the slot border in accent. */

.en-input {
  display: block;
  width: 100%;
  font-family: var(--en-ui);
  font-size: var(--en-f-mono-13);
  line-height: var(--en-lh-body);
  color: var(--en-ink);
  background: var(--en-paper2);
  border: var(--en-bw) solid var(--en-line);
  border-radius: var(--en-r);
  padding: 10px 12px;
}

.en-input::placeholder {
  color: var(--en-ink2);
}

.en-input:focus {
  outline: var(--en-bw) solid var(--en-accent);
  outline-offset: 2px;
}

.en-input--error {
  border-color: var(--en-accent);
}

textarea.en-input {
  min-height: 96px;
  resize: vertical;
}

/* Select: native control in a square slot, custom chevron riding the right
   edge. appearance:none, the chevron is ours, the dropdown stays the
   platform's. */

.en-select-wrap {
  position: relative;
  display: block;
}

.en-select {
  appearance: none;
  cursor: pointer;
  padding-right: 38px;
}

.en-select-ic {
  position: absolute;
  top: 50%;
  right: 12px;
  transform: translateY(-50%);
  display: inline-flex;
  color: var(--en-ink);
  pointer-events: none;
}

/* Checkbox + Radio. The native input stays in the tree, invisible but
   focusable; the box it drives is an 18px square slot. Checked re-inks the
   slot in accent. Focus draws the accent outline on the box, not the input. */

.en-check,
.en-radio {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font-family: var(--en-ui);
  font-size: var(--en-f-mono-11);
  font-weight: 700;
  letter-spacing: var(--en-tr-mono);
  text-transform: uppercase;
  color: var(--en-ink);
  user-select: none;
}

.en-check input,
.en-radio input {
  position: absolute;
  width: 18px;
  height: 18px;
  margin: 0;
  opacity: 0;
  cursor: inherit;
}

.en-check-box,
.en-radio-box {
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  flex: none;
  color: var(--en-paper);
  background: var(--en-paper2);
  border: var(--en-bw) solid var(--en-line);
  border-radius: var(--en-r);
}

.en-check-box svg {
  opacity: 0;
}

.en-radio-dot {
  width: 8px;
  height: 8px;
  background: var(--en-paper);
  opacity: 0;
}

.en-check input:checked + .en-check-box,
.en-radio input:checked + .en-radio-box {
  background: var(--en-accent);
}

.en-check input:checked + .en-check-box svg,
.en-radio input:checked + .en-radio-box .en-radio-dot {
  opacity: 1;
}

.en-check input:focus-visible + .en-check-box,
.en-radio input:focus-visible + .en-radio-box {
  outline: var(--en-bw) solid var(--en-accent);
  outline-offset: 2px;
}

.en-check:has(input:disabled),
.en-radio:has(input:disabled) {
  opacity: 0.45;
  cursor: not-allowed;
}

/* Switch: a dead-man's lever. 2px track, square thumb, 80ms travel. The
   track floods with accent when on. */

.en-switch {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font-family: var(--en-ui);
  font-size: var(--en-f-mono-11);
  font-weight: 700;
  letter-spacing: var(--en-tr-mono);
  text-transform: uppercase;
  color: var(--en-ink);
  user-select: none;
}

.en-switch input {
  position: absolute;
  width: 34px;
  height: 18px;
  margin: 0;
  opacity: 0;
  cursor: inherit;
}

.en-switch-track {
  position: relative;
  flex: none;
  width: 34px;
  height: 18px;
  background: var(--en-paper2);
  border: var(--en-bw) solid var(--en-line);
  border-radius: var(--en-r);
}

.en-switch-thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 10px;
  height: 10px;
  background: var(--en-paper);
  border: var(--en-bw) solid var(--en-line);
  transition: transform var(--en-d-press) var(--en-ease-ui);
}

.en-switch input:checked + .en-switch-track {
  background: var(--en-accent);
}

.en-switch input:checked + .en-switch-track .en-switch-thumb {
  transform: translateX(16px);
}

.en-switch input:focus-visible + .en-switch-track {
  outline: var(--en-bw) solid var(--en-accent);
  outline-offset: 2px;
}

.en-switch:has(input:disabled) {
  opacity: 0.45;
  cursor: not-allowed;
}

/* Slider: 2px ink groove, 14px square thumb with the small hard shadow.
   The accent fills the travelled track (Firefox natively; webkit keeps the
   plain groove, the thumb carries the state). */

.en-slider {
  appearance: none;
  -webkit-appearance: none;
  display: block;
  width: 100%;
  height: 20px;
  margin: 0;
  background: transparent;
  cursor: pointer;
}

.en-slider::-webkit-slider-runnable-track {
  height: 2px;
  background: var(--en-line);
}

.en-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 14px;
  height: 14px;
  margin-top: -6px;
  background: var(--en-paper);
  border: var(--en-bw) solid var(--en-line);
  border-radius: var(--en-r);
  box-shadow: var(--en-sh-2);
}

.en-slider::-moz-range-track {
  height: 2px;
  background: var(--en-line);
}

.en-slider::-moz-range-progress {
  height: 2px;
  background: var(--en-accent);
}

.en-slider::-moz-range-thumb {
  width: 14px;
  height: 14px;
  background: var(--en-paper);
  border: var(--en-bw) solid var(--en-line);
  border-radius: var(--en-r);
  box-shadow: var(--en-sh-2);
}

.en-slider:focus {
  outline: var(--en-bw) solid var(--en-accent);
  outline-offset: 4px;
}

.en-slider:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* Kbd. The one sanctioned 1.5px line in the house (spec 5.1). */

.en-kbd {
  display: inline-flex;
  align-items: center;
  font-family: var(--en-mono);
  font-size: var(--en-f-mono-10);
  letter-spacing: var(--en-tr-mono);
  text-transform: uppercase;
  color: var(--en-ink);
  background: var(--en-paper2);
  border: var(--en-bw-thin) solid var(--en-line);
  border-radius: var(--en-r);
  padding: 1px 6px;
  white-space: nowrap;
}

/* Chip, design 7.1. 2px border on paper2, mono 11px uppercase, 8px dot.
   A live dot blinks 1.1s steps(1) down to opacity .15. */

.en-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: var(--en-p-chip);
  background: var(--en-paper2);
  border: var(--en-bw) solid var(--en-line);
  border-radius: var(--en-r);
  font-family: var(--en-ui);
  font-size: var(--en-f-mono-11);
  letter-spacing: var(--en-tr-mono);
  text-transform: uppercase;
  color: var(--en-ink);
  white-space: nowrap;
}

.en-chip-dot {
  width: 8px;
  height: 8px;
  flex: none;
  background: var(--en-accent);
}

.en-chip-dot-accent {
  background: var(--en-accent);
}

.en-chip-dot-blue {
  background: var(--en-blue);
}

.en-chip-dot-green {
  background: var(--en-green);
}

@keyframes en-blink {
  50% {
    opacity: 0.15;
  }
}

.en-chip-dot.live {
  animation: en-blink 1.1s steps(1) infinite;
}

/* Code. Inline = paper2 well, mono. Block = 2px frame, mono 12.5px,
   hard shadow, horizontal scroll. Token colours come from design 8.5
   (.tok-k/.tok-s/.tok-v/.tok-c). */

.en-code {
  display: inline;
  padding: 1px 6px;
  background: var(--en-paper2);
  border: var(--en-bw) solid var(--en-line);
  border-radius: var(--en-r);
  font-family: var(--en-mono);
  font-size: var(--en-f-mono-12);
  color: var(--en-ink);
  white-space: nowrap;
}

.en-code-block {
  display: block;
  padding: var(--en-p-board);
  background: var(--en-code-bg);
  border: var(--en-bw) solid var(--en-line);
  border-radius: var(--en-r);
  box-shadow: var(--en-sh-8);
  overflow-x: auto;
  line-height: var(--en-lh-mono);
  color: var(--en-code-1);
}

.en-code-block code {
  display: block;
  font-family: var(--en-mono);
  font-size: var(--en-f-code);
  line-height: var(--en-lh-mono);
  color: var(--en-code-1);
  white-space: pre;
}

/* Stat card, design 7.2. 2px border on paper2, shadow 6, 16px 14px pad.
   Anton value at the stat step, unit 42% in accent, mono 10px label. */

.en-stat {
  padding: var(--en-p-stat);
  background: var(--en-paper2);
  border: var(--en-bw) solid var(--en-line);
  border-radius: var(--en-r);
  box-shadow: var(--en-sh-6);
  /* same grid-lift as .en-card: a static tile paints under the fixed
     z-index:0 grid (interior audit 2026-08-27). */
  position: relative;
  z-index: var(--en-z-content);
}

.en-stat-v {
  font-family: var(--en-disp);
  font-size: var(--en-f-stat);
  line-height: 1;
  letter-spacing: 1px;
  color: var(--en-ink);
}

/* the value never breaks mid-token ("3 / 3", "A$135.28"): a run with
   spaces would otherwise wrap between its own spaces and read as two
   half-numbers. Too wide for the tile = overflow, which dense consumers
   (the HUD) absorb by shrinking the font via container queries. */
.en-stat-num {
  white-space: nowrap;
}

.en-stat-unit {
  /* 0.42 of the value, floored at 9px: when the value shrinks to fit a
     tight cell, the unit must not shrink into unreadability. */
  font-size: max(0.42em, 9px);
  letter-spacing: 1px;
  color: var(--en-accent);
  /* units stay whole ("M words", "tok/d") — a split unit reads as a
     second value. No room = the whole unit drops under the value. */
  white-space: nowrap;
}

.en-stat-l {
  margin-top: 6px;
  font-family: var(--en-ui);
  font-size: var(--en-f-mono-10);
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--en-ink2);
}

/* grid: 4 columns, 12px gap, drops to 2 below 720px (design 6.6) */

.en-stat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

@media (max-width: 720px) {
  .en-stat-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Semicircular ink gauge. Track = paper3 slab with a 2px ink ring,
   value arc = accent, needle sweeps 180° over 0.6s. */

.en-gauge {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 280px;
  margin-inline: auto;
}

.en-gauge-arcwrap {
  position: relative;
  width: 100%;
}

.en-gauge-svg {
  width: 100%;
  height: auto;
  display: block;
}

.en-gauge-base {
  fill: none;
  stroke: var(--en-line);
  stroke-width: 18;
}

.en-gauge-track {
  fill: none;
  stroke: var(--en-paper3);
  stroke-width: 14;
}

/* colored operating-range bands under the value arc */
.en-gauge-zone {
  fill: none;
  stroke-width: 14;
}

.en-gauge-zone--dim {
  stroke: var(--en-paper3);
}

.en-gauge-zone--blue {
  stroke: var(--en-blue);
}

.en-gauge-zone--green {
  stroke: var(--en-green);
}

.en-gauge-zone--amber {
  stroke: var(--en-amber);
}

.en-gauge-zone--accent {
  stroke: var(--en-accent);
}

.en-gauge-zone--red {
  stroke: var(--en-red);
}

.en-gauge-zone--ink {
  stroke: var(--en-ink);
}

.en-gauge-arc {
  fill: none;
  stroke: var(--en-accent);
  stroke-width: 14;
  transition: stroke-dasharray 0.6s cubic-bezier(0.2, 0.9, 0.2, 1);
}

.en-gauge-tick {
  stroke: var(--en-ink2);
  stroke-width: 1.5;
}

.en-gauge-needle {
  transform: rotate(var(--en-gauge-deg, 0deg));
  transform-origin: 100px 100px;
  transition: transform 0.6s cubic-bezier(0.2, 0.9, 0.2, 1);
}

.en-gauge-needle line {
  stroke: var(--en-ink);
  stroke-width: 3;
}

.en-gauge-hub {
  fill: var(--en-ink);
}

.en-gauge-hubdot {
  fill: var(--en-paper);
}

.en-gauge-end {
  fill: var(--en-ink2);
  font-family: var(--en-ui);
  font-size: 8px;
  letter-spacing: 0.5px;
}

.en-gauge-read {
  position: absolute;
  top: 56%;
  left: 0;
  right: 0;
  transform: translateY(-50%);
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 2px;
  pointer-events: none;
}

.en-gauge-num {
  font-family: var(--en-disp);
  font-size: 34px;
  line-height: 1;
  color: var(--en-ink);
}

.en-gauge-unit {
  font-family: var(--en-disp);
  font-size: 16px;
  color: var(--en-ink2);
}

.en-gauge-label {
  margin-top: 2px;
  font-family: var(--en-ui);
  font-size: var(--en-f-mono-11);
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--en-ink);
}

.en-gauge-caption {
  margin-top: 6px;
  font-family: var(--en-ui);
  font-size: var(--en-f-mono-11);
  letter-spacing: 0.3px;
  color: var(--en-ink2);
}

@media (prefers-reduced-motion: reduce) {
  .en-gauge-needle,
  .en-gauge-arc {
    transition: none;
  }
}

/* Log slab: paper2 surface, 2px ink border, mono lines with a timestamp
   gutter. Head carries a blinking dot + label + line count. */

.en-term {
  display: flex;
  flex-direction: column;
  width: 100%;
  background: var(--en-paper2);
  border: var(--en-bw) solid var(--en-line);
  border-radius: var(--en-r);
  box-shadow: var(--en-sh-4);
  overflow: hidden;
}

.en-term-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-bottom: var(--en-bw-thin) solid var(--en-line);
  font-family: var(--en-ui);
  font-size: var(--en-f-mono-10);
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--en-ink);
}

@keyframes en-termblink {
  0%,
  60% {
    opacity: 1;
  }
  61%,
  100% {
    opacity: 0.15;
  }
}

.en-term-dot {
  width: 7px;
  height: 7px;
  flex: none;
  background: var(--en-green);
  border-radius: 50%;
  animation: en-termblink 1.6s steps(1) infinite;
}

.en-term-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.en-term-count {
  margin-left: auto;
  flex: none;
  color: var(--en-ink2);
}

/* overflow (both axes): vertical auto-follows the tail, horizontal scrolls
   long lines. The line min-width below is what makes the horizontal scroll
   SHARED — every line stretches to the widest line, so one scrollbar on the
   body moves everything together (per-line scroll would be unusable). */
.en-term-body {
  overflow: auto;
  padding: 8px 10px;
  font-family: var(--en-mono);
  font-size: var(--en-f-mono-11);
  line-height: 1.55;
  scrollbar-width: thin;
  scrollbar-color: var(--en-ink2) transparent;
}

.en-term-line {
  display: flex;
  gap: 10px;
  white-space: nowrap;
  min-width: max-content;
}

.en-term-ts {
  flex: none;
  color: var(--en-ink2);
  opacity: 0.75;
}

.en-term-txt {
  color: var(--en-ink);
}

.en-term-dim .en-term-txt {
  color: var(--en-ink2);
}

.en-term-ok .en-term-txt {
  color: var(--en-green);
}

.en-term-err .en-term-txt {
  color: var(--en-accent);
}

@media (prefers-reduced-motion: reduce) {
  .en-term-dot {
    animation: none;
  }
}

/* Rubber stamp: Anton caps inside a double ring, tilted, hard "thunk"
   entrance. Ghost = dashed + faded (milestone not yet earned). */

.en-stamp {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  padding: 8px 13px 9px;
  border: 2.5px solid currentColor;
  border-radius: 2px;
  font-family: var(--en-disp);
  text-transform: uppercase;
  letter-spacing: 1px;
  line-height: 1;
  user-select: none;
  white-space: nowrap;
}

/* inner ring, 2px gap */
.en-stamp::after {
  content: "";
  position: absolute;
  inset: 2px;
  border: 1px solid currentColor;
  border-radius: 1px;
  pointer-events: none;
}

.en-stamp-accent {
  color: var(--en-accent);
}

.en-stamp-ink {
  color: var(--en-ink);
}

.en-stamp-blue {
  color: var(--en-blue);
}

.en-stamp-green {
  color: var(--en-green);
}

.en-stamp-t {
  font-size: 15px;
}

.en-stamp-s {
  font-family: var(--en-ui);
  font-size: var(--en-f-mono-9);
  letter-spacing: 0.8px;
  opacity: 0.85;
}

@keyframes en-stampthunk {
  0% {
    transform: rotate(var(--en-stamp-rot, -4deg)) scale(1.7);
    opacity: 0;
  }
  55% {
    transform: rotate(var(--en-stamp-rot, -4deg)) scale(0.93);
    opacity: 1;
  }
  100% {
    transform: rotate(var(--en-stamp-rot, -4deg)) scale(1);
    opacity: 1;
  }
}

.en-stamp-on {
  transform: rotate(var(--en-stamp-rot, -4deg));
  animation: en-stampthunk 0.35s cubic-bezier(0.2, 0.9, 0.3, 1.4);
  opacity: 0.92;
}

.en-stamp-ghost {
  transform: rotate(var(--en-stamp-rot, -4deg));
  opacity: 0.3;
  border-style: dashed;
}

.en-stamp-ghost::after {
  border-style: dashed;
}

@media (prefers-reduced-motion: reduce) {
  .en-stamp-on {
    animation: none;
  }
}

/* KV bar, reference section 04. 56px bar on paper2 with shadow 5,
   segments fill left to right over 0.7s (design 8.1).
   Tones map to the semantic palette: accent, blue, green, gray. */

.en-kv-row {
  margin-bottom: 26px;
}

.en-kv-row:last-child {
  margin-bottom: 0;
}

.en-kv-rlab {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 8px;
  font-family: var(--en-ui);
  font-size: var(--en-f-mono-11);
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--en-ink);
}

.en-kv-pill {
  padding: 2px 7px;
  background: var(--en-paper2);
  border: var(--en-bw) solid var(--en-line);
  border-radius: var(--en-r);
  font-family: var(--en-ui);
  font-size: var(--en-f-mono-11);
  letter-spacing: 1px;
  text-transform: uppercase;
}

.en-kv-bar {
  display: flex;
  width: 100%;
  height: 56px;
  overflow: hidden;
  background: var(--en-paper2);
  border: var(--en-bw) solid var(--en-line);
  border-radius: var(--en-r);
  box-shadow: var(--en-sh-5);
}

@keyframes en-kvfill {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}

.en-kv-seg {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 8px;
  flex: none;
  overflow: hidden;
  /* cqw reference for the label-visibility rule below: the segment is
     the container, so a label can be hidden when its own segment is
     too narrow for it. */
  container-type: inline-size;
  color: var(--en-paper);
  font-family: var(--en-ui);
  font-size: var(--en-f-mono-12);
  font-weight: 700;
  letter-spacing: 0.5px;
  transform-origin: left;
  animation: en-kvfill 0.7s cubic-bezier(0.2, 0.9, 0.2, 1);
}

.en-kv-seg-accent {
  background: var(--en-accent);
}

.en-kv-seg-blue {
  background: var(--en-blue);
}

.en-kv-seg-green {
  background: var(--en-green);
}

.en-kv-seg-dim {
  background: var(--en-ink2);
}

.en-kv-seg-amber {
  background: var(--en-amber);
}

.en-kv-w {
  position: absolute;
  white-space: nowrap;
}

/* centered nowrap text in a narrow segments clips to a mid-word sliver when
   the segment is narrower than the label ("paid back" in a 43px
   payback segment read "aid bac"). 70px ≈ the widest 2-word mono-12 label
   plus breathing room; the row label + pill above carry the meaning and
   the aria-label keeps the exact %. The JSX 10% guard still handles the
   narrow-bar case, this handles the wide-bar narrow-segment case. */
@container (max-width: 70px) {
  .en-kv-w {
    display: none;
  }
}

.en-kv-foot {
  margin-top: 8px;
  font-family: var(--en-ui);
  font-size: var(--en-f-mono-11);
  letter-spacing: 0.3px;
  color: var(--en-ink2);
}

@media (prefers-reduced-motion: reduce) {
  .en-kv-seg {
    animation: none;
  }
}

/* Description list, semantic dl. 2px frame on paper2, term column in the
   kv-label scale (mono 11px uppercase), detail in body copy. Interior
   lines are 2px collapsed, per design 5.1. */

.en-dl {
  margin: 0;
  border: var(--en-bw) solid var(--en-line);
  border-radius: var(--en-r);
  background: var(--en-paper2);
}

.en-dl-row {
  display: grid;
  grid-template-columns: 180px 1fr;
}

.en-dl-row + .en-dl-row {
  border-top: var(--en-bw) solid var(--en-line);
}

.en-dl-term {
  margin: 0;
  padding: 12px 14px;
  border-right: var(--en-bw) solid var(--en-line);
  font-family: var(--en-ui);
  font-size: var(--en-f-mono-11);
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--en-ink);
}

.en-dl-detail {
  margin: 0;
  padding: 12px 14px;
  font-family: var(--en-body);
  font-size: var(--en-f-lede);
  line-height: var(--en-lh-body);
  color: var(--en-ink2);
}

@media (max-width: 560px) {
  .en-dl-row {
    grid-template-columns: 1fr;
  }

  .en-dl-term {
    border-right: 0;
    border-bottom: var(--en-bw) solid var(--en-line);
  }
}

/* List, semantic ul/ol. 2px frame on paper2, 2px collapsed interior
   lines. Unordered rows carry the 9px accent square (the canvas bullet);
   ordered rows carry a mono two-digit number. Meta sits right-aligned in
   the instrument scale. */

.en-list {
  margin: 0;
  padding: 0;
  list-style: none;
  border: var(--en-bw) solid var(--en-line);
  border-radius: var(--en-r);
  background: var(--en-paper2);
}

.en-list-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
}

.en-list-item + .en-list-item {
  border-top: var(--en-bw) solid var(--en-line);
}

.en-list-mark {
  flex: none;
  width: 9px;
  height: 9px;
  background: var(--en-accent);
}

.en-list-num {
  flex: none;
  font-family: var(--en-ui);
  font-size: var(--en-f-mono-11);
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--en-ink2);
}

.en-list-label {
  font-family: var(--en-body);
  font-size: var(--en-f-lede);
  line-height: var(--en-lh-body);
  color: var(--en-ink);
}

.en-list-meta {
  margin-left: auto;
  font-family: var(--en-ui);
  font-size: var(--en-f-mono-11);
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--en-ink2);
}

/* Empty state. 2px frame on paper2, centered, no shadow: it is a
   placeholder, not an object. The square icon is the geometric marker,
   title in the step-h4 scale, body in step-body text. */

.en-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: var(--en-sp-6) var(--en-sp-5);
  background: var(--en-paper2);
  border: var(--en-bw) solid var(--en-line);
  border-radius: var(--en-r);
  text-align: center;
}

.en-empty-icon {
  color: var(--en-ink2);
  opacity: 0.6;
}

.en-empty-title {
  font-family: var(--en-ui);
  font-size: 13px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--en-ink);
}

.en-empty-body {
  max-width: 420px;
  font-family: var(--en-body);
  font-size: var(--en-f-step-body);
  line-height: var(--en-lh-body);
  color: var(--en-ink2);
}

.en-empty-action {
  margin-top: var(--en-sp-2);
}

/* Avatar, geometric: square, 2px frame, Anton initials on a filled
   ground. Sizes step 32 / 44 (the grid cell) / 64. Tones map to the
   semantic palette; text is always paper for contrast. */

.en-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  font-family: var(--en-disp);
  font-weight: 400;
  letter-spacing: 1px;
  line-height: 1;
  color: var(--en-paper);
  border: var(--en-bw) solid var(--en-line);
  border-radius: var(--en-r);
}

.en-avatar-sm {
  width: 32px;
  height: 32px;
  font-size: 13px;
}

.en-avatar-md {
  width: var(--en-cell);
  height: var(--en-cell);
  font-size: var(--en-f-stepnum);
}

.en-avatar-lg {
  width: 64px;
  height: 64px;
  font-size: 26px;
}

.en-avatar-ink {
  background: var(--en-ink);
}

.en-avatar-accent {
  background: var(--en-accent);
}

.en-avatar-blue {
  background: var(--en-blue);
}

.en-avatar-green {
  background: var(--en-green);
}

/* Table, generic. Reference anatomy: 2px frame, collapsed 2px interior
   borders, ink ground header in mono step scale, body in the step body
   scale, shadow 8. Density sm tightens padding and steps the body scale
   down. The sort control is a plain button carrying the mono header
   style; the chevron fades when unsorted and flips for ascending. */

.en-tbl {
  overflow-x: auto;
}

.en-tbl table {
  width: 100%;
  border-collapse: collapse;
  border: var(--en-bw) solid var(--en-line);
  background: var(--en-paper2);
  box-shadow: var(--en-sh-8);
}

.en-tbl caption {
  caption-side: top;
  writing-mode: initial;
  text-align: left;
  font-family: var(--en-ui);
  font-size: var(--en-f-mono-11);
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--en-ink2);
  padding: 0 0 10px;
}

.en-tbl th,
.en-tbl td {
  border: var(--en-bw) solid var(--en-line);
  padding: 12px 14px;
  text-align: left;
  vertical-align: top;
}

.en-tbl thead th {
  background: var(--en-ink);
  color: var(--en-paper);
  font-family: var(--en-ui);
  font-size: var(--en-f-mono-11);
  font-weight: 400;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.en-tbl td {
  font-family: var(--en-ui);
  font-size: var(--en-f-step-body);
  line-height: var(--en-lh-body);
  color: var(--en-ink);
}

.en-tbl-right {
  text-align: right;
}

.en-tbl-sm th,
.en-tbl-sm td {
  padding: 7px 10px;
}

.en-tbl-sm td {
  font-size: var(--en-f-code);
}

.en-tbl-sortbtn {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  color: inherit;
  cursor: pointer;
}

.en-tbl-sortbtn:hover {
  color: var(--en-accent);
}

.en-tbl-sortbtn:focus-visible {
  outline: var(--en-bw) solid var(--en-accent);
  outline-offset: 3px;
}

.en-tbl-sorticon {
  opacity: 0.35;
}

.en-tbl-sorticon[data-dir="asc"] {
  opacity: 1;
  transform: rotate(180deg);
}

.en-tbl-sorticon[data-dir="desc"] {
  opacity: 1;
}

/* Risk table. Same 2px collapse grammar as Table, but the first cell
   pairs a mono uppercase mode name with a severity pill: hi sits on
   the accent, mid on amber, lo on green, all paper text. */

.en-risk {
  overflow-x: auto;
}

.en-risk table {
  width: 100%;
  border-collapse: collapse;
  border: var(--en-bw) solid var(--en-line);
  background: var(--en-paper2);
  box-shadow: var(--en-sh-8);
}

.en-risk th,
.en-risk td {
  border: var(--en-bw) solid var(--en-line);
  padding: 12px 14px;
  text-align: left;
  vertical-align: top;
  font-family: var(--en-ui);
  font-size: var(--en-f-step-body);
  line-height: var(--en-lh-body);
  color: var(--en-ink);
}

.en-risk thead th {
  background: var(--en-ink);
  color: var(--en-paper);
  font-family: var(--en-ui);
  font-size: var(--en-f-mono-11);
  font-weight: 400;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.en-risk td b {
  display: block;
  font-family: var(--en-ui);
  font-size: var(--en-f-mono-13);
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--en-ink);
}

.en-risk-sev {
  display: inline-block;
  margin-top: 8px;
  padding: 3px 7px;
  border: var(--en-bw) solid var(--en-line);
  font-family: var(--en-ui);
  font-size: var(--en-f-mono-10);
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--en-paper);
}

.en-risk-sev-hi {
  background: var(--en-accent);
}

.en-risk-sev-mid {
  background: var(--en-amber);
}

.en-risk-sev-lo {
  background: var(--en-green);
}

/* Source cards. Two columns to 720px, one below. Card: 2px frame on
   paper2, shadow 4. The link keeps the house underline; the note sits
   in the board scale. */

.en-srcs {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.en-srcs-1 {
  grid-template-columns: 1fr;
}

@media (max-width: 720px) {
  .en-srcs {
    grid-template-columns: 1fr;
  }
}

.en-src {
  border: var(--en-bw) solid var(--en-line);
  background: var(--en-paper2);
  padding: 12px 14px;
  box-shadow: var(--en-sh-4);
}

.en-src p {
  margin: 6px 0 0;
  font-family: var(--en-body);
  font-size: var(--en-f-code);
  line-height: var(--en-lh-body);
  color: var(--en-ink2);
}

/* Timeline. Semantic ol, 2px rule down the left, one 13px node per
   entry. done sits on green, active on the accent, todo stays a plain
   paper2 square. Node sizes sit on the 13px column with the rule
   centred behind them. */

.en-tl {
  margin: 0;
  padding: 0;
  list-style: none;
}

.en-tl-item {
  position: relative;
  display: grid;
  grid-template-columns: 13px 1fr;
  column-gap: 14px;
  padding-bottom: var(--en-sp-4);
}

.en-tl-item:last-child {
  padding-bottom: 0;
}

.en-tl-item::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 13px;
  bottom: 0;
  width: 2px;
  background: var(--en-line);
}

.en-tl-item:last-child::before {
  display: none;
}

.en-tl-node {
  width: 13px;
  height: 13px;
  margin-top: 2px;
  background: var(--en-paper2);
  border: var(--en-bw) solid var(--en-ink2);
}

.en-tl-done .en-tl-node {
  background: var(--en-green);
  border-color: var(--en-green);
}

.en-tl-active .en-tl-node {
  background: var(--en-accent);
  border-color: var(--en-accent);
}

.en-tl-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.en-tl-title {
  font-family: var(--en-ui);
  font-size: var(--en-f-mono-13);
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--en-ink);
}

.en-tl-time {
  font-family: var(--en-ui);
  font-size: var(--en-f-mono-11);
  letter-spacing: 1px;
  color: var(--en-ink2);
}

.en-tl-text {
  margin-top: 4px;
  max-width: 560px;
  font-family: var(--en-body);
  font-size: var(--en-f-step-body);
  line-height: var(--en-lh-body);
  color: var(--en-ink2);
}

/* Screen-reader-only state label. The done/active/todo state is CSS
   class + node color only, so each item says its state out loud. */
.en-tl-state {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Code block. The inverted-ink ground of P2 Code, promoted to a figure
   with a mono caption. CodeMark paints board syntax marks: section on
   the accent, owner on sky, state on mint, task on yellow, dim for
   comments. The ground is ink in both themes, so the sky/mint/yellow
   marks keep the light reference constants regardless of theme; only
   dim follows the tokens. */

.en-codeblock {
  margin: 0;
}

.en-codeblock pre {
  margin: 0;
  padding: var(--en-p-board);
  background: var(--en-code-bg);
  border: var(--en-bw) solid var(--en-line);
  border-radius: var(--en-r);
  box-shadow: var(--en-sh-8);
  overflow-x: auto;
  color: var(--en-code-1);
}

.en-codeblock code {
  display: block;
  font-family: var(--en-mono);
  font-size: var(--en-f-code);
  line-height: var(--en-lh-mono);
  white-space: pre;
  color: var(--en-code-1);
}

.en-codeblock-cap {
  margin-top: 10px;
  font-family: var(--en-ui);
  font-size: var(--en-f-mono-11);
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--en-ink2);
}

.en-cm-accent {
  color: var(--en-accent);
}

.en-cm-sky {
  color: #8fd1ff;
}

.en-cm-mint {
  color: #9be0b6;
}

.en-cm-yellow {
  color: #ffd873;
}

.en-cm-dim {
  color: var(--en-code-dim);
}

/* Card, design 6.5 canvas anatomy. Paper2 title bar with a 9px accent
   square, 2px bottom border under the bar, then the body well. Shadow 8.
   The canvas ships its SVG body at 6px; the card carries text, so the
   body well gets the 12px step instead (interior audit 2026-08-22). */

/* cards sit in auto-fit grids; let the track shrink below the card's
   min-content so inner figures scroll instead of widening the page.
   Body surface is paper2 — on the paper page, paper-on-paper read as a
   transparent hole next to filled components (tables, stats, tracks).
   Every panel surface is the same slab. */
.en-card {
  min-width: 0;
  background: var(--en-paper2);
  border: var(--en-bw) solid var(--en-line);
  border-radius: var(--en-r);
  box-shadow: var(--en-sh-8);
  /* the ambient grid is fixed z-index:0; a static card paints UNDER it and
     the grid bleeds through the slab. Lift to the content layer, like
     .en-wrap and .en-diagram. */
  position: relative;
  z-index: var(--en-z-content);
}

.en-card-hd {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: var(--en-p-bar);
  background: var(--en-paper2);
  border-bottom: var(--en-bw) solid var(--en-line);
}

.en-card-dot {
  width: 9px;
  height: 9px;
  flex: none;
  background: var(--en-accent);
}

.en-card-title {
  margin: 0;
  font-family: var(--en-ui);
  font-size: var(--en-f-mono-11);
  font-weight: 700;
  letter-spacing: var(--en-tr-mono);
  text-transform: uppercase;
  color: var(--en-ink);
}

.en-card-action {
  margin-left: auto;
}

.en-card-body {
  padding: var(--en-sp-3);
  color: var(--en-ink);
}

/* Divider: 2px solid, the house line weight. */

.en-divider {
  width: 100%;
  height: var(--en-bw);
  margin: var(--en-sp-4) 0;
  border: 0;
  background: var(--en-line);
}

/* Link. UI sans 12px uppercase, 2px underline offset. Hover moves the
   word to the accent. Focus-visible uses the shared house outline. */

.en-link {
  font-family: var(--en-ui);
  font-size: var(--en-f-mono-12);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--en-ink);
  text-decoration: underline;
  text-decoration-thickness: var(--en-bw);
  text-underline-offset: 3px;
  transition: color var(--en-d-quick) var(--en-ease-ui);
}

.en-link:hover {
  color: var(--en-accent);
}

/* Socials: row of compact brand-mark icon buttons.
   2px house rule around each 26px box; hover inverts to ink. */

.en-socials {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.en-socials-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border: var(--en-bw) solid var(--en-line);
  color: var(--en-ink);
  transition:
    background var(--en-d-quick) var(--en-ease-ui),
    color var(--en-d-quick) var(--en-ease-ui);
}

.en-socials-link:hover {
  background: var(--en-ink);
  color: var(--en-paper);
}

/* ThemeSwitch: icon-only [sun][moon] segments. Same house rule as
   ThemeToggle, no text. The active segment inverts to ink. */

.en-theme-switch {
  display: inline-flex;
  align-items: stretch;
  border: var(--en-bw) solid var(--en-line);
}

.en-theme-switch button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 26px;
  padding: 0;
  border: 0;
  cursor: pointer;
  background: transparent;
  color: var(--en-ink);
  transition:
    background var(--en-d-quick) var(--en-ease-ui),
    color var(--en-d-quick) var(--en-ease-ui);
}

.en-theme-switch button[aria-pressed="true"] {
  background: var(--en-ink);
  color: var(--en-paper);
}

/* ThemeToggle: paper / carbon segmented switch. House rule: 2px ink frame,
   mono 11px uppercase, active segment inverts to ink. Inside a topbar
   action slot the segments stretch to the full bar height (the slot is
   align-items: stretch); standalone they size to their 6px vertical pad. */

.en-theme-toggle {
  display: inline-flex;
  align-items: stretch;
  border: var(--en-bw) solid var(--en-ink);
  font-family: var(--en-ui);
  text-transform: uppercase;
  letter-spacing: var(--en-tr-mono);
}

.en-theme-toggle button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 14px;
  border: 0;
  cursor: pointer;
  background: transparent;
  color: var(--en-ink);
  font-family: var(--en-ui);
  font-size: var(--en-f-mono-11);
  font-weight: 700;
  letter-spacing: var(--en-tr-mono);
  transition: background var(--en-d-quick) var(--en-ease-ui);
}

.en-theme-toggle button[aria-pressed="true"] {
  background: var(--en-ink);
  color: var(--en-paper);
}

@media (max-width: 720px) {
  .en-theme-toggle button {
    padding: 0 10px;
  }
}

/* Breadcrumbs. Mono 11px uppercase path, house link style on the middle
   crumbs, last crumb is solid ink. The separator is a printed slash in
   ink2, never a box. */

.en-crumbs ol {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.en-crumbs li {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-family: var(--en-ui);
  font-size: var(--en-f-mono-11);
  text-transform: uppercase;
  color: var(--en-ink2);
}

.en-crumbs li + li::before {
  content: "/";
  color: var(--en-ink2);
}

.en-crumbs a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: var(--en-bw);
  text-underline-offset: 3px;
  transition: color var(--en-d-quick) var(--en-ease-ui);
}

.en-crumbs a:hover {
  color: var(--en-accent);
}

.en-crumbs li[aria-current="page"] {
  color: var(--en-ink);
  font-weight: 700;
}

/* Pagination. Square mono keys, like the rail. The active page is the lit
   toggle: accent ground, paper text, hard shadow 4. */

.en-pagi ul {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.en-pagi-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 34px;
  padding: 0 8px;
  font-family: var(--en-ui);
  font-size: var(--en-f-mono-12);
  color: var(--en-ink);
  background: var(--en-paper);
  border: var(--en-bw) solid var(--en-ink);
  cursor: pointer;
  transition:
    transform var(--en-d-quick) var(--en-ease-ui),
    background var(--en-d-quick) var(--en-ease-ui),
    color var(--en-d-quick) var(--en-ease-ui);
}

.en-pagi-btn:hover:not(:disabled) {
  background: var(--en-paper2);
}

.en-pagi-btn:active:not(:disabled) {
  transform: translate(2px, 2px);
}

.en-pagi-btn:disabled {
  color: var(--en-ink2);
  opacity: 0.4;
  cursor: not-allowed;
}

.en-pagi-btn[aria-current="page"] {
  background: var(--en-accent);
  color: var(--en-paper);
  box-shadow: var(--en-sh-4);
}

.en-pagi-ellipsis {
  padding: 0 2px;
  font-family: var(--en-ui);
  font-size: var(--en-f-mono-12);
  color: var(--en-ink2);
}

/* Runbook step (design 7.5). Grid 64px 1fr. Left: ink ground, Anton
   number, 2px right border. Right: mono title, 14px body, code box on
   paper ground. Below 560px the band rotates to a top band. */

.en-steps {
  display: grid;
  gap: var(--en-sp-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.en-step {
  display: grid;
  grid-template-columns: 64px 1fr;
}

.en-step-num {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--en-ink);
  color: var(--en-paper);
  border-right: var(--en-bw) solid var(--en-ink);
  font-family: var(--en-disp);
  font-size: var(--en-f-stepnum);
  letter-spacing: 0.02em;
}

.en-step-body {
  min-width: 0;
  background: var(--en-paper);
  border: var(--en-bw) solid var(--en-ink);
  border-left: 0;
}

.en-step-title {
  margin: 0;
  padding: 12px 14px 0;
  font-family: var(--en-ui);
  font-size: var(--en-f-mono-13);
  text-transform: uppercase;
  color: var(--en-ink);
}

.en-step-text {
  padding: 8px 14px 0;
  font-family: var(--en-body);
  font-size: var(--en-f-step-body);
  line-height: var(--en-lh-body);
  color: var(--en-ink2);
}

.en-step-text > :first-child {
  margin-top: 0;
}

.en-step-text > :last-child {
  margin-bottom: 0;
}

/* ink ground: the CodeMark tones are tuned for dark (B-1) */
.en-step-code {
  margin: 10px 14px 14px;
  padding: 10px 12px;
  overflow-x: auto;
  background: var(--en-ink);
  border: var(--en-bw) solid var(--en-ink);
  font-family: var(--en-mono);
  font-size: 11.5px;
  line-height: var(--en-lh-mono);
  color: var(--en-code-1);
}

@media (max-width: 560px) {
  .en-step {
    grid-template-columns: 1fr;
  }

  .en-step-num {
    padding: 10px 0;
    border-right: 0;
    border-bottom: var(--en-bw) solid var(--en-ink);
  }

  .en-step-body {
    border-left: var(--en-bw) solid var(--en-ink);
  }
}

/* Spinner: a square rotating in 45-degree steps. Digital, not silky. */

@keyframes en-spin-steps {
  to {
    transform: rotate(360deg);
  }
}

.en-spinner {
  display: inline-block;
  flex: none;
  background: var(--en-paper2);
  border: 2px solid var(--en-line);
  border-top-color: var(--en-accent);
  border-right-color: var(--en-accent);
  border-radius: var(--en-r);
  animation: en-spin-steps 1s steps(8) infinite;
}

/* Skeleton: a paper2 block on the 2px frame, pulsing with steps(1).
   No shimmer gradients; the house only runs in whole steps. */

@keyframes en-skel-pulse {
  50% {
    opacity: 0.45;
  }
}

.en-skeleton {
  display: block;
  background: var(--en-paper2);
  border: var(--en-bw) solid var(--en-line);
  border-radius: var(--en-r);
  animation: en-skel-pulse 1.1s steps(1) infinite;
}

/* Tooltip, design 7.9. Ink ground, paper text, 2px border, mono 11 at
   1.6 leading, max 230px, hard shadow, z 80. Optional accent title line.
   Enters with opacity 0 / translateY(4px) over 0.12s. Fixed positioning
   driven by the cursor or the target rect. */

.en-tip-wrap {
  display: inline-flex;
  position: relative;
}

@keyframes en-tip-in {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
}

.en-tip {
  position: fixed;
  z-index: var(--en-z-tip);
  pointer-events: none;
  padding: 10px 12px;
  background: var(--en-ink);
  color: var(--en-paper);
  border: var(--en-bw) solid var(--en-line);
  border-radius: var(--en-r);
  box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.35);
  font-family: var(--en-ui);
  font-size: var(--en-f-mono-11);
  line-height: 1.6;
  letter-spacing: var(--en-tr-mono);
  max-width: 230px;
  animation: en-tip-in var(--en-d-tooltip) var(--en-ease-ui) both;
}

.en-tip-t {
  display: block;
  margin-bottom: 4px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--en-accent);
}

/* Topbar (design 6.1). Fixed 37px strip. The bottom edge is the house
   rule: inset 0 -2px 0 line. Left carries brand + nav, right the actions.
   Consumers pad their page 37px so content clears the bar. */

.en-topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: stretch;
  height: var(--en-topbar-h);
  background: var(--en-paper);
  box-shadow: inset 0 -2px 0 var(--en-line);
  z-index: var(--en-z-topbar);
}

.en-topbar-main {
  display: flex;
  flex: 1;
  align-items: center;
  gap: 18px;
  min-width: 0;
  overflow: hidden;
  padding: 0 14px;
}

/* Marquee-in-main: the ticker IS the bar. Full-bleed ink strip, full
   height — a half-height band next to taller controls reads as cramped. */
.en-topbar-main:has(> .en-marquee) {
  padding: 0;
  align-items: stretch;
}

/* Brand: display face, set apart from the nav. */
.en-topbar-brand .en-link {
  font-family: var(--en-disp);
  font-size: 16px;
  letter-spacing: 0.03em;
  color: var(--en-ink);
  text-decoration: none;
  white-space: nowrap;
}
.en-topbar-brand .en-link:hover {
  color: var(--en-accent);
}

/* Thin vertical rule between brand and nav. */
.en-topbar-div {
  flex: none;
  width: 2px;
  height: 18px;
  background: var(--en-line);
}

/* Nav: compact mono links, no underline, hover warms to accent. */
.en-topbar-nav {
  display: inline-flex;
  align-items: center;
  gap: 18px;
  min-width: 0;
}
.en-topbar-nav .en-link {
  font-size: var(--en-f-mono-11);
  text-decoration: none;
  white-space: nowrap;
}

/* Trailing cluster (socials, theme switch): pushed right. */
.en-topbar-actions {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
  flex: none;
}

/* Action slot: one control system. Every child stretches to the full bar
   height (same box, same borders, same baseline) so nothing floats at a
   different level. Ruled off from the marquee. */
.en-topbar-side {
  display: flex;
  align-items: stretch;
  gap: 8px;
  margin-left: auto;
  flex: none;
  padding: 0 12px;
  border-left: var(--en-bw) solid var(--en-line);
}

.en-topbar-side > * {
  display: flex;
  align-items: center;
  min-width: 0;
}

/* the theme toggle is a container, not a leaf: its segments must stretch
   to the full bar height or the active fill reads as a floating band */
.en-topbar-side > .en-theme-toggle {
  align-items: stretch;
}

/* Narrow screens: keep everything, compact it. */
@media (max-width: 720px) {
  .en-topbar-main {
    gap: 10px;
    padding: 0 10px;
  }
  .en-topbar-brand .en-link {
    font-size: 14px;
  }
  .en-topbar-div {
    display: none;
  }
  .en-topbar-nav {
    gap: 12px;
  }
  .en-topbar-nav .en-link {
    font-size: var(--en-f-mono-10);
  }
  .en-topbar-actions {
    gap: 8px;
  }
  .en-topbar-actions .en-socials-link {
    width: 22px;
    height: 22px;
  }
  .en-topbar-actions .en-theme-switch button {
    width: 24px;
    height: 22px;
  }
  .en-topbar-side {
    gap: 6px;
    padding: 0 10px;
  }
  .en-topbar-side .en-chip {
    padding: 0 8px;
    gap: 5px;
  }
}

/* Marquee (design 6.1). Ink ticker strip. The track holds two identical
   halves separated by padding, so translateX(-50%) (the en-marquee keyframe
   in base/motion.css) loops without a seam. */

.en-marquee {
  display: flex;
  align-items: center;
  overflow: hidden;
  min-width: 0;
  background: var(--en-ink);
  color: var(--en-paper);
}

.en-marquee .en-marquee-track {
  gap: 0;
}

.en-mq-half {
  display: inline-flex;
  align-items: center;
  padding-right: 48px;
}

.en-mq-clone {
  display: contents;
}

.en-mq-item {
  font-family: var(--en-ui);
  font-size: var(--en-f-mono-12);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 0 24px;
  white-space: nowrap;
}

.en-mq-sep {
  color: var(--en-accent);
  padding-left: 24px;
}

/* Scroll progress (design 6.2). A 3px accent line just under the topbar.
   Width tracks the scroll ratio; transform origin stays left. */

.en-scroll-progress {
  position: fixed;
  top: var(--en-topbar-h);
  left: 0;
  height: var(--en-prog-h);
  background: var(--en-accent);
  z-index: var(--en-z-prog);
}

/* Anchor rail (design 6.3). Fixed 220px left column under the topbar.
   Brand on top, numbered section links in the middle, meta pinned to the
   bottom via margin-top: auto. Active link is accent ground with paper
   text (the inverted state), shadow 4. Hidden under 960px. */

.en-rail {
  position: fixed;
  top: var(--en-topbar-h);
  left: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: var(--en-rail-w);
  padding: 20px 12px 14px;
  background: var(--en-paper);
  border-right: 2px solid var(--en-line);
  z-index: var(--en-z-rail);
}

.en-rail-brand {
  padding: 0 8px;
}

.en-rail-wordmark {
  font-family: var(--en-disp);
  font-size: var(--en-f-brand);
  line-height: 0.95;
  text-transform: uppercase;
}

.en-rail-hot {
  display: block;
  color: var(--en-accent);
}

.en-rail-tag {
  margin-top: 8px;
  font-family: var(--en-ui);
  font-size: var(--en-f-mono-10);
  color: var(--en-ink2);
  line-height: 1.6;
}

.en-rail-list {
  display: grid;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.en-rail-link {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 6px 8px;
  font-family: var(--en-ui);
  font-size: var(--en-f-mono-12);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--en-ink);
  text-decoration: none;
  border: 2px solid transparent;
  transition:
    background-color var(--en-d-quick) var(--en-ease-ui),
    color var(--en-d-quick) var(--en-ease-ui),
    border-color var(--en-d-quick) var(--en-ease-ui),
    box-shadow var(--en-d-quick) var(--en-ease-ui);
}

.en-rail-link-num {
  color: var(--en-ink2);
}

.en-rail-link:hover {
  background: var(--en-paper2);
  border-color: var(--en-line);
}

.en-rail-link.is-active {
  background: var(--en-accent);
  color: var(--en-paper);
  border-color: var(--en-ink);
  box-shadow: var(--en-sh-4);
}

.en-rail-link.is-active .en-rail-link-num {
  color: var(--en-paper);
}

.en-rail-foot {
  margin-top: auto;
  padding: 0 8px;
  font-family: var(--en-ui);
  font-size: var(--en-f-mono-10);
  color: var(--en-ink2);
  line-height: 1.7;
}

@media (max-width: 960px) {
  .en-rail {
    display: none;
  }
}

/* Tabs + panels, design 7.4. Tabs sit on the panel, tab border-bottom is 0,
   so the active tab's side borders meet the panel's 2px border. Inactive
   tabs: paper2 ground, ink2 mono 12 bold upper. Active: ink ground, paper
   text. Panel: 2px border, paper2, shadow 8, display none until active.
   Panel head: paper strip, 2px bottom border, mono 11, 9px square. */

.en-tabs {
  min-width: min(320px, 100%);
}

.en-tablist {
  display: flex;
  align-items: flex-end;
  overflow-x: auto;
  background: var(--en-paper2);
  border: var(--en-bw) solid var(--en-line);
  border-bottom: 0;
}

.en-tab {
  appearance: none;
  margin: 0;
  padding: 8px 16px;
  border: 0;
  font-family: var(--en-ui);
  font-size: var(--en-f-mono-12);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: var(--en-paper2);
  color: var(--en-ink2);
  cursor: pointer;
  transition:
    background-color var(--en-d-quick) var(--en-ease-ui),
    color var(--en-d-quick) var(--en-ease-ui);
}

.en-tab + .en-tab {
  border-left: var(--en-bw) solid var(--en-line);
}

[data-state="active"].en-tab {
  background: var(--en-ink);
  color: var(--en-paper);
}

.en-tabpanel {
  display: none;
  border: var(--en-bw) solid var(--en-line);
  background: var(--en-paper2);
  box-shadow: var(--en-sh-8);
}

[data-state="active"].en-tabpanel {
  display: block;
}

.en-tabpanel-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: var(--en-paper);
  border-bottom: var(--en-bw) solid var(--en-line);
  font-family: var(--en-ui);
  font-size: var(--en-f-mono-11);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.en-tabpanel-square {
  width: 9px;
  height: 9px;
  background: var(--en-accent);
}

.en-tabpanel-square.is-blue {
  background: var(--en-blue);
}

.en-tabpanel-square.is-green {
  background: var(--en-green);
}

.en-tabpanel-body {
  padding: 14px 16px;
}

/* Dialog (house overlay spec). A centered panel over a dimmed page:
   paper ground, 2px border, shadow 8, no radius. Entrance is the reveal
   easing at .18s; exit is a fast .1s drop. Both die under reduced motion
   via the global class-prefix rule in reset.css (the Radix portal renders
   outside any data-enoki tree, so the rule keys on the en- classes). */

.en-overlay {
  position: fixed;
  inset: 0;
  background: color-mix(in srgb, var(--en-ink) 62%, transparent);
  z-index: var(--en-z-overlay);
  animation: en-fade 0.12s var(--en-ease-ui);
}

.en-dialog {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(560px, calc(100vw - 48px));
  max-height: calc(100vh - 96px);
  overflow: auto;
  background: var(--en-paper);
  border: var(--en-bw) solid var(--en-line);
  box-shadow: var(--en-sh-8);
  z-index: calc(var(--en-z-overlay) + 1);
  animation: en-dialog-in 0.18s var(--en-ease-out);
}

[data-state="closing"].en-dialog {
  animation: en-dialog-out 0.1s var(--en-ease-ui) forwards;
}

.en-dialog-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  background: var(--en-paper2);
  border-bottom: var(--en-bw) solid var(--en-line);
}

.en-dialog-title {
  margin: 0;
  font-family: var(--en-ui);
  font-size: var(--en-f-mono-14);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.en-dialog-body {
  padding: 16px;
}

.en-dialog-foot {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 16px;
  border-top: var(--en-bw) solid var(--en-line);
  background: var(--en-paper2);
}

/* Drawer: a full-height sheet pinned to a side edge. Same house shell as
   the dialog (paper ground, 2px border, shadow 8) but it slides in from the
   edge with the reveal easing at .2s. Right is the default. The shadow
   throws away from the page, so its direction flips with the side. */

.en-drawer {
  position: fixed;
  top: 0;
  bottom: 0;
  width: min(420px, 88vw);
  overflow: auto;
  background: var(--en-paper);
  border: var(--en-bw) solid var(--en-line);
  z-index: calc(var(--en-z-overlay) + 1);
}

.en-drawer.is-right {
  right: 0;
  border-right: 0;
  box-shadow: -8px 0 0 var(--en-sh);
  animation: en-sheet-in 0.2s var(--en-ease-out);
}

.en-drawer.is-left {
  left: 0;
  border-left: 0;
  box-shadow: 8px 0 0 var(--en-sh);
  animation: en-sheet-in-left 0.2s var(--en-ease-out);
}

[data-state="closing"].en-drawer {
  opacity: 0;
  transition: opacity 0.1s var(--en-ease-ui);
}

/* Popover content: the lightest overlay. Paper ground, 2px border, shadow
   5 (tooltip tier), mono body. No close button: it lapses on outside click
   or Escape, like the tooltip. */

.en-pop {
  z-index: calc(var(--en-z-overlay) + 1);
  width: var(--en-pop-w, 260px);
  background: var(--en-paper);
  border: var(--en-bw) solid var(--en-line);
  box-shadow: var(--en-sh-5);
  animation: en-fade 0.12s var(--en-ease-ui);
}

.en-pop-body {
  padding: 12px 14px;
  font-family: var(--en-ui);
  font-size: var(--en-f-mono-12);
  line-height: var(--en-lh-mono);
}

[data-state="closing"].en-pop {
  opacity: 0;
  transition: opacity 0.1s var(--en-ease-ui);
}

/* Menu: a command list on a paper panel. Same shell as the popover but the
   shadow tier is 5 and items are mono 12 upper with a 3px accent bar and 2px
   inset shadow when active. Separator is a 2px line. */

.en-menu {
  z-index: calc(var(--en-z-overlay) + 1);
  min-width: 220px;
  padding: 4px;
  background: var(--en-paper);
  border: var(--en-bw) solid var(--en-line);
  box-shadow: var(--en-sh-5);
  animation: en-fade 0.12s var(--en-ease-ui);
}

.en-menu-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border-left: 3px solid transparent;
  font-family: var(--en-ui);
  font-size: var(--en-f-mono-12);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: transparent;
  color: var(--en-ink);
  cursor: pointer;
  transition:
    background-color var(--en-d-press) var(--en-ease-ui),
    color var(--en-d-press) var(--en-ease-ui);
}

[data-highlighted].en-menu-item {
  background: var(--en-ink);
  color: var(--en-paper);
  border-left-color: var(--en-accent);
  box-shadow: inset 2px 0 0 var(--en-line);
}

[data-disabled].en-menu-item {
  color: var(--en-ink2);
  cursor: default;
}

.en-menu-sep {
  height: 0;
  margin: 4px 2px;
  border-top: var(--en-bw) solid var(--en-line);
}

[data-state="closing"].en-menu {
  opacity: 0;
  transition: opacity 0.1s var(--en-ease-ui);
}

.en-toasts {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: var(--en-z-toast);
  display: flex;
  flex-direction: column;
  gap: var(--en-sp-2);
  width: min(360px, calc(100vw - 32px));
  pointer-events: none;
}

.en-toast {
  pointer-events: auto;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 10px 10px 12px;
  background: var(--en-paper);
  border: 2px solid var(--en-line);
  box-shadow: var(--en-sh-5);
  animation: en-toast-in var(--en-d-quick) var(--en-ease-out);
}

.en-toast-square {
  flex: none;
  width: 9px;
  height: 9px;
  margin-top: 4px;
  background: var(--en-ink);
}

.en-toast--ok .en-toast-square {
  background: var(--en-green);
}

.en-toast--warn .en-toast-square {
  background: var(--en-amber);
}

.en-toast--err .en-toast-square {
  background: var(--en-accent);
}

.en-toast-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.en-toast-title {
  font-family: var(--en-ui);
  font-size: var(--en-f-mono-12);
  font-weight: 700;
  letter-spacing: var(--en-tr-mono);
  text-transform: uppercase;
}

.en-toast-desc {
  font-family: var(--en-body);
  font-size: var(--en-f-step-body);
  line-height: var(--en-lh-body);
  color: var(--en-ink2);
  overflow-wrap: anywhere;
}

.en-toast-x {
  flex: none;
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  background: none;
  border: 2px solid var(--en-line);
  color: var(--en-ink);
  cursor: pointer;
  line-height: 0;
}

.en-toast-x:hover {
  background: var(--en-ink);
  color: var(--en-paper);
}

/*
 * Diagram canvas shell (design 9.1): status bar, live dot, body, hint,
 * legend, mini buttons, tooltip.
 */

/* paper2 slab, matching the Card: on the paper page a paper figure
   read as a transparent hole next to filled cards (interior audit
   2026-08-27, rate-card vs billing complaint). */
.en-diagram {
  margin: 0;
  border: 2px solid var(--en-line);
  background: var(--en-paper2);
  box-shadow: var(--en-sh-8);
  position: relative;
}

.en-diagram figcaption {
  display: block;
}

/* frameless: embedded in a card that already carries the frame and
   title — drop the figure's own chrome, keep plot + compact legend. */
.en-diagram.frameless {
  border: none;
  background: none;
  box-shadow: none;
}

.en-diagram.frameless .en-dg-body {
  padding: 0;
}

.en-diagram.frameless .en-dg-legend {
  padding: 10px 2px 0;
}

/* the gantt's row hover paints --en-paper2, invisible on a paper2 card:
   step up one tone inside frameless. */
.en-diagram.frameless .fg-g-row:hover {
  fill: var(--en-paper3);
}

.en-dg-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  border-bottom: 2px solid var(--en-line);
  background: var(--en-paper2);
  padding: 9px 12px;
  font-family: var(--en-ui);
  font-size: var(--en-f-mono-11);
  text-transform: uppercase;
  letter-spacing: 1px;
}

.en-dg-dot {
  width: 9px;
  height: 9px;
  background: var(--en-accent);
  animation: en-blink 1.1s steps(1) infinite;
  flex: none;
}

.en-dg-title {
  font-weight: 700;
}

.en-dg-tag {
  color: var(--en-ink2);
}

.en-dg-actions {
  margin-left: auto;
  display: flex;
  gap: 8px;
}

.en-dg-body {
  padding: 6px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.en-dg-body svg {
  display: block;
  width: 100%;
  height: auto;
}

.en-dg-hint {
  font-family: var(--en-ui);
  font-size: var(--en-f-mono-11);
  color: var(--en-ink2);
  margin: 0;
  padding: 10px 12px 12px;
  letter-spacing: 0.5px;
  border-top: 2px solid var(--en-line);
  background: var(--en-paper2);
}

.en-dg-hint kbd {
  border: 1.5px solid var(--en-line);
  background: var(--en-paper3);
  padding: 1px 6px;
  font-family: var(--en-mono);
  font-size: var(--en-f-mono-10);
}

/* compact in-bar button */
.en-mini {
  font-family: var(--en-ui);
  font-size: var(--en-f-mono-11);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  border: 2px solid var(--en-line);
  background: var(--en-paper2);
  color: var(--en-ink);
  padding: 7px 11px;
  cursor: pointer;
  box-shadow: var(--en-sh-3);
  transition:
    transform 0.08s ease,
    box-shadow 0.08s ease,
    background 0.08s ease,
    color 0.08s ease;
}

.en-mini:hover {
  transform: translate(-1px, -1px);
  box-shadow: var(--en-sh-4);
}

.en-mini:active {
  transform: translate(2px, 2px);
  box-shadow: var(--en-sh-1);
}

.en-mini.on {
  background: var(--en-accent);
  color: var(--en-paper);
}

.en-mini:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* legend */
.en-dg-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin: 0;
  padding: 12px 12px 14px;
  font-family: var(--en-ui);
  font-size: var(--en-f-mono-11);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-top: 2px solid var(--en-line);
  background: var(--en-paper2);
}

.en-dg-leg-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.en-dg-leg-swatch {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid var(--en-line);
}

.en-dg-leg-swatch.hollow {
  border-style: dashed;
  border-color: var(--en-ink2);
}

/* tooltip */
.en-tip {
  position: fixed;
  z-index: 80;
  pointer-events: none;
  max-width: 230px;
  background: var(--en-ink);
  color: var(--en-paper);
  border: 2px solid var(--en-line);
  box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.35);
  padding: 10px 12px;
  font-family: var(--en-ui);
  font-size: var(--en-f-mono-11);
  line-height: 1.6;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  opacity: 0;
  transform: translateY(4px);
  transition:
    opacity 0.12s ease,
    transform 0.12s ease;
}

.en-tip.on {
  opacity: 1;
  transform: translateY(0);
}

.en-tip-title {
  color: var(--en-accent);
  font-weight: 700;
  letter-spacing: 1px;
  margin-bottom: 4px;
}

@media (prefers-reduced-motion: reduce) {
  .en-dg-dot {
    animation: none;
  }
  .en-tip {
    transition: none;
  }
}

/*
 * Shared SVG vocabulary for all diagrams (design 9.1).
 * React renders the DOM; d3 and CSS transitions own attribute animation.
 */

/* ---- graph nodes (topology) ------------------------------------------- */

.en-node {
  cursor: pointer;
}

.en-node .dg-box {
  fill: var(--en-card);
  stroke: var(--en-line);
  stroke-width: 2.5;
  transition: fill 0.15s ease;
}

.en-node .dg-strip[data-role="accent"] {
  fill: var(--en-accent);
}
.en-node .dg-strip[data-role="blue"] {
  fill: var(--en-blue);
}
.en-node .dg-strip[data-role="green"] {
  fill: var(--en-green);
}
.en-node .dg-strip[data-role="state"] {
  fill: var(--en-ink2);
}

.en-node .dg-cluster-dot {
  fill: var(--en-blue);
  opacity: 0.85;
  pointer-events: none;
}

.en-node .dg-lbl {
  font-family: var(--en-disp);
  font-size: 19px;
  letter-spacing: 1px;
  fill: var(--en-ink);
  text-anchor: middle;
  pointer-events: none;
}

.en-node .dg-sub {
  font-family: var(--en-ui);
  font-size: var(--en-f-mono-11);
  letter-spacing: 0.5px;
  fill: var(--en-ink2);
  text-anchor: middle;
  text-transform: uppercase;
  pointer-events: none;
}

.en-node:hover .dg-box {
  fill: color-mix(in srgb, var(--en-card) 88%, var(--en-ink));
}

.en-node.lit .dg-box {
  fill: var(--en-accent);
}
.en-node.lit .dg-lbl,
.en-node.lit .dg-sub {
  fill: var(--en-paper);
}

/* ---- edges (topology) -------------------------------------------------- */

.en-edge {
  fill: none;
  stroke: var(--en-line);
  stroke-width: 2;
  opacity: 0.5;
  transition:
    stroke 0.15s ease,
    opacity 0.15s ease,
    stroke-width 0.15s ease;
}

.en-edge.muted {
  opacity: 0.3;
}

.en-edge.hot {
  stroke: var(--en-accent);
  opacity: 1;
  stroke-width: 3.5;
}

.en-edge.draw {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}

.en-diagram.in .en-edge.draw {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 1s ease 0.15s;
}

.en-elabel {
  font-family: var(--en-ui);
  font-size: var(--en-f-mono-10);
  letter-spacing: 0.5px;
  fill: var(--en-ink2);
  text-transform: uppercase;
  paint-order: stroke;
  stroke: var(--en-paper);
  stroke-width: 3px;
  pointer-events: none;
}

/* ---- pulse dots -------------------------------------------------------- */

.en-dot-amb {
  fill: var(--en-blue);
  opacity: 0.8;
}

.en-dot-run {
  fill: var(--en-accent);
  display: none;
}

/* ---- state machine ------------------------------------------------------ */

.en-state {
  cursor: pointer;
}

.en-state rect {
  fill: var(--en-paper2);
  stroke: var(--en-line);
  stroke-width: 2.5;
  transition: fill 0.15s ease;
}

.en-state text {
  font-family: var(--en-ui);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 1px;
  fill: var(--en-ink);
  text-anchor: middle;
  text-transform: uppercase;
  pointer-events: none;
}

.en-state:hover rect {
  fill: var(--en-accent);
}
.en-state:hover text {
  fill: var(--en-paper);
}

.en-trans {
  fill: none;
  stroke: var(--en-line);
  stroke-width: 2;
  opacity: 0.55;
  transition:
    stroke 0.15s ease,
    opacity 0.15s ease,
    stroke-width 0.15s ease;
}

.en-trans.hot {
  stroke: var(--en-accent);
  stroke-width: 3.5;
  opacity: 1;
}

.en-trans.ret {
  stroke: var(--en-accent);
  stroke-dasharray: 6 5;
  opacity: 0.9;
}

.en-trans.draw {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}

.en-diagram.in .en-trans.draw {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 0.7s ease 0.3s;
}

/* ---- sequence ----------------------------------------------------------- */

.en-lane-line {
  stroke: var(--en-line);
  stroke-width: 2;
  stroke-dasharray: 2 5;
  opacity: 0.5;
}

.en-lane-head rect {
  fill: var(--en-ink);
}

.en-lane-head text {
  font-family: var(--en-ui);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1px;
  fill: var(--en-paper);
  text-anchor: middle;
  text-transform: uppercase;
}

.en-msg {
  fill: none;
  stroke: var(--en-ink);
  stroke-width: 2.5;
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
}

.en-msg.ret {
  stroke: var(--en-ink2);
}

.en-msg-lbl {
  font-family: var(--en-ui);
  font-size: 12px;
  fill: var(--en-ink);
  opacity: 1;
  paint-order: stroke;
  stroke: var(--en-paper);
  stroke-width: 3px;
}

/* ---- reduced motion: everything rests in its drawn state -------------- */

@media (prefers-reduced-motion: reduce) {
  .en-edge.draw,
  .en-trans.draw {
    stroke-dashoffset: 0;
    transition: none;
  }
  .en-msg {
    stroke-dashoffset: 0;
    transition: none;
  }
  .en-msg-lbl {
    opacity: 1;
    transition: none;
  }
  .en-dot-amb {
    display: none;
  }
}

/*
 * Figure layer (premade data charts). Same law as the flagships:
 * React renders the DOM, d3 computes and writes attributes, CSS owns
 * state and the draw-in. Token palette only, via classes.
 */

/* font floor: nothing in a figure reads below 12px (2026-09-09) */
figure.en-diagram {
  --en-f-mono-10: 12px;
  --en-f-mono-11: 12px;
}

/* ---- plot chrome -------------------------------------------------------- */

.fg-axis {
  stroke: var(--en-line);
  stroke-width: 2;
}

.fg-tick {
  stroke: var(--en-line);
  stroke-width: 1.5;
  opacity: 0.5;
}

.fg-tick-lbl {
  font-family: var(--en-ui);
  font-size: var(--en-f-mono-10);
  letter-spacing: 0.5px;
  fill: var(--en-ink2);
}

.fg-axis-title {
  font-family: var(--en-ui);
  font-size: var(--en-f-mono-11);
  letter-spacing: 1.5px;
  fill: var(--en-ink2);
  text-transform: uppercase;
}

.fg-grid {
  stroke: var(--en-grid);
  stroke-width: 1;
  pointer-events: none;
}

/* ---- role palette (theme-safe: vars, never hex in attrs) ---------------- */

.fg-c-accent {
  fill: var(--en-accent);
}
.fg-c-blue {
  fill: var(--en-blue);
}
.fg-c-green {
  fill: var(--en-green);
}
.fg-c-amber {
  fill: var(--en-amber);
}
.fg-c-ink {
  fill: var(--en-ink);
}
.fg-c-ink2 {
  fill: var(--en-ink2);
}
.fg-c-paper2 {
  fill: var(--en-paper2);
}
.fg-c-paper3 {
  fill: var(--en-paper3);
}
.fg-c-paper {
  fill: var(--en-paper);
}

.fg-s-accent {
  stroke: var(--en-accent);
}
.fg-s-blue {
  stroke: var(--en-blue);
}
.fg-s-green {
  stroke: var(--en-green);
}
.fg-s-amber {
  stroke: var(--en-amber);
}
.fg-s-ink {
  stroke: var(--en-ink);
}
.fg-s-ink2 {
  stroke: var(--en-ink2);
}
.fg-s-line {
  stroke: var(--en-line);
}
.fg-s-paper {
  stroke: var(--en-paper);
}

/* ---- labels ------------------------------------------------------------- */

/* direct value on a mark, paper halo keeps it readable over flow */
.fg-lbl-halo {
  font-family: var(--en-ui);
  font-size: var(--en-f-mono-11);
  letter-spacing: 0.5px;
  fill: var(--en-ink);
  paint-order: stroke;
  stroke: var(--en-paper);
  stroke-width: 3px;
  text-transform: uppercase;
  pointer-events: none;
}

/* Anton is spent only on numbers that carry the story */
.fg-num {
  font-family: var(--en-disp);
  letter-spacing: 1px;
  fill: var(--en-ink);
  paint-order: stroke;
  stroke: var(--en-paper);
  stroke-width: 4px;
  text-anchor: middle;
  pointer-events: none;
}

/* ink plate: lane-head grammar applied to flowing data */
.fg-plate rect {
  fill: var(--en-ink);
  stroke: var(--en-line);
  stroke-width: 2;
}

.fg-plate text {
  font-family: var(--en-ui);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 1px;
  fill: var(--en-paper);
  text-anchor: middle;
  text-transform: uppercase;
  pointer-events: none;
}

.fg-plate .fg-plate-sub {
  font-size: 12px;
  font-weight: 400;
  opacity: 0.7;
}

/* ---- draw-in (fired by the canvas .in class) ---------------------------- */

.fg-draw {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 0.9s ease var(--d, 0s);
}

.en-diagram.in .fg-draw {
  stroke-dashoffset: 0;
}

/* ---- donut ---------------------------------------------------------------- */

.fg-slice {
  stroke: var(--en-ink);
  stroke-width: 1;
  transform-box: fill-box;
  transform-origin: center;
  transition: transform 0.15s var(--en-ease-pop);
  cursor: pointer;
  /* click focus would paint a rectangular focus outline on the wedge */
  outline: none;
  /* iOS safari overlays a black bounding box on tap */
  -webkit-tap-highlight-color: transparent;
}

/* entry: each wedge pops into place, staggered by --d */

.en-diagram.in .fg-slice {
  animation: fg-slice-in 0.5s var(--en-ease-pop) var(--d, 0s) backwards;
}

@keyframes fg-slice-in {
  from {
    opacity: 0;
    transform: scale(0.62);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* hollow wedge: the future slot, ink outline with no fill */

.fg-slice-hollow {
  fill: none;
  stroke-width: 1.5;
}

.fg-donut-num {
  font-family: var(--en-disp);
  font-size: 44px;
  letter-spacing: 1px;
  fill: var(--en-ink);
  text-anchor: middle;
  pointer-events: none;
}

.fg-donut-sub {
  font-family: var(--en-ui);
  font-size: 12px;
  letter-spacing: 1px;
  fill: var(--en-ink2);
  text-anchor: middle;
  text-transform: uppercase;
  pointer-events: none;
}

/* ---- bar ------------------------------------------------------------------ */

/* solid = actual, hatched = planned, hollow = future */

/* fill comes from the hatch pattern attribute */
.fg-bar-ghost {
  fill: none;
  stroke: var(--en-ink2);
  stroke-width: 1.5;
  stroke-dasharray: 4 3;
  pointer-events: none;
}

/* fill comes from the dense-hatch pattern attribute */
.fg-bar {
  stroke: var(--en-ink);
  stroke-width: 2;
  transform-box: fill-box;
  transform-origin: bottom;
  transform: scaleY(0.02);
  transition:
    transform 0.6s var(--en-ease-out) var(--d, 0s),
    fill 0.15s ease,
    stroke 0.15s ease;
}

.en-diagram.in .fg-bar {
  transform: scaleY(1);
}

/* plain/stacked: hovering the band lights its bar (or whole stack).
   grouped (fg-bar-g): only the bar under the pointer lights up. */
.fg-bargrp:hover .fg-bar:not(.fg-bar-g) {
  fill: var(--en-accent);
  stroke: var(--en-accent);
}
.fg-bar-g:hover {
  fill: var(--en-accent);
  stroke: var(--en-accent);
}
.fg-bar-val {
  font-family: var(--en-disp);
  font-size: 15px;
  letter-spacing: 1px;
  fill: var(--en-ink);
  text-anchor: middle;
  paint-order: stroke;
  stroke: var(--en-paper);
  stroke-width: 3px;
  opacity: 0;
  transition:
    opacity 0.3s ease var(--d2, var(--d, 0s)),
    fill 0.15s ease;
}
.fg-bargrp:hover .fg-bar-val {
  fill: var(--en-accent);
}

.en-diagram.in .fg-bar-val {
  opacity: 1;
}

.fg-bar-lbl {
  font-family: var(--en-ui);
  font-size: 12px;
  letter-spacing: 1px;
  fill: var(--en-ink2);
  text-anchor: middle;
  text-transform: uppercase;
  pointer-events: none;
}

/* Rotated variant: the slant ends at the band center, so anchor at the end. */
.fg-bar-lbl-r {
  text-anchor: end;
}

.fg-target {
  stroke: var(--en-accent);
  stroke-width: 2;
  stroke-dasharray: 6 5;
  pointer-events: none;
}

.fg-target-lbl {
  font-family: var(--en-ui);
  font-size: var(--en-f-mono-10);
  letter-spacing: 1px;
  fill: var(--en-accent);
  text-transform: uppercase;
  pointer-events: none;
}

.fg-sweep {
  stroke: var(--en-accent);
  stroke-width: 2;
  opacity: 0;
  pointer-events: none;
}

/* ---- line ------------------------------------------------------------------ */

.fg-series {
  fill: none;
  stroke-width: 2.5;
  transition: opacity 0.15s ease;
}

.fg-series.draw {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition:
    stroke-dashoffset 1s ease var(--d, 0s),
    opacity 0.15s ease;
}

.en-diagram.in .fg-series.draw {
  stroke-dashoffset: 0;
}

.fg-series.dim,
.fg-area.dim {
  opacity: 0.2;
}

/* fill comes from the hatch pattern attribute */
.fg-area {
  stroke-width: 1.5;
  opacity: 0;
  transition: opacity 0.8s ease var(--d, 0.4s);
  pointer-events: none;
}

.en-diagram.in .fg-area {
  /* hatch stays a wash under the line, not a wall */
  opacity: 0.45;
}

.fg-point {
  fill: var(--en-paper);
  stroke-width: 2;
  pointer-events: none;
}

.fg-hit {
  fill: none;
  stroke: transparent;
  stroke-width: 16;
  cursor: crosshair;
}

.fg-tracker {
  stroke: var(--en-ink2);
  stroke-width: 2;
  stroke-dasharray: 2 5;
  opacity: 0;
  transition: opacity 0.12s ease;
  pointer-events: none;
}

.fg-tracker.on {
  opacity: 1;
}

/* ---- scatter + quadrant points --------------------------------------------- */

.fg-pt {
  transform-box: fill-box;
  transform-origin: center;
  transform: scale(0);
  transition: transform 0.35s var(--en-ease-pop) var(--d, 0s);
}

.en-diagram.in .fg-pt {
  transform: scale(1);
}

/* cost outruns speed: hollow, not solid. wins over fg-c-ink2 by position */
.fg-pt-hollow {
  fill: var(--en-paper);
  stroke: var(--en-ink2);
  stroke-width: 2.5;
}

.fg-ptring {
  fill: none;
  stroke: var(--en-accent);
  stroke-width: 2.5;
  opacity: 0;
  transition: opacity 0.15s ease;
  pointer-events: none;
}

.fg-ptg {
  cursor: pointer;
}

.fg-ptg:hover .fg-ptring {
  opacity: 1;
}

/* dense cloud: thousands of marks fade in as one group, never staggered */
.fg-ptdense {
  opacity: 0;
  transition: opacity 0.7s ease 0.15s;
}

.en-diagram.in .fg-ptdense {
  opacity: 1;
}

/* trend line + confidence band: reveal with the cloud, line last */
.fg-trend-band {
  fill: var(--en-accent);
  fill-opacity: 0.12;
  opacity: 0;
  transition: opacity 0.7s ease 0.45s;
  pointer-events: none;
}

.en-diagram.in .fg-trend-band {
  opacity: 1;
}

.fg-trend {
  stroke: var(--en-accent);
  stroke-width: 2.5;
  stroke-linecap: round;
  opacity: 0;
  transition: opacity 0.5s ease 0.55s;
  pointer-events: none;
}

.en-diagram.in .fg-trend {
  opacity: 1;
}

/* ---- gantt ----------------------------------------------------------------- */

.fg-g-row {
  fill: transparent;
  transition: fill 0.15s ease;
}

.fg-g-row:hover {
  fill: var(--en-paper2);
}

.fg-g-label {
  font-family: var(--en-ui);
  font-size: 12px;
  letter-spacing: 0.5px;
  fill: var(--en-ink);
  text-transform: uppercase;
  pointer-events: none;
}

/* empty plan placeholder */
.fg-g-empty {
  font-family: var(--en-ui);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
  fill: var(--en-ink2);
  text-transform: uppercase;
  pointer-events: none;
}

.fg-g-bar {
  stroke-width: 2;
  transform-box: fill-box;
  transform-origin: left;
  transform: scaleX(0.02);
  transition: transform 0.5s var(--en-ease-out) var(--d, 0s);
  cursor: pointer;
}

.en-diagram.in .fg-g-bar {
  transform: scaleX(1);
}

.fg-g-bar[data-state="done"] {
  fill: var(--en-green);
  stroke: var(--en-line);
}
/* in flight now: hatch fill from the pattern attribute, no css fill */
.fg-g-bar[data-state="active"] {
  stroke: var(--en-accent);
}
/* future: hollow */
.fg-g-bar[data-state="todo"] {
  fill: none;
  stroke: var(--en-ink2);
  stroke-dasharray: 4 3;
}

.fg-g-today {
  stroke: var(--en-accent);
  stroke-width: 2;
  transform-box: fill-box;
  transform-origin: top;
  transform: scaleY(0);
  transition: transform 0.5s var(--en-ease-out) 0.25s;
  pointer-events: none;
}

.en-diagram.in .fg-g-today {
  transform: scaleY(1);
}

.fg-g-cross {
  fill: var(--en-accent);
  pointer-events: none;
}

.fg-g-ring {
  fill: none;
  stroke: var(--en-accent);
  stroke-width: 2;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  pointer-events: none;
}

.en-diagram.in .fg-g-ring {
  animation: fg-ping 1.1s ease-out 0.8s 2;
}

@keyframes fg-ping {
  0% {
    opacity: 0.9;
    transform: scale(0.4);
  }
  100% {
    opacity: 0;
    transform: scale(1.7);
  }
}

/* ---- box plot ---------------------------------------------------------------- */

/* fills come from per-mark attributes: paper = hollow, pattern = hero */
.fg-box {
  stroke: var(--en-line);
  stroke-width: 2.5;
  transform-box: fill-box;
  transform-origin: center;
  transform: scaleY(0.02);
  transition:
    transform 0.5s var(--en-ease-out) var(--d, 0s),
    fill 0.15s ease,
    stroke-width 0.15s ease;
}

.en-diagram.in .fg-box {
  transform: scaleY(1);
}

.fg-boxg {
  cursor: pointer;
}

.fg-boxg:hover .fg-box {
  fill: var(--en-paper3);
  stroke-width: 3.5;
}

.fg-med {
  stroke: var(--en-accent);
  stroke-width: 3;
  pointer-events: none;
}

.fg-whg {
  stroke: var(--en-line);
  stroke-width: 2;
  opacity: 0;
  transition: opacity 0.4s ease var(--d2, var(--d, 0s));
  pointer-events: none;
}

.en-diagram.in .fg-whg {
  opacity: 1;
}

.fg-out {
  fill: var(--en-ink2);
  opacity: 0;
  animation: none;
  transform-box: fill-box;
  transform-origin: center;
  transition:
    transform 0.35s var(--en-ease-pop) var(--d2, var(--d, 0s)),
    opacity 0.3s ease var(--d2, var(--d, 0s));
  pointer-events: none;
}

.en-diagram.in .fg-out {
  opacity: 0.8;
  transform: scale(1);
}

.fg-box-lbl {
  font-family: var(--en-ui);
  font-size: 12px;
  letter-spacing: 1px;
  fill: var(--en-ink2);
  text-anchor: middle;
  text-transform: uppercase;
  pointer-events: none;
}

.fg-box-med-lbl {
  font-family: var(--en-ui);
  font-size: var(--en-f-mono-10);
  letter-spacing: 0.5px;
  fill: var(--en-ink);
  pointer-events: none;
}

/* ---- quadrant ------------------------------------------------------------------ */

.fg-q-corner {
  font-family: var(--en-ui);
  font-size: 12px;
  letter-spacing: 1.5px;
  fill: var(--en-ink2);
  paint-order: stroke;
  stroke: var(--en-paper);
  stroke-width: 3px;
  text-transform: uppercase;
  pointer-events: none;
}

.fg-q-corner.hot {
  fill: var(--en-ink);
}

.fg-q-tick {
  stroke: var(--en-accent);
  stroke-width: 2;
  pointer-events: none;
}

.fg-parity {
  stroke: var(--en-ink2);
  stroke-width: 2;
  stroke-dasharray: 6 5;
  opacity: 0.55;
  pointer-events: none;
}

.fg-q-cross {
  stroke: var(--en-line);
  stroke-width: 2;
  pointer-events: none;
}

/* ---- sankey ---------------------------------------------------------------------- */

/* layout failure (cyclic graph, missing node): shown in place of the flow */
.fg-serr {
  font-family: var(--en-ui);
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  fill: var(--en-ink2);
}

/* stroke comes from the hatch pattern attribute */
.fg-ribbon {
  fill: none;
  opacity: 0.55;
  transition:
    stroke 0.15s ease,
    opacity 0.15s ease;
  cursor: pointer;
}

.fg-ribbon.hot {
  stroke: var(--en-accent);
  opacity: 1;
}

/* fill comes from the dense-hatch pattern attribute */
.fg-snode {
  stroke: var(--en-line);
  stroke-width: 2;
  opacity: 0;
  transform: translateX(-8px);
  transition:
    transform 0.5s var(--en-ease-out) var(--d, 0s),
    opacity 0.5s ease var(--d, 0s);
}

.en-diagram.in .fg-snode {
  transform: translateX(0);
  opacity: 1;
}

.fg-slbl-n {
  font-family: var(--en-ui);
  font-size: 12px;
  letter-spacing: 0.5px;
  fill: var(--en-ink);
  text-transform: uppercase;
  paint-order: stroke;
  stroke: var(--en-paper);
  stroke-width: 3px;
  pointer-events: none;
}

.fg-slbl-v {
  font-family: var(--en-ui);
  font-size: var(--en-f-mono-10);
  fill: var(--en-ink2);
  paint-order: stroke;
  stroke: var(--en-paper);
  stroke-width: 3px;
  pointer-events: none;
}

/* ---- map -------------------------------------------------------------------- */
/* Geo choropleth + network, rendered by MapLibre GL (canvas). Bins 0..5 run
   best to worst. Hue rotation (blue -> green -> amber -> accent) mirrors the
   originals' RdYlGn ramp; a two-hue lightness ramp reads "red sea" once
   class 4+5 cover >40% of the map. -1 = no data. The --fg-mbin-* vars serve
   the house legend swatches; the canvas layers resolve the same mix in JS
   (MapLibre paint values cannot use color-mix). */

:root {
  --fg-mbin-0: color-mix(in srgb, var(--en-blue) 60%, var(--en-paper));
  --fg-mbin-1: color-mix(in srgb, var(--en-green) 55%, var(--en-paper));
  --fg-mbin-2: color-mix(in srgb, var(--en-amber) 30%, var(--en-paper));
  --fg-mbin-3: color-mix(in srgb, var(--en-amber) 50%, var(--en-paper));
  --fg-mbin-4: color-mix(in srgb, var(--en-amber) 85%, var(--en-paper));
  --fg-mbin-5: color-mix(in srgb, var(--en-accent) 80%, var(--en-paper));
  --fg-mbin-na: var(--en-paper2);
}

/* Canvas host. Fills the aspect-ratio box the canvas component provides. */
/* MapLibre positions its canvas absolutely, so the stage must carry the
   box. Fixed height collapses to 0 in an auto-height parent; the house
   figure aspect (1000x640) gives a real box at any width. */
.fg-map-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 1000 / 640;
  background: var(--en-paper);
}
.fg-map-stage canvas {
  outline: none;
}
.fg-map-geo-error {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--en-ui);
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--en-ink2);
}

/* Postcode popup: click the map to reveal the POA's postal area. A MapLibre
   Popup, house-styled (mono on a paper chip, hairline border). */
.fg-map-popup .maplibregl-popup-content {
  font-family: var(--en-ui);
  font-size: 13px;
  letter-spacing: 0.5px;
  color: var(--en-ink);
  background: color-mix(in srgb, var(--en-paper) 94%, transparent);
  border: 1px solid color-mix(in srgb, var(--en-ink) 30%, transparent);
  border-radius: 0;
  padding: 4px 8px;
}
.fg-map-popup .maplibregl-popup-tip {
  border-top-color: color-mix(in srgb, var(--en-paper) 94%, transparent);
  border-bottom-color: color-mix(in srgb, var(--en-paper) 94%, transparent);
}

/* House-ify the MapLibre chrome we keep (scale bar + attribution). */
.maplibregl-ctrl-scale {
  font-family: var(--en-ui);
  font-size: 12px;
  letter-spacing: 0.5px;
  color: var(--en-ink);
  background: color-mix(in srgb, var(--en-paper) 88%, transparent);
  border: 1px solid color-mix(in srgb, var(--en-ink) 30%, transparent);
  border-top: none;
}
.maplibregl-ctrl-attrib.maplibregl-compact {
  font-family: var(--en-ui);
  font-size: 12px;
  background: color-mix(in srgb, var(--en-paper) 88%, transparent);
  color: var(--en-ink2);
}
.maplibregl-ctrl-attrib a {
  color: var(--en-ink2);
}

/* ---- ambient dots ------------------------------------------------------------------- */

.fg-dot-walk {
  fill: var(--en-accent);
  opacity: 0.85;
  pointer-events: none;
}

.fg-dot-orbit {
  fill: var(--en-accent);
  opacity: 0.9;
  pointer-events: none;
}

.fg-ghost-track {
  fill: none;
  stroke: none;
  pointer-events: none;
}

/* ---- race (IPO track) ---------------------------------------------------------- */

.fg-race-lane {
  outline: none;
  transition: opacity 0.25s ease;
}
.fg-race-lane.dim {
  opacity: 0.35;
}

.fg-race-track {
  stroke-width: 4;
  opacity: 0.5;
}
.fg-race-lane:hover .fg-race-track,
.fg-race-lane:focus .fg-race-track {
  opacity: 0.95;
}

.fg-race-finish {
  stroke-width: 2;
  stroke-dasharray: 8 6;
  opacity: 0;
  transition: opacity 0.6s ease var(--d, 0s);
  pointer-events: none;
}
.en-diagram.in .fg-race-finish {
  opacity: 1;
}

.fg-race-flag {
  fill: var(--en-accent);
}

.fg-race-bell {
  font-family: var(--en-disp);
  font-size: 22px;
  letter-spacing: 2px;
  fill: var(--en-ink);
  text-anchor: middle;
}
.fg-race-bell-sub {
  font-family: var(--en-ui);
  font-size: var(--en-f-mono-11);
  letter-spacing: 1px;
  fill: var(--en-ink2);
  text-anchor: middle;
}

/* generic fade-in for race annotations (fired by the canvas .in) */
.fg-race-fade {
  opacity: 0;
  transition: opacity 0.5s ease var(--d, 0s);
}
.en-diagram.in .fg-race-fade {
  opacity: 1;
}

.fg-race-name {
  font-family: var(--en-ui);
  font-size: var(--en-f-mono-13);
  font-weight: 700;
  letter-spacing: 1.5px;
  text-anchor: start;
  pointer-events: none;
}

.fg-race-ms-tick {
  stroke-width: 2;
  opacity: 0.7;
  transition:
    opacity 0.15s ease,
    stroke-width 0.15s ease;
}
.fg-race-ms:hover .fg-race-ms-tick {
  opacity: 1;
  stroke-width: 3;
}
.fg-race-ms-l1 {
  font-family: var(--en-ui);
  font-size: var(--en-f-mono-11);
  fill: var(--en-ink);
  text-anchor: middle;
}
.fg-race-ms-l2 {
  font-family: var(--en-ui);
  font-size: var(--en-f-mono-10);
  fill: var(--en-ink2);
  text-anchor: middle;
}

.fg-race-tgt-line {
  stroke-width: 3;
  stroke-dasharray: 2 8;
  stroke-linecap: round;
  pointer-events: none;
}
.fg-race-tgt-lbl {
  font-family: var(--en-ui);
  font-size: var(--en-f-mono-11);
  text-anchor: middle;
  pointer-events: none;
}

/* the runner sits at its final position in the DOM; before reveal a CSS
   shift parks it on the start line, then it sprints the track */
.fg-race-runner {
  transform: translateX(calc(-1 * var(--shift, 0px)));
  transition: transform 1.4s var(--en-ease-out) var(--d, 0s);
}
.en-diagram.in .fg-race-runner {
  transform: translateX(0);
}

.fg-race-ball {
  fill: var(--en-paper);
  stroke-width: 3;
}

.fg-race-badge {
  font-family: var(--en-ui);
  font-size: 14px;
  font-weight: 700;
  fill: var(--en-ink);
  text-anchor: middle;
  pointer-events: none;
}

.fg-race-note {
  font-family: var(--en-ui);
  font-size: var(--en-f-mono-11);
  fill: var(--en-ink2);
  text-anchor: middle;
  pointer-events: none;
}

/* ---- blind spot (tested vs served) ------------------------------------------------- */

.fg-bl-area {
  opacity: 0;
  transition: opacity 0.7s ease var(--d, 0s);
  pointer-events: none;
}
.en-diagram.in .fg-bl-area {
  opacity: 0.3;
}

.fg-bl-line {
  fill: none;
  stroke-width: 2.5;
  pointer-events: none;
}

.fg-bl-axis {
  stroke: var(--en-line);
  stroke-width: 1.5;
}
.fg-bl-axis-title {
  font-family: var(--en-ui);
  font-size: var(--en-f-mono-11);
  fill: var(--en-ink2);
  text-anchor: middle;
  pointer-events: none;
}

.fg-bl-mu {
  stroke-width: 1;
  stroke-dasharray: 4 5;
  opacity: 0;
  transition: opacity 0.5s ease var(--d, 0s);
  pointer-events: none;
}
.en-diagram.in .fg-bl-mu {
  opacity: 1;
}
.fg-bl-mu-lbl {
  font-family: var(--en-ui);
  font-size: var(--en-f-mono-11);
  opacity: 0;
  transition: opacity 0.5s ease var(--d, 0s);
  pointer-events: none;
}
.en-diagram.in .fg-bl-mu-lbl {
  opacity: 1;
}

.fg-bl-delta {
  stroke: var(--en-ink);
  stroke-width: 1.5;
}
.fg-bl-delta-lbl {
  font-family: var(--en-ui);
  font-size: var(--en-f-mono-11);
  fill: var(--en-ink);
  pointer-events: none;
}

.fg-bl-curve-lbl {
  font-family: var(--en-ui);
  font-size: var(--en-f-mono-11);
  text-anchor: middle;
  opacity: 0;
  transition: opacity 0.5s ease var(--d, 0s);
  pointer-events: none;
}
.en-diagram.in .fg-bl-curve-lbl {
  opacity: 1;
}

.fg-bl-inset {
  fill: var(--en-paper2);
  stroke: var(--en-line);
}
.fg-bl-inset-title {
  font-family: var(--en-ui);
  font-size: var(--en-f-mono-10);
  fill: var(--en-ink2);
}
.fg-bl-chance {
  stroke: var(--en-accent);
  stroke-width: 1.5;
  stroke-dasharray: 4 4;
  pointer-events: none;
}
.fg-bl-chance-lbl {
  font-family: var(--en-ui);
  font-size: var(--en-f-mono-10);
  fill: var(--en-accent);
  text-anchor: end;
  pointer-events: none;
}
.fg-bl-inset-dot {
  fill: var(--en-ink2);
  transition: fill 0.15s ease;
}
.fg-bl-inset-dot:hover {
  fill: var(--en-ink);
}
.fg-bl-inset-lbl {
  font-family: var(--en-ui);
  font-size: var(--en-f-mono-10);
  fill: var(--en-ink2);
  pointer-events: none;
}

/* enlarged invisible hit target over the inset dots */
.fg-bl-inset-hit {
  fill: transparent;
  outline: none;
}

.fg-bl-cap {
  font-family: var(--en-ui);
  font-size: var(--en-f-mono-11);
  fill: var(--en-ink);
  pointer-events: none;
}
.fg-bl-punch {
  font-family: var(--en-ui);
  font-size: var(--en-f-mono-13);
  font-weight: 700;
  fill: var(--en-accent);
  pointer-events: none;
}
.fg-bl-footer {
  font-family: var(--en-ui);
  font-size: var(--en-f-mono-11);
  fill: var(--en-ink2);
  text-anchor: middle;
  pointer-events: none;
}

.fg-bl-fade {
  opacity: 0;
  transition: opacity 0.5s ease var(--d, 0s);
}
.en-diagram.in .fg-bl-fade {
  opacity: 1;
}

/* hover scrub: crosshair + density readout */
.fg-bl-scrub {
  opacity: 0;
  pointer-events: none;
}
.fg-bl-scrub.on {
  opacity: 1;
}
.fg-bl-scrub-line {
  stroke: var(--en-ink);
  stroke-width: 1;
  stroke-dasharray: 3 3;
}

/* ---- loop (circular commitments) ------------------------------------------------ */

/* dashed flow ring: fades in, then the dash marches clockwise while .in */
@keyframes fg-loop-march {
  to {
    stroke-dashoffset: -42; /* two 12+9 dash cycles */
  }
}

.fg-loop-flow {
  cursor: pointer;
  transition: opacity 0.15s ease;
}
.fg-loop-flow.dim {
  opacity: 0.15;
}
.fg-loop-flow-line {
  fill: none;
  stroke: var(--en-accent);
  stroke-width: 3;
  stroke-dasharray: 12 9;
}
.en-diagram.in .fg-loop-flow-line {
  animation: fg-loop-march 1.1s linear infinite;
}
.fg-loop-flow.lit .fg-loop-flow-line {
  stroke-width: 4;
}
.fg-loop-flow-hit {
  fill: none;
  stroke: transparent;
  stroke-width: 18;
}
.fg-loop-arr {
  fill: var(--en-accent);
}

/* generic fade-in for loop annotations (fired by the canvas .in) */
.fg-loop-fade {
  opacity: 0;
  transition: opacity 0.5s ease var(--d, 0s);
}
.en-diagram.in .fg-loop-fade {
  opacity: 1;
}

.fg-loop-flow-l1 {
  font-family: var(--en-ui);
  font-size: var(--en-f-mono-13);
  font-weight: 700;
  letter-spacing: 1px;
  fill: var(--en-accent);
  text-anchor: middle;
}
.fg-loop-flow-l2 {
  font-family: var(--en-ui);
  font-size: var(--en-f-mono-11);
  fill: var(--en-ink2);
  text-anchor: middle;
}

.fg-loop-node {
  cursor: pointer;
  transition: opacity 0.15s ease;
}
.fg-loop-node.dim {
  opacity: 0.18;
}
.fg-loop-node-circ {
  fill: var(--en-paper2);
  stroke-width: 2;
}
.fg-loop-node-name {
  font-family: var(--en-ui);
  font-weight: 700;
  fill: var(--en-ink);
  text-anchor: middle;
}
.fg-loop-node-sub {
  font-family: var(--en-ui);
  font-size: var(--en-f-mono-11);
  fill: var(--en-ink2);
  text-anchor: middle;
}
.fg-loop-node-note {
  font-family: var(--en-ui);
  font-size: var(--en-f-mono-11);
  fill: var(--en-ink2);
  text-anchor: middle;
}

.fg-loop-center-t {
  font-family: var(--en-ui);
  font-size: 38px;
  font-weight: 700;
  letter-spacing: 2px;
  fill: var(--en-ink);
  text-anchor: middle;
  pointer-events: none;
}
.fg-loop-center-l1 {
  font-family: var(--en-ui);
  font-size: var(--en-f-mono-13);
  fill: var(--en-ink);
  text-anchor: middle;
  pointer-events: none;
}
.fg-loop-center-l2,
.fg-loop-center-l3 {
  font-family: var(--en-ui);
  font-size: var(--en-f-mono-12);
  fill: var(--en-ink2);
  text-anchor: middle;
  pointer-events: none;
}

/* ---- gravity well (stake + supply map) -------------------------------------- */

.fg-grav-node,
.fg-grav-well {
  cursor: pointer;
  outline: none;
  transition: opacity 0.2s ease;
}
.fg-grav-node.dim {
  opacity: 0.35;
}

/* quadrant dividers: quieter than spokes' ink, still present */
.fg-grav-div {
  stroke: var(--en-ink2);
  stroke-width: 1;
  opacity: 0.35;
  pointer-events: none;
}

.fg-grav-spoke {
  stroke: var(--en-ink);
  stroke-width: 1;
  opacity: 0.16;
  pointer-events: none;
}

/* generic fade-in for gravity annotations (fired by the canvas .in) */
.fg-grav-fade {
  opacity: 0;
  transition: opacity 0.5s ease var(--d, 0s);
}
.en-diagram.in .fg-grav-fade {
  opacity: 1;
}

/* hollow bubble: paper fill, role stroke; pops in via .fg-pt.
   declares its own transition so the pop and the hover weight
   share one rule (wins over .fg-pt by file order) */
.fg-grav-bub {
  fill: var(--en-paper);
  stroke-width: 2.5;
  transition:
    transform 0.35s var(--en-ease-pop) var(--d, 0s),
    stroke-width 0.15s ease;
}
.fg-grav-node:hover .fg-grav-bub,
.fg-grav-node:focus .fg-grav-bub {
  stroke-width: 4;
}

.fg-grav-name {
  font-family: var(--en-ui);
  font-size: 14px;
  font-weight: 700;
  fill: var(--en-ink);
  text-anchor: middle;
  pointer-events: none;
}
.fg-grav-note {
  font-family: var(--en-ui);
  font-size: var(--en-f-mono-12);
  fill: var(--en-ink2);
  text-anchor: middle;
  pointer-events: none;
}
.fg-grav-note-side {
  text-anchor: start;
}

.fg-grav-layer {
  font-family: var(--en-ui);
  font-size: var(--en-f-mono-13);
  font-weight: 700;
  letter-spacing: 2px;
  fill: var(--en-ink2);
  text-anchor: middle;
  pointer-events: none;
}

.fg-grav-core {
  fill: var(--en-paper2);
  stroke-width: 3;
}

.fg-grav-center-t {
  font-family: var(--en-ui);
  font-size: 26px;
  font-weight: 700;
  letter-spacing: 1px;
  fill: var(--en-ink);
  text-anchor: middle;
  pointer-events: none;
}
.fg-grav-center-v {
  font-family: var(--en-ui);
  font-size: 18px;
  font-weight: 700;
  fill: var(--en-accent);
  text-anchor: middle;
  pointer-events: none;
}
.fg-grav-center-s {
  font-family: var(--en-ui);
  font-size: var(--en-f-mono-12);
  fill: var(--en-ink2);
  text-anchor: middle;
  pointer-events: none;
}

/* ---- circuits (circular cash flows) ----------------------------------------- */

/* outer flow ring: static dash pattern; while .in the dash marches clockwise */
@keyframes fg-circ-march {
  to {
    stroke-dashoffset: -24; /* two 4+8 dash cycles */
  }
}

.fg-circ-ring {
  fill: none;
  stroke: var(--en-ink2);
  stroke-width: 2;
  stroke-dasharray: 4 8;
  opacity: 0.5;
}
.en-diagram.in .fg-circ-ring {
  animation: fg-circ-march 1.2s linear infinite;
}

.fg-circ-arr {
  fill: none;
  stroke: var(--en-accent);
  stroke-width: 3;
  stroke-linecap: round;
}

.fg-circ-node {
  cursor: pointer;
  outline: none;
  transition: opacity 0.2s ease;
}
.fg-circ-node.dim {
  opacity: 0.3;
}

.fg-circ-spoke {
  stroke: var(--en-ink);
  stroke-width: 1;
  opacity: 0.16;
  pointer-events: none;
}

/* generic fade-in for circuits annotations (fired by the canvas .in) */
.fg-circ-fade {
  opacity: 0;
  transition: opacity 0.5s ease var(--d, 0s);
}
.en-diagram.in .fg-circ-fade {
  opacity: 1;
}

/* filled bubble: paper2 fill, accent stroke; pops in via .fg-pt.
   declares its own transition so the pop and the hover weight
   share one rule (wins over .fg-pt by file order) */
.fg-circ-bub {
  fill: var(--en-paper2);
  stroke-width: 2.5;
  transition:
    transform 0.35s var(--en-ease-pop) var(--d, 0s),
    stroke-width 0.15s ease;
}
.fg-circ-node:hover .fg-circ-bub,
.fg-circ-node:focus .fg-circ-bub {
  stroke-width: 4;
}

.fg-circ-name-in {
  font-family: var(--en-ui);
  font-size: 16px;
  font-weight: 700;
  fill: var(--en-ink);
  text-anchor: middle;
  pointer-events: none;
}
.fg-circ-val-in {
  font-family: var(--en-ui);
  font-size: 15px;
  font-weight: 700;
  fill: var(--en-accent);
  text-anchor: middle;
  pointer-events: none;
}
.fg-circ-name-out {
  font-family: var(--en-ui);
  font-size: 14px;
  font-weight: 700;
  fill: var(--en-ink);
  text-anchor: middle;
  pointer-events: none;
}
.fg-circ-val-out {
  font-family: var(--en-ui);
  font-size: 13px;
  font-weight: 700;
  fill: var(--en-accent);
  text-anchor: middle;
  pointer-events: none;
}
.fg-circ-sub {
  font-family: var(--en-ui);
  font-size: 12px;
  fill: var(--en-ink2);
  text-anchor: middle;
  pointer-events: none;
}
.fg-circ-flab {
  font-family: var(--en-ui);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 1px;
  fill: var(--en-accent);
  text-anchor: middle;
  pointer-events: none;
}

.fg-circ-title {
  font-family: var(--en-ui);
  font-size: 30px;
  font-weight: 700;
  letter-spacing: 1px;
  fill: var(--en-ink);
  text-anchor: middle;
  pointer-events: none;
}
.fg-circ-quote {
  font-family: var(--en-ui);
  font-size: 14px;
  fill: var(--en-ink2);
  text-anchor: middle;
  pointer-events: none;
}
.fg-circ-subc {
  font-family: var(--en-ui);
  font-size: 13px;
  fill: var(--en-ink2);
  opacity: 0.8;
  text-anchor: middle;
  pointer-events: none;
}

/* ---- mask (one company, two vocabularies) ----------------------------------- */

/* the two halves scale in around the circle center (fixed viewBox origin) */
.fg-mk-reveal {
  transform-box: view-box;
  transform-origin: 600px 400px;
  transform: scale(0.7);
  opacity: 0;
  transition:
    transform 0.55s var(--en-ease-pop) var(--d, 0s),
    opacity 0.4s ease var(--d, 0s);
}
.en-diagram.in .fg-mk-reveal {
  transform: scale(1);
  opacity: 1;
}

/* half discs: role fills slightly see-through; light up + glow on focus,
   dim while the other half is lit */
.fg-mk-half {
  transition:
    fill-opacity 0.2s ease,
    opacity 0.2s ease,
    filter 0.2s ease;
}
.fg-mk-half.fg-mk-says {
  fill: var(--en-amber);
  fill-opacity: 0.85;
}
.fg-mk-half.fg-mk-does {
  fill: var(--en-accent);
  fill-opacity: 0.9;
}
.fg-mk-half.fg-mk-says.lit {
  fill-opacity: 1;
  filter: drop-shadow(0 0 10px var(--en-amber));
}
.fg-mk-half.fg-mk-does.lit {
  fill-opacity: 1;
  filter: drop-shadow(0 0 10px var(--en-accent));
}
.fg-mk-half.dim {
  opacity: 0.45;
}

.fg-mk-callout {
  cursor: pointer;
  outline: none;
  transition: opacity 0.2s ease;
}
.fg-mk-callout.dim {
  opacity: 0.35;
}

.fg-mk-leader {
  stroke-width: 1;
  opacity: 0.7;
  pointer-events: none;
  transition:
    opacity 0.15s ease,
    stroke-width 0.15s ease;
}
.fg-mk-leader.lit {
  opacity: 1;
  stroke-width: 2;
}

/* generic fade-in for mask annotations (fired by the canvas .in) */
.fg-mk-fade {
  opacity: 0;
  transition: opacity 0.5s ease var(--d, 0s);
}
.en-diagram.in .fg-mk-fade {
  opacity: 1;
}

/* ink plates over the role fills (house plate grammar) */
.fg-mk-hlbl rect,
.fg-mk-idplate rect {
  fill: var(--en-ink);
  stroke: var(--en-line);
  stroke-width: 2;
}
.fg-mk-hlbl text,
.fg-mk-idplate text {
  font-family: var(--en-ui);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 1px;
  fill: var(--en-paper);
  text-anchor: middle;
  pointer-events: none;
}
.fg-mk-idplate text:last-child {
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0;
  opacity: 0.7;
}

.fg-mk-title {
  font-family: var(--en-ui);
  font-size: 16px;
  font-weight: 700;
  fill: var(--en-ink);
}
.fg-mk-sub {
  font-family: var(--en-ui);
  font-size: 13px;
  fill: var(--en-ink2);
}
.fg-mk-left {
  text-anchor: end;
}
.fg-mk-right {
  text-anchor: start;
}

/* escape (nobody directed the attack) ----------------------------------- */

.fg-esc-fade {
  opacity: 0;
  transition: opacity 0.5s ease var(--d, 0s);
}
.en-diagram.in .fg-esc-fade {
  opacity: 1;
}

.fg-esc-panel {
  fill: var(--en-paper2);
}

.fg-esc-sandbox {
  stroke: var(--en-ink2);
  stroke-width: 2;
  stroke-dasharray: 8 6;
}

.fg-esc-dot {
  fill: var(--en-blue);
  transform: scale(0);
  transform-box: fill-box;
  transform-origin: center;
  transition: transform 0.3s var(--en-ease-pop) var(--d, 0s);
}
.en-diagram.in .fg-esc-dot {
  transform: scale(1);
}

.fg-esc-node-dot {
  fill: var(--en-accent);
  opacity: 0.85;
  transform: scale(0);
  transform-box: fill-box;
  transform-origin: center;
  transition: transform 0.3s var(--en-ease-pop) var(--d, 0s);
}
.en-diagram.in .fg-esc-node-dot {
  transform: scale(1);
}

.fg-esc-swarm {
  transition: filter 0.15s ease;
}
.fg-esc-swarm.hot {
  filter: brightness(1.45);
}

.fg-esc-comms {
  stroke: var(--en-blue);
  stroke-width: 1;
  opacity: 0.5;
}

.fg-esc-break,
.fg-esc-hop {
  stroke: var(--en-accent);
  fill: none;
}
.fg-esc-break {
  stroke-width: 3;
}
.fg-esc-hop {
  stroke-width: 4;
}

.fg-esc-ring {
  stroke-width: 2.5;
  transition: stroke-width 0.15s ease;
}
.fg-esc-node.hot .fg-esc-ring,
.fg-esc-node.lit .fg-esc-ring {
  stroke-width: 4;
}
.fg-esc-node {
  transition: filter 0.15s ease;
}
.fg-esc-node--blue.hot,
.fg-esc-node--blue.lit {
  filter: drop-shadow(0 0 8px var(--en-blue));
}
.fg-esc-node--accent.hot,
.fg-esc-node--accent.lit {
  filter: drop-shadow(0 0 8px var(--en-accent));
}

.fg-esc-run {
  fill: var(--en-accent);
  stroke: var(--en-paper);
  stroke-width: 2;
  filter: drop-shadow(0 0 6px var(--en-accent));
  pointer-events: none;
}

.fg-esc-label {
  font-family: var(--en-ui);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 1px;
  fill: var(--en-ink);
  text-transform: uppercase;
  text-anchor: middle;
  pointer-events: none;
}
.fg-esc-label-sm {
  font-family: var(--en-ui);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1px;
  fill: var(--en-ink);
  text-transform: uppercase;
  text-anchor: middle;
  pointer-events: none;
}
.fg-esc-sub {
  font-family: var(--en-ui);
  font-size: 13px;
  fill: var(--en-ink2);
  text-anchor: middle;
  pointer-events: none;
}
.fg-esc-tiny {
  font-family: var(--en-ui);
  font-size: 12px;
  fill: var(--en-ink2);
  text-anchor: middle;
  pointer-events: none;
}
.fg-esc-comms-lbl {
  font-family: var(--en-ui);
  font-size: 12px;
  fill: var(--en-blue);
  text-anchor: middle;
}
.fg-esc-time {
  font-family: var(--en-ui);
  font-size: 12px;
  fill: var(--en-accent);
  text-anchor: middle;
}
.fg-esc-foot {
  font-family: var(--en-ui);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1px;
  fill: var(--en-accent);
  text-transform: uppercase;
  text-anchor: middle;
  pointer-events: none;
}
.fg-esc-note {
  font-family: var(--en-ui);
  font-size: 14px;
  fill: var(--en-ink2);
  text-anchor: middle;
}
.fg-esc-note-sm {
  font-family: var(--en-ui);
  font-size: 12px;
  fill: var(--en-ink2);
  text-anchor: middle;
}

/* tripwires (five things to watch) ------------------------------------- */
/* HTML docket, not SVG: table text wraps, chips need button semantics. */

.fg-tw-docket {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 480px;
  font-family: var(--en-mono);
}

.fg-tw-fade {
  opacity: 0;
  transform: translateY(6px);
  transition:
    opacity 0.5s ease var(--d, 0s),
    transform 0.5s ease var(--d, 0s);
}
.en-diagram.in .fg-tw-fade {
  opacity: 1;
  transform: none;
}

.fg-tw-sub {
  margin: 4px 16px 14px;
  font-size: 13px;
  color: var(--en-ink2);
}

.fg-tw-head,
.fg-tw-row {
  display: grid;
  grid-template-columns: minmax(220px, 1.25fr) minmax(200px, 1fr) minmax(
      200px,
      1fr
    ) 132px;
  gap: 16px;
  align-items: center;
  padding: 0 16px;
}

.fg-tw-head {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--en-ink2);
  padding-bottom: 10px;
}

.fg-tw-rows {
  margin: 0;
  padding: 0;
  list-style: none;
  border-bottom: 1px solid var(--en-line);
}

.fg-tw-row {
  position: relative;
  min-height: 92px;
  border-top: 1px solid var(--en-line);
  transition: background 0.15s ease;
}
.fg-tw-row.hot {
  background: var(--en-paper2);
}

.fg-tw-bar {
  position: absolute;
  left: 0;
  top: 50%;
  width: 3px;
  height: 48px;
  transform: translateY(-50%);
  background: var(--en-accent);
  opacity: 0.7;
  transition:
    opacity 0.15s ease,
    background 0.15s ease;
}
.fg-tw-row.is-tripped .fg-tw-bar {
  background: var(--en-amber);
}
.fg-tw-row.is-clear .fg-tw-bar {
  background: var(--en-green);
}
.fg-tw-row.hot .fg-tw-bar {
  opacity: 1;
}

.fg-tw-cell {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.fg-tw-name {
  font-size: 15px;
  font-weight: 700;
  color: var(--en-ink);
}
.fg-tw-ctx {
  font-size: 12px;
  color: var(--en-ink2);
}
.fg-tw-w1,
.fg-tw-t1 {
  font-size: 13px;
  color: var(--en-ink);
}
.fg-tw-w2,
.fg-tw-t2 {
  font-size: 12px;
  color: var(--en-ink2);
}
.fg-tw-statecol {
  text-align: center;
}

.fg-tw-chip {
  font-family: var(--en-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
  padding: 6px 10px;
  border: 1.5px solid;
  border-radius: 4px;
  background: transparent;
  cursor: pointer;
  transition:
    color 0.15s ease,
    border-color 0.15s ease,
    background 0.15s ease;
}
.fg-tw-chip.is-armed {
  color: var(--en-accent);
  border-color: var(--en-accent);
  background: color-mix(in srgb, var(--en-accent) 10%, transparent);
}
.fg-tw-chip.is-tripped {
  color: var(--en-amber);
  border-color: var(--en-amber);
  background: color-mix(in srgb, var(--en-amber) 12%, transparent);
}
.fg-tw-chip.is-clear {
  color: var(--en-green);
  border-color: var(--en-green);
  background: color-mix(in srgb, var(--en-green) 10%, transparent);
}
.fg-tw-chip:focus-visible {
  outline: var(--en-bw) solid var(--en-accent);
  outline-offset: 2px;
}

.fg-tw-foot {
  margin-top: auto;
  padding: 24px 16px 6px;
  text-align: center;
}
.fg-tw-footline {
  margin: 0;
  font-family: var(--en-ui);
  font-size: 16px;
  font-weight: 700;
  color: var(--en-ink);
}
.fg-tw-sources {
  margin: 8px 0 0;
  font-size: 12px;
  color: var(--en-ink2);
}

/* narrow screens: the 4-column grid needs ~832px, so below 880px the
   docket reflows into per-row cards (2x2 areas, no horizontal pan). The
   hidden column head is replaced by a label on the watch and trip cells. */
@media (max-width: 880px) {
  .fg-tw-docket {
    min-height: 0;
  }
  .fg-tw-head {
    display: none;
  }
  .fg-tw-row {
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "name chip"
      "watch trip";
    row-gap: 12px;
    column-gap: 16px;
    align-items: start;
    min-height: 0;
    padding: 14px 16px;
  }
  .fg-tw-row > .fg-tw-cell:nth-child(2) {
    grid-area: name;
  }
  .fg-tw-row > .fg-tw-cell:nth-child(3) {
    grid-area: watch;
  }
  .fg-tw-row > .fg-tw-cell:nth-child(4) {
    grid-area: trip;
  }
  .fg-tw-row > .fg-tw-cell:nth-child(5) {
    grid-area: chip;
  }
  .fg-tw-row > .fg-tw-cell:nth-child(3)::before,
  .fg-tw-row > .fg-tw-cell:nth-child(4)::before {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--en-ink2);
  }
  .fg-tw-row > .fg-tw-cell:nth-child(3)::before {
    content: "watch";
  }
  .fg-tw-row > .fg-tw-cell:nth-child(4)::before {
    content: "trip";
  }
  .fg-tw-bar {
    height: 40px;
  }
}

/* ---- reduced motion: everything rests in its drawn state ---------------------- */

@media (prefers-reduced-motion: reduce) {
  .fg-bar,
  .fg-bar-val,
  .fg-g-bar,
  .fg-g-today,
  .fg-pt,
  .fg-out,
  .fg-snode,
  .fg-box {
    transition: none;
  }
  .fg-bar,
  .fg-g-today {
    transform: scaleY(1);
  }
  .fg-g-bar {
    transform: scaleX(1);
  }
  .fg-pt,
  .fg-out {
    transform: scale(1);
  }
  .fg-snode {
    transform: translateX(0);
    opacity: 1;
  }
  .fg-box {
    transform: scaleY(1);
  }
  .fg-bar-val,
  .fg-area,
  .fg-whg,
  .fg-ptdense {
    opacity: 1;
    transition: none;
  }
  .fg-g-ring,
  .fg-loop-flow-line,
  .fg-circ-ring {
    animation: none;
  }
  .fg-dot-walk,
  .fg-dot-orbit {
    display: none;
  }
  .fg-draw,
  .fg-series.draw {
    stroke-dashoffset: 0;
    transition: none;
  }
  .fg-slice {
    animation: none;
    transition: none;
  }
  .fg-race-runner {
    transform: none;
    transition: none;
  }
  .fg-race-fade,
  .fg-race-finish,
  .fg-loop-fade,
  .fg-grav-fade,
  .fg-circ-fade,
  .fg-mk-fade,
  .fg-bl-fade,
  .fg-bl-mu,
  .fg-bl-mu-lbl,
  .fg-bl-curve-lbl {
    opacity: 1;
    transition: none;
  }
  .fg-grav-bub,
  .fg-circ-bub {
    transform: scale(1);
    transition: none;
  }
  .fg-mk-reveal {
    transform: scale(1);
    opacity: 1;
    transition: none;
  }
  .fg-esc-fade {
    opacity: 1;
    transition: none;
  }
  .fg-esc-dot,
  .fg-esc-node-dot {
    transform: scale(1);
    transition: none;
  }
  .fg-tw-fade {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .fg-bl-area {
    opacity: 0.3;
    transition: none;
  }
}

/* enoki lede (spec 4.2 lede 16 / 400 / 1.55, 4.3 marks). */

.en-lede {
  margin: 0;
  font-family: var(--en-body);
  font-size: var(--en-f-lede);
  font-weight: 400;
  line-height: var(--en-lh-body);
  max-width: 72ch;
}

.en-mark {
  font-weight: 700;
}

/* enoki hero (spec 4.2 hero type, 6.4 page head). */

.en-hero {
  display: grid;
  gap: var(--en-sp-5);
  padding: 112px 0 70px;
}

.en-hero > .en-wrap {
  display: grid;
  gap: var(--en-sp-5);
}

.en-hero-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--en-sp-2);
}

.en-hero-h1 {
  margin: 0;
  font-family: var(--en-disp);
  font-weight: 400;
  font-size: var(--en-f-hero);
  line-height: var(--en-lh-hero);
  letter-spacing: var(--en-tr-disp);
  text-transform: uppercase;
}

.en-hero-sub {
  margin: 0;
  font-family: var(--en-body);
  font-size: var(--en-f-sub);
  font-weight: 500;
  line-height: var(--en-lh-body);
  max-width: 64ch;
}

.en-hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--en-sp-3);
}

.en-hero-ar {
  display: inline-block;
}

@media (max-width: 720px) {
  .en-hero {
    padding: 96px 0 var(--en-sp-5);
  }
}

/* enoki footer (spec 4.2 hollow stamp, 6.9 page foot). */

.en-footer {
  margin-top: 40px;
  padding: 70px 0 40px;
  border-top: var(--en-bw) solid var(--en-line);
  text-align: center;
}

.en-footer-stamp {
  font-family: var(--en-disp);
  font-weight: 400;
  font-size: clamp(40px, 10vw, 96px);
  line-height: 1;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: transparent;
  -webkit-text-stroke: 2px var(--en-ink);
}

.en-footer-meta {
  margin: 24px 0 0;
  font-family: var(--en-ui);
  font-size: var(--en-f-mono-10);
  letter-spacing: var(--en-tr-mono);
  line-height: var(--en-lh-mono);
  text-transform: uppercase;
  color: var(--en-ink2);
}

/* enoki prompt panel (spec 7.4 prompt code: mono 12.5, pre-wrap). */

.en-prompt-pre {
  margin: 0;
  font-family: var(--en-mono);
  font-size: 12.5px;
  line-height: 1.65;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}