.sf-hidden {
  display: none;
}

.sf-grow {
  flex-grow: 1;
}

.sf-backdrop {
  position: fixed;
  inset: 0px;
  z-index: 40;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  background-color: rgb(0 0 0 / var(--tw-bg-opacity));
  --tw-bg-opacity: 0.5;
  --tw-backdrop-blur: blur(4px);
  -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}

.sf-backdrop.sf-hidden {
  display: none;
}

.sf-menu-backdrop {
  position: fixed;
  inset: 0px;
  z-index: 40;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-end;
  background-color: rgb(0 0 0 / var(--tw-bg-opacity));
  --tw-bg-opacity: 0.5;
  --tw-backdrop-blur: blur(4px);
  -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}

.sf-menu-backdrop.sf-hidden {
  display: none;
}

.sf-menu-mobile {
  margin: 0.5rem;
  display: flex;
  min-width: 16rem;
  flex-direction: column;
  border-radius: 0.5rem;
  --tw-bg-opacity: 1;
  background-color: var(--fallback-b1,oklch(var(--b1)/var(--tw-bg-opacity)));
  padding: 1rem;
  --tw-text-opacity: 1;
  color: var(--fallback-bc,oklch(var(--bc)/var(--tw-text-opacity)));
  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

/*.sf-menu-mobile-header {
    @apply flex flex-row justify-end mb-4;
}

.sf-menu-mobile-btn {
    @apply btn btn-circle btn-ghost;
}
*/

.sf-modal {
  margin-left: 0.5rem;
  margin-right: 0.5rem;
  display: flex;
  max-height: 85vh;
  min-width: 20rem;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 0.5rem;
  --tw-bg-opacity: 1;
  background-color: var(--fallback-b1,oklch(var(--b1)/var(--tw-bg-opacity)));
  padding: 1rem;
  --tw-text-opacity: 1;
  color: var(--fallback-bc,oklch(var(--bc)/var(--tw-text-opacity)));
  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.sf-modal-header {
  margin-bottom: 1rem;
  display: flex;
  width: 100%;
  flex-direction: row;
  justify-content: flex-end;
}

:root .sf-modal-close-btn {
  font-weight: 900;
}

@media (prefers-color-scheme: dark) {
  :root .sf-modal-close-btn {
    font-weight: 900;
  }
}

[data-theme=light] .sf-modal-close-btn {
  font-weight: 900;
}

:root:has(input.theme-controller[value=light]:checked) .sf-modal-close-btn {
  font-weight: 900;
}

[data-theme=dark] .sf-modal-close-btn {
  font-weight: 900;
}

:root:has(input.theme-controller[value=dark]:checked) .sf-modal-close-btn {
  font-weight: 900;
}

.sf-modal-close-btn {
  display: inline-flex;
  height: 3rem;
  min-height: 3rem;
  flex-shrink: 0;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  border-radius: var(--rounded-btn, 0.5rem);
  border-color: transparent;
  border-color: oklch(var(--btn-color, var(--b2)) / var(--tw-border-opacity));
  padding-left: 1rem;
  padding-right: 1rem;
  text-align: center;
  font-size: 0.875rem;
  line-height: 1em;
  gap: 0.5rem;
  font-weight: 600;
  text-decoration-line: none;
  transition-duration: 200ms;
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
  border-width: var(--border-btn, 1px);
  transition-property: color, background-color, border-color, opacity, box-shadow, transform;
  --tw-text-opacity: 1;
  color: var(--fallback-bc,oklch(var(--bc)/var(--tw-text-opacity)));
  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  outline-color: var(--fallback-bc,oklch(var(--bc)/1));
  background-color: oklch(var(--btn-color, var(--b2)) / var(--tw-bg-opacity));
  --tw-bg-opacity: 1;
  --tw-border-opacity: 1;
}

.sf-modal-close-btn[disabled],.sf-modal-close-btn:disabled {
  pointer-events: none;
}

.sf-modal-close-btn {
  height: 3rem;
  width: 3rem;
  border-radius: 9999px;
  padding: 0px;
}

:where(.sf-modal-close-btn:is(input[type="checkbox"])),
:where(.sf-modal-close-btn:is(input[type="radio"])) {
  width: auto;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}

.sf-modal-close-btn:is(input[type="checkbox"]):after,.sf-modal-close-btn:is(input[type="radio"]):after {
  --tw-content: attr(aria-label);
  content: var(--tw-content);
}

@media (hover: hover) {
  .sf-modal-close-btn:hover {
    --tw-border-opacity: 1;
    border-color: var(--fallback-b3,oklch(var(--b3)/var(--tw-border-opacity)));
    --tw-bg-opacity: 1;
    background-color: var(--fallback-b3,oklch(var(--b3)/var(--tw-bg-opacity)));
  }

  @supports (color: color-mix(in oklab, black, black)) {
    .sf-modal-close-btn:hover {
      background-color: color-mix(
            in oklab,
            oklch(var(--btn-color, var(--b2)) / var(--tw-bg-opacity, 1)) 90%,
            black
          );
      border-color: color-mix(
            in oklab,
            oklch(var(--btn-color, var(--b2)) / var(--tw-border-opacity, 1)) 90%,
            black
          );
    }
  }

  @supports not (color: oklch(0% 0 0)) {
    .sf-modal-close-btn:hover {
      background-color: var(--btn-color, var(--fallback-b2));
      border-color: var(--btn-color, var(--fallback-b2));
    }
  }

  .sf-modal-close-btn:hover {
    --tw-border-opacity: 1;
    border-color: var(--fallback-b3,oklch(var(--b3)/var(--tw-border-opacity)));
    --tw-bg-opacity: 1;
    background-color: var(--fallback-b3,oklch(var(--b3)/var(--tw-bg-opacity)));
  }

  @supports (color: color-mix(in oklab, black, black)) {
    .sf-modal-close-btn:hover {
      background-color: color-mix(
            in oklab,
            oklch(var(--btn-color, var(--b2)) / var(--tw-bg-opacity, 1)) 90%,
            black
          );
      border-color: color-mix(
            in oklab,
            oklch(var(--btn-color, var(--b2)) / var(--tw-border-opacity, 1)) 90%,
            black
          );
    }
  }

  @supports not (color: oklch(0% 0 0)) {
    .sf-modal-close-btn:hover {
      background-color: var(--btn-color, var(--fallback-b2));
      border-color: var(--btn-color, var(--fallback-b2));
    }
  }

  .sf-modal-close-btn:hover {
    --tw-border-opacity: 1;
    border-color: var(--fallback-b3,oklch(var(--b3)/var(--tw-border-opacity)));
    --tw-bg-opacity: 1;
    background-color: var(--fallback-b3,oklch(var(--b3)/var(--tw-bg-opacity)));
  }

  @supports (color: color-mix(in oklab, black, black)) {
    .sf-modal-close-btn:hover {
      background-color: color-mix(
            in oklab,
            oklch(var(--btn-color, var(--b2)) / var(--tw-bg-opacity, 1)) 90%,
            black
          );
      border-color: color-mix(
            in oklab,
            oklch(var(--btn-color, var(--b2)) / var(--tw-border-opacity, 1)) 90%,
            black
          );
    }
  }

  @supports not (color: oklch(0% 0 0)) {
    .sf-modal-close-btn:hover {
      background-color: var(--btn-color, var(--fallback-b2));
      border-color: var(--btn-color, var(--fallback-b2));
    }
  }

  .sf-modal-close-btn.glass:hover {
    --glass-opacity: 25%;
    --glass-border-opacity: 15%;
  }

  .sf-modal-close-btn:hover {
    border-color: transparent;
  }

  @supports (color: oklch(0% 0 0)) {
    .sf-modal-close-btn:hover {
      background-color: var(--fallback-bc,oklch(var(--bc)/0.2));
    }
  }

  .sf-modal-close-btn:hover {
    border-color: transparent;
  }

  @supports (color: oklch(0% 0 0)) {
    .sf-modal-close-btn:hover {
      background-color: var(--fallback-bc,oklch(var(--bc)/0.2));
    }
  }

  .sf-modal-close-btn[disabled]:hover,.sf-modal-close-btn:disabled:hover {
    --tw-border-opacity: 0;
    background-color: var(--fallback-n,oklch(var(--n)/var(--tw-bg-opacity)));
    --tw-bg-opacity: 0.2;
    color: var(--fallback-bc,oklch(var(--bc)/var(--tw-text-opacity)));
    --tw-text-opacity: 0.2;
  }

  @supports (color: color-mix(in oklab, black, black)) {
    .sf-modal-close-btn:is(input[type="checkbox"]:checked):hover,.sf-modal-close-btn:is(input[type="radio"]:checked):hover {
      background-color: color-mix(in oklab, var(--fallback-p,oklch(var(--p)/1)) 90%, black);
      border-color: color-mix(in oklab, var(--fallback-p,oklch(var(--p)/1)) 90%, black);
    }
  }
}

@media (prefers-reduced-motion: no-preference) {
  .sf-modal-close-btn {
    animation: button-pop var(--animation-btn, 0.25s) ease-out;
  }
}

.sf-modal-close-btn:active:hover,.sf-modal-close-btn:active:focus {
  animation: button-pop 0s ease-out;
  transform: scale(var(--btn-focus-scale, 0.97));
}

@supports not (color: oklch(0% 0 0)) {
  .sf-modal-close-btn {
    background-color: var(--btn-color, var(--fallback-b2));
    border-color: var(--btn-color, var(--fallback-b2));
  }
}

.sf-modal-close-btn:focus-visible {
  outline-style: solid;
  outline-width: 2px;
  outline-offset: 2px;
}

.sf-modal-close-btn.glass {
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  outline-color: currentColor;
}

.sf-modal-close-btn.glass.btn-active {
  --glass-opacity: 25%;
  --glass-border-opacity: 15%;
}

.sf-modal-close-btn {
  border-width: 1px;
  border-color: transparent;
  background-color: transparent;
  color: currentColor;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  outline-color: currentColor;
}

.sf-modal-close-btn.btn-active {
  border-color: transparent;
  background-color: var(--fallback-bc,oklch(var(--bc)/0.2));
}

.sf-modal-close-btn.btn-disabled,.sf-modal-close-btn[disabled],.sf-modal-close-btn:disabled {
  --tw-border-opacity: 0;
  background-color: var(--fallback-n,oklch(var(--n)/var(--tw-bg-opacity)));
  --tw-bg-opacity: 0.2;
  color: var(--fallback-bc,oklch(var(--bc)/var(--tw-text-opacity)));
  --tw-text-opacity: 0.2;
}

.sf-modal-close-btn:is(input[type="checkbox"]:checked),.sf-modal-close-btn:is(input[type="radio"]:checked) {
  --tw-border-opacity: 1;
  border-color: var(--fallback-p,oklch(var(--p)/var(--tw-border-opacity)));
  --tw-bg-opacity: 1;
  background-color: var(--fallback-p,oklch(var(--p)/var(--tw-bg-opacity)));
  --tw-text-opacity: 1;
  color: var(--fallback-pc,oklch(var(--pc)/var(--tw-text-opacity)));
}

.sf-modal-close-btn:is(input[type="checkbox"]:checked):focus-visible,.sf-modal-close-btn:is(input[type="radio"]:checked):focus-visible {
  outline-color: var(--fallback-p,oklch(var(--p)/1));
}

.join > :where(*:not(:first-child)):is(.sf-modal-close-btn) {
  margin-inline-start: calc(var(--border-btn) * -1);
}

.sf-modal-close-btn:where(.btn-xs) {
  height: 1.5rem;
  width: 1.5rem;
  border-radius: 9999px;
  padding: 0px;
}

.sf-modal-close-btn:where(.btn-sm) {
  height: 2rem;
  width: 2rem;
  border-radius: 9999px;
  padding: 0px;
}

.sf-modal-close-btn:where(.btn-md) {
  height: 3rem;
  width: 3rem;
  border-radius: 9999px;
  padding: 0px;
}

.sf-modal-close-btn:where(.btn-lg) {
  height: 4rem;
  width: 4rem;
  border-radius: 9999px;
  padding: 0px;
}

.join.join-vertical > :where(*:not(:first-child)):is(.sf-modal-close-btn) {
  margin-top: calc(var(--border-btn) * -1);
}

.join.join-horizontal > :where(*:not(:first-child)):is(.sf-modal-close-btn) {
  margin-inline-start: calc(var(--border-btn) * -1);
  margin-top: 0px;
}

/*-- BasicHeader ----------------------------------------------------------------*/

.sf-header {
  display: flex;
  width: 100%;
  flex-direction: column;
}

.sf-header-container {
  margin-left: auto;
  margin-right: auto;
  display: flex;
  width: 100%;
  max-width: 80rem;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}

.sf-header-logo {
  flex: 1 1 0%;
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.sf-header-nav {
  display: none;
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

@media (min-width: 1024px) {
  .sf-header-nav {
    display: block;
  }
}

.sf-header-cta {
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

:root .sf-header-menu-btn {
  font-weight: 900;
}

@media (prefers-color-scheme: dark) {
  :root .sf-header-menu-btn {
    font-weight: 900;
  }
}

[data-theme=light] .sf-header-menu-btn {
  font-weight: 900;
}

:root:has(input.theme-controller[value=light]:checked) .sf-header-menu-btn {
  font-weight: 900;
}

[data-theme=dark] .sf-header-menu-btn {
  font-weight: 900;
}

:root:has(input.theme-controller[value=dark]:checked) .sf-header-menu-btn {
  font-weight: 900;
}

.sf-header-menu-btn {
  display: inline-flex;
  height: 3rem;
  min-height: 3rem;
  flex-shrink: 0;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  border-radius: var(--rounded-btn, 0.5rem);
  border-color: transparent;
  border-color: oklch(var(--btn-color, var(--b2)) / var(--tw-border-opacity));
  padding-left: 1rem;
  padding-right: 1rem;
  text-align: center;
  font-size: 0.875rem;
  line-height: 1em;
  gap: 0.5rem;
  font-weight: 600;
  text-decoration-line: none;
  transition-duration: 200ms;
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
  border-width: var(--border-btn, 1px);
  transition-property: color, background-color, border-color, opacity, box-shadow, transform;
  --tw-text-opacity: 1;
  color: var(--fallback-bc,oklch(var(--bc)/var(--tw-text-opacity)));
  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  outline-color: var(--fallback-bc,oklch(var(--bc)/1));
  background-color: oklch(var(--btn-color, var(--b2)) / var(--tw-bg-opacity));
  --tw-bg-opacity: 1;
  --tw-border-opacity: 1;
}

.sf-header-menu-btn[disabled],.sf-header-menu-btn:disabled {
  pointer-events: none;
}

.sf-header-menu-btn {
  height: 3rem;
  width: 3rem;
  border-radius: 9999px;
  padding: 0px;
}

:where(.sf-header-menu-btn:is(input[type="checkbox"])),
:where(.sf-header-menu-btn:is(input[type="radio"])) {
  width: auto;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}

.sf-header-menu-btn:is(input[type="checkbox"]):after,.sf-header-menu-btn:is(input[type="radio"]):after {
  --tw-content: attr(aria-label);
  content: var(--tw-content);
}

@media (hover: hover) {
  .sf-header-menu-btn:hover {
    --tw-border-opacity: 1;
    border-color: var(--fallback-b3,oklch(var(--b3)/var(--tw-border-opacity)));
    --tw-bg-opacity: 1;
    background-color: var(--fallback-b3,oklch(var(--b3)/var(--tw-bg-opacity)));
  }

  @supports (color: color-mix(in oklab, black, black)) {
    .sf-header-menu-btn:hover {
      background-color: color-mix(
            in oklab,
            oklch(var(--btn-color, var(--b2)) / var(--tw-bg-opacity, 1)) 90%,
            black
          );
      border-color: color-mix(
            in oklab,
            oklch(var(--btn-color, var(--b2)) / var(--tw-border-opacity, 1)) 90%,
            black
          );
    }
  }

  @supports not (color: oklch(0% 0 0)) {
    .sf-header-menu-btn:hover {
      background-color: var(--btn-color, var(--fallback-b2));
      border-color: var(--btn-color, var(--fallback-b2));
    }
  }

  .sf-header-menu-btn:hover {
    --tw-border-opacity: 1;
    border-color: var(--fallback-b3,oklch(var(--b3)/var(--tw-border-opacity)));
    --tw-bg-opacity: 1;
    background-color: var(--fallback-b3,oklch(var(--b3)/var(--tw-bg-opacity)));
  }

  @supports (color: color-mix(in oklab, black, black)) {
    .sf-header-menu-btn:hover {
      background-color: color-mix(
            in oklab,
            oklch(var(--btn-color, var(--b2)) / var(--tw-bg-opacity, 1)) 90%,
            black
          );
      border-color: color-mix(
            in oklab,
            oklch(var(--btn-color, var(--b2)) / var(--tw-border-opacity, 1)) 90%,
            black
          );
    }
  }

  @supports not (color: oklch(0% 0 0)) {
    .sf-header-menu-btn:hover {
      background-color: var(--btn-color, var(--fallback-b2));
      border-color: var(--btn-color, var(--fallback-b2));
    }
  }

  .sf-header-menu-btn:hover {
    --tw-border-opacity: 1;
    border-color: var(--fallback-b3,oklch(var(--b3)/var(--tw-border-opacity)));
    --tw-bg-opacity: 1;
    background-color: var(--fallback-b3,oklch(var(--b3)/var(--tw-bg-opacity)));
  }

  @supports (color: color-mix(in oklab, black, black)) {
    .sf-header-menu-btn:hover {
      background-color: color-mix(
            in oklab,
            oklch(var(--btn-color, var(--b2)) / var(--tw-bg-opacity, 1)) 90%,
            black
          );
      border-color: color-mix(
            in oklab,
            oklch(var(--btn-color, var(--b2)) / var(--tw-border-opacity, 1)) 90%,
            black
          );
    }
  }

  @supports not (color: oklch(0% 0 0)) {
    .sf-header-menu-btn:hover {
      background-color: var(--btn-color, var(--fallback-b2));
      border-color: var(--btn-color, var(--fallback-b2));
    }
  }

  .sf-header-menu-btn.glass:hover {
    --glass-opacity: 25%;
    --glass-border-opacity: 15%;
  }

  .sf-header-menu-btn:hover {
    border-color: transparent;
  }

  @supports (color: oklch(0% 0 0)) {
    .sf-header-menu-btn:hover {
      background-color: var(--fallback-bc,oklch(var(--bc)/0.2));
    }
  }

  .sf-header-menu-btn:hover {
    border-color: transparent;
  }

  @supports (color: oklch(0% 0 0)) {
    .sf-header-menu-btn:hover {
      background-color: var(--fallback-bc,oklch(var(--bc)/0.2));
    }
  }

  .sf-header-menu-btn[disabled]:hover,.sf-header-menu-btn:disabled:hover {
    --tw-border-opacity: 0;
    background-color: var(--fallback-n,oklch(var(--n)/var(--tw-bg-opacity)));
    --tw-bg-opacity: 0.2;
    color: var(--fallback-bc,oklch(var(--bc)/var(--tw-text-opacity)));
    --tw-text-opacity: 0.2;
  }

  @supports (color: color-mix(in oklab, black, black)) {
    .sf-header-menu-btn:is(input[type="checkbox"]:checked):hover,.sf-header-menu-btn:is(input[type="radio"]:checked):hover {
      background-color: color-mix(in oklab, var(--fallback-p,oklch(var(--p)/1)) 90%, black);
      border-color: color-mix(in oklab, var(--fallback-p,oklch(var(--p)/1)) 90%, black);
    }
  }
}

@media (prefers-reduced-motion: no-preference) {
  .sf-header-menu-btn {
    animation: button-pop var(--animation-btn, 0.25s) ease-out;
  }
}

.sf-header-menu-btn:active:hover,.sf-header-menu-btn:active:focus {
  animation: button-pop 0s ease-out;
  transform: scale(var(--btn-focus-scale, 0.97));
}

@supports not (color: oklch(0% 0 0)) {
  .sf-header-menu-btn {
    background-color: var(--btn-color, var(--fallback-b2));
    border-color: var(--btn-color, var(--fallback-b2));
  }
}

.sf-header-menu-btn:focus-visible {
  outline-style: solid;
  outline-width: 2px;
  outline-offset: 2px;
}

.sf-header-menu-btn.glass {
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  outline-color: currentColor;
}

.sf-header-menu-btn.glass.btn-active {
  --glass-opacity: 25%;
  --glass-border-opacity: 15%;
}

.sf-header-menu-btn {
  border-width: 1px;
  border-color: transparent;
  background-color: transparent;
  color: currentColor;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  outline-color: currentColor;
}

.sf-header-menu-btn.btn-active {
  border-color: transparent;
  background-color: var(--fallback-bc,oklch(var(--bc)/0.2));
}

.sf-header-menu-btn.btn-disabled,.sf-header-menu-btn[disabled],.sf-header-menu-btn:disabled {
  --tw-border-opacity: 0;
  background-color: var(--fallback-n,oklch(var(--n)/var(--tw-bg-opacity)));
  --tw-bg-opacity: 0.2;
  color: var(--fallback-bc,oklch(var(--bc)/var(--tw-text-opacity)));
  --tw-text-opacity: 0.2;
}

.sf-header-menu-btn:is(input[type="checkbox"]:checked),.sf-header-menu-btn:is(input[type="radio"]:checked) {
  --tw-border-opacity: 1;
  border-color: var(--fallback-p,oklch(var(--p)/var(--tw-border-opacity)));
  --tw-bg-opacity: 1;
  background-color: var(--fallback-p,oklch(var(--p)/var(--tw-bg-opacity)));
  --tw-text-opacity: 1;
  color: var(--fallback-pc,oklch(var(--pc)/var(--tw-text-opacity)));
}

.sf-header-menu-btn:is(input[type="checkbox"]:checked):focus-visible,.sf-header-menu-btn:is(input[type="radio"]:checked):focus-visible {
  outline-color: var(--fallback-p,oklch(var(--p)/1));
}

.join > :where(*:not(:first-child)):is(.sf-header-menu-btn) {
  margin-inline-start: calc(var(--border-btn) * -1);
}

.sf-header-menu-btn:where(.btn-xs) {
  height: 1.5rem;
  width: 1.5rem;
  border-radius: 9999px;
  padding: 0px;
}

.sf-header-menu-btn:where(.btn-sm) {
  height: 2rem;
  width: 2rem;
  border-radius: 9999px;
  padding: 0px;
}

.sf-header-menu-btn:where(.btn-md) {
  height: 3rem;
  width: 3rem;
  border-radius: 9999px;
  padding: 0px;
}

.sf-header-menu-btn:where(.btn-lg) {
  height: 4rem;
  width: 4rem;
  border-radius: 9999px;
  padding: 0px;
}

.join.join-vertical > :where(*:not(:first-child)):is(.sf-header-menu-btn) {
  margin-top: calc(var(--border-btn) * -1);
}

.join.join-horizontal > :where(*:not(:first-child)):is(.sf-header-menu-btn) {
  margin-inline-start: calc(var(--border-btn) * -1);
  margin-top: 0px;
}

.sf-header-menu-btn-container {
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

@media (min-width: 1024px) {
  .sf-header-menu-btn-container {
    display: none;
  }
}

.sf-header-sidebar-btn-container {
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

/*-- Sidebar ---------------------------------------------------------------*/

.sf-sidebar-backdrop {
  position: fixed;
  inset: 0px;
  z-index: 40;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  background-color: rgb(0 0 0 / var(--tw-bg-opacity));
  --tw-bg-opacity: 0.5;
  --tw-backdrop-blur: blur(4px);
  -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}

.sf-sidebar-backdrop.sf-hidden {
  display: none;
}

.sf-sidebar-section {
  width: 100%;
}

.sf-sidebar-container {
  margin-left: auto;
  margin-right: auto;
  display: flex;
  max-width: 80rem;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
}

.sf-sidebar-menu {
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
  display: flex;
  min-width: 16rem;
  flex-direction: column;
  border-radius: 0.5rem;
  --tw-bg-opacity: 1;
  background-color: var(--fallback-b1,oklch(var(--b1)/var(--tw-bg-opacity)));
  padding: 1rem;
  --tw-text-opacity: 1;
  color: var(--fallback-bc,oklch(var(--bc)/var(--tw-text-opacity)));
}

.sf-sidebar-menu.sf-hidden {
  display: none;
}

.sf-sidebar-menu-mobile {
  margin: 0.5rem;
  display: flex;
  min-width: 16rem;
  flex-direction: column;
  border-radius: 0.5rem;
  --tw-bg-opacity: 1;
  background-color: var(--fallback-b1,oklch(var(--b1)/var(--tw-bg-opacity)));
  padding: 1rem;
  --tw-text-opacity: 1;
  color: var(--fallback-bc,oklch(var(--bc)/var(--tw-text-opacity)));
  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

/*-- Section --------------------------------------------------------------------*/

.sf-section {
  width: 100%;
}

@media (min-width: 1024px) {
  .sf-section {
    padding-top: 3rem;
    padding-bottom: 3rem;
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

.sf-section-container {
  margin-left: auto;
  margin-right: auto;
  display: flex;
  max-width: 80rem;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 2rem;
  padding-bottom: 2rem;
  text-align: center;
}

@media (min-width: 1024px) {
  .sf-section-container {
    border-radius: 0.5rem;
    padding-left: 3rem;
    padding-right: 3rem;
    padding-top: 3rem;
    padding-bottom: 3rem;
  }
}

/*-- ImageSection ---------------------------------------------------------------*/

.sf-img-section {
  width: 100%;
}

@media (min-width: 1024px) {
  .sf-img-section {
    padding-top: 3rem;
    padding-bottom: 3rem;
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

.sf-img-section-container-right {
  margin-left: auto;
  margin-right: auto;
  display: flex;
  max-width: 80rem;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

@media (min-width: 1024px) {
  .sf-img-section-container-right {
    flex-direction: row-reverse;
    border-radius: 0.5rem;
  }
}

.sf-img-section-container-left {
  margin-left: auto;
  margin-right: auto;
  display: flex;
  max-width: 80rem;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

@media (min-width: 1024px) {
  .sf-img-section-container-left {
    flex-direction: row;
    border-radius: 0.5rem;
  }

  .sf-img-section-img {
    padding: 1rem;
  }
}

.sf-img-section-content {
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 2rem;
  padding-bottom: 2rem;
}

@media (min-width: 1024px) {
  .sf-img-section-content {
    padding-left: 3rem;
    padding-right: 3rem;
    padding-top: 3rem;
    padding-bottom: 3rem;
  }
}

.sf-img-section-1_2 {
  width: 100%;
}

@media (min-width: 1024px) {
  .sf-img-section-1_2 {
    width: 50%;
  }
}

.sf-img-section-1_3 {
  width: 100%;
}

@media (min-width: 1024px) {
  .sf-img-section-1_3 {
    width: 33.333333%;
  }
}

.sf-img-section-1_4 {
  width: 100%;
}

@media (min-width: 1024px) {
  .sf-img-section-1_4 {
    width: 25%;
  }
}

.sf-img-section-2_3 {
  width: 100%;
}

@media (min-width: 1024px) {
  .sf-img-section-2_3 {
    width: 66.666667%;
  }
}

.sf-img-section-3_4 {
  width: 100%;
}

@media (min-width: 1024px) {
  .sf-img-section-3_4 {
    width: 75%;
  }
}

/*-- DoubleSection ---------------------------------------------------------------*/

.sf-double-section {
  width: 100%;
}

@media (min-width: 1024px) {
  .sf-double-section {
    padding-top: 3rem;
    padding-bottom: 3rem;
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

.sf-double-section-container {
  margin-left: auto;
  margin-right: auto;
  display: flex;
  max-width: 80rem;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 1rem;
}

@media (min-width: 1024px) {
  .sf-double-section-container {
    flex-direction: row;
    border-radius: 0.5rem;
  }
}

.sf-double-section-container-reverse {
  margin-left: auto;
  margin-right: auto;
  display: flex;
  max-width: 80rem;
  flex-direction: column-reverse;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 1rem;
}

@media (min-width: 1024px) {
  .sf-double-section-container-reverse {
    flex-direction: row;
    border-radius: 0.5rem;
  }
}

.sf-double-section-content {
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 2rem;
  padding-bottom: 2rem;
}

@media (min-width: 1024px) {
  .sf-double-section-content {
    padding-left: 3rem;
    padding-right: 3rem;
    padding-top: 3rem;
    padding-bottom: 3rem;
  }
}

.sf-double-section-1_2 {
  width: 100%;
}

@media (min-width: 1024px) {
  .sf-double-section-1_2 {
    width: 50%;
  }
}

.sf-double-section-1_3 {
  width: 100%;
}

@media (min-width: 1024px) {
  .sf-double-section-1_3 {
    width: 33.333333%;
  }
}

.sf-double-section-1_4 {
  width: 100%;
}

@media (min-width: 1024px) {
  .sf-double-section-1_4 {
    width: 25%;
  }
}

.sf-double-section-2_3 {
  width: 100%;
}

@media (min-width: 1024px) {
  .sf-double-section-2_3 {
    width: 66.666667%;
  }
}

.sf-double-section-3_4 {
  width: 100%;
}

@media (min-width: 1024px) {
  .sf-double-section-3_4 {
    width: 75%;
  }
}

/*-- GridSection ---------------------------------------------------------------*/

.sf-grid-section {
  width: 100%;
}

@media (min-width: 1024px) {
  .sf-grid-section {
    padding-top: 3rem;
    padding-bottom: 3rem;
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

.sf-grid-section-2 {
  margin-left: auto;
  margin-right: auto;
  display: grid;
  width: 100%;
  max-width: 80rem;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: 1rem;
  padding: 1rem;
}

@media (min-width: 1024px) {
  .sf-grid-section-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border-radius: 0.5rem;
  }
}

.sf-grid-section-3 {
  margin-left: auto;
  margin-right: auto;
  display: grid;
  width: 100%;
  max-width: 80rem;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: 1rem;
  padding: 1rem;
}

@media (min-width: 1024px) {
  .sf-grid-section-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border-radius: 0.5rem;
  }
}

.sf-grid-section-4 {
  margin-left: auto;
  margin-right: auto;
  display: grid;
  width: 100%;
  max-width: 80rem;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: 1rem;
  padding: 1rem;
}

@media (min-width: 1024px) {
  .sf-grid-section-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    border-radius: 0.5rem;
  }
}

.sf-grid-section-5 {
  margin-left: auto;
  margin-right: auto;
  display: grid;
  width: 100%;
  max-width: 80rem;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: 1rem;
  padding: 1rem;
}

@media (min-width: 1024px) {
  .sf-grid-section-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    border-radius: 0.5rem;
  }
}

.sf-grid-section-6 {
  margin-left: auto;
  margin-right: auto;
  display: grid;
  width: 100%;
  max-width: 80rem;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: 1rem;
  padding: 1rem;
}

@media (min-width: 1024px) {
  .sf-grid-section-6 {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    border-radius: 0.5rem;
  }
}

/*-- Footer --------------------------------------------------------------------*/

.sf-footer-section {
  width: 100%;
  --tw-bg-opacity: 1;
  background-color: rgb(0 0 0 / var(--tw-bg-opacity));
  padding-top: 5rem;
  padding-bottom: 5rem;
  padding-left: 1rem;
  padding-right: 1rem;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity));
}

@media (min-width: 1024px) {
  .sf-footer-section {
    padding-left: 2rem;
    padding-right: 2rem;
  }
}

.sf-footer-container {
  margin-left: auto;
  margin-right: auto;
  display: flex;
  max-width: 80rem;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3rem;
}

@media (min-width: 1024px) {
  .sf-footer-container {
    flex-direction: row;
    align-items: flex-start;
  }
}

.sf-footer-column {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  text-align: center;
  font-weight: 600;
}

@media (min-width: 1024px) {
  .sf-footer-column {
    align-items: flex-start;
    text-align: left;
  }
}

.sf-footer-column h3 {
  font-size: 1rem;
  line-height: 1.5rem;
  color: rgb(255 255 255 / 0.5);
}

.sf-footer-column a:hover {
  --tw-text-opacity: 1;
  color: var(--fallback-p,oklch(var(--p)/var(--tw-text-opacity)));
  text-decoration-line: underline;
}

/*-- TreeLink ------------------------------------------------------------------*/

.sf-treelink {
  display: flex;
  flex-direction: row;
  align-items: stretch;
}

.sf-treelink-content {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  --tw-text-opacity: 1;
  color: var(--fallback-bc,oklch(var(--bc)/var(--tw-text-opacity)));
}

.sf-treelink-content-selected {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  --tw-text-opacity: 1;
  color: var(--fallback-a,oklch(var(--a)/var(--tw-text-opacity)));
}

.sf-treelink-padding {
  width: 1rem;
  border-left-width: 1px;
  border-color: var(--fallback-bc,oklch(var(--bc)/0.1));
}

.sf-treelink-padding-selected {
  width: 1rem;
  border-left-width: 1px;
  --tw-border-opacity: 1;
  border-color: var(--fallback-a,oklch(var(--a)/var(--tw-border-opacity)));
}

/*-- Markdown ------------------------------------------------------------------*/

@media (hover:hover) {
  .sf-markdown table tr.hover:hover,.sf-markdown table tr.hover:nth-child(even):hover {
    --tw-bg-opacity: 1;
    background-color: var(--fallback-b2,oklch(var(--b2)/var(--tw-bg-opacity)));
  }
}

.sf-markdown table {
  position: relative;
  width: 100%;
  border-radius: var(--rounded-box, 1rem);
  text-align: left;
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.sf-markdown table :where(.table-pin-rows thead tr) {
  position: sticky;
  top: 0px;
  z-index: 1;
  --tw-bg-opacity: 1;
  background-color: var(--fallback-b1,oklch(var(--b1)/var(--tw-bg-opacity)));
}

.sf-markdown table :where(.table-pin-rows tfoot tr) {
  position: sticky;
  bottom: 0px;
  z-index: 1;
  --tw-bg-opacity: 1;
  background-color: var(--fallback-b1,oklch(var(--b1)/var(--tw-bg-opacity)));
}

.sf-markdown table :where(.table-pin-cols tr th) {
  position: sticky;
  left: 0px;
  right: 0px;
  --tw-bg-opacity: 1;
  background-color: var(--fallback-b1,oklch(var(--b1)/var(--tw-bg-opacity)));
}

.sf-markdown table:where([dir="rtl"], [dir="rtl"] *) {
  text-align: right;
}

.sf-markdown table :where(th, td) {
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  vertical-align: middle;
}

.sf-markdown table tr.active,.sf-markdown table tr.active:nth-child(even) {
  --tw-bg-opacity: 1;
  background-color: var(--fallback-b2,oklch(var(--b2)/var(--tw-bg-opacity)));
}

.sf-markdown table :where(thead tr, tbody tr:not(:last-child), tbody tr:first-child:last-child) {
  border-bottom-width: 1px;
  --tw-border-opacity: 1;
  border-bottom-color: var(--fallback-b2,oklch(var(--b2)/var(--tw-border-opacity)));
}

.sf-markdown table :where(thead, tfoot) {
  white-space: nowrap;
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 700;
  color: var(--fallback-bc,oklch(var(--bc)/0.6));
}

.sf-markdown table :where(tfoot) {
  border-top-width: 1px;
  --tw-border-opacity: 1;
  border-top-color: var(--fallback-b2,oklch(var(--b2)/var(--tw-border-opacity)));
}

.sf-markdown table {
  display: table;
}

.sf-markdown table td {
  margin-bottom: 2rem;
  vertical-align: top;
}

.sf-markdown ul {
  margin-bottom: 1rem;
  margin-left: 1.5rem;
  list-style-position: outside;
  list-style-type: disc;
}

.sf-markdown h1 {
  margin-bottom: 4rem;
}

.sf-markdown h2 {
  margin-top: 3rem;
  margin-bottom: 2rem;
}

.sf-markdown h3 {
  margin-top: 2rem;
  margin-bottom: 1rem;
}

.sf-markdown h4,
.sf-markdown h5,
.sf-markdown h6 {
  margin-bottom: 1rem;
}

.sf-markdown p {
  margin-bottom: 1rem;
}

.sf-markdown blockquote {
  margin-bottom: 2rem;
  border-left-width: 8px;
  --tw-border-opacity: 1;
  border-color: var(--fallback-in,oklch(var(--in)/var(--tw-border-opacity)));
  background-color: var(--fallback-in,oklch(var(--in)/0.05));
  padding: 1rem;
}

.sf-markdown pre {
  margin-bottom: 2rem;
  overflow-x: auto;
  border-radius: 0.25rem;
  --tw-bg-opacity: 1;
  background-color: var(--fallback-nc,oklch(var(--nc)/var(--tw-bg-opacity)));
  padding: 1rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --tw-text-opacity: 1;
  color: var(--fallback-n,oklch(var(--n)/var(--tw-text-opacity)));
}

.sf-markdown code {
  border-radius: 0.25rem;
  --tw-bg-opacity: 1;
  background-color: var(--fallback-nc,oklch(var(--nc)/var(--tw-bg-opacity)));
  padding-left: 0.25rem;
  padding-right: 0.25rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --tw-text-opacity: 1;
  color: var(--fallback-n,oklch(var(--n)/var(--tw-text-opacity)));
}

.sf-markdown pre code {
  border-radius: 0px;
  background-color: transparent;
  padding: 0px;
}

.sf-markdown a {
  cursor: pointer;
  text-decoration-line: underline;
  --tw-text-opacity: 1;
  color: var(--fallback-p,oklch(var(--p)/var(--tw-text-opacity)));
}

@supports (color:color-mix(in oklab,black,black)) {
  @media (hover:hover) {
    .sf-markdown a:hover {
      color: color-mix(in oklab,var(--fallback-p,oklch(var(--p)/1)) 80%,black);
    }
  }
}

.sf-markdown a:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
}

.sf-markdown a:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

/*-- TermsModal ------------------------------------------------------------------*/

.sf-terms-modal {
  margin-left: 0.5rem;
  margin-right: 0.5rem;
  display: flex;
  max-height: 85vh;
  width: 100%;
  max-width: 64rem;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 0.5rem;
  --tw-bg-opacity: 1;
  background-color: var(--fallback-b1,oklch(var(--b1)/var(--tw-bg-opacity)));
  padding: 1rem;
  --tw-text-opacity: 1;
  color: var(--fallback-bc,oklch(var(--bc)/var(--tw-text-opacity)));
  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.sf-terms-container {
  margin-bottom: 2rem;
  width: 100%;
  overflow-y: auto;
  border-radius: 0.375rem;
  --tw-bg-opacity: 1;
  background-color: var(--fallback-nc,oklch(var(--nc)/var(--tw-bg-opacity)));
  padding: 1rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --tw-text-opacity: 1;
  color: var(--fallback-n,oklch(var(--n)/var(--tw-text-opacity)));
}

/*-- Newsletter ------------------------------------------------------------------*/

.sf-newsletter {
  display: flex;
  width: 100%;
  flex-direction: column;
}

.sf-newsletter-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

@media (min-width: 1024px) {
  .sf-newsletter-container {
    flex-direction: row;
  }
}

.sf-newsletter-input {
  flex-shrink: 1;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  height: 3rem;
  padding-left: 1rem;
  padding-right: 1rem;
  font-size: 1rem;
  line-height: 2;
  line-height: 1.5rem;
  border-radius: var(--rounded-btn, 0.5rem);
  border-width: 1px;
  border-color: transparent;
  --tw-bg-opacity: 1;
  background-color: var(--fallback-b1,oklch(var(--b1)/var(--tw-bg-opacity)));
}

.sf-newsletter-input[type="number"]::-webkit-inner-spin-button {
  margin-top: -1rem;
  margin-bottom: -1rem;
  margin-inline-end: -1rem;
}

.sf-newsletter-input input {
  --tw-bg-opacity: 1;
  background-color: var(--fallback-p,oklch(var(--p)/var(--tw-bg-opacity)));
  background-color: transparent;
}

.sf-newsletter-input input:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
}

.sf-newsletter-input[list]::-webkit-calendar-picker-indicator {
  line-height: 1em;
}

.sf-newsletter-input {
  border-color: var(--fallback-bc,oklch(var(--bc)/0.2));
}

.sf-newsletter-input:focus,.sf-newsletter-input:focus-within {
  box-shadow: none;
  border-color: var(--fallback-bc,oklch(var(--bc)/0.2));
  outline-style: solid;
  outline-width: 2px;
  outline-offset: 2px;
  outline-color: var(--fallback-bc,oklch(var(--bc)/0.2));
}

.sf-newsletter-input:has(> input[disabled]),.sf-newsletter-input:disabled,.sf-newsletter-input[disabled] {
  cursor: not-allowed;
  --tw-border-opacity: 1;
  border-color: var(--fallback-b2,oklch(var(--b2)/var(--tw-border-opacity)));
  --tw-bg-opacity: 1;
  background-color: var(--fallback-b2,oklch(var(--b2)/var(--tw-bg-opacity)));
  color: var(--fallback-bc,oklch(var(--bc)/0.4));
}

.sf-newsletter-input:has(> input[disabled])::-moz-placeholder, .sf-newsletter-input:disabled::-moz-placeholder, .sf-newsletter-input[disabled]::-moz-placeholder {
  color: var(--fallback-bc,oklch(var(--bc)/var(--tw-placeholder-opacity)));
  --tw-placeholder-opacity: 0.2;
}

.sf-newsletter-input:has(> input[disabled])::placeholder,.sf-newsletter-input:disabled::placeholder,.sf-newsletter-input[disabled]::placeholder {
  color: var(--fallback-bc,oklch(var(--bc)/var(--tw-placeholder-opacity)));
  --tw-placeholder-opacity: 0.2;
}

.sf-newsletter-input:has(> input[disabled]) > input[disabled] {
  cursor: not-allowed;
}

.sf-newsletter-input::-webkit-date-and-time-value {
  text-align: inherit;
}

.mockup-browser .mockup-browser-toolbar .sf-newsletter-input {
  position: relative;
  margin-left: auto;
  margin-right: auto;
  display: block;
  height: 1.75rem;
  width: 24rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  --tw-bg-opacity: 1;
  background-color: var(--fallback-b2,oklch(var(--b2)/var(--tw-bg-opacity)));
  padding-left: 2rem;
  direction: ltr;
}

.mockup-browser .mockup-browser-toolbar .sf-newsletter-input:before {
  content: "";
  position: absolute;
  left: 0.5rem;
  top: 50%;
  aspect-ratio: 1 / 1;
  height: 0.75rem;
  --tw-translate-y: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  border-radius: 9999px;
  border-width: 2px;
  border-color: currentColor;
  opacity: 0.6;
}

.mockup-browser .mockup-browser-toolbar .sf-newsletter-input:after {
  content: "";
  position: absolute;
  left: 1.25rem;
  top: 50%;
  height: 0.5rem;
  --tw-translate-y: 25%;
  --tw-rotate: -45deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  border-radius: 9999px;
  border-width: 1px;
  border-color: currentColor;
  opacity: 0.6;
}

.sf-newsletter-input {
  width: 100%;
  flex-grow: 1;
}

/** TextBox ----------------------------------------------------------------------*/

.sf-textbox {
  text-align: left;
}

.sf-textbox-input {
  flex-shrink: 1;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  height: 3rem;
  padding-left: 1rem;
  padding-right: 1rem;
  font-size: 1rem;
  line-height: 2;
  line-height: 1.5rem;
  border-radius: var(--rounded-btn, 0.5rem);
  border-width: 1px;
  border-color: transparent;
  --tw-bg-opacity: 1;
  background-color: var(--fallback-b1,oklch(var(--b1)/var(--tw-bg-opacity)));
}

.sf-textbox-input[type="number"]::-webkit-inner-spin-button {
  margin-top: -1rem;
  margin-bottom: -1rem;
  margin-inline-end: -1rem;
}

.sf-textbox-input input {
  --tw-bg-opacity: 1;
  background-color: var(--fallback-p,oklch(var(--p)/var(--tw-bg-opacity)));
  background-color: transparent;
}

.sf-textbox-input input:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
}

.sf-textbox-input[list]::-webkit-calendar-picker-indicator {
  line-height: 1em;
}

.sf-textbox-input {
  border-color: var(--fallback-bc,oklch(var(--bc)/0.2));
}

.sf-textbox-input:focus,.sf-textbox-input:focus-within {
  box-shadow: none;
  border-color: var(--fallback-bc,oklch(var(--bc)/0.2));
  outline-style: solid;
  outline-width: 2px;
  outline-offset: 2px;
  outline-color: var(--fallback-bc,oklch(var(--bc)/0.2));
}

.sf-textbox-input:has(> input[disabled]),.sf-textbox-input:disabled,.sf-textbox-input[disabled] {
  cursor: not-allowed;
  --tw-border-opacity: 1;
  border-color: var(--fallback-b2,oklch(var(--b2)/var(--tw-border-opacity)));
  --tw-bg-opacity: 1;
  background-color: var(--fallback-b2,oklch(var(--b2)/var(--tw-bg-opacity)));
  color: var(--fallback-bc,oklch(var(--bc)/0.4));
}

.sf-textbox-input:has(> input[disabled])::-moz-placeholder, .sf-textbox-input:disabled::-moz-placeholder, .sf-textbox-input[disabled]::-moz-placeholder {
  color: var(--fallback-bc,oklch(var(--bc)/var(--tw-placeholder-opacity)));
  --tw-placeholder-opacity: 0.2;
}

.sf-textbox-input:has(> input[disabled])::placeholder,.sf-textbox-input:disabled::placeholder,.sf-textbox-input[disabled]::placeholder {
  color: var(--fallback-bc,oklch(var(--bc)/var(--tw-placeholder-opacity)));
  --tw-placeholder-opacity: 0.2;
}

.sf-textbox-input:has(> input[disabled]) > input[disabled] {
  cursor: not-allowed;
}

.sf-textbox-input::-webkit-date-and-time-value {
  text-align: inherit;
}

.mockup-browser .mockup-browser-toolbar .sf-textbox-input {
  position: relative;
  margin-left: auto;
  margin-right: auto;
  display: block;
  height: 1.75rem;
  width: 24rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  --tw-bg-opacity: 1;
  background-color: var(--fallback-b2,oklch(var(--b2)/var(--tw-bg-opacity)));
  padding-left: 2rem;
  direction: ltr;
}

.mockup-browser .mockup-browser-toolbar .sf-textbox-input:before {
  content: "";
  position: absolute;
  left: 0.5rem;
  top: 50%;
  aspect-ratio: 1 / 1;
  height: 0.75rem;
  --tw-translate-y: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  border-radius: 9999px;
  border-width: 2px;
  border-color: currentColor;
  opacity: 0.6;
}

.mockup-browser .mockup-browser-toolbar .sf-textbox-input:after {
  content: "";
  position: absolute;
  left: 1.25rem;
  top: 50%;
  height: 0.5rem;
  --tw-translate-y: 25%;
  --tw-rotate: -45deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  border-radius: 9999px;
  border-width: 1px;
  border-color: currentColor;
  opacity: 0.6;
}

.sf-textbox-input {
  width: 100%;
}

.sf-textbox-label {
  display: block;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.5rem;
  --tw-text-opacity: 1;
  color: var(--fallback-bc,oklch(var(--bc)/var(--tw-text-opacity)));
}

.sf-textbox-label-required {
  --tw-text-opacity: 1;
  color: var(--fallback-er,oklch(var(--er)/var(--tw-text-opacity)));
}

.sf-textbox-multiline {
  min-height: 3rem;
  flex-shrink: 1;
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  line-height: 2;
  border-radius: var(--rounded-btn, 0.5rem);
  border-width: 1px;
  border-color: transparent;
  --tw-bg-opacity: 1;
  background-color: var(--fallback-b1,oklch(var(--b1)/var(--tw-bg-opacity)));
  border-color: var(--fallback-bc,oklch(var(--bc)/0.2));
}

.sf-textbox-multiline:focus {
  box-shadow: none;
  border-color: var(--fallback-bc,oklch(var(--bc)/0.2));
  outline-style: solid;
  outline-width: 2px;
  outline-offset: 2px;
  outline-color: var(--fallback-bc,oklch(var(--bc)/0.2));
}

.sf-textbox-multiline:disabled,.sf-textbox-multiline[disabled] {
  cursor: not-allowed;
  --tw-border-opacity: 1;
  border-color: var(--fallback-b2,oklch(var(--b2)/var(--tw-border-opacity)));
  --tw-bg-opacity: 1;
  background-color: var(--fallback-b2,oklch(var(--b2)/var(--tw-bg-opacity)));
  color: var(--fallback-bc,oklch(var(--bc)/0.4));
}

.sf-textbox-multiline:disabled::-moz-placeholder, .sf-textbox-multiline[disabled]::-moz-placeholder {
  color: var(--fallback-bc,oklch(var(--bc)/var(--tw-placeholder-opacity)));
  --tw-placeholder-opacity: 0.2;
}

.sf-textbox-multiline:disabled::placeholder,.sf-textbox-multiline[disabled]::placeholder {
  color: var(--fallback-bc,oklch(var(--bc)/var(--tw-placeholder-opacity)));
  --tw-placeholder-opacity: 0.2;
}

.sf-textbox-multiline {
  width: 100%;
}

.sf-textbox-error {
  width: 100%;
  --tw-text-opacity: 1;
  color: var(--fallback-er,oklch(var(--er)/var(--tw-text-opacity)));
}

/*-- Select ----------------------------------------------------------------------*/

.sf-select {
  text-align: left;
}

.sf-select-input {
  display: inline-flex;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  height: 3rem;
  min-height: 3rem;
  padding-inline-start: 1rem;
  padding-inline-end: 2.5rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  line-height: 2;
  border-radius: var(--rounded-btn, 0.5rem);
  border-width: 1px;
  border-color: transparent;
  --tw-bg-opacity: 1;
  background-color: var(--fallback-b1,oklch(var(--b1)/var(--tw-bg-opacity)));
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 20px) calc(1px + 50%),
    calc(100% - 16.1px) calc(1px + 50%);
  background-size: 4px 4px,
    4px 4px;
  background-repeat: no-repeat;
}

.sf-select-input[multiple] {
  height: auto;
}

.sf-select-input {
  border-color: var(--fallback-bc,oklch(var(--bc)/0.2));
}

.sf-select-input:focus {
  box-shadow: none;
  border-color: var(--fallback-bc,oklch(var(--bc)/0.2));
  outline-style: solid;
  outline-width: 2px;
  outline-offset: 2px;
  outline-color: var(--fallback-bc,oklch(var(--bc)/0.2));
}

.sf-select-input:disabled,.sf-select-input[disabled] {
  cursor: not-allowed;
  --tw-border-opacity: 1;
  border-color: var(--fallback-b2,oklch(var(--b2)/var(--tw-border-opacity)));
  --tw-bg-opacity: 1;
  background-color: var(--fallback-b2,oklch(var(--b2)/var(--tw-bg-opacity)));
  color: var(--fallback-bc,oklch(var(--bc)/0.4));
}

.sf-select-input:disabled::-moz-placeholder, .sf-select-input[disabled]::-moz-placeholder {
  color: var(--fallback-bc,oklch(var(--bc)/var(--tw-placeholder-opacity)));
  --tw-placeholder-opacity: 0.2;
}

.sf-select-input:disabled::placeholder,.sf-select-input[disabled]::placeholder {
  color: var(--fallback-bc,oklch(var(--bc)/var(--tw-placeholder-opacity)));
  --tw-placeholder-opacity: 0.2;
}

.sf-select-input[multiple],.sf-select-input[size].select:not([size="1"]) {
  background-image: none;
  padding-right: 1rem;
}

[dir="rtl"] .sf-select-input {
  background-position: calc(0% + 12px) calc(1px + 50%),
    calc(0% + 16px) calc(1px + 50%);
}

.sf-select-input {
  width: 100%;
}

.sf-select-label {
  display: block;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.5rem;
  --tw-text-opacity: 1;
  color: var(--fallback-bc,oklch(var(--bc)/var(--tw-text-opacity)));
}

.sf-select-label-required {
  --tw-text-opacity: 1;
  color: var(--fallback-er,oklch(var(--er)/var(--tw-text-opacity)));
}

.sf-select-error {
  width: 100%;
  --tw-text-opacity: 1;
  color: var(--fallback-er,oklch(var(--er)/var(--tw-text-opacity)));
}

/*-- Toggle ----------------------------------------------------------------------*/

.sf-toggle {
  display: flex;
  flex-direction: column;
  text-align: left;
}

.sf-toggle-container {
  display: flex;
  flex-direction: row;
  border-radius: 0.5rem;
}

.sf-toggle-input {
  flex-shrink: 0;
  --tglbg: var(--fallback-b1,oklch(var(--b1)/1));
  --handleoffset: 1.5rem;
  --handleoffsetcalculator: calc(var(--handleoffset) * -1);
  --togglehandleborder: 0 0;
  height: 1.5rem;
  width: 3rem;
  cursor: pointer;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border-radius: var(--rounded-badge, 1.9rem);
  border-width: 1px;
  border-color: currentColor;
  background-color: currentColor;
  color: var(--fallback-bc,oklch(var(--bc)/0.5));
  transition: background,
    box-shadow var(--animation-input, 0.2s) ease-out;
  box-shadow: var(--handleoffsetcalculator) 0 0 2px var(--tglbg) inset,
    0 0 0 2px var(--tglbg) inset,
    var(--togglehandleborder);
}

[dir="rtl"] .sf-toggle-input {
  --handleoffsetcalculator: calc(var(--handleoffset) * 1);
}

.sf-toggle-input:focus-visible {
  outline-style: solid;
  outline-width: 2px;
  outline-offset: 2px;
  outline-color: var(--fallback-bc,oklch(var(--bc)/0.2));
}

.sf-toggle-input:hover {
  background-color: currentColor;
}

.sf-toggle-input:checked,.sf-toggle-input[aria-checked="true"] {
  background-image: none;
  --handleoffsetcalculator: var(--handleoffset);
  --tw-text-opacity: 1;
  color: var(--fallback-bc,oklch(var(--bc)/var(--tw-text-opacity)));
}

[dir="rtl"] .sf-toggle-input:checked, [dir="rtl"] .sf-toggle-input[aria-checked="true"] {
  --handleoffsetcalculator: calc(var(--handleoffset) * -1);
}

.sf-toggle-input:indeterminate {
  --tw-text-opacity: 1;
  color: var(--fallback-bc,oklch(var(--bc)/var(--tw-text-opacity)));
  box-shadow: calc(var(--handleoffset) / 2) 0 0 2px var(--tglbg) inset,
      calc(var(--handleoffset) / -2) 0 0 2px var(--tglbg) inset,
      0 0 0 2px var(--tglbg) inset;
}

[dir="rtl"] .sf-toggle-input:indeterminate {
  box-shadow: calc(var(--handleoffset) / 2) 0 0 2px var(--tglbg) inset,
        calc(var(--handleoffset) / -2) 0 0 2px var(--tglbg) inset,
        0 0 0 2px var(--tglbg) inset;
}

.sf-toggle-input:focus-visible {
  outline-color: var(--fallback-su,oklch(var(--su)/1));
}

.sf-toggle-input:checked,.sf-toggle-input[aria-checked="true"] {
  border-color: var(--fallback-su,oklch(var(--su)/var(--tw-border-opacity)));
  --tw-border-opacity: 0.1;
  --tw-bg-opacity: 1;
  background-color: var(--fallback-su,oklch(var(--su)/var(--tw-bg-opacity)));
  --tw-text-opacity: 1;
  color: var(--fallback-suc,oklch(var(--suc)/var(--tw-text-opacity)));
}

.sf-toggle-input:disabled {
  cursor: not-allowed;
  --tw-border-opacity: 1;
  border-color: var(--fallback-bc,oklch(var(--bc)/var(--tw-border-opacity)));
  background-color: transparent;
  opacity: 0.3;
  --togglehandleborder: 0 0 0 3px var(--fallback-bc,oklch(var(--bc)/1)) inset,
      var(--handleoffsetcalculator) 0 0 3px var(--fallback-bc,oklch(var(--bc)/1)) inset;
}

.sf-toggle-label {
  margin-left: 0.5rem;
  flex-grow: 1;
  flex-direction: column;
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.sf-toggle-error-border {
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: var(--fallback-er,oklch(var(--er)/var(--tw-border-opacity)));
}

.sf-toggle-error {
  width: 100%;
  --tw-text-opacity: 1;
  color: var(--fallback-er,oklch(var(--er)/var(--tw-text-opacity)));
}

/*-- Common ----------------------------------------------------------------------*/

.sf-only-desktop {
  display: none;
}

@media (min-width: 1024px) {
  .sf-only-desktop {
    display: block;
  }

  .sf-only-mobile {
    display: none;
  }
}

:root .sf-theme-controller-dark {
  font-weight: 900;
}

@media (prefers-color-scheme: dark) {
  :root .sf-theme-controller-dark {
    font-weight: 900;
  }
}

[data-theme=light] .sf-theme-controller-dark {
  font-weight: 900;
}

:root:has(input.theme-controller[value=light]:checked) .sf-theme-controller-dark {
  font-weight: 900;
}

[data-theme=dark] .sf-theme-controller-dark {
  font-weight: 900;
}

:root:has(input.theme-controller[value=dark]:checked) .sf-theme-controller-dark {
  font-weight: 900;
}

.sf-theme-controller-dark {
  display: inline-flex;
  height: 3rem;
  min-height: 3rem;
  flex-shrink: 0;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  border-radius: var(--rounded-btn, 0.5rem);
  border-color: transparent;
  border-color: oklch(var(--btn-color, var(--b2)) / var(--tw-border-opacity));
  padding-left: 1rem;
  padding-right: 1rem;
  text-align: center;
  font-size: 0.875rem;
  line-height: 1em;
  gap: 0.5rem;
  font-weight: 600;
  text-decoration-line: none;
  transition-duration: 200ms;
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
  border-width: var(--border-btn, 1px);
  transition-property: color, background-color, border-color, opacity, box-shadow, transform;
  --tw-text-opacity: 1;
  color: var(--fallback-bc,oklch(var(--bc)/var(--tw-text-opacity)));
  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  outline-color: var(--fallback-bc,oklch(var(--bc)/1));
  background-color: oklch(var(--btn-color, var(--b2)) / var(--tw-bg-opacity));
  --tw-bg-opacity: 1;
  --tw-border-opacity: 1;
}

.sf-theme-controller-dark[disabled],.sf-theme-controller-dark:disabled {
  pointer-events: none;
}

.sf-theme-controller-dark {
  height: 3rem;
  width: 3rem;
  border-radius: 9999px;
  padding: 0px;
}

:where(.sf-theme-controller-dark:is(input[type="checkbox"])),
:where(.sf-theme-controller-dark:is(input[type="radio"])) {
  width: auto;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}

.sf-theme-controller-dark:is(input[type="checkbox"]):after,.sf-theme-controller-dark:is(input[type="radio"]):after {
  --tw-content: attr(aria-label);
  content: var(--tw-content);
}

@media (hover: hover) {
  .sf-theme-controller-dark:hover {
    --tw-border-opacity: 1;
    border-color: var(--fallback-b3,oklch(var(--b3)/var(--tw-border-opacity)));
    --tw-bg-opacity: 1;
    background-color: var(--fallback-b3,oklch(var(--b3)/var(--tw-bg-opacity)));
  }

  @supports (color: color-mix(in oklab, black, black)) {
    .sf-theme-controller-dark:hover {
      background-color: color-mix(
            in oklab,
            oklch(var(--btn-color, var(--b2)) / var(--tw-bg-opacity, 1)) 90%,
            black
          );
      border-color: color-mix(
            in oklab,
            oklch(var(--btn-color, var(--b2)) / var(--tw-border-opacity, 1)) 90%,
            black
          );
    }
  }

  @supports not (color: oklch(0% 0 0)) {
    .sf-theme-controller-dark:hover {
      background-color: var(--btn-color, var(--fallback-b2));
      border-color: var(--btn-color, var(--fallback-b2));
    }
  }

  .sf-theme-controller-dark:hover {
    --tw-border-opacity: 1;
    border-color: var(--fallback-b3,oklch(var(--b3)/var(--tw-border-opacity)));
    --tw-bg-opacity: 1;
    background-color: var(--fallback-b3,oklch(var(--b3)/var(--tw-bg-opacity)));
  }

  @supports (color: color-mix(in oklab, black, black)) {
    .sf-theme-controller-dark:hover {
      background-color: color-mix(
            in oklab,
            oklch(var(--btn-color, var(--b2)) / var(--tw-bg-opacity, 1)) 90%,
            black
          );
      border-color: color-mix(
            in oklab,
            oklch(var(--btn-color, var(--b2)) / var(--tw-border-opacity, 1)) 90%,
            black
          );
    }
  }

  @supports not (color: oklch(0% 0 0)) {
    .sf-theme-controller-dark:hover {
      background-color: var(--btn-color, var(--fallback-b2));
      border-color: var(--btn-color, var(--fallback-b2));
    }
  }

  .sf-theme-controller-dark:hover {
    --tw-border-opacity: 1;
    border-color: var(--fallback-b3,oklch(var(--b3)/var(--tw-border-opacity)));
    --tw-bg-opacity: 1;
    background-color: var(--fallback-b3,oklch(var(--b3)/var(--tw-bg-opacity)));
  }

  @supports (color: color-mix(in oklab, black, black)) {
    .sf-theme-controller-dark:hover {
      background-color: color-mix(
            in oklab,
            oklch(var(--btn-color, var(--b2)) / var(--tw-bg-opacity, 1)) 90%,
            black
          );
      border-color: color-mix(
            in oklab,
            oklch(var(--btn-color, var(--b2)) / var(--tw-border-opacity, 1)) 90%,
            black
          );
    }
  }

  @supports not (color: oklch(0% 0 0)) {
    .sf-theme-controller-dark:hover {
      background-color: var(--btn-color, var(--fallback-b2));
      border-color: var(--btn-color, var(--fallback-b2));
    }
  }

  .sf-theme-controller-dark.glass:hover {
    --glass-opacity: 25%;
    --glass-border-opacity: 15%;
  }

  .sf-theme-controller-dark:hover {
    border-color: transparent;
  }

  @supports (color: oklch(0% 0 0)) {
    .sf-theme-controller-dark:hover {
      background-color: var(--fallback-bc,oklch(var(--bc)/0.2));
    }
  }

  .sf-theme-controller-dark:hover {
    border-color: transparent;
  }

  @supports (color: oklch(0% 0 0)) {
    .sf-theme-controller-dark:hover {
      background-color: var(--fallback-bc,oklch(var(--bc)/0.2));
    }
  }

  .sf-theme-controller-dark[disabled]:hover,.sf-theme-controller-dark:disabled:hover {
    --tw-border-opacity: 0;
    background-color: var(--fallback-n,oklch(var(--n)/var(--tw-bg-opacity)));
    --tw-bg-opacity: 0.2;
    color: var(--fallback-bc,oklch(var(--bc)/var(--tw-text-opacity)));
    --tw-text-opacity: 0.2;
  }

  @supports (color: color-mix(in oklab, black, black)) {
    .sf-theme-controller-dark:is(input[type="checkbox"]:checked):hover,.sf-theme-controller-dark:is(input[type="radio"]:checked):hover {
      background-color: color-mix(in oklab, var(--fallback-p,oklch(var(--p)/1)) 90%, black);
      border-color: color-mix(in oklab, var(--fallback-p,oklch(var(--p)/1)) 90%, black);
    }
  }
}

@media (prefers-reduced-motion: no-preference) {
  .sf-theme-controller-dark {
    animation: button-pop var(--animation-btn, 0.25s) ease-out;
  }
}

.sf-theme-controller-dark:active:hover,.sf-theme-controller-dark:active:focus {
  animation: button-pop 0s ease-out;
  transform: scale(var(--btn-focus-scale, 0.97));
}

@supports not (color: oklch(0% 0 0)) {
  .sf-theme-controller-dark {
    background-color: var(--btn-color, var(--fallback-b2));
    border-color: var(--btn-color, var(--fallback-b2));
  }
}

.sf-theme-controller-dark:focus-visible {
  outline-style: solid;
  outline-width: 2px;
  outline-offset: 2px;
}

.sf-theme-controller-dark.glass {
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  outline-color: currentColor;
}

.sf-theme-controller-dark.glass.btn-active {
  --glass-opacity: 25%;
  --glass-border-opacity: 15%;
}

.sf-theme-controller-dark {
  border-width: 1px;
  border-color: transparent;
  background-color: transparent;
  color: currentColor;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  outline-color: currentColor;
}

.sf-theme-controller-dark.btn-active {
  border-color: transparent;
  background-color: var(--fallback-bc,oklch(var(--bc)/0.2));
}

.sf-theme-controller-dark.btn-disabled,.sf-theme-controller-dark[disabled],.sf-theme-controller-dark:disabled {
  --tw-border-opacity: 0;
  background-color: var(--fallback-n,oklch(var(--n)/var(--tw-bg-opacity)));
  --tw-bg-opacity: 0.2;
  color: var(--fallback-bc,oklch(var(--bc)/var(--tw-text-opacity)));
  --tw-text-opacity: 0.2;
}

.sf-theme-controller-dark:is(input[type="checkbox"]:checked),.sf-theme-controller-dark:is(input[type="radio"]:checked) {
  --tw-border-opacity: 1;
  border-color: var(--fallback-p,oklch(var(--p)/var(--tw-border-opacity)));
  --tw-bg-opacity: 1;
  background-color: var(--fallback-p,oklch(var(--p)/var(--tw-bg-opacity)));
  --tw-text-opacity: 1;
  color: var(--fallback-pc,oklch(var(--pc)/var(--tw-text-opacity)));
}

.sf-theme-controller-dark:is(input[type="checkbox"]:checked):focus-visible,.sf-theme-controller-dark:is(input[type="radio"]:checked):focus-visible {
  outline-color: var(--fallback-p,oklch(var(--p)/1));
}

.join > :where(*:not(:first-child)):is(.sf-theme-controller-dark) {
  margin-inline-start: calc(var(--border-btn) * -1);
}

.sf-theme-controller-dark:where(.btn-xs) {
  height: 1.5rem;
  width: 1.5rem;
  border-radius: 9999px;
  padding: 0px;
}

.sf-theme-controller-dark:where(.btn-sm) {
  height: 2rem;
  width: 2rem;
  border-radius: 9999px;
  padding: 0px;
}

.sf-theme-controller-dark:where(.btn-md) {
  height: 3rem;
  width: 3rem;
  border-radius: 9999px;
  padding: 0px;
}

.sf-theme-controller-dark:where(.btn-lg) {
  height: 4rem;
  width: 4rem;
  border-radius: 9999px;
  padding: 0px;
}

.join.join-vertical > :where(*:not(:first-child)):is(.sf-theme-controller-dark) {
  margin-top: calc(var(--border-btn) * -1);
}

.join.join-horizontal > :where(*:not(:first-child)):is(.sf-theme-controller-dark) {
  margin-inline-start: calc(var(--border-btn) * -1);
  margin-top: 0px;
}

.sf-theme-controller-dark.sf-hidden {
  display: none;
}

:root .sf-theme-controller-light {
  font-weight: 900;
}

@media (prefers-color-scheme: dark) {
  :root .sf-theme-controller-light {
    font-weight: 900;
  }
}

[data-theme=light] .sf-theme-controller-light {
  font-weight: 900;
}

:root:has(input.theme-controller[value=light]:checked) .sf-theme-controller-light {
  font-weight: 900;
}

[data-theme=dark] .sf-theme-controller-light {
  font-weight: 900;
}

:root:has(input.theme-controller[value=dark]:checked) .sf-theme-controller-light {
  font-weight: 900;
}

.sf-theme-controller-light {
  display: inline-flex;
  height: 3rem;
  min-height: 3rem;
  flex-shrink: 0;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  border-radius: var(--rounded-btn, 0.5rem);
  border-color: transparent;
  border-color: oklch(var(--btn-color, var(--b2)) / var(--tw-border-opacity));
  padding-left: 1rem;
  padding-right: 1rem;
  text-align: center;
  font-size: 0.875rem;
  line-height: 1em;
  gap: 0.5rem;
  font-weight: 600;
  text-decoration-line: none;
  transition-duration: 200ms;
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
  border-width: var(--border-btn, 1px);
  transition-property: color, background-color, border-color, opacity, box-shadow, transform;
  --tw-text-opacity: 1;
  color: var(--fallback-bc,oklch(var(--bc)/var(--tw-text-opacity)));
  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  outline-color: var(--fallback-bc,oklch(var(--bc)/1));
  background-color: oklch(var(--btn-color, var(--b2)) / var(--tw-bg-opacity));
  --tw-bg-opacity: 1;
  --tw-border-opacity: 1;
}

.sf-theme-controller-light[disabled],.sf-theme-controller-light:disabled {
  pointer-events: none;
}

.sf-theme-controller-light {
  height: 3rem;
  width: 3rem;
  border-radius: 9999px;
  padding: 0px;
}

:where(.sf-theme-controller-light:is(input[type="checkbox"])),
:where(.sf-theme-controller-light:is(input[type="radio"])) {
  width: auto;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}

.sf-theme-controller-light:is(input[type="checkbox"]):after,.sf-theme-controller-light:is(input[type="radio"]):after {
  --tw-content: attr(aria-label);
  content: var(--tw-content);
}

@media (hover: hover) {
  .sf-theme-controller-light:hover {
    --tw-border-opacity: 1;
    border-color: var(--fallback-b3,oklch(var(--b3)/var(--tw-border-opacity)));
    --tw-bg-opacity: 1;
    background-color: var(--fallback-b3,oklch(var(--b3)/var(--tw-bg-opacity)));
  }

  @supports (color: color-mix(in oklab, black, black)) {
    .sf-theme-controller-light:hover {
      background-color: color-mix(
            in oklab,
            oklch(var(--btn-color, var(--b2)) / var(--tw-bg-opacity, 1)) 90%,
            black
          );
      border-color: color-mix(
            in oklab,
            oklch(var(--btn-color, var(--b2)) / var(--tw-border-opacity, 1)) 90%,
            black
          );
    }
  }

  @supports not (color: oklch(0% 0 0)) {
    .sf-theme-controller-light:hover {
      background-color: var(--btn-color, var(--fallback-b2));
      border-color: var(--btn-color, var(--fallback-b2));
    }
  }

  .sf-theme-controller-light:hover {
    --tw-border-opacity: 1;
    border-color: var(--fallback-b3,oklch(var(--b3)/var(--tw-border-opacity)));
    --tw-bg-opacity: 1;
    background-color: var(--fallback-b3,oklch(var(--b3)/var(--tw-bg-opacity)));
  }

  @supports (color: color-mix(in oklab, black, black)) {
    .sf-theme-controller-light:hover {
      background-color: color-mix(
            in oklab,
            oklch(var(--btn-color, var(--b2)) / var(--tw-bg-opacity, 1)) 90%,
            black
          );
      border-color: color-mix(
            in oklab,
            oklch(var(--btn-color, var(--b2)) / var(--tw-border-opacity, 1)) 90%,
            black
          );
    }
  }

  @supports not (color: oklch(0% 0 0)) {
    .sf-theme-controller-light:hover {
      background-color: var(--btn-color, var(--fallback-b2));
      border-color: var(--btn-color, var(--fallback-b2));
    }
  }

  .sf-theme-controller-light:hover {
    --tw-border-opacity: 1;
    border-color: var(--fallback-b3,oklch(var(--b3)/var(--tw-border-opacity)));
    --tw-bg-opacity: 1;
    background-color: var(--fallback-b3,oklch(var(--b3)/var(--tw-bg-opacity)));
  }

  @supports (color: color-mix(in oklab, black, black)) {
    .sf-theme-controller-light:hover {
      background-color: color-mix(
            in oklab,
            oklch(var(--btn-color, var(--b2)) / var(--tw-bg-opacity, 1)) 90%,
            black
          );
      border-color: color-mix(
            in oklab,
            oklch(var(--btn-color, var(--b2)) / var(--tw-border-opacity, 1)) 90%,
            black
          );
    }
  }

  @supports not (color: oklch(0% 0 0)) {
    .sf-theme-controller-light:hover {
      background-color: var(--btn-color, var(--fallback-b2));
      border-color: var(--btn-color, var(--fallback-b2));
    }
  }

  .sf-theme-controller-light.glass:hover {
    --glass-opacity: 25%;
    --glass-border-opacity: 15%;
  }

  .sf-theme-controller-light:hover {
    border-color: transparent;
  }

  @supports (color: oklch(0% 0 0)) {
    .sf-theme-controller-light:hover {
      background-color: var(--fallback-bc,oklch(var(--bc)/0.2));
    }
  }

  .sf-theme-controller-light:hover {
    border-color: transparent;
  }

  @supports (color: oklch(0% 0 0)) {
    .sf-theme-controller-light:hover {
      background-color: var(--fallback-bc,oklch(var(--bc)/0.2));
    }
  }

  .sf-theme-controller-light[disabled]:hover,.sf-theme-controller-light:disabled:hover {
    --tw-border-opacity: 0;
    background-color: var(--fallback-n,oklch(var(--n)/var(--tw-bg-opacity)));
    --tw-bg-opacity: 0.2;
    color: var(--fallback-bc,oklch(var(--bc)/var(--tw-text-opacity)));
    --tw-text-opacity: 0.2;
  }

  @supports (color: color-mix(in oklab, black, black)) {
    .sf-theme-controller-light:is(input[type="checkbox"]:checked):hover,.sf-theme-controller-light:is(input[type="radio"]:checked):hover {
      background-color: color-mix(in oklab, var(--fallback-p,oklch(var(--p)/1)) 90%, black);
      border-color: color-mix(in oklab, var(--fallback-p,oklch(var(--p)/1)) 90%, black);
    }
  }
}

@media (prefers-reduced-motion: no-preference) {
  .sf-theme-controller-light {
    animation: button-pop var(--animation-btn, 0.25s) ease-out;
  }
}

.sf-theme-controller-light:active:hover,.sf-theme-controller-light:active:focus {
  animation: button-pop 0s ease-out;
  transform: scale(var(--btn-focus-scale, 0.97));
}

@supports not (color: oklch(0% 0 0)) {
  .sf-theme-controller-light {
    background-color: var(--btn-color, var(--fallback-b2));
    border-color: var(--btn-color, var(--fallback-b2));
  }
}

.sf-theme-controller-light:focus-visible {
  outline-style: solid;
  outline-width: 2px;
  outline-offset: 2px;
}

.sf-theme-controller-light.glass {
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  outline-color: currentColor;
}

.sf-theme-controller-light.glass.btn-active {
  --glass-opacity: 25%;
  --glass-border-opacity: 15%;
}

.sf-theme-controller-light {
  border-width: 1px;
  border-color: transparent;
  background-color: transparent;
  color: currentColor;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  outline-color: currentColor;
}

.sf-theme-controller-light.btn-active {
  border-color: transparent;
  background-color: var(--fallback-bc,oklch(var(--bc)/0.2));
}

.sf-theme-controller-light.btn-disabled,.sf-theme-controller-light[disabled],.sf-theme-controller-light:disabled {
  --tw-border-opacity: 0;
  background-color: var(--fallback-n,oklch(var(--n)/var(--tw-bg-opacity)));
  --tw-bg-opacity: 0.2;
  color: var(--fallback-bc,oklch(var(--bc)/var(--tw-text-opacity)));
  --tw-text-opacity: 0.2;
}

.sf-theme-controller-light:is(input[type="checkbox"]:checked),.sf-theme-controller-light:is(input[type="radio"]:checked) {
  --tw-border-opacity: 1;
  border-color: var(--fallback-p,oklch(var(--p)/var(--tw-border-opacity)));
  --tw-bg-opacity: 1;
  background-color: var(--fallback-p,oklch(var(--p)/var(--tw-bg-opacity)));
  --tw-text-opacity: 1;
  color: var(--fallback-pc,oklch(var(--pc)/var(--tw-text-opacity)));
}

.sf-theme-controller-light:is(input[type="checkbox"]:checked):focus-visible,.sf-theme-controller-light:is(input[type="radio"]:checked):focus-visible {
  outline-color: var(--fallback-p,oklch(var(--p)/1));
}

.join > :where(*:not(:first-child)):is(.sf-theme-controller-light) {
  margin-inline-start: calc(var(--border-btn) * -1);
}

.sf-theme-controller-light:where(.btn-xs) {
  height: 1.5rem;
  width: 1.5rem;
  border-radius: 9999px;
  padding: 0px;
}

.sf-theme-controller-light:where(.btn-sm) {
  height: 2rem;
  width: 2rem;
  border-radius: 9999px;
  padding: 0px;
}

.sf-theme-controller-light:where(.btn-md) {
  height: 3rem;
  width: 3rem;
  border-radius: 9999px;
  padding: 0px;
}

.sf-theme-controller-light:where(.btn-lg) {
  height: 4rem;
  width: 4rem;
  border-radius: 9999px;
  padding: 0px;
}

.join.join-vertical > :where(*:not(:first-child)):is(.sf-theme-controller-light) {
  margin-top: calc(var(--border-btn) * -1);
}

.join.join-horizontal > :where(*:not(:first-child)):is(.sf-theme-controller-light) {
  margin-inline-start: calc(var(--border-btn) * -1);
  margin-top: 0px;
}

.sf-theme-controller-light.sf-hidden {
  display: none;
}

.sf-svg-5 {
  height: 1.25rem;
  width: 1.25rem;
  fill: currentColor;
}

.sf-svg-6 {
  height: 1.5rem;
  width: 1.5rem;
  fill: currentColor;
}

.sf-svg-10 {
  height: 2.5rem;
  width: 2.5rem;
  fill: currentColor;
}

:root .sf-btn-primary {
  font-weight: 900;
}

@media (prefers-color-scheme: dark) {
  :root .sf-btn-primary {
    font-weight: 900;
  }
}

[data-theme=light] .sf-btn-primary {
  font-weight: 900;
}

:root:has(input.theme-controller[value=light]:checked) .sf-btn-primary {
  font-weight: 900;
}

[data-theme=dark] .sf-btn-primary {
  font-weight: 900;
}

:root:has(input.theme-controller[value=dark]:checked) .sf-btn-primary {
  font-weight: 900;
}

.sf-btn-primary {
  display: inline-flex;
  height: 3rem;
  min-height: 3rem;
  flex-shrink: 0;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  border-radius: var(--rounded-btn, 0.5rem);
  border-color: transparent;
  border-color: oklch(var(--btn-color, var(--b2)) / var(--tw-border-opacity));
  padding-left: 1rem;
  padding-right: 1rem;
  text-align: center;
  font-size: 0.875rem;
  line-height: 1em;
  gap: 0.5rem;
  font-weight: 600;
  text-decoration-line: none;
  transition-duration: 200ms;
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
  border-width: var(--border-btn, 1px);
  transition-property: color, background-color, border-color, opacity, box-shadow, transform;
  --tw-text-opacity: 1;
  color: var(--fallback-bc,oklch(var(--bc)/var(--tw-text-opacity)));
  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  outline-color: var(--fallback-bc,oklch(var(--bc)/1));
  background-color: oklch(var(--btn-color, var(--b2)) / var(--tw-bg-opacity));
  --tw-bg-opacity: 1;
  --tw-border-opacity: 1;
}

.sf-btn-primary[disabled],.sf-btn-primary:disabled {
  pointer-events: none;
}

:where(.sf-btn-primary:is(input[type="checkbox"])),
:where(.sf-btn-primary:is(input[type="radio"])) {
  width: auto;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}

.sf-btn-primary:is(input[type="checkbox"]):after,.sf-btn-primary:is(input[type="radio"]):after {
  --tw-content: attr(aria-label);
  content: var(--tw-content);
}

@media (hover: hover) {
  .sf-btn-primary:hover {
    --tw-border-opacity: 1;
    border-color: var(--fallback-b3,oklch(var(--b3)/var(--tw-border-opacity)));
    --tw-bg-opacity: 1;
    background-color: var(--fallback-b3,oklch(var(--b3)/var(--tw-bg-opacity)));
  }

  @supports (color: color-mix(in oklab, black, black)) {
    .sf-btn-primary:hover {
      background-color: color-mix(
            in oklab,
            oklch(var(--btn-color, var(--b2)) / var(--tw-bg-opacity, 1)) 90%,
            black
          );
      border-color: color-mix(
            in oklab,
            oklch(var(--btn-color, var(--b2)) / var(--tw-border-opacity, 1)) 90%,
            black
          );
    }
  }

  @supports not (color: oklch(0% 0 0)) {
    .sf-btn-primary:hover {
      background-color: var(--btn-color, var(--fallback-b2));
      border-color: var(--btn-color, var(--fallback-b2));
    }
  }

  .sf-btn-primary:hover {
    --tw-border-opacity: 1;
    border-color: var(--fallback-b3,oklch(var(--b3)/var(--tw-border-opacity)));
    --tw-bg-opacity: 1;
    background-color: var(--fallback-b3,oklch(var(--b3)/var(--tw-bg-opacity)));
  }

  @supports (color: color-mix(in oklab, black, black)) {
    .sf-btn-primary:hover {
      background-color: color-mix(
            in oklab,
            oklch(var(--btn-color, var(--b2)) / var(--tw-bg-opacity, 1)) 90%,
            black
          );
      border-color: color-mix(
            in oklab,
            oklch(var(--btn-color, var(--b2)) / var(--tw-border-opacity, 1)) 90%,
            black
          );
    }
  }

  @supports not (color: oklch(0% 0 0)) {
    .sf-btn-primary:hover {
      background-color: var(--btn-color, var(--fallback-b2));
      border-color: var(--btn-color, var(--fallback-b2));
    }
  }

  .sf-btn-primary:hover {
    --tw-border-opacity: 1;
    border-color: var(--fallback-b3,oklch(var(--b3)/var(--tw-border-opacity)));
    --tw-bg-opacity: 1;
    background-color: var(--fallback-b3,oklch(var(--b3)/var(--tw-bg-opacity)));
  }

  @supports (color: color-mix(in oklab, black, black)) {
    .sf-btn-primary:hover {
      background-color: color-mix(
            in oklab,
            oklch(var(--btn-color, var(--b2)) / var(--tw-bg-opacity, 1)) 90%,
            black
          );
      border-color: color-mix(
            in oklab,
            oklch(var(--btn-color, var(--b2)) / var(--tw-border-opacity, 1)) 90%,
            black
          );
    }
  }

  @supports not (color: oklch(0% 0 0)) {
    .sf-btn-primary:hover {
      background-color: var(--btn-color, var(--fallback-b2));
      border-color: var(--btn-color, var(--fallback-b2));
    }
  }

  .sf-btn-primary.glass:hover {
    --glass-opacity: 25%;
    --glass-border-opacity: 15%;
  }

  .btn-outline.sf-btn-primary:hover {
    --tw-text-opacity: 1;
    color: var(--fallback-pc,oklch(var(--pc)/var(--tw-text-opacity)));
  }

  @supports (color: color-mix(in oklab, black, black)) {
    .btn-outline.sf-btn-primary:hover {
      background-color: color-mix(in oklab, var(--fallback-p,oklch(var(--p)/1)) 90%, black);
      border-color: color-mix(in oklab, var(--fallback-p,oklch(var(--p)/1)) 90%, black);
    }
  }

  .btn-outline.sf-btn-primary:hover {
    --tw-text-opacity: 1;
    color: var(--fallback-pc,oklch(var(--pc)/var(--tw-text-opacity)));
  }

  @supports (color: color-mix(in oklab, black, black)) {
    .btn-outline.sf-btn-primary:hover {
      background-color: color-mix(in oklab, var(--fallback-p,oklch(var(--p)/1)) 90%, black);
      border-color: color-mix(in oklab, var(--fallback-p,oklch(var(--p)/1)) 90%, black);
    }
  }

  .sf-btn-primary[disabled]:hover,.sf-btn-primary:disabled:hover {
    --tw-border-opacity: 0;
    background-color: var(--fallback-n,oklch(var(--n)/var(--tw-bg-opacity)));
    --tw-bg-opacity: 0.2;
    color: var(--fallback-bc,oklch(var(--bc)/var(--tw-text-opacity)));
    --tw-text-opacity: 0.2;
  }

  @supports (color: color-mix(in oklab, black, black)) {
    .sf-btn-primary:is(input[type="checkbox"]:checked):hover,.sf-btn-primary:is(input[type="radio"]:checked):hover {
      background-color: color-mix(in oklab, var(--fallback-p,oklch(var(--p)/1)) 90%, black);
      border-color: color-mix(in oklab, var(--fallback-p,oklch(var(--p)/1)) 90%, black);
    }
  }
}

@media (prefers-reduced-motion: no-preference) {
  .sf-btn-primary {
    animation: button-pop var(--animation-btn, 0.25s) ease-out;
  }
}

.sf-btn-primary:active:hover,.sf-btn-primary:active:focus {
  animation: button-pop 0s ease-out;
  transform: scale(var(--btn-focus-scale, 0.97));
}

@supports not (color: oklch(0% 0 0)) {
  .sf-btn-primary {
    background-color: var(--btn-color, var(--fallback-b2));
    border-color: var(--btn-color, var(--fallback-b2));
    --btn-color: var(--fallback-p);
  }
}

@supports (color: color-mix(in oklab, black, black)) {
  .btn-outline.sf-btn-primary.btn-active {
    background-color: color-mix(in oklab, var(--fallback-p,oklch(var(--p)/1)) 90%, black);
    border-color: color-mix(in oklab, var(--fallback-p,oklch(var(--p)/1)) 90%, black);
  }
}

.sf-btn-primary:focus-visible {
  outline-style: solid;
  outline-width: 2px;
  outline-offset: 2px;
}

.sf-btn-primary {
  --tw-text-opacity: 1;
  color: var(--fallback-pc,oklch(var(--pc)/var(--tw-text-opacity)));
  outline-color: var(--fallback-p,oklch(var(--p)/1));
}

@supports (color: oklch(0% 0 0)) {
  .sf-btn-primary {
    --btn-color: var(--p);
  }
}

.sf-btn-primary.glass {
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  outline-color: currentColor;
}

.sf-btn-primary.glass.btn-active {
  --glass-opacity: 25%;
  --glass-border-opacity: 15%;
}

.btn-outline.sf-btn-primary {
  --tw-text-opacity: 1;
  color: var(--fallback-p,oklch(var(--p)/var(--tw-text-opacity)));
}

.btn-outline.sf-btn-primary.btn-active {
  --tw-text-opacity: 1;
  color: var(--fallback-pc,oklch(var(--pc)/var(--tw-text-opacity)));
}

.sf-btn-primary.btn-disabled,.sf-btn-primary[disabled],.sf-btn-primary:disabled {
  --tw-border-opacity: 0;
  background-color: var(--fallback-n,oklch(var(--n)/var(--tw-bg-opacity)));
  --tw-bg-opacity: 0.2;
  color: var(--fallback-bc,oklch(var(--bc)/var(--tw-text-opacity)));
  --tw-text-opacity: 0.2;
}

.sf-btn-primary:is(input[type="checkbox"]:checked),.sf-btn-primary:is(input[type="radio"]:checked) {
  --tw-border-opacity: 1;
  border-color: var(--fallback-p,oklch(var(--p)/var(--tw-border-opacity)));
  --tw-bg-opacity: 1;
  background-color: var(--fallback-p,oklch(var(--p)/var(--tw-bg-opacity)));
  --tw-text-opacity: 1;
  color: var(--fallback-pc,oklch(var(--pc)/var(--tw-text-opacity)));
}

.sf-btn-primary:is(input[type="checkbox"]:checked):focus-visible,.sf-btn-primary:is(input[type="radio"]:checked):focus-visible {
  outline-color: var(--fallback-p,oklch(var(--p)/1));
}

.join > :where(*:not(:first-child)):is(.sf-btn-primary) {
  margin-inline-start: calc(var(--border-btn) * -1);
}

.join.join-vertical > :where(*:not(:first-child)):is(.sf-btn-primary) {
  margin-top: calc(var(--border-btn) * -1);
}

.join.join-horizontal > :where(*:not(:first-child)):is(.sf-btn-primary) {
  margin-inline-start: calc(var(--border-btn) * -1);
  margin-top: 0px;
}

.sf-text-error {
  --tw-text-opacity: 1;
  color: var(--fallback-er,oklch(var(--er)/var(--tw-text-opacity)));
}

.sf-input-error {
  --tw-border-opacity: 1;
  border-color: var(--fallback-er,oklch(var(--er)/var(--tw-border-opacity)));
}

.sf-input-error:focus,.sf-input-error:focus-within {
  --tw-border-opacity: 1;
  border-color: var(--fallback-er,oklch(var(--er)/var(--tw-border-opacity)));
  outline-color: var(--fallback-er,oklch(var(--er)/1));
}