/* 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;
  --en-ink: #16130e;
  --en-ink2: #5a5140;
  --en-line: #16130e;
  --en-accent: #c21c00;
  --en-blue: #1546ff;
  --en-green: #0f8a46;
  --en-amber: #e08e05;
  --en-halo: rgba(194, 28, 0, 0.22);
  --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;
  --en-ink: #f1ead9;
  --en-ink2: #b8ac93;
  --en-line: #f1ead9;
  --en-accent: #ff5a3c;
  --en-blue: #6f92ff;
  --en-green: #37c579;
  --en-amber: #f0b429;
  --en-halo: rgba(255, 90, 60, 0.28);
  --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);
}

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

.en-stat-unit {
  font-size: 0.42em;
  letter-spacing: 1px;
  color: var(--en-accent);
}

.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);
  }
}

/* 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;
  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-w {
  position: absolute;
  white-space: nowrap;
}

.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);
}

/* 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. */
.en-card {
  min-width: 0;
  background: var(--en-paper);
  border: var(--en-bw) solid var(--en-line);
  border-radius: var(--en-r);
  box-shadow: var(--en-sh-8);
}

.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);
}

/* 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;
}

/* 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;
}

/* 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;
  }
}

/* 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.
 */

.en-diagram {
  margin: 0;
  border: 2px solid var(--en-line);
  background: var(--en-paper);
  box-shadow: var(--en-sh-8);
  position: relative;
}

.en-diagram figcaption {
  display: block;
}

.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-halo {
  fill: var(--en-halo);
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  animation: en-breathe 4s ease-in-out infinite;
  pointer-events: none;
}

@keyframes en-breathe {
  0%,
  100% {
    opacity: 0.3;
    transform: scale(1.02);
  }
  50% {
    opacity: 0.9;
    transform: scale(1.1);
  }
}

.en-node .dg-box {
  fill: var(--en-paper2);
  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-9);
  letter-spacing: 0.5px;
  fill: var(--en-ink2);
  text-anchor: middle;
  text-transform: uppercase;
  pointer-events: none;
}

.en-node:hover .dg-box {
  fill: var(--en-paper3);
}

.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-8);
  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: 12px;
  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: 12px;
  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: 11px;
  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-node .dg-halo {
    animation: none;
    opacity: 0;
  }
  .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.
 */

/* ---- 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-8);
  letter-spacing: 0.5px;
  fill: var(--en-ink2);
}

.fg-axis-title {
  font-family: var(--en-ui);
  font-size: var(--en-f-mono-9);
  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-9);
  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: 10px;
  letter-spacing: 1px;
  fill: var(--en-paper);
  text-anchor: middle;
  text-transform: uppercase;
  pointer-events: none;
}

.fg-plate .fg-plate-sub {
  font-size: 8.5px;
  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;
}

/* ---- halo (one per figure, behind the hero mark) ------------------------ */

.fg-halo {
  fill: var(--en-halo);
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  animation: en-breathe 4s ease-in-out infinite;
  pointer-events: none;
}

/* ---- 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: 9px;
  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);
}

.fg-bargrp:hover .fg-bar {
  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: var(--en-f-mono-10);
  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-8);
  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: 11px;
  letter-spacing: 0.5px;
  fill: var(--en-ink);
  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: var(--en-f-mono-10);
  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-8);
  letter-spacing: 0.5px;
  fill: var(--en-ink);
  pointer-events: none;
}

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

.fg-q-halo {
  fill: var(--en-halo);
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  animation: en-breathe 4s ease-in-out infinite;
  pointer-events: none;
}

.fg-q-corner {
  font-family: var(--en-ui);
  font-size: 11px;
  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 ---------------------------------------------------------------------- */

/* 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: 10px;
  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-8);
  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: 12px;
  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: 12px;
  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: 10px;
  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: 9px;
  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;
}

/* ---- 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-halo,
  .fg-q-halo {
    animation: none;
    opacity: 0;
  }
  .fg-g-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;
  }
}

/* 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;
}