.ftw-otp,
.ftw-access-gate {
	--ftw-ink: #1d1835;
	--ftw-purple: #6f35a5;
	--ftw-violet: #955bc7;
	--ftw-orchid: #bb82d8;
	--ftw-lilac: #e5d5f0;
	--ftw-cream: #faf8f5;
	--ftw-mist: #f5f0f8;
	--ftw-line: rgba(71, 45, 101, 0.16);
	--ftw-deep: #160f2d;
	--ftw-plum: #2b1944;
	--ftw-pearl: #fdfbf8;
	--ftw-grey: #6e6483;
	--ftw-error: #9d334f;
	font-family: "Alegreya Sans", "Helvetica Neue", sans-serif;
}

.ftw-otp[hidden] {
	display: none !important;
}

.ftw-otp {
	position: fixed;
	inset: 0;
	z-index: 1000000;
	display: grid;
	place-items: center;
	box-sizing: border-box;
	padding: clamp(18px, 4vw, 42px);
	color: var(--ftw-ink);
}

.ftw-otp *,
.ftw-access-gate * {
	box-sizing: border-box;
}

.ftw-otp__backdrop {
	position: absolute;
	inset: 0;
	background:
		radial-gradient(circle at 18% 16%, rgba(187, 130, 216, 0.24), transparent 32%),
		radial-gradient(circle at 84% 88%, rgba(149, 91, 199, 0.2), transparent 36%),
		rgba(22, 15, 45, 0.88);
	backdrop-filter: blur(12px) saturate(0.82);
}

.ftw-otp__backdrop::after,
.ftw-access-gate::after {
	position: absolute;
	inset: 0;
	background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.3'/%3E%3C/svg%3E");
	content: "";
	opacity: 0.035;
	pointer-events: none;
}

.ftw-otp__dialog {
	position: relative;
	isolation: isolate;
	width: min(100%, 548px);
	max-height: calc(100dvh - 36px);
	overflow: auto;
	border: 1px solid rgba(255, 255, 255, 0.58);
	border-radius: 36px 36px 36px 16px;
	background:
		linear-gradient(145deg, rgba(255, 255, 255, 0.82), transparent 44%),
		linear-gradient(160deg, var(--ftw-pearl), var(--ftw-mist));
	box-shadow:
		0 42px 100px -44px rgba(13, 7, 30, 0.82),
		inset 0 1px 0 rgba(255, 255, 255, 0.88);
	overflow-x: hidden;
}

.ftw-otp__brand {
	position: relative;
	z-index: 2;
	display: flex;
	align-items: center;
	gap: 12px;
	min-height: 82px;
	padding: 20px clamp(28px, 7vw, 46px) 17px;
	border-bottom: 1px solid var(--ftw-line);
}

.ftw-otp__brand img {
	display: block;
	width: 66px;
	height: auto;
}

.ftw-otp__brand span {
	padding-left: 12px;
	border-left: 1px solid rgba(71, 45, 101, 0.22);
	color: var(--ftw-grey);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.16em;
	line-height: 1;
	text-transform: uppercase;
}

.ftw-otp__rings {
	position: absolute;
	top: -94px;
	right: -104px;
	z-index: -1;
	width: 260px;
	aspect-ratio: 1;
	border: 1px solid rgba(111, 53, 165, 0.1);
	border-radius: 50%;
	pointer-events: none;
}

.ftw-otp__rings span {
	position: absolute;
	inset: 32px;
	border: 1px solid rgba(149, 91, 199, 0.12);
	border-radius: inherit;
}

.ftw-otp__rings span + span {
	inset: 68px;
	background: rgba(229, 213, 240, 0.3);
}

.ftw-otp__content {
	position: relative;
	z-index: 1;
	padding: clamp(32px, 7vw, 48px) clamp(28px, 7vw, 46px) clamp(34px, 7vw, 46px);
}

.ftw-otp__eyebrow,
.ftw-access-gate__eyebrow {
	margin: 0 0 13px;
	color: var(--ftw-violet);
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.2em;
	line-height: 1.45;
	text-transform: uppercase;
}

.ftw-otp__dialog h2 {
	max-width: 430px;
	margin: 0 0 16px;
	color: var(--ftw-ink);
	font-family: "Literata", Georgia, serif;
	font-size: clamp(35px, 7vw, 48px);
	font-weight: 400;
	letter-spacing: -0.045em;
	line-height: 1.06;
	text-wrap: balance;
}

.ftw-otp__description {
	max-width: 440px;
	margin: 0;
	color: var(--ftw-grey);
	font-size: 17px;
	line-height: 1.62;
	text-wrap: pretty;
}

.ftw-otp__destination {
	display: inline-flex;
	min-height: 31px;
	align-items: center;
	margin: 18px 0 27px;
	padding: 7px 13px;
	border: 1px solid rgba(111, 53, 165, 0.12);
	border-radius: 999px;
	background: rgba(229, 213, 240, 0.54);
	color: var(--ftw-purple);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.02em;
}

.ftw-otp label,
.ftw-access-gate__form label {
	display: block;
	margin-bottom: 9px;
	color: var(--ftw-ink);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.02em;
}

.ftw-otp input {
	width: 100%;
	height: 72px;
	border: 1px solid var(--ftw-line);
	border-radius: 18px;
	background: rgba(255, 255, 255, 0.82);
	box-shadow: inset 0 1px 0 #fff;
	color: var(--ftw-ink);
	font: 700 30px/1 "Alegreya Sans", "Helvetica Neue", sans-serif;
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.48em;
	outline: none;
	padding: 0 12px 0 calc(12px + 0.48em);
	text-align: center;
	transition: border-color 0.24s ease, box-shadow 0.24s ease, background 0.24s ease;
}

.ftw-otp input:focus,
.ftw-access-gate__form input:focus {
	border-color: var(--ftw-violet);
	background: #fff;
	box-shadow: 0 0 0 4px rgba(149, 91, 199, 0.13);
}

.ftw-otp__message {
	min-height: 21px;
	margin: 11px 0 12px;
	color: var(--ftw-purple);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.45;
}

.ftw-otp__message.is-error {
	color: var(--ftw-error);
}

.ftw-otp button,
.ftw-access-gate button {
	font-family: "Alegreya Sans", "Helvetica Neue", sans-serif;
}

.ftw-otp button:disabled,
.ftw-otp input:disabled {
	cursor: wait;
	opacity: 0.64;
}

.ftw-otp__primary,
.ftw-access-gate__primary {
	display: inline-flex;
	width: 100%;
	min-height: 54px;
	align-items: center;
	justify-content: center;
	border: 0;
	border-radius: 999px;
	background: var(--ftw-violet);
	box-shadow: 0 16px 32px -22px rgba(66, 28, 102, 0.85);
	color: #fff;
	cursor: pointer;
	font-size: 16px;
	font-weight: 800;
	line-height: 1;
	padding: 16px 27px;
	text-decoration: none;
	transition: transform 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
}

.ftw-otp__primary:hover,
.ftw-access-gate__primary:hover {
	background: var(--ftw-purple);
	box-shadow: 0 19px 34px -22px rgba(66, 28, 102, 0.95);
	transform: translateY(-2px);
}

.ftw-otp__primary:active,
.ftw-access-gate__primary:active {
	transform: translateY(0) scale(0.985);
}

.ftw-otp__secondary {
	display: flex;
	justify-content: space-between;
	gap: 20px;
	margin-top: 19px;
}

.ftw-otp__secondary button,
.ftw-access-gate__link {
	min-height: 44px;
	border: 0;
	background: transparent;
	color: var(--ftw-grey);
	cursor: pointer;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.25;
	padding: 8px 0;
	text-decoration: underline;
	text-decoration-color: rgba(110, 100, 131, 0.42);
	text-underline-offset: 4px;
	transition: color 0.22s ease, text-decoration-color 0.22s ease;
}

.ftw-otp__secondary button:hover,
.ftw-access-gate__link:hover {
	color: var(--ftw-purple);
	text-decoration-color: currentColor;
}

.ftw-otp__note {
	margin: 15px 0 0;
	padding-top: 16px;
	border-top: 1px solid var(--ftw-line);
	color: var(--ftw-grey);
	font-size: 12px;
	line-height: 1.5;
	text-align: center;
}

.ftw-otp__account {
	display: block;
	margin-top: 14px;
	color: var(--ftw-purple);
	font-size: 14px;
	font-weight: 700;
	line-height: 1.3;
	text-align: center;
	text-underline-offset: 4px;
}

.ftw-otp__account[hidden] {
	display: none;
}

.ftw-otp__account--registration {
	margin-top: 20px;
	border-radius: 10px;
	background: var(--ftw-purple);
	color: #fff;
	padding: 14px 20px;
	text-decoration: none;
}

.ftw-otp__account--registration:hover {
	background: var(--ftw-plum);
	color: #fff;
}

.ftw-otp :focus-visible,
.ftw-access-gate :focus-visible {
	outline: 2px solid var(--ftw-violet);
	outline-offset: 3px;
}

.ftw-otp-open {
	overflow: hidden;
}

.ftw-access-gate {
	position: relative;
	isolation: isolate;
	display: grid;
	min-height: 100dvh;
	place-items: center;
	margin: 0;
	overflow: hidden;
	padding: clamp(20px, 5vw, 56px);
	background:
		radial-gradient(circle at 14% 12%, rgba(187, 130, 216, 0.25), transparent 30%),
		radial-gradient(circle at 86% 86%, rgba(149, 91, 199, 0.22), transparent 34%),
		linear-gradient(135deg, var(--ftw-deep), #34204c);
	color: var(--ftw-ink);
}

.ftw-access-gate::before {
	position: absolute;
	top: -24vw;
	right: -14vw;
	width: min(66vw, 900px);
	aspect-ratio: 1;
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 50%;
	box-shadow: 0 0 0 70px rgba(255, 255, 255, 0.025), 0 0 0 150px rgba(255, 255, 255, 0.018);
	content: "";
	pointer-events: none;
}

.ftw-access-gate__card {
	position: relative;
	z-index: 1;
	width: min(100%, 590px);
	padding: clamp(34px, 7vw, 58px);
	border: 1px solid rgba(255, 255, 255, 0.6);
	border-radius: 38px 38px 38px 17px;
	background: linear-gradient(145deg, var(--ftw-pearl), var(--ftw-mist));
	box-shadow: 0 40px 100px -46px rgba(5, 2, 15, 0.88);
}

.ftw-access-gate__brand {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	margin-bottom: clamp(40px, 7vw, 58px);
	color: var(--ftw-purple);
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0.14em;
	text-decoration: none;
	text-transform: uppercase;
}

.ftw-access-gate__brand img {
	width: 76px;
	height: auto;
}

.ftw-access-gate__brand span {
	padding-left: 12px;
	border-left: 1px solid var(--ftw-line);
}

.ftw-access-gate h1 {
	max-width: 480px;
	margin: 0 0 17px;
	color: var(--ftw-ink);
	font-family: "Literata", Georgia, serif;
	font-size: clamp(39px, 7vw, 58px);
	font-weight: 400;
	letter-spacing: -0.045em;
	line-height: 1.04;
	text-wrap: balance;
}

.ftw-access-gate__description {
	max-width: 480px;
	margin: 0 0 32px;
	color: var(--ftw-grey);
	font-size: clamp(17px, 2vw, 19px);
	line-height: 1.62;
	text-wrap: pretty;
}

.ftw-access-gate__form input {
	width: 100%;
	height: 58px;
	margin-bottom: 15px;
	border: 1px solid var(--ftw-line);
	border-radius: 17px;
	background: rgba(255, 255, 255, 0.82);
	color: var(--ftw-ink);
	font: 500 17px/1 "Alegreya Sans", "Helvetica Neue", sans-serif;
	outline: none;
	padding: 0 17px;
	transition: border-color 0.24s ease, box-shadow 0.24s ease, background 0.24s ease;
}

.ftw-access-gate__message {
	min-height: 20px;
	margin: 10px 0;
	color: var(--ftw-error);
	font-size: 14px;
}

.ftw-access-gate__link {
	display: block;
	margin: 18px auto 0;
	text-align: center;
}

@media (max-width: 580px) {
	.ftw-otp {
		align-items: end;
		padding: 10px;
	}

	.ftw-otp__dialog {
		max-height: calc(100dvh - 20px);
		border-radius: 29px 29px 29px 13px;
	}

	.ftw-otp__brand {
		min-height: 70px;
		padding: 16px 24px 14px;
	}

	.ftw-otp__brand img {
		width: 58px;
	}

	.ftw-otp__content {
		padding: 29px 24px 30px;
	}

	.ftw-otp__dialog h2 {
		font-size: clamp(34px, 11vw, 43px);
	}

	.ftw-otp__description {
		font-size: 16px;
	}

	.ftw-otp__destination {
		margin: 16px 0 23px;
	}

	.ftw-otp input {
		height: 66px;
		font-size: 27px;
		letter-spacing: 0.38em;
		padding-left: calc(12px + 0.38em);
	}

	.ftw-otp__secondary {
		align-items: flex-start;
		flex-direction: column-reverse;
		gap: 1px;
	}

	.ftw-access-gate {
		align-items: end;
		padding: 10px;
	}

	.ftw-access-gate__card {
		padding: 36px 24px 32px;
		border-radius: 30px 30px 30px 14px;
	}

	.ftw-access-gate__brand {
		margin-bottom: 38px;
	}
}

@media (prefers-reduced-motion: no-preference) {
	.ftw-otp:not([hidden]) .ftw-otp__dialog {
		animation: ftw-otp-in 0.34s cubic-bezier(0.22, 1, 0.36, 1) both;
	}

	@keyframes ftw-otp-in {
		from {
			opacity: 0;
			transform: translateY(18px) scale(0.982);
		}
		to {
			opacity: 1;
			transform: none;
		}
	}
}

@media (prefers-reduced-motion: reduce) {
	.ftw-otp *,
	.ftw-otp *::before,
	.ftw-otp *::after,
	.ftw-access-gate *,
	.ftw-access-gate *::before,
	.ftw-access-gate *::after {
		scroll-behavior: auto !important;
		transition: none !important;
	}

	.ftw-otp__primary:hover,
	.ftw-access-gate__primary:hover {
		transform: none;
	}
}