:root {
  --ease: cubic-bezier(.2, .82, .2, 1);
  --purple: #8b54ff;
  --purple-2: #b650f1;
  --pink: #ec73df;
  --dark: #0c0911;
  --dark-2: #15101e;
  --light: #f5f1f9;
  --light-2: #eee7f6;
  --card-dark: rgba(255, 255, 255, .072);
  --card-light: rgba(255, 255, 255, .54);
  --line-dark: rgba(255, 255, 255, .12);
  --line-light: rgba(153, 128, 194, .19);
  --text-dark: #f8f6fb;
  --text-light: #17131e;
  --muted-dark: rgba(248, 246, 251, .50);
  --muted-light: #8a8294;
  --page-gutter: clamp(16px, 4.17dvh, 32px);
  /* Measured from the native Safari surfaces on the phone. */
  --browser-dark: #100d19;
  --browser-dark-bottom: #100d19;
  --browser-light: #e8e1f1;
  --browser-light-bottom: #e9e0f1;
  --theme-motion: 220ms var(--ease);
  --foreground-motion: 260ms cubic-bezier(.22, .61, .36, 1);
  --mode-motion: 350ms var(--ease);
}

* {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

html,
body {
  width: 100%;
  height: 100%;
  min-height: 100%;
  margin: 0;
  overflow: hidden;
  overscroll-behavior: none;
}

body {
  min-width: 0;
  color: var(--text-dark);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", Inter, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  background: var(--dark);
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  touch-action: manipulation;
}

button,
input {
  font: inherit;
}

button {
  -webkit-tap-highlight-color: transparent;
}

.page {
  position: fixed;
  inset: 0;
  display: grid;
  width: 100%;
  height: 100dvh;
  min-height: 100svh;
  place-items: center;
  padding: var(--page-gutter);
  overflow: hidden;
  isolation: isolate;
  transition: color var(--theme-motion);
}

.page::before,
.page::after {
  position: absolute;
  inset: 0;
  z-index: -3;
  content: "";
}

.page::before {
  background:
    radial-gradient(900px 620px at 72% 24%, rgba(118, 72, 204, .14), transparent 66%),
    radial-gradient(760px 520px at 16% 78%, rgba(236, 115, 223, .07), transparent 68%),
    linear-gradient(145deg, var(--dark), var(--dark-2));
  transition: opacity var(--theme-motion);
}

.page::after {
  z-index: -2;
  opacity: 0;
  background:
    radial-gradient(900px 620px at 72% 24%, rgba(127, 85, 232, .11), transparent 66%),
    radial-gradient(760px 520px at 18% 75%, rgba(229, 119, 218, .11), transparent 66%),
    linear-gradient(145deg, var(--light), var(--light-2));
  transition: opacity var(--theme-motion);
}

body.signup .page {
  color: var(--text-light);
}

body.signup .page::after {
  opacity: 1;
}

.auth {
  position: relative;
  width: min(980px, 94vw);
  height: min(620px, calc(100dvh - (var(--page-gutter) * 2)));
  min-height: 0;
  overflow: hidden;
  border: 1px solid var(--line-dark);
  border-radius: 38px;
  background: rgba(255, 255, 255, .038);
  box-shadow: 0 36px 100px rgba(0, 0, 0, .38), inset 0 1px 0 rgba(255, 255, 255, .10);
  -webkit-backdrop-filter: blur(28px) saturate(130%);
  backdrop-filter: blur(28px) saturate(130%);
  transition: background var(--theme-motion), border-color var(--theme-motion), box-shadow var(--theme-motion);
}

body.signup .auth {
  border-color: var(--line-light);
  background: rgba(255, 255, 255, .38);
  box-shadow: 0 32px 90px rgba(94, 65, 136, .13), inset 0 1px 0 rgba(255, 255, 255, .78);
}

.auth::before,
.auth::after {
  position: absolute;
  inset: 1px;
  z-index: 10;
  border-radius: 37px;
  pointer-events: none;
  content: "";
}

.auth::before {
  background: linear-gradient(150deg, rgba(255, 255, 255, .10), transparent 31%, transparent 69%, rgba(255, 255, 255, .035));
}

.auth::after {
  opacity: .62;
  background: linear-gradient(108deg, rgba(255, 255, 255, .13), transparent 7% 54%, rgba(255, 255, 255, .05) 66%, transparent 75%);
  mix-blend-mode: screen;
}

.forms {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.form-side {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: center;
  padding: clamp(30px, 7.05dvh, 54px);
  transition: opacity 430ms ease, transform 540ms var(--ease);
}

.form {
  width: min(320px, 100%);
  color: var(--text-dark);
  transition: color var(--foreground-motion);
}

body.signup .form {
  color: var(--text-light);
}

.form h1 {
  margin: 0 0 clamp(22px, 4.45dvh, 34px);
  font-size: clamp(28px, 4.45dvh, 34px);
  font-weight: 720;
  line-height: 1;
  letter-spacing: -.045em;
  text-align: center;
  color: inherit;
  transition: color var(--foreground-motion);
}

.socials {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-bottom: clamp(17px, 3.14dvh, 24px);
}

.social {
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  border: 1px solid var(--line-dark);
  border-radius: 16px;
  color: inherit;
  cursor: pointer;
  background: var(--card-dark);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .10);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  transition: transform .18s var(--ease), color var(--foreground-motion), background var(--theme-motion), border-color var(--theme-motion), box-shadow .18s ease;
}

body.signup .social {
  border-color: var(--line-light);
  background: var(--card-light);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8);
}

.social:hover {
  transform: translateY(-2px);
}

.social:focus-visible,
.switch:focus-visible,
.primary:focus-visible,
.aux-link:focus-visible,
.sheet-close:focus-visible {
  outline: 2px solid rgba(195, 143, 255, .92);
  outline-offset: 3px;
}

.social:active,
.primary:active,
.switch:active {
  transform: translateY(0) scale(.98);
}

.social svg {
  width: 20px;
  height: 20px;
}

.or {
  display: flex;
  align-items: center;
  gap: 13px;
  margin: 0 0 clamp(16px, 2.88dvh, 22px);
  color: var(--muted-dark);
  font-size: 12px;
  font-weight: 600;
  transition: color var(--foreground-motion);
}

body.signup .or {
  color: var(--muted-light);
}

.or::before,
.or::after {
  height: 1px;
  flex: 1;
  opacity: .17;
  background: currentColor;
  content: "";
  transition: opacity var(--foreground-motion);
}

.fields {
  display: grid;
  gap: 12px;
}

.input {
  width: 100%;
  height: clamp(46px, 7.05dvh, 54px);
  padding: 0 17px;
  border: 1px solid var(--line-dark);
  border-radius: 17px;
  outline: none;
  color: var(--text-dark);
  background: rgba(255, 255, 255, .055);
  font-size: 14px;
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  transition: border-color var(--foreground-motion), box-shadow .18s ease, background var(--theme-motion), color var(--foreground-motion);
  -webkit-touch-callout: default;
  -webkit-user-select: text;
  user-select: text;
  touch-action: auto;
}

body.signup .input {
  border-color: var(--line-light);
  color: var(--text-light);
  background: rgba(255, 255, 255, .58);
}

.input::placeholder {
  color: var(--muted-dark);
  transition: color var(--foreground-motion);
}

body.signup .input::placeholder {
  color: #978ea2;
}

.password-field {
  position: relative;
  min-width: 0;
}

.password-field .input {
  padding-right: clamp(42px, 7.8dvh, 52px);
}

.password-toggle {
  position: absolute;
  top: 50%;
  right: clamp(3px, 1.45dvh, 9px);
  display: grid;
  width: clamp(24px, 4.45dvh, 34px);
  height: clamp(24px, 4.45dvh, 34px);
  padding: 0;
  place-items: center;
  border: 0;
  border-radius: 10px;
  color: rgba(248, 246, 251, .58);
  cursor: pointer;
  background: transparent;
  transform: translateY(-50%);
  transition: color var(--foreground-motion), background .18s ease, transform .18s var(--ease);
}

.password-toggle:hover {
  color: #e9ddff;
  background: rgba(182, 80, 241, .15);
}

.password-toggle:active {
  transform: translateY(-50%) scale(.93);
}

.password-toggle:focus-visible {
  outline: 1px solid var(--purple-2);
  outline-offset: 1px;
  color: #f4edff;
  background: rgba(182, 80, 241, .18);
}

.password-toggle svg {
  width: clamp(12px, 2.8dvh, 18px);
  height: clamp(12px, 2.8dvh, 18px);
  pointer-events: none;
}

.password-toggle-strike {
  transition: opacity .18s ease;
}

.password-toggle.is-visible .password-toggle-strike {
  opacity: 0;
}

body.signup .password-toggle {
  color: #82788e;
}

body.signup .password-toggle:hover,
body.signup .password-toggle:focus-visible {
  color: var(--purple-2);
  background: rgba(182, 80, 241, .12);
}

.input:focus,
body.signup .input:focus {
  border-color: var(--purple-2);
  box-shadow: 0 0 12px rgba(182, 80, 241, .28);
}

.aux {
  display: flex;
  justify-content: flex-end;
  margin: clamp(9px, 1.57dvh, 12px) 2px clamp(15px, 2.62dvh, 20px);
}

.aux-link {
  margin: 0;
  padding: 0;
  border: 0;
  color: #a47cff;
  cursor: pointer;
  background: transparent;
  font-size: 12px;
  font-weight: 650;
  transition: color var(--foreground-motion);
}

.primary {
  width: 100%;
  height: clamp(46px, 7.05dvh, 54px);
  border: 0;
  border-radius: 17px;
  color: #fff;
  cursor: pointer;
  background: linear-gradient(115deg, var(--pink), var(--purple-2) 45%, var(--purple));
  box-shadow: 0 16px 32px rgba(139, 84, 255, .24), inset 0 1px 0 rgba(255, 255, 255, .30);
  font-size: 15px;
  font-weight: 720;
  transition: transform .18s var(--ease), box-shadow .18s ease, opacity .18s ease;
}

.primary:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 20px 38px rgba(139, 84, 255, .29), inset 0 1px 0 rgba(255, 255, 255, .30);
}

.primary:disabled {
  cursor: wait;
  opacity: .72;
}

.signup-spacer {
  height: clamp(12px, 2.62dvh, 20px);
}

.slider {
  position: absolute;
  top: 18px;
  bottom: 18px;
  left: calc(50% + 9px);
  z-index: 5;
  width: calc(50% - 27px);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .13);
  border-radius: 31px;
  background:
    radial-gradient(105% 85% at 16% 10%, rgba(255, 255, 255, .14), transparent 54%),
    linear-gradient(145deg, rgba(255, 255, 255, .075), rgba(255, 255, 255, .026));
  box-shadow: 0 28px 60px rgba(0, 0, 0, .20), inset 0 1px 0 rgba(255, 255, 255, .15);
  -webkit-backdrop-filter: blur(32px) saturate(145%);
  backdrop-filter: blur(32px) saturate(145%);
  transform: translateX(0);
  transition: transform var(--mode-motion), background var(--theme-motion), border-color var(--theme-motion), box-shadow var(--theme-motion);
}

.slider::before,
.slider::after {
  position: absolute;
  inset: 0;
  pointer-events: none;
  content: "";
}

.slider::before {
  background:
    radial-gradient(420px 300px at 72% 22%, rgba(180, 80, 244, .12), transparent 70%),
    radial-gradient(380px 280px at 20% 82%, rgba(238, 111, 218, .08), transparent 72%);
}

.slider::after {
  opacity: .68;
  background: linear-gradient(130deg, rgba(255, 255, 255, .18), transparent 13% 54%, rgba(255, 255, 255, .09) 67%, transparent 78%);
}

body.signup .slider {
  border-color: rgba(255, 255, 255, .66);
  background:
    radial-gradient(105% 85% at 16% 10%, rgba(255, 255, 255, .65), transparent 54%),
    linear-gradient(145deg, rgba(255, 255, 255, .52), rgba(255, 255, 255, .27));
  box-shadow: 0 28px 62px rgba(101, 72, 153, .13), inset 0 1px 0 rgba(255, 255, 255, .90);
  transform: translateX(calc(-100% - 18px));
}

.slider-content {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 44px;
}

.logo {
  width: 170px;
  height: 170px;
  object-fit: contain;
  filter: drop-shadow(0 22px 26px rgba(135, 65, 226, .16));
  user-select: none;
  -webkit-user-drag: none;
  transition: transform var(--mode-motion), filter var(--theme-motion);
}

body.signup .logo {
  filter: drop-shadow(0 20px 24px rgba(135, 65, 226, .12));
}

.switch {
  position: absolute;
  bottom: clamp(24px, 6.28dvh, 48px);
  left: 50%;
  min-width: 168px;
  height: 50px;
  padding: 0 20px;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 16px;
  color: #fff;
  cursor: pointer;
  background: rgba(255, 255, 255, .075);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  font-size: 14px;
  font-weight: 700;
  transform: translateX(-50%);
  transition: transform .18s var(--ease), background var(--theme-motion), color var(--theme-motion), border-color var(--theme-motion);
}

.switch:hover {
  transform: translateX(-50%) translateY(-1px);
}

body.signup .switch {
  border-color: rgba(164, 133, 211, .22);
  color: #6f39c9;
  background: rgba(255, 255, 255, .50);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .82);
}

body:not(.signup) .signup-side {
  opacity: .18;
  transform: translateX(-8px);
}

body.signup .login-side {
  opacity: .18;
  transform: translateX(8px);
}

.auth-notice {
  position: absolute;
  top: 22px;
  left: 50%;
  z-index: 22;
  width: min(360px, calc(100% - 48px));
  padding: 11px 16px;
  border: 1px solid rgba(255, 176, 210, .34);
  border-radius: 16px;
  color: #fff;
  background: rgba(127, 27, 67, .78);
  box-shadow: 0 12px 35px rgba(0, 0, 0, .22), inset 0 1px rgba(255, 255, 255, .14);
  font-size: 13px;
  font-weight: 620;
  line-height: 1.3;
  text-align: center;
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  transform: translateX(-50%);
}

.auth-notice[data-tone="success"] {
  border-color: rgba(228, 198, 255, .34);
  background: rgba(91, 58, 139, .79);
}

.telegram-sheet {
  position: absolute;
  inset: 0;
  z-index: 25;
  display: grid;
  place-items: center;
  padding: 28px;
  color: var(--text-dark);
  background: rgba(8, 5, 13, .55);
  -webkit-backdrop-filter: blur(18px) saturate(130%);
  backdrop-filter: blur(18px) saturate(130%);
  transition: color var(--foreground-motion), background var(--theme-motion);
}

body.signup .telegram-sheet {
  color: var(--text-light);
  background: rgba(235, 226, 246, .48);
}

.telegram-card {
  position: relative;
  width: min(340px, 100%);
  padding: 28px;
  border: 1px solid rgba(255, 255, 255, .20);
  border-radius: 26px;
  background:
    linear-gradient(130deg, rgba(255, 255, 255, .18), transparent 42%),
    rgba(24, 17, 35, .72);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .30), inset 0 1px rgba(255, 255, 255, .22);
  text-align: center;
}

body.signup .telegram-card {
  border-color: rgba(161, 132, 203, .24);
  background:
    linear-gradient(130deg, rgba(255, 255, 255, .70), transparent 42%),
    rgba(255, 255, 255, .48);
  box-shadow: 0 24px 60px rgba(97, 69, 143, .16), inset 0 1px rgba(255, 255, 255, .82);
}

.sheet-close {
  position: absolute;
  top: 12px;
  right: 15px;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: inherit;
  cursor: pointer;
  background: rgba(255, 255, 255, .10);
  font-size: 24px;
  font-weight: 300;
  line-height: 1;
  transition: color var(--foreground-motion), background .18s ease;
}

.sheet-eyebrow {
  margin: 0 0 8px;
  color: #bc94ff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .16em;
}

.telegram-card h2 {
  margin: 0;
  font-size: 24px;
  letter-spacing: -.035em;
}

.telegram-card p:not(.sheet-eyebrow) {
  margin: 10px 0 20px;
  color: inherit;
  opacity: .68;
  font-size: 14px;
  line-height: 1.4;
}

.telegram-widget {
  display: flex;
  min-height: 40px;
  justify-content: center;
  align-items: center;
}

.telegram-widget > iframe {
  max-width: 100%;
}

.email-sheet {
  position: absolute;
  inset: 0;
  z-index: 30;
  display: grid;
  padding: 28px;
  place-items: center;
  color: var(--text-dark);
  pointer-events: none;
  opacity: 0;
  background: rgba(8, 5, 13, .62);
  -webkit-backdrop-filter: blur(18px) saturate(130%);
  backdrop-filter: blur(18px) saturate(130%);
  transition: opacity .32s ease, color var(--foreground-motion), background var(--theme-motion);
}

.email-sheet[data-open="true"] {
  pointer-events: auto;
  opacity: 1;
}

body.signup .email-sheet {
  color: var(--text-light);
  background: rgba(235, 226, 246, .54);
}

.email-card {
  position: relative;
  width: min(390px, 100%);
  max-height: 100%;
  padding: 30px 28px 24px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .20);
  border-radius: 28px;
  opacity: 0;
  background:
    radial-gradient(125% 68% at 50% -8%, rgba(186, 126, 255, .17), transparent 58%),
    linear-gradient(130deg, rgba(255, 255, 255, .18), transparent 42%),
    rgba(24, 17, 35, .78);
  box-shadow: 0 28px 68px rgba(0, 0, 0, .34), inset 0 1px rgba(255, 255, 255, .22);
  text-align: center;
  transition: opacity .32s ease, background var(--theme-motion), border-color var(--theme-motion), box-shadow var(--theme-motion);
}

.email-card::before {
  position: absolute;
  inset: 1px;
  border-radius: 27px;
  pointer-events: none;
  opacity: .7;
  background: linear-gradient(135deg, rgba(255, 255, 255, .16), transparent 25% 72%, rgba(255, 255, 255, .05));
  content: "";
}

.email-sheet[data-open="true"] .email-card {
  opacity: 1;
}

body.signup .email-card {
  border-color: rgba(161, 132, 203, .26);
  background:
    radial-gradient(125% 68% at 50% -8%, rgba(255, 255, 255, .80), transparent 58%),
    linear-gradient(130deg, rgba(255, 255, 255, .72), transparent 42%),
    rgba(255, 255, 255, .62);
  box-shadow: 0 28px 68px rgba(97, 69, 143, .18), inset 0 1px rgba(255, 255, 255, .86);
}

.email-card > * {
  position: relative;
  z-index: 1;
}

.email-sheet-logo {
  display: block;
  width: 56px;
  height: 56px;
  margin: 0 auto 12px;
  object-fit: contain;
  filter: drop-shadow(0 10px 16px rgba(135, 65, 226, .18));
  -webkit-user-drag: none;
}

.email-card .sheet-eyebrow {
  margin-bottom: 8px;
}

.email-card h2 {
  margin: 0;
  font-size: 26px;
  line-height: 1.05;
  letter-spacing: -.04em;
}

.email-flow-description {
  min-height: 40px;
  margin: 11px auto 20px;
  color: inherit;
  opacity: .68;
  font-size: 14px;
  line-height: 1.42;
}

.email-flow-form {
  display: grid;
  gap: 12px;
}

.email-flow-step {
  display: none;
}

.email-sheet[data-step="reset-request"] .email-email-step,
.email-sheet[data-step="signup-code"] .email-code-step,
.email-sheet[data-step="reset-code"] .email-code-step,
.email-sheet[data-step="reset-code"] .email-password-step {
  display: block;
}

.email-code-input {
  padding: 0 12px;
  font-size: 24px;
  font-weight: 760;
  letter-spacing: .28em;
  text-align: center;
}

.email-flow-message {
  min-height: 0;
  margin: 0;
  color: #ffafcf;
  font-size: 12px;
  font-weight: 620;
  line-height: 1.35;
  transition: color var(--foreground-motion);
}

.email-flow-message:empty {
  display: none;
}

.email-flow-message[data-tone="success"] {
  color: #c8abff;
}

body.signup .email-flow-message {
  color: #aa3c94;
}

body.signup .email-flow-message[data-tone="success"] {
  color: #6f39c9;
}

.email-flow-primary {
  margin-top: 2px;
}

.email-flow-actions {
  display: none;
  min-height: 20px;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
}

.email-sheet[data-step="signup-code"] .email-flow-actions,
.email-sheet[data-step="reset-code"] .email-flow-actions {
  display: flex;
}

.email-resend {
  padding: 0;
  border: 0;
  color: #c69cff;
  cursor: pointer;
  background: transparent;
  font-size: 12px;
  font-weight: 720;
  transition: color var(--foreground-motion), opacity .18s ease;
}

.email-resend:hover:not(:disabled) {
  color: #e4d4ff;
}

.email-resend:disabled {
  cursor: default;
  opacity: .48;
}

.email-resend:focus-visible {
  outline: 1px solid var(--purple-2);
  outline-offset: 3px;
  border-radius: 4px;
}

.email-flow-timer {
  color: var(--muted-dark);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

body.signup .email-resend {
  color: #8546d7;
}

body.signup .email-resend:hover:not(:disabled) {
  color: #6f39c9;
}

body.signup .email-flow-timer {
  color: var(--muted-light);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.mobile-theme-surface,
.mobile-brand-stage,
.mobile-form-tabs,
.mobile-legal {
  display: none;
}

.desktop-or-copy {
  display: none;
}

.mobile-or-copy {
  display: inline;
}

@media (max-width: 820px),
       (hover: none) and (pointer: coarse) and (orientation: landscape) and (max-width: 1024px) and (max-height: 600px) {
  :root {
    --page-gutter: 16px;
  }

  html[data-theme="dark"] {
    background-color: var(--browser-dark);
    color-scheme: dark;
  }

  html[data-theme="light"] {
    background-color: var(--browser-light);
    color-scheme: light;
  }

  /* Safari 26 observes body.background-color live. The visual transition is
     handled above it by .page pseudo-layers, so this source stays immediate. */
  html[data-theme="dark"] body,
  html[data-theme="light"] body {
    background-color: var(--browser-dark);
    transition: none;
  }

  html[data-theme="light"] body {
    background-color: var(--browser-light);
  }

  /* Keep the frame static without making it a fixed Safari edge source.
     Safari can then follow the live body background when the mode changes. */
  .page {
    position: relative;
    inset: auto;
    width: 100%;
    height: 100dvh;
    min-height: 100svh;
    overflow: hidden;
    /* One continuous edge-to-centre blend: no independent stripes or layers
       above the card. The untouched middle is fully transparent here. */
    background:
      linear-gradient(to bottom,
        var(--browser-dark) 0%,
        rgba(16, 13, 25, .92) 2%,
        rgba(16, 13, 25, .50) 8%,
        rgba(16, 13, 25, 0) 18%,
        rgba(16, 13, 25, 0) 82%,
        rgba(16, 13, 25, .50) 92%,
        rgba(16, 13, 25, .92) 98%,
        var(--browser-dark-bottom) 100%),
      radial-gradient(900px 620px at 72% 24%, rgba(118, 72, 204, .14), transparent 66%),
      radial-gradient(760px 520px at 16% 78%, rgba(236, 115, 223, .07), transparent 68%),
      linear-gradient(145deg, var(--dark), var(--dark-2));
  }

  /* On phones the light page is an actual overlay above the dark page and
     below .auth. It is therefore visible at the viewport edge on iOS. */
  .page::before {
    display: none;
  }

  .page::after {
    z-index: 0;
    display: block;
    pointer-events: none;
    background:
      linear-gradient(to bottom,
        var(--browser-light) 0%,
        rgba(232, 225, 241, .92) 2%,
        rgba(232, 225, 241, .50) 8%,
        rgba(232, 225, 241, 0) 18%,
        rgba(233, 224, 241, 0) 82%,
        rgba(233, 224, 241, .50) 92%,
        rgba(233, 224, 241, .92) 98%,
        var(--browser-light-bottom) 100%),
      radial-gradient(900px 620px at 72% 24%, rgba(127, 85, 232, .11), transparent 66%),
      radial-gradient(760px 520px at 18% 75%, rgba(229, 119, 218, .11), transparent 66%),
      linear-gradient(145deg, var(--light), var(--light-2));
  }

  .auth {
    z-index: 1;
  }

  .mobile-theme-surface {
    position: absolute;
    inset: 0;
    z-index: 0;
    display: block;
    overflow: hidden;
    border-radius: inherit;
    pointer-events: none;
    background:
      radial-gradient(90% 42% at 50% 0%, rgba(255, 255, 255, .10), transparent 62%),
      linear-gradient(165deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .018));
    background-color: rgba(255, 255, 255, .038);
  }

  .mobile-theme-surface::after {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    opacity: 0;
    background:
      radial-gradient(104% 50% at 50% -7%, rgba(255, 255, 255, .95), transparent 64%),
      radial-gradient(90% 66% at 8% 106%, rgba(236, 115, 223, .10), transparent 71%),
      radial-gradient(88% 62% at 98% 94%, rgba(139, 84, 255, .08), transparent 71%),
      linear-gradient(160deg, rgba(250, 247, 252, .95), rgba(238, 230, 246, .90));
    content: "";
    transition: opacity var(--theme-motion);
  }

  body.signup .mobile-theme-surface::after {
    opacity: 1;
  }

  body.signup .auth {
    border-color: rgba(255, 255, 255, .68);
    background: transparent;
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, .92);
  }

  .auth {
    width: min(430px, 100%);
    /* A Safari privacy notice can temporarily reduce `dvh`. Keep the card at
       least as tall as the stable, browser-chrome viewport so the notice
       covers the page instead of compressing the authentication layout. */
    height: min(780px, calc(max(100svh, 100dvh) - (var(--page-gutter) * 2)));
    min-height: 0;
    border-radius: 36px;
    background: transparent;
    /* External shadows tint the free strip above Safari and undo the exact
       edge colour. Keep only the original internal glass highlight. */
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .10);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  /* The frame itself must commit to the destination theme in the same paint.
     Otherwise WebKit interpolates the light rim for a few frames after the
     dark screen is already visible (and vice versa). The inner surface keeps
     its own soft crossfade below. */
  .auth[data-switching="true"] {
    transition: none;
  }

  .auth::before,
  .auth::after {
    border-radius: 35px;
    /* Keep the decorative glass below editable controls. On iOS a composited
       overlay above an input can draw the first caret in the wrong position. */
    z-index: 1;
  }

  .input {
    display: block;
    -webkit-appearance: none;
    appearance: none;
    /* The card and field backgrounds retain the glass effect. Removing the
       filter from the native control prevents WebKit's stale caret layer. */
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    caret-color: var(--purple-2);
  }

  .mobile-brand-stage {
    position: absolute;
    top: 4px;
    right: 22px;
    left: 22px;
    z-index: 11;
    display: grid;
    height: 182px;
    place-items: center;
    pointer-events: none;
    isolation: isolate;
  }

  .mobile-brand-glass {
    display: grid;
    width: 205px;
    height: 205px;
    place-items: center;
  }

  .mobile-brand-logo {
    width: min(205px, 44vw);
    height: min(205px, 44vw);
    object-fit: contain;
    filter: drop-shadow(0 22px 26px rgba(135, 65, 226, .16));
    -webkit-user-drag: none;
    user-select: none;
    transition: transform var(--mode-motion), filter var(--theme-motion);
  }

  body.signup .mobile-brand-logo {
    filter: drop-shadow(0 20px 24px rgba(135, 65, 226, .12));
  }

  .mobile-form-tabs {
    position: absolute;
    top: 196px;
    right: 26px;
    left: 26px;
    z-index: 12;
    display: grid;
    grid-template-columns: 1fr 1fr;
    height: 48px;
    padding: 4px;
    border: 1px solid var(--line-dark);
    border-radius: 18px;
    background: var(--card-dark);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .10), 0 10px 22px rgba(6, 6, 18, .07);
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
    transition: background var(--theme-motion), border-color var(--theme-motion), box-shadow var(--theme-motion);
  }

  .mobile-tab-indicator {
    position: absolute;
    top: 4px;
    left: 4px;
    width: calc(50% - 4px);
    height: 38px;
    border: 1px solid rgba(255, 255, 255, .13);
    border-radius: 14px;
    background: rgba(255, 255, 255, .095);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 6px 14px rgba(0, 0, 0, .035);
    transition: transform var(--theme-motion), background var(--theme-motion), border-color var(--theme-motion), box-shadow var(--theme-motion);
    will-change: transform;
  }

  body.signup .mobile-tab-indicator {
    transform: translateX(100%);
  }

  .mobile-form-tab {
    position: relative;
    z-index: 1;
    min-width: 0;
    border: 0;
    border-radius: 14px;
    color: var(--muted-dark);
    cursor: pointer;
    background: transparent;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: -.01em;
    transition: color var(--foreground-motion), text-shadow var(--foreground-motion), transform .18s var(--ease), opacity var(--theme-motion);
  }

  .mobile-form-tab:active {
    transform: scale(.985);
  }

  body:not(.signup) .mobile-form-tab.login {
    color: var(--text-dark);
  }

  body.signup .mobile-form-tab.signup {
    color: var(--text-light);
  }

  body.signup .mobile-form-tabs {
    border-color: var(--line-light);
    background: var(--card-light);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .80), 0 10px 22px rgba(114, 88, 156, .055);
  }

  body.signup .mobile-tab-indicator {
    border-color: var(--line-light);
    background: rgba(255, 255, 255, .58);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .80), 0 6px 14px rgba(114, 88, 156, .035);
  }

  body.signup .mobile-form-tab {
    color: #756c81;
  }

  .forms {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: block;
    overflow: hidden;
  }

  .form-side {
    position: absolute;
    inset: 0;
    display: flex;
    min-width: 0;
    align-items: flex-start;
    justify-content: center;
    padding: 252px 26px 38px;
    will-change: opacity;
    transition: opacity 90ms ease;
  }

  .form {
    width: 100%;
    max-width: 378px;
    margin: 0 auto;
  }

  .login-side {
    /* Never transform a mobile form panel. It avoids WebKit caret layer bugs
       and keeps the change of mode a controlled fade rather than a page flip. */
    transform: none;
    opacity: 1;
    pointer-events: auto;
    will-change: auto;
  }

  .signup-side {
    transform: none;
    opacity: 0;
    pointer-events: none;
  }

  body:not(.signup) .signup-side {
    transform: none;
    opacity: 0;
    pointer-events: none;
  }

  body.signup .login-side {
    transform: none;
    opacity: 0;
    pointer-events: none;
    will-change: opacity;
  }

  body.signup .signup-side {
    transform: none;
    opacity: 1;
    pointer-events: auto;
    will-change: auto;
  }

  /* On a mode switch, the old form leaves quickly and the destination form
     appears a moment later. No duplicate light/dark form can slide beside the
     new screen, and neither mobile form lives in a transformed layer. */
  .auth.switching-forward .login-side,
  .auth.switching-back .signup-side {
    opacity: 0;
  }

  .auth.switching-forward .signup-side,
  .auth.switching-back .login-side {
    opacity: 0;
    animation: mobile-form-enter 140ms 90ms var(--ease) both;
  }

  @keyframes mobile-form-enter {
    from { opacity: 0; }
    to { opacity: 1; }
  }

  .slider {
    display: none;
  }

  .signup-spacer {
    display: none;
  }

  .mobile-legal {
    display: grid;
    min-height: 40px;
    place-items: center;
    padding-top: 7px;
    color: var(--muted-dark);
    font-size: 11px;
    line-height: 1.35;
    text-align: center;
    transition: color var(--foreground-motion);
  }

  .mobile-legal a {
    color: var(--purple);
    font-weight: 680;
    text-decoration: none;
  }

  body.signup .mobile-legal {
    color: #736a80;
  }

  body.signup .or {
    color: #736a80;
  }

  body.signup .or::before,
  body.signup .or::after {
    opacity: .24;
  }

  body.signup .input::placeholder {
    color: #7f768a;
  }

  .desktop-or-copy {
    display: none;
  }

  .mobile-or-copy {
    display: inline;
  }

  .primary {
    position: relative;
    overflow: hidden;
    isolation: isolate;
  }

  .primary::after {
    position: absolute;
    inset: -65% -40%;
    pointer-events: none;
    opacity: 0;
    background: linear-gradient(112deg, transparent 38%, rgba(255, 255, 255, .34) 47%, rgba(255, 255, 255, .08) 53%, transparent 61%);
    content: "";
    transform: translateX(-42%) rotate(2deg);
    animation: mobile-auth-button-shine 5.4s ease-in-out infinite;
  }

  .auth.switching-forward .primary::after,
  .auth.switching-back .primary::after {
    animation: none;
    opacity: 0;
  }

  @keyframes mobile-auth-button-shine {
    0%, 58% { transform: translateX(-42%) rotate(2deg); opacity: 0; }
    68% { opacity: .8; }
    88%, 100% { transform: translateX(46%) rotate(2deg); opacity: 0; }
  }

  .auth-notice {
    top: auto;
    bottom: 14px;
    width: min(340px, calc(100% - 36px));
  }

  .telegram-sheet {
    padding: 18px;
  }
}

@media (max-width: 820px) and (max-height: 700px),
       (hover: none) and (pointer: coarse) and (orientation: landscape) and (max-width: 1024px) and (max-height: 600px) {
  :root {
    --page-gutter: 12px;
  }

  .form h1 {
    margin-bottom: 18px;
    font-size: clamp(27px, 4.45dvh, 31px);
  }

  .socials {
    margin-bottom: 16px;
  }

  .or {
    margin-bottom: 14px;
  }

  .fields {
    gap: 10px;
  }

  .mobile-brand-stage {
    top: 2px;
    height: 150px;
  }

  .mobile-brand-glass {
    width: 158px;
    height: 158px;
  }

  .mobile-brand-logo {
    width: min(160px, 40vw);
    height: min(160px, 40vw);
  }

  .mobile-form-tabs {
    top: 158px;
    right: 22px;
    left: 22px;
    height: 46px;
  }

  .mobile-tab-indicator {
    height: 36px;
  }

  .form-side {
    padding: 218px 22px 30px;
  }

  .mobile-legal {
    min-height: 34px;
    font-size: 10.5px;
  }
}

@media (max-width: 820px) and (max-height: 680px),
       (hover: none) and (pointer: coarse) and (orientation: landscape) and (max-width: 1024px) and (max-height: 600px) {
  .auth {
    border-radius: 30px;
  }

  .auth::before,
  .auth::after {
    border-radius: 29px;
  }

  .mobile-brand-stage {
    top: 0;
    height: 126px;
  }

  .mobile-brand-glass {
    width: 150px;
    height: 150px;
  }

  .mobile-brand-logo {
    width: min(150px, 38vw);
    height: min(150px, 38vw);
    transform: translateY(-4px);
  }

  .mobile-form-tabs {
    top: 130px;
    right: 19px;
    left: 19px;
    height: 42px;
    border-radius: 16px;
  }

  .mobile-tab-indicator {
    height: 32px;
    border-radius: 12px;
  }

  .mobile-form-tab {
    border-radius: 12px;
    font-size: 13px;
  }

  .form-side {
    padding: 184px 19px 24px;
  }

  .form h1 {
    margin-bottom: 13px;
    font-size: 27px;
  }

  .socials {
    gap: 10px;
    margin-bottom: 11px;
  }

  .social {
    width: 46px;
    height: 46px;
    border-radius: 15px;
  }

  .social svg {
    width: 20px;
    height: 20px;
  }

  .or {
    margin-bottom: 10px;
    font-size: 12px;
  }

  .fields {
    gap: 8px;
  }

  .input,
  .primary {
    height: 46px;
    border-radius: 15px;
  }

  .aux {
    margin: 8px 2px 14px;
  }

  .mobile-legal {
    min-height: 30px;
    padding-top: 4px;
    font-size: 9.8px;
  }
}

@media (max-width: 820px) and (max-height: 580px),
       (hover: none) and (pointer: coarse) and (orientation: landscape) and (max-width: 1024px) and (max-height: 580px) {
  .auth {
    border-radius: 28px;
  }

  .auth::before,
  .auth::after {
    border-radius: 27px;
  }

  .mobile-brand-stage {
    height: 110px;
  }

  .mobile-brand-glass {
    width: 116px;
    height: 116px;
  }

  .mobile-brand-logo {
    width: min(116px, 31vw);
    height: min(116px, 31vw);
  }

  .mobile-form-tabs {
    top: 114px;
    right: 18px;
    left: 18px;
    height: 40px;
  }

  .mobile-tab-indicator {
    height: 30px;
  }

  .mobile-form-tab {
    font-size: 12px;
  }

  .form-side {
    padding: 164px 18px 18px;
  }

  .form h1 {
    margin-bottom: 10px;
    font-size: 25px;
  }

  .socials {
    gap: 8px;
    margin-bottom: 8px;
  }

  .social {
    width: 40px;
    height: 40px;
    border-radius: 14px;
  }

  .social svg {
    width: 18px;
    height: 18px;
  }

  .or {
    margin-bottom: 8px;
    font-size: 11px;
  }

  .fields {
    gap: 7px;
  }

  .input,
  .primary {
    height: 40px;
    border-radius: 14px;
    font-size: 14px;
  }

  .aux {
    margin: 6px 2px 10px;
  }

  .mobile-legal {
    min-height: 22px;
    padding-top: 2px;
    font-size: 9.5px;
  }
}

@media (max-width: 820px) and (max-height: 500px),
       (hover: none) and (pointer: coarse) and (orientation: landscape) and (max-width: 1024px) and (max-height: 500px) {
  .auth {
    border-radius: 24px;
  }

  .auth::before,
  .auth::after {
    border-radius: 23px;
  }

  .mobile-brand-stage {
    height: 84px;
  }

  .mobile-brand-glass {
    width: 84px;
    height: 84px;
  }

  .mobile-brand-logo {
    width: 80px;
    height: 80px;
  }

  .mobile-form-tabs {
    top: 86px;
    right: 16px;
    left: 16px;
    height: 36px;
    padding: 3px;
  }

  .mobile-tab-indicator {
    top: 3px;
    left: 3px;
    width: calc(50% - 3px);
    height: 28px;
    border-radius: 10px;
  }

  .mobile-form-tab {
    border-radius: 10px;
    font-size: 11px;
  }

  .form-side {
    padding: 132px 16px 16px;
  }

  .form h1 {
    margin-bottom: 8px;
    font-size: 22px;
  }

  .socials {
    margin-bottom: 6px;
  }

  .social {
    width: 36px;
    height: 36px;
    border-radius: 12px;
  }

  .social svg {
    width: 16px;
    height: 16px;
  }

  .or {
    margin-bottom: 6px;
    font-size: 10px;
  }

  .fields {
    gap: 6px;
  }

  .input,
  .primary {
    height: 34px;
    border-radius: 12px;
    font-size: 13px;
  }

  .aux {
    margin: 5px 2px 8px;
  }

  .mobile-legal {
    display: none;
  }
}

@media (max-width: 820px) and (max-height: 430px),
       (hover: none) and (pointer: coarse) and (orientation: landscape) and (max-width: 1024px) and (max-height: 430px) {
  .auth {
    border-radius: 22px;
  }

  .auth::before,
  .auth::after {
    border-radius: 21px;
  }

  .mobile-brand-stage {
    height: 58px;
  }

  .mobile-brand-glass {
    width: 58px;
    height: 58px;
  }

  .mobile-brand-logo {
    width: 56px;
    height: 56px;
  }

  .mobile-form-tabs {
    top: 60px;
    right: 14px;
    left: 14px;
    height: 30px;
    padding: 2px;
  }

  .mobile-tab-indicator {
    top: 2px;
    left: 2px;
    width: calc(50% - 2px);
    height: 24px;
    border-radius: 8px;
  }

  .mobile-form-tab {
    border-radius: 8px;
    font-size: 10px;
  }

  .form-side {
    padding: 100px 14px 10px;
  }

  .form h1 {
    margin-bottom: 6px;
    font-size: 20px;
  }

  .socials {
    gap: 6px;
    margin-bottom: 4px;
  }

  .social {
    width: 32px;
    height: 32px;
    border-radius: 10px;
  }

  .social svg {
    width: 15px;
    height: 15px;
  }

  .or {
    gap: 8px;
    margin-bottom: 4px;
    font-size: 9px;
  }

  .fields {
    gap: 4px;
  }

  .input,
  .primary {
    height: 29px;
    border-radius: 10px;
    font-size: 12px;
  }

  .aux {
    margin: 4px 2px 6px;
  }

  .aux-link {
    font-size: 10px;
  }
}

@media (max-width: 820px) and (max-height: 360px),
       (hover: none) and (pointer: coarse) and (orientation: landscape) and (max-width: 1024px) and (max-height: 360px) {
  .mobile-brand-stage {
    height: 42px;
  }

  .mobile-brand-glass {
    width: 42px;
    height: 42px;
  }

  .mobile-brand-logo {
    width: 40px;
    height: 40px;
  }

  .mobile-form-tabs {
    top: 44px;
    height: 28px;
  }

  .mobile-tab-indicator {
    height: 22px;
  }

  .form-side {
    padding-top: 80px;
  }

  .form h1 {
    margin-bottom: 5px;
    font-size: 18px;
  }

  .socials {
    margin-bottom: 4px;
  }

  .social {
    width: 28px;
    height: 28px;
    border-radius: 9px;
  }

  .social svg {
    width: 14px;
    height: 14px;
  }

  .input,
  .primary {
    height: 27px;
    border-radius: 9px;
    font-size: 11px;
  }
}

@media (max-width: 820px) and (max-height: 320px),
       (hover: none) and (pointer: coarse) and (orientation: landscape) and (max-width: 1024px) and (max-height: 320px) {
  .mobile-brand-stage {
    height: 32px;
  }

  .mobile-brand-glass {
    width: 32px;
    height: 32px;
  }

  .mobile-brand-logo {
    width: 30px;
    height: 30px;
  }

  .mobile-form-tabs {
    top: 34px;
    height: 26px;
  }

  .mobile-tab-indicator {
    height: 20px;
  }

  .form-side {
    padding-top: 66px;
  }

  .form h1 {
    margin-bottom: 4px;
    font-size: 17px;
  }

  .socials {
    margin-bottom: 3px;
  }

  .social {
    width: 26px;
    height: 26px;
  }

  .social svg {
    width: 13px;
    height: 13px;
  }

  .or {
    margin-bottom: 3px;
  }

  .input,
  .primary {
    height: 25px;
    font-size: 10px;
  }
}

/* Use one shared frame for both mobile modes. It gives registration the room
   for its extra field without squeezing only the light form's inner rhythm. */
@media (max-width: 520px) and (min-height: 701px) and (max-height: 760px) {
  :root {
    --page-gutter: 12px;
  }

  .mobile-brand-stage {
    top: 0;
    height: 172px;
  }

  .mobile-brand-glass {
    width: 172px;
    height: 172px;
  }

  .mobile-brand-logo {
    width: min(172px, 44vw);
    height: min(172px, 44vw);
  }

  .mobile-form-tabs {
    top: 180px;
  }

  .form-side {
    padding-top: 236px;
  }
}

/* Safari zooms and can offset the text caret in focused inputs rendered below
   16px. Keep the editable text at the native iOS threshold on every phone. */
@media (max-width: 820px),
       (hover: none) and (pointer: coarse) and (orientation: landscape) and (max-width: 1024px) and (max-height: 600px) {
  .input {
    margin: 0;
    min-height: 0;
    font-size: 16px;
    line-height: normal;
    -webkit-text-size-adjust: 100%;
  }

  /* Keep editable form text restrained and system-native on iOS without
     changing field geometry or the 16px no-zoom threshold. */
  .form .input,
  .form .input::placeholder {
    font-weight: 400;
    letter-spacing: -.011em;
  }

  .form .input::placeholder {
    opacity: 1;
  }

  /* On iOS a touch can leave hover/focus on the icon. Password visibility is
     a steady state instead of a short-lived flash: the fill stays while the
     value is revealed and softly fades only after it is hidden again. */
  .password-toggle {
    transition: color var(--foreground-motion),
      background .36s cubic-bezier(.22, .61, .36, 1),
      transform .18s var(--ease);
  }

  .password-toggle.touch-focused,
  .password-toggle.touch-focused:hover,
  .password-toggle.touch-focused:focus-visible {
    outline: 0;
    outline-offset: 0;
    color: rgba(248, 246, 251, .58);
    background: transparent;
  }

  body.signup .password-toggle.touch-focused,
  body.signup .password-toggle.touch-focused:hover,
  body.signup .password-toggle.touch-focused:focus-visible {
    color: #82788e;
    background: transparent;
  }

  .password-toggle.is-visible,
  .password-toggle.is-visible:hover,
  .password-toggle.is-visible:focus-visible,
  .password-toggle.touch-focused.is-visible,
  .password-toggle.touch-focused.is-visible:hover,
  .password-toggle.touch-focused.is-visible:focus-visible {
    outline: 0;
    outline-offset: 0;
    color: #f4edff;
    background: rgba(182, 80, 241, .18);
  }

  body.signup .password-toggle.is-visible,
  body.signup .password-toggle.is-visible:hover,
  body.signup .password-toggle.is-visible:focus-visible,
  body.signup .password-toggle.touch-focused.is-visible,
  body.signup .password-toggle.touch-focused.is-visible:hover,
  body.signup .password-toggle.touch-focused.is-visible:focus-visible {
    color: var(--purple-2);
    background: rgba(182, 80, 241, .12);
  }

  .email-sheet {
    padding: 16px;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  .email-card {
    padding: 26px 22px 20px;
  }

  .email-card h2 {
    font-size: 24px;
  }

  .email-flow-description {
    min-height: 0;
    margin: 10px auto 18px;
  }
}

@media (max-width: 820px) and (max-height: 680px),
       (hover: none) and (pointer: coarse) and (orientation: landscape) and (max-width: 1024px) and (max-height: 600px) {
  .email-sheet {
    padding: 12px;
  }

  .email-card {
    padding: 20px 18px 16px;
    border-radius: 24px;
  }

  .email-card::before {
    border-radius: 23px;
  }

  .email-sheet-logo {
    width: 42px;
    height: 42px;
    margin-bottom: 7px;
  }

  .email-card h2 {
    font-size: 22px;
  }

  .email-flow-description {
    margin: 7px auto 13px;
    font-size: 13px;
  }

  .email-flow-form {
    gap: 9px;
  }

  .email-flow-actions {
    margin-top: 10px;
  }
}

/* In landscape a phone uses the desktop split composition, but keeps a normal
   document flow. That preserves Safari's live tint source and lets only this
   orientation scroll when the readable desktop form is taller than the view. */
@media (hover: none) and (pointer: coarse) and (orientation: landscape) and (max-width: 1024px) and (max-height: 600px) {
  html,
  body {
    height: auto;
    min-height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior-y: auto;
  }

  .page {
    position: relative;
    inset: auto;
    display: grid;
    width: 100%;
    height: auto;
    min-height: 100dvh;
    place-items: center;
    padding:
      max(10px, env(safe-area-inset-top))
      max(12px, env(safe-area-inset-right))
      max(10px, env(safe-area-inset-bottom))
      max(12px, env(safe-area-inset-left));
    overflow: visible;
  }

  .auth {
    width: min(760px, 100%);
    height: clamp(500px, 122dvh, 560px);
    min-height: 500px;
    max-height: none;
    overflow: hidden;
    border-radius: 32px;
    background: rgba(255, 255, 255, .038);
    box-shadow: 0 36px 100px rgba(0, 0, 0, .38), inset 0 1px 0 rgba(255, 255, 255, .10);
    -webkit-backdrop-filter: blur(28px) saturate(130%);
    backdrop-filter: blur(28px) saturate(130%);
  }

  body.signup .auth {
    border-color: var(--line-light);
    background: rgba(255, 255, 255, .38);
    box-shadow: 0 32px 90px rgba(94, 65, 136, .13), inset 0 1px 0 rgba(255, 255, 255, .78);
  }

  .auth::before,
  .auth::after {
    z-index: 1;
    border-radius: 31px;
  }

  .mobile-theme-surface,
  .mobile-brand-stage,
  .mobile-form-tabs {
    display: none;
  }

  .forms {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: grid;
    grid-template-columns: 1fr 1fr;
    overflow: hidden;
  }

  .form-side {
    position: relative;
    inset: auto;
    display: flex;
    min-width: 0;
    align-items: center;
    justify-content: center;
    padding: 30px 28px;
    transition: opacity 220ms ease, transform var(--mode-motion);
    will-change: transform, opacity;
  }

  .form {
    width: min(280px, 100%);
    max-width: 280px;
    margin: 0 auto;
  }

  .login-side {
    transform: none;
    opacity: 1;
    pointer-events: auto;
    will-change: auto;
  }

  .signup-side,
  body:not(.signup) .signup-side {
    transform: translateX(-8px);
    opacity: .18;
    pointer-events: none;
    will-change: transform, opacity;
  }

  body.signup .login-side {
    transform: translateX(8px);
    opacity: .18;
    pointer-events: none;
    will-change: transform, opacity;
  }

  body.signup .signup-side {
    transform: none;
    opacity: 1;
    pointer-events: auto;
    will-change: auto;
  }

  .slider {
    top: 12px;
    bottom: 12px;
    left: calc(50% + 9px);
    display: block;
    width: calc(50% - 27px);
    border-radius: 28px;
  }

  .slider-content {
    padding: 20px;
  }

  .logo {
    width: clamp(112px, 18vw, 145px);
    height: clamp(112px, 18vw, 145px);
  }

  .switch {
    bottom: 20px;
    min-width: 136px;
    height: 42px;
    border-radius: 14px;
  }

  .form h1 {
    margin-bottom: 16px;
    font-size: 30px;
  }

  .socials {
    gap: 10px;
    margin-bottom: 14px;
  }

  .social {
    width: 44px;
    height: 44px;
    border-radius: 15px;
  }

  .social svg {
    width: 20px;
    height: 20px;
  }

  .or {
    margin-bottom: 12px;
    font-size: 12px;
  }

  .fields {
    gap: 10px;
  }

  .input,
  .primary {
    height: 46px;
    border-radius: 15px;
  }

  .input {
    font-size: 16px;
  }

  .primary {
    font-size: 15px;
  }

  .aux {
    margin: 8px 2px 14px;
  }

  .signup-spacer {
    display: none;
  }

  .mobile-legal {
    display: grid;
    min-height: 32px;
    padding-top: 4px;
    color: var(--muted-dark);
    font-size: 10px;
    line-height: 1.25;
    text-align: center;
    transition: color var(--theme-motion);
  }

  body.signup .mobile-legal {
    color: var(--muted-light);
  }
}

@media (min-width: 821px) and (any-hover: hover) {
  /* The slider is the desktop mode boundary: controls do not continue their
     own recolour after its edge has passed. */
  :root {
    --theme-motion: 320ms var(--ease);
    --foreground-motion: 320ms cubic-bezier(.22, .61, .36, 1);
  }

  .form-side {
    transition: opacity 430ms ease, transform 420ms var(--ease);
  }

  .slider {
    transition:
      transform 680ms var(--ease),
      background var(--theme-motion),
      border-color var(--theme-motion),
      box-shadow var(--theme-motion);
  }

  /* The incoming login pane is revealed by the lens itself, not by a second
     opacity animation after the lens has already moved away. */
  .auth.switching-back .login-side {
    opacity: 1;
    transition: transform 420ms var(--ease);
  }

  /* While registration is covered by the light lens, retain the dark login
     layer below it. As the lens moves right, every newly exposed pixel is
     therefore already in the final login palette. */
  body.signup .login-side .form {
    color: var(--text-dark);
  }

  body.signup .login-side .social {
    border-color: var(--line-dark);
    background: var(--card-dark);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .10);
  }

  body.signup .login-side .or {
    color: var(--muted-dark);
  }

  body.signup .login-side .input {
    border-color: var(--line-dark);
    color: var(--text-dark);
    background: rgba(255, 255, 255, .055);
  }

  body.signup .login-side .input::placeholder {
    color: var(--muted-dark);
  }

  body.signup .login-side .password-toggle {
    color: rgba(248, 246, 251, .58);
  }

  .signup-spacer {
    display: none;
  }

  .mobile-legal {
    display: grid;
    min-height: 40px;
    place-items: center;
    padding-top: 7px;
    color: var(--muted-dark);
    font-size: 11px;
    line-height: 1.35;
    text-align: center;
    transition: color var(--theme-motion);
  }

  .mobile-legal a {
    color: var(--purple);
    font-weight: 680;
    text-decoration: none;
  }

  body.signup .mobile-legal {
    color: var(--muted-light);
  }

  .primary {
    position: relative;
    overflow: hidden;
    isolation: isolate;
  }

  .primary::after {
    position: absolute;
    inset: -65% -40%;
    pointer-events: none;
    opacity: 0;
    background: linear-gradient(112deg, transparent 38%, rgba(255, 255, 255, .34) 47%, rgba(255, 255, 255, .08) 53%, transparent 61%);
    content: "";
    transform: translateX(-42%) rotate(2deg);
    animation: desktop-auth-button-shine 5.4s ease-in-out infinite;
  }

  /* The slider hides the inactive form; its CTA must not keep a live shine
     running underneath that glass. The newly active pane starts its own shine
     as soon as it becomes the visible form. */
  body:not(.signup) .signup-side .primary::after,
  body.signup .login-side .primary::after {
    animation: none;
    opacity: 0;
  }

  @keyframes desktop-auth-button-shine {
    0%, 58% { transform: translateX(-42%) rotate(2deg); opacity: 0; }
    68% { opacity: .8; }
    88%, 100% { transform: translateX(46%) rotate(2deg); opacity: 0; }
  }
}

@media (min-width: 821px) and (max-height: 650px) and (any-hover: hover) {
  .form-side {
    padding: 30px 42px;
  }

  .slider-content {
    padding: 28px;
  }

  .logo {
    width: 170px;
    height: 170px;
  }

  .switch {
    bottom: 24px;
  }
}

/* A Home Screen web app has a taller iOS viewport than a Safari tab. Keep the
   card visually centred there without changing the normal browser layout or
   putting a transform on the editable form frame. */
@media (max-width: 820px) and (orientation: portrait) {
  html.is-standalone .auth {
    top: calc(-1 * clamp(22px, 3.2dvh, 30px));
  }
}

/* Mail confirmation and password recovery use the existing authentication
   frame. The original form disappears, but the logo, glass card and current
   dark/light mode remain exactly where the user expects them. */
.auth.is-email-flow .forms,
.auth.is-email-flow .mobile-form-tabs,
.auth.is-email-flow .auth-notice {
  visibility: hidden;
  pointer-events: none;
}

.flow-slider-back {
  display: none;
}

.auth.is-email-flow #switchMode {
  pointer-events: none;
  opacity: 0;
  transform: translateX(-50%) translateY(8px);
}

.auth.is-email-flow .email-sheet {
  z-index: 2;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  /* Keep the two grid tracks identical to the original form halves. A
     shared inset would pull both flow screens toward the centre by half of
     that inset, making the recovery controls visibly off-centre. */
  padding: 0;
  color: var(--text-dark);
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

body.signup .auth.is-email-flow .email-sheet {
  color: var(--text-light);
  background: transparent;
}

.auth.is-email-flow .email-card {
  grid-column: 1;
  width: min(320px, 100%);
  max-height: none;
  padding: 0;
  overflow: visible;
  border: 0;
  border-radius: 0;
  opacity: 0;
  color: inherit;
  background: transparent;
  box-shadow: none;
  text-align: center;
  transform: translateY(10px);
  transition: opacity .24s ease, transform .24s var(--ease), color var(--foreground-motion);
}

/* The confirmation screen follows its actual task, not whichever visual
   theme happened to be active before it opened. Recovery always belongs to
   the login half; only signup confirmation uses the registration half. */
.auth.is-email-flow[data-email-flow="signup-code"] .email-card {
  grid-column: 2;
}

.auth.is-email-flow .email-card::before,
.auth.is-email-flow .email-sheet-logo,
.auth.is-email-flow .sheet-eyebrow {
  display: none;
}

.auth.is-email-flow .email-sheet[data-open="true"] .email-card {
  opacity: 1;
  transform: none;
}

.auth.is-email-flow .email-card h2 {
  margin: 0 0 12px;
  color: inherit;
  font-size: clamp(28px, 4.45dvh, 34px);
  font-weight: 720;
  line-height: 1;
  letter-spacing: -.04em;
}

.auth.is-email-flow .email-flow-description {
  min-height: 0;
  margin: 0 auto 22px;
  color: inherit;
  opacity: .68;
  font-size: 14px;
  line-height: 1.42;
}

.auth.is-email-flow .email-flow-form {
  gap: 12px;
}

.auth.is-email-flow .email-flow-primary {
  margin-top: 2px;
}

.auth.is-email-flow .email-flow-actions {
  margin-top: 14px;
}

.flow-back {
  display: inline-flex;
  min-height: 34px;
  margin-top: 12px;
  padding: 0 12px;
  border: 1px solid var(--line-dark);
  border-radius: 12px;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: var(--muted-dark);
  cursor: pointer;
  background: rgba(255, 255, 255, .045);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
  font-size: 12px;
  font-weight: 680;
  transition: color var(--foreground-motion), background .18s ease, border-color var(--theme-motion), transform .18s var(--ease);
}

.flow-back svg {
  width: 15px;
  height: 15px;
}

.flow-back:hover {
  color: var(--text-dark);
  background: rgba(255, 255, 255, .09);
  transform: translateX(-1px);
}

.flow-back:active {
  transform: translateX(-1px) scale(.97);
}

.flow-back:focus-visible {
  outline: 2px solid rgba(195, 143, 255, .92);
  outline-offset: 3px;
}

body.signup .flow-back {
  border-color: var(--line-light);
  color: var(--muted-light);
  background: rgba(255, 255, 255, .52);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .78);
}

body.signup .flow-back:hover {
  color: var(--text-light);
  background: rgba(255, 255, 255, .72);
}

/* Desktop keeps the return action in the familiar slider position. */
@media (min-width: 821px),
       (hover: none) and (pointer: coarse) and (orientation: landscape) and (max-width: 1024px) and (max-height: 600px) {
  .auth.is-email-flow .flow-slider-back {
    display: inline-block;
    pointer-events: auto;
    opacity: 1;
    transform: translateX(-50%);
  }

  .auth.is-email-flow .flow-back {
    display: none;
  }
}

@media (max-width: 820px),
       (hover: none) and (pointer: coarse) and (orientation: landscape) and (max-width: 1024px) and (max-height: 600px) {
  .auth.is-email-flow .email-sheet {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 252px 26px 38px;
  }

  .auth.is-email-flow .email-card {
    width: 100%;
    max-width: 378px;
  }

  body.signup .auth.is-email-flow .email-card {
    grid-column: auto;
  }

  .auth.is-email-flow .email-card h2 {
    margin-bottom: 11px;
  }

  .auth.is-email-flow .email-flow-description {
    margin-bottom: 18px;
  }

  .auth.is-email-flow .email-code-input {
    font-size: 24px;
  }
}

@media (max-width: 820px) and (max-height: 700px) {
  .auth.is-email-flow .email-sheet { padding: 218px 22px 30px; }
}

@media (max-width: 820px) and (max-height: 680px) {
  .auth.is-email-flow .email-sheet { padding: 184px 19px 24px; }
  .auth.is-email-flow .email-card h2 { font-size: 27px; }
  .auth.is-email-flow .email-flow-description { margin-bottom: 13px; font-size: 13px; }
}

@media (max-width: 820px) and (max-height: 580px) {
  .auth.is-email-flow .email-sheet { padding: 164px 18px 18px; }
  .auth.is-email-flow .email-card h2 { margin-bottom: 9px; font-size: 25px; }
  .auth.is-email-flow .email-flow-description { margin-bottom: 10px; font-size: 12px; }
  .auth.is-email-flow .email-flow-form { gap: 8px; }
  .auth.is-email-flow .email-flow-actions { margin-top: 8px; }
  .flow-back { min-height: 30px; margin-top: 8px; }
}

@media (max-width: 820px) and (max-height: 500px) {
  .auth.is-email-flow .email-sheet { padding: 132px 16px 16px; }
  .auth.is-email-flow .email-card h2 { margin-bottom: 7px; font-size: 22px; }
  .auth.is-email-flow .email-flow-description { margin-bottom: 8px; font-size: 11px; line-height: 1.3; }
  .auth.is-email-flow .email-flow-form { gap: 6px; }
  .auth.is-email-flow .email-flow-actions { margin-top: 6px; }
  .flow-back { min-height: 28px; margin-top: 6px; font-size: 11px; }
}

@media (max-width: 820px) and (max-height: 430px) {
  .auth.is-email-flow .email-sheet { padding: 100px 14px 10px; }
  .auth.is-email-flow .email-card h2 { margin-bottom: 5px; font-size: 20px; }
  .auth.is-email-flow .email-flow-description { margin-bottom: 6px; font-size: 10px; }
  .auth.is-email-flow .email-flow-actions { margin-top: 4px; }
  .flow-back { min-height: 24px; margin-top: 4px; padding: 0 9px; font-size: 10px; }
}

/* A rotated touch phone intentionally uses the desktop split layout and may
   scroll. Keep the confirmation form readable in that composition too. */
@media (hover: none) and (pointer: coarse) and (orientation: landscape) and (max-width: 1024px) and (max-height: 600px) {
  .auth.is-email-flow .email-sheet {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    padding: 30px 28px;
  }

  .auth.is-email-flow .email-card {
    grid-column: 1;
    width: min(280px, 100%);
    max-width: 280px;
  }

  body.signup .auth.is-email-flow .email-card {
    grid-column: 2;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
  }
}