/* === SOURCE: variables.css === */
:root {


  /*
  // Primitives
  */

  /* Colors */

  --clr-base-50: #EFEFF0;
  --clr-base-50--0: rgba(239, 239, 240, 0);
  --clr-base-50--5: rgba(239, 239, 240, 0.05);
  --clr-base-50--10: rgba(239, 239, 240, 0.1);
  --clr-base-50--20: rgba(239, 239, 240, 0.2);
  --clr-base-50--25: rgba(239, 239, 240, 0.25);
  --clr-base-50--30: rgba(239, 239, 240, 0.3);
  --clr-base-50--40: rgba(239, 239, 240, 0.4);
  --clr-base-50--50: rgba(239, 239, 240, 0.5);
  --clr-base-50--60: rgba(239, 239, 240, 0.6);
  --clr-base-50--70: rgba(239, 239, 240, 0.7);
  --clr-base-50--75: rgba(239, 239, 240, 0.75);
  --clr-base-50--80: rgba(239, 239, 240, 0.8);
  --clr-base-50--90: rgba(239, 239, 240, 0.9);
  --clr-base-50--95: rgba(239, 239, 240, 0.95);

  --clr-base-100: #D4D4D8;
  --clr-base-100--0: rgba(212, 212, 216, 0);
  --clr-base-100--5: rgba(212, 212, 216, 0.05);
  --clr-base-100--10: rgba(212, 212, 216, 0.1);
  --clr-base-100--20: rgba(212, 212, 216, 0.2);
  --clr-base-100--25: rgba(212, 212, 216, 0.25);
  --clr-base-100--30: rgba(212, 212, 216, 0.3);
  --clr-base-100--40: rgba(212, 212, 216, 0.4);
  --clr-base-100--50: rgba(212, 212, 216, 0.5);
  --clr-base-100--60: rgba(212, 212, 216, 0.6);
  --clr-base-100--70: rgba(212, 212, 216, 0.7);
  --clr-base-100--75: rgba(212, 212, 216, 0.75);
  --clr-base-100--80: rgba(212, 212, 216, 0.8);
  --clr-base-100--90: rgba(212, 212, 216, 0.9);
  --clr-base-100--95: rgba(212, 212, 216, 0.95);

  --clr-base-200: #BABABF;
  --clr-base-200--0: rgba(186, 186, 191, 0);
  --clr-base-200--5: rgba(186, 186, 191, 0.05);
  --clr-base-200--10: rgba(186, 186, 191, 0.1);
  --clr-base-200--20: rgba(186, 186, 191, 0.2);
  --clr-base-200--25: rgba(186, 186, 191, 0.25);
  --clr-base-200--30: rgba(186, 186, 191, 0.3);
  --clr-base-200--40: rgba(186, 186, 191, 0.4);
  --clr-base-200--50: rgba(186, 186, 191, 0.5);
  --clr-base-200--60: rgba(186, 186, 191, 0.6);
  --clr-base-200--70: rgba(186, 186, 191, 0.7);
  --clr-base-200--75: rgba(186, 186, 191, 0.75);
  --clr-base-200--80: rgba(186, 186, 191, 0.8);
  --clr-base-200--90: rgba(186, 186, 191, 0.9);
  --clr-base-200--95: rgba(186, 186, 191, 0.95);

  --clr-base-300: #9D9DA4;
  --clr-base-300--0: rgba(157, 157, 164, 0);
  --clr-base-300--5: rgba(157, 157, 164, 0.05);
  --clr-base-300--10: rgba(157, 157, 164, 0.1);
  --clr-base-300--20: rgba(157, 157, 164, 0.2);
  --clr-base-300--25: rgba(157, 157, 164, 0.25);
  --clr-base-300--30: rgba(157, 157, 164, 0.3);
  --clr-base-300--40: rgba(157, 157, 164, 0.4);
  --clr-base-300--50: rgba(157, 157, 164, 0.5);
  --clr-base-300--60: rgba(157, 157, 164, 0.6);
  --clr-base-300--70: rgba(157, 157, 164, 0.7);
  --clr-base-300--75: rgba(157, 157, 164, 0.75);
  --clr-base-300--80: rgba(157, 157, 164, 0.8);
  --clr-base-300--90: rgba(157, 157, 164, 0.9);
  --clr-base-300--95: rgba(157, 157, 164, 0.95);

  --clr-base-400: #76767E;
  --clr-base-400--0: rgba(118, 118, 126, 0);
  --clr-base-400--5: rgba(118, 118, 126, 0.05);
  --clr-base-400--10: rgba(118, 118, 126, 0.1);
  --clr-base-400--20: rgba(118, 118, 126, 0.2);
  --clr-base-400--25: rgba(118, 118, 126, 0.25);
  --clr-base-400--30: rgba(118, 118, 126, 0.3);
  --clr-base-400--40: rgba(118, 118, 126, 0.4);
  --clr-base-400--50: rgba(118, 118, 126, 0.5);
  --clr-base-400--60: rgba(118, 118, 126, 0.6);
  --clr-base-400--70: rgba(118, 118, 126, 0.7);
  --clr-base-400--75: rgba(118, 118, 126, 0.75);
  --clr-base-400--80: rgba(118, 118, 126, 0.8);
  --clr-base-400--90: rgba(118, 118, 126, 0.9);
  --clr-base-400--95: rgba(118, 118, 126, 0.95);

  --clr-base-500: #434347;
  --clr-base-500--0: rgba(67, 67, 71, 0);
  --clr-base-500--5: rgba(67, 67, 71, 0.05);
  --clr-base-500--10: rgba(67, 67, 71, 0.1);
  --clr-base-500--20: rgba(67, 67, 71, 0.2);
  --clr-base-500--25: rgba(67, 67, 71, 0.25);
  --clr-base-500--30: rgba(67, 67, 71, 0.3);
  --clr-base-500--40: rgba(67, 67, 71, 0.4);
  --clr-base-500--50: rgba(67, 67, 71, 0.5);
  --clr-base-500--60: rgba(67, 67, 71, 0.6);
  --clr-base-500--70: rgba(67, 67, 71, 0.7);
  --clr-base-500--75: rgba(67, 67, 71, 0.75);
  --clr-base-500--80: rgba(67, 67, 71, 0.8);
  --clr-base-500--90: rgba(67, 67, 71, 0.9);
  --clr-base-500--95: rgba(67, 67, 71, 0.95);

  --clr-base-600: #2C2C30;
  --clr-base-600--0: rgba(44, 44, 48, 0);
  --clr-base-600--5: rgba(44, 44, 48, 0.05);
  --clr-base-600--10: rgba(44, 44, 48, 0.1);
  --clr-base-600--20: rgba(44, 44, 48, 0.2);
  --clr-base-600--25: rgba(44, 44, 48, 0.25);
  --clr-base-600--30: rgba(44, 44, 48, 0.3);
  --clr-base-600--40: rgba(44, 44, 48, 0.4);
  --clr-base-600--50: rgba(44, 44, 48, 0.5);
  --clr-base-600--60: rgba(44, 44, 48, 0.6);
  --clr-base-600--70: rgba(44, 44, 48, 0.7);
  --clr-base-600--75: rgba(44, 44, 48, 0.75);
  --clr-base-600--80: rgba(44, 44, 48, 0.8);
  --clr-base-600--90: rgba(44, 44, 48, 0.9);
  --clr-base-600--95: rgba(44, 44, 48, 0.95);

  --clr-base-700: #18181A;
  --clr-base-700--0: rgba(24, 24, 26, 0);
  --clr-base-700--5: rgba(24, 24, 26, 0.05);
  --clr-base-700--10: rgba(24, 24, 26, 0.1);
  --clr-base-700--20: rgba(24, 24, 26, 0.2);
  --clr-base-700--25: rgba(24, 24, 26, 0.25);
  --clr-base-700--30: rgba(24, 24, 26, 0.3);
  --clr-base-700--40: rgba(24, 24, 26, 0.4);
  --clr-base-700--50: rgba(24, 24, 26, 0.5);
  --clr-base-700--60: rgba(24, 24, 26, 0.6);
  --clr-base-700--70: rgba(24, 24, 26, 0.7);
  --clr-base-700--75: rgba(24, 24, 26, 0.75);
  --clr-base-700--80: rgba(24, 24, 26, 0.8);
  --clr-base-700--90: rgba(24, 24, 26, 0.9);
  --clr-base-700--95: rgba(24, 24, 26, 0.95);

  --clr-base-800: #111113;
  --clr-base-800--0: rgba(17, 17, 19, 0);
  --clr-base-800--5: rgba(17, 17, 19, 0.05);
  --clr-base-800--10: rgba(17, 17, 19, 0.1);
  --clr-base-800--20: rgba(17, 17, 19, 0.2);
  --clr-base-800--25: rgba(17, 17, 19, 0.25);
  --clr-base-800--30: rgba(17, 17, 19, 0.3);
  --clr-base-800--40: rgba(17, 17, 19, 0.4);
  --clr-base-800--50: rgba(17, 17, 19, 0.5);
  --clr-base-800--60: rgba(17, 17, 19, 0.6);
  --clr-base-800--70: rgba(17, 17, 19, 0.7);
  --clr-base-800--75: rgba(17, 17, 19, 0.75);
  --clr-base-800--80: rgba(17, 17, 19, 0.8);
  --clr-base-800--90: rgba(17, 17, 19, 0.9);
  --clr-base-800--95: rgba(17, 17, 19, 0.95);

  --clr-base-900: #0C0C0D;
  --clr-base-900--0: rgba(12, 12, 13, 0);
  --clr-base-900--5: rgba(12, 12, 13, 0.05);
  --clr-base-900--10: rgba(12, 12, 13, 0.1);
  --clr-base-900--20: rgba(12, 12, 13, 0.2);
  --clr-base-900--25: rgba(12, 12, 13, 0.25);
  --clr-base-900--30: rgba(12, 12, 13, 0.3);
  --clr-base-900--40: rgba(12, 12, 13, 0.4);
  --clr-base-900--50: rgba(12, 12, 13, 0.5);
  --clr-base-900--60: rgba(12, 12, 13, 0.6);
  --clr-base-900--70: rgba(12, 12, 13, 0.7);
  --clr-base-900--75: rgba(12, 12, 13, 0.75);
  --clr-base-900--80: rgba(12, 12, 13, 0.8);
  --clr-base-900--90: rgba(12, 12, 13, 0.9);
  --clr-base-900--95: rgba(12, 12, 13, 0.95);
--clr-brand-50: #f0f9ff;
  --clr-brand-50--0: rgba(240, 249, 255, 0);
  --clr-brand-50--5: rgba(240, 249, 255, 0.05);
  --clr-brand-50--10: rgba(240, 249, 255, 0.1);
  --clr-brand-50--20: rgba(240, 249, 255, 0.2);
  --clr-brand-50--25: rgba(240, 249, 255, 0.25);
  --clr-brand-50--30: rgba(240, 249, 255, 0.3);
  --clr-brand-50--40: rgba(240, 249, 255, 0.4);
  --clr-brand-50--50: rgba(240, 249, 255, 0.5);
  --clr-brand-50--60: rgba(240, 249, 255, 0.6);
  --clr-brand-50--70: rgba(240, 249, 255, 0.7);
  --clr-brand-50--75: rgba(240, 249, 255, 0.75);
  --clr-brand-50--80: rgba(240, 249, 255, 0.8);
  --clr-brand-50--90: rgba(240, 249, 255, 0.9);
  --clr-brand-50--95: rgba(240, 249, 255, 0.95);

  --clr-brand-100: #e0f2fe;
  --clr-brand-100--0: rgba(224, 242, 254, 0);
  --clr-brand-100--5: rgba(224, 242, 254, 0.05);
  --clr-brand-100--10: rgba(224, 242, 254, 0.1);
  --clr-brand-100--20: rgba(224, 242, 254, 0.2);
  --clr-brand-100--25: rgba(224, 242, 254, 0.25);
  --clr-brand-100--30: rgba(224, 242, 254, 0.3);
  --clr-brand-100--40: rgba(224, 242, 254, 0.4);
  --clr-brand-100--50: rgba(224, 242, 254, 0.5);
  --clr-brand-100--60: rgba(224, 242, 254, 0.6);
  --clr-brand-100--70: rgba(224, 242, 254, 0.7);
  --clr-brand-100--75: rgba(224, 242, 254, 0.75);
  --clr-brand-100--80: rgba(224, 242, 254, 0.8);
  --clr-brand-100--90: rgba(224, 242, 254, 0.9);
  --clr-brand-100--95: rgba(224, 242, 254, 0.95);

  --clr-brand-200: #bae6fd;
  --clr-brand-200--0: rgba(186, 230, 253, 0);
  --clr-brand-200--5: rgba(186, 230, 253, 0.05);
  --clr-brand-200--10: rgba(186, 230, 253, 0.1);
  --clr-brand-200--20: rgba(186, 230, 253, 0.2);
  --clr-brand-200--25: rgba(186, 230, 253, 0.25);
  --clr-brand-200--30: rgba(186, 230, 253, 0.3);
  --clr-brand-200--40: rgba(186, 230, 253, 0.4);
  --clr-brand-200--50: rgba(186, 230, 253, 0.5);
  --clr-brand-200--60: rgba(186, 230, 253, 0.6);
  --clr-brand-200--70: rgba(186, 230, 253, 0.7);
  --clr-brand-200--75: rgba(186, 230, 253, 0.75);
  --clr-brand-200--80: rgba(186, 230, 253, 0.8);
  --clr-brand-200--90: rgba(186, 230, 253, 0.9);
  --clr-brand-200--95: rgba(186, 230, 253, 0.95);

  --clr-brand-300: #7dd3fc;
  --clr-brand-300--0: rgba(125, 211, 252, 0);
  --clr-brand-300--5: rgba(125, 211, 252, 0.05);
  --clr-brand-300--10: rgba(125, 211, 252, 0.1);
  --clr-brand-300--20: rgba(125, 211, 252, 0.2);
  --clr-brand-300--25: rgba(125, 211, 252, 0.25);
  --clr-brand-300--30: rgba(125, 211, 252, 0.3);
  --clr-brand-300--40: rgba(125, 211, 252, 0.4);
  --clr-brand-300--50: rgba(125, 211, 252, 0.5);
  --clr-brand-300--60: rgba(125, 211, 252, 0.6);
  --clr-brand-300--70: rgba(125, 211, 252, 0.7);
  --clr-brand-300--75: rgba(125, 211, 252, 0.75);
  --clr-brand-300--80: rgba(125, 211, 252, 0.8);
  --clr-brand-300--90: rgba(125, 211, 252, 0.9);
  --clr-brand-300--95: rgba(125, 211, 252, 0.95);

  --clr-brand-400: #38bdf8;
  --clr-brand-400--0: rgba(56, 189, 248, 0);
  --clr-brand-400--5: rgba(56, 189, 248, 0.05);
  --clr-brand-400--10: rgba(56, 189, 248, 0.1);
  --clr-brand-400--20: rgba(56, 189, 248, 0.2);
  --clr-brand-400--25: rgba(56, 189, 248, 0.25);
  --clr-brand-400--30: rgba(56, 189, 248, 0.3);
  --clr-brand-400--40: rgba(56, 189, 248, 0.4);
  --clr-brand-400--50: rgba(56, 189, 248, 0.5);
  --clr-brand-400--60: rgba(56, 189, 248, 0.6);
  --clr-brand-400--70: rgba(56, 189, 248, 0.7);
  --clr-brand-400--75: rgba(56, 189, 248, 0.75);
  --clr-brand-400--80: rgba(56, 189, 248, 0.8);
  --clr-brand-400--90: rgba(56, 189, 248, 0.9);
  --clr-brand-400--95: rgba(56, 189, 248, 0.95);

  --clr-brand-500: #0ea5e9;
  --clr-brand-500--0: rgba(14, 165, 233, 0);
  --clr-brand-500--5: rgba(14, 165, 233, 0.05);
  --clr-brand-500--10: rgba(14, 165, 233, 0.1);
  --clr-brand-500--20: rgba(14, 165, 233, 0.2);
  --clr-brand-500--25: rgba(14, 165, 233, 0.25);
  --clr-brand-500--30: rgba(14, 165, 233, 0.3);
  --clr-brand-500--40: rgba(14, 165, 233, 0.4);
  --clr-brand-500--50: rgba(14, 165, 233, 0.5);
  --clr-brand-500--60: rgba(14, 165, 233, 0.6);
  --clr-brand-500--70: rgba(14, 165, 233, 0.7);
  --clr-brand-500--75: rgba(14, 165, 233, 0.75);
  --clr-brand-500--80: rgba(14, 165, 233, 0.8);
  --clr-brand-500--90: rgba(14, 165, 233, 0.9);
  --clr-brand-500--95: rgba(14, 165, 233, 0.95);

  --clr-brand-600: #0284c7;
  --clr-brand-600--0: rgba(2, 132, 199, 0);
  --clr-brand-600--5: rgba(2, 132, 199, 0.05);
  --clr-brand-600--10: rgba(2, 132, 199, 0.1);
  --clr-brand-600--20: rgba(2, 132, 199, 0.2);
  --clr-brand-600--25: rgba(2, 132, 199, 0.25);
  --clr-brand-600--30: rgba(2, 132, 199, 0.3);
  --clr-brand-600--40: rgba(2, 132, 199, 0.4);
  --clr-brand-600--50: rgba(2, 132, 199, 0.5);
  --clr-brand-600--60: rgba(2, 132, 199, 0.6);
  --clr-brand-600--70: rgba(2, 132, 199, 0.7);
  --clr-brand-600--75: rgba(2, 132, 199, 0.75);
  --clr-brand-600--80: rgba(2, 132, 199, 0.8);
  --clr-brand-600--90: rgba(2, 132, 199, 0.9);
  --clr-brand-600--95: rgba(2, 132, 199, 0.95);

  --clr-brand-700: #0369a1;
  --clr-brand-700--0: rgba(3, 105, 161, 0);
  --clr-brand-700--5: rgba(3, 105, 161, 0.05);
  --clr-brand-700--10: rgba(3, 105, 161, 0.1);
  --clr-brand-700--20: rgba(3, 105, 161, 0.2);
  --clr-brand-700--25: rgba(3, 105, 161, 0.25);
  --clr-brand-700--30: rgba(3, 105, 161, 0.3);
  --clr-brand-700--40: rgba(3, 105, 161, 0.4);
  --clr-brand-700--50: rgba(3, 105, 161, 0.5);
  --clr-brand-700--60: rgba(3, 105, 161, 0.6);
  --clr-brand-700--70: rgba(3, 105, 161, 0.7);
  --clr-brand-700--75: rgba(3, 105, 161, 0.75);
  --clr-brand-700--80: rgba(3, 105, 161, 0.8);
  --clr-brand-700--90: rgba(3, 105, 161, 0.9);
  --clr-brand-700--95: rgba(3, 105, 161, 0.95);

  --clr-brand-800: #075985;
  --clr-brand-800--0: rgba(7, 89, 133, 0);
  --clr-brand-800--5: rgba(7, 89, 133, 0.05);
  --clr-brand-800--10: rgba(7, 89, 133, 0.1);
  --clr-brand-800--20: rgba(7, 89, 133, 0.2);
  --clr-brand-800--25: rgba(7, 89, 133, 0.25);
  --clr-brand-800--30: rgba(7, 89, 133, 0.3);
  --clr-brand-800--40: rgba(7, 89, 133, 0.4);
  --clr-brand-800--50: rgba(7, 89, 133, 0.5);
  --clr-brand-800--60: rgba(7, 89, 133, 0.6);
  --clr-brand-800--70: rgba(7, 89, 133, 0.7);
  --clr-brand-800--75: rgba(7, 89, 133, 0.75);
  --clr-brand-800--80: rgba(7, 89, 133, 0.8);
  --clr-brand-800--90: rgba(7, 89, 133, 0.9);
  --clr-brand-800--95: rgba(7, 89, 133, 0.95);

  --clr-brand-900: #0c4a6e;
  --clr-brand-900--0: rgba(12, 74, 110, 0);
  --clr-brand-900--5: rgba(12, 74, 110, 0.05);
  --clr-brand-900--10: rgba(12, 74, 110, 0.1);
  --clr-brand-900--20: rgba(12, 74, 110, 0.2);
  --clr-brand-900--25: rgba(12, 74, 110, 0.25);
  --clr-brand-900--30: rgba(12, 74, 110, 0.3);
  --clr-brand-900--40: rgba(12, 74, 110, 0.4);
  --clr-brand-900--50: rgba(12, 74, 110, 0.5);
  --clr-brand-900--60: rgba(12, 74, 110, 0.6);
  --clr-brand-900--70: rgba(12, 74, 110, 0.7);
  --clr-brand-900--75: rgba(12, 74, 110, 0.75);
  --clr-brand-900--80: rgba(12, 74, 110, 0.8);
  --clr-brand-900--90: rgba(12, 74, 110, 0.9);
  --clr-brand-900--95: rgba(12, 74, 110, 0.95);
--clr-bronze-50: #f8fafc;
  --clr-bronze-50--0: rgba(248, 250, 252, 0);
  --clr-bronze-50--5: rgba(248, 250, 252, 0.05);
  --clr-bronze-50--10: rgba(248, 250, 252, 0.1);
  --clr-bronze-50--20: rgba(248, 250, 252, 0.2);
  --clr-bronze-50--25: rgba(248, 250, 252, 0.25);
  --clr-bronze-50--30: rgba(248, 250, 252, 0.3);
  --clr-bronze-50--40: rgba(248, 250, 252, 0.4);
  --clr-bronze-50--50: rgba(248, 250, 252, 0.5);
  --clr-bronze-50--60: rgba(248, 250, 252, 0.6);
  --clr-bronze-50--70: rgba(248, 250, 252, 0.7);
  --clr-bronze-50--75: rgba(248, 250, 252, 0.75);
  --clr-bronze-50--80: rgba(248, 250, 252, 0.8);
  --clr-bronze-50--90: rgba(248, 250, 252, 0.9);
  --clr-bronze-50--95: rgba(248, 250, 252, 0.95);

  --clr-bronze-100: #f1f5f9;
  --clr-bronze-100--0: rgba(241, 245, 249, 0);
  --clr-bronze-100--5: rgba(241, 245, 249, 0.05);
  --clr-bronze-100--10: rgba(241, 245, 249, 0.1);
  --clr-bronze-100--20: rgba(241, 245, 249, 0.2);
  --clr-bronze-100--25: rgba(241, 245, 249, 0.25);
  --clr-bronze-100--30: rgba(241, 245, 249, 0.3);
  --clr-bronze-100--40: rgba(241, 245, 249, 0.4);
  --clr-bronze-100--50: rgba(241, 245, 249, 0.5);
  --clr-bronze-100--60: rgba(241, 245, 249, 0.6);
  --clr-bronze-100--70: rgba(241, 245, 249, 0.7);
  --clr-bronze-100--75: rgba(241, 245, 249, 0.75);
  --clr-bronze-100--80: rgba(241, 245, 249, 0.8);
  --clr-bronze-100--90: rgba(241, 245, 249, 0.9);
  --clr-bronze-100--95: rgba(241, 245, 249, 0.95);

  --clr-bronze-200: #e2e8f0;
  --clr-bronze-200--0: rgba(226, 232, 240, 0);
  --clr-bronze-200--5: rgba(226, 232, 240, 0.05);
  --clr-bronze-200--10: rgba(226, 232, 240, 0.1);
  --clr-bronze-200--20: rgba(226, 232, 240, 0.2);
  --clr-bronze-200--25: rgba(226, 232, 240, 0.25);
  --clr-bronze-200--30: rgba(226, 232, 240, 0.3);
  --clr-bronze-200--40: rgba(226, 232, 240, 0.4);
  --clr-bronze-200--50: rgba(226, 232, 240, 0.5);
  --clr-bronze-200--60: rgba(226, 232, 240, 0.6);
  --clr-bronze-200--70: rgba(226, 232, 240, 0.7);
  --clr-bronze-200--75: rgba(226, 232, 240, 0.75);
  --clr-bronze-200--80: rgba(226, 232, 240, 0.8);
  --clr-bronze-200--90: rgba(226, 232, 240, 0.9);
  --clr-bronze-200--95: rgba(226, 232, 240, 0.95);

  --clr-bronze-300: #cbd5e1;
  --clr-bronze-300--0: rgba(203, 213, 225, 0);
  --clr-bronze-300--5: rgba(203, 213, 225, 0.05);
  --clr-bronze-300--10: rgba(203, 213, 225, 0.1);
  --clr-bronze-300--20: rgba(203, 213, 225, 0.2);
  --clr-bronze-300--25: rgba(203, 213, 225, 0.25);
  --clr-bronze-300--30: rgba(203, 213, 225, 0.3);
  --clr-bronze-300--40: rgba(203, 213, 225, 0.4);
  --clr-bronze-300--50: rgba(203, 213, 225, 0.5);
  --clr-bronze-300--60: rgba(203, 213, 225, 0.6);
  --clr-bronze-300--70: rgba(203, 213, 225, 0.7);
  --clr-bronze-300--75: rgba(203, 213, 225, 0.75);
  --clr-bronze-300--80: rgba(203, 213, 225, 0.8);
  --clr-bronze-300--90: rgba(203, 213, 225, 0.9);
  --clr-bronze-300--95: rgba(203, 213, 225, 0.95);

  --clr-bronze-400: #94a3b8;
  --clr-bronze-400--0: rgba(148, 163, 184, 0);
  --clr-bronze-400--5: rgba(148, 163, 184, 0.05);
  --clr-bronze-400--10: rgba(148, 163, 184, 0.1);
  --clr-bronze-400--20: rgba(148, 163, 184, 0.2);
  --clr-bronze-400--25: rgba(148, 163, 184, 0.25);
  --clr-bronze-400--30: rgba(148, 163, 184, 0.3);
  --clr-bronze-400--40: rgba(148, 163, 184, 0.4);
  --clr-bronze-400--50: rgba(148, 163, 184, 0.5);
  --clr-bronze-400--60: rgba(148, 163, 184, 0.6);
  --clr-bronze-400--70: rgba(148, 163, 184, 0.7);
  --clr-bronze-400--75: rgba(148, 163, 184, 0.75);
  --clr-bronze-400--80: rgba(148, 163, 184, 0.8);
  --clr-bronze-400--90: rgba(148, 163, 184, 0.9);
  --clr-bronze-400--95: rgba(148, 163, 184, 0.95);

  --clr-bronze-500: #64748b;
  --clr-bronze-500--0: rgba(100, 116, 139, 0);
  --clr-bronze-500--5: rgba(100, 116, 139, 0.05);
  --clr-bronze-500--10: rgba(100, 116, 139, 0.1);
  --clr-bronze-500--20: rgba(100, 116, 139, 0.2);
  --clr-bronze-500--25: rgba(100, 116, 139, 0.25);
  --clr-bronze-500--30: rgba(100, 116, 139, 0.3);
  --clr-bronze-500--40: rgba(100, 116, 139, 0.4);
  --clr-bronze-500--50: rgba(100, 116, 139, 0.5);
  --clr-bronze-500--60: rgba(100, 116, 139, 0.6);
  --clr-bronze-500--70: rgba(100, 116, 139, 0.7);
  --clr-bronze-500--75: rgba(100, 116, 139, 0.75);
  --clr-bronze-500--80: rgba(100, 116, 139, 0.8);
  --clr-bronze-500--90: rgba(100, 116, 139, 0.9);
  --clr-bronze-500--95: rgba(100, 116, 139, 0.95);

  --clr-bronze-600: #475569;
  --clr-bronze-600--0: rgba(71, 85, 105, 0);
  --clr-bronze-600--5: rgba(71, 85, 105, 0.05);
  --clr-bronze-600--10: rgba(71, 85, 105, 0.1);
  --clr-bronze-600--20: rgba(71, 85, 105, 0.2);
  --clr-bronze-600--25: rgba(71, 85, 105, 0.25);
  --clr-bronze-600--30: rgba(71, 85, 105, 0.3);
  --clr-bronze-600--40: rgba(71, 85, 105, 0.4);
  --clr-bronze-600--50: rgba(71, 85, 105, 0.5);
  --clr-bronze-600--60: rgba(71, 85, 105, 0.6);
  --clr-bronze-600--70: rgba(71, 85, 105, 0.7);
  --clr-bronze-600--75: rgba(71, 85, 105, 0.75);
  --clr-bronze-600--80: rgba(71, 85, 105, 0.8);
  --clr-bronze-600--90: rgba(71, 85, 105, 0.9);
  --clr-bronze-600--95: rgba(71, 85, 105, 0.95);

  --clr-bronze-700: #334155;
  --clr-bronze-700--0: rgba(51, 65, 85, 0);
  --clr-bronze-700--5: rgba(51, 65, 85, 0.05);
  --clr-bronze-700--10: rgba(51, 65, 85, 0.1);
  --clr-bronze-700--20: rgba(51, 65, 85, 0.2);
  --clr-bronze-700--25: rgba(51, 65, 85, 0.25);
  --clr-bronze-700--30: rgba(51, 65, 85, 0.3);
  --clr-bronze-700--40: rgba(51, 65, 85, 0.4);
  --clr-bronze-700--50: rgba(51, 65, 85, 0.5);
  --clr-bronze-700--60: rgba(51, 65, 85, 0.6);
  --clr-bronze-700--70: rgba(51, 65, 85, 0.7);
  --clr-bronze-700--75: rgba(51, 65, 85, 0.75);
  --clr-bronze-700--80: rgba(51, 65, 85, 0.8);
  --clr-bronze-700--90: rgba(51, 65, 85, 0.9);
  --clr-bronze-700--95: rgba(51, 65, 85, 0.95);

  --clr-bronze-800: #1e293b;
  --clr-bronze-800--0: rgba(30, 41, 59, 0);
  --clr-bronze-800--5: rgba(30, 41, 59, 0.05);
  --clr-bronze-800--10: rgba(30, 41, 59, 0.1);
  --clr-bronze-800--20: rgba(30, 41, 59, 0.2);
  --clr-bronze-800--25: rgba(30, 41, 59, 0.25);
  --clr-bronze-800--30: rgba(30, 41, 59, 0.3);
  --clr-bronze-800--40: rgba(30, 41, 59, 0.4);
  --clr-bronze-800--50: rgba(30, 41, 59, 0.5);
  --clr-bronze-800--60: rgba(30, 41, 59, 0.6);
  --clr-bronze-800--70: rgba(30, 41, 59, 0.7);
  --clr-bronze-800--75: rgba(30, 41, 59, 0.75);
  --clr-bronze-800--80: rgba(30, 41, 59, 0.8);
  --clr-bronze-800--90: rgba(30, 41, 59, 0.9);
  --clr-bronze-800--95: rgba(30, 41, 59, 0.95);

  --clr-bronze-900: #0f172a;
  --clr-bronze-900--0: rgba(15, 23, 42, 0);
  --clr-bronze-900--5: rgba(15, 23, 42, 0.05);
  --clr-bronze-900--10: rgba(15, 23, 42, 0.1);
  --clr-bronze-900--20: rgba(15, 23, 42, 0.2);
  --clr-bronze-900--25: rgba(15, 23, 42, 0.25);
  --clr-bronze-900--30: rgba(15, 23, 42, 0.3);
  --clr-bronze-900--40: rgba(15, 23, 42, 0.4);
  --clr-bronze-900--50: rgba(15, 23, 42, 0.5);
  --clr-bronze-900--60: rgba(15, 23, 42, 0.6);
  --clr-bronze-900--70: rgba(15, 23, 42, 0.7);
  --clr-bronze-900--75: rgba(15, 23, 42, 0.75);
  --clr-bronze-900--80: rgba(15, 23, 42, 0.8);
  --clr-bronze-900--90: rgba(15, 23, 42, 0.9);
  --clr-bronze-900--95: rgba(15, 23, 42, 0.95);

  --clr-white: #FFF;
  --clr-white--0: rgba(255, 255, 255, 0);
  --clr-white--5: rgba(255, 255, 255, 0.05);
  --clr-white--10: rgba(255, 255, 255, 0.1);
  --clr-white--20: rgba(255, 255, 255, 0.2);
  --clr-white--25: rgba(255, 255, 255, 0.25);
  --clr-white--30: rgba(255, 255, 255, 0.3);
  --clr-white--40: rgba(255, 255, 255, 0.4);
  --clr-white--50: rgba(255, 255, 255, 0.5);
  --clr-white--60: rgba(255, 255, 255, 0.6);
  --clr-white--70: rgba(255, 255, 255, 0.7);
  --clr-white--75: rgba(255, 255, 255, 0.75);
  --clr-white--80: rgba(255, 255, 255, 0.8);
  --clr-white--90: rgba(255, 255, 255, 0.9);
  --clr-white--95: rgba(255, 255, 255, 0.95);

  --clr-black: #000;
  --clr-black--0: rgba(0, 0, 0, 0);
  --clr-black--5: rgba(0, 0, 0, 0.05);
  --clr-black--10: rgba(0, 0, 0, 0.1);
  --clr-black--20: rgba(0, 0, 0, 0.2);
  --clr-black--25: rgba(0, 0, 0, 0.25);
  --clr-black--30: rgba(0, 0, 0, 0.3);
  --clr-black--40: rgba(0, 0, 0, 0.4);
  --clr-black--50: rgba(0, 0, 0, 0.5);
  --clr-black--60: rgba(0, 0, 0, 0.6);
  --clr-black--70: rgba(0, 0, 0, 0.7);
  --clr-black--75: rgba(0, 0, 0, 0.75);
  --clr-black--80: rgba(0, 0, 0, 0.8);
  --clr-black--90: rgba(0, 0, 0, 0.9);
  --clr-black--95: rgba(0, 0, 0, 0.95);


  --clr-background-body: var(--clr-base-900);

  --clr-surface-01: var(--clr-base-900);
  --clr-surface-02: var(--clr-base-800);
  --clr-surface-03: var(--clr-base-700);
  --clr-surface-04: var(--clr-base-600);
  --clr-surface-05: var(--clr-base-500);
  --clr-surface-contrast: var(--clr-base-100);
  --clr-surface-disabled: var(--clr-base-400);
  --clr-forSurface-01: var(--clr-base-800--40);
  --clr-forSurface-01--strong: var(--clr-base-700--75);
  --clr-forSurface-01--subtle: var(--clr-base-900--60);
  --clr-forSurface-02: var(--clr-base-700--40);
  --clr-forSurface-02--strong: var(--clr-base-600--75);
  --clr-forSurface-02--subtle: var(--clr-base-700--40);
  --clr-forSurface-03: var(--clr-base-600--25);
  --clr-forSurface-03--strong: var(--clr-base-500--75);
  --clr-forSurface-03--subtle: var(--clr-base-700--60);
  --clr-forSurface-04: var(--clr-base-500--25);
  --clr-forSurface-04--strong: var(--clr-base-400--75);
  --clr-forSurface-04--subtle: var(--clr-base-600--60);
  --clr-forSurface-05: var(--clr-base-400--25);
  --clr-forSurface-05--strong: var(--clr-base-300--60);
  --clr-forSurface-05--subtle: var(--clr-base-500--60);
  --clr-forSurface-contrast: var(--clr-base-50--60);
  --clr-forSurface-contrast--strong: var(--clr-base-50);
  --clr-forSurface-contrast--subtle: var(--clr-base-100--60);
  --clr-forSurface-disabled: var(--clr-base-300--40);
  --clr-onSurface-01: var(--clr-base-200--80);
  --clr-onSurface-01--strong: var(--clr-base-50);
  --clr-onSurface-01--bold: var(--clr-base-200);
  --clr-onSurface-01--subtle: var(--clr-base-400--90);
  --clr-onSurface-02: var(--clr-base-200--80);
  --clr-onSurface-02--strong: var(--clr-base-50);
  --clr-onSurface-02--bold: var(--clr-base-200);
  --clr-onSurface-02--subtle: var(--clr-base-400--90);
  --clr-onSurface-03: var(--clr-base-200--80);
  --clr-onSurface-03--strong: var(--clr-base-50);
  --clr-onSurface-03--bold: var(--clr-base-200);
  --clr-onSurface-03--subtle: var(--clr-base-400--90);
  --clr-onSurface-04: var(--clr-base-200--90);
  --clr-onSurface-04--strong: var(--clr-base-50);
  --clr-onSurface-04--bold: var(--clr-base-200);
  --clr-onSurface-04--subtle: var(--clr-base-300--80);
  --clr-onSurface-05: var(--clr-base-200);
  --clr-onSurface-05--strong: var(--clr-base-50);
  --clr-onSurface-05--bold: var(--clr-base-200);
  --clr-onSurface-05--subtle: var(--clr-base-300);
  --clr-onSurface-contrast: var(--clr-base-800);
  --clr-onSurface-contrast--strong: var(--clr-base-900);
  --clr-onSurface-contrast--subtle: var(--clr-base-600);
  --clr-onSurface-brand: var(--clr-brand-400);
  --clr-onSurface-brand--strong: var(--clr-brand-300);
  --clr-onSurface-brand--subtle: var(--clr-brand-500);
  --clr-onSurface-disabled: var(--clr-base-200);
  --clr-accent-brand: var(--clr-brand-500);
  --clr-accent-brand--strong: var(--clr-brand-400);
  --clr-accent-brand--subtle: var(--clr-brand-600);
  --clr-accent-bronze: var(--clr-brand-100);
  --clr-accent-bronze--strong: var(--clr-brand-50);
  --clr-accent-bronze--subtle: var(--clr-brand-200);
  --clr-forAccent-brand: var(--clr-brand-400);
  --clr-forAccent-brand--strong: var(--clr-brand-300);
  --clr-forAccent-brand--subtle: var(--clr-brand-500);
  --clr-forAccent-bronze: var(--clr-brand-200);
  --clr-forAccent-bronze--strong: var(--clr-brand-100);
  --clr-forAccent-bronze--subtle: var(--clr-brand-300);
  --clr-onAccent-brand: #ffffff;
  --clr-onAccent-brand--strong: #ffffff;
  --clr-onAccent-brand--subtle: var(--clr-brand-100);
  --clr-onAccent-bronze: var(--clr-brand-900);
  --clr-onAccent-bronze--strong: var(--clr-brand-800);
  --clr-onAccent-bronze--subtle: var(--clr-brand-700);
  --clr-windows: #2D74D7;
  --clr-apple: #FFF;
  --clr-google: #FF3A44;
  --clr-android: #7CDB5A;
  --clr-youtube: #F00;
  --clr-discord: #5662F6;
  --clr-facebook: #1877F2;
  --clr-instagram: #C13584;

  /* Sizes */

  --size-0: 0px; /* 0px */
  --size-1: 1px; /* 1px */
  --size-2: 0.125rem; /* 2px */
  --size-3: 0.25rem; /* 4px */
  --size-4: 0.5rem; /* 8px */
  --size-5: 0.625rem; /* 10px */
  --size-6: 0.75rem; /* 12px */
  --size-7: 0.875rem; /* 14px */
  --size-8: 1rem; /* 16px */
  --size-9: 1.125rem; /* 18px */
  --size-10: 1.25rem; /* 20px */
  --size-11: 1.5rem; /* 24px */
  --size-12: 1.75rem; /* 28px */
  --size-13: 2rem; /* 32px */
  --size-14: 2.25rem; /* 36px */
  --size-15: 2.5rem; /* 40px */
  --size-16: 3rem; /* 48px */
  --size-17: 3.5rem; /* 56px */
  --size-18: 4rem; /* 64px */
  --size-19: 4.5rem; /* 72px */
  --size-20: 5rem; /* 80px */
  --size-21: 5.5rem; /* 88px */
  --size-22: 6rem; /* 96px */
  --size-23: 7rem; /* 112px */
  --size-24: 8rem; /* 128px */
  --size-25: 9rem; /* 144px */
  --size-26: 10rem; /* 160px */
  --size-27: 11rem; /* 176px */
  --size-28: 12rem; /* 192px */
  --size-29: 13rem; /* 208px */
  --size-30: 14rem; /* 224px */
  --size-31: 15rem; /* 240px */
  --size-32: 16rem; /* 256px */
  --size-33: 18rem; /* 288px */
  --size-34: 20rem; /* 320px */
  --size-35: 22.5rem; /* 360px */
  --size-36: 25rem; /* 400px */
  --size-37: 27.5rem; /* 440px */
  --size-38: 30rem; /* 480px */
  --size-39: 32rem; /* 512px */
  --size-40: 35rem; /* 560px */

  /* Font Family Primitives */
  --font-sans: 'Inter', Arial, sans-serif;
  --font-serif: 'Patua One', 'Times New Roman', serif;
  --font-monospace: 'JetBrains Mono', Courier, monospace;

  /* Font Size Primitives */
  --font-size-xs: 0.625rem; /* 10px */
  --font-size-sm: 0.75rem; /* 12px */
  --font-size-md: 0.875rem; /* 14px */
  --font-size-base: 1rem; /* 16px */
  --font-size-lg: 1.125rem; /* 18px */
  --font-size-xl: 1.25rem; /* 20px */
  --font-size-2xl: 1.5rem; /* 24px */
  --font-size-3xl: 1.75rem; /* 28px */
  --font-size-4xl: 2rem; /* 32px */
  --font-size-5xl: 2.25rem; /* 36px */
  --font-size-6xl: 2.5rem; /* 40px */
  --font-size-7xl: 3rem; /* 48px */
  --font-size-8xl: 3.5rem; /* 56px */
  --font-size-9xl: 4rem; /* 64px */
  --font-size-10xl: 4.5rem; /* 72px */
  --font-size-11xl: 5rem; /* 80px */
  --font-size-12xl: 5.5rem; /* 88px */

  /* Line Height Primitives */
  --line-height-xs: 0.625rem; /* 10px */
  --line-height-sm: 0.75rem; /* 12px */
  --line-height-md: 0.875rem; /* 14px */
  --line-height-base: 1rem; /* 16px */
  --line-height-lg: 1.25rem; /* 20px */
  --line-height-xl: 1.5rem; /* 24px */
  --line-height-2xl: 1.75rem; /* 28px */
  --line-height-3xl: 2rem; /* 32px */
  --line-height-4xl: 2.25rem; /* 36px */
  --line-height-5xl: 2.5rem; /* 40px */
  --line-height-6xl: 3rem; /* 48px */
  --line-height-7xl: 3.5rem; /* 56px */
  --line-height-8xl: 4rem; /* 64px */
  --line-height-9xl: 4.5rem; /* 72px */
  --line-height-10xl: 5rem; /* 80px */
  --line-height-11xl: 5.5rem; /* 88px */
  --line-height-12xl: 6rem; /* 96px */

  /* Font Weight Primitives */
  --font-weight-light: 100; /* Figma -> 300;  Light */
  --font-weight-normal: 200; /*  Figma -> 400;  Regular/Normal */
  --font-weight-medium: 300; /*  Figma -> 500;  Medium */
  --font-weight-semibold: 400; /*  Figma -> 600;  Semi-Bold */
  --font-weight-bold: 600; /*  Figma -> 700;  Bold */
  --font-weight-extrabold: 700; /*  Figma -> 800;  Extra-Bold */
  --font-weight-black: 800; /* Figma -> 900;  Black/Heavy */


  /*
  // Semantics
  */

  /* Body Text */

  --body-font: var(--font-serif);
  --body-base: var(--font-size-base);
  --body-leading: var(--line-height-base);
  --body-weight: var(--font-weight-normal);

  /* Heading Text */

  --heading-font: var(--font-serif);

  --heading-xs-size: var(--font-size-lg); /* Extra Small heading */
  --heading-xs-leading-tight: var(--line-height-lg);
  --heading-xs-leading: var(--line-height-xl);
  --heading-xs-leading-loose: var(--line-height-2xl);
  --heading-xs-weight: var(--font-weight-bold);

  --heading-sm-size: var(--font-size-3xl); /* Small heading */
  --heading-sm-leading-tight: var(--line-height-2xl);
  --heading-sm-leading: var(--line-height-3xl);
  --heading-sm-leading-loose: var(--line-height-4xl);
  --heading-sm-weight: var(--font-weight-black);

  --heading-md-size: var(--font-size-5xl); /* Medium heading */
  --heading-md-leading-tight: var(--line-height-4xl);
  --heading-md-leading: var(--line-height-5xl);
  --heading-md-leading-loose: var(--line-height-6xl);
  --heading-md-weight: var(--font-weight-bold);

  --heading-base-size: var(--font-size-6xl); /* Small heading */
  --heading-base-leading-tight: var(--line-height-6xl);
  --heading-base-leading: var(--line-height-7xl);
  --heading-base-leading-loose: var(--line-height-8xl);
  --heading-base-weight: var(--font-weight-bold);

  --heading-lg-size: var(--font-size-7xl); /* Large heading */
  --heading-lg-leading-tight: var(--line-height-9xl);
  --heading-lg-leading: var(--line-height-10xl);
  --heading-lg-leading-loose: var(--line-height-11xl);
  --heading-lg-weight: var(--font-weight-bold);

  --heading-xl-size: var(--font-size-8xl); /* Large heading */
  --heading-xl-leading-tight: var(--line-height-11xl);
  --heading-xl-leading: var(--line-height-12xl);
  --heading-xl-weight: var(--font-weight-bold);


  /* Button Text */
  --button-font: var(--font-sans);
  --button-sm: var(--font-size-sm);
  --button-leading-sm: var(--line-height-sm);
  --button-md: var(--font-size-md);
  --button-line-height-md: var(--line-height-md);
  --button-lg: var(--font-size-lg);
  --button-leading-lg: var(--line-height-lg);
  --button-xl: var(--font-size-xl);
  --button-leading-xl: var(--line-height-xl);
  --button-weight: var(--font-weight-semibold);

  /* Caption Text */
  --caption-font: var(--font-sans);
  --caption-size: var(--font-size-xs);
  --caption-leading: var(--line-height-xs);
  --caption-weight: var(--font-weight-normal);

  /* Monospace Text (for code, etc.) */
  --code-font: var(--font-monospace);
  --code-size: var(--font-size-sm);
  --code-leading: var(--line-height-sm);
  --code-weight: var(--font-weight-normal);


  /* Viewports */

  --viewport-min: 20rem;
  --viewport-lg: 80rem;
  --viewport-max: 96rem;

  --view-content: 80rem;
  --view-breakout: 96rem;
  --view-max: 160rem;


  /* Spacing */

  --spacing-0: 0px; /* 0px; */
  --spacing-1: var(--size-3); /* 4px */
  --spacing-2: var(--size-4); /* 8px */
  --spacing-3: var(--size-6); /* 12px */
  --spacing-4: var(--size-8); /* 16px */
  --spacing-5: var(--size-10); /* 20px */
  --spacing-6: var(--size-11); /* 24px */
  --spacing-7: var(--size-13); /* 32px */
  --spacing-8: var(--size-15); /* 40px */
  --spacing-9: var(--size-16); /* 48px */
  --spacing-10: var(--size-18); /* 64px */
  --spacing-11: var(--size-20); /* 80px */
  --spacing-12: var(--size-22); /* 96px */
  --spacing-13: var(--size-24); /* 128px */
  --spacing-14: var(--size-25); /* 144px */
  --spacing-15: var(--size-26); /* 160px */
  --spacing-16: var(--size-31); /* 240px */

  /* Radius */

  --radius-0: var(--size-0);
  --radius-1: var(--size-1);
  --radius-2: var(--size-2);
  --radius-3: var(--size-3);
  --radius-4: var(--size-4);

  /* Transitions */

  --ts-1: all 200ms ease-in-out;
  --ts-2: all 750ms cubic-bezier(0.26, 0.53, 0.74, 1.48) 250ms;
  --ts-smooth: cubic-bezier(0.165, 0.1, 0.075, 1);
  --ts-slow: 500ms ease-out;
  --ts-normal: 300ms ease-out;
  --ts-quick: 150ms ease-out;

  /* Box Shadows */

  --shadow-md: 0px 0px 8px 2px rgba(0, 0, 0, 0.05),
  0px 2px 8px 1px rgba(0, 0, 0, 0.05);
  --shadow-xl: 0px 0px 12px 4px rgba(0, 0, 0, 0.1),
  0px 4px 8px 2px rgba(0, 0, 0, 0.2);

  /* Text Shadows */

  --tshadow: 0 0 1px transparent, 0 1px 2px rgba(0, 0, 0, 0.8);
  --tshadow2: 0 0 2px transparent, 0 3px 6px rgba(0, 0, 0, 0.2);
  --tshadow-3: 0px 0px 1px rgba(0, 0, 0, 0.59), 0px 1px 1px rgba(0, 0, 0, 0.51),
  0px 3px 2px rgba(0, 0, 0, 0.3), 0px 5px 2px rgba(0, 0, 0, 0.09),
  0px 8px 2px rgba(0, 0, 0, 0.01);

}


/* === SOURCE: reset.css === */

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

/* remove default spacing */
/* force styling of type through styling, rather than elements */

* {
  margin: 0;
  padding: 0;
  font: inherit;
}

/* dark mode user-agent-styles */

html {
  color-scheme: dark;
  scroll-behavior: smooth;
}

body {
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-text-size-adjust: 100%;
  font-feature-settings: 'cv11', 'salt', 'ss01', 'ss03', 'cv01', 'cv02', 'cv03',
  'cv04', 'cv05', 'cv06', 'cv09', 'cv10';

}

/* responsive images/videos */
img,
picture,
svg,
video {
  display: block;
  max-width: 100%;
}

/* remove dot from unordered lists */

ul {
  list-style-type: none;
}

a,
a:visited,
a:active {
  text-decoration: none;
}

a:focus-visible,
iframe:focus-visible {
  outline: 2px solid var(--clr-forAccent-bronze--subtle);
  outline-offset: 2px;
  z-index: 1;
}



/* === SOURCE: animations.css === */
.animate {
  animation-duration: 0.75s;
  animation-delay: 0.5s;
  animation-name: animate-fade;
  animation-timing-function: cubic-bezier(0.26, 0.53, 0.74, 1.48);
  animation-fill-mode: backwards;
}

/* Fade In */
.animate.fade {
  animation-name: animate-fade;
  animation-timing-function: ease;
}

@keyframes animate-fade {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

/* Pop In */
.animate.pop {
  animation-name: animate-pop;
}

@keyframes animate-pop {
  0% {
    opacity: 0;
    transform: scale(0.5, 0.5);
  }
  100% {
    opacity: 1;
    transform: scale(1, 1);
  }
}

/* Blur In */
.animate.blur {
  animation-name: animate-blur;
  animation-timing-function: ease;
}

@keyframes animate-blur {
  0% {
    opacity: 0;
    filter: blur(15px);
  }
  100% {
    opacity: 1;
    filter: blur(0px);
  }
}

/* Glow In */
.animate.glow {
  animation-name: animate-glow;
  animation-timing-function: ease;
}

@keyframes animate-glow {
  0% {
    opacity: 0;
    filter: brightness(3) saturate(3);
    transform: scale(0.8, 0.8);
  }
  100% {
    opacity: 1;
    filter: brightness(1) saturate(1);
    transform: scale(1, 1);
  }
}

/* Grow In */
.animate.grow {
  animation-name: animate-grow;
}

@keyframes animate-grow {
  0% {
    opacity: 0;
    transform: scale(1, 0);
    visibility: hidden;
  }
  100% {
    opacity: 1;
    transform: scale(1, 1);
  }
}

/* Splat In */
.animate.splat {
  animation-name: animate-splat;
}

@keyframes animate-splat {
  0% {
    opacity: 0;
    transform: scale(0, 0) rotate(20deg) translate(0, -30px);
  }
  70% {
    opacity: 1;
    transform: scale(1.1, 1.1) rotate(15deg);
  }
  85% {
    opacity: 1;
    transform: scale(1.1, 1.1) rotate(15deg) translate(0, -10px);
  }

  100% {
    opacity: 1;
    transform: scale(1, 1) rotate(0) translate(0, 0);
  }
}

/* Roll In */
.animate.roll {
  animation-name: animate-roll;
}

@keyframes animate-roll {
  0% {
    opacity: 0;
    transform: scale(0, 0) rotate(360deg);
  }
  100% {
    opacity: 1;
    transform: scale(1, 1) rotate(0deg);
  }
}

/* Flip In */
.animate.flip {
  animation-name: animate-flip;
  transform-style: preserve-3d;
  perspective: 1000px;
}

@keyframes animate-flip {
  0% {
    opacity: 0;
    transform: rotateX(-120deg) scale(0.9, 0.9);
  }
  100% {
    opacity: 1;
    transform: rotateX(0deg) scale(1, 1);
  }
}

/* Spin In */
.animate.spin {
  animation-name: animate-spin;
  transform-style: preserve-3d;
  perspective: 1000px;
}

@keyframes animate-spin {
  0% {
    opacity: 0;
    transform: rotateY(-120deg) scale(0.9, 0.9);
  }
  100% {
    opacity: 1;
    transform: rotateY(0deg) scale(1, 1);
  }
}

/* Slide In */
.animate.slide {
  animation-name: animate-slide;
}

@keyframes animate-slide {
  0% {
    opacity: 0;
    transform: translate(0, 20px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}

/* Drop In */
.animate.drop {
  animation-name: animate-drop;
  animation-timing-function: cubic-bezier(0.77, 0.14, 0.91, 1.25);
}

@keyframes animate-drop {
  0% {
    opacity: 0;
    transform: translate(0, -300px) scale(0.9, 1.1);
  }
  95% {
    opacity: 1;
    transform: translate(0, 0) scale(0.9, 1.1);
  }
  96% {
    opacity: 1;
    transform: translate(10px, 0) scale(1.2, 0.9);
  }
  97% {
    opacity: 1;
    transform: translate(-10px, 0) scale(1.2, 0.9);
  }
  98% {
    opacity: 1;
    transform: translate(5px, 0) scale(1.1, 0.9);
  }
  99% {
    opacity: 1;
    transform: translate(-5px, 0) scale(1.1, 0.9);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0) scale(1, 1);
  }
}

/* Animation Delays */
.delay-1 {
  animation-delay: 0.6s;
}
.delay-2 {
  animation-delay: 0.7s;
}
.delay-3 {
  animation-delay: 0.8s;
}
.delay-4 {
  animation-delay: 0.9s;
}
.delay-5 {
  animation-delay: 1s;
}
.delay-6 {
  animation-delay: 1.1s;
}
.delay-7 {
  animation-delay: 1.2s;
}
.delay-8 {
  animation-delay: 1.3s;
}
.delay-9 {
  animation-delay: 1.4s;
}
.delay-10 {
  animation-delay: 1.5s;
}
.delay-11 {
  animation-delay: 1.6s;
}
.delay-12 {
  animation-delay: 1.7s;
}
.delay-13 {
  animation-delay: 1.8s;
}
.delay-14 {
  animation-delay: 1.9s;
}
.delay-15 {
  animation-delay: 2s;
}

@media screen and (prefers-reduced-motion: reduce) {
  .animate {
    animation: none !important;
  }
}


/* === SOURCE: layouts.css === */
.page {
  min-height: 100dvh;
  display: grid;
  grid-template-rows: 1fr auto;
  grid-template-columns: minmax(0, 1fr);
}

.main-grid {
  /* Variables */
  --breakout: 1536px;
  --content: 1280px;
  --max: 2560px;
  --padding: var(--spacing-2);

  --full-size: minmax(0, 1fr);
  --max-size: minmax(var(--padding), calc((var(--max) - var(--breakout)) / 2));
  --breakout-size: minmax(0, calc((var(--breakout) - var(--content)) / 2));
  --content-size: min(100% - var(--padding) * 2, var(--content));

  /* Code */

  display: grid;

  grid-template-columns:
    [full-start] var(--full-size)
    [max-start] var(--max-size)
    [breakout-start] var(--breakout-size)
    [content-start] var(--content-size) [content-end]
    var(--breakout-size) [breakout-end]
    var(--max-size) [max-end]
    var(--full-size) [full-end];
}

.full-width,
.full-width\:breakout-content,
.full-width\:full-content,
.breakout,
.breakout\:breakout-content {
  display: grid;
  grid-template-columns: subgrid;
}

.main-grid
  > :not(
    .breakout,
    .breakout\:breakout-content,
    .full-width,
    .full-width\:breakout-content,
    .full-width\:full-content
  ),
.full-width > *,
.breakout > * {
  grid-column: content;
}

.full-width,
.full-width\:breakout-content,
.full-width\:full-content,
.full-width\:full-content > * {
  grid-column: max;
}

.breakout,
.breakout\:breakout-content,
.breakout\:breakout-content > *,
.full-width\:breakout-content > * {
  grid-column: breakout;
}

.grid-col,
.grid-col\:gap-1,
.grid-col\:gap-2,
.grid-col\:gap-3,
.grid-col\:gap-4,
.grid-col\:gap-5,
.grid-col\:gap-6 {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

.grid-col\:gap-1 {
  row-gap: var(--spacing-1);
}

.grid-col\:gap-2 {
  row-gap: var(--spacing-2);
}
.grid-col\:gap-3 {
  row-gap: var(--spacing-3);
}
.grid-col\:gap-4 {
  row-gap: var(--spacing-4);
}
.grid-col\:gap-5 {
  row-gap: var(--spacing-5);
}
.grid-col\:gap-6 {
  row-gap: var(--spacing-6);
}

/* Utilities */

.jc-center {
  justify-content: center;
}


/* === SOURCE: buttons.css === */
.button {
  /* Layout */
  display: flex;
  width: max-content;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;

  gap: var(--_gap);
  padding-inline: calc(var(--_padding-inline) - var(--_border-width));
  padding-block: calc(var(--_padding-block) - var(--_border-width));
  border-radius: var(--_border-radius);
  border-width: var(--_border-width);
  border-style: solid;
  border-color: var(--_border-color);
  background: var(--_background);

  /* Typography */
  color: var(--_color);
  text-align: center;
  font-family: var(--font-sans);
  font-style: normal;
}

.button:not(:has(.icon:only-child)) .icon {
  color: var(--_icon-color);
}

/** Interactions **/

.button {
  transform-origin: center;
  transition: background var(--ts-normal), color var(--ts-normal),
  border var(--ts-normal), transform var(--ts-normal);
  cursor: pointer;
}

.button .icon {
  transition: color var(--ts-normal);
}

@media (hover: hover) {
  .button:hover {
    border-color: var(--_border-color--hover);
    background: var(--_background--hover);
    color: var(--_color--hover);
  }

  .button:not(:disabled, :has(.icon:only-child)):hover .icon {
    color: var(--_icon-color--hover);
  }
}

.button:active {
  border-color: var(--_border-color--active);
  background: var(--_background--active);
  color: var(--_color--active);
  transition: background var(--ts-quick), color var(--ts-quick),
  border var(--ts-quick), transform var(--ts-quick);
}

.button:active .icon {
  transition: color var(--ts-quick);
}

.button:not(:disabled, :has(.icon:only-child)):active .icon {
  color: var(--_icon-color--active);
}

/** Accessibility **/

.button:focus-visible {
  outline-color: var(--_outline-color);
  outline-width: var(--_outline-width);
  outline-offset: var(--_outline-offset);
  outline-style: solid;

  border-color: var(--_border-color--hover);
  background: var(--_background--hover);
  color: var(--_color--hover);

  /* outline: 2px solid var(--clr-forAccent-bronze--subtle); */
  z-index: 1;
}

.button:not(:disabled, :has(.icon:only-child)):focus-visible .icon {
  color: var(--_icon-color--hover);
}

/** Style variants **/

.button {
  --_background: var(--clr-surface-04);
  --_border-color: var(--clr-forSurface-04);
  --_color: var(--clr-onSurface-04--bold);
  --_icon-color: var(--clr-onSurface-04--subtle);

  --_background--hover: var(--clr-surface-contrast);
  --_border-color--hover: var(--clr-forSurface-contrast);
  --_color--hover: var(--clr-onSurface-contrast);
  --_icon-color--hover: var(--clr-onSurface-contrast);

  --_background--active: var(--clr-forSurface-contrast--subtle);
  --_border-color--active: var(--clr-forSurface-contrast--subtle);
  --_color--active: var(--clr-onSurface-contrast--subtle);
  --_icon-color--active: var(--clr-onSurface-contrast--subtle);

  --_outline-color: var(--clr-forAccent-bronze--subtle);
  --_outline-width: 2px;
  --_outline-offset: 2px;
}

.button.inverted {
  --_background: var(--clr-surface-contrast);
  --_border-color: var(--clr-forSurface-contrast);
  --_color: var(--clr-onSurface-contrast);
  --_icon-color: var(--clr-onSurface-contrast--subtle);

  --_background--hover: var(--clr-forSurface-contrast--strong);
  --_border-color--hover: var(--clr-forSurface-contrast--strong);
  --_color--hover: var(--clr-onSurface-contrast--strong);
  --_icon-color--hover: var(--clr-onSurface-contrast--strong);

  --_background--active: var(--clr-forSurface-contrast--subtle);
  --_border-color--active: var(--clr-forSurface-contrast--subtle);
  --_color--active: var(--clr-onSurface-contrast--subtle);
  --_icon-color--active: var(--clr-onSurface-contrast--subtle);
}

.button.active {
  --_background: var(--clr-surface-contrast);
  --_border-color: var(--clr-forSurface-contrast);
  --_color: var(--clr-onSurface-contrast);
  --_icon-color: var(--clr-onSurface-contrast--subtle);

  --_background--hover: var(--clr-forSurface-contrast--strong);
  --_border-color--hover: var(--clr-forSurface-contrast--strong);
  --_color--hover: var(--clr-onSurface-contrast--strong);
  --_icon-color--hover: var(--clr-onSurface-contrast--strong);

  --_background--active: var(--clr-forSurface-contrast--subtle);
  --_border-color--active: var(--clr-forSurface-contrast--subtle);
  --_color--active: var(--clr-onSurface-contrast--subtle);
  --_icon-color--active: var(--clr-onSurface-contrast--subtle);
}

.button.subtle {
  --_background: var(--clr-surface-03);
  --_border-color: var(--clr-forSurface-03);
  --_color: var(--clr-onSurface-03--subtle);
  --_icon-color: var(--clr-onSurface-03--subtle);

  --_background--hover: var(--clr-forSurface-03--strong);
  --_border-color--hover: var(--clr-forSurface-03--strong);
  --_color--hover: var(--clr-onSurface-03--strong);
  --_icon-color--hover: var(--clr-onSurface-03);

  --_background--active: var(--clr-forSurface-03--subtle);
  --_border-color--active: var(--clr-forSurface-03--subtle);
  --_color--active: var(--clr-onSurface-03--subtle);
  --_icon-color--active: var(--clr-onSurface-03--subtle);
}

.button.ghost {
  --_border-color: transparent;
  --_background: transparent;
  --_color: var(--clr-onSurface-01);
  --_icon-color: var(--clr-onSurface-01--subtle);

  --_background--hover: var(--clr-forSurface-03--strong);
  --_border-color--hover: var(--clr-forSurface-03--strong);
  --_color--hover: var(--clr-onSurface-03--strong);
  --_icon-color--hover: var(--clr-onSurface-03);

  --_background--active: var(--clr-forSurface-03--subtle);
  --_border-color--active: var(--clr-forSurface-03--subtle);
  --_color--active: var(--clr-onSurface-03--subtle);
  --_icon-color--active: var(--clr-onSurface-03--subtle);
}

.button.brand {
  --_border-color: var(--clr-forAccent-brand);
  --_background: var(--clr-accent-brand);
  --_color: var(--clr-onAccent-brand);
  --_icon-color: var(--clr-onAccent-brand);

  --_background--hover: var(--clr-accent-brand--strong);
  --_border-color--hover: var(--clr-forAccent-brand--strong);
  --_color--hover: var(--clr-onAccent-brand--strong);
  --_icon-color--hover: var(--clr-onAccent-brand--strong);

  --_background--active: var(--clr-accent-brand--subtle);
  --_border-color--active: var(--clr-forAccent-brand--subtle);
  --_color--active: var(--clr-onAccent-brand--subtle);
  --_icon-color--active: var(--clr-onAccent-brand--subtle);
}

.button.bronze {
  --_background: var(--clr-accent-bronze);
  --_border-color: var(--clr-forAccent-bronze);
  --_color: var(--clr-onAccent-bronze);
  --_icon-color: var(--clr-onAccent-bronze);

  --_background--hover: var(--clr-accent-bronze--strong);
  --_border-color--hover: var(--clr-forAccent-bronze--strong);
  --_color--hover: var(--clr-onAccent-bronze--strong);
  --_icon-color--hover: var(--clr-onAccent-bronze--strong);

  --_background--active: var(--clr-accent-bronze--subtle);
  --_border-color--active: var(--clr-forAccent-bronze--subtle);
  --_color--active: var(--clr-onAccent-bronze--subtle);
  --_icon-color--active: var(--clr-onAccent-bronze--subtle);

  --_outline-color: var(--clr-forAccent-brand--subtle);
}

/** Size variants **/

@media (hover: hover) {
  .button.small {
    --_gap: var(--spacing-1);
    --_padding-inline: var(--spacing-3);
    --_padding-block: 0.375rem;
    border-radius: var(--radius-2, 0.125rem);
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.25rem;
    letter-spacing: 0.02188rem;
  }
}

.button {
  --_gap: var(--spacing-1);
  --_border-width: 1px;
  --_padding-inline: var(--spacing-5);
  --_padding-block: 0.625rem;
  border-radius: var(--radius-2, 0.125rem);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.25rem; /* 125% */
}

.button .icon {
  width: 1.25rem;
  height: 1.25rem;
}

.button.large {
  --_gap: var(--spacing-2);
  border-radius: var(--radius-2, 0.125rem);
  --_padding-inline: var(--spacing-6);
  --_padding-block: var(--spacing-3);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.5rem; /* 150% */
}

.button.large .icon {
  width: 1.5rem;
  height: 1.5rem;
}

.button.xlarge {
  --_gap: var(--spacing-2);
  border-radius: var(--radius-3, 0.25rem);
  --_padding-inline: var(--spacing-7);
  --_padding-block: var(--spacing-4);
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.5rem; /* 120% */
}

.button.xlarge .icon {
  width: 1.5rem;
  height: 1.5rem;
}

.button:has(.icon:only-child) {
  --_padding-inline: var(--_padding-block);
}

.button:has(.icon):has(span) {
  --_gap: calc(var(--_padding-inline) - var(--_padding-block));
}

.button:not(.full):has(.icon ~ span) {
  padding-inline-start: calc(var(--_padding-inline) - var(--_padding-block));
}

.button:not(.full):has(span ~ .icon) {
  padding-inline-end: calc(var(--_padding-inline) - var(--_padding-block));
}

.button.full {
  width: 100%;
}

/** Disabled **/

.button:disabled,
.button:disabled:hover,
.button:disabled:focus-visible,
.button:disabled:active {
  cursor: not-allowed;
  background: var(--clr-surface-disabled);
  border-color: var(--clr-forSurface-disabled);
  color: var(--clr-onSurface-disabled);
}

.button:disabled .icon,
.button:disabled:hover .icon,
.button:disabled:focus-visible .icon,
.button:disabled:active .icon {
  --_icon-color: var(--clr-onSurface-disabled);
}


/* === SOURCE: links.css === */
.link {
  border: none;
  background: none;
  cursor: pointer;
  color: var(--clr-onSurface-02);
  text-decoration: none;
  transition: color 300ms ease-out;
}

.link-light {
  border: none;
  background: none;
  cursor: pointer;
  color: var(--clr-brand-600);
  text-decoration: none;
  transition: color 300ms ease-out, text-decoration 300ms ease-out;
}


.link:focus-visible {
  outline: 2px solid var(--clr-forAccent-bronze--subtle);
  outline-offset: 2px;
  z-index: 1;
}

.link-light:focus-visible {
  outline: 2px solid var(--clr-bronze-800);
  outline-offset: 2px;
  z-index: 1;
}


@media (hover) {
  .link:hover {
    color: var(--clr-onSurface-02--strong);
  }

  .link-light:hover {
    color: var(--clr-brand-700);
    text-decoration: underline;
  }
}

.link-brand {
  border: none;
  background: none;
  cursor: pointer;
  text-decoration: none;
  color: var(--clr-onSurface-brand);
  transition: color 300ms ease-out;
}

.link-brand:focus-visible {
  outline: 2px solid var(--clr-forAccent-bronze--subtle);
  outline-offset: 2px;
  z-index: 1;
}

@media (hover) {
  .link-brand:hover {
    color: var(--clr-onSurface-brand--strong);
  }
}


/* === SOURCE: inputs.css === */
/* Fields */

/*! NEW  */

.text-field, .h-text-field,
.select-field,
.dob-field {
  position: relative;
  display: grid;
  flex: 1;

  grid-template-rows:
    [label-start] min-content [label-end input-start]
    min-content [input-end message-start]
    min-content [message-end];
  gap: var(--spacing-1);
}

@media (width >= 640px) {

  .h-text-field {

    grid-template-columns: [label-start message-start] 1fr [label-end input-start] 1fr [input-end message-end];
    grid-template-rows:
          [label input-start] min-content
          [input-end message-start] min-content [message-end];
  }
}

/*todo: rework*/

.text-field.no-message,
.select-field.no-message,
.dob-field.no-message {

  grid-template-rows:
    [label-start] var(--size-11) [label-end] var(--spacing-1)
    [input-start] var(--size-17) [input-end];

}

.text-field .label,
.select-field .label,
.dob-field .label {
  grid-row: label;
  margin-left: var(--spacing-1);
}

.text-field .input,
.select-field .input,
.dob-field .input {
  grid-row: input;
}

.text-field .message,
.select-field .message,
.dob-field .message {
  grid-row: message;
}

.select-field select {
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  width: 100%;
  height: var(--size-17);
}

.select-field select > option {
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.select-field .icon {
  position: absolute;
  top: calc(var(--size-11) + var(--spacing-2) + var(--spacing-4));
  right: var(--spacing-4);
  pointer-events: none;
}

.select-field .icon svg path {
  fill: var(--clr-base-400);
}

.dob-field input {
  cursor: pointer;
}

.checkbox-field {
  display: grid;
  grid-template-rows:
    [input-start label-start] auto [input-end label-end] var(--spacing-2)
    [message-start] auto [message-end];
  padding-block: var(--spacing-2, 0.5rem);
  grid-template-columns:
    [input-start] min-content [input-end] var(--spacing-2)
    [label-start message-start] auto [label-end message-end];
}

.checkbox-field.center {
  justify-content: center;
}

.checkbox-field .input {
  grid-row: input;
  grid-column: input;
}

.checkbox-field .label {
  grid-row: label;
  grid-column: label;
  font-weight: 500;
}

.checkbox-field .message {
  grid-row: message;
  grid-column: message;
}

.checkbox-field input[type='checkbox'] {
  position: relative;
  flex-shrink: 0;
  width: var(--size-11);
  height: var(--size-11);
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  border-radius: var(--radius-3);
  border: 2px solid var(--clr-base-600--60);
  background: var(--clr-base-800);
  cursor: pointer;
  transition: border 300ms ease-out, background 300ms ease-out;
}

.checkbox-field input[type='checkbox']:hover {
  border-color: var(--clr-base-300);
  background: var(--clr-base-900);
}

.checkbox-field input[type='checkbox']:checked {
  border-color: var(--clr-base-500);
}

.checkbox-field input[type='checkbox']:checked::after {
  content: '';
  position: absolute;
  border-radius: var(--radius-2, 0.125rem);
  top: 3px;
  left: 3px;
  height: var(--size-7);
  width: var(--size-7);
  background: var(--clr-onSurface-brand);
}

.checkbox-field input[type='checkbox']:focus-visible {
  outline: 2px solid var(--clr-base-500--40);
}

.label {
  color: var(--clr-onSurface-01);
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.5rem; /* 133.333% */
}

.message {
  font-size: 0.8rem;
  padding: var(--spacing-1);
  color: tomato;
}

.message.error {
  color: tomato;
}

.message.warning {
  color: rgb(255, 212, 71);
}

.message.success {
  color: greenyellow;
}

.input-wrapper {
  display: flex;
  padding: var(--spacing-1);
  border: 2px solid var(--clr-base-600--60);
  background: var(--clr-base-800);
  border-radius: var(--radius-4, 0.25rem);
  gap: var(--spacing-1, 0.25rem);
}

.input {
  display: flex;
  height: var(--size-17, 3.5rem);
  align-items: center;
  gap: var(--spacing-1, 0.25rem);
  border-radius: var(--radius-3, 0.25rem);

  transition: border 300ms ease-out, background 300ms ease-out;
  padding: 0rem var(--spacing-4, 1rem);
  color: var(--clr-base-200);
  font-size: 1.125rem;
  font-weight: 500;
  line-height: 1.5rem;
  caret-color: var(--clr-onSurface-brand);
  border: none;
  background: transparent;
}

.input:not(.transparent) {
  border: 2px solid var(--clr-base-600--60);
  background: var(--clr-base-800);
}

.input::placeholder,
.input::-moz-placeholder,
.input::-ms-input-placeholder {
  color: var(--clr-onSurface-01--subtle);
}

.input:not(.transparent):hover {
  border: 2px solid var(--clr-base-600);
  background: var(--clr-base-900);
}

.input:not(.transparent):focus {
  border: 2px solid var(--clr-base-300);
  background: var(--clr-base-900);
}

.input:focus-visible {
  outline: 3px solid var(--clr-base-500--40);
}

.input.transparent:focus-visible {
  outline: 3px solid var(--clr-onSurface-brand);
}

.input:disabled {
  color: var(--clr-onSurface-disabled);
}

.input:not(.transparent):disabled {
  border: 1px solid var(--clr-forSurface-disabled);
  background: var(--clr-surface-disabled);
}


/* === SOURCE: dialog.css === */
.dialog {
  width: 90vw;
  max-width: 90ch;
  height: auto;
  margin: auto;
  margin-block-start: 15vh;
  margin-block-end: 15vh;
  padding: 0;
  border: none;
  background: transparent;
  overflow: hidden;
}

@media (width <= 480px) {
  .dialog {
    margin-block-start: 10vh;
    margin-block-end: 10vh;
  }
}

.dialog::backdrop {
  background: var(--clr-base-900--50);
}

.dialog__header {
  display: flex;
  padding: var(--spacing-2) var(--spacing-2) var(--spacing-2) var(--spacing-4);
  align-items: center;
  align-self: stretch;
  justify-content: space-between;

  border-radius: var(--radius-4) var(--radius-4) 0 0;
  background: var(--clr-surface-01);
  border-color: var(--clr-base-600);
  border-style: solid;
  border-width: 1px 1px 0 1px;
}

.dialog__title {
  color: var(--clr-onSurface-01);
  font-size: 1.125rem;
  font-style: normal;
  font-weight: 600;
  line-height: 1.5rem;
  text-transform: uppercase;
}

.dialog__content {
  display: flex;
  padding: var(--spacing-6);
  flex-direction: column;
  align-items: flex-start;
  align-self: stretch;
  overflow: auto;
  max-height: calc(100% - var(--spacing-10));
  background: var(--clr-base-800--95);
  border-color: var(--clr-base-600);
  border-style: solid;
  border-width: 0 1px 1px 1px;
  border-radius: 0 0 var(--radius-4) var(--radius-4);
}

.dialog__content .content__heading {
  color: var(--clr-bronze-200);
  font-size: 1.125rem;
  font-style: normal;
  font-weight: 600;
  line-height: 1.5rem; /* 133.333% */
  letter-spacing: 0.05625rem;
  text-transform: uppercase;
}

.dialog__content .content__heading:not(:first-child) {
  margin-top: var(--spacing-4);
}

.dialog__content p {
  font-size: 1rem;
  font-style: normal;
  font-weight: 500;
  line-height: 1.5em;
  color: var(--clr-onSurface-03);
}

.dialog__content p {
  margin-top: var(--spacing-2);
}

.dialog__content strong {
  color: var(--clr-onSurface-brand);
}

.dialog__content table {
  width: 100%;
  border-collapse: collapse;
  margin-top: var(--spacing-4);
}

.dialog__content th:first-child {
  border-top-left-radius: var(--radius-2);
}

.dialog__content th,
.dialog__content td {
  padding: var(--spacing-2);
  border: 1px solid var(--clr-base-600--50);
  color: var(--clr-onSurface-01--bold);
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1rem;
  text-align: center;
}

.dialog__content th > img {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.dialog__content th {
  background-color: var(--clr-base-900);
  color: var(--clr-onSurface-01);
}

.dialog__content td {
  background: var(--clr-base-800);
}


/* === SOURCE: buttons_download.css === */
.button-download,
.button-download-text {
  /* Local Variables */

  --_min-size: var(--size-14);
  --_ideal-size: var(--size-19);
  --_max-size: 100%;

  --_bg-color: var(--clr-surface-03);
  --_border-color: var(--clr-forSurface-03);
  --_text-color: var(--clr-onSurface-03--bold);

  --_windows: #2D74D7;
  --_windows-accent: #F4F9FF;
  --_windows-fade: #194685;
  --_apple: #FFFFFF;
  --_apple-accent: #000000;
  --_apple-fade: #CCCCCC;
  --_google: #FF3A44;
  --_google-accent: #FFF;
  --_google-fade: #A00008;
  --_android: #7CDB5A;
  --_android-accent: #FFF;
  --_android-fade: #48AA25;
  --_browser: #38BDF8;
  --_browser-accent: #FFF;
  --_browser-fade: #0369A1;

  /* Default Sizing */

  min-width: 0;
  height: var(--size-19);
  min-width: min-max(var(--_min-size), var(--_ideal-size), var(--_max-size));
  padding: var(--spacing-4, 1rem);
  flex: 1;

  /* Default Style */

  border-radius: var(--radius-2);
  border-width: 1px;
  border-style: solid;
  border-color: var(--_border-color);
  background-color: var(--_bg-color);

  /* Interactions */

  transition: background var(--ts-slow), border var(--ts-slow);
  cursor: pointer;
}

@media (width >= 80rem) {
  .button-download,
  .button-download-text {
    --_min-size: var(--size-19);
  }
}

.button-download,
.button-download-text .icon {
  transition: color var(--ts-normal), transform var(--ts-quick);
}

@media (hover) {
  .button-download:hover .icon,
  .button-download-text:hover .icon {
    transform: scale3d(1.25, 1.25, 1.25);
    transition: color var(--ts-normal), transform var(--ts-quick);
  }
}

.button-download {
  display: grid;
  place-items: center;
}

.button-download-text {
  --_bg-color: var(--clr-base-900);
  display: flex;
  padding-block: var(--spacing-4, 1rem);
  padding-inline: var(--spacing-6);
  justify-content: space-between;
  align-items: center;
  gap: var(--spacing-4, 1rem);
  align-self: stretch;

  border-radius: var(--radius-2, 0.125rem);
  background-color: var(--_bg-color);

  color: var(--_text-color);
  text-shadow: 0px 2px 2px rgba(0, 0, 0, 0.4);
  font-family: var(--font-sans);
  font-size: 1.125rem;
  font-style: normal;
  font-weight: 600;
  line-height: 1.5rem; /* 133.333% */
  text-transform: uppercase;

  width: 240px;
}

.button-download span,
.button-download-text span {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  text-align: center;
}

.button-download .icon,
.button-download-text .icon {
  color: var(--_text-color);
  flex-shrink: 0;
}

/** Platforms **/

/* Windows  */
.button-download.windows .icon,
.button-download-text.windows .icon {
  --_text-color: var(--_windows);
}

@media (hover) {
  .button-download.windows:hover,
  .button-download-text.windows:hover {
    --_bg-color: var(--_windows-fade);
    --_border-color: var(--_windows);
    --_text-color: var(--_windows-accent);
  }

  .button-download.windows:hover .icon,
  .button-download-text.windows:hover .icon {
    --_text-color: var(--_windows-accent);
  }
}

/* Android  */
.button-download.android .icon,
.button-download-text.android .icon {
  --_text-color: var(--_android);
}

@media (hover) {
  .button-download.android:hover,
  .button-download-text.android:hover {
    --_bg-color: var(--_android-fade);
    --_border-color: var(--_android);
    --_text-color: var(--_android-accent);
  }

  .button-download.android:hover .icon,
  .button-download-text.android:hover .icon {
    --_text-color: var(--_android-accent);
  }
}

/* apple  */
.button-download.apple .icon,
.button-download-text.apple .icon {
  --_text-color: var(--_apple);
}

@media (hover) {
  .button-download.apple:hover,
  .button-download-text.apple:hover {
    --_bg-color: var(--_apple-fade);
    --_border-color: var(--_apple);
    --_text-color: var(--_apple-accent);
  }

  .button-download.apple:hover .icon,
  .button-download-text.apple:hover .icon {
    --_text-color: var(--_apple-accent);
  }
}

/* google  */
.button-download.google .icon,
.button-download-text.google .icon {
  --_text-color: var(--_google);
}

@media (hover) {
  .button-download.google:hover,
  .button-download-text.google:hover {
    --_bg-color: var(--_google-fade);
    --_border-color: var(--_google);
    --_text-color: var(--_google-accent);
  }

  .button-download.google:hover .icon,
  .button-download-text.google:hover .icon {
    --_text-color: var(--_google-accent);
  }
}

/* Browser  */
.button-download.browser {
  position: relative;
}

.button-download.browser .icon,
.button-download-text.browser .icon {
  --_text-color: #FFFFFF;
}

@media (hover) {
  .button-download.browser:hover,
  .button-download-text.browser:hover {
    --_bg-color: var(--_browser-fade);
    --_border-color: var(--_browser);
    --_text-color: var(--_browser-accent);
  }

  .button-download.browser:hover .icon,
  .button-download-text.browser:hover .icon {
    --_text-color: var(--_browser-accent);
  }
}

/* Badge NEW */
.badge-new {
  position: absolute;
  top: -20px;
  z-index: 1;
  padding: 3px;
  border-radius: var(--radius-2, 4px);
  background: #FF3A44;
  color: #FFF;
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  line-height: 1.25;
  pointer-events: none;
  animation: badge-pulse 2s ease-in-out infinite;
}

@keyframes badge-pulse {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255, 58, 68, 0.6); }
  50% { transform: scale(1.1); box-shadow: 0 0 8px 2px rgba(255, 58, 68, 0.3); }
}


/* === SOURCE: buttons_social.css === */
.social-button {
  --_facebook: #1877f2;
  --_facebook-fade: #1877f2;
  --_instagram: #c13584;
  --_instagram-fade: #c13584;
  --_youtube: #ff0000;
  --_youtube-fade: #ff0000;
  --_discord: #5662f6;
  --_discord-fade: #5662f6;

  --_bg-color: var(--clr-surface-04);
  --_text-color: var(--clr-onSurface-04--strong);

  /* Layout */
  display: flex;
  width: var(--size-18, 4rem);
  height: var(--size-18, 4rem);
  min-width: var(--size-18, 4rem);
  padding: var(--spacing-2, 0.5rem);
  justify-content: center;
  align-items: center;
  flex-shrink: 0;

  /* Style */
  border-radius: var(--radius-3, 0.25rem);
  background: var(--_bg-color);

  /* Interaction  */
  cursor: pointer;
  transition: background 500ms ease-out, border 500ms ease-out;
}

.social-button path {
  /* Style */
  fill: var(--_text-color);

  /* Interaction */
  transition: fill var(--ts-normal), stroke var(--ts-quick);
}

.social-button svg {
  transition: transform var(--ts-quick);
}

@media (hover) {
  .social-button path:hover {
    fill: var(--clr-white);
  }

  .social-button.facebook:hover {
    --_bg-color: var(--_facebook);
  }
  .social-button.youtube:hover {
    --_bg-color: var(--_youtube);
  }
  .social-button.instagram:hover {
    --_bg-color: var(--_instagram);
  }
  .social-button.discord:hover {
    --_bg-color: var(--_discord);
  }
}


/* === SOURCE: main.css === */









:root {
  --icon-fill: currentColor;
  --icon-fill-accent: var(--clr-brand-500);
  --icon-stroke: currentColor;
}

body {
  font-family: var(--font-sans);
  background-color: var(--clr-background-body);
}

.icon {
  width: 1.5rem;
  height: 1.5rem;
}

svg,
path {
  transition: color 300ms ease-out, fill 300ms ease-out, stroke 300ms ease-out;
}

.default-bg {
  background-image: url('../images/misc_bg.jpg');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}


.bbg::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
  height: 800px;

  background-size: cover;
  background-position-y: 0;
  background-position-x: center;
  background-repeat: no-repeat;

  -webkit-mask-image: -webkit-linear-gradient(
          to bottom,
          rgba(0, 0, 0, 0),
          rgba(0, 0, 0, 1),
          rgba(0, 0, 0, 0)
  );
  mask-image: linear-gradient(
          to bottom,
          rgba(0, 0, 0, 0),
          rgba(0, 0, 0, 1),
          rgba(0, 0, 0, 0)
  );
}

.has-tooltip {
  position: relative;
}

/* .has-tooltip > .tooltip-text {
  visibility: hidden;
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;

  position: absolute;
  z-index: 1;
  top: 100%;
  left: 50%;
}
.has-tooltip:hover > .tooltip-text {
  visibility: visible;
}

*/

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

.no-scroll {
  overflow: hidden;
}

.hidden {
  display: none !important;
}

.loading-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--clr-background-body);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  overflow: hidden; /* Adicionado para desativar o scroll sem mexer no body */
}

.loading-bar-container {
  width: 50%; /* Define o tamanho fixo desejado */
  height: 5px;
  background: var(--clr-background-body); /* Ajuste conforme necessário */
  overflow: hidden; /* Garante que a barra de carregamento não ultrapasse os limites */
  position: relative; /* Necessário para o posicionamento da barra de carregamento */
}

.loading-bar {
  height: 100%;
  background: var(--clr-accent-brand);
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  animation: load 1s infinite ease-in-out; /* Ajusta a duração e suaviza a animação */
}

@keyframes load {
  0%, 100% {
    width: 25%;
  }
  50% {
    width: 100%;
  }
}


.text-center {
  text-align: center;
}

.responsive-table {
  width: 100%;
  container-type: inline-size;
  overflow-x: auto;
}

.default-table {
  --_row-radius: var(--radius-2);

  max-width: 100%;
  width: 100%;
  border-collapse: collapse;

  th,
  td {
    padding: var(--spacing-3);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1rem;
    text-align: left;
    border: 1px solid var(--clr-base-600--30);
  }

  th {
    background-color: var(--clr-surface-01);
    color: var(--clr-onSurface-01--subtle);
  }

  td {
    background: var(--clr-surface-02);
    color: var(--clr-onSurface-02);
  }

  tr:first-child > th:first-child {
    border-top-left-radius: var(--_row-radius);
  }

  tr:first-child > th:last-child {
    border-top-right-radius: var(--_row-radius);
  }

  tr:last-child > td:first-child {
    border-bottom-left-radius: var(--_row-radius);
  }

  tr:last-child > td:last-child {
    border-bottom-right-radius: var(--_row-radius);
  }
}

/* Container fixo */
#lang-widget {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 1050;
  font-family: sans-serif;
}

/* Botão principal */
#lang-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 10px;
  background: rgba(0, 0, 0, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #fff;
  border-radius: 0px;
  cursor: pointer;
  transition: background .2s, border-color .2s;
}
#lang-toggle:hover {
  background: rgba(255,255,255,0.1);
  border-color: rgba(255,255,255,0.4);
}

/* Caret (setinha) */
#lang-toggle .caret {
  font-size: 0.7em;
  color: #ccc;
  transition: transform .2s;
}

/* Dropdown fechado por padrão */
#lang-list {
  display: none;
  list-style: none;
  padding: 5px;
  background: rgba(0,0,0,0.8);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 0px;
  overflow: hidden;
  min-width: 150px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.5);
}

/* Itens do dropdown */
#lang-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 8px;
  color: #ddd;
  cursor: pointer;
  transition: background .15s, color .15s;
}
#lang-list li:hover {
  background: rgba(255,255,255,0.1);
  color: #fff;
}

/* Bandeiras */
#lang-current-flag,
#lang-list li img {
  width: 30px;
  height: auto;
  display: block;
}

/* Quando estiver aberto (.open):
   - esconde completamente o botão (incluindo a seta)
   - mostra o dropdown */
#lang-widget.open #lang-toggle {
  display: none !important;
}
#lang-widget.open #lang-list {
  display: block !important;
}
/* Gira a seta se quiser manter o toggle visível (opcional) */
#lang-widget.open #lang-toggle .caret {
  transform: rotate(180deg) !important;
}