/* [project]/src/studio/components/studio-auth-sheet.css [app-client] (css) */
.studio-auth-theme {
  --mos-page: #f5f5f7;
  --mos-panel: #f5f5f7;
  --mos-plate: #ececf0;
  --mos-plate-strong: #d4d4da;
  --mos-bg: #ececf0;
  --mos-surface: #f0f0f3;
  --mos-raised: #d4d4da;
  --mos-text: #1c1c1e;
  --mos-text-soft: #4a4a4e;
  --mos-text-bright: #1c1c1e;
  --mos-muted: #636366;
  --mos-faint: #8e8e93;
  --mos-hover: #e6e6ec;
  --mos-active: #c8c8d0;
  --mos-border: #0000001c;
  --mos-border-soft: #00000013;
  --color-cursor-border-soft: #00000013;
  --color-cursor-border: #0000001c;
  --color-cursor-text: #1c1c1e;
  --color-cursor-muted: #636366;
  --color-cursor-bg: #f5f5f7;
  color: #1c1c1e;
  --lightningcss-light: initial;
  --lightningcss-dark: ;
  color-scheme: light;
  background: #f5f5f7;
}

@media (max-width: 979px) {
  main.studio-auth-theme {
    padding-bottom: max(2rem, var(--studio-auth-keyboard-inset, 0px));
    overflow: auto;
  }

  main.studio-auth-theme[data-keyboard-open="1"] {
    align-items: flex-end;
  }
}

.studio-auth-card {
  box-sizing: border-box;
  border: 1px solid color-mix(in srgb, var(--color-cursor-border-soft) 52%, transparent);
  background: linear-gradient(180deg, #ffffff61, #ffffff0f),
    color-mix(in srgb, var(--mos-plate) 62%, transparent);
  -webkit-backdrop-filter: blur(24px) saturate(1.12);
  backdrop-filter: blur(24px) saturate(1.12);
  border-radius: 28px;
  flex-direction: column;
  width: 100%;
  max-width: 340px;
  max-height: calc(100dvh - 11rem);
  padding: 28px 24px 20px;
  display: flex;
  overflow: hidden;
  box-shadow: inset 0 1px #ffffff7a, 0 1px 2px #0f172a0a, 0 18px 42px #0f172a17;
}

.studio-auth-card-head {
  flex: none;
}

@media (min-width: 768px) {
  .studio-auth-card, .ysbf-stage.is-auth .studio-auth-card, .ysbf-auth-slot.studio-auth-theme {
    max-width: 372px;
  }

  .studio-auth-card {
    max-height: calc(100dvh - 10.5rem);
  }
}

.studio-auth-title {
  width: 100%;
  color: var(--mos-text);
  letter-spacing: -.03em;
  text-align: center;
  margin: 0;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.15;
}

.studio-auth-card-body {
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  flex: auto;
  min-height: 0;
  margin-inline: -3px;
  padding-inline: 3px;
  overflow: visible auto;
}

.studio-auth-form {
  text-align: left;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  width: 100%;
  margin-top: 1.35rem;
  display: grid;
  overflow: visible;
}

.studio-auth-mode-tabs.studio-admin-head-tabs {
  border: 1px solid var(--color-cursor-border-soft, var(--mos-border-soft));
  background: var(--mos-page, var(--color-cursor-bg));
  border-radius: 999px;
  align-items: center;
  gap: 2px;
  width: 100%;
  height: 48px;
  min-height: 48px;
  margin: 0;
  padding: 3px;
  display: flex;
  overflow: hidden;
}

.studio-auth-mode-tabs .studio-admin-head-tab {
  min-width: 0;
  height: 100%;
  min-height: 0;
  color: var(--color-cursor-muted, var(--mos-muted));
  letter-spacing: -.01em;
  background: none;
  border: 0;
  border-radius: 999px;
  flex: 1 1 0;
  gap: 8px;
  padding: 0 10px;
  font-size: .875rem;
  font-weight: 650;
}

.studio-auth-mode-tabs .studio-admin-head-tab:hover:not(:disabled):not(.is-active) {
  color: var(--color-cursor-text-bright, var(--mos-text));
}

.studio-auth-mode-tabs .studio-admin-head-tab.is-active {
  background: color-mix(in srgb,
    var(--cursor-accent, var(--mos-accent, #25da67)) 18%,
    var(--mos-page, var(--color-cursor-bg)));
  color: var(--color-cursor-text-bright, var(--mos-text));
}

.studio-auth-mode-tabs .studio-admin-head-tab:disabled {
  cursor: not-allowed;
  opacity: .55;
}

.studio-auth-mode-tabs .studio-admin-head-tab svg {
  flex: none;
  width: 16px;
  height: 16px;
}

.studio-auth-form > label, .studio-auth-form > .studio-auth-field, .studio-auth-form > .grid {
  width: 100%;
  min-width: 0;
  max-width: 100%;
}

.studio-auth-form > label > .studio-auth-field {
  width: 100%;
}

.studio-auth-form .cursor-select-menu.is-field .cursor-select-trigger {
  border: 1px solid color-mix(in srgb, var(--color-cursor-border-soft) 86%, transparent);
  color: #1c1c1e;
  white-space: nowrap;
  background: #fff;
  border-radius: 999px;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: center;
  gap: 10px;
  height: 48px;
  min-height: 48px;
  padding: 0 18px;
  font-size: 1.125rem;
  font-weight: 500;
  line-height: 1;
  display: flex;
  position: relative;
  box-shadow: 0 1px 2px #0f172a08;
}

.studio-auth-form .cursor-select-menu.is-field .cursor-select-leading {
  color: #1c1c1e6b;
  flex: none;
  justify-content: center;
  align-items: center;
  width: 14px;
  height: 14px;
  display: inline-flex;
}

.studio-auth-form .cursor-select-menu.is-field .cursor-select-label {
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: left;
  flex: auto;
  width: auto;
  min-width: 0;
  max-width: none;
  height: auto;
  line-height: 1;
  display: block;
  overflow: hidden;
}

.studio-auth-form .cursor-select-menu.is-field .cursor-select-detail, .studio-auth-form .cursor-dropdown-item-detail {
  color: #1c1c1e6b;
}

.studio-auth-form .studio-billing-country-select .studio-settings-field-hint {
  color: #636366;
  padding: 0 18px;
  font-size: .75rem;
  font-weight: 500;
}

.studio-auth-form .cursor-select-menu.is-field .cursor-select-trigger.is-placeholder .cursor-select-label {
  color: #1c1c1e6b;
  font-weight: 450;
}

.studio-auth-form .cursor-select-menu.is-field .cursor-select-arrow {
  flex: none;
  position: static;
  top: auto;
  right: auto;
  transform: none;
}

.studio-auth-form .cursor-select-menu.is-field.is-open .cursor-select-arrow {
  transform: rotate(180deg);
}

.studio-auth-form .cursor-select-menu.is-field .cursor-select-trigger:hover, .studio-auth-form .cursor-select-menu.is-field.is-open .cursor-select-trigger {
  background: #fff;
  border-color: #1c1c1e47;
  box-shadow: 0 0 0 2px #1c1c1e1f;
}

.studio-auth-form .cursor-select-menu .cursor-dropdown, .studio-auth-form .cursor-select-menu .cursor-dropdown.is-end, .studio-auth-form .cursor-select-menu .cursor-dropdown.is-start {
  width: 100%;
  min-width: 100%;
  max-width: 100%;
  left: 0;
  right: auto;
}

.studio-auth-form .cursor-select-menu .cursor-dropdown.cursor-dropdown-wide {
  max-height: 240px;
}

.studio-auth-form-row {
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  display: grid;
}

.studio-auth-form-row > * {
  min-width: 0;
}

.studio-auth-phone {
  border: 1px solid color-mix(in srgb, var(--color-cursor-border-soft) 86%, transparent);
  background: #fff;
  border-radius: 999px;
  align-items: center;
  width: 100%;
  min-height: 48px;
  transition: border-color .14s, box-shadow .14s;
  display: flex;
  box-shadow: 0 1px 2px #0f172a08;
}

.studio-auth-phone:focus-within {
  border-color: #1c1c1e47;
  box-shadow: 0 0 0 2px #1c1c1e1f;
}

.studio-auth-phone .cursor-select-menu.is-field {
  border-right: 1px solid color-mix(in srgb, var(--color-cursor-border-soft) 86%, transparent);
  flex: none;
  width: auto;
}

.studio-auth-phone .cursor-select-menu.is-field .cursor-select-trigger, .studio-auth-phone .cursor-select-menu.is-field .cursor-select-trigger:hover, .studio-auth-phone .cursor-select-menu.is-field.is-open .cursor-select-trigger {
  width: auto;
  min-width: 0;
  height: 48px;
  box-shadow: none;
  background: none;
  border: 0;
  justify-content: flex-start;
  gap: 6px;
  padding: 0 12px 0 16px;
}

.studio-auth-phone .cursor-select-menu.is-field .cursor-select-label {
  text-align: left;
  flex: none;
  max-width: none;
  height: auto;
  display: block;
  overflow: visible;
}

.studio-auth-phone .cursor-select-menu.is-field .cursor-select-arrow, .studio-auth-phone .cursor-select-menu.is-field.is-open .cursor-select-arrow {
  position: static;
  top: auto;
  right: auto;
  transform: none;
}

.studio-auth-phone .cursor-select-menu.is-field.is-open .cursor-select-arrow {
  transform: rotate(180deg);
}

.studio-auth-phone .cursor-select-menu .cursor-dropdown, .studio-auth-phone .cursor-select-menu .cursor-dropdown.is-end, .studio-auth-phone .cursor-select-menu .cursor-dropdown.is-start {
  width: max-content;
  min-width: 140px;
  max-width: min(240px, 70vw);
  left: 0;
}

.studio-auth-phone input {
  text-align: left;
  color: #1c1c1e;
  background: none;
  border: 0;
  outline: none;
  flex: 1;
  min-width: 0;
  height: 48px;
  padding: 0 18px;
  font-size: .875rem;
  font-weight: 500;
}

.studio-auth-phone input::placeholder {
  color: #1c1c1e6b;
  font-weight: 450;
}

.studio-auth-logo {
  border: 1px dashed color-mix(in srgb, var(--color-cursor-border-soft) 86%, transparent);
  cursor: pointer;
  text-align: center;
  background: #fff;
  border-radius: 24px;
  justify-items: center;
  gap: 10px;
  min-height: 120px;
  padding: 18px 16px;
  display: grid;
}

.studio-auth-logo.is-over {
  border-color: #1c1c1e6b;
  box-shadow: 0 0 0 2px #1c1c1e1f;
}

.studio-auth-logo-mark {
  background: var(--mos-plate);
  color: #1c1c1e6b;
  border-radius: 999px;
  place-items: center;
  width: 64px;
  height: 64px;
  display: grid;
}

.studio-auth-logo-mark svg {
  width: 22px;
  height: 22px;
}

.studio-auth-logo img {
  object-fit: cover;
  border-radius: 999px;
  width: 64px;
  height: 64px;
}

.studio-auth-logo-copy {
  color: color-mix(in srgb, var(--mos-text) 62%, transparent);
  margin: 0;
  font-size: .8125rem;
  font-weight: 550;
}

.studio-auth-logo-actions {
  justify-content: center;
  gap: 14px;
  display: flex;
}

.studio-auth-themes {
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  display: flex;
}

.studio-auth-theme-pill {
  border: 1px solid color-mix(in srgb, var(--color-cursor-border-soft) 86%, transparent);
  color: #1c1c1e;
  cursor: pointer;
  background: #fff;
  border-radius: 999px;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 10px 0 8px;
  font-size: .75rem;
  font-weight: 550;
  line-height: 1;
  display: inline-flex;
}

.studio-auth-theme-pill.is-active {
  border-color: #1c1c1e47;
  box-shadow: 0 0 0 2px #1c1c1e1f;
}

.studio-auth-theme-swatch {
  border-radius: 4px;
  width: 18px;
  height: 12px;
  display: block;
}

.studio-auth-accent-text {
  color: #1c1c1e6b;
}

.studio-auth-field.is-email {
  box-sizing: border-box;
  justify-content: flex-start;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  padding: 0 18px;
  display: flex;
}

.studio-auth-field.is-email > .studio-auth-accent-text {
  pointer-events: none;
  flex: none;
  position: static;
}

.studio-auth-field.is-preview {
  cursor: default;
  justify-content: center;
}

.studio-auth-preview-value {
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  max-width: calc(100% - 22px);
  color: inherit;
  letter-spacing: -.01em;
  text-align: center;
  flex: 0 auto;
  font-size: 1.125rem;
  font-weight: 500;
  line-height: 20px;
  overflow: hidden;
}

.studio-auth-field.is-preview.is-empty .studio-auth-preview-value {
  color: color-mix(in srgb, var(--mos-text) 38%, transparent);
  font-weight: 450;
}

.studio-auth-field.is-preview.is-taken .studio-auth-preview-value {
  color: #b91c1c;
}

.studio-auth-hint {
  text-align: center;
  margin: 0;
  font-size: .8125rem;
  font-weight: 550;
  line-height: 1.35;
}

.studio-auth-hint.is-taken {
  color: #b91c1c;
}

.studio-auth-hint.is-address {
  color: #15803d;
}

.studio-auth-field.is-preview:focus, .studio-auth-field.is-preview:focus-within {
  border-color: color-mix(in srgb, var(--color-cursor-border-soft) 86%, transparent);
  box-shadow: 0 1px 2px #0f172a08;
}

.studio-auth-field {
  border: 1px solid color-mix(in srgb, var(--color-cursor-border-soft) 86%, transparent);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  background: #fff;
  border-radius: 999px;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-width: 0;
  min-height: 48px;
  padding: 0 18px;
  transition: border-color .14s, background .14s, box-shadow .14s;
  display: flex;
  box-shadow: 0 1px 2px #0f172a08;
}

.studio-auth-field.is-stack {
  text-align: left;
  border-radius: 22px;
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
  min-height: 0;
  padding: 12px 18px;
}

.studio-auth-field.is-code {
  letter-spacing: .28em;
  text-align: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 18px;
  font-size: 1.15rem;
  font-weight: 700;
}

.studio-auth-field.is-code.is-email-otp {
  letter-spacing: .28em;
  background: #fff;
  border-radius: 18px;
  width: 100%;
  min-height: 52px;
  font-size: 1.25rem;
  font-weight: 700;
  box-shadow: inset 0 1px #ffffffe6, 0 1px 2px #0f172a0a;
}

.studio-auth-otp-stack {
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  width: 100%;
  display: flex;
}

.studio-auth-field:focus, .studio-auth-field:focus-within {
  background: #fff;
  border-color: #1c1c1e47;
  outline: none;
  box-shadow: 0 0 0 2px #1c1c1e1f;
}

.studio-auth-field input, .studio-auth-field textarea, .studio-auth-field select, input.studio-auth-field {
  width: 100%;
  min-width: 0;
  height: 20px;
  color: inherit;
  text-align: start;
  caret-color: var(--mos-text);
  background: none;
  border: 0;
  outline: none;
  flex: auto;
  margin: 0;
  padding: 0;
  font-size: 1.125rem;
  font-weight: 500;
  line-height: 20px;
}

.studio-auth-field.is-stack textarea {
  resize: vertical;
  text-align: left;
  height: auto;
  min-height: 72px;
  caret-color: var(--mos-text);
  line-height: 1.4;
}

.studio-auth-field.is-email input, .studio-auth-field.is-email textarea {
  text-overflow: ellipsis;
  text-align: start;
  flex: auto;
  width: 100%;
  min-width: 0;
  max-width: none;
  overflow: hidden;
}

.studio-auth-field.is-email.is-password {
  gap: 6px;
  padding-right: 6px;
}

.studio-auth-field.is-email.is-password input {
  text-overflow: clip;
  overflow: visible;
}

.studio-auth-field.is-email.is-password input::-webkit-credentials-auto-fill-button {
  display: none;
}

.studio-auth-field.is-email.is-password input::-webkit-caps-lock-indicator {
  display: none;
}

.studio-auth-field.is-email.is-password input::-ms-reveal {
  display: none;
}

.studio-auth-field.is-email.is-password input::-ms-clear {
  display: none;
}

.studio-auth-password-visibility {
  color: #1c1c1e6b;
  cursor: pointer;
  background: none;
  border: 0;
  border-radius: 999px;
  flex: none;
  justify-content: center;
  align-items: center;
  width: 36px;
  height: 36px;
  margin: 0;
  padding: 0;
  transition: color .14s, background .14s;
  display: inline-flex;
}

.studio-auth-password-visibility:hover {
  color: #1c1c1e;
  background: #1c1c1e0f;
}

.studio-auth-password-visibility:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px #1c1c1e1f;
}

.studio-auth-field input::placeholder, .studio-auth-field textarea::placeholder, input.studio-auth-field::placeholder {
  color: color-mix(in srgb, var(--mos-text) 38%, transparent);
  text-align: start;
  font-size: 1.125rem;
  font-weight: 450;
  line-height: 20px;
}

.studio-auth-field input:-webkit-autofill {
  caret-color: var(--mos-text);
  filter: none;
  --lightningcss-light: initial;
  --lightningcss-dark: ;
  color-scheme: light;
  transition: background-color 99999s ease-out;
  -webkit-text-fill-color: #1c1c1e !important;
  background-color: #fff !important;
  background-image: none !important;
  box-shadow: inset 0 0 0 1000px #fff !important;
}

.studio-auth-field input:-webkit-autofill:hover {
  caret-color: var(--mos-text);
  filter: none;
  --lightningcss-light: initial;
  --lightningcss-dark: ;
  color-scheme: light;
  transition: background-color 99999s ease-out;
  -webkit-text-fill-color: #1c1c1e !important;
  background-color: #fff !important;
  background-image: none !important;
  box-shadow: inset 0 0 0 1000px #fff !important;
}

.studio-auth-field input:-webkit-autofill:focus {
  caret-color: var(--mos-text);
  filter: none;
  --lightningcss-light: initial;
  --lightningcss-dark: ;
  color-scheme: light;
  transition: background-color 99999s ease-out;
  -webkit-text-fill-color: #1c1c1e !important;
  background-color: #fff !important;
  background-image: none !important;
  box-shadow: inset 0 0 0 1000px #fff !important;
}

.studio-auth-field input:-webkit-autofill:active {
  caret-color: var(--mos-text);
  filter: none;
  --lightningcss-light: initial;
  --lightningcss-dark: ;
  color-scheme: light;
  transition: background-color 99999s ease-out;
  -webkit-text-fill-color: #1c1c1e !important;
  background-color: #fff !important;
  background-image: none !important;
  box-shadow: inset 0 0 0 1000px #fff !important;
}

.studio-auth-field textarea:-webkit-autofill {
  caret-color: var(--mos-text);
  filter: none;
  --lightningcss-light: initial;
  --lightningcss-dark: ;
  color-scheme: light;
  transition: background-color 99999s ease-out;
  -webkit-text-fill-color: #1c1c1e !important;
  background-color: #fff !important;
  background-image: none !important;
  box-shadow: inset 0 0 0 1000px #fff !important;
}

.studio-auth-field textarea:-webkit-autofill:hover {
  caret-color: var(--mos-text);
  filter: none;
  --lightningcss-light: initial;
  --lightningcss-dark: ;
  color-scheme: light;
  transition: background-color 99999s ease-out;
  -webkit-text-fill-color: #1c1c1e !important;
  background-color: #fff !important;
  background-image: none !important;
  box-shadow: inset 0 0 0 1000px #fff !important;
}

.studio-auth-field textarea:-webkit-autofill:focus {
  caret-color: var(--mos-text);
  filter: none;
  --lightningcss-light: initial;
  --lightningcss-dark: ;
  color-scheme: light;
  transition: background-color 99999s ease-out;
  -webkit-text-fill-color: #1c1c1e !important;
  background-color: #fff !important;
  background-image: none !important;
  box-shadow: inset 0 0 0 1000px #fff !important;
}

.studio-auth-field textarea:-webkit-autofill:active {
  caret-color: var(--mos-text);
  filter: none;
  --lightningcss-light: initial;
  --lightningcss-dark: ;
  color-scheme: light;
  transition: background-color 99999s ease-out;
  -webkit-text-fill-color: #1c1c1e !important;
  background-color: #fff !important;
  background-image: none !important;
  box-shadow: inset 0 0 0 1000px #fff !important;
}

input.studio-auth-field:-webkit-autofill {
  caret-color: var(--mos-text);
  filter: none;
  --lightningcss-light: initial;
  --lightningcss-dark: ;
  color-scheme: light;
  transition: background-color 99999s ease-out;
  -webkit-text-fill-color: #1c1c1e !important;
  background-color: #fff !important;
  background-image: none !important;
  box-shadow: inset 0 0 0 1000px #fff !important;
}

input.studio-auth-field:-webkit-autofill:hover {
  caret-color: var(--mos-text);
  filter: none;
  --lightningcss-light: initial;
  --lightningcss-dark: ;
  color-scheme: light;
  transition: background-color 99999s ease-out;
  -webkit-text-fill-color: #1c1c1e !important;
  background-color: #fff !important;
  background-image: none !important;
  box-shadow: inset 0 0 0 1000px #fff !important;
}

input.studio-auth-field:-webkit-autofill:focus {
  caret-color: var(--mos-text);
  filter: none;
  --lightningcss-light: initial;
  --lightningcss-dark: ;
  color-scheme: light;
  transition: background-color 99999s ease-out;
  -webkit-text-fill-color: #1c1c1e !important;
  background-color: #fff !important;
  background-image: none !important;
  box-shadow: inset 0 0 0 1000px #fff !important;
}

input.studio-auth-field:-webkit-autofill:active {
  caret-color: var(--mos-text);
  filter: none;
  --lightningcss-light: initial;
  --lightningcss-dark: ;
  color-scheme: light;
  transition: background-color 99999s ease-out;
  -webkit-text-fill-color: #1c1c1e !important;
  background-color: #fff !important;
  background-image: none !important;
  box-shadow: inset 0 0 0 1000px #fff !important;
}

:-webkit-any(.studio-auth-field:has(input:-webkit-autofill), .studio-auth-field:has(textarea:-webkit-autofill)) {
  background: #fff;
}

:is(.studio-auth-field:has(input:autofill), .studio-auth-field:has(textarea:autofill)) {
  background: #fff;
}

input.studio-auth-field.is-code:-webkit-autofill {
  box-shadow: inset 0 0 0 1000px #fff, inset 0 1px #ffffffe6, 0 1px 2px #0f172a0a !important;
}

input.studio-auth-field.is-code:-webkit-autofill:hover {
  box-shadow: inset 0 0 0 1000px #fff, inset 0 1px #ffffffe6, 0 1px 2px #0f172a0a !important;
}

input.studio-auth-field.is-code:-webkit-autofill:focus {
  box-shadow: inset 0 0 0 1000px #fff, inset 0 1px #ffffffe6, 0 1px 2px #0f172a0a !important;
}

input.studio-auth-field.is-code:-webkit-autofill:active {
  box-shadow: inset 0 0 0 1000px #fff, inset 0 1px #ffffffe6, 0 1px 2px #0f172a0a !important;
}

.studio-auth-primary {
  width: 100%;
  min-height: 48px;
  box-shadow: none;
  color: #f5f5f7;
  letter-spacing: -.01em;
  text-shadow: none;
  cursor: pointer;
  background: #1c1c1e;
  border: 1px solid #0000;
  border-radius: 999px;
  justify-content: center;
  align-items: center;
  gap: 8px;
  padding: 0 18px;
  font-size: .875rem;
  font-weight: 650;
  text-decoration: none;
  transition: background .14s, transform .12s;
  display: inline-flex;
}

.studio-auth-primary:hover:not(:disabled) {
  background: #363638;
}

.studio-auth-primary:active:not(:disabled) {
  transform: translateY(1px)scale(.99);
}

.studio-auth-primary:focus-visible, .studio-auth-secondary:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px #f5f5f7, 0 0 0 4px #1c1c1e59;
}

.studio-auth-primary:disabled {
  cursor: not-allowed;
  box-shadow: none;
  color: #ceced1;
  text-shadow: none;
  opacity: 1;
  background: #87878b;
  border-color: #0000;
  transform: none;
}

.studio-auth-secondary:disabled {
  opacity: .55;
  cursor: not-allowed;
}

.studio-auth-secondary {
  border: 1px solid var(--studio-landing-line, #d8d8de);
  color: #1c1c1e;
  width: 100%;
  min-height: 48px;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  background: none;
  border-radius: 999px;
  justify-content: center;
  align-items: center;
  gap: 8px;
  padding: 0 18px;
  font-size: .875rem;
  font-weight: 650;
  transition: background .14s, border-color .14s;
  display: inline-flex;
}

.studio-auth-secondary:hover {
  background: var(--mos-plate-strong);
  color: #1c1c1e;
  border-color: #1c1c1e47;
}

.studio-auth-notice {
  min-height: 1rem;
  color: color-mix(in srgb, var(--mos-text) 55%, transparent);
  text-align: center;
  margin: 0;
  font-size: .75rem;
}

.studio-auth-copy {
  color: color-mix(in srgb, var(--mos-text) 55%, transparent);
  text-align: center;
  overflow-wrap: anywhere;
  word-break: break-word;
  margin: .65rem 0 0;
  font-size: .75rem;
  line-height: 1.4;
}

.studio-auth-icon, .studio-auth-accent-text {
  flex: none;
  width: 14px;
  height: 14px;
  display: block;
}

.studio-auth-icon {
  color: color-mix(in srgb, var(--mos-text) 42%, transparent);
}

.studio-auth-link {
  color: color-mix(in srgb, var(--mos-text) 55%, transparent);
  background: none;
  border: 0;
  font-size: .75rem;
  font-weight: 500;
}

.studio-auth-link:hover {
  color: var(--mos-text);
}

.studio-auth-link:focus-visible {
  color: var(--mos-text);
  box-shadow: var(--studio-focus-ring);
  border-radius: 6px;
}

.studio-auth-faint {
  color: color-mix(in srgb, var(--mos-text) 42%, transparent);
}

.studio-auth-panel {
  border: 1px solid color-mix(in srgb, var(--color-cursor-border-soft) 90%, transparent);
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  background: #fff;
  border-radius: 12px;
}

.studio-auth-error {
  color: #b91c1c;
}

.studio-auth-error-box {
  color: #991b1b;
  background: #fee2e2b8;
  border: 1px solid #b91c1c38;
  border-radius: 10px;
  margin: 0;
  padding: 10px 12px;
  font-size: .75rem;
  line-height: 1.35;
}

.studio-auth-theme.is-live-theme {
  --mos-page: inherit;
  --mos-panel: inherit;
  --mos-plate: inherit;
  --mos-plate-strong: inherit;
  --mos-bg: inherit;
  --mos-surface: inherit;
  --mos-raised: inherit;
  --mos-text: inherit;
  --mos-text-soft: inherit;
  --mos-text-bright: inherit;
  --mos-muted: inherit;
  --mos-faint: inherit;
  --mos-hover: inherit;
  --mos-active: inherit;
  --mos-border: inherit;
  --mos-border-soft: inherit;
  --color-cursor-border-soft: var(--mos-border-soft);
  --color-cursor-border: var(--mos-border);
  --color-cursor-text: var(--mos-text);
  --color-cursor-muted: var(--mos-muted);
  --color-cursor-bg: var(--mos-bg);
  --studio-auth-accent: var(--cursor-accent, var(--mos-accent, #25da67));
  --studio-auth-accent-fg: var(--cursor-accent-fg, var(--mos-accent-fg, #fff));
  --studio-auth-field-bg: color-mix(in srgb, var(--mos-page) 70%, transparent);
  --studio-auth-ring: color-mix(in srgb, var(--studio-auth-accent) 26%, transparent);
  --studio-auth-ring-edge: color-mix(in srgb, var(--studio-auth-accent) 62%, var(--mos-border));
  color: var(--mos-text);
  background: var(--mos-page);
  color-scheme: normal;
}

html[data-appearance="dark"] .studio-auth-theme.is-live-theme {
  --studio-auth-field-bg: color-mix(in srgb, var(--mos-text) 4%, color-mix(in srgb, var(--mos-page) 68%, transparent));
}

html[data-appearance="dark"] .studio-auth-theme.is-live-theme .studio-auth-card {
  border-color: color-mix(in srgb, var(--mos-border-soft) 72%, transparent);
  background: color-mix(in srgb, var(--mos-plate) 58%, transparent);
  -webkit-backdrop-filter: blur(24px) saturate(1.12);
  backdrop-filter: blur(24px) saturate(1.12);
  box-shadow: inset 0 1px #ffffff0a, 0 1px 2px #0000004d, 0 18px 42px #00000061;
}

.studio-auth-theme.is-live-theme .studio-auth-card {
  background: linear-gradient(180deg, color-mix(in srgb, var(--mos-text-bright) 7%, transparent), transparent),
    color-mix(in srgb, var(--mos-plate) 62%, transparent);
}

.studio-auth-theme.is-live-theme .studio-auth-logo-circle {
  border-color: var(--mos-border-soft);
  background: var(--mos-page);
}

html[data-appearance="dark"] .studio-auth-theme.is-live-theme .studio-auth-logo-circle {
  box-shadow: inset 0 1px #ffffff0d;
}

.studio-auth-theme.is-live-theme .studio-auth-mode-tabs.studio-admin-head-tabs {
  background: color-mix(in srgb, var(--studio-auth-field-bg, var(--mos-page)) 88%, transparent);
  border-color: color-mix(in srgb, var(--color-cursor-border-soft) 65%, transparent);
}

.studio-auth-theme.is-live-theme .studio-auth-mode-tabs .studio-admin-head-tab.is-active {
  background: color-mix(in srgb,
    var(--studio-auth-accent) 18%,
    var(--studio-auth-field-bg, var(--mos-page)));
  color: var(--color-cursor-text-bright, var(--mos-text));
}

.studio-auth-theme.is-live-theme .studio-auth-mode-tabs .studio-admin-head-tab:focus-visible {
  box-shadow: 0 0 0 2px var(--mos-page),
    0 0 0 4px color-mix(in srgb, var(--studio-auth-accent) 55%, transparent);
  outline: none;
}

.studio-auth-theme.is-live-theme .studio-auth-field, .studio-auth-theme.is-live-theme .studio-auth-field.is-code.is-email-otp, .studio-auth-theme.is-live-theme .studio-auth-phone, .studio-auth-theme.is-live-theme .studio-auth-logo, .studio-auth-theme.is-live-theme .studio-auth-panel, .studio-auth-theme.is-live-theme .studio-auth-theme-pill, .studio-auth-theme.is-live-theme .studio-auth-form .cursor-select-menu.is-field .cursor-select-trigger {
  background: var(--studio-auth-field-bg);
  color: var(--mos-text);
}

.studio-auth-theme.is-live-theme .studio-auth-field:has(input:-webkit-autofill) {
  background: var(--studio-auth-field-bg);
  color: var(--mos-text);
}

.studio-auth-theme.is-live-theme .studio-auth-field:has(textarea:-webkit-autofill) {
  background: var(--studio-auth-field-bg);
  color: var(--mos-text);
}

.studio-auth-theme.is-live-theme .studio-auth-phone .cursor-select-menu.is-field .cursor-select-trigger {
  background: none;
}

.studio-auth-theme.is-live-theme .studio-auth-field:not(.is-preview):focus, .studio-auth-theme.is-live-theme .studio-auth-field:not(.is-preview):focus-within, .studio-auth-theme.is-live-theme .studio-auth-phone:focus-within, .studio-auth-theme.is-live-theme .studio-auth-form .cursor-select-menu.is-field .cursor-select-trigger:hover, .studio-auth-theme.is-live-theme .studio-auth-form .cursor-select-menu.is-field.is-open .cursor-select-trigger, .studio-auth-theme.is-live-theme .studio-auth-logo.is-over, .studio-auth-theme.is-live-theme .studio-auth-theme-pill.is-active {
  border-color: var(--studio-auth-ring-edge);
  background: var(--studio-auth-field-bg);
  box-shadow: 0 0 0 2px var(--studio-auth-ring);
}

.studio-auth-theme.is-live-theme .studio-auth-theme-pill.studio-theme-chip-host.is-active {
  border-color: color-mix(in srgb, var(--studio-theme-chip-accent) 62%, var(--mos-border));
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--studio-theme-chip-accent) 26%, transparent);
}

.studio-auth-theme.is-live-theme .studio-auth-field input, .studio-auth-theme.is-live-theme .studio-auth-field textarea, .studio-auth-theme.is-live-theme .studio-auth-phone input {
  color: var(--mos-text);
  caret-color: var(--studio-auth-accent);
}

.studio-auth-theme.is-live-theme .studio-auth-phone input::placeholder, .studio-auth-theme.is-live-theme .studio-auth-form .cursor-select-menu.is-field .cursor-select-trigger.is-placeholder .cursor-select-label, .studio-auth-theme.is-live-theme .studio-auth-form .cursor-select-menu.is-field .cursor-select-leading, .studio-auth-theme.is-live-theme .studio-auth-form .cursor-select-menu.is-field .cursor-select-detail, .studio-auth-theme.is-live-theme .studio-auth-form .cursor-dropdown-item-detail, .studio-auth-theme.is-live-theme .studio-auth-accent-text, .studio-auth-theme.is-live-theme .studio-auth-logo-mark, .studio-auth-theme.is-live-theme .studio-auth-password-visibility {
  color: color-mix(in srgb, var(--mos-text) 42%, transparent);
}

.studio-auth-theme.is-live-theme .studio-auth-form .studio-billing-country-select .studio-settings-field-hint {
  color: var(--mos-muted);
}

.studio-auth-theme.is-live-theme .studio-auth-password-visibility:hover {
  color: var(--mos-text);
  background: color-mix(in srgb, var(--mos-text) 6%, transparent);
}

.studio-auth-theme.is-live-theme .studio-auth-password-visibility:focus-visible {
  box-shadow: 0 0 0 2px var(--studio-auth-ring);
}

.studio-auth-theme.is-live-theme .studio-auth-field input:-webkit-autofill {
  color-scheme: normal;
  -webkit-text-fill-color: var(--mos-text) !important;
  background-color: var(--studio-auth-field-bg) !important;
  -webkit-box-shadow: 0 0 0 1000px var(--studio-auth-field-bg) inset !important;
  box-shadow: 0 0 0 1000px var(--studio-auth-field-bg) inset !important;
}

.studio-auth-theme.is-live-theme .studio-auth-field input:-webkit-autofill:hover {
  color-scheme: normal;
  -webkit-text-fill-color: var(--mos-text) !important;
  background-color: var(--studio-auth-field-bg) !important;
  -webkit-box-shadow: 0 0 0 1000px var(--studio-auth-field-bg) inset !important;
  box-shadow: 0 0 0 1000px var(--studio-auth-field-bg) inset !important;
}

.studio-auth-theme.is-live-theme .studio-auth-field input:-webkit-autofill:focus {
  color-scheme: normal;
  -webkit-text-fill-color: var(--mos-text) !important;
  background-color: var(--studio-auth-field-bg) !important;
  -webkit-box-shadow: 0 0 0 1000px var(--studio-auth-field-bg) inset !important;
  box-shadow: 0 0 0 1000px var(--studio-auth-field-bg) inset !important;
}

.studio-auth-theme.is-live-theme .studio-auth-field input:-webkit-autofill:active {
  color-scheme: normal;
  -webkit-text-fill-color: var(--mos-text) !important;
  background-color: var(--studio-auth-field-bg) !important;
  -webkit-box-shadow: 0 0 0 1000px var(--studio-auth-field-bg) inset !important;
  box-shadow: 0 0 0 1000px var(--studio-auth-field-bg) inset !important;
}

.studio-auth-theme.is-live-theme .studio-auth-field textarea:-webkit-autofill {
  color-scheme: normal;
  -webkit-text-fill-color: var(--mos-text) !important;
  background-color: var(--studio-auth-field-bg) !important;
  -webkit-box-shadow: 0 0 0 1000px var(--studio-auth-field-bg) inset !important;
  box-shadow: 0 0 0 1000px var(--studio-auth-field-bg) inset !important;
}

.studio-auth-theme.is-live-theme input.studio-auth-field:-webkit-autofill {
  color-scheme: normal;
  -webkit-text-fill-color: var(--mos-text) !important;
  background-color: var(--studio-auth-field-bg) !important;
  -webkit-box-shadow: 0 0 0 1000px var(--studio-auth-field-bg) inset !important;
  box-shadow: 0 0 0 1000px var(--studio-auth-field-bg) inset !important;
}

.studio-auth-theme.is-live-theme .studio-auth-primary {
  background: var(--studio-auth-accent);
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
}

.studio-auth-theme.is-live-theme .studio-auth-primary > svg {
  width: 18px;
  height: 18px;
  color: inherit;
  flex: none;
}

.studio-auth-theme.is-live-theme .studio-auth-primary:hover:not(:disabled) {
  background: var(--cursor-accent-hover, color-mix(in srgb, var(--studio-auth-accent) 88%, #fff));
}

.studio-auth-theme.is-live-theme .studio-auth-primary:focus-visible, .studio-auth-theme.is-live-theme .studio-auth-secondary:focus-visible {
  box-shadow: 0 0 0 2px var(--mos-page),
    0 0 0 4px color-mix(in srgb, var(--studio-auth-accent) 55%, transparent);
}

.studio-auth-theme.is-live-theme .studio-auth-primary:disabled {
  background: color-mix(in srgb, var(--studio-auth-accent) 55%, var(--mos-plate-strong));
  color: #ffffffb8;
}

.studio-auth-theme.is-live-theme .studio-auth-secondary {
  border-color: var(--mos-border);
  color: var(--mos-text);
}

.studio-auth-theme.is-live-theme .studio-auth-secondary:hover {
  background: var(--mos-plate-strong);
  border-color: color-mix(in srgb, var(--mos-text) 28%, transparent);
  color: var(--mos-text);
}

html[data-appearance="dark"] .studio-auth-theme.is-live-theme .studio-auth-error, html[data-appearance="dark"] .studio-auth-theme.is-live-theme .studio-auth-hint.is-taken, html[data-appearance="dark"] .studio-auth-theme.is-live-theme .studio-auth-field.is-preview.is-taken .studio-auth-preview-value {
  color: #f87171;
}

html[data-appearance="dark"] .studio-auth-theme.is-live-theme .studio-auth-hint.is-address {
  color: #4ade80;
}

html[data-appearance="dark"] .studio-auth-theme.is-live-theme .studio-auth-error-box {
  background: color-mix(in srgb, #dc2626 14%, var(--mos-page));
  color: #fecaca;
  border-color: #f8717152;
}

.studio-auth-handle {
  min-width: 0;
  max-width: 100%;
}

.studio-auth-field.is-handle {
  gap: 4px;
  padding-right: 14px;
}

.studio-auth-field.is-handle input {
  text-overflow: ellipsis;
  flex: 1 1 0;
  width: 0;
  min-width: 0;
  overflow: hidden;
}

.studio-auth-field-suffix {
  color: var(--studio-auth-muted, #7f7f7fe6);
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
  white-space: nowrap;
  flex: none;
  padding-right: .75rem;
  font-size: .875rem;
}

.studio-auth-field.is-handle .studio-auth-field-suffix {
  padding-right: 0;
}

.studio-auth-helper {
  text-align: center;
  margin-top: .5rem;
  font-size: .8125rem;
}

.studio-auth-progress-wrap {
  margin: 0 0 14px;
}

.studio-auth-progress {
  background: color-mix(in srgb, var(--mos-text) 14%, transparent);
  border-radius: 999px;
  height: 3px;
  overflow: hidden;
}

.studio-auth-progress > span {
  border-radius: inherit;
  background: var(--cursor-accent);
  height: 100%;
  display: block;
}

.studio-auth-plans {
  box-sizing: border-box;
  text-align: left;
  gap: 8px;
  width: 100%;
  min-width: 0;
  margin-top: 4px;
  padding-inline: 2px;
  display: grid;
}

.studio-auth-checkout {
  text-align: left;
  margin-top: 12px;
}

.studio-auth-checkout .unified-checkout {
  width: 100%;
}

.studio-auth-skip {
  margin-top: 12px;
}

.studio-auth-handle-icon {
  border-radius: 9999px;
  flex: none;
  justify-content: center;
  align-items: center;
  width: 20px;
  height: 20px;
  display: inline-flex;
}

.studio-auth-handle-icon.is-ok {
  color: #fff;
  background: #16a34a;
}

.studio-auth-handle-icon.is-bad {
  color: #fff;
  background: #dc2626;
}

.studio-auth-field {
  align-items: center;
}

.studio-auth-field input {
  align-self: center;
  padding-top: 0;
  padding-bottom: 0;
  line-height: 1.25;
}

.studio-auth-field-suffix {
  align-self: center;
  line-height: 1.25;
}

.studio-auth-field.is-handle.is-derived {
  border-radius: 24px;
  align-items: center;
  height: auto;
  min-height: 48px;
  padding-top: 8px;
  padding-bottom: 8px;
}

.studio-auth-address-value {
  min-width: 0;
  text-overflow: unset;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
  text-align: start;
  flex: auto;
  font-size: clamp(13px, 3.5vw, 16px);
  font-weight: 500;
  line-height: 1.3;
  overflow: visible;
}

.studio-auth-address-value.is-empty {
  color: color-mix(in srgb, var(--mos-text) 38%, transparent);
  font-weight: 450;
}

.studio-auth-field-help {
  opacity: .7;
  overflow-wrap: anywhere;
  margin: -4px 0 0;
  padding: 0 14px;
  font-size: 12px;
  line-height: 1.35;
}

.studio-auth-field.is-email input[readonly] {
  cursor: default;
}

.studio-auth-plans-loading {
  opacity: .75;
  justify-content: center;
  align-items: center;
  gap: 8px;
  min-height: 132px;
  font-size: 13px;
  display: flex;
}

.ysbf-auth-slot.studio-auth-theme:has(.studio-auth-page) {
  width: 100%;
  max-width: min(1120px, 100%) !important;
}

.ysbf-stage.is-auth .ysbf-auth-slot.studio-auth-theme:has(.studio-auth-page) {
  width: 100%;
  max-width: min(1120px, 100%) !important;
}

.studio-auth-page {
  box-sizing: border-box;
  width: 100%;
  max-width: 1120px;
  max-height: calc(100dvh - 10.5rem);
  box-shadow: none;
  background: none;
  border: 0;
  flex-direction: column;
  margin: 0 auto;
  padding: 0 16px 16px;
  display: flex;
}

.studio-auth-page .studio-auth-card-head {
  width: min(420px, 100%);
  margin: 0 auto 12px;
}

.studio-auth-page .studio-auth-title {
  font-size: 1.15rem;
}

.studio-auth-page .studio-auth-card-body {
  overflow-y: auto;
}

.studio-auth-page .studio-auth-mode-tabs {
  display: none;
}

.studio-auth-page .studio-auth-form {
  margin-top: 0;
}

@media (min-width: 900px) {
  .studio-auth-page .studio-billing-plans.is-stack {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: stretch;
    gap: 16px;
    display: grid;
  }
}

.studio-auth-page .studio-auth-skip {
  width: min(320px, 100%);
  margin: 16px auto 0;
}

.studio-auth-page .studio-auth-progress {
  display: none;
}

.studio-auth-plans .studio-billing-period {
  align-self: center;
  margin: 0 auto 16px;
}

.studio-auth-plans .uc2-skip {
  justify-content: center;
  margin-top: 16px;
  display: flex;
}

.studio-auth-plans .uc2-skip button {
  all: unset;
  cursor: pointer;
  opacity: .65;
  text-underline-offset: 3px;
  font-size: 13px;
  text-decoration: underline;
}

.studio-auth-page {
  overflow: visible;
  max-height: none !important;
}

.studio-auth-page .studio-auth-card-body {
  max-height: none !important;
  overflow: visible !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
}

.ysbf-auth-slot:has(.studio-auth-page) {
  max-height: none !important;
  overflow: visible !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
}

.ysbf-stage.is-auth:has(.studio-auth-page) {
  max-height: 100dvh;
  overflow-y: auto !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
}

:is(html:has(.studio-auth-page) .ysbf-greet-quote, html:has(.uc2) .ysbf-greet-quote) {
  display: none !important;
}

.studio-auth-theme .uc2-skip button.studio-auth-skip, .studio-auth-theme.is-live-theme .uc2-skip button.studio-auth-secondary, .uc2-skip button {
  all: unset;
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  display: inline;
  box-shadow: none !important;
  width: auto !important;
  min-height: 0 !important;
  color: var(--mos-text-muted, var(--mos-muted)) !important;
  background: none !important;
  border: 0 !important;
  padding: 0 !important;
}

.uc2-skip button:hover {
  text-underline-offset: 3px;
  text-decoration: underline;
  color: var(--mos-text) !important;
}

.uc2-skip button:focus-visible {
  outline: 2px solid var(--mos-accent);
  outline-offset: 2px;
  border-radius: 4px;
}

:is(html:has(.studio-auth-page) .ysbf-greet, html:has(.uc2.is-viewport) .ysbf-greet, html:has(.studio-auth-plans) .ysbf-greet) {
  visibility: hidden !important;
}

.studio-auth-page .studio-auth-card-head {
  display: none;
}

:is(html:has(.studio-auth-page) .ysbf-greet, html:has(.studio-auth-page) .ysbf-greet *, html:has(.uc2.is-viewport) .ysbf-greet, html:has(.uc2.is-viewport) .ysbf-greet *) {
  visibility: hidden !important;
  opacity: 0 !important;
}

:is(html:has(.studio-auth-page) :is(.ysbf-auth-greet, .ysbf-greet, [class*="greet"]), html:has(.uc2) :is(.ysbf-auth-greet, .ysbf-greet)) {
  display: none !important;
}

@media (max-width: 899px) {
  .studio-auth-plans, .uc2-right .uc2-col {
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 96px) !important;
  }

  .ysbf-auth-slot:has(.studio-auth-page) {
    max-width: 100% !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  .ysbf-stage.is-auth:has(.studio-auth-page) {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .studio-auth-page {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

input.studio-auth-field.is-code {
  text-align: center;
  text-indent: .28em;
}

input.studio-auth-field.is-code::placeholder {
  text-align: center;
  letter-spacing: .28em;
}

.studio-auth-field-help.is-status {
  text-align: center;
  padding: 0;
}

.studio-auth-sanity-mark {
  color: var(--mos-accent);
  --sanity-mark-letter: var(--mos-accent-fg, #fff);
  display: block;
}

.studio-auth-primary.has-step-progress > :not(.studio-auth-primary-fill):not(.sr-only) {
  z-index: 1;
  position: relative;
}

.studio-auth-theme.is-live-theme .studio-auth-primary.has-step-progress, .studio-auth-theme.is-live-theme .studio-auth-primary.has-step-progress:hover:not(:disabled), .studio-auth-theme.is-live-theme .studio-auth-primary.has-step-progress:disabled {
  background: color-mix(in srgb, var(--studio-auth-accent) 45%, #fff);
}

.studio-auth-primary-fill {
  z-index: 0;
  border-radius: inherit;
  background: var(--studio-auth-accent, var(--cursor-accent, #3b82f6));
  pointer-events: none;
  transition: width .32s ease-out;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
}

.studio-auth-primary.has-step-progress:hover:not(:disabled) .studio-auth-primary-fill {
  background: color-mix(in srgb, var(--studio-auth-accent, var(--cursor-accent)) 86%, #000);
}

.studio-auth-theme.is-live-theme .studio-auth-primary.has-step-progress:disabled {
  color: #ffffffeb;
  text-shadow: 0 1px 2px #0000002e;
}

@media (prefers-reduced-motion: reduce) {
  .studio-auth-primary-fill {
    transition: none;
  }
}

.studio-auth-google {
  gap: 12px;
  width: 100%;
  margin-top: 12px;
  display: grid;
}

.studio-auth-google .sw-or {
  width: 100%;
  color: color-mix(in srgb, var(--mos-text, #202020) 45%, transparent);
  text-transform: lowercase;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  font-weight: 600;
  display: flex;
}

.studio-auth-google .sw-or:before, .studio-auth-google .sw-or:after {
  content: "";
  background: color-mix(in srgb, var(--mos-text, #202020) 12%, transparent);
  flex: 1;
  height: 1px;
}

.studio-auth-google .sw-google {
  width: 100%;
  display: flex;
  position: relative;
}

.studio-auth-google .sw-btn {
  width: 100%;
  font: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  border-radius: 999px;
  justify-content: center;
  align-items: center;
  padding: 0 18px;
  transition: transform .18s cubic-bezier(.34, 1.56, .64, 1);
  display: flex;
  position: relative;
  overflow: hidden;
}

.studio-auth-google .sw-btn:active:not(:disabled) {
  transform: scale(.97);
}

.studio-auth-google .sw-google-btn {
  color: #202020;
  letter-spacing: .1px;
  background: #fff;
  border: 1px solid #2020201f;
  gap: 10px;
  height: 48px;
  font-size: 14px;
  font-weight: 600;
}

.studio-auth-google .sw-google-off .sw-google-btn {
  opacity: .55;
  cursor: default;
}

.studio-auth-google .sw-google-gis {
  opacity: .01;
  border-radius: 999px;
  justify-content: center;
  align-items: center;
  display: flex;
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.studio-auth-google .sw-google-gis iframe {
  transform: scale(1.4);
}

.studio-auth-primary-label {
  z-index: 1;
  justify-content: center;
  align-items: center;
  gap: 8px;
  display: inline-flex;
  position: relative;
}

.studio-auth-primary.has-step-progress {
  isolation: isolate;
  position: relative;
  overflow: hidden;
}

.studio-auth-primary.has-step-progress .studio-auth-primary-fill {
  z-index: 0;
  border-radius: 0;
}

.studio-auth-theme.is-live-theme .studio-auth-primary-label > svg {
  flex: none;
  width: 18px;
  height: 18px;
}

.studio-auth-primary.has-step-progress .studio-auth-primary-fill {
  width: var(--p, 0%);
}

.studio-auth-theme.is-live-theme .studio-auth-primary.has-step-progress, .studio-auth-theme.is-live-theme .studio-auth-primary.has-step-progress:hover:not(:disabled), .studio-auth-theme.is-live-theme .studio-auth-primary.has-step-progress:disabled {
  background: color-mix(in srgb, var(--studio-auth-accent) 22%, var(--mos-page, #fff));
  color: var(--mos-text, #202020);
  text-shadow: none;
}

.studio-auth-primary.has-step-progress .studio-auth-primary-label.is-on-fill {
  z-index: 2;
  color: #fff;
  clip-path: inset(0 calc(100% - var(--p, 0%)) 0 0);
  pointer-events: none;
  transition: clip-path .32s ease-out;
  position: absolute;
  inset: 0;
}

.studio-auth-primary.has-step-progress:disabled .studio-auth-primary-label {
  opacity: .8;
}

@media (prefers-reduced-motion: reduce) {
  .studio-auth-primary-label.is-on-fill {
    transition: none;
  }
}

.studio-auth-card {
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 0;
  overflow: hidden auto;
}

.studio-auth-card > .studio-auth-card-head {
  padding: 28px 24px 0;
}

.studio-auth-card > .studio-auth-card-body {
  flex: none;
  max-height: none;
  margin-inline: 0;
  padding: 0 24px 20px;
  overflow: visible;
  -webkit-mask-image: none;
  mask-image: none;
}

.studio-auth-google {
  margin-top: 0;
}

.studio-auth-primary.has-step-progress .studio-auth-primary-label:not(.is-on-fill) {
  clip-path: inset(0 0 0 var(--p, 0%));
  transition: clip-path .32s ease-out;
}

.studio-auth-primary.has-step-progress .studio-auth-primary-label.is-on-fill {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0 18px;
  display: flex;
}

.studio-auth-back {
  z-index: 3;
  border: 1px solid color-mix(in srgb, var(--mos-text, #202020) 10%, transparent);
  background: color-mix(in srgb, var(--mos-text, #202020) 6%, transparent);
  width: 36px;
  height: 36px;
  color: var(--mos-text, #202020);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  border-radius: 999px;
  justify-content: center;
  align-items: center;
  padding: 0;
  transition: background .14s, transform .12s;
  display: inline-flex;
  position: absolute;
  top: 12px;
  left: 12px;
}

.studio-auth-back > svg {
  width: 18px;
  height: 18px;
}

.studio-auth-back:hover {
  background: color-mix(in srgb, var(--mos-text, #202020) 11%, transparent);
}

.studio-auth-back:active {
  transform: scale(.94);
}

.studio-auth-back:focus-visible {
  box-shadow: 0 0 0 2px var(--mos-page, #fff), 0 0 0 4px color-mix(in srgb, var(--studio-auth-accent, #3b82f6) 55%, transparent);
  outline: none;
}

.studio-auth-primary.has-step-progress .studio-auth-primary-label, .studio-auth-primary.has-step-progress .studio-auth-primary-label.is-on-fill {
  box-sizing: border-box;
  justify-content: center;
  align-items: center;
  gap: 8px;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0 18px;
  display: flex;
  position: absolute;
  inset: 0;
}

.studio-auth-primary.has-step-progress .studio-auth-primary-label:not(.is-on-fill) {
  z-index: 1;
}

.studio-auth-primary.has-step-progress .studio-auth-primary-label.is-on-fill {
  z-index: 2;
}

.studio-auth-field.is-handle.is-derived {
  align-items: center;
  display: flex;
}

.studio-auth-field.is-handle.is-derived .studio-auth-handle-icon {
  flex: none;
  justify-content: center;
  align-self: center;
  align-items: center;
  margin: 0;
  line-height: 0;
  display: inline-flex;
}

.studio-auth-field.is-handle.is-derived .studio-auth-address-value {
  vertical-align: middle;
  align-self: center;
  align-items: center;
  height: auto;
  min-height: 0;
  margin-block: 0;
  padding-block: 0;
  line-height: 1.25;
  display: flex;
}

.studio-auth-account-pill {
  border: 1px solid color-mix(in srgb, var(--mos-text, #202020) 10%, transparent);
  background: color-mix(in srgb, var(--mos-text, #202020) 6%, transparent);
  width: fit-content;
  max-width: 100%;
  color: var(--mos-text, #202020);
  -webkit-user-select: text;
  user-select: text;
  border-radius: 999px;
  align-items: center;
  gap: 8px;
  margin: 0 auto;
  padding: 4px 4px 4px 14px;
  font-size: .8125rem;
  font-weight: 600;
  line-height: 1.2;
  display: flex;
}

.studio-auth-account-pill-email {
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  overflow: hidden;
}

.studio-auth-account-switch {
  background: color-mix(in srgb, var(--mos-text, #202020) 9%, transparent);
  width: 28px;
  height: 28px;
  color: inherit;
  cursor: pointer;
  border: 0;
  border-radius: 999px;
  flex: none;
  justify-content: center;
  align-items: center;
  padding: 0;
  transition: background .14s, transform .12s;
  display: inline-flex;
}

.studio-auth-account-switch > svg {
  width: 14px;
  height: 14px;
}

.studio-auth-account-switch:hover:not(:disabled) {
  background: color-mix(in srgb, var(--mos-text, #202020) 15%, transparent);
}

.studio-auth-account-switch:active:not(:disabled) {
  transform: scale(.92);
}

.studio-auth-account-switch:disabled {
  opacity: .5;
  cursor: default;
}

.studio-auth-account-switch:focus-visible {
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--studio-auth-accent, #3b82f6) 55%, transparent);
  outline: none;
}

.studio-auth-field.is-handle.is-derived .studio-auth-handle-icon {
  margin-left: -3px;
}

.studio-auth-account-pill, .studio-auth-account-pill-email, .studio-auth-field.is-handle.is-derived .studio-auth-address-value {
  letter-spacing: inherit;
  font-size: 1.125rem;
  font-weight: 500;
}

.studio-auth-field.is-handle.is-derived .studio-auth-address-value.is-empty {
  font-weight: 450;
}

.studio-auth-account-pill {
  padding-block: 5px;
}

.studio-auth-account-switch {
  width: 32px;
  height: 32px;
}

/* [project]/src/app/not-found.css [app-client] (css) */
.studio-not-found-root {
  justify-content: center;
  align-items: center;
  display: flex;
}

.studio-not-found-main {
  box-sizing: border-box;
  flex: 0 auto;
  width: 100%;
  max-width: 380px;
  padding: 24px 16px 32px;
}

.studio-not-found-card {
  text-align: center;
}

.studio-not-found-code {
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--cursor-accent-ink, var(--cursor-accent, var(--mos-accent)));
  margin: 12px 0 0;
  font-size: 12px;
  font-weight: 700;
}

.studio-not-found-title {
  margin-top: 4px !important;
  font-size: 1.35rem !important;
}

.studio-not-found-hint {
  color: var(--color-cursor-muted, var(--mos-muted));
  margin: 8px 0 0;
  padding: 0 4px;
  font-size: 13px;
  font-weight: 520;
  line-height: 1.45;
}

.studio-not-found-actions {
  gap: 10px;
  margin-top: 20px;
  padding-top: 4px;
  display: grid;
}

.studio-not-found-actions .studio-auth-primary {
  box-sizing: border-box;
  justify-content: center;
  align-items: center;
  width: 100%;
  text-decoration: none;
  display: inline-flex;
}

.studio-not-found-shuffle {
  color: color-mix(in srgb, var(--color-cursor-muted, var(--mos-muted)) 88%, transparent);
  margin: 0;
  font-size: 11.5px;
  font-weight: 520;
  line-height: 1.35;
}

@media (max-width: 899px) {
  .studio-not-found-main {
    padding: 12px 10px 24px;
  }
}

/*# sourceMappingURL=src_1izzivg._.css.map*/