/* [project]/components/auth/brand.css [app-client] (css) */
.prysm-brand {
  --background: 250 45% 7%;
  --foreground: 250 40% 97%;
  --muted: 250 22% 74%;
  --subtle: 250 16% 62%;
  --border: 255 30% 22%;
  --border-strong: 255 30% 38%;
  --surface: 252 40% 11%;
  --surface-1: 252 40% 11%;
  --surface-2: 252 36% 15%;
  --surface-3: 252 32% 19%;
  --surface-elevated: 252 36% 16%;
  --surface-hover: 252 34% 18%;
  --surface-active: 252 32% 22%;
  --surface-translucent: 252 40% 11% / .6;
  --bg-base: 250 45% 7%;
  --bg-subtle: 252 40% 10%;
  --primary: 262 90% 66%;
  --primary-hover: 262 90% 72%;
  --primary-foreground: 0 0% 100%;
  --ring: 212 95% 66%;
  --focus-ring: 212 95% 66%;
  --danger: 4 90% 70%;
  --success: 152 65% 56%;
  --warning: 38 95% 62%;
  --accent-cta: 84 75% 73%;
  --accent-cta-foreground: 258 61% 15%;
  --radius: 14px;
  --radius-pill: 999px;
  --radius-control: 14px;
  --radius-panel: 24px;
  --radius-card: 24px;
  --shadow-1: 0 1px 4px #05030c66;
  --shadow-2: 0 6px 18px -2px #05030c80;
  --shadow-3: 0 16px 40px -8px #05030c8c;
  --shadow-4: 0 30px 80px -16px #4e0ac280;
  --brand-1: 262 90% 60%;
  --brand-2: 212 95% 58%;
  --brand-3: 316 85% 58%;
  --brand-4: 8 90% 62%;
  --brand-ink: 250 45% 7%;
  --brand-gradient: linear-gradient(120deg, #813df5, #ef39be 45%, #f55e47);
  --brand-gradient-cool: linear-gradient(120deg, #2e8dfa, #813df5 55%, #ef39be);
  --hero-from: 262 90% 60%;
  --hero-mid: 316 85% 58%;
  --hero-to: 250 45% 7%;
  --font-geist-sans: var(--tf-geist, system-ui), system-ui, sans-serif;
  --font-space-mono: var(--tf-space-mono, ui-monospace), ui-monospace, monospace;
  --font-libertinus-serif: var(--tf-geist, system-ui), system-ui, sans-serif;
  font-family: var(--tf-geist, system-ui), system-ui, -apple-system, "Segoe UI", sans-serif;
  letter-spacing: normal;
  text-transform: none;
  --lightningcss-light: ;
  --lightningcss-dark: initial;
  color-scheme: dark;
  color: hsl(var(--foreground));
  background: hsl(var(--background));
  isolation: isolate;
  min-height: 100dvh;
  position: relative;
}

.prysm-brand *, .prysm-brand :before, .prysm-brand :after {
  border-color: hsl(var(--border));
}

.prysm-brand ::selection {
  color: #fff;
  background: #813df580;
}

.prysm-brand .ab-text-grad {
  background: var(--brand-gradient);
  -webkit-text-fill-color: transparent;
  color: #0000;
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  animation: 8s linear infinite ab-grad-pan;
}

@keyframes ab-grad-pan {
  to {
    background-position: 200% 0;
  }
}

.ab-mesh {
  z-index: -1;
  pointer-events: none;
  background: #0c0a1a;
  position: fixed;
  inset: 0;
  overflow: hidden;
}

.ab-blob {
  filter: blur(80px);
  opacity: .55;
  will-change: transform;
  border-radius: 50%;
  position: absolute;
}

.ab-blob.b1 {
  background: #813df5;
  width: 55vmax;
  height: 55vmax;
  animation: 26s ease-in-out infinite alternate ab-drift1;
  top: -20vmax;
  left: -15vmax;
}

.ab-blob.b2 {
  opacity: .4;
  background: #ef39be;
  width: 45vmax;
  height: 45vmax;
  animation: 32s ease-in-out infinite alternate ab-drift2;
  top: 5vmax;
  right: -12vmax;
}

.ab-blob.b3 {
  opacity: .42;
  background: #2e8dfa;
  width: 50vmax;
  height: 50vmax;
  animation: 29s ease-in-out infinite alternate ab-drift3;
  bottom: -28vmax;
  left: 10vmax;
}

.ab-blob.b4 {
  opacity: .3;
  background: #f55e47;
  width: 30vmax;
  height: 30vmax;
  animation: 35s ease-in-out infinite alternate-reverse ab-drift1;
  bottom: -10vmax;
  right: 8vmax;
}

.ab-grain {
  opacity: .14;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  position: absolute;
  inset: 0;
}

@keyframes ab-drift1 {
  to {
    transform: translate3d(8vmax, 6vmax, 0)scale(1.15);
  }
}

@keyframes ab-drift2 {
  to {
    transform: translate3d(-9vmax, 8vmax, 0)scale(.9);
  }
}

@keyframes ab-drift3 {
  to {
    transform: translate3d(6vmax, -7vmax, 0)scale(1.1);
  }
}

.ab-paused .ab-blob, .ab-paused .ab-text-grad, .ab-paused * {
  animation-play-state: paused !important;
}

@media (prefers-reduced-motion: reduce) {
  .prysm-brand .ab-blob, .prysm-brand .ab-text-grad, .prysm-brand .ab-btn:after {
    animation: none !important;
  }
}

.ab-card {
  -webkit-backdrop-filter: blur(24px) saturate(1.4);
  backdrop-filter: blur(24px) saturate(1.4);
  background: linear-gradient(160deg, #1b1532b8, #100d21b8);
  border-radius: 24px;
  padding: 28px 22px;
  position: relative;
  box-shadow: 0 30px 80px -24px #7125f48c, inset 0 0 0 1px #ffffff0a;
}

.ab-card:before {
  content: "";
  border-radius: inherit;
  pointer-events: none;
  -webkit-mask-composite: xor;
  background: linear-gradient(135deg, #a06ef7cc, #f04cc540 40%, #4298fa80 75%, #f66b55b3);
  padding: 1px;
  position: absolute;
  inset: 0;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor, source-over;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}

@media (min-width: 480px) {
  .ab-card {
    padding: 36px 34px;
  }
}

.ab-btn {
  cursor: pointer;
  color: #fff;
  border: 1px solid #0000;
  border-radius: 14px;
  justify-content: center;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 48px;
  padding: 0 22px;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  transition: transform .15s, box-shadow .25s, background-color .2s, opacity .2s, border-color .2s;
  display: inline-flex;
  position: relative;
  overflow: hidden;
}

.ab-btn:active:not(:disabled) {
  transform: scale(.98);
}

.ab-btn:disabled {
  opacity: .55;
  cursor: not-allowed;
}

.ab-btn:focus-visible, .ab-link:focus-visible, .ab-chip:focus-visible {
  outline-offset: 3px;
  outline: 2px solid #6aaefb;
}

.ab-btn-primary {
  background: linear-gradient(110deg, #7a34f4, #ee2fbb, #f44d34, #7a34f4) 0 0 / 250% 100%;
  animation: 9s linear infinite ab-grad-pan;
  box-shadow: 0 10px 30px -8px #ee2bba99;
}

.ab-btn-primary:hover:not(:disabled) {
  box-shadow: 0 14px 38px -6px #ef39bebf;
}

.ab-btn-primary:after {
  content: "";
  pointer-events: none;
  background: linear-gradient(105deg, #0000 30%, #ffffff59 50%, #0000 70%);
  position: absolute;
  inset: 0;
  transform: translateX(-120%);
}

.ab-btn-primary:hover:not(:disabled):after {
  transition: transform .7s;
  transform: translateX(120%);
}

.ab-btn-secondary {
  background: #282145cc;
  border-color: #45396a;
}

.ab-btn-secondary:hover:not(:disabled) {
  background: #352c59;
}

.ab-btn-outline {
  background: none;
  border-color: #52447e;
}

.ab-btn-outline:hover:not(:disabled) {
  background: #251e3e;
  border-color: #a06ef7;
}

.ab-btn-ghost {
  color: #cac7db;
  background: none;
  width: auto;
}

.ab-btn-ghost:hover:not(:disabled) {
  color: #fff;
  background: #251e3e;
}

.ab-field {
  position: relative;
}

.ab-input {
  color: #f5f4fa;
  background: #0e0b1eb3;
  border: 1px solid #3d325d;
  border-radius: 14px;
  width: 100%;
  min-height: 48px;
  padding: 0 14px;
  font-size: 16px;
  transition: border-color .2s, box-shadow .25s, background-color .2s;
}

.ab-input::placeholder {
  color: #787198;
}

.ab-input:hover {
  border-color: #574785;
}

.ab-input:focus {
  background: #100d21e6;
  border-color: #a677f8;
  outline: none;
  box-shadow: 0 0 0 3px #813df559, 0 0 24px -2px #ef39be73;
}

.ab-input[aria-invalid="true"] {
  border-color: #f6655a;
  box-shadow: 0 0 0 3px #f5493d38;
}

.ab-input:-webkit-autofill {
  -webkit-text-fill-color: #f5f4fa;
  box-shadow: inset 0 0 0 100px #15112c;
}

.ab-shake {
  animation: .4s cubic-bezier(.36, .07, .19, .97) ab-shake;
}

@keyframes ab-shake {
  10%, 90% {
    transform: translateX(-1px);
  }

  20%, 80% {
    transform: translateX(2px);
  }

  30%, 50%, 70% {
    transform: translateX(-4px);
  }

  40%, 60% {
    transform: translateX(4px);
  }
}

.ab-link {
  color: #c5a3ff;
  text-underline-offset: 3px;
  border-radius: 4px;
  font-weight: 500;
  -webkit-text-decoration: underline #a06ef766;
  text-decoration: underline #a06ef766;
  transition: color .2s;
}

.ab-link:hover {
  color: #fff;
  text-decoration-color: currentColor;
}

.ab-chip {
  cursor: pointer;
  color: #d0cddf;
  background: #201a37cc;
  border: 1px solid #413663;
  border-radius: 999px;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 16px;
  font-size: 14px;
  font-weight: 500;
  transition: all .2s;
  display: inline-flex;
}

.ab-chip:hover {
  border-color: #a06ef7;
}

.ab-chip[aria-pressed="true"] {
  color: #fff;
  background: linear-gradient(120deg, #7a34f4, #ed26b8);
  border-color: #0000;
  box-shadow: 0 6px 20px -6px #ee2bbab3;
}

.ab-otp {
  aspect-ratio: 1 / 1.15;
  text-align: center;
  color: #fff;
  font-variant-numeric: tabular-nums;
  background: #0e0b1eb3;
  border: 1px solid #3d325d;
  border-radius: 14px;
  width: 100%;
  max-width: 54px;
  font-size: 24px;
  font-weight: 700;
  transition: border-color .2s, box-shadow .25s, transform .15s;
}

.ab-otp:focus {
  border-color: #a677f8;
  outline: none;
  transform: translateY(-2px);
  box-shadow: 0 0 0 3px #813df559, 0 0 20px -2px #ef39be80;
}

.ab-otp[aria-invalid="true"] {
  border-color: #f6655a;
}

.ab-otp-filled {
  border-color: #935af6cc;
}

.ab-spin {
  border: 2px solid #ffffff4d;
  border-top-color: #fff;
  border-radius: 50%;
  width: 18px;
  height: 18px;
  animation: .7s linear infinite ab-rot;
}

@keyframes ab-rot {
  to {
    transform: rotate(360deg);
  }
}

.ab-404 {
  letter-spacing: -.04em;
  font-size: clamp(7rem, 30vw, 17rem);
  font-weight: 800;
  line-height: .9;
}

/*# sourceMappingURL=components_auth_brand_1o1vqy0.css.map*/