@layer wa-native, wa-base, wa-utilities, wa-color-palette, wa-color-variant, wa-theme, wa-theme-dimension, wa-theme-overrides;
/*
 * The panel's Web Awesome theme: the Lit Design System theme from
 * packages/webawesome-theme-lit. The panel's density (13px body text, the
 * toolbar control height, the DevTools fonts) is not here: `injectTokens()` sets it
 * (`webAwesome`, see src/lib/token-text.ts), on `:root` in the panel and on a
 * wrapper where a page embeds panel views.
 *
 * Only the panel document loads this. The in-page UI (src/lib/runtime) never
 * does: registering `wa-*` or WA's `:root` tokens in the user's app would
 * collide with apps that use Web Awesome themselves.
 */
/*
 * Web Awesome theme for the Lit Design System: `.wa-theme-lit`, and the
 * default on `:root` once this file loads.
 *
 * WA's default theme stays underneath for every token not set here, so a
 * WA upgrade that adds one never leaves it undefined. Everything this file
 * sets is a `var()` onto ../tokens.css; no colour is written here. The
 * tokens switch schemes on their own (see scripts/generate.mjs), so one
 * mapping serves dark and light, and WA's `.wa-light` / `.wa-dark` blocks
 * are overridden from the `wa-theme-overrides` layer rather than repeated.
 */
/* Order of precedence for all cascade layers in Web Awesome */
@layer wa-base {
  /**
    Because headers are sticky, this is needed to make sure page fragment anchors scroll down past the headers / subheaders and are visible.
    IE: \`<a href="#id-for-h2">\` anchors.
    */
  wa-page :is(*, *:after, *:before) {
    scroll-margin-top: var(--scroll-margin-top);
  }

  wa-page[view='desktop'] [data-toggle-nav] {
    display: none;
  }

  wa-page[view='mobile'] .wa-desktop-only,
  wa-page[view='desktop'] .wa-mobile-only {
    display: none !important;
  }
}
/* Rules shared by all palettes */
@layer wa-color-variant {
  :where(:root), /* default */
  .wa-brand-blue {
    --wa-color-brand-95: var(--wa-color-blue-95);
    --wa-color-brand-90: var(--wa-color-blue-90);
    --wa-color-brand-80: var(--wa-color-blue-80);
    --wa-color-brand-70: var(--wa-color-blue-70);
    --wa-color-brand-60: var(--wa-color-blue-60);
    --wa-color-brand-50: var(--wa-color-blue-50);
    --wa-color-brand-40: var(--wa-color-blue-40);
    --wa-color-brand-30: var(--wa-color-blue-30);
    --wa-color-brand-20: var(--wa-color-blue-20);
    --wa-color-brand-10: var(--wa-color-blue-10);
    --wa-color-brand-05: var(--wa-color-blue-05);
    --wa-color-brand: var(--wa-color-blue);
    --wa-color-brand-on: var(--wa-color-blue-on);
  }

  .wa-brand-red {
    --wa-color-brand-95: var(--wa-color-red-95);
    --wa-color-brand-90: var(--wa-color-red-90);
    --wa-color-brand-80: var(--wa-color-red-80);
    --wa-color-brand-70: var(--wa-color-red-70);
    --wa-color-brand-60: var(--wa-color-red-60);
    --wa-color-brand-50: var(--wa-color-red-50);
    --wa-color-brand-40: var(--wa-color-red-40);
    --wa-color-brand-30: var(--wa-color-red-30);
    --wa-color-brand-20: var(--wa-color-red-20);
    --wa-color-brand-10: var(--wa-color-red-10);
    --wa-color-brand-05: var(--wa-color-red-05);
    --wa-color-brand: var(--wa-color-red);
    --wa-color-brand-on: var(--wa-color-red-on);
  }

  .wa-brand-orange {
    --wa-color-brand-95: var(--wa-color-orange-95);
    --wa-color-brand-90: var(--wa-color-orange-90);
    --wa-color-brand-80: var(--wa-color-orange-80);
    --wa-color-brand-70: var(--wa-color-orange-70);
    --wa-color-brand-60: var(--wa-color-orange-60);
    --wa-color-brand-50: var(--wa-color-orange-50);
    --wa-color-brand-40: var(--wa-color-orange-40);
    --wa-color-brand-30: var(--wa-color-orange-30);
    --wa-color-brand-20: var(--wa-color-orange-20);
    --wa-color-brand-10: var(--wa-color-orange-10);
    --wa-color-brand-05: var(--wa-color-orange-05);
    --wa-color-brand: var(--wa-color-orange);
    --wa-color-brand-on: var(--wa-color-orange-on);
  }

  .wa-brand-yellow {
    --wa-color-brand-95: var(--wa-color-yellow-95);
    --wa-color-brand-90: var(--wa-color-yellow-90);
    --wa-color-brand-80: var(--wa-color-yellow-80);
    --wa-color-brand-70: var(--wa-color-yellow-70);
    --wa-color-brand-60: var(--wa-color-yellow-60);
    --wa-color-brand-50: var(--wa-color-yellow-50);
    --wa-color-brand-40: var(--wa-color-yellow-40);
    --wa-color-brand-30: var(--wa-color-yellow-30);
    --wa-color-brand-20: var(--wa-color-yellow-20);
    --wa-color-brand-10: var(--wa-color-yellow-10);
    --wa-color-brand-05: var(--wa-color-yellow-05);
    --wa-color-brand: var(--wa-color-yellow);
    --wa-color-brand-on: var(--wa-color-yellow-on);
  }

  .wa-brand-green {
    --wa-color-brand-95: var(--wa-color-green-95);
    --wa-color-brand-90: var(--wa-color-green-90);
    --wa-color-brand-80: var(--wa-color-green-80);
    --wa-color-brand-70: var(--wa-color-green-70);
    --wa-color-brand-60: var(--wa-color-green-60);
    --wa-color-brand-50: var(--wa-color-green-50);
    --wa-color-brand-40: var(--wa-color-green-40);
    --wa-color-brand-30: var(--wa-color-green-30);
    --wa-color-brand-20: var(--wa-color-green-20);
    --wa-color-brand-10: var(--wa-color-green-10);
    --wa-color-brand-05: var(--wa-color-green-05);
    --wa-color-brand: var(--wa-color-green);
    --wa-color-brand-on: var(--wa-color-green-on);
  }

  .wa-brand-cyan {
    --wa-color-brand-95: var(--wa-color-cyan-95);
    --wa-color-brand-90: var(--wa-color-cyan-90);
    --wa-color-brand-80: var(--wa-color-cyan-80);
    --wa-color-brand-70: var(--wa-color-cyan-70);
    --wa-color-brand-60: var(--wa-color-cyan-60);
    --wa-color-brand-50: var(--wa-color-cyan-50);
    --wa-color-brand-40: var(--wa-color-cyan-40);
    --wa-color-brand-30: var(--wa-color-cyan-30);
    --wa-color-brand-20: var(--wa-color-cyan-20);
    --wa-color-brand-10: var(--wa-color-cyan-10);
    --wa-color-brand-05: var(--wa-color-cyan-05);
    --wa-color-brand: var(--wa-color-cyan);
    --wa-color-brand-on: var(--wa-color-cyan-on);
  }

  .wa-brand-indigo {
    --wa-color-brand-95: var(--wa-color-indigo-95);
    --wa-color-brand-90: var(--wa-color-indigo-90);
    --wa-color-brand-80: var(--wa-color-indigo-80);
    --wa-color-brand-70: var(--wa-color-indigo-70);
    --wa-color-brand-60: var(--wa-color-indigo-60);
    --wa-color-brand-50: var(--wa-color-indigo-50);
    --wa-color-brand-40: var(--wa-color-indigo-40);
    --wa-color-brand-30: var(--wa-color-indigo-30);
    --wa-color-brand-20: var(--wa-color-indigo-20);
    --wa-color-brand-10: var(--wa-color-indigo-10);
    --wa-color-brand-05: var(--wa-color-indigo-05);
    --wa-color-brand: var(--wa-color-indigo);
    --wa-color-brand-on: var(--wa-color-indigo-on);
  }

  .wa-brand-purple {
    --wa-color-brand-95: var(--wa-color-purple-95);
    --wa-color-brand-90: var(--wa-color-purple-90);
    --wa-color-brand-80: var(--wa-color-purple-80);
    --wa-color-brand-70: var(--wa-color-purple-70);
    --wa-color-brand-60: var(--wa-color-purple-60);
    --wa-color-brand-50: var(--wa-color-purple-50);
    --wa-color-brand-40: var(--wa-color-purple-40);
    --wa-color-brand-30: var(--wa-color-purple-30);
    --wa-color-brand-20: var(--wa-color-purple-20);
    --wa-color-brand-10: var(--wa-color-purple-10);
    --wa-color-brand-05: var(--wa-color-purple-05);
    --wa-color-brand: var(--wa-color-purple);
    --wa-color-brand-on: var(--wa-color-purple-on);
  }

  .wa-brand-pink {
    --wa-color-brand-95: var(--wa-color-pink-95);
    --wa-color-brand-90: var(--wa-color-pink-90);
    --wa-color-brand-80: var(--wa-color-pink-80);
    --wa-color-brand-70: var(--wa-color-pink-70);
    --wa-color-brand-60: var(--wa-color-pink-60);
    --wa-color-brand-50: var(--wa-color-pink-50);
    --wa-color-brand-40: var(--wa-color-pink-40);
    --wa-color-brand-30: var(--wa-color-pink-30);
    --wa-color-brand-20: var(--wa-color-pink-20);
    --wa-color-brand-10: var(--wa-color-pink-10);
    --wa-color-brand-05: var(--wa-color-pink-05);
    --wa-color-brand: var(--wa-color-pink);
    --wa-color-brand-on: var(--wa-color-pink-on);
  }

  .wa-brand-gray {
    --wa-color-brand-95: var(--wa-color-gray-95);
    --wa-color-brand-90: var(--wa-color-gray-90);
    --wa-color-brand-80: var(--wa-color-gray-80);
    --wa-color-brand-70: var(--wa-color-gray-70);
    --wa-color-brand-60: var(--wa-color-gray-60);
    --wa-color-brand-50: var(--wa-color-gray-50);
    --wa-color-brand-40: var(--wa-color-gray-40);
    --wa-color-brand-30: var(--wa-color-gray-30);
    --wa-color-brand-20: var(--wa-color-gray-20);
    --wa-color-brand-10: var(--wa-color-gray-10);
    --wa-color-brand-05: var(--wa-color-gray-05);
    --wa-color-brand: var(--wa-color-gray);
    --wa-color-brand-on: var(--wa-color-gray-on);
  }
}
@layer wa-color-variant {
  :where(:root), /* default */
  .wa-neutral-gray {
    --wa-color-neutral-95: var(--wa-color-gray-95);
    --wa-color-neutral-90: var(--wa-color-gray-90);
    --wa-color-neutral-80: var(--wa-color-gray-80);
    --wa-color-neutral-70: var(--wa-color-gray-70);
    --wa-color-neutral-60: var(--wa-color-gray-60);
    --wa-color-neutral-50: var(--wa-color-gray-50);
    --wa-color-neutral-40: var(--wa-color-gray-40);
    --wa-color-neutral-30: var(--wa-color-gray-30);
    --wa-color-neutral-20: var(--wa-color-gray-20);
    --wa-color-neutral-10: var(--wa-color-gray-10);
    --wa-color-neutral-05: var(--wa-color-gray-05);
    --wa-color-neutral: var(--wa-color-gray);
    --wa-color-neutral-on: var(--wa-color-gray-on);
  }

  .wa-neutral-red {
    --wa-color-neutral-95: var(--wa-color-red-95);
    --wa-color-neutral-90: var(--wa-color-red-90);
    --wa-color-neutral-80: var(--wa-color-red-80);
    --wa-color-neutral-70: var(--wa-color-red-70);
    --wa-color-neutral-60: var(--wa-color-red-60);
    --wa-color-neutral-50: var(--wa-color-red-50);
    --wa-color-neutral-40: var(--wa-color-red-40);
    --wa-color-neutral-30: var(--wa-color-red-30);
    --wa-color-neutral-20: var(--wa-color-red-20);
    --wa-color-neutral-10: var(--wa-color-red-10);
    --wa-color-neutral-05: var(--wa-color-red-05);
    --wa-color-neutral: var(--wa-color-red);
    --wa-color-neutral-on: var(--wa-color-red-on);
  }

  .wa-neutral-orange {
    --wa-color-neutral-95: var(--wa-color-orange-95);
    --wa-color-neutral-90: var(--wa-color-orange-90);
    --wa-color-neutral-80: var(--wa-color-orange-80);
    --wa-color-neutral-70: var(--wa-color-orange-70);
    --wa-color-neutral-60: var(--wa-color-orange-60);
    --wa-color-neutral-50: var(--wa-color-orange-50);
    --wa-color-neutral-40: var(--wa-color-orange-40);
    --wa-color-neutral-30: var(--wa-color-orange-30);
    --wa-color-neutral-20: var(--wa-color-orange-20);
    --wa-color-neutral-10: var(--wa-color-orange-10);
    --wa-color-neutral-05: var(--wa-color-orange-05);
    --wa-color-neutral: var(--wa-color-orange);
    --wa-color-neutral-on: var(--wa-color-orange-on);
  }

  .wa-neutral-yellow {
    --wa-color-neutral-95: var(--wa-color-yellow-95);
    --wa-color-neutral-90: var(--wa-color-yellow-90);
    --wa-color-neutral-80: var(--wa-color-yellow-80);
    --wa-color-neutral-70: var(--wa-color-yellow-70);
    --wa-color-neutral-60: var(--wa-color-yellow-60);
    --wa-color-neutral-50: var(--wa-color-yellow-50);
    --wa-color-neutral-40: var(--wa-color-yellow-40);
    --wa-color-neutral-30: var(--wa-color-yellow-30);
    --wa-color-neutral-20: var(--wa-color-yellow-20);
    --wa-color-neutral-10: var(--wa-color-yellow-10);
    --wa-color-neutral-05: var(--wa-color-yellow-05);
    --wa-color-neutral: var(--wa-color-yellow);
    --wa-color-neutral-on: var(--wa-color-yellow-on);
  }

  .wa-neutral-green {
    --wa-color-neutral-95: var(--wa-color-green-95);
    --wa-color-neutral-90: var(--wa-color-green-90);
    --wa-color-neutral-80: var(--wa-color-green-80);
    --wa-color-neutral-70: var(--wa-color-green-70);
    --wa-color-neutral-60: var(--wa-color-green-60);
    --wa-color-neutral-50: var(--wa-color-green-50);
    --wa-color-neutral-40: var(--wa-color-green-40);
    --wa-color-neutral-30: var(--wa-color-green-30);
    --wa-color-neutral-20: var(--wa-color-green-20);
    --wa-color-neutral-10: var(--wa-color-green-10);
    --wa-color-neutral-05: var(--wa-color-green-05);
    --wa-color-neutral: var(--wa-color-green);
    --wa-color-neutral-on: var(--wa-color-green-on);
  }

  .wa-neutral-cyan {
    --wa-color-neutral-95: var(--wa-color-cyan-95);
    --wa-color-neutral-90: var(--wa-color-cyan-90);
    --wa-color-neutral-80: var(--wa-color-cyan-80);
    --wa-color-neutral-70: var(--wa-color-cyan-70);
    --wa-color-neutral-60: var(--wa-color-cyan-60);
    --wa-color-neutral-50: var(--wa-color-cyan-50);
    --wa-color-neutral-40: var(--wa-color-cyan-40);
    --wa-color-neutral-30: var(--wa-color-cyan-30);
    --wa-color-neutral-20: var(--wa-color-cyan-20);
    --wa-color-neutral-10: var(--wa-color-cyan-10);
    --wa-color-neutral-05: var(--wa-color-cyan-05);
    --wa-color-neutral: var(--wa-color-cyan);
    --wa-color-neutral-on: var(--wa-color-cyan-on);
  }

  .wa-neutral-blue {
    --wa-color-neutral-95: var(--wa-color-blue-95);
    --wa-color-neutral-90: var(--wa-color-blue-90);
    --wa-color-neutral-80: var(--wa-color-blue-80);
    --wa-color-neutral-70: var(--wa-color-blue-70);
    --wa-color-neutral-60: var(--wa-color-blue-60);
    --wa-color-neutral-50: var(--wa-color-blue-50);
    --wa-color-neutral-40: var(--wa-color-blue-40);
    --wa-color-neutral-30: var(--wa-color-blue-30);
    --wa-color-neutral-20: var(--wa-color-blue-20);
    --wa-color-neutral-10: var(--wa-color-blue-10);
    --wa-color-neutral-05: var(--wa-color-blue-05);
    --wa-color-neutral: var(--wa-color-blue);
    --wa-color-neutral-on: var(--wa-color-blue-on);
  }

  .wa-neutral-indigo {
    --wa-color-neutral-95: var(--wa-color-indigo-95);
    --wa-color-neutral-90: var(--wa-color-indigo-90);
    --wa-color-neutral-80: var(--wa-color-indigo-80);
    --wa-color-neutral-70: var(--wa-color-indigo-70);
    --wa-color-neutral-60: var(--wa-color-indigo-60);
    --wa-color-neutral-50: var(--wa-color-indigo-50);
    --wa-color-neutral-40: var(--wa-color-indigo-40);
    --wa-color-neutral-30: var(--wa-color-indigo-30);
    --wa-color-neutral-20: var(--wa-color-indigo-20);
    --wa-color-neutral-10: var(--wa-color-indigo-10);
    --wa-color-neutral-05: var(--wa-color-indigo-05);
    --wa-color-neutral: var(--wa-color-indigo);
    --wa-color-neutral-on: var(--wa-color-indigo-on);
  }

  .wa-neutral-purple {
    --wa-color-neutral-95: var(--wa-color-purple-95);
    --wa-color-neutral-90: var(--wa-color-purple-90);
    --wa-color-neutral-80: var(--wa-color-purple-80);
    --wa-color-neutral-70: var(--wa-color-purple-70);
    --wa-color-neutral-60: var(--wa-color-purple-60);
    --wa-color-neutral-50: var(--wa-color-purple-50);
    --wa-color-neutral-40: var(--wa-color-purple-40);
    --wa-color-neutral-30: var(--wa-color-purple-30);
    --wa-color-neutral-20: var(--wa-color-purple-20);
    --wa-color-neutral-10: var(--wa-color-purple-10);
    --wa-color-neutral-05: var(--wa-color-purple-05);
    --wa-color-neutral: var(--wa-color-purple);
    --wa-color-neutral-on: var(--wa-color-purple-on);
  }

  .wa-neutral-pink {
    --wa-color-neutral-95: var(--wa-color-pink-95);
    --wa-color-neutral-90: var(--wa-color-pink-90);
    --wa-color-neutral-80: var(--wa-color-pink-80);
    --wa-color-neutral-70: var(--wa-color-pink-70);
    --wa-color-neutral-60: var(--wa-color-pink-60);
    --wa-color-neutral-50: var(--wa-color-pink-50);
    --wa-color-neutral-40: var(--wa-color-pink-40);
    --wa-color-neutral-30: var(--wa-color-pink-30);
    --wa-color-neutral-20: var(--wa-color-pink-20);
    --wa-color-neutral-10: var(--wa-color-pink-10);
    --wa-color-neutral-05: var(--wa-color-pink-05);
    --wa-color-neutral: var(--wa-color-pink);
    --wa-color-neutral-on: var(--wa-color-pink-on);
  }
}
@layer wa-color-variant {
  :where(:root), /* default */
  .wa-success-green {
    --wa-color-success-95: var(--wa-color-green-95);
    --wa-color-success-90: var(--wa-color-green-90);
    --wa-color-success-80: var(--wa-color-green-80);
    --wa-color-success-70: var(--wa-color-green-70);
    --wa-color-success-60: var(--wa-color-green-60);
    --wa-color-success-50: var(--wa-color-green-50);
    --wa-color-success-40: var(--wa-color-green-40);
    --wa-color-success-30: var(--wa-color-green-30);
    --wa-color-success-20: var(--wa-color-green-20);
    --wa-color-success-10: var(--wa-color-green-10);
    --wa-color-success-05: var(--wa-color-green-05);
    --wa-color-success: var(--wa-color-green);
    --wa-color-success-on: var(--wa-color-green-on);
  }

  .wa-success-red {
    --wa-color-success-95: var(--wa-color-red-95);
    --wa-color-success-90: var(--wa-color-red-90);
    --wa-color-success-80: var(--wa-color-red-80);
    --wa-color-success-70: var(--wa-color-red-70);
    --wa-color-success-60: var(--wa-color-red-60);
    --wa-color-success-50: var(--wa-color-red-50);
    --wa-color-success-40: var(--wa-color-red-40);
    --wa-color-success-30: var(--wa-color-red-30);
    --wa-color-success-20: var(--wa-color-red-20);
    --wa-color-success-10: var(--wa-color-red-10);
    --wa-color-success-05: var(--wa-color-red-05);
    --wa-color-success: var(--wa-color-red);
    --wa-color-success-on: var(--wa-color-red-on);
  }

  .wa-success-orange {
    --wa-color-success-95: var(--wa-color-orange-95);
    --wa-color-success-90: var(--wa-color-orange-90);
    --wa-color-success-80: var(--wa-color-orange-80);
    --wa-color-success-70: var(--wa-color-orange-70);
    --wa-color-success-60: var(--wa-color-orange-60);
    --wa-color-success-50: var(--wa-color-orange-50);
    --wa-color-success-40: var(--wa-color-orange-40);
    --wa-color-success-30: var(--wa-color-orange-30);
    --wa-color-success-20: var(--wa-color-orange-20);
    --wa-color-success-10: var(--wa-color-orange-10);
    --wa-color-success-05: var(--wa-color-orange-05);
    --wa-color-success: var(--wa-color-orange);
    --wa-color-success-on: var(--wa-color-orange-on);
  }

  .wa-success-yellow {
    --wa-color-success-95: var(--wa-color-yellow-95);
    --wa-color-success-90: var(--wa-color-yellow-90);
    --wa-color-success-80: var(--wa-color-yellow-80);
    --wa-color-success-70: var(--wa-color-yellow-70);
    --wa-color-success-60: var(--wa-color-yellow-60);
    --wa-color-success-50: var(--wa-color-yellow-50);
    --wa-color-success-40: var(--wa-color-yellow-40);
    --wa-color-success-30: var(--wa-color-yellow-30);
    --wa-color-success-20: var(--wa-color-yellow-20);
    --wa-color-success-10: var(--wa-color-yellow-10);
    --wa-color-success-05: var(--wa-color-yellow-05);
    --wa-color-success: var(--wa-color-yellow);
    --wa-color-success-on: var(--wa-color-yellow-on);
  }

  .wa-success-cyan {
    --wa-color-success-95: var(--wa-color-cyan-95);
    --wa-color-success-90: var(--wa-color-cyan-90);
    --wa-color-success-80: var(--wa-color-cyan-80);
    --wa-color-success-70: var(--wa-color-cyan-70);
    --wa-color-success-60: var(--wa-color-cyan-60);
    --wa-color-success-50: var(--wa-color-cyan-50);
    --wa-color-success-40: var(--wa-color-cyan-40);
    --wa-color-success-30: var(--wa-color-cyan-30);
    --wa-color-success-20: var(--wa-color-cyan-20);
    --wa-color-success-10: var(--wa-color-cyan-10);
    --wa-color-success-05: var(--wa-color-cyan-05);
    --wa-color-success: var(--wa-color-cyan);
    --wa-color-success-on: var(--wa-color-cyan-on);
  }

  .wa-success-blue {
    --wa-color-success-95: var(--wa-color-blue-95);
    --wa-color-success-90: var(--wa-color-blue-90);
    --wa-color-success-80: var(--wa-color-blue-80);
    --wa-color-success-70: var(--wa-color-blue-70);
    --wa-color-success-60: var(--wa-color-blue-60);
    --wa-color-success-50: var(--wa-color-blue-50);
    --wa-color-success-40: var(--wa-color-blue-40);
    --wa-color-success-30: var(--wa-color-blue-30);
    --wa-color-success-20: var(--wa-color-blue-20);
    --wa-color-success-10: var(--wa-color-blue-10);
    --wa-color-success-05: var(--wa-color-blue-05);
    --wa-color-success: var(--wa-color-blue);
    --wa-color-success-on: var(--wa-color-blue-on);
  }

  .wa-success-indigo {
    --wa-color-success-95: var(--wa-color-indigo-95);
    --wa-color-success-90: var(--wa-color-indigo-90);
    --wa-color-success-80: var(--wa-color-indigo-80);
    --wa-color-success-70: var(--wa-color-indigo-70);
    --wa-color-success-60: var(--wa-color-indigo-60);
    --wa-color-success-50: var(--wa-color-indigo-50);
    --wa-color-success-40: var(--wa-color-indigo-40);
    --wa-color-success-30: var(--wa-color-indigo-30);
    --wa-color-success-20: var(--wa-color-indigo-20);
    --wa-color-success-10: var(--wa-color-indigo-10);
    --wa-color-success-05: var(--wa-color-indigo-05);
    --wa-color-success: var(--wa-color-indigo);
    --wa-color-success-on: var(--wa-color-indigo-on);
  }

  .wa-success-purple {
    --wa-color-success-95: var(--wa-color-purple-95);
    --wa-color-success-90: var(--wa-color-purple-90);
    --wa-color-success-80: var(--wa-color-purple-80);
    --wa-color-success-70: var(--wa-color-purple-70);
    --wa-color-success-60: var(--wa-color-purple-60);
    --wa-color-success-50: var(--wa-color-purple-50);
    --wa-color-success-40: var(--wa-color-purple-40);
    --wa-color-success-30: var(--wa-color-purple-30);
    --wa-color-success-20: var(--wa-color-purple-20);
    --wa-color-success-10: var(--wa-color-purple-10);
    --wa-color-success-05: var(--wa-color-purple-05);
    --wa-color-success: var(--wa-color-purple);
    --wa-color-success-on: var(--wa-color-purple-on);
  }

  .wa-success-pink {
    --wa-color-success-95: var(--wa-color-pink-95);
    --wa-color-success-90: var(--wa-color-pink-90);
    --wa-color-success-80: var(--wa-color-pink-80);
    --wa-color-success-70: var(--wa-color-pink-70);
    --wa-color-success-60: var(--wa-color-pink-60);
    --wa-color-success-50: var(--wa-color-pink-50);
    --wa-color-success-40: var(--wa-color-pink-40);
    --wa-color-success-30: var(--wa-color-pink-30);
    --wa-color-success-20: var(--wa-color-pink-20);
    --wa-color-success-10: var(--wa-color-pink-10);
    --wa-color-success-05: var(--wa-color-pink-05);
    --wa-color-success: var(--wa-color-pink);
    --wa-color-success-on: var(--wa-color-pink-on);
  }

  .wa-success-gray {
    --wa-color-success-95: var(--wa-color-gray-95);
    --wa-color-success-90: var(--wa-color-gray-90);
    --wa-color-success-80: var(--wa-color-gray-80);
    --wa-color-success-70: var(--wa-color-gray-70);
    --wa-color-success-60: var(--wa-color-gray-60);
    --wa-color-success-50: var(--wa-color-gray-50);
    --wa-color-success-40: var(--wa-color-gray-40);
    --wa-color-success-30: var(--wa-color-gray-30);
    --wa-color-success-20: var(--wa-color-gray-20);
    --wa-color-success-10: var(--wa-color-gray-10);
    --wa-color-success-05: var(--wa-color-gray-05);
    --wa-color-success: var(--wa-color-gray);
    --wa-color-success-on: var(--wa-color-gray-on);
  }
}
@layer wa-color-variant {
  :where(:root), /* default */
  .wa-warning-yellow {
    --wa-color-warning-95: var(--wa-color-yellow-95);
    --wa-color-warning-90: var(--wa-color-yellow-90);
    --wa-color-warning-80: var(--wa-color-yellow-80);
    --wa-color-warning-70: var(--wa-color-yellow-70);
    --wa-color-warning-60: var(--wa-color-yellow-60);
    --wa-color-warning-50: var(--wa-color-yellow-50);
    --wa-color-warning-40: var(--wa-color-yellow-40);
    --wa-color-warning-30: var(--wa-color-yellow-30);
    --wa-color-warning-20: var(--wa-color-yellow-20);
    --wa-color-warning-10: var(--wa-color-yellow-10);
    --wa-color-warning-05: var(--wa-color-yellow-05);
    --wa-color-warning: var(--wa-color-yellow);
    --wa-color-warning-on: var(--wa-color-yellow-on);
  }

  .wa-warning-red {
    --wa-color-warning-95: var(--wa-color-red-95);
    --wa-color-warning-90: var(--wa-color-red-90);
    --wa-color-warning-80: var(--wa-color-red-80);
    --wa-color-warning-70: var(--wa-color-red-70);
    --wa-color-warning-60: var(--wa-color-red-60);
    --wa-color-warning-50: var(--wa-color-red-50);
    --wa-color-warning-40: var(--wa-color-red-40);
    --wa-color-warning-30: var(--wa-color-red-30);
    --wa-color-warning-20: var(--wa-color-red-20);
    --wa-color-warning-10: var(--wa-color-red-10);
    --wa-color-warning-05: var(--wa-color-red-05);
    --wa-color-warning: var(--wa-color-red);
    --wa-color-warning-on: var(--wa-color-red-on);
  }

  .wa-warning-orange {
    --wa-color-warning-95: var(--wa-color-orange-95);
    --wa-color-warning-90: var(--wa-color-orange-90);
    --wa-color-warning-80: var(--wa-color-orange-80);
    --wa-color-warning-70: var(--wa-color-orange-70);
    --wa-color-warning-60: var(--wa-color-orange-60);
    --wa-color-warning-50: var(--wa-color-orange-50);
    --wa-color-warning-40: var(--wa-color-orange-40);
    --wa-color-warning-30: var(--wa-color-orange-30);
    --wa-color-warning-20: var(--wa-color-orange-20);
    --wa-color-warning-10: var(--wa-color-orange-10);
    --wa-color-warning-05: var(--wa-color-orange-05);
    --wa-color-warning: var(--wa-color-orange);
    --wa-color-warning-on: var(--wa-color-orange-on);
  }

  .wa-warning-green {
    --wa-color-warning-95: var(--wa-color-green-95);
    --wa-color-warning-90: var(--wa-color-green-90);
    --wa-color-warning-80: var(--wa-color-green-80);
    --wa-color-warning-70: var(--wa-color-green-70);
    --wa-color-warning-60: var(--wa-color-green-60);
    --wa-color-warning-50: var(--wa-color-green-50);
    --wa-color-warning-40: var(--wa-color-green-40);
    --wa-color-warning-30: var(--wa-color-green-30);
    --wa-color-warning-20: var(--wa-color-green-20);
    --wa-color-warning-10: var(--wa-color-green-10);
    --wa-color-warning-05: var(--wa-color-green-05);
    --wa-color-warning: var(--wa-color-green);
    --wa-color-warning-on: var(--wa-color-green-on);
  }

  .wa-warning-cyan {
    --wa-color-warning-95: var(--wa-color-cyan-95);
    --wa-color-warning-90: var(--wa-color-cyan-90);
    --wa-color-warning-80: var(--wa-color-cyan-80);
    --wa-color-warning-70: var(--wa-color-cyan-70);
    --wa-color-warning-60: var(--wa-color-cyan-60);
    --wa-color-warning-50: var(--wa-color-cyan-50);
    --wa-color-warning-40: var(--wa-color-cyan-40);
    --wa-color-warning-30: var(--wa-color-cyan-30);
    --wa-color-warning-20: var(--wa-color-cyan-20);
    --wa-color-warning-10: var(--wa-color-cyan-10);
    --wa-color-warning-05: var(--wa-color-cyan-05);
    --wa-color-warning: var(--wa-color-cyan);
    --wa-color-warning-on: var(--wa-color-cyan-on);
  }

  .wa-warning-blue {
    --wa-color-warning-95: var(--wa-color-blue-95);
    --wa-color-warning-90: var(--wa-color-blue-90);
    --wa-color-warning-80: var(--wa-color-blue-80);
    --wa-color-warning-70: var(--wa-color-blue-70);
    --wa-color-warning-60: var(--wa-color-blue-60);
    --wa-color-warning-50: var(--wa-color-blue-50);
    --wa-color-warning-40: var(--wa-color-blue-40);
    --wa-color-warning-30: var(--wa-color-blue-30);
    --wa-color-warning-20: var(--wa-color-blue-20);
    --wa-color-warning-10: var(--wa-color-blue-10);
    --wa-color-warning-05: var(--wa-color-blue-05);
    --wa-color-warning: var(--wa-color-blue);
    --wa-color-warning-on: var(--wa-color-blue-on);
  }

  .wa-warning-indigo {
    --wa-color-warning-95: var(--wa-color-indigo-95);
    --wa-color-warning-90: var(--wa-color-indigo-90);
    --wa-color-warning-80: var(--wa-color-indigo-80);
    --wa-color-warning-70: var(--wa-color-indigo-70);
    --wa-color-warning-60: var(--wa-color-indigo-60);
    --wa-color-warning-50: var(--wa-color-indigo-50);
    --wa-color-warning-40: var(--wa-color-indigo-40);
    --wa-color-warning-30: var(--wa-color-indigo-30);
    --wa-color-warning-20: var(--wa-color-indigo-20);
    --wa-color-warning-10: var(--wa-color-indigo-10);
    --wa-color-warning-05: var(--wa-color-indigo-05);
    --wa-color-warning: var(--wa-color-indigo);
    --wa-color-warning-on: var(--wa-color-indigo-on);
  }

  .wa-warning-purple {
    --wa-color-warning-95: var(--wa-color-purple-95);
    --wa-color-warning-90: var(--wa-color-purple-90);
    --wa-color-warning-80: var(--wa-color-purple-80);
    --wa-color-warning-70: var(--wa-color-purple-70);
    --wa-color-warning-60: var(--wa-color-purple-60);
    --wa-color-warning-50: var(--wa-color-purple-50);
    --wa-color-warning-40: var(--wa-color-purple-40);
    --wa-color-warning-30: var(--wa-color-purple-30);
    --wa-color-warning-20: var(--wa-color-purple-20);
    --wa-color-warning-10: var(--wa-color-purple-10);
    --wa-color-warning-05: var(--wa-color-purple-05);
    --wa-color-warning: var(--wa-color-purple);
    --wa-color-warning-on: var(--wa-color-purple-on);
  }

  .wa-warning-pink {
    --wa-color-warning-95: var(--wa-color-pink-95);
    --wa-color-warning-90: var(--wa-color-pink-90);
    --wa-color-warning-80: var(--wa-color-pink-80);
    --wa-color-warning-70: var(--wa-color-pink-70);
    --wa-color-warning-60: var(--wa-color-pink-60);
    --wa-color-warning-50: var(--wa-color-pink-50);
    --wa-color-warning-40: var(--wa-color-pink-40);
    --wa-color-warning-30: var(--wa-color-pink-30);
    --wa-color-warning-20: var(--wa-color-pink-20);
    --wa-color-warning-10: var(--wa-color-pink-10);
    --wa-color-warning-05: var(--wa-color-pink-05);
    --wa-color-warning: var(--wa-color-pink);
    --wa-color-warning-on: var(--wa-color-pink-on);
  }

  .wa-warning-gray {
    --wa-color-warning-95: var(--wa-color-gray-95);
    --wa-color-warning-90: var(--wa-color-gray-90);
    --wa-color-warning-80: var(--wa-color-gray-80);
    --wa-color-warning-70: var(--wa-color-gray-70);
    --wa-color-warning-60: var(--wa-color-gray-60);
    --wa-color-warning-50: var(--wa-color-gray-50);
    --wa-color-warning-40: var(--wa-color-gray-40);
    --wa-color-warning-30: var(--wa-color-gray-30);
    --wa-color-warning-20: var(--wa-color-gray-20);
    --wa-color-warning-10: var(--wa-color-gray-10);
    --wa-color-warning-05: var(--wa-color-gray-05);
    --wa-color-warning: var(--wa-color-gray);
    --wa-color-warning-on: var(--wa-color-gray-on);
  }
}
@layer wa-color-variant {
  :where(:root), /* default */
  .wa-danger-red {
    --wa-color-danger-95: var(--wa-color-red-95);
    --wa-color-danger-90: var(--wa-color-red-90);
    --wa-color-danger-80: var(--wa-color-red-80);
    --wa-color-danger-70: var(--wa-color-red-70);
    --wa-color-danger-60: var(--wa-color-red-60);
    --wa-color-danger-50: var(--wa-color-red-50);
    --wa-color-danger-40: var(--wa-color-red-40);
    --wa-color-danger-30: var(--wa-color-red-30);
    --wa-color-danger-20: var(--wa-color-red-20);
    --wa-color-danger-10: var(--wa-color-red-10);
    --wa-color-danger-05: var(--wa-color-red-05);
    --wa-color-danger: var(--wa-color-red);
    --wa-color-danger-on: var(--wa-color-red-on);
  }

  .wa-danger-orange {
    --wa-color-danger-95: var(--wa-color-orange-95);
    --wa-color-danger-90: var(--wa-color-orange-90);
    --wa-color-danger-80: var(--wa-color-orange-80);
    --wa-color-danger-70: var(--wa-color-orange-70);
    --wa-color-danger-60: var(--wa-color-orange-60);
    --wa-color-danger-50: var(--wa-color-orange-50);
    --wa-color-danger-40: var(--wa-color-orange-40);
    --wa-color-danger-30: var(--wa-color-orange-30);
    --wa-color-danger-20: var(--wa-color-orange-20);
    --wa-color-danger-10: var(--wa-color-orange-10);
    --wa-color-danger-05: var(--wa-color-orange-05);
    --wa-color-danger: var(--wa-color-orange);
    --wa-color-danger-on: var(--wa-color-orange-on);
  }

  .wa-danger-yellow {
    --wa-color-danger-95: var(--wa-color-yellow-95);
    --wa-color-danger-90: var(--wa-color-yellow-90);
    --wa-color-danger-80: var(--wa-color-yellow-80);
    --wa-color-danger-70: var(--wa-color-yellow-70);
    --wa-color-danger-60: var(--wa-color-yellow-60);
    --wa-color-danger-50: var(--wa-color-yellow-50);
    --wa-color-danger-40: var(--wa-color-yellow-40);
    --wa-color-danger-30: var(--wa-color-yellow-30);
    --wa-color-danger-20: var(--wa-color-yellow-20);
    --wa-color-danger-10: var(--wa-color-yellow-10);
    --wa-color-danger-05: var(--wa-color-yellow-05);
    --wa-color-danger: var(--wa-color-yellow);
    --wa-color-danger-on: var(--wa-color-yellow-on);
  }

  .wa-danger-green {
    --wa-color-danger-95: var(--wa-color-green-95);
    --wa-color-danger-90: var(--wa-color-green-90);
    --wa-color-danger-80: var(--wa-color-green-80);
    --wa-color-danger-70: var(--wa-color-green-70);
    --wa-color-danger-60: var(--wa-color-green-60);
    --wa-color-danger-50: var(--wa-color-green-50);
    --wa-color-danger-40: var(--wa-color-green-40);
    --wa-color-danger-30: var(--wa-color-green-30);
    --wa-color-danger-20: var(--wa-color-green-20);
    --wa-color-danger-10: var(--wa-color-green-10);
    --wa-color-danger-05: var(--wa-color-green-05);
    --wa-color-danger: var(--wa-color-green);
    --wa-color-danger-on: var(--wa-color-green-on);
  }

  .wa-danger-cyan {
    --wa-color-danger-95: var(--wa-color-cyan-95);
    --wa-color-danger-90: var(--wa-color-cyan-90);
    --wa-color-danger-80: var(--wa-color-cyan-80);
    --wa-color-danger-70: var(--wa-color-cyan-70);
    --wa-color-danger-60: var(--wa-color-cyan-60);
    --wa-color-danger-50: var(--wa-color-cyan-50);
    --wa-color-danger-40: var(--wa-color-cyan-40);
    --wa-color-danger-30: var(--wa-color-cyan-30);
    --wa-color-danger-20: var(--wa-color-cyan-20);
    --wa-color-danger-10: var(--wa-color-cyan-10);
    --wa-color-danger-05: var(--wa-color-cyan-05);
    --wa-color-danger: var(--wa-color-cyan);
    --wa-color-danger-on: var(--wa-color-cyan-on);
  }

  .wa-danger-blue {
    --wa-color-danger-95: var(--wa-color-blue-95);
    --wa-color-danger-90: var(--wa-color-blue-90);
    --wa-color-danger-80: var(--wa-color-blue-80);
    --wa-color-danger-70: var(--wa-color-blue-70);
    --wa-color-danger-60: var(--wa-color-blue-60);
    --wa-color-danger-50: var(--wa-color-blue-50);
    --wa-color-danger-40: var(--wa-color-blue-40);
    --wa-color-danger-30: var(--wa-color-blue-30);
    --wa-color-danger-20: var(--wa-color-blue-20);
    --wa-color-danger-10: var(--wa-color-blue-10);
    --wa-color-danger-05: var(--wa-color-blue-05);
    --wa-color-danger: var(--wa-color-blue);
    --wa-color-danger-on: var(--wa-color-blue-on);
  }

  .wa-danger-indigo {
    --wa-color-danger-95: var(--wa-color-indigo-95);
    --wa-color-danger-90: var(--wa-color-indigo-90);
    --wa-color-danger-80: var(--wa-color-indigo-80);
    --wa-color-danger-70: var(--wa-color-indigo-70);
    --wa-color-danger-60: var(--wa-color-indigo-60);
    --wa-color-danger-50: var(--wa-color-indigo-50);
    --wa-color-danger-40: var(--wa-color-indigo-40);
    --wa-color-danger-30: var(--wa-color-indigo-30);
    --wa-color-danger-20: var(--wa-color-indigo-20);
    --wa-color-danger-10: var(--wa-color-indigo-10);
    --wa-color-danger-05: var(--wa-color-indigo-05);
    --wa-color-danger: var(--wa-color-indigo);
    --wa-color-danger-on: var(--wa-color-indigo-on);
  }

  .wa-danger-purple {
    --wa-color-danger-95: var(--wa-color-purple-95);
    --wa-color-danger-90: var(--wa-color-purple-90);
    --wa-color-danger-80: var(--wa-color-purple-80);
    --wa-color-danger-70: var(--wa-color-purple-70);
    --wa-color-danger-60: var(--wa-color-purple-60);
    --wa-color-danger-50: var(--wa-color-purple-50);
    --wa-color-danger-40: var(--wa-color-purple-40);
    --wa-color-danger-30: var(--wa-color-purple-30);
    --wa-color-danger-20: var(--wa-color-purple-20);
    --wa-color-danger-10: var(--wa-color-purple-10);
    --wa-color-danger-05: var(--wa-color-purple-05);
    --wa-color-danger: var(--wa-color-purple);
    --wa-color-danger-on: var(--wa-color-purple-on);
  }

  .wa-danger-pink {
    --wa-color-danger-95: var(--wa-color-pink-95);
    --wa-color-danger-90: var(--wa-color-pink-90);
    --wa-color-danger-80: var(--wa-color-pink-80);
    --wa-color-danger-70: var(--wa-color-pink-70);
    --wa-color-danger-60: var(--wa-color-pink-60);
    --wa-color-danger-50: var(--wa-color-pink-50);
    --wa-color-danger-40: var(--wa-color-pink-40);
    --wa-color-danger-30: var(--wa-color-pink-30);
    --wa-color-danger-20: var(--wa-color-pink-20);
    --wa-color-danger-10: var(--wa-color-pink-10);
    --wa-color-danger-05: var(--wa-color-pink-05);
    --wa-color-danger: var(--wa-color-pink);
    --wa-color-danger-on: var(--wa-color-pink-on);
  }

  .wa-danger-gray {
    --wa-color-danger-95: var(--wa-color-gray-95);
    --wa-color-danger-90: var(--wa-color-gray-90);
    --wa-color-danger-80: var(--wa-color-gray-80);
    --wa-color-danger-70: var(--wa-color-gray-70);
    --wa-color-danger-60: var(--wa-color-gray-60);
    --wa-color-danger-50: var(--wa-color-gray-50);
    --wa-color-danger-40: var(--wa-color-gray-40);
    --wa-color-danger-30: var(--wa-color-gray-30);
    --wa-color-danger-20: var(--wa-color-gray-20);
    --wa-color-danger-10: var(--wa-color-gray-10);
    --wa-color-danger-05: var(--wa-color-gray-05);
    --wa-color-danger: var(--wa-color-gray);
    --wa-color-danger-on: var(--wa-color-gray-on);
  }
}
/* Generates --wa-color-{hue}-on tokens for pairing with any palette's key colors */
:where(:root),
:host {
  /**
    * Conditional tokens to check if the key color is >= 60
    * Key colors are the most colorful tint in a scale, recorded as --wa-color-{hue} in each palette
    * The numeric value of the key is isolated as --wa-color-{hue}-key
    * If key < 60, the result is 0%
    * If key >= 60, the result is 100%
    * Intended to be used in the color-mix() functions below
    */

  --wa-color-red-gte-60: calc(100% - (clamp(0, 60 - var(--wa-color-red-key), 1) * 100%));
  --wa-color-orange-gte-60: calc(100% - (clamp(0, 60 - var(--wa-color-orange-key), 1) * 100%));
  --wa-color-yellow-gte-60: calc(100% - (clamp(0, 60 - var(--wa-color-yellow-key), 1) * 100%));
  --wa-color-green-gte-60: calc(100% - (clamp(0, 60 - var(--wa-color-green-key), 1) * 100%));
  --wa-color-cyan-gte-60: calc(100% - (clamp(0, 60 - var(--wa-color-cyan-key), 1) * 100%));
  --wa-color-blue-gte-60: calc(100% - (clamp(0, 60 - var(--wa-color-blue-key), 1) * 100%));
  --wa-color-indigo-gte-60: calc(100% - (clamp(0, 60 - var(--wa-color-indigo-key), 1) * 100%));
  --wa-color-purple-gte-60: calc(100% - (clamp(0, 60 - var(--wa-color-purple-key), 1) * 100%));
  --wa-color-pink-gte-60: calc(100% - (clamp(0, 60 - var(--wa-color-pink-key), 1) * 100%));
  --wa-color-gray-gte-60: calc(100% - (clamp(0, 60 - var(--wa-color-gray-key), 1) * 100%));

  /**
    * Tokens to set text color with appropriate WCAG 2.1 contrast
    * If key < 60, the text color is white
    * If key >= 60, the text color is {hue}-10
    */

  --wa-color-red-on: color-mix(in oklab, var(--wa-color-red-10) var(--wa-color-red-gte-60), white);
  --wa-color-orange-on: color-mix(in oklab, var(--wa-color-orange-10) var(--wa-color-orange-gte-60), white);
  --wa-color-yellow-on: color-mix(in oklab, var(--wa-color-yellow-10) var(--wa-color-yellow-gte-60), white);
  --wa-color-green-on: color-mix(in oklab, var(--wa-color-green-10) var(--wa-color-green-gte-60), white);
  --wa-color-cyan-on: color-mix(in oklab, var(--wa-color-cyan-10) var(--wa-color-cyan-gte-60), white);
  --wa-color-blue-on: color-mix(in oklab, var(--wa-color-blue-10) var(--wa-color-blue-gte-60), white);
  --wa-color-indigo-on: color-mix(in oklab, var(--wa-color-indigo-10) var(--wa-color-indigo-gte-60), white);
  --wa-color-purple-on: color-mix(in oklab, var(--wa-color-purple-10) var(--wa-color-purple-gte-60), white);
  --wa-color-pink-on: color-mix(in oklab, var(--wa-color-pink-10) var(--wa-color-pink-gte-60), white);
  --wa-color-gray-on: color-mix(in oklab, var(--wa-color-gray-10) var(--wa-color-gray-gte-60), white);
}
@layer wa-color-palette {
  :where(:root),
  .wa-palette-default {
    --wa-color-red-95: #fff0ef /* oklch(96.667% 0.01632 22.08) */;
    --wa-color-red-90: #ffdedc /* oklch(92.735% 0.03679 21.966) */;
    --wa-color-red-80: #ffb8b6 /* oklch(84.803% 0.08289 20.771) */;
    --wa-color-red-70: #fd8f90 /* oklch(76.801% 0.13322 20.052) */;
    --wa-color-red-60: #f3676c /* oklch(68.914% 0.17256 20.646) */;
    --wa-color-red-50: #dc3146 /* oklch(58.857% 0.20512 20.223) */;
    --wa-color-red-40: #b30532 /* oklch(48.737% 0.19311 18.413) */;
    --wa-color-red-30: #8a132c /* oklch(41.17% 0.1512 16.771) */;
    --wa-color-red-20: #631323 /* oklch(33.297% 0.11208 14.847) */;
    --wa-color-red-10: #3e0913 /* oklch(24.329% 0.08074 15.207) */;
    --wa-color-red-05: #2a040b /* oklch(19.016% 0.06394 13.71) */;
    --wa-color-red: var(--wa-color-red-50);
    --wa-color-red-key: 50;

    --wa-color-orange-95: #fff0e6 /* oklch(96.426% 0.02105 56.133) */;
    --wa-color-orange-90: #ffdfca /* oklch(92.468% 0.04529 55.325) */;
    --wa-color-orange-80: #ffbb94 /* oklch(84.588% 0.09454 50.876) */;
    --wa-color-orange-70: #ff9266 /* oklch(76.744% 0.14429 42.309) */;
    --wa-color-orange-60: #f46a45 /* oklch(68.848% 0.17805 35.951) */;
    --wa-color-orange-50: #cd491c /* oklch(58.195% 0.17597 37.577) */;
    --wa-color-orange-40: #9f3501 /* oklch(47.889% 0.14981 39.957) */;
    --wa-color-orange-30: #802700 /* oklch(40.637% 0.1298 39.149) */;
    --wa-color-orange-20: #601b00 /* oklch(33.123% 0.10587 39.117) */;
    --wa-color-orange-10: #3c0d00 /* oklch(24.043% 0.07768 38.607) */;
    --wa-color-orange-05: #280600 /* oklch(18.644% 0.0607 38.252) */;
    --wa-color-orange: var(--wa-color-orange-60);
    --wa-color-orange-key: 60;

    --wa-color-yellow-95: #fef3cd /* oklch(96.322% 0.05069 93.748) */;
    --wa-color-yellow-90: #ffe495 /* oklch(92.377% 0.10246 91.296) */;
    --wa-color-yellow-80: #fac22b /* oklch(84.185% 0.16263 85.991) */;
    --wa-color-yellow-70: #ef9d00 /* oklch(75.949% 0.16251 72.13) */;
    --wa-color-yellow-60: #da7e00 /* oklch(67.883% 0.15587 62.246) */;
    --wa-color-yellow-50: #b45f04 /* oklch(57.449% 0.13836 56.585) */;
    --wa-color-yellow-40: #8c4602 /* oklch(47.319% 0.11666 54.663) */;
    --wa-color-yellow-30: #6f3601 /* oklch(40.012% 0.09892 54.555) */;
    --wa-color-yellow-20: #532600 /* oklch(32.518% 0.08157 53.927) */;
    --wa-color-yellow-10: #331600 /* oklch(23.846% 0.05834 56.02) */;
    --wa-color-yellow-05: #220c00 /* oklch(18.585% 0.04625 54.588) */;
    --wa-color-yellow: var(--wa-color-yellow-80);
    --wa-color-yellow-key: 80;

    --wa-color-green-95: #e3f9e3 /* oklch(96.006% 0.03715 145.28) */;
    --wa-color-green-90: #c2f2c1 /* oklch(91.494% 0.08233 144.35) */;
    --wa-color-green-80: #93da98 /* oklch(82.445% 0.11601 146.11) */;
    --wa-color-green-70: #5dc36f /* oklch(73.554% 0.15308 147.59) */;
    --wa-color-green-60: #00ac49 /* oklch(64.982% 0.18414 148.83) */;
    --wa-color-green-50: #00883c /* oklch(54.765% 0.15165 149.77) */;
    --wa-color-green-40: #036730 /* oklch(45.004% 0.11963 151.06) */;
    --wa-color-green-30: #0a5027 /* oklch(37.988% 0.09487 151.62) */;
    --wa-color-green-20: #0a3a1d /* oklch(30.876% 0.07202 152.23) */;
    --wa-color-green-10: #052310 /* oklch(22.767% 0.05128 152.45) */;
    --wa-color-green-05: #031608 /* oklch(17.84% 0.03957 151.36) */;
    --wa-color-green: var(--wa-color-green-60);
    --wa-color-green-key: 60;

    --wa-color-cyan-95: #e3f6fb /* oklch(96.063% 0.02111 215.26) */;
    --wa-color-cyan-90: #c5ecf7 /* oklch(91.881% 0.04314 216.7) */;
    --wa-color-cyan-80: #7fd6ec /* oklch(82.906% 0.08934 215.86) */;
    --wa-color-cyan-70: #2fbedc /* oklch(74.18% 0.12169 215.86) */;
    --wa-color-cyan-60: #00a3c0 /* oklch(65.939% 0.11738 216.42) */;
    --wa-color-cyan-50: #078098 /* oklch(55.379% 0.09774 217.32) */;
    --wa-color-cyan-40: #026274 /* oklch(45.735% 0.08074 216.18) */;
    --wa-color-cyan-30: #014c5b /* oklch(38.419% 0.06817 216.88) */;
    --wa-color-cyan-20: #003844 /* oklch(31.427% 0.05624 217.32) */;
    --wa-color-cyan-10: #002129 /* oklch(22.851% 0.04085 217.17) */;
    --wa-color-cyan-05: #00151b /* oklch(18.055% 0.03231 217.31) */;
    --wa-color-cyan: var(--wa-color-cyan-70);
    --wa-color-cyan-key: 70;

    --wa-color-blue-95: #e8f3ff /* oklch(95.944% 0.01996 250.38) */;
    --wa-color-blue-90: #d1e8ff /* oklch(92.121% 0.03985 248.26) */;
    --wa-color-blue-80: #9fceff /* oklch(83.572% 0.08502 249.92) */;
    --wa-color-blue-70: #6eb3ff /* oklch(75.256% 0.1308 252.03) */;
    --wa-color-blue-60: #3e96ff /* oklch(67.196% 0.17661 254.97) */;
    --wa-color-blue-50: #0071ec /* oklch(56.972% 0.20461 257.29) */;
    --wa-color-blue-40: #0053c0 /* oklch(47.175% 0.1846 259.19) */;
    --wa-color-blue-30: #003f9c /* oklch(39.805% 0.16217 259.98) */;
    --wa-color-blue-20: #002d77 /* oklch(32.436% 0.1349 260.35) */;
    --wa-color-blue-10: #001a4e /* oklch(23.965% 0.10161 260.68) */;
    --wa-color-blue-05: #000f35 /* oklch(18.565% 0.07904 260.75) */;
    --wa-color-blue: var(--wa-color-blue-50);
    --wa-color-blue-key: 50;

    --wa-color-indigo-95: #f0f2ff /* oklch(96.341% 0.0175 279.06) */;
    --wa-color-indigo-90: #dfe5ff /* oklch(92.527% 0.0359 275.35) */;
    --wa-color-indigo-80: #bcc7ff /* oklch(84.053% 0.07938 275.91) */;
    --wa-color-indigo-70: #9da9ff /* oklch(75.941% 0.12411 276.95) */;
    --wa-color-indigo-60: #808aff /* oklch(67.977% 0.17065 277.16) */;
    --wa-color-indigo-50: #6163f2 /* oklch(57.967% 0.20943 277.04) */;
    --wa-color-indigo-40: #4945cb /* oklch(48.145% 0.20042 277.08) */;
    --wa-color-indigo-30: #3933a7 /* oklch(40.844% 0.17864 277.26) */;
    --wa-color-indigo-20: #292381 /* oklch(33.362% 0.15096 277.21) */;
    --wa-color-indigo-10: #181255 /* oklch(24.534% 0.11483 277.73) */;
    --wa-color-indigo-05: #0d0a3a /* oklch(19.092% 0.08825 276.76) */;
    --wa-color-indigo: var(--wa-color-indigo-50);
    --wa-color-indigo-key: 50;

    --wa-color-purple-95: #f7f0ff /* oklch(96.49% 0.02119 306.84) */;
    --wa-color-purple-90: #eedfff /* oklch(92.531% 0.04569 306.6) */;
    --wa-color-purple-80: #ddbdff /* oklch(84.781% 0.09615 306.52) */;
    --wa-color-purple-70: #ca99ff /* oklch(76.728% 0.14961 305.27) */;
    --wa-color-purple-60: #b678f5 /* oklch(68.906% 0.1844 304.96) */;
    --wa-color-purple-50: #9951db /* oklch(58.603% 0.20465 304.87) */;
    --wa-color-purple-40: #7936b3 /* oklch(48.641% 0.18949 304.79) */;
    --wa-color-purple-30: #612692 /* oklch(41.23% 0.16836 304.92) */;
    --wa-color-purple-20: #491870 /* oklch(33.663% 0.14258 305.12) */;
    --wa-color-purple-10: #2d0b48 /* oklch(24.637% 0.10612 304.95) */;
    --wa-color-purple-05: #1e0532 /* oklch(19.393% 0.08461 305.26) */;
    --wa-color-purple: var(--wa-color-purple-50);
    --wa-color-purple-key: 50;

    --wa-color-pink-95: #feeff9 /* oklch(96.676% 0.02074 337.69) */;
    --wa-color-pink-90: #feddf0 /* oklch(93.026% 0.04388 342.45) */;
    --wa-color-pink-80: #fcb5d8 /* oklch(84.928% 0.09304 348.21) */;
    --wa-color-pink-70: #f78dbf /* oklch(77.058% 0.14016 351.19) */;
    --wa-color-pink-60: #e66ba3 /* oklch(69.067% 0.16347 353.69) */;
    --wa-color-pink-50: #c84382 /* oklch(58.707% 0.17826 354.82) */;
    --wa-color-pink-40: #9e2a6c /* oklch(48.603% 0.16439 350.08) */;
    --wa-color-pink-30: #7d1e58 /* oklch(41.017% 0.14211 347.77) */;
    --wa-color-pink-20: #5e1342 /* oklch(33.442% 0.11808 347.01) */;
    --wa-color-pink-10: #3c0828 /* oklch(24.601% 0.08768 347.8) */;
    --wa-color-pink-05: #28041a /* oklch(19.199% 0.06799 346.97) */;
    --wa-color-pink: var(--wa-color-pink-50);
    --wa-color-pink-key: 50;

    --wa-color-gray-95: #f1f2f3 /* oklch(96.067% 0.00172 247.84) */;
    --wa-color-gray-90: #e4e5e9 /* oklch(92.228% 0.0055 274.96) */;
    --wa-color-gray-80: #c7c9d0 /* oklch(83.641% 0.00994 273.33) */;
    --wa-color-gray-70: #abaeb9 /* oklch(75.183% 0.01604 273.78) */;
    --wa-color-gray-60: #9194a2 /* oklch(66.863% 0.02088 276.18) */;
    --wa-color-gray-50: #717584 /* oklch(56.418% 0.02359 273.77) */;
    --wa-color-gray-40: #545868 /* oklch(46.281% 0.02644 274.26) */;
    --wa-color-gray-30: #424554 /* oklch(39.355% 0.02564 276.27) */;
    --wa-color-gray-20: #2f323f /* oklch(31.97% 0.02354 274.82) */;
    --wa-color-gray-10: #1b1d26 /* oklch(23.277% 0.01762 275.14) */;
    --wa-color-gray-05: #101219 /* oklch(18.342% 0.01472 272.42) */;
    --wa-color-gray: var(--wa-color-gray-40);
    --wa-color-gray-key: 40;
  }
}
@layer wa-theme {
  :where(:root),
  .wa-theme-default,
  .wa-light,
  .wa-dark .wa-invert,
  .wa-light .wa-theme-default,
  .wa-dark .wa-theme-default.wa-invert,
  .wa-dark .wa-theme-default .wa-invert {
    /* #region Colors (Light) ~~~~~~~~~~~~~~~~~~~~~ */
    color-scheme: light;
    color: var(--wa-color-text-normal);

    --wa-color-surface-raised: white;
    --wa-color-surface-default: white;
    --wa-color-surface-lowered: var(--wa-color-neutral-95);
    --wa-color-surface-border: var(--wa-color-neutral-90);

    --wa-color-text-normal: var(--wa-color-neutral-10);
    --wa-color-text-quiet: var(--wa-color-neutral-40);
    --wa-color-text-link: var(--wa-color-brand-40);

    --wa-color-overlay-modal: color-mix(in oklab, var(--wa-color-neutral-05) 50%, transparent);
    --wa-color-overlay-inline: color-mix(in oklab, var(--wa-color-neutral-80) 25%, transparent);

    --wa-color-shadow: color-mix(
      in oklab,
      var(--wa-color-neutral-05) calc(var(--wa-shadow-blur-scale) * 4% + 8%),
      transparent
    );

    --wa-color-focus: var(--wa-color-brand-60);

    --wa-color-mix-hover: oklch(from currentColor calc(1 - l) c h) 10%;
    --wa-color-mix-active: var(--wa-color-surface-default) 10%;

    --wa-color-brand-fill-quiet: var(--wa-color-brand-95);
    --wa-color-brand-fill-normal: var(--wa-color-brand-90);
    --wa-color-brand-fill-loud: var(--wa-color-brand-50);
    --wa-color-brand-border-quiet: var(--wa-color-brand-90);
    --wa-color-brand-border-normal: var(--wa-color-brand-80);
    --wa-color-brand-border-loud: var(--wa-color-brand-60);
    --wa-color-brand-on-quiet: var(--wa-color-brand-40);
    --wa-color-brand-on-normal: var(--wa-color-brand-30);
    --wa-color-brand-on-loud: white;

    --wa-color-success-fill-quiet: var(--wa-color-success-95);
    --wa-color-success-fill-normal: var(--wa-color-success-90);
    --wa-color-success-fill-loud: var(--wa-color-success-50);
    --wa-color-success-border-quiet: var(--wa-color-success-90);
    --wa-color-success-border-normal: var(--wa-color-success-80);
    --wa-color-success-border-loud: var(--wa-color-success-60);
    --wa-color-success-on-quiet: var(--wa-color-success-40);
    --wa-color-success-on-normal: var(--wa-color-success-30);
    --wa-color-success-on-loud: white;

    --wa-color-warning-fill-quiet: var(--wa-color-warning-95);
    --wa-color-warning-fill-normal: var(--wa-color-warning-90);
    --wa-color-warning-fill-loud: var(--wa-color-warning-50);
    --wa-color-warning-border-quiet: var(--wa-color-warning-90);
    --wa-color-warning-border-normal: var(--wa-color-warning-80);
    --wa-color-warning-border-loud: var(--wa-color-warning-60);
    --wa-color-warning-on-quiet: var(--wa-color-warning-40);
    --wa-color-warning-on-normal: var(--wa-color-warning-30);
    --wa-color-warning-on-loud: white;

    --wa-color-danger-fill-quiet: var(--wa-color-danger-95);
    --wa-color-danger-fill-normal: var(--wa-color-danger-90);
    --wa-color-danger-fill-loud: var(--wa-color-danger-50);
    --wa-color-danger-border-quiet: var(--wa-color-danger-90);
    --wa-color-danger-border-normal: var(--wa-color-danger-80);
    --wa-color-danger-border-loud: var(--wa-color-danger-60);
    --wa-color-danger-on-quiet: var(--wa-color-danger-40);
    --wa-color-danger-on-normal: var(--wa-color-danger-30);
    --wa-color-danger-on-loud: white;

    --wa-color-neutral-fill-quiet: var(--wa-color-neutral-95);
    --wa-color-neutral-fill-normal: var(--wa-color-neutral-90);
    --wa-color-neutral-fill-loud: var(--wa-color-neutral-20);
    --wa-color-neutral-border-quiet: var(--wa-color-neutral-90);
    --wa-color-neutral-border-normal: var(--wa-color-neutral-80);
    --wa-color-neutral-border-loud: var(--wa-color-neutral-60);
    --wa-color-neutral-on-quiet: var(--wa-color-neutral-40);
    --wa-color-neutral-on-normal: var(--wa-color-neutral-30);
    --wa-color-neutral-on-loud: white;
    /* #endregion */
  }

  .wa-dark,
  .wa-invert,
  .wa-dark .wa-theme-default,
  .wa-light .wa-theme-default.wa-invert,
  .wa-light .wa-theme-default .wa-invert {
    /* #region Colors (Dark) ~~~~~~~~~~~~~~~~~~~~~~ */
    color-scheme: dark;
    color: var(--wa-color-text-normal);

    --wa-color-surface-raised: var(--wa-color-neutral-10);
    --wa-color-surface-default: var(--wa-color-neutral-05);
    --wa-color-surface-lowered: color-mix(in oklab, var(--wa-color-surface-default), black 20%);
    --wa-color-surface-border: var(--wa-color-neutral-20);

    --wa-color-text-normal: var(--wa-color-neutral-95);
    --wa-color-text-quiet: var(--wa-color-neutral-60);
    --wa-color-text-link: var(--wa-color-brand-70);

    --wa-color-overlay-modal: color-mix(in oklab, black 60%, transparent);
    --wa-color-overlay-inline: color-mix(in oklab, var(--wa-color-neutral-50) 10%, transparent);

    --wa-color-shadow: color-mix(
      in oklab,
      var(--wa-color-surface-lowered) calc(var(--wa-shadow-blur-scale) * 32% + 40%),
      transparent
    );

    --wa-color-focus: var(--wa-color-brand-60);

    --wa-color-mix-hover: oklch(from currentColor calc(1 - l) c h) 20%;
    --wa-color-mix-active: var(--wa-color-surface-default) 20%;

    --wa-color-brand-fill-quiet: var(--wa-color-brand-10);
    --wa-color-brand-fill-normal: var(--wa-color-brand-20);
    --wa-color-brand-fill-loud: var(--wa-color-brand-50);
    --wa-color-brand-border-quiet: var(--wa-color-brand-20);
    --wa-color-brand-border-normal: var(--wa-color-brand-30);
    --wa-color-brand-border-loud: var(--wa-color-brand-40);
    --wa-color-brand-on-quiet: var(--wa-color-brand-60);
    --wa-color-brand-on-normal: var(--wa-color-brand-70);
    --wa-color-brand-on-loud: white;

    --wa-color-success-fill-quiet: var(--wa-color-success-10);
    --wa-color-success-fill-normal: var(--wa-color-success-20);
    --wa-color-success-fill-loud: var(--wa-color-success-50);
    --wa-color-success-border-quiet: var(--wa-color-success-20);
    --wa-color-success-border-normal: var(--wa-color-success-30);
    --wa-color-success-border-loud: var(--wa-color-success-40);
    --wa-color-success-on-quiet: var(--wa-color-success-60);
    --wa-color-success-on-normal: var(--wa-color-success-70);
    --wa-color-success-on-loud: white;

    --wa-color-warning-fill-quiet: var(--wa-color-warning-10);
    --wa-color-warning-fill-normal: var(--wa-color-warning-20);
    --wa-color-warning-fill-loud: var(--wa-color-warning-50);
    --wa-color-warning-border-quiet: var(--wa-color-warning-20);
    --wa-color-warning-border-normal: var(--wa-color-warning-30);
    --wa-color-warning-border-loud: var(--wa-color-warning-40);
    --wa-color-warning-on-quiet: var(--wa-color-warning-60);
    --wa-color-warning-on-normal: var(--wa-color-warning-70);
    --wa-color-warning-on-loud: white;

    --wa-color-danger-fill-quiet: var(--wa-color-danger-10);
    --wa-color-danger-fill-normal: var(--wa-color-danger-20);
    --wa-color-danger-fill-loud: var(--wa-color-danger-50);
    --wa-color-danger-border-quiet: var(--wa-color-danger-20);
    --wa-color-danger-border-normal: var(--wa-color-danger-30);
    --wa-color-danger-border-loud: var(--wa-color-danger-40);
    --wa-color-danger-on-quiet: var(--wa-color-danger-60);
    --wa-color-danger-on-normal: var(--wa-color-danger-70);
    --wa-color-danger-on-loud: white;

    --wa-color-neutral-fill-quiet: var(--wa-color-neutral-10);
    --wa-color-neutral-fill-normal: var(--wa-color-neutral-20);
    --wa-color-neutral-fill-loud: var(--wa-color-neutral-90);
    --wa-color-neutral-border-quiet: var(--wa-color-neutral-20);
    --wa-color-neutral-border-normal: var(--wa-color-neutral-30);
    --wa-color-neutral-border-loud: var(--wa-color-neutral-40);
    --wa-color-neutral-on-quiet: var(--wa-color-neutral-60);
    --wa-color-neutral-on-normal: var(--wa-color-neutral-70);
    --wa-color-neutral-on-loud: var(--wa-color-neutral-05);
    /* #endregion */
  }

  :where(:root),
  .wa-theme-default,
  .wa-light,
  .wa-dark,
  .wa-invert {
    font-family: var(--wa-font-family-body);

    /* #region Fonts ~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
    --wa-font-family-body: ui-sans-serif, system-ui, sans-serif;
    --wa-font-family-heading: var(--wa-font-family-body);
    --wa-font-family-code: ui-monospace, monospace;
    --wa-font-family-longform: ui-serif, serif;

    /* Font sizes use a ratio of 1.125 to scale sizes proportionally.
     * For larger font sizes, each size is twice 1.125x larger to maximize impact.
     * Each value uses `rem` units and is rounded to the nearest whole pixel when rendered. */
    --wa-font-size-scale: 1;
    --wa-font-size-3xs: round(calc(var(--wa-font-size-2xs) / 1.125), 1px); /* 10px */
    --wa-font-size-2xs: round(calc(var(--wa-font-size-xs) / 1.125), 1px); /* 11px */
    --wa-font-size-xs: round(calc(var(--wa-font-size-s) / 1.125), 1px); /* 12px */
    --wa-font-size-s: round(calc(var(--wa-font-size-m) / 1.125), 1px); /* 14px */
    --wa-font-size-m: calc(1rem * var(--wa-font-size-scale)); /* 16px */
    --wa-font-size-l: round(calc(var(--wa-font-size-m) * 1.125 * 1.125), 1px); /* 20px */
    --wa-font-size-xl: round(calc(var(--wa-font-size-l) * 1.125 * 1.125), 1px); /* 25px */
    --wa-font-size-2xl: round(calc(var(--wa-font-size-xl) * 1.125 * 1.125), 1px); /* 32px */
    --wa-font-size-3xl: round(calc(var(--wa-font-size-2xl) * 1.125 * 1.125), 1px); /* 41px */
    --wa-font-size-4xl: round(calc(var(--wa-font-size-3xl) * 1.125 * 1.125), 1px); /* 52px */
    --wa-font-size-5xl: round(calc(var(--wa-font-size-4xl) * 1.125 * 1.125), 1px); /* 66px */

    --wa-font-size-smaller: round(calc(1em / 1.125), 1px);
    --wa-font-size-larger: round(calc(1em * 1.125 * 1.125), 1px);

    --wa-font-weight-light: 300;
    --wa-font-weight-normal: 400;
    --wa-font-weight-semibold: 500;
    --wa-font-weight-bold: 600;

    --wa-font-weight-body: var(--wa-font-weight-normal);
    --wa-font-weight-heading: var(--wa-font-weight-bold);
    --wa-font-weight-code: var(--wa-font-weight-normal);
    --wa-font-weight-longform: var(--wa-font-weight-normal);
    --wa-font-weight-action: var(--wa-font-weight-semibold);

    --wa-line-height-condensed: 1.2;
    --wa-line-height-normal: 1.6;
    --wa-line-height-expanded: 2;

    --wa-link-decoration-default: underline color-mix(in oklab, currentColor 70%, transparent) dotted;
    --wa-link-decoration-hover: underline;
    /* #endregion */

    /* #region Space ~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
    --wa-space-scale: 1;
    --wa-space-3xs: calc(var(--wa-space-scale) * 0.125rem); /* 2px */
    --wa-space-2xs: calc(var(--wa-space-scale) * 0.25rem); /* 4px */
    --wa-space-xs: calc(var(--wa-space-scale) * 0.5rem); /* 8px */
    --wa-space-s: calc(var(--wa-space-scale) * 0.75rem); /* 12px */
    --wa-space-m: calc(var(--wa-space-scale) * 1rem); /* 16px */
    --wa-space-l: calc(var(--wa-space-scale) * 1.5rem); /* 24px */
    --wa-space-xl: calc(var(--wa-space-scale) * 2rem); /* 32px */
    --wa-space-2xl: calc(var(--wa-space-scale) * 2.5rem); /* 40px */
    --wa-space-3xl: calc(var(--wa-space-scale) * 3rem); /* 48px */
    --wa-space-4xl: calc(var(--wa-space-scale) * 4rem); /* 64px */
    --wa-space-5xl: calc(var(--wa-space-scale) * 5rem); /* 80px */

    --wa-content-spacing: var(--wa-space-l);
    /* #endregion */

    /* #region Borders ~~~~~~~~~~~~~~~~~~~~~~~~~~ */
    --wa-border-style: solid;

    --wa-border-width-scale: 1;
    --wa-border-width-s: calc(var(--wa-border-width-scale) * 0.0625rem);
    --wa-border-width-m: calc(var(--wa-border-width-scale) * 0.125rem);
    --wa-border-width-l: calc(var(--wa-border-width-scale) * 0.1875rem);
    /* #endregion */

    /* #region Rounding ~~~~~~~~~~~~~~~~~~~~~~~~~ */
    --wa-border-radius-scale: 1;
    --wa-border-radius-s: calc(var(--wa-border-radius-scale) * 0.1875rem);
    --wa-border-radius-m: calc(var(--wa-border-radius-scale) * 0.375rem);
    --wa-border-radius-l: calc(var(--wa-border-radius-scale) * 0.75rem);

    --wa-border-radius-pill: 9999px;
    --wa-border-radius-circle: 50%;
    --wa-border-radius-square: 0px;
    /* #endregion */

    /* #region Focus ~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
    --wa-focus-ring-style: solid;
    --wa-focus-ring-width: 0.1875rem; /* 3px */
    --wa-focus-ring: var(--wa-focus-ring-style) var(--wa-focus-ring-width) var(--wa-color-focus);
    --wa-focus-ring-offset: 0.0625rem; /* 1px */
    /* #endregion */

    /* #region Shadows ~~~~~~~~~~~~~~~~~~~~~~~~~~ */
    --wa-shadow-offset-x-scale: 0;
    --wa-shadow-offset-x-s: calc(var(--wa-shadow-offset-x-scale) * 0.125rem);
    --wa-shadow-offset-x-m: calc(var(--wa-shadow-offset-x-scale) * 0.25rem);
    --wa-shadow-offset-x-l: calc(var(--wa-shadow-offset-x-scale) * 0.5rem);

    --wa-shadow-offset-y-scale: 1;
    --wa-shadow-offset-y-s: calc(var(--wa-shadow-offset-y-scale) * 0.125rem);
    --wa-shadow-offset-y-m: calc(var(--wa-shadow-offset-y-scale) * 0.25rem);
    --wa-shadow-offset-y-l: calc(var(--wa-shadow-offset-y-scale) * 0.5rem);

    --wa-shadow-blur-scale: 1;
    --wa-shadow-blur-s: calc(var(--wa-shadow-blur-scale) * 0.125rem);
    --wa-shadow-blur-m: calc(var(--wa-shadow-blur-scale) * 0.25rem);
    --wa-shadow-blur-l: calc(var(--wa-shadow-blur-scale) * 0.5rem);

    --wa-shadow-spread-scale: -0.5;
    --wa-shadow-spread-s: calc(var(--wa-shadow-spread-scale) * 0.125rem);
    --wa-shadow-spread-m: calc(var(--wa-shadow-spread-scale) * 0.25rem);
    --wa-shadow-spread-l: calc(var(--wa-shadow-spread-scale) * 0.5rem);

    --wa-shadow-s: var(--wa-shadow-offset-x-s) var(--wa-shadow-offset-y-s) var(--wa-shadow-blur-s)
      var(--wa-shadow-spread-s) var(--wa-color-shadow);
    --wa-shadow-m: var(--wa-shadow-offset-x-m) var(--wa-shadow-offset-y-m) var(--wa-shadow-blur-m)
      var(--wa-shadow-spread-m) var(--wa-color-shadow);
    --wa-shadow-l: var(--wa-shadow-offset-x-l) var(--wa-shadow-offset-y-l) var(--wa-shadow-blur-l)
      var(--wa-shadow-spread-l) var(--wa-color-shadow);
    /* #endregion */

    /* #region Transitions ~~~~~~~~~~~~~~~~~~~~~~ */
    --wa-transition-easing: ease;
    --wa-transition-slow: 300ms;
    --wa-transition-normal: 150ms;
    --wa-transition-fast: 75ms;
    /* #endregion */

    /* #region Components ~~~~~~~~~~~~~~~~~~~~~~~ */
    /* Form Controls */
    --wa-form-control-background-color: var(--wa-color-surface-default);

    --wa-form-control-border-color: var(--wa-color-neutral-border-loud);
    --wa-form-control-border-style: var(--wa-border-style);
    --wa-form-control-border-width: var(--wa-border-width-s);
    --wa-form-control-border-radius: var(--wa-border-radius-m);

    --wa-form-control-activated-color: var(--wa-color-brand-fill-loud);

    --wa-form-control-label-color: var(--wa-color-text-normal);
    --wa-form-control-label-font-weight: var(--wa-font-weight-semibold);
    --wa-form-control-label-line-height: var(--wa-line-height-condensed);

    --wa-form-control-value-color: var(--wa-color-text-normal);
    --wa-form-control-value-font-weight: var(--wa-font-weight-body);
    --wa-form-control-value-line-height: var(--wa-line-height-condensed);

    --wa-form-control-hint-color: var(--wa-color-text-quiet);
    --wa-form-control-hint-font-weight: var(--wa-font-weight-body);
    --wa-form-control-hint-line-height: var(--wa-line-height-normal);

    --wa-form-control-placeholder-color: var(--wa-color-gray-50);

    --wa-form-control-required-content: '*';
    --wa-form-control-required-content-color: inherit;
    --wa-form-control-required-content-offset: 0.1em;

    --wa-form-control-padding-block: 0.75em;
    --wa-form-control-padding-inline: 1em;
    --wa-form-control-height: round(
      calc(2 * var(--wa-form-control-padding-block) + 1em * var(--wa-form-control-value-line-height)),
      1px
    );
    --wa-form-control-toggle-size: round(1.25em, 1px);

    /* Buttons */
    --wa-button-transform-hover: none;
    --wa-button-transform-active: scale(0.9875);

    /* Panels */
    --wa-panel-border-style: var(--wa-border-style);
    --wa-panel-border-width: var(--wa-border-width-s);
    --wa-panel-border-radius: var(--wa-border-radius-l);

    /* Tooltips */
    --wa-tooltip-arrow-size: 0.375rem;

    --wa-tooltip-background-color: var(--wa-color-text-normal);

    --wa-tooltip-border-color: var(--wa-tooltip-background-color);
    --wa-tooltip-border-style: var(--wa-border-style);
    --wa-tooltip-border-width: var(--wa-border-width-s);
    --wa-tooltip-border-radius: var(--wa-border-radius-s);

    --wa-tooltip-content-color: var(--wa-color-surface-default);
    --wa-tooltip-font-size: var(--wa-font-size-s);
    --wa-tooltip-line-height: var(--wa-line-height-normal);
    /* #endregion */
  }

  :is(html, body):has(wa-page) {
    min-height: 100%;
    padding: 0;
    margin: 0;
  }
}
/* Generated by scripts/generate.mjs from src/tokens/*.css. Do not edit. */

:root,
::backdrop {
  /* ---- Brand · the Lit flame ---- */
  --lit-blue: #324fff;
  --lit-blue-bright: #4d63ff;
  --lit-indigo: #2a2c9d;
  --lit-dark-blue: #283198;
  --lit-cyan: #00ffff;
  --lit-cyan-soft: #91ffff;
  --lit-dark-cyan: #00e8ff;

  /* Lit blue as an 11-step ramp, 50 = --lit-blue, hue held at 268. */
  --lit-blue-95: oklch(0.96 0.02 268);
  --lit-blue-90: oklch(0.92 0.045 268);
  --lit-blue-80: oklch(0.84 0.09 268);
  --lit-blue-70: oklch(0.74 0.15 268);
  --lit-blue-60: oklch(0.64 0.21 268);
  --lit-blue-50: var(--lit-blue);
  --lit-blue-40: oklch(0.44 0.23 268);
  --lit-blue-30: oklch(0.36 0.19 268);
  --lit-blue-20: oklch(0.28 0.13 268);
  --lit-blue-10: oklch(0.2 0.08 268);
  --lit-blue-05: oklch(0.15 0.05 268);

  /* ---- Neutral ink scale (0 = near-black, 13 = white) ---- */
  --ink-0: hsl(0 0% 1%);
  --ink-1: hsl(0 0% 5%);
  --ink-2: hsl(0 0% 7%);
  --ink-3: hsl(0 0% 11%);
  --ink-4: hsl(0 0% 13%);
  --ink-5: hsl(0 0% 16%);
  --ink-6: hsl(0 0% 21%);
  --ink-7: hsl(0 0% 28%);
  --ink-8: hsl(0 0% 38%);
  --ink-9: hsl(0 0% 57%);
  --ink-10: hsl(0 0% 63%);
  --ink-11: hsl(0 0% 78%);
  --ink-12: hsl(0 0% 89%);
  --ink-13: hsl(0 0% 100%);

  /* ---- Typography ---- */
  --font-sans:
    ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono:
    'Lilex Variable', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-extrabold: 800;

  --text-2xs: 11px;
  --text-xs: 12px;
  --text-sm: 13px;
  --text-md: 14px;
  --text-base: 16px;
  --text-lg: 18px;
  --text-xl: 22px;
  --text-2xl: 28px;
  --text-3xl: 36px;
  --text-4xl: 48px;
  --text-5xl: 64px;

  --leading-tight: 1.15;
  --leading-snug: 1.3;
  --leading-normal: 1.5;
  --leading-relaxed: 1.65;

  --tracking-tight: -0.02em;
  --tracking-snug: -0.01em;
  --tracking-normal: 0;
  --tracking-wide: 0.02em;
  --tracking-caps: 0.06em;

  /* ---- Spacing (4px base, fine-grained for dense tooling) ---- */
  --space-0: 0;
  --space-1: 2px;
  --space-2: 4px;
  --space-3: 6px;
  --space-4: 8px;
  --space-5: 12px;
  --space-6: 16px;
  --space-7: 20px;
  --space-8: 24px;
  --space-9: 32px;
  --space-10: 40px;
  --space-11: 48px;
  --space-12: 64px;
  --space-14: 80px;
  --space-16: 96px;

  /* ---- Density ---- */
  /* Tree and list rows: WCAG 2.5.8's 24px minimum target, since a row is
     what gets clicked. */
  --row-height: 24px;

  /* ---- Radius · square corners; pills are the one round shape ---- */
  --radius-xs: 0;
  --radius-sm: 0;
  --radius-md: 0; /* default control / card */
  --radius-lg: 0; /* panels, active nav pill */
  --radius-xl: 0;
  --radius-2xl: 0; /* DevTools window shell */
  --radius-pill: 9999px; /* the one round shape: pills and dots */

  --border-width: 1px;
  --border-width-thick: 2px;

  /* ---- Elevation (tuned for dark) ---- */
  --shadow-xs: 0 1px 2px hsl(0 0% 0% / 0.3);
  --shadow-sm: 0 1px 5px hsl(0 0% 0% / 0.35);
  --shadow-md: 0 4px 14px hsl(0 0% 0% / 0.4);
  --shadow-lg: 0 12px 32px hsl(0 0% 0% / 0.5);
  --shadow-xl: 0 24px 64px hsl(0 0% 0% / 0.55);
  --shadow-window:
    0 24px 80px hsl(0 0% 0% / 0.6), 0 0 0 1px hsl(0 0% 100% / 0.06);
  --ring: 0 0 0 2px var(--accent-ring);

  /* ---- Motion ---- */
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-emphasized: cubic-bezier(0.3, 0, 0, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --dur-instant: 80ms;
  --dur-fast: 140ms;
  --dur-normal: 220ms;
  --dur-slow: 360ms;
}

/* Dark is the default scheme. */
:root,
::backdrop,
.theme-dark,
.wa-dark,
:root.color-scheme-dark,
:root[data-theme='dark'] {
  --accent: var(--lit-blue-bright);
  --accent-hover: #6478ff;
  --accent-pressed: #3d54f0;
  --accent-soft: hsla(232 100% 65% / 0.16);
  --accent-ring: hsla(232 100% 65% / 0.45);
  --on-accent: #ffffff;
  --accent-cyan: var(--lit-dark-cyan);

  --bg: var(--ink-0);
  --surface: var(--ink-2);
  --surface-low: var(--ink-1);
  --surface-container: var(--ink-4);
  --surface-container-high: var(--ink-5);
  --surface-elevated: var(--ink-6);
  --surface-hover: hsl(0 0% 100% / 0.04);
  --surface-active: hsl(0 0% 100% / 0.07);

  --text: var(--ink-12);
  --text-strong: var(--ink-13);
  /* ink-10 / ink-8 in the design system; one step lighter for 4.5:1. */
  --text-secondary: var(--ink-11);
  --text-muted: var(--ink-9);
  /* Lighter than the brand blue (4.2:1 on ink-1): 6.5:1, so links read as text. */
  --text-link: oklch(0.72 0.15 268);

  --border: var(--ink-6);
  --border-strong: var(--ink-7);
  --border-subtle: hsl(0 0% 100% / 0.06);

  --success: hsl(158 74% 53%);
  --success-soft: hsl(158 74% 53% / 0.15);
  --warning: #f4bf4f;
  --warning-soft: hsl(43 88% 63% / 0.15);
  --error: #ff6b6b;
  --error-soft: hsl(0 100% 71% / 0.15);
  --info: var(--lit-dark-cyan);
  --info-soft: hsl(187 100% 47% / 0.15);

  --selection-bg: var(--accent);
  --on-selection: #ffffff;

  /* Code / value syntax: Material-ish, on dark. */
  --code-default: #eeffff;
  --code-keyword: #c792ea;
  --code-string: #c3e88d;
  --code-number: #f78c6c;
  --code-property: #b2ccd6;
  /* Teal, not Material's #89ddff: that sat by --code-callee's blue, and a
     state row's element ref and function read as one colour. */
  --code-tag: #7fdbca;
  /* #616161 in the design system: 3:1 on ink-2, too faint for a null. */
  --code-comment: #8a8a8a;
  --code-callee: #82aaff;

  color-scheme: dark;
}

/* Light follows the OS unless something on :root already picked a scheme. */
@media (prefers-color-scheme: light) {
  :root:not(.color-scheme-dark, .wa-dark, .theme-dark, [data-theme]) {
    --accent: var(--lit-blue);
    --accent-hover: #1f3bff;
    --accent-pressed: #2a2c9d;
    --accent-soft: hsla(232 100% 60% / 0.12);
    --accent-ring: hsla(232 100% 60% / 0.4);
    --on-accent: #ffffff;
    --accent-cyan: var(--lit-dark-cyan);

    --bg: #f4f4f4;
    --surface: #ffffff;
    --surface-low: #f3f3f3;
    --surface-container: #ffffff;
    --surface-container-high: #e8e8e8;
    --surface-elevated: #ffffff;
    --surface-hover: hsl(0 0% 0% / 0.04);
    --surface-active: hsl(0 0% 0% / 0.07);

    --text: #242424;
    --text-strong: #000000;
    /* #6e6e6e / #949494 in the design system; darkened for 4.5:1 on white. */
    --text-secondary: #595959;
    --text-muted: #6f6f6f;
    --text-link: #005dc7;

    --border: #e2e2e2;
    --border-strong: #c6c6c6;
    --border-subtle: hsl(0 0% 0% / 0.07);

    --success: #00865b;
    --success-soft: hsl(158 100% 26% / 0.1);
    --warning: #b26a00;
    --warning-soft: hsl(40 100% 35% / 0.1);
    --error: #ba1a1a;
    --error-soft: hsl(0 75% 42% / 0.1);
    --info: #005dc7;
    --info-soft: hsl(210 100% 39% / 0.1);

    --selection-bg: var(--accent);
    --on-selection: #ffffff;

    /* Code / value syntax: the dark hues darkened to hold contrast on white
       (the design system's GitHub-like set for keyword through callee). */
    --code-default: #24292e;
    --code-keyword: #8839b5;
    --code-string: #3c7a0b;
    --code-number: #b8470f;
    --code-property: #4a5d68;
    --code-tag: #007366;
    --code-comment: #6a737d;
    --code-callee: #2b56c9;

    color-scheme: light;
  }
}

.theme-light,
.wa-light,
:root.color-scheme-light,
:root[data-theme='light'],
:root[data-theme='light'] ::backdrop {
  --accent: var(--lit-blue);
  --accent-hover: #1f3bff;
  --accent-pressed: #2a2c9d;
  --accent-soft: hsla(232 100% 60% / 0.12);
  --accent-ring: hsla(232 100% 60% / 0.4);
  --on-accent: #ffffff;
  --accent-cyan: var(--lit-dark-cyan);

  --bg: #f4f4f4;
  --surface: #ffffff;
  --surface-low: #f3f3f3;
  --surface-container: #ffffff;
  --surface-container-high: #e8e8e8;
  --surface-elevated: #ffffff;
  --surface-hover: hsl(0 0% 0% / 0.04);
  --surface-active: hsl(0 0% 0% / 0.07);

  --text: #242424;
  --text-strong: #000000;
  /* #6e6e6e / #949494 in the design system; darkened for 4.5:1 on white. */
  --text-secondary: #595959;
  --text-muted: #6f6f6f;
  --text-link: #005dc7;

  --border: #e2e2e2;
  --border-strong: #c6c6c6;
  --border-subtle: hsl(0 0% 0% / 0.07);

  --success: #00865b;
  --success-soft: hsl(158 100% 26% / 0.1);
  --warning: #b26a00;
  --warning-soft: hsl(40 100% 35% / 0.1);
  --error: #ba1a1a;
  --error-soft: hsl(0 75% 42% / 0.1);
  --info: #005dc7;
  --info-soft: hsl(210 100% 39% / 0.1);

  --selection-bg: var(--accent);
  --on-selection: #ffffff;

  /* Code / value syntax: the dark hues darkened to hold contrast on white
     (the design system's GitHub-like set for keyword through callee). */
  --code-default: #24292e;
  --code-keyword: #8839b5;
  --code-string: #3c7a0b;
  --code-number: #b8470f;
  --code-property: #4a5d68;
  --code-tag: #007366;
  --code-comment: #6a737d;
  --code-callee: #2b56c9;

  color-scheme: light;
}

@layer wa-theme-overrides {
  :where(:root),
  .wa-theme-lit,
  .wa-light,
  .wa-dark {
    --wa-color-brand-95: var(--lit-blue-95);
    --wa-color-brand-90: var(--lit-blue-90);
    --wa-color-brand-80: var(--lit-blue-80);
    --wa-color-brand-70: var(--lit-blue-70);
    --wa-color-brand-60: var(--lit-blue-60);
    --wa-color-brand-50: var(--lit-blue-50);
    --wa-color-brand-40: var(--lit-blue-40);
    --wa-color-brand-30: var(--lit-blue-30);
    --wa-color-brand-20: var(--lit-blue-20);
    --wa-color-brand-10: var(--lit-blue-10);
    --wa-color-brand-05: var(--lit-blue-05);
    --wa-color-brand: var(--lit-blue);
    --wa-color-brand-on: var(--on-accent);

    --wa-color-surface-default: var(--surface);
    --wa-color-surface-raised: var(--surface-elevated);
    --wa-color-surface-lowered: var(--surface-low);
    --wa-color-surface-border: var(--border);
    --wa-color-text-normal: var(--text);
    --wa-color-text-quiet: var(--text-secondary);
    --wa-color-text-link: var(--text-link);
    --wa-color-focus: var(--accent);

    --wa-font-family-body: var(--font-sans);
    --wa-font-family-heading: var(--font-sans);
    --wa-font-family-code: var(--font-mono);

    /* WA's sizes run 10, 11, 12, 14, 16, 20, 25, 32, 40, 51, 64px; 2xs to m
       already sit on the design system's scale. The rest go to its nearest
       step, still times WA's scale so a density (the DevTools' 0.8125)
       shrinks them too. 3xs is lit-badge's floor: its 0.75em (10.5px)
       becomes 11px. */
    --wa-font-size-3xs: round(
      calc(var(--text-2xs) * var(--wa-font-size-scale)),
      1px
    );
    --wa-font-size-l: round(
      calc(var(--text-xl) * var(--wa-font-size-scale)),
      1px
    );
    --wa-font-size-xl: round(
      calc(var(--text-2xl) * var(--wa-font-size-scale)),
      1px
    );
    --wa-font-size-2xl: round(
      calc(var(--text-3xl) * var(--wa-font-size-scale)),
      1px
    );
    --wa-font-size-3xl: round(
      calc(var(--text-3xl) * var(--wa-font-size-scale)),
      1px
    );
    --wa-font-size-4xl: round(
      calc(var(--text-4xl) * var(--wa-font-size-scale)),
      1px
    );

    /* The design system's radii: square corners, round pills. Circles (a
       status dot) follow pills; lit-switch stays square. */
    --wa-border-radius-s: var(--radius-sm);
    --wa-border-radius-m: var(--radius-md);
    --wa-border-radius-l: var(--radius-lg);
    --wa-border-radius-pill: var(--radius-pill);
    --wa-border-radius-circle: var(--radius-pill);

    --wa-transition-easing: var(--ease-standard);
    --wa-transition-fast: var(--dur-instant);
    --wa-transition-normal: var(--dur-fast);
    --wa-transition-slow: var(--dur-normal);
  }

  /* Dark-scheme contrast. WA's loud borders sit at step 40, 2.2–2.7:1 on
     the dark surfaces, under the 3:1 a control's outline needs (an
     unchecked switch, an input, an outlined button); step 50 clears it.
     WA's loud neutral fill is near-white (step 90), which made a neutral
     accent the brightest thing on a dark page; step 70 keeps it the loudest
     neutral with dark text at 8:1. */
  .wa-dark {
    --wa-color-brand-border-loud: var(--wa-color-brand-50);
    --wa-color-neutral-border-loud: var(--wa-color-neutral-50);
    --wa-color-success-border-loud: var(--wa-color-success-50);
    --wa-color-warning-border-loud: var(--wa-color-warning-50);
    --wa-color-danger-border-loud: var(--wa-color-danger-50);
    --wa-color-neutral-fill-loud: var(--wa-color-neutral-70);
  }
}
/* lilex-cyrillic-ext-wght-normal */
@font-face {
  font-family: 'Lilex Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 700;
  src: url(./lilex-cyrillic-ext-wght-normal-DSVtyF4q.woff2) format('woff2-variations');
  unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
}

/* lilex-cyrillic-wght-normal */
@font-face {
  font-family: 'Lilex Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 700;
  src: url(./lilex-cyrillic-wght-normal-2pLOGY8a.woff2) format('woff2-variations');
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}

/* lilex-greek-wght-normal */
@font-face {
  font-family: 'Lilex Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 700;
  src: url(./lilex-greek-wght-normal-CVi4yp5e.woff2) format('woff2-variations');
  unicode-range: U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF;
}

/* lilex-symbols2-wght-normal */
@font-face {
  font-family: 'Lilex Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 700;
  src: url(./lilex-symbols2-wght-normal-CdwabkRM.woff2) format('woff2-variations');
  unicode-range: U+2000-2001,U+2004-2008,U+200A,U+23B8-23BD,U+2500-259F;
}

/* lilex-vietnamese-wght-normal */
@font-face {
  font-family: 'Lilex Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 700;
  src: url(./lilex-vietnamese-wght-normal-YXM8IdOA.woff2) format('woff2-variations');
  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
}

/* lilex-latin-ext-wght-normal */
@font-face {
  font-family: 'Lilex Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 700;
  src: url(./lilex-latin-ext-wght-normal-BETfXIuk.woff2) format('woff2-variations');
  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;
}

/* lilex-latin-wght-normal */
@font-face {
  font-family: 'Lilex Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 700;
  src: url(./lilex-latin-wght-normal-DMDQsmS0.woff2) format('woff2-variations');
  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;
}