html {
  color-scheme: dark;
}

html:has(body._themeLight_k5lvp_5),
html:has(body._themePastelLight_k5lvp_6) {
  color-scheme: light;
}

:root {
  --clrPrimary: #F4F4F5;
  --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;
  --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_k5lvp_5 {
  --clrPrimary: #F4F4F5;
  --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;
  --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_k5lvp_125 {
  --clrPrimary: #0F1418;
  --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;
  --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-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_k5lvp_206 {
  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_k5lvp_206 {
    width: 75%;
    bottom: 128px;
  }
}

._snackbar_k5lvp_206 {
  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_k5lvp_1 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
._snackbar_k5lvp_206._exiting_k5lvp_237 {
  animation: _slideOutDown_k5lvp_1 0.2s cubic-bezier(0.4, 0, 1, 1) forwards;
}
@supports not (backdrop-filter: blur(40px)) {
  ._snackbar_k5lvp_206 {
    background: var(--clrSecondary);
  }
}

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

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

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

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

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

._closeButton_k5lvp_255 {
  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_k5lvp_255:hover {
  background: rgba(0, 0, 0, 0.05);
}
._closeButton_k5lvp_255:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}
._closeButton_k5lvp_255 svg {
  width: 18px;
  height: 18px;
  color: inherit;
}

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

html:has(body._themeLight_a14lg_5),
html:has(body._themePastelLight_a14lg_6) {
  color-scheme: light;
}

:root {
  --clrPrimary: #F4F4F5;
  --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;
  --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_a14lg_5 {
  --clrPrimary: #F4F4F5;
  --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;
  --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_a14lg_125 {
  --clrPrimary: #0F1418;
  --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;
  --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-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_a14lg_206 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 4px;
  width: 100%;
}

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

._inputWrapper_a14lg_226 {
  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_a14lg_226._default_a14lg_240 {
  border-color: transparent;
}
._inputWrapper_a14lg_226._active_a14lg_243 {
  border-color: var(--clrAccent-30);
  box-shadow: 0px 0px 12px 0px rgba(186, 186, 186, 0.1);
}
._inputWrapper_a14lg_226._error_a14lg_222 {
  border-color: var(--clrError-100);
  box-shadow: 0px 0px 12px 0px rgba(255, 141, 141, 0.16);
}

._input_a14lg_226,
._select_a14lg_253 {
  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_a14lg_226::placeholder,
._select_a14lg_253::placeholder {
  color: var(--clrAccent-30);
}
._input_a14lg_226[type=date],
._select_a14lg_253[type=date] {
  appearance: none;
  -webkit-appearance: none;
}
._input_a14lg_226[type=date]::-webkit-calendar-picker-indicator,
._select_a14lg_253[type=date]::-webkit-calendar-picker-indicator {
  opacity: 0;
  position: absolute;
  right: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
}
._input_a14lg_226[type=date]::-webkit-date-and-time-value,
._select_a14lg_253[type=date]::-webkit-date-and-time-value {
  text-align: left;
}

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

._error_a14lg_222 ._input_a14lg_226,
._error_a14lg_222 ._select_a14lg_253 {
  color: var(--clrError-100);
}
._error_a14lg_222 ._input_a14lg_226::placeholder,
._error_a14lg_222 ._select_a14lg_253::placeholder {
  color: var(--clrError-100);
}

._passwordToggle_a14lg_309 {
  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_a14lg_322 {
  font-size: 20px;
  color: var(--clrAccent-100);
}

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

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

html:has(body._themeLight_1jwlf_5),
html:has(body._themePastelLight_1jwlf_6) {
  color-scheme: light;
}

:root {
  --clrPrimary: #F4F4F5;
  --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;
  --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_1jwlf_5 {
  --clrPrimary: #F4F4F5;
  --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;
  --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_1jwlf_125 {
  --clrPrimary: #0F1418;
  --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;
  --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-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_1jwlf_206 {
  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_1jwlf_206:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
._button_1jwlf_206:active:not(:disabled) {
  transform: scale(0.98);
}

._fullWidth_1jwlf_227 {
  width: 100%;
}

._primary_1jwlf_231 {
  background-color: var(--clrAccent-100);
  color: var(--clrPrimary);
  border: none;
  position: relative;
}
._primary_1jwlf_231::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_1jwlf_231:hover:not(:disabled)::before {
  opacity: 1;
  box-shadow: 0 0 30px var(--clrAccent-30);
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

._innerContent_1jwlf_413 {
  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_1jwlf_413::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_1jwlf_399:hover:not(:disabled) ._innerContent_1jwlf_413::before {
  opacity: 1;
}
._innerContent_1jwlf_413 ._icon_1jwlf_302 {
  font-size: 20px;
  max-height: 20px;
}

@keyframes _star-movement-bottom_1jwlf_1 {
  0% {
    transform: translate(0%, 0%);
    opacity: 1;
  }
  100% {
    transform: translate(-100%, 0%);
    opacity: 0;
  }
}
@keyframes _star-movement-top_1jwlf_1 {
  0% {
    transform: translate(0%, 0%);
    opacity: 1;
  }
  100% {
    transform: translate(100%, 0%);
    opacity: 0;
  }
}
._loading_1jwlf_497 {
  pointer-events: none;
}

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

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

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

html:has(body._themeLight_m8hgj_5),
html:has(body._themePastelLight_m8hgj_6) {
  color-scheme: light;
}

:root {
  --clrPrimary: #F4F4F5;
  --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;
  --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_m8hgj_5 {
  --clrPrimary: #F4F4F5;
  --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;
  --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_m8hgj_125 {
  --clrPrimary: #0F1418;
  --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;
  --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-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_m8hgj_206 {
  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_m8hgj_214 {
  display: flex;
  gap: 12px;
  animation: _scroll_m8hgj_1 linear infinite;
  width: max-content;
}

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

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

html:has(body._themeLight_1ip70_5),
html:has(body._themePastelLight_1ip70_6) {
  color-scheme: light;
}

:root {
  --clrPrimary: #F4F4F5;
  --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;
  --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_1ip70_5 {
  --clrPrimary: #F4F4F5;
  --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;
  --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_1ip70_125 {
  --clrPrimary: #0F1418;
  --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;
  --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-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_1ip70_206 {
  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_1ip70_1 var(--speed, 3s) infinite linear;
}
._shinyText_1ip70_206._disabled_1ip70_216 {
  animation: none;
  background: var(--clrTextTertiary);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

@keyframes _shine_1ip70_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_2u69t_5),
html:has(body._themePastelLight_2u69t_6) {
  color-scheme: light;
}

:root {
  --clrPrimary: #F4F4F5;
  --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;
  --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_2u69t_5 {
  --clrPrimary: #F4F4F5;
  --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;
  --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_2u69t_125 {
  --clrPrimary: #0F1418;
  --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;
  --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-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_2u69t_206 {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
  background-color: var(--clrSecondary);
  overflow: hidden;
  position: relative;
}

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

._header_2u69t_226 {
  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_2u69t_226 {
    padding: 80px 24px 40px;
  }
}
._header_2u69t_226 ._logo_2u69t_242 {
  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_2u69t_226 ._logo_2u69t_242 {
    width: 125px;
    height: 125px;
    border-radius: 36px;
  }
}
._header_2u69t_226 ._welcomeTitle_2u69t_258 {
  font-family: var(--font-sans);
  font-size: 24px;
  font-weight: 600;
  color: var(--clrTextPrimary);
  margin: 0 0 8px 0;
}
@media (min-width: 840px) {
  ._header_2u69t_226 ._welcomeTitle_2u69t_258 {
    font-size: 32px;
  }
}
._header_2u69t_226 ._welcomeSubtitle_2u69t_270 {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 400;
  color: var(--clrTextTertiary);
  margin: 0;
}
@media (min-width: 840px) {
  ._header_2u69t_226 ._welcomeSubtitle_2u69t_270 {
    font-size: 16px;
  }
}

._carouselContainer_2u69t_283 {
  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_2u69t_283 {
    margin: 24px 0;
  }
}

._drawer_2u69t_301 {
  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_2u69t_301 {
    padding: 0 24px 24px;
  }
}

._drawerContent_2u69t_320 {
  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_2u69t_1 0.3s ease-out;
}
@keyframes _drawerSlideIn_2u69t_1 {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

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

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

._guestText_2u69t_380 {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 400;
  color: rgba(198, 198, 198, 0.6);
  text-align: center;
  margin: 0;
}
._guestText_2u69t_380 ._guestLink_2u69t_388 {
  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_2u69t_380 ._guestLink_2u69t_388:hover {
  color: rgba(198, 198, 198, 0.8);
}

._termsText_2u69t_404 {
  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_2u69t_404 ._termsLink_2u69t_413 {
  font-weight: 700;
  color: rgba(198, 198, 198, 0.6);
  text-decoration: none;
}
._termsText_2u69t_404 ._termsLink_2u69t_413:hover {
  text-decoration: underline;
}

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

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

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

._spoiler_2u69t_472 {
  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);
  user-select: none;
  transition: all 0.3s ease;
}
._spoiler_2u69t_472::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_2u69t_472:hover {
  background: rgba(198, 198, 198, 0.3);
}
._spoiler_2u69t_472._revealed_2u69t_498 {
  color: rgba(198, 198, 198, 0.8);
  text-shadow: none;
  background: transparent;
  cursor: default;
}
._spoiler_2u69t_472._revealed_2u69t_498::before {
  display: none;
}

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

._forgotLink_2u69t_527 {
  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_2u69t_527:hover {
  color: rgba(198, 198, 198, 0.8);
}

._errorMessage_2u69t_540 {
  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_yvrsr_5),
html:has(body._themePastelLight_yvrsr_6) {
  color-scheme: light;
}

:root {
  --clrPrimary: #F4F4F5;
  --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;
  --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_yvrsr_5 {
  --clrPrimary: #F4F4F5;
  --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;
  --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_yvrsr_125 {
  --clrPrimary: #0F1418;
  --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;
  --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-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_yvrsr_206 {
  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-bottom: calc(132px + env(safe-area-inset-bottom));
}

._nav_yvrsr_217 {
  width: min(1120px, 100% - 32px);
  margin: 0 auto;
  padding: 22px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

._brand_yvrsr_227 {
  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_yvrsr_238 {
  width: 34px;
  height: 34px;
  border-radius: 9px;
}

._navLinks_yvrsr_244 {
  display: flex;
  align-items: center;
  gap: 10px;
}

._primaryAction_yvrsr_250 {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}

._downloadNav_yvrsr_263 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 42px;
  padding: 0 14px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.16);
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.15s ease;
}
._downloadNav_yvrsr_263:hover {
  background: rgba(255, 255, 255, 0.13);
}
._downloadNav_yvrsr_263:active {
  transform: scale(0.97);
}

._downloadNavLabel_yvrsr_284 {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 700;
  color: var(--clrTextPrimary);
}

._downloadNav_yvrsr_263 img {
  width: auto;
  display: block;
}

._appleIcon_yvrsr_296 {
  height: 19px;
  filter: invert(1);
}

._androidIcon_yvrsr_301 {
  height: 20px;
}

._downloadNavWhite_yvrsr_305 {
  min-height: 52px;
  padding: 0 24px;
  gap: 11px;
  background: #FFFFFF;
  border-color: transparent;
}
._downloadNavWhite_yvrsr_305:hover {
  background: rgba(255, 255, 255, 0.88);
}
._downloadNavWhite_yvrsr_305 ._downloadNavLabel_yvrsr_284 {
  color: #101418;
  font-size: 16px;
}
._downloadNavWhite_yvrsr_305 ._appleIcon_yvrsr_296 {
  filter: none;
  height: 23px;
}
._downloadNavWhite_yvrsr_305 ._androidIcon_yvrsr_301 {
  height: 24px;
}

._downloadBar_yvrsr_327 {
  display: flex;
  position: fixed;
  left: 50%;
  bottom: calc(14px + env(safe-area-inset-bottom));
  transform: translateX(-50%) translateY(calc(100% + 40px));
  opacity: 0;
  pointer-events: none;
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.3s ease;
  z-index: 100;
  width: min(100% - 24px, 460px);
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  box-shadow: 0 16px 44px rgba(0, 0, 0, 0.5);
}

._downloadBarVisible_yvrsr_350 {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
}

._downloadBarTitle_yvrsr_355 {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 700;
  color: #f4f4f5;
  text-align: center;
}

._downloadBarBadges_yvrsr_363 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

._downloadBarBadges_yvrsr_363 a {
  display: inline-flex;
  line-height: 0;
  pointer-events: auto;
}

._downloadBarBadges_yvrsr_363 img {
  height: 40px;
  width: auto;
  display: block;
}

._hero_yvrsr_382 {
  width: min(1120px, 100% - 32px);
  margin: 0 auto;
  min-height: min(720px, 100vh - 140px);
  min-height: min(720px, 100dvh - 140px);
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(320px, 0.95fr);
  align-items: center;
  gap: 56px;
  padding: 52px 0 56px;
}

._heroText_yvrsr_394 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

._eyebrow_yvrsr_400 {
  margin: 0 0 18px;
  color: #a855f7;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0;
}

._hero_yvrsr_382 h1 {
  max-width: 760px;
  margin: 0;
  color: #FFFFFF;
  font-size: 76px;
  line-height: 0.95;
  letter-spacing: 0;
  font-weight: 800;
}

._subhead_yvrsr_419 {
  max-width: 620px;
  margin: 24px 0 0;
  color: rgba(244, 244, 245, 0.72);
  font-size: 19px;
  line-height: 1.55;
}

._actions_yvrsr_427 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px;
  margin-top: 34px;
}

._webVersionLink_yvrsr_435 {
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 700;
  color: rgba(244, 244, 245, 0.72);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.15s ease;
}
._webVersionLink_yvrsr_435:hover {
  color: #FFFFFF;
}

._primaryAction_yvrsr_250 {
  color: #101418;
  background: #FFFFFF;
  padding: 0 22px;
}

._heroVisual_yvrsr_454 {
  width: 100%;
  display: flex;
  justify-content: center;
  position: relative;
  isolation: isolate;
}

._heroVisual_yvrsr_454::before {
  content: "";
  position: absolute;
  inset: 12% 4% 8%;
  background: radial-gradient(circle, rgba(168, 85, 247, 0.28), transparent 64%);
  filter: blur(34px);
  z-index: -1;
}

._heroImage_yvrsr_471 {
  width: min(100%, 560px);
  height: auto;
  display: block;
  filter: drop-shadow(0 34px 80px rgba(0, 0, 0, 0.42));
}

._features_yvrsr_478 {
  width: min(1120px, 100% - 32px);
  margin: 0 auto;
  padding: 28px 0 48px;
}

._sectionHeader_yvrsr_484 {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #FFFFFF;
  margin-bottom: 18px;
}

._sectionHeader_yvrsr_484 > svg {
  width: 34px;
  height: 34px;
  padding: 8px;
  border: 1px solid rgba(168, 85, 247, 0.4);
  border-radius: 10px;
  color: #a855f7;
  background: rgba(168, 85, 247, 0.1);
  box-shadow: 0 0 22px rgba(168, 85, 247, 0.12);
  flex-shrink: 0;
}

._sectionHeader_yvrsr_484 h2 {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
}

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

._feature_yvrsr_478 {
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.035);
  padding: 20px;
}

._feature_yvrsr_478 svg {
  color: #a855f7;
}

._feature_yvrsr_478 h3 {
  margin: 16px 0 8px;
  color: #FFFFFF;
  font-size: 16px;
}

._feature_yvrsr_478 p {
  margin: 0;
  color: rgba(244, 244, 245, 0.64);
  font-size: 14px;
  line-height: 1.55;
}

._exportSection_yvrsr_540 {
  width: min(1120px, 100% - 32px);
  margin: 0 auto;
  padding: 36px 0 84px;
  display: grid;
  grid-template-columns: minmax(0, 0.72fr) minmax(320px, 0.88fr);
  align-items: center;
  gap: 48px;
}

._exportCopy_yvrsr_550 p,
._analyticsCopy_yvrsr_551 p,
._loggingCopy_yvrsr_552 p {
  max-width: 500px;
  margin: 0;
  color: rgba(244, 244, 245, 0.68);
  font-size: 16px;
  line-height: 1.6;
}

._exportTags_yvrsr_560 {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 22px;
}

._exportTags_yvrsr_560 span {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid rgba(168, 85, 247, 0.38);
  border-radius: 8px;
  padding: 0 12px;
  color: rgba(233, 213, 255, 0.9);
  background: rgba(168, 85, 247, 0.08);
  font-size: 12px;
  font-weight: 700;
  transition: border-color 180ms ease, background-color 180ms ease, box-shadow 180ms ease, color 180ms ease;
}

._exportTags_yvrsr_560 span:hover,
._exportTags_yvrsr_560 span:focus-visible {
  border-color: rgba(168, 85, 247, 0.68);
  background: rgba(168, 85, 247, 0.14);
  color: #f4e9ff;
  box-shadow: 0 0 0 1px rgba(168, 85, 247, 0.14), 0 0 22px rgba(168, 85, 247, 0.28);
}

._exportTags_yvrsr_560 svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

._exportPreview_yvrsr_596 {
  margin: 0;
  position: relative;
  isolation: isolate;
}

._exportPreview_yvrsr_596::before {
  content: "";
  position: absolute;
  inset: 10% 6%;
  background: radial-gradient(circle, rgba(168, 85, 247, 0.2), transparent 66%);
  filter: blur(38px);
  z-index: -1;
}

._exportPreview_yvrsr_596 img {
  width: min(100%, 520px);
  height: auto;
  display: block;
  margin-right: auto;
  border-radius: 8px;
}

._analyticsSection_yvrsr_619 {
  width: min(1120px, 100% - 32px);
  margin: 0 auto;
  padding: 18px 0 96px;
  display: grid;
  grid-template-columns: minmax(320px, 0.92fr) minmax(0, 0.72fr);
  align-items: center;
  gap: 56px;
}

._analyticsVisual_yvrsr_629 {
  min-height: 700px;
  position: relative;
  isolation: isolate;
}

._analyticsVisual_yvrsr_629::before {
  content: "";
  position: absolute;
  inset: 14% 4% 10%;
  background: radial-gradient(circle, rgba(168, 85, 247, 0.22), transparent 68%);
  filter: blur(42px);
  z-index: -1;
}

._analyticsVisual_yvrsr_629 img {
  width: min(48%, 310px);
  height: auto;
  display: block;
  position: absolute;
  top: 0;
  border-radius: 8px;
}

._analyticsVisual_yvrsr_629 img:first-child {
  left: 3%;
  transform: rotate(-2deg);
}

._analyticsVisual_yvrsr_629 img:last-child {
  right: 4%;
  top: 64px;
  transform: rotate(2deg);
}

._loggingSection_yvrsr_664 {
  width: min(1120px, 100% - 32px);
  margin: 0 auto;
  padding: 8px 0 48px;
  display: grid;
  grid-template-columns: minmax(0, 0.72fr) minmax(320px, 0.92fr);
  align-items: start;
  gap: 56px;
}

._loggingCopy_yvrsr_552 {
  align-self: center;
}

._loggingVisual_yvrsr_678 {
  min-height: 560px;
  position: relative;
  isolation: isolate;
}

._loggingVisual_yvrsr_678::before {
  content: "";
  position: absolute;
  inset: 12% 4% 10%;
  background: radial-gradient(circle, rgba(168, 85, 247, 0.2), transparent 68%);
  filter: blur(42px);
  z-index: -1;
}

._loggingVisual_yvrsr_678 img {
  width: min(42%, 270px);
  height: auto;
  display: block;
  position: absolute;
  top: 0;
  border-radius: 8px;
}

._loggingVisual_yvrsr_678 img:first-child {
  left: 0;
  top: 22px;
  transform: rotate(-3deg);
}

._loggingVisual_yvrsr_678 img:nth-child(2) {
  left: 29%;
  top: 0;
  z-index: 2;
}

._loggingVisual_yvrsr_678 img:nth-child(3) {
  right: 0;
  top: 64px;
  transform: rotate(3deg);
}

._footer_yvrsr_720 {
  width: min(1120px, 100% - 32px);
  margin: auto auto 0;
  padding: 26px 0 34px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  color: rgba(244, 244, 245, 0.48);
  font-size: 12px;
}

._footerTop_yvrsr_732,
._footerBottom_yvrsr_733 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

._footerTop_yvrsr_732 {
  color: rgba(244, 244, 245, 0.72);
  font-weight: 700;
}

._socialLinks_yvrsr_745,
._footerLinks_yvrsr_746 {
  display: flex;
  align-items: center;
  gap: 16px;
}

._socialLinks_yvrsr_745 a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

._socialLinks_yvrsr_745 svg {
  color: #a855f7;
  transition: color 180ms ease, filter 180ms ease;
}

._footer_yvrsr_720 a {
  color: rgba(244, 244, 245, 0.64);
  text-decoration: none;
  transition: color 180ms ease, text-shadow 180ms ease;
}

._footer_yvrsr_720 a:hover,
._footer_yvrsr_720 a:focus-visible {
  color: #a855f7;
  text-shadow: 0 0 18px rgba(168, 85, 247, 0.36);
}

._footer_yvrsr_720 a:hover svg,
._footer_yvrsr_720 a:focus-visible svg {
  color: #a855f7;
  filter: drop-shadow(0 0 8px rgba(168, 85, 247, 0.45));
}

@media (max-width: 860px) {
  ._hero_yvrsr_382 {
    grid-template-columns: 1fr;
    gap: 34px;
    padding-top: 28px;
  }
  ._hero_yvrsr_382 h1 {
    font-size: 58px;
  }
  ._subhead_yvrsr_419 {
    font-size: 17px;
  }
  ._heroImage_yvrsr_471 {
    width: min(100%, 520px);
  }
  ._featureGrid_yvrsr_510 {
    grid-template-columns: 1fr;
  }
  ._exportSection_yvrsr_540 {
    grid-template-columns: 1fr;
    gap: 28px;
    padding-bottom: 64px;
  }
  ._exportCopy_yvrsr_550 {
    order: 1;
  }
  ._exportPreview_yvrsr_596 {
    order: 2;
  }
  ._exportPreview_yvrsr_596 img {
    margin: 0 auto;
    width: min(100%, 500px);
  }
  ._analyticsSection_yvrsr_619 {
    grid-template-columns: 1fr;
    gap: 28px;
    padding-bottom: 72px;
  }
  ._analyticsVisual_yvrsr_629 {
    order: 2;
    min-height: 700px;
  }
  ._analyticsCopy_yvrsr_551 {
    order: 1;
  }
  ._analyticsVisual_yvrsr_629 img {
    width: min(52%, 300px);
  }
  ._loggingSection_yvrsr_664 {
    grid-template-columns: 1fr;
    gap: 28px;
    padding-bottom: 72px;
  }
  ._loggingVisual_yvrsr_678 {
    min-height: 680px;
  }
  ._loggingVisual_yvrsr_678 img {
    width: min(43%, 270px);
  }
  ._footer_yvrsr_720 {
    align-items: flex-start;
  }
  ._footerTop_yvrsr_732,
  ._footerBottom_yvrsr_733 {
    width: 100%;
    flex-direction: column;
    align-items: flex-start;
  }
}
@media (max-width: 560px) {
  ._nav_yvrsr_217 {
    width: min(100% - 24px, 1120px);
  }
  ._brand_yvrsr_227 span {
    max-width: 132px;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  ._hero_yvrsr_382,
  ._features_yvrsr_478,
  ._footer_yvrsr_720 {
    width: min(100% - 24px, 1120px);
  }
  ._hero_yvrsr_382 h1 {
    font-size: 48px;
  }
  ._actions_yvrsr_427,
  ._primaryAction_yvrsr_250,
  ._actions_yvrsr_427 ._downloadNav_yvrsr_263 {
    width: 100%;
  }
  ._heroImage_yvrsr_471 {
    width: min(112%, 430px);
  }
  ._exportSection_yvrsr_540 {
    width: min(100% - 24px, 1120px);
    padding-top: 0;
  }
  ._analyticsSection_yvrsr_619 {
    width: min(100% - 24px, 1120px);
  }
  ._analyticsVisual_yvrsr_629 {
    min-height: 580px;
  }
  ._analyticsVisual_yvrsr_629 img {
    width: min(58%, 250px);
  }
  ._analyticsVisual_yvrsr_629 img:first-child {
    left: -2%;
  }
  ._analyticsVisual_yvrsr_629 img:last-child {
    right: -2%;
    top: 54px;
  }
  ._loggingSection_yvrsr_664 {
    width: min(100% - 24px, 1120px);
    padding-bottom: 24px;
  }
  ._loggingVisual_yvrsr_678 {
    min-height: 500px;
  }
  ._loggingVisual_yvrsr_678 img {
    width: min(48%, 210px);
  }
  ._loggingVisual_yvrsr_678 img:first-child {
    left: -6%;
    top: 42px;
  }
  ._loggingVisual_yvrsr_678 img:nth-child(2) {
    left: 25%;
  }
  ._loggingVisual_yvrsr_678 img:nth-child(3) {
    right: -6%;
    top: 72px;
  }
}html {
  color-scheme: dark;
}

html:has(body._themeLight_rkr5d_5),
html:has(body._themePastelLight_rkr5d_6) {
  color-scheme: light;
}

:root {
  --clrPrimary: #F4F4F5;
  --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;
  --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_rkr5d_5 {
  --clrPrimary: #F4F4F5;
  --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;
  --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_rkr5d_125 {
  --clrPrimary: #0F1418;
  --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;
  --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-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_rkr5d_206 {
  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;
}

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

._brand_rkr5d_224 {
  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_rkr5d_235 {
  width: 34px;
  height: 34px;
  border-radius: 9px;
}

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

._eyebrow_rkr5d_247 {
  margin: 0 0 12px;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #c084fc;
}

._hero_rkr5d_241 h1 {
  margin: 0 0 14px;
  font-family: var(--font-accent);
  font-size: 32px;
  font-weight: 400;
  line-height: 1.1;
  color: #FFFFFF;
}

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

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

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

._platform_rkr5d_283 {
  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_rkr5d_302 {
  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_rkr5d_313 {
  height: 22px;
  width: auto;
  display: block;
}

._appleIcon_rkr5d_319 {
  filter: invert(1);
}

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

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

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

._browserNote_rkr5d_347 {
  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_rkr5d_347 a {
  color: var(--clrTextPrimary);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media (max-width: 620px) {
  ._platforms_rkr5d_283 {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  ._hero_rkr5d_241 h1 {
    font-size: 24px;
  }
}html {
  color-scheme: dark;
}

html:has(body._themeLight_1f1sl_5),
html:has(body._themePastelLight_1f1sl_6) {
  color-scheme: light;
}

:root {
  --clrPrimary: #F4F4F5;
  --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;
  --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_1f1sl_5 {
  --clrPrimary: #F4F4F5;
  --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;
  --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_1f1sl_125 {
  --clrPrimary: #0F1418;
  --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;
  --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-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_1f1sl_206 {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
  background-color: var(--clrSecondary);
  overflow: hidden;
}

._header_1f1sl_215 {
  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_1f1sl_215 {
    padding: 80px 24px 40px;
  }
}
._header_1f1sl_215 ._logo_1f1sl_229 {
  width: 100px;
  height: 100px;
  object-fit: contain;
  margin-bottom: 16px;
}
@media (min-width: 840px) {
  ._header_1f1sl_215 ._logo_1f1sl_229 {
    width: 125px;
    height: 125px;
  }
}
._header_1f1sl_215 ._welcomeTitle_1f1sl_241 {
  font-family: var(--font-sans);
  font-size: 24px;
  font-weight: 600;
  color: var(--clrTextPrimary);
  margin: 0 0 8px 0;
}
@media (min-width: 840px) {
  ._header_1f1sl_215 ._welcomeTitle_1f1sl_241 {
    font-size: 32px;
  }
}
._header_1f1sl_215 ._welcomeSubtitle_1f1sl_253 {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 400;
  color: var(--clrTextTertiary);
  margin: 0;
}
@media (min-width: 840px) {
  ._header_1f1sl_215 ._welcomeSubtitle_1f1sl_253 {
    font-size: 16px;
  }
}

._drawer_1f1sl_266 {
  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_1f1sl_266 {
    padding: 0 24px 24px;
  }
}

._drawerContent_1f1sl_283 {
  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_1f1sl_1 0.3s ease-out;
}
@keyframes _drawerSlideIn_1f1sl_1 {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

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

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

._backLink_1f1sl_334 {
  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_1f1sl_334:hover {
  color: rgba(198, 198, 198, 0.8);
}

._errorMessage_1f1sl_347 {
  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_1qxnj_5),
html:has(body._themePastelLight_1qxnj_6) {
  color-scheme: light;
}

:root {
  --clrPrimary: #F4F4F5;
  --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;
  --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_1qxnj_5 {
  --clrPrimary: #F4F4F5;
  --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;
  --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_1qxnj_125 {
  --clrPrimary: #0F1418;
  --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;
  --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-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_1qxnj_206 ._tournamentBtns_1qxnj_206 {
  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_129u9_5),
html:has(body._themePastelLight_129u9_6) {
  color-scheme: light;
}

:root {
  --clrPrimary: #F4F4F5;
  --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;
  --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_129u9_5 {
  --clrPrimary: #F4F4F5;
  --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;
  --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_129u9_125 {
  --clrPrimary: #0F1418;
  --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;
  --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-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_129u9_206 {
  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_129u9_206::-webkit-scrollbar {
  height: 6px;
}
._leaderCarousel_129u9_206::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 3px;
}
._leaderCarousel_129u9_206::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.3);
  border-radius: 3px;
}
._leaderCarousel_129u9_206::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.5);
}

._leaderCard_129u9_234 {
  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_129u9_234:hover {
  border-color: rgba(255, 255, 255, 0.3);
  transform: translateY(-2px);
  box-shadow: 0 0 4px rgba(255, 255, 255, 0.3);
}
._leaderCard_129u9_234._selected_129u9_252 {
  border-color: #ffffff;
  box-shadow: 0 0 6px rgba(255, 255, 255, 0.5);
  transform: scale(1.02);
}

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

._leaderInfo_129u9_269 {
  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_129u9_269::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_129u9_287 {
  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_129u9_297 {
  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_129u9_305 {
  width: 100%;
  padding: 32px;
  text-align: center;
  color: rgba(255, 255, 255, 0.6);
  font-size: 14px;
  font-style: italic;
}

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

._loadMoreBtn_129u9_320 {
  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_129u9_320:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.5);
}
._loadMoreBtn_129u9_320:active {
  transform: scale(0.98);
}

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

._skeletonCard_129u9_348 {
  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_129u9_1 1.5s ease-in-out infinite;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 4px;
}

._skeletonImage_129u9_364 {
  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_129u9_1 1.5s ease-in-out infinite;
}

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

._skeletonName_129u9_381 {
  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_129u9_1 1.5s ease-in-out infinite;
  animation-delay: 0.2s;
}

._skeletonSet_129u9_391 {
  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_129u9_1 1.5s ease-in-out infinite;
  animation-delay: 0.4s;
}

@keyframes _skeletonPulse_129u9_1 {
  0%, 100% {
    opacity: 0.7;
  }
  50% {
    opacity: 1;
  }
}
@keyframes _skeletonShimmer_129u9_1 {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}
@keyframes _pulse_129u9_1 {
  0%, 100% {
    opacity: 0.5;
  }
  50% {
    opacity: 1;
  }
}
@media (max-width: 768px) {
  ._leaderCard_129u9_234 {
    width: 110px;
    height: 156px;
  }
  ._leaderImageInCard_129u9_258 {
    height: 72px;
  }
  ._leaderInfo_129u9_269 {
    padding: 8px;
  }
  ._leaderName_129u9_287 {
    font-size: 11px;
  }
  ._leaderSet_129u9_297 {
    font-size: 10px;
  }
  ._skeletonCard_129u9_348 {
    width: 128px;
    height: 193px;
  }
  ._skeletonImage_129u9_364 {
    width: 118px;
    height: 118px;
  }
  ._skeletonInfo_129u9_373 {
    gap: 4px;
  }
  ._skeletonName_129u9_381 {
    height: 11px;
    margin-bottom: 4px;
  }
  ._skeletonSet_129u9_391 {
    height: 10px;
  }
}html {
  color-scheme: dark;
}

html:has(body._themeLight_1nahg_5),
html:has(body._themePastelLight_1nahg_6) {
  color-scheme: light;
}

:root {
  --clrPrimary: #F4F4F5;
  --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;
  --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_1nahg_5 {
  --clrPrimary: #F4F4F5;
  --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;
  --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_1nahg_125 {
  --clrPrimary: #0F1418;
  --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;
  --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-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_1nahg_206 {
  position: relative;
  padding: 4px;
  border-radius: 8px;
  overflow: hidden;
}
._container_1nahg_206 ._skeletonOverlay_1nahg_212 {
  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_1nahg_206 ._skeletonOverlay_1nahg_212 ._skeletonPhoto_1nahg_227 {
  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_1nahg_1 1.5s infinite;
  flex-shrink: 0;
}
._container_1nahg_206 ._skeletonOverlay_1nahg_212 ._skeletonText_1nahg_234 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 6px;
  width: 100%;
  padding: 0 2px;
}
._container_1nahg_206 ._skeletonOverlay_1nahg_212 ._skeletonText_1nahg_234 ._skeletonName_1nahg_243 {
  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_1nahg_1 1.5s infinite;
}
._container_1nahg_206 ._skeletonOverlay_1nahg_212 ._skeletonText_1nahg_234 ._skeletonSet_1nahg_251 {
  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_1nahg_1 1.5s infinite;
}
._container_1nahg_206 ._content_1nahg_259 {
  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_1nahg_206 ._content_1nahg_259._fadeIn_1nahg_271 {
  opacity: 1;
  visibility: visible;
}
._container_1nahg_206 ._photo_1nahg_275 {
  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_1nahg_206 ._photo_1nahg_275 img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  pointer-events: none;
}
._container_1nahg_206 ._photo_1nahg_275 ._placeholder_1nahg_295 {
  color: #FFFFFF;
  font-weight: 600;
}
._container_1nahg_206 ._text_1nahg_299 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 2px;
  width: 100%;
  padding: 0 2px;
}
._container_1nahg_206 ._text_1nahg_299 ._name_1nahg_308 {
  color: #FFFFFF;
  font-size: 14px;
  font-weight: 700;
  text-align: left;
  overflow: hidden;
  width: 100%;
}
._container_1nahg_206 ._text_1nahg_299 ._set_1nahg_316 {
  color: rgba(255, 255, 255, 0.6);
  font-size: 12px;
  font-weight: 400;
  text-align: center;
}
._container_1nahg_206._image-text_1nahg_322 {
  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_1nahg_206._image-text_1nahg_322:hover {
  transform: translateY(-2px);
}
._container_1nahg_206._image-text_1nahg_322 ._skeletonOverlay_1nahg_212 {
  gap: 10px;
}
._container_1nahg_206._image-text_1nahg_322 ._skeletonOverlay_1nahg_212 ._skeletonPhoto_1nahg_227 {
  width: 124px;
  height: 124px;
}
._container_1nahg_206._image-text_1nahg_322 ._content_1nahg_259 {
  gap: 10px;
}
._container_1nahg_206._image-text_1nahg_322 ._photo_1nahg_275 {
  width: 124px;
  height: 124px;
}
._container_1nahg_206._image-text_1nahg_322 ._photo_1nahg_275 ._placeholder_1nahg_295 {
  font-size: 32px;
}
._container_1nahg_206._image-text_1nahg_322._active_1nahg_352 {
  outline: 2px solid var(--clrAccent-100);
  outline-offset: 0px;
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.6);
}
._container_1nahg_206._image-text-medium_1nahg_357 {
  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_1nahg_206._image-text-medium_1nahg_357:hover {
  transform: translateY(-2px);
}
._container_1nahg_206._image-text-medium_1nahg_357 ._skeletonOverlay_1nahg_212 {
  gap: 8px;
}
._container_1nahg_206._image-text-medium_1nahg_357 ._skeletonOverlay_1nahg_212 ._skeletonPhoto_1nahg_227 {
  width: 104px;
  height: 104px;
  border-radius: 5px;
}
._container_1nahg_206._image-text-medium_1nahg_357 ._content_1nahg_259 {
  gap: 8px;
}
._container_1nahg_206._image-text-medium_1nahg_357 ._photo_1nahg_275 {
  width: 104px;
  height: 104px;
  border-radius: 5px;
}
._container_1nahg_206._image-text-medium_1nahg_357 ._photo_1nahg_275 ._placeholder_1nahg_295 {
  font-size: 20px;
}
._container_1nahg_206._image-text-medium_1nahg_357 ._text_1nahg_299 {
  gap: 1px;
  padding: 0 2px;
}
._container_1nahg_206._image-text-medium_1nahg_357 ._text_1nahg_299 ._name_1nahg_308 {
  font-size: 12px;
}
._container_1nahg_206._image-text-medium_1nahg_357 ._text_1nahg_299 ._set_1nahg_316 {
  font-size: 12px;
}
._container_1nahg_206._image-text-medium_1nahg_357._active_1nahg_352 {
  outline: 2px solid var(--clrAccent-100);
  outline-offset: 0px;
  box-shadow: 0 0 7px rgba(255, 255, 255, 0.6);
}
._container_1nahg_206._image-text-small_1nahg_406 {
  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_1nahg_206._image-text-small_1nahg_406:hover {
  transform: translateY(-2px);
}
._container_1nahg_206._image-text-small_1nahg_406 ._skeletonOverlay_1nahg_212 {
  gap: 6px;
}
._container_1nahg_206._image-text-small_1nahg_406 ._skeletonOverlay_1nahg_212 ._skeletonPhoto_1nahg_227 {
  width: 86px;
  height: 86px;
  border-radius: 4px;
}
._container_1nahg_206._image-text-small_1nahg_406 ._skeletonOverlay_1nahg_212 ._skeletonText_1nahg_234 ._skeletonName_1nahg_243 {
  height: 12px;
}
._container_1nahg_206._image-text-small_1nahg_406 ._skeletonOverlay_1nahg_212 ._skeletonText_1nahg_234 ._skeletonSet_1nahg_251 {
  height: 10px;
}
._container_1nahg_206._image-text-small_1nahg_406 ._content_1nahg_259 {
  gap: 6px;
}
._container_1nahg_206._image-text-small_1nahg_406 ._photo_1nahg_275 {
  width: 86px;
  height: 86px;
  border-radius: 4px;
}
._container_1nahg_206._image-text-small_1nahg_406 ._photo_1nahg_275 ._placeholder_1nahg_295 {
  font-size: 20px;
}
._container_1nahg_206._image-text-small_1nahg_406 ._text_1nahg_299 {
  gap: 1px;
  padding: 0 1px;
}
._container_1nahg_206._image-text-small_1nahg_406 ._text_1nahg_299 ._name_1nahg_308 {
  font-size: 12px;
}
._container_1nahg_206._image-text-small_1nahg_406 ._text_1nahg_299 ._set_1nahg_316 {
  font-size: 8px;
}
._container_1nahg_206._image-text-small_1nahg_406._active_1nahg_352 {
  outline: 2px solid var(--clrAccent-100);
  outline-offset: 0px;
  box-shadow: 0 0 6px rgba(255, 255, 255, 0.6);
}
._container_1nahg_206._image-only-xlarge_1nahg_461 {
  width: 108px;
  height: 108px;
  flex-shrink: 0;
}
._container_1nahg_206._image-only-xlarge_1nahg_461 ._skeletonOverlay_1nahg_212 {
  justify-content: center;
}
._container_1nahg_206._image-only-xlarge_1nahg_461 ._skeletonOverlay_1nahg_212 ._skeletonPhoto_1nahg_227 {
  width: 100px;
  height: 100px;
}
._container_1nahg_206._image-only-xlarge_1nahg_461 ._content_1nahg_259 {
  justify-content: center;
}
._container_1nahg_206._image-only-xlarge_1nahg_461 ._photo_1nahg_275 {
  width: 100px;
  height: 100px;
}
._container_1nahg_206._image-only-xlarge_1nahg_461 ._photo_1nahg_275 img {
  object-fit: contain;
}
._container_1nahg_206._image-only-xlarge_1nahg_461 ._photo_1nahg_275 ._placeholder_1nahg_295 {
  font-size: 12px;
}
._container_1nahg_206._image-only-large_1nahg_486 {
  width: 112px;
  height: 112px;
}
._container_1nahg_206._image-only-large_1nahg_486 ._skeletonOverlay_1nahg_212 {
  justify-content: center;
}
._container_1nahg_206._image-only-large_1nahg_486 ._skeletonOverlay_1nahg_212 ._skeletonPhoto_1nahg_227 {
  width: 104px;
  height: 104px;
}
._container_1nahg_206._image-only-large_1nahg_486 ._content_1nahg_259 {
  justify-content: center;
}
._container_1nahg_206._image-only-large_1nahg_486 ._photo_1nahg_275 {
  width: 100%;
  height: 100%;
}
._container_1nahg_206._image-only-large_1nahg_486 ._photo_1nahg_275 ._placeholder_1nahg_295 {
  font-size: 28px;
}
._container_1nahg_206._image-only-small_1nahg_507 {
  width: 64px;
  height: 64px;
  padding: 2px;
}
._container_1nahg_206._image-only-small_1nahg_507 ._skeletonOverlay_1nahg_212 {
  justify-content: center;
}
._container_1nahg_206._image-only-small_1nahg_507 ._skeletonOverlay_1nahg_212 ._skeletonPhoto_1nahg_227 {
  width: 60px;
  height: 60px;
}
._container_1nahg_206._image-only-small_1nahg_507 ._content_1nahg_259 {
  justify-content: center;
}
._container_1nahg_206._image-only-small_1nahg_507 ._photo_1nahg_275 {
  height: 100%;
  width: 100%;
}
._container_1nahg_206._image-only-small_1nahg_507 ._photo_1nahg_275 ._placeholder_1nahg_295 {
  font-size: 18px;
}
._container_1nahg_206._image-only-xsmall_1nahg_529 {
  width: 40px;
  height: 40px;
  padding: 2px;
}
._container_1nahg_206._image-only-xsmall_1nahg_529 ._skeletonOverlay_1nahg_212 {
  justify-content: center;
}
._container_1nahg_206._image-only-xsmall_1nahg_529 ._skeletonOverlay_1nahg_212 ._skeletonPhoto_1nahg_227 {
  width: 36px;
  height: 36px;
}
._container_1nahg_206._image-only-xsmall_1nahg_529 ._content_1nahg_259 {
  justify-content: center;
}
._container_1nahg_206._image-only-xsmall_1nahg_529 ._photo_1nahg_275 {
  width: 36px;
  height: 36px;
}
._container_1nahg_206._image-only-xsmall_1nahg_529 ._photo_1nahg_275 ._placeholder_1nahg_295 {
  font-size: 14px;
}

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

html:has(body._themeLight_drc9d_5),
html:has(body._themePastelLight_drc9d_6) {
  color-scheme: light;
}

:root {
  --clrPrimary: #F4F4F5;
  --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;
  --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_drc9d_5 {
  --clrPrimary: #F4F4F5;
  --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;
  --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_drc9d_125 {
  --clrPrimary: #0F1418;
  --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;
  --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-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_drc9d_206 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 4px;
  width: 100%;
}

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

._carousel_drc9d_223 {
  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_drc9d_223::-webkit-scrollbar {
  height: 6px;
}
._carousel_drc9d_223::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 3px;
}
._carousel_drc9d_223::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.3);
  border-radius: 3px;
}
._carousel_drc9d_223::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.5);
}

._typeChip_drc9d_250 {
  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_drc9d_250:hover:not(:disabled) {
  border-color: var(--clrAccent-50);
  color: var(--clrAccent-80);
}
._typeChip_drc9d_250:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
._typeChip_drc9d_250._selected_drc9d_277 {
  border-color: var(--clrAccent-100);
  color: var(--clrAccent-100);
  background: var(--clrAccent-10);
}
._typeChip_drc9d_250._typeLocal_drc9d_282 {
  background-color: #163c26;
  border-color: rgba(133, 228, 172, 0.6);
  color: rgba(133, 228, 172, 0.6);
}
._typeChip_drc9d_250._typeStoreCs_drc9d_287 {
  background-color: #471f1f;
  border-color: rgba(240, 131, 131, 0.6);
  color: rgba(240, 131, 131, 0.6);
}
._typeChip_drc9d_250._typeTreasureCup_drc9d_292 {
  background-color: #562502;
  border-color: rgba(255, 160, 92, 0.6);
  color: rgba(255, 160, 92, 0.6);
}
._typeChip_drc9d_250._typeFlagship_drc9d_297 {
  background-color: #4b2e00;
  border-color: rgba(255, 201, 115, 0.6);
  color: rgba(255, 201, 115, 0.6);
}
._typeChip_drc9d_250._typeTesting_drc9d_302 {
  background-color: #1e3a8a;
  border-color: #3b82f6;
  color: #93c5fd;
}
._typeChip_drc9d_250._typeLcq_drc9d_307 {
  background-color: #7f1d1d;
  border-color: #dc2626;
  color: #fca5a5;
}
._typeChip_drc9d_250._typeNational_drc9d_312 {
  background-color: #581c87;
  border-color: #a855f7;
  color: #e9d5ff;
}
._typeChip_drc9d_250._typeRankedSim_drc9d_317 {
  background-color: #1e3a5f;
  border-color: #60a5fa;
  color: #bfdbfe;
}
._typeChip_drc9d_250._typeRegionals_drc9d_322, ._typeChip_drc9d_250._typeWorld_drc9d_322 {
  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_drc9d_1 3s ease-in-out infinite;
  border-color: rgba(255, 215, 0, 0.5);
  color: #875c18;
  font-weight: 600;
  position: relative;
  overflow: hidden;
}
._typeChip_drc9d_250._typeRegionals_drc9d_322::before, ._typeChip_drc9d_250._typeWorld_drc9d_322::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_drc9d_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_drc9d_350 {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 400;
  color: var(--clrAccent-30);
  padding: 0 4px;
}

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

html:has(body._themeLight_pfu1i_5),
html:has(body._themePastelLight_pfu1i_6) {
  color-scheme: light;
}

:root {
  --clrPrimary: #F4F4F5;
  --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;
  --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_pfu1i_5 {
  --clrPrimary: #F4F4F5;
  --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;
  --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_pfu1i_125 {
  --clrPrimary: #0F1418;
  --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;
  --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-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_pfu1i_1 {
  from {
    transform: translateY(100%);
  }
  to {
    transform: translateY(0);
  }
}
@keyframes _slideDown_pfu1i_1 {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(100%);
  }
}
._drawerOverlay_pfu1i_222 {
  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));
}

._drawer_pfu1i_222 {
  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_pfu1i_1 0.35s cubic-bezier(0.32, 0.72, 0, 1) forwards;
  will-change: transform;
}
._drawer_pfu1i_222._closing_pfu1i_254 {
  animation: _slideDown_pfu1i_1 0.25s cubic-bezier(0.32, 0, 0.67, 0) forwards;
}
._drawer_pfu1i_222._glass_pfu1i_257 {
  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_pfu1i_222._fullHeight_pfu1i_264 {
  max-height: calc(100vh - 48px);
  max-height: calc(100dvh - 48px);
}

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

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

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

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

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

._drawerContent_pfu1i_317 {
  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_pfu1i_329 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  width: 100%;
  margin-top: 8px;
}

._primaryBtn_pfu1i_339 {
  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_pfu1i_339:hover:not(:disabled) {
  opacity: 0.9;
}
._primaryBtn_pfu1i_339:active:not(:disabled) {
  transform: scale(0.98);
}
._primaryBtn_pfu1i_339:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

._secondaryBtn_pfu1i_363 {
  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_pfu1i_363:hover:not(:disabled) {
  background-color: rgba(216, 72, 72, 0.1);
}
._secondaryBtn_pfu1i_363:active:not(:disabled) {
  transform: scale(0.98);
}
._secondaryBtn_pfu1i_363:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

._cancelOnlyBtn_pfu1i_387 {
  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_pfu1i_387:hover:not(:disabled) {
  opacity: 0.9;
}
._cancelOnlyBtn_pfu1i_387:active:not(:disabled) {
  transform: scale(0.98);
}
._cancelOnlyBtn_pfu1i_387:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

._selectionCard_pfu1i_411 {
  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_pfu1i_411:hover {
  border-color: var(--clrAccent-100);
}
._selectionCard_pfu1i_411:active {
  transform: scale(0.98);
}

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

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

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

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

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

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

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

@media (max-width: 768px) {
  ._drawer_pfu1i_222 {
    max-width: 100%;
    padding: 0 16px 32px;
    padding-bottom: calc(8px + env(safe-area-inset-bottom));
  }
}html {
  color-scheme: dark;
}

html:has(body._themeLight_xoct6_5),
html:has(body._themePastelLight_xoct6_6) {
  color-scheme: light;
}

:root {
  --clrPrimary: #F4F4F5;
  --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;
  --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_xoct6_5 {
  --clrPrimary: #F4F4F5;
  --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;
  --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_xoct6_125 {
  --clrPrimary: #0F1418;
  --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;
  --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-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_xoct6_206 {
  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_2nbnx_5),
html:has(body._themePastelLight_2nbnx_6) {
  color-scheme: light;
}

:root {
  --clrPrimary: #F4F4F5;
  --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;
  --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_2nbnx_5 {
  --clrPrimary: #F4F4F5;
  --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;
  --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_2nbnx_125 {
  --clrPrimary: #0F1418;
  --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;
  --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-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_2nbnx_206 {
  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_2nbnx_219 {
  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_2nbnx_219:active:not(:disabled) {
  transform: scale(0.98);
}
._option_2nbnx_219:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

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

html:has(body._themeLight_pypgw_5),
html:has(body._themePastelLight_pypgw_6) {
  color-scheme: light;
}

:root {
  --clrPrimary: #F4F4F5;
  --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;
  --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_pypgw_5 {
  --clrPrimary: #F4F4F5;
  --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;
  --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_pypgw_125 {
  --clrPrimary: #0F1418;
  --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;
  --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-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_pypgw_206 {
  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_pypgw_221 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 0;
  width: 100%;
  padding: 16px 0;
}
._pageTitle_pypgw_221 h1 {
  font-family: var(--font-sans);
  font-size: 20px;
  font-weight: 700;
  color: var(--clrPrimaryReverse);
  margin: 0;
}

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

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

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

._submitButton_pypgw_267 {
  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_pypgw_267:hover:not(:disabled) {
  opacity: 0.9;
}
._submitButton_pypgw_267:active:not(:disabled) {
  transform: scale(0.98);
}
._submitButton_pypgw_267:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

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

._modalOverlay_pypgw_307 {
  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_pypgw_323 {
  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_pypgw_323 h3 {
  font-family: var(--font-sans);
  font-size: 18px;
  font-weight: 700;
  color: var(--clrPrimaryReverse);
  margin: 0;
}
._modalContent_pypgw_323 p {
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--clrAccent-60);
  text-align: center;
  margin: 0;
}

._modalButtons_pypgw_351 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  margin-top: 8px;
}
._modalButtons_pypgw_351 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_pypgw_351 button:active:not(:disabled) {
  transform: scale(0.98);
}

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

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

html:has(body._themeLight_nnins_5),
html:has(body._themePastelLight_nnins_6) {
  color-scheme: light;
}

:root {
  --clrPrimary: #F4F4F5;
  --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;
  --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_nnins_5 {
  --clrPrimary: #F4F4F5;
  --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;
  --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_nnins_125 {
  --clrPrimary: #0F1418;
  --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;
  --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-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_nnins_206 {
  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_nnins_221 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 0;
  width: 100%;
}

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

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

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

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

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

._singleToggleBtn_nnins_288 {
  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_nnins_288 ._value_nnins_307 {
  font-weight: 700;
}
._singleToggleBtn_nnins_288:active:not(:disabled) {
  transform: scale(0.98);
}
._singleToggleBtn_nnins_288:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

._winResult_nnins_318 {
  border-color: var(--clrSuccess-100);
  color: var(--clrSuccess-100);
}
._winResult_nnins_318 ._value_nnins_307 {
  color: var(--clrSuccess-100);
}

._loseResult_nnins_326 {
  border-color: var(--clrError-100);
  color: var(--clrError-100);
}
._loseResult_nnins_326 ._value_nnins_307 {
  color: var(--clrError-100);
}

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

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

._noteInput_nnins_352 {
  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_nnins_352:focus {
  outline: none;
  border-color: var(--clrPrimaryReverse);
}
._noteInput_nnins_352:disabled {
  opacity: 0.5;
}

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

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

html:has(body._themeLight_1kry2_5),
html:has(body._themePastelLight_1kry2_6) {
  color-scheme: light;
}

:root {
  --clrPrimary: #F4F4F5;
  --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;
  --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_1kry2_5 {
  --clrPrimary: #F4F4F5;
  --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;
  --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_1kry2_125 {
  --clrPrimary: #0F1418;
  --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;
  --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-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_1kry2_206 {
  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_1kry2_206:hover:not(:disabled) {
  background: var(--clrAccent-100);
  border-color: var(--clrAccent-100);
  transform: translateY(-2px);
}
._upgradeButton_1kry2_206:active:not(:disabled) {
  transform: translateY(0);
}
._upgradeButton_1kry2_206:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

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

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

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

html:has(body._themeLight_1kry2_5),
html:has(body._themePastelLight_1kry2_6) {
  color-scheme: light;
}

:root {
  --clrPrimary: #F4F4F5;
  --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;
  --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_1kry2_5 {
  --clrPrimary: #F4F4F5;
  --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;
  --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_1kry2_125 {
  --clrPrimary: #0F1418;
  --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;
  --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-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_1kry2_206 {
  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_1kry2_206:hover:not(:disabled) {
  background: var(--clrAccent-100);
  border-color: var(--clrAccent-100);
  transform: translateY(-2px);
}
._upgradeButton_1kry2_206:active:not(:disabled) {
  transform: translateY(0);
}
._upgradeButton_1kry2_206:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

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

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

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

html:has(body._themeLight_9zg6i_5),
html:has(body._themePastelLight_9zg6i_6) {
  color-scheme: light;
}

:root {
  --clrPrimary: #F4F4F5;
  --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;
  --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_9zg6i_5 {
  --clrPrimary: #F4F4F5;
  --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;
  --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_9zg6i_125 {
  --clrPrimary: #0F1418;
  --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;
  --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-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_9zg6i_206 {
  width: 100%;
  margin: 0 auto;
  padding: 16px;
}
._premiumSection_9zg6i_206 ._premiumCard_9zg6i_211 {
  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_9zg6i_206 ._premiumCard_9zg6i_211 ._premiumHeader_9zg6i_221 {
  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_9zg6i_206 ._premiumCard_9zg6i_211 ._premiumHeader_9zg6i_221 ._starIcon_9zg6i_232 {
  font-size: 32px;
  color: #ffd700;
  filter: drop-shadow(0 0 8px rgba(255, 215, 0, 0.6));
}
._premiumSection_9zg6i_206 ._premiumCard_9zg6i_211 ._premiumHeader_9zg6i_221 ._premiumTitle_9zg6i_237 {
  font-size: 18px;
  font-weight: 700;
  color: var(--clrAccent-100);
  margin: 0;
}
._premiumSection_9zg6i_206 ._premiumCard_9zg6i_211 ._premiumBanner_9zg6i_243 {
  margin: 12px 0;
  max-width: 350px;
}
._premiumSection_9zg6i_206 ._premiumCard_9zg6i_211 ._premiumBanner_9zg6i_243 img {
  width: 100%;
  height: 100%;
}
._premiumSection_9zg6i_206 ._premiumCard_9zg6i_211 ._premiumDescription_9zg6i_251 {
  color: var(--clrAccent-80);
  font-size: 15px;
  line-height: 1.6;
  text-align: center;
  margin: 0;
}
._premiumSection_9zg6i_206 ._premiumCard_9zg6i_211 ._cardHeader_9zg6i_258 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  text-align: center;
}
._premiumSection_9zg6i_206 ._premiumCard_9zg6i_211 ._cardHeader_9zg6i_258 ._starIconGold_9zg6i_266 {
  font-size: 48px;
  color: #ffd700;
  filter: drop-shadow(0 0 12px rgba(255, 215, 0, 0.6));
  animation: _pulse_9zg6i_1 2s ease-in-out infinite;
}
._premiumSection_9zg6i_206 ._premiumCard_9zg6i_211 ._cardHeader_9zg6i_258 ._cardTitle_9zg6i_272 {
  font-size: 28px;
  font-weight: 700;
  color: var(--clrAccent-100);
  margin: 0;
  line-height: 1.2;
}
._premiumSection_9zg6i_206 ._premiumCard_9zg6i_211 ._featureList_9zg6i_279 {
  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_9zg6i_206 ._premiumCard_9zg6i_211 ._featureList_9zg6i_279 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_9zg6i_206 ._premiumCard_9zg6i_211 ._featureList_9zg6i_279 li:hover {
  transform: translateX(4px);
  border-left-color: #ffd700;
  background: var(--clrBackground-200);
}
._premiumSection_9zg6i_206 ._premiumCard_9zg6i_211 ._featureList_9zg6i_279 li ._checkmark_9zg6i_309 {
  font-weight: 700;
  color: #ffd700;
  font-size: 20px;
  flex-shrink: 0;
}
._premiumSection_9zg6i_206 ._premiumCard_9zg6i_211 ._featureList_9zg6i_279 li span:last-child {
  font-weight: 500;
}
._premiumSection_9zg6i_206 ._premiumCard_9zg6i_211 ._priceSection_9zg6i_318 {
  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_9zg6i_206 ._premiumCard_9zg6i_211 ._priceSection_9zg6i_318 ._priceLabel_9zg6i_329 {
  font-size: 14px;
  color: var(--clrAccent-60);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
._premiumSection_9zg6i_206 ._premiumCard_9zg6i_211 ._priceSection_9zg6i_318 ._price_9zg6i_318 {
  font-size: 26px;
  font-weight: 700;
  color: var(--clrAccent-100);
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
._premiumSection_9zg6i_206 ._premiumCard_9zg6i_211 ._successMessage_9zg6i_342 {
  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_9zg6i_206 ._premiumCard_9zg6i_211 ._errorMessage_9zg6i_352 {
  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_9zg6i_206 ._premiumCard_9zg6i_211 ._paymentButtonContainer_9zg6i_361 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  width: 100%;
}
._premiumSection_9zg6i_206 ._premiumCard_9zg6i_211 ._subscriptionManagement_9zg6i_369 {
  margin-top: 16px;
  width: 100%;
}
._premiumSection_9zg6i_206 ._premiumCard_9zg6i_211 ._subscriptionInfo_9zg6i_373 {
  color: var(--clrAccent-60);
  font-size: 14px;
  text-align: center;
  margin: 16px 0;
  padding: 12px 16px;
  background: var(--clrAccent-10);
  border-radius: 8px;
}
._premiumSection_9zg6i_206 ._premiumCard_9zg6i_211 ._subscriptionInfo_9zg6i_373 ._statusActive_9zg6i_382 {
  color: var(--clrSuccess-100);
  font-weight: 500;
  margin: 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
._premiumSection_9zg6i_206 ._premiumCard_9zg6i_211 ._subscriptionInfo_9zg6i_373 ._statusActive_9zg6i_382 svg {
  color: green;
  font-size: 16px;
}
._premiumSection_9zg6i_206 ._premiumCard_9zg6i_211 ._subscriptionInfo_9zg6i_373 ._statusCanceled_9zg6i_396 {
  color: var(--clrWarning);
  font-weight: 500;
  margin: 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
._premiumSection_9zg6i_206 ._premiumCard_9zg6i_211 ._subscriptionInfo_9zg6i_373 ._statusCanceled_9zg6i_396 svg {
  color: red;
  font-size: 16px;
}
._premiumSection_9zg6i_206 ._premiumCard_9zg6i_211 ._pricingOptions_9zg6i_410 {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 24px;
  width: 100%;
}
@media (min-width: 768px) {
  ._premiumSection_9zg6i_206 ._premiumCard_9zg6i_211 ._pricingOptions_9zg6i_410 {
    flex-direction: row;
    gap: 32px;
  }
}
._premiumSection_9zg6i_206 ._premiumCard_9zg6i_211 ._pricingCard_9zg6i_424 {
  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_9zg6i_206 ._premiumCard_9zg6i_211 ._pricingCard_9zg6i_424:hover {
  transform: translateY(-4px);
  border-color: var(--clrAccent-50);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}
._premiumSection_9zg6i_206 ._premiumCard_9zg6i_211 ._pricingCard_9zg6i_424 ._cardContent_9zg6i_443 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 4px;
  text-align: center;
}
._premiumSection_9zg6i_206 ._premiumCard_9zg6i_211 ._pricingCard_9zg6i_424 ._pricingTitle_9zg6i_451 {
  font-size: 20px;
  font-weight: 600;
  color: var(--clrAccent-100);
  margin: 0;
}
._premiumSection_9zg6i_206 ._premiumCard_9zg6i_211 ._pricingCard_9zg6i_424 ._priceSection_9zg6i_318 {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  justify-content: center;
  gap: 4px;
  margin: 8px 0;
}
._premiumSection_9zg6i_206 ._premiumCard_9zg6i_211 ._pricingCard_9zg6i_424 ._priceSection_9zg6i_318 ._price_9zg6i_318 {
  font-size: 36px;
  font-weight: 700;
  color: var(--clrAccent-100);
}
._premiumSection_9zg6i_206 ._premiumCard_9zg6i_211 ._pricingCard_9zg6i_424 ._priceSection_9zg6i_318 ._priceLabel_9zg6i_329 {
  font-size: 16px;
  color: var(--clrAccent-60);
  font-weight: 500;
}
._premiumSection_9zg6i_206 ._premiumCard_9zg6i_211 ._pricingCard_9zg6i_424 ._spacer_9zg6i_475 {
  height: 20px;
}
._premiumSection_9zg6i_206 ._premiumCard_9zg6i_211 ._pricingCard_9zg6i_424 ._savings_9zg6i_478 {
  font-size: 14px;
  color: #ffd700;
  font-weight: 600;
  margin: 0;
}
._premiumSection_9zg6i_206 ._premiumCard_9zg6i_211 ._pricingCard_9zg6i_424._recommended_9zg6i_484 {
  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_9zg6i_206 ._premiumCard_9zg6i_211 ._pricingCard_9zg6i_424._recommended_9zg6i_484:hover {
  box-shadow: 0 8px 32px rgba(255, 215, 0, 0.3);
  border-color: #ffd700;
}
._premiumSection_9zg6i_206 ._premiumCard_9zg6i_211 ._pricingCard_9zg6i_424._recommended_9zg6i_484 ._recommendedBadge_9zg6i_493 {
  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_9zg6i_206 ._premiumCard_9zg6i_211 ._pricingCard_9zg6i_424._recommended_9zg6i_484 ._pricingTitle_9zg6i_451 {
  color: #ffd700;
}
._premiumSection_9zg6i_206 ._premiumCard_9zg6i_211 ._troubleshootSection_9zg6i_511 {
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid var(--clrAccent-20);
  text-align: center;
}
._premiumSection_9zg6i_206 ._premiumCard_9zg6i_211 ._troubleshootSection_9zg6i_511 ._troubleshootText_9zg6i_517 {
  color: var(--clrAccent-60);
  font-size: 14px;
  margin: 0;
}
._premiumSection_9zg6i_206 ._premiumCard_9zg6i_211 ._troubleshootSection_9zg6i_511 ._troubleshootText_9zg6i_517 ._troubleshootButton_9zg6i_522 {
  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_9zg6i_206 ._premiumCard_9zg6i_211 ._troubleshootSection_9zg6i_511 ._troubleshootText_9zg6i_517 ._troubleshootButton_9zg6i_522:hover {
  color: #ffd700;
}
._premiumSection_9zg6i_206 ._premiumCard_9zg6i_211 ._troubleshootSection_9zg6i_511 ._troubleshootText_9zg6i_517 ._troubleshootButton_9zg6i_522:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}html {
  color-scheme: dark;
}

html:has(body._themeLight_17pwx_5),
html:has(body._themePastelLight_17pwx_6) {
  color-scheme: light;
}

:root {
  --clrPrimary: #F4F4F5;
  --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;
  --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_17pwx_5 {
  --clrPrimary: #F4F4F5;
  --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;
  --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_17pwx_125 {
  --clrPrimary: #0F1418;
  --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;
  --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-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_17pwx_206 {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

._manageButton_17pwx_212 {
  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_17pwx_212:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.3);
}
._manageButton_17pwx_212:active:not(:disabled) {
  transform: scale(0.98);
}
._manageButton_17pwx_212:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

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

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

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

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

html:has(body._themeLight_t4nnn_5),
html:has(body._themePastelLight_t4nnn_6) {
  color-scheme: light;
}

:root {
  --clrPrimary: #F4F4F5;
  --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;
  --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_t4nnn_5 {
  --clrPrimary: #F4F4F5;
  --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;
  --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_t4nnn_125 {
  --clrPrimary: #0F1418;
  --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;
  --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-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_t4nnn_206 {
  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_t4nnn_206:has(._statusActive_t4nnn_219) {
  background: rgba(0, 255, 0, 0.05);
  border: 1px solid rgba(0, 255, 0, 0.1);
}
._subscriptionInfo_t4nnn_206:has(._statusCanceled_t4nnn_223) {
  background: rgba(245, 158, 11, 0.05);
  border: 1px solid rgba(245, 158, 11, 0.1);
}
._subscriptionInfo_t4nnn_206 ._subscriptionLabel_t4nnn_227 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 4px;
  flex: 1;
  min-width: 0;
}
._subscriptionInfo_t4nnn_206 ._subscriptionLabel_t4nnn_227 ._subscriptionTitle_t4nnn_236 {
  font-size: 16px;
  font-weight: 600;
  color: var(--clrAccent-100);
}
._subscriptionInfo_t4nnn_206 ._subscriptionLabel_t4nnn_227 ._subscriptionTitle_t4nnn_236 ._statusActive_t4nnn_219 {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #10b981;
}
._subscriptionInfo_t4nnn_206 ._subscriptionLabel_t4nnn_227 ._subscriptionTitle_t4nnn_236 ._statusActive_t4nnn_219 svg {
  font-size: 18px;
}
._subscriptionInfo_t4nnn_206 ._subscriptionLabel_t4nnn_227 ._subscriptionTitle_t4nnn_236 ._statusCanceled_t4nnn_223 {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #f59e0b;
}
._subscriptionInfo_t4nnn_206 ._subscriptionLabel_t4nnn_227 ._subscriptionTitle_t4nnn_236 ._statusCanceled_t4nnn_223 svg {
  font-size: 18px;
}
._subscriptionInfo_t4nnn_206 ._subscriptionLabel_t4nnn_227 ._subscriptionDescription_t4nnn_259 {
  font-size: 13px;
  color: var(--clrAccent-60);
  line-height: 1.4;
}
._subscriptionInfo_t4nnn_206 ._managedViaApp_t4nnn_264 {
  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_vzd0p_5),
html:has(body._themePastelLight_vzd0p_6) {
  color-scheme: light;
}

:root {
  --clrPrimary: #F4F4F5;
  --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;
  --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_vzd0p_5 {
  --clrPrimary: #F4F4F5;
  --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;
  --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_vzd0p_125 {
  --clrPrimary: #0F1418;
  --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;
  --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-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_vzd0p_206 {
  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_vzd0p_206 ._deleteLabel_vzd0p_219 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 4px;
  flex: 1;
  min-width: 0;
}
._deleteAccount_vzd0p_206 ._deleteLabel_vzd0p_219 ._deleteTitle_vzd0p_228 {
  font-size: 16px;
  font-weight: 600;
  color: #ef4444;
}
._deleteAccount_vzd0p_206 ._deleteLabel_vzd0p_219 ._deleteDescription_vzd0p_233 {
  font-size: 13px;
  color: var(--clrAccent-60);
  line-height: 1.4;
}
._deleteAccount_vzd0p_206 ._deleteButton_vzd0p_238 {
  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_vzd0p_206 ._deleteButton_vzd0p_238:hover:not(:disabled) {
  background: rgba(239, 68, 68, 0.2);
  border-color: rgba(239, 68, 68, 0.5);
}
._deleteAccount_vzd0p_206 ._deleteButton_vzd0p_238:active:not(:disabled) {
  transform: scale(0.98);
}
._deleteAccount_vzd0p_206 ._deleteButton_vzd0p_238:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

._warningModal_vzd0p_265 {
  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_vzd0p_1 0.2s ease;
}
._warningModal_vzd0p_265 ._warningContent_vzd0p_278 {
  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_vzd0p_1 0.3s ease;
}
._warningModal_vzd0p_265 ._warningContent_vzd0p_278 h3 {
  font-size: 20px;
  font-weight: 600;
  color: #f59e0b;
  margin: 0;
}
._warningModal_vzd0p_265 ._warningContent_vzd0p_278 p {
  font-size: 14px;
  color: var(--clrAccent-100);
  line-height: 1.6;
  margin: 0;
}
._warningModal_vzd0p_265 ._warningContent_vzd0p_278 p strong {
  color: #10b981;
  font-weight: 600;
}
._warningModal_vzd0p_265 ._warningContent_vzd0p_278 ._warningButton_vzd0p_306 {
  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_vzd0p_265 ._warningContent_vzd0p_278 ._warningButton_vzd0p_306:hover {
  background: rgba(255, 200, 0, 0.3);
  border-color: rgba(255, 150, 0, 0.7);
}
._warningModal_vzd0p_265 ._warningContent_vzd0p_278 ._warningButton_vzd0p_306:active {
  transform: scale(0.98);
}

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

html:has(body._themeLight_1y85z_5),
html:has(body._themePastelLight_1y85z_6) {
  color-scheme: light;
}

:root {
  --clrPrimary: #F4F4F5;
  --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;
  --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_1y85z_5 {
  --clrPrimary: #F4F4F5;
  --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;
  --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_1y85z_125 {
  --clrPrimary: #0F1418;
  --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;
  --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-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_1y85z_206 {
  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_1y85z_206 ._settingsHeader_1y85z_218 {
  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_1y85z_206 ._settingsHeader_1y85z_218:hover {
  background: rgba(255, 255, 255, 0.03);
}
._settingsSection_1y85z_206 ._settingsHeader_1y85z_218 ._settingsTitle_1y85z_235 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
}
._settingsSection_1y85z_206 ._settingsHeader_1y85z_218 ._settingsTitle_1y85z_235 svg {
  font-size: 1.25rem;
}
._settingsSection_1y85z_206 ._settingsHeader_1y85z_218 ._settingsTitle_1y85z_235 span {
  font-size: 0.875rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
._settingsSection_1y85z_206 ._settingsHeader_1y85z_218 ._chevron_1y85z_251 {
  font-size: 1.25rem;
  transition: transform 0.2s ease;
  color: var(--clrAccent-100);
}
._settingsSection_1y85z_206 ._settingsHeader_1y85z_218 ._chevron_1y85z_251._expanded_1y85z_256 {
  transform: rotate(180deg);
}
._settingsSection_1y85z_206 ._settingsContent_1y85z_259 {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 0;
  padding: 8px;
  animation: _slideDown_1y85z_1 0.2s ease-out;
}
._settingsSection_1y85z_206 ._settingsContent_1y85z_259 ._settingItem_1y85z_268 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 12px 8px;
}
._settingsSection_1y85z_206 ._settingsContent_1y85z_259 ._settingItem_1y85z_268:last-child {
  border-bottom: none;
}
._settingsSection_1y85z_206 ._settingsContent_1y85z_259 ._settingItem_1y85z_268 ._settingLabel_1y85z_279 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 2px;
  flex: 1;
  min-width: 0;
}
._settingsSection_1y85z_206 ._settingsContent_1y85z_259 ._settingItem_1y85z_268 ._settingLabel_1y85z_279 span:first-child {
  font-size: 16px;
  font-weight: 600;
  color: var(--clrAccent-100);
}
._settingsSection_1y85z_206 ._settingsContent_1y85z_259 ._settingItem_1y85z_268 ._settingLabel_1y85z_279 ._settingLabelWithBadge_1y85z_293 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
}
._settingsSection_1y85z_206 ._settingsContent_1y85z_259 ._settingItem_1y85z_268 ._settingLabel_1y85z_279 ._settingDescription_1y85z_300 {
  font-size: 0.75rem;
  color: var(--clrAccent-50);
  font-weight: 400;
}
._settingsSection_1y85z_206 ._settingsContent_1y85z_259 ._settingItem_1y85z_268 ._settingValue_1y85z_305 {
  font-size: 14px;
  color: var(--clrAccent-60);
  padding: 8px 12px;
  border-radius: 4px;
  border: 1px solid var(--clrAccent-10);
  background: var(--clrTertiary);
}
._settingsSection_1y85z_206 ._settingsContent_1y85z_259 ._settingItem_1y85z_268 ._emailValue_1y85z_313 {
  font-size: 0.875rem;
  flex: 1;
}
._settingsSection_1y85z_206 ._settingsContent_1y85z_259 ._settingItem_1y85z_268 ._supportLink_1y85z_317 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 4px;
}
._settingsSection_1y85z_206 ._settingsContent_1y85z_259 ._settingItem_1y85z_268 ._supportLink_1y85z_317 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_1y85z_206 ._settingsContent_1y85z_259 ._settingItem_1y85z_268 ._supportLink_1y85z_317 a:hover {
  border-color: var(--clrAccent-30);
  background: rgba(255, 255, 255, 0.05);
}
._settingsSection_1y85z_206 ._settingsContent_1y85z_259 ._settingItem_1y85z_268 ._supportLink_1y85z_317 a svg {
  font-size: 0.875rem;
}
._settingsSection_1y85z_206 ._settingsContent_1y85z_259 ._settingItem_1y85z_268 ._projVersion_1y85z_347 {
  font-size: 0.75rem;
  color: var(--clrAccent-50);
}
._settingsSection_1y85z_206 ._settingsContent_1y85z_259 ._settingItem_1y85z_268 ._themeSelector_1y85z_351 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}
._settingsSection_1y85z_206 ._settingsContent_1y85z_259 ._settingItem_1y85z_268 ._themeSelector_1y85z_351 ._themeSquare_1y85z_358 {
  width: 40px;
  height: 40px;
  border-radius: 2px;
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
  padding: 0;
}
._settingsSection_1y85z_206 ._settingsContent_1y85z_259 ._settingItem_1y85z_268 ._themeSelector_1y85z_351 ._themeSquare_1y85z_358._themeDark_1y85z_125 {
  background: #101418;
  border: 2px solid #212327;
}
._settingsSection_1y85z_206 ._settingsContent_1y85z_259 ._settingItem_1y85z_268 ._themeSelector_1y85z_351 ._themeSquare_1y85z_358._themeLight_1y85z_5 {
  background: #F4F4F5;
  border: 2px solid #E4E4E7;
}
._settingsSection_1y85z_206 ._settingsContent_1y85z_259 ._settingItem_1y85z_268 ._themeSelector_1y85z_351 ._themeSquare_1y85z_358:hover:not(:disabled) {
  transform: scale(1.05);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}
._settingsSection_1y85z_206 ._settingsContent_1y85z_259 ._settingItem_1y85z_268 ._themeSelector_1y85z_351 ._themeSquare_1y85z_358._active_1y85z_379 {
  border-width: 3px;
  box-shadow: 0 0 0 2px var(--clrAccent-30);
}
._settingsSection_1y85z_206 ._settingsContent_1y85z_259 ._settingItem_1y85z_268 ._themeSelector_1y85z_351 ._themeSquare_1y85z_358._disabled_1y85z_383, ._settingsSection_1y85z_206 ._settingsContent_1y85z_259 ._settingItem_1y85z_268 ._themeSelector_1y85z_351 ._themeSquare_1y85z_358:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
._settingsSection_1y85z_206 ._settingsContent_1y85z_259 ._settingItem_1y85z_268 ._settingButton_1y85z_387 {
  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_1y85z_206 ._settingsContent_1y85z_259 ._settingItem_1y85z_268 ._settingButton_1y85z_387:hover:not(:disabled) {
  border-color: var(--clrAccent-30);
  background: rgba(255, 255, 255, 0.05);
}
._settingsSection_1y85z_206 ._settingsContent_1y85z_259 ._settingItem_1y85z_268 ._settingButton_1y85z_387:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
._settingsSection_1y85z_206 ._settingsContent_1y85z_259 ._settingItem_1y85z_268 ._settingButton_1y85z_387 svg {
  font-size: 1rem;
}
._settingsSection_1y85z_206 ._settingsContent_1y85z_259 ._settingItem_1y85z_268 ._logoutButton_1y85z_414 {
  background: transparent;
  border-color: var(--clrAccent-30);
}
._settingsSection_1y85z_206 ._settingsContent_1y85z_259 ._settingItem_1y85z_268 ._toggle_1y85z_418 {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
  flex-shrink: 0;
}
._settingsSection_1y85z_206 ._settingsContent_1y85z_259 ._settingItem_1y85z_268 ._toggle_1y85z_418._disabled_1y85z_383 {
  opacity: 0.5;
  cursor: not-allowed;
}
._settingsSection_1y85z_206 ._settingsContent_1y85z_259 ._settingItem_1y85z_268 ._toggle_1y85z_418._disabled_1y85z_383 ._toggleSlider_1y85z_429 {
  cursor: not-allowed;
}
._settingsSection_1y85z_206 ._settingsContent_1y85z_259 ._settingItem_1y85z_268 ._toggle_1y85z_418 input {
  opacity: 0;
  width: 0;
  height: 0;
}
._settingsSection_1y85z_206 ._settingsContent_1y85z_259 ._settingItem_1y85z_268 ._toggle_1y85z_418 input:checked + ._toggleSlider_1y85z_429 {
  background-color: var(--clrAccent-30);
}
._settingsSection_1y85z_206 ._settingsContent_1y85z_259 ._settingItem_1y85z_268 ._toggle_1y85z_418 input:checked + ._toggleSlider_1y85z_429:before {
  transform: translateX(20px);
}
._settingsSection_1y85z_206 ._settingsContent_1y85z_259 ._settingItem_1y85z_268 ._toggle_1y85z_418 input:disabled + ._toggleSlider_1y85z_429 {
  cursor: not-allowed;
}
._settingsSection_1y85z_206 ._settingsContent_1y85z_259 ._settingItem_1y85z_268 ._toggle_1y85z_418 ._toggleSlider_1y85z_429 {
  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_1y85z_206 ._settingsContent_1y85z_259 ._settingItem_1y85z_268 ._toggle_1y85z_418 ._toggleSlider_1y85z_429:before {
  position: absolute;
  content: "";
  height: 16px;
  width: 16px;
  left: 3px;
  bottom: 3px;
  background-color: var(--clrAccent-60);
  transition: 0.3s;
  border-radius: 50%;
}
._settingsSection_1y85z_206 ._modal_1y85z_469 {
  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_1y85z_1 0.2s ease;
}
._settingsSection_1y85z_206 ._modal_1y85z_469 ._modalContent_1y85z_484 {
  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_1y85z_1 0.3s ease;
}
._settingsSection_1y85z_206 ._modal_1y85z_469 ._modalContent_1y85z_484 h3 {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--clrAccent-100);
  margin: 0;
}
._settingsSection_1y85z_206 ._modal_1y85z_469 ._modalContent_1y85z_484 ._modalInput_1y85z_504 {
  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_1y85z_206 ._modal_1y85z_469 ._modalContent_1y85z_484 ._modalInput_1y85z_504:focus {
  outline: none;
  border-color: var(--clrAccent-30);
}
._settingsSection_1y85z_206 ._modal_1y85z_469 ._modalContent_1y85z_484 ._modalInput_1y85z_504::placeholder {
  color: var(--clrAccent-30);
}
._settingsSection_1y85z_206 ._modal_1y85z_469 ._modalContent_1y85z_484 ._modalError_1y85z_521 {
  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_1y85z_206 ._modal_1y85z_469 ._modalContent_1y85z_484 ._modalButtons_1y85z_529 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 8px;
}
._settingsSection_1y85z_206 ._modal_1y85z_469 ._modalContent_1y85z_484 ._modalButtons_1y85z_529 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_1y85z_206 ._modal_1y85z_469 ._modalContent_1y85z_484 ._modalButtons_1y85z_529 button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
._settingsSection_1y85z_206 ._modal_1y85z_469 ._modalContent_1y85z_484 ._modalButtons_1y85z_529 ._modalCancel_1y85z_550 {
  background: var(--clrTertiary);
  border: 1px solid var(--clrAccent-10);
  color: var(--clrAccent-80);
}
._settingsSection_1y85z_206 ._modal_1y85z_469 ._modalContent_1y85z_484 ._modalButtons_1y85z_529 ._modalCancel_1y85z_550:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.05);
}
._settingsSection_1y85z_206 ._modal_1y85z_469 ._modalContent_1y85z_484 ._modalButtons_1y85z_529 ._modalConfirm_1y85z_558 {
  background: var(--clrAccent-100);
  border: 1px solid var(--clrAccent-100);
  color: var(--clrPrimary);
}
._settingsSection_1y85z_206 ._modal_1y85z_469 ._modalContent_1y85z_484 ._modalButtons_1y85z_529 ._modalConfirm_1y85z_558:hover:not(:disabled) {
  opacity: 0.9;
}
._settingsSection_1y85z_206 ._dangerModal_1y85z_566 {
  border-color: rgba(239, 68, 68, 0.3);
}
._settingsSection_1y85z_206 ._dangerModal_1y85z_566 ._dangerTitle_1y85z_569 {
  color: #ef4444;
}
._settingsSection_1y85z_206 ._dangerModal_1y85z_566 ._dangerWarning_1y85z_572 {
  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_1y85z_206 ._dangerModal_1y85z_566 ._dangerWarning_1y85z_572 p {
  margin: 0;
}
._settingsSection_1y85z_206 ._dangerModal_1y85z_566 ._dangerWarning_1y85z_572 strong {
  color: #ef4444;
  font-weight: 700;
}
._settingsSection_1y85z_206 ._dangerModal_1y85z_566 ._dangerWarning_1y85z_572 ul {
  margin: 0;
  padding-left: 20px;
}
._settingsSection_1y85z_206 ._dangerModal_1y85z_566 ._dangerWarning_1y85z_572 ul li {
  margin: 4px 0;
  color: var(--clrAccent-80);
}
._settingsSection_1y85z_206 ._dangerModal_1y85z_566 ._dangerConfirm_1y85z_600 {
  background: rgba(239, 68, 68, 0.9);
  border-color: #ef4444;
  color: white;
}
._settingsSection_1y85z_206 ._dangerModal_1y85z_566 ._dangerConfirm_1y85z_600:hover:not(:disabled) {
  background: #ef4444;
}

@keyframes _slideDown_1y85z_1 {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes _fadeIn_1y85z_1 {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes _slideUp_1y85z_1 {
  from {
    transform: translateY(20px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}: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_1f4on_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_1f4on_14:hover {
  transform: translateY(-1px);
}

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

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

._statusBadge_1f4on_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_1f4on_46 svg {
  width: 14px;
  height: 14px;
  color: var(--tier-color);
}

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

._tierBadge_1f4on_78,
._chip_1f4on_79,
._detailBadges_1f4on_80 span,
._toastTier_1f4on_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_1f4on_78 {
  color: #101418;
  background: var(--tier-color);
}

._achievementIcon_1f4on_99,
._detailIcon_1f4on_100,
._toastIcon_1f4on_101,
._shareCardIcon_1f4on_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_1f4on_99 img,
._achievementIcon_1f4on_99 svg,
._detailIcon_1f4on_100 img,
._detailIcon_1f4on_100 svg,
._toastIcon_1f4on_101 img,
._toastIcon_1f4on_101 svg,
._shareCardIcon_1f4on_102 img,
._shareCardIcon_1f4on_102 svg {
  width: 68%;
  height: 68%;
  object-fit: cover;
  color: var(--tier-color);
}

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

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

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

._requirement_1f4on_145,
._flavor_1f4on_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_1f4on_146 {
  color: var(--clrTextTertiary);
  font-style: italic;
}

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

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

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

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

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

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

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

._showcaseGrid_1f4on_212 {
  display: grid;
  grid-template-columns: repeat(5, minmax(44px, 1fr));
  gap: 10px;
}

._showcaseSlot_1f4on_218 {
  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_1f4on_231 {
  display: flex;
  min-width: 0;
  width: 100%;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 9px 6px;
}

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

._showcaseTitle_1f4on_257 {
  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_1f4on_272 {
  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_1f4on_272 ._showcaseIconWrap_1f4on_242 {
  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_1f4on_272 svg {
  color: var(--tier-color);
}
._filledSlot_1f4on_272 ._showcaseTitle_1f4on_257 {
  color: color-mix(in srgb, var(--tier-color) 30%, var(--clrTextPrimary));
}

._compactShowcase_1f4on_290 {
  grid-template-columns: repeat(5, 48px);
  justify-content: center;
}
._compactShowcase_1f4on_290 ._showcaseSlot_1f4on_218 {
  min-height: 48px;
}
._compactShowcase_1f4on_290 ._showcaseSlotInner_1f4on_231 {
  padding: 5px;
  gap: 0;
}
._compactShowcase_1f4on_290 ._showcaseIconWrap_1f4on_242 {
  width: 32px;
  height: 32px;
}
._compactShowcase_1f4on_290 ._showcaseTitle_1f4on_257 {
  display: none;
}

._detailDrawer_1f4on_309 {
  max-width: 620px;
}

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

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

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

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

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

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

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

._shareButton_1f4on_368 {
  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_1f4on_368 svg {
  width: 18px;
  height: 18px;
}

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

._shareCardInner_1f4on_397 {
  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_1f4on_397 h2 {
  max-width: 820px;
  margin: 0;
  font-size: 76px;
  line-height: 1.05;
}
._shareCardInner_1f4on_397 p {
  max-width: 760px;
  margin: 0;
  font-size: 34px;
  line-height: 1.25;
}

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

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

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

._toast_1f4on_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_1f4on_101 {
  width: 52px;
  height: 52px;
}

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

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

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

html:has(body._themeLight_1awn4_5),
html:has(body._themePastelLight_1awn4_6) {
  color-scheme: light;
}

:root {
  --clrPrimary: #F4F4F5;
  --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;
  --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_1awn4_5 {
  --clrPrimary: #F4F4F5;
  --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;
  --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_1awn4_125 {
  --clrPrimary: #0F1418;
  --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;
  --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-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_1awn4_206 {
  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_1awn4_206 ._profileHero_1awn4_219 {
  width: 100%;
  padding-top: 8px;
  padding-bottom: 12px;
}
._profileContainer_1awn4_206 ._profileHero_1awn4_219 ._profileNameRow_1awn4_224 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
}
._profileContainer_1awn4_206 ._profileHero_1awn4_219 ._profileNameRow_1awn4_224 h1 {
  margin: 0;
  color: var(--clrTextPrimary);
  font-family: var(--font-accent);
  font-size: clamp(1.6rem, 6vw, 2.2rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: 0;
}
._profileContainer_1awn4_206 ._profileDashboard_1awn4_240 {
  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_1awn4_206 ._profileDashboard_1awn4_240 ._statsTiles_1awn4_252 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
._profileContainer_1awn4_206 ._profileDashboard_1awn4_240 ._statTile_1awn4_257 {
  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_1awn4_206 ._profileDashboard_1awn4_240 ._statTile_1awn4_257 strong {
  color: var(--clrTextPrimary);
  font-size: clamp(1.35rem, 6.5vw, 1.8rem);
  font-weight: 900;
  line-height: 1;
}
._profileContainer_1awn4_206 ._profileDashboard_1awn4_240 ._statTile_1awn4_257 span {
  color: var(--clrTextSecondary);
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.1;
}
._profileContainer_1awn4_206 ._showcasePanel_1awn4_283 {
  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_1awn4_206 ._showcasePanel_1awn4_283 ._showcaseHeader_1awn4_295 {
  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_1awn4_206 ._profileLinks_1awn4_307 {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 0;
  margin-top: 4px;
}
._profileContainer_1awn4_206 ._profileLinks_1awn4_307 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_1awn4_206 ._profileLinks_1awn4_307 button:first-child {
  border-top: 0;
}
._profileContainer_1awn4_206 ._profileLinks_1awn4_307 button span {
  font-size: 1.05rem;
  font-weight: 600;
}
._profileContainer_1awn4_206 ._profileLinks_1awn4_307 ._statisticsIcon_1awn4_337,
._profileContainer_1awn4_206 ._profileLinks_1awn4_307 ._achievementsIcon_1awn4_338 {
  width: 22px;
  height: 22px;
}
._profileContainer_1awn4_206 ._profileLinks_1awn4_307 ._statisticsIcon_1awn4_337 {
  color: #12a8ff;
}
._profileContainer_1awn4_206 ._profileLinks_1awn4_307 ._achievementsIcon_1awn4_338 {
  color: #f59e0b;
}
._profileContainer_1awn4_206 ._profileLinks_1awn4_307 ._chevronIcon_1awn4_348 {
  width: 21px;
  height: 21px;
  color: var(--clrTextTertiary);
  justify-self: end;
}
._profileContainer_1awn4_206 ._paymentMethods_1awn4_354 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  padding: 16px 0;
}
._profileContainer_1awn4_206 ._paymentMethods_1awn4_354 ._paymentLabel_1awn4_363 {
  font-size: 12px;
  color: var(--clrTextSecondary);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0;
}
._profileContainer_1awn4_206 ._paymentMethods_1awn4_354 ._paymentIcons_1awn4_371 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}
._profileContainer_1awn4_206 ._paymentMethods_1awn4_354 ._paymentIcons_1awn4_371 ._paymentIcon_1awn4_371 {
  width: 48px;
  height: 32px;
  border-radius: 4px;
  overflow: hidden;
  transition: transform 0.2s ease, opacity 0.2s ease;
  opacity: 0.7;
}
._profileContainer_1awn4_206 ._paymentMethods_1awn4_354 ._paymentIcons_1awn4_371 ._paymentIcon_1awn4_371:hover {
  transform: translateY(-2px);
  opacity: 1;
}
._profileContainer_1awn4_206 ._paymentMethods_1awn4_354 ._paymentIcons_1awn4_371 ._paymentIcon_1awn4_371 img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}
._profileContainer_1awn4_206 ._disclaimer_1awn4_397 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 0;
  width: 100%;
  padding: 16px 24px;
}
._profileContainer_1awn4_206 ._disclaimer_1awn4_397 p {
  font-size: 0.75rem;
  color: var(--clrTextTertiary);
  text-align: center;
  line-height: 1.4;
  margin: 0;
  max-width: 600px;
}
._profileContainer_1awn4_206 ._disclaimer_1awn4_397 p a {
  color: var(--clrTextSecondary);
  font-weight: 600;
  text-decoration: none;
  transition: color 0.2s ease;
}
._profileContainer_1awn4_206 ._disclaimer_1awn4_397 p a:hover {
  color: var(--clrTextPrimary);
  text-decoration: underline;
}
._profileContainer_1awn4_206 ._legalLinks_1awn4_424 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  padding: 24px 0;
  padding-bottom: 32px;
}
._profileContainer_1awn4_206 ._legalLinks_1awn4_424 ._legalLink_1awn4_424 {
  background: none;
  border: none;
  color: var(--clrTextSecondary);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: color 0.2s ease;
  padding: 0;
}
._profileContainer_1awn4_206 ._legalLinks_1awn4_424 ._legalLink_1awn4_424:hover {
  color: var(--clrTextPrimary);
}
._profileContainer_1awn4_206 ._legalLinks_1awn4_424 ._linkSeparator_1awn4_447 {
  color: var(--clrAccent-30);
  font-size: 12px;
}
._profileContainer_1awn4_206 ._guestPromptContainer_1awn4_451 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  width: 100%;
  padding: 24px;
}
._profileContainer_1awn4_206 ._guestPromptContainer_1awn4_451 ._guestPrompt_1awn4_451 {
  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_1awn4_206 ._guestPromptContainer_1awn4_451 ._guestPrompt_1awn4_451 h2 {
  font-size: 24px;
  font-weight: 700;
  color: var(--clrTextPrimary);
  margin: 0;
  text-align: center;
}
._profileContainer_1awn4_206 ._guestPromptContainer_1awn4_451 ._guestPrompt_1awn4_451 ._subtitle_1awn4_481 {
  font-size: 14px;
  color: var(--clrTextSecondary);
  text-align: center;
  margin: 0;
}
._profileContainer_1awn4_206 ._guestPromptContainer_1awn4_451 ._guestPrompt_1awn4_451 ._benefitsList_1awn4_487 {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 20px;
}
._profileContainer_1awn4_206 ._guestPromptContainer_1awn4_451 ._guestPrompt_1awn4_451 ._benefitsList_1awn4_487 ._benefit_1awn4_487 {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 16px;
}
._profileContainer_1awn4_206 ._guestPromptContainer_1awn4_451 ._guestPrompt_1awn4_451 ._benefitsList_1awn4_487 ._benefit_1awn4_487 ._icon_1awn4_501 {
  font-size: 24px;
  flex-shrink: 0;
}
._profileContainer_1awn4_206 ._guestPromptContainer_1awn4_451 ._guestPrompt_1awn4_451 ._benefitsList_1awn4_487 ._benefit_1awn4_487 div {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 4px;
  flex: 1;
}
._profileContainer_1awn4_206 ._guestPromptContainer_1awn4_451 ._guestPrompt_1awn4_451 ._benefitsList_1awn4_487 ._benefit_1awn4_487 div h3 {
  font-size: 16px;
  font-weight: 600;
  color: var(--clrTextPrimary);
  margin: 0;
}
._profileContainer_1awn4_206 ._guestPromptContainer_1awn4_451 ._guestPrompt_1awn4_451 ._benefitsList_1awn4_487 ._benefit_1awn4_487 div p {
  font-size: 12px;
  color: var(--clrTextSecondary);
  margin: 0;
  line-height: 1.4;
}
._profileContainer_1awn4_206 ._guestPromptContainer_1awn4_451 ._guestPrompt_1awn4_451 ._guestActionButtons_1awn4_525 {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 12px;
  margin-top: 8px;
}
._profileContainer_1awn4_206 ._guestPromptContainer_1awn4_451 ._guestPrompt_1awn4_451 ._guestActionButtons_1awn4_525 ._primaryButton_1awn4_533 {
  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_1awn4_206 ._guestPromptContainer_1awn4_451 ._guestPrompt_1awn4_451 ._guestActionButtons_1awn4_525 ._primaryButton_1awn4_533:hover {
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
}
._profileContainer_1awn4_206 ._guestPromptContainer_1awn4_451 ._guestPrompt_1awn4_451 ._guestActionButtons_1awn4_525 ._primaryButton_1awn4_533:active {
  transform: translateY(0);
}
._profileContainer_1awn4_206 ._guestPromptContainer_1awn4_451 ._guestPrompt_1awn4_451 ._guestActionButtons_1awn4_525 ._secondaryButton_1awn4_552 {
  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_1awn4_206 ._guestPromptContainer_1awn4_451 ._guestPrompt_1awn4_451 ._guestActionButtons_1awn4_525 ._secondaryButton_1awn4_552:hover {
  background: var(--clrSecondary);
  border-color: var(--clrAccent-30);
}
._profileContainer_1awn4_206 ._guestPromptContainer_1awn4_451 ._guestPrompt_1awn4_451 ._guestActionButtons_1awn4_525 ._secondaryButton_1awn4_552:active {
  transform: scale(0.98);
}
._profileContainer_1awn4_206 ._guestPromptContainer_1awn4_451 ._guestPrompt_1awn4_451 ._dataWarning_1awn4_570 {
  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_1awn4_206 {
    padding-left: 20px;
    padding-right: 20px;
    gap: 12px;
  }
  ._profileContainer_1awn4_206 ._guestPromptContainer_1awn4_451 {
    padding: 16px;
  }
  ._profileContainer_1awn4_206 ._guestPromptContainer_1awn4_451 ._guestPrompt_1awn4_451 {
    padding: 24px;
  }
}
@media (max-width: 480px) {
  ._profileContainer_1awn4_206 {
    padding-left: 16px;
    padding-right: 16px;
  }
  ._profileContainer_1awn4_206 ._profileDashboard_1awn4_240 {
    padding: 12px;
  }
  ._profileContainer_1awn4_206 ._profileDashboard_1awn4_240 ._statsTiles_1awn4_252 {
    gap: 10px;
  }
  ._profileContainer_1awn4_206 ._profileDashboard_1awn4_240 ._statTile_1awn4_257 {
    min-height: 72px;
    padding: 9px 4px;
  }
  ._profileContainer_1awn4_206 ._profileDashboard_1awn4_240 ._statTile_1awn4_257 span {
    font-size: 0.72rem;
  }
  ._profileContainer_1awn4_206 ._guestPromptContainer_1awn4_451 {
    padding: 8px;
  }
  ._profileContainer_1awn4_206 ._guestPromptContainer_1awn4_451 ._guestPrompt_1awn4_451 {
    padding: 20px;
    gap: 20px;
  }
  ._profileContainer_1awn4_206 ._guestPromptContainer_1awn4_451 ._guestPrompt_1awn4_451 h2 {
    font-size: 16px;
  }
  ._profileContainer_1awn4_206 ._guestPromptContainer_1awn4_451 ._guestPrompt_1awn4_451 ._benefitsList_1awn4_487 {
    gap: 16px;
  }
  ._profileContainer_1awn4_206 ._guestPromptContainer_1awn4_451 ._guestPrompt_1awn4_451 ._benefitsList_1awn4_487 ._benefit_1awn4_487 {
    gap: 12px;
  }
  ._profileContainer_1awn4_206 ._guestPromptContainer_1awn4_451 ._guestPrompt_1awn4_451 ._benefitsList_1awn4_487 ._benefit_1awn4_487 ._icon_1awn4_501 {
    font-size: 16px;
  }
}html {
  color-scheme: dark;
}

html:has(body._themeLight_1ku5z_5),
html:has(body._themePastelLight_1ku5z_6) {
  color-scheme: light;
}

:root {
  --clrPrimary: #F4F4F5;
  --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;
  --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_1ku5z_5 {
  --clrPrimary: #F4F4F5;
  --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;
  --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_1ku5z_125 {
  --clrPrimary: #0F1418;
  --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;
  --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-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_1ku5z_206, ._tournamentParticipantsChip_1ku5z_206, ._tournamentPositionChip_1ku5z_206, ._tournamentSetChip_1ku5z_206, ._tournamentTypeChip_1ku5z_206 {
  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_1ku5z_206._small_1ku5z_223, ._small_1ku5z_223._tournamentParticipantsChip_1ku5z_206, ._small_1ku5z_223._tournamentPositionChip_1ku5z_206, ._small_1ku5z_223._tournamentSetChip_1ku5z_206, ._small_1ku5z_223._tournamentTypeChip_1ku5z_206 {
  padding: 1px 4px;
  font-size: 9px;
  gap: 2px;
}

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

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

._typeRegionals_1ku5z_241 {
  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_1ku5z_1 3s ease-in-out infinite;
  border-color: rgba(255, 215, 0, 0.5);
  color: #875c18;
  font-weight: 600;
  position: relative;
  overflow: hidden;
}
._typeRegionals_1ku5z_241::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_1ku5z_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_1ku5z_269 {
  background-color: #7f1d1d;
  border-color: #dc2626;
  color: #fca5a5;
}

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

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

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

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

._typeWorld_1ku5z_299 {
  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_1ku5z_1 3s ease-in-out infinite;
  border-color: rgba(255, 215, 0, 0.5);
  color: #875c18;
  font-weight: 600;
  position: relative;
  overflow: hidden;
}
._typeWorld_1ku5z_299::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_1ku5z_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_1ku5z_327 {
  background-color: var(--clrTertiary);
  border-color: var(--clrAccent-60);
  color: var(--clrAccent-100);
}

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

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

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

._firstPlace_1ku5z_361 {
  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_1ku5z_1 3s ease-in-out infinite;
  color: #875c18;
  font-weight: 600;
  overflow: hidden;
}
._firstPlace_1ku5z_361::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_1ku5z_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_1ku5z_1 {
  to {
    transform: rotate(360deg);
  }
}
@keyframes _gold-shimmer_1ku5z_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_1ku5z_361::before {
    animation: none;
  }
  ._firstPlace_1ku5z_361 {
    animation: none;
    background: #ffb02e;
    /* fallback to static gold */
  }
  ._typeRegionals_1ku5z_241::before {
    animation: none;
  }
  ._typeRegionals_1ku5z_241 {
    animation: none;
    background: #ffb02e;
    /* fallback to static gold */
  }
  ._typeWorld_1ku5z_299::before {
    animation: none;
  }
  ._typeWorld_1ku5z_299 {
    animation: none;
    background: #ffb02e;
    /* fallback to static gold */
  }
}html {
  color-scheme: dark;
}

html:has(body._themeLight_1ixt0_5),
html:has(body._themePastelLight_1ixt0_6) {
  color-scheme: light;
}

:root {
  --clrPrimary: #F4F4F5;
  --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;
  --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_1ixt0_5 {
  --clrPrimary: #F4F4F5;
  --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;
  --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_1ixt0_125 {
  --clrPrimary: #0F1418;
  --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;
  --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-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_1ixt0_206 {
  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_1ixt0_206:hover {
  border-color: var(--clrAccent-30);
  box-shadow: 0 4px 12px var(--clrAccent-10);
  transform: translateY(-2px);
}
._tournamentLogContainer_1ixt0_206:active {
  border-color: var(--clrAccent-100);
  background-color: var(--clrTertiary);
  transform: translateY(0px);
  transform: scale(0.98);
}
._tournamentLogContainer_1ixt0_206._editable_1ixt0_233 {
  cursor: default;
}
._tournamentLogContainer_1ixt0_206._editable_1ixt0_233:hover {
  transform: none;
}
._tournamentLogContainer_1ixt0_206._editable_1ixt0_233:active {
  transform: none;
}
._tournamentLogContainer_1ixt0_206 ._deleteBtn_1ixt0_242 {
  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_1ixt0_206 ._deleteBtn_1ixt0_242:hover {
  background-color: var(--clrError-50);
}
._tournamentLogContainer_1ixt0_206 ._deleteBtn_1ixt0_242._visible_1ixt0_264 {
  min-width: 48px;
  width: 48px;
  border: 1px solid var(--clrError-100);
  margin-left: 8px;
}
._tournamentLogContainer_1ixt0_206 ._tournamentLogInfo_1ixt0_270 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 16px;
  height: 100%;
  width: 100%;
  padding: 8px;
  font-family: var(--font-sans);
}
._tournamentLogContainer_1ixt0_206 ._tournamentLogInfo_1ixt0_270 ._tournamentLogContent_1ixt0_281 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  height: 100%;
  padding: 2px 0;
  font-family: "Roboto Flex", sans-serif;
}
._tournamentLogContainer_1ixt0_206 ._tournamentLogInfo_1ixt0_270 ._tournamentLogContent_1ixt0_281 ._tournamentLogName_1ixt0_291 {
  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_1ixt0_206 ._tournamentLogInfo_1ixt0_270 ._tournamentLogContent_1ixt0_281 ._tournamentLogName_1ixt0_291[data-long=true] {
  font-size: 14px;
}
@media (min-width: 768px) {
  ._tournamentLogContainer_1ixt0_206 ._tournamentLogInfo_1ixt0_270 ._tournamentLogContent_1ixt0_281 ._tournamentLogName_1ixt0_291 {
    font-size: 16px;
  }
}
._tournamentLogContainer_1ixt0_206 ._tournamentLogInfo_1ixt0_270 ._tournamentLogContent_1ixt0_281 ._tournamentLogDate_1ixt0_314 {
  font-family: var(--font-sans);
  font-size: 10px;
  color: var(--clrAccent-30);
}
@media (min-width: 768px) {
  ._tournamentLogContainer_1ixt0_206 ._tournamentLogInfo_1ixt0_270 ._tournamentLogContent_1ixt0_281 ._tournamentLogDate_1ixt0_314 {
    font-size: 12px;
  }
}
._tournamentLogContainer_1ixt0_206 ._tournamentLogInfo_1ixt0_270 ._tournamentLogContent_1ixt0_281 ._tournamentLogDetails_1ixt0_324 {
  font-size: 8px;
  color: var(--clrAccent-60);
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 4px;
}
._tournamentLogContainer_1ixt0_206 ._tournamentLogResultContainer_1ixt0_333 {
  min-width: 64px;
  width: 64px;
  height: 100%;
  border-radius: 0 7px 7px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
}
._tournamentLogContainer_1ixt0_206 ._tournamentLogResultContainer_1ixt0_333 ._resultValue_1ixt0_344 {
  font-size: 14px;
  font-weight: 600;
  color: var(--clrAccent-80);
}
@media (min-width: 768px) {
  ._tournamentLogContainer_1ixt0_206 ._tournamentLogResultContainer_1ixt0_333 ._resultValue_1ixt0_344 {
    font-size: 16px;
  }
}
._tournamentLogContainer_1ixt0_206 ._tournamentLogResultContainer_1ixt0_333 ._resultBlock_1ixt0_354 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 0;
  width: 100%;
}html {
  color-scheme: dark;
}

html:has(body._themeLight_1aiar_5),
html:has(body._themePastelLight_1aiar_6) {
  color-scheme: light;
}

:root {
  --clrPrimary: #F4F4F5;
  --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;
  --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_1aiar_5 {
  --clrPrimary: #F4F4F5;
  --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;
  --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_1aiar_125 {
  --clrPrimary: #0F1418;
  --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;
  --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-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_1aiar_206 {
  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_1aiar_206._empty_1aiar_223 {
  border: 1px solid rgba(255, 255, 255, 0.3);
  background: transparent;
}
._chip_1aiar_206._win_1aiar_227 {
  border-color: var(--clrSuccess-100);
  color: var(--clrSuccess-100);
  background-color: var(--clrSuccess-50);
}
._chip_1aiar_206._lose_1aiar_232 {
  border-color: var(--clrError-100);
  color: var(--clrError-100);
  background-color: var(--clrError-50);
}
._chip_1aiar_206._diceWin_1aiar_237 {
  opacity: 1;
}
._chip_1aiar_206._diceLose_1aiar_240 {
  opacity: 0.35;
}html {
  color-scheme: dark;
}

html:has(body._themeLight_5nwm5_5),
html:has(body._themePastelLight_5nwm5_6) {
  color-scheme: light;
}

:root {
  --clrPrimary: #F4F4F5;
  --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;
  --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_5nwm5_5 {
  --clrPrimary: #F4F4F5;
  --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;
  --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_5nwm5_125 {
  --clrPrimary: #0F1418;
  --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;
  --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-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_5nwm5_206 {
  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_5nwm5_206 ._loader_5nwm5_206 {
  width: 65px;
  height: 30px;
  position: relative;
}
._loaderContainer_5nwm5_206 ._loader_5nwm5_206:before {
  content: "";
  position: absolute;
  border-radius: 50px;
  box-shadow: 0 0 0 3px inset var(--clrAccent-100);
  animation: _l3_5nwm5_1 0.75s infinite alternate;
}
@keyframes _l3_5nwm5_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_1b5r0_5),
html:has(body._themePastelLight_1b5r0_6) {
  color-scheme: light;
}

:root {
  --clrPrimary: #F4F4F5;
  --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;
  --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_1b5r0_5 {
  --clrPrimary: #F4F4F5;
  --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;
  --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_1b5r0_125 {
  --clrPrimary: #0F1418;
  --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;
  --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-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_1b5r0_206 {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: 24px 0;
  margin: 8px 0;
}
._inlineLoaderContainer_1b5r0_206 ._loader_1b5r0_216 {
  width: 40px;
  height: 18px;
  position: relative;
}
._inlineLoaderContainer_1b5r0_206 ._loader_1b5r0_216:before {
  content: "";
  position: absolute;
  border-radius: 50px;
  box-shadow: 0 0 0 2px inset var(--clrAccent-100);
  animation: _pulse_1b5r0_1 0.8s infinite alternate;
}
@keyframes _pulse_1b5r0_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_1cdft_5),
html:has(body._themePastelLight_1cdft_6) {
  color-scheme: light;
}

:root {
  --clrPrimary: #F4F4F5;
  --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;
  --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_1cdft_5 {
  --clrPrimary: #F4F4F5;
  --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;
  --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_1cdft_125 {
  --clrPrimary: #0F1418;
  --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;
  --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-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;
}

._leaderStack_1cdft_206 {
  position: relative;
  width: 112px;
  height: 112px;
  margin: 0 auto;
}

._leaderCard_1cdft_213 {
  position: absolute;
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  touch-action: none;
  user-select: none;
}
._leaderCard_1cdft_213._draggable_1cdft_219 {
  cursor: grab;
}
._leaderCard_1cdft_213._draggable_1cdft_219:active {
  cursor: grabbing;
}
._leaderCard_1cdft_213._position0_1cdft_225 {
  top: 0;
  left: 0;
  z-index: 3;
  transform: rotate(-2deg);
}
._leaderCard_1cdft_213._position1_1cdft_231 {
  top: 4px;
  left: 4px;
  z-index: 2;
  transform: rotate(1deg);
}
._leaderCard_1cdft_213._position2_1cdft_237 {
  top: 8px;
  left: 8px;
  z-index: 1;
  transform: rotate(-1deg);
}
._leaderCard_1cdft_213._removing_1cdft_243 {
  transform: translateX(150px) translateY(-30px) rotate(20deg);
  opacity: 0;
}html {
  color-scheme: dark;
}

html:has(body._themeLight_rp6wt_5),
html:has(body._themePastelLight_rp6wt_6) {
  color-scheme: light;
}

:root {
  --clrPrimary: #F4F4F5;
  --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;
  --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_rp6wt_5 {
  --clrPrimary: #F4F4F5;
  --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;
  --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_rp6wt_125 {
  --clrPrimary: #0F1418;
  --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;
  --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-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_rp6wt_206 {
  width: 100%;
  min-height: calc(100vh - 200px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: 40px 20px;
}

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

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

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

._button_rp6wt_241 {
  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_rp6wt_241:hover {
  background-color: var(--clrAccent-30);
  border-color: var(--clrAccent-50);
  transform: translateY(-1px);
}
._button_rp6wt_241:active {
  transform: translateY(0);
}
._button_rp6wt_241 ._icon_rp6wt_265 {
  width: 20px;
  height: 20px;
  stroke-width: 2;
}html {
  color-scheme: dark;
}

html:has(body._themeLight_1mhzn_5),
html:has(body._themePastelLight_1mhzn_6) {
  color-scheme: light;
}

:root {
  --clrPrimary: #F4F4F5;
  --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;
  --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_1mhzn_5 {
  --clrPrimary: #F4F4F5;
  --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;
  --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_1mhzn_125 {
  --clrPrimary: #0F1418;
  --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;
  --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-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_1mhzn_206 {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  justify-content: flex-start;
  gap: 10px;
  flex-shrink: 0;
  width: 100%;
}
@media (max-width: 400px) {
  ._header_1mhzn_206 {
    gap: 8px;
  }
}

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

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

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

._deckBlock_1mhzn_259 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 0;
  flex-shrink: 0;
}
._deckBlock_1mhzn_259 ._deckName_1mhzn_267 {
  font-size: 13px;
  color: var(--clrAccent-50);
  font-weight: 400;
  line-height: 1.2;
  white-space: nowrap;
}
@media (max-width: 400px) {
  ._deckBlock_1mhzn_259 ._deckName_1mhzn_267 {
    font-size: 11px;
  }
}
._deckBlock_1mhzn_259 ._score_1mhzn_279 {
  font-size: 28px;
  font-weight: 800;
  color: var(--clrAccent-100);
  white-space: nowrap;
  line-height: 1.2;
}
@media (max-width: 400px) {
  ._deckBlock_1mhzn_259 ._score_1mhzn_279 {
    font-size: 22px;
  }
}
._deckBlock_1mhzn_259 ._position_1mhzn_291 {
  font-size: 13px;
  color: var(--clrAccent-50);
  font-weight: 400;
  line-height: 1.2;
}
@media (max-width: 400px) {
  ._deckBlock_1mhzn_259 ._position_1mhzn_291 {
    font-size: 11px;
  }
}

._tournamentBlock_1mhzn_303 {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  gap: 6px;
  flex-shrink: 1;
  min-width: 0;
}
._tournamentBlock_1mhzn_303 ._tournamentName_1mhzn_312 {
  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_1mhzn_303 ._tournamentName_1mhzn_312 {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 160px;
  }
}
@media (max-width: 400px) {
  ._tournamentBlock_1mhzn_303 ._tournamentName_1mhzn_312 {
    font-size: 12px;
    max-width: 120px;
  }
}
._tournamentBlock_1mhzn_303 ._chips_1mhzn_335 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  flex-wrap: nowrap;
}

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

html:has(body._themeLight_asq02_5),
html:has(body._themePastelLight_asq02_6) {
  color-scheme: light;
}

:root {
  --clrPrimary: #F4F4F5;
  --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;
  --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_asq02_5 {
  --clrPrimary: #F4F4F5;
  --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;
  --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_asq02_125 {
  --clrPrimary: #0F1418;
  --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;
  --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-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_asq02_206 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 0;
  width: 100%;
}

._container_asq02_215 {
  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_asq02_215 {
    min-height: 48px;
  }
}

._roundNumber_asq02_235 {
  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_asq02_235 {
    min-width: 20px;
    font-size: 10px;
  }
}

._leaderImage_asq02_256 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: 4px 0;
  flex-shrink: 0;
}
._leaderImage_asq02_256 > div {
  width: 44px;
  height: 44px;
  min-width: 44px;
}
@media (max-width: 400px) {
  ._leaderImage_asq02_256 > div {
    width: 32px;
    height: 32px;
    min-width: 32px;
  }
}

._roundInfoSection_asq02_278 {
  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_asq02_290 {
  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_asq02_290 {
    font-size: 11px;
  }
}

._resultSection_asq02_308 {
  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_asq02_308._win_asq02_321 {
  background: var(--clrRoundWin);
}
._resultSection_asq02_308._lose_asq02_324 {
  background: var(--clrRoundLoss);
}
@media (max-width: 400px) {
  ._resultSection_asq02_308 {
    min-height: 48px;
    min-width: 64px;
    padding-right: 8px;
  }
}

._separator_asq02_335 {
  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_asq02_335 {
    height: 28px;
    margin-right: 6px;
  }
}

._chips_asq02_348 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
}
@media (max-width: 400px) {
  ._chips_asq02_348 {
    gap: 3px;
  }
}html {
  color-scheme: dark;
}

html:has(body._themeLight_taqlm_5),
html:has(body._themePastelLight_taqlm_6) {
  color-scheme: light;
}

:root {
  --clrPrimary: #F4F4F5;
  --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;
  --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_taqlm_5 {
  --clrPrimary: #F4F4F5;
  --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;
  --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_taqlm_125 {
  --clrPrimary: #0F1418;
  --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;
  --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-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_taqlm_1 {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.05);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes _fadeIn_taqlm_1 {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
._exportModal_taqlm_227 {
  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_taqlm_1 0.3s ease;
  overflow: hidden;
}
._exportModal_taqlm_227 ._exportContent_taqlm_246 {
  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_taqlm_1 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
@media (max-width: 768px) {
  ._exportModal_taqlm_227 ._exportContent_taqlm_246 {
    width: 92vw;
    max-height: 85vh;
    padding: 10px;
  }
}
._exportModal_taqlm_227 ._exportContent_taqlm_246 ._exportHeader_taqlm_270 {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-shrink: 0;
  width: 100%;
}
._exportModal_taqlm_227 ._exportContent_taqlm_246 ._exportHeader_taqlm_270 ._leftSection_taqlm_279 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  flex-shrink: 0;
}
._exportModal_taqlm_227 ._exportContent_taqlm_246 ._exportHeader_taqlm_270 ._leftSection_taqlm_279 > div:first-child {
  max-height: 86px !important;
  max-width: 86px !important;
  min-height: 86px !important;
  min-width: 86px !important;
}
@media (max-width: 400px) {
  ._exportModal_taqlm_227 ._exportContent_taqlm_246 ._exportHeader_taqlm_270 ._leftSection_taqlm_279 > div:first-child {
    max-height: 68px !important;
    max-width: 68px !important;
    min-height: 68px !important;
    min-width: 68px !important;
  }
}
._exportModal_taqlm_227 ._exportContent_taqlm_246 ._exportHeader_taqlm_270 ._leftSection_taqlm_279 ._deckInfo_taqlm_301 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 0;
}
._exportModal_taqlm_227 ._exportContent_taqlm_246 ._exportHeader_taqlm_270 ._leftSection_taqlm_279 ._deckInfo_taqlm_301 ._deckName_taqlm_308 {
  font-size: 13px;
  color: var(--clrAccent-50);
  font-weight: 400;
  line-height: 1.2;
}
@media (max-width: 400px) {
  ._exportModal_taqlm_227 ._exportContent_taqlm_246 ._exportHeader_taqlm_270 ._leftSection_taqlm_279 ._deckInfo_taqlm_301 ._deckName_taqlm_308 {
    font-size: 11px;
  }
}
._exportModal_taqlm_227 ._exportContent_taqlm_246 ._exportHeader_taqlm_270 ._leftSection_taqlm_279 ._deckInfo_taqlm_301 ._exportStats_taqlm_319 {
  font-size: 28px;
  font-weight: 800;
  color: var(--clrAccent-100);
  white-space: nowrap;
  line-height: 1.2;
}
@media (max-width: 400px) {
  ._exportModal_taqlm_227 ._exportContent_taqlm_246 ._exportHeader_taqlm_270 ._leftSection_taqlm_279 ._deckInfo_taqlm_301 ._exportStats_taqlm_319 {
    font-size: 22px;
  }
}
._exportModal_taqlm_227 ._exportContent_taqlm_246 ._exportHeader_taqlm_270 ._leftSection_taqlm_279 ._deckInfo_taqlm_301 ._positionText_taqlm_331 {
  font-size: 13px;
  color: var(--clrAccent-50);
  font-weight: 400;
  line-height: 1.2;
}
@media (max-width: 400px) {
  ._exportModal_taqlm_227 ._exportContent_taqlm_246 ._exportHeader_taqlm_270 ._leftSection_taqlm_279 ._deckInfo_taqlm_301 ._positionText_taqlm_331 {
    font-size: 11px;
  }
}
._exportModal_taqlm_227 ._exportContent_taqlm_246 ._exportHeader_taqlm_270 ._rightSection_taqlm_342 {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-start;
  gap: 8px;
  flex-shrink: 1;
  min-width: 0;
}
._exportModal_taqlm_227 ._exportContent_taqlm_246 ._exportHeader_taqlm_270 ._rightSection_taqlm_342 ._tournamentName_taqlm_351 {
  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_taqlm_227 ._exportContent_taqlm_246 ._exportHeader_taqlm_270 ._rightSection_taqlm_342 ._tournamentName_taqlm_351 {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 160px;
  }
}
@media (max-width: 400px) {
  ._exportModal_taqlm_227 ._exportContent_taqlm_246 ._exportHeader_taqlm_270 ._rightSection_taqlm_342 ._tournamentName_taqlm_351 {
    font-size: 12px;
    max-width: 120px;
  }
}
._exportModal_taqlm_227 ._exportContent_taqlm_246 ._exportHeader_taqlm_270 ._rightSection_taqlm_342 ._chips_taqlm_373 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  flex-wrap: nowrap;
}
._exportModal_taqlm_227 ._exportContent_taqlm_246 ._exportHeader_taqlm_270 ._rightSection_taqlm_342 ._appPromo_taqlm_381 {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-start;
  gap: 2px;
  font-size: 11px;
}
._exportModal_taqlm_227 ._exportContent_taqlm_246 ._exportHeader_taqlm_270 ._rightSection_taqlm_342 ._appPromo_taqlm_381 ._appPromoText_taqlm_389 {
  color: var(--clrAccent-40);
}
@media (max-width: 500px) {
  ._exportModal_taqlm_227 ._exportContent_taqlm_246 ._exportHeader_taqlm_270 ._rightSection_taqlm_342 ._appPromo_taqlm_381 ._appPromoText_taqlm_389 {
    display: none;
  }
}
._exportModal_taqlm_227 ._exportContent_taqlm_246 ._exportHeader_taqlm_270 ._rightSection_taqlm_342 ._appPromo_taqlm_381 ._appPromoLine_taqlm_397 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
}
._exportModal_taqlm_227 ._exportContent_taqlm_246 ._exportHeader_taqlm_270 ._rightSection_taqlm_342 ._appPromo_taqlm_381 ._madeWithHighlight_taqlm_404 {
  font-weight: 700;
  color: var(--clrAccent-100);
}
._exportModal_taqlm_227 ._exportContent_taqlm_246 ._exportHeader_taqlm_270 ._rightSection_taqlm_342 ._appPromo_taqlm_381 img {
  height: 20px;
  width: 20px;
  border-radius: 4px;
}
@media (max-width: 400px) {
  ._exportModal_taqlm_227 ._exportContent_taqlm_246 ._exportHeader_taqlm_270 ._rightSection_taqlm_342 ._appPromo_taqlm_381 {
    font-size: 9px;
  }
  ._exportModal_taqlm_227 ._exportContent_taqlm_246 ._exportHeader_taqlm_270 ._rightSection_taqlm_342 ._appPromo_taqlm_381 img {
    height: 16px;
    width: 16px;
  }
}
._exportModal_taqlm_227 ._exportContent_taqlm_246 ._divider_taqlm_422 {
  width: 100%;
  height: 1px;
  background-color: var(--clrAccent-30);
  margin: 12px 0;
  flex-shrink: 0;
}
@media (max-width: 400px) {
  ._exportModal_taqlm_227 ._exportContent_taqlm_246 ._divider_taqlm_422 {
    margin: 8px 0;
  }
}
._exportModal_taqlm_227 ._exportContent_taqlm_246 ._exportRoundList_taqlm_434 {
  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_taqlm_227 ._exportContent_taqlm_246 ._exportRoundList_taqlm_434 {
    gap: 4px;
  }
}
._exportModal_taqlm_227 ._exportContent_taqlm_246 ._exportRoundList_taqlm_434::-webkit-scrollbar {
  width: 8px;
}
._exportModal_taqlm_227 ._exportContent_taqlm_246 ._exportRoundList_taqlm_434::-webkit-scrollbar-track {
  background: var(--clrSecondary);
  border-radius: 4px;
}
._exportModal_taqlm_227 ._exportContent_taqlm_246 ._exportRoundList_taqlm_434::-webkit-scrollbar-thumb {
  background: var(--clrAccent-30);
  border-radius: 4px;
}
._exportModal_taqlm_227 ._exportContent_taqlm_246 ._exportRoundList_taqlm_434::-webkit-scrollbar-thumb:hover {
  background: var(--clrAccent-50);
}
._exportModal_taqlm_227 ._actionButtons_taqlm_464 {
  margin-top: 16px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 12px;
  animation: _modalBounceIn_taqlm_1 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
._exportModal_taqlm_227 ._downloadBtn_taqlm_473 {
  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_taqlm_227 ._downloadBtn_taqlm_473 svg {
  width: 18px;
  height: 18px;
}
._exportModal_taqlm_227 ._downloadBtn_taqlm_473:hover:not(:disabled) {
  transform: translateY(-2px);
}
._exportModal_taqlm_227 ._downloadBtn_taqlm_473:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
._exportModal_taqlm_227 ._downloadBtn_taqlm_473 ._spinner_taqlm_500 {
  animation: _spin_taqlm_500 1s linear infinite;
}

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

html:has(body._themeLight_1c29v_5),
html:has(body._themePastelLight_1c29v_6) {
  color-scheme: light;
}

:root {
  --clrPrimary: #F4F4F5;
  --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;
  --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_1c29v_5 {
  --clrPrimary: #F4F4F5;
  --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;
  --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_1c29v_125 {
  --clrPrimary: #0F1418;
  --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;
  --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-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_1c29v_206 {
  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_1c29v_206 ._historyHeader_1c29v_219 {
  width: 100%;
  min-height: 44px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
._historyContainer_1c29v_206 ._historyHeader_1c29v_219 h2 {
  color: var(--clrTextPrimary);
  font-size: 20px;
  margin: 0;
  animation: _fadeIn_1c29v_1 0.3s ease-out;
}
._historyContainer_1c29v_206 ._historyHeader_1c29v_219 ._searchContainer_1c29v_234 {
  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_1c29v_1 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  transform-origin: right center;
  box-sizing: border-box;
}
._historyContainer_1c29v_206 ._historyHeader_1c29v_219 ._searchContainer_1c29v_234 ._searchIconInside_1c29v_250 {
  width: 20px;
  height: 20px;
  color: var(--clrTextSecondary);
  flex-shrink: 0;
  animation: _fadeInIcon_1c29v_1 0.3s ease-out 0.1s forwards;
  opacity: 0;
}
._historyContainer_1c29v_206 ._historyHeader_1c29v_219 ._searchContainer_1c29v_234 ._searchInput_1c29v_258 {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  color: var(--clrTextPrimary);
  font-size: 16px;
  font-family: var(--font-sans);
  padding: 0;
  animation: _fadeInInput_1c29v_1 0.3s ease-out 0.15s forwards;
  opacity: 0;
}
._historyContainer_1c29v_206 ._historyHeader_1c29v_219 ._searchContainer_1c29v_234 ._searchInput_1c29v_258::placeholder {
  color: var(--clrTextTertiary);
}
._historyContainer_1c29v_206 ._historyHeader_1c29v_219 ._searchContainer_1c29v_234 ._closeSearchBtn_1c29v_273 {
  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_1c29v_1 0.3s ease-out 0.2s forwards;
  opacity: 0;
}
._historyContainer_1c29v_206 ._historyHeader_1c29v_219 ._searchContainer_1c29v_234 ._closeSearchBtn_1c29v_273 ._closeIcon_1c29v_287 {
  width: 20px;
  height: 20px;
  color: var(--clrTextSecondary);
}
._historyContainer_1c29v_206 ._historyHeader_1c29v_219 ._searchContainer_1c29v_234 ._closeSearchBtn_1c29v_273:hover ._closeIcon_1c29v_287 {
  color: var(--clrTextPrimary);
}
._historyContainer_1c29v_206 ._historyHeader_1c29v_219 ._headerActions_1c29v_295 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  animation: _fadeIn_1c29v_1 0.3s ease-out;
}
._historyContainer_1c29v_206 ._historyHeader_1c29v_219 ._headerActions_1c29v_295 ._searchBtn_1c29v_303 {
  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_1c29v_206 ._historyHeader_1c29v_219 ._headerActions_1c29v_295 ._searchBtn_1c29v_303 ._searchIcon_1c29v_250 {
  width: 18px;
  height: 18px;
}
._historyContainer_1c29v_206 ._historyHeader_1c29v_219 ._headerActions_1c29v_295 ._searchBtn_1c29v_303:hover {
  background-color: rgba(255, 255, 255, 0.05);
}
._historyContainer_1c29v_206 ._historyHeader_1c29v_219 ._headerActions_1c29v_295 ._searchBtn_1c29v_303:active {
  transform: scale(0.95);
}
._historyContainer_1c29v_206 ._historyHeader_1c29v_219 ._headerActions_1c29v_295 ._filterContainer_1c29v_327 {
  position: relative;
}
._historyContainer_1c29v_206 ._historyHeader_1c29v_219 ._headerActions_1c29v_295 ._filterContainer_1c29v_327 ._filterBtn_1c29v_330 {
  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_1c29v_206 ._historyHeader_1c29v_219 ._headerActions_1c29v_295 ._filterContainer_1c29v_327 ._filterBtn_1c29v_330 ._filterIcon_1c29v_344 {
  width: 18px;
  height: 18px;
}
._historyContainer_1c29v_206 ._historyHeader_1c29v_219 ._headerActions_1c29v_295 ._filterContainer_1c29v_327 ._filterBtn_1c29v_330 ._chevronIcon_1c29v_348 {
  width: 14px;
  height: 14px;
}
._historyContainer_1c29v_206 ._historyHeader_1c29v_219 ._headerActions_1c29v_295 ._filterContainer_1c29v_327 ._filterBtn_1c29v_330:hover {
  background-color: rgba(255, 255, 255, 0.05);
}
._historyContainer_1c29v_206 ._historyHeader_1c29v_219 ._headerActions_1c29v_295 ._filterContainer_1c29v_327 ._filterDropdown_1c29v_355 {
  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_1c29v_206 ._historyHeader_1c29v_219 ._headerActions_1c29v_295 ._filterContainer_1c29v_327 ._filterDropdown_1c29v_355 ._filterOption_1c29v_372 {
  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_1c29v_206 ._historyHeader_1c29v_219 ._headerActions_1c29v_295 ._filterContainer_1c29v_327 ._filterDropdown_1c29v_355 ._filterOption_1c29v_372:hover {
  background-color: rgba(255, 255, 255, 0.1);
}
._historyContainer_1c29v_206 ._historyHeader_1c29v_219 ._headerActions_1c29v_295 ._filterContainer_1c29v_327 ._filterDropdown_1c29v_355 ._filterOption_1c29v_372._active_1c29v_388 {
  background-color: var(--clrAccent-10);
  color: var(--clrAccent-100);
}
._historyContainer_1c29v_206 ._historyHeader_1c29v_219 ._headerActions_1c29v_295 ._editModeBtn_1c29v_392 {
  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_1c29v_206 h2 {
  font-size: 24px;
  font-family: var(--font-sans);
  font-weight: 700;
  color: var(--clrAccent-100);
}
._historyContainer_1c29v_206 p {
  color: var(--clrAccent-100);
  opacity: 0.7;
}
._historyContainer_1c29v_206 ._topTabs_1c29v_413 {
  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_1c29v_206 ._topTabs_1c29v_413 ._topTab_1c29v_413 {
  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_1c29v_206 ._topTabs_1c29v_413 ._topTab_1c29v_413:hover {
  color: var(--clrTextPrimary);
}
._historyContainer_1c29v_206 ._topTabs_1c29v_413 ._topTab_1c29v_413._active_1c29v_388 {
  color: var(--clrAccent-100);
  border-bottom-color: var(--clrAccent-100);
}
._historyContainer_1c29v_206 ._simSubTabs_1c29v_443 {
  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_1c29v_206 ._simSubTabs_1c29v_443 ._simSubTab_1c29v_443 {
  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_1c29v_206 ._simSubTabs_1c29v_443 ._simSubTab_1c29v_443:hover {
  color: var(--clrTextPrimary);
}
._historyContainer_1c29v_206 ._simSubTabs_1c29v_443 ._simSubTab_1c29v_443._active_1c29v_388 {
  color: var(--clrAccent-100);
  border-bottom-color: var(--clrAccent-100);
}
._historyContainer_1c29v_206 ._simSubTabs_1c29v_443 ._simBadge_1c29v_477 {
  font-size: 10px;
  background: var(--clrAccent-10);
  color: var(--clrTextSecondary);
  padding: 1px 6px;
  border-radius: 10px;
  font-weight: 500;
}
._historyContainer_1c29v_206 ._simSubTabs_1c29v_443 ._simRecord_1c29v_485 {
  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_1c29v_206 ._simSubTabs_1c29v_443 ._simWins_1c29v_497 {
  color: var(--clrSuccess-100);
}
._historyContainer_1c29v_206 ._simSubTabs_1c29v_443 ._simLosses_1c29v_500 {
  color: var(--clrError-100);
}
._historyContainer_1c29v_206 ._simSubTabs_1c29v_443 ._simSep_1c29v_503 {
  color: var(--clrTextTertiary);
}
._historyContainer_1c29v_206 ._simSubTabs_1c29v_443 ._simEditBtn_1c29v_506 {
  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_1c29v_206 ._simEditToolbar_1c29v_519 {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  padding: 8px 0;
}
._historyContainer_1c29v_206 ._simEditToolbar_1c29v_519 ._simSelectAllBtn_1c29v_528 {
  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_1c29v_206 ._simEditToolbar_1c29v_519 ._simSelectAllBtn_1c29v_528:hover {
  background-color: rgba(255, 255, 255, 0.05);
}
._historyContainer_1c29v_206 ._simEditToolbar_1c29v_519 ._simDeleteBtn_1c29v_543 {
  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_1c29v_206 ._simEditToolbar_1c29v_519 ._simDeleteBtn_1c29v_543:hover {
  background-color: var(--clrError-50);
}
._historyContainer_1c29v_206 ._simCheckbox_1c29v_558 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: 0 8px 0 12px;
  flex-shrink: 0;
}
._historyContainer_1c29v_206 ._simCheckbox_1c29v_558 input[type=checkbox] {
  width: 18px;
  height: 18px;
  cursor: pointer;
  accent-color: var(--clrAccent-100);
}
._historyContainer_1c29v_206 ._simMatchList_1c29v_573 {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 8px;
}
._historyContainer_1c29v_206 ._simColumnHeader_1c29v_581 {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 0;
  padding: 4px 12px;
}
._historyContainer_1c29v_206 ._simColumnHeader_1c29v_581 ._simColLabel_1c29v_590 {
  font-size: 10px;
  font-weight: 600;
  color: var(--clrTextTertiary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
._historyContainer_1c29v_206 ._simColumnHeader_1c29v_581 ._simColLabel_1c29v_590:first-child {
  text-align: left;
  flex: 1;
}
._historyContainer_1c29v_206 ._simColumnHeader_1c29v_581 ._simColLabel_1c29v_590:nth-child(2) {
  text-align: center;
  width: 120px;
  flex-shrink: 0;
}
._historyContainer_1c29v_206 ._simColumnHeader_1c29v_581 ._simColLabel_1c29v_590:last-child {
  text-align: right;
  flex: 1;
}
._historyContainer_1c29v_206 ._simRow_1c29v_610 {
  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_1c29v_206 ._simLeaderLeft_1c29v_624 {
  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_1c29v_206 ._simLeaderLeft_1c29v_624 > div:first-child {
  flex-shrink: 0;
  aspect-ratio: 1;
}
._historyContainer_1c29v_206 ._simMyInfo_1c29v_638 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 2px;
  min-width: 0;
  overflow: hidden;
}
._historyContainer_1c29v_206 ._simMyInfo_1c29v_638 ._simMyName_1c29v_647 {
  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_1c29v_206 ._simMyInfo_1c29v_638 ._simMySub_1c29v_657 {
  font-size: 10px;
  color: var(--clrTextTertiary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
}
._historyContainer_1c29v_206 ._simCenter_1c29v_665 {
  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_1c29v_206 ._simCenter_1c29v_665 ._simDate_1c29v_678 {
  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_1c29v_206 ._simCenter_1c29v_665._simCenterWin_1c29v_691 {
  background: radial-gradient(ellipse at center, rgba(94, 178, 122, 0.3) 0%, rgba(50, 126, 75, 0.08) 50%, transparent 80%);
}
._historyContainer_1c29v_206 ._simCenter_1c29v_665._simCenterLoss_1c29v_694 {
  background: radial-gradient(ellipse at center, rgba(238, 70, 70, 0.3) 0%, rgba(175, 49, 49, 0.08) 50%, transparent 80%);
}
._historyContainer_1c29v_206 ._simRow_1c29v_610:hover ._simDate_1c29v_678 {
  opacity: 1;
}
._historyContainer_1c29v_206 ._simLeaderRight_1c29v_700 {
  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_1c29v_206 ._simLeaderRight_1c29v_700 > div:last-child {
  flex-shrink: 0;
  aspect-ratio: 1;
}
._historyContainer_1c29v_206 ._simOppInfo_1c29v_714 {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  gap: 2px;
  min-width: 0;
  overflow: hidden;
}
._historyContainer_1c29v_206 ._simOppInfo_1c29v_714 ._simOppName_1c29v_723 {
  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_1c29v_206 ._simOppInfo_1c29v_714 ._simOppSub_1c29v_734 {
  font-size: 10px;
  color: var(--clrTextTertiary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
  text-align: right;
}
@media (max-width: 600px) {
  ._historyContainer_1c29v_206 ._simMyInfo_1c29v_638,
  ._historyContainer_1c29v_206 ._simOppInfo_1c29v_714 {
    display: none;
  }
  ._historyContainer_1c29v_206 ._simCenter_1c29v_665 {
    width: 100px;
    padding: 0 4px;
  }
  ._historyContainer_1c29v_206 ._simLeaderLeft_1c29v_624 {
    padding: 4px 2px 4px 6px;
  }
  ._historyContainer_1c29v_206 ._simLeaderRight_1c29v_700 {
    padding: 4px 6px 4px 2px;
  }
  ._historyContainer_1c29v_206 ._simCheckbox_1c29v_558 {
    padding: 0 4px 0 8px;
  }
}
._historyContainer_1c29v_206 ._loadMoreTrigger_1c29v_762 {
  width: 100%;
  min-height: 60px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: 20px 0;
}
._historyContainer_1c29v_206 ._loadMoreTrigger_1c29v_762 ._smallLoader_1c29v_772 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: 16px;
}
._historyContainer_1c29v_206 ._loadMoreTrigger_1c29v_762 ._smallLoader_1c29v_772 ._spinner_1c29v_780 {
  width: 32px;
  height: 32px;
  border: 3px solid rgba(255, 255, 255, 0.1);
  border-top-color: var(--clrAccent-100);
  border-radius: 50%;
  animation: _spin_1c29v_780 0.8s linear infinite;
}

@keyframes _spin_1c29v_780 {
  to {
    transform: rotate(360deg);
  }
}
@keyframes _expandSearch_1c29v_1 {
  from {
    transform: scaleX(0.8);
    opacity: 0;
  }
  to {
    transform: scaleX(1);
    opacity: 1;
  }
}
@keyframes _fadeInIcon_1c29v_1 {
  from {
    opacity: 0;
    transform: translateX(-8px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes _fadeInInput_1c29v_1 {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes _fadeIn_1c29v_1 {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
._freeplayRowWrap_1c29v_830 {
  position: relative;
  width: 100%;
}

._freeplayRowActions_1c29v_835 {
  position: absolute;
  top: 8px;
  right: 8px;
  display: flex;
  gap: 6px;
  z-index: 2;
}

._freeplayRowBtn_1c29v_844 {
  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_1c29v_844 svg {
  width: 16px;
  height: 16px;
}
._freeplayRowBtn_1c29v_844:active {
  transform: scale(0.94);
}

._freeplayRowBtnDanger_1c29v_865 {
  background: rgba(220, 38, 38, 0.85);
}html {
  color-scheme: dark;
}

html:has(body._themeLight_1aogp_5),
html:has(body._themePastelLight_1aogp_6) {
  color-scheme: light;
}

:root {
  --clrPrimary: #F4F4F5;
  --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;
  --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_1aogp_5 {
  --clrPrimary: #F4F4F5;
  --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;
  --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_1aogp_125 {
  --clrPrimary: #0F1418;
  --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;
  --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-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_1aogp_206 {
  gap: 0;
}

._content_1aogp_210 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  width: 100%;
  padding-bottom: 8px;
}

._logo_1aogp_220 {
  width: 64px;
  height: 64px;
  border-radius: 12px;
}

._heading_1aogp_226 {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  color: var(--clrTextPrimary);
  text-align: center;
}

._subheading_1aogp_234 {
  margin: 0;
  font-size: 16px;
  color: var(--clrAccent-60);
  text-align: center;
}

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

._downloadButton_1aogp_249 {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  transition: transform 0.15s ease;
}
._downloadButton_1aogp_249:active {
  transform: scale(0.96);
}

._appStoreBadge_1aogp_260 {
  height: 52px;
  width: auto;
}html {
  color-scheme: dark;
}

html:has(body._themeLight_1pcgs_5),
html:has(body._themePastelLight_1pcgs_6) {
  color-scheme: light;
}

:root {
  --clrPrimary: #F4F4F5;
  --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;
  --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_1pcgs_5 {
  --clrPrimary: #F4F4F5;
  --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;
  --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_1pcgs_125 {
  --clrPrimary: #0F1418;
  --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;
  --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-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_1pcgs_206 {
  max-width: 900px;
  margin: 0 auto;
  padding: 128px 24px;
}

._header_1pcgs_212 {
  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_1pcgs_223 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
}
._logoSection_1pcgs_223 ._logo_1pcgs_223 {
  width: 48px;
  height: 48px;
  object-fit: contain;
}
._logoSection_1pcgs_223 ._appName_1pcgs_235 {
  font-size: 24px;
  font-weight: 700;
  color: var(--clrAccent-100);
}

._backButton_1pcgs_241 {
  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_1pcgs_241:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(255, 255, 255, 0.2);
}

._pageContainer_1pcgs_206 h1 {
  font-size: 42px;
  font-weight: 700;
  color: var(--clrAccent-100);
  margin-bottom: 40px;
  text-align: left;
}

._content_1pcgs_264 {
  color: var(--clrAccent-80);
  line-height: 1.8;
}
._content_1pcgs_264 h2 {
  font-size: 28px;
  font-weight: 600;
  color: var(--clrAccent-100);
  margin-top: 32px;
  margin-bottom: 16px;
  text-align: left;
}
._content_1pcgs_264 p {
  font-size: 16px;
  margin-bottom: 20px;
}
._content_1pcgs_264 strong {
  color: var(--clrAccent-100);
  font-weight: 600;
}

@media (max-width: 768px) {
  ._header_1pcgs_212 {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
  ._logoSection_1pcgs_223 ._logo_1pcgs_223 {
    width: 40px;
    height: 40px;
  }
  ._logoSection_1pcgs_223 ._appName_1pcgs_235 {
    font-size: 20px;
  }
  ._backButton_1pcgs_241 {
    width: 100%;
    text-align: center;
  }
  ._pageContainer_1pcgs_206 {
    padding: 80px 20px;
  }
  ._pageContainer_1pcgs_206 h1 {
    font-size: 32px;
    margin-bottom: 32px;
  }
  ._content_1pcgs_264 h2 {
    font-size: 24px;
    margin-top: 24px;
  }
  ._content_1pcgs_264 p {
    font-size: 15px;
  }
}html {
  color-scheme: dark;
}

html:has(body._themeLight_14me4_5),
html:has(body._themePastelLight_14me4_6) {
  color-scheme: light;
}

:root {
  --clrPrimary: #F4F4F5;
  --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;
  --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_14me4_5 {
  --clrPrimary: #F4F4F5;
  --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;
  --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_14me4_125 {
  --clrPrimary: #0F1418;
  --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;
  --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-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_14me4_206 {
  max-width: 900px;
  margin: 0 auto;
  padding: 128px 24px;
}

._header_14me4_212 {
  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_14me4_223 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
}
._logoSection_14me4_223 ._logo_14me4_223 {
  width: 48px;
  height: 48px;
  object-fit: contain;
}
._logoSection_14me4_223 ._appName_14me4_235 {
  font-size: 24px;
  font-weight: 700;
  color: var(--clrAccent-100);
}

._backButton_14me4_241 {
  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_14me4_241:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(255, 255, 255, 0.2);
}

._pageContainer_14me4_206 h1 {
  font-size: 42px;
  font-weight: 700;
  color: var(--clrAccent-100);
  margin-bottom: 40px;
  text-align: left;
}

._content_14me4_264 {
  color: var(--clrAccent-80);
  line-height: 1.8;
}
._content_14me4_264 h2 {
  font-size: 28px;
  font-weight: 600;
  color: var(--clrAccent-100);
  margin-top: 32px;
  margin-bottom: 16px;
  text-align: left;
}
._content_14me4_264 p {
  font-size: 16px;
  margin-bottom: 20px;
}
._content_14me4_264 ul {
  margin: 16px 0 20px 24px;
}
._content_14me4_264 ul li {
  font-size: 16px;
  margin-bottom: 8px;
  color: var(--clrAccent-80);
}
._content_14me4_264 strong {
  color: var(--clrAccent-100);
  font-weight: 600;
}

@media (max-width: 768px) {
  ._header_14me4_212 {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
  ._logoSection_14me4_223 ._logo_14me4_223 {
    width: 40px;
    height: 40px;
  }
  ._logoSection_14me4_223 ._appName_14me4_235 {
    font-size: 20px;
  }
  ._backButton_14me4_241 {
    width: 100%;
    text-align: center;
  }
  ._pageContainer_14me4_206 {
    padding: 80px 20px;
  }
  ._pageContainer_14me4_206 h1 {
    font-size: 32px;
    margin-bottom: 32px;
  }
  ._content_14me4_264 h2 {
    font-size: 24px;
    margin-top: 24px;
  }
  ._content_14me4_264 p {
    font-size: 15px;
  }
}html {
  color-scheme: dark;
}

html:has(body._themeLight_1qt43_5),
html:has(body._themePastelLight_1qt43_6) {
  color-scheme: light;
}

:root {
  --clrPrimary: #F4F4F5;
  --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;
  --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_1qt43_5 {
  --clrPrimary: #F4F4F5;
  --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;
  --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_1qt43_125 {
  --clrPrimary: #0F1418;
  --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;
  --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-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_1qt43_206 {
  max-width: 900px;
  margin: 0 auto;
  padding: 128px 24px;
}
._pageContainer_1qt43_206 h1 {
  font-size: 42px;
  font-weight: 700;
  color: var(--clrAccent-100);
  margin-bottom: 40px;
  text-align: left;
}

._header_1qt43_219 {
  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_1qt43_230 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
}
._logoSection_1qt43_230 ._logo_1qt43_230 {
  width: 48px;
  height: 48px;
  object-fit: contain;
}
._logoSection_1qt43_230 ._appName_1qt43_242 {
  font-size: 24px;
  font-weight: 700;
  color: var(--clrAccent-100);
}

._backButton_1qt43_248 {
  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_1qt43_248:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(255, 255, 255, 0.2);
}

._content_1qt43_263 {
  color: var(--clrAccent-80);
  line-height: 1.8;
}
._content_1qt43_263 h2 {
  font-size: 28px;
  font-weight: 600;
  color: var(--clrAccent-100);
  margin-top: 32px;
  margin-bottom: 16px;
  text-align: left;
}
._content_1qt43_263 h3 {
  font-size: 24px;
  font-weight: 600;
  color: var(--clrAccent-100);
  margin-top: 20px;
  margin-bottom: 8px;
}
._content_1qt43_263 p {
  font-size: 16px;
  margin-bottom: 20px;
}
._content_1qt43_263 a {
  color: var(--clrAccent-100);
  font-weight: 600;
  text-decoration: underline;
}

._emailButton_1qt43_292 {
  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_1qt43_292:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

._emailIcon_1qt43_315 {
  width: 20px;
  height: 20px;
}

@media (max-width: 768px) {
  ._header_1qt43_219 {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
  ._logoSection_1qt43_230 ._logo_1qt43_230 {
    width: 40px;
    height: 40px;
  }
  ._logoSection_1qt43_230 ._appName_1qt43_242 {
    font-size: 20px;
  }
  ._backButton_1qt43_248 {
    width: 100%;
    text-align: center;
  }
  ._pageContainer_1qt43_206 {
    padding: 80px 20px;
  }
  ._pageContainer_1qt43_206 h1 {
    font-size: 32px;
    margin-bottom: 32px;
  }
  ._content_1qt43_263 h2 {
    font-size: 24px;
    margin-top: 24px;
  }
  ._content_1qt43_263 h3 {
    font-size: 20px;
  }
  ._content_1qt43_263 p {
    font-size: 15px;
  }
  ._emailButton_1qt43_292 {
    width: 100%;
    justify-content: center;
  }
}html {
  color-scheme: dark;
}

html:has(body._themeLight_690ti_5),
html:has(body._themePastelLight_690ti_6) {
  color-scheme: light;
}

:root {
  --clrPrimary: #F4F4F5;
  --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;
  --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_690ti_5 {
  --clrPrimary: #F4F4F5;
  --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;
  --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_690ti_125 {
  --clrPrimary: #0F1418;
  --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;
  --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-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_690ti_206 {
  width: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  padding: 120px 20px 96px;
  display: grid;
  place-items: center;
}

._panel_690ti_215 {
  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_690ti_224 {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 16px;
  margin-bottom: 28px;
}
._header_690ti_224 h1 {
  font-size: 32px;
  line-height: 1.1;
  color: var(--clrAccent-100);
  margin-bottom: 10px;
}
._header_690ti_224 p {
  color: var(--clrAccent-80);
  line-height: 1.6;
}

._warningIcon_690ti_243 {
  width: 32px;
  height: 32px;
  color: var(--clrError-100);
  flex-shrink: 0;
}

._warningBox_690ti_250 {
  background-color: var(--clrTertiary);
  border: 1px solid var(--clrError-50);
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 28px;
}
._warningBox_690ti_250 h2 {
  font-size: 24px;
  color: var(--clrAccent-100);
  margin-bottom: 12px;
}
._warningBox_690ti_250 ul {
  display: grid;
  gap: 8px;
  padding-left: 18px;
  color: var(--clrAccent-80);
  line-height: 1.5;
}

._form_690ti_270 {
  display: grid;
  gap: 20px;
}

._success_690ti_275 {
  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_690ti_284 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

._relatedLinks_690ti_290 {
  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_690ti_290 a {
  color: var(--clrAccent-100);
  font-size: 16px;
  font-weight: 600;
  text-decoration: underline;
}

@media (max-width: 640px) {
  ._page_690ti_206 {
    padding: 88px 16px 72px;
    place-items: start center;
  }
  ._panel_690ti_215 {
    padding: 24px;
  }
  ._header_690ti_224 {
    flex-direction: column;
  }
  ._header_690ti_224 h1 {
    font-size: 28px;
  }
  ._actions_690ti_284 {
    grid-template-columns: 1fr;
  }
}html {
  color-scheme: dark;
}

html:has(body._themeLight_ugwx8_5),
html:has(body._themePastelLight_ugwx8_6) {
  color-scheme: light;
}

:root {
  --clrPrimary: #F4F4F5;
  --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;
  --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_ugwx8_5 {
  --clrPrimary: #F4F4F5;
  --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;
  --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_ugwx8_125 {
  --clrPrimary: #0F1418;
  --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;
  --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-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_ugwx8_206 {
  max-width: 820px;
  margin: 0 auto;
  padding: 16px 14px;
  padding-bottom: 120px;
}
@media (max-width: 768px) {
  ._container_ugwx8_206 {
    padding: 14px;
    padding-top: 32px;
  }
}
._container_ugwx8_206 {
  padding-top: calc(60px + env(safe-area-inset-top) + 16px);
  padding-bottom: calc(60px + env(safe-area-inset-top) + 16px);
}

._stickyHeader_ugwx8_223 {
  position: sticky;
  top: 84px;
  z-index: 100;
  background: var(--clrBG-primary);
  margin-top: -14px;
}
@media (max-width: 768px) {
  ._stickyHeader_ugwx8_223 {
    top: 84px;
  }
}

._backButton_ugwx8_236 {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--clrPrimary);
  border: 1px solid var(--clrAccent-30);
  color: var(--clrAccent-100);
  padding: 8px 14px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  margin-bottom: 16px;
}
._backButton_ugwx8_236:hover {
  background: var(--clrAccent-100);
  color: var(--clrPrimary);
  border-color: var(--clrPrimary);
  transform: translateX(-4px);
}

._header_ugwx8_258 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 16px;
  background: var(--clrPrimary);
  border-radius: 12px;
  border: 1px solid var(--clrAccent-30);
  margin-bottom: 16px;
  padding: 16px;
}
@media (max-width: 768px) {
  ._header_ugwx8_258 {
    flex-direction: row;
    gap: 16px;
    padding: 12px;
  }
}

._deckImage_ugwx8_278 {
  width: 120px;
  height: 168px;
  border-radius: 8px;
  object-fit: cover;
  flex-shrink: 0;
}
@media (max-width: 768px) {
  ._deckImage_ugwx8_278 {
    width: 100px;
    height: 140px;
  }
}

._deckInfo_ugwx8_292 {
  flex: 1;
}
._deckInfo_ugwx8_292 h1 {
  font-size: 16px;
  margin: 0 0 8px 0;
  color: var(--clrAccent-100);
}
@media (max-width: 768px) {
  ._deckInfo_ugwx8_292 h1 {
    font-size: 14px;
  }
}
._deckInfo_ugwx8_292 p {
  font-size: 14px;
  color: var(--clrAccent-100);
  margin: 0;
}

._statsGrid_ugwx8_311 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 16px;
  padding-top: 16px;
}
@media (max-width: 768px) {
  ._statsGrid_ugwx8_311 {
    gap: 8px;
  }
}

._statCard_ugwx8_324 {
  background: var(--clrPrimary);
  border: 1px solid var(--clrAccent-30);
  border-radius: 8px;
  padding: 8px;
  text-align: center;
  transition: all 0.2s ease;
}
._statCard_ugwx8_324:hover {
  border-color: var(--clrAccent-30);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(var(--clrAccent-30), 0.1);
}
._statCard_ugwx8_324 ._label_ugwx8_337 {
  font-size: 12px;
  color: var(--clrAccent-100);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
._statCard_ugwx8_324 ._value_ugwx8_343 {
  font-size: 16px;
  font-weight: 700;
  color: var(--clrAccent-100);
  margin: 8px 0;
}
@media (max-width: 768px) {
  ._statCard_ugwx8_324 ._value_ugwx8_343 {
    font-size: 14px;
  }
}
._statCard_ugwx8_324 ._subValue_ugwx8_354 {
  font-size: 8px;
  color: var(--clrAccent-100);
}
._statCard_ugwx8_324._positive_ugwx8_358 {
  background: rgba(var(--clrSuccess-100), 0.1);
  border-color: rgba(var(--clrSuccess-100), 0.3);
}
._statCard_ugwx8_324._positive_ugwx8_358 ._value_ugwx8_343 {
  color: var(--clrSuccess-100);
}
._statCard_ugwx8_324._negative_ugwx8_365 {
  background: rgba(var(--clrError-100), 0.1);
  border-color: rgba(var(--clrError-100), 0.3);
}
._statCard_ugwx8_324._negative_ugwx8_365 ._value_ugwx8_343 {
  color: var(--clrError-100);
}

._matchupsSection_ugwx8_373 h2 {
  font-size: 14px;
  margin: 0 0 14px 0;
  color: var(--clrAccent-100);
  display: flex;
  align-items: center;
  gap: 8px;
}

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

._matchupCard_ugwx8_388 {
  background: var(--clrPrimary);
  border: 1px solid var(--clrAccent-30);
  border-radius: 4px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 8px;
  gap: 16px;
  transition: all 0.2s ease;
  padding: 10px 12px;
}
._matchupCard_ugwx8_388:hover {
  border-color: var(--clrAccent-30);
  transform: translateY(-2px);
}
@media (max-width: 768px) {
  ._matchupCard_ugwx8_388 {
    gap: 12px;
  }
}

._matchupDeck_ugwx8_411 {
  font-size: 14px;
  font-weight: 500;
  color: var(--clrAccent-100);
  flex: 1;
  min-width: 0;
}
@media (max-width: 768px) {
  ._matchupDeck_ugwx8_411 {
    font-size: 13px;
  }
}

._matchupWinRate_ugwx8_424 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  padding: 8px 16px;
  background: var(--clrBG-secondary);
  border: 1px solid var(--clrAccent-10);
  border-radius: 8px;
}
@media (max-width: 768px) {
  ._matchupWinRate_ugwx8_424 {
    padding: 6px 12px;
  }
}

._matchupSubStats_ugwx8_441 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  flex-shrink: 0;
  padding: 8px 16px;
  background: var(--clrBG-secondary);
  border: 1px solid var(--clrAccent-30);
  border-radius: 8px;
  font-size: 12px;
  color: var(--clrAccent-70);
  white-space: nowrap;
}
._matchupSubStats_ugwx8_441 > div:first-child {
  padding-bottom: 4px;
}
._matchupSubStats_ugwx8_441 > div:last-child {
  padding-top: 4px;
  border-top: 1px solid var(--clrAccent-30);
}
@media (max-width: 768px) {
  ._matchupSubStats_ugwx8_441 {
    font-size: 11px;
    padding: 6px 12px;
  }
}

._winRate_ugwx8_469 {
  font-size: 14px;
  font-weight: 700;
}
._winRate_ugwx8_469._positive_ugwx8_358 {
  color: var(--clrSuccess-100);
}
._winRate_ugwx8_469._negative_ugwx8_365 {
  color: var(--clrError-100);
}
._winRate_ugwx8_469._neutral_ugwx8_479 {
  color: var(--clrAccent-100);
}

._record_ugwx8_483 {
  font-size: 11px;
  color: var(--clrAccent-70);
}

._noData_ugwx8_488 {
  text-align: center;
  padding: 24px 14px;
  color: var(--clrAccent-100);
  font-size: 14px;
}

._loader_ugwx8_495 {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 60vh;
}html {
  color-scheme: dark;
}

html:has(body._themeLight_pl4x1_5),
html:has(body._themePastelLight_pl4x1_6) {
  color-scheme: light;
}

:root {
  --clrPrimary: #F4F4F5;
  --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;
  --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_pl4x1_5 {
  --clrPrimary: #F4F4F5;
  --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;
  --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_pl4x1_125 {
  --clrPrimary: #0F1418;
  --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;
  --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-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_pl4x1_206 {
  width: 100%;
  min-height: 100%;
}

._fadeOut_pl4x1_211 {
  animation: _swipeOut_pl4x1_1 0.2s ease-in-out forwards;
}

._fadeIn_pl4x1_215 {
  animation: _swipeIn_pl4x1_1 0.3s ease-in-out forwards;
}

@keyframes _swipeOut_pl4x1_1 {
  from {
    opacity: 1;
    transform: translateX(0);
  }
  to {
    opacity: 0;
    transform: translateX(-30px);
  }
}
@keyframes _swipeIn_pl4x1_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;
  --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;
  --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;
  --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;
  --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;
  --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;
  --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-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;
}

button, .clickable {
  -webkit-user-select: none;
  user-select: none;
}

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

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  user-select: none;
  -webkit-user-select: none;
}

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_oamt0_5),
html:has(body._themePastelLight_oamt0_6) {
  color-scheme: light;
}

:root {
  --clrPrimary: #F4F4F5;
  --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;
  --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_oamt0_5 {
  --clrPrimary: #F4F4F5;
  --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;
  --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_oamt0_125 {
  --clrPrimary: #0F1418;
  --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;
  --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-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;
}

._navigationBar_oamt0_206 {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  padding: 0px 16px;
  z-index: 990;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
@media (max-width: 820px) {
  ._navigationBar_oamt0_206 {
    padding: 0;
  }
}
._navigationBar_oamt0_206::before {
  content: "";
  position: absolute;
  top: 0;
  left: 16px;
  right: 16px;
  height: 60px;
  pointer-events: auto;
  background-color: var(--clrPrimary);
  border-right: 2px solid var(--clrTertiary);
  border-left: 2px solid var(--clrTertiary);
  border-bottom: 2px solid var(--clrTertiary);
  border-radius: 0 0 8px 8px;
}
._themeLight_oamt0_5 ._navigationBar_oamt0_206::before, ._themePastelLight_oamt0_6 ._navigationBar_oamt0_206::before {
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(0, 0, 0, 0.1);
  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_oamt0_125 ._navigationBar_oamt0_206::before {
  background: rgba(18, 18, 18, 0.7);
  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);
}
@media (max-width: 820px) {
  ._navigationBar_oamt0_206::before {
    width: 100%;
    top: 0;
    left: 0;
    right: 0;
    border-radius: 0;
    border-top: none;
    border-right: none;
    border-left: none;
    box-shadow: inset 0 0px 0 rgba(255, 255, 255, 0.2);
  }
}
._navigationBar_oamt0_206 > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: 800px;
  height: 60px;
  padding: 0 12px;
  position: relative;
  z-index: 1;
  pointer-events: auto;
  color: var(--clrAccent-100);
}
._navigationBar_oamt0_206 ._logoContainer_oamt0_274 {
  height: 52px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-weight: 500;
  color: var(--clrAccent-100);
  font-family: var(--font-accent);
  font-size: 18px;
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
._navigationBar_oamt0_206 ._logoContainer_oamt0_274:hover {
  opacity: 0.86;
}
._navigationBar_oamt0_206 ._logoContainer_oamt0_274 img {
  height: 70%;
}
._navigationBar_oamt0_206 ._userSection_oamt0_295 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  color: var(--clrAccent-100);
}
._navigationBar_oamt0_206 button._logoutBtn_oamt0_305 {
  background: none;
  border: none;
  color: inherit;
  font-size: inherit;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: opacity 0.2s ease;
}
._navigationBar_oamt0_206 button._logoutBtn_oamt0_305:hover {
  opacity: 0.7;
}

._guestBadge_oamt0_320 {
  background: var(--clrAccent-30);
  color: var(--clrPrimary);
  padding: 2px 8px;
  border-radius: 8px;
  font-size: 10px;
  font-weight: 700;
  margin-left: 8px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}html {
  color-scheme: dark;
}

html:has(body._themeLight_13fla_5),
html:has(body._themePastelLight_13fla_6) {
  color-scheme: light;
}

:root {
  --clrPrimary: #F4F4F5;
  --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;
  --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_13fla_5 {
  --clrPrimary: #F4F4F5;
  --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;
  --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_13fla_125 {
  --clrPrimary: #0F1418;
  --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;
  --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-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_13fla_206 {
  max-width: 820px;
  margin: 0 auto;
  width: 100%;
  padding: 16px 16px;
  color: var(--clrAccent-100);
  min-height: calc(100dvh - 60px - 80px);
}
._tournamentPage_13fla_206 h2 {
  margin-bottom: 4px;
}
._tournamentPage_13fla_206 ._statusMessage_13fla_217 {
  color: var(--clrAccent-60);
  font-size: 14px;
  margin-top: 16px;
}
._tournamentPage_13fla_206 {
  padding-top: calc(60px + env(safe-area-inset-top) + 16px);
  padding-bottom: calc(80px + env(safe-area-inset-bottom) + 16px);
}

._layout_13fla_227 {
  width: 100%;
}

._mainColumn_13fla_231 {
  min-width: 0;
}

._mobileStats_13fla_235 {
  margin-bottom: 8px;
}

._statsSidebar_13fla_239 {
  display: none;
}

@media (min-width: 1024px) {
  ._tournamentPage_13fla_206 {
    max-width: 1160px;
  }
  ._layout_13fla_227 {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 280px;
    gap: 24px;
    align-items: start;
  }
  ._mobileStats_13fla_235 {
    display: none;
  }
  ._statsSidebar_13fla_239 {
    display: block;
    position: sticky;
    top: calc(60px + env(safe-area-inset-top) + 16px);
  }
}
@media (min-width: 1200px) {
  ._tournamentPage_13fla_206 {
    max-width: none;
  }
  ._layout_13fla_227 {
    grid-template-columns: minmax(280px, 1fr) minmax(0, 760px) minmax(280px, 1fr);
  }
  ._mainColumn_13fla_231 {
    grid-column: 2;
  }
  ._statsSidebar_13fla_239 {
    grid-column: 3;
    justify-self: start;
    width: 280px;
  }
}
._header_13fla_278 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  margin-bottom: 16px;
}
._header_13fla_278 ._headerImage_13fla_286 {
  width: 128px;
  height: 128px;
  border-radius: 8px;
}
._header_13fla_278 ._headerImage_13fla_286 img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px;
}
._header_13fla_278 ._headerInfo_13fla_297 {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: space-between;
  justify-content: space-between;
  gap: 8px;
}
._header_13fla_278 ._headerInfo_13fla_297 ._headerTitle_13fla_305 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 2px;
}
._header_13fla_278 ._headerInfo_13fla_297 ._headerTitle_13fla_305 h2 {
  font-size: 24px;
  line-height: 18px;
  margin: 0;
  padding: 0;
}
._header_13fla_278 ._headerInfo_13fla_297 ._chips_13fla_318 {
  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_13fla_278 ._headerInfo_13fla_297 ._secondaryInfo_13fla_330 {
  font-size: 14px;
  color: var(--clrAccent-60);
}
._header_13fla_278 ._headerActions_13fla_334 {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

._roundForm_13fla_340 {
  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_13fla_340 ._formGroup_13fla_351 {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: stretch;
  gap: 8px;
}
._roundForm_13fla_340 ._formGroup_13fla_351 label {
  font-size: 14px;
  color: var(--clrAccent-60);
}
._roundForm_13fla_340 ._formGroup_13fla_351 ._searchInput_13fla_363 {
  width: 100%;
  height: 46px;
  padding: 0 16px;
  border-radius: 8px;
  border: none;
  background-color: var(--clrTertiary);
  color: var(--clrAccent-100);
}
._roundForm_13fla_340 ._formGroup_13fla_351 ._searchInput_13fla_363::placeholder {
  color: var(--clrAccent-60);
}
._roundForm_13fla_340 ._formGroup_13fla_351 ._leaderCarousel_13fla_375 {
  width: 100%;
  display: flex;
  overflow-x: auto;
  gap: 12px;
  padding: 8px 0;
  scrollbar-width: thin;
  scrollbar-color: var(--clrAccent-30) var(--clrTertiary);
}
._roundForm_13fla_340 ._formGroup_13fla_351 ._leaderCarousel_13fla_375::-webkit-scrollbar {
  height: 6px;
}
._roundForm_13fla_340 ._formGroup_13fla_351 ._leaderCarousel_13fla_375::-webkit-scrollbar-track {
  background: var(--clrTertiary);
  border-radius: 3px;
}
._roundForm_13fla_340 ._formGroup_13fla_351 ._leaderCarousel_13fla_375::-webkit-scrollbar-thumb {
  background: var(--clrAccent-100);
  border-radius: 3px;
}
._roundForm_13fla_340 ._formGroup_13fla_351 ._leaderCarousel_13fla_375 ._leaderCard_13fla_395 {
  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_13fla_340 ._formGroup_13fla_351 ._leaderCarousel_13fla_375 ._leaderCard_13fla_395:hover {
  border-color: var(--clrAccent-100);
  transform: translateY(-2px);
}
._roundForm_13fla_340 ._formGroup_13fla_351 ._leaderCarousel_13fla_375 ._leaderCard_13fla_395._selected_13fla_412 {
  border-color: #5cb85c;
  box-shadow: 0 0 10px rgba(92, 184, 92, 0.5);
}
._roundForm_13fla_340 ._formGroup_13fla_351 ._leaderCarousel_13fla_375 ._leaderCard_13fla_395 ._leaderImage_13fla_416 {
  width: 100%;
  height: 92px;
  border-radius: 4px 4px 0 0;
  overflow: hidden;
}
._roundForm_13fla_340 ._formGroup_13fla_351 ._leaderCarousel_13fla_375 ._leaderCard_13fla_395 ._leaderImage_13fla_416 img {
  width: 100%;
  object-fit: cover;
}
._roundForm_13fla_340 ._formGroup_13fla_351 ._leaderCarousel_13fla_375 ._leaderCard_13fla_395 ._leaderImage_13fla_416 ._imagePlaceholder_13fla_426 {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 16px;
  color: #fff;
}
._roundForm_13fla_340 ._formGroup_13fla_351 ._leaderCarousel_13fla_375 ._leaderCard_13fla_395 ._leaderInfo_13fla_436 {
  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_13fla_340 ._formGroup_13fla_351 ._leaderCarousel_13fla_375 ._leaderCard_13fla_395 ._leaderInfo_13fla_436 ._leaderName_13fla_448 {
  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_13fla_340 ._formGroup_13fla_351 ._leaderCarousel_13fla_375 ._leaderCard_13fla_395 ._leaderInfo_13fla_436 ._leaderSet_13fla_459 {
  font-size: 10px;
  color: var(--clrAccent-100);
  opacity: 0.7;
  text-align: center;
  line-height: 1;
}
._roundForm_13fla_340 ._formGroup_13fla_351 ._noResults_13fla_466 {
  width: 100%;
  text-align: center;
  color: var(--clrAccent-100);
  opacity: 0.7;
  font-size: 14px;
  padding: 20px;
  font-style: italic;
}

._modalOverlay_13fla_476 {
  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_13fla_476 {
  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_13fla_476 h3 {
  margin: 0;
}
._modal_13fla_476 ._modalDescription_13fla_501 {
  margin: 0;
  font-size: 14px;
  color: var(--clrAccent-60);
}
._modal_13fla_476 ._modalField_13fla_506 {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 14px;
  color: var(--clrAccent-60);
}
._modal_13fla_476 ._modalInput_13fla_513 {
  width: 100%;
  height: 44px;
  border-radius: 8px;
  border: 1px solid var(--clrAccent-30);
  background-color: transparent;
  color: var(--clrAccent-100);
  padding: 0 12px;
}
._modal_13fla_476 ._modalActions_13fla_522 {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 8px;
}
._modal_13fla_476 ._modalCancelBtn_13fla_528,
._modal_13fla_476 ._modalSaveBtn_13fla_529 {
  padding: 10px 18px;
  border-radius: 8px;
  font-weight: 600;
  border: none;
  cursor: pointer;
  transition: opacity 0.2s ease;
}
._modal_13fla_476 ._modalCancelBtn_13fla_528:disabled,
._modal_13fla_476 ._modalSaveBtn_13fla_529:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
._modal_13fla_476 ._modalCancelBtn_13fla_528 {
  background-color: var(--clrTertiary);
  color: var(--clrAccent-100);
}
._modal_13fla_476 ._modalSaveBtn_13fla_529 {
  background-color: var(--clrAccent-100);
  color: var(--clrPrimary);
}
._modal_13fla_476 ._modalDeleteBtn_13fla_550 {
  background-color: #dc3545;
  color: white;
}
._modal_13fla_476 ._modalDeleteBtn_13fla_550:hover:not(:disabled) {
  background-color: #c82333;
}
._modal_13fla_476 ._modalError_13fla_557 {
  color: #ff6b6b;
  font-size: 14px;
  margin: 0;
}

._toggleRow_13fla_563 {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: stretch;
  gap: 12px;
}
@media (min-width: 640px) {
  ._toggleRow_13fla_563 {
    flex-direction: row;
    justify-content: space-between;
  }
}

._toggleGroup_13fla_578 {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: stretch;
  gap: 8px;
}
._toggleGroup_13fla_578 span {
  font-size: 14px;
  color: var(--clrAccent-60);
}
._toggleGroup_13fla_578 ._toggleOptions_13fla_590 {
  display: flex;
  gap: 8px;
}
._toggleGroup_13fla_578 ._toggleBtn_13fla_594 {
  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_13fla_578 ._toggleBtn_13fla_594._active_13fla_605 {
  background-color: var(--clrAccent-100);
  color: var(--clrPrimary);
  border-color: var(--clrAccent-100);
}

._saveRoundBtn_13fla_611 {
  padding: 14px 24px;
  background-color: #5cb85c;
  color: var(--clrAccent-100);
  border: none;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
}
._saveRoundBtn_13fla_611:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

._formMessage_13fla_625 {
  font-size: 14px;
}

._roundsSection_13fla_629 ._roundsHeader_13fla_629 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}
._roundsSection_13fla_629 ._roundsHeader_13fla_629 h3 {
  margin: 0;
}
._roundsSection_13fla_629 ._roundsHeader_13fla_629 ._roundsHeaderActions_13fla_640 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
._roundsSection_13fla_629 ._roundsHeader_13fla_629 ._exportBtn_13fla_647 {
  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_13fla_629 ._roundsHeader_13fla_629 ._exportBtn_13fla_647:hover:not(:disabled) {
  border-color: var(--clrAccent-100);
  background-color: var(--clrAccent-100);
  color: var(--clrPrimary);
}
._roundsSection_13fla_629 ._roundsHeader_13fla_629 ._exportBtn_13fla_647:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
._roundsSection_13fla_629 ._roundsHeader_13fla_629 ._editModeBtn_13fla_673 {
  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_13fla_629 ._roundsHeader_13fla_629 ._editModeBtn_13fla_673:hover:not(:disabled) {
  border-color: var(--clrAccent-100);
  background-color: var(--clrAccent-100);
  color: var(--clrPrimary);
}
._roundsSection_13fla_629 ._roundsHeader_13fla_629 ._editModeBtn_13fla_673:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
._roundsSection_13fla_629 ._roundList_13fla_700 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: stretch;
  gap: 4px;
}

._exportContainer_13fla_708 {
  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_13fla_708 ._exportHeader_13fla_721 {
  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_13fla_708 ._exportHeader_13fla_721 h2 {
  margin: 0;
  font-size: 32px;
  color: var(--clrAccent-100);
}
._exportContainer_13fla_708 ._exportHeader_13fla_721 ._exportStats_13fla_735 {
  font-size: 28px;
  font-weight: 700;
  color: var(--clrAccent-100);
}
._exportContainer_13fla_708 ._exportRoundList_13fla_740 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: stretch;
  gap: 12px;
  flex: 1;
  overflow: hidden;
}
._exportContainer_13fla_708 ._roundCard_13fla_749 {
  background-color: var(--clrSecondary);
  border-radius: 8px;
  padding: 12px 16px;
}
._exportContainer_13fla_708 ._roundCard_13fla_749 ._roundMeta_13fla_754 {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 14px;
  color: var(--clrAccent-60);
}

._actionsSection_13fla_762 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  margin-top: 16px;
}
._actionsSection_13fla_762 ._addRoundButton_13fla_770 {
  width: 100%;
  display: block;
}
._actionsSection_13fla_762 ._addRoundButton_13fla_770 .inner-content {
  width: 100%;
}
._actionsSection_13fla_762 ._actionButtons_13fla_777 {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
}
._actionsSection_13fla_762 ._actionButtons_13fla_777 ._finishBtn_13fla_785 {
  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_13fla_762 ._actionButtons_13fla_777 ._finishBtn_13fla_785:hover:not(:disabled) {
  border-color: var(--clrAccent-100);
  color: var(--clrPrimary);
  background-color: var(--clrAccent-100);
}
._actionsSection_13fla_762 ._actionButtons_13fla_777 ._finishBtn_13fla_785:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
._actionsSection_13fla_762 ._actionButtons_13fla_777 ._deleteBtn_13fla_805 {
  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_13fla_762 ._actionButtons_13fla_777 ._deleteBtn_13fla_805:hover:not(:disabled) {
  background-color: #dc3545;
  color: white;
}
._actionsSection_13fla_762 ._actionButtons_13fla_777 ._deleteBtn_13fla_805:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
._actionsSection_13fla_762 ._addRoundBtn_13fla_823 {
  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_13fla_762 ._addRoundBtn_13fla_823:hover {
  opacity: 0.9;
}
._actionsSection_13fla_762 ._addRoundBtn_13fla_823:active {
  transform: scale(0.95);
}html {
  color-scheme: dark;
}

html:has(body._themeLight_feuai_5),
html:has(body._themePastelLight_feuai_6) {
  color-scheme: light;
}

:root {
  --clrPrimary: #F4F4F5;
  --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;
  --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_feuai_5 {
  --clrPrimary: #F4F4F5;
  --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;
  --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_feuai_125 {
  --clrPrimary: #0F1418;
  --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;
  --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-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_feuai_206 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 0;
  width: 100%;
}

._container_feuai_215 {
  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_feuai_215._editable_feuai_230 {
  cursor: pointer;
}
._container_feuai_215._editable_feuai_230:hover {
  border-color: var(--clrAccent-40);
}

._deleteBtn_feuai_237 {
  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_feuai_237:hover {
  background-color: var(--clrError-50);
}
._deleteBtn_feuai_237._visible_feuai_259 {
  min-width: 48px;
  width: 48px;
  margin-left: 8px;
  border: 1px solid var(--clrError-100);
}

._editBtn_feuai_266 {
  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_feuai_266:hover {
  background-color: var(--clrTertiary);
}
._editBtn_feuai_266._visible_feuai_259 {
  min-width: 48px;
  width: 48px;
  margin-left: 8px;
  border: 1px solid var(--clrAccent-30);
}

._roundNumber_feuai_295 {
  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;
}

._leaderImage_feuai_309 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: 4px 0;
  flex-shrink: 0;
}

._roundInfoSection_feuai_319 {
  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_feuai_331 {
  font-size: 14px;
  font-weight: 600;
  font-family: var(--font-sans);
  color: var(--clrAccent-80);
  line-height: 1.3;
  overflow-wrap: break-word;
  word-break: break-word;
}

._noteContainer_feuai_341 {
  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_feuai_353 {
  width: 14px;
  height: 14px;
  color: var(--clrAccent-40);
  transition: color 0.2s ease;
  flex-shrink: 0;
  margin-top: 1px;
}

._noteText_feuai_362 {
  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_feuai_362._expanded_feuai_378 {
  display: block;
  -webkit-line-clamp: unset;
  line-clamp: unset;
}

._resultSection_feuai_384 {
  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_feuai_384._win_feuai_397 {
  background: var(--clrRoundWin);
}
._resultSection_feuai_384._lose_feuai_400 {
  background: var(--clrRoundLoss);
}

._separator_feuai_404 {
  width: 1px;
  height: 40px;
  background: linear-gradient(to bottom, transparent 0%, rgba(255, 255, 255, 0.3) 50%, transparent 100%);
  margin-right: 6px;
}

._chips_feuai_411 {
  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_1xmdu_5),
html:has(body._themePastelLight_1xmdu_6) {
  color-scheme: light;
}

:root {
  --clrPrimary: #F4F4F5;
  --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;
  --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_1xmdu_5 {
  --clrPrimary: #F4F4F5;
  --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;
  --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_1xmdu_125 {
  --clrPrimary: #0F1418;
  --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;
  --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-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_1xmdu_206 {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 14px;
  color: var(--clrAccent-60);
}
._modalField_1xmdu_206 input {
  max-width: 100px;
}

._modalError_1xmdu_220 {
  color: #ff6b6b;
  font-size: 14px;
  margin: 0;
}html {
  color-scheme: dark;
}

html:has(body._themeLight_1jch2_5),
html:has(body._themePastelLight_1jch2_6) {
  color-scheme: light;
}

:root {
  --clrPrimary: #F4F4F5;
  --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;
  --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_1jch2_5 {
  --clrPrimary: #F4F4F5;
  --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;
  --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_1jch2_125 {
  --clrPrimary: #0F1418;
  --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;
  --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-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_1jch2_206 {
  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_1jch2_206 {
  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_1jch2_206 h3 {
  margin: 0;
}

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

._modalActions_1jch2_237 {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 8px;
}

._modalCancelBtn_1jch2_244,
._modalDeleteBtn_1jch2_245 {
  padding: 10px 18px;
  border-radius: 8px;
  font-weight: 600;
  border: none;
  cursor: pointer;
  transition: opacity 0.2s ease;
}
._modalCancelBtn_1jch2_244:disabled,
._modalDeleteBtn_1jch2_245:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

._modalCancelBtn_1jch2_244 {
  background-color: var(--clrTertiary);
  color: var(--clrAccent-100);
}

._modalDeleteBtn_1jch2_245 {
  background-color: #dc3545;
  color: white;
}
._modalDeleteBtn_1jch2_245:hover:not(:disabled) {
  background-color: #c82333;
}html {
  color-scheme: dark;
}

html:has(body._themeLight_s37ab_5),
html:has(body._themePastelLight_s37ab_6) {
  color-scheme: light;
}

:root {
  --clrPrimary: #F4F4F5;
  --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;
  --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_s37ab_5 {
  --clrPrimary: #F4F4F5;
  --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;
  --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_s37ab_125 {
  --clrPrimary: #0F1418;
  --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;
  --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-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_s37ab_206 {
  width: min(420px, 100%);
}

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

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

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

._typeCarousel_s37ab_241 {
  width: 100%;
}

._carouselWrapper_s37ab_245 {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
}

@media (max-width: 768px) {
  ._editTournamentModal_s37ab_206 {
    width: 100%;
  }
}html {
  color-scheme: dark;
}

html:has(body._themeLight_pxdnt_5),
html:has(body._themePastelLight_pxdnt_6) {
  color-scheme: light;
}

:root {
  --clrPrimary: #F4F4F5;
  --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;
  --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_pxdnt_5 {
  --clrPrimary: #F4F4F5;
  --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;
  --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_pxdnt_125 {
  --clrPrimary: #0F1418;
  --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;
  --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-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_pxdnt_206 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 16px;
  width: 100%;
}

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

._carouselWrapper_pxdnt_224 {
  width: 100%;
  overflow-x: hidden;
}

._roundTypeButton_pxdnt_229 {
  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_pxdnt_229:hover:not(:disabled) {
  border-color: var(--clrAccent-100);
}
._roundTypeButton_pxdnt_229:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

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

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

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

._gameBtn_pxdnt_278 {
  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_pxdnt_278:hover:not(:disabled) {
  border-color: var(--clrAccent-100);
}
._gameBtn_pxdnt_278:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
._gameBtn_pxdnt_278._winSelected_pxdnt_296 {
  background-color: rgba(34, 197, 94, 0.15);
  border-color: rgba(34, 197, 94, 0.4);
  color: #16a34a;
}
._gameBtn_pxdnt_278._loseSelected_pxdnt_301 {
  background-color: rgba(220, 38, 38, 0.15);
  border-color: rgba(220, 38, 38, 0.4);
  color: #dc2626;
}

._overallResult_pxdnt_307 {
  padding: 12px 16px;
  border-radius: 8px;
  background-color: var(--clrTertiary);
  color: var(--clrAccent-80);
  font-size: 14px;
  text-align: center;
}
._overallResult_pxdnt_307 strong {
  color: var(--clrAccent-100);
}

._noteInput_pxdnt_319 {
  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_pxdnt_319::placeholder {
  color: var(--clrAccent-30);
}
._noteInput_pxdnt_319:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

._toggleRow_pxdnt_339 {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
@media (min-width: 640px) {
  ._toggleRow_pxdnt_339 {
    flex-direction: row;
    justify-content: space-between;
  }
}

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

._singleToggleBtn_pxdnt_363 {
  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_pxdnt_363 ._value_pxdnt_379 {
  padding: 4px 12px;
  border-radius: 4px;
  background-color: rgba(var(--clrAccent-100-rgb), 0.1);
  font-size: 14px;
  color: var(--clrAccent-100);
}
._singleToggleBtn_pxdnt_363:hover:not(:disabled) {
  border-color: var(--clrAccent-100);
}
._singleToggleBtn_pxdnt_363:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}
._singleToggleBtn_pxdnt_363._winResult_pxdnt_393 {
  background-color: rgba(34, 197, 94, 0.15);
  border-color: rgba(34, 197, 94, 0.3);
  color: #16a34a;
}
._singleToggleBtn_pxdnt_363._winResult_pxdnt_393 ._value_pxdnt_379 {
  background-color: rgba(34, 197, 94, 0.25);
}
._singleToggleBtn_pxdnt_363._winResult_pxdnt_393:hover {
  background-color: rgba(34, 197, 94, 0.25);
  border-color: rgba(34, 197, 94, 0.5);
}
._singleToggleBtn_pxdnt_363._loseResult_pxdnt_405 {
  background-color: rgba(239, 68, 68, 0.15);
  border-color: rgba(239, 68, 68, 0.3);
  color: #dc2626;
}
._singleToggleBtn_pxdnt_363._loseResult_pxdnt_405 ._value_pxdnt_379 {
  background-color: rgba(239, 68, 68, 0.25);
}
._singleToggleBtn_pxdnt_363._loseResult_pxdnt_405: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_132oq_5),
html:has(body._themePastelLight_132oq_6) {
  color-scheme: light;
}

:root {
  --clrPrimary: #F4F4F5;
  --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;
  --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_132oq_5 {
  --clrPrimary: #F4F4F5;
  --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;
  --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_132oq_125 {
  --clrPrimary: #0F1418;
  --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;
  --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-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_132oq_206 {
  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_132oq_206 > div:first-child {
  flex-shrink: 0;
}
._header_132oq_206 ._headerInfo_132oq_224 {
  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_132oq_206 ._headerInfo_132oq_224 ._headerTitle_132oq_235 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 0;
  width: 100%;
}
._header_132oq_206 ._headerInfo_132oq_224 ._headerTitle_132oq_235 h2 {
  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_132oq_206 ._headerInfo_132oq_224 ._headerTitle_132oq_235 ._date_132oq_255 {
  font-size: 10px;
  font-weight: 300;
  color: var(--clrAccent-60);
  line-height: normal;
}
._header_132oq_206 ._headerInfo_132oq_224 ._chipsWrapper_132oq_261 {
  position: relative;
  width: 100%;
}
._header_132oq_206 ._headerInfo_132oq_224 ._chips_132oq_261 {
  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_132oq_206 ._headerInfo_132oq_224 ._chips_132oq_261::-webkit-scrollbar {
  display: none;
}
._header_132oq_206 ._headerInfo_132oq_224 ._chips_132oq_261 {
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}
._header_132oq_206 ._headerInfo_132oq_224 ._shadowLeft_132oq_285 {
  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_132oq_206 ._headerInfo_132oq_224 ._shadowLeft_132oq_285._visible_132oq_297 {
  opacity: 1;
}
._header_132oq_206 ._headerInfo_132oq_224 ._shadowRight_132oq_300 {
  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_132oq_206 ._headerInfo_132oq_224 ._shadowRight_132oq_300._visible_132oq_297 {
  opacity: 1;
}
._header_132oq_206 ._headerInfo_132oq_224 ._deckInfo_132oq_315 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 0;
}
._header_132oq_206 ._headerInfo_132oq_224 ._deckInfo_132oq_315 ._deckName_132oq_322 {
  font-size: 12px;
  font-weight: 700;
  color: var(--clrAccent-60);
  line-height: normal;
}
._themeDark_132oq_125 ._header_132oq_206 ._headerInfo_132oq_224 ._deckInfo_132oq_315 ._deckName_132oq_322 {
  color: rgba(198, 198, 198, 0.6);
}
._header_132oq_206 ._headerInfo_132oq_224 ._deckInfo_132oq_315 ._score_132oq_331 {
  font-size: 14px;
  font-weight: 700;
  color: var(--clrTextPrimary);
  line-height: normal;
}
._header_132oq_206 ._editBtn_132oq_337 {
  position: absolute;
  top: 8px;
  right: 8px;
}html {
  color-scheme: dark;
}

html:has(body._themeLight_h5ot8_5),
html:has(body._themePastelLight_h5ot8_6) {
  color-scheme: light;
}

:root {
  --clrPrimary: #F4F4F5;
  --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;
  --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_h5ot8_5 {
  --clrPrimary: #F4F4F5;
  --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;
  --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_h5ot8_125 {
  --clrPrimary: #0F1418;
  --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;
  --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-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_h5ot8_206 {
  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_h5ot8_219 {
  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_h5ot8_234 {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}

._metric_h5ot8_240 {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 0;
  padding: 14px 16px;
}
._metric_h5ot8_240 + ._metric_h5ot8_240 {
  border-top: 1px solid var(--clrTertiary);
}

._metricHead_h5ot8_252 {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  min-height: 20px;
}

._metricLabel_h5ot8_261 {
  font-size: 14px;
  font-weight: 600;
  color: var(--clrAccent-60);
  line-height: 1.2;
}

._metricValue_h5ot8_268 {
  font-size: 24px;
  font-weight: 800;
  line-height: 1;
  color: var(--clrTextPrimary);
}
._metricValue_h5ot8_268._positive_h5ot8_274 {
  color: var(--clrSuccess-100);
}
._metricValue_h5ot8_268._negative_h5ot8_277 {
  color: var(--clrError-100);
}

._metricValueSm_h5ot8_281 {
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  color: var(--clrTextPrimary);
}
._metricValueSm_h5ot8_281 ._of_h5ot8_287 {
  color: var(--clrAccent-40);
  font-weight: 600;
}

._metricEmpty_h5ot8_292 {
  margin-top: 8px;
  font-size: 12px;
  color: var(--clrTextTertiary);
  font-style: italic;
}

._ratioBar_h5ot8_299 {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  justify-content: flex-start;
  gap: 3px;
  height: 6px;
  margin-top: 10px;
}
._ratioBar_h5ot8_299 ._ratioWin_h5ot8_308,
._ratioBar_h5ot8_299 ._ratioLoss_h5ot8_309 {
  min-width: 6px;
  border-radius: 999px;
}
._ratioBar_h5ot8_299 ._ratioWin_h5ot8_308 {
  background: var(--clrSuccess-100);
}
._ratioBar_h5ot8_299 ._ratioLoss_h5ot8_309 {
  background: var(--clrError-100);
}

._metricFoot_h5ot8_320 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  margin-top: 8px;
  font-size: 12px;
  font-weight: 700;
}
._metricFoot_h5ot8_320 ._footWin_h5ot8_330 {
  color: var(--clrSuccess-100);
}
._metricFoot_h5ot8_320 ._footLoss_h5ot8_333 {
  color: var(--clrError-100);
}
._metricFoot_h5ot8_320 ._footDot_h5ot8_336 {
  color: var(--clrAccent-40);
  font-weight: 400;
}

._chipRow_h5ot8_341 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 10px;
}

._orderRow_h5ot8_351 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  margin-top: 10px;
}

._orderItem_h5ot8_360 {
  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_h5ot8_360 ._orderCount_h5ot8_370 {
  font-size: 14px;
  font-weight: 700;
  color: var(--clrAccent-60);
  line-height: 1;
}
._orderItem_h5ot8_360._orderBest_h5ot8_376 {
  border-color: var(--clrAccent-40);
  background: var(--clrAccent-10);
}
._orderItem_h5ot8_360._orderBest_h5ot8_376 ._orderCount_h5ot8_370 {
  color: var(--clrTextPrimary);
}

._collapsible_h5ot8_384 ._toggle_h5ot8_384 {
  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_h5ot8_384 ._toggleTitle_h5ot8_399 {
  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_h5ot8_384 ._togglePreview_h5ot8_411 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-shrink: 0;
}
._collapsible_h5ot8_384 ._togglePreview_h5ot8_411 ._previewValue_h5ot8_419 {
  font-size: 16px;
  font-weight: 800;
  color: var(--clrTextPrimary);
}
._collapsible_h5ot8_384 ._togglePreview_h5ot8_411 ._previewValue_h5ot8_419._positive_h5ot8_274 {
  color: var(--clrSuccess-100);
}
._collapsible_h5ot8_384 ._togglePreview_h5ot8_411 ._previewValue_h5ot8_419._negative_h5ot8_277 {
  color: var(--clrError-100);
}
._collapsible_h5ot8_384 ._chevron_h5ot8_430 {
  width: 18px;
  height: 18px;
  color: var(--clrAccent-60);
  transition: transform 0.25s ease;
}
._collapsible_h5ot8_384 ._chevron_h5ot8_430._chevronOpen_h5ot8_436 {
  transform: rotate(180deg);
}
._collapsible_h5ot8_384 ._collapsibleBody_h5ot8_439 {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.25s ease;
}
._collapsible_h5ot8_384 ._collapsibleBody_h5ot8_439 ._collapsibleInner_h5ot8_444 {
  overflow: hidden;
}
._collapsible_h5ot8_384 ._collapsibleBody_h5ot8_439._expanded_h5ot8_447 {
  grid-template-rows: 1fr;
}
._collapsible_h5ot8_384 ._metric_h5ot8_240:first-child {
  border-top: 1px solid var(--clrTertiary);
}html {
  color-scheme: dark;
}

html:has(body._themeLight_nvjrp_5),
html:has(body._themePastelLight_nvjrp_6) {
  color-scheme: light;
}

:root {
  --clrPrimary: #F4F4F5;
  --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;
  --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_nvjrp_5 {
  --clrPrimary: #F4F4F5;
  --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;
  --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_nvjrp_125 {
  --clrPrimary: #0F1418;
  --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;
  --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-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_nvjrp_1 {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes _fadeOut_nvjrp_1 {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
._roundForm_nvjrp_222 {
  border-radius: 8px;
  width: 100%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: stretch;
  gap: 12px;
  animation: _fadeIn_nvjrp_1 0.3s ease-in-out;
}
._roundForm_nvjrp_222 ._formGroup_nvjrp_233 {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: stretch;
  gap: 8px;
}
._roundForm_nvjrp_222 ._formGroup_nvjrp_233 label {
  font-size: 14px;
  color: var(--clrAccent-60);
}
._roundForm_nvjrp_222 ._formGroup_nvjrp_233 ._searchInput_nvjrp_247 {
  width: 100%;
  height: 46px;
  padding: 0 16px;
  border-radius: 8px;
  border: none;
  background-color: var(--clrTertiary);
  color: var(--clrAccent-100);
}
._roundForm_nvjrp_222 ._formGroup_nvjrp_233 ._searchInput_nvjrp_247::placeholder {
  color: var(--clrAccent-60);
}
._roundForm_nvjrp_222 ._formGroup_nvjrp_233 ._noteLabel_nvjrp_259 {
  display: flex;
  align-items: center;
  gap: 6px;
}
._roundForm_nvjrp_222 ._formGroup_nvjrp_233 ._noteIcon_nvjrp_264 {
  width: 18px;
  height: 18px;
  color: var(--clrAccent-60);
}
._roundForm_nvjrp_222 ._formGroup_nvjrp_233 ._noteInput_nvjrp_269 {
  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_nvjrp_222 ._formGroup_nvjrp_233 ._noteInput_nvjrp_269::placeholder {
  color: var(--clrAccent-60);
}
._roundForm_nvjrp_222 ._formGroup_nvjrp_233 ._noteInput_nvjrp_269:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
._roundForm_nvjrp_222 ._leaderCarouselFormGroup_nvjrp_288 {
  overflow: hidden;
  min-width: 0;
}
._roundForm_nvjrp_222 ._toggleRow_nvjrp_292 {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: stretch;
  gap: 12px;
}
@media (min-width: 640px) {
  ._roundForm_nvjrp_222 ._toggleRow_nvjrp_292 {
    flex-direction: row;
    justify-content: space-between;
  }
}
._roundForm_nvjrp_222 ._toggleGroup_nvjrp_306 {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: stretch;
  gap: 4px;
}
._roundForm_nvjrp_222 ._toggleGroup_nvjrp_306 span {
  font-size: 14px;
  color: var(--clrAccent-60);
}
._roundForm_nvjrp_222 ._toggleGroup_nvjrp_306 ._toggleOptions_nvjrp_318 {
  display: flex;
  gap: 8px;
}
._roundForm_nvjrp_222 ._toggleGroup_nvjrp_306 ._toggleBtn_nvjrp_322 {
  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_nvjrp_222 ._toggleGroup_nvjrp_306 ._toggleBtn_nvjrp_322._active_nvjrp_334 {
  background-color: var(--clrAccent-100);
  color: var(--clrPrimary);
  border-color: var(--clrAccent-100);
}
._roundForm_nvjrp_222 ._toggleGroup_nvjrp_306 ._singleToggleBtn_nvjrp_339 {
  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_nvjrp_222 ._toggleGroup_nvjrp_306 ._singleToggleBtn_nvjrp_339 ._value_nvjrp_355 {
  padding: 4px 12px;
  border-radius: 4px;
  background-color: rgba(var(--clrAccent-100-rgb), 0.1);
  font-size: 14px;
  color: var(--clrAccent-100);
}
._roundForm_nvjrp_222 ._toggleGroup_nvjrp_306 ._singleToggleBtn_nvjrp_339:hover {
  border-color: var(--clrAccent-100);
}
._roundForm_nvjrp_222 ._toggleGroup_nvjrp_306 ._singleToggleBtn_nvjrp_339._winResult_nvjrp_365 {
  background-color: rgba(34, 197, 94, 0.15);
  border-color: rgba(34, 197, 94, 0.3);
  color: #16a34a;
}
._roundForm_nvjrp_222 ._toggleGroup_nvjrp_306 ._singleToggleBtn_nvjrp_339._winResult_nvjrp_365 ._value_nvjrp_355 {
  background-color: rgba(34, 197, 94, 0.25);
}
._roundForm_nvjrp_222 ._toggleGroup_nvjrp_306 ._singleToggleBtn_nvjrp_339._winResult_nvjrp_365:hover {
  background-color: rgba(34, 197, 94, 0.25);
  border-color: rgba(34, 197, 94, 0.5);
}
._roundForm_nvjrp_222 ._toggleGroup_nvjrp_306 ._singleToggleBtn_nvjrp_339._loseResult_nvjrp_377 {
  background-color: rgba(239, 68, 68, 0.15);
  border-color: rgba(239, 68, 68, 0.3);
  color: #dc2626;
}
._roundForm_nvjrp_222 ._toggleGroup_nvjrp_306 ._singleToggleBtn_nvjrp_339._loseResult_nvjrp_377 ._value_nvjrp_355 {
  background-color: rgba(239, 68, 68, 0.25);
}
._roundForm_nvjrp_222 ._toggleGroup_nvjrp_306 ._singleToggleBtn_nvjrp_339._loseResult_nvjrp_377:hover {
  background-color: rgba(239, 68, 68, 0.25);
  border-color: rgba(239, 68, 68, 0.5);
}
._roundForm_nvjrp_222 ._topCutGames_nvjrp_389 {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
}
._roundForm_nvjrp_222 ._topCutGames_nvjrp_389 ._gameResultGroup_nvjrp_397 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
._roundForm_nvjrp_222 ._topCutGames_nvjrp_389 ._gameResultGroup_nvjrp_397 label {
  font-size: 14px;
  color: var(--clrAccent-60);
  font-weight: 600;
}
._roundForm_nvjrp_222 ._topCutGames_nvjrp_389 ._gameResultGroup_nvjrp_397 ._gameButtons_nvjrp_409 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
._roundForm_nvjrp_222 ._topCutGames_nvjrp_389 ._gameResultGroup_nvjrp_397 ._gameButtons_nvjrp_409 ._gameBtn_nvjrp_414 {
  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_nvjrp_222 ._topCutGames_nvjrp_389 ._gameResultGroup_nvjrp_397 ._gameButtons_nvjrp_409 ._gameBtn_nvjrp_414:hover:not(:disabled) {
  border-color: var(--clrAccent-100);
}
._roundForm_nvjrp_222 ._topCutGames_nvjrp_389 ._gameResultGroup_nvjrp_397 ._gameButtons_nvjrp_409 ._gameBtn_nvjrp_414:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}
._roundForm_nvjrp_222 ._topCutGames_nvjrp_389 ._gameResultGroup_nvjrp_397 ._gameButtons_nvjrp_409 ._gameBtn_nvjrp_414._winSelected_nvjrp_431 {
  background-color: rgba(34, 197, 94, 0.2);
  border-color: #22c55e;
  color: #22c55e;
}
._roundForm_nvjrp_222 ._topCutGames_nvjrp_389 ._gameResultGroup_nvjrp_397 ._gameButtons_nvjrp_409 ._gameBtn_nvjrp_414._loseSelected_nvjrp_436 {
  background-color: rgba(239, 68, 68, 0.2);
  border-color: #ef4444;
  color: #ef4444;
}
._roundForm_nvjrp_222 ._formActions_nvjrp_441 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 8px;
  width: 100%;
}
._roundForm_nvjrp_222 ._formActions_nvjrp_441 ._cancelBtn_nvjrp_450 {
  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_nvjrp_222 ._formActions_nvjrp_441 ._cancelBtn_nvjrp_450:hover:not(:disabled) {
  border-color: var(--clrAccent-100);
}
._roundForm_nvjrp_222 ._formActions_nvjrp_441 ._cancelBtn_nvjrp_450:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
._roundForm_nvjrp_222 ._formActions_nvjrp_441 ._saveRoundBtn_nvjrp_467 {
  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_nvjrp_222 ._formActions_nvjrp_441 ._saveRoundBtn_nvjrp_467:hover:not(:disabled) {
  background-color: #4cae4c;
}
._roundForm_nvjrp_222 ._formActions_nvjrp_441 ._saveRoundBtn_nvjrp_467:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
._roundForm_nvjrp_222 ._formMessage_nvjrp_485 {
  font-size: 14px;
  margin: 0;
  text-align: center;
}html {
  color-scheme: dark;
}

html:has(body._themeLight_1vrab_5),
html:has(body._themePastelLight_1vrab_6) {
  color-scheme: light;
}

:root {
  --clrPrimary: #F4F4F5;
  --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;
  --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_1vrab_5 {
  --clrPrimary: #F4F4F5;
  --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;
  --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_1vrab_125 {
  --clrPrimary: #0F1418;
  --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;
  --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-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_1vrab_1 {
  from {
    opacity: 0;
    transform: translateX(30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes _slideInFromLeft_1vrab_1 {
  from {
    opacity: 0;
    transform: translateX(-30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
._stepContainer_1vrab_226 {
  width: 100%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 12px;
}

._selectionStep_1vrab_236 {
  animation: _slideInFromLeft_1vrab_1 0.2s cubic-bezier(0.32, 0.72, 0, 1) forwards;
}

._formStep_1vrab_240 {
  animation: _slideInFromRight_1vrab_1 0.2s cubic-bezier(0.32, 0.72, 0, 1) forwards;
}html {
  color-scheme: dark;
}

html:has(body._themeLight_6btdb_5),
html:has(body._themePastelLight_6btdb_6) {
  color-scheme: light;
}

:root {
  --clrPrimary: #F4F4F5;
  --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;
  --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_6btdb_5 {
  --clrPrimary: #F4F4F5;
  --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;
  --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_6btdb_125 {
  --clrPrimary: #0F1418;
  --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;
  --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-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_6btdb_206 {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding-bottom: 24px;
}

._section_6btdb_213 {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
._section_6btdb_213 h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: var(--clrAccent-100);
  display: flex;
  align-items: center;
  gap: 8px;
}
._section_6btdb_213 ul {
  margin: 0;
  padding-left: 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
._section_6btdb_213 li {
  color: var(--clrAccent-80);
  font-size: 15px;
  line-height: 1.5;
}
._section_6btdb_213 li::marker {
  color: var(--clrAccent-40);
}

._footerNote_6btdb_243 {
  margin-top: 8px;
  padding-top: 16px;
  border-top: 1px solid var(--clrAccent-10);
}
._footerNote_6btdb_243 p {
  color: var(--clrTextPrimary);
  font-size: 12px;
  text-align: center;
  margin: 0;
  font-style: italic;
}

._closeButton_6btdb_256 {
  width: 100%;
  height: 48px;
  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_6btdb_256:hover {
  transform: translateY(-2px);
  background: var(--clrAccent-30);
}
._closeButton_6btdb_256:active {
  transform: translateY(0);
}

@media (max-width: 768px) {
  ._section_6btdb_213 h3 {
    font-size: 16px;
  }
  ._section_6btdb_213 li {
    font-size: 14px;
  }
}html {
  color-scheme: dark;
}

html:has(body._themeLight_agzh3_5),
html:has(body._themePastelLight_agzh3_6) {
  color-scheme: light;
}

:root {
  --clrPrimary: #F4F4F5;
  --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;
  --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_agzh3_5 {
  --clrPrimary: #F4F4F5;
  --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;
  --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_agzh3_125 {
  --clrPrimary: #0F1418;
  --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;
  --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-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_agzh3_206 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 0;
  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_agzh3_206 ._bottomBar_agzh3_206 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  max-width: 580px;
  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_agzh3_5 ._bottomBarContainer_agzh3_206 ._bottomBar_agzh3_206, ._themePastelLight_agzh3_6 ._bottomBarContainer_agzh3_206 ._bottomBar_agzh3_206 {
  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_agzh3_5 ._bottomBarContainer_agzh3_206 ._bottomBar_agzh3_206._legacy_agzh3_250, ._themePastelLight_agzh3_6 ._bottomBarContainer_agzh3_206 ._bottomBar_agzh3_206._legacy_agzh3_250 {
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.15);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
._themeDark_agzh3_125 ._bottomBarContainer_agzh3_206 ._bottomBar_agzh3_206 {
  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_agzh3_125 ._bottomBarContainer_agzh3_206 ._bottomBar_agzh3_206._legacy_agzh3_250 {
  background: #1a1a1a;
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}
._bottomBarContainer_agzh3_206 ._bottomBar_agzh3_206 ._linkContainer_agzh3_264 {
  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-select: none;
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: auto;
}
._bottomBarContainer_agzh3_206 ._bottomBar_agzh3_206 ._linkContainer_agzh3_264::selection {
  background: transparent;
}
._bottomBarContainer_agzh3_206 ._bottomBar_agzh3_206 ._linkContainer_agzh3_264:hover {
  color: var(--clrAccent-80);
}
._bottomBarContainer_agzh3_206 ._bottomBar_agzh3_206 ._linkContainer_agzh3_264:hover ._linkIcon_agzh3_291 {
  transform: translateY(-2px);
}
._bottomBarContainer_agzh3_206 ._bottomBar_agzh3_206 ._linkContainer_agzh3_264:active {
  background-color: var(--clrAccent-10);
  transform: scale(0.95);
}
._bottomBarContainer_agzh3_206 ._bottomBar_agzh3_206 ._linkContainer_agzh3_264._active_agzh3_298 {
  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_agzh3_250 ._bottomBarContainer_agzh3_206 ._bottomBar_agzh3_206 ._linkContainer_agzh3_264._active_agzh3_298 {
  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_agzh3_206 ._bottomBar_agzh3_206 ._linkContainer_agzh3_264._active_agzh3_298 ._linkIcon_agzh3_291 {
  color: var(--clrAccent-80);
}
._bottomBarContainer_agzh3_206 ._bottomBar_agzh3_206 ._linkContainer_agzh3_264 ._linkIcon_agzh3_291 {
  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;
}: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_ubiit_14 {
  width: min(100%, 1040px);
  margin: 0 auto;
  padding: 96px 18px 112px;
  color: var(--clrTextPrimary);
}

._header_ubiit_21,
._toolbarTitle_ubiit_22,
._showcaseHeader_ubiit_23 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

._header_ubiit_21 {
  margin-bottom: 18px;
}
._header_ubiit_21 h1 {
  margin: 0;
  font-size: clamp(2rem, 5vw, 3.2rem);
  line-height: 1;
}
._header_ubiit_21 p {
  margin: 6px 0 0;
  color: var(--clrTextTertiary);
  font-weight: 700;
}

._iconButton_ubiit_44 {
  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_ubiit_44 svg {
  width: 22px;
  height: 22px;
}

._accountShowcase_ubiit_61 {
  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_ubiit_71 {
  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_ubiit_71 h2 {
  margin: 0;
  font-size: 1.12rem;
}
._accountPanel_ubiit_71 p {
  margin: 4px 0 10px;
  color: var(--clrTextTertiary);
}

._avatar_ubiit_88 {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  color: var(--clrTextPrimaryReverse);
  font-size: 1.45rem;
  font-weight: 900;
  background: var(--clrPrimaryReverse);
  border-radius: 50%;
}

._tierCounts_ubiit_100 {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}
._tierCounts_ubiit_100 span {
  padding: 5px 8px;
  color: var(--clrTextSecondary);
  font-size: 0.78rem;
  font-weight: 700;
  background: var(--clrAccent-10);
  border-radius: 999px;
}

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

._showcaseHeader_ubiit_23 {
  color: var(--clrTextSecondary);
  font-size: 0.86rem;
  font-weight: 900;
  text-transform: uppercase;
}

._message_ubiit_127 {
  margin: 14px 0 0;
  padding: 10px 12px;
  color: var(--clrTextSecondary);
  background: var(--clrAccent-10);
  border-radius: 8px;
}

._toolbar_ubiit_22 {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 28px;
}
._toolbar_ubiit_22 h2 {
  margin: 0;
  font-size: 1.24rem;
}

._searchInput_ubiit_146 {
  width: 100%;
  height: 42px;
  padding: 0 12px;
  color: var(--clrTextPrimary);
  background: var(--clrSecondary);
  border: 1px solid var(--clrAccent-20);
  border-radius: 8px;
}

._grid_ubiit_156 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 330px), 1fr));
  gap: 14px;
  margin-top: 18px;
}

._skeletonCard_ubiit_163 {
  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_ubiit_1 1.4s infinite linear;
}

._emptyState_ubiit_171 {
  margin: 0;
  color: var(--clrTextTertiary);
}

._selectionList_ubiit_176 {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
._selectionList_ubiit_176 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_ubiit_176 img,
._selectionList_ubiit_176 span:first-child {
  width: 42px;
  height: 42px;
  object-fit: contain;
  background: var(--clrAccent-10);
  border-radius: 50%;
}

._clearButton_ubiit_204 {
  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_ubiit_1 {
  to {
    background-position: -220% 0;
  }
}
@media (max-width: 740px) {
  ._page_ubiit_14 {
    padding-top: 82px;
  }
  ._accountShowcase_ubiit_61 {
    grid-template-columns: 1fr;
  }
  ._accountPanel_ubiit_71 {
    padding-right: 0;
    padding-bottom: 14px;
    border-right: 0;
    border-bottom: 1px solid var(--clrAccent-10);
  }
}html {
  color-scheme: dark;
}

html:has(body._themeLight_1p00e_5),
html:has(body._themePastelLight_1p00e_6) {
  color-scheme: light;
}

:root {
  --clrPrimary: #F4F4F5;
  --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;
  --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_1p00e_5 {
  --clrPrimary: #F4F4F5;
  --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;
  --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_1p00e_125 {
  --clrPrimary: #0F1418;
  --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;
  --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-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_1p00e_206 {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 24px;
  background-color: var(--clrPrimary);
}

._errorContent_1p00e_215 {
  text-align: center;
  max-width: 400px;
}

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

._errorMessage_1p00e_227 {
  font-size: 14px;
  color: var(--clrTextSecondary);
  margin: 0 0 24px 0;
  line-height: 1.5;
}

._refreshButton_1p00e_234 {
  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_1p00e_234:hover {
  opacity: 0.9;
}
._refreshButton_1p00e_234: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;
}