@layer flux-reset, flux-base, flux-component;
@layer flux-reset {
  *, *::before, *::after {
    box-sizing: border-box;
  }
  * {
    margin: 0;
  }
  ul, ol {
    padding: 0;
    list-style: none;
  }
  body {
    -webkit-font-smoothing: antialiased;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    -moz-tab-size: 4;
    tab-size: 4;
  }
  img, picture, video, canvas, svg {
    display: block;
    max-width: 100%;
  }
  /* 7. Inherit fonts for form controls */
  input, button, textarea, select {
    font: inherit;
  }
  /* 8. Avoid text overflows */
  p, h1, h2, h3, h4, h5, h6 {
    overflow-wrap: break-word;
  }
  p {
    text-wrap: pretty;
  }
  h1, h2, h3, h4, h5, h6 {
    text-wrap: balance;
  }
  button, select {
    text-transform: none;
  }
  a {
    color: inherit;
    text-decoration: none;
  }
  #app {
    isolation: isolate;
  }
}
@layer flux-base {
  :root {
    --acceleration-curve: cubic-bezier(0.4, 0, 1, 1);
    --deceleration-curve: cubic-bezier(0, 0, 0.2, 1);
    --standard-curve: cubic-bezier(0.4, 0, 0.2, 1);
    --swift-out: cubic-bezier(0.55, 0, 0.1, 1);
    --font-monospace: jetbrains-mono, monospace;
    --font-sans: inter-variable, sans-serif;
    --font-serif: serif;
    --radius: 12px;
    --radius-double: 24px;
    --radius-full: 9999px;
    --radius-half: 6px;
    --font-size-2xsmall: 12px;
    --line-height-2xsmall: 18px;
    --font-size-xsmall: 13px;
    --line-height-xsmall: 18px;
    --font-size-small: 14px;
    --line-height-small: 21px;
    --font-size-default: 15px;
    --line-height-default: 24px;
    --font-size-large: 16px;
    --line-height-large: 24px;
    --font-size-xlarge: 18px;
    --line-height-xlarge: 27px;
    --transition-default: 180ms var(--swift-out);
    --background: var(--gray-25);
    --foreground: var(--gray-700);
    --foreground-prominent: var(--gray-900);
    --foreground-secondary: var(--gray-500);
    --surface: var(--gray-25);
    --surface-loader: rgb(from var(--gray-25) r g b / .75);
    --surface-stroke: var(--gray-200);
    --surface-stroke-hover: var(--gray-300);
    --surface-stroke-out: rgb(from var(--gray-800) r g b / .1);
    --surface-stroke-out-hover: rgb(from var(--gray-900) r g b / .15);
    --surface-hover: var(--gray-50);
    --surface-active: var(--gray-100);
    --surface-disabled: var(--gray-100);
    --overlay: rgb(from var(--gray-950) r g b / .5);
    --overlay-secondary: rgb(from var(--gray-950) r g b / .15);
    --overlay-strong: rgb(from var(--gray-950) r g b / .9);
  }
  :root, [light] {
    --gray-25: #ffffff;
    --gray-50: #f7f8fc;
    --gray-100: #eceef4;
    --gray-200: #dee1ea;
    --gray-300: #c6cad5;
    --gray-400: #9da4b8;
    --gray-500: #848ca2;
    --gray-600: #606881;
    --gray-700: #3f475e;
    --gray-800: #2d3241;
    --gray-900: #1a1f2d;
    --gray-950: #090c19;
    --primary-25: #fcfcfc;
    --primary-50: #ebf2ff;
    --primary-100: #d7e5ff;
    --primary-200: #c4d8ff;
    --primary-300: #9dbdff;
    --primary-400: #77a2fc;
    --primary-500: #5285f8;
    --primary-600: #2258e5;
    --primary-700: #0935b1;
    --primary-800: #011e8c;
    --primary-900: #000f60;
    --primary-950: #000337;
    --danger-25: #fefbfa;
    --danger-50: #fff1f2;
    --danger-100: #ffe4e6;
    --danger-200: #ffccd3;
    --danger-300: #ffa1ac;
    --danger-400: #ff637e;
    --danger-500: #ff2054;
    --danger-600: #ec003e;
    --danger-700: #c70036;
    --danger-800: #a50035;
    --danger-900: #8b0836;
    --danger-950: #4d0218;
    --info-25: #f9fcff;
    --info-50: #eff6ff;
    --info-100: #dbeafe;
    --info-200: #bedbff;
    --info-300: #8dc5ff;
    --info-400: #52a2ff;
    --info-500: #297fff;
    --info-600: #165dfc;
    --info-700: #1048e6;
    --info-800: #163cb8;
    --info-900: #1b398e;
    --info-950: #162456;
    --success-25: #f6fbf1;
    --success-50: #eff9e6;
    --success-100: #dcf2c4;
    --success-200: #bee88f;
    --success-300: #97d858;
    --success-400: #6fc22f;
    --success-500: #52a91d;
    --success-600: #3f8c17;
    --success-700: #326e17;
    --success-800: #2a5717;
    --success-900: #234717;
    --success-950: #0f2708;
    --warning-25: #fdfcf8;
    --warning-50: #fffbeb;
    --warning-100: #fef3c6;
    --warning-200: #fee685;
    --warning-300: #ffd22f;
    --warning-400: #ffb902;
    --warning-500: #ff9717;
    --warning-600: #dd7500;
    --warning-700: #b55500;
    --warning-800: #934200;
    --warning-900: #793600;
    --warning-950: #451b00;
    --shadow-px: 0 1px 1px rgb(from var(--gray-800) r g b / 0.02);
    --shadow-xs: 0 1px 2px 0 rgb(from var(--gray-800) r g b / 0.02);
    --shadow-sm: 0 1px 3px rgb(from var(--gray-800) r g b / 0.05), 0 1px 2px -1px rgb(from var(--gray-800) r g b / 0.05);
    --shadow-md: 0 4px 6px -1px rgb(from var(--gray-800) r g b / 0.05), 0 2px 4px -2px rgb(from var(--gray-800) r g b / 0.05);
    --shadow-lg: 0 10px 15px -3px rgb(from var(--gray-800) r g b / 0.05), 0 4px 6px -4px rgb(from var(--gray-800) r g b / 0.05);
    --shadow-xl: 0 20px 25px -5px rgb(from var(--gray-800) r g b / 0.05), 0 8px 10px -6px rgb(from var(--gray-800) r g b / 0.05);
    --shadow-2xl: 0 25px 50px -12px rgb(from var(--gray-800) r g b / 0.12);
  }
  [dark] {
    --surface-stroke-out: rgb(from var(--gray-800) r g b / .15);
    --surface-stroke-out-hover: rgb(from var(--gray-900) r g b / .2);
    --overlay: rgb(0 0 0 / .6);
    --overlay-secondary: rgb(0 0 0 / .4);
    --overlay-strong: rgb(0 0 0 / .9);
    --gray-25: #15171e;
    --gray-50: #1b1f27;
    --gray-100: #232732;
    --gray-200: #2d323e;
    --gray-300: #393f4f;
    --gray-400: #485064;
    --gray-500: #5b647e;
    --gray-600: #717c9a;
    --gray-700: #8f98b1;
    --gray-800: #a8b0c5;
    --gray-900: #bfc5d7;
    --gray-950: #d8dbe4;
    --primary-25: #23262c;
    --primary-50: #262c39;
    --primary-100: #2a3448;
    --primary-200: #303e5a;
    --primary-300: #36486e;
    --primary-400: #3e5585;
    --primary-500: #44619d;
    --primary-600: #4d6fb6;
    --primary-700: #5980d3;
    --primary-800: #6a96f5;
    --primary-900: #77a7ff;
    --primary-950: #85b8ff;
    --danger-25: #272325;
    --danger-50: #37272b;
    --danger-100: #452c30;
    --danger-200: #563237;
    --danger-300: #69393d;
    --danger-400: #7f4145;
    --danger-500: #94484c;
    --danger-600: #ab5155;
    --danger-700: #c65d64;
    --danger-800: #e66f7a;
    --danger-900: #fd7c8c;
    --danger-950: #ff8ba0;
    --info-25: #23262c;
    --info-50: #252c39;
    --info-100: #283447;
    --info-200: #2c3f59;
    --info-300: #2e4b6d;
    --info-400: #315884;
    --info-500: #33659b;
    --info-600: #3874b4;
    --info-700: #4285d1;
    --info-800: #539cf3;
    --info-900: #5dadff;
    --info-950: #6bbfff;
    --success-25: #21251c;
    --success-50: #282f22;
    --success-100: #2e3822;
    --success-200: #354325;
    --success-300: #3b5129;
    --success-400: #41612e;
    --success-500: #467033;
    --success-600: #4d8139;
    --success-700: #589541;
    --success-800: #69ae4f;
    --success-900: #74c25b;
    --success-950: #81d56a;
    --warning-25: #2b261a;
    --warning-50: #322b1b;
    --warning-100: #3c331e;
    --warning-200: #493c21;
    --warning-300: #574725;
    --warning-400: #68532a;
    --warning-500: #785e30;
    --warning-600: #8c6b35;
    --warning-700: #a47a3b;
    --warning-800: #c28f42;
    --warning-900: #d89e4a;
    --warning-950: #efae52;
    --shadow-px: 0 1px 1px rgb(0 0 0 / 0.1);
    --shadow-xs: 0 1px 3px 0 rgb(0 0 0 / 0.1);
    --shadow-sm: 0 1px 5px rgb(0 0 0 / 0.15), 0 1px 3px -1px rgb(0 0 0 / 0.15);
    --shadow-md: 0 4px 9px -1px rgb(0 0 0 / 0.15), 0 2px 6px -2px rgb(0 0 0 / 0.15);
    --shadow-lg: 0 10px 22px -3px rgb(0 0 0 / 0.15), 0 4px 9px -4px rgb(0 0 0 / 0.15);
    --shadow-xl: 0 20px 36px -5px rgb(0 0 0 / 0.15), 0 8px 15px -6px rgb(0 0 0 / 0.15);
    --shadow-2xl: 0 25px 72px -12px rgb(0 0 0 / 0.25);
  }
  html {
    font-size: var(--font-size-default);
  }
  body {
    background: var(--background);
    font-family: var(--font-sans), system-ui;
    line-height: var(--line-height-default);
  }
  body, dialog {
    color: var(--foreground);
  }
  [inert] *::-webkit-scrollbar {
    display: none;
  }
}
@layer flux-base {
  h1, h2, h3, h4, h5, h6 {
    font-weight: 600;
    text-wrap: balance;
  }
  h1 {
    color: var(--foreground-prominent);
    font-size: 27px;
    line-height: 42px;
  }
  h2 {
    color: var(--foreground-prominent);
    font-size: 21px;
    line-height: 33px;
  }
  h3 {
    font-size: var(--font-size-xlarge);
    line-height: var(--line-height-xlarge);
    color: var(--foreground);
  }
  h4 {
    font-size: var(--font-size-large);
    line-height: var(--line-height-large);
  }
  h5 {
    font-size: var(--font-size-default);
    line-height: var(--line-height-default);
  }
  h6 {
    font-size: var(--font-size-small);
    line-height: var(--line-height-small);
  }
  a:not([class]), a[class=""] {
    align-self: start;
    color: var(--primary-600);
    text-decoration: underline;
    text-decoration-color: currentColor;
    text-decoration-skip: auto;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
  }
  @media (hover: hover) {
    a:not([class]):hover, a[class=""]:hover {
      text-decoration: none;
    }
  }
  small {
    font-size: var(--font-size-small);
    line-height: var(--line-height-small);
  }
  code, kbd, samp, pre {
    font-family: var(--font-monospace), monospace;
  }
}@layer flux-base {
  .icon {
    height: 1em;
    width: 1em;
    flex-shrink: 0;
    font-size: 20px;
    line-height: 1;
    overflow: visible;
  }
  .font-awesome-icon {
    display: inline-block;
  }
  .font-awesome-icon:has(> path:nth-child(2)) path:first-child {
    opacity: 0.2;
  }
  .icon-font {
    display: inline-grid;
    place-items: center;
    justify-content: center;
    font-style: normal;
    font-variant-ligatures: normal;
    white-space: nowrap;
  }
  .icon-font-primary,
  .icon-font-secondary {
    grid-area: 1/1;
  }
  .icon-font-secondary {
    opacity: var(--fa-secondary-opacity, 0.2);
  }
  .icon-boxed {
    display: flex;
    height: 1em;
    width: 1em;
    align-items: center;
    flex-shrink: 0;
    justify-content: center;
    background: var(--surface);
    background-clip: padding-box;
    border: 1px solid var(--surface-stroke-out);
    border-radius: var(--radius);
    font-size: 42px;
  }
  .icon-boxed .icon {
    font-size: 0.5em;
  }
  .icon-boxed.is-rounded {
    border-radius: var(--radius-full);
  }
}
.icon-gray {
  color: var(--gray-600);
}

.icon-primary {
  color: var(--primary-600);
}

.icon-danger {
  color: var(--danger-600);
}

.icon-info {
  color: var(--info-600);
}

.icon-success {
  color: var(--success-600);
}

.icon-warning {
  color: var(--warning-600);
}

.icon-boxed-default {
  box-shadow: var(--shadow-sm);
}

.icon-boxed-colored {
  border: 0;
}

.icon-boxed-gray {
  background: var(--gray-100);
  color: var(--foreground);
}

.icon-boxed-primary {
  background: var(--primary-100);
  color: var(--primary-900);
}

.icon-boxed-danger {
  background: var(--danger-100);
  color: var(--danger-900);
}

.icon-boxed-info {
  background: var(--info-100);
  color: var(--info-900);
}

.icon-boxed-success {
  background: var(--success-100);
  color: var(--success-900);
}

.icon-boxed-warning {
  background: var(--warning-100);
  color: var(--warning-900);
}.overlay-view {
  position: fixed;
  inset: 0;
  height: 100dvh;
  width: 100dvw;
}

.overlay-provider {
  pointer-events: none;
  z-index: 10000;
}

.overlay-shade {
  background: var(--overlay);
  backdrop-filter: blur(3px) grayscale(0.5) saturate(180%);
  pointer-events: none;
  transition: opacity 600ms var(--swift-out);
}

.overlay-provider:not(:has(.overlay:not(.overlay-transition-leave-active):not(.slide-over-transition-leave-active))) .overlay-shade {
  opacity: 0;
}

.overlay {
  position: fixed;
  display: flex;
  inset: 0;
  height: 100dvh;
  width: 100dvw;
  outline: 0;
}
.overlay > .base-pane-structure {
  display: flex;
  margin: auto;
  max-height: min(840px, 100dvh - 180px);
  width: calc(100dvw - 90px);
  flex-flow: column nowrap;
  box-shadow: var(--shadow-lg);
  overflow: auto;
  transition: 420ms var(--swift-out);
  transition-property: filter, scale;
}
.overlay > .base-pane-structure > .pane-header,
.overlay > .base-pane-structure > .pane-footer {
  position: sticky;
  z-index: 100;
}
.overlay > .base-pane-structure > .pane-header {
  top: 0;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--gray-100);
  box-shadow: var(--shadow-xs);
}
.overlay > .base-pane-structure > .pane-header:has(+ :where(.tabs, .tab-bar-default)) {
  padding-bottom: 0;
  border-bottom: 0;
  box-shadow: none;
}
.overlay > .base-pane-structure > .pane-header:not(:has(+ :where(.tabs, .tab-bar-default))) {
  background: inherit;
}
.overlay > .base-pane-structure > .pane-header + .tab-bar-default,
.overlay > .base-pane-structure > .pane-header + .tabs > .tab-bar-default {
  position: sticky;
  top: var(--flux-pane-header-height, 60px);
  z-index: 100;
}
.overlay > .base-pane-structure > .pane-footer {
  bottom: 0;
  margin-top: auto;
}
.overlay > .base-pane-structure::after {
  position: absolute;
  display: block;
  inset: 0;
  content: "";
  background: var(--overlay-secondary);
  opacity: 0;
  pointer-events: none;
  transition: opacity 600ms var(--swift-out);
  z-index: 1000;
}
.overlay.is-current > .base-pane-structure {
  pointer-events: auto;
}
.overlay:not(.is-current) > .base-pane-structure {
  filter: brightness(0.75) blur(3px) grayscale(0.5) saturate(180%);
  scale: 0.975;
}
.overlay:not(.is-current) > .base-pane-structure::after {
  opacity: 1;
}

.overlay-small {
}
.overlay-small > .base-pane-structure {
  max-width: 420px;
}

.overlay-medium {
}
.overlay-medium > .base-pane-structure {
  max-width: 540px;
}

.overlay-large {
}
.overlay-large > .base-pane-structure {
  max-width: 720px;
}

.slide-over {
  justify-content: flex-end;
}
.slide-over > .base-pane-structure {
  margin: 9px;
  max-height: calc(100% - 18px);
  width: min(100dvw, 720px);
  contain: paint;
  transition-duration: 600ms;
  overflow: auto;
}

.overlay-transition-enter-active,
.overlay-transition-leave-active {
  transition: opacity 300ms var(--swift-out);
}
.overlay-transition-enter-active > .base-pane-structure,
.overlay-transition-leave-active > .base-pane-structure {
  transition: 300ms var(--swift-out);
  transition-property: opacity, scale;
}

.overlay-transition-enter-from {
  opacity: 0;
}
.overlay-transition-enter-from > .base-pane-structure {
  opacity: 0;
  scale: 0.9;
}

.overlay-transition-leave-to {
  opacity: 0;
}
.overlay-transition-leave-to > .base-pane-structure {
  opacity: 0;
  scale: 0.95;
}

.slide-over-transition-enter-active,
.slide-over-transition-leave-active {
  transition: opacity 480ms var(--swift-out);
}
.slide-over-transition-enter-active > .base-pane-structure,
.slide-over-transition-leave-active > .base-pane-structure {
  transition: 480ms var(--swift-out);
  transition-property: opacity, transform;
}

.slide-over-transition-enter-from,
.slide-over-transition-leave-to {
  opacity: 0;
  transition-delay: 210ms;
}
.slide-over-transition-enter-from > .base-pane-structure,
.slide-over-transition-leave-to > .base-pane-structure {
  transform: translate3d(100%, 0, 0);
}.spinner {
  --track: var(--gray-100);
  --value: var(--primary-600);
  display: inline-block;
  height: 1em;
  width: 1em;
  flex: 0 0 1em;
  animation: spinner 5s linear infinite;
  font-size: 20px;
}

.spinner-gray {
  --value: var(--gray-500);
}

.spinner-primary {
  --value: var(--primary-600);
}

.spinner-danger {
  --value: var(--danger-600);
}

.spinner-info {
  --value: var(--info-600);
}

.spinner-success {
  --value: var(--success-600);
}

.spinner-warning {
  --value: var(--warning-600);
}

.spinner-track {
  stroke: var(--track);
}

.spinner-effect,
.spinner-value {
  stroke: var(--value);
  transform-origin: center;
  animation: spinner 1.2s var(--swift-out) infinite;
}

.spinner-effect {
  opacity: 0.25;
  animation-delay: -1.05s;
}

@keyframes spinner {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(1turn);
  }
}@layer flux-base {
  .button {
    font-size: var(--font-size-default);
    line-height: var(--line-height-default);
    display: inline-flex;
    align-items: center;
    flex-grow: 0;
    flex-shrink: 0;
    gap: 12px;
    justify-content: center;
    background: unset;
    border: 1px solid;
    border-radius: var(--radius);
    box-shadow: var(--shadow-px);
    cursor: pointer;
    text-decoration: none;
    transition: var(--transition-default);
    transition-property: background, border, box-shadow, color, scale, outline-color, outline-offset;
    user-select: none;
    outline: 2px solid rgb(from var(--primary-600) r g b/0);
    outline-offset: 0;
  }
  .button:focus-visible {
    outline-color: var(--primary-600);
    outline-offset: 2px;
  }
  .button:active {
    box-shadow: none;
  }
  .button:focus-visible {
    z-index: 1;
  }
  .button:disabled, .button[aria-disabled=true] {
    box-shadow: none;
    opacity: 0.5;
    pointer-events: none;
  }
  .button.is-small {
    height: 36px;
    padding: 0 9px;
  }
  .button.is-medium {
    height: 42px;
    padding: 0 12px;
  }
  .button.is-large {
    height: 48px;
    padding: 0 15px;
  }
  .button.is-xl {
    height: 54px;
    padding: 0 18px;
  }
  .button.is-filled {
    align-self: stretch;
  }
  .button .spinner {
    flex-shrink: 0;
  }
  .button .spinner:only-child {
    margin-left: -2px;
    margin-right: -2px;
  }
  .button:has(.button-icon:only-child) {
    padding-left: 0;
    padding-right: 0;
  }
  .button:has(.button-icon:only-child).is-small {
    width: 36px;
  }
  .button:has(.button-icon:only-child).is-medium {
    width: 42px;
  }
  .button:has(.button-icon:only-child).is-large {
    width: 48px;
  }
  .button:has(.button-icon:only-child).is-xl {
    width: 54px;
  }
  .button-icon {
    margin: 1px;
    flex-shrink: 0;
    font-size: 18px;
  }
  .button-icon:only-child {
    margin-left: -1px;
    margin-right: -1px;
  }
  .button-label {
    display: inline-block;
    font-weight: 500;
    text-align: center;
  }
  .button-label:only-child {
    margin-left: 6px;
    margin-right: 6px;
    min-width: 42px;
  }
  .button .badge:first-child {
    margin-left: -6px;
  }
  .button .badge:last-child {
    margin-right: -6px;
  }
}.action {
  height: 30px;
  width: 30px;
  padding-left: 6px;
  padding-right: 6px;
  border: 0;
  border-radius: var(--radius-half);
  box-shadow: none;
}
@media (hover: hover) {
  .action:hover {
    background: var(--gray-100);
  }
}
.action:active, .action.is-active {
  background: var(--gray-200);
}

.action-icon {
  color: var(--foreground);
  font-size: 18px;
}

.action.is-destructive .action-icon {
  color: var(--danger-600);
}

.action-label {
  color: var(--foreground);
}

.action-bar {
  flex-wrap: wrap;
}
.action-bar .separator {
  margin-top: 9px;
  margin-bottom: 9px;
}
@media (min-width: 640px) {
  .action-bar > .form-input {
    max-width: 240px;
  }
}

.base-pane-structure > .action-bar {
  padding: 12px 18px;
  background: var(--gray-50);
  border: 1px solid var(--gray-100);
  border-left: 0;
  border-right: 0;
}
.base-pane-structure > .action-bar:first-child {
  border-top: 0;
  border-top-left-radius: var(--radius);
  border-top-right-radius: var(--radius);
}
.base-pane-structure > .action-bar:last-child {
  border-bottom: 0;
  border-bottom-left-radius: var(--radius);
  border-bottom-right-radius: var(--radius);
}

.action-pane {
  container: actionPane/inline-size;
  width: 100%;
}

.action-pane-grid {
  display: grid;
  padding: 36px;
  gap: 36px;
  grid-template-columns: 1fr auto;
}
@container actionPane (max-width: 540px) {
  .action-pane-grid {
    grid-template-columns: 1fr;
  }
}

.action-pane-body {
  position: relative;
  text-wrap: pretty;
}
.action-pane-body.pane-body {
  padding: 0;
}.primary-button {
  background: var(--primary-600);
  border-color: var(--primary-700);
  box-shadow: 0 1px 1px rgb(from var(--primary-600) r g b/0.25);
  color: var(--primary-25);
}
@media (hover: hover) {
  .primary-button:hover {
    background: var(--primary-700);
    border-color: var(--primary-800);
  }
}
.primary-button:active, .primary-button.is-active {
  background: var(--primary-800);
  box-shadow: none;
  scale: 0.9875;
}
.primary-button .spinner {
  --track: var(--primary-700);
  --value: var(--primary-25);
}

.primary-button-icon {
  color: var(--primary-25);
}

.primary-button-label {
}

.secondary-button {
  background: var(--surface);
  border-color: var(--surface-stroke);
  color: var(--foreground);
}
@media (hover: hover) {
  .secondary-button:hover {
    background: var(--surface-hover);
  }
}
.secondary-button:active, .secondary-button.is-active {
  background: var(--surface-active);
  box-shadow: none;
  scale: 0.9875;
}

.secondary-button-icon {
  color: var(--foreground);
}

.secondary-button-label {
}

.destructive-button {
  background: var(--surface);
  border-color: var(--surface-stroke);
  color: var(--foreground);
}
@media (hover: hover) {
  .destructive-button:hover {
    background: var(--surface-hover);
  }
}
.destructive-button:active, .destructive-button.is-active {
  background: var(--surface-active);
  box-shadow: none;
  scale: 0.9875;
}
.destructive-button .spinner {
  --value: var(--danger-600);
}

.destructive-button-icon {
  color: var(--danger-600);
}

.destructive-button-label {
}
.destructive-button-label:only-child {
  color: var(--danger-600);
}

.secondary-button,
.destructive-button {
  box-shadow: var(--shadow-px), inset 0 -1px rgb(from var(--gray-200) r g b/0.15);
}

.base-link-button {
  gap: 6px;
  border-color: transparent;
  box-shadow: none;
}
@media (hover: hover) {
  .base-link-button:hover {
    background: var(--surface-hover);
  }
}
.base-link-button:active, .base-link-button.is-active {
  background: var(--surface-active);
  box-shadow: none;
  scale: 0.9875;
}

.primary-link-button {
  color: var(--primary-700);
}

.primary-link-button-icon {
  color: var(--primary-700);
}

.primary-link-button-label {
}

.secondary-link-button {
  color: var(--foreground-prominent);
}

.secondary-link-button-icon {
  color: var(--foreground);
}

.secondary-link-button-label {
}

.publish-button {
  position: relative;
  overflow: hidden;
}

.publish-button-icon {
}

.publish-button-label {
}

.publish-button-animation {
  position: relative;
  display: block;
  height: 20px;
  width: 20px;
  align-items: center;
  justify-content: center;
  overflow: visible;
}
.publish-button-animation :is(path) {
  fill: currentColor;
  transition: 270ms var(--swift-out);
}

.publish-button.is-done .publish-button-animation-arrow {
  animation: publish-arrow-out 0.4s var(--acceleration-curve) both;
}
.publish-button.is-done .publish-button-animation-check,
.publish-button.is-done .publish-button-animation-circle {
  transition-delay: 0.5s;
}

.publish-button.is-idle .publish-button-animation-check {
  opacity: 0;
}

.publish-button.is-loading .publish-button-animation-arrow {
  animation: publish-arrow-in 1s var(--deceleration-curve) both;
}
.publish-button.is-loading .publish-button-animation-check,
.publish-button.is-loading .publish-button-animation-circle {
  opacity: 0;
}

.publish-button-cloud {
  position: absolute;
  top: 50%;
  opacity: 0;
  animation: publish 0.6s linear infinite;
  transition: 360ms var(--swift-out) 210ms;
}
.publish-button-cloud:nth-child(2) {
  left: -12px;
  animation-delay: -0.3s;
}
.publish-button-cloud:nth-child(3) {
  right: -12px;
}

.publish-button.is-loading .publish-button-cloud {
  opacity: 0.5;
}

.button-group {
  display: inline-flex;
  width: max-content;
  flex-grow: 0;
  flex-shrink: 0;
  z-index: 0;
}
.button-group .button {
  border-radius: 0;
}
.button-group .button:first-child {
  border-top-left-radius: var(--radius);
  border-bottom-left-radius: var(--radius);
}
.button-group .button:last-child {
  border-top-right-radius: var(--radius);
  border-bottom-right-radius: var(--radius);
}
.button-group .primary-button {
  z-index: 1;
}
.button-group .button + .button {
  margin-left: -1px;
}

@keyframes publish {
  from {
    translate: 0 calc(-30px - 50%);
  }
  to {
    translate: 0 calc(30px - 50%);
  }
}
@keyframes publish-arrow-in {
  25% {
    translate: 0 128px;
  }
  100% {
    translate: 0 0;
  }
}
@keyframes publish-arrow-out {
  to {
    opacity: 0;
    translate: 0 -512px;
  }
}.flex {
  --gap: 0;
  display: flex;
  gap: var(--gap);
}

.flex-inline {
  display: inline-flex;
}

.flex-direction-horizontal {
  flex-direction: row;
}

.flex-direction-vertical {
  flex-direction: column;
}

.flex-align-start {
  align-items: flex-start;
}

.flex-align-center {
  align-items: center;
}

.flex-align-end {
  align-items: flex-end;
}

.flex-align-stretch {
  align-items: stretch;
}

.flex-align-baseline {
  align-items: baseline;
}

.flex-justify-start {
  justify-content: flex-start;
}

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

.flex-justify-end {
  justify-content: flex-end;
}

.flex-justify-between {
  justify-content: space-between;
}

.flex-justify-around {
  justify-content: space-around;
}

.flex-justify-evenly {
  justify-content: space-evenly;
}

.flex-wrap-wrap {
  flex-wrap: wrap;
}

.flex-wrap-nowrap {
  flex-wrap: nowrap;
}

.flex-wrap-wrap-reverse {
  flex-wrap: wrap-reverse;
}

.flex-fill {
  width: 100%;
}

.flex-item {
  min-width: 0;
}.breakthrough-transition-enter-active,
.breakthrough-transition-back-enter-active,
.breakthrough-transition-leave-active,
.breakthrough-transition-back-leave-active {
  transform-origin: top center;
  transition-property: opacity, scale, translate;
}

.breakthrough-transition-enter-active,
.breakthrough-transition-back-enter-active {
  transition-duration: 180ms;
  transition-timing-function: var(--deceleration-curve);
}

.breakthrough-transition-leave-active,
.breakthrough-transition-back-leave-active {
  transition-duration: 120ms;
  transition-timing-function: var(--acceleration-curve);
}

.breakthrough-transition-enter-from,
.breakthrough-transition-back-leave-to {
  opacity: 0;
  scale: 0.975;
}

.breakthrough-transition-leave-to,
.breakthrough-transition-back-enter-from {
  opacity: 0;
  scale: 1.025;
}

.fade-transition-enter-active,
.fade-transition-leave-active {
  transition: opacity var(--transition-default) !important;
}

.fade-transition-enter-from,
.fade-transition-leave-to {
  opacity: 0;
}

.fade-transition-enter-to,
.fade-transition-leave-from {
  opacity: 1;
}

.route-transition-enter-active,
.route-transition-back-enter-active,
.route-transition-leave-active,
.route-transition-back-leave-active {
  transform-origin: center 50dvh;
  transition-property: opacity, scale;
}

.route-transition-enter-active,
.route-transition-back-enter-active {
  transition-duration: 180ms;
  transition-timing-function: var(--deceleration-curve);
}

.route-transition-leave-active,
.route-transition-back-leave-active {
  transition-duration: 120ms;
  transition-timing-function: var(--acceleration-curve);
}

.route-transition-enter-from,
.route-transition-back-leave-to {
  opacity: 0;
  scale: 0.975;
}

.route-transition-leave-to,
.route-transition-back-enter-from {
  opacity: 0;
  scale: 0.975;
}

.tooltip-transition-enter-active,
.tooltip-transition-leave-active {
  transition: 180ms var(--swift-out);
  transition-property: opacity, scale;
}

.tooltip-transition-enter-from,
.tooltip-transition-leave-to {
  opacity: 0;
  scale: 0.975;
}

.vertical-window-transition-enter-active,
.vertical-window-transition-back-enter-active {
  contain: paint;
  transition: 105ms var(--deceleration-curve);
  transition-property: opacity, transform;
}

.vertical-window-transition-leave-active,
.vertical-window-transition-back-leave-active {
  transition: 105ms var(--acceleration-curve);
  transition-property: opacity, transform;
}

.vertical-window-transition-back-leave-to,
.vertical-window-transition-enter-from {
  opacity: 0;
  transform: translate3d(0, 15px, 0);
}

.vertical-window-transition-back-enter-from,
.vertical-window-transition-leave-to {
  opacity: 0;
  transform: translate3d(0, -15px, 0);
}

.window-transition-enter-active,
.window-transition-back-enter-active {
  transition: 105ms var(--deceleration-curve);
  transition-property: height, opacity, transform;
}

.window-transition-leave-active,
.window-transition-back-leave-active {
  transition: 105ms var(--acceleration-curve);
  transition-property: height, opacity, transform;
}

.window-transition-back-leave-to,
.window-transition-enter-from {
  opacity: 0;
  transform: translate3d(15px, 0, 0);
}

.window-transition-back-enter-from,
.window-transition-leave-to {
  opacity: 0;
  transform: translate3d(-15px, 0, 0);
}.base-pane {
  background: var(--surface);
  background-clip: padding-box;
  border: 1px solid var(--surface-stroke-out);
  border-radius: var(--radius);
}

.base-pane-loader {
  position: absolute;
  display: flex;
  inset: 0;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(3px) saturate(180%);
  background: var(--surface-loader);
  border-radius: inherit;
  z-index: 100;
}

.base-pane-structure {
  position: relative;
  display: block;
}

.base-pane-structure:not(.layer-pane) > .base-pane-structure {
  background: unset;
  border: 0;
  box-shadow: none;
}

.base-pane > .base-pane-element:first-child,
.base-pane > .form > .base-pane-element:first-child {
  border-top-left-radius: calc(var(--radius) - 1px);
  border-top-right-radius: calc(var(--radius) - 1px);
}
.base-pane > .base-pane-element:last-child, .base-pane > .base-pane-element:not(.pane-header):nth-last-child(1 of .base-pane-element),
.base-pane > .form > .base-pane-element:last-child,
.base-pane > .form > .base-pane-element:not(.pane-header):nth-last-child(1 of .base-pane-element) {
  border-bottom-left-radius: calc(var(--radius) - 1px);
  border-bottom-right-radius: calc(var(--radius) - 1px);
}
.base-pane > .base-pane-element:only-child,
.base-pane > .form > .base-pane-element:only-child {
  border: 0;
}.pane {
}

.pane-default {
  box-shadow: var(--shadow-sm);
}

.pane-flat {
}

.pane-well {
  background-color: var(--gray-50);
}

:is(.pane-default, .pane-flat, .pane-well):is(a) {
  color: currentColor;
  text-decoration: unset;
}
@media (hover: hover) {
  :is(.pane-default, .pane-flat, .pane-well):is(a):hover {
    color: currentColor;
  }
}

:is(.pane-default, .pane-flat, .pane-well):is(button) {
  padding: 0;
}

:is(.pane-default, .pane-flat, .pane-well):is(a, button) {
  cursor: pointer;
  transition: 210ms var(--swift-out);
  transition-property: background, border-color, box-shadow;
}
@media (hover: hover) {
  :is(.pane-default, .pane-flat, .pane-well):is(a, button):hover {
    border-color: var(--surface-stroke-out-hover);
    box-shadow: var(--shadow-lg);
  }
}
:is(.pane-default, .pane-flat, .pane-well):is(a, button):active {
  box-shadow: var(--shadow-xs);
}

:is(.pane-default, .pane-flat, .pane-well):is(:disabled, [aria-disabled=true]) {
  background-color: var(--surface-disabled);
  box-shadow: none;
  pointer-events: none;
}
:is(.pane-default, .pane-flat, .pane-well):is(:disabled, [aria-disabled=true]) > * {
  opacity: 0.5;
}

.pane-header {
  display: flex;
  padding: 18px 18px 0;
  gap: 15px;
  text-align: left;
}
.pane-header:only-child {
  padding: 18px;
}
.pane-header:not(:has(+ .pane-body)) {
  padding: 18px;
}

.pane-header-caption {
  display: flex;
  align-self: center;
  flex-flow: column;
  flex-grow: 1;
}
.pane-header-caption :is(strong) {
  color: var(--foreground-prominent);
  font-weight: 600;
}
.pane-header-caption :is(strong):has(+ :is(span)) {
  font-size: var(--font-size-large);
  line-height: var(--line-height-large);
}
.pane-header-caption :is(span) {
  font-size: var(--font-size-small);
  line-height: 24px;
}

.pane-header-icon {
  margin-top: 2px;
  color: var(--primary-600);
}

.pane-header-clickable {
  color: inherit;
  cursor: pointer;
  text-decoration: none;
  transition: 210ms var(--swift-out);
  transition-property: background, outline-color, outline-offset;
  outline: 2px solid rgb(from var(--primary-600) r g b/0);
  outline-offset: 0;
}
.pane-header-clickable:focus-visible {
  outline-color: var(--primary-600);
  outline-offset: -2px;
}
@media (hover: hover) {
  .pane-header-clickable:hover {
    background: var(--surface-hover);
  }
  .pane-header-clickable:hover .pane-header-chevron {
    color: var(--foreground);
    transform: translateX(3px);
  }
}
.pane-header-clickable:active {
  background: var(--surface-active);
}
.pane-header-clickable:is(:disabled, [aria-disabled=true]) {
  cursor: default;
  pointer-events: none;
}
.pane-header-clickable:is(:disabled, [aria-disabled=true]) > * {
  opacity: 0.5;
}

.pane-header-chevron {
  margin-top: 2px;
  flex-shrink: 0;
  color: var(--foreground-secondary);
  transition: 210ms var(--swift-out);
  transition-property: color, transform;
}

.pane-body {
  padding: 18px;
}

.pane-body + .pane-body {
  padding-top: 0;
}

.pane-footer {
  display: flex;
  padding: 18px;
  gap: 9px;
  background: var(--gray-50);
  border-top: 1px solid var(--gray-100);
}

.pane-loader {
}

.pane-tag {
  font-size: var(--font-size-2xsmall);
  line-height: 1;
  position: absolute;
  top: 15px;
  right: 15px;
  padding: 6px 9px;
  background: var(--gray-900);
  border-radius: var(--radius-half);
  color: var(--gray-25);
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.pane-media {
  position: relative;
  overflow: hidden;
  z-index: 0;
}
.pane-media::after {
  position: absolute;
  inset: 0;
  content: "";
  border: 1px solid var(--surface-stroke-out);
  border-radius: inherit;
  z-index: 1;
}

.pane-media-default {
}
.pane-media-default:first-child {
  margin: -1px;
  margin-bottom: 0;
  border-top-left-radius: var(--radius);
  border-top-right-radius: var(--radius);
}
.pane-media-default:not(:first-child)::after {
  border-top: 0;
}
.pane-media-default:not(:last-child)::after {
  border-bottom: 0;
}

.pane-media-inset {
  margin: 18px;
  border-radius: var(--radius-half);
}
.pane-media-inset:not(:first-child) {
  margin-top: 0;
}
.pane-media-inset:not(:last-child) {
  margin-bottom: 0;
}

.pane-media-image {
  display: block;
  height: auto;
  width: 100%;
  margin: 0;
  aspect-ratio: 2/1;
  object-fit: cover;
  object-position: center;
}

.pane-group {
  position: relative;
}

.pane-group + .pane-group {
  border-top: 1px solid var(--surface-stroke);
}

[data-flux-pane-illustration] + :where(.pane-body, .pane-header) {
  position: relative;
  margin-top: -60px;
}

.pane-body:has(.icon-boxed:only-child):has(+ .pane-header) {
  padding-bottom: 0;
}.flyout {
  display: contents;
}

.flyout-dialog {
  font-size: var(--font-size-default);
  line-height: var(--line-height-default);
  top: var(--pane-y);
  left: var(--pane-x);
  margin: 0;
  padding: 30px;
  background: unset;
  border: 0;
  cursor: default;
}
.flyout-dialog::backdrop {
  background: unset;
  cursor: default;
}

.flyout-pane {
  max-height: calc(100dvh - 120px);
  width: max-content;
  box-shadow: var(--shadow-md);
  overflow: auto;
  transform: translate3d(var(--pane-mx), var(--pane-my), 0);
}
.flyout-pane.is-auto-width {
  width: var(--opener-width);
}
.flyout-pane.is-closing {
  animation: close 210ms var(--swift-out) both;
}
.flyout-pane.is-opening {
  animation: open 210ms var(--swift-out) both;
}

@keyframes close {
  to {
    opacity: 0;
  }
}
@keyframes open {
  from {
    opacity: 0;
    transform: translate3d(0, 0, 0);
  }
}.aspect-ratio {
  position: relative;
  flex-shrink: 0;
}
.aspect-ratio > * {
  position: absolute;
  height: 100%;
  width: 100%;
  object-fit: cover;
  object-position: center;
}

.container {
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
  width: 100%;
}
@media (min-width: 640px) {
  .container {
    max-width: 640px;
  }
}
@media (min-width: 768px) {
  .container {
    max-width: 768px;
  }
}
@media (min-width: 1024px) {
  .container {
    max-width: 1024px;
  }
}
@media (min-width: 1280px) {
  .container {
    max-width: 1280px;
  }
}

.spacer {
  flex-grow: 1;
}.adaptive-group {
  display: flex;
  min-width: 0;
  flex-flow: row nowrap;
  gap: var(--gap, 9px);
}

.adaptive-slot {
  display: flex;
  min-width: 0;
  flex-flow: row nowrap;
}

.adaptive-slot-measurer {
  position: absolute;
  display: flex;
  top: 0;
  left: 0;
  width: max-content;
  flex-flow: row nowrap;
  pointer-events: none;
  visibility: hidden;
}.avatar {
  position: relative;
  display: inline-flex;
  height: 1em;
  width: 1em;
  flex: 0 0 1em;
  border-radius: var(--radius-full);
  user-select: none;
}
.avatar:is(button) {
  padding: 0;
  border: 0;
}

.avatar-image {
  display: block;
  height: inherit;
  width: inherit;
  background: var(--gray-50);
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px var(--gray-100);
}

.avatar-fallback {
  position: absolute;
  display: flex;
  inset: 0;
  align-items: center;
  justify-content: center;
  border-radius: inherit;
}
.avatar-fallback .icon {
  font-size: 0.5em;
}
.avatar-fallback :is(span) {
  font-size: 0.4em;
  font-weight: 600;
  line-height: 1;
}

.avatar-fallback-colorized {
  background: color-mix(in srgb, var(--color), var(--gray-25) 80%);
  color: var(--color);
}

[dark] .avatar-fallback-colorized {
  background: color-mix(in srgb, var(--color), var(--gray-25) 70%);
}

.avatar-fallback-neutral {
  background: var(--gray-100);
  color: var(--foreground-secondary);
}

.avatar-loading {
  position: absolute;
  display: flex;
  inset: 0;
  align-items: center;
  justify-content: center;
  background: rgb(from var(--gray-50) r g b/0.84);
  box-shadow: inset 0 0 0 1px var(--gray-100);
  border-radius: inherit;
  backdrop-filter: blur(3px) saturate(180%);
}
.avatar-loading .spinner {
  --track: rgb(from var(--gray-950) r g b / .12);
}

.avatar-status {
  position: absolute;
  display: block;
  right: 0.03em;
  bottom: 0.03em;
  height: 0.27em;
  width: 0.27em;
  border-radius: var(--radius-full);
}

.avatar-status-gray {
  background: var(--gray-500);
}

.avatar-status-primary {
  background: var(--primary-600);
}

.avatar-status-danger {
  background: var(--danger-600);
}

.avatar-status-info {
  background: var(--info-600);
}

.avatar-status-success {
  background: var(--success-600);
}

.avatar-status-warning {
  background: var(--warning-600);
}

.avatar-status-icon {
  position: absolute;
  right: 0;
  bottom: 0;
}

.avatar-clickable {
  cursor: pointer;
  transition: filter 150ms var(--swift-out);
}
@media (hover: hover) {
  .avatar-clickable:hover {
    filter: brightness(110%);
  }
}

.status-avatar {
}

.status-avatar .avatar-fallback,
.status-avatar .avatar-image {
  mask: radial-gradient(circle 0.18em at calc(100% - 0.17em) calc(100% - 0.17em), transparent 100%, #000 100%);
  -webkit-mask: radial-gradient(circle 0.18em at calc(100% - 0.17em) calc(100% - 0.17em), transparent 100%, #000 100%);
}

.status-icon-avatar {
}

.status-icon-avatar .avatar-fallback,
.status-icon-avatar .avatar-image {
  mask: radial-gradient(circle 0.3em at calc(100% - 0.195em) calc(100% - 0.195em), transparent 100%, #000 100%);
  -webkit-mask: radial-gradient(circle 0.3em at calc(100% - 0.195em) calc(100% - 0.195em), transparent 100%, #000 100%);
}

.persona {
  display: flex;
  padding: 6px;
  align-items: center;
  gap: 12px;
  background: unset;
  border: 0;
  border-radius: var(--radius);
  cursor: pointer;
  text-align: left;
  transition: var(--transition-default);
  transition-property: background, outline-color, outline-offset;
  outline: 2px solid rgb(from var(--primary-600) r g b/0);
  outline-offset: 0;
}
.persona:focus-visible {
  outline-color: var(--primary-600);
  outline-offset: 2px;
}
@media (hover: hover) {
  .persona:hover {
    background: var(--gray-100);
  }
}

.persona-details {
  display: flex;
  margin-right: 9px;
  flex-flow: column;
  gap: 3px;
}
.persona-details :is(strong) {
  font-size: var(--font-size-default);
  line-height: 18px;
  width: max-content;
  color: var(--foreground-prominent);
}
.persona-details :is(span) {
  font-size: var(--font-size-small);
  line-height: 18px;
  color: var(--foreground);
}.avatar-group {
  display: inline-flex;
  align-items: center;
  flex-flow: row nowrap;
}
.avatar-group .avatar {
  position: relative;
  margin-left: calc(var(--overlap, 0.21) * -1em);
}
.avatar-group .avatar:first-child {
  margin-left: 0;
}
.avatar-group .avatar:not(:first-child) {
  mask-image: linear-gradient(#000, #000), radial-gradient(circle closest-side, #000 99%, transparent 100%);
  mask-repeat: no-repeat;
  mask-size: 100% 100%, 1.24em 1.24em;
  mask-position: 0 0, left calc(var(--overlap, 0.3) * 1em - 1em - 0.12em) top -0.12em;
  mask-composite: exclude;
}.badge {
  font-size: var(--font-size-xsmall);
  line-height: var(--line-height-xsmall);
  display: inline-flex;
  height: 28px;
  width: max-content;
  margin-top: -2px;
  margin-bottom: -2px;
  padding-left: 9px;
  padding-right: 9px;
  align-items: center;
  gap: 6px;
  background: var(--surface);
  border: 1px solid var(--surface-stroke);
  border-radius: var(--radius-full);
  color: var(--foreground-prominent);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.badge:is(a, button) {
  color: var(--foreground-prominent);
  cursor: pointer;
  text-decoration: none;
  transition: background var(--transition-default);
}
@media (hover: hover) {
  .badge:is(a, button):hover {
    background: var(--gray-50);
    color: var(--foreground-prominent);
  }
}
.badge.is-small {
  font-size: var(--font-size-2xsmall);
  line-height: var(--line-height-2xsmall);
  height: 21px;
  padding-left: 6px;
  padding-right: 6px;
}
.badge.is-small .badge-close {
  height: 15px;
  width: 15px;
  margin-right: -3px;
  padding: 3px;
}
.badge.is-small .badge-close .icon {
  font-size: 12px;
}
.badge.is-small .badge-dot {
  height: 6px;
  width: 6px;
}
.badge.is-large {
  font-size: var(--font-size-small);
  line-height: var(--line-height-small);
  height: 33px;
  padding-left: 12px;
  padding-right: 12px;
}
.badge.is-large .badge-close {
  height: 24px;
  width: 24px;
}
.badge.is-large .badge-close .icon {
  font-size: 18px;
}
.badge .spinner {
  --value: var(--color);
}

.badge-close {
  display: flex;
  height: 20px;
  width: 20px;
  margin-right: -6px;
  padding: 5px;
  align-items: center;
  justify-content: center;
  background: unset;
  border: 0;
  border-radius: var(--radius-full);
  color: var(--foreground-secondary);
  cursor: pointer;
}
@media (hover: hover) {
  .badge-close:hover {
    background: var(--gray-100);
    color: var(--foreground);
  }
}
.badge-close:active {
  background: var(--gray-200);
  color: var(--foreground);
}
.badge-close .icon {
  font-size: 16px;
}

.badge-colored {
  background: var(--background);
  border-color: var(--border);
}

.badge-dot {
  display: block;
  height: 9px;
  width: 9px;
  background: var(--color);
  border-radius: var(--radius-full);
}

.badge-icon {
  margin-left: -3px;
  color: var(--color);
}

.badge-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.badge-label:only-child {
  margin-left: 3px;
  margin-right: 3px;
  color: var(--text);
}

.badge-gray {
  --background: var(--gray-50);
  --border: var(--gray-200);
  --color: var(--foreground);
  --text: var(--foreground-prominent);
}
.badge-gray .badge-label {
  color: var(--foreground-prominent);
}
.badge-gray .spinner {
  --value: var(--primary-600);
}

.badge-primary {
  --background: var(--primary-50);
  --border: var(--primary-200);
  --color: var(--primary-600);
  --text: var(--primary-700);
}

.badge-danger {
  --background: var(--danger-50);
  --border: var(--danger-200);
  --color: var(--danger-600);
  --text: var(--danger-700);
}

.badge-info {
  --background: var(--info-50);
  --border: var(--info-200);
  --color: var(--info-600);
  --text: var(--info-700);
}

.badge-success {
  --background: var(--success-50);
  --border: var(--success-200);
  --color: var(--success-600);
  --text: var(--success-700);
}

.badge-warning {
  --background: var(--warning-50);
  --border: var(--warning-200);
  --color: var(--warning-600);
  --text: var(--warning-700);
}

.tag {
  background: var(--gray-50);
  border-color: var(--gray-200);
  border-radius: var(--radius-half);
  font-weight: 400;
}

.tag-keyboard-shortcut {
  padding-left: 3px;
  padding-right: 3px;
}

.tag-close {
  border-radius: var(--radius-half);
}

.tag-dot {
}

.tag-icon {
}

.tag-label {
}

.badge-group {
  --badge-group-padding: 12px;
  height: auto;
  padding: 3px var(--badge-group-padding);
  gap: 9px;
  border-color: var(--badge-group-border);
}
.badge-group .badge {
  margin-top: 0;
  margin-bottom: 0;
  border-color: var(--badge-group-border);
}

.badge-group-has-start {
  padding-left: 3px;
}

.badge-group-has-end {
  padding-right: 3px;
}

.badge-group-small {
  font-size: var(--font-size-2xsmall);
  line-height: var(--line-height-2xsmall);
  --badge-group-padding: 9px;
  gap: 6px;
}

.badge-group-large {
  font-size: var(--font-size-small);
  line-height: var(--line-height-small);
  --badge-group-padding: 15px;
}

.badge-group-icon {
  color: var(--color);
}

.badge-group-label {
  color: var(--text);
}

.badge-group-gray {
  --badge-group-border: var(--gray-200);
  background: var(--gray-50);
}
@media (hover: hover) {
  .badge-group-gray:is(a, button):hover {
    background: var(--gray-100);
  }
}

.badge-group-primary {
  --badge-group-border: var(--primary-200);
  background: var(--primary-50);
}
@media (hover: hover) {
  .badge-group-primary:is(a, button):hover {
    background: var(--primary-100);
  }
}

.badge-group-danger {
  --badge-group-border: var(--danger-200);
  background: var(--danger-50);
}
@media (hover: hover) {
  .badge-group-danger:is(a, button):hover {
    background: var(--danger-100);
  }
}

.badge-group-info {
  --badge-group-border: var(--info-200);
  background: var(--info-50);
}
@media (hover: hover) {
  .badge-group-info:is(a, button):hover {
    background: var(--info-100);
  }
}

.badge-group-success {
  --badge-group-border: var(--success-200);
  background: var(--success-50);
}
@media (hover: hover) {
  .badge-group-success:is(a, button):hover {
    background: var(--success-100);
  }
}

.badge-group-warning {
  --badge-group-border: var(--warning-200);
  background: var(--warning-50);
}
@media (hover: hover) {
  .badge-group-warning:is(a, button):hover {
    background: var(--warning-100);
  }
}

.tag-gray {
}

.tag-primary {
}

.tag-danger {
}

.tag-info {
}

.tag-success {
}

.tag-warning {
}.filter {
  max-height: 50dvh;
  max-width: 100%;
  padding: 9px;
  width: 300px;
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
  transition: height 150ms var(--deceleration-curve);
  z-index: 0;
}
.filter::-webkit-scrollbar {
  display: none;
  height: 0;
  width: 0;
}
.filter .menu > :where(.divider, .separator) {
  margin: 3px -9px;
}
.filter .menu > .menu-group > .menu-sub-header {
  top: 51px;
}
.filter .menu > .menu-group:has(.filter-search) > .menu-sub-header {
  top: 105px;
}
.filter .menu .menu-item-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.filter .pane-body {
  margin: -9px;
}

.filter-badge {
  padding-left: 6px;
  padding-right: 6px;
  background: var(--primary-50);
  border: 1px dashed var(--primary-300);
  border-radius: var(--radius-half);
  font-weight: 500;
}
.filter-badge .badge-label {
  color: var(--primary-900);
}

.filter-button {
  box-shadow: none;
}
.filter-button .button-icon {
  color: var(--primary-700);
  font-size: 16px;
}

.filter-header {
  position: sticky;
  margin: -9px -9px 3px;
  padding: 9px;
  top: -9px;
  background: var(--surface);
  border-bottom: 1px solid var(--surface-stroke);
  z-index: 2;
}
.filter-header:first-child {
  border-top-left-radius: var(--radius);
  border-top-right-radius: var(--radius);
}

.filter-back {
  flex-grow: 1;
}

.filter-header.menu-group .filter-action {
  min-width: 42px;
  flex: 0 0 42px;
  justify-content: center;
}

.filter-date-picker {
  margin: -9px;
}

.filter-search {
  position: sticky;
  top: -9px;
  margin: -9px -9px 0;
  padding: 9px;
  background: linear-gradient(to bottom, var(--surface) 75%, transparent);
  z-index: 1;
}

.filter-header + .menu-group .filter-search {
  top: 52px;
}

.filter-bar {
  display: flex;
  flex-flow: row nowrap;
  flex-grow: 1;
  gap: 15px;
}

.filter-bar-search {
  max-width: 300px;
}.menu {
  display: flex;
  flex-flow: column;
}

.menu-normal {
  gap: 6px;
}

.menu-large {
  gap: 9px;
}

.menu-group {
  counter-reset: menu-group;
}

.menu-group-horizontal {
  display: flex;
  gap: 3px;
}

.menu-group-vertical {
  display: flex;
  flex-flow: column;
  gap: 1px;
}

.menu-pane {
  display: flex;
  flex-flow: column;
  gap: 9px;
  padding: 9px;
}

.menu-item {
  height: unset;
  min-height: 42px;
  gap: 15px;
  justify-content: flex-start;
  border: 0;
  box-shadow: none;
  color: var(--foreground);
  text-align: left;
  transition-duration: 0s;
}
@media (hover: hover) {
  .menu-item:hover {
    background: var(--gray-100);
  }
}
.menu-item:active {
  background: var(--gray-200);
}
.menu-item .badge:last-child {
  margin-right: -6px;
}

.menu-item-icon {
}

.menu-item-label {
  flex-grow: 1;
  font-weight: 400;
  text-align: left;
}
.menu-item-label:only-child {
  margin-left: 0;
  margin-right: 0;
  min-width: unset;
}

.menu-item-active {
  background: var(--primary-600);
  color: var(--primary-50);
}
.menu-item-active .menu-item-icon {
  color: var(--primary-25);
}
@media (hover: hover) {
  .menu-item-active:hover {
    background: var(--primary-600);
  }
}
.menu-item-active:active {
  background: var(--primary-600);
}

.menu-item-destructive .menu-item-icon {
  color: var(--danger-700);
}
.menu-item-destructive .menu-item-label {
  color: var(--danger-700);
}

.menu-item-highlighted {
  background: var(--primary-100);
  color: var(--primary-600);
}
.menu-item-highlighted .menu-item-icon {
  color: var(--primary-700);
}
@media (hover: hover) {
  .menu-item-highlighted:hover {
    background: var(--primary-100);
  }
}
.menu-item-highlighted:active {
  background: var(--primary-100);
}
.menu-item-highlighted .badge {
  --surface-stroke: var(--primary-200);
}

.menu-item-indented {
  margin-left: 33px;
}

.menu-cone-active .menu-item {
  pointer-events: none;
}

.menu-collapsible {
  display: flex;
  flex-flow: column;
}

.menu-collapsible-opened {
}

.menu-collapsible-body {
  position: relative;
  min-height: 0;
  transition: height 300ms var(--swift-out), opacity 200ms var(--swift-out);
}
.menu-collapsible-body::before {
  content: "";
  position: absolute;
  top: 3px;
  bottom: 3px;
  left: 21px;
  width: 2px;
  background: var(--surface-stroke);
}
.menu-collapsible-body.v-enter-from, .menu-collapsible-body.v-leave-to {
  opacity: 0;
}
.menu-collapsible-body.v-enter-to, .menu-collapsible-body.v-leave-from {
  opacity: 1;
}
.menu-collapsible-body.v-enter-active, .menu-collapsible-body.v-leave-active {
  overflow: hidden;
}

.menu-collapsible-content {
  display: flex;
  padding-top: 3px;
  padding-bottom: 3px;
  padding-left: 35px;
  flex-flow: column;
  gap: 3px;
}

.menu-item-selectable-icon {
}

.menu-item-selected .menu-item-selectable-icon {
  color: var(--primary-600);
}

.menu-item-command {
  font-size: var(--font-size-small);
  line-height: var(--line-height-small);
  margin-top: 1px;
  margin-left: auto;
  padding-left: 6px;
  color: var(--foreground-secondary);
  font-family: inherit;
  white-space: nowrap;
}

.menu-item-command-icon {
  margin-right: -6px;
  color: var(--foreground-secondary);
}
.menu-item-command-icon.icon {
  font-size: 16px;
}

.menu-item-command + .menu-item-command-icon {
  margin-left: -9px;
}

.menu-item-active .menu-item-command,
.menu-item-active .menu-item-command-icon {
  color: var(--primary-300);
}

.menu-item-image {
  margin-left: -2px;
  margin-right: -2px;
  height: 24px;
  width: 24px;
  border-radius: 3px;
}

.menu-item .avatar {
  margin: -3px;
  font-size: 24px;
}

.menu-group-horizontal .menu-item {
  flex-basis: 0;
  flex-grow: 1;
}
.menu-group-horizontal .menu-item:has(.menu-item-icon:only-child) {
  justify-content: center;
}

.menu-title {
  font-size: var(--font-size-xlarge);
  line-height: var(--line-height-xlarge);
  padding: 0 12px;
  color: var(--foreground-prominent);
  font-weight: 700;
}

.menu-sub-header {
  position: sticky;
  display: flex;
  top: 0;
  margin-top: -9px;
  margin-bottom: -3px;
  padding: 12px 12px 6px;
  align-items: center;
  gap: 9px;
  background: linear-gradient(to bottom, var(--surface) 75%, transparent);
  pointer-events: none;
  z-index: 1;
}

.menu-sub-header-icon,
.menu-sub-header-label {
  color: var(--foreground-secondary);
}

.menu-sub-header-icon {
  font-size: 16px;
}

.menu-sub-header-label {
  font-size: var(--font-size-small);
  line-height: var(--line-height-small);
  flex-grow: 1;
}

.menu-item + .menu-sub-header {
  margin-top: 9px;
}

.menu-large .menu-item {
  position: relative;
  padding-left: 15px;
  padding-right: 15px;
}
.menu-large .menu-item::after {
  position: absolute;
  display: block;
  top: 12px;
  right: 12px;
  bottom: 12px;
  width: 4px;
  content: "";
  background: var(--primary-600);
  border-radius: var(--radius-full);
  opacity: 0;
  transition: opacity var(--transition-default);
}

.menu-large .menu-item:not(.menu-item-indented) {
  min-height: 48px;
}
.menu-large .menu-item:not(.menu-item-indented)::after {
  background: var(--primary-25);
}

.menu-large .menu-item-active::after {
  opacity: 1;
}
.menu-large .menu-item-active.menu-item-indented {
  background: var(--gray-100);
}
.menu-large .menu-item-active.menu-item-indented .menu-item-icon,
.menu-large .menu-item-active.menu-item-indented .menu-item-label {
  color: var(--foreground-prominent);
}

.base-pane > .menu {
  margin-left: 9px;
  margin-right: 9px;
}
.base-pane > .menu:first-child {
  margin-top: 9px;
}
.base-pane > .menu:last-child {
  margin-bottom: 9px;
}
.base-pane > .menu > :where(.divider, .separator) {
  margin: 3px -9px;
}

.expandable-body > .menu {
  margin-left: 9px;
  margin-right: 9px;
}
.expandable-body > .menu:last-child {
  margin-bottom: 9px;
}
.expandable-body > .menu > :where(.divider, .separator) {
  margin-left: 18px;
  margin-right: 18px;
}.form-input-group > .button-group > .button, .form-input-group > :is(.form-input, .form-select, .button) {
  height: 100%;
  min-height: unset;
  border: 0;
  border-radius: 0;
  outline: 0 !important;
}
.form-input-group > .button-group > .button:first-child, .form-input-group > :first-child:is(.form-input, .form-select, .button) {
  border-top-left-radius: calc(var(--radius) - 1px);
  border-bottom-left-radius: calc(var(--radius) - 1px);
}
.form-input-group > .button-group > .button:last-child, .form-input-group > :last-child:is(.form-input, .form-select, .button) {
  border-top-right-radius: calc(var(--radius) - 1px);
  border-bottom-right-radius: calc(var(--radius) - 1px);
}

.form-structure-element {
  display: flex;
  flex-flow: column;
}

.form {
  counter-reset: flux-step;
  gap: 42px;
}

.pane > .form {
  display: contents;
  gap: 0;
}

.form-column,
.form-section {
  gap: 18px;
}

.form > .button,
.form-column > .button,
.form-section > .button {
  align-self: flex-start;
}

.form-grid {
  --columns: 2;
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(var(--columns), minmax(0, 1fr));
}

.form-row {
  display: flex;
  flex-grow: 1;
  gap: 18px;
}

.form-section-title {
  font-size: var(--font-size-xlarge);
  line-height: var(--line-height-xlarge);
  color: var(--foreground-prominent);
  font-weight: 800;
}

.form-step {
  counter-increment: flux-step;
  gap: 12px;
}

.form-step-header {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.form-step-number {
  font-size: var(--font-size-xsmall);
  line-height: var(--line-height-xsmall);
  display: inline-flex;
  height: 27px;
  width: 27px;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  background: var(--primary-50);
  border-radius: var(--radius);
  color: var(--primary-600);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.form-step-number::before {
  content: counter(flux-step);
}

.form-step-heading {
  display: flex;
  min-width: 0;
  flex-flow: column;
  gap: 3px;
}

.form-step-title {
  font-size: var(--font-size-large);
  line-height: 27px;
  color: var(--foreground-prominent);
  font-weight: 700;
}

.form-step-subtitle {
  color: var(--foreground-secondary);
}

.form-step-end {
  display: inline-flex;
  margin-left: auto;
  align-items: center;
}

.form-step-content {
  display: flex;
  margin-left: 39px;
  flex-flow: column;
  gap: 12px;
}

@media (max-width: 767.98px) {
  .form-grid {
    grid-template-columns: 1fr;
  }
  .form-row {
    flex-flow: column;
    gap: 18px;
  }
}
.form-field {
  display: flex;
  flex: 1 1 0;
  flex-flow: column;
  gap: 6px;
}

.form-field-header {
  display: flex;
  width: 100%;
  margin-bottom: 0;
  align-items: center;
  align-self: flex-start;
  gap: 6px;
}

.form-field-label {
  min-height: var(--line-height-default);
  color: var(--foreground-prominent);
  font-weight: 600;
}

.form-field-optional {
  font-size: var(--font-size-xsmall);
  line-height: var(--line-height-xsmall);
  color: var(--foreground-secondary);
}

.form-field-value {
  font-size: var(--font-size-xsmall);
  line-height: var(--line-height-xsmall);
  margin-left: auto;
  color: var(--foreground-secondary);
}

.form-field-counter {
  font-size: var(--font-size-xsmall);
  line-height: var(--line-height-xsmall);
  margin-left: auto;
  color: var(--foreground-secondary);
  white-space: nowrap;
}

.form-field-addition {
  font-size: var(--font-size-small);
  line-height: var(--line-height-small);
  display: flex;
  margin-top: 3px;
  margin-bottom: 3px;
  gap: 9px;
}

.form-field-addition-icon {
  margin-top: calc((var(--line-height-small) - 16px) / 2);
}

.form-field-addition-error {
  color: var(--danger-600);
}

.form-field-addition-hint {
  color: var(--foreground-secondary);
}

.form-field-addition + .form-field-addition {
  margin-top: 0;
}

.form-input {
  font-size: var(--font-size-default);
  line-height: var(--line-height-default);
  position: relative;
  display: block;
  height: 42px;
  width: 100%;
  padding: 0 12px;
  background: var(--surface);
  background-clip: padding-box;
  border: 1px solid var(--surface-stroke);
  border-radius: var(--radius);
  box-shadow: var(--shadow-px);
  color: var(--foreground);
  outline: 0 solid transparent;
  transition: var(--transition-default);
  transition-property: background, border-color, outline-color, outline-offset;
}
.form-input::placeholder {
  color: var(--foreground-secondary);
}
.form-input.is-secondary {
  background: var(--gray-100);
  border-color: transparent;
  box-shadow: none;
}
.form-input.is-condensed {
  height: 34px;
}
.form-input.is-invalid {
  border-color: var(--danger-500);
}

.form .form-input {
  align-self: start;
}

.form-input-disabled {
  background: var(--surface-disabled);
  color: var(--foreground-secondary);
  cursor: not-allowed;
}
.form-input-disabled input {
  cursor: inherit;
}

.form-input-enabled {
  outline: 2px solid rgb(from var(--primary-600) r g b/0);
  outline-offset: 0;
}
.form-input-enabled:focus-visible, .form-input-enabled:focus-within {
  outline-color: var(--primary-600);
  outline-offset: -1px;
}
@media (hover: hover) {
  .form-input-enabled:hover {
    border-color: var(--surface-stroke-hover);
  }
}

.form-input-icon {
  position: absolute;
  margin-top: 11px;
  margin-bottom: 11px;
  color: var(--foreground-secondary);
  pointer-events: none;
}

.form-input-icon-trailing {
  right: 12px;
}

.form-input-icon-leading {
  left: 12px;
}

.form-input-icon-password-toggle {
  display: inline-flex;
  padding: 0;
  align-items: center;
  justify-content: center;
  background: unset;
  border: 0;
  color: var(--foreground-secondary);
  pointer-events: unset;
  cursor: pointer;
}
@media (hover: hover) {
  .form-input-icon-password-toggle:hover {
    color: var(--foreground);
  }
}
.form-input-icon-password-toggle:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.form-input-native {
  position: absolute;
  inset: 0;
  height: 100%;
  width: 100%;
  padding: 0 12px;
  background: unset;
  border: 0;
  border-radius: inherit;
  color: inherit;
  font: inherit;
  outline: 0;
  text-align: left;
}
.form-input-native::placeholder {
  color: var(--foreground-secondary);
}
.form-input-native::-webkit-search-decoration, .form-input-native::-webkit-search-cancel-button, .form-input-native::-webkit-search-results-button, .form-input-native::-webkit-search-results-decoration {
  -webkit-appearance: none;
}
.form-input-native::-webkit-color-swatch {
  border: 0;
  border-radius: var(--radius-half);
}
.form-input-native::-webkit-color-swatch-wrapper {
  width: calc(100% + 24px);
  margin: 0 -12px;
  padding: 3px;
}

.form-input-native-has-icon-leading {
  padding-left: 42px;
}

.form-input-native-has-icon-trailing {
  padding-right: 42px;
}

.form-number-input-native {
  padding-right: 38px;
  appearance: textfield;
  -moz-appearance: textfield;
  font-variant-numeric: tabular-nums;
}
.form-number-input-native::-webkit-outer-spin-button, .form-number-input-native::-webkit-inner-spin-button {
  margin: 0;
  -webkit-appearance: none;
}

.form-number-input-buttons {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  width: 33px;
  border-left: 1px solid var(--surface-stroke);
  border-radius: 0 calc(var(--radius) - 1px) calc(var(--radius) - 1px) 0;
  overflow: hidden;
}

.form-number-input-button {
  display: flex;
  flex: 1 1 0;
  margin: 0;
  padding: 0;
  align-items: center;
  justify-content: center;
  background: var(--surface);
  border: 0;
  color: var(--foreground-secondary);
  cursor: pointer;
  transition: var(--transition-default);
  transition-property: background, color;
}
.form-number-input-button + .form-number-input-button {
  border-top: 1px solid var(--surface-stroke);
}
@media (hover: hover) {
  .form-number-input-button:hover {
    background: var(--surface-hover);
    color: var(--foreground);
  }
}
.form-number-input-button:disabled {
  color: var(--surface-stroke);
  cursor: not-allowed;
}

.form-input-addition {
  display: flex;
  width: unset;
  align-items: center;
  flex-grow: 0;
  justify-content: center;
  background: var(--surface-disabled);
  color: var(--foreground-secondary);
  pointer-events: none;
}
.form-input-addition:has(+ .form-input .form-input-native) {
  border-right: 1px solid var(--surface-stroke);
}
.form-input-addition + .form-input-addition {
  border-left: 1px solid var(--surface-stroke);
}
.form-input:has(.form-input-native) + .form-input-addition {
  border-left: 1px solid var(--surface-stroke);
}

.form-input-group {
  display: flex;
  padding: 0;
  outline: 2px solid rgb(from var(--primary-600) r g b/0);
  outline-offset: 0;
}
.form-input-group:focus-visible, .form-input-group:focus-within {
  outline-color: var(--primary-600);
  outline-offset: -1px;
}
.form-input-group > :is(.form-input, .form-select, .button) + :is(.button, .button-group) {
  margin: 0;
  border-left: 1px solid var(--surface-stroke);
}
.form-input-group > .button-group > .button + .button {
  margin: 0;
  border-left: 1px solid var(--surface-stroke);
}
.form-input-group > .button-group:not(:first-child) > .button:first-child {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
.form-input-group.is-condensed .form-input-addition:not(:last-child), .form-input-group.is-secondary .form-input-addition:not(:last-child) {
  padding-right: 0;
  background: unset;
  border-color: transparent;
}
.form-input-group.is-secondary .form-input {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}
.form-input-group.is-secondary .secondary-button {
  background: transparent;
  border-color: var(--surface-stroke);
  box-shadow: none;
}
@media (hover: hover) {
  .form-input-group.is-secondary .secondary-button:hover {
    background: var(--surface-stroke-hover);
  }
}
.form-input-group:has(*:disabled) {
  cursor: not-allowed;
}
.form-input-group:has(*:disabled) > * {
  pointer-events: none;
}
.form-input-group :is(.button[disabled]),
.form-input-group :is(.button[aria-disabled=true]) {
  background: var(--surface-disabled);
  opacity: 1;
}
.form-input-group :is(.button[disabled]),
.form-input-group :is(.button[disabled]) .button-icon,
.form-input-group :is(.button[aria-disabled=true]),
.form-input-group :is(.button[aria-disabled=true]) .button-icon {
  color: var(--foreground-secondary);
}

.form-date-input {
  cursor: default;
}
.form-date-input :is(input) {
  text-align: left;
}
.form-date-input :is(input)::-webkit-input-placeholder {
  visibility: hidden;
}
.form-date-input :is(input)::-webkit-calendar-picker-indicator {
  display: none;
  -webkit-appearance: none;
}

.form-date-range-input {
  display: flex;
  align-items: center;
  cursor: default;
}

.form-date-time-input .form-input:last-child {
  max-width: 99px;
}
.form-date-time-input .input-group {
  flex-grow: 1;
}

.form-time-input {
}

.form-select {
  position: relative;
  display: flex;
  height: unset;
  min-height: 42px;
  padding: 0 39px 0 6px;
  align-items: center;
  flex-wrap: wrap;
  gap: 0 6px;
  cursor: pointer;
}
.form-select:not(.is-disabled) {
  outline: 2px solid rgb(from var(--primary-600) r g b/0);
  outline-offset: 0;
}
.form-select:not(.is-disabled):focus-visible, .form-select:not(.is-disabled):focus-within {
  outline-color: var(--primary-600);
  outline-offset: -1px;
}
@media (hover: hover) {
  .form-select:not(.is-disabled):hover {
    border-color: var(--surface-stroke-hover);
  }
}
.form-select.is-disabled {
  cursor: not-allowed;
}
.form-select.is-focused {
  outline-color: var(--primary-600);
  outline-offset: -1px;
}
.form-select .badge {
  margin-top: 6px;
  margin-bottom: 6px;
  max-width: 100%;
  flex: 0 0 auto;
}

.form-select-icon {
  position: absolute;
  top: 50%;
  right: 12px;
  color: var(--foreground-secondary);
  translate: 0 -50%;
}

.form-select-input {
  position: sticky;
  top: 0;
  height: 48px;
  margin-bottom: 9px;
  background: var(--surface);
  border-top: 0;
  border-left: 0;
  border-right: 0;
  border-radius: 0;
  outline: 0;
  z-index: 2;
  outline: 0 !important;
}
.form-select-input .form-input-icon {
  right: 0;
  margin: 15px;
  font-size: 18px;
}
.form-select-input .form-input-native {
  padding-left: 18px;
  padding-right: 18px;
}

.form-select-placeholder {
  margin-left: 6px;
  margin-right: 6px;
  color: var(--foreground-secondary);
  user-select: none;
}

.form-select-popup {
  position: fixed;
  display: block;
  top: 0;
  left: 0;
  width: var(--width, auto);
  max-height: max(330px, 50dvh);
  min-width: 120px;
  box-shadow: var(--shadow-md);
  overflow: auto;
  translate: var(--x) var(--y);
  z-index: 10000;
}
.form-select-popup .menu-item {
  contain-intrinsic-size: auto 42px;
  content-visibility: auto;
}
.form-select-popup.is-keyboard-action .menu-item {
  transition: 0s;
}
.form-select-popup.is-searchable .menu-sub-header {
  top: 48px;
}

.form-select-selected {
  position: absolute;
  height: 100%;
  padding-left: 12px;
  padding-right: 42px;
  inset: -1px;
  pointer-events: none;
}
.form-select-selected .button-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.form-select.is-disabled .form-select-icon {
  opacity: 0.5;
}

.form-select.is-disabled .form-select-selected {
  background: var(--surface-disabled);
  border: 1px solid var(--surface-stroke);
  color: var(--foreground-secondary);
  opacity: 1;
}

.form-text-area {
  height: unset;
  min-height: calc(20px + var(--rows, 1) * 1lh);
  padding-top: 9px;
  padding-bottom: 9px;
  flex-shrink: 0;
  field-sizing: content;
  resize: vertical;
}

.form-text-area-disabled {
}

.form-text-area-enabled {
}

.form-checkbox-group {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}
.form-checkbox-group.is-inline {
  flex-direction: row;
  flex-wrap: wrap;
  gap: 8px 20px;
}
.form-checkbox-group.is-inline:has(> .form-checkbox-tile) {
  align-items: stretch;
  flex-wrap: nowrap;
  gap: 9px;
}
.form-checkbox-group.is-inline:has(> .form-checkbox-tile) > .form-checkbox-tile {
  flex: 1 1 0;
  min-width: 0;
}
.form-checkbox-group.is-connected {
  align-items: stretch;
  gap: 0;
}
.form-checkbox-group.is-connected > .form-checkbox-tile {
  position: relative;
  border-radius: 0;
}
.form-checkbox-group.is-connected > .form-checkbox-tile:not(:first-child) {
  margin-top: -1px;
}
.form-checkbox-group.is-connected > .form-checkbox-tile:first-child {
  border-top-left-radius: var(--radius);
  border-top-right-radius: var(--radius);
}
.form-checkbox-group.is-connected > .form-checkbox-tile:last-child {
  border-bottom-left-radius: var(--radius);
  border-bottom-right-radius: var(--radius);
}
@media (hover: hover) {
  .form-checkbox-group.is-connected > .form-checkbox-tile:hover {
    z-index: 1;
  }
}
.form-checkbox-group.is-connected > .form-checkbox-tile:has(.form-checkbox-native:is(:checked, :indeterminate)), .form-checkbox-group.is-connected > .form-checkbox-tile:has(.form-checkbox-native:focus-visible) {
  z-index: 1;
}
.form-checkbox-group.is-connected.is-inline {
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 0;
}
.form-checkbox-group.is-connected.is-inline > .form-checkbox-tile {
  flex: 1 1 0;
  min-width: 0;
}
.form-checkbox-group.is-connected.is-inline > .form-checkbox-tile:not(:first-child) {
  margin-top: 0;
  margin-left: -1px;
}
.form-checkbox-group.is-connected.is-inline > .form-checkbox-tile:first-child {
  border-radius: var(--radius) 0 0 var(--radius);
}
.form-checkbox-group.is-connected.is-inline > .form-checkbox-tile:last-child {
  border-radius: 0 var(--radius) var(--radius) 0;
}

.form-checkbox {
  display: inline-flex;
  flex-shrink: 0;
  align-items: flex-start;
  gap: 12px;
  line-height: 21px;
  outline: 0;
}
.form-checkbox.is-disabled {
  cursor: not-allowed;
}
.form-checkbox.is-disabled .form-checkbox-element {
  background: var(--surface-disabled);
  border-color: var(--surface-stroke);
  color: var(--foreground-secondary);
}
.form-checkbox.is-disabled .form-checkbox-label {
  color: var(--foreground-secondary);
}
.form-checkbox.is-readonly {
  cursor: default;
}
.form-checkbox.is-readonly .form-checkbox-native {
  pointer-events: none;
}
.form-checkbox.is-invalid .form-checkbox-element {
  border-color: var(--danger-500);
}

.form-checkbox-element,
.form-checkbox-native {
  margin: 1px 0 0;
  height: 20px;
  width: 20px;
}

.form-checkbox-element {
  position: relative;
  display: inline-flex;
  height: 20px;
  width: 20px;
  padding: 0;
  align-items: center;
  flex-shrink: 0;
  justify-content: center;
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-half);
  color: var(--primary-25);
  cursor: pointer;
  pointer-events: none;
  transition: 210ms var(--swift-out);
  transition-property: background, border-color, color, outline-color, outline-offset;
  outline: 2px solid rgb(from var(--primary-600) r g b/0);
  outline-offset: 0;
}
.form-checkbox-element .icon {
  opacity: 0;
  scale: 0.85;
  transition: inherit;
  transition-property: opacity;
}
.form-checkbox-element .icon :is(path) {
  stroke: currentColor;
  stroke-width: 54px;
}

.form-checkbox-text {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 3px;
}

.form-checkbox-label {
  font-size: var(--font-size-default);
  line-height: 21px;
}

.form-checkbox-sub-label {
  font-size: var(--font-size-small);
  line-height: var(--line-height-small);
  color: var(--foreground-secondary);
}

.form-checkbox-native {
  position: absolute;
  cursor: pointer;
  opacity: 0;
}
@media (hover: hover) {
  .form-checkbox-native:hover + .form-checkbox-element {
    background: var(--gray-100);
  }
}
.form-checkbox-native:is(:checked, :indeterminate) + .form-checkbox-element {
  background: var(--primary-600);
  border-color: var(--primary-600);
}
.form-checkbox-native:is(:checked, :indeterminate) + .form-checkbox-element .icon {
  opacity: 1;
}
.form-checkbox-native:focus-visible + .form-checkbox-element {
  outline-color: var(--primary-600);
  outline-offset: 2px;
}
.form-checkbox-native:disabled {
  cursor: not-allowed;
}
.form-checkbox-native:disabled + .form-checkbox-element {
  background: var(--gray-100);
  border-color: var(--gray-200);
  color: var(--foreground-secondary);
}

.form-checkbox-tile {
  width: 100%;
  align-items: flex-start;
  padding: 15px 18px;
  background: var(--surface);
  border: 1px solid var(--surface-stroke);
  border-radius: var(--radius);
  color: var(--foreground);
  cursor: pointer;
  transition: 210ms var(--swift-out);
  transition-property: background, border-color, color, outline-color, outline-offset;
  outline: 2px solid rgb(from var(--primary-600) r g b/0);
  outline-offset: 0;
}
@media (hover: hover) {
  .form-checkbox-tile:hover {
    background: var(--surface-hover);
  }
}
.form-checkbox-tile:has(.form-checkbox-native:focus-visible) {
  outline-color: var(--primary-600);
  outline-offset: 2px;
}
.form-checkbox-tile:has(.form-checkbox-native:is(:checked, :indeterminate)) {
  background: var(--primary-50);
  border-color: var(--primary-200);
  color: var(--primary-600);
}
.form-checkbox-tile.is-invalid {
  border-color: var(--danger-500);
}
.form-checkbox-tile > .form-checkbox-element {
  order: 3;
}
.form-checkbox-tile > .form-checkbox-icon {
  order: 1;
  flex-shrink: 0;
  margin-top: 1px;
  color: var(--primary-600);
}
.form-checkbox-tile > .form-checkbox-text {
  order: 2;
  flex: 1;
}
.form-checkbox-tile .form-checkbox-label {
  font-weight: 500;
}

.form-radio-group {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}
.form-radio-group.is-inline {
  flex-direction: row;
  flex-wrap: wrap;
  gap: 9px 21px;
}
.form-radio-group.is-inline:has(> .form-radio-tile) {
  align-items: stretch;
  flex-wrap: nowrap;
  gap: 9px;
}
.form-radio-group.is-inline:has(> .form-radio-tile) > .form-radio-tile {
  flex: 1 1 0;
  min-width: 0;
}
.form-radio-group.is-connected {
  align-items: stretch;
  gap: 0;
}
.form-radio-group.is-connected > .form-radio-tile {
  position: relative;
  border-radius: 0;
}
.form-radio-group.is-connected > .form-radio-tile:not(:first-child) {
  margin-top: -1px;
}
.form-radio-group.is-connected > .form-radio-tile:first-child {
  border-top-left-radius: var(--radius);
  border-top-right-radius: var(--radius);
}
.form-radio-group.is-connected > .form-radio-tile:last-child {
  border-bottom-left-radius: var(--radius);
  border-bottom-right-radius: var(--radius);
}
@media (hover: hover) {
  .form-radio-group.is-connected > .form-radio-tile:hover {
    z-index: 1;
  }
}
.form-radio-group.is-connected > .form-radio-tile:has(.form-radio-native:checked), .form-radio-group.is-connected > .form-radio-tile:has(.form-radio-native:focus-visible) {
  z-index: 1;
}
.form-radio-group.is-connected.is-inline {
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 0;
}
.form-radio-group.is-connected.is-inline > .form-radio-tile {
  flex: 1 1 0;
  min-width: 0;
}
.form-radio-group.is-connected.is-inline > .form-radio-tile:not(:first-child) {
  margin-top: 0;
  margin-left: -1px;
}
.form-radio-group.is-connected.is-inline > .form-radio-tile:first-child {
  border-radius: var(--radius) 0 0 var(--radius);
}
.form-radio-group.is-connected.is-inline > .form-radio-tile:last-child {
  border-radius: 0 var(--radius) var(--radius) 0;
}

.form-radio {
  position: relative;
  display: inline-flex;
  flex-shrink: 0;
  align-items: flex-start;
  gap: 12px;
  line-height: 21px;
  outline: 0;
  cursor: pointer;
}
.form-radio.is-disabled {
  cursor: not-allowed;
}
.form-radio.is-disabled .form-radio-element {
  background: var(--surface-disabled);
  border-color: var(--surface-stroke);
}
.form-radio.is-disabled .form-radio-label {
  color: var(--foreground-secondary);
}
.form-radio.is-readonly {
  cursor: default;
}
.form-radio.is-readonly .form-radio-native {
  pointer-events: none;
}
.form-radio.is-invalid .form-radio-element {
  border-color: var(--danger-500);
}

.form-radio-element,
.form-radio-native {
  margin: 1px 0 0;
  height: 20px;
  width: 20px;
}

.form-radio-element {
  position: relative;
  display: inline-flex;
  flex-shrink: 0;
  height: 20px;
  width: 20px;
  align-items: center;
  justify-content: center;
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-radius: 50%;
  cursor: pointer;
  pointer-events: none;
  transition: 210ms var(--swift-out);
  transition-property: background, border-color, outline-color, outline-offset;
  outline: 2px solid rgb(from var(--primary-600) r g b/0);
  outline-offset: 0;
}
.form-radio-element::after {
  content: "";
  height: 8px;
  width: 8px;
  background: var(--primary-25);
  border-radius: 50%;
  scale: 0;
  transition: inherit;
  transition-property: scale;
}

.form-radio-label {
  font-size: var(--font-size-default);
  line-height: 21px;
}

.form-radio-native {
  position: absolute;
  cursor: pointer;
  opacity: 0;
}
@media (hover: hover) {
  .form-radio-native:hover + .form-radio-element {
    background: var(--gray-100);
  }
}
.form-radio-native:checked + .form-radio-element {
  background: var(--primary-600);
  border-color: var(--primary-600);
}
.form-radio-native:checked + .form-radio-element::after {
  scale: 1;
}
.form-radio-native:focus-visible + .form-radio-element {
  outline-color: var(--primary-600);
  outline-offset: 2px;
}
.form-radio-native:disabled {
  cursor: not-allowed;
}
.form-radio-native:disabled + .form-radio-element {
  background: var(--gray-100);
  border-color: var(--gray-200);
}

.form-radio-text {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 3px;
}

.form-radio-sub-label {
  font-size: var(--font-size-small);
  line-height: var(--line-height-small);
  color: var(--foreground-secondary);
}

.form-radio-tile {
  width: 100%;
  align-items: flex-start;
  padding: 15px 18px;
  background: var(--surface);
  border: 1px solid var(--surface-stroke);
  border-radius: var(--radius);
  color: var(--foreground);
  cursor: pointer;
  transition: 210ms var(--swift-out);
  transition-property: background, border-color, color, outline-color, outline-offset;
  outline: 2px solid rgb(from var(--primary-600) r g b/0);
  outline-offset: 0;
}
@media (hover: hover) {
  .form-radio-tile:hover {
    background: var(--surface-hover);
  }
}
.form-radio-tile:has(.form-radio-native:focus-visible) {
  outline-color: var(--primary-600);
  outline-offset: 2px;
}
.form-radio-tile:has(.form-radio-native:checked) {
  background: var(--primary-50);
  border-color: var(--primary-200);
  color: var(--primary-600);
}
.form-radio-tile.is-invalid {
  border-color: var(--danger-500);
}
.form-radio-tile > .form-radio-element {
  order: 3;
}
.form-radio-tile > .form-radio-icon {
  order: 1;
  flex-shrink: 0;
  margin-top: 1px;
  color: var(--primary-600);
}
.form-radio-tile > .form-radio-text {
  order: 2;
  flex: 1;
}
.form-radio-tile .form-radio-label {
  font-weight: 500;
}

.form-quantity-selector {
  min-width: max-content;
  align-self: center;
  justify-self: center;
  border: 1px solid var(--surface-stroke);
  border-radius: var(--radius);
  box-shadow: var(--shadow-px);
  overflow: hidden;
  transition: var(--transition-default);
  transition-property: border-color, outline-color, outline-offset;
  outline: 2px solid rgb(from var(--primary-600) r g b/0);
  outline-offset: 0;
}
.form-quantity-selector:focus-visible, .form-quantity-selector:focus-within {
  outline-color: var(--primary-600);
  outline-offset: 2px;
}
@media (hover: hover) {
  .form-quantity-selector:hover {
    border-color: var(--surface-stroke-hover);
  }
}

.form-quantity-selector-button {
  margin: -1px;
  border: 0;
}
.form-quantity-selector-button:first-child {
  margin-right: 0;
}
.form-quantity-selector-button:last-child {
  margin-left: 0;
}
.form-quantity-selector-button, .form-quantity-selector-button:focus-visible, .form-quantity-selector-button:focus-within {
  outline: 0;
}

.form-quantity-selector-input {
  margin: -1px 0;
  padding-left: 0;
  padding-right: 0;
  border-radius: 0;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  text-align: center;
}
@media (hover: hover) {
  .form-quantity-selector-input:hover {
    border-color: var(--surface-stroke-hover);
  }
}
.form-quantity-selector-input, .form-quantity-selector-input:focus-visible, .form-quantity-selector-input:focus-within {
  outline: 0 !important;
}
.form-quantity-selector-input {
  -moz-appearance: textfield;
}
.form-quantity-selector-input::-webkit-outer-spin-button, .form-quantity-selector-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.form-pin-input {
  display: grid;
  width: min-content;
  gap: 0.4ch;
  grid-template-columns: repeat(var(--max-length, 0), 1fr);
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 24px;
  font-weight: 700;
}

.form-pin-input-field {
  padding: 0;
  width: 2.7ch;
  border: 1px solid var(--surface-stroke);
  border-radius: var(--radius);
  box-shadow: var(--shadow-px);
  font: inherit;
  line-height: 3.3ch;
  outline: 0;
  text-align: center;
  transition: var(--transition-default);
  transition-property: border-color, outline-color, outline-offset;
}

.form-pin-input-enabled {
}
.form-pin-input-enabled .form-pin-input-field {
  background-color: var(--surface);
  color: var(--foreground-prominent);
  outline: 2px solid rgb(from var(--primary-600) r g b/0);
  outline-offset: 0;
}
.form-pin-input-enabled .form-pin-input-field:focus-visible, .form-pin-input-enabled .form-pin-input-field:focus-within {
  outline-color: var(--primary-600);
  outline-offset: -1px;
}

.form-pin-input-disabled {
}
.form-pin-input-disabled .form-pin-input-field {
  background-color: var(--surface-disabled);
  color: var(--foreground-secondary);
  cursor: not-allowed;
}

.form-toggle {
  position: relative;
  display: block;
  width: 54px;
  height: 30px;
  flex: 0 0 auto;
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-full);
  contain: paint;
  outline: 2px solid rgb(from var(--primary-600) r g b/0);
  outline-offset: 0;
}
.form-toggle:has(.form-toggle-input:focus-visible) {
  outline-color: var(--primary-600);
  outline-offset: 2px;
}
.form-toggle.is-checked {
  border-color: transparent;
  background: var(--primary-600);
}
.form-toggle.is-checked .form-toggle-input::after {
  translate: 24px 0;
  border-color: transparent;
}
.form-toggle.is-checked .form-toggle-icon {
  color: var(--primary-25);
}
.form-toggle.is-checked .form-toggle-icon-on {
  translate: calc(-50% + 24px) -50%;
}
.form-toggle:not(.is-checked) .form-toggle-icon-off {
  translate: calc(-50% - 24px) -50%;
}
.form-toggle.is-disabled {
  cursor: not-allowed;
  opacity: 0.6;
}
.form-toggle.is-readonly .form-toggle-input {
  pointer-events: none;
}
.form-toggle.is-invalid {
  border-color: var(--danger-500);
}

.form-toggle-icon {
  position: absolute;
  top: 50%;
  color: var(--foreground-secondary);
  pointer-events: none;
  translate: -50% -50%;
}

.form-toggle-icon-off {
  left: 15px;
}

.form-toggle-icon-on {
  left: 39px;
}

.form-toggle-input {
  -webkit-appearance: none;
  appearance: none;
  position: relative;
  display: block;
  margin: 0;
  height: inherit;
  width: inherit;
  background: unset;
  border: 0;
  border-radius: inherit;
  cursor: pointer;
  outline: 0;
}
.form-toggle-input:disabled {
  cursor: not-allowed;
}
.form-toggle-input::after {
  position: absolute;
  display: block;
  top: 2px;
  left: 2px;
  height: 24px;
  width: 24px;
  content: "";
  background: var(--surface);
  border: 1px solid var(--surface-stroke);
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-sm);
}

.form-toggle,
.form-toggle-icon,
.form-toggle-input,
.form-toggle-input::after {
  transition: 210ms var(--swift-out);
  transition-property: background, border-color, color, opacity, scale, translate, outline-color, outline-offset;
}

.form-tags-input {
  display: flex;
  height: unset;
  min-height: 42px;
  padding: 3px 6px;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  cursor: text;
}
.form-tags-input:not(.form-tags-input-disabled) {
  outline: 2px solid rgb(from var(--primary-600) r g b/0);
  outline-offset: 0;
}
.form-tags-input:not(.form-tags-input-disabled):focus-visible, .form-tags-input:not(.form-tags-input-disabled):focus-within {
  outline-color: var(--primary-600);
  outline-offset: -1px;
}

.form-tags-input-enabled {
}

.form-tags-input-disabled {
  background: var(--gray-100);
  cursor: not-allowed;
}

.form-tags-input-field {
  height: 30px;
  min-width: 60px;
  flex: 1 1 60px;
  background: none;
  border: 0;
  color: inherit;
  font: inherit;
  outline: 0;
}
.form-tags-input-field:first-child {
  padding-left: 6px;
}
.form-tags-input-field::placeholder {
  color: var(--foreground-secondary);
}
.form-tags-input-field:disabled {
  cursor: not-allowed;
}

.form-tags-input-popup {
}.slider {
  position: relative;
  display: flex;
  margin: 6px;
  flex-flow: column;
  gap: 9px;
  touch-action: pan-y;
}
.slider.is-disabled {
  cursor: not-allowed;
}
.slider.is-dragging {
  cursor: grabbing;
}

.slider-thumb {
  position: absolute;
  top: 50%;
  height: 24px;
  width: 24px;
  padding: 0;
  background: var(--surface);
  background-clip: padding-box;
  border: 1px solid var(--surface-stroke-out);
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-sm);
  cursor: grab;
  outline: 0;
  translate: -50% -50%;
  transition: var(--transition-default);
  transition-property: outline-color, outline-offset;
  outline: 2px solid rgb(from var(--primary-600) r g b/0);
  outline-offset: 0;
}
.slider-thumb:focus-visible {
  outline-color: var(--primary-600);
  outline-offset: 2px;
}
@media (hover: hover) {
  .slider-thumb:hover {
    background-color: var(--surface-hover);
  }
}
.slider-thumb.is-disabled {
  background-color: var(--surface-disabled);
  box-shadow: none;
  pointer-events: none;
}
.slider-thumb.is-dragging {
  box-shadow: var(--shadow-md);
  cursor: grabbing;
}

.slider-track {
  position: relative;
  height: 12px;
  background: var(--gray-50);
  background-clip: padding-box;
  border-radius: var(--radius-half);
  box-shadow: inset 0 0 0 1px var(--surface-stroke-out);
}

.slider-track-value {
  position: absolute;
  display: block;
  top: 0;
  height: inherit;
  background: var(--primary-600);
  border-radius: inherit;
}

.slider.is-disabled .slider-track-value {
  background: var(--gray-300);
}

.tick {
  font-size: var(--font-size-2xsmall);
  line-height: var(--line-height-2xsmall);
  position: absolute;
  left: calc(var(--position) * 100% - 1px);
  bottom: 0;
  height: 9px;
  width: 2px;
  background: var(--gray-300);
  border-radius: var(--radius-full);
  color: var(--foreground-prominent);
  font-weight: 600;
  pointer-events: none;
}

.tick-large {
}
.tick-large :is(span) {
  position: relative;
  display: inline-block;
  translate: -50% -100%;
}

.tick-small {
  height: 6px;
  opacity: 0.5;
}

.ticks {
  position: relative;
  display: block;
  height: 21px;
}

.slider.is-vertical {
  flex-flow: row;
  height: var(--flux-form-slider-length, 210px);
  width: max-content;
  touch-action: pan-x;
}
.slider.is-vertical .slider-track {
  height: auto;
  width: 12px;
}
.slider.is-vertical .slider-thumb {
  top: auto;
  left: 50%;
  translate: -50% 50%;
}
.slider.is-vertical .slider-track-value {
  top: auto;
  left: 0;
  right: 0;
}
.slider.is-vertical .ticks {
  height: auto;
  width: 21px;
}
.slider.is-vertical .tick {
  left: auto;
  right: 0;
  bottom: calc(var(--position) * 100% - 1px);
  height: 2px;
  width: 9px;
}
.slider.is-vertical .tick-small {
  height: 2px;
  width: 6px;
}
.slider.is-vertical .tick-large :is(span) {
  translate: -100% -50%;
}.tree-node {
  display: flex;
  width: 100%;
  min-height: 42px;
  padding: 0 12px;
  align-items: center;
  border-radius: var(--radius);
  color: var(--foreground);
  font: inherit;
  gap: 15px;
  outline: 0;
  transition: 150ms var(--swift-out);
  transition-property: background, color;
  user-select: none;
}

.tree-node-line-area {
  position: relative;
  display: flex;
  align-self: stretch;
  align-items: center;
  flex-shrink: 0;
}

.tree-node-line-area.has-drop-line::after {
  position: absolute;
  top: calc(50% + 14px);
  bottom: 0;
  left: calc(var(--tree-marker-column) * 24px + 11px);
  width: 2px;
  content: "";
  background: var(--surface-active);
}

.tree-indent {
  position: relative;
  width: 24px;
  align-self: stretch;
  flex-shrink: 0;
  pointer-events: none;
}
.tree-indent.has-line::before {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 11px;
  width: 2px;
  content: "";
  background: var(--surface-active);
}

.tree-connector {
  position: relative;
  width: 24px;
  align-self: stretch;
  flex-shrink: 0;
  pointer-events: none;
}
.tree-connector:not(.is-last)::before {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 11px;
  width: 2px;
  content: "";
  background: var(--surface-active);
}
.tree-connector::after {
  position: absolute;
  top: 0;
  bottom: 50%;
  left: 11px;
  right: 2px;
  content: "";
  border-left: 2px solid var(--surface-active);
  border-bottom: 2px solid var(--surface-active);
  border-bottom-left-radius: 9px;
}

.tree-node-marker {
  --tree-marker-fill: var(--gray-100);
  --tree-marker-stroke: var(--gray-200);
  --tree-marker-foreground: var(--foreground-prominent);
  display: flex;
  box-sizing: border-box;
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  margin-inline: 1px;
  background: var(--tree-marker-fill);
  border: 1px solid var(--tree-marker-stroke);
  border-radius: 50%;
  color: var(--tree-marker-foreground);
}

.tree-node-marker.is-toggle {
  padding: 0;
  cursor: pointer;
  outline: 0;
  outline: 2px solid rgb(from var(--primary-600) r g b/0);
  outline-offset: 0;
}
.tree-node-marker.is-toggle:focus-visible {
  outline-color: var(--primary-600);
  outline-offset: 2px;
}
@media (hover: hover) {
  .tree-node-marker.is-toggle:hover {
    opacity: 0.75;
  }
}

.tree-node-marker.is-toggle svg {
  transition: rotate 0.2s var(--swift-out);
}

.tree-node-marker.is-toggle.is-expanded svg {
  rotate: 90deg;
}

.tree-node-marker-gray {
  --tree-marker-fill: var(--gray-100);
  --tree-marker-stroke: var(--gray-300);
  --tree-marker-foreground: var(--foreground-prominent);
}

.tree-node-marker-primary {
  --tree-marker-fill: var(--primary-100);
  --tree-marker-stroke: var(--primary-300);
  --tree-marker-foreground: var(--primary-900);
}

.tree-node-marker-danger {
  --tree-marker-fill: var(--danger-100);
  --tree-marker-stroke: var(--danger-300);
  --tree-marker-foreground: var(--danger-900);
}

.tree-node-marker-info {
  --tree-marker-fill: var(--info-100);
  --tree-marker-stroke: var(--info-300);
  --tree-marker-foreground: var(--info-900);
}

.tree-node-marker-success {
  --tree-marker-fill: var(--success-100);
  --tree-marker-stroke: var(--success-300);
  --tree-marker-foreground: var(--success-900);
}

.tree-node-marker-warning {
  --tree-marker-fill: var(--warning-100);
  --tree-marker-stroke: var(--warning-300);
  --tree-marker-foreground: var(--warning-900);
}

.tree-node-marker-custom {
  --tree-marker-fill: color-mix(in srgb, var(--tree-marker-color) 15%, var(--surface));
  --tree-marker-stroke: color-mix(in srgb, var(--tree-marker-color) 35%, var(--surface));
  --tree-marker-foreground: color-mix(in srgb, var(--tree-marker-color) 75%, var(--foreground));
}

.tree-node-icon {
  flex-shrink: 0;
}

.tree-node-label {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}.divider {
  position: relative;
  display: grid;
  contain: paint;
  margin-top: 18px;
  margin-bottom: 18px;
  align-items: center;
  flex-shrink: 0;
}

.divider-content-start {
  justify-items: start;
}

.divider-content-center {
  justify-items: center;
}

.divider-content-end {
  justify-items: end;
}

.divider-content {
  position: relative;
  display: flex;
}
.divider-content::before, .divider-content::after {
  position: absolute;
  display: block;
  top: 50%;
  translate: 0 -50%;
}
.divider-content::before {
  left: -100dvh;
  right: calc(100% + 15px);
}
.divider-content::after {
  left: calc(100% + 15px);
  right: -100dvh;
}

.divider-line {
  width: 100%;
  border: 0;
}

.divider-content::before,
.divider-content::after,
.divider-line {
  height: 1px;
  content: "";
  background: var(--gray-100);
}

.separator {
  flex-shrink: 0;
  background: var(--gray-200);
}

.separator-horizontal {
  height: 1px;
}

.separator-vertical {
  width: 1px;
}.breadcrumb {
  display: block;
  max-width: 100%;
}

.breadcrumb-list {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  align-items: center;
  gap: 3px;
  list-style: none;
}
.breadcrumb-list .breadcrumb-item {
  margin: 0;
}

.is-collapsible {
  flex-wrap: nowrap;
  min-width: 0;
  overflow: hidden;
}

.breadcrumb-item {
  display: inline-flex;
  min-width: 0;
  align-items: center;
  gap: 3px;
}
.breadcrumb-item:last-child .breadcrumb-separator {
  display: none;
}

.breadcrumb-link {
  font-size: var(--font-size-small);
  line-height: 1;
  display: inline-flex;
  height: 30px;
  max-width: 100%;
  padding: 0 9px;
  align-items: center;
  gap: 9px;
  background: transparent;
  border: 0;
  border-radius: var(--radius);
  color: var(--foreground);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: var(--transition-default);
  transition-property: background, color, outline-color, outline-offset;
  outline: 2px solid rgb(from var(--primary-600) r g b/0);
  outline-offset: 0;
}
.breadcrumb-link:focus-visible, .breadcrumb-link:focus-within {
  outline-color: var(--primary-600);
  outline-offset: 2px;
}
@media (hover: hover) {
  .breadcrumb-link:not(.is-current):hover {
    background: var(--surface-hover);
    color: var(--foreground);
  }
}
.breadcrumb-link.is-current {
  color: var(--foreground-prominent);
  font-weight: 600;
  cursor: default;
  pointer-events: none;
}
.breadcrumb-link.is-open {
  background: var(--surface-active);
  color: var(--foreground);
}

.breadcrumb-collapse {
  padding: 0 6px;
}

.breadcrumb-flyout-trigger {
  cursor: pointer;
}

.breadcrumb-chevron {
  flex-shrink: 0;
  margin-left: -3px;
  color: var(--foreground-secondary);
  opacity: 0.7;
}

.breadcrumb-icon {
  margin-top: -1px;
  margin-bottom: -1px;
  flex-shrink: 0;
}

.breadcrumb-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.breadcrumb-separator {
  flex-shrink: 0;
  color: var(--foreground-secondary);
  opacity: 0.5;
  pointer-events: none;
}

.breadcrumb-measurer {
  position: absolute;
  display: flex;
  margin: 0;
  padding: 0;
  flex-flow: row nowrap;
  align-items: center;
  list-style: none;
  pointer-events: none;
  visibility: hidden;
}.menu-flyout-popup {
  position: fixed;
  top: 0;
  left: 0;
  min-width: 270px;
  max-height: max(330px, 50dvh);
  overflow: auto;
  box-shadow: var(--shadow-md);
  translate: var(--x) var(--y);
  z-index: 10000;
}

.menu-flyout-trigger-open {
  background: var(--gray-100);
}

.menu-flyout-cone-debug {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 20000;
}
.menu-flyout-cone-debug polygon {
  fill: var(--primary-500);
  fill-opacity: 0.15;
  stroke: var(--primary-500);
  stroke-width: 1.5;
}
.menu-flyout-cone-debug line {
  stroke: var(--gray-900);
  stroke-width: 1.5;
}

.menu-flyout-cone-debug-apex {
  fill: var(--warning-500);
}

.menu-flyout-cone-debug-head {
  fill: var(--gray-900);
}

.menu-flyout-cone-debug-back polygon {
  fill: var(--success-500);
  stroke: var(--success-500);
}.calendar {
  flex-grow: 1;
}

.calendar-view {
  contain: paint;
  display: flex;
  flex-flow: column;
  flex-grow: 1;
}

.calendar-item-registry {
  display: none;
}

.calendar-actions {
  align-items: center;
}

.layer-pane .calendar-actions {
  border: 0;
}

.calendar-loader {
}

.calendar-current {
  display: flex;
  gap: 9px;
}

.calendar-current-value {
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
  font-size: 30px;
  letter-spacing: -0.05em;
  line-height: 1.5em;
  text-transform: capitalize;
}
@media (hover: hover) {
  .calendar-current-value:hover {
    color: var(--primary-600);
  }
}

.calendar-current-month {
  color: var(--foreground-prominent);
  font-weight: 700;
}

.calendar-current-year {
  color: var(--foreground);
}

.calendar-range-label {
  color: var(--foreground-prominent);
  font-weight: 700;
}

.calendar-item {
  display: block;
  padding: 0;
  background: transparent;
  border: 0;
  cursor: default;
  text-align: left;
  outline: 2px solid rgb(from var(--primary-600) r g b/0);
  outline-offset: 0;
}
.calendar-item:focus-visible {
  outline-color: var(--primary-600);
  outline-offset: 0;
}
.calendar-item.is-clickable {
  cursor: pointer;
}
.calendar-item.is-draggable {
  cursor: grab;
}
.calendar-item.is-draggable:active {
  cursor: grabbing;
}
.calendar-item.is-grabbed {
  outline: 2px solid var(--primary-500);
  outline-offset: 2px;
}

.calendar-cells {
  display: grid;
  flex-grow: 1;
  gap: 1px;
  grid-template-columns: repeat(7, minmax(180px, 1fr));
  grid-template-rows: min-content repeat(6, auto);
  background: var(--gray-100);
  overflow-x: auto;
}

.calendar-cell {
  padding: 9px;
  background: var(--gray-25);
}

.calendar-day {
  font-size: var(--font-size-xsmall);
  line-height: 30px;
  padding-left: 0;
  padding-right: 0;
  color: var(--foreground-secondary);
  font-weight: 500;
  text-align: center;
  text-transform: capitalize;
}

.calendar-entry {
  position: relative;
  min-height: 90px;
  padding-top: 33px;
  outline: 2px dashed transparent;
  outline-offset: -2px;
  transition: 210ms var(--swift-out);
  transition-property: background, outline-color, z-index;
  z-index: 0;
}
.calendar-entry.is-disabled {
  background: var(--gray-50);
  color: var(--foreground-secondary);
}
.calendar-entry.is-disabled .calendar-entry-date {
  opacity: 0.25;
}
.calendar-entry.is-disabled .calendar-events {
  opacity: 0.75;
  pointer-events: none;
}
.calendar-entry.is-focused, .calendar-entry.is-drop-target {
  z-index: 1;
}
.calendar-entry.is-focused {
  box-shadow: inset 0 0 0 2px var(--primary-200);
}
.calendar-entry.is-drop-target {
  background: var(--primary-50);
  outline-color: var(--primary-600);
}
.calendar-entry.is-today .calendar-entry-date {
  color: var(--primary-600);
}

.calendar-entry-date {
  font-size: var(--font-size-2xsmall);
  line-height: 1em;
  position: absolute;
  top: 12px;
  left: 12px;
  color: var(--foreground);
  font-weight: 700;
}

.calendar-events {
  display: grid;
  grid-auto-rows: auto;
  gap: 3px;
}

.time-grid {
  display: flex;
  flex-flow: column;
  flex-grow: 1;
  overflow: hidden;
  background: var(--gray-25);
}

.time-grid-inner {
  display: flex;
  flex-flow: column;
  flex-grow: 1;
  overflow: hidden;
}

.time-grid-header {
  display: grid;
  grid-template-columns: 64px 1fr;
  background: var(--gray-25);
  border-bottom: 1px solid var(--gray-100);
}

.time-grid-header-gutter {
  background: var(--gray-25);
}

.time-grid-header-days {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 1px;
  background: var(--gray-100);
}

.time-grid-header-day {
  font-size: var(--font-size-2xsmall);
  line-height: 1em;
  padding: 9px 12px;
  background: var(--gray-25);
  color: var(--foreground-secondary);
  font-weight: 600;
  text-align: center;
  text-transform: capitalize;
}
.time-grid-header-day.is-today {
  color: var(--primary-600);
}

.time-grid-all-day {
  display: grid;
  grid-template-columns: 64px 1fr;
  background: var(--gray-25);
  border-bottom: 1px solid var(--gray-100);
}

.time-grid-all-day-label {
  font-size: var(--font-size-2xsmall);
  line-height: 1em;
  align-self: stretch;
  padding: 6px 9px;
  color: var(--foreground-secondary);
  font-weight: 500;
  text-align: right;
}

.time-grid-all-day-days {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 1px;
  min-height: 36px;
  background: var(--gray-100);
}

.time-grid-all-day-cell {
  display: flex;
  flex-flow: column;
  gap: 3px;
  padding: 6px;
  background: var(--gray-25);
}
.time-grid-all-day-cell.is-drop-target {
  box-shadow: inset 0 0 0 2px var(--primary-300);
}

.time-grid-body {
  display: grid;
  grid-template-columns: 64px 1fr;
  flex-grow: 1;
  overflow-y: auto;
  overflow-x: hidden;
  position: relative;
}

.time-grid-hours {
  display: flex;
  flex-flow: column;
  background: var(--gray-25);
}

.time-grid-hour-label {
  font-size: var(--font-size-2xsmall);
  line-height: 1em;
  position: relative;
  box-sizing: border-box;
  padding-right: 9px;
  color: var(--foreground-secondary);
  font-weight: 500;
  text-align: right;
}

.time-grid-hour-label-text {
  position: absolute;
  top: 0;
  right: 9px;
  transform: translateY(-50%);
  background: var(--gray-25);
  padding: 0 2px;
}

.time-grid-days {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 1px;
  background: var(--gray-100);
}

.time-grid-day {
  position: relative;
  background: var(--gray-25);
  background-image: repeating-linear-gradient(to bottom, transparent, transparent calc(var(--hour-height, 48px) - 1px), var(--gray-100) calc(var(--hour-height, 48px) - 1px), var(--gray-100) var(--hour-height, 48px));
}
.time-grid-day.is-drop-target {
  box-shadow: inset 0 0 0 2px var(--primary-300);
}

.time-grid-day-item {
  position: absolute;
  box-sizing: border-box;
  overflow: hidden;
  padding: 2px;
}
.time-grid-day-item.is-clipped-top {
  border-top: 2px dashed var(--warning-300);
}
.time-grid-day-item.is-clipped-bottom {
  border-bottom: 2px dashed var(--warning-300);
}
.time-grid-day-item.is-resizing {
  opacity: 0.8;
}

.time-grid-day-item-body {
  position: relative;
  height: 100%;
  width: 100%;
}
.time-grid-day-item-body > button {
  display: block;
  width: 100%;
  height: 100%;
}

.time-grid-day-item-handle {
  position: absolute;
  left: 0;
  right: 0;
  height: 6px;
  cursor: ns-resize;
  z-index: 2;
  background: transparent;
}
@media (hover: hover) {
  .time-grid-day-item-handle:hover {
    background: var(--primary-300);
  }
}
.time-grid-day-item-handle.is-top {
  top: 0;
}
.time-grid-day-item-handle.is-bottom {
  bottom: 0;
}

.time-grid-drop-indicator {
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--primary-500);
  z-index: 5;
  pointer-events: none;
}.date-picker {
  display: flex;
  max-height: 420px;
  flex-flow: column;
  border-radius: inherit;
  overflow: auto;
  user-select: none;
  z-index: 0;
}

.date-picker-dates,
.date-picker-months,
.date-picker-years,
.date-picker-header {
  padding: 15px;
}

.date-picker-header {
  position: sticky;
  display: flex;
  top: 0;
  align-items: center;
  background: var(--gray-50);
  border-bottom: 1px solid var(--surface-stroke);
  z-index: 1;
}

.date-picker-header-view {
  font-size: var(--font-size-large);
  line-height: var(--line-height-large);
  display: flex;
  height: 42px;
  margin-left: auto;
  margin-right: auto;
  align-items: center;
  gap: 9px;
  font-weight: 600;
}

.date-picker-header-view-button {
  padding: 0;
  background: unset;
  border: 0;
  cursor: pointer;
  text-transform: capitalize;
}
.date-picker-header-view-button:first-child {
  color: var(--foreground-prominent);
}
.date-picker-header-view-button:last-child {
  color: var(--foreground-secondary);
}
@media (hover: hover) {
  .date-picker-header-view-button:hover {
    color: var(--primary-600);
  }
}

.date-picker-date {
  font-size: var(--font-size-small);
  line-height: var(--line-height-small);
  display: flex;
  padding: 0;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1;
  background: unset;
  border: 0;
  border-radius: var(--radius);
  color: var(--foreground-prominent);
  cursor: pointer;
  outline: 0;
  transition: var(--transition-default);
  transition-property: background, border-radius, color, opacity;
}
@media (hover: hover) {
  .date-picker-date:hover {
    background: var(--gray-100);
    color: var(--foreground-prominent);
  }
}
.date-picker-date.is-disabled:not(.is-range-entry, .is-range-end, .is-range-start, .is-selection-entry, .is-selection-end, .is-selection-start) {
  opacity: 0.25;
  pointer-events: none;
}
.date-picker-date:not(.is-disabled) {
  font-weight: 500;
}
.date-picker-date.is-selected {
  background: var(--primary-600);
  color: var(--primary-50);
  font-weight: 700;
}
.date-picker-date.is-range-entry {
  background: var(--primary-200);
  border-radius: 0;
  color: var(--primary-950);
}
.date-picker-date.is-range-end, .date-picker-date.is-range-start {
  background: var(--primary-600);
  color: var(--primary-50);
  font-weight: 700;
}
.date-picker-date.is-range-entry:nth-child(7n+8), .date-picker-date.is-range-start {
  border-top-left-radius: var(--radius);
  border-bottom-left-radius: var(--radius);
}
.date-picker-date.is-range-entry:nth-child(7n), .date-picker-date.is-range-end {
  border-top-right-radius: var(--radius);
  border-bottom-right-radius: var(--radius);
}
.date-picker-date.is-selection-entry {
  background: var(--gray-100);
  border-radius: 0;
  color: var(--foreground-prominent);
}
.date-picker-date.is-selection-end, .date-picker-date.is-selection-start {
  background: var(--gray-200);
  font-weight: 700;
}
.date-picker-date.is-selection-entry:nth-child(7n+8), .date-picker-date.is-selection-start {
  border-top-left-radius: var(--radius);
  border-bottom-left-radius: var(--radius);
}
.date-picker-date.is-selection-entry:nth-child(7n), .date-picker-date.is-selection-end {
  border-top-right-radius: var(--radius);
  border-bottom-right-radius: var(--radius);
}

.date-picker-dates {
  position: relative;
}

.date-picker-dates-grid {
  display: grid;
  gap: 3px 0;
  grid-template-columns: repeat(7, 1fr);
}

.date-picker-day {
  font-size: var(--font-size-2xsmall);
  line-height: var(--line-height-2xsmall);
  margin-bottom: 6px;
  color: var(--foreground-secondary);
  font-weight: 500;
  text-align: center;
  text-transform: uppercase;
}

.date-picker-months,
.date-picker-years {
  display: grid;
  margin-left: auto;
  margin-right: auto;
  max-width: 300px;
  width: 100%;
  gap: 9px;
  grid-template-columns: repeat(3, 1fr);
}
.date-picker-months .button,
.date-picker-years .button {
  contain: size layout;
  contain-intrinsic-size: 0 42px;
  content-visibility: auto;
  text-transform: capitalize;
}.layer-pane {
  display: flex;
  flex-flow: column;
  contain: paint;
  transition: 210ms var(--swift-out);
  transition-property: background, border;
}

.layer-pane-gray {
  background-color: var(--gray-50);
  border-color: var(--surface-stroke-out);
}
.layer-pane-gray:has(> .pane-header-clickable:hover) {
  background-color: var(--gray-100);
  border-color: var(--surface-stroke-out-hover);
}

.layer-pane-primary {
  background-color: var(--primary-100);
  border-color: var(--primary-200);
}
.layer-pane-primary:has(> .pane-header-clickable:hover) {
  background-color: var(--primary-200);
  border-color: var(--primary-300);
}

.layer-pane-danger {
  background-color: var(--danger-100);
  border-color: var(--danger-200);
}
.layer-pane-danger:has(> .pane-header-clickable:hover) {
  background-color: var(--danger-200);
  border-color: var(--danger-300);
}
.layer-pane-danger .pane-header-icon {
  color: var(--danger-600);
}

.layer-pane-info {
  background-color: var(--info-100);
  border-color: var(--info-200);
}
.layer-pane-info:has(> .pane-header-clickable:hover) {
  background-color: var(--info-200);
  border-color: var(--info-300);
}
.layer-pane-info .pane-header-icon {
  color: var(--info-600);
}

.layer-pane-success {
  background-color: var(--success-100);
  border-color: var(--success-200);
}
.layer-pane-success:has(> .pane-header-clickable:hover) {
  background-color: var(--success-200);
  border-color: var(--success-300);
}
.layer-pane-success .pane-header-icon {
  color: var(--success-600);
}

.layer-pane-warning {
  background-color: var(--warning-100);
  border-color: var(--warning-200);
}
.layer-pane-warning:has(> .pane-header-clickable:hover) {
  background-color: var(--warning-200);
  border-color: var(--warning-300);
}
.layer-pane-warning .pane-header-icon {
  color: var(--warning-600);
}

.layer-pane > .base-pane-structure {
  margin-left: -1px;
  margin-right: -1px;
}

.layer-pane > .base-pane-structure:first-child {
  margin-top: -1px;
}

.layer-pane > .base-pane-structure:last-child {
  margin-bottom: -1px;
}

.layer-pane > .base-pane-structure + .base-pane-structure {
  border-top-width: 0;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.layer-pane > .base-pane-structure:has(+ .base-pane-structure) {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.layer-pane > .pane-footer {
  background: unset;
  border: 0;
}

.layer-pane > .pane-header {
  background: unset;
}

.layer-pane > .pane-header > :is(.button, .button-group) {
  margin: -9px -9px -9px 0;
}.chip {
  display: flex;
  height: 36px;
  padding: 0 12px;
  align-items: center;
  flex-grow: 0;
  gap: 9px;
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-full);
  color: var(--foreground);
  transition: var(--transition-default);
  transition-property: background, border, color, outline-color, outline-offset;
}
.chip.is-selectable {
  cursor: pointer;
  outline: 2px solid rgb(from var(--primary-600) r g b/0);
  outline-offset: 0;
}
.chip.is-selectable:focus-visible {
  outline-color: var(--primary-600);
  outline-offset: 2px;
}
@media (hover: hover) {
  .chip.is-selectable:hover {
    background: var(--gray-100);
  }
}
.chip.is-selected {
  background: var(--primary-50);
  border-color: var(--primary-200);
  color: var(--primary-600);
}
@media (hover: hover) {
  .chip.is-selected:hover {
    background: var(--primary-100);
  }
}
.chip :is(span) {
  font-size: var(--font-size-small);
  line-height: var(--line-height-small);
  font-weight: 500;
  white-space: nowrap;
}.command-palette-backdrop {
  position: fixed;
  inset: 0;
  background: var(--overlay);
  backdrop-filter: blur(3px) saturate(180%);
  animation: command-palette-backdrop-in 300ms var(--swift-out) both;
  z-index: 99000;
}
.command-palette-backdrop.is-closing {
  animation: command-palette-backdrop-out 210ms var(--swift-out) both;
}

.command-palette-dialog {
  position: fixed;
  inset: 0;
  display: flex;
  padding-top: clamp(60px, 15vh, 160px);
  align-items: flex-start;
  justify-content: center;
  animation: command-palette-in 300ms var(--swift-out) both;
  z-index: 99001;
}
.command-palette-dialog.is-closing {
  animation: command-palette-out 210ms var(--swift-out) both;
  pointer-events: none;
}

.command-palette {
  display: flex;
  overflow: hidden;
  width: min(600px, 100dvw - 48px);
  max-height: min(480px, 100dvh - 120px - clamp(60px, 15vh, 160px));
  flex-flow: column nowrap;
  background: var(--surface);
  background-clip: padding-box;
  border: 1px solid var(--surface-stroke-out);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  transition: height 120ms var(--deceleration-curve);
}

.command-palette-search {
  display: flex;
  height: 54px;
  padding: 0 18px;
  align-items: center;
  flex-shrink: 0;
  gap: 12px;
  border-bottom: 1px solid var(--gray-100);
}

.command-palette-search-icon {
  flex-shrink: 0;
  color: var(--foreground-secondary);
  font-size: 16px;
}

.command-palette-search-input {
  font-size: var(--font-size-large);
  line-height: var(--line-height-large);
  height: 100%;
  flex-grow: 1;
  background: transparent;
  border: 0;
  color: var(--foreground);
  outline: 0;
}
.command-palette-search-input::placeholder {
  color: var(--foreground-secondary);
}

.command-palette-breadcrumb {
  font-size: var(--font-size-default);
  line-height: var(--line-height-default);
  padding: 0;
  flex-shrink: 0;
  background: transparent;
  border: 0;
  cursor: pointer;
  color: var(--foreground-secondary);
  font-weight: 500;
  white-space: nowrap;
  transition: color 150ms;
}
@media (hover: hover) {
  .command-palette-breadcrumb:hover {
    color: var(--foreground);
  }
}

.command-palette-breadcrumb-separator {
  font-size: var(--font-size-small);
  line-height: var(--line-height-small);
  flex-shrink: 0;
  opacity: 0.5;
  color: var(--foreground-secondary);
}

.command-palette-tabs {
  display: flex;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 6px 15px;
  flex-shrink: 0;
  gap: 3px;
  border-bottom: 1px solid var(--gray-100);
}
.command-palette-tabs::-webkit-scrollbar {
  display: none;
}

.command-palette-tab {
  font-size: var(--font-size-xsmall);
  line-height: var(--line-height-xsmall);
  display: flex;
  height: 30px;
  padding: 0 10px;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: 0;
  border-radius: var(--radius-half);
  cursor: pointer;
  color: var(--foreground-secondary);
  font-weight: 500;
  white-space: nowrap;
  transition: background 150ms, color 150ms;
}
@media (hover: hover) {
  .command-palette-tab:hover {
    background: var(--gray-100);
    color: var(--foreground);
  }
}

.command-palette-tab-active {
  background: var(--primary-100);
  color: var(--primary-700);
}
@media (hover: hover) {
  .command-palette-tab-active:hover {
    background: var(--primary-100);
    color: var(--primary-700);
  }
}

.command-palette-tab-icon {
  font-size: 13px;
}

.command-palette-results {
  overflow-y: auto;
  overscroll-behavior: contain;
  scroll-padding-block: 42px 6px;
  scrollbar-width: thin;
  padding: 6px;
  flex-grow: 1;
}

.command-palette-loading {
  display: flex;
  padding: 24px;
  align-items: center;
  justify-content: center;
}

.command-palette-empty {
  font-size: var(--font-size-small);
  line-height: var(--line-height-small);
  display: flex;
  padding: 24px;
  align-items: center;
  justify-content: center;
  color: var(--foreground-secondary);
}

.command-palette-group {
  font-size: var(--font-size-2xsmall);
  line-height: var(--line-height-2xsmall);
  display: flex;
  padding: 9px 10px 3px;
  align-items: center;
  gap: 6px;
  color: var(--foreground-secondary);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  pointer-events: none;
}

.command-palette-group-icon {
  font-size: 12px;
}

.command-palette-item {
  font-size: var(--font-size-small);
  line-height: var(--line-height-small);
  display: flex;
  width: 100%;
  padding: 8px 10px;
  align-items: center;
  gap: 10px;
  background: transparent;
  border: 0;
  border-radius: var(--radius-half);
  cursor: pointer;
  color: var(--foreground);
  text-align: left;
  transition: background 100ms;
}
@media (hover: hover) {
  .command-palette-item:hover {
    background: var(--gray-100);
  }
}
.command-palette-item:active {
  background: var(--gray-200);
}

.command-palette-item-highlighted {
  background: var(--gray-100);
}
@media (hover: hover) {
  .command-palette-item-highlighted:hover {
    background: var(--gray-100);
  }
}

.command-palette-item-icon {
  display: flex;
  width: 30px;
  height: 30px;
  align-items: center;
  align-self: flex-start;
  flex-shrink: 0;
  justify-content: center;
  background: var(--gray-100);
  border-radius: var(--radius-half);
  color: var(--foreground);
  transition: background 100ms, color 100ms;
}
.command-palette-item-icon .icon {
  font-size: 16px;
}

.command-palette-item-highlighted .command-palette-item-icon {
  background: var(--gray-200);
}

.command-palette-item-content {
  overflow: hidden;
  flex-grow: 1;
}

.command-palette-item-label {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.command-palette-item-sub-label {
  font-size: var(--font-size-2xsmall);
  line-height: var(--line-height-2xsmall);
  overflow: hidden;
  margin-top: 1px;
  color: var(--foreground-secondary);
  white-space: nowrap;
  text-overflow: ellipsis;
  transition: color 100ms;
}

.command-palette-item-highlighted .command-palette-item-sub-label {
  color: var(--primary-500);
}

.command-palette-item-sub-action-indicator {
  flex-shrink: 0;
  color: var(--foreground-secondary);
  font-size: 12px;
  transition: color 100ms;
}

.command-palette-item-highlighted .command-palette-item-sub-action-indicator {
  color: var(--primary-500);
}

@keyframes command-palette-in {
  from {
    opacity: 0;
    scale: 1.05;
  }
  to {
    opacity: 1;
    scale: 1;
  }
}
@keyframes command-palette-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
@keyframes command-palette-backdrop-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes command-palette-backdrop-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}.comment {
  display: grid;
  max-width: 100%;
  gap: 3px 15px;
  grid-template-columns: 1fr auto;
  grid-template-rows: repeat(2, auto);
}
.comment .avatar {
  align-self: end;
  grid-column: 2;
  grid-row: 1;
}
.comment .comment-content {
  grid-column: 1;
  grid-row: 1;
}
.comment .comment-footer {
  grid-column: 1;
  grid-row: 2;
}
.comment.is-received {
  grid-template-columns: auto 1fr;
}
.comment.is-received .avatar {
  grid-column: 1;
}
.comment.is-received .comment-content {
  grid-column: 2;
}
.comment.is-received .comment-footer {
  grid-column: 2;
}

.comment-content {
  min-width: 0;
  padding: 12px 18px;
  background: var(--primary-50);
  border: 1px solid var(--primary-200);
  border-radius: calc(var(--radius) * 2);
  box-shadow: var(--shadow-xs);
}

.comment:not(.is-received) .comment-content {
  border-bottom-right-radius: var(--radius);
}

.comment.is-received .comment-content {
  background: var(--gray-50);
  border-color: var(--gray-200);
  border-bottom-left-radius: var(--radius);
}

.comment.is-typing .comment-content {
  width: min-content;
}

.comment-typing {
  display: block;
  margin: 6px;
  height: 6px;
  width: 6px;
  border-radius: 6px;
  animation: comment-typing 1s linear infinite both;
}

.comment-footer {
  font-size: var(--font-size-2xsmall);
  line-height: var(--line-height-2xsmall);
  display: flex;
  align-items: center;
  gap: 12px;
  justify-content: flex-end;
  font-weight: 500;
}
.comment-footer span {
  margin-right: auto;
}
.comment-footer time {
  color: var(--foreground-secondary);
}

@keyframes comment-typing {
  0%, 80%, 100% {
    background: var(--gray-200);
    box-shadow: -9px 0 var(--gray-200), 9px 0 var(--gray-200);
    translate: 0 0;
  }
  20% {
    background: var(--gray-200);
    box-shadow: -9px -4px var(--gray-300), 9px 0 var(--gray-200);
    translate: 0 0;
  }
  40% {
    background: var(--gray-300);
    box-shadow: -9px 4px var(--gray-200), 9px 4px var(--gray-200);
    translate: 0 -4px;
  }
  60% {
    background: var(--gray-200);
    box-shadow: -9px 0 var(--gray-200), 9px -4px var(--gray-300);
    translate: 0 0;
  }
}.coordinate-picker {
  position: relative;
  aspect-ratio: 5/3;
  touch-action: none;
  background: var(--gray-50);
  border: 1px solid var(--surface-stroke-out);
  border-radius: var(--radius-half);
  z-index: 0;
}

.coordinate-picker-thumb {
  z-index: 1;
}
.coordinate-picker-thumb.is-disabled {
  counter-reset: t;
}
.coordinate-picker-thumb.is-dragging {
  counter-reset: t;
}.color-picker {
  --transparent: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAMElEQVQ4T2N89uzZfwY8QFJSEp80A+OoAcMiDP7//483HTx//hx/Ohg1gIFx6IcBALl+VXknOCvFAAAAAElFTkSuQmCC);
  display: flex;
  flex-flow: column;
  gap: 15px;
}

.color-picker-preview {
  position: relative;
  height: 60px;
  width: 60px;
  border-radius: var(--radius);
  overflow: hidden;
}
.color-picker-preview::after, .color-picker-preview::before {
  position: absolute;
  inset: 0;
  content: "";
  border-radius: inherit;
}
.color-picker-preview::before {
  background: var(--transparent) repeat center;
}
.color-picker-preview::after {
  background: var(--color);
  box-shadow: inset 0 0 0 1px var(--surface-stroke-out);
}

.color-picker-saturation {
  background: var(--pickerBackground, black);
  border: 0;
}
.color-picker-saturation::before, .color-picker-saturation::after {
  position: absolute;
  content: "";
  inset: 0;
  border-radius: inherit;
}
.color-picker-saturation::before {
  background: linear-gradient(to right, white, transparent);
}
.color-picker-saturation::after {
  background: linear-gradient(to top, black, transparent);
  box-shadow: inset 0 0 0 1px var(--surface-stroke-out);
}

.color-picker-slider {
  position: relative;
  margin-left: 0;
  margin-right: 0;
}
.color-picker-slider .slider-track-value {
  background: unset;
}

.color-picker-alpha-slider {
}
.color-picker-alpha-slider .slider-track {
  background: var(--transparent) repeat center;
}

.color-picker-hue-slider {
}
.color-picker-hue-slider .slider-track {
  background: linear-gradient(to right, rgb(255, 0, 0) 0, rgb(255, 255, 0) 17%, rgb(0, 255, 0) 33%, rgb(0, 255, 255) 50%, rgb(0, 0, 255) 67%, rgb(255, 0, 255) 83%, rgb(255, 0, 0));
  border-color: rgba(0, 0, 0, 0.1);
}

.color-picker-value {
  display: flex;
  align-items: flex-end;
  gap: 9px;
}
.color-picker-value .form-field-label {
  font-size: var(--font-size-2xsmall);
  line-height: var(--line-height-2xsmall);
  min-height: unset;
}
.color-picker-value .form-input {
  height: 36px;
}

.color-select {
  display: flex;
  flex-flow: row wrap;
  gap: 9px;
}

.color-select-item {
  display: flex;
  height: 30px;
  width: 30px;
  padding: 0;
  align-items: center;
  justify-content: center;
  border-radius: 15px;
  cursor: pointer;
  transition: 150ms var(--swift-out);
  transition-property: background, border, scale;
}
.color-select-item .icon {
  transition: inherit;
  transition-property: scale;
}
@media (hover: hover) {
  .color-select-item:hover {
    scale: 1.1;
  }
}
.color-select-item:active {
  scale: 0.9;
}

.color-select-color {
  background: var(--color);
  border: 2px solid color-mix(in srgb, var(--color), black 9%);
}

.color-select-color-deselected {
}
.color-select-color-deselected .icon {
  scale: 0.5;
}

.color-select-color-selected {
  background: transparent;
  border: 3px solid var(--color);
}

.color-select-custom {
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
}

.color-select-custom-picker {
  width: 330px;
}

.color-select-buttons {
  display: flex;
  padding-top: 0;
  gap: 9px;
}
.color-select-buttons .button:first-child {
  flex-grow: 1;
}

.color-select-check {
  color: var(--color);
}
.color-select-check :is(path) {
  stroke: currentColor;
  stroke-width: 54px;
}.context-menu {
  display: contents;
}
@media (pointer: coarse) {
  .context-menu {
    -webkit-touch-callout: none;
    user-select: none;
  }
}

.context-menu-popup {
  position: fixed;
  top: 0;
  left: 0;
  min-width: 270px;
  max-height: max(330px, 50dvh);
  overflow: auto;
  box-shadow: var(--shadow-md);
  translate: var(--x) var(--y);
  z-index: 10000;
}.table {
  position: relative;
  display: flex;
  container: table/inline-size;
  flex-flow: column;
  overflow: auto;
}

.table-base {
  display: grid;
  align-content: start;
  flex-grow: 1;
  width: fit-content;
  min-width: 100%;
  grid-template-columns: var(--flux-table-columns, none);
  text-align: left;
}

.table-loader {
}

.table-head,
.table-body,
.table-foot {
  display: grid;
  grid-column: 1/-1;
  grid-template-columns: subgrid;
}

.table-body {
  position: relative;
}

.table-row {
  display: contents;
}

.table-fill,
.table-empty-fill {
  display: grid;
  grid-column: 1/-1;
  grid-template-columns: subgrid;
}

.table-row.is-clickable {
  display: grid;
  grid-column: 1/-1;
  grid-template-columns: subgrid;
  scroll-margin-top: var(--flux-table-head-height, 0px);
  cursor: pointer;
  outline: 2px solid rgb(from var(--primary-600) r g b/0);
  outline-offset: 0;
}
.table-row.is-clickable:focus-visible {
  outline-color: var(--primary-600);
  outline-offset: -2px;
}

.table-cell-base {
  padding: 0;
  border: 0 solid var(--gray-100);
}

.table-cell {
  display: flex;
  align-items: flex-start;
  padding: 12px 15px;
  word-break: break-word;
}
.table-cell p:only-child {
  margin: 0;
}
.table-cell.is-raw {
  display: block;
  padding: 0;
}

.table-head-sticky {
  position: sticky;
  top: 0;
  z-index: 3;
}

.table-header {
  font-size: var(--font-size-small);
  line-height: var(--line-height-small);
  font-weight: 700;
  align-items: center;
  color: var(--foreground-prominent);
  border-bottom: 2px solid var(--gray-100);
}
.table-header.is-shrinking {
  white-space: nowrap;
}
.table-header > * {
  position: relative;
  z-index: 2;
}

.table-head-sticky .table-header {
  background: var(--gray-50);
}

.table-row-gray {
  --table-row-fill: var(--gray-25);
  --table-row-fill-hover: var(--gray-50);
  --table-row-foreground: var(--gray-800);
  --table-row-stroke: var(--gray-100);
}

.table-row-primary {
  --table-row-fill: var(--primary-25);
  --table-row-fill-hover: var(--primary-50);
  --table-row-foreground: var(--primary-800);
  --table-row-stroke: var(--primary-100);
}

.table-row-danger {
  --table-row-fill: var(--danger-25);
  --table-row-fill-hover: var(--danger-50);
  --table-row-foreground: var(--danger-800);
  --table-row-stroke: var(--danger-100);
}

.table-row-info {
  --table-row-fill: var(--info-25);
  --table-row-fill-hover: var(--info-50);
  --table-row-foreground: var(--info-800);
  --table-row-stroke: var(--info-100);
}

.table-row-success {
  --table-row-fill: var(--success-25);
  --table-row-fill-hover: var(--success-50);
  --table-row-foreground: var(--success-800);
  --table-row-stroke: var(--success-100);
}

.table-row-warning {
  --table-row-fill: var(--warning-25);
  --table-row-fill-hover: var(--warning-50);
  --table-row-foreground: var(--warning-800);
  --table-row-stroke: var(--warning-100);
}

.table-body .table-row.is-colored > .table-cell {
  background: var(--table-row-fill);
  border-color: var(--table-row-stroke);
  color: var(--table-row-foreground);
}

.table-body .table-row-gray + .table-row > .table-cell {
  border-top-color: var(--gray-100);
}

.table-body .table-row-primary + .table-row > .table-cell {
  border-top-color: var(--primary-100);
}

.table-body .table-row-danger + .table-row > .table-cell {
  border-top-color: var(--danger-100);
}

.table-body .table-row-info + .table-row > .table-cell {
  border-top-color: var(--info-100);
}

.table-body .table-row-success + .table-row > .table-cell {
  border-top-color: var(--success-100);
}

.table-body .table-row-warning + .table-row > .table-cell {
  border-top-color: var(--warning-100);
}

.table-row.is-selected {
  --table-row-stroke: var(--primary-100);
}

.table-body .table-row.is-selected > .table-cell {
  background: var(--primary-50);
  border-color: var(--table-row-stroke);
}

.table-body .table-row.is-selected + .table-row > .table-cell {
  border-top-color: var(--primary-100);
}

@media (hover: hover) {
  .table.is-hoverable .table-body .table-row:has(:hover) > .table-cell:not(.table-group):not(.has-rowspan),
  .table.is-hoverable .table-body .table-row:has(:focus-visible) > .table-cell:not(.table-group):not(.has-rowspan),
  .table.is-hoverable .table-body .table-row:has(:hover) > .table-group.is-hoverable,
  .table.is-hoverable .table-body .table-row:has(:focus-visible) > .table-group.is-hoverable {
    background: var(--gray-50);
  }
  .table.is-hoverable .table-body .table-row.is-colored:has(:hover) > .table-cell:not(.has-rowspan),
  .table.is-hoverable .table-body .table-row.is-colored:has(:focus-visible) > .table-cell:not(.has-rowspan) {
    background: var(--table-row-fill-hover);
  }
  .table.is-hoverable .table-body .table-row.is-selected:has(:hover) > .table-cell:not(.has-rowspan),
  .table.is-hoverable .table-body .table-row.is-selected:has(:focus-visible) > .table-cell:not(.has-rowspan) {
    background: var(--primary-50);
  }
  .table.is-hoverable .table-body .table-row:has(:hover) > .table-cell:not(.has-rowspan),
  .table.is-hoverable .table-body .table-row:has(:focus-visible) > .table-cell:not(.has-rowspan) {
    border-top-color: var(--table-row-stroke, var(--gray-100));
  }
}
.table-foot .table-cell {
  border-top: 1px solid var(--gray-100);
}

.table-cell + .table-cell {
  border-left-width: 1px;
}

.table-cell.has-rowspan {
  border-right-width: 1px;
}

.table-cell.has-rowspan + .table-cell {
  border-left-width: 0;
}

.table-body .table-row + .table-row > .table-cell {
  border-top-width: 1px;
}

.table-body .table-group-row + .table-row > .table-cell {
  border-top-width: 0;
}

.table-body .table-group-section:not(:first-child) .table-group {
  border-top-width: 1px;
}

.table-body .table-group-section + .table-row > .table-cell {
  border-top-width: 1px;
}

.table-body .table-group-section:last-child .table-group-row:last-child .table-group {
  border-bottom-width: 0;
}

.table-actions {
  margin: -4px 0 -4px -3px;
}

.table-cell-selection {
  white-space: nowrap;
}

.table-cell.is-no-wrap {
  white-space: nowrap;
}

.table-cell.is-numeric {
  font-variant-numeric: tabular-nums;
}

.table-cell.is-pinned-start,
.table-cell.is-pinned-end {
  position: sticky;
  background: var(--surface);
  transition: box-shadow 0.2s var(--swift-out);
  z-index: 1;
}

.table-cell.is-pinned-start {
  left: 0;
}

.table-cell.is-pinned-end {
  right: 0;
}

.table-header.is-pinned-start,
.table-header.is-pinned-end {
  z-index: 4;
}

.table-head-sticky .table-header.is-pinned-start,
.table-head-sticky .table-header.is-pinned-end {
  background: var(--gray-50);
}

.table[data-scrolled-start] .table-cell.is-pinned-start.is-pinned-edge {
  box-shadow: 1px 0 0 var(--surface-stroke-out), 6px 0 10px -6px rgb(from var(--gray-800) r g b/0.15);
}

.table[data-scrollable-end] .table-cell.is-pinned-end.is-pinned-edge {
  border-left-color: var(--surface-stroke-out);
  box-shadow: -6px 0 10px -6px rgb(from var(--gray-800) r g b/0.15);
}

.table-fill {
  pointer-events: none;
  border-top: 1px solid var(--gray-100);
}
.table-fill .table-cell {
  padding: 0;
}

.table-empty-fill .table-cell-base {
  display: flex;
  flex-flow: column;
  justify-content: center;
}

.table-bar {
  --bg: var(--surface);
  position: relative;
  grid-column: 1/-1;
  padding: 0;
  background: var(--bg);
  box-shadow: 0 0 18px var(--bg), 0 0 18px var(--bg), 0 0 18px var(--bg), 0 0 18px var(--bg), 0 0 18px var(--bg), 0 0 18px var(--bg);
  z-index: 2;
}

.table-head-sticky .table-bar {
  --bg: var(--gray-50);
}

.table-bar-content {
  position: sticky;
  left: 0;
  display: flex;
  align-items: flex-start;
  flex-flow: row nowrap;
  flex-grow: 1;
  gap: 15px;
  max-width: 100cqw;
  padding: 12px 15px;
  word-break: break-word;
}

.table-group-section {
  display: grid;
  grid-column: 1/-1;
  grid-template-columns: subgrid;
}

.table-group {
  grid-column: 1/-1;
  padding: 0;
  border-bottom-width: 1px;
  background: var(--surface);
}

.table.is-sticky .table-body .table-group-row .table-group {
  position: sticky;
  top: calc(var(--flux-table-head-height, 0px) - 1px);
  margin-top: -1px;
  border-top-width: 1px;
  z-index: 2;
}

.table-group-content {
  align-items: center;
  gap: 12px;
  background: color-mix(in srgb, var(--surface), var(--gray-50));
}
.table-group-content:is(button) {
  width: 100%;
  border: 0;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background var(--transition-default);
  transition-property: background, outline-color, outline-offset;
  outline: 2px solid rgb(from var(--primary-600) r g b/0);
  outline-offset: 0;
}
.table-group-content:is(button):focus-visible {
  outline-color: var(--primary-600);
  outline-offset: -2px;
}
@media (hover: hover) {
  .table-group-content:is(button):hover {
    background: var(--gray-50);
  }
}

.table-group-chevron {
  color: var(--foreground-secondary);
  transition: rotate 0.2s var(--swift-out);
}

.table-group-chevron.is-expanded {
  rotate: 90deg;
}

.table-group-icon {
  color: var(--foreground);
}

.table-group-label {
  font-size: var(--font-size-small);
  line-height: var(--line-height-small);
  flex-grow: 1;
  color: var(--foreground-prominent);
  font-weight: 600;
}

.table-group-after {
  display: flex;
  align-items: center;
  gap: 9px;
}

.table-caption {
  font-size: var(--font-size-small);
  line-height: var(--line-height-small);
  position: sticky;
  left: 0;
  max-width: 100cqw;
  color: var(--foreground-secondary);
  text-align: left;
}
.table-caption.is-top {
  order: -1;
}

.table-pagination {
  position: sticky;
  left: 0;
  bottom: 0;
  margin-top: auto;
  margin-bottom: -1px;
  background: var(--surface);
  border-top: 1px solid var(--gray-100);
  translate: 0 -1px;
  z-index: 100;
}

.table-sort {
  display: flex;
  height: 24px;
  width: 24px;
  margin: -3px -6px -3px 6px;
  padding: 0;
  align-items: center;
  justify-content: center;
  background: unset;
  border: 0;
  border-radius: var(--radius-half);
  color: var(--foreground-secondary);
  cursor: pointer;
  outline: 0;
}
@media (hover: hover) {
  .table-sort:hover {
    background: var(--gray-100);
    color: var(--foreground);
  }
}

.base-pane-structure:has(.table) {
  --table-spacing: 18px;
}

.base-pane-structure .base-pane-structure {
  --table-spacing: 15px;
}

.base-pane-structure > .table .table-cell:not(.table-bar):not(.table-group):not(.is-raw):first-child {
  padding-left: var(--table-spacing);
}

.base-pane-structure > .table .table-cell:not(.table-bar):not(.table-group):not(.is-raw):last-child {
  padding-right: var(--table-spacing);
}

.base-pane-structure > .table :is(.table-bar-content, .table-group-content) {
  padding-left: var(--table-spacing);
  padding-right: var(--table-spacing);
}

.base-pane-structure > .table .table-actions {
  margin-right: -3px;
}

.base-pane-structure > .table .table-caption {
  padding: 12px var(--table-spacing);
  border-top: 1px solid var(--gray-100);
}

.base-pane-structure > .table .table-loader {
  border-radius: var(--radius);
}

.table-cell-expand {
  white-space: nowrap;
}

.table-expand-toggle svg {
  transition: rotate 0.2s var(--swift-out);
}

.table-expand-toggle.is-expanded svg {
  rotate: 90deg;
}

.table-expand-content {
  padding: 12px 15px;
}

.table-tree-cell {
  align-items: center;
  padding-block: 0;
}

.tree-branch {
  position: relative;
  align-self: stretch;
  flex-shrink: 0;
  margin-right: 12px;
}

.table-tree-lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  fill: none;
  stroke: var(--surface-active);
  stroke-width: 2;
  stroke-linecap: round;
  pointer-events: none;
}

.tree-marker {
  --tree-marker-fill: var(--gray-100);
  --tree-marker-stroke: var(--gray-200);
  --tree-marker-foreground: var(--foreground-prominent);
  position: absolute;
  top: 50%;
  display: flex;
  box-sizing: border-box;
  width: 22px;
  height: 22px;
  align-items: center;
  justify-content: center;
  background: var(--tree-marker-fill);
  border: 1px solid var(--tree-marker-stroke);
  border-radius: 50%;
  color: var(--tree-marker-foreground);
  translate: 0 -50%;
  z-index: 1;
}

.tree-marker.is-toggle {
  padding: 0;
  cursor: pointer;
  outline: 0;
  outline: 2px solid rgb(from var(--primary-600) r g b/0);
  outline-offset: 0;
}
.tree-marker.is-toggle:focus-visible {
  outline-color: var(--primary-600);
  outline-offset: 2px;
}
@media (hover: hover) {
  .tree-marker.is-toggle:hover {
    opacity: 0.75;
  }
}

.tree-marker.is-toggle svg {
  transition: rotate 0.2s var(--swift-out);
}

.tree-marker.is-toggle.is-expanded svg {
  rotate: 90deg;
}

.tree-marker-gray {
  --tree-marker-fill: var(--gray-100);
  --tree-marker-stroke: var(--gray-300);
  --tree-marker-foreground: var(--foreground-prominent);
}

.tree-marker-primary {
  --tree-marker-fill: var(--primary-100);
  --tree-marker-stroke: var(--primary-300);
  --tree-marker-foreground: var(--primary-900);
}

.tree-marker-danger {
  --tree-marker-fill: var(--danger-100);
  --tree-marker-stroke: var(--danger-300);
  --tree-marker-foreground: var(--danger-900);
}

.tree-marker-info {
  --tree-marker-fill: var(--info-100);
  --tree-marker-stroke: var(--info-300);
  --tree-marker-foreground: var(--info-900);
}

.tree-marker-success {
  --tree-marker-fill: var(--success-100);
  --tree-marker-stroke: var(--success-300);
  --tree-marker-foreground: var(--success-900);
}

.tree-marker-warning {
  --tree-marker-fill: var(--warning-100);
  --tree-marker-stroke: var(--warning-300);
  --tree-marker-foreground: var(--warning-900);
}

.tree-marker-custom {
  --tree-marker-fill: color-mix(in srgb, var(--tree-marker-color) 15%, var(--surface));
  --tree-marker-stroke: color-mix(in srgb, var(--tree-marker-color) 35%, var(--surface));
  --tree-marker-foreground: color-mix(in srgb, var(--tree-marker-color) 75%, var(--foreground));
}

.table-empty {
  display: flex;
  padding: 45px 15px;
  align-items: center;
  justify-content: center;
  color: var(--foreground-secondary);
  text-align: center;
}.pagination {
  display: flex;
  gap: 1px;
}

.pagination-button {
  height: 36px;
  min-width: 36px;
  padding: 0 6px;
  background: unset;
}
.pagination-button.secondary-button {
  border-color: transparent;
  box-shadow: none;
}

.pagination-button-arrow {
  width: 36px;
}
.pagination-button-arrow.secondary-button {
  border-color: var(--surface-stroke);
}
.pagination-button-arrow:first-child {
  margin-right: 6px;
}
.pagination-button-arrow:last-child {
  margin-left: 6px;
}

.pagination-button.pagination-button-current {
  background: var(--primary-50);
  border-color: var(--primary-200);
}

.pagination-dots {
  font-size: var(--font-size-2xsmall);
  line-height: var(--line-height-2xsmall);
  display: flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  min-width: 36px;
  padding: 0 6px;
  color: var(--foreground-secondary);
  pointer-events: none;
  user-select: none;
}

.pagination-button-icon {
  font-size: 16px;
}

.pagination-button-label {
  font-size: var(--font-size-2xsmall);
  line-height: var(--line-height-2xsmall);
  margin: 0;
  min-width: unset;
}

.pagination-bar {
  display: flex;
  align-items: center;
  flex-flow: row;
}

.pagination-bar-limit {
  display: flex;
  align-items: center;
  flex-flow: row;
  gap: 15px;
}

.pagination-bar-limit-displaying-of {
  font-size: var(--font-size-2xsmall);
  line-height: var(--line-height-2xsmall);
  font-weight: 600;
}

.pagination-bar-limit-select {
  min-height: 36px;
  width: 120px;
}
.pagination-bar-limit-select .menu-item {
  min-height: 36px;
}
.pagination-bar-limit-select .menu-item-label {
  font-size: var(--font-size-2xsmall);
  line-height: var(--line-height-2xsmall);
  font-weight: 600;
}

@media (max-width: 767.98px) {
  .pagination-bar {
    flex-flow: column;
    gap: 9px;
  }
}.description-list {
  display: flex;
  flex-flow: column;
  gap: 12px;
}

.description-list-header {
  font-size: var(--font-size-small);
  line-height: var(--line-height-small);
  color: var(--foreground-secondary);
  font-weight: 500;
}

.description-list-items {
  display: flex;
  margin: 0;
  flex-flow: column;
  gap: 12px;
}

.description-item {
  display: flex;
  gap: 12px;
  align-items: center;
}

.description-item.is-stacked {
  gap: 2px;
  align-items: stretch;
  flex-flow: column;
}

.description-item.is-stacked .description-item-value {
  margin-left: 0;
  justify-content: flex-start;
  text-align: left;
}

.description-item-term {
  font-size: var(--font-size-default);
  line-height: var(--line-height-default);
  display: flex;
  gap: 9px;
  align-items: center;
  color: var(--foreground);
}

.description-item-icon {
  flex-shrink: 0;
  color: var(--foreground);
  font-size: 16px;
}

.description-item-label {
  display: flex;
  gap: 6px;
  align-items: center;
  overflow-wrap: anywhere;
}

.description-item-value {
  font-size: var(--font-size-default);
  line-height: var(--line-height-default);
  display: flex;
  margin: 0;
  margin-left: auto;
  gap: 6px;
  align-items: center;
  color: var(--foreground-prominent);
  font-weight: 600;
  text-align: right;
  overflow-wrap: anywhere;
}

.description-list-items.has-label-width {
  display: grid;
  align-items: center;
  gap: 12px 24px;
  grid-template-columns: fit-content(var(--label-width)) 1fr;
}
.description-list-items.has-label-width .description-item {
  display: contents;
}
.description-list-items.has-label-width .description-item-value {
  margin-left: 0;
  justify-content: flex-start;
  text-align: left;
}

.description-list-items.is-horizontal {
  gap: 0;
  flex-flow: row;
}
.description-list-items.is-horizontal .description-item {
  gap: 6px;
  align-items: stretch;
  flex: 1 1 0;
  flex-flow: column;
  padding-right: 24px;
  padding-left: 24px;
  border-left: 1px solid var(--gray-100);
}
.description-list-items.is-horizontal .description-item:first-child {
  padding-left: 0;
  border-left: 0;
}
.description-list-items.is-horizontal .description-item-term {
  font-size: var(--font-size-small);
  line-height: var(--line-height-small);
}
.description-list-items.is-horizontal .description-item-value {
  margin-left: 0;
  justify-content: flex-start;
  font-weight: 500;
  text-align: left;
}.drop-zone {
  --dz-fill: transparent;
  --dz-stroke: transparent;
  --dz-inset: -1px;
  --dz-radius: var(--radius);
  --dz-height: calc(100% + 2px);
  --dz-width: calc(100% + 2px);
}
.drop-zone:has(.drop-zone-content > .avatar) {
  --dz-inset: -3px;
  --dz-radius: 999px;
  --dz-height: calc(100% + 6px);
  --dz-width: calc(100% + 6px);
}
.drop-zone:has(.drop-zone-content > .placeholder) {
  --dz-fill: var(--gray-50);
  --dz-stroke: var(--gray-200);
}

.drop-zone {
  position: relative;
  display: grid;
  align-items: center;
  gap: 15px 30px;
  grid-template-columns: 1fr;
}
.drop-zone:has(> .drop-zone-actions) {
  grid-template-columns: auto 1fr;
}

.drop-zone-actions {
  display: flex;
  flex-flow: column;
  gap: 15px;
}

.drop-zone-border {
  position: absolute;
  inset: var(--dz-inset);
  height: var(--dz-height);
  width: var(--dz-width);
  max-width: unset;
  overflow: visible;
  pointer-events: none;
}
.drop-zone-border rect {
  fill: var(--dz-fill);
  rx: var(--dz-radius);
  stroke: var(--dz-stroke);
  stroke-dasharray: 6px 6px;
  stroke-width: 2px;
  transition: 270ms var(--swift-out);
  transition-property: fill, stroke;
}

.drop-zone-content {
  position: relative;
}
.drop-zone-content > .avatar {
  display: block;
}
.drop-zone-content > .placeholder {
  background: transparent;
  border: 0;
}

.drop-zone.is-dragging .drop-zone-content {
  --dz-stroke: var(--primary-600);
}

.drop-zone.is-dragging-over .drop-zone-content:has(.placeholder) {
  --dz-fill: var(--primary-100);
}
.drop-zone.is-dragging-over .drop-zone-content .drop-zone-border rect {
  animation: drop-zone-border-animation 480ms linear infinite both;
}

.drop-zone-loader {
  position: absolute;
  display: flex;
  inset: var(--dz-inset);
  align-items: center;
  justify-content: center;
  background: rgb(from var(--gray-50) r g b/0.84);
  backdrop-filter: blur(3px) saturate(180%);
  border-radius: var(--dz-radius);
  z-index: 100;
}

@keyframes drop-zone-border-animation {
  to {
    stroke-dashoffset: -12px;
  }
}.expandable {
  display: flex;
  flex-flow: column;
}

.expandable-opened {
}

.expandable-header {
  display: flex;
  height: 54px;
  padding-left: 18px;
  padding-right: 18px;
  align-items: center;
  gap: 12px;
  background: unset;
  border: 0;
  color: var(--foreground-prominent);
  cursor: pointer;
  text-align: left;
  transition: background var(--transition-default);
  transition-property: background, outline-color, outline-offset;
  z-index: 1;
  outline: 2px solid rgb(from var(--primary-600) r g b/0);
  outline-offset: 0;
}
.expandable-header:focus-visible {
  outline-color: var(--primary-600);
  outline-offset: 0;
}
@media (hover: hover) {
  .expandable-header:hover {
    background: var(--surface-hover);
  }
}
.expandable-header :is(span) {
  flex-grow: 1;
  font-weight: 600;
}
.expandable-header .icon:last-child {
  color: var(--foreground-secondary);
}

.expandable-body {
  transition: height 390ms var(--swift-out), translate 300ms var(--swift-out) 120ms, opacity 300ms var(--swift-out) 120ms;
}
.expandable-body.v-enter-from, .expandable-body.v-leave-to {
  opacity: 0;
  translate: 0 -15px;
}
.expandable-body.v-enter-to, .expandable-body.v-leave-from {
  opacity: 1;
}
.expandable-body.v-leave-active {
  transition-delay: 0s;
}
.expandable-body.v-enter-active, .expandable-body.v-leave-active {
  overflow: hidden;
}

.expandable-content {
  padding: 0 18px 18px;
}

.base-pane > .expandable {
  border-radius: inherit;
}

.base-pane > .expandable .expandable-header {
  border-radius: inherit;
}

.base-pane > .expandable-opened .expandable-header {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.expandable-group {
  display: flex;
  flex-flow: column;
}
.expandable-group .expandable + .expandable {
  border-top: 1px solid var(--surface-stroke);
}
.expandable-group:not(:first-child) {
  border-top: 1px solid var(--surface-stroke);
}
.expandable-group:not(:last-child) {
  border-bottom: 1px solid var(--surface-stroke);
}

.base-pane > .expandable-group:first-child .expandable:first-child .expandable-header {
  border-top-left-radius: var(--radius);
  border-top-right-radius: var(--radius);
}

.base-pane > .expandable-group:last-child .expandable:not(.expandable-opened):last-child .expandable-header {
  border-bottom-left-radius: var(--radius);
  border-bottom-right-radius: var(--radius);
}.fader {
  position: relative;
  background: black;
  border-radius: inherit;
  contain: paint;
  z-index: 0;
}

.fader-item {
  position: absolute;
  display: block;
  inset: 0;
  transition: 660ms var(--deceleration-curve);
}
.fader-item:not(.is-current) {
  opacity: 0;
  pointer-events: none;
  scale: 1.05;
  transition-delay: 90ms;
  z-index: 1;
}
.fader-item :is(img) {
  position: absolute;
  display: block;
  inset: 0;
  height: 100%;
  width: 100%;
  border-radius: 0;
}
.fader-item :is(img):not(.focal-point-image) {
  object-fit: cover;
  object-position: center;
}.overflow-bar {
  display: flex;
  min-width: min-content;
  flex-basis: 0;
  flex-grow: 2;
}
.overflow-bar.align-start {
  justify-content: flex-start;
}
.overflow-bar.align-center {
  justify-content: center;
}
.overflow-bar.align-end {
  justify-content: flex-end;
}

.overflow-bar-horizontal {
  flex-flow: row nowrap;
}

.overflow-bar-vertical {
  flex-flow: column nowrap;
}

.overflow-bar-measurer {
  position: absolute;
  overflow: hidden;
  pointer-events: none;
  visibility: hidden;
}

.overflow-bar-overflow {
  display: contents;
}.focal-point-image {
  object-fit: cover;
}

.focal-point-editor {
  position: relative;
  margin-left: auto;
  margin-right: auto;
  max-height: 210px;
  max-width: 100%;
  aspect-ratio: var(--aspect-ratio);
  border-radius: var(--radius);
  touch-action: none;
  user-select: none;
  outline: 2px solid rgb(from var(--primary-600) r g b/0);
  outline-offset: 0;
}
.focal-point-editor:focus-visible {
  outline-color: var(--primary-600);
  outline-offset: 3px;
}

.focal-point-editor-area {
  position: absolute;
  height: 42px;
  width: 42px;
  background: rgba(0, 0, 0, 0.1);
  border: 4px solid white;
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-md);
  cursor: move;
  transform: translate3d(-50%, -50%, 0);
}

.focal-point-editor-image {
  position: relative;
  display: block;
  height: 100%;
  width: 100%;
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  pointer-events: none;
}

.focal-point-preview {
  position: relative;
  height: 210px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

.focal-point-preview-image {
  position: absolute;
  top: 50%;
  left: 50%;
  right: -50%;
  bottom: -50%;
  max-height: 210px;
  max-width: 100%;
  background-size: cover;
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  transform: translate3d(-50%, -50%, 0);
  animation: focal-point-preview 6s var(--swift-out) infinite;
}

@keyframes focal-point-preview {
  0% {
    aspect-ratio: var(--aspect-ratio);
  }
  20% {
    aspect-ratio: 1;
  }
  40% {
    aspect-ratio: 16/9;
  }
  60% {
    aspect-ratio: 3/4;
  }
  80% {
    aspect-ratio: 3/1;
  }
  100% {
    aspect-ratio: var(--aspect-ratio);
  }
}.form-fader {
  --fader-accent: var(--primary-500);
  --fader-strong: var(--primary-900);
  position: relative;
  display: block;
  height: 39px;
  border-radius: var(--radius-half);
  cursor: grab;
  outline: 0;
  touch-action: pan-y;
  user-select: none;
}
.form-fader.is-dragging {
  cursor: grabbing;
}
.form-fader.is-disabled {
  cursor: not-allowed;
  opacity: 0.45;
}
.form-fader.is-readonly {
  cursor: default;
}

.form-fader-focusable {
  transition: var(--transition-default);
  transition-property: outline-color, outline-offset;
  outline: 2px solid rgb(from var(--primary-600) r g b/0);
  outline-offset: 0;
}
.form-fader-focusable:focus-visible {
  outline-color: var(--primary-600);
  outline-offset: 2px;
}

.form-fader-track {
  position: absolute;
  inset: 0;
  background: var(--gray-50);
  background-clip: padding-box;
  border-radius: var(--radius-half);
  box-shadow: inset 0 0 0 1px var(--surface-stroke-out);
  overflow: hidden;
  will-change: transform;
}

.form-fader-fill {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background: rgb(from var(--fader-accent) r g b/0.15);
  border: 1px solid rgb(from var(--fader-accent) r g b/0.2);
  border-radius: var(--radius-half);
  transition: background-color 150ms var(--standard-curve);
}

@media (hover: hover) {
  .form-fader:not(.is-disabled):not(.is-dragging):hover .form-fader-fill {
    background: rgb(from var(--fader-accent) r g b/0.2);
  }
}

.form-fader.is-dragging .form-fader-fill {
  background: rgb(from var(--fader-accent) r g b/0.25);
}

.form-fader-bar {
  position: absolute;
  top: 50%;
  height: 21px;
  width: 4px;
  background: var(--fader-accent);
  border-radius: var(--radius-full);
  opacity: 0.85;
  translate: -50% -50%;
  scale: 1 1;
  transition: opacity 150ms var(--standard-curve), scale 150ms var(--standard-curve);
}
.form-fader-bar.is-dodge {
  opacity: 0.3;
  scale: 1 0.75;
}
.form-fader-bar.is-grabbed {
  opacity: 1;
  scale: 1 1.2;
}
.form-fader-bar.is-focus {
  opacity: 1;
  scale: 1 1.35;
}

.form-fader-tick {
  position: absolute;
  top: 50%;
  height: 3px;
  width: 3px;
  pointer-events: none;
  translate: -50% -50%;
}

.form-fader-tick-base {
  position: absolute;
  inset: 0;
  background: rgb(from var(--foreground) r g b/0.25);
  border-radius: var(--radius-full);
}

.form-fader-tick-fill {
  position: absolute;
  inset: 0;
  background: rgb(from var(--foreground) r g b/0.6);
  border-radius: var(--radius-full);
}

.form-fader-thumb {
  position: absolute;
  top: 0;
  height: 100%;
  width: 21px;
  padding: 0;
  background: none;
  border: 0;
  outline: 0;
  opacity: 0;
  translate: -50% 0;
}

.form-fader-overlay {
  position: absolute;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  inset: 0;
  padding: 0 12px;
  pointer-events: none;
}

.form-fader-overlay-fill {
  z-index: 2;
}
.form-fader-overlay-fill .form-fader-label,
.form-fader-overlay-fill .form-fader-value,
.form-fader-overlay-fill .form-fader-icon {
  color: var(--fader-strong);
}

.form-fader-icon {
  flex: 0 0 auto;
  color: var(--foreground);
}

.form-fader-icon-leading {
  margin-right: 9px;
}

.form-fader-icon-trailing {
  margin-left: 9px;
}

.form-fader-label {
  font-size: var(--font-size-small);
  line-height: var(--line-height-small);
  flex: 0 1 auto;
  min-width: 0;
  color: var(--foreground);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.form-fader-value {
  font-size: var(--font-size-xsmall);
  line-height: var(--line-height-xsmall);
  flex: 0 0 auto;
  margin-left: auto;
  padding-left: 12px;
  color: var(--foreground);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.form-fader.is-vertical {
  height: var(--flux-form-fader-length, 210px);
  width: 39px;
  touch-action: pan-x;
}
.form-fader.is-vertical .form-fader-fill {
  top: auto;
  bottom: 0;
  width: 100%;
}
.form-fader.is-vertical .form-fader-bar {
  top: auto;
  left: 50%;
  height: 4px;
  width: 21px;
  translate: -50% 50%;
}
.form-fader.is-vertical .form-fader-bar.is-dodge {
  scale: 0.75 1;
}
.form-fader.is-vertical .form-fader-bar.is-grabbed {
  scale: 1.2 1;
}
.form-fader.is-vertical .form-fader-bar.is-focus {
  scale: 1.35 1;
}
.form-fader.is-vertical .form-fader-thumb {
  top: auto;
  left: 0;
  height: 21px;
  width: 100%;
  translate: 0 50%;
}
.form-fader.is-vertical .form-fader-tick {
  top: auto;
  left: 50%;
  translate: -50% 50%;
}
.form-fader.is-vertical .form-fader-overlay {
  flex-flow: column;
  padding: 12px 0;
}
.form-fader.is-vertical .form-fader-icon-leading {
  margin-right: 0;
  margin-bottom: 9px;
}
.form-fader.is-vertical .form-fader-icon-trailing {
  margin-left: 0;
  margin-top: 9px;
}
.form-fader.is-vertical .form-fader-label {
  writing-mode: vertical-rl;
}
.form-fader.is-vertical .form-fader-value {
  margin-top: auto;
  margin-left: 0;
  padding-top: 12px;
  padding-left: 0;
  writing-mode: vertical-rl;
}.form-rating {
  display: inline-flex;
  gap: 0.15em;
  font-size: 24px;
  line-height: 1;
  border-radius: 4px;
  outline: 2px solid rgb(from var(--primary-600) r g b/0);
  outline-offset: 0;
}
.form-rating:focus-visible {
  outline-color: var(--primary-600);
  outline-offset: 4px;
}
.form-rating.is-disabled {
  opacity: 0.6;
}
.form-rating.is-disabled .form-rating-star {
  cursor: not-allowed;
}

.form-rating-star {
  position: relative;
  display: inline-flex;
  padding: 0;
  border: 0;
  background: none;
  line-height: 0;
  cursor: pointer;
}
.form-rating-star:disabled {
  cursor: default;
}

.form-rating-star-empty {
  color: var(--gray-300);
}

.form-rating-star-full {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  color: var(--warning-400);
  clip-path: inset(0 calc((1 - var(--fill, 0)) * 100%) 0 0);
  pointer-events: none;
}

.form-rating.is-invalid .form-rating-star-empty {
  color: var(--danger-200);
}.tree-view-select-list {
  display: flex;
  flex-flow: column;
  padding: 9px;
}

.tree-view-select-empty {
  font-size: var(--font-size-small);
  line-height: var(--line-height-small);
  padding: 12px 6px;
  color: var(--foreground-secondary);
  text-align: center;
}

.tree-node {
}
.tree-node.is-selectable, .tree-node.is-expandable {
  cursor: pointer;
}
@media (hover: hover) {
  .tree-node.is-selectable:hover, .tree-node.is-expandable:hover {
    background: var(--gray-50);
  }
}
.tree-node.is-selectable:active, .tree-node.is-expandable:active {
  background: var(--gray-100);
}
.tree-node.is-highlighted {
  background: var(--primary-100);
  color: var(--primary-600);
}
@media (hover: hover) {
  .tree-node.is-highlighted:hover {
    background: var(--primary-100);
  }
}
.tree-node.is-disabled {
  color: var(--foreground-secondary);
  cursor: default;
}
@media (hover: hover) {
  .tree-node.is-disabled:hover {
    background: transparent;
  }
}
.tree-node.is-disabled:active {
  background: transparent;
}

.tree-node-control {
  cursor: inherit;
}.remove {
  position: absolute;
  display: flex;
  top: -9px;
  right: -9px;
  height: 27px;
  width: 27px;
  align-items: center;
  justify-content: center;
  background: var(--danger-600);
  border: 3px solid var(--surface);
  border-radius: var(--radius-full);
  color: var(--danger-25);
  cursor: pointer;
  transition: 300ms var(--swift-out);
  transition-property: background, opacity, scale;
}
@media (hover: hover) {
  .remove:hover {
    background: var(--danger-700);
  }
}
.remove.is-hidden {
  opacity: 0;
  pointer-events: none;
  scale: 0.5;
}.placeholder {
  position: relative;
  display: flex;
  align-items: center;
  flex: 1 0 auto;
  flex-flow: column;
  justify-content: center;
  background: var(--gray-50);
  border: 2px dashed var(--gray-200);
  border-radius: var(--radius);
  text-align: center;
  user-select: none;
}
.placeholder.is-button {
  cursor: pointer;
}
@media (hover: hover) {
  .placeholder.is-button:hover {
    background: var(--gray-100);
  }
}
.placeholder.is-extended {
  padding: 27px;
  gap: 9px;
}
.placeholder.is-extended .placeholder-icon {
  font-size: 24px;
}
.placeholder.is-simple {
  padding: 18px;
}
.placeholder.is-small {
  font-size: var(--font-size-2xsmall);
  line-height: var(--line-height-2xsmall);
  padding: 12px;
}
.placeholder.is-small .placeholder-caption :is(strong) {
  color: var(--foreground-secondary);
  font-weight: 400;
}
.placeholder.is-small .placeholder-icon {
  color: var(--foreground-secondary);
}
.placeholder .button {
  align-self: center;
}

.placeholder-caption {
  display: flex;
  align-items: stretch;
  flex-flow: column;
}
.placeholder-caption :is(p) {
  font-size: var(--font-size-small);
  line-height: var(--line-height-small);
  margin: 0;
  max-width: 510px;
  color: var(--foreground-secondary);
}

.placeholder-icon {
  color: var(--primary-600);
  font-size: 20px;
}.gallery {
  --dz-fill: transparent;
  --dz-stroke: transparent;
  --dz-inset: -3px;
  --dz-radius: calc(var(--radius) + 3px);
  --dz-height: calc(100% + 6px);
  --dz-width: calc(100% + 6px);
}

.gallery-grid {
  display: grid;
  gap: 9px;
  grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));
}

.gallery-add {
  position: relative;
  aspect-ratio: 1/1;
  color: var(--foreground-secondary);
}
@media (hover: hover) {
  .gallery-add:hover {
    background: var(--gray-100);
    border-color: var(--gray-200);
  }
}

.gallery-move {
  transition: 360ms var(--swift-out);
}

.gallery-item {
  position: relative;
  aspect-ratio: 1/1;
}
.gallery-item .remove {
  z-index: 1;
}

.gallery-item-image {
  position: absolute;
  display: block;
  inset: 0;
  height: 100%;
  width: 100%;
  border-radius: var(--radius);
  object-fit: cover;
  object-position: center;
  outline: 1px solid rgba(0, 0, 0, 0.025);
  outline-offset: -1px;
}

.gallery-item-loader {
  position: absolute;
  display: flex;
  inset: 1px;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(3px) saturate(180%);
  background: rgba(0, 0, 0, 0.25);
  border-radius: calc(var(--radius) - 1px);
  z-index: 0;
}
.gallery-item-loader .spinner {
  --track: rgb(255 255 255 / .25);
  --value: rgb(255 255 255);
}.grid {
  display: grid;
  gap: var(--gap);
  grid-template-columns: repeat(var(--columns), 1fr);
  container: grid/inline-size;
}

.grid-column {
  display: flex;
  flex-flow: column;
  gap: var(--gap);
}

.grid-column {
  grid-column: span var(--xl);
}

@container grid (max-width: 1279.98px) {
  .grid-column {
    grid-column: span var(--lg);
  }
}
@container grid (max-width: 1023.98px) {
  .grid-column {
    grid-column: span var(--md);
  }
}
@container grid (max-width: 767.98px) {
  .grid-column {
    grid-column: span var(--sm);
  }
}
@container grid (max-width: 639.98px) {
  .grid-column {
    grid-column: span var(--xs);
  }
}.info {
  --info-icon-color: var(--primary-600);
  display: flex;
  gap: 15px;
}
.info > .icon {
  margin-top: 3px;
  flex-shrink: 0;
  color: var(--info-icon-color);
}

.info-gray {
  --info-icon-color: var(--gray-500);
}

.info-primary {
  --info-icon-color: var(--primary-600);
}

.info-danger {
  --info-icon-color: var(--danger-600);
}

.info-info {
  --info-icon-color: var(--info-600);
}

.info-success {
  --info-icon-color: var(--success-600);
}

.info-warning {
  --info-icon-color: var(--warning-600);
}

.info-body {
  display: flex;
  flex-flow: column;
  justify-content: center;
}.inline-edit {
  display: flex;
  gap: 6px;
  align-items: flex-start;
}

.inline-edit-field {
  min-width: 0;
  flex: 1 1 auto;
}

.inline-edit-actions {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-shrink: 0;
}

.inline-edit-display {
  display: inline-flex;
  min-height: 30px;
  padding: 3px 6px;
  align-items: center;
  border-radius: 6px;
  color: var(--foreground);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.inline-edit-display.is-interactive {
  cursor: text;
  outline: 2px solid rgb(from var(--primary-600) r g b/0);
  outline-offset: 0;
}
.inline-edit-display.is-interactive:focus-visible {
  outline-color: var(--primary-600);
  outline-offset: 2px;
}
@media (hover: hover) {
  .inline-edit-display.is-interactive:hover {
    background: var(--surface-hover);
  }
}
.inline-edit-display.is-placeholder {
  color: var(--foreground-secondary);
}.kanban {
  position: relative;
  display: grid;
  flex-grow: 1;
  grid-auto-flow: column;
  grid-auto-columns: minmax(300px, 1fr);
  grid-template-rows: auto 1fr auto;
  gap: 0 15px;
  overflow-x: auto;
}

.kanban-live-region {
  position: absolute;
  grid-row: 1;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  clip: rect(0, 0, 0, 0);
  overflow: hidden;
  white-space: nowrap;
}

.kanban-column {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 2;
  min-width: 0;
  background: var(--gray-50);
  border: 1px solid var(--surface-stroke);
  border-radius: var(--radius);
  outline: 2px dashed transparent;
  outline-offset: -2px;
  overflow: hidden;
  transition: 210ms var(--swift-out);
  transition-property: background, border, outline-color, opacity, z-index;
  z-index: 0;
}
.kanban-column.is-over {
  background: var(--primary-50);
  border-color: var(--primary-200);
  outline-color: var(--primary-600);
  z-index: 1;
}

.kanban-column.is-column-dragging {
  opacity: 0.4;
}

.kanban-column.is-column-drop-before {
  box-shadow: -3px 0 0 var(--primary-500);
}

.kanban-column-header {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 12px 12px 0;
  outline: 2px solid rgb(from var(--primary-600) r g b/0);
  outline-offset: 0;
}
.kanban-column-header:focus-visible {
  outline-color: var(--primary-600);
  outline-offset: -2;
}

.kanban-column-header-caption {
  display: flex;
  padding-left: 9px;
  align-items: center;
  gap: 9px;
}
.kanban-column-header-caption .icon {
  font-size: 16px;
}
.kanban-column-header-caption span {
  font-weight: 500;
}

.kanban-column.is-reorderable .kanban-column-header {
  cursor: grab;
}

.kanban-column.is-reorderable .kanban-column-header:active {
  cursor: grabbing;
}

.kanban-column-body {
  position: relative;
  display: flex;
  flex-flow: column;
  gap: 12px;
  padding: 12px;
  min-height: 60px;
  flex: 1;
  overflow-y: auto;
  transition: background 180ms var(--swift-out);
}

.kanban-column.is-over.is-drop-disallowed .kanban-column-body {
  background: rgb(from var(--danger-500) r g b/0.06);
  cursor: not-allowed;
}

.kanban.is-board-dragging .kanban-column:not(.is-over):not(.is-disabled) .kanban-column-body {
  background: rgb(from var(--primary-500) r g b/0.02);
}

.kanban-column.is-disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.kanban-column.is-disabled .kanban-column-body {
  pointer-events: none;
}

.kanban-column-empty {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  color: var(--foreground-secondary);
  text-align: center;
}

.kanban-column-footer {
  padding: 9px 15px;
  border-top: 1px solid var(--gray-200);
}

.kanban-drop-indicator {
  position: absolute;
  top: -2px;
  inset-inline: 15px;
  height: 2px;
  border-radius: 999px;
  background: var(--primary-500);
  opacity: 0;
  pointer-events: none;
  transition: 300ms var(--swift-out);
  transition-property: background, opacity;
  will-change: transform;
}

.kanban-drop-indicator.is-visible {
  opacity: 1;
}

.kanban-drop-indicator.is-disallowed {
  background: var(--danger-500);
}

.kanban-item {
  position: relative;
  display: block;
  background: transparent;
  border: 0;
  cursor: grab;
  scroll-margin: 9px;
  transition: opacity 180ms var(--swift-out), transform 180ms var(--swift-out);
  user-select: none;
  outline: 2px solid rgb(from var(--primary-600) r g b/0);
  outline-offset: 0;
}
.kanban-item:focus-visible {
  outline-color: var(--primary-600);
  outline-offset: 2;
}
.kanban-item:active {
  cursor: grabbing;
}
.kanban-item.is-dragging {
  opacity: 0.4;
  cursor: grabbing;
}
.kanban-item.is-grabbed {
  transform: scale(1.04);
  outline: 2px solid var(--primary-500);
  outline-offset: 2px;
  z-index: 1;
}

.kanban-item.is-disabled {
  cursor: not-allowed;
  opacity: 0.6;
}
.kanban-item.is-disabled:active {
  cursor: not-allowed;
}.item {
  display: flex;
  flex-flow: row nowrap;
  gap: 18px;
  text-align: left;
}

.item.is-control {
  cursor: pointer;
  user-select: none;
  transition: background-color 0.15s var(--swift-out);
}
@media (hover: hover) {
  .item.is-control:hover {
    background-color: var(--surface-hover);
  }
}

.item-actions {
  flex-shrink: 0;
}

.item-content {
  display: flex;
  flex-flow: column;
  flex-grow: 1;
  gap: 3px;
}

.item-media {
  --size: 48px;
  flex-shrink: 0;
}

.item-media > img {
  height: var(--size);
  width: var(--size);
  object-fit: cover;
  object-position: center;
}

.item-media > .avatar {
  font-size: var(--size);
}

.item-media > .icon {
  margin: 1px;
  font-size: 20px;
}

.item-media > .icon-boxed {
  font-size: var(--size);
}

.item-actions.is-center,
.item-content.is-center,
.item-media.is-center {
  align-self: center;
}

.item-stack {
  position: relative;
}
.item-stack .item + .item {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--surface-stroke);
}

.base-pane-structure > .item,
.base-pane-structure > .item-stack > .item {
  padding: 18px;
}

.base-pane-structure > .item-stack > .item {
  margin: 0;
}

.base-pane-structure > .item.is-control {
  border-radius: calc(var(--radius) - 1px);
}

.base-pane-structure > .item-stack > .item.is-control {
  border-radius: 0;
}
.base-pane-structure > .item-stack > .item.is-control:first-child {
  border-top-left-radius: calc(var(--radius) - 1px);
  border-top-right-radius: calc(var(--radius) - 1px);
}
.base-pane-structure > .item-stack > .item.is-control:last-child {
  border-bottom-left-radius: calc(var(--radius) - 1px);
  border-bottom-right-radius: calc(var(--radius) - 1px);
}

@media (hover: hover) {
  .base-pane-structure:is(a, button):hover:has(> .item) {
    background-color: color-mix(in srgb, rgb(from var(--surface-hover) r g b/0.125), var(--surface));
  }
}.link {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  box-sizing: border-box;
  color: var(--foreground);
  cursor: pointer;
  font: inherit;
  text-decoration: underline;
  text-decoration-color: rgb(from currentColor r g b/0.35);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: var(--transition-default);
  transition-property: color, text-decoration-color;
  outline: 2px solid rgb(from var(--primary-600) r g b/0);
  outline-offset: 0;
}
.link:focus-visible {
  outline-color: var(--primary-600);
  outline-offset: 3px;
}
@media (hover: hover) {
  .link:hover {
    text-decoration-color: currentColor;
  }
}
.link.is-primary {
  color: var(--primary-600);
}
.link[aria-disabled=true] {
  opacity: 0.5;
  pointer-events: none;
}

.link-icon {
  flex-shrink: 0;
  font-size: 1em;
}.notice {
  display: flex;
  padding: 12px 15px;
  gap: 12px;
  border-radius: var(--radius);
}
.notice .button {
  margin-top: -6px;
  margin-right: -9px;
  margin-bottom: -6px;
  height: 36px;
}
.notice a {
  color: currentColor;
}
.notice code {
  padding: 3px 6px;
  font-size: var(--font-size-xsmall);
  background: var(--gray-100);
  border-radius: var(--radius-half);
}
.notice ul {
  margin-top: 3px;
  padding-left: 1em;
  list-style-type: disc;
}
.notice ul li + li {
  margin-top: 9px;
}

.notice-body {
  display: flex;
  flex-flow: column;
  flex-grow: 1;
  text-wrap: pretty;
}
.notice-body:last-child {
  flex-grow: 0;
}

.notice-close {
  display: flex;
  height: 20px;
  width: 20px;
  margin: 2px;
  padding: 0;
  align-items: center;
  flex-shrink: 0;
  justify-content: center;
  border: 0;
  border-radius: 12px;
  color: currentColor;
  cursor: pointer;
  transition: opacity 150ms var(--swift-out);
}
@media (hover: hover) {
  .notice-close:hover {
    opacity: 0.75;
  }
}
.notice-close > .icon {
  font-size: 12px;
}

.notice-prefix {
  margin-top: 2px;
  flex-shrink: 0;
  font-size: 20px;
}

.notice-message,
.notice-title {
  margin: 0;
}

.notice-title {
  font-weight: 600;
}

.notice.is-center {
  justify-content: center;
  text-align: center;
}

.notice.is-fluid {
  border-style: solid;
  border-width: 1px;
  border-left: 0;
  border-right: 0;
  border-radius: 0;
}
.notice.is-fluid:first-child {
  border-top: 0;
}
.notice.is-fluid:last-child {
  border-bottom: 0;
}

.notice-gray {
  background: var(--gray-100);
  border-color: var(--gray-200);
  color: var(--foreground);
}
.notice-gray code {
  background: var(--gray-200);
}
.notice-gray .notice-close {
  background: var(--gray-200);
}
.notice-gray .notice-prefix,
.notice-gray .notice-title {
  color: var(--foreground-prominent);
}

.notice-primary {
  background: var(--primary-100);
  border-color: var(--primary-200);
  color: var(--primary-950);
}
.notice-primary code {
  background: var(--primary-200);
}
.notice-primary .notice-close {
  background: var(--primary-200);
}
.notice-primary .notice-prefix,
.notice-primary .notice-title {
  color: var(--primary-800);
}
.notice-primary .button {
  border-color: var(--primary-300);
}
.notice-primary .spinner-track {
  stroke: var(--primary-200);
}
.notice-primary .spinner-effect,
.notice-primary .spinner-value {
  stroke: var(--primary-600);
}

.notice-danger {
  background: var(--danger-100);
  border-color: var(--danger-200);
  color: var(--danger-950);
}
.notice-danger code {
  background: var(--danger-200);
}
.notice-danger .notice-close {
  background: var(--danger-200);
}
.notice-danger .notice-prefix,
.notice-danger .notice-title {
  color: var(--danger-800);
}
.notice-danger .button {
  border-color: var(--danger-300);
}
.notice-danger .spinner-track {
  stroke: var(--danger-200);
}
.notice-danger .spinner-effect,
.notice-danger .spinner-value {
  stroke: var(--danger-600);
}

.notice-info {
  background: var(--info-100);
  border-color: var(--info-200);
  color: var(--info-950);
}
.notice-info code {
  background: var(--info-200);
}
.notice-info .notice-close {
  background: var(--info-200);
}
.notice-info .notice-prefix,
.notice-info .notice-title {
  color: var(--info-800);
}
.notice-info .button {
  border-color: var(--info-300);
}
.notice-info .spinner-track {
  stroke: var(--info-200);
}
.notice-info .spinner-effect,
.notice-info .spinner-value {
  stroke: var(--info-600);
}

.notice-success {
  background: var(--success-100);
  border-color: var(--success-200);
  color: var(--success-950);
}
.notice-success code {
  background: var(--success-200);
}
.notice-success .notice-close {
  background: var(--success-200);
}
.notice-success .notice-prefix,
.notice-success .notice-title {
  color: var(--success-800);
}
.notice-success .button {
  border-color: var(--success-300);
}
.notice-success .spinner-track {
  stroke: var(--success-200);
}
.notice-success .spinner-effect,
.notice-success .spinner-value {
  stroke: var(--success-600);
}

.notice-warning {
  background: var(--warning-100);
  border-color: var(--warning-200);
  color: var(--warning-950);
}
.notice-warning code {
  background: var(--warning-200);
}
.notice-warning .notice-close {
  background: var(--warning-200);
}
.notice-warning .notice-prefix,
.notice-warning .notice-title {
  color: var(--warning-800);
}
.notice-warning .button {
  border-color: var(--warning-300);
}
.notice-warning .spinner-track {
  stroke: var(--warning-200);
}
.notice-warning .spinner-effect,
.notice-warning .spinner-value {
  stroke: var(--warning-600);
}

.base-pane > .notice {
  padding-left: 18px;
  padding-right: 18px;
}.progress-bar {
  --progress-fill: var(--primary-600);
  --progress-fill-soft: var(--primary-500);
  position: relative;
}

.progress-bar-gray {
  --progress-fill: var(--gray-500);
  --progress-fill-soft: var(--gray-400);
}

.progress-bar-primary {
  --progress-fill: var(--primary-600);
  --progress-fill-soft: var(--primary-500);
}

.progress-bar-danger {
  --progress-fill: var(--danger-600);
  --progress-fill-soft: var(--danger-500);
}

.progress-bar-info {
  --progress-fill: var(--info-600);
  --progress-fill-soft: var(--info-500);
}

.progress-bar-success {
  --progress-fill: var(--success-600);
  --progress-fill-soft: var(--success-500);
}

.progress-bar-warning {
  --progress-fill: var(--warning-600);
  --progress-fill-soft: var(--warning-500);
}

.progress-bar-track {
  position: relative;
  height: 9px;
  background: var(--gray-50);
  border-radius: var(--radius-half);
  box-shadow: inset 0 0 0 1px var(--gray-200);
  contain: paint;
}

.progress-bar-value {
  position: absolute;
  top: 0;
  left: 0;
  height: inherit;
  border-radius: inherit;
}

.progress-bar-value-complete {
  background: var(--progress-fill);
}

.progress-bar-value-incomplete {
  background: var(--progress-fill) linear-gradient(-45deg, transparent 20%, rgb(from var(--progress-fill-soft) r g b/0.5), transparent 80%);
  background-size: 150px 100%;
  animation: progress-bar-value 1s linear infinite;
}

.progress-bar-track-indeterminate {
}
.progress-bar-track-indeterminate .progress-bar-value {
  background: var(--progress-fill) linear-gradient(-45deg, transparent 20%, rgb(from var(--progress-fill-soft) r g b/0.5), transparent 80%);
  background-size: 90px 100%;
  animation: progress-bar-indeterminate 1s linear infinite;
}

.progress-bar-status-row {
  font-size: var(--font-size-small);
  line-height: var(--line-height-small);
  display: flex;
  gap: 21px;
  justify-content: flex-end;
}

.progress-bar-progress {
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
  font-weight: 500;
}

.progress-bar-status {
  margin-right: auto;
  color: var(--foreground-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.base-pane-structure > .progress-bar:first-child {
  margin: 9px 9px 0;
}

.base-pane-structure > .progress-bar:last-child {
  margin: 0 9px 9px;
}

.table-cell > .progress-bar {
  width: 100%;
}

@keyframes progress-bar-indeterminate {
  from {
    background-position-x: 90px;
  }
  to {
    background-position-x: -90px;
  }
}
@keyframes progress-bar-value {
  from {
    background-position-x: -150px;
  }
  to {
    background-position-x: 150px;
  }
}.prose-container {
  --_gutter: var(--flux-prose-gutter, 24px);
  --_measure: var(--flux-prose-container, 90ch);
  --_wide: var(--flux-prose-wide, 12ch);
  display: grid;
  grid-template-columns: [full-start] minmax(var(--_gutter), 1fr) [wide-start] minmax(0, var(--_wide)) [content-start] min(var(--_measure), 100% - var(--_gutter) * 2) [content-end] minmax(0, var(--_wide)) [wide-end] minmax(var(--_gutter), 1fr) [full-end];
}
.prose-container > * {
  grid-column: content;
}
.prose-container > [data-prose-wide] {
  grid-column: wide;
}
.prose-container > [data-prose-full] {
  grid-column: full;
}
.prose-container > :is([data-prose-wide], [data-prose-full]):not(:first-child),
.prose-container > :is([data-prose-wide], [data-prose-full]) + * {
  margin-top: 33px;
}

.prose {
  font-size: var(--font-size-default);
  line-height: var(--line-height-default);
  color: var(--foreground);
}
.prose > * + * {
  margin-top: 18px;
}
.prose > * + :where(h1, h2, h3) {
  margin-top: 42px;
}
.prose > h2 {
  padding-bottom: 9px;
  border-bottom: 1px solid var(--surface-stroke);
}
.prose > :where(ul, ol),
.prose > :where(ul, ol) :where(ul, ol) {
  padding-left: 24px;
}
.prose > ul {
  list-style: disc;
}
.prose > ol {
  list-style: decimal;
}
.prose > :where(ul, ol) ul {
  list-style: circle;
}
.prose > :where(ul, ol) ol {
  list-style: lower-alpha;
}
.prose > :where(ul, ol) li + li,
.prose > :where(ul, ol) li > :where(ul, ol) {
  margin-top: 6px;
}
.prose > blockquote {
  font-style: italic;
  padding-left: 18px;
  color: var(--gray-600);
  border-left: 3px solid var(--surface-stroke);
}
.prose > :where(p, h1, h2, h3, h4, h5, h6, blockquote, ul, ol, table) :where(code, samp) {
  font-size: var(--font-size-xsmall);
  padding: 3px 6px;
  border-radius: var(--radius-half);
  background: var(--gray-100);
}
.prose > :where(p, h1, h2, h3, h4, h5, h6, blockquote, ul, ol, table) kbd {
  font-size: var(--font-size-2xsmall);
  padding: 3px 6px;
  border: 1px solid var(--surface-stroke);
  border-radius: var(--radius-half);
  box-shadow: 0 1px 0 var(--surface-stroke);
}
.prose > :where(p, h1, h2, h3, h4, h5, h6, blockquote, ul, ol, table) .badge {
  vertical-align: middle;
}
.prose > pre {
  overflow-x: auto;
  padding: 15px 18px;
  border-radius: var(--radius);
  background: var(--gray-100);
}
.prose > pre code {
  font-size: inherit;
  padding: 0;
  background: none;
}
.prose > * + hr,
.prose > hr + * {
  margin-top: 33px;
}
.prose > hr {
  border: 0;
  border-top: 1px solid var(--surface-stroke);
}
.prose > table {
  width: 100%;
  border-collapse: collapse;
  text-align: start;
}
.prose > table :where(th, td) {
  padding: 12px 15px;
  vertical-align: top;
  text-align: start;
  overflow-wrap: break-word;
}
.prose > table :where(th, td) + :where(th, td) {
  border-left: 1px solid var(--gray-100);
}
.prose > table tr + tr > :where(th, td) {
  border-top: 1px solid var(--gray-100);
}
.prose > table thead th {
  font-size: var(--font-size-small);
  font-weight: 700;
  color: var(--foreground-prominent);
  border-bottom: 2px solid var(--gray-100);
  background: var(--gray-50);
}
.prose > img {
  height: unset;
  border-radius: var(--radius-half);
  outline: 1px solid rgba(0, 0, 0, 0.025);
  outline-offset: -1px;
}.snackbar {
  display: flex;
  box-shadow: var(--shadow-xl), var(--shadow-2xl);
  overflow: hidden;
}
.snackbar .action {
  margin: 12px 12px 12px 0;
}
.snackbar .progress-bar {
  margin-top: 9px;
}
.snackbar .progress-bar:not(:last-child) {
  margin-bottom: 6px;
}

.snackbar-content {
  display: flex;
  padding: 15px 18px;
  align-items: flex-start;
  flex-grow: 1;
  gap: 15px;
}
.snackbar-content > .icon,
.snackbar-content > .spinner {
  flex-shrink: 0;
  translate: 0 3px;
}

.snackbar-body {
  display: flex;
  align-self: stretch;
  flex-flow: column;
  flex-grow: 1;
}

.snackbar-message {
  color: var(--foreground);
}

.snackbar-sub-message {
  font-size: var(--font-size-small);
  line-height: var(--line-height-small);
  color: var(--foreground-secondary);
}

.snackbar-title {
  font-weight: 500;
}

.snackbar-action {
  font-size: var(--font-size-small);
  line-height: var(--line-height-small);
  display: flex;
  padding: 6px 15px;
  min-width: 84px;
  align-items: center;
  justify-content: center;
  flex-grow: 1;
  background: var(--surface);
  border: 0;
  border-radius: 0;
  color: var(--foreground);
  cursor: pointer;
  font-weight: 500;
  outline: 0;
  text-align: center;
  transition: var(--transition-default);
  transition-property: background, color;
}
@media (hover: hover) {
  .snackbar-action:hover {
    background: var(--surface-hover);
    color: var(--foreground-prominent);
  }
}
.snackbar-action:first-child {
  font-weight: 600;
}
.snackbar-action:active {
  background: var(--surface-active);
}

.snackbar-actions {
  display: flex;
  padding-left: 1px;
  max-width: max-content;
  flex-flow: column;
  flex-grow: 1;
  gap: 1px;
  background: var(--surface-stroke);
}

.snackbar-gray {
}
.snackbar-gray .snackbar-action:first-child,
.snackbar-gray .snackbar-content > .icon,
.snackbar-gray .snackbar-title {
  color: var(--foreground-prominent);
}

.snackbar-primary {
}
.snackbar-primary .snackbar-action:first-child,
.snackbar-primary .snackbar-content > .icon,
.snackbar-primary .snackbar-title {
  color: var(--primary-600);
}
.snackbar-primary .spinner-effect,
.snackbar-primary .spinner-value {
  stroke: var(--primary-700);
}

.snackbar-danger {
}
.snackbar-danger .snackbar-action:first-child,
.snackbar-danger .snackbar-content > .icon,
.snackbar-danger .snackbar-title {
  color: var(--danger-600);
}
.snackbar-danger .spinner-effect,
.snackbar-danger .spinner-value {
  stroke: var(--danger-700);
}

.snackbar-info {
}
.snackbar-info .snackbar-action:first-child,
.snackbar-info .snackbar-content > .icon,
.snackbar-info .snackbar-title {
  color: var(--info-600);
}
.snackbar-info .spinner-effect,
.snackbar-info .spinner-value {
  stroke: var(--info-700);
}

.snackbar-success {
}
.snackbar-success .snackbar-action:first-child,
.snackbar-success .snackbar-content > .icon,
.snackbar-success .snackbar-title {
  color: var(--success-600);
}
.snackbar-success .spinner-effect,
.snackbar-success .spinner-value {
  stroke: var(--success-700);
}

.snackbar-warning {
}
.snackbar-warning .snackbar-action:first-child,
.snackbar-warning .snackbar-content > .icon,
.snackbar-warning .snackbar-title {
  color: var(--warning-600);
}
.snackbar-warning .spinner-effect,
.snackbar-warning .spinner-value {
  stroke: var(--warning-700);
}

.snackbars {
  position: fixed;
  display: flex;
  flex-flow: column;
  gap: 15px;
  z-index: 100000;
}
@media (max-width: 767.98px) {
  .snackbars {
    left: 15px;
    right: 15px;
    bottom: 15px;
  }
}
@media (min-width: 768px) {
  .snackbars {
    width: 570px;
    top: 30px;
    left: calc(50dvw - 285px);
  }
}

.snackbars-enter-active,
.snackbars-leave-active,
.snackbars-move {
  transition: 420ms var(--swift-out);
}

.snackbars-leave-active {
  position: absolute;
  width: 100%;
}

.snackbars-enter-from {
  opacity: 0;
  transform: translate3d(0, -15px, 0);
}

.snackbars-leave-to {
  opacity: 0;
  scale: 0.95;
  translate: 0 -15px;
  z-index: -1;
}.tooltip-host {
  position: fixed;
  inset: 0;
  width: 0;
  height: 0;
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
  color: inherit;
  overflow: visible;
  pointer-events: none;
}

.tooltip {
  --foreground: var(--gray-200);
  --foreground-prominent: var(--gray-50);
  --foreground-secondary: var(--gray-400);
  font-size: var(--font-size-small);
  line-height: var(--line-height-small);
  position: fixed;
  display: flex;
  top: 0;
  left: 0;
  max-width: 360px;
  padding: 9px 15px;
  flex-flow: column;
  background: var(--overlay-strong);
  backdrop-filter: blur(3px) saturate(180%);
  border-radius: var(--radius);
  color: var(--foreground);
  font-variant-numeric: tabular-nums;
  pointer-events: none;
  translate: calc(var(--x) * 1px) calc(var(--y) * 1px);
  isolation: isolate;
  z-index: 100000;
}
.tooltip::after {
  position: absolute;
  display: block;
  top: var(--arrowY);
  left: var(--arrowX);
  height: 9px;
  width: 9px;
  content: "";
  background: inherit;
  border-radius: 0 0 3px 0;
  clip-path: polygon(100% 100%, 99% 0%, 0% 99%);
  rotate: var(--arrowAngle);
  transform-origin: center;
  translate: -50% -50%;
}

[dark] .tooltip {
  --foreground: var(--gray-700);
  --foreground-prominent: var(--gray-900);
  --foreground-secondary: var(--gray-500);
}

.tooltip-above {
  transform-origin: bottom center;
}

.tooltip-below {
  transform-origin: top center;
}

.tooltip-end {
  transform-origin: center left;
}

.tooltip-start {
  transform-origin: center right;
}.root {
  display: contents;
}
.root.is-locked {
  cursor: default;
  overflow: hidden;
}.segmented-control {
  position: relative;
  align-items: center;
  gap: 3px;
  padding: 2px 3px;
  background: var(--gray-50);
  border: 1px solid var(--surface-stroke);
  border-radius: var(--radius);
}

.segmented-control-fill {
  display: flex;
}

.segmented-control-inline {
  display: inline-flex;
  width: min-content;
}

.segmented-control-highlight {
  position: absolute;
  top: 3px;
  bottom: 3px;
  background: var(--surface);
  border-radius: calc(var(--radius) - 3px);
  box-shadow: var(--shadow-md);
  outline: 1px solid var(--surface-stroke);
  pointer-events: none;
  transition: 300ms var(--swift-out);
  transition-property: left, width;
}

.segmented-control-item {
  position: relative;
  display: flex;
  align-items: center;
  flex: 1 1 0;
  justify-content: center;
  background: none;
  border: 0;
  border-radius: var(--radius-full);
  color: var(--foreground);
  cursor: pointer;
  font-weight: 500;
  text-align: center;
  transition: color 300ms var(--swift-out);
  white-space: nowrap;
}
@media (hover: hover) {
  .segmented-control-item:hover {
    color: var(--foreground-prominent);
  }
}
.segmented-control-item {
  outline: 2px solid rgb(from var(--primary-600) r g b/0);
  outline-offset: 0;
}
.segmented-control-item:focus-visible {
  outline-color: var(--primary-600);
  outline-offset: 3px;
}
.segmented-control-item.is-active {
  color: var(--foreground-prominent);
  cursor: default;
}
.segmented-control-item.is-small {
  height: 30px;
  padding: 0 12px;
  gap: 9px;
}
.segmented-control-item.is-medium {
  height: 36px;
  padding: 0 15px;
  gap: 9px;
}
.segmented-control-item.is-large {
  height: 48px;
  padding: 0 21px;
  gap: 12px;
}
.segmented-control-item:disabled {
  opacity: 0.5;
  pointer-events: none;
}
.segmented-control-item > * {
  position: relative;
  z-index: 1;
}
.segmented-control-item + .segmented-control-item::before {
  content: "";
  position: absolute;
  top: 50%;
  left: -2px;
  height: 15px;
  width: 2px;
  background: var(--gray-100);
  border-radius: 1px;
  transition: opacity 300ms var(--swift-out);
  translate: 0 -50%;
}
.segmented-control-item.is-active::before, .segmented-control-item.is-active + .segmented-control-item::before {
  opacity: 0;
}.skeleton {
  position: relative;
  display: block;
  height: 1em;
  width: 100%;
  background: var(--gray-100);
  border-radius: var(--radius);
  overflow: hidden;
}
.skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 0%, var(--gray-50) 50%, transparent 100%);
  translate: -100% 0;
  animation: skeleton-shimmer 1.6s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .skeleton {
    animation: skeleton-pulse 1.6s ease-in-out infinite;
  }
  .skeleton::after {
    display: none;
  }
}

.skeleton.is-text {
  height: 1em;
  margin-block: calc((1lh - 1em) / 2);
  border-radius: var(--radius-half);
  vertical-align: middle;
}

.skeleton.is-circle {
  height: 40px;
  width: 40px;
  flex-shrink: 0;
  border-radius: 50%;
}

.skeleton.is-rectangle {
  height: 120px;
  border-radius: 0;
}

.skeleton.is-rounded {
  height: 120px;
  border-radius: calc(var(--radius) * 2);
}

@keyframes skeleton-shimmer {
  from {
    translate: -100% 0;
  }
  to {
    translate: 100% 0;
  }
}
@keyframes skeleton-pulse {
  50% {
    opacity: 0.5;
  }
}.split-view {
  display: grid;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.split-view-horizontal {
  grid-auto-flow: column;
}

.split-view-vertical {
  grid-auto-flow: row;
}

.split-view-dragging {
  user-select: none;
}
.split-view-dragging * {
  pointer-events: none;
}

.split-view-pane {
  min-width: 0;
  min-height: 0;
  overflow: auto;
}

.split-view-handle {
  appearance: none;
  position: relative;
  display: block;
  touch-action: none;
  border: 0;
  margin: 0;
  padding: 0;
  background: transparent;
  cursor: col-resize;
}
.split-view-handle::before {
  position: absolute;
  top: 0;
  left: calc(50% - 1px);
  height: 100%;
  width: 2px;
  content: "";
  background: var(--surface-stroke);
  transition: background 0.15s var(--swift-out);
}
.split-view-handle:focus-visible::before {
  background: var(--primary-500);
}
@media (hover: hover) {
  .split-view-handle:hover::before {
    background: var(--primary-500);
  }
}
.split-view-handle:focus-visible {
  outline: none;
}

.split-view-handle-vertical {
  cursor: row-resize;
}
.split-view-handle-vertical::before {
  top: calc(50% - 1px);
  left: 0;
  height: 2px;
  width: 100%;
}.stepper-step {
  position: relative;
}

.stepper-steps {
  position: relative;
  display: flex;
  align-items: center;
  flex-grow: 1;
  justify-content: space-between;
  background: inherit;
  z-index: 0;
}
.stepper-steps::before, .stepper-steps::after {
  --margin: 15px;
  --max: calc(100% - var(--margin) * 2);
  position: absolute;
  display: block;
  top: calc(50% - 2px);
  left: 0;
  margin-left: var(--margin);
  margin-right: var(--margin);
  height: 4px;
  content: "";
  z-index: -1;
}
.stepper-steps::before {
  width: var(--max);
  background: var(--gray-100);
}
.stepper-steps::after {
  width: calc(min(1, var(--progress)) * var(--max));
  background: var(--primary-600);
  transition: width 300ms var(--swift-out);
}

.stepper-steps-item {
  font-size: var(--font-size-small);
  line-height: var(--line-height-small);
  position: relative;
  display: flex;
  height: 33px;
  width: 33px;
  align-items: center;
  justify-content: center;
  background: var(--gray-100);
  border: 0;
  border-radius: var(--radius-full);
  color: var(--foreground);
  cursor: default;
  font-weight: 700;
  outline: 6px solid transparent;
  outline-offset: -2px;
  transition: 300ms var(--swift-out);
  transition-property: background, border, color, outline;
}
.stepper-steps-item .icon {
  overflow: visible;
  scale: 0.8;
}
.stepper-steps-item .icon :is(path) {
  stroke: currentColor;
  stroke-width: 54px;
}

.stepper-steps-item-complete {
  background: var(--primary-600);
  border-color: var(--primary-600);
  color: var(--primary-25);
}

.stepper-steps-item-current {
  background: var(--gray-100);
  color: var(--foreground-prominent);
  outline-color: var(--primary-600);
  outline-width: 2px;
  transition-delay: 75ms;
}

.stepper-steps-item-idle {
  outline-color: var(--gray-25);
}.tab {
  position: relative;
  display: flex;
  flex-flow: column;
  flex-grow: 1;
  gap: 18px;
}

.base-tab-bar {
  position: relative;
  z-index: 0;
}

.tab-bar-default {
  --tab-padding: 12px;
  box-shadow: inset 0 -2px var(--surface-stroke);
}

.tab-bar-pills {
  padding: 3px;
  border-radius: var(--radius);
}

.tab-bar-arrow {
  position: absolute;
  display: flex;
  top: 2px;
  height: calc(100% - 6px);
  width: 30px;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  border-radius: var(--radius);
  color: var(--foreground);
  cursor: pointer;
  outline: 0;
  transition: background var(--transition-default);
  z-index: 1;
}
@media (hover: hover) {
  .tab-bar-arrow:hover {
    background: var(--surface-stroke);
  }
}

.tab-bar-arrow-start {
  left: 3px;
}

.tab-bar-arrow-end {
  right: 3px;
}

.base-tab-bar-tabs {
  position: relative;
  display: flex;
  align-items: center;
  overflow: auto;
  scrollbar-width: none;
}

.tab-bar-tabs-default {
  --mask-start: 0%;
  --mask-end: 100%;
  --mask: linear-gradient(to right, transparent, black var(--mask-start), black, black var(--mask-end), transparent);
  margin-left: -3px;
  margin-right: -3px;
  padding-left: 3px;
  padding-right: 3px;
  gap: 27px;
  -webkit-mask-image: var(--mask);
  mask-image: var(--mask);
}
.tab-bar-tabs-default.is-start-masked {
  --mask-start: 60px;
}
.tab-bar-tabs-default.is-end-masked {
  --mask-end: calc(100% - 60px);
}

.tab-bar-tabs-pills {
  gap: 0;
}

.base-tab-bar-item {
  font-size: var(--font-size-default);
  line-height: var(--line-height-default);
  display: inline-flex;
  align-items: center;
  background: unset;
  border: 0;
  color: var(--foreground);
  contain: layout;
  cursor: pointer;
  font-weight: 500;
  outline: 0;
  white-space: nowrap;
}
.base-tab-bar-item::before {
  position: absolute;
  inset: 0;
  content: "";
  pointer-events: none;
  transition: var(--transition-default) outline-color, outline-offset;
}
.base-tab-bar-item::before {
  outline: 2px solid rgb(from var(--primary-600) r g b/0);
  outline-offset: 0;
}
.base-tab-bar-item:focus-visible::before {
  outline-color: var(--primary-600);
  outline-offset: -2px;
}
.base-tab-bar-item::before {
  outline-offset: -2px;
}
.base-tab-bar-item:disabled, .base-tab-bar-item[aria-disabled=true] {
  box-shadow: none;
  opacity: 0.5;
  pointer-events: none;
}

.tab-bar-item-default {
  padding: var(--tab-padding) 0;
  gap: 9px;
  border-bottom: 2px solid transparent;
  transition: var(--transition-default);
  transition-property: border-color, color;
}
.tab-bar-item-default::before {
  border-radius: var(--radius);
}
@media (hover: hover) {
  .tab-bar-item-default:hover {
    border-color: var(--foreground);
  }
}

.tab-bar-item-default-active {
  color: var(--foreground-prominent);
}

.tab-bar-item-pills {
  position: relative;
  height: 36px;
  padding: 0 12px;
  gap: 6px;
  border-radius: calc(var(--radius) - 2px);
  transition: color 300ms var(--swift-out);
  z-index: 1;
}
.tab-bar-item-pills::before {
  border-radius: calc(var(--radius) - 2px);
}
@media (hover: hover) {
  .tab-bar-item-pills:hover {
    color: var(--foreground-prominent);
  }
}

.tab-bar-item-pills-active {
  color: var(--foreground-prominent);
  cursor: default;
}

.base-tab-bar-highlight {
  position: absolute;
  pointer-events: none;
  transition: 300ms var(--swift-out);
  transition-property: left, width;
}

.tab-bar-highlight-default {
  bottom: 0;
  height: 2px;
  background: var(--primary-600);
  z-index: 1;
}

.tab-bar-highlight-pills {
  top: 0;
  bottom: 0;
  background: var(--gray-100);
  border-radius: calc(var(--radius) - 2px);
  z-index: 0;
}

.tabs {
  display: flex;
  flex-flow: column;
  flex-grow: 1;
  overflow: visible;
}

.tabs-bar {
  margin-bottom: 18px;
}

.base-pane-structure > .tab-bar-default,
.base-pane-structure > .tabs > .tab-bar-default,
.base-pane-structure > .form > .tab-bar-default,
.base-pane-structure > .form > .tabs > .tab-bar-default {
  --tab-padding: 18px;
  padding-left: 18px;
  padding-right: 18px;
  background: var(--gray-50);
}
.base-pane-structure > .tab-bar-default:first-child,
.base-pane-structure > .tabs > .tab-bar-default:first-child,
.base-pane-structure > .form > .tab-bar-default:first-child,
.base-pane-structure > .form > .tabs > .tab-bar-default:first-child {
  border-radius: var(--radius) var(--radius) 0 0;
}
.base-pane-structure > .tab-bar-default:not(:first-child),
.base-pane-structure > .tabs > .tab-bar-default:not(:first-child),
.base-pane-structure > .form > .tab-bar-default:not(:first-child),
.base-pane-structure > .form > .tabs > .tab-bar-default:not(:first-child) {
  border-top: 1px solid var(--surface-stroke);
}

.base-pane-structure > .pane-header + .tab-bar-default:not(:first-child),
.base-pane-structure > .pane-header + .tabs > .tab-bar-default:not(:first-child),
.base-pane-structure > .form > .pane-header + .tab-bar-default:not(:first-child),
.base-pane-structure > .form > .pane-header + .tabs > .tab-bar-default:not(:first-child) {
  border-top: 0;
}

.pane-header:has(+ .tab-bar-default),
.pane-header:has(+ .tabs > .tab-bar-default) {
  background: var(--gray-50);
}

.base-pane-structure > .tab-bar-pills,
.base-pane-structure > .tabs > .tab-bar-pills,
.base-pane-structure > .form > .tab-bar-pills,
.base-pane-structure > .form > .tabs > .tab-bar-pills {
  padding-left: 6px;
  padding-right: 6px;
}
.base-pane-structure > .tab-bar-pills:first-child,
.base-pane-structure > .tabs > .tab-bar-pills:first-child,
.base-pane-structure > .form > .tab-bar-pills:first-child,
.base-pane-structure > .form > .tabs > .tab-bar-pills:first-child {
  padding-top: 6px;
}

.base-pane-structure > .tabs > .tabs-bar {
  margin-bottom: 0;
}.text {
  color: var(--foreground);
}

.text-size-small {
  font-size: var(--font-size-xsmall);
  line-height: var(--line-height-xsmall);
}

.text-size-medium {
  font-size: var(--font-size-default);
  line-height: var(--line-height-default);
}

.text-size-large {
  font-size: var(--font-size-xlarge);
  line-height: var(--line-height-xlarge);
}

.text-size-display {
  font-size: 27px;
  line-height: 33px;
}

.text-color-muted {
  color: var(--gray-500);
}

.text-color-prominent {
  color: var(--foreground-prominent);
}

.text-color-gray {
  color: var(--gray-600);
}

.text-color-primary {
  color: var(--primary-600);
}

.text-color-danger {
  color: var(--danger-600);
}

.text-color-info {
  color: var(--info-600);
}

.text-color-success {
  color: var(--success-600);
}

.text-color-warning {
  color: var(--warning-600);
}

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

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

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

.text-tabular {
  font-variant-numeric: tabular-nums;
}

.text-truncate {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}.timeline {
  position: relative;
  display: flex;
  flex-flow: column;
  gap: 15px;
}

.timeline-line {
  position: absolute;
  inset: 0;
  height: 100%;
  width: 100%;
  fill: none;
  stroke: var(--gray-200);
  stroke-width: 2;
  stroke-linecap: round;
  pointer-events: none;
}

.timeline-item {
  position: relative;
  display: grid;
  gap: 21px;
  grid-template-columns: 42px minmax(0, 1fr);
}

.timeline-item-icon,
.timeline-item-photo {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
}

.timeline-item-icon {
  margin: 3px;
  height: 36px;
  width: 36px;
}

.timeline-item-dot {
  grid-column: 1;
  justify-self: center;
  margin-top: 15px;
  height: 12px;
  width: 12px;
  background: var(--gray-300);
  border-radius: var(--radius-full);
}

.timeline-item-photo {
  height: 42px;
  width: 42px;
}

.timeline-item-photo-icon {
  position: absolute;
  display: flex;
  right: -9px;
  bottom: -9px;
  height: 30px;
  width: 30px;
  align-items: center;
  justify-content: center;
  background: var(--gray-25);
  border-radius: var(--radius-full);
}

.timeline-item-photo-image {
  position: absolute;
  inset: 0;
  height: 100%;
  width: 100%;
  border-radius: inherit;
  object-fit: cover;
  object-position: center;
}

.timeline-item-body {
  position: relative;
  display: flex;
  padding-top: 9px;
  padding-bottom: 9px;
  align-items: flex-start;
  align-self: center;
  flex-flow: column;
  gap: 15px;
  grid-column: 2;
}

.timeline-item-header {
  display: flex;
  margin-bottom: -9px;
  flex-flow: column;
}
.timeline-item-header :is(strong) {
  color: var(--foreground-prominent);
}
.timeline-item-header :is(span) {
  font-size: var(--font-size-small);
  line-height: var(--line-height-small);
  color: var(--foreground-secondary);
}

.timeline-item-gray {
}
.timeline-item-gray .timeline-item-icon,
.timeline-item-gray .timeline-item-photo-icon {
  color: var(--foreground-prominent);
}
.timeline-item-gray .timeline-item-icon {
  background: var(--gray-100);
}
.timeline-item-gray .timeline-item-dot {
  background: var(--gray-400);
}

.timeline-item-primary {
}
.timeline-item-primary .timeline-item-icon,
.timeline-item-primary .timeline-item-photo-icon {
  color: var(--primary-600);
}
.timeline-item-primary .timeline-item-icon {
  background: var(--primary-100);
}
.timeline-item-primary .timeline-item-dot {
  background: var(--primary-600);
}

.timeline-item-danger {
}
.timeline-item-danger .timeline-item-icon,
.timeline-item-danger .timeline-item-photo-icon {
  color: var(--danger-600);
}
.timeline-item-danger .timeline-item-icon {
  background: var(--danger-100);
}
.timeline-item-danger .timeline-item-dot {
  background: var(--danger-600);
}

.timeline-item-info {
}
.timeline-item-info .timeline-item-icon,
.timeline-item-info .timeline-item-photo-icon {
  color: var(--info-600);
}
.timeline-item-info .timeline-item-icon {
  background: var(--info-100);
}
.timeline-item-info .timeline-item-dot {
  background: var(--info-600);
}

.timeline-item-success {
}
.timeline-item-success .timeline-item-icon,
.timeline-item-success .timeline-item-photo-icon {
  color: var(--success-600);
}
.timeline-item-success .timeline-item-icon {
  background: var(--success-100);
}
.timeline-item-success .timeline-item-dot {
  background: var(--success-600);
}

.timeline-item-warning {
}
.timeline-item-warning .timeline-item-icon,
.timeline-item-warning .timeline-item-photo-icon {
  color: var(--warning-600);
}
.timeline-item-warning .timeline-item-icon {
  background: var(--warning-100);
}
.timeline-item-warning .timeline-item-dot {
  background: var(--warning-600);
}.toolbar {
  padding: 6px;
  contain: paint;
}
.toolbar .separator-vertical {
  margin-top: 6px;
  margin-bottom: 6px;
  align-self: stretch;
}

.toolbar-flat {
  position: relative;
  align-self: flex-start;
  box-shadow: var(--shadow-sm);
}

.toolbar-floating {
  position: absolute;
  box-shadow: var(--shadow-md);
  z-index: 1;
}
.toolbar-floating.is-free {
  top: 50%;
  left: 50%;
  translate: -50% -50%;
}
.toolbar-floating.is-top-end, .toolbar-floating.is-top-start {
  top: 0;
  translate: 0 -50%;
}
.toolbar-floating.is-bottom-end, .toolbar-floating.is-bottom-start {
  bottom: 0;
  translate: 0 50%;
}
.toolbar-floating.is-top-end, .toolbar-floating.is-bottom-end {
  right: 18px;
}
.toolbar-floating.is-top-start, .toolbar-floating.is-bottom-start {
  left: 18px;
}

.base-pane-structure > .toolbar-flat {
  padding: 12px 15px;
  align-self: unset;
  background: var(--gray-50);
  border: 1px solid var(--surface-stroke);
  border-left: 0;
  border-right: 0;
  border-radius: 0;
  box-shadow: none;
}
.base-pane-structure > .toolbar-flat:first-child {
  border-top: 0;
  border-top-left-radius: var(--radius);
  border-top-right-radius: var(--radius);
}
.base-pane-structure > .toolbar-flat:last-child {
  border-bottom: 0;
  border-bottom-left-radius: var(--radius);
  border-bottom-right-radius: var(--radius);
}
.base-pane-structure > .toolbar-flat .separator {
  background: var(--surface-stroke);
}.tour {
  position: fixed;
  inset: 0;
  pointer-events: auto;
  z-index: 9999;
}

.tour-spotlight {
  position: fixed;
  top: 0;
  left: 0;
  width: var(--w);
  height: var(--h);
  border-radius: 8px;
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.55);
  pointer-events: none;
  translate: var(--x) var(--y);
  transition: translate 0.25s var(--swift-out), width 0.25s var(--swift-out), height 0.25s var(--swift-out);
}

.tour-popover {
  position: fixed;
  top: 0;
  left: 0;
  width: 321px;
  max-width: calc(100vw - 24px);
  translate: var(--x) var(--y);
  z-index: 1;
}
.tour-popover.is-stepping {
  transition: translate 0.25s var(--swift-out);
}

.tour-pane {
  overflow: hidden;
}

.tour-body-viewport {
  position: relative;
  overflow: hidden;
  transition: height 0.25s var(--swift-out);
}

.tour-body {
  display: flex;
  padding: 15px 18px;
  flex-flow: column;
  gap: 6px;
  transition: opacity 0.15s var(--swift-out);
}
.tour-body.v-leave-active {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}
.tour-body.v-enter-from, .tour-body.v-leave-to {
  opacity: 0;
}

.tour-title {
  font-size: var(--font-size-default);
  line-height: var(--line-height-default);
  color: var(--foreground-prominent);
  font-weight: 600;
}

.tour-content {
  font-size: var(--font-size-small);
  line-height: var(--line-height-small);
  color: var(--foreground);
}

.tour-footer {
  display: flex;
  padding: 12px 18px;
  gap: 6px;
  align-items: center;
  border-top: 1px solid var(--surface-stroke);
}

.tour-progress {
  font-size: var(--font-size-xsmall);
  line-height: var(--line-height-xsmall);
  color: var(--foreground-secondary);
}

.tour-skip {
  font-size: var(--font-size-xsmall);
  line-height: var(--line-height-xsmall);
  margin-right: 12px;
  padding: 0;
  cursor: pointer;
  transition: color 0.15s var(--swift-out);
  color: var(--foreground-secondary);
  border: 0;
  background: none;
}
@media (hover: hover) {
  .tour-skip:hover {
    color: var(--foreground);
  }
}
.tour-skip {
  outline: 2px solid rgb(from var(--primary-600) r g b/0);
  outline-offset: 0;
}
.tour-skip:focus-visible {
  outline-color: var(--primary-600);
  outline-offset: 2px;
}.tree-view {
  display: flex;
  flex-flow: column;
  outline: 0;
}

.tree-node {
  cursor: pointer;
}
@media (hover: hover) {
  .tree-node:hover {
    background: var(--gray-50);
  }
}
.tree-node:active {
  background: var(--gray-100);
}
.tree-node.is-highlighted {
  background: var(--primary-100);
  color: var(--primary-600);
}
@media (hover: hover) {
  .tree-node.is-highlighted:hover {
    background: var(--primary-100);
  }
}
.tree-node.is-disabled {
  color: var(--foreground-secondary);
  cursor: default;
}
@media (hover: hover) {
  .tree-node.is-disabled:hover {
    background: transparent;
  }
}
.tree-node.is-disabled:active {
  background: transparent;
}/*$vite$:1*/