[data-v-app] > .ui-root {
  position: relative;
  z-index: 0;
}

@layer components {
.ui-Avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
    width: var(--avatar-size);
    height: var(--avatar-size);
    flex-shrink: 0;
    border-radius: var(--avatar-border-radius);
    letter-spacing: var(--avatar-letter-spacing);
}
}
.ui-Avatar > img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: inherit;
}
.ui-Avatar > span {
  font-family: var(--default-font-family);
  font-weight: var(--font-weight-medium);
  font-style: normal;
  z-index: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  border-radius: inherit;
  text-transform: uppercase;
}
.ui-Avatar > :where(span.r-count-1) {
  font-size: var(--avatar-fallback-one-letter-font-size);
}
.ui-Avatar > :where(span.r-count-2) {
  font-size: var(--avatar-fallback-two-letters-font-size, var(--avatar-fallback-one-letter-font-size));
}
.ui-Avatar:where(.r-size-1) {
  --avatar-size: var(--space-5);
  --avatar-fallback-one-letter-font-size: var(--font-size-2);
  --avatar-fallback-two-letters-font-size: var(--font-size-1);
  --avatar-ring-width: 1px;
  --avatar-ring-offset: 1px;
  --avatar-border-radius: max(var(--radius-2), var(--radius-full));
  --avatar-letter-spacing: var(--letter-spacing-1);
}
.ui-Avatar:where(.r-size-2) {
  --avatar-size: var(--space-6);
  --avatar-fallback-one-letter-font-size: var(--font-size-3);
  --avatar-fallback-two-letters-font-size: var(--font-size-2);
  --avatar-ring-width: 2px;
  --avatar-ring-offset: 2px;
  --avatar-border-radius: max(var(--radius-2), var(--radius-full));
  --avatar-letter-spacing: var(--letter-spacing-2);
}
.ui-Avatar:where(.r-size-3) {
  --avatar-size: var(--space-7);
  --avatar-fallback-one-letter-font-size: var(--font-size-4);
  --avatar-fallback-two-letters-font-size: var(--font-size-3);
  --avatar-ring-width: 2px;
  --avatar-ring-offset: 2px;
  --avatar-border-radius: max(var(--radius-3), var(--radius-full));
  --avatar-letter-spacing: var(--letter-spacing-3);
}
.ui-Avatar:where(.r-size-4) {
  --avatar-size: var(--space-8);
  --avatar-fallback-one-letter-font-size: var(--font-size-5);
  --avatar-fallback-two-letters-font-size: var(--font-size-4);
  --avatar-ring-width: 2px;
  --avatar-ring-offset: 2px;
  --avatar-border-radius: max(var(--radius-3), var(--radius-full));
  --avatar-letter-spacing: var(--letter-spacing-4);
}
.ui-Avatar:where(.r-size-5) {
  --avatar-size: var(--space-9);
  --avatar-fallback-one-letter-font-size: var(--font-size-6);
  --avatar-ring-width: 3px;
  --avatar-ring-offset: 2px;
  --avatar-border-radius: max(var(--radius-4), var(--radius-full));
  --avatar-letter-spacing: var(--letter-spacing-6);
}
.ui-Avatar:where(.r-size-6) {
  --avatar-size: 80px;
  --avatar-fallback-one-letter-font-size: var(--font-size-7);
  --avatar-ring-width: 3px;
  --avatar-ring-offset: 3px;
  --avatar-border-radius: max(var(--radius-5), var(--radius-full));
  --avatar-letter-spacing: var(--letter-spacing-7);
}
.ui-Avatar:where(.r-size-7) {
  --avatar-size: 96px;
  --avatar-fallback-one-letter-font-size: var(--font-size-7);
  --avatar-ring-width: 3px;
  --avatar-ring-offset: 3px;
  --avatar-border-radius: max(var(--radius-5), var(--radius-full));
  --avatar-letter-spacing: var(--letter-spacing-7);
}
.ui-Avatar:where(.r-size-8) {
  --avatar-size: 128px;
  --avatar-fallback-one-letter-font-size: var(--font-size-8);
  --avatar-ring-width: 4px;
  --avatar-ring-offset: 3px;
  --avatar-border-radius: max(var(--radius-6), var(--radius-full));
  --avatar-letter-spacing: var(--letter-spacing-8);
}
.ui-Avatar:where(.r-size-9) {
  --avatar-size: 160px;
  --avatar-fallback-one-letter-font-size: var(--font-size-9);
  --avatar-ring-width: 4px;
  --avatar-ring-offset: 4px;
  --avatar-border-radius: max(var(--radius-6), var(--radius-full));
  --avatar-letter-spacing: var(--letter-spacing-9);
}
.ui-Avatar:where(.r-variant-ring) {
  outline-color: var(--accent-9);
  outline-width: var(--avatar-ring-width);
  outline-offset: var(--avatar-ring-offset);
  outline-style: solid;
}
.ui-Avatar:where(.r-variant-ring) > span,
.ui-Avatar:where(.r-variant-solid) > span {
  background-color: var(--accent-9);
  color: var(--accent-contrast);
}
.ui-Avatar:where(.r-variant-soft) > span {
  background-color: var(--accent-a3);
  color: var(--accent-a11);
}
.ui-Avatar:where(.r-variant-outline) > span {
  box-shadow: inset 0 0 1px var(--accent-a8);
  color: var(--accent-a11);
}
.ui-Avatar:where(.r-variant-surface) > span {
  background-color: var(--accent-surface);
  background-color: var(--accent-a3);
  color: var(--accent-a11);
  box-shadow: inset 0 0 1px var(--accent-a8);
}

@layer components {
.ui-Badge {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    font-weight: var(--font-weight-medium);
    font-style: normal;
    flex-shrink: 0;
    line-height: 1;
    height: -moz-fit-content;
    height: fit-content;
    width: -moz-fit-content;
    width: fit-content;
}
}
.ui-Badge:where(.r-size-1) {
  font-size: var(--font-size-1);
  line-height: var(--line-height-1);
  letter-spacing: var(--letter-spacing-1);
  padding: calc(var(--space-1) * 0.5) calc(var(--space-1) * 1.5);
  gap: calc(var(--space-1) * 1.5);
  border-radius: max(var(--radius-1), var(--radius-full));
}
.ui-Badge:where(.r-size-1):where([data-radius="full"]) {
  padding: calc(var(--space-1) * 0.5) var(--space-2);
}
.ui-Badge:where(.r-size-2) {
  font-size: var(--font-size-1);
  line-height: var(--line-height-1);
  letter-spacing: var(--letter-spacing-1);
  padding: var(--space-1) var(--space-2);
  gap: calc(var(--space-1) * 1.5);
  border-radius: max(var(--radius-2), var(--radius-full));
}
.ui-Badge:where(.r-size-2):where([data-radius="full"]) {
  padding: var(--space-1) calc(var(--space-2) * 1.25);
}
.ui-Badge:where(.r-size-3) {
  font-size: var(--font-size-2);
  line-height: var(--line-height-2);
  letter-spacing: var(--letter-spacing-2);
  padding: var(--space-1) calc(var(--space-2) * 1.25);
  gap: var(--space-2);
  border-radius: max(var(--radius-2), var(--radius-full));
}
.ui-Badge:where(.r-size-3):where([data-radius="full"]) {
  padding: var(--space-1) calc(var(--space-2) * 1.5);
}
.ui-Badge:where(.r-variant-solid) {
  background-color: var(--accent-9);
  color: var(--accent-contrast);
}
.ui-Badge:where(.r-variant-solid):where(.r-high-contrast) {
  background-color: var(--accent-12);
  color: var(--gray-1);
}
.ui-Badge:where(.r-variant-solid)::-moz-selection {
  background-color: var(--accent-7);
  color: var(--accent-12);
}
.ui-Badge:where(.r-variant-solid)::selection {
  background-color: var(--accent-7);
  color: var(--accent-12);
}
.ui-Badge:where(.r-variant-soft) {
  background-color: var(--accent-a3);
  color: var(--accent-a11);
}
.ui-Badge:where(.r-variant-soft):where(.r-high-contrast) {
  color: var(--accent-12);
}
.ui-Badge:where(.r-variant-surface) {
  background-color: var(--accent-surface);
  box-shadow: inset 0 0 0 1px var(--accent-a6);
  color: var(--accent-a11);
}
.ui-Badge:where(.r-variant-surface):where(.r-high-contrast) {
  color: var(--accent-12);
}
.ui-Badge:where(.r-variant-outline) {
  box-shadow: inset 0 0 0 1px var(--accent-a8);
  color: var(--accent-a11);
}
.ui-Badge:where(.r-variant-outline):where(.r-high-contrast) {
  box-shadow: inset 0 0 0 1px var(--accent-a7), inset 0 0 0 1px var(--gray-a11);
  color: var(--accent-12);
}

.ui-Card:where(.r-size-1) {
  --card-padding: var(--space-3);
  --card-border-radius: max(var(--radius-4), var(--radius-full));
}
.ui-Card:where(.r-size-2) {
  --card-padding: var(--space-4);
  --card-border-radius: max(var(--radius-4), var(--radius-full));
}
.ui-Card:where(.r-size-3) {
  --card-padding: var(--space-5);
  --card-border-radius: max(var(--radius-5), var(--radius-full));
}
.ui-Card:where(.r-size-4) {
  --card-padding: var(--space-6);
  --card-border-radius: max(var(--radius-5), var(--radius-full));
}
.ui-Card:where(.r-size-5) {
  --card-padding: var(--space-8);
  --card-border-radius: max(var(--radius-6), var(--radius-full));
}
.ui-Card:where(.r-variant-soft) {
  border-color: var(--gray-2);
  background-color: var(--gray-2);
}
.ui-Card:where(.r-variant-soft):where(:-moz-any-link, button, label):where(:hover) {
  border-color: var(--gray-a5);
}
.ui-Card:where(.r-variant-soft):where(:any-link, button, label):where(:hover) {
  border-color: var(--gray-a5);
}
@layer components {
.ui-Button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
    vertical-align: top;
    font-style: normal;
    font-weight: var(--button-font-weight);
    text-align: center;
    white-space: nowrap;
    height: var(--button-height);
    padding-left: var(--button-padding-x);
    padding-right: var(--button-padding-x);
    gap: var(--button-gap);
    font-size: var(--button-font-size);
    line-height: var(--button-line-height);
    letter-spacing: var(--button-letter-spacing);
    border-radius: var(--button-radius);
}
}
.ui-Button:where(.r-variant-ghost) {
  --button-font-weight: var(--font-weight-regular);
}
.ui-Button:where(:not(.r-variant-ghost)) {
  --button-font-weight: var(--font-weight-medium);
}
.ui-Button:where(:disabled, [data-disabled]) {
  cursor: not-allowed;
}
.ui-Button:where(.r-size-1) {
  --button-gap: var(--space-1);
  --button-font-size: var(--font-size-1);
  --button-line-height: var(--line-height-1);
  --button-letter-spacing: var(--letter-spacing-1);
  --button-radius: max(var(--radius-1), var(--radius-full));
  --button-height: var(--space-5);
  --button-padding-x: var(--space-2);
}
.ui-Button:where(.r-size-1):where(.r-variant-ghost) {
  --button-ghost-padding-y: var(--space-1);
}
.ui-Button:where(.r-size-2) {
  --button-gap: var(--space-2);
  --button-font-size: var(--font-size-2);
  --button-line-height: var(--line-height-2);
  --button-letter-spacing: var(--letter-spacing-2);
  --button-radius: max(var(--radius-2), var(--radius-full));
  --button-height: var(--space-6);
  --button-padding-x: var(--space-3);
}
.ui-Button:where(.r-size-2):where(.r-variant-ghost) {
  --button-gap: var(--space-1);
  --button-padding-x: var(--space-2);
  --button-ghost-padding-y: var(--space-1);
}
.ui-Button:where(.r-size-3) {
  --button-gap: var(--space-3);
  --button-font-size: var(--font-size-3);
  --button-line-height: var(--line-height-3);
  --button-letter-spacing: var(--letter-spacing-3);
  --button-radius: max(var(--radius-3), var(--radius-full));
  --button-height: var(--space-7);
  --button-padding-x: var(--space-4);
}
.ui-Button:where(.r-size-3):where(.r-variant-ghost) {
  --button-gap: var(--space-2);
  --button-padding-x: var(--space-3);
  --button-ghost-padding-y: calc(var(--space-1) * 1.5);
}
.ui-Button:where(.r-size-4) {
  --button-gap: var(--space-3);
  --button-font-size: var(--font-size-4);
  --button-line-height: var(--line-height-4);
  --button-letter-spacing: var(--letter-spacing-4);
  --button-radius: max(var(--radius-4), var(--radius-full));
  --button-height: var(--space-8);
  --button-padding-x: var(--space-5);
}
.ui-Button:where(.r-size-4):where(.r-variant-ghost) {
  --button-gap: var(--space-2);
  --button-padding-x: var(--space-4);
  --button-ghost-padding-y: var(--space-2);
}

/* solid */
.ui-root {
  --button-solid-active-filter: brightness(0.92) saturate(1.1);
  --button-solid-high-contrast-hover-filter: contrast(0.88) saturate(1.1) brightness(1.1);
}
:is(.dark, .dark-theme) .ui-root {
  --button-solid-active-filter: brightness(1.08);
  --button-solid-high-contrast-hover-filter: contrast(0.88) saturate(1.3) brightness(1.18);
}
.ui-Button:where(.r-variant-solid) {
  background-color: var(--accent-9);
  color: var(--accent-contrast);
}
@media (hover: hover) {
.ui-Button:where(.r-variant-solid):where(:hover) {
    background-color: var(--accent-10);
}
}
.ui-Button:where(.r-variant-solid):where(:focus-visible) {
  outline: 2px solid var(--focus-8);
  outline-offset: 2px;
}
.ui-Button:where(.r-variant-solid):where(:active) {
  background-color: var(--accent-10);
  filter: var(--button-solid-active-filter);
}
.ui-Button:where(.r-variant-solid):where(.r-high-contrast) {
  background-color: var(--accent-12);
  color: var(--gray-1);
}
@media (hover: hover) {
.ui-Button:where(.r-variant-solid):where(.r-high-contrast:hover) {
    background-color: var(--accent-12);
    filter: var(--button-solid-high-contrast-hover-filter);
}
}
.ui-Button:where(.r-variant-solid):where(:disabled, [data-disabled]) {
  color: var(--gray-a8);
  background-color: var(--gray-a3);
  outline: none;
  filter: none;
}

/* soft / ghost */
.ui-Button:where(.r-variant-soft, .r-variant-ghost) {
  color: var(--accent-a11);
}
.ui-Button:where(.r-variant-soft, .r-variant-ghost):where(.r-high-contrast) {
  color: var(--accent-12);
}
.ui-Button:where(.r-variant-soft) {
  background-color: var(--accent-a3);
}
@media (hover: hover) {
.ui-Button:where(.r-variant-soft):where(:hover) {
    background-color: var(--accent-a4);
}
}
.ui-Button:where(.r-variant-soft):where(:focus-visible) {
  outline: 2px solid var(--accent-8);
  outline-offset: -1px;
}
.ui-Button:where(.r-variant-soft):where(:active) {
  background-color: var(--accent-a5);
}
.ui-Button:where(.r-variant-soft):where(:disabled, [data-disabled]) {
  color: var(--gray-a8);
  background-color: var(--gray-a3);
}
.ui-Button:where(.r-variant-ghost) {
  padding: var(--button-ghost-padding-y) var(--button-padding-x);
}
@media (hover: hover) {
.ui-Button:where(.r-variant-ghost):where(:hover) {
    background-color: var(--accent-a3);
}
}
.ui-Button:where(.r-variant-ghost):where(:focus-visible) {
  outline: 2px solid var(--focus-8);
  outline-offset: -1px;
}
.ui-Button:where(.r-variant-ghost):where(:active) {
  background-color: var(--accent-a4);
}
.ui-Button:where(.r-variant-ghost):where(:disabled, [data-disabled]) {
  color: var(--gray-a8);
  background-color: transparent;
}

/* classic */
.ui-Button:where(.r-variant-classic) {
  box-shadow: var(--shadow-2);
  background-color: var(--color-background);
}
.ui-Button:where(.r-variant-classic):where(.r-high-contrast) {
  color: var(--gray-12);
  box-shadow: 0 0 0 1px var(--gray-a6), 0 1px 1px 0 var(--black-a4), 0 2px 1px -1px var(--black-a2), 0 1px 3px 0 var(--black-a1);
}
@media (hover: hover) {
.ui-Button:where(.r-variant-classic):where(:hover) {
    color: var(--accent-a11);
    background-color: var(--gray-a2);
}
.ui-Button:where(.r-variant-classic):where(.r-high-contrast):where(:hover) {
    color: var(--accent-12);
}
}
.ui-Button:where(.r-variant-classic):where(:focus-visible) {
  outline: 2px solid var(--focus-8);
  outline-offset: 2px;
}
.ui-Button:where(.r-variant-classic):where(:active:not(:disabled, [data-disabled])) {
  box-shadow: var(--shadow-1);
}
.ui-Button:where(.r-variant-classic):where(:disabled, [data-disabled]) {
  color: var(--gray-a10);
  background-color: var(--gray-a2);
}

/* outline */
.ui-Button:where(.r-variant-outline) {
  box-shadow: inset 0 0 0 1px var(--accent-a8);
  color: var(--accent-a11);
}
@media (hover: hover) {
.ui-Button:where(.r-variant-outline):where(:hover) {
    background-color: var(--accent-a2);
}
}
.ui-Button:where(.r-variant-outline):where(:focus-visible) {
  outline: 2px solid var(--focus-8);
  outline-offset: -1px;
}
.ui-Button:where(.r-variant-outline):where(.r-high-contrast) {
  box-shadow: inset 0 0 0 1px var(--accent-a7), inset 0 0 0 1px var(--gray-a11);
  color: var(--accent-12);
}
.ui-Button:where(.r-variant-outline):where(:active) {
  background-color: var(--accent-a4);
}
.ui-Button:where(.r-variant-outline):where(:disabled, [data-disabled]) {
  color: var(--gray-a8);
  box-shadow: inset 0 0 0 1px var(--gray-a7);
  background-color: transparent;
}

/* surface */
.ui-Button:where(.r-variant-surface) {
  background-color: var(--accent-surface);
  box-shadow: inset 0 0 0 1px var(--accent-a7);
  color: var(--accent-a11);
}
@media (hover: hover) {
.ui-Button:where(.r-variant-surface):where(:hover) {
    box-shadow: inset 0 0 0 1px var(--accent-a8);
}
}
.ui-Button:where(.r-variant-surface):where(:focus-visible) {
  outline: 2px solid var(--focus-8);
  outline-offset: -1px;
}
.ui-Button:where(.r-variant-surface):where(.r-high-contrast) {
  color: var(--accent-12);
}
.ui-Button:where(.r-variant-surface):where(:active) {
  background-color: var(--accent-a4);
}
.ui-Button:where(.r-variant-surface):where(:disabled, [data-disabled]) {
  color: var(--gray-a8);
  box-shadow: inset 0 0 0 1px var(--gray-a6);
  background-color: var(--gray-a2);
}

.ui-Button.ui-IconButton {
  height: var(--button-height);
  width: var(--button-height);
  padding: 0;
}

.ui-Button.ui-CloseButton {
  height: var(--button-height);
  width: var(--button-height);
  padding: 0;
}

.ui-root {
  --scrollarea-scrollbar-horizontal-margin-top: var(--space-1);
  --scrollarea-scrollbar-horizontal-margin-bottom: var(--space-1);
  --scrollarea-scrollbar-horizontal-margin-left: var(--space-1);
  --scrollarea-scrollbar-horizontal-margin-right: var(--space-1);
  --scrollarea-scrollbar-vertical-margin-top: var(--space-1);
  --scrollarea-scrollbar-vertical-margin-bottom: var(--space-1);
  --scrollarea-scrollbar-vertical-margin-left: var(--space-1);
  --scrollarea-scrollbar-vertical-margin-right: var(--space-1);
}
@layer components {
.ui-ScrollArea {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    width: 100%;
    height: 100%;
}
}
.ui-ScrollAreaViewport {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
}
.ui-ScrollAreaViewport > div {
  display: block;
  min-width: -moz-fit-content;
  min-width: fit-content;
  width: 100%;
  flex-grow: 1;
}
.ui-ScrollAreaViewport:where(:focus-visible) + :where(.ui-ScrollAreaViewportFocusRing) {
  position: absolute;
  inset: 0;
  pointer-events: none;
  outline: 2px solid var(--focus-8);
  outline-offset: -2px;
}
.ui-ScrollAreaViewport:where(:has(.ui-ScrollAreaScrollbar[data-orientation='horizontal'])) {
  overscroll-behavior-x: contain;
}
.ui-ScrollAreaScrollbar {
  display: flex;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  touch-action: none;
}
.ui-ScrollAreaScrollbar:where([data-orientation='vertical']) {
  flex-direction: column;
  width: var(--scrollarea-scrollbar-size);
}
.ui-ScrollAreaScrollbar:where([data-orientation='horizontal']) {
  flex-direction: row;
  height: var(--scrollarea-scrollbar-size);
}
.ui-ScrollAreaThumb {
  position: relative;
}
.ui-ScrollAreaThumb::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  min-width: var(--space-4);
  min-height: var(--space-4);
}
.ui-ScrollAreaScrollbar:where([data-size="1"]) {
  --scrollarea-scrollbar-size: var(--space-1);
  --scrollarea-scrollbar-border-radius: max(var(--radius-1), var(--radius-full));
}
.ui-ScrollAreaScrollbar:where([data-size="2"]) {
  --scrollarea-scrollbar-size: var(--space-2);
  --scrollarea-scrollbar-border-radius: max(var(--radius-1), var(--radius-full));
}
.ui-ScrollAreaScrollbar:where([data-size="3"]) {
  --scrollarea-scrollbar-size: var(--space-3);
  --scrollarea-scrollbar-border-radius: max(var(--radius-1), var(--radius-full));
}
.ui-ScrollAreaScrollbar {
  background-color: var(--gray-a3);
  border-radius: var(--scrollarea-scrollbar-border-radius);
  animation-duration: 120ms;
  animation-timing-function: ease-out;
}
.ui-ScrollAreaScrollbar:where([data-state='visible']) {
  animation-name: ui-fade-in;
}
.ui-ScrollAreaScrollbar:where([data-state='hidden']) {
  animation-name: ui-fade-out;
}
.ui-ScrollAreaScrollbar:where([data-orientation='horizontal']) {
  margin-top: var(--scrollarea-scrollbar-horizontal-margin-top);
  margin-bottom: var(--scrollarea-scrollbar-horizontal-margin-bottom);
  margin-left: var(--scrollarea-scrollbar-horizontal-margin-left);
  margin-right: var(--scrollarea-scrollbar-horizontal-margin-right);
}
.ui-ScrollAreaScrollbar:where([data-orientation='vertical']) {
  margin-top: var(--scrollarea-scrollbar-vertical-margin-top);
  margin-bottom: var(--scrollarea-scrollbar-vertical-margin-bottom);
  margin-left: var(--scrollarea-scrollbar-vertical-margin-left);
  margin-right: var(--scrollarea-scrollbar-vertical-margin-right);
}
.ui-ScrollAreaThumb {
  background-color: var(--gray-a8);
  border-radius: inherit;
  transition: background-color 100ms;
}
.ui-ScrollAreaThumb:hover {
  background-color: var(--gray-a9);
}

.ui-Tooltip {
  box-sizing: border-box;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-2);
  transform-origin: var(--reka-tooltip-content-transform-origin);
  animation-duration: 140ms;
  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
  background-color: var(--accent-11);
}
@media (prefers-reduced-motion: no-preference) {
.ui-Tooltip:where([data-state='delayed-open']):where([data-side='top']) {
    animation-name: ui-slide-from-top, ui-fade-in;
}
.ui-Tooltip:where([data-state='delayed-open']):where([data-side='bottom']) {
    animation-name: ui-slide-from-bottom, ui-fade-in;
}
.ui-Tooltip:where([data-state='delayed-open']):where([data-side='left']) {
    animation-name: ui-slide-from-left, ui-fade-in;
}
.ui-Tooltip:where([data-state='delayed-open']):where([data-side='right']) {
    animation-name: ui-slide-from-right, ui-fade-in;
}
}
.ui-TooltipText {
  color: var(--gray-1);
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  cursor: default;
  font-size: var(--font-size-1);
  line-height: var(--line-height-1);
  letter-spacing: var(--letter-spacing-1);
}
.ui-TooltipArrow {
  fill: var(--accent-11);
}

/* special handle for gray color */
.ui-Tooltip:where([data-accent-color="gray"]) {
  background-color: var(--gray-12);
}
.ui-Tooltip:where([data-accent-color="gray"]) :where(.ui-TooltipArrow) {
  fill: var(--gray-12);
}

@layer components {
.ui-DialogCloseButton {
    position: absolute;
    top: calc(var(--dialog-popup-padding) / 2);
    right: calc(var(--dialog-popup-padding) / 2);
}
}

.ui-DialogTitle {
  font-size: var(--font-size-4);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-4);
}

.ui-DialogDescription {
  font-size: var(--font-size-3);
  line-height: var(--line-height-2);
  color: var(--gray-11);
}
.ui-DialogTitle + .ui-DialogDescription {
  margin-top: var(--space-2);
}
.ui-DialogOverlay {
  position: fixed;
  inset: 0;
}
.ui-DialogOverlay::before {
  position: fixed;
  content: '';
  inset: 0;
  background-color: var(--color-overlay);
}
.ui-DialogWrapper {
  display: flex;
  overflow: hidden;
  position: absolute;
  inset: 0;
}
.ui-DialogContainer {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  align-items: center;
  justify-content: flex-end;
  width: 100%;
  box-sizing: border-box;
  padding-top: var(--space-6);
}
@layer components {
.ui-DialogPopup {
    width: 100%;
    max-height: calc(100vh - var(--space-6) * 2);
    position: relative;
    box-sizing: border-box;
    overflow: auto;
    text-align: left;
    box-sizing: border-box;
    background-color: var(--color-panel-solid);
    outline: none;
    border-top-left-radius: var(--dialog-popup-radius);
    border-top-right-radius: var(--dialog-popup-radius);
    max-width: var(--dialog-popup-max-width);
    max-height: var(--dialog-popup-max-height);
    padding: var(--dialog-popup-padding);
}
}
.ui-DialogPopup:where(.r-size-1) {
  --dialog-popup-padding: var(--space-4);
  --dialog-popup-radius: var(--radius-4);
  --dialog-popup-max-width: 450px;
  --dialog-popup-max-height: calc(100vh - 100px);
}
.ui-DialogPopup:where(.r-size-2) {
  --dialog-popup-padding: var(--space-4);
  --dialog-popup-radius: var(--radius-4);
  --dialog-popup-max-width: 600px;
  --dialog-popup-max-height: calc(100vh - 100px);
}
.ui-DialogPopup:where(.r-size-3) {
  --dialog-popup-padding: var(--space-5);
  --dialog-popup-radius: var(--radius-5);
  --dialog-popup-max-width: 860px;
  --dialog-popup-max-height: calc(100vh - 100px);
}
.ui-DialogPopup:where(.r-size-4) {
  --dialog-popup-padding: var(--space-5);
  --dialog-popup-radius: var(--radius-5);
  --dialog-popup-max-width: 1200px;
  --dialog-popup-max-height: calc(100vh - 100px);
}
.ui-DialogPopup:where(.r-size-5) {
  --dialog-popup-padding: var(--space-6);
  --dialog-popup-radius: var(--radius-5);
  --dialog-popup-max-width: none;
  --dialog-popup-max-height: calc(100vh - 64px);
}
@media (min-width: 450px) {
.ui-DialogContainer {
    justify-content: center;
    padding-bottom: max(var(--space-6), 6vh);
    padding-left: var(--space-4);
    padding-right: var(--space-4);
}
@layer components {
.ui-DialogPopup {
      box-shadow: var(--shadow-6);
      border-bottom-left-radius: var(--dialog-popup-radius);
      border-bottom-right-radius: var(--dialog-popup-radius);
}
}
}
@media (prefers-reduced-motion: no-preference) {
@keyframes ui-dialog-overlay-no-op {
from {
      opacity: 1;
}
to {
      opacity: 1;
}
}
@keyframes ui-dialog-content-show {
from {
      opacity: 0.1;
      transform: translate3d(0, var(--space-6), 0);
}
to {
      opacity: 1;
      transform: translate3d(0, 0, 0);
}
}
@keyframes ui-dialog-content-hide {
from {
      opacity: 1;
      transform: translate3d(0, 0, 0);
}
to {
      opacity: 1;
      transform: translate3d(0, var(--space-5), 0);
}
}
.ui-DialogOverlay[data-state='closed'] {
    animation: ui-dialog-overlay-no-op 160ms cubic-bezier(0.16, 1, 0.3, 1);
}
.ui-DialogOverlay[data-state='open']::before {
    animation: ui-fade-in 200ms cubic-bezier(0.16, 1, 0.3, 1);
}
.ui-DialogOverlay[data-state='closed']::before {
    animation: ui-fade-out 160ms cubic-bezier(0.16, 1, 0.3, 1);
}
.ui-DialogPopup:where([data-state="open"]) {
    animation: ui-dialog-content-show 200ms cubic-bezier(0.16, 1, 0.3, 1);
}
.ui-DialogPopup:where([data-state="closed"]) {
    animation: ui-dialog-content-hide 100ms linear;
}
}

.ui-AlertPopup {
  --dialog-popup-radius: var(--radius-4);
  --dialog-popup-max-width: 450px;
}
@media (prefers-reduced-motion: no-preference) {
.ui-PopperContent {
    animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}
.ui-PopperContent:where([data-state='open']) {
    animation-duration: 160ms;
}
.ui-PopperContent:where([data-state='open']):where([data-side='top']) {
    animation-name: ui-slide-from-top, ui-fade-in;
}
.ui-PopperContent:where([data-state='open']):where([data-side='bottom']) {
    animation-name: ui-slide-from-bottom, ui-fade-in;
}
.ui-PopperContent:where([data-state='open']):where([data-side='left']) {
    animation-name: ui-slide-from-left, ui-fade-in;
}
.ui-PopperContent:where([data-state='open']):where([data-side='right']) {
    animation-name: ui-slide-from-right, ui-fade-in;
}
.ui-PopperContent:where([data-state='closed']) {
    animation-duration: 100ms;
}
.ui-PopperContent:where([data-state='closed']):where([data-side='top']) {
    animation-name: ui-slide-from-top, ui-fade-out;
}
.ui-PopperContent:where([data-state='closed']):where([data-side='bottom']) {
    animation-name: ui-slide-from-bottom, ui-fade-out;
}
.ui-PopperContent:where([data-state='closed']):where([data-side='left']) {
    animation-name: ui-slide-from-left, ui-fade-out;
}
.ui-PopperContent:where([data-state='closed']):where([data-side='right']) {
    animation-name: ui-slide-from-right, ui-fade-out;
}
}

.ui-MenuContent {
  --scrollarea-scrollbar-vertical-margin-top: var(--menu-content-padding);
  --scrollarea-scrollbar-vertical-margin-bottom: var(--menu-content-padding);
  --scrollarea-scrollbar-horizontal-margin-left: var(--menu-content-padding);
  --scrollarea-scrollbar-horizontal-margin-right: var(--menu-content-padding);

  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  overflow: hidden;
  border-radius: var(--menu-content-border-radius);
  box-shadow: var(--shadow-5);
  background-color: var(--color-panel-solid);
}
.ui-MenuViewport {
  flex: 1 1 0%;
  display: flex;
  flex-direction: column;
  overflow: auto;
  padding: var(--menu-content-padding);
  box-sizing: border-box;
}
:where(.ui-MenuContent:has(.rt-ScrollAreaScrollbar[data-orientation='vertical'])) .ui-MenuViewport {
  padding-right: var(--space-3);
}
.ui-MenuContent:where(.r-size-1) {
  --menu-content-padding: var(--space-1);
  --menu-content-border-radius: var(--radius-3);

  --menu-item-padding-left: calc(var(--space-5) / 1.2);
  --menu-item-padding-right: var(--space-2);
  --menu-item-height: var(--space-5);
  --menu-item-font-size: var(--font-size-1);
  --menu-item-line-height: var(--line-height-1);
  --menu-item-letter-spacing: var(--letter-spacing-1);
  --menu-item-border-radius: var(--radius-1);
}
.ui-MenuContent:where(.r-size-2) {
  --menu-content-padding: var(--space-2);
  --menu-content-border-radius: var(--radius-4);

  --menu-item-padding-left: var(--space-3);
  --menu-item-padding-right: var(--space-3);
  --menu-item-height: var(--space-6);
  --menu-item-font-size: var(--font-size-2);
  --menu-item-line-height: var(--line-height-2);
  --menu-item-letter-spacing: var(--letter-spacing-2);
  --menu-item-border-radius: var(--radius-2);
}
.ui-MenuContent:where(.r-variant-solid) {
  --menu-item-highlighted-background-color: var(--accent-9);
  --menu-item-highlighted-text-color: var(--accent-contrast);
}
.ui-MenuContent:where(.r-variant-solid.r-high-contrast) {
  --menu-item-highlighted-background-color: var(--accent-12);
  --menu-item-highlighted-text-color: var(--accent-1);
}
.ui-MenuContent:where(.r-variant-soft) {
  --menu-item-highlighted-background-color: var(--accent-a4);
  --menu-item-highlighted-text-color: var(--accent-a11);
}

.ui-MenuItem {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  height: var(--menu-item-height);
  padding-left: var(--menu-item-padding-left);
  padding-right: var(--menu-item-padding-right);
  box-sizing: border-box;
  position: relative;
  outline: none;
  scroll-margin: var(--menu-content-padding) 0;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  cursor: default;
  color: var(--gray-12);
  font-size: var(--menu-item-font-size);
  line-height: var(--menu-item-line-height);
  letter-spacing: var(--menu-item-letter-spacing);
  border-radius: var(--menu-item-border-radius);
}
.ui-MenuShortcut {
  display: flex;
  align-items: center;
  margin-left: auto;
  padding-left: var(--space-4);
  color: var(--gray-a11);
}
.ui-MenuItem:where([data-accent-color]) {
  color: var(--accent-a11);
}
.ui-MenuItem:where([data-disabled]) {
  color: var(--gray-a8);
}
.ui-MenuItem:where([data-highlighted]) {
  background-color: var(--menu-item-highlighted-background-color);
  color: var(--menu-item-highlighted-text-color);
}
.ui-MenuItem:where([data-disabled], [data-highlighted]) :where(.ui-MenuShortcut) {
  color: inherit;
}

.ui-DropdownMenuSeparator {
  height: 1px;
  margin-top: var(--space-2);
  margin-bottom: var(--space-2);
  margin-left: var(--menu-item-padding-left);
  margin-right: var(--menu-item-padding-right);
  background-color: var(--gray-a6);
}

@layer components {
.ui-PopoverPopup {
    background-color: var(--color-panel-solid);
    box-shadow: var(--shadow-5);
    min-width: var(--reka-popover-trigger-width);
    max-width: var(--reka-popover-content-available-width);
    outline: 0;
    overflow: auto;
    position: relative;
    box-sizing: border-box;
    transform-origin: var(--reka-popover-content-transform-origin);
    padding: var(--popover-popup-padding);
}
}
.ui-PopoverPopup:where(.r-size-1) {
  border-radius: var(--radius-4);
  --popover-popup-padding: var(--space-2);
}
.ui-PopoverPopup:where(.r-size-2) {
  border-radius: var(--radius-5);
  --popover-popup-padding: var(--space-4);
}

.ui-NavigationMenuRoot {
  position: relative;
  z-index: 1;
}
.ui-NavigationMenuViewport {
  position: absolute;
  margin-top: 10px;
  top: 100%;
  left: var(--reka-navigation-menu-viewport-left);
  height: var(--reka-navigation-menu-viewport-height);
  background-color: white;
  border-radius: var(--radius-4);
  overflow: hidden;
  box-shadow: var(--shadow-3);
  width: 100%;
  max-width: var(--reka-navigation-menu-viewport-width);
  transition: width, height, 300ms ease;
  transform-origin: top center;
}
.ui-NavigationMenuViewport:where([data-state="open"]) {
  animation: navigation-menu-viewport-scale-in 200ms ease;
}
.ui-NavigationMenuViewport:where([data-state="closed"]) {
  animation: navigation-menu-viewport-scale-out 200ms ease;
}
@keyframes navigation-menu-viewport-scale-in {
from {
    opacity: 0;
    transform: rotateX(-30deg) scale(0.9);
}
to {
    opacity: 1;
    transform: rotateX(0deg) scale(1);
}
}
@keyframes navigation-menu-viewport-scale-out {
from {
    opacity: 1;
    transform: rotateX(0deg) scale(1);
}
to {
    opacity: 0;
    transform: rotateX(-10deg) scale(0.95);
}
}

@layer components {
.ui-NavigationMenuList {
    display: flex;
    gap: var(--navigation-menu-gap);
}
}
.ui-NavigationMenuList:where(.r-size-1) {
  --navigation-menu-gap: calc(var(--space-1) / 2);
  --navigation-menu-height: var(--space-5);
  --navigation-menu-padding-x: var(--space-2);
  --navigation-menu-font-size: var(--font-size-1);
  --navigation-menu-line-height: var(--line-height-1);
  --navigation-menu-letter-spacing: var(--letter-spacing-1);
  --navigation-menu-radius: max(var(--radius-1), var(--radius-full));
}
.ui-NavigationMenuList:where(.r-size-2) {
  --navigation-menu-gap: var(--space-1);
  --navigation-menu-height: var(--space-6);
  --navigation-menu-padding-x: var(--space-3);
  --navigation-menu-font-size: var(--font-size-2);
  --navigation-menu-line-height: var(--line-height-2);
  --navigation-menu-letter-spacing: var(--letter-spacing-2);
  --navigation-menu-radius: max(var(--radius-2), var(--radius-full));
}
.ui-NavigationMenuList:where(.r-size-3) {
  --navigation-menu-gap: calc(var(--space-1) * 1.5);
  --navigation-menu-height: var(--space-7);
  --navigation-menu-padding-x: var(--space-4);
  --navigation-menu-font-size: var(--font-size-3);
  --navigation-menu-line-height: var(--line-height-3);
  --navigation-menu-letter-spacing: var(--letter-spacing-3);
  --navigation-menu-radius: max(var(--radius-3), var(--radius-full));
}
.ui-NavigationMenuIndicator {
  position: absolute;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  height: 10px;
  top: 100%;
  overflow: hidden;
  z-index: 1;
  transition: width, transform 250ms ease;
  width: var(--reka-navigation-menu-indicator-size);
  transform: translateX(var(--reka-navigation-menu-indicator-position));
}
.ui-NavigationMenuIndicator:where([data-state="visible"]) {
  animation: ui-fade-in 200ms ease;
}
.ui-NavigationMenuIndicator:where([data-state="hidden"]) {
  animation: ui-fade-out 200ms ease;
}
.ui-NavigationMenuIndicator:before {
  content: '';
  position: relative;
  top: 70%;
  background-color: var(--color-panel-solid);
  border: 1px solid var(--gray-a4);
  width: 10px;
  height: 10px;
  transform: rotate(45deg);
  border-top-left-radius: 2px;
}
@layer components {
.ui-NavigationMenuTrigger,
  .ui-NavigationMenuLink {
    display: inline-flex;
    gap: var(--space-1);
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
    vertical-align: top;
    font-style: normal;
    text-align: center;
    white-space: nowrap;
    font-weight: var(--font-weight-medium);
    height: var(--navigation-menu-height);
    padding-left: var(--navigation-menu-padding-x);
    padding-right: var(--navigation-menu-padding-x);
    font-size: var(--navigation-menu-font-size);
    line-height: var(--navigation-menu-line-height);
    letter-spacing: var(--navigation-menu-letter-spacing);
    border-radius: var(--navigation-menu-radius);
}
.ui-NavigationMenuTrigger:where(:hover),
  .ui-NavigationMenuLink:where(:hover) {
    background-color: var(--accent-a2);
}
}

.ui-NavigationMenuTriggerArrow {
  transform: rotate(0deg);
  transition: transform 250ms ease;
}
:where(.ui-NavigationMenuTrigger[data-state="open"]) .ui-NavigationMenuTriggerArrow {
  transform: rotate(-180deg);
}

@layer components {
.ui-NavigationMenuContent {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    animation: var(--navigation-menu-content-animation);
}
}
.ui-NavigationMenuContent:where([data-motion="from-start"]) {
  --navigation-menu-content-animation: enterFromLeft 250ms ease;
}
.ui-NavigationMenuContent:where([data-motion="to-start"]) {
  --navigation-menu-content-animation: exitToLeft 250ms ease;
}
.ui-NavigationMenuContent:where([data-motion="from-end"]) {
  --navigation-menu-content-animation: enterFromRight 250ms ease;
}
.ui-NavigationMenuContent:where([data-motion="to-end"]) {
  --navigation-menu-content-animation: exitToRight 250ms ease;
}

.ui-root {
  --switch-disabled-blend-mode: multiply;
  --switch-high-contrast-checked-color-overlay: var(--black-a8);
  --switch-high-contrast-checked-active-before-filter: contrast(0.82) saturate(1.2) brightness(1.16);
  --switch-surface-checked-active-filter: brightness(0.92) saturate(1.1);
}
:is(.dark, .dark-theme) .ui-root {
  --switch-disabled-blend-mode: screen;
  --switch-high-contrast-checked-color-overlay: transparent;
  --switch-high-contrast-checked-active-before-filter: brightness(1.08);
  --switch-surface-checked-active-filter: brightness(1.08);
}
.ui-Switch {
  position: relative;
  display: inline-flex;
  align-items: center;
  vertical-align: top;
  flex-shrink: 0;
  outline: none;

  height: var(--switch-height);
  --switch-width: calc(var(--switch-height) * 1.75);
  --switch-thumb-inset: 1px;
  --switch-thumb-size: calc(var(--switch-height) - var(--switch-thumb-inset) * 2);
  --switch-thumb-translate-x: calc(var(--switch-width) - var(--switch-height));
}
.ui-Switch::before {
  content: '';
  display: block;
  width: var(--switch-width);
  height: var(--switch-height);
  border-radius: var(--switch-border-radius);
  transition: background-position, background-color, box-shadow, filter;
  transition-timing-function: linear, ease-in-out, ease-in-out, ease-in-out;
  background-repeat: no-repeat;
  background-size: calc(var(--switch-width) * 2 + var(--switch-height)) 100%;
}
.ui-Switch:where([data-state='unchecked'])::before {
  transition-duration: 120ms, 140ms, 140ms, 140ms;
  background-position-x: 100%;
}
.ui-Switch:where([data-state='checked'])::before {
  transition-duration: 160ms, 140ms, 140ms, 140ms;
  background-position: 0%;
}
.ui-Switch:where(:active)::before {
  transition-duration: 30ms;
}
.ui-Switch:where(:focus-visible)::before {
  outline: 2px solid var(--focus-8);
  outline-offset: 2px;
}
.ui-Switch::before {
  cursor: default;
}
.ui-Switch:where([data-disabled])::before {
  cursor: not-allowed;
}
.ui-SwitchThumb {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  background-color: white;
  position: absolute;
  left: var(--switch-thumb-inset);
  width: var(--switch-thumb-size);
  height: var(--switch-thumb-size);
  border-radius: calc(var(--switch-border-radius) - var(--switch-thumb-inset));
  transition: transform 140ms cubic-bezier(0.45, 0.05, 0.55, 0.95), box-shadow 140ms ease-in-out;
}
.ui-SwitchThumb:where([data-state='checked']) {
  transform: translateX(var(--switch-thumb-translate-x));
}
.ui-Switch:where(.r-size-1) {
  --switch-height: var(--space-4);
  --switch-border-radius: max(var(--radius-1), var(--radius-thumb));
}
.ui-Switch:where(.r-size-2) {
  --switch-height: calc(var(--space-5) * 5 / 6);
  --switch-border-radius: max(var(--radius-2), var(--radius-thumb));
}
.ui-Switch:where(.r-size-3) {
  --switch-height: var(--space-5);
  --switch-border-radius: max(var(--radius-2), var(--radius-thumb));
}
.ui-Switch:where(.r-variant-surface)::before {
  background-color: var(--gray-a3);
  background-image: linear-gradient(to right, var(--accent-track) 40%, transparent 60%);
  box-shadow: inset 0 0 0 1px var(--gray-a5);
}
.ui-Switch:where(.r-variant-surface):where(:active)::before {
  background-color: var(--gray-a4);
}
.ui-Switch:where(.r-variant-surface):where([data-state='checked']:active)::before {
  filter: var(--switch-surface-checked-active-filter);
}
.ui-Switch:where(.r-variant-surface):where(.r-high-contrast)::before {
  background-image:
    linear-gradient(to right, var(--switch-high-contrast-checked-color-overlay) 40%, transparent 60%),
    linear-gradient(to right, var(--accent-track) 40%, transparent 60%);
}
.ui-Switch:where(.r-variant-surface):where(.r-high-contrast):where([data-state='checked']:active)::before {
  filter: var(--switch-high-contrast-checked-active-before-filter);
}
.ui-Switch:where(.r-variant-surface):where([data-disabled]) {
  mix-blend-mode: var(--switch-disabled-blend-mode);
}
.ui-Switch:where(.r-variant-surface):where([data-disabled])::before {
  filter: none;
  background-image: none;
  background-color: var(--gray-a3);
  box-shadow: inset 0 0 0 1px var(--gray-a3);
}
.ui-Switch:where(.r-variant-surface) .ui-SwitchThumb:where([data-state='unchecked']) {
  box-shadow: 0 0 1px 1px var(--black-a2), 0 1px 1px var(--black-a1), 0 2px 4px -1px var(--black-a1);
}
.ui-Switch:where(.r-variant-surface) .ui-SwitchThumb:where([data-state='checked']) {
  box-shadow: 0 1px 3px var(--black-a2), 0 2px 4px -1px var(--black-a1), 0 0 0 1px var(--black-a1),
    0 0 0 1px var(--accent-a4), -1px 0 1px var(--black-a2);
}
.ui-Switch:where(.r-variant-surface):where(.r-high-contrast) .ui-SwitchThumb:where([data-state='checked']) {
  box-shadow: 0 1px 3px var(--black-a2), 0 2px 4px -1px var(--black-a1), 0 0 0 1px var(--black-a2),
    -1px 0 1px var(--black-a2);
}
.ui-Switch:where(.r-variant-surface) .ui-SwitchThumb:where([data-disabled]) {
  background-color: var(--gray-2);
  box-shadow: 0 0 0 1px var(--gray-a2), 0 1px 3px var(--black-a1);
  transition: none;
}
.ui-Switch:where(.r-variant-soft)::before {
  background-image:
    linear-gradient(to right, var(--accent-a4) 40%, transparent 60%),
    linear-gradient(to right, var(--accent-a4) 40%, transparent 60%),
    linear-gradient(to right, var(--accent-a4) 40%, var(--white-a1) 60%),
    linear-gradient(to right, var(--gray-a2) 40%, var(--gray-a3) 60%);
}
.ui-Switch:where(.r-variant-soft):where([data-state='unchecked'])::before {
  background-color: var(--gray-a3);
}
.ui-Switch:where(.r-variant-soft):where(:active)::before {
  background-color: var(--gray-a4);
}
.ui-Switch:where(.r-variant-soft):where(.r-high-contrast)::before {
  background-image:
    linear-gradient(to right, var(--switch-high-contrast-checked-color-overlay) 40%, transparent 60%),
    linear-gradient(to right, var(--accent-a6) 40%, transparent 60%),
    linear-gradient(to right, var(--accent-a6) 40%, transparent 60%),
    linear-gradient(to right, var(--accent-a6) 40%, var(--white-a1) 60%),
    linear-gradient(to right, var(--accent-a3) 40%, var(--gray-a3) 60%);
}
.ui-Switch:where(.r-variant-soft):where(.r-high-contrast):where([data-state='checked']:active)::before {
  filter: var(--switch-high-contrast-checked-active-before-filter);
}
.ui-Switch:where(.r-variant-soft):where([data-disabled]) {
  mix-blend-mode: var(--switch-disabled-blend-mode);
}
.ui-Switch:where(.r-variant-soft):where([data-disabled])::before {
  filter: none;
  background-image: none;
  background-color: var(--gray-a4);
}
.ui-Switch:where(.r-variant-soft) .ui-SwitchThumb {
  filter: saturate(0.45);
}
.ui-Switch:where(.r-variant-soft) .ui-SwitchThumb:where([data-state='unchecked']) {
  box-shadow: 0 0 0 1px var(--black-a1), 0 1px 3px var(--black-a1), 0 1px 3px var(--black-a1),
    0 2px 4px -1px var(--black-a1);
}
.ui-Switch:where(.r-variant-soft) .ui-SwitchThumb:where([data-state='checked']) {
  box-shadow: 0 0 0 1px var(--black-a1), 0 1px 3px var(--black-a2), 0 1px 3px var(--accent-a3),
    0 2px 4px -1px var(--accent-a3);
}
.ui-Switch:where(.r-variant-soft) .ui-SwitchThumb:where([data-disabled]) {
  filter: none;
  background-color: var(--gray-2);
  box-shadow: 0 0 0 1px var(--gray-a2), 0 1px 3px var(--black-a1);
  transition: none;
}

@layer components {
.ui-Checkbox {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: top;
    flex-shrink: 0;
    cursor: default;
    height: var(--checkbox-size);
    border-radius: var(--checkbox-border-radius);
}
}
.ui-Checkbox::before {
  content: '';
  display: block;
  height: var(--checkbox-size);
  width: var(--checkbox-size);
  border-radius: var(--checkbox-border-radius);
}
.ui-Checkbox:where(:focus-visible)::before {
  outline: 2px solid var(--focus-8);
  outline-offset: 2px;
}
.ui-Checkbox:where(:disabled) {
  cursor: not-allowed;
}
.ui-Checkbox:where(:disabled)::before {
  background-color: var(--gray-a3);
}
.ui-CheckboxIndicator {
  position: absolute;
  width: var(--checkbox-indicator-size);
  height: var(--checkbox-indicator-size);
  transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
}
.ui-Checkbox:where(.r-size-1) {
  --checkbox-size: calc(var(--space-4) * 0.875);
  --checkbox-indicator-size: calc(9px * var(--scaling));
  --checkbox-border-radius: calc(var(--radius-1) * 0.875);
}
.ui-Checkbox:where(.r-size-2) {
  --checkbox-size: var(--space-4);
  --checkbox-indicator-size: calc(10px * var(--scaling));
  --checkbox-border-radius: var(--radius-1);
}
.ui-Checkbox:where(.r-size-3) {
  --checkbox-size: calc(var(--space-4) * 1.25);
  --checkbox-indicator-size: calc(12px * var(--scaling));
  --checkbox-border-radius: calc(var(--radius-1) * 1.25);
}
.ui-Checkbox:where(.r-variant-surface):where([data-state='unchecked'])::before {
  background-color: var(--color-surface);
  box-shadow: inset 0 0 0 1px var(--gray-a7);
}
.ui-Checkbox:where(.r-variant-surface):where([data-state='checked'], [data-state='indeterminate'])::before {
  background-color: var(--accent-indicator);
}
.ui-Checkbox:where(.r-variant-surface):where([data-state='checked'], [data-state='indeterminate']) .ui-CheckboxIndicator {
  color: var(--accent-contrast);
}
.ui-Checkbox:where(.r-variant-surface):where(.r-high-contrast):where([data-state='checked'], [data-state='indeterminate'])::before {
  background-color: var(--accent-12);
}
.ui-Checkbox:where(.r-variant-surface):where(.r-high-contrast):where([data-state='checked'], [data-state='indeterminate']) .ui-CheckboxIndicator {
  color: var(--accent-1);
}
.ui-Checkbox:where(.r-variant-surface):disabled:where([data-state='checked'], [data-state='indeterminate'])::before {
  box-shadow: inset 0 0 0 1px var(--gray-a6);
  background-color: transparent;
}
.ui-Checkbox:where(.r-variant-surface):disabled:where([data-state='checked'], [data-state='indeterminate']) .ui-CheckboxIndicator {
  color: var(--gray-a8);
}
.ui-Checkbox:where(.r-variant-soft)::before {
  background-color: var(--accent-a5);
}
.ui-Checkbox:where(.r-variant-soft):where([data-state='checked'], [data-state='indeterminate']) .ui-CheckboxIndicator {
  color: var(--accent-a11);
}
.ui-Checkbox:where(.r-variant-soft):where(.r-high-contrast):where([data-state='checked'], [data-state='indeterminate']) .ui-CheckboxIndicator {
  color: var(--accent-12);
}
.ui-Checkbox:where(.r-variant-soft):disabled::before {
  background-color: var(--gray-a3);
}
.ui-Checkbox:where(.r-variant-soft):disabled .ui-CheckboxIndicator {
  color: var(--gray-a8);
}

@layer components {
.ui-Toggle {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: top;
    flex-shrink: 0;
    border-radius: var(--toggle-border-radius);
    font-size: var(--toggle-font-size);
    width: var(--toggle-size);
    height: var(--toggle-size);
}
}
.ui-Toggle:where(.r-size-1) {
  --toggle-border-radius: max(var(--radius-1), var(--radius-full));
  --toggle-font-size: var(--font-size-1);
  --toggle-size: var(--space-5);
}
.ui-Toggle:where(.r-size-2) {
  --toggle-border-radius: max(var(--radius-2), var(--radius-full));
  --toggle-font-size: var(--font-size-3);
  --toggle-size: var(--space-6);
}
.ui-Toggle:where(.r-size-3) {
  --toggle-border-radius: max(var(--radius-3), var(--radius-full));
  --toggle-font-size: var(--font-size-6);
  --toggle-size: var(--space-7);
}

/** soft */
.ui-Toggle:where(.r-variant-soft) {
  background-color: var(--color-panel-translucent);
  box-shadow: var(--shadow-2);
}
@media (hover: hover) {
.ui-Toggle:where(.r-variant-soft):where(:hover) {
    background-color: var(--accent-a2);
}
}
.ui-Toggle:where(.r-variant-soft):where(:focus-visible) {
  outline: 2px solid var(--accent-8);
  outline-offset: -1px;
}
.ui-Toggle:where(.r-variant-soft):where([data-disabled]) {
  color: var(--gray-a8);
  background-color: var(--gray-a3);
}
.ui-Toggle:where(.r-variant-soft):where([data-state="on"]) {
  background-color: var(--accent-a3);
  box-shadow: var(--shadow-1);
}

/** solid & ghost*/
.ui-Toggle:where(.r-variant-solid) {
  background-color: var(--color-panel-solid);
  box-shadow: var(--shadow-2);
}
@media (hover: hover) {
.ui-Toggle:where(.r-variant-solid, .r-variant-ghost):where(:hover) {
    background-color: var(--accent-a3);
}
}
.ui-Toggle:where(.r-variant-solid, .r-variant-ghost):where(:focus-visible) {
  outline: 2px solid var(--focus-8);
  outline-offset: 2px;
}
.ui-Toggle:where(.r-variant-solid):where([data-disabled]) {
  color: var(--gray-a8);
  background-color: var(--gray-a3);
}
.ui-Toggle:where(.r-variant-ghost):where([data-disabled]) {
  color: var(--gray-a8);
  background-color: transparent;
}
.ui-Toggle:where(.r-variant-solid):where([data-state="on"]) {
  background-color: var(--accent-9);
  color: var(--accent-contrast);
  box-shadow: var(--shadow-1);
}
.ui-Toggle:where(.r-variant-ghost):where([data-state="on"]) {
  background-color: var(--accent-a3);
  box-shadow: var(--shadow-1);
}
.ui-Toggle:where(.r-variant-solid, .r-variant-ghost):where(.r-high-contrast):where([data-state="on"]) {
  background-color: var(--accent-12);
  color: var(--gray-1);
}

@layer components {
.ui-ToggleGroupRoot {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: top;
    flex-shrink: 0;
    height: var(--toggle-group-height);
}
}
.ui-ToggleGroupRoot:where(.r-size-1) {
  font-size: var(--font-size-1);
  --toggle-radius: max(var(--radius-1), var(--radius-full));
  --toggle-group-height: var(--space-5);
  --toggle-group-soft-padding: 1px;
}
.ui-ToggleGroupRoot:where(.r-size-2) {
  font-size: var(--font-size-3);
  --toggle-radius: max(var(--radius-2), var(--radius-full));
  --toggle-group-height: var(--space-6);
  --toggle-group-soft-padding: 2px;
}
.ui-ToggleGroupRoot:where(.r-size-3) {
  font-size: var(--font-size-6);
  --toggle-radius: max(var(--radius-3), var(--radius-full));
  --toggle-group-height: var(--space-7);
  --toggle-group-soft-padding: 3px;
}
.ui-ToggleGroupRoot:where(.r-variant-solid),
.ui-ToggleGroupRoot:where(.r-variant-outline),
.ui-ToggleGroupRoot:where(.r-variant-surface) {
  border-radius: var(--toggle-radius);
  background-color: var(--color-panel-solid);
  box-shadow: var(--shadow-2);
  --toggle-item-size: var(--toggle-group-height);
}
.ui-ToggleGroupRoot:where(.r-variant-soft) {
  border-radius: var(--toggle-radius);
  background-color: var(--color-panel-translucent);
  box-shadow: var(--shadow-2);
  padding: var(--toggle-group-soft-padding);
  gap: var(--toggle-group-soft-padding);
  --toggle-item-size: calc(var(--toggle-group-height) - 2 * var(--toggle-group-soft-padding));
}
.ui-ToggleGroupRoot:where(.r-variant-ghost) {
  gap: calc(var(--space-1) / 2);
  --toggle-item-size: var(--toggle-group-height);
}

@layer components {
.ui-ToggleGroupItem {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: top;
    flex-shrink: 0;
    width: var(--toggle-item-size);
    height: var(--toggle-item-size);
}
}
.ui-ToggleGroupRoot:where(.r-variant-solid, .r-variant-surface, .r-variant-outline) :where(.ui-ToggleGroupItem:first-child) {
  border-top-left-radius: var(--toggle-radius);
  border-bottom-left-radius: var(--toggle-radius);
}
.ui-ToggleGroupRoot:where(.r-variant-solid, .r-variant-surface, .r-variant-outline) :where(.ui-ToggleGroupItem:last-child) {
  border-top-right-radius: var(--toggle-radius);
  border-bottom-right-radius: var(--toggle-radius);
}
.ui-ToggleGroupRoot:where(.r-variant-soft, .r-variant-ghost) :where(.ui-ToggleGroupItem) {
  border-radius: var(--toggle-radius);
}

/** soft */
@media (hover: hover) {
.ui-ToggleGroupRoot:where(.r-variant-soft) :where(.ui-ToggleGroupItem:hover) {
    background-color: var(--accent-a2);
}
}
.ui-ToggleGroupRoot:where(.r-variant-soft) :where(.ui-ToggleGroupItem:focus-visible) {
  outline: 2px solid var(--accent-8);
  outline-offset: -1px;
}
.ui-ToggleGroupRoot:where(.r-variant-soft) :where(.ui-ToggleGroupItem[data-disabled]) {
  color: var(--gray-a8);
  background-color: var(--gray-a3);
}
.ui-ToggleGroupRoot:where(.r-variant-soft) :where(.ui-ToggleGroupItem[data-state="on"]) {
  background-color: var(--accent-a4);
}

/** solid, surface ghost */
@media (hover: hover) {
.ui-ToggleGroupRoot:where(.r-variant-solid, .r-variant-surface, .r-variant-outline, .r-variant-ghost) :where(.ui-ToggleGroupItem:hover) {
    background-color: var(--accent-a3);
}
}
:where(.ui-ToggleGroupRoot.r-variant-surface, .r-variant-outline) .ui-ToggleGroupItem + .ui-ToggleGroupItem {
  box-shadow: inset 1px 0 0 0 var(--gray-a4);
}
.ui-ToggleGroupRoot:where(.r-variant-solid, .r-variant-surface, .r-variant-outoine, .r-variant-ghost) :where(.ui-ToggleGroupItem:focus-visible) {
  outline: 2px solid var(--focus-8);
  outline-offset: 2px;
}
.ui-ToggleGroupRoot:where(.r-variant-solid) :where(.ui-ToggleGroupItem[data-disabled]) {
  color: var(--gray-a8);
  background-color: var(--gray-a3);
}
.ui-ToggleGroupRoot:where(.r-variant-surface, .r-variant-outline) :where(.ui-ToggleGroupItem[data-disabled]) {
  color: var(--gray-a8);
}
.ui-ToggleGroupRoot:where(.r-variant-ghost) :where(.ui-ToggleGroupItem[data-disabled]) {
  color: var(--gray-a8);
  background-color: transparent;
}
.ui-ToggleGroupRoot:where(.r-variant-solid) :where(.ui-ToggleGroupItem[data-state="on"]) {
  background-color: var(--accent-9);
  color: var(--accent-contrast);
  box-shadow: var(--shadow-1);
}
.ui-ToggleGroupRoot:where(.r-variant-surface) :where(.ui-ToggleGroupItem[data-state="on"]) {
  background-color: var(--accent-a3);
  color: var(--accent-a11);
}
.ui-ToggleGroupRoot:where(.r-variant-outline) :where(.ui-ToggleGroupItem[data-state="on"]) {
  color: var(--accent-a11);
}
.ui-ToggleGroupRoot:where(.r-variant-ghost) :where(.ui-ToggleGroupItem[data-state="on"]) {
  background-color: var(--accent-a4);
}
.ui-ToggleGroupRoot:where(.r-variant-solid, .r-variant-ghost):where(.r-high-contrast) :where(.ui-ToggleGroupItem[data-state="on"]) {
  background-color: var(--accent-12);
  color: var(--gray-1);
}

.ui-TextField {
  display: flex;
  align-items: stretch;
  font-weight: var(--font-weight-regular);
  font-style: normal;
  text-align: start;
  box-sizing: border-box;
  height: var(--text-field-height);
  padding: var(--text-field-border-width);
  border-radius: var(--text-field-border-radius);
}
@supports selector(:has(*)) {
.ui-TextField:where(:has(input[type=file])) {
    align-items: center;
}
}
.ui-TextField::-moz-selection {
  background-color: var(--text-field-selection-color);
}
.ui-TextField::selection {
  background-color: var(--text-field-selection-color);
}
.ui-TextFieldInput {
  text-align: inherit;
  border: none;
  padding: 0;
  width: 100%;
  font-size: 1em;
  background-color: transparent;
  border-radius: calc(var(--text-field-border-radius) - var(--text-field-border-width));
  text-indent: var(--text-field-padding);
  cursor: auto;
}
.ui-TextFieldInput:focus {
  outline: none;
  box-shadow: none;
}
.ui-TextFieldInput:where([type=file]) {
  font-size: 0.875em;
  background-color: transparent;
  text-indent: calc(var(--text-field-padding) / 2);
}
.ui-TextFieldInput:where([type=date], [type=datetime-local], [type=time], [type=week], [type=month]) {
  text-indent: 0;
  padding-left: var(--text-field-padding);
  padding-right: var(--text-field-padding);
}
.ui-TextFieldInput::-webkit-inner-spin-button {
  -webkit-appearance: none;
          appearance: none;
}
.ui-TextFieldInput::-webkit-search-cancel-button {
  -webkit-appearance: none;
          appearance: none;
}
.ui-TextFieldInput::-moz-selection {
  background-color: var(--text-field-selection-color);
}
.ui-TextFieldInput::selection {
  background-color: var(--text-field-selection-color);
}
.ui-TextFieldInput::-webkit-calendar-picker-indicator {
  box-sizing: content-box;
  width: var(--text-field-native-icon-size);
  height: var(--text-field-native-icon-size);
  padding: var(--space-1);
  margin-left: 0;
  margin-right: calc(var(--space-1) * -1);
  border-radius: calc(var(--text-field-border-radius) - 2px);
}
.ui-TextFieldInput:where(:not([type=time]))::-webkit-calendar-picker-indicator {
  margin-left: var(--space-1);
}
.ui-TextFieldInput::-webkit-calendar-picker-indicator:where(:hover) {
  background-color: var(--gray-a3);
}
.ui-TextFieldInput::-webkit-calendar-picker-indicator:where(:focus-visible) {
  outline: 2px solid var(--text-field-focus-color);
}
.ui-TextFieldInput::-webkit-datetime-edit-ampm-field:where(:focus),
.ui-TextFieldInput::-webkit-datetime-edit-day-field:where(:focus),
.ui-TextFieldInput::-webkit-datetime-edit-hour-field:where(:focus),
.ui-TextFieldInput::-webkit-datetime-edit-millisecond-field:where(:focus),
.ui-TextFieldInput::-webkit-datetime-edit-minute-field:where(:focus),
.ui-TextFieldInput::-webkit-datetime-edit-month-field:where(:focus),
.ui-TextFieldInput::-webkit-datetime-edit-second-field:where(:focus),
.ui-TextFieldInput::-webkit-datetime-edit-week-field:where(:focus),
.ui-TextFieldInput::-webkit-datetime-edit-year-field:where(:focus) {
  background-color: var(--text-field-selection-color);
  color: inherit;
  outline: none;
}
.ui-TextFieldInput:where(:-webkit-autofill) {
  /* Reliably removes native autofill colors */
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: var(--gray-12);
}
.ui-TextFieldInput:where(:autofill) {
  /* Reliably removes native autofill colors */
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: var(--gray-12);
}
.ui-TextFieldSlot {
  box-sizing: border-box;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  cursor: text;
  gap: var(--space-2);
  padding-left: var(--text-field-slot-padding);
  padding-right: var(--text-field-slot-padding);
}
.ui-TextFieldSlot:where([data-side=left]) {
  order: -1;
  margin-left: calc(var(--text-field-border-width) * -1);
  margin-right: 0;
}
.ui-TextFieldSlot:where([data-side=right]) {
  order: 0;
  margin-left: 0;
  margin-right: calc(var(--text-field-border-width) * -1);
}
.ui-TextFieldInput:where(:has(~ .ui-TextFieldSlot:not([data-side=right]))) {
  text-indent: 0;
  padding-left: 0;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
.ui-TextFieldInput:where(:has(~ .ui-TextFieldSlot[data-side=right],
~ .ui-TextFieldSlot:not([data-side=right]) ~ .ui-TextFieldSlot:not([data-side=left]))) {
  padding-right: 0;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.ui-TextField:where(.r-size-1) {
  --text-field-height: var(--space-5);
  --text-field-padding: calc(var(--space-1) * 1.5 - var(--text-field-border-width));
  --text-field-border-radius: max(var(--radius-2), var(--radius-full));
  --text-field-native-icon-size: var(--space-3);
  --text-field-slot-padding: var(--space-1);
  font-size: var(--font-size-1);
  letter-spacing: var(--letter-spacing-1);
}
.ui-TextField:where(.r-size-1) :where(.ui-TextFieldInput) {
  /* Reset size 2 padding bottom */
  padding-bottom: 0px;
  /* Safari credentials autofill icon */
}
.ui-TextField:where(.r-size-1) :where(.ui-TextFieldInput)::-webkit-textfield-decoration-container {
  padding-right: 0px;
  margin-right: -2px;
}
.ui-TextField:where(.r-size-2) {
  --text-field-height: var(--space-6);
  --text-field-padding: calc(var(--space-2) - var(--text-field-border-width));
  --text-field-border-radius: max(var(--radius-2), var(--radius-full));
  --text-field-native-icon-size: var(--space-4);
  --text-field-slot-padding: var(--space-2);
  font-size: var(--font-size-2);
  letter-spacing: var(--letter-spacing-2);
}
.ui-TextField:where(.r-size-2) :where(.ui-TextFieldInput) {
  /* Avoid 1px baseline jitter when layout around the text field is subpixel-sized (e.g. vh units). */
  /* Works because as of Nov 2023, Chrome computes input text bounding box height as 16.5px on @2x screens. */
  padding-bottom: 0.5px;
  /* Safari credentials autofill icon */
}
.ui-TextField:where(.r-size-2) :where(.ui-TextFieldInput)::-webkit-textfield-decoration-container {
  padding-right: 2px;
  margin-right: 0px;
}
.ui-TextField:where(.r-size-3) {
  --text-field-height: var(--space-7);
  --text-field-padding: calc(var(--space-3) - var(--text-field-border-width));
  --text-field-border-radius: max(var(--radius-3), var(--radius-full));
  --text-field-native-icon-size: var(--space-4);
  --text-field-slot-padding: var(--space-3);
  font-size: var(--font-size-3);
  letter-spacing: var(--letter-spacing-3);
}
.ui-TextField:where(.r-size-3) :where(.ui-TextFieldInput) {
  /* Reset size 2 padding bottom */
  padding-bottom: 0px;
  /* Safari credentials autofill icon */
}
.ui-TextField:where(.r-size-3) :where(.ui-TextFieldInput)::-webkit-textfield-decoration-container {
  padding-right: 5px;
  margin-right: 0px;
}
.ui-TextField:where(.r-size-3) :where(.ui-TextFieldSlot) {
  gap: var(--space-3);
}
.ui-TextField:where(.r-variant-surface) {
  --text-field-selection-color: var(--focus-a5);
  --text-field-focus-color: var(--focus-a8);
  --text-field-border-width: 1px;
  --text-field-border-color: var(--gray-a7);
  /* Blend inner shadow with page background */
  background-clip: content-box;
  background-color: var(--color-surface);
  box-sizing: border-box;
  border: var(--text-field-border-width) solid var(--text-field-border-color);
  color: var(--gray-12);
}
@supports selector(:has(*)) {
.ui-TextField:where(.r-variant-surface):where(:has(.ui-TextFieldInput:focus)) {
    --text-field-border-color: var(--text-field-focus-color);
    box-shadow: 0 0 0 2px var(--accent-4), 0 1px 2px 0 rgb(0 0 0 / 0.05);
}
}
@supports not selector(:has(*)) {
.ui-TextField:where(.r-variant-surface):where(:focus-within) {
    --text-field-border-color: var(--text-field-focus-color);
    box-shadow: 0 0 0 2px var(--accent-4), 0 1px 2px 0 rgb(0 0 0 / 0.05);
}
}
.ui-TextField:where(.r-variant-surface) :where(.ui-TextFieldInput)::-moz-placeholder {
  color: var(--gray-a10);
}
.ui-TextField:where(.r-variant-surface) :where(.ui-TextFieldInput)::placeholder {
  color: var(--gray-a10);
}
.ui-TextField:where(.r-variant-surface) :where(.ui-TextFieldSlot) {
  color: var(--gray-a11);
}
.ui-TextField:where(.r-variant-surface) :where(.ui-TextFieldSlot):where([data-accent-color]) {
  color: var(--accent-a11);
}
.ui-TextField:where(.r-variant-surface):where(:has(.ui-TextFieldInput:where(:-webkit-autofill):not(:disabled, :read-only:not([type=file])))) {
  /* Blend with focus color */
  background-image: linear-gradient(var(--focus-a2), var(--focus-a2));
  border-color: var(--gray-a5);
}
.ui-TextField:where(.r-variant-surface):where(:has(.ui-TextFieldInput:where(:autofill):not(:disabled, :-moz-read-only:not([type=file])))) {
  /* Blend with focus color */
  background-image: linear-gradient(var(--focus-a2), var(--focus-a2));
  border-color: var(--gray-a5);
}
.ui-TextField:where(.r-variant-surface):where(:has(.ui-TextFieldInput:where(:autofill):not(:disabled, :read-only:not([type=file])))) {
  /* Blend with focus color */
  background-image: linear-gradient(var(--focus-a2), var(--focus-a2));
  border-color: var(--gray-a5);
}
.ui-TextField:where(.r-variant-surface):where(:has(.ui-TextFieldInput:where(:disabled, :-moz-read-only:not([type=file])))) {
  /* Blend with grey */
  background-image: linear-gradient(var(--gray-a2), var(--gray-a2));
  border-color: var(--gray-a6);
}
.ui-TextField:where(.r-variant-surface):where(:has(.ui-TextFieldInput:where(:disabled, :read-only:not([type=file])))) {
  /* Blend with grey */
  background-image: linear-gradient(var(--gray-a2), var(--gray-a2));
  border-color: var(--gray-a6);
}

/* soft */
.ui-TextField:where(.r-variant-soft) {
  --text-field-selection-color: var(--accent-a5);
  --text-field-focus-color: var(--accent-8);
  --text-field-border-width: 0px;
  background-color: var(--accent-a3);
  color: var(--accent-12);
  /* prettier-ignore */
}
@supports selector(:has(*)) {
.ui-TextField:where(.r-variant-soft):where(:has(.ui-TextFieldInput:focus)) {
    outline: 2px solid var(--text-field-focus-color);
    outline-offset: -1px;
}
}
@supports not selector(:has(*)) {
.ui-TextField:where(.r-variant-soft):where(:focus-within) {
    outline: 2px solid var(--text-field-focus-color);
    outline-offset: -1px;
}
}
.ui-TextField:where(.r-variant-soft) :where(.ui-TextFieldInput)::-moz-placeholder {
  color: var(--accent-12);
  opacity: 0.6;
}
.ui-TextField:where(.r-variant-soft) :where(.ui-TextFieldInput)::placeholder {
  color: var(--accent-12);
  opacity: 0.6;
}
.ui-TextField:where(.r-variant-soft) :where(.ui-TextFieldSlot) {
  color: var(--accent-12);
}
.ui-TextField:where(.r-variant-soft) :where(.ui-TextFieldSlot):where([data-accent-color]) {
  color: var(--accent-a11);
}
.ui-TextField:where(.r-variant-soft):where(:has(.ui-TextFieldInput:where(:-webkit-autofill):not(:disabled, :read-only:not([type=file])))) {
  /* Use gray autofill color when component color is gray */
  box-shadow: inset 0 0 0 1px var(--accent-a5), inset 0 0 0 1px var(--gray-a4);
}
.ui-TextField:where(.r-variant-soft):where(:has(.ui-TextFieldInput:where(:autofill):not(:disabled, :-moz-read-only:not([type=file])))) {
  /* Use gray autofill color when component color is gray */
  box-shadow: inset 0 0 0 1px var(--accent-a5), inset 0 0 0 1px var(--gray-a4);
}
.ui-TextField:where(.r-variant-soft):where(:has(.ui-TextFieldInput:where(:autofill):not(:disabled, :read-only:not([type=file])))) {
  /* Use gray autofill color when component color is gray */
  box-shadow: inset 0 0 0 1px var(--accent-a5), inset 0 0 0 1px var(--gray-a4);
}
.ui-TextField:where(.r-variant-soft):where(:has(.ui-TextFieldInput:where(:disabled, :-moz-read-only:not([type=file])))) {
  background-color: var(--gray-a3);
}
.ui-TextField:where(.r-variant-soft):where(:has(.ui-TextFieldInput:where(:disabled, :read-only:not([type=file])))) {
  background-color: var(--gray-a3);
}

/* all disabled and read-only text fields */
.ui-TextFieldInput:where(:disabled, :-moz-read-only:not([type=file])) {
  cursor: text;
  color: var(--gray-a11);
  /* Safari */
  -webkit-text-fill-color: var(--gray-a11);
}
.ui-TextFieldInput:where(:disabled, :read-only:not([type=file])) {
  cursor: text;
  color: var(--gray-a11);
  /* Safari */
  -webkit-text-fill-color: var(--gray-a11);
}
.ui-TextFieldInput:where(:disabled, :read-only)::-moz-placeholder {
  opacity: 0.5;
}
.ui-TextFieldInput:where(:disabled, :-moz-read-only)::placeholder {
  opacity: 0.5;
}
.ui-TextFieldInput:where(:disabled, :read-only)::placeholder {
  opacity: 0.5;
}
.ui-TextFieldInput:where(:disabled, :read-only):where(:-moz-placeholder) {
  cursor: var(--cursor-disabled);
}
.ui-TextFieldInput:where(:disabled, :-moz-read-only):where(:placeholder-shown) {
  cursor: var(--cursor-disabled);
}
.ui-TextFieldInput:where(:disabled, :read-only):where(:placeholder-shown) {
  cursor: var(--cursor-disabled);
}
.ui-TextFieldInput:where(:disabled, :read-only):where(:-moz-placeholder) ~ :where(.ui-TextFieldSlot) {
  cursor: var(--cursor-disabled);
}
.ui-TextFieldInput:where(:disabled, :-moz-read-only):where(:placeholder-shown) ~ :where(.ui-TextFieldSlot) {
  cursor: var(--cursor-disabled);
}
.ui-TextFieldInput:where(:disabled, :read-only):where(:placeholder-shown) ~ :where(.ui-TextFieldSlot) {
  cursor: var(--cursor-disabled);
}
.ui-TextField:where(:has(.ui-TextFieldInput:where(:disabled, :-moz-read-only:not([type=file])))) {
  --text-field-selection-color: var(--gray-a5);
  --text-field-focus-color: var(--gray-8);
}
.ui-TextField:where(:has(.ui-TextFieldInput:where(:disabled, :read-only:not([type=file])))) {
  --text-field-selection-color: var(--gray-a5);
  --text-field-focus-color: var(--gray-8);
}

.ui-TextArea {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  font-weight: var(--font-weight-regular);
  font-style: normal;
  text-align: start;
  overflow: hidden;
  width: 100%;
}
.ui-TextAreaInput {
  border-radius: inherit;
  resize: none;
  display: block;
  width: 100%;
  flex-grow: 1;
  cursor: auto;
  border: none;
  padding: var(--text-area-padding-y) var(--text-area-padding-x);
  font-size: 1em;
  background-color: transparent;
}
.ui-TextAreaInput:focus {
  outline: none;
  box-shadow: none;
}
.ui-TextAreaInput:where(:disabled) {
  cursor: not-allowed;
}
.ui-TextAreaInput::-webkit-scrollbar {
  width: var(--space-3);
  height: var(--space-3);
}
.ui-TextAreaInput::-webkit-scrollbar-track,
.ui-TextAreaInput::-webkit-scrollbar-thumb {
  background-clip: content-box;
  border: var(--space-1) solid transparent;
  border-radius: var(--space-3);
}
.ui-TextAreaInput::-webkit-scrollbar-track {
  background-color: var(--gray-a3);
}
.ui-TextAreaInput::-webkit-scrollbar-thumb {
  background-color: var(--gray-a8);
}
.ui-TextAreaInput:where(:not(:disabled))::-webkit-scrollbar-thumb:hover {
  background-color: var(--gray-a9);
}
.ui-TextArea:where(.r-size-1) {
  min-height: var(--space-8);
  border-radius: var(--radius-2);
}
.ui-TextArea:where(.r-size-1) .ui-TextAreaInput {
  --text-area-padding-y: calc(var(--space-1) - var(--text-area-border-width));
  --text-area-padding-x: calc(var(--space-1) * 1.5 - var(--text-area-border-width));
  font-size: var(--font-size-1);
  line-height: var(--line-height-1);
  letter-spacing: var(--letter-spacing-1);
}
.ui-TextArea:where(.r-size-2) {
  min-height: var(--space-9);
  border-radius: var(--radius-2);
}
.ui-TextArea:where(.r-size-2) .ui-TextAreaInput {
  --text-area-padding-y: calc(var(--space-1) * 1.5 - var(--text-area-border-width));
  --text-area-padding-x: calc(var(--space-2) - var(--text-area-border-width));
  font-size: var(--font-size-2);
  line-height: var(--line-height-2);
  letter-spacing: var(--letter-spacing-2);
}
.ui-TextArea:where(.r-size-3) {
  min-height: 80px;
  border-radius: var(--radius-3);
}
.ui-TextArea:where(.r-size-3) .ui-TextAreaInput {
  --text-area-padding-y: calc(var(--space-2) - var(--text-area-border-width));
  --text-area-padding-x: calc(var(--space-3) - var(--text-area-border-width));
  font-size: var(--font-size-3);
  line-height: var(--line-height-3);
  letter-spacing: var(--letter-spacing-3);
}
.ui-TextArea:where(.r-variant-surface) {
  --text-area-border-width: 1px;
  --text-area-border-color: var(--gray-a7);
  /* Blend inner shadow with page background */
  background-clip: content-box;
  background-color: var(--color-surface);
  border: var(--text-area-border-width) solid var(--text-area-border-color);
  color: var(--gray-12);
}
.ui-TextArea:where(.r-variant-surface):where(:focus-within) {
  --text-area-border-color: var(--focus-a8);
  box-shadow: 0 0 0 2px var(--accent-4), 0 1px 2px 0 rgb(0 0 0 / 0.05);
}
.ui-TextArea:where(.r-variant-surface) .ui-TextAreaInput::-moz-placeholder {
  color: var(--gray-a10);
}
.ui-TextArea:where(.r-variant-surface) .ui-TextAreaInput::placeholder {
  color: var(--gray-a10);
}
.ui-TextArea:where(.r-variant-surface) :where(.ui-TextAreaInput:-moz-read-only) {
  background-image: linear-gradient(var(--gray-a2), var(--gray-a2));
}
.ui-TextArea:where(.r-variant-surface) :where(.ui-TextAreaInput:read-only) {
  background-image: linear-gradient(var(--gray-a2), var(--gray-a2));
}
.ui-TextArea:where(.r-variant-soft) {
  --text-area-border-width: 0px;
  background-color: var(--accent-a3);
  color: var(--accent-12);
}
.ui-TextArea:where(.r-variant-soft):where(:focus-within) {
  outline: 2px solid var(--accent-8);
  outline-offset: -1px;
}
.ui-TextArea:where(.r-variant-soft) .ui-TextAreaInput::-moz-selection {
  background-color: var(--accent-a5);
}
.ui-TextArea:where(.r-variant-soft) .ui-TextAreaInput::selection {
  background-color: var(--accent-a5);
}
.ui-TextArea:where(.r-variant-soft) .ui-TextAreaInput::-moz-placeholder {
  color: var(--accent-12);
  opacity: 0.65;
}
.ui-TextArea:where(.r-variant-soft) .ui-TextAreaInput::placeholder {
  color: var(--accent-12);
  opacity: 0.65;
}
.ui-TextArea:where(.r-variant-soft) :where(.ui-TextAreaInput:-moz-read-only) {
  background-image: linear-gradient(var(--gray-a2), var(--gray-a2));
  box-shadow: inset 0 0 0 var(--text-area-border-width) var(--gray-a6);
}
.ui-TextArea:where(.r-variant-soft) :where(.ui-TextAreaInput:read-only) {
  background-image: linear-gradient(var(--gray-a2), var(--gray-a2));
  box-shadow: inset 0 0 0 var(--text-area-border-width) var(--gray-a6);
}

.ui-ColorField {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--color-field-size);
  height: var(--color-field-size);
  border-radius: var(--color-field-radius);
}
.ui-ColorField:where(.r-size-1) {
  --color-field-size: var(--space-5);
  --color-field-radius: max(var(--radius-2), var(--radius-full));
  --color-field-border-width: 1px;
}
.ui-ColorField:where(.r-size-2) {
  --color-field-size: var(--space-6);
  --color-field-radius: max(var(--radius-2), var(--radius-full));
  --color-field-border-width: 2px;
}
.ui-ColorField:where(.r-size-3) {
  --color-field-size: var(--space-7);
  --color-field-radius: max(var(--radius-3), var(--radius-full));
  --color-field-border-width: 3px;
}
.ui-ColorField:where(.r-variant-solid) {
  --color-input-size: var(--color-field-size);
  --color-input-radius: var(--color-field-radius);
}
.ui-ColorField:where(.r-variant-ring) {
  --color-input-size: calc(var(--color-field-size) - var(--color-field-border-width) * 4);
  --color-input-radius: calc(var(--color-field-radius) - 2px);
  border: var(--color-field-border-width) solid var(--color-field-color);
}
.ui-ColorFieldInput {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border: none;
  cursor: pointer;
  padding: 0;
  width: var(--color-input-size);
  height: var(--color-input-size);
  border-radius: var(--color-input-radius);
}
.ui-ColorFieldInput::-webkit-color-swatch-wrapper {
  padding: 0;
  border-radius: var(--color-input-radius);
}
.ui-ColorFieldInput::-webkit-color-swatch {
  border: none;
  border-radius: var(--color-input-radius);
}
.ui-ColorFieldInput::-moz-color-swatch {
  border: none;
  border-radius: var(--color-input-radius);
}
@supports selector(:has(*)) {
.ui-ColorField:where(:has(.ui-ColorFieldInput:focus)) {
    --text-field-border-color: var(--text-field-focus-color);
    box-shadow: 0 0 0 2px var(--accent-4), 0 1px 2px 0 rgb(0 0 0 / 0.05);
}
}
:where(.ui-TextFieldSlot[data-side="left"]) .ui-ColorField {
  margin-left: calc(0px - var(--text-field-slot-padding) / 2);
}
:where(.ui-TextFieldSlot[data-side="right"]) .ui-ColorField {
  margin-right: calc(0px - var(--text-field-slot-padding) / 2);
}
:where(.ui-TextFieldSlot) .ui-ColorField,
:where(.ui-TextFieldSlot) .ui-ColorFieldInput {
  width: calc(var(--color-field-size) - var(--text-field-padding));
  height: calc(var(--color-field-size) - var(--text-field-padding));
}

.ui-SelectContent {
  --scrollarea-scrollbar-vertical-margin-top: var(--select-content-padding);
  --scrollarea-scrollbar-vertical-margin-bottom: var(--select-content-padding);
  --scrollarea-scrollbar-horizontal-margin-left: var(--select-content-padding);
  --scrollarea-scrollbar-horizontal-margin-right: var(--select-content-padding);
}
@layer components {
.ui-SelectContent {
    overflow: hidden;
    box-shadow: var(--shadow-5);
    background-color: var(--color-panel-solid);
    box-sizing: border-box;
}
}
.ui-SelectContent:where([data-side]) {
  min-width: var(--reka-select-trigger-width);
  max-width: var(--reka-select-content-available-width);
  max-height: var(--reka-select-content-available-height);
  transform-origin: var(--reka-select-content-transform-origin);
}
.ui-SelectViewport {
  box-sizing: border-box;
  padding: var(--select-content-padding);
}
.ui-SelectContent:has(.ui-ScrollAreaScrollbar[data-orientation='vertical']) .ui-SelectViewport {
  padding-right: var(--space-3);
}
.ui-SelectContent:where(.r-size-1) {
  --select-content-padding: var(--space-1);
  --select-item-height: var(--space-5);
  --select-item-indicator-width: calc(var(--space-5) / 1.2);
  --select-separator-margin-right: var(--space-2);
  border-radius: var(--radius-3);
}
.ui-SelectContent:where(.r-size-2),
.ui-SelectContent:where(.r-size-3) {
  --select-content-padding: var(--space-2);
  --select-item-height: var(--space-6);
  --select-item-indicator-width: var(--space-5);
  --select-separator-margin-right: var(--space-3);
  border-radius: var(--radius-4);
}

@layer components {
.ui-SelectTrigger {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
    vertical-align: top;
    font-weight: var(--font-weight-regular);
    font-style: normal;
    text-align: start;
    color: var(--gray-12);
    box-sizing: border-box;
    height: var(--select-trigger-height);
}
}
.ui-SelectTriggerInner {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ui-SelectIcon {
  flex-shrink: 0;
  opacity: 0.9;
  width: var(--select-icon-size);
  height: var(--select-icon-size);
}
.ui-SelectTrigger:where(.r-size-1) {
  --select-trigger-height: var(--space-5);
  --select-trigger-padding-x: var(--space-2);
  --select-trigger-ghost-padding-x: var(--space-2);
  --select-trigger-ghost-padding-y: var(--space-1);
  --select-icon-size: 9px;

  gap: var(--space-1);
  font-size: var(--font-size-1);
  line-height: var(--line-height-1);
  letter-spacing: var(--letter-spacing-1);
  border-radius: max(var(--radius-1), var(--radius-full));
}
.ui-SelectTrigger:where(.r-size-2) {
  --select-trigger-height: var(--space-6);
  --select-trigger-padding-x: var(--space-3);
  --select-trigger-ghost-padding-x: var(--space-2);
  --select-trigger-ghost-padding-y: var(--space-1);
  --select-icon-size: 10px;

  gap: calc(var(--space-1) * 1.5);
  font-size: var(--font-size-2);
  line-height: var(--line-height-2);
  letter-spacing: var(--letter-spacing-2);
  border-radius: max(var(--radius-2), var(--radius-full));
}
.ui-SelectTrigger:where(.r-size-3) {
  --select-trigger-height: var(--space-7);
  --select-trigger-padding-x: var(--space-4);
  --select-trigger-ghost-padding-x: var(--space-3);
  --select-trigger-ghost-padding-y: calc(var(--space-1) * 1.5);
  --select-icon-size: 11px;

  gap: var(--space-2);
  font-size: var(--font-size-3);
  line-height: var(--line-height-3);
  letter-spacing: var(--letter-spacing-3);
  border-radius: max(var(--radius-3), var(--radius-full));
}

/** surface */
.ui-SelectTrigger:where(.r-variant-surface) {
  --select-trigger-border-width: 1px;
  --select-trigger-border-color: var(--gray-a7);
  outline: 0;
  color: var(--gray-12);
  background-color: var(--color-surface);
  border: var(--select-trigger-border-width) solid var(--select-trigger-border-color);
  padding-left: var(--select-trigger-padding-x);
  padding-right: var(--select-trigger-padding-x);
}
.ui-SelectTrigger:where(.r-variant-surface):where(:focus-visible) {
  --select-trigger-border-color: var(--focus-a8);
  box-shadow: 0 0 0 2px var(--accent-4), 0 1px 2px 0 rgb(0 0 0 / 0.05);
}
@media (hover: hover) {
.ui-SelectTrigger:where(.r-variant-surface):hover {
    --select-trigger-border-color: var(--gray-a8);
}
}
.ui-SelectTrigger:where(.r-variant-surface):where([data-state='open']) {
  --select-trigger-border-color: var(--gray-a8);
}
.ui-SelectTrigger:where(.r-variant-surface):where(:disabled) {
  color: var(--gray-a11);
  background-color: var(--gray-a2);
  --select-trigger-border-color: var(--gray-a6);
}
.ui-SelectTrigger:where(.r-variant-surface):where([data-placeholder]) .ui-SelectTriggerInner {
  color: var(--gray-a10);
}

/** soft and ghost */
.ui-SelectTrigger:where(.r-variant-soft),
.ui-SelectTrigger:where(.r-variant-ghost) {
  color: var(--accent-12);
}
.ui-SelectTrigger:where(.r-variant-soft):where(:focus-visible),
.ui-SelectTrigger:where(.r-variant-ghost):where(:focus-visible) {
  outline: 2px solid var(--focus-8);
  outline-offset: -1px;
}
.ui-SelectTrigger:where(.r-variant-soft):where([data-placeholder]) .ui-SelectTriggerInner,
.ui-SelectTrigger:where(.r-variant-ghost):where([data-placeholder]) .ui-SelectTriggerInner {
  color: var(--accent-12);
  opacity: 0.6;
}
.ui-SelectTrigger:where(.r-variant-soft) {
  background-color: var(--accent-a3);
  padding-left: var(--select-trigger-padding-x);
  padding-right: var(--select-trigger-padding-x);
}
@media (hover: hover) {
.ui-SelectTrigger:where(.r-variant-soft):hover {
    background-color: var(--accent-a4);
}
}
.ui-SelectTrigger:where(.r-variant-soft):where([data-state='open']) {
  background-color: var(--accent-a4);
}
.ui-SelectTrigger:where(.r-variant-soft):where(:focus-visible) {
  outline-color: var(--accent-8);
}
.ui-SelectTrigger:where(.r-variant-soft):where(:disabled) {
  color: var(--gray-a11);
  background-color: var(--gray-a3);
}
.ui-SelectTrigger:where(.r-variant-ghost) {
  padding: var(--select-trigger-ghost-padding-y) var(--select-trigger-ghost-padding-x);
  margin: calc(0px - var(--select-trigger-ghost-padding-y)) calc(0px - var(--select-trigger-ghost-padding-x));
}
@media (hover: hover) {
.ui-SelectTrigger:where(.r-variant-ghost):hover {
    background-color: var(--accent-a3);
}
}
.ui-SelectTrigger:where(.r-variant-ghost):where([data-state='open']) {
  background-color: var(--accent-a3);
}
.ui-SelectTrigger:where(.r-variant-ghost):where(:disabled) {
  color: var(--gray-a11);
  background-color: transparent;
}
.ui-SelectTrigger:where(:disabled) .ui-SelectIcon {
  color: var(--gray-a9);
}

@layer components {
.ui-SelectItem {
    display: flex;
    align-items: center;
    height: var(--select-item-height);
    padding-left: var(--select-item-indicator-width);
    padding-right: var(--select-item-indicator-width);
    position: relative;
    box-sizing: border-box;
    outline: none;
    scroll-margin: var(--select-content-padding) 0;
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
    cursor: default;
}
}
.ui-SelectItem:where([data-disabled]) {
  cursor: not-allowed;
}
.ui-SelectItemIndicator {
  position: absolute;
  left: 0;
  width: var(--select-item-indicator-width);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.ui-SelectItem:where([data-disabled]) {
  color: var(--gray-a8);
}
:where(.r-size-1) .ui-SelectItem {
  font-size: var(--font-size-1);
  line-height: var(--line-height-1);
  letter-spacing: var(--letter-spacing-1);
  border-radius: var(--radius-1);
}
:where(.r-size-1) .ui-SelectItemIndicatorIcon {
  width: calc(8px * var(--scaling));
  height: calc(8px * var(--scaling));
}
:where(.r-size-2) .ui-SelectItem {
  line-height: var(--line-height-2);
  border-radius: var(--radius-2);
  font-size: var(--font-size-2);
  letter-spacing: var(--letter-spacing-2);
}
:where(.r-size-2) .ui-SelectItemIndicatorIcon,
:where(.r-size-3) .ui-SelectItemIndicatorIcon {
  width: calc(10px * var(--scaling));
  height: calc(10px * var(--scaling));
}
:where(.r-size-3) .ui-SelectItem {
  line-height: var(--line-height-2);
  border-radius: var(--radius-2);
  font-size: var(--font-size-3);
  letter-spacing: var(--letter-spacing-3);
}
:where(.r-variant-solid) .ui-SelectItem[data-highlighted] {
  background-color: var(--accent-9);
  color: var(--accent-contrast);
}
:where(.r-variant-solid):where(.r-high-contrast) .ui-SelectItem[data-highlighted] {
  background-color: var(--accent-12);
  color: var(--accent-1);
}
:where(.r-variant-soft) .ui-SelectItem[data-highlighted] {
  background-color: var(--accent-a4);
}

@layer components {
.ui-SelectLabel {
    display: flex;
    align-items: center;
    height: var(--select-item-height);
    padding-left: var(--select-item-indicator-width);
    padding-right: var(--select-item-indicator-width);
    color: var(--gray-a10);
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
    cursor: default;
}
}
.ui-SelectItem + .ui-SelectLabel {
  margin-top: var(--space-2);
}
:where(.r-size-1) .ui-SelectLabel {
  font-size: var(--font-size-1);
  letter-spacing: var(--letter-spacing-1);
  line-height: var(--line-height-1);
}
:where(.r-size-2) .ui-SelectLabel,
:where(.r-size-3) .ui-SelectLabel {
  font-size: var(--font-size-2);
  letter-spacing: var(--letter-spacing-2);
  line-height: var(--line-height-2);
}

@layer components {
.ui-SelectSeparator {
    height: 1px;
    margin-top: var(--space-2);
    margin-bottom: var(--space-2);
    margin-left: var(--select-item-indicator-width);
    margin-right: var(--select-separator-margin-right);
    background-color: var(--gray-a6);
}
}

@layer components {
.ui-ComboboxRoot {
    width: -moz-fit-content;
    width: fit-content;
}
.ui-ComboboxRoot:where(.r-multiple) {
    width: auto;
}
}
.ui-ComboboxRoot:where(.r-size-1) {
  --combobox-field-height: var(--space-5);
  --combobox-field-padding: calc(var(--space-1) * 1.5);
  --combobox-field-border-radius: max(var(--radius-2), var(--radius-full));
  --combobox-field-native-icon-size: var(--space-3);
  --combobox-field-font-size: var(--font-size-1);
  --combobox-field-letter-spacing: var(--letter-spacing-1);

  --combobox-trigger-gap: var(--space-2);
  --combobox-trigger-padding-x: var(--space-1);

  --combobox-decoration-container-padding-right: 0px;
  --combobox-decoration-container-margin-right: -2px;
}
.ui-ComboboxRoot:where(.r-size-2) {
  --combobox-field-height: var(--space-6);
  --combobox-field-padding: var(--space-2);
  --combobox-field-border-radius: max(var(--radius-2), var(--radius-full));
  --combobox-field-native-icon-size: var(--space-4);
  --combobox-field-font-size: var(--font-size-2);
  --combobox-field-letter-spacing: var(--letter-spacing-2);

  --combobox-trigger-gap: var(--space-2);
  --combobox-trigger-padding-x: var(--space-2);

  --combobox-decoration-container-padding-right: 2px;
  --combobox-decoration-container-margin-right: 0px;
}
.ui-ComboboxRoot:where(.r-size-3) {
  --combobox-field-height: var(--space-7);
  --combobox-field-padding: var(--space-3);
  --combobox-field-border-radius: max(var(--radius-3), var(--radius-full));
  --combobox-field-native-icon-size: var(--space-4);
  --combobox-field-font-size: var(--font-size-3);
  --combobox-field-letter-spacing: var(--letter-spacing-3);

  --combobox-trigger-gap: var(--space-3);
  --combobox-trigger-padding-x: var(--space-3);

  --combobox-decoration-container-padding-right: 5px;
  --combobox-decoration-container-margin-right: 0px;
}

.ui-ComboboxField {
  display: flex;
  align-items: stretch;
  font-weight: var(--font-weight-regular);
  font-style: normal;
  text-align: start;
  box-sizing: border-box;
  height: var(--combobox-field-height);
  padding: var(--combobox-field-border-width);
  border-radius: var(--combobox-field-border-radius);
  font-size: var(--combobox-field-font-size);
  letter-spacing: var(--combobox-field-letter-spacing);
}
.ui-ComboboxField:where([data-multiple="true"]) {
  height: auto;
}
.ui-ComboboxField::-moz-selection {
  background-color: var(--combobox-field-selection-color);
}
.ui-ComboboxField::selection {
  background-color: var(--combobox-field-selection-color);
}
.ui-ComboboxValues {
  display: flex;
  padding: calc(var(--space-1) / 2);
  gap: var(--space-1);
  align-items: center;
  flex-wrap: wrap;
  flex-grow: 1;
}
.ui-ComboboxValuesItem {
  display: flex;
  gap: var(--space-1);
  align-items: center;
  height: calc(var(--combobox-field-height) - var(--space-1) * 2);
  padding: var(--combobox-field-padding);
  border-radius: calc(var(--combobox-field-border-radius) - var(--combobox-field-border-width));
  background-color: var(--accent-a9);
  color: var(--accent-contrast);
}
.ui-ComboboxValuesItem:where([aria-current="true"]) {
  background-color: var(--red-a9);
}
@layer components {
.ui-ComboboxInput {
    text-align: inherit;
    border: none;
    padding: 0;
    width: 100%;
    font-size: 1em;
    background-color: transparent;
    border-radius: calc(var(--combobox-field-border-radius) - var(--combobox-field-border-width));
    text-indent: var(--combobox-field-padding);
    height: var(--combobox-input-height);
    cursor: auto;

    /* Reset size 2 padding bottom */
    padding-bottom: 0px;
    /* Safari credentials autofill icon */
}
}
.ui-ComboboxField:where([data-multiple="true"]) :where(.ui-ComboboxInput) {
  text-indent: calc(var(--combobox-field-padding) / 2);
  height: calc(var(--combobox-field-height) - var(--space-1) * 2);
}
.ui-ComboboxValues :where(.ui-ComboboxInput) {
  width: auto;
}
.ui-ComboboxInput:focus {
  outline: none;
  box-shadow: none;
}
.ui-ComboboxInput::-moz-selection {
  background-color: var(--combobox-field-selection-color);
}
.ui-ComboboxInput::selection {
  background-color: var(--combobox-field-selection-color);
}
.ui-ComboboxInput:where(:-webkit-autofill) {
  /* Reliably removes native autofill colors */
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: var(--gray-12);
}
.ui-ComboboxInput:where(:autofill) {
  /* Reliably removes native autofill colors */
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: var(--gray-12);
}
.ui-ComboboxTrigger {
  box-sizing: border-box;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  cursor: pointer;
  order: 0;
  margin-left: 0;
  margin-right: calc(var(--combobox-field-border-width) * -1);
  height: var(--combobox-trigger-height);

  gap: var(--combobox-trigger-gap);
  padding-left: var(--combobox-trigger-padding-x);
  padding-right: var(--combobox-trigger-padding-x);
}
.ui-ComboboxInput::-webkit-textfield-decoration-container {
  padding-right: var(--combobox-decoration-container-padding-right);
  margin-right: var(--combobox-decoration-container-margin-right);
}
.ui-ComboboxField:where(.r-variant-surface) {
  --combobox-field-selection-color: var(--focus-a5);
  --combobox-field-focus-color: var(--focus-a8);
  --combobox-field-border-width: 1px;
  --combobox-field-border-color: var(--gray-a7);
  --combobox-input-height: calc(var(--combobox-field-height) - var(--space-1));
  --combobox-trigger-height: calc(var(--combobox-field-height) - var(--space-1));

  /* Blend inner shadow with page background */
  background-clip: content-box;
  background-color: var(--color-surface);
  box-sizing: border-box;
  border: var(--combobox-field-border-width) solid var(--combobox-field-border-color);
  color: var(--gray-12);
  padding: calc(var(--combobox-field-border-width) - var(--combobox-field-border-width));
}
@supports selector(:has(*)) {
.ui-ComboboxField:where(.r-variant-surface):where(:has(.ui-ComboboxInput:focus)) {
    --combobox-field-border-color: var(--combobox-field-focus-color);
    box-shadow: 0 0 0 2px var(--accent-4), 0 1px 2px 0 rgb(0 0 0 / 0.05);
}
}
@supports not selector(:has(*)) {
.ui-ComboboxField:where(.r-variant-surface):where(:focus-within) {
    --combobox-field-border-color: var(--combobox-field-focus-color);
    box-shadow: 0 0 0 2px var(--accent-4), 0 1px 2px 0 rgb(0 0 0 / 0.05);
}
}
.ui-ComboboxField:where(.r-variant-surface) :where(.ui-ComboboxInput)::-moz-placeholder {
  color: var(--gray-a10);
}
.ui-ComboboxField:where(.r-variant-surface) :where(.ui-ComboboxInput)::placeholder {
  color: var(--gray-a10);
}
.ui-ComboboxField:where(.r-variant-surface) :where(.ui-ComboboxTrigger) {
  color: var(--gray-a11);
}
/* soft */
.ui-ComboboxField:where(.r-variant-soft) {
  --combobox-field-selection-color: var(--accent-a5);
  --combobox-field-focus-color: var(--accent-8);
  --combobox-field-border-width: 0px;
  --combobox-input-height: var(--combobox-field-height);
  --combobox-trigger-height: var(--combobox-field-height);

  background-color: var(--accent-a3);
  color: var(--accent-12);
  padding: var(--combobox-field-border-width);
}
@supports selector(:has(*)) {
.ui-ComboboxField:where(.r-variant-soft):where(:has(.ui-ComboboxInput:focus)) {
    outline: 2px solid var(--combobox-field-focus-color);
    outline-offset: -1px;
}
}
@supports not selector(:has(*)) {
.ui-ComboboxField:where(.r-variant-soft):where(:focus-within) {
    outline: 2px solid var(--combobox-field-focus-color);
    outline-offset: -1px;
}
}
.ui-ComboboxField:where(.r-variant-soft) :where(.ui-ComboboxInput)::-moz-placeholder {
  color: var(--accent-12);
  opacity: 0.6;
}
.ui-ComboboxField:where(.r-variant-soft) :where(.ui-ComboboxInput)::placeholder {
  color: var(--accent-12);
  opacity: 0.6;
}
.ui-ComboboxField:where(.r-variant-soft) :where(.ui-ComboboxTrigger) {
  color: var(--accent-12);
}
.ui-ComboboxInput:where(:disabled, :read-only)::-moz-placeholder {
  opacity: 0.5;
}
.ui-ComboboxInput:where(:disabled, :-moz-read-only)::placeholder {
  opacity: 0.5;
}
.ui-ComboboxInput:where(:disabled, :read-only)::placeholder {
  opacity: 0.5;
}
.ui-ComboboxInput:where(:disabled, :read-only):where(:-moz-placeholder) {
  cursor: var(--cursor-disabled);
}
.ui-ComboboxInput:where(:disabled, :-moz-read-only):where(:placeholder-shown) {
  cursor: var(--cursor-disabled);
}
.ui-ComboboxInput:where(:disabled, :read-only):where(:placeholder-shown) {
  cursor: var(--cursor-disabled);
}
.ui-ComboboxInput:where(:disabled, :read-only):where(:-moz-placeholder) ~ :where(.ui-ComboboxTrigger) {
  cursor: var(--cursor-disabled);
}
.ui-ComboboxInput:where(:disabled, :-moz-read-only):where(:placeholder-shown) ~ :where(.ui-ComboboxTrigger) {
  cursor: var(--cursor-disabled);
}
.ui-ComboboxInput:where(:disabled, :read-only):where(:placeholder-shown) ~ :where(.ui-ComboboxTrigger) {
  cursor: var(--cursor-disabled);
}

.ui-ComboboxContent {
  --scrollarea-scrollbar-vertical-margin-top: var(--combobox-content-padding);
  --scrollarea-scrollbar-vertical-margin-bottom: var(--combobox-content-padding);
  --scrollarea-scrollbar-horizontal-margin-left: var(--combobox-content-padding);
  --scrollarea-scrollbar-horizontal-margin-right: var(--combobox-content-padding);
}
@layer components {
.ui-ComboboxContent {
    overflow: hidden;
    box-shadow: var(--shadow-5);
    background-color: var(--color-panel-solid);
    box-sizing: border-box;
}
}
.ui-ComboboxContent:where([data-side]) {
  min-width: var(--reka-combobox-trigger-width);
  max-width: var(--reka-combobox-content-available-width);
  max-height: var(--reka-combobox-content-available-height);
  transform-origin: var(--reka-combobox-content-transform-origin);
}
.ui-ComboboxViewport {
  box-sizing: border-box;
  padding: var(--combobox-content-padding);
}
.ui-ComboboxContent:where(:has(.ui-ScrollAreaScrollbar[data-orientation='vertical'])) :where(.ui-ComboboxViewport) {
  padding-right: var(--space-3);
}
.ui-ComboboxContent:where(.r-size-1) {
  --combobox-content-padding: var(--space-1);

  --combobox-item-height: var(--space-5);
  --combobox-item-font-size: var(--font-size-1);
  --combobox-item-line-height: var(--line-height-1);
  --combobox-item-letter-spacing: var(--letter-spacing-1);
  --combobox-item-radius: var(--radius-1);

  --combobox-indicator-width: calc(var(--space-5) / 1.2);
  --combobox-indicator-icon-width: calc(8px * var(--scaling));
  --combobox-indicator-icon-height: calc(8px * var(--scaling));

  --combobox-separator-margin-right: var(--space-2);

  --combobox-label-font-size: var(--font-size-1);
  --combobox-label-letter-spacing: var(--letter-spacing-1);
  --combobox-label-line-height: var(--line-height-1);

  border-radius: var(--radius-3);
}
.ui-ComboboxContent:where(.r-size-2) {
  --combobox-item-font-size: var(--font-size-2);
  --combobox-item-letter-spacing: var(--letter-spacing-2);
}
.ui-ComboboxContent:where(.r-size-3) {
  --combobox-item-font-size: var(--font-size-3);
  --combobox-item-letter-spacing: var(--letter-spacing-3);
}
.ui-ComboboxContent:where(.r-size-2),
.ui-ComboboxContent:where(.r-size-3) {
  --combobox-content-padding: var(--space-2);
  --combobox-item-radius: var(--radius-2);
  --combobox-item-height: var(--space-6);
  --combobox-item-line-height: var(--line-height-2);
  --combobox-indicator-width: var(--space-5);
  --combobox-indicator-icon-width: calc(10px * var(--scaling));
  --combobox-indicator-icon-height: calc(10px * var(--scaling));
  --combobox-separator-margin-right: var(--space-3);

  --combobox-label-font-size: var(--font-size-2);
  --combobox-label-letter-spacing: var(--letter-spacing-2);
  --combobox-label-line-height: var(--line-height-2);

  border-radius: var(--radius-4);
}
.ui-ComboboxContent:where(.r-variant-solid) {
  --combobox-highlighted-background-color: var(--accent-9);
  --combobox-highlighted-text-color: var(--accent-contrast);
}
.ui-ComboboxContent:where(.r-variant-solid.r-high-contrast) {
  --combobox-highlighted-background-color: var(--accent-12);
  --combobox-highlighted-text-color: var(--accent-1);
}
.ui-ComboboxContent:where(.r-variant-soft) {
  --combobox-highlighted-background-color: var(--accent-a3);
  --combobox-highlighted-text-color: var(--accent-a11);
}
.ui-ComboboxContent:where(.r-variant-soft.r-high-contrast) {
  --combobox-highlighted-text-color: var(--accent-12);
}

@layer components {
.ui-ComboboxItem {
    display: flex;
    align-items: center;
    height: var(--combobox-item-height);
    padding-left: var(--combobox-indicator-width);
    padding-right: var(--combobox-indicator-width);
    position: relative;
    box-sizing: border-box;
    outline: none;
    scroll-margin: var(--combobox-content-padding) 0;
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
    cursor: default;

    font-size: var(--combobox-item-font-size);
    line-height: var(--combobox-item-line-height);
    letter-spacing: var(--combobox-item-letter-spacing);
    border-radius: var(--combobox-item-radius);
}
}
.ui-ComboboxItem:where([data-disabled]) {
  cursor: not-allowed;
}
.ui-ComboboxItem:where([data-disabled]) {
  color: var(--gray-a8);
}
.ui-ComboboxItem:where([data-highlighted]) {
  background-color: var(--combobox-highlighted-background-color);
  color: var(--combobox-highlighted-text-color);
}
.ui-ComboboxItemIndicator {
  position: absolute;
  left: 0;
  width: var(--combobox-indicator-width);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.ui-ComboboxItemIndicatorIcon {
  width: var(--combobox-indicator-icon-width);
  height: var(--combobox-indicator-icon-height);
}

@layer components {
.ui-ComboboxLabel {
    display: flex;
    align-items: center;
    height: var(--combobox-item-height);
    padding-left: calc(var(--combobox-indicator-width) / 2);
    padding-right: var(--combobox-indicator-width);
    color: var(--gray-a10);
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
    cursor: default;

    font-size: var(--combobox-label-font-size);
    letter-spacing: var(--combobox-label-letter-spacing);
    line-height: var(--combobox-label-line-height);
}
}
.ui-SelectItem + .ui-ComboboxLabel {
  margin-top: var(--space-2);
}

@layer components {
.ui-ComboboxEmpty {
    box-sizing: border-box;
    outline: none;
    scroll-margin: var(--combobox-content-padding) 0;
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
    cursor: default;
    padding-left: calc(var(--combobox-indicator-width) / 2);
    padding-right: var(--combobox-indicator-width);
    font-size: var(--combobox-item-font-size);
    line-height: var(--combobox-item-line-height);
    letter-spacing: var(--combobox-item-letter-spacing);
    color: var(--gray-11);
}
}
.ui-RadioBase {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: top;
  flex-shrink: 0;
  cursor: default;
  width: var(--radio-size);
  height: var(--radio-size);
  border: none;
  box-shadow: none;
}
.ui-RadioBase:where(.r-size-1) {
  --radio-size: calc(var(--space-4) * 0.875);
}
.ui-RadioBase:where(.r-size-2) {
  --radio-size: var(--space-4);
}
.ui-RadioBase:where(.r-size-3) {
  --radio-size: calc(var(--space-4) * 1.25);
}
.ui-RadioBase:checked {
  /* reset for tailwind */
  background-image: none;
}
.ui-RadioBase:focus {
  /* reset for tailwind */
  box-shadow: none;
}
.ui-RadioBase:where(:focus-visible) {
  outline: none;
}
.ui-RadioBase:where(:disabled, [data-disabled]) {
  cursor: not-allowed;
}
.ui-RadioBase::before {
  content: '';
  display: block;
  height: var(--radio-size);
  width: var(--radio-size);
  border-radius: 100%;
}
.ui-RadioBase::after {
  pointer-events: none;
  position: absolute;
  height: var(--radio-size);
  width: var(--radio-size);
  border-radius: 100%;
  /* Scale via transform to achieve perfect sub-pixel positioning */
  transform: scale(0.4);
}
.ui-RadioBase:where(:checked, [data-state='checked'])::after {
  content: '';
}
.ui-RadioBase:where(:focus-visible)::before {
  outline: 2px solid var(--focus-8);
  outline-offset: 2px;
}
:where(.ui-RadioGroupRoot.r-variant-surface) .ui-RadioBase:where(:not(:checked), [data-state='unchecked'])::before,
.ui-RadioBase:where(.r-variant-surface):where(:not(:checked), [data-state='unchecked'])::before {
  background-color: var(--color-surface);
  box-shadow: inset 0 0 0 1px var(--gray-a7);
}
:where(.ui-RadioGroupRoot.r-variant-surface) .ui-RadioBase:where(:checked, [data-state='checked'])::before,
.ui-RadioBase:where(.r-variant-surface):where(:checked, [data-state='checked'])::before {
  background-color: var(--accent-indicator);
}
:where(.ui-RadioGroupRoot.r-variant-surface) .ui-RadioBase::after,
.ui-RadioBase:where(.r-variant-surface)::after {
  background-color: var(--accent-contrast);
}
:where(.ui-RadioGroupRoot.r-variant-surface.r-high-contrast) .ui-RadioBase:where(:checked, [data-state='checked'])::before,
.ui-RadioBase:where(.r-variant-surface.r-high-contrast):where(:checked, [data-state='checked'])::before {
  background-color: var(--accent-12);
}
:where(.ui-RadioGroupRoot.r-variant-surface.r-high-contrast) .ui-RadioBase::after,
.ui-RadioBase:where(.r-variant-surface.r-high-contrast)::after {
  background-color: var(--accent-1);
}
:where(.ui-RadioGroupRoot.r-variant-surface) .ui-RadioBase:where(:disabled, [data-disabled])::before,
.ui-RadioBase:where(.r-variant-surface):where(:disabled, [data-disabled])::before {
  box-shadow: inset 0 0 0 1px var(--gray-a6);
  background-color: var(--gray-a3);
}
:where(.ui-RadioGroupRoot.r-variant-surface) .ui-RadioBase:where(:disabled, [data-disabled])::after,
.ui-RadioBase:where(.r-variant-surface):where(:disabled, [data-disabled])::after {
  background-color: var(--gray-a8);
}
:where(.ui-RadioGroupRoot.r-variant-soft) .ui-RadioBase::before,
.ui-RadioBase:where(.r-variant-soft)::before {
  background-color: var(--accent-a4);
}
:where(.ui-RadioGroupRoot.r-variant-soft) .ui-RadioBase::after,
.ui-RadioBase:where(.r-variant-soft)::after {
  background-color: var(--accent-a11);
}
:where(.ui-RadioGroupRoot.r-variant-soft.r-high-contrast) .ui-RadioBase::after,
.ui-RadioBase:where(.r-variant-soft.r-high-contrast)::after {
  background-color: var(--accent-12);
}
:where(.ui-RadioGroupRoot.r-variant-soft:focus-visible) .ui-RadioBase::before,
.ui-RadioBase:where(.r-variant-soft:focus-visible)::before {
  outline-color: var(--accent-a8);
}
:where(.ui-RadioGroupRoot.r-variant-soft) .ui-RadioBase:where(:disabled, [data-disabled])::before,
.ui-RadioBase:where(.r-variant-soft):where(:disabled, [data-disabled])::before {
  background-color: var(--gray-a3);
}
:where(.ui-RadioGroupRoot.r-variant-soft) .ui-RadioBase:where(:disabled, [data-disabled])::after,
.ui-RadioBase:where(.r-variant-soft):where(:disabled, [data-disabled])::after {
  background-color: var(--gray-a8);
}

.ui-Radio {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}

.ui-RadioGroupRoot:where(.r-size-1) {
  --radio-size: calc(var(--space-4) * 0.875);
}
.ui-RadioGroupRoot:where(.r-size-2) {
  --radio-size: var(--space-4);
}
.ui-RadioGroupRoot:where(.r-size-3) {
  --radio-size: calc(var(--space-4) * 1.25);
}

@layer components {
.ui-RadioGroupItem {
    display: inline-flex;
    align-items: center;
    gap: .5em;
    width: -moz-fit-content;
    width: fit-content;
}
}

.ui-RadioCardsRoot:where(.r-size-1) {
  --card-padding: var(--space-3);
  --card-border-radius: max(var(--radius-4), var(--radius-full));
}
.ui-RadioCardsRoot:where(.r-size-2) {
  --card-padding: var(--space-4);
  --card-border-radius: max(var(--radius-4), var(--radius-full));
}
.ui-RadioCardsRoot:where(.r-size-3) {
  --card-padding: var(--space-5);
  --card-border-radius: max(var(--radius-5), var(--radius-full));
}
@layer components {
.ui-BaseCard {
    display: block;
    position: relative;
    overflow: hidden;
    font-style: normal;
    text-align: start;
    box-sizing: border-box;
    border-radius: var(--card-border-radius);
    padding: var(--card-padding);
    border-color: var(--card-border-color, var(--gray-a5));
    border-width: var(--card-border-width, 1px);
    border-style: solid;
    width: 100%;
}
}
.ui-BaseCard:where(:-moz-any-link, button, label):where(:hover) {
  --card-border-color: var(--gray-a7);
}
.ui-BaseCard:where(:any-link, button, label):where(:hover) {
  --card-border-color: var(--gray-a7);
}
.ui-BaseCard:where(:-moz-any-link, button, label):where(:focus-visible) {
  --card-border-color: var(--focus-8);
  box-shadow: 0 0 0 2px var(--accent-4), 0 1px 2px 0 rgb(0 0 0 / 0.05);
}
.ui-BaseCard:where(:any-link, button, label):where(:focus-visible) {
  --card-border-color: var(--focus-8);
  box-shadow: 0 0 0 2px var(--accent-4), 0 1px 2px 0 rgb(0 0 0 / 0.05);
}

.ui-RadioCardsItem {
  height: 100%;
}
.ui-RadioCardsItem:where([data-state="checked"]) {
  --card-border-color: var(--accent-10);
  box-shadow: 0 0 0 1px var(--accent-10);
}

@layer components {
.ui-RadioTabsRoot {
    display: inline-flex;
    width: -moz-fit-content;
    width: fit-content;
    align-items: center;
    box-sizing: border-box;
    padding: var(--radio-tabs-list-padding);
    border-radius: var(--radio-tabs-list-radius);
    font-size: var(--radio-tabs-font-size);
}
}
.ui-RadioTabsRoot:where(.r-size-1) {
  --radio-tabs-font-size: var(--font-size-1);
  --radio-tabs-list-padding: var(--space-1);
  --radio-tabs-list-radius: max(var(--radius-2), var(--radius-full));
  --radio-tabs-item-padding: 3px 6px;
  --radio-tabs-item-radius: max(var(--radius-1), var(--radius-full));
}
.ui-RadioTabsRoot:where(.r-size-2) {
  --radio-tabs-font-size: var(--font-size-2);
  --radio-tabs-list-padding: var(--space-1);
  --radio-tabs-list-radius: max(var(--radius-3), var(--radius-full));
  --radio-tabs-item-padding: 4px 8px;
  --radio-tabs-item-radius: max(var(--radius-2), var(--radius-full));
}
.ui-RadioTabsRoot:where(.r-variant-surface) {
  background-color: var(--accent-surface);
  box-shadow: inset 0 0 0 1px var(--accent-a7);
}
.ui-RadioTabsRoot:where(.r-variant-classic) {
  background-color: var(--accent-a3);
}
.ui-RadioTabsRoot:where(.r-variant-soft) {
  background-color: var(--accent-a3);
}

.ui-RadioTabsItem {
  display: inline-flex;
  flex-grow: 1;
  justify-content: center;
  align-items: center;
  color: var(--gray-a11);
  padding: var(--radio-tabs-item-padding);
  border-radius: var(--radio-tabs-item-radius);
}
.ui-RadioTabsItem:where([data-state="unchecked"]) {
  letter-spacing: var(--tab-inactive-letter-spacing);
  word-spacing: var(--tab-inactive-word-spacing);
}
.ui-RadioTabsItem:where([data-state="checked"]) {
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--tab-active-letter-spacing);
  word-spacing: var(--tab-active-word-spacing);
}
.ui-RadioTabsRoot:where(.r-variant-classic) :where(.ui-RadioTabsItem[data-state="checked"]) {
  color: var(--gray-12);
  background-color: var(--color-background);
  box-shadow: var(--shadow-2);
}
.ui-RadioTabsRoot:where(.r-variant-soft) :where(.ui-RadioTabsItem[data-state="checked"]),
.ui-RadioTabsRoot:where(.r-variant-surface) :where(.ui-RadioTabsItem[data-state="checked"]) {
  color: var(--accent-a11);
  background-color: var(--accent-a3);
}
@media (hover: hover) {
:where(.ui-RadioTabsRoot.r-variant-classic) .ui-RadioTabsItem:where(:hover) {
    color: var(--gray-12);
}
:where(.ui-RadioTabsRoot.r-variant-classic) .ui-RadioTabsItem:where(:hover) {
    color: var(--gray-12);
}
}

.ui-TabsList::-webkit-scrollbar {
  display: none;
}
.ui-TabsList:where(.r-size-1) {
  --tab-font-size: var(--font-size-1);
  --tab-line-height: var(--line-height-1);
  --tab-letter-spacing: var(--letter-spacing-1);
  --tab-height: var(--space-6);
  --tab-padding-x: var(--space-1);
  --tab-radius: max(var(--radius-2), var(--radius-full));
  --tab-item-radius: max(var(--radius-1), var(--radius-full));
  --tab-inner-padding-x: var(--space-1);
  --tab-inner-height: var(--space-5);
}
.ui-TabsList:where(.r-size-2) {
  --tab-font-size: var(--font-size-2);
  --tab-line-height: var(--line-height-2);
  --tab-letter-spacing: var(--letter-spacing-2);
  --tab-height: var(--space-7);
  --tab-padding-x: var(--space-2);
  --tab-radius: max(var(--radius-3), var(--radius-full));
  --tab-item-radius: max(var(--radius-2), var(--radius-full));
  --tab-inner-padding-x: var(--space-2);
  --tab-inner-height: calc(var(--space-6) - var(--space-1));
}
.ui-TabsList:where(.r-variant-surface.r-size-1),
.ui-TabsList:where(.r-variant-soft.r-size-1) {
  --tab-inner-padding-x: calc(var(--space-2) / 4 * 3);
}
@layer components {
.ui-TabsList {
    justify-content: flex-start;
    position: relative;
    overflow-x: auto;
    white-space: nowrap;
    font-style: normal;
    scrollbar-width: none;
    font-size: var(--tab-font-size);
    line-height: var(--tab-line-height);
    letter-spacing: var(--tab-letter-spacing);
}

  /** classic & surface */
.ui-TabsList:where(.r-variant-surface, .r-variant-classic) {
    position: relative;
    display: inline-flex;
    width: -moz-fit-content;
    width: fit-content;
    align-items: center;
    vertical-align: top;
    flex-shrink: 0;
    border-radius: var(--tab-radius);
}
.ui-TabsList:where(.r-variant-classic) {
    background-color: var(--accent-a3);
    padding-left: var(--tab-padding-x);
    padding-right: var(--tab-padding-x);
}
.ui-TabsList:where(.r-variant-surface) {
    --tab-item-radius: 0;
    --tab-inner-height: var(--tab-height);
    box-shadow: inset 0 0 0 1px var(--gray-a6);
}

  /** soft & outline */
.ui-TabsList:where(.r-variant-outline, .r-variant-soft) {
    display: flex;
    box-shadow: inset 0 -1px 0 0 var(--gray-a5);
}
.ui-TabsList:where(.r-variant-soft) {
    padding-left: var(--tab-padding-x);
    padding-right: var(--tab-padding-x);
}
}
.ui-TabsIndicator {
  position: absolute;
  left: 0;
  transition-property: width, transform;
  transform: translateX(var(--reka-tabs-indicator-position));
  width: var(--reka-tabs-indicator-size);
}
.ui-TabsList:where(.r-variant-surface) :where(.ui-TabsIndicator) {
  top: 0;
  height: var(--tab-height);
  background-color: var(--accent-a3);
  transition-duration: 100ms;
}
.ui-TabsList:where(.r-variant-classic) :where(.ui-TabsIndicator) {
  top: calc((var(--tab-height) - var(--tab-inner-height)) / 2);
  height: var(--tab-inner-height);
  background-color: var(--color-panel-solid);
  box-shadow:
    0 0 0 0.5px var(--black-a1),
    0 1px 1px 0 var(--gray-a2),
    0 2px 1px -1px var(--black-a1),
    0 1px 3px 0 var(--black-a1);
  border-radius: var(--tab-item-radius);
  transition-duration: 100ms;
}
.ui-TabsList:where(.r-variant-soft) :where(.ui-TabsIndicator) {
  top: calc((var(--tab-height) - var(--tab-inner-height)) / 2);
  height: var(--tab-inner-height);
  background-color: var(--accent-a3);
  border-radius: var(--tab-item-radius);
  transition-duration: 100ms;
}
.ui-TabsList:where(.r-variant-outline) :where(.ui-TabsIndicator) {
  bottom: 0;
  height: 2px;
  background-color: var(--accent-indicator);
  transition-duration: 300ms;
}

/** high contrast */
:where(.ui-TabsList.r-variant-outline.r-high-contrast) .ui-TabsIndicator {
  background-color: var(--accent-12);
}

.ui-TabTrigger {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  box-sizing: border-box;
  height: var(--tab-height);
  color: var(--gray-a11);
  outline: none;
}
.ui-TabTrigger:disabled {
  color: var(--gray-a8);
  border-color: currentColor;
}
.ui-TabTriggerInner,
.ui-TabTriggerInnerHidden {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  height: var(--tab-inner-height);
  padding-left: var(--tab-inner-padding-x);
  padding-right: var(--tab-inner-padding-x);
  border-radius: var(--tab-item-radius);
}
.ui-TabTriggerInner {
  position: absolute;
}
:where(.ui-TabTrigger[data-state='inactive']) .ui-TabTriggerInner {
  letter-spacing: var(--tab-inactive-letter-spacing);
  word-spacing: var(--tab-inactive-word-spacing);
}
:where(.ui-TabTrigger[data-state='active']) .ui-TabTriggerInner {
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--tab-active-letter-spacing);
  word-spacing: var(--tab-active-word-spacing);
}
.ui-TabTriggerInnerHidden {
  visibility: hidden;
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--tab-active-letter-spacing);
  word-spacing: var(--tab-active-word-spacing);
}
@media (hover: hover) {
.ui-TabsList:where(.r-variant-outline, .r-variant-classic) :where(.ui-TabTrigger:hover) {
    color: var(--gray-12);
}
.ui-TabsList:where(.r-variant-surface, .r-variant-soft) :where(.ui-TabTrigger:hover) {
    color: var(--accent-a11);
}
.ui-TabsList:where(.r-variant-outline) :where(.ui-TabTrigger:not(:disabled):hover) :where(.ui-TabTriggerInner) {
    background-color: var(--gray-a3);
}
.ui-TabTrigger:where(:focus-visible:hover) :where(.ui-TabTriggerInner) {
    background-color: var(--accent-a3);
}
}
.ui-TabTrigger:where(:focus-visible) :where(.ui-TabTriggerInner) {
  outline: 2px solid var(--focus-8);
  outline-offset: -2px;
}
.ui-TabsList:where(.r-variant-outline) :where(.ui-TabTrigger) {
  padding-left: var(--tab-padding-x);
  padding-right: var(--tab-padding-x);
}
.ui-TabsList:where(.r-variant-classic, .r-variant-outline) :where(.ui-TabTrigger[data-state='active']) {
  color: var(--gray-12);
}
.ui-TabsList:where(.r-variant-soft) :where(.ui-TabTrigger + .ui-TabTrigger) {
  margin-left: calc(var(--tab-padding-x) / 2)
}
.ui-TabsList:where(.r-variant-surface) :where(.ui-TabTrigger + .ui-TabTrigger) {
  box-shadow: inset 1px 0 0 var(--gray-a4);
}
.ui-TabsList:where(.r-variant-surface, .r-variant-soft) :where(.ui-TabTrigger[data-state='active']) {
  color: var(--accent-a11);
}

.ui-Editable:where(.r-size-1) {
  --editable-padding-x: var(--space-1);
  --editable-border-radius: max(var(--radius-2), var(--radius-full));
}
.ui-Editable:where(.r-size-2) {
  --editable-padding-x: var(--space-2);
  --editable-border-radius: max(var(--radius-2), var(--radius-full));
}
.ui-Editable:where(.r-size-3) {
  --editable-padding-x: var(--space-3);
  --editable-border-radius: max(var(--radius-3), var(--radius-full));
}
.ui-EditableArea {
  padding-left: var(--editable-padding-x);
  padding-right: var(--editable-padding-x);
  border-radius: var(--editable-border-radius);
  overflow: hidden;
  text-overflow: ellipsis;
}
.ui-EditableArea:where([data-focused]),
.ui-EditableArea:where(:hover) {
  background-color: var(--accent-a3);
}
.ui-EditablePreview {
  white-space: pre;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.ui-EditableInput {
  outline: none;
  max-width: 100%;
}

.ui-AccordionRoot {
  overflow: hidden;
}
.ui-AccordionRoot:where(.r-size-1) {
  --accordion-padding: var(--space-3);
  --accordion-trigger-font-size: var(--font-size-3);
  --accordion-trigger-gap: var(--space-1);
  --accordion-content-font-size: var(--font-size-2);
  --accordion-indicator-line-width: 1px;
}
.ui-AccordionRoot:where(.r-size-2) {
  --accordion-padding: var(--space-4);
  --accordion-trigger-font-size: var(--font-size-4);
  --accordion-trigger-gap: var(--space-2);
  --accordion-content-font-size: var(--font-size-3);
  --accordion-indicator-line-width: 1px;
}
.ui-AccordionRoot:where(.r-size-3) {
  --accordion-padding: var(--space-5);
  --accordion-trigger-font-size: var(--font-size-5);
  --accordion-trigger-gap: var(--space-3);
  --accordion-content-font-size: var(--font-size-4);
  --accordion-indicator-line-width: 2px;
}

.ui-AccordionItem + .ui-AccordionItem {
  border-top: 1px solid var(--gray-a5);
}

@keyframes accordion-down {
from {
    height: 0;
}
to {
    height: var(--reka-accordion-content-height);
}
}
@keyframes accordion-up {
from {
    height: var(--reka-accordion-content-height);
}
to {
    height: 0;
}
}
@layer components {
.ui-AccordionContent {
    overflow: hidden;
    font-weight: var(--font-weight-regular);
    font-size: var(--accordion-content-font-size);
}
}
.ui-AccordionContent:where([data-state="open"]) {
  animation: accordion-down 0.2s ease-out;
}
.ui-AccordionContent:where([data-state="closed"]) {
  animation: accordion-up 0.2s ease-out;
}
.ui-AccordionContentInner {
  padding-bottom: var(--accordion-padding);
}

.ui-AccordionIndicator {
  display: inline-flex;
  align-items: center;
  --accordion-indicator-color: var(--gray-10);
}
.ui-AccordionIndicator:where([data-side="left"]) {
  order: -1;
}
.ui-AccordionIndicator:where([data-side="right"]) {
  order: 0;
}
.ui-AccordionIndicator-chevron {
  transition: transform 0.2s ease;
  font-size: var(--accordion-indicator-icon-size);
  color: var(--accordion-indicator-color);
}
:where([data-state="open"]) .ui-AccordionIndicator-chevron {
  transform: rotate(90deg);
}
.ui-AccordionIndicator-plus {
  position: relative;
  width: calc(var(--accordion-indicator-icon-size) - var(--space-1));
  height: calc(var(--accordion-indicator-icon-size) - var(--space-1));
  cursor: pointer;
  display: inline-block;
}
.ui-AccordionIndicator-plus-1,
.ui-AccordionIndicator-plus-2 {
  position: absolute;
  background-color: var(--accordion-indicator-color);
  border-radius: 2px;
  transition: transform 0.3s, opacity 0.3s;
}
.ui-AccordionIndicator-plus-1 {
  top: 50%;
  left: 0;
  width: 100%;
  height: var(--accordion-indicator-line-width);
  transform: translateY(-50%) rotate(0deg);
}
.ui-AccordionIndicator-plus-2 {
  top: 0;
  left: 50%;
  width: var(--accordion-indicator-line-width);
  height: 100%;
  transform: translateX(-50%) rotate(0deg);
}
:where([data-state="open"]) .ui-AccordionIndicator-plus-1 {
  transform: translateY(-50%) rotate(180deg);
}
:where([data-state="open"]) .ui-AccordionIndicator-plus-2 {
  transform: translateX(-50%) rotate(90deg);
  opacity: 0;
  height: 0;
}

@layer components {
.ui-AccordionTrigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-align: initial;
    width: 100%;
    cursor: pointer;
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
    font-size: var(--accordion-trigger-font-size);
    padding-top: var(--accordion-padding);
    padding-bottom: var(--accordion-padding);
    font-weight: var(--font-weight-medium);
    gap: var(--accordion-trigger-gap);
    --accordion-indicator-icon-size: var(--accordion-trigger-font-size);
}
}
.ui-AccordionTrigger:hover {
  text-decoration: underline;
}
.ui-AccordionTriggerText {
  flex-grow: 1;
}

.ui-CollapsibleRoot:where(.r-size-1) {
  --collapsible-font-size: var(--font-size-2);
  --collapsible-trigger-gap: calc(var(--space-1) / 2);
  --collapsible-indicator-icon-size: var(--font-size-2);
  --collapsible-padding-y: var(--space-2);
  --collapsible-padding-x: var(--space-3);
  --collapsible-radius: max(var(--radius-1), var(--radius-full))
}
.ui-CollapsibleRoot:where(.r-size-2) {
  --collapsible-font-size: var(--font-size-3);
  --collapsible-trigger-gap: var(--space-1);
  --collapsible-indicator-icon-size: var(--font-size-3);
  --collapsible-padding-y: var(--space-3);
  --collapsible-padding-x: var(--space-4);
  --collapsible-radius: max(var(--radius-2), var(--radius-full))
}
.ui-CollapsibleRoot:where(.r-size-3) {
  --collapsible-font-size: var(--font-size-4);
  --collapsible-trigger-gap: calc(var(--space-2) * 3 / 4);
  --collapsible-indicator-icon-size: var(--font-size-5);
  --collapsible-padding-y: var(--space-3);
  --collapsible-padding-x: var(--space-4);
  --collapsible-radius: max(var(--radius-4), var(--radius-full))
}
.ui-CollapsibleRoot:where(.r-size-4) {
  --collapsible-font-size: var(--font-size-7);
  --collapsible-trigger-gap: var(--space-2);
  --collapsible-indicator-icon-size: var(--font-size-7);
  --collapsible-padding-y: var(--space-3);
  --collapsible-padding-x: var(--space-5);
  --collapsible-radius: max(var(--radius-4), var(--radius-full))
}
.ui-CollapsibleRoot:where(.r-variant-soft, .r-variant-surface) {
  --collapsible-trigger-background-color: var(--accent-a2);
  --collapsible-trigger-hover-background-color: var(--accent-a3);
  --collapsible-trigger-open-background-color: var(--accent-a3);
  --collapsible-trigger-open-text-color: var(--accent-a11);

  border-radius: var(--collapsible-radius);
}
.ui-CollapsibleRoot:where(.r-variant-surface) {
  box-shadow: inset 0 0 0 1px var(--gray-a4);
}
.ui-CollapsibleRoot:where(.r-variant-surface):where([data-state="open"]) {
  box-shadow: inset 0 0 0 1px var(--gray-a5);
}
.ui-CollapsibleRoot:where(.r-variant-soft, .r-variant-surface):where([data-accent-color="gray"]) {
  --collapsible-trigger-open-text-color: var(--accent-12);
}

@layer components {
.ui-CollapsibleIndicator {
    display: inline-flex;
    align-items: center;
    font-size: var(--collapsible-indicator-icon-size);
    transition: transform 0.2s ease;
    color: var(--gray-10);
}
}
.ui-CollapsibleIndicator:where([data-side="left"]) {
  order: -1;
}
:where([aria-expanded="false"]) .ui-CollapsibleIndicator,
:where([data-state="closed"]) .ui-CollapsibleIndicator {
  transform: rotate(0);
}
:where([aria-expanded="true"]) .ui-CollapsibleIndicator,
:where([data-state="open"]) .ui-CollapsibleIndicator {
  transform: rotate(90deg);
}

@layer components {
.ui-CollapsibleTrigger {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    text-align: initial;
    gap: var(--collapsible-trigger-gap);
    font-size: var(--collapsible-font-size);
    font-weight: var(--font-weight-medium);
}
}
.ui-CollapsibleTriggerText {
  flex-grow: 1;
  text-align: initial;
}
:where(.ui-CollapsibleRoot:not(.r-variant-ghost)) .ui-CollapsibleTrigger {
  background-color: var(--collapsible-trigger-background-color);
  padding-block: var(--collapsible-padding-y);
  padding-inline: var(--collapsible-padding-x);
  width: 100%;
  border-radius: var(--collapsible-radius);
  transition: border-radius 0.2s ease;
}
:where(.ui-CollapsibleRoot:not(.r-variant-ghost)) .ui-CollapsibleTrigger:where(:hover) {
  background-color: var(--collapsible-trigger-hover-background-color);
}
:where(.ui-CollapsibleRoot:not(.r-variant-ghost)) .ui-CollapsibleTrigger:where([data-state="open"]) {
  background-color: var(--collapsible-trigger-open-background-color);
  color: var(--collapsible-trigger-open-text-color);
  border-radius: var(--collapsible-radius) var(--collapsible-radius) 0 0;
}

@keyframes collapsible-down {
from {
    height: 0;
    opacity: 1;
}
to {
    height: var(--reka-collapsible-content-height);
    opacity: 1;
}
}
@keyframes collapsible-up {
from {
    opacity: 1;
    height: var(--reka-collapsible-content-height);
}
to {
    opacity: 0;
    height: 0;
}
}
@layer components {
.ui-CollapsibleContent {
    overflow: hidden;
    font-size: var(--collapsible-font-size);
    font-weight: var(--font-weight-regular);
    padding-block: var(--collapsible-padding-y);
}
}
.ui-CollapsibleContent:where([data-state="open"]) {
  animation: collapsible-down 0.2s ease-out;
}
.ui-CollapsibleContent:where([data-state="closed"]) {
  animation: collapsible-up 0.2s ease-in;
}
:where(.ui-CollapsibleRoot.r-variant-soft) .ui-CollapsibleContent {
  background-color: var(--accent-a2);
}
:where(.ui-CollapsibleRoot:not(.r-variant-ghost)) .ui-CollapsibleContent {
  padding-inline: var(--collapsible-padding-x);
}

.ui-PaginationList {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}
.ui-PaginationList .ui-Button {
  height: var(--button-height);
  width: var(--button-height);
  padding: 0;
}
.ui-PaginationRoot:where(.r-variant-ghost):where([data-accent-color="gray"]) :where(.ui-Button) {
  color: var(--accent-12);
}

/** selected on ghost -> outline */
.ui-PaginationRoot:where(.r-variant-ghost) :where(.ui-Button[data-selected]) {
  box-shadow: inset 0 0 0 1px var(--accent-a6);
}
.ui-PaginationRoot:where(.r-variant-soft, .r-variant-surface, .r-variant-outline) :where(.ui-Button[data-selected]) {
  background-color: var(--accent-9);
  color: var(--accent-contrast);
}
.ui-PaginationRoot:where([data-accent-color="gray"]):where(.r-variant-soft, .r-variant-surface, .r-variant-outline) :where(.ui-Button[data-selected]) {
  background-color: var(--accent-12);
}
.ui-PaginationRoot:where(.r-variant-surface, .r-variant-outline) :where(.ui-Button[data-selected]) {
  box-shadow: none;
}

.ui-root {
  --spinner-animation-duration: 800ms;
  --spinner-opacity: 0.65;
}
.ui-SpinnerIcon {
  display: inline-block;
  position: relative;
  opacity: var(--spinner-opacity);
  vertical-align: middle;
  width: 1em;
  height: 1em;
  transform: scale(0.8334);
}
.ui-SpinnerLeaf {
  position: absolute;
  top: 0;
  left: calc(50% - 12.5% / 2);
  width: 12.5%;
  height: 100%;
  animation: ui-spinner-leaf-fade var(--spinner-animation-duration) linear infinite;
}
.ui-SpinnerLeaf::before {
  content: '';
  display: block;
  width: 100%;
  height: 30%;
  border-radius: var(--radius-1);
  background-color: currentColor;
}
.ui-SpinnerLeaf:where(:nth-child(1)) {
  transform: rotate(0deg);
  animation-delay: calc(-8 / 8 * var(--spinner-animation-duration));
}
.ui-SpinnerLeaf:where(:nth-child(2)) {
  transform: rotate(45deg);
  animation-delay: calc(-7 / 8 * var(--spinner-animation-duration));
}
.ui-SpinnerLeaf:where(:nth-child(3)) {
  transform: rotate(90deg);
  animation-delay: calc(-6 / 8 * var(--spinner-animation-duration));
}
.ui-SpinnerLeaf:where(:nth-child(4)) {
  transform: rotate(135deg);
  animation-delay: calc(-5 / 8 * var(--spinner-animation-duration));
}
.ui-SpinnerLeaf:where(:nth-child(5)) {
  transform: rotate(180deg);
  animation-delay: calc(-4 / 8 * var(--spinner-animation-duration));
}
.ui-SpinnerLeaf:where(:nth-child(6)) {
  transform: rotate(225deg);
  animation-delay: calc(-3 / 8 * var(--spinner-animation-duration));
}
.ui-SpinnerLeaf:where(:nth-child(7)) {
  transform: rotate(270deg);
  animation-delay: calc(-2 / 8 * var(--spinner-animation-duration));
}
.ui-SpinnerLeaf:where(:nth-child(8)) {
  transform: rotate(315deg);
  animation-delay: calc(-1 / 8 * var(--spinner-animation-duration));
}
@keyframes ui-spinner-leaf-fade {
from {
    opacity: 1;
}
to {
    opacity: 0.25;
}
}

.ui-ToastItem {
  position: absolute;
  display: flex;
  align-items: center;
  gap: var(--toast-gap);
  left: auto;
  right: auto;
  bottom: auto;
  top: auto;
  width: 100%;
  background: var(--color-panel-solid);
  box-shadow: 0 4px 12px var(--gray-a4);
  border: 1px solid var(--gray-a3);
  border-radius: var(--radius-3);
  padding: var(--space-4);
  opacity: 1;
  z-index: calc(0 - var(--toast-index));
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.5s;
  --toast-collapse-scale: calc(max(0, 1 - (var(--toast-index) * 0.06)));
}
.ui-ToastItem::after {
  content: "";
  position: absolute;
  left: 0px;
  height: calc(var(--toast-gap) + 1px);
  bottom: 100%;
  width: 100%;
}
.ui-ToastItem:where([data-swipe="move"]) {
  transition: none;
}
.ui-ToastItem:where([data-visible="false"]) {
  display: none;
}
:where(.ui-ToastViewport[data-x-position="left"]) .ui-ToastItem {
  left: 0;
}
:where(.ui-ToastViewport[data-x-position="right"]) .ui-ToastItem {
  right: 0;
}
:where(.ui-ToastViewport[data-y-position="top"]) .ui-ToastItem {
  top: 0;
  --toast-expanded-offset-y: calc(var(--toast-offset-y) + var(--toast-index) * var(--toast-gap) + var(--reka-toast-swipe-move-y, 0px));
}
:where(.ui-ToastViewport[data-y-position="bottom"]) .ui-ToastItem {
  bottom: 0;
  --toast-expanded-offset-y: calc(var(--toast-offset-y) * -1 + var(--toast-index) * var(--toast-gap) * -1 + var(--reka-toast-swipe-move-y, 0px));
}
:where(.ui-ToastViewport[data-y-position="top"]) .ui-ToastItem:where([data-expanded="false"]) {
  transform:
    translateX(var(--reka-toast-swipe-move-x, 0px))
    translateY(calc(var(--reka-toast-swipe-move-y, 0px) + (min(var(--toast-index), 10) * 20%)))
    scale(var(--toast-collapse-scale));
}
:where(.ui-ToastViewport[data-y-position="bottom"]) .ui-ToastItem:where([data-expanded="false"]) {
  transform:
    translateX(var(--reka-toast-swipe-move-x, 0px))
    translateY(calc(var(--reka-toast-swipe-move-y, 0px) + var(--toast-offset-y) * -0.2))
    scale(var(--toast-collapse-scale));
}
.ui-ToastItem:where([data-expanded="true"]) {
  transform: translateX(var(--reka-toast-swipe-move-x, 0px)) translateY(var(--toast-expanded-offset-y));
}
.ui-ToastItem:where([data-swipe-direction="left"]) {
  --toast-item-swipe-to-x: calc(0 - 100% - var(--toast-x-position))
}
.ui-ToastItem:where([data-swipe-direction="right"]) {
  --toast-item-swipe-to-x: calc(100% + var(--toast-x-position))
}
.ui-ToastItem:where([data-swipe-direction="up"]) {
  --toast-item-swipe-to-y: calc(0 - 100% - var(--toast-y-position))
}
.ui-ToastItem:where([data-swipe-direction="down"]) {
  --toast-item-swipe-to-y: calc(100% + var(--toast-y-position))
}
.ui-ToastItem:where([data-state="closed"]),
.ui-ToastItem:where([data-swipe="closed"]) {
  animation: ui-fade-out 100ms ease-in;
}
.ui-ToastItem:where([data-swipe-direction="left"][data-swipe="end"]),
.ui-ToastItem:where([data-swipe-direction="right"][data-swipe="end"]) {
  animation: toast-swipe-x 100ms ease-out;
}
.ui-ToastItem:where([data-swipe-direction="top"][data-swipe="end"]),
.ui-ToastItem:where([data-swipe-direction="bottom"][data-swipe="end"]) {
  animation: toast-swipe-y 100ms ease-out;
}
@keyframes toast-swipe-x {
from {
    transform: translateX(var(--reka-toast-swipe-end-x)) translateY(var(--toast-expanded-offset-y));
}
to {
    transform: translateX(var(--toast-item-swipe-to-x)) translateY(var(--toast-expanded-offset-y));
}
}
@keyframes toast-swipe-y {
from {
    transform: translateY(var(--reka-toast-swipe-end-y));
}
to {
    transform: translateY(var(--toast-item-swipe-to-y));
}
}
.ui-ToastContent {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}
.ui-ToastIcon {
  display: inline-flex;
  align-items: center;
  font-size: calc(var(--toast-title-font-size) + 4px);
  color: var(--accent-a9);
  vertical-align: middle;
}
.ui-ToastTitle {
  font-size: var(--toast-title-font-size);
  font-weight: var(--font-weight-medium);
}
.ui-ToastDescription {
  font-size: var(--toast-description-font-size);
  color: var(--gray-10);
}

.ui-ToastViewport {
  position: fixed;
  margin: 0 auto;
  top: auto;
  left: auto;
  bottom: auto;
  right: auto;
  max-width: calc(100vw - var(--toast-x-position) - var(--space-4));
  display: flex;
  flex-direction: column;
  list-style: none;
  margin: 0;
  padding: 0;
  outline: none;
  width: var(--toast-width);
  --toast-x-position: var(--space-4);
  --toast-y-position: var(--space-4);
}
.ui-ToastViewport:where(.r-size-1) {
  --toast-width: 300px;
  --toast-gap: var(--space-2);
  --toast-title-font-size: var(--font-size-2);
  --toast-description-font-size: var(--font-size-1);
}
.ui-ToastViewport:where(.r-size-2) {
  --toast-width: 340px;
  --toast-gap: var(--space-3);
  --toast-title-font-size: var(--font-size-3);
  --toast-description-font-size: var(--font-size-1);
}
.ui-ToastViewport:where(.r-size-3) {
  --toast-width: 380px;
  --toast-gap: var(--space-4);
  --toast-title-font-size: var(--font-size-4);
  --toast-description-font-size: var(--font-size-3);
}
.ui-ToastViewport:where([data-x-position="left"]) {
  left: var(--toast-x-position);
}
.ui-ToastViewport:where([data-x-position="right"]) {
  right: var(--toast-x-position);
}
.ui-ToastViewport:where([data-x-position="center"]) {
  left: calc(50% - var(--toast-width) / 2);
}
.ui-ToastViewport:where([data-y-position="top"]) {
  top: var(--toast-y-position);
}
.ui-ToastViewport:where([data-y-position="bottom"]) {
  bottom: var(--toast-y-position);
}

.ui-TableContent {
  --table-row-background-color: transparent;
  --table-row-box-shadow: inset 0 -1px var(--gray-a5);

  width: 100%;
  text-align: left;
  vertical-align: top;
  border-collapse: collapse;
  border-radius: calc(var(--table-border-radius) - 1px);
  border-spacing: 0;
  box-sizing: border-box;

  /* Makes "height: 100%" work on content inside cells */
  height: 0;
}
.ui-TableContent tr {
  color: var(--gray-12);
}
.ui-TableContent td,
.ui-TableContent th {
  background-color: var(--table-row-background-color);
  box-shadow: var(--table-row-box-shadow);
  box-sizing: border-box;
  padding: var(--table-cell-padding);
  min-height: var(--table-cell-min-height);
}
.ui-TableContent thead th {
  font-weight: var(--font-weight-semibold);
}
.ui-TableContent tbody th {
  font-weight: var(--font-weight-regular);
}
.ui-TableContent button {
  vertical-align: middle;
}
.ui-Table[data-size="1"] {
  --table-border-radius: var(--radius-3);
  --table-cell-padding: var(--space-2);
  --table-cell-min-height: calc(36px * var(--scaling));
}
.ui-Table[data-size="1"] .ui-TableContent {
  font-size: var(--font-size-2);
  line-height: var(--line-height-2);
}
.ui-Table[data-size="2"] {
  --table-border-radius: var(--radius-4);
  --table-cell-padding: var(--space-3);
  --table-cell-min-height: calc(44px * var(--scaling));
}
.ui-Table[data-size="2"] .ui-TableContent {
  font-size: var(--font-size-2);
  line-height: var(--line-height-2);
}
.ui-Table[data-size="3"] {
  --table-border-radius: var(--radius-4);
  --table-cell-padding: var(--space-3) var(--space-4);
  --table-cell-min-height: var(--space-8);
}
.ui-Table[data-size="3"] .ui-TableContent {
  font-size: var(--font-size-3);
  line-height: var(--line-height-3);
}
.ui-Table:where([data-variant="surface"]) {
  box-sizing: border-box;
  border: 1px solid var(--gray-a5);
  border-radius: var(--table-border-radius);
  background-color: var(--color-panel);
  backdrop-filter: var(--backdrop-filter-panel);
  background-clip: padding-box;
  position: relative;
}
@supports (box-shadow: 0 0 0 1px color-mix(in oklab, white, black)) {
.ui-Table:where([data-variant="surface"]) {
    border-color: color-mix(in oklab, var(--gray-a5), var(--gray-6));
}
}
.ui-Table:where([data-variant="surface"]) .ui-TableContent {
  overflow: hidden;
}
.ui-Table:where([data-variant="surface"]) thead {
  --table-row-background-color: var(--gray-a2);
}
.ui-Table:where([data-variant="surface"]) tbody :where(tr:last-child) {
  --table-row-box-shadow: none;
}
.ui-Table:where([data-variant="ghost"]) {
  --scrollarea-scrollbar-horizontal-margin-left: 0;
  --scrollarea-scrollbar-horizontal-margin-right: 0;
}

@layer components {
.ui-Separator {
    display: block;
    box-sizing: border-box;
    background-color: var(--accent-a6);
}
.ui-Separator:where([aria-orientation="horizontal"]) {
    width: var(--separator-size, auto);
    height: 1px;
}
.ui-Separator:where([aria-orientation="vertical"]) {
    width: 1px;
    height: var(--separator-size, auto);
}
}
.ui-Separator:where(.r-size-1) {
  --separator-size: var(--space-4);
}
.ui-Separator:where(.r-size-2) {
  --separator-size: var(--space-6);
}
.ui-Separator:where(.r-size-3) {
  --separator-size: var(--space-9);
}
.ui-Separator:where(.r-size-4) {
  --separator-size: 100%;
}

.ui-Quota {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-full);
  width: 100%;
  height: var(--space-2);
  background-color: var(--slate-4);
}
.ui-QuotaValue {
  border-radius: var(--radius-full);
  width: 100%;
  height: 100%;
}

.ui-SavingIndicator {
  display: inline-flex;
  align-items: center;
}
.ui-SavingIndicator > svg {
  vertical-align: middle;
}
.ui-SavingIndicator:where([data-status="saving"]) {
  color: var(--gray-10);
  animation: ui-spin 2s infinite linear;
}
.ui-SavingIndicator:where([data-status="saved"]) {
  color: var(--green-10);
}
.ui-SavingIndicator:where(.r-size-1) {
  font-size: var(--space-3);
}
.ui-SavingIndicator:where(.r-size-2) {
  font-size: var(--space-4);
}
.ui-SavingIndicator:where(.r-size-3) {
  font-size: calc(1.25 * var(--space-4));
}