@layer properties;
.studio-tw {
  --spacing: 0.25rem;
  --container-7xl: 80rem;
  --text-xs: 0.75rem;
  --text-xs--line-height: calc(1 / 0.75);
  --text-sm: 0.875rem;
  --text-sm--line-height: calc(1.25 / 0.875);
  --text-base: 1rem;
  --text-base--line-height: calc(1.5 / 1);
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 1.875rem;
  --text-3xl--line-height: calc(2.25 / 1.875);
  --text-4xl: 2.25rem;
  --text-4xl--line-height: calc(2.5 / 2.25);
  --text-6xl: 3.75rem;
  --text-6xl--line-height: 1;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --tracking-tight: -0.025em;
  --radius-xs: 0.125rem;
  --radius-3xl: 1.5rem;
  --default-transition-duration: 150ms;
  --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  --color-white: #fff;
  --color-black: #000;
}
@property --tw-animation-delay {
  syntax: "*";
  inherits: false;
  initial-value: 0s;
}
@property --tw-animation-direction {
  syntax: "*";
  inherits: false;
  initial-value: normal;
}
@property --tw-animation-duration {
  syntax: "*";
  inherits: false;
}
@property --tw-animation-fill-mode {
  syntax: "*";
  inherits: false;
  initial-value: none;
}
@property --tw-animation-iteration-count {
  syntax: "*";
  inherits: false;
  initial-value: 1;
}
@property --tw-enter-blur {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-enter-opacity {
  syntax: "*";
  inherits: false;
  initial-value: 1;
}
@property --tw-enter-rotate {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-enter-scale {
  syntax: "*";
  inherits: false;
  initial-value: 1;
}
@property --tw-enter-translate-x {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-enter-translate-y {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-exit-blur {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-exit-opacity {
  syntax: "*";
  inherits: false;
  initial-value: 1;
}
@property --tw-exit-rotate {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-exit-scale {
  syntax: "*";
  inherits: false;
  initial-value: 1;
}
@property --tw-exit-translate-x {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-exit-translate-y {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --scroll-fade-t {
  syntax: "<length-percentage>";
  inherits: false;
  initial-value: 0px;
}
@property --scroll-fade-b {
  syntax: "<length-percentage>";
  inherits: false;
  initial-value: 0px;
}
@property --scroll-fade-s {
  syntax: "<length-percentage>";
  inherits: false;
  initial-value: 0px;
}
@property --scroll-fade-e {
  syntax: "<length-percentage>";
  inherits: false;
  initial-value: 0px;
}
@property --scroll-fade-mask {
  syntax: "*";
  inherits: false;
}
@property --shimmer-angle {
  syntax: "<angle>";
  inherits: true;
  initial-value: 20deg;
}
@property --shimmer-image {
  syntax: "*";
  inherits: false;
}
@property --shimmer-text-fill {
  syntax: "*";
  inherits: false;
}
.studio-tw [data-x="button"]:where([data-variant]) {
  display: inline-flex;
  width: fit-content;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  gap: calc(var(--spacing) * 2);
  border-radius: max(0px, calc(var(--studio-radius, 0.5rem) - 2px));
  font-size: var(--text-sm);
  line-height: var(--tw-leading, var(--text-sm--line-height));
  --tw-font-weight: var(--font-weight-medium);
  font-weight: var(--font-weight-medium);
  white-space: nowrap;
  transition-property: all;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
  --tw-outline-style: none;
  outline-style: none;
  &:focus-visible {
    border-color: var(--ring);
  }
  &:focus-visible {
    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  &:focus-visible {
    --tw-ring-color: var(--ring);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-ring-color: color-mix(in oklab, var(--ring) 50%, transparent);
    }
  }
  &:disabled {
    pointer-events: none;
  }
  &:disabled {
    opacity: 50%;
  }
  &[aria-invalid="true"] {
    border-color: var(--destructive);
  }
  &[aria-invalid="true"] {
    --tw-ring-color: var(--destructive);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-ring-color: color-mix(in oklab, var(--destructive) 20%, transparent);
    }
  }
  &:where(.dark, .dark *) {
    &[aria-invalid="true"] {
      --tw-ring-color: var(--destructive);
      @supports (color: color-mix(in lab, red, red)) {
        --tw-ring-color: color-mix(in oklab, var(--destructive) 40%, transparent);
      }
    }
  }
  & svg {
    pointer-events: none;
  }
  & svg {
    flex-shrink: 0;
  }
  & svg:not([class*='size-']) {
    width: calc(var(--spacing) * 4);
    height: calc(var(--spacing) * 4);
  }
}
.studio-tw [data-x="button"]:where([data-variant="default"]) {
  background-color: var(--primary);
  color: var(--primary-foreground);
  &:hover {
    @media (hover: hover) {
      background-color: var(--primary);
      @supports (color: color-mix(in lab, red, red)) {
        background-color: color-mix(in oklab, var(--primary) 90%, transparent);
      }
    }
  }
}
.studio-tw [data-x="button"]:where([data-variant="secondary"]) {
  background-color: var(--secondary);
  color: var(--secondary-foreground);
  &:hover {
    @media (hover: hover) {
      background-color: var(--secondary);
      @supports (color: color-mix(in lab, red, red)) {
        background-color: color-mix(in oklab, var(--secondary) 80%, transparent);
      }
    }
  }
}
.studio-tw [data-x="button"]:where([data-variant="outline"]) {
  border-style: var(--tw-border-style);
  border-width: 1px;
  background-color: var(--background);
  --tw-shadow: 0 1px 2px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.05));
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  &:hover {
    @media (hover: hover) {
      background-color: var(--accent);
    }
  }
  &:hover {
    @media (hover: hover) {
      color: var(--accent-foreground);
    }
  }
  &:where(.dark, .dark *) {
    border-color: var(--input);
  }
  &:where(.dark, .dark *) {
    background-color: var(--input);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--input) 30%, transparent);
    }
  }
  &:where(.dark, .dark *) {
    &:hover {
      @media (hover: hover) {
        background-color: var(--input);
        @supports (color: color-mix(in lab, red, red)) {
          background-color: color-mix(in oklab, var(--input) 50%, transparent);
        }
      }
    }
  }
}
@media (hover: hover) {
  .studio-tw [data-x="button"]:where([data-variant="ghost"]):hover {
    background-color: var(--accent);
    color: var(--accent-foreground);
  }
  .studio-tw [data-x="button"]:where([data-variant="ghost"]):where(.dark, .dark *):hover {
    background-color: var(--accent);
  }
  @supports (color: color-mix(in lab, red, red)) {
    .studio-tw [data-x="button"]:where([data-variant="ghost"]):where(.dark, .dark *):hover {
      background-color: color-mix(in oklab, var(--accent) 50%, transparent);
    }
  }
}
.studio-tw [data-x="button"]:where([data-variant="link"]) {
  color: var(--primary);
  text-underline-offset: 4px;
  &:hover {
    @media (hover: hover) {
      text-decoration-line: underline;
    }
  }
}
.studio-tw [data-x="button"]:where([data-variant="destructive"]) {
  background-color: var(--destructive);
  color: var(--color-white);
  &:hover {
    @media (hover: hover) {
      background-color: var(--destructive);
      @supports (color: color-mix(in lab, red, red)) {
        background-color: color-mix(in oklab, var(--destructive) 90%, transparent);
      }
    }
  }
  &:focus-visible {
    --tw-ring-color: var(--destructive);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-ring-color: color-mix(in oklab, var(--destructive) 20%, transparent);
    }
  }
  &:where(.dark, .dark *) {
    background-color: var(--destructive);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--destructive) 60%, transparent);
    }
  }
  &:where(.dark, .dark *) {
    &:focus-visible {
      --tw-ring-color: var(--destructive);
      @supports (color: color-mix(in lab, red, red)) {
        --tw-ring-color: color-mix(in oklab, var(--destructive) 40%, transparent);
      }
    }
  }
}
.studio-tw [data-x="button"]:where([data-size="sm"]) {
  height: calc(var(--spacing) * 8);
  gap: calc(var(--spacing) * 1.5);
  border-radius: max(0px, calc(var(--studio-radius, 0.5rem) - 2px));
  padding-inline: calc(var(--spacing) * 3);
  &:has(>svg) {
    padding-inline: calc(var(--spacing) * 2.5);
  }
}
.studio-tw [data-x="button"]:where([data-size="default"]) {
  height: calc(var(--spacing) * 9);
  padding-inline: calc(var(--spacing) * 4);
  padding-block: calc(var(--spacing) * 2);
  &:has(>svg) {
    padding-inline: calc(var(--spacing) * 3);
  }
}
.studio-tw [data-x="button"]:where([data-size="lg"]) {
  height: calc(var(--spacing) * 10);
  border-radius: max(0px, calc(var(--studio-radius, 0.5rem) - 2px));
  padding-inline: calc(var(--spacing) * 6);
  &:has(>svg) {
    padding-inline: calc(var(--spacing) * 4);
  }
}
.studio-tw [data-x="button"]:where([data-size="icon"]) {
  width: calc(var(--spacing) * 9);
  height: calc(var(--spacing) * 9);
}
.studio-tw [data-x="button"]:where([data-size="xs"]) {
  height: calc(var(--spacing) * 6);
  gap: var(--spacing);
  border-radius: max(0px, calc(var(--studio-radius, 0.5rem) - 2px));
  padding-inline: calc(var(--spacing) * 2);
  font-size: var(--text-xs);
  line-height: var(--tw-leading, var(--text-xs--line-height));
  &:has(>svg) {
    padding-inline: calc(var(--spacing) * 1.5);
  }
  & svg:not([class*='size-']) {
    width: calc(var(--spacing) * 3);
    height: calc(var(--spacing) * 3);
  }
}
.studio-tw [data-x="button"]:where([data-size="icon-xs"]) {
  width: calc(var(--spacing) * 6);
  height: calc(var(--spacing) * 6);
  border-radius: max(0px, calc(var(--studio-radius, 0.5rem) - 2px));
  & svg:not([class*='size-']) {
    width: calc(var(--spacing) * 3);
    height: calc(var(--spacing) * 3);
  }
}
.studio-tw [data-x="button"]:where([data-size="icon-sm"]) {
  width: calc(var(--spacing) * 8);
  height: calc(var(--spacing) * 8);
}
.studio-tw [data-x="button"]:where([data-size="icon-lg"]) {
  width: calc(var(--spacing) * 10);
  height: calc(var(--spacing) * 10);
}
.studio-tw [data-x="badge"]:where([data-variant]) {
  display: inline-flex;
  width: fit-content;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  gap: var(--spacing);
  overflow: hidden;
  border-radius: calc(infinity * 1px);
  border-style: var(--tw-border-style);
  border-width: 1px;
  border-color: transparent;
  padding-inline: calc(var(--spacing) * 2);
  padding-block: calc(var(--spacing) * 0.5);
  font-size: var(--text-xs);
  line-height: var(--tw-leading, var(--text-xs--line-height));
  --tw-font-weight: var(--font-weight-medium);
  font-weight: var(--font-weight-medium);
  white-space: nowrap;
  transition-property: color,box-shadow;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
  &:focus-visible {
    border-color: var(--ring);
  }
  &:focus-visible {
    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  &:focus-visible {
    --tw-ring-color: var(--ring);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-ring-color: color-mix(in oklab, var(--ring) 50%, transparent);
    }
  }
  &[aria-invalid="true"] {
    border-color: var(--destructive);
  }
  &[aria-invalid="true"] {
    --tw-ring-color: var(--destructive);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-ring-color: color-mix(in oklab, var(--destructive) 20%, transparent);
    }
  }
  &:where(.dark, .dark *) {
    &[aria-invalid="true"] {
      --tw-ring-color: var(--destructive);
      @supports (color: color-mix(in lab, red, red)) {
        --tw-ring-color: color-mix(in oklab, var(--destructive) 40%, transparent);
      }
    }
  }
  &>svg {
    pointer-events: none;
  }
  &>svg {
    width: calc(var(--spacing) * 3);
    height: calc(var(--spacing) * 3);
  }
}
.studio-tw [data-x="badge"]:where([data-variant="outline"]) {
  border-color: var(--border);
  color: var(--foreground);
  a& {
    &:hover {
      @media (hover: hover) {
        background-color: var(--accent);
      }
    }
  }
  a& {
    &:hover {
      @media (hover: hover) {
        color: var(--accent-foreground);
      }
    }
  }
}
.studio-tw [data-x="badge"]:where([data-variant="default"]) {
  background-color: var(--primary);
  color: var(--primary-foreground);
  a& {
    &:hover {
      @media (hover: hover) {
        background-color: var(--primary);
        @supports (color: color-mix(in lab, red, red)) {
          background-color: color-mix(in oklab, var(--primary) 90%, transparent);
        }
      }
    }
  }
}
.studio-tw [data-x="badge"]:where([data-variant="secondary"]) {
  background-color: var(--secondary);
  color: var(--secondary-foreground);
  a& {
    &:hover {
      @media (hover: hover) {
        background-color: var(--secondary);
        @supports (color: color-mix(in lab, red, red)) {
          background-color: color-mix(in oklab, var(--secondary) 90%, transparent);
        }
      }
    }
  }
}
.studio-tw [data-x="badge"]:where([data-variant="destructive"]) {
  background-color: var(--destructive);
  color: var(--color-white);
  &:focus-visible {
    --tw-ring-color: var(--destructive);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-ring-color: color-mix(in oklab, var(--destructive) 20%, transparent);
    }
  }
  &:where(.dark, .dark *) {
    background-color: var(--destructive);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--destructive) 60%, transparent);
    }
  }
  &:where(.dark, .dark *) {
    &:focus-visible {
      --tw-ring-color: var(--destructive);
      @supports (color: color-mix(in lab, red, red)) {
        --tw-ring-color: color-mix(in oklab, var(--destructive) 40%, transparent);
      }
    }
  }
  a& {
    &:hover {
      @media (hover: hover) {
        background-color: var(--destructive);
        @supports (color: color-mix(in lab, red, red)) {
          background-color: color-mix(in oklab, var(--destructive) 90%, transparent);
        }
      }
    }
  }
}
@media (hover: hover) {
  a:is(.studio-tw [data-x="badge"]:where([data-variant="ghost"])):hover {
    background-color: var(--accent);
    color: var(--accent-foreground);
  }
}
.studio-tw [data-x="badge"]:where([data-variant="link"]) {
  color: var(--primary);
  text-underline-offset: 4px;
  a& {
    &:hover {
      @media (hover: hover) {
        text-decoration-line: underline;
      }
    }
  }
}
.studio-tw [data-x="card"]:where([data-variant]) {
  border-radius: calc(var(--studio-radius, 0.5rem) + 4px);
}
.studio-tw [data-x="card"]:where([data-variant="default"]) {
  border-style: var(--tw-border-style);
  border-width: 1px;
  background-color: var(--card);
  color: var(--card-foreground);
  --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}
.studio-tw [data-x="card"]:where([data-variant="flat"]) {
  border-style: var(--tw-border-style);
  border-width: 1px;
  background-color: var(--card);
  color: var(--card-foreground);
}
.studio-tw [data-x="card"]:where([data-variant="featured"]) {
  border-style: var(--tw-border-style);
  border-width: 1px;
  background-color: var(--card);
  color: var(--card-foreground);
  --tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 8px 10px -6px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
  --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  --tw-shadow-color: var(--primary);
  @supports (color: color-mix(in lab, red, red)) {
    --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--primary) 10%, transparent) var(--tw-shadow-alpha), transparent);
  }
  --tw-ring-color: var(--primary);
}
.studio-tw [data-x="card"]:where([data-variant="muted"]) {
  background-color: var(--muted);
}
.studio-tw [data-x-part="card-header"] {
  container-type: inline-size;
  container-name: card-header;
  display: grid;
  grid-auto-rows: min-content;
  grid-template-rows: auto auto;
  align-items: flex-start;
  gap: calc(var(--spacing) * 2);
  padding-inline: calc(var(--spacing) * 6);
  &:has(*[data-slot="card-action"]) {
    grid-template-columns: 1fr auto;
  }
  &:is(.border-b) {
    padding-bottom: calc(var(--spacing) * 6);
  }
}
.studio-tw [data-x-part="card-title"] {
  --tw-leading: 1;
  line-height: 1;
  --tw-font-weight: var(--font-weight-semibold);
  font-weight: var(--font-weight-semibold);
}
.studio-tw [data-x-part="card-description"] {
  font-size: var(--text-sm);
  line-height: var(--tw-leading, var(--text-sm--line-height));
  color: var(--muted-foreground);
}
.studio-tw [data-x-part="card-content"] {
  padding-inline: calc(var(--spacing) * 6);
}
.studio-tw [data-x-part="card-footer"] {
  display: flex;
  align-items: center;
  gap: calc(var(--spacing) * 2);
  padding-inline: calc(var(--spacing) * 6);
  &:is(.border-t) {
    padding-top: calc(var(--spacing) * 6);
  }
}
.studio-tw [data-x="avatar"]:where([data-variant]) {
  position: relative;
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: calc(infinity * 1px);
  object-fit: cover;
  --tw-font-weight: var(--font-weight-medium);
  font-weight: var(--font-weight-medium);
  &>img {
    width: 100%;
    height: 100%;
  }
  &>img {
    object-fit: cover;
  }
}
.studio-tw [data-x="avatar"]:where([data-variant="default"]) {
  background-color: var(--muted);
}
.studio-tw [data-x="avatar"]:where([data-variant="primary"]) {
  background-color: var(--primary);
  color: var(--primary-foreground);
}
.studio-tw [data-x="avatar"]:where([data-size="sm"]) {
  width: calc(var(--spacing) * 8);
  height: calc(var(--spacing) * 8);
  font-size: var(--text-xs);
  line-height: var(--tw-leading, var(--text-xs--line-height));
}
.studio-tw [data-x="avatar"]:where([data-size="default"]) {
  width: calc(var(--spacing) * 10);
  height: calc(var(--spacing) * 10);
  font-size: var(--text-sm);
  line-height: var(--tw-leading, var(--text-sm--line-height));
}
.studio-tw [data-x="avatar"]:where([data-size="lg"]) {
  width: calc(var(--spacing) * 12);
  height: calc(var(--spacing) * 12);
  font-size: var(--text-base);
  line-height: var(--tw-leading, var(--text-base--line-height));
}
.studio-tw [data-x="alert"]:where([data-variant]) {
  position: relative;
  display: grid;
  width: 100%;
  grid-template-columns: calc(var(--spacing) * 4) 1fr;
  align-items: flex-start;
  column-gap: calc(var(--spacing) * 3);
  row-gap: calc(var(--spacing) * 0.5);
  border-radius: var(--studio-radius, 0.5rem);
  border-style: var(--tw-border-style);
  border-width: 1px;
  padding-inline: calc(var(--spacing) * 4);
  padding-block: calc(var(--spacing) * 3);
  font-size: var(--text-sm);
  line-height: var(--tw-leading, var(--text-sm--line-height));
}
.studio-tw [data-x="alert"]:where([data-variant="default"]) {
  background-color: var(--card);
  color: var(--card-foreground);
}
.studio-tw [data-x="alert"]:where([data-variant="destructive"]) {
  background-color: var(--card);
  color: var(--destructive);
  &>[data-x-part=alert-description] {
    color: var(--destructive);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--destructive) 90%, transparent);
    }
  }
}
.studio-tw [data-x-part="alert-title"] {
  grid-column-start: 2;
  --tw-font-weight: var(--font-weight-medium);
  font-weight: var(--font-weight-medium);
  --tw-tracking: var(--tracking-tight);
  letter-spacing: var(--tracking-tight);
}
.studio-tw [data-x-part="alert-description"] {
  grid-column-start: 2;
  color: var(--muted-foreground);
}
.studio-tw [data-x="item"]:where([data-variant]) {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  border-radius: max(0px, calc(var(--studio-radius, 0.5rem) - 2px));
  border-style: var(--tw-border-style);
  border-width: 1px;
  border-color: transparent;
  font-size: var(--text-sm);
  line-height: var(--tw-leading, var(--text-sm--line-height));
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
  --tw-duration: 100ms;
  transition-duration: 100ms;
  --tw-outline-style: none;
  outline-style: none;
  &:focus-visible {
    border-color: var(--ring);
  }
  &:focus-visible {
    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  &:focus-visible {
    --tw-ring-color: var(--ring);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-ring-color: color-mix(in oklab, var(--ring) 50%, transparent);
    }
  }
  &:is(a) {
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  &:is(a) {
    &:hover {
      @media (hover: hover) {
        background-color: var(--accent);
        @supports (color: color-mix(in lab, red, red)) {
          background-color: color-mix(in oklab, var(--accent) 50%, transparent);
        }
      }
    }
  }
}
.studio-tw [data-x="item"]:where([data-variant="outline"]) {
  border-color: var(--border);
}
.studio-tw [data-x="item"]:where([data-variant="muted"]) {
  background-color: var(--muted);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in oklab, var(--muted) 50%, transparent);
  }
}
.studio-tw [data-x="item"]:where([data-variant="default"]) {
  background-color: transparent;
}
.studio-tw [data-x="item"]:where([data-size="sm"]) {
  gap: calc(var(--spacing) * 2.5);
  padding-inline: calc(var(--spacing) * 4);
  padding-block: calc(var(--spacing) * 3);
}
.studio-tw [data-x="item"]:where([data-size="default"]) {
  gap: calc(var(--spacing) * 4);
  padding: calc(var(--spacing) * 4);
}
.studio-tw [data-x-part="field-input"] {
  height: calc(var(--spacing) * 9);
  width: 100%;
  min-width: 0px;
  border-radius: max(0px, calc(var(--studio-radius, 0.5rem) - 2px));
  border-style: var(--tw-border-style);
  border-width: 1px;
  border-color: var(--input);
  background-color: transparent;
  padding-inline: calc(var(--spacing) * 3);
  padding-block: var(--spacing);
  font-size: var(--text-base);
  line-height: var(--tw-leading, var(--text-base--line-height));
  --tw-font-weight: var(--font-weight-normal);
  font-weight: var(--font-weight-normal);
  --tw-shadow: 0 1px 2px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.05));
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  transition-property: color,box-shadow;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
  --tw-outline-style: none;
  outline-style: none;
  & *::selection {
    background-color: var(--primary);
  }
  &::selection {
    background-color: var(--primary);
  }
  & *::selection {
    color: var(--primary-foreground);
  }
  &::selection {
    color: var(--primary-foreground);
  }
  &::file-selector-button {
    display: inline-flex;
  }
  &::file-selector-button {
    height: calc(var(--spacing) * 7);
  }
  &::file-selector-button {
    border-style: var(--tw-border-style);
    border-width: 0px;
  }
  &::file-selector-button {
    background-color: transparent;
  }
  &::file-selector-button {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
  }
  &::file-selector-button {
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
  }
  &::file-selector-button {
    color: var(--foreground);
  }
  &::placeholder {
    color: var(--muted-foreground);
  }
  &:focus-visible {
    border-color: var(--ring);
  }
  &:focus-visible {
    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  &:focus-visible {
    --tw-ring-color: var(--ring);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-ring-color: color-mix(in oklab, var(--ring) 50%, transparent);
    }
  }
  &:disabled {
    pointer-events: none;
  }
  &:disabled {
    cursor: not-allowed;
  }
  &:disabled {
    opacity: 50%;
  }
  &[aria-invalid="true"] {
    border-color: var(--destructive);
  }
  &[aria-invalid="true"] {
    --tw-ring-color: var(--destructive);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-ring-color: color-mix(in oklab, var(--destructive) 20%, transparent);
    }
  }
  @media (width >= 48rem) {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
  }
  &:where(.dark, .dark *) {
    background-color: var(--input);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--input) 30%, transparent);
    }
  }
  &:where(.dark, .dark *) {
    &[aria-invalid="true"] {
      --tw-ring-color: var(--destructive);
      @supports (color: color-mix(in lab, red, red)) {
        --tw-ring-color: color-mix(in oklab, var(--destructive) 40%, transparent);
      }
    }
  }
}
.studio-tw [data-x-part="field-textarea"] {
  display: flex;
  field-sizing: content;
  min-height: calc(var(--spacing) * 16);
  width: 100%;
  border-radius: max(0px, calc(var(--studio-radius, 0.5rem) - 2px));
  border-style: var(--tw-border-style);
  border-width: 1px;
  border-color: var(--input);
  background-color: transparent;
  padding-inline: calc(var(--spacing) * 3);
  padding-block: calc(var(--spacing) * 2);
  font-size: var(--text-base);
  line-height: var(--tw-leading, var(--text-base--line-height));
  --tw-font-weight: var(--font-weight-normal);
  font-weight: var(--font-weight-normal);
  --tw-shadow: 0 1px 2px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.05));
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  transition-property: color,box-shadow;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
  --tw-outline-style: none;
  outline-style: none;
  &::placeholder {
    color: var(--muted-foreground);
  }
  &:focus-visible {
    border-color: var(--ring);
  }
  &:focus-visible {
    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  &:focus-visible {
    --tw-ring-color: var(--ring);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-ring-color: color-mix(in oklab, var(--ring) 50%, transparent);
    }
  }
  &:disabled {
    cursor: not-allowed;
  }
  &:disabled {
    opacity: 50%;
  }
  &[aria-invalid="true"] {
    border-color: var(--destructive);
  }
  &[aria-invalid="true"] {
    --tw-ring-color: var(--destructive);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-ring-color: color-mix(in oklab, var(--destructive) 20%, transparent);
    }
  }
  @media (width >= 48rem) {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
  }
  &:where(.dark, .dark *) {
    background-color: var(--input);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--input) 30%, transparent);
    }
  }
  &:where(.dark, .dark *) {
    &[aria-invalid="true"] {
      --tw-ring-color: var(--destructive);
      @supports (color: color-mix(in lab, red, red)) {
        --tw-ring-color: color-mix(in oklab, var(--destructive) 40%, transparent);
      }
    }
  }
}
.studio-tw [data-x-part="field-select"] {
  height: calc(var(--spacing) * 9);
  width: 100%;
  min-width: 0px;
  appearance: none;
  border-radius: max(0px, calc(var(--studio-radius, 0.5rem) - 2px));
  border-style: var(--tw-border-style);
  border-width: 1px;
  border-color: var(--input);
  background-color: transparent;
  padding-inline: calc(var(--spacing) * 3);
  padding-block: calc(var(--spacing) * 2);
  padding-inline-end: calc(var(--spacing) * 9);
  font-size: var(--text-base);
  line-height: var(--tw-leading, var(--text-base--line-height));
  --tw-font-weight: var(--font-weight-normal);
  font-weight: var(--font-weight-normal);
  --tw-shadow: 0 1px 2px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.05));
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  transition-property: color,box-shadow;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
  --tw-outline-style: none;
  outline-style: none;
  & *::selection {
    background-color: var(--primary);
  }
  &::selection {
    background-color: var(--primary);
  }
  & *::selection {
    color: var(--primary-foreground);
  }
  &::selection {
    color: var(--primary-foreground);
  }
  &::placeholder {
    color: var(--muted-foreground);
  }
  &:focus-visible {
    border-color: var(--ring);
  }
  &:focus-visible {
    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  &:focus-visible {
    --tw-ring-color: var(--ring);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-ring-color: color-mix(in oklab, var(--ring) 50%, transparent);
    }
  }
  &:disabled {
    pointer-events: none;
  }
  &:disabled {
    cursor: not-allowed;
  }
  &[aria-invalid="true"] {
    border-color: var(--destructive);
  }
  &[aria-invalid="true"] {
    --tw-ring-color: var(--destructive);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-ring-color: color-mix(in oklab, var(--destructive) 20%, transparent);
    }
  }
  &[data-size="sm"] {
    height: calc(var(--spacing) * 8);
  }
  &[data-size="sm"] {
    padding-block: var(--spacing);
  }
  @media (width >= 48rem) {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
  }
  &:where(.dark, .dark *) {
    background-color: var(--input);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--input) 30%, transparent);
    }
  }
  &:where(.dark, .dark *) {
    &:hover {
      @media (hover: hover) {
        background-color: var(--input);
        @supports (color: color-mix(in lab, red, red)) {
          background-color: color-mix(in oklab, var(--input) 50%, transparent);
        }
      }
    }
  }
  &:where(.dark, .dark *) {
    &[aria-invalid="true"] {
      --tw-ring-color: var(--destructive);
      @supports (color: color-mix(in lab, red, red)) {
        --tw-ring-color: color-mix(in oklab, var(--destructive) 40%, transparent);
      }
    }
  }
}
.studio-tw [data-x-part="field-checkbox"] {
  grid-column-start: 1;
  grid-row-start: 1;
  width: calc(var(--spacing) * 4);
  height: calc(var(--spacing) * 4);
  flex-shrink: 0;
  cursor: pointer;
  appearance: none;
  border-radius: 4px;
  border-style: var(--tw-border-style);
  border-width: 1px;
  border-color: var(--input);
  background-color: transparent;
  --tw-shadow: 0 1px 2px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.05));
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  transition-property: box-shadow;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
  --tw-outline-style: none;
  outline-style: none;
  &:checked {
    border-color: var(--primary);
  }
  &:checked {
    background-color: var(--primary);
  }
  &:checked {
    color: var(--primary-foreground);
  }
  &:focus-visible {
    border-color: var(--ring);
  }
  &:focus-visible {
    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  &:focus-visible {
    --tw-ring-color: var(--ring);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-ring-color: color-mix(in oklab, var(--ring) 50%, transparent);
    }
  }
  &:disabled {
    cursor: not-allowed;
  }
  &:disabled {
    opacity: 50%;
  }
  &[aria-invalid="true"] {
    border-color: var(--destructive);
  }
  &[aria-invalid="true"] {
    --tw-ring-color: var(--destructive);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-ring-color: color-mix(in oklab, var(--destructive) 20%, transparent);
    }
  }
  &:where(.dark, .dark *) {
    background-color: var(--input);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--input) 30%, transparent);
    }
  }
  &:where(.dark, .dark *) {
    &:checked {
      background-color: var(--primary);
    }
  }
  &:where(.dark, .dark *) {
    &[aria-invalid="true"] {
      --tw-ring-color: var(--destructive);
      @supports (color: color-mix(in lab, red, red)) {
        --tw-ring-color: color-mix(in oklab, var(--destructive) 40%, transparent);
      }
    }
  }
}
.studio-tw [data-x-part="field-radio"] {
  grid-column-start: 1;
  grid-row-start: 1;
  aspect-ratio: 1 / 1;
  width: calc(var(--spacing) * 4);
  height: calc(var(--spacing) * 4);
  flex-shrink: 0;
  cursor: pointer;
  appearance: none;
  border-radius: calc(infinity * 1px);
  border-style: var(--tw-border-style);
  border-width: 1px;
  border-color: var(--input);
  background-color: transparent;
  color: var(--primary);
  --tw-shadow: 0 1px 2px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.05));
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  transition-property: color,box-shadow;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
  --tw-outline-style: none;
  outline-style: none;
  &:focus-visible {
    border-color: var(--ring);
  }
  &:focus-visible {
    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  &:focus-visible {
    --tw-ring-color: var(--ring);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-ring-color: color-mix(in oklab, var(--ring) 50%, transparent);
    }
  }
  &:disabled {
    cursor: not-allowed;
  }
  &:disabled {
    opacity: 50%;
  }
  &[aria-invalid="true"] {
    border-color: var(--destructive);
  }
  &[aria-invalid="true"] {
    --tw-ring-color: var(--destructive);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-ring-color: color-mix(in oklab, var(--destructive) 20%, transparent);
    }
  }
  &:where(.dark, .dark *) {
    background-color: var(--input);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--input) 30%, transparent);
    }
  }
  &:where(.dark, .dark *) {
    &[aria-invalid="true"] {
      --tw-ring-color: var(--destructive);
      @supports (color: color-mix(in lab, red, red)) {
        --tw-ring-color: color-mix(in oklab, var(--destructive) 40%, transparent);
      }
    }
  }
}
.studio-tw [data-x-part="field-radio-dot"] {
  pointer-events: none;
  grid-column-start: 1;
  grid-row-start: 1;
  width: calc(var(--spacing) * 2);
  height: calc(var(--spacing) * 2);
  place-self: center;
  border-radius: calc(infinity * 1px);
  background-color: var(--primary);
  opacity: 0%;
  &:is(:where(.peer):checked ~ *) {
    opacity: 100%;
  }
}
.studio-tw [data-x-part="field-switch"] {
  display: inline-flex;
  height: 1.15rem;
  width: calc(var(--spacing) * 8);
  flex-shrink: 0;
  cursor: pointer;
  appearance: none;
  align-items: center;
  border-radius: calc(infinity * 1px);
  border-style: var(--tw-border-style);
  border-width: 1px;
  border-color: transparent;
  --tw-shadow: 0 1px 2px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.05));
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  transition-property: all;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
  --tw-outline-style: none;
  outline-style: none;
  &:not(*:checked) {
    background-color: var(--input);
  }
  &:checked {
    background-color: var(--primary);
  }
  &:focus-visible {
    border-color: var(--ring);
  }
  &:focus-visible {
    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  &:focus-visible {
    --tw-ring-color: var(--ring);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-ring-color: color-mix(in oklab, var(--ring) 50%, transparent);
    }
  }
  &:disabled {
    cursor: not-allowed;
  }
  &:disabled {
    opacity: 50%;
  }
  &:where(.dark, .dark *) {
    &:not(*:checked) {
      background-color: var(--input);
      @supports (color: color-mix(in lab, red, red)) {
        background-color: color-mix(in oklab, var(--input) 80%, transparent);
      }
    }
  }
}
.studio-tw [data-x-part="field-switch-thumb"] {
  pointer-events: none;
  position: absolute;
  inset-inline-start: 1px;
  top: calc(1 / 2 * 100%);
  display: block;
  width: calc(var(--spacing) * 4);
  height: calc(var(--spacing) * 4);
  --tw-translate-y: calc(calc(1 / 2 * 100%) * -1);
  translate: var(--tw-translate-x) var(--tw-translate-y);
  border-radius: calc(infinity * 1px);
  background-color: var(--background);
  --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  transition-property: transform, translate, scale, rotate;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
  &:is(:where(.peer):not(*:checked) ~ *) {
    --tw-translate-x: 0px;
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }
  &:is(:where(.peer):checked ~ *) {
    --tw-translate-x: calc(100% - 2px);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }
  &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) {
    &:is(:where(.peer):checked ~ *) {
      --tw-translate-x: calc(calc(100% - 2px) * -1);
      translate: var(--tw-translate-x) var(--tw-translate-y);
    }
  }
  &:where(.dark, .dark *) {
    &:is(:where(.peer):not(*:checked) ~ *) {
      background-color: var(--foreground);
    }
  }
  &:where(.dark, .dark *) {
    &:is(:where(.peer):checked ~ *) {
      background-color: var(--primary-foreground);
    }
  }
}
.studio-tw [data-x-part="field-legend"] {
  margin-bottom: calc(var(--spacing) * 3);
  font-size: var(--text-sm);
  line-height: var(--tw-leading, var(--text-sm--line-height));
  --tw-leading: 1;
  line-height: 1;
  --tw-font-weight: var(--font-weight-medium);
  font-weight: var(--font-weight-medium);
}
.studio-tw [data-x-part="field-hint"] {
  font-size: var(--text-sm);
  line-height: var(--tw-leading, var(--text-sm--line-height));
  color: var(--muted-foreground);
}
.studio-tw [data-x="field"]:where([data-size="sm"]) {
  height: calc(var(--spacing) * 8);
  padding-inline: calc(var(--spacing) * 2.5);
  padding-block: var(--spacing);
}
.studio-tw [data-x="field"]:where([data-size="default"]) {
  height: calc(var(--spacing) * 9);
  padding-inline: calc(var(--spacing) * 3);
  padding-block: var(--spacing);
}
.studio-tw [data-x="field"]:where([data-size="lg"]) {
  height: calc(var(--spacing) * 10);
  padding-inline: calc(var(--spacing) * 4);
  padding-block: calc(var(--spacing) * 2);
}
.studio-tw [data-x="input-group-button"]:where([data-variant]) {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  gap: calc(var(--spacing) * 2);
  border-radius: max(0px, calc(var(--studio-radius, 0.5rem) - 2px));
  font-size: var(--text-sm);
  line-height: var(--tw-leading, var(--text-sm--line-height));
  --tw-font-weight: var(--font-weight-medium);
  font-weight: var(--font-weight-medium);
  white-space: nowrap;
  --tw-shadow: 0 0 #0000;
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  transition-property: all;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
  --tw-outline-style: none;
  outline-style: none;
  &:focus-visible {
    border-color: var(--ring);
  }
  &:focus-visible {
    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  &:focus-visible {
    --tw-ring-color: var(--ring);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-ring-color: color-mix(in oklab, var(--ring) 50%, transparent);
    }
  }
  &:disabled {
    pointer-events: none;
  }
  &:disabled {
    opacity: 50%;
  }
  &[aria-invalid="true"] {
    border-color: var(--destructive);
  }
  &[aria-invalid="true"] {
    --tw-ring-color: var(--destructive);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-ring-color: color-mix(in oklab, var(--destructive) 20%, transparent);
    }
  }
  &:where(.dark, .dark *) {
    &[aria-invalid="true"] {
      --tw-ring-color: var(--destructive);
      @supports (color: color-mix(in lab, red, red)) {
        --tw-ring-color: color-mix(in oklab, var(--destructive) 40%, transparent);
      }
    }
  }
  & svg {
    pointer-events: none;
  }
  & svg {
    flex-shrink: 0;
  }
  & svg:not([class*='size-']) {
    width: calc(var(--spacing) * 4);
    height: calc(var(--spacing) * 4);
  }
}
.studio-tw [data-x="input-group-button"]:where([data-variant="default"]) {
  background-color: var(--primary);
  color: var(--primary-foreground);
  &:hover {
    @media (hover: hover) {
      background-color: var(--primary);
      @supports (color: color-mix(in lab, red, red)) {
        background-color: color-mix(in oklab, var(--primary) 90%, transparent);
      }
    }
  }
}
.studio-tw [data-x="input-group-button"]:where([data-variant="secondary"]) {
  background-color: var(--secondary);
  color: var(--secondary-foreground);
  &:hover {
    @media (hover: hover) {
      background-color: var(--secondary);
      @supports (color: color-mix(in lab, red, red)) {
        background-color: color-mix(in oklab, var(--secondary) 80%, transparent);
      }
    }
  }
}
.studio-tw [data-x="input-group-button"]:where([data-variant="outline"]) {
  border-style: var(--tw-border-style);
  border-width: 1px;
  background-color: var(--background);
  --tw-shadow: 0 1px 2px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.05));
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  &:hover {
    @media (hover: hover) {
      background-color: var(--accent);
    }
  }
  &:hover {
    @media (hover: hover) {
      color: var(--accent-foreground);
    }
  }
  &:where(.dark, .dark *) {
    border-color: var(--input);
  }
  &:where(.dark, .dark *) {
    background-color: var(--input);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--input) 30%, transparent);
    }
  }
  &:where(.dark, .dark *) {
    &:hover {
      @media (hover: hover) {
        background-color: var(--input);
        @supports (color: color-mix(in lab, red, red)) {
          background-color: color-mix(in oklab, var(--input) 50%, transparent);
        }
      }
    }
  }
}
@media (hover: hover) {
  .studio-tw [data-x="input-group-button"]:where([data-variant="ghost"]):hover {
    background-color: var(--accent);
    color: var(--accent-foreground);
  }
  .studio-tw [data-x="input-group-button"]:where([data-variant="ghost"]):where(.dark, .dark *):hover {
    background-color: var(--accent);
  }
  @supports (color: color-mix(in lab, red, red)) {
    .studio-tw [data-x="input-group-button"]:where([data-variant="ghost"]):where(.dark, .dark *):hover {
      background-color: color-mix(in oklab, var(--accent) 50%, transparent);
    }
  }
}
.studio-tw [data-x="input-group-button"]:where([data-variant="link"]) {
  color: var(--primary);
  text-underline-offset: 4px;
  &:hover {
    @media (hover: hover) {
      text-decoration-line: underline;
    }
  }
}
.studio-tw [data-x="input-group-button"]:where([data-variant="destructive"]) {
  background-color: var(--destructive);
  color: var(--color-white);
  &:hover {
    @media (hover: hover) {
      background-color: var(--destructive);
      @supports (color: color-mix(in lab, red, red)) {
        background-color: color-mix(in oklab, var(--destructive) 90%, transparent);
      }
    }
  }
  &:focus-visible {
    --tw-ring-color: var(--destructive);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-ring-color: color-mix(in oklab, var(--destructive) 20%, transparent);
    }
  }
  &:where(.dark, .dark *) {
    background-color: var(--destructive);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--destructive) 60%, transparent);
    }
  }
  &:where(.dark, .dark *) {
    &:focus-visible {
      --tw-ring-color: var(--destructive);
      @supports (color: color-mix(in lab, red, red)) {
        --tw-ring-color: color-mix(in oklab, var(--destructive) 40%, transparent);
      }
    }
  }
}
.studio-tw [data-x="input-group-button"]:where([data-size="xs"]) {
  height: calc(var(--spacing) * 6);
  gap: var(--spacing);
  border-radius: calc(var(--radius) - 5px);
  padding-inline: calc(var(--spacing) * 2);
  --tw-shadow: 0 0 #0000;
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  &:has(>svg) {
    padding-inline: calc(var(--spacing) * 2);
  }
  &>svg:not([class*='size-']) {
    width: calc(var(--spacing) * 3.5);
    height: calc(var(--spacing) * 3.5);
  }
}
.studio-tw [data-x="input-group-button"]:where([data-size="sm"]) {
  height: calc(var(--spacing) * 8);
  gap: calc(var(--spacing) * 1.5);
  border-radius: max(0px, calc(var(--studio-radius, 0.5rem) - 2px));
  padding-inline: calc(var(--spacing) * 2.5);
  --tw-shadow: 0 0 #0000;
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  &:has(>svg) {
    padding-inline: calc(var(--spacing) * 2.5);
  }
}
.studio-tw [data-x="input-group-button"]:where([data-size="icon-xs"]) {
  width: calc(var(--spacing) * 6);
  height: calc(var(--spacing) * 6);
  border-radius: calc(var(--radius) - 5px);
  padding: 0px;
  --tw-shadow: 0 0 #0000;
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  &:has(>svg) {
    padding: 0px;
  }
}
.studio-tw [data-x="input-group-button"]:where([data-size="icon-sm"]) {
  width: calc(var(--spacing) * 8);
  height: calc(var(--spacing) * 8);
  padding: 0px;
  --tw-shadow: 0 0 #0000;
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  &:has(>svg) {
    padding: 0px;
  }
}
.studio-tw [data-x="toggle"]:where([data-variant]) {
  display: inline-flex;
  width: fit-content;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  gap: calc(var(--spacing) * 2);
  border-radius: max(0px, calc(var(--studio-radius, 0.5rem) - 2px));
  font-size: var(--text-sm);
  line-height: var(--tw-leading, var(--text-sm--line-height));
  --tw-font-weight: var(--font-weight-medium);
  font-weight: var(--font-weight-medium);
  white-space: nowrap;
  transition-property: color,box-shadow;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
  --tw-outline-style: none;
  outline-style: none;
  &:hover {
    @media (hover: hover) {
      background-color: var(--muted);
    }
  }
  &:hover {
    @media (hover: hover) {
      color: var(--muted-foreground);
    }
  }
  &:has(*:checked) {
    background-color: var(--accent);
  }
  &:has(*:checked) {
    color: var(--accent-foreground);
  }
  &:has(*:focus-visible) {
    border-color: var(--ring);
  }
  &:has(*:focus-visible) {
    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  &:has(*:focus-visible) {
    --tw-ring-color: var(--ring);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-ring-color: color-mix(in oklab, var(--ring) 50%, transparent);
    }
  }
  &:has(*:disabled) {
    pointer-events: none;
  }
  &:has(*:disabled) {
    opacity: 50%;
  }
  &:has(*[aria-invalid="true"]) {
    border-color: var(--destructive);
  }
  &:has(*[aria-invalid="true"]) {
    --tw-ring-color: var(--destructive);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-ring-color: color-mix(in oklab, var(--destructive) 20%, transparent);
    }
  }
  &[data-spacing] {
    width: auto;
  }
  &[data-spacing] {
    min-width: 0px;
  }
  &[data-spacing] {
    flex-shrink: 0;
  }
  &[data-spacing] {
    padding-inline: calc(var(--spacing) * 3);
  }
  &[data-spacing] {
    &:has(*:focus) {
      z-index: 10;
    }
  }
  &[data-spacing] {
    &:has(*:focus-visible) {
      z-index: 10;
    }
  }
  &[data-spacing="0"] {
    border-radius: 0;
  }
  &[data-spacing="0"] {
    --tw-shadow: 0 0 #0000;
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  &[data-spacing="0"] {
    &:first-child {
      border-start-start-radius: max(0px, calc(var(--studio-radius, 0.5rem) - 2px));
      border-end-start-radius: max(0px, calc(var(--studio-radius, 0.5rem) - 2px));
    }
  }
  &[data-spacing="0"] {
    &:last-child {
      border-start-end-radius: max(0px, calc(var(--studio-radius, 0.5rem) - 2px));
      border-end-end-radius: max(0px, calc(var(--studio-radius, 0.5rem) - 2px));
    }
  }
  &[data-spacing="0"] {
    &[data-variant="outline"] {
      border-inline-start-style: var(--tw-border-style);
      border-inline-start-width: 0px;
    }
  }
  &[data-spacing="0"] {
    &[data-variant="outline"] {
      &:first-child {
        border-inline-start-style: var(--tw-border-style);
        border-inline-start-width: 1px;
      }
    }
  }
  &:where(.dark, .dark *) {
    &:has(*[aria-invalid="true"]) {
      --tw-ring-color: var(--destructive);
      @supports (color: color-mix(in lab, red, red)) {
        --tw-ring-color: color-mix(in oklab, var(--destructive) 40%, transparent);
      }
    }
  }
  & svg {
    pointer-events: none;
  }
  & svg {
    flex-shrink: 0;
  }
  & svg:not([class*='size-']) {
    width: calc(var(--spacing) * 4);
    height: calc(var(--spacing) * 4);
  }
}
.studio-tw [data-x="toggle"]:where([data-variant="default"]) {
  background-color: transparent;
}
.studio-tw [data-x="toggle"]:where([data-variant="outline"]) {
  border-style: var(--tw-border-style);
  border-width: 1px;
  border-color: var(--input);
  background-color: transparent;
  --tw-shadow: 0 1px 2px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.05));
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  &:hover {
    @media (hover: hover) {
      background-color: var(--accent);
    }
  }
  &:hover {
    @media (hover: hover) {
      color: var(--accent-foreground);
    }
  }
}
.studio-tw [data-x="toggle"]:where([data-size="sm"]) {
  height: calc(var(--spacing) * 8);
  min-width: calc(var(--spacing) * 8);
  padding-inline: calc(var(--spacing) * 1.5);
}
.studio-tw [data-x="toggle"]:where([data-size="default"]) {
  height: calc(var(--spacing) * 9);
  min-width: calc(var(--spacing) * 9);
  padding-inline: calc(var(--spacing) * 2);
}
.studio-tw [data-x="toggle"]:where([data-size="lg"]) {
  height: calc(var(--spacing) * 10);
  min-width: calc(var(--spacing) * 10);
  padding-inline: calc(var(--spacing) * 2.5);
}
.studio-tw [data-x="tabs"]:where([data-variant]) {
  display: flex;
  width: 100%;
  flex-direction: column;
  gap: calc(var(--spacing) * 2);
}
.studio-tw [data-x-part="tabs-list"] {
  display: inline-flex;
  height: calc(var(--spacing) * 9);
  width: fit-content;
  align-items: center;
  justify-content: center;
  border-radius: var(--studio-radius, 0.5rem);
  background-color: var(--muted);
  padding: 3px;
  color: var(--muted-foreground);
}
.studio-tw [data-x-part="tabs-trigger"] {
  display: inline-flex;
  height: calc(100% - 1px);
  flex: 1;
  align-items: center;
  justify-content: center;
  gap: calc(var(--spacing) * 1.5);
  border-radius: max(0px, calc(var(--studio-radius, 0.5rem) - 2px));
  border-style: var(--tw-border-style);
  border-width: 1px;
  border-color: transparent;
  padding-inline: calc(var(--spacing) * 2);
  padding-block: var(--spacing);
  font-size: var(--text-sm);
  line-height: var(--tw-leading, var(--text-sm--line-height));
  --tw-font-weight: var(--font-weight-medium);
  font-weight: var(--font-weight-medium);
  white-space: nowrap;
  color: var(--foreground);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in oklab, var(--foreground) 60%, transparent);
  }
  transition-property: color,box-shadow;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
  &:hover {
    @media (hover: hover) {
      color: var(--foreground);
    }
  }
  &:focus-visible {
    border-color: var(--ring);
  }
  &:focus-visible {
    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  &:focus-visible {
    --tw-ring-color: var(--ring);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-ring-color: color-mix(in oklab, var(--ring) 50%, transparent);
    }
  }
  &:focus-visible {
    outline-style: var(--tw-outline-style);
    outline-width: 1px;
  }
  &[data-state="active"] {
    background-color: var(--background);
  }
  &[data-state="active"] {
    color: var(--foreground);
  }
  &[data-state="active"] {
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  &:where(.dark, .dark *) {
    &[data-state="active"] {
      border-color: var(--input);
    }
  }
  &:where(.dark, .dark *) {
    &[data-state="active"] {
      background-color: var(--input);
      @supports (color: color-mix(in lab, red, red)) {
        background-color: color-mix(in oklab, var(--input) 30%, transparent);
      }
    }
  }
}
.studio-tw :where([data-x="tabs"][data-variant="line"]) [data-x-part="tabs-list"] {
  gap: var(--spacing);
  border-radius: 0;
  background-color: transparent;
}
.studio-tw :where([data-x="tabs"][data-variant="line"]) [data-x-part="tabs-trigger"] {
  position: relative;
  &::after {
    content: var(--tw-content);
    position: absolute;
  }
  &::after {
    content: var(--tw-content);
    background-color: var(--foreground);
  }
  &::after {
    content: var(--tw-content);
    opacity: 0%;
  }
  &::after {
    content: var(--tw-content);
    transition-property: opacity;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  &[data-state="active"] {
    background-color: transparent;
  }
  &[data-state="active"] {
    --tw-shadow: 0 0 #0000;
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  &[data-state="active"] {
    &::after {
      content: var(--tw-content);
      opacity: 100%;
    }
  }
  &:where(.dark, .dark *) {
    &[data-state="active"] {
      border-color: transparent;
    }
  }
  &:where(.dark, .dark *) {
    &[data-state="active"] {
      background-color: transparent;
    }
  }
}
.studio-tw [data-x-part="accordion-item"] {
  border-bottom-style: var(--tw-border-style);
  border-bottom-width: 1px;
  &:last-child {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 0px;
  }
}
.studio-tw [data-x-part="accordion-trigger"] {
  display: flex;
  cursor: pointer;
  list-style-type: none;
  align-items: flex-start;
  justify-content: space-between;
  gap: calc(var(--spacing) * 4);
  padding-block: calc(var(--spacing) * 4);
  text-align: start;
  font-size: var(--text-sm);
  line-height: var(--tw-leading, var(--text-sm--line-height));
  --tw-font-weight: var(--font-weight-medium);
  font-weight: var(--font-weight-medium);
  &:hover {
    @media (hover: hover) {
      text-decoration-line: underline;
    }
  }
}
.studio-tw [data-x-part="accordion-content"] {
  padding-bottom: calc(var(--spacing) * 4);
  font-size: var(--text-sm);
  line-height: var(--tw-leading, var(--text-sm--line-height));
  color: var(--muted-foreground);
}
.studio-tw [data-x-part="dialog-content"] {
  background-color: var(--background);
  color: var(--foreground);
  &::backdrop {
    background-color: color-mix(in srgb, #000 50%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-black) 50%, transparent);
    }
  }
  &:is([open], :popover-open, :open) {
    animation: enter var(--tw-animation-duration,var(--tw-duration,.15s))var(--tw-ease,ease)var(--tw-animation-delay,0s)var(--tw-animation-iteration-count,1)var(--tw-animation-direction,normal)var(--tw-animation-fill-mode,none);
  }
}
.studio-tw [data-x-part="dialog-header"] {
  display: flex;
  flex-direction: column;
  gap: calc(var(--spacing) * 2);
  text-align: center;
  @media (width >= 40rem) {
    text-align: start;
  }
}
.studio-tw [data-x-part="dialog-title"] {
  --tw-font-weight: var(--font-weight-semibold);
  font-weight: var(--font-weight-semibold);
}
.studio-tw [data-x-part="dialog-description"] {
  font-size: var(--text-sm);
  line-height: var(--tw-leading, var(--text-sm--line-height));
  color: var(--muted-foreground);
}
.studio-tw [data-x-part="dialog-footer"] {
  display: flex;
  flex-direction: column-reverse;
  gap: calc(var(--spacing) * 2);
  @media (width >= 40rem) {
    flex-direction: row;
  }
  @media (width >= 40rem) {
    justify-content: flex-end;
  }
}
.studio-tw [data-x-part="dialog-close"] {
  position: absolute;
  inset-inline-end: calc(var(--spacing) * 4);
  top: calc(var(--spacing) * 4);
  border-radius: var(--radius-xs);
  opacity: 70%;
  transition-property: opacity;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
  &:hover {
    @media (hover: hover) {
      opacity: 100%;
    }
  }
  &:focus {
    --tw-outline-style: none;
    outline-style: none;
  }
  &:focus-visible {
    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  &:focus-visible {
    --tw-ring-color: var(--ring);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-ring-color: color-mix(in oklab, var(--ring) 50%, transparent);
    }
  }
}
.studio-tw [data-x-part="drawer-handle"] {
  margin-inline: auto;
  margin-top: calc(var(--spacing) * 4);
  height: calc(var(--spacing) * 2);
  width: 100px;
  flex-shrink: 0;
  border-radius: calc(infinity * 1px);
  background-color: var(--muted);
}
.studio-tw [data-x-part="toast-close"] {
  border-radius: var(--radius-xs);
  opacity: 70%;
  transition-property: opacity;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
  &:hover {
    @media (hover: hover) {
      opacity: 100%;
    }
  }
  &:focus {
    --tw-outline-style: none;
    outline-style: none;
  }
  &:focus-visible {
    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  &:focus-visible {
    --tw-ring-color: var(--ring);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-ring-color: color-mix(in oklab, var(--ring) 50%, transparent);
    }
  }
}
.studio-tw .site-h1 {
  font-size: var(--text-4xl);
  line-height: var(--tw-leading, var(--text-4xl--line-height));
  --tw-font-weight: var(--font-weight-semibold);
  font-weight: var(--font-weight-semibold);
  --tw-tracking: var(--tracking-tight);
  letter-spacing: var(--tracking-tight);
  text-wrap: balance;
  @media (width >= 40rem) {
    font-size: var(--text-6xl);
    line-height: var(--tw-leading, var(--text-6xl--line-height));
  }
}
.studio-tw .site-h2 {
  font-size: var(--text-3xl);
  line-height: var(--tw-leading, var(--text-3xl--line-height));
  --tw-font-weight: var(--font-weight-semibold);
  font-weight: var(--font-weight-semibold);
  --tw-tracking: var(--tracking-tight);
  letter-spacing: var(--tracking-tight);
  text-wrap: balance;
  @media (width >= 40rem) {
    font-size: var(--text-4xl);
    line-height: var(--tw-leading, var(--text-4xl--line-height));
  }
}
.studio-tw .site-h3 {
  font-size: var(--text-base);
  line-height: calc(var(--spacing) * 7);
  --tw-font-weight: var(--font-weight-semibold);
  font-weight: var(--font-weight-semibold);
}
.studio-tw .site-eyebrow {
  font-size: var(--text-sm);
  line-height: calc(var(--spacing) * 6);
  --tw-font-weight: var(--font-weight-semibold);
  font-weight: var(--font-weight-semibold);
  color: var(--primary);
}
.studio-tw .site-lead {
  font-size: var(--text-lg);
  line-height: calc(var(--spacing) * 8);
  text-wrap: pretty;
  color: var(--muted-foreground);
}
.studio-tw .site-number {
  font-size: var(--text-4xl);
  line-height: var(--tw-leading, var(--text-4xl--line-height));
  --tw-font-weight: var(--font-weight-semibold);
  font-weight: var(--font-weight-semibold);
  --tw-tracking: var(--tracking-tight);
  letter-spacing: var(--tracking-tight);
  --tw-numeric-spacing: tabular-nums;
  font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);
}
.studio-tw .site-quote {
  font-size: var(--text-xl);
  line-height: calc(var(--spacing) * 8);
  --tw-font-weight: var(--font-weight-medium);
  font-weight: var(--font-weight-medium);
  --tw-tracking: var(--tracking-tight);
  letter-spacing: var(--tracking-tight);
  text-wrap: pretty;
  @media (width >= 40rem) {
    font-size: var(--text-2xl);
    line-height: calc(var(--spacing) * 9);
  }
}
.studio-tw .site-panel {
  border-radius: var(--radius-3xl);
  background-color: var(--primary);
  padding-inline: calc(var(--spacing) * 6);
  padding-block: calc(var(--spacing) * 16);
  color: var(--primary-foreground);
  @media (width >= 40rem) {
    padding-inline: calc(var(--spacing) * 16);
  }
}
.studio-tw .site-icon {
  display: flex;
  width: calc(var(--spacing) * 10);
  height: calc(var(--spacing) * 10);
  align-items: center;
  justify-content: center;
  border-radius: var(--studio-radius, 0.5rem);
  background-color: var(--primary);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in oklab, var(--primary) 10%, transparent);
  }
  color: var(--primary);
}
.studio-tw .site-image {
  border-radius: calc(var(--studio-radius, 0.5rem) + 8px);
  object-fit: cover;
  --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  --tw-ring-color: var(--foreground);
  @supports (color: color-mix(in lab, red, red)) {
    --tw-ring-color: color-mix(in oklab, var(--foreground) 5%, transparent);
  }
}
.studio-tw .site-section {
  padding-block: calc(var(--spacing) * 24);
  @media (width >= 40rem) {
    padding-block: calc(var(--spacing) * 32);
  }
}
.studio-tw .site-container {
  margin-inline: auto;
  max-width: var(--container-7xl);
  padding-inline: calc(var(--spacing) * 6);
  @media (width >= 64rem) {
    padding-inline: calc(var(--spacing) * 8);
  }
}
.studio-tw .site-enter {
  animation: enter var(--tw-animation-duration,var(--tw-duration,.15s))var(--tw-ease,ease)var(--tw-animation-delay,0s)var(--tw-animation-iteration-count,1)var(--tw-animation-direction,normal)var(--tw-animation-fill-mode,none);
  --tw-enter-opacity: 0;
  --tw-enter-translate-y: calc(6*var(--spacing));
}
.studio-tw .site-enter_visual {
  animation: enter var(--tw-animation-duration,var(--tw-duration,.15s))var(--tw-ease,ease)var(--tw-animation-delay,0s)var(--tw-animation-iteration-count,1)var(--tw-animation-direction,normal)var(--tw-animation-fill-mode,none);
  --tw-enter-scale: calc(95*1%);
  --tw-enter-scale: .95;
  --tw-enter-opacity: 0;
}
.studio-tw .site-hover {
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
  --tw-duration: 300ms;
  transition-duration: 300ms;
  &:hover {
    @media (hover: hover) {
      --tw-translate-y: calc(var(--spacing) * -1);
      translate: var(--tw-translate-x) var(--tw-translate-y);
    }
  }
  &:hover {
    @media (hover: hover) {
      --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }
  }
}
.studio-tw .site-hover_image {
  transition-property: transform, translate, scale, rotate;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
  --tw-duration: 500ms;
  transition-duration: 500ms;
  &:is(:where(.group):hover *) {
    @media (hover: hover) {
      --tw-scale-x: 105%;
      --tw-scale-y: 105%;
      --tw-scale-z: 105%;
      scale: var(--tw-scale-x) var(--tw-scale-y);
    }
  }
}
.studio-tw .surface-brand {
  --background: var(--studio--primary);
  --foreground: var(--studio--primary-foreground);
  --card: var(--studio--primary-foreground);
  @supports (color: color-mix(in lab, red, red)) {
    --card: color-mix(in oklab, var(--studio--primary-foreground) 10%, transparent);
  }
  --card-foreground: var(--studio--primary-foreground);
  --primary: var(--studio--primary-foreground);
  --primary-foreground: var(--studio--primary);
  --secondary: var(--studio--primary-foreground);
  @supports (color: color-mix(in lab, red, red)) {
    --secondary: color-mix(in oklab, var(--studio--primary-foreground) 15%, transparent);
  }
  --secondary-foreground: var(--studio--primary-foreground);
  --muted: var(--studio--primary-foreground);
  @supports (color: color-mix(in lab, red, red)) {
    --muted: color-mix(in oklab, var(--studio--primary-foreground) 10%, transparent);
  }
  --muted-foreground: var(--studio--primary-foreground);
  @supports (color: color-mix(in lab, red, red)) {
    --muted-foreground: color-mix(in oklab, var(--studio--primary-foreground) 80%, transparent);
  }
  --accent: var(--studio--primary-foreground);
  @supports (color: color-mix(in lab, red, red)) {
    --accent: color-mix(in oklab, var(--studio--primary-foreground) 15%, transparent);
  }
  --accent-foreground: var(--studio--primary-foreground);
  --border: var(--studio--primary-foreground);
  @supports (color: color-mix(in lab, red, red)) {
    --border: color-mix(in oklab, var(--studio--primary-foreground) 25%, transparent);
  }
  --input: var(--studio--primary-foreground);
  @supports (color: color-mix(in lab, red, red)) {
    --input: color-mix(in oklab, var(--studio--primary-foreground) 30%, transparent);
  }
  --ring: var(--studio--primary-foreground);
  background-color: var(--background);
  color: var(--foreground);
}
.studio-tw .surface-overlay {
  --background: var(--studio--overlay);
  --foreground: var(--studio--overlay-foreground);
  --card: var(--studio--overlay-foreground);
  @supports (color: color-mix(in lab, red, red)) {
    --card: color-mix(in oklab, var(--studio--overlay-foreground) 10%, transparent);
  }
  --card-foreground: var(--studio--overlay-foreground);
  --muted: var(--studio--overlay-foreground);
  @supports (color: color-mix(in lab, red, red)) {
    --muted: color-mix(in oklab, var(--studio--overlay-foreground) 10%, transparent);
  }
  --muted-foreground: var(--studio--overlay-foreground);
  @supports (color: color-mix(in lab, red, red)) {
    --muted-foreground: color-mix(in oklab, var(--studio--overlay-foreground) 75%, transparent);
  }
  --border: var(--studio--overlay-foreground);
  @supports (color: color-mix(in lab, red, red)) {
    --border: color-mix(in oklab, var(--studio--overlay-foreground) 25%, transparent);
  }
  --input: var(--studio--overlay-foreground);
  @supports (color: color-mix(in lab, red, red)) {
    --input: color-mix(in oklab, var(--studio--overlay-foreground) 30%, transparent);
  }
  --ring: var(--studio--overlay-foreground);
  background-color: var(--background);
  color: var(--foreground);
}
:root {
  --studio-enter-duration: 0.7s;
  --studio-enter-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --studio-enter-stagger: 80;
}
@property --tw-font-weight {
  syntax: "*";
  inherits: false;
}
@property --tw-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-shadow-color {
  syntax: "*";
  inherits: false;
}
@property --tw-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-inset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-inset-shadow-color {
  syntax: "*";
  inherits: false;
}
@property --tw-inset-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-ring-color {
  syntax: "*";
  inherits: false;
}
@property --tw-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-inset-ring-color {
  syntax: "*";
  inherits: false;
}
@property --tw-inset-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-ring-inset {
  syntax: "*";
  inherits: false;
}
@property --tw-ring-offset-width {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}
@property --tw-ring-offset-color {
  syntax: "*";
  inherits: false;
  initial-value: #fff;
}
@property --tw-ring-offset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-border-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}
@property --tw-leading {
  syntax: "*";
  inherits: false;
}
@property --tw-tracking {
  syntax: "*";
  inherits: false;
}
@property --tw-duration {
  syntax: "*";
  inherits: false;
}
@property --tw-translate-x {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-translate-y {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-translate-z {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-outline-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}
@property --tw-content {
  syntax: "*";
  initial-value: "";
  inherits: false;
}
@property --tw-ordinal {
  syntax: "*";
  inherits: false;
}
@property --tw-slashed-zero {
  syntax: "*";
  inherits: false;
}
@property --tw-numeric-figure {
  syntax: "*";
  inherits: false;
}
@property --tw-numeric-spacing {
  syntax: "*";
  inherits: false;
}
@property --tw-numeric-fraction {
  syntax: "*";
  inherits: false;
}
@property --tw-scale-x {
  syntax: "*";
  inherits: false;
  initial-value: 1;
}
@property --tw-scale-y {
  syntax: "*";
  inherits: false;
  initial-value: 1;
}
@property --tw-scale-z {
  syntax: "*";
  inherits: false;
  initial-value: 1;
}
@keyframes enter {
  from {
    opacity: var(--tw-enter-opacity,1);
    transform: translate3d(var(--tw-enter-translate-x,0),var(--tw-enter-translate-y,0),0)scale3d(var(--tw-enter-scale,1),var(--tw-enter-scale,1),var(--tw-enter-scale,1))rotate(var(--tw-enter-rotate,0));
    filter: blur(var(--tw-enter-blur,0));
  }
}
@layer properties {
  @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
    .studio-tw {
      --shimmer-angle: 20deg;
    }
    *, ::before, ::after, ::backdrop {
      --tw-animation-delay: 0s;
      --tw-animation-direction: normal;
      --tw-animation-duration: initial;
      --tw-animation-fill-mode: none;
      --tw-animation-iteration-count: 1;
      --tw-enter-blur: 0;
      --tw-enter-opacity: 1;
      --tw-enter-rotate: 0;
      --tw-enter-scale: 1;
      --tw-enter-translate-x: 0;
      --tw-enter-translate-y: 0;
      --tw-exit-blur: 0;
      --tw-exit-opacity: 1;
      --tw-exit-rotate: 0;
      --tw-exit-scale: 1;
      --tw-exit-translate-x: 0;
      --tw-exit-translate-y: 0;
      --scroll-fade-t: 0px;
      --scroll-fade-b: 0px;
      --scroll-fade-s: 0px;
      --scroll-fade-e: 0px;
      --scroll-fade-mask: initial;
      --shimmer-image: initial;
      --shimmer-text-fill: initial;
      --tw-font-weight: initial;
      --tw-shadow: 0 0 #0000;
      --tw-shadow-color: initial;
      --tw-shadow-alpha: 100%;
      --tw-inset-shadow: 0 0 #0000;
      --tw-inset-shadow-color: initial;
      --tw-inset-shadow-alpha: 100%;
      --tw-ring-color: initial;
      --tw-ring-shadow: 0 0 #0000;
      --tw-inset-ring-color: initial;
      --tw-inset-ring-shadow: 0 0 #0000;
      --tw-ring-inset: initial;
      --tw-ring-offset-width: 0px;
      --tw-ring-offset-color: #fff;
      --tw-ring-offset-shadow: 0 0 #0000;
      --tw-border-style: solid;
      --tw-leading: initial;
      --tw-tracking: initial;
      --tw-duration: initial;
      --tw-translate-x: 0;
      --tw-translate-y: 0;
      --tw-translate-z: 0;
      --tw-outline-style: solid;
      --tw-content: "";
      --tw-ordinal: initial;
      --tw-slashed-zero: initial;
      --tw-numeric-figure: initial;
      --tw-numeric-spacing: initial;
      --tw-numeric-fraction: initial;
      --tw-scale-x: 1;
      --tw-scale-y: 1;
      --tw-scale-z: 1;
    }
  }
}