@charset "UTF-8";html {
  color-scheme: dark;
}

html:has(body._themeLight_bhur2_5),
html:has(body._themePastelLight_bhur2_6) {
  color-scheme: light;
}

:root {
  --clrPrimary: #F4F4F5;
  --clrPrimary30: rgba(244, 244, 245, 0.3);
  --clrSecondary: #FEFEFE;
  --clrTertiary: #E4E4E7;
  --clrPrimaryReverse: #101418;
  --clrSecondaryReverse: #0A0F14;
  --clrTertiaryReverse: #212327;
  --clrTextPrimary: #101418;
  --clrTextSecondary: #2E3337;
  --clrTextTertiary: #7C7C7C;
  --clrTextPrimaryReverse: #F4F4F5;
  --clrTextSecondaryReverse: #CDCDCD;
  --clrTextTertiaryReverse: #8A8A8A;
  --clrError-100: #641f1f;
  --clrError-50: #c84d4d;
  --clrSuccess-100: #2d692d;
  --clrSuccess-50: #3EA03E;
  --clrSuccessOnTint: #0d260d;
  --clrErrorOnTint: #2e0a0a;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgb(50, 126, 75, 0.1) 30%,
          rgb(94, 178, 122, 0.36) 60%,
          rgb(144, 215, 168) 100%);
  --clrNavBackground: rgba(244, 244, 245, 0.15);
  --clrNavItemActive: rgba(211, 211, 211, 0.4);
  --clrNavItemHover: rgba(0, 0, 0, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #F4F4F5;
  --clrGlassBackground: rgba(255, 255, 255, 0.5);
  --clrGlassBackgroundStrong: rgba(255, 255, 255, 0.3);
  --clrGlassBorder: rgba(0, 0, 0, 0.1);
  --snackbarDefaultBg: #F1ECE9;
  --snackbarDefaultText: #5D605C;
  --snackbarDefaultBorder: #5D605C;
  --snackbarDefaultIcon: #5D605C;
  --snackbarSuccessBg: #E0F1D9;
  --snackbarSuccessText: #358935;
  --snackbarSuccessBorder: #358935;
  --snackbarSuccessIcon: #358935;
  --snackbarErrorBg: #F9E1DC;
  --snackbarErrorText: #C80D12;
  --snackbarErrorBorder: #C80D12;
  --snackbarErrorIcon: #C80D12;
}

._themeLight_bhur2_5 {
  --clrPrimary: #F4F4F5;
  --clrPrimary30: rgba(244, 244, 245, 0.3);
  --clrSecondary: #FEFEFE;
  --clrTertiary: #E4E4E7;
  --clrPrimaryReverse: #101418;
  --clrSecondaryReverse: #0A0F14;
  --clrTertiaryReverse: #212327;
  --clrTextPrimary: #101418;
  --clrTextSecondary: #2E3337;
  --clrTextTertiary: #7C7C7C;
  --clrTextPrimaryReverse: #F4F4F5;
  --clrTextSecondaryReverse: #CDCDCD;
  --clrTextTertiaryReverse: #8A8A8A;
  --clrError-100: #c03b3b;
  --clrError-50: #f6c5c5;
  --clrSuccess-100: #30d330;
  --clrSuccess-50: #bbffbb;
  --clrSuccessOnTint: #1f4f1f;
  --clrErrorOnTint: #7a1f1f;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgb(50, 126, 75, 0.1) 30%,
          rgb(94, 178, 122, 0.36) 60%,
          rgb(144, 215, 168) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(175, 49, 49, 0.1) 30%,
          rgba(238, 70, 70, 0.36) 60%,
          rgb(255, 173, 173) 100%);
  --clrNavBackground: rgba(244, 244, 245, 0.15);
  --clrNavItemActive: rgba(211, 211, 211, 0.4);
  --clrNavItemHover: rgba(0, 0, 0, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0000c1;
  --clrGlassBackground: rgba(255, 255, 255, 0.5);
  --clrGlassBackgroundStrong: rgba(255, 255, 255, 0.5);
  --clrGlassBorder: rgba(0, 0, 0, 0.1);
  --snackbarDefaultBg: #F1ECE9;
  --snackbarDefaultText: #5D605C;
  --snackbarDefaultBorder: #5D605C;
  --snackbarDefaultIcon: #5D605C;
  --snackbarSuccessBg: #E0F1D9;
  --snackbarSuccessText: #358935;
  --snackbarSuccessBorder: #358935;
  --snackbarSuccessIcon: #358935;
  --snackbarErrorBg: #F9E1DC;
  --snackbarErrorText: #C80D12;
  --snackbarErrorBorder: #C80D12;
  --snackbarErrorIcon: #C80D12;
}

._themeDark_bhur2_131 {
  --clrPrimary: #0F1418;
  --clrPrimary30: rgba(15, 20, 25, 0.3);
  --clrSecondary: #0A0F14;
  --clrTertiary: #212327;
  --clrPrimaryReverse: #F4F4F5;
  --clrSecondaryReverse: #FEFEFE;
  --clrTertiaryReverse: #E4E4E7;
  --clrTextPrimary: #F4F4F5;
  --clrTextSecondary: #CDCDCD;
  --clrTextTertiary: #8A8A8A;
  --clrTextPrimaryReverse: #101418;
  --clrTextSecondaryReverse: #2E3337;
  --clrTextTertiaryReverse: #7C7C7C;
  --clrError-100: #c84d4d;
  --clrError-50: #641f1f;
  --clrSuccess-100: #3EA03E;
  --clrSuccess-50: #2d692d;
  --clrSuccessOnTint: #d6ffd6;
  --clrErrorOnTint: #ffd6d6;
  --clrWarning-100: #E88434;
  --clrWarning-50: #C49168;
  --clrAccent-100: #FFFFFF;
  --clrAccent-80: rgba(255, 255, 255, 0.8);
  --clrAccent-60: rgba(255, 255, 255, 0.6);
  --clrAccent-50: rgba(255, 255, 255, 0.5);
  --clrAccent-40: rgba(255, 255, 255, 0.4);
  --clrAccent-30: rgba(255, 255, 255, 0.3);
  --clrAccent-20: rgba(255, 255, 255, 0.2);
  --clrAccent-10: rgba(255, 255, 255, 0.1);
  --clrGradient: linear-gradient(90deg, #262a2e 10%, var(--clrPrimary) 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(50, 126, 75, 0.15) 30%,
          rgba(50, 126, 75, 0.3) 60%,
          rgba(50, 126, 75, 0.5) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(167, 44, 44, 0) 0%,
          rgba(167, 44, 44, 0.15) 30%,
          rgba(167, 44, 44, 0.3) 60%,
          rgba(167, 44, 44, 0.5) 100%);
  --clrNavBackground: rgba(0, 0, 0, 0.15);
  --clrNavItemActive: rgba(24, 24, 24, 0.49);
  --clrNavItemHover: rgba(255, 255, 255, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0F1418;
  --clrGlassBackground: rgba(15, 20, 24, 0.5);
  --clrGlassBackgroundStrong: rgba(15, 20, 24, 0.6);
  --clrGlassBorder: rgba(255, 255, 255, 0.1);
  --snackbarDefaultBg: #414141;
  --snackbarDefaultText: #BABABA;
  --snackbarDefaultBorder: #BABABA;
  --snackbarDefaultIcon: #BABABA;
  --snackbarSuccessBg: #145E18;
  --snackbarSuccessText: #8FE094;
  --snackbarSuccessBorder: #8FE094;
  --snackbarSuccessIcon: #8FE094;
  --snackbarErrorBg: #910C09;
  --snackbarErrorText: #FE9E9D;
  --snackbarErrorBorder: #FE9E9D;
  --snackbarErrorIcon: #FE9E9D;
}

/* 

Note: 
    If you want something done quick, ask AI to buuild your color themes.
    If you want to do it right and tidy though, do it manually. 

    - Theo

*/
:root {
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --font-accent: "Jaro", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}

html,
body {
  font-family: var(--font-sans);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

._wrap_bhur2_216 {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 4000;
  padding: 12px;
  padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  pointer-events: none;
}

._card_bhur2_227 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  padding: 16px 18px;
  background: var(--clrSecondary);
  border: 1px solid var(--clrAccent-20);
  border-radius: 6px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
  pointer-events: auto;
}

._copy_bhur2_245 {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 4px;
  flex: 1 1 320px;
  min-width: 0;
}

._title_bhur2_255 {
  margin: 0;
  color: var(--clrTextPrimary);
  font-size: 0.95rem;
  font-weight: 800;
}

._body_bhur2_262 {
  margin: 0;
  color: var(--clrTextSecondary);
  font-size: 0.82rem;
  line-height: 1.45;
}

._note_bhur2_269 {
  margin: 0;
  color: var(--clrTextTertiary);
  font-size: 0.76rem;
}

._link_bhur2_275 {
  color: var(--clrTextPrimary);
  text-decoration: underline;
}

._actions_bhur2_280 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex: 0 0 auto;
}
@media (max-width: 560px) {
  ._actions_bhur2_280 {
    width: 100%;
  }
  ._actions_bhur2_280 ._btn_bhur2_292 {
    flex: 1 1 0;
  }
}

._btn_bhur2_292 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 38px;
  padding: 0 18px;
  background: transparent;
  border: 1px solid var(--clrAccent-30);
  border-radius: 999px;
  color: var(--clrTextPrimary);
  font-size: 0.85rem;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
._btn_bhur2_292:hover {
  background: var(--clrTertiary);
  border-color: var(--clrAccent-30);
}
._btn_bhur2_292:focus-visible {
  outline: 2px solid var(--clrTextPrimary);
  outline-offset: 2px;
}html {
  color-scheme: dark;
}

html:has(body._themeLight_1cii7_5),
html:has(body._themePastelLight_1cii7_6) {
  color-scheme: light;
}

:root {
  --clrPrimary: #F4F4F5;
  --clrPrimary30: rgba(244, 244, 245, 0.3);
  --clrSecondary: #FEFEFE;
  --clrTertiary: #E4E4E7;
  --clrPrimaryReverse: #101418;
  --clrSecondaryReverse: #0A0F14;
  --clrTertiaryReverse: #212327;
  --clrTextPrimary: #101418;
  --clrTextSecondary: #2E3337;
  --clrTextTertiary: #7C7C7C;
  --clrTextPrimaryReverse: #F4F4F5;
  --clrTextSecondaryReverse: #CDCDCD;
  --clrTextTertiaryReverse: #8A8A8A;
  --clrError-100: #641f1f;
  --clrError-50: #c84d4d;
  --clrSuccess-100: #2d692d;
  --clrSuccess-50: #3EA03E;
  --clrSuccessOnTint: #0d260d;
  --clrErrorOnTint: #2e0a0a;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgb(50, 126, 75, 0.1) 30%,
          rgb(94, 178, 122, 0.36) 60%,
          rgb(144, 215, 168) 100%);
  --clrNavBackground: rgba(244, 244, 245, 0.15);
  --clrNavItemActive: rgba(211, 211, 211, 0.4);
  --clrNavItemHover: rgba(0, 0, 0, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #F4F4F5;
  --clrGlassBackground: rgba(255, 255, 255, 0.5);
  --clrGlassBackgroundStrong: rgba(255, 255, 255, 0.3);
  --clrGlassBorder: rgba(0, 0, 0, 0.1);
  --snackbarDefaultBg: #F1ECE9;
  --snackbarDefaultText: #5D605C;
  --snackbarDefaultBorder: #5D605C;
  --snackbarDefaultIcon: #5D605C;
  --snackbarSuccessBg: #E0F1D9;
  --snackbarSuccessText: #358935;
  --snackbarSuccessBorder: #358935;
  --snackbarSuccessIcon: #358935;
  --snackbarErrorBg: #F9E1DC;
  --snackbarErrorText: #C80D12;
  --snackbarErrorBorder: #C80D12;
  --snackbarErrorIcon: #C80D12;
}

._themeLight_1cii7_5 {
  --clrPrimary: #F4F4F5;
  --clrPrimary30: rgba(244, 244, 245, 0.3);
  --clrSecondary: #FEFEFE;
  --clrTertiary: #E4E4E7;
  --clrPrimaryReverse: #101418;
  --clrSecondaryReverse: #0A0F14;
  --clrTertiaryReverse: #212327;
  --clrTextPrimary: #101418;
  --clrTextSecondary: #2E3337;
  --clrTextTertiary: #7C7C7C;
  --clrTextPrimaryReverse: #F4F4F5;
  --clrTextSecondaryReverse: #CDCDCD;
  --clrTextTertiaryReverse: #8A8A8A;
  --clrError-100: #c03b3b;
  --clrError-50: #f6c5c5;
  --clrSuccess-100: #30d330;
  --clrSuccess-50: #bbffbb;
  --clrSuccessOnTint: #1f4f1f;
  --clrErrorOnTint: #7a1f1f;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgb(50, 126, 75, 0.1) 30%,
          rgb(94, 178, 122, 0.36) 60%,
          rgb(144, 215, 168) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(175, 49, 49, 0.1) 30%,
          rgba(238, 70, 70, 0.36) 60%,
          rgb(255, 173, 173) 100%);
  --clrNavBackground: rgba(244, 244, 245, 0.15);
  --clrNavItemActive: rgba(211, 211, 211, 0.4);
  --clrNavItemHover: rgba(0, 0, 0, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0000c1;
  --clrGlassBackground: rgba(255, 255, 255, 0.5);
  --clrGlassBackgroundStrong: rgba(255, 255, 255, 0.5);
  --clrGlassBorder: rgba(0, 0, 0, 0.1);
  --snackbarDefaultBg: #F1ECE9;
  --snackbarDefaultText: #5D605C;
  --snackbarDefaultBorder: #5D605C;
  --snackbarDefaultIcon: #5D605C;
  --snackbarSuccessBg: #E0F1D9;
  --snackbarSuccessText: #358935;
  --snackbarSuccessBorder: #358935;
  --snackbarSuccessIcon: #358935;
  --snackbarErrorBg: #F9E1DC;
  --snackbarErrorText: #C80D12;
  --snackbarErrorBorder: #C80D12;
  --snackbarErrorIcon: #C80D12;
}

._themeDark_1cii7_131 {
  --clrPrimary: #0F1418;
  --clrPrimary30: rgba(15, 20, 25, 0.3);
  --clrSecondary: #0A0F14;
  --clrTertiary: #212327;
  --clrPrimaryReverse: #F4F4F5;
  --clrSecondaryReverse: #FEFEFE;
  --clrTertiaryReverse: #E4E4E7;
  --clrTextPrimary: #F4F4F5;
  --clrTextSecondary: #CDCDCD;
  --clrTextTertiary: #8A8A8A;
  --clrTextPrimaryReverse: #101418;
  --clrTextSecondaryReverse: #2E3337;
  --clrTextTertiaryReverse: #7C7C7C;
  --clrError-100: #c84d4d;
  --clrError-50: #641f1f;
  --clrSuccess-100: #3EA03E;
  --clrSuccess-50: #2d692d;
  --clrSuccessOnTint: #d6ffd6;
  --clrErrorOnTint: #ffd6d6;
  --clrWarning-100: #E88434;
  --clrWarning-50: #C49168;
  --clrAccent-100: #FFFFFF;
  --clrAccent-80: rgba(255, 255, 255, 0.8);
  --clrAccent-60: rgba(255, 255, 255, 0.6);
  --clrAccent-50: rgba(255, 255, 255, 0.5);
  --clrAccent-40: rgba(255, 255, 255, 0.4);
  --clrAccent-30: rgba(255, 255, 255, 0.3);
  --clrAccent-20: rgba(255, 255, 255, 0.2);
  --clrAccent-10: rgba(255, 255, 255, 0.1);
  --clrGradient: linear-gradient(90deg, #262a2e 10%, var(--clrPrimary) 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(50, 126, 75, 0.15) 30%,
          rgba(50, 126, 75, 0.3) 60%,
          rgba(50, 126, 75, 0.5) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(167, 44, 44, 0) 0%,
          rgba(167, 44, 44, 0.15) 30%,
          rgba(167, 44, 44, 0.3) 60%,
          rgba(167, 44, 44, 0.5) 100%);
  --clrNavBackground: rgba(0, 0, 0, 0.15);
  --clrNavItemActive: rgba(24, 24, 24, 0.49);
  --clrNavItemHover: rgba(255, 255, 255, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0F1418;
  --clrGlassBackground: rgba(15, 20, 24, 0.5);
  --clrGlassBackgroundStrong: rgba(15, 20, 24, 0.6);
  --clrGlassBorder: rgba(255, 255, 255, 0.1);
  --snackbarDefaultBg: #414141;
  --snackbarDefaultText: #BABABA;
  --snackbarDefaultBorder: #BABABA;
  --snackbarDefaultIcon: #BABABA;
  --snackbarSuccessBg: #145E18;
  --snackbarSuccessText: #8FE094;
  --snackbarSuccessBorder: #8FE094;
  --snackbarSuccessIcon: #8FE094;
  --snackbarErrorBg: #910C09;
  --snackbarErrorText: #FE9E9D;
  --snackbarErrorBorder: #FE9E9D;
  --snackbarErrorIcon: #FE9E9D;
}

/* 

Note: 
    If you want something done quick, ask AI to buuild your color themes.
    If you want to do it right and tidy though, do it manually. 

    - Theo

*/
:root {
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --font-accent: "Jaro", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}

html,
body {
  font-family: var(--font-sans);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

._snackbarContainer_1cii7_216 {
  position: fixed;
  bottom: 128px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2000;
  display: flex;
  flex-direction: column-reverse;
  gap: 12px;
  pointer-events: none;
}
@media (max-width: 768px) {
  ._snackbarContainer_1cii7_216 {
    width: 75%;
    bottom: 128px;
  }
}

._snackbar_1cii7_216 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 8px 16px;
  border-radius: 12px;
  border: 1px solid;
  backdrop-filter: blur(40px) saturate(180%);
  -webkit-backdrop-filter: blur(40px) saturate(180%);
  pointer-events: auto;
  animation: _slideInUp_1cii7_1 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
._snackbar_1cii7_216._exiting_1cii7_247 {
  animation: _slideOutDown_1cii7_1 0.2s cubic-bezier(0.4, 0, 1, 1) forwards;
}
@supports not (backdrop-filter: blur(40px)) {
  ._snackbar_1cii7_216 {
    background: var(--clrSecondary);
  }
}

._default_1cii7_256 {
  background: var(--snackbarDefaultBg);
  border-color: var(--snackbarDefaultBorder);
  color: var(--snackbarDefaultText);
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.4);
}
._default_1cii7_256 ._icon_1cii7_262 {
  color: var(--snackbarDefaultIcon);
}
._default_1cii7_256 ._closeButton_1cii7_265 {
  color: var(--snackbarDefaultText);
}

._success_1cii7_269 {
  background: var(--snackbarSuccessBg);
  border-color: var(--snackbarSuccessBorder);
  color: var(--snackbarSuccessText);
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.4);
}
._success_1cii7_269 ._icon_1cii7_262 {
  color: var(--snackbarSuccessIcon);
}
._success_1cii7_269 ._closeButton_1cii7_265 {
  color: var(--snackbarSuccessText);
}

._error_1cii7_282 {
  background: var(--snackbarErrorBg);
  border-color: var(--snackbarErrorBorder);
  color: var(--snackbarErrorText);
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.4);
}
._error_1cii7_282 ._icon_1cii7_262 {
  color: var(--snackbarErrorIcon);
}
._error_1cii7_282 ._closeButton_1cii7_265 {
  color: var(--snackbarErrorText);
}

._icon_1cii7_262 {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

._message_1cii7_301 {
  flex: 1;
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.4;
  word-break: break-word;
}

._closeButton_1cii7_265 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 0;
  min-width: 24px;
  min-height: 24px;
  width: 20px;
  height: 20px;
  border-radius: 4px;
  border: none;
  background: transparent;
  cursor: pointer;
  transition: background 0.2s ease-in-out;
  -webkit-tap-highlight-color: transparent;
}
._closeButton_1cii7_265:hover {
  background: rgba(0, 0, 0, 0.05);
}
._closeButton_1cii7_265:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}
._closeButton_1cii7_265 svg {
  width: 18px;
  height: 18px;
  color: inherit;
}

@keyframes _slideInUp_1cii7_1 {
  from {
    transform: translateY(100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}
@keyframes _slideOutDown_1cii7_1 {
  from {
    transform: translateY(0);
    opacity: 1;
  }
  to {
    transform: translateY(100%);
    opacity: 0;
  }
}html {
  color-scheme: dark;
}

html:has(body._themeLight_1vgp5_5),
html:has(body._themePastelLight_1vgp5_6) {
  color-scheme: light;
}

:root {
  --clrPrimary: #F4F4F5;
  --clrPrimary30: rgba(244, 244, 245, 0.3);
  --clrSecondary: #FEFEFE;
  --clrTertiary: #E4E4E7;
  --clrPrimaryReverse: #101418;
  --clrSecondaryReverse: #0A0F14;
  --clrTertiaryReverse: #212327;
  --clrTextPrimary: #101418;
  --clrTextSecondary: #2E3337;
  --clrTextTertiary: #7C7C7C;
  --clrTextPrimaryReverse: #F4F4F5;
  --clrTextSecondaryReverse: #CDCDCD;
  --clrTextTertiaryReverse: #8A8A8A;
  --clrError-100: #641f1f;
  --clrError-50: #c84d4d;
  --clrSuccess-100: #2d692d;
  --clrSuccess-50: #3EA03E;
  --clrSuccessOnTint: #0d260d;
  --clrErrorOnTint: #2e0a0a;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgb(50, 126, 75, 0.1) 30%,
          rgb(94, 178, 122, 0.36) 60%,
          rgb(144, 215, 168) 100%);
  --clrNavBackground: rgba(244, 244, 245, 0.15);
  --clrNavItemActive: rgba(211, 211, 211, 0.4);
  --clrNavItemHover: rgba(0, 0, 0, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #F4F4F5;
  --clrGlassBackground: rgba(255, 255, 255, 0.5);
  --clrGlassBackgroundStrong: rgba(255, 255, 255, 0.3);
  --clrGlassBorder: rgba(0, 0, 0, 0.1);
  --snackbarDefaultBg: #F1ECE9;
  --snackbarDefaultText: #5D605C;
  --snackbarDefaultBorder: #5D605C;
  --snackbarDefaultIcon: #5D605C;
  --snackbarSuccessBg: #E0F1D9;
  --snackbarSuccessText: #358935;
  --snackbarSuccessBorder: #358935;
  --snackbarSuccessIcon: #358935;
  --snackbarErrorBg: #F9E1DC;
  --snackbarErrorText: #C80D12;
  --snackbarErrorBorder: #C80D12;
  --snackbarErrorIcon: #C80D12;
}

._themeLight_1vgp5_5 {
  --clrPrimary: #F4F4F5;
  --clrPrimary30: rgba(244, 244, 245, 0.3);
  --clrSecondary: #FEFEFE;
  --clrTertiary: #E4E4E7;
  --clrPrimaryReverse: #101418;
  --clrSecondaryReverse: #0A0F14;
  --clrTertiaryReverse: #212327;
  --clrTextPrimary: #101418;
  --clrTextSecondary: #2E3337;
  --clrTextTertiary: #7C7C7C;
  --clrTextPrimaryReverse: #F4F4F5;
  --clrTextSecondaryReverse: #CDCDCD;
  --clrTextTertiaryReverse: #8A8A8A;
  --clrError-100: #c03b3b;
  --clrError-50: #f6c5c5;
  --clrSuccess-100: #30d330;
  --clrSuccess-50: #bbffbb;
  --clrSuccessOnTint: #1f4f1f;
  --clrErrorOnTint: #7a1f1f;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgb(50, 126, 75, 0.1) 30%,
          rgb(94, 178, 122, 0.36) 60%,
          rgb(144, 215, 168) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(175, 49, 49, 0.1) 30%,
          rgba(238, 70, 70, 0.36) 60%,
          rgb(255, 173, 173) 100%);
  --clrNavBackground: rgba(244, 244, 245, 0.15);
  --clrNavItemActive: rgba(211, 211, 211, 0.4);
  --clrNavItemHover: rgba(0, 0, 0, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0000c1;
  --clrGlassBackground: rgba(255, 255, 255, 0.5);
  --clrGlassBackgroundStrong: rgba(255, 255, 255, 0.5);
  --clrGlassBorder: rgba(0, 0, 0, 0.1);
  --snackbarDefaultBg: #F1ECE9;
  --snackbarDefaultText: #5D605C;
  --snackbarDefaultBorder: #5D605C;
  --snackbarDefaultIcon: #5D605C;
  --snackbarSuccessBg: #E0F1D9;
  --snackbarSuccessText: #358935;
  --snackbarSuccessBorder: #358935;
  --snackbarSuccessIcon: #358935;
  --snackbarErrorBg: #F9E1DC;
  --snackbarErrorText: #C80D12;
  --snackbarErrorBorder: #C80D12;
  --snackbarErrorIcon: #C80D12;
}

._themeDark_1vgp5_131 {
  --clrPrimary: #0F1418;
  --clrPrimary30: rgba(15, 20, 25, 0.3);
  --clrSecondary: #0A0F14;
  --clrTertiary: #212327;
  --clrPrimaryReverse: #F4F4F5;
  --clrSecondaryReverse: #FEFEFE;
  --clrTertiaryReverse: #E4E4E7;
  --clrTextPrimary: #F4F4F5;
  --clrTextSecondary: #CDCDCD;
  --clrTextTertiary: #8A8A8A;
  --clrTextPrimaryReverse: #101418;
  --clrTextSecondaryReverse: #2E3337;
  --clrTextTertiaryReverse: #7C7C7C;
  --clrError-100: #c84d4d;
  --clrError-50: #641f1f;
  --clrSuccess-100: #3EA03E;
  --clrSuccess-50: #2d692d;
  --clrSuccessOnTint: #d6ffd6;
  --clrErrorOnTint: #ffd6d6;
  --clrWarning-100: #E88434;
  --clrWarning-50: #C49168;
  --clrAccent-100: #FFFFFF;
  --clrAccent-80: rgba(255, 255, 255, 0.8);
  --clrAccent-60: rgba(255, 255, 255, 0.6);
  --clrAccent-50: rgba(255, 255, 255, 0.5);
  --clrAccent-40: rgba(255, 255, 255, 0.4);
  --clrAccent-30: rgba(255, 255, 255, 0.3);
  --clrAccent-20: rgba(255, 255, 255, 0.2);
  --clrAccent-10: rgba(255, 255, 255, 0.1);
  --clrGradient: linear-gradient(90deg, #262a2e 10%, var(--clrPrimary) 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(50, 126, 75, 0.15) 30%,
          rgba(50, 126, 75, 0.3) 60%,
          rgba(50, 126, 75, 0.5) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(167, 44, 44, 0) 0%,
          rgba(167, 44, 44, 0.15) 30%,
          rgba(167, 44, 44, 0.3) 60%,
          rgba(167, 44, 44, 0.5) 100%);
  --clrNavBackground: rgba(0, 0, 0, 0.15);
  --clrNavItemActive: rgba(24, 24, 24, 0.49);
  --clrNavItemHover: rgba(255, 255, 255, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0F1418;
  --clrGlassBackground: rgba(15, 20, 24, 0.5);
  --clrGlassBackgroundStrong: rgba(15, 20, 24, 0.6);
  --clrGlassBorder: rgba(255, 255, 255, 0.1);
  --snackbarDefaultBg: #414141;
  --snackbarDefaultText: #BABABA;
  --snackbarDefaultBorder: #BABABA;
  --snackbarDefaultIcon: #BABABA;
  --snackbarSuccessBg: #145E18;
  --snackbarSuccessText: #8FE094;
  --snackbarSuccessBorder: #8FE094;
  --snackbarSuccessIcon: #8FE094;
  --snackbarErrorBg: #910C09;
  --snackbarErrorText: #FE9E9D;
  --snackbarErrorBorder: #FE9E9D;
  --snackbarErrorIcon: #FE9E9D;
}

/* 

Note: 
    If you want something done quick, ask AI to buuild your color themes.
    If you want to do it right and tidy though, do it manually. 

    - Theo

*/
:root {
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --font-accent: "Jaro", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}

html,
body {
  font-family: var(--font-sans);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

._container_1vgp5_216 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 4px;
  width: 100%;
}

._label_1vgp5_225 {
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 400;
  color: var(--clrPrimaryReverse);
  padding: 0 4px;
}
._label_1vgp5_225._errorLabel_1vgp5_232 {
  color: var(--clrError-100);
}

._inputWrapper_1vgp5_236 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 0;
  width: 100%;
  background-color: var(--clrTertiary);
  border-radius: 8px;
  padding: 16px 12px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  border: 1px solid transparent;
  position: relative;
}
._inputWrapper_1vgp5_236._default_1vgp5_250 {
  border-color: transparent;
}
._inputWrapper_1vgp5_236._active_1vgp5_253 {
  border-color: var(--clrAccent-30);
  box-shadow: 0px 0px 12px 0px rgba(186, 186, 186, 0.1);
}
._inputWrapper_1vgp5_236._error_1vgp5_232 {
  border-color: var(--clrError-100);
  box-shadow: 0px 0px 12px 0px rgba(255, 141, 141, 0.16);
}

._input_1vgp5_236,
._select_1vgp5_263 {
  flex: 1;
  border: none;
  background: transparent;
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 400;
  color: var(--clrAccent-100);
  outline: none;
  width: 100%;
  height: 24px;
  line-height: 24px;
}
._input_1vgp5_236::placeholder,
._select_1vgp5_263::placeholder {
  color: var(--clrAccent-30);
}
._input_1vgp5_236[type=date],
._select_1vgp5_263[type=date] {
  appearance: none;
  -webkit-appearance: none;
}
._input_1vgp5_236[type=date]::-webkit-calendar-picker-indicator,
._select_1vgp5_263[type=date]::-webkit-calendar-picker-indicator {
  opacity: 0;
  position: absolute;
  right: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
}
._input_1vgp5_236[type=date]::-webkit-date-and-time-value,
._select_1vgp5_263[type=date]::-webkit-date-and-time-value {
  text-align: left;
}

._select_1vgp5_263 {
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  padding-right: 24px;
}
._select_1vgp5_263 option {
  background-color: var(--clrTertiary);
  color: var(--clrAccent-100);
}

._error_1vgp5_232 ._input_1vgp5_236,
._error_1vgp5_232 ._select_1vgp5_263 {
  color: var(--clrError-100);
}
._error_1vgp5_232 ._input_1vgp5_236::placeholder,
._error_1vgp5_232 ._select_1vgp5_263::placeholder {
  color: var(--clrError-100);
}

._passwordToggle_1vgp5_319 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 0;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  margin-left: 8px;
}

._eyeIcon_1vgp5_332 {
  font-size: 20px;
  color: var(--clrAccent-100);
}

._dropdownIcon_1vgp5_337,
._calendarIcon_1vgp5_338 {
  font-size: 18px;
  color: var(--clrAccent-30);
  pointer-events: none;
  position: absolute;
  right: 12px;
}

._description_1vgp5_346 {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 400;
  color: var(--clrAccent-30);
  padding: 0 4px;
}
._description_1vgp5_346._errorDescription_1vgp5_353 {
  color: var(--clrError-100);
}html {
  color-scheme: dark;
}

html:has(body._themeLight_klg94_5),
html:has(body._themePastelLight_klg94_6) {
  color-scheme: light;
}

:root {
  --clrPrimary: #F4F4F5;
  --clrPrimary30: rgba(244, 244, 245, 0.3);
  --clrSecondary: #FEFEFE;
  --clrTertiary: #E4E4E7;
  --clrPrimaryReverse: #101418;
  --clrSecondaryReverse: #0A0F14;
  --clrTertiaryReverse: #212327;
  --clrTextPrimary: #101418;
  --clrTextSecondary: #2E3337;
  --clrTextTertiary: #7C7C7C;
  --clrTextPrimaryReverse: #F4F4F5;
  --clrTextSecondaryReverse: #CDCDCD;
  --clrTextTertiaryReverse: #8A8A8A;
  --clrError-100: #641f1f;
  --clrError-50: #c84d4d;
  --clrSuccess-100: #2d692d;
  --clrSuccess-50: #3EA03E;
  --clrSuccessOnTint: #0d260d;
  --clrErrorOnTint: #2e0a0a;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgb(50, 126, 75, 0.1) 30%,
          rgb(94, 178, 122, 0.36) 60%,
          rgb(144, 215, 168) 100%);
  --clrNavBackground: rgba(244, 244, 245, 0.15);
  --clrNavItemActive: rgba(211, 211, 211, 0.4);
  --clrNavItemHover: rgba(0, 0, 0, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #F4F4F5;
  --clrGlassBackground: rgba(255, 255, 255, 0.5);
  --clrGlassBackgroundStrong: rgba(255, 255, 255, 0.3);
  --clrGlassBorder: rgba(0, 0, 0, 0.1);
  --snackbarDefaultBg: #F1ECE9;
  --snackbarDefaultText: #5D605C;
  --snackbarDefaultBorder: #5D605C;
  --snackbarDefaultIcon: #5D605C;
  --snackbarSuccessBg: #E0F1D9;
  --snackbarSuccessText: #358935;
  --snackbarSuccessBorder: #358935;
  --snackbarSuccessIcon: #358935;
  --snackbarErrorBg: #F9E1DC;
  --snackbarErrorText: #C80D12;
  --snackbarErrorBorder: #C80D12;
  --snackbarErrorIcon: #C80D12;
}

._themeLight_klg94_5 {
  --clrPrimary: #F4F4F5;
  --clrPrimary30: rgba(244, 244, 245, 0.3);
  --clrSecondary: #FEFEFE;
  --clrTertiary: #E4E4E7;
  --clrPrimaryReverse: #101418;
  --clrSecondaryReverse: #0A0F14;
  --clrTertiaryReverse: #212327;
  --clrTextPrimary: #101418;
  --clrTextSecondary: #2E3337;
  --clrTextTertiary: #7C7C7C;
  --clrTextPrimaryReverse: #F4F4F5;
  --clrTextSecondaryReverse: #CDCDCD;
  --clrTextTertiaryReverse: #8A8A8A;
  --clrError-100: #c03b3b;
  --clrError-50: #f6c5c5;
  --clrSuccess-100: #30d330;
  --clrSuccess-50: #bbffbb;
  --clrSuccessOnTint: #1f4f1f;
  --clrErrorOnTint: #7a1f1f;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgb(50, 126, 75, 0.1) 30%,
          rgb(94, 178, 122, 0.36) 60%,
          rgb(144, 215, 168) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(175, 49, 49, 0.1) 30%,
          rgba(238, 70, 70, 0.36) 60%,
          rgb(255, 173, 173) 100%);
  --clrNavBackground: rgba(244, 244, 245, 0.15);
  --clrNavItemActive: rgba(211, 211, 211, 0.4);
  --clrNavItemHover: rgba(0, 0, 0, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0000c1;
  --clrGlassBackground: rgba(255, 255, 255, 0.5);
  --clrGlassBackgroundStrong: rgba(255, 255, 255, 0.5);
  --clrGlassBorder: rgba(0, 0, 0, 0.1);
  --snackbarDefaultBg: #F1ECE9;
  --snackbarDefaultText: #5D605C;
  --snackbarDefaultBorder: #5D605C;
  --snackbarDefaultIcon: #5D605C;
  --snackbarSuccessBg: #E0F1D9;
  --snackbarSuccessText: #358935;
  --snackbarSuccessBorder: #358935;
  --snackbarSuccessIcon: #358935;
  --snackbarErrorBg: #F9E1DC;
  --snackbarErrorText: #C80D12;
  --snackbarErrorBorder: #C80D12;
  --snackbarErrorIcon: #C80D12;
}

._themeDark_klg94_131 {
  --clrPrimary: #0F1418;
  --clrPrimary30: rgba(15, 20, 25, 0.3);
  --clrSecondary: #0A0F14;
  --clrTertiary: #212327;
  --clrPrimaryReverse: #F4F4F5;
  --clrSecondaryReverse: #FEFEFE;
  --clrTertiaryReverse: #E4E4E7;
  --clrTextPrimary: #F4F4F5;
  --clrTextSecondary: #CDCDCD;
  --clrTextTertiary: #8A8A8A;
  --clrTextPrimaryReverse: #101418;
  --clrTextSecondaryReverse: #2E3337;
  --clrTextTertiaryReverse: #7C7C7C;
  --clrError-100: #c84d4d;
  --clrError-50: #641f1f;
  --clrSuccess-100: #3EA03E;
  --clrSuccess-50: #2d692d;
  --clrSuccessOnTint: #d6ffd6;
  --clrErrorOnTint: #ffd6d6;
  --clrWarning-100: #E88434;
  --clrWarning-50: #C49168;
  --clrAccent-100: #FFFFFF;
  --clrAccent-80: rgba(255, 255, 255, 0.8);
  --clrAccent-60: rgba(255, 255, 255, 0.6);
  --clrAccent-50: rgba(255, 255, 255, 0.5);
  --clrAccent-40: rgba(255, 255, 255, 0.4);
  --clrAccent-30: rgba(255, 255, 255, 0.3);
  --clrAccent-20: rgba(255, 255, 255, 0.2);
  --clrAccent-10: rgba(255, 255, 255, 0.1);
  --clrGradient: linear-gradient(90deg, #262a2e 10%, var(--clrPrimary) 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(50, 126, 75, 0.15) 30%,
          rgba(50, 126, 75, 0.3) 60%,
          rgba(50, 126, 75, 0.5) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(167, 44, 44, 0) 0%,
          rgba(167, 44, 44, 0.15) 30%,
          rgba(167, 44, 44, 0.3) 60%,
          rgba(167, 44, 44, 0.5) 100%);
  --clrNavBackground: rgba(0, 0, 0, 0.15);
  --clrNavItemActive: rgba(24, 24, 24, 0.49);
  --clrNavItemHover: rgba(255, 255, 255, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0F1418;
  --clrGlassBackground: rgba(15, 20, 24, 0.5);
  --clrGlassBackgroundStrong: rgba(15, 20, 24, 0.6);
  --clrGlassBorder: rgba(255, 255, 255, 0.1);
  --snackbarDefaultBg: #414141;
  --snackbarDefaultText: #BABABA;
  --snackbarDefaultBorder: #BABABA;
  --snackbarDefaultIcon: #BABABA;
  --snackbarSuccessBg: #145E18;
  --snackbarSuccessText: #8FE094;
  --snackbarSuccessBorder: #8FE094;
  --snackbarSuccessIcon: #8FE094;
  --snackbarErrorBg: #910C09;
  --snackbarErrorText: #FE9E9D;
  --snackbarErrorBorder: #FE9E9D;
  --snackbarErrorIcon: #FE9E9D;
}

/* 

Note: 
    If you want something done quick, ask AI to buuild your color themes.
    If you want to do it right and tidy though, do it manually. 

    - Theo

*/
:root {
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --font-accent: "Jaro", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}

html,
body {
  font-family: var(--font-sans);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

._button_klg94_216 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 0;
  font-family: var(--font-sans);
  font-weight: 500;
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}
._button_klg94_216:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
._button_klg94_216:active:not(:disabled) {
  transform: scale(0.98);
}

._fullWidth_klg94_237 {
  width: 100%;
}

._primary_klg94_241 {
  background-color: var(--clrAccent-100);
  color: var(--clrPrimary);
  border: none;
  position: relative;
}
._primary_klg94_241::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--clrAccent-10);
  opacity: 0;
  transition: all 0.2s ease-in-out;
  border-radius: inherit;
}
._primary_klg94_241:hover:not(:disabled)::before {
  opacity: 1;
  box-shadow: 0 0 30px var(--clrAccent-30);
}

._secondary_klg94_264 {
  background-color: transparent;
  color: var(--clrAccent-100);
  border: 1px solid var(--clrAccent-100);
}
._secondary_klg94_264:hover:not(:disabled) {
  background-color: var(--clrAccent-10);
}
._secondary_klg94_264:active:not(:disabled) {
  background-color: var(--clrAccent-20);
}

._tertiary_klg94_276 {
  background-color: transparent;
  color: var(--clrAccent-40);
  border: 1px solid var(--clrAccent-40);
}
._tertiary_klg94_276:hover:not(:disabled) {
  background-color: var(--clrAccent-10);
  border: 1px solid var(--clrAccent-60);
  color: var(--clrAccent-100);
}
._tertiary_klg94_276:active:not(:disabled) {
  background-color: var(--clrAccent-60);
  border: 1px solid var(--clrAccent-60);
  color: var(--clrAccent-100);
}

._text_only_klg94_292 {
  padding: 16px 24px;
  height: 56px;
  border-radius: 8px;
  font-size: 14px;
}

._text_desc_klg94_299 {
  padding: 12px 24px;
  height: 56px;
  border-radius: 8px;
}

._text_icon_klg94_305 {
  padding: 16px 24px;
  height: 56px;
  border-radius: 8px;
  font-size: 14px;
}

._icon_only_klg94_312 {
  padding: 16px;
  width: 56px;
  height: 56px;
  border-radius: 8px;
}

._icon_only_small_klg94_319 {
  padding: 8px;
  width: 32px;
  height: 32px;
  border-radius: 8px;
}

._text_slim_klg94_326 {
  padding: 8px 24px;
  height: 38px;
  border-radius: 8px;
  font-size: 12px;
}

._danger_klg94_333,
._danger_slim_klg94_334 {
  background-color: transparent;
  color: var(--clrError-100);
  border: 1px solid var(--clrError-100);
}
._danger_klg94_333:hover:not(:disabled),
._danger_slim_klg94_334:hover:not(:disabled) {
  background-color: var(--clrError-50);
  border-color: var(--clrError-50);
}
._danger_klg94_333:active:not(:disabled),
._danger_slim_klg94_334:active:not(:disabled) {
  background-color: var(--clrError-100);
  color: var(--clrPrimary);
}

._danger_klg94_333 {
  padding: 16px 24px;
  height: 56px;
  border-radius: 8px;
  font-size: 14px;
}

._danger_slim_klg94_334 {
  padding: 8px 24px;
  height: 38px;
  border-radius: 8px;
  font-size: 12px;
}

._textIconContent_klg94_364 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 8px;
  position: relative;
  z-index: 1;
}

._textDescContent_klg94_374 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  position: relative;
  z-index: 1;
}

._text_klg94_292 {
  font-size: inherit;
  line-height: 1;
  position: relative;
  z-index: 1;
}

._description_klg94_391 {
  font-size: 10px;
  font-weight: 400;
  color: var(--clrTextTertiary);
  line-height: 1;
  position: relative;
  z-index: 1;
}

._icon_klg94_312 {
  font-size: 18px;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
  max-height: 18px;
  width: auto;
}

._animated_klg94_409 {
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  background: transparent;
  border: none;
  padding: 1px 0;
}
._animated_klg94_409:active:not(:disabled) {
  transform: scale(0.98);
}
._animated_klg94_409._fullWidth_klg94_237 {
  width: 100%;
}
._animated_klg94_409._fullWidth_klg94_237 ._innerContent_klg94_423 {
  width: 100%;
}

._borderGradientBottom_klg94_427 {
  position: absolute;
  width: 300%;
  height: 50%;
  opacity: 0.7;
  bottom: -11px;
  right: -250%;
  border-radius: 50%;
  animation: _star-movement-bottom_klg94_1 6s linear infinite alternate;
  z-index: 0;
  pointer-events: none;
}

._borderGradientTop_klg94_440 {
  position: absolute;
  width: 300%;
  height: 50%;
  opacity: 0.7;
  top: -10px;
  left: -250%;
  border-radius: 50%;
  animation: _star-movement-top_klg94_1 6s linear infinite alternate;
  z-index: 0;
  pointer-events: none;
}

._innerContent_klg94_423 {
  position: relative;
  background: linear-gradient(to bottom, var(--clrPrimary), var(--clrSecondary));
  border: 1px solid var(--clrTertiary);
  color: var(--clrTextPrimary);
  font-size: 14px;
  font-weight: 500;
  text-align: center;
  padding: 16px 26px;
  border-radius: 8px;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
._innerContent_klg94_423::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, var(--clrSecondary), var(--clrTertiary));
  border-radius: inherit;
  opacity: 0;
  transition: opacity 0.2s ease-in-out;
  z-index: -1;
}
._animated_klg94_409:hover:not(:disabled) ._innerContent_klg94_423::before {
  opacity: 1;
}
._innerContent_klg94_423 ._icon_klg94_312 {
  font-size: 20px;
  max-height: 20px;
}

@keyframes _star-movement-bottom_klg94_1 {
  0% {
    transform: translate(0%, 0%);
    opacity: 1;
  }
  100% {
    transform: translate(-100%, 0%);
    opacity: 0;
  }
}
@keyframes _star-movement-top_klg94_1 {
  0% {
    transform: translate(0%, 0%);
    opacity: 1;
  }
  100% {
    transform: translate(100%, 0%);
    opacity: 0;
  }
}
._loading_klg94_507 {
  pointer-events: none;
}

._loadingContent_klg94_511 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 8px;
  position: relative;
  z-index: 1;
}

._spinner_klg94_521 {
  width: 14px;
  height: 14px;
  border: 2px solid transparent;
  border-top-color: currentColor;
  border-radius: 50%;
  animation: _spin_klg94_521 0.8s linear infinite;
}

@keyframes _spin_klg94_521 {
  to {
    transform: rotate(360deg);
  }
}html {
  color-scheme: dark;
}

html:has(body._themeLight_jg6to_5),
html:has(body._themePastelLight_jg6to_6) {
  color-scheme: light;
}

:root {
  --clrPrimary: #F4F4F5;
  --clrPrimary30: rgba(244, 244, 245, 0.3);
  --clrSecondary: #FEFEFE;
  --clrTertiary: #E4E4E7;
  --clrPrimaryReverse: #101418;
  --clrSecondaryReverse: #0A0F14;
  --clrTertiaryReverse: #212327;
  --clrTextPrimary: #101418;
  --clrTextSecondary: #2E3337;
  --clrTextTertiary: #7C7C7C;
  --clrTextPrimaryReverse: #F4F4F5;
  --clrTextSecondaryReverse: #CDCDCD;
  --clrTextTertiaryReverse: #8A8A8A;
  --clrError-100: #641f1f;
  --clrError-50: #c84d4d;
  --clrSuccess-100: #2d692d;
  --clrSuccess-50: #3EA03E;
  --clrSuccessOnTint: #0d260d;
  --clrErrorOnTint: #2e0a0a;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgb(50, 126, 75, 0.1) 30%,
          rgb(94, 178, 122, 0.36) 60%,
          rgb(144, 215, 168) 100%);
  --clrNavBackground: rgba(244, 244, 245, 0.15);
  --clrNavItemActive: rgba(211, 211, 211, 0.4);
  --clrNavItemHover: rgba(0, 0, 0, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #F4F4F5;
  --clrGlassBackground: rgba(255, 255, 255, 0.5);
  --clrGlassBackgroundStrong: rgba(255, 255, 255, 0.3);
  --clrGlassBorder: rgba(0, 0, 0, 0.1);
  --snackbarDefaultBg: #F1ECE9;
  --snackbarDefaultText: #5D605C;
  --snackbarDefaultBorder: #5D605C;
  --snackbarDefaultIcon: #5D605C;
  --snackbarSuccessBg: #E0F1D9;
  --snackbarSuccessText: #358935;
  --snackbarSuccessBorder: #358935;
  --snackbarSuccessIcon: #358935;
  --snackbarErrorBg: #F9E1DC;
  --snackbarErrorText: #C80D12;
  --snackbarErrorBorder: #C80D12;
  --snackbarErrorIcon: #C80D12;
}

._themeLight_jg6to_5 {
  --clrPrimary: #F4F4F5;
  --clrPrimary30: rgba(244, 244, 245, 0.3);
  --clrSecondary: #FEFEFE;
  --clrTertiary: #E4E4E7;
  --clrPrimaryReverse: #101418;
  --clrSecondaryReverse: #0A0F14;
  --clrTertiaryReverse: #212327;
  --clrTextPrimary: #101418;
  --clrTextSecondary: #2E3337;
  --clrTextTertiary: #7C7C7C;
  --clrTextPrimaryReverse: #F4F4F5;
  --clrTextSecondaryReverse: #CDCDCD;
  --clrTextTertiaryReverse: #8A8A8A;
  --clrError-100: #c03b3b;
  --clrError-50: #f6c5c5;
  --clrSuccess-100: #30d330;
  --clrSuccess-50: #bbffbb;
  --clrSuccessOnTint: #1f4f1f;
  --clrErrorOnTint: #7a1f1f;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgb(50, 126, 75, 0.1) 30%,
          rgb(94, 178, 122, 0.36) 60%,
          rgb(144, 215, 168) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(175, 49, 49, 0.1) 30%,
          rgba(238, 70, 70, 0.36) 60%,
          rgb(255, 173, 173) 100%);
  --clrNavBackground: rgba(244, 244, 245, 0.15);
  --clrNavItemActive: rgba(211, 211, 211, 0.4);
  --clrNavItemHover: rgba(0, 0, 0, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0000c1;
  --clrGlassBackground: rgba(255, 255, 255, 0.5);
  --clrGlassBackgroundStrong: rgba(255, 255, 255, 0.5);
  --clrGlassBorder: rgba(0, 0, 0, 0.1);
  --snackbarDefaultBg: #F1ECE9;
  --snackbarDefaultText: #5D605C;
  --snackbarDefaultBorder: #5D605C;
  --snackbarDefaultIcon: #5D605C;
  --snackbarSuccessBg: #E0F1D9;
  --snackbarSuccessText: #358935;
  --snackbarSuccessBorder: #358935;
  --snackbarSuccessIcon: #358935;
  --snackbarErrorBg: #F9E1DC;
  --snackbarErrorText: #C80D12;
  --snackbarErrorBorder: #C80D12;
  --snackbarErrorIcon: #C80D12;
}

._themeDark_jg6to_131 {
  --clrPrimary: #0F1418;
  --clrPrimary30: rgba(15, 20, 25, 0.3);
  --clrSecondary: #0A0F14;
  --clrTertiary: #212327;
  --clrPrimaryReverse: #F4F4F5;
  --clrSecondaryReverse: #FEFEFE;
  --clrTertiaryReverse: #E4E4E7;
  --clrTextPrimary: #F4F4F5;
  --clrTextSecondary: #CDCDCD;
  --clrTextTertiary: #8A8A8A;
  --clrTextPrimaryReverse: #101418;
  --clrTextSecondaryReverse: #2E3337;
  --clrTextTertiaryReverse: #7C7C7C;
  --clrError-100: #c84d4d;
  --clrError-50: #641f1f;
  --clrSuccess-100: #3EA03E;
  --clrSuccess-50: #2d692d;
  --clrSuccessOnTint: #d6ffd6;
  --clrErrorOnTint: #ffd6d6;
  --clrWarning-100: #E88434;
  --clrWarning-50: #C49168;
  --clrAccent-100: #FFFFFF;
  --clrAccent-80: rgba(255, 255, 255, 0.8);
  --clrAccent-60: rgba(255, 255, 255, 0.6);
  --clrAccent-50: rgba(255, 255, 255, 0.5);
  --clrAccent-40: rgba(255, 255, 255, 0.4);
  --clrAccent-30: rgba(255, 255, 255, 0.3);
  --clrAccent-20: rgba(255, 255, 255, 0.2);
  --clrAccent-10: rgba(255, 255, 255, 0.1);
  --clrGradient: linear-gradient(90deg, #262a2e 10%, var(--clrPrimary) 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(50, 126, 75, 0.15) 30%,
          rgba(50, 126, 75, 0.3) 60%,
          rgba(50, 126, 75, 0.5) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(167, 44, 44, 0) 0%,
          rgba(167, 44, 44, 0.15) 30%,
          rgba(167, 44, 44, 0.3) 60%,
          rgba(167, 44, 44, 0.5) 100%);
  --clrNavBackground: rgba(0, 0, 0, 0.15);
  --clrNavItemActive: rgba(24, 24, 24, 0.49);
  --clrNavItemHover: rgba(255, 255, 255, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0F1418;
  --clrGlassBackground: rgba(15, 20, 24, 0.5);
  --clrGlassBackgroundStrong: rgba(15, 20, 24, 0.6);
  --clrGlassBorder: rgba(255, 255, 255, 0.1);
  --snackbarDefaultBg: #414141;
  --snackbarDefaultText: #BABABA;
  --snackbarDefaultBorder: #BABABA;
  --snackbarDefaultIcon: #BABABA;
  --snackbarSuccessBg: #145E18;
  --snackbarSuccessText: #8FE094;
  --snackbarSuccessBorder: #8FE094;
  --snackbarSuccessIcon: #8FE094;
  --snackbarErrorBg: #910C09;
  --snackbarErrorText: #FE9E9D;
  --snackbarErrorBorder: #FE9E9D;
  --snackbarErrorIcon: #FE9E9D;
}

/* 

Note: 
    If you want something done quick, ask AI to buuild your color themes.
    If you want to do it right and tidy though, do it manually. 

    - Theo

*/
:root {
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --font-accent: "Jaro", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}

html,
body {
  font-family: var(--font-sans);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

._carousel_jg6to_216 {
  position: relative;
  width: 100%;
  overflow: hidden;
  mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
}

._carouselTrack_jg6to_224 {
  display: flex;
  gap: 12px;
  animation: _scroll_jg6to_1 linear infinite;
  width: max-content;
}

@keyframes _scroll_jg6to_1 {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}
._carouselSlide_jg6to_239 {
  flex-shrink: 0;
  border-radius: 8px;
  overflow: hidden;
  transition: transform 0.3s ease;
  max-width: 800px;
}
._carouselSlide_jg6to_239:hover {
  transform: scale(1.05);
}
._carouselSlide_jg6to_239 img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

@media (max-width: 480px) {
  ._carousel_jg6to_216 {
    height: var(--mobile-height, 200px) !important;
  }
  ._carouselSlide_jg6to_239 {
    width: var(--mobile-width, 280px) !important;
    height: var(--mobile-height, 200px) !important;
  }
  ._carouselTrack_jg6to_224 {
    gap: 8px;
  }
}html {
  color-scheme: dark;
}

html:has(body._themeLight_12g2x_5),
html:has(body._themePastelLight_12g2x_6) {
  color-scheme: light;
}

:root {
  --clrPrimary: #F4F4F5;
  --clrPrimary30: rgba(244, 244, 245, 0.3);
  --clrSecondary: #FEFEFE;
  --clrTertiary: #E4E4E7;
  --clrPrimaryReverse: #101418;
  --clrSecondaryReverse: #0A0F14;
  --clrTertiaryReverse: #212327;
  --clrTextPrimary: #101418;
  --clrTextSecondary: #2E3337;
  --clrTextTertiary: #7C7C7C;
  --clrTextPrimaryReverse: #F4F4F5;
  --clrTextSecondaryReverse: #CDCDCD;
  --clrTextTertiaryReverse: #8A8A8A;
  --clrError-100: #641f1f;
  --clrError-50: #c84d4d;
  --clrSuccess-100: #2d692d;
  --clrSuccess-50: #3EA03E;
  --clrSuccessOnTint: #0d260d;
  --clrErrorOnTint: #2e0a0a;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgb(50, 126, 75, 0.1) 30%,
          rgb(94, 178, 122, 0.36) 60%,
          rgb(144, 215, 168) 100%);
  --clrNavBackground: rgba(244, 244, 245, 0.15);
  --clrNavItemActive: rgba(211, 211, 211, 0.4);
  --clrNavItemHover: rgba(0, 0, 0, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #F4F4F5;
  --clrGlassBackground: rgba(255, 255, 255, 0.5);
  --clrGlassBackgroundStrong: rgba(255, 255, 255, 0.3);
  --clrGlassBorder: rgba(0, 0, 0, 0.1);
  --snackbarDefaultBg: #F1ECE9;
  --snackbarDefaultText: #5D605C;
  --snackbarDefaultBorder: #5D605C;
  --snackbarDefaultIcon: #5D605C;
  --snackbarSuccessBg: #E0F1D9;
  --snackbarSuccessText: #358935;
  --snackbarSuccessBorder: #358935;
  --snackbarSuccessIcon: #358935;
  --snackbarErrorBg: #F9E1DC;
  --snackbarErrorText: #C80D12;
  --snackbarErrorBorder: #C80D12;
  --snackbarErrorIcon: #C80D12;
}

._themeLight_12g2x_5 {
  --clrPrimary: #F4F4F5;
  --clrPrimary30: rgba(244, 244, 245, 0.3);
  --clrSecondary: #FEFEFE;
  --clrTertiary: #E4E4E7;
  --clrPrimaryReverse: #101418;
  --clrSecondaryReverse: #0A0F14;
  --clrTertiaryReverse: #212327;
  --clrTextPrimary: #101418;
  --clrTextSecondary: #2E3337;
  --clrTextTertiary: #7C7C7C;
  --clrTextPrimaryReverse: #F4F4F5;
  --clrTextSecondaryReverse: #CDCDCD;
  --clrTextTertiaryReverse: #8A8A8A;
  --clrError-100: #c03b3b;
  --clrError-50: #f6c5c5;
  --clrSuccess-100: #30d330;
  --clrSuccess-50: #bbffbb;
  --clrSuccessOnTint: #1f4f1f;
  --clrErrorOnTint: #7a1f1f;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgb(50, 126, 75, 0.1) 30%,
          rgb(94, 178, 122, 0.36) 60%,
          rgb(144, 215, 168) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(175, 49, 49, 0.1) 30%,
          rgba(238, 70, 70, 0.36) 60%,
          rgb(255, 173, 173) 100%);
  --clrNavBackground: rgba(244, 244, 245, 0.15);
  --clrNavItemActive: rgba(211, 211, 211, 0.4);
  --clrNavItemHover: rgba(0, 0, 0, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0000c1;
  --clrGlassBackground: rgba(255, 255, 255, 0.5);
  --clrGlassBackgroundStrong: rgba(255, 255, 255, 0.5);
  --clrGlassBorder: rgba(0, 0, 0, 0.1);
  --snackbarDefaultBg: #F1ECE9;
  --snackbarDefaultText: #5D605C;
  --snackbarDefaultBorder: #5D605C;
  --snackbarDefaultIcon: #5D605C;
  --snackbarSuccessBg: #E0F1D9;
  --snackbarSuccessText: #358935;
  --snackbarSuccessBorder: #358935;
  --snackbarSuccessIcon: #358935;
  --snackbarErrorBg: #F9E1DC;
  --snackbarErrorText: #C80D12;
  --snackbarErrorBorder: #C80D12;
  --snackbarErrorIcon: #C80D12;
}

._themeDark_12g2x_131 {
  --clrPrimary: #0F1418;
  --clrPrimary30: rgba(15, 20, 25, 0.3);
  --clrSecondary: #0A0F14;
  --clrTertiary: #212327;
  --clrPrimaryReverse: #F4F4F5;
  --clrSecondaryReverse: #FEFEFE;
  --clrTertiaryReverse: #E4E4E7;
  --clrTextPrimary: #F4F4F5;
  --clrTextSecondary: #CDCDCD;
  --clrTextTertiary: #8A8A8A;
  --clrTextPrimaryReverse: #101418;
  --clrTextSecondaryReverse: #2E3337;
  --clrTextTertiaryReverse: #7C7C7C;
  --clrError-100: #c84d4d;
  --clrError-50: #641f1f;
  --clrSuccess-100: #3EA03E;
  --clrSuccess-50: #2d692d;
  --clrSuccessOnTint: #d6ffd6;
  --clrErrorOnTint: #ffd6d6;
  --clrWarning-100: #E88434;
  --clrWarning-50: #C49168;
  --clrAccent-100: #FFFFFF;
  --clrAccent-80: rgba(255, 255, 255, 0.8);
  --clrAccent-60: rgba(255, 255, 255, 0.6);
  --clrAccent-50: rgba(255, 255, 255, 0.5);
  --clrAccent-40: rgba(255, 255, 255, 0.4);
  --clrAccent-30: rgba(255, 255, 255, 0.3);
  --clrAccent-20: rgba(255, 255, 255, 0.2);
  --clrAccent-10: rgba(255, 255, 255, 0.1);
  --clrGradient: linear-gradient(90deg, #262a2e 10%, var(--clrPrimary) 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(50, 126, 75, 0.15) 30%,
          rgba(50, 126, 75, 0.3) 60%,
          rgba(50, 126, 75, 0.5) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(167, 44, 44, 0) 0%,
          rgba(167, 44, 44, 0.15) 30%,
          rgba(167, 44, 44, 0.3) 60%,
          rgba(167, 44, 44, 0.5) 100%);
  --clrNavBackground: rgba(0, 0, 0, 0.15);
  --clrNavItemActive: rgba(24, 24, 24, 0.49);
  --clrNavItemHover: rgba(255, 255, 255, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0F1418;
  --clrGlassBackground: rgba(15, 20, 24, 0.5);
  --clrGlassBackgroundStrong: rgba(15, 20, 24, 0.6);
  --clrGlassBorder: rgba(255, 255, 255, 0.1);
  --snackbarDefaultBg: #414141;
  --snackbarDefaultText: #BABABA;
  --snackbarDefaultBorder: #BABABA;
  --snackbarDefaultIcon: #BABABA;
  --snackbarSuccessBg: #145E18;
  --snackbarSuccessText: #8FE094;
  --snackbarSuccessBorder: #8FE094;
  --snackbarSuccessIcon: #8FE094;
  --snackbarErrorBg: #910C09;
  --snackbarErrorText: #FE9E9D;
  --snackbarErrorBorder: #FE9E9D;
  --snackbarErrorIcon: #FE9E9D;
}

/* 

Note: 
    If you want something done quick, ask AI to buuild your color themes.
    If you want to do it right and tidy though, do it manually. 

    - Theo

*/
:root {
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --font-accent: "Jaro", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}

html,
body {
  font-family: var(--font-sans);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

._shinyText_12g2x_216 {
  display: inline-block;
  background: linear-gradient(90deg, var(--clrTextTertiary) 0%, var(--clrTextTertiary) calc(50% - var(--spread) / 2), var(--clrTextPrimary) 50%, var(--clrTextTertiary) calc(50% + var(--spread) / 2), var(--clrTextTertiary) 100%);
  background-size: 200% 100%;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-position: 100% 0;
  animation: _shine_12g2x_1 var(--speed, 3s) infinite linear;
}
._shinyText_12g2x_216._disabled_12g2x_226 {
  animation: none;
  background: var(--clrTextTertiary);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

@keyframes _shine_12g2x_1 {
  0% {
    background-position: 100% 0;
  }
  100% {
    background-position: -100% 0;
  }
}.dot-grid {
  padding: 1em;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 100%;
  position: relative;
}

.dot-grid__wrap {
  width: 100%;
  height: 100%;
  position: relative;
}

.dot-grid__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
html {
  color-scheme: dark;
}

html:has(body._themeLight_ww9it_5),
html:has(body._themePastelLight_ww9it_6) {
  color-scheme: light;
}

:root {
  --clrPrimary: #F4F4F5;
  --clrPrimary30: rgba(244, 244, 245, 0.3);
  --clrSecondary: #FEFEFE;
  --clrTertiary: #E4E4E7;
  --clrPrimaryReverse: #101418;
  --clrSecondaryReverse: #0A0F14;
  --clrTertiaryReverse: #212327;
  --clrTextPrimary: #101418;
  --clrTextSecondary: #2E3337;
  --clrTextTertiary: #7C7C7C;
  --clrTextPrimaryReverse: #F4F4F5;
  --clrTextSecondaryReverse: #CDCDCD;
  --clrTextTertiaryReverse: #8A8A8A;
  --clrError-100: #641f1f;
  --clrError-50: #c84d4d;
  --clrSuccess-100: #2d692d;
  --clrSuccess-50: #3EA03E;
  --clrSuccessOnTint: #0d260d;
  --clrErrorOnTint: #2e0a0a;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgb(50, 126, 75, 0.1) 30%,
          rgb(94, 178, 122, 0.36) 60%,
          rgb(144, 215, 168) 100%);
  --clrNavBackground: rgba(244, 244, 245, 0.15);
  --clrNavItemActive: rgba(211, 211, 211, 0.4);
  --clrNavItemHover: rgba(0, 0, 0, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #F4F4F5;
  --clrGlassBackground: rgba(255, 255, 255, 0.5);
  --clrGlassBackgroundStrong: rgba(255, 255, 255, 0.3);
  --clrGlassBorder: rgba(0, 0, 0, 0.1);
  --snackbarDefaultBg: #F1ECE9;
  --snackbarDefaultText: #5D605C;
  --snackbarDefaultBorder: #5D605C;
  --snackbarDefaultIcon: #5D605C;
  --snackbarSuccessBg: #E0F1D9;
  --snackbarSuccessText: #358935;
  --snackbarSuccessBorder: #358935;
  --snackbarSuccessIcon: #358935;
  --snackbarErrorBg: #F9E1DC;
  --snackbarErrorText: #C80D12;
  --snackbarErrorBorder: #C80D12;
  --snackbarErrorIcon: #C80D12;
}

._themeLight_ww9it_5 {
  --clrPrimary: #F4F4F5;
  --clrPrimary30: rgba(244, 244, 245, 0.3);
  --clrSecondary: #FEFEFE;
  --clrTertiary: #E4E4E7;
  --clrPrimaryReverse: #101418;
  --clrSecondaryReverse: #0A0F14;
  --clrTertiaryReverse: #212327;
  --clrTextPrimary: #101418;
  --clrTextSecondary: #2E3337;
  --clrTextTertiary: #7C7C7C;
  --clrTextPrimaryReverse: #F4F4F5;
  --clrTextSecondaryReverse: #CDCDCD;
  --clrTextTertiaryReverse: #8A8A8A;
  --clrError-100: #c03b3b;
  --clrError-50: #f6c5c5;
  --clrSuccess-100: #30d330;
  --clrSuccess-50: #bbffbb;
  --clrSuccessOnTint: #1f4f1f;
  --clrErrorOnTint: #7a1f1f;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgb(50, 126, 75, 0.1) 30%,
          rgb(94, 178, 122, 0.36) 60%,
          rgb(144, 215, 168) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(175, 49, 49, 0.1) 30%,
          rgba(238, 70, 70, 0.36) 60%,
          rgb(255, 173, 173) 100%);
  --clrNavBackground: rgba(244, 244, 245, 0.15);
  --clrNavItemActive: rgba(211, 211, 211, 0.4);
  --clrNavItemHover: rgba(0, 0, 0, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0000c1;
  --clrGlassBackground: rgba(255, 255, 255, 0.5);
  --clrGlassBackgroundStrong: rgba(255, 255, 255, 0.5);
  --clrGlassBorder: rgba(0, 0, 0, 0.1);
  --snackbarDefaultBg: #F1ECE9;
  --snackbarDefaultText: #5D605C;
  --snackbarDefaultBorder: #5D605C;
  --snackbarDefaultIcon: #5D605C;
  --snackbarSuccessBg: #E0F1D9;
  --snackbarSuccessText: #358935;
  --snackbarSuccessBorder: #358935;
  --snackbarSuccessIcon: #358935;
  --snackbarErrorBg: #F9E1DC;
  --snackbarErrorText: #C80D12;
  --snackbarErrorBorder: #C80D12;
  --snackbarErrorIcon: #C80D12;
}

._themeDark_ww9it_131 {
  --clrPrimary: #0F1418;
  --clrPrimary30: rgba(15, 20, 25, 0.3);
  --clrSecondary: #0A0F14;
  --clrTertiary: #212327;
  --clrPrimaryReverse: #F4F4F5;
  --clrSecondaryReverse: #FEFEFE;
  --clrTertiaryReverse: #E4E4E7;
  --clrTextPrimary: #F4F4F5;
  --clrTextSecondary: #CDCDCD;
  --clrTextTertiary: #8A8A8A;
  --clrTextPrimaryReverse: #101418;
  --clrTextSecondaryReverse: #2E3337;
  --clrTextTertiaryReverse: #7C7C7C;
  --clrError-100: #c84d4d;
  --clrError-50: #641f1f;
  --clrSuccess-100: #3EA03E;
  --clrSuccess-50: #2d692d;
  --clrSuccessOnTint: #d6ffd6;
  --clrErrorOnTint: #ffd6d6;
  --clrWarning-100: #E88434;
  --clrWarning-50: #C49168;
  --clrAccent-100: #FFFFFF;
  --clrAccent-80: rgba(255, 255, 255, 0.8);
  --clrAccent-60: rgba(255, 255, 255, 0.6);
  --clrAccent-50: rgba(255, 255, 255, 0.5);
  --clrAccent-40: rgba(255, 255, 255, 0.4);
  --clrAccent-30: rgba(255, 255, 255, 0.3);
  --clrAccent-20: rgba(255, 255, 255, 0.2);
  --clrAccent-10: rgba(255, 255, 255, 0.1);
  --clrGradient: linear-gradient(90deg, #262a2e 10%, var(--clrPrimary) 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(50, 126, 75, 0.15) 30%,
          rgba(50, 126, 75, 0.3) 60%,
          rgba(50, 126, 75, 0.5) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(167, 44, 44, 0) 0%,
          rgba(167, 44, 44, 0.15) 30%,
          rgba(167, 44, 44, 0.3) 60%,
          rgba(167, 44, 44, 0.5) 100%);
  --clrNavBackground: rgba(0, 0, 0, 0.15);
  --clrNavItemActive: rgba(24, 24, 24, 0.49);
  --clrNavItemHover: rgba(255, 255, 255, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0F1418;
  --clrGlassBackground: rgba(15, 20, 24, 0.5);
  --clrGlassBackgroundStrong: rgba(15, 20, 24, 0.6);
  --clrGlassBorder: rgba(255, 255, 255, 0.1);
  --snackbarDefaultBg: #414141;
  --snackbarDefaultText: #BABABA;
  --snackbarDefaultBorder: #BABABA;
  --snackbarDefaultIcon: #BABABA;
  --snackbarSuccessBg: #145E18;
  --snackbarSuccessText: #8FE094;
  --snackbarSuccessBorder: #8FE094;
  --snackbarSuccessIcon: #8FE094;
  --snackbarErrorBg: #910C09;
  --snackbarErrorText: #FE9E9D;
  --snackbarErrorBorder: #FE9E9D;
  --snackbarErrorIcon: #FE9E9D;
}

/* 

Note: 
    If you want something done quick, ask AI to buuild your color themes.
    If you want to do it right and tidy though, do it manually. 

    - Theo

*/
:root {
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --font-accent: "Jaro", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}

html,
body {
  font-family: var(--font-sans);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

._pageContainer_ww9it_216 {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
  background-color: var(--clrSecondary);
  overflow: hidden;
  position: relative;
}

._dotGridBackground_ww9it_226 {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 0;
  pointer-events: none;
}

._header_ww9it_236 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 24px 24px;
  text-align: center;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}
@media (min-width: 840px) {
  ._header_ww9it_236 {
    padding: 80px 24px 40px;
  }
}
._header_ww9it_236 ._logo_ww9it_252 {
  width: 64px;
  height: 64px;
  object-fit: contain;
  margin-bottom: 16px;
  box-shadow: -8px -8px 16px rgba(58, 127, 160, 0.15), 8px 8px 16px rgba(114, 80, 123, 0.15);
  border-radius: 18px;
  background-color: transparent;
}
@media (min-width: 840px) {
  ._header_ww9it_236 ._logo_ww9it_252 {
    width: 125px;
    height: 125px;
    border-radius: 36px;
  }
}
._header_ww9it_236 ._welcomeTitle_ww9it_268 {
  font-family: var(--font-sans);
  font-size: 24px;
  font-weight: 600;
  color: var(--clrTextPrimary);
  margin: 0 0 8px 0;
}
@media (min-width: 840px) {
  ._header_ww9it_236 ._welcomeTitle_ww9it_268 {
    font-size: 32px;
  }
}
._header_ww9it_236 ._welcomeSubtitle_ww9it_280 {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 400;
  color: var(--clrTextTertiary);
  margin: 0;
}
@media (min-width: 840px) {
  ._header_ww9it_236 ._welcomeSubtitle_ww9it_280 {
    font-size: 16px;
  }
}

._carouselContainer_ww9it_293 {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  overflow: hidden;
  position: absolute;
  top: 25%;
  z-index: 0;
  margin: 16px 0;
}
@media (min-width: 840px) {
  ._carouselContainer_ww9it_293 {
    margin: 24px 0;
  }
}

._drawer_ww9it_311 {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 0 16px 16px;
  max-width: 600px;
  width: 100%;
  margin: 0 auto;
  transition: all 0.3s ease-out;
  position: relative;
  z-index: 10;
}
@media (min-width: 840px) {
  ._drawer_ww9it_311 {
    padding: 0 24px 24px;
  }
}

._drawerContent_ww9it_330 {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 32px;
  background: rgba(10, 15, 20, 0.6);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(198, 198, 198, 0.2);
  border-radius: 32px;
  box-shadow: 0px 0px 8px 0px rgba(255, 255, 255, 0.15);
  overflow: hidden;
  animation: _drawerSlideIn_ww9it_1 0.3s ease-out;
}
@keyframes _drawerSlideIn_ww9it_1 {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

._textPrompt_ww9it_355 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}
._textPrompt_ww9it_355 ._drawerTitle_ww9it_361 {
  font-family: var(--font-sans);
  font-size: 24px;
  font-weight: 500;
  color: #FFFFFF;
  margin: 0;
  line-height: normal;
}
._textPrompt_ww9it_355 ._drawerSubtitle_ww9it_369 {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 400;
  color: rgba(198, 198, 198, 0.6);
  margin: 0;
  line-height: normal;
}

._buttons_ww9it_378 {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
._buttons_ww9it_378 ._buttonRow_ww9it_383 {
  display: flex;
  gap: 8px;
  align-items: center;
  width: 100%;
}

._guestText_ww9it_390 {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 400;
  color: rgba(198, 198, 198, 0.6);
  text-align: center;
  margin: 0;
}
._guestText_ww9it_390 ._guestLink_ww9it_398 {
  background: none;
  border: none;
  padding: 0;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 700;
  color: rgba(198, 198, 198, 0.6);
  text-decoration: underline;
  cursor: pointer;
  transition: color 0.2s ease;
}
._guestText_ww9it_390 ._guestLink_ww9it_398:hover {
  color: rgba(198, 198, 198, 0.8);
}

._termsText_ww9it_414 {
  font-family: var(--font-sans);
  font-size: 12px;
  text-align: center;
  font-weight: 400;
  color: rgba(198, 198, 198, 0.6);
  margin: 0;
  line-height: 1.5;
}
._termsText_ww9it_414 ._termsLink_ww9it_423 {
  font-weight: 700;
  color: rgba(198, 198, 198, 0.6);
  text-decoration: none;
}
._termsText_ww9it_414 ._termsLink_ww9it_423:hover {
  text-decoration: underline;
}

._formInputs_ww9it_432 {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
._formInputs_ww9it_432 ._buttonRow_ww9it_383 {
  display: flex;
  gap: 8px;
  align-items: center;
  width: 100%;
}

._checkboxContainer_ww9it_444 {
  display: flex;
  flex-direction: column;
}

._termsCheckbox_ww9it_449 {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 8px;
}
._termsCheckbox_ww9it_449 ._checkbox_ww9it_444 {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  cursor: pointer;
  accent-color: var(--clrAccent-100);
}
._termsCheckbox_ww9it_449 ._checkboxLabel_ww9it_463 {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 400;
  color: rgba(198, 198, 198, 0.8);
  line-height: 1.5;
  cursor: pointer;
}
._termsCheckbox_ww9it_449 ._checkboxLabel_ww9it_463 ._termsLink_ww9it_423 {
  font-weight: 700;
  color: rgba(198, 198, 198, 0.8);
  text-decoration: underline;
  transition: color 0.2s ease;
}
._termsCheckbox_ww9it_449 ._checkboxLabel_ww9it_463 ._termsLink_ww9it_423:hover {
  color: rgb(198, 198, 198);
}

._spoiler_ww9it_481 {
  position: relative;
  display: inline-block;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(198, 198, 198, 0.2);
  color: transparent;
  text-shadow: 0 0 8px rgba(198, 198, 198, 0.8);
  transition: all 0.3s ease;
}
._spoiler_ww9it_481::before {
  content: "SPOILER";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 0.6rem;
  font-weight: 700;
  color: rgba(198, 198, 198, 0.6);
  letter-spacing: 0.05em;
}
._spoiler_ww9it_481:hover {
  background: rgba(198, 198, 198, 0.3);
}
._spoiler_ww9it_481._revealed_ww9it_506 {
  color: rgba(198, 198, 198, 0.8);
  text-shadow: none;
  background: transparent;
  cursor: default;
}
._spoiler_ww9it_481._revealed_ww9it_506::before {
  display: none;
}

._divider_ww9it_516 {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
}
._divider_ww9it_516 ._dividerLine_ww9it_522 {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(198, 198, 198, 0.3) 50%, transparent 100%);
}
._divider_ww9it_516 ._dividerText_ww9it_527 {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  color: rgba(198, 198, 198, 0.6);
  white-space: nowrap;
}

._forgotLink_ww9it_535 {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 400;
  color: rgba(198, 198, 198, 0.6);
  text-decoration: underline;
  text-align: center;
  transition: color 0.2s ease;
}
._forgotLink_ww9it_535:hover {
  color: rgba(198, 198, 198, 0.8);
}

._errorMessage_ww9it_548 {
  padding: 12px 16px;
  background-color: rgba(200, 77, 77, 0.2);
  border: 1px solid rgba(200, 77, 77, 0.5);
  border-radius: 8px;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 500;
  color: #c84d4d;
  text-align: center;
}html {
  color-scheme: dark;
}

html:has(body._themeLight_1me4s_5),
html:has(body._themePastelLight_1me4s_6) {
  color-scheme: light;
}

:root {
  --clrPrimary: #F4F4F5;
  --clrPrimary30: rgba(244, 244, 245, 0.3);
  --clrSecondary: #FEFEFE;
  --clrTertiary: #E4E4E7;
  --clrPrimaryReverse: #101418;
  --clrSecondaryReverse: #0A0F14;
  --clrTertiaryReverse: #212327;
  --clrTextPrimary: #101418;
  --clrTextSecondary: #2E3337;
  --clrTextTertiary: #7C7C7C;
  --clrTextPrimaryReverse: #F4F4F5;
  --clrTextSecondaryReverse: #CDCDCD;
  --clrTextTertiaryReverse: #8A8A8A;
  --clrError-100: #641f1f;
  --clrError-50: #c84d4d;
  --clrSuccess-100: #2d692d;
  --clrSuccess-50: #3EA03E;
  --clrSuccessOnTint: #0d260d;
  --clrErrorOnTint: #2e0a0a;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgb(50, 126, 75, 0.1) 30%,
          rgb(94, 178, 122, 0.36) 60%,
          rgb(144, 215, 168) 100%);
  --clrNavBackground: rgba(244, 244, 245, 0.15);
  --clrNavItemActive: rgba(211, 211, 211, 0.4);
  --clrNavItemHover: rgba(0, 0, 0, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #F4F4F5;
  --clrGlassBackground: rgba(255, 255, 255, 0.5);
  --clrGlassBackgroundStrong: rgba(255, 255, 255, 0.3);
  --clrGlassBorder: rgba(0, 0, 0, 0.1);
  --snackbarDefaultBg: #F1ECE9;
  --snackbarDefaultText: #5D605C;
  --snackbarDefaultBorder: #5D605C;
  --snackbarDefaultIcon: #5D605C;
  --snackbarSuccessBg: #E0F1D9;
  --snackbarSuccessText: #358935;
  --snackbarSuccessBorder: #358935;
  --snackbarSuccessIcon: #358935;
  --snackbarErrorBg: #F9E1DC;
  --snackbarErrorText: #C80D12;
  --snackbarErrorBorder: #C80D12;
  --snackbarErrorIcon: #C80D12;
}

._themeLight_1me4s_5 {
  --clrPrimary: #F4F4F5;
  --clrPrimary30: rgba(244, 244, 245, 0.3);
  --clrSecondary: #FEFEFE;
  --clrTertiary: #E4E4E7;
  --clrPrimaryReverse: #101418;
  --clrSecondaryReverse: #0A0F14;
  --clrTertiaryReverse: #212327;
  --clrTextPrimary: #101418;
  --clrTextSecondary: #2E3337;
  --clrTextTertiary: #7C7C7C;
  --clrTextPrimaryReverse: #F4F4F5;
  --clrTextSecondaryReverse: #CDCDCD;
  --clrTextTertiaryReverse: #8A8A8A;
  --clrError-100: #c03b3b;
  --clrError-50: #f6c5c5;
  --clrSuccess-100: #30d330;
  --clrSuccess-50: #bbffbb;
  --clrSuccessOnTint: #1f4f1f;
  --clrErrorOnTint: #7a1f1f;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgb(50, 126, 75, 0.1) 30%,
          rgb(94, 178, 122, 0.36) 60%,
          rgb(144, 215, 168) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(175, 49, 49, 0.1) 30%,
          rgba(238, 70, 70, 0.36) 60%,
          rgb(255, 173, 173) 100%);
  --clrNavBackground: rgba(244, 244, 245, 0.15);
  --clrNavItemActive: rgba(211, 211, 211, 0.4);
  --clrNavItemHover: rgba(0, 0, 0, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0000c1;
  --clrGlassBackground: rgba(255, 255, 255, 0.5);
  --clrGlassBackgroundStrong: rgba(255, 255, 255, 0.5);
  --clrGlassBorder: rgba(0, 0, 0, 0.1);
  --snackbarDefaultBg: #F1ECE9;
  --snackbarDefaultText: #5D605C;
  --snackbarDefaultBorder: #5D605C;
  --snackbarDefaultIcon: #5D605C;
  --snackbarSuccessBg: #E0F1D9;
  --snackbarSuccessText: #358935;
  --snackbarSuccessBorder: #358935;
  --snackbarSuccessIcon: #358935;
  --snackbarErrorBg: #F9E1DC;
  --snackbarErrorText: #C80D12;
  --snackbarErrorBorder: #C80D12;
  --snackbarErrorIcon: #C80D12;
}

._themeDark_1me4s_131 {
  --clrPrimary: #0F1418;
  --clrPrimary30: rgba(15, 20, 25, 0.3);
  --clrSecondary: #0A0F14;
  --clrTertiary: #212327;
  --clrPrimaryReverse: #F4F4F5;
  --clrSecondaryReverse: #FEFEFE;
  --clrTertiaryReverse: #E4E4E7;
  --clrTextPrimary: #F4F4F5;
  --clrTextSecondary: #CDCDCD;
  --clrTextTertiary: #8A8A8A;
  --clrTextPrimaryReverse: #101418;
  --clrTextSecondaryReverse: #2E3337;
  --clrTextTertiaryReverse: #7C7C7C;
  --clrError-100: #c84d4d;
  --clrError-50: #641f1f;
  --clrSuccess-100: #3EA03E;
  --clrSuccess-50: #2d692d;
  --clrSuccessOnTint: #d6ffd6;
  --clrErrorOnTint: #ffd6d6;
  --clrWarning-100: #E88434;
  --clrWarning-50: #C49168;
  --clrAccent-100: #FFFFFF;
  --clrAccent-80: rgba(255, 255, 255, 0.8);
  --clrAccent-60: rgba(255, 255, 255, 0.6);
  --clrAccent-50: rgba(255, 255, 255, 0.5);
  --clrAccent-40: rgba(255, 255, 255, 0.4);
  --clrAccent-30: rgba(255, 255, 255, 0.3);
  --clrAccent-20: rgba(255, 255, 255, 0.2);
  --clrAccent-10: rgba(255, 255, 255, 0.1);
  --clrGradient: linear-gradient(90deg, #262a2e 10%, var(--clrPrimary) 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(50, 126, 75, 0.15) 30%,
          rgba(50, 126, 75, 0.3) 60%,
          rgba(50, 126, 75, 0.5) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(167, 44, 44, 0) 0%,
          rgba(167, 44, 44, 0.15) 30%,
          rgba(167, 44, 44, 0.3) 60%,
          rgba(167, 44, 44, 0.5) 100%);
  --clrNavBackground: rgba(0, 0, 0, 0.15);
  --clrNavItemActive: rgba(24, 24, 24, 0.49);
  --clrNavItemHover: rgba(255, 255, 255, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0F1418;
  --clrGlassBackground: rgba(15, 20, 24, 0.5);
  --clrGlassBackgroundStrong: rgba(15, 20, 24, 0.6);
  --clrGlassBorder: rgba(255, 255, 255, 0.1);
  --snackbarDefaultBg: #414141;
  --snackbarDefaultText: #BABABA;
  --snackbarDefaultBorder: #BABABA;
  --snackbarDefaultIcon: #BABABA;
  --snackbarSuccessBg: #145E18;
  --snackbarSuccessText: #8FE094;
  --snackbarSuccessBorder: #8FE094;
  --snackbarSuccessIcon: #8FE094;
  --snackbarErrorBg: #910C09;
  --snackbarErrorText: #FE9E9D;
  --snackbarErrorBorder: #FE9E9D;
  --snackbarErrorIcon: #FE9E9D;
}

/* 

Note: 
    If you want something done quick, ask AI to buuild your color themes.
    If you want to do it right and tidy though, do it manually. 

    - Theo

*/
:root {
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --font-accent: "Jaro", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}

html,
body {
  font-family: var(--font-sans);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

._page_1me4s_216 {
  min-height: 100vh;
  min-height: 100dvh;
  background: radial-gradient(circle at 18% 18%, rgba(168, 85, 247, 0.12), transparent 28rem), linear-gradient(180deg, #090d12 0%, #0f1418 58%, #090d12 100%);
  color: var(--clrTextPrimary);
  display: flex;
  flex-direction: column;
  overflow-x: clip;
  padding-top: 60px;
}

._nav_1me4s_227 {
  width: min(1120px, 100% - 32px);
  margin: 0 auto;
  padding: 22px 0;
  display: flex;
  align-items: center;
}

._brand_1me4s_235 {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #FFFFFF;
  font-family: var(--font-accent);
  font-size: 20px;
  font-weight: 400;
  text-decoration: none;
}

._logo_1me4s_246 {
  width: 34px;
  height: 34px;
  border-radius: 9px;
}

._hero_1me4s_252 {
  width: min(720px, 100% - 32px);
  margin: 20px auto 4px;
  text-align: center;
}

._hero_1me4s_252 h1 {
  width: 100%;
  max-width: none;
  margin: 0 0 14px;
  font-family: var(--font-accent);
  font-size: 32px;
  font-weight: 400;
  line-height: 1.1;
  color: #FFFFFF;
  text-wrap: balance;
}

._subhead_1me4s_270 {
  max-width: 620px;
  margin: 0 auto;
  font-family: var(--font-sans);
  font-size: 16px;
  color: var(--clrAccent-60);
}

._quickBadges_1me4s_278 {
  width: min(720px, 100% - 32px);
  margin: 24px auto 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
}

._platforms_1me4s_288 {
  width: min(960px, 100% - 32px);
  margin: 28px auto 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

._platform_1me4s_288 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  padding: 28px 24px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

._platformTitle_1me4s_307 {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-sans);
  font-size: 20px;
  font-weight: 700;
  color: var(--clrTextPrimary);
}

._platformIcon_1me4s_318 {
  height: 22px;
  width: auto;
  display: block;
}

._appleIcon_1me4s_324 {
  filter: invert(1);
}

._mockup_1me4s_328 {
  width: auto;
  max-width: 100%;
  max-height: 400px;
  object-fit: contain;
  border-radius: 12px;
}

._badgeLink_1me4s_336 {
  display: inline-flex;
  line-height: 0;
  text-decoration: none;
  transition: transform 0.15s ease;
}
._badgeLink_1me4s_336:active {
  transform: scale(0.96);
}

._badge_1me4s_336 {
  height: 52px;
  width: auto;
  display: block;
}

._browserNote_1me4s_352 {
  width: min(720px, 100% - 32px);
  margin: 40px auto 56px;
  text-align: center;
  font-family: var(--font-sans);
  font-size: 16px;
  color: var(--clrAccent-60);
}
._browserNote_1me4s_352 a {
  color: var(--clrTextPrimary);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media (max-width: 620px) {
  ._page_1me4s_216 {
    padding-top: 56px;
  }
  ._platforms_1me4s_288 {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  ._hero_1me4s_252 h1 {
    font-size: 24px;
  }
}
._nav_1me4s_227, ._hero_1me4s_252, ._quickBadges_1me4s_278, ._platforms_1me4s_288, ._browserNote_1me4s_352 {
  box-sizing: border-box;
  width: 100%;
  max-width: var(--site-max-width, 1440px);
  margin-inline: auto;
  padding-inline: var(--site-gutter, 20px);
}html {
  color-scheme: dark;
}

html:has(body._themeLight_16d7x_5),
html:has(body._themePastelLight_16d7x_6) {
  color-scheme: light;
}

:root {
  --clrPrimary: #F4F4F5;
  --clrPrimary30: rgba(244, 244, 245, 0.3);
  --clrSecondary: #FEFEFE;
  --clrTertiary: #E4E4E7;
  --clrPrimaryReverse: #101418;
  --clrSecondaryReverse: #0A0F14;
  --clrTertiaryReverse: #212327;
  --clrTextPrimary: #101418;
  --clrTextSecondary: #2E3337;
  --clrTextTertiary: #7C7C7C;
  --clrTextPrimaryReverse: #F4F4F5;
  --clrTextSecondaryReverse: #CDCDCD;
  --clrTextTertiaryReverse: #8A8A8A;
  --clrError-100: #641f1f;
  --clrError-50: #c84d4d;
  --clrSuccess-100: #2d692d;
  --clrSuccess-50: #3EA03E;
  --clrSuccessOnTint: #0d260d;
  --clrErrorOnTint: #2e0a0a;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgb(50, 126, 75, 0.1) 30%,
          rgb(94, 178, 122, 0.36) 60%,
          rgb(144, 215, 168) 100%);
  --clrNavBackground: rgba(244, 244, 245, 0.15);
  --clrNavItemActive: rgba(211, 211, 211, 0.4);
  --clrNavItemHover: rgba(0, 0, 0, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #F4F4F5;
  --clrGlassBackground: rgba(255, 255, 255, 0.5);
  --clrGlassBackgroundStrong: rgba(255, 255, 255, 0.3);
  --clrGlassBorder: rgba(0, 0, 0, 0.1);
  --snackbarDefaultBg: #F1ECE9;
  --snackbarDefaultText: #5D605C;
  --snackbarDefaultBorder: #5D605C;
  --snackbarDefaultIcon: #5D605C;
  --snackbarSuccessBg: #E0F1D9;
  --snackbarSuccessText: #358935;
  --snackbarSuccessBorder: #358935;
  --snackbarSuccessIcon: #358935;
  --snackbarErrorBg: #F9E1DC;
  --snackbarErrorText: #C80D12;
  --snackbarErrorBorder: #C80D12;
  --snackbarErrorIcon: #C80D12;
}

._themeLight_16d7x_5 {
  --clrPrimary: #F4F4F5;
  --clrPrimary30: rgba(244, 244, 245, 0.3);
  --clrSecondary: #FEFEFE;
  --clrTertiary: #E4E4E7;
  --clrPrimaryReverse: #101418;
  --clrSecondaryReverse: #0A0F14;
  --clrTertiaryReverse: #212327;
  --clrTextPrimary: #101418;
  --clrTextSecondary: #2E3337;
  --clrTextTertiary: #7C7C7C;
  --clrTextPrimaryReverse: #F4F4F5;
  --clrTextSecondaryReverse: #CDCDCD;
  --clrTextTertiaryReverse: #8A8A8A;
  --clrError-100: #c03b3b;
  --clrError-50: #f6c5c5;
  --clrSuccess-100: #30d330;
  --clrSuccess-50: #bbffbb;
  --clrSuccessOnTint: #1f4f1f;
  --clrErrorOnTint: #7a1f1f;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgb(50, 126, 75, 0.1) 30%,
          rgb(94, 178, 122, 0.36) 60%,
          rgb(144, 215, 168) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(175, 49, 49, 0.1) 30%,
          rgba(238, 70, 70, 0.36) 60%,
          rgb(255, 173, 173) 100%);
  --clrNavBackground: rgba(244, 244, 245, 0.15);
  --clrNavItemActive: rgba(211, 211, 211, 0.4);
  --clrNavItemHover: rgba(0, 0, 0, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0000c1;
  --clrGlassBackground: rgba(255, 255, 255, 0.5);
  --clrGlassBackgroundStrong: rgba(255, 255, 255, 0.5);
  --clrGlassBorder: rgba(0, 0, 0, 0.1);
  --snackbarDefaultBg: #F1ECE9;
  --snackbarDefaultText: #5D605C;
  --snackbarDefaultBorder: #5D605C;
  --snackbarDefaultIcon: #5D605C;
  --snackbarSuccessBg: #E0F1D9;
  --snackbarSuccessText: #358935;
  --snackbarSuccessBorder: #358935;
  --snackbarSuccessIcon: #358935;
  --snackbarErrorBg: #F9E1DC;
  --snackbarErrorText: #C80D12;
  --snackbarErrorBorder: #C80D12;
  --snackbarErrorIcon: #C80D12;
}

._themeDark_16d7x_131 {
  --clrPrimary: #0F1418;
  --clrPrimary30: rgba(15, 20, 25, 0.3);
  --clrSecondary: #0A0F14;
  --clrTertiary: #212327;
  --clrPrimaryReverse: #F4F4F5;
  --clrSecondaryReverse: #FEFEFE;
  --clrTertiaryReverse: #E4E4E7;
  --clrTextPrimary: #F4F4F5;
  --clrTextSecondary: #CDCDCD;
  --clrTextTertiary: #8A8A8A;
  --clrTextPrimaryReverse: #101418;
  --clrTextSecondaryReverse: #2E3337;
  --clrTextTertiaryReverse: #7C7C7C;
  --clrError-100: #c84d4d;
  --clrError-50: #641f1f;
  --clrSuccess-100: #3EA03E;
  --clrSuccess-50: #2d692d;
  --clrSuccessOnTint: #d6ffd6;
  --clrErrorOnTint: #ffd6d6;
  --clrWarning-100: #E88434;
  --clrWarning-50: #C49168;
  --clrAccent-100: #FFFFFF;
  --clrAccent-80: rgba(255, 255, 255, 0.8);
  --clrAccent-60: rgba(255, 255, 255, 0.6);
  --clrAccent-50: rgba(255, 255, 255, 0.5);
  --clrAccent-40: rgba(255, 255, 255, 0.4);
  --clrAccent-30: rgba(255, 255, 255, 0.3);
  --clrAccent-20: rgba(255, 255, 255, 0.2);
  --clrAccent-10: rgba(255, 255, 255, 0.1);
  --clrGradient: linear-gradient(90deg, #262a2e 10%, var(--clrPrimary) 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(50, 126, 75, 0.15) 30%,
          rgba(50, 126, 75, 0.3) 60%,
          rgba(50, 126, 75, 0.5) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(167, 44, 44, 0) 0%,
          rgba(167, 44, 44, 0.15) 30%,
          rgba(167, 44, 44, 0.3) 60%,
          rgba(167, 44, 44, 0.5) 100%);
  --clrNavBackground: rgba(0, 0, 0, 0.15);
  --clrNavItemActive: rgba(24, 24, 24, 0.49);
  --clrNavItemHover: rgba(255, 255, 255, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0F1418;
  --clrGlassBackground: rgba(15, 20, 24, 0.5);
  --clrGlassBackgroundStrong: rgba(15, 20, 24, 0.6);
  --clrGlassBorder: rgba(255, 255, 255, 0.1);
  --snackbarDefaultBg: #414141;
  --snackbarDefaultText: #BABABA;
  --snackbarDefaultBorder: #BABABA;
  --snackbarDefaultIcon: #BABABA;
  --snackbarSuccessBg: #145E18;
  --snackbarSuccessText: #8FE094;
  --snackbarSuccessBorder: #8FE094;
  --snackbarSuccessIcon: #8FE094;
  --snackbarErrorBg: #910C09;
  --snackbarErrorText: #FE9E9D;
  --snackbarErrorBorder: #FE9E9D;
  --snackbarErrorIcon: #FE9E9D;
}

/* 

Note: 
    If you want something done quick, ask AI to buuild your color themes.
    If you want to do it right and tidy though, do it manually. 

    - Theo

*/
:root {
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --font-accent: "Jaro", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}

html,
body {
  font-family: var(--font-sans);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

._page_16d7x_216 {
  min-height: 100vh;
  min-height: 100dvh;
  padding: 132px 20px 80px;
  background: #0f1418;
  color: #f4f4f5;
}

._content_16d7x_224 {
  width: min(680px, 100%);
  margin: 0 auto;
}

._eyebrow_16d7x_229 {
  margin: 0 0 14px;
  color: #c084fc;
  font-size: 13px;
  font-weight: 750;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

._content_16d7x_224 h1 {
  max-width: 14ch;
  margin: 0;
  font-size: clamp(38px, 7vw, 64px);
  line-height: 0.98;
  letter-spacing: -0.045em;
}

._lead_16d7x_246 {
  max-width: 60ch;
  margin: 28px 0 0;
  color: rgba(244, 244, 245, 0.88);
  font-size: 18px;
  line-height: 1.6;
}

._detail_16d7x_254 {
  max-width: 60ch;
  margin: 14px 0 0;
  color: rgba(244, 244, 245, 0.62);
  font-size: 15px;
  line-height: 1.65;
}

._divider_16d7x_262 {
  height: 1px;
  margin: 40px 0;
  background: rgba(255, 255, 255, 0.14);
}

._content_16d7x_224 h2 {
  margin: 0 0 14px;
  font-size: 16px;
  font-weight: 700;
}

._storeLinks_16d7x_274 {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}
._storeLinks_16d7x_274 a {
  display: inline-flex;
  line-height: 0;
  transition: opacity 0.15s ease;
}
._storeLinks_16d7x_274 a:hover {
  opacity: 0.78;
}
._storeLinks_16d7x_274 img {
  display: block;
  width: auto;
  height: 44px;
}

._webLink_16d7x_294 {
  margin: 18px 0 0;
  color: rgba(244, 244, 245, 0.62);
  font-size: 14px;
}
._webLink_16d7x_294 a {
  color: #f4f4f5;
  font-weight: 700;
  text-underline-offset: 3px;
}

._social_16d7x_305 {
  margin-top: 40px;
}

._socialLinks_16d7x_309 {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
._socialLinks_16d7x_309 a {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  gap: 8px;
  padding: 0 12px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 7px;
  color: #f4f4f5;
  font-size: 14px;
  font-weight: 650;
  text-decoration: none;
}
._socialLinks_16d7x_309 a:hover {
  background: rgba(255, 255, 255, 0.08);
}

@media (max-width: 840px) {
  ._page_16d7x_216 {
    padding-top: 108px;
  }
  ._lead_16d7x_246 {
    font-size: 16px;
  }
}
._page_16d7x_216 {
  padding-inline: 0;
}

._content_16d7x_224 {
  box-sizing: border-box;
  width: 100%;
  max-width: var(--site-max-width, 1440px);
  margin-inline: auto;
  padding-inline: var(--site-gutter, 20px);
}html {
  color-scheme: dark;
}

html:has(body._themeLight_1llgu_5),
html:has(body._themePastelLight_1llgu_6) {
  color-scheme: light;
}

:root {
  --clrPrimary: #F4F4F5;
  --clrPrimary30: rgba(244, 244, 245, 0.3);
  --clrSecondary: #FEFEFE;
  --clrTertiary: #E4E4E7;
  --clrPrimaryReverse: #101418;
  --clrSecondaryReverse: #0A0F14;
  --clrTertiaryReverse: #212327;
  --clrTextPrimary: #101418;
  --clrTextSecondary: #2E3337;
  --clrTextTertiary: #7C7C7C;
  --clrTextPrimaryReverse: #F4F4F5;
  --clrTextSecondaryReverse: #CDCDCD;
  --clrTextTertiaryReverse: #8A8A8A;
  --clrError-100: #641f1f;
  --clrError-50: #c84d4d;
  --clrSuccess-100: #2d692d;
  --clrSuccess-50: #3EA03E;
  --clrSuccessOnTint: #0d260d;
  --clrErrorOnTint: #2e0a0a;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgb(50, 126, 75, 0.1) 30%,
          rgb(94, 178, 122, 0.36) 60%,
          rgb(144, 215, 168) 100%);
  --clrNavBackground: rgba(244, 244, 245, 0.15);
  --clrNavItemActive: rgba(211, 211, 211, 0.4);
  --clrNavItemHover: rgba(0, 0, 0, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #F4F4F5;
  --clrGlassBackground: rgba(255, 255, 255, 0.5);
  --clrGlassBackgroundStrong: rgba(255, 255, 255, 0.3);
  --clrGlassBorder: rgba(0, 0, 0, 0.1);
  --snackbarDefaultBg: #F1ECE9;
  --snackbarDefaultText: #5D605C;
  --snackbarDefaultBorder: #5D605C;
  --snackbarDefaultIcon: #5D605C;
  --snackbarSuccessBg: #E0F1D9;
  --snackbarSuccessText: #358935;
  --snackbarSuccessBorder: #358935;
  --snackbarSuccessIcon: #358935;
  --snackbarErrorBg: #F9E1DC;
  --snackbarErrorText: #C80D12;
  --snackbarErrorBorder: #C80D12;
  --snackbarErrorIcon: #C80D12;
}

._themeLight_1llgu_5 {
  --clrPrimary: #F4F4F5;
  --clrPrimary30: rgba(244, 244, 245, 0.3);
  --clrSecondary: #FEFEFE;
  --clrTertiary: #E4E4E7;
  --clrPrimaryReverse: #101418;
  --clrSecondaryReverse: #0A0F14;
  --clrTertiaryReverse: #212327;
  --clrTextPrimary: #101418;
  --clrTextSecondary: #2E3337;
  --clrTextTertiary: #7C7C7C;
  --clrTextPrimaryReverse: #F4F4F5;
  --clrTextSecondaryReverse: #CDCDCD;
  --clrTextTertiaryReverse: #8A8A8A;
  --clrError-100: #c03b3b;
  --clrError-50: #f6c5c5;
  --clrSuccess-100: #30d330;
  --clrSuccess-50: #bbffbb;
  --clrSuccessOnTint: #1f4f1f;
  --clrErrorOnTint: #7a1f1f;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgb(50, 126, 75, 0.1) 30%,
          rgb(94, 178, 122, 0.36) 60%,
          rgb(144, 215, 168) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(175, 49, 49, 0.1) 30%,
          rgba(238, 70, 70, 0.36) 60%,
          rgb(255, 173, 173) 100%);
  --clrNavBackground: rgba(244, 244, 245, 0.15);
  --clrNavItemActive: rgba(211, 211, 211, 0.4);
  --clrNavItemHover: rgba(0, 0, 0, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0000c1;
  --clrGlassBackground: rgba(255, 255, 255, 0.5);
  --clrGlassBackgroundStrong: rgba(255, 255, 255, 0.5);
  --clrGlassBorder: rgba(0, 0, 0, 0.1);
  --snackbarDefaultBg: #F1ECE9;
  --snackbarDefaultText: #5D605C;
  --snackbarDefaultBorder: #5D605C;
  --snackbarDefaultIcon: #5D605C;
  --snackbarSuccessBg: #E0F1D9;
  --snackbarSuccessText: #358935;
  --snackbarSuccessBorder: #358935;
  --snackbarSuccessIcon: #358935;
  --snackbarErrorBg: #F9E1DC;
  --snackbarErrorText: #C80D12;
  --snackbarErrorBorder: #C80D12;
  --snackbarErrorIcon: #C80D12;
}

._themeDark_1llgu_131 {
  --clrPrimary: #0F1418;
  --clrPrimary30: rgba(15, 20, 25, 0.3);
  --clrSecondary: #0A0F14;
  --clrTertiary: #212327;
  --clrPrimaryReverse: #F4F4F5;
  --clrSecondaryReverse: #FEFEFE;
  --clrTertiaryReverse: #E4E4E7;
  --clrTextPrimary: #F4F4F5;
  --clrTextSecondary: #CDCDCD;
  --clrTextTertiary: #8A8A8A;
  --clrTextPrimaryReverse: #101418;
  --clrTextSecondaryReverse: #2E3337;
  --clrTextTertiaryReverse: #7C7C7C;
  --clrError-100: #c84d4d;
  --clrError-50: #641f1f;
  --clrSuccess-100: #3EA03E;
  --clrSuccess-50: #2d692d;
  --clrSuccessOnTint: #d6ffd6;
  --clrErrorOnTint: #ffd6d6;
  --clrWarning-100: #E88434;
  --clrWarning-50: #C49168;
  --clrAccent-100: #FFFFFF;
  --clrAccent-80: rgba(255, 255, 255, 0.8);
  --clrAccent-60: rgba(255, 255, 255, 0.6);
  --clrAccent-50: rgba(255, 255, 255, 0.5);
  --clrAccent-40: rgba(255, 255, 255, 0.4);
  --clrAccent-30: rgba(255, 255, 255, 0.3);
  --clrAccent-20: rgba(255, 255, 255, 0.2);
  --clrAccent-10: rgba(255, 255, 255, 0.1);
  --clrGradient: linear-gradient(90deg, #262a2e 10%, var(--clrPrimary) 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(50, 126, 75, 0.15) 30%,
          rgba(50, 126, 75, 0.3) 60%,
          rgba(50, 126, 75, 0.5) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(167, 44, 44, 0) 0%,
          rgba(167, 44, 44, 0.15) 30%,
          rgba(167, 44, 44, 0.3) 60%,
          rgba(167, 44, 44, 0.5) 100%);
  --clrNavBackground: rgba(0, 0, 0, 0.15);
  --clrNavItemActive: rgba(24, 24, 24, 0.49);
  --clrNavItemHover: rgba(255, 255, 255, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0F1418;
  --clrGlassBackground: rgba(15, 20, 24, 0.5);
  --clrGlassBackgroundStrong: rgba(15, 20, 24, 0.6);
  --clrGlassBorder: rgba(255, 255, 255, 0.1);
  --snackbarDefaultBg: #414141;
  --snackbarDefaultText: #BABABA;
  --snackbarDefaultBorder: #BABABA;
  --snackbarDefaultIcon: #BABABA;
  --snackbarSuccessBg: #145E18;
  --snackbarSuccessText: #8FE094;
  --snackbarSuccessBorder: #8FE094;
  --snackbarSuccessIcon: #8FE094;
  --snackbarErrorBg: #910C09;
  --snackbarErrorText: #FE9E9D;
  --snackbarErrorBorder: #FE9E9D;
  --snackbarErrorIcon: #FE9E9D;
}

/* 

Note: 
    If you want something done quick, ask AI to buuild your color themes.
    If you want to do it right and tidy though, do it manually. 

    - Theo

*/
:root {
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --font-accent: "Jaro", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}

html,
body {
  font-family: var(--font-sans);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

._pageContainer_1llgu_216 {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
  background-color: var(--clrSecondary);
  overflow: hidden;
}

._header_1llgu_225 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 24px 24px;
  text-align: center;
  flex-shrink: 0;
}
@media (min-width: 840px) {
  ._header_1llgu_225 {
    padding: 80px 24px 40px;
  }
}
._header_1llgu_225 ._logo_1llgu_239 {
  width: 100px;
  height: 100px;
  object-fit: contain;
  margin-bottom: 16px;
}
@media (min-width: 840px) {
  ._header_1llgu_225 ._logo_1llgu_239 {
    width: 125px;
    height: 125px;
  }
}
._header_1llgu_225 ._welcomeTitle_1llgu_251 {
  font-family: var(--font-sans);
  font-size: 24px;
  font-weight: 600;
  color: var(--clrTextPrimary);
  margin: 0 0 8px 0;
}
@media (min-width: 840px) {
  ._header_1llgu_225 ._welcomeTitle_1llgu_251 {
    font-size: 32px;
  }
}
._header_1llgu_225 ._welcomeSubtitle_1llgu_263 {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 400;
  color: var(--clrTextTertiary);
  margin: 0;
}
@media (min-width: 840px) {
  ._header_1llgu_225 ._welcomeSubtitle_1llgu_263 {
    font-size: 16px;
  }
}

._drawer_1llgu_276 {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 0 16px 16px;
  max-width: 600px;
  width: 100%;
  margin: 0 auto;
  transition: all 0.3s ease-out;
}
@media (min-width: 840px) {
  ._drawer_1llgu_276 {
    padding: 0 24px 24px;
  }
}

._drawerContent_1llgu_293 {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 32px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.02) 0%, rgba(64, 64, 64, 0.02) 48%, rgba(0, 0, 0, 0.02) 100%);
  border: 1px solid rgba(198, 198, 198, 0.3);
  border-radius: 32px;
  box-shadow: 0px 0px 8px 0px rgba(255, 255, 255, 0.15);
  overflow: hidden;
  animation: _drawerSlideIn_1llgu_1 0.3s ease-out;
}
@keyframes _drawerSlideIn_1llgu_1 {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

._textPrompt_1llgu_316 {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
._textPrompt_1llgu_316 ._drawerTitle_1llgu_321 {
  font-family: var(--font-sans);
  font-size: 24px;
  font-weight: 500;
  color: #FFFFFF;
  margin: 0;
  line-height: normal;
}
._textPrompt_1llgu_316 ._drawerSubtitle_1llgu_329 {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 400;
  color: rgba(198, 198, 198, 0.6);
  margin: 0;
  line-height: normal;
}

._formInputs_1llgu_338 {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

._backLink_1llgu_344 {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 400;
  color: rgba(198, 198, 198, 0.6);
  text-decoration: underline;
  text-align: center;
  transition: color 0.2s ease;
}
._backLink_1llgu_344:hover {
  color: rgba(198, 198, 198, 0.8);
}

._errorMessage_1llgu_357 {
  padding: 12px 16px;
  background-color: rgba(200, 77, 77, 0.2);
  border: 1px solid rgba(200, 77, 77, 0.5);
  border-radius: 8px;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 500;
  color: #c84d4d;
  text-align: center;
}html {
  color-scheme: dark;
}

html:has(body._themeLight_hqs8l_5),
html:has(body._themePastelLight_hqs8l_6) {
  color-scheme: light;
}

:root {
  --clrPrimary: #F4F4F5;
  --clrPrimary30: rgba(244, 244, 245, 0.3);
  --clrSecondary: #FEFEFE;
  --clrTertiary: #E4E4E7;
  --clrPrimaryReverse: #101418;
  --clrSecondaryReverse: #0A0F14;
  --clrTertiaryReverse: #212327;
  --clrTextPrimary: #101418;
  --clrTextSecondary: #2E3337;
  --clrTextTertiary: #7C7C7C;
  --clrTextPrimaryReverse: #F4F4F5;
  --clrTextSecondaryReverse: #CDCDCD;
  --clrTextTertiaryReverse: #8A8A8A;
  --clrError-100: #641f1f;
  --clrError-50: #c84d4d;
  --clrSuccess-100: #2d692d;
  --clrSuccess-50: #3EA03E;
  --clrSuccessOnTint: #0d260d;
  --clrErrorOnTint: #2e0a0a;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgb(50, 126, 75, 0.1) 30%,
          rgb(94, 178, 122, 0.36) 60%,
          rgb(144, 215, 168) 100%);
  --clrNavBackground: rgba(244, 244, 245, 0.15);
  --clrNavItemActive: rgba(211, 211, 211, 0.4);
  --clrNavItemHover: rgba(0, 0, 0, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #F4F4F5;
  --clrGlassBackground: rgba(255, 255, 255, 0.5);
  --clrGlassBackgroundStrong: rgba(255, 255, 255, 0.3);
  --clrGlassBorder: rgba(0, 0, 0, 0.1);
  --snackbarDefaultBg: #F1ECE9;
  --snackbarDefaultText: #5D605C;
  --snackbarDefaultBorder: #5D605C;
  --snackbarDefaultIcon: #5D605C;
  --snackbarSuccessBg: #E0F1D9;
  --snackbarSuccessText: #358935;
  --snackbarSuccessBorder: #358935;
  --snackbarSuccessIcon: #358935;
  --snackbarErrorBg: #F9E1DC;
  --snackbarErrorText: #C80D12;
  --snackbarErrorBorder: #C80D12;
  --snackbarErrorIcon: #C80D12;
}

._themeLight_hqs8l_5 {
  --clrPrimary: #F4F4F5;
  --clrPrimary30: rgba(244, 244, 245, 0.3);
  --clrSecondary: #FEFEFE;
  --clrTertiary: #E4E4E7;
  --clrPrimaryReverse: #101418;
  --clrSecondaryReverse: #0A0F14;
  --clrTertiaryReverse: #212327;
  --clrTextPrimary: #101418;
  --clrTextSecondary: #2E3337;
  --clrTextTertiary: #7C7C7C;
  --clrTextPrimaryReverse: #F4F4F5;
  --clrTextSecondaryReverse: #CDCDCD;
  --clrTextTertiaryReverse: #8A8A8A;
  --clrError-100: #c03b3b;
  --clrError-50: #f6c5c5;
  --clrSuccess-100: #30d330;
  --clrSuccess-50: #bbffbb;
  --clrSuccessOnTint: #1f4f1f;
  --clrErrorOnTint: #7a1f1f;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgb(50, 126, 75, 0.1) 30%,
          rgb(94, 178, 122, 0.36) 60%,
          rgb(144, 215, 168) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(175, 49, 49, 0.1) 30%,
          rgba(238, 70, 70, 0.36) 60%,
          rgb(255, 173, 173) 100%);
  --clrNavBackground: rgba(244, 244, 245, 0.15);
  --clrNavItemActive: rgba(211, 211, 211, 0.4);
  --clrNavItemHover: rgba(0, 0, 0, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0000c1;
  --clrGlassBackground: rgba(255, 255, 255, 0.5);
  --clrGlassBackgroundStrong: rgba(255, 255, 255, 0.5);
  --clrGlassBorder: rgba(0, 0, 0, 0.1);
  --snackbarDefaultBg: #F1ECE9;
  --snackbarDefaultText: #5D605C;
  --snackbarDefaultBorder: #5D605C;
  --snackbarDefaultIcon: #5D605C;
  --snackbarSuccessBg: #E0F1D9;
  --snackbarSuccessText: #358935;
  --snackbarSuccessBorder: #358935;
  --snackbarSuccessIcon: #358935;
  --snackbarErrorBg: #F9E1DC;
  --snackbarErrorText: #C80D12;
  --snackbarErrorBorder: #C80D12;
  --snackbarErrorIcon: #C80D12;
}

._themeDark_hqs8l_131 {
  --clrPrimary: #0F1418;
  --clrPrimary30: rgba(15, 20, 25, 0.3);
  --clrSecondary: #0A0F14;
  --clrTertiary: #212327;
  --clrPrimaryReverse: #F4F4F5;
  --clrSecondaryReverse: #FEFEFE;
  --clrTertiaryReverse: #E4E4E7;
  --clrTextPrimary: #F4F4F5;
  --clrTextSecondary: #CDCDCD;
  --clrTextTertiary: #8A8A8A;
  --clrTextPrimaryReverse: #101418;
  --clrTextSecondaryReverse: #2E3337;
  --clrTextTertiaryReverse: #7C7C7C;
  --clrError-100: #c84d4d;
  --clrError-50: #641f1f;
  --clrSuccess-100: #3EA03E;
  --clrSuccess-50: #2d692d;
  --clrSuccessOnTint: #d6ffd6;
  --clrErrorOnTint: #ffd6d6;
  --clrWarning-100: #E88434;
  --clrWarning-50: #C49168;
  --clrAccent-100: #FFFFFF;
  --clrAccent-80: rgba(255, 255, 255, 0.8);
  --clrAccent-60: rgba(255, 255, 255, 0.6);
  --clrAccent-50: rgba(255, 255, 255, 0.5);
  --clrAccent-40: rgba(255, 255, 255, 0.4);
  --clrAccent-30: rgba(255, 255, 255, 0.3);
  --clrAccent-20: rgba(255, 255, 255, 0.2);
  --clrAccent-10: rgba(255, 255, 255, 0.1);
  --clrGradient: linear-gradient(90deg, #262a2e 10%, var(--clrPrimary) 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(50, 126, 75, 0.15) 30%,
          rgba(50, 126, 75, 0.3) 60%,
          rgba(50, 126, 75, 0.5) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(167, 44, 44, 0) 0%,
          rgba(167, 44, 44, 0.15) 30%,
          rgba(167, 44, 44, 0.3) 60%,
          rgba(167, 44, 44, 0.5) 100%);
  --clrNavBackground: rgba(0, 0, 0, 0.15);
  --clrNavItemActive: rgba(24, 24, 24, 0.49);
  --clrNavItemHover: rgba(255, 255, 255, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0F1418;
  --clrGlassBackground: rgba(15, 20, 24, 0.5);
  --clrGlassBackgroundStrong: rgba(15, 20, 24, 0.6);
  --clrGlassBorder: rgba(255, 255, 255, 0.1);
  --snackbarDefaultBg: #414141;
  --snackbarDefaultText: #BABABA;
  --snackbarDefaultBorder: #BABABA;
  --snackbarDefaultIcon: #BABABA;
  --snackbarSuccessBg: #145E18;
  --snackbarSuccessText: #8FE094;
  --snackbarSuccessBorder: #8FE094;
  --snackbarSuccessIcon: #8FE094;
  --snackbarErrorBg: #910C09;
  --snackbarErrorText: #FE9E9D;
  --snackbarErrorBorder: #FE9E9D;
  --snackbarErrorIcon: #FE9E9D;
}

/* 

Note: 
    If you want something done quick, ask AI to buuild your color themes.
    If you want to do it right and tidy though, do it manually. 

    - Theo

*/
:root {
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --font-accent: "Jaro", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}

html,
body {
  font-family: var(--font-sans);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

._homepageContainer_hqs8l_216 ._tournamentBtns_hqs8l_216 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 32px;
  border: 1px solid red;
}html {
  color-scheme: dark;
}

html:has(body._themeLight_1z0b4_5),
html:has(body._themePastelLight_1z0b4_6) {
  color-scheme: light;
}

:root {
  --clrPrimary: #F4F4F5;
  --clrPrimary30: rgba(244, 244, 245, 0.3);
  --clrSecondary: #FEFEFE;
  --clrTertiary: #E4E4E7;
  --clrPrimaryReverse: #101418;
  --clrSecondaryReverse: #0A0F14;
  --clrTertiaryReverse: #212327;
  --clrTextPrimary: #101418;
  --clrTextSecondary: #2E3337;
  --clrTextTertiary: #7C7C7C;
  --clrTextPrimaryReverse: #F4F4F5;
  --clrTextSecondaryReverse: #CDCDCD;
  --clrTextTertiaryReverse: #8A8A8A;
  --clrError-100: #641f1f;
  --clrError-50: #c84d4d;
  --clrSuccess-100: #2d692d;
  --clrSuccess-50: #3EA03E;
  --clrSuccessOnTint: #0d260d;
  --clrErrorOnTint: #2e0a0a;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgb(50, 126, 75, 0.1) 30%,
          rgb(94, 178, 122, 0.36) 60%,
          rgb(144, 215, 168) 100%);
  --clrNavBackground: rgba(244, 244, 245, 0.15);
  --clrNavItemActive: rgba(211, 211, 211, 0.4);
  --clrNavItemHover: rgba(0, 0, 0, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #F4F4F5;
  --clrGlassBackground: rgba(255, 255, 255, 0.5);
  --clrGlassBackgroundStrong: rgba(255, 255, 255, 0.3);
  --clrGlassBorder: rgba(0, 0, 0, 0.1);
  --snackbarDefaultBg: #F1ECE9;
  --snackbarDefaultText: #5D605C;
  --snackbarDefaultBorder: #5D605C;
  --snackbarDefaultIcon: #5D605C;
  --snackbarSuccessBg: #E0F1D9;
  --snackbarSuccessText: #358935;
  --snackbarSuccessBorder: #358935;
  --snackbarSuccessIcon: #358935;
  --snackbarErrorBg: #F9E1DC;
  --snackbarErrorText: #C80D12;
  --snackbarErrorBorder: #C80D12;
  --snackbarErrorIcon: #C80D12;
}

._themeLight_1z0b4_5 {
  --clrPrimary: #F4F4F5;
  --clrPrimary30: rgba(244, 244, 245, 0.3);
  --clrSecondary: #FEFEFE;
  --clrTertiary: #E4E4E7;
  --clrPrimaryReverse: #101418;
  --clrSecondaryReverse: #0A0F14;
  --clrTertiaryReverse: #212327;
  --clrTextPrimary: #101418;
  --clrTextSecondary: #2E3337;
  --clrTextTertiary: #7C7C7C;
  --clrTextPrimaryReverse: #F4F4F5;
  --clrTextSecondaryReverse: #CDCDCD;
  --clrTextTertiaryReverse: #8A8A8A;
  --clrError-100: #c03b3b;
  --clrError-50: #f6c5c5;
  --clrSuccess-100: #30d330;
  --clrSuccess-50: #bbffbb;
  --clrSuccessOnTint: #1f4f1f;
  --clrErrorOnTint: #7a1f1f;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgb(50, 126, 75, 0.1) 30%,
          rgb(94, 178, 122, 0.36) 60%,
          rgb(144, 215, 168) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(175, 49, 49, 0.1) 30%,
          rgba(238, 70, 70, 0.36) 60%,
          rgb(255, 173, 173) 100%);
  --clrNavBackground: rgba(244, 244, 245, 0.15);
  --clrNavItemActive: rgba(211, 211, 211, 0.4);
  --clrNavItemHover: rgba(0, 0, 0, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0000c1;
  --clrGlassBackground: rgba(255, 255, 255, 0.5);
  --clrGlassBackgroundStrong: rgba(255, 255, 255, 0.5);
  --clrGlassBorder: rgba(0, 0, 0, 0.1);
  --snackbarDefaultBg: #F1ECE9;
  --snackbarDefaultText: #5D605C;
  --snackbarDefaultBorder: #5D605C;
  --snackbarDefaultIcon: #5D605C;
  --snackbarSuccessBg: #E0F1D9;
  --snackbarSuccessText: #358935;
  --snackbarSuccessBorder: #358935;
  --snackbarSuccessIcon: #358935;
  --snackbarErrorBg: #F9E1DC;
  --snackbarErrorText: #C80D12;
  --snackbarErrorBorder: #C80D12;
  --snackbarErrorIcon: #C80D12;
}

._themeDark_1z0b4_131 {
  --clrPrimary: #0F1418;
  --clrPrimary30: rgba(15, 20, 25, 0.3);
  --clrSecondary: #0A0F14;
  --clrTertiary: #212327;
  --clrPrimaryReverse: #F4F4F5;
  --clrSecondaryReverse: #FEFEFE;
  --clrTertiaryReverse: #E4E4E7;
  --clrTextPrimary: #F4F4F5;
  --clrTextSecondary: #CDCDCD;
  --clrTextTertiary: #8A8A8A;
  --clrTextPrimaryReverse: #101418;
  --clrTextSecondaryReverse: #2E3337;
  --clrTextTertiaryReverse: #7C7C7C;
  --clrError-100: #c84d4d;
  --clrError-50: #641f1f;
  --clrSuccess-100: #3EA03E;
  --clrSuccess-50: #2d692d;
  --clrSuccessOnTint: #d6ffd6;
  --clrErrorOnTint: #ffd6d6;
  --clrWarning-100: #E88434;
  --clrWarning-50: #C49168;
  --clrAccent-100: #FFFFFF;
  --clrAccent-80: rgba(255, 255, 255, 0.8);
  --clrAccent-60: rgba(255, 255, 255, 0.6);
  --clrAccent-50: rgba(255, 255, 255, 0.5);
  --clrAccent-40: rgba(255, 255, 255, 0.4);
  --clrAccent-30: rgba(255, 255, 255, 0.3);
  --clrAccent-20: rgba(255, 255, 255, 0.2);
  --clrAccent-10: rgba(255, 255, 255, 0.1);
  --clrGradient: linear-gradient(90deg, #262a2e 10%, var(--clrPrimary) 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(50, 126, 75, 0.15) 30%,
          rgba(50, 126, 75, 0.3) 60%,
          rgba(50, 126, 75, 0.5) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(167, 44, 44, 0) 0%,
          rgba(167, 44, 44, 0.15) 30%,
          rgba(167, 44, 44, 0.3) 60%,
          rgba(167, 44, 44, 0.5) 100%);
  --clrNavBackground: rgba(0, 0, 0, 0.15);
  --clrNavItemActive: rgba(24, 24, 24, 0.49);
  --clrNavItemHover: rgba(255, 255, 255, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0F1418;
  --clrGlassBackground: rgba(15, 20, 24, 0.5);
  --clrGlassBackgroundStrong: rgba(15, 20, 24, 0.6);
  --clrGlassBorder: rgba(255, 255, 255, 0.1);
  --snackbarDefaultBg: #414141;
  --snackbarDefaultText: #BABABA;
  --snackbarDefaultBorder: #BABABA;
  --snackbarDefaultIcon: #BABABA;
  --snackbarSuccessBg: #145E18;
  --snackbarSuccessText: #8FE094;
  --snackbarSuccessBorder: #8FE094;
  --snackbarSuccessIcon: #8FE094;
  --snackbarErrorBg: #910C09;
  --snackbarErrorText: #FE9E9D;
  --snackbarErrorBorder: #FE9E9D;
  --snackbarErrorIcon: #FE9E9D;
}

/* 

Note: 
    If you want something done quick, ask AI to buuild your color themes.
    If you want to do it right and tidy though, do it manually. 

    - Theo

*/
:root {
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --font-accent: "Jaro", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}

html,
body {
  font-family: var(--font-sans);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

._leaderCarousel_1z0b4_216 {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  display: flex;
  overflow-x: auto;
  gap: 12px;
  padding: 12px 8px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.3) rgba(0, 0, 0, 0.2);
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x;
}
._leaderCarousel_1z0b4_216::-webkit-scrollbar {
  height: 6px;
}
._leaderCarousel_1z0b4_216::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 3px;
}
._leaderCarousel_1z0b4_216::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.3);
  border-radius: 3px;
}
._leaderCarousel_1z0b4_216::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.5);
}

._leaderCard_1z0b4_244 {
  flex: 0 0 auto;
  width: 128px;
  height: 182px;
  border: 2px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  background: rgba(0, 0, 0, 0.3);
  display: flex;
  flex-direction: column;
}
._leaderCard_1z0b4_244:hover {
  border-color: rgba(255, 255, 255, 0.3);
  transform: translateY(-2px);
  box-shadow: 0 0 4px rgba(255, 255, 255, 0.3);
}
._leaderCard_1z0b4_244._selected_1z0b4_262 {
  border-color: #ffffff;
  box-shadow: 0 0 6px rgba(255, 255, 255, 0.5);
  transform: scale(1.02);
}

._leaderImageInCard_1z0b4_268 {
  width: 100%;
  height: 92px;
  object-fit: cover;
  border-radius: 6px 6px 0 0;
  flex-shrink: 0;
}
._leaderImageInCard_1z0b4_268 img {
  border: 1px solid var(--clrAccent-30);
}

._leaderInfo_1z0b4_279 {
  padding: 12px;
  position: relative;
  flex: 1;
  background: linear-gradient(90deg, var(--leader-color-1, rgba(255, 255, 255, 0.1)), var(--leader-color-2, rgba(255, 255, 255, 0.1)));
  backdrop-filter: blur(10px) saturate(150%);
  -webkit-backdrop-filter: blur(10px) saturate(150%);
}
._leaderInfo_1z0b4_279::before {
  content: "";
  position: absolute;
  background: rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  pointer-events: none;
  z-index: 0;
}

._leaderName_1z0b4_297 {
  font-weight: 600;
  font-size: 14px;
  color: #fff;
  margin-bottom: 4px;
  position: relative;
  z-index: 99;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

._leaderSet_1z0b4_307 {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.85);
  position: relative;
  z-index: 1;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}

._noResults_1z0b4_315 {
  width: 100%;
  padding: 32px;
  text-align: center;
  color: rgba(255, 255, 255, 0.6);
  font-size: 14px;
  font-style: italic;
}

._loadingContainer_1z0b4_324 {
  width: 100%;
  padding: 32px;
  text-align: center;
}

._loadMoreBtn_1z0b4_330 {
  margin: 16px auto 0;
  display: block;
  padding: 12px 24px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 8px;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}
._loadMoreBtn_1z0b4_330:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.5);
}
._loadMoreBtn_1z0b4_330:active {
  transform: scale(0.98);
}

._loadingText_1z0b4_351 {
  color: rgba(255, 255, 255, 0.7);
  font-size: 14px;
  font-style: italic;
  animation: _pulse_1z0b4_1 1.5s ease-in-out infinite;
}

._skeletonCard_1z0b4_358 {
  flex: 0 0 auto;
  width: 128px;
  height: 193px;
  border: 2px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.3);
  animation: _skeletonPulse_1z0b4_1 1.5s ease-in-out infinite;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 4px;
}

._skeletonImage_1z0b4_374 {
  width: 118px;
  height: 118px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.1) 100%);
  background-size: 200% 100%;
  border-radius: 4px;
  animation: _skeletonShimmer_1z0b4_1 1.5s ease-in-out infinite;
}

._skeletonInfo_1z0b4_383 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  width: 100%;
}

._skeletonName_1z0b4_391 {
  height: 14px;
  width: 90%;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.1) 100%);
  background-size: 200% 100%;
  border-radius: 4px;
  animation: _skeletonShimmer_1z0b4_1 1.5s ease-in-out infinite;
  animation-delay: 0.2s;
}

._skeletonSet_1z0b4_401 {
  height: 12px;
  width: 60%;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.08) 100%);
  background-size: 200% 100%;
  border-radius: 4px;
  animation: _skeletonShimmer_1z0b4_1 1.5s ease-in-out infinite;
  animation-delay: 0.4s;
}

@keyframes _skeletonPulse_1z0b4_1 {
  0%, 100% {
    opacity: 0.7;
  }
  50% {
    opacity: 1;
  }
}
@keyframes _skeletonShimmer_1z0b4_1 {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}
@keyframes _pulse_1z0b4_1 {
  0%, 100% {
    opacity: 0.5;
  }
  50% {
    opacity: 1;
  }
}
@media (max-width: 768px) {
  ._leaderCard_1z0b4_244 {
    width: 110px;
    height: 156px;
  }
  ._leaderImageInCard_1z0b4_268 {
    height: 72px;
  }
  ._leaderInfo_1z0b4_279 {
    padding: 8px;
  }
  ._leaderName_1z0b4_297 {
    font-size: 11px;
  }
  ._leaderSet_1z0b4_307 {
    font-size: 10px;
  }
  ._skeletonCard_1z0b4_358 {
    width: 128px;
    height: 193px;
  }
  ._skeletonImage_1z0b4_374 {
    width: 118px;
    height: 118px;
  }
  ._skeletonInfo_1z0b4_383 {
    gap: 4px;
  }
  ._skeletonName_1z0b4_391 {
    height: 11px;
    margin-bottom: 4px;
  }
  ._skeletonSet_1z0b4_401 {
    height: 10px;
  }
}html {
  color-scheme: dark;
}

html:has(body._themeLight_1ca1v_5),
html:has(body._themePastelLight_1ca1v_6) {
  color-scheme: light;
}

:root {
  --clrPrimary: #F4F4F5;
  --clrPrimary30: rgba(244, 244, 245, 0.3);
  --clrSecondary: #FEFEFE;
  --clrTertiary: #E4E4E7;
  --clrPrimaryReverse: #101418;
  --clrSecondaryReverse: #0A0F14;
  --clrTertiaryReverse: #212327;
  --clrTextPrimary: #101418;
  --clrTextSecondary: #2E3337;
  --clrTextTertiary: #7C7C7C;
  --clrTextPrimaryReverse: #F4F4F5;
  --clrTextSecondaryReverse: #CDCDCD;
  --clrTextTertiaryReverse: #8A8A8A;
  --clrError-100: #641f1f;
  --clrError-50: #c84d4d;
  --clrSuccess-100: #2d692d;
  --clrSuccess-50: #3EA03E;
  --clrSuccessOnTint: #0d260d;
  --clrErrorOnTint: #2e0a0a;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgb(50, 126, 75, 0.1) 30%,
          rgb(94, 178, 122, 0.36) 60%,
          rgb(144, 215, 168) 100%);
  --clrNavBackground: rgba(244, 244, 245, 0.15);
  --clrNavItemActive: rgba(211, 211, 211, 0.4);
  --clrNavItemHover: rgba(0, 0, 0, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #F4F4F5;
  --clrGlassBackground: rgba(255, 255, 255, 0.5);
  --clrGlassBackgroundStrong: rgba(255, 255, 255, 0.3);
  --clrGlassBorder: rgba(0, 0, 0, 0.1);
  --snackbarDefaultBg: #F1ECE9;
  --snackbarDefaultText: #5D605C;
  --snackbarDefaultBorder: #5D605C;
  --snackbarDefaultIcon: #5D605C;
  --snackbarSuccessBg: #E0F1D9;
  --snackbarSuccessText: #358935;
  --snackbarSuccessBorder: #358935;
  --snackbarSuccessIcon: #358935;
  --snackbarErrorBg: #F9E1DC;
  --snackbarErrorText: #C80D12;
  --snackbarErrorBorder: #C80D12;
  --snackbarErrorIcon: #C80D12;
}

._themeLight_1ca1v_5 {
  --clrPrimary: #F4F4F5;
  --clrPrimary30: rgba(244, 244, 245, 0.3);
  --clrSecondary: #FEFEFE;
  --clrTertiary: #E4E4E7;
  --clrPrimaryReverse: #101418;
  --clrSecondaryReverse: #0A0F14;
  --clrTertiaryReverse: #212327;
  --clrTextPrimary: #101418;
  --clrTextSecondary: #2E3337;
  --clrTextTertiary: #7C7C7C;
  --clrTextPrimaryReverse: #F4F4F5;
  --clrTextSecondaryReverse: #CDCDCD;
  --clrTextTertiaryReverse: #8A8A8A;
  --clrError-100: #c03b3b;
  --clrError-50: #f6c5c5;
  --clrSuccess-100: #30d330;
  --clrSuccess-50: #bbffbb;
  --clrSuccessOnTint: #1f4f1f;
  --clrErrorOnTint: #7a1f1f;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgb(50, 126, 75, 0.1) 30%,
          rgb(94, 178, 122, 0.36) 60%,
          rgb(144, 215, 168) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(175, 49, 49, 0.1) 30%,
          rgba(238, 70, 70, 0.36) 60%,
          rgb(255, 173, 173) 100%);
  --clrNavBackground: rgba(244, 244, 245, 0.15);
  --clrNavItemActive: rgba(211, 211, 211, 0.4);
  --clrNavItemHover: rgba(0, 0, 0, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0000c1;
  --clrGlassBackground: rgba(255, 255, 255, 0.5);
  --clrGlassBackgroundStrong: rgba(255, 255, 255, 0.5);
  --clrGlassBorder: rgba(0, 0, 0, 0.1);
  --snackbarDefaultBg: #F1ECE9;
  --snackbarDefaultText: #5D605C;
  --snackbarDefaultBorder: #5D605C;
  --snackbarDefaultIcon: #5D605C;
  --snackbarSuccessBg: #E0F1D9;
  --snackbarSuccessText: #358935;
  --snackbarSuccessBorder: #358935;
  --snackbarSuccessIcon: #358935;
  --snackbarErrorBg: #F9E1DC;
  --snackbarErrorText: #C80D12;
  --snackbarErrorBorder: #C80D12;
  --snackbarErrorIcon: #C80D12;
}

._themeDark_1ca1v_131 {
  --clrPrimary: #0F1418;
  --clrPrimary30: rgba(15, 20, 25, 0.3);
  --clrSecondary: #0A0F14;
  --clrTertiary: #212327;
  --clrPrimaryReverse: #F4F4F5;
  --clrSecondaryReverse: #FEFEFE;
  --clrTertiaryReverse: #E4E4E7;
  --clrTextPrimary: #F4F4F5;
  --clrTextSecondary: #CDCDCD;
  --clrTextTertiary: #8A8A8A;
  --clrTextPrimaryReverse: #101418;
  --clrTextSecondaryReverse: #2E3337;
  --clrTextTertiaryReverse: #7C7C7C;
  --clrError-100: #c84d4d;
  --clrError-50: #641f1f;
  --clrSuccess-100: #3EA03E;
  --clrSuccess-50: #2d692d;
  --clrSuccessOnTint: #d6ffd6;
  --clrErrorOnTint: #ffd6d6;
  --clrWarning-100: #E88434;
  --clrWarning-50: #C49168;
  --clrAccent-100: #FFFFFF;
  --clrAccent-80: rgba(255, 255, 255, 0.8);
  --clrAccent-60: rgba(255, 255, 255, 0.6);
  --clrAccent-50: rgba(255, 255, 255, 0.5);
  --clrAccent-40: rgba(255, 255, 255, 0.4);
  --clrAccent-30: rgba(255, 255, 255, 0.3);
  --clrAccent-20: rgba(255, 255, 255, 0.2);
  --clrAccent-10: rgba(255, 255, 255, 0.1);
  --clrGradient: linear-gradient(90deg, #262a2e 10%, var(--clrPrimary) 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(50, 126, 75, 0.15) 30%,
          rgba(50, 126, 75, 0.3) 60%,
          rgba(50, 126, 75, 0.5) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(167, 44, 44, 0) 0%,
          rgba(167, 44, 44, 0.15) 30%,
          rgba(167, 44, 44, 0.3) 60%,
          rgba(167, 44, 44, 0.5) 100%);
  --clrNavBackground: rgba(0, 0, 0, 0.15);
  --clrNavItemActive: rgba(24, 24, 24, 0.49);
  --clrNavItemHover: rgba(255, 255, 255, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0F1418;
  --clrGlassBackground: rgba(15, 20, 24, 0.5);
  --clrGlassBackgroundStrong: rgba(15, 20, 24, 0.6);
  --clrGlassBorder: rgba(255, 255, 255, 0.1);
  --snackbarDefaultBg: #414141;
  --snackbarDefaultText: #BABABA;
  --snackbarDefaultBorder: #BABABA;
  --snackbarDefaultIcon: #BABABA;
  --snackbarSuccessBg: #145E18;
  --snackbarSuccessText: #8FE094;
  --snackbarSuccessBorder: #8FE094;
  --snackbarSuccessIcon: #8FE094;
  --snackbarErrorBg: #910C09;
  --snackbarErrorText: #FE9E9D;
  --snackbarErrorBorder: #FE9E9D;
  --snackbarErrorIcon: #FE9E9D;
}

/* 

Note: 
    If you want something done quick, ask AI to buuild your color themes.
    If you want to do it right and tidy though, do it manually. 

    - Theo

*/
:root {
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --font-accent: "Jaro", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}

html,
body {
  font-family: var(--font-sans);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

._container_1ca1v_216 {
  position: relative;
  padding: 4px;
  border-radius: 8px;
  overflow: hidden;
}
._container_1ca1v_216 ._skeletonOverlay_1ca1v_222 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 0;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  padding: inherit;
  z-index: 1;
  background: inherit;
}
._container_1ca1v_216 ._skeletonOverlay_1ca1v_222 ._skeletonPhoto_1ca1v_237 {
  border-radius: 6px;
  background: linear-gradient(90deg, rgba(180, 180, 180, 0.4) 25%, rgba(200, 200, 200, 0.5) 50%, rgba(180, 180, 180, 0.4) 75%);
  background-size: 200% 100%;
  animation: _shimmer_1ca1v_1 1.5s infinite;
  flex-shrink: 0;
}
._container_1ca1v_216 ._skeletonOverlay_1ca1v_222 ._skeletonText_1ca1v_244 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 6px;
  width: 100%;
  padding: 0 2px;
}
._container_1ca1v_216 ._skeletonOverlay_1ca1v_222 ._skeletonText_1ca1v_244 ._skeletonName_1ca1v_253 {
  width: 80%;
  height: 14px;
  border-radius: 4px;
  background: linear-gradient(90deg, rgba(180, 180, 180, 0.3) 25%, rgba(200, 200, 200, 0.4) 50%, rgba(180, 180, 180, 0.3) 75%);
  background-size: 200% 100%;
  animation: _shimmer_1ca1v_1 1.5s infinite;
}
._container_1ca1v_216 ._skeletonOverlay_1ca1v_222 ._skeletonText_1ca1v_244 ._skeletonSet_1ca1v_261 {
  width: 40%;
  height: 12px;
  border-radius: 4px;
  background: linear-gradient(90deg, rgba(150, 150, 150, 0.2) 25%, rgba(170, 170, 170, 0.3) 50%, rgba(150, 150, 150, 0.2) 75%);
  background-size: 200% 100%;
  animation: _shimmer_1ca1v_1 1.5s infinite;
}
._container_1ca1v_216 ._content_1ca1v_269 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease-in, visibility 0.3s ease-in;
}
._container_1ca1v_216 ._content_1ca1v_269._fadeIn_1ca1v_281 {
  opacity: 1;
  visibility: visible;
}
._container_1ca1v_216 ._photo_1ca1v_285 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 0;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  overflow: hidden;
  position: relative;
}
._container_1ca1v_216 ._photo_1ca1v_285 img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  -webkit-touch-callout: none;
  pointer-events: none;
}
._container_1ca1v_216 ._photo_1ca1v_285 ._placeholder_1ca1v_303 {
  color: #FFFFFF;
  font-weight: 600;
}
._container_1ca1v_216 ._text_1ca1v_307 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 2px;
  width: 100%;
  padding: 0 2px;
}
._container_1ca1v_216 ._text_1ca1v_307 ._name_1ca1v_316 {
  color: #FFFFFF;
  font-size: 14px;
  font-weight: 700;
  text-align: left;
  overflow: hidden;
  width: 100%;
}
._container_1ca1v_216 ._text_1ca1v_307 ._set_1ca1v_324 {
  color: rgba(255, 255, 255, 0.6);
  font-size: 12px;
  font-weight: 400;
  text-align: center;
}
._container_1ca1v_216._bare_1ca1v_330 {
  padding: 0;
  border-radius: 0;
  background: transparent !important;
}
._container_1ca1v_216._bare_1ca1v_330 ._skeletonOverlay_1ca1v_222 {
  padding: 0;
  background: transparent;
}
._container_1ca1v_216._bare_1ca1v_330 ._photo_1ca1v_285 {
  width: 100% !important;
  height: 100% !important;
  border: 0;
  border-radius: 0;
}
._container_1ca1v_216._bare_1ca1v_330 ._photo_1ca1v_285 img {
  object-fit: cover !important;
}
._container_1ca1v_216._image-text_1ca1v_348 {
  height: 190px;
  width: 132px;
  min-height: 190px;
  min-width: 132px;
  cursor: pointer;
  outline: 1px solid transparent;
  outline-offset: 0px;
  transition: transform 0.2s ease, outline 0.2s ease, box-shadow 0.2s ease;
}
._container_1ca1v_216._image-text_1ca1v_348:hover {
  transform: translateY(-2px);
}
._container_1ca1v_216._image-text_1ca1v_348 ._skeletonOverlay_1ca1v_222 {
  gap: 10px;
}
._container_1ca1v_216._image-text_1ca1v_348 ._skeletonOverlay_1ca1v_222 ._skeletonPhoto_1ca1v_237 {
  width: 124px;
  height: 124px;
}
._container_1ca1v_216._image-text_1ca1v_348 ._content_1ca1v_269 {
  gap: 10px;
}
._container_1ca1v_216._image-text_1ca1v_348 ._photo_1ca1v_285 {
  width: 124px;
  height: 124px;
}
._container_1ca1v_216._image-text_1ca1v_348 ._photo_1ca1v_285 ._placeholder_1ca1v_303 {
  font-size: 32px;
}
._container_1ca1v_216._image-text_1ca1v_348._active_1ca1v_378 {
  outline: 2px solid var(--clrAccent-100);
  outline-offset: 0px;
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.6);
}
._container_1ca1v_216._image-text-medium_1ca1v_383 {
  height: 160px;
  width: 110px;
  min-height: 160px;
  min-width: 110px;
  padding: 3px;
  border-radius: 7px;
  cursor: pointer;
  outline: 1px solid transparent;
  outline-offset: 0px;
  transition: transform 0.2s ease, outline 0.2s ease, box-shadow 0.2s ease;
}
._container_1ca1v_216._image-text-medium_1ca1v_383:hover {
  transform: translateY(-2px);
}
._container_1ca1v_216._image-text-medium_1ca1v_383 ._skeletonOverlay_1ca1v_222 {
  gap: 8px;
}
._container_1ca1v_216._image-text-medium_1ca1v_383 ._skeletonOverlay_1ca1v_222 ._skeletonPhoto_1ca1v_237 {
  width: 104px;
  height: 104px;
  border-radius: 5px;
}
._container_1ca1v_216._image-text-medium_1ca1v_383 ._content_1ca1v_269 {
  gap: 8px;
}
._container_1ca1v_216._image-text-medium_1ca1v_383 ._photo_1ca1v_285 {
  width: 104px;
  height: 104px;
  border-radius: 5px;
}
._container_1ca1v_216._image-text-medium_1ca1v_383 ._photo_1ca1v_285 ._placeholder_1ca1v_303 {
  font-size: 20px;
}
._container_1ca1v_216._image-text-medium_1ca1v_383 ._text_1ca1v_307 {
  gap: 1px;
  padding: 0 2px;
}
._container_1ca1v_216._image-text-medium_1ca1v_383 ._text_1ca1v_307 ._name_1ca1v_316 {
  font-size: 12px;
}
._container_1ca1v_216._image-text-medium_1ca1v_383 ._text_1ca1v_307 ._set_1ca1v_324 {
  font-size: 12px;
}
._container_1ca1v_216._image-text-medium_1ca1v_383._active_1ca1v_378 {
  outline: 2px solid var(--clrAccent-100);
  outline-offset: 0px;
  box-shadow: 0 0 7px rgba(255, 255, 255, 0.6);
}
._container_1ca1v_216._image-text-small_1ca1v_432 {
  height: 133px;
  width: 92px;
  min-height: 133px;
  min-width: 92px;
  padding: 3px;
  border-radius: 6px;
  cursor: pointer;
  outline: 1px solid transparent;
  outline-offset: 0px;
  transition: transform 0.2s ease, outline 0.2s ease, box-shadow 0.2s ease;
}
._container_1ca1v_216._image-text-small_1ca1v_432:hover {
  transform: translateY(-2px);
}
._container_1ca1v_216._image-text-small_1ca1v_432 ._skeletonOverlay_1ca1v_222 {
  gap: 6px;
}
._container_1ca1v_216._image-text-small_1ca1v_432 ._skeletonOverlay_1ca1v_222 ._skeletonPhoto_1ca1v_237 {
  width: 86px;
  height: 86px;
  border-radius: 4px;
}
._container_1ca1v_216._image-text-small_1ca1v_432 ._skeletonOverlay_1ca1v_222 ._skeletonText_1ca1v_244 ._skeletonName_1ca1v_253 {
  height: 12px;
}
._container_1ca1v_216._image-text-small_1ca1v_432 ._skeletonOverlay_1ca1v_222 ._skeletonText_1ca1v_244 ._skeletonSet_1ca1v_261 {
  height: 10px;
}
._container_1ca1v_216._image-text-small_1ca1v_432 ._content_1ca1v_269 {
  gap: 6px;
}
._container_1ca1v_216._image-text-small_1ca1v_432 ._photo_1ca1v_285 {
  width: 86px;
  height: 86px;
  border-radius: 4px;
}
._container_1ca1v_216._image-text-small_1ca1v_432 ._photo_1ca1v_285 ._placeholder_1ca1v_303 {
  font-size: 20px;
}
._container_1ca1v_216._image-text-small_1ca1v_432 ._text_1ca1v_307 {
  gap: 1px;
  padding: 0 1px;
}
._container_1ca1v_216._image-text-small_1ca1v_432 ._text_1ca1v_307 ._name_1ca1v_316 {
  font-size: 12px;
}
._container_1ca1v_216._image-text-small_1ca1v_432 ._text_1ca1v_307 ._set_1ca1v_324 {
  font-size: 8px;
}
._container_1ca1v_216._image-text-small_1ca1v_432._active_1ca1v_378 {
  outline: 2px solid var(--clrAccent-100);
  outline-offset: 0px;
  box-shadow: 0 0 6px rgba(255, 255, 255, 0.6);
}
._container_1ca1v_216._image-only-xlarge_1ca1v_487 {
  width: 108px;
  height: 108px;
  flex-shrink: 0;
}
._container_1ca1v_216._image-only-xlarge_1ca1v_487 ._skeletonOverlay_1ca1v_222 {
  justify-content: center;
}
._container_1ca1v_216._image-only-xlarge_1ca1v_487 ._skeletonOverlay_1ca1v_222 ._skeletonPhoto_1ca1v_237 {
  width: 100px;
  height: 100px;
}
._container_1ca1v_216._image-only-xlarge_1ca1v_487 ._content_1ca1v_269 {
  justify-content: center;
}
._container_1ca1v_216._image-only-xlarge_1ca1v_487 ._photo_1ca1v_285 {
  width: 100px;
  height: 100px;
}
._container_1ca1v_216._image-only-xlarge_1ca1v_487 ._photo_1ca1v_285 img {
  object-fit: contain;
}
._container_1ca1v_216._image-only-xlarge_1ca1v_487 ._photo_1ca1v_285 ._placeholder_1ca1v_303 {
  font-size: 12px;
}
._container_1ca1v_216._image-only-large_1ca1v_512 {
  width: 112px;
  height: 112px;
}
._container_1ca1v_216._image-only-large_1ca1v_512 ._skeletonOverlay_1ca1v_222 {
  justify-content: center;
}
._container_1ca1v_216._image-only-large_1ca1v_512 ._skeletonOverlay_1ca1v_222 ._skeletonPhoto_1ca1v_237 {
  width: 104px;
  height: 104px;
}
._container_1ca1v_216._image-only-large_1ca1v_512 ._content_1ca1v_269 {
  justify-content: center;
}
._container_1ca1v_216._image-only-large_1ca1v_512 ._photo_1ca1v_285 {
  width: 100%;
  height: 100%;
}
._container_1ca1v_216._image-only-large_1ca1v_512 ._photo_1ca1v_285 ._placeholder_1ca1v_303 {
  font-size: 28px;
}
._container_1ca1v_216._image-only-small_1ca1v_533 {
  width: 64px;
  height: 64px;
  padding: 2px;
}
._container_1ca1v_216._image-only-small_1ca1v_533 ._skeletonOverlay_1ca1v_222 {
  justify-content: center;
}
._container_1ca1v_216._image-only-small_1ca1v_533 ._skeletonOverlay_1ca1v_222 ._skeletonPhoto_1ca1v_237 {
  width: 60px;
  height: 60px;
}
._container_1ca1v_216._image-only-small_1ca1v_533 ._content_1ca1v_269 {
  justify-content: center;
}
._container_1ca1v_216._image-only-small_1ca1v_533 ._photo_1ca1v_285 {
  height: 100%;
  width: 100%;
}
._container_1ca1v_216._image-only-small_1ca1v_533 ._photo_1ca1v_285 ._placeholder_1ca1v_303 {
  font-size: 18px;
}
._container_1ca1v_216._image-only-xsmall_1ca1v_555 {
  width: 40px;
  height: 40px;
  padding: 2px;
}
._container_1ca1v_216._image-only-xsmall_1ca1v_555 ._skeletonOverlay_1ca1v_222 {
  justify-content: center;
}
._container_1ca1v_216._image-only-xsmall_1ca1v_555 ._skeletonOverlay_1ca1v_222 ._skeletonPhoto_1ca1v_237 {
  width: 36px;
  height: 36px;
}
._container_1ca1v_216._image-only-xsmall_1ca1v_555 ._content_1ca1v_269 {
  justify-content: center;
}
._container_1ca1v_216._image-only-xsmall_1ca1v_555 ._photo_1ca1v_285 {
  width: 36px;
  height: 36px;
}
._container_1ca1v_216._image-only-xsmall_1ca1v_555 ._photo_1ca1v_285 ._placeholder_1ca1v_303 {
  font-size: 14px;
}

@keyframes _shimmer_1ca1v_1 {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}html {
  color-scheme: dark;
}

html:has(body._themeLight_1o5ag_5),
html:has(body._themePastelLight_1o5ag_6) {
  color-scheme: light;
}

:root {
  --clrPrimary: #F4F4F5;
  --clrPrimary30: rgba(244, 244, 245, 0.3);
  --clrSecondary: #FEFEFE;
  --clrTertiary: #E4E4E7;
  --clrPrimaryReverse: #101418;
  --clrSecondaryReverse: #0A0F14;
  --clrTertiaryReverse: #212327;
  --clrTextPrimary: #101418;
  --clrTextSecondary: #2E3337;
  --clrTextTertiary: #7C7C7C;
  --clrTextPrimaryReverse: #F4F4F5;
  --clrTextSecondaryReverse: #CDCDCD;
  --clrTextTertiaryReverse: #8A8A8A;
  --clrError-100: #641f1f;
  --clrError-50: #c84d4d;
  --clrSuccess-100: #2d692d;
  --clrSuccess-50: #3EA03E;
  --clrSuccessOnTint: #0d260d;
  --clrErrorOnTint: #2e0a0a;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgb(50, 126, 75, 0.1) 30%,
          rgb(94, 178, 122, 0.36) 60%,
          rgb(144, 215, 168) 100%);
  --clrNavBackground: rgba(244, 244, 245, 0.15);
  --clrNavItemActive: rgba(211, 211, 211, 0.4);
  --clrNavItemHover: rgba(0, 0, 0, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #F4F4F5;
  --clrGlassBackground: rgba(255, 255, 255, 0.5);
  --clrGlassBackgroundStrong: rgba(255, 255, 255, 0.3);
  --clrGlassBorder: rgba(0, 0, 0, 0.1);
  --snackbarDefaultBg: #F1ECE9;
  --snackbarDefaultText: #5D605C;
  --snackbarDefaultBorder: #5D605C;
  --snackbarDefaultIcon: #5D605C;
  --snackbarSuccessBg: #E0F1D9;
  --snackbarSuccessText: #358935;
  --snackbarSuccessBorder: #358935;
  --snackbarSuccessIcon: #358935;
  --snackbarErrorBg: #F9E1DC;
  --snackbarErrorText: #C80D12;
  --snackbarErrorBorder: #C80D12;
  --snackbarErrorIcon: #C80D12;
}

._themeLight_1o5ag_5 {
  --clrPrimary: #F4F4F5;
  --clrPrimary30: rgba(244, 244, 245, 0.3);
  --clrSecondary: #FEFEFE;
  --clrTertiary: #E4E4E7;
  --clrPrimaryReverse: #101418;
  --clrSecondaryReverse: #0A0F14;
  --clrTertiaryReverse: #212327;
  --clrTextPrimary: #101418;
  --clrTextSecondary: #2E3337;
  --clrTextTertiary: #7C7C7C;
  --clrTextPrimaryReverse: #F4F4F5;
  --clrTextSecondaryReverse: #CDCDCD;
  --clrTextTertiaryReverse: #8A8A8A;
  --clrError-100: #c03b3b;
  --clrError-50: #f6c5c5;
  --clrSuccess-100: #30d330;
  --clrSuccess-50: #bbffbb;
  --clrSuccessOnTint: #1f4f1f;
  --clrErrorOnTint: #7a1f1f;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgb(50, 126, 75, 0.1) 30%,
          rgb(94, 178, 122, 0.36) 60%,
          rgb(144, 215, 168) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(175, 49, 49, 0.1) 30%,
          rgba(238, 70, 70, 0.36) 60%,
          rgb(255, 173, 173) 100%);
  --clrNavBackground: rgba(244, 244, 245, 0.15);
  --clrNavItemActive: rgba(211, 211, 211, 0.4);
  --clrNavItemHover: rgba(0, 0, 0, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0000c1;
  --clrGlassBackground: rgba(255, 255, 255, 0.5);
  --clrGlassBackgroundStrong: rgba(255, 255, 255, 0.5);
  --clrGlassBorder: rgba(0, 0, 0, 0.1);
  --snackbarDefaultBg: #F1ECE9;
  --snackbarDefaultText: #5D605C;
  --snackbarDefaultBorder: #5D605C;
  --snackbarDefaultIcon: #5D605C;
  --snackbarSuccessBg: #E0F1D9;
  --snackbarSuccessText: #358935;
  --snackbarSuccessBorder: #358935;
  --snackbarSuccessIcon: #358935;
  --snackbarErrorBg: #F9E1DC;
  --snackbarErrorText: #C80D12;
  --snackbarErrorBorder: #C80D12;
  --snackbarErrorIcon: #C80D12;
}

._themeDark_1o5ag_131 {
  --clrPrimary: #0F1418;
  --clrPrimary30: rgba(15, 20, 25, 0.3);
  --clrSecondary: #0A0F14;
  --clrTertiary: #212327;
  --clrPrimaryReverse: #F4F4F5;
  --clrSecondaryReverse: #FEFEFE;
  --clrTertiaryReverse: #E4E4E7;
  --clrTextPrimary: #F4F4F5;
  --clrTextSecondary: #CDCDCD;
  --clrTextTertiary: #8A8A8A;
  --clrTextPrimaryReverse: #101418;
  --clrTextSecondaryReverse: #2E3337;
  --clrTextTertiaryReverse: #7C7C7C;
  --clrError-100: #c84d4d;
  --clrError-50: #641f1f;
  --clrSuccess-100: #3EA03E;
  --clrSuccess-50: #2d692d;
  --clrSuccessOnTint: #d6ffd6;
  --clrErrorOnTint: #ffd6d6;
  --clrWarning-100: #E88434;
  --clrWarning-50: #C49168;
  --clrAccent-100: #FFFFFF;
  --clrAccent-80: rgba(255, 255, 255, 0.8);
  --clrAccent-60: rgba(255, 255, 255, 0.6);
  --clrAccent-50: rgba(255, 255, 255, 0.5);
  --clrAccent-40: rgba(255, 255, 255, 0.4);
  --clrAccent-30: rgba(255, 255, 255, 0.3);
  --clrAccent-20: rgba(255, 255, 255, 0.2);
  --clrAccent-10: rgba(255, 255, 255, 0.1);
  --clrGradient: linear-gradient(90deg, #262a2e 10%, var(--clrPrimary) 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(50, 126, 75, 0.15) 30%,
          rgba(50, 126, 75, 0.3) 60%,
          rgba(50, 126, 75, 0.5) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(167, 44, 44, 0) 0%,
          rgba(167, 44, 44, 0.15) 30%,
          rgba(167, 44, 44, 0.3) 60%,
          rgba(167, 44, 44, 0.5) 100%);
  --clrNavBackground: rgba(0, 0, 0, 0.15);
  --clrNavItemActive: rgba(24, 24, 24, 0.49);
  --clrNavItemHover: rgba(255, 255, 255, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0F1418;
  --clrGlassBackground: rgba(15, 20, 24, 0.5);
  --clrGlassBackgroundStrong: rgba(15, 20, 24, 0.6);
  --clrGlassBorder: rgba(255, 255, 255, 0.1);
  --snackbarDefaultBg: #414141;
  --snackbarDefaultText: #BABABA;
  --snackbarDefaultBorder: #BABABA;
  --snackbarDefaultIcon: #BABABA;
  --snackbarSuccessBg: #145E18;
  --snackbarSuccessText: #8FE094;
  --snackbarSuccessBorder: #8FE094;
  --snackbarSuccessIcon: #8FE094;
  --snackbarErrorBg: #910C09;
  --snackbarErrorText: #FE9E9D;
  --snackbarErrorBorder: #FE9E9D;
  --snackbarErrorIcon: #FE9E9D;
}

/* 

Note: 
    If you want something done quick, ask AI to buuild your color themes.
    If you want to do it right and tidy though, do it manually. 

    - Theo

*/
:root {
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --font-accent: "Jaro", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}

html,
body {
  font-family: var(--font-sans);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

._container_1o5ag_216 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 4px;
  width: 100%;
}

._label_1o5ag_225 {
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 400;
  color: var(--clrPrimaryReverse);
  padding: 0 4px;
}

._carousel_1o5ag_233 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 4px;
  width: 100%;
  overflow-x: auto;
  padding: 0 4px 8px 0;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.3) rgba(0, 0, 0, 0.2);
}
._carousel_1o5ag_233::-webkit-scrollbar {
  height: 6px;
}
._carousel_1o5ag_233::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 3px;
}
._carousel_1o5ag_233::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.3);
  border-radius: 3px;
}
._carousel_1o5ag_233::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.5);
}

._typeChip_1o5ag_260 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 0;
  flex: 0 0 auto;
  padding: 12px 16px;
  border: 1px solid var(--clrAccent-30);
  border-radius: 8px;
  background: transparent;
  color: var(--clrAccent-60);
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 400;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}
._typeChip_1o5ag_260:hover:not(:disabled) {
  border-color: var(--clrAccent-50);
  color: var(--clrAccent-80);
}
._typeChip_1o5ag_260:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
._typeChip_1o5ag_260._selected_1o5ag_287 {
  border-color: var(--clrAccent-100);
  color: var(--clrAccent-100);
  background: var(--clrAccent-10);
}
._typeChip_1o5ag_260._typeLocal_1o5ag_292 {
  background-color: #163c26;
  border-color: rgba(133, 228, 172, 0.6);
  color: rgba(133, 228, 172, 0.6);
}
._typeChip_1o5ag_260._typeStoreCs_1o5ag_297 {
  background-color: #471f1f;
  border-color: rgba(240, 131, 131, 0.6);
  color: rgba(240, 131, 131, 0.6);
}
._typeChip_1o5ag_260._typeTreasureCup_1o5ag_302 {
  background-color: #562502;
  border-color: rgba(255, 160, 92, 0.6);
  color: rgba(255, 160, 92, 0.6);
}
._typeChip_1o5ag_260._typeFlagship_1o5ag_307 {
  background-color: #4b2e00;
  border-color: rgba(255, 201, 115, 0.6);
  color: rgba(255, 201, 115, 0.6);
}
._typeChip_1o5ag_260._typeTesting_1o5ag_312 {
  background-color: #1e3a8a;
  border-color: #3b82f6;
  color: #93c5fd;
}
._typeChip_1o5ag_260._typeLcq_1o5ag_317 {
  background-color: #7f1d1d;
  border-color: #dc2626;
  color: #fca5a5;
}
._typeChip_1o5ag_260._typeNational_1o5ag_322 {
  background-color: #581c87;
  border-color: #a855f7;
  color: #e9d5ff;
}
._typeChip_1o5ag_260._typeRankedSim_1o5ag_327 {
  background-color: #1e3a5f;
  border-color: #60a5fa;
  color: #bfdbfe;
}
._typeChip_1o5ag_260._typeRegionals_1o5ag_332, ._typeChip_1o5ag_260._typeWorld_1o5ag_332 {
  box-shadow: inset 0 0 0 1px rgba(255, 215, 0, 0.35), 0 6px 16px rgba(255, 185, 0, 0.25);
  background: linear-gradient(45deg, #ffd700, #ffb02e, #ffd700, #fff8b5, #ffb02e, #ffd700);
  background-size: 300% 300%;
  animation: _gold-shimmer_1o5ag_1 3s ease-in-out infinite;
  border-color: rgba(255, 215, 0, 0.5);
  color: #875c18;
  font-weight: 600;
  position: relative;
  overflow: hidden;
}
._typeChip_1o5ag_260._typeRegionals_1o5ag_332::before, ._typeChip_1o5ag_260._typeWorld_1o5ag_332::before {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: inherit;
  background: conic-gradient(from 0deg, #fff8b5 0%, #ffd700 15%, #ffb02e 30%, #ffd700 45%, #fff8b5 60%, #ffd700 75%, #ffb02e 90%, #fff8b5 100%);
  filter: blur(4px) saturate(1.2);
  animation: _chip-glow-spin_1o5ag_1 3.2s linear infinite;
  padding: 3px;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  z-index: -1;
}

._description_1o5ag_360 {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 400;
  color: var(--clrAccent-30);
  padding: 0 4px;
}

@keyframes _gold-shimmer_1o5ag_1 {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
@keyframes _chip-glow-spin_1o5ag_1 {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}html {
  color-scheme: dark;
}

html:has(body._themeLight_us6m8_5),
html:has(body._themePastelLight_us6m8_6) {
  color-scheme: light;
}

:root {
  --clrPrimary: #F4F4F5;
  --clrPrimary30: rgba(244, 244, 245, 0.3);
  --clrSecondary: #FEFEFE;
  --clrTertiary: #E4E4E7;
  --clrPrimaryReverse: #101418;
  --clrSecondaryReverse: #0A0F14;
  --clrTertiaryReverse: #212327;
  --clrTextPrimary: #101418;
  --clrTextSecondary: #2E3337;
  --clrTextTertiary: #7C7C7C;
  --clrTextPrimaryReverse: #F4F4F5;
  --clrTextSecondaryReverse: #CDCDCD;
  --clrTextTertiaryReverse: #8A8A8A;
  --clrError-100: #641f1f;
  --clrError-50: #c84d4d;
  --clrSuccess-100: #2d692d;
  --clrSuccess-50: #3EA03E;
  --clrSuccessOnTint: #0d260d;
  --clrErrorOnTint: #2e0a0a;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgb(50, 126, 75, 0.1) 30%,
          rgb(94, 178, 122, 0.36) 60%,
          rgb(144, 215, 168) 100%);
  --clrNavBackground: rgba(244, 244, 245, 0.15);
  --clrNavItemActive: rgba(211, 211, 211, 0.4);
  --clrNavItemHover: rgba(0, 0, 0, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #F4F4F5;
  --clrGlassBackground: rgba(255, 255, 255, 0.5);
  --clrGlassBackgroundStrong: rgba(255, 255, 255, 0.3);
  --clrGlassBorder: rgba(0, 0, 0, 0.1);
  --snackbarDefaultBg: #F1ECE9;
  --snackbarDefaultText: #5D605C;
  --snackbarDefaultBorder: #5D605C;
  --snackbarDefaultIcon: #5D605C;
  --snackbarSuccessBg: #E0F1D9;
  --snackbarSuccessText: #358935;
  --snackbarSuccessBorder: #358935;
  --snackbarSuccessIcon: #358935;
  --snackbarErrorBg: #F9E1DC;
  --snackbarErrorText: #C80D12;
  --snackbarErrorBorder: #C80D12;
  --snackbarErrorIcon: #C80D12;
}

._themeLight_us6m8_5 {
  --clrPrimary: #F4F4F5;
  --clrPrimary30: rgba(244, 244, 245, 0.3);
  --clrSecondary: #FEFEFE;
  --clrTertiary: #E4E4E7;
  --clrPrimaryReverse: #101418;
  --clrSecondaryReverse: #0A0F14;
  --clrTertiaryReverse: #212327;
  --clrTextPrimary: #101418;
  --clrTextSecondary: #2E3337;
  --clrTextTertiary: #7C7C7C;
  --clrTextPrimaryReverse: #F4F4F5;
  --clrTextSecondaryReverse: #CDCDCD;
  --clrTextTertiaryReverse: #8A8A8A;
  --clrError-100: #c03b3b;
  --clrError-50: #f6c5c5;
  --clrSuccess-100: #30d330;
  --clrSuccess-50: #bbffbb;
  --clrSuccessOnTint: #1f4f1f;
  --clrErrorOnTint: #7a1f1f;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgb(50, 126, 75, 0.1) 30%,
          rgb(94, 178, 122, 0.36) 60%,
          rgb(144, 215, 168) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(175, 49, 49, 0.1) 30%,
          rgba(238, 70, 70, 0.36) 60%,
          rgb(255, 173, 173) 100%);
  --clrNavBackground: rgba(244, 244, 245, 0.15);
  --clrNavItemActive: rgba(211, 211, 211, 0.4);
  --clrNavItemHover: rgba(0, 0, 0, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0000c1;
  --clrGlassBackground: rgba(255, 255, 255, 0.5);
  --clrGlassBackgroundStrong: rgba(255, 255, 255, 0.5);
  --clrGlassBorder: rgba(0, 0, 0, 0.1);
  --snackbarDefaultBg: #F1ECE9;
  --snackbarDefaultText: #5D605C;
  --snackbarDefaultBorder: #5D605C;
  --snackbarDefaultIcon: #5D605C;
  --snackbarSuccessBg: #E0F1D9;
  --snackbarSuccessText: #358935;
  --snackbarSuccessBorder: #358935;
  --snackbarSuccessIcon: #358935;
  --snackbarErrorBg: #F9E1DC;
  --snackbarErrorText: #C80D12;
  --snackbarErrorBorder: #C80D12;
  --snackbarErrorIcon: #C80D12;
}

._themeDark_us6m8_131 {
  --clrPrimary: #0F1418;
  --clrPrimary30: rgba(15, 20, 25, 0.3);
  --clrSecondary: #0A0F14;
  --clrTertiary: #212327;
  --clrPrimaryReverse: #F4F4F5;
  --clrSecondaryReverse: #FEFEFE;
  --clrTertiaryReverse: #E4E4E7;
  --clrTextPrimary: #F4F4F5;
  --clrTextSecondary: #CDCDCD;
  --clrTextTertiary: #8A8A8A;
  --clrTextPrimaryReverse: #101418;
  --clrTextSecondaryReverse: #2E3337;
  --clrTextTertiaryReverse: #7C7C7C;
  --clrError-100: #c84d4d;
  --clrError-50: #641f1f;
  --clrSuccess-100: #3EA03E;
  --clrSuccess-50: #2d692d;
  --clrSuccessOnTint: #d6ffd6;
  --clrErrorOnTint: #ffd6d6;
  --clrWarning-100: #E88434;
  --clrWarning-50: #C49168;
  --clrAccent-100: #FFFFFF;
  --clrAccent-80: rgba(255, 255, 255, 0.8);
  --clrAccent-60: rgba(255, 255, 255, 0.6);
  --clrAccent-50: rgba(255, 255, 255, 0.5);
  --clrAccent-40: rgba(255, 255, 255, 0.4);
  --clrAccent-30: rgba(255, 255, 255, 0.3);
  --clrAccent-20: rgba(255, 255, 255, 0.2);
  --clrAccent-10: rgba(255, 255, 255, 0.1);
  --clrGradient: linear-gradient(90deg, #262a2e 10%, var(--clrPrimary) 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(50, 126, 75, 0.15) 30%,
          rgba(50, 126, 75, 0.3) 60%,
          rgba(50, 126, 75, 0.5) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(167, 44, 44, 0) 0%,
          rgba(167, 44, 44, 0.15) 30%,
          rgba(167, 44, 44, 0.3) 60%,
          rgba(167, 44, 44, 0.5) 100%);
  --clrNavBackground: rgba(0, 0, 0, 0.15);
  --clrNavItemActive: rgba(24, 24, 24, 0.49);
  --clrNavItemHover: rgba(255, 255, 255, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0F1418;
  --clrGlassBackground: rgba(15, 20, 24, 0.5);
  --clrGlassBackgroundStrong: rgba(15, 20, 24, 0.6);
  --clrGlassBorder: rgba(255, 255, 255, 0.1);
  --snackbarDefaultBg: #414141;
  --snackbarDefaultText: #BABABA;
  --snackbarDefaultBorder: #BABABA;
  --snackbarDefaultIcon: #BABABA;
  --snackbarSuccessBg: #145E18;
  --snackbarSuccessText: #8FE094;
  --snackbarSuccessBorder: #8FE094;
  --snackbarSuccessIcon: #8FE094;
  --snackbarErrorBg: #910C09;
  --snackbarErrorText: #FE9E9D;
  --snackbarErrorBorder: #FE9E9D;
  --snackbarErrorIcon: #FE9E9D;
}

/* 

Note: 
    If you want something done quick, ask AI to buuild your color themes.
    If you want to do it right and tidy though, do it manually. 

    - Theo

*/
:root {
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --font-accent: "Jaro", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}

html,
body {
  font-family: var(--font-sans);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

@keyframes _slideUp_us6m8_1 {
  from {
    transform: translateY(100%);
  }
  to {
    transform: translateY(0);
  }
}
@keyframes _slideDown_us6m8_1 {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(100%);
  }
}
._drawerOverlay_us6m8_232 {
  position: fixed;
  inset: 0;
  z-index: 1001;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background-color: rgba(0, 0, 0, 0.3);
  padding: 12px 16px;
  padding-bottom: max(16px, env(safe-area-inset-bottom));
}
@media (min-width: 841px) {
  ._drawerOverlay_us6m8_232._centered_us6m8_244 {
    align-items: center;
    padding-bottom: 12px;
  }
}

._drawer_us6m8_232 {
  position: relative;
  width: 100%;
  max-width: 500px;
  max-height: calc(90vh - 24px);
  background-color: var(--clrPrimary);
  border-radius: 24px;
  padding: 0 24px 32px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 16px;
  box-shadow: 0 0 32px rgba(0, 0, 0, 0.3);
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  animation: _slideUp_us6m8_1 0.35s cubic-bezier(0.32, 0.72, 0, 1) forwards;
  will-change: transform;
}
._drawer_us6m8_232._closing_us6m8_270 {
  animation: _slideDown_us6m8_1 0.25s cubic-bezier(0.32, 0, 0.67, 0) forwards;
}
._drawer_us6m8_232._glass_us6m8_273 {
  background: var(--clrGlassBackground);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid var(--clrGlassBorder);
  box-shadow: 0px 0px 8px 0px rgba(255, 255, 255, 0.15);
}
._drawer_us6m8_232._fullHeight_us6m8_280 {
  max-height: calc(100vh - 48px);
  max-height: calc(100dvh - 48px);
}

._dragHandle_us6m8_285 {
  width: 100%;
  padding: 12px 0 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: grab;
  touch-action: none;
}
._dragHandle_us6m8_285:active {
  cursor: grabbing;
}

._dragPill_us6m8_298 {
  width: 36px;
  height: 4px;
  background-color: var(--clrAccent-30);
  border-radius: 2px;
  transition: background-color 0.2s ease;
}
._dragHandle_us6m8_285:hover ._dragPill_us6m8_298 {
  background-color: var(--clrAccent-60);
}

._drawerHeader_us6m8_309 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 0;
  width: 100%;
}

._drawerTitle_us6m8_318 {
  margin: 0;
  font-size: 24px;
  font-weight: 700;
  color: var(--clrTextPrimary);
}

._drawerSubtitle_us6m8_325 {
  margin: 0;
  font-size: 16px;
  color: var(--clrAccent-60);
}

._drawerContent_us6m8_331 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 16px;
  width: 100%;
  min-width: 0;
  overflow-x: hidden;
  touch-action: auto;
}

._drawerActions_us6m8_343 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  width: 100%;
  margin-top: 8px;
}

._primaryBtn_us6m8_353 {
  flex: 1;
  min-height: 56px;
  padding: 16px 24px;
  border-radius: 8px;
  border: none;
  background-color: var(--clrPrimaryReverse);
  color: var(--clrPrimary);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}
._primaryBtn_us6m8_353:hover:not(:disabled) {
  opacity: 0.9;
}
._primaryBtn_us6m8_353:active:not(:disabled) {
  transform: scale(0.98);
}
._primaryBtn_us6m8_353:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

._secondaryBtn_us6m8_377 {
  min-height: 56px;
  padding: 16px 24px;
  border-radius: 8px;
  border: 1px solid var(--clrError-100);
  background-color: transparent;
  color: var(--clrError-100);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 0 6px rgba(216, 72, 72, 0.6);
}
._secondaryBtn_us6m8_377:hover:not(:disabled) {
  background-color: rgba(216, 72, 72, 0.1);
}
._secondaryBtn_us6m8_377:active:not(:disabled) {
  transform: scale(0.98);
}
._secondaryBtn_us6m8_377:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

._cancelOnlyBtn_us6m8_401 {
  width: 100%;
  min-height: 56px;
  padding: 16px 24px;
  border-radius: 8px;
  border: none;
  background-color: var(--clrPrimaryReverse);
  color: var(--clrPrimary);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}
._cancelOnlyBtn_us6m8_401:hover:not(:disabled) {
  opacity: 0.9;
}
._cancelOnlyBtn_us6m8_401:active:not(:disabled) {
  transform: scale(0.98);
}
._cancelOnlyBtn_us6m8_401:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

._selectionCard_us6m8_425 {
  width: 100%;
  padding: 24px;
  border-radius: 12px;
  border: 1px solid var(--clrGlassBorder);
  background-color: var(--clrGlassBackgroundStrong);
  backdrop-filter: blur(12px) saturate(150%);
  -webkit-backdrop-filter: blur(12px) saturate(150%);
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  pointer-events: auto;
  touch-action: manipulation;
}
._selectionCard_us6m8_425:hover {
  border-color: var(--clrAccent-100);
}
._selectionCard_us6m8_425:active {
  transform: scale(0.98);
}

._selectionIcon_us6m8_450 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 0;
  width: 60px;
  height: 60px;
  font-size: 32px;
  flex-shrink: 0;
}

._selectionText_us6m8_462 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 0;
}

._selectionTitle_us6m8_470 {
  font-size: 20px;
  font-weight: 700;
  color: var(--clrTextPrimary);
}

._selectionDescription_us6m8_476 {
  font-size: 14px;
  color: var(--clrAccent-30);
}

._formGroup_us6m8_481 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 4px;
  width: 100%;
}

._formLabel_us6m8_490 {
  padding: 0 4px;
  font-size: 16px;
  color: var(--clrTextPrimary);
}

._formInput_us6m8_496 {
  width: 100%;
  padding: 16px 12px;
  border-radius: 8px;
  border: none;
  background-color: var(--clrTertiary);
  color: var(--clrTextPrimary);
  font-size: 16px;
}
._formInput_us6m8_496::placeholder {
  color: var(--clrAccent-30);
}
._formInput_us6m8_496:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

@media (max-width: 768px) {
  ._drawer_us6m8_232 {
    max-width: 100%;
    padding: 0 16px 32px;
    padding-bottom: calc(8px + env(safe-area-inset-bottom));
  }
}
._desktopClose_us6m8_520 {
  display: none;
}

@media (min-width: 841px) {
  @keyframes _dialogIn_us6m8_1 {
    from {
      opacity: 0;
      transform: translateY(12px) scale(0.985);
    }
    to {
      opacity: 1;
      transform: translateY(0) scale(1);
    }
  }
  @keyframes _dialogOut_us6m8_1 {
    to {
      opacity: 0;
      transform: translateY(8px) scale(0.985);
    }
  }
  ._desktopModal_us6m8_541 {
    padding-top: 24px;
    border: 1px solid var(--clrTertiary);
    border-radius: 18px;
    animation: _dialogIn_us6m8_1 0.2s ease-out forwards;
  }
  ._desktopModal_us6m8_541._closing_us6m8_270 {
    animation: _dialogOut_us6m8_1 0.2s ease-in forwards;
  }
  ._desktopModal_us6m8_541 ._dragHandle_us6m8_285 {
    display: none;
  }
  ._desktopModal_us6m8_541 ._drawerHeader_us6m8_309 {
    padding-right: 44px;
  }
  ._desktopModal_us6m8_541 ._desktopClose_us6m8_520 {
    position: absolute;
    top: 18px;
    right: 18px;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    padding: 7px;
    background: var(--clrSecondary);
    border: 1px solid var(--clrTertiary);
    border-radius: 8px;
    color: var(--clrTextTertiary);
    cursor: pointer;
  }
  ._desktopModal_us6m8_541 ._desktopClose_us6m8_520 svg {
    width: 18px;
    height: 18px;
  }
  ._desktopModal_us6m8_541 ._desktopClose_us6m8_520:hover {
    color: var(--clrTextPrimary);
  }
  ._desktopModal_us6m8_541 ._desktopClose_us6m8_520:focus-visible {
    outline: 2px solid #8b5cf6;
    outline-offset: 2px;
  }
}html {
  color-scheme: dark;
}

html:has(body._themeLight_jcioh_5),
html:has(body._themePastelLight_jcioh_6) {
  color-scheme: light;
}

:root {
  --clrPrimary: #F4F4F5;
  --clrPrimary30: rgba(244, 244, 245, 0.3);
  --clrSecondary: #FEFEFE;
  --clrTertiary: #E4E4E7;
  --clrPrimaryReverse: #101418;
  --clrSecondaryReverse: #0A0F14;
  --clrTertiaryReverse: #212327;
  --clrTextPrimary: #101418;
  --clrTextSecondary: #2E3337;
  --clrTextTertiary: #7C7C7C;
  --clrTextPrimaryReverse: #F4F4F5;
  --clrTextSecondaryReverse: #CDCDCD;
  --clrTextTertiaryReverse: #8A8A8A;
  --clrError-100: #641f1f;
  --clrError-50: #c84d4d;
  --clrSuccess-100: #2d692d;
  --clrSuccess-50: #3EA03E;
  --clrSuccessOnTint: #0d260d;
  --clrErrorOnTint: #2e0a0a;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgb(50, 126, 75, 0.1) 30%,
          rgb(94, 178, 122, 0.36) 60%,
          rgb(144, 215, 168) 100%);
  --clrNavBackground: rgba(244, 244, 245, 0.15);
  --clrNavItemActive: rgba(211, 211, 211, 0.4);
  --clrNavItemHover: rgba(0, 0, 0, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #F4F4F5;
  --clrGlassBackground: rgba(255, 255, 255, 0.5);
  --clrGlassBackgroundStrong: rgba(255, 255, 255, 0.3);
  --clrGlassBorder: rgba(0, 0, 0, 0.1);
  --snackbarDefaultBg: #F1ECE9;
  --snackbarDefaultText: #5D605C;
  --snackbarDefaultBorder: #5D605C;
  --snackbarDefaultIcon: #5D605C;
  --snackbarSuccessBg: #E0F1D9;
  --snackbarSuccessText: #358935;
  --snackbarSuccessBorder: #358935;
  --snackbarSuccessIcon: #358935;
  --snackbarErrorBg: #F9E1DC;
  --snackbarErrorText: #C80D12;
  --snackbarErrorBorder: #C80D12;
  --snackbarErrorIcon: #C80D12;
}

._themeLight_jcioh_5 {
  --clrPrimary: #F4F4F5;
  --clrPrimary30: rgba(244, 244, 245, 0.3);
  --clrSecondary: #FEFEFE;
  --clrTertiary: #E4E4E7;
  --clrPrimaryReverse: #101418;
  --clrSecondaryReverse: #0A0F14;
  --clrTertiaryReverse: #212327;
  --clrTextPrimary: #101418;
  --clrTextSecondary: #2E3337;
  --clrTextTertiary: #7C7C7C;
  --clrTextPrimaryReverse: #F4F4F5;
  --clrTextSecondaryReverse: #CDCDCD;
  --clrTextTertiaryReverse: #8A8A8A;
  --clrError-100: #c03b3b;
  --clrError-50: #f6c5c5;
  --clrSuccess-100: #30d330;
  --clrSuccess-50: #bbffbb;
  --clrSuccessOnTint: #1f4f1f;
  --clrErrorOnTint: #7a1f1f;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgb(50, 126, 75, 0.1) 30%,
          rgb(94, 178, 122, 0.36) 60%,
          rgb(144, 215, 168) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(175, 49, 49, 0.1) 30%,
          rgba(238, 70, 70, 0.36) 60%,
          rgb(255, 173, 173) 100%);
  --clrNavBackground: rgba(244, 244, 245, 0.15);
  --clrNavItemActive: rgba(211, 211, 211, 0.4);
  --clrNavItemHover: rgba(0, 0, 0, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0000c1;
  --clrGlassBackground: rgba(255, 255, 255, 0.5);
  --clrGlassBackgroundStrong: rgba(255, 255, 255, 0.5);
  --clrGlassBorder: rgba(0, 0, 0, 0.1);
  --snackbarDefaultBg: #F1ECE9;
  --snackbarDefaultText: #5D605C;
  --snackbarDefaultBorder: #5D605C;
  --snackbarDefaultIcon: #5D605C;
  --snackbarSuccessBg: #E0F1D9;
  --snackbarSuccessText: #358935;
  --snackbarSuccessBorder: #358935;
  --snackbarSuccessIcon: #358935;
  --snackbarErrorBg: #F9E1DC;
  --snackbarErrorText: #C80D12;
  --snackbarErrorBorder: #C80D12;
  --snackbarErrorIcon: #C80D12;
}

._themeDark_jcioh_131 {
  --clrPrimary: #0F1418;
  --clrPrimary30: rgba(15, 20, 25, 0.3);
  --clrSecondary: #0A0F14;
  --clrTertiary: #212327;
  --clrPrimaryReverse: #F4F4F5;
  --clrSecondaryReverse: #FEFEFE;
  --clrTertiaryReverse: #E4E4E7;
  --clrTextPrimary: #F4F4F5;
  --clrTextSecondary: #CDCDCD;
  --clrTextTertiary: #8A8A8A;
  --clrTextPrimaryReverse: #101418;
  --clrTextSecondaryReverse: #2E3337;
  --clrTextTertiaryReverse: #7C7C7C;
  --clrError-100: #c84d4d;
  --clrError-50: #641f1f;
  --clrSuccess-100: #3EA03E;
  --clrSuccess-50: #2d692d;
  --clrSuccessOnTint: #d6ffd6;
  --clrErrorOnTint: #ffd6d6;
  --clrWarning-100: #E88434;
  --clrWarning-50: #C49168;
  --clrAccent-100: #FFFFFF;
  --clrAccent-80: rgba(255, 255, 255, 0.8);
  --clrAccent-60: rgba(255, 255, 255, 0.6);
  --clrAccent-50: rgba(255, 255, 255, 0.5);
  --clrAccent-40: rgba(255, 255, 255, 0.4);
  --clrAccent-30: rgba(255, 255, 255, 0.3);
  --clrAccent-20: rgba(255, 255, 255, 0.2);
  --clrAccent-10: rgba(255, 255, 255, 0.1);
  --clrGradient: linear-gradient(90deg, #262a2e 10%, var(--clrPrimary) 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(50, 126, 75, 0.15) 30%,
          rgba(50, 126, 75, 0.3) 60%,
          rgba(50, 126, 75, 0.5) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(167, 44, 44, 0) 0%,
          rgba(167, 44, 44, 0.15) 30%,
          rgba(167, 44, 44, 0.3) 60%,
          rgba(167, 44, 44, 0.5) 100%);
  --clrNavBackground: rgba(0, 0, 0, 0.15);
  --clrNavItemActive: rgba(24, 24, 24, 0.49);
  --clrNavItemHover: rgba(255, 255, 255, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0F1418;
  --clrGlassBackground: rgba(15, 20, 24, 0.5);
  --clrGlassBackgroundStrong: rgba(15, 20, 24, 0.6);
  --clrGlassBorder: rgba(255, 255, 255, 0.1);
  --snackbarDefaultBg: #414141;
  --snackbarDefaultText: #BABABA;
  --snackbarDefaultBorder: #BABABA;
  --snackbarDefaultIcon: #BABABA;
  --snackbarSuccessBg: #145E18;
  --snackbarSuccessText: #8FE094;
  --snackbarSuccessBorder: #8FE094;
  --snackbarSuccessIcon: #8FE094;
  --snackbarErrorBg: #910C09;
  --snackbarErrorText: #FE9E9D;
  --snackbarErrorBorder: #FE9E9D;
  --snackbarErrorIcon: #FE9E9D;
}

/* 

Note: 
    If you want something done quick, ask AI to buuild your color themes.
    If you want to do it right and tidy though, do it manually. 

    - Theo

*/
:root {
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --font-accent: "Jaro", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}

html,
body {
  font-family: var(--font-sans);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

._premiumBadge_jcioh_216 {
  font-size: 12px !important;
  font-weight: 600;
  padding: 2px 8px;
  background: linear-gradient(135deg, #FFD700, #FFA500);
  color: rgb(90, 80, 22) !important;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  box-shadow: 0 2px 8px rgba(255, 215, 0, 0.3);
}html {
  color-scheme: dark;
}

html:has(body._themeLight_gwho5_5),
html:has(body._themePastelLight_gwho5_6) {
  color-scheme: light;
}

:root {
  --clrPrimary: #F4F4F5;
  --clrPrimary30: rgba(244, 244, 245, 0.3);
  --clrSecondary: #FEFEFE;
  --clrTertiary: #E4E4E7;
  --clrPrimaryReverse: #101418;
  --clrSecondaryReverse: #0A0F14;
  --clrTertiaryReverse: #212327;
  --clrTextPrimary: #101418;
  --clrTextSecondary: #2E3337;
  --clrTextTertiary: #7C7C7C;
  --clrTextPrimaryReverse: #F4F4F5;
  --clrTextSecondaryReverse: #CDCDCD;
  --clrTextTertiaryReverse: #8A8A8A;
  --clrError-100: #641f1f;
  --clrError-50: #c84d4d;
  --clrSuccess-100: #2d692d;
  --clrSuccess-50: #3EA03E;
  --clrSuccessOnTint: #0d260d;
  --clrErrorOnTint: #2e0a0a;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgb(50, 126, 75, 0.1) 30%,
          rgb(94, 178, 122, 0.36) 60%,
          rgb(144, 215, 168) 100%);
  --clrNavBackground: rgba(244, 244, 245, 0.15);
  --clrNavItemActive: rgba(211, 211, 211, 0.4);
  --clrNavItemHover: rgba(0, 0, 0, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #F4F4F5;
  --clrGlassBackground: rgba(255, 255, 255, 0.5);
  --clrGlassBackgroundStrong: rgba(255, 255, 255, 0.3);
  --clrGlassBorder: rgba(0, 0, 0, 0.1);
  --snackbarDefaultBg: #F1ECE9;
  --snackbarDefaultText: #5D605C;
  --snackbarDefaultBorder: #5D605C;
  --snackbarDefaultIcon: #5D605C;
  --snackbarSuccessBg: #E0F1D9;
  --snackbarSuccessText: #358935;
  --snackbarSuccessBorder: #358935;
  --snackbarSuccessIcon: #358935;
  --snackbarErrorBg: #F9E1DC;
  --snackbarErrorText: #C80D12;
  --snackbarErrorBorder: #C80D12;
  --snackbarErrorIcon: #C80D12;
}

._themeLight_gwho5_5 {
  --clrPrimary: #F4F4F5;
  --clrPrimary30: rgba(244, 244, 245, 0.3);
  --clrSecondary: #FEFEFE;
  --clrTertiary: #E4E4E7;
  --clrPrimaryReverse: #101418;
  --clrSecondaryReverse: #0A0F14;
  --clrTertiaryReverse: #212327;
  --clrTextPrimary: #101418;
  --clrTextSecondary: #2E3337;
  --clrTextTertiary: #7C7C7C;
  --clrTextPrimaryReverse: #F4F4F5;
  --clrTextSecondaryReverse: #CDCDCD;
  --clrTextTertiaryReverse: #8A8A8A;
  --clrError-100: #c03b3b;
  --clrError-50: #f6c5c5;
  --clrSuccess-100: #30d330;
  --clrSuccess-50: #bbffbb;
  --clrSuccessOnTint: #1f4f1f;
  --clrErrorOnTint: #7a1f1f;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgb(50, 126, 75, 0.1) 30%,
          rgb(94, 178, 122, 0.36) 60%,
          rgb(144, 215, 168) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(175, 49, 49, 0.1) 30%,
          rgba(238, 70, 70, 0.36) 60%,
          rgb(255, 173, 173) 100%);
  --clrNavBackground: rgba(244, 244, 245, 0.15);
  --clrNavItemActive: rgba(211, 211, 211, 0.4);
  --clrNavItemHover: rgba(0, 0, 0, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0000c1;
  --clrGlassBackground: rgba(255, 255, 255, 0.5);
  --clrGlassBackgroundStrong: rgba(255, 255, 255, 0.5);
  --clrGlassBorder: rgba(0, 0, 0, 0.1);
  --snackbarDefaultBg: #F1ECE9;
  --snackbarDefaultText: #5D605C;
  --snackbarDefaultBorder: #5D605C;
  --snackbarDefaultIcon: #5D605C;
  --snackbarSuccessBg: #E0F1D9;
  --snackbarSuccessText: #358935;
  --snackbarSuccessBorder: #358935;
  --snackbarSuccessIcon: #358935;
  --snackbarErrorBg: #F9E1DC;
  --snackbarErrorText: #C80D12;
  --snackbarErrorBorder: #C80D12;
  --snackbarErrorIcon: #C80D12;
}

._themeDark_gwho5_131 {
  --clrPrimary: #0F1418;
  --clrPrimary30: rgba(15, 20, 25, 0.3);
  --clrSecondary: #0A0F14;
  --clrTertiary: #212327;
  --clrPrimaryReverse: #F4F4F5;
  --clrSecondaryReverse: #FEFEFE;
  --clrTertiaryReverse: #E4E4E7;
  --clrTextPrimary: #F4F4F5;
  --clrTextSecondary: #CDCDCD;
  --clrTextTertiary: #8A8A8A;
  --clrTextPrimaryReverse: #101418;
  --clrTextSecondaryReverse: #2E3337;
  --clrTextTertiaryReverse: #7C7C7C;
  --clrError-100: #c84d4d;
  --clrError-50: #641f1f;
  --clrSuccess-100: #3EA03E;
  --clrSuccess-50: #2d692d;
  --clrSuccessOnTint: #d6ffd6;
  --clrErrorOnTint: #ffd6d6;
  --clrWarning-100: #E88434;
  --clrWarning-50: #C49168;
  --clrAccent-100: #FFFFFF;
  --clrAccent-80: rgba(255, 255, 255, 0.8);
  --clrAccent-60: rgba(255, 255, 255, 0.6);
  --clrAccent-50: rgba(255, 255, 255, 0.5);
  --clrAccent-40: rgba(255, 255, 255, 0.4);
  --clrAccent-30: rgba(255, 255, 255, 0.3);
  --clrAccent-20: rgba(255, 255, 255, 0.2);
  --clrAccent-10: rgba(255, 255, 255, 0.1);
  --clrGradient: linear-gradient(90deg, #262a2e 10%, var(--clrPrimary) 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(50, 126, 75, 0.15) 30%,
          rgba(50, 126, 75, 0.3) 60%,
          rgba(50, 126, 75, 0.5) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(167, 44, 44, 0) 0%,
          rgba(167, 44, 44, 0.15) 30%,
          rgba(167, 44, 44, 0.3) 60%,
          rgba(167, 44, 44, 0.5) 100%);
  --clrNavBackground: rgba(0, 0, 0, 0.15);
  --clrNavItemActive: rgba(24, 24, 24, 0.49);
  --clrNavItemHover: rgba(255, 255, 255, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0F1418;
  --clrGlassBackground: rgba(15, 20, 24, 0.5);
  --clrGlassBackgroundStrong: rgba(15, 20, 24, 0.6);
  --clrGlassBorder: rgba(255, 255, 255, 0.1);
  --snackbarDefaultBg: #414141;
  --snackbarDefaultText: #BABABA;
  --snackbarDefaultBorder: #BABABA;
  --snackbarDefaultIcon: #BABABA;
  --snackbarSuccessBg: #145E18;
  --snackbarSuccessText: #8FE094;
  --snackbarSuccessBorder: #8FE094;
  --snackbarSuccessIcon: #8FE094;
  --snackbarErrorBg: #910C09;
  --snackbarErrorText: #FE9E9D;
  --snackbarErrorBorder: #FE9E9D;
  --snackbarErrorIcon: #FE9E9D;
}

/* 

Note: 
    If you want something done quick, ask AI to buuild your color themes.
    If you want to do it right and tidy though, do it manually. 

    - Theo

*/
:root {
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --font-accent: "Jaro", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}

html,
body {
  font-family: var(--font-sans);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

._toggle_gwho5_216 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 100%;
  padding: 4px;
  margin: 16px 0;
  background-color: var(--clrAccent-10);
  border-radius: 12px;
}

._option_gwho5_229 {
  flex: 1;
  padding: 10px 16px;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 600;
  color: var(--clrAccent-60);
  background: transparent;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
}
._option_gwho5_229:active:not(:disabled) {
  transform: scale(0.98);
}
._option_gwho5_229:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

._active_gwho5_250 {
  background-color: var(--clrPrimaryReverse);
  color: var(--clrPrimary);
}html {
  color-scheme: dark;
}

html:has(body._themeLight_1angz_5),
html:has(body._themePastelLight_1angz_6) {
  color-scheme: light;
}

:root {
  --clrPrimary: #F4F4F5;
  --clrPrimary30: rgba(244, 244, 245, 0.3);
  --clrSecondary: #FEFEFE;
  --clrTertiary: #E4E4E7;
  --clrPrimaryReverse: #101418;
  --clrSecondaryReverse: #0A0F14;
  --clrTertiaryReverse: #212327;
  --clrTextPrimary: #101418;
  --clrTextSecondary: #2E3337;
  --clrTextTertiary: #7C7C7C;
  --clrTextPrimaryReverse: #F4F4F5;
  --clrTextSecondaryReverse: #CDCDCD;
  --clrTextTertiaryReverse: #8A8A8A;
  --clrError-100: #641f1f;
  --clrError-50: #c84d4d;
  --clrSuccess-100: #2d692d;
  --clrSuccess-50: #3EA03E;
  --clrSuccessOnTint: #0d260d;
  --clrErrorOnTint: #2e0a0a;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgb(50, 126, 75, 0.1) 30%,
          rgb(94, 178, 122, 0.36) 60%,
          rgb(144, 215, 168) 100%);
  --clrNavBackground: rgba(244, 244, 245, 0.15);
  --clrNavItemActive: rgba(211, 211, 211, 0.4);
  --clrNavItemHover: rgba(0, 0, 0, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #F4F4F5;
  --clrGlassBackground: rgba(255, 255, 255, 0.5);
  --clrGlassBackgroundStrong: rgba(255, 255, 255, 0.3);
  --clrGlassBorder: rgba(0, 0, 0, 0.1);
  --snackbarDefaultBg: #F1ECE9;
  --snackbarDefaultText: #5D605C;
  --snackbarDefaultBorder: #5D605C;
  --snackbarDefaultIcon: #5D605C;
  --snackbarSuccessBg: #E0F1D9;
  --snackbarSuccessText: #358935;
  --snackbarSuccessBorder: #358935;
  --snackbarSuccessIcon: #358935;
  --snackbarErrorBg: #F9E1DC;
  --snackbarErrorText: #C80D12;
  --snackbarErrorBorder: #C80D12;
  --snackbarErrorIcon: #C80D12;
}

._themeLight_1angz_5 {
  --clrPrimary: #F4F4F5;
  --clrPrimary30: rgba(244, 244, 245, 0.3);
  --clrSecondary: #FEFEFE;
  --clrTertiary: #E4E4E7;
  --clrPrimaryReverse: #101418;
  --clrSecondaryReverse: #0A0F14;
  --clrTertiaryReverse: #212327;
  --clrTextPrimary: #101418;
  --clrTextSecondary: #2E3337;
  --clrTextTertiary: #7C7C7C;
  --clrTextPrimaryReverse: #F4F4F5;
  --clrTextSecondaryReverse: #CDCDCD;
  --clrTextTertiaryReverse: #8A8A8A;
  --clrError-100: #c03b3b;
  --clrError-50: #f6c5c5;
  --clrSuccess-100: #30d330;
  --clrSuccess-50: #bbffbb;
  --clrSuccessOnTint: #1f4f1f;
  --clrErrorOnTint: #7a1f1f;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgb(50, 126, 75, 0.1) 30%,
          rgb(94, 178, 122, 0.36) 60%,
          rgb(144, 215, 168) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(175, 49, 49, 0.1) 30%,
          rgba(238, 70, 70, 0.36) 60%,
          rgb(255, 173, 173) 100%);
  --clrNavBackground: rgba(244, 244, 245, 0.15);
  --clrNavItemActive: rgba(211, 211, 211, 0.4);
  --clrNavItemHover: rgba(0, 0, 0, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0000c1;
  --clrGlassBackground: rgba(255, 255, 255, 0.5);
  --clrGlassBackgroundStrong: rgba(255, 255, 255, 0.5);
  --clrGlassBorder: rgba(0, 0, 0, 0.1);
  --snackbarDefaultBg: #F1ECE9;
  --snackbarDefaultText: #5D605C;
  --snackbarDefaultBorder: #5D605C;
  --snackbarDefaultIcon: #5D605C;
  --snackbarSuccessBg: #E0F1D9;
  --snackbarSuccessText: #358935;
  --snackbarSuccessBorder: #358935;
  --snackbarSuccessIcon: #358935;
  --snackbarErrorBg: #F9E1DC;
  --snackbarErrorText: #C80D12;
  --snackbarErrorBorder: #C80D12;
  --snackbarErrorIcon: #C80D12;
}

._themeDark_1angz_131 {
  --clrPrimary: #0F1418;
  --clrPrimary30: rgba(15, 20, 25, 0.3);
  --clrSecondary: #0A0F14;
  --clrTertiary: #212327;
  --clrPrimaryReverse: #F4F4F5;
  --clrSecondaryReverse: #FEFEFE;
  --clrTertiaryReverse: #E4E4E7;
  --clrTextPrimary: #F4F4F5;
  --clrTextSecondary: #CDCDCD;
  --clrTextTertiary: #8A8A8A;
  --clrTextPrimaryReverse: #101418;
  --clrTextSecondaryReverse: #2E3337;
  --clrTextTertiaryReverse: #7C7C7C;
  --clrError-100: #c84d4d;
  --clrError-50: #641f1f;
  --clrSuccess-100: #3EA03E;
  --clrSuccess-50: #2d692d;
  --clrSuccessOnTint: #d6ffd6;
  --clrErrorOnTint: #ffd6d6;
  --clrWarning-100: #E88434;
  --clrWarning-50: #C49168;
  --clrAccent-100: #FFFFFF;
  --clrAccent-80: rgba(255, 255, 255, 0.8);
  --clrAccent-60: rgba(255, 255, 255, 0.6);
  --clrAccent-50: rgba(255, 255, 255, 0.5);
  --clrAccent-40: rgba(255, 255, 255, 0.4);
  --clrAccent-30: rgba(255, 255, 255, 0.3);
  --clrAccent-20: rgba(255, 255, 255, 0.2);
  --clrAccent-10: rgba(255, 255, 255, 0.1);
  --clrGradient: linear-gradient(90deg, #262a2e 10%, var(--clrPrimary) 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(50, 126, 75, 0.15) 30%,
          rgba(50, 126, 75, 0.3) 60%,
          rgba(50, 126, 75, 0.5) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(167, 44, 44, 0) 0%,
          rgba(167, 44, 44, 0.15) 30%,
          rgba(167, 44, 44, 0.3) 60%,
          rgba(167, 44, 44, 0.5) 100%);
  --clrNavBackground: rgba(0, 0, 0, 0.15);
  --clrNavItemActive: rgba(24, 24, 24, 0.49);
  --clrNavItemHover: rgba(255, 255, 255, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0F1418;
  --clrGlassBackground: rgba(15, 20, 24, 0.5);
  --clrGlassBackgroundStrong: rgba(15, 20, 24, 0.6);
  --clrGlassBorder: rgba(255, 255, 255, 0.1);
  --snackbarDefaultBg: #414141;
  --snackbarDefaultText: #BABABA;
  --snackbarDefaultBorder: #BABABA;
  --snackbarDefaultIcon: #BABABA;
  --snackbarSuccessBg: #145E18;
  --snackbarSuccessText: #8FE094;
  --snackbarSuccessBorder: #8FE094;
  --snackbarSuccessIcon: #8FE094;
  --snackbarErrorBg: #910C09;
  --snackbarErrorText: #FE9E9D;
  --snackbarErrorBorder: #FE9E9D;
  --snackbarErrorIcon: #FE9E9D;
}

/* 

Note: 
    If you want something done quick, ask AI to buuild your color themes.
    If you want to do it right and tidy though, do it manually. 

    - Theo

*/
:root {
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --font-accent: "Jaro", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}

html,
body {
  font-family: var(--font-sans);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

._container_1angz_216 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 0;
  max-width: 820px;
  margin: 0 auto;
  width: 100%;
  padding: 0 16px;
  overflow-x: hidden;
  padding-top: calc(60px + env(safe-area-inset-top));
  padding-bottom: calc(60px + env(safe-area-inset-bottom) + 64px);
}

._pageTitle_1angz_231 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 0;
  width: 100%;
  padding: 16px 0;
}
._pageTitle_1angz_231 h1 {
  font-family: var(--font-sans);
  font-size: 20px;
  font-weight: 700;
  color: var(--clrPrimaryReverse);
  margin: 0;
}

._form_1angz_248 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 8px;
  width: 100%;
}

._inputRow_1angz_257 {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 8px;
  width: 100%;
}
._inputRow_1angz_257 > * {
  flex: 1;
}

._leaderCarouselWrapper_1angz_269 {
  width: 100%;
}
._leaderCarouselWrapper_1angz_269 > div {
  padding-top: 14px;
  padding-bottom: 14px;
}

._submitButton_1angz_277 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 0;
  width: 100%;
  min-height: 56px;
  padding: 16px 24px;
  margin-top: 8px;
  background-color: var(--clrPrimaryReverse);
  color: var(--clrPrimary);
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
}
._submitButton_1angz_277:hover:not(:disabled) {
  opacity: 0.9;
}
._submitButton_1angz_277:active:not(:disabled) {
  transform: scale(0.98);
}
._submitButton_1angz_277:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

._message_1angz_308 {
  width: 100%;
  text-align: center;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  padding: 8px 0;
}

._modalOverlay_1angz_317 {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 0;
  z-index: 1000;
  backdrop-filter: blur(4px);
}

._modalContent_1angz_333 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  background-color: var(--clrPrimary);
  border-radius: 12px;
  padding: 24px;
  max-width: 400px;
  width: calc(100% - 32px);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.2);
}
._modalContent_1angz_333 h3 {
  font-family: var(--font-sans);
  font-size: 18px;
  font-weight: 700;
  color: var(--clrPrimaryReverse);
  margin: 0;
}
._modalContent_1angz_333 p {
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--clrAccent-60);
  text-align: center;
  margin: 0;
}

._modalButtons_1angz_361 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  margin-top: 8px;
}
._modalButtons_1angz_361 button {
  width: 100%;
  min-height: 48px;
  padding: 12px 24px;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
}
._modalButtons_1angz_361 button:active:not(:disabled) {
  transform: scale(0.98);
}

._upgradeButton_1angz_385 {
  background-color: var(--clrPrimaryReverse);
  color: var(--clrPrimary);
  border: none;
}
._upgradeButton_1angz_385:hover {
  opacity: 0.9;
}

._cancelButton_1angz_394 {
  background-color: transparent;
  color: var(--clrAccent-100);
  border: 1px solid var(--clrAccent-100);
}
._cancelButton_1angz_394:hover {
  background-color: var(--clrAccent-10);
}html {
  color-scheme: dark;
}

html:has(body._themeLight_1dt0w_5),
html:has(body._themePastelLight_1dt0w_6) {
  color-scheme: light;
}

:root {
  --clrPrimary: #F4F4F5;
  --clrPrimary30: rgba(244, 244, 245, 0.3);
  --clrSecondary: #FEFEFE;
  --clrTertiary: #E4E4E7;
  --clrPrimaryReverse: #101418;
  --clrSecondaryReverse: #0A0F14;
  --clrTertiaryReverse: #212327;
  --clrTextPrimary: #101418;
  --clrTextSecondary: #2E3337;
  --clrTextTertiary: #7C7C7C;
  --clrTextPrimaryReverse: #F4F4F5;
  --clrTextSecondaryReverse: #CDCDCD;
  --clrTextTertiaryReverse: #8A8A8A;
  --clrError-100: #641f1f;
  --clrError-50: #c84d4d;
  --clrSuccess-100: #2d692d;
  --clrSuccess-50: #3EA03E;
  --clrSuccessOnTint: #0d260d;
  --clrErrorOnTint: #2e0a0a;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgb(50, 126, 75, 0.1) 30%,
          rgb(94, 178, 122, 0.36) 60%,
          rgb(144, 215, 168) 100%);
  --clrNavBackground: rgba(244, 244, 245, 0.15);
  --clrNavItemActive: rgba(211, 211, 211, 0.4);
  --clrNavItemHover: rgba(0, 0, 0, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #F4F4F5;
  --clrGlassBackground: rgba(255, 255, 255, 0.5);
  --clrGlassBackgroundStrong: rgba(255, 255, 255, 0.3);
  --clrGlassBorder: rgba(0, 0, 0, 0.1);
  --snackbarDefaultBg: #F1ECE9;
  --snackbarDefaultText: #5D605C;
  --snackbarDefaultBorder: #5D605C;
  --snackbarDefaultIcon: #5D605C;
  --snackbarSuccessBg: #E0F1D9;
  --snackbarSuccessText: #358935;
  --snackbarSuccessBorder: #358935;
  --snackbarSuccessIcon: #358935;
  --snackbarErrorBg: #F9E1DC;
  --snackbarErrorText: #C80D12;
  --snackbarErrorBorder: #C80D12;
  --snackbarErrorIcon: #C80D12;
}

._themeLight_1dt0w_5 {
  --clrPrimary: #F4F4F5;
  --clrPrimary30: rgba(244, 244, 245, 0.3);
  --clrSecondary: #FEFEFE;
  --clrTertiary: #E4E4E7;
  --clrPrimaryReverse: #101418;
  --clrSecondaryReverse: #0A0F14;
  --clrTertiaryReverse: #212327;
  --clrTextPrimary: #101418;
  --clrTextSecondary: #2E3337;
  --clrTextTertiary: #7C7C7C;
  --clrTextPrimaryReverse: #F4F4F5;
  --clrTextSecondaryReverse: #CDCDCD;
  --clrTextTertiaryReverse: #8A8A8A;
  --clrError-100: #c03b3b;
  --clrError-50: #f6c5c5;
  --clrSuccess-100: #30d330;
  --clrSuccess-50: #bbffbb;
  --clrSuccessOnTint: #1f4f1f;
  --clrErrorOnTint: #7a1f1f;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgb(50, 126, 75, 0.1) 30%,
          rgb(94, 178, 122, 0.36) 60%,
          rgb(144, 215, 168) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(175, 49, 49, 0.1) 30%,
          rgba(238, 70, 70, 0.36) 60%,
          rgb(255, 173, 173) 100%);
  --clrNavBackground: rgba(244, 244, 245, 0.15);
  --clrNavItemActive: rgba(211, 211, 211, 0.4);
  --clrNavItemHover: rgba(0, 0, 0, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0000c1;
  --clrGlassBackground: rgba(255, 255, 255, 0.5);
  --clrGlassBackgroundStrong: rgba(255, 255, 255, 0.5);
  --clrGlassBorder: rgba(0, 0, 0, 0.1);
  --snackbarDefaultBg: #F1ECE9;
  --snackbarDefaultText: #5D605C;
  --snackbarDefaultBorder: #5D605C;
  --snackbarDefaultIcon: #5D605C;
  --snackbarSuccessBg: #E0F1D9;
  --snackbarSuccessText: #358935;
  --snackbarSuccessBorder: #358935;
  --snackbarSuccessIcon: #358935;
  --snackbarErrorBg: #F9E1DC;
  --snackbarErrorText: #C80D12;
  --snackbarErrorBorder: #C80D12;
  --snackbarErrorIcon: #C80D12;
}

._themeDark_1dt0w_131 {
  --clrPrimary: #0F1418;
  --clrPrimary30: rgba(15, 20, 25, 0.3);
  --clrSecondary: #0A0F14;
  --clrTertiary: #212327;
  --clrPrimaryReverse: #F4F4F5;
  --clrSecondaryReverse: #FEFEFE;
  --clrTertiaryReverse: #E4E4E7;
  --clrTextPrimary: #F4F4F5;
  --clrTextSecondary: #CDCDCD;
  --clrTextTertiary: #8A8A8A;
  --clrTextPrimaryReverse: #101418;
  --clrTextSecondaryReverse: #2E3337;
  --clrTextTertiaryReverse: #7C7C7C;
  --clrError-100: #c84d4d;
  --clrError-50: #641f1f;
  --clrSuccess-100: #3EA03E;
  --clrSuccess-50: #2d692d;
  --clrSuccessOnTint: #d6ffd6;
  --clrErrorOnTint: #ffd6d6;
  --clrWarning-100: #E88434;
  --clrWarning-50: #C49168;
  --clrAccent-100: #FFFFFF;
  --clrAccent-80: rgba(255, 255, 255, 0.8);
  --clrAccent-60: rgba(255, 255, 255, 0.6);
  --clrAccent-50: rgba(255, 255, 255, 0.5);
  --clrAccent-40: rgba(255, 255, 255, 0.4);
  --clrAccent-30: rgba(255, 255, 255, 0.3);
  --clrAccent-20: rgba(255, 255, 255, 0.2);
  --clrAccent-10: rgba(255, 255, 255, 0.1);
  --clrGradient: linear-gradient(90deg, #262a2e 10%, var(--clrPrimary) 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(50, 126, 75, 0.15) 30%,
          rgba(50, 126, 75, 0.3) 60%,
          rgba(50, 126, 75, 0.5) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(167, 44, 44, 0) 0%,
          rgba(167, 44, 44, 0.15) 30%,
          rgba(167, 44, 44, 0.3) 60%,
          rgba(167, 44, 44, 0.5) 100%);
  --clrNavBackground: rgba(0, 0, 0, 0.15);
  --clrNavItemActive: rgba(24, 24, 24, 0.49);
  --clrNavItemHover: rgba(255, 255, 255, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0F1418;
  --clrGlassBackground: rgba(15, 20, 24, 0.5);
  --clrGlassBackgroundStrong: rgba(15, 20, 24, 0.6);
  --clrGlassBorder: rgba(255, 255, 255, 0.1);
  --snackbarDefaultBg: #414141;
  --snackbarDefaultText: #BABABA;
  --snackbarDefaultBorder: #BABABA;
  --snackbarDefaultIcon: #BABABA;
  --snackbarSuccessBg: #145E18;
  --snackbarSuccessText: #8FE094;
  --snackbarSuccessBorder: #8FE094;
  --snackbarSuccessIcon: #8FE094;
  --snackbarErrorBg: #910C09;
  --snackbarErrorText: #FE9E9D;
  --snackbarErrorBorder: #FE9E9D;
  --snackbarErrorIcon: #FE9E9D;
}

/* 

Note: 
    If you want something done quick, ask AI to buuild your color themes.
    If you want to do it right and tidy though, do it manually. 

    - Theo

*/
:root {
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --font-accent: "Jaro", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}

html,
body {
  font-family: var(--font-sans);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

._container_1dt0w_216 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 0;
  max-width: 820px;
  margin: 0 auto;
  width: 100%;
  padding: 0 16px;
  overflow-x: hidden;
  padding-top: calc(60px + env(safe-area-inset-top));
  padding-bottom: calc(60px + env(safe-area-inset-bottom) + 64px);
}

._editContainer_1dt0w_231 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 0;
  width: 100%;
}

._pageTitle_1dt0w_240 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 0;
  width: 100%;
  padding: 16px 0;
}
._pageTitle_1dt0w_240 h1 {
  font-family: var(--font-sans);
  font-size: 20px;
  font-weight: 700;
  color: var(--clrPrimaryReverse);
  margin: 0;
}

._form_1dt0w_257 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 8px;
  width: 100%;
}

._inputRow_1dt0w_266 {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 8px;
  width: 100%;
}
._inputRow_1dt0w_266 > * {
  flex: 1;
}

._leaderCarouselWrapper_1dt0w_278 {
  width: 100%;
}
._leaderCarouselWrapper_1dt0w_278 > div {
  padding-top: 14px;
  padding-bottom: 14px;
}

._toggleRow_1dt0w_286 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: stretch;
  gap: 8px;
  width: 100%;
}
._toggleRow_1dt0w_286 > * {
  flex: 1;
}

._singleToggleBtn_1dt0w_298 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  min-height: 48px;
  padding: 12px 16px;
  background-color: var(--clrAccent-10);
  color: var(--clrPrimaryReverse);
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  border: 1px solid var(--clrAccent-10);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
}
._singleToggleBtn_1dt0w_298 ._value_1dt0w_317 {
  font-weight: 700;
}
._singleToggleBtn_1dt0w_298:active:not(:disabled) {
  transform: scale(0.98);
}
._singleToggleBtn_1dt0w_298:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

._winResult_1dt0w_328 {
  border-color: var(--clrSuccess-100);
  color: var(--clrSuccess-100);
}
._winResult_1dt0w_328 ._value_1dt0w_317 {
  color: var(--clrSuccess-100);
}

._loseResult_1dt0w_336 {
  border-color: var(--clrError-100);
  color: var(--clrError-100);
}
._loseResult_1dt0w_336 ._value_1dt0w_317 {
  color: var(--clrError-100);
}

._noteWrapper_1dt0w_344 {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 4px;
  margin-top: 4px;
}

._noteLabel_1dt0w_355 {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 500;
  color: var(--clrAccent-60);
}

._noteInput_1dt0w_362 {
  width: 100%;
  padding: 12px 16px;
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--clrPrimaryReverse);
  background-color: var(--clrAccent-10);
  border: 1px solid var(--clrAccent-10);
  border-radius: 8px;
  resize: vertical;
}
._noteInput_1dt0w_362:focus {
  outline: none;
  border-color: var(--clrPrimaryReverse);
}
._noteInput_1dt0w_362:disabled {
  opacity: 0.5;
}

._noteCount_1dt0w_381 {
  align-self: flex-end;
  font-family: var(--font-sans);
  font-size: 12px;
  color: var(--clrAccent-60);
}

._message_1dt0w_388 {
  width: 100%;
  text-align: center;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  padding: 8px 0;
}:root {
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --font-accent: "Jaro", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}

html,
body {
  font-family: var(--font-sans);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

._card_1051h_14 {
  position: relative;
  display: grid;
  grid-template-columns: 86px minmax(0, 1fr);
  gap: 14px;
  width: 100%;
  min-height: 148px;
  padding: 16px;
  color: var(--clrTextPrimary);
  text-align: left;
  background: color-mix(in srgb, var(--clrSecondary) 86%, transparent);
  border: 1px solid color-mix(in srgb, var(--tier-color) 72%, var(--clrTertiary));
  border-radius: 8px;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.14);
  cursor: pointer;
  overflow: hidden;
}
._card_1051h_14:hover {
  transform: translateY(-1px);
}

._compactCard_1051h_35 {
  min-height: 104px;
  grid-template-columns: 68px minmax(0, 1fr);
  padding: 12px;
}

._locked_1051h_41 {
  opacity: 0.76;
  border-color: var(--clrAccent-20);
}

._statusBadge_1051h_46 {
  position: absolute;
  top: 10px;
  right: 10px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 24px;
  padding: 0 9px;
  color: var(--clrTextPrimary);
  font-size: 0.72rem;
  font-weight: 700;
  background: color-mix(in srgb, var(--clrSecondary) 88%, transparent);
  border: 1px solid var(--clrAccent-10);
  border-radius: 999px;
  backdrop-filter: blur(14px);
}
._statusBadge_1051h_46 svg {
  width: 14px;
  height: 14px;
  color: var(--tier-color);
}

._iconRail_1051h_69 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-width: 0;
}

._tierBadge_1051h_78,
._chip_1051h_79,
._detailBadges_1051h_80 span,
._toastTier_1051h_81 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 26px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
}

._tierBadge_1051h_78 {
  color: #101418;
  background: var(--tier-color);
}

._achievementIcon_1051h_99,
._detailIcon_1051h_100,
._toastIcon_1051h_101,
._shareCardIcon_1051h_102 {
  display: grid;
  place-items: center;
  background: radial-gradient(circle at 35% 25%, color-mix(in srgb, var(--tier-color) 26%, transparent), transparent 62%), color-mix(in srgb, var(--clrPrimary) 70%, transparent);
  border: 1px solid color-mix(in srgb, var(--tier-color) 45%, transparent);
  border-radius: 50%;
  overflow: hidden;
}
._achievementIcon_1051h_99 img,
._achievementIcon_1051h_99 svg,
._detailIcon_1051h_100 img,
._detailIcon_1051h_100 svg,
._toastIcon_1051h_101 img,
._toastIcon_1051h_101 svg,
._shareCardIcon_1051h_102 img,
._shareCardIcon_1051h_102 svg {
  width: 68%;
  height: 68%;
  object-fit: cover;
  color: var(--tier-color);
}

._achievementIcon_1051h_99 {
  width: 58px;
  height: 58px;
}

._cardBody_1051h_129 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  padding-top: 18px;
}

._cardTitle_1051h_137 {
  max-width: calc(100% - 86px);
  color: var(--clrTextPrimary);
  font-size: 1rem;
  font-weight: 800;
  line-height: 1.2;
}

._requirement_1051h_145,
._flavor_1051h_146 {
  display: -webkit-box;
  margin-top: 6px;
  color: var(--clrTextSecondary);
  font-size: 0.84rem;
  line-height: 1.32;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

._flavor_1051h_146 {
  color: var(--clrTextTertiary);
  font-style: italic;
}

._progressRow_1051h_162,
._detailProgress_1051h_163 {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
}

._progressTrack_1051h_171 {
  display: block;
  height: 7px;
  background: var(--clrAccent-10);
  border-radius: 999px;
  overflow: hidden;
}

._progressFill_1051h_179 {
  display: block;
  height: 100%;
  background: var(--tier-color);
  border-radius: inherit;
}

._progressText_1051h_186 {
  color: var(--clrTextTertiary);
  font-size: 0.78rem;
  font-weight: 700;
}

._chipRow_1051h_192 {
  display: flex;
  gap: 8px;
  padding: 2px;
  overflow-x: auto;
}

._chip_1051h_79 {
  color: var(--clrTextSecondary);
  background: var(--clrSecondary);
  border: 1px solid var(--clrAccent-20);
  cursor: pointer;
}

._activeChip_1051h_206 {
  color: var(--clrTextPrimaryReverse);
  background: var(--clrPrimaryReverse);
  border-color: var(--clrPrimaryReverse);
}

._showcaseGrid_1051h_212 {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
._showcaseGrid_1051h_212::-webkit-scrollbar {
  display: none;
}

._showcaseGrid_1051h_212 > * {
  flex: 1 0 112px;
  min-width: 112px;
  scroll-snap-align: start;
}

@media (max-width: 660px) {
  ._showcaseGrid_1051h_212 {
    mask-image: linear-gradient(to right, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
  }
}
._showcaseSlot_1051h_236 {
  display: flex;
  align-items: stretch;
  justify-content: center;
  min-height: 98px;
  min-width: 0;
  background: var(--clrAccent-10);
  border: 1px dashed var(--clrAccent-20);
  border-radius: 8px;
  cursor: pointer;
  overflow: hidden;
}

._showcaseSlotInner_1051h_249 {
  display: flex;
  min-width: 0;
  width: 100%;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 9px 6px;
}

._showcaseIconWrap_1051h_260 {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
}
._showcaseIconWrap_1051h_260 img,
._showcaseIconWrap_1051h_260 svg {
  width: 68%;
  height: 68%;
  color: var(--clrTextTertiary);
  object-fit: contain;
}

._showcaseTitle_1051h_275 {
  display: -webkit-box;
  width: 100%;
  min-height: 2.2em;
  color: var(--clrTextSecondary);
  font-size: 0.68rem;
  font-weight: 800;
  line-height: 1.1;
  text-align: center;
  word-break: break-word;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

._filledSlot_1051h_290 {
  background: radial-gradient(circle at 50% 28%, color-mix(in srgb, var(--tier-color) 18%, transparent), transparent 64%), var(--clrSecondary);
  border-color: color-mix(in srgb, var(--tier-color) 72%, var(--clrAccent-20));
  border-style: solid;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tier-color) 18%, transparent);
}
._filledSlot_1051h_290 ._showcaseIconWrap_1051h_260 {
  background: color-mix(in srgb, var(--tier-color) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--tier-color) 42%, transparent);
  border-radius: 50%;
}
._filledSlot_1051h_290 svg {
  color: var(--tier-color);
}
._filledSlot_1051h_290 ._showcaseTitle_1051h_275 {
  color: color-mix(in srgb, var(--tier-color) 30%, var(--clrTextPrimary));
}

._compactShowcase_1051h_308 {
  justify-content: center;
}
._compactShowcase_1051h_308 > * {
  flex: 0 0 48px;
  min-width: 48px;
}
._compactShowcase_1051h_308 ._showcaseSlot_1051h_236 {
  min-height: 48px;
}
._compactShowcase_1051h_308 ._showcaseSlotInner_1051h_249 {
  padding: 5px;
  gap: 0;
}
._compactShowcase_1051h_308 ._showcaseIconWrap_1051h_260 {
  width: 32px;
  height: 32px;
}
._compactShowcase_1051h_308 ._showcaseTitle_1051h_275 {
  display: none;
}

._detailDrawer_1051h_330 {
  max-width: 620px;
}

._detailContent_1051h_334 {
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  text-align: center;
}

._detailIcon_1051h_100 {
  position: relative;
  width: 118px;
  height: 118px;
  margin-top: 8px;
  overflow: visible;
}

._detailLeaderOverlay_1051h_351 {
  position: absolute;
  right: -14px;
  bottom: -10px;
  z-index: 1;
}
._detailLeaderOverlay_1051h_351 img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

._detailBadges_1051h_80 {
  display: flex;
  gap: 8px;
}
._detailBadges_1051h_80 span {
  color: #101418;
  background: var(--tier-color);
}

._detailFlavor_1051h_372 {
  margin: 0;
  color: var(--clrTextSecondary);
  font-size: 1rem;
  line-height: 1.45;
}

._detailProgress_1051h_163 {
  width: min(100%, 420px);
}

._detailMeta_1051h_383 {
  margin: 0;
  color: var(--clrTextTertiary);
  font-size: 0.9rem;
}

._shareButton_1051h_389 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 132px;
  height: 42px;
  padding: 0 16px;
  color: var(--clrTextPrimaryReverse);
  font-weight: 800;
  background: var(--clrPrimaryReverse);
  border: 0;
  border-radius: 8px;
  cursor: pointer;
}
._shareButton_1051h_389 svg {
  width: 18px;
  height: 18px;
}

._shareCard_1051h_102 {
  position: fixed;
  left: -10000px;
  top: 0;
  width: 1080px;
  height: 1350px;
  pointer-events: none;
}

._shareCardInner_1051h_418 {
  display: flex;
  width: 100%;
  height: 100%;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 32px;
  padding: 96px;
  color: #f8fafc;
  text-align: center;
  background: #101418;
}
._shareCardInner_1051h_418 h2 {
  max-width: 820px;
  margin: 0;
  font-size: 76px;
  line-height: 1.05;
}
._shareCardInner_1051h_418 p {
  max-width: 760px;
  margin: 0;
  font-size: 34px;
  line-height: 1.25;
}

._shareCardIcon_1051h_102 {
  position: relative;
  width: 280px;
  height: 280px;
  overflow: visible;
}

._shareCardLeaderOverlay_1051h_451 {
  position: absolute;
  right: -28px;
  bottom: -20px;
  z-index: 1;
}
._shareCardLeaderOverlay_1051h_451 img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

._toastRegion_1051h_463 {
  position: fixed;
  top: calc(env(safe-area-inset-top, 0px) + 74px);
  left: 50%;
  z-index: 2000;
  width: min(92vw, 440px);
  transform: translateX(-50%);
}

._toast_1051h_81 {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px;
  color: var(--clrTextPrimary);
  text-align: left;
  background: color-mix(in srgb, var(--clrSecondary) 90%, transparent);
  border: 1px solid color-mix(in srgb, var(--tier-color) 68%, transparent);
  border-radius: 8px;
  box-shadow: 0 18px 38px rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(18px);
  cursor: pointer;
  touch-action: none;
}

._toastIcon_1051h_101 {
  width: 52px;
  height: 52px;
}

._toastCopy_1051h_495 {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 2px;
}
._toastCopy_1051h_495 span {
  color: var(--clrTextTertiary);
  font-size: 0.76rem;
  font-weight: 800;
  text-transform: uppercase;
}
._toastCopy_1051h_495 strong {
  overflow: hidden;
  color: var(--clrTextPrimary);
  font-size: 0.98rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

._toastTier_1051h_81 {
  color: #101418;
  background: var(--tier-color);
}

@media (max-width: 560px) {
  ._card_1051h_14 {
    grid-template-columns: 74px minmax(0, 1fr);
    min-height: 142px;
    padding: 14px;
  }
  ._cardTitle_1051h_137 {
    max-width: calc(100% - 78px);
  }
  ._achievementIcon_1051h_99 {
    width: 52px;
    height: 52px;
  }
  ._showcaseGrid_1051h_212 {
    gap: 7px;
  }
}html {
  color-scheme: dark;
}

html:has(body._themeLight_m5fka_5),
html:has(body._themePastelLight_m5fka_6) {
  color-scheme: light;
}

:root {
  --clrPrimary: #F4F4F5;
  --clrPrimary30: rgba(244, 244, 245, 0.3);
  --clrSecondary: #FEFEFE;
  --clrTertiary: #E4E4E7;
  --clrPrimaryReverse: #101418;
  --clrSecondaryReverse: #0A0F14;
  --clrTertiaryReverse: #212327;
  --clrTextPrimary: #101418;
  --clrTextSecondary: #2E3337;
  --clrTextTertiary: #7C7C7C;
  --clrTextPrimaryReverse: #F4F4F5;
  --clrTextSecondaryReverse: #CDCDCD;
  --clrTextTertiaryReverse: #8A8A8A;
  --clrError-100: #641f1f;
  --clrError-50: #c84d4d;
  --clrSuccess-100: #2d692d;
  --clrSuccess-50: #3EA03E;
  --clrSuccessOnTint: #0d260d;
  --clrErrorOnTint: #2e0a0a;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgb(50, 126, 75, 0.1) 30%,
          rgb(94, 178, 122, 0.36) 60%,
          rgb(144, 215, 168) 100%);
  --clrNavBackground: rgba(244, 244, 245, 0.15);
  --clrNavItemActive: rgba(211, 211, 211, 0.4);
  --clrNavItemHover: rgba(0, 0, 0, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #F4F4F5;
  --clrGlassBackground: rgba(255, 255, 255, 0.5);
  --clrGlassBackgroundStrong: rgba(255, 255, 255, 0.3);
  --clrGlassBorder: rgba(0, 0, 0, 0.1);
  --snackbarDefaultBg: #F1ECE9;
  --snackbarDefaultText: #5D605C;
  --snackbarDefaultBorder: #5D605C;
  --snackbarDefaultIcon: #5D605C;
  --snackbarSuccessBg: #E0F1D9;
  --snackbarSuccessText: #358935;
  --snackbarSuccessBorder: #358935;
  --snackbarSuccessIcon: #358935;
  --snackbarErrorBg: #F9E1DC;
  --snackbarErrorText: #C80D12;
  --snackbarErrorBorder: #C80D12;
  --snackbarErrorIcon: #C80D12;
}

._themeLight_m5fka_5 {
  --clrPrimary: #F4F4F5;
  --clrPrimary30: rgba(244, 244, 245, 0.3);
  --clrSecondary: #FEFEFE;
  --clrTertiary: #E4E4E7;
  --clrPrimaryReverse: #101418;
  --clrSecondaryReverse: #0A0F14;
  --clrTertiaryReverse: #212327;
  --clrTextPrimary: #101418;
  --clrTextSecondary: #2E3337;
  --clrTextTertiary: #7C7C7C;
  --clrTextPrimaryReverse: #F4F4F5;
  --clrTextSecondaryReverse: #CDCDCD;
  --clrTextTertiaryReverse: #8A8A8A;
  --clrError-100: #c03b3b;
  --clrError-50: #f6c5c5;
  --clrSuccess-100: #30d330;
  --clrSuccess-50: #bbffbb;
  --clrSuccessOnTint: #1f4f1f;
  --clrErrorOnTint: #7a1f1f;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgb(50, 126, 75, 0.1) 30%,
          rgb(94, 178, 122, 0.36) 60%,
          rgb(144, 215, 168) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(175, 49, 49, 0.1) 30%,
          rgba(238, 70, 70, 0.36) 60%,
          rgb(255, 173, 173) 100%);
  --clrNavBackground: rgba(244, 244, 245, 0.15);
  --clrNavItemActive: rgba(211, 211, 211, 0.4);
  --clrNavItemHover: rgba(0, 0, 0, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0000c1;
  --clrGlassBackground: rgba(255, 255, 255, 0.5);
  --clrGlassBackgroundStrong: rgba(255, 255, 255, 0.5);
  --clrGlassBorder: rgba(0, 0, 0, 0.1);
  --snackbarDefaultBg: #F1ECE9;
  --snackbarDefaultText: #5D605C;
  --snackbarDefaultBorder: #5D605C;
  --snackbarDefaultIcon: #5D605C;
  --snackbarSuccessBg: #E0F1D9;
  --snackbarSuccessText: #358935;
  --snackbarSuccessBorder: #358935;
  --snackbarSuccessIcon: #358935;
  --snackbarErrorBg: #F9E1DC;
  --snackbarErrorText: #C80D12;
  --snackbarErrorBorder: #C80D12;
  --snackbarErrorIcon: #C80D12;
}

._themeDark_m5fka_131 {
  --clrPrimary: #0F1418;
  --clrPrimary30: rgba(15, 20, 25, 0.3);
  --clrSecondary: #0A0F14;
  --clrTertiary: #212327;
  --clrPrimaryReverse: #F4F4F5;
  --clrSecondaryReverse: #FEFEFE;
  --clrTertiaryReverse: #E4E4E7;
  --clrTextPrimary: #F4F4F5;
  --clrTextSecondary: #CDCDCD;
  --clrTextTertiary: #8A8A8A;
  --clrTextPrimaryReverse: #101418;
  --clrTextSecondaryReverse: #2E3337;
  --clrTextTertiaryReverse: #7C7C7C;
  --clrError-100: #c84d4d;
  --clrError-50: #641f1f;
  --clrSuccess-100: #3EA03E;
  --clrSuccess-50: #2d692d;
  --clrSuccessOnTint: #d6ffd6;
  --clrErrorOnTint: #ffd6d6;
  --clrWarning-100: #E88434;
  --clrWarning-50: #C49168;
  --clrAccent-100: #FFFFFF;
  --clrAccent-80: rgba(255, 255, 255, 0.8);
  --clrAccent-60: rgba(255, 255, 255, 0.6);
  --clrAccent-50: rgba(255, 255, 255, 0.5);
  --clrAccent-40: rgba(255, 255, 255, 0.4);
  --clrAccent-30: rgba(255, 255, 255, 0.3);
  --clrAccent-20: rgba(255, 255, 255, 0.2);
  --clrAccent-10: rgba(255, 255, 255, 0.1);
  --clrGradient: linear-gradient(90deg, #262a2e 10%, var(--clrPrimary) 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(50, 126, 75, 0.15) 30%,
          rgba(50, 126, 75, 0.3) 60%,
          rgba(50, 126, 75, 0.5) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(167, 44, 44, 0) 0%,
          rgba(167, 44, 44, 0.15) 30%,
          rgba(167, 44, 44, 0.3) 60%,
          rgba(167, 44, 44, 0.5) 100%);
  --clrNavBackground: rgba(0, 0, 0, 0.15);
  --clrNavItemActive: rgba(24, 24, 24, 0.49);
  --clrNavItemHover: rgba(255, 255, 255, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0F1418;
  --clrGlassBackground: rgba(15, 20, 24, 0.5);
  --clrGlassBackgroundStrong: rgba(15, 20, 24, 0.6);
  --clrGlassBorder: rgba(255, 255, 255, 0.1);
  --snackbarDefaultBg: #414141;
  --snackbarDefaultText: #BABABA;
  --snackbarDefaultBorder: #BABABA;
  --snackbarDefaultIcon: #BABABA;
  --snackbarSuccessBg: #145E18;
  --snackbarSuccessText: #8FE094;
  --snackbarSuccessBorder: #8FE094;
  --snackbarSuccessIcon: #8FE094;
  --snackbarErrorBg: #910C09;
  --snackbarErrorText: #FE9E9D;
  --snackbarErrorBorder: #FE9E9D;
  --snackbarErrorIcon: #FE9E9D;
}

/* 

Note: 
    If you want something done quick, ask AI to buuild your color themes.
    If you want to do it right and tidy though, do it manually. 

    - Theo

*/
:root {
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --font-accent: "Jaro", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}

html,
body {
  font-family: var(--font-sans);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

._wrap_m5fka_216 {
  position: relative;
  flex-shrink: 0;
  border-radius: 50%;
}

._avatar_m5fka_222 {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  overflow: hidden;
  background: var(--clrTertiary);
  border: 2px solid color-mix(in srgb, var(--clrSecondary) 88%, transparent);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 0;
}
._avatar_m5fka_222 img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
._avatar_m5fka_222 ._initial_m5fka_243 {
  color: var(--clrTextPrimary);
  font-family: var(--font-accent);
  font-weight: 800;
  line-height: 1;
}html {
  color-scheme: dark;
}

html:has(body._themeLight_1cxz1_5),
html:has(body._themePastelLight_1cxz1_6) {
  color-scheme: light;
}

:root {
  --clrPrimary: #F4F4F5;
  --clrPrimary30: rgba(244, 244, 245, 0.3);
  --clrSecondary: #FEFEFE;
  --clrTertiary: #E4E4E7;
  --clrPrimaryReverse: #101418;
  --clrSecondaryReverse: #0A0F14;
  --clrTertiaryReverse: #212327;
  --clrTextPrimary: #101418;
  --clrTextSecondary: #2E3337;
  --clrTextTertiary: #7C7C7C;
  --clrTextPrimaryReverse: #F4F4F5;
  --clrTextSecondaryReverse: #CDCDCD;
  --clrTextTertiaryReverse: #8A8A8A;
  --clrError-100: #641f1f;
  --clrError-50: #c84d4d;
  --clrSuccess-100: #2d692d;
  --clrSuccess-50: #3EA03E;
  --clrSuccessOnTint: #0d260d;
  --clrErrorOnTint: #2e0a0a;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgb(50, 126, 75, 0.1) 30%,
          rgb(94, 178, 122, 0.36) 60%,
          rgb(144, 215, 168) 100%);
  --clrNavBackground: rgba(244, 244, 245, 0.15);
  --clrNavItemActive: rgba(211, 211, 211, 0.4);
  --clrNavItemHover: rgba(0, 0, 0, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #F4F4F5;
  --clrGlassBackground: rgba(255, 255, 255, 0.5);
  --clrGlassBackgroundStrong: rgba(255, 255, 255, 0.3);
  --clrGlassBorder: rgba(0, 0, 0, 0.1);
  --snackbarDefaultBg: #F1ECE9;
  --snackbarDefaultText: #5D605C;
  --snackbarDefaultBorder: #5D605C;
  --snackbarDefaultIcon: #5D605C;
  --snackbarSuccessBg: #E0F1D9;
  --snackbarSuccessText: #358935;
  --snackbarSuccessBorder: #358935;
  --snackbarSuccessIcon: #358935;
  --snackbarErrorBg: #F9E1DC;
  --snackbarErrorText: #C80D12;
  --snackbarErrorBorder: #C80D12;
  --snackbarErrorIcon: #C80D12;
}

._themeLight_1cxz1_5 {
  --clrPrimary: #F4F4F5;
  --clrPrimary30: rgba(244, 244, 245, 0.3);
  --clrSecondary: #FEFEFE;
  --clrTertiary: #E4E4E7;
  --clrPrimaryReverse: #101418;
  --clrSecondaryReverse: #0A0F14;
  --clrTertiaryReverse: #212327;
  --clrTextPrimary: #101418;
  --clrTextSecondary: #2E3337;
  --clrTextTertiary: #7C7C7C;
  --clrTextPrimaryReverse: #F4F4F5;
  --clrTextSecondaryReverse: #CDCDCD;
  --clrTextTertiaryReverse: #8A8A8A;
  --clrError-100: #c03b3b;
  --clrError-50: #f6c5c5;
  --clrSuccess-100: #30d330;
  --clrSuccess-50: #bbffbb;
  --clrSuccessOnTint: #1f4f1f;
  --clrErrorOnTint: #7a1f1f;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgb(50, 126, 75, 0.1) 30%,
          rgb(94, 178, 122, 0.36) 60%,
          rgb(144, 215, 168) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(175, 49, 49, 0.1) 30%,
          rgba(238, 70, 70, 0.36) 60%,
          rgb(255, 173, 173) 100%);
  --clrNavBackground: rgba(244, 244, 245, 0.15);
  --clrNavItemActive: rgba(211, 211, 211, 0.4);
  --clrNavItemHover: rgba(0, 0, 0, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0000c1;
  --clrGlassBackground: rgba(255, 255, 255, 0.5);
  --clrGlassBackgroundStrong: rgba(255, 255, 255, 0.5);
  --clrGlassBorder: rgba(0, 0, 0, 0.1);
  --snackbarDefaultBg: #F1ECE9;
  --snackbarDefaultText: #5D605C;
  --snackbarDefaultBorder: #5D605C;
  --snackbarDefaultIcon: #5D605C;
  --snackbarSuccessBg: #E0F1D9;
  --snackbarSuccessText: #358935;
  --snackbarSuccessBorder: #358935;
  --snackbarSuccessIcon: #358935;
  --snackbarErrorBg: #F9E1DC;
  --snackbarErrorText: #C80D12;
  --snackbarErrorBorder: #C80D12;
  --snackbarErrorIcon: #C80D12;
}

._themeDark_1cxz1_131 {
  --clrPrimary: #0F1418;
  --clrPrimary30: rgba(15, 20, 25, 0.3);
  --clrSecondary: #0A0F14;
  --clrTertiary: #212327;
  --clrPrimaryReverse: #F4F4F5;
  --clrSecondaryReverse: #FEFEFE;
  --clrTertiaryReverse: #E4E4E7;
  --clrTextPrimary: #F4F4F5;
  --clrTextSecondary: #CDCDCD;
  --clrTextTertiary: #8A8A8A;
  --clrTextPrimaryReverse: #101418;
  --clrTextSecondaryReverse: #2E3337;
  --clrTextTertiaryReverse: #7C7C7C;
  --clrError-100: #c84d4d;
  --clrError-50: #641f1f;
  --clrSuccess-100: #3EA03E;
  --clrSuccess-50: #2d692d;
  --clrSuccessOnTint: #d6ffd6;
  --clrErrorOnTint: #ffd6d6;
  --clrWarning-100: #E88434;
  --clrWarning-50: #C49168;
  --clrAccent-100: #FFFFFF;
  --clrAccent-80: rgba(255, 255, 255, 0.8);
  --clrAccent-60: rgba(255, 255, 255, 0.6);
  --clrAccent-50: rgba(255, 255, 255, 0.5);
  --clrAccent-40: rgba(255, 255, 255, 0.4);
  --clrAccent-30: rgba(255, 255, 255, 0.3);
  --clrAccent-20: rgba(255, 255, 255, 0.2);
  --clrAccent-10: rgba(255, 255, 255, 0.1);
  --clrGradient: linear-gradient(90deg, #262a2e 10%, var(--clrPrimary) 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(50, 126, 75, 0.15) 30%,
          rgba(50, 126, 75, 0.3) 60%,
          rgba(50, 126, 75, 0.5) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(167, 44, 44, 0) 0%,
          rgba(167, 44, 44, 0.15) 30%,
          rgba(167, 44, 44, 0.3) 60%,
          rgba(167, 44, 44, 0.5) 100%);
  --clrNavBackground: rgba(0, 0, 0, 0.15);
  --clrNavItemActive: rgba(24, 24, 24, 0.49);
  --clrNavItemHover: rgba(255, 255, 255, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0F1418;
  --clrGlassBackground: rgba(15, 20, 24, 0.5);
  --clrGlassBackgroundStrong: rgba(15, 20, 24, 0.6);
  --clrGlassBorder: rgba(255, 255, 255, 0.1);
  --snackbarDefaultBg: #414141;
  --snackbarDefaultText: #BABABA;
  --snackbarDefaultBorder: #BABABA;
  --snackbarDefaultIcon: #BABABA;
  --snackbarSuccessBg: #145E18;
  --snackbarSuccessText: #8FE094;
  --snackbarSuccessBorder: #8FE094;
  --snackbarSuccessIcon: #8FE094;
  --snackbarErrorBg: #910C09;
  --snackbarErrorText: #FE9E9D;
  --snackbarErrorBorder: #FE9E9D;
  --snackbarErrorIcon: #FE9E9D;
}

/* 

Note: 
    If you want something done quick, ask AI to buuild your color themes.
    If you want to do it right and tidy though, do it manually. 

    - Theo

*/
:root {
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --font-accent: "Jaro", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}

html,
body {
  font-family: var(--font-sans);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

._list_1cxz1_216 {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 10px;
  width: 100%;
}

._option_1cxz1_225 {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 12px;
  width: 100%;
  padding: 14px;
  background: var(--clrTertiary);
  border: 2px solid transparent;
  border-radius: 8px;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s ease;
}
._option_1cxz1_225:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

._optionSelected_1cxz1_245 {
  border-color: var(--clrTextPrimary);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--clrTextPrimary) 22%, transparent);
}
._optionSelected_1cxz1_245 ._mark_1cxz1_249 {
  border-color: var(--clrTextPrimary);
}
._optionSelected_1cxz1_245 ._mark_1cxz1_249::after {
  transform: scale(1);
}

._mark_1cxz1_249 {
  flex-shrink: 0;
  position: relative;
  width: 20px;
  height: 20px;
  margin-top: 2px;
  border: 2px solid var(--clrTextTertiary);
  border-radius: 50%;
}
._mark_1cxz1_249::after {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: var(--clrTextPrimary);
  transform: scale(0);
  transition: transform 0.15s ease;
}

._text_1cxz1_275 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 3px;
  flex: 1;
  min-width: 0;
}

._label_1cxz1_285 {
  color: var(--clrTextPrimary);
  font-size: 0.98rem;
  font-weight: 700;
}

._blurb_1cxz1_291 {
  color: var(--clrTextSecondary);
  font-size: 0.82rem;
  line-height: 1.4;
}html {
  color-scheme: dark;
}

html:has(body._themeLight_1kes1_5),
html:has(body._themePastelLight_1kes1_6) {
  color-scheme: light;
}

:root {
  --clrPrimary: #F4F4F5;
  --clrPrimary30: rgba(244, 244, 245, 0.3);
  --clrSecondary: #FEFEFE;
  --clrTertiary: #E4E4E7;
  --clrPrimaryReverse: #101418;
  --clrSecondaryReverse: #0A0F14;
  --clrTertiaryReverse: #212327;
  --clrTextPrimary: #101418;
  --clrTextSecondary: #2E3337;
  --clrTextTertiary: #7C7C7C;
  --clrTextPrimaryReverse: #F4F4F5;
  --clrTextSecondaryReverse: #CDCDCD;
  --clrTextTertiaryReverse: #8A8A8A;
  --clrError-100: #641f1f;
  --clrError-50: #c84d4d;
  --clrSuccess-100: #2d692d;
  --clrSuccess-50: #3EA03E;
  --clrSuccessOnTint: #0d260d;
  --clrErrorOnTint: #2e0a0a;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgb(50, 126, 75, 0.1) 30%,
          rgb(94, 178, 122, 0.36) 60%,
          rgb(144, 215, 168) 100%);
  --clrNavBackground: rgba(244, 244, 245, 0.15);
  --clrNavItemActive: rgba(211, 211, 211, 0.4);
  --clrNavItemHover: rgba(0, 0, 0, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #F4F4F5;
  --clrGlassBackground: rgba(255, 255, 255, 0.5);
  --clrGlassBackgroundStrong: rgba(255, 255, 255, 0.3);
  --clrGlassBorder: rgba(0, 0, 0, 0.1);
  --snackbarDefaultBg: #F1ECE9;
  --snackbarDefaultText: #5D605C;
  --snackbarDefaultBorder: #5D605C;
  --snackbarDefaultIcon: #5D605C;
  --snackbarSuccessBg: #E0F1D9;
  --snackbarSuccessText: #358935;
  --snackbarSuccessBorder: #358935;
  --snackbarSuccessIcon: #358935;
  --snackbarErrorBg: #F9E1DC;
  --snackbarErrorText: #C80D12;
  --snackbarErrorBorder: #C80D12;
  --snackbarErrorIcon: #C80D12;
}

._themeLight_1kes1_5 {
  --clrPrimary: #F4F4F5;
  --clrPrimary30: rgba(244, 244, 245, 0.3);
  --clrSecondary: #FEFEFE;
  --clrTertiary: #E4E4E7;
  --clrPrimaryReverse: #101418;
  --clrSecondaryReverse: #0A0F14;
  --clrTertiaryReverse: #212327;
  --clrTextPrimary: #101418;
  --clrTextSecondary: #2E3337;
  --clrTextTertiary: #7C7C7C;
  --clrTextPrimaryReverse: #F4F4F5;
  --clrTextSecondaryReverse: #CDCDCD;
  --clrTextTertiaryReverse: #8A8A8A;
  --clrError-100: #c03b3b;
  --clrError-50: #f6c5c5;
  --clrSuccess-100: #30d330;
  --clrSuccess-50: #bbffbb;
  --clrSuccessOnTint: #1f4f1f;
  --clrErrorOnTint: #7a1f1f;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgb(50, 126, 75, 0.1) 30%,
          rgb(94, 178, 122, 0.36) 60%,
          rgb(144, 215, 168) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(175, 49, 49, 0.1) 30%,
          rgba(238, 70, 70, 0.36) 60%,
          rgb(255, 173, 173) 100%);
  --clrNavBackground: rgba(244, 244, 245, 0.15);
  --clrNavItemActive: rgba(211, 211, 211, 0.4);
  --clrNavItemHover: rgba(0, 0, 0, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0000c1;
  --clrGlassBackground: rgba(255, 255, 255, 0.5);
  --clrGlassBackgroundStrong: rgba(255, 255, 255, 0.5);
  --clrGlassBorder: rgba(0, 0, 0, 0.1);
  --snackbarDefaultBg: #F1ECE9;
  --snackbarDefaultText: #5D605C;
  --snackbarDefaultBorder: #5D605C;
  --snackbarDefaultIcon: #5D605C;
  --snackbarSuccessBg: #E0F1D9;
  --snackbarSuccessText: #358935;
  --snackbarSuccessBorder: #358935;
  --snackbarSuccessIcon: #358935;
  --snackbarErrorBg: #F9E1DC;
  --snackbarErrorText: #C80D12;
  --snackbarErrorBorder: #C80D12;
  --snackbarErrorIcon: #C80D12;
}

._themeDark_1kes1_131 {
  --clrPrimary: #0F1418;
  --clrPrimary30: rgba(15, 20, 25, 0.3);
  --clrSecondary: #0A0F14;
  --clrTertiary: #212327;
  --clrPrimaryReverse: #F4F4F5;
  --clrSecondaryReverse: #FEFEFE;
  --clrTertiaryReverse: #E4E4E7;
  --clrTextPrimary: #F4F4F5;
  --clrTextSecondary: #CDCDCD;
  --clrTextTertiary: #8A8A8A;
  --clrTextPrimaryReverse: #101418;
  --clrTextSecondaryReverse: #2E3337;
  --clrTextTertiaryReverse: #7C7C7C;
  --clrError-100: #c84d4d;
  --clrError-50: #641f1f;
  --clrSuccess-100: #3EA03E;
  --clrSuccess-50: #2d692d;
  --clrSuccessOnTint: #d6ffd6;
  --clrErrorOnTint: #ffd6d6;
  --clrWarning-100: #E88434;
  --clrWarning-50: #C49168;
  --clrAccent-100: #FFFFFF;
  --clrAccent-80: rgba(255, 255, 255, 0.8);
  --clrAccent-60: rgba(255, 255, 255, 0.6);
  --clrAccent-50: rgba(255, 255, 255, 0.5);
  --clrAccent-40: rgba(255, 255, 255, 0.4);
  --clrAccent-30: rgba(255, 255, 255, 0.3);
  --clrAccent-20: rgba(255, 255, 255, 0.2);
  --clrAccent-10: rgba(255, 255, 255, 0.1);
  --clrGradient: linear-gradient(90deg, #262a2e 10%, var(--clrPrimary) 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(50, 126, 75, 0.15) 30%,
          rgba(50, 126, 75, 0.3) 60%,
          rgba(50, 126, 75, 0.5) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(167, 44, 44, 0) 0%,
          rgba(167, 44, 44, 0.15) 30%,
          rgba(167, 44, 44, 0.3) 60%,
          rgba(167, 44, 44, 0.5) 100%);
  --clrNavBackground: rgba(0, 0, 0, 0.15);
  --clrNavItemActive: rgba(24, 24, 24, 0.49);
  --clrNavItemHover: rgba(255, 255, 255, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0F1418;
  --clrGlassBackground: rgba(15, 20, 24, 0.5);
  --clrGlassBackgroundStrong: rgba(15, 20, 24, 0.6);
  --clrGlassBorder: rgba(255, 255, 255, 0.1);
  --snackbarDefaultBg: #414141;
  --snackbarDefaultText: #BABABA;
  --snackbarDefaultBorder: #BABABA;
  --snackbarDefaultIcon: #BABABA;
  --snackbarSuccessBg: #145E18;
  --snackbarSuccessText: #8FE094;
  --snackbarSuccessBorder: #8FE094;
  --snackbarSuccessIcon: #8FE094;
  --snackbarErrorBg: #910C09;
  --snackbarErrorText: #FE9E9D;
  --snackbarErrorBorder: #FE9E9D;
  --snackbarErrorIcon: #FE9E9D;
}

/* 

Note: 
    If you want something done quick, ask AI to buuild your color themes.
    If you want to do it right and tidy though, do it manually. 

    - Theo

*/
:root {
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --font-accent: "Jaro", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}

html,
body {
  font-family: var(--font-sans);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

._overlay_1kes1_216 {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: 16px;
}

._modal_1kes1_230 {
  width: min(440px, 100%);
  max-height: calc(100dvh - 32px);
  background: var(--clrSecondary);
  border: 1px solid var(--clrAccent-10);
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 0;
  overflow: hidden;
}

._header_1kes1_245 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px 6px;
}
._header_1kes1_245 ._steps_1kes1_253 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
}
._header_1kes1_245 ._steps_1kes1_253 ._dot_1kes1_260 {
  width: 22px;
  height: 4px;
  border-radius: 999px;
  background: var(--clrAccent-10);
  transition: background 0.2s ease;
}
._header_1kes1_245 ._steps_1kes1_253 ._dotActive_1kes1_267 {
  background: var(--clrTextPrimary);
}
._header_1kes1_245 ._close_1kes1_270 {
  width: 30px;
  height: 30px;
  padding: 5px;
  border: 0;
  background: transparent;
  color: var(--clrTextSecondary);
  cursor: pointer;
}
._header_1kes1_245 ._close_1kes1_270 svg {
  width: 100%;
  height: 100%;
}

._body_1kes1_284 {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 12px;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 8px 22px 4px;
}
._body_1kes1_284 h2 {
  margin: 0;
  color: var(--clrTextPrimary);
  font-family: var(--font-accent);
  font-size: 1.4rem;
  font-weight: 800;
}
._body_1kes1_284 ._sub_1kes1_302 {
  margin: 0;
  color: var(--clrTextSecondary);
  font-size: 0.9rem;
  line-height: 1.4;
}

._handleField_1kes1_309 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  padding: 12px 14px;
  background: var(--clrTertiary);
  border: 1px solid var(--clrAccent-10);
  border-radius: 8px;
}
._handleField_1kes1_309 ._at_1kes1_320 {
  color: var(--clrTextSecondary);
  font-size: 1.1rem;
  font-weight: 700;
}
._handleField_1kes1_309 input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: 0;
  outline: 0;
  color: var(--clrTextPrimary);
  font-size: 1.1rem;
  font-weight: 600;
}
._handleField_1kes1_309 ._okIcon_1kes1_335 {
  width: 22px;
  height: 22px;
  color: var(--clrSuccess-100);
}

._hint_1kes1_341 {
  font-size: 0.82rem;
  min-height: 18px;
}
._hint_1kes1_341 ._ok_1kes1_335 {
  color: var(--clrSuccess-100);
  font-weight: 600;
}
._hint_1kes1_341 ._bad_1kes1_349 {
  color: var(--clrError-100);
  font-weight: 600;
}
._hint_1kes1_341 span {
  color: var(--clrTextSecondary);
}

._avatarPick_1kes1_357 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  align-self: center;
  padding: 8px;
  background: transparent;
  border: 0;
  cursor: pointer;
}
._avatarPick_1kes1_357 span {
  color: var(--clrTextPrimary);
  font-size: 0.9rem;
  font-weight: 600;
}

._bio_1kes1_375 {
  width: 100%;
  resize: none;
  padding: 12px 14px;
  background: var(--clrTertiary);
  border: 1px solid var(--clrAccent-10);
  border-radius: 8px;
  color: var(--clrTextPrimary);
  font-family: var(--font-sans);
  font-size: 0.95rem;
  line-height: 1.4;
  outline: 0;
}

._counter_1kes1_389 {
  align-self: flex-end;
  color: var(--clrTextTertiary);
  font-size: 0.75rem;
}

._previewCard_1kes1_395 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  padding: 22px 16px 18px;
  background: var(--clrTertiary);
  border: 1px solid var(--clrAccent-10);
  border-radius: 12px;
  text-align: center;
}
._previewCard_1kes1_395 ._previewName_1kes1_407 {
  color: var(--clrTextPrimary);
  font-family: var(--font-accent);
  font-size: 1.3rem;
  font-weight: 800;
}
._previewCard_1kes1_395 ._previewHandle_1kes1_413 {
  color: var(--clrTextSecondary);
  font-size: 0.9rem;
  font-weight: 600;
}
._previewCard_1kes1_395 ._previewBio_1kes1_418 {
  color: var(--clrTextSecondary);
  font-size: 0.88rem;
  line-height: 1.4;
  max-width: 30ch;
}
._previewCard_1kes1_395 ._previewStats_1kes1_424 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  width: 100%;
  margin-top: 10px;
}
._previewCard_1kes1_395 ._previewStats_1kes1_424 div {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
}
._previewCard_1kes1_395 ._previewStats_1kes1_424 div strong {
  color: var(--clrTextPrimary);
  font-size: 1.15rem;
  font-weight: 900;
  line-height: 1;
}
._previewCard_1kes1_395 ._previewStats_1kes1_424 div span {
  color: var(--clrTextTertiary);
  font-size: 0.72rem;
  font-weight: 600;
}

._privacyNote_1kes1_450 {
  margin: 12px 0 0;
  color: var(--clrTextTertiary);
  font-size: 0.8rem;
  line-height: 1.45;
}

._audienceQuestion_1kes1_457 {
  margin-top: 4px;
  color: var(--clrTextPrimary);
  font-size: 0.88rem;
  font-weight: 700;
}

._error_1kes1_464 {
  margin: 4px 22px 0;
  padding: 8px 12px;
  background: var(--clrError-100);
  border-radius: 6px;
  color: #FFFFFF;
  font-size: 0.85rem;
}

._footer_1kes1_473 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 22px 20px;
}
._footer_1kes1_473 button {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 44px;
  padding: 0 20px;
  border-radius: 8px;
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
  border: 1px solid transparent;
}
._footer_1kes1_473 button svg {
  width: 18px;
  height: 18px;
}
._footer_1kes1_473 button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
._footer_1kes1_473 ._secondary_1kes1_503 {
  background: transparent;
  border-color: var(--clrAccent-10);
  color: var(--clrTextSecondary);
}
._footer_1kes1_473 ._primary_1kes1_508 {
  background: var(--clrTextPrimary);
  color: var(--clrSecondary);
}html {
  color-scheme: dark;
}

html:has(body._themeLight_1r0ko_5),
html:has(body._themePastelLight_1r0ko_6) {
  color-scheme: light;
}

:root {
  --clrPrimary: #F4F4F5;
  --clrPrimary30: rgba(244, 244, 245, 0.3);
  --clrSecondary: #FEFEFE;
  --clrTertiary: #E4E4E7;
  --clrPrimaryReverse: #101418;
  --clrSecondaryReverse: #0A0F14;
  --clrTertiaryReverse: #212327;
  --clrTextPrimary: #101418;
  --clrTextSecondary: #2E3337;
  --clrTextTertiary: #7C7C7C;
  --clrTextPrimaryReverse: #F4F4F5;
  --clrTextSecondaryReverse: #CDCDCD;
  --clrTextTertiaryReverse: #8A8A8A;
  --clrError-100: #641f1f;
  --clrError-50: #c84d4d;
  --clrSuccess-100: #2d692d;
  --clrSuccess-50: #3EA03E;
  --clrSuccessOnTint: #0d260d;
  --clrErrorOnTint: #2e0a0a;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgb(50, 126, 75, 0.1) 30%,
          rgb(94, 178, 122, 0.36) 60%,
          rgb(144, 215, 168) 100%);
  --clrNavBackground: rgba(244, 244, 245, 0.15);
  --clrNavItemActive: rgba(211, 211, 211, 0.4);
  --clrNavItemHover: rgba(0, 0, 0, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #F4F4F5;
  --clrGlassBackground: rgba(255, 255, 255, 0.5);
  --clrGlassBackgroundStrong: rgba(255, 255, 255, 0.3);
  --clrGlassBorder: rgba(0, 0, 0, 0.1);
  --snackbarDefaultBg: #F1ECE9;
  --snackbarDefaultText: #5D605C;
  --snackbarDefaultBorder: #5D605C;
  --snackbarDefaultIcon: #5D605C;
  --snackbarSuccessBg: #E0F1D9;
  --snackbarSuccessText: #358935;
  --snackbarSuccessBorder: #358935;
  --snackbarSuccessIcon: #358935;
  --snackbarErrorBg: #F9E1DC;
  --snackbarErrorText: #C80D12;
  --snackbarErrorBorder: #C80D12;
  --snackbarErrorIcon: #C80D12;
}

._themeLight_1r0ko_5 {
  --clrPrimary: #F4F4F5;
  --clrPrimary30: rgba(244, 244, 245, 0.3);
  --clrSecondary: #FEFEFE;
  --clrTertiary: #E4E4E7;
  --clrPrimaryReverse: #101418;
  --clrSecondaryReverse: #0A0F14;
  --clrTertiaryReverse: #212327;
  --clrTextPrimary: #101418;
  --clrTextSecondary: #2E3337;
  --clrTextTertiary: #7C7C7C;
  --clrTextPrimaryReverse: #F4F4F5;
  --clrTextSecondaryReverse: #CDCDCD;
  --clrTextTertiaryReverse: #8A8A8A;
  --clrError-100: #c03b3b;
  --clrError-50: #f6c5c5;
  --clrSuccess-100: #30d330;
  --clrSuccess-50: #bbffbb;
  --clrSuccessOnTint: #1f4f1f;
  --clrErrorOnTint: #7a1f1f;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgb(50, 126, 75, 0.1) 30%,
          rgb(94, 178, 122, 0.36) 60%,
          rgb(144, 215, 168) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(175, 49, 49, 0.1) 30%,
          rgba(238, 70, 70, 0.36) 60%,
          rgb(255, 173, 173) 100%);
  --clrNavBackground: rgba(244, 244, 245, 0.15);
  --clrNavItemActive: rgba(211, 211, 211, 0.4);
  --clrNavItemHover: rgba(0, 0, 0, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0000c1;
  --clrGlassBackground: rgba(255, 255, 255, 0.5);
  --clrGlassBackgroundStrong: rgba(255, 255, 255, 0.5);
  --clrGlassBorder: rgba(0, 0, 0, 0.1);
  --snackbarDefaultBg: #F1ECE9;
  --snackbarDefaultText: #5D605C;
  --snackbarDefaultBorder: #5D605C;
  --snackbarDefaultIcon: #5D605C;
  --snackbarSuccessBg: #E0F1D9;
  --snackbarSuccessText: #358935;
  --snackbarSuccessBorder: #358935;
  --snackbarSuccessIcon: #358935;
  --snackbarErrorBg: #F9E1DC;
  --snackbarErrorText: #C80D12;
  --snackbarErrorBorder: #C80D12;
  --snackbarErrorIcon: #C80D12;
}

._themeDark_1r0ko_131 {
  --clrPrimary: #0F1418;
  --clrPrimary30: rgba(15, 20, 25, 0.3);
  --clrSecondary: #0A0F14;
  --clrTertiary: #212327;
  --clrPrimaryReverse: #F4F4F5;
  --clrSecondaryReverse: #FEFEFE;
  --clrTertiaryReverse: #E4E4E7;
  --clrTextPrimary: #F4F4F5;
  --clrTextSecondary: #CDCDCD;
  --clrTextTertiary: #8A8A8A;
  --clrTextPrimaryReverse: #101418;
  --clrTextSecondaryReverse: #2E3337;
  --clrTextTertiaryReverse: #7C7C7C;
  --clrError-100: #c84d4d;
  --clrError-50: #641f1f;
  --clrSuccess-100: #3EA03E;
  --clrSuccess-50: #2d692d;
  --clrSuccessOnTint: #d6ffd6;
  --clrErrorOnTint: #ffd6d6;
  --clrWarning-100: #E88434;
  --clrWarning-50: #C49168;
  --clrAccent-100: #FFFFFF;
  --clrAccent-80: rgba(255, 255, 255, 0.8);
  --clrAccent-60: rgba(255, 255, 255, 0.6);
  --clrAccent-50: rgba(255, 255, 255, 0.5);
  --clrAccent-40: rgba(255, 255, 255, 0.4);
  --clrAccent-30: rgba(255, 255, 255, 0.3);
  --clrAccent-20: rgba(255, 255, 255, 0.2);
  --clrAccent-10: rgba(255, 255, 255, 0.1);
  --clrGradient: linear-gradient(90deg, #262a2e 10%, var(--clrPrimary) 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(50, 126, 75, 0.15) 30%,
          rgba(50, 126, 75, 0.3) 60%,
          rgba(50, 126, 75, 0.5) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(167, 44, 44, 0) 0%,
          rgba(167, 44, 44, 0.15) 30%,
          rgba(167, 44, 44, 0.3) 60%,
          rgba(167, 44, 44, 0.5) 100%);
  --clrNavBackground: rgba(0, 0, 0, 0.15);
  --clrNavItemActive: rgba(24, 24, 24, 0.49);
  --clrNavItemHover: rgba(255, 255, 255, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0F1418;
  --clrGlassBackground: rgba(15, 20, 24, 0.5);
  --clrGlassBackgroundStrong: rgba(15, 20, 24, 0.6);
  --clrGlassBorder: rgba(255, 255, 255, 0.1);
  --snackbarDefaultBg: #414141;
  --snackbarDefaultText: #BABABA;
  --snackbarDefaultBorder: #BABABA;
  --snackbarDefaultIcon: #BABABA;
  --snackbarSuccessBg: #145E18;
  --snackbarSuccessText: #8FE094;
  --snackbarSuccessBorder: #8FE094;
  --snackbarSuccessIcon: #8FE094;
  --snackbarErrorBg: #910C09;
  --snackbarErrorText: #FE9E9D;
  --snackbarErrorBorder: #FE9E9D;
  --snackbarErrorIcon: #FE9E9D;
}

/* 

Note: 
    If you want something done quick, ask AI to buuild your color themes.
    If you want to do it right and tidy though, do it manually. 

    - Theo

*/
:root {
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --font-accent: "Jaro", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}

html,
body {
  font-family: var(--font-sans);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

._body_1r0ko_216 {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 12px;
  width: 100%;
  padding: 4px 4px 8px;
}

._input_1r0ko_226,
._textarea_1r0ko_227 {
  width: 100%;
  padding: 12px 14px;
  background: var(--clrTertiary);
  border: 1px solid var(--clrAccent-10);
  border-radius: 8px;
  color: var(--clrTextPrimary);
  font-family: var(--font-sans);
  font-size: 1rem;
  outline: 0;
}

._textarea_1r0ko_227 {
  resize: none;
  line-height: 1.4;
}

._counter_1r0ko_244 {
  align-self: flex-end;
  color: var(--clrTextTertiary);
  font-size: 0.75rem;
  margin-top: -6px;
}

._hint_1r0ko_251 {
  margin: 0;
  color: var(--clrTextSecondary);
  font-size: 0.9rem;
  line-height: 1.45;
}

._error_1r0ko_258 {
  padding: 8px 12px;
  background: var(--clrError-100);
  border-radius: 6px;
  color: #FFFFFF;
  font-size: 0.85rem;
}

._save_1r0ko_266 {
  min-height: 48px;
  border-radius: 8px;
  background: var(--clrTextPrimary);
  color: var(--clrSecondary);
  border: 0;
  font-size: 1rem;
  font-weight: 800;
  cursor: pointer;
}
._save_1r0ko_266:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

._avatarPreview_1r0ko_281 {
  align-self: center;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--clrAccent-10);
}

._buttonRow_1r0ko_290 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: stretch;
  gap: 10px;
  width: 100%;
}
._buttonRow_1r0ko_290 > * {
  flex: 1;
}

._secondary_1r0ko_302 {
  min-height: 48px;
  border-radius: 8px;
  background: var(--clrTertiary);
  color: var(--clrTextPrimary);
  border: 1px solid var(--clrAccent-10);
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
}
._secondary_1r0ko_302:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}html {
  color-scheme: dark;
}

html:has(body._themeLight_i7fbp_5),
html:has(body._themePastelLight_i7fbp_6) {
  color-scheme: light;
}

:root {
  --clrPrimary: #F4F4F5;
  --clrPrimary30: rgba(244, 244, 245, 0.3);
  --clrSecondary: #FEFEFE;
  --clrTertiary: #E4E4E7;
  --clrPrimaryReverse: #101418;
  --clrSecondaryReverse: #0A0F14;
  --clrTertiaryReverse: #212327;
  --clrTextPrimary: #101418;
  --clrTextSecondary: #2E3337;
  --clrTextTertiary: #7C7C7C;
  --clrTextPrimaryReverse: #F4F4F5;
  --clrTextSecondaryReverse: #CDCDCD;
  --clrTextTertiaryReverse: #8A8A8A;
  --clrError-100: #641f1f;
  --clrError-50: #c84d4d;
  --clrSuccess-100: #2d692d;
  --clrSuccess-50: #3EA03E;
  --clrSuccessOnTint: #0d260d;
  --clrErrorOnTint: #2e0a0a;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgb(50, 126, 75, 0.1) 30%,
          rgb(94, 178, 122, 0.36) 60%,
          rgb(144, 215, 168) 100%);
  --clrNavBackground: rgba(244, 244, 245, 0.15);
  --clrNavItemActive: rgba(211, 211, 211, 0.4);
  --clrNavItemHover: rgba(0, 0, 0, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #F4F4F5;
  --clrGlassBackground: rgba(255, 255, 255, 0.5);
  --clrGlassBackgroundStrong: rgba(255, 255, 255, 0.3);
  --clrGlassBorder: rgba(0, 0, 0, 0.1);
  --snackbarDefaultBg: #F1ECE9;
  --snackbarDefaultText: #5D605C;
  --snackbarDefaultBorder: #5D605C;
  --snackbarDefaultIcon: #5D605C;
  --snackbarSuccessBg: #E0F1D9;
  --snackbarSuccessText: #358935;
  --snackbarSuccessBorder: #358935;
  --snackbarSuccessIcon: #358935;
  --snackbarErrorBg: #F9E1DC;
  --snackbarErrorText: #C80D12;
  --snackbarErrorBorder: #C80D12;
  --snackbarErrorIcon: #C80D12;
}

._themeLight_i7fbp_5 {
  --clrPrimary: #F4F4F5;
  --clrPrimary30: rgba(244, 244, 245, 0.3);
  --clrSecondary: #FEFEFE;
  --clrTertiary: #E4E4E7;
  --clrPrimaryReverse: #101418;
  --clrSecondaryReverse: #0A0F14;
  --clrTertiaryReverse: #212327;
  --clrTextPrimary: #101418;
  --clrTextSecondary: #2E3337;
  --clrTextTertiary: #7C7C7C;
  --clrTextPrimaryReverse: #F4F4F5;
  --clrTextSecondaryReverse: #CDCDCD;
  --clrTextTertiaryReverse: #8A8A8A;
  --clrError-100: #c03b3b;
  --clrError-50: #f6c5c5;
  --clrSuccess-100: #30d330;
  --clrSuccess-50: #bbffbb;
  --clrSuccessOnTint: #1f4f1f;
  --clrErrorOnTint: #7a1f1f;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgb(50, 126, 75, 0.1) 30%,
          rgb(94, 178, 122, 0.36) 60%,
          rgb(144, 215, 168) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(175, 49, 49, 0.1) 30%,
          rgba(238, 70, 70, 0.36) 60%,
          rgb(255, 173, 173) 100%);
  --clrNavBackground: rgba(244, 244, 245, 0.15);
  --clrNavItemActive: rgba(211, 211, 211, 0.4);
  --clrNavItemHover: rgba(0, 0, 0, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0000c1;
  --clrGlassBackground: rgba(255, 255, 255, 0.5);
  --clrGlassBackgroundStrong: rgba(255, 255, 255, 0.5);
  --clrGlassBorder: rgba(0, 0, 0, 0.1);
  --snackbarDefaultBg: #F1ECE9;
  --snackbarDefaultText: #5D605C;
  --snackbarDefaultBorder: #5D605C;
  --snackbarDefaultIcon: #5D605C;
  --snackbarSuccessBg: #E0F1D9;
  --snackbarSuccessText: #358935;
  --snackbarSuccessBorder: #358935;
  --snackbarSuccessIcon: #358935;
  --snackbarErrorBg: #F9E1DC;
  --snackbarErrorText: #C80D12;
  --snackbarErrorBorder: #C80D12;
  --snackbarErrorIcon: #C80D12;
}

._themeDark_i7fbp_131 {
  --clrPrimary: #0F1418;
  --clrPrimary30: rgba(15, 20, 25, 0.3);
  --clrSecondary: #0A0F14;
  --clrTertiary: #212327;
  --clrPrimaryReverse: #F4F4F5;
  --clrSecondaryReverse: #FEFEFE;
  --clrTertiaryReverse: #E4E4E7;
  --clrTextPrimary: #F4F4F5;
  --clrTextSecondary: #CDCDCD;
  --clrTextTertiary: #8A8A8A;
  --clrTextPrimaryReverse: #101418;
  --clrTextSecondaryReverse: #2E3337;
  --clrTextTertiaryReverse: #7C7C7C;
  --clrError-100: #c84d4d;
  --clrError-50: #641f1f;
  --clrSuccess-100: #3EA03E;
  --clrSuccess-50: #2d692d;
  --clrSuccessOnTint: #d6ffd6;
  --clrErrorOnTint: #ffd6d6;
  --clrWarning-100: #E88434;
  --clrWarning-50: #C49168;
  --clrAccent-100: #FFFFFF;
  --clrAccent-80: rgba(255, 255, 255, 0.8);
  --clrAccent-60: rgba(255, 255, 255, 0.6);
  --clrAccent-50: rgba(255, 255, 255, 0.5);
  --clrAccent-40: rgba(255, 255, 255, 0.4);
  --clrAccent-30: rgba(255, 255, 255, 0.3);
  --clrAccent-20: rgba(255, 255, 255, 0.2);
  --clrAccent-10: rgba(255, 255, 255, 0.1);
  --clrGradient: linear-gradient(90deg, #262a2e 10%, var(--clrPrimary) 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(50, 126, 75, 0.15) 30%,
          rgba(50, 126, 75, 0.3) 60%,
          rgba(50, 126, 75, 0.5) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(167, 44, 44, 0) 0%,
          rgba(167, 44, 44, 0.15) 30%,
          rgba(167, 44, 44, 0.3) 60%,
          rgba(167, 44, 44, 0.5) 100%);
  --clrNavBackground: rgba(0, 0, 0, 0.15);
  --clrNavItemActive: rgba(24, 24, 24, 0.49);
  --clrNavItemHover: rgba(255, 255, 255, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0F1418;
  --clrGlassBackground: rgba(15, 20, 24, 0.5);
  --clrGlassBackgroundStrong: rgba(15, 20, 24, 0.6);
  --clrGlassBorder: rgba(255, 255, 255, 0.1);
  --snackbarDefaultBg: #414141;
  --snackbarDefaultText: #BABABA;
  --snackbarDefaultBorder: #BABABA;
  --snackbarDefaultIcon: #BABABA;
  --snackbarSuccessBg: #145E18;
  --snackbarSuccessText: #8FE094;
  --snackbarSuccessBorder: #8FE094;
  --snackbarSuccessIcon: #8FE094;
  --snackbarErrorBg: #910C09;
  --snackbarErrorText: #FE9E9D;
  --snackbarErrorBorder: #FE9E9D;
  --snackbarErrorIcon: #FE9E9D;
}

/* 

Note: 
    If you want something done quick, ask AI to buuild your color themes.
    If you want to do it right and tidy though, do it manually. 

    - Theo

*/
:root {
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --font-accent: "Jaro", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}

html,
body {
  font-family: var(--font-sans);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

._wrap_i7fbp_216 {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 6px;
}

._wrapFull_i7fbp_225 {
  flex-shrink: 0;
}

._wrapCompact_i7fbp_229 {
  flex-shrink: 0;
}

._btn_i7fbp_233 {
  background: var(--clrTextPrimary);
  border: 1px solid transparent;
  border-radius: 999px;
  color: var(--clrSecondary);
  font-weight: 800;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
._btn_i7fbp_233:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

._full_i7fbp_247 {
  min-height: 32px;
  padding: 0 14px;
  font-size: 0.82rem;
  font-weight: 600;
}

._compact_i7fbp_254 {
  min-height: 32px;
  padding: 0 14px;
  font-size: 0.82rem;
}

._following_i7fbp_260 {
  background: transparent;
  border-color: var(--clrAccent-30);
  color: var(--clrTextPrimary);
}
._following_i7fbp_260:hover:not(:disabled), ._following_i7fbp_260:focus-visible {
  border-color: var(--clrError-100);
  color: var(--clrError-100);
}

._full_i7fbp_247._following_i7fbp_260 {
  border-color: var(--clrAccent-20);
}

._note_i7fbp_274 {
  color: var(--clrTextTertiary);
  font-size: 0.82rem;
}

._wrapCompact_i7fbp_229 ._note_i7fbp_274 {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 60;
  width: max-content;
  max-width: 220px;
  padding: 7px 12px;
  background: var(--clrTextPrimary);
  border-radius: 6px;
  color: var(--clrSecondary);
  font-size: 0.76rem;
  font-weight: 700;
  line-height: 1.25;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  pointer-events: none;
}html {
  color-scheme: dark;
}

html:has(body._themeLight_8jdgc_5),
html:has(body._themePastelLight_8jdgc_6) {
  color-scheme: light;
}

:root {
  --clrPrimary: #F4F4F5;
  --clrPrimary30: rgba(244, 244, 245, 0.3);
  --clrSecondary: #FEFEFE;
  --clrTertiary: #E4E4E7;
  --clrPrimaryReverse: #101418;
  --clrSecondaryReverse: #0A0F14;
  --clrTertiaryReverse: #212327;
  --clrTextPrimary: #101418;
  --clrTextSecondary: #2E3337;
  --clrTextTertiary: #7C7C7C;
  --clrTextPrimaryReverse: #F4F4F5;
  --clrTextSecondaryReverse: #CDCDCD;
  --clrTextTertiaryReverse: #8A8A8A;
  --clrError-100: #641f1f;
  --clrError-50: #c84d4d;
  --clrSuccess-100: #2d692d;
  --clrSuccess-50: #3EA03E;
  --clrSuccessOnTint: #0d260d;
  --clrErrorOnTint: #2e0a0a;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgb(50, 126, 75, 0.1) 30%,
          rgb(94, 178, 122, 0.36) 60%,
          rgb(144, 215, 168) 100%);
  --clrNavBackground: rgba(244, 244, 245, 0.15);
  --clrNavItemActive: rgba(211, 211, 211, 0.4);
  --clrNavItemHover: rgba(0, 0, 0, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #F4F4F5;
  --clrGlassBackground: rgba(255, 255, 255, 0.5);
  --clrGlassBackgroundStrong: rgba(255, 255, 255, 0.3);
  --clrGlassBorder: rgba(0, 0, 0, 0.1);
  --snackbarDefaultBg: #F1ECE9;
  --snackbarDefaultText: #5D605C;
  --snackbarDefaultBorder: #5D605C;
  --snackbarDefaultIcon: #5D605C;
  --snackbarSuccessBg: #E0F1D9;
  --snackbarSuccessText: #358935;
  --snackbarSuccessBorder: #358935;
  --snackbarSuccessIcon: #358935;
  --snackbarErrorBg: #F9E1DC;
  --snackbarErrorText: #C80D12;
  --snackbarErrorBorder: #C80D12;
  --snackbarErrorIcon: #C80D12;
}

._themeLight_8jdgc_5 {
  --clrPrimary: #F4F4F5;
  --clrPrimary30: rgba(244, 244, 245, 0.3);
  --clrSecondary: #FEFEFE;
  --clrTertiary: #E4E4E7;
  --clrPrimaryReverse: #101418;
  --clrSecondaryReverse: #0A0F14;
  --clrTertiaryReverse: #212327;
  --clrTextPrimary: #101418;
  --clrTextSecondary: #2E3337;
  --clrTextTertiary: #7C7C7C;
  --clrTextPrimaryReverse: #F4F4F5;
  --clrTextSecondaryReverse: #CDCDCD;
  --clrTextTertiaryReverse: #8A8A8A;
  --clrError-100: #c03b3b;
  --clrError-50: #f6c5c5;
  --clrSuccess-100: #30d330;
  --clrSuccess-50: #bbffbb;
  --clrSuccessOnTint: #1f4f1f;
  --clrErrorOnTint: #7a1f1f;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgb(50, 126, 75, 0.1) 30%,
          rgb(94, 178, 122, 0.36) 60%,
          rgb(144, 215, 168) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(175, 49, 49, 0.1) 30%,
          rgba(238, 70, 70, 0.36) 60%,
          rgb(255, 173, 173) 100%);
  --clrNavBackground: rgba(244, 244, 245, 0.15);
  --clrNavItemActive: rgba(211, 211, 211, 0.4);
  --clrNavItemHover: rgba(0, 0, 0, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0000c1;
  --clrGlassBackground: rgba(255, 255, 255, 0.5);
  --clrGlassBackgroundStrong: rgba(255, 255, 255, 0.5);
  --clrGlassBorder: rgba(0, 0, 0, 0.1);
  --snackbarDefaultBg: #F1ECE9;
  --snackbarDefaultText: #5D605C;
  --snackbarDefaultBorder: #5D605C;
  --snackbarDefaultIcon: #5D605C;
  --snackbarSuccessBg: #E0F1D9;
  --snackbarSuccessText: #358935;
  --snackbarSuccessBorder: #358935;
  --snackbarSuccessIcon: #358935;
  --snackbarErrorBg: #F9E1DC;
  --snackbarErrorText: #C80D12;
  --snackbarErrorBorder: #C80D12;
  --snackbarErrorIcon: #C80D12;
}

._themeDark_8jdgc_131 {
  --clrPrimary: #0F1418;
  --clrPrimary30: rgba(15, 20, 25, 0.3);
  --clrSecondary: #0A0F14;
  --clrTertiary: #212327;
  --clrPrimaryReverse: #F4F4F5;
  --clrSecondaryReverse: #FEFEFE;
  --clrTertiaryReverse: #E4E4E7;
  --clrTextPrimary: #F4F4F5;
  --clrTextSecondary: #CDCDCD;
  --clrTextTertiary: #8A8A8A;
  --clrTextPrimaryReverse: #101418;
  --clrTextSecondaryReverse: #2E3337;
  --clrTextTertiaryReverse: #7C7C7C;
  --clrError-100: #c84d4d;
  --clrError-50: #641f1f;
  --clrSuccess-100: #3EA03E;
  --clrSuccess-50: #2d692d;
  --clrSuccessOnTint: #d6ffd6;
  --clrErrorOnTint: #ffd6d6;
  --clrWarning-100: #E88434;
  --clrWarning-50: #C49168;
  --clrAccent-100: #FFFFFF;
  --clrAccent-80: rgba(255, 255, 255, 0.8);
  --clrAccent-60: rgba(255, 255, 255, 0.6);
  --clrAccent-50: rgba(255, 255, 255, 0.5);
  --clrAccent-40: rgba(255, 255, 255, 0.4);
  --clrAccent-30: rgba(255, 255, 255, 0.3);
  --clrAccent-20: rgba(255, 255, 255, 0.2);
  --clrAccent-10: rgba(255, 255, 255, 0.1);
  --clrGradient: linear-gradient(90deg, #262a2e 10%, var(--clrPrimary) 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(50, 126, 75, 0.15) 30%,
          rgba(50, 126, 75, 0.3) 60%,
          rgba(50, 126, 75, 0.5) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(167, 44, 44, 0) 0%,
          rgba(167, 44, 44, 0.15) 30%,
          rgba(167, 44, 44, 0.3) 60%,
          rgba(167, 44, 44, 0.5) 100%);
  --clrNavBackground: rgba(0, 0, 0, 0.15);
  --clrNavItemActive: rgba(24, 24, 24, 0.49);
  --clrNavItemHover: rgba(255, 255, 255, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0F1418;
  --clrGlassBackground: rgba(15, 20, 24, 0.5);
  --clrGlassBackgroundStrong: rgba(15, 20, 24, 0.6);
  --clrGlassBorder: rgba(255, 255, 255, 0.1);
  --snackbarDefaultBg: #414141;
  --snackbarDefaultText: #BABABA;
  --snackbarDefaultBorder: #BABABA;
  --snackbarDefaultIcon: #BABABA;
  --snackbarSuccessBg: #145E18;
  --snackbarSuccessText: #8FE094;
  --snackbarSuccessBorder: #8FE094;
  --snackbarSuccessIcon: #8FE094;
  --snackbarErrorBg: #910C09;
  --snackbarErrorText: #FE9E9D;
  --snackbarErrorBorder: #FE9E9D;
  --snackbarErrorIcon: #FE9E9D;
}

/* 

Note: 
    If you want something done quick, ask AI to buuild your color themes.
    If you want to do it right and tidy though, do it manually. 

    - Theo

*/
:root {
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --font-accent: "Jaro", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}

html,
body {
  font-family: var(--font-sans);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

._row_8jdgc_216 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 60px;
  padding: 6px 8px;
  border-radius: 8px;
}
._row_8jdgc_216:hover {
  background: color-mix(in srgb, var(--clrTertiary) 55%, transparent);
}

._rowLink_8jdgc_230 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  flex: 1;
  min-width: 0;
  color: inherit;
  text-decoration: none;
}

._rowText_8jdgc_242 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 2px;
  min-width: 0;
}

._nameLine_8jdgc_251 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  min-width: 0;
}

._name_8jdgc_251 {
  color: var(--clrTextPrimary);
  font-size: 0.98rem;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

._rowHandle_8jdgc_269 {
  max-width: 100%;
  color: var(--clrTextSecondary);
  font-size: 0.82rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

._teamTag_8jdgc_278 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 0;
  flex-shrink: 0;
  padding: 2px 6px;
  border-radius: 6px;
  background: var(--clrTertiary);
  border: 1px solid var(--clrAccent-10);
  color: var(--clrTextPrimary);
  font-family: var(--font-accent);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

._devChip_8jdgc_297 {
  flex-shrink: 0;
  padding: 2px 7px;
  border-radius: 999px;
  background: linear-gradient(135deg, #7c3aed, #a855f7);
  border: 1px solid color-mix(in srgb, #a855f7 60%, transparent);
  color: #fff;
  font-size: 0.62rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

._rowSkel_8jdgc_310 {
  height: 60px;
  border-radius: 8px;
  background: linear-gradient(90deg, var(--clrTertiary) 25%, color-mix(in srgb, var(--clrTertiary) 60%, transparent) 37%, var(--clrTertiary) 63%);
  background-size: 400% 100%;
  animation: _shimmer_8jdgc_1 1.4s ease infinite;
}

@keyframes _shimmer_8jdgc_1 {
  0% {
    background-position: 100% 0;
  }
  100% {
    background-position: 0 0;
  }
}html {
  color-scheme: dark;
}

html:has(body._themeLight_16nxl_5),
html:has(body._themePastelLight_16nxl_6) {
  color-scheme: light;
}

:root {
  --clrPrimary: #F4F4F5;
  --clrPrimary30: rgba(244, 244, 245, 0.3);
  --clrSecondary: #FEFEFE;
  --clrTertiary: #E4E4E7;
  --clrPrimaryReverse: #101418;
  --clrSecondaryReverse: #0A0F14;
  --clrTertiaryReverse: #212327;
  --clrTextPrimary: #101418;
  --clrTextSecondary: #2E3337;
  --clrTextTertiary: #7C7C7C;
  --clrTextPrimaryReverse: #F4F4F5;
  --clrTextSecondaryReverse: #CDCDCD;
  --clrTextTertiaryReverse: #8A8A8A;
  --clrError-100: #641f1f;
  --clrError-50: #c84d4d;
  --clrSuccess-100: #2d692d;
  --clrSuccess-50: #3EA03E;
  --clrSuccessOnTint: #0d260d;
  --clrErrorOnTint: #2e0a0a;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgb(50, 126, 75, 0.1) 30%,
          rgb(94, 178, 122, 0.36) 60%,
          rgb(144, 215, 168) 100%);
  --clrNavBackground: rgba(244, 244, 245, 0.15);
  --clrNavItemActive: rgba(211, 211, 211, 0.4);
  --clrNavItemHover: rgba(0, 0, 0, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #F4F4F5;
  --clrGlassBackground: rgba(255, 255, 255, 0.5);
  --clrGlassBackgroundStrong: rgba(255, 255, 255, 0.3);
  --clrGlassBorder: rgba(0, 0, 0, 0.1);
  --snackbarDefaultBg: #F1ECE9;
  --snackbarDefaultText: #5D605C;
  --snackbarDefaultBorder: #5D605C;
  --snackbarDefaultIcon: #5D605C;
  --snackbarSuccessBg: #E0F1D9;
  --snackbarSuccessText: #358935;
  --snackbarSuccessBorder: #358935;
  --snackbarSuccessIcon: #358935;
  --snackbarErrorBg: #F9E1DC;
  --snackbarErrorText: #C80D12;
  --snackbarErrorBorder: #C80D12;
  --snackbarErrorIcon: #C80D12;
}

._themeLight_16nxl_5 {
  --clrPrimary: #F4F4F5;
  --clrPrimary30: rgba(244, 244, 245, 0.3);
  --clrSecondary: #FEFEFE;
  --clrTertiary: #E4E4E7;
  --clrPrimaryReverse: #101418;
  --clrSecondaryReverse: #0A0F14;
  --clrTertiaryReverse: #212327;
  --clrTextPrimary: #101418;
  --clrTextSecondary: #2E3337;
  --clrTextTertiary: #7C7C7C;
  --clrTextPrimaryReverse: #F4F4F5;
  --clrTextSecondaryReverse: #CDCDCD;
  --clrTextTertiaryReverse: #8A8A8A;
  --clrError-100: #c03b3b;
  --clrError-50: #f6c5c5;
  --clrSuccess-100: #30d330;
  --clrSuccess-50: #bbffbb;
  --clrSuccessOnTint: #1f4f1f;
  --clrErrorOnTint: #7a1f1f;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgb(50, 126, 75, 0.1) 30%,
          rgb(94, 178, 122, 0.36) 60%,
          rgb(144, 215, 168) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(175, 49, 49, 0.1) 30%,
          rgba(238, 70, 70, 0.36) 60%,
          rgb(255, 173, 173) 100%);
  --clrNavBackground: rgba(244, 244, 245, 0.15);
  --clrNavItemActive: rgba(211, 211, 211, 0.4);
  --clrNavItemHover: rgba(0, 0, 0, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0000c1;
  --clrGlassBackground: rgba(255, 255, 255, 0.5);
  --clrGlassBackgroundStrong: rgba(255, 255, 255, 0.5);
  --clrGlassBorder: rgba(0, 0, 0, 0.1);
  --snackbarDefaultBg: #F1ECE9;
  --snackbarDefaultText: #5D605C;
  --snackbarDefaultBorder: #5D605C;
  --snackbarDefaultIcon: #5D605C;
  --snackbarSuccessBg: #E0F1D9;
  --snackbarSuccessText: #358935;
  --snackbarSuccessBorder: #358935;
  --snackbarSuccessIcon: #358935;
  --snackbarErrorBg: #F9E1DC;
  --snackbarErrorText: #C80D12;
  --snackbarErrorBorder: #C80D12;
  --snackbarErrorIcon: #C80D12;
}

._themeDark_16nxl_131 {
  --clrPrimary: #0F1418;
  --clrPrimary30: rgba(15, 20, 25, 0.3);
  --clrSecondary: #0A0F14;
  --clrTertiary: #212327;
  --clrPrimaryReverse: #F4F4F5;
  --clrSecondaryReverse: #FEFEFE;
  --clrTertiaryReverse: #E4E4E7;
  --clrTextPrimary: #F4F4F5;
  --clrTextSecondary: #CDCDCD;
  --clrTextTertiary: #8A8A8A;
  --clrTextPrimaryReverse: #101418;
  --clrTextSecondaryReverse: #2E3337;
  --clrTextTertiaryReverse: #7C7C7C;
  --clrError-100: #c84d4d;
  --clrError-50: #641f1f;
  --clrSuccess-100: #3EA03E;
  --clrSuccess-50: #2d692d;
  --clrSuccessOnTint: #d6ffd6;
  --clrErrorOnTint: #ffd6d6;
  --clrWarning-100: #E88434;
  --clrWarning-50: #C49168;
  --clrAccent-100: #FFFFFF;
  --clrAccent-80: rgba(255, 255, 255, 0.8);
  --clrAccent-60: rgba(255, 255, 255, 0.6);
  --clrAccent-50: rgba(255, 255, 255, 0.5);
  --clrAccent-40: rgba(255, 255, 255, 0.4);
  --clrAccent-30: rgba(255, 255, 255, 0.3);
  --clrAccent-20: rgba(255, 255, 255, 0.2);
  --clrAccent-10: rgba(255, 255, 255, 0.1);
  --clrGradient: linear-gradient(90deg, #262a2e 10%, var(--clrPrimary) 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(50, 126, 75, 0.15) 30%,
          rgba(50, 126, 75, 0.3) 60%,
          rgba(50, 126, 75, 0.5) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(167, 44, 44, 0) 0%,
          rgba(167, 44, 44, 0.15) 30%,
          rgba(167, 44, 44, 0.3) 60%,
          rgba(167, 44, 44, 0.5) 100%);
  --clrNavBackground: rgba(0, 0, 0, 0.15);
  --clrNavItemActive: rgba(24, 24, 24, 0.49);
  --clrNavItemHover: rgba(255, 255, 255, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0F1418;
  --clrGlassBackground: rgba(15, 20, 24, 0.5);
  --clrGlassBackgroundStrong: rgba(15, 20, 24, 0.6);
  --clrGlassBorder: rgba(255, 255, 255, 0.1);
  --snackbarDefaultBg: #414141;
  --snackbarDefaultText: #BABABA;
  --snackbarDefaultBorder: #BABABA;
  --snackbarDefaultIcon: #BABABA;
  --snackbarSuccessBg: #145E18;
  --snackbarSuccessText: #8FE094;
  --snackbarSuccessBorder: #8FE094;
  --snackbarSuccessIcon: #8FE094;
  --snackbarErrorBg: #910C09;
  --snackbarErrorText: #FE9E9D;
  --snackbarErrorBorder: #FE9E9D;
  --snackbarErrorIcon: #FE9E9D;
}

/* 

Note: 
    If you want something done quick, ask AI to buuild your color themes.
    If you want to do it right and tidy though, do it manually. 

    - Theo

*/
:root {
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --font-accent: "Jaro", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}

html,
body {
  font-family: var(--font-sans);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

._menuItem_16nxl_216 {
  padding: 10px 12px;
  background: transparent;
  border: 0;
  border-radius: 6px;
  color: var(--clrTextPrimary);
  font-size: 14px;
  font-weight: 600;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
}
._menuItem_16nxl_216:hover {
  background: var(--clrAccent-10);
}

._menuDanger_16nxl_234 {
  color: var(--clrError-100);
}

._body_16nxl_238 {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 12px;
  width: 100%;
  padding: 4px 4px 8px;
}

._radioList_16nxl_248 {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 6px;
  width: 100%;
}

._radioRow_16nxl_257 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  padding: 12px 14px;
  background: var(--clrTertiary);
  border: 1px solid var(--clrAccent-10);
  border-radius: 8px;
  color: var(--clrTextPrimary);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
._radioRow_16nxl_257 input {
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--clrAccent-100);
  flex-shrink: 0;
}

._radioRowActive_16nxl_280 {
  border-color: var(--clrAccent-100);
}

._textarea_16nxl_284 {
  width: 100%;
  padding: 12px 14px;
  background: var(--clrTertiary);
  border: 1px solid var(--clrAccent-10);
  border-radius: 8px;
  color: var(--clrTextPrimary);
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.4;
  resize: none;
  outline: 0;
}

._counter_16nxl_298 {
  align-self: flex-end;
  margin-top: -6px;
  color: var(--clrTextTertiary);
  font-size: 0.75rem;
}

._hint_16nxl_305 {
  margin: 0;
  color: var(--clrTextSecondary);
  font-size: 0.95rem;
  line-height: 1.5;
}

._error_16nxl_312 {
  padding: 8px 12px;
  background: var(--clrError-100);
  border-radius: 6px;
  color: #FFFFFF;
  font-size: 0.85rem;
}

._submit_16nxl_320 {
  min-height: 48px;
  background: var(--clrTextPrimary);
  border: 0;
  border-radius: 8px;
  color: var(--clrSecondary);
  font-size: 1rem;
  font-weight: 800;
  cursor: pointer;
}
._submit_16nxl_320:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

._cancel_16nxl_335 {
  min-height: 48px;
  background: var(--clrTertiary);
  border: 1px solid var(--clrAccent-10);
  border-radius: 8px;
  color: var(--clrTextPrimary);
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
}
._cancel_16nxl_335:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

._danger_16nxl_350 {
  min-height: 48px;
  background: var(--clrError-100);
  border: 0;
  border-radius: 8px;
  color: #FFFFFF;
  font-size: 1rem;
  font-weight: 800;
  cursor: pointer;
}
._danger_16nxl_350:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

._buttonRow_16nxl_365 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: stretch;
  gap: 10px;
  width: 100%;
}
._buttonRow_16nxl_365 > * {
  flex: 1;
}

._sent_16nxl_377 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  padding: 26px 12px;
  color: var(--clrTextPrimary);
  font-size: 14px;
  font-weight: 700;
  text-align: center;
}

._sentIcon_16nxl_391 {
  font-size: 1.8rem;
}html {
  color-scheme: dark;
}

html:has(body._themeLight_u1074_5),
html:has(body._themePastelLight_u1074_6) {
  color-scheme: light;
}

:root {
  --clrPrimary: #F4F4F5;
  --clrPrimary30: rgba(244, 244, 245, 0.3);
  --clrSecondary: #FEFEFE;
  --clrTertiary: #E4E4E7;
  --clrPrimaryReverse: #101418;
  --clrSecondaryReverse: #0A0F14;
  --clrTertiaryReverse: #212327;
  --clrTextPrimary: #101418;
  --clrTextSecondary: #2E3337;
  --clrTextTertiary: #7C7C7C;
  --clrTextPrimaryReverse: #F4F4F5;
  --clrTextSecondaryReverse: #CDCDCD;
  --clrTextTertiaryReverse: #8A8A8A;
  --clrError-100: #641f1f;
  --clrError-50: #c84d4d;
  --clrSuccess-100: #2d692d;
  --clrSuccess-50: #3EA03E;
  --clrSuccessOnTint: #0d260d;
  --clrErrorOnTint: #2e0a0a;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgb(50, 126, 75, 0.1) 30%,
          rgb(94, 178, 122, 0.36) 60%,
          rgb(144, 215, 168) 100%);
  --clrNavBackground: rgba(244, 244, 245, 0.15);
  --clrNavItemActive: rgba(211, 211, 211, 0.4);
  --clrNavItemHover: rgba(0, 0, 0, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #F4F4F5;
  --clrGlassBackground: rgba(255, 255, 255, 0.5);
  --clrGlassBackgroundStrong: rgba(255, 255, 255, 0.3);
  --clrGlassBorder: rgba(0, 0, 0, 0.1);
  --snackbarDefaultBg: #F1ECE9;
  --snackbarDefaultText: #5D605C;
  --snackbarDefaultBorder: #5D605C;
  --snackbarDefaultIcon: #5D605C;
  --snackbarSuccessBg: #E0F1D9;
  --snackbarSuccessText: #358935;
  --snackbarSuccessBorder: #358935;
  --snackbarSuccessIcon: #358935;
  --snackbarErrorBg: #F9E1DC;
  --snackbarErrorText: #C80D12;
  --snackbarErrorBorder: #C80D12;
  --snackbarErrorIcon: #C80D12;
}

._themeLight_u1074_5 {
  --clrPrimary: #F4F4F5;
  --clrPrimary30: rgba(244, 244, 245, 0.3);
  --clrSecondary: #FEFEFE;
  --clrTertiary: #E4E4E7;
  --clrPrimaryReverse: #101418;
  --clrSecondaryReverse: #0A0F14;
  --clrTertiaryReverse: #212327;
  --clrTextPrimary: #101418;
  --clrTextSecondary: #2E3337;
  --clrTextTertiary: #7C7C7C;
  --clrTextPrimaryReverse: #F4F4F5;
  --clrTextSecondaryReverse: #CDCDCD;
  --clrTextTertiaryReverse: #8A8A8A;
  --clrError-100: #c03b3b;
  --clrError-50: #f6c5c5;
  --clrSuccess-100: #30d330;
  --clrSuccess-50: #bbffbb;
  --clrSuccessOnTint: #1f4f1f;
  --clrErrorOnTint: #7a1f1f;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgb(50, 126, 75, 0.1) 30%,
          rgb(94, 178, 122, 0.36) 60%,
          rgb(144, 215, 168) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(175, 49, 49, 0.1) 30%,
          rgba(238, 70, 70, 0.36) 60%,
          rgb(255, 173, 173) 100%);
  --clrNavBackground: rgba(244, 244, 245, 0.15);
  --clrNavItemActive: rgba(211, 211, 211, 0.4);
  --clrNavItemHover: rgba(0, 0, 0, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0000c1;
  --clrGlassBackground: rgba(255, 255, 255, 0.5);
  --clrGlassBackgroundStrong: rgba(255, 255, 255, 0.5);
  --clrGlassBorder: rgba(0, 0, 0, 0.1);
  --snackbarDefaultBg: #F1ECE9;
  --snackbarDefaultText: #5D605C;
  --snackbarDefaultBorder: #5D605C;
  --snackbarDefaultIcon: #5D605C;
  --snackbarSuccessBg: #E0F1D9;
  --snackbarSuccessText: #358935;
  --snackbarSuccessBorder: #358935;
  --snackbarSuccessIcon: #358935;
  --snackbarErrorBg: #F9E1DC;
  --snackbarErrorText: #C80D12;
  --snackbarErrorBorder: #C80D12;
  --snackbarErrorIcon: #C80D12;
}

._themeDark_u1074_131 {
  --clrPrimary: #0F1418;
  --clrPrimary30: rgba(15, 20, 25, 0.3);
  --clrSecondary: #0A0F14;
  --clrTertiary: #212327;
  --clrPrimaryReverse: #F4F4F5;
  --clrSecondaryReverse: #FEFEFE;
  --clrTertiaryReverse: #E4E4E7;
  --clrTextPrimary: #F4F4F5;
  --clrTextSecondary: #CDCDCD;
  --clrTextTertiary: #8A8A8A;
  --clrTextPrimaryReverse: #101418;
  --clrTextSecondaryReverse: #2E3337;
  --clrTextTertiaryReverse: #7C7C7C;
  --clrError-100: #c84d4d;
  --clrError-50: #641f1f;
  --clrSuccess-100: #3EA03E;
  --clrSuccess-50: #2d692d;
  --clrSuccessOnTint: #d6ffd6;
  --clrErrorOnTint: #ffd6d6;
  --clrWarning-100: #E88434;
  --clrWarning-50: #C49168;
  --clrAccent-100: #FFFFFF;
  --clrAccent-80: rgba(255, 255, 255, 0.8);
  --clrAccent-60: rgba(255, 255, 255, 0.6);
  --clrAccent-50: rgba(255, 255, 255, 0.5);
  --clrAccent-40: rgba(255, 255, 255, 0.4);
  --clrAccent-30: rgba(255, 255, 255, 0.3);
  --clrAccent-20: rgba(255, 255, 255, 0.2);
  --clrAccent-10: rgba(255, 255, 255, 0.1);
  --clrGradient: linear-gradient(90deg, #262a2e 10%, var(--clrPrimary) 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(50, 126, 75, 0.15) 30%,
          rgba(50, 126, 75, 0.3) 60%,
          rgba(50, 126, 75, 0.5) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(167, 44, 44, 0) 0%,
          rgba(167, 44, 44, 0.15) 30%,
          rgba(167, 44, 44, 0.3) 60%,
          rgba(167, 44, 44, 0.5) 100%);
  --clrNavBackground: rgba(0, 0, 0, 0.15);
  --clrNavItemActive: rgba(24, 24, 24, 0.49);
  --clrNavItemHover: rgba(255, 255, 255, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0F1418;
  --clrGlassBackground: rgba(15, 20, 24, 0.5);
  --clrGlassBackgroundStrong: rgba(15, 20, 24, 0.6);
  --clrGlassBorder: rgba(255, 255, 255, 0.1);
  --snackbarDefaultBg: #414141;
  --snackbarDefaultText: #BABABA;
  --snackbarDefaultBorder: #BABABA;
  --snackbarDefaultIcon: #BABABA;
  --snackbarSuccessBg: #145E18;
  --snackbarSuccessText: #8FE094;
  --snackbarSuccessBorder: #8FE094;
  --snackbarSuccessIcon: #8FE094;
  --snackbarErrorBg: #910C09;
  --snackbarErrorText: #FE9E9D;
  --snackbarErrorBorder: #FE9E9D;
  --snackbarErrorIcon: #FE9E9D;
}

/* 

Note: 
    If you want something done quick, ask AI to buuild your color themes.
    If you want to do it right and tidy though, do it manually. 

    - Theo

*/
:root {
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --font-accent: "Jaro", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}

html,
body {
  font-family: var(--font-sans);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

._profileContainer_u1074_216 {
  max-width: 820px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 14px;
  padding-top: calc(60px + env(safe-area-inset-top) + 16px);
  padding-bottom: calc(60px + env(safe-area-inset-bottom) + 16px);
  padding-left: 22px;
  padding-right: 22px;
}
._profileContainer_u1074_216 ._pageHeader_u1074_229 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  min-height: 36px;
}
._profileContainer_u1074_216 ._pageHeaderTitle_u1074_238 {
  flex: 1;
}
._profileContainer_u1074_216 ._backBtn_u1074_241 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  padding: 6px 4px;
  background: transparent;
  border: 0;
  color: var(--clrTextSecondary);
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
}
._profileContainer_u1074_216 ._backBtn_u1074_241 svg {
  width: 18px;
  height: 18px;
}
._profileContainer_u1074_216 ._menuWrap_u1074_259 {
  position: relative;
  margin-left: auto;
}
._profileContainer_u1074_216 ._gearBtn_u1074_263 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 0;
  width: 40px;
  height: 40px;
  padding: 8px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--clrSecondary) 82%, transparent);
  border: 1px solid var(--clrAccent-10);
  color: var(--clrTextPrimary);
  cursor: pointer;
}
._profileContainer_u1074_216 ._gearBtn_u1074_263 svg {
  width: 22px;
  height: 22px;
}
._profileContainer_u1074_216 ._gearBtn_u1074_263:hover {
  background: var(--clrTertiary);
}
._profileContainer_u1074_216 ._menu_u1074_259 {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 50;
  min-width: 210px;
  padding: 6px;
  background: var(--clrSecondary);
  border: 1px solid var(--clrAccent-10);
  border-radius: 8px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 2px;
}
._profileContainer_u1074_216 ._menu_u1074_259 button {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  width: 100%;
  min-height: 42px;
  padding: 0 12px;
  background: transparent;
  border: 0;
  border-radius: 6px;
  color: var(--clrTextPrimary);
  font-size: 0.92rem;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}
._profileContainer_u1074_216 ._menu_u1074_259 button svg {
  width: 18px;
  height: 18px;
  color: var(--clrTextSecondary);
}
._profileContainer_u1074_216 ._menu_u1074_259 button:hover {
  background: var(--clrTertiary);
}
._profileContainer_u1074_216 ._menu_u1074_259 button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
._profileContainer_u1074_216 ._menuDivider_u1074_332 {
  height: 1px;
  margin: 4px 6px;
  background: var(--clrAccent-10);
}
._profileContainer_u1074_216 ._menuDanger_u1074_337 {
  color: var(--clrError-100) !important;
}
._profileContainer_u1074_216 ._menuDanger_u1074_337 svg {
  color: var(--clrError-100) !important;
}
._profileContainer_u1074_216 ._copiedToast_u1074_343 {
  position: absolute;
  top: 50%;
  right: calc(100% + 10px);
  transform: translateY(-50%);
  z-index: 60;
  padding: 8px 14px;
  white-space: nowrap;
  background: var(--clrTextPrimary);
  color: var(--clrSecondary);
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 700;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  pointer-events: none;
  animation: _toastIn_u1074_1 0.18s ease;
}
@keyframes _toastIn_u1074_1 {
  from {
    opacity: 0;
    transform: translate(8px, -50%);
  }
  to {
    opacity: 1;
    transform: translate(0, -50%);
  }
}
._profileContainer_u1074_216 ._heroNameRow_u1074_370 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
._profileContainer_u1074_216 ._heroNameRow_u1074_370 h1 {
  margin: 0 !important;
}
._profileContainer_u1074_216 ._profileHero_u1074_380 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 14px;
  width: 100%;
  padding-top: 8px;
  padding-bottom: 8px;
}
._profileContainer_u1074_216 ._profileHero_u1074_380 ._heroText_u1074_390 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 4px;
  min-width: 0;
}
._profileContainer_u1074_216 ._profileHero_u1074_380 ._profileNameRow_u1074_398 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
}
._profileContainer_u1074_216 ._profileHero_u1074_380 ._profileNameRow_u1074_398 h1 {
  margin: 0;
  color: var(--clrTextPrimary);
  font-family: var(--font-accent);
  font-size: clamp(1.5rem, 5.6vw, 2.1rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: 0;
}
._profileContainer_u1074_216 ._profileHero_u1074_380 ._heroHandle_u1074_414 {
  padding: 0;
  background: transparent;
  border: 0;
  color: var(--clrTextSecondary);
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
}
._profileContainer_u1074_216 ._profileHero_u1074_380 ._heroHandle_u1074_414:hover {
  color: var(--clrTextPrimary);
}
._profileContainer_u1074_216 ._goPublicCard_u1074_426,
._profileContainer_u1074_216 ._socialCard_u1074_427 {
  width: 100%;
  background: color-mix(in srgb, var(--clrSecondary) 82%, transparent);
  border: 1px solid var(--clrAccent-10);
  border-radius: 8px;
}
._profileContainer_u1074_216 ._goPublicCard_u1074_426 {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) 22px;
  align-items: center;
  gap: 12px;
  padding: 14px;
  text-align: left;
  cursor: pointer;
}
._profileContainer_u1074_216 ._goPublicCard_u1074_426 ._chevronIcon_u1074_442 {
  width: 21px;
  height: 21px;
  color: var(--clrTextTertiary);
}
._profileContainer_u1074_216 ._socialCard_u1074_427 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 14px;
}
._profileContainer_u1074_216 ._socialCardMain_u1074_456 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  min-width: 0;
  flex: 1;
}
._profileContainer_u1074_216 ._socialCardIcon_u1074_465 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 0;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: 6px;
  background: var(--clrTertiary);
  color: #12a8ff;
}
._profileContainer_u1074_216 ._socialCardIcon_u1074_465 svg {
  width: 22px;
  height: 22px;
}
._profileContainer_u1074_216 ._socialCardText_u1074_482 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 2px;
  min-width: 0;
}
._profileContainer_u1074_216 ._socialCardText_u1074_482 strong {
  color: var(--clrTextPrimary);
  font-size: 0.98rem;
  font-weight: 700;
}
._profileContainer_u1074_216 ._socialCardText_u1074_482 span {
  color: var(--clrTextSecondary);
  font-size: 0.82rem;
  line-height: 1.35;
}
._profileContainer_u1074_216 ._socialCardActions_u1074_500 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}
._profileContainer_u1074_216 ._socialGhost_u1074_507,
._profileContainer_u1074_216 ._socialPrimary_u1074_508 {
  min-height: 38px;
  padding: 0 16px;
  border-radius: 8px;
  font-size: 0.88rem;
  font-weight: 700;
  cursor: pointer;
  border: 1px solid transparent;
}
._profileContainer_u1074_216 ._socialGhost_u1074_507:disabled,
._profileContainer_u1074_216 ._socialPrimary_u1074_508:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
._profileContainer_u1074_216 ._socialGhost_u1074_507 {
  background: transparent;
  border-color: var(--clrAccent-10);
  color: var(--clrTextPrimary);
}
._profileContainer_u1074_216 ._socialPrimary_u1074_508 {
  background: var(--clrTextPrimary);
  color: var(--clrSecondary);
}
._profileContainer_u1074_216 ._profileDashboard_u1074_531 {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 12px;
  width: 100%;
  padding: 14px;
  background: color-mix(in srgb, var(--clrSecondary) 82%, transparent);
  border: 1px solid var(--clrAccent-10);
  border-radius: 8px;
}
._profileContainer_u1074_216 ._profileDashboard_u1074_531 ._statsTiles_u1074_543 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
._profileContainer_u1074_216 ._profileDashboard_u1074_531 ._statTile_u1074_548 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-width: 0;
  min-height: 72px;
  padding: 10px 6px;
  background: var(--clrTertiary);
  border: 1px solid var(--clrAccent-10);
  border-radius: 8px;
  text-align: center;
}
._profileContainer_u1074_216 ._profileDashboard_u1074_531 ._statTile_u1074_548 strong {
  color: var(--clrTextPrimary);
  font-size: clamp(1.35rem, 6.5vw, 1.8rem);
  font-weight: 900;
  line-height: 1;
}
._profileContainer_u1074_216 ._profileDashboard_u1074_531 ._statTile_u1074_548 span {
  color: var(--clrTextSecondary);
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.1;
}
._profileContainer_u1074_216 ._showcasePanel_u1074_574 {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 12px;
  width: 100%;
  padding: 16px;
  background: var(--clrSecondary);
  border: 1px solid var(--clrAccent-10);
  border-radius: 8px;
}
._profileContainer_u1074_216 ._showcasePanel_u1074_574 ._showcaseHeader_u1074_586 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: var(--clrTextSecondary);
  font-size: 0.82rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
._profileContainer_u1074_216 ._profileLinks_u1074_598 {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 0;
  margin-top: 4px;
}
._profileContainer_u1074_216 ._profileLinks_u1074_598 button {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) 22px;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 58px;
  padding: 0 2px;
  color: var(--clrTextPrimary);
  text-align: left;
  background: transparent;
  border: 0;
  border-top: 1px solid var(--clrAccent-10);
  cursor: pointer;
}
._profileContainer_u1074_216 ._profileLinks_u1074_598 button:first-child {
  border-top: 0;
}
._profileContainer_u1074_216 ._profileLinks_u1074_598 button span {
  font-size: 1.05rem;
  font-weight: 600;
}
._profileContainer_u1074_216 ._profileLinks_u1074_598 ._statisticsIcon_u1074_628,
._profileContainer_u1074_216 ._profileLinks_u1074_598 ._achievementsIcon_u1074_629 {
  width: 22px;
  height: 22px;
}
._profileContainer_u1074_216 ._profileLinks_u1074_598 ._statisticsIcon_u1074_628 {
  color: #12a8ff;
}
._profileContainer_u1074_216 ._profileLinks_u1074_598 ._achievementsIcon_u1074_629 {
  color: #f59e0b;
}
._profileContainer_u1074_216 ._profileLinks_u1074_598 ._chevronIcon_u1074_442 {
  width: 21px;
  height: 21px;
  color: var(--clrTextTertiary);
  justify-self: end;
}
._profileContainer_u1074_216 ._guestPromptContainer_u1074_645 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  width: 100%;
  padding: 24px;
}
._profileContainer_u1074_216 ._guestPromptContainer_u1074_645 ._guestPrompt_u1074_645 {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 24px;
  max-width: 600px;
  width: 100%;
  padding: 32px;
  background: var(--clrSecondary);
  border-radius: 12px;
  border: 1px solid var(--clrAccent-100);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}
._profileContainer_u1074_216 ._guestPromptContainer_u1074_645 ._guestPrompt_u1074_645 h2 {
  font-size: 24px;
  font-weight: 700;
  color: var(--clrTextPrimary);
  margin: 0;
  text-align: center;
}
._profileContainer_u1074_216 ._guestPromptContainer_u1074_645 ._guestPrompt_u1074_645 ._subtitle_u1074_675 {
  font-size: 14px;
  color: var(--clrTextSecondary);
  text-align: center;
  margin: 0;
}
._profileContainer_u1074_216 ._guestPromptContainer_u1074_645 ._guestPrompt_u1074_645 ._benefitsList_u1074_681 {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 20px;
}
._profileContainer_u1074_216 ._guestPromptContainer_u1074_645 ._guestPrompt_u1074_645 ._benefitsList_u1074_681 ._benefit_u1074_681 {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 16px;
}
._profileContainer_u1074_216 ._guestPromptContainer_u1074_645 ._guestPrompt_u1074_645 ._benefitsList_u1074_681 ._benefit_u1074_681 ._icon_u1074_695 {
  font-size: 24px;
  flex-shrink: 0;
}
._profileContainer_u1074_216 ._guestPromptContainer_u1074_645 ._guestPrompt_u1074_645 ._benefitsList_u1074_681 ._benefit_u1074_681 div {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 4px;
  flex: 1;
}
._profileContainer_u1074_216 ._guestPromptContainer_u1074_645 ._guestPrompt_u1074_645 ._benefitsList_u1074_681 ._benefit_u1074_681 div h3 {
  font-size: 16px;
  font-weight: 600;
  color: var(--clrTextPrimary);
  margin: 0;
}
._profileContainer_u1074_216 ._guestPromptContainer_u1074_645 ._guestPrompt_u1074_645 ._benefitsList_u1074_681 ._benefit_u1074_681 div p {
  font-size: 12px;
  color: var(--clrTextSecondary);
  margin: 0;
  line-height: 1.4;
}
._profileContainer_u1074_216 ._guestPromptContainer_u1074_645 ._guestPrompt_u1074_645 ._guestActionButtons_u1074_719 {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 12px;
  margin-top: 8px;
}
._profileContainer_u1074_216 ._guestPromptContainer_u1074_645 ._guestPrompt_u1074_645 ._guestActionButtons_u1074_719 ._primaryButton_u1074_727 {
  padding: 14px 24px;
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  border: none;
  border-radius: 8px;
  color: #FFFFFF;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}
._profileContainer_u1074_216 ._guestPromptContainer_u1074_645 ._guestPrompt_u1074_645 ._guestActionButtons_u1074_719 ._primaryButton_u1074_727:hover {
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
}
._profileContainer_u1074_216 ._guestPromptContainer_u1074_645 ._guestPrompt_u1074_645 ._guestActionButtons_u1074_719 ._primaryButton_u1074_727:active {
  transform: translateY(0);
}
._profileContainer_u1074_216 ._guestPromptContainer_u1074_645 ._guestPrompt_u1074_645 ._guestActionButtons_u1074_719 ._secondaryButton_u1074_746 {
  padding: 14px 24px;
  background: var(--clrTertiary);
  border: 1px solid var(--clrAccent-100);
  border-radius: 8px;
  color: var(--clrTextPrimary);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}
._profileContainer_u1074_216 ._guestPromptContainer_u1074_645 ._guestPrompt_u1074_645 ._guestActionButtons_u1074_719 ._secondaryButton_u1074_746:hover {
  background: var(--clrSecondary);
  border-color: var(--clrAccent-30);
}
._profileContainer_u1074_216 ._guestPromptContainer_u1074_645 ._guestPrompt_u1074_645 ._guestActionButtons_u1074_719 ._secondaryButton_u1074_746:active {
  transform: scale(0.98);
}
._profileContainer_u1074_216 ._guestPromptContainer_u1074_645 ._guestPrompt_u1074_645 ._dataWarning_u1074_764 {
  font-size: 12px;
  color: var(--clrWarning-100);
  text-align: center;
  margin: 0;
  padding: 12px;
  background: var(--clrWarning-50);
  border-radius: 6px;
  opacity: 0.2;
}
@media (max-width: 768px) {
  ._profileContainer_u1074_216 {
    padding-left: 20px;
    padding-right: 20px;
    gap: 12px;
  }
  ._profileContainer_u1074_216 ._guestPromptContainer_u1074_645 {
    padding: 16px;
  }
  ._profileContainer_u1074_216 ._guestPromptContainer_u1074_645 ._guestPrompt_u1074_645 {
    padding: 24px;
  }
}
@media (max-width: 480px) {
  ._profileContainer_u1074_216 {
    padding-left: 16px;
    padding-right: 16px;
  }
  ._profileContainer_u1074_216 ._profileDashboard_u1074_531 {
    padding: 12px;
  }
  ._profileContainer_u1074_216 ._profileDashboard_u1074_531 ._statsTiles_u1074_543 {
    gap: 10px;
  }
  ._profileContainer_u1074_216 ._profileDashboard_u1074_531 ._statTile_u1074_548 {
    min-height: 72px;
    padding: 9px 4px;
  }
  ._profileContainer_u1074_216 ._profileDashboard_u1074_531 ._statTile_u1074_548 span {
    font-size: 0.72rem;
  }
  ._profileContainer_u1074_216 ._guestPromptContainer_u1074_645 {
    padding: 8px;
  }
  ._profileContainer_u1074_216 ._guestPromptContainer_u1074_645 ._guestPrompt_u1074_645 {
    padding: 20px;
    gap: 20px;
  }
  ._profileContainer_u1074_216 ._guestPromptContainer_u1074_645 ._guestPrompt_u1074_645 h2 {
    font-size: 16px;
  }
  ._profileContainer_u1074_216 ._guestPromptContainer_u1074_645 ._guestPrompt_u1074_645 ._benefitsList_u1074_681 {
    gap: 16px;
  }
  ._profileContainer_u1074_216 ._guestPromptContainer_u1074_645 ._guestPrompt_u1074_645 ._benefitsList_u1074_681 ._benefit_u1074_681 {
    gap: 12px;
  }
  ._profileContainer_u1074_216 ._guestPromptContainer_u1074_645 ._guestPrompt_u1074_645 ._benefitsList_u1074_681 ._benefit_u1074_681 ._icon_u1074_695 {
    font-size: 16px;
  }
}html {
  color-scheme: dark;
}

html:has(body._themeLight_117vf_5),
html:has(body._themePastelLight_117vf_6) {
  color-scheme: light;
}

:root {
  --clrPrimary: #F4F4F5;
  --clrPrimary30: rgba(244, 244, 245, 0.3);
  --clrSecondary: #FEFEFE;
  --clrTertiary: #E4E4E7;
  --clrPrimaryReverse: #101418;
  --clrSecondaryReverse: #0A0F14;
  --clrTertiaryReverse: #212327;
  --clrTextPrimary: #101418;
  --clrTextSecondary: #2E3337;
  --clrTextTertiary: #7C7C7C;
  --clrTextPrimaryReverse: #F4F4F5;
  --clrTextSecondaryReverse: #CDCDCD;
  --clrTextTertiaryReverse: #8A8A8A;
  --clrError-100: #641f1f;
  --clrError-50: #c84d4d;
  --clrSuccess-100: #2d692d;
  --clrSuccess-50: #3EA03E;
  --clrSuccessOnTint: #0d260d;
  --clrErrorOnTint: #2e0a0a;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgb(50, 126, 75, 0.1) 30%,
          rgb(94, 178, 122, 0.36) 60%,
          rgb(144, 215, 168) 100%);
  --clrNavBackground: rgba(244, 244, 245, 0.15);
  --clrNavItemActive: rgba(211, 211, 211, 0.4);
  --clrNavItemHover: rgba(0, 0, 0, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #F4F4F5;
  --clrGlassBackground: rgba(255, 255, 255, 0.5);
  --clrGlassBackgroundStrong: rgba(255, 255, 255, 0.3);
  --clrGlassBorder: rgba(0, 0, 0, 0.1);
  --snackbarDefaultBg: #F1ECE9;
  --snackbarDefaultText: #5D605C;
  --snackbarDefaultBorder: #5D605C;
  --snackbarDefaultIcon: #5D605C;
  --snackbarSuccessBg: #E0F1D9;
  --snackbarSuccessText: #358935;
  --snackbarSuccessBorder: #358935;
  --snackbarSuccessIcon: #358935;
  --snackbarErrorBg: #F9E1DC;
  --snackbarErrorText: #C80D12;
  --snackbarErrorBorder: #C80D12;
  --snackbarErrorIcon: #C80D12;
}

._themeLight_117vf_5 {
  --clrPrimary: #F4F4F5;
  --clrPrimary30: rgba(244, 244, 245, 0.3);
  --clrSecondary: #FEFEFE;
  --clrTertiary: #E4E4E7;
  --clrPrimaryReverse: #101418;
  --clrSecondaryReverse: #0A0F14;
  --clrTertiaryReverse: #212327;
  --clrTextPrimary: #101418;
  --clrTextSecondary: #2E3337;
  --clrTextTertiary: #7C7C7C;
  --clrTextPrimaryReverse: #F4F4F5;
  --clrTextSecondaryReverse: #CDCDCD;
  --clrTextTertiaryReverse: #8A8A8A;
  --clrError-100: #c03b3b;
  --clrError-50: #f6c5c5;
  --clrSuccess-100: #30d330;
  --clrSuccess-50: #bbffbb;
  --clrSuccessOnTint: #1f4f1f;
  --clrErrorOnTint: #7a1f1f;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgb(50, 126, 75, 0.1) 30%,
          rgb(94, 178, 122, 0.36) 60%,
          rgb(144, 215, 168) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(175, 49, 49, 0.1) 30%,
          rgba(238, 70, 70, 0.36) 60%,
          rgb(255, 173, 173) 100%);
  --clrNavBackground: rgba(244, 244, 245, 0.15);
  --clrNavItemActive: rgba(211, 211, 211, 0.4);
  --clrNavItemHover: rgba(0, 0, 0, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0000c1;
  --clrGlassBackground: rgba(255, 255, 255, 0.5);
  --clrGlassBackgroundStrong: rgba(255, 255, 255, 0.5);
  --clrGlassBorder: rgba(0, 0, 0, 0.1);
  --snackbarDefaultBg: #F1ECE9;
  --snackbarDefaultText: #5D605C;
  --snackbarDefaultBorder: #5D605C;
  --snackbarDefaultIcon: #5D605C;
  --snackbarSuccessBg: #E0F1D9;
  --snackbarSuccessText: #358935;
  --snackbarSuccessBorder: #358935;
  --snackbarSuccessIcon: #358935;
  --snackbarErrorBg: #F9E1DC;
  --snackbarErrorText: #C80D12;
  --snackbarErrorBorder: #C80D12;
  --snackbarErrorIcon: #C80D12;
}

._themeDark_117vf_131 {
  --clrPrimary: #0F1418;
  --clrPrimary30: rgba(15, 20, 25, 0.3);
  --clrSecondary: #0A0F14;
  --clrTertiary: #212327;
  --clrPrimaryReverse: #F4F4F5;
  --clrSecondaryReverse: #FEFEFE;
  --clrTertiaryReverse: #E4E4E7;
  --clrTextPrimary: #F4F4F5;
  --clrTextSecondary: #CDCDCD;
  --clrTextTertiary: #8A8A8A;
  --clrTextPrimaryReverse: #101418;
  --clrTextSecondaryReverse: #2E3337;
  --clrTextTertiaryReverse: #7C7C7C;
  --clrError-100: #c84d4d;
  --clrError-50: #641f1f;
  --clrSuccess-100: #3EA03E;
  --clrSuccess-50: #2d692d;
  --clrSuccessOnTint: #d6ffd6;
  --clrErrorOnTint: #ffd6d6;
  --clrWarning-100: #E88434;
  --clrWarning-50: #C49168;
  --clrAccent-100: #FFFFFF;
  --clrAccent-80: rgba(255, 255, 255, 0.8);
  --clrAccent-60: rgba(255, 255, 255, 0.6);
  --clrAccent-50: rgba(255, 255, 255, 0.5);
  --clrAccent-40: rgba(255, 255, 255, 0.4);
  --clrAccent-30: rgba(255, 255, 255, 0.3);
  --clrAccent-20: rgba(255, 255, 255, 0.2);
  --clrAccent-10: rgba(255, 255, 255, 0.1);
  --clrGradient: linear-gradient(90deg, #262a2e 10%, var(--clrPrimary) 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(50, 126, 75, 0.15) 30%,
          rgba(50, 126, 75, 0.3) 60%,
          rgba(50, 126, 75, 0.5) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(167, 44, 44, 0) 0%,
          rgba(167, 44, 44, 0.15) 30%,
          rgba(167, 44, 44, 0.3) 60%,
          rgba(167, 44, 44, 0.5) 100%);
  --clrNavBackground: rgba(0, 0, 0, 0.15);
  --clrNavItemActive: rgba(24, 24, 24, 0.49);
  --clrNavItemHover: rgba(255, 255, 255, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0F1418;
  --clrGlassBackground: rgba(15, 20, 24, 0.5);
  --clrGlassBackgroundStrong: rgba(15, 20, 24, 0.6);
  --clrGlassBorder: rgba(255, 255, 255, 0.1);
  --snackbarDefaultBg: #414141;
  --snackbarDefaultText: #BABABA;
  --snackbarDefaultBorder: #BABABA;
  --snackbarDefaultIcon: #BABABA;
  --snackbarSuccessBg: #145E18;
  --snackbarSuccessText: #8FE094;
  --snackbarSuccessBorder: #8FE094;
  --snackbarSuccessIcon: #8FE094;
  --snackbarErrorBg: #910C09;
  --snackbarErrorText: #FE9E9D;
  --snackbarErrorBorder: #FE9E9D;
  --snackbarErrorIcon: #FE9E9D;
}

/* 

Note: 
    If you want something done quick, ask AI to buuild your color themes.
    If you want to do it right and tidy though, do it manually. 

    - Theo

*/
:root {
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --font-accent: "Jaro", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}

html,
body {
  font-family: var(--font-sans);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

._page_117vf_216 {
  max-width: 820px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 28px;
  padding-top: calc(60px + env(safe-area-inset-top) + 16px);
  padding-bottom: calc(98px + env(safe-area-inset-bottom) + 24px);
  padding-left: 22px;
  padding-right: 22px;
}

._back_117vf_230 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  align-self: flex-start;
  padding: 8px 4px;
  background: transparent;
  border: 0;
  color: var(--clrTextSecondary);
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
}
._back_117vf_230 svg {
  width: 18px;
  height: 18px;
}

._hero_117vf_250 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  text-align: center;
  padding: 8px 0 4px;
}
._hero_117vf_250 h1 {
  margin: 6px 0 0;
  color: var(--clrTextPrimary);
  font-family: var(--font-accent);
  font-size: clamp(1.6rem, 6vw, 2.1rem);
  font-weight: 800;
  line-height: 1.1;
}
._hero_117vf_250 ._nameRow_117vf_267 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
._hero_117vf_250 ._handle_117vf_274 {
  color: var(--clrTextSecondary);
  font-size: 0.95rem;
  font-weight: 600;
}
._hero_117vf_250 ._bio_117vf_279 {
  margin: 4px 0 0;
  color: var(--clrTextSecondary);
  font-size: 0.92rem;
  line-height: 1.45;
  max-width: 36ch;
}
._hero_117vf_250 ._counts_117vf_286 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin-top: 6px;
  color: var(--clrTextSecondary);
  font-size: 0.9rem;
}
._hero_117vf_250 ._counts_117vf_286 strong {
  color: var(--clrTextPrimary);
  font-weight: 800;
}

._followBtn_117vf_301,
._editBtn_117vf_302 {
  min-height: 44px;
  margin-top: 8px;
  padding: 0 36px;
  border-radius: 999px;
  font-size: 0.98rem;
  font-weight: 800;
  cursor: pointer;
  border: 1px solid transparent;
}

._followBtn_117vf_301 {
  background: var(--clrTextPrimary);
  color: var(--clrSecondary);
}

._editBtn_117vf_302 {
  background: transparent;
  border-color: var(--clrAccent-30);
  color: var(--clrTextPrimary);
}

._pageHeader_117vf_324 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  min-height: 40px;
}

._headerRight_117vf_334 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  margin-left: auto;
}

._menuWrap_117vf_343 {
  position: relative;
}

._privateLock_117vf_347 {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 0;
  width: 40px;
  height: 40px;
  padding: 0;
  background: transparent;
  border: 0;
  color: var(--clrTextSecondary);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
._privateLock_117vf_347 svg {
  width: 21px;
  height: 21px;
}
._privateLock_117vf_347:hover {
  color: var(--clrTextPrimary);
}
._privateLock_117vf_347 ._lockTip_117vf_370 {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 61;
  white-space: nowrap;
  padding: 5px 10px;
  background: var(--clrTextPrimary);
  color: var(--clrSecondary);
  border-radius: 6px;
  font-size: 0.76rem;
  font-weight: 700;
  line-height: 1;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-4px);
  transition: opacity 0.14s ease, transform 0.14s ease;
}
._privateLock_117vf_347 ._lockTip_117vf_370::after {
  content: "";
  position: absolute;
  bottom: 100%;
  right: 12px;
  border: 5px solid transparent;
  border-bottom-color: var(--clrTextPrimary);
}
._privateLock_117vf_347:hover ._lockTip_117vf_370, ._privateLock_117vf_347:focus ._lockTip_117vf_370, ._privateLock_117vf_347:focus-visible ._lockTip_117vf_370 {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

._gearBtn_117vf_404 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 0;
  width: 40px;
  height: 40px;
  padding: 8px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--clrSecondary) 82%, transparent);
  border: 1px solid var(--clrAccent-10);
  color: var(--clrTextPrimary);
  cursor: pointer;
}
._gearBtn_117vf_404 svg {
  width: 22px;
  height: 22px;
}
._gearBtn_117vf_404:hover {
  background: var(--clrTertiary);
}

._menu_117vf_343 {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 50;
  min-width: 210px;
  padding: 6px;
  background: var(--clrSecondary);
  border: 1px solid var(--clrAccent-10);
  border-radius: 8px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 2px;
}
._menu_117vf_343 button {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  width: 100%;
  min-height: 42px;
  padding: 0 12px;
  background: transparent;
  border: 0;
  border-radius: 6px;
  color: var(--clrTextPrimary);
  font-size: 0.92rem;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}
._menu_117vf_343 button svg {
  width: 18px;
  height: 18px;
  color: var(--clrTextSecondary);
}
._menu_117vf_343 button:hover {
  background: var(--clrTertiary);
}
._menu_117vf_343 button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

._menuDivider_117vf_475 {
  height: 1px;
  margin: 4px 6px;
  background: var(--clrAccent-10);
}

._menuDanger_117vf_481 {
  color: var(--clrError-100) !important;
}
._menuDanger_117vf_481 svg {
  color: var(--clrError-100) !important;
}

._copiedToast_117vf_488 {
  position: absolute;
  top: 50%;
  right: calc(100% + 10px);
  transform: translateY(-50%);
  z-index: 60;
  padding: 8px 14px;
  white-space: nowrap;
  background: var(--clrTextPrimary);
  color: var(--clrSecondary);
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 700;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  pointer-events: none;
  animation: _toastIn_117vf_1 0.18s ease;
}

@keyframes _toastIn_117vf_1 {
  from {
    opacity: 0;
    transform: translate(8px, -50%);
  }
  to {
    opacity: 1;
    transform: translate(0, -50%);
  }
}
._authCta_117vf_516 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 6px;
}

._signInLink_117vf_525 {
  padding: 4px;
  background: transparent;
  border: 0;
  color: var(--clrTextSecondary);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
}
._signInLink_117vf_525:hover {
  color: var(--clrTextPrimary);
}

._privateNote_117vf_538 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 14px;
  padding: 12px 20px;
  background: color-mix(in srgb, var(--clrSecondary) 82%, transparent);
  border: 1px solid var(--clrAccent-10);
  border-radius: 999px;
  color: var(--clrTextSecondary);
  font-size: 0.92rem;
  font-weight: 600;
}
._privateNote_117vf_538 ._privateIcon_117vf_553 {
  width: 16px;
  height: 16px;
}

._statsGrid_117vf_558 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

._statTile_117vf_564 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 0;
  min-height: 96px;
  padding: 14px 8px;
  background: color-mix(in srgb, var(--clrSecondary) 82%, transparent);
  border: 1px solid var(--clrAccent-10);
  border-radius: 8px;
  text-align: center;
}
._statTile_117vf_564 strong {
  color: var(--clrTextPrimary);
  font-size: clamp(1.35rem, 6.5vw, 1.8rem);
  font-weight: 900;
  line-height: 1;
}
._statTile_117vf_564 span {
  color: var(--clrTextSecondary);
  font-size: 0.76rem;
  font-weight: 600;
  line-height: 1.15;
}

._leaderTile_117vf_591 {
  gap: 8px;
}

._subStats_117vf_595 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  padding: 14px;
  background: color-mix(in srgb, var(--clrSecondary) 82%, transparent);
  border: 1px solid var(--clrAccent-10);
  border-radius: 8px;
}
._subStats_117vf_595 div {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
}
._subStats_117vf_595 div strong {
  color: var(--clrTextPrimary);
  font-size: 1.25rem;
  font-weight: 900;
  line-height: 1;
}
._subStats_117vf_595 div span {
  color: var(--clrTextTertiary);
  font-size: 0.74rem;
  font-weight: 600;
}

._noStats_117vf_623 {
  padding: 20px;
  text-align: center;
  color: var(--clrTextTertiary);
  font-size: 0.9rem;
}

._empty_117vf_630 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 48px 20px;
  text-align: center;
}
._empty_117vf_630 ._emptyIcon_117vf_639 {
  font-size: 2.4rem;
}
._empty_117vf_630 h2 {
  margin: 0;
  color: var(--clrTextPrimary);
  font-size: 1.2rem;
  font-weight: 700;
}
._empty_117vf_630 p {
  margin: 0;
  color: var(--clrTextSecondary);
  font-size: 0.9rem;
}

._skeletonHero_117vf_654 {
  pointer-events: none;
}

._skelAvatar_117vf_658,
._skelLine_117vf_659,
._skelLineSm_117vf_660 {
  background: linear-gradient(90deg, var(--clrAccent-10) 25%, color-mix(in srgb, var(--clrAccent-10) 40%, transparent) 50%, var(--clrAccent-10) 75%);
  background-size: 200% 100%;
  animation: _shimmer_117vf_1 1.3s infinite;
  border-radius: 6px;
}

._skelAvatar_117vf_658 {
  width: 104px;
  height: 104px;
  border-radius: 50%;
}

._skelLine_117vf_659 {
  width: 160px;
  height: 22px;
  margin-top: 10px;
}

._skelLineSm_117vf_660 {
  width: 100px;
  height: 14px;
}

@keyframes _shimmer_117vf_1 {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}
/* ===== Redesigned profile layout (wireframe) ================================ */
._profileHeader_117vf_693 {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 0;
  width: 100%;
  background: color-mix(in srgb, var(--clrSecondary) 82%, transparent);
  border: 1px solid var(--clrAccent-10);
  border-radius: 12px;
  overflow: hidden;
}

._banner_117vf_706 {
  height: 104px;
  width: 100%;
  flex-shrink: 0;
  background: radial-gradient(100% 120% at 50% 50%, color-mix(in srgb, var(--c5, transparent) 55%, transparent), transparent 60%), radial-gradient(120% 140% at 15% 0%, color-mix(in srgb, var(--c2, #3f3f46) 70%, transparent), transparent 55%), radial-gradient(120% 140% at 85% 100%, color-mix(in srgb, var(--c3, #27272a) 70%, transparent), transparent 55%), linear-gradient(115deg, var(--c1, #2f2f35), var(--c2, #3f3f46), var(--c3, #27272a), var(--c4, #2f2f35));
  background-size: 200% 200%, 200% 200%, 200% 200%, 300% 300%;
  animation: _titleFlow_117vf_1 12s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  ._banner_117vf_706 {
    animation: none;
  }
}

._headerBody_117vf_720 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 6px;
  padding: 0 20px 18px;
}

._seamRow_117vf_729 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 14px;
  flex-wrap: wrap;
  width: 100%;
  min-width: 0;
  margin-top: -44px;
  margin-bottom: 4px;
}

._seamActions_117vf_742 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  margin-left: auto;
  align-self: flex-end;
}
@media (max-width: 560px) {
  ._seamActions_117vf_742 {
    width: 100%;
    margin-left: 0;
    margin-top: 12px;
    justify-content: flex-start;
  }
}

._nameLine_117vf_760 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  flex-wrap: wrap;
  min-width: 0;
}
._nameLine_117vf_760 h1 {
  margin: 0;
  color: var(--clrTextPrimary);
  font-family: var(--font-accent);
  font-size: clamp(1.45rem, 5vw, 1.7rem);
  font-weight: 800;
  line-height: 1.15;
}

._handle_117vf_274 {
  color: var(--clrTextSecondary);
  font-size: 0.95rem;
}

._statsRow_117vf_783 {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  justify-content: flex-start;
  gap: 0;
  width: 100%;
  border-top: 1px solid var(--clrAccent-10);
}

._stat_117vf_558 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  flex: 1 1 0;
  min-width: 0;
  padding: 12px 14px;
  background: transparent;
  border: 0;
  border-right: 1px solid var(--clrAccent-10);
  text-align: center;
  cursor: default;
}
._stat_117vf_558:last-child {
  border-right: 0;
}
._stat_117vf_558 strong {
  color: var(--clrTextPrimary);
  font-family: var(--font-accent);
  font-size: 1.15rem;
  font-weight: 800;
  line-height: 1.1;
}
._stat_117vf_558 span {
  color: var(--clrTextTertiary);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

button._stat_117vf_558 {
  cursor: pointer;
  transition: background 0.15s ease;
}
button._stat_117vf_558:hover {
  background: var(--clrTertiary);
}

._devChip_117vf_834 {
  padding: 2px 8px;
  border-radius: 999px;
  background: linear-gradient(135deg, #7c3aed, #a855f7);
  border: 1px solid color-mix(in srgb, #a855f7 60%, transparent);
  color: #fff;
  font-size: 0.66rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  flex-shrink: 0;
}

._teamTag_117vf_847 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: 3px 8px;
  border-radius: 6px;
  background: var(--clrTertiary);
  border: 1px solid var(--clrAccent-10);
  color: var(--clrTextPrimary);
  font-family: var(--font-accent);
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

._titlePill_117vf_865 {
  min-width: 0;
  padding: 6px 15px;
  border-radius: 999px;
  border: 2px solid color-mix(in srgb, var(--clrSecondary) 82%, transparent);
  color: var(--title-ink, #fff);
  font-family: var(--font-accent);
  font-weight: 800;
  font-size: 0.8rem;
  letter-spacing: 0.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.4);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
  background: radial-gradient(100% 120% at 50% 50%, color-mix(in srgb, var(--c5, transparent) 55%, transparent), transparent 60%), radial-gradient(120% 140% at 15% 0%, color-mix(in srgb, var(--c2) 70%, transparent), transparent 55%), radial-gradient(120% 140% at 85% 100%, color-mix(in srgb, var(--c3) 70%, transparent), transparent 55%), linear-gradient(115deg, var(--c1), var(--c2), var(--c3), var(--c4));
  background-size: 200% 200%, 200% 200%, 200% 200%, 300% 300%;
  animation: _titleFlow_117vf_1 9s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  ._titlePill_117vf_865 {
    animation: none;
  }
}

@keyframes _titleFlow_117vf_1 {
  0% {
    background-position: 50% 0%, 0% 0%, 100% 100%, 0% 50%;
  }
  50% {
    background-position: 50% 100%, 100% 50%, 0% 50%, 100% 50%;
  }
  100% {
    background-position: 50% 0%, 0% 0%, 100% 100%, 0% 50%;
  }
}
._bio_117vf_279 {
  width: 100%;
  max-width: 62ch;
  margin: 0;
  color: var(--clrTextSecondary);
  font-size: 0.95rem;
  line-height: 1.55;
  white-space: pre-wrap;
}

._primaryAction_117vf_911,
._secondaryAction_117vf_912 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 32px;
  padding: 0 14px;
  border-radius: 999px;
  background: transparent;
  border: 1px solid var(--clrAccent-20);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
._primaryAction_117vf_911:hover,
._secondaryAction_117vf_912:hover {
  background: var(--clrTertiary);
  border-color: var(--clrAccent-30);
  color: var(--clrTextPrimary);
}
._primaryAction_117vf_911 svg,
._secondaryAction_117vf_912 svg {
  width: 14px;
  height: 14px;
}

._primaryAction_117vf_911 {
  color: var(--clrTextPrimary);
}

._secondaryAction_117vf_912 {
  color: var(--clrTextSecondary);
}

._section_117vf_949 {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 12px;
  width: 100%;
}

._sectionTitle_117vf_958 {
  margin: 0;
  color: var(--clrTextSecondary);
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
}

._sectionHead_117vf_967 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
}

._sortToggle_117vf_976 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 5px 10px;
  color: var(--clrTextSecondary);
  font-size: 0.74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: transparent;
  border: 1px solid var(--clrAccent-10);
  border-radius: 999px;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease;
}
._sortToggle_117vf_976 svg {
  width: 14px;
  height: 14px;
}
._sortToggle_117vf_976:hover {
  color: var(--clrTextPrimary);
  border-color: var(--clrAccent-30);
}

._roundsDrawerBody_117vf_1003 {
  width: 100%;
  min-width: 0;
  padding: 4px 0 12px;
}

._liveNotice_117vf_1009 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 12px;
  padding: 9px 12px;
  border-radius: 6px;
  background: color-mix(in srgb, var(--liveGlow, var(--clrAccent-30)) 12%, transparent);
  border: 1px solid var(--liveGlowSoft, var(--clrAccent-30));
}

._liveNoticeDot_117vf_1023 {
  flex-shrink: 0;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--liveGlow, var(--clrTextPrimary));
  animation: _liveNoticePulse_117vf_1 1.6s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  ._liveNoticeDot_117vf_1023 {
    animation: none;
  }
}

@keyframes _liveNoticePulse_117vf_1 {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.35;
  }
}
._liveNoticeLabel_117vf_1045 {
  color: var(--clrTextPrimary);
  font-size: 0.7rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.07em;
}

._liveNoticeText_117vf_1053 {
  flex: 1;
  min-width: 160px;
  color: var(--clrTextSecondary);
  font-size: 0.8rem;
  line-height: 1.4;
}

._liveEmpty_117vf_1061 {
  margin: 8px 0 0;
  padding: 14px 0;
  color: var(--clrTextTertiary);
  font-size: 0.84rem;
  text-align: center;
}

._tournamentsGrid_117vf_1069 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: 12px;
}
@media (min-width: 720px) {
  ._tournamentsGrid_117vf_1069 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

._gridSkel_117vf_1081 {
  height: 282px;
  border-radius: 8px;
  background: linear-gradient(90deg, var(--clrTertiary) 25%, color-mix(in srgb, var(--clrTertiary) 60%, transparent) 37%, var(--clrTertiary) 63%);
  background-size: 400% 100%;
  animation: _shimmer_117vf_1 1.4s ease infinite;
}

._noTournaments_117vf_1089 {
  padding: 24px;
  text-align: center;
  color: var(--clrTextTertiary);
  font-size: 0.9rem;
}

._visitorCta_117vf_1096 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 14px;
  padding: 22px 16px;
  background: var(--clrSecondaryReverse);
  border: 1px solid var(--clrAccent-10);
  border-radius: 8px;
  text-align: center;
}
._visitorCta_117vf_1096 p {
  margin: 0;
  color: var(--clrTextSecondaryReverse);
  font-size: 0.92rem;
}
._visitorCta_117vf_1096 ._followBtn_117vf_301 {
  margin-top: 0;
  background: var(--clrTextPrimaryReverse);
  color: var(--clrSecondaryReverse);
}
._visitorCta_117vf_1096 ._signInLink_117vf_525 {
  color: var(--clrTextSecondaryReverse);
}
._visitorCta_117vf_1096 ._signInLink_117vf_525:hover {
  color: var(--clrTextPrimaryReverse);
}

._privateTag_117vf_1126 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 4px;
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--clrTertiary);
  border: 1px solid var(--clrAccent-10);
  color: var(--clrTextTertiary);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  vertical-align: middle;
}
._privateTag_117vf_1126 svg {
  width: 11px;
  height: 11px;
}

._iconAction_117vf_1149 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 0;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  background: transparent;
  border: 1px solid var(--clrAccent-20);
  color: var(--clrTextSecondary);
  cursor: pointer;
  transition: color 0.15s ease, background 0.15s ease;
}
._iconAction_117vf_1149 svg {
  width: 16px;
  height: 16px;
}
._iconAction_117vf_1149:hover {
  background: var(--clrTertiary);
  color: var(--clrTextPrimary);
}

._spectateBtn_117vf_1173 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex-shrink: 0;
  padding: 6px 12px;
  border-radius: 999px;
  background: transparent;
  border: 1px solid var(--liveGlowSoft, var(--clrAccent-30));
  color: var(--clrTextPrimary);
  font-size: 0.76rem;
  font-weight: 800;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
._spectateBtn_117vf_1173 svg {
  width: 14px;
  height: 14px;
}
._spectateBtn_117vf_1173:hover {
  border-color: var(--liveGlow, var(--clrAccent-30));
}
._spectateBtn_117vf_1173._spectateOn_117vf_1197 {
  background: color-mix(in srgb, var(--liveGlow, var(--clrAccent-30)) 22%, transparent);
  border-color: var(--liveGlow, var(--clrAccent-30));
}

._spectateHint_117vf_1202 {
  margin: 8px 0 0;
  color: var(--clrTextTertiary);
  font-size: 0.78rem;
  line-height: 1.4;
}

._sharesTail_117vf_1209 {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 12px 0;
  font-size: 13px;
  color: #a1a1aa;
}

._page_117vf_216 {
  box-sizing: border-box;
  width: 100%;
  max-width: var(--site-max-width, 1440px);
  margin-inline: auto;
  padding-inline: var(--site-gutter, 20px);
}html {
  color-scheme: dark;
}

html:has(body._themeLight_1l56w_5),
html:has(body._themePastelLight_1l56w_6) {
  color-scheme: light;
}

:root {
  --clrPrimary: #F4F4F5;
  --clrPrimary30: rgba(244, 244, 245, 0.3);
  --clrSecondary: #FEFEFE;
  --clrTertiary: #E4E4E7;
  --clrPrimaryReverse: #101418;
  --clrSecondaryReverse: #0A0F14;
  --clrTertiaryReverse: #212327;
  --clrTextPrimary: #101418;
  --clrTextSecondary: #2E3337;
  --clrTextTertiary: #7C7C7C;
  --clrTextPrimaryReverse: #F4F4F5;
  --clrTextSecondaryReverse: #CDCDCD;
  --clrTextTertiaryReverse: #8A8A8A;
  --clrError-100: #641f1f;
  --clrError-50: #c84d4d;
  --clrSuccess-100: #2d692d;
  --clrSuccess-50: #3EA03E;
  --clrSuccessOnTint: #0d260d;
  --clrErrorOnTint: #2e0a0a;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgb(50, 126, 75, 0.1) 30%,
          rgb(94, 178, 122, 0.36) 60%,
          rgb(144, 215, 168) 100%);
  --clrNavBackground: rgba(244, 244, 245, 0.15);
  --clrNavItemActive: rgba(211, 211, 211, 0.4);
  --clrNavItemHover: rgba(0, 0, 0, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #F4F4F5;
  --clrGlassBackground: rgba(255, 255, 255, 0.5);
  --clrGlassBackgroundStrong: rgba(255, 255, 255, 0.3);
  --clrGlassBorder: rgba(0, 0, 0, 0.1);
  --snackbarDefaultBg: #F1ECE9;
  --snackbarDefaultText: #5D605C;
  --snackbarDefaultBorder: #5D605C;
  --snackbarDefaultIcon: #5D605C;
  --snackbarSuccessBg: #E0F1D9;
  --snackbarSuccessText: #358935;
  --snackbarSuccessBorder: #358935;
  --snackbarSuccessIcon: #358935;
  --snackbarErrorBg: #F9E1DC;
  --snackbarErrorText: #C80D12;
  --snackbarErrorBorder: #C80D12;
  --snackbarErrorIcon: #C80D12;
}

._themeLight_1l56w_5 {
  --clrPrimary: #F4F4F5;
  --clrPrimary30: rgba(244, 244, 245, 0.3);
  --clrSecondary: #FEFEFE;
  --clrTertiary: #E4E4E7;
  --clrPrimaryReverse: #101418;
  --clrSecondaryReverse: #0A0F14;
  --clrTertiaryReverse: #212327;
  --clrTextPrimary: #101418;
  --clrTextSecondary: #2E3337;
  --clrTextTertiary: #7C7C7C;
  --clrTextPrimaryReverse: #F4F4F5;
  --clrTextSecondaryReverse: #CDCDCD;
  --clrTextTertiaryReverse: #8A8A8A;
  --clrError-100: #c03b3b;
  --clrError-50: #f6c5c5;
  --clrSuccess-100: #30d330;
  --clrSuccess-50: #bbffbb;
  --clrSuccessOnTint: #1f4f1f;
  --clrErrorOnTint: #7a1f1f;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgb(50, 126, 75, 0.1) 30%,
          rgb(94, 178, 122, 0.36) 60%,
          rgb(144, 215, 168) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(175, 49, 49, 0.1) 30%,
          rgba(238, 70, 70, 0.36) 60%,
          rgb(255, 173, 173) 100%);
  --clrNavBackground: rgba(244, 244, 245, 0.15);
  --clrNavItemActive: rgba(211, 211, 211, 0.4);
  --clrNavItemHover: rgba(0, 0, 0, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0000c1;
  --clrGlassBackground: rgba(255, 255, 255, 0.5);
  --clrGlassBackgroundStrong: rgba(255, 255, 255, 0.5);
  --clrGlassBorder: rgba(0, 0, 0, 0.1);
  --snackbarDefaultBg: #F1ECE9;
  --snackbarDefaultText: #5D605C;
  --snackbarDefaultBorder: #5D605C;
  --snackbarDefaultIcon: #5D605C;
  --snackbarSuccessBg: #E0F1D9;
  --snackbarSuccessText: #358935;
  --snackbarSuccessBorder: #358935;
  --snackbarSuccessIcon: #358935;
  --snackbarErrorBg: #F9E1DC;
  --snackbarErrorText: #C80D12;
  --snackbarErrorBorder: #C80D12;
  --snackbarErrorIcon: #C80D12;
}

._themeDark_1l56w_131 {
  --clrPrimary: #0F1418;
  --clrPrimary30: rgba(15, 20, 25, 0.3);
  --clrSecondary: #0A0F14;
  --clrTertiary: #212327;
  --clrPrimaryReverse: #F4F4F5;
  --clrSecondaryReverse: #FEFEFE;
  --clrTertiaryReverse: #E4E4E7;
  --clrTextPrimary: #F4F4F5;
  --clrTextSecondary: #CDCDCD;
  --clrTextTertiary: #8A8A8A;
  --clrTextPrimaryReverse: #101418;
  --clrTextSecondaryReverse: #2E3337;
  --clrTextTertiaryReverse: #7C7C7C;
  --clrError-100: #c84d4d;
  --clrError-50: #641f1f;
  --clrSuccess-100: #3EA03E;
  --clrSuccess-50: #2d692d;
  --clrSuccessOnTint: #d6ffd6;
  --clrErrorOnTint: #ffd6d6;
  --clrWarning-100: #E88434;
  --clrWarning-50: #C49168;
  --clrAccent-100: #FFFFFF;
  --clrAccent-80: rgba(255, 255, 255, 0.8);
  --clrAccent-60: rgba(255, 255, 255, 0.6);
  --clrAccent-50: rgba(255, 255, 255, 0.5);
  --clrAccent-40: rgba(255, 255, 255, 0.4);
  --clrAccent-30: rgba(255, 255, 255, 0.3);
  --clrAccent-20: rgba(255, 255, 255, 0.2);
  --clrAccent-10: rgba(255, 255, 255, 0.1);
  --clrGradient: linear-gradient(90deg, #262a2e 10%, var(--clrPrimary) 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(50, 126, 75, 0.15) 30%,
          rgba(50, 126, 75, 0.3) 60%,
          rgba(50, 126, 75, 0.5) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(167, 44, 44, 0) 0%,
          rgba(167, 44, 44, 0.15) 30%,
          rgba(167, 44, 44, 0.3) 60%,
          rgba(167, 44, 44, 0.5) 100%);
  --clrNavBackground: rgba(0, 0, 0, 0.15);
  --clrNavItemActive: rgba(24, 24, 24, 0.49);
  --clrNavItemHover: rgba(255, 255, 255, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0F1418;
  --clrGlassBackground: rgba(15, 20, 24, 0.5);
  --clrGlassBackgroundStrong: rgba(15, 20, 24, 0.6);
  --clrGlassBorder: rgba(255, 255, 255, 0.1);
  --snackbarDefaultBg: #414141;
  --snackbarDefaultText: #BABABA;
  --snackbarDefaultBorder: #BABABA;
  --snackbarDefaultIcon: #BABABA;
  --snackbarSuccessBg: #145E18;
  --snackbarSuccessText: #8FE094;
  --snackbarSuccessBorder: #8FE094;
  --snackbarSuccessIcon: #8FE094;
  --snackbarErrorBg: #910C09;
  --snackbarErrorText: #FE9E9D;
  --snackbarErrorBorder: #FE9E9D;
  --snackbarErrorIcon: #FE9E9D;
}

/* 

Note: 
    If you want something done quick, ask AI to buuild your color themes.
    If you want to do it right and tidy though, do it manually. 

    - Theo

*/
:root {
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --font-accent: "Jaro", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}

html,
body {
  font-family: var(--font-sans);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

._upgradeButton_1l56w_216 {
  width: 100%;
  padding: 16px;
  background: var(--clrAccent-100);
  border: 2px solid var(--clrAccent-100);
  border-radius: 8px;
  color: var(--clrPrimary);
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}
._upgradeButton_1l56w_216:hover:not(:disabled) {
  background: var(--clrAccent-100);
  border-color: var(--clrAccent-100);
  transform: translateY(-2px);
}
._upgradeButton_1l56w_216:active:not(:disabled) {
  transform: translateY(0);
}
._upgradeButton_1l56w_216:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

._buttonContent_1l56w_241 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

._label_1l56w_248 {
  font-size: 16px;
  font-weight: 600;
}

._description_1l56w_253 {
  font-size: 12px;
  opacity: 0.8;
  font-weight: 400;
}html {
  color-scheme: dark;
}

html:has(body._themeLight_1l56w_5),
html:has(body._themePastelLight_1l56w_6) {
  color-scheme: light;
}

:root {
  --clrPrimary: #F4F4F5;
  --clrPrimary30: rgba(244, 244, 245, 0.3);
  --clrSecondary: #FEFEFE;
  --clrTertiary: #E4E4E7;
  --clrPrimaryReverse: #101418;
  --clrSecondaryReverse: #0A0F14;
  --clrTertiaryReverse: #212327;
  --clrTextPrimary: #101418;
  --clrTextSecondary: #2E3337;
  --clrTextTertiary: #7C7C7C;
  --clrTextPrimaryReverse: #F4F4F5;
  --clrTextSecondaryReverse: #CDCDCD;
  --clrTextTertiaryReverse: #8A8A8A;
  --clrError-100: #641f1f;
  --clrError-50: #c84d4d;
  --clrSuccess-100: #2d692d;
  --clrSuccess-50: #3EA03E;
  --clrSuccessOnTint: #0d260d;
  --clrErrorOnTint: #2e0a0a;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgb(50, 126, 75, 0.1) 30%,
          rgb(94, 178, 122, 0.36) 60%,
          rgb(144, 215, 168) 100%);
  --clrNavBackground: rgba(244, 244, 245, 0.15);
  --clrNavItemActive: rgba(211, 211, 211, 0.4);
  --clrNavItemHover: rgba(0, 0, 0, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #F4F4F5;
  --clrGlassBackground: rgba(255, 255, 255, 0.5);
  --clrGlassBackgroundStrong: rgba(255, 255, 255, 0.3);
  --clrGlassBorder: rgba(0, 0, 0, 0.1);
  --snackbarDefaultBg: #F1ECE9;
  --snackbarDefaultText: #5D605C;
  --snackbarDefaultBorder: #5D605C;
  --snackbarDefaultIcon: #5D605C;
  --snackbarSuccessBg: #E0F1D9;
  --snackbarSuccessText: #358935;
  --snackbarSuccessBorder: #358935;
  --snackbarSuccessIcon: #358935;
  --snackbarErrorBg: #F9E1DC;
  --snackbarErrorText: #C80D12;
  --snackbarErrorBorder: #C80D12;
  --snackbarErrorIcon: #C80D12;
}

._themeLight_1l56w_5 {
  --clrPrimary: #F4F4F5;
  --clrPrimary30: rgba(244, 244, 245, 0.3);
  --clrSecondary: #FEFEFE;
  --clrTertiary: #E4E4E7;
  --clrPrimaryReverse: #101418;
  --clrSecondaryReverse: #0A0F14;
  --clrTertiaryReverse: #212327;
  --clrTextPrimary: #101418;
  --clrTextSecondary: #2E3337;
  --clrTextTertiary: #7C7C7C;
  --clrTextPrimaryReverse: #F4F4F5;
  --clrTextSecondaryReverse: #CDCDCD;
  --clrTextTertiaryReverse: #8A8A8A;
  --clrError-100: #c03b3b;
  --clrError-50: #f6c5c5;
  --clrSuccess-100: #30d330;
  --clrSuccess-50: #bbffbb;
  --clrSuccessOnTint: #1f4f1f;
  --clrErrorOnTint: #7a1f1f;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgb(50, 126, 75, 0.1) 30%,
          rgb(94, 178, 122, 0.36) 60%,
          rgb(144, 215, 168) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(175, 49, 49, 0.1) 30%,
          rgba(238, 70, 70, 0.36) 60%,
          rgb(255, 173, 173) 100%);
  --clrNavBackground: rgba(244, 244, 245, 0.15);
  --clrNavItemActive: rgba(211, 211, 211, 0.4);
  --clrNavItemHover: rgba(0, 0, 0, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0000c1;
  --clrGlassBackground: rgba(255, 255, 255, 0.5);
  --clrGlassBackgroundStrong: rgba(255, 255, 255, 0.5);
  --clrGlassBorder: rgba(0, 0, 0, 0.1);
  --snackbarDefaultBg: #F1ECE9;
  --snackbarDefaultText: #5D605C;
  --snackbarDefaultBorder: #5D605C;
  --snackbarDefaultIcon: #5D605C;
  --snackbarSuccessBg: #E0F1D9;
  --snackbarSuccessText: #358935;
  --snackbarSuccessBorder: #358935;
  --snackbarSuccessIcon: #358935;
  --snackbarErrorBg: #F9E1DC;
  --snackbarErrorText: #C80D12;
  --snackbarErrorBorder: #C80D12;
  --snackbarErrorIcon: #C80D12;
}

._themeDark_1l56w_131 {
  --clrPrimary: #0F1418;
  --clrPrimary30: rgba(15, 20, 25, 0.3);
  --clrSecondary: #0A0F14;
  --clrTertiary: #212327;
  --clrPrimaryReverse: #F4F4F5;
  --clrSecondaryReverse: #FEFEFE;
  --clrTertiaryReverse: #E4E4E7;
  --clrTextPrimary: #F4F4F5;
  --clrTextSecondary: #CDCDCD;
  --clrTextTertiary: #8A8A8A;
  --clrTextPrimaryReverse: #101418;
  --clrTextSecondaryReverse: #2E3337;
  --clrTextTertiaryReverse: #7C7C7C;
  --clrError-100: #c84d4d;
  --clrError-50: #641f1f;
  --clrSuccess-100: #3EA03E;
  --clrSuccess-50: #2d692d;
  --clrSuccessOnTint: #d6ffd6;
  --clrErrorOnTint: #ffd6d6;
  --clrWarning-100: #E88434;
  --clrWarning-50: #C49168;
  --clrAccent-100: #FFFFFF;
  --clrAccent-80: rgba(255, 255, 255, 0.8);
  --clrAccent-60: rgba(255, 255, 255, 0.6);
  --clrAccent-50: rgba(255, 255, 255, 0.5);
  --clrAccent-40: rgba(255, 255, 255, 0.4);
  --clrAccent-30: rgba(255, 255, 255, 0.3);
  --clrAccent-20: rgba(255, 255, 255, 0.2);
  --clrAccent-10: rgba(255, 255, 255, 0.1);
  --clrGradient: linear-gradient(90deg, #262a2e 10%, var(--clrPrimary) 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(50, 126, 75, 0.15) 30%,
          rgba(50, 126, 75, 0.3) 60%,
          rgba(50, 126, 75, 0.5) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(167, 44, 44, 0) 0%,
          rgba(167, 44, 44, 0.15) 30%,
          rgba(167, 44, 44, 0.3) 60%,
          rgba(167, 44, 44, 0.5) 100%);
  --clrNavBackground: rgba(0, 0, 0, 0.15);
  --clrNavItemActive: rgba(24, 24, 24, 0.49);
  --clrNavItemHover: rgba(255, 255, 255, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0F1418;
  --clrGlassBackground: rgba(15, 20, 24, 0.5);
  --clrGlassBackgroundStrong: rgba(15, 20, 24, 0.6);
  --clrGlassBorder: rgba(255, 255, 255, 0.1);
  --snackbarDefaultBg: #414141;
  --snackbarDefaultText: #BABABA;
  --snackbarDefaultBorder: #BABABA;
  --snackbarDefaultIcon: #BABABA;
  --snackbarSuccessBg: #145E18;
  --snackbarSuccessText: #8FE094;
  --snackbarSuccessBorder: #8FE094;
  --snackbarSuccessIcon: #8FE094;
  --snackbarErrorBg: #910C09;
  --snackbarErrorText: #FE9E9D;
  --snackbarErrorBorder: #FE9E9D;
  --snackbarErrorIcon: #FE9E9D;
}

/* 

Note: 
    If you want something done quick, ask AI to buuild your color themes.
    If you want to do it right and tidy though, do it manually. 

    - Theo

*/
:root {
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --font-accent: "Jaro", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}

html,
body {
  font-family: var(--font-sans);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

._upgradeButton_1l56w_216 {
  width: 100%;
  padding: 16px;
  background: var(--clrAccent-100);
  border: 2px solid var(--clrAccent-100);
  border-radius: 8px;
  color: var(--clrPrimary);
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}
._upgradeButton_1l56w_216:hover:not(:disabled) {
  background: var(--clrAccent-100);
  border-color: var(--clrAccent-100);
  transform: translateY(-2px);
}
._upgradeButton_1l56w_216:active:not(:disabled) {
  transform: translateY(0);
}
._upgradeButton_1l56w_216:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

._buttonContent_1l56w_241 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

._label_1l56w_248 {
  font-size: 16px;
  font-weight: 600;
}

._description_1l56w_253 {
  font-size: 12px;
  opacity: 0.8;
  font-weight: 400;
}html {
  color-scheme: dark;
}

html:has(body._themeLight_1lvdo_5),
html:has(body._themePastelLight_1lvdo_6) {
  color-scheme: light;
}

:root {
  --clrPrimary: #F4F4F5;
  --clrPrimary30: rgba(244, 244, 245, 0.3);
  --clrSecondary: #FEFEFE;
  --clrTertiary: #E4E4E7;
  --clrPrimaryReverse: #101418;
  --clrSecondaryReverse: #0A0F14;
  --clrTertiaryReverse: #212327;
  --clrTextPrimary: #101418;
  --clrTextSecondary: #2E3337;
  --clrTextTertiary: #7C7C7C;
  --clrTextPrimaryReverse: #F4F4F5;
  --clrTextSecondaryReverse: #CDCDCD;
  --clrTextTertiaryReverse: #8A8A8A;
  --clrError-100: #641f1f;
  --clrError-50: #c84d4d;
  --clrSuccess-100: #2d692d;
  --clrSuccess-50: #3EA03E;
  --clrSuccessOnTint: #0d260d;
  --clrErrorOnTint: #2e0a0a;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgb(50, 126, 75, 0.1) 30%,
          rgb(94, 178, 122, 0.36) 60%,
          rgb(144, 215, 168) 100%);
  --clrNavBackground: rgba(244, 244, 245, 0.15);
  --clrNavItemActive: rgba(211, 211, 211, 0.4);
  --clrNavItemHover: rgba(0, 0, 0, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #F4F4F5;
  --clrGlassBackground: rgba(255, 255, 255, 0.5);
  --clrGlassBackgroundStrong: rgba(255, 255, 255, 0.3);
  --clrGlassBorder: rgba(0, 0, 0, 0.1);
  --snackbarDefaultBg: #F1ECE9;
  --snackbarDefaultText: #5D605C;
  --snackbarDefaultBorder: #5D605C;
  --snackbarDefaultIcon: #5D605C;
  --snackbarSuccessBg: #E0F1D9;
  --snackbarSuccessText: #358935;
  --snackbarSuccessBorder: #358935;
  --snackbarSuccessIcon: #358935;
  --snackbarErrorBg: #F9E1DC;
  --snackbarErrorText: #C80D12;
  --snackbarErrorBorder: #C80D12;
  --snackbarErrorIcon: #C80D12;
}

._themeLight_1lvdo_5 {
  --clrPrimary: #F4F4F5;
  --clrPrimary30: rgba(244, 244, 245, 0.3);
  --clrSecondary: #FEFEFE;
  --clrTertiary: #E4E4E7;
  --clrPrimaryReverse: #101418;
  --clrSecondaryReverse: #0A0F14;
  --clrTertiaryReverse: #212327;
  --clrTextPrimary: #101418;
  --clrTextSecondary: #2E3337;
  --clrTextTertiary: #7C7C7C;
  --clrTextPrimaryReverse: #F4F4F5;
  --clrTextSecondaryReverse: #CDCDCD;
  --clrTextTertiaryReverse: #8A8A8A;
  --clrError-100: #c03b3b;
  --clrError-50: #f6c5c5;
  --clrSuccess-100: #30d330;
  --clrSuccess-50: #bbffbb;
  --clrSuccessOnTint: #1f4f1f;
  --clrErrorOnTint: #7a1f1f;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgb(50, 126, 75, 0.1) 30%,
          rgb(94, 178, 122, 0.36) 60%,
          rgb(144, 215, 168) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(175, 49, 49, 0.1) 30%,
          rgba(238, 70, 70, 0.36) 60%,
          rgb(255, 173, 173) 100%);
  --clrNavBackground: rgba(244, 244, 245, 0.15);
  --clrNavItemActive: rgba(211, 211, 211, 0.4);
  --clrNavItemHover: rgba(0, 0, 0, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0000c1;
  --clrGlassBackground: rgba(255, 255, 255, 0.5);
  --clrGlassBackgroundStrong: rgba(255, 255, 255, 0.5);
  --clrGlassBorder: rgba(0, 0, 0, 0.1);
  --snackbarDefaultBg: #F1ECE9;
  --snackbarDefaultText: #5D605C;
  --snackbarDefaultBorder: #5D605C;
  --snackbarDefaultIcon: #5D605C;
  --snackbarSuccessBg: #E0F1D9;
  --snackbarSuccessText: #358935;
  --snackbarSuccessBorder: #358935;
  --snackbarSuccessIcon: #358935;
  --snackbarErrorBg: #F9E1DC;
  --snackbarErrorText: #C80D12;
  --snackbarErrorBorder: #C80D12;
  --snackbarErrorIcon: #C80D12;
}

._themeDark_1lvdo_131 {
  --clrPrimary: #0F1418;
  --clrPrimary30: rgba(15, 20, 25, 0.3);
  --clrSecondary: #0A0F14;
  --clrTertiary: #212327;
  --clrPrimaryReverse: #F4F4F5;
  --clrSecondaryReverse: #FEFEFE;
  --clrTertiaryReverse: #E4E4E7;
  --clrTextPrimary: #F4F4F5;
  --clrTextSecondary: #CDCDCD;
  --clrTextTertiary: #8A8A8A;
  --clrTextPrimaryReverse: #101418;
  --clrTextSecondaryReverse: #2E3337;
  --clrTextTertiaryReverse: #7C7C7C;
  --clrError-100: #c84d4d;
  --clrError-50: #641f1f;
  --clrSuccess-100: #3EA03E;
  --clrSuccess-50: #2d692d;
  --clrSuccessOnTint: #d6ffd6;
  --clrErrorOnTint: #ffd6d6;
  --clrWarning-100: #E88434;
  --clrWarning-50: #C49168;
  --clrAccent-100: #FFFFFF;
  --clrAccent-80: rgba(255, 255, 255, 0.8);
  --clrAccent-60: rgba(255, 255, 255, 0.6);
  --clrAccent-50: rgba(255, 255, 255, 0.5);
  --clrAccent-40: rgba(255, 255, 255, 0.4);
  --clrAccent-30: rgba(255, 255, 255, 0.3);
  --clrAccent-20: rgba(255, 255, 255, 0.2);
  --clrAccent-10: rgba(255, 255, 255, 0.1);
  --clrGradient: linear-gradient(90deg, #262a2e 10%, var(--clrPrimary) 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(50, 126, 75, 0.15) 30%,
          rgba(50, 126, 75, 0.3) 60%,
          rgba(50, 126, 75, 0.5) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(167, 44, 44, 0) 0%,
          rgba(167, 44, 44, 0.15) 30%,
          rgba(167, 44, 44, 0.3) 60%,
          rgba(167, 44, 44, 0.5) 100%);
  --clrNavBackground: rgba(0, 0, 0, 0.15);
  --clrNavItemActive: rgba(24, 24, 24, 0.49);
  --clrNavItemHover: rgba(255, 255, 255, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0F1418;
  --clrGlassBackground: rgba(15, 20, 24, 0.5);
  --clrGlassBackgroundStrong: rgba(15, 20, 24, 0.6);
  --clrGlassBorder: rgba(255, 255, 255, 0.1);
  --snackbarDefaultBg: #414141;
  --snackbarDefaultText: #BABABA;
  --snackbarDefaultBorder: #BABABA;
  --snackbarDefaultIcon: #BABABA;
  --snackbarSuccessBg: #145E18;
  --snackbarSuccessText: #8FE094;
  --snackbarSuccessBorder: #8FE094;
  --snackbarSuccessIcon: #8FE094;
  --snackbarErrorBg: #910C09;
  --snackbarErrorText: #FE9E9D;
  --snackbarErrorBorder: #FE9E9D;
  --snackbarErrorIcon: #FE9E9D;
}

/* 

Note: 
    If you want something done quick, ask AI to buuild your color themes.
    If you want to do it right and tidy though, do it manually. 

    - Theo

*/
:root {
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --font-accent: "Jaro", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}

html,
body {
  font-family: var(--font-sans);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

._premiumSection_1lvdo_216 {
  width: 100%;
  margin: 0 auto;
  padding: 16px;
}
._premiumSection_1lvdo_216 ._premiumCard_1lvdo_221 {
  background: linear-gradient(135deg, var(--clrSecondary) 0%, rgba(var(--clrSecondary-rgb), 0.8) 100%);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 24px;
  position: relative;
}
._premiumSection_1lvdo_216 ._premiumCard_1lvdo_221 ._premiumHeader_1lvdo_231 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 16px;
  background: linear-gradient(135deg, rgba(255, 215, 0, 0.15) 0%, rgba(255, 215, 0, 0.05) 100%);
  border-radius: 4px;
  border: 2px solid rgba(255, 215, 0, 0.3);
}
._premiumSection_1lvdo_216 ._premiumCard_1lvdo_221 ._premiumHeader_1lvdo_231 ._starIcon_1lvdo_242 {
  font-size: 32px;
  color: #ffd700;
  filter: drop-shadow(0 0 8px rgba(255, 215, 0, 0.6));
}
._premiumSection_1lvdo_216 ._premiumCard_1lvdo_221 ._premiumHeader_1lvdo_231 ._premiumTitle_1lvdo_247 {
  font-size: 18px;
  font-weight: 700;
  color: var(--clrAccent-100);
  margin: 0;
}
._premiumSection_1lvdo_216 ._premiumCard_1lvdo_221 ._premiumBanner_1lvdo_253 {
  margin: 12px 0;
  max-width: 350px;
}
._premiumSection_1lvdo_216 ._premiumCard_1lvdo_221 ._premiumBanner_1lvdo_253 img {
  width: 100%;
  height: 100%;
}
._premiumSection_1lvdo_216 ._premiumCard_1lvdo_221 ._premiumDescription_1lvdo_261 {
  color: var(--clrAccent-80);
  font-size: 15px;
  line-height: 1.6;
  text-align: center;
  margin: 0;
}
._premiumSection_1lvdo_216 ._premiumCard_1lvdo_221 ._cardHeader_1lvdo_268 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  text-align: center;
}
._premiumSection_1lvdo_216 ._premiumCard_1lvdo_221 ._cardHeader_1lvdo_268 ._starIconGold_1lvdo_276 {
  font-size: 48px;
  color: #ffd700;
  filter: drop-shadow(0 0 12px rgba(255, 215, 0, 0.6));
  animation: _pulse_1lvdo_1 2s ease-in-out infinite;
}
._premiumSection_1lvdo_216 ._premiumCard_1lvdo_221 ._cardHeader_1lvdo_268 ._cardTitle_1lvdo_282 {
  font-size: 28px;
  font-weight: 700;
  color: var(--clrAccent-100);
  margin: 0;
  line-height: 1.2;
}
._premiumSection_1lvdo_216 ._premiumCard_1lvdo_221 ._featureList_1lvdo_289 {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 16px;
  margin: 0 auto;
}
._premiumSection_1lvdo_216 ._premiumCard_1lvdo_221 ._featureList_1lvdo_289 li {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  color: var(--clrAccent-80);
  font-size: 16px;
  padding: 12px 16px;
  background: var(--clrBackground-100);
  border-radius: 4px;
  border-left: 3px solid var(--clrTertiary);
  transition: all 0.2s ease;
}
._premiumSection_1lvdo_216 ._premiumCard_1lvdo_221 ._featureList_1lvdo_289 li:hover {
  transform: translateX(4px);
  border-left-color: #ffd700;
  background: var(--clrBackground-200);
}
._premiumSection_1lvdo_216 ._premiumCard_1lvdo_221 ._featureList_1lvdo_289 li ._checkmark_1lvdo_319 {
  font-weight: 700;
  color: #ffd700;
  font-size: 20px;
  flex-shrink: 0;
}
._premiumSection_1lvdo_216 ._premiumCard_1lvdo_221 ._featureList_1lvdo_289 li span:last-child {
  font-weight: 500;
}
._premiumSection_1lvdo_216 ._premiumCard_1lvdo_221 ._priceSection_1lvdo_328 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 4px;
  background: linear-gradient(135deg, var(--clrTertiary-20) 0%, var(--clrTertiary-10) 100%);
  border-radius: 4px;
  border: 1px solid var(--clrTertiary-40);
}
._premiumSection_1lvdo_216 ._premiumCard_1lvdo_221 ._priceSection_1lvdo_328 ._priceLabel_1lvdo_339 {
  font-size: 14px;
  color: var(--clrAccent-60);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
._premiumSection_1lvdo_216 ._premiumCard_1lvdo_221 ._priceSection_1lvdo_328 ._price_1lvdo_328 {
  font-size: 26px;
  font-weight: 700;
  color: var(--clrAccent-100);
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
._premiumSection_1lvdo_216 ._premiumCard_1lvdo_221 ._successMessage_1lvdo_352 {
  background-color: rgba(34, 197, 94, 0.15);
  border: 1px solid rgba(34, 197, 94, 0.4);
  color: #86efac;
  padding: 12px 16px;
  border-radius: 4px;
  font-size: 14px;
  text-align: center;
  font-weight: 500;
}
._premiumSection_1lvdo_216 ._premiumCard_1lvdo_221 ._errorMessage_1lvdo_362 {
  background-color: rgba(220, 38, 38, 0.15);
  border: 1px solid rgba(220, 38, 38, 0.4);
  color: #fca5a5;
  padding: 12px 16px;
  border-radius: 4px;
  font-size: 14px;
  text-align: center;
}
._premiumSection_1lvdo_216 ._premiumCard_1lvdo_221 ._paymentButtonContainer_1lvdo_371 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  width: 100%;
}
._premiumSection_1lvdo_216 ._premiumCard_1lvdo_221 ._subscriptionManagement_1lvdo_379 {
  margin-top: 16px;
  width: 100%;
}
._premiumSection_1lvdo_216 ._premiumCard_1lvdo_221 ._subscriptionInfo_1lvdo_383 {
  color: var(--clrAccent-60);
  font-size: 14px;
  text-align: center;
  margin: 16px 0;
  padding: 12px 16px;
  background: var(--clrAccent-10);
  border-radius: 8px;
}
._premiumSection_1lvdo_216 ._premiumCard_1lvdo_221 ._subscriptionInfo_1lvdo_383 ._statusActive_1lvdo_392 {
  color: var(--clrSuccess-100);
  font-weight: 500;
  margin: 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
._premiumSection_1lvdo_216 ._premiumCard_1lvdo_221 ._subscriptionInfo_1lvdo_383 ._statusActive_1lvdo_392 svg {
  color: green;
  font-size: 16px;
}
._premiumSection_1lvdo_216 ._premiumCard_1lvdo_221 ._subscriptionInfo_1lvdo_383 ._statusCanceled_1lvdo_406 {
  color: var(--clrWarning);
  font-weight: 500;
  margin: 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
._premiumSection_1lvdo_216 ._premiumCard_1lvdo_221 ._subscriptionInfo_1lvdo_383 ._statusCanceled_1lvdo_406 svg {
  color: red;
  font-size: 16px;
}
._premiumSection_1lvdo_216 ._premiumCard_1lvdo_221 ._pricingOptions_1lvdo_420 {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 24px;
  width: 100%;
}
@media (min-width: 768px) {
  ._premiumSection_1lvdo_216 ._premiumCard_1lvdo_221 ._pricingOptions_1lvdo_420 {
    flex-direction: row;
    gap: 32px;
  }
}
._premiumSection_1lvdo_216 ._premiumCard_1lvdo_221 ._pricingCard_1lvdo_434 {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: space-between;
  gap: 24px;
  padding: 32px 24px;
  background: var(--clrSecondary);
  border: 2px solid var(--clrAccent-30);
  border-radius: 16px;
  transition: all 0.3s ease;
  position: relative;
}
._premiumSection_1lvdo_216 ._premiumCard_1lvdo_221 ._pricingCard_1lvdo_434:hover {
  transform: translateY(-4px);
  border-color: var(--clrAccent-50);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}
._premiumSection_1lvdo_216 ._premiumCard_1lvdo_221 ._pricingCard_1lvdo_434 ._cardContent_1lvdo_453 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 4px;
  text-align: center;
}
._premiumSection_1lvdo_216 ._premiumCard_1lvdo_221 ._pricingCard_1lvdo_434 ._pricingTitle_1lvdo_461 {
  font-size: 20px;
  font-weight: 600;
  color: var(--clrAccent-100);
  margin: 0;
}
._premiumSection_1lvdo_216 ._premiumCard_1lvdo_221 ._pricingCard_1lvdo_434 ._priceSection_1lvdo_328 {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  justify-content: center;
  gap: 4px;
  margin: 8px 0;
}
._premiumSection_1lvdo_216 ._premiumCard_1lvdo_221 ._pricingCard_1lvdo_434 ._priceSection_1lvdo_328 ._price_1lvdo_328 {
  font-size: 36px;
  font-weight: 700;
  color: var(--clrAccent-100);
}
._premiumSection_1lvdo_216 ._premiumCard_1lvdo_221 ._pricingCard_1lvdo_434 ._priceSection_1lvdo_328 ._priceLabel_1lvdo_339 {
  font-size: 16px;
  color: var(--clrAccent-60);
  font-weight: 500;
}
._premiumSection_1lvdo_216 ._premiumCard_1lvdo_221 ._pricingCard_1lvdo_434 ._spacer_1lvdo_485 {
  height: 20px;
}
._premiumSection_1lvdo_216 ._premiumCard_1lvdo_221 ._pricingCard_1lvdo_434 ._savings_1lvdo_488 {
  font-size: 14px;
  color: #ffd700;
  font-weight: 600;
  margin: 0;
}
._premiumSection_1lvdo_216 ._premiumCard_1lvdo_221 ._pricingCard_1lvdo_434._recommended_1lvdo_494 {
  border: 3px solid #ffd700;
  background: linear-gradient(135deg, var(--clrSecondary) 0%, rgba(255, 215, 0, 0.05) 100%);
  box-shadow: 0 4px 16px rgba(255, 215, 0, 0.2);
}
._premiumSection_1lvdo_216 ._premiumCard_1lvdo_221 ._pricingCard_1lvdo_434._recommended_1lvdo_494:hover {
  box-shadow: 0 8px 32px rgba(255, 215, 0, 0.3);
  border-color: #ffd700;
}
._premiumSection_1lvdo_216 ._premiumCard_1lvdo_221 ._pricingCard_1lvdo_434._recommended_1lvdo_494 ._recommendedBadge_1lvdo_503 {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, #ffd700 0%, #ffed4e 100%);
  color: var(--clrPrimary);
  padding: 6px 16px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  box-shadow: 0 2px 8px rgba(255, 215, 0, 0.4);
}
._premiumSection_1lvdo_216 ._premiumCard_1lvdo_221 ._pricingCard_1lvdo_434._recommended_1lvdo_494 ._pricingTitle_1lvdo_461 {
  color: #ffd700;
}
._premiumSection_1lvdo_216 ._premiumCard_1lvdo_221 ._troubleshootSection_1lvdo_521 {
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid var(--clrAccent-20);
  text-align: center;
}
._premiumSection_1lvdo_216 ._premiumCard_1lvdo_221 ._troubleshootSection_1lvdo_521 ._troubleshootText_1lvdo_527 {
  color: var(--clrAccent-60);
  font-size: 14px;
  margin: 0;
}
._premiumSection_1lvdo_216 ._premiumCard_1lvdo_221 ._troubleshootSection_1lvdo_521 ._troubleshootText_1lvdo_527 ._troubleshootButton_1lvdo_532 {
  background: none;
  border: none;
  color: var(--clrAccent-80);
  text-decoration: underline;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  transition: color 0.2s ease;
  padding: 0;
}
._premiumSection_1lvdo_216 ._premiumCard_1lvdo_221 ._troubleshootSection_1lvdo_521 ._troubleshootText_1lvdo_527 ._troubleshootButton_1lvdo_532:hover {
  color: #ffd700;
}
._premiumSection_1lvdo_216 ._premiumCard_1lvdo_221 ._troubleshootSection_1lvdo_521 ._troubleshootText_1lvdo_527 ._troubleshootButton_1lvdo_532:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}html {
  color-scheme: dark;
}

html:has(body._themeLight_pk0zs_5),
html:has(body._themePastelLight_pk0zs_6) {
  color-scheme: light;
}

:root {
  --clrPrimary: #F4F4F5;
  --clrPrimary30: rgba(244, 244, 245, 0.3);
  --clrSecondary: #FEFEFE;
  --clrTertiary: #E4E4E7;
  --clrPrimaryReverse: #101418;
  --clrSecondaryReverse: #0A0F14;
  --clrTertiaryReverse: #212327;
  --clrTextPrimary: #101418;
  --clrTextSecondary: #2E3337;
  --clrTextTertiary: #7C7C7C;
  --clrTextPrimaryReverse: #F4F4F5;
  --clrTextSecondaryReverse: #CDCDCD;
  --clrTextTertiaryReverse: #8A8A8A;
  --clrError-100: #641f1f;
  --clrError-50: #c84d4d;
  --clrSuccess-100: #2d692d;
  --clrSuccess-50: #3EA03E;
  --clrSuccessOnTint: #0d260d;
  --clrErrorOnTint: #2e0a0a;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgb(50, 126, 75, 0.1) 30%,
          rgb(94, 178, 122, 0.36) 60%,
          rgb(144, 215, 168) 100%);
  --clrNavBackground: rgba(244, 244, 245, 0.15);
  --clrNavItemActive: rgba(211, 211, 211, 0.4);
  --clrNavItemHover: rgba(0, 0, 0, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #F4F4F5;
  --clrGlassBackground: rgba(255, 255, 255, 0.5);
  --clrGlassBackgroundStrong: rgba(255, 255, 255, 0.3);
  --clrGlassBorder: rgba(0, 0, 0, 0.1);
  --snackbarDefaultBg: #F1ECE9;
  --snackbarDefaultText: #5D605C;
  --snackbarDefaultBorder: #5D605C;
  --snackbarDefaultIcon: #5D605C;
  --snackbarSuccessBg: #E0F1D9;
  --snackbarSuccessText: #358935;
  --snackbarSuccessBorder: #358935;
  --snackbarSuccessIcon: #358935;
  --snackbarErrorBg: #F9E1DC;
  --snackbarErrorText: #C80D12;
  --snackbarErrorBorder: #C80D12;
  --snackbarErrorIcon: #C80D12;
}

._themeLight_pk0zs_5 {
  --clrPrimary: #F4F4F5;
  --clrPrimary30: rgba(244, 244, 245, 0.3);
  --clrSecondary: #FEFEFE;
  --clrTertiary: #E4E4E7;
  --clrPrimaryReverse: #101418;
  --clrSecondaryReverse: #0A0F14;
  --clrTertiaryReverse: #212327;
  --clrTextPrimary: #101418;
  --clrTextSecondary: #2E3337;
  --clrTextTertiary: #7C7C7C;
  --clrTextPrimaryReverse: #F4F4F5;
  --clrTextSecondaryReverse: #CDCDCD;
  --clrTextTertiaryReverse: #8A8A8A;
  --clrError-100: #c03b3b;
  --clrError-50: #f6c5c5;
  --clrSuccess-100: #30d330;
  --clrSuccess-50: #bbffbb;
  --clrSuccessOnTint: #1f4f1f;
  --clrErrorOnTint: #7a1f1f;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgb(50, 126, 75, 0.1) 30%,
          rgb(94, 178, 122, 0.36) 60%,
          rgb(144, 215, 168) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(175, 49, 49, 0.1) 30%,
          rgba(238, 70, 70, 0.36) 60%,
          rgb(255, 173, 173) 100%);
  --clrNavBackground: rgba(244, 244, 245, 0.15);
  --clrNavItemActive: rgba(211, 211, 211, 0.4);
  --clrNavItemHover: rgba(0, 0, 0, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0000c1;
  --clrGlassBackground: rgba(255, 255, 255, 0.5);
  --clrGlassBackgroundStrong: rgba(255, 255, 255, 0.5);
  --clrGlassBorder: rgba(0, 0, 0, 0.1);
  --snackbarDefaultBg: #F1ECE9;
  --snackbarDefaultText: #5D605C;
  --snackbarDefaultBorder: #5D605C;
  --snackbarDefaultIcon: #5D605C;
  --snackbarSuccessBg: #E0F1D9;
  --snackbarSuccessText: #358935;
  --snackbarSuccessBorder: #358935;
  --snackbarSuccessIcon: #358935;
  --snackbarErrorBg: #F9E1DC;
  --snackbarErrorText: #C80D12;
  --snackbarErrorBorder: #C80D12;
  --snackbarErrorIcon: #C80D12;
}

._themeDark_pk0zs_131 {
  --clrPrimary: #0F1418;
  --clrPrimary30: rgba(15, 20, 25, 0.3);
  --clrSecondary: #0A0F14;
  --clrTertiary: #212327;
  --clrPrimaryReverse: #F4F4F5;
  --clrSecondaryReverse: #FEFEFE;
  --clrTertiaryReverse: #E4E4E7;
  --clrTextPrimary: #F4F4F5;
  --clrTextSecondary: #CDCDCD;
  --clrTextTertiary: #8A8A8A;
  --clrTextPrimaryReverse: #101418;
  --clrTextSecondaryReverse: #2E3337;
  --clrTextTertiaryReverse: #7C7C7C;
  --clrError-100: #c84d4d;
  --clrError-50: #641f1f;
  --clrSuccess-100: #3EA03E;
  --clrSuccess-50: #2d692d;
  --clrSuccessOnTint: #d6ffd6;
  --clrErrorOnTint: #ffd6d6;
  --clrWarning-100: #E88434;
  --clrWarning-50: #C49168;
  --clrAccent-100: #FFFFFF;
  --clrAccent-80: rgba(255, 255, 255, 0.8);
  --clrAccent-60: rgba(255, 255, 255, 0.6);
  --clrAccent-50: rgba(255, 255, 255, 0.5);
  --clrAccent-40: rgba(255, 255, 255, 0.4);
  --clrAccent-30: rgba(255, 255, 255, 0.3);
  --clrAccent-20: rgba(255, 255, 255, 0.2);
  --clrAccent-10: rgba(255, 255, 255, 0.1);
  --clrGradient: linear-gradient(90deg, #262a2e 10%, var(--clrPrimary) 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(50, 126, 75, 0.15) 30%,
          rgba(50, 126, 75, 0.3) 60%,
          rgba(50, 126, 75, 0.5) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(167, 44, 44, 0) 0%,
          rgba(167, 44, 44, 0.15) 30%,
          rgba(167, 44, 44, 0.3) 60%,
          rgba(167, 44, 44, 0.5) 100%);
  --clrNavBackground: rgba(0, 0, 0, 0.15);
  --clrNavItemActive: rgba(24, 24, 24, 0.49);
  --clrNavItemHover: rgba(255, 255, 255, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0F1418;
  --clrGlassBackground: rgba(15, 20, 24, 0.5);
  --clrGlassBackgroundStrong: rgba(15, 20, 24, 0.6);
  --clrGlassBorder: rgba(255, 255, 255, 0.1);
  --snackbarDefaultBg: #414141;
  --snackbarDefaultText: #BABABA;
  --snackbarDefaultBorder: #BABABA;
  --snackbarDefaultIcon: #BABABA;
  --snackbarSuccessBg: #145E18;
  --snackbarSuccessText: #8FE094;
  --snackbarSuccessBorder: #8FE094;
  --snackbarSuccessIcon: #8FE094;
  --snackbarErrorBg: #910C09;
  --snackbarErrorText: #FE9E9D;
  --snackbarErrorBorder: #FE9E9D;
  --snackbarErrorIcon: #FE9E9D;
}

/* 

Note: 
    If you want something done quick, ask AI to buuild your color themes.
    If you want to do it right and tidy though, do it manually. 

    - Theo

*/
:root {
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --font-accent: "Jaro", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}

html,
body {
  font-family: var(--font-sans);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

._container_pk0zs_216 {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

._manageButton_pk0zs_222 {
  padding: 10px 20px;
  margin: 0;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 4px;
  color: var(--clrAccent-100);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  max-width: 200px;
  min-width: fit-content;
  white-space: nowrap;
}
._manageButton_pk0zs_222:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.3);
}
._manageButton_pk0zs_222:active:not(:disabled) {
  transform: scale(0.98);
}
._manageButton_pk0zs_222:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

._activeButton_pk0zs_249 {
  background: rgba(0, 255, 0, 0.15);
  border-color: rgba(0, 255, 0, 0.4);
  color: #10b981;
}
._activeButton_pk0zs_249:hover:not(:disabled) {
  background: rgba(0, 255, 0, 0.25);
  border-color: rgba(0, 255, 0, 0.6);
}

._canceledButton_pk0zs_259 {
  background: rgba(255, 200, 0, 0.15);
  border-color: rgba(255, 150, 0, 0.5);
  color: #f59e0b;
}
._canceledButton_pk0zs_259:hover:not(:disabled) {
  background: rgba(255, 200, 0, 0.25);
  border-color: rgba(255, 150, 0, 0.7);
}

._description_pk0zs_269 {
  font-size: 10px;
  color: var(--clrSecondaryText);
  text-align: center;
  margin: 0;
}

._error_pk0zs_276 {
  font-size: 12px;
  color: #ff4444;
  text-align: center;
  margin: 0;
}html {
  color-scheme: dark;
}

html:has(body._themeLight_bum5e_5),
html:has(body._themePastelLight_bum5e_6) {
  color-scheme: light;
}

:root {
  --clrPrimary: #F4F4F5;
  --clrPrimary30: rgba(244, 244, 245, 0.3);
  --clrSecondary: #FEFEFE;
  --clrTertiary: #E4E4E7;
  --clrPrimaryReverse: #101418;
  --clrSecondaryReverse: #0A0F14;
  --clrTertiaryReverse: #212327;
  --clrTextPrimary: #101418;
  --clrTextSecondary: #2E3337;
  --clrTextTertiary: #7C7C7C;
  --clrTextPrimaryReverse: #F4F4F5;
  --clrTextSecondaryReverse: #CDCDCD;
  --clrTextTertiaryReverse: #8A8A8A;
  --clrError-100: #641f1f;
  --clrError-50: #c84d4d;
  --clrSuccess-100: #2d692d;
  --clrSuccess-50: #3EA03E;
  --clrSuccessOnTint: #0d260d;
  --clrErrorOnTint: #2e0a0a;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgb(50, 126, 75, 0.1) 30%,
          rgb(94, 178, 122, 0.36) 60%,
          rgb(144, 215, 168) 100%);
  --clrNavBackground: rgba(244, 244, 245, 0.15);
  --clrNavItemActive: rgba(211, 211, 211, 0.4);
  --clrNavItemHover: rgba(0, 0, 0, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #F4F4F5;
  --clrGlassBackground: rgba(255, 255, 255, 0.5);
  --clrGlassBackgroundStrong: rgba(255, 255, 255, 0.3);
  --clrGlassBorder: rgba(0, 0, 0, 0.1);
  --snackbarDefaultBg: #F1ECE9;
  --snackbarDefaultText: #5D605C;
  --snackbarDefaultBorder: #5D605C;
  --snackbarDefaultIcon: #5D605C;
  --snackbarSuccessBg: #E0F1D9;
  --snackbarSuccessText: #358935;
  --snackbarSuccessBorder: #358935;
  --snackbarSuccessIcon: #358935;
  --snackbarErrorBg: #F9E1DC;
  --snackbarErrorText: #C80D12;
  --snackbarErrorBorder: #C80D12;
  --snackbarErrorIcon: #C80D12;
}

._themeLight_bum5e_5 {
  --clrPrimary: #F4F4F5;
  --clrPrimary30: rgba(244, 244, 245, 0.3);
  --clrSecondary: #FEFEFE;
  --clrTertiary: #E4E4E7;
  --clrPrimaryReverse: #101418;
  --clrSecondaryReverse: #0A0F14;
  --clrTertiaryReverse: #212327;
  --clrTextPrimary: #101418;
  --clrTextSecondary: #2E3337;
  --clrTextTertiary: #7C7C7C;
  --clrTextPrimaryReverse: #F4F4F5;
  --clrTextSecondaryReverse: #CDCDCD;
  --clrTextTertiaryReverse: #8A8A8A;
  --clrError-100: #c03b3b;
  --clrError-50: #f6c5c5;
  --clrSuccess-100: #30d330;
  --clrSuccess-50: #bbffbb;
  --clrSuccessOnTint: #1f4f1f;
  --clrErrorOnTint: #7a1f1f;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgb(50, 126, 75, 0.1) 30%,
          rgb(94, 178, 122, 0.36) 60%,
          rgb(144, 215, 168) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(175, 49, 49, 0.1) 30%,
          rgba(238, 70, 70, 0.36) 60%,
          rgb(255, 173, 173) 100%);
  --clrNavBackground: rgba(244, 244, 245, 0.15);
  --clrNavItemActive: rgba(211, 211, 211, 0.4);
  --clrNavItemHover: rgba(0, 0, 0, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0000c1;
  --clrGlassBackground: rgba(255, 255, 255, 0.5);
  --clrGlassBackgroundStrong: rgba(255, 255, 255, 0.5);
  --clrGlassBorder: rgba(0, 0, 0, 0.1);
  --snackbarDefaultBg: #F1ECE9;
  --snackbarDefaultText: #5D605C;
  --snackbarDefaultBorder: #5D605C;
  --snackbarDefaultIcon: #5D605C;
  --snackbarSuccessBg: #E0F1D9;
  --snackbarSuccessText: #358935;
  --snackbarSuccessBorder: #358935;
  --snackbarSuccessIcon: #358935;
  --snackbarErrorBg: #F9E1DC;
  --snackbarErrorText: #C80D12;
  --snackbarErrorBorder: #C80D12;
  --snackbarErrorIcon: #C80D12;
}

._themeDark_bum5e_131 {
  --clrPrimary: #0F1418;
  --clrPrimary30: rgba(15, 20, 25, 0.3);
  --clrSecondary: #0A0F14;
  --clrTertiary: #212327;
  --clrPrimaryReverse: #F4F4F5;
  --clrSecondaryReverse: #FEFEFE;
  --clrTertiaryReverse: #E4E4E7;
  --clrTextPrimary: #F4F4F5;
  --clrTextSecondary: #CDCDCD;
  --clrTextTertiary: #8A8A8A;
  --clrTextPrimaryReverse: #101418;
  --clrTextSecondaryReverse: #2E3337;
  --clrTextTertiaryReverse: #7C7C7C;
  --clrError-100: #c84d4d;
  --clrError-50: #641f1f;
  --clrSuccess-100: #3EA03E;
  --clrSuccess-50: #2d692d;
  --clrSuccessOnTint: #d6ffd6;
  --clrErrorOnTint: #ffd6d6;
  --clrWarning-100: #E88434;
  --clrWarning-50: #C49168;
  --clrAccent-100: #FFFFFF;
  --clrAccent-80: rgba(255, 255, 255, 0.8);
  --clrAccent-60: rgba(255, 255, 255, 0.6);
  --clrAccent-50: rgba(255, 255, 255, 0.5);
  --clrAccent-40: rgba(255, 255, 255, 0.4);
  --clrAccent-30: rgba(255, 255, 255, 0.3);
  --clrAccent-20: rgba(255, 255, 255, 0.2);
  --clrAccent-10: rgba(255, 255, 255, 0.1);
  --clrGradient: linear-gradient(90deg, #262a2e 10%, var(--clrPrimary) 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(50, 126, 75, 0.15) 30%,
          rgba(50, 126, 75, 0.3) 60%,
          rgba(50, 126, 75, 0.5) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(167, 44, 44, 0) 0%,
          rgba(167, 44, 44, 0.15) 30%,
          rgba(167, 44, 44, 0.3) 60%,
          rgba(167, 44, 44, 0.5) 100%);
  --clrNavBackground: rgba(0, 0, 0, 0.15);
  --clrNavItemActive: rgba(24, 24, 24, 0.49);
  --clrNavItemHover: rgba(255, 255, 255, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0F1418;
  --clrGlassBackground: rgba(15, 20, 24, 0.5);
  --clrGlassBackgroundStrong: rgba(15, 20, 24, 0.6);
  --clrGlassBorder: rgba(255, 255, 255, 0.1);
  --snackbarDefaultBg: #414141;
  --snackbarDefaultText: #BABABA;
  --snackbarDefaultBorder: #BABABA;
  --snackbarDefaultIcon: #BABABA;
  --snackbarSuccessBg: #145E18;
  --snackbarSuccessText: #8FE094;
  --snackbarSuccessBorder: #8FE094;
  --snackbarSuccessIcon: #8FE094;
  --snackbarErrorBg: #910C09;
  --snackbarErrorText: #FE9E9D;
  --snackbarErrorBorder: #FE9E9D;
  --snackbarErrorIcon: #FE9E9D;
}

/* 

Note: 
    If you want something done quick, ask AI to buuild your color themes.
    If you want to do it right and tidy though, do it manually. 

    - Theo

*/
:root {
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --font-accent: "Jaro", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}

html,
body {
  font-family: var(--font-sans);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

._subscriptionInfo_bum5e_216 {
  padding: 16px;
  margin-bottom: 8px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
}
._subscriptionInfo_bum5e_216:has(._statusActive_bum5e_229) {
  background: rgba(0, 255, 0, 0.05);
  border: 1px solid rgba(0, 255, 0, 0.1);
}
._subscriptionInfo_bum5e_216:has(._statusCanceled_bum5e_233) {
  background: rgba(245, 158, 11, 0.05);
  border: 1px solid rgba(245, 158, 11, 0.1);
}
._subscriptionInfo_bum5e_216 ._subscriptionLabel_bum5e_237 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 4px;
  flex: 1;
  min-width: 0;
}
._subscriptionInfo_bum5e_216 ._subscriptionLabel_bum5e_237 ._subscriptionTitle_bum5e_246 {
  font-size: 16px;
  font-weight: 600;
  color: var(--clrAccent-100);
}
._subscriptionInfo_bum5e_216 ._subscriptionLabel_bum5e_237 ._subscriptionTitle_bum5e_246 ._statusActive_bum5e_229 {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #10b981;
}
._subscriptionInfo_bum5e_216 ._subscriptionLabel_bum5e_237 ._subscriptionTitle_bum5e_246 ._statusActive_bum5e_229 svg {
  font-size: 18px;
}
._subscriptionInfo_bum5e_216 ._subscriptionLabel_bum5e_237 ._subscriptionTitle_bum5e_246 ._statusCanceled_bum5e_233 {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #f59e0b;
}
._subscriptionInfo_bum5e_216 ._subscriptionLabel_bum5e_237 ._subscriptionTitle_bum5e_246 ._statusCanceled_bum5e_233 svg {
  font-size: 18px;
}
._subscriptionInfo_bum5e_216 ._subscriptionLabel_bum5e_237 ._subscriptionDescription_bum5e_269 {
  font-size: 13px;
  color: var(--clrAccent-60);
  line-height: 1.4;
}
._subscriptionInfo_bum5e_216 ._managedViaApp_bum5e_274 {
  font-size: 12px;
  color: var(--clrAccent-50);
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 4px;
  white-space: nowrap;
}html {
  color-scheme: dark;
}

html:has(body._themeLight_wj85s_5),
html:has(body._themePastelLight_wj85s_6) {
  color-scheme: light;
}

:root {
  --clrPrimary: #F4F4F5;
  --clrPrimary30: rgba(244, 244, 245, 0.3);
  --clrSecondary: #FEFEFE;
  --clrTertiary: #E4E4E7;
  --clrPrimaryReverse: #101418;
  --clrSecondaryReverse: #0A0F14;
  --clrTertiaryReverse: #212327;
  --clrTextPrimary: #101418;
  --clrTextSecondary: #2E3337;
  --clrTextTertiary: #7C7C7C;
  --clrTextPrimaryReverse: #F4F4F5;
  --clrTextSecondaryReverse: #CDCDCD;
  --clrTextTertiaryReverse: #8A8A8A;
  --clrError-100: #641f1f;
  --clrError-50: #c84d4d;
  --clrSuccess-100: #2d692d;
  --clrSuccess-50: #3EA03E;
  --clrSuccessOnTint: #0d260d;
  --clrErrorOnTint: #2e0a0a;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgb(50, 126, 75, 0.1) 30%,
          rgb(94, 178, 122, 0.36) 60%,
          rgb(144, 215, 168) 100%);
  --clrNavBackground: rgba(244, 244, 245, 0.15);
  --clrNavItemActive: rgba(211, 211, 211, 0.4);
  --clrNavItemHover: rgba(0, 0, 0, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #F4F4F5;
  --clrGlassBackground: rgba(255, 255, 255, 0.5);
  --clrGlassBackgroundStrong: rgba(255, 255, 255, 0.3);
  --clrGlassBorder: rgba(0, 0, 0, 0.1);
  --snackbarDefaultBg: #F1ECE9;
  --snackbarDefaultText: #5D605C;
  --snackbarDefaultBorder: #5D605C;
  --snackbarDefaultIcon: #5D605C;
  --snackbarSuccessBg: #E0F1D9;
  --snackbarSuccessText: #358935;
  --snackbarSuccessBorder: #358935;
  --snackbarSuccessIcon: #358935;
  --snackbarErrorBg: #F9E1DC;
  --snackbarErrorText: #C80D12;
  --snackbarErrorBorder: #C80D12;
  --snackbarErrorIcon: #C80D12;
}

._themeLight_wj85s_5 {
  --clrPrimary: #F4F4F5;
  --clrPrimary30: rgba(244, 244, 245, 0.3);
  --clrSecondary: #FEFEFE;
  --clrTertiary: #E4E4E7;
  --clrPrimaryReverse: #101418;
  --clrSecondaryReverse: #0A0F14;
  --clrTertiaryReverse: #212327;
  --clrTextPrimary: #101418;
  --clrTextSecondary: #2E3337;
  --clrTextTertiary: #7C7C7C;
  --clrTextPrimaryReverse: #F4F4F5;
  --clrTextSecondaryReverse: #CDCDCD;
  --clrTextTertiaryReverse: #8A8A8A;
  --clrError-100: #c03b3b;
  --clrError-50: #f6c5c5;
  --clrSuccess-100: #30d330;
  --clrSuccess-50: #bbffbb;
  --clrSuccessOnTint: #1f4f1f;
  --clrErrorOnTint: #7a1f1f;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgb(50, 126, 75, 0.1) 30%,
          rgb(94, 178, 122, 0.36) 60%,
          rgb(144, 215, 168) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(175, 49, 49, 0.1) 30%,
          rgba(238, 70, 70, 0.36) 60%,
          rgb(255, 173, 173) 100%);
  --clrNavBackground: rgba(244, 244, 245, 0.15);
  --clrNavItemActive: rgba(211, 211, 211, 0.4);
  --clrNavItemHover: rgba(0, 0, 0, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0000c1;
  --clrGlassBackground: rgba(255, 255, 255, 0.5);
  --clrGlassBackgroundStrong: rgba(255, 255, 255, 0.5);
  --clrGlassBorder: rgba(0, 0, 0, 0.1);
  --snackbarDefaultBg: #F1ECE9;
  --snackbarDefaultText: #5D605C;
  --snackbarDefaultBorder: #5D605C;
  --snackbarDefaultIcon: #5D605C;
  --snackbarSuccessBg: #E0F1D9;
  --snackbarSuccessText: #358935;
  --snackbarSuccessBorder: #358935;
  --snackbarSuccessIcon: #358935;
  --snackbarErrorBg: #F9E1DC;
  --snackbarErrorText: #C80D12;
  --snackbarErrorBorder: #C80D12;
  --snackbarErrorIcon: #C80D12;
}

._themeDark_wj85s_131 {
  --clrPrimary: #0F1418;
  --clrPrimary30: rgba(15, 20, 25, 0.3);
  --clrSecondary: #0A0F14;
  --clrTertiary: #212327;
  --clrPrimaryReverse: #F4F4F5;
  --clrSecondaryReverse: #FEFEFE;
  --clrTertiaryReverse: #E4E4E7;
  --clrTextPrimary: #F4F4F5;
  --clrTextSecondary: #CDCDCD;
  --clrTextTertiary: #8A8A8A;
  --clrTextPrimaryReverse: #101418;
  --clrTextSecondaryReverse: #2E3337;
  --clrTextTertiaryReverse: #7C7C7C;
  --clrError-100: #c84d4d;
  --clrError-50: #641f1f;
  --clrSuccess-100: #3EA03E;
  --clrSuccess-50: #2d692d;
  --clrSuccessOnTint: #d6ffd6;
  --clrErrorOnTint: #ffd6d6;
  --clrWarning-100: #E88434;
  --clrWarning-50: #C49168;
  --clrAccent-100: #FFFFFF;
  --clrAccent-80: rgba(255, 255, 255, 0.8);
  --clrAccent-60: rgba(255, 255, 255, 0.6);
  --clrAccent-50: rgba(255, 255, 255, 0.5);
  --clrAccent-40: rgba(255, 255, 255, 0.4);
  --clrAccent-30: rgba(255, 255, 255, 0.3);
  --clrAccent-20: rgba(255, 255, 255, 0.2);
  --clrAccent-10: rgba(255, 255, 255, 0.1);
  --clrGradient: linear-gradient(90deg, #262a2e 10%, var(--clrPrimary) 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(50, 126, 75, 0.15) 30%,
          rgba(50, 126, 75, 0.3) 60%,
          rgba(50, 126, 75, 0.5) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(167, 44, 44, 0) 0%,
          rgba(167, 44, 44, 0.15) 30%,
          rgba(167, 44, 44, 0.3) 60%,
          rgba(167, 44, 44, 0.5) 100%);
  --clrNavBackground: rgba(0, 0, 0, 0.15);
  --clrNavItemActive: rgba(24, 24, 24, 0.49);
  --clrNavItemHover: rgba(255, 255, 255, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0F1418;
  --clrGlassBackground: rgba(15, 20, 24, 0.5);
  --clrGlassBackgroundStrong: rgba(15, 20, 24, 0.6);
  --clrGlassBorder: rgba(255, 255, 255, 0.1);
  --snackbarDefaultBg: #414141;
  --snackbarDefaultText: #BABABA;
  --snackbarDefaultBorder: #BABABA;
  --snackbarDefaultIcon: #BABABA;
  --snackbarSuccessBg: #145E18;
  --snackbarSuccessText: #8FE094;
  --snackbarSuccessBorder: #8FE094;
  --snackbarSuccessIcon: #8FE094;
  --snackbarErrorBg: #910C09;
  --snackbarErrorText: #FE9E9D;
  --snackbarErrorBorder: #FE9E9D;
  --snackbarErrorIcon: #FE9E9D;
}

/* 

Note: 
    If you want something done quick, ask AI to buuild your color themes.
    If you want to do it right and tidy though, do it manually. 

    - Theo

*/
:root {
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --font-accent: "Jaro", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}

html,
body {
  font-family: var(--font-sans);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

._deleteAccount_wj85s_216 {
  padding: 16px;
  margin-bottom: 16px;
  background: rgba(239, 68, 68, 0.05);
  border-radius: 4px;
  border: 1px solid rgba(239, 68, 68, 0.2);
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
}
._deleteAccount_wj85s_216 ._deleteLabel_wj85s_229 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 4px;
  flex: 1;
  min-width: 0;
}
._deleteAccount_wj85s_216 ._deleteLabel_wj85s_229 ._deleteTitle_wj85s_238 {
  font-size: 16px;
  font-weight: 600;
  color: #ef4444;
}
._deleteAccount_wj85s_216 ._deleteLabel_wj85s_229 ._deleteDescription_wj85s_243 {
  font-size: 13px;
  color: var(--clrAccent-60);
  line-height: 1.4;
}
._deleteAccount_wj85s_216 ._deleteButton_wj85s_248 {
  padding: 10px 20px;
  margin: 0;
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.3);
  border-radius: 4px;
  color: #ef4444;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  max-width: 200px;
  min-width: fit-content;
  white-space: nowrap;
}
._deleteAccount_wj85s_216 ._deleteButton_wj85s_248:hover:not(:disabled) {
  background: rgba(239, 68, 68, 0.2);
  border-color: rgba(239, 68, 68, 0.5);
}
._deleteAccount_wj85s_216 ._deleteButton_wj85s_248:active:not(:disabled) {
  transform: scale(0.98);
}
._deleteAccount_wj85s_216 ._deleteButton_wj85s_248:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

._warningModal_wj85s_275 {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  animation: _fadeIn_wj85s_1 0.2s ease;
}
._warningModal_wj85s_275 ._warningContent_wj85s_288 {
  background: var(--clrSecondary);
  border: 1px solid rgba(255, 200, 0, 0.5);
  border-radius: 8px;
  padding: 24px;
  width: 90%;
  max-width: 400px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  animation: _slideUp_wj85s_1 0.3s ease;
}
._warningModal_wj85s_275 ._warningContent_wj85s_288 h3 {
  font-size: 20px;
  font-weight: 600;
  color: #f59e0b;
  margin: 0;
}
._warningModal_wj85s_275 ._warningContent_wj85s_288 p {
  font-size: 14px;
  color: var(--clrAccent-100);
  line-height: 1.6;
  margin: 0;
}
._warningModal_wj85s_275 ._warningContent_wj85s_288 p strong {
  color: #10b981;
  font-weight: 600;
}
._warningModal_wj85s_275 ._warningContent_wj85s_288 ._warningButton_wj85s_316 {
  padding: 10px 20px;
  background: rgba(255, 200, 0, 0.2);
  border: 1px solid rgba(255, 150, 0, 0.5);
  border-radius: 8px;
  color: #f59e0b;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  margin-left: auto;
}
._warningModal_wj85s_275 ._warningContent_wj85s_288 ._warningButton_wj85s_316:hover {
  background: rgba(255, 200, 0, 0.3);
  border-color: rgba(255, 150, 0, 0.7);
}
._warningModal_wj85s_275 ._warningContent_wj85s_288 ._warningButton_wj85s_316:active {
  transform: scale(0.98);
}

@keyframes _fadeIn_wj85s_1 {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes _slideUp_wj85s_1 {
  from {
    transform: translateY(20px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}html {
  color-scheme: dark;
}

html:has(body._themeLight_w753u_5),
html:has(body._themePastelLight_w753u_6) {
  color-scheme: light;
}

:root {
  --clrPrimary: #F4F4F5;
  --clrPrimary30: rgba(244, 244, 245, 0.3);
  --clrSecondary: #FEFEFE;
  --clrTertiary: #E4E4E7;
  --clrPrimaryReverse: #101418;
  --clrSecondaryReverse: #0A0F14;
  --clrTertiaryReverse: #212327;
  --clrTextPrimary: #101418;
  --clrTextSecondary: #2E3337;
  --clrTextTertiary: #7C7C7C;
  --clrTextPrimaryReverse: #F4F4F5;
  --clrTextSecondaryReverse: #CDCDCD;
  --clrTextTertiaryReverse: #8A8A8A;
  --clrError-100: #641f1f;
  --clrError-50: #c84d4d;
  --clrSuccess-100: #2d692d;
  --clrSuccess-50: #3EA03E;
  --clrSuccessOnTint: #0d260d;
  --clrErrorOnTint: #2e0a0a;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgb(50, 126, 75, 0.1) 30%,
          rgb(94, 178, 122, 0.36) 60%,
          rgb(144, 215, 168) 100%);
  --clrNavBackground: rgba(244, 244, 245, 0.15);
  --clrNavItemActive: rgba(211, 211, 211, 0.4);
  --clrNavItemHover: rgba(0, 0, 0, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #F4F4F5;
  --clrGlassBackground: rgba(255, 255, 255, 0.5);
  --clrGlassBackgroundStrong: rgba(255, 255, 255, 0.3);
  --clrGlassBorder: rgba(0, 0, 0, 0.1);
  --snackbarDefaultBg: #F1ECE9;
  --snackbarDefaultText: #5D605C;
  --snackbarDefaultBorder: #5D605C;
  --snackbarDefaultIcon: #5D605C;
  --snackbarSuccessBg: #E0F1D9;
  --snackbarSuccessText: #358935;
  --snackbarSuccessBorder: #358935;
  --snackbarSuccessIcon: #358935;
  --snackbarErrorBg: #F9E1DC;
  --snackbarErrorText: #C80D12;
  --snackbarErrorBorder: #C80D12;
  --snackbarErrorIcon: #C80D12;
}

._themeLight_w753u_5 {
  --clrPrimary: #F4F4F5;
  --clrPrimary30: rgba(244, 244, 245, 0.3);
  --clrSecondary: #FEFEFE;
  --clrTertiary: #E4E4E7;
  --clrPrimaryReverse: #101418;
  --clrSecondaryReverse: #0A0F14;
  --clrTertiaryReverse: #212327;
  --clrTextPrimary: #101418;
  --clrTextSecondary: #2E3337;
  --clrTextTertiary: #7C7C7C;
  --clrTextPrimaryReverse: #F4F4F5;
  --clrTextSecondaryReverse: #CDCDCD;
  --clrTextTertiaryReverse: #8A8A8A;
  --clrError-100: #c03b3b;
  --clrError-50: #f6c5c5;
  --clrSuccess-100: #30d330;
  --clrSuccess-50: #bbffbb;
  --clrSuccessOnTint: #1f4f1f;
  --clrErrorOnTint: #7a1f1f;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgb(50, 126, 75, 0.1) 30%,
          rgb(94, 178, 122, 0.36) 60%,
          rgb(144, 215, 168) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(175, 49, 49, 0.1) 30%,
          rgba(238, 70, 70, 0.36) 60%,
          rgb(255, 173, 173) 100%);
  --clrNavBackground: rgba(244, 244, 245, 0.15);
  --clrNavItemActive: rgba(211, 211, 211, 0.4);
  --clrNavItemHover: rgba(0, 0, 0, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0000c1;
  --clrGlassBackground: rgba(255, 255, 255, 0.5);
  --clrGlassBackgroundStrong: rgba(255, 255, 255, 0.5);
  --clrGlassBorder: rgba(0, 0, 0, 0.1);
  --snackbarDefaultBg: #F1ECE9;
  --snackbarDefaultText: #5D605C;
  --snackbarDefaultBorder: #5D605C;
  --snackbarDefaultIcon: #5D605C;
  --snackbarSuccessBg: #E0F1D9;
  --snackbarSuccessText: #358935;
  --snackbarSuccessBorder: #358935;
  --snackbarSuccessIcon: #358935;
  --snackbarErrorBg: #F9E1DC;
  --snackbarErrorText: #C80D12;
  --snackbarErrorBorder: #C80D12;
  --snackbarErrorIcon: #C80D12;
}

._themeDark_w753u_131 {
  --clrPrimary: #0F1418;
  --clrPrimary30: rgba(15, 20, 25, 0.3);
  --clrSecondary: #0A0F14;
  --clrTertiary: #212327;
  --clrPrimaryReverse: #F4F4F5;
  --clrSecondaryReverse: #FEFEFE;
  --clrTertiaryReverse: #E4E4E7;
  --clrTextPrimary: #F4F4F5;
  --clrTextSecondary: #CDCDCD;
  --clrTextTertiary: #8A8A8A;
  --clrTextPrimaryReverse: #101418;
  --clrTextSecondaryReverse: #2E3337;
  --clrTextTertiaryReverse: #7C7C7C;
  --clrError-100: #c84d4d;
  --clrError-50: #641f1f;
  --clrSuccess-100: #3EA03E;
  --clrSuccess-50: #2d692d;
  --clrSuccessOnTint: #d6ffd6;
  --clrErrorOnTint: #ffd6d6;
  --clrWarning-100: #E88434;
  --clrWarning-50: #C49168;
  --clrAccent-100: #FFFFFF;
  --clrAccent-80: rgba(255, 255, 255, 0.8);
  --clrAccent-60: rgba(255, 255, 255, 0.6);
  --clrAccent-50: rgba(255, 255, 255, 0.5);
  --clrAccent-40: rgba(255, 255, 255, 0.4);
  --clrAccent-30: rgba(255, 255, 255, 0.3);
  --clrAccent-20: rgba(255, 255, 255, 0.2);
  --clrAccent-10: rgba(255, 255, 255, 0.1);
  --clrGradient: linear-gradient(90deg, #262a2e 10%, var(--clrPrimary) 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(50, 126, 75, 0.15) 30%,
          rgba(50, 126, 75, 0.3) 60%,
          rgba(50, 126, 75, 0.5) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(167, 44, 44, 0) 0%,
          rgba(167, 44, 44, 0.15) 30%,
          rgba(167, 44, 44, 0.3) 60%,
          rgba(167, 44, 44, 0.5) 100%);
  --clrNavBackground: rgba(0, 0, 0, 0.15);
  --clrNavItemActive: rgba(24, 24, 24, 0.49);
  --clrNavItemHover: rgba(255, 255, 255, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0F1418;
  --clrGlassBackground: rgba(15, 20, 24, 0.5);
  --clrGlassBackgroundStrong: rgba(15, 20, 24, 0.6);
  --clrGlassBorder: rgba(255, 255, 255, 0.1);
  --snackbarDefaultBg: #414141;
  --snackbarDefaultText: #BABABA;
  --snackbarDefaultBorder: #BABABA;
  --snackbarDefaultIcon: #BABABA;
  --snackbarSuccessBg: #145E18;
  --snackbarSuccessText: #8FE094;
  --snackbarSuccessBorder: #8FE094;
  --snackbarSuccessIcon: #8FE094;
  --snackbarErrorBg: #910C09;
  --snackbarErrorText: #FE9E9D;
  --snackbarErrorBorder: #FE9E9D;
  --snackbarErrorIcon: #FE9E9D;
}

/* 

Note: 
    If you want something done quick, ask AI to buuild your color themes.
    If you want to do it right and tidy though, do it manually. 

    - Theo

*/
:root {
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --font-accent: "Jaro", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}

html,
body {
  font-family: var(--font-sans);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

._settingsSection_w753u_216 {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 0;
  border-radius: 8px;
  background-color: var(--clrSecondary);
  width: 100%;
  border: 1px solid var(--clrAccent-10);
  overflow: hidden;
}
._settingsSection_w753u_216 ._settingsHeader_w753u_228 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 0;
  width: 100%;
  padding: 12px;
  background: var(--clrTertiary);
  border: none;
  cursor: pointer;
  transition: background 0.2s ease;
  color: var(--clrAccent-100);
}
._settingsSection_w753u_216 ._settingsHeader_w753u_228:hover {
  background: rgba(255, 255, 255, 0.03);
}
._settingsSection_w753u_216 ._settingsHeader_w753u_228 ._settingsTitle_w753u_245 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
}
._settingsSection_w753u_216 ._settingsHeader_w753u_228 ._settingsTitle_w753u_245 svg {
  font-size: 1.25rem;
}
._settingsSection_w753u_216 ._settingsHeader_w753u_228 ._settingsTitle_w753u_245 span {
  font-size: 0.875rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
._settingsSection_w753u_216 ._settingsHeader_w753u_228 ._chevron_w753u_261 {
  font-size: 1.25rem;
  transition: transform 0.2s ease;
  color: var(--clrAccent-100);
}
._settingsSection_w753u_216 ._settingsHeader_w753u_228 ._chevron_w753u_261._expanded_w753u_266 {
  transform: rotate(180deg);
}
._settingsSection_w753u_216._flat_w753u_269 {
  background: transparent;
  border: none;
  overflow: visible;
}
._settingsSection_w753u_216._flat_w753u_269 ._settingsContent_w753u_274 {
  padding: 0;
  gap: 18px;
}
._settingsSection_w753u_216 ._section_w753u_278 {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 8px;
}
._settingsSection_w753u_216 ._sectionHeader_w753u_285 {
  padding: 0 4px;
  color: var(--clrTextSecondary);
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.09em;
}
._settingsSection_w753u_216 ._sectionGroup_w753u_293 {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 0;
  background: var(--clrSecondary);
  border: 1px solid var(--clrAccent-10);
  border-radius: 8px;
  overflow: hidden;
}
._settingsSection_w753u_216 ._sectionGroup_w753u_293 ._settingItem_w753u_304 {
  padding: 12px 14px;
  border-bottom: 1px solid var(--clrAccent-10);
}
._settingsSection_w753u_216 ._sectionGroup_w753u_293 ._settingItem_w753u_304:last-child {
  border-bottom: none;
}
._settingsSection_w753u_216 ._versionRow_w753u_311 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 4px 4px 0;
}
._settingsSection_w753u_216 ._settingsContent_w753u_274 {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 0;
  padding: 8px;
  animation: _slideDown_w753u_1 0.2s ease-out;
}
._settingsSection_w753u_216 ._settingsContent_w753u_274 ._settingItem_w753u_304 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 12px 8px;
}
._settingsSection_w753u_216 ._settingsContent_w753u_274 ._settingItem_w753u_304:last-child {
  border-bottom: none;
}
._settingsSection_w753u_216 ._settingsContent_w753u_274 ._settingItem_w753u_304 ._settingLabel_w753u_339 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 2px;
  flex: 1;
  min-width: 0;
}
._settingsSection_w753u_216 ._settingsContent_w753u_274 ._settingItem_w753u_304 ._settingLabel_w753u_339 span:first-child {
  font-size: 16px;
  font-weight: 600;
  color: var(--clrAccent-100);
}
._settingsSection_w753u_216 ._settingsContent_w753u_274 ._settingItem_w753u_304 ._settingLabel_w753u_339 ._settingLabelWithBadge_w753u_353 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
}
._settingsSection_w753u_216 ._settingsContent_w753u_274 ._settingItem_w753u_304 ._settingLabel_w753u_339 ._settingDescription_w753u_360 {
  font-size: 0.75rem;
  color: var(--clrAccent-50);
  font-weight: 400;
}
._settingsSection_w753u_216 ._settingsContent_w753u_274 ._settingItem_w753u_304 ._settingValue_w753u_365 {
  font-size: 14px;
  color: var(--clrAccent-60);
  padding: 8px 12px;
  border-radius: 4px;
  border: 1px solid var(--clrAccent-10);
  background: var(--clrTertiary);
}
._settingsSection_w753u_216 ._settingsContent_w753u_274 ._settingItem_w753u_304 ._emailValue_w753u_373 {
  font-size: 0.875rem;
  flex: 1;
}
._settingsSection_w753u_216 ._settingsContent_w753u_274 ._settingItem_w753u_304 ._supportLink_w753u_377 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 4px;
}
._settingsSection_w753u_216 ._settingsContent_w753u_274 ._settingItem_w753u_304 ._supportLink_w753u_377 a {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--clrAccent-100);
  background-color: var(--clrTertiary);
  padding: 8px 12px;
  border-radius: 4px;
  border: 1px solid var(--clrAccent-10);
  font-size: 0.75rem;
  font-weight: 600;
  transition: all 200ms ease-in-out;
  text-decoration: none;
}
._settingsSection_w753u_216 ._settingsContent_w753u_274 ._settingItem_w753u_304 ._supportLink_w753u_377 a:hover {
  border-color: var(--clrAccent-30);
  background: rgba(255, 255, 255, 0.05);
}
._settingsSection_w753u_216 ._settingsContent_w753u_274 ._settingItem_w753u_304 ._supportLink_w753u_377 a svg {
  font-size: 0.875rem;
}
._settingsSection_w753u_216 ._settingsContent_w753u_274 ._settingItem_w753u_304 ._projVersion_w753u_407 {
  font-size: 0.75rem;
  color: var(--clrAccent-50);
}
._settingsSection_w753u_216 ._settingsContent_w753u_274 ._settingItem_w753u_304 ._themeSelector_w753u_411 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}
._settingsSection_w753u_216 ._settingsContent_w753u_274 ._settingItem_w753u_304 ._themeSelector_w753u_411 ._themeSquare_w753u_418 {
  width: 40px;
  height: 40px;
  border-radius: 2px;
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
  padding: 0;
}
._settingsSection_w753u_216 ._settingsContent_w753u_274 ._settingItem_w753u_304 ._themeSelector_w753u_411 ._themeSquare_w753u_418._themeAuto_w753u_427 {
  background: linear-gradient(135deg, #101418 0 50%, #F4F4F5 50% 100%);
  border: 2px solid #6b7280;
}
._settingsSection_w753u_216 ._settingsContent_w753u_274 ._settingItem_w753u_304 ._themeSelector_w753u_411 ._themeSquare_w753u_418._themeDark_w753u_131 {
  background: #101418;
  border: 2px solid #212327;
}
._settingsSection_w753u_216 ._settingsContent_w753u_274 ._settingItem_w753u_304 ._themeSelector_w753u_411 ._themeSquare_w753u_418._themeLight_w753u_5 {
  background: #F4F4F5;
  border: 2px solid #E4E4E7;
}
._settingsSection_w753u_216 ._settingsContent_w753u_274 ._settingItem_w753u_304 ._themeSelector_w753u_411 ._themeSquare_w753u_418:hover:not(:disabled) {
  transform: scale(1.05);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}
._settingsSection_w753u_216 ._settingsContent_w753u_274 ._settingItem_w753u_304 ._themeSelector_w753u_411 ._themeSquare_w753u_418._active_w753u_443 {
  border-width: 3px;
  box-shadow: 0 0 0 2px var(--clrAccent-30);
}
._settingsSection_w753u_216 ._settingsContent_w753u_274 ._settingItem_w753u_304 ._themeSelector_w753u_411 ._themeSquare_w753u_418._disabled_w753u_447, ._settingsSection_w753u_216 ._settingsContent_w753u_274 ._settingItem_w753u_304 ._themeSelector_w753u_411 ._themeSquare_w753u_418:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
._settingsSection_w753u_216 ._settingsContent_w753u_274 ._settingItem_w753u_304 ._settingButton_w753u_451 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 12px;
  border-radius: 4px;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  border: 1px solid var(--clrAccent-10);
  background: var(--clrTertiary);
  color: var(--clrAccent-100);
}
._settingsSection_w753u_216 ._settingsContent_w753u_274 ._settingItem_w753u_304 ._settingButton_w753u_451:hover:not(:disabled) {
  border-color: var(--clrAccent-30);
  background: rgba(255, 255, 255, 0.05);
}
._settingsSection_w753u_216 ._settingsContent_w753u_274 ._settingItem_w753u_304 ._settingButton_w753u_451:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
._settingsSection_w753u_216 ._settingsContent_w753u_274 ._settingItem_w753u_304 ._settingButton_w753u_451 svg {
  font-size: 1rem;
}
._settingsSection_w753u_216 ._settingsContent_w753u_274 ._settingItem_w753u_304 ._logoutButton_w753u_478 {
  background: transparent;
  border-color: var(--clrAccent-30);
}
._settingsSection_w753u_216 ._settingsContent_w753u_274 ._settingItem_w753u_304 ._toggle_w753u_482 {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
  flex-shrink: 0;
}
._settingsSection_w753u_216 ._settingsContent_w753u_274 ._settingItem_w753u_304 ._toggle_w753u_482._disabled_w753u_447 {
  opacity: 0.5;
  cursor: not-allowed;
}
._settingsSection_w753u_216 ._settingsContent_w753u_274 ._settingItem_w753u_304 ._toggle_w753u_482._disabled_w753u_447 ._toggleSlider_w753u_493 {
  cursor: not-allowed;
}
._settingsSection_w753u_216 ._settingsContent_w753u_274 ._settingItem_w753u_304 ._toggle_w753u_482 input {
  opacity: 0;
  width: 0;
  height: 0;
}
._settingsSection_w753u_216 ._settingsContent_w753u_274 ._settingItem_w753u_304 ._toggle_w753u_482 input:checked + ._toggleSlider_w753u_493 {
  background-color: var(--clrAccent-30);
}
._settingsSection_w753u_216 ._settingsContent_w753u_274 ._settingItem_w753u_304 ._toggle_w753u_482 input:checked + ._toggleSlider_w753u_493:before {
  transform: translateX(20px);
}
._settingsSection_w753u_216 ._settingsContent_w753u_274 ._settingItem_w753u_304 ._toggle_w753u_482 input:disabled + ._toggleSlider_w753u_493 {
  cursor: not-allowed;
}
._settingsSection_w753u_216 ._settingsContent_w753u_274 ._settingItem_w753u_304 ._toggle_w753u_482 ._toggleSlider_w753u_493 {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--clrAccent-10);
  transition: 0.3s;
  border-radius: 24px;
  border: 1px solid var(--clrAccent-20);
}
._settingsSection_w753u_216 ._settingsContent_w753u_274 ._settingItem_w753u_304 ._toggle_w753u_482 ._toggleSlider_w753u_493:before {
  position: absolute;
  content: "";
  height: 16px;
  width: 16px;
  left: 3px;
  bottom: 3px;
  background-color: var(--clrAccent-60);
  transition: 0.3s;
  border-radius: 50%;
}
._settingsSection_w753u_216 ._modal_w753u_533 {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  z-index: 1000;
  animation: _fadeIn_w753u_1 0.2s ease;
}
._settingsSection_w753u_216 ._modal_w753u_533 ._modalContent_w753u_548 {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 16px;
  background: var(--clrSecondary);
  border: 1px solid var(--clrAccent-10);
  border-radius: 8px;
  padding: 24px;
  width: 90%;
  max-width: 400px;
  animation: _slideUp_w753u_1 0.3s ease;
}
._settingsSection_w753u_216 ._modal_w753u_533 ._modalContent_w753u_548 h3 {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--clrAccent-100);
  margin: 0;
}
._settingsSection_w753u_216 ._modal_w753u_533 ._modalContent_w753u_548 ._modalInput_w753u_568 {
  width: 100%;
  padding: 12px 16px;
  background: var(--clrTertiary);
  border: 1px solid var(--clrAccent-10);
  border-radius: 4px;
  color: var(--clrAccent-100);
  font-size: 0.875rem;
  transition: border-color 0.2s ease;
}
._settingsSection_w753u_216 ._modal_w753u_533 ._modalContent_w753u_548 ._modalInput_w753u_568:focus {
  outline: none;
  border-color: var(--clrAccent-30);
}
._settingsSection_w753u_216 ._modal_w753u_533 ._modalContent_w753u_548 ._modalInput_w753u_568::placeholder {
  color: var(--clrAccent-30);
}
._settingsSection_w753u_216 ._modal_w753u_533 ._modalContent_w753u_548 ._modalError_w753u_585 {
  padding: 8px 12px;
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.3);
  border-radius: 4px;
  color: #ef4444;
  font-size: 0.8125rem;
}
._settingsSection_w753u_216 ._modal_w753u_533 ._modalContent_w753u_548 ._modalButtons_w753u_593 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 8px;
}
._settingsSection_w753u_216 ._modal_w753u_533 ._modalContent_w753u_548 ._modalButtons_w753u_593 button {
  padding: 10px 20px;
  border-radius: 4px;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  min-width: 100px;
}
._settingsSection_w753u_216 ._modal_w753u_533 ._modalContent_w753u_548 ._modalButtons_w753u_593 button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
._settingsSection_w753u_216 ._modal_w753u_533 ._modalContent_w753u_548 ._modalButtons_w753u_593 ._modalCancel_w753u_614 {
  background: var(--clrTertiary);
  border: 1px solid var(--clrAccent-10);
  color: var(--clrAccent-80);
}
._settingsSection_w753u_216 ._modal_w753u_533 ._modalContent_w753u_548 ._modalButtons_w753u_593 ._modalCancel_w753u_614:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.05);
}
._settingsSection_w753u_216 ._modal_w753u_533 ._modalContent_w753u_548 ._modalButtons_w753u_593 ._modalConfirm_w753u_622 {
  background: var(--clrAccent-100);
  border: 1px solid var(--clrAccent-100);
  color: var(--clrPrimary);
}
._settingsSection_w753u_216 ._modal_w753u_533 ._modalContent_w753u_548 ._modalButtons_w753u_593 ._modalConfirm_w753u_622:hover:not(:disabled) {
  opacity: 0.9;
}
._settingsSection_w753u_216 ._dangerModal_w753u_630 {
  border-color: rgba(239, 68, 68, 0.3);
}
._settingsSection_w753u_216 ._dangerModal_w753u_630 ._dangerTitle_w753u_633 {
  color: #ef4444;
}
._settingsSection_w753u_216 ._dangerModal_w753u_630 ._dangerWarning_w753u_636 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 12px;
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.3);
  border-radius: 4px;
  padding: 16px;
  color: var(--clrAccent-100);
  font-size: 0.875rem;
}
._settingsSection_w753u_216 ._dangerModal_w753u_630 ._dangerWarning_w753u_636 p {
  margin: 0;
}
._settingsSection_w753u_216 ._dangerModal_w753u_630 ._dangerWarning_w753u_636 strong {
  color: #ef4444;
  font-weight: 700;
}
._settingsSection_w753u_216 ._dangerModal_w753u_630 ._dangerWarning_w753u_636 ul {
  margin: 0;
  padding-left: 20px;
}
._settingsSection_w753u_216 ._dangerModal_w753u_630 ._dangerWarning_w753u_636 ul li {
  margin: 4px 0;
  color: var(--clrAccent-80);
}
._settingsSection_w753u_216 ._dangerModal_w753u_630 ._dangerConfirm_w753u_664 {
  background: rgba(239, 68, 68, 0.9);
  border-color: #ef4444;
  color: white;
}
._settingsSection_w753u_216 ._dangerModal_w753u_630 ._dangerConfirm_w753u_664:hover:not(:disabled) {
  background: #ef4444;
}

@keyframes _slideDown_w753u_1 {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes _fadeIn_w753u_1 {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes _slideUp_w753u_1 {
  from {
    transform: translateY(20px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}
/* ===== Team tag + Title (PRO) ============================================== */
._proTag_w753u_702 {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 6px;
  background: var(--clrAccent-10);
  color: var(--clrTextSecondary);
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  vertical-align: middle;
}

._modalHint_w753u_715 {
  margin: 8px 0 0;
  color: var(--clrTextSecondary);
  font-size: 0.82rem;
  line-height: 1.4;
}

._titleList_w753u_722 {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 10px;
  width: 100%;
  padding: 4px 4px 8px;
}

._titleOption_w753u_732 {
  min-height: 52px;
  padding: 0 18px;
  border-radius: 8px;
  background: var(--clrTertiary);
  border: 2px solid transparent;
  color: var(--clrTextPrimary);
  font-family: var(--font-accent);
  font-size: 1rem;
  font-weight: 800;
  cursor: pointer;
}
._titleOption_w753u_732:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

._titlePreview_w753u_749 {
  color: #fff;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.4);
  background: radial-gradient(120% 140% at 15% 0%, color-mix(in srgb, var(--c2) 70%, transparent), transparent 55%), radial-gradient(120% 140% at 85% 100%, color-mix(in srgb, var(--c3) 70%, transparent), transparent 55%), linear-gradient(115deg, var(--c1), var(--c2), var(--c3), var(--c4));
  background-size: 200% 200%, 200% 200%, 300% 300%;
  animation: _titleFlowOpt_w753u_1 9s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  ._titlePreview_w753u_749 {
    animation: none;
  }
}

._titleSelected_w753u_762 {
  border-color: var(--clrTextPrimary);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--clrTextPrimary) 25%, transparent);
}

@keyframes _titleFlowOpt_w753u_1 {
  0% {
    background-position: 0% 0%, 100% 100%, 0% 50%;
  }
  50% {
    background-position: 100% 50%, 0% 50%, 100% 50%;
  }
  100% {
    background-position: 0% 0%, 100% 100%, 0% 50%;
  }
}html {
  color-scheme: dark;
}

html:has(body._themeLight_1dcaz_5),
html:has(body._themePastelLight_1dcaz_6) {
  color-scheme: light;
}

:root {
  --clrPrimary: #F4F4F5;
  --clrPrimary30: rgba(244, 244, 245, 0.3);
  --clrSecondary: #FEFEFE;
  --clrTertiary: #E4E4E7;
  --clrPrimaryReverse: #101418;
  --clrSecondaryReverse: #0A0F14;
  --clrTertiaryReverse: #212327;
  --clrTextPrimary: #101418;
  --clrTextSecondary: #2E3337;
  --clrTextTertiary: #7C7C7C;
  --clrTextPrimaryReverse: #F4F4F5;
  --clrTextSecondaryReverse: #CDCDCD;
  --clrTextTertiaryReverse: #8A8A8A;
  --clrError-100: #641f1f;
  --clrError-50: #c84d4d;
  --clrSuccess-100: #2d692d;
  --clrSuccess-50: #3EA03E;
  --clrSuccessOnTint: #0d260d;
  --clrErrorOnTint: #2e0a0a;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgb(50, 126, 75, 0.1) 30%,
          rgb(94, 178, 122, 0.36) 60%,
          rgb(144, 215, 168) 100%);
  --clrNavBackground: rgba(244, 244, 245, 0.15);
  --clrNavItemActive: rgba(211, 211, 211, 0.4);
  --clrNavItemHover: rgba(0, 0, 0, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #F4F4F5;
  --clrGlassBackground: rgba(255, 255, 255, 0.5);
  --clrGlassBackgroundStrong: rgba(255, 255, 255, 0.3);
  --clrGlassBorder: rgba(0, 0, 0, 0.1);
  --snackbarDefaultBg: #F1ECE9;
  --snackbarDefaultText: #5D605C;
  --snackbarDefaultBorder: #5D605C;
  --snackbarDefaultIcon: #5D605C;
  --snackbarSuccessBg: #E0F1D9;
  --snackbarSuccessText: #358935;
  --snackbarSuccessBorder: #358935;
  --snackbarSuccessIcon: #358935;
  --snackbarErrorBg: #F9E1DC;
  --snackbarErrorText: #C80D12;
  --snackbarErrorBorder: #C80D12;
  --snackbarErrorIcon: #C80D12;
}

._themeLight_1dcaz_5 {
  --clrPrimary: #F4F4F5;
  --clrPrimary30: rgba(244, 244, 245, 0.3);
  --clrSecondary: #FEFEFE;
  --clrTertiary: #E4E4E7;
  --clrPrimaryReverse: #101418;
  --clrSecondaryReverse: #0A0F14;
  --clrTertiaryReverse: #212327;
  --clrTextPrimary: #101418;
  --clrTextSecondary: #2E3337;
  --clrTextTertiary: #7C7C7C;
  --clrTextPrimaryReverse: #F4F4F5;
  --clrTextSecondaryReverse: #CDCDCD;
  --clrTextTertiaryReverse: #8A8A8A;
  --clrError-100: #c03b3b;
  --clrError-50: #f6c5c5;
  --clrSuccess-100: #30d330;
  --clrSuccess-50: #bbffbb;
  --clrSuccessOnTint: #1f4f1f;
  --clrErrorOnTint: #7a1f1f;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgb(50, 126, 75, 0.1) 30%,
          rgb(94, 178, 122, 0.36) 60%,
          rgb(144, 215, 168) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(175, 49, 49, 0.1) 30%,
          rgba(238, 70, 70, 0.36) 60%,
          rgb(255, 173, 173) 100%);
  --clrNavBackground: rgba(244, 244, 245, 0.15);
  --clrNavItemActive: rgba(211, 211, 211, 0.4);
  --clrNavItemHover: rgba(0, 0, 0, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0000c1;
  --clrGlassBackground: rgba(255, 255, 255, 0.5);
  --clrGlassBackgroundStrong: rgba(255, 255, 255, 0.5);
  --clrGlassBorder: rgba(0, 0, 0, 0.1);
  --snackbarDefaultBg: #F1ECE9;
  --snackbarDefaultText: #5D605C;
  --snackbarDefaultBorder: #5D605C;
  --snackbarDefaultIcon: #5D605C;
  --snackbarSuccessBg: #E0F1D9;
  --snackbarSuccessText: #358935;
  --snackbarSuccessBorder: #358935;
  --snackbarSuccessIcon: #358935;
  --snackbarErrorBg: #F9E1DC;
  --snackbarErrorText: #C80D12;
  --snackbarErrorBorder: #C80D12;
  --snackbarErrorIcon: #C80D12;
}

._themeDark_1dcaz_131 {
  --clrPrimary: #0F1418;
  --clrPrimary30: rgba(15, 20, 25, 0.3);
  --clrSecondary: #0A0F14;
  --clrTertiary: #212327;
  --clrPrimaryReverse: #F4F4F5;
  --clrSecondaryReverse: #FEFEFE;
  --clrTertiaryReverse: #E4E4E7;
  --clrTextPrimary: #F4F4F5;
  --clrTextSecondary: #CDCDCD;
  --clrTextTertiary: #8A8A8A;
  --clrTextPrimaryReverse: #101418;
  --clrTextSecondaryReverse: #2E3337;
  --clrTextTertiaryReverse: #7C7C7C;
  --clrError-100: #c84d4d;
  --clrError-50: #641f1f;
  --clrSuccess-100: #3EA03E;
  --clrSuccess-50: #2d692d;
  --clrSuccessOnTint: #d6ffd6;
  --clrErrorOnTint: #ffd6d6;
  --clrWarning-100: #E88434;
  --clrWarning-50: #C49168;
  --clrAccent-100: #FFFFFF;
  --clrAccent-80: rgba(255, 255, 255, 0.8);
  --clrAccent-60: rgba(255, 255, 255, 0.6);
  --clrAccent-50: rgba(255, 255, 255, 0.5);
  --clrAccent-40: rgba(255, 255, 255, 0.4);
  --clrAccent-30: rgba(255, 255, 255, 0.3);
  --clrAccent-20: rgba(255, 255, 255, 0.2);
  --clrAccent-10: rgba(255, 255, 255, 0.1);
  --clrGradient: linear-gradient(90deg, #262a2e 10%, var(--clrPrimary) 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(50, 126, 75, 0.15) 30%,
          rgba(50, 126, 75, 0.3) 60%,
          rgba(50, 126, 75, 0.5) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(167, 44, 44, 0) 0%,
          rgba(167, 44, 44, 0.15) 30%,
          rgba(167, 44, 44, 0.3) 60%,
          rgba(167, 44, 44, 0.5) 100%);
  --clrNavBackground: rgba(0, 0, 0, 0.15);
  --clrNavItemActive: rgba(24, 24, 24, 0.49);
  --clrNavItemHover: rgba(255, 255, 255, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0F1418;
  --clrGlassBackground: rgba(15, 20, 24, 0.5);
  --clrGlassBackgroundStrong: rgba(15, 20, 24, 0.6);
  --clrGlassBorder: rgba(255, 255, 255, 0.1);
  --snackbarDefaultBg: #414141;
  --snackbarDefaultText: #BABABA;
  --snackbarDefaultBorder: #BABABA;
  --snackbarDefaultIcon: #BABABA;
  --snackbarSuccessBg: #145E18;
  --snackbarSuccessText: #8FE094;
  --snackbarSuccessBorder: #8FE094;
  --snackbarSuccessIcon: #8FE094;
  --snackbarErrorBg: #910C09;
  --snackbarErrorText: #FE9E9D;
  --snackbarErrorBorder: #FE9E9D;
  --snackbarErrorIcon: #FE9E9D;
}

/* 

Note: 
    If you want something done quick, ask AI to buuild your color themes.
    If you want to do it right and tidy though, do it manually. 

    - Theo

*/
:root {
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --font-accent: "Jaro", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}

html,
body {
  font-family: var(--font-sans);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

._container_1dcaz_216 {
  max-width: 820px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 14px;
  padding-top: calc(60px + env(safe-area-inset-top) + 16px);
  padding-bottom: calc(60px + env(safe-area-inset-bottom) + 16px);
  padding-left: 22px;
  padding-right: 22px;
}

._header_1dcaz_230 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 8px;
}
._header_1dcaz_230 ._back_1dcaz_237 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  padding: 6px 4px;
  background: transparent;
  border: 0;
  color: var(--clrTextSecondary);
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
}
._header_1dcaz_230 ._back_1dcaz_237 svg {
  width: 18px;
  height: 18px;
}
._header_1dcaz_230 h1 {
  margin: 0;
  color: var(--clrTextPrimary);
  font-family: var(--font-accent);
  font-size: clamp(1.6rem, 6vw, 2.1rem);
  font-weight: 800;
}

@media (max-width: 480px) {
  ._container_1dcaz_216 {
    padding-left: 16px;
    padding-right: 16px;
  }
}
._container_1dcaz_216 {
  box-sizing: border-box;
  width: 100%;
  max-width: var(--site-max-width, 1440px);
  margin-inline: auto;
  padding-inline: var(--site-gutter, 20px);
}html {
  color-scheme: dark;
}

html:has(body._themeLight_wxi20_5),
html:has(body._themePastelLight_wxi20_6) {
  color-scheme: light;
}

:root {
  --clrPrimary: #F4F4F5;
  --clrPrimary30: rgba(244, 244, 245, 0.3);
  --clrSecondary: #FEFEFE;
  --clrTertiary: #E4E4E7;
  --clrPrimaryReverse: #101418;
  --clrSecondaryReverse: #0A0F14;
  --clrTertiaryReverse: #212327;
  --clrTextPrimary: #101418;
  --clrTextSecondary: #2E3337;
  --clrTextTertiary: #7C7C7C;
  --clrTextPrimaryReverse: #F4F4F5;
  --clrTextSecondaryReverse: #CDCDCD;
  --clrTextTertiaryReverse: #8A8A8A;
  --clrError-100: #641f1f;
  --clrError-50: #c84d4d;
  --clrSuccess-100: #2d692d;
  --clrSuccess-50: #3EA03E;
  --clrSuccessOnTint: #0d260d;
  --clrErrorOnTint: #2e0a0a;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgb(50, 126, 75, 0.1) 30%,
          rgb(94, 178, 122, 0.36) 60%,
          rgb(144, 215, 168) 100%);
  --clrNavBackground: rgba(244, 244, 245, 0.15);
  --clrNavItemActive: rgba(211, 211, 211, 0.4);
  --clrNavItemHover: rgba(0, 0, 0, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #F4F4F5;
  --clrGlassBackground: rgba(255, 255, 255, 0.5);
  --clrGlassBackgroundStrong: rgba(255, 255, 255, 0.3);
  --clrGlassBorder: rgba(0, 0, 0, 0.1);
  --snackbarDefaultBg: #F1ECE9;
  --snackbarDefaultText: #5D605C;
  --snackbarDefaultBorder: #5D605C;
  --snackbarDefaultIcon: #5D605C;
  --snackbarSuccessBg: #E0F1D9;
  --snackbarSuccessText: #358935;
  --snackbarSuccessBorder: #358935;
  --snackbarSuccessIcon: #358935;
  --snackbarErrorBg: #F9E1DC;
  --snackbarErrorText: #C80D12;
  --snackbarErrorBorder: #C80D12;
  --snackbarErrorIcon: #C80D12;
}

._themeLight_wxi20_5 {
  --clrPrimary: #F4F4F5;
  --clrPrimary30: rgba(244, 244, 245, 0.3);
  --clrSecondary: #FEFEFE;
  --clrTertiary: #E4E4E7;
  --clrPrimaryReverse: #101418;
  --clrSecondaryReverse: #0A0F14;
  --clrTertiaryReverse: #212327;
  --clrTextPrimary: #101418;
  --clrTextSecondary: #2E3337;
  --clrTextTertiary: #7C7C7C;
  --clrTextPrimaryReverse: #F4F4F5;
  --clrTextSecondaryReverse: #CDCDCD;
  --clrTextTertiaryReverse: #8A8A8A;
  --clrError-100: #c03b3b;
  --clrError-50: #f6c5c5;
  --clrSuccess-100: #30d330;
  --clrSuccess-50: #bbffbb;
  --clrSuccessOnTint: #1f4f1f;
  --clrErrorOnTint: #7a1f1f;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgb(50, 126, 75, 0.1) 30%,
          rgb(94, 178, 122, 0.36) 60%,
          rgb(144, 215, 168) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(175, 49, 49, 0.1) 30%,
          rgba(238, 70, 70, 0.36) 60%,
          rgb(255, 173, 173) 100%);
  --clrNavBackground: rgba(244, 244, 245, 0.15);
  --clrNavItemActive: rgba(211, 211, 211, 0.4);
  --clrNavItemHover: rgba(0, 0, 0, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0000c1;
  --clrGlassBackground: rgba(255, 255, 255, 0.5);
  --clrGlassBackgroundStrong: rgba(255, 255, 255, 0.5);
  --clrGlassBorder: rgba(0, 0, 0, 0.1);
  --snackbarDefaultBg: #F1ECE9;
  --snackbarDefaultText: #5D605C;
  --snackbarDefaultBorder: #5D605C;
  --snackbarDefaultIcon: #5D605C;
  --snackbarSuccessBg: #E0F1D9;
  --snackbarSuccessText: #358935;
  --snackbarSuccessBorder: #358935;
  --snackbarSuccessIcon: #358935;
  --snackbarErrorBg: #F9E1DC;
  --snackbarErrorText: #C80D12;
  --snackbarErrorBorder: #C80D12;
  --snackbarErrorIcon: #C80D12;
}

._themeDark_wxi20_131 {
  --clrPrimary: #0F1418;
  --clrPrimary30: rgba(15, 20, 25, 0.3);
  --clrSecondary: #0A0F14;
  --clrTertiary: #212327;
  --clrPrimaryReverse: #F4F4F5;
  --clrSecondaryReverse: #FEFEFE;
  --clrTertiaryReverse: #E4E4E7;
  --clrTextPrimary: #F4F4F5;
  --clrTextSecondary: #CDCDCD;
  --clrTextTertiary: #8A8A8A;
  --clrTextPrimaryReverse: #101418;
  --clrTextSecondaryReverse: #2E3337;
  --clrTextTertiaryReverse: #7C7C7C;
  --clrError-100: #c84d4d;
  --clrError-50: #641f1f;
  --clrSuccess-100: #3EA03E;
  --clrSuccess-50: #2d692d;
  --clrSuccessOnTint: #d6ffd6;
  --clrErrorOnTint: #ffd6d6;
  --clrWarning-100: #E88434;
  --clrWarning-50: #C49168;
  --clrAccent-100: #FFFFFF;
  --clrAccent-80: rgba(255, 255, 255, 0.8);
  --clrAccent-60: rgba(255, 255, 255, 0.6);
  --clrAccent-50: rgba(255, 255, 255, 0.5);
  --clrAccent-40: rgba(255, 255, 255, 0.4);
  --clrAccent-30: rgba(255, 255, 255, 0.3);
  --clrAccent-20: rgba(255, 255, 255, 0.2);
  --clrAccent-10: rgba(255, 255, 255, 0.1);
  --clrGradient: linear-gradient(90deg, #262a2e 10%, var(--clrPrimary) 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(50, 126, 75, 0.15) 30%,
          rgba(50, 126, 75, 0.3) 60%,
          rgba(50, 126, 75, 0.5) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(167, 44, 44, 0) 0%,
          rgba(167, 44, 44, 0.15) 30%,
          rgba(167, 44, 44, 0.3) 60%,
          rgba(167, 44, 44, 0.5) 100%);
  --clrNavBackground: rgba(0, 0, 0, 0.15);
  --clrNavItemActive: rgba(24, 24, 24, 0.49);
  --clrNavItemHover: rgba(255, 255, 255, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0F1418;
  --clrGlassBackground: rgba(15, 20, 24, 0.5);
  --clrGlassBackgroundStrong: rgba(15, 20, 24, 0.6);
  --clrGlassBorder: rgba(255, 255, 255, 0.1);
  --snackbarDefaultBg: #414141;
  --snackbarDefaultText: #BABABA;
  --snackbarDefaultBorder: #BABABA;
  --snackbarDefaultIcon: #BABABA;
  --snackbarSuccessBg: #145E18;
  --snackbarSuccessText: #8FE094;
  --snackbarSuccessBorder: #8FE094;
  --snackbarSuccessIcon: #8FE094;
  --snackbarErrorBg: #910C09;
  --snackbarErrorText: #FE9E9D;
  --snackbarErrorBorder: #FE9E9D;
  --snackbarErrorIcon: #FE9E9D;
}

/* 

Note: 
    If you want something done quick, ask AI to buuild your color themes.
    If you want to do it right and tidy though, do it manually. 

    - Theo

*/
:root {
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --font-accent: "Jaro", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}

html,
body {
  font-family: var(--font-sans);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

._container_wxi20_216 {
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
  padding-top: calc(60px + env(safe-area-inset-top) + 16px);
  padding-bottom: calc(60px + env(safe-area-inset-bottom) + 16px);
  padding-left: 16px;
  padding-right: 16px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 20px;
}

._header_wxi20_231 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 8px;
}
._header_wxi20_231 h1 {
  margin: 0;
  font-family: var(--font-accent);
  font-size: 1.6rem;
  color: var(--clrTextPrimary);
}

._back_wxi20_245 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  padding: 0;
  background: none;
  border: 0;
  color: var(--clrTextSecondary);
  font-size: 0.9rem;
  cursor: pointer;
}
._back_wxi20_245 svg {
  width: 16px;
  height: 16px;
}

._previewCard_wxi20_263 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 14px;
  padding: 14px;
  background: color-mix(in srgb, var(--clrSecondary) 82%, transparent);
  border: 1px solid var(--clrAccent-10);
  border-radius: 8px;
}

._previewAvatar_wxi20_275 {
  position: relative;
  flex-shrink: 0;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
}

._previewCamera_wxi20_284 {
  position: absolute;
  right: -2px;
  bottom: -2px;
  z-index: 2;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 0;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--clrTextPrimary);
  color: var(--clrSecondary);
  border: 2px solid var(--clrSecondary);
}
._previewCamera_wxi20_284 svg {
  width: 13px;
  height: 13px;
}

._previewText_wxi20_306 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 2px;
  min-width: 0;
}

._previewName_wxi20_315 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  color: var(--clrTextPrimary);
  font-weight: 800;
  font-size: 1.05rem;
}

._previewTeam_wxi20_326 {
  padding: 1px 6px;
  border-radius: 6px;
  background: var(--clrTertiary);
  border: 1px solid var(--clrAccent-10);
  color: var(--clrTextSecondary);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.04em;
}

._previewHandle_wxi20_337 {
  color: var(--clrTextSecondary);
  font-size: 0.85rem;
}

._previewTitle_wxi20_342 {
  margin-top: 2px;
  color: var(--clrTextTertiary);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

._group_wxi20_350 {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 4px;
}

._groupHeader_wxi20_358 {
  margin: 0;
  color: var(--clrTextPrimary);
  font-size: 0.85rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

._groupHint_wxi20_367 {
  margin: 0 0 8px;
  color: var(--clrTextTertiary);
  font-size: 0.8rem;
}

._card_wxi20_373 {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 0;
  background: color-mix(in srgb, var(--clrSecondary) 82%, transparent);
  border: 1px solid var(--clrAccent-10);
  border-radius: 8px;
  overflow: hidden;
}

._row_wxi20_385 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  width: 100%;
  padding: 13px 14px;
  background: none;
  border: 0;
  text-align: left;
  cursor: pointer;
}
._row_wxi20_385 + ._row_wxi20_385 {
  border-top: 1px solid var(--clrAccent-10);
}
._row_wxi20_385:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

._rowDisabled_wxi20_406 {
  opacity: 0.55;
}

._rowIcon_wxi20_410 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 0;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 6px;
  background: var(--clrTertiary);
  color: var(--clrTextPrimary);
}
._rowIcon_wxi20_410 svg {
  width: 18px;
  height: 18px;
}

._rowText_wxi20_428 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 2px;
  flex: 1;
  min-width: 0;
}

._rowLabel_wxi20_438 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  color: var(--clrTextPrimary);
  font-size: 0.95rem;
  font-weight: 700;
}

._rowValue_wxi20_449 {
  max-width: 100%;
  color: var(--clrTextSecondary);
  font-size: 0.8rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

._rowChevron_wxi20_458 {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  color: var(--clrTextTertiary);
}

._proTag_wxi20_465 {
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--clrTertiary);
  border: 1px solid var(--clrAccent-10);
  color: var(--clrTextSecondary);
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.05em;
}

._toggle_wxi20_476 {
  position: relative;
  flex-shrink: 0;
  width: 48px;
  height: 28px;
}
._toggle_wxi20_476 input {
  position: absolute;
  opacity: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  cursor: pointer;
}
._toggle_wxi20_476 input:checked + ._toggleTrack_wxi20_490 {
  background: var(--clrSuccess-50);
}
._toggle_wxi20_476 input:checked + ._toggleTrack_wxi20_490::before {
  transform: translateX(20px);
}
._toggle_wxi20_476 input:disabled {
  cursor: not-allowed;
}
._toggle_wxi20_476 input:disabled + ._toggleTrack_wxi20_490 {
  opacity: 0.5;
}

._toggleTrack_wxi20_490 {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: var(--clrTertiary);
  border: 1px solid var(--clrAccent-10);
  transition: background 0.18s ease;
  pointer-events: none;
}
._toggleTrack_wxi20_490::before {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #FFFFFF;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  transition: transform 0.18s ease;
}

._audiencePanel_wxi20_525 {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 12px;
  width: 100%;
  padding: 4px 4px 8px;
}

._audienceHint_wxi20_535 {
  margin: 0;
  color: var(--clrTextTertiary);
  font-size: 0.8rem;
  line-height: 1.45;
}

._confirmText_wxi20_542 {
  margin: 0;
  color: var(--clrTextSecondary);
  font-size: 0.92rem;
  line-height: 1.5;
}

._confirmActions_wxi20_549 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}
._confirmActions_wxi20_549 button {
  min-height: 44px;
  padding: 0 18px;
  border-radius: 8px;
  font-size: 0.92rem;
  font-weight: 700;
  cursor: pointer;
}
._confirmActions_wxi20_549 button:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

._confirmCancel_wxi20_570 {
  background: var(--clrTertiary);
  border: 1px solid var(--clrAccent-10);
  color: var(--clrTextPrimary);
}

._confirmApply_wxi20_576 {
  background: var(--clrTextPrimary);
  border: 0;
  color: var(--clrSecondary);
}

._titleList_wxi20_582 {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 10px;
  width: 100%;
  padding: 4px 4px 8px;
}

._titleOption_wxi20_592 {
  min-height: 52px;
  padding: 0 18px;
  border-radius: 8px;
  background: var(--clrTertiary);
  border: 2px solid transparent;
  color: var(--clrTextPrimary);
  font-family: var(--font-accent);
  font-size: 1rem;
  font-weight: 800;
  cursor: pointer;
}
._titleOption_wxi20_592:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

._titlePreview_wxi20_609 {
  color: var(--title-ink, #fff);
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.4);
  background: radial-gradient(100% 120% at 50% 50%, color-mix(in srgb, var(--c5, transparent) 55%, transparent), transparent 60%), radial-gradient(120% 140% at 15% 0%, color-mix(in srgb, var(--c2) 70%, transparent), transparent 55%), radial-gradient(120% 140% at 85% 100%, color-mix(in srgb, var(--c3) 70%, transparent), transparent 55%), linear-gradient(115deg, var(--c1), var(--c2), var(--c3), var(--c4));
  background-size: 200% 200%, 200% 200%, 200% 200%, 300% 300%;
  animation: _titleFlow_wxi20_1 9s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  ._titlePreview_wxi20_609 {
    animation: none;
  }
}

._titleSelected_wxi20_622 {
  border-color: var(--clrTextPrimary);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--clrTextPrimary) 25%, transparent);
}

@keyframes _titleFlow_wxi20_1 {
  0% {
    background-position: 50% 0%, 0% 0%, 100% 100%, 0% 50%;
  }
  50% {
    background-position: 50% 100%, 100% 50%, 0% 50%, 100% 50%;
  }
  100% {
    background-position: 50% 0%, 0% 0%, 100% 100%, 0% 50%;
  }
}
._emptyState_wxi20_638 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 40px 20px;
  text-align: center;
  background: color-mix(in srgb, var(--clrSecondary) 82%, transparent);
  border: 1px solid var(--clrAccent-10);
  border-radius: 8px;
}
._emptyState_wxi20_638 p {
  margin: 0;
  color: var(--clrTextSecondary);
}

._emptyCta_wxi20_655 {
  min-height: 44px;
  padding: 0 20px;
  border-radius: 8px;
  background: var(--clrTextPrimary);
  color: var(--clrSecondary);
  border: 0;
  font-weight: 800;
  cursor: pointer;
}

._skeleton_wxi20_666 {
  height: 420px;
  border-radius: 8px;
  background: linear-gradient(90deg, var(--clrTertiary) 25%, color-mix(in srgb, var(--clrTertiary) 60%, transparent) 37%, var(--clrTertiary) 63%);
  background-size: 400% 100%;
  animation: _shimmer_wxi20_1 1.4s ease infinite;
}

@keyframes _shimmer_wxi20_1 {
  0% {
    background-position: 100% 0;
  }
  100% {
    background-position: 0 0;
  }
}
._inlineAction_wxi20_682 {
  flex-shrink: 0;
  padding: 7px 13px;
  border-radius: 999px;
  background: var(--clrTextPrimary);
  color: var(--clrSecondary);
  border: 0;
  font-size: 0.8rem;
  font-weight: 800;
  cursor: pointer;
}
._inlineAction_wxi20_682:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

._progressTrack_wxi20_698 {
  height: 4px;
  margin: 0 14px 12px;
  border-radius: 999px;
  background: var(--clrTertiary);
  overflow: hidden;
}

._progressFill_wxi20_706 {
  width: 100%;
  height: 100%;
  background: var(--clrSuccess-50);
  transform: scaleX(var(--progress, 0));
  transform-origin: left center;
  transition: transform 0.2s ease;
}

._rowNote_wxi20_715 {
  margin: -4px 14px 12px;
  color: var(--clrTextSecondary);
  font-size: 0.78rem;
  line-height: 1.45;
}

._rowNote_wxi20_715 + ._row_wxi20_385,
._progressTrack_wxi20_698 + ._row_wxi20_385 {
  border-top: 1px solid var(--clrAccent-10);
}html {
  color-scheme: dark;
}

html:has(body._themeLight_pfrn3_5),
html:has(body._themePastelLight_pfrn3_6) {
  color-scheme: light;
}

:root {
  --clrPrimary: #F4F4F5;
  --clrPrimary30: rgba(244, 244, 245, 0.3);
  --clrSecondary: #FEFEFE;
  --clrTertiary: #E4E4E7;
  --clrPrimaryReverse: #101418;
  --clrSecondaryReverse: #0A0F14;
  --clrTertiaryReverse: #212327;
  --clrTextPrimary: #101418;
  --clrTextSecondary: #2E3337;
  --clrTextTertiary: #7C7C7C;
  --clrTextPrimaryReverse: #F4F4F5;
  --clrTextSecondaryReverse: #CDCDCD;
  --clrTextTertiaryReverse: #8A8A8A;
  --clrError-100: #641f1f;
  --clrError-50: #c84d4d;
  --clrSuccess-100: #2d692d;
  --clrSuccess-50: #3EA03E;
  --clrSuccessOnTint: #0d260d;
  --clrErrorOnTint: #2e0a0a;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgb(50, 126, 75, 0.1) 30%,
          rgb(94, 178, 122, 0.36) 60%,
          rgb(144, 215, 168) 100%);
  --clrNavBackground: rgba(244, 244, 245, 0.15);
  --clrNavItemActive: rgba(211, 211, 211, 0.4);
  --clrNavItemHover: rgba(0, 0, 0, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #F4F4F5;
  --clrGlassBackground: rgba(255, 255, 255, 0.5);
  --clrGlassBackgroundStrong: rgba(255, 255, 255, 0.3);
  --clrGlassBorder: rgba(0, 0, 0, 0.1);
  --snackbarDefaultBg: #F1ECE9;
  --snackbarDefaultText: #5D605C;
  --snackbarDefaultBorder: #5D605C;
  --snackbarDefaultIcon: #5D605C;
  --snackbarSuccessBg: #E0F1D9;
  --snackbarSuccessText: #358935;
  --snackbarSuccessBorder: #358935;
  --snackbarSuccessIcon: #358935;
  --snackbarErrorBg: #F9E1DC;
  --snackbarErrorText: #C80D12;
  --snackbarErrorBorder: #C80D12;
  --snackbarErrorIcon: #C80D12;
}

._themeLight_pfrn3_5 {
  --clrPrimary: #F4F4F5;
  --clrPrimary30: rgba(244, 244, 245, 0.3);
  --clrSecondary: #FEFEFE;
  --clrTertiary: #E4E4E7;
  --clrPrimaryReverse: #101418;
  --clrSecondaryReverse: #0A0F14;
  --clrTertiaryReverse: #212327;
  --clrTextPrimary: #101418;
  --clrTextSecondary: #2E3337;
  --clrTextTertiary: #7C7C7C;
  --clrTextPrimaryReverse: #F4F4F5;
  --clrTextSecondaryReverse: #CDCDCD;
  --clrTextTertiaryReverse: #8A8A8A;
  --clrError-100: #c03b3b;
  --clrError-50: #f6c5c5;
  --clrSuccess-100: #30d330;
  --clrSuccess-50: #bbffbb;
  --clrSuccessOnTint: #1f4f1f;
  --clrErrorOnTint: #7a1f1f;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgb(50, 126, 75, 0.1) 30%,
          rgb(94, 178, 122, 0.36) 60%,
          rgb(144, 215, 168) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(175, 49, 49, 0.1) 30%,
          rgba(238, 70, 70, 0.36) 60%,
          rgb(255, 173, 173) 100%);
  --clrNavBackground: rgba(244, 244, 245, 0.15);
  --clrNavItemActive: rgba(211, 211, 211, 0.4);
  --clrNavItemHover: rgba(0, 0, 0, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0000c1;
  --clrGlassBackground: rgba(255, 255, 255, 0.5);
  --clrGlassBackgroundStrong: rgba(255, 255, 255, 0.5);
  --clrGlassBorder: rgba(0, 0, 0, 0.1);
  --snackbarDefaultBg: #F1ECE9;
  --snackbarDefaultText: #5D605C;
  --snackbarDefaultBorder: #5D605C;
  --snackbarDefaultIcon: #5D605C;
  --snackbarSuccessBg: #E0F1D9;
  --snackbarSuccessText: #358935;
  --snackbarSuccessBorder: #358935;
  --snackbarSuccessIcon: #358935;
  --snackbarErrorBg: #F9E1DC;
  --snackbarErrorText: #C80D12;
  --snackbarErrorBorder: #C80D12;
  --snackbarErrorIcon: #C80D12;
}

._themeDark_pfrn3_131 {
  --clrPrimary: #0F1418;
  --clrPrimary30: rgba(15, 20, 25, 0.3);
  --clrSecondary: #0A0F14;
  --clrTertiary: #212327;
  --clrPrimaryReverse: #F4F4F5;
  --clrSecondaryReverse: #FEFEFE;
  --clrTertiaryReverse: #E4E4E7;
  --clrTextPrimary: #F4F4F5;
  --clrTextSecondary: #CDCDCD;
  --clrTextTertiary: #8A8A8A;
  --clrTextPrimaryReverse: #101418;
  --clrTextSecondaryReverse: #2E3337;
  --clrTextTertiaryReverse: #7C7C7C;
  --clrError-100: #c84d4d;
  --clrError-50: #641f1f;
  --clrSuccess-100: #3EA03E;
  --clrSuccess-50: #2d692d;
  --clrSuccessOnTint: #d6ffd6;
  --clrErrorOnTint: #ffd6d6;
  --clrWarning-100: #E88434;
  --clrWarning-50: #C49168;
  --clrAccent-100: #FFFFFF;
  --clrAccent-80: rgba(255, 255, 255, 0.8);
  --clrAccent-60: rgba(255, 255, 255, 0.6);
  --clrAccent-50: rgba(255, 255, 255, 0.5);
  --clrAccent-40: rgba(255, 255, 255, 0.4);
  --clrAccent-30: rgba(255, 255, 255, 0.3);
  --clrAccent-20: rgba(255, 255, 255, 0.2);
  --clrAccent-10: rgba(255, 255, 255, 0.1);
  --clrGradient: linear-gradient(90deg, #262a2e 10%, var(--clrPrimary) 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(50, 126, 75, 0.15) 30%,
          rgba(50, 126, 75, 0.3) 60%,
          rgba(50, 126, 75, 0.5) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(167, 44, 44, 0) 0%,
          rgba(167, 44, 44, 0.15) 30%,
          rgba(167, 44, 44, 0.3) 60%,
          rgba(167, 44, 44, 0.5) 100%);
  --clrNavBackground: rgba(0, 0, 0, 0.15);
  --clrNavItemActive: rgba(24, 24, 24, 0.49);
  --clrNavItemHover: rgba(255, 255, 255, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0F1418;
  --clrGlassBackground: rgba(15, 20, 24, 0.5);
  --clrGlassBackgroundStrong: rgba(15, 20, 24, 0.6);
  --clrGlassBorder: rgba(255, 255, 255, 0.1);
  --snackbarDefaultBg: #414141;
  --snackbarDefaultText: #BABABA;
  --snackbarDefaultBorder: #BABABA;
  --snackbarDefaultIcon: #BABABA;
  --snackbarSuccessBg: #145E18;
  --snackbarSuccessText: #8FE094;
  --snackbarSuccessBorder: #8FE094;
  --snackbarSuccessIcon: #8FE094;
  --snackbarErrorBg: #910C09;
  --snackbarErrorText: #FE9E9D;
  --snackbarErrorBorder: #FE9E9D;
  --snackbarErrorIcon: #FE9E9D;
}

/* 

Note: 
    If you want something done quick, ask AI to buuild your color themes.
    If you want to do it right and tidy though, do it manually. 

    - Theo

*/
:root {
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --font-accent: "Jaro", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}

html,
body {
  font-family: var(--font-sans);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

._chip_pfrn3_216, ._tournamentParticipantsChip_pfrn3_216, ._tournamentPositionChip_pfrn3_216, ._tournamentSetChip_pfrn3_216, ._tournamentTypeChip_pfrn3_216 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 2px 6px;
  border: 1px solid transparent;
  border-radius: 4px;
  font-size: 12px;
  height: 20px;
  min-height: 20px;
  max-height: 20px;
  position: relative;
  white-space: nowrap;
  flex-shrink: 0;
}
._chip_pfrn3_216._small_pfrn3_233, ._small_pfrn3_233._tournamentParticipantsChip_pfrn3_216, ._small_pfrn3_233._tournamentPositionChip_pfrn3_216, ._small_pfrn3_233._tournamentSetChip_pfrn3_216, ._small_pfrn3_233._tournamentTypeChip_pfrn3_216 {
  padding: 1px 4px;
  font-size: 9px;
  gap: 2px;
}

._tournamentTypeChip_pfrn3_216 {
  background-color: var(--clrTertiary);
  border: 1px solid var(--clrAccent-60);
  color: var(--clrAccent-100);
}

._typeTesting_pfrn3_245 {
  background-color: #1e3a8a;
  border-color: #3b82f6;
  color: #93c5fd;
}

._typeRegionals_pfrn3_251 {
  box-shadow: inset 0 0 0 1px rgba(255, 215, 0, 0.35), 0 6px 16px rgba(255, 185, 0, 0.25);
  background: linear-gradient(45deg, #ffd700, #ffb02e, #ffd700, #fff8b5, #ffb02e, #ffd700);
  background-size: 300% 300%;
  animation: _gold-shimmer_pfrn3_1 3s ease-in-out infinite;
  border-color: rgba(255, 215, 0, 0.5);
  color: #875c18;
  font-weight: 600;
  position: relative;
  overflow: hidden;
}
._typeRegionals_pfrn3_251::before {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: inherit;
  background: conic-gradient(from 0deg, #fff8b5 0%, #ffd700 15%, #ffb02e 30%, #ffd700 45%, #fff8b5 60%, #ffd700 75%, #ffb02e 90%, #fff8b5 100%);
  filter: blur(4px) saturate(1.2);
  animation: _chip-glow-spin_pfrn3_1 3.2s linear infinite;
  padding: 3px;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  z-index: -1;
}

._typeLcq_pfrn3_279 {
  background-color: #7f1d1d;
  border-color: #dc2626;
  color: #fca5a5;
}

._typeLocal_pfrn3_285 {
  background-color: #14532d;
  border-color: #16a34a;
  color: #86efac;
}

._typeFlagship_pfrn3_291 {
  background-color: #713f12;
  border-color: #eab308;
  color: #fef08a;
}

._typeTreasureCup_pfrn3_297 {
  background-color: #7c2d12;
  border-color: #f97316;
  color: #fdba74;
}

._typeNational_pfrn3_303 {
  background-color: #581c87;
  border-color: #a855f7;
  color: #e9d5ff;
}

._typeWorld_pfrn3_309 {
  box-shadow: inset 0 0 0 1px rgba(255, 215, 0, 0.35), 0 6px 16px rgba(255, 185, 0, 0.25);
  background: linear-gradient(45deg, #ffd700, #ffb02e, #ffd700, #fff8b5, #ffb02e, #ffd700);
  background-size: 300% 300%;
  animation: _gold-shimmer_pfrn3_1 3s ease-in-out infinite;
  border-color: rgba(255, 215, 0, 0.5);
  color: #875c18;
  font-weight: 600;
  position: relative;
  overflow: hidden;
}
._typeWorld_pfrn3_309::before {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: inherit;
  background: conic-gradient(from 0deg, #fff8b5 0%, #ffd700 15%, #ffb02e 30%, #ffd700 45%, #fff8b5 60%, #ffd700 75%, #ffb02e 90%, #fff8b5 100%);
  filter: blur(4px) saturate(1.2);
  animation: _chip-glow-spin_pfrn3_1 3.2s linear infinite;
  padding: 3px;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  z-index: -1;
}

._typeStoreCs_pfrn3_337 {
  background-color: var(--clrTertiary);
  border-color: var(--clrAccent-60);
  color: var(--clrAccent-100);
}

._tournamentSetChip_pfrn3_216 {
  background-color: transparent;
  border: 1px solid var(--clrAccent-60);
  color: var(--clrAccent-60);
}

._tournamentPositionChip_pfrn3_216 {
  background-color: var(--clrAccent-10);
  color: var(--clrAccent-60);
}
._tournamentPositionChip_pfrn3_216 svg {
  font-size: 12px;
}
._tournamentPositionChip_pfrn3_216._small_pfrn3_233 svg {
  font-size: 10px;
}

._tournamentParticipantsChip_pfrn3_216 {
  background-color: var(--clrAccent-10);
  color: var(--clrAccent-60);
}
._tournamentParticipantsChip_pfrn3_216 svg {
  font-size: 12px;
}
._tournamentParticipantsChip_pfrn3_216._small_pfrn3_233 svg {
  font-size: 10px;
}

._firstPlace_pfrn3_371 {
  box-shadow: inset 0 0 0 1px rgba(255, 215, 0, 0.35), 0 6px 16px rgba(255, 185, 0, 0.25);
  font-size: 12px;
  background: linear-gradient(45deg, #ffd700, #ffb02e, #ffd700, #fff8b5, #ffb02e, #ffd700);
  background-size: 300% 300%;
  animation: _gold-shimmer_pfrn3_1 3s ease-in-out infinite;
  color: #875c18;
  font-weight: 600;
  overflow: hidden;
}
._firstPlace_pfrn3_371::before {
  content: "";
  position: absolute;
  inset: -4px;
  /* how far the glow sits outside */
  border-radius: inherit;
  background: conic-gradient(from 0deg, #fff8b5 0%, #ffd700 15%, #ffb02e 30%, #ffd700 45%, #fff8b5 60%, #ffd700 75%, #ffb02e 90%, #fff8b5 100%);
  filter: blur(4px) saturate(1.2);
  animation: _chip-glow-spin_pfrn3_1 3.2s linear infinite;
  padding: 3px;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  /* Safari */
  mask-composite: exclude;
  pointer-events: none;
  z-index: -1;
}

@keyframes _chip-glow-spin_pfrn3_1 {
  to {
    transform: rotate(360deg);
  }
}
@keyframes _gold-shimmer_pfrn3_1 {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
/* Accessibility: respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  ._firstPlace_pfrn3_371::before {
    animation: none;
  }
  ._firstPlace_pfrn3_371 {
    animation: none;
    background: #ffb02e;
    /* fallback to static gold */
  }
  ._typeRegionals_pfrn3_251::before {
    animation: none;
  }
  ._typeRegionals_pfrn3_251 {
    animation: none;
    background: #ffb02e;
    /* fallback to static gold */
  }
  ._typeWorld_pfrn3_309::before {
    animation: none;
  }
  ._typeWorld_pfrn3_309 {
    animation: none;
    background: #ffb02e;
    /* fallback to static gold */
  }
}html {
  color-scheme: dark;
}

html:has(body._themeLight_17plf_5),
html:has(body._themePastelLight_17plf_6) {
  color-scheme: light;
}

:root {
  --clrPrimary: #F4F4F5;
  --clrPrimary30: rgba(244, 244, 245, 0.3);
  --clrSecondary: #FEFEFE;
  --clrTertiary: #E4E4E7;
  --clrPrimaryReverse: #101418;
  --clrSecondaryReverse: #0A0F14;
  --clrTertiaryReverse: #212327;
  --clrTextPrimary: #101418;
  --clrTextSecondary: #2E3337;
  --clrTextTertiary: #7C7C7C;
  --clrTextPrimaryReverse: #F4F4F5;
  --clrTextSecondaryReverse: #CDCDCD;
  --clrTextTertiaryReverse: #8A8A8A;
  --clrError-100: #641f1f;
  --clrError-50: #c84d4d;
  --clrSuccess-100: #2d692d;
  --clrSuccess-50: #3EA03E;
  --clrSuccessOnTint: #0d260d;
  --clrErrorOnTint: #2e0a0a;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgb(50, 126, 75, 0.1) 30%,
          rgb(94, 178, 122, 0.36) 60%,
          rgb(144, 215, 168) 100%);
  --clrNavBackground: rgba(244, 244, 245, 0.15);
  --clrNavItemActive: rgba(211, 211, 211, 0.4);
  --clrNavItemHover: rgba(0, 0, 0, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #F4F4F5;
  --clrGlassBackground: rgba(255, 255, 255, 0.5);
  --clrGlassBackgroundStrong: rgba(255, 255, 255, 0.3);
  --clrGlassBorder: rgba(0, 0, 0, 0.1);
  --snackbarDefaultBg: #F1ECE9;
  --snackbarDefaultText: #5D605C;
  --snackbarDefaultBorder: #5D605C;
  --snackbarDefaultIcon: #5D605C;
  --snackbarSuccessBg: #E0F1D9;
  --snackbarSuccessText: #358935;
  --snackbarSuccessBorder: #358935;
  --snackbarSuccessIcon: #358935;
  --snackbarErrorBg: #F9E1DC;
  --snackbarErrorText: #C80D12;
  --snackbarErrorBorder: #C80D12;
  --snackbarErrorIcon: #C80D12;
}

._themeLight_17plf_5 {
  --clrPrimary: #F4F4F5;
  --clrPrimary30: rgba(244, 244, 245, 0.3);
  --clrSecondary: #FEFEFE;
  --clrTertiary: #E4E4E7;
  --clrPrimaryReverse: #101418;
  --clrSecondaryReverse: #0A0F14;
  --clrTertiaryReverse: #212327;
  --clrTextPrimary: #101418;
  --clrTextSecondary: #2E3337;
  --clrTextTertiary: #7C7C7C;
  --clrTextPrimaryReverse: #F4F4F5;
  --clrTextSecondaryReverse: #CDCDCD;
  --clrTextTertiaryReverse: #8A8A8A;
  --clrError-100: #c03b3b;
  --clrError-50: #f6c5c5;
  --clrSuccess-100: #30d330;
  --clrSuccess-50: #bbffbb;
  --clrSuccessOnTint: #1f4f1f;
  --clrErrorOnTint: #7a1f1f;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgb(50, 126, 75, 0.1) 30%,
          rgb(94, 178, 122, 0.36) 60%,
          rgb(144, 215, 168) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(175, 49, 49, 0.1) 30%,
          rgba(238, 70, 70, 0.36) 60%,
          rgb(255, 173, 173) 100%);
  --clrNavBackground: rgba(244, 244, 245, 0.15);
  --clrNavItemActive: rgba(211, 211, 211, 0.4);
  --clrNavItemHover: rgba(0, 0, 0, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0000c1;
  --clrGlassBackground: rgba(255, 255, 255, 0.5);
  --clrGlassBackgroundStrong: rgba(255, 255, 255, 0.5);
  --clrGlassBorder: rgba(0, 0, 0, 0.1);
  --snackbarDefaultBg: #F1ECE9;
  --snackbarDefaultText: #5D605C;
  --snackbarDefaultBorder: #5D605C;
  --snackbarDefaultIcon: #5D605C;
  --snackbarSuccessBg: #E0F1D9;
  --snackbarSuccessText: #358935;
  --snackbarSuccessBorder: #358935;
  --snackbarSuccessIcon: #358935;
  --snackbarErrorBg: #F9E1DC;
  --snackbarErrorText: #C80D12;
  --snackbarErrorBorder: #C80D12;
  --snackbarErrorIcon: #C80D12;
}

._themeDark_17plf_131 {
  --clrPrimary: #0F1418;
  --clrPrimary30: rgba(15, 20, 25, 0.3);
  --clrSecondary: #0A0F14;
  --clrTertiary: #212327;
  --clrPrimaryReverse: #F4F4F5;
  --clrSecondaryReverse: #FEFEFE;
  --clrTertiaryReverse: #E4E4E7;
  --clrTextPrimary: #F4F4F5;
  --clrTextSecondary: #CDCDCD;
  --clrTextTertiary: #8A8A8A;
  --clrTextPrimaryReverse: #101418;
  --clrTextSecondaryReverse: #2E3337;
  --clrTextTertiaryReverse: #7C7C7C;
  --clrError-100: #c84d4d;
  --clrError-50: #641f1f;
  --clrSuccess-100: #3EA03E;
  --clrSuccess-50: #2d692d;
  --clrSuccessOnTint: #d6ffd6;
  --clrErrorOnTint: #ffd6d6;
  --clrWarning-100: #E88434;
  --clrWarning-50: #C49168;
  --clrAccent-100: #FFFFFF;
  --clrAccent-80: rgba(255, 255, 255, 0.8);
  --clrAccent-60: rgba(255, 255, 255, 0.6);
  --clrAccent-50: rgba(255, 255, 255, 0.5);
  --clrAccent-40: rgba(255, 255, 255, 0.4);
  --clrAccent-30: rgba(255, 255, 255, 0.3);
  --clrAccent-20: rgba(255, 255, 255, 0.2);
  --clrAccent-10: rgba(255, 255, 255, 0.1);
  --clrGradient: linear-gradient(90deg, #262a2e 10%, var(--clrPrimary) 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(50, 126, 75, 0.15) 30%,
          rgba(50, 126, 75, 0.3) 60%,
          rgba(50, 126, 75, 0.5) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(167, 44, 44, 0) 0%,
          rgba(167, 44, 44, 0.15) 30%,
          rgba(167, 44, 44, 0.3) 60%,
          rgba(167, 44, 44, 0.5) 100%);
  --clrNavBackground: rgba(0, 0, 0, 0.15);
  --clrNavItemActive: rgba(24, 24, 24, 0.49);
  --clrNavItemHover: rgba(255, 255, 255, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0F1418;
  --clrGlassBackground: rgba(15, 20, 24, 0.5);
  --clrGlassBackgroundStrong: rgba(15, 20, 24, 0.6);
  --clrGlassBorder: rgba(255, 255, 255, 0.1);
  --snackbarDefaultBg: #414141;
  --snackbarDefaultText: #BABABA;
  --snackbarDefaultBorder: #BABABA;
  --snackbarDefaultIcon: #BABABA;
  --snackbarSuccessBg: #145E18;
  --snackbarSuccessText: #8FE094;
  --snackbarSuccessBorder: #8FE094;
  --snackbarSuccessIcon: #8FE094;
  --snackbarErrorBg: #910C09;
  --snackbarErrorText: #FE9E9D;
  --snackbarErrorBorder: #FE9E9D;
  --snackbarErrorIcon: #FE9E9D;
}

/* 

Note: 
    If you want something done quick, ask AI to buuild your color themes.
    If you want to do it right and tidy though, do it manually. 

    - Theo

*/
:root {
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --font-accent: "Jaro", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}

html,
body {
  font-family: var(--font-sans);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

._tournamentLogContainer_17plf_216 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 0;
  height: 128px;
  width: 100%;
  border: 1px solid var(--clrPrimary);
  border-radius: 8px;
  background: var(--clrGradient);
  transition: all 0.2s ease;
  cursor: pointer;
  box-shadow: 0 0 4px rgba(255, 255, 255, 0.1);
  overflow: hidden;
}
._tournamentLogContainer_17plf_216:hover {
  border-color: var(--clrAccent-30);
  box-shadow: 0 4px 12px var(--clrAccent-10);
  transform: translateY(-2px);
}
._tournamentLogContainer_17plf_216:active {
  border-color: var(--clrAccent-100);
  background-color: var(--clrTertiary);
  transform: translateY(0px);
  transform: scale(0.98);
}
._tournamentLogContainer_17plf_216._editable_17plf_243 {
  cursor: default;
}
._tournamentLogContainer_17plf_216._editable_17plf_243:hover {
  transform: none;
}
._tournamentLogContainer_17plf_216._editable_17plf_243:active {
  transform: none;
}
._tournamentLogContainer_17plf_216._wide_17plf_252 {
  height: 144px;
  border-color: var(--clrTertiary);
  background: linear-gradient(135deg, color-mix(in srgb, var(--clrTextPrimary) 5%, transparent), transparent 58%), color-mix(in srgb, var(--clrSecondary) 88%, transparent);
  box-shadow: inset 0 1px color-mix(in srgb, var(--clrTextPrimary) 5%, transparent);
}
._tournamentLogContainer_17plf_216._wide_17plf_252:hover {
  border-color: var(--clrAccent-30);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.18), inset 0 1px color-mix(in srgb, var(--clrTextPrimary) 8%, transparent);
}
._tournamentLogContainer_17plf_216._wide_17plf_252 ._tournamentLogInfo_17plf_262 {
  gap: 18px;
  padding: 12px;
}
._tournamentLogContainer_17plf_216._wide_17plf_252 ._tournamentLogInfo_17plf_262 ._tournamentLogContent_17plf_266 {
  padding: 4px 0;
}
._tournamentLogContainer_17plf_216._wide_17plf_252 ._tournamentLogInfo_17plf_262 ._tournamentLogContent_17plf_266 ._tournamentLogName_17plf_269 {
  font-size: 18px;
  letter-spacing: -0.015em;
}
._tournamentLogContainer_17plf_216._wide_17plf_252 ._tournamentLogInfo_17plf_262 ._tournamentLogContent_17plf_266 ._tournamentLogDate_17plf_273 {
  margin-top: 3px;
}
._tournamentLogContainer_17plf_216._wide_17plf_252 ._tournamentLogResultContainer_17plf_276 {
  width: 104px;
  min-width: 104px;
  gap: 8px;
  border-left: 1px solid color-mix(in srgb, var(--clrTextPrimary) 7%, transparent);
  background: color-mix(in srgb, var(--clrPrimary) 25%, transparent);
}
._tournamentLogContainer_17plf_216._wide_17plf_252 ._resultValue_17plf_283 {
  color: var(--clrTextPrimary);
  font-size: 21px;
  letter-spacing: -0.025em;
}
._tournamentLogContainer_17plf_216 ._deleteBtn_17plf_288 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  min-width: 0;
  width: 0;
  height: 50px;
  background: transparent;
  border: none;
  border-radius: 300px;
  color: var(--clrError-100);
  font-size: 18px;
  cursor: pointer;
  transition: all 0.3s ease;
  overflow: hidden;
  flex-shrink: 0;
}
._tournamentLogContainer_17plf_216 ._deleteBtn_17plf_288:hover {
  background-color: var(--clrError-50);
}
._tournamentLogContainer_17plf_216 ._deleteBtn_17plf_288._visible_17plf_310 {
  min-width: 48px;
  width: 48px;
  border: 1px solid var(--clrError-100);
  margin-left: 8px;
}
._tournamentLogContainer_17plf_216 ._tournamentLogInfo_17plf_262 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 16px;
  height: 100%;
  min-width: 0;
  flex: 1;
  padding: 8px;
  font-family: var(--font-sans);
}
._tournamentLogContainer_17plf_216 ._tournamentLogInfo_17plf_262 > :first-child {
  flex-shrink: 0;
}
._tournamentLogContainer_17plf_216 ._tournamentLogInfo_17plf_262 ._tournamentLogContent_17plf_266 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  height: 100%;
  min-width: 0;
  flex: 1;
  padding: 2px 0;
  font-family: "Roboto Flex", sans-serif;
}
._tournamentLogContainer_17plf_216 ._tournamentLogInfo_17plf_262 ._tournamentLogContent_17plf_266 ._tournamentLogName_17plf_269 {
  color: var(--clrTextPrimary);
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  word-wrap: break-word;
  overflow-wrap: break-word;
  max-width: 100%;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
._tournamentLogContainer_17plf_216 ._tournamentLogInfo_17plf_262 ._tournamentLogContent_17plf_266 ._tournamentLogName_17plf_269[data-long=true] {
  font-size: 14px;
}
@media (min-width: 768px) {
  ._tournamentLogContainer_17plf_216 ._tournamentLogInfo_17plf_262 ._tournamentLogContent_17plf_266 ._tournamentLogName_17plf_269 {
    font-size: 16px;
  }
}
._tournamentLogContainer_17plf_216 ._tournamentLogInfo_17plf_262 ._tournamentLogContent_17plf_266 ._tournamentLogDate_17plf_273 {
  font-family: var(--font-sans);
  font-size: 10px;
  color: var(--clrAccent-30);
}
@media (min-width: 768px) {
  ._tournamentLogContainer_17plf_216 ._tournamentLogInfo_17plf_262 ._tournamentLogContent_17plf_266 ._tournamentLogDate_17plf_273 {
    font-size: 12px;
  }
}
._tournamentLogContainer_17plf_216 ._tournamentLogInfo_17plf_262 ._tournamentLogContent_17plf_266 ._tournamentLogDetails_17plf_376 {
  font-size: 8px;
  color: var(--clrAccent-60);
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 4px;
  max-width: 100%;
  flex-wrap: wrap;
}
._tournamentLogContainer_17plf_216 ._tournamentLogResultContainer_17plf_276 {
  min-width: 64px;
  width: 64px;
  flex-shrink: 0;
  height: 100%;
  border-radius: 0 7px 7px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
}
._tournamentLogContainer_17plf_216 ._tournamentLogResultContainer_17plf_276 ._resultValue_17plf_283 {
  font-size: 14px;
  font-weight: 600;
  color: var(--clrAccent-80);
}
@media (min-width: 768px) {
  ._tournamentLogContainer_17plf_216 ._tournamentLogResultContainer_17plf_276 ._resultValue_17plf_283 {
    font-size: 16px;
  }
}
._tournamentLogContainer_17plf_216 ._tournamentLogResultContainer_17plf_276 ._resultBlock_17plf_409 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 0;
  width: 100%;
}html {
  color-scheme: dark;
}

html:has(body._themeLight_oj0kx_5),
html:has(body._themePastelLight_oj0kx_6) {
  color-scheme: light;
}

:root {
  --clrPrimary: #F4F4F5;
  --clrPrimary30: rgba(244, 244, 245, 0.3);
  --clrSecondary: #FEFEFE;
  --clrTertiary: #E4E4E7;
  --clrPrimaryReverse: #101418;
  --clrSecondaryReverse: #0A0F14;
  --clrTertiaryReverse: #212327;
  --clrTextPrimary: #101418;
  --clrTextSecondary: #2E3337;
  --clrTextTertiary: #7C7C7C;
  --clrTextPrimaryReverse: #F4F4F5;
  --clrTextSecondaryReverse: #CDCDCD;
  --clrTextTertiaryReverse: #8A8A8A;
  --clrError-100: #641f1f;
  --clrError-50: #c84d4d;
  --clrSuccess-100: #2d692d;
  --clrSuccess-50: #3EA03E;
  --clrSuccessOnTint: #0d260d;
  --clrErrorOnTint: #2e0a0a;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgb(50, 126, 75, 0.1) 30%,
          rgb(94, 178, 122, 0.36) 60%,
          rgb(144, 215, 168) 100%);
  --clrNavBackground: rgba(244, 244, 245, 0.15);
  --clrNavItemActive: rgba(211, 211, 211, 0.4);
  --clrNavItemHover: rgba(0, 0, 0, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #F4F4F5;
  --clrGlassBackground: rgba(255, 255, 255, 0.5);
  --clrGlassBackgroundStrong: rgba(255, 255, 255, 0.3);
  --clrGlassBorder: rgba(0, 0, 0, 0.1);
  --snackbarDefaultBg: #F1ECE9;
  --snackbarDefaultText: #5D605C;
  --snackbarDefaultBorder: #5D605C;
  --snackbarDefaultIcon: #5D605C;
  --snackbarSuccessBg: #E0F1D9;
  --snackbarSuccessText: #358935;
  --snackbarSuccessBorder: #358935;
  --snackbarSuccessIcon: #358935;
  --snackbarErrorBg: #F9E1DC;
  --snackbarErrorText: #C80D12;
  --snackbarErrorBorder: #C80D12;
  --snackbarErrorIcon: #C80D12;
}

._themeLight_oj0kx_5 {
  --clrPrimary: #F4F4F5;
  --clrPrimary30: rgba(244, 244, 245, 0.3);
  --clrSecondary: #FEFEFE;
  --clrTertiary: #E4E4E7;
  --clrPrimaryReverse: #101418;
  --clrSecondaryReverse: #0A0F14;
  --clrTertiaryReverse: #212327;
  --clrTextPrimary: #101418;
  --clrTextSecondary: #2E3337;
  --clrTextTertiary: #7C7C7C;
  --clrTextPrimaryReverse: #F4F4F5;
  --clrTextSecondaryReverse: #CDCDCD;
  --clrTextTertiaryReverse: #8A8A8A;
  --clrError-100: #c03b3b;
  --clrError-50: #f6c5c5;
  --clrSuccess-100: #30d330;
  --clrSuccess-50: #bbffbb;
  --clrSuccessOnTint: #1f4f1f;
  --clrErrorOnTint: #7a1f1f;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgb(50, 126, 75, 0.1) 30%,
          rgb(94, 178, 122, 0.36) 60%,
          rgb(144, 215, 168) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(175, 49, 49, 0.1) 30%,
          rgba(238, 70, 70, 0.36) 60%,
          rgb(255, 173, 173) 100%);
  --clrNavBackground: rgba(244, 244, 245, 0.15);
  --clrNavItemActive: rgba(211, 211, 211, 0.4);
  --clrNavItemHover: rgba(0, 0, 0, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0000c1;
  --clrGlassBackground: rgba(255, 255, 255, 0.5);
  --clrGlassBackgroundStrong: rgba(255, 255, 255, 0.5);
  --clrGlassBorder: rgba(0, 0, 0, 0.1);
  --snackbarDefaultBg: #F1ECE9;
  --snackbarDefaultText: #5D605C;
  --snackbarDefaultBorder: #5D605C;
  --snackbarDefaultIcon: #5D605C;
  --snackbarSuccessBg: #E0F1D9;
  --snackbarSuccessText: #358935;
  --snackbarSuccessBorder: #358935;
  --snackbarSuccessIcon: #358935;
  --snackbarErrorBg: #F9E1DC;
  --snackbarErrorText: #C80D12;
  --snackbarErrorBorder: #C80D12;
  --snackbarErrorIcon: #C80D12;
}

._themeDark_oj0kx_131 {
  --clrPrimary: #0F1418;
  --clrPrimary30: rgba(15, 20, 25, 0.3);
  --clrSecondary: #0A0F14;
  --clrTertiary: #212327;
  --clrPrimaryReverse: #F4F4F5;
  --clrSecondaryReverse: #FEFEFE;
  --clrTertiaryReverse: #E4E4E7;
  --clrTextPrimary: #F4F4F5;
  --clrTextSecondary: #CDCDCD;
  --clrTextTertiary: #8A8A8A;
  --clrTextPrimaryReverse: #101418;
  --clrTextSecondaryReverse: #2E3337;
  --clrTextTertiaryReverse: #7C7C7C;
  --clrError-100: #c84d4d;
  --clrError-50: #641f1f;
  --clrSuccess-100: #3EA03E;
  --clrSuccess-50: #2d692d;
  --clrSuccessOnTint: #d6ffd6;
  --clrErrorOnTint: #ffd6d6;
  --clrWarning-100: #E88434;
  --clrWarning-50: #C49168;
  --clrAccent-100: #FFFFFF;
  --clrAccent-80: rgba(255, 255, 255, 0.8);
  --clrAccent-60: rgba(255, 255, 255, 0.6);
  --clrAccent-50: rgba(255, 255, 255, 0.5);
  --clrAccent-40: rgba(255, 255, 255, 0.4);
  --clrAccent-30: rgba(255, 255, 255, 0.3);
  --clrAccent-20: rgba(255, 255, 255, 0.2);
  --clrAccent-10: rgba(255, 255, 255, 0.1);
  --clrGradient: linear-gradient(90deg, #262a2e 10%, var(--clrPrimary) 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(50, 126, 75, 0.15) 30%,
          rgba(50, 126, 75, 0.3) 60%,
          rgba(50, 126, 75, 0.5) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(167, 44, 44, 0) 0%,
          rgba(167, 44, 44, 0.15) 30%,
          rgba(167, 44, 44, 0.3) 60%,
          rgba(167, 44, 44, 0.5) 100%);
  --clrNavBackground: rgba(0, 0, 0, 0.15);
  --clrNavItemActive: rgba(24, 24, 24, 0.49);
  --clrNavItemHover: rgba(255, 255, 255, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0F1418;
  --clrGlassBackground: rgba(15, 20, 24, 0.5);
  --clrGlassBackgroundStrong: rgba(15, 20, 24, 0.6);
  --clrGlassBorder: rgba(255, 255, 255, 0.1);
  --snackbarDefaultBg: #414141;
  --snackbarDefaultText: #BABABA;
  --snackbarDefaultBorder: #BABABA;
  --snackbarDefaultIcon: #BABABA;
  --snackbarSuccessBg: #145E18;
  --snackbarSuccessText: #8FE094;
  --snackbarSuccessBorder: #8FE094;
  --snackbarSuccessIcon: #8FE094;
  --snackbarErrorBg: #910C09;
  --snackbarErrorText: #FE9E9D;
  --snackbarErrorBorder: #FE9E9D;
  --snackbarErrorIcon: #FE9E9D;
}

/* 

Note: 
    If you want something done quick, ask AI to buuild your color themes.
    If you want to do it right and tidy though, do it manually. 

    - Theo

*/
:root {
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --font-accent: "Jaro", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}

html,
body {
  font-family: var(--font-sans);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

._badge_oj0kx_216 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 4px;
  flex-shrink: 0;
  padding: 2px 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--clrSuccess-50) 30%, transparent);
  border: 1px solid color-mix(in srgb, var(--clrSuccess-100) 45%, transparent);
  color: var(--clrTextSecondary);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}
._badge_oj0kx_216 svg {
  width: 11px;
  height: 11px;
}

._compact_oj0kx_239 {
  width: 22px;
  height: 22px;
  padding: 0;
}
._compact_oj0kx_239 svg {
  width: 12px;
  height: 12px;
}

._srOnly_oj0kx_249 {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}html {
  color-scheme: dark;
}

html:has(body._themeLight_16zav_5),
html:has(body._themePastelLight_16zav_6) {
  color-scheme: light;
}

:root {
  --clrPrimary: #F4F4F5;
  --clrPrimary30: rgba(244, 244, 245, 0.3);
  --clrSecondary: #FEFEFE;
  --clrTertiary: #E4E4E7;
  --clrPrimaryReverse: #101418;
  --clrSecondaryReverse: #0A0F14;
  --clrTertiaryReverse: #212327;
  --clrTextPrimary: #101418;
  --clrTextSecondary: #2E3337;
  --clrTextTertiary: #7C7C7C;
  --clrTextPrimaryReverse: #F4F4F5;
  --clrTextSecondaryReverse: #CDCDCD;
  --clrTextTertiaryReverse: #8A8A8A;
  --clrError-100: #641f1f;
  --clrError-50: #c84d4d;
  --clrSuccess-100: #2d692d;
  --clrSuccess-50: #3EA03E;
  --clrSuccessOnTint: #0d260d;
  --clrErrorOnTint: #2e0a0a;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgb(50, 126, 75, 0.1) 30%,
          rgb(94, 178, 122, 0.36) 60%,
          rgb(144, 215, 168) 100%);
  --clrNavBackground: rgba(244, 244, 245, 0.15);
  --clrNavItemActive: rgba(211, 211, 211, 0.4);
  --clrNavItemHover: rgba(0, 0, 0, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #F4F4F5;
  --clrGlassBackground: rgba(255, 255, 255, 0.5);
  --clrGlassBackgroundStrong: rgba(255, 255, 255, 0.3);
  --clrGlassBorder: rgba(0, 0, 0, 0.1);
  --snackbarDefaultBg: #F1ECE9;
  --snackbarDefaultText: #5D605C;
  --snackbarDefaultBorder: #5D605C;
  --snackbarDefaultIcon: #5D605C;
  --snackbarSuccessBg: #E0F1D9;
  --snackbarSuccessText: #358935;
  --snackbarSuccessBorder: #358935;
  --snackbarSuccessIcon: #358935;
  --snackbarErrorBg: #F9E1DC;
  --snackbarErrorText: #C80D12;
  --snackbarErrorBorder: #C80D12;
  --snackbarErrorIcon: #C80D12;
}

._themeLight_16zav_5 {
  --clrPrimary: #F4F4F5;
  --clrPrimary30: rgba(244, 244, 245, 0.3);
  --clrSecondary: #FEFEFE;
  --clrTertiary: #E4E4E7;
  --clrPrimaryReverse: #101418;
  --clrSecondaryReverse: #0A0F14;
  --clrTertiaryReverse: #212327;
  --clrTextPrimary: #101418;
  --clrTextSecondary: #2E3337;
  --clrTextTertiary: #7C7C7C;
  --clrTextPrimaryReverse: #F4F4F5;
  --clrTextSecondaryReverse: #CDCDCD;
  --clrTextTertiaryReverse: #8A8A8A;
  --clrError-100: #c03b3b;
  --clrError-50: #f6c5c5;
  --clrSuccess-100: #30d330;
  --clrSuccess-50: #bbffbb;
  --clrSuccessOnTint: #1f4f1f;
  --clrErrorOnTint: #7a1f1f;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgb(50, 126, 75, 0.1) 30%,
          rgb(94, 178, 122, 0.36) 60%,
          rgb(144, 215, 168) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(175, 49, 49, 0.1) 30%,
          rgba(238, 70, 70, 0.36) 60%,
          rgb(255, 173, 173) 100%);
  --clrNavBackground: rgba(244, 244, 245, 0.15);
  --clrNavItemActive: rgba(211, 211, 211, 0.4);
  --clrNavItemHover: rgba(0, 0, 0, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0000c1;
  --clrGlassBackground: rgba(255, 255, 255, 0.5);
  --clrGlassBackgroundStrong: rgba(255, 255, 255, 0.5);
  --clrGlassBorder: rgba(0, 0, 0, 0.1);
  --snackbarDefaultBg: #F1ECE9;
  --snackbarDefaultText: #5D605C;
  --snackbarDefaultBorder: #5D605C;
  --snackbarDefaultIcon: #5D605C;
  --snackbarSuccessBg: #E0F1D9;
  --snackbarSuccessText: #358935;
  --snackbarSuccessBorder: #358935;
  --snackbarSuccessIcon: #358935;
  --snackbarErrorBg: #F9E1DC;
  --snackbarErrorText: #C80D12;
  --snackbarErrorBorder: #C80D12;
  --snackbarErrorIcon: #C80D12;
}

._themeDark_16zav_131 {
  --clrPrimary: #0F1418;
  --clrPrimary30: rgba(15, 20, 25, 0.3);
  --clrSecondary: #0A0F14;
  --clrTertiary: #212327;
  --clrPrimaryReverse: #F4F4F5;
  --clrSecondaryReverse: #FEFEFE;
  --clrTertiaryReverse: #E4E4E7;
  --clrTextPrimary: #F4F4F5;
  --clrTextSecondary: #CDCDCD;
  --clrTextTertiary: #8A8A8A;
  --clrTextPrimaryReverse: #101418;
  --clrTextSecondaryReverse: #2E3337;
  --clrTextTertiaryReverse: #7C7C7C;
  --clrError-100: #c84d4d;
  --clrError-50: #641f1f;
  --clrSuccess-100: #3EA03E;
  --clrSuccess-50: #2d692d;
  --clrSuccessOnTint: #d6ffd6;
  --clrErrorOnTint: #ffd6d6;
  --clrWarning-100: #E88434;
  --clrWarning-50: #C49168;
  --clrAccent-100: #FFFFFF;
  --clrAccent-80: rgba(255, 255, 255, 0.8);
  --clrAccent-60: rgba(255, 255, 255, 0.6);
  --clrAccent-50: rgba(255, 255, 255, 0.5);
  --clrAccent-40: rgba(255, 255, 255, 0.4);
  --clrAccent-30: rgba(255, 255, 255, 0.3);
  --clrAccent-20: rgba(255, 255, 255, 0.2);
  --clrAccent-10: rgba(255, 255, 255, 0.1);
  --clrGradient: linear-gradient(90deg, #262a2e 10%, var(--clrPrimary) 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(50, 126, 75, 0.15) 30%,
          rgba(50, 126, 75, 0.3) 60%,
          rgba(50, 126, 75, 0.5) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(167, 44, 44, 0) 0%,
          rgba(167, 44, 44, 0.15) 30%,
          rgba(167, 44, 44, 0.3) 60%,
          rgba(167, 44, 44, 0.5) 100%);
  --clrNavBackground: rgba(0, 0, 0, 0.15);
  --clrNavItemActive: rgba(24, 24, 24, 0.49);
  --clrNavItemHover: rgba(255, 255, 255, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0F1418;
  --clrGlassBackground: rgba(15, 20, 24, 0.5);
  --clrGlassBackgroundStrong: rgba(15, 20, 24, 0.6);
  --clrGlassBorder: rgba(255, 255, 255, 0.1);
  --snackbarDefaultBg: #414141;
  --snackbarDefaultText: #BABABA;
  --snackbarDefaultBorder: #BABABA;
  --snackbarDefaultIcon: #BABABA;
  --snackbarSuccessBg: #145E18;
  --snackbarSuccessText: #8FE094;
  --snackbarSuccessBorder: #8FE094;
  --snackbarSuccessIcon: #8FE094;
  --snackbarErrorBg: #910C09;
  --snackbarErrorText: #FE9E9D;
  --snackbarErrorBorder: #FE9E9D;
  --snackbarErrorIcon: #FE9E9D;
}

/* 

Note: 
    If you want something done quick, ask AI to buuild your color themes.
    If you want to do it right and tidy though, do it manually. 

    - Theo

*/
:root {
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --font-accent: "Jaro", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}

html,
body {
  font-family: var(--font-sans);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

._chip_16zav_216 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  width: 24px;
  height: 24px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  font-size: 10px;
  font-weight: 600;
  font-family: var(--font-sans);
  text-align: center;
  color: var(--clrPrimaryReverse);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}
._chip_16zav_216._empty_16zav_233 {
  border: 1px solid rgba(255, 255, 255, 0.3);
  background: transparent;
}
._chip_16zav_216._win_16zav_237 {
  border-color: var(--clrSuccess-100);
  color: var(--clrSuccessOnTint);
  background-color: var(--clrSuccess-50);
}
._chip_16zav_216._lose_16zav_242 {
  border-color: var(--clrError-100);
  color: var(--clrErrorOnTint);
  background-color: var(--clrError-50);
}
._chip_16zav_216._diceWin_16zav_247 {
  opacity: 1;
}
._chip_16zav_216._diceLose_16zav_250 {
  opacity: 0.35;
}html {
  color-scheme: dark;
}

html:has(body._themeLight_neugx_5),
html:has(body._themePastelLight_neugx_6) {
  color-scheme: light;
}

:root {
  --clrPrimary: #F4F4F5;
  --clrPrimary30: rgba(244, 244, 245, 0.3);
  --clrSecondary: #FEFEFE;
  --clrTertiary: #E4E4E7;
  --clrPrimaryReverse: #101418;
  --clrSecondaryReverse: #0A0F14;
  --clrTertiaryReverse: #212327;
  --clrTextPrimary: #101418;
  --clrTextSecondary: #2E3337;
  --clrTextTertiary: #7C7C7C;
  --clrTextPrimaryReverse: #F4F4F5;
  --clrTextSecondaryReverse: #CDCDCD;
  --clrTextTertiaryReverse: #8A8A8A;
  --clrError-100: #641f1f;
  --clrError-50: #c84d4d;
  --clrSuccess-100: #2d692d;
  --clrSuccess-50: #3EA03E;
  --clrSuccessOnTint: #0d260d;
  --clrErrorOnTint: #2e0a0a;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgb(50, 126, 75, 0.1) 30%,
          rgb(94, 178, 122, 0.36) 60%,
          rgb(144, 215, 168) 100%);
  --clrNavBackground: rgba(244, 244, 245, 0.15);
  --clrNavItemActive: rgba(211, 211, 211, 0.4);
  --clrNavItemHover: rgba(0, 0, 0, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #F4F4F5;
  --clrGlassBackground: rgba(255, 255, 255, 0.5);
  --clrGlassBackgroundStrong: rgba(255, 255, 255, 0.3);
  --clrGlassBorder: rgba(0, 0, 0, 0.1);
  --snackbarDefaultBg: #F1ECE9;
  --snackbarDefaultText: #5D605C;
  --snackbarDefaultBorder: #5D605C;
  --snackbarDefaultIcon: #5D605C;
  --snackbarSuccessBg: #E0F1D9;
  --snackbarSuccessText: #358935;
  --snackbarSuccessBorder: #358935;
  --snackbarSuccessIcon: #358935;
  --snackbarErrorBg: #F9E1DC;
  --snackbarErrorText: #C80D12;
  --snackbarErrorBorder: #C80D12;
  --snackbarErrorIcon: #C80D12;
}

._themeLight_neugx_5 {
  --clrPrimary: #F4F4F5;
  --clrPrimary30: rgba(244, 244, 245, 0.3);
  --clrSecondary: #FEFEFE;
  --clrTertiary: #E4E4E7;
  --clrPrimaryReverse: #101418;
  --clrSecondaryReverse: #0A0F14;
  --clrTertiaryReverse: #212327;
  --clrTextPrimary: #101418;
  --clrTextSecondary: #2E3337;
  --clrTextTertiary: #7C7C7C;
  --clrTextPrimaryReverse: #F4F4F5;
  --clrTextSecondaryReverse: #CDCDCD;
  --clrTextTertiaryReverse: #8A8A8A;
  --clrError-100: #c03b3b;
  --clrError-50: #f6c5c5;
  --clrSuccess-100: #30d330;
  --clrSuccess-50: #bbffbb;
  --clrSuccessOnTint: #1f4f1f;
  --clrErrorOnTint: #7a1f1f;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgb(50, 126, 75, 0.1) 30%,
          rgb(94, 178, 122, 0.36) 60%,
          rgb(144, 215, 168) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(175, 49, 49, 0.1) 30%,
          rgba(238, 70, 70, 0.36) 60%,
          rgb(255, 173, 173) 100%);
  --clrNavBackground: rgba(244, 244, 245, 0.15);
  --clrNavItemActive: rgba(211, 211, 211, 0.4);
  --clrNavItemHover: rgba(0, 0, 0, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0000c1;
  --clrGlassBackground: rgba(255, 255, 255, 0.5);
  --clrGlassBackgroundStrong: rgba(255, 255, 255, 0.5);
  --clrGlassBorder: rgba(0, 0, 0, 0.1);
  --snackbarDefaultBg: #F1ECE9;
  --snackbarDefaultText: #5D605C;
  --snackbarDefaultBorder: #5D605C;
  --snackbarDefaultIcon: #5D605C;
  --snackbarSuccessBg: #E0F1D9;
  --snackbarSuccessText: #358935;
  --snackbarSuccessBorder: #358935;
  --snackbarSuccessIcon: #358935;
  --snackbarErrorBg: #F9E1DC;
  --snackbarErrorText: #C80D12;
  --snackbarErrorBorder: #C80D12;
  --snackbarErrorIcon: #C80D12;
}

._themeDark_neugx_131 {
  --clrPrimary: #0F1418;
  --clrPrimary30: rgba(15, 20, 25, 0.3);
  --clrSecondary: #0A0F14;
  --clrTertiary: #212327;
  --clrPrimaryReverse: #F4F4F5;
  --clrSecondaryReverse: #FEFEFE;
  --clrTertiaryReverse: #E4E4E7;
  --clrTextPrimary: #F4F4F5;
  --clrTextSecondary: #CDCDCD;
  --clrTextTertiary: #8A8A8A;
  --clrTextPrimaryReverse: #101418;
  --clrTextSecondaryReverse: #2E3337;
  --clrTextTertiaryReverse: #7C7C7C;
  --clrError-100: #c84d4d;
  --clrError-50: #641f1f;
  --clrSuccess-100: #3EA03E;
  --clrSuccess-50: #2d692d;
  --clrSuccessOnTint: #d6ffd6;
  --clrErrorOnTint: #ffd6d6;
  --clrWarning-100: #E88434;
  --clrWarning-50: #C49168;
  --clrAccent-100: #FFFFFF;
  --clrAccent-80: rgba(255, 255, 255, 0.8);
  --clrAccent-60: rgba(255, 255, 255, 0.6);
  --clrAccent-50: rgba(255, 255, 255, 0.5);
  --clrAccent-40: rgba(255, 255, 255, 0.4);
  --clrAccent-30: rgba(255, 255, 255, 0.3);
  --clrAccent-20: rgba(255, 255, 255, 0.2);
  --clrAccent-10: rgba(255, 255, 255, 0.1);
  --clrGradient: linear-gradient(90deg, #262a2e 10%, var(--clrPrimary) 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(50, 126, 75, 0.15) 30%,
          rgba(50, 126, 75, 0.3) 60%,
          rgba(50, 126, 75, 0.5) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(167, 44, 44, 0) 0%,
          rgba(167, 44, 44, 0.15) 30%,
          rgba(167, 44, 44, 0.3) 60%,
          rgba(167, 44, 44, 0.5) 100%);
  --clrNavBackground: rgba(0, 0, 0, 0.15);
  --clrNavItemActive: rgba(24, 24, 24, 0.49);
  --clrNavItemHover: rgba(255, 255, 255, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0F1418;
  --clrGlassBackground: rgba(15, 20, 24, 0.5);
  --clrGlassBackgroundStrong: rgba(15, 20, 24, 0.6);
  --clrGlassBorder: rgba(255, 255, 255, 0.1);
  --snackbarDefaultBg: #414141;
  --snackbarDefaultText: #BABABA;
  --snackbarDefaultBorder: #BABABA;
  --snackbarDefaultIcon: #BABABA;
  --snackbarSuccessBg: #145E18;
  --snackbarSuccessText: #8FE094;
  --snackbarSuccessBorder: #8FE094;
  --snackbarSuccessIcon: #8FE094;
  --snackbarErrorBg: #910C09;
  --snackbarErrorText: #FE9E9D;
  --snackbarErrorBorder: #FE9E9D;
  --snackbarErrorIcon: #FE9E9D;
}

/* 

Note: 
    If you want something done quick, ask AI to buuild your color themes.
    If you want to do it right and tidy though, do it manually. 

    - Theo

*/
:root {
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --font-accent: "Jaro", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}

html,
body {
  font-family: var(--font-sans);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

._loaderContainer_neugx_216 {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 24px;
  background: var(--clrPrimary);
  z-index: 9999;
}
._loaderContainer_neugx_216 ._loader_neugx_216 {
  width: 65px;
  height: 30px;
  position: relative;
}
._loaderContainer_neugx_216 ._loader_neugx_216:before {
  content: "";
  position: absolute;
  border-radius: 50px;
  box-shadow: 0 0 0 3px inset var(--clrAccent-100);
  animation: _l3_neugx_1 0.75s infinite alternate;
}
@keyframes _l3_neugx_1 {
  0% {
    inset: 0 35px 0 0;
  }
  50% {
    inset: 0 0 0 0;
  }
  100% {
    inset: 0 0 0 35px;
  }
}html {
  color-scheme: dark;
}

html:has(body._themeLight_bnzkp_5),
html:has(body._themePastelLight_bnzkp_6) {
  color-scheme: light;
}

:root {
  --clrPrimary: #F4F4F5;
  --clrPrimary30: rgba(244, 244, 245, 0.3);
  --clrSecondary: #FEFEFE;
  --clrTertiary: #E4E4E7;
  --clrPrimaryReverse: #101418;
  --clrSecondaryReverse: #0A0F14;
  --clrTertiaryReverse: #212327;
  --clrTextPrimary: #101418;
  --clrTextSecondary: #2E3337;
  --clrTextTertiary: #7C7C7C;
  --clrTextPrimaryReverse: #F4F4F5;
  --clrTextSecondaryReverse: #CDCDCD;
  --clrTextTertiaryReverse: #8A8A8A;
  --clrError-100: #641f1f;
  --clrError-50: #c84d4d;
  --clrSuccess-100: #2d692d;
  --clrSuccess-50: #3EA03E;
  --clrSuccessOnTint: #0d260d;
  --clrErrorOnTint: #2e0a0a;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgb(50, 126, 75, 0.1) 30%,
          rgb(94, 178, 122, 0.36) 60%,
          rgb(144, 215, 168) 100%);
  --clrNavBackground: rgba(244, 244, 245, 0.15);
  --clrNavItemActive: rgba(211, 211, 211, 0.4);
  --clrNavItemHover: rgba(0, 0, 0, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #F4F4F5;
  --clrGlassBackground: rgba(255, 255, 255, 0.5);
  --clrGlassBackgroundStrong: rgba(255, 255, 255, 0.3);
  --clrGlassBorder: rgba(0, 0, 0, 0.1);
  --snackbarDefaultBg: #F1ECE9;
  --snackbarDefaultText: #5D605C;
  --snackbarDefaultBorder: #5D605C;
  --snackbarDefaultIcon: #5D605C;
  --snackbarSuccessBg: #E0F1D9;
  --snackbarSuccessText: #358935;
  --snackbarSuccessBorder: #358935;
  --snackbarSuccessIcon: #358935;
  --snackbarErrorBg: #F9E1DC;
  --snackbarErrorText: #C80D12;
  --snackbarErrorBorder: #C80D12;
  --snackbarErrorIcon: #C80D12;
}

._themeLight_bnzkp_5 {
  --clrPrimary: #F4F4F5;
  --clrPrimary30: rgba(244, 244, 245, 0.3);
  --clrSecondary: #FEFEFE;
  --clrTertiary: #E4E4E7;
  --clrPrimaryReverse: #101418;
  --clrSecondaryReverse: #0A0F14;
  --clrTertiaryReverse: #212327;
  --clrTextPrimary: #101418;
  --clrTextSecondary: #2E3337;
  --clrTextTertiary: #7C7C7C;
  --clrTextPrimaryReverse: #F4F4F5;
  --clrTextSecondaryReverse: #CDCDCD;
  --clrTextTertiaryReverse: #8A8A8A;
  --clrError-100: #c03b3b;
  --clrError-50: #f6c5c5;
  --clrSuccess-100: #30d330;
  --clrSuccess-50: #bbffbb;
  --clrSuccessOnTint: #1f4f1f;
  --clrErrorOnTint: #7a1f1f;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgb(50, 126, 75, 0.1) 30%,
          rgb(94, 178, 122, 0.36) 60%,
          rgb(144, 215, 168) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(175, 49, 49, 0.1) 30%,
          rgba(238, 70, 70, 0.36) 60%,
          rgb(255, 173, 173) 100%);
  --clrNavBackground: rgba(244, 244, 245, 0.15);
  --clrNavItemActive: rgba(211, 211, 211, 0.4);
  --clrNavItemHover: rgba(0, 0, 0, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0000c1;
  --clrGlassBackground: rgba(255, 255, 255, 0.5);
  --clrGlassBackgroundStrong: rgba(255, 255, 255, 0.5);
  --clrGlassBorder: rgba(0, 0, 0, 0.1);
  --snackbarDefaultBg: #F1ECE9;
  --snackbarDefaultText: #5D605C;
  --snackbarDefaultBorder: #5D605C;
  --snackbarDefaultIcon: #5D605C;
  --snackbarSuccessBg: #E0F1D9;
  --snackbarSuccessText: #358935;
  --snackbarSuccessBorder: #358935;
  --snackbarSuccessIcon: #358935;
  --snackbarErrorBg: #F9E1DC;
  --snackbarErrorText: #C80D12;
  --snackbarErrorBorder: #C80D12;
  --snackbarErrorIcon: #C80D12;
}

._themeDark_bnzkp_131 {
  --clrPrimary: #0F1418;
  --clrPrimary30: rgba(15, 20, 25, 0.3);
  --clrSecondary: #0A0F14;
  --clrTertiary: #212327;
  --clrPrimaryReverse: #F4F4F5;
  --clrSecondaryReverse: #FEFEFE;
  --clrTertiaryReverse: #E4E4E7;
  --clrTextPrimary: #F4F4F5;
  --clrTextSecondary: #CDCDCD;
  --clrTextTertiary: #8A8A8A;
  --clrTextPrimaryReverse: #101418;
  --clrTextSecondaryReverse: #2E3337;
  --clrTextTertiaryReverse: #7C7C7C;
  --clrError-100: #c84d4d;
  --clrError-50: #641f1f;
  --clrSuccess-100: #3EA03E;
  --clrSuccess-50: #2d692d;
  --clrSuccessOnTint: #d6ffd6;
  --clrErrorOnTint: #ffd6d6;
  --clrWarning-100: #E88434;
  --clrWarning-50: #C49168;
  --clrAccent-100: #FFFFFF;
  --clrAccent-80: rgba(255, 255, 255, 0.8);
  --clrAccent-60: rgba(255, 255, 255, 0.6);
  --clrAccent-50: rgba(255, 255, 255, 0.5);
  --clrAccent-40: rgba(255, 255, 255, 0.4);
  --clrAccent-30: rgba(255, 255, 255, 0.3);
  --clrAccent-20: rgba(255, 255, 255, 0.2);
  --clrAccent-10: rgba(255, 255, 255, 0.1);
  --clrGradient: linear-gradient(90deg, #262a2e 10%, var(--clrPrimary) 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(50, 126, 75, 0.15) 30%,
          rgba(50, 126, 75, 0.3) 60%,
          rgba(50, 126, 75, 0.5) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(167, 44, 44, 0) 0%,
          rgba(167, 44, 44, 0.15) 30%,
          rgba(167, 44, 44, 0.3) 60%,
          rgba(167, 44, 44, 0.5) 100%);
  --clrNavBackground: rgba(0, 0, 0, 0.15);
  --clrNavItemActive: rgba(24, 24, 24, 0.49);
  --clrNavItemHover: rgba(255, 255, 255, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0F1418;
  --clrGlassBackground: rgba(15, 20, 24, 0.5);
  --clrGlassBackgroundStrong: rgba(15, 20, 24, 0.6);
  --clrGlassBorder: rgba(255, 255, 255, 0.1);
  --snackbarDefaultBg: #414141;
  --snackbarDefaultText: #BABABA;
  --snackbarDefaultBorder: #BABABA;
  --snackbarDefaultIcon: #BABABA;
  --snackbarSuccessBg: #145E18;
  --snackbarSuccessText: #8FE094;
  --snackbarSuccessBorder: #8FE094;
  --snackbarSuccessIcon: #8FE094;
  --snackbarErrorBg: #910C09;
  --snackbarErrorText: #FE9E9D;
  --snackbarErrorBorder: #FE9E9D;
  --snackbarErrorIcon: #FE9E9D;
}

/* 

Note: 
    If you want something done quick, ask AI to buuild your color themes.
    If you want to do it right and tidy though, do it manually. 

    - Theo

*/
:root {
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --font-accent: "Jaro", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}

html,
body {
  font-family: var(--font-sans);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

._inlineLoaderContainer_bnzkp_216 {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: 24px 0;
  margin: 8px 0;
}
._inlineLoaderContainer_bnzkp_216 ._loader_bnzkp_226 {
  width: 40px;
  height: 18px;
  position: relative;
}
._inlineLoaderContainer_bnzkp_216 ._loader_bnzkp_226:before {
  content: "";
  position: absolute;
  border-radius: 50px;
  box-shadow: 0 0 0 2px inset var(--clrAccent-100);
  animation: _pulse_bnzkp_1 0.8s infinite alternate;
}
@keyframes _pulse_bnzkp_1 {
  0% {
    inset: 0 22px 0 0;
    opacity: 0.4;
  }
  50% {
    inset: 0 0 0 0;
    opacity: 1;
  }
  100% {
    inset: 0 0 0 22px;
    opacity: 0.4;
  }
}html {
  color-scheme: dark;
}

html:has(body._themeLight_xj8dg_5),
html:has(body._themePastelLight_xj8dg_6) {
  color-scheme: light;
}

:root {
  --clrPrimary: #F4F4F5;
  --clrPrimary30: rgba(244, 244, 245, 0.3);
  --clrSecondary: #FEFEFE;
  --clrTertiary: #E4E4E7;
  --clrPrimaryReverse: #101418;
  --clrSecondaryReverse: #0A0F14;
  --clrTertiaryReverse: #212327;
  --clrTextPrimary: #101418;
  --clrTextSecondary: #2E3337;
  --clrTextTertiary: #7C7C7C;
  --clrTextPrimaryReverse: #F4F4F5;
  --clrTextSecondaryReverse: #CDCDCD;
  --clrTextTertiaryReverse: #8A8A8A;
  --clrError-100: #641f1f;
  --clrError-50: #c84d4d;
  --clrSuccess-100: #2d692d;
  --clrSuccess-50: #3EA03E;
  --clrSuccessOnTint: #0d260d;
  --clrErrorOnTint: #2e0a0a;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgb(50, 126, 75, 0.1) 30%,
          rgb(94, 178, 122, 0.36) 60%,
          rgb(144, 215, 168) 100%);
  --clrNavBackground: rgba(244, 244, 245, 0.15);
  --clrNavItemActive: rgba(211, 211, 211, 0.4);
  --clrNavItemHover: rgba(0, 0, 0, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #F4F4F5;
  --clrGlassBackground: rgba(255, 255, 255, 0.5);
  --clrGlassBackgroundStrong: rgba(255, 255, 255, 0.3);
  --clrGlassBorder: rgba(0, 0, 0, 0.1);
  --snackbarDefaultBg: #F1ECE9;
  --snackbarDefaultText: #5D605C;
  --snackbarDefaultBorder: #5D605C;
  --snackbarDefaultIcon: #5D605C;
  --snackbarSuccessBg: #E0F1D9;
  --snackbarSuccessText: #358935;
  --snackbarSuccessBorder: #358935;
  --snackbarSuccessIcon: #358935;
  --snackbarErrorBg: #F9E1DC;
  --snackbarErrorText: #C80D12;
  --snackbarErrorBorder: #C80D12;
  --snackbarErrorIcon: #C80D12;
}

._themeLight_xj8dg_5 {
  --clrPrimary: #F4F4F5;
  --clrPrimary30: rgba(244, 244, 245, 0.3);
  --clrSecondary: #FEFEFE;
  --clrTertiary: #E4E4E7;
  --clrPrimaryReverse: #101418;
  --clrSecondaryReverse: #0A0F14;
  --clrTertiaryReverse: #212327;
  --clrTextPrimary: #101418;
  --clrTextSecondary: #2E3337;
  --clrTextTertiary: #7C7C7C;
  --clrTextPrimaryReverse: #F4F4F5;
  --clrTextSecondaryReverse: #CDCDCD;
  --clrTextTertiaryReverse: #8A8A8A;
  --clrError-100: #c03b3b;
  --clrError-50: #f6c5c5;
  --clrSuccess-100: #30d330;
  --clrSuccess-50: #bbffbb;
  --clrSuccessOnTint: #1f4f1f;
  --clrErrorOnTint: #7a1f1f;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgb(50, 126, 75, 0.1) 30%,
          rgb(94, 178, 122, 0.36) 60%,
          rgb(144, 215, 168) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(175, 49, 49, 0.1) 30%,
          rgba(238, 70, 70, 0.36) 60%,
          rgb(255, 173, 173) 100%);
  --clrNavBackground: rgba(244, 244, 245, 0.15);
  --clrNavItemActive: rgba(211, 211, 211, 0.4);
  --clrNavItemHover: rgba(0, 0, 0, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0000c1;
  --clrGlassBackground: rgba(255, 255, 255, 0.5);
  --clrGlassBackgroundStrong: rgba(255, 255, 255, 0.5);
  --clrGlassBorder: rgba(0, 0, 0, 0.1);
  --snackbarDefaultBg: #F1ECE9;
  --snackbarDefaultText: #5D605C;
  --snackbarDefaultBorder: #5D605C;
  --snackbarDefaultIcon: #5D605C;
  --snackbarSuccessBg: #E0F1D9;
  --snackbarSuccessText: #358935;
  --snackbarSuccessBorder: #358935;
  --snackbarSuccessIcon: #358935;
  --snackbarErrorBg: #F9E1DC;
  --snackbarErrorText: #C80D12;
  --snackbarErrorBorder: #C80D12;
  --snackbarErrorIcon: #C80D12;
}

._themeDark_xj8dg_131 {
  --clrPrimary: #0F1418;
  --clrPrimary30: rgba(15, 20, 25, 0.3);
  --clrSecondary: #0A0F14;
  --clrTertiary: #212327;
  --clrPrimaryReverse: #F4F4F5;
  --clrSecondaryReverse: #FEFEFE;
  --clrTertiaryReverse: #E4E4E7;
  --clrTextPrimary: #F4F4F5;
  --clrTextSecondary: #CDCDCD;
  --clrTextTertiary: #8A8A8A;
  --clrTextPrimaryReverse: #101418;
  --clrTextSecondaryReverse: #2E3337;
  --clrTextTertiaryReverse: #7C7C7C;
  --clrError-100: #c84d4d;
  --clrError-50: #641f1f;
  --clrSuccess-100: #3EA03E;
  --clrSuccess-50: #2d692d;
  --clrSuccessOnTint: #d6ffd6;
  --clrErrorOnTint: #ffd6d6;
  --clrWarning-100: #E88434;
  --clrWarning-50: #C49168;
  --clrAccent-100: #FFFFFF;
  --clrAccent-80: rgba(255, 255, 255, 0.8);
  --clrAccent-60: rgba(255, 255, 255, 0.6);
  --clrAccent-50: rgba(255, 255, 255, 0.5);
  --clrAccent-40: rgba(255, 255, 255, 0.4);
  --clrAccent-30: rgba(255, 255, 255, 0.3);
  --clrAccent-20: rgba(255, 255, 255, 0.2);
  --clrAccent-10: rgba(255, 255, 255, 0.1);
  --clrGradient: linear-gradient(90deg, #262a2e 10%, var(--clrPrimary) 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(50, 126, 75, 0.15) 30%,
          rgba(50, 126, 75, 0.3) 60%,
          rgba(50, 126, 75, 0.5) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(167, 44, 44, 0) 0%,
          rgba(167, 44, 44, 0.15) 30%,
          rgba(167, 44, 44, 0.3) 60%,
          rgba(167, 44, 44, 0.5) 100%);
  --clrNavBackground: rgba(0, 0, 0, 0.15);
  --clrNavItemActive: rgba(24, 24, 24, 0.49);
  --clrNavItemHover: rgba(255, 255, 255, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0F1418;
  --clrGlassBackground: rgba(15, 20, 24, 0.5);
  --clrGlassBackgroundStrong: rgba(15, 20, 24, 0.6);
  --clrGlassBorder: rgba(255, 255, 255, 0.1);
  --snackbarDefaultBg: #414141;
  --snackbarDefaultText: #BABABA;
  --snackbarDefaultBorder: #BABABA;
  --snackbarDefaultIcon: #BABABA;
  --snackbarSuccessBg: #145E18;
  --snackbarSuccessText: #8FE094;
  --snackbarSuccessBorder: #8FE094;
  --snackbarSuccessIcon: #8FE094;
  --snackbarErrorBg: #910C09;
  --snackbarErrorText: #FE9E9D;
  --snackbarErrorBorder: #FE9E9D;
  --snackbarErrorIcon: #FE9E9D;
}

/* 

Note: 
    If you want something done quick, ask AI to buuild your color themes.
    If you want to do it right and tidy though, do it manually. 

    - Theo

*/
:root {
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --font-accent: "Jaro", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}

html,
body {
  font-family: var(--font-sans);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

._emptyState_xj8dg_216 {
  width: 100%;
  min-height: calc(100vh - 200px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: 40px 20px;
}

._content_xj8dg_227 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  max-width: 400px;
  text-align: center;
}

._title_xj8dg_237 {
  font-size: 20px;
  font-weight: 600;
  color: var(--clrAccent-80);
  margin: 32px 0 8px 0;
}

._description_xj8dg_244 {
  font-size: 14px;
  color: var(--clrAccent-50);
  margin: 0 0 20px 0;
  line-height: 1.5;
}

._button_xj8dg_251 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 24px;
  background-color: var(--clrAccent-20);
  color: var(--clrAccent-100);
  border: 1px solid var(--clrAccent-30);
  border-radius: 12px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}
._button_xj8dg_251:hover {
  background-color: var(--clrAccent-30);
  border-color: var(--clrAccent-50);
  transform: translateY(-1px);
}
._button_xj8dg_251:active {
  transform: translateY(0);
}
._button_xj8dg_251 ._icon_xj8dg_275 {
  width: 20px;
  height: 20px;
  stroke-width: 2;
}html {
  color-scheme: dark;
}

html:has(body._themeLight_fvmze_5),
html:has(body._themePastelLight_fvmze_6) {
  color-scheme: light;
}

:root {
  --clrPrimary: #F4F4F5;
  --clrPrimary30: rgba(244, 244, 245, 0.3);
  --clrSecondary: #FEFEFE;
  --clrTertiary: #E4E4E7;
  --clrPrimaryReverse: #101418;
  --clrSecondaryReverse: #0A0F14;
  --clrTertiaryReverse: #212327;
  --clrTextPrimary: #101418;
  --clrTextSecondary: #2E3337;
  --clrTextTertiary: #7C7C7C;
  --clrTextPrimaryReverse: #F4F4F5;
  --clrTextSecondaryReverse: #CDCDCD;
  --clrTextTertiaryReverse: #8A8A8A;
  --clrError-100: #641f1f;
  --clrError-50: #c84d4d;
  --clrSuccess-100: #2d692d;
  --clrSuccess-50: #3EA03E;
  --clrSuccessOnTint: #0d260d;
  --clrErrorOnTint: #2e0a0a;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgb(50, 126, 75, 0.1) 30%,
          rgb(94, 178, 122, 0.36) 60%,
          rgb(144, 215, 168) 100%);
  --clrNavBackground: rgba(244, 244, 245, 0.15);
  --clrNavItemActive: rgba(211, 211, 211, 0.4);
  --clrNavItemHover: rgba(0, 0, 0, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #F4F4F5;
  --clrGlassBackground: rgba(255, 255, 255, 0.5);
  --clrGlassBackgroundStrong: rgba(255, 255, 255, 0.3);
  --clrGlassBorder: rgba(0, 0, 0, 0.1);
  --snackbarDefaultBg: #F1ECE9;
  --snackbarDefaultText: #5D605C;
  --snackbarDefaultBorder: #5D605C;
  --snackbarDefaultIcon: #5D605C;
  --snackbarSuccessBg: #E0F1D9;
  --snackbarSuccessText: #358935;
  --snackbarSuccessBorder: #358935;
  --snackbarSuccessIcon: #358935;
  --snackbarErrorBg: #F9E1DC;
  --snackbarErrorText: #C80D12;
  --snackbarErrorBorder: #C80D12;
  --snackbarErrorIcon: #C80D12;
}

._themeLight_fvmze_5 {
  --clrPrimary: #F4F4F5;
  --clrPrimary30: rgba(244, 244, 245, 0.3);
  --clrSecondary: #FEFEFE;
  --clrTertiary: #E4E4E7;
  --clrPrimaryReverse: #101418;
  --clrSecondaryReverse: #0A0F14;
  --clrTertiaryReverse: #212327;
  --clrTextPrimary: #101418;
  --clrTextSecondary: #2E3337;
  --clrTextTertiary: #7C7C7C;
  --clrTextPrimaryReverse: #F4F4F5;
  --clrTextSecondaryReverse: #CDCDCD;
  --clrTextTertiaryReverse: #8A8A8A;
  --clrError-100: #c03b3b;
  --clrError-50: #f6c5c5;
  --clrSuccess-100: #30d330;
  --clrSuccess-50: #bbffbb;
  --clrSuccessOnTint: #1f4f1f;
  --clrErrorOnTint: #7a1f1f;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgb(50, 126, 75, 0.1) 30%,
          rgb(94, 178, 122, 0.36) 60%,
          rgb(144, 215, 168) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(175, 49, 49, 0.1) 30%,
          rgba(238, 70, 70, 0.36) 60%,
          rgb(255, 173, 173) 100%);
  --clrNavBackground: rgba(244, 244, 245, 0.15);
  --clrNavItemActive: rgba(211, 211, 211, 0.4);
  --clrNavItemHover: rgba(0, 0, 0, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0000c1;
  --clrGlassBackground: rgba(255, 255, 255, 0.5);
  --clrGlassBackgroundStrong: rgba(255, 255, 255, 0.5);
  --clrGlassBorder: rgba(0, 0, 0, 0.1);
  --snackbarDefaultBg: #F1ECE9;
  --snackbarDefaultText: #5D605C;
  --snackbarDefaultBorder: #5D605C;
  --snackbarDefaultIcon: #5D605C;
  --snackbarSuccessBg: #E0F1D9;
  --snackbarSuccessText: #358935;
  --snackbarSuccessBorder: #358935;
  --snackbarSuccessIcon: #358935;
  --snackbarErrorBg: #F9E1DC;
  --snackbarErrorText: #C80D12;
  --snackbarErrorBorder: #C80D12;
  --snackbarErrorIcon: #C80D12;
}

._themeDark_fvmze_131 {
  --clrPrimary: #0F1418;
  --clrPrimary30: rgba(15, 20, 25, 0.3);
  --clrSecondary: #0A0F14;
  --clrTertiary: #212327;
  --clrPrimaryReverse: #F4F4F5;
  --clrSecondaryReverse: #FEFEFE;
  --clrTertiaryReverse: #E4E4E7;
  --clrTextPrimary: #F4F4F5;
  --clrTextSecondary: #CDCDCD;
  --clrTextTertiary: #8A8A8A;
  --clrTextPrimaryReverse: #101418;
  --clrTextSecondaryReverse: #2E3337;
  --clrTextTertiaryReverse: #7C7C7C;
  --clrError-100: #c84d4d;
  --clrError-50: #641f1f;
  --clrSuccess-100: #3EA03E;
  --clrSuccess-50: #2d692d;
  --clrSuccessOnTint: #d6ffd6;
  --clrErrorOnTint: #ffd6d6;
  --clrWarning-100: #E88434;
  --clrWarning-50: #C49168;
  --clrAccent-100: #FFFFFF;
  --clrAccent-80: rgba(255, 255, 255, 0.8);
  --clrAccent-60: rgba(255, 255, 255, 0.6);
  --clrAccent-50: rgba(255, 255, 255, 0.5);
  --clrAccent-40: rgba(255, 255, 255, 0.4);
  --clrAccent-30: rgba(255, 255, 255, 0.3);
  --clrAccent-20: rgba(255, 255, 255, 0.2);
  --clrAccent-10: rgba(255, 255, 255, 0.1);
  --clrGradient: linear-gradient(90deg, #262a2e 10%, var(--clrPrimary) 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(50, 126, 75, 0.15) 30%,
          rgba(50, 126, 75, 0.3) 60%,
          rgba(50, 126, 75, 0.5) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(167, 44, 44, 0) 0%,
          rgba(167, 44, 44, 0.15) 30%,
          rgba(167, 44, 44, 0.3) 60%,
          rgba(167, 44, 44, 0.5) 100%);
  --clrNavBackground: rgba(0, 0, 0, 0.15);
  --clrNavItemActive: rgba(24, 24, 24, 0.49);
  --clrNavItemHover: rgba(255, 255, 255, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0F1418;
  --clrGlassBackground: rgba(15, 20, 24, 0.5);
  --clrGlassBackgroundStrong: rgba(15, 20, 24, 0.6);
  --clrGlassBorder: rgba(255, 255, 255, 0.1);
  --snackbarDefaultBg: #414141;
  --snackbarDefaultText: #BABABA;
  --snackbarDefaultBorder: #BABABA;
  --snackbarDefaultIcon: #BABABA;
  --snackbarSuccessBg: #145E18;
  --snackbarSuccessText: #8FE094;
  --snackbarSuccessBorder: #8FE094;
  --snackbarSuccessIcon: #8FE094;
  --snackbarErrorBg: #910C09;
  --snackbarErrorText: #FE9E9D;
  --snackbarErrorBorder: #FE9E9D;
  --snackbarErrorIcon: #FE9E9D;
}

/* 

Note: 
    If you want something done quick, ask AI to buuild your color themes.
    If you want to do it right and tidy though, do it manually. 

    - Theo

*/
:root {
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --font-accent: "Jaro", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}

html,
body {
  font-family: var(--font-sans);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

._header_fvmze_216 {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  justify-content: flex-start;
  gap: 10px;
  flex-shrink: 0;
  width: 100%;
}
@media (max-width: 400px) {
  ._header_fvmze_216 {
    gap: 8px;
  }
}

._leaderImageWrap_fvmze_231 {
  flex-shrink: 0;
}
._leaderImageWrap_fvmze_231 > div:first-child {
  max-height: 86px !important;
  max-width: 86px !important;
  min-height: 86px !important;
  min-width: 86px !important;
}
@media (max-width: 400px) {
  ._leaderImageWrap_fvmze_231 > div:first-child {
    max-height: 68px !important;
    max-width: 68px !important;
    min-height: 68px !important;
    min-width: 68px !important;
  }
}

._infoSection_fvmze_249 {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: space-between;
  gap: 6px;
  flex: 1;
  min-width: 0;
}

._topRow_fvmze_259 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex: 1;
  min-width: 0;
}

._deckBlock_fvmze_269 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 0;
  flex-shrink: 0;
}
._deckBlock_fvmze_269 ._playerName_fvmze_277 {
  font-size: 18px;
  font-weight: 700;
  color: #FFFFFF;
  line-height: 1.2;
  white-space: nowrap;
}
@media (max-width: 400px) {
  ._deckBlock_fvmze_269 ._playerName_fvmze_277 {
    font-size: 15px;
  }
}
._deckBlock_fvmze_269 ._deckName_fvmze_289 {
  font-size: 13px;
  color: var(--clrAccent-50);
  font-weight: 400;
  line-height: 1.2;
  white-space: nowrap;
}
@media (max-width: 400px) {
  ._deckBlock_fvmze_269 ._deckName_fvmze_289 {
    font-size: 11px;
  }
}
._deckBlock_fvmze_269 ._score_fvmze_301 {
  font-size: 28px;
  font-weight: 800;
  color: var(--clrAccent-100);
  white-space: nowrap;
  line-height: 1.2;
}
@media (max-width: 400px) {
  ._deckBlock_fvmze_269 ._score_fvmze_301 {
    font-size: 22px;
  }
}
._deckBlock_fvmze_269 ._position_fvmze_313 {
  font-size: 13px;
  color: var(--clrAccent-50);
  font-weight: 400;
  line-height: 1.2;
}
@media (max-width: 400px) {
  ._deckBlock_fvmze_269 ._position_fvmze_313 {
    font-size: 11px;
  }
}

._tournamentBlock_fvmze_325 {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  gap: 6px;
  flex-shrink: 1;
  min-width: 0;
}
._tournamentBlock_fvmze_325 ._tournamentName_fvmze_334 {
  font-size: 14px;
  font-weight: 700;
  color: var(--clrAccent-100);
  text-align: right;
  line-height: 1.2;
  word-break: break-word;
  max-width: 100%;
}
@media (max-width: 700px) {
  ._tournamentBlock_fvmze_325 ._tournamentName_fvmze_334 {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 160px;
  }
}
@media (max-width: 400px) {
  ._tournamentBlock_fvmze_325 ._tournamentName_fvmze_334 {
    font-size: 12px;
    max-width: 120px;
  }
}
._tournamentBlock_fvmze_325 ._chips_fvmze_357 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  flex-wrap: nowrap;
}

._promoRow_fvmze_366 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  font-size: 11px;
  flex-shrink: 0;
}
._promoRow_fvmze_366 ._promoText_fvmze_375 {
  color: var(--clrAccent-40);
}
@media (max-width: 500px) {
  ._promoRow_fvmze_366 ._promoText_fvmze_375 {
    display: none;
  }
}
._promoRow_fvmze_366 ._promoHighlight_fvmze_383 {
  font-weight: 700;
  color: var(--clrAccent-100);
}
._promoRow_fvmze_366 img {
  height: 20px;
  width: 20px;
  border-radius: 4px;
}
@media (max-width: 400px) {
  ._promoRow_fvmze_366 {
    font-size: 9px;
  }
  ._promoRow_fvmze_366 img {
    height: 16px;
    width: 16px;
  }
}html {
  color-scheme: dark;
}

html:has(body._themeLight_1q4vn_5),
html:has(body._themePastelLight_1q4vn_6) {
  color-scheme: light;
}

:root {
  --clrPrimary: #F4F4F5;
  --clrPrimary30: rgba(244, 244, 245, 0.3);
  --clrSecondary: #FEFEFE;
  --clrTertiary: #E4E4E7;
  --clrPrimaryReverse: #101418;
  --clrSecondaryReverse: #0A0F14;
  --clrTertiaryReverse: #212327;
  --clrTextPrimary: #101418;
  --clrTextSecondary: #2E3337;
  --clrTextTertiary: #7C7C7C;
  --clrTextPrimaryReverse: #F4F4F5;
  --clrTextSecondaryReverse: #CDCDCD;
  --clrTextTertiaryReverse: #8A8A8A;
  --clrError-100: #641f1f;
  --clrError-50: #c84d4d;
  --clrSuccess-100: #2d692d;
  --clrSuccess-50: #3EA03E;
  --clrSuccessOnTint: #0d260d;
  --clrErrorOnTint: #2e0a0a;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgb(50, 126, 75, 0.1) 30%,
          rgb(94, 178, 122, 0.36) 60%,
          rgb(144, 215, 168) 100%);
  --clrNavBackground: rgba(244, 244, 245, 0.15);
  --clrNavItemActive: rgba(211, 211, 211, 0.4);
  --clrNavItemHover: rgba(0, 0, 0, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #F4F4F5;
  --clrGlassBackground: rgba(255, 255, 255, 0.5);
  --clrGlassBackgroundStrong: rgba(255, 255, 255, 0.3);
  --clrGlassBorder: rgba(0, 0, 0, 0.1);
  --snackbarDefaultBg: #F1ECE9;
  --snackbarDefaultText: #5D605C;
  --snackbarDefaultBorder: #5D605C;
  --snackbarDefaultIcon: #5D605C;
  --snackbarSuccessBg: #E0F1D9;
  --snackbarSuccessText: #358935;
  --snackbarSuccessBorder: #358935;
  --snackbarSuccessIcon: #358935;
  --snackbarErrorBg: #F9E1DC;
  --snackbarErrorText: #C80D12;
  --snackbarErrorBorder: #C80D12;
  --snackbarErrorIcon: #C80D12;
}

._themeLight_1q4vn_5 {
  --clrPrimary: #F4F4F5;
  --clrPrimary30: rgba(244, 244, 245, 0.3);
  --clrSecondary: #FEFEFE;
  --clrTertiary: #E4E4E7;
  --clrPrimaryReverse: #101418;
  --clrSecondaryReverse: #0A0F14;
  --clrTertiaryReverse: #212327;
  --clrTextPrimary: #101418;
  --clrTextSecondary: #2E3337;
  --clrTextTertiary: #7C7C7C;
  --clrTextPrimaryReverse: #F4F4F5;
  --clrTextSecondaryReverse: #CDCDCD;
  --clrTextTertiaryReverse: #8A8A8A;
  --clrError-100: #c03b3b;
  --clrError-50: #f6c5c5;
  --clrSuccess-100: #30d330;
  --clrSuccess-50: #bbffbb;
  --clrSuccessOnTint: #1f4f1f;
  --clrErrorOnTint: #7a1f1f;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgb(50, 126, 75, 0.1) 30%,
          rgb(94, 178, 122, 0.36) 60%,
          rgb(144, 215, 168) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(175, 49, 49, 0.1) 30%,
          rgba(238, 70, 70, 0.36) 60%,
          rgb(255, 173, 173) 100%);
  --clrNavBackground: rgba(244, 244, 245, 0.15);
  --clrNavItemActive: rgba(211, 211, 211, 0.4);
  --clrNavItemHover: rgba(0, 0, 0, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0000c1;
  --clrGlassBackground: rgba(255, 255, 255, 0.5);
  --clrGlassBackgroundStrong: rgba(255, 255, 255, 0.5);
  --clrGlassBorder: rgba(0, 0, 0, 0.1);
  --snackbarDefaultBg: #F1ECE9;
  --snackbarDefaultText: #5D605C;
  --snackbarDefaultBorder: #5D605C;
  --snackbarDefaultIcon: #5D605C;
  --snackbarSuccessBg: #E0F1D9;
  --snackbarSuccessText: #358935;
  --snackbarSuccessBorder: #358935;
  --snackbarSuccessIcon: #358935;
  --snackbarErrorBg: #F9E1DC;
  --snackbarErrorText: #C80D12;
  --snackbarErrorBorder: #C80D12;
  --snackbarErrorIcon: #C80D12;
}

._themeDark_1q4vn_131 {
  --clrPrimary: #0F1418;
  --clrPrimary30: rgba(15, 20, 25, 0.3);
  --clrSecondary: #0A0F14;
  --clrTertiary: #212327;
  --clrPrimaryReverse: #F4F4F5;
  --clrSecondaryReverse: #FEFEFE;
  --clrTertiaryReverse: #E4E4E7;
  --clrTextPrimary: #F4F4F5;
  --clrTextSecondary: #CDCDCD;
  --clrTextTertiary: #8A8A8A;
  --clrTextPrimaryReverse: #101418;
  --clrTextSecondaryReverse: #2E3337;
  --clrTextTertiaryReverse: #7C7C7C;
  --clrError-100: #c84d4d;
  --clrError-50: #641f1f;
  --clrSuccess-100: #3EA03E;
  --clrSuccess-50: #2d692d;
  --clrSuccessOnTint: #d6ffd6;
  --clrErrorOnTint: #ffd6d6;
  --clrWarning-100: #E88434;
  --clrWarning-50: #C49168;
  --clrAccent-100: #FFFFFF;
  --clrAccent-80: rgba(255, 255, 255, 0.8);
  --clrAccent-60: rgba(255, 255, 255, 0.6);
  --clrAccent-50: rgba(255, 255, 255, 0.5);
  --clrAccent-40: rgba(255, 255, 255, 0.4);
  --clrAccent-30: rgba(255, 255, 255, 0.3);
  --clrAccent-20: rgba(255, 255, 255, 0.2);
  --clrAccent-10: rgba(255, 255, 255, 0.1);
  --clrGradient: linear-gradient(90deg, #262a2e 10%, var(--clrPrimary) 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(50, 126, 75, 0.15) 30%,
          rgba(50, 126, 75, 0.3) 60%,
          rgba(50, 126, 75, 0.5) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(167, 44, 44, 0) 0%,
          rgba(167, 44, 44, 0.15) 30%,
          rgba(167, 44, 44, 0.3) 60%,
          rgba(167, 44, 44, 0.5) 100%);
  --clrNavBackground: rgba(0, 0, 0, 0.15);
  --clrNavItemActive: rgba(24, 24, 24, 0.49);
  --clrNavItemHover: rgba(255, 255, 255, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0F1418;
  --clrGlassBackground: rgba(15, 20, 24, 0.5);
  --clrGlassBackgroundStrong: rgba(15, 20, 24, 0.6);
  --clrGlassBorder: rgba(255, 255, 255, 0.1);
  --snackbarDefaultBg: #414141;
  --snackbarDefaultText: #BABABA;
  --snackbarDefaultBorder: #BABABA;
  --snackbarDefaultIcon: #BABABA;
  --snackbarSuccessBg: #145E18;
  --snackbarSuccessText: #8FE094;
  --snackbarSuccessBorder: #8FE094;
  --snackbarSuccessIcon: #8FE094;
  --snackbarErrorBg: #910C09;
  --snackbarErrorText: #FE9E9D;
  --snackbarErrorBorder: #FE9E9D;
  --snackbarErrorIcon: #FE9E9D;
}

/* 

Note: 
    If you want something done quick, ask AI to buuild your color themes.
    If you want to do it right and tidy though, do it manually. 

    - Theo

*/
:root {
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --font-accent: "Jaro", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}

html,
body {
  font-family: var(--font-sans);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

._wrapper_1q4vn_216 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 0;
  width: 100%;
}

._container_1q4vn_225 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 0;
  width: 100%;
  min-height: 64px;
  border: 1px solid var(--clrTertiary);
  border-radius: 8px;
  overflow: hidden;
  background-color: transparent;
  position: relative;
}
@media (max-width: 400px) {
  ._container_1q4vn_225 {
    min-height: 48px;
  }
}

._roundNumber_1q4vn_245 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  min-width: 24px;
  font-size: 12px;
  font-weight: 600;
  font-family: var(--font-sans);
  color: var(--clrAccent-30);
  flex-shrink: 0;
  padding-left: 4px;
}
@media (max-width: 400px) {
  ._roundNumber_1q4vn_245 {
    min-width: 20px;
    font-size: 10px;
  }
}

._leaderImage_1q4vn_266 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: 4px 0;
  flex-shrink: 0;
}
._leaderImage_1q4vn_266 > div {
  width: 44px;
  height: 44px;
  min-width: 44px;
}
@media (max-width: 400px) {
  ._leaderImage_1q4vn_266 > div {
    width: 32px;
    height: 32px;
    min-width: 32px;
  }
}

._roundInfoSection_1q4vn_288 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 2px;
  flex: 1 1 auto;
  min-width: 0;
  padding: 2px 10px;
  overflow: hidden;
}

._leaderName_1q4vn_300 {
  display: block;
  font-size: 14px;
  font-weight: 600;
  font-family: var(--font-sans);
  color: var(--clrAccent-100);
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
@media (max-width: 400px) {
  ._leaderName_1q4vn_300 {
    font-size: 11px;
  }
}

._resultSection_1q4vn_318 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  gap: 0;
  min-height: 64px;
  align-self: stretch;
  border-radius: 0 8px 8px 0;
  padding-right: 10px;
  min-width: 80px;
  flex-shrink: 0;
}
._resultSection_1q4vn_318._win_1q4vn_331 {
  background: var(--clrRoundWin);
}
._resultSection_1q4vn_318._lose_1q4vn_334 {
  background: var(--clrRoundLoss);
}
@media (max-width: 400px) {
  ._resultSection_1q4vn_318 {
    min-height: 48px;
    min-width: 64px;
    padding-right: 8px;
  }
}

._separator_1q4vn_345 {
  width: 1px;
  height: 40px;
  background: linear-gradient(to bottom, transparent 0%, rgba(255, 255, 255, 0.3) 50%, transparent 100%);
  margin-right: 6px;
}
@media (max-width: 400px) {
  ._separator_1q4vn_345 {
    height: 28px;
    margin-right: 6px;
  }
}

._chips_1q4vn_358 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
}
@media (max-width: 400px) {
  ._chips_1q4vn_358 {
    gap: 3px;
  }
}html {
  color-scheme: dark;
}

html:has(body._themeLight_tnhl9_5),
html:has(body._themePastelLight_tnhl9_6) {
  color-scheme: light;
}

:root {
  --clrPrimary: #F4F4F5;
  --clrPrimary30: rgba(244, 244, 245, 0.3);
  --clrSecondary: #FEFEFE;
  --clrTertiary: #E4E4E7;
  --clrPrimaryReverse: #101418;
  --clrSecondaryReverse: #0A0F14;
  --clrTertiaryReverse: #212327;
  --clrTextPrimary: #101418;
  --clrTextSecondary: #2E3337;
  --clrTextTertiary: #7C7C7C;
  --clrTextPrimaryReverse: #F4F4F5;
  --clrTextSecondaryReverse: #CDCDCD;
  --clrTextTertiaryReverse: #8A8A8A;
  --clrError-100: #641f1f;
  --clrError-50: #c84d4d;
  --clrSuccess-100: #2d692d;
  --clrSuccess-50: #3EA03E;
  --clrSuccessOnTint: #0d260d;
  --clrErrorOnTint: #2e0a0a;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgb(50, 126, 75, 0.1) 30%,
          rgb(94, 178, 122, 0.36) 60%,
          rgb(144, 215, 168) 100%);
  --clrNavBackground: rgba(244, 244, 245, 0.15);
  --clrNavItemActive: rgba(211, 211, 211, 0.4);
  --clrNavItemHover: rgba(0, 0, 0, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #F4F4F5;
  --clrGlassBackground: rgba(255, 255, 255, 0.5);
  --clrGlassBackgroundStrong: rgba(255, 255, 255, 0.3);
  --clrGlassBorder: rgba(0, 0, 0, 0.1);
  --snackbarDefaultBg: #F1ECE9;
  --snackbarDefaultText: #5D605C;
  --snackbarDefaultBorder: #5D605C;
  --snackbarDefaultIcon: #5D605C;
  --snackbarSuccessBg: #E0F1D9;
  --snackbarSuccessText: #358935;
  --snackbarSuccessBorder: #358935;
  --snackbarSuccessIcon: #358935;
  --snackbarErrorBg: #F9E1DC;
  --snackbarErrorText: #C80D12;
  --snackbarErrorBorder: #C80D12;
  --snackbarErrorIcon: #C80D12;
}

._themeLight_tnhl9_5 {
  --clrPrimary: #F4F4F5;
  --clrPrimary30: rgba(244, 244, 245, 0.3);
  --clrSecondary: #FEFEFE;
  --clrTertiary: #E4E4E7;
  --clrPrimaryReverse: #101418;
  --clrSecondaryReverse: #0A0F14;
  --clrTertiaryReverse: #212327;
  --clrTextPrimary: #101418;
  --clrTextSecondary: #2E3337;
  --clrTextTertiary: #7C7C7C;
  --clrTextPrimaryReverse: #F4F4F5;
  --clrTextSecondaryReverse: #CDCDCD;
  --clrTextTertiaryReverse: #8A8A8A;
  --clrError-100: #c03b3b;
  --clrError-50: #f6c5c5;
  --clrSuccess-100: #30d330;
  --clrSuccess-50: #bbffbb;
  --clrSuccessOnTint: #1f4f1f;
  --clrErrorOnTint: #7a1f1f;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgb(50, 126, 75, 0.1) 30%,
          rgb(94, 178, 122, 0.36) 60%,
          rgb(144, 215, 168) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(175, 49, 49, 0.1) 30%,
          rgba(238, 70, 70, 0.36) 60%,
          rgb(255, 173, 173) 100%);
  --clrNavBackground: rgba(244, 244, 245, 0.15);
  --clrNavItemActive: rgba(211, 211, 211, 0.4);
  --clrNavItemHover: rgba(0, 0, 0, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0000c1;
  --clrGlassBackground: rgba(255, 255, 255, 0.5);
  --clrGlassBackgroundStrong: rgba(255, 255, 255, 0.5);
  --clrGlassBorder: rgba(0, 0, 0, 0.1);
  --snackbarDefaultBg: #F1ECE9;
  --snackbarDefaultText: #5D605C;
  --snackbarDefaultBorder: #5D605C;
  --snackbarDefaultIcon: #5D605C;
  --snackbarSuccessBg: #E0F1D9;
  --snackbarSuccessText: #358935;
  --snackbarSuccessBorder: #358935;
  --snackbarSuccessIcon: #358935;
  --snackbarErrorBg: #F9E1DC;
  --snackbarErrorText: #C80D12;
  --snackbarErrorBorder: #C80D12;
  --snackbarErrorIcon: #C80D12;
}

._themeDark_tnhl9_131 {
  --clrPrimary: #0F1418;
  --clrPrimary30: rgba(15, 20, 25, 0.3);
  --clrSecondary: #0A0F14;
  --clrTertiary: #212327;
  --clrPrimaryReverse: #F4F4F5;
  --clrSecondaryReverse: #FEFEFE;
  --clrTertiaryReverse: #E4E4E7;
  --clrTextPrimary: #F4F4F5;
  --clrTextSecondary: #CDCDCD;
  --clrTextTertiary: #8A8A8A;
  --clrTextPrimaryReverse: #101418;
  --clrTextSecondaryReverse: #2E3337;
  --clrTextTertiaryReverse: #7C7C7C;
  --clrError-100: #c84d4d;
  --clrError-50: #641f1f;
  --clrSuccess-100: #3EA03E;
  --clrSuccess-50: #2d692d;
  --clrSuccessOnTint: #d6ffd6;
  --clrErrorOnTint: #ffd6d6;
  --clrWarning-100: #E88434;
  --clrWarning-50: #C49168;
  --clrAccent-100: #FFFFFF;
  --clrAccent-80: rgba(255, 255, 255, 0.8);
  --clrAccent-60: rgba(255, 255, 255, 0.6);
  --clrAccent-50: rgba(255, 255, 255, 0.5);
  --clrAccent-40: rgba(255, 255, 255, 0.4);
  --clrAccent-30: rgba(255, 255, 255, 0.3);
  --clrAccent-20: rgba(255, 255, 255, 0.2);
  --clrAccent-10: rgba(255, 255, 255, 0.1);
  --clrGradient: linear-gradient(90deg, #262a2e 10%, var(--clrPrimary) 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(50, 126, 75, 0.15) 30%,
          rgba(50, 126, 75, 0.3) 60%,
          rgba(50, 126, 75, 0.5) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(167, 44, 44, 0) 0%,
          rgba(167, 44, 44, 0.15) 30%,
          rgba(167, 44, 44, 0.3) 60%,
          rgba(167, 44, 44, 0.5) 100%);
  --clrNavBackground: rgba(0, 0, 0, 0.15);
  --clrNavItemActive: rgba(24, 24, 24, 0.49);
  --clrNavItemHover: rgba(255, 255, 255, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0F1418;
  --clrGlassBackground: rgba(15, 20, 24, 0.5);
  --clrGlassBackgroundStrong: rgba(15, 20, 24, 0.6);
  --clrGlassBorder: rgba(255, 255, 255, 0.1);
  --snackbarDefaultBg: #414141;
  --snackbarDefaultText: #BABABA;
  --snackbarDefaultBorder: #BABABA;
  --snackbarDefaultIcon: #BABABA;
  --snackbarSuccessBg: #145E18;
  --snackbarSuccessText: #8FE094;
  --snackbarSuccessBorder: #8FE094;
  --snackbarSuccessIcon: #8FE094;
  --snackbarErrorBg: #910C09;
  --snackbarErrorText: #FE9E9D;
  --snackbarErrorBorder: #FE9E9D;
  --snackbarErrorIcon: #FE9E9D;
}

/* 

Note: 
    If you want something done quick, ask AI to buuild your color themes.
    If you want to do it right and tidy though, do it manually. 

    - Theo

*/
:root {
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --font-accent: "Jaro", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}

html,
body {
  font-family: var(--font-sans);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

@keyframes _modalBounceIn_tnhl9_1 {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.05);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes _fadeIn_tnhl9_1 {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
._exportModal_tnhl9_237 {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.8);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  z-index: 9999;
  cursor: pointer;
  animation: _fadeIn_tnhl9_1 0.3s ease;
  overflow: hidden;
}
._exportModal_tnhl9_237 ._exportContent_tnhl9_256 {
  width: min(92vw, 560px);
  min-aspect-ratio: 1/1;
  max-height: 90vh;
  background-color: var(--clrPrimary);
  border-radius: 8px;
  border: 1px solid var(--clrAccent-30);
  padding: 16px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 0;
  cursor: default;
  overflow: hidden;
  animation: _modalBounceIn_tnhl9_1 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
@media (max-width: 768px) {
  ._exportModal_tnhl9_237 ._exportContent_tnhl9_256 {
    width: 92vw;
    max-height: 85vh;
    padding: 10px;
  }
}
._exportModal_tnhl9_237 ._exportContent_tnhl9_256 ._exportHeader_tnhl9_280 {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-shrink: 0;
  width: 100%;
}
._exportModal_tnhl9_237 ._exportContent_tnhl9_256 ._exportHeader_tnhl9_280 ._leftSection_tnhl9_289 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  flex-shrink: 0;
}
._exportModal_tnhl9_237 ._exportContent_tnhl9_256 ._exportHeader_tnhl9_280 ._leftSection_tnhl9_289 > div:first-child {
  max-height: 86px !important;
  max-width: 86px !important;
  min-height: 86px !important;
  min-width: 86px !important;
}
@media (max-width: 400px) {
  ._exportModal_tnhl9_237 ._exportContent_tnhl9_256 ._exportHeader_tnhl9_280 ._leftSection_tnhl9_289 > div:first-child {
    max-height: 68px !important;
    max-width: 68px !important;
    min-height: 68px !important;
    min-width: 68px !important;
  }
}
._exportModal_tnhl9_237 ._exportContent_tnhl9_256 ._exportHeader_tnhl9_280 ._leftSection_tnhl9_289 ._deckInfo_tnhl9_311 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 0;
}
._exportModal_tnhl9_237 ._exportContent_tnhl9_256 ._exportHeader_tnhl9_280 ._leftSection_tnhl9_289 ._deckInfo_tnhl9_311 ._deckName_tnhl9_318 {
  font-size: 13px;
  color: var(--clrAccent-50);
  font-weight: 400;
  line-height: 1.2;
}
@media (max-width: 400px) {
  ._exportModal_tnhl9_237 ._exportContent_tnhl9_256 ._exportHeader_tnhl9_280 ._leftSection_tnhl9_289 ._deckInfo_tnhl9_311 ._deckName_tnhl9_318 {
    font-size: 11px;
  }
}
._exportModal_tnhl9_237 ._exportContent_tnhl9_256 ._exportHeader_tnhl9_280 ._leftSection_tnhl9_289 ._deckInfo_tnhl9_311 ._exportStats_tnhl9_329 {
  font-size: 28px;
  font-weight: 800;
  color: var(--clrAccent-100);
  white-space: nowrap;
  line-height: 1.2;
}
@media (max-width: 400px) {
  ._exportModal_tnhl9_237 ._exportContent_tnhl9_256 ._exportHeader_tnhl9_280 ._leftSection_tnhl9_289 ._deckInfo_tnhl9_311 ._exportStats_tnhl9_329 {
    font-size: 22px;
  }
}
._exportModal_tnhl9_237 ._exportContent_tnhl9_256 ._exportHeader_tnhl9_280 ._leftSection_tnhl9_289 ._deckInfo_tnhl9_311 ._positionText_tnhl9_341 {
  font-size: 13px;
  color: var(--clrAccent-50);
  font-weight: 400;
  line-height: 1.2;
}
@media (max-width: 400px) {
  ._exportModal_tnhl9_237 ._exportContent_tnhl9_256 ._exportHeader_tnhl9_280 ._leftSection_tnhl9_289 ._deckInfo_tnhl9_311 ._positionText_tnhl9_341 {
    font-size: 11px;
  }
}
._exportModal_tnhl9_237 ._exportContent_tnhl9_256 ._exportHeader_tnhl9_280 ._rightSection_tnhl9_352 {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-start;
  gap: 8px;
  flex-shrink: 1;
  min-width: 0;
}
._exportModal_tnhl9_237 ._exportContent_tnhl9_256 ._exportHeader_tnhl9_280 ._rightSection_tnhl9_352 ._tournamentName_tnhl9_361 {
  font-size: 14px;
  font-weight: 700;
  color: var(--clrAccent-100);
  text-align: right;
  line-height: 1.2;
  word-break: break-word;
}
@media (max-width: 700px) {
  ._exportModal_tnhl9_237 ._exportContent_tnhl9_256 ._exportHeader_tnhl9_280 ._rightSection_tnhl9_352 ._tournamentName_tnhl9_361 {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 160px;
  }
}
@media (max-width: 400px) {
  ._exportModal_tnhl9_237 ._exportContent_tnhl9_256 ._exportHeader_tnhl9_280 ._rightSection_tnhl9_352 ._tournamentName_tnhl9_361 {
    font-size: 12px;
    max-width: 120px;
  }
}
._exportModal_tnhl9_237 ._exportContent_tnhl9_256 ._exportHeader_tnhl9_280 ._rightSection_tnhl9_352 ._chips_tnhl9_383 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  flex-wrap: nowrap;
}
._exportModal_tnhl9_237 ._exportContent_tnhl9_256 ._exportHeader_tnhl9_280 ._rightSection_tnhl9_352 ._appPromo_tnhl9_391 {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-start;
  gap: 2px;
  font-size: 11px;
}
._exportModal_tnhl9_237 ._exportContent_tnhl9_256 ._exportHeader_tnhl9_280 ._rightSection_tnhl9_352 ._appPromo_tnhl9_391 ._appPromoText_tnhl9_399 {
  color: var(--clrAccent-40);
}
@media (max-width: 500px) {
  ._exportModal_tnhl9_237 ._exportContent_tnhl9_256 ._exportHeader_tnhl9_280 ._rightSection_tnhl9_352 ._appPromo_tnhl9_391 ._appPromoText_tnhl9_399 {
    display: none;
  }
}
._exportModal_tnhl9_237 ._exportContent_tnhl9_256 ._exportHeader_tnhl9_280 ._rightSection_tnhl9_352 ._appPromo_tnhl9_391 ._appPromoLine_tnhl9_407 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
}
._exportModal_tnhl9_237 ._exportContent_tnhl9_256 ._exportHeader_tnhl9_280 ._rightSection_tnhl9_352 ._appPromo_tnhl9_391 ._madeWithHighlight_tnhl9_414 {
  font-weight: 700;
  color: var(--clrAccent-100);
}
._exportModal_tnhl9_237 ._exportContent_tnhl9_256 ._exportHeader_tnhl9_280 ._rightSection_tnhl9_352 ._appPromo_tnhl9_391 img {
  height: 20px;
  width: 20px;
  border-radius: 4px;
}
@media (max-width: 400px) {
  ._exportModal_tnhl9_237 ._exportContent_tnhl9_256 ._exportHeader_tnhl9_280 ._rightSection_tnhl9_352 ._appPromo_tnhl9_391 {
    font-size: 9px;
  }
  ._exportModal_tnhl9_237 ._exportContent_tnhl9_256 ._exportHeader_tnhl9_280 ._rightSection_tnhl9_352 ._appPromo_tnhl9_391 img {
    height: 16px;
    width: 16px;
  }
}
._exportModal_tnhl9_237 ._exportContent_tnhl9_256 ._divider_tnhl9_432 {
  width: 100%;
  height: 1px;
  background-color: var(--clrAccent-30);
  margin: 12px 0;
  flex-shrink: 0;
}
@media (max-width: 400px) {
  ._exportModal_tnhl9_237 ._exportContent_tnhl9_256 ._divider_tnhl9_432 {
    margin: 8px 0;
  }
}
._exportModal_tnhl9_237 ._exportContent_tnhl9_256 ._exportFollow_tnhl9_444 {
  flex-shrink: 0;
  width: 100%;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--clrAccent-30);
  color: var(--clrTextSecondary);
  font-size: 0.78rem;
  font-weight: 500;
  text-align: center;
  letter-spacing: 0.01em;
}
._exportModal_tnhl9_237 ._exportContent_tnhl9_256 ._exportFollow_tnhl9_444 strong {
  color: var(--clrTextPrimary);
  font-weight: 800;
}
@media (max-width: 400px) {
  ._exportModal_tnhl9_237 ._exportContent_tnhl9_256 ._exportFollow_tnhl9_444 {
    margin-top: 8px;
    padding-top: 8px;
    font-size: 0.72rem;
  }
}
._exportModal_tnhl9_237 ._exportContent_tnhl9_256 ._exportRoundList_tnhl9_467 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: stretch;
  gap: 6px;
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  width: 100%;
}
@media (max-width: 400px) {
  ._exportModal_tnhl9_237 ._exportContent_tnhl9_256 ._exportRoundList_tnhl9_467 {
    gap: 4px;
  }
}
._exportModal_tnhl9_237 ._exportContent_tnhl9_256 ._exportRoundList_tnhl9_467::-webkit-scrollbar {
  width: 8px;
}
._exportModal_tnhl9_237 ._exportContent_tnhl9_256 ._exportRoundList_tnhl9_467::-webkit-scrollbar-track {
  background: var(--clrSecondary);
  border-radius: 4px;
}
._exportModal_tnhl9_237 ._exportContent_tnhl9_256 ._exportRoundList_tnhl9_467::-webkit-scrollbar-thumb {
  background: var(--clrAccent-30);
  border-radius: 4px;
}
._exportModal_tnhl9_237 ._exportContent_tnhl9_256 ._exportRoundList_tnhl9_467::-webkit-scrollbar-thumb:hover {
  background: var(--clrAccent-50);
}
._exportModal_tnhl9_237 ._actionButtons_tnhl9_497 {
  margin-top: 16px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 12px;
  animation: _modalBounceIn_tnhl9_1 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
._exportModal_tnhl9_237 ._downloadBtn_tnhl9_506 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 24px;
  background-color: var(--clrAccent-100);
  color: var(--clrPrimary);
  border: 1px solid var(--clrAccent-100);
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}
._exportModal_tnhl9_237 ._downloadBtn_tnhl9_506 svg {
  width: 18px;
  height: 18px;
}
._exportModal_tnhl9_237 ._downloadBtn_tnhl9_506:hover:not(:disabled) {
  transform: translateY(-2px);
}
._exportModal_tnhl9_237 ._downloadBtn_tnhl9_506:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
._exportModal_tnhl9_237 ._downloadBtn_tnhl9_506 ._spinner_tnhl9_533 {
  animation: _spin_tnhl9_533 1s linear infinite;
}

@keyframes _spin_tnhl9_533 {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}html {
  color-scheme: dark;
}

html:has(body._themeLight_1ueix_5),
html:has(body._themePastelLight_1ueix_6) {
  color-scheme: light;
}

:root {
  --clrPrimary: #F4F4F5;
  --clrPrimary30: rgba(244, 244, 245, 0.3);
  --clrSecondary: #FEFEFE;
  --clrTertiary: #E4E4E7;
  --clrPrimaryReverse: #101418;
  --clrSecondaryReverse: #0A0F14;
  --clrTertiaryReverse: #212327;
  --clrTextPrimary: #101418;
  --clrTextSecondary: #2E3337;
  --clrTextTertiary: #7C7C7C;
  --clrTextPrimaryReverse: #F4F4F5;
  --clrTextSecondaryReverse: #CDCDCD;
  --clrTextTertiaryReverse: #8A8A8A;
  --clrError-100: #641f1f;
  --clrError-50: #c84d4d;
  --clrSuccess-100: #2d692d;
  --clrSuccess-50: #3EA03E;
  --clrSuccessOnTint: #0d260d;
  --clrErrorOnTint: #2e0a0a;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgb(50, 126, 75, 0.1) 30%,
          rgb(94, 178, 122, 0.36) 60%,
          rgb(144, 215, 168) 100%);
  --clrNavBackground: rgba(244, 244, 245, 0.15);
  --clrNavItemActive: rgba(211, 211, 211, 0.4);
  --clrNavItemHover: rgba(0, 0, 0, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #F4F4F5;
  --clrGlassBackground: rgba(255, 255, 255, 0.5);
  --clrGlassBackgroundStrong: rgba(255, 255, 255, 0.3);
  --clrGlassBorder: rgba(0, 0, 0, 0.1);
  --snackbarDefaultBg: #F1ECE9;
  --snackbarDefaultText: #5D605C;
  --snackbarDefaultBorder: #5D605C;
  --snackbarDefaultIcon: #5D605C;
  --snackbarSuccessBg: #E0F1D9;
  --snackbarSuccessText: #358935;
  --snackbarSuccessBorder: #358935;
  --snackbarSuccessIcon: #358935;
  --snackbarErrorBg: #F9E1DC;
  --snackbarErrorText: #C80D12;
  --snackbarErrorBorder: #C80D12;
  --snackbarErrorIcon: #C80D12;
}

._themeLight_1ueix_5 {
  --clrPrimary: #F4F4F5;
  --clrPrimary30: rgba(244, 244, 245, 0.3);
  --clrSecondary: #FEFEFE;
  --clrTertiary: #E4E4E7;
  --clrPrimaryReverse: #101418;
  --clrSecondaryReverse: #0A0F14;
  --clrTertiaryReverse: #212327;
  --clrTextPrimary: #101418;
  --clrTextSecondary: #2E3337;
  --clrTextTertiary: #7C7C7C;
  --clrTextPrimaryReverse: #F4F4F5;
  --clrTextSecondaryReverse: #CDCDCD;
  --clrTextTertiaryReverse: #8A8A8A;
  --clrError-100: #c03b3b;
  --clrError-50: #f6c5c5;
  --clrSuccess-100: #30d330;
  --clrSuccess-50: #bbffbb;
  --clrSuccessOnTint: #1f4f1f;
  --clrErrorOnTint: #7a1f1f;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgb(50, 126, 75, 0.1) 30%,
          rgb(94, 178, 122, 0.36) 60%,
          rgb(144, 215, 168) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(175, 49, 49, 0.1) 30%,
          rgba(238, 70, 70, 0.36) 60%,
          rgb(255, 173, 173) 100%);
  --clrNavBackground: rgba(244, 244, 245, 0.15);
  --clrNavItemActive: rgba(211, 211, 211, 0.4);
  --clrNavItemHover: rgba(0, 0, 0, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0000c1;
  --clrGlassBackground: rgba(255, 255, 255, 0.5);
  --clrGlassBackgroundStrong: rgba(255, 255, 255, 0.5);
  --clrGlassBorder: rgba(0, 0, 0, 0.1);
  --snackbarDefaultBg: #F1ECE9;
  --snackbarDefaultText: #5D605C;
  --snackbarDefaultBorder: #5D605C;
  --snackbarDefaultIcon: #5D605C;
  --snackbarSuccessBg: #E0F1D9;
  --snackbarSuccessText: #358935;
  --snackbarSuccessBorder: #358935;
  --snackbarSuccessIcon: #358935;
  --snackbarErrorBg: #F9E1DC;
  --snackbarErrorText: #C80D12;
  --snackbarErrorBorder: #C80D12;
  --snackbarErrorIcon: #C80D12;
}

._themeDark_1ueix_131 {
  --clrPrimary: #0F1418;
  --clrPrimary30: rgba(15, 20, 25, 0.3);
  --clrSecondary: #0A0F14;
  --clrTertiary: #212327;
  --clrPrimaryReverse: #F4F4F5;
  --clrSecondaryReverse: #FEFEFE;
  --clrTertiaryReverse: #E4E4E7;
  --clrTextPrimary: #F4F4F5;
  --clrTextSecondary: #CDCDCD;
  --clrTextTertiary: #8A8A8A;
  --clrTextPrimaryReverse: #101418;
  --clrTextSecondaryReverse: #2E3337;
  --clrTextTertiaryReverse: #7C7C7C;
  --clrError-100: #c84d4d;
  --clrError-50: #641f1f;
  --clrSuccess-100: #3EA03E;
  --clrSuccess-50: #2d692d;
  --clrSuccessOnTint: #d6ffd6;
  --clrErrorOnTint: #ffd6d6;
  --clrWarning-100: #E88434;
  --clrWarning-50: #C49168;
  --clrAccent-100: #FFFFFF;
  --clrAccent-80: rgba(255, 255, 255, 0.8);
  --clrAccent-60: rgba(255, 255, 255, 0.6);
  --clrAccent-50: rgba(255, 255, 255, 0.5);
  --clrAccent-40: rgba(255, 255, 255, 0.4);
  --clrAccent-30: rgba(255, 255, 255, 0.3);
  --clrAccent-20: rgba(255, 255, 255, 0.2);
  --clrAccent-10: rgba(255, 255, 255, 0.1);
  --clrGradient: linear-gradient(90deg, #262a2e 10%, var(--clrPrimary) 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(50, 126, 75, 0.15) 30%,
          rgba(50, 126, 75, 0.3) 60%,
          rgba(50, 126, 75, 0.5) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(167, 44, 44, 0) 0%,
          rgba(167, 44, 44, 0.15) 30%,
          rgba(167, 44, 44, 0.3) 60%,
          rgba(167, 44, 44, 0.5) 100%);
  --clrNavBackground: rgba(0, 0, 0, 0.15);
  --clrNavItemActive: rgba(24, 24, 24, 0.49);
  --clrNavItemHover: rgba(255, 255, 255, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0F1418;
  --clrGlassBackground: rgba(15, 20, 24, 0.5);
  --clrGlassBackgroundStrong: rgba(15, 20, 24, 0.6);
  --clrGlassBorder: rgba(255, 255, 255, 0.1);
  --snackbarDefaultBg: #414141;
  --snackbarDefaultText: #BABABA;
  --snackbarDefaultBorder: #BABABA;
  --snackbarDefaultIcon: #BABABA;
  --snackbarSuccessBg: #145E18;
  --snackbarSuccessText: #8FE094;
  --snackbarSuccessBorder: #8FE094;
  --snackbarSuccessIcon: #8FE094;
  --snackbarErrorBg: #910C09;
  --snackbarErrorText: #FE9E9D;
  --snackbarErrorBorder: #FE9E9D;
  --snackbarErrorIcon: #FE9E9D;
}

/* 

Note: 
    If you want something done quick, ask AI to buuild your color themes.
    If you want to do it right and tidy though, do it manually. 

    - Theo

*/
:root {
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --font-accent: "Jaro", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}

html,
body {
  font-family: var(--font-sans);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

._historyContainer_1ueix_216 {
  width: 100%;
  padding: 16px 16px 24px 16px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 12px;
  max-width: 820px;
  margin: 0 auto;
  padding-top: calc(60px + env(safe-area-inset-top) + 16px);
  padding-bottom: calc(80px + env(safe-area-inset-bottom) + 16px);
}
._historyContainer_1ueix_216 ._historyHeader_1ueix_229 {
  width: 100%;
  min-height: 44px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
._historyContainer_1ueix_216 ._historyHeader_1ueix_229 h2 {
  color: var(--clrTextPrimary);
  font-size: 20px;
  margin: 0;
  animation: _fadeIn_1ueix_1 0.3s ease-out;
}
._historyContainer_1ueix_216 ._historyHeader_1ueix_229 ._searchContainer_1ueix_244 {
  width: 100%;
  height: 44px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  background-color: var(--clrSecondary);
  border: 1px solid var(--clrAccent-10);
  border-radius: 8px;
  padding: 0 12px;
  animation: _expandSearch_1ueix_1 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  transform-origin: right center;
  box-sizing: border-box;
}
._historyContainer_1ueix_216 ._historyHeader_1ueix_229 ._searchContainer_1ueix_244 ._searchIconInside_1ueix_260 {
  width: 20px;
  height: 20px;
  color: var(--clrTextSecondary);
  flex-shrink: 0;
  animation: _fadeInIcon_1ueix_1 0.3s ease-out 0.1s forwards;
  opacity: 0;
}
._historyContainer_1ueix_216 ._historyHeader_1ueix_229 ._searchContainer_1ueix_244 ._searchInput_1ueix_268 {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  color: var(--clrTextPrimary);
  font-size: 16px;
  font-family: var(--font-sans);
  padding: 0;
  animation: _fadeInInput_1ueix_1 0.3s ease-out 0.15s forwards;
  opacity: 0;
}
._historyContainer_1ueix_216 ._historyHeader_1ueix_229 ._searchContainer_1ueix_244 ._searchInput_1ueix_268::placeholder {
  color: var(--clrTextTertiary);
}
._historyContainer_1ueix_216 ._historyHeader_1ueix_229 ._searchContainer_1ueix_244 ._closeSearchBtn_1ueix_283 {
  padding: 4px;
  background-color: transparent;
  border: none;
  cursor: pointer;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 0;
  transition: all 0.2s ease;
  animation: _fadeInIcon_1ueix_1 0.3s ease-out 0.2s forwards;
  opacity: 0;
}
._historyContainer_1ueix_216 ._historyHeader_1ueix_229 ._searchContainer_1ueix_244 ._closeSearchBtn_1ueix_283 ._closeIcon_1ueix_297 {
  width: 20px;
  height: 20px;
  color: var(--clrTextSecondary);
}
._historyContainer_1ueix_216 ._historyHeader_1ueix_229 ._searchContainer_1ueix_244 ._closeSearchBtn_1ueix_283:hover ._closeIcon_1ueix_297 {
  color: var(--clrTextPrimary);
}
._historyContainer_1ueix_216 ._historyHeader_1ueix_229 ._headerActions_1ueix_305 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  animation: _fadeIn_1ueix_1 0.3s ease-out;
}
._historyContainer_1ueix_216 ._historyHeader_1ueix_229 ._headerActions_1ueix_305 ._searchBtn_1ueix_313 {
  padding: 8px 12px;
  background-color: transparent;
  color: var(--clrTextPrimary);
  border: 1px solid var(--clrAccent-10);
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 0;
}
._historyContainer_1ueix_216 ._historyHeader_1ueix_229 ._headerActions_1ueix_305 ._searchBtn_1ueix_313 ._searchIcon_1ueix_260 {
  width: 18px;
  height: 18px;
}
._historyContainer_1ueix_216 ._historyHeader_1ueix_229 ._headerActions_1ueix_305 ._searchBtn_1ueix_313:hover {
  background-color: rgba(255, 255, 255, 0.05);
}
._historyContainer_1ueix_216 ._historyHeader_1ueix_229 ._headerActions_1ueix_305 ._searchBtn_1ueix_313:active {
  transform: scale(0.95);
}
._historyContainer_1ueix_216 ._historyHeader_1ueix_229 ._headerActions_1ueix_305 ._filterContainer_1ueix_337 {
  position: relative;
}
._historyContainer_1ueix_216 ._historyHeader_1ueix_229 ._headerActions_1ueix_305 ._filterContainer_1ueix_337 ._filterBtn_1ueix_340 {
  padding: 8px 12px;
  background-color: transparent;
  color: var(--clrTextPrimary);
  border: 1px solid var(--clrAccent-10);
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 4px;
}
._historyContainer_1ueix_216 ._historyHeader_1ueix_229 ._headerActions_1ueix_305 ._filterContainer_1ueix_337 ._filterBtn_1ueix_340 ._filterIcon_1ueix_354 {
  width: 18px;
  height: 18px;
}
._historyContainer_1ueix_216 ._historyHeader_1ueix_229 ._headerActions_1ueix_305 ._filterContainer_1ueix_337 ._filterBtn_1ueix_340 ._chevronIcon_1ueix_358 {
  width: 14px;
  height: 14px;
}
._historyContainer_1ueix_216 ._historyHeader_1ueix_229 ._headerActions_1ueix_305 ._filterContainer_1ueix_337 ._filterBtn_1ueix_340:hover {
  background-color: rgba(255, 255, 255, 0.05);
}
._historyContainer_1ueix_216 ._historyHeader_1ueix_229 ._headerActions_1ueix_305 ._filterContainer_1ueix_337 ._filterDropdown_1ueix_365 {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  background-color: var(--clrSecondary);
  border: 1px solid var(--clrAccent-10);
  border-radius: 4px;
  padding: 8px;
  min-width: 180px;
  z-index: 100;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 4px;
}
._historyContainer_1ueix_216 ._historyHeader_1ueix_229 ._headerActions_1ueix_305 ._filterContainer_1ueix_337 ._filterDropdown_1ueix_365 ._filterOption_1ueix_382 {
  padding: 10px 12px;
  background-color: transparent;
  color: var(--clrTextPrimary);
  border: none;
  border-radius: 4px;
  font-weight: 500;
  font-size: 16px;
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: left;
  white-space: nowrap;
}
._historyContainer_1ueix_216 ._historyHeader_1ueix_229 ._headerActions_1ueix_305 ._filterContainer_1ueix_337 ._filterDropdown_1ueix_365 ._filterOption_1ueix_382:hover {
  background-color: rgba(255, 255, 255, 0.1);
}
._historyContainer_1ueix_216 ._historyHeader_1ueix_229 ._headerActions_1ueix_305 ._filterContainer_1ueix_337 ._filterDropdown_1ueix_365 ._filterOption_1ueix_382._active_1ueix_398 {
  background-color: var(--clrAccent-10);
  color: var(--clrAccent-100);
}
._historyContainer_1ueix_216 ._historyHeader_1ueix_229 ._headerActions_1ueix_305 ._editModeBtn_1ueix_402 {
  padding: 8px 16px;
  background-color: transparent;
  color: var(--clrTextPrimary);
  border: none;
  border-radius: 4px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  border: 1px solid var(--clrAccent-10);
}
._historyContainer_1ueix_216 h2 {
  font-size: 24px;
  font-family: var(--font-sans);
  font-weight: 700;
  color: var(--clrAccent-100);
}
._historyContainer_1ueix_216 p {
  color: var(--clrAccent-100);
  opacity: 0.7;
}
._historyContainer_1ueix_216 ._topTabs_1ueix_423 {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 0;
  border-bottom: 1px solid var(--clrAccent-10);
  margin-bottom: 4px;
}
._historyContainer_1ueix_216 ._topTabs_1ueix_423 ._topTab_1ueix_423 {
  flex: 1;
  padding: 12px 16px;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--clrTextSecondary);
  font-size: 16px;
  font-weight: 600;
  font-family: var(--font-sans);
  cursor: pointer;
  transition: all 0.2s ease;
}
._historyContainer_1ueix_216 ._topTabs_1ueix_423 ._topTab_1ueix_423:hover {
  color: var(--clrTextPrimary);
}
._historyContainer_1ueix_216 ._topTabs_1ueix_423 ._topTab_1ueix_423._active_1ueix_398 {
  color: var(--clrAccent-100);
  border-bottom-color: var(--clrAccent-100);
}
._historyContainer_1ueix_216 ._simSubTabs_1ueix_453 {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 0;
  border-bottom: 1px solid var(--clrAccent-10);
  padding-bottom: 0;
}
._historyContainer_1ueix_216 ._simSubTabs_1ueix_453 ._simSubTab_1ueix_453 {
  padding: 10px 16px;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--clrTextSecondary);
  font-size: 12px;
  font-weight: 600;
  font-family: var(--font-sans);
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
._historyContainer_1ueix_216 ._simSubTabs_1ueix_453 ._simSubTab_1ueix_453:hover {
  color: var(--clrTextPrimary);
}
._historyContainer_1ueix_216 ._simSubTabs_1ueix_453 ._simSubTab_1ueix_453._active_1ueix_398 {
  color: var(--clrAccent-100);
  border-bottom-color: var(--clrAccent-100);
}
._historyContainer_1ueix_216 ._simSubTabs_1ueix_453 ._simBadge_1ueix_487 {
  font-size: 10px;
  background: var(--clrAccent-10);
  color: var(--clrTextSecondary);
  padding: 1px 6px;
  border-radius: 10px;
  font-weight: 500;
}
._historyContainer_1ueix_216 ._simSubTabs_1ueix_453 ._simRecord_1ueix_495 {
  margin-left: auto;
  padding-right: 8px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 600;
  font-family: monospace;
}
._historyContainer_1ueix_216 ._simSubTabs_1ueix_453 ._simWins_1ueix_507 {
  color: var(--clrSuccess-100);
}
._historyContainer_1ueix_216 ._simSubTabs_1ueix_453 ._simLosses_1ueix_510 {
  color: var(--clrError-100);
}
._historyContainer_1ueix_216 ._simSubTabs_1ueix_453 ._simSep_1ueix_513 {
  color: var(--clrTextTertiary);
}
._historyContainer_1ueix_216 ._simSubTabs_1ueix_453 ._simEditBtn_1ueix_516 {
  margin-left: 8px;
  padding: 8px 16px;
  background-color: transparent;
  color: var(--clrTextPrimary);
  border: 1px solid var(--clrAccent-10);
  border-radius: 4px;
  font-weight: 600;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: var(--font-sans);
}
._historyContainer_1ueix_216 ._simEditToolbar_1ueix_529 {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  padding: 8px 0;
}
._historyContainer_1ueix_216 ._simEditToolbar_1ueix_529 ._simSelectAllBtn_1ueix_538 {
  padding: 6px 12px;
  background-color: transparent;
  color: var(--clrTextPrimary);
  border: 1px solid var(--clrAccent-10);
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
  font-family: var(--font-sans);
  cursor: pointer;
  transition: all 0.2s ease;
}
._historyContainer_1ueix_216 ._simEditToolbar_1ueix_529 ._simSelectAllBtn_1ueix_538:hover {
  background-color: rgba(255, 255, 255, 0.05);
}
._historyContainer_1ueix_216 ._simEditToolbar_1ueix_529 ._simDeleteBtn_1ueix_553 {
  padding: 6px 12px;
  background-color: transparent;
  color: var(--clrError-100);
  border: 1px solid var(--clrError-100);
  border-radius: 4px;
  font-size: 12px;
  font-weight: 600;
  font-family: var(--font-sans);
  cursor: pointer;
  transition: all 0.2s ease;
}
._historyContainer_1ueix_216 ._simEditToolbar_1ueix_529 ._simDeleteBtn_1ueix_553:hover {
  background-color: var(--clrError-50);
}
._historyContainer_1ueix_216 ._simCheckbox_1ueix_568 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: 0 8px 0 12px;
  flex-shrink: 0;
}
._historyContainer_1ueix_216 ._simCheckbox_1ueix_568 input[type=checkbox] {
  width: 18px;
  height: 18px;
  cursor: pointer;
  accent-color: var(--clrAccent-100);
}
._historyContainer_1ueix_216 ._simMatchList_1ueix_583 {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 8px;
}
._historyContainer_1ueix_216 ._simColumnHeader_1ueix_591 {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 0;
  padding: 4px 12px;
}
._historyContainer_1ueix_216 ._simColumnHeader_1ueix_591 ._simColLabel_1ueix_600 {
  font-size: 10px;
  font-weight: 600;
  color: var(--clrTextTertiary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
._historyContainer_1ueix_216 ._simColumnHeader_1ueix_591 ._simColLabel_1ueix_600:first-child {
  text-align: left;
  flex: 1;
}
._historyContainer_1ueix_216 ._simColumnHeader_1ueix_591 ._simColLabel_1ueix_600:nth-child(2) {
  text-align: center;
  width: 120px;
  flex-shrink: 0;
}
._historyContainer_1ueix_216 ._simColumnHeader_1ueix_591 ._simColLabel_1ueix_600:last-child {
  text-align: right;
  flex: 1;
}
._historyContainer_1ueix_216 ._simRow_1ueix_620 {
  width: 100%;
  min-height: 72px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 0;
  border: 1px solid var(--clrTertiary);
  border-radius: 8px;
  overflow: hidden;
  background-color: transparent;
  box-sizing: border-box;
}
._historyContainer_1ueix_216 ._simLeaderLeft_1ueix_634 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  padding: 4px 4px 4px 8px;
  flex: 1;
  min-width: 0;
}
._historyContainer_1ueix_216 ._simLeaderLeft_1ueix_634 > div:first-child {
  flex-shrink: 0;
  aspect-ratio: 1;
}
._historyContainer_1ueix_216 ._simMyInfo_1ueix_648 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 2px;
  min-width: 0;
  overflow: hidden;
}
._historyContainer_1ueix_216 ._simMyInfo_1ueix_648 ._simMyName_1ueix_657 {
  font-size: 14px;
  font-weight: 600;
  font-family: var(--font-sans);
  color: var(--clrAccent-80);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
}
._historyContainer_1ueix_216 ._simMyInfo_1ueix_648 ._simMySub_1ueix_667 {
  font-size: 10px;
  color: var(--clrTextTertiary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
}
._historyContainer_1ueix_216 ._simCenter_1ueix_675 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 120px;
  flex-shrink: 0;
  min-height: 72px;
  align-self: stretch;
  padding: 0 8px;
  position: relative;
}
._historyContainer_1ueix_216 ._simCenter_1ueix_675 ._simDate_1ueix_688 {
  position: absolute;
  top: 4px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 9px;
  font-family: monospace;
  color: var(--clrTextTertiary);
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.2s ease;
  pointer-events: none;
}
._historyContainer_1ueix_216 ._simCenter_1ueix_675._simCenterWin_1ueix_701 {
  background: radial-gradient(ellipse at center, rgba(94, 178, 122, 0.3) 0%, rgba(50, 126, 75, 0.08) 50%, transparent 80%);
}
._historyContainer_1ueix_216 ._simCenter_1ueix_675._simCenterLoss_1ueix_704 {
  background: radial-gradient(ellipse at center, rgba(238, 70, 70, 0.3) 0%, rgba(175, 49, 49, 0.08) 50%, transparent 80%);
}
._historyContainer_1ueix_216 ._simRow_1ueix_620:hover ._simDate_1ueix_688 {
  opacity: 1;
}
._historyContainer_1ueix_216 ._simLeaderRight_1ueix_710 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding: 4px 8px 4px 4px;
  flex: 1;
  min-width: 0;
}
._historyContainer_1ueix_216 ._simLeaderRight_1ueix_710 > div:last-child {
  flex-shrink: 0;
  aspect-ratio: 1;
}
._historyContainer_1ueix_216 ._simOppInfo_1ueix_724 {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  gap: 2px;
  min-width: 0;
  overflow: hidden;
}
._historyContainer_1ueix_216 ._simOppInfo_1ueix_724 ._simOppName_1ueix_733 {
  font-size: 14px;
  font-weight: 600;
  font-family: var(--font-sans);
  color: var(--clrAccent-80);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
  text-align: right;
}
._historyContainer_1ueix_216 ._simOppInfo_1ueix_724 ._simOppSub_1ueix_744 {
  font-size: 10px;
  color: var(--clrTextTertiary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
  text-align: right;
}
@media (max-width: 600px) {
  ._historyContainer_1ueix_216 ._simMyInfo_1ueix_648,
  ._historyContainer_1ueix_216 ._simOppInfo_1ueix_724 {
    display: none;
  }
  ._historyContainer_1ueix_216 ._simCenter_1ueix_675 {
    width: 100px;
    padding: 0 4px;
  }
  ._historyContainer_1ueix_216 ._simLeaderLeft_1ueix_634 {
    padding: 4px 2px 4px 6px;
  }
  ._historyContainer_1ueix_216 ._simLeaderRight_1ueix_710 {
    padding: 4px 6px 4px 2px;
  }
  ._historyContainer_1ueix_216 ._simCheckbox_1ueix_568 {
    padding: 0 4px 0 8px;
  }
}
._historyContainer_1ueix_216 ._loadMoreTrigger_1ueix_772 {
  width: 100%;
  min-height: 60px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: 20px 0;
}
._historyContainer_1ueix_216 ._loadMoreTrigger_1ueix_772 ._smallLoader_1ueix_782 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: 16px;
}
._historyContainer_1ueix_216 ._loadMoreTrigger_1ueix_772 ._smallLoader_1ueix_782 ._spinner_1ueix_790 {
  width: 32px;
  height: 32px;
  border: 3px solid rgba(255, 255, 255, 0.1);
  border-top-color: var(--clrAccent-100);
  border-radius: 50%;
  animation: _spin_1ueix_790 0.8s linear infinite;
}

._titleGroup_1ueix_799 {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: 10px;
}

._tournamentCount_1ueix_806 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 24px;
  padding: 0 8px;
  border: 1px solid var(--clrTertiary);
  border-radius: 999px;
  color: var(--clrTextSecondary);
  background: color-mix(in srgb, var(--clrSecondary) 82%, transparent);
  font-size: 10px;
  font-weight: 700;
}

._tournamentList_1ueix_821 {
  display: flex;
  width: 100%;
  flex-direction: column;
  gap: 12px;
}

._historyContainerV2_1ueix_828 {
  max-width: 1440px;
  padding-right: 20px;
  padding-left: 20px;
  gap: 18px;
}
._historyContainerV2_1ueix_828 ._topTabs_1ueix_423 {
  align-self: flex-start;
  width: auto;
  overflow: hidden;
  gap: 2px;
  margin-bottom: 0;
  padding: 4px;
  border: 1px solid var(--clrTertiary);
  border-radius: 10px;
  background: color-mix(in srgb, var(--clrSecondary) 72%, transparent);
}
._historyContainerV2_1ueix_828 ._topTabs_1ueix_423 ._topTab_1ueix_423 {
  min-width: 132px;
  min-height: 40px;
  flex: 0 0 auto;
  padding: 0 16px;
  border-right: 0;
  border-bottom: 0;
  border-radius: 7px;
  font-size: 16px;
}
._historyContainerV2_1ueix_828 ._topTabs_1ueix_423 ._topTab_1ueix_423:hover {
  background: color-mix(in srgb, var(--clrTextPrimary) 4%, transparent);
}
._historyContainerV2_1ueix_828 ._topTabs_1ueix_423 ._topTab_1ueix_423._active_1ueix_398 {
  border-bottom: 0;
  color: var(--clrTextPrimary);
  background: var(--clrTertiary);
  box-shadow: none;
}
._historyContainerV2_1ueix_828 ._historyHeader_1ueix_229 {
  min-height: 52px;
}
._historyContainerV2_1ueix_828 ._historyHeader_1ueix_229 h2 {
  font-size: 28px;
  letter-spacing: -0.03em;
}
._historyContainerV2_1ueix_828 ._historyHeader_1ueix_229 ._headerActions_1ueix_305 {
  gap: 10px;
}
._historyContainerV2_1ueix_828 ._historyHeader_1ueix_229 ._headerActions_1ueix_305 ._searchBtn_1ueix_313,
._historyContainerV2_1ueix_828 ._historyHeader_1ueix_229 ._headerActions_1ueix_305 ._filterContainer_1ueix_337 ._filterBtn_1ueix_340,
._historyContainerV2_1ueix_828 ._historyHeader_1ueix_229 ._headerActions_1ueix_305 ._editModeBtn_1ueix_402 {
  min-width: 44px;
  min-height: 42px;
  border-color: var(--clrTertiary);
  border-radius: 9px;
  background: color-mix(in srgb, var(--clrSecondary) 70%, transparent);
}

._newTournamentBtn_1ueix_884 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 0 16px;
  gap: 8px;
  border: 1px solid var(--clrTextPrimary);
  border-radius: 9px;
  background: var(--clrTextPrimary);
  color: var(--clrPrimary);
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 750;
  cursor: pointer;
  transition: opacity 0.18s ease, transform 0.18s ease;
}
._newTournamentBtn_1ueix_884 svg {
  width: 18px;
  height: 18px;
}
._newTournamentBtn_1ueix_884:hover {
  opacity: 0.86;
}
._newTournamentBtn_1ueix_884:active {
  transform: scale(0.97);
}

._tournamentGridV2_1ueix_912 {
  display: grid;
  width: 100%;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
  gap: 14px;
}

@media (max-width: 980px) {
  ._tournamentGridV2_1ueix_912 {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (max-width: 768px) {
  ._newTournamentBtn_1ueix_884 {
    display: none;
  }
  ._historyContainerV2_1ueix_828 {
    padding-right: 16px;
    padding-left: 16px;
    gap: 12px;
  }
  ._historyContainerV2_1ueix_828 ._topTabs_1ueix_423 {
    width: 100%;
    border-right: 0;
    border-left: 0;
    border-radius: 0;
  }
  ._historyContainerV2_1ueix_828 ._topTabs_1ueix_423 ._topTab_1ueix_423 {
    min-width: 0;
    min-height: 44px;
    flex: 1;
    font-size: 16px;
  }
  ._historyContainerV2_1ueix_828 ._historyHeader_1ueix_229 h2 {
    font-size: 20px;
  }
}
@keyframes _spin_1ueix_790 {
  to {
    transform: rotate(360deg);
  }
}
@keyframes _expandSearch_1ueix_1 {
  from {
    transform: scaleX(0.8);
    opacity: 0;
  }
  to {
    transform: scaleX(1);
    opacity: 1;
  }
}
@keyframes _fadeInIcon_1ueix_1 {
  from {
    opacity: 0;
    transform: translateX(-8px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes _fadeInInput_1ueix_1 {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes _fadeIn_1ueix_1 {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
._freeplayRowWrap_1ueix_991 {
  position: relative;
  width: 100%;
}

._freeplayRowActions_1ueix_996 {
  position: absolute;
  top: 8px;
  right: 8px;
  display: flex;
  gap: 6px;
  z-index: 2;
}

._freeplayRowBtn_1ueix_1005 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  border: none;
  background: rgba(0, 0, 0, 0.45);
  color: #fff;
  cursor: pointer;
  transition: transform 0.15s ease;
}
._freeplayRowBtn_1ueix_1005 svg {
  width: 16px;
  height: 16px;
}
._freeplayRowBtn_1ueix_1005:active {
  transform: scale(0.94);
}

._freeplayRowBtnDanger_1ueix_1026 {
  background: rgba(220, 38, 38, 0.85);
}

._historyContainer_1ueix_216, ._historyContainerV2_1ueix_828 {
  box-sizing: border-box;
  width: 100%;
  max-width: var(--site-max-width, 1440px);
  margin-inline: auto;
  padding-inline: var(--site-gutter, 20px);
}html {
  color-scheme: dark;
}

html:has(body._themeLight_2yp9t_5),
html:has(body._themePastelLight_2yp9t_6) {
  color-scheme: light;
}

:root {
  --clrPrimary: #F4F4F5;
  --clrPrimary30: rgba(244, 244, 245, 0.3);
  --clrSecondary: #FEFEFE;
  --clrTertiary: #E4E4E7;
  --clrPrimaryReverse: #101418;
  --clrSecondaryReverse: #0A0F14;
  --clrTertiaryReverse: #212327;
  --clrTextPrimary: #101418;
  --clrTextSecondary: #2E3337;
  --clrTextTertiary: #7C7C7C;
  --clrTextPrimaryReverse: #F4F4F5;
  --clrTextSecondaryReverse: #CDCDCD;
  --clrTextTertiaryReverse: #8A8A8A;
  --clrError-100: #641f1f;
  --clrError-50: #c84d4d;
  --clrSuccess-100: #2d692d;
  --clrSuccess-50: #3EA03E;
  --clrSuccessOnTint: #0d260d;
  --clrErrorOnTint: #2e0a0a;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgb(50, 126, 75, 0.1) 30%,
          rgb(94, 178, 122, 0.36) 60%,
          rgb(144, 215, 168) 100%);
  --clrNavBackground: rgba(244, 244, 245, 0.15);
  --clrNavItemActive: rgba(211, 211, 211, 0.4);
  --clrNavItemHover: rgba(0, 0, 0, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #F4F4F5;
  --clrGlassBackground: rgba(255, 255, 255, 0.5);
  --clrGlassBackgroundStrong: rgba(255, 255, 255, 0.3);
  --clrGlassBorder: rgba(0, 0, 0, 0.1);
  --snackbarDefaultBg: #F1ECE9;
  --snackbarDefaultText: #5D605C;
  --snackbarDefaultBorder: #5D605C;
  --snackbarDefaultIcon: #5D605C;
  --snackbarSuccessBg: #E0F1D9;
  --snackbarSuccessText: #358935;
  --snackbarSuccessBorder: #358935;
  --snackbarSuccessIcon: #358935;
  --snackbarErrorBg: #F9E1DC;
  --snackbarErrorText: #C80D12;
  --snackbarErrorBorder: #C80D12;
  --snackbarErrorIcon: #C80D12;
}

._themeLight_2yp9t_5 {
  --clrPrimary: #F4F4F5;
  --clrPrimary30: rgba(244, 244, 245, 0.3);
  --clrSecondary: #FEFEFE;
  --clrTertiary: #E4E4E7;
  --clrPrimaryReverse: #101418;
  --clrSecondaryReverse: #0A0F14;
  --clrTertiaryReverse: #212327;
  --clrTextPrimary: #101418;
  --clrTextSecondary: #2E3337;
  --clrTextTertiary: #7C7C7C;
  --clrTextPrimaryReverse: #F4F4F5;
  --clrTextSecondaryReverse: #CDCDCD;
  --clrTextTertiaryReverse: #8A8A8A;
  --clrError-100: #c03b3b;
  --clrError-50: #f6c5c5;
  --clrSuccess-100: #30d330;
  --clrSuccess-50: #bbffbb;
  --clrSuccessOnTint: #1f4f1f;
  --clrErrorOnTint: #7a1f1f;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgb(50, 126, 75, 0.1) 30%,
          rgb(94, 178, 122, 0.36) 60%,
          rgb(144, 215, 168) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(175, 49, 49, 0.1) 30%,
          rgba(238, 70, 70, 0.36) 60%,
          rgb(255, 173, 173) 100%);
  --clrNavBackground: rgba(244, 244, 245, 0.15);
  --clrNavItemActive: rgba(211, 211, 211, 0.4);
  --clrNavItemHover: rgba(0, 0, 0, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0000c1;
  --clrGlassBackground: rgba(255, 255, 255, 0.5);
  --clrGlassBackgroundStrong: rgba(255, 255, 255, 0.5);
  --clrGlassBorder: rgba(0, 0, 0, 0.1);
  --snackbarDefaultBg: #F1ECE9;
  --snackbarDefaultText: #5D605C;
  --snackbarDefaultBorder: #5D605C;
  --snackbarDefaultIcon: #5D605C;
  --snackbarSuccessBg: #E0F1D9;
  --snackbarSuccessText: #358935;
  --snackbarSuccessBorder: #358935;
  --snackbarSuccessIcon: #358935;
  --snackbarErrorBg: #F9E1DC;
  --snackbarErrorText: #C80D12;
  --snackbarErrorBorder: #C80D12;
  --snackbarErrorIcon: #C80D12;
}

._themeDark_2yp9t_131 {
  --clrPrimary: #0F1418;
  --clrPrimary30: rgba(15, 20, 25, 0.3);
  --clrSecondary: #0A0F14;
  --clrTertiary: #212327;
  --clrPrimaryReverse: #F4F4F5;
  --clrSecondaryReverse: #FEFEFE;
  --clrTertiaryReverse: #E4E4E7;
  --clrTextPrimary: #F4F4F5;
  --clrTextSecondary: #CDCDCD;
  --clrTextTertiary: #8A8A8A;
  --clrTextPrimaryReverse: #101418;
  --clrTextSecondaryReverse: #2E3337;
  --clrTextTertiaryReverse: #7C7C7C;
  --clrError-100: #c84d4d;
  --clrError-50: #641f1f;
  --clrSuccess-100: #3EA03E;
  --clrSuccess-50: #2d692d;
  --clrSuccessOnTint: #d6ffd6;
  --clrErrorOnTint: #ffd6d6;
  --clrWarning-100: #E88434;
  --clrWarning-50: #C49168;
  --clrAccent-100: #FFFFFF;
  --clrAccent-80: rgba(255, 255, 255, 0.8);
  --clrAccent-60: rgba(255, 255, 255, 0.6);
  --clrAccent-50: rgba(255, 255, 255, 0.5);
  --clrAccent-40: rgba(255, 255, 255, 0.4);
  --clrAccent-30: rgba(255, 255, 255, 0.3);
  --clrAccent-20: rgba(255, 255, 255, 0.2);
  --clrAccent-10: rgba(255, 255, 255, 0.1);
  --clrGradient: linear-gradient(90deg, #262a2e 10%, var(--clrPrimary) 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(50, 126, 75, 0.15) 30%,
          rgba(50, 126, 75, 0.3) 60%,
          rgba(50, 126, 75, 0.5) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(167, 44, 44, 0) 0%,
          rgba(167, 44, 44, 0.15) 30%,
          rgba(167, 44, 44, 0.3) 60%,
          rgba(167, 44, 44, 0.5) 100%);
  --clrNavBackground: rgba(0, 0, 0, 0.15);
  --clrNavItemActive: rgba(24, 24, 24, 0.49);
  --clrNavItemHover: rgba(255, 255, 255, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0F1418;
  --clrGlassBackground: rgba(15, 20, 24, 0.5);
  --clrGlassBackgroundStrong: rgba(15, 20, 24, 0.6);
  --clrGlassBorder: rgba(255, 255, 255, 0.1);
  --snackbarDefaultBg: #414141;
  --snackbarDefaultText: #BABABA;
  --snackbarDefaultBorder: #BABABA;
  --snackbarDefaultIcon: #BABABA;
  --snackbarSuccessBg: #145E18;
  --snackbarSuccessText: #8FE094;
  --snackbarSuccessBorder: #8FE094;
  --snackbarSuccessIcon: #8FE094;
  --snackbarErrorBg: #910C09;
  --snackbarErrorText: #FE9E9D;
  --snackbarErrorBorder: #FE9E9D;
  --snackbarErrorIcon: #FE9E9D;
}

/* 

Note: 
    If you want something done quick, ask AI to buuild your color themes.
    If you want to do it right and tidy though, do it manually. 

    - Theo

*/
:root {
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --font-accent: "Jaro", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}

html,
body {
  font-family: var(--font-sans);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

._appDownloadDrawer_2yp9t_216 {
  gap: 0;
}

._content_2yp9t_220 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  width: 100%;
  padding-bottom: 8px;
}

._logo_2yp9t_230 {
  width: 64px;
  height: 64px;
  border-radius: 12px;
}

._heading_2yp9t_236 {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  color: var(--clrTextPrimary);
  text-align: center;
}

._subheading_2yp9t_244 {
  margin: 0;
  font-size: 16px;
  color: var(--clrAccent-60);
  text-align: center;
}

._promoImage_2yp9t_251 {
  width: auto;
  max-width: 100%;
  max-height: 340px;
  border-radius: 12px;
  object-fit: contain;
}

._downloadButton_2yp9t_259 {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  transition: transform 0.15s ease;
}
._downloadButton_2yp9t_259:active {
  transform: scale(0.96);
}

._appStoreBadge_2yp9t_270 {
  height: 52px;
  width: auto;
}._page_rwe8n_1 {
  --ink: #fff;
  --paper: #111;
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  min-height: calc(100svh - 60px);
  margin-top: 60px;
  padding: 180px 24px 100px;
  overflow: clip;
  background: var(--paper);
  color: var(--ink);
}
._page_rwe8n_1[data-theme=light] {
  --ink: #111;
  --paper: #fff;
}

._background_rwe8n_20 {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform: translateX(3%) scale(1.12);
  pointer-events: none;
}

._bubble_rwe8n_32 {
  position: absolute;
  width: clamp(180px, 24vw, 380px);
  height: auto;
  scale: 1;
  transition: scale 450ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

._bubbleRight_rwe8n_40 {
  top: 8%;
  right: clamp(20px, 5vw, 100px);
  transform: rotate(5deg);
}

._bubbleLeft_rwe8n_46 {
  top: 20%;
  left: clamp(20px, 5vw, 100px);
  transform: rotate(-6deg);
}

._content_rwe8n_52 {
  position: relative;
  text-align: center;
}

._title_rwe8n_57 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  color: var(--ink);
}

._code_rwe8n_65 {
  font-size: clamp(96px, 12vw, 180px);
  font-weight: 900;
  line-height: 0.9;
  letter-spacing: -0.075em;
  padding-right: 0.075em;
}

._label_rwe8n_73 {
  font-size: 14px;
  font-weight: 750;
  letter-spacing: 0.18em;
  line-height: 1.5;
  text-transform: uppercase;
}

._description_rwe8n_81 {
  margin-top: 18px;
  font-size: 15px;
  line-height: 1.6;
}

._actions_rwe8n_87 {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 24px;
}

._button_rwe8n_95 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 12px 20px;
  border: 1px solid var(--ink);
  border-radius: 6px;
  background: var(--paper);
  color: var(--ink);
  font-size: 14px;
  font-weight: 650;
  line-height: 1.4;
  text-decoration: none;
  transition: transform 150ms ease;
}
._button_rwe8n_95:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 4px;
}

._primaryButton_rwe8n_116 {
  background: var(--ink);
  color: var(--paper);
}

@media (hover: hover) {
  ._bubble_rwe8n_32:hover {
    scale: 1.04;
  }
  ._button_rwe8n_95:hover {
    transform: translateY(-3px);
  }
}
@media (max-width: 840px) {
  ._page_rwe8n_1 {
    padding: clamp(260px, 38svh, 340px) 16px calc(120px + env(safe-area-inset-bottom));
  }
  ._bubble_rwe8n_32 {
    width: clamp(140px, 36vw, 260px);
  }
  ._bubbleRight_rwe8n_40 {
    top: 24px;
    right: 5%;
  }
  ._bubbleLeft_rwe8n_46 {
    top: 100px;
    left: 5%;
  }
  ._code_rwe8n_65 {
    font-size: clamp(96px, 15vw, 126px);
  }
}
@media (max-width: 420px) {
  ._bubble_rwe8n_32 {
    width: 43%;
  }
  ._bubbleRight_rwe8n_40 {
    right: 4%;
  }
  ._bubbleLeft_rwe8n_46 {
    left: 4%;
  }
  ._actions_rwe8n_87 {
    gap: 8px;
  }
  ._button_rwe8n_95 {
    padding-inline: 12px;
    font-size: 13px;
  }
}
@media (prefers-reduced-motion: reduce) {
  ._bubble_rwe8n_32 {
    transition: none;
  }
  ._bubble_rwe8n_32:hover {
    scale: 1;
  }
  ._button_rwe8n_95 {
    transition: none;
  }
  ._button_rwe8n_95:hover {
    transform: none;
  }
}html {
  color-scheme: dark;
}

html:has(body._themeLight_hokzb_5),
html:has(body._themePastelLight_hokzb_6) {
  color-scheme: light;
}

:root {
  --clrPrimary: #F4F4F5;
  --clrPrimary30: rgba(244, 244, 245, 0.3);
  --clrSecondary: #FEFEFE;
  --clrTertiary: #E4E4E7;
  --clrPrimaryReverse: #101418;
  --clrSecondaryReverse: #0A0F14;
  --clrTertiaryReverse: #212327;
  --clrTextPrimary: #101418;
  --clrTextSecondary: #2E3337;
  --clrTextTertiary: #7C7C7C;
  --clrTextPrimaryReverse: #F4F4F5;
  --clrTextSecondaryReverse: #CDCDCD;
  --clrTextTertiaryReverse: #8A8A8A;
  --clrError-100: #641f1f;
  --clrError-50: #c84d4d;
  --clrSuccess-100: #2d692d;
  --clrSuccess-50: #3EA03E;
  --clrSuccessOnTint: #0d260d;
  --clrErrorOnTint: #2e0a0a;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgb(50, 126, 75, 0.1) 30%,
          rgb(94, 178, 122, 0.36) 60%,
          rgb(144, 215, 168) 100%);
  --clrNavBackground: rgba(244, 244, 245, 0.15);
  --clrNavItemActive: rgba(211, 211, 211, 0.4);
  --clrNavItemHover: rgba(0, 0, 0, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #F4F4F5;
  --clrGlassBackground: rgba(255, 255, 255, 0.5);
  --clrGlassBackgroundStrong: rgba(255, 255, 255, 0.3);
  --clrGlassBorder: rgba(0, 0, 0, 0.1);
  --snackbarDefaultBg: #F1ECE9;
  --snackbarDefaultText: #5D605C;
  --snackbarDefaultBorder: #5D605C;
  --snackbarDefaultIcon: #5D605C;
  --snackbarSuccessBg: #E0F1D9;
  --snackbarSuccessText: #358935;
  --snackbarSuccessBorder: #358935;
  --snackbarSuccessIcon: #358935;
  --snackbarErrorBg: #F9E1DC;
  --snackbarErrorText: #C80D12;
  --snackbarErrorBorder: #C80D12;
  --snackbarErrorIcon: #C80D12;
}

._themeLight_hokzb_5 {
  --clrPrimary: #F4F4F5;
  --clrPrimary30: rgba(244, 244, 245, 0.3);
  --clrSecondary: #FEFEFE;
  --clrTertiary: #E4E4E7;
  --clrPrimaryReverse: #101418;
  --clrSecondaryReverse: #0A0F14;
  --clrTertiaryReverse: #212327;
  --clrTextPrimary: #101418;
  --clrTextSecondary: #2E3337;
  --clrTextTertiary: #7C7C7C;
  --clrTextPrimaryReverse: #F4F4F5;
  --clrTextSecondaryReverse: #CDCDCD;
  --clrTextTertiaryReverse: #8A8A8A;
  --clrError-100: #c03b3b;
  --clrError-50: #f6c5c5;
  --clrSuccess-100: #30d330;
  --clrSuccess-50: #bbffbb;
  --clrSuccessOnTint: #1f4f1f;
  --clrErrorOnTint: #7a1f1f;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgb(50, 126, 75, 0.1) 30%,
          rgb(94, 178, 122, 0.36) 60%,
          rgb(144, 215, 168) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(175, 49, 49, 0.1) 30%,
          rgba(238, 70, 70, 0.36) 60%,
          rgb(255, 173, 173) 100%);
  --clrNavBackground: rgba(244, 244, 245, 0.15);
  --clrNavItemActive: rgba(211, 211, 211, 0.4);
  --clrNavItemHover: rgba(0, 0, 0, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0000c1;
  --clrGlassBackground: rgba(255, 255, 255, 0.5);
  --clrGlassBackgroundStrong: rgba(255, 255, 255, 0.5);
  --clrGlassBorder: rgba(0, 0, 0, 0.1);
  --snackbarDefaultBg: #F1ECE9;
  --snackbarDefaultText: #5D605C;
  --snackbarDefaultBorder: #5D605C;
  --snackbarDefaultIcon: #5D605C;
  --snackbarSuccessBg: #E0F1D9;
  --snackbarSuccessText: #358935;
  --snackbarSuccessBorder: #358935;
  --snackbarSuccessIcon: #358935;
  --snackbarErrorBg: #F9E1DC;
  --snackbarErrorText: #C80D12;
  --snackbarErrorBorder: #C80D12;
  --snackbarErrorIcon: #C80D12;
}

._themeDark_hokzb_131 {
  --clrPrimary: #0F1418;
  --clrPrimary30: rgba(15, 20, 25, 0.3);
  --clrSecondary: #0A0F14;
  --clrTertiary: #212327;
  --clrPrimaryReverse: #F4F4F5;
  --clrSecondaryReverse: #FEFEFE;
  --clrTertiaryReverse: #E4E4E7;
  --clrTextPrimary: #F4F4F5;
  --clrTextSecondary: #CDCDCD;
  --clrTextTertiary: #8A8A8A;
  --clrTextPrimaryReverse: #101418;
  --clrTextSecondaryReverse: #2E3337;
  --clrTextTertiaryReverse: #7C7C7C;
  --clrError-100: #c84d4d;
  --clrError-50: #641f1f;
  --clrSuccess-100: #3EA03E;
  --clrSuccess-50: #2d692d;
  --clrSuccessOnTint: #d6ffd6;
  --clrErrorOnTint: #ffd6d6;
  --clrWarning-100: #E88434;
  --clrWarning-50: #C49168;
  --clrAccent-100: #FFFFFF;
  --clrAccent-80: rgba(255, 255, 255, 0.8);
  --clrAccent-60: rgba(255, 255, 255, 0.6);
  --clrAccent-50: rgba(255, 255, 255, 0.5);
  --clrAccent-40: rgba(255, 255, 255, 0.4);
  --clrAccent-30: rgba(255, 255, 255, 0.3);
  --clrAccent-20: rgba(255, 255, 255, 0.2);
  --clrAccent-10: rgba(255, 255, 255, 0.1);
  --clrGradient: linear-gradient(90deg, #262a2e 10%, var(--clrPrimary) 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(50, 126, 75, 0.15) 30%,
          rgba(50, 126, 75, 0.3) 60%,
          rgba(50, 126, 75, 0.5) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(167, 44, 44, 0) 0%,
          rgba(167, 44, 44, 0.15) 30%,
          rgba(167, 44, 44, 0.3) 60%,
          rgba(167, 44, 44, 0.5) 100%);
  --clrNavBackground: rgba(0, 0, 0, 0.15);
  --clrNavItemActive: rgba(24, 24, 24, 0.49);
  --clrNavItemHover: rgba(255, 255, 255, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0F1418;
  --clrGlassBackground: rgba(15, 20, 24, 0.5);
  --clrGlassBackgroundStrong: rgba(15, 20, 24, 0.6);
  --clrGlassBorder: rgba(255, 255, 255, 0.1);
  --snackbarDefaultBg: #414141;
  --snackbarDefaultText: #BABABA;
  --snackbarDefaultBorder: #BABABA;
  --snackbarDefaultIcon: #BABABA;
  --snackbarSuccessBg: #145E18;
  --snackbarSuccessText: #8FE094;
  --snackbarSuccessBorder: #8FE094;
  --snackbarSuccessIcon: #8FE094;
  --snackbarErrorBg: #910C09;
  --snackbarErrorText: #FE9E9D;
  --snackbarErrorBorder: #FE9E9D;
  --snackbarErrorIcon: #FE9E9D;
}

/* 

Note: 
    If you want something done quick, ask AI to buuild your color themes.
    If you want to do it right and tidy though, do it manually. 

    - Theo

*/
:root {
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --font-accent: "Jaro", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}

html,
body {
  font-family: var(--font-sans);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

._pageContainer_hokzb_216 {
  max-width: 900px;
  margin: 0 auto;
  padding: 128px 24px;
}

._header_hokzb_222 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 40px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--clrAccent-20);
}

._logoSection_hokzb_233 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
}
._logoSection_hokzb_233 ._logo_hokzb_233 {
  width: 48px;
  height: 48px;
  object-fit: contain;
}
._logoSection_hokzb_233 ._appName_hokzb_245 {
  font-size: 24px;
  font-weight: 700;
  color: var(--clrAccent-100);
}

._backButton_hokzb_251 {
  background-color: var(--clrAccent-100);
  color: var(--clrPrimary);
  padding: 10px 20px;
  border-radius: 4px;
  text-decoration: none;
  font-weight: 600;
  font-size: 14px;
  transition: all 0.2s ease;
}
._backButton_hokzb_251:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(255, 255, 255, 0.2);
}

._pageContainer_hokzb_216 h1 {
  font-size: 42px;
  font-weight: 700;
  color: var(--clrAccent-100);
  margin-bottom: 40px;
  text-align: left;
}

._content_hokzb_274 {
  color: var(--clrAccent-80);
  line-height: 1.8;
}
._content_hokzb_274 h2 {
  font-size: 28px;
  font-weight: 600;
  color: var(--clrAccent-100);
  margin-top: 32px;
  margin-bottom: 16px;
  text-align: left;
}
._content_hokzb_274 p {
  font-size: 16px;
  margin-bottom: 20px;
}
._content_hokzb_274 strong {
  color: var(--clrAccent-100);
  font-weight: 600;
}

@media (max-width: 768px) {
  ._header_hokzb_222 {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
  ._logoSection_hokzb_233 ._logo_hokzb_233 {
    width: 40px;
    height: 40px;
  }
  ._logoSection_hokzb_233 ._appName_hokzb_245 {
    font-size: 20px;
  }
  ._backButton_hokzb_251 {
    width: 100%;
    text-align: center;
  }
  ._pageContainer_hokzb_216 {
    padding: 80px 20px;
  }
  ._pageContainer_hokzb_216 h1 {
    font-size: 32px;
    margin-bottom: 32px;
  }
  ._content_hokzb_274 h2 {
    font-size: 24px;
    margin-top: 24px;
  }
  ._content_hokzb_274 p {
    font-size: 15px;
  }
}
._pageContainer_hokzb_216 {
  box-sizing: border-box;
  width: 100%;
  max-width: var(--site-max-width, 1440px);
  margin-inline: auto;
  padding-inline: var(--site-gutter, 20px);
}html {
  color-scheme: dark;
}

html:has(body._themeLight_14plk_5),
html:has(body._themePastelLight_14plk_6) {
  color-scheme: light;
}

:root {
  --clrPrimary: #F4F4F5;
  --clrPrimary30: rgba(244, 244, 245, 0.3);
  --clrSecondary: #FEFEFE;
  --clrTertiary: #E4E4E7;
  --clrPrimaryReverse: #101418;
  --clrSecondaryReverse: #0A0F14;
  --clrTertiaryReverse: #212327;
  --clrTextPrimary: #101418;
  --clrTextSecondary: #2E3337;
  --clrTextTertiary: #7C7C7C;
  --clrTextPrimaryReverse: #F4F4F5;
  --clrTextSecondaryReverse: #CDCDCD;
  --clrTextTertiaryReverse: #8A8A8A;
  --clrError-100: #641f1f;
  --clrError-50: #c84d4d;
  --clrSuccess-100: #2d692d;
  --clrSuccess-50: #3EA03E;
  --clrSuccessOnTint: #0d260d;
  --clrErrorOnTint: #2e0a0a;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgb(50, 126, 75, 0.1) 30%,
          rgb(94, 178, 122, 0.36) 60%,
          rgb(144, 215, 168) 100%);
  --clrNavBackground: rgba(244, 244, 245, 0.15);
  --clrNavItemActive: rgba(211, 211, 211, 0.4);
  --clrNavItemHover: rgba(0, 0, 0, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #F4F4F5;
  --clrGlassBackground: rgba(255, 255, 255, 0.5);
  --clrGlassBackgroundStrong: rgba(255, 255, 255, 0.3);
  --clrGlassBorder: rgba(0, 0, 0, 0.1);
  --snackbarDefaultBg: #F1ECE9;
  --snackbarDefaultText: #5D605C;
  --snackbarDefaultBorder: #5D605C;
  --snackbarDefaultIcon: #5D605C;
  --snackbarSuccessBg: #E0F1D9;
  --snackbarSuccessText: #358935;
  --snackbarSuccessBorder: #358935;
  --snackbarSuccessIcon: #358935;
  --snackbarErrorBg: #F9E1DC;
  --snackbarErrorText: #C80D12;
  --snackbarErrorBorder: #C80D12;
  --snackbarErrorIcon: #C80D12;
}

._themeLight_14plk_5 {
  --clrPrimary: #F4F4F5;
  --clrPrimary30: rgba(244, 244, 245, 0.3);
  --clrSecondary: #FEFEFE;
  --clrTertiary: #E4E4E7;
  --clrPrimaryReverse: #101418;
  --clrSecondaryReverse: #0A0F14;
  --clrTertiaryReverse: #212327;
  --clrTextPrimary: #101418;
  --clrTextSecondary: #2E3337;
  --clrTextTertiary: #7C7C7C;
  --clrTextPrimaryReverse: #F4F4F5;
  --clrTextSecondaryReverse: #CDCDCD;
  --clrTextTertiaryReverse: #8A8A8A;
  --clrError-100: #c03b3b;
  --clrError-50: #f6c5c5;
  --clrSuccess-100: #30d330;
  --clrSuccess-50: #bbffbb;
  --clrSuccessOnTint: #1f4f1f;
  --clrErrorOnTint: #7a1f1f;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgb(50, 126, 75, 0.1) 30%,
          rgb(94, 178, 122, 0.36) 60%,
          rgb(144, 215, 168) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(175, 49, 49, 0.1) 30%,
          rgba(238, 70, 70, 0.36) 60%,
          rgb(255, 173, 173) 100%);
  --clrNavBackground: rgba(244, 244, 245, 0.15);
  --clrNavItemActive: rgba(211, 211, 211, 0.4);
  --clrNavItemHover: rgba(0, 0, 0, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0000c1;
  --clrGlassBackground: rgba(255, 255, 255, 0.5);
  --clrGlassBackgroundStrong: rgba(255, 255, 255, 0.5);
  --clrGlassBorder: rgba(0, 0, 0, 0.1);
  --snackbarDefaultBg: #F1ECE9;
  --snackbarDefaultText: #5D605C;
  --snackbarDefaultBorder: #5D605C;
  --snackbarDefaultIcon: #5D605C;
  --snackbarSuccessBg: #E0F1D9;
  --snackbarSuccessText: #358935;
  --snackbarSuccessBorder: #358935;
  --snackbarSuccessIcon: #358935;
  --snackbarErrorBg: #F9E1DC;
  --snackbarErrorText: #C80D12;
  --snackbarErrorBorder: #C80D12;
  --snackbarErrorIcon: #C80D12;
}

._themeDark_14plk_131 {
  --clrPrimary: #0F1418;
  --clrPrimary30: rgba(15, 20, 25, 0.3);
  --clrSecondary: #0A0F14;
  --clrTertiary: #212327;
  --clrPrimaryReverse: #F4F4F5;
  --clrSecondaryReverse: #FEFEFE;
  --clrTertiaryReverse: #E4E4E7;
  --clrTextPrimary: #F4F4F5;
  --clrTextSecondary: #CDCDCD;
  --clrTextTertiary: #8A8A8A;
  --clrTextPrimaryReverse: #101418;
  --clrTextSecondaryReverse: #2E3337;
  --clrTextTertiaryReverse: #7C7C7C;
  --clrError-100: #c84d4d;
  --clrError-50: #641f1f;
  --clrSuccess-100: #3EA03E;
  --clrSuccess-50: #2d692d;
  --clrSuccessOnTint: #d6ffd6;
  --clrErrorOnTint: #ffd6d6;
  --clrWarning-100: #E88434;
  --clrWarning-50: #C49168;
  --clrAccent-100: #FFFFFF;
  --clrAccent-80: rgba(255, 255, 255, 0.8);
  --clrAccent-60: rgba(255, 255, 255, 0.6);
  --clrAccent-50: rgba(255, 255, 255, 0.5);
  --clrAccent-40: rgba(255, 255, 255, 0.4);
  --clrAccent-30: rgba(255, 255, 255, 0.3);
  --clrAccent-20: rgba(255, 255, 255, 0.2);
  --clrAccent-10: rgba(255, 255, 255, 0.1);
  --clrGradient: linear-gradient(90deg, #262a2e 10%, var(--clrPrimary) 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(50, 126, 75, 0.15) 30%,
          rgba(50, 126, 75, 0.3) 60%,
          rgba(50, 126, 75, 0.5) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(167, 44, 44, 0) 0%,
          rgba(167, 44, 44, 0.15) 30%,
          rgba(167, 44, 44, 0.3) 60%,
          rgba(167, 44, 44, 0.5) 100%);
  --clrNavBackground: rgba(0, 0, 0, 0.15);
  --clrNavItemActive: rgba(24, 24, 24, 0.49);
  --clrNavItemHover: rgba(255, 255, 255, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0F1418;
  --clrGlassBackground: rgba(15, 20, 24, 0.5);
  --clrGlassBackgroundStrong: rgba(15, 20, 24, 0.6);
  --clrGlassBorder: rgba(255, 255, 255, 0.1);
  --snackbarDefaultBg: #414141;
  --snackbarDefaultText: #BABABA;
  --snackbarDefaultBorder: #BABABA;
  --snackbarDefaultIcon: #BABABA;
  --snackbarSuccessBg: #145E18;
  --snackbarSuccessText: #8FE094;
  --snackbarSuccessBorder: #8FE094;
  --snackbarSuccessIcon: #8FE094;
  --snackbarErrorBg: #910C09;
  --snackbarErrorText: #FE9E9D;
  --snackbarErrorBorder: #FE9E9D;
  --snackbarErrorIcon: #FE9E9D;
}

/* 

Note: 
    If you want something done quick, ask AI to buuild your color themes.
    If you want to do it right and tidy though, do it manually. 

    - Theo

*/
:root {
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --font-accent: "Jaro", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}

html,
body {
  font-family: var(--font-sans);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

._pageContainer_14plk_216 {
  max-width: 900px;
  margin: 0 auto;
  padding: 128px 24px;
}

._header_14plk_222 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 40px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--clrAccent-20);
}

._logoSection_14plk_233 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
}
._logoSection_14plk_233 ._logo_14plk_233 {
  width: 48px;
  height: 48px;
  object-fit: contain;
}
._logoSection_14plk_233 ._appName_14plk_245 {
  font-size: 24px;
  font-weight: 700;
  color: var(--clrAccent-100);
}

._backButton_14plk_251 {
  background-color: var(--clrAccent-100);
  color: var(--clrPrimary);
  padding: 10px 20px;
  border-radius: 4px;
  text-decoration: none;
  font-weight: 600;
  font-size: 14px;
  transition: all 0.2s ease;
}
._backButton_14plk_251:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(255, 255, 255, 0.2);
}

._pageContainer_14plk_216 h1 {
  font-size: 42px;
  font-weight: 700;
  color: var(--clrAccent-100);
  margin-bottom: 40px;
  text-align: left;
}

._content_14plk_274 {
  color: var(--clrAccent-80);
  line-height: 1.8;
}
._content_14plk_274 h2 {
  font-size: 28px;
  font-weight: 600;
  color: var(--clrAccent-100);
  margin-top: 32px;
  margin-bottom: 16px;
  text-align: left;
}
._content_14plk_274 p {
  font-size: 16px;
  margin-bottom: 20px;
}
._content_14plk_274 ul {
  margin: 16px 0 20px 24px;
}
._content_14plk_274 ul li {
  font-size: 16px;
  margin-bottom: 8px;
  color: var(--clrAccent-80);
}
._content_14plk_274 strong {
  color: var(--clrAccent-100);
  font-weight: 600;
}

@media (max-width: 768px) {
  ._header_14plk_222 {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
  ._logoSection_14plk_233 ._logo_14plk_233 {
    width: 40px;
    height: 40px;
  }
  ._logoSection_14plk_233 ._appName_14plk_245 {
    font-size: 20px;
  }
  ._backButton_14plk_251 {
    width: 100%;
    text-align: center;
  }
  ._pageContainer_14plk_216 {
    padding: 80px 20px;
  }
  ._pageContainer_14plk_216 h1 {
    font-size: 32px;
    margin-bottom: 32px;
  }
  ._content_14plk_274 h2 {
    font-size: 24px;
    margin-top: 24px;
  }
  ._content_14plk_274 p {
    font-size: 15px;
  }
}
._pageContainer_14plk_216 {
  box-sizing: border-box;
  width: 100%;
  max-width: var(--site-max-width, 1440px);
  margin-inline: auto;
  padding-inline: var(--site-gutter, 20px);
}html {
  color-scheme: dark;
}

html:has(body._themeLight_17ggb_5),
html:has(body._themePastelLight_17ggb_6) {
  color-scheme: light;
}

:root {
  --clrPrimary: #F4F4F5;
  --clrPrimary30: rgba(244, 244, 245, 0.3);
  --clrSecondary: #FEFEFE;
  --clrTertiary: #E4E4E7;
  --clrPrimaryReverse: #101418;
  --clrSecondaryReverse: #0A0F14;
  --clrTertiaryReverse: #212327;
  --clrTextPrimary: #101418;
  --clrTextSecondary: #2E3337;
  --clrTextTertiary: #7C7C7C;
  --clrTextPrimaryReverse: #F4F4F5;
  --clrTextSecondaryReverse: #CDCDCD;
  --clrTextTertiaryReverse: #8A8A8A;
  --clrError-100: #641f1f;
  --clrError-50: #c84d4d;
  --clrSuccess-100: #2d692d;
  --clrSuccess-50: #3EA03E;
  --clrSuccessOnTint: #0d260d;
  --clrErrorOnTint: #2e0a0a;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgb(50, 126, 75, 0.1) 30%,
          rgb(94, 178, 122, 0.36) 60%,
          rgb(144, 215, 168) 100%);
  --clrNavBackground: rgba(244, 244, 245, 0.15);
  --clrNavItemActive: rgba(211, 211, 211, 0.4);
  --clrNavItemHover: rgba(0, 0, 0, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #F4F4F5;
  --clrGlassBackground: rgba(255, 255, 255, 0.5);
  --clrGlassBackgroundStrong: rgba(255, 255, 255, 0.3);
  --clrGlassBorder: rgba(0, 0, 0, 0.1);
  --snackbarDefaultBg: #F1ECE9;
  --snackbarDefaultText: #5D605C;
  --snackbarDefaultBorder: #5D605C;
  --snackbarDefaultIcon: #5D605C;
  --snackbarSuccessBg: #E0F1D9;
  --snackbarSuccessText: #358935;
  --snackbarSuccessBorder: #358935;
  --snackbarSuccessIcon: #358935;
  --snackbarErrorBg: #F9E1DC;
  --snackbarErrorText: #C80D12;
  --snackbarErrorBorder: #C80D12;
  --snackbarErrorIcon: #C80D12;
}

._themeLight_17ggb_5 {
  --clrPrimary: #F4F4F5;
  --clrPrimary30: rgba(244, 244, 245, 0.3);
  --clrSecondary: #FEFEFE;
  --clrTertiary: #E4E4E7;
  --clrPrimaryReverse: #101418;
  --clrSecondaryReverse: #0A0F14;
  --clrTertiaryReverse: #212327;
  --clrTextPrimary: #101418;
  --clrTextSecondary: #2E3337;
  --clrTextTertiary: #7C7C7C;
  --clrTextPrimaryReverse: #F4F4F5;
  --clrTextSecondaryReverse: #CDCDCD;
  --clrTextTertiaryReverse: #8A8A8A;
  --clrError-100: #c03b3b;
  --clrError-50: #f6c5c5;
  --clrSuccess-100: #30d330;
  --clrSuccess-50: #bbffbb;
  --clrSuccessOnTint: #1f4f1f;
  --clrErrorOnTint: #7a1f1f;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgb(50, 126, 75, 0.1) 30%,
          rgb(94, 178, 122, 0.36) 60%,
          rgb(144, 215, 168) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(175, 49, 49, 0.1) 30%,
          rgba(238, 70, 70, 0.36) 60%,
          rgb(255, 173, 173) 100%);
  --clrNavBackground: rgba(244, 244, 245, 0.15);
  --clrNavItemActive: rgba(211, 211, 211, 0.4);
  --clrNavItemHover: rgba(0, 0, 0, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0000c1;
  --clrGlassBackground: rgba(255, 255, 255, 0.5);
  --clrGlassBackgroundStrong: rgba(255, 255, 255, 0.5);
  --clrGlassBorder: rgba(0, 0, 0, 0.1);
  --snackbarDefaultBg: #F1ECE9;
  --snackbarDefaultText: #5D605C;
  --snackbarDefaultBorder: #5D605C;
  --snackbarDefaultIcon: #5D605C;
  --snackbarSuccessBg: #E0F1D9;
  --snackbarSuccessText: #358935;
  --snackbarSuccessBorder: #358935;
  --snackbarSuccessIcon: #358935;
  --snackbarErrorBg: #F9E1DC;
  --snackbarErrorText: #C80D12;
  --snackbarErrorBorder: #C80D12;
  --snackbarErrorIcon: #C80D12;
}

._themeDark_17ggb_131 {
  --clrPrimary: #0F1418;
  --clrPrimary30: rgba(15, 20, 25, 0.3);
  --clrSecondary: #0A0F14;
  --clrTertiary: #212327;
  --clrPrimaryReverse: #F4F4F5;
  --clrSecondaryReverse: #FEFEFE;
  --clrTertiaryReverse: #E4E4E7;
  --clrTextPrimary: #F4F4F5;
  --clrTextSecondary: #CDCDCD;
  --clrTextTertiary: #8A8A8A;
  --clrTextPrimaryReverse: #101418;
  --clrTextSecondaryReverse: #2E3337;
  --clrTextTertiaryReverse: #7C7C7C;
  --clrError-100: #c84d4d;
  --clrError-50: #641f1f;
  --clrSuccess-100: #3EA03E;
  --clrSuccess-50: #2d692d;
  --clrSuccessOnTint: #d6ffd6;
  --clrErrorOnTint: #ffd6d6;
  --clrWarning-100: #E88434;
  --clrWarning-50: #C49168;
  --clrAccent-100: #FFFFFF;
  --clrAccent-80: rgba(255, 255, 255, 0.8);
  --clrAccent-60: rgba(255, 255, 255, 0.6);
  --clrAccent-50: rgba(255, 255, 255, 0.5);
  --clrAccent-40: rgba(255, 255, 255, 0.4);
  --clrAccent-30: rgba(255, 255, 255, 0.3);
  --clrAccent-20: rgba(255, 255, 255, 0.2);
  --clrAccent-10: rgba(255, 255, 255, 0.1);
  --clrGradient: linear-gradient(90deg, #262a2e 10%, var(--clrPrimary) 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(50, 126, 75, 0.15) 30%,
          rgba(50, 126, 75, 0.3) 60%,
          rgba(50, 126, 75, 0.5) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(167, 44, 44, 0) 0%,
          rgba(167, 44, 44, 0.15) 30%,
          rgba(167, 44, 44, 0.3) 60%,
          rgba(167, 44, 44, 0.5) 100%);
  --clrNavBackground: rgba(0, 0, 0, 0.15);
  --clrNavItemActive: rgba(24, 24, 24, 0.49);
  --clrNavItemHover: rgba(255, 255, 255, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0F1418;
  --clrGlassBackground: rgba(15, 20, 24, 0.5);
  --clrGlassBackgroundStrong: rgba(15, 20, 24, 0.6);
  --clrGlassBorder: rgba(255, 255, 255, 0.1);
  --snackbarDefaultBg: #414141;
  --snackbarDefaultText: #BABABA;
  --snackbarDefaultBorder: #BABABA;
  --snackbarDefaultIcon: #BABABA;
  --snackbarSuccessBg: #145E18;
  --snackbarSuccessText: #8FE094;
  --snackbarSuccessBorder: #8FE094;
  --snackbarSuccessIcon: #8FE094;
  --snackbarErrorBg: #910C09;
  --snackbarErrorText: #FE9E9D;
  --snackbarErrorBorder: #FE9E9D;
  --snackbarErrorIcon: #FE9E9D;
}

/* 

Note: 
    If you want something done quick, ask AI to buuild your color themes.
    If you want to do it right and tidy though, do it manually. 

    - Theo

*/
:root {
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --font-accent: "Jaro", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}

html,
body {
  font-family: var(--font-sans);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

._pageContainer_17ggb_216 {
  max-width: 900px;
  margin: 0 auto;
  padding: 128px 24px;
}
._pageContainer_17ggb_216 h1 {
  font-size: 42px;
  font-weight: 700;
  color: var(--clrAccent-100);
  margin-bottom: 40px;
  text-align: left;
}

._header_17ggb_229 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 40px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--clrAccent-20);
}

._logoSection_17ggb_240 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
}
._logoSection_17ggb_240 ._logo_17ggb_240 {
  width: 48px;
  height: 48px;
  object-fit: contain;
}
._logoSection_17ggb_240 ._appName_17ggb_252 {
  font-size: 24px;
  font-weight: 700;
  color: var(--clrAccent-100);
}

._backButton_17ggb_258 {
  background-color: var(--clrAccent-100);
  color: var(--clrPrimary);
  padding: 10px 20px;
  border-radius: 4px;
  text-decoration: none;
  font-weight: 600;
  font-size: 14px;
  transition: all 0.2s ease;
}
._backButton_17ggb_258:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(255, 255, 255, 0.2);
}

._content_17ggb_273 {
  color: var(--clrAccent-80);
  line-height: 1.8;
}
._content_17ggb_273 h2 {
  font-size: 28px;
  font-weight: 600;
  color: var(--clrAccent-100);
  margin-top: 32px;
  margin-bottom: 16px;
  text-align: left;
}
._content_17ggb_273 h3 {
  font-size: 24px;
  font-weight: 600;
  color: var(--clrAccent-100);
  margin-top: 20px;
  margin-bottom: 8px;
}
._content_17ggb_273 p {
  font-size: 16px;
  margin-bottom: 20px;
}
._content_17ggb_273 a {
  color: var(--clrAccent-100);
  font-weight: 600;
  text-decoration: underline;
}

._emailButton_17ggb_302 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background-color: var(--clrPrimary);
  color: var(--clrAccent-100);
  border: 1px solid var(--clrAccent-20);
  padding: 14px 28px;
  border-radius: 8px;
  text-decoration: none !important;
  font-weight: 600;
  font-size: 16px;
  width: fit-content;
  margin: 8px 0 32px;
  transition: all 0.2s ease;
}
._emailButton_17ggb_302:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

._emailIcon_17ggb_325 {
  width: 20px;
  height: 20px;
}

@media (max-width: 768px) {
  ._header_17ggb_229 {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
  ._logoSection_17ggb_240 ._logo_17ggb_240 {
    width: 40px;
    height: 40px;
  }
  ._logoSection_17ggb_240 ._appName_17ggb_252 {
    font-size: 20px;
  }
  ._backButton_17ggb_258 {
    width: 100%;
    text-align: center;
  }
  ._pageContainer_17ggb_216 {
    padding: 80px 20px;
  }
  ._pageContainer_17ggb_216 h1 {
    font-size: 32px;
    margin-bottom: 32px;
  }
  ._content_17ggb_273 h2 {
    font-size: 24px;
    margin-top: 24px;
  }
  ._content_17ggb_273 h3 {
    font-size: 20px;
  }
  ._content_17ggb_273 p {
    font-size: 15px;
  }
  ._emailButton_17ggb_302 {
    width: 100%;
    justify-content: center;
  }
}
._pageContainer_17ggb_216 {
  box-sizing: border-box;
  width: 100%;
  max-width: var(--site-max-width, 1440px);
  margin-inline: auto;
  padding-inline: var(--site-gutter, 20px);
}html {
  color-scheme: dark;
}

html:has(body._themeLight_h6a2y_5),
html:has(body._themePastelLight_h6a2y_6) {
  color-scheme: light;
}

:root {
  --clrPrimary: #F4F4F5;
  --clrPrimary30: rgba(244, 244, 245, 0.3);
  --clrSecondary: #FEFEFE;
  --clrTertiary: #E4E4E7;
  --clrPrimaryReverse: #101418;
  --clrSecondaryReverse: #0A0F14;
  --clrTertiaryReverse: #212327;
  --clrTextPrimary: #101418;
  --clrTextSecondary: #2E3337;
  --clrTextTertiary: #7C7C7C;
  --clrTextPrimaryReverse: #F4F4F5;
  --clrTextSecondaryReverse: #CDCDCD;
  --clrTextTertiaryReverse: #8A8A8A;
  --clrError-100: #641f1f;
  --clrError-50: #c84d4d;
  --clrSuccess-100: #2d692d;
  --clrSuccess-50: #3EA03E;
  --clrSuccessOnTint: #0d260d;
  --clrErrorOnTint: #2e0a0a;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgb(50, 126, 75, 0.1) 30%,
          rgb(94, 178, 122, 0.36) 60%,
          rgb(144, 215, 168) 100%);
  --clrNavBackground: rgba(244, 244, 245, 0.15);
  --clrNavItemActive: rgba(211, 211, 211, 0.4);
  --clrNavItemHover: rgba(0, 0, 0, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #F4F4F5;
  --clrGlassBackground: rgba(255, 255, 255, 0.5);
  --clrGlassBackgroundStrong: rgba(255, 255, 255, 0.3);
  --clrGlassBorder: rgba(0, 0, 0, 0.1);
  --snackbarDefaultBg: #F1ECE9;
  --snackbarDefaultText: #5D605C;
  --snackbarDefaultBorder: #5D605C;
  --snackbarDefaultIcon: #5D605C;
  --snackbarSuccessBg: #E0F1D9;
  --snackbarSuccessText: #358935;
  --snackbarSuccessBorder: #358935;
  --snackbarSuccessIcon: #358935;
  --snackbarErrorBg: #F9E1DC;
  --snackbarErrorText: #C80D12;
  --snackbarErrorBorder: #C80D12;
  --snackbarErrorIcon: #C80D12;
}

._themeLight_h6a2y_5 {
  --clrPrimary: #F4F4F5;
  --clrPrimary30: rgba(244, 244, 245, 0.3);
  --clrSecondary: #FEFEFE;
  --clrTertiary: #E4E4E7;
  --clrPrimaryReverse: #101418;
  --clrSecondaryReverse: #0A0F14;
  --clrTertiaryReverse: #212327;
  --clrTextPrimary: #101418;
  --clrTextSecondary: #2E3337;
  --clrTextTertiary: #7C7C7C;
  --clrTextPrimaryReverse: #F4F4F5;
  --clrTextSecondaryReverse: #CDCDCD;
  --clrTextTertiaryReverse: #8A8A8A;
  --clrError-100: #c03b3b;
  --clrError-50: #f6c5c5;
  --clrSuccess-100: #30d330;
  --clrSuccess-50: #bbffbb;
  --clrSuccessOnTint: #1f4f1f;
  --clrErrorOnTint: #7a1f1f;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgb(50, 126, 75, 0.1) 30%,
          rgb(94, 178, 122, 0.36) 60%,
          rgb(144, 215, 168) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(175, 49, 49, 0.1) 30%,
          rgba(238, 70, 70, 0.36) 60%,
          rgb(255, 173, 173) 100%);
  --clrNavBackground: rgba(244, 244, 245, 0.15);
  --clrNavItemActive: rgba(211, 211, 211, 0.4);
  --clrNavItemHover: rgba(0, 0, 0, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0000c1;
  --clrGlassBackground: rgba(255, 255, 255, 0.5);
  --clrGlassBackgroundStrong: rgba(255, 255, 255, 0.5);
  --clrGlassBorder: rgba(0, 0, 0, 0.1);
  --snackbarDefaultBg: #F1ECE9;
  --snackbarDefaultText: #5D605C;
  --snackbarDefaultBorder: #5D605C;
  --snackbarDefaultIcon: #5D605C;
  --snackbarSuccessBg: #E0F1D9;
  --snackbarSuccessText: #358935;
  --snackbarSuccessBorder: #358935;
  --snackbarSuccessIcon: #358935;
  --snackbarErrorBg: #F9E1DC;
  --snackbarErrorText: #C80D12;
  --snackbarErrorBorder: #C80D12;
  --snackbarErrorIcon: #C80D12;
}

._themeDark_h6a2y_131 {
  --clrPrimary: #0F1418;
  --clrPrimary30: rgba(15, 20, 25, 0.3);
  --clrSecondary: #0A0F14;
  --clrTertiary: #212327;
  --clrPrimaryReverse: #F4F4F5;
  --clrSecondaryReverse: #FEFEFE;
  --clrTertiaryReverse: #E4E4E7;
  --clrTextPrimary: #F4F4F5;
  --clrTextSecondary: #CDCDCD;
  --clrTextTertiary: #8A8A8A;
  --clrTextPrimaryReverse: #101418;
  --clrTextSecondaryReverse: #2E3337;
  --clrTextTertiaryReverse: #7C7C7C;
  --clrError-100: #c84d4d;
  --clrError-50: #641f1f;
  --clrSuccess-100: #3EA03E;
  --clrSuccess-50: #2d692d;
  --clrSuccessOnTint: #d6ffd6;
  --clrErrorOnTint: #ffd6d6;
  --clrWarning-100: #E88434;
  --clrWarning-50: #C49168;
  --clrAccent-100: #FFFFFF;
  --clrAccent-80: rgba(255, 255, 255, 0.8);
  --clrAccent-60: rgba(255, 255, 255, 0.6);
  --clrAccent-50: rgba(255, 255, 255, 0.5);
  --clrAccent-40: rgba(255, 255, 255, 0.4);
  --clrAccent-30: rgba(255, 255, 255, 0.3);
  --clrAccent-20: rgba(255, 255, 255, 0.2);
  --clrAccent-10: rgba(255, 255, 255, 0.1);
  --clrGradient: linear-gradient(90deg, #262a2e 10%, var(--clrPrimary) 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(50, 126, 75, 0.15) 30%,
          rgba(50, 126, 75, 0.3) 60%,
          rgba(50, 126, 75, 0.5) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(167, 44, 44, 0) 0%,
          rgba(167, 44, 44, 0.15) 30%,
          rgba(167, 44, 44, 0.3) 60%,
          rgba(167, 44, 44, 0.5) 100%);
  --clrNavBackground: rgba(0, 0, 0, 0.15);
  --clrNavItemActive: rgba(24, 24, 24, 0.49);
  --clrNavItemHover: rgba(255, 255, 255, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0F1418;
  --clrGlassBackground: rgba(15, 20, 24, 0.5);
  --clrGlassBackgroundStrong: rgba(15, 20, 24, 0.6);
  --clrGlassBorder: rgba(255, 255, 255, 0.1);
  --snackbarDefaultBg: #414141;
  --snackbarDefaultText: #BABABA;
  --snackbarDefaultBorder: #BABABA;
  --snackbarDefaultIcon: #BABABA;
  --snackbarSuccessBg: #145E18;
  --snackbarSuccessText: #8FE094;
  --snackbarSuccessBorder: #8FE094;
  --snackbarSuccessIcon: #8FE094;
  --snackbarErrorBg: #910C09;
  --snackbarErrorText: #FE9E9D;
  --snackbarErrorBorder: #FE9E9D;
  --snackbarErrorIcon: #FE9E9D;
}

/* 

Note: 
    If you want something done quick, ask AI to buuild your color themes.
    If you want to do it right and tidy though, do it manually. 

    - Theo

*/
:root {
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --font-accent: "Jaro", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}

html,
body {
  font-family: var(--font-sans);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

._page_h6a2y_216 {
  width: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  padding: 120px 20px 96px;
  display: grid;
  place-items: center;
}

._panel_h6a2y_225 {
  width: min(100%, 680px);
  background-color: var(--clrSecondary);
  border: 1px solid var(--clrAccent-20);
  border-radius: 8px;
  padding: 32px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.24);
}

._header_h6a2y_234 {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 16px;
  margin-bottom: 28px;
}
._header_h6a2y_234 h1 {
  font-size: 32px;
  line-height: 1.1;
  color: var(--clrAccent-100);
  margin-bottom: 10px;
}
._header_h6a2y_234 p {
  color: var(--clrAccent-80);
  line-height: 1.6;
}

._warningIcon_h6a2y_253 {
  width: 32px;
  height: 32px;
  color: var(--clrError-100);
  flex-shrink: 0;
}

._warningBox_h6a2y_260 {
  background-color: var(--clrTertiary);
  border: 1px solid var(--clrError-50);
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 28px;
}
._warningBox_h6a2y_260 h2 {
  font-size: 24px;
  color: var(--clrAccent-100);
  margin-bottom: 12px;
}
._warningBox_h6a2y_260 ul {
  display: grid;
  gap: 8px;
  padding-left: 18px;
  color: var(--clrAccent-80);
  line-height: 1.5;
}

._form_h6a2y_280 {
  display: grid;
  gap: 20px;
}

._success_h6a2y_285 {
  color: var(--clrSuccess-100);
  background-color: rgba(var(--clrSuccess-100), 0.12);
  border: 1px solid var(--clrSuccess-50);
  border-radius: 4px;
  padding: 12px 14px;
  line-height: 1.4;
}

._actions_h6a2y_294 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

._relatedLinks_h6a2y_300 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid var(--clrAccent-10);
}
._relatedLinks_h6a2y_300 a {
  color: var(--clrAccent-100);
  font-size: 16px;
  font-weight: 600;
  text-decoration: underline;
}

@media (max-width: 640px) {
  ._page_h6a2y_216 {
    padding: 88px 16px 72px;
    place-items: start center;
  }
  ._panel_h6a2y_225 {
    padding: 24px;
  }
  ._header_h6a2y_234 {
    flex-direction: column;
  }
  ._header_h6a2y_234 h1 {
    font-size: 28px;
  }
  ._actions_h6a2y_294 {
    grid-template-columns: 1fr;
  }
}
html {
  color-scheme: dark;
}

html:has(body._themeLight_wn56i_6),
html:has(body._themePastelLight_wn56i_7) {
  color-scheme: light;
}

:root {
  --clrPrimary: #F4F4F5;
  --clrPrimary30: rgba(244, 244, 245, 0.3);
  --clrSecondary: #FEFEFE;
  --clrTertiary: #E4E4E7;
  --clrPrimaryReverse: #101418;
  --clrSecondaryReverse: #0A0F14;
  --clrTertiaryReverse: #212327;
  --clrTextPrimary: #101418;
  --clrTextSecondary: #2E3337;
  --clrTextTertiary: #7C7C7C;
  --clrTextPrimaryReverse: #F4F4F5;
  --clrTextSecondaryReverse: #CDCDCD;
  --clrTextTertiaryReverse: #8A8A8A;
  --clrError-100: #641f1f;
  --clrError-50: #c84d4d;
  --clrSuccess-100: #2d692d;
  --clrSuccess-50: #3EA03E;
  --clrSuccessOnTint: #0d260d;
  --clrErrorOnTint: #2e0a0a;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgb(50, 126, 75, 0.1) 30%,
          rgb(94, 178, 122, 0.36) 60%,
          rgb(144, 215, 168) 100%);
  --clrNavBackground: rgba(244, 244, 245, 0.15);
  --clrNavItemActive: rgba(211, 211, 211, 0.4);
  --clrNavItemHover: rgba(0, 0, 0, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #F4F4F5;
  --clrGlassBackground: rgba(255, 255, 255, 0.5);
  --clrGlassBackgroundStrong: rgba(255, 255, 255, 0.3);
  --clrGlassBorder: rgba(0, 0, 0, 0.1);
  --snackbarDefaultBg: #F1ECE9;
  --snackbarDefaultText: #5D605C;
  --snackbarDefaultBorder: #5D605C;
  --snackbarDefaultIcon: #5D605C;
  --snackbarSuccessBg: #E0F1D9;
  --snackbarSuccessText: #358935;
  --snackbarSuccessBorder: #358935;
  --snackbarSuccessIcon: #358935;
  --snackbarErrorBg: #F9E1DC;
  --snackbarErrorText: #C80D12;
  --snackbarErrorBorder: #C80D12;
  --snackbarErrorIcon: #C80D12;
}

._themeLight_wn56i_6 {
  --clrPrimary: #F4F4F5;
  --clrPrimary30: rgba(244, 244, 245, 0.3);
  --clrSecondary: #FEFEFE;
  --clrTertiary: #E4E4E7;
  --clrPrimaryReverse: #101418;
  --clrSecondaryReverse: #0A0F14;
  --clrTertiaryReverse: #212327;
  --clrTextPrimary: #101418;
  --clrTextSecondary: #2E3337;
  --clrTextTertiary: #7C7C7C;
  --clrTextPrimaryReverse: #F4F4F5;
  --clrTextSecondaryReverse: #CDCDCD;
  --clrTextTertiaryReverse: #8A8A8A;
  --clrError-100: #c03b3b;
  --clrError-50: #f6c5c5;
  --clrSuccess-100: #30d330;
  --clrSuccess-50: #bbffbb;
  --clrSuccessOnTint: #1f4f1f;
  --clrErrorOnTint: #7a1f1f;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgb(50, 126, 75, 0.1) 30%,
          rgb(94, 178, 122, 0.36) 60%,
          rgb(144, 215, 168) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(175, 49, 49, 0.1) 30%,
          rgba(238, 70, 70, 0.36) 60%,
          rgb(255, 173, 173) 100%);
  --clrNavBackground: rgba(244, 244, 245, 0.15);
  --clrNavItemActive: rgba(211, 211, 211, 0.4);
  --clrNavItemHover: rgba(0, 0, 0, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0000c1;
  --clrGlassBackground: rgba(255, 255, 255, 0.5);
  --clrGlassBackgroundStrong: rgba(255, 255, 255, 0.5);
  --clrGlassBorder: rgba(0, 0, 0, 0.1);
  --snackbarDefaultBg: #F1ECE9;
  --snackbarDefaultText: #5D605C;
  --snackbarDefaultBorder: #5D605C;
  --snackbarDefaultIcon: #5D605C;
  --snackbarSuccessBg: #E0F1D9;
  --snackbarSuccessText: #358935;
  --snackbarSuccessBorder: #358935;
  --snackbarSuccessIcon: #358935;
  --snackbarErrorBg: #F9E1DC;
  --snackbarErrorText: #C80D12;
  --snackbarErrorBorder: #C80D12;
  --snackbarErrorIcon: #C80D12;
}

._themeDark_wn56i_132 {
  --clrPrimary: #0F1418;
  --clrPrimary30: rgba(15, 20, 25, 0.3);
  --clrSecondary: #0A0F14;
  --clrTertiary: #212327;
  --clrPrimaryReverse: #F4F4F5;
  --clrSecondaryReverse: #FEFEFE;
  --clrTertiaryReverse: #E4E4E7;
  --clrTextPrimary: #F4F4F5;
  --clrTextSecondary: #CDCDCD;
  --clrTextTertiary: #8A8A8A;
  --clrTextPrimaryReverse: #101418;
  --clrTextSecondaryReverse: #2E3337;
  --clrTextTertiaryReverse: #7C7C7C;
  --clrError-100: #c84d4d;
  --clrError-50: #641f1f;
  --clrSuccess-100: #3EA03E;
  --clrSuccess-50: #2d692d;
  --clrSuccessOnTint: #d6ffd6;
  --clrErrorOnTint: #ffd6d6;
  --clrWarning-100: #E88434;
  --clrWarning-50: #C49168;
  --clrAccent-100: #FFFFFF;
  --clrAccent-80: rgba(255, 255, 255, 0.8);
  --clrAccent-60: rgba(255, 255, 255, 0.6);
  --clrAccent-50: rgba(255, 255, 255, 0.5);
  --clrAccent-40: rgba(255, 255, 255, 0.4);
  --clrAccent-30: rgba(255, 255, 255, 0.3);
  --clrAccent-20: rgba(255, 255, 255, 0.2);
  --clrAccent-10: rgba(255, 255, 255, 0.1);
  --clrGradient: linear-gradient(90deg, #262a2e 10%, var(--clrPrimary) 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(50, 126, 75, 0.15) 30%,
          rgba(50, 126, 75, 0.3) 60%,
          rgba(50, 126, 75, 0.5) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(167, 44, 44, 0) 0%,
          rgba(167, 44, 44, 0.15) 30%,
          rgba(167, 44, 44, 0.3) 60%,
          rgba(167, 44, 44, 0.5) 100%);
  --clrNavBackground: rgba(0, 0, 0, 0.15);
  --clrNavItemActive: rgba(24, 24, 24, 0.49);
  --clrNavItemHover: rgba(255, 255, 255, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0F1418;
  --clrGlassBackground: rgba(15, 20, 24, 0.5);
  --clrGlassBackgroundStrong: rgba(15, 20, 24, 0.6);
  --clrGlassBorder: rgba(255, 255, 255, 0.1);
  --snackbarDefaultBg: #414141;
  --snackbarDefaultText: #BABABA;
  --snackbarDefaultBorder: #BABABA;
  --snackbarDefaultIcon: #BABABA;
  --snackbarSuccessBg: #145E18;
  --snackbarSuccessText: #8FE094;
  --snackbarSuccessBorder: #8FE094;
  --snackbarSuccessIcon: #8FE094;
  --snackbarErrorBg: #910C09;
  --snackbarErrorText: #FE9E9D;
  --snackbarErrorBorder: #FE9E9D;
  --snackbarErrorIcon: #FE9E9D;
}

/* 

Note: 
    If you want something done quick, ask AI to buuild your color themes.
    If you want to do it right and tidy though, do it manually. 

    - Theo

*/
:root {
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --font-accent: "Jaro", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}

html,
body {
  font-family: var(--font-sans);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

._exportSheet_wn56i_217 {
  position: relative;
  width: 720px;
  display: flex;
  flex-direction: column;
  background: rgba(9, 9, 11, var(--sheetBgOpacity, 1));
  color: #fafafa;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 12px;
  padding: 18px;
  overflow: hidden;
}

/**
 * The deck's colours as a soft wash behind the header and the top of the grid.
 * Absolutely positioned rather than a background on the sheet so it never tints
 * the whole image — it fades out well before the cards do.
 */
._exportGlow_wn56i_235 {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 55%;
  max-height: 360px;
  pointer-events: none;
  z-index: 0;
}

._exportHead_wn56i_246 {
  position: relative;
  z-index: 1;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 14px;
}

/**
 * Sized to match LeaderImageV2's own `image-only-large` box (112x112).
 *
 * The slot cannot dictate the size: the component's `.image-only-large` rule is
 * two classes deep and outranks a `width` set on the wrapper's child, so an
 * undersized slot did not shrink the art — the art simply overflowed and sat on
 * top of the deck name. The sheet is a fixed 720px, where 112px is
 * proportionate on every device.
 */
._exportLeaderArt_wn56i_265 {
  width: 112px;
  height: 112px;
  flex-shrink: 0;
  line-height: 0;
}

._exportMeta_wn56i_272 {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

._exportDeckName_wn56i_280 {
  font-size: 19px;
  font-weight: 750;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

._exportLeaderName_wn56i_288 {
  font-size: 13px;
  color: rgba(250, 250, 250, 0.65);
}

._exportCredit_wn56i_293 {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  min-width: 0;
}

._exportStores_wn56i_301 {
  display: flex;
  align-items: center;
  gap: 8px;
}
._exportStores_wn56i_301 img {
  height: 30px;
  width: auto;
  display: block;
}

._exportSignatureSlot_wn56i_312 {
  position: relative;
  z-index: 1;
  flex-shrink: 0;
  height: 22px;
  margin-top: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
}

._exportSignature_wn56i_312 {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  color: rgba(250, 250, 250, 0.65);
}
._exportSignature_wn56i_312 > img {
  width: 20px;
  height: 20px;
  object-fit: contain;
  border-radius: 4px;
}
._exportSignature_wn56i_312 strong {
  color: #fafafa;
  font-weight: 700;
}

._exportPromo_wn56i_341 {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: rgba(250, 250, 250, 0.65);
  white-space: nowrap;
}
._exportPromo_wn56i_341 strong {
  color: #fafafa;
  font-weight: 700;
}
._exportPromo_wn56i_341 img {
  width: 20px;
  height: 20px;
  border-radius: 5px;
}

/**
 * ALWAYS 5 columns. Default exports cap at 4 rows; builder exports grow
 * to include every entry when showAllEntries is enabled. Never from a media query: media queries key off the
 * VIEWPORT, not the element, so on a phone this grid used to drop columns
 * even though the sheet is a fixed 720px wide, and the exported PNG came out
 * laid out differently than the desktop one. The sheet's own fixed size is
 * the only thing its internals may depend on — that now includes the grid's
 * shape, not just its width. The sheet's HEIGHT is itself derived from this
 * grid (SHEET_HEIGHT in DeckExportSheet.tsx), not the other way round — see
 * .exportCellArt below.
 */
._exportGrid_wn56i_370 {
  position: relative;
  z-index: 1;
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  align-content: start;
  gap: 8px;
}

._exportCell_wn56i_368 {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

._exportCellArt_wn56i_368 {
  position: relative;
}
._exportCellArt_wn56i_368 img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  display: block;
}

._exportCellEmpty_wn56i_399 {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  border: 1px solid var(--clrTertiary);
  border-radius: 6px;
  padding: 4px;
  font-size: 9.5px;
  line-height: 1.3;
  color: rgba(250, 250, 250, 0.65);
  text-align: center;
}

._exportQty_wn56i_413 {
  position: absolute;
  right: 5px;
  bottom: 5px;
  transform: translateY(-100%);
  background: rgba(0, 0, 0, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 9px;
  padding: 3px 11px;
  font-size: 23px;
  font-weight: 700;
  line-height: 1.15;
  color: #fafafa;
  font-variant-numeric: tabular-nums;
}

._exportCardId_wn56i_429 {
  margin-top: 4px;
  text-align: center;
  font-size: 11px;
  color: rgba(250, 250, 250, 0.6);
  font-variant-numeric: tabular-nums;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

._exportQr_wn56i_440 {
  display: block;
  width: 86px;
  height: 86px;
  border: 4px solid #fff;
  border-radius: 8px;
  background: #fff;
}html {
  color-scheme: dark;
}

html:has(body._themeLight_2870d_5),
html:has(body._themePastelLight_2870d_6) {
  color-scheme: light;
}

:root {
  --clrPrimary: #F4F4F5;
  --clrPrimary30: rgba(244, 244, 245, 0.3);
  --clrSecondary: #FEFEFE;
  --clrTertiary: #E4E4E7;
  --clrPrimaryReverse: #101418;
  --clrSecondaryReverse: #0A0F14;
  --clrTertiaryReverse: #212327;
  --clrTextPrimary: #101418;
  --clrTextSecondary: #2E3337;
  --clrTextTertiary: #7C7C7C;
  --clrTextPrimaryReverse: #F4F4F5;
  --clrTextSecondaryReverse: #CDCDCD;
  --clrTextTertiaryReverse: #8A8A8A;
  --clrError-100: #641f1f;
  --clrError-50: #c84d4d;
  --clrSuccess-100: #2d692d;
  --clrSuccess-50: #3EA03E;
  --clrSuccessOnTint: #0d260d;
  --clrErrorOnTint: #2e0a0a;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgb(50, 126, 75, 0.1) 30%,
          rgb(94, 178, 122, 0.36) 60%,
          rgb(144, 215, 168) 100%);
  --clrNavBackground: rgba(244, 244, 245, 0.15);
  --clrNavItemActive: rgba(211, 211, 211, 0.4);
  --clrNavItemHover: rgba(0, 0, 0, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #F4F4F5;
  --clrGlassBackground: rgba(255, 255, 255, 0.5);
  --clrGlassBackgroundStrong: rgba(255, 255, 255, 0.3);
  --clrGlassBorder: rgba(0, 0, 0, 0.1);
  --snackbarDefaultBg: #F1ECE9;
  --snackbarDefaultText: #5D605C;
  --snackbarDefaultBorder: #5D605C;
  --snackbarDefaultIcon: #5D605C;
  --snackbarSuccessBg: #E0F1D9;
  --snackbarSuccessText: #358935;
  --snackbarSuccessBorder: #358935;
  --snackbarSuccessIcon: #358935;
  --snackbarErrorBg: #F9E1DC;
  --snackbarErrorText: #C80D12;
  --snackbarErrorBorder: #C80D12;
  --snackbarErrorIcon: #C80D12;
}

._themeLight_2870d_5 {
  --clrPrimary: #F4F4F5;
  --clrPrimary30: rgba(244, 244, 245, 0.3);
  --clrSecondary: #FEFEFE;
  --clrTertiary: #E4E4E7;
  --clrPrimaryReverse: #101418;
  --clrSecondaryReverse: #0A0F14;
  --clrTertiaryReverse: #212327;
  --clrTextPrimary: #101418;
  --clrTextSecondary: #2E3337;
  --clrTextTertiary: #7C7C7C;
  --clrTextPrimaryReverse: #F4F4F5;
  --clrTextSecondaryReverse: #CDCDCD;
  --clrTextTertiaryReverse: #8A8A8A;
  --clrError-100: #c03b3b;
  --clrError-50: #f6c5c5;
  --clrSuccess-100: #30d330;
  --clrSuccess-50: #bbffbb;
  --clrSuccessOnTint: #1f4f1f;
  --clrErrorOnTint: #7a1f1f;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgb(50, 126, 75, 0.1) 30%,
          rgb(94, 178, 122, 0.36) 60%,
          rgb(144, 215, 168) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(175, 49, 49, 0.1) 30%,
          rgba(238, 70, 70, 0.36) 60%,
          rgb(255, 173, 173) 100%);
  --clrNavBackground: rgba(244, 244, 245, 0.15);
  --clrNavItemActive: rgba(211, 211, 211, 0.4);
  --clrNavItemHover: rgba(0, 0, 0, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0000c1;
  --clrGlassBackground: rgba(255, 255, 255, 0.5);
  --clrGlassBackgroundStrong: rgba(255, 255, 255, 0.5);
  --clrGlassBorder: rgba(0, 0, 0, 0.1);
  --snackbarDefaultBg: #F1ECE9;
  --snackbarDefaultText: #5D605C;
  --snackbarDefaultBorder: #5D605C;
  --snackbarDefaultIcon: #5D605C;
  --snackbarSuccessBg: #E0F1D9;
  --snackbarSuccessText: #358935;
  --snackbarSuccessBorder: #358935;
  --snackbarSuccessIcon: #358935;
  --snackbarErrorBg: #F9E1DC;
  --snackbarErrorText: #C80D12;
  --snackbarErrorBorder: #C80D12;
  --snackbarErrorIcon: #C80D12;
}

._themeDark_2870d_131 {
  --clrPrimary: #0F1418;
  --clrPrimary30: rgba(15, 20, 25, 0.3);
  --clrSecondary: #0A0F14;
  --clrTertiary: #212327;
  --clrPrimaryReverse: #F4F4F5;
  --clrSecondaryReverse: #FEFEFE;
  --clrTertiaryReverse: #E4E4E7;
  --clrTextPrimary: #F4F4F5;
  --clrTextSecondary: #CDCDCD;
  --clrTextTertiary: #8A8A8A;
  --clrTextPrimaryReverse: #101418;
  --clrTextSecondaryReverse: #2E3337;
  --clrTextTertiaryReverse: #7C7C7C;
  --clrError-100: #c84d4d;
  --clrError-50: #641f1f;
  --clrSuccess-100: #3EA03E;
  --clrSuccess-50: #2d692d;
  --clrSuccessOnTint: #d6ffd6;
  --clrErrorOnTint: #ffd6d6;
  --clrWarning-100: #E88434;
  --clrWarning-50: #C49168;
  --clrAccent-100: #FFFFFF;
  --clrAccent-80: rgba(255, 255, 255, 0.8);
  --clrAccent-60: rgba(255, 255, 255, 0.6);
  --clrAccent-50: rgba(255, 255, 255, 0.5);
  --clrAccent-40: rgba(255, 255, 255, 0.4);
  --clrAccent-30: rgba(255, 255, 255, 0.3);
  --clrAccent-20: rgba(255, 255, 255, 0.2);
  --clrAccent-10: rgba(255, 255, 255, 0.1);
  --clrGradient: linear-gradient(90deg, #262a2e 10%, var(--clrPrimary) 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(50, 126, 75, 0.15) 30%,
          rgba(50, 126, 75, 0.3) 60%,
          rgba(50, 126, 75, 0.5) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(167, 44, 44, 0) 0%,
          rgba(167, 44, 44, 0.15) 30%,
          rgba(167, 44, 44, 0.3) 60%,
          rgba(167, 44, 44, 0.5) 100%);
  --clrNavBackground: rgba(0, 0, 0, 0.15);
  --clrNavItemActive: rgba(24, 24, 24, 0.49);
  --clrNavItemHover: rgba(255, 255, 255, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0F1418;
  --clrGlassBackground: rgba(15, 20, 24, 0.5);
  --clrGlassBackgroundStrong: rgba(15, 20, 24, 0.6);
  --clrGlassBorder: rgba(255, 255, 255, 0.1);
  --snackbarDefaultBg: #414141;
  --snackbarDefaultText: #BABABA;
  --snackbarDefaultBorder: #BABABA;
  --snackbarDefaultIcon: #BABABA;
  --snackbarSuccessBg: #145E18;
  --snackbarSuccessText: #8FE094;
  --snackbarSuccessBorder: #8FE094;
  --snackbarSuccessIcon: #8FE094;
  --snackbarErrorBg: #910C09;
  --snackbarErrorText: #FE9E9D;
  --snackbarErrorBorder: #FE9E9D;
  --snackbarErrorIcon: #FE9E9D;
}

/* 

Note: 
    If you want something done quick, ask AI to buuild your color themes.
    If you want to do it right and tidy though, do it manually. 

    - Theo

*/
:root {
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --font-accent: "Jaro", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}

html,
body {
  font-family: var(--font-sans);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

._overlay_2870d_216 {
  position: fixed;
  inset: 0;
  z-index: 1100;
  display: grid;
  place-items: center;
  padding: 28px;
  background: rgba(0, 0, 0, 0.68);
}

._modal_2870d_226 {
  width: min(760px, 100%);
  max-height: min(940px, 100dvh - 56px);
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--clrTextPrimary) 14%, transparent);
  border-radius: 18px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--clrTextPrimary) 5%, transparent), transparent 58%), color-mix(in srgb, var(--clrSecondary) 92%, transparent);
  box-shadow: 0 26px 70px rgba(0, 0, 0, 0.42);
}

._modalHeader_2870d_236 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px;
  border-bottom: 1px solid color-mix(in srgb, var(--clrTextPrimary) 10%, transparent);
}
._modalHeader_2870d_236 h2 {
  margin: 0;
  color: var(--clrTextPrimary);
  font-size: 32px;
}
._modalHeader_2870d_236 p {
  margin: 4px 0 0;
  color: var(--clrTextSecondary);
  font-size: 12px;
}
._modalHeader_2870d_236 button {
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--clrTextSecondary);
  cursor: pointer;
}
._modalHeader_2870d_236 button:hover {
  background: color-mix(in srgb, var(--clrTextPrimary) 8%, transparent);
  color: var(--clrTextPrimary);
}
._modalHeader_2870d_236 button svg {
  width: 20px;
  height: 20px;
}

._previewContent_2870d_273 {
  min-width: 0;
}

._previewViewport_2870d_277 {
  height: min(68dvh, 760px);
  min-height: 390px;
  overflow: hidden;
  background: color-mix(in srgb, var(--clrPrimary) 80%, black);
}

._previewScaleBox_2870d_284 {
  display: flex;
  width: 100%;
  justify-content: center;
}

._previewScale_2870d_284 {
  flex: 0 0 auto;
  transform-origin: top center;
}

._exportCanvas_2870d_295 {
  position: relative;
  display: flex;
  width: 1080px;
  height: 1440px;
  flex-direction: column;
  overflow: hidden;
  padding: 54px;
  color: #f8fafc;
  background: radial-gradient(92% 48% at 50% -10%, var(--leader-glow-strong) 0%, var(--leader-glow-soft) 51%, transparent 78%), linear-gradient(160deg, #10131a 0%, #0d1017 58%, #11151c 100%);
  font-family: inherit;
}

._exportGlow_2870d_308 {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.7;
  background-image: radial-gradient(circle at 90% 91%, rgba(158, 93, 231, 0.14) 0 1px, transparent 2px);
  background-size: 18px 18px;
  mask-image: linear-gradient(to bottom, transparent, black 32%, black 75%, transparent);
}

._exportHero_2870d_318,
._exportResults_2870d_319,
._exportMatchups_2870d_320 {
  position: relative;
  z-index: 1;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.035));
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.09), 0 16px 40px rgba(0, 0, 0, 0.13);
}

._exportHero_2870d_318 {
  display: flex;
  align-items: center;
  min-height: 234px;
  padding: 22px;
  border-radius: 22px;
}

._exportHero_2870d_318 ._exportLeader_2870d_336 {
  width: 190px;
  height: 190px;
  flex: 0 0 auto;
  overflow: hidden;
  border-radius: 20px;
  box-shadow: 0 0 28px rgba(179, 112, 255, 0.34);
}

._exportHero_2870d_318 ._exportLeader_2870d_336 > div,
._exportHero_2870d_318 ._exportLeader_2870d_336 > div > div {
  overflow: hidden;
  border-radius: 16px;
}

._exportHero_2870d_318 ._exportLeader_2870d_336 img {
  border-radius: 15px;
}

._exportTitle_2870d_355 {
  min-width: 0;
  margin-left: 24px;
}

._exportTitle_2870d_355 > span,
._exportRecord_2870d_361 > span,
._exportSectionTitle_2870d_362,
._exportMetric_2870d_363 > span,
._exportMatchupHeader_2870d_364 > span {
  display: block;
  color: rgba(248, 250, 252, 0.62);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

._exportTitle_2870d_355 h1 {
  margin: 10px 0 0;
  overflow: hidden;
  font-size: 46px;
  letter-spacing: -0.05em;
  line-height: 0.98;
  text-overflow: ellipsis;
  white-space: nowrap;
}

._exportTitle_2870d_355 p {
  margin: 9px 0 0;
  color: rgba(248, 250, 252, 0.7);
  font-size: 18px;
  font-weight: 600;
}

._exportRecord_2870d_361 {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  align-items: flex-end;
  gap: 9px;
  margin-left: auto;
  padding-left: 28px;
  border-left: 1px solid rgba(255, 255, 255, 0.16);
}
._exportRecord_2870d_361 strong {
  font-size: 32px;
  letter-spacing: -0.05em;
}
._exportRecord_2870d_361 i {
  color: rgba(248, 250, 252, 0.45);
  font-style: normal;
}

._exportResults_2870d_319 {
  margin-top: 14px;
  padding: 16px;
  border-radius: 20px;
}

._exportMetrics_2870d_415 {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-top: 12px;
}

._exportMetric_2870d_363 {
  display: flex;
  min-width: 0;
  min-height: 104px;
  flex-direction: column;
  justify-content: flex-start;
  padding: 14px;
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: 14px;
  background: rgba(4, 8, 17, 0.3);
}
._exportMetric_2870d_363 > span {
  font-size: 14px;
}
._exportMetric_2870d_363 > strong {
  margin-top: 8px;
  color: #f8fafc;
  font-size: 36px;
  letter-spacing: -0.045em;
  line-height: 1;
}
._exportMetric_2870d_363 > strong small {
  font-size: 19px;
  color: rgba(248, 250, 252, 0.58);
}
._exportMetric_2870d_363 > small {
  margin-top: 6px;
  color: rgba(248, 250, 252, 0.65);
  font-size: 14px;
  font-weight: 700;
}

._positive_2870d_454 {
  color: #42ba5d !important;
}

._negative_2870d_458 {
  color: #f06b6b !important;
}

._exportMatchups_2870d_320 {
  display: flex;
  min-height: 0;
  flex: 1;
  flex-direction: column;
  margin-top: 14px;
  overflow: hidden;
  border-radius: 20px;
}

._exportMatchupHeader_2870d_364 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15px 18px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.11);
}
._exportMatchupHeader_2870d_364 > small {
  color: rgba(248, 250, 252, 0.52);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

._exportMatchupGrid_2870d_487 {
  display: grid;
  flex: 1;
  grid-template-columns: repeat(var(--matchup-columns, 2), minmax(0, 1fr));
  grid-template-rows: repeat(var(--matchup-rows, 4), minmax(0, 1fr));
  gap: 7px;
  padding: 9px;
}

._exportMatchup_2870d_320 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-width: 0;
  min-height: 0;
  gap: 14px;
  padding: 11px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 13px;
  background: rgba(4, 8, 17, 0.23);
}

._exportMatchup_2870d_320 ._exportOpponent_2870d_509 {
  width: 112px;
  height: 112px;
  flex: 0 0 auto;
  overflow: hidden;
  border-radius: 13px;
}

._exportMatchup_2870d_320 ._exportOpponent_2870d_509 > div,
._exportMatchup_2870d_320 ._exportOpponent_2870d_509 > div > div {
  overflow: hidden;
  border-radius: 10px;
}

._exportMatchup_2870d_320 ._exportOpponent_2870d_509 img {
  border-radius: 9px;
}

._exportMatchupInfo_2870d_527 {
  min-width: 0;
  flex: 0 1 228px;
}

._exportMatchupInfo_2870d_527 > strong {
  display: block;
  overflow: hidden;
  color: #f8fafc;
  font-size: 22px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

._exportMatchupId_2870d_541 {
  display: block;
  margin-top: 4px;
  color: rgba(248, 250, 252, 0.46);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.035em;
}

._exportMatchupBar_2870d_550 {
  width: 210px;
  max-width: 100%;
  height: 9px;
  margin-top: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(248, 250, 252, 0.14);
}

._exportMatchupBar_2870d_550 span {
  display: block;
  height: 100%;
  min-width: 2px;
  border-radius: inherit;
  background: #42ba5d;
}

._exportMatchupRecord_2870d_568 {
  flex: 0 0 auto;
  min-width: 72px;
  text-align: right;
}

._exportMatchupRecord_2870d_568 > strong {
  display: block;
  color: #f8fafc;
  font-size: 26px;
  letter-spacing: -0.025em;
}

._exportMatchupRecord_2870d_568 > span {
  display: block;
  margin-top: 5px;
  color: rgba(248, 250, 252, 0.55);
  font-size: 15px;
  font-weight: 700;
}

._exportMatchupGridDense_2870d_589 {
  gap: 6px;
  padding: 8px;
}
._exportMatchupGridDense_2870d_589 ._exportMatchup_2870d_320 {
  display: grid;
  grid-template-columns: var(--matchup-portrait-size, 104px) minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) auto;
  column-gap: 14px;
  row-gap: 3px;
  padding: 8px;
}
._exportMatchupGridDense_2870d_589 ._exportOpponent_2870d_509 {
  grid-column: 1;
  grid-row: 1/3;
  align-self: center;
}
._exportMatchupGridDense_2870d_589 ._exportMatchupInfo_2870d_527 {
  grid-column: 2;
  grid-row: 1;
  width: 100%;
}
._exportMatchupGridDense_2870d_589 ._exportMatchup_2870d_320 ._exportOpponent_2870d_509 {
  width: var(--matchup-portrait-size, 104px);
  height: var(--matchup-portrait-size, 104px);
  border-radius: 12px;
}
._exportMatchupGridDense_2870d_589 ._exportMatchupInfo_2870d_527 > strong {
  font-size: var(--matchup-name-size, 19px);
}
._exportMatchupGridDense_2870d_589 ._exportMatchupId_2870d_541 {
  margin-top: 2px;
  font-size: var(--matchup-id-size, 14px);
}
._exportMatchupGridDense_2870d_589 ._exportMatchupBar_2870d_550 {
  width: 100%;
  height: 8px;
  margin-top: 6px;
}
._exportMatchupGridDense_2870d_589 ._exportMatchupRecord_2870d_568 {
  display: flex;
  grid-column: 2;
  grid-row: 2;
  align-items: baseline;
  justify-content: space-between;
  width: 100%;
  min-width: 0;
  text-align: left;
}
._exportMatchupGridDense_2870d_589 ._exportMatchupRecord_2870d_568 > strong {
  order: 2;
  font-size: var(--matchup-rate-size, 22px);
}
._exportMatchupGridDense_2870d_589 ._exportMatchupRecord_2870d_568 > span {
  order: 1;
  margin-top: 0;
  font-size: var(--matchup-record-size, 16px);
}

._exportEmpty_2870d_648 {
  display: grid;
  flex: 1;
  min-height: 180px;
  place-items: center;
  color: rgba(248, 250, 252, 0.58);
  font-size: 18px;
}

._exportFooter_2870d_657 {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: 42px;
  margin-top: 16px;
  color: rgba(248, 250, 252, 0.64);
  font-size: 14px;
}
._exportFooter_2870d_657 strong {
  color: #f8fafc;
}
._exportFooter_2870d_657 > i {
  width: 1px;
  height: 17px;
  margin: 0 9px;
  background: rgba(248, 250, 252, 0.28);
}

._exportBrand_2870d_679 {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

._exportBrand_2870d_679 img {
  width: 25px;
  height: 25px;
  border-radius: 7px;
}

._exportAuthor_2870d_691 {
  flex: 0 0 auto;
}

._previewActions_2870d_695 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 20px;
}
._previewActions_2870d_695 > span {
  color: var(--clrTextTertiary);
  font-size: 12px;
  font-weight: 700;
}
._previewActions_2870d_695 > div {
  display: flex;
  gap: 8px;
}
._previewActions_2870d_695 button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 38px;
  padding: 0 13px;
  border-radius: 9px;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}
._previewActions_2870d_695 button:disabled {
  opacity: 0.5;
  cursor: wait;
}
._previewActions_2870d_695 svg {
  width: 16px;
  height: 16px;
}

._shareImageButton_2870d_732 {
  border: 1px solid color-mix(in srgb, var(--clrTextPrimary) 16%, transparent);
  background: transparent;
  color: var(--clrTextPrimary);
}

._downloadButton_2870d_738 {
  border: 1px solid var(--clrTextPrimary);
  background: var(--clrTextPrimary);
  color: var(--clrPrimary);
}

._mobileDrawer_2870d_744 {
  max-width: 680px !important;
}
._mobileDrawer_2870d_744 ._previewViewport_2870d_277 {
  height: min(52dvh, 620px);
  min-height: 280px;
  border: 1px solid color-mix(in srgb, var(--clrTextPrimary) 10%, transparent);
  border-radius: 14px;
}
._mobileDrawer_2870d_744 ._previewActions_2870d_695 {
  padding: 2px 0 0;
}

@media (max-width: 480px) {
  ._previewActions_2870d_695 {
    align-items: stretch;
    flex-direction: column;
  }
  ._previewActions_2870d_695 > div {
    width: 100%;
  }
  ._previewActions_2870d_695 button {
    flex: 1;
  }
}html {
  color-scheme: dark;
}

html:has(body._themeLight_1293w_5),
html:has(body._themePastelLight_1293w_6) {
  color-scheme: light;
}

:root {
  --clrPrimary: #F4F4F5;
  --clrPrimary30: rgba(244, 244, 245, 0.3);
  --clrSecondary: #FEFEFE;
  --clrTertiary: #E4E4E7;
  --clrPrimaryReverse: #101418;
  --clrSecondaryReverse: #0A0F14;
  --clrTertiaryReverse: #212327;
  --clrTextPrimary: #101418;
  --clrTextSecondary: #2E3337;
  --clrTextTertiary: #7C7C7C;
  --clrTextPrimaryReverse: #F4F4F5;
  --clrTextSecondaryReverse: #CDCDCD;
  --clrTextTertiaryReverse: #8A8A8A;
  --clrError-100: #641f1f;
  --clrError-50: #c84d4d;
  --clrSuccess-100: #2d692d;
  --clrSuccess-50: #3EA03E;
  --clrSuccessOnTint: #0d260d;
  --clrErrorOnTint: #2e0a0a;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgb(50, 126, 75, 0.1) 30%,
          rgb(94, 178, 122, 0.36) 60%,
          rgb(144, 215, 168) 100%);
  --clrNavBackground: rgba(244, 244, 245, 0.15);
  --clrNavItemActive: rgba(211, 211, 211, 0.4);
  --clrNavItemHover: rgba(0, 0, 0, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #F4F4F5;
  --clrGlassBackground: rgba(255, 255, 255, 0.5);
  --clrGlassBackgroundStrong: rgba(255, 255, 255, 0.3);
  --clrGlassBorder: rgba(0, 0, 0, 0.1);
  --snackbarDefaultBg: #F1ECE9;
  --snackbarDefaultText: #5D605C;
  --snackbarDefaultBorder: #5D605C;
  --snackbarDefaultIcon: #5D605C;
  --snackbarSuccessBg: #E0F1D9;
  --snackbarSuccessText: #358935;
  --snackbarSuccessBorder: #358935;
  --snackbarSuccessIcon: #358935;
  --snackbarErrorBg: #F9E1DC;
  --snackbarErrorText: #C80D12;
  --snackbarErrorBorder: #C80D12;
  --snackbarErrorIcon: #C80D12;
}

._themeLight_1293w_5 {
  --clrPrimary: #F4F4F5;
  --clrPrimary30: rgba(244, 244, 245, 0.3);
  --clrSecondary: #FEFEFE;
  --clrTertiary: #E4E4E7;
  --clrPrimaryReverse: #101418;
  --clrSecondaryReverse: #0A0F14;
  --clrTertiaryReverse: #212327;
  --clrTextPrimary: #101418;
  --clrTextSecondary: #2E3337;
  --clrTextTertiary: #7C7C7C;
  --clrTextPrimaryReverse: #F4F4F5;
  --clrTextSecondaryReverse: #CDCDCD;
  --clrTextTertiaryReverse: #8A8A8A;
  --clrError-100: #c03b3b;
  --clrError-50: #f6c5c5;
  --clrSuccess-100: #30d330;
  --clrSuccess-50: #bbffbb;
  --clrSuccessOnTint: #1f4f1f;
  --clrErrorOnTint: #7a1f1f;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgb(50, 126, 75, 0.1) 30%,
          rgb(94, 178, 122, 0.36) 60%,
          rgb(144, 215, 168) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(175, 49, 49, 0.1) 30%,
          rgba(238, 70, 70, 0.36) 60%,
          rgb(255, 173, 173) 100%);
  --clrNavBackground: rgba(244, 244, 245, 0.15);
  --clrNavItemActive: rgba(211, 211, 211, 0.4);
  --clrNavItemHover: rgba(0, 0, 0, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0000c1;
  --clrGlassBackground: rgba(255, 255, 255, 0.5);
  --clrGlassBackgroundStrong: rgba(255, 255, 255, 0.5);
  --clrGlassBorder: rgba(0, 0, 0, 0.1);
  --snackbarDefaultBg: #F1ECE9;
  --snackbarDefaultText: #5D605C;
  --snackbarDefaultBorder: #5D605C;
  --snackbarDefaultIcon: #5D605C;
  --snackbarSuccessBg: #E0F1D9;
  --snackbarSuccessText: #358935;
  --snackbarSuccessBorder: #358935;
  --snackbarSuccessIcon: #358935;
  --snackbarErrorBg: #F9E1DC;
  --snackbarErrorText: #C80D12;
  --snackbarErrorBorder: #C80D12;
  --snackbarErrorIcon: #C80D12;
}

._themeDark_1293w_131 {
  --clrPrimary: #0F1418;
  --clrPrimary30: rgba(15, 20, 25, 0.3);
  --clrSecondary: #0A0F14;
  --clrTertiary: #212327;
  --clrPrimaryReverse: #F4F4F5;
  --clrSecondaryReverse: #FEFEFE;
  --clrTertiaryReverse: #E4E4E7;
  --clrTextPrimary: #F4F4F5;
  --clrTextSecondary: #CDCDCD;
  --clrTextTertiary: #8A8A8A;
  --clrTextPrimaryReverse: #101418;
  --clrTextSecondaryReverse: #2E3337;
  --clrTextTertiaryReverse: #7C7C7C;
  --clrError-100: #c84d4d;
  --clrError-50: #641f1f;
  --clrSuccess-100: #3EA03E;
  --clrSuccess-50: #2d692d;
  --clrSuccessOnTint: #d6ffd6;
  --clrErrorOnTint: #ffd6d6;
  --clrWarning-100: #E88434;
  --clrWarning-50: #C49168;
  --clrAccent-100: #FFFFFF;
  --clrAccent-80: rgba(255, 255, 255, 0.8);
  --clrAccent-60: rgba(255, 255, 255, 0.6);
  --clrAccent-50: rgba(255, 255, 255, 0.5);
  --clrAccent-40: rgba(255, 255, 255, 0.4);
  --clrAccent-30: rgba(255, 255, 255, 0.3);
  --clrAccent-20: rgba(255, 255, 255, 0.2);
  --clrAccent-10: rgba(255, 255, 255, 0.1);
  --clrGradient: linear-gradient(90deg, #262a2e 10%, var(--clrPrimary) 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(50, 126, 75, 0.15) 30%,
          rgba(50, 126, 75, 0.3) 60%,
          rgba(50, 126, 75, 0.5) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(167, 44, 44, 0) 0%,
          rgba(167, 44, 44, 0.15) 30%,
          rgba(167, 44, 44, 0.3) 60%,
          rgba(167, 44, 44, 0.5) 100%);
  --clrNavBackground: rgba(0, 0, 0, 0.15);
  --clrNavItemActive: rgba(24, 24, 24, 0.49);
  --clrNavItemHover: rgba(255, 255, 255, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0F1418;
  --clrGlassBackground: rgba(15, 20, 24, 0.5);
  --clrGlassBackgroundStrong: rgba(15, 20, 24, 0.6);
  --clrGlassBorder: rgba(255, 255, 255, 0.1);
  --snackbarDefaultBg: #414141;
  --snackbarDefaultText: #BABABA;
  --snackbarDefaultBorder: #BABABA;
  --snackbarDefaultIcon: #BABABA;
  --snackbarSuccessBg: #145E18;
  --snackbarSuccessText: #8FE094;
  --snackbarSuccessBorder: #8FE094;
  --snackbarSuccessIcon: #8FE094;
  --snackbarErrorBg: #910C09;
  --snackbarErrorText: #FE9E9D;
  --snackbarErrorBorder: #FE9E9D;
  --snackbarErrorIcon: #FE9E9D;
}

/* 

Note: 
    If you want something done quick, ask AI to buuild your color themes.
    If you want to do it right and tidy though, do it manually. 

    - Theo

*/
:root {
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --font-accent: "Jaro", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}

html,
body {
  font-family: var(--font-sans);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

._container_1293w_216 {
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding: calc(76px + env(safe-area-inset-top, 0px) + 22px) 24px calc(80px + env(safe-area-inset-bottom, 0px) + 32px);
}

._pageActions_1293w_223 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

._breadcrumb_1293w_230 {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--clrTextSecondary);
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
  transition: color 150ms ease;
}
._breadcrumb_1293w_230 svg {
  width: 15px;
  height: 15px;
}
._breadcrumb_1293w_230:hover {
  color: var(--clrTextPrimary);
}

._shareButton_1293w_252 {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid color-mix(in srgb, var(--clrTextPrimary) 15%, transparent);
  border-radius: 9px;
  background: color-mix(in srgb, var(--clrTextPrimary) 6%, transparent);
  color: var(--clrTextPrimary);
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
  transition: border-color 150ms ease, background 150ms ease;
}
._shareButton_1293w_252 svg {
  width: 15px;
  height: 15px;
}
._shareButton_1293w_252:hover {
  border-color: color-mix(in srgb, var(--clrTextPrimary) 28%, transparent);
  background: color-mix(in srgb, var(--clrTextPrimary) 10%, transparent);
}

._heroPanel_1293w_276,
._overviewPanel_1293w_277,
._matchupsSection_1293w_278 {
  border: 1px solid color-mix(in srgb, var(--clrTextPrimary) 12%, transparent);
  border-radius: 16px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--clrTextPrimary) 5%, transparent), transparent 58%), color-mix(in srgb, var(--clrSecondary) 78%, transparent);
  backdrop-filter: blur(14px) saturate(112%);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.05), 0 14px 36px rgba(0, 0, 0, 0.08);
}

._heroPanel_1293w_276 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 166px;
  padding: 24px;
}

._header_1293w_294 {
  display: flex;
  align-items: center;
  gap: 18px;
  min-width: 0;
}

._deckImage_1293w_301 {
  width: 118px;
  height: 118px;
  flex: 0 0 auto;
  border-radius: 13px;
  box-shadow: 0 0 18px color-mix(in srgb, var(--clrAccent-100) 28%, transparent);
}

._deckInfo_1293w_309 h1 {
  margin: 0;
  color: var(--clrTextPrimary);
  font-size: clamp(1.9rem, 3vw, 2.7rem);
  line-height: 1;
  letter-spacing: -0.045em;
}

._deckInfo_1293w_309 p,
._heroRecord_1293w_318 span,
._panelHeading_1293w_319,
._miniMetric_1293w_320 span,
._performanceMetric_1293w_321 span,
._winRateFeature_1293w_322 > span,
._sectionHeader_1293w_323 > span {
  color: var(--clrTextSecondary);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

._deckInfo_1293w_309 p {
  margin: 8px 0 0;
}

._heroRecord_1293w_318 {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 5px;
  padding-left: 26px;
  border-left: 1px solid color-mix(in srgb, var(--clrTextPrimary) 12%, transparent);
}

._heroRecord_1293w_318 span {
  color: var(--clrTextSecondary);
}

._heroRecord_1293w_318 strong {
  color: var(--clrTextPrimary);
  font-size: clamp(1.75rem, 2.4vw, 2.25rem);
  letter-spacing: -0.04em;
  line-height: 1;
}

._heroRecord_1293w_318 i,
._recordLine_1293w_356 i,
._record_1293w_356 i {
  color: var(--clrTextTertiary);
  font-style: normal;
}

._overviewPanel_1293w_277 {
  margin-top: 14px;
  padding: 18px;
}

._panelHeading_1293w_319 {
  margin: 0;
}

._overviewGrid_1293w_371 {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  align-items: end;
  gap: 10px;
  margin-top: 14px;
}

._recordPanel_1293w_379,
._performancePanel_1293w_380 {
  display: grid;
  gap: 10px;
  background: none !important;
}

._recordPanel_1293w_379 {
  grid-column: span 3;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

._performancePanel_1293w_380 {
  grid-column: span 5;
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

._miniMetric_1293w_320,
._performanceMetric_1293w_321,
._winRateFeature_1293w_322 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 108px;
  padding: 16px;
  border: 1px solid color-mix(in srgb, var(--clrTextPrimary) 10%, transparent);
  border-radius: 13px;
  background: linear-gradient(145deg, color-mix(in srgb, var(--clrTextPrimary) 5%, transparent), transparent 62%), color-mix(in srgb, var(--clrSecondary) 76%, transparent);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.045);
}

._miniMetric_1293w_320 span,
._performanceMetric_1293w_321 span,
._winRateFeature_1293w_322 > span {
  margin: 0;
  font-size: 0.62rem;
}

._miniMetric_1293w_320 strong,
._performanceMetric_1293w_321 strong,
._winRateFeature_1293w_322 strong {
  margin-top: 10px;
  color: var(--clrTextPrimary);
  font-size: 25px;
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1;
}

._performanceMetric_1293w_321 small {
  display: block;
  margin-top: 7px;
  color: var(--clrTextTertiary);
  font-size: 11px;
  font-weight: 600;
}

._performanceMetric_1293w_321 strong small {
  display: inline;
  margin: 0;
  font-size: 14px;
}

._winRateFeature_1293w_322 {
  background: linear-gradient(145deg, rgba(var(--clrSuccess-100), 0.1), transparent 70%), color-mix(in srgb, var(--clrSecondary) 76%, transparent);
}

._recordLine_1293w_356 {
  margin-top: 9px;
  color: var(--clrTextSecondary);
  font-size: 12px;
  font-weight: 600;
}

._positive_1293w_453 {
  color: var(--clrSuccess-100) !important;
}

._negative_1293w_457 {
  color: var(--clrError-100) !important;
}

._neutral_1293w_461 {
  color: var(--clrTextPrimary);
}

._matchupsSection_1293w_278 {
  margin-top: 14px;
  overflow: hidden;
}

._sectionHeader_1293w_323 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px;
  border-bottom: 1px solid color-mix(in srgb, var(--clrTextPrimary) 10%, transparent);
}

._sectionHeader_1293w_323 h2 {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  color: var(--clrTextPrimary);
  font-size: 14px;
}

._sectionHeader_1293w_323 h2 svg {
  color: var(--clrTextSecondary);
}

._sectionHeader_1293w_323 > span {
  color: var(--clrTextTertiary);
}

._matchupTable_1293w_495 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  padding: 14px;
  background: transparent;
}

._matchupCard_1293w_503 {
  display: flex;
  align-items: center;
  gap: 13px;
  min-width: 0;
  padding: 13px;
  border: 1px solid color-mix(in srgb, var(--clrTextPrimary) 9%, transparent);
  border-radius: 13px;
  background: linear-gradient(145deg, color-mix(in srgb, var(--clrTextPrimary) 4%, transparent), transparent 65%), color-mix(in srgb, var(--clrSecondary) 68%, transparent);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.035);
  transition: transform 160ms ease, border-color 160ms ease, background 160ms ease;
}

._matchupCard_1293w_503:hover {
  border-color: color-mix(in srgb, var(--clrTextPrimary) 18%, transparent);
  background: color-mix(in srgb, var(--clrSecondary) 84%, transparent);
  transform: translateY(-1px);
}

._matchupDetail_1293w_522 {
  min-width: 0;
  flex: 1;
}

._matchupDeck_1293w_527 {
  overflow: hidden;
  color: var(--clrTextPrimary);
  font-size: 14px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

._matchupBar_1293w_536 {
  height: 5px;
  margin-top: 10px;
  overflow: hidden;
  border-radius: 999px;
  background: color-mix(in srgb, var(--clrTextPrimary) 10%, transparent);
}

._matchupWins_1293w_544 {
  display: block;
  height: 100%;
  min-width: 2px;
  border-radius: inherit;
  background: var(--clrSuccess-100);
}

._matchupRecord_1293w_552 {
  flex: 0 0 auto;
  min-width: 64px;
  text-align: right;
}

._winRate_1293w_322 {
  color: var(--clrTextPrimary);
  font-size: 14px;
  font-weight: 800;
}

._record_1293w_356 {
  margin-top: 3px;
  color: var(--clrTextTertiary);
  font-size: 11px;
  font-weight: 600;
}

._noData_1293w_571 {
  padding: 40px 20px;
  color: var(--clrTextTertiary);
  text-align: center;
}

._backButton_1293w_577 {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
  padding: 8px 12px;
  border: 1px solid color-mix(in srgb, var(--clrTextPrimary) 14%, transparent);
  border-radius: 8px;
  background: transparent;
  color: var(--clrTextPrimary);
  cursor: pointer;
}

._loader_1293w_590 {
  display: grid;
  min-height: 60vh;
  place-items: center;
}

@media (max-width: 1060px) {
  ._overviewGrid_1293w_371 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  ._recordPanel_1293w_379,
  ._performancePanel_1293w_380 {
    grid-column: 1/-1;
  }
  ._performancePanel_1293w_380 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}
@media (max-width: 768px) {
  ._container_1293w_216 {
    padding: calc(72px + env(safe-area-inset-top)) 14px calc(112px + env(safe-area-inset-bottom));
  }
  ._heroPanel_1293w_276 {
    min-height: 0;
    padding: 16px;
    border-radius: 14px;
  }
  ._pageActions_1293w_223 {
    margin-bottom: 10px;
  }
  ._deckImage_1293w_301 {
    width: 72px;
    height: 72px;
    border-radius: 10px;
  }
  ._deckInfo_1293w_309 h1 {
    font-size: 27px;
  }
  ._heroRecord_1293w_318 {
    display: none;
  }
  ._overviewPanel_1293w_277 {
    margin-top: 10px;
    padding: 14px;
    border-radius: 14px;
  }
  ._overviewGrid_1293w_371 {
    gap: 10px;
    margin-top: 10px;
  }
  ._recordPanel_1293w_379 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  ._performancePanel_1293w_380 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  ._miniMetric_1293w_320,
  ._performanceMetric_1293w_321,
  ._winRateFeature_1293w_322 {
    min-height: 88px;
    padding: 13px;
  }
  ._miniMetric_1293w_320 strong,
  ._performanceMetric_1293w_321 strong,
  ._winRateFeature_1293w_322 strong {
    font-size: 22px;
  }
  ._matchupsSection_1293w_278 {
    margin-top: 10px;
    border-radius: 14px;
  }
  ._sectionHeader_1293w_323 {
    padding: 15px 16px;
  }
  ._matchupTable_1293w_495 {
    grid-template-columns: 1fr;
    padding: 10px;
  }
}
@media (max-width: 420px) {
  ._deckInfo_1293w_309 h1 {
    font-size: 23px;
  }
  ._miniMetric_1293w_320,
  ._performanceMetric_1293w_321,
  ._winRateFeature_1293w_322 {
    padding: 11px;
  }
  ._miniMetric_1293w_320 strong {
    font-size: 20px;
  }
}
._container_1293w_216 {
  box-sizing: border-box;
  width: 100%;
  max-width: var(--site-max-width, 1440px);
  margin-inline: auto;
  padding-inline: var(--site-gutter, 20px);
}html {
  color-scheme: dark;
}

html:has(body._themeLight_182z1_5),
html:has(body._themePastelLight_182z1_6) {
  color-scheme: light;
}

:root {
  --clrPrimary: #F4F4F5;
  --clrPrimary30: rgba(244, 244, 245, 0.3);
  --clrSecondary: #FEFEFE;
  --clrTertiary: #E4E4E7;
  --clrPrimaryReverse: #101418;
  --clrSecondaryReverse: #0A0F14;
  --clrTertiaryReverse: #212327;
  --clrTextPrimary: #101418;
  --clrTextSecondary: #2E3337;
  --clrTextTertiary: #7C7C7C;
  --clrTextPrimaryReverse: #F4F4F5;
  --clrTextSecondaryReverse: #CDCDCD;
  --clrTextTertiaryReverse: #8A8A8A;
  --clrError-100: #641f1f;
  --clrError-50: #c84d4d;
  --clrSuccess-100: #2d692d;
  --clrSuccess-50: #3EA03E;
  --clrSuccessOnTint: #0d260d;
  --clrErrorOnTint: #2e0a0a;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgb(50, 126, 75, 0.1) 30%,
          rgb(94, 178, 122, 0.36) 60%,
          rgb(144, 215, 168) 100%);
  --clrNavBackground: rgba(244, 244, 245, 0.15);
  --clrNavItemActive: rgba(211, 211, 211, 0.4);
  --clrNavItemHover: rgba(0, 0, 0, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #F4F4F5;
  --clrGlassBackground: rgba(255, 255, 255, 0.5);
  --clrGlassBackgroundStrong: rgba(255, 255, 255, 0.3);
  --clrGlassBorder: rgba(0, 0, 0, 0.1);
  --snackbarDefaultBg: #F1ECE9;
  --snackbarDefaultText: #5D605C;
  --snackbarDefaultBorder: #5D605C;
  --snackbarDefaultIcon: #5D605C;
  --snackbarSuccessBg: #E0F1D9;
  --snackbarSuccessText: #358935;
  --snackbarSuccessBorder: #358935;
  --snackbarSuccessIcon: #358935;
  --snackbarErrorBg: #F9E1DC;
  --snackbarErrorText: #C80D12;
  --snackbarErrorBorder: #C80D12;
  --snackbarErrorIcon: #C80D12;
}

._themeLight_182z1_5 {
  --clrPrimary: #F4F4F5;
  --clrPrimary30: rgba(244, 244, 245, 0.3);
  --clrSecondary: #FEFEFE;
  --clrTertiary: #E4E4E7;
  --clrPrimaryReverse: #101418;
  --clrSecondaryReverse: #0A0F14;
  --clrTertiaryReverse: #212327;
  --clrTextPrimary: #101418;
  --clrTextSecondary: #2E3337;
  --clrTextTertiary: #7C7C7C;
  --clrTextPrimaryReverse: #F4F4F5;
  --clrTextSecondaryReverse: #CDCDCD;
  --clrTextTertiaryReverse: #8A8A8A;
  --clrError-100: #c03b3b;
  --clrError-50: #f6c5c5;
  --clrSuccess-100: #30d330;
  --clrSuccess-50: #bbffbb;
  --clrSuccessOnTint: #1f4f1f;
  --clrErrorOnTint: #7a1f1f;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgb(50, 126, 75, 0.1) 30%,
          rgb(94, 178, 122, 0.36) 60%,
          rgb(144, 215, 168) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(175, 49, 49, 0.1) 30%,
          rgba(238, 70, 70, 0.36) 60%,
          rgb(255, 173, 173) 100%);
  --clrNavBackground: rgba(244, 244, 245, 0.15);
  --clrNavItemActive: rgba(211, 211, 211, 0.4);
  --clrNavItemHover: rgba(0, 0, 0, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0000c1;
  --clrGlassBackground: rgba(255, 255, 255, 0.5);
  --clrGlassBackgroundStrong: rgba(255, 255, 255, 0.5);
  --clrGlassBorder: rgba(0, 0, 0, 0.1);
  --snackbarDefaultBg: #F1ECE9;
  --snackbarDefaultText: #5D605C;
  --snackbarDefaultBorder: #5D605C;
  --snackbarDefaultIcon: #5D605C;
  --snackbarSuccessBg: #E0F1D9;
  --snackbarSuccessText: #358935;
  --snackbarSuccessBorder: #358935;
  --snackbarSuccessIcon: #358935;
  --snackbarErrorBg: #F9E1DC;
  --snackbarErrorText: #C80D12;
  --snackbarErrorBorder: #C80D12;
  --snackbarErrorIcon: #C80D12;
}

._themeDark_182z1_131 {
  --clrPrimary: #0F1418;
  --clrPrimary30: rgba(15, 20, 25, 0.3);
  --clrSecondary: #0A0F14;
  --clrTertiary: #212327;
  --clrPrimaryReverse: #F4F4F5;
  --clrSecondaryReverse: #FEFEFE;
  --clrTertiaryReverse: #E4E4E7;
  --clrTextPrimary: #F4F4F5;
  --clrTextSecondary: #CDCDCD;
  --clrTextTertiary: #8A8A8A;
  --clrTextPrimaryReverse: #101418;
  --clrTextSecondaryReverse: #2E3337;
  --clrTextTertiaryReverse: #7C7C7C;
  --clrError-100: #c84d4d;
  --clrError-50: #641f1f;
  --clrSuccess-100: #3EA03E;
  --clrSuccess-50: #2d692d;
  --clrSuccessOnTint: #d6ffd6;
  --clrErrorOnTint: #ffd6d6;
  --clrWarning-100: #E88434;
  --clrWarning-50: #C49168;
  --clrAccent-100: #FFFFFF;
  --clrAccent-80: rgba(255, 255, 255, 0.8);
  --clrAccent-60: rgba(255, 255, 255, 0.6);
  --clrAccent-50: rgba(255, 255, 255, 0.5);
  --clrAccent-40: rgba(255, 255, 255, 0.4);
  --clrAccent-30: rgba(255, 255, 255, 0.3);
  --clrAccent-20: rgba(255, 255, 255, 0.2);
  --clrAccent-10: rgba(255, 255, 255, 0.1);
  --clrGradient: linear-gradient(90deg, #262a2e 10%, var(--clrPrimary) 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(50, 126, 75, 0.15) 30%,
          rgba(50, 126, 75, 0.3) 60%,
          rgba(50, 126, 75, 0.5) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(167, 44, 44, 0) 0%,
          rgba(167, 44, 44, 0.15) 30%,
          rgba(167, 44, 44, 0.3) 60%,
          rgba(167, 44, 44, 0.5) 100%);
  --clrNavBackground: rgba(0, 0, 0, 0.15);
  --clrNavItemActive: rgba(24, 24, 24, 0.49);
  --clrNavItemHover: rgba(255, 255, 255, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0F1418;
  --clrGlassBackground: rgba(15, 20, 24, 0.5);
  --clrGlassBackgroundStrong: rgba(15, 20, 24, 0.6);
  --clrGlassBorder: rgba(255, 255, 255, 0.1);
  --snackbarDefaultBg: #414141;
  --snackbarDefaultText: #BABABA;
  --snackbarDefaultBorder: #BABABA;
  --snackbarDefaultIcon: #BABABA;
  --snackbarSuccessBg: #145E18;
  --snackbarSuccessText: #8FE094;
  --snackbarSuccessBorder: #8FE094;
  --snackbarSuccessIcon: #8FE094;
  --snackbarErrorBg: #910C09;
  --snackbarErrorText: #FE9E9D;
  --snackbarErrorBorder: #FE9E9D;
  --snackbarErrorIcon: #FE9E9D;
}

/* 

Note: 
    If you want something done quick, ask AI to buuild your color themes.
    If you want to do it right and tidy though, do it manually. 

    - Theo

*/
:root {
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --font-accent: "Jaro", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}

html,
body {
  font-family: var(--font-sans);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

._pageTransition_182z1_216 {
  width: 100%;
  min-height: 100%;
}

._fadeOut_182z1_221 {
  animation: _swipeOut_182z1_1 0.2s ease-in-out forwards;
}

._fadeIn_182z1_225 {
  animation: _swipeIn_182z1_1 0.3s ease-in-out;
}

@keyframes _swipeOut_182z1_1 {
  from {
    opacity: 1;
    transform: translateX(0);
  }
  to {
    opacity: 0;
    transform: translateX(-30px);
  }
}
@keyframes _swipeIn_182z1_1 {
  from {
    opacity: 0;
    transform: translateX(30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}html {
  color-scheme: dark;
}

html:has(body.themeLight),
html:has(body.themePastelLight) {
  color-scheme: light;
}

:root {
  --clrPrimary: #F4F4F5;
  --clrPrimary30: rgba(244, 244, 245, 0.3);
  --clrSecondary: #FEFEFE;
  --clrTertiary: #E4E4E7;
  --clrPrimaryReverse: #101418;
  --clrSecondaryReverse: #0A0F14;
  --clrTertiaryReverse: #212327;
  --clrTextPrimary: #101418;
  --clrTextSecondary: #2E3337;
  --clrTextTertiary: #7C7C7C;
  --clrTextPrimaryReverse: #F4F4F5;
  --clrTextSecondaryReverse: #CDCDCD;
  --clrTextTertiaryReverse: #8A8A8A;
  --clrError-100: #641f1f;
  --clrError-50: #c84d4d;
  --clrSuccess-100: #2d692d;
  --clrSuccess-50: #3EA03E;
  --clrSuccessOnTint: #0d260d;
  --clrErrorOnTint: #2e0a0a;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgb(50, 126, 75, 0.1) 30%,
          rgb(94, 178, 122, 0.36) 60%,
          rgb(144, 215, 168) 100%);
  --clrNavBackground: rgba(244, 244, 245, 0.15);
  --clrNavItemActive: rgba(211, 211, 211, 0.4);
  --clrNavItemHover: rgba(0, 0, 0, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #F4F4F5;
  --clrGlassBackground: rgba(255, 255, 255, 0.5);
  --clrGlassBackgroundStrong: rgba(255, 255, 255, 0.3);
  --clrGlassBorder: rgba(0, 0, 0, 0.1);
  --snackbarDefaultBg: #F1ECE9;
  --snackbarDefaultText: #5D605C;
  --snackbarDefaultBorder: #5D605C;
  --snackbarDefaultIcon: #5D605C;
  --snackbarSuccessBg: #E0F1D9;
  --snackbarSuccessText: #358935;
  --snackbarSuccessBorder: #358935;
  --snackbarSuccessIcon: #358935;
  --snackbarErrorBg: #F9E1DC;
  --snackbarErrorText: #C80D12;
  --snackbarErrorBorder: #C80D12;
  --snackbarErrorIcon: #C80D12;
}

.themeLight {
  --clrPrimary: #F4F4F5;
  --clrPrimary30: rgba(244, 244, 245, 0.3);
  --clrSecondary: #FEFEFE;
  --clrTertiary: #E4E4E7;
  --clrPrimaryReverse: #101418;
  --clrSecondaryReverse: #0A0F14;
  --clrTertiaryReverse: #212327;
  --clrTextPrimary: #101418;
  --clrTextSecondary: #2E3337;
  --clrTextTertiary: #7C7C7C;
  --clrTextPrimaryReverse: #F4F4F5;
  --clrTextSecondaryReverse: #CDCDCD;
  --clrTextTertiaryReverse: #8A8A8A;
  --clrError-100: #c03b3b;
  --clrError-50: #f6c5c5;
  --clrSuccess-100: #30d330;
  --clrSuccess-50: #bbffbb;
  --clrSuccessOnTint: #1f4f1f;
  --clrErrorOnTint: #7a1f1f;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgb(50, 126, 75, 0.1) 30%,
          rgb(94, 178, 122, 0.36) 60%,
          rgb(144, 215, 168) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(175, 49, 49, 0.1) 30%,
          rgba(238, 70, 70, 0.36) 60%,
          rgb(255, 173, 173) 100%);
  --clrNavBackground: rgba(244, 244, 245, 0.15);
  --clrNavItemActive: rgba(211, 211, 211, 0.4);
  --clrNavItemHover: rgba(0, 0, 0, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0000c1;
  --clrGlassBackground: rgba(255, 255, 255, 0.5);
  --clrGlassBackgroundStrong: rgba(255, 255, 255, 0.5);
  --clrGlassBorder: rgba(0, 0, 0, 0.1);
  --snackbarDefaultBg: #F1ECE9;
  --snackbarDefaultText: #5D605C;
  --snackbarDefaultBorder: #5D605C;
  --snackbarDefaultIcon: #5D605C;
  --snackbarSuccessBg: #E0F1D9;
  --snackbarSuccessText: #358935;
  --snackbarSuccessBorder: #358935;
  --snackbarSuccessIcon: #358935;
  --snackbarErrorBg: #F9E1DC;
  --snackbarErrorText: #C80D12;
  --snackbarErrorBorder: #C80D12;
  --snackbarErrorIcon: #C80D12;
}

.themeDark {
  --clrPrimary: #0F1418;
  --clrPrimary30: rgba(15, 20, 25, 0.3);
  --clrSecondary: #0A0F14;
  --clrTertiary: #212327;
  --clrPrimaryReverse: #F4F4F5;
  --clrSecondaryReverse: #FEFEFE;
  --clrTertiaryReverse: #E4E4E7;
  --clrTextPrimary: #F4F4F5;
  --clrTextSecondary: #CDCDCD;
  --clrTextTertiary: #8A8A8A;
  --clrTextPrimaryReverse: #101418;
  --clrTextSecondaryReverse: #2E3337;
  --clrTextTertiaryReverse: #7C7C7C;
  --clrError-100: #c84d4d;
  --clrError-50: #641f1f;
  --clrSuccess-100: #3EA03E;
  --clrSuccess-50: #2d692d;
  --clrSuccessOnTint: #d6ffd6;
  --clrErrorOnTint: #ffd6d6;
  --clrWarning-100: #E88434;
  --clrWarning-50: #C49168;
  --clrAccent-100: #FFFFFF;
  --clrAccent-80: rgba(255, 255, 255, 0.8);
  --clrAccent-60: rgba(255, 255, 255, 0.6);
  --clrAccent-50: rgba(255, 255, 255, 0.5);
  --clrAccent-40: rgba(255, 255, 255, 0.4);
  --clrAccent-30: rgba(255, 255, 255, 0.3);
  --clrAccent-20: rgba(255, 255, 255, 0.2);
  --clrAccent-10: rgba(255, 255, 255, 0.1);
  --clrGradient: linear-gradient(90deg, #262a2e 10%, var(--clrPrimary) 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(50, 126, 75, 0.15) 30%,
          rgba(50, 126, 75, 0.3) 60%,
          rgba(50, 126, 75, 0.5) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(167, 44, 44, 0) 0%,
          rgba(167, 44, 44, 0.15) 30%,
          rgba(167, 44, 44, 0.3) 60%,
          rgba(167, 44, 44, 0.5) 100%);
  --clrNavBackground: rgba(0, 0, 0, 0.15);
  --clrNavItemActive: rgba(24, 24, 24, 0.49);
  --clrNavItemHover: rgba(255, 255, 255, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0F1418;
  --clrGlassBackground: rgba(15, 20, 24, 0.5);
  --clrGlassBackgroundStrong: rgba(15, 20, 24, 0.6);
  --clrGlassBorder: rgba(255, 255, 255, 0.1);
  --snackbarDefaultBg: #414141;
  --snackbarDefaultText: #BABABA;
  --snackbarDefaultBorder: #BABABA;
  --snackbarDefaultIcon: #BABABA;
  --snackbarSuccessBg: #145E18;
  --snackbarSuccessText: #8FE094;
  --snackbarSuccessBorder: #8FE094;
  --snackbarSuccessIcon: #8FE094;
  --snackbarErrorBg: #910C09;
  --snackbarErrorText: #FE9E9D;
  --snackbarErrorBorder: #FE9E9D;
  --snackbarErrorIcon: #FE9E9D;
}

/* 

Note: 
    If you want something done quick, ask AI to buuild your color themes.
    If you want to do it right and tidy though, do it manually. 

    - Theo

*/
:root {
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --font-accent: "Jaro", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}

html,
body {
  font-family: var(--font-sans);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

:root {
  --app-height: 100vh;
  --safe-area-inset-top: env(safe-area-inset-top, 0px);
  --safe-area-inset-bottom: env(safe-area-inset-bottom, 0px);
  --safe-area-inset-left: env(safe-area-inset-left, 0px);
  --safe-area-inset-right: env(safe-area-inset-right, 0px);
}

.app {
  min-height: var(--app-height);
  padding-top: var(--safe-area-inset-top);
  padding-bottom: var(--safe-area-inset-bottom);
  padding-left: var(--safe-area-inset-left);
  padding-right: var(--safe-area-inset-right);
}

input, select, textarea {
  font-size: 16px !important;
}

* {
  -webkit-tap-highlight-color: transparent;
}

.scrollable {
  -webkit-overflow-scrolling: touch;
}

html {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  background-color: var(--clrPrimary);
  overscroll-behavior: none;
}

body {
  width: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0;
  padding: 0;
  background-color: var(--clrPrimary);
  overscroll-behavior: none;
}

#root {
  width: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  background-color: var(--clrPrimary);
}

.app {
  width: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  background-color: var(--clrPrimary);
}

:root {
  --site-max-width: 1440px;
  --site-gutter: 20px;
}

@media (max-width: 840px) {
  :root {
    --site-gutter: 12px;
  }
}
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

html,
body {
  overflow-x: clip;
  scrollbar-gutter: stable;
  background-color: var(--clrPrimary);
  width: 100%;
  min-height: 100%;
  margin: 0;
  padding: 0;
}

html {
  background-color: #0f1418;
}

html:has(body.themeLight),
html:has(body.themePastelLight) {
  background-color: #f4f4f5;
}

html {
  scrollbar-width: thin;
  scrollbar-color: #3a4048 #0f1418;
}

html::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}

html::-webkit-scrollbar-track {
  background: #0f1418;
}

html::-webkit-scrollbar-thumb {
  background: #3a4048;
  border-radius: 10px;
  border: 3px solid #0f1418;
  background-clip: padding-box;
}

html::-webkit-scrollbar-thumb:hover {
  background: #4a515a;
  background-clip: padding-box;
}

html:has(body.themeLight),
html:has(body.themePastelLight) {
  scrollbar-color: #c2c6cc #f4f4f5;
}

html:has(body.themeLight)::-webkit-scrollbar-track,
html:has(body.themePastelLight)::-webkit-scrollbar-track {
  background: #f4f4f5;
}

html:has(body.themeLight)::-webkit-scrollbar-thumb,
html:has(body.themePastelLight)::-webkit-scrollbar-thumb {
  background: #c2c6cc;
  border-color: #f4f4f5;
}

#root {
  min-height: 100%;
  width: 100%;
  overflow-x: clip;
  background-color: var(--clrPrimary);
}

.app {
  background-color: var(--clrPrimary);
  color: var(--clrAccent-100);
  font-family: var(--font-sans);
  min-height: 100vh;
  min-height: 100dvh;
  width: 100%;
  display: flex;
  flex-direction: column;
}html {
  color-scheme: dark;
}

html:has(body._themeLight_vly16_5),
html:has(body._themePastelLight_vly16_6) {
  color-scheme: light;
}

:root {
  --clrPrimary: #F4F4F5;
  --clrPrimary30: rgba(244, 244, 245, 0.3);
  --clrSecondary: #FEFEFE;
  --clrTertiary: #E4E4E7;
  --clrPrimaryReverse: #101418;
  --clrSecondaryReverse: #0A0F14;
  --clrTertiaryReverse: #212327;
  --clrTextPrimary: #101418;
  --clrTextSecondary: #2E3337;
  --clrTextTertiary: #7C7C7C;
  --clrTextPrimaryReverse: #F4F4F5;
  --clrTextSecondaryReverse: #CDCDCD;
  --clrTextTertiaryReverse: #8A8A8A;
  --clrError-100: #641f1f;
  --clrError-50: #c84d4d;
  --clrSuccess-100: #2d692d;
  --clrSuccess-50: #3EA03E;
  --clrSuccessOnTint: #0d260d;
  --clrErrorOnTint: #2e0a0a;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgb(50, 126, 75, 0.1) 30%,
          rgb(94, 178, 122, 0.36) 60%,
          rgb(144, 215, 168) 100%);
  --clrNavBackground: rgba(244, 244, 245, 0.15);
  --clrNavItemActive: rgba(211, 211, 211, 0.4);
  --clrNavItemHover: rgba(0, 0, 0, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #F4F4F5;
  --clrGlassBackground: rgba(255, 255, 255, 0.5);
  --clrGlassBackgroundStrong: rgba(255, 255, 255, 0.3);
  --clrGlassBorder: rgba(0, 0, 0, 0.1);
  --snackbarDefaultBg: #F1ECE9;
  --snackbarDefaultText: #5D605C;
  --snackbarDefaultBorder: #5D605C;
  --snackbarDefaultIcon: #5D605C;
  --snackbarSuccessBg: #E0F1D9;
  --snackbarSuccessText: #358935;
  --snackbarSuccessBorder: #358935;
  --snackbarSuccessIcon: #358935;
  --snackbarErrorBg: #F9E1DC;
  --snackbarErrorText: #C80D12;
  --snackbarErrorBorder: #C80D12;
  --snackbarErrorIcon: #C80D12;
}

._themeLight_vly16_5 {
  --clrPrimary: #F4F4F5;
  --clrPrimary30: rgba(244, 244, 245, 0.3);
  --clrSecondary: #FEFEFE;
  --clrTertiary: #E4E4E7;
  --clrPrimaryReverse: #101418;
  --clrSecondaryReverse: #0A0F14;
  --clrTertiaryReverse: #212327;
  --clrTextPrimary: #101418;
  --clrTextSecondary: #2E3337;
  --clrTextTertiary: #7C7C7C;
  --clrTextPrimaryReverse: #F4F4F5;
  --clrTextSecondaryReverse: #CDCDCD;
  --clrTextTertiaryReverse: #8A8A8A;
  --clrError-100: #c03b3b;
  --clrError-50: #f6c5c5;
  --clrSuccess-100: #30d330;
  --clrSuccess-50: #bbffbb;
  --clrSuccessOnTint: #1f4f1f;
  --clrErrorOnTint: #7a1f1f;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgb(50, 126, 75, 0.1) 30%,
          rgb(94, 178, 122, 0.36) 60%,
          rgb(144, 215, 168) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(175, 49, 49, 0.1) 30%,
          rgba(238, 70, 70, 0.36) 60%,
          rgb(255, 173, 173) 100%);
  --clrNavBackground: rgba(244, 244, 245, 0.15);
  --clrNavItemActive: rgba(211, 211, 211, 0.4);
  --clrNavItemHover: rgba(0, 0, 0, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0000c1;
  --clrGlassBackground: rgba(255, 255, 255, 0.5);
  --clrGlassBackgroundStrong: rgba(255, 255, 255, 0.5);
  --clrGlassBorder: rgba(0, 0, 0, 0.1);
  --snackbarDefaultBg: #F1ECE9;
  --snackbarDefaultText: #5D605C;
  --snackbarDefaultBorder: #5D605C;
  --snackbarDefaultIcon: #5D605C;
  --snackbarSuccessBg: #E0F1D9;
  --snackbarSuccessText: #358935;
  --snackbarSuccessBorder: #358935;
  --snackbarSuccessIcon: #358935;
  --snackbarErrorBg: #F9E1DC;
  --snackbarErrorText: #C80D12;
  --snackbarErrorBorder: #C80D12;
  --snackbarErrorIcon: #C80D12;
}

._themeDark_vly16_131 {
  --clrPrimary: #0F1418;
  --clrPrimary30: rgba(15, 20, 25, 0.3);
  --clrSecondary: #0A0F14;
  --clrTertiary: #212327;
  --clrPrimaryReverse: #F4F4F5;
  --clrSecondaryReverse: #FEFEFE;
  --clrTertiaryReverse: #E4E4E7;
  --clrTextPrimary: #F4F4F5;
  --clrTextSecondary: #CDCDCD;
  --clrTextTertiary: #8A8A8A;
  --clrTextPrimaryReverse: #101418;
  --clrTextSecondaryReverse: #2E3337;
  --clrTextTertiaryReverse: #7C7C7C;
  --clrError-100: #c84d4d;
  --clrError-50: #641f1f;
  --clrSuccess-100: #3EA03E;
  --clrSuccess-50: #2d692d;
  --clrSuccessOnTint: #d6ffd6;
  --clrErrorOnTint: #ffd6d6;
  --clrWarning-100: #E88434;
  --clrWarning-50: #C49168;
  --clrAccent-100: #FFFFFF;
  --clrAccent-80: rgba(255, 255, 255, 0.8);
  --clrAccent-60: rgba(255, 255, 255, 0.6);
  --clrAccent-50: rgba(255, 255, 255, 0.5);
  --clrAccent-40: rgba(255, 255, 255, 0.4);
  --clrAccent-30: rgba(255, 255, 255, 0.3);
  --clrAccent-20: rgba(255, 255, 255, 0.2);
  --clrAccent-10: rgba(255, 255, 255, 0.1);
  --clrGradient: linear-gradient(90deg, #262a2e 10%, var(--clrPrimary) 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(50, 126, 75, 0.15) 30%,
          rgba(50, 126, 75, 0.3) 60%,
          rgba(50, 126, 75, 0.5) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(167, 44, 44, 0) 0%,
          rgba(167, 44, 44, 0.15) 30%,
          rgba(167, 44, 44, 0.3) 60%,
          rgba(167, 44, 44, 0.5) 100%);
  --clrNavBackground: rgba(0, 0, 0, 0.15);
  --clrNavItemActive: rgba(24, 24, 24, 0.49);
  --clrNavItemHover: rgba(255, 255, 255, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0F1418;
  --clrGlassBackground: rgba(15, 20, 24, 0.5);
  --clrGlassBackgroundStrong: rgba(15, 20, 24, 0.6);
  --clrGlassBorder: rgba(255, 255, 255, 0.1);
  --snackbarDefaultBg: #414141;
  --snackbarDefaultText: #BABABA;
  --snackbarDefaultBorder: #BABABA;
  --snackbarDefaultIcon: #BABABA;
  --snackbarSuccessBg: #145E18;
  --snackbarSuccessText: #8FE094;
  --snackbarSuccessBorder: #8FE094;
  --snackbarSuccessIcon: #8FE094;
  --snackbarErrorBg: #910C09;
  --snackbarErrorText: #FE9E9D;
  --snackbarErrorBorder: #FE9E9D;
  --snackbarErrorIcon: #FE9E9D;
}

/* 

Note: 
    If you want something done quick, ask AI to buuild your color themes.
    If you want to do it right and tidy though, do it manually. 

    - Theo

*/
:root {
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --font-accent: "Jaro", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}

html,
body {
  font-family: var(--font-sans);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

._header_vly16_216 {
  position: fixed;
  inset: 0 0 auto;
  z-index: 990;
  display: flex;
  flex-direction: column;
  background: var(--clrPrimary);
  border-bottom: 1px solid var(--clrTertiary);
}

._headerRow_vly16_226 {
  display: flex;
  align-items: center;
  width: min(1440px, 100%);
  height: 60px;
  min-height: 60px;
  margin: 0 auto;
  padding: 0 20px;
  gap: 18px;
  color: var(--clrTextPrimary);
}

._logoContainer_vly16_238 {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  gap: 8px;
  height: 40px;
  color: var(--clrTextPrimary);
  font-family: var(--font-accent);
  font-size: 18px;
  font-weight: 500;
  text-decoration: none;
}
._logoContainer_vly16_238 img {
  width: 32px;
  height: 32px;
  border-radius: 8px;
}
._logoContainer_vly16_238:hover {
  opacity: 0.84;
}

._primaryNav_vly16_259 {
  display: flex;
  align-items: center;
  align-self: stretch;
  gap: 2px;
  padding-left: 14px;
  border-left: 1px solid var(--clrTertiary);
}
._primaryNav_vly16_259 a {
  display: inline-flex;
  align-items: center;
  height: 34px;
  padding: 0 10px;
  border-radius: 6px;
  color: var(--clrTextSecondary);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
._primaryNav_vly16_259 a:hover, ._primaryNav_vly16_259 a[aria-current=page] {
  color: var(--clrTextPrimary);
  background: var(--clrTertiary);
}

._desktopSearch_vly16_284 {
  display: flex;
  align-items: center;
  flex: 1 1 260px;
  min-width: 160px;
  max-width: 420px;
  height: 36px;
  margin-left: auto;
  padding: 0 11px;
  gap: 8px;
  border: 1px solid var(--clrTertiary);
  border-radius: 7px;
  background: color-mix(in srgb, var(--clrSecondary) 76%, transparent);
}
._desktopSearch_vly16_284 svg {
  width: 17px;
  height: 17px;
  flex: 0 0 auto;
  color: var(--clrTextTertiary);
}
._desktopSearch_vly16_284 input {
  width: 100%;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--clrTextPrimary);
  font: inherit;
  font-size: 13px;
}
._desktopSearch_vly16_284 input::placeholder {
  color: var(--clrTextTertiary);
}
._desktopSearch_vly16_284 input::-webkit-search-cancel-button {
  display: none;
}
._desktopSearch_vly16_284:focus-within {
  border-color: var(--clrAccent-30);
}

._utilitySection_vly16_324 {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  gap: 8px;
}

._gameSwitcher_vly16_331 {
  order: 2;
}

._account_vly16_335 {
  order: 1;
}

._mobileSearch_vly16_339 {
  display: none;
}

._menuWrap_vly16_343 {
  position: relative;
}

._profileTrigger_vly16_347 {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  gap: 9px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--clrTextPrimary);
  font: inherit;
  text-align: right;
  cursor: pointer;
}
._profileTrigger_vly16_347:hover ._name_vly16_360 {
  color: var(--clrAccent-80);
}

._nameStack_vly16_364 {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: flex-end;
  line-height: 1.1;
}

._name_vly16_360 {
  max-width: 150px;
  overflow: hidden;
  font-size: 13px;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}

._handle_vly16_381 {
  color: var(--clrTextTertiary);
  font-size: 11px;
  font-weight: 500;
}

._profileIcon_vly16_387 {
  width: 34px;
  height: 34px;
  color: var(--clrTextSecondary);
}

._authButtons_vly16_393 {
  display: flex;
  align-items: center;
  gap: 7px;
}
._authButtons_vly16_393 a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 34px;
  padding: 0 12px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}

._signInBtn_vly16_411 {
  color: var(--clrTextSecondary);
}

._signUpBtn_vly16_415 {
  color: var(--clrPrimary);
  background: var(--clrTextPrimary);
}

._headerSecondary_vly16_420:not(:empty) {
  background: var(--clrSecondary);
  border-top: 1px solid var(--clrTertiary);
}

._menu_vly16_343 {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 120;
  display: flex;
  flex-direction: column;
  min-width: 218px;
  padding: 6px;
  gap: 2px;
  background: var(--clrSecondary);
  border: 1px solid var(--clrTertiary);
  border-radius: 8px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4);
}
._menu_vly16_343 button {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 40px;
  padding: 0 10px;
  gap: 10px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--clrTextPrimary);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}
._menu_vly16_343 button svg {
  width: 17px;
  height: 17px;
  color: var(--clrTextSecondary);
}
._menu_vly16_343 button:hover {
  background: var(--clrTertiary);
}
._menu_vly16_343 button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

._menuProfileRow_vly16_470 {
  display: flex;
  align-items: center;
  gap: 2px;
}

._menu_vly16_343 ._menuProfileLink_vly16_476 {
  flex: 1 1 auto;
}

._menu_vly16_343 ._copyProfileButton_vly16_480 {
  position: relative;
  flex: 0 0 38px;
  width: 38px;
  justify-content: center;
  padding: 0;
  gap: 0;
}

._copyTooltip_vly16_489 {
  position: absolute;
  top: calc(100% + 5px);
  right: 0;
  z-index: 1;
  padding: 6px 8px;
  border: 1px solid var(--clrTertiary);
  border-radius: 5px;
  background: var(--clrTextPrimary);
  color: var(--clrSecondary);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  pointer-events: none;
}

._menuDivider_vly16_506 {
  height: 1px;
  margin: 4px 6px;
  background: var(--clrTertiary);
}

._menuDanger_vly16_512 {
  color: var(--clrError-100) !important;
}
._menuDanger_vly16_512 svg {
  color: var(--clrError-100) !important;
}

._copiedToast_vly16_519 {
  position: absolute;
  top: 50%;
  right: calc(100% + 10px);
  transform: translateY(-50%);
  padding: 8px 12px;
  border-radius: 6px;
  background: var(--clrTextPrimary);
  color: var(--clrSecondary);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  pointer-events: none;
}

@media (max-width: 840px) {
  ._headerRow_vly16_226 {
    justify-content: space-between;
    height: 56px;
    min-height: 56px;
    padding: 0 12px;
    gap: 8px;
  }
  ._logoContainer_vly16_238 {
    height: 36px;
  }
  ._logoContainer_vly16_238 img {
    width: 30px;
    height: 30px;
  }
  ._logoWord_vly16_549 {
    display: inline;
    font-family: "Jaro", sans-serif;
    font-size: 22px;
    font-weight: 400;
    line-height: 1;
    white-space: nowrap;
  }
  ._primaryNav_vly16_259, ._desktopSearch_vly16_284 {
    display: none;
  }
  ._utilitySection_vly16_324 {
    margin-left: auto;
    gap: 6px;
  }
  ._gameSwitcher_vly16_331 {
    order: 0;
  }
  ._mobileSearch_vly16_339 {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    order: 1;
    width: 36px;
    height: 36px;
    border: 1px solid var(--clrTertiary);
    border-radius: 7px;
    color: var(--clrTextSecondary);
    text-decoration: none;
  }
  ._mobileSearch_vly16_339 svg {
    width: 19px;
    height: 19px;
  }
  ._account_vly16_335 {
    order: 2;
  }
  ._profileTrigger_vly16_347 {
    min-height: 36px;
  }
  ._nameStack_vly16_364, ._authButtons_vly16_393 ._signInBtn_vly16_411 {
    display: none;
  }
  ._authButtons_vly16_393 {
    gap: 0;
  }
  ._authButtons_vly16_393 ._signUpBtn_vly16_415 {
    width: 36px;
    padding: 0;
    font-size: 0;
    color: transparent;
  }
  ._authButtons_vly16_393 ._signUpBtn_vly16_415::before {
    content: "";
    width: 18px;
    height: 18px;
    border: 2px solid var(--clrPrimary);
    border-radius: 50%;
  }
  ._menu_vly16_343 {
    position: fixed;
    top: 64px;
    right: 12px;
    min-width: 220px;
  }
  ._copiedToast_vly16_519 {
    display: none;
  }
}
@media (max-width: 430px) {
  ._headerRow_vly16_226 {
    padding: 0 9px;
  }
  ._utilitySection_vly16_324 {
    gap: 4px;
  }
}
._headerRow_vly16_226 {
  box-sizing: border-box;
  width: 100%;
  max-width: var(--site-max-width, 1440px);
  margin-inline: auto;
  padding-inline: var(--site-gutter, 20px);
}._wrap_hijjq_1 {
  position: relative;
  display: inline-flex;
}

._trigger_hijjq_6 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border-radius: 7px;
  border: 1px solid var(--clrTertiary);
  background: var(--clrPrimary);
  color: var(--clrTextPrimary);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
._trigger_hijjq_6:hover {
  background: var(--clrTertiary);
}

._glyphImg_hijjq_26 {
  border-radius: 5px;
  object-fit: contain;
  flex: none;
}

._glyphDot_hijjq_32 {
  border-radius: 50%;
  display: inline-block;
  flex: none;
}

._menu_hijjq_38 {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 200px;
  max-width: calc(100vw - 16px);
  z-index: 60;
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  border-radius: 12px;
  border: 1px solid var(--clrTertiary);
  background: var(--clrSecondary);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.35);
}

._item_hijjq_55 {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--clrTextPrimary);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  text-align: left;
  transition: background 0.12s;
}
._item_hijjq_55:hover {
  background: var(--clrTertiary);
}

._itemActive_hijjq_75 {
  background: var(--clrTertiary);
}

._itemLabel_hijjq_79 {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

._draft_hijjq_86 {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 5px;
  color: var(--clrTextTertiary);
  border: 1px solid var(--clrTertiary);
  flex: none;
}

._check_hijjq_98 {
  width: 16px;
  height: 16px;
  flex: none;
  opacity: 0.8;
}html {
  color-scheme: dark;
}

html:has(body._themeLight_xt5nd_5),
html:has(body._themePastelLight_xt5nd_6) {
  color-scheme: light;
}

:root {
  --clrPrimary: #F4F4F5;
  --clrPrimary30: rgba(244, 244, 245, 0.3);
  --clrSecondary: #FEFEFE;
  --clrTertiary: #E4E4E7;
  --clrPrimaryReverse: #101418;
  --clrSecondaryReverse: #0A0F14;
  --clrTertiaryReverse: #212327;
  --clrTextPrimary: #101418;
  --clrTextSecondary: #2E3337;
  --clrTextTertiary: #7C7C7C;
  --clrTextPrimaryReverse: #F4F4F5;
  --clrTextSecondaryReverse: #CDCDCD;
  --clrTextTertiaryReverse: #8A8A8A;
  --clrError-100: #641f1f;
  --clrError-50: #c84d4d;
  --clrSuccess-100: #2d692d;
  --clrSuccess-50: #3EA03E;
  --clrSuccessOnTint: #0d260d;
  --clrErrorOnTint: #2e0a0a;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgb(50, 126, 75, 0.1) 30%,
          rgb(94, 178, 122, 0.36) 60%,
          rgb(144, 215, 168) 100%);
  --clrNavBackground: rgba(244, 244, 245, 0.15);
  --clrNavItemActive: rgba(211, 211, 211, 0.4);
  --clrNavItemHover: rgba(0, 0, 0, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #F4F4F5;
  --clrGlassBackground: rgba(255, 255, 255, 0.5);
  --clrGlassBackgroundStrong: rgba(255, 255, 255, 0.3);
  --clrGlassBorder: rgba(0, 0, 0, 0.1);
  --snackbarDefaultBg: #F1ECE9;
  --snackbarDefaultText: #5D605C;
  --snackbarDefaultBorder: #5D605C;
  --snackbarDefaultIcon: #5D605C;
  --snackbarSuccessBg: #E0F1D9;
  --snackbarSuccessText: #358935;
  --snackbarSuccessBorder: #358935;
  --snackbarSuccessIcon: #358935;
  --snackbarErrorBg: #F9E1DC;
  --snackbarErrorText: #C80D12;
  --snackbarErrorBorder: #C80D12;
  --snackbarErrorIcon: #C80D12;
}

._themeLight_xt5nd_5 {
  --clrPrimary: #F4F4F5;
  --clrPrimary30: rgba(244, 244, 245, 0.3);
  --clrSecondary: #FEFEFE;
  --clrTertiary: #E4E4E7;
  --clrPrimaryReverse: #101418;
  --clrSecondaryReverse: #0A0F14;
  --clrTertiaryReverse: #212327;
  --clrTextPrimary: #101418;
  --clrTextSecondary: #2E3337;
  --clrTextTertiary: #7C7C7C;
  --clrTextPrimaryReverse: #F4F4F5;
  --clrTextSecondaryReverse: #CDCDCD;
  --clrTextTertiaryReverse: #8A8A8A;
  --clrError-100: #c03b3b;
  --clrError-50: #f6c5c5;
  --clrSuccess-100: #30d330;
  --clrSuccess-50: #bbffbb;
  --clrSuccessOnTint: #1f4f1f;
  --clrErrorOnTint: #7a1f1f;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgb(50, 126, 75, 0.1) 30%,
          rgb(94, 178, 122, 0.36) 60%,
          rgb(144, 215, 168) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(175, 49, 49, 0.1) 30%,
          rgba(238, 70, 70, 0.36) 60%,
          rgb(255, 173, 173) 100%);
  --clrNavBackground: rgba(244, 244, 245, 0.15);
  --clrNavItemActive: rgba(211, 211, 211, 0.4);
  --clrNavItemHover: rgba(0, 0, 0, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0000c1;
  --clrGlassBackground: rgba(255, 255, 255, 0.5);
  --clrGlassBackgroundStrong: rgba(255, 255, 255, 0.5);
  --clrGlassBorder: rgba(0, 0, 0, 0.1);
  --snackbarDefaultBg: #F1ECE9;
  --snackbarDefaultText: #5D605C;
  --snackbarDefaultBorder: #5D605C;
  --snackbarDefaultIcon: #5D605C;
  --snackbarSuccessBg: #E0F1D9;
  --snackbarSuccessText: #358935;
  --snackbarSuccessBorder: #358935;
  --snackbarSuccessIcon: #358935;
  --snackbarErrorBg: #F9E1DC;
  --snackbarErrorText: #C80D12;
  --snackbarErrorBorder: #C80D12;
  --snackbarErrorIcon: #C80D12;
}

._themeDark_xt5nd_131 {
  --clrPrimary: #0F1418;
  --clrPrimary30: rgba(15, 20, 25, 0.3);
  --clrSecondary: #0A0F14;
  --clrTertiary: #212327;
  --clrPrimaryReverse: #F4F4F5;
  --clrSecondaryReverse: #FEFEFE;
  --clrTertiaryReverse: #E4E4E7;
  --clrTextPrimary: #F4F4F5;
  --clrTextSecondary: #CDCDCD;
  --clrTextTertiary: #8A8A8A;
  --clrTextPrimaryReverse: #101418;
  --clrTextSecondaryReverse: #2E3337;
  --clrTextTertiaryReverse: #7C7C7C;
  --clrError-100: #c84d4d;
  --clrError-50: #641f1f;
  --clrSuccess-100: #3EA03E;
  --clrSuccess-50: #2d692d;
  --clrSuccessOnTint: #d6ffd6;
  --clrErrorOnTint: #ffd6d6;
  --clrWarning-100: #E88434;
  --clrWarning-50: #C49168;
  --clrAccent-100: #FFFFFF;
  --clrAccent-80: rgba(255, 255, 255, 0.8);
  --clrAccent-60: rgba(255, 255, 255, 0.6);
  --clrAccent-50: rgba(255, 255, 255, 0.5);
  --clrAccent-40: rgba(255, 255, 255, 0.4);
  --clrAccent-30: rgba(255, 255, 255, 0.3);
  --clrAccent-20: rgba(255, 255, 255, 0.2);
  --clrAccent-10: rgba(255, 255, 255, 0.1);
  --clrGradient: linear-gradient(90deg, #262a2e 10%, var(--clrPrimary) 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(50, 126, 75, 0.15) 30%,
          rgba(50, 126, 75, 0.3) 60%,
          rgba(50, 126, 75, 0.5) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(167, 44, 44, 0) 0%,
          rgba(167, 44, 44, 0.15) 30%,
          rgba(167, 44, 44, 0.3) 60%,
          rgba(167, 44, 44, 0.5) 100%);
  --clrNavBackground: rgba(0, 0, 0, 0.15);
  --clrNavItemActive: rgba(24, 24, 24, 0.49);
  --clrNavItemHover: rgba(255, 255, 255, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0F1418;
  --clrGlassBackground: rgba(15, 20, 24, 0.5);
  --clrGlassBackgroundStrong: rgba(15, 20, 24, 0.6);
  --clrGlassBorder: rgba(255, 255, 255, 0.1);
  --snackbarDefaultBg: #414141;
  --snackbarDefaultText: #BABABA;
  --snackbarDefaultBorder: #BABABA;
  --snackbarDefaultIcon: #BABABA;
  --snackbarSuccessBg: #145E18;
  --snackbarSuccessText: #8FE094;
  --snackbarSuccessBorder: #8FE094;
  --snackbarSuccessIcon: #8FE094;
  --snackbarErrorBg: #910C09;
  --snackbarErrorText: #FE9E9D;
  --snackbarErrorBorder: #FE9E9D;
  --snackbarErrorIcon: #FE9E9D;
}

/* 

Note: 
    If you want something done quick, ask AI to buuild your color themes.
    If you want to do it right and tidy though, do it manually. 

    - Theo

*/
:root {
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --font-accent: "Jaro", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}

html,
body {
  font-family: var(--font-sans);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

._tournamentPage_xt5nd_216 {
  max-width: 820px;
  margin: 0 auto;
  width: 100%;
  padding: 16px 16px;
  color: var(--clrAccent-100);
  min-height: calc(100dvh - 60px - 80px);
}
._tournamentPage_xt5nd_216 h2 {
  margin-bottom: 4px;
}
._tournamentPage_xt5nd_216 ._statusMessage_xt5nd_227 {
  color: var(--clrAccent-60);
  font-size: 14px;
  margin-top: 16px;
}
._tournamentPage_xt5nd_216 {
  padding-top: calc(60px + env(safe-area-inset-top) + 16px);
  padding-bottom: calc(80px + env(safe-area-inset-bottom) + 16px);
}

._layout_xt5nd_237 {
  width: 100%;
}

._mainColumn_xt5nd_241 {
  min-width: 0;
}

._mobileStats_xt5nd_245 {
  margin-bottom: 8px;
}

._statsSidebar_xt5nd_249 {
  display: none;
}

._deckSidebar_xt5nd_253 {
  margin-top: 16px;
  margin-bottom: 12px;
}

@media (min-width: 1024px) {
  ._tournamentPage_xt5nd_216 {
    max-width: 1160px;
  }
  ._layout_xt5nd_237 {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 280px;
    gap: 24px;
    align-items: start;
  }
  ._mobileStats_xt5nd_245 {
    display: none;
  }
  ._mainColumn_xt5nd_241 {
    grid-column: 1;
    grid-row: 1;
  }
  ._statsSidebar_xt5nd_249 {
    display: block;
    grid-column: 2;
    grid-row: 1;
    position: sticky;
    top: calc(60px + env(safe-area-inset-top) + 16px);
  }
  ._deckSidebar_xt5nd_253 {
    grid-column: 1;
    grid-row: 2;
  }
}
@media (min-width: 1200px) {
  ._tournamentPage_xt5nd_216 {
    max-width: none;
  }
  ._layout_xt5nd_237 {
    grid-template-columns: minmax(280px, 1fr) minmax(0, 760px) minmax(280px, 1fr);
  }
  ._mainColumn_xt5nd_241 {
    grid-column: 2;
    grid-row: 1;
  }
  ._deckSidebar_xt5nd_253 {
    grid-column: 1;
    grid-row: 1;
    margin-top: 0;
    margin-bottom: 0;
    justify-self: end;
    width: 100%;
    max-width: 280px;
    position: sticky;
    top: calc(60px + env(safe-area-inset-top) + 16px);
  }
  ._statsSidebar_xt5nd_249 {
    grid-column: 3;
    grid-row: 1;
    justify-self: start;
    width: 280px;
  }
}
._header_xt5nd_316 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  margin-bottom: 16px;
}
._header_xt5nd_316 ._headerImage_xt5nd_324 {
  width: 128px;
  height: 128px;
  border-radius: 8px;
}
._header_xt5nd_316 ._headerImage_xt5nd_324 img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px;
}
._header_xt5nd_316 ._headerInfo_xt5nd_335 {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: space-between;
  justify-content: space-between;
  gap: 8px;
}
._header_xt5nd_316 ._headerInfo_xt5nd_335 ._headerTitle_xt5nd_343 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 2px;
}
._header_xt5nd_316 ._headerInfo_xt5nd_335 ._headerTitle_xt5nd_343 h2 {
  font-size: 24px;
  line-height: 18px;
  margin: 0;
  padding: 0;
}
._header_xt5nd_316 ._headerInfo_xt5nd_335 ._chips_xt5nd_356 {
  font-size: 14px;
  color: var(--clrAccent-60);
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
}
._header_xt5nd_316 ._headerInfo_xt5nd_335 ._secondaryInfo_xt5nd_368 {
  font-size: 14px;
  color: var(--clrAccent-60);
}
._header_xt5nd_316 ._headerActions_xt5nd_372 {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

._roundForm_xt5nd_378 {
  background-color: var(--clrSecondary);
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 24px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: stretch;
  gap: 16px;
}
._roundForm_xt5nd_378 ._formGroup_xt5nd_389 {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: stretch;
  gap: 8px;
}
._roundForm_xt5nd_378 ._formGroup_xt5nd_389 label {
  font-size: 14px;
  color: var(--clrAccent-60);
}
._roundForm_xt5nd_378 ._formGroup_xt5nd_389 ._searchInput_xt5nd_401 {
  width: 100%;
  height: 46px;
  padding: 0 16px;
  border-radius: 8px;
  border: none;
  background-color: var(--clrTertiary);
  color: var(--clrAccent-100);
}
._roundForm_xt5nd_378 ._formGroup_xt5nd_389 ._searchInput_xt5nd_401::placeholder {
  color: var(--clrAccent-60);
}
._roundForm_xt5nd_378 ._formGroup_xt5nd_389 ._leaderCarousel_xt5nd_413 {
  width: 100%;
  display: flex;
  overflow-x: auto;
  gap: 12px;
  padding: 8px 0;
  scrollbar-width: thin;
  scrollbar-color: var(--clrAccent-30) var(--clrTertiary);
}
._roundForm_xt5nd_378 ._formGroup_xt5nd_389 ._leaderCarousel_xt5nd_413::-webkit-scrollbar {
  height: 6px;
}
._roundForm_xt5nd_378 ._formGroup_xt5nd_389 ._leaderCarousel_xt5nd_413::-webkit-scrollbar-track {
  background: var(--clrTertiary);
  border-radius: 3px;
}
._roundForm_xt5nd_378 ._formGroup_xt5nd_389 ._leaderCarousel_xt5nd_413::-webkit-scrollbar-thumb {
  background: var(--clrAccent-100);
  border-radius: 3px;
}
._roundForm_xt5nd_378 ._formGroup_xt5nd_389 ._leaderCarousel_xt5nd_413 ._leaderCard_xt5nd_433 {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0px;
  cursor: pointer;
  border: 2px solid var(--clrPrimary);
  border-radius: 8px;
  transition: all 0.2s ease;
  width: 128px;
}
._roundForm_xt5nd_378 ._formGroup_xt5nd_389 ._leaderCarousel_xt5nd_413 ._leaderCard_xt5nd_433:hover {
  border-color: var(--clrAccent-100);
  transform: translateY(-2px);
}
._roundForm_xt5nd_378 ._formGroup_xt5nd_389 ._leaderCarousel_xt5nd_413 ._leaderCard_xt5nd_433._selected_xt5nd_450 {
  border-color: #5cb85c;
  box-shadow: 0 0 10px rgba(92, 184, 92, 0.5);
}
._roundForm_xt5nd_378 ._formGroup_xt5nd_389 ._leaderCarousel_xt5nd_413 ._leaderCard_xt5nd_433 ._leaderImage_xt5nd_454 {
  width: 100%;
  height: 92px;
  border-radius: 4px 4px 0 0;
  overflow: hidden;
}
._roundForm_xt5nd_378 ._formGroup_xt5nd_389 ._leaderCarousel_xt5nd_413 ._leaderCard_xt5nd_433 ._leaderImage_xt5nd_454 img {
  width: 100%;
  object-fit: cover;
}
._roundForm_xt5nd_378 ._formGroup_xt5nd_389 ._leaderCarousel_xt5nd_413 ._leaderCard_xt5nd_433 ._leaderImage_xt5nd_454 ._imagePlaceholder_xt5nd_464 {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 16px;
  color: #fff;
}
._roundForm_xt5nd_378 ._formGroup_xt5nd_389 ._leaderCarousel_xt5nd_413 ._leaderCard_xt5nd_433 ._leaderInfo_xt5nd_474 {
  width: 100%;
  background-color: var(--clrSecondary);
  padding: 4px 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border-radius: 0 0 4px 4px;
  border: 4px solid var(--clrSecondary);
}
._roundForm_xt5nd_378 ._formGroup_xt5nd_389 ._leaderCarousel_xt5nd_413 ._leaderCard_xt5nd_433 ._leaderInfo_xt5nd_474 ._leaderName_xt5nd_486 {
  font-size: 12px;
  color: var(--clrAccent-100);
  text-align: center;
  line-height: 1;
  margin-top: 2px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  width: 100%;
}
._roundForm_xt5nd_378 ._formGroup_xt5nd_389 ._leaderCarousel_xt5nd_413 ._leaderCard_xt5nd_433 ._leaderInfo_xt5nd_474 ._leaderSet_xt5nd_497 {
  font-size: 10px;
  color: var(--clrAccent-100);
  opacity: 0.7;
  text-align: center;
  line-height: 1;
}
._roundForm_xt5nd_378 ._formGroup_xt5nd_389 ._noResults_xt5nd_504 {
  width: 100%;
  text-align: center;
  color: var(--clrAccent-100);
  opacity: 0.7;
  font-size: 14px;
  padding: 20px;
  font-style: italic;
}

._modalOverlay_xt5nd_514 {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 16px;
}

._modal_xt5nd_514 {
  width: min(420px, 100%);
  background-color: var(--clrSecondary);
  border-radius: 8px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.35);
  border: 2px solid var(--clrAccent-30);
}
._modal_xt5nd_514 h3 {
  margin: 0;
}
._modal_xt5nd_514 ._modalDescription_xt5nd_539 {
  margin: 0;
  font-size: 14px;
  color: var(--clrAccent-60);
}
._modal_xt5nd_514 ._modalField_xt5nd_544 {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 14px;
  color: var(--clrAccent-60);
}
._modal_xt5nd_514 ._modalInput_xt5nd_551 {
  width: 100%;
  height: 44px;
  border-radius: 8px;
  border: 1px solid var(--clrAccent-30);
  background-color: transparent;
  color: var(--clrAccent-100);
  padding: 0 12px;
}
._modal_xt5nd_514 ._modalActions_xt5nd_560 {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 8px;
}
._modal_xt5nd_514 ._modalCancelBtn_xt5nd_566,
._modal_xt5nd_514 ._modalSaveBtn_xt5nd_567 {
  padding: 10px 18px;
  border-radius: 8px;
  font-weight: 600;
  border: none;
  cursor: pointer;
  transition: opacity 0.2s ease;
}
._modal_xt5nd_514 ._modalCancelBtn_xt5nd_566:disabled,
._modal_xt5nd_514 ._modalSaveBtn_xt5nd_567:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
._modal_xt5nd_514 ._modalCancelBtn_xt5nd_566 {
  background-color: var(--clrTertiary);
  color: var(--clrAccent-100);
}
._modal_xt5nd_514 ._modalSaveBtn_xt5nd_567 {
  background-color: var(--clrAccent-100);
  color: var(--clrPrimary);
}
._modal_xt5nd_514 ._modalDeleteBtn_xt5nd_588 {
  background-color: #dc3545;
  color: white;
}
._modal_xt5nd_514 ._modalDeleteBtn_xt5nd_588:hover:not(:disabled) {
  background-color: #c82333;
}
._modal_xt5nd_514 ._modalError_xt5nd_595 {
  color: #ff6b6b;
  font-size: 14px;
  margin: 0;
}

._toggleRow_xt5nd_601 {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: stretch;
  gap: 12px;
}
@media (min-width: 640px) {
  ._toggleRow_xt5nd_601 {
    flex-direction: row;
    justify-content: space-between;
  }
}

._toggleGroup_xt5nd_616 {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: stretch;
  gap: 8px;
}
._toggleGroup_xt5nd_616 span {
  font-size: 14px;
  color: var(--clrAccent-60);
}
._toggleGroup_xt5nd_616 ._toggleOptions_xt5nd_628 {
  display: flex;
  gap: 8px;
}
._toggleGroup_xt5nd_616 ._toggleBtn_xt5nd_632 {
  flex: 1;
  padding: 10px 0;
  border-radius: 8px;
  border: 1px solid var(--clrAccent-30);
  background-color: transparent;
  color: var(--clrAccent-100);
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}
._toggleGroup_xt5nd_616 ._toggleBtn_xt5nd_632._active_xt5nd_643 {
  background-color: var(--clrAccent-100);
  color: var(--clrPrimary);
  border-color: var(--clrAccent-100);
}

._saveRoundBtn_xt5nd_649 {
  padding: 14px 24px;
  background-color: #5cb85c;
  color: var(--clrAccent-100);
  border: none;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
}
._saveRoundBtn_xt5nd_649:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

._formMessage_xt5nd_663 {
  font-size: 14px;
}

._roundsSection_xt5nd_667 ._roundsHeader_xt5nd_667 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}
._roundsSection_xt5nd_667 ._roundsHeader_xt5nd_667 h3 {
  margin: 0;
}
._roundsSection_xt5nd_667 ._roundsHeader_xt5nd_667 ._roundsHeaderActions_xt5nd_678 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
._roundsSection_xt5nd_667 ._roundsHeader_xt5nd_667 ._exportBtn_xt5nd_685 {
  height: 24px;
  width: 24px;
  padding: 4px;
  border-radius: 4px;
  border: 1px solid var(--clrAccent-30);
  background: none;
  color: var(--clrAccent-100);
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 0;
}
._roundsSection_xt5nd_667 ._roundsHeader_xt5nd_667 ._exportBtn_xt5nd_685:hover:not(:disabled) {
  border-color: var(--clrAccent-100);
  background-color: var(--clrAccent-100);
  color: var(--clrPrimary);
}
._roundsSection_xt5nd_667 ._roundsHeader_xt5nd_667 ._exportBtn_xt5nd_685:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
._roundsSection_xt5nd_667 ._roundsHeader_xt5nd_667 ._editModeBtn_xt5nd_711 {
  height: 24px;
  padding: 4px 16px;
  border-radius: 4px;
  border: 1px solid var(--clrAccent-30);
  background: none;
  color: var(--clrAccent-100);
  font-weight: 600;
  font-size: 16px;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 0;
  line-height: 1;
}
._roundsSection_xt5nd_667 ._roundsHeader_xt5nd_667 ._editModeBtn_xt5nd_711:hover:not(:disabled) {
  border-color: var(--clrAccent-100);
  background-color: var(--clrAccent-100);
  color: var(--clrPrimary);
}
._roundsSection_xt5nd_667 ._roundsHeader_xt5nd_667 ._editModeBtn_xt5nd_711:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
._roundsSection_xt5nd_667 ._roundList_xt5nd_738 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: stretch;
  gap: 4px;
}

._exportContainer_xt5nd_746 {
  position: absolute;
  left: -9999px;
  width: 1080px;
  height: 1080px;
  padding: 40px;
  background-color: #1a1a2e;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: stretch;
  gap: 24px;
}
._exportContainer_xt5nd_746 ._exportHeader_xt5nd_759 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 16px;
  border-bottom: 2px solid var(--clrAccent-30);
}
._exportContainer_xt5nd_746 ._exportHeader_xt5nd_759 h2 {
  margin: 0;
  font-size: 32px;
  color: var(--clrAccent-100);
}
._exportContainer_xt5nd_746 ._exportHeader_xt5nd_759 ._exportStats_xt5nd_773 {
  font-size: 28px;
  font-weight: 700;
  color: var(--clrAccent-100);
}
._exportContainer_xt5nd_746 ._exportRoundList_xt5nd_778 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: stretch;
  gap: 12px;
  flex: 1;
  overflow: hidden;
}
._exportContainer_xt5nd_746 ._roundCard_xt5nd_787 {
  background-color: var(--clrSecondary);
  border-radius: 8px;
  padding: 12px 16px;
}
._exportContainer_xt5nd_746 ._roundCard_xt5nd_787 ._roundMeta_xt5nd_792 {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 14px;
  color: var(--clrAccent-60);
}

._actionsSection_xt5nd_800 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  margin-top: 16px;
}
._actionsSection_xt5nd_800 ._addRoundButton_xt5nd_808 {
  width: 100%;
  display: block;
}
._actionsSection_xt5nd_800 ._addRoundButton_xt5nd_808 .inner-content {
  width: 100%;
}
._actionsSection_xt5nd_800 ._actionButtons_xt5nd_815 {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
}
._actionsSection_xt5nd_800 ._actionButtons_xt5nd_815 ._finishBtn_xt5nd_823 {
  padding: 12px 24px;
  border-radius: 8px;
  border: 1px solid var(--clrAccent-30);
  background-color: transparent;
  color: var(--clrAccent-100);
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  width: 100%;
}
._actionsSection_xt5nd_800 ._actionButtons_xt5nd_815 ._finishBtn_xt5nd_823:hover:not(:disabled) {
  border-color: var(--clrAccent-100);
  color: var(--clrPrimary);
  background-color: var(--clrAccent-100);
}
._actionsSection_xt5nd_800 ._actionButtons_xt5nd_815 ._finishBtn_xt5nd_823:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
._actionsSection_xt5nd_800 ._actionButtons_xt5nd_815 ._deleteBtn_xt5nd_843 {
  padding: 12px 24px;
  border-radius: 8px;
  border: 1px solid #dc3545;
  background-color: transparent;
  color: #dc3545;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}
._actionsSection_xt5nd_800 ._actionButtons_xt5nd_815 ._deleteBtn_xt5nd_843:hover:not(:disabled) {
  background-color: #dc3545;
  color: white;
}
._actionsSection_xt5nd_800 ._actionButtons_xt5nd_815 ._deleteBtn_xt5nd_843:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
._actionsSection_xt5nd_800 ._addRoundBtn_xt5nd_861 {
  width: 100%;
  padding: 24px;
  border: none;
  background-color: var(--clrAccent-100);
  color: var(--clrPrimary);
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}
._actionsSection_xt5nd_800 ._addRoundBtn_xt5nd_861:hover {
  opacity: 0.9;
}
._actionsSection_xt5nd_800 ._addRoundBtn_xt5nd_861:active {
  transform: scale(0.95);
}

._tournamentPage_xt5nd_216 {
  box-sizing: border-box;
  width: 100%;
  max-width: var(--site-max-width, 1440px);
  margin-inline: auto;
  padding-inline: var(--site-gutter, 20px);
}html {
  color-scheme: dark;
}

html:has(body._themeLight_xqjt6_5),
html:has(body._themePastelLight_xqjt6_6) {
  color-scheme: light;
}

:root {
  --clrPrimary: #F4F4F5;
  --clrPrimary30: rgba(244, 244, 245, 0.3);
  --clrSecondary: #FEFEFE;
  --clrTertiary: #E4E4E7;
  --clrPrimaryReverse: #101418;
  --clrSecondaryReverse: #0A0F14;
  --clrTertiaryReverse: #212327;
  --clrTextPrimary: #101418;
  --clrTextSecondary: #2E3337;
  --clrTextTertiary: #7C7C7C;
  --clrTextPrimaryReverse: #F4F4F5;
  --clrTextSecondaryReverse: #CDCDCD;
  --clrTextTertiaryReverse: #8A8A8A;
  --clrError-100: #641f1f;
  --clrError-50: #c84d4d;
  --clrSuccess-100: #2d692d;
  --clrSuccess-50: #3EA03E;
  --clrSuccessOnTint: #0d260d;
  --clrErrorOnTint: #2e0a0a;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgb(50, 126, 75, 0.1) 30%,
          rgb(94, 178, 122, 0.36) 60%,
          rgb(144, 215, 168) 100%);
  --clrNavBackground: rgba(244, 244, 245, 0.15);
  --clrNavItemActive: rgba(211, 211, 211, 0.4);
  --clrNavItemHover: rgba(0, 0, 0, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #F4F4F5;
  --clrGlassBackground: rgba(255, 255, 255, 0.5);
  --clrGlassBackgroundStrong: rgba(255, 255, 255, 0.3);
  --clrGlassBorder: rgba(0, 0, 0, 0.1);
  --snackbarDefaultBg: #F1ECE9;
  --snackbarDefaultText: #5D605C;
  --snackbarDefaultBorder: #5D605C;
  --snackbarDefaultIcon: #5D605C;
  --snackbarSuccessBg: #E0F1D9;
  --snackbarSuccessText: #358935;
  --snackbarSuccessBorder: #358935;
  --snackbarSuccessIcon: #358935;
  --snackbarErrorBg: #F9E1DC;
  --snackbarErrorText: #C80D12;
  --snackbarErrorBorder: #C80D12;
  --snackbarErrorIcon: #C80D12;
}

._themeLight_xqjt6_5 {
  --clrPrimary: #F4F4F5;
  --clrPrimary30: rgba(244, 244, 245, 0.3);
  --clrSecondary: #FEFEFE;
  --clrTertiary: #E4E4E7;
  --clrPrimaryReverse: #101418;
  --clrSecondaryReverse: #0A0F14;
  --clrTertiaryReverse: #212327;
  --clrTextPrimary: #101418;
  --clrTextSecondary: #2E3337;
  --clrTextTertiary: #7C7C7C;
  --clrTextPrimaryReverse: #F4F4F5;
  --clrTextSecondaryReverse: #CDCDCD;
  --clrTextTertiaryReverse: #8A8A8A;
  --clrError-100: #c03b3b;
  --clrError-50: #f6c5c5;
  --clrSuccess-100: #30d330;
  --clrSuccess-50: #bbffbb;
  --clrSuccessOnTint: #1f4f1f;
  --clrErrorOnTint: #7a1f1f;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgb(50, 126, 75, 0.1) 30%,
          rgb(94, 178, 122, 0.36) 60%,
          rgb(144, 215, 168) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(175, 49, 49, 0.1) 30%,
          rgba(238, 70, 70, 0.36) 60%,
          rgb(255, 173, 173) 100%);
  --clrNavBackground: rgba(244, 244, 245, 0.15);
  --clrNavItemActive: rgba(211, 211, 211, 0.4);
  --clrNavItemHover: rgba(0, 0, 0, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0000c1;
  --clrGlassBackground: rgba(255, 255, 255, 0.5);
  --clrGlassBackgroundStrong: rgba(255, 255, 255, 0.5);
  --clrGlassBorder: rgba(0, 0, 0, 0.1);
  --snackbarDefaultBg: #F1ECE9;
  --snackbarDefaultText: #5D605C;
  --snackbarDefaultBorder: #5D605C;
  --snackbarDefaultIcon: #5D605C;
  --snackbarSuccessBg: #E0F1D9;
  --snackbarSuccessText: #358935;
  --snackbarSuccessBorder: #358935;
  --snackbarSuccessIcon: #358935;
  --snackbarErrorBg: #F9E1DC;
  --snackbarErrorText: #C80D12;
  --snackbarErrorBorder: #C80D12;
  --snackbarErrorIcon: #C80D12;
}

._themeDark_xqjt6_131 {
  --clrPrimary: #0F1418;
  --clrPrimary30: rgba(15, 20, 25, 0.3);
  --clrSecondary: #0A0F14;
  --clrTertiary: #212327;
  --clrPrimaryReverse: #F4F4F5;
  --clrSecondaryReverse: #FEFEFE;
  --clrTertiaryReverse: #E4E4E7;
  --clrTextPrimary: #F4F4F5;
  --clrTextSecondary: #CDCDCD;
  --clrTextTertiary: #8A8A8A;
  --clrTextPrimaryReverse: #101418;
  --clrTextSecondaryReverse: #2E3337;
  --clrTextTertiaryReverse: #7C7C7C;
  --clrError-100: #c84d4d;
  --clrError-50: #641f1f;
  --clrSuccess-100: #3EA03E;
  --clrSuccess-50: #2d692d;
  --clrSuccessOnTint: #d6ffd6;
  --clrErrorOnTint: #ffd6d6;
  --clrWarning-100: #E88434;
  --clrWarning-50: #C49168;
  --clrAccent-100: #FFFFFF;
  --clrAccent-80: rgba(255, 255, 255, 0.8);
  --clrAccent-60: rgba(255, 255, 255, 0.6);
  --clrAccent-50: rgba(255, 255, 255, 0.5);
  --clrAccent-40: rgba(255, 255, 255, 0.4);
  --clrAccent-30: rgba(255, 255, 255, 0.3);
  --clrAccent-20: rgba(255, 255, 255, 0.2);
  --clrAccent-10: rgba(255, 255, 255, 0.1);
  --clrGradient: linear-gradient(90deg, #262a2e 10%, var(--clrPrimary) 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(50, 126, 75, 0.15) 30%,
          rgba(50, 126, 75, 0.3) 60%,
          rgba(50, 126, 75, 0.5) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(167, 44, 44, 0) 0%,
          rgba(167, 44, 44, 0.15) 30%,
          rgba(167, 44, 44, 0.3) 60%,
          rgba(167, 44, 44, 0.5) 100%);
  --clrNavBackground: rgba(0, 0, 0, 0.15);
  --clrNavItemActive: rgba(24, 24, 24, 0.49);
  --clrNavItemHover: rgba(255, 255, 255, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0F1418;
  --clrGlassBackground: rgba(15, 20, 24, 0.5);
  --clrGlassBackgroundStrong: rgba(15, 20, 24, 0.6);
  --clrGlassBorder: rgba(255, 255, 255, 0.1);
  --snackbarDefaultBg: #414141;
  --snackbarDefaultText: #BABABA;
  --snackbarDefaultBorder: #BABABA;
  --snackbarDefaultIcon: #BABABA;
  --snackbarSuccessBg: #145E18;
  --snackbarSuccessText: #8FE094;
  --snackbarSuccessBorder: #8FE094;
  --snackbarSuccessIcon: #8FE094;
  --snackbarErrorBg: #910C09;
  --snackbarErrorText: #FE9E9D;
  --snackbarErrorBorder: #FE9E9D;
  --snackbarErrorIcon: #FE9E9D;
}

/* 

Note: 
    If you want something done quick, ask AI to buuild your color themes.
    If you want to do it right and tidy though, do it manually. 

    - Theo

*/
:root {
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --font-accent: "Jaro", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}

html,
body {
  font-family: var(--font-sans);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

._card_xqjt6_216 {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 0;
  width: 100%;
  margin-top: 12px;
  background: color-mix(in srgb, var(--clrSecondary) 82%, transparent);
  border: 1px solid var(--clrAccent-10);
  border-radius: 8px;
  overflow: hidden;
}

._skeleton_xqjt6_230 {
  width: 100%;
  height: 64px;
  margin-top: 12px;
  border-radius: 8px;
  background: linear-gradient(90deg, var(--clrTertiary) 25%, color-mix(in srgb, var(--clrTertiary) 60%, transparent) 37%, var(--clrTertiary) 63%);
  background-size: 400% 100%;
  animation: _shareShimmer_xqjt6_1 1.4s ease infinite;
}

@keyframes _shareShimmer_xqjt6_1 {
  0% {
    background-position: 100% 0;
  }
  100% {
    background-position: 0 0;
  }
}
._row_xqjt6_248 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  width: 100%;
  padding: 13px 14px;
}

._icon_xqjt6_258 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 0;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 6px;
  background: var(--clrTertiary);
  color: var(--clrTextPrimary);
}
._icon_xqjt6_258 svg {
  width: 18px;
  height: 18px;
}

._text_xqjt6_276 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 2px;
  flex: 1;
  min-width: 0;
}

._label_xqjt6_286 {
  color: var(--clrTextPrimary);
  font-size: 0.95rem;
  font-weight: 700;
}

._value_xqjt6_292 {
  max-width: 100%;
  color: var(--clrTextSecondary);
  font-size: 0.8rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

._note_xqjt6_301 {
  margin: 0;
  padding: 0 14px 13px;
  color: var(--clrTextTertiary);
  font-size: 0.8rem;
  line-height: 1.45;
}

._noteLink_xqjt6_309 {
  color: var(--clrTextPrimary);
  font-weight: 700;
  text-decoration: underline;
}

._error_xqjt6_315 {
  margin: 0;
  padding: 0 14px 13px;
  color: var(--clrError-100);
  font-size: 0.8rem;
  font-weight: 600;
}

._toggle_xqjt6_323 {
  position: relative;
  flex-shrink: 0;
  width: 48px;
  height: 28px;
}
._toggle_xqjt6_323 input {
  position: absolute;
  opacity: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  cursor: pointer;
}
._toggle_xqjt6_323 input:checked + ._toggleTrack_xqjt6_337 {
  background: var(--clrSuccess-50);
}
._toggle_xqjt6_323 input:checked + ._toggleTrack_xqjt6_337::before {
  transform: translateX(20px);
}
._toggle_xqjt6_323 input:disabled {
  cursor: not-allowed;
}
._toggle_xqjt6_323 input:disabled + ._toggleTrack_xqjt6_337 {
  opacity: 0.5;
}

._toggleTrack_xqjt6_337 {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: var(--clrTertiary);
  border: 1px solid var(--clrAccent-10);
  transition: background 0.18s ease;
  pointer-events: none;
}
._toggleTrack_xqjt6_337::before {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #FFFFFF;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  transition: transform 0.18s ease;
}

._confirmText_xqjt6_372 {
  margin: 0 0 8px;
  color: var(--clrTextPrimary);
  font-size: 0.95rem;
  line-height: 1.5;
}

._confirmSub_xqjt6_379 {
  margin: 0;
  color: var(--clrTextTertiary);
  font-size: 0.85rem;
  line-height: 1.45;
}

._confirmCancel_xqjt6_386,
._confirmApply_xqjt6_387 {
  min-height: 44px;
  padding: 0 18px;
  border-radius: 8px;
  font-size: 0.92rem;
  font-weight: 700;
  cursor: pointer;
}
._confirmCancel_xqjt6_386:disabled,
._confirmApply_xqjt6_387:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

._confirmCancel_xqjt6_386 {
  background: var(--clrTertiary);
  border: 1px solid var(--clrAccent-10);
  color: var(--clrTextPrimary);
}

._confirmApply_xqjt6_387 {
  background: var(--clrError-100);
  border: 0;
  color: #FFFFFF;
}
html {
  color-scheme: dark;
}

html:has(body._themeLight_1t1gn_6),
html:has(body._themePastelLight_1t1gn_7) {
  color-scheme: light;
}

:root {
  --clrPrimary: #F4F4F5;
  --clrPrimary30: rgba(244, 244, 245, 0.3);
  --clrSecondary: #FEFEFE;
  --clrTertiary: #E4E4E7;
  --clrPrimaryReverse: #101418;
  --clrSecondaryReverse: #0A0F14;
  --clrTertiaryReverse: #212327;
  --clrTextPrimary: #101418;
  --clrTextSecondary: #2E3337;
  --clrTextTertiary: #7C7C7C;
  --clrTextPrimaryReverse: #F4F4F5;
  --clrTextSecondaryReverse: #CDCDCD;
  --clrTextTertiaryReverse: #8A8A8A;
  --clrError-100: #641f1f;
  --clrError-50: #c84d4d;
  --clrSuccess-100: #2d692d;
  --clrSuccess-50: #3EA03E;
  --clrSuccessOnTint: #0d260d;
  --clrErrorOnTint: #2e0a0a;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgb(50, 126, 75, 0.1) 30%,
          rgb(94, 178, 122, 0.36) 60%,
          rgb(144, 215, 168) 100%);
  --clrNavBackground: rgba(244, 244, 245, 0.15);
  --clrNavItemActive: rgba(211, 211, 211, 0.4);
  --clrNavItemHover: rgba(0, 0, 0, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #F4F4F5;
  --clrGlassBackground: rgba(255, 255, 255, 0.5);
  --clrGlassBackgroundStrong: rgba(255, 255, 255, 0.3);
  --clrGlassBorder: rgba(0, 0, 0, 0.1);
  --snackbarDefaultBg: #F1ECE9;
  --snackbarDefaultText: #5D605C;
  --snackbarDefaultBorder: #5D605C;
  --snackbarDefaultIcon: #5D605C;
  --snackbarSuccessBg: #E0F1D9;
  --snackbarSuccessText: #358935;
  --snackbarSuccessBorder: #358935;
  --snackbarSuccessIcon: #358935;
  --snackbarErrorBg: #F9E1DC;
  --snackbarErrorText: #C80D12;
  --snackbarErrorBorder: #C80D12;
  --snackbarErrorIcon: #C80D12;
}

._themeLight_1t1gn_6 {
  --clrPrimary: #F4F4F5;
  --clrPrimary30: rgba(244, 244, 245, 0.3);
  --clrSecondary: #FEFEFE;
  --clrTertiary: #E4E4E7;
  --clrPrimaryReverse: #101418;
  --clrSecondaryReverse: #0A0F14;
  --clrTertiaryReverse: #212327;
  --clrTextPrimary: #101418;
  --clrTextSecondary: #2E3337;
  --clrTextTertiary: #7C7C7C;
  --clrTextPrimaryReverse: #F4F4F5;
  --clrTextSecondaryReverse: #CDCDCD;
  --clrTextTertiaryReverse: #8A8A8A;
  --clrError-100: #c03b3b;
  --clrError-50: #f6c5c5;
  --clrSuccess-100: #30d330;
  --clrSuccess-50: #bbffbb;
  --clrSuccessOnTint: #1f4f1f;
  --clrErrorOnTint: #7a1f1f;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgb(50, 126, 75, 0.1) 30%,
          rgb(94, 178, 122, 0.36) 60%,
          rgb(144, 215, 168) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(175, 49, 49, 0.1) 30%,
          rgba(238, 70, 70, 0.36) 60%,
          rgb(255, 173, 173) 100%);
  --clrNavBackground: rgba(244, 244, 245, 0.15);
  --clrNavItemActive: rgba(211, 211, 211, 0.4);
  --clrNavItemHover: rgba(0, 0, 0, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0000c1;
  --clrGlassBackground: rgba(255, 255, 255, 0.5);
  --clrGlassBackgroundStrong: rgba(255, 255, 255, 0.5);
  --clrGlassBorder: rgba(0, 0, 0, 0.1);
  --snackbarDefaultBg: #F1ECE9;
  --snackbarDefaultText: #5D605C;
  --snackbarDefaultBorder: #5D605C;
  --snackbarDefaultIcon: #5D605C;
  --snackbarSuccessBg: #E0F1D9;
  --snackbarSuccessText: #358935;
  --snackbarSuccessBorder: #358935;
  --snackbarSuccessIcon: #358935;
  --snackbarErrorBg: #F9E1DC;
  --snackbarErrorText: #C80D12;
  --snackbarErrorBorder: #C80D12;
  --snackbarErrorIcon: #C80D12;
}

._themeDark_1t1gn_132 {
  --clrPrimary: #0F1418;
  --clrPrimary30: rgba(15, 20, 25, 0.3);
  --clrSecondary: #0A0F14;
  --clrTertiary: #212327;
  --clrPrimaryReverse: #F4F4F5;
  --clrSecondaryReverse: #FEFEFE;
  --clrTertiaryReverse: #E4E4E7;
  --clrTextPrimary: #F4F4F5;
  --clrTextSecondary: #CDCDCD;
  --clrTextTertiary: #8A8A8A;
  --clrTextPrimaryReverse: #101418;
  --clrTextSecondaryReverse: #2E3337;
  --clrTextTertiaryReverse: #7C7C7C;
  --clrError-100: #c84d4d;
  --clrError-50: #641f1f;
  --clrSuccess-100: #3EA03E;
  --clrSuccess-50: #2d692d;
  --clrSuccessOnTint: #d6ffd6;
  --clrErrorOnTint: #ffd6d6;
  --clrWarning-100: #E88434;
  --clrWarning-50: #C49168;
  --clrAccent-100: #FFFFFF;
  --clrAccent-80: rgba(255, 255, 255, 0.8);
  --clrAccent-60: rgba(255, 255, 255, 0.6);
  --clrAccent-50: rgba(255, 255, 255, 0.5);
  --clrAccent-40: rgba(255, 255, 255, 0.4);
  --clrAccent-30: rgba(255, 255, 255, 0.3);
  --clrAccent-20: rgba(255, 255, 255, 0.2);
  --clrAccent-10: rgba(255, 255, 255, 0.1);
  --clrGradient: linear-gradient(90deg, #262a2e 10%, var(--clrPrimary) 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(50, 126, 75, 0.15) 30%,
          rgba(50, 126, 75, 0.3) 60%,
          rgba(50, 126, 75, 0.5) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(167, 44, 44, 0) 0%,
          rgba(167, 44, 44, 0.15) 30%,
          rgba(167, 44, 44, 0.3) 60%,
          rgba(167, 44, 44, 0.5) 100%);
  --clrNavBackground: rgba(0, 0, 0, 0.15);
  --clrNavItemActive: rgba(24, 24, 24, 0.49);
  --clrNavItemHover: rgba(255, 255, 255, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0F1418;
  --clrGlassBackground: rgba(15, 20, 24, 0.5);
  --clrGlassBackgroundStrong: rgba(15, 20, 24, 0.6);
  --clrGlassBorder: rgba(255, 255, 255, 0.1);
  --snackbarDefaultBg: #414141;
  --snackbarDefaultText: #BABABA;
  --snackbarDefaultBorder: #BABABA;
  --snackbarDefaultIcon: #BABABA;
  --snackbarSuccessBg: #145E18;
  --snackbarSuccessText: #8FE094;
  --snackbarSuccessBorder: #8FE094;
  --snackbarSuccessIcon: #8FE094;
  --snackbarErrorBg: #910C09;
  --snackbarErrorText: #FE9E9D;
  --snackbarErrorBorder: #FE9E9D;
  --snackbarErrorIcon: #FE9E9D;
}

/* 

Note: 
    If you want something done quick, ask AI to buuild your color themes.
    If you want to do it right and tidy though, do it manually. 

    - Theo

*/
:root {
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --font-accent: "Jaro", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}

html,
body {
  font-family: var(--font-sans);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

._relatedSection_1t1gn_217 {
  margin-top: 48px;
  padding-top: 32px;
  border-top: 1px solid var(--clrTertiary);
}
._relatedSection_1t1gn_217 h2 {
  margin: 0;
  font-size: 24px;
  font-weight: 600;
}

._relatedFooter_1t1gn_228 {
  display: flex;
  justify-content: center;
  margin-top: 24px;
}

._pagination_1t1gn_234 {
  display: flex;
  justify-content: center;
  margin-top: 36px;
}

._paginationControls_1t1gn_240 {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px;
  border: 1px solid var(--clrTertiary);
  border-radius: 12px;
  background: var(--clrSecondary);
}
._paginationControls_1t1gn_240 button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 44px;
  padding: 0 12px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--clrTextSecondary);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}
._paginationControls_1t1gn_240 button svg {
  width: 16px;
  height: 16px;
}
._paginationControls_1t1gn_240 button:hover:not(:disabled) {
  background: var(--clrTertiary);
  color: var(--clrTextPrimary);
}
._paginationControls_1t1gn_240 button:disabled {
  opacity: 0.35;
  cursor: default;
}

._currentPage_1t1gn_277 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 64px;
  min-height: 38px;
  padding: 0 10px;
  border-radius: 7px;
  background: rgba(139, 92, 246, 0.14);
  color: var(--clrTextPrimary);
  font-size: 13px;
  font-weight: 600;
}

@media (max-width: 380px) {
  ._paginationControls_1t1gn_240 {
    gap: 2px;
  }
  ._paginationControls_1t1gn_240 button {
    padding: 0 8px;
    gap: 3px;
  }
}
._page_1t1gn_300 {
  margin: 0 auto;
  padding: 84px 20px calc(110px + env(safe-area-inset-bottom));
  color: var(--clrTextPrimary);
  min-height: 80vh;
}

._page_1t1gn_300 *,
._section_1t1gn_308 *,
._form_1t1gn_309 * {
  box-sizing: border-box;
  min-width: 0;
}
._page_1t1gn_300 button,
._page_1t1gn_300 input,
._page_1t1gn_300 select,
._page_1t1gn_300 textarea,
._section_1t1gn_308 button,
._section_1t1gn_308 input,
._section_1t1gn_308 select,
._section_1t1gn_308 textarea,
._form_1t1gn_309 button,
._form_1t1gn_309 input,
._form_1t1gn_309 select,
._form_1t1gn_309 textarea {
  font: inherit;
}
._page_1t1gn_300 button:focus-visible,
._page_1t1gn_300 a:focus-visible,
._page_1t1gn_300 input:focus-visible,
._page_1t1gn_300 select:focus-visible,
._page_1t1gn_300 textarea:focus-visible,
._section_1t1gn_308 button:focus-visible,
._section_1t1gn_308 a:focus-visible,
._section_1t1gn_308 input:focus-visible,
._section_1t1gn_308 select:focus-visible,
._section_1t1gn_308 textarea:focus-visible,
._form_1t1gn_309 button:focus-visible,
._form_1t1gn_309 a:focus-visible,
._form_1t1gn_309 input:focus-visible,
._form_1t1gn_309 select:focus-visible,
._form_1t1gn_309 textarea:focus-visible {
  outline: 2px solid #8b5cf6;
  outline-offset: 3px;
}

._head_1t1gn_346 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 32px;
}
._head_1t1gn_346 h1 {
  font-family: var(--font-accent);
  font-weight: 400;
  line-height: 1.08;
  font-size: clamp(34px, 4vw, 48px);
  margin: 6px 0;
  letter-spacing: -0.02em;
}
._head_1t1gn_346 p {
  margin: 0;
  color: var(--clrTextTertiary);
}

._tabs_1t1gn_366 {
  display: flex;
  gap: 6px;
  border-bottom: 1px solid var(--clrTertiary);
  margin-bottom: 32px;
}
._tabs_1t1gn_366 a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
}
._tabs_1t1gn_366 a svg {
  width: 18px;
  height: 18px;
}
._tabs_1t1gn_366 a {
  color: var(--clrTextTertiary);
  text-decoration: none;
  padding: 14px 16px;
  border-bottom: 2px solid transparent;
  font-weight: 650;
}
._tabs_1t1gn_366 a[aria-current=page] {
  color: var(--clrTextPrimary);
  border-color: #8b5cf6;
}

._button_1t1gn_394, ._primary_1t1gn_394 {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 7px;
  min-height: 42px;
  border: 1px solid var(--clrTertiary);
  border-radius: 9px;
  padding: 9px 13px;
  color: var(--clrTextPrimary);
  background: var(--clrSecondary);
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}
._button_1t1gn_394 svg, ._primary_1t1gn_394 svg {
  width: 18px;
  height: 18px;
}
._button_1t1gn_394:disabled, ._primary_1t1gn_394:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
._button_1t1gn_394[aria-pressed=true], [aria-pressed=true]._primary_1t1gn_394 {
  background: #6d28d9;
  color: white;
  border-color: #8b5cf6;
}

._primary_1t1gn_394 {
  background: #7c3aed;
  border-color: #7c3aed;
  color: white;
}

._actions_1t1gn_429 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

._filters_1t1gn_436 {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: end;
  margin-bottom: 16px;
}
._filters_1t1gn_436 label {
  display: grid;
  gap: 6px;
  flex: 1;
  min-width: 140px;
  font-size: 12px;
  color: var(--clrTextTertiary);
}
._filters_1t1gn_436 label:first-child {
  flex: 1 1 360px;
}
._filters_1t1gn_436 label:last-child {
  flex: 0 1 220px;
}

._input_1t1gn_458 {
  width: 100%;
  border: 1px solid var(--clrTertiary);
  border-radius: 9px;
  background: var(--clrSecondary);
  color: var(--clrTextPrimary);
  padding: 12px;
  min-height: 44px;
}

._chips_1t1gn_468 {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: 10px 0 16px;
}
._chips_1t1gn_468 button,
._chips_1t1gn_468 span {
  border: 1px solid var(--clrTertiary);
  background: var(--clrSecondary);
  color: var(--clrTextTertiary);
  padding: 7px 11px;
  border-radius: 20px;
  font-size: 12px;
}
._chips_1t1gn_468 button {
  cursor: pointer;
  min-height: 34px;
}
._chips_1t1gn_468 button[aria-pressed=true] {
  background: #7c3aed;
  border-color: #7c3aed;
  color: white;
}

._grid_1t1gn_493 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  margin: 20px 0 32px;
}

._card_1t1gn_500 {
  background: var(--clrSecondary);
  border: 1px solid var(--clrTertiary);
  border-radius: 14px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: var(--clrTextPrimary);
  transition: border-color 0.15s, transform 0.15s;
}
._card_1t1gn_500:hover {
  border-color: #8b5cf6;
  transform: translateY(-2px);
}

._leader_1t1gn_516 {
  width: 66px;
  height: 82px;
  flex-shrink: 0;
  border-radius: 9px;
  overflow: hidden;
  background: var(--clrTertiary);
}
._leader_1t1gn_516 img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: top;
}

._cardFooter_1t1gn_531 {
  border-top: 1px solid var(--clrTertiary);
  margin-top: auto;
  padding: 14px 20px;
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
  font-size: 12px;
}

._creator_1t1gn_542 {
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: inherit;
  overflow: hidden;
}
._creator_1t1gn_542 span {
  overflow: hidden;
  text-overflow: ellipsis;
}

._muted_1t1gn_555 {
  color: var(--clrTextTertiary);
  font-size: 13px;
  line-height: 1.6;
}

._state_1t1gn_561 {
  padding: 38px 18px;
  border: 1px dashed var(--clrTertiary);
  border-radius: 12px;
  text-align: center;
  color: var(--clrTextTertiary);
}

._error_1t1gn_569 {
  color: #ef4444;
  font-size: 14px;
}

._skeleton_1t1gn_574 {
  min-height: 230px;
  background: var(--clrSecondary);
  border: 1px solid var(--clrTertiary);
  border-radius: 14px;
  animation: _pulse_1t1gn_1 1.3s ease-in-out infinite alternate;
}

@keyframes _pulse_1t1gn_1 {
  to {
    opacity: 0.45;
  }
}
@media (prefers-reduced-motion: reduce) {
  ._skeleton_1t1gn_574 {
    animation: none;
  }
  ._card_1t1gn_500 {
    transition: none;
  }
}
._detailHero_1t1gn_595 {
  margin: 12px 0 20px;
  padding: 16px 20px;
  border: 1px solid var(--clrTertiary);
  border-radius: 16px;
  background: var(--clrSecondary);
}
._detailHero_1t1gn_595 h1 {
  font-family: var(--font-accent);
  font-weight: 400;
  font-size: clamp(28px, 2.6vw, 36px);
  line-height: 1.1;
  margin: 0;
  overflow-wrap: anywhere;
}

._cardGrid_1t1gn_611 {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(116px, 1fr));
  gap: 14px;
  margin: 18px 0 28px;
}

._tile_1t1gn_618 {
  margin: 0;
}
._tile_1t1gn_618 img {
  width: 100%;
  aspect-ratio: 640/894;
  object-fit: contain;
  border-radius: 8px;
}
._tile_1t1gn_618 figcaption {
  font-size: 11px;
  margin-top: 4px;
  color: var(--clrTextTertiary);
}
._tile_1t1gn_618 ._actions_1t1gn_429 {
  justify-content: center;
  margin-top: 6px;
}

._notes_1t1gn_637 {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  background: var(--clrSecondary);
  padding: 20px;
  border-radius: 12px;
  line-height: 1.7;
}

._section_1t1gn_308 {
  margin: 28px 0;
  color: var(--clrTextPrimary);
}
._section_1t1gn_308 h2 {
  font-size: 20px;
  margin: 0;
}

._form_1t1gn_309 {
  display: grid;
  gap: 18px;
  color: var(--clrTextPrimary);
  padding: 4px 0 12px;
}
._form_1t1gn_309 label {
  display: grid;
  gap: 7px;
  font-size: 14px;
}
._form_1t1gn_309 textarea {
  resize: vertical;
  min-height: 110px;
}
._form_1t1gn_309 fieldset {
  border: 1px solid var(--clrTertiary);
  border-radius: 10px;
  padding: 12px;
}
._form_1t1gn_309 ._check_1t1gn_675 {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 0;
}
._form_1t1gn_309 ._check_1t1gn_675 input {
  accent-color: #7c3aed;
  width: 17px;
  height: 17px;
  flex-shrink: 0;
}

._notice_1t1gn_688 {
  padding: 14px;
  border-radius: 10px;
  background: var(--clrSecondary);
  font-size: 13px;
  line-height: 1.6;
}

._owned_1t1gn_696 {
  padding: 15px;
  background: var(--clrSecondary);
  border: 1px solid var(--clrTertiary);
  border-radius: 12px;
  display: flex;
  gap: 14px;
  align-items: center;
  margin-bottom: 10px;
}
._owned_1t1gn_696 > div:nth-child(2) {
  flex: 1;
}
._owned_1t1gn_696 strong {
  display: block;
  margin-bottom: 5px;
}

._legacy_1t1gn_714 > div {
  padding: 10px 0 0;
  padding-inline: 0;
  max-width: none;
  margin-inline: 0;
  min-height: 0;
}

._editorSearch_1t1gn_722 {
  max-height: 400px;
  overflow: auto;
}
._editorSearch_1t1gn_722 ._cardGrid_1t1gn_611 {
  grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
}

._exportPreview_1t1gn_730 {
  max-height: 60vh;
  overflow: auto;
  position: relative;
}

._exportScaleBox_1t1gn_736 {
  position: relative;
}

._exportScale_1t1gn_736 {
  transform-origin: top left;
  position: absolute;
  top: 0;
  left: 0;
}

@media (max-width: 900px) {
  ._grid_1t1gn_493 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 600px) {
  ._page_1t1gn_300 {
    padding: 82px 14px calc(105px + env(safe-area-inset-bottom));
  }
  ._head_1t1gn_346 {
    align-items: flex-start;
  }
  ._head_1t1gn_346 h1 {
    font-size: 27px;
  }
  ._grid_1t1gn_493 {
    grid-template-columns: 1fr;
  }
  ._detailHero_1t1gn_595 {
    gap: 15px;
  }
  ._detailHero_1t1gn_595 h1 {
    font-size: 25px;
  }
  ._cardGrid_1t1gn_611 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 9px;
  }
  ._owned_1t1gn_696 {
    flex-wrap: wrap;
  }
  ._owned_1t1gn_696 ._actions_1t1gn_429 {
    width: 100%;
  }
  ._filters_1t1gn_436 label:first-child {
    flex-basis: 100%;
  }
}
._tile_1t1gn_618 ._actions_1t1gn_429 {
  gap: 4px;
}
._tile_1t1gn_618 ._actions_1t1gn_429 ._button_1t1gn_394, ._tile_1t1gn_618 ._actions_1t1gn_429 ._primary_1t1gn_394 {
  min-height: 34px;
  padding: 6px;
}
._tile_1t1gn_618 ._actions_1t1gn_429 ._button_1t1gn_394 svg, ._tile_1t1gn_618 ._actions_1t1gn_429 ._primary_1t1gn_394 svg {
  width: 16px;
  height: 16px;
}

._colorPicker_1t1gn_797 {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 14px 0 20px;
}
._colorPicker_1t1gn_797 button {
  display: grid;
  justify-items: center;
  gap: 5px;
  padding: 5px;
  border: 0;
  background: transparent;
  color: var(--clrTextTertiary);
  cursor: pointer;
}
._colorPicker_1t1gn_797 button span {
  width: 29px;
  height: 29px;
  border-radius: 50%;
  border: 2px solid var(--clrTertiary);
  box-shadow: 0 0 0 3px transparent;
}
._colorPicker_1t1gn_797 button small {
  font-size: 11px;
}
._colorPicker_1t1gn_797 button[aria-pressed=true] {
  color: var(--clrTextPrimary);
}
._colorPicker_1t1gn_797 button[aria-pressed=true] span {
  box-shadow: 0 0 0 3px #8b5cf6;
  border-color: var(--clrPrimary);
}
._colorPicker_1t1gn_797 button[aria-pressed=true] small {
  font-weight: 750;
}

._page_1t1gn_300 {
  box-sizing: border-box;
  width: 100%;
  max-width: var(--site-max-width, 1440px);
  margin-inline: auto;
  padding-inline: var(--site-gutter, 20px);
}

._filterPanel_1t1gn_842 {
  position: relative;
  border: 1px solid var(--clrTertiary);
  border-radius: 14px;
  padding: 20px;
  background: var(--clrSecondary);
}
._filterPanel_1t1gn_842 ._input_1t1gn_458 {
  background: var(--clrPrimary);
}
._filterPanel_1t1gn_842 ._filters_1t1gn_436 {
  margin-bottom: 18px;
}

._searchField_1t1gn_856 {
  position: relative;
  display: flex;
  align-items: center;
}
._searchField_1t1gn_856 > svg {
  position: absolute;
  left: 14px;
  width: 19px;
  height: 19px;
  pointer-events: none;
}
._searchField_1t1gn_856 input {
  padding-left: 43px;
}

._selectField_1t1gn_872 {
  position: relative;
  display: flex;
  align-items: center;
}
._selectField_1t1gn_872 select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 42px;
}
._selectField_1t1gn_872 > svg {
  position: absolute;
  right: 14px;
  width: 16px;
  height: 16px;
  color: var(--clrTextSecondary);
  pointer-events: none;
}

._filterBottom_1t1gn_891 {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 14px;
  padding-top: 16px;
  border-top: 1px solid var(--clrTertiary);
}

._filterLabel_1t1gn_901 {
  font-size: 12px;
  font-weight: 650;
  margin-right: 8px;
  align-self: center;
}

._filterBottom_1t1gn_891 ._colorPicker_1t1gn_797 {
  margin: 0;
  align-items: center;
  gap: 10px;
}
._filterBottom_1t1gn_891 ._colorPicker_1t1gn_797 button {
  padding: 4px;
  min-width: 38px;
}
._filterBottom_1t1gn_891 ._colorPicker_1t1gn_797 button span {
  width: 24px;
  height: 24px;
}

._tagShortcuts_1t1gn_922 {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-left: auto;
  min-height: 48px;
}

._quickTags_1t1gn_931 {
  margin: 0;
  gap: 7px;
}

._quickTags_1t1gn_931 button,
._tagShortcuts_1t1gn_922 ._moreTagsButton_1t1gn_937 {
  height: 36px;
  min-height: 36px;
  padding: 7px 11px;
  font-size: 12px;
  font-weight: 400;
  line-height: 20px;
  color: var(--clrTextTertiary);
}

._quickTags_1t1gn_931 button[aria-pressed=true] {
  color: white;
}

._moreTagsButton_1t1gn_937 {
  position: relative;
  margin-left: 1px;
}
._moreTagsButton_1t1gn_937::before {
  content: "";
  position: absolute;
  left: -8px;
  height: 24px;
  width: 1px;
  background: var(--clrTertiary);
}

._moreTags_1t1gn_937 {
  flex: 1 0 100%;
  padding-top: 12px;
  border-top: 1px solid var(--clrTertiary);
}
._moreTags_1t1gn_937 ._chips_1t1gn_468 {
  margin: 0 0 12px;
}

._clearFilters_1t1gn_973 {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0;
  margin-top: 16px;
  border: 0;
  color: var(--clrTextSecondary);
  background: transparent;
  font-size: 12px;
  cursor: pointer;
}
._clearFilters_1t1gn_973 svg {
  width: 15px;
  height: 15px;
}
._clearFilters_1t1gn_973:hover {
  color: var(--clrTextPrimary);
}

._resultsHeading_1t1gn_993, ._sectionHeading_1t1gn_993 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 30px 0 18px;
}
._resultsHeading_1t1gn_993 h2, ._sectionHeading_1t1gn_993 h2 {
  font-size: 17px;
  font-weight: 650;
  letter-spacing: -0.02em;
}
._resultsHeading_1t1gn_993 > span, ._sectionHeading_1t1gn_993 > span {
  color: var(--clrTextTertiary);
  font-size: 12px;
}

._sectionHeading_1t1gn_993 {
  border-bottom: 1px solid var(--clrTertiary);
  padding-bottom: 14px;
}

._emptyState_1t1gn_1015 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  min-height: 340px;
  padding: 44px 24px;
  border: 1px solid var(--clrTertiary);
  border-radius: 16px;
  background: radial-gradient(ellipse at 50% 0%, rgba(139, 92, 246, 0.07), transparent 65%);
  text-align: center;
}
._emptyState_1t1gn_1015 h2 {
  margin: 0;
  font-size: 22px;
  letter-spacing: -0.04em;
  font-weight: 650;
}
._emptyState_1t1gn_1015 p {
  max-width: 440px;
  color: var(--clrTextTertiary);
  font-size: 14px;
  line-height: 1.7;
}
._emptyState_1t1gn_1015 > a, ._emptyState_1t1gn_1015 > button {
  margin-top: 8px;
}

._emptyArt_1t1gn_1044 {
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  color: #a78bfa;
  margin-bottom: 4px;
}
._emptyArt_1t1gn_1044 svg {
  width: 56px;
  height: 56px;
  stroke-width: 1;
}

._owned_1t1gn_696 {
  padding: 20px;
}
._owned_1t1gn_696 ._leader_1t1gn_516 {
  width: 58px;
  height: 81px;
  border-radius: 6px;
}
._owned_1t1gn_696 ._actions_1t1gn_429 {
  justify-content: flex-end;
  max-width: 56%;
}
._owned_1t1gn_696 ._button_1t1gn_394, ._owned_1t1gn_696 ._primary_1t1gn_394 {
  min-height: 36px;
  padding: 7px 10px;
  font-size: 12px;
}

@media (hover: hover) {
  ._button_1t1gn_394:hover:not(:disabled), ._primary_1t1gn_394:hover:not(:disabled) {
    border-color: var(--clrTextTertiary);
  }
  ._primary_1t1gn_394:hover:not(:disabled) {
    background: #6d28d9;
    border-color: #8b5cf6;
  }
}
@media (max-width: 600px) {
  ._head_1t1gn_346 {
    flex-wrap: wrap;
    gap: 18px;
    margin-bottom: 24px;
  }
  ._head_1t1gn_346 h1 {
    font-size: 36px;
  }
  ._head_1t1gn_346 p {
    font-size: 13px;
    line-height: 1.6;
  }
  ._tabs_1t1gn_366 {
    margin-bottom: 26px;
  }
  ._tabs_1t1gn_366 a {
    padding: 12px;
    font-size: 13px;
  }
  ._filterPanel_1t1gn_842 {
    padding: 14px;
  }
  ._filterPanel_1t1gn_842 ._filters_1t1gn_436 {
    gap: 14px;
  }
  ._filterPanel_1t1gn_842 ._filters_1t1gn_436 label {
    flex: 1 1 100%;
  }
  ._filterBottom_1t1gn_891 {
    gap: 16px;
  }
  ._filterBottom_1t1gn_891 ._colorPicker_1t1gn_797 {
    gap: 5px;
    width: 100%;
    justify-content: space-between;
  }
  ._filterLabel_1t1gn_901 {
    flex-basis: 100%;
    margin-bottom: 4px;
  }
  ._tagShortcuts_1t1gn_922 {
    margin-left: 0;
    gap: 10px;
  }
  ._quickTags_1t1gn_931 {
    gap: 5px;
  }
  ._quickTags_1t1gn_931 button,
  ._tagShortcuts_1t1gn_922 ._moreTagsButton_1t1gn_937 {
    padding: 7px 9px;
  }
  ._emptyState_1t1gn_1015 {
    min-height: 300px;
    padding: 30px 18px;
  }
  ._emptyState_1t1gn_1015 h2 {
    font-size: 20px;
  }
  ._detailHero_1t1gn_595 {
    padding: 14px;
    align-items: flex-start;
  }
  ._owned_1t1gn_696 ._actions_1t1gn_429 {
    max-width: none;
    justify-content: flex-start;
  }
}
._shareDrawer_1t1gn_1153 {
  max-width: 560px;
}
@media (min-width: 841px) {
  ._shareDrawer_1t1gn_1153 {
    max-width: 1080px;
    max-height: calc(100dvh - 48px);
  }
  ._shareDrawer_1t1gn_1153._shareConfirmation_1t1gn_1161 {
    max-width: 500px;
  }
}

._shareOptions_1t1gn_1166 {
  display: grid;
  gap: 18px;
}

@media (min-width: 841px) {
  ._shareForm_1t1gn_1172 {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    align-items: start;
    gap: 28px;
  }
  ._shareForm_1t1gn_1172 ._sharePreview_1t1gn_1177 {
    position: sticky;
    top: 0;
  }
  ._shareForm_1t1gn_1172 ._shareOptions_1t1gn_1166 {
    border-left: 1px solid var(--clrTertiary);
    padding-left: 28px;
  }
}

._shareBody_1t1gn_1187,
._shareLoading_1t1gn_1188 {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
}

._shareBody_1t1gn_1187 ._form_1t1gn_309 button:focus-visible, ._shareBody_1t1gn_1187 ._form_1t1gn_309 a:focus-visible, ._shareBody_1t1gn_1187 ._form_1t1gn_309 input:focus-visible, ._shareBody_1t1gn_1187 ._form_1t1gn_309 select:focus-visible, ._shareBody_1t1gn_1187 ._form_1t1gn_309 textarea:focus-visible {
  outline-offset: -2px;
}

._sharePreview_1t1gn_1177 {
  padding: 12px;
  border: 1px solid var(--clrTertiary);
  border-radius: 12px;
  background: var(--clrSecondary);
}

._shareLeader_1t1gn_1205 {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}
._shareLeader_1t1gn_1205 > :first-child {
  flex-shrink: 0;
}
._shareLeader_1t1gn_1205 > div:last-child {
  display: grid;
  gap: 5px;
}
._shareLeader_1t1gn_1205 strong {
  font-size: 17px;
  overflow-wrap: anywhere;
}
._shareLeader_1t1gn_1205 span {
  font-size: 12px;
  color: var(--clrTextTertiary);
}

._shareCardGrid_1t1gn_1227 {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}
._shareCardGrid_1t1gn_1227 figure {
  position: relative;
  margin: 0;
  aspect-ratio: 5/7;
  border-radius: 5px;
  background: var(--clrPrimary);
}
._shareCardGrid_1t1gn_1227 figure img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: inherit;
}
._shareCardGrid_1t1gn_1227 figcaption {
  position: absolute;
  bottom: 3px;
  right: 3px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 5px;
  background: rgba(9, 14, 18, 0.94);
  color: #fff;
  padding: 2px 5px;
  font-size: 12px;
  font-weight: 700;
  line-height: 16px;
}

._shareMissingArt_1t1gn_1260 {
  display: block;
  padding: 5px;
  font-size: 10px;
  overflow-wrap: anywhere;
}

._form_1t1gn_309 ._shareAudience_1t1gn_1267 {
  margin: 0;
  padding: 12px;
  transition: border-color 0.15s, background-color 0.15s;
}
._form_1t1gn_309 ._shareAudience_1t1gn_1267 legend {
  font-size: 14px;
  padding-inline: 4px;
}
._form_1t1gn_309 ._shareAudience_1t1gn_1267 p {
  margin: 10px 0 0;
  font-size: 12px;
}
._form_1t1gn_309 ._shareAudience_1t1gn_1267 > button {
  margin-top: 12px;
}
._form_1t1gn_309 ._shareAudience_1t1gn_1267._shareAudienceError_1t1gn_1283 {
  border-color: #ef4444;
  background: rgba(239, 68, 68, 0.06);
  outline: none;
}
._form_1t1gn_309 ._shareAudience_1t1gn_1267._shareAudienceError_1t1gn_1283 ._error_1t1gn_569 {
  color: #ef4444;
}

._shareAudienceOptions_1t1gn_1292 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
._shareAudienceOptions_1t1gn_1292 label {
  position: relative;
  cursor: pointer;
}
._shareAudienceOptions_1t1gn_1292 input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}
._shareAudienceOptions_1t1gn_1292 span {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 44px;
  padding: 8px 4px;
  border: 1px solid var(--clrTertiary);
  border-radius: 8px;
  background: var(--clrSecondary);
  color: var(--clrTextTertiary);
  font-size: 13px;
}
._shareAudienceOptions_1t1gn_1292 span svg {
  width: 17px;
  height: 17px;
  flex-shrink: 0;
}
._shareAudienceOptions_1t1gn_1292 input:checked + span {
  color: var(--clrTextPrimary);
  background: rgba(124, 58, 237, 0.18);
  border-color: #8b5cf6;
  box-shadow: inset 0 0 0 1px #8b5cf6;
}
._shareAudienceOptions_1t1gn_1292 input:focus-visible + span {
  outline: 2px solid #8b5cf6;
  outline-offset: 3px;
}
._shareAudienceOptions_1t1gn_1292 input:disabled + span {
  opacity: 0.5;
  cursor: wait;
}

._shareHint_1t1gn_1340 {
  margin: 0;
  font-size: 12px;
  color: var(--clrTextTertiary);
  line-height: 1.5;
}

._shareActions_1t1gn_1347 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
._shareActions_1t1gn_1347 > button {
  height: 44px;
  min-height: 44px;
  padding: 0 12px;
  line-height: 20px;
}

@media (max-width: 400px) {
  ._sharePreview_1t1gn_1177 {
    padding: 9px;
  }
  ._shareCardGrid_1t1gn_1227 {
    gap: 5px;
  }
  ._shareAudienceOptions_1t1gn_1292 {
    gap: 5px;
  }
  ._shareAudienceOptions_1t1gn_1292 span {
    gap: 4px;
    font-size: 12px;
  }
}
._communityHead_1t1gn_1374 {
  padding: 10px 10px 0;
  align-items: center;
}
._communityHead_1t1gn_1374 > div:nth-child(2) {
  flex: 1;
}

._communityPortrait_1t1gn_1382 {
  flex-shrink: 0;
}

._communityOpen_1t1gn_1386 {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  align-self: flex-start;
  color: var(--clrTextTertiary);
  margin-top: 3px;
}

._communityPreview_1t1gn_1395 {
  margin: 12px 10px;
  gap: 4px;
}
._communityPreview_1t1gn_1395 > div {
  aspect-ratio: 5/7;
}
._communityPreview_1t1gn_1395 figure {
  background: transparent;
}
._communityPreview_1t1gn_1395 figcaption {
  font-size: 10px;
  padding: 1px 4px;
  line-height: 14px;
  bottom: 2px;
  right: 2px;
}

._communityTags_1t1gn_1413 {
  padding: 0 10px;
  margin: 0 0 12px;
}

._detailTopbar_1t1gn_1418 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

._detailVotes_1t1gn_1425 {
  position: relative;
  display: flex;
  gap: 8px;
}

._voteTooltip_1t1gn_1431 {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 2;
  width: max-content;
  max-width: min(260px, 100vw - 48px);
  padding: 9px 12px;
  border-radius: 7px;
  background: var(--clrTextPrimary);
  color: var(--clrPrimary);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.5;
  pointer-events: none;
}

._detailIdentity_1t1gn_1449 {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  align-items: center;
  column-gap: 18px;
  row-gap: 8px;
}

._detailPortrait_1t1gn_1457 {
  flex-shrink: 0;
}

._detailIdentity_1t1gn_1449 ._detailPortrait_1t1gn_1457 {
  width: 88px;
  height: 88px;
  grid-row: 1/3;
}

._detailHeading_1t1gn_1467 {
  min-width: 0;
  align-self: end;
}

._detailMetadata_1t1gn_1472 {
  grid-column: 2;
  align-self: start;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 8px;
  margin: 0;
  line-height: 1.5;
}
._detailMetadata_1t1gn_1472 > span {
  overflow-wrap: anywhere;
}
._detailMetadata_1t1gn_1472 > span + span::before {
  content: "·";
  margin-right: 8px;
}

._detailTitleRow_1t1gn_1489 {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px 18px;
}

._detailTags_1t1gn_1496 {
  margin: 0;
}

._detailHeaderFooter_1t1gn_1500 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  border-top: 1px solid var(--clrTertiary);
  padding-top: 12px;
  margin-top: 12px;
}

._detailAttribution_1t1gn_1511 {
  display: grid;
  gap: 6px;
}

._detailAuthorLink_1t1gn_1516 {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--clrTextPrimary);
  text-decoration: none;
}
._detailAuthorLink_1t1gn_1516 > span {
  display: grid;
  gap: 2px;
}
._detailAuthorLink_1t1gn_1516 small {
  font-size: 11px;
  color: var(--clrTextTertiary);
}
._detailAuthorLink_1t1gn_1516 strong {
  font-size: 14px;
  font-weight: 600;
}

._detailDates_1t1gn_1536 {
  margin: 0;
  padding-left: 50px;
  font-size: 11px;
  color: var(--clrTextTertiary);
}

._detailHeaderActions_1t1gn_1543 {
  justify-content: flex-end;
}

._cardGrid_1t1gn_611._detailCardGrid_1t1gn_1547 {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 20px;
}
._cardGrid_1t1gn_611._detailCardGrid_1t1gn_1547 figcaption {
  text-align: center;
  font-size: 11px;
}
@media (max-width: 1100px) {
  ._cardGrid_1t1gn_611._detailCardGrid_1t1gn_1547 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
  }
}
@media (max-width: 640px) {
  ._cardGrid_1t1gn_611._detailCardGrid_1t1gn_1547 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
  }
}

._detailCardArt_1t1gn_1568 {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  cursor: zoom-in;
  position: relative;
  aspect-ratio: 640/894;
}
._detailCardArt_1t1gn_1568 img {
  display: block;
}

._detailQuantity_1t1gn_1583 {
  position: absolute;
  right: 6px;
  bottom: 22%;
  pointer-events: none;
}

@media (max-width: 640px) {
  ._detailIdentity_1t1gn_1449 {
    grid-template-columns: 56px minmax(0, 1fr);
    gap: 12px;
    align-items: start;
  }
  ._detailHeading_1t1gn_1467 {
    align-self: center;
  }
  ._detailMetadata_1t1gn_1472 {
    grid-column: 1/-1;
    font-size: 12px;
  }
  ._detailTitleRow_1t1gn_1489 {
    gap: 10px;
  }
  ._detailHeaderFooter_1t1gn_1500 {
    margin-top: 12px;
    padding-top: 12px;
  }
  ._detailIdentity_1t1gn_1449 ._detailPortrait_1t1gn_1457 {
    width: 56px;
    height: 56px;
    grid-row: 1;
  }
  ._detailQuantity_1t1gn_1583 {
    right: 4px;
  }
}
._feedbackButton_1t1gn_1619 {
  display: inline-grid;
  transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease;
}
._feedbackButton_1t1gn_1619 > span {
  grid-area: 1/1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
}
._feedbackButton_1t1gn_1619[data-success=true] {
  background: rgba(16, 185, 129, 0.12);
  border-color: rgba(16, 185, 129, 0.45);
  color: #34d399;
  opacity: 1;
  cursor: default;
}
._feedbackButton_1t1gn_1619[data-success=true] ._feedbackDefault_1t1gn_1637 {
  visibility: hidden;
}

._feedbackSuccess_1t1gn_1641 {
  animation: _actionConfirmed_1t1gn_1 220ms ease-out both;
}
._feedbackSuccess_1t1gn_1641 svg {
  stroke-width: 2.5;
}

@keyframes _actionConfirmed_1t1gn_1 {
  from {
    opacity: 0;
    transform: translateY(3px) scale(0.94);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
@media (prefers-reduced-motion: reduce) {
  ._feedbackButton_1t1gn_1619 {
    transition: none;
  }
  ._feedbackSuccess_1t1gn_1641 {
    animation: none;
  }
}
._detailStickyBar_1t1gn_1666 {
  box-sizing: border-box;
  width: 100%;
  max-width: var(--site-max-width, 1440px);
  margin-inline: auto;
  padding-inline: var(--site-gutter, 20px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 58px;
  padding-block: 7px;
  animation: _actionConfirmed_1t1gn_1 180ms ease-out both;
}
._detailStickyBar_1t1gn_1666 ._button_1t1gn_394, ._detailStickyBar_1t1gn_1666 ._primary_1t1gn_394 {
  min-height: 42px;
  font: inherit;
  font-size: 13px;
  padding: 8px 10px;
}
._detailStickyBar_1t1gn_1666 ._detailVotes_1t1gn_1425 {
  flex-shrink: 0;
}

._detailStickyCreator_1t1gn_1690 {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  text-decoration: none;
  color: var(--clrTextPrimary);
  font-size: 14px;
}
._detailStickyCreator_1t1gn_1690 > span:first-child {
  flex-shrink: 0;
  color: var(--clrTextTertiary);
  font-size: 12px;
}
._detailStickyCreator_1t1gn_1690 strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

._detailPurchaseCard_1t1gn_1710 {
  position: relative;
  container-type: inline-size;
}

@media (prefers-reduced-motion: reduce) {
  ._detailStickyBar_1t1gn_1666 {
    animation: none;
  }
}
@media (max-width: 840px), (hover: none) {
  ._detailPurchaseCard_1t1gn_1710 > a {
    display: none;
  }
}
._detailHeaderActions_1t1gn_1543 {
  gap: 4px;
}
._detailHeaderActions_1t1gn_1543 ._button_1t1gn_394, ._detailHeaderActions_1t1gn_1543 ._primary_1t1gn_394 {
  min-height: 36px;
  padding: 7px 9px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
}
._detailHeaderActions_1t1gn_1543 ._button_1t1gn_394 svg, ._detailHeaderActions_1t1gn_1543 ._primary_1t1gn_394 svg {
  width: 16px;
  height: 16px;
}
._detailHeaderActions_1t1gn_1543 ._button_1t1gn_394:not([data-success]), ._detailHeaderActions_1t1gn_1543 ._primary_1t1gn_394:not([data-success]) {
  border-color: transparent;
  background: transparent;
  color: var(--clrTextSecondary);
}
._detailHeaderActions_1t1gn_1543 ._button_1t1gn_394:not([data-success]):hover:not(:disabled), ._detailHeaderActions_1t1gn_1543 ._primary_1t1gn_394:not([data-success]):hover:not(:disabled) {
  background: var(--clrTertiary);
  color: var(--clrTextPrimary);
}

._detailHero_1t1gn_595 {
  position: relative;
}

._detailHeading_1t1gn_1467 {
  padding-right: 40px;
}

._detailCopyLink_1t1gn_1757 {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 36px;
  min-height: 36px;
  padding: 8px;
  border-color: transparent;
  background: transparent;
  color: var(--clrTextTertiary);
}
._detailCopyLink_1t1gn_1757:hover {
  color: var(--clrTextPrimary);
  background: var(--clrTertiary);
}
._detailCopyLink_1t1gn_1757[data-success] {
  color: #34d399;
  opacity: 1;
  cursor: default;
}

@media (max-width: 640px) {
  ._detailHero_1t1gn_595 {
    padding: 16px;
  }
  ._detailHero_1t1gn_595 h1 {
    font-size: 24px;
    line-height: 1.2;
  }
  ._detailTitleRow_1t1gn_1489 {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  ._detailTags_1t1gn_1496 {
    gap: 6px;
  }
  ._detailTags_1t1gn_1496 > span {
    padding: 4px 8px;
    font-size: 11px;
  }
  ._detailCopyLink_1t1gn_1757 {
    top: 10px;
    right: 10px;
    width: 44px;
    min-height: 44px;
  }
  ._detailAttribution_1t1gn_1511 {
    width: 100%;
  }
  ._detailAuthorLink_1t1gn_1516 strong {
    overflow-wrap: anywhere;
  }
  ._detailDates_1t1gn_1536 {
    line-height: 1.6;
  }
  ._detailHeaderActions_1t1gn_1543 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    width: 100%;
    margin-top: 2px;
  }
  ._detailHeaderActions_1t1gn_1543 ._button_1t1gn_394, ._detailHeaderActions_1t1gn_1543 ._primary_1t1gn_394 {
    min-height: 44px;
    padding: 10px 6px;
    border-radius: 9px;
    font-size: 12px;
  }
  ._detailHeaderActions_1t1gn_1543 ._button_1t1gn_394 svg, ._detailHeaderActions_1t1gn_1543 ._primary_1t1gn_394 svg {
    flex-shrink: 0;
  }
  ._detailHeaderActions_1t1gn_1543 ._button_1t1gn_394:not([data-success]), ._detailHeaderActions_1t1gn_1543 ._primary_1t1gn_394:not([data-success]) {
    border-color: var(--clrTertiary);
    background: var(--clrPrimary);
    color: var(--clrTextPrimary);
  }
  ._detailHeaderActions_1t1gn_1543 ._detailSecondaryAction_1t1gn_1834 {
    grid-column: 1/-1;
  }
  ._detailHeaderActions_1t1gn_1543 ._detailSecondaryAction_1t1gn_1834:not([data-success]) {
    background: transparent;
    color: var(--clrTextSecondary);
  }
}
._detailDecklistHeading_1t1gn_1842 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
._detailDecklistHeading_1t1gn_1842 h2 {
  margin: 0;
}

._buyDeckAction_1t1gn_1853 {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}
._buyDeckAction_1t1gn_1853 small {
  color: var(--clrTextTertiary);
  font-size: 11px;
}

._buyDeckButton_1t1gn_1864 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 38px;
  padding: 8px 12px;
  border: 1px solid #ddd;
  border-radius: 6px;
  background: #fff;
  color: #111;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
}
._buyDeckButton_1t1gn_1864 img {
  width: 32px;
  height: 15px;
  object-fit: contain;
}
._buyDeckButton_1t1gn_1864:hover {
  background: #f2f2f2;
  color: #111;
}
._buyDeckButton_1t1gn_1864:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

@media (max-width: 640px) {
  ._detailDecklistHeading_1t1gn_1842 {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  ._detailDecklistHeading_1t1gn_1842 h2 {
    font-size: 20px;
    line-height: 1.3;
  }
  ._buyDeckAction_1t1gn_1853 {
    align-items: stretch;
    gap: 6px;
  }
  ._buyDeckAction_1t1gn_1853 small {
    font-size: 11px;
    line-height: 1.4;
    text-align: center;
  }
  ._buyDeckButton_1t1gn_1864 {
    width: 100%;
    min-height: 44px;
    font-size: 13px;
    line-height: 1.4;
  }
  ._buyDeckButton_1t1gn_1864 img {
    width: 40px;
    height: 18px;
    flex-shrink: 0;
  }
}._link_72zu1_1 {
  position: absolute;
  z-index: 3;
  left: 4px;
  right: calc(var(--stack-off, 0px) * 3 + 4px);
  bottom: calc(var(--stack-off, 0px) * 3 + 15%);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-height: 32px;
  padding: 5px;
  border: 1px solid #d9d9d9;
  border-radius: 5px;
  background: #fff;
  color: #111;
  font-size: clamp(9px, 0.75vw, 12px);
  font-weight: 700;
  line-height: 1.15;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity 130ms ease, box-shadow 130ms ease;
}
[data-tcgplayer-card="deck"] ._link_72zu1_1 {
  top: calc(74% - var(--stack-off, 0px) * 3 + 4px);
  bottom: auto;
}
[data-tcgplayer-card="public-deck"] ._link_72zu1_1 {
  top: calc(78% + 4px);
  bottom: auto;
}
[data-tcgplayer-card]:hover ._link_72zu1_1, [data-tcgplayer-card]:focus-within ._link_72zu1_1 {
  opacity: 1;
  pointer-events: auto;
}
._link_72zu1_1:hover {
  color: #000;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}
._link_72zu1_1:focus-visible {
  outline: 2px solid #1267e9;
  outline-offset: 2px;
}
._link_72zu1_1 img._logo_72zu1_48 {
  flex: 0 0 auto;
  width: 29px;
  height: 13px;
  aspect-ratio: auto;
  object-fit: contain;
  border: 0;
  border-radius: 0;
}
@container (max-width: 140px) {
  [data-tcgplayer-card="tournament"] ._link_72zu1_1, [data-tcgplayer-card="public-deck"] ._link_72zu1_1 {
    flex-direction: column;
    gap: 2px;
    font-size: 9px;
    padding: 4px 2px;
  }
  [data-tcgplayer-card="tournament"] ._link_72zu1_1 img._logo_72zu1_48, [data-tcgplayer-card="public-deck"] ._link_72zu1_1 img._logo_72zu1_48 {
    width: 22px;
    height: 10px;
  }
  [data-tcgplayer-card="tournament"] ._link_72zu1_1 span, [data-tcgplayer-card="public-deck"] ._link_72zu1_1 span {
    max-width: 100%;
    overflow-wrap: anywhere;
  }
}
@media (hover: none) {
  ._link_72zu1_1 {
    position: static;
    flex-direction: column;
    opacity: 1;
    pointer-events: auto;
    min-height: 44px;
    padding: 3px 2px;
    margin-top: 4px;
    font-size: 9px;
    gap: 3px;
  }
  ._link_72zu1_1 img._logo_72zu1_48 {
    width: 22px;
    height: 10px;
  }
  ._link_72zu1_1 span {
    max-width: 100%;
    overflow-wrap: anywhere;
  }
}
@media (prefers-reduced-motion: reduce) {
  ._link_72zu1_1 {
    transition: none;
  }
}

._link_72zu1_1._inline_72zu1_100 {
  position: static;
  display: inline-flex;
  flex-direction: row;
  opacity: 1;
  pointer-events: auto;
  min-height: 44px;
  margin: 0;
  padding: 10px 16px;
  gap: 8px;
  font-size: 14px;
}
._link_72zu1_1._inline_72zu1_100 img._logo_72zu1_48 {
  width: 34px;
  height: 16px;
}html {
  color-scheme: dark;
}

html:has(body._themeLight_163nl_5),
html:has(body._themePastelLight_163nl_6) {
  color-scheme: light;
}

:root {
  --clrPrimary: #F4F4F5;
  --clrPrimary30: rgba(244, 244, 245, 0.3);
  --clrSecondary: #FEFEFE;
  --clrTertiary: #E4E4E7;
  --clrPrimaryReverse: #101418;
  --clrSecondaryReverse: #0A0F14;
  --clrTertiaryReverse: #212327;
  --clrTextPrimary: #101418;
  --clrTextSecondary: #2E3337;
  --clrTextTertiary: #7C7C7C;
  --clrTextPrimaryReverse: #F4F4F5;
  --clrTextSecondaryReverse: #CDCDCD;
  --clrTextTertiaryReverse: #8A8A8A;
  --clrError-100: #641f1f;
  --clrError-50: #c84d4d;
  --clrSuccess-100: #2d692d;
  --clrSuccess-50: #3EA03E;
  --clrSuccessOnTint: #0d260d;
  --clrErrorOnTint: #2e0a0a;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgb(50, 126, 75, 0.1) 30%,
          rgb(94, 178, 122, 0.36) 60%,
          rgb(144, 215, 168) 100%);
  --clrNavBackground: rgba(244, 244, 245, 0.15);
  --clrNavItemActive: rgba(211, 211, 211, 0.4);
  --clrNavItemHover: rgba(0, 0, 0, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #F4F4F5;
  --clrGlassBackground: rgba(255, 255, 255, 0.5);
  --clrGlassBackgroundStrong: rgba(255, 255, 255, 0.3);
  --clrGlassBorder: rgba(0, 0, 0, 0.1);
  --snackbarDefaultBg: #F1ECE9;
  --snackbarDefaultText: #5D605C;
  --snackbarDefaultBorder: #5D605C;
  --snackbarDefaultIcon: #5D605C;
  --snackbarSuccessBg: #E0F1D9;
  --snackbarSuccessText: #358935;
  --snackbarSuccessBorder: #358935;
  --snackbarSuccessIcon: #358935;
  --snackbarErrorBg: #F9E1DC;
  --snackbarErrorText: #C80D12;
  --snackbarErrorBorder: #C80D12;
  --snackbarErrorIcon: #C80D12;
}

._themeLight_163nl_5 {
  --clrPrimary: #F4F4F5;
  --clrPrimary30: rgba(244, 244, 245, 0.3);
  --clrSecondary: #FEFEFE;
  --clrTertiary: #E4E4E7;
  --clrPrimaryReverse: #101418;
  --clrSecondaryReverse: #0A0F14;
  --clrTertiaryReverse: #212327;
  --clrTextPrimary: #101418;
  --clrTextSecondary: #2E3337;
  --clrTextTertiary: #7C7C7C;
  --clrTextPrimaryReverse: #F4F4F5;
  --clrTextSecondaryReverse: #CDCDCD;
  --clrTextTertiaryReverse: #8A8A8A;
  --clrError-100: #c03b3b;
  --clrError-50: #f6c5c5;
  --clrSuccess-100: #30d330;
  --clrSuccess-50: #bbffbb;
  --clrSuccessOnTint: #1f4f1f;
  --clrErrorOnTint: #7a1f1f;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgb(50, 126, 75, 0.1) 30%,
          rgb(94, 178, 122, 0.36) 60%,
          rgb(144, 215, 168) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(175, 49, 49, 0.1) 30%,
          rgba(238, 70, 70, 0.36) 60%,
          rgb(255, 173, 173) 100%);
  --clrNavBackground: rgba(244, 244, 245, 0.15);
  --clrNavItemActive: rgba(211, 211, 211, 0.4);
  --clrNavItemHover: rgba(0, 0, 0, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0000c1;
  --clrGlassBackground: rgba(255, 255, 255, 0.5);
  --clrGlassBackgroundStrong: rgba(255, 255, 255, 0.5);
  --clrGlassBorder: rgba(0, 0, 0, 0.1);
  --snackbarDefaultBg: #F1ECE9;
  --snackbarDefaultText: #5D605C;
  --snackbarDefaultBorder: #5D605C;
  --snackbarDefaultIcon: #5D605C;
  --snackbarSuccessBg: #E0F1D9;
  --snackbarSuccessText: #358935;
  --snackbarSuccessBorder: #358935;
  --snackbarSuccessIcon: #358935;
  --snackbarErrorBg: #F9E1DC;
  --snackbarErrorText: #C80D12;
  --snackbarErrorBorder: #C80D12;
  --snackbarErrorIcon: #C80D12;
}

._themeDark_163nl_131 {
  --clrPrimary: #0F1418;
  --clrPrimary30: rgba(15, 20, 25, 0.3);
  --clrSecondary: #0A0F14;
  --clrTertiary: #212327;
  --clrPrimaryReverse: #F4F4F5;
  --clrSecondaryReverse: #FEFEFE;
  --clrTertiaryReverse: #E4E4E7;
  --clrTextPrimary: #F4F4F5;
  --clrTextSecondary: #CDCDCD;
  --clrTextTertiary: #8A8A8A;
  --clrTextPrimaryReverse: #101418;
  --clrTextSecondaryReverse: #2E3337;
  --clrTextTertiaryReverse: #7C7C7C;
  --clrError-100: #c84d4d;
  --clrError-50: #641f1f;
  --clrSuccess-100: #3EA03E;
  --clrSuccess-50: #2d692d;
  --clrSuccessOnTint: #d6ffd6;
  --clrErrorOnTint: #ffd6d6;
  --clrWarning-100: #E88434;
  --clrWarning-50: #C49168;
  --clrAccent-100: #FFFFFF;
  --clrAccent-80: rgba(255, 255, 255, 0.8);
  --clrAccent-60: rgba(255, 255, 255, 0.6);
  --clrAccent-50: rgba(255, 255, 255, 0.5);
  --clrAccent-40: rgba(255, 255, 255, 0.4);
  --clrAccent-30: rgba(255, 255, 255, 0.3);
  --clrAccent-20: rgba(255, 255, 255, 0.2);
  --clrAccent-10: rgba(255, 255, 255, 0.1);
  --clrGradient: linear-gradient(90deg, #262a2e 10%, var(--clrPrimary) 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(50, 126, 75, 0.15) 30%,
          rgba(50, 126, 75, 0.3) 60%,
          rgba(50, 126, 75, 0.5) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(167, 44, 44, 0) 0%,
          rgba(167, 44, 44, 0.15) 30%,
          rgba(167, 44, 44, 0.3) 60%,
          rgba(167, 44, 44, 0.5) 100%);
  --clrNavBackground: rgba(0, 0, 0, 0.15);
  --clrNavItemActive: rgba(24, 24, 24, 0.49);
  --clrNavItemHover: rgba(255, 255, 255, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0F1418;
  --clrGlassBackground: rgba(15, 20, 24, 0.5);
  --clrGlassBackgroundStrong: rgba(15, 20, 24, 0.6);
  --clrGlassBorder: rgba(255, 255, 255, 0.1);
  --snackbarDefaultBg: #414141;
  --snackbarDefaultText: #BABABA;
  --snackbarDefaultBorder: #BABABA;
  --snackbarDefaultIcon: #BABABA;
  --snackbarSuccessBg: #145E18;
  --snackbarSuccessText: #8FE094;
  --snackbarSuccessBorder: #8FE094;
  --snackbarSuccessIcon: #8FE094;
  --snackbarErrorBg: #910C09;
  --snackbarErrorText: #FE9E9D;
  --snackbarErrorBorder: #FE9E9D;
  --snackbarErrorIcon: #FE9E9D;
}

/* 

Note: 
    If you want something done quick, ask AI to buuild your color themes.
    If you want to do it right and tidy though, do it manually. 

    - Theo

*/
:root {
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --font-accent: "Jaro", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}

html,
body {
  font-family: var(--font-sans);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

._publisher_163nl_216 {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  white-space: nowrap;
  color: var(--clrTextSecondary);
}
._publisher_163nl_216 img {
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  object-fit: contain;
}
._publisher_163nl_216 strong {
  color: var(--clrTextPrimary);
  font-weight: 600;
}

@media (max-width: 400px) {
  ._compact_163nl_236 {
    flex-wrap: wrap;
    gap: 2px 6px;
  }
  ._compact_163nl_236 > span:first-child {
    flex-basis: 100%;
    font-size: 10px;
  }
}
._tournament_163nl_245 {
  display: block;
  min-width: 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--clrTextSecondary);
  overflow-wrap: anywhere;
}
._tournament_163nl_245 strong {
  color: var(--clrTextPrimary);
  font-weight: 500;
}
._tournament_163nl_245 a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}

._feedCredit_163nl_263 {
  padding: 0 14px;
}

._date_163nl_267 {
  margin: 0;
  font-size: 11px;
  color: var(--clrTextTertiary);
}

._exportCredit_163nl_273 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  max-width: 650px;
  text-align: center;
}
html {
  color-scheme: dark;
}

html:has(body._themeLight_n92lc_6),
html:has(body._themePastelLight_n92lc_7) {
  color-scheme: light;
}

:root {
  --clrPrimary: #F4F4F5;
  --clrPrimary30: rgba(244, 244, 245, 0.3);
  --clrSecondary: #FEFEFE;
  --clrTertiary: #E4E4E7;
  --clrPrimaryReverse: #101418;
  --clrSecondaryReverse: #0A0F14;
  --clrTertiaryReverse: #212327;
  --clrTextPrimary: #101418;
  --clrTextSecondary: #2E3337;
  --clrTextTertiary: #7C7C7C;
  --clrTextPrimaryReverse: #F4F4F5;
  --clrTextSecondaryReverse: #CDCDCD;
  --clrTextTertiaryReverse: #8A8A8A;
  --clrError-100: #641f1f;
  --clrError-50: #c84d4d;
  --clrSuccess-100: #2d692d;
  --clrSuccess-50: #3EA03E;
  --clrSuccessOnTint: #0d260d;
  --clrErrorOnTint: #2e0a0a;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgb(50, 126, 75, 0.1) 30%,
          rgb(94, 178, 122, 0.36) 60%,
          rgb(144, 215, 168) 100%);
  --clrNavBackground: rgba(244, 244, 245, 0.15);
  --clrNavItemActive: rgba(211, 211, 211, 0.4);
  --clrNavItemHover: rgba(0, 0, 0, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #F4F4F5;
  --clrGlassBackground: rgba(255, 255, 255, 0.5);
  --clrGlassBackgroundStrong: rgba(255, 255, 255, 0.3);
  --clrGlassBorder: rgba(0, 0, 0, 0.1);
  --snackbarDefaultBg: #F1ECE9;
  --snackbarDefaultText: #5D605C;
  --snackbarDefaultBorder: #5D605C;
  --snackbarDefaultIcon: #5D605C;
  --snackbarSuccessBg: #E0F1D9;
  --snackbarSuccessText: #358935;
  --snackbarSuccessBorder: #358935;
  --snackbarSuccessIcon: #358935;
  --snackbarErrorBg: #F9E1DC;
  --snackbarErrorText: #C80D12;
  --snackbarErrorBorder: #C80D12;
  --snackbarErrorIcon: #C80D12;
}

._themeLight_n92lc_6 {
  --clrPrimary: #F4F4F5;
  --clrPrimary30: rgba(244, 244, 245, 0.3);
  --clrSecondary: #FEFEFE;
  --clrTertiary: #E4E4E7;
  --clrPrimaryReverse: #101418;
  --clrSecondaryReverse: #0A0F14;
  --clrTertiaryReverse: #212327;
  --clrTextPrimary: #101418;
  --clrTextSecondary: #2E3337;
  --clrTextTertiary: #7C7C7C;
  --clrTextPrimaryReverse: #F4F4F5;
  --clrTextSecondaryReverse: #CDCDCD;
  --clrTextTertiaryReverse: #8A8A8A;
  --clrError-100: #c03b3b;
  --clrError-50: #f6c5c5;
  --clrSuccess-100: #30d330;
  --clrSuccess-50: #bbffbb;
  --clrSuccessOnTint: #1f4f1f;
  --clrErrorOnTint: #7a1f1f;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgb(50, 126, 75, 0.1) 30%,
          rgb(94, 178, 122, 0.36) 60%,
          rgb(144, 215, 168) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(175, 49, 49, 0.1) 30%,
          rgba(238, 70, 70, 0.36) 60%,
          rgb(255, 173, 173) 100%);
  --clrNavBackground: rgba(244, 244, 245, 0.15);
  --clrNavItemActive: rgba(211, 211, 211, 0.4);
  --clrNavItemHover: rgba(0, 0, 0, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0000c1;
  --clrGlassBackground: rgba(255, 255, 255, 0.5);
  --clrGlassBackgroundStrong: rgba(255, 255, 255, 0.5);
  --clrGlassBorder: rgba(0, 0, 0, 0.1);
  --snackbarDefaultBg: #F1ECE9;
  --snackbarDefaultText: #5D605C;
  --snackbarDefaultBorder: #5D605C;
  --snackbarDefaultIcon: #5D605C;
  --snackbarSuccessBg: #E0F1D9;
  --snackbarSuccessText: #358935;
  --snackbarSuccessBorder: #358935;
  --snackbarSuccessIcon: #358935;
  --snackbarErrorBg: #F9E1DC;
  --snackbarErrorText: #C80D12;
  --snackbarErrorBorder: #C80D12;
  --snackbarErrorIcon: #C80D12;
}

._themeDark_n92lc_132 {
  --clrPrimary: #0F1418;
  --clrPrimary30: rgba(15, 20, 25, 0.3);
  --clrSecondary: #0A0F14;
  --clrTertiary: #212327;
  --clrPrimaryReverse: #F4F4F5;
  --clrSecondaryReverse: #FEFEFE;
  --clrTertiaryReverse: #E4E4E7;
  --clrTextPrimary: #F4F4F5;
  --clrTextSecondary: #CDCDCD;
  --clrTextTertiary: #8A8A8A;
  --clrTextPrimaryReverse: #101418;
  --clrTextSecondaryReverse: #2E3337;
  --clrTextTertiaryReverse: #7C7C7C;
  --clrError-100: #c84d4d;
  --clrError-50: #641f1f;
  --clrSuccess-100: #3EA03E;
  --clrSuccess-50: #2d692d;
  --clrSuccessOnTint: #d6ffd6;
  --clrErrorOnTint: #ffd6d6;
  --clrWarning-100: #E88434;
  --clrWarning-50: #C49168;
  --clrAccent-100: #FFFFFF;
  --clrAccent-80: rgba(255, 255, 255, 0.8);
  --clrAccent-60: rgba(255, 255, 255, 0.6);
  --clrAccent-50: rgba(255, 255, 255, 0.5);
  --clrAccent-40: rgba(255, 255, 255, 0.4);
  --clrAccent-30: rgba(255, 255, 255, 0.3);
  --clrAccent-20: rgba(255, 255, 255, 0.2);
  --clrAccent-10: rgba(255, 255, 255, 0.1);
  --clrGradient: linear-gradient(90deg, #262a2e 10%, var(--clrPrimary) 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(50, 126, 75, 0.15) 30%,
          rgba(50, 126, 75, 0.3) 60%,
          rgba(50, 126, 75, 0.5) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(167, 44, 44, 0) 0%,
          rgba(167, 44, 44, 0.15) 30%,
          rgba(167, 44, 44, 0.3) 60%,
          rgba(167, 44, 44, 0.5) 100%);
  --clrNavBackground: rgba(0, 0, 0, 0.15);
  --clrNavItemActive: rgba(24, 24, 24, 0.49);
  --clrNavItemHover: rgba(255, 255, 255, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0F1418;
  --clrGlassBackground: rgba(15, 20, 24, 0.5);
  --clrGlassBackgroundStrong: rgba(15, 20, 24, 0.6);
  --clrGlassBorder: rgba(255, 255, 255, 0.1);
  --snackbarDefaultBg: #414141;
  --snackbarDefaultText: #BABABA;
  --snackbarDefaultBorder: #BABABA;
  --snackbarDefaultIcon: #BABABA;
  --snackbarSuccessBg: #145E18;
  --snackbarSuccessText: #8FE094;
  --snackbarSuccessBorder: #8FE094;
  --snackbarSuccessIcon: #8FE094;
  --snackbarErrorBg: #910C09;
  --snackbarErrorText: #FE9E9D;
  --snackbarErrorBorder: #FE9E9D;
  --snackbarErrorIcon: #FE9E9D;
}

/* 

Note: 
    If you want something done quick, ask AI to buuild your color themes.
    If you want to do it right and tidy though, do it manually. 

    - Theo

*/
:root {
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --font-accent: "Jaro", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}

html,
body {
  font-family: var(--font-sans);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/**
 * Below this the builder goes VERTICAL (deck on top, pool as a bottom sheet).
 *
 * Not a phone-sized guess: it is the width at which the side-by-side layout
 * stops working. The deck needs 3 columns to be worth reading — 3x150px tracks
 * plus 2x10px gaps = 470px — and the pool drawer (500px), its gutter and the
 * deck pane's padding take the other 550. Under 1020px the deck was dropping to
 * two cramped columns instead of collapsing.
 *
 * ⚠️ Mirrored by the matchMedia check in DeckBuilderPage.tsx (hover preview).
 */
._page_n92lc_228 {
  min-height: 100vh;
  padding: 84px 16px calc(90px + env(safe-area-inset-bottom, 0px));
  max-width: 820px;
  margin: 0 auto;
  color: var(--clrTextPrimary);
  font-size: 14px;
}
._page_n92lc_228 * {
  box-sizing: border-box;
  min-width: 0;
}

._pageHead_n92lc_241 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}
._pageHead_n92lc_241 h1 {
  font-size: 22px;
  margin: 0;
}

._createDeckBtn_n92lc_253 {
  display: inline-flex;
  min-height: 38px;
  align-items: center;
  gap: 7px;
  padding: 0 13px;
  border: 0;
  border-radius: 7px;
  background: var(--clrPrimaryReverse);
  color: var(--clrTextPrimaryReverse);
  font: inherit;
  font-size: 13px;
  font-weight: 750;
  cursor: pointer;
  transition: opacity 150ms ease, transform 150ms ease;
}
._createDeckBtn_n92lc_253 svg {
  width: 17px;
  height: 17px;
}
._createDeckBtn_n92lc_253:hover {
  opacity: 0.88;
  transform: translateY(-1px);
}
._createDeckBtn_n92lc_253:focus-visible {
  outline: 2px solid #7c3aed;
  outline-offset: 2px;
}

._note_n92lc_282 {
  color: var(--clrTextTertiary);
  font-size: 13px;
  margin: 6px 0;
}

._error_n92lc_288 {
  color: #ef4444;
  font-size: 13px;
  margin: 8px 0;
}

._ghostBtn_n92lc_294 {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 0 14px;
  background: var(--clrSecondary);
  border: 1px solid var(--clrTertiary);
  border-radius: 8px;
  color: var(--clrTextPrimary);
  font-size: 13px;
  cursor: pointer;
  text-decoration: none;
  transition: border-color 150ms ease, box-shadow 150ms ease, transform 150ms ease;
}
._ghostBtn_n92lc_294 svg {
  width: 16px;
  height: 16px;
}
._ghostBtn_n92lc_294:hover {
  border-color: var(--clrAccent-30);
  box-shadow: 0 4px 12px var(--clrAccent-10);
  transform: translateY(-2px);
}

._empty_n92lc_319 {
  text-align: center;
  padding: 48px 0;
  color: var(--clrTextPrimary);
}

._deckGrid_n92lc_325 {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}

@media (min-width: 1020px) {
  ._page_n92lc_228 {
    max-width: 1480px;
    padding-right: 40px;
    padding-left: 40px;
  }
  ._deckGrid_n92lc_325 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
._deckCardWrap_n92lc_344 {
  position: relative;
}
._deckCardWrap_n92lc_344:hover ._deckDelete_n92lc_347, ._deckCardWrap_n92lc_344:focus-within ._deckDelete_n92lc_347 {
  opacity: 1;
  pointer-events: auto;
}

._deckDelete_n92lc_347 {
  position: absolute;
  top: 8px;
  right: 8px;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: var(--clrTertiary);
  border: 1px solid var(--clrTertiary);
  color: var(--clrTextTertiary);
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity 120ms ease, color 120ms ease, border-color 120ms ease;
}
._deckDelete_n92lc_347 svg {
  width: 16px;
  height: 16px;
}
._deckDelete_n92lc_347:hover:not(:disabled) {
  color: #ef4444;
  border-color: #ef4444;
}
._deckDelete_n92lc_347:focus-visible {
  opacity: 1;
  pointer-events: auto;
  outline: 2px solid #7c3aed;
}
._deckDelete_n92lc_347:disabled {
  opacity: 0.4;
  cursor: default;
}
@media (hover: none) {
  ._deckDelete_n92lc_347 {
    opacity: 1;
    pointer-events: auto;
  }
}

._deckCard_n92lc_344 {
  display: block;
  background: var(--clrSecondary);
  border: 1px solid var(--clrTertiary);
  border-radius: 10px;
  padding: 10px;
  text-decoration: none;
  color: var(--clrTextPrimary);
  transition: border-color 150ms ease, box-shadow 150ms ease, transform 150ms ease;
}
._deckCard_n92lc_344:hover {
  border-color: var(--clrAccent-30);
  box-shadow: 0 4px 12px var(--clrAccent-10);
  transform: translateY(-2px);
}
@media (hover: none) {
  ._deckCard_n92lc_344 {
    padding-right: 46px;
  }
}

._deckCardHead_n92lc_414 {
  display: flex;
  min-height: 64px;
  gap: 12px;
}

._deckArt_n92lc_420 {
  width: 64px;
  height: 64px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
._deckArt_n92lc_420 img {
  display: block;
}

._deckMeta_n92lc_432 {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  justify-content: center;
}

._deckPreview_n92lc_440 {
  position: relative;
  margin-top: 12px;
  overflow: hidden;
  aspect-ratio: 1.28;
  border-radius: 8px;
}

._deckPreviewGrid_n92lc_448 {
  display: grid;
  width: 100%;
  height: 100%;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  grid-template-rows: repeat(3, minmax(0, 1fr));
  gap: 4px;
}

._deckPreviewCard_n92lc_457 {
  display: flex;
  min-width: 0;
  min-height: 0;
  align-items: center;
  justify-content: center;
}
._deckPreviewCard_n92lc_457 img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

._deckPreviewMore_n92lc_471 {
  position: absolute;
  right: 0;
  bottom: 0;
  display: flex;
  width: 49%;
  height: 43%;
  align-items: flex-end;
  justify-content: flex-end;
  padding: 8px 10px;
  background: linear-gradient(135deg, rgba(0, 0, 0, 0) 10%, rgba(0, 0, 0, 0.18) 40%, rgba(0, 0, 0, 0.92) 100%);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.02em;
}

._deckName_n92lc_488 {
  font-size: 14px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

._deckPills_n92lc_495 {
  display: flex;
  gap: 4px;
}

._colorPill_n92lc_500 {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1px solid rgba(128, 128, 128, 0.35);
}
._colorPill_n92lc_500[data-color=Red] {
  background: #dc2626;
}
._colorPill_n92lc_500[data-color=Green] {
  background: #16a34a;
}
._colorPill_n92lc_500[data-color=Blue] {
  background: #2563eb;
}
._colorPill_n92lc_500[data-color=Purple] {
  background: #7c3aed;
}
._colorPill_n92lc_500[data-color=Black] {
  background: #111114;
}
._colorPill_n92lc_500[data-color=Yellow] {
  background: #eab308;
}

._deckCounts_n92lc_525 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--clrTextTertiary);
  font-variant-numeric: tabular-nums;
}

._formatChip_n92lc_534 {
  border: 1px solid var(--clrTertiary);
  border-radius: 5px;
  padding: 1px 6px;
  font-size: 10px;
}

._legalBadge_n92lc_541 {
  color: #059669;
  border: 1px solid rgba(5, 150, 105, 0.5);
  border-radius: 5px;
  padding: 1px 7px;
  font-size: 10.5px;
  font-weight: 600;
}

._brewBadge_n92lc_550 {
  color: #f59e0b;
  border: 1px solid rgba(245, 158, 11, 0.5);
  border-radius: 5px;
  padding: 1px 7px;
  font-size: 10.5px;
  font-weight: 600;
}

._leaderCellOn_n92lc_559 {
  border-color: #7c3aed;
}

._chipRow_n92lc_563 {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
}

._chip_n92lc_563, ._chipOn_n92lc_570 {
  min-height: 36px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid var(--clrTertiary);
  background: var(--clrPrimary);
  color: var(--clrTextTertiary);
  font-size: 12px;
  cursor: pointer;
}

._chipOn_n92lc_570 {
  background: rgba(124, 58, 237, 0.18);
  border-color: #7c3aed;
  color: var(--clrTextPrimary);
}

._haveFull_n92lc_587 {
  background: rgba(239, 68, 68, 0.9);
}

._segmentOn_n92lc_591 {
  background: rgba(124, 58, 237, 0.18);
  color: var(--clrTextPrimary);
}

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

._view_grid_n92lc_602, ._view_large_n92lc_602 {
  display: grid;
  gap: 10px;
}

._view_grid_n92lc_602 {
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
}

._view_large_n92lc_602 {
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
}

._builderShell_n92lc_615 {
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  padding-top: var(--app-header-h, 122px);
  background: var(--clrPrimary);
  color: var(--clrTextPrimary);
}
._builderShell_n92lc_615 * {
  box-sizing: border-box;
  min-width: 0;
}

._builderBody_n92lc_630 {
  display: flex;
  flex: 1;
  min-height: 0;
  align-items: stretch;
  padding-top: 10px;
}

._searchDrawer_n92lc_638 {
  width: 500px;
  flex-shrink: 0;
  transition: width 220ms cubic-bezier(0.4, 0, 0.2, 1), height 220ms cubic-bezier(0.4, 0, 0.2, 1), padding 220ms cubic-bezier(0.4, 0, 0.2, 1), margin 220ms cubic-bezier(0.4, 0, 0.2, 1);
}
@media (prefers-reduced-motion: reduce) {
  ._searchDrawer_n92lc_638 {
    transition: none;
  }
}
._searchDrawer_n92lc_638 {
  margin: 0 0 10px 10px;
  overflow-x: hidden;
  overflow-y: auto;
}
._searchDrawer_n92lc_638 > * {
  min-width: 472px;
}
._searchDrawer_n92lc_638 {
  overscroll-behavior: contain;
  background: var(--clrSecondary);
  border: 1px solid var(--clrTertiary);
  border-radius: 10px;
  padding: 14px;
  scrollbar-width: thin;
  scrollbar-color: rgba(128, 128, 128, 0.45) transparent;
}
._searchDrawer_n92lc_638::-webkit-scrollbar {
  width: 10px;
}
._searchDrawer_n92lc_638::-webkit-scrollbar-track {
  background: transparent;
}
._searchDrawer_n92lc_638::-webkit-scrollbar-thumb {
  background: rgba(128, 128, 128, 0.45);
  border-radius: 999px;
  border: 3px solid transparent;
  background-clip: padding-box;
}
._searchDrawer_n92lc_638::-webkit-scrollbar-thumb:hover {
  background: rgba(128, 128, 128, 0.7);
  background-clip: padding-box;
}
@media (max-width: 1020px) {
  ._searchDrawer_n92lc_638 {
    position: fixed;
    left: 0;
    right: 0;
    top: auto;
    bottom: 0;
    margin: 0;
    z-index: 60;
    width: 100vw;
    margin: 0;
    height: 44vh;
    height: 44dvh;
    border: none;
    border-top: 1px solid var(--clrTertiary);
    border-radius: 10px 10px 0 0;
    padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px));
  }
  ._searchDrawer_n92lc_638 > * {
    min-width: 0;
  }
}

._searchDrawerClosed_n92lc_704 {
  width: 0;
  padding-left: 0;
  padding-right: 0;
  border-width: 0;
  margin-left: 0;
}
@media (max-width: 1020px) {
  ._searchDrawerClosed_n92lc_704 {
    width: 100vw;
    padding-left: 14px;
    padding-right: 14px;
    border-top-width: 1px;
    border-radius: 0;
    height: calc(72px + env(safe-area-inset-bottom, 0px));
    padding-bottom: env(safe-area-inset-bottom, 0px);
    overflow-y: hidden;
  }
}

._drawerToggle_n92lc_724, ._drawerToggleOpen_n92lc_724 {
  position: fixed;
  left: 0;
  transition: left 220ms cubic-bezier(0.4, 0, 0.2, 1);
}
@media (prefers-reduced-motion: reduce) {
  ._drawerToggle_n92lc_724, ._drawerToggleOpen_n92lc_724 {
    transition: none;
  }
}
._drawerToggle_n92lc_724, ._drawerToggleOpen_n92lc_724 {
  top: 50%;
  transform: translateY(-50%);
  z-index: 61;
  min-height: 56px;
  width: 26px;
  border-radius: 0 8px 8px 0;
  color: var(--clrTextPrimary);
  cursor: pointer;
  line-height: 0;
  background: var(--clrTertiary);
  border: 1px solid var(--clrTertiary);
  border-left: none;
}
._drawerToggle_n92lc_724 svg, ._drawerToggleOpen_n92lc_724 svg {
  width: 15px;
  height: 15px;
}
@media (max-width: 1020px) {
  ._drawerToggle_n92lc_724, ._drawerToggleOpen_n92lc_724 {
    display: none;
  }
}

._drawerToggleOpen_n92lc_724 {
  left: 510px;
}
@media (max-width: 1020px) {
  ._drawerToggleOpen_n92lc_724 {
    display: none;
  }
}

._drawerSearchBar_n92lc_767 {
  position: sticky;
  top: -14px;
  z-index: 5;
  display: flex;
  align-items: stretch;
  gap: 8px;
  margin: -14px -14px 10px;
  padding: 14px;
  background: var(--clrSecondary);
  border-bottom: 1px solid var(--clrTertiary);
}

._drawerCollapseInline_n92lc_780 {
  display: none;
}
@media (max-width: 1020px) {
  ._drawerCollapseInline_n92lc_780 {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 44px;
    min-height: 44px;
    border-radius: 8px;
    background: var(--clrTertiary);
    border: 1px solid var(--clrTertiary);
    color: var(--clrTextPrimary);
    cursor: pointer;
  }
  ._drawerCollapseInline_n92lc_780 svg {
    width: 18px;
    height: 18px;
  }
}

._drawerFilters_n92lc_802 {
  padding-top: 2px;
}
@media (max-width: 1020px) {
  ._drawerFilters_n92lc_802 {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    margin-bottom: 8px;
    scrollbar-width: none;
  }
  ._drawerFilters_n92lc_802::-webkit-scrollbar {
    display: none;
  }
  ._drawerFilters_n92lc_802 ._chipRow_n92lc_563 {
    flex-wrap: nowrap;
    flex-shrink: 0;
    margin-bottom: 0;
  }
}

._numericFilters_n92lc_826 {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  margin: 10px 0 14px;
  padding: 12px;
  border: 1px solid var(--clrTertiary);
  border-radius: 8px;
  background: var(--clrPrimary);
}
._numericFilters_n92lc_826 ._numericFilterGroup_n92lc_836 {
  display: grid;
  gap: 3px;
  color: var(--clrTextTertiary);
  font-size: 10.5px;
}
._numericFilters_n92lc_826 ._numericFilterGroup_n92lc_836 > div {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 3px;
}
._numericFilters_n92lc_826 ._numericFilterGroup_n92lc_836 input {
  width: 100%;
  min-height: 34px;
  padding: 6px 8px;
  border: 1px solid var(--clrTertiary);
  border-radius: 7px;
  background: var(--clrPrimary);
  color: var(--clrTextPrimary);
  font-size: 12px;
}
._numericFilters_n92lc_826 ._numericFilterGroup_n92lc_836 input:focus {
  outline: none;
  border-color: #7c3aed;
}
@media (max-width: 1020px) {
  ._numericFilters_n92lc_826 {
    width: 100%;
    flex-basis: 100%;
    flex-shrink: 0;
    margin: 0;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 16px;
  }
  ._numericFilters_n92lc_826 ._numericFilterGroup_n92lc_836 {
    min-width: 0;
  }
}

._counterFilter_n92lc_875 {
  display: grid;
  gap: 8px;
  color: var(--clrTextPrimary);
  font-size: 12px;
  font-weight: 600;
}
@media (max-width: 1020px) {
  ._counterFilter_n92lc_875 {
    grid-column: 1/-1;
  }
}

._counterOptions_n92lc_888 {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 5px;
}

._counterOption_n92lc_888, ._counterOptionOn_n92lc_894 {
  min-height: 32px;
  padding: 5px;
  border: 1px solid var(--clrTertiary);
  border-radius: 6px;
  background: transparent;
  color: var(--clrTextTertiary);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
}
._counterOption_n92lc_888:hover, ._counterOptionOn_n92lc_894:hover {
  color: var(--clrTextPrimary);
  border-color: #7c3aed;
}
._counterOption_n92lc_888:focus-visible, ._counterOptionOn_n92lc_894:focus-visible {
  outline: 2px solid #7c3aed;
  outline-offset: 2px;
}

._counterOptionOn_n92lc_894 {
  color: var(--clrTextPrimary);
  border-color: #7c3aed;
  background: rgba(124, 58, 237, 0.18);
}

._drawerSearch_n92lc_767 {
  width: 100%;
  min-height: 44px;
  background: var(--clrPrimary);
  border: 1px solid var(--clrTertiary);
  border-radius: 8px;
  color: var(--clrTextPrimary);
  padding: 10px 12px;
  font-size: 13.5px;
}
._drawerSearch_n92lc_767:focus {
  outline: none;
  border-color: #7c3aed;
}

._colorDot_n92lc_935, ._colorDotOn_n92lc_935, ._colorDotOff_n92lc_935 {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  padding: 0;
}
._colorDot_n92lc_935[data-color=Red], ._colorDotOn_n92lc_935[data-color=Red], ._colorDotOff_n92lc_935[data-color=Red] {
  background: #dc2626;
}
._colorDot_n92lc_935[data-color=Green], ._colorDotOn_n92lc_935[data-color=Green], ._colorDotOff_n92lc_935[data-color=Green] {
  background: #16a34a;
}
._colorDot_n92lc_935[data-color=Blue], ._colorDotOn_n92lc_935[data-color=Blue], ._colorDotOff_n92lc_935[data-color=Blue] {
  background: #2563eb;
}
._colorDot_n92lc_935[data-color=Purple], ._colorDotOn_n92lc_935[data-color=Purple], ._colorDotOff_n92lc_935[data-color=Purple] {
  background: #7c3aed;
}
._colorDot_n92lc_935[data-color=Black], ._colorDotOn_n92lc_935[data-color=Black], ._colorDotOff_n92lc_935[data-color=Black] {
  background: #18181b;
  border-color: var(--clrTertiary);
}
._colorDot_n92lc_935[data-color=Yellow], ._colorDotOn_n92lc_935[data-color=Yellow], ._colorDotOff_n92lc_935[data-color=Yellow] {
  background: #eab308;
}
._colorDot_n92lc_935:focus-visible, ._colorDotOn_n92lc_935:focus-visible, ._colorDotOff_n92lc_935:focus-visible {
  outline: 2px solid var(--clrTextPrimary);
  outline-offset: 2px;
}

._colorDotOn_n92lc_935 {
  border-color: var(--clrTextPrimary) !important;
  box-shadow: 0 0 0 2px rgba(128, 128, 128, 0.3);
}

._colorDotOff_n92lc_935 {
  opacity: 0.3;
  cursor: not-allowed;
}

._drawerGrid_n92lc_977 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
@media (max-width: 1020px) {
  ._drawerGrid_n92lc_977 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
  }
}

._cardPurchaseWrap_n92lc_989,
._drawerCardTile_n92lc_990 {
  position: relative;
  min-width: 0;
}

._drawerCard_n92lc_990 {
  width: 100%;
  position: relative;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
._drawerCard_n92lc_990 img {
  width: 100%;
  aspect-ratio: 640/894;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid var(--clrTertiary);
}
._drawerCard_n92lc_990:hover img {
  border-color: #7c3aed;
}
._drawerCard_n92lc_990:focus-visible {
  outline: 2px solid #7c3aed;
  outline-offset: 2px;
  border-radius: 6px;
}

._drawerCardEmpty_n92lc_1022 {
  display: grid;
  place-items: center;
  aspect-ratio: 640/894;
  width: 100%;
  background: var(--clrPrimary);
  border: 1px solid var(--clrTertiary);
  border-radius: 6px;
  color: var(--clrTextTertiary);
  font-size: 10px;
  text-align: center;
  padding: 4px;
}

._artTag_n92lc_1036 {
  margin-left: 4px;
  padding: 0 4px;
  border-radius: 4px;
  background: var(--clrTertiary);
  color: var(--clrTextTertiary);
  font-size: 8.5px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  vertical-align: middle;
}

._drawerCardId_n92lc_1048 {
  font-size: 10.5px;
  color: var(--clrTextTertiary);
  text-align: center;
  font-variant-numeric: tabular-nums;
}

._deckPane_n92lc_1055 {
  flex: 1;
  min-width: 0;
  overflow-y: auto;
  padding: 0 20px calc(24px + env(safe-area-inset-bottom, 0px));
}
@media (max-width: 1020px) {
  ._deckPane_n92lc_1055 {
    padding-bottom: calc(44vh + 40px);
    padding-bottom: calc(44dvh + 40px);
  }
}

._deckPane_n92lc_1055 > * {
  max-width: 980px;
  margin-left: auto;
  margin-right: auto;
}

@media (min-width: 1700px) {
  ._deckPane_n92lc_1055 > * {
    max-width: 1400px;
  }
  ._deckPane_n92lc_1055 ._deckGridV2_n92lc_1078 {
    grid-template-columns: repeat(7, minmax(0, 1fr));
  }
}
._previewColumn_n92lc_1082 {
  display: none;
}

@media (min-width: 1900px) {
  ._previewColumn_n92lc_1082 {
    display: block;
    flex: 0 0 clamp(360px, 24vw, 520px);
    margin: 0 10px 10px 0;
  }
  ._previewSticky_n92lc_1092 {
    position: sticky;
    top: 0;
  }
  ._previewSlot_n92lc_1096 {
    position: relative;
    overflow: hidden;
    display: grid;
    place-items: center;
    width: min(100%, (100vh - 150px) * 640 / 894, 515.4362416107px);
    aspect-ratio: 640/894;
    margin: 0 auto;
    border: 1px dashed var(--clrTertiary);
    border-radius: 22px;
    color: var(--clrTextTertiary);
    font-size: 12.5px;
  }
  ._previewCard_n92lc_1109 {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    animation: _hoverPreviewIn_n92lc_1 90ms ease-out;
  }
  ._previewHint_n92lc_1117 {
    color: var(--clrTextTertiary);
    font-size: 12.5px;
  }
  ._deckPane_n92lc_1055 ._deckGridV2_n92lc_1078 {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  }
}
@media (max-width: 1020px) {
  ._deckPaneWide_n92lc_1126 {
    padding-bottom: calc(92px + env(safe-area-inset-bottom, 0px));
  }
}

._builderBar_n92lc_1131 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px 14px;
  padding: 10px 14px;
}
@media (max-width: 1020px) {
  ._builderBar_n92lc_1131 {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
}

._builderBarLeft_n92lc_1147 {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
@media (max-width: 1020px) {
  ._builderBarLeft_n92lc_1147 {
    flex-shrink: 0;
  }
}

._builderCardCount_n92lc_1159 {
  flex-shrink: 0;
  font-size: 13px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
._builderCardCount_n92lc_1159[data-count-state=complete] {
  color: #059669;
}
._builderCardCount_n92lc_1159[data-count-state=under] {
  color: #f59e0b;
}
._builderCardCount_n92lc_1159[data-count-state=over] {
  color: #ef4444;
}

._builderBarActions_n92lc_1176 {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
@media (max-width: 1020px) {
  ._builderBarActions_n92lc_1176 {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
  }
  ._builderBarActions_n92lc_1176::-webkit-scrollbar {
    display: none;
  }
  ._builderBarActions_n92lc_1176 > * {
    flex-shrink: 0;
  }
}

._backBtn_n92lc_1196 {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  border-radius: 8px;
  background: var(--clrTertiary);
  border: 1px solid var(--clrTertiary);
  color: var(--clrTextPrimary);
  text-decoration: none;
  transition: border-color 150ms ease, box-shadow 150ms ease, transform 150ms ease;
}
._backBtn_n92lc_1196 svg {
  width: 17px;
  height: 17px;
}
._backBtn_n92lc_1196:hover {
  border-color: var(--clrAccent-30);
  box-shadow: 0 4px 12px var(--clrAccent-10);
  transform: translateY(-2px);
}
@media (max-width: 1020px) {
  ._backBtn_n92lc_1196 {
    width: 28px;
    height: 28px;
  }
  ._backBtn_n92lc_1196 svg {
    width: 15px;
    height: 15px;
  }
}

._formatChipV2_n92lc_1229 {
  flex-shrink: 0;
  border-radius: 6px;
  padding: 3px 9px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.03em;
  white-space: nowrap;
}
._formatChipV2_n92lc_1229[data-format=Standard] {
  color: #059669;
  background: rgba(5, 150, 105, 0.14);
  border: 1px solid rgba(5, 150, 105, 0.45);
}
._formatChipV2_n92lc_1229[data-format=Extra] {
  color: #f59e0b;
  background: rgba(245, 158, 11, 0.14);
  border: 1px solid rgba(245, 158, 11, 0.45);
}
._formatChipV2_n92lc_1229[data-format=Unlimited] {
  color: #ef4444;
  background: rgba(239, 68, 68, 0.14);
  border: 1px solid rgba(239, 68, 68, 0.45);
}
@media (max-width: 1020px) {
  ._formatChipV2_n92lc_1229 {
    font-size: 10px;
    padding: 2px 7px;
  }
}

._deckNameBox_n92lc_1260 {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  background: none;
  border: none;
  padding: 0;
  color: var(--clrTextPrimary);
  cursor: pointer;
  text-align: left;
}
._deckNameBox_n92lc_1260 h1 {
  margin: 0;
  font-size: 16px;
  font-weight: 650;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
._deckNameBox_n92lc_1260 svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  color: var(--clrTextTertiary);
}
._deckNameBox_n92lc_1260:hover svg {
  color: var(--clrTextPrimary);
}
@media (max-width: 1020px) {
  ._deckNameBox_n92lc_1260 {
    max-width: 100%;
  }
  ._deckNameBox_n92lc_1260 h1 {
    font-size: 13.5px;
    font-weight: 600;
  }
  ._deckNameBox_n92lc_1260 svg {
    width: 12px;
    height: 12px;
  }
}

._spotlightOverlay_n92lc_1303 {
  position: fixed;
  inset: 0;
  z-index: 130;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 18vh 16px 16px;
}

._spotlightBox_n92lc_1316 {
  width: min(520px, 100%);
  background: var(--clrSecondary);
  border: 1px solid var(--clrTertiary);
  border-radius: 14px;
  padding: 16px 18px 12px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
}
._spotlightBox_n92lc_1316 label {
  display: block;
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--clrTextTertiary);
  margin-bottom: 8px;
}

._spotlightInput_n92lc_1333 {
  width: 100%;
  background: var(--clrPrimary);
  border: 1px solid var(--clrTertiary);
  border-radius: 10px;
  color: var(--clrTextPrimary);
  padding: 12px 14px;
  font-size: 20px;
  font-weight: 650;
}
._spotlightInput_n92lc_1333:focus {
  outline: none;
  border-color: #7c3aed;
}

._previewToggle_n92lc_1348 {
  display: inline-flex;
}
@media (max-width: 1020px) {
  ._previewToggle_n92lc_1348 {
    display: none;
  }
}
._previewToggle_n92lc_1348 {
  align-items: center;
  gap: 8px;
  margin-right: 6px;
  font-size: 12.5px;
  color: var(--clrTextTertiary);
  cursor: pointer;
}

._switch_n92lc_1365, ._switchOn_n92lc_1365 {
  position: relative;
  width: 36px;
  height: 20px;
  flex-shrink: 0;
  border-radius: 999px;
  border: 1px solid var(--clrTertiary);
  background: var(--clrTertiary);
  padding: 0;
  cursor: pointer;
}
._switch_n92lc_1365 span, ._switchOn_n92lc_1365 span {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--clrTextTertiary);
  transition: transform 130ms ease, background-color 130ms ease;
}

._switchOn_n92lc_1365 {
  background: rgba(124, 58, 237, 0.35);
  border-color: #7c3aed;
}
._switchOn_n92lc_1365 span {
  transform: translateX(16px);
  background: var(--clrTextPrimary);
}

._toolBtn_n92lc_1396 {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  padding: 0 14px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: var(--clrPrimaryReverse);
  color: var(--clrTextPrimaryReverse);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 150ms ease, box-shadow 150ms ease, transform 150ms ease;
}
._toolBtn_n92lc_1396 svg {
  width: 16px;
  height: 16px;
}
._toolBtn_n92lc_1396:hover {
  border-color: var(--clrAccent-30);
  box-shadow: 0 4px 12px var(--clrAccent-10);
  transform: translateY(-2px);
}

@media (max-width: 1020px) {
  ._labelDesktop_n92lc_1422 {
    display: none;
  }
}

._saveDeckBtn_n92lc_1427 {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  padding: 0 16px;
}
@media (max-width: 1020px) {
  ._saveDeckBtn_n92lc_1427 {
    padding: 0 12px;
  }
}
._saveDeckBtn_n92lc_1427 {
  border: 1px solid transparent;
  border-radius: 8px;
  background: #7c3aed;
  color: #fff;
  font-size: 13px;
  font-weight: 650;
  cursor: pointer;
  transition: border-color 150ms ease, box-shadow 150ms ease, transform 150ms ease;
}
._saveDeckBtn_n92lc_1427:hover:not(:disabled) {
  border-color: var(--clrAccent-30);
  box-shadow: 0 4px 12px var(--clrAccent-10);
  transform: translateY(-2px);
}
._saveDeckBtn_n92lc_1427:disabled {
  opacity: 0.6;
  cursor: default;
}

._leaderBanner_n92lc_1459 {
  background: rgba(245, 158, 11, 0.12);
  border: 1px solid rgba(245, 158, 11, 0.5);
  color: #f59e0b;
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 10px;
}

._deckCountLine_n92lc_1470 {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--clrTextTertiary);
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}

._deckGridV2_n92lc_1078 {
  position: relative;
  --stack-off: 8px;
}
@media (max-width: 1020px) {
  ._deckGridV2_n92lc_1078 {
    --stack-off: 3px;
  }
}
._deckGridV2_n92lc_1078 {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px;
}
@media (max-width: 1020px) {
  ._deckGridV2_n92lc_1078 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 6px;
  }
}
._deckGridV2_n92lc_1078 > ._deckCountLine_n92lc_1470 {
  position: absolute;
  top: -17px;
  left: 0;
  z-index: 1;
  margin: 0;
}

._configuredZone_n92lc_1506 {
  margin-top: 20px;
  padding-top: 14px;
  border-top: 1px solid var(--clrTertiary);
}
._configuredZone_n92lc_1506 ._deckCell_n92lc_1511 {
  cursor: default;
}
._configuredZone_n92lc_1506 button._deckSlot_n92lc_1514 {
  width: 100%;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: inherit;
}

._configuredZoneHead_n92lc_1522 {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}
._configuredZoneHead_n92lc_1522 h2 {
  margin: 0;
  font-size: 14px;
  font-weight: 650;
}
._configuredZoneHead_n92lc_1522 span {
  color: var(--clrTextTertiary);
  font-size: 11.5px;
  font-variant-numeric: tabular-nums;
}

._riftBoard_n92lc_1540 {
  display: flex;
  flex-direction: column;
  gap: 16px;
  container-type: inline-size;
}

._riftTopRow_n92lc_1547 {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  gap: 16px;
}

._riftPanel_n92lc_1553 {
  min-width: 0;
  padding: 16px;
  border: 1px solid var(--clrTertiary);
  border-radius: 16px;
  background: var(--clrSecondary);
}

._riftPanelHead_n92lc_1561 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
._riftPanelHead_n92lc_1561 h2 {
  margin: 0;
  min-width: 0;
  font-size: 15px;
  line-height: 1.3;
  font-weight: 650;
}
._riftPanelHead_n92lc_1561 > span {
  flex-shrink: 0;
  color: var(--clrTextTertiary);
  font-size: 13px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

._riftIdentityGrid_n92lc_1583, ._riftBattlefieldGrid_n92lc_1583 {
  --stack-off: 0px;
  display: grid;
  gap: 12px;
  align-items: start;
}
._riftIdentityGrid_n92lc_1583 ._deckCell_n92lc_1511, ._riftBattlefieldGrid_n92lc_1583 ._deckCell_n92lc_1511 {
  cursor: default;
}
._riftIdentityGrid_n92lc_1583 button._deckSlot_n92lc_1514, ._riftBattlefieldGrid_n92lc_1583 button._deckSlot_n92lc_1514 {
  width: 100%;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: inherit;
}

._riftIdentityGrid_n92lc_1583 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

._riftBattlefieldGrid_n92lc_1583 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

._riftSlotEmpty_n92lc_1608 {
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 640/894;
  padding: 8px;
  border: 1px dashed var(--clrTextTertiary);
  border-radius: 8px;
  color: var(--clrTextTertiary);
  background: var(--clrPrimary);
  text-align: center;
  font-size: 12px;
  line-height: 1.4;
}

._riftMainPanel_n92lc_1623 {
  min-height: 300px;
}

._riftReservePanel_n92lc_1627 {
  min-height: 180px;
}

._riftZoneEmpty_n92lc_1631 {
  min-height: 100px;
  display: grid;
  place-items: center;
  color: var(--clrTextTertiary);
  font-size: 14px;
  font-weight: 500;
  text-align: center;
}

._riftMainPanel_n92lc_1623 > ._riftZoneEmpty_n92lc_1631 {
  min-height: 210px;
}

._deckPane_n92lc_1055 ._riftBoard_n92lc_1540 ._deckGridV2_n92lc_1078 {
  --stack-off: 5px;
}

@container (max-width: 560px) {
  ._riftTopRow_n92lc_1547 {
    gap: 10px;
  }
  ._riftPanel_n92lc_1553 {
    padding: 10px;
    border-radius: 12px;
  }
  ._riftPanelHead_n92lc_1561 {
    gap: 6px;
    margin-bottom: 10px;
    align-items: start;
  }
  ._riftPanelHead_n92lc_1561 h2 {
    font-size: 12px;
  }
  ._riftPanelHead_n92lc_1561 > span {
    font-size: 11px;
  }
  ._riftIdentityGrid_n92lc_1583, ._riftBattlefieldGrid_n92lc_1583 {
    gap: 6px;
  }
  ._riftSlotEmpty_n92lc_1608 {
    font-size: 10px;
    padding: 4px;
  }
}
._riftBoardExport_n92lc_1676 ._riftPanel_n92lc_1553 {
  background: #14181d;
  border-color: #30343a;
}
._riftBoardExport_n92lc_1676 ._riftPanelHead_n92lc_1561 > span, ._riftBoardExport_n92lc_1676 ._deckCardId_n92lc_1680, ._riftBoardExport_n92lc_1676 ._riftZoneEmpty_n92lc_1631 {
  color: #b8bdc6;
}
._riftBoardExport_n92lc_1676 ._riftSlotEmpty_n92lc_1608 {
  background: #101317;
  color: #b8bdc6;
  border-color: #656b74;
}
._riftBoardExport_n92lc_1676 ._riftMainPanel_n92lc_1623, ._riftBoardExport_n92lc_1676 ._riftReservePanel_n92lc_1627 {
  min-height: 0;
}
._riftBoardExport_n92lc_1676 ._riftZoneEmpty_n92lc_1631 {
  min-height: 70px;
}
._riftBoardExport_n92lc_1676 ._deckGridV2_n92lc_1078 {
  --stack-off: 0px;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}
._riftBoardExport_n92lc_1676 ._deckSlot_n92lc_1514 {
  cursor: default;
  padding: 0;
}
._riftBoardExport_n92lc_1676 ._deckSlot_n92lc_1514 img {
  border-color: #30343a;
  object-fit: contain;
}
._riftBoardExport_n92lc_1676 ._deckCardId_n92lc_1680 {
  margin-top: 4px;
  padding-right: 0;
  font-size: 10px;
}
._riftBoardExport_n92lc_1676 ._qtyBadge_n92lc_1712 {
  font-size: 15px;
  padding: 3px 7px;
  border-radius: 7px;
}

/**
 * Card art loading state.
 *
 * The image is hidden until it has fully decoded and a shimmering placeholder
 * stands in — browsers paint image data progressively, so a slow response
 * rendered as a half-drawn card. A slot is now either a skeleton or a finished
 * card, never a torn one.
 */
._artLoading_n92lc_1726 {
  opacity: 0;
}

._artLoaded_n92lc_1730 {
  opacity: 1;
  transition: opacity 180ms ease;
}

._cardSkeleton_n92lc_1735 {
  position: absolute;
  top: 0;
  left: 0;
  width: calc(100% - var(--stack-off, 0px) * 3);
  aspect-ratio: 640/894;
  border-radius: 7px;
  pointer-events: none;
  background: linear-gradient(100deg, var(--clrTertiary) 30%, rgba(255, 255, 255, 0.07) 45%, var(--clrTertiary) 60%);
  background-size: 300% 100%;
  animation: _cardSkeletonSweep_n92lc_1 1.3s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  ._cardSkeleton_n92lc_1735 {
    animation: none;
  }
}

@keyframes _cardSkeletonSweep_n92lc_1 {
  from {
    background-position: 150% 0;
  }
  to {
    background-position: -50% 0;
  }
}
._deckCell_n92lc_1511 {
  display: flex;
  flex-direction: column;
  min-width: 0;
  cursor: grab;
}
._deckCell_n92lc_1511:active {
  cursor: grabbing;
}

._deckCellDragging_n92lc_1771 {
  cursor: grabbing;
  filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.45));
}
@media (prefers-reduced-motion: reduce) {
  ._deckCellDragging_n92lc_1771 {
    filter: none;
  }
}

._deckCardId_n92lc_1680 {
  margin: 3px calc(var(--stack-off) * 3) 0 0;
  text-align: center;
  font-size: 10.5px;
  color: var(--clrTextTertiary);
  font-variant-numeric: tabular-nums;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media (max-width: 1020px) {
  ._deckCardId_n92lc_1680 {
    font-size: 9px;
  }
}

._deckSlot_n92lc_1514 {
  position: relative;
  cursor: pointer;
  padding: 0 calc(var(--stack-off) * 3) calc(var(--stack-off) * 3) 0;
}
._deckSlot_n92lc_1514 img {
  width: 100%;
  aspect-ratio: 640/894;
  object-fit: cover;
  border-radius: 7px;
  border: 1px solid var(--clrTertiary);
  display: block;
}
._deckSlot_n92lc_1514:hover img {
  border-color: #7c3aed;
}
._deckSlot_n92lc_1514 img._stackGhost_n92lc_1813 {
  position: absolute;
  width: calc(100% - var(--stack-off) * 3);
  pointer-events: none;
}

._stackFront_n92lc_1819 {
  position: relative;
  z-index: 1;
}

._leaderBadge_n92lc_1824 {
  position: absolute;
  z-index: 2;
  bottom: calc(var(--stack-off) * 3 + 6px);
  right: calc(var(--stack-off) * 3 + 6px);
  background: rgba(0, 0, 0, 0.75);
  border: 1px solid #f59e0b;
  color: #f59e0b;
  font-weight: 800;
  font-size: 12px;
  border-radius: 6px;
  padding: 2px 7px;
}

._leaderSlotEmpty_n92lc_1838 {
  aspect-ratio: 640/894;
  border-radius: 7px;
  border: 2px dashed var(--clrTertiary);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 6px;
  text-align: center;
  color: var(--clrTextTertiary);
  font-size: 10.5px;
  line-height: 1.3;
}
._leaderSlotEmpty_n92lc_1838 svg {
  width: 22px;
  height: 22px;
  opacity: 0.6;
}

._qtyWrap_n92lc_1859 {
  position: absolute;
  z-index: 2;
  right: calc(var(--stack-off) * 3 + 4px);
  bottom: calc(var(--stack-off) * 3 + 26%);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}

._qtyBadge_n92lc_1712 {
  background: rgba(0, 0, 0, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.28);
  color: #fafafa;
  font-weight: 700;
  font-size: 15px;
  border-radius: 9px;
  padding: 5px 11px;
  font-variant-numeric: tabular-nums;
}
@media (max-width: 1020px) {
  ._qtyBadge_n92lc_1712 {
    font-size: 12.5px;
    border-radius: 7px;
    padding: 3px 8px;
  }
}

._qtySteppers_n92lc_1888 {
  display: flex;
  gap: 4px;
}
@media (max-width: 1020px) {
  ._qtySteppers_n92lc_1888 {
    display: none;
  }
}
._qtySteppers_n92lc_1888 {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 130ms ease, transform 130ms ease;
  pointer-events: none;
}
._deckSlot_n92lc_1514:hover ._qtySteppers_n92lc_1888 {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
._qtySteppers_n92lc_1888 button {
  min-width: 30px;
  min-height: 30px;
  border-radius: 7px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  background: rgba(0, 0, 0, 0.85);
  color: #fafafa;
  font-size: 15px;
  line-height: 0;
  cursor: pointer;
  transition: border-color 150ms ease, box-shadow 150ms ease, transform 150ms ease;
}
._qtySteppers_n92lc_1888 button:hover:not(:disabled) {
  border-color: var(--clrAccent-30);
  box-shadow: 0 4px 12px var(--clrAccent-10);
  transform: translateY(-2px);
}
._qtySteppers_n92lc_1888 button:disabled {
  opacity: 0.4;
  cursor: default;
}

._previewMark_n92lc_1930 {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 1px;
  display: flex;
  justify-content: center;
  pointer-events: none;
}

._previewMarkInner_n92lc_1940 {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(9, 9, 11, 0.38);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  font-size: 10px;
  letter-spacing: 0.01em;
  line-height: 1;
  color: rgba(250, 250, 250, 0.82);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
  white-space: nowrap;
}
._previewMarkInner_n92lc_1940 strong {
  font-weight: 700;
  color: #fff;
}
._previewMarkInner_n92lc_1940 img {
  width: 11px;
  height: 11px;
  border-radius: 3px;
}

._hoverPreview_n92lc_1966 {
  position: fixed;
  z-index: 200;
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6);
  pointer-events: none;
  aspect-ratio: 640/894;
  animation: _hoverPreviewIn_n92lc_1 90ms ease-out;
}
._hoverPreview_n92lc_1966 > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@keyframes _hoverPreviewIn_n92lc_1 {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
._draftResume_n92lc_1991 {
  display: block;
  width: 100%;
  text-align: left;
  background: rgba(124, 58, 237, 0.1);
  border: 1px dashed #7c3aed;
  border-radius: 10px;
  color: var(--clrTextPrimary);
  padding: 12px 16px;
  font-size: 13.5px;
  cursor: pointer;
  margin-bottom: 14px;
}

._playedCard_n92lc_2005 {
  margin-top: 12px;
  background: var(--clrSecondary);
  border: 1px solid var(--clrTertiary);
  border-radius: 10px;
  overflow: hidden;
}

._playedHead_n92lc_2013 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 12px 16px;
  background: none;
  border: none;
  color: var(--clrTextPrimary);
  cursor: pointer;
}
._playedHead_n92lc_2013:hover {
  background: var(--clrTertiary);
}

._playedTitle_n92lc_2028 {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--clrTextTertiary);
}

._playedCount_n92lc_2036 {
  display: inline-block;
  margin-left: 4px;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--clrTertiary);
  color: var(--clrTextPrimary);
  font-variant-numeric: tabular-nums;
}

._playedChevron_n92lc_2046,
._playedChevronOpen_n92lc_2047 {
  width: 16px;
  height: 16px;
  color: var(--clrTextTertiary);
  transition: transform 160ms ease;
}

._playedChevronOpen_n92lc_2047 {
  transform: rotate(180deg);
}

._playedBody_n92lc_2058 {
  padding: 0 16px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

._playedRow_n92lc_2065 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 12px;
  background: var(--clrPrimary);
  border: 1px solid var(--clrTertiary);
  border-radius: 8px;
  color: var(--clrTextPrimary);
  text-decoration: none;
  font-size: 13.5px;
  transition: border-color 150ms ease, box-shadow 150ms ease, transform 150ms ease;
}
._playedRow_n92lc_2065:hover {
  border-color: var(--clrAccent-30);
  box-shadow: 0 4px 12px var(--clrAccent-10);
  transform: translateY(-2px);
}

._playedName_n92lc_2085 {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

._playedMeta_n92lc_2092 {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  font-size: 12px;
  color: var(--clrTextTertiary);
}

._playedShared_n92lc_2101 {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #059669;
}
._playedShared_n92lc_2101 svg {
  width: 12px;
  height: 12px;
}

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

._inUsePrimary_n92lc_2118,
._inUseSecondary_n92lc_2119 {
  width: 100%;
  min-height: 46px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 650;
  cursor: pointer;
  transition: border-color 150ms ease, box-shadow 150ms ease, transform 150ms ease;
}
._inUsePrimary_n92lc_2118:disabled,
._inUseSecondary_n92lc_2119:disabled {
  opacity: 0.55;
  cursor: default;
}

._inUsePrimary_n92lc_2118 {
  border: 1px solid transparent;
  background: #7c3aed;
  color: #fff;
}
._inUsePrimary_n92lc_2118:hover:not(:disabled) {
  border-color: var(--clrAccent-30);
  box-shadow: 0 4px 12px var(--clrAccent-10);
  transform: translateY(-2px);
}

._inUseSecondary_n92lc_2119 {
  background: var(--clrTertiary);
  border: 1px solid var(--clrTertiary);
  color: var(--clrTextPrimary);
}
._inUseSecondary_n92lc_2119:hover:not(:disabled) {
  border-color: var(--clrAccent-30);
  box-shadow: 0 4px 12px var(--clrAccent-10);
  transform: translateY(-2px);
}

._inUseHint_n92lc_2156 {
  margin: 0 0 8px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--clrTextTertiary);
}

._deckCardLocked_n92lc_2163 ._deckCard_n92lc_344 {
  opacity: 0.55;
  cursor: pointer;
}
._deckCardLocked_n92lc_2163 ._deckArt_n92lc_420 {
  opacity: 1;
}
._deckCardLocked_n92lc_2163:hover ._deckCard_n92lc_344 {
  opacity: 0.7;
}

._lockBadge_n92lc_2174 {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  align-self: flex-start;
  padding: 2px 8px;
  border-radius: 6px;
  background: var(--clrTertiary);
  border: 1px solid var(--clrTertiary);
  color: var(--clrTextTertiary);
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
._lockBadge_n92lc_2174 svg {
  width: 11px;
  height: 11px;
}

._paywallIcon_n92lc_2194 {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(124, 58, 237, 0.14);
  color: #7c3aed;
}
._paywallIcon_n92lc_2194 svg {
  width: 22px;
  height: 22px;
}

._paywallBody_n92lc_2208 {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

._paywallLead_n92lc_2214 {
  margin: 0 0 4px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--clrTextPrimary);
}

._paywallPrimary_n92lc_2221 {
  width: 100%;
  min-height: 48px;
  border: none;
  border-radius: 999px;
  background: #7c3aed;
  color: #fff;
  font-size: 14px;
  font-weight: 650;
  cursor: pointer;
}
._paywallPrimary_n92lc_2221:hover {
  background: #6d28d9;
}

._notesCard_n92lc_2236 {
  margin-top: 18px;
  padding: 14px 16px;
  background: var(--clrSecondary);
  border: 1px solid var(--clrTertiary);
  border-radius: 10px;
}

._notesHead_n92lc_2244 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}
._notesHead_n92lc_2244 h2 {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--clrTextTertiary);
}

._notesEdit_n92lc_2260 {
  background: none;
  border: none;
  color: #7c3aed;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  padding: 4px 6px;
}
._notesEdit_n92lc_2260:hover {
  text-decoration: underline;
}

._notesBody_n92lc_2273 {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--clrTextPrimary);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

._notesInput_n92lc_2282 {
  width: 100%;
  background: var(--clrPrimary);
  border: 1px solid var(--clrTertiary);
  border-radius: 8px;
  color: var(--clrTextPrimary);
  padding: 10px 12px;
  font-size: 14px;
  line-height: 1.55;
  font-family: inherit;
  resize: vertical;
}
._notesInput_n92lc_2282:focus {
  outline: none;
  border-color: #7c3aed;
}

._exportBody_n92lc_2299 {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 100%;
  min-width: 0;
  max-width: 100%;
}

/**
 * The preview viewport. The SCROLL LIVES HERE, never on .exportSheet —
 * html-to-image rasterises the capture target's own box, so when the sheet
 * itself scrolled its scrollbar was painted straight into the exported PNG.
 */
._exportPreview_n92lc_2313 {
  min-width: 0;
  width: 100%;
  max-width: 100%;
  max-height: min(56vh, 56dvh);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  border-radius: 12px;
  scrollbar-width: thin;
  scrollbar-color: rgba(128, 128, 128, 0.45) transparent;
}
._exportPreview_n92lc_2313::-webkit-scrollbar {
  width: 8px;
}
._exportPreview_n92lc_2313::-webkit-scrollbar-track {
  background: transparent;
}
._exportPreview_n92lc_2313::-webkit-scrollbar-thumb {
  background: rgba(128, 128, 128, 0.45);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
}

._exportScaleBox_n92lc_2338 {
  position: relative;
  width: 100%;
}

._exportScale_n92lc_2338 {
  position: absolute;
  top: 0;
  left: 0;
  transform-origin: top left;
}

._exportActions_n92lc_2350 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

._exportCancel_n92lc_2357 {
  background: none;
  border: none;
  color: var(--clrTextTertiary);
  font-size: 13px;
  padding: 8px 12px;
  cursor: pointer;
}
._exportCancel_n92lc_2357:hover:not(:disabled) {
  color: var(--clrTextPrimary);
}
._exportCancel_n92lc_2357:disabled {
  opacity: 0.5;
  cursor: default;
}

._exportDownloadBtn_n92lc_2373 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 48px;
  padding: 0 22px;
  border: none;
  border-radius: 999px;
  background: #7c3aed;
  color: #fff;
  font-size: 14px;
  font-weight: 650;
  cursor: pointer;
}
._exportDownloadBtn_n92lc_2373 svg {
  width: 17px;
  height: 17px;
}
._exportDownloadBtn_n92lc_2373:hover:not(:disabled) {
  background: #6d28d9;
}
._exportDownloadBtn_n92lc_2373:disabled {
  opacity: 0.6;
  cursor: default;
}

._exportSpinner_n92lc_2401 {
  animation: _exportSpin_n92lc_2401 1s linear infinite;
}

@keyframes _exportSpin_n92lc_2401 {
  to {
    transform: rotate(360deg);
  }
}
._signInBody_n92lc_2410 {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

._signInButtons_n92lc_2416 {
  display: flex;
  align-items: stretch;
  gap: 8px;
}

._importBody_n92lc_2422 {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
._importBody_n92lc_2422 code {
  background: var(--clrTertiary);
  border-radius: 4px;
  padding: 1px 5px;
  font-size: 12px;
}

._importText_n92lc_2434 {
  width: 100%;
  background: var(--clrSecondary);
  border: 1px solid var(--clrTertiary);
  border-radius: 8px;
  color: var(--clrTextPrimary);
  padding: 10px 12px;
  font-size: 13px;
  font-family: monospace;
  line-height: 1.5;
  resize: vertical;
}
._importText_n92lc_2434:focus {
  outline: none;
  border-color: #7c3aed;
}

._importErrors_n92lc_2451 {
  margin: 0;
  padding: 10px 12px 10px 28px;
  background: rgba(239, 68, 68, 0.08);
  border: 1px solid rgba(239, 68, 68, 0.45);
  border-radius: 8px;
  color: #ef4444;
  font-size: 12.5px;
  line-height: 1.5;
  max-height: 160px;
  overflow-y: auto;
}

._page_n92lc_228 {
  box-sizing: border-box;
  width: 100%;
  max-width: var(--site-max-width, 1440px);
  margin-inline: auto;
  padding-inline: var(--site-gutter, 20px);
}

._deckCardWithShelf_n92lc_2472 {
  display: flex;
  flex-direction: column;
}
._deckCardWithShelf_n92lc_2472 ._deckCard_n92lc_344 {
  position: relative;
  z-index: 1;
  flex: 1;
}
._deckCardWithShelf_n92lc_2472 ._deckCard_n92lc_344:hover {
  transform: none;
}

._deckShelf_n92lc_2485 {
  display: grid;
  grid-template-columns: 1fr 1.25fr;
  margin: -8px 10px 0;
  padding: 12px 6px 5px;
  border: 1px solid var(--clrTertiary);
  border-top: 0;
  border-radius: 0 0 11px 11px;
  background: color-mix(in srgb, var(--clrSecondary) 65%, var(--clrPrimary));
}
._deckShelf_n92lc_2485 button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 7px;
  min-width: 0;
  min-height: 40px;
  padding: 7px 8px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--clrTextSecondary);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
._deckShelf_n92lc_2485 button svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}
._deckShelf_n92lc_2485 button:hover {
  background: color-mix(in srgb, var(--clrTertiary) 55%, transparent);
  color: var(--clrTextPrimary);
}
._deckShelf_n92lc_2485 button:focus-visible {
  outline: 2px solid #7c3aed;
  outline-offset: 1px;
}
._deckShelf_n92lc_2485 button + button {
  border-left: 1px solid var(--clrTertiary);
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}html {
  color-scheme: dark;
}

html:has(body._themeLight_w5q6b_5),
html:has(body._themePastelLight_w5q6b_6) {
  color-scheme: light;
}

:root {
  --clrPrimary: #F4F4F5;
  --clrPrimary30: rgba(244, 244, 245, 0.3);
  --clrSecondary: #FEFEFE;
  --clrTertiary: #E4E4E7;
  --clrPrimaryReverse: #101418;
  --clrSecondaryReverse: #0A0F14;
  --clrTertiaryReverse: #212327;
  --clrTextPrimary: #101418;
  --clrTextSecondary: #2E3337;
  --clrTextTertiary: #7C7C7C;
  --clrTextPrimaryReverse: #F4F4F5;
  --clrTextSecondaryReverse: #CDCDCD;
  --clrTextTertiaryReverse: #8A8A8A;
  --clrError-100: #641f1f;
  --clrError-50: #c84d4d;
  --clrSuccess-100: #2d692d;
  --clrSuccess-50: #3EA03E;
  --clrSuccessOnTint: #0d260d;
  --clrErrorOnTint: #2e0a0a;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgb(50, 126, 75, 0.1) 30%,
          rgb(94, 178, 122, 0.36) 60%,
          rgb(144, 215, 168) 100%);
  --clrNavBackground: rgba(244, 244, 245, 0.15);
  --clrNavItemActive: rgba(211, 211, 211, 0.4);
  --clrNavItemHover: rgba(0, 0, 0, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #F4F4F5;
  --clrGlassBackground: rgba(255, 255, 255, 0.5);
  --clrGlassBackgroundStrong: rgba(255, 255, 255, 0.3);
  --clrGlassBorder: rgba(0, 0, 0, 0.1);
  --snackbarDefaultBg: #F1ECE9;
  --snackbarDefaultText: #5D605C;
  --snackbarDefaultBorder: #5D605C;
  --snackbarDefaultIcon: #5D605C;
  --snackbarSuccessBg: #E0F1D9;
  --snackbarSuccessText: #358935;
  --snackbarSuccessBorder: #358935;
  --snackbarSuccessIcon: #358935;
  --snackbarErrorBg: #F9E1DC;
  --snackbarErrorText: #C80D12;
  --snackbarErrorBorder: #C80D12;
  --snackbarErrorIcon: #C80D12;
}

._themeLight_w5q6b_5 {
  --clrPrimary: #F4F4F5;
  --clrPrimary30: rgba(244, 244, 245, 0.3);
  --clrSecondary: #FEFEFE;
  --clrTertiary: #E4E4E7;
  --clrPrimaryReverse: #101418;
  --clrSecondaryReverse: #0A0F14;
  --clrTertiaryReverse: #212327;
  --clrTextPrimary: #101418;
  --clrTextSecondary: #2E3337;
  --clrTextTertiary: #7C7C7C;
  --clrTextPrimaryReverse: #F4F4F5;
  --clrTextSecondaryReverse: #CDCDCD;
  --clrTextTertiaryReverse: #8A8A8A;
  --clrError-100: #c03b3b;
  --clrError-50: #f6c5c5;
  --clrSuccess-100: #30d330;
  --clrSuccess-50: #bbffbb;
  --clrSuccessOnTint: #1f4f1f;
  --clrErrorOnTint: #7a1f1f;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgb(50, 126, 75, 0.1) 30%,
          rgb(94, 178, 122, 0.36) 60%,
          rgb(144, 215, 168) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(175, 49, 49, 0.1) 30%,
          rgba(238, 70, 70, 0.36) 60%,
          rgb(255, 173, 173) 100%);
  --clrNavBackground: rgba(244, 244, 245, 0.15);
  --clrNavItemActive: rgba(211, 211, 211, 0.4);
  --clrNavItemHover: rgba(0, 0, 0, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0000c1;
  --clrGlassBackground: rgba(255, 255, 255, 0.5);
  --clrGlassBackgroundStrong: rgba(255, 255, 255, 0.5);
  --clrGlassBorder: rgba(0, 0, 0, 0.1);
  --snackbarDefaultBg: #F1ECE9;
  --snackbarDefaultText: #5D605C;
  --snackbarDefaultBorder: #5D605C;
  --snackbarDefaultIcon: #5D605C;
  --snackbarSuccessBg: #E0F1D9;
  --snackbarSuccessText: #358935;
  --snackbarSuccessBorder: #358935;
  --snackbarSuccessIcon: #358935;
  --snackbarErrorBg: #F9E1DC;
  --snackbarErrorText: #C80D12;
  --snackbarErrorBorder: #C80D12;
  --snackbarErrorIcon: #C80D12;
}

._themeDark_w5q6b_131 {
  --clrPrimary: #0F1418;
  --clrPrimary30: rgba(15, 20, 25, 0.3);
  --clrSecondary: #0A0F14;
  --clrTertiary: #212327;
  --clrPrimaryReverse: #F4F4F5;
  --clrSecondaryReverse: #FEFEFE;
  --clrTertiaryReverse: #E4E4E7;
  --clrTextPrimary: #F4F4F5;
  --clrTextSecondary: #CDCDCD;
  --clrTextTertiary: #8A8A8A;
  --clrTextPrimaryReverse: #101418;
  --clrTextSecondaryReverse: #2E3337;
  --clrTextTertiaryReverse: #7C7C7C;
  --clrError-100: #c84d4d;
  --clrError-50: #641f1f;
  --clrSuccess-100: #3EA03E;
  --clrSuccess-50: #2d692d;
  --clrSuccessOnTint: #d6ffd6;
  --clrErrorOnTint: #ffd6d6;
  --clrWarning-100: #E88434;
  --clrWarning-50: #C49168;
  --clrAccent-100: #FFFFFF;
  --clrAccent-80: rgba(255, 255, 255, 0.8);
  --clrAccent-60: rgba(255, 255, 255, 0.6);
  --clrAccent-50: rgba(255, 255, 255, 0.5);
  --clrAccent-40: rgba(255, 255, 255, 0.4);
  --clrAccent-30: rgba(255, 255, 255, 0.3);
  --clrAccent-20: rgba(255, 255, 255, 0.2);
  --clrAccent-10: rgba(255, 255, 255, 0.1);
  --clrGradient: linear-gradient(90deg, #262a2e 10%, var(--clrPrimary) 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(50, 126, 75, 0.15) 30%,
          rgba(50, 126, 75, 0.3) 60%,
          rgba(50, 126, 75, 0.5) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(167, 44, 44, 0) 0%,
          rgba(167, 44, 44, 0.15) 30%,
          rgba(167, 44, 44, 0.3) 60%,
          rgba(167, 44, 44, 0.5) 100%);
  --clrNavBackground: rgba(0, 0, 0, 0.15);
  --clrNavItemActive: rgba(24, 24, 24, 0.49);
  --clrNavItemHover: rgba(255, 255, 255, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0F1418;
  --clrGlassBackground: rgba(15, 20, 24, 0.5);
  --clrGlassBackgroundStrong: rgba(15, 20, 24, 0.6);
  --clrGlassBorder: rgba(255, 255, 255, 0.1);
  --snackbarDefaultBg: #414141;
  --snackbarDefaultText: #BABABA;
  --snackbarDefaultBorder: #BABABA;
  --snackbarDefaultIcon: #BABABA;
  --snackbarSuccessBg: #145E18;
  --snackbarSuccessText: #8FE094;
  --snackbarSuccessBorder: #8FE094;
  --snackbarSuccessIcon: #8FE094;
  --snackbarErrorBg: #910C09;
  --snackbarErrorText: #FE9E9D;
  --snackbarErrorBorder: #FE9E9D;
  --snackbarErrorIcon: #FE9E9D;
}

/* 

Note: 
    If you want something done quick, ask AI to buuild your color themes.
    If you want to do it right and tidy though, do it manually. 

    - Theo

*/
:root {
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --font-accent: "Jaro", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}

html,
body {
  font-family: var(--font-sans);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

._wrapper_w5q6b_216 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 0;
  width: 100%;
}

._container_w5q6b_225 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 0;
  width: 100%;
  min-height: 72px;
  border: 1px solid var(--clrTertiary);
  border-radius: 8px;
  overflow: hidden;
  background-color: transparent;
  position: relative;
  transition: border-color 0.2s ease;
}
._container_w5q6b_225._editable_w5q6b_240 {
  cursor: pointer;
}
._container_w5q6b_225._editable_w5q6b_240:hover {
  border-color: var(--clrAccent-40);
}

._deleteBtn_w5q6b_247 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  min-width: 0;
  width: 0;
  height: 50px;
  background: transparent;
  border-radius: 300px;
  border: none;
  color: var(--clrError-100);
  font-size: 18px;
  cursor: pointer;
  transition: all 0.3s ease;
  overflow: hidden;
  flex-shrink: 0;
}
._deleteBtn_w5q6b_247:hover {
  background-color: var(--clrError-50);
}
._deleteBtn_w5q6b_247._visible_w5q6b_269 {
  min-width: 48px;
  width: 48px;
  margin-left: 8px;
  border: 1px solid var(--clrError-100);
}

._editBtn_w5q6b_276 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  min-width: 0;
  width: 0;
  height: 50px;
  background: transparent;
  border-radius: 300px;
  border: none;
  color: var(--clrAccent-80);
  font-size: 18px;
  cursor: pointer;
  transition: all 0.3s ease;
  overflow: hidden;
  flex-shrink: 0;
}
._editBtn_w5q6b_276:hover {
  background-color: var(--clrTertiary);
}
._editBtn_w5q6b_276._visible_w5q6b_269 {
  min-width: 48px;
  width: 48px;
  margin-left: 8px;
  border: 1px solid var(--clrAccent-30);
}

._roundNumber_w5q6b_305 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  min-width: 24px;
  font-size: 12px;
  font-weight: 600;
  font-family: var(--font-sans);
  color: var(--clrTextSecondary);
  flex-shrink: 0;
}

._leaderImage_w5q6b_319 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: 4px 0;
  flex-shrink: 0;
}

._roundInfoSection_w5q6b_329 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 2px;
  flex: 1 1 auto;
  min-width: 0;
  padding: 8px 8px 8px 8px;
  overflow: hidden;
}

._leaderName_w5q6b_341 {
  font-size: 14px;
  font-weight: 600;
  font-family: var(--font-sans);
  color: var(--clrAccent-80);
  line-height: 1.3;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  overflow-wrap: break-word;
}

._noteContainer_w5q6b_355 {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 4px;
  width: 100%;
  min-width: 0;
  cursor: pointer;
  outline: none;
}

._noteIcon_w5q6b_367 {
  width: 14px;
  height: 14px;
  color: var(--clrAccent-40);
  transition: color 0.2s ease;
  flex-shrink: 0;
  margin-top: 1px;
}

._noteText_w5q6b_376 {
  font-size: 10px;
  font-family: var(--font-sans);
  color: var(--clrAccent-50);
  line-height: 12px;
  margin: 0;
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow-wrap: break-word;
  word-break: break-word;
}
._noteText_w5q6b_376._expanded_w5q6b_392 {
  display: block;
  -webkit-line-clamp: unset;
  line-clamp: unset;
}

._resultSection_w5q6b_398 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  gap: 0;
  min-height: 72px;
  align-self: stretch;
  border-radius: 0 8px 8px 0;
  padding-right: 10px;
  min-width: 120px;
  flex-shrink: 0;
}
._resultSection_w5q6b_398._win_w5q6b_411 {
  background: var(--clrRoundWin);
}
._resultSection_w5q6b_398._lose_w5q6b_414 {
  background: var(--clrRoundLoss);
}

._separator_w5q6b_418 {
  width: 1px;
  height: 40px;
  background: linear-gradient(to bottom, transparent 0%, color-mix(in srgb, var(--clrTextTertiary) 55%, transparent) 50%, transparent 100%);
  margin-right: 6px;
}

._chips_w5q6b_425 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  min-width: 90px;
}html {
  color-scheme: dark;
}

html:has(body._themeLight_19nq2_5),
html:has(body._themePastelLight_19nq2_6) {
  color-scheme: light;
}

:root {
  --clrPrimary: #F4F4F5;
  --clrPrimary30: rgba(244, 244, 245, 0.3);
  --clrSecondary: #FEFEFE;
  --clrTertiary: #E4E4E7;
  --clrPrimaryReverse: #101418;
  --clrSecondaryReverse: #0A0F14;
  --clrTertiaryReverse: #212327;
  --clrTextPrimary: #101418;
  --clrTextSecondary: #2E3337;
  --clrTextTertiary: #7C7C7C;
  --clrTextPrimaryReverse: #F4F4F5;
  --clrTextSecondaryReverse: #CDCDCD;
  --clrTextTertiaryReverse: #8A8A8A;
  --clrError-100: #641f1f;
  --clrError-50: #c84d4d;
  --clrSuccess-100: #2d692d;
  --clrSuccess-50: #3EA03E;
  --clrSuccessOnTint: #0d260d;
  --clrErrorOnTint: #2e0a0a;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgb(50, 126, 75, 0.1) 30%,
          rgb(94, 178, 122, 0.36) 60%,
          rgb(144, 215, 168) 100%);
  --clrNavBackground: rgba(244, 244, 245, 0.15);
  --clrNavItemActive: rgba(211, 211, 211, 0.4);
  --clrNavItemHover: rgba(0, 0, 0, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #F4F4F5;
  --clrGlassBackground: rgba(255, 255, 255, 0.5);
  --clrGlassBackgroundStrong: rgba(255, 255, 255, 0.3);
  --clrGlassBorder: rgba(0, 0, 0, 0.1);
  --snackbarDefaultBg: #F1ECE9;
  --snackbarDefaultText: #5D605C;
  --snackbarDefaultBorder: #5D605C;
  --snackbarDefaultIcon: #5D605C;
  --snackbarSuccessBg: #E0F1D9;
  --snackbarSuccessText: #358935;
  --snackbarSuccessBorder: #358935;
  --snackbarSuccessIcon: #358935;
  --snackbarErrorBg: #F9E1DC;
  --snackbarErrorText: #C80D12;
  --snackbarErrorBorder: #C80D12;
  --snackbarErrorIcon: #C80D12;
}

._themeLight_19nq2_5 {
  --clrPrimary: #F4F4F5;
  --clrPrimary30: rgba(244, 244, 245, 0.3);
  --clrSecondary: #FEFEFE;
  --clrTertiary: #E4E4E7;
  --clrPrimaryReverse: #101418;
  --clrSecondaryReverse: #0A0F14;
  --clrTertiaryReverse: #212327;
  --clrTextPrimary: #101418;
  --clrTextSecondary: #2E3337;
  --clrTextTertiary: #7C7C7C;
  --clrTextPrimaryReverse: #F4F4F5;
  --clrTextSecondaryReverse: #CDCDCD;
  --clrTextTertiaryReverse: #8A8A8A;
  --clrError-100: #c03b3b;
  --clrError-50: #f6c5c5;
  --clrSuccess-100: #30d330;
  --clrSuccess-50: #bbffbb;
  --clrSuccessOnTint: #1f4f1f;
  --clrErrorOnTint: #7a1f1f;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgb(50, 126, 75, 0.1) 30%,
          rgb(94, 178, 122, 0.36) 60%,
          rgb(144, 215, 168) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(175, 49, 49, 0.1) 30%,
          rgba(238, 70, 70, 0.36) 60%,
          rgb(255, 173, 173) 100%);
  --clrNavBackground: rgba(244, 244, 245, 0.15);
  --clrNavItemActive: rgba(211, 211, 211, 0.4);
  --clrNavItemHover: rgba(0, 0, 0, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0000c1;
  --clrGlassBackground: rgba(255, 255, 255, 0.5);
  --clrGlassBackgroundStrong: rgba(255, 255, 255, 0.5);
  --clrGlassBorder: rgba(0, 0, 0, 0.1);
  --snackbarDefaultBg: #F1ECE9;
  --snackbarDefaultText: #5D605C;
  --snackbarDefaultBorder: #5D605C;
  --snackbarDefaultIcon: #5D605C;
  --snackbarSuccessBg: #E0F1D9;
  --snackbarSuccessText: #358935;
  --snackbarSuccessBorder: #358935;
  --snackbarSuccessIcon: #358935;
  --snackbarErrorBg: #F9E1DC;
  --snackbarErrorText: #C80D12;
  --snackbarErrorBorder: #C80D12;
  --snackbarErrorIcon: #C80D12;
}

._themeDark_19nq2_131 {
  --clrPrimary: #0F1418;
  --clrPrimary30: rgba(15, 20, 25, 0.3);
  --clrSecondary: #0A0F14;
  --clrTertiary: #212327;
  --clrPrimaryReverse: #F4F4F5;
  --clrSecondaryReverse: #FEFEFE;
  --clrTertiaryReverse: #E4E4E7;
  --clrTextPrimary: #F4F4F5;
  --clrTextSecondary: #CDCDCD;
  --clrTextTertiary: #8A8A8A;
  --clrTextPrimaryReverse: #101418;
  --clrTextSecondaryReverse: #2E3337;
  --clrTextTertiaryReverse: #7C7C7C;
  --clrError-100: #c84d4d;
  --clrError-50: #641f1f;
  --clrSuccess-100: #3EA03E;
  --clrSuccess-50: #2d692d;
  --clrSuccessOnTint: #d6ffd6;
  --clrErrorOnTint: #ffd6d6;
  --clrWarning-100: #E88434;
  --clrWarning-50: #C49168;
  --clrAccent-100: #FFFFFF;
  --clrAccent-80: rgba(255, 255, 255, 0.8);
  --clrAccent-60: rgba(255, 255, 255, 0.6);
  --clrAccent-50: rgba(255, 255, 255, 0.5);
  --clrAccent-40: rgba(255, 255, 255, 0.4);
  --clrAccent-30: rgba(255, 255, 255, 0.3);
  --clrAccent-20: rgba(255, 255, 255, 0.2);
  --clrAccent-10: rgba(255, 255, 255, 0.1);
  --clrGradient: linear-gradient(90deg, #262a2e 10%, var(--clrPrimary) 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(50, 126, 75, 0.15) 30%,
          rgba(50, 126, 75, 0.3) 60%,
          rgba(50, 126, 75, 0.5) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(167, 44, 44, 0) 0%,
          rgba(167, 44, 44, 0.15) 30%,
          rgba(167, 44, 44, 0.3) 60%,
          rgba(167, 44, 44, 0.5) 100%);
  --clrNavBackground: rgba(0, 0, 0, 0.15);
  --clrNavItemActive: rgba(24, 24, 24, 0.49);
  --clrNavItemHover: rgba(255, 255, 255, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0F1418;
  --clrGlassBackground: rgba(15, 20, 24, 0.5);
  --clrGlassBackgroundStrong: rgba(15, 20, 24, 0.6);
  --clrGlassBorder: rgba(255, 255, 255, 0.1);
  --snackbarDefaultBg: #414141;
  --snackbarDefaultText: #BABABA;
  --snackbarDefaultBorder: #BABABA;
  --snackbarDefaultIcon: #BABABA;
  --snackbarSuccessBg: #145E18;
  --snackbarSuccessText: #8FE094;
  --snackbarSuccessBorder: #8FE094;
  --snackbarSuccessIcon: #8FE094;
  --snackbarErrorBg: #910C09;
  --snackbarErrorText: #FE9E9D;
  --snackbarErrorBorder: #FE9E9D;
  --snackbarErrorIcon: #FE9E9D;
}

/* 

Note: 
    If you want something done quick, ask AI to buuild your color themes.
    If you want to do it right and tidy though, do it manually. 

    - Theo

*/
:root {
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --font-accent: "Jaro", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}

html,
body {
  font-family: var(--font-sans);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

._panel_19nq2_216 {
  background: var(--clrSecondary);
  border: 1px solid var(--clrTertiary);
  border-radius: 12px;
  padding: 14px 16px;
}

._panelTitle_19nq2_223 {
  margin: 0 0 10px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--clrTextTertiary);
}

._panelHint_19nq2_232 {
  margin: 0 0 12px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--clrTextSecondary);
}

._panelBtn_19nq2_239 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  min-height: 42px;
  border-radius: 10px;
  border: 1px solid var(--clrTertiary);
  background: var(--clrPrimary);
  color: var(--clrTextPrimary);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
._panelBtn_19nq2_239 svg {
  width: 16px;
  height: 16px;
}
._panelBtn_19nq2_239:hover:not(:disabled) {
  border-color: var(--clrAccent-50);
}
._panelBtn_19nq2_239:disabled {
  opacity: 0.55;
  cursor: default;
}

._panelActions_19nq2_266 {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 12px;
}

._panelRemove_19nq2_273 {
  background: none;
  border: none;
  color: var(--clrTextTertiary);
  font-size: 12.5px;
  padding: 6px;
  cursor: pointer;
}
._panelRemove_19nq2_273:hover:not(:disabled) {
  color: var(--clrError-100);
}
._panelRemove_19nq2_273:disabled {
  opacity: 0.55;
  cursor: default;
}

._attached_19nq2_289 {
  display: flex;
  gap: 12px;
  text-decoration: none;
  color: inherit;
}

._attachedArt_19nq2_296 {
  width: 64px;
  height: 64px;
  flex-shrink: 0;
  line-height: 0;
}
._attachedArt_19nq2_296 img {
  display: block;
}

._attachedMeta_19nq2_306 {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}
._attachedMeta_19nq2_306 strong {
  font-size: 14px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

._attachedSub_19nq2_320 {
  font-size: 12px;
  color: var(--clrTextTertiary);
  font-variant-numeric: tabular-nums;
}

._attachedColors_19nq2_326 {
  display: flex;
  gap: 4px;
}

._colorDot_19nq2_331 {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 1px solid rgba(128, 128, 128, 0.35);
}
._colorDot_19nq2_331[data-color=Red] {
  background: #dc2626;
}
._colorDot_19nq2_331[data-color=Green] {
  background: #16a34a;
}
._colorDot_19nq2_331[data-color=Blue] {
  background: #2563eb;
}
._colorDot_19nq2_331[data-color=Purple] {
  background: #7c3aed;
}
._colorDot_19nq2_331[data-color=Black] {
  background: #18181b;
}
._colorDot_19nq2_331[data-color=Yellow] {
  background: #eab308;
}

._pickerEmpty_19nq2_356 {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--clrTextSecondary);
}

._pickerList_19nq2_363 {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}

._pickerRow_19nq2_373 {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 8px;
  background: var(--clrPrimary);
  border: 1px solid var(--clrTertiary);
  border-radius: 10px;
  color: var(--clrTextPrimary);
  cursor: pointer;
  text-align: left;
}
._pickerRow_19nq2_373:hover {
  border-color: var(--clrAccent-50);
}

._pickerArt_19nq2_390 {
  width: 64px;
  height: 64px;
  flex-shrink: 0;
  line-height: 0;
}
._pickerArt_19nq2_390 img {
  display: block;
}

._pickerMeta_19nq2_400 {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
._pickerMeta_19nq2_400 strong {
  font-size: 14px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

._pickerSub_19nq2_414 {
  font-size: 12px;
  color: var(--clrTextTertiary);
  font-variant-numeric: tabular-nums;
}html {
  color-scheme: dark;
}

html:has(body._themeLight_1rsvh_5),
html:has(body._themePastelLight_1rsvh_6) {
  color-scheme: light;
}

:root {
  --clrPrimary: #F4F4F5;
  --clrPrimary30: rgba(244, 244, 245, 0.3);
  --clrSecondary: #FEFEFE;
  --clrTertiary: #E4E4E7;
  --clrPrimaryReverse: #101418;
  --clrSecondaryReverse: #0A0F14;
  --clrTertiaryReverse: #212327;
  --clrTextPrimary: #101418;
  --clrTextSecondary: #2E3337;
  --clrTextTertiary: #7C7C7C;
  --clrTextPrimaryReverse: #F4F4F5;
  --clrTextSecondaryReverse: #CDCDCD;
  --clrTextTertiaryReverse: #8A8A8A;
  --clrError-100: #641f1f;
  --clrError-50: #c84d4d;
  --clrSuccess-100: #2d692d;
  --clrSuccess-50: #3EA03E;
  --clrSuccessOnTint: #0d260d;
  --clrErrorOnTint: #2e0a0a;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgb(50, 126, 75, 0.1) 30%,
          rgb(94, 178, 122, 0.36) 60%,
          rgb(144, 215, 168) 100%);
  --clrNavBackground: rgba(244, 244, 245, 0.15);
  --clrNavItemActive: rgba(211, 211, 211, 0.4);
  --clrNavItemHover: rgba(0, 0, 0, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #F4F4F5;
  --clrGlassBackground: rgba(255, 255, 255, 0.5);
  --clrGlassBackgroundStrong: rgba(255, 255, 255, 0.3);
  --clrGlassBorder: rgba(0, 0, 0, 0.1);
  --snackbarDefaultBg: #F1ECE9;
  --snackbarDefaultText: #5D605C;
  --snackbarDefaultBorder: #5D605C;
  --snackbarDefaultIcon: #5D605C;
  --snackbarSuccessBg: #E0F1D9;
  --snackbarSuccessText: #358935;
  --snackbarSuccessBorder: #358935;
  --snackbarSuccessIcon: #358935;
  --snackbarErrorBg: #F9E1DC;
  --snackbarErrorText: #C80D12;
  --snackbarErrorBorder: #C80D12;
  --snackbarErrorIcon: #C80D12;
}

._themeLight_1rsvh_5 {
  --clrPrimary: #F4F4F5;
  --clrPrimary30: rgba(244, 244, 245, 0.3);
  --clrSecondary: #FEFEFE;
  --clrTertiary: #E4E4E7;
  --clrPrimaryReverse: #101418;
  --clrSecondaryReverse: #0A0F14;
  --clrTertiaryReverse: #212327;
  --clrTextPrimary: #101418;
  --clrTextSecondary: #2E3337;
  --clrTextTertiary: #7C7C7C;
  --clrTextPrimaryReverse: #F4F4F5;
  --clrTextSecondaryReverse: #CDCDCD;
  --clrTextTertiaryReverse: #8A8A8A;
  --clrError-100: #c03b3b;
  --clrError-50: #f6c5c5;
  --clrSuccess-100: #30d330;
  --clrSuccess-50: #bbffbb;
  --clrSuccessOnTint: #1f4f1f;
  --clrErrorOnTint: #7a1f1f;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgb(50, 126, 75, 0.1) 30%,
          rgb(94, 178, 122, 0.36) 60%,
          rgb(144, 215, 168) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(175, 49, 49, 0.1) 30%,
          rgba(238, 70, 70, 0.36) 60%,
          rgb(255, 173, 173) 100%);
  --clrNavBackground: rgba(244, 244, 245, 0.15);
  --clrNavItemActive: rgba(211, 211, 211, 0.4);
  --clrNavItemHover: rgba(0, 0, 0, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0000c1;
  --clrGlassBackground: rgba(255, 255, 255, 0.5);
  --clrGlassBackgroundStrong: rgba(255, 255, 255, 0.5);
  --clrGlassBorder: rgba(0, 0, 0, 0.1);
  --snackbarDefaultBg: #F1ECE9;
  --snackbarDefaultText: #5D605C;
  --snackbarDefaultBorder: #5D605C;
  --snackbarDefaultIcon: #5D605C;
  --snackbarSuccessBg: #E0F1D9;
  --snackbarSuccessText: #358935;
  --snackbarSuccessBorder: #358935;
  --snackbarSuccessIcon: #358935;
  --snackbarErrorBg: #F9E1DC;
  --snackbarErrorText: #C80D12;
  --snackbarErrorBorder: #C80D12;
  --snackbarErrorIcon: #C80D12;
}

._themeDark_1rsvh_131 {
  --clrPrimary: #0F1418;
  --clrPrimary30: rgba(15, 20, 25, 0.3);
  --clrSecondary: #0A0F14;
  --clrTertiary: #212327;
  --clrPrimaryReverse: #F4F4F5;
  --clrSecondaryReverse: #FEFEFE;
  --clrTertiaryReverse: #E4E4E7;
  --clrTextPrimary: #F4F4F5;
  --clrTextSecondary: #CDCDCD;
  --clrTextTertiary: #8A8A8A;
  --clrTextPrimaryReverse: #101418;
  --clrTextSecondaryReverse: #2E3337;
  --clrTextTertiaryReverse: #7C7C7C;
  --clrError-100: #c84d4d;
  --clrError-50: #641f1f;
  --clrSuccess-100: #3EA03E;
  --clrSuccess-50: #2d692d;
  --clrSuccessOnTint: #d6ffd6;
  --clrErrorOnTint: #ffd6d6;
  --clrWarning-100: #E88434;
  --clrWarning-50: #C49168;
  --clrAccent-100: #FFFFFF;
  --clrAccent-80: rgba(255, 255, 255, 0.8);
  --clrAccent-60: rgba(255, 255, 255, 0.6);
  --clrAccent-50: rgba(255, 255, 255, 0.5);
  --clrAccent-40: rgba(255, 255, 255, 0.4);
  --clrAccent-30: rgba(255, 255, 255, 0.3);
  --clrAccent-20: rgba(255, 255, 255, 0.2);
  --clrAccent-10: rgba(255, 255, 255, 0.1);
  --clrGradient: linear-gradient(90deg, #262a2e 10%, var(--clrPrimary) 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(50, 126, 75, 0.15) 30%,
          rgba(50, 126, 75, 0.3) 60%,
          rgba(50, 126, 75, 0.5) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(167, 44, 44, 0) 0%,
          rgba(167, 44, 44, 0.15) 30%,
          rgba(167, 44, 44, 0.3) 60%,
          rgba(167, 44, 44, 0.5) 100%);
  --clrNavBackground: rgba(0, 0, 0, 0.15);
  --clrNavItemActive: rgba(24, 24, 24, 0.49);
  --clrNavItemHover: rgba(255, 255, 255, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0F1418;
  --clrGlassBackground: rgba(15, 20, 24, 0.5);
  --clrGlassBackgroundStrong: rgba(15, 20, 24, 0.6);
  --clrGlassBorder: rgba(255, 255, 255, 0.1);
  --snackbarDefaultBg: #414141;
  --snackbarDefaultText: #BABABA;
  --snackbarDefaultBorder: #BABABA;
  --snackbarDefaultIcon: #BABABA;
  --snackbarSuccessBg: #145E18;
  --snackbarSuccessText: #8FE094;
  --snackbarSuccessBorder: #8FE094;
  --snackbarSuccessIcon: #8FE094;
  --snackbarErrorBg: #910C09;
  --snackbarErrorText: #FE9E9D;
  --snackbarErrorBorder: #FE9E9D;
  --snackbarErrorIcon: #FE9E9D;
}

/* 

Note: 
    If you want something done quick, ask AI to buuild your color themes.
    If you want to do it right and tidy though, do it manually. 

    - Theo

*/
:root {
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --font-accent: "Jaro", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}

html,
body {
  font-family: var(--font-sans);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

._modalField_1rsvh_216 {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 14px;
  color: var(--clrAccent-60);
}
._modalField_1rsvh_216 input {
  max-width: 100px;
}

._modalError_1rsvh_230 {
  color: #ff6b6b;
  font-size: 14px;
  margin: 0;
}html {
  color-scheme: dark;
}

html:has(body._themeLight_1vfyb_5),
html:has(body._themePastelLight_1vfyb_6) {
  color-scheme: light;
}

:root {
  --clrPrimary: #F4F4F5;
  --clrPrimary30: rgba(244, 244, 245, 0.3);
  --clrSecondary: #FEFEFE;
  --clrTertiary: #E4E4E7;
  --clrPrimaryReverse: #101418;
  --clrSecondaryReverse: #0A0F14;
  --clrTertiaryReverse: #212327;
  --clrTextPrimary: #101418;
  --clrTextSecondary: #2E3337;
  --clrTextTertiary: #7C7C7C;
  --clrTextPrimaryReverse: #F4F4F5;
  --clrTextSecondaryReverse: #CDCDCD;
  --clrTextTertiaryReverse: #8A8A8A;
  --clrError-100: #641f1f;
  --clrError-50: #c84d4d;
  --clrSuccess-100: #2d692d;
  --clrSuccess-50: #3EA03E;
  --clrSuccessOnTint: #0d260d;
  --clrErrorOnTint: #2e0a0a;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgb(50, 126, 75, 0.1) 30%,
          rgb(94, 178, 122, 0.36) 60%,
          rgb(144, 215, 168) 100%);
  --clrNavBackground: rgba(244, 244, 245, 0.15);
  --clrNavItemActive: rgba(211, 211, 211, 0.4);
  --clrNavItemHover: rgba(0, 0, 0, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #F4F4F5;
  --clrGlassBackground: rgba(255, 255, 255, 0.5);
  --clrGlassBackgroundStrong: rgba(255, 255, 255, 0.3);
  --clrGlassBorder: rgba(0, 0, 0, 0.1);
  --snackbarDefaultBg: #F1ECE9;
  --snackbarDefaultText: #5D605C;
  --snackbarDefaultBorder: #5D605C;
  --snackbarDefaultIcon: #5D605C;
  --snackbarSuccessBg: #E0F1D9;
  --snackbarSuccessText: #358935;
  --snackbarSuccessBorder: #358935;
  --snackbarSuccessIcon: #358935;
  --snackbarErrorBg: #F9E1DC;
  --snackbarErrorText: #C80D12;
  --snackbarErrorBorder: #C80D12;
  --snackbarErrorIcon: #C80D12;
}

._themeLight_1vfyb_5 {
  --clrPrimary: #F4F4F5;
  --clrPrimary30: rgba(244, 244, 245, 0.3);
  --clrSecondary: #FEFEFE;
  --clrTertiary: #E4E4E7;
  --clrPrimaryReverse: #101418;
  --clrSecondaryReverse: #0A0F14;
  --clrTertiaryReverse: #212327;
  --clrTextPrimary: #101418;
  --clrTextSecondary: #2E3337;
  --clrTextTertiary: #7C7C7C;
  --clrTextPrimaryReverse: #F4F4F5;
  --clrTextSecondaryReverse: #CDCDCD;
  --clrTextTertiaryReverse: #8A8A8A;
  --clrError-100: #c03b3b;
  --clrError-50: #f6c5c5;
  --clrSuccess-100: #30d330;
  --clrSuccess-50: #bbffbb;
  --clrSuccessOnTint: #1f4f1f;
  --clrErrorOnTint: #7a1f1f;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgb(50, 126, 75, 0.1) 30%,
          rgb(94, 178, 122, 0.36) 60%,
          rgb(144, 215, 168) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(175, 49, 49, 0.1) 30%,
          rgba(238, 70, 70, 0.36) 60%,
          rgb(255, 173, 173) 100%);
  --clrNavBackground: rgba(244, 244, 245, 0.15);
  --clrNavItemActive: rgba(211, 211, 211, 0.4);
  --clrNavItemHover: rgba(0, 0, 0, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0000c1;
  --clrGlassBackground: rgba(255, 255, 255, 0.5);
  --clrGlassBackgroundStrong: rgba(255, 255, 255, 0.5);
  --clrGlassBorder: rgba(0, 0, 0, 0.1);
  --snackbarDefaultBg: #F1ECE9;
  --snackbarDefaultText: #5D605C;
  --snackbarDefaultBorder: #5D605C;
  --snackbarDefaultIcon: #5D605C;
  --snackbarSuccessBg: #E0F1D9;
  --snackbarSuccessText: #358935;
  --snackbarSuccessBorder: #358935;
  --snackbarSuccessIcon: #358935;
  --snackbarErrorBg: #F9E1DC;
  --snackbarErrorText: #C80D12;
  --snackbarErrorBorder: #C80D12;
  --snackbarErrorIcon: #C80D12;
}

._themeDark_1vfyb_131 {
  --clrPrimary: #0F1418;
  --clrPrimary30: rgba(15, 20, 25, 0.3);
  --clrSecondary: #0A0F14;
  --clrTertiary: #212327;
  --clrPrimaryReverse: #F4F4F5;
  --clrSecondaryReverse: #FEFEFE;
  --clrTertiaryReverse: #E4E4E7;
  --clrTextPrimary: #F4F4F5;
  --clrTextSecondary: #CDCDCD;
  --clrTextTertiary: #8A8A8A;
  --clrTextPrimaryReverse: #101418;
  --clrTextSecondaryReverse: #2E3337;
  --clrTextTertiaryReverse: #7C7C7C;
  --clrError-100: #c84d4d;
  --clrError-50: #641f1f;
  --clrSuccess-100: #3EA03E;
  --clrSuccess-50: #2d692d;
  --clrSuccessOnTint: #d6ffd6;
  --clrErrorOnTint: #ffd6d6;
  --clrWarning-100: #E88434;
  --clrWarning-50: #C49168;
  --clrAccent-100: #FFFFFF;
  --clrAccent-80: rgba(255, 255, 255, 0.8);
  --clrAccent-60: rgba(255, 255, 255, 0.6);
  --clrAccent-50: rgba(255, 255, 255, 0.5);
  --clrAccent-40: rgba(255, 255, 255, 0.4);
  --clrAccent-30: rgba(255, 255, 255, 0.3);
  --clrAccent-20: rgba(255, 255, 255, 0.2);
  --clrAccent-10: rgba(255, 255, 255, 0.1);
  --clrGradient: linear-gradient(90deg, #262a2e 10%, var(--clrPrimary) 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(50, 126, 75, 0.15) 30%,
          rgba(50, 126, 75, 0.3) 60%,
          rgba(50, 126, 75, 0.5) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(167, 44, 44, 0) 0%,
          rgba(167, 44, 44, 0.15) 30%,
          rgba(167, 44, 44, 0.3) 60%,
          rgba(167, 44, 44, 0.5) 100%);
  --clrNavBackground: rgba(0, 0, 0, 0.15);
  --clrNavItemActive: rgba(24, 24, 24, 0.49);
  --clrNavItemHover: rgba(255, 255, 255, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0F1418;
  --clrGlassBackground: rgba(15, 20, 24, 0.5);
  --clrGlassBackgroundStrong: rgba(15, 20, 24, 0.6);
  --clrGlassBorder: rgba(255, 255, 255, 0.1);
  --snackbarDefaultBg: #414141;
  --snackbarDefaultText: #BABABA;
  --snackbarDefaultBorder: #BABABA;
  --snackbarDefaultIcon: #BABABA;
  --snackbarSuccessBg: #145E18;
  --snackbarSuccessText: #8FE094;
  --snackbarSuccessBorder: #8FE094;
  --snackbarSuccessIcon: #8FE094;
  --snackbarErrorBg: #910C09;
  --snackbarErrorText: #FE9E9D;
  --snackbarErrorBorder: #FE9E9D;
  --snackbarErrorIcon: #FE9E9D;
}

/* 

Note: 
    If you want something done quick, ask AI to buuild your color themes.
    If you want to do it right and tidy though, do it manually. 

    - Theo

*/
:root {
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --font-accent: "Jaro", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}

html,
body {
  font-family: var(--font-sans);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

._modalOverlay_1vfyb_216 {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 16px;
}

._modal_1vfyb_216 {
  width: min(420px, 100%);
  background-color: var(--clrSecondary);
  border-radius: 8px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.35);
}
._modal_1vfyb_216 h3 {
  margin: 0;
}

._modalDescription_1vfyb_241 {
  margin: 0;
  font-size: 14px;
  color: var(--clrAccent-60);
}

._sharedWarning_1vfyb_247 {
  margin: 12px 0 0;
  padding: 10px 12px;
  border-radius: 6px;
  background: color-mix(in srgb, var(--clrError-100) 18%, transparent);
  border: 1px solid color-mix(in srgb, var(--clrError-100) 45%, transparent);
  color: var(--clrTextPrimary);
  font-size: 12px;
  line-height: 1.45;
}

._modalActions_1vfyb_258 {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 8px;
}

._modalCancelBtn_1vfyb_265,
._modalDeleteBtn_1vfyb_266 {
  padding: 10px 18px;
  border-radius: 8px;
  font-weight: 600;
  border: none;
  cursor: pointer;
  transition: opacity 0.2s ease;
}
._modalCancelBtn_1vfyb_265:disabled,
._modalDeleteBtn_1vfyb_266:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

._modalCancelBtn_1vfyb_265 {
  background-color: var(--clrTertiary);
  color: var(--clrAccent-100);
}

._modalDeleteBtn_1vfyb_266 {
  background-color: #dc3545;
  color: white;
}
._modalDeleteBtn_1vfyb_266:hover:not(:disabled) {
  background-color: #c82333;
}html {
  color-scheme: dark;
}

html:has(body._themeLight_19o1h_5),
html:has(body._themePastelLight_19o1h_6) {
  color-scheme: light;
}

:root {
  --clrPrimary: #F4F4F5;
  --clrPrimary30: rgba(244, 244, 245, 0.3);
  --clrSecondary: #FEFEFE;
  --clrTertiary: #E4E4E7;
  --clrPrimaryReverse: #101418;
  --clrSecondaryReverse: #0A0F14;
  --clrTertiaryReverse: #212327;
  --clrTextPrimary: #101418;
  --clrTextSecondary: #2E3337;
  --clrTextTertiary: #7C7C7C;
  --clrTextPrimaryReverse: #F4F4F5;
  --clrTextSecondaryReverse: #CDCDCD;
  --clrTextTertiaryReverse: #8A8A8A;
  --clrError-100: #641f1f;
  --clrError-50: #c84d4d;
  --clrSuccess-100: #2d692d;
  --clrSuccess-50: #3EA03E;
  --clrSuccessOnTint: #0d260d;
  --clrErrorOnTint: #2e0a0a;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgb(50, 126, 75, 0.1) 30%,
          rgb(94, 178, 122, 0.36) 60%,
          rgb(144, 215, 168) 100%);
  --clrNavBackground: rgba(244, 244, 245, 0.15);
  --clrNavItemActive: rgba(211, 211, 211, 0.4);
  --clrNavItemHover: rgba(0, 0, 0, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #F4F4F5;
  --clrGlassBackground: rgba(255, 255, 255, 0.5);
  --clrGlassBackgroundStrong: rgba(255, 255, 255, 0.3);
  --clrGlassBorder: rgba(0, 0, 0, 0.1);
  --snackbarDefaultBg: #F1ECE9;
  --snackbarDefaultText: #5D605C;
  --snackbarDefaultBorder: #5D605C;
  --snackbarDefaultIcon: #5D605C;
  --snackbarSuccessBg: #E0F1D9;
  --snackbarSuccessText: #358935;
  --snackbarSuccessBorder: #358935;
  --snackbarSuccessIcon: #358935;
  --snackbarErrorBg: #F9E1DC;
  --snackbarErrorText: #C80D12;
  --snackbarErrorBorder: #C80D12;
  --snackbarErrorIcon: #C80D12;
}

._themeLight_19o1h_5 {
  --clrPrimary: #F4F4F5;
  --clrPrimary30: rgba(244, 244, 245, 0.3);
  --clrSecondary: #FEFEFE;
  --clrTertiary: #E4E4E7;
  --clrPrimaryReverse: #101418;
  --clrSecondaryReverse: #0A0F14;
  --clrTertiaryReverse: #212327;
  --clrTextPrimary: #101418;
  --clrTextSecondary: #2E3337;
  --clrTextTertiary: #7C7C7C;
  --clrTextPrimaryReverse: #F4F4F5;
  --clrTextSecondaryReverse: #CDCDCD;
  --clrTextTertiaryReverse: #8A8A8A;
  --clrError-100: #c03b3b;
  --clrError-50: #f6c5c5;
  --clrSuccess-100: #30d330;
  --clrSuccess-50: #bbffbb;
  --clrSuccessOnTint: #1f4f1f;
  --clrErrorOnTint: #7a1f1f;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgb(50, 126, 75, 0.1) 30%,
          rgb(94, 178, 122, 0.36) 60%,
          rgb(144, 215, 168) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(175, 49, 49, 0.1) 30%,
          rgba(238, 70, 70, 0.36) 60%,
          rgb(255, 173, 173) 100%);
  --clrNavBackground: rgba(244, 244, 245, 0.15);
  --clrNavItemActive: rgba(211, 211, 211, 0.4);
  --clrNavItemHover: rgba(0, 0, 0, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0000c1;
  --clrGlassBackground: rgba(255, 255, 255, 0.5);
  --clrGlassBackgroundStrong: rgba(255, 255, 255, 0.5);
  --clrGlassBorder: rgba(0, 0, 0, 0.1);
  --snackbarDefaultBg: #F1ECE9;
  --snackbarDefaultText: #5D605C;
  --snackbarDefaultBorder: #5D605C;
  --snackbarDefaultIcon: #5D605C;
  --snackbarSuccessBg: #E0F1D9;
  --snackbarSuccessText: #358935;
  --snackbarSuccessBorder: #358935;
  --snackbarSuccessIcon: #358935;
  --snackbarErrorBg: #F9E1DC;
  --snackbarErrorText: #C80D12;
  --snackbarErrorBorder: #C80D12;
  --snackbarErrorIcon: #C80D12;
}

._themeDark_19o1h_131 {
  --clrPrimary: #0F1418;
  --clrPrimary30: rgba(15, 20, 25, 0.3);
  --clrSecondary: #0A0F14;
  --clrTertiary: #212327;
  --clrPrimaryReverse: #F4F4F5;
  --clrSecondaryReverse: #FEFEFE;
  --clrTertiaryReverse: #E4E4E7;
  --clrTextPrimary: #F4F4F5;
  --clrTextSecondary: #CDCDCD;
  --clrTextTertiary: #8A8A8A;
  --clrTextPrimaryReverse: #101418;
  --clrTextSecondaryReverse: #2E3337;
  --clrTextTertiaryReverse: #7C7C7C;
  --clrError-100: #c84d4d;
  --clrError-50: #641f1f;
  --clrSuccess-100: #3EA03E;
  --clrSuccess-50: #2d692d;
  --clrSuccessOnTint: #d6ffd6;
  --clrErrorOnTint: #ffd6d6;
  --clrWarning-100: #E88434;
  --clrWarning-50: #C49168;
  --clrAccent-100: #FFFFFF;
  --clrAccent-80: rgba(255, 255, 255, 0.8);
  --clrAccent-60: rgba(255, 255, 255, 0.6);
  --clrAccent-50: rgba(255, 255, 255, 0.5);
  --clrAccent-40: rgba(255, 255, 255, 0.4);
  --clrAccent-30: rgba(255, 255, 255, 0.3);
  --clrAccent-20: rgba(255, 255, 255, 0.2);
  --clrAccent-10: rgba(255, 255, 255, 0.1);
  --clrGradient: linear-gradient(90deg, #262a2e 10%, var(--clrPrimary) 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(50, 126, 75, 0.15) 30%,
          rgba(50, 126, 75, 0.3) 60%,
          rgba(50, 126, 75, 0.5) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(167, 44, 44, 0) 0%,
          rgba(167, 44, 44, 0.15) 30%,
          rgba(167, 44, 44, 0.3) 60%,
          rgba(167, 44, 44, 0.5) 100%);
  --clrNavBackground: rgba(0, 0, 0, 0.15);
  --clrNavItemActive: rgba(24, 24, 24, 0.49);
  --clrNavItemHover: rgba(255, 255, 255, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0F1418;
  --clrGlassBackground: rgba(15, 20, 24, 0.5);
  --clrGlassBackgroundStrong: rgba(15, 20, 24, 0.6);
  --clrGlassBorder: rgba(255, 255, 255, 0.1);
  --snackbarDefaultBg: #414141;
  --snackbarDefaultText: #BABABA;
  --snackbarDefaultBorder: #BABABA;
  --snackbarDefaultIcon: #BABABA;
  --snackbarSuccessBg: #145E18;
  --snackbarSuccessText: #8FE094;
  --snackbarSuccessBorder: #8FE094;
  --snackbarSuccessIcon: #8FE094;
  --snackbarErrorBg: #910C09;
  --snackbarErrorText: #FE9E9D;
  --snackbarErrorBorder: #FE9E9D;
  --snackbarErrorIcon: #FE9E9D;
}

/* 

Note: 
    If you want something done quick, ask AI to buuild your color themes.
    If you want to do it right and tidy though, do it manually. 

    - Theo

*/
:root {
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --font-accent: "Jaro", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}

html,
body {
  font-family: var(--font-sans);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

._editTournamentModal_19o1h_216 {
  width: min(420px, 100%);
}

._formContent_19o1h_220 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 16px;
  width: 100%;
}

._formInputs_19o1h_229 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 8px;
  width: 100%;
}

._formRow_19o1h_238 {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 8px;
  width: 100%;
}
._formRow_19o1h_238 > * {
  flex: 1;
  min-width: 0;
}

._typeCarousel_19o1h_251 {
  width: 100%;
}

._carouselWrapper_19o1h_255 {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
}

@media (max-width: 768px) {
  ._editTournamentModal_19o1h_216 {
    width: 100%;
  }
}html {
  color-scheme: dark;
}

html:has(body._themeLight_f7c3c_5),
html:has(body._themePastelLight_f7c3c_6) {
  color-scheme: light;
}

:root {
  --clrPrimary: #F4F4F5;
  --clrPrimary30: rgba(244, 244, 245, 0.3);
  --clrSecondary: #FEFEFE;
  --clrTertiary: #E4E4E7;
  --clrPrimaryReverse: #101418;
  --clrSecondaryReverse: #0A0F14;
  --clrTertiaryReverse: #212327;
  --clrTextPrimary: #101418;
  --clrTextSecondary: #2E3337;
  --clrTextTertiary: #7C7C7C;
  --clrTextPrimaryReverse: #F4F4F5;
  --clrTextSecondaryReverse: #CDCDCD;
  --clrTextTertiaryReverse: #8A8A8A;
  --clrError-100: #641f1f;
  --clrError-50: #c84d4d;
  --clrSuccess-100: #2d692d;
  --clrSuccess-50: #3EA03E;
  --clrSuccessOnTint: #0d260d;
  --clrErrorOnTint: #2e0a0a;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgb(50, 126, 75, 0.1) 30%,
          rgb(94, 178, 122, 0.36) 60%,
          rgb(144, 215, 168) 100%);
  --clrNavBackground: rgba(244, 244, 245, 0.15);
  --clrNavItemActive: rgba(211, 211, 211, 0.4);
  --clrNavItemHover: rgba(0, 0, 0, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #F4F4F5;
  --clrGlassBackground: rgba(255, 255, 255, 0.5);
  --clrGlassBackgroundStrong: rgba(255, 255, 255, 0.3);
  --clrGlassBorder: rgba(0, 0, 0, 0.1);
  --snackbarDefaultBg: #F1ECE9;
  --snackbarDefaultText: #5D605C;
  --snackbarDefaultBorder: #5D605C;
  --snackbarDefaultIcon: #5D605C;
  --snackbarSuccessBg: #E0F1D9;
  --snackbarSuccessText: #358935;
  --snackbarSuccessBorder: #358935;
  --snackbarSuccessIcon: #358935;
  --snackbarErrorBg: #F9E1DC;
  --snackbarErrorText: #C80D12;
  --snackbarErrorBorder: #C80D12;
  --snackbarErrorIcon: #C80D12;
}

._themeLight_f7c3c_5 {
  --clrPrimary: #F4F4F5;
  --clrPrimary30: rgba(244, 244, 245, 0.3);
  --clrSecondary: #FEFEFE;
  --clrTertiary: #E4E4E7;
  --clrPrimaryReverse: #101418;
  --clrSecondaryReverse: #0A0F14;
  --clrTertiaryReverse: #212327;
  --clrTextPrimary: #101418;
  --clrTextSecondary: #2E3337;
  --clrTextTertiary: #7C7C7C;
  --clrTextPrimaryReverse: #F4F4F5;
  --clrTextSecondaryReverse: #CDCDCD;
  --clrTextTertiaryReverse: #8A8A8A;
  --clrError-100: #c03b3b;
  --clrError-50: #f6c5c5;
  --clrSuccess-100: #30d330;
  --clrSuccess-50: #bbffbb;
  --clrSuccessOnTint: #1f4f1f;
  --clrErrorOnTint: #7a1f1f;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgb(50, 126, 75, 0.1) 30%,
          rgb(94, 178, 122, 0.36) 60%,
          rgb(144, 215, 168) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(175, 49, 49, 0.1) 30%,
          rgba(238, 70, 70, 0.36) 60%,
          rgb(255, 173, 173) 100%);
  --clrNavBackground: rgba(244, 244, 245, 0.15);
  --clrNavItemActive: rgba(211, 211, 211, 0.4);
  --clrNavItemHover: rgba(0, 0, 0, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0000c1;
  --clrGlassBackground: rgba(255, 255, 255, 0.5);
  --clrGlassBackgroundStrong: rgba(255, 255, 255, 0.5);
  --clrGlassBorder: rgba(0, 0, 0, 0.1);
  --snackbarDefaultBg: #F1ECE9;
  --snackbarDefaultText: #5D605C;
  --snackbarDefaultBorder: #5D605C;
  --snackbarDefaultIcon: #5D605C;
  --snackbarSuccessBg: #E0F1D9;
  --snackbarSuccessText: #358935;
  --snackbarSuccessBorder: #358935;
  --snackbarSuccessIcon: #358935;
  --snackbarErrorBg: #F9E1DC;
  --snackbarErrorText: #C80D12;
  --snackbarErrorBorder: #C80D12;
  --snackbarErrorIcon: #C80D12;
}

._themeDark_f7c3c_131 {
  --clrPrimary: #0F1418;
  --clrPrimary30: rgba(15, 20, 25, 0.3);
  --clrSecondary: #0A0F14;
  --clrTertiary: #212327;
  --clrPrimaryReverse: #F4F4F5;
  --clrSecondaryReverse: #FEFEFE;
  --clrTertiaryReverse: #E4E4E7;
  --clrTextPrimary: #F4F4F5;
  --clrTextSecondary: #CDCDCD;
  --clrTextTertiary: #8A8A8A;
  --clrTextPrimaryReverse: #101418;
  --clrTextSecondaryReverse: #2E3337;
  --clrTextTertiaryReverse: #7C7C7C;
  --clrError-100: #c84d4d;
  --clrError-50: #641f1f;
  --clrSuccess-100: #3EA03E;
  --clrSuccess-50: #2d692d;
  --clrSuccessOnTint: #d6ffd6;
  --clrErrorOnTint: #ffd6d6;
  --clrWarning-100: #E88434;
  --clrWarning-50: #C49168;
  --clrAccent-100: #FFFFFF;
  --clrAccent-80: rgba(255, 255, 255, 0.8);
  --clrAccent-60: rgba(255, 255, 255, 0.6);
  --clrAccent-50: rgba(255, 255, 255, 0.5);
  --clrAccent-40: rgba(255, 255, 255, 0.4);
  --clrAccent-30: rgba(255, 255, 255, 0.3);
  --clrAccent-20: rgba(255, 255, 255, 0.2);
  --clrAccent-10: rgba(255, 255, 255, 0.1);
  --clrGradient: linear-gradient(90deg, #262a2e 10%, var(--clrPrimary) 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(50, 126, 75, 0.15) 30%,
          rgba(50, 126, 75, 0.3) 60%,
          rgba(50, 126, 75, 0.5) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(167, 44, 44, 0) 0%,
          rgba(167, 44, 44, 0.15) 30%,
          rgba(167, 44, 44, 0.3) 60%,
          rgba(167, 44, 44, 0.5) 100%);
  --clrNavBackground: rgba(0, 0, 0, 0.15);
  --clrNavItemActive: rgba(24, 24, 24, 0.49);
  --clrNavItemHover: rgba(255, 255, 255, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0F1418;
  --clrGlassBackground: rgba(15, 20, 24, 0.5);
  --clrGlassBackgroundStrong: rgba(15, 20, 24, 0.6);
  --clrGlassBorder: rgba(255, 255, 255, 0.1);
  --snackbarDefaultBg: #414141;
  --snackbarDefaultText: #BABABA;
  --snackbarDefaultBorder: #BABABA;
  --snackbarDefaultIcon: #BABABA;
  --snackbarSuccessBg: #145E18;
  --snackbarSuccessText: #8FE094;
  --snackbarSuccessBorder: #8FE094;
  --snackbarSuccessIcon: #8FE094;
  --snackbarErrorBg: #910C09;
  --snackbarErrorText: #FE9E9D;
  --snackbarErrorBorder: #FE9E9D;
  --snackbarErrorIcon: #FE9E9D;
}

/* 

Note: 
    If you want something done quick, ask AI to buuild your color themes.
    If you want to do it right and tidy though, do it manually. 

    - Theo

*/
:root {
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --font-accent: "Jaro", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}

html,
body {
  font-family: var(--font-sans);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

._formContent_f7c3c_216 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 16px;
  width: 100%;
}

._formInputs_f7c3c_225 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 8px;
  width: 100%;
}

._carouselWrapper_f7c3c_234 {
  width: 100%;
  overflow-x: hidden;
}

._roundTypeButton_f7c3c_239 {
  width: 100%;
  height: 46px;
  padding: 0 16px;
  border-radius: 8px;
  border: 1px solid var(--clrAccent-30);
  background-color: var(--clrTertiary);
  color: var(--clrAccent-100);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: left;
}
._roundTypeButton_f7c3c_239:hover:not(:disabled) {
  border-color: var(--clrAccent-100);
}
._roundTypeButton_f7c3c_239:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

._topCutGames_f7c3c_261 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 16px;
  width: 100%;
}

._gameResultGroup_f7c3c_270 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 8px;
  width: 100%;
}

._gameButtons_f7c3c_279 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  width: 100%;
}

._gameBtn_f7c3c_288 {
  flex: 1;
  padding: 12px 16px;
  border-radius: 8px;
  border: 1px solid var(--clrAccent-30);
  background-color: transparent;
  color: var(--clrAccent-100);
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}
._gameBtn_f7c3c_288:hover:not(:disabled) {
  border-color: var(--clrAccent-100);
}
._gameBtn_f7c3c_288:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
._gameBtn_f7c3c_288._winSelected_f7c3c_306 {
  background-color: rgba(34, 197, 94, 0.15);
  border-color: rgba(34, 197, 94, 0.4);
  color: #16a34a;
}
._gameBtn_f7c3c_288._loseSelected_f7c3c_311 {
  background-color: rgba(220, 38, 38, 0.15);
  border-color: rgba(220, 38, 38, 0.4);
  color: #dc2626;
}

._overallResult_f7c3c_317 {
  padding: 12px 16px;
  border-radius: 8px;
  background-color: var(--clrTertiary);
  color: var(--clrAccent-80);
  font-size: 14px;
  text-align: center;
}
._overallResult_f7c3c_317 strong {
  color: var(--clrAccent-100);
}

._noteInput_f7c3c_329 {
  width: 100%;
  padding: 12px 16px;
  border-radius: 8px;
  border: none;
  background-color: var(--clrTertiary);
  color: var(--clrAccent-100);
  font-family: inherit;
  font-size: 14px;
  resize: vertical;
  min-height: 60px;
}
._noteInput_f7c3c_329::placeholder {
  color: var(--clrAccent-30);
}
._noteInput_f7c3c_329:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

._toggleRow_f7c3c_349 {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
@media (min-width: 640px) {
  ._toggleRow_f7c3c_349 {
    flex-direction: row;
    justify-content: space-between;
  }
}

._toggleGroup_f7c3c_362 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 8px;
  flex: 1;
  min-width: 0;
  width: 100%;
}

._singleToggleBtn_f7c3c_373 {
  padding: 16px 32px;
  border-radius: 8px;
  border: 1px solid var(--clrAccent-30);
  background-color: transparent;
  color: var(--clrAccent-100);
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
._singleToggleBtn_f7c3c_373 ._value_f7c3c_389 {
  padding: 4px 12px;
  border-radius: 4px;
  background-color: rgba(var(--clrAccent-100-rgb), 0.1);
  font-size: 14px;
  color: var(--clrAccent-100);
}
._singleToggleBtn_f7c3c_373:hover:not(:disabled) {
  border-color: var(--clrAccent-100);
}
._singleToggleBtn_f7c3c_373:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}
._singleToggleBtn_f7c3c_373._winResult_f7c3c_403 {
  background-color: rgba(34, 197, 94, 0.15);
  border-color: rgba(34, 197, 94, 0.3);
  color: #16a34a;
}
._singleToggleBtn_f7c3c_373._winResult_f7c3c_403 ._value_f7c3c_389 {
  background-color: rgba(34, 197, 94, 0.25);
}
._singleToggleBtn_f7c3c_373._winResult_f7c3c_403:hover {
  background-color: rgba(34, 197, 94, 0.25);
  border-color: rgba(34, 197, 94, 0.5);
}
._singleToggleBtn_f7c3c_373._loseResult_f7c3c_415 {
  background-color: rgba(239, 68, 68, 0.15);
  border-color: rgba(239, 68, 68, 0.3);
  color: #dc2626;
}
._singleToggleBtn_f7c3c_373._loseResult_f7c3c_415 ._value_f7c3c_389 {
  background-color: rgba(239, 68, 68, 0.25);
}
._singleToggleBtn_f7c3c_373._loseResult_f7c3c_415:hover {
  background-color: rgba(239, 68, 68, 0.25);
  border-color: rgba(239, 68, 68, 0.5);
}html {
  color-scheme: dark;
}

html:has(body._themeLight_1sfjp_5),
html:has(body._themePastelLight_1sfjp_6) {
  color-scheme: light;
}

:root {
  --clrPrimary: #F4F4F5;
  --clrPrimary30: rgba(244, 244, 245, 0.3);
  --clrSecondary: #FEFEFE;
  --clrTertiary: #E4E4E7;
  --clrPrimaryReverse: #101418;
  --clrSecondaryReverse: #0A0F14;
  --clrTertiaryReverse: #212327;
  --clrTextPrimary: #101418;
  --clrTextSecondary: #2E3337;
  --clrTextTertiary: #7C7C7C;
  --clrTextPrimaryReverse: #F4F4F5;
  --clrTextSecondaryReverse: #CDCDCD;
  --clrTextTertiaryReverse: #8A8A8A;
  --clrError-100: #641f1f;
  --clrError-50: #c84d4d;
  --clrSuccess-100: #2d692d;
  --clrSuccess-50: #3EA03E;
  --clrSuccessOnTint: #0d260d;
  --clrErrorOnTint: #2e0a0a;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgb(50, 126, 75, 0.1) 30%,
          rgb(94, 178, 122, 0.36) 60%,
          rgb(144, 215, 168) 100%);
  --clrNavBackground: rgba(244, 244, 245, 0.15);
  --clrNavItemActive: rgba(211, 211, 211, 0.4);
  --clrNavItemHover: rgba(0, 0, 0, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #F4F4F5;
  --clrGlassBackground: rgba(255, 255, 255, 0.5);
  --clrGlassBackgroundStrong: rgba(255, 255, 255, 0.3);
  --clrGlassBorder: rgba(0, 0, 0, 0.1);
  --snackbarDefaultBg: #F1ECE9;
  --snackbarDefaultText: #5D605C;
  --snackbarDefaultBorder: #5D605C;
  --snackbarDefaultIcon: #5D605C;
  --snackbarSuccessBg: #E0F1D9;
  --snackbarSuccessText: #358935;
  --snackbarSuccessBorder: #358935;
  --snackbarSuccessIcon: #358935;
  --snackbarErrorBg: #F9E1DC;
  --snackbarErrorText: #C80D12;
  --snackbarErrorBorder: #C80D12;
  --snackbarErrorIcon: #C80D12;
}

._themeLight_1sfjp_5 {
  --clrPrimary: #F4F4F5;
  --clrPrimary30: rgba(244, 244, 245, 0.3);
  --clrSecondary: #FEFEFE;
  --clrTertiary: #E4E4E7;
  --clrPrimaryReverse: #101418;
  --clrSecondaryReverse: #0A0F14;
  --clrTertiaryReverse: #212327;
  --clrTextPrimary: #101418;
  --clrTextSecondary: #2E3337;
  --clrTextTertiary: #7C7C7C;
  --clrTextPrimaryReverse: #F4F4F5;
  --clrTextSecondaryReverse: #CDCDCD;
  --clrTextTertiaryReverse: #8A8A8A;
  --clrError-100: #c03b3b;
  --clrError-50: #f6c5c5;
  --clrSuccess-100: #30d330;
  --clrSuccess-50: #bbffbb;
  --clrSuccessOnTint: #1f4f1f;
  --clrErrorOnTint: #7a1f1f;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgb(50, 126, 75, 0.1) 30%,
          rgb(94, 178, 122, 0.36) 60%,
          rgb(144, 215, 168) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(175, 49, 49, 0.1) 30%,
          rgba(238, 70, 70, 0.36) 60%,
          rgb(255, 173, 173) 100%);
  --clrNavBackground: rgba(244, 244, 245, 0.15);
  --clrNavItemActive: rgba(211, 211, 211, 0.4);
  --clrNavItemHover: rgba(0, 0, 0, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0000c1;
  --clrGlassBackground: rgba(255, 255, 255, 0.5);
  --clrGlassBackgroundStrong: rgba(255, 255, 255, 0.5);
  --clrGlassBorder: rgba(0, 0, 0, 0.1);
  --snackbarDefaultBg: #F1ECE9;
  --snackbarDefaultText: #5D605C;
  --snackbarDefaultBorder: #5D605C;
  --snackbarDefaultIcon: #5D605C;
  --snackbarSuccessBg: #E0F1D9;
  --snackbarSuccessText: #358935;
  --snackbarSuccessBorder: #358935;
  --snackbarSuccessIcon: #358935;
  --snackbarErrorBg: #F9E1DC;
  --snackbarErrorText: #C80D12;
  --snackbarErrorBorder: #C80D12;
  --snackbarErrorIcon: #C80D12;
}

._themeDark_1sfjp_131 {
  --clrPrimary: #0F1418;
  --clrPrimary30: rgba(15, 20, 25, 0.3);
  --clrSecondary: #0A0F14;
  --clrTertiary: #212327;
  --clrPrimaryReverse: #F4F4F5;
  --clrSecondaryReverse: #FEFEFE;
  --clrTertiaryReverse: #E4E4E7;
  --clrTextPrimary: #F4F4F5;
  --clrTextSecondary: #CDCDCD;
  --clrTextTertiary: #8A8A8A;
  --clrTextPrimaryReverse: #101418;
  --clrTextSecondaryReverse: #2E3337;
  --clrTextTertiaryReverse: #7C7C7C;
  --clrError-100: #c84d4d;
  --clrError-50: #641f1f;
  --clrSuccess-100: #3EA03E;
  --clrSuccess-50: #2d692d;
  --clrSuccessOnTint: #d6ffd6;
  --clrErrorOnTint: #ffd6d6;
  --clrWarning-100: #E88434;
  --clrWarning-50: #C49168;
  --clrAccent-100: #FFFFFF;
  --clrAccent-80: rgba(255, 255, 255, 0.8);
  --clrAccent-60: rgba(255, 255, 255, 0.6);
  --clrAccent-50: rgba(255, 255, 255, 0.5);
  --clrAccent-40: rgba(255, 255, 255, 0.4);
  --clrAccent-30: rgba(255, 255, 255, 0.3);
  --clrAccent-20: rgba(255, 255, 255, 0.2);
  --clrAccent-10: rgba(255, 255, 255, 0.1);
  --clrGradient: linear-gradient(90deg, #262a2e 10%, var(--clrPrimary) 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(50, 126, 75, 0.15) 30%,
          rgba(50, 126, 75, 0.3) 60%,
          rgba(50, 126, 75, 0.5) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(167, 44, 44, 0) 0%,
          rgba(167, 44, 44, 0.15) 30%,
          rgba(167, 44, 44, 0.3) 60%,
          rgba(167, 44, 44, 0.5) 100%);
  --clrNavBackground: rgba(0, 0, 0, 0.15);
  --clrNavItemActive: rgba(24, 24, 24, 0.49);
  --clrNavItemHover: rgba(255, 255, 255, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0F1418;
  --clrGlassBackground: rgba(15, 20, 24, 0.5);
  --clrGlassBackgroundStrong: rgba(15, 20, 24, 0.6);
  --clrGlassBorder: rgba(255, 255, 255, 0.1);
  --snackbarDefaultBg: #414141;
  --snackbarDefaultText: #BABABA;
  --snackbarDefaultBorder: #BABABA;
  --snackbarDefaultIcon: #BABABA;
  --snackbarSuccessBg: #145E18;
  --snackbarSuccessText: #8FE094;
  --snackbarSuccessBorder: #8FE094;
  --snackbarSuccessIcon: #8FE094;
  --snackbarErrorBg: #910C09;
  --snackbarErrorText: #FE9E9D;
  --snackbarErrorBorder: #FE9E9D;
  --snackbarErrorIcon: #FE9E9D;
}

/* 

Note: 
    If you want something done quick, ask AI to buuild your color themes.
    If you want to do it right and tidy though, do it manually. 

    - Theo

*/
:root {
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --font-accent: "Jaro", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}

html,
body {
  font-family: var(--font-sans);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

._header_1sfjp_216 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  position: relative;
  padding: 6px;
  border: 1px solid rgba(198, 198, 198, 0.3);
  border-radius: 12px;
  margin-bottom: 8px;
  height: 122px;
  min-width: 0;
  overflow: hidden;
}
._header_1sfjp_216 > div:first-child {
  flex-shrink: 0;
}
._header_1sfjp_216 ._headerInfo_1sfjp_234 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  gap: 4px;
  height: 95%;
  flex: 1;
  min-width: 0;
  overflow: hidden;
}
._header_1sfjp_216 ._headerInfo_1sfjp_234 ._headerTitle_1sfjp_245 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 0;
  width: 100%;
}
._header_1sfjp_216 ._headerInfo_1sfjp_234 ._headerTitle_1sfjp_245 h1,
._header_1sfjp_216 ._headerInfo_1sfjp_234 ._headerTitle_1sfjp_245 h2,
._header_1sfjp_216 ._headerInfo_1sfjp_234 ._headerTitle_1sfjp_245 h3 {
  font-size: 16px;
  font-weight: 700;
  line-height: normal;
  margin: 0;
  padding: 0;
  color: var(--clrTextPrimary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
._header_1sfjp_216 ._headerInfo_1sfjp_234 ._headerTitle_1sfjp_245 ._date_1sfjp_267 {
  font-size: 10px;
  font-weight: 300;
  color: var(--clrAccent-60);
  line-height: normal;
}
._header_1sfjp_216 ._headerInfo_1sfjp_234 ._chipsWrapper_1sfjp_273 {
  position: relative;
  width: 100%;
}
._header_1sfjp_216 ._headerInfo_1sfjp_234 ._chips_1sfjp_273 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  width: 100%;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
._header_1sfjp_216 ._headerInfo_1sfjp_234 ._chips_1sfjp_273::-webkit-scrollbar {
  display: none;
}
._header_1sfjp_216 ._headerInfo_1sfjp_234 ._chips_1sfjp_273 {
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}
._header_1sfjp_216 ._headerInfo_1sfjp_234 ._shadowLeft_1sfjp_297 {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 40px;
  background: linear-gradient(to right, var(--clrPrimary) 0%, transparent 100%);
  pointer-events: none;
  z-index: 1;
  opacity: 0;
  transition: opacity 0.3s ease;
}
._header_1sfjp_216 ._headerInfo_1sfjp_234 ._shadowLeft_1sfjp_297._visible_1sfjp_309 {
  opacity: 1;
}
._header_1sfjp_216 ._headerInfo_1sfjp_234 ._shadowRight_1sfjp_312 {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 40px;
  background: linear-gradient(to left, var(--clrPrimary) 0%, transparent 100%);
  pointer-events: none;
  z-index: 1;
  opacity: 0;
  transition: opacity 0.3s ease;
}
._header_1sfjp_216 ._headerInfo_1sfjp_234 ._shadowRight_1sfjp_312._visible_1sfjp_309 {
  opacity: 1;
}
._header_1sfjp_216 ._headerInfo_1sfjp_234 ._deckInfo_1sfjp_327 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 0;
}
._header_1sfjp_216 ._headerInfo_1sfjp_234 ._deckInfo_1sfjp_327 ._deckName_1sfjp_334 {
  font-size: 12px;
  font-weight: 700;
  color: var(--clrAccent-60);
  line-height: normal;
}
._themeDark_1sfjp_131 ._header_1sfjp_216 ._headerInfo_1sfjp_234 ._deckInfo_1sfjp_327 ._deckName_1sfjp_334 {
  color: rgba(198, 198, 198, 0.6);
}
._header_1sfjp_216 ._headerInfo_1sfjp_234 ._deckInfo_1sfjp_327 ._score_1sfjp_343 {
  font-size: 14px;
  font-weight: 700;
  color: var(--clrTextPrimary);
  line-height: normal;
}
._header_1sfjp_216 ._editBtn_1sfjp_349 {
  position: absolute;
  top: 8px;
  right: 8px;
}html {
  color-scheme: dark;
}

html:has(body._themeLight_c6yrt_5),
html:has(body._themePastelLight_c6yrt_6) {
  color-scheme: light;
}

:root {
  --clrPrimary: #F4F4F5;
  --clrPrimary30: rgba(244, 244, 245, 0.3);
  --clrSecondary: #FEFEFE;
  --clrTertiary: #E4E4E7;
  --clrPrimaryReverse: #101418;
  --clrSecondaryReverse: #0A0F14;
  --clrTertiaryReverse: #212327;
  --clrTextPrimary: #101418;
  --clrTextSecondary: #2E3337;
  --clrTextTertiary: #7C7C7C;
  --clrTextPrimaryReverse: #F4F4F5;
  --clrTextSecondaryReverse: #CDCDCD;
  --clrTextTertiaryReverse: #8A8A8A;
  --clrError-100: #641f1f;
  --clrError-50: #c84d4d;
  --clrSuccess-100: #2d692d;
  --clrSuccess-50: #3EA03E;
  --clrSuccessOnTint: #0d260d;
  --clrErrorOnTint: #2e0a0a;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgb(50, 126, 75, 0.1) 30%,
          rgb(94, 178, 122, 0.36) 60%,
          rgb(144, 215, 168) 100%);
  --clrNavBackground: rgba(244, 244, 245, 0.15);
  --clrNavItemActive: rgba(211, 211, 211, 0.4);
  --clrNavItemHover: rgba(0, 0, 0, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #F4F4F5;
  --clrGlassBackground: rgba(255, 255, 255, 0.5);
  --clrGlassBackgroundStrong: rgba(255, 255, 255, 0.3);
  --clrGlassBorder: rgba(0, 0, 0, 0.1);
  --snackbarDefaultBg: #F1ECE9;
  --snackbarDefaultText: #5D605C;
  --snackbarDefaultBorder: #5D605C;
  --snackbarDefaultIcon: #5D605C;
  --snackbarSuccessBg: #E0F1D9;
  --snackbarSuccessText: #358935;
  --snackbarSuccessBorder: #358935;
  --snackbarSuccessIcon: #358935;
  --snackbarErrorBg: #F9E1DC;
  --snackbarErrorText: #C80D12;
  --snackbarErrorBorder: #C80D12;
  --snackbarErrorIcon: #C80D12;
}

._themeLight_c6yrt_5 {
  --clrPrimary: #F4F4F5;
  --clrPrimary30: rgba(244, 244, 245, 0.3);
  --clrSecondary: #FEFEFE;
  --clrTertiary: #E4E4E7;
  --clrPrimaryReverse: #101418;
  --clrSecondaryReverse: #0A0F14;
  --clrTertiaryReverse: #212327;
  --clrTextPrimary: #101418;
  --clrTextSecondary: #2E3337;
  --clrTextTertiary: #7C7C7C;
  --clrTextPrimaryReverse: #F4F4F5;
  --clrTextSecondaryReverse: #CDCDCD;
  --clrTextTertiaryReverse: #8A8A8A;
  --clrError-100: #c03b3b;
  --clrError-50: #f6c5c5;
  --clrSuccess-100: #30d330;
  --clrSuccess-50: #bbffbb;
  --clrSuccessOnTint: #1f4f1f;
  --clrErrorOnTint: #7a1f1f;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgb(50, 126, 75, 0.1) 30%,
          rgb(94, 178, 122, 0.36) 60%,
          rgb(144, 215, 168) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(175, 49, 49, 0.1) 30%,
          rgba(238, 70, 70, 0.36) 60%,
          rgb(255, 173, 173) 100%);
  --clrNavBackground: rgba(244, 244, 245, 0.15);
  --clrNavItemActive: rgba(211, 211, 211, 0.4);
  --clrNavItemHover: rgba(0, 0, 0, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0000c1;
  --clrGlassBackground: rgba(255, 255, 255, 0.5);
  --clrGlassBackgroundStrong: rgba(255, 255, 255, 0.5);
  --clrGlassBorder: rgba(0, 0, 0, 0.1);
  --snackbarDefaultBg: #F1ECE9;
  --snackbarDefaultText: #5D605C;
  --snackbarDefaultBorder: #5D605C;
  --snackbarDefaultIcon: #5D605C;
  --snackbarSuccessBg: #E0F1D9;
  --snackbarSuccessText: #358935;
  --snackbarSuccessBorder: #358935;
  --snackbarSuccessIcon: #358935;
  --snackbarErrorBg: #F9E1DC;
  --snackbarErrorText: #C80D12;
  --snackbarErrorBorder: #C80D12;
  --snackbarErrorIcon: #C80D12;
}

._themeDark_c6yrt_131 {
  --clrPrimary: #0F1418;
  --clrPrimary30: rgba(15, 20, 25, 0.3);
  --clrSecondary: #0A0F14;
  --clrTertiary: #212327;
  --clrPrimaryReverse: #F4F4F5;
  --clrSecondaryReverse: #FEFEFE;
  --clrTertiaryReverse: #E4E4E7;
  --clrTextPrimary: #F4F4F5;
  --clrTextSecondary: #CDCDCD;
  --clrTextTertiary: #8A8A8A;
  --clrTextPrimaryReverse: #101418;
  --clrTextSecondaryReverse: #2E3337;
  --clrTextTertiaryReverse: #7C7C7C;
  --clrError-100: #c84d4d;
  --clrError-50: #641f1f;
  --clrSuccess-100: #3EA03E;
  --clrSuccess-50: #2d692d;
  --clrSuccessOnTint: #d6ffd6;
  --clrErrorOnTint: #ffd6d6;
  --clrWarning-100: #E88434;
  --clrWarning-50: #C49168;
  --clrAccent-100: #FFFFFF;
  --clrAccent-80: rgba(255, 255, 255, 0.8);
  --clrAccent-60: rgba(255, 255, 255, 0.6);
  --clrAccent-50: rgba(255, 255, 255, 0.5);
  --clrAccent-40: rgba(255, 255, 255, 0.4);
  --clrAccent-30: rgba(255, 255, 255, 0.3);
  --clrAccent-20: rgba(255, 255, 255, 0.2);
  --clrAccent-10: rgba(255, 255, 255, 0.1);
  --clrGradient: linear-gradient(90deg, #262a2e 10%, var(--clrPrimary) 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(50, 126, 75, 0.15) 30%,
          rgba(50, 126, 75, 0.3) 60%,
          rgba(50, 126, 75, 0.5) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(167, 44, 44, 0) 0%,
          rgba(167, 44, 44, 0.15) 30%,
          rgba(167, 44, 44, 0.3) 60%,
          rgba(167, 44, 44, 0.5) 100%);
  --clrNavBackground: rgba(0, 0, 0, 0.15);
  --clrNavItemActive: rgba(24, 24, 24, 0.49);
  --clrNavItemHover: rgba(255, 255, 255, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0F1418;
  --clrGlassBackground: rgba(15, 20, 24, 0.5);
  --clrGlassBackgroundStrong: rgba(15, 20, 24, 0.6);
  --clrGlassBorder: rgba(255, 255, 255, 0.1);
  --snackbarDefaultBg: #414141;
  --snackbarDefaultText: #BABABA;
  --snackbarDefaultBorder: #BABABA;
  --snackbarDefaultIcon: #BABABA;
  --snackbarSuccessBg: #145E18;
  --snackbarSuccessText: #8FE094;
  --snackbarSuccessBorder: #8FE094;
  --snackbarSuccessIcon: #8FE094;
  --snackbarErrorBg: #910C09;
  --snackbarErrorText: #FE9E9D;
  --snackbarErrorBorder: #FE9E9D;
  --snackbarErrorIcon: #FE9E9D;
}

/* 

Note: 
    If you want something done quick, ask AI to buuild your color themes.
    If you want to do it right and tidy though, do it manually. 

    - Theo

*/
:root {
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --font-accent: "Jaro", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}

html,
body {
  font-family: var(--font-sans);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

._panel_c6yrt_216 {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 0;
  width: 100%;
  border: 1px solid var(--clrTertiary);
  border-radius: 8px;
  background: var(--clrSecondary);
  overflow: hidden;
}

._header_c6yrt_229 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  padding: 13px 16px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--clrAccent-60);
  border-bottom: 1px solid var(--clrTertiary);
}

._titleIcon_c6yrt_244 {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}

._metric_c6yrt_250 {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 0;
  padding: 14px 16px;
}
._metric_c6yrt_250 + ._metric_c6yrt_250 {
  border-top: 1px solid var(--clrTertiary);
}

._metricHead_c6yrt_262 {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  min-height: 20px;
}

._metricLabel_c6yrt_271 {
  font-size: 14px;
  font-weight: 600;
  color: var(--clrAccent-60);
  line-height: 1.2;
}

._metricValue_c6yrt_278 {
  font-size: 24px;
  font-weight: 800;
  line-height: 1;
  color: var(--clrTextPrimary);
}
._metricValue_c6yrt_278._positive_c6yrt_284 {
  color: var(--clrSuccess-100);
}
._metricValue_c6yrt_278._negative_c6yrt_287 {
  color: var(--clrError-100);
}

._metricValueSm_c6yrt_291 {
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  color: var(--clrTextPrimary);
}
._metricValueSm_c6yrt_291 ._of_c6yrt_297 {
  color: var(--clrAccent-40);
  font-weight: 600;
}

._metricEmpty_c6yrt_302 {
  margin-top: 8px;
  font-size: 12px;
  color: var(--clrTextTertiary);
  font-style: italic;
}

._ratioBar_c6yrt_309 {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  justify-content: flex-start;
  gap: 3px;
  height: 6px;
  margin-top: 10px;
}
._ratioBar_c6yrt_309 ._ratioWin_c6yrt_318,
._ratioBar_c6yrt_309 ._ratioLoss_c6yrt_319 {
  min-width: 6px;
  border-radius: 999px;
}
._ratioBar_c6yrt_309 ._ratioWin_c6yrt_318 {
  background: var(--clrSuccess-100);
}
._ratioBar_c6yrt_309 ._ratioLoss_c6yrt_319 {
  background: var(--clrError-100);
}

._metricFoot_c6yrt_330 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  margin-top: 8px;
  font-size: 12px;
  font-weight: 700;
}
._metricFoot_c6yrt_330 ._footWin_c6yrt_340 {
  color: var(--clrSuccess-100);
}
._metricFoot_c6yrt_330 ._footLoss_c6yrt_343 {
  color: var(--clrError-100);
}
._metricFoot_c6yrt_330 ._footDot_c6yrt_346 {
  color: var(--clrAccent-40);
  font-weight: 400;
}

._chipRow_c6yrt_351 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 10px;
}

._orderRow_c6yrt_361 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  margin-top: 10px;
}

._orderItem_c6yrt_370 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 6px 12px 6px 8px;
  border-radius: 6px;
  border: 1px solid var(--clrTertiary);
}
._orderItem_c6yrt_370 ._orderCount_c6yrt_380 {
  font-size: 14px;
  font-weight: 700;
  color: var(--clrAccent-60);
  line-height: 1;
}
._orderItem_c6yrt_370._orderBest_c6yrt_386 {
  border-color: var(--clrAccent-40);
  background: var(--clrAccent-10);
}
._orderItem_c6yrt_370._orderBest_c6yrt_386 ._orderCount_c6yrt_380 {
  color: var(--clrTextPrimary);
}

._collapsible_c6yrt_394 ._toggle_c6yrt_394 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 13px 16px;
  background: none;
  border: none;
  cursor: pointer;
  color: inherit;
  font: inherit;
  text-align: left;
}
._collapsible_c6yrt_394 ._toggleTitle_c6yrt_409 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--clrAccent-60);
}
._collapsible_c6yrt_394 ._togglePreview_c6yrt_421 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-shrink: 0;
}
._collapsible_c6yrt_394 ._togglePreview_c6yrt_421 ._previewValue_c6yrt_429 {
  font-size: 16px;
  font-weight: 800;
  color: var(--clrTextPrimary);
}
._collapsible_c6yrt_394 ._togglePreview_c6yrt_421 ._previewValue_c6yrt_429._positive_c6yrt_284 {
  color: var(--clrSuccess-100);
}
._collapsible_c6yrt_394 ._togglePreview_c6yrt_421 ._previewValue_c6yrt_429._negative_c6yrt_287 {
  color: var(--clrError-100);
}
._collapsible_c6yrt_394 ._chevron_c6yrt_440 {
  width: 18px;
  height: 18px;
  color: var(--clrAccent-60);
  transition: transform 0.25s ease;
}
._collapsible_c6yrt_394 ._chevron_c6yrt_440._chevronOpen_c6yrt_446 {
  transform: rotate(180deg);
}
._collapsible_c6yrt_394 ._collapsibleBody_c6yrt_449 {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.25s ease;
}
._collapsible_c6yrt_394 ._collapsibleBody_c6yrt_449 ._collapsibleInner_c6yrt_454 {
  overflow: hidden;
}
._collapsible_c6yrt_394 ._collapsibleBody_c6yrt_449._expanded_c6yrt_457 {
  grid-template-rows: 1fr;
}
._collapsible_c6yrt_394 ._metric_c6yrt_250:first-child {
  border-top: 1px solid var(--clrTertiary);
}html {
  color-scheme: dark;
}

html:has(body._themeLight_6n1my_5),
html:has(body._themePastelLight_6n1my_6) {
  color-scheme: light;
}

:root {
  --clrPrimary: #F4F4F5;
  --clrPrimary30: rgba(244, 244, 245, 0.3);
  --clrSecondary: #FEFEFE;
  --clrTertiary: #E4E4E7;
  --clrPrimaryReverse: #101418;
  --clrSecondaryReverse: #0A0F14;
  --clrTertiaryReverse: #212327;
  --clrTextPrimary: #101418;
  --clrTextSecondary: #2E3337;
  --clrTextTertiary: #7C7C7C;
  --clrTextPrimaryReverse: #F4F4F5;
  --clrTextSecondaryReverse: #CDCDCD;
  --clrTextTertiaryReverse: #8A8A8A;
  --clrError-100: #641f1f;
  --clrError-50: #c84d4d;
  --clrSuccess-100: #2d692d;
  --clrSuccess-50: #3EA03E;
  --clrSuccessOnTint: #0d260d;
  --clrErrorOnTint: #2e0a0a;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgb(50, 126, 75, 0.1) 30%,
          rgb(94, 178, 122, 0.36) 60%,
          rgb(144, 215, 168) 100%);
  --clrNavBackground: rgba(244, 244, 245, 0.15);
  --clrNavItemActive: rgba(211, 211, 211, 0.4);
  --clrNavItemHover: rgba(0, 0, 0, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #F4F4F5;
  --clrGlassBackground: rgba(255, 255, 255, 0.5);
  --clrGlassBackgroundStrong: rgba(255, 255, 255, 0.3);
  --clrGlassBorder: rgba(0, 0, 0, 0.1);
  --snackbarDefaultBg: #F1ECE9;
  --snackbarDefaultText: #5D605C;
  --snackbarDefaultBorder: #5D605C;
  --snackbarDefaultIcon: #5D605C;
  --snackbarSuccessBg: #E0F1D9;
  --snackbarSuccessText: #358935;
  --snackbarSuccessBorder: #358935;
  --snackbarSuccessIcon: #358935;
  --snackbarErrorBg: #F9E1DC;
  --snackbarErrorText: #C80D12;
  --snackbarErrorBorder: #C80D12;
  --snackbarErrorIcon: #C80D12;
}

._themeLight_6n1my_5 {
  --clrPrimary: #F4F4F5;
  --clrPrimary30: rgba(244, 244, 245, 0.3);
  --clrSecondary: #FEFEFE;
  --clrTertiary: #E4E4E7;
  --clrPrimaryReverse: #101418;
  --clrSecondaryReverse: #0A0F14;
  --clrTertiaryReverse: #212327;
  --clrTextPrimary: #101418;
  --clrTextSecondary: #2E3337;
  --clrTextTertiary: #7C7C7C;
  --clrTextPrimaryReverse: #F4F4F5;
  --clrTextSecondaryReverse: #CDCDCD;
  --clrTextTertiaryReverse: #8A8A8A;
  --clrError-100: #c03b3b;
  --clrError-50: #f6c5c5;
  --clrSuccess-100: #30d330;
  --clrSuccess-50: #bbffbb;
  --clrSuccessOnTint: #1f4f1f;
  --clrErrorOnTint: #7a1f1f;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgb(50, 126, 75, 0.1) 30%,
          rgb(94, 178, 122, 0.36) 60%,
          rgb(144, 215, 168) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(175, 49, 49, 0.1) 30%,
          rgba(238, 70, 70, 0.36) 60%,
          rgb(255, 173, 173) 100%);
  --clrNavBackground: rgba(244, 244, 245, 0.15);
  --clrNavItemActive: rgba(211, 211, 211, 0.4);
  --clrNavItemHover: rgba(0, 0, 0, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0000c1;
  --clrGlassBackground: rgba(255, 255, 255, 0.5);
  --clrGlassBackgroundStrong: rgba(255, 255, 255, 0.5);
  --clrGlassBorder: rgba(0, 0, 0, 0.1);
  --snackbarDefaultBg: #F1ECE9;
  --snackbarDefaultText: #5D605C;
  --snackbarDefaultBorder: #5D605C;
  --snackbarDefaultIcon: #5D605C;
  --snackbarSuccessBg: #E0F1D9;
  --snackbarSuccessText: #358935;
  --snackbarSuccessBorder: #358935;
  --snackbarSuccessIcon: #358935;
  --snackbarErrorBg: #F9E1DC;
  --snackbarErrorText: #C80D12;
  --snackbarErrorBorder: #C80D12;
  --snackbarErrorIcon: #C80D12;
}

._themeDark_6n1my_131 {
  --clrPrimary: #0F1418;
  --clrPrimary30: rgba(15, 20, 25, 0.3);
  --clrSecondary: #0A0F14;
  --clrTertiary: #212327;
  --clrPrimaryReverse: #F4F4F5;
  --clrSecondaryReverse: #FEFEFE;
  --clrTertiaryReverse: #E4E4E7;
  --clrTextPrimary: #F4F4F5;
  --clrTextSecondary: #CDCDCD;
  --clrTextTertiary: #8A8A8A;
  --clrTextPrimaryReverse: #101418;
  --clrTextSecondaryReverse: #2E3337;
  --clrTextTertiaryReverse: #7C7C7C;
  --clrError-100: #c84d4d;
  --clrError-50: #641f1f;
  --clrSuccess-100: #3EA03E;
  --clrSuccess-50: #2d692d;
  --clrSuccessOnTint: #d6ffd6;
  --clrErrorOnTint: #ffd6d6;
  --clrWarning-100: #E88434;
  --clrWarning-50: #C49168;
  --clrAccent-100: #FFFFFF;
  --clrAccent-80: rgba(255, 255, 255, 0.8);
  --clrAccent-60: rgba(255, 255, 255, 0.6);
  --clrAccent-50: rgba(255, 255, 255, 0.5);
  --clrAccent-40: rgba(255, 255, 255, 0.4);
  --clrAccent-30: rgba(255, 255, 255, 0.3);
  --clrAccent-20: rgba(255, 255, 255, 0.2);
  --clrAccent-10: rgba(255, 255, 255, 0.1);
  --clrGradient: linear-gradient(90deg, #262a2e 10%, var(--clrPrimary) 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(50, 126, 75, 0.15) 30%,
          rgba(50, 126, 75, 0.3) 60%,
          rgba(50, 126, 75, 0.5) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(167, 44, 44, 0) 0%,
          rgba(167, 44, 44, 0.15) 30%,
          rgba(167, 44, 44, 0.3) 60%,
          rgba(167, 44, 44, 0.5) 100%);
  --clrNavBackground: rgba(0, 0, 0, 0.15);
  --clrNavItemActive: rgba(24, 24, 24, 0.49);
  --clrNavItemHover: rgba(255, 255, 255, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0F1418;
  --clrGlassBackground: rgba(15, 20, 24, 0.5);
  --clrGlassBackgroundStrong: rgba(15, 20, 24, 0.6);
  --clrGlassBorder: rgba(255, 255, 255, 0.1);
  --snackbarDefaultBg: #414141;
  --snackbarDefaultText: #BABABA;
  --snackbarDefaultBorder: #BABABA;
  --snackbarDefaultIcon: #BABABA;
  --snackbarSuccessBg: #145E18;
  --snackbarSuccessText: #8FE094;
  --snackbarSuccessBorder: #8FE094;
  --snackbarSuccessIcon: #8FE094;
  --snackbarErrorBg: #910C09;
  --snackbarErrorText: #FE9E9D;
  --snackbarErrorBorder: #FE9E9D;
  --snackbarErrorIcon: #FE9E9D;
}

/* 

Note: 
    If you want something done quick, ask AI to buuild your color themes.
    If you want to do it right and tidy though, do it manually. 

    - Theo

*/
:root {
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --font-accent: "Jaro", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}

html,
body {
  font-family: var(--font-sans);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

@keyframes _fadeIn_6n1my_1 {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes _fadeOut_6n1my_1 {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
._roundForm_6n1my_232 {
  border-radius: 8px;
  width: 100%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: stretch;
  gap: 12px;
  animation: _fadeIn_6n1my_1 0.3s ease-in-out;
}
._roundForm_6n1my_232 ._formGroup_6n1my_243 {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: stretch;
  gap: 8px;
}
._roundForm_6n1my_232 ._formGroup_6n1my_243 label {
  font-size: 14px;
  color: var(--clrAccent-60);
}
._roundForm_6n1my_232 ._formGroup_6n1my_243 ._searchInput_6n1my_257 {
  width: 100%;
  height: 46px;
  padding: 0 16px;
  border-radius: 8px;
  border: none;
  background-color: var(--clrTertiary);
  color: var(--clrAccent-100);
}
._roundForm_6n1my_232 ._formGroup_6n1my_243 ._searchInput_6n1my_257::placeholder {
  color: var(--clrAccent-60);
}
._roundForm_6n1my_232 ._formGroup_6n1my_243 ._noteLabel_6n1my_269 {
  display: flex;
  align-items: center;
  gap: 6px;
}
._roundForm_6n1my_232 ._formGroup_6n1my_243 ._noteIcon_6n1my_274 {
  width: 18px;
  height: 18px;
  color: var(--clrAccent-60);
}
._roundForm_6n1my_232 ._formGroup_6n1my_243 ._noteInput_6n1my_279 {
  width: 100%;
  padding: 12px 16px;
  border-radius: 8px;
  border: none;
  background-color: var(--clrTertiary);
  color: var(--clrAccent-100);
  font-family: inherit;
  font-size: 14px;
  resize: none;
  min-height: 60px;
}
._roundForm_6n1my_232 ._formGroup_6n1my_243 ._noteInput_6n1my_279::placeholder {
  color: var(--clrAccent-60);
}
._roundForm_6n1my_232 ._formGroup_6n1my_243 ._noteInput_6n1my_279:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
._roundForm_6n1my_232 ._leaderCarouselFormGroup_6n1my_298 {
  overflow: hidden;
  min-width: 0;
}
._roundForm_6n1my_232 ._toggleRow_6n1my_302 {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: stretch;
  gap: 12px;
}
@media (min-width: 640px) {
  ._roundForm_6n1my_232 ._toggleRow_6n1my_302 {
    flex-direction: row;
    justify-content: space-between;
  }
}
._roundForm_6n1my_232 ._toggleGroup_6n1my_316 {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: stretch;
  gap: 4px;
}
._roundForm_6n1my_232 ._toggleGroup_6n1my_316 span {
  font-size: 14px;
  color: var(--clrAccent-60);
}
._roundForm_6n1my_232 ._toggleGroup_6n1my_316 ._toggleOptions_6n1my_328 {
  display: flex;
  gap: 8px;
}
._roundForm_6n1my_232 ._toggleGroup_6n1my_316 ._toggleBtn_6n1my_332 {
  flex: 1;
  padding: 10px 0;
  border-radius: 8px;
  border: 1px solid var(--clrAccent-30);
  background-color: transparent;
  color: var(--clrAccent-100);
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  padding: 8px 16px;
}
._roundForm_6n1my_232 ._toggleGroup_6n1my_316 ._toggleBtn_6n1my_332._active_6n1my_344 {
  background-color: var(--clrAccent-100);
  color: var(--clrPrimary);
  border-color: var(--clrAccent-100);
}
._roundForm_6n1my_232 ._toggleGroup_6n1my_316 ._singleToggleBtn_6n1my_349 {
  padding: 16px 32px;
  border-radius: 8px;
  border: 1px solid var(--clrAccent-30);
  background-color: transparent;
  color: var(--clrAccent-100);
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
._roundForm_6n1my_232 ._toggleGroup_6n1my_316 ._singleToggleBtn_6n1my_349 ._value_6n1my_365 {
  padding: 4px 12px;
  border-radius: 4px;
  background-color: rgba(var(--clrAccent-100-rgb), 0.1);
  font-size: 14px;
  color: var(--clrAccent-100);
}
._roundForm_6n1my_232 ._toggleGroup_6n1my_316 ._singleToggleBtn_6n1my_349:hover {
  border-color: var(--clrAccent-100);
}
._roundForm_6n1my_232 ._toggleGroup_6n1my_316 ._singleToggleBtn_6n1my_349._winResult_6n1my_375 {
  background-color: rgba(34, 197, 94, 0.15);
  border-color: rgba(34, 197, 94, 0.3);
  color: #16a34a;
}
._roundForm_6n1my_232 ._toggleGroup_6n1my_316 ._singleToggleBtn_6n1my_349._winResult_6n1my_375 ._value_6n1my_365 {
  background-color: rgba(34, 197, 94, 0.25);
}
._roundForm_6n1my_232 ._toggleGroup_6n1my_316 ._singleToggleBtn_6n1my_349._winResult_6n1my_375:hover {
  background-color: rgba(34, 197, 94, 0.25);
  border-color: rgba(34, 197, 94, 0.5);
}
._roundForm_6n1my_232 ._toggleGroup_6n1my_316 ._singleToggleBtn_6n1my_349._loseResult_6n1my_387 {
  background-color: rgba(239, 68, 68, 0.15);
  border-color: rgba(239, 68, 68, 0.3);
  color: #dc2626;
}
._roundForm_6n1my_232 ._toggleGroup_6n1my_316 ._singleToggleBtn_6n1my_349._loseResult_6n1my_387 ._value_6n1my_365 {
  background-color: rgba(239, 68, 68, 0.25);
}
._roundForm_6n1my_232 ._toggleGroup_6n1my_316 ._singleToggleBtn_6n1my_349._loseResult_6n1my_387:hover {
  background-color: rgba(239, 68, 68, 0.25);
  border-color: rgba(239, 68, 68, 0.5);
}
._roundForm_6n1my_232 ._topCutGames_6n1my_399 {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
}
._roundForm_6n1my_232 ._topCutGames_6n1my_399 ._gameResultGroup_6n1my_407 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
._roundForm_6n1my_232 ._topCutGames_6n1my_399 ._gameResultGroup_6n1my_407 label {
  font-size: 14px;
  color: var(--clrAccent-60);
  font-weight: 600;
}
._roundForm_6n1my_232 ._topCutGames_6n1my_399 ._gameResultGroup_6n1my_407 ._gameButtons_6n1my_419 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
._roundForm_6n1my_232 ._topCutGames_6n1my_399 ._gameResultGroup_6n1my_407 ._gameButtons_6n1my_419 ._gameBtn_6n1my_424 {
  padding: 12px 24px;
  border-radius: 8px;
  border: 2px solid var(--clrAccent-30);
  background-color: var(--clrTertiary);
  color: var(--clrAccent-100);
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}
._roundForm_6n1my_232 ._topCutGames_6n1my_399 ._gameResultGroup_6n1my_407 ._gameButtons_6n1my_419 ._gameBtn_6n1my_424:hover:not(:disabled) {
  border-color: var(--clrAccent-100);
}
._roundForm_6n1my_232 ._topCutGames_6n1my_399 ._gameResultGroup_6n1my_407 ._gameButtons_6n1my_419 ._gameBtn_6n1my_424:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}
._roundForm_6n1my_232 ._topCutGames_6n1my_399 ._gameResultGroup_6n1my_407 ._gameButtons_6n1my_419 ._gameBtn_6n1my_424._winSelected_6n1my_441 {
  background-color: rgba(34, 197, 94, 0.2);
  border-color: #22c55e;
  color: #22c55e;
}
._roundForm_6n1my_232 ._topCutGames_6n1my_399 ._gameResultGroup_6n1my_407 ._gameButtons_6n1my_419 ._gameBtn_6n1my_424._loseSelected_6n1my_446 {
  background-color: rgba(239, 68, 68, 0.2);
  border-color: #ef4444;
  color: #ef4444;
}
._roundForm_6n1my_232 ._formActions_6n1my_451 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 8px;
  width: 100%;
}
._roundForm_6n1my_232 ._formActions_6n1my_451 ._cancelBtn_6n1my_460 {
  padding: 12px 24px;
  border-radius: 8px;
  border: 1px solid var(--clrAccent-30);
  background-color: transparent;
  color: var(--clrAccent-100);
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}
._roundForm_6n1my_232 ._formActions_6n1my_451 ._cancelBtn_6n1my_460:hover:not(:disabled) {
  border-color: var(--clrAccent-100);
}
._roundForm_6n1my_232 ._formActions_6n1my_451 ._cancelBtn_6n1my_460:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
._roundForm_6n1my_232 ._formActions_6n1my_451 ._saveRoundBtn_6n1my_477 {
  padding: 12px 24px;
  background-color: #5cb85c;
  color: white;
  border: none;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  width: 100%;
}
._roundForm_6n1my_232 ._formActions_6n1my_451 ._saveRoundBtn_6n1my_477:hover:not(:disabled) {
  background-color: #4cae4c;
}
._roundForm_6n1my_232 ._formActions_6n1my_451 ._saveRoundBtn_6n1my_477:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
._roundForm_6n1my_232 ._formMessage_6n1my_495 {
  font-size: 14px;
  margin: 0;
  text-align: center;
}html {
  color-scheme: dark;
}

html:has(body._themeLight_d5hfe_5),
html:has(body._themePastelLight_d5hfe_6) {
  color-scheme: light;
}

:root {
  --clrPrimary: #F4F4F5;
  --clrPrimary30: rgba(244, 244, 245, 0.3);
  --clrSecondary: #FEFEFE;
  --clrTertiary: #E4E4E7;
  --clrPrimaryReverse: #101418;
  --clrSecondaryReverse: #0A0F14;
  --clrTertiaryReverse: #212327;
  --clrTextPrimary: #101418;
  --clrTextSecondary: #2E3337;
  --clrTextTertiary: #7C7C7C;
  --clrTextPrimaryReverse: #F4F4F5;
  --clrTextSecondaryReverse: #CDCDCD;
  --clrTextTertiaryReverse: #8A8A8A;
  --clrError-100: #641f1f;
  --clrError-50: #c84d4d;
  --clrSuccess-100: #2d692d;
  --clrSuccess-50: #3EA03E;
  --clrSuccessOnTint: #0d260d;
  --clrErrorOnTint: #2e0a0a;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgb(50, 126, 75, 0.1) 30%,
          rgb(94, 178, 122, 0.36) 60%,
          rgb(144, 215, 168) 100%);
  --clrNavBackground: rgba(244, 244, 245, 0.15);
  --clrNavItemActive: rgba(211, 211, 211, 0.4);
  --clrNavItemHover: rgba(0, 0, 0, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #F4F4F5;
  --clrGlassBackground: rgba(255, 255, 255, 0.5);
  --clrGlassBackgroundStrong: rgba(255, 255, 255, 0.3);
  --clrGlassBorder: rgba(0, 0, 0, 0.1);
  --snackbarDefaultBg: #F1ECE9;
  --snackbarDefaultText: #5D605C;
  --snackbarDefaultBorder: #5D605C;
  --snackbarDefaultIcon: #5D605C;
  --snackbarSuccessBg: #E0F1D9;
  --snackbarSuccessText: #358935;
  --snackbarSuccessBorder: #358935;
  --snackbarSuccessIcon: #358935;
  --snackbarErrorBg: #F9E1DC;
  --snackbarErrorText: #C80D12;
  --snackbarErrorBorder: #C80D12;
  --snackbarErrorIcon: #C80D12;
}

._themeLight_d5hfe_5 {
  --clrPrimary: #F4F4F5;
  --clrPrimary30: rgba(244, 244, 245, 0.3);
  --clrSecondary: #FEFEFE;
  --clrTertiary: #E4E4E7;
  --clrPrimaryReverse: #101418;
  --clrSecondaryReverse: #0A0F14;
  --clrTertiaryReverse: #212327;
  --clrTextPrimary: #101418;
  --clrTextSecondary: #2E3337;
  --clrTextTertiary: #7C7C7C;
  --clrTextPrimaryReverse: #F4F4F5;
  --clrTextSecondaryReverse: #CDCDCD;
  --clrTextTertiaryReverse: #8A8A8A;
  --clrError-100: #c03b3b;
  --clrError-50: #f6c5c5;
  --clrSuccess-100: #30d330;
  --clrSuccess-50: #bbffbb;
  --clrSuccessOnTint: #1f4f1f;
  --clrErrorOnTint: #7a1f1f;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgb(50, 126, 75, 0.1) 30%,
          rgb(94, 178, 122, 0.36) 60%,
          rgb(144, 215, 168) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(175, 49, 49, 0.1) 30%,
          rgba(238, 70, 70, 0.36) 60%,
          rgb(255, 173, 173) 100%);
  --clrNavBackground: rgba(244, 244, 245, 0.15);
  --clrNavItemActive: rgba(211, 211, 211, 0.4);
  --clrNavItemHover: rgba(0, 0, 0, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0000c1;
  --clrGlassBackground: rgba(255, 255, 255, 0.5);
  --clrGlassBackgroundStrong: rgba(255, 255, 255, 0.5);
  --clrGlassBorder: rgba(0, 0, 0, 0.1);
  --snackbarDefaultBg: #F1ECE9;
  --snackbarDefaultText: #5D605C;
  --snackbarDefaultBorder: #5D605C;
  --snackbarDefaultIcon: #5D605C;
  --snackbarSuccessBg: #E0F1D9;
  --snackbarSuccessText: #358935;
  --snackbarSuccessBorder: #358935;
  --snackbarSuccessIcon: #358935;
  --snackbarErrorBg: #F9E1DC;
  --snackbarErrorText: #C80D12;
  --snackbarErrorBorder: #C80D12;
  --snackbarErrorIcon: #C80D12;
}

._themeDark_d5hfe_131 {
  --clrPrimary: #0F1418;
  --clrPrimary30: rgba(15, 20, 25, 0.3);
  --clrSecondary: #0A0F14;
  --clrTertiary: #212327;
  --clrPrimaryReverse: #F4F4F5;
  --clrSecondaryReverse: #FEFEFE;
  --clrTertiaryReverse: #E4E4E7;
  --clrTextPrimary: #F4F4F5;
  --clrTextSecondary: #CDCDCD;
  --clrTextTertiary: #8A8A8A;
  --clrTextPrimaryReverse: #101418;
  --clrTextSecondaryReverse: #2E3337;
  --clrTextTertiaryReverse: #7C7C7C;
  --clrError-100: #c84d4d;
  --clrError-50: #641f1f;
  --clrSuccess-100: #3EA03E;
  --clrSuccess-50: #2d692d;
  --clrSuccessOnTint: #d6ffd6;
  --clrErrorOnTint: #ffd6d6;
  --clrWarning-100: #E88434;
  --clrWarning-50: #C49168;
  --clrAccent-100: #FFFFFF;
  --clrAccent-80: rgba(255, 255, 255, 0.8);
  --clrAccent-60: rgba(255, 255, 255, 0.6);
  --clrAccent-50: rgba(255, 255, 255, 0.5);
  --clrAccent-40: rgba(255, 255, 255, 0.4);
  --clrAccent-30: rgba(255, 255, 255, 0.3);
  --clrAccent-20: rgba(255, 255, 255, 0.2);
  --clrAccent-10: rgba(255, 255, 255, 0.1);
  --clrGradient: linear-gradient(90deg, #262a2e 10%, var(--clrPrimary) 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(50, 126, 75, 0.15) 30%,
          rgba(50, 126, 75, 0.3) 60%,
          rgba(50, 126, 75, 0.5) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(167, 44, 44, 0) 0%,
          rgba(167, 44, 44, 0.15) 30%,
          rgba(167, 44, 44, 0.3) 60%,
          rgba(167, 44, 44, 0.5) 100%);
  --clrNavBackground: rgba(0, 0, 0, 0.15);
  --clrNavItemActive: rgba(24, 24, 24, 0.49);
  --clrNavItemHover: rgba(255, 255, 255, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0F1418;
  --clrGlassBackground: rgba(15, 20, 24, 0.5);
  --clrGlassBackgroundStrong: rgba(15, 20, 24, 0.6);
  --clrGlassBorder: rgba(255, 255, 255, 0.1);
  --snackbarDefaultBg: #414141;
  --snackbarDefaultText: #BABABA;
  --snackbarDefaultBorder: #BABABA;
  --snackbarDefaultIcon: #BABABA;
  --snackbarSuccessBg: #145E18;
  --snackbarSuccessText: #8FE094;
  --snackbarSuccessBorder: #8FE094;
  --snackbarSuccessIcon: #8FE094;
  --snackbarErrorBg: #910C09;
  --snackbarErrorText: #FE9E9D;
  --snackbarErrorBorder: #FE9E9D;
  --snackbarErrorIcon: #FE9E9D;
}

/* 

Note: 
    If you want something done quick, ask AI to buuild your color themes.
    If you want to do it right and tidy though, do it manually. 

    - Theo

*/
:root {
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --font-accent: "Jaro", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}

html,
body {
  font-family: var(--font-sans);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

@keyframes _slideInFromRight_d5hfe_1 {
  from {
    opacity: 0;
    transform: translateX(30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes _slideInFromLeft_d5hfe_1 {
  from {
    opacity: 0;
    transform: translateX(-30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
._stepContainer_d5hfe_236 {
  width: 100%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 12px;
}

._selectionStep_d5hfe_246 {
  animation: _slideInFromLeft_d5hfe_1 0.2s cubic-bezier(0.32, 0.72, 0, 1) forwards;
}

._formStep_d5hfe_250 {
  animation: _slideInFromRight_d5hfe_1 0.2s cubic-bezier(0.32, 0.72, 0, 1) forwards;
}html {
  color-scheme: dark;
}

html:has(body._themeLight_z9tfw_5),
html:has(body._themePastelLight_z9tfw_6) {
  color-scheme: light;
}

:root {
  --clrPrimary: #F4F4F5;
  --clrPrimary30: rgba(244, 244, 245, 0.3);
  --clrSecondary: #FEFEFE;
  --clrTertiary: #E4E4E7;
  --clrPrimaryReverse: #101418;
  --clrSecondaryReverse: #0A0F14;
  --clrTertiaryReverse: #212327;
  --clrTextPrimary: #101418;
  --clrTextSecondary: #2E3337;
  --clrTextTertiary: #7C7C7C;
  --clrTextPrimaryReverse: #F4F4F5;
  --clrTextSecondaryReverse: #CDCDCD;
  --clrTextTertiaryReverse: #8A8A8A;
  --clrError-100: #641f1f;
  --clrError-50: #c84d4d;
  --clrSuccess-100: #2d692d;
  --clrSuccess-50: #3EA03E;
  --clrSuccessOnTint: #0d260d;
  --clrErrorOnTint: #2e0a0a;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgb(50, 126, 75, 0.1) 30%,
          rgb(94, 178, 122, 0.36) 60%,
          rgb(144, 215, 168) 100%);
  --clrNavBackground: rgba(244, 244, 245, 0.15);
  --clrNavItemActive: rgba(211, 211, 211, 0.4);
  --clrNavItemHover: rgba(0, 0, 0, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #F4F4F5;
  --clrGlassBackground: rgba(255, 255, 255, 0.5);
  --clrGlassBackgroundStrong: rgba(255, 255, 255, 0.3);
  --clrGlassBorder: rgba(0, 0, 0, 0.1);
  --snackbarDefaultBg: #F1ECE9;
  --snackbarDefaultText: #5D605C;
  --snackbarDefaultBorder: #5D605C;
  --snackbarDefaultIcon: #5D605C;
  --snackbarSuccessBg: #E0F1D9;
  --snackbarSuccessText: #358935;
  --snackbarSuccessBorder: #358935;
  --snackbarSuccessIcon: #358935;
  --snackbarErrorBg: #F9E1DC;
  --snackbarErrorText: #C80D12;
  --snackbarErrorBorder: #C80D12;
  --snackbarErrorIcon: #C80D12;
}

._themeLight_z9tfw_5 {
  --clrPrimary: #F4F4F5;
  --clrPrimary30: rgba(244, 244, 245, 0.3);
  --clrSecondary: #FEFEFE;
  --clrTertiary: #E4E4E7;
  --clrPrimaryReverse: #101418;
  --clrSecondaryReverse: #0A0F14;
  --clrTertiaryReverse: #212327;
  --clrTextPrimary: #101418;
  --clrTextSecondary: #2E3337;
  --clrTextTertiary: #7C7C7C;
  --clrTextPrimaryReverse: #F4F4F5;
  --clrTextSecondaryReverse: #CDCDCD;
  --clrTextTertiaryReverse: #8A8A8A;
  --clrError-100: #c03b3b;
  --clrError-50: #f6c5c5;
  --clrSuccess-100: #30d330;
  --clrSuccess-50: #bbffbb;
  --clrSuccessOnTint: #1f4f1f;
  --clrErrorOnTint: #7a1f1f;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgb(50, 126, 75, 0.1) 30%,
          rgb(94, 178, 122, 0.36) 60%,
          rgb(144, 215, 168) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(175, 49, 49, 0.1) 30%,
          rgba(238, 70, 70, 0.36) 60%,
          rgb(255, 173, 173) 100%);
  --clrNavBackground: rgba(244, 244, 245, 0.15);
  --clrNavItemActive: rgba(211, 211, 211, 0.4);
  --clrNavItemHover: rgba(0, 0, 0, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0000c1;
  --clrGlassBackground: rgba(255, 255, 255, 0.5);
  --clrGlassBackgroundStrong: rgba(255, 255, 255, 0.5);
  --clrGlassBorder: rgba(0, 0, 0, 0.1);
  --snackbarDefaultBg: #F1ECE9;
  --snackbarDefaultText: #5D605C;
  --snackbarDefaultBorder: #5D605C;
  --snackbarDefaultIcon: #5D605C;
  --snackbarSuccessBg: #E0F1D9;
  --snackbarSuccessText: #358935;
  --snackbarSuccessBorder: #358935;
  --snackbarSuccessIcon: #358935;
  --snackbarErrorBg: #F9E1DC;
  --snackbarErrorText: #C80D12;
  --snackbarErrorBorder: #C80D12;
  --snackbarErrorIcon: #C80D12;
}

._themeDark_z9tfw_131 {
  --clrPrimary: #0F1418;
  --clrPrimary30: rgba(15, 20, 25, 0.3);
  --clrSecondary: #0A0F14;
  --clrTertiary: #212327;
  --clrPrimaryReverse: #F4F4F5;
  --clrSecondaryReverse: #FEFEFE;
  --clrTertiaryReverse: #E4E4E7;
  --clrTextPrimary: #F4F4F5;
  --clrTextSecondary: #CDCDCD;
  --clrTextTertiary: #8A8A8A;
  --clrTextPrimaryReverse: #101418;
  --clrTextSecondaryReverse: #2E3337;
  --clrTextTertiaryReverse: #7C7C7C;
  --clrError-100: #c84d4d;
  --clrError-50: #641f1f;
  --clrSuccess-100: #3EA03E;
  --clrSuccess-50: #2d692d;
  --clrSuccessOnTint: #d6ffd6;
  --clrErrorOnTint: #ffd6d6;
  --clrWarning-100: #E88434;
  --clrWarning-50: #C49168;
  --clrAccent-100: #FFFFFF;
  --clrAccent-80: rgba(255, 255, 255, 0.8);
  --clrAccent-60: rgba(255, 255, 255, 0.6);
  --clrAccent-50: rgba(255, 255, 255, 0.5);
  --clrAccent-40: rgba(255, 255, 255, 0.4);
  --clrAccent-30: rgba(255, 255, 255, 0.3);
  --clrAccent-20: rgba(255, 255, 255, 0.2);
  --clrAccent-10: rgba(255, 255, 255, 0.1);
  --clrGradient: linear-gradient(90deg, #262a2e 10%, var(--clrPrimary) 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(50, 126, 75, 0.15) 30%,
          rgba(50, 126, 75, 0.3) 60%,
          rgba(50, 126, 75, 0.5) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(167, 44, 44, 0) 0%,
          rgba(167, 44, 44, 0.15) 30%,
          rgba(167, 44, 44, 0.3) 60%,
          rgba(167, 44, 44, 0.5) 100%);
  --clrNavBackground: rgba(0, 0, 0, 0.15);
  --clrNavItemActive: rgba(24, 24, 24, 0.49);
  --clrNavItemHover: rgba(255, 255, 255, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0F1418;
  --clrGlassBackground: rgba(15, 20, 24, 0.5);
  --clrGlassBackgroundStrong: rgba(15, 20, 24, 0.6);
  --clrGlassBorder: rgba(255, 255, 255, 0.1);
  --snackbarDefaultBg: #414141;
  --snackbarDefaultText: #BABABA;
  --snackbarDefaultBorder: #BABABA;
  --snackbarDefaultIcon: #BABABA;
  --snackbarSuccessBg: #145E18;
  --snackbarSuccessText: #8FE094;
  --snackbarSuccessBorder: #8FE094;
  --snackbarSuccessIcon: #8FE094;
  --snackbarErrorBg: #910C09;
  --snackbarErrorText: #FE9E9D;
  --snackbarErrorBorder: #FE9E9D;
  --snackbarErrorIcon: #FE9E9D;
}

/* 

Note: 
    If you want something done quick, ask AI to buuild your color themes.
    If you want to do it right and tidy though, do it manually. 

    - Theo

*/
:root {
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --font-accent: "Jaro", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}

html,
body {
  font-family: var(--font-sans);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

._content_z9tfw_216 {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  gap: 24px;
  padding-bottom: 24px;
}

._section_z9tfw_224 {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
._section_z9tfw_224 h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: var(--clrAccent-100);
  display: flex;
  align-items: center;
  gap: 8px;
}
._section_z9tfw_224 ul {
  margin: 0;
  padding-left: 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
._section_z9tfw_224 li {
  color: var(--clrAccent-80);
  font-size: 15px;
  line-height: 1.5;
}
._section_z9tfw_224 li::marker {
  color: var(--clrAccent-40);
}

._footerNote_z9tfw_254 {
  margin-top: 8px;
  padding-top: 16px;
  border-top: 1px solid var(--clrAccent-10);
}
._footerNote_z9tfw_254 p {
  color: var(--clrTextPrimary);
  font-size: 12px;
  text-align: center;
  margin: 0;
  font-style: italic;
}

._closeButton_z9tfw_267 {
  width: 100%;
  height: 48px;
  flex-shrink: 0;
  background: var(--clrTertiary);
  color: var(--clrAccent-100);
  border: 1px solid var(--clrAccent-30);
  border-radius: 8px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}
._closeButton_z9tfw_267:hover {
  transform: translateY(-2px);
  background: var(--clrAccent-30);
}
._closeButton_z9tfw_267:active {
  transform: translateY(0);
}

@media (max-width: 768px) {
  ._section_z9tfw_224 h3 {
    font-size: 16px;
  }
  ._section_z9tfw_224 li {
    font-size: 14px;
  }
}html {
  color-scheme: dark;
}

html:has(body._themeLight_1u30n_5),
html:has(body._themePastelLight_1u30n_6) {
  color-scheme: light;
}

:root {
  --clrPrimary: #F4F4F5;
  --clrPrimary30: rgba(244, 244, 245, 0.3);
  --clrSecondary: #FEFEFE;
  --clrTertiary: #E4E4E7;
  --clrPrimaryReverse: #101418;
  --clrSecondaryReverse: #0A0F14;
  --clrTertiaryReverse: #212327;
  --clrTextPrimary: #101418;
  --clrTextSecondary: #2E3337;
  --clrTextTertiary: #7C7C7C;
  --clrTextPrimaryReverse: #F4F4F5;
  --clrTextSecondaryReverse: #CDCDCD;
  --clrTextTertiaryReverse: #8A8A8A;
  --clrError-100: #641f1f;
  --clrError-50: #c84d4d;
  --clrSuccess-100: #2d692d;
  --clrSuccess-50: #3EA03E;
  --clrSuccessOnTint: #0d260d;
  --clrErrorOnTint: #2e0a0a;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgb(50, 126, 75, 0.1) 30%,
          rgb(94, 178, 122, 0.36) 60%,
          rgb(144, 215, 168) 100%);
  --clrNavBackground: rgba(244, 244, 245, 0.15);
  --clrNavItemActive: rgba(211, 211, 211, 0.4);
  --clrNavItemHover: rgba(0, 0, 0, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #F4F4F5;
  --clrGlassBackground: rgba(255, 255, 255, 0.5);
  --clrGlassBackgroundStrong: rgba(255, 255, 255, 0.3);
  --clrGlassBorder: rgba(0, 0, 0, 0.1);
  --snackbarDefaultBg: #F1ECE9;
  --snackbarDefaultText: #5D605C;
  --snackbarDefaultBorder: #5D605C;
  --snackbarDefaultIcon: #5D605C;
  --snackbarSuccessBg: #E0F1D9;
  --snackbarSuccessText: #358935;
  --snackbarSuccessBorder: #358935;
  --snackbarSuccessIcon: #358935;
  --snackbarErrorBg: #F9E1DC;
  --snackbarErrorText: #C80D12;
  --snackbarErrorBorder: #C80D12;
  --snackbarErrorIcon: #C80D12;
}

._themeLight_1u30n_5 {
  --clrPrimary: #F4F4F5;
  --clrPrimary30: rgba(244, 244, 245, 0.3);
  --clrSecondary: #FEFEFE;
  --clrTertiary: #E4E4E7;
  --clrPrimaryReverse: #101418;
  --clrSecondaryReverse: #0A0F14;
  --clrTertiaryReverse: #212327;
  --clrTextPrimary: #101418;
  --clrTextSecondary: #2E3337;
  --clrTextTertiary: #7C7C7C;
  --clrTextPrimaryReverse: #F4F4F5;
  --clrTextSecondaryReverse: #CDCDCD;
  --clrTextTertiaryReverse: #8A8A8A;
  --clrError-100: #c03b3b;
  --clrError-50: #f6c5c5;
  --clrSuccess-100: #30d330;
  --clrSuccess-50: #bbffbb;
  --clrSuccessOnTint: #1f4f1f;
  --clrErrorOnTint: #7a1f1f;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgb(50, 126, 75, 0.1) 30%,
          rgb(94, 178, 122, 0.36) 60%,
          rgb(144, 215, 168) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(175, 49, 49, 0.1) 30%,
          rgba(238, 70, 70, 0.36) 60%,
          rgb(255, 173, 173) 100%);
  --clrNavBackground: rgba(244, 244, 245, 0.15);
  --clrNavItemActive: rgba(211, 211, 211, 0.4);
  --clrNavItemHover: rgba(0, 0, 0, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0000c1;
  --clrGlassBackground: rgba(255, 255, 255, 0.5);
  --clrGlassBackgroundStrong: rgba(255, 255, 255, 0.5);
  --clrGlassBorder: rgba(0, 0, 0, 0.1);
  --snackbarDefaultBg: #F1ECE9;
  --snackbarDefaultText: #5D605C;
  --snackbarDefaultBorder: #5D605C;
  --snackbarDefaultIcon: #5D605C;
  --snackbarSuccessBg: #E0F1D9;
  --snackbarSuccessText: #358935;
  --snackbarSuccessBorder: #358935;
  --snackbarSuccessIcon: #358935;
  --snackbarErrorBg: #F9E1DC;
  --snackbarErrorText: #C80D12;
  --snackbarErrorBorder: #C80D12;
  --snackbarErrorIcon: #C80D12;
}

._themeDark_1u30n_131 {
  --clrPrimary: #0F1418;
  --clrPrimary30: rgba(15, 20, 25, 0.3);
  --clrSecondary: #0A0F14;
  --clrTertiary: #212327;
  --clrPrimaryReverse: #F4F4F5;
  --clrSecondaryReverse: #FEFEFE;
  --clrTertiaryReverse: #E4E4E7;
  --clrTextPrimary: #F4F4F5;
  --clrTextSecondary: #CDCDCD;
  --clrTextTertiary: #8A8A8A;
  --clrTextPrimaryReverse: #101418;
  --clrTextSecondaryReverse: #2E3337;
  --clrTextTertiaryReverse: #7C7C7C;
  --clrError-100: #c84d4d;
  --clrError-50: #641f1f;
  --clrSuccess-100: #3EA03E;
  --clrSuccess-50: #2d692d;
  --clrSuccessOnTint: #d6ffd6;
  --clrErrorOnTint: #ffd6d6;
  --clrWarning-100: #E88434;
  --clrWarning-50: #C49168;
  --clrAccent-100: #FFFFFF;
  --clrAccent-80: rgba(255, 255, 255, 0.8);
  --clrAccent-60: rgba(255, 255, 255, 0.6);
  --clrAccent-50: rgba(255, 255, 255, 0.5);
  --clrAccent-40: rgba(255, 255, 255, 0.4);
  --clrAccent-30: rgba(255, 255, 255, 0.3);
  --clrAccent-20: rgba(255, 255, 255, 0.2);
  --clrAccent-10: rgba(255, 255, 255, 0.1);
  --clrGradient: linear-gradient(90deg, #262a2e 10%, var(--clrPrimary) 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(50, 126, 75, 0.15) 30%,
          rgba(50, 126, 75, 0.3) 60%,
          rgba(50, 126, 75, 0.5) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(167, 44, 44, 0) 0%,
          rgba(167, 44, 44, 0.15) 30%,
          rgba(167, 44, 44, 0.3) 60%,
          rgba(167, 44, 44, 0.5) 100%);
  --clrNavBackground: rgba(0, 0, 0, 0.15);
  --clrNavItemActive: rgba(24, 24, 24, 0.49);
  --clrNavItemHover: rgba(255, 255, 255, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0F1418;
  --clrGlassBackground: rgba(15, 20, 24, 0.5);
  --clrGlassBackgroundStrong: rgba(15, 20, 24, 0.6);
  --clrGlassBorder: rgba(255, 255, 255, 0.1);
  --snackbarDefaultBg: #414141;
  --snackbarDefaultText: #BABABA;
  --snackbarDefaultBorder: #BABABA;
  --snackbarDefaultIcon: #BABABA;
  --snackbarSuccessBg: #145E18;
  --snackbarSuccessText: #8FE094;
  --snackbarSuccessBorder: #8FE094;
  --snackbarSuccessIcon: #8FE094;
  --snackbarErrorBg: #910C09;
  --snackbarErrorText: #FE9E9D;
  --snackbarErrorBorder: #FE9E9D;
  --snackbarErrorIcon: #FE9E9D;
}

/* 

Note: 
    If you want something done quick, ask AI to buuild your color themes.
    If you want to do it right and tidy though, do it manually. 

    - Theo

*/
:root {
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --font-accent: "Jaro", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}

html,
body {
  font-family: var(--font-sans);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

._bottomBarContainer_1u30n_216 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 8px;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  padding: 12px 16px 16px 16px;
  padding-bottom: calc(16px + env(safe-area-inset-bottom));
  z-index: 1000;
  pointer-events: none;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
._bottomBarContainer_1u30n_216 ._bottomBar_1u30n_216 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex: 1 1 auto;
  max-width: 500px;
  height: 70px;
  padding: 4px 3px;
  pointer-events: auto;
  background: var(--clrPrimary30);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-radius: 40px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 1px 0 rgba(0, 0, 0, 0.05);
}
._themeLight_1u30n_5 ._bottomBarContainer_1u30n_216 ._bottomBar_1u30n_216, ._themePastelLight_1u30n_6 ._bottomBarContainer_1u30n_216 ._bottomBar_1u30n_216 {
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(0, 0, 0, 0.1);
  color: var(--clrPrimaryReverse);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 1px 0 rgba(0, 0, 0, 0.05);
}
._themeLight_1u30n_5 ._bottomBarContainer_1u30n_216 ._bottomBar_1u30n_216._legacy_1u30n_260, ._themePastelLight_1u30n_6 ._bottomBarContainer_1u30n_216 ._bottomBar_1u30n_216._legacy_1u30n_260 {
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.15);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
._themeDark_1u30n_131 ._bottomBarContainer_1u30n_216 ._bottomBar_1u30n_216 {
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(0, 0, 0, 0.2);
}
._themeDark_1u30n_131 ._bottomBarContainer_1u30n_216 ._bottomBar_1u30n_216._legacy_1u30n_260 {
  background: #1a1a1a;
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}
._bottomBarContainer_1u30n_216 ._bottomBar_1u30n_216 ._linkContainer_1u30n_274 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 500;
  color: var(--clrTertiaryReverse);
  width: 100%;
  height: 100%;
  border-radius: 40px;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  text-decoration: none;
  position: relative;
  -webkit-touch-callout: none;
  -webkit-user-drag: none;
  pointer-events: auto;
}
._bottomBarContainer_1u30n_216 ._bottomBar_1u30n_216 ._linkContainer_1u30n_274::selection {
  background: transparent;
}
._bottomBarContainer_1u30n_216 ._bottomBar_1u30n_216 ._linkContainer_1u30n_274:hover {
  color: var(--clrAccent-80);
}
._bottomBarContainer_1u30n_216 ._bottomBar_1u30n_216 ._linkContainer_1u30n_274:hover ._linkIcon_1u30n_299 {
  transform: translateY(-2px);
}
._bottomBarContainer_1u30n_216 ._bottomBar_1u30n_216 ._linkContainer_1u30n_274:active {
  background-color: var(--clrAccent-10);
  transform: scale(0.95);
}
._bottomBarContainer_1u30n_216 ._bottomBar_1u30n_216 ._linkContainer_1u30n_274._active_1u30n_306 {
  color: var(--clrAccent-80);
  background-color: rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-radius: 40px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 0 rgba(0, 0, 0, 0.05);
}
._legacy_1u30n_260 ._bottomBarContainer_1u30n_216 ._bottomBar_1u30n_216 ._linkContainer_1u30n_274._active_1u30n_306 {
  background-color: var(--clrAccent-20);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: 1px solid var(--clrAccent-30);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}
._bottomBarContainer_1u30n_216 ._bottomBar_1u30n_216 ._linkContainer_1u30n_274._active_1u30n_306 ._linkIcon_1u30n_299 {
  color: var(--clrAccent-80);
}
._bottomBarContainer_1u30n_216 ._bottomBar_1u30n_216 ._linkContainer_1u30n_274 ._linkIcon_1u30n_299 {
  height: 28px;
  font-size: 24px;
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  align-items: center;
  justify-content: center;
}
._bottomBarContainer_1u30n_216 ._bottomBar_1u30n_216 ._linkContainer_1u30n_274 ._linkLabel_1u30n_333 {
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (max-width: 400px) {
  ._bottomBarContainer_1u30n_216 ._bottomBar_1u30n_216 ._linkContainer_1u30n_274 ._linkLabel_1u30n_333 {
    font-size: 9.5px;
  }
}
._bottomBarContainer_1u30n_216 ._playButton_1u30n_344 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  flex: 0 0 70px;
  width: 70px;
  height: 70px;
  border-radius: 40px;
  pointer-events: auto;
  color: var(--clrTertiaryReverse);
  text-decoration: none;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  background: var(--clrPrimary30);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 1px 0 rgba(0, 0, 0, 0.05);
  -webkit-touch-callout: none;
  -webkit-user-drag: none;
}
._themeLight_1u30n_5 ._bottomBarContainer_1u30n_216 ._playButton_1u30n_344, ._themePastelLight_1u30n_6 ._bottomBarContainer_1u30n_216 ._playButton_1u30n_344 {
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(0, 0, 0, 0.1);
  color: var(--clrPrimaryReverse);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 1px 0 rgba(0, 0, 0, 0.05);
}
._themeDark_1u30n_131 ._bottomBarContainer_1u30n_216 ._playButton_1u30n_344 {
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(0, 0, 0, 0.2);
}
._bottomBarContainer_1u30n_216 ._playButton_1u30n_344:hover {
  color: var(--clrAccent-80);
}
._bottomBarContainer_1u30n_216 ._playButton_1u30n_344:hover ._linkIcon_1u30n_299 {
  transform: translateY(-2px);
}
._bottomBarContainer_1u30n_216 ._playButton_1u30n_344:active {
  transform: scale(0.95);
}
._bottomBarContainer_1u30n_216 ._playButton_1u30n_344._active_1u30n_306 {
  color: var(--clrAccent-80);
  background-color: rgba(255, 255, 255, 0.3);
}
._bottomBarContainer_1u30n_216 ._playButton_1u30n_344._active_1u30n_306 ._linkIcon_1u30n_299 {
  color: var(--clrAccent-80);
}
._bottomBarContainer_1u30n_216 ._playButton_1u30n_344 ._linkIcon_1u30n_299 {
  height: 28px;
  font-size: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

@media (min-width: 841px) {
  ._bottomBarContainer_1u30n_216 {
    display: none;
  }
}html {
  color-scheme: dark;
}

html:has(body._themeLight_e3155_5),
html:has(body._themePastelLight_e3155_6) {
  color-scheme: light;
}

:root {
  --clrPrimary: #F4F4F5;
  --clrPrimary30: rgba(244, 244, 245, 0.3);
  --clrSecondary: #FEFEFE;
  --clrTertiary: #E4E4E7;
  --clrPrimaryReverse: #101418;
  --clrSecondaryReverse: #0A0F14;
  --clrTertiaryReverse: #212327;
  --clrTextPrimary: #101418;
  --clrTextSecondary: #2E3337;
  --clrTextTertiary: #7C7C7C;
  --clrTextPrimaryReverse: #F4F4F5;
  --clrTextSecondaryReverse: #CDCDCD;
  --clrTextTertiaryReverse: #8A8A8A;
  --clrError-100: #641f1f;
  --clrError-50: #c84d4d;
  --clrSuccess-100: #2d692d;
  --clrSuccess-50: #3EA03E;
  --clrSuccessOnTint: #0d260d;
  --clrErrorOnTint: #2e0a0a;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgb(50, 126, 75, 0.1) 30%,
          rgb(94, 178, 122, 0.36) 60%,
          rgb(144, 215, 168) 100%);
  --clrNavBackground: rgba(244, 244, 245, 0.15);
  --clrNavItemActive: rgba(211, 211, 211, 0.4);
  --clrNavItemHover: rgba(0, 0, 0, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #F4F4F5;
  --clrGlassBackground: rgba(255, 255, 255, 0.5);
  --clrGlassBackgroundStrong: rgba(255, 255, 255, 0.3);
  --clrGlassBorder: rgba(0, 0, 0, 0.1);
  --snackbarDefaultBg: #F1ECE9;
  --snackbarDefaultText: #5D605C;
  --snackbarDefaultBorder: #5D605C;
  --snackbarDefaultIcon: #5D605C;
  --snackbarSuccessBg: #E0F1D9;
  --snackbarSuccessText: #358935;
  --snackbarSuccessBorder: #358935;
  --snackbarSuccessIcon: #358935;
  --snackbarErrorBg: #F9E1DC;
  --snackbarErrorText: #C80D12;
  --snackbarErrorBorder: #C80D12;
  --snackbarErrorIcon: #C80D12;
}

._themeLight_e3155_5 {
  --clrPrimary: #F4F4F5;
  --clrPrimary30: rgba(244, 244, 245, 0.3);
  --clrSecondary: #FEFEFE;
  --clrTertiary: #E4E4E7;
  --clrPrimaryReverse: #101418;
  --clrSecondaryReverse: #0A0F14;
  --clrTertiaryReverse: #212327;
  --clrTextPrimary: #101418;
  --clrTextSecondary: #2E3337;
  --clrTextTertiary: #7C7C7C;
  --clrTextPrimaryReverse: #F4F4F5;
  --clrTextSecondaryReverse: #CDCDCD;
  --clrTextTertiaryReverse: #8A8A8A;
  --clrError-100: #c03b3b;
  --clrError-50: #f6c5c5;
  --clrSuccess-100: #30d330;
  --clrSuccess-50: #bbffbb;
  --clrSuccessOnTint: #1f4f1f;
  --clrErrorOnTint: #7a1f1f;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgb(50, 126, 75, 0.1) 30%,
          rgb(94, 178, 122, 0.36) 60%,
          rgb(144, 215, 168) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(175, 49, 49, 0.1) 30%,
          rgba(238, 70, 70, 0.36) 60%,
          rgb(255, 173, 173) 100%);
  --clrNavBackground: rgba(244, 244, 245, 0.15);
  --clrNavItemActive: rgba(211, 211, 211, 0.4);
  --clrNavItemHover: rgba(0, 0, 0, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0000c1;
  --clrGlassBackground: rgba(255, 255, 255, 0.5);
  --clrGlassBackgroundStrong: rgba(255, 255, 255, 0.5);
  --clrGlassBorder: rgba(0, 0, 0, 0.1);
  --snackbarDefaultBg: #F1ECE9;
  --snackbarDefaultText: #5D605C;
  --snackbarDefaultBorder: #5D605C;
  --snackbarDefaultIcon: #5D605C;
  --snackbarSuccessBg: #E0F1D9;
  --snackbarSuccessText: #358935;
  --snackbarSuccessBorder: #358935;
  --snackbarSuccessIcon: #358935;
  --snackbarErrorBg: #F9E1DC;
  --snackbarErrorText: #C80D12;
  --snackbarErrorBorder: #C80D12;
  --snackbarErrorIcon: #C80D12;
}

._themeDark_e3155_131 {
  --clrPrimary: #0F1418;
  --clrPrimary30: rgba(15, 20, 25, 0.3);
  --clrSecondary: #0A0F14;
  --clrTertiary: #212327;
  --clrPrimaryReverse: #F4F4F5;
  --clrSecondaryReverse: #FEFEFE;
  --clrTertiaryReverse: #E4E4E7;
  --clrTextPrimary: #F4F4F5;
  --clrTextSecondary: #CDCDCD;
  --clrTextTertiary: #8A8A8A;
  --clrTextPrimaryReverse: #101418;
  --clrTextSecondaryReverse: #2E3337;
  --clrTextTertiaryReverse: #7C7C7C;
  --clrError-100: #c84d4d;
  --clrError-50: #641f1f;
  --clrSuccess-100: #3EA03E;
  --clrSuccess-50: #2d692d;
  --clrSuccessOnTint: #d6ffd6;
  --clrErrorOnTint: #ffd6d6;
  --clrWarning-100: #E88434;
  --clrWarning-50: #C49168;
  --clrAccent-100: #FFFFFF;
  --clrAccent-80: rgba(255, 255, 255, 0.8);
  --clrAccent-60: rgba(255, 255, 255, 0.6);
  --clrAccent-50: rgba(255, 255, 255, 0.5);
  --clrAccent-40: rgba(255, 255, 255, 0.4);
  --clrAccent-30: rgba(255, 255, 255, 0.3);
  --clrAccent-20: rgba(255, 255, 255, 0.2);
  --clrAccent-10: rgba(255, 255, 255, 0.1);
  --clrGradient: linear-gradient(90deg, #262a2e 10%, var(--clrPrimary) 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(50, 126, 75, 0.15) 30%,
          rgba(50, 126, 75, 0.3) 60%,
          rgba(50, 126, 75, 0.5) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(167, 44, 44, 0) 0%,
          rgba(167, 44, 44, 0.15) 30%,
          rgba(167, 44, 44, 0.3) 60%,
          rgba(167, 44, 44, 0.5) 100%);
  --clrNavBackground: rgba(0, 0, 0, 0.15);
  --clrNavItemActive: rgba(24, 24, 24, 0.49);
  --clrNavItemHover: rgba(255, 255, 255, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0F1418;
  --clrGlassBackground: rgba(15, 20, 24, 0.5);
  --clrGlassBackgroundStrong: rgba(15, 20, 24, 0.6);
  --clrGlassBorder: rgba(255, 255, 255, 0.1);
  --snackbarDefaultBg: #414141;
  --snackbarDefaultText: #BABABA;
  --snackbarDefaultBorder: #BABABA;
  --snackbarDefaultIcon: #BABABA;
  --snackbarSuccessBg: #145E18;
  --snackbarSuccessText: #8FE094;
  --snackbarSuccessBorder: #8FE094;
  --snackbarSuccessIcon: #8FE094;
  --snackbarErrorBg: #910C09;
  --snackbarErrorText: #FE9E9D;
  --snackbarErrorBorder: #FE9E9D;
  --snackbarErrorIcon: #FE9E9D;
}

/* 

Note: 
    If you want something done quick, ask AI to buuild your color themes.
    If you want to do it right and tidy though, do it manually. 

    - Theo

*/
:root {
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --font-accent: "Jaro", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}

html,
body {
  font-family: var(--font-sans);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

._page_e3155_216 {
  padding-block: 96px 112px;
  box-sizing: border-box;
  width: 100%;
  max-width: var(--site-max-width, 1440px);
  margin-inline: auto;
  padding-inline: var(--site-gutter, 20px);
  color: var(--clrTextPrimary);
}

._header_e3155_226,
._toolbarTitle_e3155_227,
._showcaseHeader_e3155_228 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

._header_e3155_226 {
  margin-bottom: 18px;
}
._header_e3155_226 h1 {
  margin: 0;
  font-family: var(--font-accent);
  font-weight: 400;
  font-size: clamp(2rem, 5vw, 3.2rem);
  line-height: 1;
}
._header_e3155_226 p {
  margin: 6px 0 0;
  color: var(--clrTextTertiary);
  font-weight: 700;
}

._iconButton_e3155_251 {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  flex: 0 0 auto;
  color: var(--clrTextPrimary);
  background: var(--clrSecondary);
  border: 1px solid var(--clrAccent-10);
  border-radius: 8px;
  cursor: pointer;
}
._iconButton_e3155_251 svg {
  width: 22px;
  height: 22px;
}

._accountShowcase_e3155_268 {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(320px, 1.1fr);
  gap: 18px;
  padding: 16px;
  background: color-mix(in srgb, var(--clrSecondary) 82%, transparent);
  border: 1px solid var(--clrAccent-10);
  border-radius: 8px;
}

._accountPanel_e3155_278 {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  padding-right: 18px;
  border-right: 1px solid var(--clrAccent-10);
}
._accountPanel_e3155_278 h2 {
  margin: 0;
  font-size: 1.12rem;
}
._accountPanel_e3155_278 p {
  margin: 4px 0 10px;
  color: var(--clrTextTertiary);
}

/* Name and handle read as one identity, so they share a baseline and wrap
   together. The handle steps down in weight and colour: it identifies, the name
   is what you read. */
._identity_e3155_298 {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 7px;
}

._handle_e3155_305 {
  color: var(--clrTextTertiary);
  font-size: 0.88rem;
  font-weight: 600;
}

._tierCounts_e3155_311 {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}
._tierCounts_e3155_311 span {
  padding: 5px 8px;
  color: var(--clrTextSecondary);
  font-size: 0.78rem;
  font-weight: 700;
  background: var(--clrAccent-10);
  border-radius: 999px;
}

._showcasePanel_e3155_325 {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

._showcaseHeader_e3155_228 {
  color: var(--clrTextSecondary);
  font-size: 0.86rem;
  font-weight: 900;
  text-transform: uppercase;
}

._message_e3155_338 {
  margin: 14px 0 0;
  padding: 10px 12px;
  color: var(--clrTextSecondary);
  background: var(--clrAccent-10);
  border-radius: 8px;
}

._toolbar_e3155_227 {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 28px;
}
._toolbar_e3155_227 h2 {
  margin: 0;
  font-size: 1.24rem;
}

._searchInput_e3155_357 {
  width: 100%;
  height: 42px;
  padding: 0 12px;
  color: var(--clrTextPrimary);
  background: var(--clrSecondary);
  border: 1px solid var(--clrAccent-20);
  border-radius: 8px;
}

._grid_e3155_367 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 330px), 1fr));
  gap: 14px;
  margin-top: 18px;
}

._skeletonCard_e3155_374 {
  min-height: 148px;
  background: linear-gradient(90deg, var(--clrAccent-10), var(--clrAccent-20), var(--clrAccent-10));
  background-size: 220% 100%;
  border-radius: 8px;
  animation: _shimmer_e3155_1 1.4s infinite linear;
}

._emptyState_e3155_382 {
  margin: 0;
  color: var(--clrTextTertiary);
}

._selectionList_e3155_387 {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
._selectionList_e3155_387 button {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px;
  color: var(--clrTextPrimary);
  text-align: left;
  background: var(--clrPrimary);
  border: 1px solid var(--clrAccent-10);
  border-radius: 8px;
  cursor: pointer;
}
._selectionList_e3155_387 img,
._selectionList_e3155_387 span:first-child {
  width: 42px;
  height: 42px;
  object-fit: contain;
  background: var(--clrAccent-10);
  border-radius: 50%;
}

._clearButton_e3155_415 {
  width: 100%;
  height: 42px;
  margin-top: 12px;
  color: var(--clrTextPrimary);
  font-weight: 800;
  background: transparent;
  border: 1px solid var(--clrAccent-20);
  border-radius: 8px;
  cursor: pointer;
}

@keyframes _shimmer_e3155_1 {
  to {
    background-position: -220% 0;
  }
}
@media (max-width: 740px) {
  ._page_e3155_216 {
    padding-top: 82px;
  }
  ._accountShowcase_e3155_268 {
    grid-template-columns: 1fr;
  }
  ._accountPanel_e3155_278 {
    padding-right: 0;
    padding-bottom: 14px;
    border-right: 0;
    border-bottom: 1px solid var(--clrAccent-10);
  }
}html {
  color-scheme: dark;
}

html:has(body._themeLight_5if5j_5),
html:has(body._themePastelLight_5if5j_6) {
  color-scheme: light;
}

:root {
  --clrPrimary: #F4F4F5;
  --clrPrimary30: rgba(244, 244, 245, 0.3);
  --clrSecondary: #FEFEFE;
  --clrTertiary: #E4E4E7;
  --clrPrimaryReverse: #101418;
  --clrSecondaryReverse: #0A0F14;
  --clrTertiaryReverse: #212327;
  --clrTextPrimary: #101418;
  --clrTextSecondary: #2E3337;
  --clrTextTertiary: #7C7C7C;
  --clrTextPrimaryReverse: #F4F4F5;
  --clrTextSecondaryReverse: #CDCDCD;
  --clrTextTertiaryReverse: #8A8A8A;
  --clrError-100: #641f1f;
  --clrError-50: #c84d4d;
  --clrSuccess-100: #2d692d;
  --clrSuccess-50: #3EA03E;
  --clrSuccessOnTint: #0d260d;
  --clrErrorOnTint: #2e0a0a;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgb(50, 126, 75, 0.1) 30%,
          rgb(94, 178, 122, 0.36) 60%,
          rgb(144, 215, 168) 100%);
  --clrNavBackground: rgba(244, 244, 245, 0.15);
  --clrNavItemActive: rgba(211, 211, 211, 0.4);
  --clrNavItemHover: rgba(0, 0, 0, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #F4F4F5;
  --clrGlassBackground: rgba(255, 255, 255, 0.5);
  --clrGlassBackgroundStrong: rgba(255, 255, 255, 0.3);
  --clrGlassBorder: rgba(0, 0, 0, 0.1);
  --snackbarDefaultBg: #F1ECE9;
  --snackbarDefaultText: #5D605C;
  --snackbarDefaultBorder: #5D605C;
  --snackbarDefaultIcon: #5D605C;
  --snackbarSuccessBg: #E0F1D9;
  --snackbarSuccessText: #358935;
  --snackbarSuccessBorder: #358935;
  --snackbarSuccessIcon: #358935;
  --snackbarErrorBg: #F9E1DC;
  --snackbarErrorText: #C80D12;
  --snackbarErrorBorder: #C80D12;
  --snackbarErrorIcon: #C80D12;
}

._themeLight_5if5j_5 {
  --clrPrimary: #F4F4F5;
  --clrPrimary30: rgba(244, 244, 245, 0.3);
  --clrSecondary: #FEFEFE;
  --clrTertiary: #E4E4E7;
  --clrPrimaryReverse: #101418;
  --clrSecondaryReverse: #0A0F14;
  --clrTertiaryReverse: #212327;
  --clrTextPrimary: #101418;
  --clrTextSecondary: #2E3337;
  --clrTextTertiary: #7C7C7C;
  --clrTextPrimaryReverse: #F4F4F5;
  --clrTextSecondaryReverse: #CDCDCD;
  --clrTextTertiaryReverse: #8A8A8A;
  --clrError-100: #c03b3b;
  --clrError-50: #f6c5c5;
  --clrSuccess-100: #30d330;
  --clrSuccess-50: #bbffbb;
  --clrSuccessOnTint: #1f4f1f;
  --clrErrorOnTint: #7a1f1f;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgb(50, 126, 75, 0.1) 30%,
          rgb(94, 178, 122, 0.36) 60%,
          rgb(144, 215, 168) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(175, 49, 49, 0.1) 30%,
          rgba(238, 70, 70, 0.36) 60%,
          rgb(255, 173, 173) 100%);
  --clrNavBackground: rgba(244, 244, 245, 0.15);
  --clrNavItemActive: rgba(211, 211, 211, 0.4);
  --clrNavItemHover: rgba(0, 0, 0, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0000c1;
  --clrGlassBackground: rgba(255, 255, 255, 0.5);
  --clrGlassBackgroundStrong: rgba(255, 255, 255, 0.5);
  --clrGlassBorder: rgba(0, 0, 0, 0.1);
  --snackbarDefaultBg: #F1ECE9;
  --snackbarDefaultText: #5D605C;
  --snackbarDefaultBorder: #5D605C;
  --snackbarDefaultIcon: #5D605C;
  --snackbarSuccessBg: #E0F1D9;
  --snackbarSuccessText: #358935;
  --snackbarSuccessBorder: #358935;
  --snackbarSuccessIcon: #358935;
  --snackbarErrorBg: #F9E1DC;
  --snackbarErrorText: #C80D12;
  --snackbarErrorBorder: #C80D12;
  --snackbarErrorIcon: #C80D12;
}

._themeDark_5if5j_131 {
  --clrPrimary: #0F1418;
  --clrPrimary30: rgba(15, 20, 25, 0.3);
  --clrSecondary: #0A0F14;
  --clrTertiary: #212327;
  --clrPrimaryReverse: #F4F4F5;
  --clrSecondaryReverse: #FEFEFE;
  --clrTertiaryReverse: #E4E4E7;
  --clrTextPrimary: #F4F4F5;
  --clrTextSecondary: #CDCDCD;
  --clrTextTertiary: #8A8A8A;
  --clrTextPrimaryReverse: #101418;
  --clrTextSecondaryReverse: #2E3337;
  --clrTextTertiaryReverse: #7C7C7C;
  --clrError-100: #c84d4d;
  --clrError-50: #641f1f;
  --clrSuccess-100: #3EA03E;
  --clrSuccess-50: #2d692d;
  --clrSuccessOnTint: #d6ffd6;
  --clrErrorOnTint: #ffd6d6;
  --clrWarning-100: #E88434;
  --clrWarning-50: #C49168;
  --clrAccent-100: #FFFFFF;
  --clrAccent-80: rgba(255, 255, 255, 0.8);
  --clrAccent-60: rgba(255, 255, 255, 0.6);
  --clrAccent-50: rgba(255, 255, 255, 0.5);
  --clrAccent-40: rgba(255, 255, 255, 0.4);
  --clrAccent-30: rgba(255, 255, 255, 0.3);
  --clrAccent-20: rgba(255, 255, 255, 0.2);
  --clrAccent-10: rgba(255, 255, 255, 0.1);
  --clrGradient: linear-gradient(90deg, #262a2e 10%, var(--clrPrimary) 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(50, 126, 75, 0.15) 30%,
          rgba(50, 126, 75, 0.3) 60%,
          rgba(50, 126, 75, 0.5) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(167, 44, 44, 0) 0%,
          rgba(167, 44, 44, 0.15) 30%,
          rgba(167, 44, 44, 0.3) 60%,
          rgba(167, 44, 44, 0.5) 100%);
  --clrNavBackground: rgba(0, 0, 0, 0.15);
  --clrNavItemActive: rgba(24, 24, 24, 0.49);
  --clrNavItemHover: rgba(255, 255, 255, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0F1418;
  --clrGlassBackground: rgba(15, 20, 24, 0.5);
  --clrGlassBackgroundStrong: rgba(15, 20, 24, 0.6);
  --clrGlassBorder: rgba(255, 255, 255, 0.1);
  --snackbarDefaultBg: #414141;
  --snackbarDefaultText: #BABABA;
  --snackbarDefaultBorder: #BABABA;
  --snackbarDefaultIcon: #BABABA;
  --snackbarSuccessBg: #145E18;
  --snackbarSuccessText: #8FE094;
  --snackbarSuccessBorder: #8FE094;
  --snackbarSuccessIcon: #8FE094;
  --snackbarErrorBg: #910C09;
  --snackbarErrorText: #FE9E9D;
  --snackbarErrorBorder: #FE9E9D;
  --snackbarErrorIcon: #FE9E9D;
}

/* 

Note: 
    If you want something done quick, ask AI to buuild your color themes.
    If you want to do it right and tidy though, do it manually. 

    - Theo

*/
:root {
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --font-accent: "Jaro", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}

html,
body {
  font-family: var(--font-sans);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

._errorContainer_5if5j_216 {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 24px;
  background-color: var(--clrPrimary);
}

._errorContent_5if5j_225 {
  text-align: center;
  max-width: 400px;
}

._errorTitle_5if5j_230 {
  font-size: 24px;
  font-weight: 700;
  color: var(--clrTextPrimary);
  margin: 0 0 12px 0;
}

._errorMessage_5if5j_237 {
  font-size: 14px;
  color: var(--clrTextSecondary);
  margin: 0 0 24px 0;
  line-height: 1.5;
}

._refreshButton_5if5j_244 {
  padding: 14px 32px;
  border-radius: 8px;
  border: none;
  background-color: var(--clrPrimaryReverse);
  color: var(--clrPrimary);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.2s ease;
}
._refreshButton_5if5j_244:hover {
  opacity: 0.9;
}
._refreshButton_5if5j_244:active {
  transform: scale(0.98);
}:root {
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --font-accent: "Jaro", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}

html,
body {
  font-family: var(--font-sans);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}