/* =====================================================================
   DESIGN TOKENS
   Single source of truth for colour, type, radius and motion.
   Colour rule 60 / 30 / 10:
     60  base surfaces : --color-bg + --color-bg-alt (alternating sections)
     30  secondary     : --color-surface / --color-fg, neutral greys for text & lines
     10  accent        : --acc, ONLY primary CTAs, focus ring, status dot,
                         progress and data highlights (set from js/config.js)
   Naming
     --color-fg-aNN     foreground at NN% opacity (white on dark / black on light)
     --color-bg-aNN     page background at NN% opacity
     --color-shade-aNN  black overlay on dark, white overlay on light
     --color-neutral-N  grey ramp; N = lightness step in the dark theme
     --color-warm-*     warm stone greys
   Themes: :root = dark. .mv.light = light. .inv flips a block to the
   opposite theme. Elements listed under "always dark" keep dark tokens.
   ===================================================================== */
@layer tokens, site, elements;

@layer tokens {
:root {
  /* colour, dark theme (default) */
  --color-bg: #0A0A0A;
  --color-bg-alt: #F5F5F3;
  --color-surface: #161616;
  --color-fg: #FFFFFF;
  --color-bg-a75: rgba(10,10,10,.75);
  --color-fg-a08: rgba(255,255,255,.08);
  --color-surface-2: #1A1A1A;
  --color-fg-a12: rgba(255,255,255,.12);
  --color-text-muted: rgba(255,255,255,.55);
  --color-fg-a30: rgba(255,255,255,.3);
  --color-bg-a30: rgba(10,10,10,.3);
  --color-shade: #000;
  --color-shade-a25: rgba(0,0,0,.25);
  --color-bg-a35: rgba(10,10,10,.35);
  --color-fg-a10: rgba(255,255,255,.1);
  --color-fg-a25: rgba(255,255,255,.25);
  --color-bg-a14: rgba(10,10,10,.14);
  --color-neutral-18: #121212;
  --color-bg-a18: rgba(10,10,10,.18);
  --color-fg-a06: rgba(255,255,255,.06);
  --color-shade-a35: rgba(0,0,0,.35);
  --color-text-subtle: rgba(255,255,255,.6);
  --color-fg-a16: rgba(255,255,255,.16);
  --color-neutral-5: #050505;
  --color-neutral-42: #2A2A2A;
  --color-bg-a25: rgba(10,10,10,.25);
  --color-warm-500: #8A877F;
  --color-fg-a14: rgba(255,255,255,.14);
  --color-fg-a70: rgba(255,255,255,.7);
  --color-bg-a20: rgba(10,10,10,.2);
  --color-bg-a50: rgba(10,10,10,.5);
  --color-fg-a35: rgba(255,255,255,.35);
  --color-fg-a00: rgba(255,255,255,0);
  --color-bg-a60: rgba(10,10,10,.6);
  --color-shade-a20: rgba(0,0,0,.2);
  --color-shade-a50: rgba(0,0,0,.5);
  --color-neutral-20: #141414;
  --color-shade-a45: rgba(0,0,0,.45);
  --color-neutral-31: #1F1F1F;
  --color-fg-a05: rgba(255,255,255,.05);
  --color-shade-a40: rgba(0,0,0,.4);
  --color-text-faint: rgba(255,255,255,.5);
  --color-glass: rgba(28,28,28,.92);
  --color-fg-a80: rgba(255,255,255,.8);
  --color-bg-a08: rgba(10,10,10,.08);
  --color-bg-a28: rgba(10,10,10,.28);
  --color-fg-a85: rgba(255,255,255,.85);
  --color-fg-a18: rgba(255,255,255,.18);
  --color-shade-a22: rgba(0,0,0,.22);
  --color-shade-a08: rgba(0,0,0,.08);
  --color-fg-a20: rgba(255,255,255,.2);
  --color-fg-a75: rgba(255,255,255,.75);
  --color-bg-a06: rgba(10,10,10,.06);
  --color-gray-a18: rgba(128,128,128,.18);
  --color-fg-a15: rgba(255,255,255,.15);
  --color-neutral-19: #131313;
  --color-fg-a82: rgba(255,255,255,.82);
  --color-bg-a45: rgba(10,10,10,.45);
  --color-bg-a00: rgba(10,10,10,0);
  --color-warm-700: #45433E;
  --color-fg-a65: rgba(255,255,255,.65);
  --color-warm-600: #55534D;
  --color-warm-100: #E7E5DD;
  --color-neutral-44: #2C2C2C;
  --color-neutral-58: #3A3A3A;
  --color-bg-a15: rgba(10,10,10,.15);
  --color-neutral-30: #1E1E1E;
  --color-warm-50-a85: rgba(244,243,238,.85);
  --color-warm-900: #2A2925;

  /* typography */
  --font-display: 'Instrument Sans', 'Geist', sans-serif;
  --font-body: 'Geist', ui-sans-serif, system-ui, sans-serif;
  --font-mono: 'Geist Mono', ui-monospace, monospace;
  --fs-xs: 12px;
  --fs-caption: 13px;
  --fs-sm: 14px;
  --fs-body-sm: 15px;
  --fs-base: 16px;
  --fs-md: 18px;
  --fs-lg: 20px;
  --fs-xl: 24px;
  --fs-2xl: 28px;
  --fs-3xl: 36px;
  --fs-4xl: 40px;

  /* radius */
  --radius-xs: 3px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-xl: 28px;
  --radius-pill: 999px;
  --radius-round: 50%;
}

/* motion */
.mv {
  --intro-delay: 2.6s;          /* hero entrance waits for the intro */
  --ease-out: cubic-bezier(.2,.8,.2,1);
  --ease-pop: cubic-bezier(.3,1.6,.5,1);
}
.mv.nointro { --intro-delay: .15s; }

/* colour, light theme */
.mv.light {
  --color-bg: #F5F5F5;
  --color-bg-alt: #0A0A0C;
  --color-surface: #E9E9E9;
  --color-fg: #000000;
  --color-bg-a75: rgba(245,245,245,.75);
  --color-fg-a08: rgba(0,0,0,0.08);
  --color-surface-2: #E5E5E5;
  --color-fg-a12: rgba(0,0,0,0.12);
  --color-text-muted: rgba(0,0,0,0.71);
  --color-fg-a30: rgba(0,0,0,0.3);
  --color-bg-a30: rgba(245,245,245,.3);
  --color-shade: #FFFFFF;
  --color-shade-a25: rgba(255,255,255,.25);
  --color-bg-a35: rgba(245,245,245,.35);
  --color-fg-a10: rgba(0,0,0,0.1);
  --color-fg-a25: rgba(0,0,0,0.25);
  --color-bg-a14: rgba(245,245,245,.14);
  --color-neutral-18: #EDEDED;
  --color-bg-a18: rgba(245,245,245,.18);
  --color-fg-a06: rgba(0,0,0,0.06);
  --color-shade-a35: rgba(255,255,255,.35);
  --color-text-subtle: rgba(0,0,0,0.72);
  --color-fg-a16: rgba(0,0,0,0.16);
  --color-neutral-5: #FAFAFA;
  --color-neutral-42: #D5D5D5;
  --color-bg-a25: rgba(245,245,245,.25);
  --color-warm-500: #757880;
  --color-fg-a14: rgba(0,0,0,0.14);
  --color-fg-a70: rgba(0,0,0,0.7);
  --color-bg-a20: rgba(245,245,245,.2);
  --color-bg-a50: rgba(245,245,245,.5);
  --color-fg-a35: rgba(0,0,0,0.35);
  --color-fg-a00: rgba(0,0,0,0);
  --color-bg-a60: rgba(245,245,245,.6);
  --color-shade-a20: rgba(255,255,255,.2);
  --color-shade-a50: rgba(255,255,255,.5);
  --color-neutral-20: #EBEBEB;
  --color-shade-a45: rgba(255,255,255,.45);
  --color-neutral-31: #E0E0E0;
  --color-fg-a05: rgba(0,0,0,0.05);
  --color-shade-a40: rgba(255,255,255,.4);
  --color-text-faint: rgba(0,0,0,0.66);
  --color-glass: rgba(227,227,227,.92);
  --color-fg-a80: rgba(0,0,0,0.8);
  --color-bg-a08: rgba(245,245,245,.08);
  --color-bg-a28: rgba(245,245,245,.28);
  --color-fg-a85: rgba(0,0,0,0.85);
  --color-fg-a18: rgba(0,0,0,0.18);
  --color-shade-a22: rgba(255,255,255,.22);
  --color-shade-a08: rgba(255,255,255,.08);
  --color-fg-a20: rgba(0,0,0,0.2);
  --color-fg-a75: rgba(0,0,0,0.75);
  --color-bg-a06: rgba(245,245,245,.06);
  --color-gray-a18: rgba(127,127,127,.18);
  --color-fg-a15: rgba(0,0,0,0.15);
  --color-neutral-19: #ECECEC;
  --color-fg-a82: rgba(0,0,0,0.82);
  --color-bg-a45: rgba(245,245,245,.45);
  --color-bg-a00: rgba(245,245,245,0);
  --color-warm-700: #BABCC1;
  --color-fg-a65: rgba(0,0,0,0.65);
  --color-warm-600: #AAACB2;
  --color-warm-100: #181A22;
  --color-neutral-44: #D3D3D3;
  --color-neutral-58: #C5C5C5;
  --color-bg-a15: rgba(245,245,245,.15);
  --color-neutral-30: #E1E1E1;
  --color-warm-50-a85: rgba(11,12,17,.85);
  --color-warm-900: #D5D6DA;
}

/* always dark, even in light mode */
.mv.light :is(.intro,.cur,.cs,.cs-back,.b-pri,.on-acc,.tlogo.has) {
  --color-bg: #0A0A0A;
  --color-bg-alt: #F5F5F3;
  --color-surface: #161616;
  --color-fg: #FFFFFF;
  --color-bg-a75: rgba(10,10,10,.75);
  --color-fg-a08: rgba(255,255,255,.08);
  --color-surface-2: #1A1A1A;
  --color-fg-a12: rgba(255,255,255,.12);
  --color-text-muted: rgba(255,255,255,.55);
  --color-fg-a30: rgba(255,255,255,.3);
  --color-bg-a30: rgba(10,10,10,.3);
  --color-shade: #000;
  --color-shade-a25: rgba(0,0,0,.25);
  --color-bg-a35: rgba(10,10,10,.35);
  --color-fg-a10: rgba(255,255,255,.1);
  --color-fg-a25: rgba(255,255,255,.25);
  --color-bg-a14: rgba(10,10,10,.14);
  --color-neutral-18: #121212;
  --color-bg-a18: rgba(10,10,10,.18);
  --color-fg-a06: rgba(255,255,255,.06);
  --color-shade-a35: rgba(0,0,0,.35);
  --color-text-subtle: rgba(255,255,255,.6);
  --color-fg-a16: rgba(255,255,255,.16);
  --color-neutral-5: #050505;
  --color-neutral-42: #2A2A2A;
  --color-bg-a25: rgba(10,10,10,.25);
  --color-warm-500: #8A877F;
  --color-fg-a14: rgba(255,255,255,.14);
  --color-fg-a70: rgba(255,255,255,.7);
  --color-bg-a20: rgba(10,10,10,.2);
  --color-bg-a50: rgba(10,10,10,.5);
  --color-fg-a35: rgba(255,255,255,.35);
  --color-fg-a00: rgba(255,255,255,0);
  --color-bg-a60: rgba(10,10,10,.6);
  --color-shade-a20: rgba(0,0,0,.2);
  --color-shade-a50: rgba(0,0,0,.5);
  --color-neutral-20: #141414;
  --color-shade-a45: rgba(0,0,0,.45);
  --color-neutral-31: #1F1F1F;
  --color-fg-a05: rgba(255,255,255,.05);
  --color-shade-a40: rgba(0,0,0,.4);
  --color-text-faint: rgba(255,255,255,.5);
  --color-glass: rgba(28,28,28,.92);
  --color-fg-a80: rgba(255,255,255,.8);
  --color-bg-a08: rgba(10,10,10,.08);
  --color-bg-a28: rgba(10,10,10,.28);
  --color-fg-a85: rgba(255,255,255,.85);
  --color-fg-a18: rgba(255,255,255,.18);
  --color-shade-a22: rgba(0,0,0,.22);
  --color-shade-a08: rgba(0,0,0,.08);
  --color-fg-a20: rgba(255,255,255,.2);
  --color-fg-a75: rgba(255,255,255,.75);
  --color-bg-a06: rgba(10,10,10,.06);
  --color-gray-a18: rgba(128,128,128,.18);
  --color-fg-a15: rgba(255,255,255,.15);
  --color-neutral-19: #131313;
  --color-fg-a82: rgba(255,255,255,.82);
  --color-bg-a45: rgba(10,10,10,.45);
  --color-bg-a00: rgba(10,10,10,0);
  --color-warm-700: #45433E;
  --color-fg-a65: rgba(255,255,255,.65);
  --color-warm-600: #55534D;
  --color-warm-100: #E7E5DD;
  --color-neutral-44: #2C2C2C;
  --color-neutral-58: #3A3A3A;
  --color-bg-a15: rgba(10,10,10,.15);
  --color-neutral-30: #1E1E1E;
  --color-warm-50-a85: rgba(244,243,238,.85);
  --color-warm-900: #2A2925;
}

/* .inv: inverted block */
.inv {
  --color-bg: #F5F5F5;
  --color-bg-alt: #0A0A0C;
  --color-surface: #E9E9E9;
  --color-fg: #000000;
  --color-bg-a75: rgba(245,245,245,.75);
  --color-fg-a08: rgba(0,0,0,0.08);
  --color-surface-2: #E5E5E5;
  --color-fg-a12: rgba(0,0,0,0.12);
  --color-text-muted: rgba(0,0,0,0.71);
  --color-fg-a30: rgba(0,0,0,0.3);
  --color-bg-a30: rgba(245,245,245,.3);
  --color-shade: #FFFFFF;
  --color-shade-a25: rgba(255,255,255,.25);
  --color-bg-a35: rgba(245,245,245,.35);
  --color-fg-a10: rgba(0,0,0,0.1);
  --color-fg-a25: rgba(0,0,0,0.25);
  --color-bg-a14: rgba(245,245,245,.14);
  --color-neutral-18: #EDEDED;
  --color-bg-a18: rgba(245,245,245,.18);
  --color-fg-a06: rgba(0,0,0,0.06);
  --color-shade-a35: rgba(255,255,255,.35);
  --color-text-subtle: rgba(0,0,0,0.72);
  --color-fg-a16: rgba(0,0,0,0.16);
  --color-neutral-5: #FAFAFA;
  --color-neutral-42: #D5D5D5;
  --color-bg-a25: rgba(245,245,245,.25);
  --color-warm-500: #757880;
  --color-fg-a14: rgba(0,0,0,0.14);
  --color-fg-a70: rgba(0,0,0,0.7);
  --color-bg-a20: rgba(245,245,245,.2);
  --color-bg-a50: rgba(245,245,245,.5);
  --color-fg-a35: rgba(0,0,0,0.35);
  --color-fg-a00: rgba(0,0,0,0);
  --color-bg-a60: rgba(245,245,245,.6);
  --color-shade-a20: rgba(255,255,255,.2);
  --color-shade-a50: rgba(255,255,255,.5);
  --color-neutral-20: #EBEBEB;
  --color-shade-a45: rgba(255,255,255,.45);
  --color-neutral-31: #E0E0E0;
  --color-fg-a05: rgba(0,0,0,0.05);
  --color-shade-a40: rgba(255,255,255,.4);
  --color-text-faint: rgba(0,0,0,0.66);
  --color-glass: rgba(227,227,227,.92);
  --color-fg-a80: rgba(0,0,0,0.8);
  --color-bg-a08: rgba(245,245,245,.08);
  --color-bg-a28: rgba(245,245,245,.28);
  --color-fg-a85: rgba(0,0,0,0.85);
  --color-fg-a18: rgba(0,0,0,0.18);
  --color-shade-a22: rgba(255,255,255,.22);
  --color-shade-a08: rgba(255,255,255,.08);
  --color-fg-a20: rgba(0,0,0,0.2);
  --color-fg-a75: rgba(0,0,0,0.75);
  --color-bg-a06: rgba(245,245,245,.06);
  --color-gray-a18: rgba(127,127,127,.18);
  --color-fg-a15: rgba(0,0,0,0.15);
  --color-neutral-19: #ECECEC;
  --color-fg-a82: rgba(0,0,0,0.82);
  --color-bg-a45: rgba(245,245,245,.45);
  --color-bg-a00: rgba(245,245,245,0);
  --color-warm-700: #BABCC1;
  --color-fg-a65: rgba(0,0,0,0.65);
  --color-warm-600: #AAACB2;
  --color-warm-100: #181A22;
  --color-neutral-44: #D3D3D3;
  --color-neutral-58: #C5C5C5;
  --color-bg-a15: rgba(245,245,245,.15);
  --color-neutral-30: #E1E1E1;
  --color-warm-50-a85: rgba(11,12,17,.85);
  --color-warm-900: #D5D6DA;
  --acct: #3F6300;
}
.mv.light .inv {
  --color-bg: #0A0A0A;
  --color-bg-alt: #F5F5F3;
  --color-surface: #161616;
  --color-fg: #FFFFFF;
  --color-bg-a75: rgba(10,10,10,.75);
  --color-fg-a08: rgba(255,255,255,.08);
  --color-surface-2: #1A1A1A;
  --color-fg-a12: rgba(255,255,255,.12);
  --color-text-muted: rgba(255,255,255,.55);
  --color-fg-a30: rgba(255,255,255,.3);
  --color-bg-a30: rgba(10,10,10,.3);
  --color-shade: #000;
  --color-shade-a25: rgba(0,0,0,.25);
  --color-bg-a35: rgba(10,10,10,.35);
  --color-fg-a10: rgba(255,255,255,.1);
  --color-fg-a25: rgba(255,255,255,.25);
  --color-bg-a14: rgba(10,10,10,.14);
  --color-neutral-18: #121212;
  --color-bg-a18: rgba(10,10,10,.18);
  --color-fg-a06: rgba(255,255,255,.06);
  --color-shade-a35: rgba(0,0,0,.35);
  --color-text-subtle: rgba(255,255,255,.6);
  --color-fg-a16: rgba(255,255,255,.16);
  --color-neutral-5: #050505;
  --color-neutral-42: #2A2A2A;
  --color-bg-a25: rgba(10,10,10,.25);
  --color-warm-500: #8A877F;
  --color-fg-a14: rgba(255,255,255,.14);
  --color-fg-a70: rgba(255,255,255,.7);
  --color-bg-a20: rgba(10,10,10,.2);
  --color-bg-a50: rgba(10,10,10,.5);
  --color-fg-a35: rgba(255,255,255,.35);
  --color-fg-a00: rgba(255,255,255,0);
  --color-bg-a60: rgba(10,10,10,.6);
  --color-shade-a20: rgba(0,0,0,.2);
  --color-shade-a50: rgba(0,0,0,.5);
  --color-neutral-20: #141414;
  --color-shade-a45: rgba(0,0,0,.45);
  --color-neutral-31: #1F1F1F;
  --color-fg-a05: rgba(255,255,255,.05);
  --color-shade-a40: rgba(0,0,0,.4);
  --color-text-faint: rgba(255,255,255,.5);
  --color-glass: rgba(28,28,28,.92);
  --color-fg-a80: rgba(255,255,255,.8);
  --color-bg-a08: rgba(10,10,10,.08);
  --color-bg-a28: rgba(10,10,10,.28);
  --color-fg-a85: rgba(255,255,255,.85);
  --color-fg-a18: rgba(255,255,255,.18);
  --color-shade-a22: rgba(0,0,0,.22);
  --color-shade-a08: rgba(0,0,0,.08);
  --color-fg-a20: rgba(255,255,255,.2);
  --color-fg-a75: rgba(255,255,255,.75);
  --color-bg-a06: rgba(10,10,10,.06);
  --color-gray-a18: rgba(128,128,128,.18);
  --color-fg-a15: rgba(255,255,255,.15);
  --color-neutral-19: #131313;
  --color-fg-a82: rgba(255,255,255,.82);
  --color-bg-a45: rgba(10,10,10,.45);
  --color-bg-a00: rgba(10,10,10,0);
  --color-warm-700: #45433E;
  --color-fg-a65: rgba(255,255,255,.65);
  --color-warm-600: #55534D;
  --color-warm-100: #E7E5DD;
  --color-neutral-44: #2C2C2C;
  --color-neutral-58: #3A3A3A;
  --color-bg-a15: rgba(10,10,10,.15);
  --color-neutral-30: #1E1E1E;
  --color-warm-50-a85: rgba(244,243,238,.85);
  --color-warm-900: #2A2925;
  --acct: var(--acc);
}
}