/* ============================================================
   TIDAL TRIGGER — WEBFONTS (self-hosted, subsetted woff2)

   SUBSTITUTION NOTE (from the design system): Tidal Trigger has no
   bespoke type yet. These are free Google Fonts chosen to match the
   synthwave-arcade brief. Swap for licensed/custom faces when
   available and update the families in tokens/typography.css.

     Audiowide       -> logo / display   (retro-futuristic, rounded)
     Orbitron        -> HUD / scores     (geometric, tabular numerals)
     Rajdhani        -> UI / body        (sporty condensed sans)
     Share Tech Mono -> data / tags      (neon terminal mono)

   Orbitron is a variable face: one file serves weights 400-900.
   Rajdhani ships latin / latin-ext / devanagari subsets per weight;
   unicode-range means a browser only downloads what the page needs.
   ============================================================ */

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

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

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

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

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

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

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

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

@font-face {
  font-family: 'Rajdhani';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/rajdhani-400-devanagari.woff2") format('woff2');
  unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B09;
}

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

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

@font-face {
  font-family: 'Rajdhani';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/fonts/rajdhani-500-devanagari.woff2") format('woff2');
  unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B09;
}

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

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

@font-face {
  font-family: 'Rajdhani';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/fonts/rajdhani-600-devanagari.woff2") format('woff2');
  unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B09;
}

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

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

@font-face {
  font-family: 'Rajdhani';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/fonts/rajdhani-700-devanagari.woff2") format('woff2');
  unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B09;
}

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

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

@font-face {
  font-family: 'Share Tech Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/share-tech-mono-400-latin.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;
}


/* ============================================================
   TIDAL TRIGGER — COLOR TOKENS
   Synthwave neon × tropical surf. Glowing pink oceans,
   laser horizons, electric night skies.
   ============================================================ */

:root {
  /* ---- Base ink (deep violet-black night) ---- */
  --tt-ink-950: #050010;   /* deepest void */
  --tt-ink-900: #0a0320;   /* app background base */
  --tt-ink-850: #110735;   /* raised background */
  --tt-ink-800: #190b46;   /* card / surface */
  --tt-ink-700: #241160;   /* elevated surface */
  --tt-ink-600: #341a82;   /* hairline / border on dark */
  --tt-ink-500: #4a27a8;   /* muted violet line */

  /* ---- Neon primaries ---- */
  --tt-magenta-600: #d6007a;
  --tt-magenta-500: #ff2d95;  /* PRIMARY neon — the "trigger" pink */
  --tt-magenta-400: #ff5cb8;
  --tt-magenta-300: #ff8fd4;

  --tt-cyan-600: #00b8d6;
  --tt-cyan-500: #00eaff;     /* SECONDARY neon — laser cyan */
  --tt-cyan-400: #5cf2ff;
  --tt-cyan-300: #9bf7ff;

  --tt-purple-600: #6a1fd0;
  --tt-purple-500: #9d4bff;   /* electric violet */
  --tt-purple-400: #b97cff;

  --tt-aqua-500: #2bffd0;     /* wave glow / success */
  --tt-aqua-400: #74ffe2;

  /* ---- Sunset (horizon / hero) ---- */
  --tt-sun-orange: #ff7d2e;
  --tt-sun-gold:   #ffc24b;
  --tt-sun-coral:  #ff3d6e;

  /* ---- Score / signal ---- */
  --tt-gold-500:   #ffd84d;   /* score, multipliers, bonus */
  --tt-yellow-300: #fff39b;

  /* ---- Status ---- */
  --tt-danger-500:  #ff2d4f;  /* wipeout / game over */
  --tt-warning-500: #ffc24b;
  --tt-success-500: #2bffd0;
  --tt-info-500:    #00eaff;

  /* ---- Light values (pink-tinted whites for neon text) ---- */
  --tt-white:     #fdf3ff;
  --tt-foam-200:  #e8dcff;    /* soft lavender-white */
  --tt-foam-400:  #b9a8e6;    /* muted lavender */
  --tt-foam-500:  #8a7ac0;    /* dim text */

  /* ============================================================
     SEMANTIC ALIASES
     ============================================================ */

  /* Backgrounds & surfaces */
  --tt-bg-base:        var(--tt-ink-900);
  --tt-bg-raised:      var(--tt-ink-850);
  --tt-surface-card:   var(--tt-ink-800);
  --tt-surface-raised: var(--tt-ink-700);
  --tt-surface-sunken: var(--tt-ink-950);

  /* Text */
  --tt-text-primary:   var(--tt-white);
  --tt-text-secondary: var(--tt-foam-200);
  --tt-text-muted:     var(--tt-foam-400);
  --tt-text-dim:       var(--tt-foam-500);
  --tt-text-on-neon:   var(--tt-ink-950);

  /* Accents */
  --tt-accent:           var(--tt-magenta-500);
  --tt-accent-hover:     var(--tt-magenta-400);
  --tt-accent-press:     var(--tt-magenta-600);
  --tt-accent-secondary: var(--tt-cyan-500);
  --tt-accent-tertiary:  var(--tt-purple-500);

  /* Borders & lines */
  --tt-border:        rgba(157, 75, 255, 0.28);
  --tt-border-strong: rgba(157, 75, 255, 0.55);
  --tt-border-neon:   var(--tt-magenta-500);
  --tt-grid-line:     rgba(0, 234, 255, 0.16);

  /* Score / signal */
  --tt-score:      var(--tt-gold-500);
  --tt-multiplier: var(--tt-magenta-500);
}

/* ============================================================
   TIDAL TRIGGER — TYPOGRAPHY TOKENS
   Audiowide (logo/display) · Orbitron (HUD/numerals)
   Rajdhani (UI/body) · Share Tech Mono (data/code)
   ============================================================ */

:root {
  /* ---- Families ---- */
  --tt-font-display: "Audiowide", "Orbitron", system-ui, sans-serif; /* logo, hero, titles */
  --tt-font-hud:     "Orbitron", "Audiowide", system-ui, sans-serif; /* scores, HUD, numerals */
  --tt-font-body:    "Rajdhani", "Segoe UI", system-ui, sans-serif;  /* UI labels, paragraphs */
  --tt-font-mono:    "Share Tech Mono", ui-monospace, monospace;     /* data, tags, code */

  /* ---- Weights ---- */
  --tt-weight-regular:  400;
  --tt-weight-medium:   500;
  --tt-weight-semibold: 600;
  --tt-weight-bold:     700;

  /* ---- Display / heading scale (fluid-ready px) ---- */
  --tt-size-hero:    72px;  /* hero wordmark / splash */
  --tt-size-display: 56px;  /* page / screen titles */
  --tt-size-h1:      40px;
  --tt-size-h2:      30px;
  --tt-size-h3:      22px;
  --tt-size-title:   18px;  /* card titles, section heads */

  /* ---- Body scale ---- */
  --tt-size-lg:   18px;
  --tt-size-base: 16px;
  --tt-size-sm:   14px;
  --tt-size-xs:   12px;
  --tt-size-2xs:  10px;  /* micro labels, only uppercase mono */

  /* ---- HUD / score scale ---- */
  --tt-size-score-xl: 64px; /* live score readout */
  --tt-size-score:    34px;
  --tt-size-multi:    28px; /* multiplier badge */

  /* ---- Line heights ---- */
  --tt-leading-tight:  1.05;  /* display */
  --tt-leading-snug:   1.25;  /* headings */
  --tt-leading-normal: 1.5;   /* body */

  /* ---- Letter spacing (synthwave loves wide tracking) ---- */
  --tt-tracking-mega:   0.22em;  /* micro mono labels */
  --tt-tracking-wide:   0.12em;  /* display / buttons */
  --tt-tracking-normal: 0.04em;  /* body */
  --tt-tracking-tight:  0;       /* dense numerals */

  /* ============================================================
     SEMANTIC TYPE ALIASES
     ============================================================ */
  --tt-text-hero:    var(--tt-weight-regular) var(--tt-size-hero) / var(--tt-leading-tight) var(--tt-font-display);
  --tt-text-display: var(--tt-weight-regular) var(--tt-size-display) / var(--tt-leading-tight) var(--tt-font-display);
  --tt-text-h1:      var(--tt-weight-bold) var(--tt-size-h1) / var(--tt-leading-snug) var(--tt-font-hud);
  --tt-text-h2:      var(--tt-weight-bold) var(--tt-size-h2) / var(--tt-leading-snug) var(--tt-font-hud);
  --tt-text-h3:      var(--tt-weight-semibold) var(--tt-size-h3) / var(--tt-leading-snug) var(--tt-font-body);
  --tt-text-body:    var(--tt-weight-medium) var(--tt-size-base) / var(--tt-leading-normal) var(--tt-font-body);
  --tt-text-label:   var(--tt-weight-semibold) var(--tt-size-sm) / var(--tt-leading-snug) var(--tt-font-body);
  --tt-text-micro:   var(--tt-weight-regular) var(--tt-size-2xs) / 1.2 var(--tt-font-mono);
}

/* ============================================================
   TIDAL TRIGGER — SPACING, RADII, SIZING, Z-INDEX
   8px base rhythm. Arcade UI is chunky — generous touch.
   ============================================================ */

:root {
  /* ---- Space scale (8px base) ---- */
  --tt-space-0:  0;
  --tt-space-1:  4px;
  --tt-space-2:  8px;
  --tt-space-3:  12px;
  --tt-space-4:  16px;
  --tt-space-5:  24px;
  --tt-space-6:  32px;
  --tt-space-7:  48px;
  --tt-space-8:  64px;
  --tt-space-9:  96px;
  --tt-space-10: 128px;

  /* ---- Radii (mostly sharp / chamfered arcade feel) ---- */
  --tt-radius-none: 0;
  --tt-radius-sm:   4px;
  --tt-radius-md:   8px;
  --tt-radius-lg:   14px;   /* cards */
  --tt-radius-xl:   22px;   /* sheets, panels */
  --tt-radius-pill: 999px;  /* chips, score capsules */

  /* ---- Touch targets (mobile-first arcade) ---- */
  --tt-tap-min:    44px;
  --tt-tap-comfy:  56px;
  --tt-control:    72px;   /* thumb carve buttons */

  /* ---- Layout ---- */
  --tt-screen-max:    480px;  /* mobile game canvas */
  --tt-content-max:   1200px; /* marketing site */
  --tt-gutter:        var(--tt-space-5);
  --tt-hud-inset:     var(--tt-space-4);

  /* ---- Borders ---- */
  --tt-border-width:      1px;
  --tt-border-width-neon: 2px;
  --tt-border-width-bold: 3px;

  /* ---- Z-index ---- */
  --tt-z-base:    0;    /* @kind other */
  --tt-z-raised:  10;   /* @kind other */
  --tt-z-hud:     100;  /* @kind other */
  --tt-z-overlay: 500;  /* @kind other */
  --tt-z-modal:   900;  /* @kind other */
  --tt-z-toast:   1000; /* @kind other */
}

/* ============================================================
   TIDAL TRIGGER — EFFECTS: glows, gradients, grids, blur
   Neon = layered text-shadow + box-shadow. Always glow,
   never a flat drop shadow.
   ============================================================ */

:root {
  /* ---- Neon GLOW (box) — outer bloom of a lit tube ---- */
  --tt-glow-magenta: 0 0 6px rgba(255,45,149,0.85), 0 0 18px rgba(255,45,149,0.55), 0 0 40px rgba(255,45,149,0.30);
  --tt-glow-cyan:    0 0 6px rgba(0,234,255,0.85), 0 0 18px rgba(0,234,255,0.55), 0 0 40px rgba(0,234,255,0.30);
  --tt-glow-purple:  0 0 6px rgba(157,75,255,0.85), 0 0 18px rgba(157,75,255,0.55), 0 0 40px rgba(157,75,255,0.30);
  --tt-glow-aqua:    0 0 6px rgba(43,255,208,0.85), 0 0 18px rgba(43,255,208,0.50), 0 0 40px rgba(43,255,208,0.28);
  --tt-glow-gold:    0 0 6px rgba(255,216,77,0.90), 0 0 18px rgba(255,216,77,0.55), 0 0 40px rgba(255,216,77,0.30);
  --tt-glow-soft:    0 0 24px rgba(157,75,255,0.25);

  /* ---- Neon GLOW (text) — for lit type ---- */
  --tt-text-glow-magenta: 0 0 4px rgba(255,92,184,0.9), 0 0 14px rgba(255,45,149,0.65), 0 0 30px rgba(255,45,149,0.4);
  --tt-text-glow-cyan:    0 0 4px rgba(155,247,255,0.9), 0 0 14px rgba(0,234,255,0.65), 0 0 30px rgba(0,234,255,0.4);
  --tt-text-glow-gold:    0 0 4px rgba(255,243,155,0.9), 0 0 14px rgba(255,216,77,0.65), 0 0 30px rgba(255,216,77,0.4);
  --tt-text-glow-white:   0 0 4px rgba(253,243,255,0.9), 0 0 16px rgba(157,75,255,0.5);

  /* ---- Depth shadow (for cards over dark) — subtle, cool ---- */
  --tt-shadow-card: 0 8px 32px rgba(5,0,16,0.6), inset 0 1px 0 rgba(157,75,255,0.18);
  --tt-shadow-sheet: 0 -12px 48px rgba(5,0,16,0.7);

  /* ---- Inset bevel (chunky arcade button) ---- */
  --tt-bevel-top:    inset 0 2px 0 rgba(255,255,255,0.25);  /* @kind shadow */
  --tt-bevel-bottom: inset 0 -3px 0 rgba(5,0,16,0.35);      /* @kind shadow */

  /* ============================================================
     GRADIENTS
     ============================================================ */

  /* Sunset horizon — the signature hero gradient */
  --tt-grad-sunset: linear-gradient(180deg, #9d4bff 0%, #ff2d95 42%, #ff7d2e 72%, #ffc24b 100%); /* @kind color */

  /* Night sky → ocean */
  --tt-grad-night: linear-gradient(180deg, #050010 0%, #0a0320 38%, #190b46 100%); /* @kind color */

  /* Glowing pink ocean (water surface) */
  --tt-grad-ocean: linear-gradient(180deg, #ff2d95 0%, #9d4bff 55%, #190b46 100%); /* @kind color */

  /* Primary neon button fill */
  --tt-grad-magenta: linear-gradient(180deg, #ff5cb8 0%, #ff2d95 55%, #d6007a 100%); /* @kind color */
  --tt-grad-cyan:    linear-gradient(180deg, #5cf2ff 0%, #00eaff 55%, #00b8d6 100%); /* @kind color */

  /* Laser horizon line (radial sun) */
  --tt-grad-sun: radial-gradient(circle at 50% 100%, #ffc24b 0%, #ff3d6e 35%, #9d4bff 70%, transparent 100%); /* @kind color */

  /* Protection scrim — fade content over imagery */
  --tt-scrim-bottom: linear-gradient(180deg, transparent 0%, rgba(5,0,16,0.85) 100%); /* @kind color */
  --tt-scrim-top:    linear-gradient(0deg, transparent 0%, rgba(5,0,16,0.85) 100%);    /* @kind color */

  /* ============================================================
     SURFACE TEXTURES (compose as background-image)
     ============================================================ */

  /* Perspective-free neon grid (use on dark surfaces) */
  --tt-grid: linear-gradient(rgba(0,234,255,0.12) 1px, transparent 1px),
             linear-gradient(90deg, rgba(0,234,255,0.12) 1px, transparent 1px); /* @kind other */
  --tt-grid-size: 40px 40px; /* @kind other */

  /* Scanline overlay (CRT) */
  --tt-scanlines: repeating-linear-gradient(180deg, rgba(255,255,255,0.04) 0px, rgba(255,255,255,0.04) 1px, transparent 1px, transparent 3px); /* @kind other */

  /* ---- Blur (glassy HUD panels) ---- */
  --tt-blur-panel: blur(14px);            /* @kind other */
  --tt-glass-fill: rgba(25,11,70,0.55);   /* @kind color */

  /* ---- Motion ---- */
  /* overshoot — flipper kick */
  --tt-ease-pop:    cubic-bezier(0.34, 1.56, 0.64, 1); /* @kind other */
  --tt-ease-out:    cubic-bezier(0.22, 1, 0.36, 1);       /* @kind other */
  --tt-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);       /* @kind other */
  --tt-dur-fast:    120ms; /* @kind other */
  --tt-dur-base:    220ms; /* @kind other */
  --tt-dur-slow:    420ms; /* @kind other */
}

/* ============================================================
   TIDAL TRIGGER — BASE / GLOBAL
   ============================================================ */
html, body { margin: 0; background: #0a0320; }
html { scroll-behavior: smooth; }

/* ---- Keyframes (shipped with the design system) ---- */
@keyframes ttbob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-22px); } }
@keyframes ttscan { to { background-position: 0 60px; } }
@keyframes ttmarquee { to { transform: translateX(-50%); } }

/* The components reference these classes but the design system shipped no rules
   for them (it previewed hover via a non-standard style-hover attribute). Written
   here so the CTA gradient actually pans and nav links actually respond. */
@keyframes ttgradpan { to { background-position: 200% center; } }
.tt-grad-pan {
  background-size: 200% auto;
  animation: ttgradpan 4s linear infinite;
}

.tt-navlink {
  transition: color var(--tt-dur-base, 180ms), text-shadow var(--tt-dur-base, 180ms);
}
.tt-navlink:hover,
.tt-navlink:focus-visible {
  color: var(--tt-cyan-400);
  text-shadow: var(--tt-text-glow-cyan);
}

/* ---- Mobile menu -----------------------------------------------------------
   Under 720px the link row becomes a dropdown panel under the nav, opened by the
   hamburger. State is a data-open attribute set by nav-behavior.js — NOT React —
   because this same markup ships to the mixer, which has no React.
   The !important beats the components' inline styles (this DS styles inline). */
.tt-menu-btn { display: none; }

@media (max-width: 720px) {
  [data-tt-header] { padding-left: 18px !important; padding-right: 18px !important; }

  .tt-menu-btn { display: inline-flex !important; }

  .tt-navlinks {
    display: none !important;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    gap: 0 !important;
    padding: 6px 18px 14px;
    background: rgba(10, 3, 32, 0.97);
    -webkit-backdrop-filter: var(--tt-blur-panel);
    backdrop-filter: var(--tt-blur-panel);
    border-bottom: 1px solid var(--tt-border-strong);
    box-shadow: var(--tt-shadow-card);
  }
  .tt-navlinks[data-open='true'] { display: flex !important; }

  /* Full-width rows, comfortable thumb targets (--tt-tap-min is 44px). */
  .tt-navlinks .tt-navlink {
    display: flex;
    align-items: center;
    min-height: var(--tt-tap-min);
    border-bottom: 1px solid var(--tt-border);
  }
  .tt-navlinks .tt-navlink:last-child { border-bottom: 0; }
}

/* Keyboard users must be able to see where they are. */
:focus-visible {
  outline: 2px solid var(--tt-cyan-400);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  [data-anim], .tt-grad-pan { animation: none !important; }
  html { scroll-behavior: auto; }
}

/* components.css — the design-system stylesheet.
 *
 * Replaces the inline `style={{...}}` objects that used to live inside the nine
 * components in src/components/{core,hud}. Every declaration here is a verbatim
 * transcription of what those objects produced: same colours, sizes, shadows,
 * radii, fonts and transitions, still expressed through the `var(--tt-*)` design
 * tokens (src/tokens/*.css) rather than literals.
 *
 * Structure:
 *   - one block per component, in barrel order (core: Badge, Button, Card, Chip,
 *     Panel; hud: ComboMeter, GaugeBar, MultiplierBadge, ScoreReadout)
 *   - BEM-ish, `tt-` prefixed: .tt-btn / .tt-btn--primary / .tt-btn__x / .is-disabled
 *   - the JS variant maps (TT_ACCENTS, TT_SIZES, TT_BADGE_TONES, TT_CARD_ACCENTS)
 *     are gone: each accent/tone modifier now just sets a few component-scoped
 *     custom properties that the variant rules consume, which keeps the
 *     accent x variant matrix additive instead of combinatorial.
 *   - React hover/press state became :hover / :active. What stays in JS is only
 *     what is a prop, not a pointer state (selected, disabled, featured...), and
 *     those toggle a class.
 *
 * The only values still set from JS are genuinely dynamic ones (a gauge fill %,
 * a caller-supplied padding or font-size). Those arrive as inline CSS custom
 * properties (--tt-gauge-fill, --tt-card-pad, --tt-panel-pad, --tt-score-size)
 * and are consumed below, each with a fallback so the CSS stands alone.
 *
 * No framework, no preprocessor, no CSS-in-JS.
 */

/* =============================================================================
 * Badge — small uppercase status pill, solid or outline, optional leading dot.
 * ========================================================================== */

.tt-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--tt-font-mono);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 5px 11px;
  border-radius: var(--tt-radius-pill);
  line-height: 1;
  white-space: nowrap;
}

/* tone -> the three values the old TT_BADGE_TONES map carried */
.tt-badge--magenta {
  --tt-badge-c: var(--tt-magenta-500);
  --tt-badge-glow: var(--tt-glow-magenta);
  --tt-badge-ink: var(--tt-ink-950);
}
.tt-badge--cyan {
  --tt-badge-c: var(--tt-cyan-500);
  --tt-badge-glow: var(--tt-glow-cyan);
  --tt-badge-ink: var(--tt-ink-950);
}
.tt-badge--gold {
  --tt-badge-c: var(--tt-gold-500);
  --tt-badge-glow: var(--tt-glow-gold);
  --tt-badge-ink: var(--tt-ink-950);
}
.tt-badge--aqua {
  --tt-badge-c: var(--tt-aqua-500);
  --tt-badge-glow: var(--tt-glow-aqua);
  --tt-badge-ink: var(--tt-ink-950);
}
.tt-badge--danger {
  --tt-badge-c: var(--tt-danger-500);
  --tt-badge-glow: 0 0 14px rgba(255, 45, 79, 0.6);
  --tt-badge-ink: #fff;
}
.tt-badge--neutral {
  --tt-badge-c: var(--tt-foam-400);
  --tt-badge-glow: none;
  --tt-badge-ink: var(--tt-ink-950);
}

.tt-badge--solid {
  background: var(--tt-badge-c);
  color: var(--tt-badge-ink);
  box-shadow: var(--tt-badge-glow);
}

.tt-badge--outline {
  background: transparent;
  color: var(--tt-badge-c);
  box-shadow: 0 0 0 1px var(--tt-badge-c) inset;
  text-shadow: 0 0 8px var(--tt-badge-c);
}
/* neutral is the one tone whose glow is 'none' -> no text glow on the outline */
.tt-badge--outline.tt-badge--neutral {
  text-shadow: none;
}

.tt-badge__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--tt-badge-ink);
  box-shadow: none;
}
.tt-badge--outline .tt-badge__dot {
  background: var(--tt-badge-c);
  box-shadow: 0 0 6px var(--tt-badge-c);
}

/* =============================================================================
 * Button — accent-tinted action control, three variants, pointer-press scale.
 * ========================================================================== */

.tt-btn {
  appearance: none;
  border: none;
  cursor: pointer;
  font-family: var(--tt-font-hud);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  width: auto;
  border-radius: var(--tt-radius-md);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  transition:
    transform var(--tt-dur-fast) var(--tt-ease-pop),
    box-shadow var(--tt-dur-base) var(--tt-ease-out),
    filter var(--tt-dur-base) var(--tt-ease-out);
  transform: scale(1);
  opacity: 1;
  filter: none;
}

/* href -> the component renders an <a>; it must not look like a link */
a.tt-btn {
  text-decoration: none;
}

/* size -> the old TT_SIZES map */
.tt-btn--sm {
  font-size: 13px;
  padding: 8px 16px;
  min-height: var(--tt-tap-min);
}
.tt-btn--md {
  font-size: 15px;
  padding: 13px 26px;
  min-height: var(--tt-tap-comfy);
}
.tt-btn--lg {
  font-size: 18px;
  padding: 18px 38px;
  min-height: 64px;
}

.tt-btn--full {
  width: 100%;
}

/* accent -> the old TT_ACCENTS map */
.tt-btn--magenta {
  --tt-btn-fill: var(--tt-grad-magenta);
  --tt-btn-edge: var(--tt-magenta-500);
  --tt-btn-glow: var(--tt-glow-magenta);
  --tt-btn-ink: var(--tt-ink-950);
}
.tt-btn--cyan {
  --tt-btn-fill: var(--tt-grad-cyan);
  --tt-btn-edge: var(--tt-cyan-500);
  --tt-btn-glow: var(--tt-glow-cyan);
  --tt-btn-ink: var(--tt-ink-950);
}
.tt-btn--gold {
  --tt-btn-fill: linear-gradient(180deg, #ffe57a 0%, #ffd84d 55%, #e0ab00 100%);
  --tt-btn-edge: var(--tt-gold-500);
  --tt-btn-glow: var(--tt-glow-gold);
  --tt-btn-ink: var(--tt-ink-950);
}

.tt-btn--primary {
  background: var(--tt-btn-fill);
  color: var(--tt-btn-ink);
  box-shadow: var(--tt-btn-glow), var(--tt-bevel-top), var(--tt-bevel-bottom);
}
.tt-btn--secondary {
  background: var(--tt-ink-700);
  color: var(--tt-text-primary);
  box-shadow: 0 0 0 2px var(--tt-btn-edge) inset, var(--tt-glow-soft);
}
.tt-btn--ghost {
  background: transparent;
  color: var(--tt-btn-edge);
  box-shadow: 0 0 0 1px var(--tt-border-strong) inset;
}

/* was a React `pressed` useState toggled on pointerdown/up/leave */
.tt-btn:active:not(.is-disabled) {
  transform: scale(0.955);
}

/* disabled must beat the variant rules above -> two-class specificity */
.tt-btn.is-disabled {
  cursor: not-allowed;
  opacity: 0.4;
  filter: saturate(0.3);
  box-shadow: none;
}

/* =============================================================================
 * Card — content surface, optional neon featured border, optional hover-lift.
 * ========================================================================== */

.tt-card {
  position: relative;
  background: var(--tt-surface-card);
  border-radius: var(--tt-radius-lg);
  padding: var(--tt-card-pad, var(--tt-space-5));
  color: var(--tt-text-primary);
  font-family: var(--tt-font-body);
  cursor: default;
  transition:
    border-color var(--tt-dur-base) var(--tt-ease-out),
    box-shadow var(--tt-dur-base) var(--tt-ease-out),
    transform var(--tt-dur-base) var(--tt-ease-pop);
  transform: none;
  border: 1px solid var(--tt-border);
  box-shadow: var(--tt-shadow-card);
}

/* accent -> the old TT_CARD_ACCENTS map (only read by the featured skin) */
.tt-card--magenta {
  --tt-card-c: var(--tt-magenta-500);
  --tt-card-glow: var(--tt-glow-magenta);
}
.tt-card--cyan {
  --tt-card-c: var(--tt-cyan-500);
  --tt-card-glow: var(--tt-glow-cyan);
}
.tt-card--purple {
  --tt-card-c: var(--tt-purple-500);
  --tt-card-glow: var(--tt-glow-purple);
}
.tt-card--gold {
  --tt-card-c: var(--tt-gold-500);
  --tt-card-glow: var(--tt-glow-gold);
}

.tt-card--featured {
  border: var(--tt-border-width-neon) solid var(--tt-card-c);
  box-shadow: var(--tt-card-glow), var(--tt-shadow-card);
}

.tt-card--interactive {
  cursor: pointer;
}

/* was a React `hover` useState on mouseenter/mouseleave */
.tt-card--interactive:hover {
  transform: translateY(-2px);
}
/* the border/shadow hover change only ever applied to the NON-featured skin */
.tt-card--interactive:not(.tt-card--featured):hover {
  border-color: var(--tt-border-strong);
  box-shadow: var(--tt-glow-soft), var(--tt-shadow-card);
}

/* =============================================================================
 * Chip — selectable filter/toggle pill with an accent-lit selected state.
 * ========================================================================== */

.tt-chip {
  appearance: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--tt-font-body);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 8px 15px;
  min-height: var(--tt-tap-min);
  border-radius: var(--tt-radius-pill);
  background: var(--tt-ink-700);
  color: var(--tt-text-secondary);
  border: 1px solid var(--tt-border);
  box-shadow: none;
  transition:
    background var(--tt-dur-base) var(--tt-ease-out),
    box-shadow var(--tt-dur-base) var(--tt-ease-out),
    transform var(--tt-dur-fast) var(--tt-ease-pop);
}

.tt-chip--magenta {
  --tt-chip-c: var(--tt-magenta-500);
}
.tt-chip--cyan {
  --tt-chip-c: var(--tt-cyan-500);
}
.tt-chip--purple {
  --tt-chip-c: var(--tt-purple-500);
}
.tt-chip--gold {
  --tt-chip-c: var(--tt-gold-500);
}

/* `selected` is a prop, not a pointer state -> it stays in JS, as a class */
.tt-chip.is-selected {
  background: var(--tt-chip-c);
  color: var(--tt-ink-950);
  border-color: var(--tt-chip-c);
  box-shadow: 0 0 14px var(--tt-chip-c);
}

/* =============================================================================
 * Panel — layout container: frosted-glass or solid raised surface.
 * ========================================================================== */

.tt-panel {
  border-radius: var(--tt-radius-xl);
  padding: var(--tt-panel-pad, var(--tt-space-5));
  color: var(--tt-text-primary);
  font-family: var(--tt-font-body);
  border: none;
  box-shadow: var(--tt-glow-soft), var(--tt-shadow-card);
}

.tt-panel--bordered {
  border: 1px solid var(--tt-border-strong);
}

.tt-panel--glass {
  background: var(--tt-glass-fill);
  -webkit-backdrop-filter: var(--tt-blur-panel);
  backdrop-filter: var(--tt-blur-panel);
}

.tt-panel--solid {
  background: var(--tt-surface-raised);
}

/* =============================================================================
 * ComboMeter — row of pips that light up, newest pip enlarged.
 * ========================================================================== */

.tt-combo {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.tt-combo--magenta {
  --tt-combo-c: var(--tt-magenta-500);
  --tt-combo-glow: var(--tt-glow-magenta);
}
.tt-combo--cyan {
  --tt-combo-c: var(--tt-cyan-500);
  --tt-combo-glow: var(--tt-glow-cyan);
}
.tt-combo--aqua {
  --tt-combo-c: var(--tt-aqua-500);
  --tt-combo-glow: var(--tt-glow-aqua);
}

.tt-combo__label {
  font-family: var(--tt-font-mono);
  font-size: var(--tt-size-2xs);
  letter-spacing: var(--tt-tracking-mega);
  color: var(--tt-text-muted);
}

.tt-combo__pips {
  display: flex;
  gap: 6px;
}

.tt-combo__pip {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--tt-ink-700);
  box-shadow: none;
  border: 1px solid var(--tt-border);
  transition: all var(--tt-dur-base) var(--tt-ease-pop);
  align-self: center;
}

.tt-combo__pip.is-on {
  background: var(--tt-combo-c);
  box-shadow: var(--tt-combo-glow);
  border: none;
}

.tt-combo__pip.is-latest {
  width: 14px;
  height: 14px;
}

/* =============================================================================
 * GaugeBar — clamped 0..1 fill bar, horizontal or vertical, optional pct.
 * ========================================================================== */

.tt-gauge {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: stretch;
}

.tt-gauge--vertical {
  flex-direction: column-reverse;
  align-items: center;
}

.tt-gauge--cyan {
  --tt-gauge-c: var(--tt-cyan-500);
  --tt-gauge-glow: var(--tt-glow-cyan);
}
.tt-gauge--magenta {
  --tt-gauge-c: var(--tt-magenta-500);
  --tt-gauge-glow: var(--tt-glow-magenta);
}
.tt-gauge--aqua {
  --tt-gauge-c: var(--tt-aqua-500);
  --tt-gauge-glow: var(--tt-glow-aqua);
}
.tt-gauge--gold {
  --tt-gauge-c: var(--tt-gold-500);
  --tt-gauge-glow: var(--tt-glow-gold);
}

.tt-gauge__head {
  display: flex;
  justify-content: space-between;
  font-family: var(--tt-font-mono);
  font-size: var(--tt-size-2xs);
  letter-spacing: var(--tt-tracking-mega);
  color: var(--tt-text-muted);
}

.tt-gauge__pct {
  color: var(--tt-gauge-c);
}

.tt-gauge__track {
  position: relative;
  background: var(--tt-ink-800);
  border: 1px solid var(--tt-border);
  border-radius: var(--tt-radius-pill);
  overflow: hidden;
  width: 100%;
  height: 12px;
}
.tt-gauge--vertical .tt-gauge__track {
  width: 12px;
  height: 120px;
}

/* --tt-gauge-fill is the one genuinely dynamic value: set inline from `value` */
.tt-gauge__fill {
  position: absolute;
  background: var(--tt-gauge-c);
  box-shadow: var(--tt-gauge-glow);
  border-radius: var(--tt-radius-pill);
  transition: all var(--tt-dur-base) var(--tt-ease-out);
  top: 0;
  bottom: 0;
  left: 0;
  width: var(--tt-gauge-fill, 0%);
}
.tt-gauge--vertical .tt-gauge__fill {
  top: auto;
  bottom: 0;
  left: 0;
  right: 0;
  width: auto;
  height: var(--tt-gauge-fill, 0%);
}

/* =============================================================================
 * MultiplierBadge — tiered hue, pulses while above x1.
 * ========================================================================== */

.tt-multi {
  display: inline-flex;
  align-items: center;
  font-family: var(--tt-font-hud);
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.02em;
  border-radius: var(--tt-radius-pill);
  color: var(--tt-multi-ink);
  background: var(--tt-multi-c);
  box-shadow: var(--tt-multi-glow);
  animation: none;
}

/* tier: hue ramps up with the multiplier (>=8 gold, >=4 magenta, else cyan) */
.tt-multi--cyan {
  --tt-multi-c: var(--tt-cyan-500);
  --tt-multi-glow: var(--tt-glow-cyan);
  --tt-multi-ink: var(--tt-ink-950);
}
.tt-multi--magenta {
  --tt-multi-c: var(--tt-magenta-500);
  --tt-multi-glow: var(--tt-glow-magenta);
  --tt-multi-ink: var(--tt-ink-950);
}
.tt-multi--gold {
  --tt-multi-c: var(--tt-gold-500);
  --tt-multi-glow: var(--tt-glow-gold);
  --tt-multi-ink: var(--tt-ink-950);
}

.tt-multi--sm {
  font-size: 18px;
  padding: 4px 12px;
}
.tt-multi--md {
  font-size: 28px;
  padding: 6px 16px;
}
.tt-multi--lg {
  font-size: 40px;
  padding: 8px 22px;
}

.tt-multi.is-pulsing {
  animation: tt-multi-pulse 0.9s var(--tt-ease-in-out) infinite;
}

@keyframes tt-multi-pulse {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.07);
  }
}

/* Carried over verbatim from the component's inline <style> block. NOTE: it
 * targets the inner [data-tt-multi] span, which is not the animated element —
 * so, exactly as before, it does not actually stop the pulse. Preserved as-is
 * because fixing it would change rendered motion; flagged to the caller. */
@media (prefers-reduced-motion: reduce) {
  [data-tt-multi] {
    animation: none !important;
  }
}

/* =============================================================================
 * ScoreReadout — labelled tabular-nums figure with an optional +delta line.
 * ========================================================================== */

.tt-score {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-family: var(--tt-font-hud);
}

.tt-score--left {
  align-items: flex-start;
}
.tt-score--center {
  align-items: center;
}
.tt-score--right {
  align-items: flex-end;
}

.tt-score--gold {
  --tt-score-c: var(--tt-gold-500);
  --tt-score-glow: var(--tt-text-glow-gold);
}
.tt-score--magenta {
  --tt-score-c: var(--tt-magenta-400);
  --tt-score-glow: var(--tt-text-glow-magenta);
}
.tt-score--cyan {
  --tt-score-c: var(--tt-cyan-400);
  --tt-score-glow: var(--tt-text-glow-cyan);
}

.tt-score__label {
  font-family: var(--tt-font-mono);
  font-size: var(--tt-size-2xs);
  letter-spacing: var(--tt-tracking-mega);
  color: var(--tt-text-muted);
  margin-bottom: 2px;
}

/* --tt-score-size: the `size` prop is a caller-supplied length (token or literal) */
.tt-score__value {
  font-size: var(--tt-score-size, var(--tt-size-score-xl));
  font-weight: 800;
  line-height: 1;
  color: var(--tt-score-c);
  text-shadow: var(--tt-score-glow);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
}

.tt-score__delta {
  font-size: var(--tt-size-multi);
  font-weight: 700;
  color: var(--tt-aqua-400);
  text-shadow: var(--tt-glow-aqua);
  margin-top: 2px;
}

/* ============================================================
   TIDAL TRIGGER — WEBSITE KIT
   The single stylesheet for src/ui_kits/website/*. One rule per
   thing the kit draws; the components carry classes only.

   CONTRACT
   - Every value here came out of a style={{...}} verbatim. The
     --tt-* token references ARE the design system — never inline
     a literal where a token was used.
   - Genuinely dynamic values (a caller's colour, a computed delay,
     a grid column spec) arrive as CSS custom properties set on the
     element by the component. They are declared with a fallback so
     the class is still correct if the property is absent.
   - Structural/global rules for .tt-navlink, .tt-navlinks,
     .tt-menu-btn (hover, and the <=720px mobile menu) live in
     src/tokens/base.css and are NOT repeated here. This file only
     adds the appearance those elements used to carry inline.
   - ⚠ Nav ships to mixer.tidaltrigger.com as static markup with no
     React. Nothing about the nav may depend on a JS-set style: the
     mixer runs nav-behavior.js, which toggles classes only.
   ============================================================ */

/* ---- Nav -------------------------------------------------------------- */
.tt-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 40px;
  background: var(--tt-glass-fill);
  -webkit-backdrop-filter: var(--tt-blur-panel);
  backdrop-filter: var(--tt-blur-panel);
  border-bottom: 1px solid var(--tt-border);
  font-family: var(--tt-font-body);
  transition: background var(--tt-dur-base), border-color var(--tt-dur-base);
}

/* Past 40px of scroll nav-behavior.js adds .is-solid — the glass fill would
   let the page read straight through the links. */
.tt-nav.is-solid {
  background: rgba(10, 3, 32, 0.82);
  border-bottom-color: var(--tt-border-strong);
}

.tt-nav__brand {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}
.tt-nav__brand-text { line-height: 1; }
.tt-nav__title {
  font-family: var(--tt-font-display);
  font-size: 19px;
  color: #fff;
  letter-spacing: 0.04em;
  text-shadow: var(--tt-text-glow-magenta);
}
.tt-nav__tagline {
  font-family: var(--tt-font-mono);
  font-size: 9px;
  letter-spacing: 0.24em;
  color: var(--tt-cyan-400);
  margin-top: 4px;
}

/* Base layout only — base.css owns the <=720px dropdown behaviour. */
.tt-navlinks {
  display: flex;
  gap: 28px;
}
.tt-navlink {
  color: var(--tt-text-secondary);
  text-shadow: none;
  text-decoration: none;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.tt-navlink.is-active {
  color: var(--tt-cyan-400);
  text-shadow: var(--tt-text-glow-cyan);
}

.tt-nav__actions {
  display: flex;
  align-items: center;
  gap: 10px;
}
/* display: is base.css's (none, and inline-flex under 720px) — don't set it here. */
.tt-menu-btn {
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  cursor: pointer;
  color: var(--tt-text-primary);
  background: transparent;
  border: 1px solid var(--tt-border-strong);
  border-radius: var(--tt-radius-sm);
}

/* ---- Hero ------------------------------------------------------------- */
.tt-hero {
  position: relative;
  min-height: var(--tt-hero-min-h, 720px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
  background: url(/assets/horizon.svg) center / cover no-repeat;
  font-family: var(--tt-font-body);
}
.tt-hero__scanlines {
  position: absolute;
  inset: 0;
  background-image: var(--tt-scanlines);
  pointer-events: none;
  animation: ttscan 7s linear infinite;
}
.tt-hero__vignette {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(5, 0, 16, 0.5) 0%, transparent 30%, rgba(5, 0, 16, 0.9) 100%);
}
.tt-hero__content {
  position: relative;
  z-index: 3;
  padding: 0 24px;
  margin-top: 38px;
}
.tt-hero__badge { margin-bottom: 26px; }
.tt-hero__eyebrow {
  font-family: var(--tt-font-mono);
  font-size: 13px;
  letter-spacing: 0.3em;
  color: var(--tt-text-muted);
  margin-bottom: 14px;
}
.tt-hero__kicker {
  font-family: var(--tt-font-display);
  font-size: clamp(26px, 5vw, 44px);
  color: var(--tt-foam-200);
  letter-spacing: 0.06em;
  line-height: 1;
  text-shadow: var(--tt-text-glow-white);
  margin-bottom: 14px;
}
/* The lines are now whole claims ("CALL IT RETRO GAMING"), not single words, so the size
   has to fit the LONGEST one — and min-height reserves room for the tallest so the hero
   doesn't jolt as the rotation swaps. */
.tt-hero__swap {
  font-family: var(--tt-font-display);
  font-size: clamp(26px, 5.4vw, 66px);
  line-height: 1.1;
  color: #fff;
  letter-spacing: 0.02em;
  margin: 0;
  min-height: 2.4em;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tt-hero__headline {
  font-family: var(--tt-font-display);
  font-size: 40px;
  line-height: 1.1;
  color: #fff;
  letter-spacing: 0.02em;
  margin: 10px 0 0;
  text-shadow: var(--tt-text-glow-white);
}
.tt-hero__body {
  max-width: 620px;
  margin: 22px auto 0;
  font-size: 19px;
  font-weight: 500;
  color: var(--tt-text-secondary);
  line-height: 1.55;
}
.tt-hero__actions {
  display: flex;
  gap: 14px;
  justify-content: center;
  margin-top: 34px;
  flex-wrap: wrap;
}
.tt-hero__note {
  margin-top: 26px;
  font-family: var(--tt-font-mono);
  font-size: 12px;
  letter-spacing: 0.22em;
  color: var(--tt-text-muted);
}
.tt-hero__stats {
  position: absolute;
  bottom: 30px;
  left: 0;
  right: 0;
  display: flex;
  gap: 44px;
  justify-content: center;
  z-index: 3;
  font-family: var(--tt-font-hud);
}
.tt-hero__stat { text-align: center; }
.tt-hero__stat-value {
  font-size: 30px;
  font-weight: 800;
  color: var(--tt-cyan-400);
  text-shadow: var(--tt-text-glow-cyan);
}
.tt-hero__stat-label {
  font-family: var(--tt-font-mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  color: var(--tt-text-muted);
  margin-top: 4px;
}

/* ---- Bumper ----------------------------------------------------------- */
/* Position / size / hue / glow / bob timing are all caller data. */
.tt-bumper {
  position: absolute;
  left: var(--tt-bumper-x);
  top: var(--tt-bumper-y);
  width: var(--tt-bumper-size, 56px);
  height: var(--tt-bumper-size, 56px);
  border-radius: 50%;
  background: var(--tt-ink-800);
  border: 2px solid var(--tt-bumper-hue, var(--tt-magenta-500));
  box-shadow: 0 0 8px var(--tt-bumper-hue, var(--tt-magenta-500));
  display: grid;
  place-items: center;
}
.tt-bumper.is-lit {
  box-shadow: var(--tt-bumper-glow, var(--tt-glow-magenta));
}
.tt-bumper.is-bobbing {
  animation: ttbob var(--tt-bumper-duration, 6s) var(--tt-ease-in-out) infinite var(--tt-bumper-delay, 0s);
}
.tt-bumper__core {
  width: calc(var(--tt-bumper-size, 56px) * 0.34);
  height: calc(var(--tt-bumper-size, 56px) * 0.34);
  border-radius: 50%;
  background: var(--tt-bumper-hue, var(--tt-magenta-500));
  box-shadow: var(--tt-bumper-glow, var(--tt-glow-magenta));
}

/* ---- GraffitiSwap ----------------------------------------------------- */
.tt-swap {
  position: relative;
  display: inline-block;
  padding: 0 6px;
  margin-bottom: 19px; /* owner: another 19px underneath */
}
/* White text, lifted off the horizon by a soft black radial bloom rather than the old
   hard stroke — the shadow is what makes the white read against the sky. */
.tt-swap-word {
  color: var(--tt-word-hue);
  text-shadow:
    0 0 12px rgba(0, 0, 0, 0.25),
    0 0 30px rgba(0, 0, 0, 0.25),
    0 0 60px rgba(0, 0, 0, 0.25),
    var(--tt-word-glow);
  display: inline-block;
}
/* CROSSED THROUGH, not slashed: the old bar was rotate(-2.6deg) skewX(-12deg), which read
   as a graffiti slash. Owner wants a straight line through the line of text. */
.tt-swap__strike {
  position: absolute;
  left: -2%;
  top: 52%;
  height: 11px;
  width: 0%;
  background: var(--tt-word-strike);
  border-radius: 8px;
  box-shadow: 0 0 8px var(--tt-word-strike), 0 0 20px var(--tt-word-strike);
  transform: translateY(-50%);
  transition: width 0.5s var(--tt-ease-out);
  transform-origin: left center;
  pointer-events: none;
}
.tt-swap__strike.is-struck { width: 104%; }

/* ---- the payoff frame: CALL IT + the logo (no subtitle) ---- */
.tt-swap__lockup {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.28em;
}
.tt-swap__mark {
  width: 0.92em;
  height: 0.92em;
  flex: 0 0 auto;
  filter: drop-shadow(0 0 18px rgba(0, 0, 0, 0.25));
}
/* The TIDAL TRIGGER wordmark reads YELLOW here, not the brand pink (owner). */
.tt-swap__wordmark {
  color: var(--tt-gold-500);
  text-shadow:
    0 0 12px rgba(0, 0, 0, 0.25),
    0 0 30px rgba(0, 0, 0, 0.25),
    0 0 60px rgba(0, 0, 0, 0.25),
    0 0 28px rgba(255, 216, 77, 0.45);
}
/* Announced to screen readers, invisible to everyone else. */
.tt-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---- StruckWord ------------------------------------------------------- */
.tt-struck {
  position: relative;
  display: inline-block;
  padding: 0 2px;
}
.tt-struck__text { color: var(--tt-struck-hue); }
.tt-struck__bar {
  position: absolute;
  left: -3%;
  top: 54%;
  width: 106%;
  height: 8px;
  background: var(--tt-struck-strike);
  border-radius: 6px;
  box-shadow: 0 0 8px var(--tt-struck-strike);
  transform: translateY(-50%) rotate(-2.5deg) skewX(-12deg);
}

/* ---- Marquee ---------------------------------------------------------- */
.tt-marquee-band {
  overflow: hidden;
  border-top: 1px solid var(--tt-border);
  border-bottom: 1px solid var(--tt-border);
  background: var(--tt-ink-950);
  padding: 16px 0;
}
.tt-marquee {
  display: flex;
  gap: 0;
  white-space: nowrap;
  width: max-content;
  animation: ttmarquee var(--tt-marquee-duration, 26s) linear infinite;
}
.tt-marquee__word {
  display: inline-flex;
  align-items: center;
  font-family: var(--tt-font-display);
  font-size: 22px;
  letter-spacing: 0.06em;
  padding: 0 28px;
}
.tt-marquee__word.is-magenta {
  color: var(--tt-magenta-400);
  text-shadow: var(--tt-text-glow-magenta);
}
.tt-marquee__word.is-cyan {
  color: var(--tt-cyan-400);
  text-shadow: var(--tt-text-glow-cyan);
}
.tt-marquee__sep {
  color: var(--tt-text-dim);
  margin-left: 28px;
  text-shadow: none;
}

/* ---- Features --------------------------------------------------------- */
.tt-features {
  background: var(--tt-bg-base);
  padding: 96px 40px;
  font-family: var(--tt-font-body);
}
.tt-features__inner {
  max-width: 1200px;
  margin: 0 auto;
}
.tt-features__eyebrow {
  font-family: var(--tt-font-mono);
  font-size: 11px;
  letter-spacing: 0.24em;
  color: var(--tt-cyan-400);
  text-align: center;
  margin-bottom: 12px;
}
.tt-features__title {
  font-family: var(--tt-font-display);
  font-size: 40px;
  color: #fff;
  text-align: center;
  margin: 0 0 56px;
  letter-spacing: 0.02em;
  text-shadow: var(--tt-text-glow-magenta);
}
.tt-features__grid {
  display: grid;
  grid-template-columns: var(--tt-features-cols, repeat(4, 1fr));
  gap: 22px;
}
/* Cards reveal in sequence — the delay is the card's index. */
.tt-features__cell { transition-delay: var(--tt-reveal-delay, 0ms); }
.tt-feature__title {
  font-family: var(--tt-font-hud);
  font-weight: 700;
  font-size: 20px;
  margin-bottom: 8px;
}
.tt-feature__body {
  color: var(--tt-text-muted);
  font-size: 15px;
  line-height: 1.5;
}

/* ---- FeatureIcon ------------------------------------------------------ */
.tt-feature-icon {
  width: 56px;
  height: 56px;
  border-radius: var(--tt-radius-md);
  display: grid;
  place-items: center;
  border: 2px solid var(--tt-icon-hue);
  box-shadow: var(--tt-icon-glow);
  margin-bottom: 18px;
}
.tt-feature-icon__svg { filter: drop-shadow(0 0 5px var(--tt-icon-hue)); }

/* ---- HowToPlay -------------------------------------------------------- */
.tt-howto {
  position: relative;
  padding: 96px 40px;
  overflow: hidden;
  background: var(--tt-ink-950);
  font-family: var(--tt-font-body);
}
.tt-howto__grid-bg {
  position: absolute;
  inset: 0;
  background-image: var(--tt-grid);
  background-size: var(--tt-grid-size);
  opacity: 0.25;
}
.tt-howto__inner {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
  z-index: 2;
}
.tt-howto__eyebrow {
  font-family: var(--tt-font-mono);
  font-size: 11px;
  letter-spacing: 0.24em;
  color: var(--tt-magenta-400);
  text-align: center;
  margin-bottom: 12px;
}
.tt-howto__title {
  font-family: var(--tt-font-display);
  font-size: 40px;
  color: #fff;
  text-align: center;
  margin: 0 0 56px;
  letter-spacing: 0.02em;
  text-shadow: var(--tt-text-glow-cyan);
}
.tt-howto__steps {
  display: grid;
  grid-template-columns: var(--tt-steps-cols, repeat(4, 1fr));
  gap: 26px;
}
.tt-howto__step { transition-delay: var(--tt-reveal-delay, 0ms); }
.tt-howto__n {
  font-family: var(--tt-font-hud);
  font-weight: 800;
  font-size: 46px;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--tt-purple-500);
  margin-bottom: 14px;
  text-shadow: 0 0 18px rgba(157, 75, 255, 0.5);
}
.tt-howto__step-title {
  font-family: var(--tt-font-hud);
  font-weight: 700;
  font-size: 19px;
  color: #fff;
  margin-bottom: 8px;
}
.tt-howto__step-body {
  color: var(--tt-text-muted);
  font-size: 15px;
  line-height: 1.55;
}

/* ---- DownloadCTA ------------------------------------------------------ */
.tt-cta {
  position: relative;
  padding: 110px 40px;
  text-align: center;
  overflow: hidden;
}
/* .tt-grad-pan (base.css) supplies the pan animation AND a background-size of
   200% auto. This band overrode that inline with 100% 220%, so the override must
   still win — hence the doubled selector: it out-specifies .tt-grad-pan no matter
   which stylesheet the bundler emits first. */
.tt-cta__wash {
  position: absolute;
  inset: 0;
  background: var(--tt-grad-ocean);
}
.tt-cta__wash.tt-grad-pan { background-size: 100% 220%; }
.tt-cta__grid {
  position: absolute;
  inset: 0;
  background-image: var(--tt-grid);
  background-size: var(--tt-grid-size);
  opacity: 0.4;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000);
  mask-image: linear-gradient(180deg, transparent, #000);
}
.tt-cta__inner {
  position: relative;
  z-index: 2;
  font-family: var(--tt-font-body);
}
.tt-cta__title {
  font-family: var(--tt-font-display);
  font-size: 56px;
  color: #fff;
  margin: 0;
  letter-spacing: 0.02em;
  text-shadow: var(--tt-text-glow-white);
}
.tt-cta__body {
  color: var(--tt-foam-200);
  font-size: 18px;
  font-weight: 500;
  margin: 16px auto 34px;
  max-width: 560px;
}
.tt-cta__actions {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
}
.tt-cta__note {
  margin-top: 24px;
  font-family: var(--tt-font-mono);
  font-size: 12px;
  letter-spacing: 0.22em;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: rgba(5, 0, 16, 0.35);
  color: var(--tt-foam-200);
  padding: 10px 18px;
  border-radius: 999px;
  border: 1px solid rgba(232, 220, 255, 0.35);
}

/* ---- Studio ----------------------------------------------------------- */
.tt-studio {
  background: var(--tt-bg-base);
  padding: 100px 40px;
  font-family: var(--tt-font-body);
}
.tt-studio__inner {
  max-width: 820px;
  margin: 0 auto;
  text-align: center;
}
.tt-studio__mark {
  margin-bottom: 22px;
  filter: drop-shadow(0 0 14px rgba(255, 45, 149, 0.5));
}
.tt-studio__eyebrow {
  font-family: var(--tt-font-mono);
  font-size: 11px;
  letter-spacing: 0.24em;
  color: var(--tt-cyan-400);
  margin-bottom: 16px;
}
.tt-studio__title {
  font-family: var(--tt-font-display);
  font-size: 38px;
  color: #fff;
  margin: 0;
  line-height: 1.25;
  letter-spacing: 0.01em;
}
.tt-studio__body {
  color: var(--tt-text-muted);
  font-size: 18px;
  line-height: 1.6;
  margin: 22px auto 0;
  max-width: 600px;
}

/* ---- Footer ----------------------------------------------------------- */
.tt-footer {
  background: var(--tt-ink-950);
  padding: 40px;
  border-top: 1px solid var(--tt-border);
  font-family: var(--tt-font-mono);
}
.tt-footer__inner {
  max-width: 1160px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.tt-footer__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
}
.tt-footer__brand {
  display: flex;
  align-items: center;
  gap: 10px;
}
.tt-footer__brand-text {
  color: var(--tt-text-muted);
  font-size: 12px;
  letter-spacing: 0.1em;
}
.tt-footer__links {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
  color: var(--tt-text-muted);
  font-size: 11px;
  letter-spacing: 0.16em;
}
.tt-footer__link {
  color: inherit;
  text-decoration: none;
}
.tt-footer__rule {
  height: 1px;
  background: rgba(157, 75, 255, 0.16);
}
.tt-footer__row--legal {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
}
.tt-footer__legal-links {
  display: flex;
  gap: 22px;
  flex-wrap: wrap;
  color: var(--tt-text-dim);
  font-size: 11px;
  letter-spacing: 0.16em;
}
.tt-footer__meta {
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--tt-text-dim);
}

/* ---- Stat ------------------------------------------------------------- */
.tt-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.tt-stat__value {
  font-family: var(--tt-font-hud);
  font-weight: 700;
  font-size: 22px;
  color: var(--tt-stat-accent, var(--tt-text-primary));
  text-shadow: none;
}
.tt-stat__value.is-accent { text-shadow: 0 0 12px currentColor; }
.tt-stat__label {
  font-family: var(--tt-font-mono);
  font-size: 9px;
  letter-spacing: 0.2em;
  color: var(--tt-text-muted);
}

/* ---- Row (leaderboard) ------------------------------------------------ */
.tt-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  border-radius: var(--tt-radius-md);
  background: transparent;
  border: 1px solid var(--tt-border);
  box-shadow: none;
}
.tt-row.is-you {
  background: var(--tt-ink-700);
  border: 1px solid var(--tt-magenta-500);
  box-shadow: var(--tt-glow-magenta);
}
.tt-row__rank {
  font-family: var(--tt-font-hud);
  font-weight: 800;
  font-size: 20px;
  width: 30px;
  color: var(--tt-row-medal, var(--tt-text-muted));
  text-shadow: none;
}
/* Top three burn. */
.tt-row__rank.is-medal { text-shadow: 0 0 10px currentColor; }
.tt-row__name {
  flex: 1;
  font-family: var(--tt-font-body);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.04em;
  color: var(--tt-text-primary);
}
.tt-row.is-you .tt-row__name { color: var(--tt-magenta-300); }
.tt-row__score {
  font-family: var(--tt-font-hud);
  font-weight: 700;
  font-size: 16px;
  color: var(--tt-gold-500);
  font-variant-numeric: tabular-nums;
}

/* ---- FlipButton ------------------------------------------------------- */
.tt-flip-btn {
  -webkit-appearance: none;
  appearance: none;
  width: 88px;
  height: 56px;
  border-radius: var(--tt-radius-pill);
  background: var(--tt-grad-magenta);
  border: none;
  box-shadow: var(--tt-glow-magenta), var(--tt-bevel-top), var(--tt-bevel-bottom);
  color: var(--tt-ink-950);
  font-family: var(--tt-font-hud);
  font-weight: 800;
  font-size: 14px;
  letter-spacing: 0.1em;
  cursor: pointer;
  margin-bottom: 8px;
}

/* ---- CarveButton ------------------------------------------------------ */
.tt-carve-btn {
  -webkit-appearance: none;
  appearance: none;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--tt-glass-fill);
  -webkit-backdrop-filter: var(--tt-blur-panel);
  backdrop-filter: var(--tt-blur-panel);
  border: 2px solid var(--tt-cyan-500);
  box-shadow: var(--tt-glow-cyan);
  color: var(--tt-cyan-400);
  display: grid;
  place-items: center;
  cursor: pointer;
}
.tt-carve-btn__icon {
  transform: none;
  filter: drop-shadow(0 0 6px var(--tt-cyan-500));
}
/* The chevron is drawn pointing left; the right control mirrors it. */
.tt-carve-btn.is-right .tt-carve-btn__icon { transform: scaleX(-1); }

/* ---- BetaSignup ------------------------------------------------------- */
.tt-beta { padding: 0 0 96px; }
.tt-beta__inner {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 32px;
}
.tt-beta__card {
  position: relative;
  overflow: hidden;
  margin-top: 38px;
  padding: 38px 30px 30px;
  border-radius: var(--tt-radius-xl);
  border: 1px solid var(--tt-border-strong);
  background: var(--tt-glass-fill);
  -webkit-backdrop-filter: var(--tt-blur-panel);
  backdrop-filter: var(--tt-blur-panel);
  box-shadow: var(--tt-glow-soft), var(--tt-shadow-card);
}
.tt-beta__seam {
  position: absolute;
  left: 0;
  top: 0;
  height: 3px;
  width: 100%;
  background: linear-gradient(90deg, var(--tt-gold-500), var(--tt-magenta-500));
  box-shadow: var(--tt-glow-magenta);
}
.tt-beta__head { text-align: center; }
.tt-beta__eyebrow {
  font-family: var(--tt-font-mono);
  font-size: 12px;
  letter-spacing: 0.34em;
  color: var(--tt-gold-500);
}
.tt-beta__title {
  font-family: var(--tt-font-display);
  font-size: clamp(26px, 4.4vw, 38px);
  font-weight: 400;
  letter-spacing: 0.02em;
  margin: 10px 0 0;
  text-shadow: var(--tt-text-glow-magenta);
}
.tt-beta__perks {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
  margin: 16px 0 0;
}
.tt-beta__intro {
  color: var(--tt-text-secondary);
  font-size: 16px;
  line-height: 1.6;
  margin: 14px auto 0;
  max-width: 540px;
}
/* Locked = a prerequisite step is not done. Dimmed, not hidden: the tester must
   see what is coming, and why it is not clickable yet. */
.tt-beta__soon {
  font-family: var(--tt-font-mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  color: var(--tt-text-dim);
  margin: 24px 0 0;
  text-align: center;
}

/* ---- Beta step-1 form: we add them to the group, they don't go hunting for it ---- */
.tt-beta__form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}
.tt-beta__input {
  flex: 1 1 220px;
  min-width: 0;
  min-height: var(--tt-tap-min);
  padding: 0 14px;
  font-family: var(--tt-font-body);
  font-size: 15px;
  color: var(--tt-text-primary);
  background: var(--tt-ink-900);
  border: 1px solid var(--tt-border-strong);
  border-radius: var(--tt-radius-md);
}
.tt-beta__input::placeholder { color: var(--tt-text-dim); }
.tt-beta__input:focus-visible {
  outline: 2px solid var(--tt-cyan-400);
  outline-offset: 1px;
}
.tt-beta__input:disabled { opacity: 0.5; }
.tt-beta__err {
  flex: 1 0 100%;
  margin: 2px 0 0;
  font-size: 13px;
  color: var(--tt-danger-500);
}
.tt-beta__done {
  margin: 0;
  font-family: var(--tt-font-hud);
  font-size: 14px;
  letter-spacing: 0.06em;
  color: var(--tt-aqua-400);
}

/* ---- Beta: the single email submit ------------------------------------ */
/* One field, centred, and it STAYS after a successful add so a second address can
   go straight in. The old 1-2-3 gate is gone: Play cannot read our group, so an
   opt-in/store step would walk people toward a door we know is shut. */
.tt-beta__form--solo {
  justify-content: center;
  max-width: 520px;
  margin: 26px auto 0;
}
.tt-beta__form--solo .tt-beta__input {
  flex: 1 1 260px;
  text-align: left;
}
.tt-beta__form--solo .tt-beta__done,
.tt-beta__form--solo .tt-beta__err {
  flex: 1 0 100%;
  text-align: center;
}