/* [project]/src/studio/components/chrome/overlays/overlays.css [app-client] (css) */
.studio-overlay-dialog, .studio-overlay-sheet {
  color: var(--mos-text);
  background: var(--mos-plate, var(--mos-panel)) !important;
  border: 1px solid var(--mos-border) !important;
  border-radius: var(--studio-radius-overlay, 12px) !important;
}

.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 .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, 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;
}

/* [project]/src/studio/components/studio-agent-avatar.css [app-client] (css) */
.studio-agent-avatar {
  --studio-agent-avatar-size: 28px;
  box-sizing: border-box;
  flex: 0 0 var(--studio-agent-avatar-size);
  background: var(--studio-agent-avatar-bg);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--cursor-on-accent) 22%, transparent);
  border: 0;
  border-radius: 50%;
  place-content: center;
  place-self: center;
  place-items: center;
  margin: 0;
  padding: 0;
  line-height: 0;
  display: inline-grid;
  overflow: hidden;
  width: var(--studio-agent-avatar-size) !important;
  min-width: var(--studio-agent-avatar-size) !important;
  max-width: var(--studio-agent-avatar-size) !important;
  height: var(--studio-agent-avatar-size) !important;
  min-height: var(--studio-agent-avatar-size) !important;
  max-height: var(--studio-agent-avatar-size) !important;
  transform: translate3d(0, 0, 0) !important;
}

.studio-agent-avatar svg {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  display: block;
  overflow: hidden;
  width: 100% !important;
  height: 100% !important;
  transform: translate3d(0, 0, 0) !important;
}

.studio-agent-avatar-head {
  fill: var(--cursor-on-accent);
}

.studio-agent-avatar-face {
  transform-box: view-box;
  transform-origin: 24px 24px;
}

.studio-agent-avatar-eyes {
  fill: var(--cursor-accent-ink, #18201c);
  transform-box: fill-box;
  transform-origin: center;
}

.studio-agent-avatar-gaze, .studio-agent-avatar-eye {
  transform-box: fill-box;
  transform-origin: center;
}

.studio-agent-avatar-brows, .studio-agent-avatar-brow {
  transform-box: fill-box;
}

.studio-agent-avatar-brow.is-left {
  transform-origin: 12% 80%;
}

.studio-agent-avatar-brow.is-right {
  transform-origin: 88% 80%;
}

.studio-agent-avatar-brow {
  fill: none;
  stroke: var(--cursor-accent-ink, #18201c);
  stroke-width: 1.75px;
  stroke-linecap: round;
  opacity: 0;
}

.studio-agent-avatar-thoughts {
  fill: var(--cursor-on-accent);
  opacity: 0;
}

.studio-agent-avatar-signals, .studio-agent-avatar-confetti {
  fill: none;
  stroke: var(--cursor-on-accent);
  stroke-width: 1.5px;
  stroke-linecap: round;
  opacity: 0;
}

.studio-agent-avatar-confetti circle {
  fill: var(--cursor-on-accent);
  stroke: none;
}

.studio-agent-avatar.is-idle .studio-agent-avatar-eyes {
  animation: 7.4s ease-in-out infinite studio-agent-blink;
}

.studio-agent-avatar.is-idle[data-idle-beat="orbit"] .studio-agent-avatar-eyes, .studio-agent-avatar.is-idle[data-idle-beat="surprise"] .studio-agent-avatar-eyes, .studio-agent-avatar.is-idle[data-idle-beat="chuckle"] .studio-agent-avatar-eyes, .studio-agent-avatar.is-idle[data-idle-beat="laugh"] .studio-agent-avatar-eyes {
  animation: none;
}

.studio-agent-avatar.is-idle[data-idle-beat="look-up-across"] .studio-agent-avatar-eyes {
  animation: 5.8s cubic-bezier(.62, .04, .16, 1) both studio-agent-blink-after;
}

.studio-agent-avatar.is-idle[data-idle-beat="look-left"] .studio-agent-avatar-gaze {
  animation: 3.6s cubic-bezier(.62, .04, .16, 1) both studio-agent-gaze-left;
}

.studio-agent-avatar.is-idle[data-idle-beat="look-right"] .studio-agent-avatar-gaze {
  animation: 3.6s cubic-bezier(.62, .04, .16, 1) both studio-agent-gaze-right;
}

.studio-agent-avatar.is-idle[data-idle-beat="look-left-across"] .studio-agent-avatar-gaze {
  animation: 5.4s cubic-bezier(.58, .04, .18, 1) both studio-agent-gaze-left-across;
}

.studio-agent-avatar.is-idle[data-idle-beat="look-right-across"] .studio-agent-avatar-gaze {
  animation: 5.4s cubic-bezier(.58, .04, .18, 1) both studio-agent-gaze-right-across;
}

.studio-agent-avatar.is-idle[data-idle-beat="look-up"] .studio-agent-avatar-gaze {
  animation: 3.6s cubic-bezier(.62, .04, .16, 1) both studio-agent-gaze-up;
}

.studio-agent-avatar.is-idle[data-idle-beat="look-up-left"] .studio-agent-avatar-gaze {
  animation: 3.6s cubic-bezier(.62, .04, .16, 1) both studio-agent-gaze-up-left;
}

.studio-agent-avatar.is-idle[data-idle-beat="look-up-right"] .studio-agent-avatar-gaze {
  animation: 3.6s cubic-bezier(.62, .04, .16, 1) both studio-agent-gaze-up-right;
}

.studio-agent-avatar.is-idle[data-idle-beat="look-up-across"] .studio-agent-avatar-gaze {
  animation: 5.8s cubic-bezier(.58, .04, .18, 1) both studio-agent-gaze-up-across;
}

.studio-agent-avatar.is-idle[data-idle-beat^="look-up"] .studio-agent-avatar-brow {
  animation: 3.6s cubic-bezier(.62, .04, .16, 1) both studio-agent-brow-lift;
}

.studio-agent-avatar.is-idle[data-idle-beat="look-up-across"] .studio-agent-avatar-brow {
  animation: 5.8s cubic-bezier(.58, .04, .18, 1) both studio-agent-brow-lift;
}

.studio-agent-avatar.is-idle[data-idle-beat="look-up-left"] .studio-agent-avatar-brow.is-left {
  animation: 3.6s cubic-bezier(.62, .04, .16, 1) both studio-agent-brow-tilt-out;
}

.studio-agent-avatar.is-idle[data-idle-beat="look-up-right"] .studio-agent-avatar-brow.is-right {
  animation: 3.6s cubic-bezier(.62, .04, .16, 1) both studio-agent-brow-tilt-out-right;
}

.studio-agent-avatar.is-idle[data-idle-beat="look-down"] .studio-agent-avatar-gaze {
  animation: 3.6s cubic-bezier(.62, .04, .16, 1) both studio-agent-gaze-down;
}

.studio-agent-avatar.is-idle[data-idle-beat="look-down-left"] .studio-agent-avatar-gaze {
  animation: 3.6s cubic-bezier(.62, .04, .16, 1) both studio-agent-gaze-down-left;
}

.studio-agent-avatar.is-idle[data-idle-beat="look-down-right"] .studio-agent-avatar-gaze {
  animation: 3.6s cubic-bezier(.62, .04, .16, 1) both studio-agent-gaze-down-right;
}

.studio-agent-avatar.is-idle[data-idle-beat="look-down-around"] .studio-agent-avatar-gaze {
  animation: 5.2s cubic-bezier(.58, .04, .18, 1) both studio-agent-eye-down;
}

.studio-agent-avatar.is-idle[data-idle-beat="read"] .studio-agent-avatar-gaze {
  animation: 6.4s cubic-bezier(.45, .05, .2, 1) both studio-agent-eye-read;
}

.studio-agent-avatar.is-idle[data-idle-beat="ponder"] .studio-agent-avatar-gaze {
  animation: 4.2s cubic-bezier(.58, .04, .18, 1) both studio-agent-eye-ponder;
}

.studio-agent-avatar.is-idle[data-idle-beat="ponder"] .studio-agent-avatar-brow.is-left {
  animation: 4.2s cubic-bezier(.58, .04, .18, 1) both studio-agent-brow-ponder;
}

.studio-agent-avatar.is-idle[data-idle-beat="orbit"] .studio-agent-avatar-gaze {
  animation: 6s cubic-bezier(.42, .05, .2, 1) both studio-agent-eye-orbit;
}

.studio-agent-avatar.is-idle[data-idle-beat="orbit"] .studio-agent-avatar-eye {
  animation: 6s cubic-bezier(.42, .05, .2, 1) both studio-agent-eye-orbit-scale;
}

.studio-agent-avatar.is-idle[data-idle-beat="surprise"] .studio-agent-avatar-gaze {
  animation: 2.8s cubic-bezier(.22, .9, .28, 1) both studio-agent-eye-surprise;
}

.studio-agent-avatar.is-idle[data-idle-beat="surprise"] .studio-agent-avatar-brow {
  animation: 2.8s cubic-bezier(.22, .9, .28, 1) both studio-agent-brow-surprise;
}

.studio-agent-avatar.is-idle[data-idle-beat="chuckle"] .studio-agent-avatar-gaze {
  animation: 3s cubic-bezier(.42, .1, .2, 1) both studio-agent-eye-chuckle;
}

.studio-agent-avatar.is-idle[data-idle-beat="chuckle"] .studio-agent-avatar-brow {
  animation: 3s cubic-bezier(.42, .1, .2, 1) both studio-agent-brow-chuckle;
}

.studio-agent-avatar.is-idle[data-idle-beat="laugh"] .studio-agent-avatar-gaze {
  animation: 3.4s cubic-bezier(.42, .1, .2, 1) both studio-agent-eye-laugh;
}

.studio-agent-avatar.is-idle[data-idle-beat="laugh"] .studio-agent-avatar-brow {
  animation: 3.4s cubic-bezier(.42, .1, .2, 1) both studio-agent-brow-laugh;
}

.studio-agent-avatar.is-idle[data-idle-beat="angry"] .studio-agent-avatar-gaze {
  animation: 3.2s cubic-bezier(.58, .04, .18, 1) both studio-agent-eye-angry;
}

.studio-agent-avatar.is-idle[data-idle-beat="angry"] .studio-agent-avatar-brow.is-left {
  animation: 3.2s cubic-bezier(.58, .04, .18, 1) both studio-agent-brow-angry-left;
}

.studio-agent-avatar.is-idle[data-idle-beat="angry"] .studio-agent-avatar-brow.is-right {
  animation: 3.2s cubic-bezier(.58, .04, .18, 1) both studio-agent-brow-angry-right;
}

.studio-agent-avatar.is-thinking .studio-agent-avatar-face {
  transform-box: view-box;
  transform-origin: 24px 24px;
  animation: 1.8s ease-in-out infinite studio-agent-think;
}

.studio-agent-avatar.is-thinking .studio-agent-avatar-eyes {
  transform: translate(1.5px, -1.5px);
}

.studio-agent-avatar.is-thinking .studio-agent-avatar-thoughts {
  animation: 1.35s ease-in-out infinite studio-agent-thought;
}

.studio-agent-avatar.is-wondering .studio-agent-avatar-face {
  transform-box: view-box;
  transform-origin: 24px 24px;
  transform: rotate(-7deg)translate(-1px, 1px);
}

.studio-agent-avatar.is-wondering .studio-agent-avatar-eyes {
  animation: 2.4s ease-in-out infinite studio-agent-wonder;
  transform: translate(-1.5px, -1px);
}

.studio-agent-avatar.is-looking .studio-agent-avatar-eyes {
  animation: 2.2s ease-in-out infinite studio-agent-look;
}

.studio-agent-avatar.is-listening .studio-agent-avatar-face {
  transform-box: view-box;
  transform-origin: 24px 24px;
  animation: 1.9s ease-in-out infinite studio-agent-listen;
}

.studio-agent-avatar.is-listening .studio-agent-avatar-signals {
  animation: 1.9s ease-in-out infinite studio-agent-signal;
}

.studio-agent-avatar.is-focused .studio-agent-avatar-face {
  transform-box: view-box;
  transform-origin: 24px 24px;
  animation: 1.45s ease-in-out infinite studio-agent-focus;
}

.studio-agent-avatar.is-focused .studio-agent-avatar-eyes {
  transform: translateY(-1px);
}

.studio-agent-avatar.is-creating .studio-agent-avatar-face {
  transform-box: view-box;
  transform-origin: 24px 24px;
  animation: 1.25s cubic-bezier(.45, 0, .55, 1) infinite studio-agent-create;
}

.studio-agent-avatar.is-creating .studio-agent-avatar-thoughts {
  opacity: .9;
  transform-box: view-box;
  transform-origin: 24px 24px;
  animation: 1.25s linear infinite studio-agent-orbit;
}

.studio-agent-avatar.is-speaking .studio-agent-avatar-signals {
  animation: 1.15s ease-in-out infinite studio-agent-signal;
}

.studio-agent-avatar.is-speaking .studio-agent-avatar-eyes {
  animation: 2.6s ease-in-out infinite studio-agent-blink;
}

.studio-agent-avatar.is-confused .studio-agent-avatar-face {
  transform-box: view-box;
  transform-origin: 24px 24px;
  animation: 1.8s ease-in-out infinite studio-agent-confused;
}

.studio-agent-avatar.is-confused .studio-agent-avatar-eyes {
  transform: translate(-1px, -1px);
}

.studio-agent-avatar.is-celebrating .studio-agent-avatar-face {
  transform-box: view-box;
  transform-origin: 24px 24px;
  animation: .95s cubic-bezier(.34, 1.56, .64, 1) infinite studio-agent-celebrate;
}

.studio-agent-avatar.is-celebrating .studio-agent-avatar-confetti {
  transform-box: view-box;
  transform-origin: 24px 24px;
  animation: .95s ease-out infinite studio-agent-confetti;
}

@keyframes studio-agent-blink {
  0%, 45%, 49%, 100% {
    transform: scaleY(1);
  }

  47% {
    transform: scaleY(.08);
  }
}

@keyframes studio-agent-blink-after {
  0%, 84%, 94%, 100% {
    transform: scaleY(1);
  }

  89% {
    transform: scaleY(.08);
  }
}

@keyframes studio-agent-gaze-left {
  0%, 100% {
    transform: translate(0);
  }

  22%, 76% {
    transform: translate(-5.6px, .45px);
  }
}

@keyframes studio-agent-gaze-right {
  0%, 100% {
    transform: translate(0);
  }

  22%, 76% {
    transform: translate(5.6px, .45px);
  }
}

@keyframes studio-agent-gaze-left-across {
  0%, 100% {
    transform: translate(0);
  }

  14%, 30% {
    transform: translate(-5.8px, .4px);
  }

  48%, 66% {
    transform: translate(5.8px, .4px);
  }
}

@keyframes studio-agent-gaze-right-across {
  0%, 100% {
    transform: translate(0);
  }

  14%, 30% {
    transform: translate(5.8px, .4px);
  }

  48%, 66% {
    transform: translate(-5.8px, .4px);
  }
}

@keyframes studio-agent-gaze-up {
  0%, 100% {
    transform: translate(0);
  }

  22%, 76% {
    transform: translate(0, -4.4px);
  }
}

@keyframes studio-agent-gaze-up-left {
  0%, 100% {
    transform: translate(0);
  }

  22%, 76% {
    transform: translate(-4.6px, -4.2px);
  }
}

@keyframes studio-agent-gaze-up-right {
  0%, 100% {
    transform: translate(0);
  }

  22%, 76% {
    transform: translate(4.6px, -4.2px);
  }
}

@keyframes studio-agent-gaze-up-across {
  0%, 100% {
    transform: translate(0);
  }

  14%, 32% {
    transform: translate(4.8px, -4.3px);
  }

  46%, 66% {
    transform: translate(-4.8px, -4.3px);
  }
}

@keyframes studio-agent-gaze-down {
  0%, 100% {
    transform: translate(0)scale(1);
  }

  22%, 76% {
    transform: translate(0, 5px)scale(1.02, .88);
  }
}

@keyframes studio-agent-gaze-down-left {
  0%, 100% {
    transform: translate(0)scale(1);
  }

  22%, 76% {
    transform: translate(-4.4px, 5px)scale(.94, .86);
  }
}

@keyframes studio-agent-gaze-down-right {
  0%, 100% {
    transform: translate(0)scale(1);
  }

  22%, 76% {
    transform: translate(4.4px, 5px)scale(.94, .86);
  }
}

@keyframes studio-agent-brow-lift {
  0%, 100% {
    opacity: 0;
    transform: translateY(0);
  }

  20%, 78% {
    opacity: 1;
    transform: translateY(-1.1px);
  }
}

@keyframes studio-agent-brow-tilt-out {
  0%, 100% {
    opacity: 0;
    transform: translateY(0)rotate(0);
  }

  20%, 78% {
    opacity: 1;
    transform: translateY(-1.4px)rotate(-12deg);
  }
}

@keyframes studio-agent-brow-tilt-out-right {
  0%, 100% {
    opacity: 0;
    transform: translateY(0)rotate(0);
  }

  20%, 78% {
    opacity: 1;
    transform: translateY(-1.4px)rotate(12deg);
  }
}

@keyframes studio-agent-eye-read {
  0%, 100% {
    transform: translate(0);
  }

  12%, 22% {
    transform: translate(-4.2px, .35px);
  }

  34%, 44% {
    transform: translate(4.4px, .2px);
  }

  56%, 64% {
    transform: translate(-3.6px, .45px);
  }

  76%, 84% {
    transform: translate(3.2px, .15px);
  }
}

@keyframes studio-agent-eye-down {
  0%, 100% {
    transform: translate(0)scale(1);
  }

  18% {
    transform: translate(0, 4.6px)scale(1.02, .88);
  }

  38% {
    transform: translate(-3.4px, 5.1px)scale(.92, .86);
  }

  62% {
    transform: translate(3.6px, 5px)scale(.92, .86);
  }

  80% {
    transform: translate(.4px, 4.4px)scale(1, .9);
  }
}

@keyframes studio-agent-eye-ponder {
  0%, 100% {
    transform: translate(0);
  }

  24%, 76% {
    transform: translate(-2.8px, -2.4px);
  }
}

@keyframes studio-agent-brow-ponder {
  0%, 100% {
    opacity: 0;
    transform: translateY(0)rotate(0);
  }

  22%, 78% {
    opacity: 1;
    transform: translateY(-1.35px)rotate(-14deg);
  }
}

@keyframes studio-agent-eye-orbit {
  0%, 100% {
    transform: translate(0);
  }

  18% {
    transform: translate(6.2px, 1.2px);
  }

  36% {
    transform: translate(2.4px, 6.4px);
  }

  54% {
    transform: translate(-6.4px, 1.4px);
  }

  72% {
    transform: translate(-2.2px, -5.6px);
  }

  88% {
    transform: translate(5.2px, -1.6px);
  }
}

@keyframes studio-agent-eye-orbit-scale {
  0%, 100% {
    transform: scale(1);
  }

  18% {
    transform: scale(.72, 1.08);
  }

  36% {
    transform: scale(.55, .82);
  }

  54% {
    transform: scale(.7, 1.08);
  }

  72% {
    transform: scale(.58, .84);
  }

  88% {
    transform: scale(.78, 1.06);
  }
}

@keyframes studio-agent-eye-surprise {
  0%, 100% {
    transform: translate(0)scale(1);
  }

  18%, 62% {
    transform: translate(0, -.6px)scale(1.72);
  }
}

@keyframes studio-agent-brow-surprise {
  0%, 100% {
    opacity: 0;
    transform: translateY(0);
  }

  16%, 64% {
    opacity: 1;
    transform: translateY(-1.6px);
  }
}

@keyframes studio-agent-eye-chuckle {
  0%, 100% {
    transform: translate(0)scale(1);
  }

  12%, 28% {
    transform: translate(0, .8px)scale(1.05, .38);
  }

  36%, 52% {
    transform: translate(.4px, .9px)scale(1.08, .34);
  }

  60%, 76% {
    transform: translate(-.3px, .75px)scale(1.04, .4);
  }
}

@keyframes studio-agent-brow-chuckle {
  0%, 100% {
    opacity: 0;
    transform: translateY(0);
  }

  14%, 78% {
    opacity: .95;
    transform: translateY(.6px);
  }
}

@keyframes studio-agent-eye-laugh {
  0%, 100% {
    transform: translate(0)scale(1);
  }

  10%, 24% {
    transform: translate(0, 1.1px)scale(1.12, .28);
  }

  32%, 46% {
    transform: translate(.5px, 1.2px)scale(1.14, .22);
  }

  54%, 68% {
    transform: translate(-.4px, 1.15px)scale(1.12, .26);
  }

  76%, 88% {
    transform: translate(.2px, 1px)scale(1.08, .34);
  }
}

@keyframes studio-agent-brow-laugh {
  0%, 100% {
    opacity: 0;
    transform: translateY(0);
  }

  12%, 86% {
    opacity: 1;
    transform: translateY(.85px);
  }
}

@keyframes studio-agent-eye-angry {
  0%, 100% {
    transform: translate(0)scale(1);
  }

  22%, 78% {
    transform: translate(0, .55px)scale(1.04, .62);
  }
}

@keyframes studio-agent-brow-angry-left {
  0%, 100% {
    opacity: 0;
    transform: translate(0)rotate(0);
  }

  20%, 80% {
    opacity: 1;
    transform: translate(1.1px, .6px)rotate(22deg);
  }
}

@keyframes studio-agent-brow-angry-right {
  0%, 100% {
    opacity: 0;
    transform: translate(0)rotate(0);
  }

  20%, 80% {
    opacity: 1;
    transform: translate(-1.1px, .6px)rotate(-22deg);
  }
}

@keyframes studio-agent-think {
  0%, 100% {
    transform: rotate(-2deg)translateY(0);
  }

  50% {
    transform: rotate(3deg)translateY(-1px);
  }
}

@keyframes studio-agent-thought {
  0%, 100% {
    opacity: .15;
    transform: translate(-1px, 1px)scale(.82);
  }

  50% {
    opacity: .95;
    transform: translate(0, -1px)scale(1);
  }
}

@keyframes studio-agent-wonder {
  0%, 100% {
    transform: translate(-1.5px, -1px);
  }

  50% {
    transform: translate(1px, -1.5px);
  }
}

@keyframes studio-agent-look {
  0%, 18%, 100% {
    transform: translateX(-2px);
  }

  42%, 68% {
    transform: translateX(2px);
  }
}

@keyframes studio-agent-listen {
  0%, 100% {
    transform: rotate(0)translateX(0);
  }

  50% {
    transform: rotate(-4deg)translateX(-1px);
  }
}

@keyframes studio-agent-signal {
  0%, 100% {
    opacity: .15;
    transform: scale(.9);
  }

  50% {
    opacity: .9;
    transform: scale(1.04);
  }
}

@keyframes studio-agent-focus {
  0%, 100% {
    transform: translateY(0)scale(1);
  }

  50% {
    transform: translateY(-.75px);
  }
}

@keyframes studio-agent-create {
  0%, 100% {
    transform: rotate(-3deg)translateY(0);
  }

  50% {
    transform: rotate(3deg)translateY(-1px);
  }
}

@keyframes studio-agent-orbit {
  to {
    transform: rotate(1turn);
  }
}

@keyframes studio-agent-confused {
  0%, 100% {
    transform: rotate(-5deg)translateX(-.5px);
  }

  50% {
    transform: rotate(5deg)translateX(.5px);
  }
}

@keyframes studio-agent-celebrate {
  0%, 100% {
    transform: translateY(1px)rotate(-3deg)scale(.98);
  }

  50% {
    transform: translateY(-2px)rotate(3deg)scale(1.06);
  }
}

@keyframes studio-agent-confetti {
  0% {
    opacity: 0;
    transform: scale(.72)rotate(-8deg);
  }

  45% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform: scale(1.12)rotate(8deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .studio-agent-avatar *, .studio-agent-avatar:before, .studio-agent-avatar:after {
    animation: none !important;
  }
}

.studio-agent-working {
  box-sizing: border-box;
  flex: 0 0 var(--studio-agent-avatar-size);
  width: var(--studio-agent-avatar-size);
  height: var(--studio-agent-avatar-size);
  place-items: center;
  line-height: 0;
  display: inline-grid;
  position: relative;
  overflow: visible;
}

.studio-agent-working > .studio-agent-avatar {
  z-index: 1;
  grid-area: 1 / 1;
  position: relative;
}

.studio-agent-working > .studio-agent-working-aura {
  --orb-c1: var(--cursor-accent, #cadcfc);
  --orb-c2: #9b87f5;
  z-index: 0;
  opacity: 1;
  border-radius: 50%;
  animation-duration: 3.2s;
  inset: -3px;
  -webkit-mask: radial-gradient(circle, #0000 60%, #000 72% 100%);
  mask: radial-gradient(circle, #0000 60%, #000 72% 100%);
}

@media (prefers-reduced-motion: reduce) {
  .studio-agent-working > .studio-agent-working-aura {
    animation: none;
  }
}

.studio-agent-avatar.is-static .studio-agent-avatar-eyes, .studio-agent-avatar.is-static .studio-agent-avatar-gaze, .studio-agent-avatar.is-static .studio-agent-avatar-face {
  animation: none;
}

/* [project]/src/studio/components/studio-agent-onboarding.css [app-client] (css) */
.studio-agent-onboard-colors {
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  padding: 2px 0;
  display: flex;
}

.studio-agent-onboard-swatch {
  box-sizing: border-box;
  border: 1px solid color-mix(in srgb, var(--color-cursor-border-soft) 86%, transparent);
  background: var(--studio-auth-surface, #fff);
  cursor: pointer;
  border-radius: 10px;
  place-items: center;
  width: 52px;
  height: 52px;
  margin: 0;
  padding: 0;
  transition: border-color .14s, box-shadow .14s, transform .14s;
  display: inline-grid;
  box-shadow: 0 1px 2px #0f172a08;
}

.studio-agent-onboard-swatch:hover {
  border-color: #1c1c1e47;
  box-shadow: 0 0 0 2px #1c1c1e1f;
}

.studio-agent-onboard-swatch.is-selected {
  border-color: #1c1c1eb8;
  box-shadow: 0 0 0 2px #1c1c1e38;
}

.studio-agent-onboard-swatch:active {
  transform: translateY(1px)scale(.99);
}

.studio-agent-onboard-swatch:focus-visible {
  box-shadow: 0 0 0 2px var(--studio-auth-ring, #f5f5f7),
    0 0 0 4px #1c1c1e59;
  outline: none;
}

/* [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 {
  border: 1px solid color-mix(in srgb, var(--color-cursor-border-soft) 68%, transparent);
  background: linear-gradient(180deg, #ffffffc7, #ffffff38),
    var(--mos-plate);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border-radius: 28px;
  flex-direction: column;
  width: 100%;
  max-width: 340px;
  max-height: min(92dvh, 840px);
  display: flex;
  overflow: hidden;
  box-shadow: inset 0 1px #ffffffe0, 0 1px 2px #0f172a0a, 0 18px 42px #0f172a17;
}

.studio-auth-title {
  color: var(--mos-text);
  letter-spacing: -.03em;
  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-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: .875rem;
  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: 999px;
  width: 10px;
  height: 10px;
  display: block;
}

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

.studio-auth-field.is-email {
  box-sizing: border-box;
  justify-content: center;
  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: start;
  flex: 0 auto;
  font-size: .875rem;
  font-weight: 500;
  line-height: 18px;
  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: 18px;
  color: inherit;
  caret-color: var(--mos-text);
  background: none;
  border: 0;
  outline: none;
  flex: auto;
  margin: 0;
  padding: 0;
  font-size: .875rem;
  font-weight: 500;
  line-height: 18px;
}

.studio-auth-field.is-stack textarea {
  resize: vertical;
  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 {
  field-sizing: content;
  text-overflow: ellipsis;
  text-align: start;
  flex: 0 auto;
  width: auto;
  min-width: 0;
  max-width: calc(100% - 22px);
  overflow: hidden;
}

.studio-auth-field.is-email input[type="password"] {
  field-sizing: content;
  text-overflow: clip;
  text-align: start;
  flex: 0 auto;
  width: auto;
  min-width: 0;
  max-width: calc(100% - 22px);
  overflow: visible;
}

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

.studio-auth-field.is-email input[type="password"]::-webkit-caps-lock-indicator {
  display: none;
}

.studio-auth-field.is-email input[type="password"]::-ms-reveal {
  display: none;
}

.studio-auth-field.is-email input[type="password"]::-ms-clear {
  display: none;
}

.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);
  font-size: .875rem;
  font-weight: 450;
  line-height: 18px;
}

.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;
  z-index: 2;
  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;
  position: sticky;
  bottom: 0;
}

.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-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;
}

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