@import url(https://fonts.googleapis.com/css2?family=Crimson+Pro:ital,wght@0,200..900;1,200..900&family=Quicksand:wght@300..700&display=swap);
.wa-light {
  --nb-category-red-background-color: var(--color-red-90);
  --nb-category-red-border-color: var(--color-red-60);
  --nb-category-red-color: var(--color-red-20);

  --nb-category-orange-background-color: var(--color-orange-90);
  --nb-category-orange-border-color: var(--color-orange-60);
  --nb-category-orange-color: var(--color-orange-20);

  --nb-category-amber-background-color: var(--color-amber-90);
  --nb-category-amber-border-color: var(--color-amber-60);
  --nb-category-amber-color: var(--color-amber-20);

  --nb-category-yellow-background-color: var(--color-yellow-90);
  --nb-category-yellow-border-color: var(--color-yellow-60);
  --nb-category-yellow-color: var(--color-yellow-20);

  --nb-category-lime-background-color: var(--color-lime-90);
  --nb-category-lime-border-color: var(--color-lime-60);
  --nb-category-lime-color: var(--color-lime-20);

  --nb-category-green-background-color: var(--color-green-90);
  --nb-category-green-border-color: var(--color-green-60);
  --nb-category-green-color: var(--color-green-20);

  --nb-category-emerald-background-color: var(--color-emerald-90);
  --nb-category-emerald-border-color: var(--color-emerald-60);
  --nb-category-emerald-color: var(--color-emerald-20);

  --nb-category-teal-background-color: var(--color-teal-90);
  --nb-category-teal-border-color: var(--color-teal-60);
  --nb-category-teal-color: var(--color-teal-20);

  --nb-category-cyan-background-color: var(--color-cyan-90);
  --nb-category-cyan-border-color: var(--color-cyan-60);
  --nb-category-cyan-color: var(--color-cyan-20);

  --nb-category-sky-background-color: var(--color-sky-90);
  --nb-category-sky-border-color: var(--color-sky-60);
  --nb-category-sky-color: var(--color-sky-20);

  --nb-category-blue-background-color: var(--color-blue-90);
  --nb-category-blue-border-color: var(--color-blue-60);
  --nb-category-blue-color: var(--color-blue-20);

  --nb-category-indigo-background-color: var(--color-indigo-90);
  --nb-category-indigo-border-color: var(--color-indigo-60);
  --nb-category-indigo-color: var(--color-indigo-20);

  --nb-category-violet-background-color: var(--color-violet-90);
  --nb-category-violet-border-color: var(--color-violet-60);
  --nb-category-violet-color: var(--color-violet-20);

  --nb-category-purple-background-color: var(--color-purple-90);
  --nb-category-purple-border-color: var(--color-purple-60);
  --nb-category-purple-color: var(--color-purple-20);

  --nb-category-fuchsia-background-color: var(--color-fuchsia-90);
  --nb-category-fuchsia-border-color: var(--color-fuchsia-60);
  --nb-category-fuchsia-color: var(--color-fuchsia-20);

  --nb-category-pink-background-color: var(--color-pink-90);
  --nb-category-pink-border-color: var(--color-pink-60);
  --nb-category-pink-color: var(--color-pink-20);

  --nb-category-rose-background-color: var(--color-rose-90);
  --nb-category-rose-border-color: var(--color-rose-60);
  --nb-category-rose-color: var(--color-rose-20);

  --nb-category-slate-background-color: var(--color-slate-90);
  --nb-category-slate-border-color: var(--color-slate-60);
  --nb-category-slate-color: var(--color-slate-20);

  --nb-category-gray-background-color: var(--color-gray-90);
  --nb-category-gray-border-color: var(--color-gray-60);
  --nb-category-gray-color: var(--color-gray-20);

  --nb-category-zinc-background-color: var(--color-zinc-90);
  --nb-category-zinc-border-color: var(--color-zinc-60);
  --nb-category-zinc-color: var(--color-zinc-20);

  --nb-category-neutral-background-color: var(--color-neutral-90);
  --nb-category-neutral-border-color: var(--color-neutral-60);
  --nb-category-neutral-color: var(--color-neutral-20);

  --nb-category-stone-background-color: var(--color-stone-90);
  --nb-category-stone-border-color: var(--color-stone-60);
  --nb-category-stone-color: var(--color-stone-20);
}

.wa-dark {
  --nb-category-red-background-color: var(--color-red-10);
  --nb-category-red-border-color: var(--color-red-40);
  --nb-category-red-color: var(--color-red-80);

  --nb-category-orange-background-color: var(--color-orange-10);
  --nb-category-orange-border-color: var(--color-orange-40);
  --nb-category-orange-color: var(--color-orange-80);

  --nb-category-amber-background-color: var(--color-amber-10);
  --nb-category-amber-border-color: var(--color-amber-40);
  --nb-category-amber-color: var(--color-amber-80);

  --nb-category-yellow-background-color: var(--color-yellow-10);
  --nb-category-yellow-border-color: var(--color-yellow-40);
  --nb-category-yellow-color: var(--color-yellow-80);

  --nb-category-lime-background-color: var(--color-lime-10);
  --nb-category-lime-border-color: var(--color-lime-40);
  --nb-category-lime-color: var(--color-lime-80);

  --nb-category-green-background-color: var(--color-green-10);
  --nb-category-green-border-color: var(--color-green-40);
  --nb-category-green-color: var(--color-green-80);

  --nb-category-emerald-background-color: var(--color-emerald-10);
  --nb-category-emerald-border-color: var(--color-emerald-40);
  --nb-category-emerald-color: var(--color-emerald-80);

  --nb-category-teal-background-color: var(--color-teal-10);
  --nb-category-teal-border-color: var(--color-teal-40);
  --nb-category-teal-color: var(--color-teal-80);

  --nb-category-cyan-background-color: var(--color-cyan-10);
  --nb-category-cyan-border-color: var(--color-cyan-40);
  --nb-category-cyan-color: var(--color-cyan-80);

  --nb-category-sky-background-color: var(--color-sky-10);
  --nb-category-sky-border-color: var(--color-sky-40);
  --nb-category-sky-color: var(--color-sky-80);

  --nb-category-blue-background-color: var(--color-blue-10);
  --nb-category-blue-border-color: var(--color-blue-40);
  --nb-category-blue-color: var(--color-blue-80);

  --nb-category-indigo-background-color: var(--color-indigo-10);
  --nb-category-indigo-border-color: var(--color-indigo-40);
  --nb-category-indigo-color: var(--color-indigo-80);

  --nb-category-violet-background-color: var(--color-violet-10);
  --nb-category-violet-border-color: var(--color-violet-40);
  --nb-category-violet-color: var(--color-violet-80);

  --nb-category-purple-background-color: var(--color-purple-10);
  --nb-category-purple-border-color: var(--color-purple-40);
  --nb-category-purple-color: var(--color-purple-80);

  --nb-category-fuchsia-background-color: var(--color-fuchsia-10);
  --nb-category-fuchsia-border-color: var(--color-fuchsia-40);
  --nb-category-fuchsia-color: var(--color-fuchsia-80);

  --nb-category-pink-background-color: var(--color-pink-10);
  --nb-category-pink-border-color: var(--color-pink-40);
  --nb-category-pink-color: var(--color-pink-80);

  --nb-category-rose-background-color: var(--color-rose-10);
  --nb-category-rose-border-color: var(--color-rose-40);
  --nb-category-rose-color: var(--color-rose-80);

  --nb-category-slate-background-color: var(--color-slate-10);
  --nb-category-slate-border-color: var(--color-slate-40);
  --nb-category-slate-color: var(--color-slate-80);

  --nb-category-gray-background-color: var(--color-gray-10);
  --nb-category-gray-border-color: var(--color-gray-40);
  --nb-category-gray-color: var(--color-gray-80);

  --nb-category-zinc-background-color: var(--color-zinc-10);
  --nb-category-zinc-border-color: var(--color-zinc-40);
  --nb-category-zinc-color: var(--color-zinc-80);

  --nb-category-neutral-background-color: var(--color-neutral-10);
  --nb-category-neutral-border-color: var(--color-neutral-40);
  --nb-category-neutral-color: var(--color-neutral-80);

  --nb-category-stone-background-color: var(--color-stone-10);
  --nb-category-stone-border-color: var(--color-stone-40);
  --nb-category-stone-color: var(--color-stone-80);
}

.color-picker {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sl-spacing-x-small);
  justify-content: center;
}

.existing-categories {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sl-spacing-2x-small);
}

:host,
html {
  --color-red-95: oklch(97.1% 0.013 17.38);
  --color-red-90: oklch(93.6% 0.032 17.717);
  --color-red-80: oklch(88.5% 0.062 18.334);
  --color-red-70: oklch(80.8% 0.114 19.571);
  --color-red-60: oklch(70.4% 0.191 22.216);
  --color-red-50: oklch(63.7% 0.237 25.331);
  --color-red-40: oklch(57.7% 0.245 27.325);
  --color-red-30: oklch(50.5% 0.213 27.518);
  --color-red-20: oklch(44.4% 0.177 26.899);
  --color-red-10: oklch(39.6% 0.141 25.723);
  --color-red-05: oklch(25.8% 0.092 26.042);

  --color-orange-95: oklch(98% 0.016 73.684);
  --color-orange-90: oklch(95.4% 0.038 75.164);
  --color-orange-80: oklch(90.1% 0.076 70.697);
  --color-orange-70: oklch(83.7% 0.128 66.29);
  --color-orange-60: oklch(75% 0.183 55.934);
  --color-orange-50: oklch(70.5% 0.213 47.604);
  --color-orange-40: oklch(64.6% 0.222 41.116);
  --color-orange-30: oklch(55.3% 0.195 38.402);
  --color-orange-20: oklch(47% 0.157 37.304);
  --color-orange-10: oklch(40.8% 0.123 38.172);
  --color-orange-05: oklch(26.6% 0.079 36.259);

  --color-amber-95: oklch(98.7% 0.022 95.277);
  --color-amber-90: oklch(96.2% 0.059 95.617);
  --color-amber-80: oklch(92.4% 0.12 95.746);
  --color-amber-70: oklch(87.9% 0.169 91.605);
  --color-amber-60: oklch(82.8% 0.189 84.429);
  --color-amber-50: oklch(76.9% 0.188 70.08);
  --color-amber-40: oklch(66.6% 0.179 58.318);
  --color-amber-30: oklch(55.5% 0.163 48.998);
  --color-amber-20: oklch(47.3% 0.137 46.201);
  --color-amber-10: oklch(41.4% 0.112 45.904);
  --color-amber-05: oklch(27.9% 0.077 45.635);

  --color-yellow-95: oklch(98.7% 0.026 102.212);
  --color-yellow-90: oklch(97.3% 0.071 103.193);
  --color-yellow-80: oklch(94.5% 0.129 101.54);
  --color-yellow-70: oklch(90.5% 0.182 98.111);
  --color-yellow-60: oklch(85.2% 0.199 91.936);
  --color-yellow-50: oklch(79.5% 0.184 86.047);
  --color-yellow-40: oklch(68.1% 0.162 75.834);
  --color-yellow-30: oklch(55.4% 0.135 66.442);
  --color-yellow-20: oklch(47.6% 0.114 61.907);
  --color-yellow-10: oklch(42.1% 0.095 57.708);
  --color-yellow-05: oklch(28.6% 0.066 53.813);

  --color-lime-95: oklch(98.6% 0.031 120.757);
  --color-lime-90: oklch(96.7% 0.067 122.328);
  --color-lime-80: oklch(93.8% 0.127 124.321);
  --color-lime-70: oklch(89.7% 0.196 126.665);
  --color-lime-60: oklch(84.1% 0.238 128.85);
  --color-lime-50: oklch(76.8% 0.233 130.85);
  --color-lime-40: oklch(64.8% 0.2 131.684);
  --color-lime-30: oklch(53.2% 0.157 131.589);
  --color-lime-20: oklch(45.3% 0.124 130.933);
  --color-lime-10: oklch(40.5% 0.101 131.063);
  --color-lime-05: oklch(27.4% 0.072 132.109);

  --color-green-95: oklch(98.2% 0.018 155.826);
  --color-green-90: oklch(96.2% 0.044 156.743);
  --color-green-80: oklch(92.5% 0.084 155.995);
  --color-green-70: oklch(87.1% 0.15 154.449);
  --color-green-60: oklch(79.2% 0.209 151.711);
  --color-green-50: oklch(72.3% 0.219 149.579);
  --color-green-40: oklch(62.7% 0.194 149.214);
  --color-green-30: oklch(52.7% 0.154 150.069);
  --color-green-20: oklch(44.8% 0.119 151.328);
  --color-green-10: oklch(39.3% 0.095 152.535);
  --color-green-05: oklch(26.6% 0.065 152.934);

  --color-emerald-95: oklch(97.9% 0.021 166.113);
  --color-emerald-90: oklch(95% 0.052 163.051);
  --color-emerald-80: oklch(90.5% 0.093 164.15);
  --color-emerald-70: oklch(84.5% 0.143 164.978);
  --color-emerald-60: oklch(76.5% 0.177 163.223);
  --color-emerald-50: oklch(69.6% 0.17 162.48);
  --color-emerald-40: oklch(59.6% 0.145 163.225);
  --color-emerald-30: oklch(50.8% 0.118 165.612);
  --color-emerald-20: oklch(43.2% 0.095 166.913);
  --color-emerald-10: oklch(37.8% 0.077 168.94);
  --color-emerald-05: oklch(26.2% 0.051 172.552);

  --color-teal-95: oklch(98.4% 0.014 180.72);
  --color-teal-90: oklch(95.3% 0.051 180.801);
  --color-teal-80: oklch(91% 0.096 180.426);
  --color-teal-70: oklch(85.5% 0.138 181.071);
  --color-teal-60: oklch(77.7% 0.152 181.912);
  --color-teal-50: oklch(70.4% 0.14 182.503);
  --color-teal-40: oklch(60% 0.118 184.704);
  --color-teal-30: oklch(51.1% 0.096 186.391);
  --color-teal-20: oklch(43.7% 0.078 188.216);
  --color-teal-10: oklch(38.6% 0.063 188.416);
  --color-teal-05: oklch(27.7% 0.046 192.524);

  --color-cyan-95: oklch(98.4% 0.019 200.873);
  --color-cyan-90: oklch(95.6% 0.045 203.388);
  --color-cyan-80: oklch(91.7% 0.08 205.041);
  --color-cyan-70: oklch(86.5% 0.127 207.078);
  --color-cyan-60: oklch(78.9% 0.154 211.53);
  --color-cyan-50: oklch(71.5% 0.143 215.221);
  --color-cyan-40: oklch(60.9% 0.126 221.723);
  --color-cyan-30: oklch(52% 0.105 223.128);
  --color-cyan-20: oklch(45% 0.085 224.283);
  --color-cyan-10: oklch(39.8% 0.07 227.392);
  --color-cyan-05: oklch(30.2% 0.056 229.695);

  --color-sky-95: oklch(97.7% 0.013 236.62);
  --color-sky-90: oklch(95.1% 0.026 236.824);
  --color-sky-80: oklch(90.1% 0.058 230.902);
  --color-sky-70: oklch(82.8% 0.111 230.318);
  --color-sky-60: oklch(74.6% 0.16 232.661);
  --color-sky-50: oklch(68.5% 0.169 237.323);
  --color-sky-40: oklch(58.8% 0.158 241.966);
  --color-sky-30: oklch(50% 0.134 242.749);
  --color-sky-20: oklch(44.3% 0.11 240.79);
  --color-sky-10: oklch(39.1% 0.09 240.876);
  --color-sky-05: oklch(29.3% 0.066 243.157);

  --color-blue-95: oklch(97% 0.014 254.604);
  --color-blue-90: oklch(93.2% 0.032 255.585);
  --color-blue-80: oklch(88.2% 0.059 254.128);
  --color-blue-70: oklch(80.9% 0.105 251.813);
  --color-blue-60: oklch(70.7% 0.165 254.624);
  --color-blue-50: oklch(62.3% 0.214 259.815);
  --color-blue-40: oklch(54.6% 0.245 262.881);
  --color-blue-30: oklch(48.8% 0.243 264.376);
  --color-blue-20: oklch(42.4% 0.199 265.638);
  --color-blue-10: oklch(37.9% 0.146 265.522);
  --color-blue-05: oklch(28.2% 0.091 267.935);

  --color-indigo-95: oklch(96.2% 0.018 272.314);
  --color-indigo-90: oklch(93% 0.034 272.788);
  --color-indigo-80: oklch(87% 0.065 274.039);
  --color-indigo-70: oklch(78.5% 0.115 274.713);
  --color-indigo-60: oklch(67.3% 0.182 276.935);
  --color-indigo-50: oklch(58.5% 0.233 277.117);
  --color-indigo-40: oklch(51.1% 0.262 276.966);
  --color-indigo-30: oklch(45.7% 0.24 277.023);
  --color-indigo-20: oklch(39.8% 0.195 277.366);
  --color-indigo-10: oklch(35.9% 0.144 278.697);
  --color-indigo-05: oklch(25.7% 0.09 281.288);

  --color-violet-95: oklch(96.9% 0.016 293.756);
  --color-violet-90: oklch(94.3% 0.029 294.588);
  --color-violet-80: oklch(89.4% 0.057 293.283);
  --color-violet-70: oklch(81.1% 0.111 293.571);
  --color-violet-60: oklch(70.2% 0.183 293.541);
  --color-violet-50: oklch(60.6% 0.25 292.717);
  --color-violet-40: oklch(54.1% 0.281 293.009);
  --color-violet-30: oklch(49.1% 0.27 292.581);
  --color-violet-20: oklch(43.2% 0.232 292.759);
  --color-violet-10: oklch(38% 0.189 293.745);
  --color-violet-05: oklch(28.3% 0.141 291.089);

  --color-purple-95: oklch(97.7% 0.014 308.299);
  --color-purple-90: oklch(94.6% 0.033 307.174);
  --color-purple-80: oklch(90.2% 0.063 306.703);
  --color-purple-70: oklch(82.7% 0.119 306.383);
  --color-purple-60: oklch(71.4% 0.203 305.504);
  --color-purple-50: oklch(62.7% 0.265 303.9);
  --color-purple-40: oklch(55.8% 0.288 302.321);
  --color-purple-30: oklch(49.6% 0.265 301.924);
  --color-purple-20: oklch(43.8% 0.218 303.724);
  --color-purple-10: oklch(38.1% 0.176 304.987);
  --color-purple-05: oklch(29.1% 0.149 302.717);

  --color-fuchsia-95: oklch(97.7% 0.017 320.058);
  --color-fuchsia-90: oklch(95.2% 0.037 318.852);
  --color-fuchsia-80: oklch(90.3% 0.076 319.62);
  --color-fuchsia-70: oklch(83.3% 0.145 321.434);
  --color-fuchsia-60: oklch(74% 0.238 322.16);
  --color-fuchsia-50: oklch(66.7% 0.295 322.15);
  --color-fuchsia-40: oklch(59.1% 0.293 322.896);
  --color-fuchsia-30: oklch(51.8% 0.253 323.949);
  --color-fuchsia-20: oklch(45.2% 0.211 324.591);
  --color-fuchsia-10: oklch(40.1% 0.17 325.612);
  --color-fuchsia-05: oklch(29.3% 0.136 325.661);

  --color-pink-95: oklch(97.1% 0.014 343.198);
  --color-pink-90: oklch(94.8% 0.028 342.258);
  --color-pink-80: oklch(89.9% 0.061 343.231);
  --color-pink-70: oklch(82.3% 0.12 346.018);
  --color-pink-60: oklch(71.8% 0.202 349.761);
  --color-pink-50: oklch(65.6% 0.241 354.308);
  --color-pink-40: oklch(59.2% 0.249 0.584);
  --color-pink-30: oklch(52.5% 0.223 3.958);
  --color-pink-20: oklch(45.9% 0.187 3.815);
  --color-pink-10: oklch(40.8% 0.153 2.432);
  --color-pink-05: oklch(28.4% 0.109 3.907);

  --color-rose-95: oklch(96.9% 0.015 12.422);
  --color-rose-90: oklch(94.1% 0.03 12.58);
  --color-rose-80: oklch(89.2% 0.058 10.001);
  --color-rose-70: oklch(81% 0.117 11.638);
  --color-rose-60: oklch(71.2% 0.194 13.428);
  --color-rose-50: oklch(64.5% 0.246 16.439);
  --color-rose-40: oklch(58.6% 0.253 17.585);
  --color-rose-30: oklch(51.4% 0.222 16.935);
  --color-rose-20: oklch(45.5% 0.188 13.697);
  --color-rose-10: oklch(41% 0.159 10.272);
  --color-rose-05: oklch(27.1% 0.105 12.094);

  --color-slate-95: oklch(98.4% 0.003 247.858);
  --color-slate-90: oklch(96.8% 0.007 247.896);
  --color-slate-80: oklch(92.9% 0.013 255.508);
  --color-slate-70: oklch(86.9% 0.022 252.894);
  --color-slate-60: oklch(70.4% 0.04 256.788);
  --color-slate-50: oklch(55.4% 0.046 257.417);
  --color-slate-40: oklch(44.6% 0.043 257.281);
  --color-slate-30: oklch(37.2% 0.044 257.287);
  --color-slate-20: oklch(27.9% 0.041 260.031);
  --color-slate-10: oklch(20.8% 0.042 265.755);
  --color-slate-05: oklch(12.9% 0.042 264.695);

  --color-gray-95: oklch(98.5% 0.002 247.839);
  --color-gray-90: oklch(96.7% 0.003 264.542);
  --color-gray-80: oklch(92.8% 0.006 264.531);
  --color-gray-70: oklch(87.2% 0.01 258.338);
  --color-gray-60: oklch(70.7% 0.022 261.325);
  --color-gray-50: oklch(55.1% 0.027 264.364);
  --color-gray-40: oklch(44.6% 0.03 256.802);
  --color-gray-30: oklch(37.3% 0.034 259.733);
  --color-gray-20: oklch(27.8% 0.033 256.848);
  --color-gray-10: oklch(21% 0.034 264.665);
  --color-gray-05: oklch(13% 0.028 261.692);

  --color-zinc-95: oklch(98.5% 0 0);
  --color-zinc-90: oklch(96.7% 0.001 286.375);
  --color-zinc-80: oklch(92% 0.004 286.32);
  --color-zinc-70: oklch(87.1% 0.006 286.286);
  --color-zinc-60: oklch(70.5% 0.015 286.067);
  --color-zinc-50: oklch(55.2% 0.016 285.938);
  --color-zinc-40: oklch(44.2% 0.017 285.786);
  --color-zinc-30: oklch(37% 0.013 285.805);
  --color-zinc-20: oklch(27.4% 0.006 286.033);
  --color-zinc-10: oklch(21% 0.006 285.885);
  --color-zinc-05: oklch(14.1% 0.005 285.823);

  --color-neutral-95: oklch(98.5% 0 0);
  --color-neutral-90: oklch(97% 0 0);
  --color-neutral-80: oklch(92.2% 0 0);
  --color-neutral-70: oklch(87% 0 0);
  --color-neutral-60: oklch(70.8% 0 0);
  --color-neutral-50: oklch(55.6% 0 0);
  --color-neutral-40: oklch(43.9% 0 0);
  --color-neutral-30: oklch(37.1% 0 0);
  --color-neutral-20: oklch(26.9% 0 0);
  --color-neutral-10: oklch(20.5% 0 0);
  --color-neutral-05: oklch(14.5% 0 0);

  --color-stone-95: oklch(98.5% 0.001 106.423);
  --color-stone-90: oklch(97% 0.001 106.424);
  --color-stone-80: oklch(92.3% 0.003 48.717);
  --color-stone-70: oklch(86.9% 0.005 56.366);
  --color-stone-60: oklch(70.9% 0.01 56.259);
  --color-stone-50: oklch(55.3% 0.013 58.071);
  --color-stone-40: oklch(44.4% 0.011 73.639);
  --color-stone-30: oklch(37.4% 0.01 67.558);
  --color-stone-20: oklch(26.8% 0.007 34.298);
  --color-stone-10: oklch(21.6% 0.006 56.043);
  --color-stone-05: oklch(14.7% 0.004 49.25);

  --color-black: #000;
  --color-white: #fff;
}

#pie-chart-div {
  max-width: 800px !important;
  max-height: 800px !important;
}

.mw-900 {
  max-width: 900px;
}

#lineChart {
  width: 100%;
  min-height: 400px;
  max-height: 800px;
}

.py-12 {
  padding-left: 12px;
  padding-right: 12px;
}

.ml-48 {
  margin-left: 48px;
}

.mr-48 {
  margin-right: 48px;
}

.ml-24 {
  margin-left: 24px;
}

.mr-24 {
  margin-right: 24px;
}

.fs-75 {
  font-size: 0.75rem !important;
}

.no-underline {
  text-decoration: none;
}

.border-transparent {
  border-bottom: 1px solid rgba(255, 255, 255, 0.5);
}

.w-40 {
  width: 40%;
}

.w-15 {
  width: 15%;
}

.inline {
  display: inline-block;
}

input.amount-input-71 {
  min-width: 71px !important;
}

input.amount-input-86 {
  min-width: 86px !important;
}

.overflowScroll-X {
  overflow-x: auto;
}

.mw-130 {
  max-width: 130px;
}

.mw-170 {
  max-width: 170px;
}

.better-scroll::-webkit-scrollbar {
  width: 15px;
}

.better-scroll::-webkit-scrollbar-track {
  background-color: #171717;
}

.better-scroll::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background-color: #959595;
  border: 6px solid transparent;
  background-clip: content-box;
}

.better-scroll-light::-webkit-scrollbar-track {
  background-color: #f0f0f0;
}

.better-scroll-light::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background-color: #858585;
  border: 6px solid transparent;
  background-clip: content-box;
}

a.disabled {
  pointer-events: none;
  cursor: default;
}

.img-full {
  width: 100%;
  height: 100%;
}

@media (max-width: 992px) {
  .hidden-on-smaller-992 {
    display: none;
  }
}

.display-none {
  display: none;
}

.text-info-50 {
  color: rgba(13, 203, 240, 0.5);
}

.pie-grid {
  grid-area: pie;
  max-width: 100%;
  min-width: 0;
}

.donut-grid {
  grid-area: donut;
  max-width: 100%;
  min-width: 0;
}

.pie-donut-grid {
  max-width: 100%;
  display: grid;
  grid-template-columns: 1fr;
  grid-template:
    "pie"
    "donut";
  gap: 48px;
}

@media (min-width: 1200px) {
  .pie-donut-grid {
    grid-template-columns: 1fr 1fr !important;
    grid-template: "pie donut";
  }
}

#cards {
  overflow-x: scroll;
}

#cards-header {
  display: flex;
  justify-content: space-between;
  min-width: 550px;
}

#cards > sl-divider {
  min-width: 550px;
}

.text-greater-than-zero {
  color: var(--color-green-50);
}

.text-less-than-zero {
  color: var(--color-red-60);
}

.auth-card {
  display: flex;
  justify-content: center;

  wa-card {
    max-width: 100%;
    width: 27rem;
  }
}

.main-card {
  display: flex;
  justify-content: center;

  wa-card {
    max-width: 100%;
    width: 60rem;
  }
}

wa-page > main {
  padding: var(--wa-space-2xl) var(--wa-space-m) var(--wa-space-4xl);
}

nb-budget-card {
  display: flex;
  width: 100%;

  > wa-card {
    width: 100%;
  }
}

wa-card.wa-card-p-0::part(body) {
  padding: 0;
}

nb-search-item {
  flex-grow: 1;
}

wa-button.icon-button {
  line-height: normal;

  &::part(base) {
    padding: var(--wa-space-xs);
    width: auto;
    height: auto;
  }

  &.no-border::part(base) {
    border-width: 0;
  }
}

nb-transaction {
  .transaction-grid {
    grid-template: "name amount buttons";
    grid-template-columns: repeat(3, 1fr) !important;
  }

  &[editing] .transaction-grid {
    @media (width < 48rem) {
      grid-template-areas:
        "name amount"
        "name buttons";
      grid-template-columns: repeat(2, minmax(min(20px, 100%), 1fr)) !important;
    }

    @media (width < 32rem) {
      grid-template-areas:
        "name amount"
        "name amount"
        "buttons buttons";
    }
  }

  .name {
    grid-area: name;
  }

  .amount {
    grid-area: amount;
  }

  .buttons {
    grid-area: buttons;
  }
}

nb-view-budgets {
  .view-budgets-grid {
    grid-template-columns: repeat(3, minmax(min(200px, 100%), 1fr)) !important;

    @media (width < 48rem) {
      grid-template-columns: repeat(
        2,
        minmax(min(200px, 100%), 1fr)
      ) !important;
    }

    @media (width < 32rem) {
      grid-template-columns: repeat(1, 1fr) !important;
    }
  }
}

#alerts {
  position: absolute;
  width: 100%;
  top: var(--wa-space-4xl);
  z-index: 999999999;
  display: flex;
  justify-content: center;
  align-items: center;
}

:root,
:host,
html {
  --wa-form-control-padding-block: 0.65em;
}

nb-category {
  display: inline-block;
}

.tag {
  display: flex;
  gap: var(--wa-space-2xs);
  border: solid 1px;
  white-space: nowrap;
  user-select: none;
  -webkit-user-select: none;

  --nb-category-background-color: var(--color-gray-90);
  --nb-category-border-color: var(--color-gray-60);
  --nb-category-color: var(--color-gray-60);

  background-color: var(--nb-category-background-color);
  border-color: var(--nb-category-border-color);
  color: var(--nb-category-color);

  font-size: var(--wa-font-size-xs);
  line-height: var(--wa-line-height-expanded);
  border-radius: var(--wa-border-radius-s);
  padding: 0 var(--wa-space-xs);

  .tag__remove {
    line-height: normal;

    &::part(base) {
      padding: 0px;
      width: auto;
      height: auto;
      border-width: 0;
    }
  }
}

.red {
  --nb-category-background-color: var(--nb-category-red-background-color);
  --nb-category-border-color: var(--nb-category-red-border-color);
  --nb-category-color: var(--nb-category-red-color);
}

.orange {
  --nb-category-background-color: var(--nb-category-orange-background-color);
  --nb-category-border-color: var(--nb-category-orange-border-color);
  --nb-category-color: var(--nb-category-orange-color);
}

.amber {
  --nb-category-background-color: var(--nb-category-amber-background-color);
  --nb-category-border-color: var(--nb-category-amber-border-color);
  --nb-category-color: var(--nb-category-amber-color);
}

.yellow {
  --nb-category-background-color: var(--nb-category-yellow-background-color);
  --nb-category-border-color: var(--nb-category-yellow-border-color);
  --nb-category-color: var(--nb-category-yellow-color);
}

.lime {
  --nb-category-background-color: var(--nb-category-lime-background-color);
  --nb-category-border-color: var(--nb-category-lime-border-color);
  --nb-category-color: var(--nb-category-lime-color);
}

.green {
  --nb-category-background-color: var(--nb-category-green-background-color);
  --nb-category-border-color: var(--nb-category-green-border-color);
  --nb-category-color: var(--nb-category-green-color);
}

.emerald {
  --nb-category-background-color: var(--nb-category-emerald-background-color);
  --nb-category-border-color: var(--nb-category-emerald-border-color);
  --nb-category-color: var(--nb-category-emerald-color);
}

.teal {
  --nb-category-background-color: var(--nb-category-teal-background-color);
  --nb-category-border-color: var(--nb-category-teal-border-color);
  --nb-category-color: var(--nb-category-teal-color);
}

.cyan {
  --nb-category-background-color: var(--nb-category-cyan-background-color);
  --nb-category-border-color: var(--nb-category-cyan-border-color);
  --nb-category-color: var(--nb-category-cyan-color);
}

.sky {
  --nb-category-background-color: var(--nb-category-sky-background-color);
  --nb-category-border-color: var(--nb-category-sky-border-color);
  --nb-category-color: var(--nb-category-sky-color);
}

.blue {
  --nb-category-background-color: var(--nb-category-blue-background-color);
  --nb-category-border-color: var(--nb-category-blue-border-color);
  --nb-category-color: var(--nb-category-blue-color);
}

.indigo {
  --nb-category-background-color: var(--nb-category-indigo-background-color);
  --nb-category-border-color: var(--nb-category-indigo-border-color);
  --nb-category-color: var(--nb-category-indigo-color);
}

.violet {
  --nb-category-background-color: var(--nb-category-violet-background-color);
  --nb-category-border-color: var(--nb-category-violet-border-color);
  --nb-category-color: var(--nb-category-violet-color);
}

.purple {
  --nb-category-background-color: var(--nb-category-purple-background-color);
  --nb-category-border-color: var(--nb-category-purple-border-color);
  --nb-category-color: var(--nb-category-purple-color);
}

.fuchsia {
  --nb-category-background-color: var(--nb-category-fuchsia-background-color);
  --nb-category-border-color: var(--nb-category-fuchsia-border-color);
  --nb-category-color: var(--nb-category-fuchsia-color);
}

.pink {
  --nb-category-background-color: var(--nb-category-pink-background-color);
  --nb-category-border-color: var(--nb-category-pink-border-color);
  --nb-category-color: var(--nb-category-pink-color);
}

.rose {
  --nb-category-background-color: var(--nb-category-rose-background-color);
  --nb-category-border-color: var(--nb-category-rose-border-color);
  --nb-category-color: var(--nb-category-rose-color);
}

.slate {
  --nb-category-background-color: var(--nb-category-slate-background-color);
  --nb-category-border-color: var(--nb-category-slate-border-color);
  --nb-category-color: var(--nb-category-slate-color);
}

.gray {
  --nb-category-background-color: var(--nb-category-gray-background-color);
  --nb-category-border-color: var(--nb-category-gray-border-color);
  --nb-category-color: var(--nb-category-gray-color);
}

.zinc {
  --nb-category-background-color: var(--nb-category-zinc-background-color);
  --nb-category-border-color: var(--nb-category-zinc-border-color);
  --nb-category-color: var(--nb-category-zinc-color);
}

.neutral {
  --nb-category-background-color: var(--nb-category-neutral-background-color);
  --nb-category-border-color: var(--nb-category-neutral-border-color);
  --nb-category-color: var(--nb-category-neutral-color);
}

.stone {
  --nb-category-background-color: var(--nb-category-stone-background-color);
  --nb-category-border-color: var(--nb-category-stone-border-color);
  --nb-category-color: var(--nb-category-stone-color);
}

.nb-radio {
  font-size: var(--wa-font-size-2xs);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--wa-space-3xs);

  appearance: none;
  background-color: transparent;
  border: none;
  padding: 0;

  input[type="radio"] {
    display: none;
  }
}

input:checked + .circle {
  outline: 2px solid;
  outline-offset: 2px;
}

input:focus-visible + circle {
  outline: 2px solid;
  outline-offset: 2px;
}

.circle {
  width: 32px;
  height: 32px;
  border-radius: var(--wa-border-radius-circle);
  border: 1px solid;
  box-sizing: border-box;

  background-color: var(--nb-category-background-color);
  border-color: var(--nb-category-border-color);
  color: var(--nb-category-color);
}

/*! tailwindcss v4.1.8 | MIT License | https://tailwindcss.com */
@layer properties;
@layer theme, base, components, utilities;
@layer theme {
  :root, :host {
    --color-red-50: oklch(97.1% 0.013 17.38);
    --color-orange-50: oklch(98% 0.016 73.684);
    --color-amber-50: oklch(98.7% 0.022 95.277);
    --color-yellow-50: oklch(98.7% 0.026 102.212);
    --color-lime-50: oklch(98.6% 0.031 120.757);
    --color-green-50: oklch(98.2% 0.018 155.826);
    --color-emerald-50: oklch(97.9% 0.021 166.113);
    --color-teal-50: oklch(98.4% 0.014 180.72);
    --color-cyan-50: oklch(98.4% 0.019 200.873);
    --color-sky-50: oklch(97.7% 0.013 236.62);
    --color-blue-50: oklch(97% 0.014 254.604);
    --color-indigo-50: oklch(96.2% 0.018 272.314);
    --color-violet-50: oklch(96.9% 0.016 293.756);
    --color-purple-50: oklch(97.7% 0.014 308.299);
    --color-fuchsia-50: oklch(97.7% 0.017 320.058);
    --color-pink-50: oklch(97.1% 0.014 343.198);
    --color-rose-50: oklch(96.9% 0.015 12.422);
    --color-slate-50: oklch(98.4% 0.003 247.858);
    --color-gray-50: oklch(98.5% 0.002 247.839);
    --color-zinc-50: oklch(98.5% 0 0);
    --color-neutral-50: oklch(98.5% 0 0);
    --color-stone-50: oklch(98.5% 0.001 106.423);
    --spacing: 0.25rem;
    --text-9xl: 8rem;
    --text-9xl--line-height: 1;
  }
}
@layer utilities {
  .\@container {
    container-type: inline-size;
  }
  .pointer-events-none {
    pointer-events: none;
  }
  .static {
    position: static;
  }
  .col-2 {
    grid-column: 2;
  }
  .col-12 {
    grid-column: 12;
  }
  .container {
    width: 100%;
    @media (width >= 40rem) {
      max-width: 40rem;
    }
    @media (width >= 48rem) {
      max-width: 48rem;
    }
    @media (width >= 64rem) {
      max-width: 64rem;
    }
    @media (width >= 80rem) {
      max-width: 80rem;
    }
    @media (width >= 96rem) {
      max-width: 96rem;
    }
  }
  .mb-2 {
    margin-bottom: calc(var(--spacing) * 2);
  }
  .mb-3 {
    margin-bottom: calc(var(--spacing) * 3);
  }
  .mb-4 {
    margin-bottom: calc(var(--spacing) * 4);
  }
  .block {
    display: block;
  }
  .flex {
    display: flex;
  }
  .grid {
    display: grid;
  }
  .hidden {
    display: none;
  }
  .hidden\! {
    display: none !important;
  }
  .h-full {
    height: 100%;
  }
  .max-h-\[400px\] {
    max-height: 400px;
  }
  .w-50 {
    width: calc(var(--spacing) * 50);
  }
  .w-100 {
    width: calc(var(--spacing) * 100);
  }
  .w-fit {
    width: fit-content;
  }
  .w-full {
    width: 100%;
  }
  .max-w-\[80rem\] {
    max-width: 80rem;
  }
  .min-w-\[0\] {
    min-width: 0;
  }
  .min-w-min {
    min-width: min-content;
  }
  .grow {
    flex-grow: 1;
  }
  .basis-\[0\] {
    flex-basis: 0;
  }
  .basis-\[200\%\] {
    flex-basis: 200%;
  }
  .basis-full {
    flex-basis: 100%;
  }
  .flex-nowrap {
    flex-wrap: nowrap;
  }
  .flex-nowrap\! {
    flex-wrap: nowrap !important;
  }
  .items-center {
    align-items: center;
  }
  .items-center\! {
    align-items: center !important;
  }
  .items-end\! {
    align-items: flex-end !important;
  }
  .items-start {
    align-items: flex-start;
  }
  .items-start\! {
    align-items: flex-start !important;
  }
  .justify-center {
    justify-content: center;
  }
  .justify-end\! {
    justify-content: flex-end !important;
  }
  .gap-\(--wa-space-2xs\)\! {
    gap: var(--wa-space-2xs) !important;
  }
  .gap-\(--wa-space-m\) {
    gap: var(--wa-space-m);
  }
  .gap-\(--wa-space-s\) {
    gap: var(--wa-space-s);
  }
  .gap-\(--wa-space-xs\)\! {
    gap: var(--wa-space-xs) !important;
  }
  .rounded {
    border-radius: 0.25rem;
  }
  .p-\(--spacing\) {
    padding: var(--spacing);
  }
  .p-\(--wa-space-2xs\) {
    padding: var(--wa-space-2xs);
  }
  .py-\(--wa-space-2xs\) {
    padding-block: var(--wa-space-2xs);
  }
  .text-end {
    text-align: end;
  }
  .text-9xl {
    font-size: var(--text-9xl);
    line-height: var(--tw-leading, var(--text-9xl--line-height));
  }
  .text-\(length\:--wa-font-size-l\) {
    font-size: var(--wa-font-size-l);
  }
  .text-\(length\:--wa-font-size-m\) {
    font-size: var(--wa-font-size-m);
  }
  .text-\(length\:--wa-font-size-xl\) {
    font-size: var(--wa-font-size-xl);
  }
  .leading-\(--wa-line-height-normal\)\! {
    --tw-leading: var(--wa-line-height-normal) !important;
    line-height: var(--wa-line-height-normal) !important;
  }
  .text-wrap {
    text-wrap: wrap;
  }
  .text-\[unset\]\! {
    color: unset !important;
  }
  .no-underline\! {
    text-decoration-line: none !important;
  }
  .outline {
    outline-style: var(--tw-outline-style);
    outline-width: 1px;
  }
  .filter {
    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
  }
  .\@5xl\:flex-nowrap\! {
    @container (width >= 64rem) {
      flex-wrap: nowrap !important;
    }
  }
}
@property --tw-leading {
  syntax: "*";
  inherits: false;
}
@property --tw-outline-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}
@property --tw-blur {
  syntax: "*";
  inherits: false;
}
@property --tw-brightness {
  syntax: "*";
  inherits: false;
}
@property --tw-contrast {
  syntax: "*";
  inherits: false;
}
@property --tw-grayscale {
  syntax: "*";
  inherits: false;
}
@property --tw-hue-rotate {
  syntax: "*";
  inherits: false;
}
@property --tw-invert {
  syntax: "*";
  inherits: false;
}
@property --tw-opacity {
  syntax: "*";
  inherits: false;
}
@property --tw-saturate {
  syntax: "*";
  inherits: false;
}
@property --tw-sepia {
  syntax: "*";
  inherits: false;
}
@property --tw-drop-shadow {
  syntax: "*";
  inherits: false;
}
@property --tw-drop-shadow-color {
  syntax: "*";
  inherits: false;
}
@property --tw-drop-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-drop-shadow-size {
  syntax: "*";
  inherits: false;
}
@layer properties {
  @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
    *, ::before, ::after, ::backdrop {
      --tw-leading: initial;
      --tw-outline-style: solid;
      --tw-blur: initial;
      --tw-brightness: initial;
      --tw-contrast: initial;
      --tw-grayscale: initial;
      --tw-hue-rotate: initial;
      --tw-invert: initial;
      --tw-opacity: initial;
      --tw-saturate: initial;
      --tw-sepia: initial;
      --tw-drop-shadow: initial;
      --tw-drop-shadow-color: initial;
      --tw-drop-shadow-alpha: 100%;
      --tw-drop-shadow-size: initial;
    }
  }
}

.sl-theme-light {
  .niks-favorite-background {
    background: linear-gradient(
      to right,
      rgba(170, 17, 222, 0.5),
      hsl(198.7 97.9% 57.2% / 50%)
    );
  }

  .red-background {
    background: hsl(0, 80%, 75%);
  }

  .gray-background {
    background: hsl(0, 0%, 75%);
  }

  .orange-background {
    background: hsl(20, 80%, 75%);
  }

  .amber-background {
    background: hsl(40 100% 75%);
  }

  .yellow-background {
    background: hsl(50 100% 75%);
  }

  .lime-background {
    background: hsl(75, 80%, 75%);
  }

  .green-background {
    background: hsl(175, 80%, 75%);
  }

  .emerald-background {
    background: hsl(155 100% 75%);
  }

  .teal-background {
    background: hsl(170 100% 75%);
  }

  .cyan-background {
    background: hsl(185 100% 75%);
  }

  .sky-background {
    background: hsl(200 100% 75%);
  }

  .blue-background {
    background: hsl(240 100% 75%);
  }

  .indigo-background {
    background: hsl(255 100% 75%);
  }

  .violet-background {
    background: hsl(270 100% 75%);
  }

  .purple-background {
    background: hsl(280 100% 75%);
  }

  .fuchsia-background {
    background: hsl(290 100% 75%);
  }

  .pink-background {
    background: hsl(300 100% 75%);
  }

  .rose-background {
    background: hsl(333 100% 75%);
  }
}

.wa-dark {
  .niks-favorite-background {
    background: linear-gradient(
      to right,
      rgba(170, 17, 222, 1),
      hsl(198.7 97.9% 57.2%)
    );
  }

  .red-background {
    background: hsl(0, 80%, 25%);
  }

  .gray-background {
    background: hsl(0, 0%, 25%);
  }

  .orange-background {
    background: hsl(20, 80%, 25%);
  }

  .amber-background {
    background: hsl(40 100% 25%);
  }

  .yellow-background {
    background: hsl(50 100% 25%);
  }

  .lime-background {
    background: hsl(75, 80%, 25%);
  }

  .green-background {
    background: hsl(125, 80%, 25%);
  }

  .emerald-background {
    background: hsl(155 100% 15%);
  }

  .teal-background {
    background: hsl(170 100% 25%);
  }

  .cyan-background {
    background: hsl(185 100% 25%);
  }

  .sky-background {
    background: hsl(200 100% 25%);
  }

  .blue-background {
    background: hsl(240 100% 25%);
  }

  .indigo-background {
    background: hsl(255 100% 25%);
  }

  .violet-background {
    background: hsl(270 100% 25%);
  }

  .purple-background {
    background: hsl(280 100% 25%);
  }

  .fuchsia-background {
    background: hsl(290 100% 25%);
  }

  .pink-background {
    background: hsl(300 100% 25%);
  }

  .rose-background {
    background: hsl(333 100% 25%);
  }
}

/* Primary color themes */

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/*! tailwindcss v4.1.8 | MIT License | https://tailwindcss.com */
@layer properties;
@layer theme, base, components, utilities;
@layer theme {
  :root, :host {
    --color-red-50: oklch(97.1% 0.013 17.38);
    --color-orange-50: oklch(98% 0.016 73.684);
    --color-amber-50: oklch(98.7% 0.022 95.277);
    --color-yellow-50: oklch(98.7% 0.026 102.212);
    --color-lime-50: oklch(98.6% 0.031 120.757);
    --color-green-50: oklch(98.2% 0.018 155.826);
    --color-emerald-50: oklch(97.9% 0.021 166.113);
    --color-teal-50: oklch(98.4% 0.014 180.72);
    --color-cyan-50: oklch(98.4% 0.019 200.873);
    --color-sky-50: oklch(97.7% 0.013 236.62);
    --color-blue-50: oklch(97% 0.014 254.604);
    --color-indigo-50: oklch(96.2% 0.018 272.314);
    --color-violet-50: oklch(96.9% 0.016 293.756);
    --color-purple-50: oklch(97.7% 0.014 308.299);
    --color-fuchsia-50: oklch(97.7% 0.017 320.058);
    --color-pink-50: oklch(97.1% 0.014 343.198);
    --color-rose-50: oklch(96.9% 0.015 12.422);
    --color-slate-50: oklch(98.4% 0.003 247.858);
    --color-gray-50: oklch(98.5% 0.002 247.839);
    --color-zinc-50: oklch(98.5% 0 0);
    --color-neutral-50: oklch(98.5% 0 0);
    --color-stone-50: oklch(98.5% 0.001 106.423);
    --spacing: 0.25rem;
    --text-9xl: 8rem;
    --text-9xl--line-height: 1;
    --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
    --default-transition-duration: 150ms;
    --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  }
}
@layer utilities {
  .\@container {
    container-type: inline-size;
  }
  .pointer-events-none {
    pointer-events: none;
  }
  .invisible {
    visibility: hidden;
  }
  .visible {
    visibility: visible;
  }
  .absolute {
    position: absolute;
  }
  .fixed {
    position: fixed;
  }
  .static {
    position: static;
  }
  .col-2 {
    grid-column: 2;
  }
  .col-12 {
    grid-column: 12;
  }
  .container {
    width: 100%;
    @media (width >= 40rem) {
      max-width: 40rem;
    }
    @media (width >= 48rem) {
      max-width: 48rem;
    }
    @media (width >= 64rem) {
      max-width: 64rem;
    }
    @media (width >= 80rem) {
      max-width: 80rem;
    }
    @media (width >= 96rem) {
      max-width: 96rem;
    }
  }
  .mb-2 {
    margin-bottom: calc(var(--spacing) * 2);
  }
  .mb-3 {
    margin-bottom: calc(var(--spacing) * 3);
  }
  .mb-4 {
    margin-bottom: calc(var(--spacing) * 4);
  }
  .block {
    display: block;
  }
  .contents {
    display: contents;
  }
  .flex {
    display: flex;
  }
  .grid {
    display: grid;
  }
  .hidden {
    display: none;
  }
  .hidden\! {
    display: none !important;
  }
  .inline {
    display: inline;
  }
  .table {
    display: table;
  }
  .h-full {
    height: 100%;
  }
  .max-h-\[400px\] {
    max-height: 400px;
  }
  .w-50 {
    width: calc(var(--spacing) * 50);
  }
  .w-100 {
    width: calc(var(--spacing) * 100);
  }
  .w-fit {
    width: fit-content;
  }
  .w-full {
    width: 100%;
  }
  .max-w-\[80rem\] {
    max-width: 80rem;
  }
  .min-w-\[0\] {
    min-width: 0;
  }
  .min-w-min {
    min-width: min-content;
  }
  .flex-shrink {
    flex-shrink: 1;
  }
  .grow {
    flex-grow: 1;
  }
  .basis-\[0\] {
    flex-basis: 0;
  }
  .basis-\[200\%\] {
    flex-basis: 200%;
  }
  .basis-full {
    flex-basis: 100%;
  }
  .transform {
    transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
  }
  .resize {
    resize: both;
  }
  .flex-nowrap {
    flex-wrap: nowrap;
  }
  .flex-nowrap\! {
    flex-wrap: nowrap !important;
  }
  .flex-wrap {
    flex-wrap: wrap;
  }
  .items-center {
    align-items: center;
  }
  .items-center\! {
    align-items: center !important;
  }
  .items-end\! {
    align-items: flex-end !important;
  }
  .items-start {
    align-items: flex-start;
  }
  .items-start\! {
    align-items: flex-start !important;
  }
  .justify-center {
    justify-content: center;
  }
  .justify-end\! {
    justify-content: flex-end !important;
  }
  .gap-\(--wa-space-2xs\)\! {
    gap: var(--wa-space-2xs) !important;
  }
  .gap-\(--wa-space-m\) {
    gap: var(--wa-space-m);
  }
  .gap-\(--wa-space-s\) {
    gap: var(--wa-space-s);
  }
  .gap-\(--wa-space-xs\)\! {
    gap: var(--wa-space-xs) !important;
  }
  .rounded {
    border-radius: 0.25rem;
  }
  .border {
    border-style: var(--tw-border-style);
    border-width: 1px;
  }
  .p-\(--spacing\) {
    padding: var(--spacing);
  }
  .p-\(--wa-space-2xs\) {
    padding: var(--wa-space-2xs);
  }
  .py-\(--wa-space-2xs\) {
    padding-block: var(--wa-space-2xs);
  }
  .text-end {
    text-align: end;
  }
  .text-9xl {
    font-size: var(--text-9xl);
    line-height: var(--tw-leading, var(--text-9xl--line-height));
  }
  .text-\(length\:--wa-font-size-l\) {
    font-size: var(--wa-font-size-l);
  }
  .text-\(length\:--wa-font-size-m\) {
    font-size: var(--wa-font-size-m);
  }
  .text-\(length\:--wa-font-size-xl\) {
    font-size: var(--wa-font-size-xl);
  }
  .leading-\(--wa-line-height-normal\)\! {
    --tw-leading: var(--wa-line-height-normal) !important;
    line-height: var(--wa-line-height-normal) !important;
  }
  .text-wrap {
    text-wrap: wrap;
  }
  .text-\[unset\]\! {
    color: unset !important;
  }
  .no-underline\! {
    text-decoration-line: none !important;
  }
  .ring {
    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .outline {
    outline-style: var(--tw-outline-style);
    outline-width: 1px;
  }
  .blur {
    --tw-blur: blur(8px);
    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
  }
  .filter {
    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
  }
  .transition {
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  .ease-in-out {
    --tw-ease: var(--ease-in-out);
    transition-timing-function: var(--ease-in-out);
  }
  .\@5xl\:flex-nowrap\! {
    @container (width >= 64rem) {
      flex-wrap: nowrap !important;
    }
  }
}
@property --tw-rotate-x {
  syntax: "*";
  inherits: false;
}
@property --tw-rotate-y {
  syntax: "*";
  inherits: false;
}
@property --tw-rotate-z {
  syntax: "*";
  inherits: false;
}
@property --tw-skew-x {
  syntax: "*";
  inherits: false;
}
@property --tw-skew-y {
  syntax: "*";
  inherits: false;
}
@property --tw-border-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}
@property --tw-leading {
  syntax: "*";
  inherits: false;
}
@property --tw-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-shadow-color {
  syntax: "*";
  inherits: false;
}
@property --tw-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-inset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-inset-shadow-color {
  syntax: "*";
  inherits: false;
}
@property --tw-inset-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-ring-color {
  syntax: "*";
  inherits: false;
}
@property --tw-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-inset-ring-color {
  syntax: "*";
  inherits: false;
}
@property --tw-inset-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-ring-inset {
  syntax: "*";
  inherits: false;
}
@property --tw-ring-offset-width {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}
@property --tw-ring-offset-color {
  syntax: "*";
  inherits: false;
  initial-value: #fff;
}
@property --tw-ring-offset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-outline-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}
@property --tw-blur {
  syntax: "*";
  inherits: false;
}
@property --tw-brightness {
  syntax: "*";
  inherits: false;
}
@property --tw-contrast {
  syntax: "*";
  inherits: false;
}
@property --tw-grayscale {
  syntax: "*";
  inherits: false;
}
@property --tw-hue-rotate {
  syntax: "*";
  inherits: false;
}
@property --tw-invert {
  syntax: "*";
  inherits: false;
}
@property --tw-opacity {
  syntax: "*";
  inherits: false;
}
@property --tw-saturate {
  syntax: "*";
  inherits: false;
}
@property --tw-sepia {
  syntax: "*";
  inherits: false;
}
@property --tw-drop-shadow {
  syntax: "*";
  inherits: false;
}
@property --tw-drop-shadow-color {
  syntax: "*";
  inherits: false;
}
@property --tw-drop-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-drop-shadow-size {
  syntax: "*";
  inherits: false;
}
@property --tw-ease {
  syntax: "*";
  inherits: false;
}
@layer properties {
  @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
    *, ::before, ::after, ::backdrop {
      --tw-rotate-x: initial;
      --tw-rotate-y: initial;
      --tw-rotate-z: initial;
      --tw-skew-x: initial;
      --tw-skew-y: initial;
      --tw-border-style: solid;
      --tw-leading: initial;
      --tw-shadow: 0 0 #0000;
      --tw-shadow-color: initial;
      --tw-shadow-alpha: 100%;
      --tw-inset-shadow: 0 0 #0000;
      --tw-inset-shadow-color: initial;
      --tw-inset-shadow-alpha: 100%;
      --tw-ring-color: initial;
      --tw-ring-shadow: 0 0 #0000;
      --tw-inset-ring-color: initial;
      --tw-inset-ring-shadow: 0 0 #0000;
      --tw-ring-inset: initial;
      --tw-ring-offset-width: 0px;
      --tw-ring-offset-color: #fff;
      --tw-ring-offset-shadow: 0 0 #0000;
      --tw-outline-style: solid;
      --tw-blur: initial;
      --tw-brightness: initial;
      --tw-contrast: initial;
      --tw-grayscale: initial;
      --tw-hue-rotate: initial;
      --tw-invert: initial;
      --tw-opacity: initial;
      --tw-saturate: initial;
      --tw-sepia: initial;
      --tw-drop-shadow: initial;
      --tw-drop-shadow-color: initial;
      --tw-drop-shadow-alpha: 100%;
      --tw-drop-shadow-size: initial;
      --tw-ease: initial;
    }
  }
}

@layer wa-native {
  /* #region General ~~~~~~~~~~~~~~~~~~~~~~~~~ */
  html {
    box-sizing: border-box;
    margin: 0;
    padding: 0;

    tab-size: 4;

    background-color: var(--wa-color-surface-default);
  }

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

  body {
    min-height: 100vh;
    margin: 0;
    padding: 0;

    color: var(--wa-color-text-normal);
    font-family: var(--wa-font-family-body);
    font-size: var(--wa-font-size-m);
    font-weight: var(--wa-font-weight-body);
    line-height: var(--wa-line-height-normal);
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    text-size-adjust: none;
    -moz-text-size-adjust: none;
    -webkit-text-size-adjust: none;
  }
  /* #endregion */

  /* #region Content Flow ~~~~~~~~~~~~~~~~~~~~ */
  address,
  audio,
  blockquote,
  dd,
  details,
  dl,
  fieldset,
  figure,
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  hr,
  iframe,
  ol,
  p,
  pre,
  table,
  ul,
  video {
    margin: 0;

    &:has(+ *) {
      margin-block-end: var(--wa-content-spacing);
    }
  }
  /* #endregion */

  /* #region Block Text ~~~~~~~~~~~~~~~~~~~~~~ */
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    font-family: var(--wa-font-family-heading);
    font-weight: var(--wa-font-weight-heading);
    line-height: var(--wa-line-height-condensed);
    text-wrap: balance;
  }

  h1 {
    font-size: var(--wa-font-size-3xl);
  }

  h2 {
    font-size: var(--wa-font-size-2xl);
  }

  h3 {
    font-size: var(--wa-font-size-xl);
  }

  h4 {
    font-size: var(--wa-font-size-l);
  }

  h5 {
    font-size: var(--wa-font-size-m);
  }

  h6 {
    font-size: var(--wa-font-size-s);
  }

  p {
    text-wrap: pretty;
  }

  blockquote {
    padding: var(--wa-space-xl);

    font-family: var(--wa-font-family-longform);
    font-size: var(--wa-font-size-l);

    border-inline-start: var(--wa-border-style) var(--wa-border-width-l) var(--wa-color-neutral-border-quiet);
  }

  hr {
    margin: var(--wa-content-spacing) 0;

    border: none;
    border-bottom: solid var(--wa-border-width-s) var(--wa-color-surface-border);
  }
  /* #endregion */

  /* #region Lists ~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
  ul,
  ol {
    padding: 0;
  }

  li > ul,
  li > ol {
    margin-inline-start: 0.25em;
  }

  ul {
    list-style: disc;
  }

  li {
    margin-inline-start: 1.125em;
    padding: 0;
  }

  dt {
    font-weight: var(--wa-font-weight-bold);
  }
  /* #endregion */

  /* #region Inline Text ~~~~~~~~~~~~~~~~~~~~~ */
  strong,
  b {
    font-weight: var(--wa-font-weight-bold);
  }

  em,
  i {
    font-style: italic;
  }

  u {
    text-decoration-line: underline;
    text-decoration-thickness: 0.09375em;
    text-underline-offset: 0.125em;
  }

  s {
    text-decoration-line: line-through;
    text-decoration-thickness: 0.09375em;
  }

  ins {
    text-decoration-color: var(--wa-color-success-on-quiet);
    text-decoration-line: underline;
    text-decoration-thickness: 0.09375em;
    text-underline-offset: 0.125em;
  }

  del {
    color: color-mix(in oklab, currentColor, transparent 10%);
    text-decoration-color: var(--wa-color-danger-on-quiet);
    text-decoration-line: line-through;
    text-decoration-thickness: 0.09375em;
  }

  mark {
    padding: 0.125em 0.25em;

    color: var(--wa-color-warning-on-quiet);

    background-color: var(--wa-color-warning-fill-quiet);
    border-radius: var(--wa-border-radius-s);
  }

  small {
    font-size: var(--wa-font-size-smaller);
  }

  sub,
  sup {
    font-size: var(--wa-font-size-smaller);
    line-height: 0;
  }

  sub {
    vertical-align: sub;
  }

  sup {
    vertical-align: super;
  }

  abbr[title] {
    text-decoration-line: underline;
    text-decoration-style: dotted;
    text-decoration-thickness: 0.09375em;
    text-underline-offset: 0.125em;

    cursor: help;
  }

  kbd {
    padding: 0.125em 0.25em;

    font-family: var(--wa-font-family-code);
    font-size: var(--wa-font-size-smaller);

    border: solid var(--wa-border-width-s) color-mix(in oklab, currentColor, transparent 50%);
    border-radius: var(--wa-border-radius-s);
    box-shadow: 0 0.125em 0 0 color-mix(in oklab, currentColor, transparent 50%);

    wa-icon {
      vertical-align: -2px;
    }
  }
  /* #endregion */

  /* #region Links ~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
  a {
    color: var(--wa-color-text-link);
    text-decoration: var(--wa-link-decoration-default);
    -webkit-text-decoration: var(--wa-link-decoration-default);
    text-decoration-thickness: 0.09375em;
    text-underline-offset: 0.125em;
  }

  *:is([appearance~='accent'], .wa-accent) {
    a,
    a:hover {
      color: currentColor;
    }
  }

  a:hover {
    color: color-mix(in oklab, var(--wa-color-text-link), var(--wa-color-mix-hover));
    text-decoration: var(--wa-link-decoration-hover);
    -webkit-text-decoration: var(--wa-link-decoration-hover);
  }

  a:focus,
  button:focus {
    outline: none;
  }

  a:focus-visible,
  button:focus-visible {
    outline: var(--wa-focus-ring);
    outline-offset: var(--wa-focus-ring-offset);
  }
  /* #endregion */

  /* #region Code ~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
  code,
  samp,
  var {
    padding: 0.125em 0.25em;

    font-family: var(--wa-font-family-code);
    font-size: var(--wa-font-size-smaller);

    background-color: var(--wa-color-overlay-inline);
    border-radius: var(--wa-border-radius-s);
  }

  pre {
    padding: var(--wa-space-m);

    font-family: var(--wa-font-family-code);
    font-size: var(--wa-font-size-smaller);
    white-space: pre;

    background-color: var(--wa-color-overlay-inline);
    border-radius: var(--wa-border-radius-m);

    /* Remove overlapping styles for child code elements */
    & code,
    & samp,
    & var {
      padding: 0;

      font-size: 1em;

      background-color: transparent;
    }

    /* Print styles */
    @media print {
      background: none;
      border: solid var(--wa-border-width-s) var(--wa-color-surface-border);
    }
  }
  /* #endregion */

  /* #region Media ~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
  img,
  svg,
  picture,
  video {
    max-width: 100%;
    height: auto;

    border-radius: var(--wa-border-radius-m);
  }

  embed,
  iframe,
  object {
    max-width: 100%;
  }

  iframe {
    border: none;
  }
  /* #endregion */

  /* #region Tables ~~~~~~~~~~~~~~~~~~~~~~~~~~ */
  table {
    width: 100%;

    border: none;
    border-collapse: collapse;
  }

  caption {
    color: var(--wa-color-text-quiet);
    font-size: var(--wa-font-size-smaller);

    &:has(+ *) {
      margin-block-end: 0.75em;
    }
  }

  tbody {
    tr {
      border-top: solid var(--wa-border-width-s) var(--wa-color-border-quiet);

      :where(table.wa-zebra-rows) &:nth-child(odd) {
        background-color: color-mix(in oklab, var(--wa-color-fill-quiet) 60%, transparent);
      }

      :where(table.wa-hover-rows) & {
        @media (hover: hover) {
          &:hover {
            background-color: var(--wa-color-fill-quiet);

            &,
            + tr {
              border-top-color: var(--wa-color-border-normal);
            }
          }
        }
      }
    }
  }

  td,
  th {
    padding: 0.75em;

    text-align: start;
    vertical-align: top;
  }

  th {
    padding-block: 0.75em;

    font-size: var(--wa-font-size-smaller);
    font-weight: var(--wa-font-weight-bold);
  }
  /* #endregion */

  /* #region Details ~~~~~~~~~~~~~~~~~~~~~~~~~ */
  details {
    padding: 0;

    background-color: var(--wa-color-surface-default);
    border: var(--wa-panel-border-width) var(--wa-color-surface-border) var(--wa-panel-border-style);
    border-radius: var(--wa-panel-border-radius);

    overflow-anchor: none;

    summary {
      display: flex;
      align-items: center;
      justify-content: space-between;

      padding: var(--wa-space-m);

      cursor: pointer;
      user-select: none;
      -webkit-user-select: none;

      > * {
        margin: 0;
      }

      &:focus {
        outline: none;
      }

      &:focus-visible {
        outline: var(--wa-focus-ring);
        outline-offset: var(--wa-focus-ring-offset);
      }
    }

    &[open] {
      padding: 0 var(--wa-space-m) var(--wa-space-m) var(--wa-space-m);

      summary {
        margin-inline: calc(-1 * var(--wa-space-m));
      }
    }

    /* Print styles */
    @media print {
      background: none;
      border: solid var(--wa-border-width-s) var(--wa-color-surface-border);

      summary {
        list-style: none;
      }
    }
  }

  /* Replace the summary marker */
  details summary {
    &::marker,
    &::-webkit-details-marker {
      display: none;
    }

    &::after {
      content: '';
      background-color: var(--wa-color-text-quiet);
      mask: url("data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"16\" width=\"10\" viewBox=\"0 0 320 512\"><path d=\"M310.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L242.7 256 73.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z\"/></svg>")
        center no-repeat;
      width: 1rem;
      height: 1rem;
      rotate: 0deg;
    }

    &:dir(rtl)::after {
      rotate: 180deg;
    }
  }

  details[open] summary::after {
    rotate: 90deg;
  }
  /* #endregion */

  /* #region Dialogs ~~~~~~~~~~~~~~~~~~~~~~~~~ */
  dialog {
    flex-direction: column;
    align-items: start;

    width: 32rem;
    max-width: calc(100% - var(--wa-space-l));
    padding: var(--wa-space-l);

    background-color: var(--wa-color-surface-raised);
    border-radius: var(--wa-panel-border-radius);
    border: none;
    box-shadow: var(--wa-shadow-l);

    transition: var(--wa-transition-slow, 200ms) var(--wa-transition-easing);

    /* Center the dialog */
    margin: auto;
    inset: 0;

    &[open] {
      display: flex;
    }

    &:focus {
      outline: none;
    }
  }

  dialog::backdrop {
    background-color: var(--wa-color-overlay-modal, rgb(0 0 0 / 0.25));
  }
  /* #endregion */

  /* #region Form Labels ~~~~~~~~~~~~~~~~~~~~~ */
  label {
    display: inline-block;
    position: relative;

    color: var(--wa-form-control-label-color);
    font-weight: var(--wa-form-control-label-font-weight);
    line-height: var(--wa-form-control-label-line-height);

    &:has(
        input:not(
            [type='button'],
            [type='checkbox'],
            [type='color'],
            [type='file'],
            [type='hidden'],
            [type='image'],
            [type='radio'],
            [type='reset'],
            [type='submit']
          ),
        textarea,
        select
      ) {
      width: 100%;
    }

    & + :is(input:not([type='checkbox'], [type='radio']), textarea, select),
    & > :is(input:not([type='checkbox'], [type='radio']), textarea, select) {
      margin-block-start: 0.5em;
    }
  }
  /* #endregion */

  /* #region Fieldsets ~~~~~~~~~~~~~~~~~~~~~~~ */
  fieldset {
    padding: var(--wa-space-l);
    padding-block-start: calc(var(--wa-space-l) - 0.5em);

    border: solid 1px var(--wa-color-surface-border);
    border-radius: var(--wa-border-radius-m);
  }

  legend {
    padding: 0;
    padding-inline: var(--wa-space-xs);

    font-weight: var(--wa-form-control-label-font-weight);
  }
  /* #endregion */

  /* #region Buttons ~~~~~~~~~~~~~~~~~~~~~~~~~ */
  button,
  input[type='button'],
  input[type='reset'],
  input[type='submit'] {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    height: var(--wa-form-control-height);
    padding: 0 var(--wa-form-control-padding-inline);

    color: var(--wa-color-on-loud, var(--wa-color-neutral-on-loud));
    font-family: inherit;
    font-size: var(--wa-form-control-value-font-size);
    font-weight: var(--wa-font-weight-action);
    line-height: calc(var(--wa-form-control-height) - var(--border-width) * 2);
    text-decoration: none;
    vertical-align: middle;
    white-space: nowrap;

    background-color: var(--wa-color-fill-loud, var(--wa-color-neutral-fill-loud));
    border-color: transparent;
    border-style: var(--wa-border-style);
    border-width: max(1px, var(--wa-form-control-border-width));
    border-radius: var(--wa-form-control-border-radius);

    transition-property: background, border, box-shadow, color;
    transition-duration: var(--wa-transition-fast);
    transition-timing-function: var(--wa-transition-easing);

    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;

    &.wa-plain {
      color: var(--wa-color-on-quiet, var(--wa-color-neutral-on-quiet));
      background-color: transparent;
      border-color: transparent;

      &:not(:disabled):hover {
        color: var(--wa-color-on-quiet, var(--wa-color-neutral-on-quiet));
        background-color: var(--wa-color-fill-quiet, var(--wa-color-neutral-fill-quiet));
      }

      &:not(:disabled):active {
        color: var(--wa-color-on-quiet, var(--wa-color-neutral-on-quiet));
        background-color: color-mix(
          in oklab,
          var(--wa-color-fill-quiet, var(--wa-color-neutral-fill-quiet)),
          var(--wa-color-mix-active)
        );
      }
    }

    &.wa-outlined {
      color: var(--wa-color-on-quiet, var(--wa-color-neutral-on-quiet));
      background-color: transparent;
      border-color: var(--wa-color-border-loud, var(--wa-color-neutral-border-loud));

      &:not(:disabled):hover {
        color: var(--wa-color-on-quiet, var(--wa-color-neutral-on-quiet));
        background-color: var(--wa-color-fill-quiet, var(--wa-color-neutral-fill-quiet));
      }

      &:not(:disabled):active {
        color: var(--wa-color-on-quiet, var(--wa-color-neutral-on-quiet));
        background-color: color-mix(
          in oklab,
          var(--wa-color-fill-quiet, var(--wa-color-neutral-fill-quiet)),
          var(--wa-color-mix-active)
        );
      }
    }

    &.wa-filled {
      color: var(--wa-color-on-normal, var(--wa-color-neutral-on-normal));
      background-color: var(--wa-color-fill-normal, var(--wa-color-neutral-fill-normal));
      border-color: transparent;

      &:not(:disabled):hover {
        color: var(--wa-color-on-normal, var(--wa-color-neutral-on-normal));
        background-color: color-mix(
          in oklab,
          var(--wa-color-fill-normal, var(--wa-color-neutral-fill-normal)),
          var(--wa-color-mix-hover)
        );
      }

      &:not(:disabled):active {
        color: var(--wa-color-on-normal, var(--wa-color-neutral-on-normal));
        background-color: color-mix(
          in oklab,
          var(--wa-color-fill-normal, var(--wa-color-neutral-fill-normal)),
          var(--wa-color-mix-active)
        );
      }

      &.wa-outlined {
        border-color: var(--wa-color-border-normal, var(--wa-color-neutral-border-normal));
      }
    }

    &.wa-accent {
      color: var(--wa-color-on-loud, var(--wa-color-neutral-on-loud));
      background-color: var(--wa-color-fill-loud, var(--wa-color-neutral-fill-loud));
      border-color: transparent;

      &:not(:disabled):hover {
        background-color: color-mix(
          in oklab,
          var(--wa-color-fill-loud, var(--wa-color-neutral-fill-loud)),
          var(--wa-color-mix-hover)
        );
      }

      &:not(:disabled):active {
        background-color: color-mix(
          in oklab,
          var(--wa-color-fill-loud, var(--wa-color-neutral-fill-loud)),
          var(--wa-color-mix-active)
        );
      }
    }

    &:focus {
      outline: none;
    }

    &:focus-visible {
      outline: var(--wa-focus-ring);
      outline-offset: var(--wa-focus-ring-offset);
    }

    /* Wrap in :is() so that Safari doesn't stop parsing this block */
    &:is(::-moz-focus-inner) {
      border: 0;
    }

    &:disabled {
      opacity: 0.5;
      cursor: not-allowed;

      /* When disabled, prevent mouse events from bubbling up from children */
      * {
        pointer-events: none;
      }
    }

    &.wa-pill {
      border-radius: var(--wa-border-radius-pill);
    }

    /* Adds space between icons and adjacent elements
     * Prefer sibling selectors over :first-child/:last-child to avoid extra space when an icon is used alone */
    & > wa-icon:has(+ *) {
      margin-inline-end: 0.75em;
    }

    & > * + wa-icon {
      margin-inline-start: 0.75em;
    }
  }
  /* #endregion */

  /* #region Checkboxes + Radios ~~~~~~~~~~~~~ */
  input[type='checkbox'],
  label:has(input[type='checkbox']),
  input[type='radio'],
  label:has(input[type='radio']) {
    display: inline-flex;

    width: fit-content;

    color: var(--wa-form-control-value-color);
    font-family: inherit;
    font-size: var(--wa-form-control-value-font-size);
    font-weight: var(--wa-form-control-value-font-weight);
    line-height: var(--wa-form-control-value-line-height);

    user-select: none;
    -webkit-user-select: none;

    &,
    + label {
      cursor: pointer;
    }

    &:disabled,
    &:has(:disabled) {
      opacity: 0.5;

      cursor: not-allowed;
    }
  }

  input[type='checkbox'],
  input[type='radio'] {
    appearance: none;

    position: relative;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;

    width: var(--wa-form-control-toggle-size);
    height: var(--wa-form-control-toggle-size);
    margin: 0;
    margin-inline-end: 0.5em;

    background-color: var(--wa-form-control-background-color);
    border-color: var(--wa-form-control-border-color);
    border-style: var(--wa-border-style);
    border-width: var(--wa-form-control-border-width);

    transition:
      background var(--wa-transition-normal),
      border-color var(--wa-transition-fast),
      box-shadow var(--wa-transition-fast),
      color var(--wa-transition-fast);
    transition-timing-function: var(--wa-transition-easing);

    &:focus-visible {
      outline: var(--wa-focus-ring);
      outline-offset: var(--wa-focus-ring-offset);
    }
  }

  /* Checkbox */
  input[type='checkbox'] {
    --checked-icon-color: var(--wa-color-brand-on-loud);
    --checked-icon-scale: 0.8;

    border-radius: min(
      calc(var(--wa-form-control-toggle-size) * 0.375),
      var(--wa-border-radius-s)
    ); /* min prevents entirely circular checkbox */

    &:checked,
    &:indeterminate {
      color: var(--checked-icon-color);

      background-color: var(--wa-form-control-activated-color);
      border-color: var(--wa-form-control-activated-color);
    }

    &:checked::after,
    &:indeterminate::after {
      position: absolute;

      width: 100%;
      height: 100%;

      content: '';

      background-color: currentColor;

      scale: var(--checked-icon-scale);
    }

    &:checked::after {
      mask: url("data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 448 512\"><path d=\"M438.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L160 338.7 393.4 105.4c12.5-12.5 32.8-12.5 45.3 0z\"/></svg>")
        center no-repeat;
    }

    &:indeterminate::after {
      mask: url("data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"16\" width=\"14\" viewBox=\"0 0 448 512\"><path d=\"M431 256c0 17.7-14.3 32-32 32H49c-17.7 0-32-14.3-32-32s14.3-32 32-32h350c17.7 0 32 14.3 32 32z\"/></svg>")
        center no-repeat;
    }
  }

  /* Radio */
  input[type='radio'] {
    --checked-icon-color: var(--wa-form-control-activated-color);
    --checked-icon-scale: 0.75;

    color: transparent;

    border-radius: 50%;

    &:checked {
      color: var(--checked-icon-color);

      border-color: var(--wa-form-control-activated-color);
    }

    &:checked::after {
      content: '';

      aspect-ratio: 1;
      width: round(calc(100% * var(--checked-icon-scale)), 1px);

      background-color: currentColor;
      border-radius: 50%;
    }
  }
  /* #endregion */

  /* #region Text Fields + Textareas + Selects */
  input:not(
    /* Exclude inputs that don't accept text */
    [type='button'],
    [type='checkbox'],
    [type='color'],
    [type='file'],
    [type='hidden'],
    [type='image'],
    [type='radio'],
    [type='range'],
    [type='reset'],
    [type='submit']
  ), textarea, select {
    width: 100%;
    height: var(--wa-form-control-height);
    padding: 0 var(--wa-form-control-padding-inline);

    color: var(--wa-form-control-value-color);
    font-size: var(--wa-form-control-value-size);
    font-family: inherit;
    font-weight: var(--wa-form-control-value-font-weight);
    line-height: var(--wa-form-control-value-line-height);
    vertical-align: middle;

    background-color: var(--wa-form-control-background-color);
    border-color: var(--wa-form-control-border-color);
    border-style: var(--wa-form-control-border-style);
    border-width: var(--wa-form-control-border-width);
    border-radius: var(--wa-form-control-border-radius);

    transition:
      background-color var(--wa-transition-normal),
      border var(--wa-transition-normal),
      outline var(--wa-transition-fast);
    transition-timing-function: var(--wa-transition-easing);

    cursor: text;

    &::placeholder {
      color: var(--wa-form-control-placeholder-color);

      user-select: none;
      -webkit-user-select: none;
    }

    &:focus {
      outline: none;
    }

    &:focus-visible {
      outline: var(--wa-focus-ring);
      outline-offset: var(--wa-focus-ring-offset);
    }

    &:disabled {
      opacity: 0.5;

      cursor: not-allowed;
    }

    &.wa-outlined {
      background-color: var(--wa-form-control-background-color);
      border-color: var(--wa-form-control-border-color);
    }

    &.wa-filled {
      background-color: var(--wa-color-neutral-fill-quiet);
      border-color: var(--wa-color-neutral-fill-quiet);

      &.wa-outlined {
        border-color: var(--wa-form-control-border-color);
      }
    }

    &.wa-pill {
      border-radius: var(--wa-border-radius-pill);
    }
  }

  /* Textarea */
  textarea {
    height: auto;
    min-height: var(--wa-form-control-height);
    padding: calc(var(--wa-form-control-padding-block) - ((1lh - 1em) / 2)) var(--wa-form-control-padding-inline); /* accounts for the larger line height of textarea content */

    line-height: var(--wa-line-height-normal);

    resize: vertical;
  }

  /* Select */
  select {
    --icon-caret: url("data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"16\" width=\"16\" viewBox=\"0 0 512 512\"><path fill=\"rgb%28180 180 200%29\" d=\"M233.4 406.6c12.5 12.5 32.8 12.5 45.3 0l192-192c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L256 338.7 86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l192 192z\"/></svg>");

    appearance: none;

    position: relative;

    min-width: 0;
    overflow: hidden;

    background-image: var(--icon-caret), var(--icon-caret);
    background-repeat: no-repeat;
    background-position: center right var(--wa-form-control-padding-inline);
    background-blend-mode: hue, difference;

    cursor: pointer;
  }
  /* #endregion */

  /* #region Color Pickers ~~~~~~~~~~~~~~~~~~~ */
  input[type='color'] {
    display: block;

    block-size: var(--wa-form-control-height);
    inline-size: var(--wa-form-control-height);
    padding: calc(var(--wa-form-control-border-width) * 2);

    font-size: 1em;

    background: transparent;
    border: var(--wa-form-control-border-width) var(--wa-border-style) var(--wa-form-control-border-color);
    border-radius: var(--wa-form-control-border-radius);

    cursor: pointer;
    forced-color-adjust: none;

    &::-webkit-color-swatch-wrapper {
      padding: 0;
      border-radius: inherit;
    }

    &::-webkit-color-swatch {
      border: none;
      border-radius: calc(var(--wa-form-control-border-radius) - var(--wa-form-control-border-width) * 3);
    }

    &::-moz-color-swatch {
      border: none;
      border-radius: calc(var(--wa-form-control-border-radius) - var(--wa-form-control-border-width) * 3);
    }

    &:focus-visible {
      outline: var(--wa-focus-ring);
      outline-offset: var(--wa-focus-ring-offset);
    }
  }
  /* #endregion */

  /* #region Sliders ~~~~~~~~~~~~~~~~~~~~~~~~~ */
  input[type='range'] {
    --thumb-width: 1.4em;
    --thumb-height: 1.4em;
    --track-size: 0.5em;

    -webkit-appearance: none;

    display: flex;
    flex-direction: column;
    position: relative;

    width: 100%;
    height: var(--track-size);
    margin: 0;

    font-size: inherit;
    line-height: var(--wa-form-control-height);
    vertical-align: middle;

    background-color: var(--wa-color-neutral-fill-normal);
    border-radius: calc(var(--track-size) / 2);

    &::-webkit-slider-runnable-track {
      width: 100%;
      height: var(--track-size);

      border: none;
      border-radius: 999px;
    }

    &::-webkit-slider-thumb {
      -webkit-appearance: none;

      width: var(--thumb-width);
      height: var(--thumb-height);
      margin-top: calc(var(--thumb-height) / -2 + var(--track-size) / 2);

      background-color: var(--wa-form-control-activated-color);
      border: solid 0.125em var(--wa-color-surface-default);
      border-radius: 50%;

      transition-property: background-color, border-color, box-shadow, color;
      transition-duration: var(--wa-transition-normal);
      transition-timing-function: var(--wa-transition-easing);
    }

    &:enabled {
      &:focus-visible::-webkit-slider-thumb {
        outline: var(--wa-focus-ring);
        outline-offset: var(--wa-focus-ring-offset);
      }

      &::-webkit-slider-thumb {
        cursor: pointer;
      }

      &::-webkit-slider-thumb:active {
        cursor: grabbing;
      }
    }

    &::-moz-focus-outer {
      border: 0;
    }

    &::-moz-range-progress {
      height: var(--track-size);

      background-color: var(--wa-color-neutral-fill-normal);
      border-radius: 3px;
    }

    &::-moz-range-track {
      width: 100%;
      height: var(--track-size);

      background-color: var(--wa-color-neutral-fill-normal);
      border: none;
      border-radius: 999px;
    }

    &::-moz-range-thumb {
      width: var(--thumb-width);
      height: var(--thumb-height);

      background-color: var(--wa-form-control-activated-color);
      border: solid 0.125em var(--wa-color-surface-default);
      border-radius: 50%;

      transition-property: background-color, border-color, box-shadow, color;
      transition-duration: var(--wa-transition-normal);
      transition-timing-function: var(--wa-transition-easing);
    }

    &:enabled {
      &:focus-visible::-moz-range-thumb {
        outline: var(--wa-focus-ring);
        outline-offset: var(--wa-focus-ring-offset);
      }

      &::-moz-range-thumb {
        cursor: pointer;
      }

      &::-moz-range-thumb:active {
        cursor: grabbing;
      }
    }
  }

  label > input[type='range'] {
    margin-block-start: 1em;
  }

  input[type='range']:focus {
    outline: none;
  }

  input[type='range']:disabled {
    opacity: 0.5;

    cursor: not-allowed;

    &::-webkit-slider-thumb {
      cursor: not-allowed;
    }

    &::-moz-range-thumb {
      cursor: not-allowed;
    }
  }
  /* #endregion */

  /* #region Progress ~~~~~~~~~~~~~~~~~~~~~~~~ */
  progress {
    --indicator-color: var(--wa-color-brand-fill-loud);

    width: 100%;
    height: 1rem;
    overflow: hidden;

    color: var(--wa-color-brand-on-loud);

    background-color: var(--wa-color-neutral-fill-normal);
    border-radius: var(--wa-border-radius-pill);

    &::-webkit-progress-bar {
      background: transparent;
    }

    &[value]::-webkit-progress-value {
      background-color: var(--indicator-color);
    }

    &::-moz-progress-bar {
      background-color: var(--indicator-color);
    }
  }

  /* Indeterminate */
  progress:not([value]) {
    padding-left: var(--inset-inline-start);

    animation: wa-progress-indeterminate 2.5s infinite cubic-bezier(0.37, 0, 0.63, 1);

    &::-webkit-progress-bar {
      background-color: var(
        --indicator-color
      ); /* Chrome does not render a ::-webkit-progress-value for indeterminate progress */
    }
  }

  @keyframes wa-fade-in {
    from {
      opacity: 0;
    }
  }

  /* For some reason Chrome fiercely resists animations on this pseudo
	  so we had to do it with padding on <progress> */
  @keyframes wa-progress-indeterminate {
    0% {
      padding-inline-end: 100%;
    }

    25%,
    100% {
      padding-inline-end: 0%;
    }

    75%,
    100% {
      padding-inline-start: 100%;
    }
  }
  /* #endregion */

  /* #region Validation ~~~~~~~~~~~~~~~~~~~~~~ */
  .wa-invalid {
    --wa-form-control-border-color: var(--wa-color-danger-border-loud);
    --wa-form-control-activated-color: var(--wa-color-danger-fill-loud);
    --wa-form-control-value-color: var(--wa-color-danger-on-quiet);

    /* Focus ring */
    --wa-color-focus: var(--wa-color-danger-border-loud);

    /* Help text */
    --wa-color-text-quiet: var(--wa-color-danger-on-quiet);
  }

  .wa-valid {
    --wa-form-control-border-color: var(--wa-color-success-border-loud);
    --wa-form-control-activated-color: var(--wa-color-success-fill-loud);
    --wa-form-control-value-color: var(--wa-color-success-on-quiet);

    /* Focus ring */
    --wa-color-focus: var(--wa-color-success-border-loud);

    /* Help text */
    --wa-color-text-quiet: var(--wa-color-success-on-quiet);
  }
  /* #endregion */
}

@layer wa-utilities {
  /*
   * Utility to minimize FOUCE and show custom elements only after they're registered
   */
  .wa-cloak:has(:not(:defined)) {
    animation: 2s step-end wa-fouce-cloak;
  }

  @keyframes wa-fouce-cloak {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }
}

@layer wa-utilities {
  .wa-visually-hidden:not(:focus-within),
  .wa-visually-hidden-force {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    clip: rect(0 0 0 0) !important;
    clip-path: inset(50%) !important;
    border: none !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    padding: 0 !important;
  }
}

@layer wa-utilities {
  /* These scroll lock helpers are put into this CSS file to avoid strict CSPs that affect style tag loading. */
  @supports (scrollbar-gutter: stable) {
    .wa-scroll-lock {
      scrollbar-gutter: var(--wa-scroll-lock-gutter) !important;
    }

    .wa-scroll-lock body {
      overflow: hidden !important;
    }
  }

  /** This can go away once Safari has scrollbar-gutter support. */
  @supports not (scrollbar-gutter: stable) {
    .wa-scroll-lock body {
      padding-right: var(--wa-scroll-lock-size) !important;
      overflow: hidden !important;
    }
  }
}

@layer wa-utilities {
  .wa-placeholder {
    align-self: stretch;
    background-color: var(--wa-color-neutral-fill-quiet);
    border: dashed var(--wa-border-width-s) var(--wa-color-neutral-border-normal);
    border-radius: var(--wa-border-radius-l);
    padding: var(--wa-space-3xl);
  }
}

@layer wa-utilities {
  .wa-align-items-start {
    align-items: flex-start;
  }
  .wa-align-items-end {
    align-items: flex-end;
  }
  .wa-align-items-center {
    align-items: center;
  }
  .wa-align-items-stretch {
    align-items: stretch;
  }
  .wa-align-items-baseline {
    align-items: baseline;
  }
}

@layer wa-utilities {
  .wa-border-radius-s {
    border-radius: var(--wa-border-radius-s);
  }
  .wa-border-radius-m {
    border-radius: var(--wa-border-radius-m);
  }
  .wa-border-radius-l {
    border-radius: var(--wa-border-radius-l);
  }
  .wa-border-radius-pill {
    border-radius: var(--wa-border-radius-pill);
  }
  .wa-border-radius-circle {
    border-radius: var(--wa-border-radius-circle);
  }
  .wa-border-radius-square {
    border-radius: var(--wa-border-radius-square);
  }
}

@layer wa-utilities {
  /* Apply Flexbox with 0 specificity to ensure a gap util produces a visible change */
  :where(
    .wa-gap-0,
    .wa-gap-3xs,
    .wa-gap-2xs,
    .wa-gap-xs,
    .wa-gap-s,
    .wa-gap-m,
    .wa-gap-l,
    .wa-gap-xl,
    .wa-gap-2xl,
    .wa-gap-3xl
  ) {
    display: flex;
  }

  .wa-gap-0 {
    gap: 0px;
  }
  .wa-gap-3xs {
    gap: var(--wa-space-3xs);
  }
  .wa-gap-2xs {
    gap: var(--wa-space-2xs);
  }
  .wa-gap-xs {
    gap: var(--wa-space-xs);
  }
  .wa-gap-s {
    gap: var(--wa-space-s);
  }
  .wa-gap-m {
    gap: var(--wa-space-m);
  }
  .wa-gap-l {
    gap: var(--wa-space-l);
  }
  .wa-gap-xl {
    gap: var(--wa-space-xl);
  }
  .wa-gap-2xl {
    gap: var(--wa-space-2xl);
  }
  .wa-gap-3xl {
    gap: var(--wa-space-3xl);
  }
}

@layer wa-utilities {
  .wa-heading-xs,
  .wa-heading-s,
  .wa-heading-m,
  .wa-heading-l,
  .wa-heading-xl,
  .wa-heading-2xl,
  .wa-heading-3xl {
    font-family: var(--wa-font-family-heading);
    font-weight: var(--wa-font-weight-heading);
    line-height: var(--wa-line-height-condensed);
    text-wrap: balance;
  }

  .wa-heading-xs {
    font-size: var(--wa-font-size-s);
  }

  .wa-heading-s {
    font-size: var(--wa-font-size-m);
  }

  .wa-heading-m {
    font-size: var(--wa-font-size-l);
  }

  .wa-heading-l {
    font-size: var(--wa-font-size-xl);
  }

  .wa-heading-xl {
    font-size: var(--wa-font-size-2xl);
  }

  .wa-heading-2xl {
    font-size: var(--wa-font-size-3xl);
  }

  .wa-heading-3xl {
    font-size: var(--wa-font-size-4xl);
  }

  .wa-body-xs,
  .wa-body-s,
  .wa-body-m,
  .wa-body-l,
  .wa-body-xl {
    font-family: var(--wa-font-family-body);
    font-weight: var(--wa-font-weight-body);
    line-height: var(--wa-line-height-normal);
  }

  .wa-body-xs {
    font-size: var(--wa-font-size-xs);
  }

  .wa-body-s {
    font-size: var(--wa-font-size-s);
  }

  .wa-body-m {
    font-size: var(--wa-font-size-m);
  }

  .wa-body-l {
    font-size: var(--wa-font-size-l);
  }

  .wa-body-xl {
    font-size: var(--wa-font-size-xl);
  }

  .wa-caption-xs,
  .wa-caption-s,
  .wa-caption-m,
  .wa-caption-l,
  .wa-caption-xl {
    color: var(--wa-color-text-quiet);
    font-family: var(--wa-font-family-body);
    font-weight: var(--wa-font-weight-body);
    line-height: var(--wa-line-height-condensed);
  }

  .wa-caption-xs {
    font-size: var(--wa-font-size-2xs);
  }

  .wa-caption-s {
    font-size: var(--wa-font-size-xs);
  }

  .wa-caption-m {
    font-size: var(--wa-font-size-s);
  }

  .wa-caption-l {
    font-size: var(--wa-font-size-m);
  }

  .wa-caption-xl {
    font-size: var(--wa-font-size-l);
  }

  .wa-link {
    color: var(--wa-color-text-link);
    text-decoration: var(--wa-link-decoration-default);
    -webkit-text-decoration: var(--wa-link-decoration-default);

    @media (hover: hover) {
      &:hover {
        color: color-mix(in oklab, var(--wa-color-text-link) 100%, var(--wa-color-mix-hover));
        text-decoration: var(--wa-link-decoration-hover);
        -webkit-text-decoration: var(--wa-link-decoration-hover);
      }
    }
  }

  .wa-link-plain {
    color: var(--wa-color-text-normal);
    text-decoration: none;

    @media (hover: hover) {
      &:hover {
        color: color-mix(in oklab, currentColor, var(--wa-color-mix-hover));
        text-decoration: none;
      }
    }
  }
}

@layer wa-utilities {
  :is(
      [class*='wa-cluster'],
      [class*='wa-flank'],
      [class*='wa-frame'],
      [class*='wa-grid'],
      [class*='wa-stack'],
      [class*='wa-split']
    )
    > * {
    margin-block: 0;
    margin-inline: 0;
  }

  :where(
    [class*='wa-cluster'],
    [class*='wa-flank'],
    [class*='wa-frame'],
    [class*='wa-grid'],
    [class*='wa-stack'],
    [class*='wa-split']
  ) {
    gap: var(--wa-space-m);
  }

  /* #region Cluster */
  [class*='wa-cluster'] {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
  }

  :where([class*='wa-cluster']) {
    align-items: center;
  }
  /* #endregion */

  /* #region Flank */
  [class*='wa-flank'] {
    display: flex;
    flex-wrap: wrap;

    --content-percentage: initial;
    --flank-size: initial;
  }

  [class*='wa-flank']:not([class*='\:end']) > :first-child,
  [class*='wa-flank'][class*='\:start'] > :first-child {
    flex-basis: var(--flank-size, auto);
    flex-grow: 1;
  }
  [class*='wa-flank']:not([class*='\:end']) > :last-child,
  [class*='wa-flank'][class*='\:start'] > :last-child {
    flex-basis: 0;
    flex-grow: 999;
    min-inline-size: var(--content-percentage, 50%);
  }

  [class*='wa-flank'][class*='\:end'] > :last-child {
    flex-basis: var(--flank-size, auto);
    flex-grow: 1;
  }
  [class*='wa-flank'][class*='\:end'] > :first-child {
    flex-basis: 0;
    flex-grow: 999;
    min-inline-size: var(--content-percentage, 50%);
  }

  :where([class*='wa-flank']) {
    align-items: center;
  }
  /* #endregion */

  /* #region Frame */
  [class*='wa-frame'] {
    display: flex;
    aspect-ratio: 1 / 1;
    justify-content: center;
    overflow: hidden;
  }

  [class*='wa-frame'] > img,
  [class*='wa-frame'] > video {
    block-size: 100%;
    inline-size: 100%;
    object-fit: cover;
  }

  [class*='wa-frame'][class*='\:square'] {
    aspect-ratio: 1 / 1;
  }
  [class*='wa-frame'][class*='\:landscape'] {
    aspect-ratio: 16 / 9;
  }
  [class*='wa-frame'][class*='\:portrait'] {
    aspect-ratio: 9 / 16;
  }

  :where([class*='wa-frame']) {
    align-items: center;
  }
  /* #endregion */

  /* #region Grid */
  [class*='wa-grid'] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(var(--min-column-size, 20ch), 100%), 1fr));

    --min-column-size: initial;
  }

  .wa-span-grid {
    grid-column: 1 / -1;
  }
  /* #endregion */

  /* #region Split */
  [class*='wa-split'] {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }

  [class*='wa-split'],
  [class*='wa-split'][class*='\:row'] {
    flex-direction: row;
    block-size: auto;
    inline-size: 100%;
  }

  [class*='wa-split']:not([class*='\:column']) > :first-child {
    flex: 0 1 auto;
  }

  [class*='wa-split'][class*='\:column'] {
    flex-direction: column;
    block-size: auto;
    inline-size: auto;
    align-self: stretch;
  }

  :where([class*='wa-split']) {
    align-items: center;
  }

  /* #endregion */

  /* #region Stack */
  [class*='wa-stack'] {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
  }

  :where([class*='wa-stack']) {
    align-items: stretch;
  }
  /* #endregion */
}

@layer wa-utilities {
  :host([size='small']),
  .wa-size-s {
    font-size: var(--wa-font-size-s);
  }

  :host([size='medium']),
  .wa-size-m {
    font-size: var(--wa-font-size-m);
  }

  :host([size='large']),
  .wa-size-l {
    font-size: var(--wa-font-size-l);
  }
}

@layer wa-utilities {
  :where(:root),
  .wa-neutral,
  :host([variant='neutral']) {
    --wa-color-fill-loud: var(--wa-color-neutral-fill-loud);
    --wa-color-fill-normal: var(--wa-color-neutral-fill-normal);
    --wa-color-fill-quiet: var(--wa-color-neutral-fill-quiet);
    --wa-color-border-loud: var(--wa-color-neutral-border-loud);
    --wa-color-border-normal: var(--wa-color-neutral-border-normal);
    --wa-color-border-quiet: var(--wa-color-neutral-border-quiet);
    --wa-color-on-loud: var(--wa-color-neutral-on-loud);
    --wa-color-on-normal: var(--wa-color-neutral-on-normal);
    --wa-color-on-quiet: var(--wa-color-neutral-on-quiet);
  }

  .wa-brand,
  :host([variant='brand']) {
    --wa-color-fill-loud: var(--wa-color-brand-fill-loud);
    --wa-color-fill-normal: var(--wa-color-brand-fill-normal);
    --wa-color-fill-quiet: var(--wa-color-brand-fill-quiet);
    --wa-color-border-loud: var(--wa-color-brand-border-loud);
    --wa-color-border-normal: var(--wa-color-brand-border-normal);
    --wa-color-border-quiet: var(--wa-color-brand-border-quiet);
    --wa-color-on-loud: var(--wa-color-brand-on-loud);
    --wa-color-on-normal: var(--wa-color-brand-on-normal);
    --wa-color-on-quiet: var(--wa-color-brand-on-quiet);
  }

  .wa-success,
  :host([variant='success']) {
    --wa-color-fill-loud: var(--wa-color-success-fill-loud);
    --wa-color-fill-normal: var(--wa-color-success-fill-normal);
    --wa-color-fill-quiet: var(--wa-color-success-fill-quiet);
    --wa-color-border-loud: var(--wa-color-success-border-loud);
    --wa-color-border-normal: var(--wa-color-success-border-normal);
    --wa-color-border-quiet: var(--wa-color-success-border-quiet);
    --wa-color-on-loud: var(--wa-color-success-on-loud);
    --wa-color-on-normal: var(--wa-color-success-on-normal);
    --wa-color-on-quiet: var(--wa-color-success-on-quiet);
  }

  .wa-warning,
  :host([variant='warning']) {
    --wa-color-fill-loud: var(--wa-color-warning-fill-loud);
    --wa-color-fill-normal: var(--wa-color-warning-fill-normal);
    --wa-color-fill-quiet: var(--wa-color-warning-fill-quiet);
    --wa-color-border-loud: var(--wa-color-warning-border-loud);
    --wa-color-border-normal: var(--wa-color-warning-border-normal);
    --wa-color-border-quiet: var(--wa-color-warning-border-quiet);
    --wa-color-on-loud: var(--wa-color-warning-on-loud);
    --wa-color-on-normal: var(--wa-color-warning-on-normal);
    --wa-color-on-quiet: var(--wa-color-warning-on-quiet);
  }

  .wa-danger,
  :host([variant='danger']) {
    --wa-color-fill-loud: var(--wa-color-danger-fill-loud);
    --wa-color-fill-normal: var(--wa-color-danger-fill-normal);
    --wa-color-fill-quiet: var(--wa-color-danger-fill-quiet);
    --wa-color-border-loud: var(--wa-color-danger-border-loud);
    --wa-color-border-normal: var(--wa-color-danger-border-normal);
    --wa-color-border-quiet: var(--wa-color-danger-border-quiet);
    --wa-color-on-loud: var(--wa-color-danger-on-loud);
    --wa-color-on-normal: var(--wa-color-danger-on-normal);
    --wa-color-on-quiet: var(--wa-color-danger-on-quiet);
  }
}



/* 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-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);
  }
}



@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: black 10%;
    --wa-color-mix-active: black 20%;

    --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: black 8%;
    --wa-color-mix-active: black 16%;

    --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-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-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-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);

    /* 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-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 */
  }
}

@layer wa-native, wa-utilities, wa-color-palette, wa-color-variant, wa-theme, wa-theme-dimension, wa-theme-overrides;

/* Native Styles */

/* CSS Utilities */

/* Theme */

@layer wa-theme {
  .wa-theme-awesome,
  .wa-theme-awesome.wa-light,
  .wa-theme-awesome .wa-light,
  .wa-theme-awesome.wa-dark .wa-invert,
  .wa-theme-awesome .wa-dark .wa-invert,
  .wa-light .wa-theme-awesome,
  .wa-dark .wa-theme-awesome.wa-invert,
  .wa-dark .wa-theme-awesome .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-20);
    --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: black 10%;
    --wa-color-mix-active: black 20%;

    --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-70);
    --wa-color-brand-border-quiet: var(--wa-color-brand-70);
    --wa-color-brand-border-normal: var(--wa-color-brand-50);
    --wa-color-brand-border-loud: var(--wa-color-brand-30);
    --wa-color-brand-on-quiet: var(--wa-color-brand-40);
    --wa-color-brand-on-normal: var(--wa-color-brand-40);
    --wa-color-brand-on-loud: var(--wa-color-text-normal);

    --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-80);
    --wa-color-success-border-quiet: var(--wa-color-success-70);
    --wa-color-success-border-normal: var(--wa-color-success-50);
    --wa-color-success-border-loud: var(--wa-color-success-30);
    --wa-color-success-on-quiet: var(--wa-color-success-40);
    --wa-color-success-on-normal: var(--wa-color-success-40);
    --wa-color-success-on-loud: var(--wa-color-text-normal);

    --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-80);
    --wa-color-warning-border-quiet: var(--wa-color-warning-70);
    --wa-color-warning-border-normal: var(--wa-color-warning-50);
    --wa-color-warning-border-loud: var(--wa-color-warning-30);
    --wa-color-warning-on-quiet: var(--wa-color-warning-40);
    --wa-color-warning-on-normal: var(--wa-color-warning-40);
    --wa-color-warning-on-loud: var(--wa-color-text-normal);

    --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-70);
    --wa-color-danger-border-quiet: var(--wa-color-danger-70);
    --wa-color-danger-border-normal: var(--wa-color-danger-50);
    --wa-color-danger-border-loud: var(--wa-color-danger-30);
    --wa-color-danger-on-quiet: var(--wa-color-danger-40);
    --wa-color-danger-on-normal: var(--wa-color-danger-40);
    --wa-color-danger-on-loud: var(--wa-color-text-normal);

    --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-80);
    --wa-color-neutral-border-quiet: var(--wa-color-neutral-70);
    --wa-color-neutral-border-normal: var(--wa-color-neutral-50);
    --wa-color-neutral-border-loud: var(--wa-color-neutral-30);
    --wa-color-neutral-on-quiet: var(--wa-color-neutral-40);
    --wa-color-neutral-on-normal: var(--wa-color-neutral-40);
    --wa-color-neutral-on-loud: var(--wa-color-text-normal);
    /* #endregion */
  }

  .wa-theme-awesome.wa-dark,
  .wa-theme-awesome .wa-dark,
  .wa-theme-awesome.wa-invert,
  .wa-theme-awesome .wa-invert,
  .wa-dark .wa-theme-awesome,
  .wa-light .wa-theme-awesome.wa-invert,
  .wa-light .wa-theme-awesome .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: black 8%;
    --wa-color-mix-active: black 16%;

    --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-30);
    --wa-color-brand-border-normal: var(--wa-color-brand-50);
    --wa-color-brand-border-loud: var(--wa-color-brand-80);
    --wa-color-brand-on-quiet: var(--wa-color-brand-70);
    --wa-color-brand-on-normal: var(--wa-color-brand-80);
    --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-30);
    --wa-color-success-border-normal: var(--wa-color-success-50);
    --wa-color-success-border-loud: var(--wa-color-success-80);
    --wa-color-success-on-quiet: var(--wa-color-success-70);
    --wa-color-success-on-normal: var(--wa-color-success-80);
    --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-70);
    --wa-color-warning-border-quiet: var(--wa-color-warning-30);
    --wa-color-warning-border-normal: var(--wa-color-warning-50);
    --wa-color-warning-border-loud: var(--wa-color-warning-80);
    --wa-color-warning-on-quiet: var(--wa-color-warning-70);
    --wa-color-warning-on-normal: var(--wa-color-warning-80);
    --wa-color-warning-on-loud: var(--wa-color-warning-05);

    --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-30);
    --wa-color-danger-border-normal: var(--wa-color-danger-50);
    --wa-color-danger-border-loud: var(--wa-color-danger-80);
    --wa-color-danger-on-quiet: var(--wa-color-danger-70);
    --wa-color-danger-on-normal: var(--wa-color-danger-80);
    --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-50);
    --wa-color-neutral-border-quiet: var(--wa-color-neutral-30);
    --wa-color-neutral-border-normal: var(--wa-color-neutral-50);
    --wa-color-neutral-border-loud: var(--wa-color-neutral-80);
    --wa-color-neutral-on-quiet: var(--wa-color-neutral-70);
    --wa-color-neutral-on-normal: var(--wa-color-neutral-80);
    --wa-color-neutral-on-loud: white;
    /* #endregion */
  }

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

    /* #region Fonts ~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
    --wa-font-family-body: 'Quicksand', sans-serif;
    --wa-font-family-heading: var(--wa-font-family-body);
    --wa-font-family-code: ui-monospace, monospace;
    --wa-font-family-longform: 'Crimson Pro', 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-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-smaller: round(calc(1em / 1.125), 1px);
    --wa-font-size-larger: round(calc(1em * 1.125 * 1.125), 1px);

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

    --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-bold);

    --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-content-spacing: var(--wa-space-l);
    /* #endregion */

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

    --wa-border-width-scale: 2;
    --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.5;
    --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: 2;
    --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: 0;
    --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;
    --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-in;
    --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-normal);
    --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-neutral-border-loud);

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

    --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: 1em;
    --wa-form-control-padding-inline: 1.25em;
    --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);

    /* 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-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 */
  }
}

@layer wa-theme-dimension {
  .wa-theme-awesome {
    wa-button,
    button,
    input[type='button'],
    input[type='reset'],
    input[type='submit'] {
      --wa-color-shadow: var(--wa-color-border-normal);
      --wa-transition-slow: 0;
      --wa-transition-normal: 0;
      --wa-transition-fast: 0;

      &[appearance='outlined'],
      &.wa-outlined:not(.wa-filled) {
        --wa-color-shadow: var(--wa-color-border-loud);
      }
    }

    wa-button,
    button,
    input[type='button'],
    input[type='reset'],
    input[type='submit'] {
      &:not([appearance~='plain']):not(.wa-plain) {
        &:where(:not(wa-button)),
        &::part(base) {
          height: calc(var(--wa-form-control-height) - var(--wa-shadow-offset-y-s));
          margin-bottom: var(--wa-shadow-offset-y-s);
          margin-right: var(--wa-shadow-offset-x-s);
          box-shadow: var(--wa-shadow-offset-x-s) var(--wa-shadow-offset-y-s) 0 0 var(--wa-color-shadow);
        }
        &:not([disabled]):not(:disabled):active {
          &:where(:not(wa-button)),
          &::part(base) {
            color: var(--wa-color-fill-quiet);
            background-color: var(--wa-color-shadow);
            border-color: var(--wa-color-shadow);
            box-shadow: none;
            transform: translate(var(--wa-shadow-offset-x-s), var(--wa-shadow-offset-y-s));
          }
        }
      }
      .wa-dark & {
        &[appearance~='accent'],
        &.wa-accent {
          &:not([disabled]):not(:disabled):active {
            &:where(:not(wa-button)),
            &::part(base) {
              color: var(--wa-color-on-quiet);
            }
          }
        }
      }
    }

    wa-radio[appearance='button'] {
      &:state(checked) {
        background-color: var(--wa-form-control-activated-color);
        border-color: var(--wa-form-control-activated-color);
        color: var(--wa-color-surface-default);
      }
    }
    wa-radio-group[orientation='horizontal'] wa-radio[appearance='button'] {
      box-shadow: var(--wa-shadow-offset-x-s) max(var(--wa-shadow-offset-y-s), var(--border-width)) 0 0
        var(--wa-form-control-border-color);
      margin-bottom: var(--wa-shadow-offset-y-s);
      margin-right: var(--wa-shadow-offset-x-s);

      &:state(checked) {
        box-shadow: initial;
        transform: translate(var(--wa-shadow-offset-x-s), var(--wa-shadow-offset-y-s));
      }
    }

    :is(
        input:where(
            :not(
              [type='button'],
              [type='checkbox'],
              [type='color'],
              [type='file'],
              [type='hidden'],
              [type='image'],
              [type='radio'],
              [type='range'],
              [type='reset'],
              [type='submit']
            )
          ),
        select,
        textarea,
        wa-input,
        wa-select,
        wa-textarea
      ):not(:focus):not([appearance='filled']) {
      &:where(:not(wa-input):not(wa-select):not(wa-textarea)),
      &:where(wa-input)::part(input),
      &:where(wa-select)::part(combobox),
      &:where(wa-textarea)::part(base) {
        box-shadow: inset var(--wa-shadow-offset-x-s)
          max(var(--wa-shadow-offset-y-s), var(--wa-form-control-border-width)) 0 0 var(--wa-color-shadow);
      }
    }
  }
}

@layer wa-theme-overrides {
  .wa-theme-awesome {
    wa-button,
    button,
    input[type='button'],
    input[type='reset'],
    input[type='submit'] {
      &[appearance='accent'],
      &.wa-accent {
        &:where(:not(wa-button)),
        &::part(base) {
          --wa-color-shadow: var(--wa-color-on-loud);
          border-color: var(--wa-color-shadow);
        }
      }

      .wa-dark & {
        &[appearance='accent'],
        &.wa-accent {
          &:where(:not(wa-button)),
          &::part(base) {
            --wa-color-shadow: var(--wa-color-border-quiet);
          }
        }
      }
    }

    wa-badge {
      border-radius: var(--wa-border-radius-m);
      font-weight: var(--wa-font-weight-bold);
      text-transform: uppercase;
    }

    wa-callout {
      &:is([appearance~='outlined']) {
        border-color: var(--wa-color-border-normal);
      }
    }

    wa-card {
      background-color: var(--wa-color-surface-raised);
    }
    wa-card::part(header) {
      border-bottom-style: dotted;
    }
    wa-card::part(footer) {
      border-top-style: dotted;
    }

    input[type='checkbox'],
    wa-checkbox,
    wa-tree-item::part(checkbox__control) {
      --checked-icon-color: var(--wa-color-surface-default);
    }

    wa-switch {
      --height: 1.5em;
    }

    wa-tag {
      font-weight: var(--wa-font-weight-bold);
    }
  }
}

@layer wa-theme {
  .wa-theme-shoelace,
  .wa-theme-shoelace.wa-light,
  .wa-theme-shoelace .wa-light,
  .wa-theme-shoelace.wa-dark .wa-invert,
  .wa-theme-shoelace .wa-dark .wa-invert,
  .wa-light .wa-theme-shoelace,
  .wa-dark .wa-theme-shoelace.wa-invert,
  .wa-dark .wa-theme-shoelace .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: black 10%;
    --wa-color-mix-active: black 20%;

    --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-50);
    --wa-color-brand-on-normal: var(--wa-color-brand-40);
    --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-50);
    --wa-color-success-on-normal: var(--wa-color-success-40);
    --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-50);
    --wa-color-warning-on-normal: var(--wa-color-warning-40);
    --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-50);
    --wa-color-danger-on-normal: var(--wa-color-danger-40);
    --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-40);
    --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-50);
    --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-theme-shoelace.wa-dark,
  .wa-theme-shoelace .wa-dark,
  .wa-theme-shoelace.wa-invert,
  .wa-theme-shoelace .wa-invert,
  .wa-dark .wa-theme-shoelace,
  .wa-light .wa-theme-shoelace.wa-invert,
  .wa-light .wa-theme-shoelace .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: black 8%;
    --wa-color-mix-active: black 16%;

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

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

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

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

    --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-60);
    --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-50);
    --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 */
  }

  .wa-theme-shoelace,
  .wa-theme-shoelace.wa-light,
  .wa-theme-shoelace .wa-light,
  .wa-theme-shoelace.wa-dark,
  .wa-theme-shoelace .wa-dark,
  .wa-theme-shoelace.wa-invert,
  .wa-theme-shoelace .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-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-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;
    --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-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: 0.7;
    --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)
      color-mix(in oklab, var(--wa-color-focus) 60%, transparent);
    --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: 0.0625;
    --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;
    --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: 250ms;
    --wa-transition-normal: 150ms;
    --wa-transition-fast: 50ms;
    /* #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-normal);
    --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);

    /* 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-m);

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

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

    --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 */
  }
}

@layer wa-theme-overrides {
  .wa-theme-shoelace {
    wa-avatar {
      background-color: var(--wa-color-neutral-fill-loud);
      color: var(--wa-color-neutral-on-loud);
    }

    wa-button::part(label),
    wa-radio[appearance='button'],
    button,
    input:where([type='button'], [type='reset'], [type='submit']) {
      font-size: var(--wa-font-size-smaller);
    }

    wa-radio[appearance='button'] {
      font-weight: var(--wa-font-weight-action);

      &:state(checked) {
        background-color: var(--wa-form-control-activated-color);
        color: var(--wa-color-brand-on-loud);
      }
    }

    wa-breadcrumb {
      font-size: var(--wa-font-size-s);
    }

    wa-callout {
      padding: var(--wa-space-m);
      font-size: var(--wa-font-size-smaller);

      &:is([appearance~='outlined']) {
        border-top-width: var(--wa-border-width-l);
        border-color: var(--wa-color-surface-border);
        border-top-color: var(--border-color, var(--wa-color-border-loud));
      }
    }

    wa-card {
      background-color: var(--wa-color-surface-raised);
    }

    :is(
        wa-input,
        wa-select,
        wa-textarea,
        input:where(
            :not(
              [type='button'],
              [type='checkbox'],
              [type='color'],
              [type='file'],
              [type='hidden'],
              [type='image'],
              [type='radio'],
              [type='range'],
              [type='reset'],
              [type='submit']
            )
          ),
        select,
        textarea
      ):not([appearance='filled'], .wa-filled) {
      --wa-focus-ring: var(--wa-focus-ring-style) var(--wa-focus-ring-width)
        color-mix(in oklab, var(--wa-color-focus), transparent 50%);
      --wa-focus-ring-offset: 0;
    }

    wa-radio,
    input[type='radio'] {
      --checked-icon-color: var(--wa-color-surface-default);
      --checked-icon-scale: 0.4;

      &:checked,
      &:state(checked)::part(control) {
        background-color: var(--wa-form-control-activated-color);
      }
    }

    wa-slider::part(thumb) {
      border: none;
    }

    wa-switch {
      --height: calc(1em * var(--wa-form-control-value-line-height) - var(--wa-form-control-border-width) * 2);
      --thumb-size: calc(var(--height) + 0.25em);
      --width: calc(var(--height) * 2);

      &::part(control) {
        background-color: var(--wa-color-gray-50);
        border-color: var(--wa-color-gray-50);
      }

      &[checked]::part(control) {
        background-color: var(--wa-form-control-activated-color);
        border-color: var(--wa-form-control-activated-color);
      }

      &::part(thumb) {
        background-color: var(--wa-color-surface-default);
        border: var(--wa-border-width-s) var(--wa-border-style) var(--wa-color-gray-50);
      }
      &[checked]::part(thumb) {
        border-color: var(--wa-form-control-activated-color);
      }
    }

    wa-tab {
      font-size: var(--wa-font-size-smaller);
    }
  }
}

@layer wa-color-palette {
  .wa-palette-bright {
    --wa-color-red-95: #ffefef /* oklch(96.475% 0.01735 17.458) */;
    --wa-color-red-90: #fdd /* oklch(92.574% 0.03779 17.855) */;
    --wa-color-red-80: #ffb7b7 /* oklch(84.652% 0.084 18.964) */;
    --wa-color-red-70: #ff8e90 /* oklch(76.896% 0.13677 19.629) */;
    --wa-color-red-60: #f76563 /* oklch(69.077% 0.18003 23.786) */;
    --wa-color-red-50: #d04442 /* oklch(58.513% 0.17687 25.152) */;
    --wa-color-red-40: #a52c2b /* oklch(48.271% 0.15774 25.737) */;
    --wa-color-red-30: #861d1c /* oklch(40.905% 0.1406 26.45) */;
    --wa-color-red-20: #680d0e /* oklch(33.449% 0.1237 26.777) */;
    --wa-color-red-10: #450002 /* oklch(24.549% 0.10017 27.414) */;
    --wa-color-red-05: #2f0000 /* oklch(19.165% 0.07864 29.234) */;
    --wa-color-red: var(--wa-color-red-60);
    --wa-color-red-key: 60;

    --wa-color-orange-95: oklch(96.406% 0.04001 53.476);
    --wa-color-orange-90: oklch(92.395% 0.07984 53.06);
    --wa-color-orange-80: oklch(84.389% 0.12224 47.981);
    --wa-color-orange-70: oklch(76.55% 0.16521 42.512);
    --wa-color-orange-60: #e97331 /* oklch(68.357% 0.16507 46.504) */;
    --wa-color-orange-50: #bf5712 /* oklch(57.834% 0.15197 47.326) */;
    --wa-color-orange-40: oklch(47.62% 0.132 48.51);
    --wa-color-orange-30: oklch(40.38% 0.11554 50);
    --wa-color-orange-20: oklch(32.94% 0.09927 52);
    --wa-color-orange-10: oklch(24.083% 0.07743 54);
    --wa-color-orange-05: oklch(18.817% 0.06098 55);
    --wa-color-orange: var(--wa-color-orange-70);
    --wa-color-orange-key: 70;

    --wa-color-yellow-95: #fff4c0 /* oklch(96.32% 0.0677 97.497) */;
    --wa-color-yellow-90: #ffe579 /* oklch(92.176% 0.13122 96.089) */;
    --wa-color-yellow-80: #ffbf18 /* oklch(84.069% 0.16897 83.446) */;
    --wa-color-yellow-70: #f29c00 /* oklch(76.127% 0.16443 70.48) */;
    --wa-color-yellow-60: #d08402 /* oklch(67.671% 0.14665 69.482) */;
    --wa-color-yellow-50: #a56804 /* oklch(57.027% 0.1228 69.447) */;
    --wa-color-yellow-40: #7d4f04 /* oklch(46.866% 0.09949 70.54) */;
    --wa-color-yellow-30: #643d03 /* oklch(39.73% 0.08492 68.821) */;
    --wa-color-yellow-20: #4a2c01 /* oklch(32.318% 0.06941 69.3) */;
    --wa-color-yellow-10: #2d1901 /* oklch(23.512% 0.04963 68.776) */;
    --wa-color-yellow-05: #1d0f00 /* oklch(18.392% 0.03939 71.947) */;
    --wa-color-yellow: var(--wa-color-yellow-80);
    --wa-color-yellow-key: 80;

    --wa-color-green-95: #dbfaf0 /* oklch(96.006% 0.03481 174.15) */;
    --wa-color-green-90: #b1f3de /* oklch(91.419% 0.0722 172.95) */;
    --wa-color-green-80: #3fe2b2 /* oklch(81.853% 0.14907 168.5) */;
    --wa-color-green-70: #29c596 /* oklch(73.487% 0.14194 166.89) */;
    --wa-color-green-60: #19a87d /* oklch(65.107% 0.13007 166.01) */;
    --wa-color-green-50: #0a8560 /* oklch(54.742% 0.11293 164.94) */;
    --wa-color-green-40: #036648 /* oklch(45.239% 0.09474 164.51) */;
    --wa-color-green-30: #015038 /* oklch(38.229% 0.08003 164.89) */;
    --wa-color-green-20: #003a28 /* oklch(30.885% 0.06454 165.46) */;
    --wa-color-green-10: #002317 /* oklch(22.712% 0.04718 165.92) */;
    --wa-color-green-05: #00160d /* oklch(17.744% 0.03707 165.47) */;
    --wa-color-green: var(--wa-color-green-80);
    --wa-color-green-key: 80;

    --wa-color-cyan-95: #dbf9fc /* oklch(96.146% 0.03142 203.97) */;
    --wa-color-cyan-90: #a6f2fa /* oklch(91.438% 0.07533 204.25) */;
    --wa-color-cyan-80: #51dcee /* oklch(82.7% 0.11986 207.31) */;
    --wa-color-cyan-70: #2fbfd5 /* oklch(74.137% 0.11878 210.5) */;
    --wa-color-cyan-60: #1fa3b9 /* oklch(65.917% 0.10909 212.4) */;
    --wa-color-cyan-50: #118095 /* oklch(55.343% 0.09433 215.17) */;
    --wa-color-cyan-40: #056273 /* oklch(45.726% 0.0795 215.29) */;
    --wa-color-cyan-30: #014c5a /* oklch(38.37% 0.06757 215.53) */;
    --wa-color-cyan-20: #003843 /* oklch(31.374% 0.0556 215.61) */;
    --wa-color-cyan-10: #002129 /* oklch(22.851% 0.04085 217.17) */;
    --wa-color-cyan-05: #00151a /* oklch(17.995% 0.03161 213.85) */;
    --wa-color-cyan: var(--wa-color-cyan-80);
    --wa-color-cyan-key: 80;

    --wa-color-blue-95: #e7f5ff /* oklch(96.268% 0.02005 238.66) */;
    --wa-color-blue-90: #ceeaff /* oklch(92.321% 0.04119 240.38) */;
    --wa-color-blue-80: #93d0ff /* oklch(83.315% 0.09108 242.3) */;
    --wa-color-blue-70: #5bb5fe /* oklch(74.85% 0.13654 245.56) */;
    --wa-color-blue-60: #4a99e4 /* oklch(66.699% 0.13625 249.55) */;
    --wa-color-blue-50: #3178c0 /* oklch(56.346% 0.13216 251.63) */;
    --wa-color-blue-40: #235a96 /* oklch(46.273% 0.11344 253.15) */;
    --wa-color-blue-30: #194777 /* oklch(39.272% 0.09544 252.36) */;
    --wa-color-blue-20: #103359 /* oklch(31.787% 0.07886 253.15) */;
    --wa-color-blue-10: #061e38 /* oklch(23.254% 0.05851 252.8) */;
    --wa-color-blue-05: #031225 /* oklch(18.051% 0.04534 253.25) */;
    --wa-color-blue: var(--wa-color-blue-70);
    --wa-color-blue-key: 70;

    --wa-color-indigo-95: #edf2ff /* oklch(96.116% 0.01824 269.09) */;
    --wa-color-indigo-90: #dce5ff /* oklch(92.306% 0.03671 270.47) */;
    --wa-color-indigo-80: #bac8ff /* oklch(84.108% 0.07867 273.5) */;
    --wa-color-indigo-70: #95abff /* oklch(75.79% 0.12361 271.99) */;
    --wa-color-indigo-60: #728dff /* oklch(67.658% 0.17035 271.19) */;
    --wa-color-indigo-50: #516ed8 /* oklch(57.136% 0.16529 269.13) */;
    --wa-color-indigo-40: #3851b3 /* oklch(47.273% 0.15818 268.81) */;
    --wa-color-indigo-30: #2a3f8f /* oklch(39.968% 0.13476 268.52) */;
    --wa-color-indigo-20: #1e2d6c /* oklch(32.512% 0.11114 269.2) */;
    --wa-color-indigo-10: #101a45 /* oklch(23.864% 0.08185 269.36) */;
    --wa-color-indigo-05: #080f2f /* oklch(18.545% 0.06467 269.54) */;
    --wa-color-indigo: var(--wa-color-indigo-60);
    --wa-color-indigo-key: 60;

    --wa-color-purple-95: #f3f0ff /* oklch(96.181% 0.02019 295.19) */;
    --wa-color-purple-90: #eae2ff /* oklch(92.785% 0.03984 298.23) */;
    --wa-color-purple-80: #d1c0ff /* oklch(84.322% 0.08845 296.84) */;
    --wa-color-purple-70: #b8a0fe /* oklch(76.293% 0.13384 294.76) */;
    --wa-color-purple-60: #9e83f2 /* oklch(68.278% 0.16015 292.86) */;
    --wa-color-purple-50: #7b65cb /* oklch(57.62% 0.15206 290.77) */;
    --wa-color-purple-40: #5c4ba7 /* oklch(47.824% 0.14213 288.32) */;
    --wa-color-purple-30: #493590 /* oklch(40.487% 0.14337 288.41) */;
    --wa-color-purple-20: #371f7a /* oklch(33.309% 0.1443 287.97) */;
    --wa-color-purple-10: #250161 /* oklch(25.284% 0.14353 287.73) */;
    --wa-color-purple-05: #150047 /* oklch(19.858% 0.11707 283.68) */;
    --wa-color-purple: var(--wa-color-purple-60);
    --wa-color-purple-key: 60;

    --wa-color-pink-95: #f8effc /* oklch(96.287% 0.01965 315.67) */;
    --wa-color-pink-90: #f4defb /* oklch(92.703% 0.04524 317.99) */;
    --wa-color-pink-80: #edb8fa /* oklch(85.148% 0.10592 319.58) */;
    --wa-color-pink-70: #e38ef8 /* oklch(77.16% 0.16992 319.48) */;
    --wa-color-pink-60: #c576db /* oklch(68.843% 0.16426 318.62) */;
    --wa-color-pink-50: #a258b5 /* oklch(58.347% 0.15642 319.13) */;
    --wa-color-pink-40: #823b94 /* oklch(48.331% 0.15299 319.08) */;
    --wa-color-pink-30: #6d247e /* oklch(41.177% 0.1547 319.42) */;
    --wa-color-pink-20: #580a68 /* oklch(34.103% 0.15338 319.6) */;
    --wa-color-pink-10: #370047 /* oklch(24.984% 0.12212 316.48) */;
    --wa-color-pink-05: #240033 /* oklch(19.65% 0.09758 313.47) */;
    --wa-color-pink: var(--wa-color-pink-70);
    --wa-color-pink-key: 70;

    --wa-color-gray-95: #f1f2f5 /* oklch(96.124% 0.00414 271.37) */;
    --wa-color-gray-90: #e4e6eb /* oklch(92.484% 0.00709 268.54) */;
    --wa-color-gray-80: #c5cad5 /* oklch(83.843% 0.01625 266.26) */;
    --wa-color-gray-70: #a8afbf /* oklch(75.353% 0.02424 266.85) */;
    --wa-color-gray-60: #8c95aa /* oklch(66.963% 0.0328 267.07) */;
    --wa-color-gray-50: #6a7591 /* oklch(56.369% 0.04546 268.14) */;
    --wa-color-gray-40: #4a597a /* oklch(46.526% 0.05715 265.38) */;
    --wa-color-gray-30: #384565 /* oklch(39.365% 0.05713 266.86) */;
    --wa-color-gray-20: #26314f /* oklch(31.829% 0.05593 267.86) */;
    --wa-color-gray-10: #131c38 /* oklch(23.46% 0.0555 268.48) */;
    --wa-color-gray-05: #0a1127 /* oklch(18.485% 0.04617 268.36) */;
    --wa-color-gray: var(--wa-color-gray-40);
    --wa-color-gray-key: 40;
  }
}

@layer wa-color-palette {
  .wa-palette-shoelace,
  .wa-palette-shoelace :host {
    --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: #ffb8b5 /* oklch(84.778% 0.083 21.686) */;
    --wa-color-red-70: #fe8f8d /* oklch(76.859% 0.13466 21.762) */;
    --wa-color-red-60: #f56667 /* oklch(68.982% 0.17631 22.472) */;
    --wa-color-red-50: #e02c2b /* oklch(58.861% 0.21461 27.156) */;
    --wa-color-red-40: #b5051a /* oklch(48.833% 0.19611 25.68) */;
    --wa-color-red-30: #900015 /* oklch(41.172% 0.16676 24.609) */;
    --wa-color-red-20: #6c000d /* oklch(33.479% 0.1356 24.617) */;
    --wa-color-red-10: #450005 /* oklch(24.598% 0.09968 24.835) */;
    --wa-color-red-05: #2f0002 /* oklch(19.218% 0.07801 25.517) */;
    --wa-color-red: var(--wa-color-red-50);
    --wa-color-red-key: 50;

    --wa-color-orange-95: #fff0e4 /* oklch(96.374% 0.0228 61.238) */;
    --wa-color-orange-90: #ffe0c8 /* oklch(92.611% 0.04689 59.917) */;
    --wa-color-orange-80: #ffbb89 /* oklch(84.386% 0.10217 57.161) */;
    --wa-color-orange-70: #ff9342 /* oklch(76.486% 0.15964 54.102) */;
    --wa-color-orange-60: #f36d00 /* oklch(68.715% 0.18774 47.79) */;
    --wa-color-orange-50: #c94e00 /* oklch(58.068% 0.17131 43.217) */;
    --wa-color-orange-40: #9d3800 /* oklch(47.924% 0.14534 41.739) */;
    --wa-color-orange-30: #7e2900 /* oklch(40.53% 0.1259 40.51) */;
    --wa-color-orange-20: #5e1c00 /* oklch(32.874% 0.1027 40.228) */;
    --wa-color-orange-10: #3b0f00 /* oklch(24.125% 0.07446 40.837) */;
    --wa-color-orange-05: #280700 /* oklch(18.837% 0.05933 39.827) */;
    --wa-color-orange: var(--wa-color-orange-60);
    --wa-color-orange-key: 60;

    --wa-color-yellow-95: #fef2bf /* oklch(95.823% 0.06674 96.369) */;
    --wa-color-yellow-90: #fde588 /* oklch(92.2% 0.11633 95.327) */;
    --wa-color-yellow-80: #f5c24b /* oklch(83.879% 0.14445 85.083) */;
    --wa-color-yellow-70: #e9a010 /* oklch(75.825% 0.15689 75.537) */;
    --wa-color-yellow-60: #d78000 /* oklch(67.839% 0.15287 64.455) */;
    --wa-color-yellow-50: #b26000 /* oklch(57.324% 0.13672 58.338) */;
    --wa-color-yellow-40: #8a4700 /* oklch(47.183% 0.11461 56.655) */;
    --wa-color-yellow-30: #6e3700 /* oklch(40.03% 0.0976 56.323) */;
    --wa-color-yellow-20: #522700 /* oklch(32.54% 0.07981 55.802) */;
    --wa-color-yellow-10: #331600 /* oklch(23.846% 0.05834 56.02) */;
    --wa-color-yellow-05: #210d00 /* oklch(18.619% 0.04431 58.553) */;
    --wa-color-yellow: var(--wa-color-yellow-70);
    --wa-color-yellow-key: 70;

    --wa-color-green-95: #d4fce1 /* oklch(95.554% 0.05477 155.71) */;
    --wa-color-green-90: #a4f8c2 /* oklch(91.11% 0.1107 155.35) */;
    --wa-color-green-80: #6ae095 /* oklch(81.924% 0.15151 153.52) */;
    --wa-color-green-70: #44c670 /* oklch(73.506% 0.16742 151) */;
    --wa-color-green-60: #21ab52 /* oklch(65.151% 0.17062 149.59) */;
    --wa-color-green-50: #0d873f /* oklch(54.644% 0.14593 150.18) */;
    --wa-color-green-40: #166635 /* oklch(45.105% 0.10874 151.56) */;
    --wa-color-green-30: #115029 /* oklch(38.182% 0.09049 151.63) */;
    --wa-color-green-20: #0a3a1c /* oklch(30.854% 0.07315 151.48) */;
    --wa-color-green-10: #04230f /* oklch(22.692% 0.05324 151.92) */;
    --wa-color-green-05: #021608 /* oklch(17.756% 0.04076 152.68) */;
    --wa-color-green: var(--wa-color-green-60);
    --wa-color-green-key: 60;

    --wa-color-cyan-95: #d8fafc /* oklch(96.149% 0.03524 200.93) */;
    --wa-color-cyan-90: #a3f2f7 /* oklch(91.187% 0.07744 200.93) */;
    --wa-color-cyan-80: #67dbe2 /* oklch(82.721% 0.1051 200.68) */;
    --wa-color-cyan-70: #29c0ca /* oklch(73.859% 0.11825 201.93) */;
    --wa-color-cyan-60: #0ca4ae /* oklch(65.523% 0.10997 202.61) */;
    --wa-color-cyan-50: #0c828c /* oklch(55.424% 0.09237 204.53) */;
    --wa-color-cyan-40: #0a626b /* oklch(45.428% 0.07504 206.17) */;
    --wa-color-cyan-30: #084d55 /* oklch(38.542% 0.06312 207.36) */;
    --wa-color-cyan-20: #06383f /* oklch(31.335% 0.05062 209.3) */;
    --wa-color-cyan-10: #002127 /* oklch(22.739% 0.03961 211.94) */;
    --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: #e2f6ff /* oklch(96.112% 0.0243 226.47) */;
    --wa-color-blue-90: #c0ecff /* oklch(91.822% 0.0523 226) */;
    --wa-color-blue-80: #7fd4fc /* oklch(83.068% 0.09979 229.91) */;
    --wa-color-blue-70: #48b9f4 /* oklch(74.644% 0.13162 235.42) */;
    --wa-color-blue-60: #1f9de2 /* oklch(66.419% 0.14398 240.02) */;
    --wa-color-blue-50: #007bbc /* oklch(55.956% 0.1346 242.72) */;
    --wa-color-blue-40: #005d93 /* oklch(46.121% 0.11438 244.28) */;
    --wa-color-blue-30: #004975 /* oklch(39.093% 0.09705 244.33) */;
    --wa-color-blue-20: #003558 /* oklch(31.8% 0.08026 245.13) */;
    --wa-color-blue-10: #001f36 /* oklch(23.093% 0.05763 244.59) */;
    --wa-color-blue-05: #001325 /* oklch(18.113% 0.04675 246.17) */;
    --wa-color-blue: var(--wa-color-blue-60);
    --wa-color-blue-key: 60;

    --wa-color-indigo-95: #eff2ff /* oklch(96.265% 0.01769 275.64) */;
    --wa-color-indigo-90: #e0e5ff /* oklch(92.602% 0.03569 277.03) */;
    --wa-color-indigo-80: #bec7ff /* oklch(84.198% 0.07895 277.45) */;
    --wa-color-indigo-70: #9da9fc /* oklch(75.797% 0.11994 276.85) */;
    --wa-color-indigo-60: #808bf8 /* oklch(67.752% 0.15983 276.9) */;
    --wa-color-indigo-50: #6163f0 /* oklch(57.814% 0.20686 277.14) */;
    --wa-color-indigo-40: #4a41d4 /* oklch(48.413% 0.21583 277.35) */;
    --wa-color-indigo-30: #3b369d /* oklch(40.562% 0.16149 278.54) */;
    --wa-color-indigo-20: #2b2872 /* oklch(32.937% 0.12339 278.99) */;
    --wa-color-indigo-10: #191748 /* oklch(24.174% 0.08853 279.28) */;
    --wa-color-indigo-05: #0e0d31 /* oklch(18.772% 0.06933 278.6) */;
    --wa-color-indigo: var(--wa-color-indigo-40);
    --wa-color-indigo-key: 40;

    --wa-color-purple-95: #f6f0ff /* oklch(96.412% 0.02086 304.04) */;
    --wa-color-purple-90: #eee0ff /* oklch(92.72% 0.04406 305.89) */;
    --wa-color-purple-80: #dcbdff /* oklch(84.694% 0.09583 305.85) */;
    --wa-color-purple-70: #ca99ff /* oklch(76.728% 0.14961 305.27) */;
    --wa-color-purple-60: #b874ff /* oklch(69.085% 0.2024 304.19) */;
    --wa-color-purple-50: #9f46ee /* oklch(59.304% 0.23941 304.1) */;
    --wa-color-purple-40: #7e2ac2 /* oklch(49.181% 0.21892 304.24) */;
    --wa-color-purple-30: #632198 /* oklch(41.448% 0.18071 304.64) */;
    --wa-color-purple-20: #4a1574 /* oklch(33.839% 0.15043 304.56) */;
    --wa-color-purple-10: #2e094b /* oklch(24.855% 0.11212 304.52) */;
    --wa-color-purple-05: #1e0433 /* oklch(19.319% 0.0877 304.85) */;
    --wa-color-purple: var(--wa-color-purple-50);
    --wa-color-purple-key: 50;

    --wa-color-pink-95: #fdeff7 /* oklch(96.539% 0.01831 342.02) */;
    --wa-color-pink-90: #fcdcee /* oklch(92.607% 0.04228 343.07) */;
    --wa-color-pink-80: #fab6db /* oklch(84.992% 0.09131 345.4) */;
    --wa-color-pink-70: #f78cc4 /* oklch(77.072% 0.14455 348.37) */;
    --wa-color-pink-60: #f160a9 /* oklch(69.418% 0.19234 351.99) */;
    --wa-color-pink-50: #db2878 /* oklch(59.255% 0.21755 0.28257) */;
    --wa-color-pink-40: #ab1854 /* oklch(48.723% 0.18199 3.8244) */;
    --wa-color-pink-30: #851844 /* oklch(41.188% 0.14622 2.4184) */;
    --wa-color-pink-20: #640e30 /* oklch(33.442% 0.12022 3.3857) */;
    --wa-color-pink-10: #43001a /* oklch(24.613% 0.09885 5.3211) */;
    --wa-color-pink-05: #2f000b /* oklch(19.457% 0.07776 12.211) */;
    --wa-color-pink: var(--wa-color-pink-50);
    --wa-color-pink-key: 50;

    --wa-color-gray-95: #f2f2f3 /* oklch(96.143% 0.00133 286.37) */;
    --wa-color-gray-90: #e5e5e8 /* oklch(92.276% 0.00403 286.32) */;
    --wa-color-gray-80: #c9c9cc /* oklch(83.679% 0.00413 286.31) */;
    --wa-color-gray-70: #aeafb1 /* oklch(75.381% 0.00306 264.54) */;
    --wa-color-gray-60: #94959b /* oklch(67.089% 0.00884 278.56) */;
    --wa-color-gray-50: #72747d /* oklch(56.027% 0.01402 275.93) */;
    --wa-color-gray-40: #565861 /* oklch(46.18% 0.01474 275.83) */;
    --wa-color-gray-30: #43454d /* oklch(39.154% 0.01373 274.58) */;
    --wa-color-gray-20: #313134 /* oklch(31.432% 0.00529 286.09) */;
    --wa-color-gray-10: #1d1d20 /* oklch(23.201% 0.00571 285.95) */;
    --wa-color-gray-05: #101113 /* oklch(17.739% 0.00442 264.46) */;
    --wa-color-gray: var(--wa-color-gray-40);
    --wa-color-gray-key: 40;
  }
}