/* [project]/src/studio/components/chrome/overlays/overlays.css [app-client] (css) */
.studio-overlay-dialog-backdrop {
  z-index: var(--studio-z-menu-veil, 900);
  position: fixed;
  inset: 0;
  background: none !important;
}

.studio-overlay-dialog-content {
  z-index: var(--studio-z-above-menu-veil, 901);
  outline: none;
  flex-direction: column;
  width: 100%;
  max-width: min(400px, 100vw - 32px);
  display: flex;
  position: fixed;
  top: 50%;
  left: 50%;
  overflow: hidden;
  transform: translate(-50%, -50%);
}

.studio-overlay-dialog, .studio-overlay-sheet {
  color: var(--mos-text);
  background: var(--mos-plate, var(--mos-panel)) !important;
  border: 1px solid var(--color-cursor-border-soft, var(--mos-border)) !important;
  border-radius: var(--studio-radius-overlay, 14px) !important;
  box-shadow: var(--cursor-shadow-menu, 0 16px 48px #00000059) !important;
}

[data-studio-overlay].studio-overlay-dialog {
  max-width: min(400px, 100vw - 32px) !important;
  padding: 0 !important;
}

.studio-overlay-dialog-head {
  box-sizing: border-box;
  min-height: var(--cursor-head-h, 36px);
  border-bottom: 1px solid var(--color-cursor-border-soft, var(--mos-border-soft));
  align-items: center;
  gap: 8px;
  padding: 0 6px 0 14px;
  display: flex;
}

.studio-overlay-dialog-head.is-no-close {
  padding-right: 14px;
}

.studio-overlay-dialog-title {
  letter-spacing: -.02em;
  min-width: 0;
  color: var(--color-cursor-text-bright, var(--mos-text));
  border: 0;
  flex: auto;
  margin: 0;
  padding: 0;
  font-size: 15px;
  font-weight: 650;
  line-height: 1.35;
}

.studio-overlay-dialog-close.cursor-icon-btn {
  flex: none;
  width: 28px !important;
  min-width: 28px !important;
  max-width: 28px !important;
  height: 28px !important;
  min-height: 28px !important;
  max-height: 28px !important;
  color: var(--color-cursor-muted) !important;
  box-shadow: none !important;
  background: none !important;
  border: 0 !important;
  border-radius: 10px !important;
}

.studio-overlay-dialog-close.cursor-icon-btn:hover:not(:disabled) {
  background: var(--color-cursor-hover, var(--mos-hover)) !important;
  color: var(--color-cursor-text, var(--mos-text)) !important;
}

.studio-overlay-confirm {
  flex-direction: column;
  gap: 0;
  display: flex;
}

.studio-overlay-confirm-icon {
  background: color-mix(in srgb, var(--cursor-accent, var(--color-cursor-accent)) 14%, var(--mos-plate));
  width: 40px;
  height: 40px;
  color: var(--cursor-accent-ink, var(--cursor-accent, var(--color-cursor-accent)));
  border-radius: 12px;
  place-items: center;
  margin: 14px 16px 0;
  display: grid;
}

.studio-overlay-confirm-icon.is-danger {
  background: color-mix(in srgb, var(--mos-danger, #f87171) 14%, var(--mos-plate));
  color: var(--mos-danger, #f87171);
}

.studio-overlay-confirm-icon svg {
  width: 20px;
  height: 20px;
}

.studio-overlay-confirm-body {
  color: var(--color-cursor-muted, var(--mos-muted));
  margin: 0;
  padding: 14px 16px 4px;
  font-size: 13px;
  line-height: 1.45;
}

.studio-overlay-confirm-actions {
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  padding: 14px 16px 16px;
  display: flex;
}

.studio-overlay-confirm-actions .studio-chrome-btn {
  min-width: 88px;
  height: 32px;
  padding: 0 16px;
  border-radius: 999px !important;
}

.studio-overlay-confirm-actions .studio-chrome-btn.is-primary {
  font-weight: 650;
  background: var(--cursor-accent, var(--color-cursor-accent)) !important;
  color: var(--cursor-on-accent, #fff) !important;
  border: 0 #0000 !important;
}

.studio-overlay-confirm-actions .studio-chrome-btn.is-primary:hover:not(:disabled) {
  filter: brightness(1.06);
}

.studio-overlay-confirm-btn-spin {
  width: 14px;
  height: 14px;
  animation: .7s linear infinite studio-overlay-confirm-spin;
}

@keyframes studio-overlay-confirm-spin {
  to {
    transform: rotate(360deg);
  }
}

.studio-overlay-dialog-content.studio-overlay-sheet {
  border-radius: 12px 12px 0 0 !important;
  width: 100% !important;
  max-width: none !important;
  inset: auto 0 0 !important;
  transform: none !important;
}

.studio-overlay-panel .studio-mobile-app-menu-sheet {
  width: 100% !important;
  height: auto !important;
  max-height: none !important;
  box-shadow: none !important;
  background: none !important;
  border: 0 !important;
  position: relative !important;
  inset: auto !important;
  transform: none !important;
}

.studio-overlay-backdrop {
  z-index: var(--studio-z-overlay, 50);
  background: #0006;
  position: fixed;
  inset: 0;
}

.studio-overlay-panel {
  z-index: var(--studio-z-sheet, 60);
  background: var(--mos-plate, var(--mos-panel));
  color: var(--mos-text);
  border: 1px solid var(--mos-border);
  border-radius: var(--studio-radius-overlay, 12px);
  position: fixed;
}

.studio-overlay-panel.is-side {
  border-radius: 0;
  width: min(420px, 100%);
  top: 0;
  bottom: 0;
  right: 0;
}

@media (max-width: 899px) {
  .studio-overlay-backdrop {
    background: none;
  }

  .studio-overlay-panel.is-bottom, .studio-overlay-panel.is-bottom.is-peek {
    border-radius: 22px;
    width: auto;
    max-height: 70dvh;
    inset: 50% 12px auto;
    overflow: auto;
    transform: translateY(-50%);
  }

  .studio-overlay-panel-head button[aria-label="Close"] {
    display: none;
  }
}

.studio-overlay-panel-head, .studio-overlay-actions {
  justify-content: space-between;
  align-items: center;
  gap: var(--studio-space-2, 8px);
  min-height: var(--studio-h-head, 32px);
  padding: 0 var(--studio-space-4, 16px);
  display: flex;
}

.studio-overlay-panel-body {
  padding: var(--studio-space-4, 16px);
}

.studio-overlay-menu {
  margin: 0;
  padding: 0;
  list-style: none;
}

.studio-overlay-menu button {
  align-items: center;
  gap: var(--studio-space-2, 8px);
  width: 100%;
  min-height: var(--studio-h-row, 36px);
  padding: 0 var(--studio-space-3, 12px);
  color: inherit;
  text-align: left;
  background: none;
  border: 0;
  display: flex;
}

.studio-overlay-error {
  color: var(--danger, var(--mos-error));
  font-size: var(--studio-type-meta, 12px);
  margin: 8px 0 0;
}

.studio-overlay-menu button.is-danger, .studio-overlay-actions button.is-danger {
  color: var(--danger, var(--mos-error));
}

/* [project]/src/studio/components/chrome/studio-action-menu.css [app-client] (css) */
.studio-action-menu .studio-action-section-label {
  color: var(--color-cursor-muted, var(--mos-muted));
  letter-spacing: .06em;
  text-transform: uppercase;
  margin: 0;
  padding: 5px 8px 3px;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
}

.studio-action-menu .cursor-tab-context-item.has-hint {
  align-items: flex-start;
  min-height: 44px;
  padding-top: 6px;
  padding-bottom: 6px;
}

.studio-action-menu .cursor-tab-context-item.has-hint .cursor-tab-context-item-icon {
  margin-top: 1px;
}

.studio-action-menu .cursor-tab-context-item-stack {
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  display: flex;
}

.studio-action-menu .cursor-tab-context-item-title {
  font-size: 12px;
  font-weight: 550;
  line-height: 1.2;
}

.studio-action-menu .cursor-tab-context-item-hint {
  color: var(--color-cursor-muted, var(--mos-muted));
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.25;
  overflow: hidden;
}

.studio-action-menu .cursor-tab-context-item.has-value {
  padding-right: 10px;
}

.studio-action-menu .studio-action-menu-value {
  color: var(--color-cursor-muted, var(--mos-text-muted));
  font-size: var(--studio-type-meta, 12px);
  white-space: nowrap;
  flex: none;
  margin-left: 12px;
  font-weight: 500;
  line-height: 1.2;
}

.studio-action-menu .studio-action-menu-check {
  width: 14px;
  height: 14px;
  color: var(--cursor-accent-ink, var(--cursor-accent, var(--mos-accent)));
  flex: none;
  margin-left: 8px;
}

.studio-action-menu.studio-dm-context-menu .cursor-tab-context-item.has-value .studio-dm-menu-caret {
  margin-left: 8px;
}

.studio-action-menu.has-checks .cursor-tab-context-item.is-selected {
  background: color-mix(in srgb, var(--cursor-accent, var(--mos-accent)) 10%, var(--mos-plate));
}

.studio-action-menu .studio-action-menu-custom {
  background: color-mix(in srgb, var(--mos-text) 4%, var(--mos-plate));
  border-radius: 10px;
  align-self: stretch;
  padding: 8px 10px;
}

.studio-action-menu-switch {
  min-height: 20px;
  font-size: var(--studio-type-meta, 12px);
  color: var(--color-cursor-text, var(--mos-text));
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  font-weight: 500;
  display: flex;
}

.studio-action-menu.is-edge .studio-action-menu-custom {
  padding: 10px 12px;
}

.studio-action-menu .studio-action-row-with-accessory {
  display: flex;
  position: relative;
}

.studio-action-menu .studio-action-row-with-accessory > .cursor-tab-context-item {
  flex: auto;
  min-width: 0;
}

.studio-action-menu .studio-action-row-accessory {
  background: var(--mos-plate-strong, var(--mos-plate));
  max-width: 76px;
  height: 22px;
  color: var(--color-cursor-text, var(--mos-text));
  white-space: nowrap;
  cursor: pointer;
  border: 0;
  border-radius: 999px;
  align-items: center;
  gap: 2px;
  padding: 0 4px 0 7px;
  font-size: 11px;
  font-weight: 500;
  line-height: 1;
  display: inline-flex;
  position: absolute;
  top: 50%;
  right: 6px;
  transform: translateY(-50%);
}

.studio-action-menu .studio-action-row-accessory:hover, .studio-action-menu .studio-action-row-accessory:focus-visible {
  background: color-mix(in srgb, var(--mos-plate-strong, var(--mos-plate)) 80%, var(--color-cursor-text, var(--mos-text)) 10%);
}

.studio-action-menu .studio-action-row-accessory:disabled {
  opacity: .5;
  cursor: default;
}

.studio-add-menu.studio-action-menu.has-min-width {
  min-width: min(var(--studio-action-menu-min-w), calc(100vw - 16px)) !important;
  max-width: min(max(var(--studio-action-menu-min-w), min(320px, calc(100vw - 24px))), calc(100vw - 16px)) !important;
}

.studio-add-menu.studio-action-menu.has-fixed-width {
  width: max-content !important;
  min-width: min(var(--studio-action-menu-w), calc(100vw - 16px)) !important;
  max-width: min(max(var(--studio-action-menu-w), 320px), calc(100vw - 16px)) !important;
}

.studio-add-menu.studio-action-menu:is(.has-min-width, .has-fixed-width) .studio-action-section {
  width: auto !important;
  max-width: none !important;
}

.studio-menu-circle-btn {
  box-sizing: border-box;
  flex: none;
  justify-content: center;
  align-items: center;
  border: 1px solid var(--color-cursor-border-soft, var(--mos-border-soft)) !important;
  background: var(--mos-page, var(--color-cursor-panel)) !important;
  width: 36px !important;
  min-width: 36px !important;
  height: 36px !important;
  min-height: 36px !important;
  color: var(--color-cursor-muted, var(--mos-muted)) !important;
  box-shadow: none !important;
  filter: none !important;
  border-radius: 999px !important;
  padding: 0 !important;
  display: inline-flex !important;
}

[data-appearance="light"] .studio-menu-circle-btn {
  background: var(--mos-plate) !important;
}

.studio-menu-circle-btn:hover, .studio-menu-circle-btn[aria-expanded="true"] {
  border-color: var(--color-cursor-border, var(--mos-border)) !important;
  background: var(--mos-hover, var(--color-cursor-hover)) !important;
  color: var(--color-cursor-text-bright) !important;
}

.studio-menu-circle-btn svg {
  width: 14px !important;
  height: 14px !important;
}

/* [project]/src/components/checkout/unified-checkout.css [app-client] (css) */
.unified-checkout {
  width: min(440px, 100%);
  max-height: calc(100dvh - 11rem);
  color: var(--color-cursor-text, var(--mos-text));
  box-sizing: border-box;
  margin: 0 auto;
  display: block;
  overflow: auto;
}

.unified-checkout-split {
  gap: 12px;
  min-width: 0;
  display: grid;
}

.unified-checkout-summary.studio-chrome-settings-card.studio-chrome-plate-surface, .unified-checkout-paycol.studio-chrome-settings-card.studio-chrome-plate-surface {
  box-sizing: border-box;
  min-width: 0;
}

.unified-checkout-summary.studio-chrome-settings-card.studio-chrome-plate-surface {
  background: radial-gradient(ellipse 80% 50% at 0 0,
      color-mix(in srgb, var(--cursor-accent) 22%, transparent),
      transparent 58%),
    color-mix(in srgb, var(--mos-plate) 72%, #14110f);
}

.unified-checkout-paycol.studio-chrome-settings-card.studio-chrome-plate-surface {
  background: var(--mos-plate);
}

[data-appearance="dark"] .unified-checkout-paycol.studio-chrome-settings-card.studio-chrome-plate-surface {
  background: color-mix(in srgb, var(--mos-plate) 62%, var(--mos-plate-strong));
}

.unified-checkout-summary .studio-chrome-settings-card-body, .unified-checkout-paycol .studio-chrome-settings-card-body {
  box-sizing: border-box;
  gap: 14px;
  padding: 18px;
  display: grid;
}

.unified-checkout-brand {
  align-items: center;
  gap: 10px;
  display: flex;
}

.unified-checkout-head h2 {
  letter-spacing: -.03em;
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.15;
}

.unified-checkout-due {
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
  margin: 0;
  display: flex;
}

.unified-checkout-due strong {
  letter-spacing: -.04em;
  font-variant-numeric: tabular-nums;
  font-size: 36px;
  font-weight: 750;
}

.unified-checkout-due span {
  color: var(--color-cursor-muted);
  font-size: 14px;
}

.unified-checkout-rate {
  color: var(--color-cursor-muted);
  margin: 0;
  font-size: 12px;
  line-height: 1.4;
}

.unified-checkout-lines {
  gap: 8px;
  margin: 0;
  display: grid;
}

.unified-checkout-lines div {
  justify-content: space-between;
  gap: 12px;
  font-size: 14px;
  display: flex;
}

.unified-checkout-lines dt, .unified-checkout-lines dd {
  margin: 0;
}

.unified-checkout-lines dt {
  gap: 2px;
  display: grid;
}

.unified-checkout-lines dt span {
  color: var(--color-cursor-muted);
  font-size: 12px;
  font-weight: 500;
}

.unified-checkout-lines dd {
  font-variant-numeric: tabular-nums;
}

.unified-checkout-lines .is-total {
  border-top: 1px solid var(--color-cursor-border);
  padding-top: 8px;
  font-weight: 650;
}

.unified-checkout-currencies {
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  display: grid;
}

.unified-checkout-currencies button {
  border: 1px solid var(--color-cursor-border);
  background: color-mix(in srgb, var(--mos-page) 70%, transparent);
  min-height: 44px;
  color: inherit;
  text-align: left;
  cursor: pointer;
  box-sizing: border-box;
  border-radius: 12px;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  display: flex;
}

.unified-checkout-currencies button.is-selected {
  background: var(--mos-plate-strong);
  border-color: var(--cursor-accent);
}

.unified-checkout-currencies strong {
  font-variant-numeric: tabular-nums;
  margin-left: auto;
  font-size: 13px;
}

.unified-checkout-flag {
  font-size: 18px;
  line-height: 1;
}

.unified-checkout-methods {
  gap: 8px;
  display: grid;
}

.unified-checkout-methods button {
  border: 1px solid var(--color-cursor-border);
  background: color-mix(in srgb, var(--mos-page) 70%, transparent);
  width: 100%;
  min-height: 56px;
  color: inherit;
  text-align: left;
  cursor: pointer;
  box-sizing: border-box;
  border-radius: 12px;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  display: flex;
}

.unified-checkout-methods button.is-selected {
  background: var(--mos-plate-strong);
  border-color: var(--cursor-accent);
}

.unified-checkout-method-copy {
  gap: 2px;
  min-width: 0;
  display: grid;
}

.unified-checkout-method-copy span {
  color: var(--color-cursor-muted);
  font-size: 13px;
}

.unified-checkout-logo {
  box-sizing: border-box;
  border-radius: 8px;
  flex: none;
  justify-content: center;
  align-items: center;
  min-width: 56px;
  height: 32px;
  padding: 0 8px;
  display: inline-flex;
}

.unified-checkout-logo img {
  width: auto;
  max-width: 72px;
  height: 22px;
  display: block;
}

.unified-checkout-logo.is-wam {
  background: #14110f;
}

.unified-checkout-logo.is-paypal {
  background: #fff;
}

.unified-checkout-block h3 {
  margin: 0 0 8px;
  font-size: 14px;
  font-weight: 650;
}

.unified-checkout-email {
  border: 1px solid var(--color-cursor-border);
  background: color-mix(in srgb, var(--mos-page) 70%, transparent);
  width: 100%;
  min-height: 44px;
  color: inherit;
  font: inherit;
  box-sizing: border-box;
  border-radius: 12px;
  padding: 0 12px;
  font-size: 14px;
}

.unified-checkout-pay, .unified-checkout-pay.studio-chrome-btn {
  flex: none;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 48px;
  min-height: 44px;
  display: flex;
}

.unified-checkout-status, .unified-checkout-legal {
  color: var(--color-cursor-muted);
  margin: 0;
  font-size: 13px;
}

.unified-checkout-legal {
  gap: 12px;
  display: flex;
}

.unified-checkout-legal a {
  color: inherit;
}

.unified-checkout-picker .studio-billing-plans {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  padding: 0;
}

.unified-checkout-picker .studio-billing-card ul, .unified-checkout-picker .studio-billing-equiv {
  display: none;
}

.unified-checkout-picker .studio-billing-card {
  gap: 8px;
  padding: 12px 14px;
}

.unified-checkout-picker .studio-billing-price {
  font-size: 18px;
}

@media (max-width: 899px) {
  .unified-checkout-picker .studio-billing-plans, .unified-checkout-currencies {
    grid-template-columns: 1fr;
  }
}

@media (min-width: 900px) {
  .unified-checkout {
    width: 100%;
    max-width: none;
    max-height: none;
    overflow: visible;
  }

  .unified-checkout-split {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: stretch;
    gap: 16px;
  }

  .unified-checkout.is-viewport {
    z-index: 80;
    background: radial-gradient(ellipse 70% 40% at 15% 0%,
        color-mix(in srgb, var(--cursor-accent) 16%, transparent),
        transparent 55%),
      var(--mos-page);
    width: auto;
    height: 100dvh;
    margin: 0;
    position: fixed;
    inset: 0;
    overflow: hidden;
  }

  .unified-checkout.is-viewport .unified-checkout-split {
    box-sizing: border-box;
    height: 100%;
    padding: 16px;
  }

  .unified-checkout.is-viewport .studio-chrome-settings-card {
    height: 100%;
    min-height: 0;
    overflow: hidden;
  }

  .unified-checkout.is-viewport .studio-chrome-settings-card-body {
    min-height: 0;
    overflow: auto;
  }
}

.unified-checkout-back {
  color: inherit;
  font: inherit;
  cursor: pointer;
  opacity: .85;
  background: none;
  border: 0;
  border-radius: 999px;
  align-items: center;
  gap: 6px;
  padding: 6px 10px 6px 6px;
  font-size: 13px;
  font-weight: 600;
  display: inline-flex;
}

.unified-checkout-back:hover {
  opacity: 1;
  background: color-mix(in srgb, currentColor 8%, transparent);
}

.uc2 {
  --uc2-accent: var(--studio-auth-accent, var(--mos-accent, #3b82f6));
  --uc2-line: color-mix(in srgb, currentColor 12%, transparent);
  --uc2-muted: color-mix(in srgb, currentColor 60%, transparent);
  color: var(--mos-text, inherit);
  width: 100%;
}

.uc2.is-viewport {
  z-index: 80;
  background: var(--mos-page, #fff);
  position: fixed;
  inset: 0;
  overflow: auto;
}

.uc2-split {
  grid-template-columns: 1fr;
  width: 100%;
  display: grid;
}

.uc2-col {
  box-sizing: border-box;
  flex-direction: column;
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
  padding: 24px 20px 32px;
  display: flex;
}

@media (min-width: 900px) {
  .uc2-split {
    grid-template-columns: 1fr 1fr;
    min-height: 100%;
  }

  .uc2.is-viewport .uc2-split {
    min-height: 100dvh;
  }

  .uc2-left .uc2-col {
    justify-content: center;
    min-height: 100%;
    margin: 0 48px 0 auto;
    padding: 64px 0;
  }

  .uc2-right .uc2-col {
    justify-content: center;
    min-height: 100%;
    margin: 0 auto 0 48px;
    padding: 64px 0 88px;
  }

  .uc2-left, .uc2-right {
    display: flex;
  }
}

.uc2-brand {
  align-items: center;
  gap: 10px;
  margin-bottom: 28px;
  display: flex;
}

.uc2-back {
  width: 28px;
  height: 28px;
  color: inherit;
  cursor: pointer;
  background: none;
  border: 0;
  border-radius: 999px;
  justify-content: center;
  align-items: center;
  display: inline-flex;
}

.uc2-back:hover {
  background: var(--uc2-line);
}

.uc2-back-text {
  color: var(--uc2-muted);
  font: inherit;
  cursor: pointer;
  background: none;
  border: 0;
  padding: 0;
  font-size: 13px;
}

.uc2-back-text:hover {
  color: inherit;
}

.uc2-heading {
  color: var(--uc2-muted);
  margin: 0 0 4px;
  font-size: 15px;
  font-weight: 500;
}

.uc2-price {
  align-items: baseline;
  gap: 8px;
  margin: 0 0 16px;
  display: flex;
}

.uc2-price strong {
  letter-spacing: -.02em;
  font-size: 36px;
  font-weight: 650;
  line-height: 1.1;
}

.uc2-price span {
  color: var(--uc2-muted);
  font-size: 14px;
  line-height: 1.2;
}

.uc2-currency {
  background: var(--uc2-line);
  border-radius: 999px;
  align-self: flex-start;
  gap: 2px;
  padding: 2px;
  display: inline-flex;
}

.uc2-currency button {
  font: inherit;
  color: var(--uc2-muted);
  cursor: pointer;
  background: none;
  border: 0;
  border-radius: 999px;
  padding: 4px 12px;
  font-size: 12px;
  font-weight: 600;
}

.uc2-currency button.is-selected {
  background: var(--mos-page, #fff);
  color: var(--mos-text, inherit);
  box-shadow: 0 1px 2px #0000001f;
}

.uc2-rate {
  color: var(--uc2-muted);
  margin: 8px 0 28px;
  font-size: 11.5px;
}

.uc2-items {
  gap: 12px;
  margin-bottom: 20px;
  display: grid;
}

.uc2-item {
  grid-template-columns: 36px 1fr auto;
  align-items: center;
  gap: 12px;
  display: grid;
}

.uc2-item-icon {
  background: var(--uc2-line);
  border-radius: 10px;
  justify-content: center;
  align-items: center;
  width: 36px;
  height: 36px;
  display: inline-flex;
}

.uc2-item-copy {
  min-width: 0;
  display: grid;
}

.uc2-item-copy strong {
  font-size: 14px;
  font-weight: 600;
}

.uc2-item-copy span {
  color: var(--uc2-muted);
  font-size: 12px;
}

.uc2-item-price {
  white-space: nowrap;
  font-size: 14px;
  font-weight: 600;
}

.uc2-totals {
  margin: 0 0 0 48px;
  display: grid;
}

.uc2-totals > div {
  border-top: 1px solid var(--uc2-line);
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  font-size: 14px;
  display: flex;
}

.uc2-totals dt, .uc2-totals dd {
  margin: 0;
}

.uc2-totals dt {
  color: var(--uc2-muted);
}

.uc2-totals .is-total dt, .uc2-totals .is-total dd {
  color: inherit;
  font-weight: 700;
}

.uc2-label {
  margin: 0 0 8px;
  font-size: 13px;
  font-weight: 600;
  display: block;
}

.uc2-email {
  box-sizing: border-box;
  border: 1px solid var(--uc2-line);
  background: color-mix(in srgb, currentColor 4%, transparent);
  width: 100%;
  height: 40px;
  color: inherit;
  font: inherit;
  border-radius: 12px;
  margin-bottom: 24px;
  padding: 0 12px;
  font-size: 14px;
}

.uc2-methods {
  border: 1px solid var(--uc2-line);
  border-radius: 12px;
  margin-bottom: 20px;
  overflow: hidden;
}

.uc2-method {
  border: 0;
  border-top: 1px solid var(--uc2-line);
  width: 100%;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  background: none;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  display: flex;
}

.uc2-method:first-child {
  border-top: 0;
}

.uc2-radio {
  border: 1.5px solid color-mix(in srgb, currentColor 35%, transparent);
  box-sizing: border-box;
  border-radius: 999px;
  flex: none;
  width: 16px;
  height: 16px;
}

.uc2-method.is-selected .uc2-radio {
  border: 5px solid var(--uc2-accent);
}

.uc2-logo {
  border-radius: 7px;
  flex: none;
  justify-content: center;
  align-items: center;
  height: 26px;
  padding: 0 8px;
  display: inline-flex;
}

.uc2-logo.is-wam {
  background: #14110f;
}

.uc2-logo.is-paypal {
  background: #fff;
  box-shadow: inset 0 0 0 1px #00000014;
}

.uc2-logo img {
  width: auto;
  height: 16px;
  display: block;
}

.uc2-method-copy {
  min-width: 0;
  display: grid;
}

.uc2-method-copy strong {
  font-size: 14px;
  font-weight: 600;
}

.uc2-method-copy span {
  color: var(--uc2-muted);
  font-size: 12px;
}

.uc2-pay {
  background: var(--uc2-accent);
  color: #fff;
  width: 100%;
  height: 46px;
  font: inherit;
  cursor: pointer;
  border: 0;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 650;
}

.uc2-pay:disabled {
  opacity: .55;
  cursor: default;
}

.uc2-pay:hover:not(:disabled) {
  filter: brightness(1.06);
}

.uc2-status {
  color: var(--uc2-muted);
  text-align: center;
  margin: 10px 0 0;
  font-size: 12.5px;
}

.uc2-skip {
  justify-content: center;
  margin-top: 12px;
  display: flex;
}

.uc2-skip button, .uc2-skip .studio-auth-skip {
  all: unset;
  cursor: pointer;
  color: var(--uc2-muted);
  text-underline-offset: 3px;
  font-size: 13px;
  text-decoration: underline;
}

.uc2-skip button:hover {
  color: inherit;
}

.uc2-legal {
  color: var(--uc2-muted);
  justify-content: center;
  gap: 10px;
  margin: 28px 0 0;
  font-size: 12px;
  display: flex;
}

.uc2-legal a {
  color: inherit;
  text-decoration: none;
}

.uc2-legal a:hover {
  text-decoration: underline;
}

.uc2, .uc2 .uc2-col {
  text-align: left;
}

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

.uc2-price span {
  white-space: nowrap;
}

.uc2-label, .uc2-heading {
  text-align: left;
}

.uc2-skip, .uc2-legal, .uc2-status {
  text-align: center;
}

.uc2 {
  --uc2-accent: var(--studio-auth-accent, #be0e55);
}

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

.uc2-logo-mark {
  flex-basis: 100%;
  order: -1;
  margin-bottom: 14px;
  display: inline-flex;
}

.uc2-secure {
  color: var(--uc2-muted);
  justify-content: center;
  align-items: center;
  gap: 6px;
  margin: 10px 0 0;
  font-size: 12px;
  display: flex;
}

@media (min-width: 900px) {
  .uc2-left, .uc2-right {
    justify-content: center;
    align-items: center;
  }

  .uc2-left .uc2-col, .uc2-right .uc2-col {
    min-height: 0;
    margin: auto;
    padding: 48px 24px 88px;
  }
}

.uc2 {
  --uc2-accent: var(--mos-accent);
  --uc2-line: var(--mos-border-soft);
  --uc2-muted: var(--mos-text-muted, var(--mos-muted));
  color: var(--mos-text);
}

.uc2.is-viewport {
  background: var(--mos-page);
}

.uc2-left {
  background: var(--mos-plate-strong);
}

.uc2-currency {
  background: var(--mos-plate);
}

.uc2-currency button.is-selected {
  background: var(--mos-page);
  color: var(--mos-text);
}

.uc2-item-icon {
  background: var(--mos-plate);
}

.uc2-email {
  background: var(--mos-plate);
  border-color: var(--mos-border-soft);
  color: var(--mos-text);
}

.uc2-methods, .uc2-method {
  border-color: var(--mos-border-soft);
}

.uc2-method:hover {
  background: var(--mos-hover);
}

.uc2-method.is-selected {
  background: color-mix(in srgb, var(--mos-accent) 12%, transparent);
}

.uc2-pay {
  background: var(--mos-accent) !important;
  color: var(--mos-accent-contrast, var(--mos-page)) !important;
}

.uc2-method, .uc2-method:active, .uc2-method:focus {
  transition: none !important;
  animation: none !important;
  transform: scale3d(1, 1, 1) !important;
}

.uc2-logo-mark {
  align-items: center;
  gap: 10px;
}

.uc2-logo-circle {
  background: var(--mos-plate);
  border: 1px solid var(--mos-border-soft);
  border-radius: 999px;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  display: inline-flex;
}

.uc2-wordmark {
  color: var(--mos-text);
  font-size: 15px;
  font-weight: 650;
}

.uc2-methods {
  isolation: isolate;
  overflow: hidden;
}

.uc2-method:first-child {
  border-top-left-radius: 11px;
  border-top-right-radius: 11px;
}

.uc2-method:last-child {
  border-bottom-right-radius: 11px;
  border-bottom-left-radius: 11px;
}

.uc2-item {
  grid-template-columns: 1fr auto;
}

.uc2-totals {
  margin-left: 0;
}

.uc2-logo-circle {
  width: 30px;
  height: 30px;
}

.uc2-wordmark {
  font-size: 14px;
}

.uc2-logo-mark {
  gap: 8px;
}

.uc2-pay {
  color: var(--mos-accent-fg, #fff) !important;
}

html.dark .uc2-pay, [data-theme="dark"] .uc2-pay, .dark .uc2-pay {
  color: #fff !important;
}

@media (prefers-color-scheme: dark) {
  :root:not(.light):not([data-theme="light"]) .uc2-pay {
    color: #fff !important;
  }
}

.uc2-left {
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  background: color-mix(in srgb, var(--mos-page) 72%, transparent) !important;
}

.uc2-right {
  background: var(--mos-page) !important;
}

:root:not(.dark):not([data-theme="dark"]) .uc2-logo-circle {
  box-shadow: none;
  filter: none;
  background: #fff;
}

.uc2-logo-circle, .uc2-logo-circle * {
  box-shadow: none !important;
  filter: none !important;
}

html.dark .uc2-logo-circle, [data-theme="dark"] .uc2-logo-circle {
  background: var(--mos-plate);
}

.uc2-logo-circle {
  box-shadow: none !important;
  background: #14110f !important;
  border: 0 !important;
}

.uc2-logo-circle .uc2-logo-on-light {
  display: none;
}

.uc2-logo-circle .uc2-logo-on-dark {
  display: inline-flex;
}

html[data-appearance="dark"] .uc2-logo-circle, html.dark .uc2-logo-circle {
  background: #fff !important;
}

html[data-appearance="dark"] .uc2-logo-circle .uc2-logo-on-light, html.dark .uc2-logo-circle .uc2-logo-on-light {
  display: inline-flex;
}

html[data-appearance="dark"] .uc2-logo-circle .uc2-logo-on-dark, html.dark .uc2-logo-circle .uc2-logo-on-dark {
  display: none;
}

.uc2-logo-circle .mos-brand-mark {
  opacity: 1 !important;
}

.uc2-left {
  -webkit-backdrop-filter: blur(8px);
  background: color-mix(in srgb, var(--mos-page) 22%, transparent) !important;
}

html[data-appearance="dark"] .uc2 .uc2-logo-circle .uc2-logo-on-light img, html.dark .uc2 .uc2-logo-circle .uc2-logo-on-light img {
  filter: brightness(0) !important;
}

.uc2-left .uc2-col, .uc2-items, .uc2-item, .uc2-totals, .uc2-totals > div, .uc2 dl, .uc2 dt, .uc2 dd {
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  background: none !important;
}

.uc2-left:before, .uc2-left:after, .uc2-left .uc2-col:before, .uc2-left .uc2-col:after {
  content: none !important;
}

.uc2-split {
  align-items: stretch;
}

.uc2-left {
  align-self: stretch;
  min-height: 100%;
  background-image: none !important;
}

@media (min-width: 900px) {
  .uc2.is-viewport .uc2-split, .uc2.is-viewport .uc2-left {
    min-height: 100dvh;
  }
}

.uc2 .uc2-skip button, .uc2 .uc2-skip button.studio-auth-skip {
  text-decoration: none !important;
}

.uc2 .uc2-skip button:hover {
  text-underline-offset: 3px;
  text-decoration: underline !important;
}

.uc2 .uc2-split > .uc2-left {
  background-attachment: local;
  background-color: color-mix(in srgb, var(--mos-page) 22%, transparent) !important;
  background-image: linear-gradient(160deg, color-mix(in srgb, var(--mos-accent) 18%, transparent) 0%, color-mix(in srgb, var(--mos-accent) 6%, transparent) 45%, transparent 100%) !important;
}

.uc2-currency-row {
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 28px;
  display: flex;
}

.uc2-currency-row .uc2-currency {
  align-self: center;
}

.uc2-currency-row .uc2-rate {
  color: var(--uc2-muted);
  margin: 0;
  font-size: 11.5px;
  line-height: 1;
}

.uc2-currency-spacer {
  height: 12px;
}

@media (max-width: 899px) {
  .uc2-brand {
    justify-content: center;
  }

  .uc2-logo-mark {
    text-align: center;
    flex-direction: column;
    flex-basis: 100%;
    justify-content: center;
    align-items: center;
    gap: 6px;
  }
}

html body .uc2 .uc2-method, html body .uc2 .uc2-method:active, html body .uc2 .uc2-method:focus, html body .uc2 .uc2-method:hover, html body .uc2 .uc2-method *, html body .uc2 .uc2-method:active * {
  -webkit-tap-highlight-color: transparent !important;
  filter: none !important;
  transition: none !important;
  animation: none !important;
  transform: scale3d(1, 1, 1)translate3d(0, 0, 0) !important;
}

html body .uc2 .uc2-method:before, html body .uc2 .uc2-method:after, html body .uc2 .uc2-method:active:before, html body .uc2 .uc2-method:active:after {
  content: none !important;
  display: none !important;
}

html body .uc2 .uc2-method:active:not(.is-selected) {
  background: none !important;
}

html body .uc2 .uc2-method.is-selected:active {
  background: color-mix(in srgb, var(--mos-accent) 12%, transparent) !important;
}

html body .uc2 .uc2-method:focus:not(:focus-visible) {
  box-shadow: none !important;
  outline: none !important;
}

html body .uc2 .uc2-split > .uc2-left {
  background-color: #0000 !important;
  background-image: linear-gradient(160deg,
    color-mix(in srgb, var(--mos-accent) var(--uc2-grad-a, 20%), transparent) 0%,
    color-mix(in srgb, var(--mos-accent) var(--uc2-grad-b, 12%), transparent) 50%,
    color-mix(in srgb, var(--mos-accent) var(--uc2-grad-c, 8%), transparent) 100%) !important;
  -webkit-backdrop-filter: blur(6px) !important;
  box-shadow: none !important;
}

html body .uc2 .uc2-split > .uc2-left:before, html body .uc2 .uc2-split > .uc2-left:after {
  content: none !important;
}

html body .uc2.is-viewport, html body .uc2 .uc2-split {
  background: none !important;
}

html body .studio-auth-page:has(.uc2) {
  background: none !important;
}

html body .studio-auth-page:has(.uc2) .studio-auth-card-body {
  background: none !important;
}

html body .uc2 .uc2-currency {
  -webkit-backdrop-filter: blur(6px);
  background: color-mix(in srgb, var(--mos-text) 10%, transparent) !important;
}

html body .uc2 .uc2-currency button.is-selected {
  background: var(--mos-page) !important;
  color: var(--mos-text) !important;
  background: color-mix(in srgb, var(--mos-page) 75%, transparent) !important;
}

@media (min-width: 768px) {
  html body .uc2 .uc2-left .uc2-col {
    position: relative;
    left: -32px;
  }
}

@media (min-width: 768px) and (max-width: 899px) {
  html body .uc2 .uc2-left .uc2-col {
    left: 0;
  }
}

html body .studio-billing-pane.is-checkout {
  border-radius: inherit;
  overflow: hidden;
}

html body .studio-billing-pane.is-checkout .uc2, html body .studio-billing-pane.is-checkout .uc2-split {
  border-radius: inherit;
  overflow: hidden;
  box-shadow: none !important;
  border: 0 !important;
  outline: 0 !important;
}

html body .studio-billing-pane.is-checkout .uc2-split > .uc2-left {
  border-top-left-radius: var(--studio-chrome-radius, 16px);
  border-bottom-left-radius: var(--studio-chrome-radius, 16px);
  box-shadow: none !important;
  border: 0 !important;
  outline: 0 !important;
  margin: 0 !important;
}

html body .uc2 .uc2-back-link {
  color: var(--uc2-muted);
  font: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  background: none;
  border: 0;
  border-radius: 999px;
  align-items: center;
  gap: 6px;
  margin-left: -8px;
  padding: 4px 10px 4px 8px;
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  display: inline-flex;
  transition: none !important;
  transform: none !important;
}

html body .uc2 .uc2-back-link svg {
  color: inherit;
  stroke: currentColor;
  flex: none;
}

html body .uc2 .uc2-back-link:hover, html body .uc2 .uc2-back-link:focus-visible {
  color: var(--mos-text);
  background: var(--mos-hover, color-mix(in srgb, var(--mos-text) 8%, transparent));
}

html body .uc2 .uc2-back-link:active {
  transform: none !important;
}

.uc2-receipts {
  margin-bottom: 24px;
}

.uc2-check {
  box-sizing: border-box;
  border: 1.5px solid color-mix(in srgb, var(--mos-text) 35%, transparent);
  width: 16px;
  height: 16px;
  color: var(--mos-accent-fg, #fff);
  border-radius: 5px;
  flex: none;
  justify-content: center;
  align-items: center;
  display: inline-flex;
}

.uc2-receipt.is-selected .uc2-check {
  background: var(--mos-accent);
  border-color: var(--mos-accent);
}

.uc2-receipt .uc2-method-copy strong {
  overflow-wrap: anywhere;
}

html body .uc2 .uc2-logo-circle, html[data-appearance="dark"] body .uc2 .uc2-logo-circle, html.dark body .uc2 .uc2-logo-circle {
  background: var(--mos-accent) !important;
  box-shadow: none !important;
  border: 0 !important;
}

html body .uc2 .uc2-logo-circle .uc2-logo-on-light {
  display: none !important;
}

html body .uc2 .uc2-logo-circle .uc2-logo-on-dark {
  display: inline-flex !important;
}

html body .uc2 .uc2-logo-circle .uc2-logo-on-dark img {
  filter: brightness(0) invert() !important;
}

html body .uc2 :is(.uc2-method, .uc2-currency button) {
  --studio-press-on: 1 !important;
}

html body .uc2 .uc2-logo-mark {
  align-items: center;
  display: inline-flex;
}

html body .uc2 .uc2-logo-circle {
  flex: none;
}

html body .uc2 .uc2-logo-circle .mos-brand-mark, html body .uc2 .uc2-logo-circle picture {
  justify-content: center;
  align-items: center;
  display: flex;
}

html body .uc2 .uc2-wordmark {
  line-height: 30px;
  display: inline-block;
}

.uc2-pp, .uc2-pp-fields {
  flex-direction: column;
  gap: 10px;
  display: flex;
}

.uc2-pp-fields[hidden], .uc2-pp [hidden] {
  display: none !important;
}

.uc2-pp-row {
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  display: grid;
}

.uc2-pp-pill {
  border: 1px solid var(--mos-border-soft);
  background: var(--mos-plate);
  box-sizing: border-box;
  border-radius: 999px;
  height: 46px;
  overflow: hidden;
}

.uc2-pp-pill:focus-within {
  border-color: var(--mos-accent);
}

.uc2-pp-pill > div {
  width: 100%;
  height: 100%;
}

.uc2-pp .uc2-pay {
  margin-top: 4px;
}

.uc2-pp .uc2-pay, .uc2-pp .uc2-pay:active {
  transition: none !important;
  animation: none !important;
  transform: scale3d(1, 1, 1) !important;
}

.uc2-pp-or {
  text-align: center;
  color: var(--uc2-muted);
  margin: 2px 0;
  font-size: 12px;
}

.uc2-pp-loading {
  text-align: center;
  color: var(--uc2-muted);
  margin: 0;
  font-size: 13px;
}

.uc2-pp-link {
  justify-content: center;
  align-items: center;
  text-decoration: none;
  display: flex;
}

@media (min-width: 900px) {
  html body .uc2.is-viewport {
    height: 100dvh;
    overflow: hidden;
  }

  html body .uc2.is-viewport .uc2-split {
    height: 100dvh;
    min-height: 0 !important;
  }

  html body .studio-billing-pane.is-checkout .uc2, html body .studio-billing-pane.is-checkout .uc2-split {
    height: 100%;
    max-height: 100%;
    min-height: 0 !important;
  }

  html body .uc2 .uc2-split {
    grid-template-rows: minmax(0, 1fr);
    align-items: stretch;
  }

  html body .uc2 .uc2-split > .uc2-left {
    height: auto;
    overflow: hidden;
    min-height: 0 !important;
  }

  html body .uc2 .uc2-split > .uc2-right {
    overscroll-behavior: contain;
    display: flex;
    overflow-y: auto;
    min-height: 0 !important;
  }

  html body .uc2 .uc2-right .uc2-col {
    flex: none;
    min-height: 0 !important;
  }
}

.uc2.is-gradient-strong {
  --uc2-grad-a: 34%;
  --uc2-grad-b: 20%;
  --uc2-grad-c: 12%;
}

.uc2-pp-paypal {
  isolation: isolate;
  background: none;
  border-radius: 999px;
  overflow: hidden;
}

.uc2-pp-paypal > div {
  border-radius: 999px;
}

.uc2-pp-head {
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  display: flex;
}

.uc2-pp-title {
  color: var(--mos-text);
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 600;
  display: inline-flex;
}

.uc2-pp-brands {
  align-items: center;
  gap: 6px;
  display: inline-flex;
}

.uc2-pp-brand {
  object-fit: cover;
  width: 24px;
  height: 16px;
  box-shadow: 0 0 0 1px var(--mos-border-soft);
  border-radius: 3px;
  display: block;
}

.uc2-pp-card {
  border: 1px solid var(--mos-border-soft);
  background: var(--mos-plate);
  border-radius: 14px;
  overflow: hidden;
}

.uc2-pp-card .uc2-pp-row {
  grid-template-columns: 1fr 1fr;
  gap: 0;
  display: grid;
}

.uc2-pp-field {
  box-sizing: border-box;
  border-top: 1px solid var(--mos-border-soft);
  height: 46px;
  position: relative;
  overflow: hidden;
}

.uc2-pp-card > .uc2-pp-field:first-child {
  border-top: 0;
}

.uc2-pp-row > .uc2-pp-field + .uc2-pp-field {
  border-left: 1px solid var(--mos-border-soft);
}

.uc2-pp-field:after {
  content: "";
  pointer-events: none;
  box-shadow: none;
  border-radius: 0;
  position: absolute;
  inset: 0;
}

.uc2-pp-field.is-invalid:after {
  box-shadow: inset 0 0 0 2px var(--mos-danger, var(--mos-accent));
}

.uc2-pp-card > .uc2-pp-field:first-child:after {
  border-top-left-radius: 13px;
  border-top-right-radius: 13px;
}

.uc2-pp-row > .uc2-pp-field:first-child:after {
  border-bottom-left-radius: 13px;
}

.uc2-pp-row > .uc2-pp-field:last-child:after {
  border-bottom-right-radius: 13px;
}

.uc2-pp-pay {
  justify-content: center;
  align-items: center;
  gap: 8px;
  display: inline-flex;
}

.uc2-pp-secure {
  color: var(--uc2-muted);
  text-align: center;
  justify-content: center;
  align-items: center;
  gap: 5px;
  margin: 0;
  font-size: 11.5px;
  display: flex;
}

.uc2-pp-icon {
  color: var(--uc2-muted);
  pointer-events: none;
  z-index: 1;
  display: inline-flex;
  position: absolute;
  top: 50%;
  left: 25px;
  transform: translateY(-50%);
}

.uc2-pp-slot {
  display: block;
}

.uc2-pp-fake {
  all: unset;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  color: var(--mos-text);
  padding: 0 14px 0 calc(40px + 1.2rem);
  font-size: 15px;
}

.uc2-pp-fake::placeholder {
  color: var(--uc2-muted);
}

.uc2-pp-paypal-fake {
  background: var(--mos-plate);
  border: 1px solid var(--mos-border-soft);
  border-radius: 999px;
  justify-content: center;
  align-items: center;
  height: 46px;
  display: flex;
}

.uc2-pp-paypal-fake img {
  max-width: 90px;
  display: block;
  width: auto !important;
  height: 18px !important;
}

.uc2-skip-left {
  margin: 0 0 24px;
}

@media (min-width: 900px) {
  html body .uc2 .uc2-split > .uc2-left {
    position: relative;
  }

  .uc2-skip-left {
    margin: 0;
    position: absolute;
    bottom: 32px;
    left: 0;
    right: 0;
  }
}

.uc2-skip-left {
  box-sizing: border-box;
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
  padding: 0 20px 48px;
}

@media (min-width: 900px) {
  .uc2-skip-left {
    padding: 0 24px;
    position: absolute;
    bottom: 60px;
    left: 0;
    right: 0;
  }
}

@media (min-width: 768px) {
  html body .uc2 .uc2-skip-left-inner {
    position: relative;
    left: -32px;
  }
}

@media (min-width: 768px) and (max-width: 899px) {
  html body .uc2 .uc2-skip-left-inner {
    left: 0;
  }
}

.uc2-pp {
  position: relative;
}

.uc2-pp-fields.is-pending {
  opacity: .001;
  pointer-events: none;
  position: absolute;
  inset: 0 0 auto;
}

.uc2-pp-fields.is-ready {
  animation: .16s ease-out uc2-pp-in;
}

@keyframes uc2-pp-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.uc2-pp-skeleton {
  flex-direction: column;
  gap: 12px;
  display: flex;
}

.uc2-pp-skeleton .uc2-pp-field {
  align-items: center;
  padding: 0 14px 0 calc(40px + 1.2rem);
  display: flex;
}

.uc2-pp-skel-bar {
  background: color-mix(in srgb, var(--mos-text) 9%, transparent);
  border-radius: 6px;
  display: block;
}

.uc2-pp-skel-bar.is-title {
  width: 96px;
  height: 12px;
}

.uc2-pp-skel-bar.is-brands {
  border-radius: 4px;
  width: 84px;
  height: 16px;
}

.uc2-pp-skel-bar.is-text {
  width: 40%;
  height: 12px;
}

.uc2-pp-skel-bar.is-wide {
  width: 58%;
}

.uc2-pp-skel-bar.is-short {
  width: 52%;
}

.uc2-pp-skel-pay {
  background: color-mix(in srgb, var(--mos-accent) 22%, var(--mos-plate));
  border-radius: 999px;
  height: 46px;
  margin-top: 4px;
}

.uc2-pp-skel-bar, .uc2-pp-skel-pay {
  position: relative;
  overflow: hidden;
}

.uc2-pp-skel-bar:after, .uc2-pp-skel-pay:after {
  content: "";
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--mos-page) 55%, transparent), transparent);
  animation: 1.3s ease-in-out infinite uc2-pp-shimmer;
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
}

@keyframes uc2-pp-shimmer {
  to {
    transform: translateX(100%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .uc2-pp-skel-bar:after, .uc2-pp-skel-pay:after {
    animation: none;
    display: none;
  }

  .uc2-pp-skel-bar, .uc2-pp-skel-pay {
    animation: 1.6s ease-in-out infinite uc2-pp-pulse;
  }
}

@keyframes uc2-pp-pulse {
  50% {
    opacity: .55;
  }
}

.uc2-pp-slot {
  overflow: hidden;
}

html body .uc2-currency-toggle {
  -webkit-backdrop-filter: blur(6px);
  border-radius: 999px;
  gap: 2px;
  padding: 2px;
  display: inline-flex;
  background: color-mix(in srgb, var(--mos-text) 10%, transparent) !important;
}

html body .uc2-currency-toggle button {
  font: inherit;
  color: var(--mos-text-muted, var(--mos-muted));
  cursor: pointer;
  background: none;
  border: 0;
  border-radius: 999px;
  padding: 4px 12px;
  font-size: 12px;
  font-weight: 600;
  transition: none !important;
  transform: none !important;
}

html body .uc2-currency-toggle button.is-selected {
  box-shadow: 0 1px 2px color-mix(in srgb, var(--mos-text) 12%, transparent);
  background: color-mix(in srgb, var(--mos-page) 75%, transparent) !important;
  color: var(--mos-text) !important;
}

.studio-billing-choose .uc2-currency-toggle {
  margin-top: 10px;
}

.uc2-pp-field .uc2-pp-slot {
  position: absolute;
  inset: -6px;
}

.uc2-pp-field:after {
  z-index: 2;
}

.uc2-pp-field.is-focused:after {
  box-shadow: inset 0 0 0 2px var(--mos-accent) !important;
}

.uc2-pp-field.is-focused .uc2-pp-icon {
  color: var(--mos-accent);
}

html body .uc2-logo.is-wam, html body .studio-plan-trust-chip.is-wam {
  box-shadow: none !important;
  background: none !important;
  border: 0 !important;
  padding: 0 !important;
}

html body .uc2-logo.is-paypal, html body .studio-plan-trust-chip.is-paypal, html body .uc2-pp-paypal-fake {
  box-shadow: none !important;
  background: none !important;
}

html body .uc2-logo.is-paypal, html body .studio-plan-trust-chip.is-paypal {
  border: 0 !important;
  padding: 0 !important;
}

html body .uc2-pp-card {
  background: var(--mos-plate, var(--mos-page)) !important;
  border-color: var(--mos-border-soft) !important;
}

html body .uc2-pp-fake, html body .uc2-pp-fake:focus {
  -webkit-text-fill-color: currentColor;
  color: var(--mos-text) !important;
  box-shadow: none !important;
  background: none !important;
  border: 0 !important;
}

html body .uc2-pp-fake::placeholder {
  -webkit-text-fill-color: var(--mos-text-muted, var(--mos-muted));
  opacity: 1;
  color: var(--mos-text-muted, var(--mos-muted)) !important;
}

html body .uc2-pp-icon {
  color: var(--mos-text-muted, var(--mos-muted)) !important;
}

html body .uc2-pp-field.is-focused .uc2-pp-icon {
  color: var(--mos-accent) !important;
}

.uc2-pp-slot, .uc2-pp-paypal, .uc2-pp-pill {
  --lightningcss-light: initial;
  --lightningcss-dark: ;
  color-scheme: light;
}

.uc2-pp-field.is-number .uc2-pp-brand-cover {
  z-index: 1;
  pointer-events: none;
  background: var(--mos-plate, var(--mos-page));
  width: 54px;
  position: absolute;
  top: 2px;
  bottom: 2px;
  left: 2px;
}

.uc2-pp-field.is-number .uc2-pp-brand-cover .uc2-pp-icon {
  left: 23px;
}

.uc2-pp-card > .uc2-pp-field.is-number:first-child .uc2-pp-brand-cover {
  border-top-left-radius: 11px;
}

@media (max-width: 767px) {
  html body .uc2-currency-toggle .uc2-currency-code {
    display: none;
  }

  html body .uc2-currency-toggle button {
    padding: 4px 8px;
  }
}

@media (max-width: 899px) {
  html body .uc2 .uc2-left .uc2-heading {
    text-align: center;
  }

  html body .uc2 .uc2-left .uc2-price {
    text-align: center;
    justify-content: center;
  }

  html body .uc2 .uc2-left .uc2-currency-row {
    text-align: center;
    justify-content: center;
    row-gap: 8px;
  }
}

html body .uc2-logo-mark .uc2-sanity-mark {
  color: var(--mos-accent);
  --sanity-mark-letter: var(--mos-accent-fg, #fff);
  flex: none;
  display: block;
}

.uc2-before-pay {
  margin: 4px 0 10px;
}

.uc2 {
  -webkit-text-size-adjust: 100%;
}

.uc2-left .uc2-heading, .uc2-left dt, .uc2-left span:not(.uc2-wordmark) {
  color: color-mix(in srgb,var(--mos-text, #141414) 82%,transparent);
}

.uc2-right span:not(:has(svg)):not(:empty) {
  color: color-mix(in srgb,var(--mos-text, #141414) 72%,transparent);
}

.uc2-pay {
  color: #fff;
  min-height: 52px;
  font-size: 16px;
}

.uc2-back-link {
  min-height: 44px;
  padding: 0 12px;
  font-size: 14px;
}

.uc2 a {
  margin: -7px 0;
  padding: 7px 4px;
}

.uc2 input, .uc2 select, .uc2 textarea {
  color: var(--mos-text, #141414);
  -webkit-text-fill-color: currentColor;
  font-size: 16px;
}

.uc2 ::placeholder {
  color: color-mix(in srgb,currentColor 60%,transparent);
  -webkit-text-fill-color: color-mix(in srgb,currentColor 60%,transparent);
  opacity: 1;
}

@media (max-width: 640px) {
  .uc2-left span:not(.uc2-wordmark), .uc2-right span {
    font-size: 13px;
  }

  .uc2-currency-code {
    font-size: 13px;
    display: inline !important;
  }

  .uc2-left button:has(.uc2-currency-code) {
    justify-content: center;
    align-items: center;
    gap: 4px;
    min-width: 64px;
    min-height: 36px;
    padding: 0 10px;
    display: inline-flex;
  }

  .uc2-method {
    min-height: 64px;
  }

  .uc2-right {
    padding-bottom: max(24px,env(safe-area-inset-bottom));
  }

  .uc2-pay {
    margin-bottom: 6px;
  }
}

.uc2-receipt-card {
  border: 1px solid var(--uc2-line);
  background: color-mix(in srgb,var(--mos-text, #141414) 3%,transparent);
  border-radius: 14px;
  align-items: center;
  gap: 12px;
  min-width: 0;
  margin: 0 0 20px;
  padding: 12px 14px;
  display: flex;
}

.uc2-receipt-icon {
  background: color-mix(in srgb,var(--mos-text, #141414) 7%,transparent);
  width: 32px;
  height: 32px;
  color: var(--mos-text, #141414);
  border-radius: 999px;
  flex: none;
  justify-content: center;
  align-items: center;
  display: inline-flex;
}

.uc2-receipt-copy {
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  display: flex;
}

.uc2 .uc2-receipt-k {
  color: color-mix(in srgb,var(--mos-text, #141414) 68%,transparent);
  font-size: 12.5px;
  line-height: 1.3;
}

.uc2-receipt-v {
  color: var(--mos-text, #141414);
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  font-size: 14.5px;
  font-weight: 500;
  line-height: 1.35;
  overflow: hidden;
}

/* [project]/src/components/checkout/payment-processing-overlay.css [app-client] (css) */
.studio-payment-celebration.studio-payment-processing {
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  background: none;
}

.studio-payment-processing .studio-payment-celebration-title, .studio-payment-processing .studio-payment-celebration-copy {
  text-shadow: 0 0 2px var(--mos-page),
    0 0 8px var(--mos-page),
    0 0 18px var(--mos-page),
    0 0 28px var(--mos-page);
}

.studio-payment-processing .studio-payment-celebration-copy {
  color: var(--color-cursor-text, var(--mos-text));
  font-weight: 500;
}

.studio-payment-processing .studio-payment-celebration-spin {
  filter: drop-shadow(0 0 6px var(--mos-page)) drop-shadow(0 0 14px var(--mos-page));
}

@media (prefers-reduced-transparency: reduce) {
  .studio-payment-celebration.studio-payment-processing {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

.studio-payment-processing .studio-payment-celebration-check.is-danger {
  color: var(--mos-danger, #dc2626);
  filter: drop-shadow(0 8px 24px color-mix(in srgb, var(--mos-danger, #dc2626) 35%, transparent));
}

.studio-payment-processing .studio-payment-celebration-check:not(.is-danger) {
  filter: drop-shadow(0 8px 24px color-mix(in srgb, var(--mos-success, #22c55e) 35%, transparent))
    drop-shadow(0 0 14px var(--mos-page));
}

.studio-payment-processing .studio-payment-celebration-btn {
  color: var(--studio-on-accent);
}

.studio-payment-processing .studio-payment-celebration-check.is-filled {
  background: var(--mos-success, #22c55e);
  width: 64px;
  height: 64px;
  color: var(--studio-on-accent, #fff);
  border-radius: 999px;
  place-items: center;
  display: grid;
}

.studio-payment-processing .studio-payment-celebration-check.is-filled svg {
  width: 34px;
  height: 34px;
}

/* [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/studio/components/studio-desktop-shell.css [app-client] (css) */
html.is-studio-desktop-shell[data-studio-desktop-platform="darwin"] .studio-desktop-workspace-head {
  padding-left: 78px;
}

html.is-studio-desktop-shell[data-studio-desktop-platform="darwin"] .studio-stage {
  border-radius: 0;
}

html.is-studio-desktop-shell:not([data-studio-desktop-platform="darwin"]) .studio-stage > .studio-desktop-workspace-head {
  -webkit-app-region: drag;
  background-color: #00000005 !important;
}

html.is-studio-desktop-shell:not([data-studio-desktop-platform="darwin"]) .studio-stage > .studio-desktop-workspace-head :is(button, a, input, select, textarea, [role="button"], [role="tab"], [role="menuitem"], [contenteditable="true"], .studio-header-call, .studio-call-orb, .studio-desktop-window-controls) {
  -webkit-app-region: no-drag;
}

html.is-studio-desktop-shell, html.is-studio-desktop-shell * {
  -webkit-backdrop-filter: none !important;
}

.studio-desktop-window-controls {
  flex-shrink: 0;
  align-items: center;
  gap: 2px;
  display: inline-flex;
}

html.is-studio-desktop-shell:not([data-studio-desktop-platform="darwin"]) .ysbf-stage.is-auth, html.is-studio-desktop-shell:not([data-studio-desktop-platform="darwin"]) .ysbf-auth-greet {
  -webkit-app-region: drag;
  background-color: #00000005;
}

html.is-studio-desktop-shell:not([data-studio-desktop-platform="darwin"]) .ysbf-auth-main, html.is-studio-desktop-shell:not([data-studio-desktop-platform="darwin"]) .studio-desktop-auth-controls, html.is-studio-desktop-shell:not([data-studio-desktop-platform="darwin"]) .studio-desktop-auth-controls * {
  -webkit-app-region: no-drag;
}

html.is-studio-desktop-shell .ysbf-stage.is-auth {
  position: relative;
}

.studio-desktop-auth-controls {
  z-index: 5;
  display: none;
  position: absolute;
  top: 8px;
  right: 8px;
}

html.is-studio-desktop-shell:not([data-studio-desktop-platform="darwin"]) .studio-desktop-auth-controls {
  display: flex;
}

html.is-studio-desktop-shell .studio-desktop-window-btn.studio-settings-trigger {
  box-sizing: border-box;
  width: var(--studio-desktop-head-tab-h, 34px);
  min-width: var(--studio-desktop-head-tab-h, 34px);
  height: var(--studio-desktop-head-tab-h, 34px);
  min-height: var(--studio-desktop-head-tab-h, 34px);
  box-shadow: none;
  color: var(--color-cursor-text, #eee);
  background: #00000038;
  border: 0;
  border-radius: 999px;
  padding: 0;
}

html.is-studio-desktop-shell .studio-desktop-window-btn.studio-settings-trigger:hover {
  background: #0000004d;
}

.studio-desktop-window-controls .studio-desktop-window-btn.is-close:hover {
  background: color-mix(in srgb, #e11d48 88%, var(--mos-plate-strong));
  color: var(--cursor-on-accent, #fff);
}

/* [project]/src/components/studio-public-intro.css [app-client] (css) */
.studio-public-intro, .studio-public-intro-title {
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  position: absolute;
  overflow: hidden;
}

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