/* Source: /_ds/holonomix-design-system-178e9cdb-465d-4fec-9631-6fe3f59f6f8c/tokens/fonts.css */
/* HolonomiX webfonts - self-hosted (Archivo, Archivo Expanded, IBM Plex Mono) */

/* vietnamese */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 100%;
  font-display: swap;
  src: url("/assets/fonts/archivo-400-vietnamese.fca5a1ef.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

/* latin-ext */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 100%;
  font-display: swap;
  src: url("/assets/fonts/archivo-400-latin-ext.c5e41aa1.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 100%;
  font-display: swap;
  src: url("/assets/fonts/archivo-400-latin.cd56e2ec.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* cyrillic-ext */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/ibm-plex-mono-400-cyrillic-ext.89f877e2.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

/* cyrillic */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/ibm-plex-mono-400-cyrillic.2f3900b1.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* vietnamese */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/ibm-plex-mono-400-vietnamese.4674a617.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

/* latin-ext */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/ibm-plex-mono-400-latin-ext.8450d594.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/ibm-plex-mono-400-latin.79936b18.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* cyrillic-ext */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/ibm-plex-mono-500-cyrillic-ext.a1a15515.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

/* cyrillic */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/ibm-plex-mono-500-cyrillic.42375444.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* vietnamese */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/ibm-plex-mono-500-vietnamese.bec18f63.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

/* latin-ext */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/ibm-plex-mono-500-latin-ext.fa8d8838.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/ibm-plex-mono-500-latin.b1c8a895.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* cyrillic-ext */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/ibm-plex-mono-600-cyrillic-ext.f3365e9c.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

/* cyrillic */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/ibm-plex-mono-600-cyrillic.2a814d62.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* vietnamese */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/ibm-plex-mono-600-vietnamese.ebd7c523.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

/* latin-ext */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/ibm-plex-mono-600-latin-ext.f2fe87d5.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/ibm-plex-mono-600-latin.5a2ce779.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* cyrillic-ext */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/ibm-plex-mono-700-cyrillic-ext.3a917635.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

/* cyrillic */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/ibm-plex-mono-700-cyrillic.6e7d2281.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* vietnamese */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/ibm-plex-mono-700-vietnamese.fc3a5296.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

/* latin-ext */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/ibm-plex-mono-700-latin-ext.a10c1459.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/ibm-plex-mono-700-latin.59952787.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: /_ds/holonomix-design-system-178e9cdb-465d-4fec-9631-6fe3f59f6f8c/tokens/colors.css */
/* HolonomiX - Color tokens
   ==================================================================
   High-contrast monochrome foundation + a single sharp accent.
   Base scale = raw values. Semantic aliases below map to light/dark.
   The brand lives at the extremes: true black, true white, hairlines
   in between, and "Teal" used surgically for signal & energy.
*/

:root {
  /* ---- Monochrome ramp (ink → paper) ---- */
  --hx-black:      #000000;
  --hx-ink-900:    #0A0B0D;   /* page bg, dark */
  --hx-ink-800:    #121418;
  --hx-ink-700:    #1A1D22;
  --hx-ink-600:    #262A31;   /* raised surface, dark */
  --hx-ink-500:    #343942;   /* hairline border, dark */
  --hx-gray-400:   #5B626C;
  --hx-gray-300:   #8A919B;   /* secondary text */
  --hx-gray-200:   #B9BEC6;
  --hx-gray-150:   #D2D6DC;
  --hx-gray-100:   #E4E7EB;   /* hairline border, light */
  --hx-paper-100:  #F1F3F5;   /* raised surface, light */
  --hx-paper-50:   #F8F9FA;
  --hx-white:      #FFFFFF;

  /* ---- Teal: the one sharp accent. Reads on black AND white. ---- */
  --hx-teal:     #0FC2B0;  /* primary accent - teal */
  --hx-teal-600: #0A9183;  /* hover on light (darker) */
  --hx-teal-300: #4FE3D3;  /* hover on dark (lighter) */
  --hx-teal-100: #C6F5EF;
  --hx-teal-glow: rgba(15, 194, 176, 0.34);
  --hx-teal-700: #04766B;  /* AA text on white - 5.50:1, hue-locked to teal 174deg (HX extension, links on light) */
  --hx-teal-800: #035E55;  /* hover for teal-700 on light - 7.09:1 (HX extension) */

  /* ---- Signal (semantic status) ---- */
  --hx-pos:   #1FCB6B;   /* converged / healthy */
  --hx-warn:  #FFB020;   /* drift / attention */
  --hx-neg:   #FF4D4D;   /* diverged / error */
  --hx-info:  #2BD4F5;   /* blueprint cyan - info / links */

  /* ---- Data-viz categorical (structural, no purple) ---- */
  --hx-viz-1: #0FC2B0;   /* teal (accent) */
  --hx-viz-2: #2BD4F5;   /* cyan */
  --hx-viz-3: #FF4D6E;   /* magenta-red */
  --hx-viz-4: #FFB020;   /* amber */
  --hx-viz-5: #8AF5C0;   /* mint */
  --hx-viz-6: #B9BEC6;   /* steel */
}

/* ================= SEMANTIC - LIGHT (default) ================= */
:root,
[data-theme="light"] {
  --surface-page:     var(--hx-white);
  --surface-raised:   var(--hx-paper-50);
  --surface-sunken:   var(--hx-paper-100);
  --surface-inverse:  var(--hx-ink-900);
  --surface-accent:   var(--hx-teal);

  --text-primary:     var(--hx-ink-900);
  --text-secondary:   var(--hx-gray-400);
  --text-muted:       var(--hx-gray-300);
  --text-inverse:     var(--hx-white);
  --text-on-accent:   var(--hx-ink-900);
  --text-link:        var(--hx-ink-900);

  --border-hairline:  var(--hx-gray-100);
  --border-default:   var(--hx-gray-150);
  --border-strong:    var(--hx-ink-900);
  --border-accent:    var(--hx-teal);

  --grid-line:        rgba(10, 11, 13, 0.06);  /* blueprint background */
  --grid-tick:        rgba(10, 11, 13, 0.18);

  --accent:           var(--hx-teal);
  --accent-hover:     var(--hx-teal-600);
  --accent-contrast:  var(--hx-ink-900);

  --text-link-accent:       var(--hx-teal-700);
  --text-link-accent-hover: var(--hx-teal-800);
}

/* ================= SEMANTIC - DARK ================= */
[data-theme="dark"] {
  --surface-page:     var(--hx-ink-900);
  --surface-raised:   var(--hx-ink-800);
  --surface-sunken:   var(--hx-black);
  --surface-inverse:  var(--hx-white);
  --surface-accent:   var(--hx-teal);

  --text-primary:     var(--hx-white);
  --text-secondary:   var(--hx-gray-300);
  --text-muted:       var(--hx-gray-400);
  --text-inverse:     var(--hx-ink-900);
  --text-on-accent:   var(--hx-ink-900);
  --text-link:        var(--hx-white);

  --border-hairline:  var(--hx-ink-600);
  --border-default:   var(--hx-ink-500);
  --border-strong:    var(--hx-gray-200);
  --border-accent:    var(--hx-teal);

  --grid-line:        rgba(255, 255, 255, 0.05);
  --grid-tick:        rgba(255, 255, 255, 0.16);

  --accent:           var(--hx-teal);
  --accent-hover:     var(--hx-teal-300);
  --accent-contrast:  var(--hx-ink-900);

  --text-link-accent:       var(--hx-teal);
  --text-link-accent-hover: var(--hx-teal-300);
}

/* Source: /_ds/holonomix-design-system-178e9cdb-465d-4fec-9631-6fe3f59f6f8c/tokens/typography.css */
/* HolonomiX - Typography tokens
   ==================================================================
   Three voices:
     --font-display  Archivo Expanded - structural headlines, wide & bold
     --font-sans     Archivo          - UI & body
     --font-mono     IBM Plex Mono    - data, eyebrows, coordinates, code
   Numbers, labels and metadata default to MONO. That is the brand's
   "structure" voice: everything measured reads like an instrument.
*/

:root {
  /* ---- Families ---- */
  --font-display: 'Archivo Expanded', 'Archivo', system-ui, sans-serif;
  --font-sans:    'Archivo', system-ui, -apple-system, sans-serif;
  --font-mono:    'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* ---- Weights ---- */
  --fw-regular: 400; /* @kind font */
  --fw-medium:  500; /* @kind font */
  --fw-semibold:600; /* @kind font */
  --fw-bold:    700; /* @kind font */
  --fw-black:   800; /* @kind font */

  /* ---- Display scale (Archivo Expanded) ---- */
  --fs-display-1: 96px;  --lh-display-1: 0.96; /* @kind font */  --tk-display-1: -0.03em;  /* @kind font */
  --fs-display-2: 68px;  --lh-display-2: 0.98; /* @kind font */  --tk-display-2: -0.025em; /* @kind font */
  --fs-display-3: 48px;  --lh-display-3: 1.02; /* @kind font */  --tk-display-3: -0.02em;  /* @kind font */

  /* ---- Headings (Archivo) ---- */
  --fs-h1: 36px;  --lh-h1: 1.08; /* @kind font */  --tk-h1: -0.015em; /* @kind font */
  --fs-h2: 28px;  --lh-h2: 1.12; /* @kind font */  --tk-h2: -0.01em;  /* @kind font */
  --fs-h3: 22px;  --lh-h3: 1.18; /* @kind font */  --tk-h3: -0.01em;  /* @kind font */
  --fs-h4: 18px;  --lh-h4: 1.25; /* @kind font */  --tk-h4: 0;       /* @kind font */

  /* ---- Body (Archivo) ---- */
  --fs-body-lg: 18px;  --lh-body-lg: 1.55; /* @kind font */
  --fs-body:    15px;  --lh-body:    1.6;  /* @kind font */
  --fs-body-sm: 13px;  --lh-body-sm: 1.5;  /* @kind font */

  /* ---- Mono / labels (IBM Plex Mono) ---- */
  --fs-mono:     13px;  --lh-mono: 1.5;        /* @kind font */
  --fs-mono-sm:  12px;  --lh-mono-sm: 1.45;     /* @kind font */
  --fs-eyebrow:  11px;  --tk-eyebrow: 0.22em;   /* @kind font */
  --fs-caption:  11px;  --lh-caption: 1.4;      /* @kind font */

  /* ---- Semantic roles ---- */
  --type-display:  var(--fw-black)    var(--fs-display-2)/var(--lh-display-2) var(--font-display); /* @kind font */
  --type-h1:       var(--fw-bold)     var(--fs-h1)/var(--lh-h1) var(--font-sans); /* @kind font */
  --type-body:     var(--fw-regular)  var(--fs-body)/var(--lh-body) var(--font-sans); /* @kind font */
  --type-eyebrow:  var(--fw-medium)   var(--fs-eyebrow) var(--font-mono); /* @kind font */
}

/* Source: /_ds/holonomix-design-system-178e9cdb-465d-4fec-9631-6fe3f59f6f8c/tokens/spacing.css */
/* HolonomiX - Spacing & layout tokens
   ==================================================================
   Strict 4px lattice. Everything snaps to the grid - the layout IS
   the structure. Containers and gutters are fixed so columns align
   across surfaces like a coordinate system.
*/

:root {
  --space-0:  0px;
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;

  /* ---- Layout ---- */
  --gutter:        24px;
  --container-max: 1280px;
  --container-pad: 32px;
  --section-y:     96px;   /* vertical rhythm between major sections */

  /* ---- Grid module (the lattice) ---- */
  --module: 8px;          /* base unit of the visible blueprint grid */
  --rail:   64px;         /* sidebar / rail width unit */
}

/* Source: /_ds/holonomix-design-system-178e9cdb-465d-4fec-9631-6fe3f59f6f8c/tokens/effects.css */
/* HolonomiX - Effects: radii, borders, shadows, motion, texture
   ==================================================================
   The brand is FLAT and STRUCTURAL. Corners are near-sharp. Elevation
   is communicated with hairline borders and faint accent glow, not
   soft drop shadows. Motion is fast, linear-ish, never bouncy.
*/

:root {
  /* ---- Radii (sharp by default) ---- */
  --radius-none: 0px;
  --radius-xs:   2px;
  --radius-sm:   3px;
  --radius-md:   5px;
  --radius-lg:   8px;
  --radius-pill: 999px;

  /* ---- Borders ---- */
  --bw-hair:   1px;   /* @kind spacing */
  --bw-strong: 1.5px; /* @kind spacing */
  --bw-heavy:  2px;   /* @kind spacing */

  /* ---- Shadows (used sparingly; mostly on light) ---- */
  --shadow-none: none;
  --shadow-sm:  0 1px 2px rgba(10,11,13,0.06), 0 0 0 1px rgba(10,11,13,0.04);
  --shadow-md:  0 4px 16px rgba(10,11,13,0.08), 0 0 0 1px rgba(10,11,13,0.05);
  --shadow-lg:  0 16px 48px rgba(10,11,13,0.16), 0 0 0 1px rgba(10,11,13,0.06);
  --shadow-accent: 0 0 0 1px var(--hx-teal), 0 0 24px var(--hx-teal-glow);

  /* ---- Motion ---- */
  --ease-out:   cubic-bezier(0.22, 0.61, 0.36, 1);   /* @kind other */
  --ease-in-out:cubic-bezier(0.65, 0.05, 0.36, 1);   /* @kind other */
  --ease-snap:  cubic-bezier(0.2, 0.9, 0.1, 1);      /* @kind other */
  --dur-instant: 80ms;  /* @kind other */
  --dur-fast:    140ms; /* @kind other */
  --dur-base:    220ms; /* @kind other */
  --dur-slow:    360ms; /* @kind other */

  /* ---- Blueprint texture (use as background-image) ---- */
  --grid-size: 32px; /* @kind spacing */
  --grid-bg:
    linear-gradient(var(--grid-line) var(--bw-hair), transparent var(--bw-hair)),
    linear-gradient(90deg, var(--grid-line) var(--bw-hair), transparent var(--bw-hair)); /* @kind other */

  /* ---- Focus ring ---- */
  --focus-ring: 0 0 0 2px var(--surface-page), 0 0 0 4px var(--hx-teal); /* @kind shadow */
}

/* Source: /_ds/holonomix-design-system-178e9cdb-465d-4fec-9631-6fe3f59f6f8c/tokens/base.css */
/* HolonomiX - Base layer & brand utilities
   ==================================================================
   Element defaults + a few structural helpers the brand leans on:
   blueprint grid backgrounds, eyebrow/coordinate labels, corner
   brackets. Kept intentionally small.
*/

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font: var(--type-body);
  color: var(--text-primary);
  background: var(--surface-page);
  font-feature-settings: "ss01", "cv01";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--hx-teal); color: var(--hx-ink-900); }

a { color: var(--text-link); text-decoration: none; }

/* ---- Display / heading helpers ---- */
.hx-display {
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  letter-spacing: var(--tk-display-2);
  line-height: var(--lh-display-2);
  text-transform: none;
}
.hx-h1 { font: var(--fw-bold) var(--fs-h1)/var(--lh-h1) var(--font-sans); letter-spacing: var(--tk-h1); }
.hx-h2 { font: var(--fw-bold) var(--fs-h2)/var(--lh-h2) var(--font-sans); letter-spacing: var(--tk-h2); }

/* ---- Mono metadata ---- */
.hx-mono { font-family: var(--font-mono); font-size: var(--fs-mono); }

/* ---- Blueprint grid background ---- */
.hx-grid {
  background-image: var(--grid-bg);
  background-size: var(--grid-size) var(--grid-size);
}

/* ---- Corner brackets (structural framing) ---- */
.hx-bracket { position: relative; }
.hx-bracket::before,
.hx-bracket::after {
  content: ""; position: absolute; width: 10px; height: 10px;
  border-color: var(--accent); border-style: solid;
}
.hx-bracket::before { top: -1px; left: -1px; border-width: var(--bw-strong) 0 0 var(--bw-strong); }
.hx-bracket::after  { bottom: -1px; right: -1px; border-width: 0 var(--bw-strong) var(--bw-strong) 0; }

/* Source: /_ds/holonomix-design-system-178e9cdb-465d-4fec-9631-6fe3f59f6f8c/styles.css */
/* ==================================================================
   HolonomiX Design System - global entry point
   ------------------------------------------------------------------
   "No one pulled the data lever."
   Consumers link THIS file only. It is an @import manifest; all real
   rules live in the token files below. Order matters: fonts → colors
   → typography → spacing → effects → base.
   ================================================================== */
/* Source: /_ds/holonomix-design-system-178e9cdb-465d-4fec-9631-6fe3f59f6f8c/tokens/fonts.css */
/* HolonomiX webfonts - self-hosted (Archivo, Archivo Expanded, IBM Plex Mono) */

/* vietnamese */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 100%;
  font-display: swap;
  src: url("/assets/fonts/archivo-400-vietnamese.fca5a1ef.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

/* latin-ext */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 100%;
  font-display: swap;
  src: url("/assets/fonts/archivo-400-latin-ext.c5e41aa1.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 100%;
  font-display: swap;
  src: url("/assets/fonts/archivo-400-latin.cd56e2ec.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* cyrillic-ext */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/ibm-plex-mono-400-cyrillic-ext.89f877e2.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

/* cyrillic */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/ibm-plex-mono-400-cyrillic.2f3900b1.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* vietnamese */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/ibm-plex-mono-400-vietnamese.4674a617.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

/* latin-ext */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/ibm-plex-mono-400-latin-ext.8450d594.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/ibm-plex-mono-400-latin.79936b18.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* cyrillic-ext */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/ibm-plex-mono-500-cyrillic-ext.a1a15515.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

/* cyrillic */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/ibm-plex-mono-500-cyrillic.42375444.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* vietnamese */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/ibm-plex-mono-500-vietnamese.bec18f63.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

/* latin-ext */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/ibm-plex-mono-500-latin-ext.fa8d8838.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/ibm-plex-mono-500-latin.b1c8a895.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* cyrillic-ext */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/ibm-plex-mono-600-cyrillic-ext.f3365e9c.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

/* cyrillic */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/ibm-plex-mono-600-cyrillic.2a814d62.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* vietnamese */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/ibm-plex-mono-600-vietnamese.ebd7c523.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

/* latin-ext */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/ibm-plex-mono-600-latin-ext.f2fe87d5.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/ibm-plex-mono-600-latin.5a2ce779.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* cyrillic-ext */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/ibm-plex-mono-700-cyrillic-ext.3a917635.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

/* cyrillic */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/ibm-plex-mono-700-cyrillic.6e7d2281.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* vietnamese */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/ibm-plex-mono-700-vietnamese.fc3a5296.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

/* latin-ext */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/ibm-plex-mono-700-latin-ext.a10c1459.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/ibm-plex-mono-700-latin.59952787.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: /_ds/holonomix-design-system-178e9cdb-465d-4fec-9631-6fe3f59f6f8c/tokens/colors.css */
/* HolonomiX - Color tokens
   ==================================================================
   High-contrast monochrome foundation + a single sharp accent.
   Base scale = raw values. Semantic aliases below map to light/dark.
   The brand lives at the extremes: true black, true white, hairlines
   in between, and "Teal" used surgically for signal & energy.
*/

:root {
  /* ---- Monochrome ramp (ink → paper) ---- */
  --hx-black:      #000000;
  --hx-ink-900:    #0A0B0D;   /* page bg, dark */
  --hx-ink-800:    #121418;
  --hx-ink-700:    #1A1D22;
  --hx-ink-600:    #262A31;   /* raised surface, dark */
  --hx-ink-500:    #343942;   /* hairline border, dark */
  --hx-gray-400:   #5B626C;
  --hx-gray-300:   #8A919B;   /* secondary text */
  --hx-gray-200:   #B9BEC6;
  --hx-gray-150:   #D2D6DC;
  --hx-gray-100:   #E4E7EB;   /* hairline border, light */
  --hx-paper-100:  #F1F3F5;   /* raised surface, light */
  --hx-paper-50:   #F8F9FA;
  --hx-white:      #FFFFFF;

  /* ---- Teal: the one sharp accent. Reads on black AND white. ---- */
  --hx-teal:     #0FC2B0;  /* primary accent - teal */
  --hx-teal-600: #0A9183;  /* hover on light (darker) */
  --hx-teal-300: #4FE3D3;  /* hover on dark (lighter) */
  --hx-teal-100: #C6F5EF;
  --hx-teal-glow: rgba(15, 194, 176, 0.34);
  --hx-teal-700: #04766B;  /* AA text on white - 5.50:1, hue-locked to teal 174deg (HX extension, links on light) */
  --hx-teal-800: #035E55;  /* hover for teal-700 on light - 7.09:1 (HX extension) */

  /* ---- Signal (semantic status) ---- */
  --hx-pos:   #1FCB6B;   /* converged / healthy */
  --hx-warn:  #FFB020;   /* drift / attention */
  --hx-neg:   #FF4D4D;   /* diverged / error */
  --hx-info:  #2BD4F5;   /* blueprint cyan - info / links */

  /* ---- Data-viz categorical (structural, no purple) ---- */
  --hx-viz-1: #0FC2B0;   /* teal (accent) */
  --hx-viz-2: #2BD4F5;   /* cyan */
  --hx-viz-3: #FF4D6E;   /* magenta-red */
  --hx-viz-4: #FFB020;   /* amber */
  --hx-viz-5: #8AF5C0;   /* mint */
  --hx-viz-6: #B9BEC6;   /* steel */
}

/* ================= SEMANTIC - LIGHT (default) ================= */
:root,
[data-theme="light"] {
  --surface-page:     var(--hx-white);
  --surface-raised:   var(--hx-paper-50);
  --surface-sunken:   var(--hx-paper-100);
  --surface-inverse:  var(--hx-ink-900);
  --surface-accent:   var(--hx-teal);

  --text-primary:     var(--hx-ink-900);
  --text-secondary:   var(--hx-gray-400);
  --text-muted:       var(--hx-gray-300);
  --text-inverse:     var(--hx-white);
  --text-on-accent:   var(--hx-ink-900);
  --text-link:        var(--hx-ink-900);

  --border-hairline:  var(--hx-gray-100);
  --border-default:   var(--hx-gray-150);
  --border-strong:    var(--hx-ink-900);
  --border-accent:    var(--hx-teal);

  --grid-line:        rgba(10, 11, 13, 0.06);  /* blueprint background */
  --grid-tick:        rgba(10, 11, 13, 0.18);

  --accent:           var(--hx-teal);
  --accent-hover:     var(--hx-teal-600);
  --accent-contrast:  var(--hx-ink-900);

  --text-link-accent:       var(--hx-teal-700);
  --text-link-accent-hover: var(--hx-teal-800);
}

/* ================= SEMANTIC - DARK ================= */
[data-theme="dark"] {
  --surface-page:     var(--hx-ink-900);
  --surface-raised:   var(--hx-ink-800);
  --surface-sunken:   var(--hx-black);
  --surface-inverse:  var(--hx-white);
  --surface-accent:   var(--hx-teal);

  --text-primary:     var(--hx-white);
  --text-secondary:   var(--hx-gray-300);
  --text-muted:       var(--hx-gray-400);
  --text-inverse:     var(--hx-ink-900);
  --text-on-accent:   var(--hx-ink-900);
  --text-link:        var(--hx-white);

  --border-hairline:  var(--hx-ink-600);
  --border-default:   var(--hx-ink-500);
  --border-strong:    var(--hx-gray-200);
  --border-accent:    var(--hx-teal);

  --grid-line:        rgba(255, 255, 255, 0.05);
  --grid-tick:        rgba(255, 255, 255, 0.16);

  --accent:           var(--hx-teal);
  --accent-hover:     var(--hx-teal-300);
  --accent-contrast:  var(--hx-ink-900);

  --text-link-accent:       var(--hx-teal);
  --text-link-accent-hover: var(--hx-teal-300);
}

/* Source: /_ds/holonomix-design-system-178e9cdb-465d-4fec-9631-6fe3f59f6f8c/tokens/typography.css */
/* HolonomiX - Typography tokens
   ==================================================================
   Three voices:
     --font-display  Archivo Expanded - structural headlines, wide & bold
     --font-sans     Archivo          - UI & body
     --font-mono     IBM Plex Mono    - data, eyebrows, coordinates, code
   Numbers, labels and metadata default to MONO. That is the brand's
   "structure" voice: everything measured reads like an instrument.
*/

:root {
  /* ---- Families ---- */
  --font-display: 'Archivo Expanded', 'Archivo', system-ui, sans-serif;
  --font-sans:    'Archivo', system-ui, -apple-system, sans-serif;
  --font-mono:    'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* ---- Weights ---- */
  --fw-regular: 400; /* @kind font */
  --fw-medium:  500; /* @kind font */
  --fw-semibold:600; /* @kind font */
  --fw-bold:    700; /* @kind font */
  --fw-black:   800; /* @kind font */

  /* ---- Display scale (Archivo Expanded) ---- */
  --fs-display-1: 96px;  --lh-display-1: 0.96; /* @kind font */  --tk-display-1: -0.03em;  /* @kind font */
  --fs-display-2: 68px;  --lh-display-2: 0.98; /* @kind font */  --tk-display-2: -0.025em; /* @kind font */
  --fs-display-3: 48px;  --lh-display-3: 1.02; /* @kind font */  --tk-display-3: -0.02em;  /* @kind font */

  /* ---- Headings (Archivo) ---- */
  --fs-h1: 36px;  --lh-h1: 1.08; /* @kind font */  --tk-h1: -0.015em; /* @kind font */
  --fs-h2: 28px;  --lh-h2: 1.12; /* @kind font */  --tk-h2: -0.01em;  /* @kind font */
  --fs-h3: 22px;  --lh-h3: 1.18; /* @kind font */  --tk-h3: -0.01em;  /* @kind font */
  --fs-h4: 18px;  --lh-h4: 1.25; /* @kind font */  --tk-h4: 0;       /* @kind font */

  /* ---- Body (Archivo) ---- */
  --fs-body-lg: 18px;  --lh-body-lg: 1.55; /* @kind font */
  --fs-body:    15px;  --lh-body:    1.6;  /* @kind font */
  --fs-body-sm: 13px;  --lh-body-sm: 1.5;  /* @kind font */

  /* ---- Mono / labels (IBM Plex Mono) ---- */
  --fs-mono:     13px;  --lh-mono: 1.5;        /* @kind font */
  --fs-mono-sm:  12px;  --lh-mono-sm: 1.45;     /* @kind font */
  --fs-eyebrow:  11px;  --tk-eyebrow: 0.22em;   /* @kind font */
  --fs-caption:  11px;  --lh-caption: 1.4;      /* @kind font */

  /* ---- Semantic roles ---- */
  --type-display:  var(--fw-black)    var(--fs-display-2)/var(--lh-display-2) var(--font-display); /* @kind font */
  --type-h1:       var(--fw-bold)     var(--fs-h1)/var(--lh-h1) var(--font-sans); /* @kind font */
  --type-body:     var(--fw-regular)  var(--fs-body)/var(--lh-body) var(--font-sans); /* @kind font */
  --type-eyebrow:  var(--fw-medium)   var(--fs-eyebrow) var(--font-mono); /* @kind font */
}

/* Source: /_ds/holonomix-design-system-178e9cdb-465d-4fec-9631-6fe3f59f6f8c/tokens/spacing.css */
/* HolonomiX - Spacing & layout tokens
   ==================================================================
   Strict 4px lattice. Everything snaps to the grid - the layout IS
   the structure. Containers and gutters are fixed so columns align
   across surfaces like a coordinate system.
*/

:root {
  --space-0:  0px;
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;

  /* ---- Layout ---- */
  --gutter:        24px;
  --container-max: 1280px;
  --container-pad: 32px;
  --section-y:     96px;   /* vertical rhythm between major sections */

  /* ---- Grid module (the lattice) ---- */
  --module: 8px;          /* base unit of the visible blueprint grid */
  --rail:   64px;         /* sidebar / rail width unit */
}

/* Source: /_ds/holonomix-design-system-178e9cdb-465d-4fec-9631-6fe3f59f6f8c/tokens/effects.css */
/* HolonomiX - Effects: radii, borders, shadows, motion, texture
   ==================================================================
   The brand is FLAT and STRUCTURAL. Corners are near-sharp. Elevation
   is communicated with hairline borders and faint accent glow, not
   soft drop shadows. Motion is fast, linear-ish, never bouncy.
*/

:root {
  /* ---- Radii (sharp by default) ---- */
  --radius-none: 0px;
  --radius-xs:   2px;
  --radius-sm:   3px;
  --radius-md:   5px;
  --radius-lg:   8px;
  --radius-pill: 999px;

  /* ---- Borders ---- */
  --bw-hair:   1px;   /* @kind spacing */
  --bw-strong: 1.5px; /* @kind spacing */
  --bw-heavy:  2px;   /* @kind spacing */

  /* ---- Shadows (used sparingly; mostly on light) ---- */
  --shadow-none: none;
  --shadow-sm:  0 1px 2px rgba(10,11,13,0.06), 0 0 0 1px rgba(10,11,13,0.04);
  --shadow-md:  0 4px 16px rgba(10,11,13,0.08), 0 0 0 1px rgba(10,11,13,0.05);
  --shadow-lg:  0 16px 48px rgba(10,11,13,0.16), 0 0 0 1px rgba(10,11,13,0.06);
  --shadow-accent: 0 0 0 1px var(--hx-teal), 0 0 24px var(--hx-teal-glow);

  /* ---- Motion ---- */
  --ease-out:   cubic-bezier(0.22, 0.61, 0.36, 1);   /* @kind other */
  --ease-in-out:cubic-bezier(0.65, 0.05, 0.36, 1);   /* @kind other */
  --ease-snap:  cubic-bezier(0.2, 0.9, 0.1, 1);      /* @kind other */
  --dur-instant: 80ms;  /* @kind other */
  --dur-fast:    140ms; /* @kind other */
  --dur-base:    220ms; /* @kind other */
  --dur-slow:    360ms; /* @kind other */

  /* ---- Blueprint texture (use as background-image) ---- */
  --grid-size: 32px; /* @kind spacing */
  --grid-bg:
    linear-gradient(var(--grid-line) var(--bw-hair), transparent var(--bw-hair)),
    linear-gradient(90deg, var(--grid-line) var(--bw-hair), transparent var(--bw-hair)); /* @kind other */

  /* ---- Focus ring ---- */
  --focus-ring: 0 0 0 2px var(--surface-page), 0 0 0 4px var(--hx-teal); /* @kind shadow */
}

/* Source: /_ds/holonomix-design-system-178e9cdb-465d-4fec-9631-6fe3f59f6f8c/tokens/base.css */
/* HolonomiX - Base layer & brand utilities
   ==================================================================
   Element defaults + a few structural helpers the brand leans on:
   blueprint grid backgrounds, eyebrow/coordinate labels, corner
   brackets. Kept intentionally small.
*/

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font: var(--type-body);
  color: var(--text-primary);
  background: var(--surface-page);
  font-feature-settings: "ss01", "cv01";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--hx-teal); color: var(--hx-ink-900); }

a { color: var(--text-link); text-decoration: none; }

/* ---- Display / heading helpers ---- */
.hx-display {
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  letter-spacing: var(--tk-display-2);
  line-height: var(--lh-display-2);
  text-transform: none;
}
.hx-h1 { font: var(--fw-bold) var(--fs-h1)/var(--lh-h1) var(--font-sans); letter-spacing: var(--tk-h1); }
.hx-h2 { font: var(--fw-bold) var(--fs-h2)/var(--lh-h2) var(--font-sans); letter-spacing: var(--tk-h2); }

/* ---- Mono metadata ---- */
.hx-mono { font-family: var(--font-mono); font-size: var(--fs-mono); }

/* ---- Blueprint grid background ---- */
.hx-grid {
  background-image: var(--grid-bg);
  background-size: var(--grid-size) var(--grid-size);
}

/* ---- Corner brackets (structural framing) ---- */
.hx-bracket { position: relative; }
.hx-bracket::before,
.hx-bracket::after {
  content: ""; position: absolute; width: 10px; height: 10px;
  border-color: var(--accent); border-style: solid;
}
.hx-bracket::before { top: -1px; left: -1px; border-width: var(--bw-strong) 0 0 var(--bw-strong); }
.hx-bracket::after  { bottom: -1px; right: -1px; border-width: 0 var(--bw-strong) var(--bw-strong) 0; }

/* Source: /hx-responsive.css */
/* ==========================================================================
   HolonomiX responsive layer
   --------------------------------------------------------------------------
   Loaded by every page after the design-system stylesheets. The pages are
   authored with inline styles; media queries cannot be. So this file is the
   one place breakpoint behaviour lives, and it addresses pages only through
   a small, named set of data-attribute hooks:

     data-hx-navbar      the sticky header's 1240 container
     data-hx-navmain     header nav group 1 (Products / Technology / Industries)
     data-hx-navutil     header nav group 2 (About / Contact / Glossary | Docs / App / Verification)
     data-hx-navtoggle   the disclosure button that replaces both groups when compact
     data-hx-mobilenav   the disclosure panel (built at runtime by nav-dd.js, appended to <body>)
     data-hx-shell       a max-width:1240px page container (gutter control)
     data-hx-shell="section"  ... that is also a section body (vertical rhythm control)
     data-hx-cells="N"   a bordered cell grid of N equal columns, internal hairlines
     data-hx-cells="3-1" a 3-up strip that must never split 2+1 (an ordered sequence);
                         holds 3 columns to 640, then goes straight to 1
     data-hx-split       an asymmetric two-column content split (copy + figure/card)
     data-hx-row         a label/value row grid (glossary, ledger, plate spec)
     data-hx-relaxwrap   a headline that is white-space:nowrap by design at desktop

   BREAKPOINT SPEC
     >=1241   full layout. 1240 shell, 32px gutters, all grids as authored.
     1024     shell goes fluid. Gutters hold at 32px.
     1023     header nav collapses to the disclosure panel.
              Cell grids of 3+ reflow to 2 columns, internal hairlines re-derived.
     899      two-column splits stack. Gutters 24px. nowrap headlines relax.
     767      cell grids reflow to 1 column, internal hairlines re-derived.
     639      gutters 20px. Section vertical padding 64px. Label/value rows stack.
              Footer link columns stack.
     Minimum supported width: 360px.

   Rules use !important because they override inline styles. That is the
   contract of this file and is not a pattern to copy elsewhere.
   ========================================================================== */

/* ---- skip link: off-screen until focused ------------------------------ */
[data-hx-skip] {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  font-family: var(--font-sans); font-weight: 600; font-size: 14px;
  text-decoration: none;
}
[data-hx-skip]:focus {
  left: 8px; top: 8px; padding: 11px 16px;
  background: #0FC2B0; color: #000000; border-radius: 2px;
  outline: 2px solid #FFFFFF; outline-offset: 2px;
}

/* ---- header: disclosure button is desktop-hidden ----------------------- */
[data-hx-navtoggle] { display: none; }

/* ---- runtime disclosure panel (styled here, built in nav-dd.js) --------
   The panel is appended to <body>, outside the page's data-theme="dark"
   root, so it carries literal colors rather than theme tokens.           */
[data-hx-mobilenav] {
  position: fixed; top: 64px; left: 0; right: 0; z-index: 59;
  display: none; flex-direction: column;
  max-height: calc(100vh - 64px); overflow-y: auto;
  padding: 6px 20px 22px;
  background: rgba(10, 11, 13, 0.98);
  backdrop-filter: blur(14px) saturate(1.2);
  border-bottom: 1px solid rgba(255, 255, 255, 0.10);
}
[data-hx-mobilenav][data-open] { display: flex; }
[data-hx-mobilenav] a {
  font-family: var(--font-sans); font-size: 16px; font-weight: 500;
  color: #E6E9ED; text-decoration: none;
  display: block; padding: 14px 4px; min-height: 44px; box-sizing: border-box;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  transition: color .12s ease;
}
[data-hx-mobilenav] a:hover { color: #FFFFFF; }
[data-hx-mobilenav] a:focus-visible { outline: 2px solid #0FC2B0; outline-offset: 2px; border-radius: 2px; }
[data-hx-mobilenav] a[data-hx-sub] { padding-left: 20px; font-size: 15px; color: #A9AFB8; }
[data-hx-mobilenav] a[aria-current="page"] { color: #FFFFFF; }
[data-hx-mobilegroup] + [data-hx-mobilegroup] {
  margin-top: 14px; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, 0.10);
}
@media (min-width: 1024px) { [data-hx-mobilenav] { display: none !important; } }

/* ---- 1023: header collapses ------------------------------------------- */
@media (max-width: 1023px) {
  [data-hx-navmain], [data-hx-navutil] { display: none !important; }
  [data-hx-navtoggle] { display: inline-flex !important; }
}

/* ---- 1023: cell grids of 3+ reflow to two columns ---------------------- */
@media (max-width: 1023px) and (min-width: 768px) {
  [data-hx-cells="3"], [data-hx-cells="4"],
  [data-hx-cells="5"], [data-hx-cells="6"] { grid-template-columns: repeat(2, 1fr) !important; }
  /* spans authored for the desktop column count are meaningless at 2 */
  [data-hx-cells] > * { grid-column: auto !important; grid-row: auto !important; }
  /* re-derive the internal hairlines for a 2-up flow */
  [data-hx-cells="3"] > *, [data-hx-cells="4"] > *,
  [data-hx-cells="5"] > *, [data-hx-cells="6"] > * {
    border-top: 1px solid var(--border-hairline) !important;
    border-left: 1px solid var(--border-hairline) !important;
  }
  [data-hx-cells="3"] > *:nth-child(odd), [data-hx-cells="4"] > *:nth-child(odd),
  [data-hx-cells="5"] > *:nth-child(odd), [data-hx-cells="6"] > *:nth-child(odd) { border-left: 0 !important; }
  [data-hx-cells="3"] > *:nth-child(-n+2), [data-hx-cells="4"] > *:nth-child(-n+2),
  [data-hx-cells="5"] > *:nth-child(-n+2), [data-hx-cells="6"] > *:nth-child(-n+2) { border-top: 0 !important; }
}

/* ---- 899: splits stack, gutters tighten, nowrap relaxes --------------- */
@media (max-width: 899px) {
  [data-hx-shell] { padding-left: 24px !important; padding-right: 24px !important; }
  [data-hx-split] { grid-template-columns: 1fr !important; gap: 36px !important; }
  [data-hx-relaxwrap] { white-space: normal !important; }
}

/* ---- 767: cell grids go single column --------------------------------- */
@media (max-width: 767px) {
  [data-hx-cells]:not([data-hx-cells="3-1"]) { grid-template-columns: 1fr !important; }
  [data-hx-cells]:not([data-hx-cells="3-1"]) > * {
    grid-column: auto !important; grid-row: auto !important;
    border-left: 0 !important;
    border-top: 1px solid var(--border-hairline) !important;
  }
  [data-hx-cells]:not([data-hx-cells="3-1"]) > *:first-child { border-top: 0 !important; }
}

/* ---- 639: ordered 3-up strips go straight to one column --------------- */
@media (max-width: 639px) {
  [data-hx-cells="3-1"] { grid-template-columns: 1fr !important; }
  [data-hx-cells="3-1"] > * {
    border-left: 0 !important;
    border-top: 1px solid var(--border-hairline) !important;
  }
  [data-hx-cells="3-1"] > *:first-child { border-top: 0 !important; }
}

/* ---- 639: narrowest supported band ------------------------------------ */
@media (max-width: 639px) {
  [data-hx-shell] { padding-left: 20px !important; padding-right: 20px !important; }
  [data-hx-shell="section"] { padding-top: 64px !important; padding-bottom: 64px !important; }
  [data-hx-row] { grid-template-columns: 1fr !important; gap: 8px !important; }
  [data-hx-footcols] { gap: 28px !important; }
}

/* ---- anchored rows clear the sticky header ---------------------------- */
[data-hx-row][id] { scroll-margin-top: 88px; }

/* ---- media never overflows its column --------------------------------- */
[data-hx-shell] img { max-width: 100%; }

/* ---- card grids (gapped, self-bordered cards) ------------------------- */
/* data-hx-cards="4": 4 up on desktop, 2x2 in the mid band, 1 up on phones.
   Distinct from data-hx-cells: these cards own all four borders, so the
   hairline re-derivation must not apply. */
@media (max-width: 1023px) and (min-width: 640px) {
  [data-hx-cards="4"] { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 639px) {
  [data-hx-cards="4"] { grid-template-columns: 1fr !important; }
}

/* ---- artifact ledger: stage | artifacts | value -> stacked on narrow --- */
@media (max-width: 899px) {
  [data-hx-artifacts] > [data-hx-row] { grid-template-columns: 1fr !important; gap: 12px !important; }
}

/* ---- cells="4-tight": a compact numeric ladder ------------------------ */
/* 4 narrow cells (a scale ladder, ~118px each) hold four columns well past
   1023, so they are exempt from the 3+ -> 2-up rule and reflow later. */
@media (min-width: 560px) {
  [data-hx-cells="4-tight"] { grid-template-columns: repeat(4, 1fr) !important; }
  [data-hx-cells="4-tight"] > * { border-top: 0 !important; }
  [data-hx-cells="4-tight"] > * + * { border-left: 1px solid var(--border-hairline) !important; }
}
@media (max-width: 559px) {
  [data-hx-cells="4-tight"] { grid-template-columns: repeat(2, 1fr) !important; }
  [data-hx-cells="4-tight"] > * { border-left: 1px solid var(--border-hairline) !important; border-top: 1px solid var(--border-hairline) !important; }
  [data-hx-cells="4-tight"] > *:nth-child(odd) { border-left: 0 !important; }
  [data-hx-cells="4-tight"] > *:nth-child(-n+2) { border-top: 0 !important; }
}

/* ---- cells-lastspan: odd cell count in a 2-up reflow ------------------ */
/* An odd number of cells leaves the last one orphaned at half width once the
   authored spans are cleared. Let it span the full row instead. */
@media (max-width: 1023px) and (min-width: 768px) {
  [data-hx-cells-lastspan] > *:last-child { grid-column: 1 / -1 !important; border-left: 0 !important; }
}