/* =====================================================================
   BLEXX UI — the locked direction
   ---------------------------------------------------------------------
   One system. Near-black canvas, off-white ink, glass that floats and
   wells that recess, and a single ACCENT that carries meaning.

   The accent is the only thing that changes between contexts:
     data-blexx-accent="core"           off-white  (default, brand-neutral)
     data-blexx-accent="devotion"       #ff003c
     data-blexx-accent="chance"         #eff000
     data-blexx-accent="manifestation"  #004cff

   Everything else — type, spacing, radii, materials, motion — is fixed.

   Values are lifted from the live BLEXX site (blexx.me): #131112 canvas,
   #e9eeee ink, 12px radius, Urbane Rounded Heavy tracked uppercase for
   UI, Bitcount Grid for coded text, Inter Tight for reading.

   Namespaced under [data-blexx-theme] so it can drop into any project
   without leaking.
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. FONTS — local files, shipped with the kit
   ------------------------------------------------------------------- */
@font-face {
  font-family: 'Urbane Rounded Heavy';
  src: url('../assets/fonts/UrbaneRounded-Heavy.woff2') format('woff2'),
       url('../assets/fonts/UrbaneRounded-Heavy.ttf') format('truetype');
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Bitcount Grid';
  src: url('../assets/fonts/BitcountGridSingle_Roman-Regular.woff2') format('woff2'),
       url('../assets/fonts/BitcountGridSingle_Roman-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Bitcount Grid';
  src: url('../assets/fonts/BitcountGridSingle-Medium.woff2') format('woff2'),
       url('../assets/fonts/BitcountGridSingle-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter Tight';
  src: url('../assets/fonts/InterTight-Variable.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter Tight';
  src: url('../assets/fonts/InterTight-Variable-Italic.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

/* ---------------------------------------------------------------------
   2. TOKENS
   ------------------------------------------------------------------- */
[data-blexx-theme] {
  /* -- canvas & ink ------------------------------------------------ */
  --bx-void:        #131112;   /* primary background — near black      */
  --bx-void-2:      #1b1819;   /* raised surface base                  */
  --bx-void-3:      #0b0a0a;   /* recessed / well base                 */
  --bx-ink:         #e9eeee;   /* primary text — off white             */
  --bx-grey:        #3b3c3c;   /* dark grey, dividers on light         */

  /* -- accent (swapped by data-blexx-accent) ----------------------- */
  --bx-accent:      233, 238, 238;  /* r,g,b — core = off white        */
  --bx-accent-ink:  #131112;        /* text that sits ON the accent    */

  /* -- house colours (always available, for reference/legend) ------ */
  --bx-devotion:      #ff003c;
  --bx-chance:        #eff000;
  --bx-manifestation: #004cff;

  /* -- full brand palette ------------------------------------------ */
  --bx-red:        #ff0000;
  --bx-offwhite:   #e9eeee;
  --bx-magenta:    #ff00ff;
  --bx-green:      #00ff00;
  --bx-cyan:       #00fff3;
  --bx-lavender:   #e0cce3;
  --bx-olive:      #b3b400;
  --bx-burgundy:   #410010;
  --bx-teal:       #00817b;
  --bx-purple:     #550d91;
  --bx-softpurple: #9f98fb;
  --bx-pink:       #ff9295;
  --bx-mint:       #71ff8c;
  --bx-darkmag:    #8c0084;
  --bx-softblue:   #5892ff;

  /* -- text levels -------------------------------------------------- */
  --bx-t-hi:    rgba(233,238,238,.98);
  --bx-t-mid:   rgba(233,238,238,.62);
  --bx-t-low:   rgba(233,238,238,.40);
  --bx-t-faint: rgba(233,238,238,.24);

  /* -- lines -------------------------------------------------------- */
  --bx-line:    rgba(233,238,238,.12);
  --bx-line-2:  rgba(233,238,238,.20);
  --bx-line-3:  rgba(233,238,238,.34);

  /* -- the two materials -------------------------------------------
     VEIL  = floats. cards, panels, menus, toasts, modals.
     WELL  = recedes. fields, active states, tracks, selected items.
     There is no third material.                                     */
  --bx-veil-fill:   rgba(27,24,25,.72);
  --bx-veil-border: rgba(233,238,238,.20);
  --bx-veil-hi:     inset 0 1px 0 rgba(233,238,238,.14);
  --bx-veil-drop:   0 18px 48px rgba(0,0,0,.60);
  --bx-veil-blur:   blur(14px) saturate(1.15);

  --bx-well-fill:   rgba(11,10,10,.86);
  --bx-well-in:     inset 0 2px 10px rgba(0,0,0,.72);
  --bx-well-hi:     inset 0 1px 0 rgba(233,238,238,.06);

  /* -- glow — the BLEXX signature ---------------------------------- */
  --bx-glow-sm: 0 0 10px rgba(var(--bx-accent),.45);
  --bx-glow-md: 0 0 22px rgba(var(--bx-accent),.55);
  --bx-glow-lg: 0 0 44px rgba(var(--bx-accent),.65);

  /* -- radii -------------------------------------------------------- */
  --bx-r-pill: 999px;
  --bx-r-xl:   20px;
  --bx-r-lg:   16px;
  --bx-r-md:   12px;   /* the house radius — used everywhere by default */
  --bx-r-sm:   8px;

  /* -- space -------------------------------------------------------- */
  --bx-s-1: 4px;  --bx-s-2: 8px;  --bx-s-3: 12px; --bx-s-4: 16px;
  --bx-s-5: 24px; --bx-s-6: 32px; --bx-s-7: 48px; --bx-s-8: 72px;

  /* -- type --------------------------------------------------------- */
  --bx-display: 'Urbane Rounded Heavy', 'Inter Tight', system-ui, sans-serif;
  --bx-coded:   'Bitcount Grid', ui-monospace, monospace;
  --bx-body:    'Inter Tight', system-ui, -apple-system, sans-serif;

  /* -- motion ------------------------------------------------------- */
  --bx-fast: .16s cubic-bezier(.4,0,.2,1);
  --bx-slow: .5s  cubic-bezier(.4,0,.2,1);

  /* -- logo (kit-owned, never redraw) -------------------------------
     Embedded as a data URL on purpose: a CSS mask pointing at a file on
     disk is treated as cross-origin under file:// and silently renders
     nothing, so the mark vanished whenever a page was opened straight
     from Finder. A data URL is same-origin and always resolves.
     The original vector also ships at assets/logo/BLEXX-LOGO.svg. */
  --bx-logo: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyBpZD0iSXNvbGF0aW9uX01vZGUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmVyc2lvbj0iMS4xIiB2aWV3Qm94PSIwIDAgMTMxMy41MyAzNDIuMyI+CiAgPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDMwLjIuMSwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDIuMS4xIEJ1aWxkIDEpICAtLT4KICA8ZGVmcz4KICAgIDxzdHlsZT4KICAgICAgLnN0MCB7CiAgICAgICAgZmlsbDogI2ZmZjsKICAgICAgfQogICAgPC9zdHlsZT4KICA8L2RlZnM+CiAgPHBhdGggY2xhc3M9InN0MCIgZD0iTTI1NS43OSwxNzAuNzhjMzAuMzktOC4wNiw0OC4xMS0yOS40Miw1My40MS01Mi4wOSwxLjEyLTQuODcsMS42Ny05Ljc4LDEuNjctMTQuNjEsMC0zMi4yOS0yMS4xOS03OS40Ny0xMTMuMi03OS40N2gtMTE0LjQ3Yy0yOC40LDAtNDkuMTksMjEuMjMtNDkuMTksNTMuMTJ2MTg2LjkxYzAsMjcuNTQsMTQuNzQsNDYuMzQsMzYuMzIsNTEuNjEsNC4wNiwxLDguMzYsMS41MiwxMi44NiwxLjUyaDEyMy43OWM4Ljc2LDAsMTYuODktLjUyLDI0LjUtMS41Miw2My44MS04LjE0LDg3Ljg2LTQ4LjIxLDg3Ljg2LTgwLjUsMC04LjUtMS4yLTE2LjM2LTMuNjItMjMuNDctNy42NS0yMi4zNS0yNy40NC0zNy4zMi01OS45NC00MS41MVpNMTQxLjMyLDEyMi4zM2gyMy43NGMyMi40NiwwLDM5LjQzLS40LDM5LjQzLDE0Ljg5LDAsMTMuMTctMTUuMjksMTQuODUtMzMuOTMsMTQuODVoLTI5LjIzdi0yOS43M1pNMjExLjI2LDIxMi4yOWMtMi45MSw4LjQ2LTE0LjIyLDEyLjQ1LTM0LjMzLDEyLjQ1aC0zNS42MXYtMzMuMTdoNDEuNTRjMTYuMDksMCwyOS4yMyw2LjM5LDI5LjIzLDE1LjczLDAsMS44LS4yOCwzLjQ3LS44NCw0Ljk5WiIvPgogIDxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik00ODguMDMsMjEzLjI1aC01Mi41N1Y3Ny4yYzAtOC45NC0xLjg3LTE2Ljk2LTUuMjItMjMuODctOC44NC0xOC40OC0yNy44NC0yOS4yNi00OC4xOS0yOS4yNi0yOCwwLTUzLjg1LDIwLjQtNTMuODUsNTMuMTJ2MTg3LjQ1YzAsMjcuNTQsMTIuMDMsNDYuMzgsMzcuMDgsNTEuNjEsNC43LDEsOS44OCwxLjUyLDE1LjQ5LDEuNTJoMTA3LjI2YzI1Ljg1LDAsNTIuMTQtMTcsNTIuMTQtNTIuMjlzLTI2LjI5LTUyLjI1LTUyLjE0LTUyLjI1WiIvPgogIDxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik03NzQuMzcsMjI1LjA2Yy05LjcyLTcuOTQtMjIuMTUtMTEuODEtMzQuMTMtMTEuODFoLTgzLjk2bC4wOC0xMS4zOHM1OC4wMy4xNiw2My4wOS4xNmMyMC43OSwwLDM1LjY1LTkuNzQsMzUuNjUtMzEuODVzLTE1LjI5LTMxLjAxLTMzLjEtMzEuMDFjLTQuMjIsMC02NS43Mi41Mi02NS43Mi41MnYtMTAuNTRoNzguMDNjMTQuNywwLDI5Ljk1LTUuODcsNDAuMDctMTcuODQsNy4wOS04LjQyLDExLjY3LTE5Ljg4LDExLjY3LTM0LjQ0cy00LjU4LTI1Ljk4LTExLjY3LTM0LjQxYy0xMC4xMi0xMS45Ny0yNS4zNy0xNy44NC00MC4wNy0xNy44NGgtMTM2LjFjLTI4LjQsMC00OS4xOSwyMS4yMy00OS4xOSw1My4xMnYxODYuOTFjMCwzMi43MywyMC43OSw1My4xMiw0OS4xOSw1My4xMmgxNDIuMDNjMTEuOTksMCwyNC40Mi0zLjkxLDM0LjEzLTExLjgxLDEwLjYzLTguNjYsMTgtMjIuMDcsMTgtNDAuNDdzLTcuMzctMzEuODEtMTgtNDAuNDNaIi8+CiAgPHBhdGggY2xhc3M9InN0MCIgZD0iTTEyNjcuMTMsMjM2Ljc4bC02NC4zMi02Ny4yOSw2Mi4yOS02My42M2MzMC42OS0zMS42Myw2Ljk2LTgxLjMtNDAuOTYtODEuMy0yMi41NiwwLTM4LjEzLDE1LjE2LTQ4LjM2LDI3LjVsLTQwLjE2LDQ4LjAzLTQxLjc1LTQ3LjYzYy0xMS45LTEzLjUzLTI1LjAzLTI3LjktNDkuNTktMjcuOWgtOC44NWMtLjQ3LDAtLjkxLDAtMS4zOC4wNC0yMS44NC41OC0zNi45MywxNS40Mi00Ni45NCwyNy40NmwtNDAuMTksNDguMDMtNDEuNzUtNDcuNjNjLTguMjMtOS40LTE3LjA5LTE5LjE5LTI5LjkzLTI0LjI3LTUuNjYtMi4yOC0xMi4xMi0zLjYzLTE5LjYzLTMuNjMtNDAuOTksMC03MC4wNSw0Ni40LTM3LjczLDgwLjQ2bDU3LjM1LDYwLDUuNzcsNi4wNi01Ljc3LDUuOTEtNjAuMTgsNjEuNDVjLTMyLjM5LDMyLjgzLTQuOTMsNzkuMTksNDAuMTIsNzkuMTksNy4yOSwwLDEzLjg5LTEuNDksMjAuMDYtNC4zOSw5LjgzLTQuNSwxOC42NS0xMi4zMywyNy40Ni0yMi42N2w0My40Mi01MS43Myw0NS4wNiw1MC41YzEwLjc3LDEyLjI2LDIyLjUzLDI1LjE4LDQyLjg4LDI3LjU3aC4zM2MzLjA1LjQ3LDYuMjQuNzMsOS41LjczLDE4LjgzLDAsMzMuMTYtMTAuMjcsNDcuNTItMjcuMDZsNDMuMzktNTEuNzMsNDUuMDksNTAuNWMxMS45LDEzLjUzLDI0Ljk2LDI3LjksNDkuNTUsMjcuOSw0MC45NiwwLDcwLjA1LTQ2LjM2LDM3LjY5LTgwLjQ2Wk0xMTA2LjIxLDE3My4xNWMtMzQuNjQsMzUuMzMtOTEuNTYsMzUuMDEtMTI1Ljc3LS44bC0yLjg3LTIuOTdjMzQuNjQtMzUuNDEsOTEuNi0zNS4wNCwxMjUuODEuNzNsMi44NywzLjAxLS4wNC4wNFoiLz4KICA8cGF0aCBjbGFzcz0ic3QwIiBkPSJNMTA1OS45OSwxNzEuMTVjMCwxMC40MS04LjQyLDE4Ljg2LTE4LjgzLDE4Ljg2cy0xOC44Ni04LjQ1LTE4Ljg2LTE4Ljg2LDguNDUtMTguOSwxOC44Ni0xOC45LDE4LjgzLDguNDUsMTguODMsMTguOVoiLz4KPC9zdmc+");
}

/* -- accent variants -------------------------------------------------- */
[data-blexx-accent="core"]          { --bx-accent: 233,238,238; --bx-accent-ink:#131112; }
[data-blexx-accent="devotion"]      { --bx-accent: 255,0,60;    --bx-accent-ink:#ffffff; }
[data-blexx-accent="chance"]        { --bx-accent: 239,240,0;   --bx-accent-ink:#131112; }
[data-blexx-accent="manifestation"] { --bx-accent: 0,76,255;    --bx-accent-ink:#ffffff; }

/* ---------------------------------------------------------------------
   3. BASE
   ------------------------------------------------------------------- */
[data-blexx-theme] {
  font-family: var(--bx-body);
  color: var(--bx-t-hi);
  background-color: var(--bx-void);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
[data-blexx-theme] *,
[data-blexx-theme] *::before,
[data-blexx-theme] *::after { box-sizing: border-box; }

[data-blexx-theme] .bx-wrap { max-width: 1120px; margin: 0 auto; padding: 0 40px; position: relative; }
[data-blexx-theme] .bx-wrap-wide { max-width: 1360px; margin: 0 auto; padding: 0 40px; position: relative; }

/* ---------------------------------------------------------------------
   4. MATERIALS
   ------------------------------------------------------------------- */
[data-blexx-theme] .bx-veil {
  background: var(--bx-veil-fill);
  border: 1px solid var(--bx-veil-border);
  border-radius: var(--bx-r-md);
  box-shadow: var(--bx-veil-hi), var(--bx-veil-drop);
  backdrop-filter: var(--bx-veil-blur);
  -webkit-backdrop-filter: var(--bx-veil-blur);
}
[data-blexx-theme] .bx-well {
  background: var(--bx-well-fill);
  border: 1px solid var(--bx-line);
  border-radius: var(--bx-r-md);
  box-shadow: var(--bx-well-in), var(--bx-well-hi);
}

/* ---------------------------------------------------------------------
   5. TYPE
   ------------------------------------------------------------------- */
[data-blexx-theme] .bx-display {
  font-family: var(--bx-display);
  font-weight: 400;
  line-height: .92;
  letter-spacing: .01em;
  text-transform: uppercase;
  color: var(--bx-ink);
}
[data-blexx-theme] .bx-d1 { font-family:var(--bx-display); font-weight:400; text-transform:uppercase; font-size:clamp(48px,8vw,96px); line-height:.9;  letter-spacing:.02em; }
[data-blexx-theme] .bx-d2 { font-family:var(--bx-display); font-weight:400; text-transform:uppercase; font-size:clamp(32px,4.5vw,52px); line-height:.95; letter-spacing:.03em; }
[data-blexx-theme] .bx-d3 { font-family:var(--bx-display); font-weight:400; text-transform:uppercase; font-size:24px; line-height:1.1; letter-spacing:.06em; }

[data-blexx-theme] .bx-label {
  font-family: var(--bx-display);
  font-size: 12px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--bx-t-low);
}
[data-blexx-theme] .bx-eyebrow {
  font-family: var(--bx-coded);
  font-size: 11px;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: rgb(var(--bx-accent));
}
[data-blexx-theme] .bx-coded {
  font-family: var(--bx-coded);
  font-weight: 400;
  letter-spacing: .06em;
  color: var(--bx-t-mid);
}
[data-blexx-theme] .bx-body   { font-family:var(--bx-body); font-size:15px; color:var(--bx-t-mid); line-height:1.65; }
[data-blexx-theme] .bx-lead   { font-family:var(--bx-body); font-size:18px; color:var(--bx-t-mid); line-height:1.55; }
[data-blexx-theme] .bx-micro  { font-family:var(--bx-body); font-size:12.5px; color:var(--bx-t-low); }
[data-blexx-theme] .bx-glow-text { color: rgb(var(--bx-accent)); text-shadow: var(--bx-glow-md); }

/* ---------------------------------------------------------------------
   6. LOGO — masked so it recolours; never redrawn
   ------------------------------------------------------------------- */
[data-blexx-theme] .bx-logo {
  display: block;
  aspect-ratio: 1313.53 / 342.3;
  height: 44px;
  -webkit-mask: var(--bx-logo) center/contain no-repeat;
          mask: var(--bx-logo) center/contain no-repeat;
  background: var(--bx-ink);
  filter: drop-shadow(0 0 12px rgba(233,238,238,.55));
}
[data-blexx-theme] .bx-logo-accent {
  background: rgb(var(--bx-accent));
  filter: drop-shadow(0 0 14px rgba(var(--bx-accent),.65));
}
[data-blexx-theme] .bx-logo-sm { height: 26px; }
[data-blexx-theme] .bx-logo-lg { height: 76px; }
[data-blexx-theme] .bx-logo-pulse { animation: bx-logo-pulse 2.4s ease-in-out infinite; }
@keyframes bx-logo-pulse {
  0%,100% { filter: drop-shadow(0 0 8px rgba(var(--bx-accent),.5)); }
  50%     { filter: drop-shadow(0 0 26px rgba(var(--bx-accent),1)); }
}

/* ---------------------------------------------------------------------
   7. BUTTONS
   ------------------------------------------------------------------- */
[data-blexx-theme] .bx-btn {
  font-family: var(--bx-display);
  font-size: 13px;
  letter-spacing: .2em;
  text-transform: uppercase;
  border: 1px solid transparent;
  border-radius: var(--bx-r-md);
  padding: 14px 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  cursor: pointer;
  transition: var(--bx-fast);
  text-decoration: none;
  white-space: nowrap;
  background: transparent;
}
[data-blexx-theme] .bx-btn svg { width:16px; height:16px; stroke:currentColor; fill:none; stroke-width:1.7; flex:none; }

[data-blexx-theme] .bx-btn-primary {
  background: rgb(var(--bx-accent));
  color: var(--bx-accent-ink);
  box-shadow: 0 0 0 rgba(var(--bx-accent),0);
}
[data-blexx-theme] .bx-btn-primary:hover { box-shadow: var(--bx-glow-md); transform: translateY(-1px); }
[data-blexx-theme] .bx-btn-primary:active { transform: translateY(0); }

[data-blexx-theme] .bx-btn-secondary {
  background: transparent;
  color: var(--bx-ink);
  border-color: var(--bx-line-3);
}
[data-blexx-theme] .bx-btn-secondary:hover { background: var(--bx-ink); color: var(--bx-void); border-color: var(--bx-ink); }

[data-blexx-theme] .bx-btn-ghost { color: var(--bx-t-mid); }
[data-blexx-theme] .bx-btn-ghost:hover { color: var(--bx-ink); background: rgba(233,238,238,.07); }

[data-blexx-theme] .bx-btn-sm { padding:10px 18px; font-size:11px; letter-spacing:.18em; }
[data-blexx-theme] .bx-btn-lg { padding:18px 40px; font-size:15px; }
[data-blexx-theme] .bx-btn-block { width:100%; }
[data-blexx-theme] .bx-btn:disabled,[data-blexx-theme] .bx-btn[aria-disabled="true"] { opacity:.35; pointer-events:none; }

[data-blexx-theme] .bx-icon-btn {
  width: 42px; height: 42px;
  display: grid; place-items: center;
  border-radius: var(--bx-r-md);
  border: 1px solid var(--bx-line-2);
  background: transparent;
  color: var(--bx-t-mid);
  cursor: pointer;
  transition: var(--bx-fast);
}
[data-blexx-theme] .bx-icon-btn svg { width:18px; height:18px; stroke:currentColor; fill:none; stroke-width:1.7; }
[data-blexx-theme] .bx-icon-btn:hover { color: var(--bx-ink); border-color: var(--bx-line-3); background: rgba(233,238,238,.06); }

/* ---------------------------------------------------------------------
   8. FIELDS — always the WELL material
   ------------------------------------------------------------------- */
[data-blexx-theme] .bx-field { display:flex; flex-direction:column; gap:8px; }
[data-blexx-theme] .bx-field > label {
  font-family: var(--bx-display);
  font-size: 11px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--bx-t-low);
}
[data-blexx-theme] .bx-input,
[data-blexx-theme] .bx-textarea,
[data-blexx-theme] .bx-select {
  font-family: var(--bx-body);
  font-size: 15px;
  color: var(--bx-ink);
  background: var(--bx-well-fill);
  border: 1px solid var(--bx-line);
  border-radius: var(--bx-r-md);
  box-shadow: var(--bx-well-in);
  padding: 13px 16px;
  width: 100%;
  transition: var(--bx-fast);
  outline: none;
}
[data-blexx-theme] .bx-textarea { min-height:120px; resize:vertical; line-height:1.6; }
[data-blexx-theme] .bx-input::placeholder,
[data-blexx-theme] .bx-textarea::placeholder { color: var(--bx-t-faint); }
[data-blexx-theme] .bx-input:focus,
[data-blexx-theme] .bx-textarea:focus,
[data-blexx-theme] .bx-select:focus {
  border-color: rgba(var(--bx-accent),.7);
  box-shadow: var(--bx-well-in), 0 0 0 3px rgba(var(--bx-accent),.16);
}
[data-blexx-theme] .bx-select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e9eeee' stroke-width='1.7'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 18px;
  padding-right: 42px;
}
[data-blexx-theme] .bx-select option { background: var(--bx-void-2); color: var(--bx-ink); }
[data-blexx-theme] .bx-hint  { font-size:12.5px; color:var(--bx-t-low); }
[data-blexx-theme] .bx-error { font-size:12.5px; color:var(--bx-devotion); }

/* checkbox / radio */
[data-blexx-theme] .bx-check { display:inline-flex; align-items:center; gap:10px; cursor:pointer; font-size:14px; color:var(--bx-t-mid); }
[data-blexx-theme] .bx-check input { appearance:none; width:20px; height:20px; flex:none;
  background:var(--bx-well-fill); border:1px solid var(--bx-line-2); border-radius:6px;
  box-shadow:var(--bx-well-in); cursor:pointer; transition:var(--bx-fast); display:grid; place-items:center; }
[data-blexx-theme] .bx-check input[type="radio"] { border-radius:50%; }
[data-blexx-theme] .bx-check input:checked { background:rgb(var(--bx-accent)); border-color:rgb(var(--bx-accent)); box-shadow:var(--bx-glow-sm); }
[data-blexx-theme] .bx-check input:checked::after {
  content:""; width:10px; height:10px;
  background:var(--bx-accent-ink);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat;
}
[data-blexx-theme] .bx-check input[type="radio"]:checked::after { -webkit-mask:none; mask:none; border-radius:50%; width:8px; height:8px; }

/* switch */
[data-blexx-theme] .bx-switch { position:relative; display:inline-block; width:52px; height:28px; flex:none; }
[data-blexx-theme] .bx-switch input { opacity:0; width:0; height:0; }
[data-blexx-theme] .bx-switch .bx-track {
  position:absolute; inset:0; cursor:pointer; border-radius:var(--bx-r-pill);
  background:var(--bx-well-fill); border:1px solid var(--bx-line-2);
  box-shadow:var(--bx-well-in); transition:var(--bx-fast);
}
[data-blexx-theme] .bx-switch .bx-track::before {
  content:""; position:absolute; height:20px; width:20px; left:3px; top:3px;
  border-radius:50%; background:var(--bx-t-low); transition:var(--bx-fast);
}
[data-blexx-theme] .bx-switch input:checked + .bx-track { background:rgba(var(--bx-accent),.22); border-color:rgba(var(--bx-accent),.6); }
[data-blexx-theme] .bx-switch input:checked + .bx-track::before { transform:translateX(24px); background:rgb(var(--bx-accent)); box-shadow:var(--bx-glow-sm); }

/* ---------------------------------------------------------------------
   9. SEGMENTED / TABS — active state is always a WELL
   ------------------------------------------------------------------- */
[data-blexx-theme] .bx-seg {
  display: inline-flex; gap: 4px; padding: 4px;
  border-radius: var(--bx-r-md);
  background: var(--bx-veil-fill);
  border: 1px solid var(--bx-veil-border);
  backdrop-filter: var(--bx-veil-blur);
  -webkit-backdrop-filter: var(--bx-veil-blur);
}
[data-blexx-theme] .bx-seg button {
  font-family: var(--bx-display); font-size:11px; letter-spacing:.18em; text-transform:uppercase;
  padding: 10px 20px; border-radius: var(--bx-r-sm); border: none;
  background: transparent; color: var(--bx-t-low); cursor: pointer; transition: var(--bx-fast);
}
[data-blexx-theme] .bx-seg button:hover { color: var(--bx-t-mid); }
[data-blexx-theme] .bx-seg button[aria-selected="true"],
[data-blexx-theme] .bx-seg button.is-active {
  background: var(--bx-well-fill);
  box-shadow: var(--bx-well-in);
  color: rgb(var(--bx-accent));
}

[data-blexx-theme] .bx-tabs { display:flex; gap:32px; border-bottom:1px solid var(--bx-line); }
[data-blexx-theme] .bx-tabs button {
  font-family: var(--bx-display); font-size:12px; letter-spacing:.2em; text-transform:uppercase;
  background:none; border:none; padding:0 0 16px; color:var(--bx-t-low); cursor:pointer;
  border-bottom:2px solid transparent; margin-bottom:-1px; transition:var(--bx-fast);
}
[data-blexx-theme] .bx-tabs button[aria-selected="true"],
[data-blexx-theme] .bx-tabs button.is-active {
  color: rgb(var(--bx-accent));
  border-bottom-color: rgb(var(--bx-accent));
  text-shadow: var(--bx-glow-sm);
}

/* ---------------------------------------------------------------------
   10. PILLS / BADGES / STATUS
   ------------------------------------------------------------------- */
[data-blexx-theme] .bx-pill {
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 16px; border-radius:var(--bx-r-pill);
  font-family:var(--bx-display); font-size:11px; letter-spacing:.18em; text-transform:uppercase;
  border:1px solid var(--bx-line-2); color:var(--bx-t-mid); background:transparent;
}
[data-blexx-theme] .bx-pill .bx-dot { width:7px; height:7px; border-radius:50%; background:currentColor; flex:none; }
[data-blexx-theme] .bx-pill-accent { color:rgb(var(--bx-accent)); border-color:rgba(var(--bx-accent),.5); background:rgba(var(--bx-accent),.10); }
[data-blexx-theme] .bx-pill-accent .bx-dot { box-shadow:0 0 8px rgba(var(--bx-accent),.9); }
[data-blexx-theme] .bx-pill-solid { background:rgb(var(--bx-accent)); color:var(--bx-accent-ink); border-color:transparent; }

[data-blexx-theme] .bx-pill-devotion      { color:var(--bx-devotion);      border-color:rgba(255,0,60,.5);  background:rgba(255,0,60,.10); }
[data-blexx-theme] .bx-pill-chance        { color:var(--bx-chance);        border-color:rgba(239,240,0,.5); background:rgba(239,240,0,.10); }
[data-blexx-theme] .bx-pill-manifestation { color:var(--bx-manifestation); border-color:rgba(0,76,255,.6);  background:rgba(0,76,255,.14); }

[data-blexx-theme] .bx-badge {
  display:inline-flex; align-items:center; gap:6px;
  font-family:var(--bx-coded); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase;
  padding:4px 10px; border-radius:var(--bx-r-sm);
  background:rgba(233,238,238,.08); color:var(--bx-t-mid);
}

/* ---------------------------------------------------------------------
   11. CARDS / PANELS / TILES
   ------------------------------------------------------------------- */
[data-blexx-theme] .bx-card {
  background: var(--bx-veil-fill);
  border: 1px solid var(--bx-veil-border);
  border-radius: var(--bx-r-md);
  box-shadow: var(--bx-veil-hi), var(--bx-veil-drop);
  backdrop-filter: var(--bx-veil-blur);
  -webkit-backdrop-filter: var(--bx-veil-blur);
  padding: 28px;
  transition: var(--bx-fast);
}
[data-blexx-theme] a.bx-card:hover,
[data-blexx-theme] .bx-card-interactive:hover {
  border-color: rgba(var(--bx-accent),.55);
  box-shadow: var(--bx-veil-hi), var(--bx-veil-drop), 0 0 26px rgba(var(--bx-accent),.22);
  transform: translateY(-2px);
}
[data-blexx-theme] .bx-card h3 { font-family:var(--bx-display); font-size:16px; letter-spacing:.08em; text-transform:uppercase; color:var(--bx-ink); margin:0 0 8px; }
[data-blexx-theme] .bx-card p  { font-size:14px; color:var(--bx-t-mid); margin:0; line-height:1.6; }

[data-blexx-theme] .bx-tile {
  position: relative; overflow: hidden;
  border-radius: var(--bx-r-md);
  border: 1px solid var(--bx-veil-border);
  background: var(--bx-veil-fill);
  backdrop-filter: var(--bx-veil-blur);
  -webkit-backdrop-filter: var(--bx-veil-blur);
  padding: 22px; min-height: 172px;
  display: flex; flex-direction: column; justify-content: space-between;
  transition: var(--bx-fast);
}
[data-blexx-theme] .bx-tile::before {
  content:""; position:absolute; inset:0; pointer-events:none;
  background: radial-gradient(130% 90% at 14% -10%, rgba(var(--bx-accent),.20), transparent 56%);
}
[data-blexx-theme] .bx-tile > * { position:relative; z-index:1; }
[data-blexx-theme] .bx-tile:hover { border-color: rgba(var(--bx-accent),.5); }
[data-blexx-theme] .bx-tile .bx-tic {
  width:40px; height:40px; border-radius:var(--bx-r-sm); display:grid; place-items:center;
  background:rgba(var(--bx-accent),.16); border:1px solid rgba(var(--bx-accent),.42);
  color:rgb(var(--bx-accent));
}
[data-blexx-theme] .bx-tile .bx-tic svg { width:19px; height:19px; stroke:currentColor; fill:none; stroke-width:1.7; }
[data-blexx-theme] .bx-tile h4 { font-family:var(--bx-display); font-size:14px; letter-spacing:.1em; text-transform:uppercase; margin:0; color:var(--bx-ink); }

[data-blexx-theme] .bx-panel {
  background: var(--bx-veil-fill);
  border: 1px solid var(--bx-veil-border);
  border-radius: var(--bx-r-lg);
  backdrop-filter: var(--bx-veil-blur);
  -webkit-backdrop-filter: var(--bx-veil-blur);
  padding: 32px;
}

/* swatch — for palettes and colour docs */
[data-blexx-theme] .bx-swatch { border-radius:var(--bx-r-md); overflow:hidden; border:1px solid var(--bx-line); background:var(--bx-void-2); }
[data-blexx-theme] .bx-swatch .bx-chip { height:88px; display:block; }
[data-blexx-theme] .bx-swatch .bx-meta { padding:12px 14px; }
[data-blexx-theme] .bx-swatch .bx-name { font-family:var(--bx-display); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--bx-ink); }
[data-blexx-theme] .bx-swatch .bx-hex  { font-family:var(--bx-coded); font-size:11px; color:var(--bx-t-low); margin-top:3px; letter-spacing:.08em; }

/* ---------------------------------------------------------------------
   12. NAV
   ------------------------------------------------------------------- */
[data-blexx-theme] .bx-nav {
  display:flex; align-items:center; gap:8px;
  padding:10px 14px; border-radius:var(--bx-r-pill);
  background:var(--bx-veil-fill); border:1px solid var(--bx-veil-border);
  backdrop-filter:var(--bx-veil-blur); -webkit-backdrop-filter:var(--bx-veil-blur);
}
[data-blexx-theme] .bx-nav a {
  font-family:var(--bx-display); font-size:11px; letter-spacing:.18em; text-transform:uppercase;
  padding:10px 18px; border-radius:var(--bx-r-pill); color:var(--bx-t-low);
  text-decoration:none; transition:var(--bx-fast);
}
[data-blexx-theme] .bx-nav a:hover { color:var(--bx-t-hi); }
[data-blexx-theme] .bx-nav a[aria-current="page"],
[data-blexx-theme] .bx-nav a.is-active {
  background:var(--bx-well-fill); box-shadow:var(--bx-well-in);
  color:rgb(var(--bx-accent)); text-shadow:var(--bx-glow-sm);
}

[data-blexx-theme] .bx-topbar {
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  padding:18px 0; border-bottom:1px solid var(--bx-line);
}
[data-blexx-theme] .bx-sidenav { display:flex; flex-direction:column; gap:2px; }
[data-blexx-theme] .bx-sidenav a {
  font-family:var(--bx-display); font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  padding:11px 14px; border-radius:var(--bx-r-sm); color:var(--bx-t-low); text-decoration:none;
  transition:var(--bx-fast); border-left:2px solid transparent;
}
[data-blexx-theme] .bx-sidenav a:hover { color:var(--bx-t-hi); background:rgba(233,238,238,.05); }
[data-blexx-theme] .bx-sidenav a.is-active { color:rgb(var(--bx-accent)); border-left-color:rgb(var(--bx-accent)); background:rgba(var(--bx-accent),.07); }

/* ---------------------------------------------------------------------
   13. TABLE
   ------------------------------------------------------------------- */
[data-blexx-theme] .bx-table { width:100%; border-collapse:collapse; font-size:14px; }
[data-blexx-theme] .bx-table th {
  font-family:var(--bx-display); font-size:10.5px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--bx-t-low); text-align:left; padding:14px 16px; border-bottom:1px solid var(--bx-line-2); font-weight:400;
}
[data-blexx-theme] .bx-table td { padding:16px; border-bottom:1px solid var(--bx-line); color:var(--bx-t-mid); }
[data-blexx-theme] .bx-table tbody tr { transition:var(--bx-fast); }
[data-blexx-theme] .bx-table tbody tr:hover { background:rgba(233,238,238,.035); }
[data-blexx-theme] .bx-table td.bx-num { font-family:var(--bx-coded); color:var(--bx-ink); letter-spacing:.05em; }

/* ---------------------------------------------------------------------
   14. UPLOAD / DROPZONE
   ------------------------------------------------------------------- */
[data-blexx-theme] .bx-drop {
  border: 1px dashed var(--bx-line-3);
  border-radius: var(--bx-r-md);
  background: var(--bx-well-fill);
  box-shadow: var(--bx-well-in);
  padding: 44px 28px;
  text-align: center;
  transition: var(--bx-fast);
  cursor: pointer;
}
[data-blexx-theme] .bx-drop:hover,
[data-blexx-theme] .bx-drop.is-over {
  border-color: rgb(var(--bx-accent));
  background: rgba(var(--bx-accent),.06);
  box-shadow: var(--bx-well-in), 0 0 24px rgba(var(--bx-accent),.18) inset;
}
[data-blexx-theme] .bx-drop svg { width:30px; height:30px; stroke:rgb(var(--bx-accent)); fill:none; stroke-width:1.5; margin-bottom:14px; }
[data-blexx-theme] .bx-drop .bx-drop-title { font-family:var(--bx-display); font-size:12px; letter-spacing:.2em; text-transform:uppercase; color:var(--bx-ink); }
[data-blexx-theme] .bx-drop .bx-drop-sub   { font-size:13px; color:var(--bx-t-low); margin-top:8px; }

/* ---------------------------------------------------------------------
   15. PROGRESS / LOADER
   ------------------------------------------------------------------- */
[data-blexx-theme] .bx-progress {
  height:6px; border-radius:var(--bx-r-pill); overflow:hidden;
  background:var(--bx-well-fill); box-shadow:var(--bx-well-in);
}
[data-blexx-theme] .bx-progress .bx-bar {
  height:100%; border-radius:var(--bx-r-pill);
  background:rgb(var(--bx-accent)); box-shadow:var(--bx-glow-sm);
  transition:width var(--bx-slow);
}
[data-blexx-theme] .bx-spinner {
  width:22px; height:22px; border-radius:50%;
  border:2px solid rgba(var(--bx-accent),.2);
  border-top-color:rgb(var(--bx-accent));
  animation:bx-spin .8s linear infinite;
}
@keyframes bx-spin { to { transform:rotate(360deg); } }

/* the BLEXX orb — the brand's loading / focus mark */
[data-blexx-theme] .bx-orb {
  width:36px; height:36px; border-radius:50%;
  background:radial-gradient(circle, rgba(var(--bx-accent),1) 0%, rgba(var(--bx-accent),.7) 40%, rgba(var(--bx-accent),0) 80%);
  box-shadow:0 0 20px rgba(var(--bx-accent),.9), 0 0 40px rgba(var(--bx-accent),.5);
  mix-blend-mode:screen;
}
[data-blexx-theme] .bx-orb-pulse { animation:bx-pulse 2.5s ease-in-out infinite; }
@keyframes bx-pulse { 0%,100% { opacity:1; } 50% { opacity:.55; } }

/* ---------------------------------------------------------------------
   16. TOAST / MODAL / TOOLTIP
   ------------------------------------------------------------------- */
[data-blexx-theme] .bx-toast {
  display:flex; align-items:center; gap:14px;
  padding:16px 20px; border-radius:var(--bx-r-md);
  background:var(--bx-veil-fill); border:1px solid var(--bx-veil-border);
  box-shadow:var(--bx-veil-hi), var(--bx-veil-drop);
  backdrop-filter:var(--bx-veil-blur); -webkit-backdrop-filter:var(--bx-veil-blur);
  font-size:14px; color:var(--bx-t-hi);
}
[data-blexx-theme] .bx-toast .bx-toast-icon {
  width:30px; height:30px; border-radius:50%; display:grid; place-items:center; flex:none;
  background:rgba(var(--bx-accent),.18); border:1px solid rgba(var(--bx-accent),.5); color:rgb(var(--bx-accent));
}
[data-blexx-theme] .bx-toast .bx-toast-icon svg { width:15px; height:15px; stroke:currentColor; fill:none; stroke-width:2; }

[data-blexx-theme] .bx-scrim {
  position:fixed; inset:0; background:rgba(19,17,18,.82);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); z-index:900;
}
[data-blexx-theme] .bx-modal {
  position:fixed; top:50%; left:50%; transform:translate(-50%,-50%);
  width:min(560px, calc(100vw - 48px)); z-index:901;
  background:rgba(19,17,18,.96);
  border:1px solid var(--bx-veil-border); border-radius:var(--bx-r-lg);
  box-shadow:var(--bx-veil-hi), 0 30px 80px rgba(0,0,0,.75);
  backdrop-filter:var(--bx-veil-blur); -webkit-backdrop-filter:var(--bx-veil-blur);
  padding:32px;
}
[data-blexx-theme] .bx-modal-close {
  position:absolute; top:16px; right:18px; background:none; border:none;
  color:var(--bx-t-low); font-size:22px; line-height:1; cursor:pointer; padding:4px 8px; transition:var(--bx-fast);
}
[data-blexx-theme] .bx-modal-close:hover { color:var(--bx-ink); }

[data-blexx-theme] .bx-tooltip {
  display:inline-block; padding:8px 12px; border-radius:var(--bx-r-sm);
  background:rgba(11,10,10,.96); border:1px solid var(--bx-line-2);
  font-family:var(--bx-coded); font-size:11px; letter-spacing:.06em; color:var(--bx-t-hi);
}

/* ---------------------------------------------------------------------
   17. MISC
   ------------------------------------------------------------------- */
[data-blexx-theme] .bx-divider { height:1px; background:var(--bx-line); border:none; margin:0; }
[data-blexx-theme] .bx-rule-glow { height:1px; border:none; background:linear-gradient(90deg,transparent,rgba(var(--bx-accent),.7),transparent); box-shadow:0 0 12px rgba(var(--bx-accent),.5); }
[data-blexx-theme] .bx-avatar {
  width:40px; height:40px; border-radius:50%; display:grid; place-items:center; flex:none;
  background:rgba(var(--bx-accent),.16); border:1px solid rgba(var(--bx-accent),.45);
  color:rgb(var(--bx-accent)); font-family:var(--bx-display); font-size:13px; letter-spacing:.08em;
}
[data-blexx-theme] .bx-code {
  font-family:var(--bx-coded); font-size:12.5px; letter-spacing:.04em; color:var(--bx-t-hi);
  background:var(--bx-well-fill); box-shadow:var(--bx-well-in);
  border:1px solid var(--bx-line); border-radius:var(--bx-r-sm);
  padding:16px 18px; display:block; overflow-x:auto; white-space:pre; line-height:1.7;
}
[data-blexx-theme] code.bx-inline { font-family:var(--bx-coded); font-size:.9em; background:rgba(233,238,238,.08); padding:2px 6px; border-radius:5px; color:rgb(var(--bx-accent)); }
[data-blexx-theme] .bx-kv { display:flex; justify-content:space-between; gap:16px; padding:10px 0; border-top:1px solid var(--bx-line); font-size:13px; }
[data-blexx-theme] .bx-kv > :first-child { color:var(--bx-t-low); }
[data-blexx-theme] .bx-kv > :last-child  { font-family:var(--bx-coded); color:var(--bx-t-hi); }

/* section scaffolding */
[data-blexx-theme] .bx-section { padding:80px 0; border-bottom:1px solid var(--bx-line); }
[data-blexx-theme] .bx-sec-head { display:flex; align-items:baseline; gap:18px; margin-bottom:40px; flex-wrap:wrap; }
[data-blexx-theme] .bx-sec-head .bx-num { font-family:var(--bx-coded); font-size:12px; color:rgb(var(--bx-accent)); letter-spacing:.2em; }
[data-blexx-theme] .bx-sec-head h2 { font-family:var(--bx-display); font-weight:400; font-size:34px; letter-spacing:.04em; text-transform:uppercase; color:var(--bx-ink); margin:0; }
[data-blexx-theme] .bx-sec-head p  { margin:0 0 0 auto; max-width:400px; font-size:13.5px; color:var(--bx-t-mid); text-align:right; }

/* grids */
[data-blexx-theme] .bx-grid-2 { display:grid; grid-template-columns:repeat(2,1fr); gap:20px; }
[data-blexx-theme] .bx-grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
[data-blexx-theme] .bx-grid-4 { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
[data-blexx-theme] .bx-row    { display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
[data-blexx-theme] .bx-stack  { display:flex; flex-direction:column; gap:16px; }

/* grid and flex children default to min-content width, which lets long
   strings and pre blocks blow out the page. Never let them. */
[data-blexx-theme] .bx-grid-2 > *,
[data-blexx-theme] .bx-grid-3 > *,
[data-blexx-theme] .bx-grid-4 > *,
[data-blexx-theme] .bx-stack  > *,
[data-blexx-theme] .bx-row    > * { min-width: 0; }

@media (max-width: 900px) {
  [data-blexx-theme] .bx-grid-3,
  [data-blexx-theme] .bx-grid-4 { grid-template-columns:repeat(2,1fr); }
  [data-blexx-theme] .bx-sec-head p { margin-left:0; text-align:left; }
}
@media (max-width: 620px) {
  [data-blexx-theme] .bx-grid-2,
  [data-blexx-theme] .bx-grid-3,
  [data-blexx-theme] .bx-grid-4 { grid-template-columns:1fr; }
  [data-blexx-theme] .bx-wrap,
  [data-blexx-theme] .bx-wrap-wide { padding:0 22px; }
  [data-blexx-theme] .bx-section { padding:56px 0; }
  /* let long button labels wrap instead of pushing the page sideways */
  [data-blexx-theme] .bx-btn { white-space:normal; text-align:center; }
  /* segmented controls wrap rather than scroll off-screen */
  [data-blexx-theme] .bx-seg { display:flex; flex-wrap:wrap; }
  [data-blexx-theme] .bx-seg button { flex:1 1 auto; }
  [data-blexx-theme] .bx-tabs { overflow-x:auto; gap:22px; }
  [data-blexx-theme] .bx-nav  { flex-wrap:wrap; }
  [data-blexx-theme] .bx-table { display:block; overflow-x:auto; max-width:100%; white-space:nowrap; }
  [data-blexx-theme] .bx-code { max-width:100%; }
  [data-blexx-theme] .bx-d1 { font-size:clamp(38px,11vw,96px); }
  [data-blexx-theme] .bx-d2 { font-size:clamp(26px,7.5vw,52px); }
}

@media (prefers-reduced-motion: reduce) {
  [data-blexx-theme] *,
  [data-blexx-theme] *::before,
  [data-blexx-theme] *::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
}