:root {
  --ufy-auth-purple: #aa5cff;
  --ufy-auth-purple-light: #d8adff;
  --ufy-auth-purple-dark: #5e249d;
  --ufy-auth-lime: #72f56f;
  --ufy-auth-text: rgba(var(--ufy-rgb-255,255,255,255),0.98);
  --ufy-auth-muted: rgba(229, 217, 244, 0.62);
  --ufy-auth-line: rgba(225, 198, 255, 0.26);
}

.ufy-phone-app-screen[
  data-ufy-active-app="auth"
] {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.ufy-phone-app-screen[
  data-ufy-active-app="auth"
] .ufy-phone-app-screen-header {
  display: none;
}

.ufy-phone-app-screen[
  data-ufy-active-app="auth"
] .ufy-phone-app-screen-content {
  padding: 0;
  overflow: hidden;
  background: transparent;
}

.ufy-auth {
  position: relative;
  isolation: isolate;

  width: 100%;
  height: 100%;
  min-height: 0;

  overflow-x: hidden;
  overflow-y: auto;

  overscroll-behavior: contain;

  color: var(--ufy-auth-text);

  background-color: #0b0713;

  background:
    linear-gradient(
      180deg,
      rgba(5, 3, 11, 0.01),
      rgba(5, 3, 11, 0.06) 46%,
      rgba(5, 3, 11, 0.34) 100%
    ),
    url(
      "/assets/ufy-phone/auth-background.webp"
    );

  background-position:
    center,
    center top;

  background-size:
    cover,
    cover;

  background-repeat:
    no-repeat;

  scrollbar-width: none;

  -webkit-overflow-scrolling:
    touch;
}


.ufy-auth::-webkit-scrollbar {
  display: none;
}



.ufy-auth-shell {
  width: min(100%, 1180px);
  min-height: 100%;

  margin: 0 auto;

  padding:
    max(22px, env(safe-area-inset-top))
    14px
    max(22px, env(safe-area-inset-bottom));

  box-sizing: border-box;
}

.ufy-auth-brand {
  display: flex;
  align-items: baseline;

  gap: 5px;

  margin:
    0
    0
    14px
    5px;

  line-height: 1;
}

.ufy-auth-brand-ufy {
  color: #17101f;

  font-size:
    clamp(
      28px,
      8.7vw,
      40px
    );

  font-weight: 820;
  letter-spacing: -1.2px;

  text-shadow:
    0
    1px
    0
    rgba(var(--ufy-rgb-255,255,255,255),0.1);
}

.ufy-auth-brand-phone {
  color:
    rgba(var(--ufy-rgb-255,255,255,255),0.96);

  font-size:
    clamp(
      24px,
      7.4vw,
      34px
    );

  font-weight: 430;
  letter-spacing: -0.8px;
}

.ufy-auth-layout {
  display: grid;

  grid-template-columns:
    minmax(0, 1fr);

  gap: 22px;
}

.ufy-auth-showcase {
  min-width: 0;
}

.ufy-auth-carousel {
  position: relative;

  width: 100%;

  height:
    clamp(
      275px,
      78vw,
      330px
    );

  overflow: hidden;

  touch-action: pan-y;
}

.ufy-auth-slides {
  position: absolute;
  inset: 0;
}

.ufy-auth-slide {
  position: absolute;

  left: 50%;
  top: 4px;

  width:
    min(
      72%,
      330px
    );

  height:
    calc(
      100% - 12px
    );

  padding:
    14px
    14px
    16px;

  border:
    1px solid
    rgba(190, 112, 255, 0.54);

  border-radius: 25px;

  box-sizing: border-box;

  overflow: hidden;

  display: flex;
  flex-direction: column;

  background:
    linear-gradient(
      145deg,
      rgba(31, 23, 51, 0.72),
      rgba(6, 5, 12, 0.56)
    );

  box-shadow:
    inset
    0
    1px
    0
    rgba(var(--ufy-rgb-255,255,255,255),0.09),

    0
    22px
    48px
    rgba(var(--ufy-rgb-0,0,0,0),0.30);

  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);

  opacity: 0;

  transform:
    translateX(-50%)
    scale(0.72);

  transition:
    transform
    430ms
    cubic-bezier(
      0.2,
      0.72,
      0.2,
      1
    ),

    opacity
    300ms
    ease,

    filter
    300ms
    ease;

  pointer-events: none;
}

.ufy-auth-slide[
  data-position="current"
] {
  z-index: 3;

  opacity: 1;

  transform:
    translateX(-50%)
    scale(1);

  pointer-events: auto;
}

.ufy-auth-slide[
  data-position="previous"
],
.ufy-auth-slide[
  data-position="next"
] {
  z-index: 2;

  opacity: 0.72;

  filter:
    brightness(0.62);
}

.ufy-auth-slide[
  data-position="previous"
] {
  transform:
    translateX(-115%)
    scale(0.82);
}

.ufy-auth-slide[
  data-position="next"
] {
  transform:
    translateX(15%)
    scale(0.82);
}

.ufy-auth-slide-art {
  display: block;

  width: 100%;

  min-height: 0;

  flex:
    1
    1
    auto;

  overflow: visible;
}

.ufy-auth-slide-copy {
  flex:
    0
    0
    auto;

  padding:
    2px
    4px
    0;
}

.ufy-auth-slide-title {
  margin: 0;

  color: var(--ufy-tone-255,#ffffff);

  font-size:
    clamp(
      17px,
      5.1vw,
      22px
    );

  font-weight: 720;

  line-height: 1.12;

  letter-spacing: -0.35px;
}

.ufy-auth-slide-description {
  margin:
    7px
    0
    0;

  color:
    rgba(
      236,
      225,
      248,
      0.72
    );

  font-size:
    clamp(
      12px,
      3.7vw,
      15px
    );

  line-height: 1.32;
}

.ufy-auth-slide[
  data-slide="cover"
] .ufy-auth-slide-copy {
  display: none;
}

.ufy-auth-slide[
  data-slide="cover"
] {
  top: 0;

  width:
    min(
      100%,
      430px
    );

  height: 100%;
  padding: 0;
  border: 0;

  background:
    transparent;

  box-shadow:
    none;

  backdrop-filter:
    none;

  -webkit-backdrop-filter:
    none;

  justify-content:
    center;

  overflow:
    visible;
}

.ufy-auth-slide[data-slide="cover"] .ufy-auth-cover-art {
  position: relative;

  width: 108%;
  height: auto;
  max-width: none;
  max-height: 100%;

  flex:
    0
    0
    auto;

  overflow: visible;
}

.ufy-auth-slide[data-slide="cover"] .ufy-auth-cover-glasses {
  display: block;

  width: 100%;
  height: auto;
  max-width: none;

  object-fit: contain;

  user-select: none;
  pointer-events: none;

  filter:
    drop-shadow(
      0
      16px
      18px
      rgba(var(--ufy-rgb-0,0,0,0),0.52)
    );
}

.ufy-auth-glasses-x {
  position: absolute;
  inset: 0;

  display: block;

  width: 100%;
  height: 100%;

  overflow: visible;
  pointer-events: none;

  shape-rendering:
    geometricPrecision;
}

.ufy-auth-x-stroke path {
  fill: none;

  stroke-linecap: round;
  stroke-linejoin: round;

  stroke-dasharray: 1;
  stroke-dashoffset: 1;

  opacity: 0;
}

.ufy-auth-x-edge-light {
  stroke:
    rgba(var(--ufy-rgb-255,255,255,255),0.92);

  stroke-width: 58;
}

.ufy-auth-x-edge-dark {
  stroke:
    rgba(var(--ufy-rgb-0,0,0,0),0.72);

  stroke-width: 60;
}

.ufy-auth-x-core {
  stroke-width: 44;
}

.ufy-auth-x-core-black {
  stroke: #050308;

  filter:
    drop-shadow(
      0
      4px
      5px
      rgba(var(--ufy-rgb-0,0,0,0),0.4)
    );
}

.ufy-auth-x-core-white {
  stroke: var(--ufy-tone-255,#ffffff);

  filter:
    drop-shadow(
      0
      5px
      7px
      rgba(var(--ufy-rgb-0,0,0,0),0.46)
    );
}

.ufy-auth-slide[data-slide="cover"][data-position="current"]
.ufy-auth-x-stroke path {
  animation:
    ufy-auth-draw-x
    850ms
    cubic-bezier(
      0.22,
      0.72,
      0.25,
      1
    )
    forwards;
}

.ufy-auth-slide[data-slide="cover"][data-position="current"]
.ufy-auth-x-left-black path {
  animation-delay: 250ms;
}

.ufy-auth-slide[data-slide="cover"][data-position="current"]
.ufy-auth-x-left-white path {
  animation-delay: 1250ms;
}

.ufy-auth-slide[data-slide="cover"][data-position="current"]
.ufy-auth-x-right-white path {
  animation-delay: 2250ms;
}

.ufy-auth-slide[data-slide="cover"][data-position="current"]
.ufy-auth-x-right-black path {
  animation-delay: 3250ms;
}

@keyframes ufy-auth-draw-x {
  0% {
    stroke-dashoffset: 1;
    opacity: 0;
  }

  8% {
    opacity: 1;
  }

  100% {
    stroke-dashoffset: 0;
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ufy-auth-slide[data-slide="cover"][data-position="current"]
  .ufy-auth-x-stroke path {
    animation: none;

    stroke-dashoffset: 0;
    opacity: 1;
  }
}

.ufy-auth-slides:has(
  .ufy-auth-slide[data-slide="cover"][data-position="current"]
)
.ufy-auth-slide:not(
  [data-slide="cover"]
) {
  opacity: 0;

  pointer-events:
    none;
}

.ufy-auth-indicators {
  min-height: 18px;

  margin-top: 10px;

  display: flex;

  justify-content: center;
  align-items: center;

  gap: 9px;
}

.ufy-auth-indicator {
  appearance: none;

  width: 25px;
  height: 6px;

  padding: 0;

  border: 0;

  border-radius: 999px;

  background:
    rgba(
      220,
      204,
      239,
      0.24
    );

  cursor: pointer;

  transition:
    width
    240ms
    ease,

    background
    240ms
    ease,

    box-shadow
    240ms
    ease;
}

.ufy-auth-indicator.is-active {
  width: 39px;

  background:
    var(
      --ufy-auth-purple
    );

  box-shadow:
    0
    0
    13px
    rgba(172, 87, 255, 0.68);
}