/* Generated build file */

:root {
  --brand-background: var(--primary-300);
  --md: 768px;
  --unit-1: 0.25rem;
  --unit-2: 0.5rem;
  --unit-3: 0.75rem;
  --unit-4: 1rem;
  --unit-5: 1.25rem;
  --unit-6: 1.5rem;
  --unit-7: 1.75rem;
  --unit-8: 2rem;
  --unit-9: 2.25rem;
  --unit-10: 2.5rem;
  --unit-11: 2.75rem;
  --unit-12: 3rem;
  --unit-13: 3.25rem;
  --unit-14: 3.5rem;
  --unit-15: 3.75rem;
  --unit-16: 4rem;
  --unit-20: 5rem;
  --unit-24: 6rem;
  --unit-32: 8rem;
  --unit-40: 10rem;
  --unit-48: 12rem;
  --unit-56: 14rem;
  --unit-64: 16rem;
  --unit-72: 18rem;
  --unit-80: 20rem;
  --font-sans: 'PT Sans', sans-serif;
  --font-serif: 'PT Serif', serif;
  --font-mono: 'JetBrains Mono', monospace;
  --text-xxs: 0.6875rem;
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 1.875rem;
  --text-4xl: 2.25rem;
  --text-5xl: 3rem;
  --text-6xl: 3.75rem;
  --rounded-xs: 0.125rem;
  --rounded-sm: 0.25rem;
  --rounded-md: 0.375rem;
  --rounded-lg: 0.5rem;
  --rounded-xl: 0.75rem;
  --rounded-2xl: 1rem;
  --rounded-full: 9999px;
  --shade-50: rgba(0, 0, 0, 0.05);
  --shade-100: rgba(0, 0, 0, 0.1);
  --gray-000: #fff;
  --gray-100: #f1f5f9;
  --gray-200: #e2e8f0;
  --gray-300: #cbd5e1;
  --gray-400: #94a3b8;
  --gray-500: #64748b;
  --gray-600: #475569;
  --gray-700: #334155;
  --gray-800: #1e293b;
  --gray-900: #0f172a;
  --gray-1000: #000;
  --primary-100: #ede9fe;
  --primary-200: #ddd6fe;
  --primary-300: #c4b5fd;
  --primary-400: #a78bfa;
  --primary-500: #8b5cf6;
  --primary-600: #7c3aed;
  --primary-700: #6d28d9;
  --primary-800: #5b21b6;
  --primary-900: #4c1d95;
  --success-600: #16a34a;
  --warning-600: #ca8a04;
  --error-600: #dc2626;
  --red-500: #ef4444;
  --shadow-inset: rgba(0, 0, 0, 0.06) 0px 2px 4px 0px inset;
  --shadow-xl: rgba(0, 0, 0, 0.1) 0px 20px 25px -5px, rgba(0, 0, 0, 0.04) 0px 10px 10px -5px;
}


:root.dark {
  --shade-50: rgba(255, 255, 255, 0.1);
  --shade-100: rgba(255, 255, 255, 0.2);
  --gray-000: #000;
  --gray-100: #0f172a;
  --gray-200: #1e293b;
  --gray-300: #334155;
  --gray-400: #475569;
  --gray-500: #64748b;
  --gray-600: #94a3b8;
  --gray-700: #cbd5e1;
  --gray-800: #e2e8f0;
  --gray-900: #f1f5f9;
  --gray-1000: #fff;
  --primary-100: #4c1d95;
  --primary-200: #5b21b6;
  --primary-300: #6d28d9;
  --primary-400: #7c3aed;
  --primary-500: #8b5cf6;
  --primary-600: #a78bfa;
  --primary-700: #c4b5fd;
  --primary-800: #ddd6fe;
  --primary-900: #ede9fe;
}


.Interactive_root {
  /* general */
  opacity: 1;
  user-select: none;
  cursor: pointer;
  position: relative;
  transition-property: transform, opacity, color, background-color;
  transition-duration: 0.2s;
  color: var(--color);

  /* layout */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;

  /* size */
  height: calc((var(--size) + 2) * 0.5rem);
  min-width: calc((var(--size) + 2) * 0.5rem);
}

.Interactive_root.Interactive_filled {
  color: white;
}

.Interactive_root.Interactive_selected {
  background: var(--shade-50);
}

.Interactive_root:disabled {
  opacity: 0.5;
  cursor: default;
}

.Interactive_root:hover:not(:disabled) {
  background-color: var(--shade-50);
}

.Interactive_root:focus {
  outline: none;
}

:root[data-no-js] .Interactive_root:not([href]) {
  opacity: 0.5;
  cursor: not-allowed;
}

/** CONTENT **/

/* separate to place on top of the various layers */
.Interactive_content {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
}

/** RADIUS **/

.Interactive_root,
.Interactive_tint,
.Interactive_ring,
.Interactive_fill {
  border-radius: calc((var(--size) + 2) * 0.125rem);
}

.Interactive_root.Interactive_rounded,
.Interactive_root.Interactive_rounded > .Interactive_tint,
.Interactive_root.Interactive_rounded > .Interactive_ring,
.Interactive_root.Interactive_rounded > .Interactive_fill {
  border-radius: 9999px;
}

.Interactive_tint,
.Interactive_ring,
.Interactive_fill {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/** TINT **/

.Interactive_tint {
  background-color: var(--color);
  opacity: 0.1;
  transition-property: opacity, transform;
  transition-duration: 0.2s;
  transform: scale(1);
}

.Interactive_tint[hidden] {
  display: block;
  opacity: 0;
}

.Interactive_root:disabled > .Interactive_tint {
  opacity: 0.2;
}

:root[data-no-js] .Interactive_tint {
  opacity: 0.2;
}

/** RING **/

.Interactive_ring {
  border: 2px solid var(--primary-400);
  opacity: 0;
  transition: opacity 0.2s;
}

.Interactive_root:focus-visible:not(:active) > .Interactive_ring {
  opacity: 1;
}

/** FILL **/

.Interactive_fill {
  background-color: var(--color);
  transition-property: transform, background-color;
  transition-duration: 0.2s;
}

.Interactive_fill[hidden] {
  display: block;
  transform: scale(0);
}

/** Bouncy **/

.Interactive_root.Interactive_bouncy:hover:not(:disabled) {
  transform: scale(1.05);
}

.Interactive_root.Interactive_bouncy:active:not(:disabled) {
  transform: scale(0.95);
}

.Interactive_root.Interactive_bouncy:active:hover:not(:disabled) {
  transform: scale(0.95);
}

.Interactive_root.Interactive_bouncy > .Interactive_tint[hidden] {
  transform: scale(0);
}

.Interactive_root.Interactive_bouncy > .Interactive_fill[hidden] {
  transform: scale(0);
}

/** SQUISHY **/

.Interactive_root.Interactive_squishy:active {
  opacity: 0.5;
}

/** STRETCH **/

.Interactive_root.Interactive_stretch {
  width: 100%;
}

.Interactive_root.Interactive_stretch .Interactive_content {
  width: 100%;
}


.Popover_root {
  background-color: var(--gray-100);
  border-radius: var(--rounded-xl);
  position: fixed;
  transition-property: transform, opacity;
  transition-duration: 0.2s;
  width: var(--width);
  left: var(--left);
  top: var(--top);
  box-shadow: var(--shadow-xl);
}

.Popover_root[hidden] {
  display: block;
  pointer-events: none;
  opacity: 0;
  transform: translateY(-10px);
}


.Item_root {
  font-family: var(--font-sans);
  font-size: calc((var(--size) + 5) * 0.125rem);
}

.Item_icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: calc((var(--size) + 1) * 0.5rem);
  min-width: calc((var(--size) + 1) * 0.5rem);
  margin-left: calc(var(--size) * 0.25rem);
  margin-right: calc((var(--size) + 1) * 0.25rem);
}

.Item_middle {
  display: flex;
  flex: 1;
  align-items: center;
  margin-right: calc(var(--size) * 0.5rem);
}

.Item_right {
  display: flex;
  margin-right: calc(var(--size) * 0.25rem);
}


.Menu_menu {
  display: flex;
  flex-direction: column;
  gap: var(--unit-1);
  padding: var(--unit-1);
}

.Menu_divider {
  display: flex;
  width: 100%;
  height: 1px;
  background: var(--gray-200);
  border: none;
}


.User_root {
  width: 100%;
  font-size: var(--text-xl);
  color: var(--gray-700);
}

.User_header {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--unit-4);
  gap: var(--unit-2);
}

.User_root.User_wide .User_header {
  flex-direction: row;
  justify-content: flex-start;
  gap: var(--unit-4);
  font-size: var(--text-2xl);
}

.User_avatar {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  object-fit: cover;
}

.User_name {
  font-family: var(--font-sans);
  text-align: center;
}


.islands_User_opener {
  overflow: hidden;
  width: 40px;
  height: 40px;
}

.islands_User_openerAvatar {
  display: flex;
  object-fit: cover;
  width: 100%;
  height: 100%;
}


.routes_app_index_root {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--unit-8);
  position: absolute;
  inset: 0;
}

.routes_app_index_heading {
  font-size: 6rem;
  font-family: var(--font-sans);
  color: var(--gray-1000);
}

.routes_app_index_user {
  position: fixed;
  top: var(--unit-4);
  right: var(--unit-4);
}


.Background_root {
  width: 100%;
  height: 100%;
  pointer-events: none;
  background-color: var(--background-color);
  animation: Background_entry 0.5s ease-in-out;
  will-change: opacity;
}

@keyframes Background_entry {
  from {
    /* NOTE: If opacity is zero there is a half a second white flash when switching pages */
    opacity: 0.01;
  }
  to {
    opacity: 1;
  }
}


.Page_UtilityLayout_background {
  position: fixed;
  inset: 0;
}

.Page_UtilityLayout_overlay {
  position: fixed;
  inset: 0;
  left: 30%;
  animation: Page_UtilityLayout_entry 0.5s ease-in-out;
  background: var(--gray-100);
  box-shadow: var(--shadow-xl);
}

.Page_UtilityLayout_root {
  display: flex;
  position: absolute;
  inset: 0;
  left: 30%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  color: var(--gray-1000);
  font-family: var(--font-sans);
  animation: Page_UtilityLayout_entry 0.5s ease-in-out;
  will-change: opacity, left;
}

.Page_UtilityLayout_header, .Page_UtilityLayout_footer {
  height: var(--unit-32);
  align-items: center;
}

.Page_UtilityLayout_header, .Page_UtilityLayout_footer, .Page_UtilityLayout_main {
  display: flex;
  padding: 0 var(--unit-20);
}

.Page_UtilityLayout_main {
  flex-direction: column;
  max-width: 800px;
  align-items: flex-start;
  gap: var(--unit-4);
  font-size: var(--text-xl);
}

.Page_UtilityLayout_back {
  margin-left: calc(-1 * var(--unit-4));
}

.Page_UtilityLayout_backIcon {
  display: flex;
  font-size: var(--text-2xl);
}

.Page_UtilityLayout_backContent {
  display: flex;
  margin: 0 var(--unit-4);
  gap: var(--unit-6);
}

@keyframes Page_UtilityLayout_entry {
  from {
    left: 35%;
    opacity: 0.001;
  }
  to {
    left: 30%;
    opacity: 1;
  }
}

@media (max-width: 768px) {
  .Page_UtilityLayout_root {
    animation: none;
    left: var(--unit-2);
  }

  .Page_UtilityLayout_overlay {
    left: var(--unit-2);
    animation: none;
  }

  .Page_UtilityLayout_header, .Page_UtilityLayout_footer {
    height: var(--unit-24);
  }

  .Page_UtilityLayout_header, .Page_UtilityLayout_footer, .Page_UtilityLayout_main {
    padding: 0 var(--unit-10);
  }
}


.AnimatedText_char {
  font-family: "Major Mono Display", monospace;
  white-space: pre;
  position: relative;
  line-height: 1rem;
}

.AnimatedText_charFrom {
  animation: AnimatedText_showFirst var(--period) infinite steps(1, end);
  animation-delay: var(--delay);
}

.AnimatedText_charTo {
  position: absolute;
  left: 0;
  top: calc((1em - 1rem) / 2);
  text-transform: uppercase;
  pointer-events: none;
  user-select: none;
  animation: AnimatedText_showSecond var(--period) infinite steps(1, end);
  animation-delay: var(--delay);
}

@keyframes AnimatedText_showFirst {
  0%, 50% {
    color: inherit;
  }
  50%, 100% {
    color: transparent;
  }
}

@keyframes AnimatedText_showSecond {
  0%, 50% {
    color: transparent;
  }
  50%, 100% {
    color: inherit;
  }
}


.Button_root {
  font-family: var(--font-sans);
  font-size: calc((var(--size) + 2) * 0.25rem);
  gap: calc(var(--size) * 0.25rem);
}


.routes_index_root {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: absolute;
  inset: 0;
  color: var(--gray-1000);
}

.routes_index_background {
  position: fixed;
  inset: 0;
}

.routes_index_logo {
  font-size: 6rem;
}

.routes_index_tagline {
  font-size: var(--text-3xl);
  font-family: var(--font-sans);
  color: var(--gray-800);
}

.routes_index_raised {
  display: flex;
  padding: var(--unit-1);
  box-shadow: var(--shadow-xl);
  background: var(--gray-000);
}

.routes_index_cta {
  margin-top: var(--unit-8);
  border-radius: var(--rounded-full);
}

.routes_index_themeToggle {
  position: absolute;
  top: var(--unit-4);
  right: var(--unit-4);
  border-radius: var(--rounded-full);
}

@media only screen and (max-width: 768px) {
  .routes_index_logo {
    font-size: 3.4rem;
  }

  .routes_index_tagline {
    font-size: var(--text-xl);
  }
}


.routes_login_heading {
  font-size: var(--text-5xl);
  font-family: var(--font-serif);
}

.routes_login_button {
  margin-top: var(--unit-6);
}