*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  text-underline-offset: 3px;
  background-size: cover;
  border: none;
  pointer-events: none;
  touch-action: var(---touch-action, none);
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

button,
[role="button"] {
  pointer-events: auto;
}

*::-moz-focus-inner {
  border: none;
}

*:focus {
  outline: none;
}

*:focus-visible {
  outline: none;
}

*::-webkit-scrollbar {
  width: var(---theme-scrollbar-size, 8px);
  height: var(---theme-scrollbar-size, 8px);
}

*::-webkit-scrollbar-thumb:hover {
  background-color: var(
    ---theme-color-scrollbar-thumb-hover,
    hsl(0 0% 0% / 50%)
  );
}

*::-webkit-scrollbar-thumb {
  background-color: var(---theme-color-scrollbar-thumb, hsl(0 0% 0% / 25%));
  border-radius: 9999px;
}

*::-webkit-scrollbar-track {
  background-color: var(---theme-color-scrollbar-track, hsl(0 0% 0% / 15%));
}

*::-webkit-scrollbar-button {
  display: none;
}

*::-webkit-scrollbar-corner {
  display: none;
}

/* scrollbar-color and scrollbar-width is only supported in Firefox */
* {
  scrollbar-width: var(---theme-scrollbar-thickness, thin);
  scrollbar-color: var(---theme-color-scrollbar-thumb, hsl(0 0% 0% / 25%))
    var(---theme-color-scrollbar-track, hsl(0 0% 0% / 15%));
}

[hidden] {
  display: none !important;
}


* {
  flex-direction: column;
  flex-wrap: nowrap;
  flex-shrink: 0;
  min-width: 0;
  max-width: 100%;
}

[hidden] {
  display: none !important;
}

slot {
  border-radius: inherit;
  color: inherit;
}

* slot {
  border-radius: inherit;
}


:root {
  ---theme-easing-linear: linear;
  ---theme-easing-ease: ease;
  ---theme-easing-ease-in: ease-in;
  ---theme-easing-ease-out: ease-out;
  ---theme-easing-ease-in-out: ease-in-out;
  ---theme-easing-ease-elastic-1: cubic-bezier(0.5, 0.75, 0.75, 1.25);
  ---theme-easing-ease-elastic-2: cubic-bezier(0.5, 1, 0.75, 1.25);
  ---theme-easing-ease-elastic-3: cubic-bezier(0.5, 1.25, 0.75, 1.25);
  ---theme-easing-ease-elastic-4: cubic-bezier(0.5, 1.5, 0.75, 1.25);
  ---theme-easing-ease-elastic-5: cubic-bezier(0.5, 1.75, 0.75, 1.25);
  ---theme-easing-ease-squish-1: cubic-bezier(0.5, -0.1, 0.1, 1.5);
  ---theme-easing-ease-squish-2: cubic-bezier(0.5, -0.3, 0.1, 1.5);
  ---theme-easing-ease-squish-3: cubic-bezier(0.5, -0.5, 0.1, 1.5);
  ---theme-easing-ease-squish-4: cubic-bezier(0.5, -0.7, 0.1, 1.5);
  ---theme-easing-ease-squish-5: cubic-bezier(0.5, -0.9, 0.1, 1.5);
}


@keyframes spin {
  to {
    transform: rotate(1turn);
  }
}

@keyframes ping {
  0% {
    box-shadow: 0 0 0 0 var(---color);
  }
  70% {
    box-shadow: 0 0 0 0.5rem transparent;
  }
  100% {
    box-shadow: 0 0 0 0 transparent;
  }
}

@keyframes sheen {
  0% {
    background-position: 200% 0;
  }
  to {
    background-position: -200% 0;
  }
}

@keyframes blink {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

@keyframes float {
  50% {
    transform: translateY(-25%);
  }
}

@keyframes bounce {
  0%,
  100% {
    transform: translateY(-25%);
    animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
  }
  50% {
    transform: translateY(0);
    animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
  }
}

@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fade-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

@keyframes scale-up {
  to {
    transform: scale(1);
  }
}

@keyframes scale-down {
  to {
    transform: scale(0.8);
  }
}

@keyframes slide-out-up {
  to {
    transform: translateY(-100%);
  }
}

@keyframes slide-out-down {
  to {
    transform: translateY(100%);
  }
}

@keyframes slide-out-right {
  to {
    transform: translateX(100%);
  }
}

@keyframes slide-out-left {
  to {
    transform: translateX(-100%);
  }
}

@keyframes slide-in-up {
  from {
    transform: translateY(100%);
  }
}

@keyframes slide-in-down {
  from {
    transform: translateY(-100%);
  }
}

@keyframes slide-in-right {
  from {
    transform: translateX(-100%);
  }
}

@keyframes slide-in-left {
  from {
    transform: translateX(100%);
  }
}

@keyframes exit-fade {
  to {
    opacity: 0;
  }
}

@keyframes exit-zoom {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(0.99);
  }
}

@keyframes exit-right {
  to {
    transform: translateX(32px);
  }
}

@keyframes exit-left {
  to {
    transform: translateX(-32px);
  }
}

@keyframes exit-up {
  to {
    transform: translateY(-32px);
  }
}

@keyframes exit-down {
  to {
    transform: translateY(32px);
  }
}

@keyframes exit-out {
  to {
    transform: scale(0.99);
  }
}

@keyframes exit-in {
  to {
    transform: scale(1.1);
  }
}

@keyframes enter-fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes enter-zoom {
  from {
    transform: scale(0.99);
  }
  to {
    transform: scale(1);
  }
}

@keyframes enter-right {
  from {
    transform: translateX(-32px);
  }
  to {
    transform: translateX(0);
  }
}

@keyframes enter-left {
  from {
    transform: translateX(32px);
  }
  to {
    transform: translateX(0);
  }
}

@keyframes enter-up {
  from {
    transform: translateY(32px);
  }
  to {
    transform: translateY(0);
  }
}

@keyframes enter-down {
  from {
    transform: translateY(-32px);
  }
  to {
    transform: translateY(0);
  }
}

@keyframes enter-out {
  from {
    transform: scale(1.1);
  }
  to {
    transform: scale(1);
  }
}

@keyframes enter-in {
  from {
    transform: scale(0.99);
  }
  to {
    transform: scale(1);
  }
}

@keyframes shake-x {
  0%,
  100% {
    transform: translateX(0%);
  }
  20% {
    transform: translateX(-5%);
  }
  40% {
    transform: translateX(5%);
  }
  60% {
    transform: translateX(-5%);
  }
  80% {
    transform: translateX(5%);
  }
}

@keyframes shake-y {
  0%,
  100% {
    transform: translateY(0%);
  }
  20% {
    transform: translateY(-5%);
  }
  40% {
    transform: translateY(5%);
  }
  60% {
    transform: translateY(-5%);
  }
  80% {
    transform: translateY(5%);
  }
}

@keyframes close {
  from {
    opacity: 1;
    transform: scale(1);
  }
  to {
    opacity: 0;
    transform: scale(0.8);
  }
}

@keyframes open {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  30% {
    opacity: 1;
  }
  100% {
    transform: scale(1);
  }
}

@keyframes pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.02);
  }
  100% {
    transform: scale(1);
  }
}


:root {
  ---theme-animation-spin: spin 1s linear infinite;
  ---theme-animation-ping: ping 1.5s linear infinite;
  ---theme-animation-sheen: sheen 8s ease-in-out infinite;
  ---theme-animation-blink: blink 1s cubic-bezier(0, 0, 0.3, 1) infinite;
  ---theme-animation-float: float 3s cubic-bezier(0.5, 0, 0.5, 1) infinite;
  ---theme-animation-bounce: bounce 1s linear infinite;
  ---theme-animation-shake-x: shake-x 0.75s cubic-bezier(0, 0, 0, 1);
  ---theme-animation-shake-y: shake-y 0.75s cubic-bezier(0, 0, 0, 1);
  ---theme-animation-fade-in: fade-in 150ms linear;
  ---theme-animation-fade-out: fade-out 150ms linear;
  ---theme-animation-scale-up: scale-up 100ms ease-out;
  ---theme-animation-scale-down: scale-down 100ms ease-out;
  ---theme-animation-slide-out-up: slide-out-up 150ms ease-out;
  ---theme-animation-slide-out-down: slide-out-down 150ms ease-out;
  ---theme-animation-slide-out-left: slide-out-left 150ms ease-out;
  ---theme-animation-slide-out-right: slide-out-right 150ms ease-out;
  ---theme-animation-slide-in-up: slide-in-up 100ms ease-out;
  ---theme-animation-slide-in-down: slide-in-down 100ms ease-out;
  ---theme-animation-slide-in-left: slide-in-left 100ms ease-out;
  ---theme-animation-slide-in-right: slide-in-right 100ms ease-out;
  ---theme-animation-exit-fade: exit-fade 75ms linear;
  ---theme-animation-exit-zoom: exit-zoom 150ms cubic-bezier(0.4, 0, 0.2, 1);
  ---theme-animation-exit-right: exit-right 150ms cubic-bezier(0.4, 0, 0.2, 1);
  ---theme-animation-exit-left: exit-left 150ms cubic-bezier(0.4, 0, 0.2, 1);
  ---theme-animation-exit-up: exit-up 150ms cubic-bezier(0.4, 0, 0.2, 1);
  ---theme-animation-exit-down: exit-down 150ms cubic-bezier(0.4, 0, 0.2, 1);
  ---theme-animation-exit-out: exit-out 150ms cubic-bezier(0.4, 0, 0.2, 1);
  ---theme-animation-exit-in: exit-in 150ms cubic-bezier(0.4, 0, 0.2, 1);
  ---theme-animation-enter-fade: enter-fade 75ms linear;
  ---theme-animation-enter-zoom: enter-zoom 150ms cubic-bezier(0.4, 0, 0.2, 1);
  ---theme-animation-enter-right: enter-right 150ms -75ms cubic-bezier(0.4, 0, 0.2, 1);
  ---theme-animation-enter-left: enter-left 150ms -75ms cubic-bezier(0.4, 0, 0.2, 1);
  ---theme-animation-enter-up: enter-up 150ms -75ms cubic-bezier(0.4, 0, 0.2, 1);
  ---theme-animation-enter-down: enter-down 150ms -75ms cubic-bezier(0.4, 0, 0.2, 1);
  ---theme-animation-enter-out: enter-out 150ms -75ms cubic-bezier(0.4, 0, 0.2, 1);
  ---theme-animation-enter-in: enter-in 150ms -75ms cubic-bezier(0.4, 0, 0.2, 1);
  ---theme-animation-open: open 100ms ease-out;
  ---theme-animation-close: close 75ms linear;
  ---theme-animation-pulse: pulse 150ms ease-in-out;
}


.theme-light {
  ---theme-gradient-gloss-transparent: hsl(0 0% 0% / 0%);
  ---theme-gradient-gloss-shine: hsl(0 0% 0% / 5%);
}

.theme-dark {
  ---theme-gradient-gloss-transparent: hsl(0 0% 100% / 0%);
  ---theme-gradient-gloss-shine: hsl(0 0% 100% / 5%);
}

:root {
  ---theme-gradient-gloss: conic-gradient(
    from 25deg at 35% 75%,
    var(---theme-gradient-gloss-transparent),
    85%,
    var(---theme-gradient-gloss-shine)
  );
}


:root {
  ---theme-pattern-brick: url("data:image/svg+xml,<svg width='32' height='32' xmlns='http://www.w3.org/2000/svg'><path fill='none' stroke='black' stroke-linecap='square' d='M 0 24 l 32 0 l 0 16 l -32 0 l 0 -16 z M 16 8 l 32 0 l 0 16 l -32 0 M -16 8 l 32 0 l 0 16 l -32 0 l 0 -16 z M 0 -8 l 32 0 l 0 16 l -32 0 l 0 -16 z'/></svg>");
  ---theme-pattern-bubbles: url("data:image/svg+xml,<svg width='32' height='32' xmlns='http://www.w3.org/2000/svg'><path fill='none' stroke='black' stroke-linecap='square' d='M 32 38 a 1 1 0 0 0 0 -12 a 1 1 0 0 0 0 12 z M 32 6 a 1 1 0 0 0 0 -12 a 1 1 0 0 0 0 12 z M 0 38 a 1 1 0 0 0 0 -12 a 1 1 0 0 0 0 12 z M 0 6 a 1 1 0 0 0 0 -12 a 1 1 0 0 0 0 12 z'/><path fill='none' stroke='black' stroke-linecap='square' d='M 16 22 a 1 1 0 0 0 0 -12 a 1 1 0 0 0 0 12 z'/><path fill='none' stroke='black' stroke-linecap='square' d='M 0 19 a 1 1 0 0 0 0 -6 a 1 1 0 0 0 0 6 z M 32 19 a 1 1 0 0 0 0 -6 a 1 1 0 0 0 0 6 z'/><path fill='none' stroke='black' stroke-linecap='square' d='M 16 3 a 1 1 0 0 0 0 -6 a 1 1 0 0 0 0 6 z M 16 35 a 1 1 0 0 0 0 -6 a 1 1 0 0 0 0 6 z'/></svg>");
  ---theme-pattern-chainlink: url("data:image/svg+xml,<svg width='32' height='32' xmlns='http://www.w3.org/2000/svg'><path fill='none' stroke='black' stroke-linecap='square' d=' M 32 -10 L 42 0 L 32 10 L 22 0 z M 0 -10 L 10 0 L 0 10 L -10 0 z m 0 32 l 10 10 L 0 42 l -10 -10 z m 32 0 l 10 10 l -10 10 l -10 -10 z M 16 -10 L 26 0 L 16 10 L 6 0 z m 0 32 l 10 10 l -10 10 L 6 32 z M 32 6 l 10 10 l -10 10 l -10 -10 z M 0 6 l 10 10 L 0 26 l -10 -10 z m 16 0 l 10 10 l -10 10 L 6 16 z'/></svg>");
  ---theme-pattern-chevron: url("data:image/svg+xml,<svg width='32' height='32' xmlns='http://www.w3.org/2000/svg'><path fill='none' stroke='black' stroke-linecap='square' d='M 16 -16 l 16 16 l 0 16 l -16 -16 l 0 -16 z M 32 0 l -16 -16 l 0 16 l 16 16 l 0 -16 z M 32 16 l -16 -16 l 0 16 l 16 16 l 0 -16 z M 32 32 l -16 -16 l 0 16 l 16 16 l 0 -16 z M 0 32 l 16 -16 l 0 16 l -16 16 l 0 -16 z M 0 16 l 16 -16 l 0 16 l -16 16 l 0 -16 z M 0 0 l 16 -16 l 0 16 l -16 16 l 0 -16 Z'/></svg>");
  ---theme-pattern-circles: url("data:image/svg+xml,<svg width='32' height='32' xmlns='http://www.w3.org/2000/svg'><path fill='none' stroke='black' stroke-linecap='square' d='M 6 4 a 1 1 0 0 0 -4 0 a 1 1 0 0 0 4 0 z M 14 4 a 1 1 0 0 0 -4 0 a 1 1 0 0 0 4 0 z M 22 4 a 1 1 0 0 0 -4 0 a 1 1 0 0 0 4 0 z M 30 4 a 1 1 0 0 0 -4 0 a 1 1 0 0 0 4 0 z'/><path fill='none' stroke='black' stroke-linecap='square' d='M 6 12 a 1 1 0 0 0 -4 0 a 1 1 0 0 0 4 0 z M 14 12 a 1 1 0 0 0 -4 0 a 1 1 0 0 0 4 0 z M 22 12 a 1 1 0 0 0 -4 0 a 1 1 0 0 0 4 0 z M 30 12 a 1 1 0 0 0 -4 0 a 1 1 0 0 0 4 0 z'/><path fill='none' stroke='black' stroke-linecap='square' d='M 6 20 a 1 1 0 0 0 -4 0 a 1 1 0 0 0 4 0 z M 14 20 a 1 1 0 0 0 -4 0 a 1 1 0 0 0 4 0 z M 22 20 a 1 1 0 0 0 -4 0 a 1 1 0 0 0 4 0 z M 30 20 a 1 1 0 0 0 -4 0 a 1 1 0 0 0 4 0 z'/><path fill='none' stroke='black' stroke-linecap='square' d='M 6 28 a 1 1 0 0 0 -4 0 a 1 1 0 0 0 4 0 z M 14 28 a 1 1 0 0 0 -4 0 a 1 1 0 0 0 4 0 z M 22 28 a 1 1 0 0 0 -4 0 a 1 1 0 0 0 4 0 z M 30 28 a 1 1 0 0 0 -4 0 a 1 1 0 0 0 4 0 z'/></svg>");
  ---theme-pattern-crosses: url("data:image/svg+xml,<svg width='32' height='32' xmlns='http://www.w3.org/2000/svg'><path fill='none' stroke='black' stroke-linecap='square' d='M 40 16 h -6 M 30 16 h -6 M 32 24 v -6 M 32 14 v -6 M 8 16 h -6 M -2 16 h -6 M 0 24 v -6 M 0 14 v -6'/><path fill='none' stroke='black' stroke-linecap='square' d='M 15 -1 l -4 -4 M 17 1 l 4 4 M 17 -1 l 4 -4 M 15 1 l -4 4 M 15 31 l -4 -4 M 17 33 l 4 4 M 17 31 l 4 -4 M 15 33 l -4 4'/></svg>");
  ---theme-pattern-equals: url("data:image/svg+xml,<svg width='32' height='32' xmlns='http://www.w3.org/2000/svg'><path fill='none' stroke='black' stroke-linecap='square' d='M 12 19 l 8 0 M 12 15 l 8 0 M 28 2 l 8 0 M 28 30 l 8 0 M -4 30 l 8 0 M -4 2 l 8 0'/><path fill='none' stroke='black' stroke-linecap='square' d='M 14 -4 l 0 8 M 18 -4 l 0 8 M 30 12 l 0 8 M 14 28 l 0 8 M 18 28 l 0 8 M 2 12 l 0 8'/></svg>");
  ---theme-pattern-flowers: url("data:image/svg+xml,<svg width='32' height='32' xmlns='http://www.w3.org/2000/svg'><path fill='none' stroke='black' stroke-linecap='square' d='M 31 31 c 0 0 0 -3 -1 -4 c -2 -3 -4 -1 -4 -1 c 0 0 -2 2 1 4 c 1 1 4 1 4 1 z M 31 1 c 0 0 -3 0 -4 1 c -3 2 -1 4 -1 4 c 0 0 2 2 4 -1 c 1 -1 1 -4 1 -4 z M 5 30 c 3 -2 1 -4 1 -4 c 0 0 -2 -2 -4 1 c -1 1 -1 4 -1 4 c 0 0 3 0 4 -1 z M 6 6 c 0 0 2 -2 -1 -4 c -1 -1 -4 -1 -4 -1 c 0 0 0 3 1 4 c 2 3 4 1 4 1 z'/><path fill='none' stroke='black' stroke-linecap='square' d='M 24 16 c 0 0 -1 -2 -3 -2 c -2 0 -3 2 -3 2 c 0 0 1 2 3 2 c 2 0 3 -2 3 -2 z M 14 16 c 0 0 -1 -2 -3 -2 c -2 0 -3 2 -3 2 c 0 0 1 2 3 2 c 2 0 3 -2 3 -2 z M 18 11 c 0 -2 -2 -3 -2 -3 c 0 0 -2 1 -2 3 c 0 2 2 3 2 3 c 0 0 2 -1 2 -3 z M 14 21 c 0 2 2 3 2 3 c 0 0 2 -1 2 -3 c 0 -2 -2 -3 -2 -3 c 0 0 -2 1 -2 3 z'/></svg>");
  ---theme-pattern-grid: url("data:image/svg+xml,<svg width='32' height='32' xmlns='http://www.w3.org/2000/svg'><path fill='none' stroke='black' stroke-linecap='square' d='M 16 0 V 32 Z M 0 16 H 32 Z'/></svg>");
  ---theme-pattern-herringbone: url("data:image/svg+xml,<svg width='32' height='32' xmlns='http://www.w3.org/2000/svg'><path fill='none' stroke='black' stroke-linecap='square' d='M 0 0 h 8 v 16 H 0 z M 24 0 v 8 H 8 V 0 z M 8 8 h 8 v 16 H 8 z M 32 8 v 8 H 16 V 8 z M 16 16 h 8 v 16 H 16 z M 40 16 v 8 H 24 V 16 z M 24 24 h 8 v 16 H 24 z M 16 24 v 8 H 0 V 24 z M 8 16 v 8 h -16 V 16 z M 24 -8 h 8 v 16 H 24 z'/></svg>");
  ---theme-pattern-memphis: url("data:image/svg+xml,<svg width='32' height='32' xmlns='http://www.w3.org/2000/svg'><path fill='none' stroke='black' stroke-linecap='square' d='M -2 2 l 4 6 l 6 -4 M 15 14 l -6 3 l 3 6 M -4 17 l -2 7 l 7 2 M 30 2 l 4 6 l 6 -4 M 28 17 l -2 7 l 7 2'/><path fill='none' stroke='black' stroke-linecap='square' d='M 27 29 l 0 1 l 1 0 M 2 12 l -1 1 l 1 1 M 6 21 l -1 -1 l -1 1 M 17 25 l 0 1 l 1 0'/><path fill='none' stroke='black' stroke-linecap='square' d='M 27 13 l -1 -5 l -5 1 M 15 -2 l 1 5 l 5 -1 M 15 30 l 1 5 l 5 -1'/><path fill='none' stroke='black' stroke-linecap='square' d='M 4 29 l 3 1 l 1 -3 M 23 20 l -2 -2 l -2 2 M 12 11 l 2 -2 l -2 -2'/></svg>");
  ---theme-pattern-net: url("data:image/svg+xml,<svg width='32' height='32' xmlns='http://www.w3.org/2000/svg'><path fill='none' stroke='black' stroke-linecap='square' d='M -8 -4 l 16 8 l 16 -8 l 16 8 M -8 28 l 16 8 l 16 -8 l 16 8 M -8 12 l 16 8 l 16 -8 l 16 8 M -4 40 l 8 -16 l -8 -16 l 8 -16 M 28 40 l 8 -16 l -8 -16 l 8 -16 M 12 40 l 8 -16 l -8 -16 l 8 -16'/></svg>");
  ---theme-pattern-octagon: url("data:image/svg+xml,<svg width='32' height='32' xmlns='http://www.w3.org/2000/svg'><path fill='none' stroke='black' stroke-linecap='square' d='M 12 0 l 0 5 c -3 1 -6 4 -7 7 l -5 0 M 0 20 l 5 0 c 1 3 4 6 7 7 l 0 5 M 20 32 l 0 -5 c 3 -1 6 -4 7 -7 l 5 0 M 32 12 l -5 0 c -1 -3 -4 -6 -7 -7 l 0 -5 '/><path fill='none' stroke='black' stroke-linecap='square' d='M 4 0 a 1 1 0 0 0 -8 0 a 1 1 0 0 0 8 0 z M 36 0 a 1 1 0 0 0 -8 0 a 1 1 0 0 0 8 0 z M 4 32 a 1 1 0 0 0 -8 0 a 1 1 0 0 0 8 0 z M 36 32 a 1 1 0 0 0 -8 0 a 1 1 0 0 0 8 0 z'/><path fill='none' stroke='black' stroke-linecap='square' d='M 16 28 l 0 12 M 40 16 l -12 0 M 4 16 l -12 0 M 16 -8 l 0 12'/><path fill='none' stroke='black' stroke-linecap='square' d='M 16 11 l 5 5 l -5 5 l -5 -5 l 5 -5 z'/></svg>");
  ---theme-pattern-parquet: url("data:image/svg+xml,<svg width='32' height='32' xmlns='http://www.w3.org/2000/svg'><path fill='none' stroke='black' stroke-linecap='square' d='M 5.333 32 l 0 -16 M 10.666 16 l 0 16 M 16 32 l -16 0 l 0 -16 M 26.666 0 l 0 16 M 21.333 16 l 0 -16 M 16 0 l 16 0 l 0 16 M 16 21.333 l 16 0 M 32 26.666 l -16 0 M 16 16 l 16 0 l 0 16 l -16 0 l 0 -16 z M 0 5.333 l 16 0 M 16 10.666 l -16 0 M 0 0 l 16 0 l 0 16 l -16 0 l 0 -16 z'/></svg>");
  ---theme-pattern-scales: url("data:image/svg+xml,<svg width='32' height='32' xmlns='http://www.w3.org/2000/svg'><path fill='none' stroke='black' stroke-linecap='square' d='M -16 -16 a 16 16 90 0 0 -16 16 a 16 16 90 0 0 16 16 a 16 16 90 0 1 16 -16 a 16 16 90 0 0 -16 -16 z M 16 -16 a 16 16 90 0 0 -16 16 a 16 16 90 0 1 16 16 a 16 16 90 0 1 16 -16 a 16 16 90 0 0 -16 -16 z M 48 -16 a 16 16 90 0 0 -16 16 a 16 16 90 0 1 16 16 a 16 16 90 0 1 16 -16 a 16 16 90 0 0 -16 -16 z M -16 16 a 16 16 90 0 0 -16 16 a 16 16 90 0 0 16 16 a 16 16 90 0 1 16 -16 a 16 16 90 0 0 -16 -16 z M 16 16 a 16 16 90 0 0 -16 16 a 16 16 90 0 1 16 16 a 16 16 90 0 1 16 -16 a 16 16 90 0 0 -16 -16 z M 48 16 a 16 16 90 0 0 -16 16 a 16 16 90 0 1 16 16 a 16 16 90 0 1 16 -16 a 16 16 90 0 0 -16 -16 z'/></svg>");
  ---theme-pattern-shine: url("data:image/svg+xml,<svg width='32' height='32' xmlns='http://www.w3.org/2000/svg'><path fill='none' stroke='black' stroke-linecap='square' d='M 0 -16 c 0 9 -7 16 -16 16 c 9 0 16 7 16 16 c 0 -9 7 -16 16 -16 c -9 0 -16 -7 -16 -16 z M 0 16 c 0 9 -7 16 -16 16 c 9 0 16 7 16 16 c 0 -9 7 -16 16 -16 c -9 0 -16 -7 -16 -16 z M 32 -16 c 0 9 -7 16 -16 16 c 9 0 16 7 16 16 c 0 -9 7 -16 16 -16 c -9 0 -16 -7 -16 -16 z M 32 16 c 0 9 -7 16 -16 16 c 9 0 16 7 16 16 c 0 -9 7 -16 16 -16 c -9 0 -16 -7 -16 -16 z'/><path fill='none' stroke='black' stroke-linecap='square' d='M 16 0 c -0 9 -7 16 -16 16 c 9 0 16 7 16 16 c 0 -9 7 -16 16 -16 c -9 -0 -16 -7 -16 -16 z'/></svg>");
  ---theme-pattern-tile: url("data:image/svg+xml,<svg width='32' height='32' xmlns='http://www.w3.org/2000/svg'><path fill='none' stroke='black' stroke-linecap='square' d='M 32 8 l 0 16 M 0 8 l 0 16 M 8 0 l 16 0 M 8 32 l 16 0'/><path fill='none' stroke='black' stroke-linecap='square' d='M 32 40 l -8 -8 l 8 -8 l 8 8 l -8 8 z M 0 40 l -8 -8 l 8 -8 l 8 8 l -8 8 z M 32 8 l -8 -8 l 8 -8 l 8 8 l -8 8 z M 0 8 l -8 -8 l 8 -8 l 8 8 l -8 8 z'/><path fill='none' stroke='black' stroke-linecap='square' d='M 16 -8 l 0 16 M 16 24 l 0 16 M -8 16 l 16 0 M 24 16 l 16 0'/><path fill='none' stroke='black' stroke-linecap='square' d='M 16 24 l -8 -8 l 8 -8 l 8 8 l -8 8 z'/></svg>");
  ---theme-pattern-wave: url("data:image/svg+xml,<svg width='32' height='32' xmlns='http://www.w3.org/2000/svg'><path fill='none' stroke='black' stroke-linecap='square' d='M 0 6 c 2 0 3 -1 4 -2 c 1 -1 2 -2 4 -2 c 2 0 3 1 4 2 c 1 1 2 2 4 2 c 2 0 3 -1 4 -2 c 1 -1 2 -2 4 -2 c 2 0 3 1 4 2 c 1 1 2 2 4 2'/><path fill='none' stroke='black' stroke-linecap='square' d='M 0 14 c 2 0 3 -1 4 -2 c 1 -1 2 -2 4 -2 c 2 0 3 1 4 2 c 1 1 2 2 4 2 c 2 0 3 -1 4 -2 c 1 -1 2 -2 4 -2 c 2 0 3 1 4 2 c 1 1 2 2 4 2'/><path fill='none' stroke='black' stroke-linecap='square' d='M 0 22 c 2 0 3 -1 4 -2 c 1 -1 2 -2 4 -2 c 2 0 3 1 4 2 c 1 1 2 2 4 2 c 2 0 3 -1 4 -2 c 1 -1 2 -2 4 -2 c 2 0 3 1 4 2 c 1 1 2 2 4 2'/><path fill='none' stroke='black' stroke-linecap='square' d='M 0 30 c 2 0 3 -1 4 -2 c 1 -1 2 -2 4 -2 c 2 0 3 1 4 2 c 1 1 2 2 4 2 c 2 0 3 -1 4 -2 c 1 -1 2 -2 4 -2 c 2 0 3 1 4 2 c 1 1 2 2 4 2'/></svg>");
  ---theme-pattern-weave: url("data:image/svg+xml,<svg width='32' height='32' xmlns='http://www.w3.org/2000/svg'><path fill='none' stroke='black' stroke-linecap='square' d='M 12 4 h 8 v 24 H 12 z M 28 -4 V 4 H 4 V -4 z M 28 28 v 8 H 4 V 28 z M 28 -12 h 8 v 24 H 28 z M 44 12 v 8 H 20 V 12 z M 12 12 v 8 h -24 V 12 z M 28 20 h 8 v 24 H 28 z M -4 20 H 4 v 24 H -4 z M -4 -12 H 4 v 24 H -4 z'/></svg>");
  ---theme-pattern-zigzag: url("data:image/svg+xml,<svg width='32' height='32' xmlns='http://www.w3.org/2000/svg'><path fill='none' stroke='black' stroke-linecap='square' d='M 0 6 l 4 -4 l 4 4 l 4 -4 l 4 4 l 4 -4 l 4 4 l 4 -4 l 4 4'/><path fill='none' stroke='black' stroke-linecap='square' d='M 0 14 l 4 -4 l 4 4 l 4 -4 l 4 4 l 4 -4 l 4 4 l 4 -4 l 4 4'/><path fill='none' stroke='black' stroke-linecap='square' d='M 0 30 l 4 -4 l 4 4 l 4 -4 l 4 4 l 4 -4 l 4 4 l 4 -4 l 4 4'/><path fill='none' stroke='black' stroke-linecap='square' d='M 0 22 l 4 -4 l 4 4 l 4 -4 l 4 4 l 4 -4 l 4 4 l 4 -4 l 4 4'/></svg>");
}


:root {
  ---theme-mask-scooped-edge-tb: radial-gradient(
      20px at 50% 20px,
      #0000 97%,
      #000
    )
    50% -20px / calc(1.9 * 20px) 100%;
  ---theme-mask-scooped-edge-lr: radial-gradient(
      20px at 20px 50%,
      #0000 97%,
      #000
    ) -20px / 100% calc(1.9 * 20px);
  ---theme-mask-scooped-edge-t: radial-gradient(20px at 50% 0, #0000 97%, #000)
    50% / calc(1.9 * 20px) 100%;
  ---theme-mask-scooped-edge-b: radial-gradient(
      20px at 50% 100%,
      #0000 97%,
      #000
    )
    50% / calc(1.9 * 20px) 100%;
  ---theme-mask-scooped-edge-l: radial-gradient(20px at 0 50%, #0000 97%, #000)
    50%/ 100% calc(1.9 * 20px);
  ---theme-mask-scooped-edge-r: radial-gradient(
      20px at 100% 50%,
      #0000 97%,
      #000
    )
    50% / 100% calc(1.9 * 20px);

  ---theme-mask-scalloped-edge: radial-gradient(farthest-side, #000 97%, #0000)
      0 0 / 20px 20px round,
    linear-gradient(#000 0 0) 50% / calc(100% - 20px) calc(100% - 20px)
      no-repeat;
  ---theme-mask-scalloped-edge-tb: linear-gradient(
        0deg,
        #0000 calc(2 * 20px),
        #000 0
      )
      0 20px,
    radial-gradient(20px, #000 97%, #0000) 50% / calc(1.9 * 20px) calc(2 * 20px)
      repeat space;
  ---theme-mask-scalloped-edge-lr: linear-gradient(
        -90deg,
        #0000 calc(2 * 20px),
        #000 0
      )
      20px,
    radial-gradient(20px, #000 97%, #0000) 50% / calc(2 * 20px) calc(1.9 * 20px)
      space repeat;
  ---theme-mask-scalloped-edge-t: linear-gradient(to bottom, #0000 20px, #000 0),
    radial-gradient(20px at bottom, #000 97%, #0000) top / calc(1.9 * 20px) 20px;
  ---theme-mask-scalloped-edge-b: linear-gradient(to top, #0000 20px, #000 0),
    radial-gradient(20px at top, #000 97%, #0000) bottom / calc(1.9 * 20px) 20px;
  ---theme-mask-scalloped-edge-l: linear-gradient(to right, #0000 20px, #000 0),
    radial-gradient(20px at right, #000 97%, #0000) left / 20px calc(1.9 * 20px);
  ---theme-mask-scalloped-edge-r: linear-gradient(to left, #0000 20px, #000 0),
    radial-gradient(20px at left, #000 97%, #0000) right / 20px calc(1.9 * 20px);

  ---theme-mask-drip-edge-tb: radial-gradient(20px at top, #0000 97%, #000) 50%
      20px / calc(2 * 20px) 51% repeat-x,
    radial-gradient(20px at bottom, #0000 97%, #000) 50% calc(100% - 20px) /
      calc(2 * 20px) 51% repeat-x,
    radial-gradient(20px at 25% 50%, #000 97%, #0000) calc(50% - 20px) 1% /
      calc(4 * 20px) calc(2 * 20px) repeat-x,
    radial-gradient(20px at 25% 50%, #000 97%, #0000) calc(50% - 3 * 20px) 99% /
      calc(4 * 20px) calc(2 * 20px) repeat-x;
  ---theme-mask-drip-edge-lr: radial-gradient(20px at left, #0000 97%, #000)
      20px 50% / 51% calc(2 * 20px) repeat-y,
    radial-gradient(20px at right, #0000 97%, #000) calc(100% - 20px) 50% / 51%
      calc(2 * 20px) repeat-y,
    radial-gradient(20px at 50% 25%, #000 97%, #0000) 1% calc(50% - 20px) /
      calc(2 * 20px) calc(4 * 20px) repeat-y,
    radial-gradient(20px at 50% 25%, #000 97%, #0000) 99% calc(50% - 3 * 20px) /
      calc(2 * 20px) calc(4 * 20px) repeat-y;
  ---theme-mask-drip-edge-t: radial-gradient(20px at top, #0000 97%, #000) 50%
      20px / calc(2 * 20px) 100% repeat-x,
    radial-gradient(20px at 25% 50%, #000 97%, #0000) calc(50% - 20px) 1% /
      calc(4 * 20px) calc(2 * 20px) repeat-x;
  ---theme-mask-drip-edge-b: radial-gradient(20px at bottom, #0000 97%, #000)
      50% calc(100% - 20px) / calc(2 * 20px) 100% repeat-x,
    radial-gradient(20px at 25% 50%, #000 97%, #0000) calc(50% - 20px) 99% /
      calc(4 * 20px) calc(2 * 20px) repeat-x;
  ---theme-mask-drip-edge-l: radial-gradient(20px at left, #0000 97%, #000) 20px
      50% / 100% calc(2 * 20px) repeat-y,
    radial-gradient(20px at 50% 25%, #000 97%, #0000) 1% calc(50% - 20px) /
      calc(2 * 20px) calc(4 * 20px) repeat-y;
  ---theme-mask-drip-edge-r: radial-gradient(20px at right, #0000 97%, #000)
      calc(100% - 20px) 50% / 100% calc(2 * 20px) repeat-y,
    radial-gradient(20px at 50% 25%, #000 97%, #0000) 99% calc(50% - 20px) /
      calc(2 * 20px) calc(4 * 20px) repeat-y;

  ---theme-mask-zigzag-edge-tb: conic-gradient(
        from 135deg at top,
        #0000,
        #000 1deg 90deg,
        #0000 91deg
      )
      top / calc(2 * 20px) 51% repeat-x,
    conic-gradient(from -45deg at bottom, #0000, #000 1deg 90deg, #0000 91deg)
      bottom / calc(2 * 20px) 51% repeat-x;
  ---theme-mask-zigzag-edge-lr: conic-gradient(
        from 45deg at left,
        #0000,
        #000 1deg 90deg,
        #0000 91deg
      )
      left / 51% calc(2 * 20px) repeat-y,
    conic-gradient(from -135deg at right, #0000, #000 1deg 90deg, #0000 91deg)
      right / 51% calc(2 * 20px) repeat-y;
  ---theme-mask-zigzag-edge-t: conic-gradient(
      from 135deg at top,
      #0000,
      #000 1deg 90deg,
      #0000 91deg
    )
    50% / calc(2 * 20px) 100%;
  ---theme-mask-zigzag-edge-b: conic-gradient(
      from -45deg at bottom,
      #0000,
      #000 1deg 90deg,
      #0000 91deg
    )
    50% / calc(2 * 20px) 100%;
  ---theme-mask-zigzag-edge-l: conic-gradient(
      from 45deg at left,
      #0000,
      #000 1deg 90deg,
      #0000 91deg
    )
    50% / 100% calc(2 * 20px);
  ---theme-mask-zigzag-edge-r: conic-gradient(
      from -135deg at right,
      #0000,
      #000 1deg 90deg,
      #0000 91deg
    )
    50% / 100% calc(2 * 20px);
}


:is([theme="dark"], .theme-dark) {
  color-scheme: dark;

  /*
   * Color Primitives
   */

  ---theme-color-red-10: rgb(76, 5, 5); /* from Tailwind red-950 */
  ---theme-color-red-20: rgb(127, 29, 29); /* from Tailwind red-900 */
  ---theme-color-red-30: rgb(153, 27, 27); /* from Tailwind red-800 */
  ---theme-color-red-40: rgb(185, 28, 28); /* from Tailwind red-700 */
  ---theme-color-red-50: rgb(220, 38, 38); /* from Tailwind red-600 */
  ---theme-color-red-60: rgb(239, 68, 68); /* from Tailwind red-500 */
  ---theme-color-red-70: rgb(248, 113, 113); /* from Tailwind red-400 */
  ---theme-color-red-80: rgb(252, 165, 165); /* from Tailwind red-300 */
  ---theme-color-red-90: rgb(254, 205, 205); /* from Tailwind red-200 */
  ---theme-color-red-95: rgb(254, 226, 226); /* from Tailwind red-100 */
  ---theme-color-red-99: rgb(254, 242, 242); /* from Tailwind red-50 */
  ---theme-color-red: var(---theme-color-red-50);

  ---theme-color-orange-10: rgb(77, 24, 6); /* from Tailwind orange-950 */
  ---theme-color-orange-20: rgb(124, 45, 18); /* from Tailwind orange-900 */
  ---theme-color-orange-30: rgb(154, 52, 18); /* from Tailwind orange-800 */
  ---theme-color-orange-40: rgb(194, 65, 12); /* from Tailwind orange-700 */
  ---theme-color-orange-50: rgb(234, 88, 12); /* from Tailwind orange-600 */
  ---theme-color-orange-60: rgb(249, 115, 22); /* from Tailwind orange-500 */
  ---theme-color-orange-70: rgb(251, 146, 60); /* from Tailwind orange-400 */
  ---theme-color-orange-80: rgb(253, 186, 116); /* from Tailwind orange-300 */
  ---theme-color-orange-90: rgb(254, 215, 170); /* from Tailwind orange-200 */
  ---theme-color-orange-95: rgb(255, 237, 213); /* from Tailwind orange-100 */
  ---theme-color-orange-99: rgb(255, 247, 237); /* from Tailwind orange-50 */
  ---theme-color-orange: var(---theme-color-orange-50);

  ---theme-color-amber-10: rgb(77, 29, 4); /* from Tailwind amber-950 */
  ---theme-color-amber-20: rgb(120, 53, 15); /* from Tailwind amber-900 */
  ---theme-color-amber-30: rgb(146, 64, 14); /* from Tailwind amber-800 */
  ---theme-color-amber-40: rgb(180, 83, 9); /* from Tailwind amber-700 */
  ---theme-color-amber-50: rgb(217, 119, 6); /* from Tailwind amber-600 */
  ---theme-color-amber-60: rgb(245, 158, 11); /* from Tailwind amber-500 */
  ---theme-color-amber-70: rgb(251, 191, 36); /* from Tailwind amber-400 */
  ---theme-color-amber-80: rgb(252, 211, 77); /* from Tailwind amber-300 */
  ---theme-color-amber-90: rgb(253, 230, 138); /* from Tailwind amber-200 */
  ---theme-color-amber-95: rgb(254, 243, 199); /* from Tailwind amber-100 */
  ---theme-color-amber-99: rgb(255, 251, 235); /* from Tailwind amber-50 */
  ---theme-color-amber: var(---theme-color-amber-50);

  ---theme-color-yellow-10: rgb(72, 35, 7); /* from Tailwind yellow-950 */
  ---theme-color-yellow-20: rgb(113, 63, 18); /* from Tailwind yellow-900 */
  ---theme-color-yellow-30: rgb(133, 76, 8); /* from Tailwind yellow-800 */
  ---theme-color-yellow-40: rgb(161, 98, 7); /* from Tailwind yellow-700 */
  ---theme-color-yellow-50: rgb(202, 138, 4); /* from Tailwind yellow-600 */
  ---theme-color-yellow-60: rgb(234, 179, 8); /* from Tailwind yellow-500 */
  ---theme-color-yellow-70: rgb(244, 220, 64); /* from Tailwind yellow-400 */
  ---theme-color-yellow-80: rgb(250, 232, 103); /* from Tailwind yellow-300 */
  ---theme-color-yellow-90: rgb(253, 244, 153); /* from Tailwind yellow-200 */
  ---theme-color-yellow-95: rgb(254, 249, 195); /* from Tailwind yellow-100 */
  ---theme-color-yellow-99: rgb(254, 252, 232); /* from Tailwind yellow-50 */
  ---theme-color-yellow: var(---theme-color-yellow-50);

  ---theme-color-lime-10: rgb(30, 50, 10); /* from Tailwind lime-950 */
  ---theme-color-lime-20: rgb(54, 83, 20); /* from Tailwind lime-900 */
  ---theme-color-lime-30: rgb(63, 98, 18); /* from Tailwind lime-800 */
  ---theme-color-lime-40: rgb(77, 124, 15); /* from Tailwind lime-700 */
  ---theme-color-lime-50: rgb(101, 163, 13); /* from Tailwind lime-600 */
  ---theme-color-lime-60: rgb(132, 204, 22); /* from Tailwind lime-500 */
  ---theme-color-lime-70: rgb(163, 230, 53); /* from Tailwind lime-400 */
  ---theme-color-lime-80: rgb(190, 242, 100); /* from Tailwind lime-300 */
  ---theme-color-lime-90: rgb(217, 249, 157); /* from Tailwind lime-200 */
  ---theme-color-lime-95: rgb(236, 252, 203); /* from Tailwind lime-100 */
  ---theme-color-lime-99: rgb(247, 254, 231); /* from Tailwind lime-50 */
  ---theme-color-lime: var(---theme-color-lime-50);

  ---theme-color-green-10: rgb(5, 46, 22); /* from Tailwind green-950 */
  ---theme-color-green-20: rgb(20, 83, 45); /* from Tailwind green-900 */
  ---theme-color-green-30: rgb(22, 101, 52); /* from Tailwind green-800 */
  ---theme-color-green-40: rgb(21, 128, 61); /* from Tailwind green-700 */
  ---theme-color-green-50: rgb(22, 163, 74); /* from Tailwind green-600 */
  ---theme-color-green-60: rgb(34, 197, 94); /* from Tailwind green-500 */
  ---theme-color-green-70: rgb(74, 222, 128); /* from Tailwind green-400 */
  ---theme-color-green-80: rgb(134, 239, 172); /* from Tailwind green-300 */
  ---theme-color-green-90: rgb(187, 247, 208); /* from Tailwind green-200 */
  ---theme-color-green-95: rgb(220, 252, 231); /* from Tailwind green-100 */
  ---theme-color-green-99: rgb(240, 253, 244); /* from Tailwind green-50 */
  ---theme-color-green: var(---theme-color-green-50);

  ---theme-color-emerald-10: rgb(2, 44, 34); /* from Tailwind emerald-950 */
  ---theme-color-emerald-20: rgb(6, 78, 59); /* from Tailwind emerald-900 */
  ---theme-color-emerald-30: rgb(6, 95, 70); /* from Tailwind emerald-800 */
  ---theme-color-emerald-40: rgb(4, 120, 87); /* from Tailwind emerald-700 */
  ---theme-color-emerald-50: rgb(5, 150, 105); /* from Tailwind emerald-600 */
  ---theme-color-emerald-60: rgb(16, 185, 129); /* from Tailwind emerald-500 */
  ---theme-color-emerald-70: rgb(52, 211, 153); /* from Tailwind emerald-400 */
  ---theme-color-emerald-80: rgb(110, 231, 183); /* from Tailwind emerald-300 */
  ---theme-color-emerald-90: rgb(167, 243, 208); /* from Tailwind emerald-200 */
  ---theme-color-emerald-95: rgb(209, 250, 229); /* from Tailwind emerald-100 */
  ---theme-color-emerald-99: rgb(236, 253, 245); /* from Tailwind emerald-50 */
  ---theme-color-emerald: var(---theme-color-emerald-50);

  ---theme-color-teal-10: rgb(4, 47, 46); /* from Tailwind teal-950 */
  ---theme-color-teal-20: rgb(19, 78, 74); /* from Tailwind teal-900 */
  ---theme-color-teal-30: rgb(17, 94, 89); /* from Tailwind teal-800 */
  ---theme-color-teal-40: rgb(15, 118, 110); /* from Tailwind teal-700 */
  ---theme-color-teal-50: rgb(13, 148, 136); /* from Tailwind teal-600 */
  ---theme-color-teal-60: rgb(20, 183, 171); /* from Tailwind teal-500 */
  ---theme-color-teal-70: rgb(45, 212, 191); /* from Tailwind teal-400 */
  ---theme-color-teal-80: rgb(94, 234, 212); /* from Tailwind teal-300 */
  ---theme-color-teal-90: rgb(153, 246, 228); /* from Tailwind teal-200 */
  ---theme-color-teal-95: rgb(204, 251, 241); /* from Tailwind teal-100 */
  ---theme-color-teal-99: rgb(240, 253, 250); /* from Tailwind teal-50 */
  ---theme-color-teal: var(---theme-color-teal-50);

  ---theme-color-cyan-10: rgb(8, 51, 68); /* from Tailwind cyan-950 */
  ---theme-color-cyan-20: rgb(22, 78, 99); /* from Tailwind cyan-900 */
  ---theme-color-cyan-30: rgb(21, 94, 117); /* from Tailwind cyan-800 */
  ---theme-color-cyan-40: rgb(14, 116, 144); /* from Tailwind cyan-700 */
  ---theme-color-cyan-50: rgb(8, 145, 178); /* from Tailwind cyan-600 */
  ---theme-color-cyan-60: rgb(6, 182, 212); /* from Tailwind cyan-500 */
  ---theme-color-cyan-70: rgb(34, 211, 238); /* from Tailwind cyan-400 */
  ---theme-color-cyan-80: rgb(103, 232, 249); /* from Tailwind cyan-300 */
  ---theme-color-cyan-90: rgb(165, 243, 252); /* from Tailwind cyan-200 */
  ---theme-color-cyan-95: rgb(207, 250, 254); /* from Tailwind cyan-100 */
  ---theme-color-cyan-99: rgb(236, 254, 255); /* from Tailwind cyan-50 */
  ---theme-color-cyan: var(---theme-color-cyan-50);

  ---theme-color-sky-10: rgb(8, 47, 73); /* from Tailwind sky-950 */
  ---theme-color-sky-20: rgb(12, 74, 110); /* from Tailwind sky-900 */
  ---theme-color-sky-30: rgb(7, 89, 133); /* from Tailwind sky-800 */
  ---theme-color-sky-40: rgb(3, 105, 161); /* from Tailwind sky-700 */
  ---theme-color-sky-50: rgb(2, 132, 199); /* from Tailwind sky-600 */
  ---theme-color-sky-60: rgb(14, 165, 233); /* from Tailwind sky-500 */
  ---theme-color-sky-70: rgb(56, 189, 248); /* from Tailwind sky-400 */
  ---theme-color-sky-80: rgb(125, 211, 252); /* from Tailwind sky-300 */
  ---theme-color-sky-90: rgb(186, 230, 253); /* from Tailwind sky-200 */
  ---theme-color-sky-95: rgb(224, 242, 254); /* from Tailwind sky-100 */
  ---theme-color-sky-99: rgb(240, 249, 255); /* from Tailwind sky-50 */
  ---theme-color-sky: var(---theme-color-sky-50);

  ---theme-color-blue-10: rgb(23, 37, 84); /* from Tailwind blue-950 */
  ---theme-color-blue-20: rgb(30, 58, 138); /* from Tailwind blue-900 */
  ---theme-color-blue-30: rgb(30, 64, 175); /* from Tailwind blue-800 */
  ---theme-color-blue-40: rgb(29, 78, 216); /* from Tailwind blue-700 */
  ---theme-color-blue-50: rgb(37, 99, 235); /* from Tailwind blue-600 */
  ---theme-color-blue-60: rgb(59, 130, 246); /* from Tailwind blue-500 */
  ---theme-color-blue-70: rgb(96, 165, 250); /* from Tailwind blue-400 */
  ---theme-color-blue-80: rgb(147, 197, 253); /* from Tailwind blue-300 */
  ---theme-color-blue-90: rgb(191, 219, 253); /* from Tailwind blue-200 */
  ---theme-color-blue-95: rgb(219, 234, 254); /* from Tailwind blue-100 */
  ---theme-color-blue-99: rgb(239, 246, 255); /* from Tailwind blue-50 */
  ---theme-color-blue: var(---theme-color-blue-50);

  ---theme-color-indigo-10: rgb(30, 27, 75); /* from Tailwind indigo-950 */
  ---theme-color-indigo-20: rgb(49, 46, 129); /* from Tailwind indigo-900 */
  ---theme-color-indigo-30: rgb(55, 48, 163); /* from Tailwind indigo-800 */
  ---theme-color-indigo-40: rgb(67, 56, 202); /* from Tailwind indigo-700 */
  ---theme-color-indigo-50: rgb(79, 70, 229); /* from Tailwind indigo-600 */
  ---theme-color-indigo-60: rgb(99, 102, 241); /* from Tailwind indigo-500 */
  ---theme-color-indigo-70: rgb(129, 140, 248); /* from Tailwind indigo-400 */
  ---theme-color-indigo-80: rgb(165, 180, 252); /* from Tailwind indigo-300 */
  ---theme-color-indigo-90: rgb(199, 210, 254); /* from Tailwind indigo-200 */
  ---theme-color-indigo-95: rgb(224, 231, 255); /* from Tailwind indigo-100 */
  ---theme-color-indigo-99: rgb(238, 242, 255); /* from Tailwind indigo-50 */
  ---theme-color-indigo: var(---theme-color-indigo-50);

  ---theme-color-violet-10: rgb(46, 16, 101); /* from Tailwind violet-950 */
  ---theme-color-violet-20: rgb(76, 29, 149); /* from Tailwind violet-900 */
  ---theme-color-violet-30: rgb(91, 33, 182); /* from Tailwind violet-800 */
  ---theme-color-violet-40: rgb(109, 40, 217); /* from Tailwind violet-700 */
  ---theme-color-violet-50: rgb(124, 58, 237); /* from Tailwind violet-600 */
  ---theme-color-violet-60: rgb(139, 92, 246); /* from Tailwind violet-500 */
  ---theme-color-violet-70: rgb(167, 139, 250); /* from Tailwind violet-400 */
  ---theme-color-violet-80: rgb(196, 181, 253); /* from Tailwind violet-300 */
  ---theme-color-violet-90: rgb(221, 214, 254); /* from Tailwind violet-200 */
  ---theme-color-violet-95: rgb(237, 233, 254); /* from Tailwind violet-100 */
  ---theme-color-violet-99: rgb(245, 243, 255); /* from Tailwind violet-50 */
  ---theme-color-violet: var(---theme-color-violet-50);

  ---theme-color-purple-10: rgb(59, 7, 100); /* from Tailwind purple-950 */
  ---theme-color-purple-20: rgb(88, 28, 135); /* from Tailwind purple-900 */
  ---theme-color-purple-30: rgb(107, 33, 168); /* from Tailwind purple-800 */
  ---theme-color-purple-40: rgb(126, 34, 206); /* from Tailwind purple-700 */
  ---theme-color-purple-50: rgb(147, 51, 234); /* from Tailwind purple-600 */
  ---theme-color-purple-60: rgb(168, 85, 247); /* from Tailwind purple-500 */
  ---theme-color-purple-70: rgb(192, 132, 252); /* from Tailwind purple-400 */
  ---theme-color-purple-80: rgb(216, 180, 254); /* from Tailwind purple-300 */
  ---theme-color-purple-90: rgb(233, 213, 255); /* from Tailwind purple-200 */
  ---theme-color-purple-95: rgb(243, 232, 255); /* from Tailwind purple-100 */
  ---theme-color-purple-99: rgb(250, 245, 255); /* from Tailwind purple-50 */
  ---theme-color-purple: var(---theme-color-purple-50);

  ---theme-color-fuchsia-10: rgb(74, 4, 76); /* from Tailwind fuchsia-950 */
  ---theme-color-fuchsia-20: rgb(112, 26, 117); /* from Tailwind fuchsia-900 */
  ---theme-color-fuchsia-30: rgb(134, 25, 143); /* from Tailwind fuchsia-800 */
  ---theme-color-fuchsia-40: rgb(162, 28, 175); /* from Tailwind fuchsia-700 */
  ---theme-color-fuchsia-50: rgb(192, 38, 211); /* from Tailwind fuchsia-600 */
  ---theme-color-fuchsia-60: rgb(217, 70, 239); /* from Tailwind fuchsia-500 */
  ---theme-color-fuchsia-70: rgb(232, 121, 249); /* from Tailwind fuchsia-400 */
  ---theme-color-fuchsia-80: rgb(240, 171, 252); /* from Tailwind fuchsia-300 */
  ---theme-color-fuchsia-90: rgb(245, 208, 255); /* from Tailwind fuchsia-200 */
  ---theme-color-fuchsia-95: rgb(250, 232, 255); /* from Tailwind fuchsia-100 */
  ---theme-color-fuchsia-99: rgb(253, 244, 255); /* from Tailwind fuchsia-50 */
  ---theme-color-fuchsia: var(---theme-color-fuchsia-50);

  ---theme-color-pink-10: rgb(80, 7, 36); /* from Tailwind pink-950 */
  ---theme-color-pink-20: rgb(131, 24, 67); /* from Tailwind pink-900 */
  ---theme-color-pink-30: rgb(157, 23, 77); /* from Tailwind pink-800 */
  ---theme-color-pink-40: rgb(190, 24, 93); /* from Tailwind pink-700 */
  ---theme-color-pink-50: rgb(219, 39, 119); /* from Tailwind pink-600 */
  ---theme-color-pink-60: rgb(236, 72, 153); /* from Tailwind pink-500 */
  ---theme-color-pink-70: rgb(244, 114, 182); /* from Tailwind pink-400 */
  ---theme-color-pink-80: rgb(249, 168, 212); /* from Tailwind pink-300 */
  ---theme-color-pink-90: rgb(251, 207, 232); /* from Tailwind pink-200 */
  ---theme-color-pink-95: rgb(252, 231, 243); /* from Tailwind pink-100 */
  ---theme-color-pink-99: rgb(253, 242, 248); /* from Tailwind pink-50 */
  ---theme-color-pink: var(---theme-color-pink-50);

  ---theme-color-rose-10: rgb(76, 5, 25); /* from Tailwind rose-950 */
  ---theme-color-rose-20: rgb(136, 19, 55); /* from Tailwind rose-900 */
  ---theme-color-rose-30: rgb(159, 18, 57); /* from Tailwind rose-800 */
  ---theme-color-rose-40: rgb(190, 18, 60); /* from Tailwind rose-700 */
  ---theme-color-rose-50: rgb(225, 29, 72); /* from Tailwind rose-600 */
  ---theme-color-rose-60: rgb(244, 63, 94); /* from Tailwind rose-500 */
  ---theme-color-rose-70: rgb(251, 113, 133); /* from Tailwind rose-400 */
  ---theme-color-rose-80: rgb(253, 164, 175); /* from Tailwind rose-300 */
  ---theme-color-rose-90: rgb(254, 205, 211); /* from Tailwind rose-200 */
  ---theme-color-rose-95: rgb(255, 228, 230); /* from Tailwind rose-100 */
  ---theme-color-rose-99: rgb(255, 241, 242); /* from Tailwind rose-50 */
  ---theme-color-rose: var(---theme-color-rose-50);

  ---theme-color-slate-10: rgb(2, 6, 23); /* from Tailwind slate-950 */
  ---theme-color-slate-20: rgb(15, 23, 42); /* from Tailwind slate-900 */
  ---theme-color-slate-30: rgb(30, 41, 59); /* from Tailwind slate-800 */
  ---theme-color-slate-40: rgb(51, 65, 85); /* from Tailwind slate-700 */
  ---theme-color-slate-50: rgb(71, 85, 105); /* from Tailwind slate-600 */
  ---theme-color-slate-60: rgb(100, 116, 139); /* from Tailwind slate-500 */
  ---theme-color-slate-70: rgb(148, 163, 184); /* from Tailwind slate-400 */
  ---theme-color-slate-80: rgb(203, 213, 225); /* from Tailwind slate-300 */
  ---theme-color-slate-90: rgb(226, 232, 240); /* from Tailwind slate-200 */
  ---theme-color-slate-95: rgb(241, 245, 249); /* from Tailwind slate-100 */
  ---theme-color-slate-99: rgb(248, 250, 252); /* from Tailwind slate-50 */
  ---theme-color-slate: var(---theme-color-slate-50);

  ---theme-color-gray-10: rgb(3, 7, 18); /* from Tailwind gray-950 */
  ---theme-color-gray-20: rgb(17, 24, 39); /* from Tailwind gray-900 */
  ---theme-color-gray-30: rgb(31, 41, 55); /* from Tailwind gray-800 */
  ---theme-color-gray-40: rgb(55, 65, 82); /* from Tailwind gray-700 */
  ---theme-color-gray-50: rgb(75, 85, 99); /* from Tailwind gray-600 */
  ---theme-color-gray-60: rgb(107, 114, 128); /* from Tailwind gray-500 */
  ---theme-color-gray-70: rgb(156, 163, 175); /* from Tailwind gray-400 */
  ---theme-color-gray-80: rgb(209, 213, 219); /* from Tailwind gray-300 */
  ---theme-color-gray-90: rgb(229, 231, 235); /* from Tailwind gray-200 */
  ---theme-color-gray-95: rgb(243, 244, 246); /* from Tailwind gray-100 */
  ---theme-color-gray-99: rgb(249, 250, 251); /* from Tailwind gray-50 */
  ---theme-color-gray: var(---theme-color-gray-50);

  ---theme-color-zinc-10: rgb(9, 9, 11); /* from Tailwind zinc-950 */
  ---theme-color-zinc-20: rgb(24, 24, 27); /* from Tailwind zinc-900 */
  ---theme-color-zinc-30: rgb(39, 39, 42); /* from Tailwind zinc-800 */
  ---theme-color-zinc-40: rgb(63, 63, 70); /* from Tailwind zinc-700 */
  ---theme-color-zinc-50: rgb(82, 82, 91); /* from Tailwind zinc-600 */
  ---theme-color-zinc-60: rgb(113, 113, 122); /* from Tailwind zinc-500 */
  ---theme-color-zinc-70: rgb(161, 161, 170); /* from Tailwind zinc-400 */
  ---theme-color-zinc-80: rgb(212, 212, 216); /* from Tailwind zinc-300 */
  ---theme-color-zinc-90: rgb(228, 228, 231); /* from Tailwind zinc-200 */
  ---theme-color-zinc-95: rgb(244, 244, 245); /* from Tailwind zinc-100 */
  ---theme-color-zinc-99: rgb(250, 250, 250); /* from Tailwind zinc-50 */
  ---theme-color-zinc: var(---theme-color-zinc-50);

  ---theme-color-stone-10: rgb(12, 10, 9); /* from Tailwind stone-950 */
  ---theme-color-stone-20: rgb(28, 25, 23); /* from Tailwind stone-900 */
  ---theme-color-stone-30: rgb(41, 37, 36); /* from Tailwind stone-800 */
  ---theme-color-stone-40: rgb(68, 64, 60); /* from Tailwind stone-700 */
  ---theme-color-stone-50: rgb(87, 83, 78); /* from Tailwind stone-600 */
  ---theme-color-stone-60: rgb(120, 113, 108); /* from Tailwind stone-500 */
  ---theme-color-stone-70: rgb(168, 162, 158); /* from Tailwind stone-400 */
  ---theme-color-stone-80: rgb(214, 211, 209); /* from Tailwind stone-300 */
  ---theme-color-stone-90: rgb(231, 229, 228); /* from Tailwind stone-200 */
  ---theme-color-stone-95: rgb(245, 245, 244); /* from Tailwind stone-100 */
  ---theme-color-stone-99: rgb(250, 250, 249); /* from Tailwind stone-50 */
  ---theme-color-stone: var(---theme-color-stone-50);

  ---theme-color-neutral-10: rgb(37, 37, 37); /* from Tailwind neutral-950 */
  ---theme-color-neutral-20: rgb(52, 52, 52); /* from Tailwind neutral-900 */
  ---theme-color-neutral-30: rgb(69, 69, 69); /* from Tailwind neutral-800 */
  ---theme-color-neutral-40: rgb(95, 95, 95); /* from Tailwind neutral-700 */
  ---theme-color-neutral-50: rgb(112, 112, 112); /* from Tailwind neutral-600 */
  ---theme-color-neutral-60: rgb(142, 142, 142); /* from Tailwind neutral-500 */
  ---theme-color-neutral-70: rgb(181, 181, 181); /* from Tailwind neutral-400 */
  ---theme-color-neutral-80: rgb(222, 222, 222); /* from Tailwind neutral-300 */
  ---theme-color-neutral-90: rgb(235, 235, 235); /* from Tailwind neutral-200 */
  ---theme-color-neutral-95: rgb(247, 247, 247); /* from Tailwind neutral-100 */
  ---theme-color-neutral-99: rgb(250, 250, 250); /* from Tailwind neutral-50 */
  ---theme-color-neutral: var(---theme-color-neutral-50);

  /* Neutral one-offs */
  ---theme-color-neutral-0: rgb(0 0 0);
  ---theme-color-neutral-100: rgb(255 255 255);

  /* Elements */
  ---theme-color-bg: rgb(0 0 0);
  ---theme-color-bg-00: rgba(0 0 0 / 0);
  ---theme-color-bg-01: rgba(0 0 0 / 0.01);
  ---theme-color-bg-02: rgba(0 0 0 / 0.02);
  ---theme-color-bg-03: rgba(0 0 0 / 0.03);
  ---theme-color-bg-04: rgba(0 0 0 / 0.04);
  ---theme-color-bg-05: rgba(0 0 0 / 0.05);
  ---theme-color-bg-06: rgba(0 0 0 / 0.06);
  ---theme-color-bg-07: rgba(0 0 0 / 0.07);
  ---theme-color-bg-08: rgba(0 0 0 / 0.08);
  ---theme-color-bg-09: rgba(0 0 0 / 0.09);
  ---theme-color-bg-10: rgba(0 0 0 / 0.1);
  ---theme-color-bg-11: rgba(0 0 0 / 0.11);
  ---theme-color-bg-12: rgba(0 0 0 / 0.12);
  ---theme-color-bg-13: rgba(0 0 0 / 0.13);
  ---theme-color-bg-14: rgba(0 0 0 / 0.14);
  ---theme-color-bg-15: rgba(0 0 0 / 0.15);
  ---theme-color-bg-20: rgba(0 0 0 / 0.2);
  ---theme-color-bg-25: rgba(0 0 0 / 0.25);
  ---theme-color-bg-30: rgba(0 0 0 / 0.3);
  ---theme-color-bg-40: rgba(0 0 0 / 0.4);
  ---theme-color-bg-50: rgba(0 0 0 / 0.5);
  ---theme-color-bg-60: rgba(0 0 0 / 0.6);
  ---theme-color-bg-70: rgba(0 0 0 / 0.7);
  ---theme-color-bg-80: rgba(0 0 0 / 0.8);
  ---theme-color-bg-90: rgba(0 0 0 / 0.9);
  ---theme-color-fg: rgb(255 255 255);
  ---theme-color-fg-00: rgba(255 255 255 / 0);
  ---theme-color-fg-01: rgba(255 255 255 / 0.01);
  ---theme-color-fg-02: rgba(255 255 255 / 0.02);
  ---theme-color-fg-03: rgba(255 255 255 / 0.03);
  ---theme-color-fg-04: rgba(255 255 255 / 0.04);
  ---theme-color-fg-05: rgba(255 255 255 / 0.05);
  ---theme-color-fg-06: rgba(255 255 255 / 0.06);
  ---theme-color-fg-07: rgba(255 255 255 / 0.07);
  ---theme-color-fg-08: rgba(255 255 255 / 0.08);
  ---theme-color-fg-09: rgba(255 255 255 / 0.09);
  ---theme-color-fg-10: rgba(255 255 255 / 0.1);
  ---theme-color-fg-11: rgba(255 255 255 / 0.11);
  ---theme-color-fg-12: rgba(255 255 255 / 0.12);
  ---theme-color-fg-13: rgba(255 255 255 / 0.13);
  ---theme-color-fg-14: rgba(255 255 255 / 0.14);
  ---theme-color-fg-15: rgba(255 255 255 / 0.15);
  ---theme-color-fg-20: rgba(255 255 255 / 0.2);
  ---theme-color-fg-25: rgba(255 255 255 / 0.25);
  ---theme-color-fg-30: rgba(255 255 255 / 0.3);
  ---theme-color-fg-40: rgba(255 255 255 / 0.4);
  ---theme-color-fg-50: rgba(255 255 255 / 0.5);
  ---theme-color-fg-60: rgba(255 255 255 / 0.6);
  ---theme-color-fg-70: rgba(255 255 255 / 0.7);
  ---theme-color-fg-80: rgba(255 255 255 / 0.8);
  ---theme-color-fg-90: rgba(255 255 255 / 0.9);

  /* General */
  ---theme-color-surface: var(---theme-color-neutral-10);
  ---theme-color-surface-border: var(---theme-color-fg-12);
  ---theme-color-divider: var(---theme-color-fg-12);

  /* Scrollbars */
  ---theme-color-scrollbar-thumb: var(---theme-color-fg-15);
  ---theme-color-scrollbar-thumb-hover: var(---theme-color-fg-50);
  ---theme-color-scrollbar-track: var(---theme-color-bg-15);

  /*
   * Opacities
   */

  ---theme-opacity-overlay: 0.5;
}


:is([theme="light"], .theme-light) {
  color-scheme: light;

  /*
   * Color Primitives
   */

  ---theme-color-red-10: rgb(254, 242, 242); /* from Tailwind red-50 */
  ---theme-color-red-20: rgb(254, 226, 226); /* from Tailwind red-100 */
  ---theme-color-red-30: rgb(254, 205, 205); /* from Tailwind red-200 */
  ---theme-color-red-40: rgb(252, 165, 165); /* from Tailwind red-300 */
  ---theme-color-red-50: rgb(248, 113, 113); /* from Tailwind red-400 */
  ---theme-color-red-60: rgb(239, 68, 68); /* from Tailwind red-500 */
  ---theme-color-red-70: rgb(220, 38, 38); /* from Tailwind red-600 */
  ---theme-color-red-80: rgb(185, 28, 28); /* from Tailwind red-700 */
  ---theme-color-red-90: rgb(153, 27, 27); /* from Tailwind red-800 */
  ---theme-color-red-95: rgb(127, 29, 29); /* from Tailwind red-900 */
  ---theme-color-red-99: rgb(76, 5, 5); /* from Tailwind red-950 */
  ---theme-color-red: var(---theme-color-red-50);

  ---theme-color-orange-10: rgb(255, 247, 237); /* from Tailwind orange-50 */
  ---theme-color-orange-20: rgb(255, 237, 213); /* from Tailwind orange-100 */
  ---theme-color-orange-30: rgb(254, 215, 170); /* from Tailwind orange-200 */
  ---theme-color-orange-40: rgb(253, 186, 116); /* from Tailwind orange-300 */
  ---theme-color-orange-50: rgb(251, 146, 60); /* from Tailwind orange-400 */
  ---theme-color-orange-60: rgb(249, 115, 22); /* from Tailwind orange-500 */
  ---theme-color-orange-70: rgb(234, 88, 12); /* from Tailwind orange-600 */
  ---theme-color-orange-80: rgb(194, 65, 12); /* from Tailwind orange-700 */
  ---theme-color-orange-90: rgb(154, 52, 18); /* from Tailwind orange-800 */
  ---theme-color-orange-95: rgb(124, 45, 18); /* from Tailwind orange-900 */
  ---theme-color-orange-99: rgb(77, 24, 6); /* from Tailwind orange-950 */
  ---theme-color-orange: var(---theme-color-orange-50);

  ---theme-color-amber-10: rgb(255, 251, 235); /* from Tailwind amber-50 */
  ---theme-color-amber-20: rgb(254, 243, 199); /* from Tailwind amber-100 */
  ---theme-color-amber-30: rgb(253, 230, 138); /* from Tailwind amber-200 */
  ---theme-color-amber-40: rgb(252, 211, 77); /* from Tailwind amber-300 */
  ---theme-color-amber-50: rgb(251, 191, 36); /* from Tailwind amber-400 */
  ---theme-color-amber-60: rgb(245, 158, 11); /* from Tailwind amber-500 */
  ---theme-color-amber-70: rgb(217, 119, 6); /* from Tailwind amber-600 */
  ---theme-color-amber-80: rgb(180, 83, 9); /* from Tailwind amber-700 */
  ---theme-color-amber-90: rgb(146, 64, 14); /* from Tailwind amber-800 */
  ---theme-color-amber-95: rgb(120, 53, 15); /* from Tailwind amber-900 */
  ---theme-color-amber-99: rgb(77, 29, 4); /* from Tailwind amber-950 */
  ---theme-color-amber: var(---theme-color-amber-50);

  ---theme-color-yellow-10: rgb(254, 252, 232); /* from Tailwind yellow-50 */
  ---theme-color-yellow-20: rgb(254, 249, 195); /* from Tailwind yellow-100 */
  ---theme-color-yellow-30: rgb(253, 244, 153); /* from Tailwind yellow-200 */
  ---theme-color-yellow-40: rgb(250, 232, 103); /* from Tailwind yellow-300 */
  ---theme-color-yellow-50: rgb(244, 220, 64); /* from Tailwind yellow-400 */
  ---theme-color-yellow-60: rgb(234, 179, 8); /* from Tailwind yellow-500 */
  ---theme-color-yellow-70: rgb(202, 138, 4); /* from Tailwind yellow-600 */
  ---theme-color-yellow-80: rgb(161, 98, 7); /* from Tailwind yellow-700 */
  ---theme-color-yellow-90: rgb(133, 76, 8); /* from Tailwind yellow-800 */
  ---theme-color-yellow-95: rgb(113, 63, 18); /* from Tailwind yellow-900 */
  ---theme-color-yellow-99: rgb(72, 35, 7); /* from Tailwind yellow-950 */
  ---theme-color-yellow: var(---theme-color-yellow-50);

  ---theme-color-lime-10: rgb(247, 254, 231); /* from Tailwind lime-50 */
  ---theme-color-lime-20: rgb(236, 252, 203); /* from Tailwind lime-100 */
  ---theme-color-lime-30: rgb(217, 249, 157); /* from Tailwind lime-200 */
  ---theme-color-lime-40: rgb(190, 242, 100); /* from Tailwind lime-300 */
  ---theme-color-lime-50: rgb(163, 230, 53); /* from Tailwind lime-400 */
  ---theme-color-lime-60: rgb(132, 204, 22); /* from Tailwind lime-500 */
  ---theme-color-lime-70: rgb(101, 163, 13); /* from Tailwind lime-600 */
  ---theme-color-lime-80: rgb(77, 124, 15); /* from Tailwind lime-700 */
  ---theme-color-lime-90: rgb(63, 98, 18); /* from Tailwind lime-800 */
  ---theme-color-lime-95: rgb(54, 83, 20); /* from Tailwind lime-900 */
  ---theme-color-lime-99: rgb(30, 50, 10); /* from Tailwind lime-950 */
  ---theme-color-lime: var(---theme-color-lime-50);

  ---theme-color-green-10: rgb(240, 253, 244); /* from Tailwind green-50 */
  ---theme-color-green-20: rgb(220, 252, 231); /* from Tailwind green-100 */
  ---theme-color-green-30: rgb(187, 247, 208); /* from Tailwind green-200 */
  ---theme-color-green-40: rgb(134, 239, 172); /* from Tailwind green-300 */
  ---theme-color-green-50: rgb(74, 222, 128); /* from Tailwind green-400 */
  ---theme-color-green-60: rgb(34, 197, 94); /* from Tailwind green-500 */
  ---theme-color-green-70: rgb(22, 163, 74); /* from Tailwind green-600 */
  ---theme-color-green-80: rgb(21, 128, 61); /* from Tailwind green-700 */
  ---theme-color-green-90: rgb(22, 101, 52); /* from Tailwind green-800 */
  ---theme-color-green-95: rgb(20, 83, 45); /* from Tailwind green-900 */
  ---theme-color-green-99: rgb(5, 46, 22); /* from Tailwind green-950 */
  ---theme-color-green: var(---theme-color-green-50);

  ---theme-color-emerald-10: rgb(236, 253, 245); /* from Tailwind emerald-50 */
  ---theme-color-emerald-20: rgb(209, 250, 229); /* from Tailwind emerald-100 */
  ---theme-color-emerald-30: rgb(167, 243, 208); /* from Tailwind emerald-200 */
  ---theme-color-emerald-40: rgb(110, 231, 183); /* from Tailwind emerald-300 */
  ---theme-color-emerald-50: rgb(52, 211, 153); /* from Tailwind emerald-400 */
  ---theme-color-emerald-60: rgb(16, 185, 129); /* from Tailwind emerald-500 */
  ---theme-color-emerald-70: rgb(5, 150, 105); /* from Tailwind emerald-600 */
  ---theme-color-emerald-80: rgb(4, 120, 87); /* from Tailwind emerald-700 */
  ---theme-color-emerald-90: rgb(6, 95, 70); /* from Tailwind emerald-800 */
  ---theme-color-emerald-95: rgb(6, 78, 59); /* from Tailwind emerald-900 */
  ---theme-color-emerald-99: rgb(2, 44, 34); /* from Tailwind emerald-950 */
  ---theme-color-emerald: var(---theme-color-emerald-50);

  ---theme-color-teal-10: rgb(240, 253, 250); /* from Tailwind teal-50 */
  ---theme-color-teal-20: rgb(204, 251, 241); /* from Tailwind teal-100 */
  ---theme-color-teal-30: rgb(153, 246, 228); /* from Tailwind teal-200 */
  ---theme-color-teal-40: rgb(94, 234, 212); /* from Tailwind teal-300 */
  ---theme-color-teal-50: rgb(45, 212, 191); /* from Tailwind teal-400 */
  ---theme-color-teal-60: rgb(20, 183, 171); /* from Tailwind teal-500 */
  ---theme-color-teal-70: rgb(13, 148, 136); /* from Tailwind teal-600 */
  ---theme-color-teal-80: rgb(15, 118, 110); /* from Tailwind teal-700 */
  ---theme-color-teal-90: rgb(17, 94, 89); /* from Tailwind teal-800 */
  ---theme-color-teal-95: rgb(19, 78, 74); /* from Tailwind teal-900 */
  ---theme-color-teal-99: rgb(4, 47, 46); /* from Tailwind teal-950 */
  ---theme-color-teal: var(---theme-color-teal-50);

  ---theme-color-cyan-10: rgb(236, 254, 255); /* from Tailwind cyan-50 */
  ---theme-color-cyan-20: rgb(207, 250, 254); /* from Tailwind cyan-100 */
  ---theme-color-cyan-30: rgb(165, 243, 252); /* from Tailwind cyan-200 */
  ---theme-color-cyan-40: rgb(103, 232, 249); /* from Tailwind cyan-300 */
  ---theme-color-cyan-50: rgb(34, 211, 238); /* from Tailwind cyan-400 */
  ---theme-color-cyan-60: rgb(6, 182, 212); /* from Tailwind cyan-500 */
  ---theme-color-cyan-70: rgb(8, 145, 178); /* from Tailwind cyan-600 */
  ---theme-color-cyan-80: rgb(14, 116, 144); /* from Tailwind cyan-700 */
  ---theme-color-cyan-90: rgb(21, 94, 117); /* from Tailwind cyan-800 */
  ---theme-color-cyan-95: rgb(22, 78, 99); /* from Tailwind cyan-900 */
  ---theme-color-cyan-99: rgb(8, 51, 68); /* from Tailwind cyan-950 */
  ---theme-color-cyan: var(---theme-color-cyan-50);

  ---theme-color-sky-10: rgb(240, 249, 255); /* from Tailwind sky-50 */
  ---theme-color-sky-20: rgb(224, 242, 254); /* from Tailwind sky-100 */
  ---theme-color-sky-30: rgb(186, 230, 253); /* from Tailwind sky-200 */
  ---theme-color-sky-40: rgb(125, 211, 252); /* from Tailwind sky-300 */
  ---theme-color-sky-50: rgb(56, 189, 248); /* from Tailwind sky-400 */
  ---theme-color-sky-60: rgb(14, 165, 233); /* from Tailwind sky-500 */
  ---theme-color-sky-70: rgb(2, 132, 199); /* from Tailwind sky-600 */
  ---theme-color-sky-80: rgb(3, 105, 161); /* from Tailwind sky-700 */
  ---theme-color-sky-90: rgb(7, 89, 133); /* from Tailwind sky-800 */
  ---theme-color-sky-95: rgb(12, 74, 110); /* from Tailwind sky-900 */
  ---theme-color-sky-99: rgb(8, 47, 73); /* from Tailwind sky-950 */
  ---theme-color-sky: var(---theme-color-sky-50);

  ---theme-color-blue-10: rgb(239, 246, 255); /* from Tailwind blue-50 */
  ---theme-color-blue-20: rgb(219, 234, 254); /* from Tailwind blue-100 */
  ---theme-color-blue-30: rgb(191, 219, 253); /* from Tailwind blue-200 */
  ---theme-color-blue-40: rgb(147, 197, 253); /* from Tailwind blue-300 */
  ---theme-color-blue-50: rgb(96, 165, 250); /* from Tailwind blue-400 */
  ---theme-color-blue-60: rgb(59, 130, 246); /* from Tailwind blue-500 */
  ---theme-color-blue-70: rgb(37, 99, 235); /* from Tailwind blue-600 */
  ---theme-color-blue-80: rgb(29, 78, 216); /* from Tailwind blue-700 */
  ---theme-color-blue-90: rgb(30, 64, 175); /* from Tailwind blue-800 */
  ---theme-color-blue-95: rgb(30, 58, 138); /* from Tailwind blue-900 */
  ---theme-color-blue-99: rgb(23, 37, 84); /* from Tailwind blue-950 */
  ---theme-color-blue: var(---theme-color-blue-50);

  ---theme-color-indigo-10: rgb(238, 242, 255); /* from Tailwind indigo-50 */
  ---theme-color-indigo-20: rgb(224, 231, 255); /* from Tailwind indigo-100 */
  ---theme-color-indigo-30: rgb(199, 210, 254); /* from Tailwind indigo-200 */
  ---theme-color-indigo-40: rgb(165, 180, 252); /* from Tailwind indigo-300 */
  ---theme-color-indigo-50: rgb(129, 140, 248); /* from Tailwind indigo-400 */
  ---theme-color-indigo-60: rgb(99, 102, 241); /* from Tailwind indigo-500 */
  ---theme-color-indigo-70: rgb(79, 70, 229); /* from Tailwind indigo-600 */
  ---theme-color-indigo-80: rgb(67, 56, 202); /* from Tailwind indigo-700 */
  ---theme-color-indigo-90: rgb(55, 48, 163); /* from Tailwind indigo-800 */
  ---theme-color-indigo-95: rgb(49, 46, 129); /* from Tailwind indigo-900 */
  ---theme-color-indigo-99: rgb(30, 27, 75); /* from Tailwind indigo-950 */
  ---theme-color-indigo: var(---theme-color-indigo-50);

  ---theme-color-violet-10: rgb(245, 243, 255); /* from Tailwind violet-50 */
  ---theme-color-violet-20: rgb(237, 233, 254); /* from Tailwind violet-100 */
  ---theme-color-violet-30: rgb(221, 214, 254); /* from Tailwind violet-200 */
  ---theme-color-violet-40: rgb(196, 181, 253); /* from Tailwind violet-300 */
  ---theme-color-violet-50: rgb(167, 139, 250); /* from Tailwind violet-400 */
  ---theme-color-violet-60: rgb(139, 92, 246); /* from Tailwind violet-500 */
  ---theme-color-violet-70: rgb(124, 58, 237); /* from Tailwind violet-600 */
  ---theme-color-violet-80: rgb(109, 40, 217); /* from Tailwind violet-700 */
  ---theme-color-violet-90: rgb(91, 33, 182); /* from Tailwind violet-800 */
  ---theme-color-violet-95: rgb(76, 29, 149); /* from Tailwind violet-900 */
  ---theme-color-violet-99: rgb(46, 16, 101); /* from Tailwind violet-950 */
  ---theme-color-violet: var(---theme-color-violet-50);

  ---theme-color-purple-10: rgb(250, 245, 255); /* from Tailwind purple-50 */
  ---theme-color-purple-20: rgb(243, 232, 255); /* from Tailwind purple-100 */
  ---theme-color-purple-30: rgb(233, 213, 255); /* from Tailwind purple-200 */
  ---theme-color-purple-40: rgb(216, 180, 254); /* from Tailwind purple-300 */
  ---theme-color-purple-50: rgb(192, 132, 252); /* from Tailwind purple-400 */
  ---theme-color-purple-60: rgb(168, 85, 247); /* from Tailwind purple-500 */
  ---theme-color-purple-70: rgb(147, 51, 234); /* from Tailwind purple-600 */
  ---theme-color-purple-80: rgb(126, 34, 206); /* from Tailwind purple-700 */
  ---theme-color-purple-90: rgb(107, 33, 168); /* from Tailwind purple-800 */
  ---theme-color-purple-95: rgb(88, 28, 135); /* from Tailwind purple-900 */
  ---theme-color-purple-99: rgb(59, 7, 100); /* from Tailwind purple-950 */
  ---theme-color-purple: var(---theme-color-purple-50);

  ---theme-color-fuchsia-10: rgb(253, 244, 255); /* from Tailwind fuchsia-50 */
  ---theme-color-fuchsia-20: rgb(250, 232, 255); /* from Tailwind fuchsia-100 */
  ---theme-color-fuchsia-30: rgb(245, 208, 255); /* from Tailwind fuchsia-200 */
  ---theme-color-fuchsia-40: rgb(240, 171, 252); /* from Tailwind fuchsia-300 */
  ---theme-color-fuchsia-50: rgb(232, 121, 249); /* from Tailwind fuchsia-400 */
  ---theme-color-fuchsia-60: rgb(217, 70, 239); /* from Tailwind fuchsia-500 */
  ---theme-color-fuchsia-70: rgb(192, 38, 211); /* from Tailwind fuchsia-600 */
  ---theme-color-fuchsia-80: rgb(162, 28, 175); /* from Tailwind fuchsia-700 */
  ---theme-color-fuchsia-90: rgb(134, 25, 143); /* from Tailwind fuchsia-800 */
  ---theme-color-fuchsia-95: rgb(112, 26, 117); /* from Tailwind fuchsia-900 */
  ---theme-color-fuchsia-99: rgb(74, 4, 76); /* from Tailwind fuchsia-950 */
  ---theme-color-fuchsia: var(---theme-color-fuchsia-50);

  ---theme-color-pink-10: rgb(253, 242, 248); /* from Tailwind pink-50 */
  ---theme-color-pink-20: rgb(252, 231, 243); /* from Tailwind pink-100 */
  ---theme-color-pink-30: rgb(251, 207, 232); /* from Tailwind pink-200 */
  ---theme-color-pink-40: rgb(249, 168, 212); /* from Tailwind pink-300 */
  ---theme-color-pink-50: rgb(244, 114, 182); /* from Tailwind pink-400 */
  ---theme-color-pink-60: rgb(236, 72, 153); /* from Tailwind pink-500 */
  ---theme-color-pink-70: rgb(219, 39, 119); /* from Tailwind pink-600 */
  ---theme-color-pink-80: rgb(190, 24, 93); /* from Tailwind pink-700 */
  ---theme-color-pink-90: rgb(157, 23, 77); /* from Tailwind pink-800 */
  ---theme-color-pink-95: rgb(131, 24, 67); /* from Tailwind pink-900 */
  ---theme-color-pink-99: rgb(80, 7, 36); /* from Tailwind pink-950 */
  ---theme-color-pink: var(---theme-color-pink-50);

  ---theme-color-rose-10: rgb(255, 241, 242); /* from Tailwind rose-50 */
  ---theme-color-rose-20: rgb(255, 228, 230); /* from Tailwind rose-100 */
  ---theme-color-rose-30: rgb(254, 205, 211); /* from Tailwind rose-200 */
  ---theme-color-rose-40: rgb(253, 164, 175); /* from Tailwind rose-300 */
  ---theme-color-rose-50: rgb(251, 113, 133); /* from Tailwind rose-400 */
  ---theme-color-rose-60: rgb(244, 63, 94); /* from Tailwind rose-500 */
  ---theme-color-rose-70: rgb(225, 29, 72); /* from Tailwind rose-600 */
  ---theme-color-rose-80: rgb(190, 18, 60); /* from Tailwind rose-700 */
  ---theme-color-rose-90: rgb(159, 18, 57); /* from Tailwind rose-800 */
  ---theme-color-rose-95: rgb(136, 19, 55); /* from Tailwind rose-900 */
  ---theme-color-rose-99: rgb(76, 5, 25); /* from Tailwind rose-950 */
  ---theme-color-rose: var(---theme-color-rose-50);

  ---theme-color-slate-10: rgb(248, 250, 252); /* from Tailwind slate-50 */
  ---theme-color-slate-20: rgb(241, 245, 249); /* from Tailwind slate-100 */
  ---theme-color-slate-30: rgb(226, 232, 240); /* from Tailwind slate-200 */
  ---theme-color-slate-40: rgb(203, 213, 225); /* from Tailwind slate-300 */
  ---theme-color-slate-50: rgb(148, 163, 184); /* from Tailwind slate-400 */
  ---theme-color-slate-60: rgb(100, 116, 139); /* from Tailwind slate-500 */
  ---theme-color-slate-70: rgb(71, 85, 105); /* from Tailwind slate-600 */
  ---theme-color-slate-80: rgb(51, 65, 85); /* from Tailwind slate-700 */
  ---theme-color-slate-90: rgb(30, 41, 59); /* from Tailwind slate-800 */
  ---theme-color-slate-95: rgb(15, 23, 42); /* from Tailwind slate-900 */
  ---theme-color-slate-99: rgb(2, 6, 23); /* from Tailwind slate-950 */
  ---theme-color-slate: var(---theme-color-slate-50);

  ---theme-color-gray-10: rgb(249, 250, 251); /* from Tailwind gray-50 */
  ---theme-color-gray-20: rgb(243, 244, 246); /* from Tailwind gray-100 */
  ---theme-color-gray-30: rgb(229, 231, 235); /* from Tailwind gray-200 */
  ---theme-color-gray-40: rgb(209, 213, 219); /* from Tailwind gray-300 */
  ---theme-color-gray-50: rgb(156, 163, 175); /* from Tailwind gray-400 */
  ---theme-color-gray-60: rgb(107, 114, 128); /* from Tailwind gray-500 */
  ---theme-color-gray-70: rgb(75, 85, 99); /* from Tailwind gray-600 */
  ---theme-color-gray-80: rgb(55, 65, 82); /* from Tailwind gray-700 */
  ---theme-color-gray-90: rgb(31, 41, 55); /* from Tailwind gray-800 */
  ---theme-color-gray-95: rgb(17, 24, 39); /* from Tailwind gray-900 */
  ---theme-color-gray-99: rgb(3, 7, 18); /* from Tailwind gray-950 */
  ---theme-color-gray: var(---theme-color-gray-50);

  ---theme-color-zinc-10: rgb(250, 250, 250); /* from Tailwind zinc-50 */
  ---theme-color-zinc-20: rgb(244, 244, 245); /* from Tailwind zinc-100 */
  ---theme-color-zinc-30: rgb(228, 228, 231); /* from Tailwind zinc-200 */
  ---theme-color-zinc-40: rgb(212, 212, 216); /* from Tailwind zinc-300 */
  ---theme-color-zinc-50: rgb(161, 161, 170); /* from Tailwind zinc-400 */
  ---theme-color-zinc-60: rgb(113, 113, 122); /* from Tailwind zinc-500 */
  ---theme-color-zinc-70: rgb(82, 82, 91); /* from Tailwind zinc-600 */
  ---theme-color-zinc-80: rgb(63, 63, 70); /* from Tailwind zinc-700 */
  ---theme-color-zinc-90: rgb(39, 39, 42); /* from Tailwind zinc-800 */
  ---theme-color-zinc-95: rgb(24, 24, 27); /* from Tailwind zinc-900 */
  ---theme-color-zinc-99: rgb(9, 9, 11); /* from Tailwind zinc-950 */
  ---theme-color-zinc: var(---theme-color-zinc-50);

  ---theme-color-stone-10: rgb(250, 250, 249); /* from Tailwind stone-50 */
  ---theme-color-stone-20: rgb(245, 245, 244); /* from Tailwind stone-100 */
  ---theme-color-stone-30: rgb(231, 229, 228); /* from Tailwind stone-200 */
  ---theme-color-stone-40: rgb(214, 211, 209); /* from Tailwind stone-300 */
  ---theme-color-stone-50: rgb(168, 162, 158); /* from Tailwind stone-400 */
  ---theme-color-stone-60: rgb(120, 113, 108); /* from Tailwind stone-500 */
  ---theme-color-stone-70: rgb(87, 83, 78); /* from Tailwind stone-600 */
  ---theme-color-stone-80: rgb(68, 64, 60); /* from Tailwind stone-700 */
  ---theme-color-stone-90: rgb(41, 37, 36); /* from Tailwind stone-800 */
  ---theme-color-stone-95: rgb(28, 25, 23); /* from Tailwind stone-900 */
  ---theme-color-stone-99: rgb(12, 10, 9); /* from Tailwind stone-950 */
  ---theme-color-stone: var(---theme-color-stone-50);

  ---theme-color-neutral-10: rgb(250, 250, 250); /* from Tailwind neutral-50 */
  ---theme-color-neutral-20: rgb(247, 247, 247); /* from Tailwind neutral-100 */
  ---theme-color-neutral-30: rgb(235, 235, 235); /* from Tailwind neutral-200 */
  ---theme-color-neutral-40: rgb(222, 222, 222); /* from Tailwind neutral-300 */
  ---theme-color-neutral-50: rgb(181, 181, 181); /* from Tailwind neutral-400 */
  ---theme-color-neutral-60: rgb(142, 142, 142); /* from Tailwind neutral-500 */
  ---theme-color-neutral-70: rgb(112, 112, 112); /* from Tailwind neutral-600 */
  ---theme-color-neutral-80: rgb(95, 95, 95); /* from Tailwind neutral-700 */
  ---theme-color-neutral-90: rgb(69, 69, 69); /* from Tailwind neutral-800 */
  ---theme-color-neutral-95: rgb(52, 52, 52); /* from Tailwind neutral-900 */
  ---theme-color-neutral-99: rgb(37, 37, 37); /* from Tailwind neutral-950 */
  ---theme-color-neutral: var(---theme-color-neutral-50);

  /* Neutral one-offs */
  ---theme-color-neutral-0: rgb(255, 255, 255);
  ---theme-color-neutral-100: rgb(0, 0, 0);

  /* Elements */
  ---theme-color-bg: rgb(255, 255, 255);
  ---theme-color-bg-00: rgba(255, 255, 255, 0);
  ---theme-color-bg-01: rgba(255, 255, 255, 0.01);
  ---theme-color-bg-02: rgba(255, 255, 255, 0.02);
  ---theme-color-bg-03: rgba(255, 255, 255, 0.03);
  ---theme-color-bg-04: rgba(255, 255, 255, 0.04);
  ---theme-color-bg-05: rgba(255, 255, 255, 0.05);
  ---theme-color-bg-06: rgba(255, 255, 255, 0.06);
  ---theme-color-bg-07: rgba(255, 255, 255, 0.07);
  ---theme-color-bg-08: rgba(255, 255, 255, 0.08);
  ---theme-color-bg-09: rgba(255, 255, 255, 0.09);
  ---theme-color-bg-10: rgba(255, 255, 255, 0.1);
  ---theme-color-bg-11: rgba(255, 255, 255, 0.11);
  ---theme-color-bg-12: rgba(255, 255, 255, 0.12);
  ---theme-color-bg-13: rgba(255, 255, 255, 0.13);
  ---theme-color-bg-14: rgba(255, 255, 255, 0.14);
  ---theme-color-bg-15: rgba(255, 255, 255, 0.15);
  ---theme-color-bg-20: rgba(255, 255, 255, 0.2);
  ---theme-color-bg-25: rgba(255, 255, 255, 0.25);
  ---theme-color-bg-30: rgba(255, 255, 255, 0.3);
  ---theme-color-bg-40: rgba(255, 255, 255, 0.4);
  ---theme-color-bg-50: rgba(255, 255, 255, 0.5);
  ---theme-color-bg-60: rgba(255, 255, 255, 0.6);
  ---theme-color-bg-70: rgba(255, 255, 255, 0.7);
  ---theme-color-bg-80: rgba(255, 255, 255, 0.8);
  ---theme-color-bg-90: rgba(255, 255, 255, 0.9);
  ---theme-color-fg: rgb(0, 0, 0);
  ---theme-color-fg-00: rgba(0, 0, 0, 0);
  ---theme-color-fg-01: rgba(0, 0, 0, 0.01);
  ---theme-color-fg-02: rgba(0, 0, 0, 0.02);
  ---theme-color-fg-03: rgba(0, 0, 0, 0.03);
  ---theme-color-fg-04: rgba(0, 0, 0, 0.04);
  ---theme-color-fg-05: rgba(0, 0, 0, 0.05);
  ---theme-color-fg-06: rgba(0, 0, 0, 0.06);
  ---theme-color-fg-07: rgba(0, 0, 0, 0.07);
  ---theme-color-fg-08: rgba(0, 0, 0, 0.08);
  ---theme-color-fg-09: rgba(0, 0, 0, 0.09);
  ---theme-color-fg-10: rgba(0, 0, 0, 0.1);
  ---theme-color-fg-11: rgba(0, 0, 0, 0.11);
  ---theme-color-fg-12: rgba(0, 0, 0, 0.12);
  ---theme-color-fg-13: rgba(0, 0, 0, 0.13);
  ---theme-color-fg-14: rgba(0, 0, 0, 0.14);
  ---theme-color-fg-15: rgba(0, 0, 0, 0.15);
  ---theme-color-fg-20: rgba(0, 0, 0, 0.2);
  ---theme-color-fg-25: rgba(0, 0, 0, 0.25);
  ---theme-color-fg-30: rgba(0, 0, 0, 0.3);
  ---theme-color-fg-40: rgba(0, 0, 0, 0.4);
  ---theme-color-fg-50: rgba(0, 0, 0, 0.5);
  ---theme-color-fg-60: rgba(0, 0, 0, 0.6);
  ---theme-color-fg-70: rgba(0, 0, 0, 0.7);
  ---theme-color-fg-80: rgba(0, 0, 0, 0.8);
  ---theme-color-fg-90: rgba(0, 0, 0, 0.9);

  /* General */
  ---theme-color-surface: var(---theme-color-neutral-20);
  ---theme-color-surface-border: var(---theme-color-fg-12);
  ---theme-color-divider: var(---theme-color-fg-13);

  /* Scrollbars */
  ---theme-color-scrollbar-thumb: var(---theme-color-fg-25);
  ---theme-color-scrollbar-thumb-hover: var(---theme-color-fg-50);
  ---theme-color-scrollbar-track: var(---theme-color-bg-10);

  /*
   * Opacities
   */

  ---theme-opacity-overlay: 0.25;
}


:is(:root, :host, [theme], .theme-dark, .theme-light) > * {
  /* Primary */
  ---theme-color-primary-10: var(---theme-color-sky-10);
  ---theme-color-primary-20: var(---theme-color-sky-20);
  ---theme-color-primary-30: var(---theme-color-sky-30);
  ---theme-color-primary-40: var(---theme-color-sky-40);
  ---theme-color-primary-50: var(---theme-color-sky-50);
  ---theme-color-primary-60: var(---theme-color-sky-60);
  ---theme-color-primary-70: var(---theme-color-sky-70);
  ---theme-color-primary-80: var(---theme-color-sky-80);
  ---theme-color-primary-90: var(---theme-color-sky-90);
  ---theme-color-primary-95: var(---theme-color-sky-95);
  ---theme-color-primary-99: var(---theme-color-sky-99);
  ---theme-color-primary: var(---theme-color-primary-50);

  /* Success */
  ---theme-color-success-10: var(---theme-color-green-10);
  ---theme-color-success-20: var(---theme-color-green-20);
  ---theme-color-success-30: var(---theme-color-green-30);
  ---theme-color-success-40: var(---theme-color-green-40);
  ---theme-color-success-50: var(---theme-color-green-50);
  ---theme-color-success-60: var(---theme-color-green-60);
  ---theme-color-success-70: var(---theme-color-green-70);
  ---theme-color-success-80: var(---theme-color-green-80);
  ---theme-color-success-90: var(---theme-color-green-90);
  ---theme-color-success-95: var(---theme-color-green-95);
  ---theme-color-success-99: var(---theme-color-green-99);
  ---theme-color-success: var(---theme-color-success-50);

  /* Warning */
  ---theme-color-warning-10: var(---theme-color-amber-10);
  ---theme-color-warning-20: var(---theme-color-amber-20);
  ---theme-color-warning-30: var(---theme-color-amber-30);
  ---theme-color-warning-40: var(---theme-color-amber-40);
  ---theme-color-warning-50: var(---theme-color-amber-50);
  ---theme-color-warning-60: var(---theme-color-amber-60);
  ---theme-color-warning-70: var(---theme-color-amber-70);
  ---theme-color-warning-80: var(---theme-color-amber-80);
  ---theme-color-warning-90: var(---theme-color-amber-90);
  ---theme-color-warning-95: var(---theme-color-amber-95);
  ---theme-color-warning-99: var(---theme-color-amber-99);
  ---theme-color-warning: var(---theme-color-warning-50);

  /* Danger */
  ---theme-color-danger-10: var(---theme-color-red-10);
  ---theme-color-danger-20: var(---theme-color-red-20);
  ---theme-color-danger-30: var(---theme-color-red-30);
  ---theme-color-danger-40: var(---theme-color-red-40);
  ---theme-color-danger-50: var(---theme-color-red-50);
  ---theme-color-danger-60: var(---theme-color-red-60);
  ---theme-color-danger-70: var(---theme-color-red-70);
  ---theme-color-danger-80: var(---theme-color-red-80);
  ---theme-color-danger-90: var(---theme-color-red-90);
  ---theme-color-danger-95: var(---theme-color-red-95);
  ---theme-color-danger-99: var(---theme-color-red-99);
  ---theme-color-danger: var(---theme-color-danger-50);

  /* General */
  ---theme-color-border-focus: var(---theme-color-primary-70);
  ---theme-color-border-hover: var(---theme-color-neutral-80);
  ---theme-color-border-active: var(---theme-color-neutral-70);
  ---theme-color-border-checked: var(---theme-color-primary-60);
  ---theme-color-background-hover: var(---theme-color-neutral-30);
  ---theme-color-background-active: var(---theme-color-neutral-40);
  ---theme-color-background-selected: var(---theme-color-neutral-50);
  ---theme-color-background-checked: var(---theme-color-primary-60);

  /*
   * Breakpoints
   */

  ---theme-breakpoint-xs: 400px;
  ---theme-breakpoint-sm: 600px;
  ---theme-breakpoint-md: 960px;
  ---theme-breakpoint-lg: 1280px;
  ---theme-breakpoint-xl: 1920px;

  /*
   * Typography
   */

  /* Fonts */
  ---theme-font-mono: "Courier Prime Sans", SFMono-Regular, Consolas,
    "Liberation Mono", Menlo, monospace;
  ---theme-font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Helvetica, Arial, system-ui, sans-serif, "Apple Color Emoji",
    "Segoe UI Emoji", "Segoe UI Symbol";
  ---theme-font-serif: Georgia, "Times New Roman", serif;
  ---theme-font-icon: "icon";

  /* Type Scales */
  ---theme-text-2xs-font-size: 0.6875rem;
  ---theme-text-2xs-line-height: 1rem;

  ---theme-text-xs-font-size: 0.75rem;
  ---theme-text-xs-line-height: 1rem;

  ---theme-text-sm-font-size: 0.875rem;
  ---theme-text-sm-line-height: 1.25rem;

  ---theme-text-md-font-size: 1rem;
  ---theme-text-md-line-height: 1.5rem;

  ---theme-text-lg-font-size: 1.125rem;
  ---theme-text-lg-line-height: 1.75rem;

  ---theme-text-xl-font-size: 1.25rem;
  ---theme-text-xl-line-height: 1.75rem;

  ---theme-text-2xl-font-size: 1.5rem;
  ---theme-text-2xl-line-height: 2rem;

  ---theme-text-3xl-font-size: 1.875rem;
  ---theme-text-3xl-line-height: 2.25rem;

  ---theme-text-4xl-font-size: 2.25rem;
  ---theme-text-4xl-line-height: 2.5rem;

  ---theme-text-5xl-font-size: 3rem;
  ---theme-text-5xl-line-height: 1;

  ---theme-text-6xl-font-size: 3.75rem;
  ---theme-text-6xl-line-height: 1;

  ---theme-text-7xl-font-size: 4.5rem;
  ---theme-text-7xl-line-height: 1;

  ---theme-text-8xl-font-size: 6rem;
  ---theme-text-8xl-line-height: 1;

  ---theme-text-9xl-font-size: 8rem;
  ---theme-text-9xl-line-height: 1;

  /* Text Leading */
  ---theme-text-leading-none: 1;
  ---theme-text-leading-xs: 1.25;
  ---theme-text-leading-sm: 1.375;
  ---theme-text-leading-md: 1.5;
  ---theme-text-leading-lg: 1.625;
  ---theme-text-leading-xl: 2;
  ---theme-text-leading-2xl: 4;

  /*
   * Opacities
   */

  ---theme-opacity-drag: 0.16;
  ---theme-opacity-press: 0.12;
  ---theme-opacity-focus: 0.12;
  ---theme-opacity-hover: 0.05;

  /*
   * Z-indexes
   */

  ---theme-z-index-drawer: 700;
  ---theme-z-index-dialog: 800;
  ---theme-z-index-dropdown: 900;
  ---theme-z-index-toast: 950;
  ---theme-z-index-tooltip: 1000;

  /*
   * Scrollbars
   */

  ---theme-scrollbar-size: 8px;
  ---theme-scrollbar-thickness: thin;

  /*
   * Ratios
   */
  ---theme-ratio-square: 1;
  ---theme-ratio-landscape: 4/3;
  ---theme-ratio-portrait: 3/4;
  ---theme-ratio-widescreen: 16/9;
  ---theme-ratio-ultrawide: 18/5;
  ---theme-ratio-eighth: 1/8;
  ---theme-ratio-quarter: 1/4;
  ---theme-ratio-half: 1/2;
  ---theme-ratio-third: 1/3;
  ---theme-ratio-sixteenth: 1/16;
  ---theme-ratio-minor-second: 1.067;
  ---theme-ratio-major-second: 1.125;
  ---theme-ratio-minor-third: 1.2;
  ---theme-ratio-major-third: 1.25;
  ---theme-ratio-perfect-fourth: 1.333;
  ---theme-ratio-augmented-fourth: 1.414;
  ---theme-ratio-perfect-fifth: 1.5;
  ---theme-ratio-golden: 1.618;
  ---theme-ratio-major-sixth: 1.667;
  ---theme-ratio-minor-seventh: 1.778;
  ---theme-ratio-major-seventh: 1.875;
  ---theme-ratio-octave: 2;

  /*
   * Spacing
   */
  ---theme-spacing-3xs: 2px;
  ---theme-spacing-2xs: 4px;
  ---theme-spacing-xs: 8px;
  ---theme-spacing-sm: 12px;
  ---theme-spacing-md: 16px;
  ---theme-spacing-lg: 20px;
  ---theme-spacing-xl: 28px;
  ---theme-spacing-2xl: 36px;
  ---theme-spacing-3xl: 48px;
  ---theme-spacing-4xl: 72px;

  /*
   * Transitions
   */
  ---theme-transition-x-slow: 1000ms;
  ---theme-transition-slow: 500ms;
  ---theme-transition-medium: 250ms;
  ---theme-transition-fast: 150ms;
  ---theme-transition-x-fast: 50ms;

  /* 
   * Focus rings 
   */
  ---theme-focus-ring-color: var(---theme-color-primary-20);
  ---theme-focus-ring-style: solid;
  ---theme-focus-ring-width: 3px;
  ---theme-focus-ring-offset: 2px;

  /* 
   * Radius
   */
  ---theme-radius-sm: 4px;
  ---theme-radius-md: 6px;
  ---theme-radius-lg: 8px;

  /* 
   * Padding
   */
  ---theme-padding-button: var(---theme-spacing-xs) var(---theme-spacing-lg);
  ---theme-padding-input: var(---theme-spacing-xs) var(---theme-spacing-sm);
  ---theme-padding-option: var(---theme-spacing-2xs) 10px;

  /* 
   * Sizes
   */
  ---theme-size-thumb: 16px;
  ---theme-size-checkbox: 16px;

  /*
   * Borders
   */
  ---theme-border-width-control: 1px;

  /*
  * Icons
  */
  ---theme-icon-check: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="currentColor" d="m9 20.42l-6.21-6.21l2.83-2.83L9 14.77l9.88-9.89l2.83 2.83z"/></svg>');
  ---theme-icon-arrow-down: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor"  d="M7 10l5 5 5-5z"/></svg>');
}


:is(:root, :host, [theme], .theme-dark, .theme-light) > * {
  /* Tooltips */
  ---theme-tooltip-font-size: var(---theme-font-size-sm);
  ---theme-tooltip-font-family: var(---theme-font-sans);
  ---theme-tooltip-line-height: 1.4;
  ---theme-tooltip-font-weight: normal;
  ---theme-tooltip-color: var(---theme-color-neutral-80);
  ---theme-tooltip-background-color: var(---theme-color-neutral-30);
  ---theme-tooltip-border-radius: 6px;
  ---theme-tooltip-arrow-size: 6px;

  /* Buttons */
  ---theme-button-font-size-sm: var(---theme-font-size-xs);
  ---theme-button-font-size-md: var(---theme-font-size-sm);
  ---theme-button-font-size-lg: var(---theme-font-size-md);

  /* Inputs */
  ---theme-input-height-sm: 28px;
  ---theme-input-height-md: 40px;
  ---theme-input-height-lg: 48px;

  ---theme-input-background-color: var(---theme-color-fg-05);

  ---theme-input-border-color: var(---theme-color-neutral-40);
  ---theme-input-border-color-hover: var(---theme-color-neutral-50);
  ---theme-input-border-color-focus: var(---theme-color-primary-60);
  ---theme-input-border-color-disabled: var(---theme-color-neutral-40);
  ---theme-input-border-width: 1px;
  ---theme-input-required-content: "*";
  ---theme-input-required-content-offset: -2px;
  ---theme-input-required-content-color: var(---theme-input-label-color);

  ---theme-input-border-radius-sm: 4px;
  ---theme-input-border-radius-md: 4px;
  ---theme-input-border-radius-lg: 4px;

  ---theme-input-font-family: var(---theme-font-sans);
  ---theme-input-font-weight: normal;
  ---theme-input-font-size-sm: var(---theme-font-size-sm);
  ---theme-input-font-size-md: var(---theme-font-size-md);
  ---theme-input-font-size-lg: var(---theme-font-size-lg);
  ---theme-input-letter-spacing: var(---theme-letter-spacing-md);

  ---theme-input-spacing-sm: var(---theme-spacing-sm);
  ---theme-input-spacing-md: var(---theme-spacing-md);
  ---theme-input-spacing-lg: var(---theme-spacing-lg);

  ---theme-input-color: var(---theme-color-neutral-90);
  ---theme-input-color-hover: var(---theme-color-neutral-90);
  ---theme-input-color-focus: var(---theme-color-neutral-80);
  ---theme-input-color-disabled: var(---theme-color-neutral-90);
  ---theme-input-icon-color: var(---theme-color-neutral-60);
  ---theme-input-icon-color-hover: var(---theme-color-neutral-70);
  ---theme-input-icon-color-focus: var(---theme-color-neutral-70);
  ---theme-input-placeholder-color: var(---theme-color-neutral-70);
  ---theme-input-placeholder-color-disabled: var(---theme-color-neutral-70);

  ---theme-input-focus-ring-color: hsl(198.6 88.7% 48.4% / 40%);
  ---theme-input-focus-ring-offset: 0;

  ---theme-input-label-font-size-sm: var(---theme-font-size-sm);
  ---theme-input-label-font-size-md: var(---theme-font-size-md);
  ---theme-input-label-font-size-lg: var(---theme-font-size-lg);
  ---theme-input-label-color: inherit;

  ---theme-input-help-text-font-size-sm: var(---theme-font-size-xs);
  ---theme-input-help-text-font-size-md: var(---theme-font-size-sm);
  ---theme-input-help-text-font-size-lg: var(---theme-font-size-md);
  ---theme-input-help-text-color: var(---theme-color-neutral-60);

  /* Toggles (checkboxes, radios, switches) */
  ---theme-toggle-size-sm: 0.875rem; /* 14px */
  ---theme-toggle-size-md: 1.125rem; /* 18px */
  ---theme-toggle-size-lg: 1.375rem; /* 22px */

  /* Icon size */
  ---theme-icon-size: 1.25rem /* 20px */;
}

.s-scroll-lock {
  padding-right: var(---theme-scroll-lock-size) !important;
  overflow: hidden !important;
}


.theme-light {
  ---theme-color-shadow-key-0: hsl(0 0% 0% / 0%);
  ---theme-color-shadow-key-1: hsl(0 0% 0% / 12%);
  ---theme-color-shadow-key-2: hsl(0 0% 0% / 16%);
  ---theme-color-shadow-key-3: hsl(0 0% 0% / 19%);
  ---theme-color-shadow-key-4: hsl(0 0% 0% / 25%);
  ---theme-color-shadow-key-5: hsl(0 0% 0% / 30%);
  ---theme-color-shadow-ambient-0: hsl(0 0% 0% / 0%);
  ---theme-color-shadow-ambient-1: hsl(0 0% 0% / 24%);
  ---theme-color-shadow-ambient-2: hsl(0 0% 0% / 23%);
  ---theme-color-shadow-ambient-3: hsl(0 0% 0% / 23%);
  ---theme-color-shadow-ambient-4: hsl(0 0% 0% / 22%);
  ---theme-color-shadow-ambient-5: hsl(0 0% 0% / 22%);
}

.theme-dark {
  ---theme-color-shadow-key-0: hsl(0 0% 0% / 0%);
  ---theme-color-shadow-key-1: hsl(0 0% 0% / 24%);
  ---theme-color-shadow-key-2: hsl(0 0% 0% / 32%);
  ---theme-color-shadow-key-3: hsl(0 0% 0% / 38%);
  ---theme-color-shadow-key-4: hsl(0 0% 0% / 50%);
  ---theme-color-shadow-key-5: hsl(0 0% 0% / 60%);
  ---theme-color-shadow-ambient-0: hsl(0 0% 0% / 0%);
  ---theme-color-shadow-ambient-1: hsl(0 0% 0% / 48%);
  ---theme-color-shadow-ambient-2: hsl(0 0% 0% / 46%);
  ---theme-color-shadow-ambient-3: hsl(0 0% 0% / 46%);
  ---theme-color-shadow-ambient-4: hsl(0 0% 0% / 44%);
  ---theme-color-shadow-ambient-5: hsl(0 0% 0% / 44%);
}

:root {
  ---theme-y-shadow-key-0: 0;
  ---theme-y-shadow-key-1: 1px;
  ---theme-y-shadow-key-2: 3px;
  ---theme-y-shadow-key-3: 10px;
  ---theme-y-shadow-key-4: 14px;
  ---theme-y-shadow-key-5: 19px;
  ---theme-y-shadow-ambient-0: 0;
  ---theme-y-shadow-ambient-1: 1px;
  ---theme-y-shadow-ambient-2: 3px;
  ---theme-y-shadow-ambient-3: 6px;
  ---theme-y-shadow-ambient-4: 10px;
  ---theme-y-shadow-ambient-5: 15px;

  ---theme-blur-shadow-key-0: 0;
  ---theme-blur-shadow-key-1: 1.5px;
  ---theme-blur-shadow-key-2: 3px;
  ---theme-blur-shadow-key-3: 10px;
  ---theme-blur-shadow-key-4: 14px;
  ---theme-blur-shadow-key-5: 19px;
  ---theme-blur-shadow-ambient-0: 0;
  ---theme-blur-shadow-ambient-1: 1px;
  ---theme-blur-shadow-ambient-2: 3px;
  ---theme-blur-shadow-ambient-3: 3px;
  ---theme-blur-shadow-ambient-4: 5px;
  ---theme-blur-shadow-ambient-5: 6px;

  ---theme-shadow-drop-key-0: 0 var(---theme-y-shadow-key-0)
    calc(var(---theme-blur-shadow-key-0) / 2) var(---theme-color-shadow-key-0);
  ---theme-shadow-drop-key-1: 0 var(---theme-y-shadow-key-1)
    calc(var(---theme-blur-shadow-key-1) / 2) var(---theme-color-shadow-key-1);
  ---theme-shadow-drop-key-2: 0 var(---theme-y-shadow-key-2)
    calc(var(---theme-blur-shadow-key-2) / 2) var(---theme-color-shadow-key-2);
  ---theme-shadow-drop-key-3: 0 var(---theme-y-shadow-key-3)
    calc(var(---theme-blur-shadow-key-3) / 2) var(---theme-color-shadow-key-3);
  ---theme-shadow-drop-key-4: 0 var(---theme-y-shadow-key-4)
    calc(var(---theme-blur-shadow-key-4) / 2) var(---theme-color-shadow-key-4);
  ---theme-shadow-drop-key-5: 0 var(---theme-y-shadow-key-5)
    calc(var(---theme-blur-shadow-key-5) / 2) var(---theme-color-shadow-key-5);
  ---theme-shadow-drop-ambient-0: 0 var(---theme-y-shadow-ambient-0)
    calc(var(---theme-blur-shadow-ambient-0) / 2)
    var(---theme-color-shadow-ambient-0);
  ---theme-shadow-drop-ambient-1: 0 var(---theme-y-shadow-ambient-1)
    calc(var(---theme-blur-shadow-ambient-1) / 2)
    var(---theme-color-shadow-ambient-1);
  ---theme-shadow-drop-ambient-2: 0 var(---theme-y-shadow-ambient-2)
    calc(var(---theme-blur-shadow-ambient-2) / 2)
    var(---theme-color-shadow-ambient-2);
  ---theme-shadow-drop-ambient-3: 0 var(---theme-y-shadow-ambient-3)
    calc(var(---theme-blur-shadow-ambient-3) / 2)
    var(---theme-color-shadow-ambient-3);
  ---theme-shadow-drop-ambient-4: 0 var(---theme-y-shadow-ambient-4)
    calc(var(---theme-blur-shadow-ambient-4) / 2)
    var(---theme-color-shadow-ambient-4);
  ---theme-shadow-drop-ambient-5: 0 var(---theme-y-shadow-ambient-5)
    calc(var(---theme-blur-shadow-ambient-5) / 2)
    var(---theme-color-shadow-ambient-5);

  ---theme-shadow-drop-0: drop-shadow(var(---theme-shadow-drop-key-0))
    drop-shadow(var(---theme-shadow-drop-ambient-0));
  ---theme-shadow-drop-1: drop-shadow(var(---theme-shadow-drop-key-1))
    drop-shadow(var(---theme-shadow-drop-ambient-1));
  ---theme-shadow-drop-2: drop-shadow(var(---theme-shadow-drop-key-2))
    drop-shadow(var(---theme-shadow-drop-ambient-2));
  ---theme-shadow-drop-3: drop-shadow(var(---theme-shadow-drop-key-3))
    drop-shadow(var(---theme-shadow-drop-ambient-3));
  ---theme-shadow-drop-4: drop-shadow(var(---theme-shadow-drop-key-4))
    drop-shadow(var(---theme-shadow-drop-ambient-4));
  ---theme-shadow-drop-5: drop-shadow(var(---theme-shadow-drop-key-5))
    drop-shadow(var(---theme-shadow-drop-ambient-5));

  ---theme-shadow-key-0: 0 var(---theme-y-shadow-key-0)
    var(---theme-blur-shadow-key-0) var(---theme-color-shadow-key-0);
  ---theme-shadow-key-1: 0 var(---theme-y-shadow-key-1)
    var(---theme-blur-shadow-key-1) var(---theme-color-shadow-key-1);
  ---theme-shadow-key-2: 0 var(---theme-y-shadow-key-2)
    var(---theme-blur-shadow-key-2) var(---theme-color-shadow-key-2);
  ---theme-shadow-key-3: 0 var(---theme-y-shadow-key-3)
    var(---theme-blur-shadow-key-3) var(---theme-color-shadow-key-3);
  ---theme-shadow-key-4: 0 var(---theme-y-shadow-key-4)
    var(---theme-blur-shadow-key-4) var(---theme-color-shadow-key-4);
  ---theme-shadow-key-5: 0 var(---theme-y-shadow-key-5)
    var(---theme-blur-shadow-key-5) var(---theme-color-shadow-key-5);
  ---theme-shadow-ambient-0: 0 var(---theme-y-shadow-ambient-0)
    var(---theme-blur-shadow-ambient-0) var(---theme-color-shadow-ambient-0);
  ---theme-shadow-ambient-1: 0 var(---theme-y-shadow-ambient-1)
    var(---theme-blur-shadow-ambient-1) var(---theme-color-shadow-ambient-1);
  ---theme-shadow-ambient-2: 0 var(---theme-y-shadow-ambient-2)
    var(---theme-blur-shadow-ambient-2) var(---theme-color-shadow-ambient-2);
  ---theme-shadow-ambient-3: 0 var(---theme-y-shadow-ambient-3)
    var(---theme-blur-shadow-ambient-3) var(---theme-color-shadow-ambient-3);
  ---theme-shadow-ambient-4: 0 var(---theme-y-shadow-ambient-4)
    var(---theme-blur-shadow-ambient-4) var(---theme-color-shadow-ambient-4);
  ---theme-shadow-ambient-5: 0 var(---theme-y-shadow-ambient-5)
    var(---theme-blur-shadow-ambient-5) var(---theme-color-shadow-ambient-5);

  ---theme-shadow-box-0: var(---theme-shadow-key-0),
    var(---theme-shadow-ambient-0);
  ---theme-shadow-box-1: var(---theme-shadow-key-1),
    var(---theme-shadow-ambient-1);
  ---theme-shadow-box-2: var(---theme-shadow-key-2),
    var(---theme-shadow-ambient-2);
  ---theme-shadow-box-3: var(---theme-shadow-key-3),
    var(---theme-shadow-ambient-3);
  ---theme-shadow-box-4: var(---theme-shadow-key-4),
    var(---theme-shadow-ambient-4);
  ---theme-shadow-box-5: var(---theme-shadow-key-5),
    var(---theme-shadow-ambient-5);

  ---theme-shadow-inset-0: inset var(---theme-shadow-key-0),
    inset var(---theme-shadow-ambient-0);
  ---theme-shadow-inset-1: inset var(---theme-shadow-key-1),
    inset var(---theme-shadow-ambient-1);
  ---theme-shadow-inset-2: inset var(---theme-shadow-key-2),
    inset var(---theme-shadow-ambient-2);
  ---theme-shadow-inset-3: inset var(---theme-shadow-key-3),
    inset var(---theme-shadow-ambient-3);
  ---theme-shadow-inset-4: inset var(---theme-shadow-key-4),
    inset var(---theme-shadow-ambient-4);
  ---theme-shadow-inset-5: inset var(---theme-shadow-key-5),
    inset var(---theme-shadow-ambient-5);
}


*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  text-underline-offset: 3px;
  background-size: cover;
  border: none;
  pointer-events: none;
  touch-action: var(---touch-action, none);
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

button,
[role="button"] {
  pointer-events: auto;
}

*::-moz-focus-inner {
  border: none;
}

*:focus {
  outline: none;
}

*:focus-visible {
  outline: none;
}

*::-webkit-scrollbar {
  width: var(---theme-scrollbar-size, 8px);
  height: var(---theme-scrollbar-size, 8px);
}

*::-webkit-scrollbar-thumb:hover {
  background-color: var(
    ---theme-color-scrollbar-thumb-hover,
    hsl(0 0% 0% / 50%)
  );
}

*::-webkit-scrollbar-thumb {
  background-color: var(---theme-color-scrollbar-thumb, hsl(0 0% 0% / 25%));
  border-radius: 9999px;
}

*::-webkit-scrollbar-track {
  background-color: var(---theme-color-scrollbar-track, hsl(0 0% 0% / 15%));
}

*::-webkit-scrollbar-button {
  display: none;
}

*::-webkit-scrollbar-corner {
  display: none;
}

/* scrollbar-color and scrollbar-width is only supported in Firefox */

* {
  scrollbar-width: var(---theme-scrollbar-thickness, thin);
  scrollbar-color: var(---theme-color-scrollbar-thumb, hsl(0 0% 0% / 25%))
    var(---theme-color-scrollbar-track, hsl(0 0% 0% / 15%));
}

[hidden] {
  display: none !important;
}

* {
  flex-direction: column;
  flex-wrap: nowrap;
  flex-shrink: 0;
  min-width: 0;
  max-width: 100%;
}

[hidden] {
  display: none !important;
}

slot {
  border-radius: inherit;
  color: inherit;
}

* slot {
  border-radius: inherit;
}

@keyframes spin {
  to {
    transform: rotate(1turn);
  }
}

@keyframes ping {
  0% {
    box-shadow: 0 0 0 0 var(---color);
  }

  70% {
    box-shadow: 0 0 0 0.5rem transparent;
  }

  100% {
    box-shadow: 0 0 0 0 transparent;
  }
}

@keyframes sheen {
  0% {
    background-position: 200% 0;
  }

  to {
    background-position: -200% 0;
  }
}

@keyframes blink {
  0%, 100% {
    opacity: 1;
  }

  50% {
    opacity: 0.5;
  }
}

@keyframes float {
  50% {
    transform: translateY(-25%);
  }
}

@keyframes bounce {
  0%, 100% {
    transform: translateY(-25%);
    animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
  }

  50% {
    transform: translateY(0);
    animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
  }
}

@keyframes fade-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes fade-out {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

@keyframes scale-up {
  to {
    transform: scale(1);
  }
}

@keyframes scale-down {
  to {
    transform: scale(0.8);
  }
}

@keyframes slide-out-up {
  to {
    transform: translateY(-100%);
  }
}

@keyframes slide-out-down {
  to {
    transform: translateY(100%);
  }
}

@keyframes slide-out-right {
  to {
    transform: translateX(100%);
  }
}

@keyframes slide-out-left {
  to {
    transform: translateX(-100%);
  }
}

@keyframes slide-in-up {
  from {
    transform: translateY(100%);
  }
}

@keyframes slide-in-down {
  from {
    transform: translateY(-100%);
  }
}

@keyframes slide-in-right {
  from {
    transform: translateX(-100%);
  }
}

@keyframes slide-in-left {
  from {
    transform: translateX(100%);
  }
}

@keyframes exit-fade {
  to {
    opacity: 0;
  }
}

@keyframes exit-zoom {
  from {
    transform: scale(1);
  }

  to {
    transform: scale(0.99);
  }
}

@keyframes exit-right {
  to {
    transform: translateX(32px);
  }
}

@keyframes exit-left {
  to {
    transform: translateX(-32px);
  }
}

@keyframes exit-up {
  to {
    transform: translateY(-32px);
  }
}

@keyframes exit-down {
  to {
    transform: translateY(32px);
  }
}

@keyframes exit-out {
  to {
    transform: scale(0.99);
  }
}

@keyframes exit-in {
  to {
    transform: scale(1.1);
  }
}

@keyframes enter-fade {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes enter-zoom {
  from {
    transform: scale(0.99);
  }

  to {
    transform: scale(1);
  }
}

@keyframes enter-right {
  from {
    transform: translateX(-32px);
  }

  to {
    transform: translateX(0);
  }
}

@keyframes enter-left {
  from {
    transform: translateX(32px);
  }

  to {
    transform: translateX(0);
  }
}

@keyframes enter-up {
  from {
    transform: translateY(32px);
  }

  to {
    transform: translateY(0);
  }
}

@keyframes enter-down {
  from {
    transform: translateY(-32px);
  }

  to {
    transform: translateY(0);
  }
}

@keyframes enter-out {
  from {
    transform: scale(1.1);
  }

  to {
    transform: scale(1);
  }
}

@keyframes enter-in {
  from {
    transform: scale(0.99);
  }

  to {
    transform: scale(1);
  }
}

@keyframes shake-x {
  0%, 100% {
    transform: translateX(0%);
  }

  20% {
    transform: translateX(-5%);
  }

  40% {
    transform: translateX(5%);
  }

  60% {
    transform: translateX(-5%);
  }

  80% {
    transform: translateX(5%);
  }
}

@keyframes shake-y {
  0%, 100% {
    transform: translateY(0%);
  }

  20% {
    transform: translateY(-5%);
  }

  40% {
    transform: translateY(5%);
  }

  60% {
    transform: translateY(-5%);
  }

  80% {
    transform: translateY(5%);
  }
}

@keyframes close {
  from {
    opacity: 1;
    transform: scale(1);
  }

  to {
    opacity: 0;
    transform: scale(0.8);
  }
}

@keyframes open {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }

  30% {
    opacity: 1;
  }

  100% {
    transform: scale(1);
  }
}

@keyframes pulse {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.02);
  }

  100% {
    transform: scale(1);
  }
}

s-hidden* > * {
  transition-property: opacity, translate, rotate, scale, transform, filter,
    backdrop-filter, clip-path, mix-blend-mode, box-shadow, color,
    background-color, border-color, text-decoration-color, fill, stroke;
}

s-hidden[display] > * {
  display: var(---display, flex) !important;
}

s-hidden[position] > * {
  position: var(---position, absolute) !important;
}

s-hidden[position="sticky-top"] > * {
  inset: 0 0 auto 0;
  z-index: 1;
}

s-hidden[position="sticky-bottom"] > * {
  inset: auto 0 0 0;
  z-index: 1;
}

s-hidden[position="sticky-left"] > * {
  inset: 0 auto 0 0;
  z-index: 1;
}

s-hidden[position="sticky-right"] > * {
  inset: 0 0 0 auto;
  z-index: 1;
}

s-hidden[position="fixed-top"] > * {
  inset: 0 0 auto 0;
  z-index: 1;
}

s-hidden[position="fixed-bottom"] > * {
  inset: auto 0 0 0;
  z-index: 1;
}

s-hidden[position="fixed-left"] > * {
  inset: 0 auto 0 0;
  z-index: 1;
}

s-hidden[position="fixed-right"] > * {
  inset: 0 0 0 auto;
  z-index: 1;
}

s-hidden[aspect] > * {
  aspect-ratio: var(---aspect, 1) !important;
}

s-hidden[overflow] > * {
  overflow: var(---overflow, scroll) !important;
}

s-hidden[overflow-x] > * {
  overflow-x: var(---overflow-x, scroll) !important;
}

s-hidden[overflow-y] > * {
  overflow-y: var(---overflow-y, scroll) !important;
}

s-hidden[z] > * {
  z-index: var(---z, 1) !important;
}

s-hidden:is([w], [width]) > * {
  width: var(---width, 100%) !important;
}

s-hidden:is([w-min], [width-min]) > * {
  min-width: var(---width-min, 0) !important;
}

s-hidden:is([w-max], [width-max]) > * {
  max-width: var(---width-max, 100%) !important;
}

s-hidden:is([h], [height]) > * {
  height: var(---height, 100%) !important;
}

s-hidden:is([h-min], [height-min]) > * {
  min-height: var(---height-min, 0) !important;
}

s-hidden:is([h-max], [height-max]) > * {
  max-height: var(---height-max, 100%) !important;
}

s-hidden:is([c], [corner]) > * {
  border-radius: var(---corner, 8px) !important;
}

s-hidden:is([c-tl], [corner-top-left]) > * {
  border-top-left-radius: var(---corner-top-left, 8px) !important;
}

s-hidden:is([c-tr], [corner-top-right]) > * {
  border-top-right-radius: var(---corner-top-right, 8px) !important;
}

s-hidden:is([c-bl], [corner-bottom-left]) > * {
  border-bottom-left-radius: var(---corner-bottom-left, 8px) !important;
}

s-hidden:is([c-br], [corner-bottom-right]) > * {
  border-bottom-right-radius: var(---corner-bottom-right, 8px) !important;
}

s-hidden:is([o-color], [outline-color]) > * {
  outline-style: solid;
  outline-color: var(---outline-color, hsl(0 100% 100% / 50%)) !important;
}

s-hidden:is([o-width], [outline-width]) > * {
  outline-style: solid;
  outline-width: var(---outline-width, 8px) !important;
}

s-hidden:is([o-style], [outline-style]) > * {
  outline-style: var(---outline-style, solid) !important;
}

s-hidden:is([b-color], [border-color]) > * {
  border-style: solid;
  border-color: var(---border-color, currentColor) !important;
}

s-hidden:is([b-color-t], [border-color-top]) > * {
  border-style: solid;
  border-top-color: var(---border-color-top, currentColor) !important;
}

s-hidden:is([b-color-b], [border-color-bottom]) > * {
  border-style: solid;
  border-bottom-color: var(---border-color-bottom, currentColor) !important;
}

s-hidden:is([b-color-l], [border-color-left]) > * {
  border-style: solid;
  border-left-color: var(---border-color-left, currentColor) !important;
}

s-hidden:is([b-color-r], [border-color-right]) > * {
  border-style: solid;
  border-right-color: var(---border-color-right, currentColor) !important;
}

s-hidden:is([b-width], [border-width]) > * {
  border-style: solid;
  border-width: var(---border-width, 8px) !important;
}

s-hidden:is([b-width-t], [border-width-top]) > * {
  border-style: solid;
  border-top-width: var(---border-width-top, 8px) !important;
}

s-hidden:is([b-width-b], [border-width-bottom]) > * {
  border-style: solid;
  border-bottom-width: var(---border-width-bottom, 8px) !important;
}

s-hidden:is([b-width-l], [border-width-left]) > * {
  border-style: solid;
  border-left-width: var(---border-width-left, 8px) !important;
}

s-hidden:is([b-width-r], [border-width-right]) > * {
  border-style: solid;
  border-right-width: var(---border-width-right, 8px) !important;
}

s-hidden:is([b-style], [border-style]) > * {
  border-style: var(---border-style, solid) !important;
}

s-hidden:is([b-style-t], [border-style-top]) > * {
  border-top-style: var(---border-style-top, solid) !important;
}

s-hidden:is([b-style-b], [border-style-bottom]) > * {
  border-bottom-style: var(---border-style-bottom, solid) !important;
}

s-hidden:is([b-style-l], [border-style-left]) > * {
  border-left-style: var(---border-style-left, solid) !important;
}

s-hidden:is([b-style-r], [border-style-right]) > * {
  border-right-style: var(---border-style-right, solid) !important;
}

s-hidden:is([i], [inset]) > * {
  inset: var(---inset, 8px) !important;
}

s-hidden:is([i-t], [inset-top]) > * {
  top: var(---inset-top, 8px) !important;
}

s-hidden:is([i-b], [inset-bottom]) > * {
  bottom: var(---inset-bottom, 8px) !important;
}

s-hidden:is([i-l], [inset-left]) > * {
  left: var(---inset-left, 8px) !important;
}

s-hidden:is([i-r], [inset-right]) > * {
  right: var(---inset-right, 8px) !important;
}

s-hidden:is([m], [margin]) > * {
  margin: var(---margin, 8px) !important;
}

s-hidden:is([m-t], [margin-top]) > * {
  margin-top: var(---margin-top, 8px) !important;
}

s-hidden:is([m-b], [margin-bottom]) > * {
  margin-bottom: var(---margin-bottom, 8px) !important;
}

s-hidden:is([m-l], [margin-left]) > * {
  margin-left: var(---margin-left, 8px) !important;
}

s-hidden:is([m-r], [margin-right]) > * {
  margin-right: var(---margin-right, 8px) !important;
}

s-hidden:is([p], [padding]) > * {
  padding: var(---padding, 8px) !important;
}

s-hidden:is([p-t], [padding-top]) > * {
  padding-top: var(---padding-top, 8px) !important;
}

s-hidden:is([p-b], [padding-bottom]) > * {
  padding-bottom: var(---padding-bottom, 8px) !important;
}

s-hidden:is([p-l], [padding-left]) > * {
  padding-left: var(---padding-left, 8px) !important;
}

s-hidden:is([p-r], [padding-right]) > * {
  padding-right: var(---padding-right, 8px) !important;
}

s-hidden:is([child-layout="row"], [child-layout="column"]) > * {
  display: flex;
  flex-direction: var(---child-layout, row) !important;
}

s-hidden:is([child-layout="grid"], [child-columns]) > * {
  display: grid;
  grid-template-columns: var(---child-columns, 1fr 1fr 1fr);
}

s-hidden[child-gap] > * {
  gap: var(---child-gap, 8px) !important;
}

s-hidden[child-align] > * {
  align-items: var(---child-align, center) !important;
}

s-hidden[child-justify] > * {
  justify-content: var(---child-justify, center) !important;
}

s-hidden[child-overflow] > * {
  flex-wrap: var(---child-overflow, nowrap) !important;
}

s-hidden[self-align] > * {
  align-self: var(---self-align, center) !important;
}

s-hidden[flex] > * {
  flex: var(---flex, 1) !important;
}

s-hidden[grow] > * {
  flex-grow: var(---grow, 1) !important;
}

s-hidden[shrink] > * {
  flex-shrink: var(---shrink, 1) !important;
}

s-hidden[order] > * {
  order: var(---order, 0) !important;
}

s-hidden[fill] path > * {
  fill: var(---fill, currentColor) !important;
}

s-hidden[stroke] path > * {
  stroke: var(---stroke, currentColor) !important;
}

s-hidden[stroke-width] path > * {
  stroke-width: var(---stroke-width, 1) !important;
}

s-hidden[visible] > * {
  visibility: var(---visible, visible) !important;
}

s-hidden[interactable] > * {
  pointer-events: var(---interactable, auto) !important;
}

s-hidden[interactable="none"] > * {
  cursor: default;
}

s-hidden[selectable] > * {
  user-select: var(---selectable, auto) !important;
}

[selectable=""],
[selectable="auto"],
s-hidden[selectable="all"] > * {
  cursor: text;
}

s-hidden[cursor] > * {
  cursor: var(---cursor, auto) !important;
}

s-hidden[text-font] > * {
  font-family: var(---text-font, monospace) !important;
}

s-hidden[text-size] > * {
  font-size: var(---text-size, 1rem) !important;
}

s-hidden[text-size="2xs"] > * {
  line-height: var(---theme-text-2xs-line-height, 1.5);
}

s-hidden[text-size="xs"] > * {
  line-height: var(---theme-text-xs-line-height, 1.5);
}

s-hidden[text-size="sm"] > * {
  line-height: var(---theme-text-sm-line-height, 1.5);
}

s-hidden[text-size="md"] > * {
  line-height: var(---theme-text-md-line-height, 1.5);
}

s-hidden[text-size="lg"] > * {
  line-height: var(---theme-text-lg-line-height, 1.5);
}

s-hidden[text-size="xl"] > * {
  line-height: var(---theme-text-xl-line-height, 1.5);
}

s-hidden[text-size="2xl"] > * {
  line-height: var(---theme-text-2xl-line-height, 1.5);
}

s-hidden[text-size="3xl"] > * {
  line-height: var(---theme-text-3xl-line-height, 1.5);
}

s-hidden[text-size="4xl"] > * {
  line-height: var(---theme-text-4xl-line-height, 1.5);
}

s-hidden[text-size="5xl"] > * {
  line-height: var(---theme-text-5xl-line-height, 1.5);
}

s-hidden[text-size="6xl"] > * {
  line-height: var(---theme-text-6xl-line-height, 1.5);
}

s-hidden[text-size="7xl"] > * {
  line-height: var(---theme-text-7xl-line-height, 1.5);
}

s-hidden[text-size="8xl"] > * {
  line-height: var(---theme-text-8xl-line-height, 1.5);
}

s-hidden[text-size="9xl"] > * {
  line-height: var(---theme-text-9xl-line-height, 1.5);
}

s-hidden[text-leading] > * {
  line-height: var(---text-leading, 1.5) !important;
}

s-hidden[text-tracking] > * {
  letter-spacing: var(---text-tracking, 1.5) !important;
}

s-hidden[text-weight] > * {
  font-weight: var(---text-weight, 600) !important;
}

s-hidden[text-style] > * {
  font-style: var(---text-style, italic) !important;
}

s-hidden[text-decoration-line] > * {
  text-decoration-line: var(---text-decoration-line, underline) !important;
}

s-hidden[text-decoration-color] > * {
  text-decoration-color: var(---text-decoration-color, currentColor) !important;
}

s-hidden[text-decoration-thickness] > * {
  text-decoration-thickness: var(---text-decoration-thickness, auto) !important;
}

s-hidden[text-underline-offset] > * {
  text-underline-offset: var(---text-underline-offset, 4px) !important;
}

s-hidden[text-case] > * {
  text-transform: var(---text-case, uppercase) !important;
}

s-hidden[text-align] > * {
  text-align: var(---text-align, center) !important;
}

s-hidden[text-overflow] > * {
  text-overflow: var(---text-overflow, clip) !important;
}

s-hidden[text-overflow=""] > * {
  white-space: nowrap;
}

s-hidden[text-overflow="wrap"] > * {
  white-space: break-spaces;
}

s-hidden[text-overflow="visible"] > * {
  white-space: nowrap;
}

s-hidden[text-overflow="clip"] > * {
  white-space: nowrap;
}

s-hidden[text-overflow="ellipsis"] > * {
  overflow: hidden;
  white-space: nowrap;
}

s-hidden[text-whitespace] > * {
  white-space: var(---text-whitespace, normal) !important;
}

s-hidden[text-color] > * {
  color: var(---text-color, white) !important;
}

s-hidden[text-stroke] > * {
  text-shadow: var(---text-stroke) !important;
}

s-hidden:is([bg-color], [background-color]) > * {
  background-color: var(---background-color) !important;
}

s-hidden:is([bg-image], [background-image]) > * {
  background-image: var(---background-image, none) !important;
}

s-hidden:is([bg-repeat], [background-repeat]) > * {
  background-repeat: var(---background-repeat, repeat) !important;
}

s-hidden:is([bg-align], [background-align]) > * {
  background-position: var(---background-align, center) !important;
}

s-hidden:is([bg-fit], [background-fit]) > * {
  background-size: var(---background-fit, contain) !important;
}

s-hidden[clip] > * {
  clip-path: var(---clip, circle(50%)) !important;
}

s-hidden[filter] > * {
  filter: var(---filter, none) !important;
}

s-hidden[backdrop-filter] > * {
  backdrop-filter: var(---backdrop-filter, none) !important;
}

s-hidden[blend] > * {
  mix-blend-mode: var(---blend, normal) !important;
}

s-hidden[shadow] > * {
  box-shadow: var(
    ---shadow,
    0 1px 2px hsl(0 0% 0% / 30%),
    0 1px 3px hsl(0 0% 0% / 15%)
  ) !important;
}

s-hidden[shadow-inset] > * {
  box-shadow: var(
    ---shadow-inset,
    inset 0 1px 2px hsl(0 0% 0% / 30%),
    inset 0 1px 3px hsl(0 0% 0% / 15%)
  ) !important;
}

s-hidden[ring] > * {
  box-shadow: var(---ring, 0 0 0 2px currentColor) !important;
  outline: none !important;
}

s-hidden[opacity] > * {
  opacity: var(---opacity, 1) !important;
}

s-hidden[translate] > * {
  translate: var(---translate, none) !important;
}

s-hidden[rotate] > * {
  rotate: var(---rotate, none) !important;
}

s-hidden[scale] > * {
  scale: var(---scale, none) !important;
}

s-hidden[pivot] > * {
  transform-origin: var(---pivot, left) !important;
}

s-hidden[transition-delay] > * {
  transition-delay: var(---transition-delay, 100ms) !important;
}

s-hidden[transition-duration] > * {
  transition-duration: var(---transition-duration, 100ms) !important;
}

s-hidden[transition-easing] > * {
  transition-timing-function: var(---transition-easing, ease) !important;
}

s-hidden[animation] > * {
  animation: var(---animation, var(---theme-animation-bounce)) !important;
}

s-hidden[mask] > * {
  ---theme-mask-angled-corner: conic-gradient(
        from -45deg at var(---corner, 8px) var(---corner, 8px),
        #0000 25%,
        #000 0
      )
      calc(-1 * var(---corner, 8px)) 0 /100% 51% repeat-x,
    conic-gradient(
        from 135deg at var(---corner, 8px) calc(100% - var(---corner, 8px)),
        #0000 25%,
        #000 0
      )
      calc(-1 * var(---corner, 8px)) 100%/100% 51% repeat-x !important;
  ---theme-mask-scooped-corner: radial-gradient(
      var(---corner, 8px) at var(---corner, 8px) var(---corner, 8px),
      #0000 99%,
      #000
    )
    calc(-1 * var(---corner, 8px)) calc(-1 * var(---corner, 8px)) !important;
  ---theme-mask-notched-corner: conic-gradient(
      at calc(2 * var(---corner, 8px)) calc(2 * var(---corner, 8px)),
      #000 75%,
      #0000 0
    )
    calc(-1 * var(---corner, 8px)) calc(-1 * var(---corner, 8px)) !important;
  background-color: transparent !important;
  background-image: none !important;
}

s-hidden[mask]::before > * {
  /* Apply mask to a pseudo-element so that drop-shadow filters applied to the root element will match the shape of the mask */
  position: absolute !important;
  inset: 0 !important;
  content: "" !important;
  background-image: var(---background-image, none) !important;
  background-color: var(---background-color) !important;
  -webkit-mask: var(---mask, none) !important;
  mask: var(---mask, none) !important;
}

s-hidden[content-visibility] > * {
  content-visibility: var(---content-visibility, auto);
}

s-hidden[contain-intrinsic-size] > * {
  contain-intrinsic-size: var(---contain-intrinsic-size, none);
}

.root::after {
  display: none;
  ---focus-duration: 50ms;
  position: absolute;
  inset: 0;
  content: "";
  border-radius: inherit;
  transition-duration: var(---focus-duration);
  transition-timing-function: ease;
  outline-offset: calc(-2 * var(---theme-focus-ring-width));
  pointer-events: none;
}

.root.focused::after {
  display: flex;
  outline: var(---theme-color-focus-ring-color) var(---theme-focus-ring-style)
    var(---theme-focus-ring-width);
  outline-offset: calc(-1 * var(---theme-focus-ring-width));
  -webkit-mask: none;
  mask: none;
}

.root.focused.pressed::after {
  display: flex;
  outline-offset: calc((-1 * var(---theme-focus-ring-width)) - 2px);
}

s-hidden {
  display: contents;
  ---duration: 150ms;
}

s-hidden > .root {
  display: flex;
  position: relative;
  transition-property: opacity;
}

s-hidden > .root[loaded] {
  transition-duration: var(---duration);
}

s-hidden > .root:not([loaded]) {
  transition-duration: 0 !important;
}

s-hidden > .root[status="hiding"] {
  opacity: 0;
}

s-hidden > .root[status="hiding"]::after {
  content: "";
  position: absolute;
  inset: 0;
  /* Block input during exit animation */
  pointer-events: auto;
}

s-hidden[initial="hide"] > .root:not([loaded]),
s-hidden > .root[status="hidden"] {
  display: none;
}

s-hidden > .root[loaded][status="mounting"] {
  display: flex;
  opacity: 0;
}

s-hidden > .root[loaded]:is([status="showing"], [status="shown"]) {
  opacity: 1;
}

s-box* > * {
  transition-property: opacity, translate, rotate, scale, transform, filter,
    backdrop-filter, clip-path, mix-blend-mode, box-shadow, color,
    background-color, border-color, text-decoration-color, fill, stroke;
}

s-box[display] > * {
  display: var(---display, flex) !important;
}

s-box[position] > * {
  position: var(---position, absolute) !important;
}

s-box[position="sticky-top"] > * {
  inset: 0 0 auto 0;
  z-index: 1;
}

s-box[position="sticky-bottom"] > * {
  inset: auto 0 0 0;
  z-index: 1;
}

s-box[position="sticky-left"] > * {
  inset: 0 auto 0 0;
  z-index: 1;
}

s-box[position="sticky-right"] > * {
  inset: 0 0 0 auto;
  z-index: 1;
}

s-box[position="fixed-top"] > * {
  inset: 0 0 auto 0;
  z-index: 1;
}

s-box[position="fixed-bottom"] > * {
  inset: auto 0 0 0;
  z-index: 1;
}

s-box[position="fixed-left"] > * {
  inset: 0 auto 0 0;
  z-index: 1;
}

s-box[position="fixed-right"] > * {
  inset: 0 0 0 auto;
  z-index: 1;
}

s-box[aspect] > * {
  aspect-ratio: var(---aspect, 1) !important;
}

s-box[overflow] > * {
  overflow: var(---overflow, scroll) !important;
}

s-box[overflow-x] > * {
  overflow-x: var(---overflow-x, scroll) !important;
}

s-box[overflow-y] > * {
  overflow-y: var(---overflow-y, scroll) !important;
}

s-box[z] > * {
  z-index: var(---z, 1) !important;
}

s-box:is([w], [width]) > * {
  width: var(---width, 100%) !important;
}

s-box:is([w-min], [width-min]) > * {
  min-width: var(---width-min, 0) !important;
}

s-box:is([w-max], [width-max]) > * {
  max-width: var(---width-max, 100%) !important;
}

s-box:is([h], [height]) > * {
  height: var(---height, 100%) !important;
}

s-box:is([h-min], [height-min]) > * {
  min-height: var(---height-min, 0) !important;
}

s-box:is([h-max], [height-max]) > * {
  max-height: var(---height-max, 100%) !important;
}

s-box:is([c], [corner]) > * {
  border-radius: var(---corner, 8px) !important;
}

s-box:is([c-tl], [corner-top-left]) > * {
  border-top-left-radius: var(---corner-top-left, 8px) !important;
}

s-box:is([c-tr], [corner-top-right]) > * {
  border-top-right-radius: var(---corner-top-right, 8px) !important;
}

s-box:is([c-bl], [corner-bottom-left]) > * {
  border-bottom-left-radius: var(---corner-bottom-left, 8px) !important;
}

s-box:is([c-br], [corner-bottom-right]) > * {
  border-bottom-right-radius: var(---corner-bottom-right, 8px) !important;
}

s-box:is([o-color], [outline-color]) > * {
  outline-style: solid;
  outline-color: var(---outline-color, hsl(0 100% 100% / 50%)) !important;
}

s-box:is([o-width], [outline-width]) > * {
  outline-style: solid;
  outline-width: var(---outline-width, 8px) !important;
}

s-box:is([o-style], [outline-style]) > * {
  outline-style: var(---outline-style, solid) !important;
}

s-box:is([b-color], [border-color]) > * {
  border-style: solid;
  border-color: var(---border-color, currentColor) !important;
}

s-box:is([b-color-t], [border-color-top]) > * {
  border-style: solid;
  border-top-color: var(---border-color-top, currentColor) !important;
}

s-box:is([b-color-b], [border-color-bottom]) > * {
  border-style: solid;
  border-bottom-color: var(---border-color-bottom, currentColor) !important;
}

s-box:is([b-color-l], [border-color-left]) > * {
  border-style: solid;
  border-left-color: var(---border-color-left, currentColor) !important;
}

s-box:is([b-color-r], [border-color-right]) > * {
  border-style: solid;
  border-right-color: var(---border-color-right, currentColor) !important;
}

s-box:is([b-width], [border-width]) > * {
  border-style: solid;
  border-width: var(---border-width, 8px) !important;
}

s-box:is([b-width-t], [border-width-top]) > * {
  border-style: solid;
  border-top-width: var(---border-width-top, 8px) !important;
}

s-box:is([b-width-b], [border-width-bottom]) > * {
  border-style: solid;
  border-bottom-width: var(---border-width-bottom, 8px) !important;
}

s-box:is([b-width-l], [border-width-left]) > * {
  border-style: solid;
  border-left-width: var(---border-width-left, 8px) !important;
}

s-box:is([b-width-r], [border-width-right]) > * {
  border-style: solid;
  border-right-width: var(---border-width-right, 8px) !important;
}

s-box:is([b-style], [border-style]) > * {
  border-style: var(---border-style, solid) !important;
}

s-box:is([b-style-t], [border-style-top]) > * {
  border-top-style: var(---border-style-top, solid) !important;
}

s-box:is([b-style-b], [border-style-bottom]) > * {
  border-bottom-style: var(---border-style-bottom, solid) !important;
}

s-box:is([b-style-l], [border-style-left]) > * {
  border-left-style: var(---border-style-left, solid) !important;
}

s-box:is([b-style-r], [border-style-right]) > * {
  border-right-style: var(---border-style-right, solid) !important;
}

s-box:is([i], [inset]) > * {
  inset: var(---inset, 8px) !important;
}

s-box:is([i-t], [inset-top]) > * {
  top: var(---inset-top, 8px) !important;
}

s-box:is([i-b], [inset-bottom]) > * {
  bottom: var(---inset-bottom, 8px) !important;
}

s-box:is([i-l], [inset-left]) > * {
  left: var(---inset-left, 8px) !important;
}

s-box:is([i-r], [inset-right]) > * {
  right: var(---inset-right, 8px) !important;
}

s-box:is([m], [margin]) > * {
  margin: var(---margin, 8px) !important;
}

s-box:is([m-t], [margin-top]) > * {
  margin-top: var(---margin-top, 8px) !important;
}

s-box:is([m-b], [margin-bottom]) > * {
  margin-bottom: var(---margin-bottom, 8px) !important;
}

s-box:is([m-l], [margin-left]) > * {
  margin-left: var(---margin-left, 8px) !important;
}

s-box:is([m-r], [margin-right]) > * {
  margin-right: var(---margin-right, 8px) !important;
}

s-box:is([p], [padding]) > * {
  padding: var(---padding, 8px) !important;
}

s-box:is([p-t], [padding-top]) > * {
  padding-top: var(---padding-top, 8px) !important;
}

s-box:is([p-b], [padding-bottom]) > * {
  padding-bottom: var(---padding-bottom, 8px) !important;
}

s-box:is([p-l], [padding-left]) > * {
  padding-left: var(---padding-left, 8px) !important;
}

s-box:is([p-r], [padding-right]) > * {
  padding-right: var(---padding-right, 8px) !important;
}

s-box:is([child-layout="row"], [child-layout="column"]) > * {
  display: flex;
  flex-direction: var(---child-layout, row) !important;
}

s-box:is([child-layout="grid"], [child-columns]) > * {
  display: grid;
  grid-template-columns: var(---child-columns, 1fr 1fr 1fr);
}

s-box[child-gap] > * {
  gap: var(---child-gap, 8px) !important;
}

s-box[child-align] > * {
  align-items: var(---child-align, center) !important;
}

s-box[child-justify] > * {
  justify-content: var(---child-justify, center) !important;
}

s-box[child-overflow] > * {
  flex-wrap: var(---child-overflow, nowrap) !important;
}

s-box[self-align] > * {
  align-self: var(---self-align, center) !important;
}

s-box[flex] > * {
  flex: var(---flex, 1) !important;
}

s-box[grow] > * {
  flex-grow: var(---grow, 1) !important;
}

s-box[shrink] > * {
  flex-shrink: var(---shrink, 1) !important;
}

s-box[order] > * {
  order: var(---order, 0) !important;
}

s-box[fill] path > * {
  fill: var(---fill, currentColor) !important;
}

s-box[stroke] path > * {
  stroke: var(---stroke, currentColor) !important;
}

s-box[stroke-width] path > * {
  stroke-width: var(---stroke-width, 1) !important;
}

s-box[visible] > * {
  visibility: var(---visible, visible) !important;
}

s-box[interactable] > * {
  pointer-events: var(---interactable, auto) !important;
}

s-box[interactable="none"] > * {
  cursor: default;
}

s-box[selectable] > * {
  user-select: var(---selectable, auto) !important;
}

[selectable=""],
[selectable="auto"],
s-box[selectable="all"] > * {
  cursor: text;
}

s-box[cursor] > * {
  cursor: var(---cursor, auto) !important;
}

s-box[text-font] > * {
  font-family: var(---text-font, monospace) !important;
}

s-box[text-size] > * {
  font-size: var(---text-size, 1rem) !important;
}

s-box[text-size="2xs"] > * {
  line-height: var(---theme-text-2xs-line-height, 1.5);
}

s-box[text-size="xs"] > * {
  line-height: var(---theme-text-xs-line-height, 1.5);
}

s-box[text-size="sm"] > * {
  line-height: var(---theme-text-sm-line-height, 1.5);
}

s-box[text-size="md"] > * {
  line-height: var(---theme-text-md-line-height, 1.5);
}

s-box[text-size="lg"] > * {
  line-height: var(---theme-text-lg-line-height, 1.5);
}

s-box[text-size="xl"] > * {
  line-height: var(---theme-text-xl-line-height, 1.5);
}

s-box[text-size="2xl"] > * {
  line-height: var(---theme-text-2xl-line-height, 1.5);
}

s-box[text-size="3xl"] > * {
  line-height: var(---theme-text-3xl-line-height, 1.5);
}

s-box[text-size="4xl"] > * {
  line-height: var(---theme-text-4xl-line-height, 1.5);
}

s-box[text-size="5xl"] > * {
  line-height: var(---theme-text-5xl-line-height, 1.5);
}

s-box[text-size="6xl"] > * {
  line-height: var(---theme-text-6xl-line-height, 1.5);
}

s-box[text-size="7xl"] > * {
  line-height: var(---theme-text-7xl-line-height, 1.5);
}

s-box[text-size="8xl"] > * {
  line-height: var(---theme-text-8xl-line-height, 1.5);
}

s-box[text-size="9xl"] > * {
  line-height: var(---theme-text-9xl-line-height, 1.5);
}

s-box[text-leading] > * {
  line-height: var(---text-leading, 1.5) !important;
}

s-box[text-tracking] > * {
  letter-spacing: var(---text-tracking, 1.5) !important;
}

s-box[text-weight] > * {
  font-weight: var(---text-weight, 600) !important;
}

s-box[text-style] > * {
  font-style: var(---text-style, italic) !important;
}

s-box[text-decoration-line] > * {
  text-decoration-line: var(---text-decoration-line, underline) !important;
}

s-box[text-decoration-color] > * {
  text-decoration-color: var(---text-decoration-color, currentColor) !important;
}

s-box[text-decoration-thickness] > * {
  text-decoration-thickness: var(---text-decoration-thickness, auto) !important;
}

s-box[text-underline-offset] > * {
  text-underline-offset: var(---text-underline-offset, 4px) !important;
}

s-box[text-case] > * {
  text-transform: var(---text-case, uppercase) !important;
}

s-box[text-align] > * {
  text-align: var(---text-align, center) !important;
}

s-box[text-overflow] > * {
  text-overflow: var(---text-overflow, clip) !important;
}

s-box[text-overflow=""] > * {
  white-space: nowrap;
}

s-box[text-overflow="wrap"] > * {
  white-space: break-spaces;
}

s-box[text-overflow="visible"] > * {
  white-space: nowrap;
}

s-box[text-overflow="clip"] > * {
  white-space: nowrap;
}

s-box[text-overflow="ellipsis"] > * {
  overflow: hidden;
  white-space: nowrap;
}

s-box[text-whitespace] > * {
  white-space: var(---text-whitespace, normal) !important;
}

s-box[text-color] > * {
  color: var(---text-color, white) !important;
}

s-box[text-stroke] > * {
  text-shadow: var(---text-stroke) !important;
}

s-box:is([bg-color], [background-color]) > * {
  background-color: var(---background-color) !important;
}

s-box:is([bg-image], [background-image]) > * {
  background-image: var(---background-image, none) !important;
}

s-box:is([bg-repeat], [background-repeat]) > * {
  background-repeat: var(---background-repeat, repeat) !important;
}

s-box:is([bg-align], [background-align]) > * {
  background-position: var(---background-align, center) !important;
}

s-box:is([bg-fit], [background-fit]) > * {
  background-size: var(---background-fit, contain) !important;
}

s-box[clip] > * {
  clip-path: var(---clip, circle(50%)) !important;
}

s-box[filter] > * {
  filter: var(---filter, none) !important;
}

s-box[backdrop-filter] > * {
  backdrop-filter: var(---backdrop-filter, none) !important;
}

s-box[blend] > * {
  mix-blend-mode: var(---blend, normal) !important;
}

s-box[shadow] > * {
  box-shadow: var(
    ---shadow,
    0 1px 2px hsl(0 0% 0% / 30%),
    0 1px 3px hsl(0 0% 0% / 15%)
  ) !important;
}

s-box[shadow-inset] > * {
  box-shadow: var(
    ---shadow-inset,
    inset 0 1px 2px hsl(0 0% 0% / 30%),
    inset 0 1px 3px hsl(0 0% 0% / 15%)
  ) !important;
}

s-box[ring] > * {
  box-shadow: var(---ring, 0 0 0 2px currentColor) !important;
  outline: none !important;
}

s-box[opacity] > * {
  opacity: var(---opacity, 1) !important;
}

s-box[translate] > * {
  translate: var(---translate, none) !important;
}

s-box[rotate] > * {
  rotate: var(---rotate, none) !important;
}

s-box[scale] > * {
  scale: var(---scale, none) !important;
}

s-box[pivot] > * {
  transform-origin: var(---pivot, left) !important;
}

s-box[transition-delay] > * {
  transition-delay: var(---transition-delay, 100ms) !important;
}

s-box[transition-duration] > * {
  transition-duration: var(---transition-duration, 100ms) !important;
}

s-box[transition-easing] > * {
  transition-timing-function: var(---transition-easing, ease) !important;
}

s-box[animation] > * {
  animation: var(---animation, var(---theme-animation-bounce)) !important;
}

s-box[mask] > * {
  ---theme-mask-angled-corner: conic-gradient(
        from -45deg at var(---corner, 8px) var(---corner, 8px),
        #0000 25%,
        #000 0
      )
      calc(-1 * var(---corner, 8px)) 0 /100% 51% repeat-x,
    conic-gradient(
        from 135deg at var(---corner, 8px) calc(100% - var(---corner, 8px)),
        #0000 25%,
        #000 0
      )
      calc(-1 * var(---corner, 8px)) 100%/100% 51% repeat-x !important;
  ---theme-mask-scooped-corner: radial-gradient(
      var(---corner, 8px) at var(---corner, 8px) var(---corner, 8px),
      #0000 99%,
      #000
    )
    calc(-1 * var(---corner, 8px)) calc(-1 * var(---corner, 8px)) !important;
  ---theme-mask-notched-corner: conic-gradient(
      at calc(2 * var(---corner, 8px)) calc(2 * var(---corner, 8px)),
      #000 75%,
      #0000 0
    )
    calc(-1 * var(---corner, 8px)) calc(-1 * var(---corner, 8px)) !important;
  background-color: transparent !important;
  background-image: none !important;
}

s-box[mask]::before > * {
  /* Apply mask to a pseudo-element so that drop-shadow filters applied to the root element will match the shape of the mask */
  position: absolute !important;
  inset: 0 !important;
  content: "" !important;
  background-image: var(---background-image, none) !important;
  background-color: var(---background-color) !important;
  -webkit-mask: var(---mask, none) !important;
  mask: var(---mask, none) !important;
}

s-box[content-visibility] > * {
  content-visibility: var(---content-visibility, auto);
}

s-box[contain-intrinsic-size] > * {
  contain-intrinsic-size: var(---contain-intrinsic-size, none);
}

s-box {
  display: contents;
}

s-box > .root {
  display: flex;
}

s-list* > * {
  transition-property: opacity, translate, rotate, scale, transform, filter,
    backdrop-filter, clip-path, mix-blend-mode, box-shadow, color,
    background-color, border-color, text-decoration-color, fill, stroke;
}

s-list[display] > * {
  display: var(---display, flex) !important;
}

s-list[position] > * {
  position: var(---position, absolute) !important;
}

s-list[position="sticky-top"] > * {
  inset: 0 0 auto 0;
  z-index: 1;
}

s-list[position="sticky-bottom"] > * {
  inset: auto 0 0 0;
  z-index: 1;
}

s-list[position="sticky-left"] > * {
  inset: 0 auto 0 0;
  z-index: 1;
}

s-list[position="sticky-right"] > * {
  inset: 0 0 0 auto;
  z-index: 1;
}

s-list[position="fixed-top"] > * {
  inset: 0 0 auto 0;
  z-index: 1;
}

s-list[position="fixed-bottom"] > * {
  inset: auto 0 0 0;
  z-index: 1;
}

s-list[position="fixed-left"] > * {
  inset: 0 auto 0 0;
  z-index: 1;
}

s-list[position="fixed-right"] > * {
  inset: 0 0 0 auto;
  z-index: 1;
}

s-list[aspect] > * {
  aspect-ratio: var(---aspect, 1) !important;
}

s-list[overflow] > * {
  overflow: var(---overflow, scroll) !important;
}

s-list[overflow-x] > * {
  overflow-x: var(---overflow-x, scroll) !important;
}

s-list[overflow-y] > * {
  overflow-y: var(---overflow-y, scroll) !important;
}

s-list[z] > * {
  z-index: var(---z, 1) !important;
}

s-list:is([w], [width]) > * {
  width: var(---width, 100%) !important;
}

s-list:is([w-min], [width-min]) > * {
  min-width: var(---width-min, 0) !important;
}

s-list:is([w-max], [width-max]) > * {
  max-width: var(---width-max, 100%) !important;
}

s-list:is([h], [height]) > * {
  height: var(---height, 100%) !important;
}

s-list:is([h-min], [height-min]) > * {
  min-height: var(---height-min, 0) !important;
}

s-list:is([h-max], [height-max]) > * {
  max-height: var(---height-max, 100%) !important;
}

s-list:is([c], [corner]) > * {
  border-radius: var(---corner, 8px) !important;
}

s-list:is([c-tl], [corner-top-left]) > * {
  border-top-left-radius: var(---corner-top-left, 8px) !important;
}

s-list:is([c-tr], [corner-top-right]) > * {
  border-top-right-radius: var(---corner-top-right, 8px) !important;
}

s-list:is([c-bl], [corner-bottom-left]) > * {
  border-bottom-left-radius: var(---corner-bottom-left, 8px) !important;
}

s-list:is([c-br], [corner-bottom-right]) > * {
  border-bottom-right-radius: var(---corner-bottom-right, 8px) !important;
}

s-list:is([o-color], [outline-color]) > * {
  outline-style: solid;
  outline-color: var(---outline-color, hsl(0 100% 100% / 50%)) !important;
}

s-list:is([o-width], [outline-width]) > * {
  outline-style: solid;
  outline-width: var(---outline-width, 8px) !important;
}

s-list:is([o-style], [outline-style]) > * {
  outline-style: var(---outline-style, solid) !important;
}

s-list:is([b-color], [border-color]) > * {
  border-style: solid;
  border-color: var(---border-color, currentColor) !important;
}

s-list:is([b-color-t], [border-color-top]) > * {
  border-style: solid;
  border-top-color: var(---border-color-top, currentColor) !important;
}

s-list:is([b-color-b], [border-color-bottom]) > * {
  border-style: solid;
  border-bottom-color: var(---border-color-bottom, currentColor) !important;
}

s-list:is([b-color-l], [border-color-left]) > * {
  border-style: solid;
  border-left-color: var(---border-color-left, currentColor) !important;
}

s-list:is([b-color-r], [border-color-right]) > * {
  border-style: solid;
  border-right-color: var(---border-color-right, currentColor) !important;
}

s-list:is([b-width], [border-width]) > * {
  border-style: solid;
  border-width: var(---border-width, 8px) !important;
}

s-list:is([b-width-t], [border-width-top]) > * {
  border-style: solid;
  border-top-width: var(---border-width-top, 8px) !important;
}

s-list:is([b-width-b], [border-width-bottom]) > * {
  border-style: solid;
  border-bottom-width: var(---border-width-bottom, 8px) !important;
}

s-list:is([b-width-l], [border-width-left]) > * {
  border-style: solid;
  border-left-width: var(---border-width-left, 8px) !important;
}

s-list:is([b-width-r], [border-width-right]) > * {
  border-style: solid;
  border-right-width: var(---border-width-right, 8px) !important;
}

s-list:is([b-style], [border-style]) > * {
  border-style: var(---border-style, solid) !important;
}

s-list:is([b-style-t], [border-style-top]) > * {
  border-top-style: var(---border-style-top, solid) !important;
}

s-list:is([b-style-b], [border-style-bottom]) > * {
  border-bottom-style: var(---border-style-bottom, solid) !important;
}

s-list:is([b-style-l], [border-style-left]) > * {
  border-left-style: var(---border-style-left, solid) !important;
}

s-list:is([b-style-r], [border-style-right]) > * {
  border-right-style: var(---border-style-right, solid) !important;
}

s-list:is([i], [inset]) > * {
  inset: var(---inset, 8px) !important;
}

s-list:is([i-t], [inset-top]) > * {
  top: var(---inset-top, 8px) !important;
}

s-list:is([i-b], [inset-bottom]) > * {
  bottom: var(---inset-bottom, 8px) !important;
}

s-list:is([i-l], [inset-left]) > * {
  left: var(---inset-left, 8px) !important;
}

s-list:is([i-r], [inset-right]) > * {
  right: var(---inset-right, 8px) !important;
}

s-list:is([m], [margin]) > * {
  margin: var(---margin, 8px) !important;
}

s-list:is([m-t], [margin-top]) > * {
  margin-top: var(---margin-top, 8px) !important;
}

s-list:is([m-b], [margin-bottom]) > * {
  margin-bottom: var(---margin-bottom, 8px) !important;
}

s-list:is([m-l], [margin-left]) > * {
  margin-left: var(---margin-left, 8px) !important;
}

s-list:is([m-r], [margin-right]) > * {
  margin-right: var(---margin-right, 8px) !important;
}

s-list:is([p], [padding]) > * {
  padding: var(---padding, 8px) !important;
}

s-list:is([p-t], [padding-top]) > * {
  padding-top: var(---padding-top, 8px) !important;
}

s-list:is([p-b], [padding-bottom]) > * {
  padding-bottom: var(---padding-bottom, 8px) !important;
}

s-list:is([p-l], [padding-left]) > * {
  padding-left: var(---padding-left, 8px) !important;
}

s-list:is([p-r], [padding-right]) > * {
  padding-right: var(---padding-right, 8px) !important;
}

s-list:is([child-layout="row"], [child-layout="column"]) > * {
  display: flex;
  flex-direction: var(---child-layout, row) !important;
}

s-list:is([child-layout="grid"], [child-columns]) > * {
  display: grid;
  grid-template-columns: var(---child-columns, 1fr 1fr 1fr);
}

s-list[child-gap] > * {
  gap: var(---child-gap, 8px) !important;
}

s-list[child-align] > * {
  align-items: var(---child-align, center) !important;
}

s-list[child-justify] > * {
  justify-content: var(---child-justify, center) !important;
}

s-list[child-overflow] > * {
  flex-wrap: var(---child-overflow, nowrap) !important;
}

s-list[self-align] > * {
  align-self: var(---self-align, center) !important;
}

s-list[flex] > * {
  flex: var(---flex, 1) !important;
}

s-list[grow] > * {
  flex-grow: var(---grow, 1) !important;
}

s-list[shrink] > * {
  flex-shrink: var(---shrink, 1) !important;
}

s-list[order] > * {
  order: var(---order, 0) !important;
}

s-list[fill] path > * {
  fill: var(---fill, currentColor) !important;
}

s-list[stroke] path > * {
  stroke: var(---stroke, currentColor) !important;
}

s-list[stroke-width] path > * {
  stroke-width: var(---stroke-width, 1) !important;
}

s-list[visible] > * {
  visibility: var(---visible, visible) !important;
}

s-list[interactable] > * {
  pointer-events: var(---interactable, auto) !important;
}

s-list[interactable="none"] > * {
  cursor: default;
}

s-list[selectable] > * {
  user-select: var(---selectable, auto) !important;
}

[selectable=""],
[selectable="auto"],
s-list[selectable="all"] > * {
  cursor: text;
}

s-list[cursor] > * {
  cursor: var(---cursor, auto) !important;
}

s-list[text-font] > * {
  font-family: var(---text-font, monospace) !important;
}

s-list[text-size] > * {
  font-size: var(---text-size, 1rem) !important;
}

s-list[text-size="2xs"] > * {
  line-height: var(---theme-text-2xs-line-height, 1.5);
}

s-list[text-size="xs"] > * {
  line-height: var(---theme-text-xs-line-height, 1.5);
}

s-list[text-size="sm"] > * {
  line-height: var(---theme-text-sm-line-height, 1.5);
}

s-list[text-size="md"] > * {
  line-height: var(---theme-text-md-line-height, 1.5);
}

s-list[text-size="lg"] > * {
  line-height: var(---theme-text-lg-line-height, 1.5);
}

s-list[text-size="xl"] > * {
  line-height: var(---theme-text-xl-line-height, 1.5);
}

s-list[text-size="2xl"] > * {
  line-height: var(---theme-text-2xl-line-height, 1.5);
}

s-list[text-size="3xl"] > * {
  line-height: var(---theme-text-3xl-line-height, 1.5);
}

s-list[text-size="4xl"] > * {
  line-height: var(---theme-text-4xl-line-height, 1.5);
}

s-list[text-size="5xl"] > * {
  line-height: var(---theme-text-5xl-line-height, 1.5);
}

s-list[text-size="6xl"] > * {
  line-height: var(---theme-text-6xl-line-height, 1.5);
}

s-list[text-size="7xl"] > * {
  line-height: var(---theme-text-7xl-line-height, 1.5);
}

s-list[text-size="8xl"] > * {
  line-height: var(---theme-text-8xl-line-height, 1.5);
}

s-list[text-size="9xl"] > * {
  line-height: var(---theme-text-9xl-line-height, 1.5);
}

s-list[text-leading] > * {
  line-height: var(---text-leading, 1.5) !important;
}

s-list[text-tracking] > * {
  letter-spacing: var(---text-tracking, 1.5) !important;
}

s-list[text-weight] > * {
  font-weight: var(---text-weight, 600) !important;
}

s-list[text-style] > * {
  font-style: var(---text-style, italic) !important;
}

s-list[text-decoration-line] > * {
  text-decoration-line: var(---text-decoration-line, underline) !important;
}

s-list[text-decoration-color] > * {
  text-decoration-color: var(---text-decoration-color, currentColor) !important;
}

s-list[text-decoration-thickness] > * {
  text-decoration-thickness: var(---text-decoration-thickness, auto) !important;
}

s-list[text-underline-offset] > * {
  text-underline-offset: var(---text-underline-offset, 4px) !important;
}

s-list[text-case] > * {
  text-transform: var(---text-case, uppercase) !important;
}

s-list[text-align] > * {
  text-align: var(---text-align, center) !important;
}

s-list[text-overflow] > * {
  text-overflow: var(---text-overflow, clip) !important;
}

s-list[text-overflow=""] > * {
  white-space: nowrap;
}

s-list[text-overflow="wrap"] > * {
  white-space: break-spaces;
}

s-list[text-overflow="visible"] > * {
  white-space: nowrap;
}

s-list[text-overflow="clip"] > * {
  white-space: nowrap;
}

s-list[text-overflow="ellipsis"] > * {
  overflow: hidden;
  white-space: nowrap;
}

s-list[text-whitespace] > * {
  white-space: var(---text-whitespace, normal) !important;
}

s-list[text-color] > * {
  color: var(---text-color, white) !important;
}

s-list[text-stroke] > * {
  text-shadow: var(---text-stroke) !important;
}

s-list:is([bg-color], [background-color]) > * {
  background-color: var(---background-color) !important;
}

s-list:is([bg-image], [background-image]) > * {
  background-image: var(---background-image, none) !important;
}

s-list:is([bg-repeat], [background-repeat]) > * {
  background-repeat: var(---background-repeat, repeat) !important;
}

s-list:is([bg-align], [background-align]) > * {
  background-position: var(---background-align, center) !important;
}

s-list:is([bg-fit], [background-fit]) > * {
  background-size: var(---background-fit, contain) !important;
}

s-list[clip] > * {
  clip-path: var(---clip, circle(50%)) !important;
}

s-list[filter] > * {
  filter: var(---filter, none) !important;
}

s-list[backdrop-filter] > * {
  backdrop-filter: var(---backdrop-filter, none) !important;
}

s-list[blend] > * {
  mix-blend-mode: var(---blend, normal) !important;
}

s-list[shadow] > * {
  box-shadow: var(
    ---shadow,
    0 1px 2px hsl(0 0% 0% / 30%),
    0 1px 3px hsl(0 0% 0% / 15%)
  ) !important;
}

s-list[shadow-inset] > * {
  box-shadow: var(
    ---shadow-inset,
    inset 0 1px 2px hsl(0 0% 0% / 30%),
    inset 0 1px 3px hsl(0 0% 0% / 15%)
  ) !important;
}

s-list[ring] > * {
  box-shadow: var(---ring, 0 0 0 2px currentColor) !important;
  outline: none !important;
}

s-list[opacity] > * {
  opacity: var(---opacity, 1) !important;
}

s-list[translate] > * {
  translate: var(---translate, none) !important;
}

s-list[rotate] > * {
  rotate: var(---rotate, none) !important;
}

s-list[scale] > * {
  scale: var(---scale, none) !important;
}

s-list[pivot] > * {
  transform-origin: var(---pivot, left) !important;
}

s-list[transition-delay] > * {
  transition-delay: var(---transition-delay, 100ms) !important;
}

s-list[transition-duration] > * {
  transition-duration: var(---transition-duration, 100ms) !important;
}

s-list[transition-easing] > * {
  transition-timing-function: var(---transition-easing, ease) !important;
}

s-list[animation] > * {
  animation: var(---animation, var(---theme-animation-bounce)) !important;
}

s-list[mask] > * {
  ---theme-mask-angled-corner: conic-gradient(
        from -45deg at var(---corner, 8px) var(---corner, 8px),
        #0000 25%,
        #000 0
      )
      calc(-1 * var(---corner, 8px)) 0 /100% 51% repeat-x,
    conic-gradient(
        from 135deg at var(---corner, 8px) calc(100% - var(---corner, 8px)),
        #0000 25%,
        #000 0
      )
      calc(-1 * var(---corner, 8px)) 100%/100% 51% repeat-x !important;
  ---theme-mask-scooped-corner: radial-gradient(
      var(---corner, 8px) at var(---corner, 8px) var(---corner, 8px),
      #0000 99%,
      #000
    )
    calc(-1 * var(---corner, 8px)) calc(-1 * var(---corner, 8px)) !important;
  ---theme-mask-notched-corner: conic-gradient(
      at calc(2 * var(---corner, 8px)) calc(2 * var(---corner, 8px)),
      #000 75%,
      #0000 0
    )
    calc(-1 * var(---corner, 8px)) calc(-1 * var(---corner, 8px)) !important;
  background-color: transparent !important;
  background-image: none !important;
}

s-list[mask]::before > * {
  /* Apply mask to a pseudo-element so that drop-shadow filters applied to the root element will match the shape of the mask */
  position: absolute !important;
  inset: 0 !important;
  content: "" !important;
  background-image: var(---background-image, none) !important;
  background-color: var(---background-color) !important;
  -webkit-mask: var(---mask, none) !important;
  mask: var(---mask, none) !important;
}

s-list[content-visibility] > * {
  content-visibility: var(---content-visibility, auto);
}

s-list[contain-intrinsic-size] > * {
  contain-intrinsic-size: var(---contain-intrinsic-size, none);
}

s-list {
  display: contents;
}

s-list > .root {
  display: flex;
}

s-viewport* > * {
  transition-property: opacity, translate, rotate, scale, transform, filter,
    backdrop-filter, clip-path, mix-blend-mode, box-shadow, color,
    background-color, border-color, text-decoration-color, fill, stroke;
}

s-viewport[display] > * {
  display: var(---display, flex) !important;
}

s-viewport[position] > * {
  position: var(---position, absolute) !important;
}

s-viewport[position="sticky-top"] > * {
  inset: 0 0 auto 0;
  z-index: 1;
}

s-viewport[position="sticky-bottom"] > * {
  inset: auto 0 0 0;
  z-index: 1;
}

s-viewport[position="sticky-left"] > * {
  inset: 0 auto 0 0;
  z-index: 1;
}

s-viewport[position="sticky-right"] > * {
  inset: 0 0 0 auto;
  z-index: 1;
}

s-viewport[position="fixed-top"] > * {
  inset: 0 0 auto 0;
  z-index: 1;
}

s-viewport[position="fixed-bottom"] > * {
  inset: auto 0 0 0;
  z-index: 1;
}

s-viewport[position="fixed-left"] > * {
  inset: 0 auto 0 0;
  z-index: 1;
}

s-viewport[position="fixed-right"] > * {
  inset: 0 0 0 auto;
  z-index: 1;
}

s-viewport[aspect] > * {
  aspect-ratio: var(---aspect, 1) !important;
}

s-viewport[overflow] > * {
  overflow: var(---overflow, scroll) !important;
}

s-viewport[overflow-x] > * {
  overflow-x: var(---overflow-x, scroll) !important;
}

s-viewport[overflow-y] > * {
  overflow-y: var(---overflow-y, scroll) !important;
}

s-viewport[z] > * {
  z-index: var(---z, 1) !important;
}

s-viewport:is([w], [width]) > * {
  width: var(---width, 100%) !important;
}

s-viewport:is([w-min], [width-min]) > * {
  min-width: var(---width-min, 0) !important;
}

s-viewport:is([w-max], [width-max]) > * {
  max-width: var(---width-max, 100%) !important;
}

s-viewport:is([h], [height]) > * {
  height: var(---height, 100%) !important;
}

s-viewport:is([h-min], [height-min]) > * {
  min-height: var(---height-min, 0) !important;
}

s-viewport:is([h-max], [height-max]) > * {
  max-height: var(---height-max, 100%) !important;
}

s-viewport:is([c], [corner]) > * {
  border-radius: var(---corner, 8px) !important;
}

s-viewport:is([c-tl], [corner-top-left]) > * {
  border-top-left-radius: var(---corner-top-left, 8px) !important;
}

s-viewport:is([c-tr], [corner-top-right]) > * {
  border-top-right-radius: var(---corner-top-right, 8px) !important;
}

s-viewport:is([c-bl], [corner-bottom-left]) > * {
  border-bottom-left-radius: var(---corner-bottom-left, 8px) !important;
}

s-viewport:is([c-br], [corner-bottom-right]) > * {
  border-bottom-right-radius: var(---corner-bottom-right, 8px) !important;
}

s-viewport:is([o-color], [outline-color]) > * {
  outline-style: solid;
  outline-color: var(---outline-color, hsl(0 100% 100% / 50%)) !important;
}

s-viewport:is([o-width], [outline-width]) > * {
  outline-style: solid;
  outline-width: var(---outline-width, 8px) !important;
}

s-viewport:is([o-style], [outline-style]) > * {
  outline-style: var(---outline-style, solid) !important;
}

s-viewport:is([b-color], [border-color]) > * {
  border-style: solid;
  border-color: var(---border-color, currentColor) !important;
}

s-viewport:is([b-color-t], [border-color-top]) > * {
  border-style: solid;
  border-top-color: var(---border-color-top, currentColor) !important;
}

s-viewport:is([b-color-b], [border-color-bottom]) > * {
  border-style: solid;
  border-bottom-color: var(---border-color-bottom, currentColor) !important;
}

s-viewport:is([b-color-l], [border-color-left]) > * {
  border-style: solid;
  border-left-color: var(---border-color-left, currentColor) !important;
}

s-viewport:is([b-color-r], [border-color-right]) > * {
  border-style: solid;
  border-right-color: var(---border-color-right, currentColor) !important;
}

s-viewport:is([b-width], [border-width]) > * {
  border-style: solid;
  border-width: var(---border-width, 8px) !important;
}

s-viewport:is([b-width-t], [border-width-top]) > * {
  border-style: solid;
  border-top-width: var(---border-width-top, 8px) !important;
}

s-viewport:is([b-width-b], [border-width-bottom]) > * {
  border-style: solid;
  border-bottom-width: var(---border-width-bottom, 8px) !important;
}

s-viewport:is([b-width-l], [border-width-left]) > * {
  border-style: solid;
  border-left-width: var(---border-width-left, 8px) !important;
}

s-viewport:is([b-width-r], [border-width-right]) > * {
  border-style: solid;
  border-right-width: var(---border-width-right, 8px) !important;
}

s-viewport:is([b-style], [border-style]) > * {
  border-style: var(---border-style, solid) !important;
}

s-viewport:is([b-style-t], [border-style-top]) > * {
  border-top-style: var(---border-style-top, solid) !important;
}

s-viewport:is([b-style-b], [border-style-bottom]) > * {
  border-bottom-style: var(---border-style-bottom, solid) !important;
}

s-viewport:is([b-style-l], [border-style-left]) > * {
  border-left-style: var(---border-style-left, solid) !important;
}

s-viewport:is([b-style-r], [border-style-right]) > * {
  border-right-style: var(---border-style-right, solid) !important;
}

s-viewport:is([i], [inset]) > * {
  inset: var(---inset, 8px) !important;
}

s-viewport:is([i-t], [inset-top]) > * {
  top: var(---inset-top, 8px) !important;
}

s-viewport:is([i-b], [inset-bottom]) > * {
  bottom: var(---inset-bottom, 8px) !important;
}

s-viewport:is([i-l], [inset-left]) > * {
  left: var(---inset-left, 8px) !important;
}

s-viewport:is([i-r], [inset-right]) > * {
  right: var(---inset-right, 8px) !important;
}

s-viewport:is([m], [margin]) > * {
  margin: var(---margin, 8px) !important;
}

s-viewport:is([m-t], [margin-top]) > * {
  margin-top: var(---margin-top, 8px) !important;
}

s-viewport:is([m-b], [margin-bottom]) > * {
  margin-bottom: var(---margin-bottom, 8px) !important;
}

s-viewport:is([m-l], [margin-left]) > * {
  margin-left: var(---margin-left, 8px) !important;
}

s-viewport:is([m-r], [margin-right]) > * {
  margin-right: var(---margin-right, 8px) !important;
}

s-viewport:is([p], [padding]) > * {
  padding: var(---padding, 8px) !important;
}

s-viewport:is([p-t], [padding-top]) > * {
  padding-top: var(---padding-top, 8px) !important;
}

s-viewport:is([p-b], [padding-bottom]) > * {
  padding-bottom: var(---padding-bottom, 8px) !important;
}

s-viewport:is([p-l], [padding-left]) > * {
  padding-left: var(---padding-left, 8px) !important;
}

s-viewport:is([p-r], [padding-right]) > * {
  padding-right: var(---padding-right, 8px) !important;
}

s-viewport:is([child-layout="row"], [child-layout="column"]) > * {
  display: flex;
  flex-direction: var(---child-layout, row) !important;
}

s-viewport:is([child-layout="grid"], [child-columns]) > * {
  display: grid;
  grid-template-columns: var(---child-columns, 1fr 1fr 1fr);
}

s-viewport[child-gap] > * {
  gap: var(---child-gap, 8px) !important;
}

s-viewport[child-align] > * {
  align-items: var(---child-align, center) !important;
}

s-viewport[child-justify] > * {
  justify-content: var(---child-justify, center) !important;
}

s-viewport[child-overflow] > * {
  flex-wrap: var(---child-overflow, nowrap) !important;
}

s-viewport[self-align] > * {
  align-self: var(---self-align, center) !important;
}

s-viewport[flex] > * {
  flex: var(---flex, 1) !important;
}

s-viewport[grow] > * {
  flex-grow: var(---grow, 1) !important;
}

s-viewport[shrink] > * {
  flex-shrink: var(---shrink, 1) !important;
}

s-viewport[order] > * {
  order: var(---order, 0) !important;
}

s-viewport[fill] path > * {
  fill: var(---fill, currentColor) !important;
}

s-viewport[stroke] path > * {
  stroke: var(---stroke, currentColor) !important;
}

s-viewport[stroke-width] path > * {
  stroke-width: var(---stroke-width, 1) !important;
}

s-viewport[visible] > * {
  visibility: var(---visible, visible) !important;
}

s-viewport[interactable] > * {
  pointer-events: var(---interactable, auto) !important;
}

s-viewport[interactable="none"] > * {
  cursor: default;
}

s-viewport[selectable] > * {
  user-select: var(---selectable, auto) !important;
}

[selectable=""],
[selectable="auto"],
s-viewport[selectable="all"] > * {
  cursor: text;
}

s-viewport[cursor] > * {
  cursor: var(---cursor, auto) !important;
}

s-viewport[text-font] > * {
  font-family: var(---text-font, monospace) !important;
}

s-viewport[text-size] > * {
  font-size: var(---text-size, 1rem) !important;
}

s-viewport[text-size="2xs"] > * {
  line-height: var(---theme-text-2xs-line-height, 1.5);
}

s-viewport[text-size="xs"] > * {
  line-height: var(---theme-text-xs-line-height, 1.5);
}

s-viewport[text-size="sm"] > * {
  line-height: var(---theme-text-sm-line-height, 1.5);
}

s-viewport[text-size="md"] > * {
  line-height: var(---theme-text-md-line-height, 1.5);
}

s-viewport[text-size="lg"] > * {
  line-height: var(---theme-text-lg-line-height, 1.5);
}

s-viewport[text-size="xl"] > * {
  line-height: var(---theme-text-xl-line-height, 1.5);
}

s-viewport[text-size="2xl"] > * {
  line-height: var(---theme-text-2xl-line-height, 1.5);
}

s-viewport[text-size="3xl"] > * {
  line-height: var(---theme-text-3xl-line-height, 1.5);
}

s-viewport[text-size="4xl"] > * {
  line-height: var(---theme-text-4xl-line-height, 1.5);
}

s-viewport[text-size="5xl"] > * {
  line-height: var(---theme-text-5xl-line-height, 1.5);
}

s-viewport[text-size="6xl"] > * {
  line-height: var(---theme-text-6xl-line-height, 1.5);
}

s-viewport[text-size="7xl"] > * {
  line-height: var(---theme-text-7xl-line-height, 1.5);
}

s-viewport[text-size="8xl"] > * {
  line-height: var(---theme-text-8xl-line-height, 1.5);
}

s-viewport[text-size="9xl"] > * {
  line-height: var(---theme-text-9xl-line-height, 1.5);
}

s-viewport[text-leading] > * {
  line-height: var(---text-leading, 1.5) !important;
}

s-viewport[text-tracking] > * {
  letter-spacing: var(---text-tracking, 1.5) !important;
}

s-viewport[text-weight] > * {
  font-weight: var(---text-weight, 600) !important;
}

s-viewport[text-style] > * {
  font-style: var(---text-style, italic) !important;
}

s-viewport[text-decoration-line] > * {
  text-decoration-line: var(---text-decoration-line, underline) !important;
}

s-viewport[text-decoration-color] > * {
  text-decoration-color: var(---text-decoration-color, currentColor) !important;
}

s-viewport[text-decoration-thickness] > * {
  text-decoration-thickness: var(---text-decoration-thickness, auto) !important;
}

s-viewport[text-underline-offset] > * {
  text-underline-offset: var(---text-underline-offset, 4px) !important;
}

s-viewport[text-case] > * {
  text-transform: var(---text-case, uppercase) !important;
}

s-viewport[text-align] > * {
  text-align: var(---text-align, center) !important;
}

s-viewport[text-overflow] > * {
  text-overflow: var(---text-overflow, clip) !important;
}

s-viewport[text-overflow=""] > * {
  white-space: nowrap;
}

s-viewport[text-overflow="wrap"] > * {
  white-space: break-spaces;
}

s-viewport[text-overflow="visible"] > * {
  white-space: nowrap;
}

s-viewport[text-overflow="clip"] > * {
  white-space: nowrap;
}

s-viewport[text-overflow="ellipsis"] > * {
  overflow: hidden;
  white-space: nowrap;
}

s-viewport[text-whitespace] > * {
  white-space: var(---text-whitespace, normal) !important;
}

s-viewport[text-color] > * {
  color: var(---text-color, white) !important;
}

s-viewport[text-stroke] > * {
  text-shadow: var(---text-stroke) !important;
}

s-viewport:is([bg-color], [background-color]) > * {
  background-color: var(---background-color) !important;
}

s-viewport:is([bg-image], [background-image]) > * {
  background-image: var(---background-image, none) !important;
}

s-viewport:is([bg-repeat], [background-repeat]) > * {
  background-repeat: var(---background-repeat, repeat) !important;
}

s-viewport:is([bg-align], [background-align]) > * {
  background-position: var(---background-align, center) !important;
}

s-viewport:is([bg-fit], [background-fit]) > * {
  background-size: var(---background-fit, contain) !important;
}

s-viewport[clip] > * {
  clip-path: var(---clip, circle(50%)) !important;
}

s-viewport[filter] > * {
  filter: var(---filter, none) !important;
}

s-viewport[backdrop-filter] > * {
  backdrop-filter: var(---backdrop-filter, none) !important;
}

s-viewport[blend] > * {
  mix-blend-mode: var(---blend, normal) !important;
}

s-viewport[shadow] > * {
  box-shadow: var(
    ---shadow,
    0 1px 2px hsl(0 0% 0% / 30%),
    0 1px 3px hsl(0 0% 0% / 15%)
  ) !important;
}

s-viewport[shadow-inset] > * {
  box-shadow: var(
    ---shadow-inset,
    inset 0 1px 2px hsl(0 0% 0% / 30%),
    inset 0 1px 3px hsl(0 0% 0% / 15%)
  ) !important;
}

s-viewport[ring] > * {
  box-shadow: var(---ring, 0 0 0 2px currentColor) !important;
  outline: none !important;
}

s-viewport[opacity] > * {
  opacity: var(---opacity, 1) !important;
}

s-viewport[translate] > * {
  translate: var(---translate, none) !important;
}

s-viewport[rotate] > * {
  rotate: var(---rotate, none) !important;
}

s-viewport[scale] > * {
  scale: var(---scale, none) !important;
}

s-viewport[pivot] > * {
  transform-origin: var(---pivot, left) !important;
}

s-viewport[transition-delay] > * {
  transition-delay: var(---transition-delay, 100ms) !important;
}

s-viewport[transition-duration] > * {
  transition-duration: var(---transition-duration, 100ms) !important;
}

s-viewport[transition-easing] > * {
  transition-timing-function: var(---transition-easing, ease) !important;
}

s-viewport[animation] > * {
  animation: var(---animation, var(---theme-animation-bounce)) !important;
}

s-viewport[mask] > * {
  ---theme-mask-angled-corner: conic-gradient(
        from -45deg at var(---corner, 8px) var(---corner, 8px),
        #0000 25%,
        #000 0
      )
      calc(-1 * var(---corner, 8px)) 0 /100% 51% repeat-x,
    conic-gradient(
        from 135deg at var(---corner, 8px) calc(100% - var(---corner, 8px)),
        #0000 25%,
        #000 0
      )
      calc(-1 * var(---corner, 8px)) 100%/100% 51% repeat-x !important;
  ---theme-mask-scooped-corner: radial-gradient(
      var(---corner, 8px) at var(---corner, 8px) var(---corner, 8px),
      #0000 99%,
      #000
    )
    calc(-1 * var(---corner, 8px)) calc(-1 * var(---corner, 8px)) !important;
  ---theme-mask-notched-corner: conic-gradient(
      at calc(2 * var(---corner, 8px)) calc(2 * var(---corner, 8px)),
      #000 75%,
      #0000 0
    )
    calc(-1 * var(---corner, 8px)) calc(-1 * var(---corner, 8px)) !important;
  background-color: transparent !important;
  background-image: none !important;
}

s-viewport[mask]::before > * {
  /* Apply mask to a pseudo-element so that drop-shadow filters applied to the root element will match the shape of the mask */
  position: absolute !important;
  inset: 0 !important;
  content: "" !important;
  background-image: var(---background-image, none) !important;
  background-color: var(---background-color) !important;
  -webkit-mask: var(---mask, none) !important;
  mask: var(---mask, none) !important;
}

s-viewport[content-visibility] > * {
  content-visibility: var(---content-visibility, auto);
}

s-viewport[contain-intrinsic-size] > * {
  contain-intrinsic-size: var(---contain-intrinsic-size, none);
}

s-viewport {
  display: contents;
}

s-viewport > .root {
  display: flex;
}

s-scroll-blocker* > * {
  transition-property: opacity, translate, rotate, scale, transform, filter,
    backdrop-filter, clip-path, mix-blend-mode, box-shadow, color,
    background-color, border-color, text-decoration-color, fill, stroke;
}

s-scroll-blocker[display] > * {
  display: var(---display, flex) !important;
}

s-scroll-blocker[position] > * {
  position: var(---position, absolute) !important;
}

s-scroll-blocker[position="sticky-top"] > * {
  inset: 0 0 auto 0;
  z-index: 1;
}

s-scroll-blocker[position="sticky-bottom"] > * {
  inset: auto 0 0 0;
  z-index: 1;
}

s-scroll-blocker[position="sticky-left"] > * {
  inset: 0 auto 0 0;
  z-index: 1;
}

s-scroll-blocker[position="sticky-right"] > * {
  inset: 0 0 0 auto;
  z-index: 1;
}

s-scroll-blocker[position="fixed-top"] > * {
  inset: 0 0 auto 0;
  z-index: 1;
}

s-scroll-blocker[position="fixed-bottom"] > * {
  inset: auto 0 0 0;
  z-index: 1;
}

s-scroll-blocker[position="fixed-left"] > * {
  inset: 0 auto 0 0;
  z-index: 1;
}

s-scroll-blocker[position="fixed-right"] > * {
  inset: 0 0 0 auto;
  z-index: 1;
}

s-scroll-blocker[aspect] > * {
  aspect-ratio: var(---aspect, 1) !important;
}

s-scroll-blocker[overflow] > * {
  overflow: var(---overflow, scroll) !important;
}

s-scroll-blocker[overflow-x] > * {
  overflow-x: var(---overflow-x, scroll) !important;
}

s-scroll-blocker[overflow-y] > * {
  overflow-y: var(---overflow-y, scroll) !important;
}

s-scroll-blocker[z] > * {
  z-index: var(---z, 1) !important;
}

s-scroll-blocker:is([w], [width]) > * {
  width: var(---width, 100%) !important;
}

s-scroll-blocker:is([w-min], [width-min]) > * {
  min-width: var(---width-min, 0) !important;
}

s-scroll-blocker:is([w-max], [width-max]) > * {
  max-width: var(---width-max, 100%) !important;
}

s-scroll-blocker:is([h], [height]) > * {
  height: var(---height, 100%) !important;
}

s-scroll-blocker:is([h-min], [height-min]) > * {
  min-height: var(---height-min, 0) !important;
}

s-scroll-blocker:is([h-max], [height-max]) > * {
  max-height: var(---height-max, 100%) !important;
}

s-scroll-blocker:is([c], [corner]) > * {
  border-radius: var(---corner, 8px) !important;
}

s-scroll-blocker:is([c-tl], [corner-top-left]) > * {
  border-top-left-radius: var(---corner-top-left, 8px) !important;
}

s-scroll-blocker:is([c-tr], [corner-top-right]) > * {
  border-top-right-radius: var(---corner-top-right, 8px) !important;
}

s-scroll-blocker:is([c-bl], [corner-bottom-left]) > * {
  border-bottom-left-radius: var(---corner-bottom-left, 8px) !important;
}

s-scroll-blocker:is([c-br], [corner-bottom-right]) > * {
  border-bottom-right-radius: var(---corner-bottom-right, 8px) !important;
}

s-scroll-blocker:is([o-color], [outline-color]) > * {
  outline-style: solid;
  outline-color: var(---outline-color, hsl(0 100% 100% / 50%)) !important;
}

s-scroll-blocker:is([o-width], [outline-width]) > * {
  outline-style: solid;
  outline-width: var(---outline-width, 8px) !important;
}

s-scroll-blocker:is([o-style], [outline-style]) > * {
  outline-style: var(---outline-style, solid) !important;
}

s-scroll-blocker:is([b-color], [border-color]) > * {
  border-style: solid;
  border-color: var(---border-color, currentColor) !important;
}

s-scroll-blocker:is([b-color-t], [border-color-top]) > * {
  border-style: solid;
  border-top-color: var(---border-color-top, currentColor) !important;
}

s-scroll-blocker:is([b-color-b], [border-color-bottom]) > * {
  border-style: solid;
  border-bottom-color: var(---border-color-bottom, currentColor) !important;
}

s-scroll-blocker:is([b-color-l], [border-color-left]) > * {
  border-style: solid;
  border-left-color: var(---border-color-left, currentColor) !important;
}

s-scroll-blocker:is([b-color-r], [border-color-right]) > * {
  border-style: solid;
  border-right-color: var(---border-color-right, currentColor) !important;
}

s-scroll-blocker:is([b-width], [border-width]) > * {
  border-style: solid;
  border-width: var(---border-width, 8px) !important;
}

s-scroll-blocker:is([b-width-t], [border-width-top]) > * {
  border-style: solid;
  border-top-width: var(---border-width-top, 8px) !important;
}

s-scroll-blocker:is([b-width-b], [border-width-bottom]) > * {
  border-style: solid;
  border-bottom-width: var(---border-width-bottom, 8px) !important;
}

s-scroll-blocker:is([b-width-l], [border-width-left]) > * {
  border-style: solid;
  border-left-width: var(---border-width-left, 8px) !important;
}

s-scroll-blocker:is([b-width-r], [border-width-right]) > * {
  border-style: solid;
  border-right-width: var(---border-width-right, 8px) !important;
}

s-scroll-blocker:is([b-style], [border-style]) > * {
  border-style: var(---border-style, solid) !important;
}

s-scroll-blocker:is([b-style-t], [border-style-top]) > * {
  border-top-style: var(---border-style-top, solid) !important;
}

s-scroll-blocker:is([b-style-b], [border-style-bottom]) > * {
  border-bottom-style: var(---border-style-bottom, solid) !important;
}

s-scroll-blocker:is([b-style-l], [border-style-left]) > * {
  border-left-style: var(---border-style-left, solid) !important;
}

s-scroll-blocker:is([b-style-r], [border-style-right]) > * {
  border-right-style: var(---border-style-right, solid) !important;
}

s-scroll-blocker:is([i], [inset]) > * {
  inset: var(---inset, 8px) !important;
}

s-scroll-blocker:is([i-t], [inset-top]) > * {
  top: var(---inset-top, 8px) !important;
}

s-scroll-blocker:is([i-b], [inset-bottom]) > * {
  bottom: var(---inset-bottom, 8px) !important;
}

s-scroll-blocker:is([i-l], [inset-left]) > * {
  left: var(---inset-left, 8px) !important;
}

s-scroll-blocker:is([i-r], [inset-right]) > * {
  right: var(---inset-right, 8px) !important;
}

s-scroll-blocker:is([m], [margin]) > * {
  margin: var(---margin, 8px) !important;
}

s-scroll-blocker:is([m-t], [margin-top]) > * {
  margin-top: var(---margin-top, 8px) !important;
}

s-scroll-blocker:is([m-b], [margin-bottom]) > * {
  margin-bottom: var(---margin-bottom, 8px) !important;
}

s-scroll-blocker:is([m-l], [margin-left]) > * {
  margin-left: var(---margin-left, 8px) !important;
}

s-scroll-blocker:is([m-r], [margin-right]) > * {
  margin-right: var(---margin-right, 8px) !important;
}

s-scroll-blocker:is([p], [padding]) > * {
  padding: var(---padding, 8px) !important;
}

s-scroll-blocker:is([p-t], [padding-top]) > * {
  padding-top: var(---padding-top, 8px) !important;
}

s-scroll-blocker:is([p-b], [padding-bottom]) > * {
  padding-bottom: var(---padding-bottom, 8px) !important;
}

s-scroll-blocker:is([p-l], [padding-left]) > * {
  padding-left: var(---padding-left, 8px) !important;
}

s-scroll-blocker:is([p-r], [padding-right]) > * {
  padding-right: var(---padding-right, 8px) !important;
}

s-scroll-blocker:is([child-layout="row"], [child-layout="column"]) > * {
  display: flex;
  flex-direction: var(---child-layout, row) !important;
}

s-scroll-blocker:is([child-layout="grid"], [child-columns]) > * {
  display: grid;
  grid-template-columns: var(---child-columns, 1fr 1fr 1fr);
}

s-scroll-blocker[child-gap] > * {
  gap: var(---child-gap, 8px) !important;
}

s-scroll-blocker[child-align] > * {
  align-items: var(---child-align, center) !important;
}

s-scroll-blocker[child-justify] > * {
  justify-content: var(---child-justify, center) !important;
}

s-scroll-blocker[child-overflow] > * {
  flex-wrap: var(---child-overflow, nowrap) !important;
}

s-scroll-blocker[self-align] > * {
  align-self: var(---self-align, center) !important;
}

s-scroll-blocker[flex] > * {
  flex: var(---flex, 1) !important;
}

s-scroll-blocker[grow] > * {
  flex-grow: var(---grow, 1) !important;
}

s-scroll-blocker[shrink] > * {
  flex-shrink: var(---shrink, 1) !important;
}

s-scroll-blocker[order] > * {
  order: var(---order, 0) !important;
}

s-scroll-blocker[fill] path > * {
  fill: var(---fill, currentColor) !important;
}

s-scroll-blocker[stroke] path > * {
  stroke: var(---stroke, currentColor) !important;
}

s-scroll-blocker[stroke-width] path > * {
  stroke-width: var(---stroke-width, 1) !important;
}

s-scroll-blocker[visible] > * {
  visibility: var(---visible, visible) !important;
}

s-scroll-blocker[interactable] > * {
  pointer-events: var(---interactable, auto) !important;
}

s-scroll-blocker[interactable="none"] > * {
  cursor: default;
}

s-scroll-blocker[selectable] > * {
  user-select: var(---selectable, auto) !important;
}

[selectable=""],
[selectable="auto"],
s-scroll-blocker[selectable="all"] > * {
  cursor: text;
}

s-scroll-blocker[cursor] > * {
  cursor: var(---cursor, auto) !important;
}

s-scroll-blocker[text-font] > * {
  font-family: var(---text-font, monospace) !important;
}

s-scroll-blocker[text-size] > * {
  font-size: var(---text-size, 1rem) !important;
}

s-scroll-blocker[text-size="2xs"] > * {
  line-height: var(---theme-text-2xs-line-height, 1.5);
}

s-scroll-blocker[text-size="xs"] > * {
  line-height: var(---theme-text-xs-line-height, 1.5);
}

s-scroll-blocker[text-size="sm"] > * {
  line-height: var(---theme-text-sm-line-height, 1.5);
}

s-scroll-blocker[text-size="md"] > * {
  line-height: var(---theme-text-md-line-height, 1.5);
}

s-scroll-blocker[text-size="lg"] > * {
  line-height: var(---theme-text-lg-line-height, 1.5);
}

s-scroll-blocker[text-size="xl"] > * {
  line-height: var(---theme-text-xl-line-height, 1.5);
}

s-scroll-blocker[text-size="2xl"] > * {
  line-height: var(---theme-text-2xl-line-height, 1.5);
}

s-scroll-blocker[text-size="3xl"] > * {
  line-height: var(---theme-text-3xl-line-height, 1.5);
}

s-scroll-blocker[text-size="4xl"] > * {
  line-height: var(---theme-text-4xl-line-height, 1.5);
}

s-scroll-blocker[text-size="5xl"] > * {
  line-height: var(---theme-text-5xl-line-height, 1.5);
}

s-scroll-blocker[text-size="6xl"] > * {
  line-height: var(---theme-text-6xl-line-height, 1.5);
}

s-scroll-blocker[text-size="7xl"] > * {
  line-height: var(---theme-text-7xl-line-height, 1.5);
}

s-scroll-blocker[text-size="8xl"] > * {
  line-height: var(---theme-text-8xl-line-height, 1.5);
}

s-scroll-blocker[text-size="9xl"] > * {
  line-height: var(---theme-text-9xl-line-height, 1.5);
}

s-scroll-blocker[text-leading] > * {
  line-height: var(---text-leading, 1.5) !important;
}

s-scroll-blocker[text-tracking] > * {
  letter-spacing: var(---text-tracking, 1.5) !important;
}

s-scroll-blocker[text-weight] > * {
  font-weight: var(---text-weight, 600) !important;
}

s-scroll-blocker[text-style] > * {
  font-style: var(---text-style, italic) !important;
}

s-scroll-blocker[text-decoration-line] > * {
  text-decoration-line: var(---text-decoration-line, underline) !important;
}

s-scroll-blocker[text-decoration-color] > * {
  text-decoration-color: var(---text-decoration-color, currentColor) !important;
}

s-scroll-blocker[text-decoration-thickness] > * {
  text-decoration-thickness: var(---text-decoration-thickness, auto) !important;
}

s-scroll-blocker[text-underline-offset] > * {
  text-underline-offset: var(---text-underline-offset, 4px) !important;
}

s-scroll-blocker[text-case] > * {
  text-transform: var(---text-case, uppercase) !important;
}

s-scroll-blocker[text-align] > * {
  text-align: var(---text-align, center) !important;
}

s-scroll-blocker[text-overflow] > * {
  text-overflow: var(---text-overflow, clip) !important;
}

s-scroll-blocker[text-overflow=""] > * {
  white-space: nowrap;
}

s-scroll-blocker[text-overflow="wrap"] > * {
  white-space: break-spaces;
}

s-scroll-blocker[text-overflow="visible"] > * {
  white-space: nowrap;
}

s-scroll-blocker[text-overflow="clip"] > * {
  white-space: nowrap;
}

s-scroll-blocker[text-overflow="ellipsis"] > * {
  overflow: hidden;
  white-space: nowrap;
}

s-scroll-blocker[text-whitespace] > * {
  white-space: var(---text-whitespace, normal) !important;
}

s-scroll-blocker[text-color] > * {
  color: var(---text-color, white) !important;
}

s-scroll-blocker[text-stroke] > * {
  text-shadow: var(---text-stroke) !important;
}

s-scroll-blocker:is([bg-color], [background-color]) > * {
  background-color: var(---background-color) !important;
}

s-scroll-blocker:is([bg-image], [background-image]) > * {
  background-image: var(---background-image, none) !important;
}

s-scroll-blocker:is([bg-repeat], [background-repeat]) > * {
  background-repeat: var(---background-repeat, repeat) !important;
}

s-scroll-blocker:is([bg-align], [background-align]) > * {
  background-position: var(---background-align, center) !important;
}

s-scroll-blocker:is([bg-fit], [background-fit]) > * {
  background-size: var(---background-fit, contain) !important;
}

s-scroll-blocker[clip] > * {
  clip-path: var(---clip, circle(50%)) !important;
}

s-scroll-blocker[filter] > * {
  filter: var(---filter, none) !important;
}

s-scroll-blocker[backdrop-filter] > * {
  backdrop-filter: var(---backdrop-filter, none) !important;
}

s-scroll-blocker[blend] > * {
  mix-blend-mode: var(---blend, normal) !important;
}

s-scroll-blocker[shadow] > * {
  box-shadow: var(
    ---shadow,
    0 1px 2px hsl(0 0% 0% / 30%),
    0 1px 3px hsl(0 0% 0% / 15%)
  ) !important;
}

s-scroll-blocker[shadow-inset] > * {
  box-shadow: var(
    ---shadow-inset,
    inset 0 1px 2px hsl(0 0% 0% / 30%),
    inset 0 1px 3px hsl(0 0% 0% / 15%)
  ) !important;
}

s-scroll-blocker[ring] > * {
  box-shadow: var(---ring, 0 0 0 2px currentColor) !important;
  outline: none !important;
}

s-scroll-blocker[opacity] > * {
  opacity: var(---opacity, 1) !important;
}

s-scroll-blocker[translate] > * {
  translate: var(---translate, none) !important;
}

s-scroll-blocker[rotate] > * {
  rotate: var(---rotate, none) !important;
}

s-scroll-blocker[scale] > * {
  scale: var(---scale, none) !important;
}

s-scroll-blocker[pivot] > * {
  transform-origin: var(---pivot, left) !important;
}

s-scroll-blocker[transition-delay] > * {
  transition-delay: var(---transition-delay, 100ms) !important;
}

s-scroll-blocker[transition-duration] > * {
  transition-duration: var(---transition-duration, 100ms) !important;
}

s-scroll-blocker[transition-easing] > * {
  transition-timing-function: var(---transition-easing, ease) !important;
}

s-scroll-blocker[animation] > * {
  animation: var(---animation, var(---theme-animation-bounce)) !important;
}

s-scroll-blocker[mask] > * {
  ---theme-mask-angled-corner: conic-gradient(
        from -45deg at var(---corner, 8px) var(---corner, 8px),
        #0000 25%,
        #000 0
      )
      calc(-1 * var(---corner, 8px)) 0 /100% 51% repeat-x,
    conic-gradient(
        from 135deg at var(---corner, 8px) calc(100% - var(---corner, 8px)),
        #0000 25%,
        #000 0
      )
      calc(-1 * var(---corner, 8px)) 100%/100% 51% repeat-x !important;
  ---theme-mask-scooped-corner: radial-gradient(
      var(---corner, 8px) at var(---corner, 8px) var(---corner, 8px),
      #0000 99%,
      #000
    )
    calc(-1 * var(---corner, 8px)) calc(-1 * var(---corner, 8px)) !important;
  ---theme-mask-notched-corner: conic-gradient(
      at calc(2 * var(---corner, 8px)) calc(2 * var(---corner, 8px)),
      #000 75%,
      #0000 0
    )
    calc(-1 * var(---corner, 8px)) calc(-1 * var(---corner, 8px)) !important;
  background-color: transparent !important;
  background-image: none !important;
}

s-scroll-blocker[mask]::before > * {
  /* Apply mask to a pseudo-element so that drop-shadow filters applied to the root element will match the shape of the mask */
  position: absolute !important;
  inset: 0 !important;
  content: "" !important;
  background-image: var(---background-image, none) !important;
  background-color: var(---background-color) !important;
  -webkit-mask: var(---mask, none) !important;
  mask: var(---mask, none) !important;
}

s-scroll-blocker[content-visibility] > * {
  content-visibility: var(---content-visibility, auto);
}

s-scroll-blocker[contain-intrinsic-size] > * {
  contain-intrinsic-size: var(---contain-intrinsic-size, none);
}

s-scroll-blocker {
  display: contents;
}

s-scroll-blocker > .root {
  display: flex;
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: auto;
}

s-circle* > * {
  transition-property: opacity, translate, rotate, scale, transform, filter,
    backdrop-filter, clip-path, mix-blend-mode, box-shadow, color,
    background-color, border-color, text-decoration-color, fill, stroke;
}

s-circle[display] > * {
  display: var(---display, flex) !important;
}

s-circle[position] > * {
  position: var(---position, absolute) !important;
}

s-circle[position="sticky-top"] > * {
  inset: 0 0 auto 0;
  z-index: 1;
}

s-circle[position="sticky-bottom"] > * {
  inset: auto 0 0 0;
  z-index: 1;
}

s-circle[position="sticky-left"] > * {
  inset: 0 auto 0 0;
  z-index: 1;
}

s-circle[position="sticky-right"] > * {
  inset: 0 0 0 auto;
  z-index: 1;
}

s-circle[position="fixed-top"] > * {
  inset: 0 0 auto 0;
  z-index: 1;
}

s-circle[position="fixed-bottom"] > * {
  inset: auto 0 0 0;
  z-index: 1;
}

s-circle[position="fixed-left"] > * {
  inset: 0 auto 0 0;
  z-index: 1;
}

s-circle[position="fixed-right"] > * {
  inset: 0 0 0 auto;
  z-index: 1;
}

s-circle[aspect] > * {
  aspect-ratio: var(---aspect, 1) !important;
}

s-circle[overflow] > * {
  overflow: var(---overflow, scroll) !important;
}

s-circle[overflow-x] > * {
  overflow-x: var(---overflow-x, scroll) !important;
}

s-circle[overflow-y] > * {
  overflow-y: var(---overflow-y, scroll) !important;
}

s-circle[z] > * {
  z-index: var(---z, 1) !important;
}

s-circle:is([w], [width]) > * {
  width: var(---width, 100%) !important;
}

s-circle:is([w-min], [width-min]) > * {
  min-width: var(---width-min, 0) !important;
}

s-circle:is([w-max], [width-max]) > * {
  max-width: var(---width-max, 100%) !important;
}

s-circle:is([h], [height]) > * {
  height: var(---height, 100%) !important;
}

s-circle:is([h-min], [height-min]) > * {
  min-height: var(---height-min, 0) !important;
}

s-circle:is([h-max], [height-max]) > * {
  max-height: var(---height-max, 100%) !important;
}

s-circle:is([c], [corner]) > * {
  border-radius: var(---corner, 8px) !important;
}

s-circle:is([c-tl], [corner-top-left]) > * {
  border-top-left-radius: var(---corner-top-left, 8px) !important;
}

s-circle:is([c-tr], [corner-top-right]) > * {
  border-top-right-radius: var(---corner-top-right, 8px) !important;
}

s-circle:is([c-bl], [corner-bottom-left]) > * {
  border-bottom-left-radius: var(---corner-bottom-left, 8px) !important;
}

s-circle:is([c-br], [corner-bottom-right]) > * {
  border-bottom-right-radius: var(---corner-bottom-right, 8px) !important;
}

s-circle:is([o-color], [outline-color]) > * {
  outline-style: solid;
  outline-color: var(---outline-color, hsl(0 100% 100% / 50%)) !important;
}

s-circle:is([o-width], [outline-width]) > * {
  outline-style: solid;
  outline-width: var(---outline-width, 8px) !important;
}

s-circle:is([o-style], [outline-style]) > * {
  outline-style: var(---outline-style, solid) !important;
}

s-circle:is([b-color], [border-color]) > * {
  border-style: solid;
  border-color: var(---border-color, currentColor) !important;
}

s-circle:is([b-color-t], [border-color-top]) > * {
  border-style: solid;
  border-top-color: var(---border-color-top, currentColor) !important;
}

s-circle:is([b-color-b], [border-color-bottom]) > * {
  border-style: solid;
  border-bottom-color: var(---border-color-bottom, currentColor) !important;
}

s-circle:is([b-color-l], [border-color-left]) > * {
  border-style: solid;
  border-left-color: var(---border-color-left, currentColor) !important;
}

s-circle:is([b-color-r], [border-color-right]) > * {
  border-style: solid;
  border-right-color: var(---border-color-right, currentColor) !important;
}

s-circle:is([b-width], [border-width]) > * {
  border-style: solid;
  border-width: var(---border-width, 8px) !important;
}

s-circle:is([b-width-t], [border-width-top]) > * {
  border-style: solid;
  border-top-width: var(---border-width-top, 8px) !important;
}

s-circle:is([b-width-b], [border-width-bottom]) > * {
  border-style: solid;
  border-bottom-width: var(---border-width-bottom, 8px) !important;
}

s-circle:is([b-width-l], [border-width-left]) > * {
  border-style: solid;
  border-left-width: var(---border-width-left, 8px) !important;
}

s-circle:is([b-width-r], [border-width-right]) > * {
  border-style: solid;
  border-right-width: var(---border-width-right, 8px) !important;
}

s-circle:is([b-style], [border-style]) > * {
  border-style: var(---border-style, solid) !important;
}

s-circle:is([b-style-t], [border-style-top]) > * {
  border-top-style: var(---border-style-top, solid) !important;
}

s-circle:is([b-style-b], [border-style-bottom]) > * {
  border-bottom-style: var(---border-style-bottom, solid) !important;
}

s-circle:is([b-style-l], [border-style-left]) > * {
  border-left-style: var(---border-style-left, solid) !important;
}

s-circle:is([b-style-r], [border-style-right]) > * {
  border-right-style: var(---border-style-right, solid) !important;
}

s-circle:is([i], [inset]) > * {
  inset: var(---inset, 8px) !important;
}

s-circle:is([i-t], [inset-top]) > * {
  top: var(---inset-top, 8px) !important;
}

s-circle:is([i-b], [inset-bottom]) > * {
  bottom: var(---inset-bottom, 8px) !important;
}

s-circle:is([i-l], [inset-left]) > * {
  left: var(---inset-left, 8px) !important;
}

s-circle:is([i-r], [inset-right]) > * {
  right: var(---inset-right, 8px) !important;
}

s-circle:is([m], [margin]) > * {
  margin: var(---margin, 8px) !important;
}

s-circle:is([m-t], [margin-top]) > * {
  margin-top: var(---margin-top, 8px) !important;
}

s-circle:is([m-b], [margin-bottom]) > * {
  margin-bottom: var(---margin-bottom, 8px) !important;
}

s-circle:is([m-l], [margin-left]) > * {
  margin-left: var(---margin-left, 8px) !important;
}

s-circle:is([m-r], [margin-right]) > * {
  margin-right: var(---margin-right, 8px) !important;
}

s-circle:is([p], [padding]) > * {
  padding: var(---padding, 8px) !important;
}

s-circle:is([p-t], [padding-top]) > * {
  padding-top: var(---padding-top, 8px) !important;
}

s-circle:is([p-b], [padding-bottom]) > * {
  padding-bottom: var(---padding-bottom, 8px) !important;
}

s-circle:is([p-l], [padding-left]) > * {
  padding-left: var(---padding-left, 8px) !important;
}

s-circle:is([p-r], [padding-right]) > * {
  padding-right: var(---padding-right, 8px) !important;
}

s-circle:is([child-layout="row"], [child-layout="column"]) > * {
  display: flex;
  flex-direction: var(---child-layout, row) !important;
}

s-circle:is([child-layout="grid"], [child-columns]) > * {
  display: grid;
  grid-template-columns: var(---child-columns, 1fr 1fr 1fr);
}

s-circle[child-gap] > * {
  gap: var(---child-gap, 8px) !important;
}

s-circle[child-align] > * {
  align-items: var(---child-align, center) !important;
}

s-circle[child-justify] > * {
  justify-content: var(---child-justify, center) !important;
}

s-circle[child-overflow] > * {
  flex-wrap: var(---child-overflow, nowrap) !important;
}

s-circle[self-align] > * {
  align-self: var(---self-align, center) !important;
}

s-circle[flex] > * {
  flex: var(---flex, 1) !important;
}

s-circle[grow] > * {
  flex-grow: var(---grow, 1) !important;
}

s-circle[shrink] > * {
  flex-shrink: var(---shrink, 1) !important;
}

s-circle[order] > * {
  order: var(---order, 0) !important;
}

s-circle[fill] path > * {
  fill: var(---fill, currentColor) !important;
}

s-circle[stroke] path > * {
  stroke: var(---stroke, currentColor) !important;
}

s-circle[stroke-width] path > * {
  stroke-width: var(---stroke-width, 1) !important;
}

s-circle[visible] > * {
  visibility: var(---visible, visible) !important;
}

s-circle[interactable] > * {
  pointer-events: var(---interactable, auto) !important;
}

s-circle[interactable="none"] > * {
  cursor: default;
}

s-circle[selectable] > * {
  user-select: var(---selectable, auto) !important;
}

[selectable=""],
[selectable="auto"],
s-circle[selectable="all"] > * {
  cursor: text;
}

s-circle[cursor] > * {
  cursor: var(---cursor, auto) !important;
}

s-circle[text-font] > * {
  font-family: var(---text-font, monospace) !important;
}

s-circle[text-size] > * {
  font-size: var(---text-size, 1rem) !important;
}

s-circle[text-size="2xs"] > * {
  line-height: var(---theme-text-2xs-line-height, 1.5);
}

s-circle[text-size="xs"] > * {
  line-height: var(---theme-text-xs-line-height, 1.5);
}

s-circle[text-size="sm"] > * {
  line-height: var(---theme-text-sm-line-height, 1.5);
}

s-circle[text-size="md"] > * {
  line-height: var(---theme-text-md-line-height, 1.5);
}

s-circle[text-size="lg"] > * {
  line-height: var(---theme-text-lg-line-height, 1.5);
}

s-circle[text-size="xl"] > * {
  line-height: var(---theme-text-xl-line-height, 1.5);
}

s-circle[text-size="2xl"] > * {
  line-height: var(---theme-text-2xl-line-height, 1.5);
}

s-circle[text-size="3xl"] > * {
  line-height: var(---theme-text-3xl-line-height, 1.5);
}

s-circle[text-size="4xl"] > * {
  line-height: var(---theme-text-4xl-line-height, 1.5);
}

s-circle[text-size="5xl"] > * {
  line-height: var(---theme-text-5xl-line-height, 1.5);
}

s-circle[text-size="6xl"] > * {
  line-height: var(---theme-text-6xl-line-height, 1.5);
}

s-circle[text-size="7xl"] > * {
  line-height: var(---theme-text-7xl-line-height, 1.5);
}

s-circle[text-size="8xl"] > * {
  line-height: var(---theme-text-8xl-line-height, 1.5);
}

s-circle[text-size="9xl"] > * {
  line-height: var(---theme-text-9xl-line-height, 1.5);
}

s-circle[text-leading] > * {
  line-height: var(---text-leading, 1.5) !important;
}

s-circle[text-tracking] > * {
  letter-spacing: var(---text-tracking, 1.5) !important;
}

s-circle[text-weight] > * {
  font-weight: var(---text-weight, 600) !important;
}

s-circle[text-style] > * {
  font-style: var(---text-style, italic) !important;
}

s-circle[text-decoration-line] > * {
  text-decoration-line: var(---text-decoration-line, underline) !important;
}

s-circle[text-decoration-color] > * {
  text-decoration-color: var(---text-decoration-color, currentColor) !important;
}

s-circle[text-decoration-thickness] > * {
  text-decoration-thickness: var(---text-decoration-thickness, auto) !important;
}

s-circle[text-underline-offset] > * {
  text-underline-offset: var(---text-underline-offset, 4px) !important;
}

s-circle[text-case] > * {
  text-transform: var(---text-case, uppercase) !important;
}

s-circle[text-align] > * {
  text-align: var(---text-align, center) !important;
}

s-circle[text-overflow] > * {
  text-overflow: var(---text-overflow, clip) !important;
}

s-circle[text-overflow=""] > * {
  white-space: nowrap;
}

s-circle[text-overflow="wrap"] > * {
  white-space: break-spaces;
}

s-circle[text-overflow="visible"] > * {
  white-space: nowrap;
}

s-circle[text-overflow="clip"] > * {
  white-space: nowrap;
}

s-circle[text-overflow="ellipsis"] > * {
  overflow: hidden;
  white-space: nowrap;
}

s-circle[text-whitespace] > * {
  white-space: var(---text-whitespace, normal) !important;
}

s-circle[text-color] > * {
  color: var(---text-color, white) !important;
}

s-circle[text-stroke] > * {
  text-shadow: var(---text-stroke) !important;
}

s-circle:is([bg-color], [background-color]) > * {
  background-color: var(---background-color) !important;
}

s-circle:is([bg-image], [background-image]) > * {
  background-image: var(---background-image, none) !important;
}

s-circle:is([bg-repeat], [background-repeat]) > * {
  background-repeat: var(---background-repeat, repeat) !important;
}

s-circle:is([bg-align], [background-align]) > * {
  background-position: var(---background-align, center) !important;
}

s-circle:is([bg-fit], [background-fit]) > * {
  background-size: var(---background-fit, contain) !important;
}

s-circle[clip] > * {
  clip-path: var(---clip, circle(50%)) !important;
}

s-circle[filter] > * {
  filter: var(---filter, none) !important;
}

s-circle[backdrop-filter] > * {
  backdrop-filter: var(---backdrop-filter, none) !important;
}

s-circle[blend] > * {
  mix-blend-mode: var(---blend, normal) !important;
}

s-circle[shadow] > * {
  box-shadow: var(
    ---shadow,
    0 1px 2px hsl(0 0% 0% / 30%),
    0 1px 3px hsl(0 0% 0% / 15%)
  ) !important;
}

s-circle[shadow-inset] > * {
  box-shadow: var(
    ---shadow-inset,
    inset 0 1px 2px hsl(0 0% 0% / 30%),
    inset 0 1px 3px hsl(0 0% 0% / 15%)
  ) !important;
}

s-circle[ring] > * {
  box-shadow: var(---ring, 0 0 0 2px currentColor) !important;
  outline: none !important;
}

s-circle[opacity] > * {
  opacity: var(---opacity, 1) !important;
}

s-circle[translate] > * {
  translate: var(---translate, none) !important;
}

s-circle[rotate] > * {
  rotate: var(---rotate, none) !important;
}

s-circle[scale] > * {
  scale: var(---scale, none) !important;
}

s-circle[pivot] > * {
  transform-origin: var(---pivot, left) !important;
}

s-circle[transition-delay] > * {
  transition-delay: var(---transition-delay, 100ms) !important;
}

s-circle[transition-duration] > * {
  transition-duration: var(---transition-duration, 100ms) !important;
}

s-circle[transition-easing] > * {
  transition-timing-function: var(---transition-easing, ease) !important;
}

s-circle[animation] > * {
  animation: var(---animation, var(---theme-animation-bounce)) !important;
}

s-circle[mask] > * {
  ---theme-mask-angled-corner: conic-gradient(
        from -45deg at var(---corner, 8px) var(---corner, 8px),
        #0000 25%,
        #000 0
      )
      calc(-1 * var(---corner, 8px)) 0 /100% 51% repeat-x,
    conic-gradient(
        from 135deg at var(---corner, 8px) calc(100% - var(---corner, 8px)),
        #0000 25%,
        #000 0
      )
      calc(-1 * var(---corner, 8px)) 100%/100% 51% repeat-x !important;
  ---theme-mask-scooped-corner: radial-gradient(
      var(---corner, 8px) at var(---corner, 8px) var(---corner, 8px),
      #0000 99%,
      #000
    )
    calc(-1 * var(---corner, 8px)) calc(-1 * var(---corner, 8px)) !important;
  ---theme-mask-notched-corner: conic-gradient(
      at calc(2 * var(---corner, 8px)) calc(2 * var(---corner, 8px)),
      #000 75%,
      #0000 0
    )
    calc(-1 * var(---corner, 8px)) calc(-1 * var(---corner, 8px)) !important;
  background-color: transparent !important;
  background-image: none !important;
}

s-circle[mask]::before > * {
  /* Apply mask to a pseudo-element so that drop-shadow filters applied to the root element will match the shape of the mask */
  position: absolute !important;
  inset: 0 !important;
  content: "" !important;
  background-image: var(---background-image, none) !important;
  background-color: var(---background-color) !important;
  -webkit-mask: var(---mask, none) !important;
  mask: var(---mask, none) !important;
}

s-circle[content-visibility] > * {
  content-visibility: var(---content-visibility, auto);
}

s-circle[contain-intrinsic-size] > * {
  contain-intrinsic-size: var(---contain-intrinsic-size, none);
}

s-circle {
  display: contents;
  ---aspect: 1/1;
  ---child-layout: column;
  ---child-justify: center;
  ---child-align: center;
  ---shrink: 0;
  ---corner: 50%;
  ---aspect: 1;
  ---size: 40px;
  ---width: var(---size);
  ---height: var(---size);
}

s-circle > .root {
  display: flex;
  flex-direction: var(---child-layout);
  justify-content: var(---child-justify);
  align-items: var(---child-align);
  flex-shrink: var(---shrink);
  border-radius: var(---corner);
  aspect-ratio: var(---aspect);
  width: var(---width);
  height: var(---height);
  will-change: transform;
}

s-icon* > * {
  transition-property: opacity, translate, rotate, scale, transform, filter,
    backdrop-filter, clip-path, mix-blend-mode, box-shadow, color,
    background-color, border-color, text-decoration-color, fill, stroke;
}

s-icon[display] > * {
  display: var(---display, flex) !important;
}

s-icon[position] > * {
  position: var(---position, absolute) !important;
}

s-icon[position="sticky-top"] > * {
  inset: 0 0 auto 0;
  z-index: 1;
}

s-icon[position="sticky-bottom"] > * {
  inset: auto 0 0 0;
  z-index: 1;
}

s-icon[position="sticky-left"] > * {
  inset: 0 auto 0 0;
  z-index: 1;
}

s-icon[position="sticky-right"] > * {
  inset: 0 0 0 auto;
  z-index: 1;
}

s-icon[position="fixed-top"] > * {
  inset: 0 0 auto 0;
  z-index: 1;
}

s-icon[position="fixed-bottom"] > * {
  inset: auto 0 0 0;
  z-index: 1;
}

s-icon[position="fixed-left"] > * {
  inset: 0 auto 0 0;
  z-index: 1;
}

s-icon[position="fixed-right"] > * {
  inset: 0 0 0 auto;
  z-index: 1;
}

s-icon[aspect] > * {
  aspect-ratio: var(---aspect, 1) !important;
}

s-icon[overflow] > * {
  overflow: var(---overflow, scroll) !important;
}

s-icon[overflow-x] > * {
  overflow-x: var(---overflow-x, scroll) !important;
}

s-icon[overflow-y] > * {
  overflow-y: var(---overflow-y, scroll) !important;
}

s-icon[z] > * {
  z-index: var(---z, 1) !important;
}

s-icon:is([w], [width]) > * {
  width: var(---width, 100%) !important;
}

s-icon:is([w-min], [width-min]) > * {
  min-width: var(---width-min, 0) !important;
}

s-icon:is([w-max], [width-max]) > * {
  max-width: var(---width-max, 100%) !important;
}

s-icon:is([h], [height]) > * {
  height: var(---height, 100%) !important;
}

s-icon:is([h-min], [height-min]) > * {
  min-height: var(---height-min, 0) !important;
}

s-icon:is([h-max], [height-max]) > * {
  max-height: var(---height-max, 100%) !important;
}

s-icon:is([c], [corner]) > * {
  border-radius: var(---corner, 8px) !important;
}

s-icon:is([c-tl], [corner-top-left]) > * {
  border-top-left-radius: var(---corner-top-left, 8px) !important;
}

s-icon:is([c-tr], [corner-top-right]) > * {
  border-top-right-radius: var(---corner-top-right, 8px) !important;
}

s-icon:is([c-bl], [corner-bottom-left]) > * {
  border-bottom-left-radius: var(---corner-bottom-left, 8px) !important;
}

s-icon:is([c-br], [corner-bottom-right]) > * {
  border-bottom-right-radius: var(---corner-bottom-right, 8px) !important;
}

s-icon:is([o-color], [outline-color]) > * {
  outline-style: solid;
  outline-color: var(---outline-color, hsl(0 100% 100% / 50%)) !important;
}

s-icon:is([o-width], [outline-width]) > * {
  outline-style: solid;
  outline-width: var(---outline-width, 8px) !important;
}

s-icon:is([o-style], [outline-style]) > * {
  outline-style: var(---outline-style, solid) !important;
}

s-icon:is([b-color], [border-color]) > * {
  border-style: solid;
  border-color: var(---border-color, currentColor) !important;
}

s-icon:is([b-color-t], [border-color-top]) > * {
  border-style: solid;
  border-top-color: var(---border-color-top, currentColor) !important;
}

s-icon:is([b-color-b], [border-color-bottom]) > * {
  border-style: solid;
  border-bottom-color: var(---border-color-bottom, currentColor) !important;
}

s-icon:is([b-color-l], [border-color-left]) > * {
  border-style: solid;
  border-left-color: var(---border-color-left, currentColor) !important;
}

s-icon:is([b-color-r], [border-color-right]) > * {
  border-style: solid;
  border-right-color: var(---border-color-right, currentColor) !important;
}

s-icon:is([b-width], [border-width]) > * {
  border-style: solid;
  border-width: var(---border-width, 8px) !important;
}

s-icon:is([b-width-t], [border-width-top]) > * {
  border-style: solid;
  border-top-width: var(---border-width-top, 8px) !important;
}

s-icon:is([b-width-b], [border-width-bottom]) > * {
  border-style: solid;
  border-bottom-width: var(---border-width-bottom, 8px) !important;
}

s-icon:is([b-width-l], [border-width-left]) > * {
  border-style: solid;
  border-left-width: var(---border-width-left, 8px) !important;
}

s-icon:is([b-width-r], [border-width-right]) > * {
  border-style: solid;
  border-right-width: var(---border-width-right, 8px) !important;
}

s-icon:is([b-style], [border-style]) > * {
  border-style: var(---border-style, solid) !important;
}

s-icon:is([b-style-t], [border-style-top]) > * {
  border-top-style: var(---border-style-top, solid) !important;
}

s-icon:is([b-style-b], [border-style-bottom]) > * {
  border-bottom-style: var(---border-style-bottom, solid) !important;
}

s-icon:is([b-style-l], [border-style-left]) > * {
  border-left-style: var(---border-style-left, solid) !important;
}

s-icon:is([b-style-r], [border-style-right]) > * {
  border-right-style: var(---border-style-right, solid) !important;
}

s-icon:is([i], [inset]) > * {
  inset: var(---inset, 8px) !important;
}

s-icon:is([i-t], [inset-top]) > * {
  top: var(---inset-top, 8px) !important;
}

s-icon:is([i-b], [inset-bottom]) > * {
  bottom: var(---inset-bottom, 8px) !important;
}

s-icon:is([i-l], [inset-left]) > * {
  left: var(---inset-left, 8px) !important;
}

s-icon:is([i-r], [inset-right]) > * {
  right: var(---inset-right, 8px) !important;
}

s-icon:is([m], [margin]) > * {
  margin: var(---margin, 8px) !important;
}

s-icon:is([m-t], [margin-top]) > * {
  margin-top: var(---margin-top, 8px) !important;
}

s-icon:is([m-b], [margin-bottom]) > * {
  margin-bottom: var(---margin-bottom, 8px) !important;
}

s-icon:is([m-l], [margin-left]) > * {
  margin-left: var(---margin-left, 8px) !important;
}

s-icon:is([m-r], [margin-right]) > * {
  margin-right: var(---margin-right, 8px) !important;
}

s-icon:is([p], [padding]) > * {
  padding: var(---padding, 8px) !important;
}

s-icon:is([p-t], [padding-top]) > * {
  padding-top: var(---padding-top, 8px) !important;
}

s-icon:is([p-b], [padding-bottom]) > * {
  padding-bottom: var(---padding-bottom, 8px) !important;
}

s-icon:is([p-l], [padding-left]) > * {
  padding-left: var(---padding-left, 8px) !important;
}

s-icon:is([p-r], [padding-right]) > * {
  padding-right: var(---padding-right, 8px) !important;
}

s-icon:is([child-layout="row"], [child-layout="column"]) > * {
  display: flex;
  flex-direction: var(---child-layout, row) !important;
}

s-icon:is([child-layout="grid"], [child-columns]) > * {
  display: grid;
  grid-template-columns: var(---child-columns, 1fr 1fr 1fr);
}

s-icon[child-gap] > * {
  gap: var(---child-gap, 8px) !important;
}

s-icon[child-align] > * {
  align-items: var(---child-align, center) !important;
}

s-icon[child-justify] > * {
  justify-content: var(---child-justify, center) !important;
}

s-icon[child-overflow] > * {
  flex-wrap: var(---child-overflow, nowrap) !important;
}

s-icon[self-align] > * {
  align-self: var(---self-align, center) !important;
}

s-icon[flex] > * {
  flex: var(---flex, 1) !important;
}

s-icon[grow] > * {
  flex-grow: var(---grow, 1) !important;
}

s-icon[shrink] > * {
  flex-shrink: var(---shrink, 1) !important;
}

s-icon[order] > * {
  order: var(---order, 0) !important;
}

s-icon[fill] path > * {
  fill: var(---fill, currentColor) !important;
}

s-icon[stroke] path > * {
  stroke: var(---stroke, currentColor) !important;
}

s-icon[stroke-width] path > * {
  stroke-width: var(---stroke-width, 1) !important;
}

s-icon[visible] > * {
  visibility: var(---visible, visible) !important;
}

s-icon[interactable] > * {
  pointer-events: var(---interactable, auto) !important;
}

s-icon[interactable="none"] > * {
  cursor: default;
}

s-icon[selectable] > * {
  user-select: var(---selectable, auto) !important;
}

[selectable=""],
[selectable="auto"],
s-icon[selectable="all"] > * {
  cursor: text;
}

s-icon[cursor] > * {
  cursor: var(---cursor, auto) !important;
}

s-icon[text-font] > * {
  font-family: var(---text-font, monospace) !important;
}

s-icon[text-size] > * {
  font-size: var(---text-size, 1rem) !important;
}

s-icon[text-size="2xs"] > * {
  line-height: var(---theme-text-2xs-line-height, 1.5);
}

s-icon[text-size="xs"] > * {
  line-height: var(---theme-text-xs-line-height, 1.5);
}

s-icon[text-size="sm"] > * {
  line-height: var(---theme-text-sm-line-height, 1.5);
}

s-icon[text-size="md"] > * {
  line-height: var(---theme-text-md-line-height, 1.5);
}

s-icon[text-size="lg"] > * {
  line-height: var(---theme-text-lg-line-height, 1.5);
}

s-icon[text-size="xl"] > * {
  line-height: var(---theme-text-xl-line-height, 1.5);
}

s-icon[text-size="2xl"] > * {
  line-height: var(---theme-text-2xl-line-height, 1.5);
}

s-icon[text-size="3xl"] > * {
  line-height: var(---theme-text-3xl-line-height, 1.5);
}

s-icon[text-size="4xl"] > * {
  line-height: var(---theme-text-4xl-line-height, 1.5);
}

s-icon[text-size="5xl"] > * {
  line-height: var(---theme-text-5xl-line-height, 1.5);
}

s-icon[text-size="6xl"] > * {
  line-height: var(---theme-text-6xl-line-height, 1.5);
}

s-icon[text-size="7xl"] > * {
  line-height: var(---theme-text-7xl-line-height, 1.5);
}

s-icon[text-size="8xl"] > * {
  line-height: var(---theme-text-8xl-line-height, 1.5);
}

s-icon[text-size="9xl"] > * {
  line-height: var(---theme-text-9xl-line-height, 1.5);
}

s-icon[text-leading] > * {
  line-height: var(---text-leading, 1.5) !important;
}

s-icon[text-tracking] > * {
  letter-spacing: var(---text-tracking, 1.5) !important;
}

s-icon[text-weight] > * {
  font-weight: var(---text-weight, 600) !important;
}

s-icon[text-style] > * {
  font-style: var(---text-style, italic) !important;
}

s-icon[text-decoration-line] > * {
  text-decoration-line: var(---text-decoration-line, underline) !important;
}

s-icon[text-decoration-color] > * {
  text-decoration-color: var(---text-decoration-color, currentColor) !important;
}

s-icon[text-decoration-thickness] > * {
  text-decoration-thickness: var(---text-decoration-thickness, auto) !important;
}

s-icon[text-underline-offset] > * {
  text-underline-offset: var(---text-underline-offset, 4px) !important;
}

s-icon[text-case] > * {
  text-transform: var(---text-case, uppercase) !important;
}

s-icon[text-align] > * {
  text-align: var(---text-align, center) !important;
}

s-icon[text-overflow] > * {
  text-overflow: var(---text-overflow, clip) !important;
}

s-icon[text-overflow=""] > * {
  white-space: nowrap;
}

s-icon[text-overflow="wrap"] > * {
  white-space: break-spaces;
}

s-icon[text-overflow="visible"] > * {
  white-space: nowrap;
}

s-icon[text-overflow="clip"] > * {
  white-space: nowrap;
}

s-icon[text-overflow="ellipsis"] > * {
  overflow: hidden;
  white-space: nowrap;
}

s-icon[text-whitespace] > * {
  white-space: var(---text-whitespace, normal) !important;
}

s-icon[text-color] > * {
  color: var(---text-color, white) !important;
}

s-icon[text-stroke] > * {
  text-shadow: var(---text-stroke) !important;
}

s-icon:is([bg-color], [background-color]) > * {
  background-color: var(---background-color) !important;
}

s-icon:is([bg-image], [background-image]) > * {
  background-image: var(---background-image, none) !important;
}

s-icon:is([bg-repeat], [background-repeat]) > * {
  background-repeat: var(---background-repeat, repeat) !important;
}

s-icon:is([bg-align], [background-align]) > * {
  background-position: var(---background-align, center) !important;
}

s-icon:is([bg-fit], [background-fit]) > * {
  background-size: var(---background-fit, contain) !important;
}

s-icon[clip] > * {
  clip-path: var(---clip, circle(50%)) !important;
}

s-icon[filter] > * {
  filter: var(---filter, none) !important;
}

s-icon[backdrop-filter] > * {
  backdrop-filter: var(---backdrop-filter, none) !important;
}

s-icon[blend] > * {
  mix-blend-mode: var(---blend, normal) !important;
}

s-icon[shadow] > * {
  box-shadow: var(
    ---shadow,
    0 1px 2px hsl(0 0% 0% / 30%),
    0 1px 3px hsl(0 0% 0% / 15%)
  ) !important;
}

s-icon[shadow-inset] > * {
  box-shadow: var(
    ---shadow-inset,
    inset 0 1px 2px hsl(0 0% 0% / 30%),
    inset 0 1px 3px hsl(0 0% 0% / 15%)
  ) !important;
}

s-icon[ring] > * {
  box-shadow: var(---ring, 0 0 0 2px currentColor) !important;
  outline: none !important;
}

s-icon[opacity] > * {
  opacity: var(---opacity, 1) !important;
}

s-icon[translate] > * {
  translate: var(---translate, none) !important;
}

s-icon[rotate] > * {
  rotate: var(---rotate, none) !important;
}

s-icon[scale] > * {
  scale: var(---scale, none) !important;
}

s-icon[pivot] > * {
  transform-origin: var(---pivot, left) !important;
}

s-icon[transition-delay] > * {
  transition-delay: var(---transition-delay, 100ms) !important;
}

s-icon[transition-duration] > * {
  transition-duration: var(---transition-duration, 100ms) !important;
}

s-icon[transition-easing] > * {
  transition-timing-function: var(---transition-easing, ease) !important;
}

s-icon[animation] > * {
  animation: var(---animation, var(---theme-animation-bounce)) !important;
}

s-icon[mask] > * {
  ---theme-mask-angled-corner: conic-gradient(
        from -45deg at var(---corner, 8px) var(---corner, 8px),
        #0000 25%,
        #000 0
      )
      calc(-1 * var(---corner, 8px)) 0 /100% 51% repeat-x,
    conic-gradient(
        from 135deg at var(---corner, 8px) calc(100% - var(---corner, 8px)),
        #0000 25%,
        #000 0
      )
      calc(-1 * var(---corner, 8px)) 100%/100% 51% repeat-x !important;
  ---theme-mask-scooped-corner: radial-gradient(
      var(---corner, 8px) at var(---corner, 8px) var(---corner, 8px),
      #0000 99%,
      #000
    )
    calc(-1 * var(---corner, 8px)) calc(-1 * var(---corner, 8px)) !important;
  ---theme-mask-notched-corner: conic-gradient(
      at calc(2 * var(---corner, 8px)) calc(2 * var(---corner, 8px)),
      #000 75%,
      #0000 0
    )
    calc(-1 * var(---corner, 8px)) calc(-1 * var(---corner, 8px)) !important;
  background-color: transparent !important;
  background-image: none !important;
}

s-icon[mask]::before > * {
  /* Apply mask to a pseudo-element so that drop-shadow filters applied to the root element will match the shape of the mask */
  position: absolute !important;
  inset: 0 !important;
  content: "" !important;
  background-image: var(---background-image, none) !important;
  background-color: var(---background-color) !important;
  -webkit-mask: var(---mask, none) !important;
  mask: var(---mask, none) !important;
}

s-icon[content-visibility] > * {
  content-visibility: var(---content-visibility, auto);
}

s-icon[contain-intrinsic-size] > * {
  contain-intrinsic-size: var(---contain-intrinsic-size, none);
}

s-icon {
  display: contents;
  ---child-justify: center;
  ---child-align: center;
}

s-icon > .root {
  display: flex;
  justify-content: var(---child-justify);
  align-items: var(---child-align);
  width: var(---icon-size, var(---theme-icon-size));
  height: var(---icon-size, var(---theme-icon-size));
  min-width: var(---icon-size, var(---theme-icon-size));
  min-height: var(---icon-size, var(---theme-icon-size));
  font-size: var(---icon-size, var(---theme-icon-size));
  will-change: transform;
}

s-popup* > * {
  transition-property: opacity, translate, rotate, scale, transform, filter,
    backdrop-filter, clip-path, mix-blend-mode, box-shadow, color,
    background-color, border-color, text-decoration-color, fill, stroke;
}

s-popup[display] > * {
  display: var(---display, flex) !important;
}

s-popup[position] > * {
  position: var(---position, absolute) !important;
}

s-popup[position="sticky-top"] > * {
  inset: 0 0 auto 0;
  z-index: 1;
}

s-popup[position="sticky-bottom"] > * {
  inset: auto 0 0 0;
  z-index: 1;
}

s-popup[position="sticky-left"] > * {
  inset: 0 auto 0 0;
  z-index: 1;
}

s-popup[position="sticky-right"] > * {
  inset: 0 0 0 auto;
  z-index: 1;
}

s-popup[position="fixed-top"] > * {
  inset: 0 0 auto 0;
  z-index: 1;
}

s-popup[position="fixed-bottom"] > * {
  inset: auto 0 0 0;
  z-index: 1;
}

s-popup[position="fixed-left"] > * {
  inset: 0 auto 0 0;
  z-index: 1;
}

s-popup[position="fixed-right"] > * {
  inset: 0 0 0 auto;
  z-index: 1;
}

s-popup[aspect] > * {
  aspect-ratio: var(---aspect, 1) !important;
}

s-popup[overflow] > * {
  overflow: var(---overflow, scroll) !important;
}

s-popup[overflow-x] > * {
  overflow-x: var(---overflow-x, scroll) !important;
}

s-popup[overflow-y] > * {
  overflow-y: var(---overflow-y, scroll) !important;
}

s-popup[z] > * {
  z-index: var(---z, 1) !important;
}

s-popup:is([w], [width]) > * {
  width: var(---width, 100%) !important;
}

s-popup:is([w-min], [width-min]) > * {
  min-width: var(---width-min, 0) !important;
}

s-popup:is([w-max], [width-max]) > * {
  max-width: var(---width-max, 100%) !important;
}

s-popup:is([h], [height]) > * {
  height: var(---height, 100%) !important;
}

s-popup:is([h-min], [height-min]) > * {
  min-height: var(---height-min, 0) !important;
}

s-popup:is([h-max], [height-max]) > * {
  max-height: var(---height-max, 100%) !important;
}

s-popup:is([c], [corner]) > * {
  border-radius: var(---corner, 8px) !important;
}

s-popup:is([c-tl], [corner-top-left]) > * {
  border-top-left-radius: var(---corner-top-left, 8px) !important;
}

s-popup:is([c-tr], [corner-top-right]) > * {
  border-top-right-radius: var(---corner-top-right, 8px) !important;
}

s-popup:is([c-bl], [corner-bottom-left]) > * {
  border-bottom-left-radius: var(---corner-bottom-left, 8px) !important;
}

s-popup:is([c-br], [corner-bottom-right]) > * {
  border-bottom-right-radius: var(---corner-bottom-right, 8px) !important;
}

s-popup:is([o-color], [outline-color]) > * {
  outline-style: solid;
  outline-color: var(---outline-color, hsl(0 100% 100% / 50%)) !important;
}

s-popup:is([o-width], [outline-width]) > * {
  outline-style: solid;
  outline-width: var(---outline-width, 8px) !important;
}

s-popup:is([o-style], [outline-style]) > * {
  outline-style: var(---outline-style, solid) !important;
}

s-popup:is([b-color], [border-color]) > * {
  border-style: solid;
  border-color: var(---border-color, currentColor) !important;
}

s-popup:is([b-color-t], [border-color-top]) > * {
  border-style: solid;
  border-top-color: var(---border-color-top, currentColor) !important;
}

s-popup:is([b-color-b], [border-color-bottom]) > * {
  border-style: solid;
  border-bottom-color: var(---border-color-bottom, currentColor) !important;
}

s-popup:is([b-color-l], [border-color-left]) > * {
  border-style: solid;
  border-left-color: var(---border-color-left, currentColor) !important;
}

s-popup:is([b-color-r], [border-color-right]) > * {
  border-style: solid;
  border-right-color: var(---border-color-right, currentColor) !important;
}

s-popup:is([b-width], [border-width]) > * {
  border-style: solid;
  border-width: var(---border-width, 8px) !important;
}

s-popup:is([b-width-t], [border-width-top]) > * {
  border-style: solid;
  border-top-width: var(---border-width-top, 8px) !important;
}

s-popup:is([b-width-b], [border-width-bottom]) > * {
  border-style: solid;
  border-bottom-width: var(---border-width-bottom, 8px) !important;
}

s-popup:is([b-width-l], [border-width-left]) > * {
  border-style: solid;
  border-left-width: var(---border-width-left, 8px) !important;
}

s-popup:is([b-width-r], [border-width-right]) > * {
  border-style: solid;
  border-right-width: var(---border-width-right, 8px) !important;
}

s-popup:is([b-style], [border-style]) > * {
  border-style: var(---border-style, solid) !important;
}

s-popup:is([b-style-t], [border-style-top]) > * {
  border-top-style: var(---border-style-top, solid) !important;
}

s-popup:is([b-style-b], [border-style-bottom]) > * {
  border-bottom-style: var(---border-style-bottom, solid) !important;
}

s-popup:is([b-style-l], [border-style-left]) > * {
  border-left-style: var(---border-style-left, solid) !important;
}

s-popup:is([b-style-r], [border-style-right]) > * {
  border-right-style: var(---border-style-right, solid) !important;
}

s-popup:is([i], [inset]) > * {
  inset: var(---inset, 8px) !important;
}

s-popup:is([i-t], [inset-top]) > * {
  top: var(---inset-top, 8px) !important;
}

s-popup:is([i-b], [inset-bottom]) > * {
  bottom: var(---inset-bottom, 8px) !important;
}

s-popup:is([i-l], [inset-left]) > * {
  left: var(---inset-left, 8px) !important;
}

s-popup:is([i-r], [inset-right]) > * {
  right: var(---inset-right, 8px) !important;
}

s-popup:is([m], [margin]) > * {
  margin: var(---margin, 8px) !important;
}

s-popup:is([m-t], [margin-top]) > * {
  margin-top: var(---margin-top, 8px) !important;
}

s-popup:is([m-b], [margin-bottom]) > * {
  margin-bottom: var(---margin-bottom, 8px) !important;
}

s-popup:is([m-l], [margin-left]) > * {
  margin-left: var(---margin-left, 8px) !important;
}

s-popup:is([m-r], [margin-right]) > * {
  margin-right: var(---margin-right, 8px) !important;
}

s-popup:is([p], [padding]) > * {
  padding: var(---padding, 8px) !important;
}

s-popup:is([p-t], [padding-top]) > * {
  padding-top: var(---padding-top, 8px) !important;
}

s-popup:is([p-b], [padding-bottom]) > * {
  padding-bottom: var(---padding-bottom, 8px) !important;
}

s-popup:is([p-l], [padding-left]) > * {
  padding-left: var(---padding-left, 8px) !important;
}

s-popup:is([p-r], [padding-right]) > * {
  padding-right: var(---padding-right, 8px) !important;
}

s-popup:is([child-layout="row"], [child-layout="column"]) > * {
  display: flex;
  flex-direction: var(---child-layout, row) !important;
}

s-popup:is([child-layout="grid"], [child-columns]) > * {
  display: grid;
  grid-template-columns: var(---child-columns, 1fr 1fr 1fr);
}

s-popup[child-gap] > * {
  gap: var(---child-gap, 8px) !important;
}

s-popup[child-align] > * {
  align-items: var(---child-align, center) !important;
}

s-popup[child-justify] > * {
  justify-content: var(---child-justify, center) !important;
}

s-popup[child-overflow] > * {
  flex-wrap: var(---child-overflow, nowrap) !important;
}

s-popup[self-align] > * {
  align-self: var(---self-align, center) !important;
}

s-popup[flex] > * {
  flex: var(---flex, 1) !important;
}

s-popup[grow] > * {
  flex-grow: var(---grow, 1) !important;
}

s-popup[shrink] > * {
  flex-shrink: var(---shrink, 1) !important;
}

s-popup[order] > * {
  order: var(---order, 0) !important;
}

s-popup[fill] path > * {
  fill: var(---fill, currentColor) !important;
}

s-popup[stroke] path > * {
  stroke: var(---stroke, currentColor) !important;
}

s-popup[stroke-width] path > * {
  stroke-width: var(---stroke-width, 1) !important;
}

s-popup[visible] > * {
  visibility: var(---visible, visible) !important;
}

s-popup[interactable] > * {
  pointer-events: var(---interactable, auto) !important;
}

s-popup[interactable="none"] > * {
  cursor: default;
}

s-popup[selectable] > * {
  user-select: var(---selectable, auto) !important;
}

[selectable=""],
[selectable="auto"],
s-popup[selectable="all"] > * {
  cursor: text;
}

s-popup[cursor] > * {
  cursor: var(---cursor, auto) !important;
}

s-popup[text-font] > * {
  font-family: var(---text-font, monospace) !important;
}

s-popup[text-size] > * {
  font-size: var(---text-size, 1rem) !important;
}

s-popup[text-size="2xs"] > * {
  line-height: var(---theme-text-2xs-line-height, 1.5);
}

s-popup[text-size="xs"] > * {
  line-height: var(---theme-text-xs-line-height, 1.5);
}

s-popup[text-size="sm"] > * {
  line-height: var(---theme-text-sm-line-height, 1.5);
}

s-popup[text-size="md"] > * {
  line-height: var(---theme-text-md-line-height, 1.5);
}

s-popup[text-size="lg"] > * {
  line-height: var(---theme-text-lg-line-height, 1.5);
}

s-popup[text-size="xl"] > * {
  line-height: var(---theme-text-xl-line-height, 1.5);
}

s-popup[text-size="2xl"] > * {
  line-height: var(---theme-text-2xl-line-height, 1.5);
}

s-popup[text-size="3xl"] > * {
  line-height: var(---theme-text-3xl-line-height, 1.5);
}

s-popup[text-size="4xl"] > * {
  line-height: var(---theme-text-4xl-line-height, 1.5);
}

s-popup[text-size="5xl"] > * {
  line-height: var(---theme-text-5xl-line-height, 1.5);
}

s-popup[text-size="6xl"] > * {
  line-height: var(---theme-text-6xl-line-height, 1.5);
}

s-popup[text-size="7xl"] > * {
  line-height: var(---theme-text-7xl-line-height, 1.5);
}

s-popup[text-size="8xl"] > * {
  line-height: var(---theme-text-8xl-line-height, 1.5);
}

s-popup[text-size="9xl"] > * {
  line-height: var(---theme-text-9xl-line-height, 1.5);
}

s-popup[text-leading] > * {
  line-height: var(---text-leading, 1.5) !important;
}

s-popup[text-tracking] > * {
  letter-spacing: var(---text-tracking, 1.5) !important;
}

s-popup[text-weight] > * {
  font-weight: var(---text-weight, 600) !important;
}

s-popup[text-style] > * {
  font-style: var(---text-style, italic) !important;
}

s-popup[text-decoration-line] > * {
  text-decoration-line: var(---text-decoration-line, underline) !important;
}

s-popup[text-decoration-color] > * {
  text-decoration-color: var(---text-decoration-color, currentColor) !important;
}

s-popup[text-decoration-thickness] > * {
  text-decoration-thickness: var(---text-decoration-thickness, auto) !important;
}

s-popup[text-underline-offset] > * {
  text-underline-offset: var(---text-underline-offset, 4px) !important;
}

s-popup[text-case] > * {
  text-transform: var(---text-case, uppercase) !important;
}

s-popup[text-align] > * {
  text-align: var(---text-align, center) !important;
}

s-popup[text-overflow] > * {
  text-overflow: var(---text-overflow, clip) !important;
}

s-popup[text-overflow=""] > * {
  white-space: nowrap;
}

s-popup[text-overflow="wrap"] > * {
  white-space: break-spaces;
}

s-popup[text-overflow="visible"] > * {
  white-space: nowrap;
}

s-popup[text-overflow="clip"] > * {
  white-space: nowrap;
}

s-popup[text-overflow="ellipsis"] > * {
  overflow: hidden;
  white-space: nowrap;
}

s-popup[text-whitespace] > * {
  white-space: var(---text-whitespace, normal) !important;
}

s-popup[text-color] > * {
  color: var(---text-color, white) !important;
}

s-popup[text-stroke] > * {
  text-shadow: var(---text-stroke) !important;
}

s-popup:is([bg-color], [background-color]) > * {
  background-color: var(---background-color) !important;
}

s-popup:is([bg-image], [background-image]) > * {
  background-image: var(---background-image, none) !important;
}

s-popup:is([bg-repeat], [background-repeat]) > * {
  background-repeat: var(---background-repeat, repeat) !important;
}

s-popup:is([bg-align], [background-align]) > * {
  background-position: var(---background-align, center) !important;
}

s-popup:is([bg-fit], [background-fit]) > * {
  background-size: var(---background-fit, contain) !important;
}

s-popup[clip] > * {
  clip-path: var(---clip, circle(50%)) !important;
}

s-popup[filter] > * {
  filter: var(---filter, none) !important;
}

s-popup[backdrop-filter] > * {
  backdrop-filter: var(---backdrop-filter, none) !important;
}

s-popup[blend] > * {
  mix-blend-mode: var(---blend, normal) !important;
}

s-popup[shadow] > * {
  box-shadow: var(
    ---shadow,
    0 1px 2px hsl(0 0% 0% / 30%),
    0 1px 3px hsl(0 0% 0% / 15%)
  ) !important;
}

s-popup[shadow-inset] > * {
  box-shadow: var(
    ---shadow-inset,
    inset 0 1px 2px hsl(0 0% 0% / 30%),
    inset 0 1px 3px hsl(0 0% 0% / 15%)
  ) !important;
}

s-popup[ring] > * {
  box-shadow: var(---ring, 0 0 0 2px currentColor) !important;
  outline: none !important;
}

s-popup[opacity] > * {
  opacity: var(---opacity, 1) !important;
}

s-popup[translate] > * {
  translate: var(---translate, none) !important;
}

s-popup[rotate] > * {
  rotate: var(---rotate, none) !important;
}

s-popup[scale] > * {
  scale: var(---scale, none) !important;
}

s-popup[pivot] > * {
  transform-origin: var(---pivot, left) !important;
}

s-popup[transition-delay] > * {
  transition-delay: var(---transition-delay, 100ms) !important;
}

s-popup[transition-duration] > * {
  transition-duration: var(---transition-duration, 100ms) !important;
}

s-popup[transition-easing] > * {
  transition-timing-function: var(---transition-easing, ease) !important;
}

s-popup[animation] > * {
  animation: var(---animation, var(---theme-animation-bounce)) !important;
}

s-popup[mask] > * {
  ---theme-mask-angled-corner: conic-gradient(
        from -45deg at var(---corner, 8px) var(---corner, 8px),
        #0000 25%,
        #000 0
      )
      calc(-1 * var(---corner, 8px)) 0 /100% 51% repeat-x,
    conic-gradient(
        from 135deg at var(---corner, 8px) calc(100% - var(---corner, 8px)),
        #0000 25%,
        #000 0
      )
      calc(-1 * var(---corner, 8px)) 100%/100% 51% repeat-x !important;
  ---theme-mask-scooped-corner: radial-gradient(
      var(---corner, 8px) at var(---corner, 8px) var(---corner, 8px),
      #0000 99%,
      #000
    )
    calc(-1 * var(---corner, 8px)) calc(-1 * var(---corner, 8px)) !important;
  ---theme-mask-notched-corner: conic-gradient(
      at calc(2 * var(---corner, 8px)) calc(2 * var(---corner, 8px)),
      #000 75%,
      #0000 0
    )
    calc(-1 * var(---corner, 8px)) calc(-1 * var(---corner, 8px)) !important;
  background-color: transparent !important;
  background-image: none !important;
}

s-popup[mask]::before > * {
  /* Apply mask to a pseudo-element so that drop-shadow filters applied to the root element will match the shape of the mask */
  position: absolute !important;
  inset: 0 !important;
  content: "" !important;
  background-image: var(---background-image, none) !important;
  background-color: var(---background-color) !important;
  -webkit-mask: var(---mask, none) !important;
  mask: var(---mask, none) !important;
}

s-popup[content-visibility] > * {
  content-visibility: var(---content-visibility, auto);
}

s-popup[contain-intrinsic-size] > * {
  contain-intrinsic-size: var(---contain-intrinsic-size, none);
}

s-popup {
  display: contents;
  ---arrow-color: var(---theme-color-neutral-1000);
  ---arrow-size: 6px;
  /*
   * These properties are computed to account for the arrow's dimensions after being rotated 45º. The constant
   * 0.7071 is derived from sin(45), which is the diagonal size of the arrow's container after rotating.
   */
  ---arrow-size-diagonal: calc(var(---arrow-size) * 0.7071);
  ---arrow-padding-offset: calc(
    var(---arrow-size-diagonal) - var(---arrow-size)
  );
  ---shadow: var(---theme-shadow-box-2);
}

s-popup > .root {
  display: flex;
  position: absolute;
  isolation: isolate;
  max-width: var(---auto-size-available-width, none);
  max-height: var(---auto-size-available-height, none);
  box-shadow: var(---shadow);
}

s-popup > .root.fixed {
  position: fixed;
}

s-popup > .anchor {
  display: flex;
}

s-popup > .root > .arrow {
  display: hidden;
}

s-popup[arrow] > .root > .arrow {
  display: block;
  position: absolute;
  width: calc(var(---arrow-size-diagonal) * 2);
  height: calc(var(---arrow-size-diagonal) * 2);
  transform: rotate(45deg);
  background: var(---arrow-color);
  z-index: -1;
}

s-divider* > * {
  transition-property: opacity, translate, rotate, scale, transform, filter,
    backdrop-filter, clip-path, mix-blend-mode, box-shadow, color,
    background-color, border-color, text-decoration-color, fill, stroke;
}

s-divider[display] > * {
  display: var(---display, flex) !important;
}

s-divider[position] > * {
  position: var(---position, absolute) !important;
}

s-divider[position="sticky-top"] > * {
  inset: 0 0 auto 0;
  z-index: 1;
}

s-divider[position="sticky-bottom"] > * {
  inset: auto 0 0 0;
  z-index: 1;
}

s-divider[position="sticky-left"] > * {
  inset: 0 auto 0 0;
  z-index: 1;
}

s-divider[position="sticky-right"] > * {
  inset: 0 0 0 auto;
  z-index: 1;
}

s-divider[position="fixed-top"] > * {
  inset: 0 0 auto 0;
  z-index: 1;
}

s-divider[position="fixed-bottom"] > * {
  inset: auto 0 0 0;
  z-index: 1;
}

s-divider[position="fixed-left"] > * {
  inset: 0 auto 0 0;
  z-index: 1;
}

s-divider[position="fixed-right"] > * {
  inset: 0 0 0 auto;
  z-index: 1;
}

s-divider[aspect] > * {
  aspect-ratio: var(---aspect, 1) !important;
}

s-divider[overflow] > * {
  overflow: var(---overflow, scroll) !important;
}

s-divider[overflow-x] > * {
  overflow-x: var(---overflow-x, scroll) !important;
}

s-divider[overflow-y] > * {
  overflow-y: var(---overflow-y, scroll) !important;
}

s-divider[z] > * {
  z-index: var(---z, 1) !important;
}

s-divider:is([w], [width]) > * {
  width: var(---width, 100%) !important;
}

s-divider:is([w-min], [width-min]) > * {
  min-width: var(---width-min, 0) !important;
}

s-divider:is([w-max], [width-max]) > * {
  max-width: var(---width-max, 100%) !important;
}

s-divider:is([h], [height]) > * {
  height: var(---height, 100%) !important;
}

s-divider:is([h-min], [height-min]) > * {
  min-height: var(---height-min, 0) !important;
}

s-divider:is([h-max], [height-max]) > * {
  max-height: var(---height-max, 100%) !important;
}

s-divider:is([c], [corner]) > * {
  border-radius: var(---corner, 8px) !important;
}

s-divider:is([c-tl], [corner-top-left]) > * {
  border-top-left-radius: var(---corner-top-left, 8px) !important;
}

s-divider:is([c-tr], [corner-top-right]) > * {
  border-top-right-radius: var(---corner-top-right, 8px) !important;
}

s-divider:is([c-bl], [corner-bottom-left]) > * {
  border-bottom-left-radius: var(---corner-bottom-left, 8px) !important;
}

s-divider:is([c-br], [corner-bottom-right]) > * {
  border-bottom-right-radius: var(---corner-bottom-right, 8px) !important;
}

s-divider:is([o-color], [outline-color]) > * {
  outline-style: solid;
  outline-color: var(---outline-color, hsl(0 100% 100% / 50%)) !important;
}

s-divider:is([o-width], [outline-width]) > * {
  outline-style: solid;
  outline-width: var(---outline-width, 8px) !important;
}

s-divider:is([o-style], [outline-style]) > * {
  outline-style: var(---outline-style, solid) !important;
}

s-divider:is([b-color], [border-color]) > * {
  border-style: solid;
  border-color: var(---border-color, currentColor) !important;
}

s-divider:is([b-color-t], [border-color-top]) > * {
  border-style: solid;
  border-top-color: var(---border-color-top, currentColor) !important;
}

s-divider:is([b-color-b], [border-color-bottom]) > * {
  border-style: solid;
  border-bottom-color: var(---border-color-bottom, currentColor) !important;
}

s-divider:is([b-color-l], [border-color-left]) > * {
  border-style: solid;
  border-left-color: var(---border-color-left, currentColor) !important;
}

s-divider:is([b-color-r], [border-color-right]) > * {
  border-style: solid;
  border-right-color: var(---border-color-right, currentColor) !important;
}

s-divider:is([b-width], [border-width]) > * {
  border-style: solid;
  border-width: var(---border-width, 8px) !important;
}

s-divider:is([b-width-t], [border-width-top]) > * {
  border-style: solid;
  border-top-width: var(---border-width-top, 8px) !important;
}

s-divider:is([b-width-b], [border-width-bottom]) > * {
  border-style: solid;
  border-bottom-width: var(---border-width-bottom, 8px) !important;
}

s-divider:is([b-width-l], [border-width-left]) > * {
  border-style: solid;
  border-left-width: var(---border-width-left, 8px) !important;
}

s-divider:is([b-width-r], [border-width-right]) > * {
  border-style: solid;
  border-right-width: var(---border-width-right, 8px) !important;
}

s-divider:is([b-style], [border-style]) > * {
  border-style: var(---border-style, solid) !important;
}

s-divider:is([b-style-t], [border-style-top]) > * {
  border-top-style: var(---border-style-top, solid) !important;
}

s-divider:is([b-style-b], [border-style-bottom]) > * {
  border-bottom-style: var(---border-style-bottom, solid) !important;
}

s-divider:is([b-style-l], [border-style-left]) > * {
  border-left-style: var(---border-style-left, solid) !important;
}

s-divider:is([b-style-r], [border-style-right]) > * {
  border-right-style: var(---border-style-right, solid) !important;
}

s-divider:is([i], [inset]) > * {
  inset: var(---inset, 8px) !important;
}

s-divider:is([i-t], [inset-top]) > * {
  top: var(---inset-top, 8px) !important;
}

s-divider:is([i-b], [inset-bottom]) > * {
  bottom: var(---inset-bottom, 8px) !important;
}

s-divider:is([i-l], [inset-left]) > * {
  left: var(---inset-left, 8px) !important;
}

s-divider:is([i-r], [inset-right]) > * {
  right: var(---inset-right, 8px) !important;
}

s-divider:is([m], [margin]) > * {
  margin: var(---margin, 8px) !important;
}

s-divider:is([m-t], [margin-top]) > * {
  margin-top: var(---margin-top, 8px) !important;
}

s-divider:is([m-b], [margin-bottom]) > * {
  margin-bottom: var(---margin-bottom, 8px) !important;
}

s-divider:is([m-l], [margin-left]) > * {
  margin-left: var(---margin-left, 8px) !important;
}

s-divider:is([m-r], [margin-right]) > * {
  margin-right: var(---margin-right, 8px) !important;
}

s-divider:is([p], [padding]) > * {
  padding: var(---padding, 8px) !important;
}

s-divider:is([p-t], [padding-top]) > * {
  padding-top: var(---padding-top, 8px) !important;
}

s-divider:is([p-b], [padding-bottom]) > * {
  padding-bottom: var(---padding-bottom, 8px) !important;
}

s-divider:is([p-l], [padding-left]) > * {
  padding-left: var(---padding-left, 8px) !important;
}

s-divider:is([p-r], [padding-right]) > * {
  padding-right: var(---padding-right, 8px) !important;
}

s-divider:is([child-layout="row"], [child-layout="column"]) > * {
  display: flex;
  flex-direction: var(---child-layout, row) !important;
}

s-divider:is([child-layout="grid"], [child-columns]) > * {
  display: grid;
  grid-template-columns: var(---child-columns, 1fr 1fr 1fr);
}

s-divider[child-gap] > * {
  gap: var(---child-gap, 8px) !important;
}

s-divider[child-align] > * {
  align-items: var(---child-align, center) !important;
}

s-divider[child-justify] > * {
  justify-content: var(---child-justify, center) !important;
}

s-divider[child-overflow] > * {
  flex-wrap: var(---child-overflow, nowrap) !important;
}

s-divider[self-align] > * {
  align-self: var(---self-align, center) !important;
}

s-divider[flex] > * {
  flex: var(---flex, 1) !important;
}

s-divider[grow] > * {
  flex-grow: var(---grow, 1) !important;
}

s-divider[shrink] > * {
  flex-shrink: var(---shrink, 1) !important;
}

s-divider[order] > * {
  order: var(---order, 0) !important;
}

s-divider[fill] path > * {
  fill: var(---fill, currentColor) !important;
}

s-divider[stroke] path > * {
  stroke: var(---stroke, currentColor) !important;
}

s-divider[stroke-width] path > * {
  stroke-width: var(---stroke-width, 1) !important;
}

s-divider[visible] > * {
  visibility: var(---visible, visible) !important;
}

s-divider[interactable] > * {
  pointer-events: var(---interactable, auto) !important;
}

s-divider[interactable="none"] > * {
  cursor: default;
}

s-divider[selectable] > * {
  user-select: var(---selectable, auto) !important;
}

[selectable=""],
[selectable="auto"],
s-divider[selectable="all"] > * {
  cursor: text;
}

s-divider[cursor] > * {
  cursor: var(---cursor, auto) !important;
}

s-divider[text-font] > * {
  font-family: var(---text-font, monospace) !important;
}

s-divider[text-size] > * {
  font-size: var(---text-size, 1rem) !important;
}

s-divider[text-size="2xs"] > * {
  line-height: var(---theme-text-2xs-line-height, 1.5);
}

s-divider[text-size="xs"] > * {
  line-height: var(---theme-text-xs-line-height, 1.5);
}

s-divider[text-size="sm"] > * {
  line-height: var(---theme-text-sm-line-height, 1.5);
}

s-divider[text-size="md"] > * {
  line-height: var(---theme-text-md-line-height, 1.5);
}

s-divider[text-size="lg"] > * {
  line-height: var(---theme-text-lg-line-height, 1.5);
}

s-divider[text-size="xl"] > * {
  line-height: var(---theme-text-xl-line-height, 1.5);
}

s-divider[text-size="2xl"] > * {
  line-height: var(---theme-text-2xl-line-height, 1.5);
}

s-divider[text-size="3xl"] > * {
  line-height: var(---theme-text-3xl-line-height, 1.5);
}

s-divider[text-size="4xl"] > * {
  line-height: var(---theme-text-4xl-line-height, 1.5);
}

s-divider[text-size="5xl"] > * {
  line-height: var(---theme-text-5xl-line-height, 1.5);
}

s-divider[text-size="6xl"] > * {
  line-height: var(---theme-text-6xl-line-height, 1.5);
}

s-divider[text-size="7xl"] > * {
  line-height: var(---theme-text-7xl-line-height, 1.5);
}

s-divider[text-size="8xl"] > * {
  line-height: var(---theme-text-8xl-line-height, 1.5);
}

s-divider[text-size="9xl"] > * {
  line-height: var(---theme-text-9xl-line-height, 1.5);
}

s-divider[text-leading] > * {
  line-height: var(---text-leading, 1.5) !important;
}

s-divider[text-tracking] > * {
  letter-spacing: var(---text-tracking, 1.5) !important;
}

s-divider[text-weight] > * {
  font-weight: var(---text-weight, 600) !important;
}

s-divider[text-style] > * {
  font-style: var(---text-style, italic) !important;
}

s-divider[text-decoration-line] > * {
  text-decoration-line: var(---text-decoration-line, underline) !important;
}

s-divider[text-decoration-color] > * {
  text-decoration-color: var(---text-decoration-color, currentColor) !important;
}

s-divider[text-decoration-thickness] > * {
  text-decoration-thickness: var(---text-decoration-thickness, auto) !important;
}

s-divider[text-underline-offset] > * {
  text-underline-offset: var(---text-underline-offset, 4px) !important;
}

s-divider[text-case] > * {
  text-transform: var(---text-case, uppercase) !important;
}

s-divider[text-align] > * {
  text-align: var(---text-align, center) !important;
}

s-divider[text-overflow] > * {
  text-overflow: var(---text-overflow, clip) !important;
}

s-divider[text-overflow=""] > * {
  white-space: nowrap;
}

s-divider[text-overflow="wrap"] > * {
  white-space: break-spaces;
}

s-divider[text-overflow="visible"] > * {
  white-space: nowrap;
}

s-divider[text-overflow="clip"] > * {
  white-space: nowrap;
}

s-divider[text-overflow="ellipsis"] > * {
  overflow: hidden;
  white-space: nowrap;
}

s-divider[text-whitespace] > * {
  white-space: var(---text-whitespace, normal) !important;
}

s-divider[text-color] > * {
  color: var(---text-color, white) !important;
}

s-divider[text-stroke] > * {
  text-shadow: var(---text-stroke) !important;
}

s-divider:is([bg-color], [background-color]) > * {
  background-color: var(---background-color) !important;
}

s-divider:is([bg-image], [background-image]) > * {
  background-image: var(---background-image, none) !important;
}

s-divider:is([bg-repeat], [background-repeat]) > * {
  background-repeat: var(---background-repeat, repeat) !important;
}

s-divider:is([bg-align], [background-align]) > * {
  background-position: var(---background-align, center) !important;
}

s-divider:is([bg-fit], [background-fit]) > * {
  background-size: var(---background-fit, contain) !important;
}

s-divider[clip] > * {
  clip-path: var(---clip, circle(50%)) !important;
}

s-divider[filter] > * {
  filter: var(---filter, none) !important;
}

s-divider[backdrop-filter] > * {
  backdrop-filter: var(---backdrop-filter, none) !important;
}

s-divider[blend] > * {
  mix-blend-mode: var(---blend, normal) !important;
}

s-divider[shadow] > * {
  box-shadow: var(
    ---shadow,
    0 1px 2px hsl(0 0% 0% / 30%),
    0 1px 3px hsl(0 0% 0% / 15%)
  ) !important;
}

s-divider[shadow-inset] > * {
  box-shadow: var(
    ---shadow-inset,
    inset 0 1px 2px hsl(0 0% 0% / 30%),
    inset 0 1px 3px hsl(0 0% 0% / 15%)
  ) !important;
}

s-divider[ring] > * {
  box-shadow: var(---ring, 0 0 0 2px currentColor) !important;
  outline: none !important;
}

s-divider[opacity] > * {
  opacity: var(---opacity, 1) !important;
}

s-divider[translate] > * {
  translate: var(---translate, none) !important;
}

s-divider[rotate] > * {
  rotate: var(---rotate, none) !important;
}

s-divider[scale] > * {
  scale: var(---scale, none) !important;
}

s-divider[pivot] > * {
  transform-origin: var(---pivot, left) !important;
}

s-divider[transition-delay] > * {
  transition-delay: var(---transition-delay, 100ms) !important;
}

s-divider[transition-duration] > * {
  transition-duration: var(---transition-duration, 100ms) !important;
}

s-divider[transition-easing] > * {
  transition-timing-function: var(---transition-easing, ease) !important;
}

s-divider[animation] > * {
  animation: var(---animation, var(---theme-animation-bounce)) !important;
}

s-divider[mask] > * {
  ---theme-mask-angled-corner: conic-gradient(
        from -45deg at var(---corner, 8px) var(---corner, 8px),
        #0000 25%,
        #000 0
      )
      calc(-1 * var(---corner, 8px)) 0 /100% 51% repeat-x,
    conic-gradient(
        from 135deg at var(---corner, 8px) calc(100% - var(---corner, 8px)),
        #0000 25%,
        #000 0
      )
      calc(-1 * var(---corner, 8px)) 100%/100% 51% repeat-x !important;
  ---theme-mask-scooped-corner: radial-gradient(
      var(---corner, 8px) at var(---corner, 8px) var(---corner, 8px),
      #0000 99%,
      #000
    )
    calc(-1 * var(---corner, 8px)) calc(-1 * var(---corner, 8px)) !important;
  ---theme-mask-notched-corner: conic-gradient(
      at calc(2 * var(---corner, 8px)) calc(2 * var(---corner, 8px)),
      #000 75%,
      #0000 0
    )
    calc(-1 * var(---corner, 8px)) calc(-1 * var(---corner, 8px)) !important;
  background-color: transparent !important;
  background-image: none !important;
}

s-divider[mask]::before > * {
  /* Apply mask to a pseudo-element so that drop-shadow filters applied to the root element will match the shape of the mask */
  position: absolute !important;
  inset: 0 !important;
  content: "" !important;
  background-image: var(---background-image, none) !important;
  background-color: var(---background-color) !important;
  -webkit-mask: var(---mask, none) !important;
  mask: var(---mask, none) !important;
}

s-divider[content-visibility] > * {
  content-visibility: var(---content-visibility, auto);
}

s-divider[contain-intrinsic-size] > * {
  contain-intrinsic-size: var(---contain-intrinsic-size, none);
}

s-divider {
  display: contents;
  ---background-color: var(---theme-color-divider);
  ---size: 1px;
  ---width: 100%;
  ---height: 100%;
}

s-divider > .root {
  display: flex;
  background-color: var(---background-color);
  opacity: var(---opacity);
}

s-divider:not([vertical]) > .root {
  display: block;
  width: var(---width);
  height: var(---size);
}

s-divider[vertical] > .root {
  display: inline-block;
  width: var(---size);
  height: var(---height);
}

s-progress-bar* > * {
  transition-property: opacity, translate, rotate, scale, transform, filter,
    backdrop-filter, clip-path, mix-blend-mode, box-shadow, color,
    background-color, border-color, text-decoration-color, fill, stroke;
}

s-progress-bar[display] > * {
  display: var(---display, flex) !important;
}

s-progress-bar[position] > * {
  position: var(---position, absolute) !important;
}

s-progress-bar[position="sticky-top"] > * {
  inset: 0 0 auto 0;
  z-index: 1;
}

s-progress-bar[position="sticky-bottom"] > * {
  inset: auto 0 0 0;
  z-index: 1;
}

s-progress-bar[position="sticky-left"] > * {
  inset: 0 auto 0 0;
  z-index: 1;
}

s-progress-bar[position="sticky-right"] > * {
  inset: 0 0 0 auto;
  z-index: 1;
}

s-progress-bar[position="fixed-top"] > * {
  inset: 0 0 auto 0;
  z-index: 1;
}

s-progress-bar[position="fixed-bottom"] > * {
  inset: auto 0 0 0;
  z-index: 1;
}

s-progress-bar[position="fixed-left"] > * {
  inset: 0 auto 0 0;
  z-index: 1;
}

s-progress-bar[position="fixed-right"] > * {
  inset: 0 0 0 auto;
  z-index: 1;
}

s-progress-bar[aspect] > * {
  aspect-ratio: var(---aspect, 1) !important;
}

s-progress-bar[overflow] > * {
  overflow: var(---overflow, scroll) !important;
}

s-progress-bar[overflow-x] > * {
  overflow-x: var(---overflow-x, scroll) !important;
}

s-progress-bar[overflow-y] > * {
  overflow-y: var(---overflow-y, scroll) !important;
}

s-progress-bar[z] > * {
  z-index: var(---z, 1) !important;
}

s-progress-bar:is([w], [width]) > * {
  width: var(---width, 100%) !important;
}

s-progress-bar:is([w-min], [width-min]) > * {
  min-width: var(---width-min, 0) !important;
}

s-progress-bar:is([w-max], [width-max]) > * {
  max-width: var(---width-max, 100%) !important;
}

s-progress-bar:is([h], [height]) > * {
  height: var(---height, 100%) !important;
}

s-progress-bar:is([h-min], [height-min]) > * {
  min-height: var(---height-min, 0) !important;
}

s-progress-bar:is([h-max], [height-max]) > * {
  max-height: var(---height-max, 100%) !important;
}

s-progress-bar:is([c], [corner]) > * {
  border-radius: var(---corner, 8px) !important;
}

s-progress-bar:is([c-tl], [corner-top-left]) > * {
  border-top-left-radius: var(---corner-top-left, 8px) !important;
}

s-progress-bar:is([c-tr], [corner-top-right]) > * {
  border-top-right-radius: var(---corner-top-right, 8px) !important;
}

s-progress-bar:is([c-bl], [corner-bottom-left]) > * {
  border-bottom-left-radius: var(---corner-bottom-left, 8px) !important;
}

s-progress-bar:is([c-br], [corner-bottom-right]) > * {
  border-bottom-right-radius: var(---corner-bottom-right, 8px) !important;
}

s-progress-bar:is([o-color], [outline-color]) > * {
  outline-style: solid;
  outline-color: var(---outline-color, hsl(0 100% 100% / 50%)) !important;
}

s-progress-bar:is([o-width], [outline-width]) > * {
  outline-style: solid;
  outline-width: var(---outline-width, 8px) !important;
}

s-progress-bar:is([o-style], [outline-style]) > * {
  outline-style: var(---outline-style, solid) !important;
}

s-progress-bar:is([b-color], [border-color]) > * {
  border-style: solid;
  border-color: var(---border-color, currentColor) !important;
}

s-progress-bar:is([b-color-t], [border-color-top]) > * {
  border-style: solid;
  border-top-color: var(---border-color-top, currentColor) !important;
}

s-progress-bar:is([b-color-b], [border-color-bottom]) > * {
  border-style: solid;
  border-bottom-color: var(---border-color-bottom, currentColor) !important;
}

s-progress-bar:is([b-color-l], [border-color-left]) > * {
  border-style: solid;
  border-left-color: var(---border-color-left, currentColor) !important;
}

s-progress-bar:is([b-color-r], [border-color-right]) > * {
  border-style: solid;
  border-right-color: var(---border-color-right, currentColor) !important;
}

s-progress-bar:is([b-width], [border-width]) > * {
  border-style: solid;
  border-width: var(---border-width, 8px) !important;
}

s-progress-bar:is([b-width-t], [border-width-top]) > * {
  border-style: solid;
  border-top-width: var(---border-width-top, 8px) !important;
}

s-progress-bar:is([b-width-b], [border-width-bottom]) > * {
  border-style: solid;
  border-bottom-width: var(---border-width-bottom, 8px) !important;
}

s-progress-bar:is([b-width-l], [border-width-left]) > * {
  border-style: solid;
  border-left-width: var(---border-width-left, 8px) !important;
}

s-progress-bar:is([b-width-r], [border-width-right]) > * {
  border-style: solid;
  border-right-width: var(---border-width-right, 8px) !important;
}

s-progress-bar:is([b-style], [border-style]) > * {
  border-style: var(---border-style, solid) !important;
}

s-progress-bar:is([b-style-t], [border-style-top]) > * {
  border-top-style: var(---border-style-top, solid) !important;
}

s-progress-bar:is([b-style-b], [border-style-bottom]) > * {
  border-bottom-style: var(---border-style-bottom, solid) !important;
}

s-progress-bar:is([b-style-l], [border-style-left]) > * {
  border-left-style: var(---border-style-left, solid) !important;
}

s-progress-bar:is([b-style-r], [border-style-right]) > * {
  border-right-style: var(---border-style-right, solid) !important;
}

s-progress-bar:is([i], [inset]) > * {
  inset: var(---inset, 8px) !important;
}

s-progress-bar:is([i-t], [inset-top]) > * {
  top: var(---inset-top, 8px) !important;
}

s-progress-bar:is([i-b], [inset-bottom]) > * {
  bottom: var(---inset-bottom, 8px) !important;
}

s-progress-bar:is([i-l], [inset-left]) > * {
  left: var(---inset-left, 8px) !important;
}

s-progress-bar:is([i-r], [inset-right]) > * {
  right: var(---inset-right, 8px) !important;
}

s-progress-bar:is([m], [margin]) > * {
  margin: var(---margin, 8px) !important;
}

s-progress-bar:is([m-t], [margin-top]) > * {
  margin-top: var(---margin-top, 8px) !important;
}

s-progress-bar:is([m-b], [margin-bottom]) > * {
  margin-bottom: var(---margin-bottom, 8px) !important;
}

s-progress-bar:is([m-l], [margin-left]) > * {
  margin-left: var(---margin-left, 8px) !important;
}

s-progress-bar:is([m-r], [margin-right]) > * {
  margin-right: var(---margin-right, 8px) !important;
}

s-progress-bar:is([p], [padding]) > * {
  padding: var(---padding, 8px) !important;
}

s-progress-bar:is([p-t], [padding-top]) > * {
  padding-top: var(---padding-top, 8px) !important;
}

s-progress-bar:is([p-b], [padding-bottom]) > * {
  padding-bottom: var(---padding-bottom, 8px) !important;
}

s-progress-bar:is([p-l], [padding-left]) > * {
  padding-left: var(---padding-left, 8px) !important;
}

s-progress-bar:is([p-r], [padding-right]) > * {
  padding-right: var(---padding-right, 8px) !important;
}

s-progress-bar:is([child-layout="row"], [child-layout="column"]) > * {
  display: flex;
  flex-direction: var(---child-layout, row) !important;
}

s-progress-bar:is([child-layout="grid"], [child-columns]) > * {
  display: grid;
  grid-template-columns: var(---child-columns, 1fr 1fr 1fr);
}

s-progress-bar[child-gap] > * {
  gap: var(---child-gap, 8px) !important;
}

s-progress-bar[child-align] > * {
  align-items: var(---child-align, center) !important;
}

s-progress-bar[child-justify] > * {
  justify-content: var(---child-justify, center) !important;
}

s-progress-bar[child-overflow] > * {
  flex-wrap: var(---child-overflow, nowrap) !important;
}

s-progress-bar[self-align] > * {
  align-self: var(---self-align, center) !important;
}

s-progress-bar[flex] > * {
  flex: var(---flex, 1) !important;
}

s-progress-bar[grow] > * {
  flex-grow: var(---grow, 1) !important;
}

s-progress-bar[shrink] > * {
  flex-shrink: var(---shrink, 1) !important;
}

s-progress-bar[order] > * {
  order: var(---order, 0) !important;
}

s-progress-bar[fill] path > * {
  fill: var(---fill, currentColor) !important;
}

s-progress-bar[stroke] path > * {
  stroke: var(---stroke, currentColor) !important;
}

s-progress-bar[stroke-width] path > * {
  stroke-width: var(---stroke-width, 1) !important;
}

s-progress-bar[visible] > * {
  visibility: var(---visible, visible) !important;
}

s-progress-bar[interactable] > * {
  pointer-events: var(---interactable, auto) !important;
}

s-progress-bar[interactable="none"] > * {
  cursor: default;
}

s-progress-bar[selectable] > * {
  user-select: var(---selectable, auto) !important;
}

[selectable=""],
[selectable="auto"],
s-progress-bar[selectable="all"] > * {
  cursor: text;
}

s-progress-bar[cursor] > * {
  cursor: var(---cursor, auto) !important;
}

s-progress-bar[text-font] > * {
  font-family: var(---text-font, monospace) !important;
}

s-progress-bar[text-size] > * {
  font-size: var(---text-size, 1rem) !important;
}

s-progress-bar[text-size="2xs"] > * {
  line-height: var(---theme-text-2xs-line-height, 1.5);
}

s-progress-bar[text-size="xs"] > * {
  line-height: var(---theme-text-xs-line-height, 1.5);
}

s-progress-bar[text-size="sm"] > * {
  line-height: var(---theme-text-sm-line-height, 1.5);
}

s-progress-bar[text-size="md"] > * {
  line-height: var(---theme-text-md-line-height, 1.5);
}

s-progress-bar[text-size="lg"] > * {
  line-height: var(---theme-text-lg-line-height, 1.5);
}

s-progress-bar[text-size="xl"] > * {
  line-height: var(---theme-text-xl-line-height, 1.5);
}

s-progress-bar[text-size="2xl"] > * {
  line-height: var(---theme-text-2xl-line-height, 1.5);
}

s-progress-bar[text-size="3xl"] > * {
  line-height: var(---theme-text-3xl-line-height, 1.5);
}

s-progress-bar[text-size="4xl"] > * {
  line-height: var(---theme-text-4xl-line-height, 1.5);
}

s-progress-bar[text-size="5xl"] > * {
  line-height: var(---theme-text-5xl-line-height, 1.5);
}

s-progress-bar[text-size="6xl"] > * {
  line-height: var(---theme-text-6xl-line-height, 1.5);
}

s-progress-bar[text-size="7xl"] > * {
  line-height: var(---theme-text-7xl-line-height, 1.5);
}

s-progress-bar[text-size="8xl"] > * {
  line-height: var(---theme-text-8xl-line-height, 1.5);
}

s-progress-bar[text-size="9xl"] > * {
  line-height: var(---theme-text-9xl-line-height, 1.5);
}

s-progress-bar[text-leading] > * {
  line-height: var(---text-leading, 1.5) !important;
}

s-progress-bar[text-tracking] > * {
  letter-spacing: var(---text-tracking, 1.5) !important;
}

s-progress-bar[text-weight] > * {
  font-weight: var(---text-weight, 600) !important;
}

s-progress-bar[text-style] > * {
  font-style: var(---text-style, italic) !important;
}

s-progress-bar[text-decoration-line] > * {
  text-decoration-line: var(---text-decoration-line, underline) !important;
}

s-progress-bar[text-decoration-color] > * {
  text-decoration-color: var(---text-decoration-color, currentColor) !important;
}

s-progress-bar[text-decoration-thickness] > * {
  text-decoration-thickness: var(---text-decoration-thickness, auto) !important;
}

s-progress-bar[text-underline-offset] > * {
  text-underline-offset: var(---text-underline-offset, 4px) !important;
}

s-progress-bar[text-case] > * {
  text-transform: var(---text-case, uppercase) !important;
}

s-progress-bar[text-align] > * {
  text-align: var(---text-align, center) !important;
}

s-progress-bar[text-overflow] > * {
  text-overflow: var(---text-overflow, clip) !important;
}

s-progress-bar[text-overflow=""] > * {
  white-space: nowrap;
}

s-progress-bar[text-overflow="wrap"] > * {
  white-space: break-spaces;
}

s-progress-bar[text-overflow="visible"] > * {
  white-space: nowrap;
}

s-progress-bar[text-overflow="clip"] > * {
  white-space: nowrap;
}

s-progress-bar[text-overflow="ellipsis"] > * {
  overflow: hidden;
  white-space: nowrap;
}

s-progress-bar[text-whitespace] > * {
  white-space: var(---text-whitespace, normal) !important;
}

s-progress-bar[text-color] > * {
  color: var(---text-color, white) !important;
}

s-progress-bar[text-stroke] > * {
  text-shadow: var(---text-stroke) !important;
}

s-progress-bar:is([bg-color], [background-color]) > * {
  background-color: var(---background-color) !important;
}

s-progress-bar:is([bg-image], [background-image]) > * {
  background-image: var(---background-image, none) !important;
}

s-progress-bar:is([bg-repeat], [background-repeat]) > * {
  background-repeat: var(---background-repeat, repeat) !important;
}

s-progress-bar:is([bg-align], [background-align]) > * {
  background-position: var(---background-align, center) !important;
}

s-progress-bar:is([bg-fit], [background-fit]) > * {
  background-size: var(---background-fit, contain) !important;
}

s-progress-bar[clip] > * {
  clip-path: var(---clip, circle(50%)) !important;
}

s-progress-bar[filter] > * {
  filter: var(---filter, none) !important;
}

s-progress-bar[backdrop-filter] > * {
  backdrop-filter: var(---backdrop-filter, none) !important;
}

s-progress-bar[blend] > * {
  mix-blend-mode: var(---blend, normal) !important;
}

s-progress-bar[shadow] > * {
  box-shadow: var(
    ---shadow,
    0 1px 2px hsl(0 0% 0% / 30%),
    0 1px 3px hsl(0 0% 0% / 15%)
  ) !important;
}

s-progress-bar[shadow-inset] > * {
  box-shadow: var(
    ---shadow-inset,
    inset 0 1px 2px hsl(0 0% 0% / 30%),
    inset 0 1px 3px hsl(0 0% 0% / 15%)
  ) !important;
}

s-progress-bar[ring] > * {
  box-shadow: var(---ring, 0 0 0 2px currentColor) !important;
  outline: none !important;
}

s-progress-bar[opacity] > * {
  opacity: var(---opacity, 1) !important;
}

s-progress-bar[translate] > * {
  translate: var(---translate, none) !important;
}

s-progress-bar[rotate] > * {
  rotate: var(---rotate, none) !important;
}

s-progress-bar[scale] > * {
  scale: var(---scale, none) !important;
}

s-progress-bar[pivot] > * {
  transform-origin: var(---pivot, left) !important;
}

s-progress-bar[transition-delay] > * {
  transition-delay: var(---transition-delay, 100ms) !important;
}

s-progress-bar[transition-duration] > * {
  transition-duration: var(---transition-duration, 100ms) !important;
}

s-progress-bar[transition-easing] > * {
  transition-timing-function: var(---transition-easing, ease) !important;
}

s-progress-bar[animation] > * {
  animation: var(---animation, var(---theme-animation-bounce)) !important;
}

s-progress-bar[mask] > * {
  ---theme-mask-angled-corner: conic-gradient(
        from -45deg at var(---corner, 8px) var(---corner, 8px),
        #0000 25%,
        #000 0
      )
      calc(-1 * var(---corner, 8px)) 0 /100% 51% repeat-x,
    conic-gradient(
        from 135deg at var(---corner, 8px) calc(100% - var(---corner, 8px)),
        #0000 25%,
        #000 0
      )
      calc(-1 * var(---corner, 8px)) 100%/100% 51% repeat-x !important;
  ---theme-mask-scooped-corner: radial-gradient(
      var(---corner, 8px) at var(---corner, 8px) var(---corner, 8px),
      #0000 99%,
      #000
    )
    calc(-1 * var(---corner, 8px)) calc(-1 * var(---corner, 8px)) !important;
  ---theme-mask-notched-corner: conic-gradient(
      at calc(2 * var(---corner, 8px)) calc(2 * var(---corner, 8px)),
      #000 75%,
      #0000 0
    )
    calc(-1 * var(---corner, 8px)) calc(-1 * var(---corner, 8px)) !important;
  background-color: transparent !important;
  background-image: none !important;
}

s-progress-bar[mask]::before > * {
  /* Apply mask to a pseudo-element so that drop-shadow filters applied to the root element will match the shape of the mask */
  position: absolute !important;
  inset: 0 !important;
  content: "" !important;
  background-image: var(---background-image, none) !important;
  background-color: var(---background-color) !important;
  -webkit-mask: var(---mask, none) !important;
  mask: var(---mask, none) !important;
}

s-progress-bar[content-visibility] > * {
  content-visibility: var(---content-visibility, auto);
}

s-progress-bar[contain-intrinsic-size] > * {
  contain-intrinsic-size: var(---contain-intrinsic-size, none);
}

s-progress-bar {
  display: contents;
  ---position: relative;
  ---overflow-x: clip;
  ---overflow-y: clip;
  ---height: 2px;
  ---height-min: var(---height);
  ---text-font: var(---theme-font-sans);
  ---text-size: var(---theme-text-xs-font-size);
  ---text-weight: 400;
  ---text-color: var(---theme-color-neutral-0);
  ---background-color: var(---theme-color-neutral-30);
  ---color: var(---theme-color-primary-60);
  ---speed: 2.5;
  ---duration: 400ms;
}

s-progress-bar > .root {
  display: flex;
  position: var(---position);
  overflow-x: var(---overflow-x);
  overflow-y: var(---overflow-y);
  min-height: var(---height-min);
  height: var(---height);
  font-family: var(---text-font);
  font-size: var(---text-size);
  font-weight: var(---text-weight);
  background-color: var(---background-color);
  contain: strict;
  will-change: transform;
}

s-progress-bar > .root > .indicator {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background-color: var(---color);
  color: var(---text-color);
  line-height: var(---height);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  user-select: none;
  transform-origin: left;
  transition-property: transform, background-color;
  transition-duration: var(---duration);
  transform: scaleX(var(---value));
  will-change: transform;
}

s-progress-bar:not([value]) > .root > .indicator {
  animation: indeterminate-bar calc(1s * var(---speed)) infinite
    cubic-bezier(0.37, 0, 0.63, 1);
}

s-progress-bar[rtl] > .root > .indicator {
  transform-origin: right;
}

s-progress-bar[rtl]:not([value]) > .root > .indicator {
  animation-name: indeterminate-bar-rtl;
}

s-progress-bar > .root > .label {
  position: absolute;
  inset: 0;
}

@keyframes indeterminate-bar {
  0% {
    transform: translateX(-50%) scaleX(50%);
  }

  75%, 100% {
    transform: translateX(100%) scaleX(50%);
  }
}

@keyframes indeterminate-bar-rtl {
  0% {
    transform: translateX(50%) scaleX(50%);
  }

  75%, 100% {
    transform: translateX(-100%) scaleX(50%);
  }
}

s-progress-circle* > * {
  transition-property: opacity, translate, rotate, scale, transform, filter,
    backdrop-filter, clip-path, mix-blend-mode, box-shadow, color,
    background-color, border-color, text-decoration-color, fill, stroke;
}

s-progress-circle[display] > * {
  display: var(---display, flex) !important;
}

s-progress-circle[position] > * {
  position: var(---position, absolute) !important;
}

s-progress-circle[position="sticky-top"] > * {
  inset: 0 0 auto 0;
  z-index: 1;
}

s-progress-circle[position="sticky-bottom"] > * {
  inset: auto 0 0 0;
  z-index: 1;
}

s-progress-circle[position="sticky-left"] > * {
  inset: 0 auto 0 0;
  z-index: 1;
}

s-progress-circle[position="sticky-right"] > * {
  inset: 0 0 0 auto;
  z-index: 1;
}

s-progress-circle[position="fixed-top"] > * {
  inset: 0 0 auto 0;
  z-index: 1;
}

s-progress-circle[position="fixed-bottom"] > * {
  inset: auto 0 0 0;
  z-index: 1;
}

s-progress-circle[position="fixed-left"] > * {
  inset: 0 auto 0 0;
  z-index: 1;
}

s-progress-circle[position="fixed-right"] > * {
  inset: 0 0 0 auto;
  z-index: 1;
}

s-progress-circle[aspect] > * {
  aspect-ratio: var(---aspect, 1) !important;
}

s-progress-circle[overflow] > * {
  overflow: var(---overflow, scroll) !important;
}

s-progress-circle[overflow-x] > * {
  overflow-x: var(---overflow-x, scroll) !important;
}

s-progress-circle[overflow-y] > * {
  overflow-y: var(---overflow-y, scroll) !important;
}

s-progress-circle[z] > * {
  z-index: var(---z, 1) !important;
}

s-progress-circle:is([w], [width]) > * {
  width: var(---width, 100%) !important;
}

s-progress-circle:is([w-min], [width-min]) > * {
  min-width: var(---width-min, 0) !important;
}

s-progress-circle:is([w-max], [width-max]) > * {
  max-width: var(---width-max, 100%) !important;
}

s-progress-circle:is([h], [height]) > * {
  height: var(---height, 100%) !important;
}

s-progress-circle:is([h-min], [height-min]) > * {
  min-height: var(---height-min, 0) !important;
}

s-progress-circle:is([h-max], [height-max]) > * {
  max-height: var(---height-max, 100%) !important;
}

s-progress-circle:is([c], [corner]) > * {
  border-radius: var(---corner, 8px) !important;
}

s-progress-circle:is([c-tl], [corner-top-left]) > * {
  border-top-left-radius: var(---corner-top-left, 8px) !important;
}

s-progress-circle:is([c-tr], [corner-top-right]) > * {
  border-top-right-radius: var(---corner-top-right, 8px) !important;
}

s-progress-circle:is([c-bl], [corner-bottom-left]) > * {
  border-bottom-left-radius: var(---corner-bottom-left, 8px) !important;
}

s-progress-circle:is([c-br], [corner-bottom-right]) > * {
  border-bottom-right-radius: var(---corner-bottom-right, 8px) !important;
}

s-progress-circle:is([o-color], [outline-color]) > * {
  outline-style: solid;
  outline-color: var(---outline-color, hsl(0 100% 100% / 50%)) !important;
}

s-progress-circle:is([o-width], [outline-width]) > * {
  outline-style: solid;
  outline-width: var(---outline-width, 8px) !important;
}

s-progress-circle:is([o-style], [outline-style]) > * {
  outline-style: var(---outline-style, solid) !important;
}

s-progress-circle:is([b-color], [border-color]) > * {
  border-style: solid;
  border-color: var(---border-color, currentColor) !important;
}

s-progress-circle:is([b-color-t], [border-color-top]) > * {
  border-style: solid;
  border-top-color: var(---border-color-top, currentColor) !important;
}

s-progress-circle:is([b-color-b], [border-color-bottom]) > * {
  border-style: solid;
  border-bottom-color: var(---border-color-bottom, currentColor) !important;
}

s-progress-circle:is([b-color-l], [border-color-left]) > * {
  border-style: solid;
  border-left-color: var(---border-color-left, currentColor) !important;
}

s-progress-circle:is([b-color-r], [border-color-right]) > * {
  border-style: solid;
  border-right-color: var(---border-color-right, currentColor) !important;
}

s-progress-circle:is([b-width], [border-width]) > * {
  border-style: solid;
  border-width: var(---border-width, 8px) !important;
}

s-progress-circle:is([b-width-t], [border-width-top]) > * {
  border-style: solid;
  border-top-width: var(---border-width-top, 8px) !important;
}

s-progress-circle:is([b-width-b], [border-width-bottom]) > * {
  border-style: solid;
  border-bottom-width: var(---border-width-bottom, 8px) !important;
}

s-progress-circle:is([b-width-l], [border-width-left]) > * {
  border-style: solid;
  border-left-width: var(---border-width-left, 8px) !important;
}

s-progress-circle:is([b-width-r], [border-width-right]) > * {
  border-style: solid;
  border-right-width: var(---border-width-right, 8px) !important;
}

s-progress-circle:is([b-style], [border-style]) > * {
  border-style: var(---border-style, solid) !important;
}

s-progress-circle:is([b-style-t], [border-style-top]) > * {
  border-top-style: var(---border-style-top, solid) !important;
}

s-progress-circle:is([b-style-b], [border-style-bottom]) > * {
  border-bottom-style: var(---border-style-bottom, solid) !important;
}

s-progress-circle:is([b-style-l], [border-style-left]) > * {
  border-left-style: var(---border-style-left, solid) !important;
}

s-progress-circle:is([b-style-r], [border-style-right]) > * {
  border-right-style: var(---border-style-right, solid) !important;
}

s-progress-circle:is([i], [inset]) > * {
  inset: var(---inset, 8px) !important;
}

s-progress-circle:is([i-t], [inset-top]) > * {
  top: var(---inset-top, 8px) !important;
}

s-progress-circle:is([i-b], [inset-bottom]) > * {
  bottom: var(---inset-bottom, 8px) !important;
}

s-progress-circle:is([i-l], [inset-left]) > * {
  left: var(---inset-left, 8px) !important;
}

s-progress-circle:is([i-r], [inset-right]) > * {
  right: var(---inset-right, 8px) !important;
}

s-progress-circle:is([m], [margin]) > * {
  margin: var(---margin, 8px) !important;
}

s-progress-circle:is([m-t], [margin-top]) > * {
  margin-top: var(---margin-top, 8px) !important;
}

s-progress-circle:is([m-b], [margin-bottom]) > * {
  margin-bottom: var(---margin-bottom, 8px) !important;
}

s-progress-circle:is([m-l], [margin-left]) > * {
  margin-left: var(---margin-left, 8px) !important;
}

s-progress-circle:is([m-r], [margin-right]) > * {
  margin-right: var(---margin-right, 8px) !important;
}

s-progress-circle:is([p], [padding]) > * {
  padding: var(---padding, 8px) !important;
}

s-progress-circle:is([p-t], [padding-top]) > * {
  padding-top: var(---padding-top, 8px) !important;
}

s-progress-circle:is([p-b], [padding-bottom]) > * {
  padding-bottom: var(---padding-bottom, 8px) !important;
}

s-progress-circle:is([p-l], [padding-left]) > * {
  padding-left: var(---padding-left, 8px) !important;
}

s-progress-circle:is([p-r], [padding-right]) > * {
  padding-right: var(---padding-right, 8px) !important;
}

s-progress-circle:is([child-layout="row"], [child-layout="column"]) > * {
  display: flex;
  flex-direction: var(---child-layout, row) !important;
}

s-progress-circle:is([child-layout="grid"], [child-columns]) > * {
  display: grid;
  grid-template-columns: var(---child-columns, 1fr 1fr 1fr);
}

s-progress-circle[child-gap] > * {
  gap: var(---child-gap, 8px) !important;
}

s-progress-circle[child-align] > * {
  align-items: var(---child-align, center) !important;
}

s-progress-circle[child-justify] > * {
  justify-content: var(---child-justify, center) !important;
}

s-progress-circle[child-overflow] > * {
  flex-wrap: var(---child-overflow, nowrap) !important;
}

s-progress-circle[self-align] > * {
  align-self: var(---self-align, center) !important;
}

s-progress-circle[flex] > * {
  flex: var(---flex, 1) !important;
}

s-progress-circle[grow] > * {
  flex-grow: var(---grow, 1) !important;
}

s-progress-circle[shrink] > * {
  flex-shrink: var(---shrink, 1) !important;
}

s-progress-circle[order] > * {
  order: var(---order, 0) !important;
}

s-progress-circle[fill] path > * {
  fill: var(---fill, currentColor) !important;
}

s-progress-circle[stroke] path > * {
  stroke: var(---stroke, currentColor) !important;
}

s-progress-circle[stroke-width] path > * {
  stroke-width: var(---stroke-width, 1) !important;
}

s-progress-circle[visible] > * {
  visibility: var(---visible, visible) !important;
}

s-progress-circle[interactable] > * {
  pointer-events: var(---interactable, auto) !important;
}

s-progress-circle[interactable="none"] > * {
  cursor: default;
}

s-progress-circle[selectable] > * {
  user-select: var(---selectable, auto) !important;
}

[selectable=""],
[selectable="auto"],
s-progress-circle[selectable="all"] > * {
  cursor: text;
}

s-progress-circle[cursor] > * {
  cursor: var(---cursor, auto) !important;
}

s-progress-circle[text-font] > * {
  font-family: var(---text-font, monospace) !important;
}

s-progress-circle[text-size] > * {
  font-size: var(---text-size, 1rem) !important;
}

s-progress-circle[text-size="2xs"] > * {
  line-height: var(---theme-text-2xs-line-height, 1.5);
}

s-progress-circle[text-size="xs"] > * {
  line-height: var(---theme-text-xs-line-height, 1.5);
}

s-progress-circle[text-size="sm"] > * {
  line-height: var(---theme-text-sm-line-height, 1.5);
}

s-progress-circle[text-size="md"] > * {
  line-height: var(---theme-text-md-line-height, 1.5);
}

s-progress-circle[text-size="lg"] > * {
  line-height: var(---theme-text-lg-line-height, 1.5);
}

s-progress-circle[text-size="xl"] > * {
  line-height: var(---theme-text-xl-line-height, 1.5);
}

s-progress-circle[text-size="2xl"] > * {
  line-height: var(---theme-text-2xl-line-height, 1.5);
}

s-progress-circle[text-size="3xl"] > * {
  line-height: var(---theme-text-3xl-line-height, 1.5);
}

s-progress-circle[text-size="4xl"] > * {
  line-height: var(---theme-text-4xl-line-height, 1.5);
}

s-progress-circle[text-size="5xl"] > * {
  line-height: var(---theme-text-5xl-line-height, 1.5);
}

s-progress-circle[text-size="6xl"] > * {
  line-height: var(---theme-text-6xl-line-height, 1.5);
}

s-progress-circle[text-size="7xl"] > * {
  line-height: var(---theme-text-7xl-line-height, 1.5);
}

s-progress-circle[text-size="8xl"] > * {
  line-height: var(---theme-text-8xl-line-height, 1.5);
}

s-progress-circle[text-size="9xl"] > * {
  line-height: var(---theme-text-9xl-line-height, 1.5);
}

s-progress-circle[text-leading] > * {
  line-height: var(---text-leading, 1.5) !important;
}

s-progress-circle[text-tracking] > * {
  letter-spacing: var(---text-tracking, 1.5) !important;
}

s-progress-circle[text-weight] > * {
  font-weight: var(---text-weight, 600) !important;
}

s-progress-circle[text-style] > * {
  font-style: var(---text-style, italic) !important;
}

s-progress-circle[text-decoration-line] > * {
  text-decoration-line: var(---text-decoration-line, underline) !important;
}

s-progress-circle[text-decoration-color] > * {
  text-decoration-color: var(---text-decoration-color, currentColor) !important;
}

s-progress-circle[text-decoration-thickness] > * {
  text-decoration-thickness: var(---text-decoration-thickness, auto) !important;
}

s-progress-circle[text-underline-offset] > * {
  text-underline-offset: var(---text-underline-offset, 4px) !important;
}

s-progress-circle[text-case] > * {
  text-transform: var(---text-case, uppercase) !important;
}

s-progress-circle[text-align] > * {
  text-align: var(---text-align, center) !important;
}

s-progress-circle[text-overflow] > * {
  text-overflow: var(---text-overflow, clip) !important;
}

s-progress-circle[text-overflow=""] > * {
  white-space: nowrap;
}

s-progress-circle[text-overflow="wrap"] > * {
  white-space: break-spaces;
}

s-progress-circle[text-overflow="visible"] > * {
  white-space: nowrap;
}

s-progress-circle[text-overflow="clip"] > * {
  white-space: nowrap;
}

s-progress-circle[text-overflow="ellipsis"] > * {
  overflow: hidden;
  white-space: nowrap;
}

s-progress-circle[text-whitespace] > * {
  white-space: var(---text-whitespace, normal) !important;
}

s-progress-circle[text-color] > * {
  color: var(---text-color, white) !important;
}

s-progress-circle[text-stroke] > * {
  text-shadow: var(---text-stroke) !important;
}

s-progress-circle:is([bg-color], [background-color]) > * {
  background-color: var(---background-color) !important;
}

s-progress-circle:is([bg-image], [background-image]) > * {
  background-image: var(---background-image, none) !important;
}

s-progress-circle:is([bg-repeat], [background-repeat]) > * {
  background-repeat: var(---background-repeat, repeat) !important;
}

s-progress-circle:is([bg-align], [background-align]) > * {
  background-position: var(---background-align, center) !important;
}

s-progress-circle:is([bg-fit], [background-fit]) > * {
  background-size: var(---background-fit, contain) !important;
}

s-progress-circle[clip] > * {
  clip-path: var(---clip, circle(50%)) !important;
}

s-progress-circle[filter] > * {
  filter: var(---filter, none) !important;
}

s-progress-circle[backdrop-filter] > * {
  backdrop-filter: var(---backdrop-filter, none) !important;
}

s-progress-circle[blend] > * {
  mix-blend-mode: var(---blend, normal) !important;
}

s-progress-circle[shadow] > * {
  box-shadow: var(
    ---shadow,
    0 1px 2px hsl(0 0% 0% / 30%),
    0 1px 3px hsl(0 0% 0% / 15%)
  ) !important;
}

s-progress-circle[shadow-inset] > * {
  box-shadow: var(
    ---shadow-inset,
    inset 0 1px 2px hsl(0 0% 0% / 30%),
    inset 0 1px 3px hsl(0 0% 0% / 15%)
  ) !important;
}

s-progress-circle[ring] > * {
  box-shadow: var(---ring, 0 0 0 2px currentColor) !important;
  outline: none !important;
}

s-progress-circle[opacity] > * {
  opacity: var(---opacity, 1) !important;
}

s-progress-circle[translate] > * {
  translate: var(---translate, none) !important;
}

s-progress-circle[rotate] > * {
  rotate: var(---rotate, none) !important;
}

s-progress-circle[scale] > * {
  scale: var(---scale, none) !important;
}

s-progress-circle[pivot] > * {
  transform-origin: var(---pivot, left) !important;
}

s-progress-circle[transition-delay] > * {
  transition-delay: var(---transition-delay, 100ms) !important;
}

s-progress-circle[transition-duration] > * {
  transition-duration: var(---transition-duration, 100ms) !important;
}

s-progress-circle[transition-easing] > * {
  transition-timing-function: var(---transition-easing, ease) !important;
}

s-progress-circle[animation] > * {
  animation: var(---animation, var(---theme-animation-bounce)) !important;
}

s-progress-circle[mask] > * {
  ---theme-mask-angled-corner: conic-gradient(
        from -45deg at var(---corner, 8px) var(---corner, 8px),
        #0000 25%,
        #000 0
      )
      calc(-1 * var(---corner, 8px)) 0 /100% 51% repeat-x,
    conic-gradient(
        from 135deg at var(---corner, 8px) calc(100% - var(---corner, 8px)),
        #0000 25%,
        #000 0
      )
      calc(-1 * var(---corner, 8px)) 100%/100% 51% repeat-x !important;
  ---theme-mask-scooped-corner: radial-gradient(
      var(---corner, 8px) at var(---corner, 8px) var(---corner, 8px),
      #0000 99%,
      #000
    )
    calc(-1 * var(---corner, 8px)) calc(-1 * var(---corner, 8px)) !important;
  ---theme-mask-notched-corner: conic-gradient(
      at calc(2 * var(---corner, 8px)) calc(2 * var(---corner, 8px)),
      #000 75%,
      #0000 0
    )
    calc(-1 * var(---corner, 8px)) calc(-1 * var(---corner, 8px)) !important;
  background-color: transparent !important;
  background-image: none !important;
}

s-progress-circle[mask]::before > * {
  /* Apply mask to a pseudo-element so that drop-shadow filters applied to the root element will match the shape of the mask */
  position: absolute !important;
  inset: 0 !important;
  content: "" !important;
  background-image: var(---background-image, none) !important;
  background-color: var(---background-color) !important;
  -webkit-mask: var(---mask, none) !important;
  mask: var(---mask, none) !important;
}

s-progress-circle[content-visibility] > * {
  content-visibility: var(---content-visibility, auto);
}

s-progress-circle[contain-intrinsic-size] > * {
  contain-intrinsic-size: var(---contain-intrinsic-size, none);
}

s-progress-circle {
  display: contents;
  ---value: 0;
  ---size: 1em;
  ---background-color: var(---theme-color-neutral-30);
  ---color: var(---theme-color-primary-60);
  ---position: relative;
  ---child-justify: center;
  ---child-align: center;
  ---track-width: 2px;
  ---indicator-width: var(---track-width);
  ---duration: 0.35s;
  ---speed: 2;
  ---text-font: var(---theme-font-sans);
  ---text-size: var(---theme-text-xs-font-size);
  ---text-leading: var(---theme-text-xs-line-height);
}

s-progress-circle > .root {
  display: flex;
  position: var(---position);
  min-width: var(---size);
  min-height: var(---size);
  width: var(---size);
  height: var(---size);
  justify-content: center;
  align-items: center;
  background-color: transparent;
  contain: strict;
  will-change: transform;
}

s-progress-circle > .root > .label {
  display: flex;
  justify-content: var(---child-justify);
  align-items: var(---child-align);
  font-family: var(---text-font);
  font-size: var(---text-size);
  line-height: var(---text-leading);
}

s-progress-circle > .root > .circle {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  max-height: 100%;
  transform: rotateZ(-90deg);
  transform-origin: 50% 50%;
}

s-progress-circle > .root > .circle > .track,
s-progress-circle > .root > .circle > .indicator {
  ---radius: calc(var(---size) / 2);
  fill: none;
  r: calc(var(---radius) - var(---track-width) / 2);
  cx: var(---radius);
  cy: var(---radius);
}

s-progress-circle > .root > .circle > .track {
  stroke: var(---background-color);
  stroke-width: var(---track-width);
  transform-origin: 0% 0%;
}

s-progress-circle > .root > .circle > .indicator {
  stroke: var(---color);
  stroke-width: var(---indicator-width);
  stroke-linecap: round;
  transform-origin: 50% 50%;
  will-change: transform;
}

s-progress-circle[value] > .root > .circle > .indicator {
  ---circumference: calc(var(---size) * 3.141592654);
  transition-property: stroke-dashoffset;
  transition-duration: var(---duration);
  stroke-dasharray: var(---circumference) var(---circumference);
  stroke-dashoffset: calc(
    var(---circumference) - var(---value) * var(---circumference)
  );
}

s-progress-circle:not([value]) > .root > .circle > .indicator {
  stroke-dasharray: 137%, 137%;
  animation: indeterminate-circle calc(1s * var(---speed)) linear infinite;
}

@keyframes indeterminate-circle {
  0% {
    transform: rotate(0deg);
  }

  50% {
    transform: rotate(450deg);
  }

  100% {
    transform: rotate(1080deg);
  }
}

s-ripple* > * {
  transition-property: opacity, translate, rotate, scale, transform, filter,
    backdrop-filter, clip-path, mix-blend-mode, box-shadow, color,
    background-color, border-color, text-decoration-color, fill, stroke;
}

s-ripple[display] > * {
  display: var(---display, flex) !important;
}

s-ripple[position] > * {
  position: var(---position, absolute) !important;
}

s-ripple[position="sticky-top"] > * {
  inset: 0 0 auto 0;
  z-index: 1;
}

s-ripple[position="sticky-bottom"] > * {
  inset: auto 0 0 0;
  z-index: 1;
}

s-ripple[position="sticky-left"] > * {
  inset: 0 auto 0 0;
  z-index: 1;
}

s-ripple[position="sticky-right"] > * {
  inset: 0 0 0 auto;
  z-index: 1;
}

s-ripple[position="fixed-top"] > * {
  inset: 0 0 auto 0;
  z-index: 1;
}

s-ripple[position="fixed-bottom"] > * {
  inset: auto 0 0 0;
  z-index: 1;
}

s-ripple[position="fixed-left"] > * {
  inset: 0 auto 0 0;
  z-index: 1;
}

s-ripple[position="fixed-right"] > * {
  inset: 0 0 0 auto;
  z-index: 1;
}

s-ripple[aspect] > * {
  aspect-ratio: var(---aspect, 1) !important;
}

s-ripple[overflow] > * {
  overflow: var(---overflow, scroll) !important;
}

s-ripple[overflow-x] > * {
  overflow-x: var(---overflow-x, scroll) !important;
}

s-ripple[overflow-y] > * {
  overflow-y: var(---overflow-y, scroll) !important;
}

s-ripple[z] > * {
  z-index: var(---z, 1) !important;
}

s-ripple:is([w], [width]) > * {
  width: var(---width, 100%) !important;
}

s-ripple:is([w-min], [width-min]) > * {
  min-width: var(---width-min, 0) !important;
}

s-ripple:is([w-max], [width-max]) > * {
  max-width: var(---width-max, 100%) !important;
}

s-ripple:is([h], [height]) > * {
  height: var(---height, 100%) !important;
}

s-ripple:is([h-min], [height-min]) > * {
  min-height: var(---height-min, 0) !important;
}

s-ripple:is([h-max], [height-max]) > * {
  max-height: var(---height-max, 100%) !important;
}

s-ripple:is([c], [corner]) > * {
  border-radius: var(---corner, 8px) !important;
}

s-ripple:is([c-tl], [corner-top-left]) > * {
  border-top-left-radius: var(---corner-top-left, 8px) !important;
}

s-ripple:is([c-tr], [corner-top-right]) > * {
  border-top-right-radius: var(---corner-top-right, 8px) !important;
}

s-ripple:is([c-bl], [corner-bottom-left]) > * {
  border-bottom-left-radius: var(---corner-bottom-left, 8px) !important;
}

s-ripple:is([c-br], [corner-bottom-right]) > * {
  border-bottom-right-radius: var(---corner-bottom-right, 8px) !important;
}

s-ripple:is([o-color], [outline-color]) > * {
  outline-style: solid;
  outline-color: var(---outline-color, hsl(0 100% 100% / 50%)) !important;
}

s-ripple:is([o-width], [outline-width]) > * {
  outline-style: solid;
  outline-width: var(---outline-width, 8px) !important;
}

s-ripple:is([o-style], [outline-style]) > * {
  outline-style: var(---outline-style, solid) !important;
}

s-ripple:is([b-color], [border-color]) > * {
  border-style: solid;
  border-color: var(---border-color, currentColor) !important;
}

s-ripple:is([b-color-t], [border-color-top]) > * {
  border-style: solid;
  border-top-color: var(---border-color-top, currentColor) !important;
}

s-ripple:is([b-color-b], [border-color-bottom]) > * {
  border-style: solid;
  border-bottom-color: var(---border-color-bottom, currentColor) !important;
}

s-ripple:is([b-color-l], [border-color-left]) > * {
  border-style: solid;
  border-left-color: var(---border-color-left, currentColor) !important;
}

s-ripple:is([b-color-r], [border-color-right]) > * {
  border-style: solid;
  border-right-color: var(---border-color-right, currentColor) !important;
}

s-ripple:is([b-width], [border-width]) > * {
  border-style: solid;
  border-width: var(---border-width, 8px) !important;
}

s-ripple:is([b-width-t], [border-width-top]) > * {
  border-style: solid;
  border-top-width: var(---border-width-top, 8px) !important;
}

s-ripple:is([b-width-b], [border-width-bottom]) > * {
  border-style: solid;
  border-bottom-width: var(---border-width-bottom, 8px) !important;
}

s-ripple:is([b-width-l], [border-width-left]) > * {
  border-style: solid;
  border-left-width: var(---border-width-left, 8px) !important;
}

s-ripple:is([b-width-r], [border-width-right]) > * {
  border-style: solid;
  border-right-width: var(---border-width-right, 8px) !important;
}

s-ripple:is([b-style], [border-style]) > * {
  border-style: var(---border-style, solid) !important;
}

s-ripple:is([b-style-t], [border-style-top]) > * {
  border-top-style: var(---border-style-top, solid) !important;
}

s-ripple:is([b-style-b], [border-style-bottom]) > * {
  border-bottom-style: var(---border-style-bottom, solid) !important;
}

s-ripple:is([b-style-l], [border-style-left]) > * {
  border-left-style: var(---border-style-left, solid) !important;
}

s-ripple:is([b-style-r], [border-style-right]) > * {
  border-right-style: var(---border-style-right, solid) !important;
}

s-ripple:is([i], [inset]) > * {
  inset: var(---inset, 8px) !important;
}

s-ripple:is([i-t], [inset-top]) > * {
  top: var(---inset-top, 8px) !important;
}

s-ripple:is([i-b], [inset-bottom]) > * {
  bottom: var(---inset-bottom, 8px) !important;
}

s-ripple:is([i-l], [inset-left]) > * {
  left: var(---inset-left, 8px) !important;
}

s-ripple:is([i-r], [inset-right]) > * {
  right: var(---inset-right, 8px) !important;
}

s-ripple:is([m], [margin]) > * {
  margin: var(---margin, 8px) !important;
}

s-ripple:is([m-t], [margin-top]) > * {
  margin-top: var(---margin-top, 8px) !important;
}

s-ripple:is([m-b], [margin-bottom]) > * {
  margin-bottom: var(---margin-bottom, 8px) !important;
}

s-ripple:is([m-l], [margin-left]) > * {
  margin-left: var(---margin-left, 8px) !important;
}

s-ripple:is([m-r], [margin-right]) > * {
  margin-right: var(---margin-right, 8px) !important;
}

s-ripple:is([p], [padding]) > * {
  padding: var(---padding, 8px) !important;
}

s-ripple:is([p-t], [padding-top]) > * {
  padding-top: var(---padding-top, 8px) !important;
}

s-ripple:is([p-b], [padding-bottom]) > * {
  padding-bottom: var(---padding-bottom, 8px) !important;
}

s-ripple:is([p-l], [padding-left]) > * {
  padding-left: var(---padding-left, 8px) !important;
}

s-ripple:is([p-r], [padding-right]) > * {
  padding-right: var(---padding-right, 8px) !important;
}

s-ripple:is([child-layout="row"], [child-layout="column"]) > * {
  display: flex;
  flex-direction: var(---child-layout, row) !important;
}

s-ripple:is([child-layout="grid"], [child-columns]) > * {
  display: grid;
  grid-template-columns: var(---child-columns, 1fr 1fr 1fr);
}

s-ripple[child-gap] > * {
  gap: var(---child-gap, 8px) !important;
}

s-ripple[child-align] > * {
  align-items: var(---child-align, center) !important;
}

s-ripple[child-justify] > * {
  justify-content: var(---child-justify, center) !important;
}

s-ripple[child-overflow] > * {
  flex-wrap: var(---child-overflow, nowrap) !important;
}

s-ripple[self-align] > * {
  align-self: var(---self-align, center) !important;
}

s-ripple[flex] > * {
  flex: var(---flex, 1) !important;
}

s-ripple[grow] > * {
  flex-grow: var(---grow, 1) !important;
}

s-ripple[shrink] > * {
  flex-shrink: var(---shrink, 1) !important;
}

s-ripple[order] > * {
  order: var(---order, 0) !important;
}

s-ripple[fill] path > * {
  fill: var(---fill, currentColor) !important;
}

s-ripple[stroke] path > * {
  stroke: var(---stroke, currentColor) !important;
}

s-ripple[stroke-width] path > * {
  stroke-width: var(---stroke-width, 1) !important;
}

s-ripple[visible] > * {
  visibility: var(---visible, visible) !important;
}

s-ripple[interactable] > * {
  pointer-events: var(---interactable, auto) !important;
}

s-ripple[interactable="none"] > * {
  cursor: default;
}

s-ripple[selectable] > * {
  user-select: var(---selectable, auto) !important;
}

[selectable=""],
[selectable="auto"],
s-ripple[selectable="all"] > * {
  cursor: text;
}

s-ripple[cursor] > * {
  cursor: var(---cursor, auto) !important;
}

s-ripple[text-font] > * {
  font-family: var(---text-font, monospace) !important;
}

s-ripple[text-size] > * {
  font-size: var(---text-size, 1rem) !important;
}

s-ripple[text-size="2xs"] > * {
  line-height: var(---theme-text-2xs-line-height, 1.5);
}

s-ripple[text-size="xs"] > * {
  line-height: var(---theme-text-xs-line-height, 1.5);
}

s-ripple[text-size="sm"] > * {
  line-height: var(---theme-text-sm-line-height, 1.5);
}

s-ripple[text-size="md"] > * {
  line-height: var(---theme-text-md-line-height, 1.5);
}

s-ripple[text-size="lg"] > * {
  line-height: var(---theme-text-lg-line-height, 1.5);
}

s-ripple[text-size="xl"] > * {
  line-height: var(---theme-text-xl-line-height, 1.5);
}

s-ripple[text-size="2xl"] > * {
  line-height: var(---theme-text-2xl-line-height, 1.5);
}

s-ripple[text-size="3xl"] > * {
  line-height: var(---theme-text-3xl-line-height, 1.5);
}

s-ripple[text-size="4xl"] > * {
  line-height: var(---theme-text-4xl-line-height, 1.5);
}

s-ripple[text-size="5xl"] > * {
  line-height: var(---theme-text-5xl-line-height, 1.5);
}

s-ripple[text-size="6xl"] > * {
  line-height: var(---theme-text-6xl-line-height, 1.5);
}

s-ripple[text-size="7xl"] > * {
  line-height: var(---theme-text-7xl-line-height, 1.5);
}

s-ripple[text-size="8xl"] > * {
  line-height: var(---theme-text-8xl-line-height, 1.5);
}

s-ripple[text-size="9xl"] > * {
  line-height: var(---theme-text-9xl-line-height, 1.5);
}

s-ripple[text-leading] > * {
  line-height: var(---text-leading, 1.5) !important;
}

s-ripple[text-tracking] > * {
  letter-spacing: var(---text-tracking, 1.5) !important;
}

s-ripple[text-weight] > * {
  font-weight: var(---text-weight, 600) !important;
}

s-ripple[text-style] > * {
  font-style: var(---text-style, italic) !important;
}

s-ripple[text-decoration-line] > * {
  text-decoration-line: var(---text-decoration-line, underline) !important;
}

s-ripple[text-decoration-color] > * {
  text-decoration-color: var(---text-decoration-color, currentColor) !important;
}

s-ripple[text-decoration-thickness] > * {
  text-decoration-thickness: var(---text-decoration-thickness, auto) !important;
}

s-ripple[text-underline-offset] > * {
  text-underline-offset: var(---text-underline-offset, 4px) !important;
}

s-ripple[text-case] > * {
  text-transform: var(---text-case, uppercase) !important;
}

s-ripple[text-align] > * {
  text-align: var(---text-align, center) !important;
}

s-ripple[text-overflow] > * {
  text-overflow: var(---text-overflow, clip) !important;
}

s-ripple[text-overflow=""] > * {
  white-space: nowrap;
}

s-ripple[text-overflow="wrap"] > * {
  white-space: break-spaces;
}

s-ripple[text-overflow="visible"] > * {
  white-space: nowrap;
}

s-ripple[text-overflow="clip"] > * {
  white-space: nowrap;
}

s-ripple[text-overflow="ellipsis"] > * {
  overflow: hidden;
  white-space: nowrap;
}

s-ripple[text-whitespace] > * {
  white-space: var(---text-whitespace, normal) !important;
}

s-ripple[text-color] > * {
  color: var(---text-color, white) !important;
}

s-ripple[text-stroke] > * {
  text-shadow: var(---text-stroke) !important;
}

s-ripple:is([bg-color], [background-color]) > * {
  background-color: var(---background-color) !important;
}

s-ripple:is([bg-image], [background-image]) > * {
  background-image: var(---background-image, none) !important;
}

s-ripple:is([bg-repeat], [background-repeat]) > * {
  background-repeat: var(---background-repeat, repeat) !important;
}

s-ripple:is([bg-align], [background-align]) > * {
  background-position: var(---background-align, center) !important;
}

s-ripple:is([bg-fit], [background-fit]) > * {
  background-size: var(---background-fit, contain) !important;
}

s-ripple[clip] > * {
  clip-path: var(---clip, circle(50%)) !important;
}

s-ripple[filter] > * {
  filter: var(---filter, none) !important;
}

s-ripple[backdrop-filter] > * {
  backdrop-filter: var(---backdrop-filter, none) !important;
}

s-ripple[blend] > * {
  mix-blend-mode: var(---blend, normal) !important;
}

s-ripple[shadow] > * {
  box-shadow: var(
    ---shadow,
    0 1px 2px hsl(0 0% 0% / 30%),
    0 1px 3px hsl(0 0% 0% / 15%)
  ) !important;
}

s-ripple[shadow-inset] > * {
  box-shadow: var(
    ---shadow-inset,
    inset 0 1px 2px hsl(0 0% 0% / 30%),
    inset 0 1px 3px hsl(0 0% 0% / 15%)
  ) !important;
}

s-ripple[ring] > * {
  box-shadow: var(---ring, 0 0 0 2px currentColor) !important;
  outline: none !important;
}

s-ripple[opacity] > * {
  opacity: var(---opacity, 1) !important;
}

s-ripple[translate] > * {
  translate: var(---translate, none) !important;
}

s-ripple[rotate] > * {
  rotate: var(---rotate, none) !important;
}

s-ripple[scale] > * {
  scale: var(---scale, none) !important;
}

s-ripple[pivot] > * {
  transform-origin: var(---pivot, left) !important;
}

s-ripple[transition-delay] > * {
  transition-delay: var(---transition-delay, 100ms) !important;
}

s-ripple[transition-duration] > * {
  transition-duration: var(---transition-duration, 100ms) !important;
}

s-ripple[transition-easing] > * {
  transition-timing-function: var(---transition-easing, ease) !important;
}

s-ripple[animation] > * {
  animation: var(---animation, var(---theme-animation-bounce)) !important;
}

s-ripple[mask] > * {
  ---theme-mask-angled-corner: conic-gradient(
        from -45deg at var(---corner, 8px) var(---corner, 8px),
        #0000 25%,
        #000 0
      )
      calc(-1 * var(---corner, 8px)) 0 /100% 51% repeat-x,
    conic-gradient(
        from 135deg at var(---corner, 8px) calc(100% - var(---corner, 8px)),
        #0000 25%,
        #000 0
      )
      calc(-1 * var(---corner, 8px)) 100%/100% 51% repeat-x !important;
  ---theme-mask-scooped-corner: radial-gradient(
      var(---corner, 8px) at var(---corner, 8px) var(---corner, 8px),
      #0000 99%,
      #000
    )
    calc(-1 * var(---corner, 8px)) calc(-1 * var(---corner, 8px)) !important;
  ---theme-mask-notched-corner: conic-gradient(
      at calc(2 * var(---corner, 8px)) calc(2 * var(---corner, 8px)),
      #000 75%,
      #0000 0
    )
    calc(-1 * var(---corner, 8px)) calc(-1 * var(---corner, 8px)) !important;
  background-color: transparent !important;
  background-image: none !important;
}

s-ripple[mask]::before > * {
  /* Apply mask to a pseudo-element so that drop-shadow filters applied to the root element will match the shape of the mask */
  position: absolute !important;
  inset: 0 !important;
  content: "" !important;
  background-image: var(---background-image, none) !important;
  background-color: var(---background-color) !important;
  -webkit-mask: var(---mask, none) !important;
  mask: var(---mask, none) !important;
}

s-ripple[content-visibility] > * {
  content-visibility: var(---content-visibility, auto);
}

s-ripple[contain-intrinsic-size] > * {
  contain-intrinsic-size: var(---contain-intrinsic-size, none);
}

s-ripple {
  display: contents;
  border-radius: inherit;
  -webkit-mask: inherit;
  mask: inherit;
  ---hover-opacity: var(---theme-opacity-hover);
  ---press-opacity: var(---theme-opacity-press);
  ---ripple-duration: 150ms;
  ---hover-duration: 0ms;
  ---press-duration: 105ms;
  ---min-color-stop-length: 75%;
}

s-ripple > .root {
  display: flex;
  pointer-events: auto;
  border-radius: inherit;
  position: absolute;
  inset: 0;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
  -webkit-mask: inherit;
  mask: inherit;
  will-change: transform, opacity;
}

s-ripple > .root::before,
s-ripple > .root::after {
  display: inline-block;
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  content: "";
  border-radius: inherit;
  -webkit-mask: inherit;
  mask: inherit;
  will-change: transform, opacity;
}

s-ripple > .root::before {
  background-color: currentColor;
  transition-property: opacity, background-color;
  transition-timing-function: linear;
  transition-duration: var(---hover-duration);
}

s-ripple > .root::after {
  background: radial-gradient(
    closest-side,
    currentColor max(calc(100% - 70px), var(---min-color-stop-length)),
    transparent 100%
  );
  transition-property: opacity;
  transition-duration: var(---ripple-duration);
  transition-timing-function: linear;
  transform-origin: center center;
}

s-ripple > .root.pressed::after {
  opacity: var(---press-opacity);
  transition-property: opacity;
  transition-duration: var(---press-duration);
}

s-ripple[animation="none"] > .root::after {
  visibility: hidden;
}

@media (hover: hover) and (pointer: fine) {
  s-ripple > .root:hover::before {
    opacity: var(---hover-opacity);
  }
}

s-skeleton* > * {
  transition-property: opacity, translate, rotate, scale, transform, filter,
    backdrop-filter, clip-path, mix-blend-mode, box-shadow, color,
    background-color, border-color, text-decoration-color, fill, stroke;
}

s-skeleton[display] > * {
  display: var(---display, flex) !important;
}

s-skeleton[position] > * {
  position: var(---position, absolute) !important;
}

s-skeleton[position="sticky-top"] > * {
  inset: 0 0 auto 0;
  z-index: 1;
}

s-skeleton[position="sticky-bottom"] > * {
  inset: auto 0 0 0;
  z-index: 1;
}

s-skeleton[position="sticky-left"] > * {
  inset: 0 auto 0 0;
  z-index: 1;
}

s-skeleton[position="sticky-right"] > * {
  inset: 0 0 0 auto;
  z-index: 1;
}

s-skeleton[position="fixed-top"] > * {
  inset: 0 0 auto 0;
  z-index: 1;
}

s-skeleton[position="fixed-bottom"] > * {
  inset: auto 0 0 0;
  z-index: 1;
}

s-skeleton[position="fixed-left"] > * {
  inset: 0 auto 0 0;
  z-index: 1;
}

s-skeleton[position="fixed-right"] > * {
  inset: 0 0 0 auto;
  z-index: 1;
}

s-skeleton[aspect] > * {
  aspect-ratio: var(---aspect, 1) !important;
}

s-skeleton[overflow] > * {
  overflow: var(---overflow, scroll) !important;
}

s-skeleton[overflow-x] > * {
  overflow-x: var(---overflow-x, scroll) !important;
}

s-skeleton[overflow-y] > * {
  overflow-y: var(---overflow-y, scroll) !important;
}

s-skeleton[z] > * {
  z-index: var(---z, 1) !important;
}

s-skeleton:is([w], [width]) > * {
  width: var(---width, 100%) !important;
}

s-skeleton:is([w-min], [width-min]) > * {
  min-width: var(---width-min, 0) !important;
}

s-skeleton:is([w-max], [width-max]) > * {
  max-width: var(---width-max, 100%) !important;
}

s-skeleton:is([h], [height]) > * {
  height: var(---height, 100%) !important;
}

s-skeleton:is([h-min], [height-min]) > * {
  min-height: var(---height-min, 0) !important;
}

s-skeleton:is([h-max], [height-max]) > * {
  max-height: var(---height-max, 100%) !important;
}

s-skeleton:is([c], [corner]) > * {
  border-radius: var(---corner, 8px) !important;
}

s-skeleton:is([c-tl], [corner-top-left]) > * {
  border-top-left-radius: var(---corner-top-left, 8px) !important;
}

s-skeleton:is([c-tr], [corner-top-right]) > * {
  border-top-right-radius: var(---corner-top-right, 8px) !important;
}

s-skeleton:is([c-bl], [corner-bottom-left]) > * {
  border-bottom-left-radius: var(---corner-bottom-left, 8px) !important;
}

s-skeleton:is([c-br], [corner-bottom-right]) > * {
  border-bottom-right-radius: var(---corner-bottom-right, 8px) !important;
}

s-skeleton:is([o-color], [outline-color]) > * {
  outline-style: solid;
  outline-color: var(---outline-color, hsl(0 100% 100% / 50%)) !important;
}

s-skeleton:is([o-width], [outline-width]) > * {
  outline-style: solid;
  outline-width: var(---outline-width, 8px) !important;
}

s-skeleton:is([o-style], [outline-style]) > * {
  outline-style: var(---outline-style, solid) !important;
}

s-skeleton:is([b-color], [border-color]) > * {
  border-style: solid;
  border-color: var(---border-color, currentColor) !important;
}

s-skeleton:is([b-color-t], [border-color-top]) > * {
  border-style: solid;
  border-top-color: var(---border-color-top, currentColor) !important;
}

s-skeleton:is([b-color-b], [border-color-bottom]) > * {
  border-style: solid;
  border-bottom-color: var(---border-color-bottom, currentColor) !important;
}

s-skeleton:is([b-color-l], [border-color-left]) > * {
  border-style: solid;
  border-left-color: var(---border-color-left, currentColor) !important;
}

s-skeleton:is([b-color-r], [border-color-right]) > * {
  border-style: solid;
  border-right-color: var(---border-color-right, currentColor) !important;
}

s-skeleton:is([b-width], [border-width]) > * {
  border-style: solid;
  border-width: var(---border-width, 8px) !important;
}

s-skeleton:is([b-width-t], [border-width-top]) > * {
  border-style: solid;
  border-top-width: var(---border-width-top, 8px) !important;
}

s-skeleton:is([b-width-b], [border-width-bottom]) > * {
  border-style: solid;
  border-bottom-width: var(---border-width-bottom, 8px) !important;
}

s-skeleton:is([b-width-l], [border-width-left]) > * {
  border-style: solid;
  border-left-width: var(---border-width-left, 8px) !important;
}

s-skeleton:is([b-width-r], [border-width-right]) > * {
  border-style: solid;
  border-right-width: var(---border-width-right, 8px) !important;
}

s-skeleton:is([b-style], [border-style]) > * {
  border-style: var(---border-style, solid) !important;
}

s-skeleton:is([b-style-t], [border-style-top]) > * {
  border-top-style: var(---border-style-top, solid) !important;
}

s-skeleton:is([b-style-b], [border-style-bottom]) > * {
  border-bottom-style: var(---border-style-bottom, solid) !important;
}

s-skeleton:is([b-style-l], [border-style-left]) > * {
  border-left-style: var(---border-style-left, solid) !important;
}

s-skeleton:is([b-style-r], [border-style-right]) > * {
  border-right-style: var(---border-style-right, solid) !important;
}

s-skeleton:is([i], [inset]) > * {
  inset: var(---inset, 8px) !important;
}

s-skeleton:is([i-t], [inset-top]) > * {
  top: var(---inset-top, 8px) !important;
}

s-skeleton:is([i-b], [inset-bottom]) > * {
  bottom: var(---inset-bottom, 8px) !important;
}

s-skeleton:is([i-l], [inset-left]) > * {
  left: var(---inset-left, 8px) !important;
}

s-skeleton:is([i-r], [inset-right]) > * {
  right: var(---inset-right, 8px) !important;
}

s-skeleton:is([m], [margin]) > * {
  margin: var(---margin, 8px) !important;
}

s-skeleton:is([m-t], [margin-top]) > * {
  margin-top: var(---margin-top, 8px) !important;
}

s-skeleton:is([m-b], [margin-bottom]) > * {
  margin-bottom: var(---margin-bottom, 8px) !important;
}

s-skeleton:is([m-l], [margin-left]) > * {
  margin-left: var(---margin-left, 8px) !important;
}

s-skeleton:is([m-r], [margin-right]) > * {
  margin-right: var(---margin-right, 8px) !important;
}

s-skeleton:is([p], [padding]) > * {
  padding: var(---padding, 8px) !important;
}

s-skeleton:is([p-t], [padding-top]) > * {
  padding-top: var(---padding-top, 8px) !important;
}

s-skeleton:is([p-b], [padding-bottom]) > * {
  padding-bottom: var(---padding-bottom, 8px) !important;
}

s-skeleton:is([p-l], [padding-left]) > * {
  padding-left: var(---padding-left, 8px) !important;
}

s-skeleton:is([p-r], [padding-right]) > * {
  padding-right: var(---padding-right, 8px) !important;
}

s-skeleton:is([child-layout="row"], [child-layout="column"]) > * {
  display: flex;
  flex-direction: var(---child-layout, row) !important;
}

s-skeleton:is([child-layout="grid"], [child-columns]) > * {
  display: grid;
  grid-template-columns: var(---child-columns, 1fr 1fr 1fr);
}

s-skeleton[child-gap] > * {
  gap: var(---child-gap, 8px) !important;
}

s-skeleton[child-align] > * {
  align-items: var(---child-align, center) !important;
}

s-skeleton[child-justify] > * {
  justify-content: var(---child-justify, center) !important;
}

s-skeleton[child-overflow] > * {
  flex-wrap: var(---child-overflow, nowrap) !important;
}

s-skeleton[self-align] > * {
  align-self: var(---self-align, center) !important;
}

s-skeleton[flex] > * {
  flex: var(---flex, 1) !important;
}

s-skeleton[grow] > * {
  flex-grow: var(---grow, 1) !important;
}

s-skeleton[shrink] > * {
  flex-shrink: var(---shrink, 1) !important;
}

s-skeleton[order] > * {
  order: var(---order, 0) !important;
}

s-skeleton[fill] path > * {
  fill: var(---fill, currentColor) !important;
}

s-skeleton[stroke] path > * {
  stroke: var(---stroke, currentColor) !important;
}

s-skeleton[stroke-width] path > * {
  stroke-width: var(---stroke-width, 1) !important;
}

s-skeleton[visible] > * {
  visibility: var(---visible, visible) !important;
}

s-skeleton[interactable] > * {
  pointer-events: var(---interactable, auto) !important;
}

s-skeleton[interactable="none"] > * {
  cursor: default;
}

s-skeleton[selectable] > * {
  user-select: var(---selectable, auto) !important;
}

[selectable=""],
[selectable="auto"],
s-skeleton[selectable="all"] > * {
  cursor: text;
}

s-skeleton[cursor] > * {
  cursor: var(---cursor, auto) !important;
}

s-skeleton[text-font] > * {
  font-family: var(---text-font, monospace) !important;
}

s-skeleton[text-size] > * {
  font-size: var(---text-size, 1rem) !important;
}

s-skeleton[text-size="2xs"] > * {
  line-height: var(---theme-text-2xs-line-height, 1.5);
}

s-skeleton[text-size="xs"] > * {
  line-height: var(---theme-text-xs-line-height, 1.5);
}

s-skeleton[text-size="sm"] > * {
  line-height: var(---theme-text-sm-line-height, 1.5);
}

s-skeleton[text-size="md"] > * {
  line-height: var(---theme-text-md-line-height, 1.5);
}

s-skeleton[text-size="lg"] > * {
  line-height: var(---theme-text-lg-line-height, 1.5);
}

s-skeleton[text-size="xl"] > * {
  line-height: var(---theme-text-xl-line-height, 1.5);
}

s-skeleton[text-size="2xl"] > * {
  line-height: var(---theme-text-2xl-line-height, 1.5);
}

s-skeleton[text-size="3xl"] > * {
  line-height: var(---theme-text-3xl-line-height, 1.5);
}

s-skeleton[text-size="4xl"] > * {
  line-height: var(---theme-text-4xl-line-height, 1.5);
}

s-skeleton[text-size="5xl"] > * {
  line-height: var(---theme-text-5xl-line-height, 1.5);
}

s-skeleton[text-size="6xl"] > * {
  line-height: var(---theme-text-6xl-line-height, 1.5);
}

s-skeleton[text-size="7xl"] > * {
  line-height: var(---theme-text-7xl-line-height, 1.5);
}

s-skeleton[text-size="8xl"] > * {
  line-height: var(---theme-text-8xl-line-height, 1.5);
}

s-skeleton[text-size="9xl"] > * {
  line-height: var(---theme-text-9xl-line-height, 1.5);
}

s-skeleton[text-leading] > * {
  line-height: var(---text-leading, 1.5) !important;
}

s-skeleton[text-tracking] > * {
  letter-spacing: var(---text-tracking, 1.5) !important;
}

s-skeleton[text-weight] > * {
  font-weight: var(---text-weight, 600) !important;
}

s-skeleton[text-style] > * {
  font-style: var(---text-style, italic) !important;
}

s-skeleton[text-decoration-line] > * {
  text-decoration-line: var(---text-decoration-line, underline) !important;
}

s-skeleton[text-decoration-color] > * {
  text-decoration-color: var(---text-decoration-color, currentColor) !important;
}

s-skeleton[text-decoration-thickness] > * {
  text-decoration-thickness: var(---text-decoration-thickness, auto) !important;
}

s-skeleton[text-underline-offset] > * {
  text-underline-offset: var(---text-underline-offset, 4px) !important;
}

s-skeleton[text-case] > * {
  text-transform: var(---text-case, uppercase) !important;
}

s-skeleton[text-align] > * {
  text-align: var(---text-align, center) !important;
}

s-skeleton[text-overflow] > * {
  text-overflow: var(---text-overflow, clip) !important;
}

s-skeleton[text-overflow=""] > * {
  white-space: nowrap;
}

s-skeleton[text-overflow="wrap"] > * {
  white-space: break-spaces;
}

s-skeleton[text-overflow="visible"] > * {
  white-space: nowrap;
}

s-skeleton[text-overflow="clip"] > * {
  white-space: nowrap;
}

s-skeleton[text-overflow="ellipsis"] > * {
  overflow: hidden;
  white-space: nowrap;
}

s-skeleton[text-whitespace] > * {
  white-space: var(---text-whitespace, normal) !important;
}

s-skeleton[text-color] > * {
  color: var(---text-color, white) !important;
}

s-skeleton[text-stroke] > * {
  text-shadow: var(---text-stroke) !important;
}

s-skeleton:is([bg-color], [background-color]) > * {
  background-color: var(---background-color) !important;
}

s-skeleton:is([bg-image], [background-image]) > * {
  background-image: var(---background-image, none) !important;
}

s-skeleton:is([bg-repeat], [background-repeat]) > * {
  background-repeat: var(---background-repeat, repeat) !important;
}

s-skeleton:is([bg-align], [background-align]) > * {
  background-position: var(---background-align, center) !important;
}

s-skeleton:is([bg-fit], [background-fit]) > * {
  background-size: var(---background-fit, contain) !important;
}

s-skeleton[clip] > * {
  clip-path: var(---clip, circle(50%)) !important;
}

s-skeleton[filter] > * {
  filter: var(---filter, none) !important;
}

s-skeleton[backdrop-filter] > * {
  backdrop-filter: var(---backdrop-filter, none) !important;
}

s-skeleton[blend] > * {
  mix-blend-mode: var(---blend, normal) !important;
}

s-skeleton[shadow] > * {
  box-shadow: var(
    ---shadow,
    0 1px 2px hsl(0 0% 0% / 30%),
    0 1px 3px hsl(0 0% 0% / 15%)
  ) !important;
}

s-skeleton[shadow-inset] > * {
  box-shadow: var(
    ---shadow-inset,
    inset 0 1px 2px hsl(0 0% 0% / 30%),
    inset 0 1px 3px hsl(0 0% 0% / 15%)
  ) !important;
}

s-skeleton[ring] > * {
  box-shadow: var(---ring, 0 0 0 2px currentColor) !important;
  outline: none !important;
}

s-skeleton[opacity] > * {
  opacity: var(---opacity, 1) !important;
}

s-skeleton[translate] > * {
  translate: var(---translate, none) !important;
}

s-skeleton[rotate] > * {
  rotate: var(---rotate, none) !important;
}

s-skeleton[scale] > * {
  scale: var(---scale, none) !important;
}

s-skeleton[pivot] > * {
  transform-origin: var(---pivot, left) !important;
}

s-skeleton[transition-delay] > * {
  transition-delay: var(---transition-delay, 100ms) !important;
}

s-skeleton[transition-duration] > * {
  transition-duration: var(---transition-duration, 100ms) !important;
}

s-skeleton[transition-easing] > * {
  transition-timing-function: var(---transition-easing, ease) !important;
}

s-skeleton[animation] > * {
  animation: var(---animation, var(---theme-animation-bounce)) !important;
}

s-skeleton[mask] > * {
  ---theme-mask-angled-corner: conic-gradient(
        from -45deg at var(---corner, 8px) var(---corner, 8px),
        #0000 25%,
        #000 0
      )
      calc(-1 * var(---corner, 8px)) 0 /100% 51% repeat-x,
    conic-gradient(
        from 135deg at var(---corner, 8px) calc(100% - var(---corner, 8px)),
        #0000 25%,
        #000 0
      )
      calc(-1 * var(---corner, 8px)) 100%/100% 51% repeat-x !important;
  ---theme-mask-scooped-corner: radial-gradient(
      var(---corner, 8px) at var(---corner, 8px) var(---corner, 8px),
      #0000 99%,
      #000
    )
    calc(-1 * var(---corner, 8px)) calc(-1 * var(---corner, 8px)) !important;
  ---theme-mask-notched-corner: conic-gradient(
      at calc(2 * var(---corner, 8px)) calc(2 * var(---corner, 8px)),
      #000 75%,
      #0000 0
    )
    calc(-1 * var(---corner, 8px)) calc(-1 * var(---corner, 8px)) !important;
  background-color: transparent !important;
  background-image: none !important;
}

s-skeleton[mask]::before > * {
  /* Apply mask to a pseudo-element so that drop-shadow filters applied to the root element will match the shape of the mask */
  position: absolute !important;
  inset: 0 !important;
  content: "" !important;
  background-image: var(---background-image, none) !important;
  background-color: var(---background-color) !important;
  -webkit-mask: var(---mask, none) !important;
  mask: var(---mask, none) !important;
}

s-skeleton[content-visibility] > * {
  content-visibility: var(---content-visibility, auto);
}

s-skeleton[contain-intrinsic-size] > * {
  contain-intrinsic-size: var(---contain-intrinsic-size, none);
}

s-skeleton {
  display: contents;
  ---color: var(---theme-color-fg-05);
  ---sheen-color: var(---theme-color-fg-15);
  ---width-min: 40px;
  ---grow: 0;
  ---shrink: 0;
  ---background-fit: 400% 100%;
  ---corner: 9999px;
}

s-skeleton > .root {
  ---background-gradient: linear-gradient(
    270deg,
    var(---sheen-color),
    var(---color),
    var(---color),
    var(---sheen-color)
  );
  display: flex;
  min-width: var(---width-min);
  width: var(---width);
  flex-grow: var(---grow);
  flex-shrink: var(---shrink);
  background-size: var(---background-fit);
  background-image: var(---background-gradient);
  border-radius: var(---corner);
  color: transparent;
  animation: var(---animation, var(---theme-animation-sheen));
  will-change: transform, opacity;
}

s-badge* > * {
  transition-property: opacity, translate, rotate, scale, transform, filter,
    backdrop-filter, clip-path, mix-blend-mode, box-shadow, color,
    background-color, border-color, text-decoration-color, fill, stroke;
}

s-badge[display] > * {
  display: var(---display, flex) !important;
}

s-badge[position] > * {
  position: var(---position, absolute) !important;
}

s-badge[position="sticky-top"] > * {
  inset: 0 0 auto 0;
  z-index: 1;
}

s-badge[position="sticky-bottom"] > * {
  inset: auto 0 0 0;
  z-index: 1;
}

s-badge[position="sticky-left"] > * {
  inset: 0 auto 0 0;
  z-index: 1;
}

s-badge[position="sticky-right"] > * {
  inset: 0 0 0 auto;
  z-index: 1;
}

s-badge[position="fixed-top"] > * {
  inset: 0 0 auto 0;
  z-index: 1;
}

s-badge[position="fixed-bottom"] > * {
  inset: auto 0 0 0;
  z-index: 1;
}

s-badge[position="fixed-left"] > * {
  inset: 0 auto 0 0;
  z-index: 1;
}

s-badge[position="fixed-right"] > * {
  inset: 0 0 0 auto;
  z-index: 1;
}

s-badge[aspect] > * {
  aspect-ratio: var(---aspect, 1) !important;
}

s-badge[overflow] > * {
  overflow: var(---overflow, scroll) !important;
}

s-badge[overflow-x] > * {
  overflow-x: var(---overflow-x, scroll) !important;
}

s-badge[overflow-y] > * {
  overflow-y: var(---overflow-y, scroll) !important;
}

s-badge[z] > * {
  z-index: var(---z, 1) !important;
}

s-badge:is([w], [width]) > * {
  width: var(---width, 100%) !important;
}

s-badge:is([w-min], [width-min]) > * {
  min-width: var(---width-min, 0) !important;
}

s-badge:is([w-max], [width-max]) > * {
  max-width: var(---width-max, 100%) !important;
}

s-badge:is([h], [height]) > * {
  height: var(---height, 100%) !important;
}

s-badge:is([h-min], [height-min]) > * {
  min-height: var(---height-min, 0) !important;
}

s-badge:is([h-max], [height-max]) > * {
  max-height: var(---height-max, 100%) !important;
}

s-badge:is([c], [corner]) > * {
  border-radius: var(---corner, 8px) !important;
}

s-badge:is([c-tl], [corner-top-left]) > * {
  border-top-left-radius: var(---corner-top-left, 8px) !important;
}

s-badge:is([c-tr], [corner-top-right]) > * {
  border-top-right-radius: var(---corner-top-right, 8px) !important;
}

s-badge:is([c-bl], [corner-bottom-left]) > * {
  border-bottom-left-radius: var(---corner-bottom-left, 8px) !important;
}

s-badge:is([c-br], [corner-bottom-right]) > * {
  border-bottom-right-radius: var(---corner-bottom-right, 8px) !important;
}

s-badge:is([o-color], [outline-color]) > * {
  outline-style: solid;
  outline-color: var(---outline-color, hsl(0 100% 100% / 50%)) !important;
}

s-badge:is([o-width], [outline-width]) > * {
  outline-style: solid;
  outline-width: var(---outline-width, 8px) !important;
}

s-badge:is([o-style], [outline-style]) > * {
  outline-style: var(---outline-style, solid) !important;
}

s-badge:is([b-color], [border-color]) > * {
  border-style: solid;
  border-color: var(---border-color, currentColor) !important;
}

s-badge:is([b-color-t], [border-color-top]) > * {
  border-style: solid;
  border-top-color: var(---border-color-top, currentColor) !important;
}

s-badge:is([b-color-b], [border-color-bottom]) > * {
  border-style: solid;
  border-bottom-color: var(---border-color-bottom, currentColor) !important;
}

s-badge:is([b-color-l], [border-color-left]) > * {
  border-style: solid;
  border-left-color: var(---border-color-left, currentColor) !important;
}

s-badge:is([b-color-r], [border-color-right]) > * {
  border-style: solid;
  border-right-color: var(---border-color-right, currentColor) !important;
}

s-badge:is([b-width], [border-width]) > * {
  border-style: solid;
  border-width: var(---border-width, 8px) !important;
}

s-badge:is([b-width-t], [border-width-top]) > * {
  border-style: solid;
  border-top-width: var(---border-width-top, 8px) !important;
}

s-badge:is([b-width-b], [border-width-bottom]) > * {
  border-style: solid;
  border-bottom-width: var(---border-width-bottom, 8px) !important;
}

s-badge:is([b-width-l], [border-width-left]) > * {
  border-style: solid;
  border-left-width: var(---border-width-left, 8px) !important;
}

s-badge:is([b-width-r], [border-width-right]) > * {
  border-style: solid;
  border-right-width: var(---border-width-right, 8px) !important;
}

s-badge:is([b-style], [border-style]) > * {
  border-style: var(---border-style, solid) !important;
}

s-badge:is([b-style-t], [border-style-top]) > * {
  border-top-style: var(---border-style-top, solid) !important;
}

s-badge:is([b-style-b], [border-style-bottom]) > * {
  border-bottom-style: var(---border-style-bottom, solid) !important;
}

s-badge:is([b-style-l], [border-style-left]) > * {
  border-left-style: var(---border-style-left, solid) !important;
}

s-badge:is([b-style-r], [border-style-right]) > * {
  border-right-style: var(---border-style-right, solid) !important;
}

s-badge:is([i], [inset]) > * {
  inset: var(---inset, 8px) !important;
}

s-badge:is([i-t], [inset-top]) > * {
  top: var(---inset-top, 8px) !important;
}

s-badge:is([i-b], [inset-bottom]) > * {
  bottom: var(---inset-bottom, 8px) !important;
}

s-badge:is([i-l], [inset-left]) > * {
  left: var(---inset-left, 8px) !important;
}

s-badge:is([i-r], [inset-right]) > * {
  right: var(---inset-right, 8px) !important;
}

s-badge:is([m], [margin]) > * {
  margin: var(---margin, 8px) !important;
}

s-badge:is([m-t], [margin-top]) > * {
  margin-top: var(---margin-top, 8px) !important;
}

s-badge:is([m-b], [margin-bottom]) > * {
  margin-bottom: var(---margin-bottom, 8px) !important;
}

s-badge:is([m-l], [margin-left]) > * {
  margin-left: var(---margin-left, 8px) !important;
}

s-badge:is([m-r], [margin-right]) > * {
  margin-right: var(---margin-right, 8px) !important;
}

s-badge:is([p], [padding]) > * {
  padding: var(---padding, 8px) !important;
}

s-badge:is([p-t], [padding-top]) > * {
  padding-top: var(---padding-top, 8px) !important;
}

s-badge:is([p-b], [padding-bottom]) > * {
  padding-bottom: var(---padding-bottom, 8px) !important;
}

s-badge:is([p-l], [padding-left]) > * {
  padding-left: var(---padding-left, 8px) !important;
}

s-badge:is([p-r], [padding-right]) > * {
  padding-right: var(---padding-right, 8px) !important;
}

s-badge:is([child-layout="row"], [child-layout="column"]) > * {
  display: flex;
  flex-direction: var(---child-layout, row) !important;
}

s-badge:is([child-layout="grid"], [child-columns]) > * {
  display: grid;
  grid-template-columns: var(---child-columns, 1fr 1fr 1fr);
}

s-badge[child-gap] > * {
  gap: var(---child-gap, 8px) !important;
}

s-badge[child-align] > * {
  align-items: var(---child-align, center) !important;
}

s-badge[child-justify] > * {
  justify-content: var(---child-justify, center) !important;
}

s-badge[child-overflow] > * {
  flex-wrap: var(---child-overflow, nowrap) !important;
}

s-badge[self-align] > * {
  align-self: var(---self-align, center) !important;
}

s-badge[flex] > * {
  flex: var(---flex, 1) !important;
}

s-badge[grow] > * {
  flex-grow: var(---grow, 1) !important;
}

s-badge[shrink] > * {
  flex-shrink: var(---shrink, 1) !important;
}

s-badge[order] > * {
  order: var(---order, 0) !important;
}

s-badge[fill] path > * {
  fill: var(---fill, currentColor) !important;
}

s-badge[stroke] path > * {
  stroke: var(---stroke, currentColor) !important;
}

s-badge[stroke-width] path > * {
  stroke-width: var(---stroke-width, 1) !important;
}

s-badge[visible] > * {
  visibility: var(---visible, visible) !important;
}

s-badge[interactable] > * {
  pointer-events: var(---interactable, auto) !important;
}

s-badge[interactable="none"] > * {
  cursor: default;
}

s-badge[selectable] > * {
  user-select: var(---selectable, auto) !important;
}

[selectable=""],
[selectable="auto"],
s-badge[selectable="all"] > * {
  cursor: text;
}

s-badge[cursor] > * {
  cursor: var(---cursor, auto) !important;
}

s-badge[text-font] > * {
  font-family: var(---text-font, monospace) !important;
}

s-badge[text-size] > * {
  font-size: var(---text-size, 1rem) !important;
}

s-badge[text-size="2xs"] > * {
  line-height: var(---theme-text-2xs-line-height, 1.5);
}

s-badge[text-size="xs"] > * {
  line-height: var(---theme-text-xs-line-height, 1.5);
}

s-badge[text-size="sm"] > * {
  line-height: var(---theme-text-sm-line-height, 1.5);
}

s-badge[text-size="md"] > * {
  line-height: var(---theme-text-md-line-height, 1.5);
}

s-badge[text-size="lg"] > * {
  line-height: var(---theme-text-lg-line-height, 1.5);
}

s-badge[text-size="xl"] > * {
  line-height: var(---theme-text-xl-line-height, 1.5);
}

s-badge[text-size="2xl"] > * {
  line-height: var(---theme-text-2xl-line-height, 1.5);
}

s-badge[text-size="3xl"] > * {
  line-height: var(---theme-text-3xl-line-height, 1.5);
}

s-badge[text-size="4xl"] > * {
  line-height: var(---theme-text-4xl-line-height, 1.5);
}

s-badge[text-size="5xl"] > * {
  line-height: var(---theme-text-5xl-line-height, 1.5);
}

s-badge[text-size="6xl"] > * {
  line-height: var(---theme-text-6xl-line-height, 1.5);
}

s-badge[text-size="7xl"] > * {
  line-height: var(---theme-text-7xl-line-height, 1.5);
}

s-badge[text-size="8xl"] > * {
  line-height: var(---theme-text-8xl-line-height, 1.5);
}

s-badge[text-size="9xl"] > * {
  line-height: var(---theme-text-9xl-line-height, 1.5);
}

s-badge[text-leading] > * {
  line-height: var(---text-leading, 1.5) !important;
}

s-badge[text-tracking] > * {
  letter-spacing: var(---text-tracking, 1.5) !important;
}

s-badge[text-weight] > * {
  font-weight: var(---text-weight, 600) !important;
}

s-badge[text-style] > * {
  font-style: var(---text-style, italic) !important;
}

s-badge[text-decoration-line] > * {
  text-decoration-line: var(---text-decoration-line, underline) !important;
}

s-badge[text-decoration-color] > * {
  text-decoration-color: var(---text-decoration-color, currentColor) !important;
}

s-badge[text-decoration-thickness] > * {
  text-decoration-thickness: var(---text-decoration-thickness, auto) !important;
}

s-badge[text-underline-offset] > * {
  text-underline-offset: var(---text-underline-offset, 4px) !important;
}

s-badge[text-case] > * {
  text-transform: var(---text-case, uppercase) !important;
}

s-badge[text-align] > * {
  text-align: var(---text-align, center) !important;
}

s-badge[text-overflow] > * {
  text-overflow: var(---text-overflow, clip) !important;
}

s-badge[text-overflow=""] > * {
  white-space: nowrap;
}

s-badge[text-overflow="wrap"] > * {
  white-space: break-spaces;
}

s-badge[text-overflow="visible"] > * {
  white-space: nowrap;
}

s-badge[text-overflow="clip"] > * {
  white-space: nowrap;
}

s-badge[text-overflow="ellipsis"] > * {
  overflow: hidden;
  white-space: nowrap;
}

s-badge[text-whitespace] > * {
  white-space: var(---text-whitespace, normal) !important;
}

s-badge[text-color] > * {
  color: var(---text-color, white) !important;
}

s-badge[text-stroke] > * {
  text-shadow: var(---text-stroke) !important;
}

s-badge:is([bg-color], [background-color]) > * {
  background-color: var(---background-color) !important;
}

s-badge:is([bg-image], [background-image]) > * {
  background-image: var(---background-image, none) !important;
}

s-badge:is([bg-repeat], [background-repeat]) > * {
  background-repeat: var(---background-repeat, repeat) !important;
}

s-badge:is([bg-align], [background-align]) > * {
  background-position: var(---background-align, center) !important;
}

s-badge:is([bg-fit], [background-fit]) > * {
  background-size: var(---background-fit, contain) !important;
}

s-badge[clip] > * {
  clip-path: var(---clip, circle(50%)) !important;
}

s-badge[filter] > * {
  filter: var(---filter, none) !important;
}

s-badge[backdrop-filter] > * {
  backdrop-filter: var(---backdrop-filter, none) !important;
}

s-badge[blend] > * {
  mix-blend-mode: var(---blend, normal) !important;
}

s-badge[shadow] > * {
  box-shadow: var(
    ---shadow,
    0 1px 2px hsl(0 0% 0% / 30%),
    0 1px 3px hsl(0 0% 0% / 15%)
  ) !important;
}

s-badge[shadow-inset] > * {
  box-shadow: var(
    ---shadow-inset,
    inset 0 1px 2px hsl(0 0% 0% / 30%),
    inset 0 1px 3px hsl(0 0% 0% / 15%)
  ) !important;
}

s-badge[ring] > * {
  box-shadow: var(---ring, 0 0 0 2px currentColor) !important;
  outline: none !important;
}

s-badge[opacity] > * {
  opacity: var(---opacity, 1) !important;
}

s-badge[translate] > * {
  translate: var(---translate, none) !important;
}

s-badge[rotate] > * {
  rotate: var(---rotate, none) !important;
}

s-badge[scale] > * {
  scale: var(---scale, none) !important;
}

s-badge[pivot] > * {
  transform-origin: var(---pivot, left) !important;
}

s-badge[transition-delay] > * {
  transition-delay: var(---transition-delay, 100ms) !important;
}

s-badge[transition-duration] > * {
  transition-duration: var(---transition-duration, 100ms) !important;
}

s-badge[transition-easing] > * {
  transition-timing-function: var(---transition-easing, ease) !important;
}

s-badge[animation] > * {
  animation: var(---animation, var(---theme-animation-bounce)) !important;
}

s-badge[mask] > * {
  ---theme-mask-angled-corner: conic-gradient(
        from -45deg at var(---corner, 8px) var(---corner, 8px),
        #0000 25%,
        #000 0
      )
      calc(-1 * var(---corner, 8px)) 0 /100% 51% repeat-x,
    conic-gradient(
        from 135deg at var(---corner, 8px) calc(100% - var(---corner, 8px)),
        #0000 25%,
        #000 0
      )
      calc(-1 * var(---corner, 8px)) 100%/100% 51% repeat-x !important;
  ---theme-mask-scooped-corner: radial-gradient(
      var(---corner, 8px) at var(---corner, 8px) var(---corner, 8px),
      #0000 99%,
      #000
    )
    calc(-1 * var(---corner, 8px)) calc(-1 * var(---corner, 8px)) !important;
  ---theme-mask-notched-corner: conic-gradient(
      at calc(2 * var(---corner, 8px)) calc(2 * var(---corner, 8px)),
      #000 75%,
      #0000 0
    )
    calc(-1 * var(---corner, 8px)) calc(-1 * var(---corner, 8px)) !important;
  background-color: transparent !important;
  background-image: none !important;
}

s-badge[mask]::before > * {
  /* Apply mask to a pseudo-element so that drop-shadow filters applied to the root element will match the shape of the mask */
  position: absolute !important;
  inset: 0 !important;
  content: "" !important;
  background-image: var(---background-image, none) !important;
  background-color: var(---background-color) !important;
  -webkit-mask: var(---mask, none) !important;
  mask: var(---mask, none) !important;
}

s-badge[content-visibility] > * {
  content-visibility: var(---content-visibility, auto);
}

s-badge[contain-intrinsic-size] > * {
  contain-intrinsic-size: var(---contain-intrinsic-size, none);
}

s-badge {
  display: contents;
  ---overflow-x: clip;
  ---selectable: none;
  ---color: var(---theme-color-primary-60);
  ---text-color: var(---theme-color-neutral-0);
  ---child-align: center;
  ---child-justify: center;
  ---text-font: var(---theme-font-sans);
  ---text-size: var(---theme-text-2xs-font-size);
  ---text-leading: var(---theme-text-2xs-line-height);
  ---text-weight: 500;
  ---text-tracking: var(---theme-letter-spacing-md);
  ---text-wrap: nowrap;
  ---height: 24px;
  ---height-min: var(---height);
  ---border-color: var(---theme-color-neutral-0);
  ---border-width: 1px;
  ---corner: 9999px;
  ---padding-lr: 8px;
}

s-badge > .root {
  display: flex;
  cursor: inherit;
  overflow-x: var(---overflow-x);
  user-select: var(---selectable);
  background-color: var(---color);
  color: var(---text-color);
  align-items: var(---child-align);
  justify-content: var(---child-justify);
  min-height: var(---height-min);
  height: var(---height);
  font-family: var(---text-font);
  font-size: var(---text-size);
  line-height: var(---text-leading);
  font-weight: var(---text-weight);
  letter-spacing: var(---text-tracking);
  white-space: var(---text-wrap);
  border-style: solid;
  border-color: var(---border-color);
  border-width: var(---border-width);
  border-radius: var(---corner);
  padding-inline: var(---padding-lr);
  will-change: transform;
}

s-badge[float=""] > .root,
s-badge[float="right"] > .root {
  position: absolute;
  top: 0;
  right: 0;
  transform: translate(50%, -50%);
  pointer-events: none;
}

s-badge[float="left"] > .root {
  position: absolute;
  top: 0;
  left: 0;
  right: auto;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

s-collapsible* > * {
  transition-property: opacity, translate, rotate, scale, transform, filter,
    backdrop-filter, clip-path, mix-blend-mode, box-shadow, color,
    background-color, border-color, text-decoration-color, fill, stroke;
}

s-collapsible[display] > * {
  display: var(---display, flex) !important;
}

s-collapsible[position] > * {
  position: var(---position, absolute) !important;
}

s-collapsible[position="sticky-top"] > * {
  inset: 0 0 auto 0;
  z-index: 1;
}

s-collapsible[position="sticky-bottom"] > * {
  inset: auto 0 0 0;
  z-index: 1;
}

s-collapsible[position="sticky-left"] > * {
  inset: 0 auto 0 0;
  z-index: 1;
}

s-collapsible[position="sticky-right"] > * {
  inset: 0 0 0 auto;
  z-index: 1;
}

s-collapsible[position="fixed-top"] > * {
  inset: 0 0 auto 0;
  z-index: 1;
}

s-collapsible[position="fixed-bottom"] > * {
  inset: auto 0 0 0;
  z-index: 1;
}

s-collapsible[position="fixed-left"] > * {
  inset: 0 auto 0 0;
  z-index: 1;
}

s-collapsible[position="fixed-right"] > * {
  inset: 0 0 0 auto;
  z-index: 1;
}

s-collapsible[aspect] > * {
  aspect-ratio: var(---aspect, 1) !important;
}

s-collapsible[overflow] > * {
  overflow: var(---overflow, scroll) !important;
}

s-collapsible[overflow-x] > * {
  overflow-x: var(---overflow-x, scroll) !important;
}

s-collapsible[overflow-y] > * {
  overflow-y: var(---overflow-y, scroll) !important;
}

s-collapsible[z] > * {
  z-index: var(---z, 1) !important;
}

s-collapsible:is([w], [width]) > * {
  width: var(---width, 100%) !important;
}

s-collapsible:is([w-min], [width-min]) > * {
  min-width: var(---width-min, 0) !important;
}

s-collapsible:is([w-max], [width-max]) > * {
  max-width: var(---width-max, 100%) !important;
}

s-collapsible:is([h], [height]) > * {
  height: var(---height, 100%) !important;
}

s-collapsible:is([h-min], [height-min]) > * {
  min-height: var(---height-min, 0) !important;
}

s-collapsible:is([h-max], [height-max]) > * {
  max-height: var(---height-max, 100%) !important;
}

s-collapsible:is([c], [corner]) > * {
  border-radius: var(---corner, 8px) !important;
}

s-collapsible:is([c-tl], [corner-top-left]) > * {
  border-top-left-radius: var(---corner-top-left, 8px) !important;
}

s-collapsible:is([c-tr], [corner-top-right]) > * {
  border-top-right-radius: var(---corner-top-right, 8px) !important;
}

s-collapsible:is([c-bl], [corner-bottom-left]) > * {
  border-bottom-left-radius: var(---corner-bottom-left, 8px) !important;
}

s-collapsible:is([c-br], [corner-bottom-right]) > * {
  border-bottom-right-radius: var(---corner-bottom-right, 8px) !important;
}

s-collapsible:is([o-color], [outline-color]) > * {
  outline-style: solid;
  outline-color: var(---outline-color, hsl(0 100% 100% / 50%)) !important;
}

s-collapsible:is([o-width], [outline-width]) > * {
  outline-style: solid;
  outline-width: var(---outline-width, 8px) !important;
}

s-collapsible:is([o-style], [outline-style]) > * {
  outline-style: var(---outline-style, solid) !important;
}

s-collapsible:is([b-color], [border-color]) > * {
  border-style: solid;
  border-color: var(---border-color, currentColor) !important;
}

s-collapsible:is([b-color-t], [border-color-top]) > * {
  border-style: solid;
  border-top-color: var(---border-color-top, currentColor) !important;
}

s-collapsible:is([b-color-b], [border-color-bottom]) > * {
  border-style: solid;
  border-bottom-color: var(---border-color-bottom, currentColor) !important;
}

s-collapsible:is([b-color-l], [border-color-left]) > * {
  border-style: solid;
  border-left-color: var(---border-color-left, currentColor) !important;
}

s-collapsible:is([b-color-r], [border-color-right]) > * {
  border-style: solid;
  border-right-color: var(---border-color-right, currentColor) !important;
}

s-collapsible:is([b-width], [border-width]) > * {
  border-style: solid;
  border-width: var(---border-width, 8px) !important;
}

s-collapsible:is([b-width-t], [border-width-top]) > * {
  border-style: solid;
  border-top-width: var(---border-width-top, 8px) !important;
}

s-collapsible:is([b-width-b], [border-width-bottom]) > * {
  border-style: solid;
  border-bottom-width: var(---border-width-bottom, 8px) !important;
}

s-collapsible:is([b-width-l], [border-width-left]) > * {
  border-style: solid;
  border-left-width: var(---border-width-left, 8px) !important;
}

s-collapsible:is([b-width-r], [border-width-right]) > * {
  border-style: solid;
  border-right-width: var(---border-width-right, 8px) !important;
}

s-collapsible:is([b-style], [border-style]) > * {
  border-style: var(---border-style, solid) !important;
}

s-collapsible:is([b-style-t], [border-style-top]) > * {
  border-top-style: var(---border-style-top, solid) !important;
}

s-collapsible:is([b-style-b], [border-style-bottom]) > * {
  border-bottom-style: var(---border-style-bottom, solid) !important;
}

s-collapsible:is([b-style-l], [border-style-left]) > * {
  border-left-style: var(---border-style-left, solid) !important;
}

s-collapsible:is([b-style-r], [border-style-right]) > * {
  border-right-style: var(---border-style-right, solid) !important;
}

s-collapsible:is([i], [inset]) > * {
  inset: var(---inset, 8px) !important;
}

s-collapsible:is([i-t], [inset-top]) > * {
  top: var(---inset-top, 8px) !important;
}

s-collapsible:is([i-b], [inset-bottom]) > * {
  bottom: var(---inset-bottom, 8px) !important;
}

s-collapsible:is([i-l], [inset-left]) > * {
  left: var(---inset-left, 8px) !important;
}

s-collapsible:is([i-r], [inset-right]) > * {
  right: var(---inset-right, 8px) !important;
}

s-collapsible:is([m], [margin]) > * {
  margin: var(---margin, 8px) !important;
}

s-collapsible:is([m-t], [margin-top]) > * {
  margin-top: var(---margin-top, 8px) !important;
}

s-collapsible:is([m-b], [margin-bottom]) > * {
  margin-bottom: var(---margin-bottom, 8px) !important;
}

s-collapsible:is([m-l], [margin-left]) > * {
  margin-left: var(---margin-left, 8px) !important;
}

s-collapsible:is([m-r], [margin-right]) > * {
  margin-right: var(---margin-right, 8px) !important;
}

s-collapsible:is([p], [padding]) > * {
  padding: var(---padding, 8px) !important;
}

s-collapsible:is([p-t], [padding-top]) > * {
  padding-top: var(---padding-top, 8px) !important;
}

s-collapsible:is([p-b], [padding-bottom]) > * {
  padding-bottom: var(---padding-bottom, 8px) !important;
}

s-collapsible:is([p-l], [padding-left]) > * {
  padding-left: var(---padding-left, 8px) !important;
}

s-collapsible:is([p-r], [padding-right]) > * {
  padding-right: var(---padding-right, 8px) !important;
}

s-collapsible:is([child-layout="row"], [child-layout="column"]) > * {
  display: flex;
  flex-direction: var(---child-layout, row) !important;
}

s-collapsible:is([child-layout="grid"], [child-columns]) > * {
  display: grid;
  grid-template-columns: var(---child-columns, 1fr 1fr 1fr);
}

s-collapsible[child-gap] > * {
  gap: var(---child-gap, 8px) !important;
}

s-collapsible[child-align] > * {
  align-items: var(---child-align, center) !important;
}

s-collapsible[child-justify] > * {
  justify-content: var(---child-justify, center) !important;
}

s-collapsible[child-overflow] > * {
  flex-wrap: var(---child-overflow, nowrap) !important;
}

s-collapsible[self-align] > * {
  align-self: var(---self-align, center) !important;
}

s-collapsible[flex] > * {
  flex: var(---flex, 1) !important;
}

s-collapsible[grow] > * {
  flex-grow: var(---grow, 1) !important;
}

s-collapsible[shrink] > * {
  flex-shrink: var(---shrink, 1) !important;
}

s-collapsible[order] > * {
  order: var(---order, 0) !important;
}

s-collapsible[fill] path > * {
  fill: var(---fill, currentColor) !important;
}

s-collapsible[stroke] path > * {
  stroke: var(---stroke, currentColor) !important;
}

s-collapsible[stroke-width] path > * {
  stroke-width: var(---stroke-width, 1) !important;
}

s-collapsible[visible] > * {
  visibility: var(---visible, visible) !important;
}

s-collapsible[interactable] > * {
  pointer-events: var(---interactable, auto) !important;
}

s-collapsible[interactable="none"] > * {
  cursor: default;
}

s-collapsible[selectable] > * {
  user-select: var(---selectable, auto) !important;
}

[selectable=""],
[selectable="auto"],
s-collapsible[selectable="all"] > * {
  cursor: text;
}

s-collapsible[cursor] > * {
  cursor: var(---cursor, auto) !important;
}

s-collapsible[text-font] > * {
  font-family: var(---text-font, monospace) !important;
}

s-collapsible[text-size] > * {
  font-size: var(---text-size, 1rem) !important;
}

s-collapsible[text-size="2xs"] > * {
  line-height: var(---theme-text-2xs-line-height, 1.5);
}

s-collapsible[text-size="xs"] > * {
  line-height: var(---theme-text-xs-line-height, 1.5);
}

s-collapsible[text-size="sm"] > * {
  line-height: var(---theme-text-sm-line-height, 1.5);
}

s-collapsible[text-size="md"] > * {
  line-height: var(---theme-text-md-line-height, 1.5);
}

s-collapsible[text-size="lg"] > * {
  line-height: var(---theme-text-lg-line-height, 1.5);
}

s-collapsible[text-size="xl"] > * {
  line-height: var(---theme-text-xl-line-height, 1.5);
}

s-collapsible[text-size="2xl"] > * {
  line-height: var(---theme-text-2xl-line-height, 1.5);
}

s-collapsible[text-size="3xl"] > * {
  line-height: var(---theme-text-3xl-line-height, 1.5);
}

s-collapsible[text-size="4xl"] > * {
  line-height: var(---theme-text-4xl-line-height, 1.5);
}

s-collapsible[text-size="5xl"] > * {
  line-height: var(---theme-text-5xl-line-height, 1.5);
}

s-collapsible[text-size="6xl"] > * {
  line-height: var(---theme-text-6xl-line-height, 1.5);
}

s-collapsible[text-size="7xl"] > * {
  line-height: var(---theme-text-7xl-line-height, 1.5);
}

s-collapsible[text-size="8xl"] > * {
  line-height: var(---theme-text-8xl-line-height, 1.5);
}

s-collapsible[text-size="9xl"] > * {
  line-height: var(---theme-text-9xl-line-height, 1.5);
}

s-collapsible[text-leading] > * {
  line-height: var(---text-leading, 1.5) !important;
}

s-collapsible[text-tracking] > * {
  letter-spacing: var(---text-tracking, 1.5) !important;
}

s-collapsible[text-weight] > * {
  font-weight: var(---text-weight, 600) !important;
}

s-collapsible[text-style] > * {
  font-style: var(---text-style, italic) !important;
}

s-collapsible[text-decoration-line] > * {
  text-decoration-line: var(---text-decoration-line, underline) !important;
}

s-collapsible[text-decoration-color] > * {
  text-decoration-color: var(---text-decoration-color, currentColor) !important;
}

s-collapsible[text-decoration-thickness] > * {
  text-decoration-thickness: var(---text-decoration-thickness, auto) !important;
}

s-collapsible[text-underline-offset] > * {
  text-underline-offset: var(---text-underline-offset, 4px) !important;
}

s-collapsible[text-case] > * {
  text-transform: var(---text-case, uppercase) !important;
}

s-collapsible[text-align] > * {
  text-align: var(---text-align, center) !important;
}

s-collapsible[text-overflow] > * {
  text-overflow: var(---text-overflow, clip) !important;
}

s-collapsible[text-overflow=""] > * {
  white-space: nowrap;
}

s-collapsible[text-overflow="wrap"] > * {
  white-space: break-spaces;
}

s-collapsible[text-overflow="visible"] > * {
  white-space: nowrap;
}

s-collapsible[text-overflow="clip"] > * {
  white-space: nowrap;
}

s-collapsible[text-overflow="ellipsis"] > * {
  overflow: hidden;
  white-space: nowrap;
}

s-collapsible[text-whitespace] > * {
  white-space: var(---text-whitespace, normal) !important;
}

s-collapsible[text-color] > * {
  color: var(---text-color, white) !important;
}

s-collapsible[text-stroke] > * {
  text-shadow: var(---text-stroke) !important;
}

s-collapsible:is([bg-color], [background-color]) > * {
  background-color: var(---background-color) !important;
}

s-collapsible:is([bg-image], [background-image]) > * {
  background-image: var(---background-image, none) !important;
}

s-collapsible:is([bg-repeat], [background-repeat]) > * {
  background-repeat: var(---background-repeat, repeat) !important;
}

s-collapsible:is([bg-align], [background-align]) > * {
  background-position: var(---background-align, center) !important;
}

s-collapsible:is([bg-fit], [background-fit]) > * {
  background-size: var(---background-fit, contain) !important;
}

s-collapsible[clip] > * {
  clip-path: var(---clip, circle(50%)) !important;
}

s-collapsible[filter] > * {
  filter: var(---filter, none) !important;
}

s-collapsible[backdrop-filter] > * {
  backdrop-filter: var(---backdrop-filter, none) !important;
}

s-collapsible[blend] > * {
  mix-blend-mode: var(---blend, normal) !important;
}

s-collapsible[shadow] > * {
  box-shadow: var(
    ---shadow,
    0 1px 2px hsl(0 0% 0% / 30%),
    0 1px 3px hsl(0 0% 0% / 15%)
  ) !important;
}

s-collapsible[shadow-inset] > * {
  box-shadow: var(
    ---shadow-inset,
    inset 0 1px 2px hsl(0 0% 0% / 30%),
    inset 0 1px 3px hsl(0 0% 0% / 15%)
  ) !important;
}

s-collapsible[ring] > * {
  box-shadow: var(---ring, 0 0 0 2px currentColor) !important;
  outline: none !important;
}

s-collapsible[opacity] > * {
  opacity: var(---opacity, 1) !important;
}

s-collapsible[translate] > * {
  translate: var(---translate, none) !important;
}

s-collapsible[rotate] > * {
  rotate: var(---rotate, none) !important;
}

s-collapsible[scale] > * {
  scale: var(---scale, none) !important;
}

s-collapsible[pivot] > * {
  transform-origin: var(---pivot, left) !important;
}

s-collapsible[transition-delay] > * {
  transition-delay: var(---transition-delay, 100ms) !important;
}

s-collapsible[transition-duration] > * {
  transition-duration: var(---transition-duration, 100ms) !important;
}

s-collapsible[transition-easing] > * {
  transition-timing-function: var(---transition-easing, ease) !important;
}

s-collapsible[animation] > * {
  animation: var(---animation, var(---theme-animation-bounce)) !important;
}

s-collapsible[mask] > * {
  ---theme-mask-angled-corner: conic-gradient(
        from -45deg at var(---corner, 8px) var(---corner, 8px),
        #0000 25%,
        #000 0
      )
      calc(-1 * var(---corner, 8px)) 0 /100% 51% repeat-x,
    conic-gradient(
        from 135deg at var(---corner, 8px) calc(100% - var(---corner, 8px)),
        #0000 25%,
        #000 0
      )
      calc(-1 * var(---corner, 8px)) 100%/100% 51% repeat-x !important;
  ---theme-mask-scooped-corner: radial-gradient(
      var(---corner, 8px) at var(---corner, 8px) var(---corner, 8px),
      #0000 99%,
      #000
    )
    calc(-1 * var(---corner, 8px)) calc(-1 * var(---corner, 8px)) !important;
  ---theme-mask-notched-corner: conic-gradient(
      at calc(2 * var(---corner, 8px)) calc(2 * var(---corner, 8px)),
      #000 75%,
      #0000 0
    )
    calc(-1 * var(---corner, 8px)) calc(-1 * var(---corner, 8px)) !important;
  background-color: transparent !important;
  background-image: none !important;
}

s-collapsible[mask]::before > * {
  /* Apply mask to a pseudo-element so that drop-shadow filters applied to the root element will match the shape of the mask */
  position: absolute !important;
  inset: 0 !important;
  content: "" !important;
  background-image: var(---background-image, none) !important;
  background-color: var(---background-color) !important;
  -webkit-mask: var(---mask, none) !important;
  mask: var(---mask, none) !important;
}

s-collapsible[content-visibility] > * {
  content-visibility: var(---content-visibility, auto);
}

s-collapsible[contain-intrinsic-size] > * {
  contain-intrinsic-size: var(---contain-intrinsic-size, none);
}

s-collapsible {
  display: contents;
}

s-collapsible > .root {
  display: flex;
  flex-shrink: 0;
}

s-collapsible > .root * {
  filter: none;
}

s-input* > * {
  transition-property: opacity, translate, rotate, scale, transform, filter,
    backdrop-filter, clip-path, mix-blend-mode, box-shadow, color,
    background-color, border-color, text-decoration-color, fill, stroke;
}

s-input[display] > * {
  display: var(---display, flex) !important;
}

s-input[position] > * {
  position: var(---position, absolute) !important;
}

s-input[position="sticky-top"] > * {
  inset: 0 0 auto 0;
  z-index: 1;
}

s-input[position="sticky-bottom"] > * {
  inset: auto 0 0 0;
  z-index: 1;
}

s-input[position="sticky-left"] > * {
  inset: 0 auto 0 0;
  z-index: 1;
}

s-input[position="sticky-right"] > * {
  inset: 0 0 0 auto;
  z-index: 1;
}

s-input[position="fixed-top"] > * {
  inset: 0 0 auto 0;
  z-index: 1;
}

s-input[position="fixed-bottom"] > * {
  inset: auto 0 0 0;
  z-index: 1;
}

s-input[position="fixed-left"] > * {
  inset: 0 auto 0 0;
  z-index: 1;
}

s-input[position="fixed-right"] > * {
  inset: 0 0 0 auto;
  z-index: 1;
}

s-input[aspect] > * {
  aspect-ratio: var(---aspect, 1) !important;
}

s-input[overflow] > * {
  overflow: var(---overflow, scroll) !important;
}

s-input[overflow-x] > * {
  overflow-x: var(---overflow-x, scroll) !important;
}

s-input[overflow-y] > * {
  overflow-y: var(---overflow-y, scroll) !important;
}

s-input[z] > * {
  z-index: var(---z, 1) !important;
}

s-input:is([w], [width]) > * {
  width: var(---width, 100%) !important;
}

s-input:is([w-min], [width-min]) > * {
  min-width: var(---width-min, 0) !important;
}

s-input:is([w-max], [width-max]) > * {
  max-width: var(---width-max, 100%) !important;
}

s-input:is([h], [height]) > * {
  height: var(---height, 100%) !important;
}

s-input:is([h-min], [height-min]) > * {
  min-height: var(---height-min, 0) !important;
}

s-input:is([h-max], [height-max]) > * {
  max-height: var(---height-max, 100%) !important;
}

s-input:is([c], [corner]) > * {
  border-radius: var(---corner, 8px) !important;
}

s-input:is([c-tl], [corner-top-left]) > * {
  border-top-left-radius: var(---corner-top-left, 8px) !important;
}

s-input:is([c-tr], [corner-top-right]) > * {
  border-top-right-radius: var(---corner-top-right, 8px) !important;
}

s-input:is([c-bl], [corner-bottom-left]) > * {
  border-bottom-left-radius: var(---corner-bottom-left, 8px) !important;
}

s-input:is([c-br], [corner-bottom-right]) > * {
  border-bottom-right-radius: var(---corner-bottom-right, 8px) !important;
}

s-input:is([o-color], [outline-color]) > * {
  outline-style: solid;
  outline-color: var(---outline-color, hsl(0 100% 100% / 50%)) !important;
}

s-input:is([o-width], [outline-width]) > * {
  outline-style: solid;
  outline-width: var(---outline-width, 8px) !important;
}

s-input:is([o-style], [outline-style]) > * {
  outline-style: var(---outline-style, solid) !important;
}

s-input:is([b-color], [border-color]) > * {
  border-style: solid;
  border-color: var(---border-color, currentColor) !important;
}

s-input:is([b-color-t], [border-color-top]) > * {
  border-style: solid;
  border-top-color: var(---border-color-top, currentColor) !important;
}

s-input:is([b-color-b], [border-color-bottom]) > * {
  border-style: solid;
  border-bottom-color: var(---border-color-bottom, currentColor) !important;
}

s-input:is([b-color-l], [border-color-left]) > * {
  border-style: solid;
  border-left-color: var(---border-color-left, currentColor) !important;
}

s-input:is([b-color-r], [border-color-right]) > * {
  border-style: solid;
  border-right-color: var(---border-color-right, currentColor) !important;
}

s-input:is([b-width], [border-width]) > * {
  border-style: solid;
  border-width: var(---border-width, 8px) !important;
}

s-input:is([b-width-t], [border-width-top]) > * {
  border-style: solid;
  border-top-width: var(---border-width-top, 8px) !important;
}

s-input:is([b-width-b], [border-width-bottom]) > * {
  border-style: solid;
  border-bottom-width: var(---border-width-bottom, 8px) !important;
}

s-input:is([b-width-l], [border-width-left]) > * {
  border-style: solid;
  border-left-width: var(---border-width-left, 8px) !important;
}

s-input:is([b-width-r], [border-width-right]) > * {
  border-style: solid;
  border-right-width: var(---border-width-right, 8px) !important;
}

s-input:is([b-style], [border-style]) > * {
  border-style: var(---border-style, solid) !important;
}

s-input:is([b-style-t], [border-style-top]) > * {
  border-top-style: var(---border-style-top, solid) !important;
}

s-input:is([b-style-b], [border-style-bottom]) > * {
  border-bottom-style: var(---border-style-bottom, solid) !important;
}

s-input:is([b-style-l], [border-style-left]) > * {
  border-left-style: var(---border-style-left, solid) !important;
}

s-input:is([b-style-r], [border-style-right]) > * {
  border-right-style: var(---border-style-right, solid) !important;
}

s-input:is([i], [inset]) > * {
  inset: var(---inset, 8px) !important;
}

s-input:is([i-t], [inset-top]) > * {
  top: var(---inset-top, 8px) !important;
}

s-input:is([i-b], [inset-bottom]) > * {
  bottom: var(---inset-bottom, 8px) !important;
}

s-input:is([i-l], [inset-left]) > * {
  left: var(---inset-left, 8px) !important;
}

s-input:is([i-r], [inset-right]) > * {
  right: var(---inset-right, 8px) !important;
}

s-input:is([m], [margin]) > * {
  margin: var(---margin, 8px) !important;
}

s-input:is([m-t], [margin-top]) > * {
  margin-top: var(---margin-top, 8px) !important;
}

s-input:is([m-b], [margin-bottom]) > * {
  margin-bottom: var(---margin-bottom, 8px) !important;
}

s-input:is([m-l], [margin-left]) > * {
  margin-left: var(---margin-left, 8px) !important;
}

s-input:is([m-r], [margin-right]) > * {
  margin-right: var(---margin-right, 8px) !important;
}

s-input:is([p], [padding]) > * {
  padding: var(---padding, 8px) !important;
}

s-input:is([p-t], [padding-top]) > * {
  padding-top: var(---padding-top, 8px) !important;
}

s-input:is([p-b], [padding-bottom]) > * {
  padding-bottom: var(---padding-bottom, 8px) !important;
}

s-input:is([p-l], [padding-left]) > * {
  padding-left: var(---padding-left, 8px) !important;
}

s-input:is([p-r], [padding-right]) > * {
  padding-right: var(---padding-right, 8px) !important;
}

s-input:is([child-layout="row"], [child-layout="column"]) > * {
  display: flex;
  flex-direction: var(---child-layout, row) !important;
}

s-input:is([child-layout="grid"], [child-columns]) > * {
  display: grid;
  grid-template-columns: var(---child-columns, 1fr 1fr 1fr);
}

s-input[child-gap] > * {
  gap: var(---child-gap, 8px) !important;
}

s-input[child-align] > * {
  align-items: var(---child-align, center) !important;
}

s-input[child-justify] > * {
  justify-content: var(---child-justify, center) !important;
}

s-input[child-overflow] > * {
  flex-wrap: var(---child-overflow, nowrap) !important;
}

s-input[self-align] > * {
  align-self: var(---self-align, center) !important;
}

s-input[flex] > * {
  flex: var(---flex, 1) !important;
}

s-input[grow] > * {
  flex-grow: var(---grow, 1) !important;
}

s-input[shrink] > * {
  flex-shrink: var(---shrink, 1) !important;
}

s-input[order] > * {
  order: var(---order, 0) !important;
}

s-input[fill] path > * {
  fill: var(---fill, currentColor) !important;
}

s-input[stroke] path > * {
  stroke: var(---stroke, currentColor) !important;
}

s-input[stroke-width] path > * {
  stroke-width: var(---stroke-width, 1) !important;
}

s-input[visible] > * {
  visibility: var(---visible, visible) !important;
}

s-input[interactable] > * {
  pointer-events: var(---interactable, auto) !important;
}

s-input[interactable="none"] > * {
  cursor: default;
}

s-input[selectable] > * {
  user-select: var(---selectable, auto) !important;
}

[selectable=""],
[selectable="auto"],
s-input[selectable="all"] > * {
  cursor: text;
}

s-input[cursor] > * {
  cursor: var(---cursor, auto) !important;
}

s-input[text-font] > * {
  font-family: var(---text-font, monospace) !important;
}

s-input[text-size] > * {
  font-size: var(---text-size, 1rem) !important;
}

s-input[text-size="2xs"] > * {
  line-height: var(---theme-text-2xs-line-height, 1.5);
}

s-input[text-size="xs"] > * {
  line-height: var(---theme-text-xs-line-height, 1.5);
}

s-input[text-size="sm"] > * {
  line-height: var(---theme-text-sm-line-height, 1.5);
}

s-input[text-size="md"] > * {
  line-height: var(---theme-text-md-line-height, 1.5);
}

s-input[text-size="lg"] > * {
  line-height: var(---theme-text-lg-line-height, 1.5);
}

s-input[text-size="xl"] > * {
  line-height: var(---theme-text-xl-line-height, 1.5);
}

s-input[text-size="2xl"] > * {
  line-height: var(---theme-text-2xl-line-height, 1.5);
}

s-input[text-size="3xl"] > * {
  line-height: var(---theme-text-3xl-line-height, 1.5);
}

s-input[text-size="4xl"] > * {
  line-height: var(---theme-text-4xl-line-height, 1.5);
}

s-input[text-size="5xl"] > * {
  line-height: var(---theme-text-5xl-line-height, 1.5);
}

s-input[text-size="6xl"] > * {
  line-height: var(---theme-text-6xl-line-height, 1.5);
}

s-input[text-size="7xl"] > * {
  line-height: var(---theme-text-7xl-line-height, 1.5);
}

s-input[text-size="8xl"] > * {
  line-height: var(---theme-text-8xl-line-height, 1.5);
}

s-input[text-size="9xl"] > * {
  line-height: var(---theme-text-9xl-line-height, 1.5);
}

s-input[text-leading] > * {
  line-height: var(---text-leading, 1.5) !important;
}

s-input[text-tracking] > * {
  letter-spacing: var(---text-tracking, 1.5) !important;
}

s-input[text-weight] > * {
  font-weight: var(---text-weight, 600) !important;
}

s-input[text-style] > * {
  font-style: var(---text-style, italic) !important;
}

s-input[text-decoration-line] > * {
  text-decoration-line: var(---text-decoration-line, underline) !important;
}

s-input[text-decoration-color] > * {
  text-decoration-color: var(---text-decoration-color, currentColor) !important;
}

s-input[text-decoration-thickness] > * {
  text-decoration-thickness: var(---text-decoration-thickness, auto) !important;
}

s-input[text-underline-offset] > * {
  text-underline-offset: var(---text-underline-offset, 4px) !important;
}

s-input[text-case] > * {
  text-transform: var(---text-case, uppercase) !important;
}

s-input[text-align] > * {
  text-align: var(---text-align, center) !important;
}

s-input[text-overflow] > * {
  text-overflow: var(---text-overflow, clip) !important;
}

s-input[text-overflow=""] > * {
  white-space: nowrap;
}

s-input[text-overflow="wrap"] > * {
  white-space: break-spaces;
}

s-input[text-overflow="visible"] > * {
  white-space: nowrap;
}

s-input[text-overflow="clip"] > * {
  white-space: nowrap;
}

s-input[text-overflow="ellipsis"] > * {
  overflow: hidden;
  white-space: nowrap;
}

s-input[text-whitespace] > * {
  white-space: var(---text-whitespace, normal) !important;
}

s-input[text-color] > * {
  color: var(---text-color, white) !important;
}

s-input[text-stroke] > * {
  text-shadow: var(---text-stroke) !important;
}

s-input:is([bg-color], [background-color]) > * {
  background-color: var(---background-color) !important;
}

s-input:is([bg-image], [background-image]) > * {
  background-image: var(---background-image, none) !important;
}

s-input:is([bg-repeat], [background-repeat]) > * {
  background-repeat: var(---background-repeat, repeat) !important;
}

s-input:is([bg-align], [background-align]) > * {
  background-position: var(---background-align, center) !important;
}

s-input:is([bg-fit], [background-fit]) > * {
  background-size: var(---background-fit, contain) !important;
}

s-input[clip] > * {
  clip-path: var(---clip, circle(50%)) !important;
}

s-input[filter] > * {
  filter: var(---filter, none) !important;
}

s-input[backdrop-filter] > * {
  backdrop-filter: var(---backdrop-filter, none) !important;
}

s-input[blend] > * {
  mix-blend-mode: var(---blend, normal) !important;
}

s-input[shadow] > * {
  box-shadow: var(
    ---shadow,
    0 1px 2px hsl(0 0% 0% / 30%),
    0 1px 3px hsl(0 0% 0% / 15%)
  ) !important;
}

s-input[shadow-inset] > * {
  box-shadow: var(
    ---shadow-inset,
    inset 0 1px 2px hsl(0 0% 0% / 30%),
    inset 0 1px 3px hsl(0 0% 0% / 15%)
  ) !important;
}

s-input[ring] > * {
  box-shadow: var(---ring, 0 0 0 2px currentColor) !important;
  outline: none !important;
}

s-input[opacity] > * {
  opacity: var(---opacity, 1) !important;
}

s-input[translate] > * {
  translate: var(---translate, none) !important;
}

s-input[rotate] > * {
  rotate: var(---rotate, none) !important;
}

s-input[scale] > * {
  scale: var(---scale, none) !important;
}

s-input[pivot] > * {
  transform-origin: var(---pivot, left) !important;
}

s-input[transition-delay] > * {
  transition-delay: var(---transition-delay, 100ms) !important;
}

s-input[transition-duration] > * {
  transition-duration: var(---transition-duration, 100ms) !important;
}

s-input[transition-easing] > * {
  transition-timing-function: var(---transition-easing, ease) !important;
}

s-input[animation] > * {
  animation: var(---animation, var(---theme-animation-bounce)) !important;
}

s-input[mask] > * {
  ---theme-mask-angled-corner: conic-gradient(
        from -45deg at var(---corner, 8px) var(---corner, 8px),
        #0000 25%,
        #000 0
      )
      calc(-1 * var(---corner, 8px)) 0 /100% 51% repeat-x,
    conic-gradient(
        from 135deg at var(---corner, 8px) calc(100% - var(---corner, 8px)),
        #0000 25%,
        #000 0
      )
      calc(-1 * var(---corner, 8px)) 100%/100% 51% repeat-x !important;
  ---theme-mask-scooped-corner: radial-gradient(
      var(---corner, 8px) at var(---corner, 8px) var(---corner, 8px),
      #0000 99%,
      #000
    )
    calc(-1 * var(---corner, 8px)) calc(-1 * var(---corner, 8px)) !important;
  ---theme-mask-notched-corner: conic-gradient(
      at calc(2 * var(---corner, 8px)) calc(2 * var(---corner, 8px)),
      #000 75%,
      #0000 0
    )
    calc(-1 * var(---corner, 8px)) calc(-1 * var(---corner, 8px)) !important;
  background-color: transparent !important;
  background-image: none !important;
}

s-input[mask]::before > * {
  /* Apply mask to a pseudo-element so that drop-shadow filters applied to the root element will match the shape of the mask */
  position: absolute !important;
  inset: 0 !important;
  content: "" !important;
  background-image: var(---background-image, none) !important;
  background-color: var(---background-color) !important;
  -webkit-mask: var(---mask, none) !important;
  mask: var(---mask, none) !important;
}

s-input[content-visibility] > * {
  content-visibility: var(---content-visibility, auto);
}

s-input[contain-intrinsic-size] > * {
  contain-intrinsic-size: var(---contain-intrinsic-size, none);
}

s-input {
  display: contents;
  ---child-layout: column;
  ---text-font: var(---theme-input-font-family);
  ---text-weight: var(---theme-input-font-weight);
  ---background-color: var(---theme-input-background-color);
  ---color: var(---theme-input-color);
}

s-input[size="sm"] > .root {
  ---padding-lr: var(---theme-input-spacing-sm);
}

s-input[size="md"] > .root {
  ---padding-lr: var(---theme-input-spacing-md);
}

s-input[size="lg"] > .root {
  ---padding-lr: var(---theme-input-spacing-lg);
}

s-input > .root {
  display: flex;
  flex-direction: var(---child-layout);
  align-items: stretch;
  justify-content: start;
  position: relative;
  font-family: var(---text-font);
  font-weight: var(---text-weight);
  letter-spacing: var(---theme-input-letter-spacing);
  vertical-align: middle;
  overflow: hidden;
  cursor: text;
  transition: var(---theme-transition-fast) color,
    var(---theme-transition-fast) border,
    var(---theme-transition-fast) box-shadow,
    var(---theme-transition-fast) background-color;
  border: none;
  background-color: var(---background-color);
  color: var(---color);
}

s-input[disabled] > .root {
  opacity: 0.5;
  cursor: default;
}

s-input > .root > .input {
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  min-width: 0;
  width: 100%;
  height: 100%;
  color: var(---color);
  border: none;
  background: inherit;
  box-shadow: none;
  padding: 0;
  margin: 0;
  cursor: inherit;
  -webkit-appearance: none;
  pointer-events: auto;
  background-color: transparent;
  text-align: inherit;
}

s-input > .root > .input::-webkit-search-decoration,
s-input > .root > .input::-webkit-search-cancel-button,
s-input > .root > .input::-webkit-search-results-button,
s-input > .root > .input::-webkit-search-results-decoration {
  -webkit-appearance: none;
}

s-input > .root > .input:-webkit-autofill,
s-input > .root > .input:-webkit-autofill:hover,
s-input > .root > .input:-webkit-autofill:focus,
s-input > .root > .input:-webkit-autofill:active {
  box-shadow: 0 0 0 var(---theme-input-height-lg)
    var(---theme-input-background-color-hover) inset !important;
  -webkit-text-fill-color: var(---theme-color-primary-500);
  caret-color: var(---theme-input-color);
}

s-input[variant="filled"] > .root > .input:-webkit-autofill,
s-input[variant="filled"] > .root > .input:-webkit-autofill:hover,
s-input[variant="filled"] > .root > .input:-webkit-autofill:focus,
s-input[variant="filled"] > .root > .input:-webkit-autofill:active {
  box-shadow: 0 0 0 var(---theme-input-height-lg)
    var(---theme-input-background-color) inset !important;
}

s-input > .root > .input::placeholder {
  color: var(---placeholder-color, var(---theme-input-placeholder-color));
  user-select: none;
}

s-input:not([disabled]) > .root > .input:hover {
  color: var(---theme-input-color-hover);
}

s-input > .root > .input:focus {
  outline: none;
}

s-input > .root > .input > .prefix,
s-input > .root > .input > .suffix {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  cursor: default;
}

/*
 * Size modifiers
 */

s-input[size="sm"] > .root {
  border-radius: var(---theme-input-border-radius-sm);
  font-size: var(---text-size, var(---theme-input-font-size-sm));
  height: var(---theme-input-height-sm);
  padding-inline: var(---padding-lr);
}

s-input[size="sm"] > .root > .prefix ::slotted(*) {
  margin-inline-start: var(---theme-input-spacing-sm);
}

s-input[size="sm"] > .root > .suffix ::slotted(*) {
  margin-inline-end: var(---theme-input-spacing-sm);
}

s-input > .root,
s-input[size="md"] > .root {
  border-radius: var(---theme-input-border-radius-md);
  font-size: var(---text-size, var(---theme-input-font-size-md));
  height: var(---theme-input-height-md);
  padding-inline: var(---padding-lr);
}

s-input > .root > .prefix ::slotted(*),
s-input[size="md"] > .root > .prefix ::slotted(*) {
  margin-inline-start: var(---theme-input-spacing-md);
}

s-input > .root > .suffix ::slotted(*),
s-input[size="md"] > .root > .suffix ::slotted(*) {
  margin-inline-end: var(---theme-input-spacing-md);
}

s-input[size="lg"] > .root {
  border-radius: var(---theme-input-border-radius-lg);
  font-size: var(---text-size, var(---theme-input-font-size-lg));
  height: var(---theme-input-height-lg);
  padding-inline: var(---padding-lr);
}

s-input[size="lg"] > .root > .prefix ::slotted(*) {
  margin-inline-start: var(---theme-input-spacing-lg);
}

s-input[size="lg"] > .root > .suffix ::slotted(*) {
  margin-inline-end: var(---theme-input-spacing-lg);
}

/* Don't show the browser's password toggle in Edge */

::-ms-reveal {
  display: none;
}

/* Hide the built-in number spinner */

s-input[no-spin-buttons]
  > .root
  > input[type="number"]::-webkit-outer-spin-button,
s-input[no-spin-buttons]
  > .root
  > input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  display: none;
}

s-input[no-spin-buttons] > .root > input[type="number"] {
  -moz-appearance: textfield;
}

s-input > .root > .label {
  display: none;
}

s-button* > * {
  transition-property: opacity, translate, rotate, scale, transform, filter,
    backdrop-filter, clip-path, mix-blend-mode, box-shadow, color,
    background-color, border-color, text-decoration-color, fill, stroke;
}

s-button[display] > * {
  display: var(---display, flex) !important;
}

s-button[position] > * {
  position: var(---position, absolute) !important;
}

s-button[position="sticky-top"] > * {
  inset: 0 0 auto 0;
  z-index: 1;
}

s-button[position="sticky-bottom"] > * {
  inset: auto 0 0 0;
  z-index: 1;
}

s-button[position="sticky-left"] > * {
  inset: 0 auto 0 0;
  z-index: 1;
}

s-button[position="sticky-right"] > * {
  inset: 0 0 0 auto;
  z-index: 1;
}

s-button[position="fixed-top"] > * {
  inset: 0 0 auto 0;
  z-index: 1;
}

s-button[position="fixed-bottom"] > * {
  inset: auto 0 0 0;
  z-index: 1;
}

s-button[position="fixed-left"] > * {
  inset: 0 auto 0 0;
  z-index: 1;
}

s-button[position="fixed-right"] > * {
  inset: 0 0 0 auto;
  z-index: 1;
}

s-button[aspect] > * {
  aspect-ratio: var(---aspect, 1) !important;
}

s-button[overflow] > * {
  overflow: var(---overflow, scroll) !important;
}

s-button[overflow-x] > * {
  overflow-x: var(---overflow-x, scroll) !important;
}

s-button[overflow-y] > * {
  overflow-y: var(---overflow-y, scroll) !important;
}

s-button[z] > * {
  z-index: var(---z, 1) !important;
}

s-button:is([w], [width]) > * {
  width: var(---width, 100%) !important;
}

s-button:is([w-min], [width-min]) > * {
  min-width: var(---width-min, 0) !important;
}

s-button:is([w-max], [width-max]) > * {
  max-width: var(---width-max, 100%) !important;
}

s-button:is([h], [height]) > * {
  height: var(---height, 100%) !important;
}

s-button:is([h-min], [height-min]) > * {
  min-height: var(---height-min, 0) !important;
}

s-button:is([h-max], [height-max]) > * {
  max-height: var(---height-max, 100%) !important;
}

s-button:is([c], [corner]) > * {
  border-radius: var(---corner, 8px) !important;
}

s-button:is([c-tl], [corner-top-left]) > * {
  border-top-left-radius: var(---corner-top-left, 8px) !important;
}

s-button:is([c-tr], [corner-top-right]) > * {
  border-top-right-radius: var(---corner-top-right, 8px) !important;
}

s-button:is([c-bl], [corner-bottom-left]) > * {
  border-bottom-left-radius: var(---corner-bottom-left, 8px) !important;
}

s-button:is([c-br], [corner-bottom-right]) > * {
  border-bottom-right-radius: var(---corner-bottom-right, 8px) !important;
}

s-button:is([o-color], [outline-color]) > * {
  outline-style: solid;
  outline-color: var(---outline-color, hsl(0 100% 100% / 50%)) !important;
}

s-button:is([o-width], [outline-width]) > * {
  outline-style: solid;
  outline-width: var(---outline-width, 8px) !important;
}

s-button:is([o-style], [outline-style]) > * {
  outline-style: var(---outline-style, solid) !important;
}

s-button:is([b-color], [border-color]) > * {
  border-style: solid;
  border-color: var(---border-color, currentColor) !important;
}

s-button:is([b-color-t], [border-color-top]) > * {
  border-style: solid;
  border-top-color: var(---border-color-top, currentColor) !important;
}

s-button:is([b-color-b], [border-color-bottom]) > * {
  border-style: solid;
  border-bottom-color: var(---border-color-bottom, currentColor) !important;
}

s-button:is([b-color-l], [border-color-left]) > * {
  border-style: solid;
  border-left-color: var(---border-color-left, currentColor) !important;
}

s-button:is([b-color-r], [border-color-right]) > * {
  border-style: solid;
  border-right-color: var(---border-color-right, currentColor) !important;
}

s-button:is([b-width], [border-width]) > * {
  border-style: solid;
  border-width: var(---border-width, 8px) !important;
}

s-button:is([b-width-t], [border-width-top]) > * {
  border-style: solid;
  border-top-width: var(---border-width-top, 8px) !important;
}

s-button:is([b-width-b], [border-width-bottom]) > * {
  border-style: solid;
  border-bottom-width: var(---border-width-bottom, 8px) !important;
}

s-button:is([b-width-l], [border-width-left]) > * {
  border-style: solid;
  border-left-width: var(---border-width-left, 8px) !important;
}

s-button:is([b-width-r], [border-width-right]) > * {
  border-style: solid;
  border-right-width: var(---border-width-right, 8px) !important;
}

s-button:is([b-style], [border-style]) > * {
  border-style: var(---border-style, solid) !important;
}

s-button:is([b-style-t], [border-style-top]) > * {
  border-top-style: var(---border-style-top, solid) !important;
}

s-button:is([b-style-b], [border-style-bottom]) > * {
  border-bottom-style: var(---border-style-bottom, solid) !important;
}

s-button:is([b-style-l], [border-style-left]) > * {
  border-left-style: var(---border-style-left, solid) !important;
}

s-button:is([b-style-r], [border-style-right]) > * {
  border-right-style: var(---border-style-right, solid) !important;
}

s-button:is([i], [inset]) > * {
  inset: var(---inset, 8px) !important;
}

s-button:is([i-t], [inset-top]) > * {
  top: var(---inset-top, 8px) !important;
}

s-button:is([i-b], [inset-bottom]) > * {
  bottom: var(---inset-bottom, 8px) !important;
}

s-button:is([i-l], [inset-left]) > * {
  left: var(---inset-left, 8px) !important;
}

s-button:is([i-r], [inset-right]) > * {
  right: var(---inset-right, 8px) !important;
}

s-button:is([m], [margin]) > * {
  margin: var(---margin, 8px) !important;
}

s-button:is([m-t], [margin-top]) > * {
  margin-top: var(---margin-top, 8px) !important;
}

s-button:is([m-b], [margin-bottom]) > * {
  margin-bottom: var(---margin-bottom, 8px) !important;
}

s-button:is([m-l], [margin-left]) > * {
  margin-left: var(---margin-left, 8px) !important;
}

s-button:is([m-r], [margin-right]) > * {
  margin-right: var(---margin-right, 8px) !important;
}

s-button:is([p], [padding]) > * {
  padding: var(---padding, 8px) !important;
}

s-button:is([p-t], [padding-top]) > * {
  padding-top: var(---padding-top, 8px) !important;
}

s-button:is([p-b], [padding-bottom]) > * {
  padding-bottom: var(---padding-bottom, 8px) !important;
}

s-button:is([p-l], [padding-left]) > * {
  padding-left: var(---padding-left, 8px) !important;
}

s-button:is([p-r], [padding-right]) > * {
  padding-right: var(---padding-right, 8px) !important;
}

s-button:is([child-layout="row"], [child-layout="column"]) > * {
  display: flex;
  flex-direction: var(---child-layout, row) !important;
}

s-button:is([child-layout="grid"], [child-columns]) > * {
  display: grid;
  grid-template-columns: var(---child-columns, 1fr 1fr 1fr);
}

s-button[child-gap] > * {
  gap: var(---child-gap, 8px) !important;
}

s-button[child-align] > * {
  align-items: var(---child-align, center) !important;
}

s-button[child-justify] > * {
  justify-content: var(---child-justify, center) !important;
}

s-button[child-overflow] > * {
  flex-wrap: var(---child-overflow, nowrap) !important;
}

s-button[self-align] > * {
  align-self: var(---self-align, center) !important;
}

s-button[flex] > * {
  flex: var(---flex, 1) !important;
}

s-button[grow] > * {
  flex-grow: var(---grow, 1) !important;
}

s-button[shrink] > * {
  flex-shrink: var(---shrink, 1) !important;
}

s-button[order] > * {
  order: var(---order, 0) !important;
}

s-button[fill] path > * {
  fill: var(---fill, currentColor) !important;
}

s-button[stroke] path > * {
  stroke: var(---stroke, currentColor) !important;
}

s-button[stroke-width] path > * {
  stroke-width: var(---stroke-width, 1) !important;
}

s-button[visible] > * {
  visibility: var(---visible, visible) !important;
}

s-button[interactable] > * {
  pointer-events: var(---interactable, auto) !important;
}

s-button[interactable="none"] > * {
  cursor: default;
}

s-button[selectable] > * {
  user-select: var(---selectable, auto) !important;
}

[selectable=""],
[selectable="auto"],
s-button[selectable="all"] > * {
  cursor: text;
}

s-button[cursor] > * {
  cursor: var(---cursor, auto) !important;
}

s-button[text-font] > * {
  font-family: var(---text-font, monospace) !important;
}

s-button[text-size] > * {
  font-size: var(---text-size, 1rem) !important;
}

s-button[text-size="2xs"] > * {
  line-height: var(---theme-text-2xs-line-height, 1.5);
}

s-button[text-size="xs"] > * {
  line-height: var(---theme-text-xs-line-height, 1.5);
}

s-button[text-size="sm"] > * {
  line-height: var(---theme-text-sm-line-height, 1.5);
}

s-button[text-size="md"] > * {
  line-height: var(---theme-text-md-line-height, 1.5);
}

s-button[text-size="lg"] > * {
  line-height: var(---theme-text-lg-line-height, 1.5);
}

s-button[text-size="xl"] > * {
  line-height: var(---theme-text-xl-line-height, 1.5);
}

s-button[text-size="2xl"] > * {
  line-height: var(---theme-text-2xl-line-height, 1.5);
}

s-button[text-size="3xl"] > * {
  line-height: var(---theme-text-3xl-line-height, 1.5);
}

s-button[text-size="4xl"] > * {
  line-height: var(---theme-text-4xl-line-height, 1.5);
}

s-button[text-size="5xl"] > * {
  line-height: var(---theme-text-5xl-line-height, 1.5);
}

s-button[text-size="6xl"] > * {
  line-height: var(---theme-text-6xl-line-height, 1.5);
}

s-button[text-size="7xl"] > * {
  line-height: var(---theme-text-7xl-line-height, 1.5);
}

s-button[text-size="8xl"] > * {
  line-height: var(---theme-text-8xl-line-height, 1.5);
}

s-button[text-size="9xl"] > * {
  line-height: var(---theme-text-9xl-line-height, 1.5);
}

s-button[text-leading] > * {
  line-height: var(---text-leading, 1.5) !important;
}

s-button[text-tracking] > * {
  letter-spacing: var(---text-tracking, 1.5) !important;
}

s-button[text-weight] > * {
  font-weight: var(---text-weight, 600) !important;
}

s-button[text-style] > * {
  font-style: var(---text-style, italic) !important;
}

s-button[text-decoration-line] > * {
  text-decoration-line: var(---text-decoration-line, underline) !important;
}

s-button[text-decoration-color] > * {
  text-decoration-color: var(---text-decoration-color, currentColor) !important;
}

s-button[text-decoration-thickness] > * {
  text-decoration-thickness: var(---text-decoration-thickness, auto) !important;
}

s-button[text-underline-offset] > * {
  text-underline-offset: var(---text-underline-offset, 4px) !important;
}

s-button[text-case] > * {
  text-transform: var(---text-case, uppercase) !important;
}

s-button[text-align] > * {
  text-align: var(---text-align, center) !important;
}

s-button[text-overflow] > * {
  text-overflow: var(---text-overflow, clip) !important;
}

s-button[text-overflow=""] > * {
  white-space: nowrap;
}

s-button[text-overflow="wrap"] > * {
  white-space: break-spaces;
}

s-button[text-overflow="visible"] > * {
  white-space: nowrap;
}

s-button[text-overflow="clip"] > * {
  white-space: nowrap;
}

s-button[text-overflow="ellipsis"] > * {
  overflow: hidden;
  white-space: nowrap;
}

s-button[text-whitespace] > * {
  white-space: var(---text-whitespace, normal) !important;
}

s-button[text-color] > * {
  color: var(---text-color, white) !important;
}

s-button[text-stroke] > * {
  text-shadow: var(---text-stroke) !important;
}

s-button:is([bg-color], [background-color]) > * {
  background-color: var(---background-color) !important;
}

s-button:is([bg-image], [background-image]) > * {
  background-image: var(---background-image, none) !important;
}

s-button:is([bg-repeat], [background-repeat]) > * {
  background-repeat: var(---background-repeat, repeat) !important;
}

s-button:is([bg-align], [background-align]) > * {
  background-position: var(---background-align, center) !important;
}

s-button:is([bg-fit], [background-fit]) > * {
  background-size: var(---background-fit, contain) !important;
}

s-button[clip] > * {
  clip-path: var(---clip, circle(50%)) !important;
}

s-button[filter] > * {
  filter: var(---filter, none) !important;
}

s-button[backdrop-filter] > * {
  backdrop-filter: var(---backdrop-filter, none) !important;
}

s-button[blend] > * {
  mix-blend-mode: var(---blend, normal) !important;
}

s-button[shadow] > * {
  box-shadow: var(
    ---shadow,
    0 1px 2px hsl(0 0% 0% / 30%),
    0 1px 3px hsl(0 0% 0% / 15%)
  ) !important;
}

s-button[shadow-inset] > * {
  box-shadow: var(
    ---shadow-inset,
    inset 0 1px 2px hsl(0 0% 0% / 30%),
    inset 0 1px 3px hsl(0 0% 0% / 15%)
  ) !important;
}

s-button[ring] > * {
  box-shadow: var(---ring, 0 0 0 2px currentColor) !important;
  outline: none !important;
}

s-button[opacity] > * {
  opacity: var(---opacity, 1) !important;
}

s-button[translate] > * {
  translate: var(---translate, none) !important;
}

s-button[rotate] > * {
  rotate: var(---rotate, none) !important;
}

s-button[scale] > * {
  scale: var(---scale, none) !important;
}

s-button[pivot] > * {
  transform-origin: var(---pivot, left) !important;
}

s-button[transition-delay] > * {
  transition-delay: var(---transition-delay, 100ms) !important;
}

s-button[transition-duration] > * {
  transition-duration: var(---transition-duration, 100ms) !important;
}

s-button[transition-easing] > * {
  transition-timing-function: var(---transition-easing, ease) !important;
}

s-button[animation] > * {
  animation: var(---animation, var(---theme-animation-bounce)) !important;
}

s-button[mask] > * {
  ---theme-mask-angled-corner: conic-gradient(
        from -45deg at var(---corner, 8px) var(---corner, 8px),
        #0000 25%,
        #000 0
      )
      calc(-1 * var(---corner, 8px)) 0 /100% 51% repeat-x,
    conic-gradient(
        from 135deg at var(---corner, 8px) calc(100% - var(---corner, 8px)),
        #0000 25%,
        #000 0
      )
      calc(-1 * var(---corner, 8px)) 100%/100% 51% repeat-x !important;
  ---theme-mask-scooped-corner: radial-gradient(
      var(---corner, 8px) at var(---corner, 8px) var(---corner, 8px),
      #0000 99%,
      #000
    )
    calc(-1 * var(---corner, 8px)) calc(-1 * var(---corner, 8px)) !important;
  ---theme-mask-notched-corner: conic-gradient(
      at calc(2 * var(---corner, 8px)) calc(2 * var(---corner, 8px)),
      #000 75%,
      #0000 0
    )
    calc(-1 * var(---corner, 8px)) calc(-1 * var(---corner, 8px)) !important;
  background-color: transparent !important;
  background-image: none !important;
}

s-button[mask]::before > * {
  /* Apply mask to a pseudo-element so that drop-shadow filters applied to the root element will match the shape of the mask */
  position: absolute !important;
  inset: 0 !important;
  content: "" !important;
  background-image: var(---background-image, none) !important;
  background-color: var(---background-color) !important;
  -webkit-mask: var(---mask, none) !important;
  mask: var(---mask, none) !important;
}

s-button[content-visibility] > * {
  content-visibility: var(---content-visibility, auto);
}

s-button[contain-intrinsic-size] > * {
  contain-intrinsic-size: var(---contain-intrinsic-size, none);
}

s-button {
  display: contents;
  ---overflow-x: visible;
  ---overflow-y: visible;
  ---child-layout: row;
  ---child-align: center;
  ---child-justify: center;
  ---position: relative;
  ---interactable: auto;
  ---selectable: none;
  ---width: auto;
  ---height: auto;
  ---text-font: var(---theme-font-sans);
  ---text-wrap: nowrap;
  ---transition-property: transform, background-color, color, border, box-shadow;
  ---duration: 100ms;
  ---color: var(---theme-color-primary-60);
  ---text-color: var(---theme-color-neutral-0);
  ---spacing: 8px;
  ---border-width: 1px;
  ---corner: 4px;
  ---background-color: var(---color);
  ---ease: ease-out;
}

s-button[size="xs"] > .root {
  ---height-min: 24px;
  ---text-size: var(---theme-text-2xs-font-size);
  ---text-leading: var(---theme-text-2xs-line-height);
  ---padding-lr: 8px;
}

s-button[size="sm"] > .root {
  ---height-min: 32px;
  ---text-size: var(---theme-text-sm-font-size);
  ---text-leading: var(---theme-text-sm-line-height);
  ---padding-lr: 10px;
}

s-button,
s-button[size="md"] > .root {
  ---height-min: 40px;
  ---text-size: var(---theme-text-sm-font-size);
  ---text-leading: var(---theme-text-sm-line-height);
  ---padding-lr: 16px;
}

s-button[size="lg"] > .root {
  ---height-min: 48px;
  ---text-size: var(---theme-text-md-font-size);
  ---text-leading: var(---theme-text-md-line-height);
  ---padding-lr: 20px;
}

s-button > .root {
  display: flex;
  cursor: pointer;
  text-decoration: none;
  overflow-x: var(---overflow-x);
  overflow-y: var(---overflow-y);
  flex-direction: var(---child-layout);
  align-items: var(---child-align);
  justify-content: var(---child-justify);
  position: var(---position);
  pointer-events: var(---interactable);
  user-select: var(---selectable);
  width: var(---width);
  height: var(---height);
  min-height: var(---height-min);
  font-family: var(---text-font);
  font-size: var(---text-size);
  line-height: var(---text-leading);
  white-space: var(---text-wrap);
  transition-property: var(---transition-property);
  transition-duration: var(---duration);
  border-color: var(---border-color);
  border-width: var(---border-width);
  border-radius: var(---corner);
  padding-inline: var(---padding-lr);
  will-change: transform, opacity;
}

s-button[disabled] > .root {
  cursor: default;
  opacity: 0.5;
}

s-button > .root > .ripple {
  border-radius: inherit;
  position: absolute;
  inset: 0;
}

s-button[disabled] > .root > .ripple {
  display: none;
}

/* Filled */

s-button:not([variant]) > .root,
s-button[variant="filled"] > .root {
  ---shadow: var(---theme-shadow-box-1);
}

@media (hover: hover) and (pointer: fine) {
  s-button:not([variant]) > .root:hover,
  s-button[variant="filled"] > .root:hover {
    ---shadow: var(---theme-shadow-box-2);
  }

  s-button:not([variant]) > .root:active,
  s-button[variant="filled"] > .root:active {
    ---shadow: var(---theme-shadow-box-0);
  }
}

s-button:not([variant]),
s-button[variant="filled"] {
  ---text-weight: 500;
}

s-button:not([variant]) > .root,
s-button[variant="filled"] > .root {
  color: var(---text-color);
  background-color: var(---color);
  font-weight: var(---text-weight);
  box-shadow: var(---shadow);
}

/* Tonal */

s-button[variant="tonal"] {
  ---text-color: white;
  ---text-weight: 400;
  ---shadow: none;
}

s-button[variant="tonal"] > .root {
  color: var(---text-color);
  font-weight: var(---text-weight);
  box-shadow: var(---shadow);
  background-color: var(---color);
  border-style: solid;
  border-color: var(---color);
  border-width: var(---border-width);
}

s-button[variant="tonal"] > .root::after {
  position: absolute;
  inset: 0;
  pointer-events: none;
  content: "";
  border-radius: inherit;
  background-color: rgba(0, 0, 0, var(---theme-opacity-overlay));
}

/* Outlined */

s-button[variant="outlined"] {
  ---text-weight: 500;
  ---shadow: none;
  ---background-color: transparent;
}

s-button[variant="outlined"] > .root {
  ---text-color: var(---color);
  font-weight: var(---text-weight);
  color: var(---text-color);
  box-shadow: var(---shadow);
  background-color: var(---background-color);
  border-style: solid;
  border-color: var(---color);
  border-width: var(---border-width);
}

@media (hover: hover) and (pointer: fine) {
  s-button[variant="outlined"]:not([disabled]) > .root:hover,
  s-button[variant="outlined"][checked]:not([disabled]) > .root {
    ---text-color: var(---theme-color-neutral-0);
    background-color: var(---color);
    color: var(---text-color);
  }

  s-button[variant="outlined"]:not([disabled]) > .root:active {
    ---text-color: var(---theme-color-neutral-0);
    background-color: var(---color);
    color: var(---text-color);
  }
}

/* Text */

s-button[variant="text"] {
  ---text-weight: 500;
  ---shadow: none;
  ---background-color: transparent;
}

s-button[variant="text"] > .root {
  ---text-color: var(---color);
  font-weight: var(---text-weight);
  color: var(---text-color);
  box-shadow: var(---shadow);
  background-color: var(---background-color);
}

/* Icon */

s-button[variant="icon"] {
  ---shadow: none;
  ---background-color: transparent;
  ---aspect: 1;
  ---corner: 50%;
  ---padding: 0;
}

s-button[variant="icon"] > .root {
  ---text-color: var(---color);
  aspect-ratio: var(---aspect);
  color: var(---text-color);
  box-shadow: var(---shadow);
  background-color: var(---background-color);
  padding: var(---padding);
  border-radius: var(---corner);
}

s-button > .root > .label {
  display: flex;
  visibility: visible;
  width: var(---width);
  height: var(---height);
  flex-direction: var(---child-layout);
  align-items: var(---child-align);
  justify-content: var(---child-justify);
  z-index: 1;
  transition-duration: var(---duration);
  will-change: transform, opacity;
}

s-button[text-overflow="ellipsis"] > .root > .label {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

s-button[child-justify] > .root > .label {
  flex-grow: var(---grow);
}

s-button[loading] > .root > .label {
  visibility: hidden;
}

s-button[icon]:not([variant="icon"]) > .root > .label {
  padding-left: var(---spacing);
}

s-button > .root > .icon {
  display: none;
  visibility: visible;
  align-items: center;
  justify-content: center;
}

s-button[loading] > .root > .icon {
  visibility: hidden;
}

s-button[icon] > .root > .icon {
  display: flex;
}

s-button > .root label {
  pointer-events: auto;
  border-radius: inherit;
  position: absolute;
  inset: 0;
  cursor: pointer;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

s-button > .root input {
  border-radius: inherit;
  position: absolute;
  inset: 0;
  cursor: pointer;
  opacity: 0;
  pointer-events: auto;
}

s-button > .root .input-button {
  pointer-events: none;
  border-radius: inherit;
  position: absolute;
  inset: 0;
  background-color: var(---color);
}

s-button > .root > .icon {
  display: none;
}

s-button[icon] > .root > .icon {
  position: relative;
  display: flex;
  width: var(---icon-size, var(---theme-icon-size));
  height: var(---icon-size, var(---theme-icon-size));
  min-width: var(---icon-size, var(---theme-icon-size));
  min-height: var(---icon-size, var(---theme-icon-size));
  font-size: var(---icon-size, var(---theme-icon-size));
  justify-content: center;
  align-items: center;
  will-change: transform, opacity;
}

s-button[variant="icon"][animation] > .root > .icon {
  animation: var(---animation);
  animation-timing-function: var(---ease);
}

s-button[variant="icon"][animation] > .root {
  animation: none !important;
}

s-button[icon] > .root > .icon > .normal-icon {
  position: absolute;
  inset: 0;
  line-height: 1;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  color: var(---text-color);
  transition-property: none;
  will-change: transform, opacity;
}

s-button[icon][active-icon][active] > .root > .icon > .normal-icon {
  display: none;
}

s-button[active-icon] > .root > .icon > .active-icon {
  position: absolute;
  inset: 0;
  line-height: 1;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  color: var(---active-color, var(---text-color, transparent));
  transition-property: none;
  will-change: transform;
}

s-button[active-icon]:not([active]) > .root > .icon > .active-icon {
  display: none;
}

s-option* > * {
  transition-property: opacity, translate, rotate, scale, transform, filter,
    backdrop-filter, clip-path, mix-blend-mode, box-shadow, color,
    background-color, border-color, text-decoration-color, fill, stroke;
}

s-option[display] > * {
  display: var(---display, flex) !important;
}

s-option[position] > * {
  position: var(---position, absolute) !important;
}

s-option[position="sticky-top"] > * {
  inset: 0 0 auto 0;
  z-index: 1;
}

s-option[position="sticky-bottom"] > * {
  inset: auto 0 0 0;
  z-index: 1;
}

s-option[position="sticky-left"] > * {
  inset: 0 auto 0 0;
  z-index: 1;
}

s-option[position="sticky-right"] > * {
  inset: 0 0 0 auto;
  z-index: 1;
}

s-option[position="fixed-top"] > * {
  inset: 0 0 auto 0;
  z-index: 1;
}

s-option[position="fixed-bottom"] > * {
  inset: auto 0 0 0;
  z-index: 1;
}

s-option[position="fixed-left"] > * {
  inset: 0 auto 0 0;
  z-index: 1;
}

s-option[position="fixed-right"] > * {
  inset: 0 0 0 auto;
  z-index: 1;
}

s-option[aspect] > * {
  aspect-ratio: var(---aspect, 1) !important;
}

s-option[overflow] > * {
  overflow: var(---overflow, scroll) !important;
}

s-option[overflow-x] > * {
  overflow-x: var(---overflow-x, scroll) !important;
}

s-option[overflow-y] > * {
  overflow-y: var(---overflow-y, scroll) !important;
}

s-option[z] > * {
  z-index: var(---z, 1) !important;
}

s-option:is([w], [width]) > * {
  width: var(---width, 100%) !important;
}

s-option:is([w-min], [width-min]) > * {
  min-width: var(---width-min, 0) !important;
}

s-option:is([w-max], [width-max]) > * {
  max-width: var(---width-max, 100%) !important;
}

s-option:is([h], [height]) > * {
  height: var(---height, 100%) !important;
}

s-option:is([h-min], [height-min]) > * {
  min-height: var(---height-min, 0) !important;
}

s-option:is([h-max], [height-max]) > * {
  max-height: var(---height-max, 100%) !important;
}

s-option:is([c], [corner]) > * {
  border-radius: var(---corner, 8px) !important;
}

s-option:is([c-tl], [corner-top-left]) > * {
  border-top-left-radius: var(---corner-top-left, 8px) !important;
}

s-option:is([c-tr], [corner-top-right]) > * {
  border-top-right-radius: var(---corner-top-right, 8px) !important;
}

s-option:is([c-bl], [corner-bottom-left]) > * {
  border-bottom-left-radius: var(---corner-bottom-left, 8px) !important;
}

s-option:is([c-br], [corner-bottom-right]) > * {
  border-bottom-right-radius: var(---corner-bottom-right, 8px) !important;
}

s-option:is([o-color], [outline-color]) > * {
  outline-style: solid;
  outline-color: var(---outline-color, hsl(0 100% 100% / 50%)) !important;
}

s-option:is([o-width], [outline-width]) > * {
  outline-style: solid;
  outline-width: var(---outline-width, 8px) !important;
}

s-option:is([o-style], [outline-style]) > * {
  outline-style: var(---outline-style, solid) !important;
}

s-option:is([b-color], [border-color]) > * {
  border-style: solid;
  border-color: var(---border-color, currentColor) !important;
}

s-option:is([b-color-t], [border-color-top]) > * {
  border-style: solid;
  border-top-color: var(---border-color-top, currentColor) !important;
}

s-option:is([b-color-b], [border-color-bottom]) > * {
  border-style: solid;
  border-bottom-color: var(---border-color-bottom, currentColor) !important;
}

s-option:is([b-color-l], [border-color-left]) > * {
  border-style: solid;
  border-left-color: var(---border-color-left, currentColor) !important;
}

s-option:is([b-color-r], [border-color-right]) > * {
  border-style: solid;
  border-right-color: var(---border-color-right, currentColor) !important;
}

s-option:is([b-width], [border-width]) > * {
  border-style: solid;
  border-width: var(---border-width, 8px) !important;
}

s-option:is([b-width-t], [border-width-top]) > * {
  border-style: solid;
  border-top-width: var(---border-width-top, 8px) !important;
}

s-option:is([b-width-b], [border-width-bottom]) > * {
  border-style: solid;
  border-bottom-width: var(---border-width-bottom, 8px) !important;
}

s-option:is([b-width-l], [border-width-left]) > * {
  border-style: solid;
  border-left-width: var(---border-width-left, 8px) !important;
}

s-option:is([b-width-r], [border-width-right]) > * {
  border-style: solid;
  border-right-width: var(---border-width-right, 8px) !important;
}

s-option:is([b-style], [border-style]) > * {
  border-style: var(---border-style, solid) !important;
}

s-option:is([b-style-t], [border-style-top]) > * {
  border-top-style: var(---border-style-top, solid) !important;
}

s-option:is([b-style-b], [border-style-bottom]) > * {
  border-bottom-style: var(---border-style-bottom, solid) !important;
}

s-option:is([b-style-l], [border-style-left]) > * {
  border-left-style: var(---border-style-left, solid) !important;
}

s-option:is([b-style-r], [border-style-right]) > * {
  border-right-style: var(---border-style-right, solid) !important;
}

s-option:is([i], [inset]) > * {
  inset: var(---inset, 8px) !important;
}

s-option:is([i-t], [inset-top]) > * {
  top: var(---inset-top, 8px) !important;
}

s-option:is([i-b], [inset-bottom]) > * {
  bottom: var(---inset-bottom, 8px) !important;
}

s-option:is([i-l], [inset-left]) > * {
  left: var(---inset-left, 8px) !important;
}

s-option:is([i-r], [inset-right]) > * {
  right: var(---inset-right, 8px) !important;
}

s-option:is([m], [margin]) > * {
  margin: var(---margin, 8px) !important;
}

s-option:is([m-t], [margin-top]) > * {
  margin-top: var(---margin-top, 8px) !important;
}

s-option:is([m-b], [margin-bottom]) > * {
  margin-bottom: var(---margin-bottom, 8px) !important;
}

s-option:is([m-l], [margin-left]) > * {
  margin-left: var(---margin-left, 8px) !important;
}

s-option:is([m-r], [margin-right]) > * {
  margin-right: var(---margin-right, 8px) !important;
}

s-option:is([p], [padding]) > * {
  padding: var(---padding, 8px) !important;
}

s-option:is([p-t], [padding-top]) > * {
  padding-top: var(---padding-top, 8px) !important;
}

s-option:is([p-b], [padding-bottom]) > * {
  padding-bottom: var(---padding-bottom, 8px) !important;
}

s-option:is([p-l], [padding-left]) > * {
  padding-left: var(---padding-left, 8px) !important;
}

s-option:is([p-r], [padding-right]) > * {
  padding-right: var(---padding-right, 8px) !important;
}

s-option:is([child-layout="row"], [child-layout="column"]) > * {
  display: flex;
  flex-direction: var(---child-layout, row) !important;
}

s-option:is([child-layout="grid"], [child-columns]) > * {
  display: grid;
  grid-template-columns: var(---child-columns, 1fr 1fr 1fr);
}

s-option[child-gap] > * {
  gap: var(---child-gap, 8px) !important;
}

s-option[child-align] > * {
  align-items: var(---child-align, center) !important;
}

s-option[child-justify] > * {
  justify-content: var(---child-justify, center) !important;
}

s-option[child-overflow] > * {
  flex-wrap: var(---child-overflow, nowrap) !important;
}

s-option[self-align] > * {
  align-self: var(---self-align, center) !important;
}

s-option[flex] > * {
  flex: var(---flex, 1) !important;
}

s-option[grow] > * {
  flex-grow: var(---grow, 1) !important;
}

s-option[shrink] > * {
  flex-shrink: var(---shrink, 1) !important;
}

s-option[order] > * {
  order: var(---order, 0) !important;
}

s-option[fill] path > * {
  fill: var(---fill, currentColor) !important;
}

s-option[stroke] path > * {
  stroke: var(---stroke, currentColor) !important;
}

s-option[stroke-width] path > * {
  stroke-width: var(---stroke-width, 1) !important;
}

s-option[visible] > * {
  visibility: var(---visible, visible) !important;
}

s-option[interactable] > * {
  pointer-events: var(---interactable, auto) !important;
}

s-option[interactable="none"] > * {
  cursor: default;
}

s-option[selectable] > * {
  user-select: var(---selectable, auto) !important;
}

[selectable=""],
[selectable="auto"],
s-option[selectable="all"] > * {
  cursor: text;
}

s-option[cursor] > * {
  cursor: var(---cursor, auto) !important;
}

s-option[text-font] > * {
  font-family: var(---text-font, monospace) !important;
}

s-option[text-size] > * {
  font-size: var(---text-size, 1rem) !important;
}

s-option[text-size="2xs"] > * {
  line-height: var(---theme-text-2xs-line-height, 1.5);
}

s-option[text-size="xs"] > * {
  line-height: var(---theme-text-xs-line-height, 1.5);
}

s-option[text-size="sm"] > * {
  line-height: var(---theme-text-sm-line-height, 1.5);
}

s-option[text-size="md"] > * {
  line-height: var(---theme-text-md-line-height, 1.5);
}

s-option[text-size="lg"] > * {
  line-height: var(---theme-text-lg-line-height, 1.5);
}

s-option[text-size="xl"] > * {
  line-height: var(---theme-text-xl-line-height, 1.5);
}

s-option[text-size="2xl"] > * {
  line-height: var(---theme-text-2xl-line-height, 1.5);
}

s-option[text-size="3xl"] > * {
  line-height: var(---theme-text-3xl-line-height, 1.5);
}

s-option[text-size="4xl"] > * {
  line-height: var(---theme-text-4xl-line-height, 1.5);
}

s-option[text-size="5xl"] > * {
  line-height: var(---theme-text-5xl-line-height, 1.5);
}

s-option[text-size="6xl"] > * {
  line-height: var(---theme-text-6xl-line-height, 1.5);
}

s-option[text-size="7xl"] > * {
  line-height: var(---theme-text-7xl-line-height, 1.5);
}

s-option[text-size="8xl"] > * {
  line-height: var(---theme-text-8xl-line-height, 1.5);
}

s-option[text-size="9xl"] > * {
  line-height: var(---theme-text-9xl-line-height, 1.5);
}

s-option[text-leading] > * {
  line-height: var(---text-leading, 1.5) !important;
}

s-option[text-tracking] > * {
  letter-spacing: var(---text-tracking, 1.5) !important;
}

s-option[text-weight] > * {
  font-weight: var(---text-weight, 600) !important;
}

s-option[text-style] > * {
  font-style: var(---text-style, italic) !important;
}

s-option[text-decoration-line] > * {
  text-decoration-line: var(---text-decoration-line, underline) !important;
}

s-option[text-decoration-color] > * {
  text-decoration-color: var(---text-decoration-color, currentColor) !important;
}

s-option[text-decoration-thickness] > * {
  text-decoration-thickness: var(---text-decoration-thickness, auto) !important;
}

s-option[text-underline-offset] > * {
  text-underline-offset: var(---text-underline-offset, 4px) !important;
}

s-option[text-case] > * {
  text-transform: var(---text-case, uppercase) !important;
}

s-option[text-align] > * {
  text-align: var(---text-align, center) !important;
}

s-option[text-overflow] > * {
  text-overflow: var(---text-overflow, clip) !important;
}

s-option[text-overflow=""] > * {
  white-space: nowrap;
}

s-option[text-overflow="wrap"] > * {
  white-space: break-spaces;
}

s-option[text-overflow="visible"] > * {
  white-space: nowrap;
}

s-option[text-overflow="clip"] > * {
  white-space: nowrap;
}

s-option[text-overflow="ellipsis"] > * {
  overflow: hidden;
  white-space: nowrap;
}

s-option[text-whitespace] > * {
  white-space: var(---text-whitespace, normal) !important;
}

s-option[text-color] > * {
  color: var(---text-color, white) !important;
}

s-option[text-stroke] > * {
  text-shadow: var(---text-stroke) !important;
}

s-option:is([bg-color], [background-color]) > * {
  background-color: var(---background-color) !important;
}

s-option:is([bg-image], [background-image]) > * {
  background-image: var(---background-image, none) !important;
}

s-option:is([bg-repeat], [background-repeat]) > * {
  background-repeat: var(---background-repeat, repeat) !important;
}

s-option:is([bg-align], [background-align]) > * {
  background-position: var(---background-align, center) !important;
}

s-option:is([bg-fit], [background-fit]) > * {
  background-size: var(---background-fit, contain) !important;
}

s-option[clip] > * {
  clip-path: var(---clip, circle(50%)) !important;
}

s-option[filter] > * {
  filter: var(---filter, none) !important;
}

s-option[backdrop-filter] > * {
  backdrop-filter: var(---backdrop-filter, none) !important;
}

s-option[blend] > * {
  mix-blend-mode: var(---blend, normal) !important;
}

s-option[shadow] > * {
  box-shadow: var(
    ---shadow,
    0 1px 2px hsl(0 0% 0% / 30%),
    0 1px 3px hsl(0 0% 0% / 15%)
  ) !important;
}

s-option[shadow-inset] > * {
  box-shadow: var(
    ---shadow-inset,
    inset 0 1px 2px hsl(0 0% 0% / 30%),
    inset 0 1px 3px hsl(0 0% 0% / 15%)
  ) !important;
}

s-option[ring] > * {
  box-shadow: var(---ring, 0 0 0 2px currentColor) !important;
  outline: none !important;
}

s-option[opacity] > * {
  opacity: var(---opacity, 1) !important;
}

s-option[translate] > * {
  translate: var(---translate, none) !important;
}

s-option[rotate] > * {
  rotate: var(---rotate, none) !important;
}

s-option[scale] > * {
  scale: var(---scale, none) !important;
}

s-option[pivot] > * {
  transform-origin: var(---pivot, left) !important;
}

s-option[transition-delay] > * {
  transition-delay: var(---transition-delay, 100ms) !important;
}

s-option[transition-duration] > * {
  transition-duration: var(---transition-duration, 100ms) !important;
}

s-option[transition-easing] > * {
  transition-timing-function: var(---transition-easing, ease) !important;
}

s-option[animation] > * {
  animation: var(---animation, var(---theme-animation-bounce)) !important;
}

s-option[mask] > * {
  ---theme-mask-angled-corner: conic-gradient(
        from -45deg at var(---corner, 8px) var(---corner, 8px),
        #0000 25%,
        #000 0
      )
      calc(-1 * var(---corner, 8px)) 0 /100% 51% repeat-x,
    conic-gradient(
        from 135deg at var(---corner, 8px) calc(100% - var(---corner, 8px)),
        #0000 25%,
        #000 0
      )
      calc(-1 * var(---corner, 8px)) 100%/100% 51% repeat-x !important;
  ---theme-mask-scooped-corner: radial-gradient(
      var(---corner, 8px) at var(---corner, 8px) var(---corner, 8px),
      #0000 99%,
      #000
    )
    calc(-1 * var(---corner, 8px)) calc(-1 * var(---corner, 8px)) !important;
  ---theme-mask-notched-corner: conic-gradient(
      at calc(2 * var(---corner, 8px)) calc(2 * var(---corner, 8px)),
      #000 75%,
      #0000 0
    )
    calc(-1 * var(---corner, 8px)) calc(-1 * var(---corner, 8px)) !important;
  background-color: transparent !important;
  background-image: none !important;
}

s-option[mask]::before > * {
  /* Apply mask to a pseudo-element so that drop-shadow filters applied to the root element will match the shape of the mask */
  position: absolute !important;
  inset: 0 !important;
  content: "" !important;
  background-image: var(---background-image, none) !important;
  background-color: var(---background-color) !important;
  -webkit-mask: var(---mask, none) !important;
  mask: var(---mask, none) !important;
}

s-option[content-visibility] > * {
  content-visibility: var(---content-visibility, auto);
}

s-option[contain-intrinsic-size] > * {
  contain-intrinsic-size: var(---contain-intrinsic-size, none);
}

s-option {
  display: contents;
  ---overflow-x: visible;
  ---overflow-y: visible;
  ---child-layout: row;
  ---child-align: center;
  ---child-justify: flex-start;
  ---position: relative;
  ---interactable: auto;
  ---selectable: none;
  ---width: auto;
  ---height: auto;
  ---text-font: var(---theme-font-sans);
  ---text-wrap: nowrap;
  ---transition-property: transform, background-color, color, border, box-shadow;
  ---duration: 100ms;
  ---spacing: 12px;
  ---border-width: 1px;
  ---corner: 0;
  ---shadow: none;
  ---color: var(---theme-color-neutral-100);
  ---active-color: var(---theme-color-neutral-100);
}

s-option[value] {
  ---color: var(---theme-color-neutral-70);
}

s-option[active]:not([disabled]) > .root {
  color: var(---active-color) !important;
}

s-option[size="xs"] > .root {
  ---width-min: 80px;
  ---height-min: 24px;
  ---text-size: var(---theme-text-2xs-font-size);
  ---text-leading: var(---theme-text-2xs-line-height);
  ---padding-lr: 12px;
}

s-option[size="sm"] > .root {
  ---width-min: 80px;
  ---height-min: 32px;
  ---text-size: var(---theme-text-sm-font-size);
  ---text-leading: var(---theme-text-sm-line-height);
  ---padding-lr: 14px;
}

s-option,
s-option[size="md"] > .root {
  ---width-min: 80px;
  ---height-min: 40px;
  ---text-size: var(---theme-text-sm-font-size);
  ---text-leading: var(---theme-text-sm-line-height);
  ---padding-lr: 20px;
}

s-option[size="lg"] > .root {
  ---width-min: 80px;
  ---height-min: 48px;
  ---text-size: var(---theme-text-md-font-size);
  ---text-leading: var(---theme-text-md-line-height);
  ---padding-lr: 24px;
}

s-option > .root {
  display: flex;
  cursor: pointer;
  text-decoration: none;
  overflow-x: var(---overflow-x);
  overflow-y: var(---overflow-y);
  flex-direction: var(---child-layout);
  align-items: var(---child-align);
  justify-content: var(---child-justify);
  position: var(---position);
  pointer-events: var(---interactable);
  user-select: var(---selectable);
  width: var(---width);
  height: var(---height);
  min-width: var(---width-min);
  min-height: var(---height-min);
  font-family: var(---text-font);
  font-size: var(---text-size);
  line-height: var(---text-leading);
  white-space: var(---text-wrap);
  transition-property: var(---transition-property);
  transition-duration: var(---duration);
  border-color: var(---border-color);
  border-width: var(---border-width);
  border-radius: var(---corner);
  padding-inline: var(---padding-lr);
  will-change: transform;
  color: var(---color);
  box-shadow: var(---shadow);
  background-color: var(---background-color);
}

s-option[disabled] > .root {
  cursor: default;
  opacity: 0.5;
}

s-option > .root > .ripple {
  border-radius: inherit;
  position: absolute;
  inset: 0;
}

s-option[disabled] > .root > .ripple {
  display: none;
}

s-option > .root > .label {
  display: flex;
  visibility: visible;
  flex-direction: var(---child-layout);
  align-items: var(---child-align);
  justify-content: var(---child-justify);
  z-index: 1;
  transition-duration: var(---duration);
}

s-option[child-justify] > .root > .label {
  flex-grow: var(---grow);
}

s-option[loading] > .root > .label {
  visibility: hidden;
}

s-option[icon]:not([variant="icon"]) > .root > .label {
  padding-left: var(---spacing);
}

s-option > .root > .icon {
  display: none;
}

s-option[icon] > .root > .icon {
  position: relative;
  display: flex;
  width: var(---icon-size, var(---theme-icon-size));
  height: var(---icon-size, var(---theme-icon-size));
  min-width: var(---icon-size, var(---theme-icon-size));
  min-height: var(---icon-size, var(---theme-icon-size));
  font-size: var(---icon-size, var(---theme-icon-size));
  justify-content: center;
  align-items: center;
  will-change: transform;
}

s-option[icon] > .root > .icon > .normal-icon {
  position: absolute;
  inset: 0;
  line-height: 1;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  will-change: transform, opacity;
  transition-property: none;
  color: var(---color);
}

s-option[icon][active-icon][active] > .root > .icon > .normal-icon {
  display: none;
}

s-option[active-icon] > .root > .icon > .active-icon {
  position: absolute;
  inset: 0;
  line-height: 1;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  will-change: transform, opacity;
  transition-property: none;
  color: var(---active-color);
}

s-option[active-icon]:not([active]) > .root > .icon > .active-icon {
  display: none;
}

s-tab* > * {
  transition-property: opacity, translate, rotate, scale, transform, filter,
    backdrop-filter, clip-path, mix-blend-mode, box-shadow, color,
    background-color, border-color, text-decoration-color, fill, stroke;
}

s-tab[display] > * {
  display: var(---display, flex) !important;
}

s-tab[position] > * {
  position: var(---position, absolute) !important;
}

s-tab[position="sticky-top"] > * {
  inset: 0 0 auto 0;
  z-index: 1;
}

s-tab[position="sticky-bottom"] > * {
  inset: auto 0 0 0;
  z-index: 1;
}

s-tab[position="sticky-left"] > * {
  inset: 0 auto 0 0;
  z-index: 1;
}

s-tab[position="sticky-right"] > * {
  inset: 0 0 0 auto;
  z-index: 1;
}

s-tab[position="fixed-top"] > * {
  inset: 0 0 auto 0;
  z-index: 1;
}

s-tab[position="fixed-bottom"] > * {
  inset: auto 0 0 0;
  z-index: 1;
}

s-tab[position="fixed-left"] > * {
  inset: 0 auto 0 0;
  z-index: 1;
}

s-tab[position="fixed-right"] > * {
  inset: 0 0 0 auto;
  z-index: 1;
}

s-tab[aspect] > * {
  aspect-ratio: var(---aspect, 1) !important;
}

s-tab[overflow] > * {
  overflow: var(---overflow, scroll) !important;
}

s-tab[overflow-x] > * {
  overflow-x: var(---overflow-x, scroll) !important;
}

s-tab[overflow-y] > * {
  overflow-y: var(---overflow-y, scroll) !important;
}

s-tab[z] > * {
  z-index: var(---z, 1) !important;
}

s-tab:is([w], [width]) > * {
  width: var(---width, 100%) !important;
}

s-tab:is([w-min], [width-min]) > * {
  min-width: var(---width-min, 0) !important;
}

s-tab:is([w-max], [width-max]) > * {
  max-width: var(---width-max, 100%) !important;
}

s-tab:is([h], [height]) > * {
  height: var(---height, 100%) !important;
}

s-tab:is([h-min], [height-min]) > * {
  min-height: var(---height-min, 0) !important;
}

s-tab:is([h-max], [height-max]) > * {
  max-height: var(---height-max, 100%) !important;
}

s-tab:is([c], [corner]) > * {
  border-radius: var(---corner, 8px) !important;
}

s-tab:is([c-tl], [corner-top-left]) > * {
  border-top-left-radius: var(---corner-top-left, 8px) !important;
}

s-tab:is([c-tr], [corner-top-right]) > * {
  border-top-right-radius: var(---corner-top-right, 8px) !important;
}

s-tab:is([c-bl], [corner-bottom-left]) > * {
  border-bottom-left-radius: var(---corner-bottom-left, 8px) !important;
}

s-tab:is([c-br], [corner-bottom-right]) > * {
  border-bottom-right-radius: var(---corner-bottom-right, 8px) !important;
}

s-tab:is([o-color], [outline-color]) > * {
  outline-style: solid;
  outline-color: var(---outline-color, hsl(0 100% 100% / 50%)) !important;
}

s-tab:is([o-width], [outline-width]) > * {
  outline-style: solid;
  outline-width: var(---outline-width, 8px) !important;
}

s-tab:is([o-style], [outline-style]) > * {
  outline-style: var(---outline-style, solid) !important;
}

s-tab:is([b-color], [border-color]) > * {
  border-style: solid;
  border-color: var(---border-color, currentColor) !important;
}

s-tab:is([b-color-t], [border-color-top]) > * {
  border-style: solid;
  border-top-color: var(---border-color-top, currentColor) !important;
}

s-tab:is([b-color-b], [border-color-bottom]) > * {
  border-style: solid;
  border-bottom-color: var(---border-color-bottom, currentColor) !important;
}

s-tab:is([b-color-l], [border-color-left]) > * {
  border-style: solid;
  border-left-color: var(---border-color-left, currentColor) !important;
}

s-tab:is([b-color-r], [border-color-right]) > * {
  border-style: solid;
  border-right-color: var(---border-color-right, currentColor) !important;
}

s-tab:is([b-width], [border-width]) > * {
  border-style: solid;
  border-width: var(---border-width, 8px) !important;
}

s-tab:is([b-width-t], [border-width-top]) > * {
  border-style: solid;
  border-top-width: var(---border-width-top, 8px) !important;
}

s-tab:is([b-width-b], [border-width-bottom]) > * {
  border-style: solid;
  border-bottom-width: var(---border-width-bottom, 8px) !important;
}

s-tab:is([b-width-l], [border-width-left]) > * {
  border-style: solid;
  border-left-width: var(---border-width-left, 8px) !important;
}

s-tab:is([b-width-r], [border-width-right]) > * {
  border-style: solid;
  border-right-width: var(---border-width-right, 8px) !important;
}

s-tab:is([b-style], [border-style]) > * {
  border-style: var(---border-style, solid) !important;
}

s-tab:is([b-style-t], [border-style-top]) > * {
  border-top-style: var(---border-style-top, solid) !important;
}

s-tab:is([b-style-b], [border-style-bottom]) > * {
  border-bottom-style: var(---border-style-bottom, solid) !important;
}

s-tab:is([b-style-l], [border-style-left]) > * {
  border-left-style: var(---border-style-left, solid) !important;
}

s-tab:is([b-style-r], [border-style-right]) > * {
  border-right-style: var(---border-style-right, solid) !important;
}

s-tab:is([i], [inset]) > * {
  inset: var(---inset, 8px) !important;
}

s-tab:is([i-t], [inset-top]) > * {
  top: var(---inset-top, 8px) !important;
}

s-tab:is([i-b], [inset-bottom]) > * {
  bottom: var(---inset-bottom, 8px) !important;
}

s-tab:is([i-l], [inset-left]) > * {
  left: var(---inset-left, 8px) !important;
}

s-tab:is([i-r], [inset-right]) > * {
  right: var(---inset-right, 8px) !important;
}

s-tab:is([m], [margin]) > * {
  margin: var(---margin, 8px) !important;
}

s-tab:is([m-t], [margin-top]) > * {
  margin-top: var(---margin-top, 8px) !important;
}

s-tab:is([m-b], [margin-bottom]) > * {
  margin-bottom: var(---margin-bottom, 8px) !important;
}

s-tab:is([m-l], [margin-left]) > * {
  margin-left: var(---margin-left, 8px) !important;
}

s-tab:is([m-r], [margin-right]) > * {
  margin-right: var(---margin-right, 8px) !important;
}

s-tab:is([p], [padding]) > * {
  padding: var(---padding, 8px) !important;
}

s-tab:is([p-t], [padding-top]) > * {
  padding-top: var(---padding-top, 8px) !important;
}

s-tab:is([p-b], [padding-bottom]) > * {
  padding-bottom: var(---padding-bottom, 8px) !important;
}

s-tab:is([p-l], [padding-left]) > * {
  padding-left: var(---padding-left, 8px) !important;
}

s-tab:is([p-r], [padding-right]) > * {
  padding-right: var(---padding-right, 8px) !important;
}

s-tab:is([child-layout="row"], [child-layout="column"]) > * {
  display: flex;
  flex-direction: var(---child-layout, row) !important;
}

s-tab:is([child-layout="grid"], [child-columns]) > * {
  display: grid;
  grid-template-columns: var(---child-columns, 1fr 1fr 1fr);
}

s-tab[child-gap] > * {
  gap: var(---child-gap, 8px) !important;
}

s-tab[child-align] > * {
  align-items: var(---child-align, center) !important;
}

s-tab[child-justify] > * {
  justify-content: var(---child-justify, center) !important;
}

s-tab[child-overflow] > * {
  flex-wrap: var(---child-overflow, nowrap) !important;
}

s-tab[self-align] > * {
  align-self: var(---self-align, center) !important;
}

s-tab[flex] > * {
  flex: var(---flex, 1) !important;
}

s-tab[grow] > * {
  flex-grow: var(---grow, 1) !important;
}

s-tab[shrink] > * {
  flex-shrink: var(---shrink, 1) !important;
}

s-tab[order] > * {
  order: var(---order, 0) !important;
}

s-tab[fill] path > * {
  fill: var(---fill, currentColor) !important;
}

s-tab[stroke] path > * {
  stroke: var(---stroke, currentColor) !important;
}

s-tab[stroke-width] path > * {
  stroke-width: var(---stroke-width, 1) !important;
}

s-tab[visible] > * {
  visibility: var(---visible, visible) !important;
}

s-tab[interactable] > * {
  pointer-events: var(---interactable, auto) !important;
}

s-tab[interactable="none"] > * {
  cursor: default;
}

s-tab[selectable] > * {
  user-select: var(---selectable, auto) !important;
}

[selectable=""],
[selectable="auto"],
s-tab[selectable="all"] > * {
  cursor: text;
}

s-tab[cursor] > * {
  cursor: var(---cursor, auto) !important;
}

s-tab[text-font] > * {
  font-family: var(---text-font, monospace) !important;
}

s-tab[text-size] > * {
  font-size: var(---text-size, 1rem) !important;
}

s-tab[text-size="2xs"] > * {
  line-height: var(---theme-text-2xs-line-height, 1.5);
}

s-tab[text-size="xs"] > * {
  line-height: var(---theme-text-xs-line-height, 1.5);
}

s-tab[text-size="sm"] > * {
  line-height: var(---theme-text-sm-line-height, 1.5);
}

s-tab[text-size="md"] > * {
  line-height: var(---theme-text-md-line-height, 1.5);
}

s-tab[text-size="lg"] > * {
  line-height: var(---theme-text-lg-line-height, 1.5);
}

s-tab[text-size="xl"] > * {
  line-height: var(---theme-text-xl-line-height, 1.5);
}

s-tab[text-size="2xl"] > * {
  line-height: var(---theme-text-2xl-line-height, 1.5);
}

s-tab[text-size="3xl"] > * {
  line-height: var(---theme-text-3xl-line-height, 1.5);
}

s-tab[text-size="4xl"] > * {
  line-height: var(---theme-text-4xl-line-height, 1.5);
}

s-tab[text-size="5xl"] > * {
  line-height: var(---theme-text-5xl-line-height, 1.5);
}

s-tab[text-size="6xl"] > * {
  line-height: var(---theme-text-6xl-line-height, 1.5);
}

s-tab[text-size="7xl"] > * {
  line-height: var(---theme-text-7xl-line-height, 1.5);
}

s-tab[text-size="8xl"] > * {
  line-height: var(---theme-text-8xl-line-height, 1.5);
}

s-tab[text-size="9xl"] > * {
  line-height: var(---theme-text-9xl-line-height, 1.5);
}

s-tab[text-leading] > * {
  line-height: var(---text-leading, 1.5) !important;
}

s-tab[text-tracking] > * {
  letter-spacing: var(---text-tracking, 1.5) !important;
}

s-tab[text-weight] > * {
  font-weight: var(---text-weight, 600) !important;
}

s-tab[text-style] > * {
  font-style: var(---text-style, italic) !important;
}

s-tab[text-decoration-line] > * {
  text-decoration-line: var(---text-decoration-line, underline) !important;
}

s-tab[text-decoration-color] > * {
  text-decoration-color: var(---text-decoration-color, currentColor) !important;
}

s-tab[text-decoration-thickness] > * {
  text-decoration-thickness: var(---text-decoration-thickness, auto) !important;
}

s-tab[text-underline-offset] > * {
  text-underline-offset: var(---text-underline-offset, 4px) !important;
}

s-tab[text-case] > * {
  text-transform: var(---text-case, uppercase) !important;
}

s-tab[text-align] > * {
  text-align: var(---text-align, center) !important;
}

s-tab[text-overflow] > * {
  text-overflow: var(---text-overflow, clip) !important;
}

s-tab[text-overflow=""] > * {
  white-space: nowrap;
}

s-tab[text-overflow="wrap"] > * {
  white-space: break-spaces;
}

s-tab[text-overflow="visible"] > * {
  white-space: nowrap;
}

s-tab[text-overflow="clip"] > * {
  white-space: nowrap;
}

s-tab[text-overflow="ellipsis"] > * {
  overflow: hidden;
  white-space: nowrap;
}

s-tab[text-whitespace] > * {
  white-space: var(---text-whitespace, normal) !important;
}

s-tab[text-color] > * {
  color: var(---text-color, white) !important;
}

s-tab[text-stroke] > * {
  text-shadow: var(---text-stroke) !important;
}

s-tab:is([bg-color], [background-color]) > * {
  background-color: var(---background-color) !important;
}

s-tab:is([bg-image], [background-image]) > * {
  background-image: var(---background-image, none) !important;
}

s-tab:is([bg-repeat], [background-repeat]) > * {
  background-repeat: var(---background-repeat, repeat) !important;
}

s-tab:is([bg-align], [background-align]) > * {
  background-position: var(---background-align, center) !important;
}

s-tab:is([bg-fit], [background-fit]) > * {
  background-size: var(---background-fit, contain) !important;
}

s-tab[clip] > * {
  clip-path: var(---clip, circle(50%)) !important;
}

s-tab[filter] > * {
  filter: var(---filter, none) !important;
}

s-tab[backdrop-filter] > * {
  backdrop-filter: var(---backdrop-filter, none) !important;
}

s-tab[blend] > * {
  mix-blend-mode: var(---blend, normal) !important;
}

s-tab[shadow] > * {
  box-shadow: var(
    ---shadow,
    0 1px 2px hsl(0 0% 0% / 30%),
    0 1px 3px hsl(0 0% 0% / 15%)
  ) !important;
}

s-tab[shadow-inset] > * {
  box-shadow: var(
    ---shadow-inset,
    inset 0 1px 2px hsl(0 0% 0% / 30%),
    inset 0 1px 3px hsl(0 0% 0% / 15%)
  ) !important;
}

s-tab[ring] > * {
  box-shadow: var(---ring, 0 0 0 2px currentColor) !important;
  outline: none !important;
}

s-tab[opacity] > * {
  opacity: var(---opacity, 1) !important;
}

s-tab[translate] > * {
  translate: var(---translate, none) !important;
}

s-tab[rotate] > * {
  rotate: var(---rotate, none) !important;
}

s-tab[scale] > * {
  scale: var(---scale, none) !important;
}

s-tab[pivot] > * {
  transform-origin: var(---pivot, left) !important;
}

s-tab[transition-delay] > * {
  transition-delay: var(---transition-delay, 100ms) !important;
}

s-tab[transition-duration] > * {
  transition-duration: var(---transition-duration, 100ms) !important;
}

s-tab[transition-easing] > * {
  transition-timing-function: var(---transition-easing, ease) !important;
}

s-tab[animation] > * {
  animation: var(---animation, var(---theme-animation-bounce)) !important;
}

s-tab[mask] > * {
  ---theme-mask-angled-corner: conic-gradient(
        from -45deg at var(---corner, 8px) var(---corner, 8px),
        #0000 25%,
        #000 0
      )
      calc(-1 * var(---corner, 8px)) 0 /100% 51% repeat-x,
    conic-gradient(
        from 135deg at var(---corner, 8px) calc(100% - var(---corner, 8px)),
        #0000 25%,
        #000 0
      )
      calc(-1 * var(---corner, 8px)) 100%/100% 51% repeat-x !important;
  ---theme-mask-scooped-corner: radial-gradient(
      var(---corner, 8px) at var(---corner, 8px) var(---corner, 8px),
      #0000 99%,
      #000
    )
    calc(-1 * var(---corner, 8px)) calc(-1 * var(---corner, 8px)) !important;
  ---theme-mask-notched-corner: conic-gradient(
      at calc(2 * var(---corner, 8px)) calc(2 * var(---corner, 8px)),
      #000 75%,
      #0000 0
    )
    calc(-1 * var(---corner, 8px)) calc(-1 * var(---corner, 8px)) !important;
  background-color: transparent !important;
  background-image: none !important;
}

s-tab[mask]::before > * {
  /* Apply mask to a pseudo-element so that drop-shadow filters applied to the root element will match the shape of the mask */
  position: absolute !important;
  inset: 0 !important;
  content: "" !important;
  background-image: var(---background-image, none) !important;
  background-color: var(---background-color) !important;
  -webkit-mask: var(---mask, none) !important;
  mask: var(---mask, none) !important;
}

s-tab[content-visibility] > * {
  content-visibility: var(---content-visibility, auto);
}

s-tab[contain-intrinsic-size] > * {
  contain-intrinsic-size: var(---contain-intrinsic-size, none);
}

s-tab {
  display: contents;
  ---interactable: auto;
  ---selectable: none;
  ---child-layout: column;
  ---child-align: center;
  ---child-justify: center;
  ---position: relative;
  ---grow: 1;
  ---shrink: 1;
  ---text-font: var(---theme-font-sans);
  ---text-size: var(---theme-text-sm-font-size);
  ---text-weight: 600;
  ---text-wrap: nowrap;
  ---transition-property: opacity, transform, box-shadow;
  ---duration: 100ms;
  ---active-text-color: var(---theme-color-primary-60);
  ---inactive-text-color: var(---theme-color-neutral-60);
  ---padding-tb: 16px;
  ---padding-lr: 20px;
}

s-tab:not([child-layout="row"]) {
  ---child-gap: 2px;
  ---icon-size: calc(1.5 * var(---text-size));
}

s-tab[child-layout="row"] {
  ---child-gap: 8px;
  ---icon-size: calc(1.15 * var(---text-size));
}

s-tab > .root {
  display: flex;
  cursor: pointer;
  pointer-events: var(---interactable);
  user-select: var(---selectable);
  flex-basis: 0;
  flex-direction: var(---child-layout);
  align-items: var(---child-align);
  justify-content: var(---child-justify);
  position: var(---position);
  flex-grow: var(---grow);
  flex-shrink: var(---shrink);
  font-family: var(---text-font);
  font-size: var(---text-size);
  font-weight: var(---text-weight);
  color: var(---inactive-text-color, var(---text-color));
  background-color: var(---color);
  white-space: var(---text-wrap);
  transition-property: var(---transition-property);
  transition-duration: var(---duration);
  padding-block: var(---padding-tb);
  padding-inline: var(---padding-lr);
  gap: var(---child-gap);
  line-height: 1;
  will-change: transform, opacity;
}

s-tab[disabled] > .root {
  cursor: default;
  opacity: 0.5;
}

s-tab[active]:not([disabled]) > .root {
  color: var(
    ---active-text-color,
    var(---inactive-text-color, var(---text-color))
  ) !important;
}

s-tab[active]:not([disabled], [status="activating"], [status="deactivating"])
  > .root::before {
  content: "";
  position: absolute;
  inset: 0;
  border-style: solid;
  border-width: 0 0 var(---indicator-width) 0;
  border-color: var(---indicator-color);
  pointer-events: none;
}

s-tab > .root > .ripple {
  position: absolute;
  inset: 0;
}

s-tab > .root > .icon,
s-tab > .root > .label {
  display: flex;
  flex-direction: var(---child-layout);
  align-items: var(---child-align);
  justify-content: var(---child-justify);
  transition-duration: var(---duration);
  will-change: transform, opacity;
}

s-tab > .root > .label {
  transition-property: transform;
}

s-tab:not([child-layout="row"])[icon] > .root > .label {
  transform: scale(0.8);
}

s-tab:not([child-layout="row"])[icon][active]:not([disabled])
  > .root
  > .label {
  transform: scale(0.9);
}

s-tab > .root > .icon {
  display: none;
}

s-tab[icon] > .root > .icon {
  position: relative;
  display: flex;
  width: var(---icon-size, var(---theme-icon-size));
  height: var(---icon-size, var(---theme-icon-size));
  min-width: var(---icon-size, var(---theme-icon-size));
  min-height: var(---icon-size, var(---theme-icon-size));
  font-size: var(---icon-size, var(---theme-icon-size));
  justify-content: center;
  align-items: center;
  will-change: transform, opacity;
}

s-tab[icon] > .root > .icon > .normal-icon {
  position: absolute;
  inset: 0;
  line-height: 1;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  color: var(---inactive-text-color, var(---text-color));
  transition-property: none;
  will-change: transform, opacity;
}

s-tab[icon][active-icon][active] > .root > .icon > .normal-icon {
  display: none;
}

s-tab[active-icon] > .root > .icon > .active-icon {
  position: absolute;
  inset: 0;
  line-height: 1;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  color: var(
    ---active-text-color,
    var(---inactive-text-color, var(---text-color))
  );
  transition-property: none;
  will-change: transform, opacity;
}

s-tab[active-icon]:not([active]) > .root > .icon > .active-icon {
  display: none;
}

s-tabs* > * {
  transition-property: opacity, translate, rotate, scale, transform, filter,
    backdrop-filter, clip-path, mix-blend-mode, box-shadow, color,
    background-color, border-color, text-decoration-color, fill, stroke;
}

s-tabs[display] > * {
  display: var(---display, flex) !important;
}

s-tabs[position] > * {
  position: var(---position, absolute) !important;
}

s-tabs[position="sticky-top"] > * {
  inset: 0 0 auto 0;
  z-index: 1;
}

s-tabs[position="sticky-bottom"] > * {
  inset: auto 0 0 0;
  z-index: 1;
}

s-tabs[position="sticky-left"] > * {
  inset: 0 auto 0 0;
  z-index: 1;
}

s-tabs[position="sticky-right"] > * {
  inset: 0 0 0 auto;
  z-index: 1;
}

s-tabs[position="fixed-top"] > * {
  inset: 0 0 auto 0;
  z-index: 1;
}

s-tabs[position="fixed-bottom"] > * {
  inset: auto 0 0 0;
  z-index: 1;
}

s-tabs[position="fixed-left"] > * {
  inset: 0 auto 0 0;
  z-index: 1;
}

s-tabs[position="fixed-right"] > * {
  inset: 0 0 0 auto;
  z-index: 1;
}

s-tabs[aspect] > * {
  aspect-ratio: var(---aspect, 1) !important;
}

s-tabs[overflow] > * {
  overflow: var(---overflow, scroll) !important;
}

s-tabs[overflow-x] > * {
  overflow-x: var(---overflow-x, scroll) !important;
}

s-tabs[overflow-y] > * {
  overflow-y: var(---overflow-y, scroll) !important;
}

s-tabs[z] > * {
  z-index: var(---z, 1) !important;
}

s-tabs:is([w], [width]) > * {
  width: var(---width, 100%) !important;
}

s-tabs:is([w-min], [width-min]) > * {
  min-width: var(---width-min, 0) !important;
}

s-tabs:is([w-max], [width-max]) > * {
  max-width: var(---width-max, 100%) !important;
}

s-tabs:is([h], [height]) > * {
  height: var(---height, 100%) !important;
}

s-tabs:is([h-min], [height-min]) > * {
  min-height: var(---height-min, 0) !important;
}

s-tabs:is([h-max], [height-max]) > * {
  max-height: var(---height-max, 100%) !important;
}

s-tabs:is([c], [corner]) > * {
  border-radius: var(---corner, 8px) !important;
}

s-tabs:is([c-tl], [corner-top-left]) > * {
  border-top-left-radius: var(---corner-top-left, 8px) !important;
}

s-tabs:is([c-tr], [corner-top-right]) > * {
  border-top-right-radius: var(---corner-top-right, 8px) !important;
}

s-tabs:is([c-bl], [corner-bottom-left]) > * {
  border-bottom-left-radius: var(---corner-bottom-left, 8px) !important;
}

s-tabs:is([c-br], [corner-bottom-right]) > * {
  border-bottom-right-radius: var(---corner-bottom-right, 8px) !important;
}

s-tabs:is([o-color], [outline-color]) > * {
  outline-style: solid;
  outline-color: var(---outline-color, hsl(0 100% 100% / 50%)) !important;
}

s-tabs:is([o-width], [outline-width]) > * {
  outline-style: solid;
  outline-width: var(---outline-width, 8px) !important;
}

s-tabs:is([o-style], [outline-style]) > * {
  outline-style: var(---outline-style, solid) !important;
}

s-tabs:is([b-color], [border-color]) > * {
  border-style: solid;
  border-color: var(---border-color, currentColor) !important;
}

s-tabs:is([b-color-t], [border-color-top]) > * {
  border-style: solid;
  border-top-color: var(---border-color-top, currentColor) !important;
}

s-tabs:is([b-color-b], [border-color-bottom]) > * {
  border-style: solid;
  border-bottom-color: var(---border-color-bottom, currentColor) !important;
}

s-tabs:is([b-color-l], [border-color-left]) > * {
  border-style: solid;
  border-left-color: var(---border-color-left, currentColor) !important;
}

s-tabs:is([b-color-r], [border-color-right]) > * {
  border-style: solid;
  border-right-color: var(---border-color-right, currentColor) !important;
}

s-tabs:is([b-width], [border-width]) > * {
  border-style: solid;
  border-width: var(---border-width, 8px) !important;
}

s-tabs:is([b-width-t], [border-width-top]) > * {
  border-style: solid;
  border-top-width: var(---border-width-top, 8px) !important;
}

s-tabs:is([b-width-b], [border-width-bottom]) > * {
  border-style: solid;
  border-bottom-width: var(---border-width-bottom, 8px) !important;
}

s-tabs:is([b-width-l], [border-width-left]) > * {
  border-style: solid;
  border-left-width: var(---border-width-left, 8px) !important;
}

s-tabs:is([b-width-r], [border-width-right]) > * {
  border-style: solid;
  border-right-width: var(---border-width-right, 8px) !important;
}

s-tabs:is([b-style], [border-style]) > * {
  border-style: var(---border-style, solid) !important;
}

s-tabs:is([b-style-t], [border-style-top]) > * {
  border-top-style: var(---border-style-top, solid) !important;
}

s-tabs:is([b-style-b], [border-style-bottom]) > * {
  border-bottom-style: var(---border-style-bottom, solid) !important;
}

s-tabs:is([b-style-l], [border-style-left]) > * {
  border-left-style: var(---border-style-left, solid) !important;
}

s-tabs:is([b-style-r], [border-style-right]) > * {
  border-right-style: var(---border-style-right, solid) !important;
}

s-tabs:is([i], [inset]) > * {
  inset: var(---inset, 8px) !important;
}

s-tabs:is([i-t], [inset-top]) > * {
  top: var(---inset-top, 8px) !important;
}

s-tabs:is([i-b], [inset-bottom]) > * {
  bottom: var(---inset-bottom, 8px) !important;
}

s-tabs:is([i-l], [inset-left]) > * {
  left: var(---inset-left, 8px) !important;
}

s-tabs:is([i-r], [inset-right]) > * {
  right: var(---inset-right, 8px) !important;
}

s-tabs:is([m], [margin]) > * {
  margin: var(---margin, 8px) !important;
}

s-tabs:is([m-t], [margin-top]) > * {
  margin-top: var(---margin-top, 8px) !important;
}

s-tabs:is([m-b], [margin-bottom]) > * {
  margin-bottom: var(---margin-bottom, 8px) !important;
}

s-tabs:is([m-l], [margin-left]) > * {
  margin-left: var(---margin-left, 8px) !important;
}

s-tabs:is([m-r], [margin-right]) > * {
  margin-right: var(---margin-right, 8px) !important;
}

s-tabs:is([p], [padding]) > * {
  padding: var(---padding, 8px) !important;
}

s-tabs:is([p-t], [padding-top]) > * {
  padding-top: var(---padding-top, 8px) !important;
}

s-tabs:is([p-b], [padding-bottom]) > * {
  padding-bottom: var(---padding-bottom, 8px) !important;
}

s-tabs:is([p-l], [padding-left]) > * {
  padding-left: var(---padding-left, 8px) !important;
}

s-tabs:is([p-r], [padding-right]) > * {
  padding-right: var(---padding-right, 8px) !important;
}

s-tabs:is([child-layout="row"], [child-layout="column"]) > * {
  display: flex;
  flex-direction: var(---child-layout, row) !important;
}

s-tabs:is([child-layout="grid"], [child-columns]) > * {
  display: grid;
  grid-template-columns: var(---child-columns, 1fr 1fr 1fr);
}

s-tabs[child-gap] > * {
  gap: var(---child-gap, 8px) !important;
}

s-tabs[child-align] > * {
  align-items: var(---child-align, center) !important;
}

s-tabs[child-justify] > * {
  justify-content: var(---child-justify, center) !important;
}

s-tabs[child-overflow] > * {
  flex-wrap: var(---child-overflow, nowrap) !important;
}

s-tabs[self-align] > * {
  align-self: var(---self-align, center) !important;
}

s-tabs[flex] > * {
  flex: var(---flex, 1) !important;
}

s-tabs[grow] > * {
  flex-grow: var(---grow, 1) !important;
}

s-tabs[shrink] > * {
  flex-shrink: var(---shrink, 1) !important;
}

s-tabs[order] > * {
  order: var(---order, 0) !important;
}

s-tabs[fill] path > * {
  fill: var(---fill, currentColor) !important;
}

s-tabs[stroke] path > * {
  stroke: var(---stroke, currentColor) !important;
}

s-tabs[stroke-width] path > * {
  stroke-width: var(---stroke-width, 1) !important;
}

s-tabs[visible] > * {
  visibility: var(---visible, visible) !important;
}

s-tabs[interactable] > * {
  pointer-events: var(---interactable, auto) !important;
}

s-tabs[interactable="none"] > * {
  cursor: default;
}

s-tabs[selectable] > * {
  user-select: var(---selectable, auto) !important;
}

[selectable=""],
[selectable="auto"],
s-tabs[selectable="all"] > * {
  cursor: text;
}

s-tabs[cursor] > * {
  cursor: var(---cursor, auto) !important;
}

s-tabs[text-font] > * {
  font-family: var(---text-font, monospace) !important;
}

s-tabs[text-size] > * {
  font-size: var(---text-size, 1rem) !important;
}

s-tabs[text-size="2xs"] > * {
  line-height: var(---theme-text-2xs-line-height, 1.5);
}

s-tabs[text-size="xs"] > * {
  line-height: var(---theme-text-xs-line-height, 1.5);
}

s-tabs[text-size="sm"] > * {
  line-height: var(---theme-text-sm-line-height, 1.5);
}

s-tabs[text-size="md"] > * {
  line-height: var(---theme-text-md-line-height, 1.5);
}

s-tabs[text-size="lg"] > * {
  line-height: var(---theme-text-lg-line-height, 1.5);
}

s-tabs[text-size="xl"] > * {
  line-height: var(---theme-text-xl-line-height, 1.5);
}

s-tabs[text-size="2xl"] > * {
  line-height: var(---theme-text-2xl-line-height, 1.5);
}

s-tabs[text-size="3xl"] > * {
  line-height: var(---theme-text-3xl-line-height, 1.5);
}

s-tabs[text-size="4xl"] > * {
  line-height: var(---theme-text-4xl-line-height, 1.5);
}

s-tabs[text-size="5xl"] > * {
  line-height: var(---theme-text-5xl-line-height, 1.5);
}

s-tabs[text-size="6xl"] > * {
  line-height: var(---theme-text-6xl-line-height, 1.5);
}

s-tabs[text-size="7xl"] > * {
  line-height: var(---theme-text-7xl-line-height, 1.5);
}

s-tabs[text-size="8xl"] > * {
  line-height: var(---theme-text-8xl-line-height, 1.5);
}

s-tabs[text-size="9xl"] > * {
  line-height: var(---theme-text-9xl-line-height, 1.5);
}

s-tabs[text-leading] > * {
  line-height: var(---text-leading, 1.5) !important;
}

s-tabs[text-tracking] > * {
  letter-spacing: var(---text-tracking, 1.5) !important;
}

s-tabs[text-weight] > * {
  font-weight: var(---text-weight, 600) !important;
}

s-tabs[text-style] > * {
  font-style: var(---text-style, italic) !important;
}

s-tabs[text-decoration-line] > * {
  text-decoration-line: var(---text-decoration-line, underline) !important;
}

s-tabs[text-decoration-color] > * {
  text-decoration-color: var(---text-decoration-color, currentColor) !important;
}

s-tabs[text-decoration-thickness] > * {
  text-decoration-thickness: var(---text-decoration-thickness, auto) !important;
}

s-tabs[text-underline-offset] > * {
  text-underline-offset: var(---text-underline-offset, 4px) !important;
}

s-tabs[text-case] > * {
  text-transform: var(---text-case, uppercase) !important;
}

s-tabs[text-align] > * {
  text-align: var(---text-align, center) !important;
}

s-tabs[text-overflow] > * {
  text-overflow: var(---text-overflow, clip) !important;
}

s-tabs[text-overflow=""] > * {
  white-space: nowrap;
}

s-tabs[text-overflow="wrap"] > * {
  white-space: break-spaces;
}

s-tabs[text-overflow="visible"] > * {
  white-space: nowrap;
}

s-tabs[text-overflow="clip"] > * {
  white-space: nowrap;
}

s-tabs[text-overflow="ellipsis"] > * {
  overflow: hidden;
  white-space: nowrap;
}

s-tabs[text-whitespace] > * {
  white-space: var(---text-whitespace, normal) !important;
}

s-tabs[text-color] > * {
  color: var(---text-color, white) !important;
}

s-tabs[text-stroke] > * {
  text-shadow: var(---text-stroke) !important;
}

s-tabs:is([bg-color], [background-color]) > * {
  background-color: var(---background-color) !important;
}

s-tabs:is([bg-image], [background-image]) > * {
  background-image: var(---background-image, none) !important;
}

s-tabs:is([bg-repeat], [background-repeat]) > * {
  background-repeat: var(---background-repeat, repeat) !important;
}

s-tabs:is([bg-align], [background-align]) > * {
  background-position: var(---background-align, center) !important;
}

s-tabs:is([bg-fit], [background-fit]) > * {
  background-size: var(---background-fit, contain) !important;
}

s-tabs[clip] > * {
  clip-path: var(---clip, circle(50%)) !important;
}

s-tabs[filter] > * {
  filter: var(---filter, none) !important;
}

s-tabs[backdrop-filter] > * {
  backdrop-filter: var(---backdrop-filter, none) !important;
}

s-tabs[blend] > * {
  mix-blend-mode: var(---blend, normal) !important;
}

s-tabs[shadow] > * {
  box-shadow: var(
    ---shadow,
    0 1px 2px hsl(0 0% 0% / 30%),
    0 1px 3px hsl(0 0% 0% / 15%)
  ) !important;
}

s-tabs[shadow-inset] > * {
  box-shadow: var(
    ---shadow-inset,
    inset 0 1px 2px hsl(0 0% 0% / 30%),
    inset 0 1px 3px hsl(0 0% 0% / 15%)
  ) !important;
}

s-tabs[ring] > * {
  box-shadow: var(---ring, 0 0 0 2px currentColor) !important;
  outline: none !important;
}

s-tabs[opacity] > * {
  opacity: var(---opacity, 1) !important;
}

s-tabs[translate] > * {
  translate: var(---translate, none) !important;
}

s-tabs[rotate] > * {
  rotate: var(---rotate, none) !important;
}

s-tabs[scale] > * {
  scale: var(---scale, none) !important;
}

s-tabs[pivot] > * {
  transform-origin: var(---pivot, left) !important;
}

s-tabs[transition-delay] > * {
  transition-delay: var(---transition-delay, 100ms) !important;
}

s-tabs[transition-duration] > * {
  transition-duration: var(---transition-duration, 100ms) !important;
}

s-tabs[transition-easing] > * {
  transition-timing-function: var(---transition-easing, ease) !important;
}

s-tabs[animation] > * {
  animation: var(---animation, var(---theme-animation-bounce)) !important;
}

s-tabs[mask] > * {
  ---theme-mask-angled-corner: conic-gradient(
        from -45deg at var(---corner, 8px) var(---corner, 8px),
        #0000 25%,
        #000 0
      )
      calc(-1 * var(---corner, 8px)) 0 /100% 51% repeat-x,
    conic-gradient(
        from 135deg at var(---corner, 8px) calc(100% - var(---corner, 8px)),
        #0000 25%,
        #000 0
      )
      calc(-1 * var(---corner, 8px)) 100%/100% 51% repeat-x !important;
  ---theme-mask-scooped-corner: radial-gradient(
      var(---corner, 8px) at var(---corner, 8px) var(---corner, 8px),
      #0000 99%,
      #000
    )
    calc(-1 * var(---corner, 8px)) calc(-1 * var(---corner, 8px)) !important;
  ---theme-mask-notched-corner: conic-gradient(
      at calc(2 * var(---corner, 8px)) calc(2 * var(---corner, 8px)),
      #000 75%,
      #0000 0
    )
    calc(-1 * var(---corner, 8px)) calc(-1 * var(---corner, 8px)) !important;
  background-color: transparent !important;
  background-image: none !important;
}

s-tabs[mask]::before > * {
  /* Apply mask to a pseudo-element so that drop-shadow filters applied to the root element will match the shape of the mask */
  position: absolute !important;
  inset: 0 !important;
  content: "" !important;
  background-image: var(---background-image, none) !important;
  background-color: var(---background-color) !important;
  -webkit-mask: var(---mask, none) !important;
  mask: var(---mask, none) !important;
}

s-tabs[content-visibility] > * {
  content-visibility: var(---content-visibility, auto);
}

s-tabs[contain-intrinsic-size] > * {
  contain-intrinsic-size: var(---contain-intrinsic-size, none);
}

s-tabs {
  display: contents;
  ---indicator-color: var(---theme-color-primary-60);
  ---child-layout: column;
  ---position: relative;
  ---duration: 150ms;
  ---indicator-width: 2px;
  ---ease: cubic-bezier(0.4, 0, 0.2, 1);
}

s-tabs[indicator="none"] > .root {
  ---indicator-width: 0 !important;
}

s-tabs > .root {
  display: flex;
  flex-direction: var(---child-layout);
  position: var(---position);
}

s-tabs[vertical] > .root {
  flex-direction: row;
}

s-tabs > .root > .nav {
  flex: 1;
  display: flex;
  flex-direction: row;
  overflow-x: visible;
  overflow-y: visible;
  /* Hide scrollbar in Firefox */
  scrollbar-width: none;
  max-height: 100%;
}

s-tabs > .root > .nav::-webkit-scrollbar {
  /* Hide scrollbar in chrome/safari */
  width: 0;
  height: 0;
}

s-tabs[indicator="before"] > .root > .nav {
  order: 1;
}

s-tabs[vertical] > .root > .nav {
  flex-direction: column;
}

s-tabs > .root > .indicator {
  position: relative;
  background-color: var(---indicator-color);
  transition-property: transform;
  transition-duration: var(---duration);
  transition-timing-function: var(---ease);
  will-change: transform;
}

s-tabs:not([vertical]) > .root > .indicator {
  bottom: var(---indicator-width);
  transform-origin: left;
  height: var(---indicator-width);
  width: 1px;
}

s-tabs[vertical] > .root > .indicator {
  right: var(---indicator-width);
  transform-origin: top;
  height: 1px;
  width: var(---indicator-width);
}

s-tooltip* > * {
  transition-property: opacity, translate, rotate, scale, transform, filter,
    backdrop-filter, clip-path, mix-blend-mode, box-shadow, color,
    background-color, border-color, text-decoration-color, fill, stroke;
}

s-tooltip[display] > * {
  display: var(---display, flex) !important;
}

s-tooltip[position] > * {
  position: var(---position, absolute) !important;
}

s-tooltip[position="sticky-top"] > * {
  inset: 0 0 auto 0;
  z-index: 1;
}

s-tooltip[position="sticky-bottom"] > * {
  inset: auto 0 0 0;
  z-index: 1;
}

s-tooltip[position="sticky-left"] > * {
  inset: 0 auto 0 0;
  z-index: 1;
}

s-tooltip[position="sticky-right"] > * {
  inset: 0 0 0 auto;
  z-index: 1;
}

s-tooltip[position="fixed-top"] > * {
  inset: 0 0 auto 0;
  z-index: 1;
}

s-tooltip[position="fixed-bottom"] > * {
  inset: auto 0 0 0;
  z-index: 1;
}

s-tooltip[position="fixed-left"] > * {
  inset: 0 auto 0 0;
  z-index: 1;
}

s-tooltip[position="fixed-right"] > * {
  inset: 0 0 0 auto;
  z-index: 1;
}

s-tooltip[aspect] > * {
  aspect-ratio: var(---aspect, 1) !important;
}

s-tooltip[overflow] > * {
  overflow: var(---overflow, scroll) !important;
}

s-tooltip[overflow-x] > * {
  overflow-x: var(---overflow-x, scroll) !important;
}

s-tooltip[overflow-y] > * {
  overflow-y: var(---overflow-y, scroll) !important;
}

s-tooltip[z] > * {
  z-index: var(---z, 1) !important;
}

s-tooltip:is([w], [width]) > * {
  width: var(---width, 100%) !important;
}

s-tooltip:is([w-min], [width-min]) > * {
  min-width: var(---width-min, 0) !important;
}

s-tooltip:is([w-max], [width-max]) > * {
  max-width: var(---width-max, 100%) !important;
}

s-tooltip:is([h], [height]) > * {
  height: var(---height, 100%) !important;
}

s-tooltip:is([h-min], [height-min]) > * {
  min-height: var(---height-min, 0) !important;
}

s-tooltip:is([h-max], [height-max]) > * {
  max-height: var(---height-max, 100%) !important;
}

s-tooltip:is([c], [corner]) > * {
  border-radius: var(---corner, 8px) !important;
}

s-tooltip:is([c-tl], [corner-top-left]) > * {
  border-top-left-radius: var(---corner-top-left, 8px) !important;
}

s-tooltip:is([c-tr], [corner-top-right]) > * {
  border-top-right-radius: var(---corner-top-right, 8px) !important;
}

s-tooltip:is([c-bl], [corner-bottom-left]) > * {
  border-bottom-left-radius: var(---corner-bottom-left, 8px) !important;
}

s-tooltip:is([c-br], [corner-bottom-right]) > * {
  border-bottom-right-radius: var(---corner-bottom-right, 8px) !important;
}

s-tooltip:is([o-color], [outline-color]) > * {
  outline-style: solid;
  outline-color: var(---outline-color, hsl(0 100% 100% / 50%)) !important;
}

s-tooltip:is([o-width], [outline-width]) > * {
  outline-style: solid;
  outline-width: var(---outline-width, 8px) !important;
}

s-tooltip:is([o-style], [outline-style]) > * {
  outline-style: var(---outline-style, solid) !important;
}

s-tooltip:is([b-color], [border-color]) > * {
  border-style: solid;
  border-color: var(---border-color, currentColor) !important;
}

s-tooltip:is([b-color-t], [border-color-top]) > * {
  border-style: solid;
  border-top-color: var(---border-color-top, currentColor) !important;
}

s-tooltip:is([b-color-b], [border-color-bottom]) > * {
  border-style: solid;
  border-bottom-color: var(---border-color-bottom, currentColor) !important;
}

s-tooltip:is([b-color-l], [border-color-left]) > * {
  border-style: solid;
  border-left-color: var(---border-color-left, currentColor) !important;
}

s-tooltip:is([b-color-r], [border-color-right]) > * {
  border-style: solid;
  border-right-color: var(---border-color-right, currentColor) !important;
}

s-tooltip:is([b-width], [border-width]) > * {
  border-style: solid;
  border-width: var(---border-width, 8px) !important;
}

s-tooltip:is([b-width-t], [border-width-top]) > * {
  border-style: solid;
  border-top-width: var(---border-width-top, 8px) !important;
}

s-tooltip:is([b-width-b], [border-width-bottom]) > * {
  border-style: solid;
  border-bottom-width: var(---border-width-bottom, 8px) !important;
}

s-tooltip:is([b-width-l], [border-width-left]) > * {
  border-style: solid;
  border-left-width: var(---border-width-left, 8px) !important;
}

s-tooltip:is([b-width-r], [border-width-right]) > * {
  border-style: solid;
  border-right-width: var(---border-width-right, 8px) !important;
}

s-tooltip:is([b-style], [border-style]) > * {
  border-style: var(---border-style, solid) !important;
}

s-tooltip:is([b-style-t], [border-style-top]) > * {
  border-top-style: var(---border-style-top, solid) !important;
}

s-tooltip:is([b-style-b], [border-style-bottom]) > * {
  border-bottom-style: var(---border-style-bottom, solid) !important;
}

s-tooltip:is([b-style-l], [border-style-left]) > * {
  border-left-style: var(---border-style-left, solid) !important;
}

s-tooltip:is([b-style-r], [border-style-right]) > * {
  border-right-style: var(---border-style-right, solid) !important;
}

s-tooltip:is([i], [inset]) > * {
  inset: var(---inset, 8px) !important;
}

s-tooltip:is([i-t], [inset-top]) > * {
  top: var(---inset-top, 8px) !important;
}

s-tooltip:is([i-b], [inset-bottom]) > * {
  bottom: var(---inset-bottom, 8px) !important;
}

s-tooltip:is([i-l], [inset-left]) > * {
  left: var(---inset-left, 8px) !important;
}

s-tooltip:is([i-r], [inset-right]) > * {
  right: var(---inset-right, 8px) !important;
}

s-tooltip:is([m], [margin]) > * {
  margin: var(---margin, 8px) !important;
}

s-tooltip:is([m-t], [margin-top]) > * {
  margin-top: var(---margin-top, 8px) !important;
}

s-tooltip:is([m-b], [margin-bottom]) > * {
  margin-bottom: var(---margin-bottom, 8px) !important;
}

s-tooltip:is([m-l], [margin-left]) > * {
  margin-left: var(---margin-left, 8px) !important;
}

s-tooltip:is([m-r], [margin-right]) > * {
  margin-right: var(---margin-right, 8px) !important;
}

s-tooltip:is([p], [padding]) > * {
  padding: var(---padding, 8px) !important;
}

s-tooltip:is([p-t], [padding-top]) > * {
  padding-top: var(---padding-top, 8px) !important;
}

s-tooltip:is([p-b], [padding-bottom]) > * {
  padding-bottom: var(---padding-bottom, 8px) !important;
}

s-tooltip:is([p-l], [padding-left]) > * {
  padding-left: var(---padding-left, 8px) !important;
}

s-tooltip:is([p-r], [padding-right]) > * {
  padding-right: var(---padding-right, 8px) !important;
}

s-tooltip:is([child-layout="row"], [child-layout="column"]) > * {
  display: flex;
  flex-direction: var(---child-layout, row) !important;
}

s-tooltip:is([child-layout="grid"], [child-columns]) > * {
  display: grid;
  grid-template-columns: var(---child-columns, 1fr 1fr 1fr);
}

s-tooltip[child-gap] > * {
  gap: var(---child-gap, 8px) !important;
}

s-tooltip[child-align] > * {
  align-items: var(---child-align, center) !important;
}

s-tooltip[child-justify] > * {
  justify-content: var(---child-justify, center) !important;
}

s-tooltip[child-overflow] > * {
  flex-wrap: var(---child-overflow, nowrap) !important;
}

s-tooltip[self-align] > * {
  align-self: var(---self-align, center) !important;
}

s-tooltip[flex] > * {
  flex: var(---flex, 1) !important;
}

s-tooltip[grow] > * {
  flex-grow: var(---grow, 1) !important;
}

s-tooltip[shrink] > * {
  flex-shrink: var(---shrink, 1) !important;
}

s-tooltip[order] > * {
  order: var(---order, 0) !important;
}

s-tooltip[fill] path > * {
  fill: var(---fill, currentColor) !important;
}

s-tooltip[stroke] path > * {
  stroke: var(---stroke, currentColor) !important;
}

s-tooltip[stroke-width] path > * {
  stroke-width: var(---stroke-width, 1) !important;
}

s-tooltip[visible] > * {
  visibility: var(---visible, visible) !important;
}

s-tooltip[interactable] > * {
  pointer-events: var(---interactable, auto) !important;
}

s-tooltip[interactable="none"] > * {
  cursor: default;
}

s-tooltip[selectable] > * {
  user-select: var(---selectable, auto) !important;
}

[selectable=""],
[selectable="auto"],
s-tooltip[selectable="all"] > * {
  cursor: text;
}

s-tooltip[cursor] > * {
  cursor: var(---cursor, auto) !important;
}

s-tooltip[text-font] > * {
  font-family: var(---text-font, monospace) !important;
}

s-tooltip[text-size] > * {
  font-size: var(---text-size, 1rem) !important;
}

s-tooltip[text-size="2xs"] > * {
  line-height: var(---theme-text-2xs-line-height, 1.5);
}

s-tooltip[text-size="xs"] > * {
  line-height: var(---theme-text-xs-line-height, 1.5);
}

s-tooltip[text-size="sm"] > * {
  line-height: var(---theme-text-sm-line-height, 1.5);
}

s-tooltip[text-size="md"] > * {
  line-height: var(---theme-text-md-line-height, 1.5);
}

s-tooltip[text-size="lg"] > * {
  line-height: var(---theme-text-lg-line-height, 1.5);
}

s-tooltip[text-size="xl"] > * {
  line-height: var(---theme-text-xl-line-height, 1.5);
}

s-tooltip[text-size="2xl"] > * {
  line-height: var(---theme-text-2xl-line-height, 1.5);
}

s-tooltip[text-size="3xl"] > * {
  line-height: var(---theme-text-3xl-line-height, 1.5);
}

s-tooltip[text-size="4xl"] > * {
  line-height: var(---theme-text-4xl-line-height, 1.5);
}

s-tooltip[text-size="5xl"] > * {
  line-height: var(---theme-text-5xl-line-height, 1.5);
}

s-tooltip[text-size="6xl"] > * {
  line-height: var(---theme-text-6xl-line-height, 1.5);
}

s-tooltip[text-size="7xl"] > * {
  line-height: var(---theme-text-7xl-line-height, 1.5);
}

s-tooltip[text-size="8xl"] > * {
  line-height: var(---theme-text-8xl-line-height, 1.5);
}

s-tooltip[text-size="9xl"] > * {
  line-height: var(---theme-text-9xl-line-height, 1.5);
}

s-tooltip[text-leading] > * {
  line-height: var(---text-leading, 1.5) !important;
}

s-tooltip[text-tracking] > * {
  letter-spacing: var(---text-tracking, 1.5) !important;
}

s-tooltip[text-weight] > * {
  font-weight: var(---text-weight, 600) !important;
}

s-tooltip[text-style] > * {
  font-style: var(---text-style, italic) !important;
}

s-tooltip[text-decoration-line] > * {
  text-decoration-line: var(---text-decoration-line, underline) !important;
}

s-tooltip[text-decoration-color] > * {
  text-decoration-color: var(---text-decoration-color, currentColor) !important;
}

s-tooltip[text-decoration-thickness] > * {
  text-decoration-thickness: var(---text-decoration-thickness, auto) !important;
}

s-tooltip[text-underline-offset] > * {
  text-underline-offset: var(---text-underline-offset, 4px) !important;
}

s-tooltip[text-case] > * {
  text-transform: var(---text-case, uppercase) !important;
}

s-tooltip[text-align] > * {
  text-align: var(---text-align, center) !important;
}

s-tooltip[text-overflow] > * {
  text-overflow: var(---text-overflow, clip) !important;
}

s-tooltip[text-overflow=""] > * {
  white-space: nowrap;
}

s-tooltip[text-overflow="wrap"] > * {
  white-space: break-spaces;
}

s-tooltip[text-overflow="visible"] > * {
  white-space: nowrap;
}

s-tooltip[text-overflow="clip"] > * {
  white-space: nowrap;
}

s-tooltip[text-overflow="ellipsis"] > * {
  overflow: hidden;
  white-space: nowrap;
}

s-tooltip[text-whitespace] > * {
  white-space: var(---text-whitespace, normal) !important;
}

s-tooltip[text-color] > * {
  color: var(---text-color, white) !important;
}

s-tooltip[text-stroke] > * {
  text-shadow: var(---text-stroke) !important;
}

s-tooltip:is([bg-color], [background-color]) > * {
  background-color: var(---background-color) !important;
}

s-tooltip:is([bg-image], [background-image]) > * {
  background-image: var(---background-image, none) !important;
}

s-tooltip:is([bg-repeat], [background-repeat]) > * {
  background-repeat: var(---background-repeat, repeat) !important;
}

s-tooltip:is([bg-align], [background-align]) > * {
  background-position: var(---background-align, center) !important;
}

s-tooltip:is([bg-fit], [background-fit]) > * {
  background-size: var(---background-fit, contain) !important;
}

s-tooltip[clip] > * {
  clip-path: var(---clip, circle(50%)) !important;
}

s-tooltip[filter] > * {
  filter: var(---filter, none) !important;
}

s-tooltip[backdrop-filter] > * {
  backdrop-filter: var(---backdrop-filter, none) !important;
}

s-tooltip[blend] > * {
  mix-blend-mode: var(---blend, normal) !important;
}

s-tooltip[shadow] > * {
  box-shadow: var(
    ---shadow,
    0 1px 2px hsl(0 0% 0% / 30%),
    0 1px 3px hsl(0 0% 0% / 15%)
  ) !important;
}

s-tooltip[shadow-inset] > * {
  box-shadow: var(
    ---shadow-inset,
    inset 0 1px 2px hsl(0 0% 0% / 30%),
    inset 0 1px 3px hsl(0 0% 0% / 15%)
  ) !important;
}

s-tooltip[ring] > * {
  box-shadow: var(---ring, 0 0 0 2px currentColor) !important;
  outline: none !important;
}

s-tooltip[opacity] > * {
  opacity: var(---opacity, 1) !important;
}

s-tooltip[translate] > * {
  translate: var(---translate, none) !important;
}

s-tooltip[rotate] > * {
  rotate: var(---rotate, none) !important;
}

s-tooltip[scale] > * {
  scale: var(---scale, none) !important;
}

s-tooltip[pivot] > * {
  transform-origin: var(---pivot, left) !important;
}

s-tooltip[transition-delay] > * {
  transition-delay: var(---transition-delay, 100ms) !important;
}

s-tooltip[transition-duration] > * {
  transition-duration: var(---transition-duration, 100ms) !important;
}

s-tooltip[transition-easing] > * {
  transition-timing-function: var(---transition-easing, ease) !important;
}

s-tooltip[animation] > * {
  animation: var(---animation, var(---theme-animation-bounce)) !important;
}

s-tooltip[mask] > * {
  ---theme-mask-angled-corner: conic-gradient(
        from -45deg at var(---corner, 8px) var(---corner, 8px),
        #0000 25%,
        #000 0
      )
      calc(-1 * var(---corner, 8px)) 0 /100% 51% repeat-x,
    conic-gradient(
        from 135deg at var(---corner, 8px) calc(100% - var(---corner, 8px)),
        #0000 25%,
        #000 0
      )
      calc(-1 * var(---corner, 8px)) 100%/100% 51% repeat-x !important;
  ---theme-mask-scooped-corner: radial-gradient(
      var(---corner, 8px) at var(---corner, 8px) var(---corner, 8px),
      #0000 99%,
      #000
    )
    calc(-1 * var(---corner, 8px)) calc(-1 * var(---corner, 8px)) !important;
  ---theme-mask-notched-corner: conic-gradient(
      at calc(2 * var(---corner, 8px)) calc(2 * var(---corner, 8px)),
      #000 75%,
      #0000 0
    )
    calc(-1 * var(---corner, 8px)) calc(-1 * var(---corner, 8px)) !important;
  background-color: transparent !important;
  background-image: none !important;
}

s-tooltip[mask]::before > * {
  /* Apply mask to a pseudo-element so that drop-shadow filters applied to the root element will match the shape of the mask */
  position: absolute !important;
  inset: 0 !important;
  content: "" !important;
  background-image: var(---background-image, none) !important;
  background-color: var(---background-color) !important;
  -webkit-mask: var(---mask, none) !important;
  mask: var(---mask, none) !important;
}

s-tooltip[content-visibility] > * {
  content-visibility: var(---content-visibility, auto);
}

s-tooltip[contain-intrinsic-size] > * {
  contain-intrinsic-size: var(---contain-intrinsic-size, none);
}

s-tooltip {
  display: contents;
  ---position: absolute;
  ---width-max: 20rem;
  ---hide-delay: 0ms;
  ---show-delay: 75ms;
  ---interactable: auto;
  ---width: max-content;
  ---z: var(---theme-z-index-tooltip);
  ---background-color: var(---theme-tooltip-background-color);
  ---text-font: var(---theme-tooltip-font-family);
  ---text-size: var(---theme-tooltip-font-size);
  ---text-weight: var(---theme-tooltip-font-weight);
  ---text-leading: var(---theme-tooltip-line-height);
  ---text-color: var(---theme-tooltip-color);
  ---corner: var(---theme-tooltip-border-radius);
  ---padding-tb: 4px;
  ---padding-lr: 8px;
  ---shadow: var(---theme-shadow-box-2);
  ---enter: var(---theme-animation-open);
  ---exit: var(---theme-animation-close);
  ---ease: ease-out;
}

s-tooltip > .root {
  display: contents;
}

s-tooltip > .popup {
  will-change: transform, opacity;
}

s-tooltip[open] > .popup[anchored] {
  animation: var(---enter) forwards;
  animation-timing-function: var(---ease);
}

s-tooltip:not([open]) > .popup[anchored] {
  animation: var(---exit) forwards;
  animation-timing-function: var(---ease);
}

s-tooltip > .popup {
  isolation: isolate;
  pointer-events: var(---interactable);
  z-index: var(---z);
  position: var(---position);
  width: var(---width);
  max-width: var(---width-max);
  background-color: var(---background-color);
  font-family: var(---text-font);
  font-size: var(---text-size);
  font-weight: var(---text-weight);
  line-height: var(---text-leading);
  color: var(---text-color);
  border-radius: var(---corner);
  padding-block: var(---padding-tb);
  padding-inline: var(---padding-lr);
  max-width: var(---auto-size-available-width, none);
  max-height: var(---auto-size-available-height, none);
  box-shadow: var(---shadow);
}

s-tooltip > .popup.fixed {
  position: fixed;
}

s-tooltip[placement^="top"] > .popup {
  transform-origin: bottom;
}

s-tooltip[placement^="bottom"] > .popup {
  transform-origin: top;
}

s-tooltip[placement^="left"] > .popup {
  transform-origin: right;
}

s-tooltip[placement^="right"] > .popup {
  transform-origin: left;
}

s-dropdown* > * {
  transition-property: opacity, translate, rotate, scale, transform, filter,
    backdrop-filter, clip-path, mix-blend-mode, box-shadow, color,
    background-color, border-color, text-decoration-color, fill, stroke;
}

s-dropdown[display] > * {
  display: var(---display, flex) !important;
}

s-dropdown[position] > * {
  position: var(---position, absolute) !important;
}

s-dropdown[position="sticky-top"] > * {
  inset: 0 0 auto 0;
  z-index: 1;
}

s-dropdown[position="sticky-bottom"] > * {
  inset: auto 0 0 0;
  z-index: 1;
}

s-dropdown[position="sticky-left"] > * {
  inset: 0 auto 0 0;
  z-index: 1;
}

s-dropdown[position="sticky-right"] > * {
  inset: 0 0 0 auto;
  z-index: 1;
}

s-dropdown[position="fixed-top"] > * {
  inset: 0 0 auto 0;
  z-index: 1;
}

s-dropdown[position="fixed-bottom"] > * {
  inset: auto 0 0 0;
  z-index: 1;
}

s-dropdown[position="fixed-left"] > * {
  inset: 0 auto 0 0;
  z-index: 1;
}

s-dropdown[position="fixed-right"] > * {
  inset: 0 0 0 auto;
  z-index: 1;
}

s-dropdown[aspect] > * {
  aspect-ratio: var(---aspect, 1) !important;
}

s-dropdown[overflow] > * {
  overflow: var(---overflow, scroll) !important;
}

s-dropdown[overflow-x] > * {
  overflow-x: var(---overflow-x, scroll) !important;
}

s-dropdown[overflow-y] > * {
  overflow-y: var(---overflow-y, scroll) !important;
}

s-dropdown[z] > * {
  z-index: var(---z, 1) !important;
}

s-dropdown:is([w], [width]) > * {
  width: var(---width, 100%) !important;
}

s-dropdown:is([w-min], [width-min]) > * {
  min-width: var(---width-min, 0) !important;
}

s-dropdown:is([w-max], [width-max]) > * {
  max-width: var(---width-max, 100%) !important;
}

s-dropdown:is([h], [height]) > * {
  height: var(---height, 100%) !important;
}

s-dropdown:is([h-min], [height-min]) > * {
  min-height: var(---height-min, 0) !important;
}

s-dropdown:is([h-max], [height-max]) > * {
  max-height: var(---height-max, 100%) !important;
}

s-dropdown:is([c], [corner]) > * {
  border-radius: var(---corner, 8px) !important;
}

s-dropdown:is([c-tl], [corner-top-left]) > * {
  border-top-left-radius: var(---corner-top-left, 8px) !important;
}

s-dropdown:is([c-tr], [corner-top-right]) > * {
  border-top-right-radius: var(---corner-top-right, 8px) !important;
}

s-dropdown:is([c-bl], [corner-bottom-left]) > * {
  border-bottom-left-radius: var(---corner-bottom-left, 8px) !important;
}

s-dropdown:is([c-br], [corner-bottom-right]) > * {
  border-bottom-right-radius: var(---corner-bottom-right, 8px) !important;
}

s-dropdown:is([o-color], [outline-color]) > * {
  outline-style: solid;
  outline-color: var(---outline-color, hsl(0 100% 100% / 50%)) !important;
}

s-dropdown:is([o-width], [outline-width]) > * {
  outline-style: solid;
  outline-width: var(---outline-width, 8px) !important;
}

s-dropdown:is([o-style], [outline-style]) > * {
  outline-style: var(---outline-style, solid) !important;
}

s-dropdown:is([b-color], [border-color]) > * {
  border-style: solid;
  border-color: var(---border-color, currentColor) !important;
}

s-dropdown:is([b-color-t], [border-color-top]) > * {
  border-style: solid;
  border-top-color: var(---border-color-top, currentColor) !important;
}

s-dropdown:is([b-color-b], [border-color-bottom]) > * {
  border-style: solid;
  border-bottom-color: var(---border-color-bottom, currentColor) !important;
}

s-dropdown:is([b-color-l], [border-color-left]) > * {
  border-style: solid;
  border-left-color: var(---border-color-left, currentColor) !important;
}

s-dropdown:is([b-color-r], [border-color-right]) > * {
  border-style: solid;
  border-right-color: var(---border-color-right, currentColor) !important;
}

s-dropdown:is([b-width], [border-width]) > * {
  border-style: solid;
  border-width: var(---border-width, 8px) !important;
}

s-dropdown:is([b-width-t], [border-width-top]) > * {
  border-style: solid;
  border-top-width: var(---border-width-top, 8px) !important;
}

s-dropdown:is([b-width-b], [border-width-bottom]) > * {
  border-style: solid;
  border-bottom-width: var(---border-width-bottom, 8px) !important;
}

s-dropdown:is([b-width-l], [border-width-left]) > * {
  border-style: solid;
  border-left-width: var(---border-width-left, 8px) !important;
}

s-dropdown:is([b-width-r], [border-width-right]) > * {
  border-style: solid;
  border-right-width: var(---border-width-right, 8px) !important;
}

s-dropdown:is([b-style], [border-style]) > * {
  border-style: var(---border-style, solid) !important;
}

s-dropdown:is([b-style-t], [border-style-top]) > * {
  border-top-style: var(---border-style-top, solid) !important;
}

s-dropdown:is([b-style-b], [border-style-bottom]) > * {
  border-bottom-style: var(---border-style-bottom, solid) !important;
}

s-dropdown:is([b-style-l], [border-style-left]) > * {
  border-left-style: var(---border-style-left, solid) !important;
}

s-dropdown:is([b-style-r], [border-style-right]) > * {
  border-right-style: var(---border-style-right, solid) !important;
}

s-dropdown:is([i], [inset]) > * {
  inset: var(---inset, 8px) !important;
}

s-dropdown:is([i-t], [inset-top]) > * {
  top: var(---inset-top, 8px) !important;
}

s-dropdown:is([i-b], [inset-bottom]) > * {
  bottom: var(---inset-bottom, 8px) !important;
}

s-dropdown:is([i-l], [inset-left]) > * {
  left: var(---inset-left, 8px) !important;
}

s-dropdown:is([i-r], [inset-right]) > * {
  right: var(---inset-right, 8px) !important;
}

s-dropdown:is([m], [margin]) > * {
  margin: var(---margin, 8px) !important;
}

s-dropdown:is([m-t], [margin-top]) > * {
  margin-top: var(---margin-top, 8px) !important;
}

s-dropdown:is([m-b], [margin-bottom]) > * {
  margin-bottom: var(---margin-bottom, 8px) !important;
}

s-dropdown:is([m-l], [margin-left]) > * {
  margin-left: var(---margin-left, 8px) !important;
}

s-dropdown:is([m-r], [margin-right]) > * {
  margin-right: var(---margin-right, 8px) !important;
}

s-dropdown:is([p], [padding]) > * {
  padding: var(---padding, 8px) !important;
}

s-dropdown:is([p-t], [padding-top]) > * {
  padding-top: var(---padding-top, 8px) !important;
}

s-dropdown:is([p-b], [padding-bottom]) > * {
  padding-bottom: var(---padding-bottom, 8px) !important;
}

s-dropdown:is([p-l], [padding-left]) > * {
  padding-left: var(---padding-left, 8px) !important;
}

s-dropdown:is([p-r], [padding-right]) > * {
  padding-right: var(---padding-right, 8px) !important;
}

s-dropdown:is([child-layout="row"], [child-layout="column"]) > * {
  display: flex;
  flex-direction: var(---child-layout, row) !important;
}

s-dropdown:is([child-layout="grid"], [child-columns]) > * {
  display: grid;
  grid-template-columns: var(---child-columns, 1fr 1fr 1fr);
}

s-dropdown[child-gap] > * {
  gap: var(---child-gap, 8px) !important;
}

s-dropdown[child-align] > * {
  align-items: var(---child-align, center) !important;
}

s-dropdown[child-justify] > * {
  justify-content: var(---child-justify, center) !important;
}

s-dropdown[child-overflow] > * {
  flex-wrap: var(---child-overflow, nowrap) !important;
}

s-dropdown[self-align] > * {
  align-self: var(---self-align, center) !important;
}

s-dropdown[flex] > * {
  flex: var(---flex, 1) !important;
}

s-dropdown[grow] > * {
  flex-grow: var(---grow, 1) !important;
}

s-dropdown[shrink] > * {
  flex-shrink: var(---shrink, 1) !important;
}

s-dropdown[order] > * {
  order: var(---order, 0) !important;
}

s-dropdown[fill] path > * {
  fill: var(---fill, currentColor) !important;
}

s-dropdown[stroke] path > * {
  stroke: var(---stroke, currentColor) !important;
}

s-dropdown[stroke-width] path > * {
  stroke-width: var(---stroke-width, 1) !important;
}

s-dropdown[visible] > * {
  visibility: var(---visible, visible) !important;
}

s-dropdown[interactable] > * {
  pointer-events: var(---interactable, auto) !important;
}

s-dropdown[interactable="none"] > * {
  cursor: default;
}

s-dropdown[selectable] > * {
  user-select: var(---selectable, auto) !important;
}

[selectable=""],
[selectable="auto"],
s-dropdown[selectable="all"] > * {
  cursor: text;
}

s-dropdown[cursor] > * {
  cursor: var(---cursor, auto) !important;
}

s-dropdown[text-font] > * {
  font-family: var(---text-font, monospace) !important;
}

s-dropdown[text-size] > * {
  font-size: var(---text-size, 1rem) !important;
}

s-dropdown[text-size="2xs"] > * {
  line-height: var(---theme-text-2xs-line-height, 1.5);
}

s-dropdown[text-size="xs"] > * {
  line-height: var(---theme-text-xs-line-height, 1.5);
}

s-dropdown[text-size="sm"] > * {
  line-height: var(---theme-text-sm-line-height, 1.5);
}

s-dropdown[text-size="md"] > * {
  line-height: var(---theme-text-md-line-height, 1.5);
}

s-dropdown[text-size="lg"] > * {
  line-height: var(---theme-text-lg-line-height, 1.5);
}

s-dropdown[text-size="xl"] > * {
  line-height: var(---theme-text-xl-line-height, 1.5);
}

s-dropdown[text-size="2xl"] > * {
  line-height: var(---theme-text-2xl-line-height, 1.5);
}

s-dropdown[text-size="3xl"] > * {
  line-height: var(---theme-text-3xl-line-height, 1.5);
}

s-dropdown[text-size="4xl"] > * {
  line-height: var(---theme-text-4xl-line-height, 1.5);
}

s-dropdown[text-size="5xl"] > * {
  line-height: var(---theme-text-5xl-line-height, 1.5);
}

s-dropdown[text-size="6xl"] > * {
  line-height: var(---theme-text-6xl-line-height, 1.5);
}

s-dropdown[text-size="7xl"] > * {
  line-height: var(---theme-text-7xl-line-height, 1.5);
}

s-dropdown[text-size="8xl"] > * {
  line-height: var(---theme-text-8xl-line-height, 1.5);
}

s-dropdown[text-size="9xl"] > * {
  line-height: var(---theme-text-9xl-line-height, 1.5);
}

s-dropdown[text-leading] > * {
  line-height: var(---text-leading, 1.5) !important;
}

s-dropdown[text-tracking] > * {
  letter-spacing: var(---text-tracking, 1.5) !important;
}

s-dropdown[text-weight] > * {
  font-weight: var(---text-weight, 600) !important;
}

s-dropdown[text-style] > * {
  font-style: var(---text-style, italic) !important;
}

s-dropdown[text-decoration-line] > * {
  text-decoration-line: var(---text-decoration-line, underline) !important;
}

s-dropdown[text-decoration-color] > * {
  text-decoration-color: var(---text-decoration-color, currentColor) !important;
}

s-dropdown[text-decoration-thickness] > * {
  text-decoration-thickness: var(---text-decoration-thickness, auto) !important;
}

s-dropdown[text-underline-offset] > * {
  text-underline-offset: var(---text-underline-offset, 4px) !important;
}

s-dropdown[text-case] > * {
  text-transform: var(---text-case, uppercase) !important;
}

s-dropdown[text-align] > * {
  text-align: var(---text-align, center) !important;
}

s-dropdown[text-overflow] > * {
  text-overflow: var(---text-overflow, clip) !important;
}

s-dropdown[text-overflow=""] > * {
  white-space: nowrap;
}

s-dropdown[text-overflow="wrap"] > * {
  white-space: break-spaces;
}

s-dropdown[text-overflow="visible"] > * {
  white-space: nowrap;
}

s-dropdown[text-overflow="clip"] > * {
  white-space: nowrap;
}

s-dropdown[text-overflow="ellipsis"] > * {
  overflow: hidden;
  white-space: nowrap;
}

s-dropdown[text-whitespace] > * {
  white-space: var(---text-whitespace, normal) !important;
}

s-dropdown[text-color] > * {
  color: var(---text-color, white) !important;
}

s-dropdown[text-stroke] > * {
  text-shadow: var(---text-stroke) !important;
}

s-dropdown:is([bg-color], [background-color]) > * {
  background-color: var(---background-color) !important;
}

s-dropdown:is([bg-image], [background-image]) > * {
  background-image: var(---background-image, none) !important;
}

s-dropdown:is([bg-repeat], [background-repeat]) > * {
  background-repeat: var(---background-repeat, repeat) !important;
}

s-dropdown:is([bg-align], [background-align]) > * {
  background-position: var(---background-align, center) !important;
}

s-dropdown:is([bg-fit], [background-fit]) > * {
  background-size: var(---background-fit, contain) !important;
}

s-dropdown[clip] > * {
  clip-path: var(---clip, circle(50%)) !important;
}

s-dropdown[filter] > * {
  filter: var(---filter, none) !important;
}

s-dropdown[backdrop-filter] > * {
  backdrop-filter: var(---backdrop-filter, none) !important;
}

s-dropdown[blend] > * {
  mix-blend-mode: var(---blend, normal) !important;
}

s-dropdown[shadow] > * {
  box-shadow: var(
    ---shadow,
    0 1px 2px hsl(0 0% 0% / 30%),
    0 1px 3px hsl(0 0% 0% / 15%)
  ) !important;
}

s-dropdown[shadow-inset] > * {
  box-shadow: var(
    ---shadow-inset,
    inset 0 1px 2px hsl(0 0% 0% / 30%),
    inset 0 1px 3px hsl(0 0% 0% / 15%)
  ) !important;
}

s-dropdown[ring] > * {
  box-shadow: var(---ring, 0 0 0 2px currentColor) !important;
  outline: none !important;
}

s-dropdown[opacity] > * {
  opacity: var(---opacity, 1) !important;
}

s-dropdown[translate] > * {
  translate: var(---translate, none) !important;
}

s-dropdown[rotate] > * {
  rotate: var(---rotate, none) !important;
}

s-dropdown[scale] > * {
  scale: var(---scale, none) !important;
}

s-dropdown[pivot] > * {
  transform-origin: var(---pivot, left) !important;
}

s-dropdown[transition-delay] > * {
  transition-delay: var(---transition-delay, 100ms) !important;
}

s-dropdown[transition-duration] > * {
  transition-duration: var(---transition-duration, 100ms) !important;
}

s-dropdown[transition-easing] > * {
  transition-timing-function: var(---transition-easing, ease) !important;
}

s-dropdown[animation] > * {
  animation: var(---animation, var(---theme-animation-bounce)) !important;
}

s-dropdown[mask] > * {
  ---theme-mask-angled-corner: conic-gradient(
        from -45deg at var(---corner, 8px) var(---corner, 8px),
        #0000 25%,
        #000 0
      )
      calc(-1 * var(---corner, 8px)) 0 /100% 51% repeat-x,
    conic-gradient(
        from 135deg at var(---corner, 8px) calc(100% - var(---corner, 8px)),
        #0000 25%,
        #000 0
      )
      calc(-1 * var(---corner, 8px)) 100%/100% 51% repeat-x !important;
  ---theme-mask-scooped-corner: radial-gradient(
      var(---corner, 8px) at var(---corner, 8px) var(---corner, 8px),
      #0000 99%,
      #000
    )
    calc(-1 * var(---corner, 8px)) calc(-1 * var(---corner, 8px)) !important;
  ---theme-mask-notched-corner: conic-gradient(
      at calc(2 * var(---corner, 8px)) calc(2 * var(---corner, 8px)),
      #000 75%,
      #0000 0
    )
    calc(-1 * var(---corner, 8px)) calc(-1 * var(---corner, 8px)) !important;
  background-color: transparent !important;
  background-image: none !important;
}

s-dropdown[mask]::before > * {
  /* Apply mask to a pseudo-element so that drop-shadow filters applied to the root element will match the shape of the mask */
  position: absolute !important;
  inset: 0 !important;
  content: "" !important;
  background-image: var(---background-image, none) !important;
  background-color: var(---background-color) !important;
  -webkit-mask: var(---mask, none) !important;
  mask: var(---mask, none) !important;
}

s-dropdown[content-visibility] > * {
  content-visibility: var(---content-visibility, auto);
}

s-dropdown[contain-intrinsic-size] > * {
  contain-intrinsic-size: var(---contain-intrinsic-size, none);
}

s-dropdown {
  display: contents;
  ---position: absolute;
  ---overflow-x: clip;
  ---overflow-y: clip;
  ---padding-tb: 8px;
  ---padding-lr: 0;
  ---width-max: 20rem;
  ---interactable: auto;
  ---width: max-content;
  ---z: var(---theme-z-index-tooltip);
  ---background-color: var(---theme-tooltip-background-color);
  ---text-font: var(---theme-tooltip-font-family);
  ---text-size: var(---theme-tooltip-font-size);
  ---text-weight: var(---theme-tooltip-font-weight);
  ---text-leading: var(---theme-tooltip-line-height);
  ---text-color: var(---theme-tooltip-color);
  ---corner: var(---theme-tooltip-border-radius);
  ---shadow: var(---theme-shadow-box-2);
  ---enter: var(---theme-animation-open);
  ---exit: var(---theme-animation-close);
  ---ease: ease-out;
}

s-dropdown > .root {
  display: contents;
  pointer-events: var(---interactable);
}

s-dropdown > .popup {
  display: flex;
  position: fixed;
  pointer-events: var(---interactable);
  z-index: var(---z);
  overflow-x: var(---overflow-x);
  overflow-y: var(---overflow-y);
  width: var(---width);
  max-width: var(---width-max);
  padding-block: var(---padding-tb);
  padding-inline: var(---padding-lr);
  background-color: var(---background-color);
  font-family: var(---text-font);
  font-size: var(---text-size);
  font-weight: var(---text-weight);
  line-height: var(---text-leading);
  color: var(---text-color);
  border-radius: var(---corner);
  max-width: var(---auto-size-available-width, none);
  max-height: var(---auto-size-available-height, none);
  box-shadow: var(---shadow);
  will-change: transform, opacity;
}

s-dropdown[open] > .popup[anchored] {
  animation: var(---enter) forwards;
  animation-timing-function: var(---ease);
}

s-dropdown:not([open]) > .popup[anchored] {
  animation: var(---exit) forwards;
  animation-timing-function: var(---ease);
}

s-dropdown > .popup::backdrop {
  background-color: transparent;
}

s-dropdown > dialog:modal {
  margin: 0;
}

s-dropdown[placement^="top"] > .popup {
  transform-origin: bottom;
}

s-dropdown[placement^="bottom"] > .popup {
  transform-origin: top;
}

s-dropdown[placement^="left"] > .popup {
  transform-origin: right;
}

s-dropdown[placement^="right"] > .popup {
  transform-origin: left;
}

s-toast-stack* > * {
  transition-property: opacity, translate, rotate, scale, transform, filter,
    backdrop-filter, clip-path, mix-blend-mode, box-shadow, color,
    background-color, border-color, text-decoration-color, fill, stroke;
}

s-toast-stack[display] > * {
  display: var(---display, flex) !important;
}

s-toast-stack[position] > * {
  position: var(---position, absolute) !important;
}

s-toast-stack[position="sticky-top"] > * {
  inset: 0 0 auto 0;
  z-index: 1;
}

s-toast-stack[position="sticky-bottom"] > * {
  inset: auto 0 0 0;
  z-index: 1;
}

s-toast-stack[position="sticky-left"] > * {
  inset: 0 auto 0 0;
  z-index: 1;
}

s-toast-stack[position="sticky-right"] > * {
  inset: 0 0 0 auto;
  z-index: 1;
}

s-toast-stack[position="fixed-top"] > * {
  inset: 0 0 auto 0;
  z-index: 1;
}

s-toast-stack[position="fixed-bottom"] > * {
  inset: auto 0 0 0;
  z-index: 1;
}

s-toast-stack[position="fixed-left"] > * {
  inset: 0 auto 0 0;
  z-index: 1;
}

s-toast-stack[position="fixed-right"] > * {
  inset: 0 0 0 auto;
  z-index: 1;
}

s-toast-stack[aspect] > * {
  aspect-ratio: var(---aspect, 1) !important;
}

s-toast-stack[overflow] > * {
  overflow: var(---overflow, scroll) !important;
}

s-toast-stack[overflow-x] > * {
  overflow-x: var(---overflow-x, scroll) !important;
}

s-toast-stack[overflow-y] > * {
  overflow-y: var(---overflow-y, scroll) !important;
}

s-toast-stack[z] > * {
  z-index: var(---z, 1) !important;
}

s-toast-stack:is([w], [width]) > * {
  width: var(---width, 100%) !important;
}

s-toast-stack:is([w-min], [width-min]) > * {
  min-width: var(---width-min, 0) !important;
}

s-toast-stack:is([w-max], [width-max]) > * {
  max-width: var(---width-max, 100%) !important;
}

s-toast-stack:is([h], [height]) > * {
  height: var(---height, 100%) !important;
}

s-toast-stack:is([h-min], [height-min]) > * {
  min-height: var(---height-min, 0) !important;
}

s-toast-stack:is([h-max], [height-max]) > * {
  max-height: var(---height-max, 100%) !important;
}

s-toast-stack:is([c], [corner]) > * {
  border-radius: var(---corner, 8px) !important;
}

s-toast-stack:is([c-tl], [corner-top-left]) > * {
  border-top-left-radius: var(---corner-top-left, 8px) !important;
}

s-toast-stack:is([c-tr], [corner-top-right]) > * {
  border-top-right-radius: var(---corner-top-right, 8px) !important;
}

s-toast-stack:is([c-bl], [corner-bottom-left]) > * {
  border-bottom-left-radius: var(---corner-bottom-left, 8px) !important;
}

s-toast-stack:is([c-br], [corner-bottom-right]) > * {
  border-bottom-right-radius: var(---corner-bottom-right, 8px) !important;
}

s-toast-stack:is([o-color], [outline-color]) > * {
  outline-style: solid;
  outline-color: var(---outline-color, hsl(0 100% 100% / 50%)) !important;
}

s-toast-stack:is([o-width], [outline-width]) > * {
  outline-style: solid;
  outline-width: var(---outline-width, 8px) !important;
}

s-toast-stack:is([o-style], [outline-style]) > * {
  outline-style: var(---outline-style, solid) !important;
}

s-toast-stack:is([b-color], [border-color]) > * {
  border-style: solid;
  border-color: var(---border-color, currentColor) !important;
}

s-toast-stack:is([b-color-t], [border-color-top]) > * {
  border-style: solid;
  border-top-color: var(---border-color-top, currentColor) !important;
}

s-toast-stack:is([b-color-b], [border-color-bottom]) > * {
  border-style: solid;
  border-bottom-color: var(---border-color-bottom, currentColor) !important;
}

s-toast-stack:is([b-color-l], [border-color-left]) > * {
  border-style: solid;
  border-left-color: var(---border-color-left, currentColor) !important;
}

s-toast-stack:is([b-color-r], [border-color-right]) > * {
  border-style: solid;
  border-right-color: var(---border-color-right, currentColor) !important;
}

s-toast-stack:is([b-width], [border-width]) > * {
  border-style: solid;
  border-width: var(---border-width, 8px) !important;
}

s-toast-stack:is([b-width-t], [border-width-top]) > * {
  border-style: solid;
  border-top-width: var(---border-width-top, 8px) !important;
}

s-toast-stack:is([b-width-b], [border-width-bottom]) > * {
  border-style: solid;
  border-bottom-width: var(---border-width-bottom, 8px) !important;
}

s-toast-stack:is([b-width-l], [border-width-left]) > * {
  border-style: solid;
  border-left-width: var(---border-width-left, 8px) !important;
}

s-toast-stack:is([b-width-r], [border-width-right]) > * {
  border-style: solid;
  border-right-width: var(---border-width-right, 8px) !important;
}

s-toast-stack:is([b-style], [border-style]) > * {
  border-style: var(---border-style, solid) !important;
}

s-toast-stack:is([b-style-t], [border-style-top]) > * {
  border-top-style: var(---border-style-top, solid) !important;
}

s-toast-stack:is([b-style-b], [border-style-bottom]) > * {
  border-bottom-style: var(---border-style-bottom, solid) !important;
}

s-toast-stack:is([b-style-l], [border-style-left]) > * {
  border-left-style: var(---border-style-left, solid) !important;
}

s-toast-stack:is([b-style-r], [border-style-right]) > * {
  border-right-style: var(---border-style-right, solid) !important;
}

s-toast-stack:is([i], [inset]) > * {
  inset: var(---inset, 8px) !important;
}

s-toast-stack:is([i-t], [inset-top]) > * {
  top: var(---inset-top, 8px) !important;
}

s-toast-stack:is([i-b], [inset-bottom]) > * {
  bottom: var(---inset-bottom, 8px) !important;
}

s-toast-stack:is([i-l], [inset-left]) > * {
  left: var(---inset-left, 8px) !important;
}

s-toast-stack:is([i-r], [inset-right]) > * {
  right: var(---inset-right, 8px) !important;
}

s-toast-stack:is([m], [margin]) > * {
  margin: var(---margin, 8px) !important;
}

s-toast-stack:is([m-t], [margin-top]) > * {
  margin-top: var(---margin-top, 8px) !important;
}

s-toast-stack:is([m-b], [margin-bottom]) > * {
  margin-bottom: var(---margin-bottom, 8px) !important;
}

s-toast-stack:is([m-l], [margin-left]) > * {
  margin-left: var(---margin-left, 8px) !important;
}

s-toast-stack:is([m-r], [margin-right]) > * {
  margin-right: var(---margin-right, 8px) !important;
}

s-toast-stack:is([p], [padding]) > * {
  padding: var(---padding, 8px) !important;
}

s-toast-stack:is([p-t], [padding-top]) > * {
  padding-top: var(---padding-top, 8px) !important;
}

s-toast-stack:is([p-b], [padding-bottom]) > * {
  padding-bottom: var(---padding-bottom, 8px) !important;
}

s-toast-stack:is([p-l], [padding-left]) > * {
  padding-left: var(---padding-left, 8px) !important;
}

s-toast-stack:is([p-r], [padding-right]) > * {
  padding-right: var(---padding-right, 8px) !important;
}

s-toast-stack:is([child-layout="row"], [child-layout="column"]) > * {
  display: flex;
  flex-direction: var(---child-layout, row) !important;
}

s-toast-stack:is([child-layout="grid"], [child-columns]) > * {
  display: grid;
  grid-template-columns: var(---child-columns, 1fr 1fr 1fr);
}

s-toast-stack[child-gap] > * {
  gap: var(---child-gap, 8px) !important;
}

s-toast-stack[child-align] > * {
  align-items: var(---child-align, center) !important;
}

s-toast-stack[child-justify] > * {
  justify-content: var(---child-justify, center) !important;
}

s-toast-stack[child-overflow] > * {
  flex-wrap: var(---child-overflow, nowrap) !important;
}

s-toast-stack[self-align] > * {
  align-self: var(---self-align, center) !important;
}

s-toast-stack[flex] > * {
  flex: var(---flex, 1) !important;
}

s-toast-stack[grow] > * {
  flex-grow: var(---grow, 1) !important;
}

s-toast-stack[shrink] > * {
  flex-shrink: var(---shrink, 1) !important;
}

s-toast-stack[order] > * {
  order: var(---order, 0) !important;
}

s-toast-stack[fill] path > * {
  fill: var(---fill, currentColor) !important;
}

s-toast-stack[stroke] path > * {
  stroke: var(---stroke, currentColor) !important;
}

s-toast-stack[stroke-width] path > * {
  stroke-width: var(---stroke-width, 1) !important;
}

s-toast-stack[visible] > * {
  visibility: var(---visible, visible) !important;
}

s-toast-stack[interactable] > * {
  pointer-events: var(---interactable, auto) !important;
}

s-toast-stack[interactable="none"] > * {
  cursor: default;
}

s-toast-stack[selectable] > * {
  user-select: var(---selectable, auto) !important;
}

[selectable=""],
[selectable="auto"],
s-toast-stack[selectable="all"] > * {
  cursor: text;
}

s-toast-stack[cursor] > * {
  cursor: var(---cursor, auto) !important;
}

s-toast-stack[text-font] > * {
  font-family: var(---text-font, monospace) !important;
}

s-toast-stack[text-size] > * {
  font-size: var(---text-size, 1rem) !important;
}

s-toast-stack[text-size="2xs"] > * {
  line-height: var(---theme-text-2xs-line-height, 1.5);
}

s-toast-stack[text-size="xs"] > * {
  line-height: var(---theme-text-xs-line-height, 1.5);
}

s-toast-stack[text-size="sm"] > * {
  line-height: var(---theme-text-sm-line-height, 1.5);
}

s-toast-stack[text-size="md"] > * {
  line-height: var(---theme-text-md-line-height, 1.5);
}

s-toast-stack[text-size="lg"] > * {
  line-height: var(---theme-text-lg-line-height, 1.5);
}

s-toast-stack[text-size="xl"] > * {
  line-height: var(---theme-text-xl-line-height, 1.5);
}

s-toast-stack[text-size="2xl"] > * {
  line-height: var(---theme-text-2xl-line-height, 1.5);
}

s-toast-stack[text-size="3xl"] > * {
  line-height: var(---theme-text-3xl-line-height, 1.5);
}

s-toast-stack[text-size="4xl"] > * {
  line-height: var(---theme-text-4xl-line-height, 1.5);
}

s-toast-stack[text-size="5xl"] > * {
  line-height: var(---theme-text-5xl-line-height, 1.5);
}

s-toast-stack[text-size="6xl"] > * {
  line-height: var(---theme-text-6xl-line-height, 1.5);
}

s-toast-stack[text-size="7xl"] > * {
  line-height: var(---theme-text-7xl-line-height, 1.5);
}

s-toast-stack[text-size="8xl"] > * {
  line-height: var(---theme-text-8xl-line-height, 1.5);
}

s-toast-stack[text-size="9xl"] > * {
  line-height: var(---theme-text-9xl-line-height, 1.5);
}

s-toast-stack[text-leading] > * {
  line-height: var(---text-leading, 1.5) !important;
}

s-toast-stack[text-tracking] > * {
  letter-spacing: var(---text-tracking, 1.5) !important;
}

s-toast-stack[text-weight] > * {
  font-weight: var(---text-weight, 600) !important;
}

s-toast-stack[text-style] > * {
  font-style: var(---text-style, italic) !important;
}

s-toast-stack[text-decoration-line] > * {
  text-decoration-line: var(---text-decoration-line, underline) !important;
}

s-toast-stack[text-decoration-color] > * {
  text-decoration-color: var(---text-decoration-color, currentColor) !important;
}

s-toast-stack[text-decoration-thickness] > * {
  text-decoration-thickness: var(---text-decoration-thickness, auto) !important;
}

s-toast-stack[text-underline-offset] > * {
  text-underline-offset: var(---text-underline-offset, 4px) !important;
}

s-toast-stack[text-case] > * {
  text-transform: var(---text-case, uppercase) !important;
}

s-toast-stack[text-align] > * {
  text-align: var(---text-align, center) !important;
}

s-toast-stack[text-overflow] > * {
  text-overflow: var(---text-overflow, clip) !important;
}

s-toast-stack[text-overflow=""] > * {
  white-space: nowrap;
}

s-toast-stack[text-overflow="wrap"] > * {
  white-space: break-spaces;
}

s-toast-stack[text-overflow="visible"] > * {
  white-space: nowrap;
}

s-toast-stack[text-overflow="clip"] > * {
  white-space: nowrap;
}

s-toast-stack[text-overflow="ellipsis"] > * {
  overflow: hidden;
  white-space: nowrap;
}

s-toast-stack[text-whitespace] > * {
  white-space: var(---text-whitespace, normal) !important;
}

s-toast-stack[text-color] > * {
  color: var(---text-color, white) !important;
}

s-toast-stack[text-stroke] > * {
  text-shadow: var(---text-stroke) !important;
}

s-toast-stack:is([bg-color], [background-color]) > * {
  background-color: var(---background-color) !important;
}

s-toast-stack:is([bg-image], [background-image]) > * {
  background-image: var(---background-image, none) !important;
}

s-toast-stack:is([bg-repeat], [background-repeat]) > * {
  background-repeat: var(---background-repeat, repeat) !important;
}

s-toast-stack:is([bg-align], [background-align]) > * {
  background-position: var(---background-align, center) !important;
}

s-toast-stack:is([bg-fit], [background-fit]) > * {
  background-size: var(---background-fit, contain) !important;
}

s-toast-stack[clip] > * {
  clip-path: var(---clip, circle(50%)) !important;
}

s-toast-stack[filter] > * {
  filter: var(---filter, none) !important;
}

s-toast-stack[backdrop-filter] > * {
  backdrop-filter: var(---backdrop-filter, none) !important;
}

s-toast-stack[blend] > * {
  mix-blend-mode: var(---blend, normal) !important;
}

s-toast-stack[shadow] > * {
  box-shadow: var(
    ---shadow,
    0 1px 2px hsl(0 0% 0% / 30%),
    0 1px 3px hsl(0 0% 0% / 15%)
  ) !important;
}

s-toast-stack[shadow-inset] > * {
  box-shadow: var(
    ---shadow-inset,
    inset 0 1px 2px hsl(0 0% 0% / 30%),
    inset 0 1px 3px hsl(0 0% 0% / 15%)
  ) !important;
}

s-toast-stack[ring] > * {
  box-shadow: var(---ring, 0 0 0 2px currentColor) !important;
  outline: none !important;
}

s-toast-stack[opacity] > * {
  opacity: var(---opacity, 1) !important;
}

s-toast-stack[translate] > * {
  translate: var(---translate, none) !important;
}

s-toast-stack[rotate] > * {
  rotate: var(---rotate, none) !important;
}

s-toast-stack[scale] > * {
  scale: var(---scale, none) !important;
}

s-toast-stack[pivot] > * {
  transform-origin: var(---pivot, left) !important;
}

s-toast-stack[transition-delay] > * {
  transition-delay: var(---transition-delay, 100ms) !important;
}

s-toast-stack[transition-duration] > * {
  transition-duration: var(---transition-duration, 100ms) !important;
}

s-toast-stack[transition-easing] > * {
  transition-timing-function: var(---transition-easing, ease) !important;
}

s-toast-stack[animation] > * {
  animation: var(---animation, var(---theme-animation-bounce)) !important;
}

s-toast-stack[mask] > * {
  ---theme-mask-angled-corner: conic-gradient(
        from -45deg at var(---corner, 8px) var(---corner, 8px),
        #0000 25%,
        #000 0
      )
      calc(-1 * var(---corner, 8px)) 0 /100% 51% repeat-x,
    conic-gradient(
        from 135deg at var(---corner, 8px) calc(100% - var(---corner, 8px)),
        #0000 25%,
        #000 0
      )
      calc(-1 * var(---corner, 8px)) 100%/100% 51% repeat-x !important;
  ---theme-mask-scooped-corner: radial-gradient(
      var(---corner, 8px) at var(---corner, 8px) var(---corner, 8px),
      #0000 99%,
      #000
    )
    calc(-1 * var(---corner, 8px)) calc(-1 * var(---corner, 8px)) !important;
  ---theme-mask-notched-corner: conic-gradient(
      at calc(2 * var(---corner, 8px)) calc(2 * var(---corner, 8px)),
      #000 75%,
      #0000 0
    )
    calc(-1 * var(---corner, 8px)) calc(-1 * var(---corner, 8px)) !important;
  background-color: transparent !important;
  background-image: none !important;
}

s-toast-stack[mask]::before > * {
  /* Apply mask to a pseudo-element so that drop-shadow filters applied to the root element will match the shape of the mask */
  position: absolute !important;
  inset: 0 !important;
  content: "" !important;
  background-image: var(---background-image, none) !important;
  background-color: var(---background-color) !important;
  -webkit-mask: var(---mask, none) !important;
  mask: var(---mask, none) !important;
}

s-toast-stack[content-visibility] > * {
  content-visibility: var(---content-visibility, auto);
}

s-toast-stack[contain-intrinsic-size] > * {
  contain-intrinsic-size: var(---contain-intrinsic-size, none);
}

s-toast-stack {
  display: contents;
  ---overflow-y: visible;
  ---child-layout: column-reverse;
  ---position: absolute;
  ---z: var(---theme-z-index-toast);
  ---width-max: 100%;
  ---height-max: 100%;
  ---inset-t: auto;
  ---inset-b: 16px;
  ---inset-lr: 16px;
}

s-toast-stack > .root {
  display: flex;
  flex-direction: var(---child-layout);
  overflow-y: var(---overflow-y);
  position: var(---position);
  z-index: var(---z);
  max-width: var(---width-max);
  max-height: var(---height-max);
  inset-block-start: var(---inset-t);
  inset-block-end: var(---inset-b);
  inset-inline: var(---inset-lr);
}

s-toast* > * {
  transition-property: opacity, translate, rotate, scale, transform, filter,
    backdrop-filter, clip-path, mix-blend-mode, box-shadow, color,
    background-color, border-color, text-decoration-color, fill, stroke;
}

s-toast[display] > * {
  display: var(---display, flex) !important;
}

s-toast[position] > * {
  position: var(---position, absolute) !important;
}

s-toast[position="sticky-top"] > * {
  inset: 0 0 auto 0;
  z-index: 1;
}

s-toast[position="sticky-bottom"] > * {
  inset: auto 0 0 0;
  z-index: 1;
}

s-toast[position="sticky-left"] > * {
  inset: 0 auto 0 0;
  z-index: 1;
}

s-toast[position="sticky-right"] > * {
  inset: 0 0 0 auto;
  z-index: 1;
}

s-toast[position="fixed-top"] > * {
  inset: 0 0 auto 0;
  z-index: 1;
}

s-toast[position="fixed-bottom"] > * {
  inset: auto 0 0 0;
  z-index: 1;
}

s-toast[position="fixed-left"] > * {
  inset: 0 auto 0 0;
  z-index: 1;
}

s-toast[position="fixed-right"] > * {
  inset: 0 0 0 auto;
  z-index: 1;
}

s-toast[aspect] > * {
  aspect-ratio: var(---aspect, 1) !important;
}

s-toast[overflow] > * {
  overflow: var(---overflow, scroll) !important;
}

s-toast[overflow-x] > * {
  overflow-x: var(---overflow-x, scroll) !important;
}

s-toast[overflow-y] > * {
  overflow-y: var(---overflow-y, scroll) !important;
}

s-toast[z] > * {
  z-index: var(---z, 1) !important;
}

s-toast:is([w], [width]) > * {
  width: var(---width, 100%) !important;
}

s-toast:is([w-min], [width-min]) > * {
  min-width: var(---width-min, 0) !important;
}

s-toast:is([w-max], [width-max]) > * {
  max-width: var(---width-max, 100%) !important;
}

s-toast:is([h], [height]) > * {
  height: var(---height, 100%) !important;
}

s-toast:is([h-min], [height-min]) > * {
  min-height: var(---height-min, 0) !important;
}

s-toast:is([h-max], [height-max]) > * {
  max-height: var(---height-max, 100%) !important;
}

s-toast:is([c], [corner]) > * {
  border-radius: var(---corner, 8px) !important;
}

s-toast:is([c-tl], [corner-top-left]) > * {
  border-top-left-radius: var(---corner-top-left, 8px) !important;
}

s-toast:is([c-tr], [corner-top-right]) > * {
  border-top-right-radius: var(---corner-top-right, 8px) !important;
}

s-toast:is([c-bl], [corner-bottom-left]) > * {
  border-bottom-left-radius: var(---corner-bottom-left, 8px) !important;
}

s-toast:is([c-br], [corner-bottom-right]) > * {
  border-bottom-right-radius: var(---corner-bottom-right, 8px) !important;
}

s-toast:is([o-color], [outline-color]) > * {
  outline-style: solid;
  outline-color: var(---outline-color, hsl(0 100% 100% / 50%)) !important;
}

s-toast:is([o-width], [outline-width]) > * {
  outline-style: solid;
  outline-width: var(---outline-width, 8px) !important;
}

s-toast:is([o-style], [outline-style]) > * {
  outline-style: var(---outline-style, solid) !important;
}

s-toast:is([b-color], [border-color]) > * {
  border-style: solid;
  border-color: var(---border-color, currentColor) !important;
}

s-toast:is([b-color-t], [border-color-top]) > * {
  border-style: solid;
  border-top-color: var(---border-color-top, currentColor) !important;
}

s-toast:is([b-color-b], [border-color-bottom]) > * {
  border-style: solid;
  border-bottom-color: var(---border-color-bottom, currentColor) !important;
}

s-toast:is([b-color-l], [border-color-left]) > * {
  border-style: solid;
  border-left-color: var(---border-color-left, currentColor) !important;
}

s-toast:is([b-color-r], [border-color-right]) > * {
  border-style: solid;
  border-right-color: var(---border-color-right, currentColor) !important;
}

s-toast:is([b-width], [border-width]) > * {
  border-style: solid;
  border-width: var(---border-width, 8px) !important;
}

s-toast:is([b-width-t], [border-width-top]) > * {
  border-style: solid;
  border-top-width: var(---border-width-top, 8px) !important;
}

s-toast:is([b-width-b], [border-width-bottom]) > * {
  border-style: solid;
  border-bottom-width: var(---border-width-bottom, 8px) !important;
}

s-toast:is([b-width-l], [border-width-left]) > * {
  border-style: solid;
  border-left-width: var(---border-width-left, 8px) !important;
}

s-toast:is([b-width-r], [border-width-right]) > * {
  border-style: solid;
  border-right-width: var(---border-width-right, 8px) !important;
}

s-toast:is([b-style], [border-style]) > * {
  border-style: var(---border-style, solid) !important;
}

s-toast:is([b-style-t], [border-style-top]) > * {
  border-top-style: var(---border-style-top, solid) !important;
}

s-toast:is([b-style-b], [border-style-bottom]) > * {
  border-bottom-style: var(---border-style-bottom, solid) !important;
}

s-toast:is([b-style-l], [border-style-left]) > * {
  border-left-style: var(---border-style-left, solid) !important;
}

s-toast:is([b-style-r], [border-style-right]) > * {
  border-right-style: var(---border-style-right, solid) !important;
}

s-toast:is([i], [inset]) > * {
  inset: var(---inset, 8px) !important;
}

s-toast:is([i-t], [inset-top]) > * {
  top: var(---inset-top, 8px) !important;
}

s-toast:is([i-b], [inset-bottom]) > * {
  bottom: var(---inset-bottom, 8px) !important;
}

s-toast:is([i-l], [inset-left]) > * {
  left: var(---inset-left, 8px) !important;
}

s-toast:is([i-r], [inset-right]) > * {
  right: var(---inset-right, 8px) !important;
}

s-toast:is([m], [margin]) > * {
  margin: var(---margin, 8px) !important;
}

s-toast:is([m-t], [margin-top]) > * {
  margin-top: var(---margin-top, 8px) !important;
}

s-toast:is([m-b], [margin-bottom]) > * {
  margin-bottom: var(---margin-bottom, 8px) !important;
}

s-toast:is([m-l], [margin-left]) > * {
  margin-left: var(---margin-left, 8px) !important;
}

s-toast:is([m-r], [margin-right]) > * {
  margin-right: var(---margin-right, 8px) !important;
}

s-toast:is([p], [padding]) > * {
  padding: var(---padding, 8px) !important;
}

s-toast:is([p-t], [padding-top]) > * {
  padding-top: var(---padding-top, 8px) !important;
}

s-toast:is([p-b], [padding-bottom]) > * {
  padding-bottom: var(---padding-bottom, 8px) !important;
}

s-toast:is([p-l], [padding-left]) > * {
  padding-left: var(---padding-left, 8px) !important;
}

s-toast:is([p-r], [padding-right]) > * {
  padding-right: var(---padding-right, 8px) !important;
}

s-toast:is([child-layout="row"], [child-layout="column"]) > * {
  display: flex;
  flex-direction: var(---child-layout, row) !important;
}

s-toast:is([child-layout="grid"], [child-columns]) > * {
  display: grid;
  grid-template-columns: var(---child-columns, 1fr 1fr 1fr);
}

s-toast[child-gap] > * {
  gap: var(---child-gap, 8px) !important;
}

s-toast[child-align] > * {
  align-items: var(---child-align, center) !important;
}

s-toast[child-justify] > * {
  justify-content: var(---child-justify, center) !important;
}

s-toast[child-overflow] > * {
  flex-wrap: var(---child-overflow, nowrap) !important;
}

s-toast[self-align] > * {
  align-self: var(---self-align, center) !important;
}

s-toast[flex] > * {
  flex: var(---flex, 1) !important;
}

s-toast[grow] > * {
  flex-grow: var(---grow, 1) !important;
}

s-toast[shrink] > * {
  flex-shrink: var(---shrink, 1) !important;
}

s-toast[order] > * {
  order: var(---order, 0) !important;
}

s-toast[fill] path > * {
  fill: var(---fill, currentColor) !important;
}

s-toast[stroke] path > * {
  stroke: var(---stroke, currentColor) !important;
}

s-toast[stroke-width] path > * {
  stroke-width: var(---stroke-width, 1) !important;
}

s-toast[visible] > * {
  visibility: var(---visible, visible) !important;
}

s-toast[interactable] > * {
  pointer-events: var(---interactable, auto) !important;
}

s-toast[interactable="none"] > * {
  cursor: default;
}

s-toast[selectable] > * {
  user-select: var(---selectable, auto) !important;
}

[selectable=""],
[selectable="auto"],
s-toast[selectable="all"] > * {
  cursor: text;
}

s-toast[cursor] > * {
  cursor: var(---cursor, auto) !important;
}

s-toast[text-font] > * {
  font-family: var(---text-font, monospace) !important;
}

s-toast[text-size] > * {
  font-size: var(---text-size, 1rem) !important;
}

s-toast[text-size="2xs"] > * {
  line-height: var(---theme-text-2xs-line-height, 1.5);
}

s-toast[text-size="xs"] > * {
  line-height: var(---theme-text-xs-line-height, 1.5);
}

s-toast[text-size="sm"] > * {
  line-height: var(---theme-text-sm-line-height, 1.5);
}

s-toast[text-size="md"] > * {
  line-height: var(---theme-text-md-line-height, 1.5);
}

s-toast[text-size="lg"] > * {
  line-height: var(---theme-text-lg-line-height, 1.5);
}

s-toast[text-size="xl"] > * {
  line-height: var(---theme-text-xl-line-height, 1.5);
}

s-toast[text-size="2xl"] > * {
  line-height: var(---theme-text-2xl-line-height, 1.5);
}

s-toast[text-size="3xl"] > * {
  line-height: var(---theme-text-3xl-line-height, 1.5);
}

s-toast[text-size="4xl"] > * {
  line-height: var(---theme-text-4xl-line-height, 1.5);
}

s-toast[text-size="5xl"] > * {
  line-height: var(---theme-text-5xl-line-height, 1.5);
}

s-toast[text-size="6xl"] > * {
  line-height: var(---theme-text-6xl-line-height, 1.5);
}

s-toast[text-size="7xl"] > * {
  line-height: var(---theme-text-7xl-line-height, 1.5);
}

s-toast[text-size="8xl"] > * {
  line-height: var(---theme-text-8xl-line-height, 1.5);
}

s-toast[text-size="9xl"] > * {
  line-height: var(---theme-text-9xl-line-height, 1.5);
}

s-toast[text-leading] > * {
  line-height: var(---text-leading, 1.5) !important;
}

s-toast[text-tracking] > * {
  letter-spacing: var(---text-tracking, 1.5) !important;
}

s-toast[text-weight] > * {
  font-weight: var(---text-weight, 600) !important;
}

s-toast[text-style] > * {
  font-style: var(---text-style, italic) !important;
}

s-toast[text-decoration-line] > * {
  text-decoration-line: var(---text-decoration-line, underline) !important;
}

s-toast[text-decoration-color] > * {
  text-decoration-color: var(---text-decoration-color, currentColor) !important;
}

s-toast[text-decoration-thickness] > * {
  text-decoration-thickness: var(---text-decoration-thickness, auto) !important;
}

s-toast[text-underline-offset] > * {
  text-underline-offset: var(---text-underline-offset, 4px) !important;
}

s-toast[text-case] > * {
  text-transform: var(---text-case, uppercase) !important;
}

s-toast[text-align] > * {
  text-align: var(---text-align, center) !important;
}

s-toast[text-overflow] > * {
  text-overflow: var(---text-overflow, clip) !important;
}

s-toast[text-overflow=""] > * {
  white-space: nowrap;
}

s-toast[text-overflow="wrap"] > * {
  white-space: break-spaces;
}

s-toast[text-overflow="visible"] > * {
  white-space: nowrap;
}

s-toast[text-overflow="clip"] > * {
  white-space: nowrap;
}

s-toast[text-overflow="ellipsis"] > * {
  overflow: hidden;
  white-space: nowrap;
}

s-toast[text-whitespace] > * {
  white-space: var(---text-whitespace, normal) !important;
}

s-toast[text-color] > * {
  color: var(---text-color, white) !important;
}

s-toast[text-stroke] > * {
  text-shadow: var(---text-stroke) !important;
}

s-toast:is([bg-color], [background-color]) > * {
  background-color: var(---background-color) !important;
}

s-toast:is([bg-image], [background-image]) > * {
  background-image: var(---background-image, none) !important;
}

s-toast:is([bg-repeat], [background-repeat]) > * {
  background-repeat: var(---background-repeat, repeat) !important;
}

s-toast:is([bg-align], [background-align]) > * {
  background-position: var(---background-align, center) !important;
}

s-toast:is([bg-fit], [background-fit]) > * {
  background-size: var(---background-fit, contain) !important;
}

s-toast[clip] > * {
  clip-path: var(---clip, circle(50%)) !important;
}

s-toast[filter] > * {
  filter: var(---filter, none) !important;
}

s-toast[backdrop-filter] > * {
  backdrop-filter: var(---backdrop-filter, none) !important;
}

s-toast[blend] > * {
  mix-blend-mode: var(---blend, normal) !important;
}

s-toast[shadow] > * {
  box-shadow: var(
    ---shadow,
    0 1px 2px hsl(0 0% 0% / 30%),
    0 1px 3px hsl(0 0% 0% / 15%)
  ) !important;
}

s-toast[shadow-inset] > * {
  box-shadow: var(
    ---shadow-inset,
    inset 0 1px 2px hsl(0 0% 0% / 30%),
    inset 0 1px 3px hsl(0 0% 0% / 15%)
  ) !important;
}

s-toast[ring] > * {
  box-shadow: var(---ring, 0 0 0 2px currentColor) !important;
  outline: none !important;
}

s-toast[opacity] > * {
  opacity: var(---opacity, 1) !important;
}

s-toast[translate] > * {
  translate: var(---translate, none) !important;
}

s-toast[rotate] > * {
  rotate: var(---rotate, none) !important;
}

s-toast[scale] > * {
  scale: var(---scale, none) !important;
}

s-toast[pivot] > * {
  transform-origin: var(---pivot, left) !important;
}

s-toast[transition-delay] > * {
  transition-delay: var(---transition-delay, 100ms) !important;
}

s-toast[transition-duration] > * {
  transition-duration: var(---transition-duration, 100ms) !important;
}

s-toast[transition-easing] > * {
  transition-timing-function: var(---transition-easing, ease) !important;
}

s-toast[animation] > * {
  animation: var(---animation, var(---theme-animation-bounce)) !important;
}

s-toast[mask] > * {
  ---theme-mask-angled-corner: conic-gradient(
        from -45deg at var(---corner, 8px) var(---corner, 8px),
        #0000 25%,
        #000 0
      )
      calc(-1 * var(---corner, 8px)) 0 /100% 51% repeat-x,
    conic-gradient(
        from 135deg at var(---corner, 8px) calc(100% - var(---corner, 8px)),
        #0000 25%,
        #000 0
      )
      calc(-1 * var(---corner, 8px)) 100%/100% 51% repeat-x !important;
  ---theme-mask-scooped-corner: radial-gradient(
      var(---corner, 8px) at var(---corner, 8px) var(---corner, 8px),
      #0000 99%,
      #000
    )
    calc(-1 * var(---corner, 8px)) calc(-1 * var(---corner, 8px)) !important;
  ---theme-mask-notched-corner: conic-gradient(
      at calc(2 * var(---corner, 8px)) calc(2 * var(---corner, 8px)),
      #000 75%,
      #0000 0
    )
    calc(-1 * var(---corner, 8px)) calc(-1 * var(---corner, 8px)) !important;
  background-color: transparent !important;
  background-image: none !important;
}

s-toast[mask]::before > * {
  /* Apply mask to a pseudo-element so that drop-shadow filters applied to the root element will match the shape of the mask */
  position: absolute !important;
  inset: 0 !important;
  content: "" !important;
  background-image: var(---background-image, none) !important;
  background-color: var(---background-color) !important;
  -webkit-mask: var(---mask, none) !important;
  mask: var(---mask, none) !important;
}

s-toast[content-visibility] > * {
  content-visibility: var(---content-visibility, auto);
}

s-toast[contain-intrinsic-size] > * {
  contain-intrinsic-size: var(---contain-intrinsic-size, none);
}

s-toast {
  display: contents;
  ---icon-size: var(---theme-text-lg-font-size);
  ---interactable: auto;
  ---position: relative;
  ---child-layout: row;
  ---child-align: center;
  ---child-justify: center;
  ---shadow: var(---theme-shadow-box-2);
  ---background-color: var(---theme-color-surface);
  ---text-color: var(---theme-color-neutral-80);
  ---text-font: var(---theme-font-sans);
  ---text-size: var(---theme-text-sm-font-size);
  ---text-leading: 1.6;
  ---text-weight: 400;
  ---spacing: 16px;
  ---border-color: var(---theme-color-surface-border);
  ---border-width: 1px;
  ---corner: 4px;
  ---margin: 4px;
  ---padding-tb: 12px;
  ---padding-lr: 16px;
  ---enter: var(---theme-animation-enter-fade);
  ---exit: var(---theme-animation-exit-fade);
  ---ease: ease-out;
}

s-toast > .root {
  display: flex;
  pointer-events: var(---interactable);
  position: var(---position);
  flex-direction: var(---child-layout);
  align-items: var(---child-align);
  box-shadow: var(---shadow);
  border-style: solid;
  background-color: var(---background-color);
  color: var(---text-color);
  font-family: var(---text-font);
  font-size: var(---text-size);
  font-weight: var(---text-weight);
  line-height: var(---text-leading);
  border-color: var(---border-color);
  border-width: var(---border-width);
  border-radius: var(---corner);
  margin: var(---margin);
  padding-block: var(---padding-tb);
  padding-inline: var(---padding-lr);
  will-change: transform;
}

s-toast[action] > .root {
  padding-right: calc(
    var(---padding-r, var(---padding-lr, var(---padding))) - 8px
  );
}

s-toast > .popup {
  will-change: transform, opacity;
}

s-toast[open] > .popup {
  animation: var(---enter) forwards;
  animation-timing-function: var(---ease);
}

s-toast:not([open]) > .popup {
  animation: var(---exit) forwards;
  animation-timing-function: var(---ease);
}

s-toast > .root > .message {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

s-toast[action] > .root > .message {
  padding-right: var(---spacing);
}

s-toast > .root > .close {
  pointer-events: auto;
  display: flex;
  flex-direction: row;
  flex: 0 0 auto;
  align-items: center;
  justify-content: flex-end;
  color: var(---color);
  font-size: var(---icon-size);
}

s-drawer* > * {
  transition-property: opacity, translate, rotate, scale, transform, filter,
    backdrop-filter, clip-path, mix-blend-mode, box-shadow, color,
    background-color, border-color, text-decoration-color, fill, stroke;
}

s-drawer[display] > * {
  display: var(---display, flex) !important;
}

s-drawer[position] > * {
  position: var(---position, absolute) !important;
}

s-drawer[position="sticky-top"] > * {
  inset: 0 0 auto 0;
  z-index: 1;
}

s-drawer[position="sticky-bottom"] > * {
  inset: auto 0 0 0;
  z-index: 1;
}

s-drawer[position="sticky-left"] > * {
  inset: 0 auto 0 0;
  z-index: 1;
}

s-drawer[position="sticky-right"] > * {
  inset: 0 0 0 auto;
  z-index: 1;
}

s-drawer[position="fixed-top"] > * {
  inset: 0 0 auto 0;
  z-index: 1;
}

s-drawer[position="fixed-bottom"] > * {
  inset: auto 0 0 0;
  z-index: 1;
}

s-drawer[position="fixed-left"] > * {
  inset: 0 auto 0 0;
  z-index: 1;
}

s-drawer[position="fixed-right"] > * {
  inset: 0 0 0 auto;
  z-index: 1;
}

s-drawer[aspect] > * {
  aspect-ratio: var(---aspect, 1) !important;
}

s-drawer[overflow] > * {
  overflow: var(---overflow, scroll) !important;
}

s-drawer[overflow-x] > * {
  overflow-x: var(---overflow-x, scroll) !important;
}

s-drawer[overflow-y] > * {
  overflow-y: var(---overflow-y, scroll) !important;
}

s-drawer[z] > * {
  z-index: var(---z, 1) !important;
}

s-drawer:is([w], [width]) > * {
  width: var(---width, 100%) !important;
}

s-drawer:is([w-min], [width-min]) > * {
  min-width: var(---width-min, 0) !important;
}

s-drawer:is([w-max], [width-max]) > * {
  max-width: var(---width-max, 100%) !important;
}

s-drawer:is([h], [height]) > * {
  height: var(---height, 100%) !important;
}

s-drawer:is([h-min], [height-min]) > * {
  min-height: var(---height-min, 0) !important;
}

s-drawer:is([h-max], [height-max]) > * {
  max-height: var(---height-max, 100%) !important;
}

s-drawer:is([c], [corner]) > * {
  border-radius: var(---corner, 8px) !important;
}

s-drawer:is([c-tl], [corner-top-left]) > * {
  border-top-left-radius: var(---corner-top-left, 8px) !important;
}

s-drawer:is([c-tr], [corner-top-right]) > * {
  border-top-right-radius: var(---corner-top-right, 8px) !important;
}

s-drawer:is([c-bl], [corner-bottom-left]) > * {
  border-bottom-left-radius: var(---corner-bottom-left, 8px) !important;
}

s-drawer:is([c-br], [corner-bottom-right]) > * {
  border-bottom-right-radius: var(---corner-bottom-right, 8px) !important;
}

s-drawer:is([o-color], [outline-color]) > * {
  outline-style: solid;
  outline-color: var(---outline-color, hsl(0 100% 100% / 50%)) !important;
}

s-drawer:is([o-width], [outline-width]) > * {
  outline-style: solid;
  outline-width: var(---outline-width, 8px) !important;
}

s-drawer:is([o-style], [outline-style]) > * {
  outline-style: var(---outline-style, solid) !important;
}

s-drawer:is([b-color], [border-color]) > * {
  border-style: solid;
  border-color: var(---border-color, currentColor) !important;
}

s-drawer:is([b-color-t], [border-color-top]) > * {
  border-style: solid;
  border-top-color: var(---border-color-top, currentColor) !important;
}

s-drawer:is([b-color-b], [border-color-bottom]) > * {
  border-style: solid;
  border-bottom-color: var(---border-color-bottom, currentColor) !important;
}

s-drawer:is([b-color-l], [border-color-left]) > * {
  border-style: solid;
  border-left-color: var(---border-color-left, currentColor) !important;
}

s-drawer:is([b-color-r], [border-color-right]) > * {
  border-style: solid;
  border-right-color: var(---border-color-right, currentColor) !important;
}

s-drawer:is([b-width], [border-width]) > * {
  border-style: solid;
  border-width: var(---border-width, 8px) !important;
}

s-drawer:is([b-width-t], [border-width-top]) > * {
  border-style: solid;
  border-top-width: var(---border-width-top, 8px) !important;
}

s-drawer:is([b-width-b], [border-width-bottom]) > * {
  border-style: solid;
  border-bottom-width: var(---border-width-bottom, 8px) !important;
}

s-drawer:is([b-width-l], [border-width-left]) > * {
  border-style: solid;
  border-left-width: var(---border-width-left, 8px) !important;
}

s-drawer:is([b-width-r], [border-width-right]) > * {
  border-style: solid;
  border-right-width: var(---border-width-right, 8px) !important;
}

s-drawer:is([b-style], [border-style]) > * {
  border-style: var(---border-style, solid) !important;
}

s-drawer:is([b-style-t], [border-style-top]) > * {
  border-top-style: var(---border-style-top, solid) !important;
}

s-drawer:is([b-style-b], [border-style-bottom]) > * {
  border-bottom-style: var(---border-style-bottom, solid) !important;
}

s-drawer:is([b-style-l], [border-style-left]) > * {
  border-left-style: var(---border-style-left, solid) !important;
}

s-drawer:is([b-style-r], [border-style-right]) > * {
  border-right-style: var(---border-style-right, solid) !important;
}

s-drawer:is([i], [inset]) > * {
  inset: var(---inset, 8px) !important;
}

s-drawer:is([i-t], [inset-top]) > * {
  top: var(---inset-top, 8px) !important;
}

s-drawer:is([i-b], [inset-bottom]) > * {
  bottom: var(---inset-bottom, 8px) !important;
}

s-drawer:is([i-l], [inset-left]) > * {
  left: var(---inset-left, 8px) !important;
}

s-drawer:is([i-r], [inset-right]) > * {
  right: var(---inset-right, 8px) !important;
}

s-drawer:is([m], [margin]) > * {
  margin: var(---margin, 8px) !important;
}

s-drawer:is([m-t], [margin-top]) > * {
  margin-top: var(---margin-top, 8px) !important;
}

s-drawer:is([m-b], [margin-bottom]) > * {
  margin-bottom: var(---margin-bottom, 8px) !important;
}

s-drawer:is([m-l], [margin-left]) > * {
  margin-left: var(---margin-left, 8px) !important;
}

s-drawer:is([m-r], [margin-right]) > * {
  margin-right: var(---margin-right, 8px) !important;
}

s-drawer:is([p], [padding]) > * {
  padding: var(---padding, 8px) !important;
}

s-drawer:is([p-t], [padding-top]) > * {
  padding-top: var(---padding-top, 8px) !important;
}

s-drawer:is([p-b], [padding-bottom]) > * {
  padding-bottom: var(---padding-bottom, 8px) !important;
}

s-drawer:is([p-l], [padding-left]) > * {
  padding-left: var(---padding-left, 8px) !important;
}

s-drawer:is([p-r], [padding-right]) > * {
  padding-right: var(---padding-right, 8px) !important;
}

s-drawer:is([child-layout="row"], [child-layout="column"]) > * {
  display: flex;
  flex-direction: var(---child-layout, row) !important;
}

s-drawer:is([child-layout="grid"], [child-columns]) > * {
  display: grid;
  grid-template-columns: var(---child-columns, 1fr 1fr 1fr);
}

s-drawer[child-gap] > * {
  gap: var(---child-gap, 8px) !important;
}

s-drawer[child-align] > * {
  align-items: var(---child-align, center) !important;
}

s-drawer[child-justify] > * {
  justify-content: var(---child-justify, center) !important;
}

s-drawer[child-overflow] > * {
  flex-wrap: var(---child-overflow, nowrap) !important;
}

s-drawer[self-align] > * {
  align-self: var(---self-align, center) !important;
}

s-drawer[flex] > * {
  flex: var(---flex, 1) !important;
}

s-drawer[grow] > * {
  flex-grow: var(---grow, 1) !important;
}

s-drawer[shrink] > * {
  flex-shrink: var(---shrink, 1) !important;
}

s-drawer[order] > * {
  order: var(---order, 0) !important;
}

s-drawer[fill] path > * {
  fill: var(---fill, currentColor) !important;
}

s-drawer[stroke] path > * {
  stroke: var(---stroke, currentColor) !important;
}

s-drawer[stroke-width] path > * {
  stroke-width: var(---stroke-width, 1) !important;
}

s-drawer[visible] > * {
  visibility: var(---visible, visible) !important;
}

s-drawer[interactable] > * {
  pointer-events: var(---interactable, auto) !important;
}

s-drawer[interactable="none"] > * {
  cursor: default;
}

s-drawer[selectable] > * {
  user-select: var(---selectable, auto) !important;
}

[selectable=""],
[selectable="auto"],
s-drawer[selectable="all"] > * {
  cursor: text;
}

s-drawer[cursor] > * {
  cursor: var(---cursor, auto) !important;
}

s-drawer[text-font] > * {
  font-family: var(---text-font, monospace) !important;
}

s-drawer[text-size] > * {
  font-size: var(---text-size, 1rem) !important;
}

s-drawer[text-size="2xs"] > * {
  line-height: var(---theme-text-2xs-line-height, 1.5);
}

s-drawer[text-size="xs"] > * {
  line-height: var(---theme-text-xs-line-height, 1.5);
}

s-drawer[text-size="sm"] > * {
  line-height: var(---theme-text-sm-line-height, 1.5);
}

s-drawer[text-size="md"] > * {
  line-height: var(---theme-text-md-line-height, 1.5);
}

s-drawer[text-size="lg"] > * {
  line-height: var(---theme-text-lg-line-height, 1.5);
}

s-drawer[text-size="xl"] > * {
  line-height: var(---theme-text-xl-line-height, 1.5);
}

s-drawer[text-size="2xl"] > * {
  line-height: var(---theme-text-2xl-line-height, 1.5);
}

s-drawer[text-size="3xl"] > * {
  line-height: var(---theme-text-3xl-line-height, 1.5);
}

s-drawer[text-size="4xl"] > * {
  line-height: var(---theme-text-4xl-line-height, 1.5);
}

s-drawer[text-size="5xl"] > * {
  line-height: var(---theme-text-5xl-line-height, 1.5);
}

s-drawer[text-size="6xl"] > * {
  line-height: var(---theme-text-6xl-line-height, 1.5);
}

s-drawer[text-size="7xl"] > * {
  line-height: var(---theme-text-7xl-line-height, 1.5);
}

s-drawer[text-size="8xl"] > * {
  line-height: var(---theme-text-8xl-line-height, 1.5);
}

s-drawer[text-size="9xl"] > * {
  line-height: var(---theme-text-9xl-line-height, 1.5);
}

s-drawer[text-leading] > * {
  line-height: var(---text-leading, 1.5) !important;
}

s-drawer[text-tracking] > * {
  letter-spacing: var(---text-tracking, 1.5) !important;
}

s-drawer[text-weight] > * {
  font-weight: var(---text-weight, 600) !important;
}

s-drawer[text-style] > * {
  font-style: var(---text-style, italic) !important;
}

s-drawer[text-decoration-line] > * {
  text-decoration-line: var(---text-decoration-line, underline) !important;
}

s-drawer[text-decoration-color] > * {
  text-decoration-color: var(---text-decoration-color, currentColor) !important;
}

s-drawer[text-decoration-thickness] > * {
  text-decoration-thickness: var(---text-decoration-thickness, auto) !important;
}

s-drawer[text-underline-offset] > * {
  text-underline-offset: var(---text-underline-offset, 4px) !important;
}

s-drawer[text-case] > * {
  text-transform: var(---text-case, uppercase) !important;
}

s-drawer[text-align] > * {
  text-align: var(---text-align, center) !important;
}

s-drawer[text-overflow] > * {
  text-overflow: var(---text-overflow, clip) !important;
}

s-drawer[text-overflow=""] > * {
  white-space: nowrap;
}

s-drawer[text-overflow="wrap"] > * {
  white-space: break-spaces;
}

s-drawer[text-overflow="visible"] > * {
  white-space: nowrap;
}

s-drawer[text-overflow="clip"] > * {
  white-space: nowrap;
}

s-drawer[text-overflow="ellipsis"] > * {
  overflow: hidden;
  white-space: nowrap;
}

s-drawer[text-whitespace] > * {
  white-space: var(---text-whitespace, normal) !important;
}

s-drawer[text-color] > * {
  color: var(---text-color, white) !important;
}

s-drawer[text-stroke] > * {
  text-shadow: var(---text-stroke) !important;
}

s-drawer:is([bg-color], [background-color]) > * {
  background-color: var(---background-color) !important;
}

s-drawer:is([bg-image], [background-image]) > * {
  background-image: var(---background-image, none) !important;
}

s-drawer:is([bg-repeat], [background-repeat]) > * {
  background-repeat: var(---background-repeat, repeat) !important;
}

s-drawer:is([bg-align], [background-align]) > * {
  background-position: var(---background-align, center) !important;
}

s-drawer:is([bg-fit], [background-fit]) > * {
  background-size: var(---background-fit, contain) !important;
}

s-drawer[clip] > * {
  clip-path: var(---clip, circle(50%)) !important;
}

s-drawer[filter] > * {
  filter: var(---filter, none) !important;
}

s-drawer[backdrop-filter] > * {
  backdrop-filter: var(---backdrop-filter, none) !important;
}

s-drawer[blend] > * {
  mix-blend-mode: var(---blend, normal) !important;
}

s-drawer[shadow] > * {
  box-shadow: var(
    ---shadow,
    0 1px 2px hsl(0 0% 0% / 30%),
    0 1px 3px hsl(0 0% 0% / 15%)
  ) !important;
}

s-drawer[shadow-inset] > * {
  box-shadow: var(
    ---shadow-inset,
    inset 0 1px 2px hsl(0 0% 0% / 30%),
    inset 0 1px 3px hsl(0 0% 0% / 15%)
  ) !important;
}

s-drawer[ring] > * {
  box-shadow: var(---ring, 0 0 0 2px currentColor) !important;
  outline: none !important;
}

s-drawer[opacity] > * {
  opacity: var(---opacity, 1) !important;
}

s-drawer[translate] > * {
  translate: var(---translate, none) !important;
}

s-drawer[rotate] > * {
  rotate: var(---rotate, none) !important;
}

s-drawer[scale] > * {
  scale: var(---scale, none) !important;
}

s-drawer[pivot] > * {
  transform-origin: var(---pivot, left) !important;
}

s-drawer[transition-delay] > * {
  transition-delay: var(---transition-delay, 100ms) !important;
}

s-drawer[transition-duration] > * {
  transition-duration: var(---transition-duration, 100ms) !important;
}

s-drawer[transition-easing] > * {
  transition-timing-function: var(---transition-easing, ease) !important;
}

s-drawer[animation] > * {
  animation: var(---animation, var(---theme-animation-bounce)) !important;
}

s-drawer[mask] > * {
  ---theme-mask-angled-corner: conic-gradient(
        from -45deg at var(---corner, 8px) var(---corner, 8px),
        #0000 25%,
        #000 0
      )
      calc(-1 * var(---corner, 8px)) 0 /100% 51% repeat-x,
    conic-gradient(
        from 135deg at var(---corner, 8px) calc(100% - var(---corner, 8px)),
        #0000 25%,
        #000 0
      )
      calc(-1 * var(---corner, 8px)) 100%/100% 51% repeat-x !important;
  ---theme-mask-scooped-corner: radial-gradient(
      var(---corner, 8px) at var(---corner, 8px) var(---corner, 8px),
      #0000 99%,
      #000
    )
    calc(-1 * var(---corner, 8px)) calc(-1 * var(---corner, 8px)) !important;
  ---theme-mask-notched-corner: conic-gradient(
      at calc(2 * var(---corner, 8px)) calc(2 * var(---corner, 8px)),
      #000 75%,
      #0000 0
    )
    calc(-1 * var(---corner, 8px)) calc(-1 * var(---corner, 8px)) !important;
  background-color: transparent !important;
  background-image: none !important;
}

s-drawer[mask]::before > * {
  /* Apply mask to a pseudo-element so that drop-shadow filters applied to the root element will match the shape of the mask */
  position: absolute !important;
  inset: 0 !important;
  content: "" !important;
  background-image: var(---background-image, none) !important;
  background-color: var(---background-color) !important;
  -webkit-mask: var(---mask, none) !important;
  mask: var(---mask, none) !important;
}

s-drawer[content-visibility] > * {
  content-visibility: var(---content-visibility, auto);
}

s-drawer[contain-intrinsic-size] > * {
  contain-intrinsic-size: var(---contain-intrinsic-size, none);
}

s-drawer {
  display: contents;
  ---background-color: var(---theme-color-surface);
  ---child-layout: column;
  ---child-align: stretch;
  ---child-justify: flex-start;
  ---child-gap: 16px;
  ---shadow: var(---theme-shadow-box-5);
  ---z: var(---theme-z-index-dialog);
  ---title-text-weight: 400;
  ---title-text-size: var(---theme-text-2xl-font-size);
  ---title-text-leading: var(---theme-text-2xl-line-height);
  ---text-size: var(---theme-text-sm-font-size);
  ---text-leading: var(---theme-text-sm-line-height);
  ---border-color: var(---theme-color-surface-border);
  ---border-width: 1px;
  ---corner: 0;
  ---margin: 0;
  ---padding: 0;
  ---enter: var(---theme-animation-slide-in-right),
    var(---theme-animation-fade-in);
  ---exit: var(---theme-animation-slide-out-left),
    var(---theme-animation-fade-out);
  ---mobile-enter: var(---theme-animation-slide-in-right);
  ---mobile-exit: var(---theme-animation-slide-out-left);
  ---duration: 225ms;
  ---ease: cubic-bezier(0, 0, 0.2, 1);
}

s-drawer > .root {
  display: flex;
  pointer-events: auto;
  flex-direction: var(---child-layout);
  align-items: var(---child-align);
  position: fixed;
  inset: 0;
  padding: 0;
  overflow: hidden;
  z-index: var(---z);
  color: var(---text-color);
  transition: opacity 0.5s;
  background-color: var(---background-color);
  border-style: solid;
  border-color: var(---border-color);
  border-width: var(---border-width);
  border-radius: var(---corner);
  margin: var(---margin);
  width: auto;
  height: auto;
  max-width: 300px;
  max-height: none;
  will-change: transform, opacity;
  contain: strict;
}

s-drawer:not([loaded]) > .root {
  opacity: 0;
}

s-drawer[loaded][open] > .root {
  animation: var(---enter) forwards;
  animation-duration: var(---duration);
  animation-timing-function: var(---ease);
}

s-drawer[loaded]:not([open]) > .root {
  animation: var(---exit) forwards;
  animation-duration: var(---duration);
  animation-timing-function: var(---ease);
}

@media (width <= 960px) {
  s-drawer > .root {
    margin-block-end: 0;
    border-end-end-radius: 0;
    border-end-start-radius: 0;
  }

  s-drawer[loaded][open] > .root {
    animation: var(---mobile-enter) forwards;
    animation-duration: var(---duration);
    animation-timing-function: var(---ease);
  }

  s-drawer[loaded]:not([open]) > .root {
    animation: var(---mobile-exit) forwards;
    animation-duration: var(---duration);
    animation-timing-function: var(---ease);
  }
}

s-drawer > .root::backdrop {
  background-color: black;
  will-change: transform, opacity;
  contain: strict;
}

s-drawer:not([loaded]) > .root::backdrop {
  opacity: 0;
}

s-drawer[loaded][open] > .root::backdrop {
  animation: fade-in-overlay 200ms forwards;
}

s-drawer[loaded]:not([open]) > .root::backdrop {
  animation: fade-out-overlay 200ms forwards;
}

s-drawer > .root > slot {
  display: flex;
  position: absolute;
  inset: 0;
  pointer-events: auto;
}

@keyframes fade-in-overlay {
  from {
    opacity: 0;
  }

  to {
    opacity: 0.5;
  }
}

@keyframes fade-out-overlay {
  from {
    opacity: 0.5;
  }

  to {
    opacity: 0;
  }
}

s-dialog* > * {
  transition-property: opacity, translate, rotate, scale, transform, filter,
    backdrop-filter, clip-path, mix-blend-mode, box-shadow, color,
    background-color, border-color, text-decoration-color, fill, stroke;
}

s-dialog[display] > * {
  display: var(---display, flex) !important;
}

s-dialog[position] > * {
  position: var(---position, absolute) !important;
}

s-dialog[position="sticky-top"] > * {
  inset: 0 0 auto 0;
  z-index: 1;
}

s-dialog[position="sticky-bottom"] > * {
  inset: auto 0 0 0;
  z-index: 1;
}

s-dialog[position="sticky-left"] > * {
  inset: 0 auto 0 0;
  z-index: 1;
}

s-dialog[position="sticky-right"] > * {
  inset: 0 0 0 auto;
  z-index: 1;
}

s-dialog[position="fixed-top"] > * {
  inset: 0 0 auto 0;
  z-index: 1;
}

s-dialog[position="fixed-bottom"] > * {
  inset: auto 0 0 0;
  z-index: 1;
}

s-dialog[position="fixed-left"] > * {
  inset: 0 auto 0 0;
  z-index: 1;
}

s-dialog[position="fixed-right"] > * {
  inset: 0 0 0 auto;
  z-index: 1;
}

s-dialog[aspect] > * {
  aspect-ratio: var(---aspect, 1) !important;
}

s-dialog[overflow] > * {
  overflow: var(---overflow, scroll) !important;
}

s-dialog[overflow-x] > * {
  overflow-x: var(---overflow-x, scroll) !important;
}

s-dialog[overflow-y] > * {
  overflow-y: var(---overflow-y, scroll) !important;
}

s-dialog[z] > * {
  z-index: var(---z, 1) !important;
}

s-dialog:is([w], [width]) > * {
  width: var(---width, 100%) !important;
}

s-dialog:is([w-min], [width-min]) > * {
  min-width: var(---width-min, 0) !important;
}

s-dialog:is([w-max], [width-max]) > * {
  max-width: var(---width-max, 100%) !important;
}

s-dialog:is([h], [height]) > * {
  height: var(---height, 100%) !important;
}

s-dialog:is([h-min], [height-min]) > * {
  min-height: var(---height-min, 0) !important;
}

s-dialog:is([h-max], [height-max]) > * {
  max-height: var(---height-max, 100%) !important;
}

s-dialog:is([c], [corner]) > * {
  border-radius: var(---corner, 8px) !important;
}

s-dialog:is([c-tl], [corner-top-left]) > * {
  border-top-left-radius: var(---corner-top-left, 8px) !important;
}

s-dialog:is([c-tr], [corner-top-right]) > * {
  border-top-right-radius: var(---corner-top-right, 8px) !important;
}

s-dialog:is([c-bl], [corner-bottom-left]) > * {
  border-bottom-left-radius: var(---corner-bottom-left, 8px) !important;
}

s-dialog:is([c-br], [corner-bottom-right]) > * {
  border-bottom-right-radius: var(---corner-bottom-right, 8px) !important;
}

s-dialog:is([o-color], [outline-color]) > * {
  outline-style: solid;
  outline-color: var(---outline-color, hsl(0 100% 100% / 50%)) !important;
}

s-dialog:is([o-width], [outline-width]) > * {
  outline-style: solid;
  outline-width: var(---outline-width, 8px) !important;
}

s-dialog:is([o-style], [outline-style]) > * {
  outline-style: var(---outline-style, solid) !important;
}

s-dialog:is([b-color], [border-color]) > * {
  border-style: solid;
  border-color: var(---border-color, currentColor) !important;
}

s-dialog:is([b-color-t], [border-color-top]) > * {
  border-style: solid;
  border-top-color: var(---border-color-top, currentColor) !important;
}

s-dialog:is([b-color-b], [border-color-bottom]) > * {
  border-style: solid;
  border-bottom-color: var(---border-color-bottom, currentColor) !important;
}

s-dialog:is([b-color-l], [border-color-left]) > * {
  border-style: solid;
  border-left-color: var(---border-color-left, currentColor) !important;
}

s-dialog:is([b-color-r], [border-color-right]) > * {
  border-style: solid;
  border-right-color: var(---border-color-right, currentColor) !important;
}

s-dialog:is([b-width], [border-width]) > * {
  border-style: solid;
  border-width: var(---border-width, 8px) !important;
}

s-dialog:is([b-width-t], [border-width-top]) > * {
  border-style: solid;
  border-top-width: var(---border-width-top, 8px) !important;
}

s-dialog:is([b-width-b], [border-width-bottom]) > * {
  border-style: solid;
  border-bottom-width: var(---border-width-bottom, 8px) !important;
}

s-dialog:is([b-width-l], [border-width-left]) > * {
  border-style: solid;
  border-left-width: var(---border-width-left, 8px) !important;
}

s-dialog:is([b-width-r], [border-width-right]) > * {
  border-style: solid;
  border-right-width: var(---border-width-right, 8px) !important;
}

s-dialog:is([b-style], [border-style]) > * {
  border-style: var(---border-style, solid) !important;
}

s-dialog:is([b-style-t], [border-style-top]) > * {
  border-top-style: var(---border-style-top, solid) !important;
}

s-dialog:is([b-style-b], [border-style-bottom]) > * {
  border-bottom-style: var(---border-style-bottom, solid) !important;
}

s-dialog:is([b-style-l], [border-style-left]) > * {
  border-left-style: var(---border-style-left, solid) !important;
}

s-dialog:is([b-style-r], [border-style-right]) > * {
  border-right-style: var(---border-style-right, solid) !important;
}

s-dialog:is([i], [inset]) > * {
  inset: var(---inset, 8px) !important;
}

s-dialog:is([i-t], [inset-top]) > * {
  top: var(---inset-top, 8px) !important;
}

s-dialog:is([i-b], [inset-bottom]) > * {
  bottom: var(---inset-bottom, 8px) !important;
}

s-dialog:is([i-l], [inset-left]) > * {
  left: var(---inset-left, 8px) !important;
}

s-dialog:is([i-r], [inset-right]) > * {
  right: var(---inset-right, 8px) !important;
}

s-dialog:is([m], [margin]) > * {
  margin: var(---margin, 8px) !important;
}

s-dialog:is([m-t], [margin-top]) > * {
  margin-top: var(---margin-top, 8px) !important;
}

s-dialog:is([m-b], [margin-bottom]) > * {
  margin-bottom: var(---margin-bottom, 8px) !important;
}

s-dialog:is([m-l], [margin-left]) > * {
  margin-left: var(---margin-left, 8px) !important;
}

s-dialog:is([m-r], [margin-right]) > * {
  margin-right: var(---margin-right, 8px) !important;
}

s-dialog:is([p], [padding]) > * {
  padding: var(---padding, 8px) !important;
}

s-dialog:is([p-t], [padding-top]) > * {
  padding-top: var(---padding-top, 8px) !important;
}

s-dialog:is([p-b], [padding-bottom]) > * {
  padding-bottom: var(---padding-bottom, 8px) !important;
}

s-dialog:is([p-l], [padding-left]) > * {
  padding-left: var(---padding-left, 8px) !important;
}

s-dialog:is([p-r], [padding-right]) > * {
  padding-right: var(---padding-right, 8px) !important;
}

s-dialog:is([child-layout="row"], [child-layout="column"]) > * {
  display: flex;
  flex-direction: var(---child-layout, row) !important;
}

s-dialog:is([child-layout="grid"], [child-columns]) > * {
  display: grid;
  grid-template-columns: var(---child-columns, 1fr 1fr 1fr);
}

s-dialog[child-gap] > * {
  gap: var(---child-gap, 8px) !important;
}

s-dialog[child-align] > * {
  align-items: var(---child-align, center) !important;
}

s-dialog[child-justify] > * {
  justify-content: var(---child-justify, center) !important;
}

s-dialog[child-overflow] > * {
  flex-wrap: var(---child-overflow, nowrap) !important;
}

s-dialog[self-align] > * {
  align-self: var(---self-align, center) !important;
}

s-dialog[flex] > * {
  flex: var(---flex, 1) !important;
}

s-dialog[grow] > * {
  flex-grow: var(---grow, 1) !important;
}

s-dialog[shrink] > * {
  flex-shrink: var(---shrink, 1) !important;
}

s-dialog[order] > * {
  order: var(---order, 0) !important;
}

s-dialog[fill] path > * {
  fill: var(---fill, currentColor) !important;
}

s-dialog[stroke] path > * {
  stroke: var(---stroke, currentColor) !important;
}

s-dialog[stroke-width] path > * {
  stroke-width: var(---stroke-width, 1) !important;
}

s-dialog[visible] > * {
  visibility: var(---visible, visible) !important;
}

s-dialog[interactable] > * {
  pointer-events: var(---interactable, auto) !important;
}

s-dialog[interactable="none"] > * {
  cursor: default;
}

s-dialog[selectable] > * {
  user-select: var(---selectable, auto) !important;
}

[selectable=""],
[selectable="auto"],
s-dialog[selectable="all"] > * {
  cursor: text;
}

s-dialog[cursor] > * {
  cursor: var(---cursor, auto) !important;
}

s-dialog[text-font] > * {
  font-family: var(---text-font, monospace) !important;
}

s-dialog[text-size] > * {
  font-size: var(---text-size, 1rem) !important;
}

s-dialog[text-size="2xs"] > * {
  line-height: var(---theme-text-2xs-line-height, 1.5);
}

s-dialog[text-size="xs"] > * {
  line-height: var(---theme-text-xs-line-height, 1.5);
}

s-dialog[text-size="sm"] > * {
  line-height: var(---theme-text-sm-line-height, 1.5);
}

s-dialog[text-size="md"] > * {
  line-height: var(---theme-text-md-line-height, 1.5);
}

s-dialog[text-size="lg"] > * {
  line-height: var(---theme-text-lg-line-height, 1.5);
}

s-dialog[text-size="xl"] > * {
  line-height: var(---theme-text-xl-line-height, 1.5);
}

s-dialog[text-size="2xl"] > * {
  line-height: var(---theme-text-2xl-line-height, 1.5);
}

s-dialog[text-size="3xl"] > * {
  line-height: var(---theme-text-3xl-line-height, 1.5);
}

s-dialog[text-size="4xl"] > * {
  line-height: var(---theme-text-4xl-line-height, 1.5);
}

s-dialog[text-size="5xl"] > * {
  line-height: var(---theme-text-5xl-line-height, 1.5);
}

s-dialog[text-size="6xl"] > * {
  line-height: var(---theme-text-6xl-line-height, 1.5);
}

s-dialog[text-size="7xl"] > * {
  line-height: var(---theme-text-7xl-line-height, 1.5);
}

s-dialog[text-size="8xl"] > * {
  line-height: var(---theme-text-8xl-line-height, 1.5);
}

s-dialog[text-size="9xl"] > * {
  line-height: var(---theme-text-9xl-line-height, 1.5);
}

s-dialog[text-leading] > * {
  line-height: var(---text-leading, 1.5) !important;
}

s-dialog[text-tracking] > * {
  letter-spacing: var(---text-tracking, 1.5) !important;
}

s-dialog[text-weight] > * {
  font-weight: var(---text-weight, 600) !important;
}

s-dialog[text-style] > * {
  font-style: var(---text-style, italic) !important;
}

s-dialog[text-decoration-line] > * {
  text-decoration-line: var(---text-decoration-line, underline) !important;
}

s-dialog[text-decoration-color] > * {
  text-decoration-color: var(---text-decoration-color, currentColor) !important;
}

s-dialog[text-decoration-thickness] > * {
  text-decoration-thickness: var(---text-decoration-thickness, auto) !important;
}

s-dialog[text-underline-offset] > * {
  text-underline-offset: var(---text-underline-offset, 4px) !important;
}

s-dialog[text-case] > * {
  text-transform: var(---text-case, uppercase) !important;
}

s-dialog[text-align] > * {
  text-align: var(---text-align, center) !important;
}

s-dialog[text-overflow] > * {
  text-overflow: var(---text-overflow, clip) !important;
}

s-dialog[text-overflow=""] > * {
  white-space: nowrap;
}

s-dialog[text-overflow="wrap"] > * {
  white-space: break-spaces;
}

s-dialog[text-overflow="visible"] > * {
  white-space: nowrap;
}

s-dialog[text-overflow="clip"] > * {
  white-space: nowrap;
}

s-dialog[text-overflow="ellipsis"] > * {
  overflow: hidden;
  white-space: nowrap;
}

s-dialog[text-whitespace] > * {
  white-space: var(---text-whitespace, normal) !important;
}

s-dialog[text-color] > * {
  color: var(---text-color, white) !important;
}

s-dialog[text-stroke] > * {
  text-shadow: var(---text-stroke) !important;
}

s-dialog:is([bg-color], [background-color]) > * {
  background-color: var(---background-color) !important;
}

s-dialog:is([bg-image], [background-image]) > * {
  background-image: var(---background-image, none) !important;
}

s-dialog:is([bg-repeat], [background-repeat]) > * {
  background-repeat: var(---background-repeat, repeat) !important;
}

s-dialog:is([bg-align], [background-align]) > * {
  background-position: var(---background-align, center) !important;
}

s-dialog:is([bg-fit], [background-fit]) > * {
  background-size: var(---background-fit, contain) !important;
}

s-dialog[clip] > * {
  clip-path: var(---clip, circle(50%)) !important;
}

s-dialog[filter] > * {
  filter: var(---filter, none) !important;
}

s-dialog[backdrop-filter] > * {
  backdrop-filter: var(---backdrop-filter, none) !important;
}

s-dialog[blend] > * {
  mix-blend-mode: var(---blend, normal) !important;
}

s-dialog[shadow] > * {
  box-shadow: var(
    ---shadow,
    0 1px 2px hsl(0 0% 0% / 30%),
    0 1px 3px hsl(0 0% 0% / 15%)
  ) !important;
}

s-dialog[shadow-inset] > * {
  box-shadow: var(
    ---shadow-inset,
    inset 0 1px 2px hsl(0 0% 0% / 30%),
    inset 0 1px 3px hsl(0 0% 0% / 15%)
  ) !important;
}

s-dialog[ring] > * {
  box-shadow: var(---ring, 0 0 0 2px currentColor) !important;
  outline: none !important;
}

s-dialog[opacity] > * {
  opacity: var(---opacity, 1) !important;
}

s-dialog[translate] > * {
  translate: var(---translate, none) !important;
}

s-dialog[rotate] > * {
  rotate: var(---rotate, none) !important;
}

s-dialog[scale] > * {
  scale: var(---scale, none) !important;
}

s-dialog[pivot] > * {
  transform-origin: var(---pivot, left) !important;
}

s-dialog[transition-delay] > * {
  transition-delay: var(---transition-delay, 100ms) !important;
}

s-dialog[transition-duration] > * {
  transition-duration: var(---transition-duration, 100ms) !important;
}

s-dialog[transition-easing] > * {
  transition-timing-function: var(---transition-easing, ease) !important;
}

s-dialog[animation] > * {
  animation: var(---animation, var(---theme-animation-bounce)) !important;
}

s-dialog[mask] > * {
  ---theme-mask-angled-corner: conic-gradient(
        from -45deg at var(---corner, 8px) var(---corner, 8px),
        #0000 25%,
        #000 0
      )
      calc(-1 * var(---corner, 8px)) 0 /100% 51% repeat-x,
    conic-gradient(
        from 135deg at var(---corner, 8px) calc(100% - var(---corner, 8px)),
        #0000 25%,
        #000 0
      )
      calc(-1 * var(---corner, 8px)) 100%/100% 51% repeat-x !important;
  ---theme-mask-scooped-corner: radial-gradient(
      var(---corner, 8px) at var(---corner, 8px) var(---corner, 8px),
      #0000 99%,
      #000
    )
    calc(-1 * var(---corner, 8px)) calc(-1 * var(---corner, 8px)) !important;
  ---theme-mask-notched-corner: conic-gradient(
      at calc(2 * var(---corner, 8px)) calc(2 * var(---corner, 8px)),
      #000 75%,
      #0000 0
    )
    calc(-1 * var(---corner, 8px)) calc(-1 * var(---corner, 8px)) !important;
  background-color: transparent !important;
  background-image: none !important;
}

s-dialog[mask]::before > * {
  /* Apply mask to a pseudo-element so that drop-shadow filters applied to the root element will match the shape of the mask */
  position: absolute !important;
  inset: 0 !important;
  content: "" !important;
  background-image: var(---background-image, none) !important;
  background-color: var(---background-color) !important;
  -webkit-mask: var(---mask, none) !important;
  mask: var(---mask, none) !important;
}

s-dialog[content-visibility] > * {
  content-visibility: var(---content-visibility, auto);
}

s-dialog[contain-intrinsic-size] > * {
  contain-intrinsic-size: var(---contain-intrinsic-size, none);
}

s-dialog {
  display: contents;
  ---background-color: var(---theme-color-surface);
  ---child-layout: column;
  ---child-align: stretch;
  ---child-justify: flex-start;
  ---child-gap: 16px;
  ---shadow: var(---theme-shadow-box-5);
  ---z: var(---theme-z-index-dialog);
  ---title-text-weight: 400;
  ---title-text-size: var(---theme-text-2xl-font-size);
  ---title-text-leading: var(---theme-text-2xl-line-height);
  ---text-size: var(---theme-text-sm-font-size);
  ---text-leading: var(---theme-text-sm-line-height);
  ---border-color: var(---theme-color-surface-border);
  ---border-width: 1px;
  ---corner: 8px;
  ---margin: auto;
  ---padding: 24px;
  ---enter: var(---theme-animation-open);
  ---exit: var(---theme-animation-close);
  ---mobile-enter: var(---theme-animation-slide-in-up),
    var(---theme-animation-fade-in);
  ---mobile-exit: var(---theme-animation-slide-out-down),
    var(---theme-animation-fade-out);
  ---ease: ease-out;
}

s-dialog > .root {
  display: flex;
  pointer-events: auto;
  flex-direction: var(---child-layout);
  align-items: var(---child-align);
  position: fixed;
  inset: 0;
  padding: 0;
  overflow: hidden;
  box-shadow: var(---shadow);
  z-index: var(---z);
  color: var(---text-color);
  transition: opacity 0.5s var(---ease);
  background-color: var(---background-color);
  border-style: solid;
  border-color: var(---border-color);
  border-width: var(---border-width);
  border-radius: var(---corner);
  margin: var(---margin);
  max-inline-size: min(90vw, 60ch);
  will-change: transform, opacity;
  contain: strict;
}

s-dialog:not([loaded]) > .root {
  opacity: 0;
}

s-dialog[loaded][open] > .root {
  animation: var(---enter) forwards;
  animation-timing-function: var(---ease);
}

s-dialog[loaded]:not([open]) > .root {
  animation: var(---exit) forwards;
  animation-timing-function: var(---ease);
}

@media (width <= 960px) {
  s-dialog > .root {
    margin-block-end: 0;
    border-end-end-radius: 0;
    border-end-start-radius: 0;
    max-inline-size: 100vw;
  }

  s-dialog[loaded][open] > .root {
    animation: var(---mobile-enter) forwards;
    animation-timing-function: var(---ease);
  }

  s-dialog[loaded]:not([open]) > .root {
    animation: var(---mobile-exit) forwards;
    animation-timing-function: var(---ease);
  }
}

s-dialog > .root::backdrop {
  background-color: black;
  will-change: transform, opacity;
  contain: strict;
}

s-dialog:not([loaded]) > .root::backdrop {
  opacity: 0;
}

s-dialog[loaded][open] > .root::backdrop {
  animation: fade-in-overlay 200ms forwards;
}

s-dialog[loaded]:not([open]) > .root::backdrop {
  animation: fade-out-overlay 200ms forwards;
}

s-dialog > .root > form {
  pointer-events: auto;
  display: flex;
  flex-direction: var(---child-layout);
  align-items: var(---child-align);
  gap: var(---child-gap);
  max-block-size: 80vh;
  max-block-size: 80dvb;
  padding: var(---padding);
}

s-dialog > .root > .form > .header {
  display: flex;
  flex-direction: column;
  align-self: flex-start;
  gap: var(---child-gap);
  padding-block-end: 8px;
}

s-dialog[icon] > .root > .form > .header {
  align-items: center;
  align-self: center;
}

s-dialog > .root > .form > .header > .icon {
  display: none;
  font-size: 24px;
}

s-dialog[icon] > .root > .form > .header > .icon {
  display: flex;
}

s-dialog > .root > .form > .article {
  overflow-y: auto;
  max-block-size: 100%;
  /* safari */
  overscroll-behavior-y: contain;
  display: flex;
  justify-items: flex-start;
  z-index: 1;
  font-size: var(---text-size);
  line-height: var(---text-leading);
  gap: var(---child-gap);
  border-style: color;
  border-color: var(---border-color);
  border-width: var(---border-width);
}

s-dialog > .root > .form > .footer {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  gap: var(---child-gap);
}

s-dialog > .root > .form > .header > .label {
  display: none;
  font-weight: var(---title-text-weight);
  font-size: var(---title-text-size);
  line-height: var(---title-text-leading);
  margin: 0;
}

s-dialog[label] > .root > .form > .header > .label {
  display: flex;
}

s-dialog > .root > .form > .footer > .menu {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  padding-inline-start: 0;
  gap: 8px;
  margin: 0;
}

s-dialog > .root > .form > .footer > .menu:only-child {
  margin-inline-start: auto;
}

@keyframes fade-in-overlay {
  from {
    opacity: 0;
  }

  to {
    opacity: 0.5;
  }
}

@keyframes fade-out-overlay {
  from {
    opacity: 0.5;
  }

  to {
    opacity: 0;
  }
}

s-split-pane* > * {
  transition-property: opacity, translate, rotate, scale, transform, filter,
    backdrop-filter, clip-path, mix-blend-mode, box-shadow, color,
    background-color, border-color, text-decoration-color, fill, stroke;
}

s-split-pane[display] > * {
  display: var(---display, flex) !important;
}

s-split-pane[position] > * {
  position: var(---position, absolute) !important;
}

s-split-pane[position="sticky-top"] > * {
  inset: 0 0 auto 0;
  z-index: 1;
}

s-split-pane[position="sticky-bottom"] > * {
  inset: auto 0 0 0;
  z-index: 1;
}

s-split-pane[position="sticky-left"] > * {
  inset: 0 auto 0 0;
  z-index: 1;
}

s-split-pane[position="sticky-right"] > * {
  inset: 0 0 0 auto;
  z-index: 1;
}

s-split-pane[position="fixed-top"] > * {
  inset: 0 0 auto 0;
  z-index: 1;
}

s-split-pane[position="fixed-bottom"] > * {
  inset: auto 0 0 0;
  z-index: 1;
}

s-split-pane[position="fixed-left"] > * {
  inset: 0 auto 0 0;
  z-index: 1;
}

s-split-pane[position="fixed-right"] > * {
  inset: 0 0 0 auto;
  z-index: 1;
}

s-split-pane[aspect] > * {
  aspect-ratio: var(---aspect, 1) !important;
}

s-split-pane[overflow] > * {
  overflow: var(---overflow, scroll) !important;
}

s-split-pane[overflow-x] > * {
  overflow-x: var(---overflow-x, scroll) !important;
}

s-split-pane[overflow-y] > * {
  overflow-y: var(---overflow-y, scroll) !important;
}

s-split-pane[z] > * {
  z-index: var(---z, 1) !important;
}

s-split-pane:is([w], [width]) > * {
  width: var(---width, 100%) !important;
}

s-split-pane:is([w-min], [width-min]) > * {
  min-width: var(---width-min, 0) !important;
}

s-split-pane:is([w-max], [width-max]) > * {
  max-width: var(---width-max, 100%) !important;
}

s-split-pane:is([h], [height]) > * {
  height: var(---height, 100%) !important;
}

s-split-pane:is([h-min], [height-min]) > * {
  min-height: var(---height-min, 0) !important;
}

s-split-pane:is([h-max], [height-max]) > * {
  max-height: var(---height-max, 100%) !important;
}

s-split-pane:is([c], [corner]) > * {
  border-radius: var(---corner, 8px) !important;
}

s-split-pane:is([c-tl], [corner-top-left]) > * {
  border-top-left-radius: var(---corner-top-left, 8px) !important;
}

s-split-pane:is([c-tr], [corner-top-right]) > * {
  border-top-right-radius: var(---corner-top-right, 8px) !important;
}

s-split-pane:is([c-bl], [corner-bottom-left]) > * {
  border-bottom-left-radius: var(---corner-bottom-left, 8px) !important;
}

s-split-pane:is([c-br], [corner-bottom-right]) > * {
  border-bottom-right-radius: var(---corner-bottom-right, 8px) !important;
}

s-split-pane:is([o-color], [outline-color]) > * {
  outline-style: solid;
  outline-color: var(---outline-color, hsl(0 100% 100% / 50%)) !important;
}

s-split-pane:is([o-width], [outline-width]) > * {
  outline-style: solid;
  outline-width: var(---outline-width, 8px) !important;
}

s-split-pane:is([o-style], [outline-style]) > * {
  outline-style: var(---outline-style, solid) !important;
}

s-split-pane:is([b-color], [border-color]) > * {
  border-style: solid;
  border-color: var(---border-color, currentColor) !important;
}

s-split-pane:is([b-color-t], [border-color-top]) > * {
  border-style: solid;
  border-top-color: var(---border-color-top, currentColor) !important;
}

s-split-pane:is([b-color-b], [border-color-bottom]) > * {
  border-style: solid;
  border-bottom-color: var(---border-color-bottom, currentColor) !important;
}

s-split-pane:is([b-color-l], [border-color-left]) > * {
  border-style: solid;
  border-left-color: var(---border-color-left, currentColor) !important;
}

s-split-pane:is([b-color-r], [border-color-right]) > * {
  border-style: solid;
  border-right-color: var(---border-color-right, currentColor) !important;
}

s-split-pane:is([b-width], [border-width]) > * {
  border-style: solid;
  border-width: var(---border-width, 8px) !important;
}

s-split-pane:is([b-width-t], [border-width-top]) > * {
  border-style: solid;
  border-top-width: var(---border-width-top, 8px) !important;
}

s-split-pane:is([b-width-b], [border-width-bottom]) > * {
  border-style: solid;
  border-bottom-width: var(---border-width-bottom, 8px) !important;
}

s-split-pane:is([b-width-l], [border-width-left]) > * {
  border-style: solid;
  border-left-width: var(---border-width-left, 8px) !important;
}

s-split-pane:is([b-width-r], [border-width-right]) > * {
  border-style: solid;
  border-right-width: var(---border-width-right, 8px) !important;
}

s-split-pane:is([b-style], [border-style]) > * {
  border-style: var(---border-style, solid) !important;
}

s-split-pane:is([b-style-t], [border-style-top]) > * {
  border-top-style: var(---border-style-top, solid) !important;
}

s-split-pane:is([b-style-b], [border-style-bottom]) > * {
  border-bottom-style: var(---border-style-bottom, solid) !important;
}

s-split-pane:is([b-style-l], [border-style-left]) > * {
  border-left-style: var(---border-style-left, solid) !important;
}

s-split-pane:is([b-style-r], [border-style-right]) > * {
  border-right-style: var(---border-style-right, solid) !important;
}

s-split-pane:is([i], [inset]) > * {
  inset: var(---inset, 8px) !important;
}

s-split-pane:is([i-t], [inset-top]) > * {
  top: var(---inset-top, 8px) !important;
}

s-split-pane:is([i-b], [inset-bottom]) > * {
  bottom: var(---inset-bottom, 8px) !important;
}

s-split-pane:is([i-l], [inset-left]) > * {
  left: var(---inset-left, 8px) !important;
}

s-split-pane:is([i-r], [inset-right]) > * {
  right: var(---inset-right, 8px) !important;
}

s-split-pane:is([m], [margin]) > * {
  margin: var(---margin, 8px) !important;
}

s-split-pane:is([m-t], [margin-top]) > * {
  margin-top: var(---margin-top, 8px) !important;
}

s-split-pane:is([m-b], [margin-bottom]) > * {
  margin-bottom: var(---margin-bottom, 8px) !important;
}

s-split-pane:is([m-l], [margin-left]) > * {
  margin-left: var(---margin-left, 8px) !important;
}

s-split-pane:is([m-r], [margin-right]) > * {
  margin-right: var(---margin-right, 8px) !important;
}

s-split-pane:is([p], [padding]) > * {
  padding: var(---padding, 8px) !important;
}

s-split-pane:is([p-t], [padding-top]) > * {
  padding-top: var(---padding-top, 8px) !important;
}

s-split-pane:is([p-b], [padding-bottom]) > * {
  padding-bottom: var(---padding-bottom, 8px) !important;
}

s-split-pane:is([p-l], [padding-left]) > * {
  padding-left: var(---padding-left, 8px) !important;
}

s-split-pane:is([p-r], [padding-right]) > * {
  padding-right: var(---padding-right, 8px) !important;
}

s-split-pane:is([child-layout="row"], [child-layout="column"]) > * {
  display: flex;
  flex-direction: var(---child-layout, row) !important;
}

s-split-pane:is([child-layout="grid"], [child-columns]) > * {
  display: grid;
  grid-template-columns: var(---child-columns, 1fr 1fr 1fr);
}

s-split-pane[child-gap] > * {
  gap: var(---child-gap, 8px) !important;
}

s-split-pane[child-align] > * {
  align-items: var(---child-align, center) !important;
}

s-split-pane[child-justify] > * {
  justify-content: var(---child-justify, center) !important;
}

s-split-pane[child-overflow] > * {
  flex-wrap: var(---child-overflow, nowrap) !important;
}

s-split-pane[self-align] > * {
  align-self: var(---self-align, center) !important;
}

s-split-pane[flex] > * {
  flex: var(---flex, 1) !important;
}

s-split-pane[grow] > * {
  flex-grow: var(---grow, 1) !important;
}

s-split-pane[shrink] > * {
  flex-shrink: var(---shrink, 1) !important;
}

s-split-pane[order] > * {
  order: var(---order, 0) !important;
}

s-split-pane[fill] path > * {
  fill: var(---fill, currentColor) !important;
}

s-split-pane[stroke] path > * {
  stroke: var(---stroke, currentColor) !important;
}

s-split-pane[stroke-width] path > * {
  stroke-width: var(---stroke-width, 1) !important;
}

s-split-pane[visible] > * {
  visibility: var(---visible, visible) !important;
}

s-split-pane[interactable] > * {
  pointer-events: var(---interactable, auto) !important;
}

s-split-pane[interactable="none"] > * {
  cursor: default;
}

s-split-pane[selectable] > * {
  user-select: var(---selectable, auto) !important;
}

[selectable=""],
[selectable="auto"],
s-split-pane[selectable="all"] > * {
  cursor: text;
}

s-split-pane[cursor] > * {
  cursor: var(---cursor, auto) !important;
}

s-split-pane[text-font] > * {
  font-family: var(---text-font, monospace) !important;
}

s-split-pane[text-size] > * {
  font-size: var(---text-size, 1rem) !important;
}

s-split-pane[text-size="2xs"] > * {
  line-height: var(---theme-text-2xs-line-height, 1.5);
}

s-split-pane[text-size="xs"] > * {
  line-height: var(---theme-text-xs-line-height, 1.5);
}

s-split-pane[text-size="sm"] > * {
  line-height: var(---theme-text-sm-line-height, 1.5);
}

s-split-pane[text-size="md"] > * {
  line-height: var(---theme-text-md-line-height, 1.5);
}

s-split-pane[text-size="lg"] > * {
  line-height: var(---theme-text-lg-line-height, 1.5);
}

s-split-pane[text-size="xl"] > * {
  line-height: var(---theme-text-xl-line-height, 1.5);
}

s-split-pane[text-size="2xl"] > * {
  line-height: var(---theme-text-2xl-line-height, 1.5);
}

s-split-pane[text-size="3xl"] > * {
  line-height: var(---theme-text-3xl-line-height, 1.5);
}

s-split-pane[text-size="4xl"] > * {
  line-height: var(---theme-text-4xl-line-height, 1.5);
}

s-split-pane[text-size="5xl"] > * {
  line-height: var(---theme-text-5xl-line-height, 1.5);
}

s-split-pane[text-size="6xl"] > * {
  line-height: var(---theme-text-6xl-line-height, 1.5);
}

s-split-pane[text-size="7xl"] > * {
  line-height: var(---theme-text-7xl-line-height, 1.5);
}

s-split-pane[text-size="8xl"] > * {
  line-height: var(---theme-text-8xl-line-height, 1.5);
}

s-split-pane[text-size="9xl"] > * {
  line-height: var(---theme-text-9xl-line-height, 1.5);
}

s-split-pane[text-leading] > * {
  line-height: var(---text-leading, 1.5) !important;
}

s-split-pane[text-tracking] > * {
  letter-spacing: var(---text-tracking, 1.5) !important;
}

s-split-pane[text-weight] > * {
  font-weight: var(---text-weight, 600) !important;
}

s-split-pane[text-style] > * {
  font-style: var(---text-style, italic) !important;
}

s-split-pane[text-decoration-line] > * {
  text-decoration-line: var(---text-decoration-line, underline) !important;
}

s-split-pane[text-decoration-color] > * {
  text-decoration-color: var(---text-decoration-color, currentColor) !important;
}

s-split-pane[text-decoration-thickness] > * {
  text-decoration-thickness: var(---text-decoration-thickness, auto) !important;
}

s-split-pane[text-underline-offset] > * {
  text-underline-offset: var(---text-underline-offset, 4px) !important;
}

s-split-pane[text-case] > * {
  text-transform: var(---text-case, uppercase) !important;
}

s-split-pane[text-align] > * {
  text-align: var(---text-align, center) !important;
}

s-split-pane[text-overflow] > * {
  text-overflow: var(---text-overflow, clip) !important;
}

s-split-pane[text-overflow=""] > * {
  white-space: nowrap;
}

s-split-pane[text-overflow="wrap"] > * {
  white-space: break-spaces;
}

s-split-pane[text-overflow="visible"] > * {
  white-space: nowrap;
}

s-split-pane[text-overflow="clip"] > * {
  white-space: nowrap;
}

s-split-pane[text-overflow="ellipsis"] > * {
  overflow: hidden;
  white-space: nowrap;
}

s-split-pane[text-whitespace] > * {
  white-space: var(---text-whitespace, normal) !important;
}

s-split-pane[text-color] > * {
  color: var(---text-color, white) !important;
}

s-split-pane[text-stroke] > * {
  text-shadow: var(---text-stroke) !important;
}

s-split-pane:is([bg-color], [background-color]) > * {
  background-color: var(---background-color) !important;
}

s-split-pane:is([bg-image], [background-image]) > * {
  background-image: var(---background-image, none) !important;
}

s-split-pane:is([bg-repeat], [background-repeat]) > * {
  background-repeat: var(---background-repeat, repeat) !important;
}

s-split-pane:is([bg-align], [background-align]) > * {
  background-position: var(---background-align, center) !important;
}

s-split-pane:is([bg-fit], [background-fit]) > * {
  background-size: var(---background-fit, contain) !important;
}

s-split-pane[clip] > * {
  clip-path: var(---clip, circle(50%)) !important;
}

s-split-pane[filter] > * {
  filter: var(---filter, none) !important;
}

s-split-pane[backdrop-filter] > * {
  backdrop-filter: var(---backdrop-filter, none) !important;
}

s-split-pane[blend] > * {
  mix-blend-mode: var(---blend, normal) !important;
}

s-split-pane[shadow] > * {
  box-shadow: var(
    ---shadow,
    0 1px 2px hsl(0 0% 0% / 30%),
    0 1px 3px hsl(0 0% 0% / 15%)
  ) !important;
}

s-split-pane[shadow-inset] > * {
  box-shadow: var(
    ---shadow-inset,
    inset 0 1px 2px hsl(0 0% 0% / 30%),
    inset 0 1px 3px hsl(0 0% 0% / 15%)
  ) !important;
}

s-split-pane[ring] > * {
  box-shadow: var(---ring, 0 0 0 2px currentColor) !important;
  outline: none !important;
}

s-split-pane[opacity] > * {
  opacity: var(---opacity, 1) !important;
}

s-split-pane[translate] > * {
  translate: var(---translate, none) !important;
}

s-split-pane[rotate] > * {
  rotate: var(---rotate, none) !important;
}

s-split-pane[scale] > * {
  scale: var(---scale, none) !important;
}

s-split-pane[pivot] > * {
  transform-origin: var(---pivot, left) !important;
}

s-split-pane[transition-delay] > * {
  transition-delay: var(---transition-delay, 100ms) !important;
}

s-split-pane[transition-duration] > * {
  transition-duration: var(---transition-duration, 100ms) !important;
}

s-split-pane[transition-easing] > * {
  transition-timing-function: var(---transition-easing, ease) !important;
}

s-split-pane[animation] > * {
  animation: var(---animation, var(---theme-animation-bounce)) !important;
}

s-split-pane[mask] > * {
  ---theme-mask-angled-corner: conic-gradient(
        from -45deg at var(---corner, 8px) var(---corner, 8px),
        #0000 25%,
        #000 0
      )
      calc(-1 * var(---corner, 8px)) 0 /100% 51% repeat-x,
    conic-gradient(
        from 135deg at var(---corner, 8px) calc(100% - var(---corner, 8px)),
        #0000 25%,
        #000 0
      )
      calc(-1 * var(---corner, 8px)) 100%/100% 51% repeat-x !important;
  ---theme-mask-scooped-corner: radial-gradient(
      var(---corner, 8px) at var(---corner, 8px) var(---corner, 8px),
      #0000 99%,
      #000
    )
    calc(-1 * var(---corner, 8px)) calc(-1 * var(---corner, 8px)) !important;
  ---theme-mask-notched-corner: conic-gradient(
      at calc(2 * var(---corner, 8px)) calc(2 * var(---corner, 8px)),
      #000 75%,
      #0000 0
    )
    calc(-1 * var(---corner, 8px)) calc(-1 * var(---corner, 8px)) !important;
  background-color: transparent !important;
  background-image: none !important;
}

s-split-pane[mask]::before > * {
  /* Apply mask to a pseudo-element so that drop-shadow filters applied to the root element will match the shape of the mask */
  position: absolute !important;
  inset: 0 !important;
  content: "" !important;
  background-image: var(---background-image, none) !important;
  background-color: var(---background-color) !important;
  -webkit-mask: var(---mask, none) !important;
  mask: var(---mask, none) !important;
}

s-split-pane[content-visibility] > * {
  content-visibility: var(---content-visibility, auto);
}

s-split-pane[contain-intrinsic-size] > * {
  contain-intrinsic-size: var(---contain-intrinsic-size, none);
}

s-split-pane {
  display: contents;
  ---interactable: auto;
  ---resizer-color: transparent;
  ---resizer-width: 8px;
  ---divider-opacity: 1;
  ---divider-color: var(---theme-color-divider);
  ---divider-width: 1px;
  ---indicator-color: var(---theme-color-primary-50);
  ---indicator-width: 4px;
  ---resizer-center: calc(var(---resizer-width) / 2);
  ---divider-center: calc(var(---divider-width) / 2);
  ---divider-offset: calc(var(---resizer-center) - var(---divider-center));
}

s-split-pane:not([vertical]) {
  ---initial-size: 50vw;
}

s-split-pane[vertical] {
  ---initial-size: 50vh;
}

s-split-pane > .root {
  display: flex;
}

s-split-pane:not([vertical]) > .root {
  flex-direction: row;
  container-type: inline-size;
}

s-split-pane[vertical] > .root {
  flex-direction: column;
  container-type: size;
}

s-split-pane > .root > .panel {
  position: relative;
  align-self: stretch;
  display: flex;
  flex-direction: column;
}

s-split-pane:not([vertical]) > .root > .panel {
  max-width: calc(100% - var(---min-panel-width));
  min-width: auto;
}

s-split-pane[vertical] > .root > .panel {
  max-height: calc(100% - var(---min-panel-height));
  min-height: auto;
}

s-split-pane > .root > .panel > .resize {
  pointer-events: var(---interactable);
  opacity: 0;
  overflow: hidden;
}

s-split-pane:not([vertical]) > .root > .panel > .resize {
  min-width: calc(var(---min-panel-width) + var(---resizer-width));
  width: var(---initial-size);
  height: 16px;
  transform: scaleY(1000);
  resize: horizontal;
}

s-split-pane[vertical] > .root > .panel > .resize {
  min-height: var(---min-panel-height);
  width: 16px;
  height: var(---initial-size);
  transform: scaleX(1000);
  resize: vertical;
}

s-split-pane[disabled] > .root > .panel > .resize {
  pointer-events: none;
}

s-split-pane > .root > .panel > .divider {
  display: flex;
  pointer-events: none;
  position: absolute;
  background-color: var(---resizer-color);
}

s-split-pane:not([vertical]) > .root > .panel > .divider {
  inset: 0 0 0 auto;
  width: var(---resizer-width);
}

s-split-pane[vertical] > .root > .panel > .divider {
  inset: auto 0 0 0;
  height: var(---resizer-width);
}

s-split-pane > .root > .panel > .divider::before {
  content: "";
  position: absolute;
  background-color: var(---divider-color);
  opacity: var(---divider-opacity);
}

s-split-pane:not([vertical]) > .root > .panel > .divider::before {
  inset: 0 0 0 var(---divider-offset);
  width: var(---divider-width);
}

s-split-pane[vertical] > .root > .panel > .divider::before {
  inset: var(---divider-offset) 0 0 0;
  height: var(---divider-width);
}

s-split-pane > .root > .panel > .divider::after {
  ---resizer-center: calc(var(---resizer-width) / 2);
  ---indicator-center: calc(var(---indicator-width) / 2);
  ---indicator-offset: calc(var(---resizer-center) - var(---indicator-center));
  content: "";
  position: absolute;
  background-color: var(---indicator-color);
  opacity: 0;
  transition-property: opacity;
  transition-duration: 150ms;
}

s-split-pane:not([vertical]) > .root > .panel > .divider::after {
  inset: 0 0 0 var(---indicator-offset);
  width: var(---indicator-width);
}

s-split-pane[vertical] > .root > .panel > .divider::after {
  inset: var(---indicator-offset) 0 0 0;
  height: var(---indicator-width);
}

s-split-pane:not([disabled])
  > .root
  > .panel
  > .resize
  + .start
  + .divider:focus::after,
s-split-pane:not([disabled])
  > .root
  > .panel
  > .resize:hover
  + .start
  + .divider::after,
s-split-pane:not([disabled])
  > .root
  > .panel
  > .resize:active
  + .start
  + .divider::after {
  opacity: 1;
}

s-split-pane > .root > .panel > .start {
  pointer-events: auto;
  display: flex;
  position: absolute;
}

s-split-pane:not([vertical]) > .root > .panel > .start {
  min-width: var(---min-panel-width);
  inset: 0 var(---resizer-width) 0 0;
}

s-split-pane[vertical] > .root > .panel > .start {
  min-height: var(---min-panel-height);
  inset: 0 0 var(---resizer-width) 0;
}

s-split-pane > .root > .end {
  display: flex;
  position: relative;
  flex: 1;
  align-self: stretch;
}

s-split-pane:not([vertical]) > .root > .end {
  min-width: var(---min-panel-width);
}

s-split-pane[vertical] > .root > .end {
  min-height: var(---min-panel-height);
}

/* If the container is less than 960px */

@container (max-width: 960px) {
  s-split-pane[responsive="hide"] > .root > .panel > .divider {
    display: none;
  }

  s-split-pane[responsive="hide"] > .root > .panel > .resize {
    display: none;
  }

  /* Hide end panel */

  s-split-pane[responsive="hide"]:not([vertical], [primary="end"]) > .root > .end {
    display: none;
  }

  s-split-pane[responsive="hide"]:not([vertical], [primary="end"]) > .root > .panel {
    min-width: 100%;
  }

  s-split-pane[responsive="hide"] > .root > .panel > .start {
    position: relative;
    inset: 0;
    display: flex;
    flex-direction: column;
    flex: 1;
  }

  /* Hide start panel */

  s-split-pane[responsive="hide"][primary="end"]:not([vertical]) > .root > .panel {
    display: none;
  }

  s-split-pane[responsive="hide"][primary="end"]:not([vertical]) > .root > .end {
    min-width: 100%;
  }

  /* Reveal end panel */

  s-split-pane[responsive="hide"][reveal]:not([vertical], [primary="end"])
    > .root
    > .end {
    display: flex;
    transform: translate(0);
  }

  s-split-pane[responsive="hide"][reveal]:not([vertical], [primary="end"])
    > .root
    > .panel {
    display: none;
  }

  /* Reveal start panel */

  s-split-pane[responsive="hide"][reveal][primary="end"]:not([vertical])
    > .root
    > .panel {
    display: flex;
    transform: translate(0);
  }

  s-split-pane[responsive="hide"][reveal][primary="end"]:not([vertical])
    > .root
    > .panel {
    display: none;
  }
}

s-transition* > * {
  transition-property: opacity, translate, rotate, scale, transform, filter,
    backdrop-filter, clip-path, mix-blend-mode, box-shadow, color,
    background-color, border-color, text-decoration-color, fill, stroke;
}

s-transition[display] > * {
  display: var(---display, flex) !important;
}

s-transition[position] > * {
  position: var(---position, absolute) !important;
}

s-transition[position="sticky-top"] > * {
  inset: 0 0 auto 0;
  z-index: 1;
}

s-transition[position="sticky-bottom"] > * {
  inset: auto 0 0 0;
  z-index: 1;
}

s-transition[position="sticky-left"] > * {
  inset: 0 auto 0 0;
  z-index: 1;
}

s-transition[position="sticky-right"] > * {
  inset: 0 0 0 auto;
  z-index: 1;
}

s-transition[position="fixed-top"] > * {
  inset: 0 0 auto 0;
  z-index: 1;
}

s-transition[position="fixed-bottom"] > * {
  inset: auto 0 0 0;
  z-index: 1;
}

s-transition[position="fixed-left"] > * {
  inset: 0 auto 0 0;
  z-index: 1;
}

s-transition[position="fixed-right"] > * {
  inset: 0 0 0 auto;
  z-index: 1;
}

s-transition[aspect] > * {
  aspect-ratio: var(---aspect, 1) !important;
}

s-transition[overflow] > * {
  overflow: var(---overflow, scroll) !important;
}

s-transition[overflow-x] > * {
  overflow-x: var(---overflow-x, scroll) !important;
}

s-transition[overflow-y] > * {
  overflow-y: var(---overflow-y, scroll) !important;
}

s-transition[z] > * {
  z-index: var(---z, 1) !important;
}

s-transition:is([w], [width]) > * {
  width: var(---width, 100%) !important;
}

s-transition:is([w-min], [width-min]) > * {
  min-width: var(---width-min, 0) !important;
}

s-transition:is([w-max], [width-max]) > * {
  max-width: var(---width-max, 100%) !important;
}

s-transition:is([h], [height]) > * {
  height: var(---height, 100%) !important;
}

s-transition:is([h-min], [height-min]) > * {
  min-height: var(---height-min, 0) !important;
}

s-transition:is([h-max], [height-max]) > * {
  max-height: var(---height-max, 100%) !important;
}

s-transition:is([c], [corner]) > * {
  border-radius: var(---corner, 8px) !important;
}

s-transition:is([c-tl], [corner-top-left]) > * {
  border-top-left-radius: var(---corner-top-left, 8px) !important;
}

s-transition:is([c-tr], [corner-top-right]) > * {
  border-top-right-radius: var(---corner-top-right, 8px) !important;
}

s-transition:is([c-bl], [corner-bottom-left]) > * {
  border-bottom-left-radius: var(---corner-bottom-left, 8px) !important;
}

s-transition:is([c-br], [corner-bottom-right]) > * {
  border-bottom-right-radius: var(---corner-bottom-right, 8px) !important;
}

s-transition:is([o-color], [outline-color]) > * {
  outline-style: solid;
  outline-color: var(---outline-color, hsl(0 100% 100% / 50%)) !important;
}

s-transition:is([o-width], [outline-width]) > * {
  outline-style: solid;
  outline-width: var(---outline-width, 8px) !important;
}

s-transition:is([o-style], [outline-style]) > * {
  outline-style: var(---outline-style, solid) !important;
}

s-transition:is([b-color], [border-color]) > * {
  border-style: solid;
  border-color: var(---border-color, currentColor) !important;
}

s-transition:is([b-color-t], [border-color-top]) > * {
  border-style: solid;
  border-top-color: var(---border-color-top, currentColor) !important;
}

s-transition:is([b-color-b], [border-color-bottom]) > * {
  border-style: solid;
  border-bottom-color: var(---border-color-bottom, currentColor) !important;
}

s-transition:is([b-color-l], [border-color-left]) > * {
  border-style: solid;
  border-left-color: var(---border-color-left, currentColor) !important;
}

s-transition:is([b-color-r], [border-color-right]) > * {
  border-style: solid;
  border-right-color: var(---border-color-right, currentColor) !important;
}

s-transition:is([b-width], [border-width]) > * {
  border-style: solid;
  border-width: var(---border-width, 8px) !important;
}

s-transition:is([b-width-t], [border-width-top]) > * {
  border-style: solid;
  border-top-width: var(---border-width-top, 8px) !important;
}

s-transition:is([b-width-b], [border-width-bottom]) > * {
  border-style: solid;
  border-bottom-width: var(---border-width-bottom, 8px) !important;
}

s-transition:is([b-width-l], [border-width-left]) > * {
  border-style: solid;
  border-left-width: var(---border-width-left, 8px) !important;
}

s-transition:is([b-width-r], [border-width-right]) > * {
  border-style: solid;
  border-right-width: var(---border-width-right, 8px) !important;
}

s-transition:is([b-style], [border-style]) > * {
  border-style: var(---border-style, solid) !important;
}

s-transition:is([b-style-t], [border-style-top]) > * {
  border-top-style: var(---border-style-top, solid) !important;
}

s-transition:is([b-style-b], [border-style-bottom]) > * {
  border-bottom-style: var(---border-style-bottom, solid) !important;
}

s-transition:is([b-style-l], [border-style-left]) > * {
  border-left-style: var(---border-style-left, solid) !important;
}

s-transition:is([b-style-r], [border-style-right]) > * {
  border-right-style: var(---border-style-right, solid) !important;
}

s-transition:is([i], [inset]) > * {
  inset: var(---inset, 8px) !important;
}

s-transition:is([i-t], [inset-top]) > * {
  top: var(---inset-top, 8px) !important;
}

s-transition:is([i-b], [inset-bottom]) > * {
  bottom: var(---inset-bottom, 8px) !important;
}

s-transition:is([i-l], [inset-left]) > * {
  left: var(---inset-left, 8px) !important;
}

s-transition:is([i-r], [inset-right]) > * {
  right: var(---inset-right, 8px) !important;
}

s-transition:is([m], [margin]) > * {
  margin: var(---margin, 8px) !important;
}

s-transition:is([m-t], [margin-top]) > * {
  margin-top: var(---margin-top, 8px) !important;
}

s-transition:is([m-b], [margin-bottom]) > * {
  margin-bottom: var(---margin-bottom, 8px) !important;
}

s-transition:is([m-l], [margin-left]) > * {
  margin-left: var(---margin-left, 8px) !important;
}

s-transition:is([m-r], [margin-right]) > * {
  margin-right: var(---margin-right, 8px) !important;
}

s-transition:is([p], [padding]) > * {
  padding: var(---padding, 8px) !important;
}

s-transition:is([p-t], [padding-top]) > * {
  padding-top: var(---padding-top, 8px) !important;
}

s-transition:is([p-b], [padding-bottom]) > * {
  padding-bottom: var(---padding-bottom, 8px) !important;
}

s-transition:is([p-l], [padding-left]) > * {
  padding-left: var(---padding-left, 8px) !important;
}

s-transition:is([p-r], [padding-right]) > * {
  padding-right: var(---padding-right, 8px) !important;
}

s-transition:is([child-layout="row"], [child-layout="column"]) > * {
  display: flex;
  flex-direction: var(---child-layout, row) !important;
}

s-transition:is([child-layout="grid"], [child-columns]) > * {
  display: grid;
  grid-template-columns: var(---child-columns, 1fr 1fr 1fr);
}

s-transition[child-gap] > * {
  gap: var(---child-gap, 8px) !important;
}

s-transition[child-align] > * {
  align-items: var(---child-align, center) !important;
}

s-transition[child-justify] > * {
  justify-content: var(---child-justify, center) !important;
}

s-transition[child-overflow] > * {
  flex-wrap: var(---child-overflow, nowrap) !important;
}

s-transition[self-align] > * {
  align-self: var(---self-align, center) !important;
}

s-transition[flex] > * {
  flex: var(---flex, 1) !important;
}

s-transition[grow] > * {
  flex-grow: var(---grow, 1) !important;
}

s-transition[shrink] > * {
  flex-shrink: var(---shrink, 1) !important;
}

s-transition[order] > * {
  order: var(---order, 0) !important;
}

s-transition[fill] path > * {
  fill: var(---fill, currentColor) !important;
}

s-transition[stroke] path > * {
  stroke: var(---stroke, currentColor) !important;
}

s-transition[stroke-width] path > * {
  stroke-width: var(---stroke-width, 1) !important;
}

s-transition[visible] > * {
  visibility: var(---visible, visible) !important;
}

s-transition[interactable] > * {
  pointer-events: var(---interactable, auto) !important;
}

s-transition[interactable="none"] > * {
  cursor: default;
}

s-transition[selectable] > * {
  user-select: var(---selectable, auto) !important;
}

[selectable=""],
[selectable="auto"],
s-transition[selectable="all"] > * {
  cursor: text;
}

s-transition[cursor] > * {
  cursor: var(---cursor, auto) !important;
}

s-transition[text-font] > * {
  font-family: var(---text-font, monospace) !important;
}

s-transition[text-size] > * {
  font-size: var(---text-size, 1rem) !important;
}

s-transition[text-size="2xs"] > * {
  line-height: var(---theme-text-2xs-line-height, 1.5);
}

s-transition[text-size="xs"] > * {
  line-height: var(---theme-text-xs-line-height, 1.5);
}

s-transition[text-size="sm"] > * {
  line-height: var(---theme-text-sm-line-height, 1.5);
}

s-transition[text-size="md"] > * {
  line-height: var(---theme-text-md-line-height, 1.5);
}

s-transition[text-size="lg"] > * {
  line-height: var(---theme-text-lg-line-height, 1.5);
}

s-transition[text-size="xl"] > * {
  line-height: var(---theme-text-xl-line-height, 1.5);
}

s-transition[text-size="2xl"] > * {
  line-height: var(---theme-text-2xl-line-height, 1.5);
}

s-transition[text-size="3xl"] > * {
  line-height: var(---theme-text-3xl-line-height, 1.5);
}

s-transition[text-size="4xl"] > * {
  line-height: var(---theme-text-4xl-line-height, 1.5);
}

s-transition[text-size="5xl"] > * {
  line-height: var(---theme-text-5xl-line-height, 1.5);
}

s-transition[text-size="6xl"] > * {
  line-height: var(---theme-text-6xl-line-height, 1.5);
}

s-transition[text-size="7xl"] > * {
  line-height: var(---theme-text-7xl-line-height, 1.5);
}

s-transition[text-size="8xl"] > * {
  line-height: var(---theme-text-8xl-line-height, 1.5);
}

s-transition[text-size="9xl"] > * {
  line-height: var(---theme-text-9xl-line-height, 1.5);
}

s-transition[text-leading] > * {
  line-height: var(---text-leading, 1.5) !important;
}

s-transition[text-tracking] > * {
  letter-spacing: var(---text-tracking, 1.5) !important;
}

s-transition[text-weight] > * {
  font-weight: var(---text-weight, 600) !important;
}

s-transition[text-style] > * {
  font-style: var(---text-style, italic) !important;
}

s-transition[text-decoration-line] > * {
  text-decoration-line: var(---text-decoration-line, underline) !important;
}

s-transition[text-decoration-color] > * {
  text-decoration-color: var(---text-decoration-color, currentColor) !important;
}

s-transition[text-decoration-thickness] > * {
  text-decoration-thickness: var(---text-decoration-thickness, auto) !important;
}

s-transition[text-underline-offset] > * {
  text-underline-offset: var(---text-underline-offset, 4px) !important;
}

s-transition[text-case] > * {
  text-transform: var(---text-case, uppercase) !important;
}

s-transition[text-align] > * {
  text-align: var(---text-align, center) !important;
}

s-transition[text-overflow] > * {
  text-overflow: var(---text-overflow, clip) !important;
}

s-transition[text-overflow=""] > * {
  white-space: nowrap;
}

s-transition[text-overflow="wrap"] > * {
  white-space: break-spaces;
}

s-transition[text-overflow="visible"] > * {
  white-space: nowrap;
}

s-transition[text-overflow="clip"] > * {
  white-space: nowrap;
}

s-transition[text-overflow="ellipsis"] > * {
  overflow: hidden;
  white-space: nowrap;
}

s-transition[text-whitespace] > * {
  white-space: var(---text-whitespace, normal) !important;
}

s-transition[text-color] > * {
  color: var(---text-color, white) !important;
}

s-transition[text-stroke] > * {
  text-shadow: var(---text-stroke) !important;
}

s-transition:is([bg-color], [background-color]) > * {
  background-color: var(---background-color) !important;
}

s-transition:is([bg-image], [background-image]) > * {
  background-image: var(---background-image, none) !important;
}

s-transition:is([bg-repeat], [background-repeat]) > * {
  background-repeat: var(---background-repeat, repeat) !important;
}

s-transition:is([bg-align], [background-align]) > * {
  background-position: var(---background-align, center) !important;
}

s-transition:is([bg-fit], [background-fit]) > * {
  background-size: var(---background-fit, contain) !important;
}

s-transition[clip] > * {
  clip-path: var(---clip, circle(50%)) !important;
}

s-transition[filter] > * {
  filter: var(---filter, none) !important;
}

s-transition[backdrop-filter] > * {
  backdrop-filter: var(---backdrop-filter, none) !important;
}

s-transition[blend] > * {
  mix-blend-mode: var(---blend, normal) !important;
}

s-transition[shadow] > * {
  box-shadow: var(
    ---shadow,
    0 1px 2px hsl(0 0% 0% / 30%),
    0 1px 3px hsl(0 0% 0% / 15%)
  ) !important;
}

s-transition[shadow-inset] > * {
  box-shadow: var(
    ---shadow-inset,
    inset 0 1px 2px hsl(0 0% 0% / 30%),
    inset 0 1px 3px hsl(0 0% 0% / 15%)
  ) !important;
}

s-transition[ring] > * {
  box-shadow: var(---ring, 0 0 0 2px currentColor) !important;
  outline: none !important;
}

s-transition[opacity] > * {
  opacity: var(---opacity, 1) !important;
}

s-transition[translate] > * {
  translate: var(---translate, none) !important;
}

s-transition[rotate] > * {
  rotate: var(---rotate, none) !important;
}

s-transition[scale] > * {
  scale: var(---scale, none) !important;
}

s-transition[pivot] > * {
  transform-origin: var(---pivot, left) !important;
}

s-transition[transition-delay] > * {
  transition-delay: var(---transition-delay, 100ms) !important;
}

s-transition[transition-duration] > * {
  transition-duration: var(---transition-duration, 100ms) !important;
}

s-transition[transition-easing] > * {
  transition-timing-function: var(---transition-easing, ease) !important;
}

s-transition[animation] > * {
  animation: var(---animation, var(---theme-animation-bounce)) !important;
}

s-transition[mask] > * {
  ---theme-mask-angled-corner: conic-gradient(
        from -45deg at var(---corner, 8px) var(---corner, 8px),
        #0000 25%,
        #000 0
      )
      calc(-1 * var(---corner, 8px)) 0 /100% 51% repeat-x,
    conic-gradient(
        from 135deg at var(---corner, 8px) calc(100% - var(---corner, 8px)),
        #0000 25%,
        #000 0
      )
      calc(-1 * var(---corner, 8px)) 100%/100% 51% repeat-x !important;
  ---theme-mask-scooped-corner: radial-gradient(
      var(---corner, 8px) at var(---corner, 8px) var(---corner, 8px),
      #0000 99%,
      #000
    )
    calc(-1 * var(---corner, 8px)) calc(-1 * var(---corner, 8px)) !important;
  ---theme-mask-notched-corner: conic-gradient(
      at calc(2 * var(---corner, 8px)) calc(2 * var(---corner, 8px)),
      #000 75%,
      #0000 0
    )
    calc(-1 * var(---corner, 8px)) calc(-1 * var(---corner, 8px)) !important;
  background-color: transparent !important;
  background-image: none !important;
}

s-transition[mask]::before > * {
  /* Apply mask to a pseudo-element so that drop-shadow filters applied to the root element will match the shape of the mask */
  position: absolute !important;
  inset: 0 !important;
  content: "" !important;
  background-image: var(---background-image, none) !important;
  background-color: var(---background-color) !important;
  -webkit-mask: var(---mask, none) !important;
  mask: var(---mask, none) !important;
}

s-transition[content-visibility] > * {
  content-visibility: var(---content-visibility, auto);
}

s-transition[contain-intrinsic-size] > * {
  contain-intrinsic-size: var(---contain-intrinsic-size, none);
}

s-transition {
  display: contents;
  ---exit: var(---theme-animation-close);
  ---enter: var(---theme-animation-open);
  ---ease: ease-out;
  ---position: relative;
}

s-transition > .root {
  display: flex;
  position: relative;
  flex: 1;
  will-change: transform, opacity;
}

s-transition > .root[status] {
  overflow-x: clip;
  overflow-y: clip;
}

s-transition > .root[status="exiting"]::after {
  content: "";
  position: absolute;
  inset: 0;
  /* Block input during exit animation */
  pointer-events: auto;
}

s-transition > .root[status="exiting"] {
  animation: var(---exit) both;
  animation-timing-function: var(---ease);
}

s-transition > .root[status="entering"] {
  animation: var(---enter) both;
  animation-timing-function: var(---ease);
}

s-router* > * {
  transition-property: opacity, translate, rotate, scale, transform, filter,
    backdrop-filter, clip-path, mix-blend-mode, box-shadow, color,
    background-color, border-color, text-decoration-color, fill, stroke;
}

s-router[display] > * {
  display: var(---display, flex) !important;
}

s-router[position] > * {
  position: var(---position, absolute) !important;
}

s-router[position="sticky-top"] > * {
  inset: 0 0 auto 0;
  z-index: 1;
}

s-router[position="sticky-bottom"] > * {
  inset: auto 0 0 0;
  z-index: 1;
}

s-router[position="sticky-left"] > * {
  inset: 0 auto 0 0;
  z-index: 1;
}

s-router[position="sticky-right"] > * {
  inset: 0 0 0 auto;
  z-index: 1;
}

s-router[position="fixed-top"] > * {
  inset: 0 0 auto 0;
  z-index: 1;
}

s-router[position="fixed-bottom"] > * {
  inset: auto 0 0 0;
  z-index: 1;
}

s-router[position="fixed-left"] > * {
  inset: 0 auto 0 0;
  z-index: 1;
}

s-router[position="fixed-right"] > * {
  inset: 0 0 0 auto;
  z-index: 1;
}

s-router[aspect] > * {
  aspect-ratio: var(---aspect, 1) !important;
}

s-router[overflow] > * {
  overflow: var(---overflow, scroll) !important;
}

s-router[overflow-x] > * {
  overflow-x: var(---overflow-x, scroll) !important;
}

s-router[overflow-y] > * {
  overflow-y: var(---overflow-y, scroll) !important;
}

s-router[z] > * {
  z-index: var(---z, 1) !important;
}

s-router:is([w], [width]) > * {
  width: var(---width, 100%) !important;
}

s-router:is([w-min], [width-min]) > * {
  min-width: var(---width-min, 0) !important;
}

s-router:is([w-max], [width-max]) > * {
  max-width: var(---width-max, 100%) !important;
}

s-router:is([h], [height]) > * {
  height: var(---height, 100%) !important;
}

s-router:is([h-min], [height-min]) > * {
  min-height: var(---height-min, 0) !important;
}

s-router:is([h-max], [height-max]) > * {
  max-height: var(---height-max, 100%) !important;
}

s-router:is([c], [corner]) > * {
  border-radius: var(---corner, 8px) !important;
}

s-router:is([c-tl], [corner-top-left]) > * {
  border-top-left-radius: var(---corner-top-left, 8px) !important;
}

s-router:is([c-tr], [corner-top-right]) > * {
  border-top-right-radius: var(---corner-top-right, 8px) !important;
}

s-router:is([c-bl], [corner-bottom-left]) > * {
  border-bottom-left-radius: var(---corner-bottom-left, 8px) !important;
}

s-router:is([c-br], [corner-bottom-right]) > * {
  border-bottom-right-radius: var(---corner-bottom-right, 8px) !important;
}

s-router:is([o-color], [outline-color]) > * {
  outline-style: solid;
  outline-color: var(---outline-color, hsl(0 100% 100% / 50%)) !important;
}

s-router:is([o-width], [outline-width]) > * {
  outline-style: solid;
  outline-width: var(---outline-width, 8px) !important;
}

s-router:is([o-style], [outline-style]) > * {
  outline-style: var(---outline-style, solid) !important;
}

s-router:is([b-color], [border-color]) > * {
  border-style: solid;
  border-color: var(---border-color, currentColor) !important;
}

s-router:is([b-color-t], [border-color-top]) > * {
  border-style: solid;
  border-top-color: var(---border-color-top, currentColor) !important;
}

s-router:is([b-color-b], [border-color-bottom]) > * {
  border-style: solid;
  border-bottom-color: var(---border-color-bottom, currentColor) !important;
}

s-router:is([b-color-l], [border-color-left]) > * {
  border-style: solid;
  border-left-color: var(---border-color-left, currentColor) !important;
}

s-router:is([b-color-r], [border-color-right]) > * {
  border-style: solid;
  border-right-color: var(---border-color-right, currentColor) !important;
}

s-router:is([b-width], [border-width]) > * {
  border-style: solid;
  border-width: var(---border-width, 8px) !important;
}

s-router:is([b-width-t], [border-width-top]) > * {
  border-style: solid;
  border-top-width: var(---border-width-top, 8px) !important;
}

s-router:is([b-width-b], [border-width-bottom]) > * {
  border-style: solid;
  border-bottom-width: var(---border-width-bottom, 8px) !important;
}

s-router:is([b-width-l], [border-width-left]) > * {
  border-style: solid;
  border-left-width: var(---border-width-left, 8px) !important;
}

s-router:is([b-width-r], [border-width-right]) > * {
  border-style: solid;
  border-right-width: var(---border-width-right, 8px) !important;
}

s-router:is([b-style], [border-style]) > * {
  border-style: var(---border-style, solid) !important;
}

s-router:is([b-style-t], [border-style-top]) > * {
  border-top-style: var(---border-style-top, solid) !important;
}

s-router:is([b-style-b], [border-style-bottom]) > * {
  border-bottom-style: var(---border-style-bottom, solid) !important;
}

s-router:is([b-style-l], [border-style-left]) > * {
  border-left-style: var(---border-style-left, solid) !important;
}

s-router:is([b-style-r], [border-style-right]) > * {
  border-right-style: var(---border-style-right, solid) !important;
}

s-router:is([i], [inset]) > * {
  inset: var(---inset, 8px) !important;
}

s-router:is([i-t], [inset-top]) > * {
  top: var(---inset-top, 8px) !important;
}

s-router:is([i-b], [inset-bottom]) > * {
  bottom: var(---inset-bottom, 8px) !important;
}

s-router:is([i-l], [inset-left]) > * {
  left: var(---inset-left, 8px) !important;
}

s-router:is([i-r], [inset-right]) > * {
  right: var(---inset-right, 8px) !important;
}

s-router:is([m], [margin]) > * {
  margin: var(---margin, 8px) !important;
}

s-router:is([m-t], [margin-top]) > * {
  margin-top: var(---margin-top, 8px) !important;
}

s-router:is([m-b], [margin-bottom]) > * {
  margin-bottom: var(---margin-bottom, 8px) !important;
}

s-router:is([m-l], [margin-left]) > * {
  margin-left: var(---margin-left, 8px) !important;
}

s-router:is([m-r], [margin-right]) > * {
  margin-right: var(---margin-right, 8px) !important;
}

s-router:is([p], [padding]) > * {
  padding: var(---padding, 8px) !important;
}

s-router:is([p-t], [padding-top]) > * {
  padding-top: var(---padding-top, 8px) !important;
}

s-router:is([p-b], [padding-bottom]) > * {
  padding-bottom: var(---padding-bottom, 8px) !important;
}

s-router:is([p-l], [padding-left]) > * {
  padding-left: var(---padding-left, 8px) !important;
}

s-router:is([p-r], [padding-right]) > * {
  padding-right: var(---padding-right, 8px) !important;
}

s-router:is([child-layout="row"], [child-layout="column"]) > * {
  display: flex;
  flex-direction: var(---child-layout, row) !important;
}

s-router:is([child-layout="grid"], [child-columns]) > * {
  display: grid;
  grid-template-columns: var(---child-columns, 1fr 1fr 1fr);
}

s-router[child-gap] > * {
  gap: var(---child-gap, 8px) !important;
}

s-router[child-align] > * {
  align-items: var(---child-align, center) !important;
}

s-router[child-justify] > * {
  justify-content: var(---child-justify, center) !important;
}

s-router[child-overflow] > * {
  flex-wrap: var(---child-overflow, nowrap) !important;
}

s-router[self-align] > * {
  align-self: var(---self-align, center) !important;
}

s-router[flex] > * {
  flex: var(---flex, 1) !important;
}

s-router[grow] > * {
  flex-grow: var(---grow, 1) !important;
}

s-router[shrink] > * {
  flex-shrink: var(---shrink, 1) !important;
}

s-router[order] > * {
  order: var(---order, 0) !important;
}

s-router[fill] path > * {
  fill: var(---fill, currentColor) !important;
}

s-router[stroke] path > * {
  stroke: var(---stroke, currentColor) !important;
}

s-router[stroke-width] path > * {
  stroke-width: var(---stroke-width, 1) !important;
}

s-router[visible] > * {
  visibility: var(---visible, visible) !important;
}

s-router[interactable] > * {
  pointer-events: var(---interactable, auto) !important;
}

s-router[interactable="none"] > * {
  cursor: default;
}

s-router[selectable] > * {
  user-select: var(---selectable, auto) !important;
}

[selectable=""],
[selectable="auto"],
s-router[selectable="all"] > * {
  cursor: text;
}

s-router[cursor] > * {
  cursor: var(---cursor, auto) !important;
}

s-router[text-font] > * {
  font-family: var(---text-font, monospace) !important;
}

s-router[text-size] > * {
  font-size: var(---text-size, 1rem) !important;
}

s-router[text-size="2xs"] > * {
  line-height: var(---theme-text-2xs-line-height, 1.5);
}

s-router[text-size="xs"] > * {
  line-height: var(---theme-text-xs-line-height, 1.5);
}

s-router[text-size="sm"] > * {
  line-height: var(---theme-text-sm-line-height, 1.5);
}

s-router[text-size="md"] > * {
  line-height: var(---theme-text-md-line-height, 1.5);
}

s-router[text-size="lg"] > * {
  line-height: var(---theme-text-lg-line-height, 1.5);
}

s-router[text-size="xl"] > * {
  line-height: var(---theme-text-xl-line-height, 1.5);
}

s-router[text-size="2xl"] > * {
  line-height: var(---theme-text-2xl-line-height, 1.5);
}

s-router[text-size="3xl"] > * {
  line-height: var(---theme-text-3xl-line-height, 1.5);
}

s-router[text-size="4xl"] > * {
  line-height: var(---theme-text-4xl-line-height, 1.5);
}

s-router[text-size="5xl"] > * {
  line-height: var(---theme-text-5xl-line-height, 1.5);
}

s-router[text-size="6xl"] > * {
  line-height: var(---theme-text-6xl-line-height, 1.5);
}

s-router[text-size="7xl"] > * {
  line-height: var(---theme-text-7xl-line-height, 1.5);
}

s-router[text-size="8xl"] > * {
  line-height: var(---theme-text-8xl-line-height, 1.5);
}

s-router[text-size="9xl"] > * {
  line-height: var(---theme-text-9xl-line-height, 1.5);
}

s-router[text-leading] > * {
  line-height: var(---text-leading, 1.5) !important;
}

s-router[text-tracking] > * {
  letter-spacing: var(---text-tracking, 1.5) !important;
}

s-router[text-weight] > * {
  font-weight: var(---text-weight, 600) !important;
}

s-router[text-style] > * {
  font-style: var(---text-style, italic) !important;
}

s-router[text-decoration-line] > * {
  text-decoration-line: var(---text-decoration-line, underline) !important;
}

s-router[text-decoration-color] > * {
  text-decoration-color: var(---text-decoration-color, currentColor) !important;
}

s-router[text-decoration-thickness] > * {
  text-decoration-thickness: var(---text-decoration-thickness, auto) !important;
}

s-router[text-underline-offset] > * {
  text-underline-offset: var(---text-underline-offset, 4px) !important;
}

s-router[text-case] > * {
  text-transform: var(---text-case, uppercase) !important;
}

s-router[text-align] > * {
  text-align: var(---text-align, center) !important;
}

s-router[text-overflow] > * {
  text-overflow: var(---text-overflow, clip) !important;
}

s-router[text-overflow=""] > * {
  white-space: nowrap;
}

s-router[text-overflow="wrap"] > * {
  white-space: break-spaces;
}

s-router[text-overflow="visible"] > * {
  white-space: nowrap;
}

s-router[text-overflow="clip"] > * {
  white-space: nowrap;
}

s-router[text-overflow="ellipsis"] > * {
  overflow: hidden;
  white-space: nowrap;
}

s-router[text-whitespace] > * {
  white-space: var(---text-whitespace, normal) !important;
}

s-router[text-color] > * {
  color: var(---text-color, white) !important;
}

s-router[text-stroke] > * {
  text-shadow: var(---text-stroke) !important;
}

s-router:is([bg-color], [background-color]) > * {
  background-color: var(---background-color) !important;
}

s-router:is([bg-image], [background-image]) > * {
  background-image: var(---background-image, none) !important;
}

s-router:is([bg-repeat], [background-repeat]) > * {
  background-repeat: var(---background-repeat, repeat) !important;
}

s-router:is([bg-align], [background-align]) > * {
  background-position: var(---background-align, center) !important;
}

s-router:is([bg-fit], [background-fit]) > * {
  background-size: var(---background-fit, contain) !important;
}

s-router[clip] > * {
  clip-path: var(---clip, circle(50%)) !important;
}

s-router[filter] > * {
  filter: var(---filter, none) !important;
}

s-router[backdrop-filter] > * {
  backdrop-filter: var(---backdrop-filter, none) !important;
}

s-router[blend] > * {
  mix-blend-mode: var(---blend, normal) !important;
}

s-router[shadow] > * {
  box-shadow: var(
    ---shadow,
    0 1px 2px hsl(0 0% 0% / 30%),
    0 1px 3px hsl(0 0% 0% / 15%)
  ) !important;
}

s-router[shadow-inset] > * {
  box-shadow: var(
    ---shadow-inset,
    inset 0 1px 2px hsl(0 0% 0% / 30%),
    inset 0 1px 3px hsl(0 0% 0% / 15%)
  ) !important;
}

s-router[ring] > * {
  box-shadow: var(---ring, 0 0 0 2px currentColor) !important;
  outline: none !important;
}

s-router[opacity] > * {
  opacity: var(---opacity, 1) !important;
}

s-router[translate] > * {
  translate: var(---translate, none) !important;
}

s-router[rotate] > * {
  rotate: var(---rotate, none) !important;
}

s-router[scale] > * {
  scale: var(---scale, none) !important;
}

s-router[pivot] > * {
  transform-origin: var(---pivot, left) !important;
}

s-router[transition-delay] > * {
  transition-delay: var(---transition-delay, 100ms) !important;
}

s-router[transition-duration] > * {
  transition-duration: var(---transition-duration, 100ms) !important;
}

s-router[transition-easing] > * {
  transition-timing-function: var(---transition-easing, ease) !important;
}

s-router[animation] > * {
  animation: var(---animation, var(---theme-animation-bounce)) !important;
}

s-router[mask] > * {
  ---theme-mask-angled-corner: conic-gradient(
        from -45deg at var(---corner, 8px) var(---corner, 8px),
        #0000 25%,
        #000 0
      )
      calc(-1 * var(---corner, 8px)) 0 /100% 51% repeat-x,
    conic-gradient(
        from 135deg at var(---corner, 8px) calc(100% - var(---corner, 8px)),
        #0000 25%,
        #000 0
      )
      calc(-1 * var(---corner, 8px)) 100%/100% 51% repeat-x !important;
  ---theme-mask-scooped-corner: radial-gradient(
      var(---corner, 8px) at var(---corner, 8px) var(---corner, 8px),
      #0000 99%,
      #000
    )
    calc(-1 * var(---corner, 8px)) calc(-1 * var(---corner, 8px)) !important;
  ---theme-mask-notched-corner: conic-gradient(
      at calc(2 * var(---corner, 8px)) calc(2 * var(---corner, 8px)),
      #000 75%,
      #0000 0
    )
    calc(-1 * var(---corner, 8px)) calc(-1 * var(---corner, 8px)) !important;
  background-color: transparent !important;
  background-image: none !important;
}

s-router[mask]::before > * {
  /* Apply mask to a pseudo-element so that drop-shadow filters applied to the root element will match the shape of the mask */
  position: absolute !important;
  inset: 0 !important;
  content: "" !important;
  background-image: var(---background-image, none) !important;
  background-color: var(---background-color) !important;
  -webkit-mask: var(---mask, none) !important;
  mask: var(---mask, none) !important;
}

s-router[content-visibility] > * {
  content-visibility: var(---content-visibility, auto);
}

s-router[contain-intrinsic-size] > * {
  contain-intrinsic-size: var(---contain-intrinsic-size, none);
}

s-router {
  display: contents;
  ---exit: var(---theme-animation-exit-zoom);
  ---enter: var(---theme-animation-enter-zoom);
  ---position: relative;
  ---exit-fade: var(---theme-animation-exit-fade);
  ---enter-fade: var(---theme-animation-enter-fade);
}

s-router > .root {
  display: flex;
  position: relative;
  flex: 1 1 100%;
}

s-router > .root[status] {
  overflow-x: clip;
  overflow-y: clip;
}

s-router > .root[status="exiting"]::after {
  content: "";
  position: absolute;
  inset: 0;
  /* Block input during exit animation */
  pointer-events: auto;
}

s-router > .root > .content {
  position: relative;
  display: flex;
  flex: 1 1 100%;
}

s-router > .root > .content > .old-fade {
  will-change: opacity;
}

s-router[unmount="on-enter"] > .root > .content > .old-fade {
  display: contents;
}

s-router[unmount="on-enter"] > .root[status="entering"] > .content > .old-fade {
  display: none;
}

s-router
  > .root:is([status="exiting"], [status="loading"])
  > .content
  > .old-fade {
  display: flex;
  flex: 1 1 100%;
  animation: var(---exit-fade) both;
}

s-router > .root > .content > .old-fade > .old-transform {
  will-change: transform;
}

s-router[unmount="on-enter"] > .root > .content > .old-fade > .old-transform {
  display: contents;
}

s-router
  > .root:is([status="exiting"], [status="loading"])
  > .content
  > .old-fade
  > .old-transform {
  display: flex;
  flex: 1 1 100%;
  animation: var(---exit) both;
  transform-origin: var(---pivot, top center);
}

s-router:not([unmount="on-enter"]) > .root:not([status]) > .content > .old-fade {
  display: contents;
}

s-router:not([unmount="on-enter"]) > .root > .content > .old-fade {
  transition-duration: 0s;
}

s-router:not([unmount="on-enter"])
  > .root[status="entering"][mounting]
  > .content
  > .old-fade {
  animation-play-state: paused;
}

s-router:not([unmount="on-enter"])
  > .root[status="entering"]:not([mounting])
  > .content
  > .old-fade {
  animation-play-state: running;
}

s-router:not([unmount="on-enter"])
  > .root[status="entering"]
  > .content
  > .old-fade {
  display: flex;
  flex: 1 1 100%;
  animation: var(---enter-fade) both;
}

s-router:not([unmount="on-enter"])
  > .root:not([status])
  > .content
  > .old-fade
  > .old-transform {
  display: contents;
}

s-router:not([unmount="on-enter"])
  > .root
  > .content
  > .old-fade
  > .old-transform {
  display: flex;
  flex: 1 1 100%;
}

s-router:not([unmount="on-enter"])
  > .root[status="entering"][mounting]
  > .content
  > .old-fade
  > .old-transform {
  animation-play-state: paused;
}

s-router:not([unmount="on-enter"])
  > .root[status="entering"]:not([mounting])
  > .content
  > .old-fade
  > .old-transform {
  animation-play-state: running;
}

s-router:not([unmount="on-enter"])
  > .root[status="entering"]
  > .content
  > .old-fade
  > .old-transform {
  animation: var(---enter) both;
  transform-origin: var(---pivot, top center);
}

s-router > .root > .content > .new-fade {
  will-change: opacity;
}

s-router[unmount="on-enter"] > .root > .content > .new-fade {
  display: none;
}

s-router > .root > .content > .new-fade {
  display: none;
  position: absolute;
  inset: 0;
  pointer-events: none;
}

s-router[unmount="on-enter"] > .root[status="entering"] > .content > .new-fade {
  display: flex;
  flex: 1 1 100%;
  animation: var(---enter-fade) both;
}

s-router > .root > .content > .new-fade > .new-transform {
  will-change: transform;
}

s-router[unmount="on-enter"] > .root > .content > .new-fade > .new-transform {
  display: flex;
  flex: 1 1 100%;
}

s-router[unmount="on-enter"]
  > .root[status="entering"]
  > .content
  > .new-fade
  > .new-transform {
  animation: var(---enter) both;
  transform-origin: var(---pivot, top center);
}

sparkdown-script-editor {
  display: contents;
}

sparkdown-script-editor * {
  pointer-events: auto;
  touch-action: pan-y;
  ---touch-action: "pan-y";
}

sparkdown-script-editor > .root {
  position: relative;
  display: flex;
  flex: 1;
  flex-direction: column;
  opacity: 0;
  transition: opacity 0.25s;
}

sparkdown-script-editor > .root #main {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

sparkdown-script-editor > .root #placeholder {
  height: 28px;
}

sparkdown-script-editor > .root .cm-editor {
  max-height: 100%;
  height: 100%;
}

sparkdown-script-editor > .root .cm-editor .cm-scroller {
  max-height: 100%;
  overflow-x: hidden;
}

*::-webkit-scrollbar {
  width: var(---theme-scrollbar-size, 8px);
  height: var(---theme-scrollbar-size, 8px);
}

*::-webkit-scrollbar-thumb:hover {
  background-color: var(
    ---theme-color-scrollbar-thumb-hover,
    hsl(0 0% 0% / 50%)
  );
}

*::-webkit-scrollbar-thumb {
  background-color: var(---theme-color-scrollbar-thumb, hsl(0 0% 0% / 25%));
  border-radius: 9999px;
}

*::-webkit-scrollbar-track {
  background-color: var(---theme-color-scrollbar-track, hsl(0 0% 0% / 15%));
}

*::-webkit-scrollbar-button {
  display: none;
}

*::-webkit-scrollbar-corner {
  display: none;
}

/* scrollbar-color and scrollbar-width is only supported in Firefox */

* {
  scrollbar-width: var(---theme-scrollbar-thickness, thin);
  scrollbar-color: var(---theme-color-scrollbar-thumb, hsl(0 0% 0% / 25%))
    var(---theme-color-scrollbar-track, hsl(0 0% 0% / 15%));
}

[hidden] {
  display: none !important;
}

sparkdown-screenplay-preview {
  display: contents;
}

sparkdown-screenplay-preview * {
  touch-action: pan-y;
  ---touch-action: "pan-y";
}

sparkdown-screenplay-preview > .root {
  pointer-events: auto;
  display: flex;
  flex: 1;
  flex-direction: column;
  opacity: 0;
  transition: opacity 0.25s;
}

* {
  flex-direction: column;
  flex-wrap: nowrap;
  flex-shrink: 0;
  min-width: 0;
  max-width: 100%;
}


html {
  box-sizing: border-box;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

:root,
.se-theme {
  ---theme-size-header-nav: 56px;
  ---theme-size-footer-nav: 60px;
  ---theme-size-panel-nav: 48px;

  ---theme-color-tab-active: hsl(0, 0%, 95%);
  ---theme-color-tab-inactive: hsl(211 26% 48%);
  ---theme-color-fab-fg: white;
  ---theme-color-fab-bg: hsl(210.8, 44.9%, 34.9%);
  ---theme-color-primary-bg: hsl(210.7, 89.1%, 18%);
  ---theme-color-secondary-bg: hsl(210.8, 44.9%, 34.9%);
  ---theme-color-panel: hsl(210.6, 100%, 10%);
  ---theme-color-editor-bg: #0000004d;

  ---theme-color-palette-spot-0: #052d57;
  ---theme-color-palette-spot-1: #415a89;
  ---theme-color-palette-spot-2: #e3f0ff;
  ---theme-color-palette-spot-3: #d7a31a;

  ---theme-color-palette-cube-0: #052d57;
  ---theme-color-palette-cube-1: #00c6bd;
  ---theme-color-palette-cube-2: #fff7d6;
}

.picker-dialog-bg {
  background-color: #000;
  pointer-events: auto;
}


* {
  flex-direction: column;
  flex-wrap: nowrap;
  flex-shrink: 0;
  min-width: 0;
  max-width: 100%;
}

se-interaction-blocker {
  display: contents;
}

se-scrollable {
  display: contents;
}

se-scrollable {
  display: contents;
}

se-scrollable > .root {
  display: flex;
  flex-direction: column;
  overflow-y: scroll;
  pointer-events: auto;
  position: absolute;
  inset: 0;
  min-height: 100%;
}

se-option-button {
  display: contents;
}

se-file-options-button {
  display: contents;
}

se-file-editor-navigation {
  display: contents;
}

se-file-editor-navigation .blocker {
  position: absolute;
  inset: 0;
  padding: 0;
  margin: 0;
  border: none;
  background: none;
}

se-file-upload-button {
  display: contents;
}

se-file-upload-button {
  display: contents;
}

se-file-upload-button > .root {
  display: flex;
  position: sticky;
  left: 0;
  right: 0;
  bottom: 0;
}

se-file-add-button {
  display: contents;
}

se-file-add-button {
  display: contents;
}

se-file-add-button > .root {
  display: flex;
  position: sticky;
  left: 0;
  right: 0;
  bottom: 0;
}

se-file-item {
  display: contents;
}

se-file-list-border {
  display: contents;
}

se-file-list {
  display: contents;
}

se-file-list {
  display: contents;
}

se-file-list > .root {
  flex: 1;
  position: relative;
  display: flex;
  flex-direction: column;
}

se-file-list > .root #empty {
  flex: 1;
  position: relative;
  display: flex;
  flex-direction: column;
  padding-top: 16px;
}

se-file-list > .root #list {
  flex: 1;
  position: relative;
  display: flex;
  flex-direction: column;
  padding-top: 16px;
}

se-file-dropzone {
  display: contents;
}

se-file-dropzone {
  display: contents;
}

se-file-dropzone > .root {
  display: flex;
  position: absolute;
  inset: 0;
  flex: 1;
  flex-direction: column;
  pointer-events: none;
}

se-file-dropzone > .root > .dragover {
  position: absolute;
  inset: 0;
  flex: 1;
  pointer-events: none;
  background-color: var(---theme-color-panel);
  color: var(---theme-color-fg);
  font-size: var(---theme-text-xl-font-size);
  font-weight: 600;
  gap: 8px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

se-preview-game-toolbar {
  display: contents;
}

se-preview-game {
  display: contents;
}

#preview {
  position: relative;
  display: flex;
  flex: 1;
  border: 0;
  pointer-events: auto;
}

iframe {
  width: 100%;
  height: 100%;
  border: 0;
  pointer-events: auto;
}

se-preview-screenplay-toolbar {
  display: contents;
}

se-preview-screenplay {
  display: contents;
}

se-assets {
  display: contents;
}

se-assets-files {
  display: contents;
}

se-assets-urls {
  display: contents;
}

se-logic-diagnostics-label {
  display: contents;
}

se-logic-script-editor {
  display: contents;
}

se-logic-scripts-editor {
  display: contents;
}

se-logic-scripts-list {
  display: contents;
}

se-logic-list {
  display: contents;
}

se-logic {
  display: contents;
}

se-share {
  display: contents;
}

se-share-game {
  display: contents;
}

se-share-screenplay {
  display: contents;
}

se-main-window {
  display: contents;
}

se-edit-toggle-button {
  display: contents;
}

se-preview-toggle-button {
  display: contents;
}

se-preview {
  display: contents;
}

se-notifications {
  display: contents;
}

se-account {
  display: contents;
}

se-header-sync-conflict-toolbar {
  display: contents;
}

se-header-sync-toolbar {
  display: contents;
}

se-header-menu-button {
  display: contents;
}

se-header-title-button {
  display: contents;
}

se-header-title-caption {
  display: contents;
}

se-header-navigation {
  display: contents;
}

se-header-navigation > .root {
  position: relative;
  inset: 0 0 auto 0;
  z-index: 10;
}

se-header-navigation > .root .blocker {
  position: absolute;
  inset: 0;
  padding: 0;
  margin: 0;
  border: none;
  background: none;
}

se-header-navigation-placeholder {
  display: contents;
}

se-header-navigation-placeholder > .root {
  display: none;
}

spark-editor {
  display: contents;
}

se-demo {
  display: contents;
}

html{opacity:1;}