@import url("https://fonts.googleapis.com/css2?family=Rouge+Script&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Rouge+Script&family=Rubik+Glitch&display=swap");

:root {
	--color-sign-light: #000000;
	--color-bold-light: #101010;
	--color-bg-base-light: #f2f2f2;
	--bg-start-light: #f5f5f5;
	--bg-mid-light: #f3f3f3;
	--bg-end-light: #dfe3e6;
	--form-bg-light: #ffffff;
	--text-primary-light: #333333;
	--text-secondary-light: #666666;
	--accent-blue-light: #0066cc;
	--color-border-light: #00000020;
	--color-border-2-light: #00000005;
	--hr-color-light: #999999;
	--input-bg-start-light: #e9e9e91e;
	--input-bg-end-light: #cffdd01e;
	--input-border-light: #00000010;
	--button-bg-light: #1980cc;
	--button-gradient-start-light: #ff3333;
	--button-gradient-mid1-light: #e6e64d;
	--button-gradient-mid2-light: #e6e6e6;
	--button-gradient-end-light: #3333ff;
	--start-button-bg-start-light: #669985;
	--start-button-bg-mid-light: #806699;
	--start-button-bg-end-light: #4d4d80;
	--magical-text-start-light: #e6b800;
	--magical-text-mid-light: #5ad6fb;
	--magical-text-end-light: #19e950;
	--ellipse-1-bg-light: #0033ff1d;
	--ellipse-2-bg-light: #ffeb331d;
	--ellipse-3-bg-light: #0099ff1d;
	--form-gradient-light: #cfcfcf2c;
	--form-gradient-transparent-light: #a7a7a70e;
	--border-gradient-light: #cfcfcf;
	--border-gradient-transparent-light: #ffffff;
	--color-h1-gradient-light: #e64d4d;
	--color-h1-gradient-mid-light: #80b366;
	--color-h1-gradient-end-light: #99ccff;
	--disclaimer-text-light: #4d4d4d;
}

:root {
	--color-sign: var(--color-sign-light);
	--color-bold: var(--color-bold-light);
	--color-bg-base: var(--color-bg-base-light);
	--bg-start: var(--bg-start-light);
	--bg-mid: var(--bg-mid-light);
	--bg-end: var(--bg-end-light);
	--form-bg: var(--form-bg-light);
	--text-primary: var(--text-primary-light);
	--text-secondary: var(--text-secondary-light);
	--accent-blue: var(--accent-blue-light);
	--accent-text: var(--accent-blue-light);
	--color-border: var(--color-border-light);
	--color-border-2: var(--color-border-2-light);
	--hr-color: var(--hr-color-light);
	--input-bg-start: var(--input-bg-start-light);
	--input-bg-end: var(--input-bg-end-light);
	--input-border: var(--input-border-light);
	--button-bg: var(--button-bg-light);
	--button-gradient-start: var(--button-gradient-start-light);
	--button-gradient-mid1: var(--button-gradient-mid1-light);
	--button-gradient-mid2: var(--button-gradient-mid2-light);
	--button-gradient-end: var(--button-gradient-end-light);
	--start-button-bg-start: var(--start-button-bg-start-light);
	--start-button-bg-mid: var(--start-button-bg-mid-light);
	--start-button-bg-end: var(--start-button-bg-end-light);
	--magical-text-start: var(--magical-text-start-light);
	--magical-text-mid: var(--magical-text-mid-light);
	--magical-text-end: var(--magical-text-end-light);
	--ellipse-1-bg: var(--ellipse-1-bg-light);
	--ellipse-2-bg: var(--ellipse-2-bg-light);
	--ellipse-3-bg: var(--ellipse-3-bg-light);
	--form-gradient: var(--form-gradient-light);
	--form-gradient-transparent: var(--form-gradient-transparent-light);
	--border-gradient: var(--border-gradient-light);
	--border-gradient-transparent: var(--border-gradient-transparent-light);
	--color-h1-gradient: var(--color-h1-gradient-light);
	--color-h1-gradient-mid: var(--color-h1-gradient-mid-light);
	--color-h1-gradient-end: var(--color-h1-gradient-end-light);
	--disclaimer-text: var(--disclaimer-text-light);
}

.nowrap {
	white-space: nowrap;
}

.w90 {
	width: 90%;
	margin: 0 auto;
}

*::selection {
	background: #00b3ff3f;
	color: var(--color-sign);
}

.magical {
	font-family: "Rouge Script", cursive;
	font-weight: 400;
	font-style: normal;
}

span.small {
	font-size: 0.5rem;
	opacity: 0.7;
}

* {
	font-family: "SF Compact", system-ui, -apple-system, BlinkMacSystemFont,
		"Helvetica Neue", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans",
		"Segoe UI", sans-serif;
	overflow-x: hidden;
	max-width: 100vw;
}

html,
body {
	padding-top: env(safe-area-inset-top);
	padding-right: env(safe-area-inset-right);
	padding-bottom: env(safe-area-inset-bottom);
	padding-left: env(safe-area-inset-left);
	margin: 0;
	padding: 0;
	overflow-x: hidden;
	--easeOutExpo: cubic-bezier(0.16, 1, 0.3, 1);
	--easeInOutExpo: cubic-bezier(0.87, 0, 0.13, 1);
	--easeInOutQuad: cubic-bezier(0.45, 0, 0.55, 1);
	--easeOutBack: cubic-bezier(0.34, 1.56, 0.64, 1);
}

body {
	min-height: 100vh;
	width: 100vw;
	overflow-x: hidden;
	color: var(--text-primary);
	background: var(--color-bg-base);
}

.welcome-page > .content {
	margin-top: 10vh;
}

.content {
	position: relative;
	width: 90%;
	margin: 0 auto;
	text-align: left;

	.center {
		text-align: center;
	}

	p.arrow {
		font-size: 3rem;
		font-family: Helvetica, sans-serif;
		mask-image: linear-gradient(to bottom, transparent, black);
		user-select: none;
		-webkit-user-select: none;
		margin-bottom: 1.5rem;

		& .more {
			display: block;
			margin-top: 1rem;
			font-size: 1rem;
			opacity: 0.6;
			color: var(--text-primary);
		}
	}

	p {
		text-align: left;
		color: var(--text-secondary);
	}

	h2.color-sign {
		color: var(--color-sign);
	}

	h2 {
		color: var(--text-primary);
		font-size: 1.8rem;
		font-weight: 600;
	}

	h3 {
		margin-top: 1rem;
		font-size: 1.5rem;
		font-weight: 600;
	}

	b {
		color: var(--color-bold);
	}

	.quote {
		position: relative;
		width: 100%;
		margin: 0 auto;
		overflow: visible;
		padding: 0 10%;
		margin: 0;

		* {
			width: 80%;
		}

		&::after {
			content: "";
			display: block;
			width: 5px;
			height: 100%;
			background: var(--accent-blue);
			position: absolute;
			left: 0%;
			top: 0;
			border-radius: 10px;
		}
	}

	.gradient-text {
		background: linear-gradient(
			90deg,
			var(--magical-text-start) 0%,
			var(--magical-text-mid) 50%,
			var(--magical-text-end) 100%
		);
		-webkit-background-clip: text;
		background-clip: text;
		-webkit-text-fill-color: transparent;
		text-fill-color: transparent;

		&.ai {
			background-image: conic-gradient(
				#34a853 0deg,
				#ffd314 65deg,
				#ff4641 180deg,
				#3186ff 260deg,
				#3186ff 360deg
			);
			background-size: 200% 200%;
			animation: rainbow 5s linear infinite, text-grow 5s linear infinite;
		}
	}

	.creative {
		font-family: "Rubik Glitch", system-ui;
		font-weight: 400;
		font-style: normal;
		background: linear-gradient(
			90deg,
			var(--color-h1-gradient) 0%,
			var(--color-h1-gradient-mid) 50%,
			var(--color-h1-gradient-end) 100%
		);
		-webkit-background-clip: text;
		background-clip: text;
		-webkit-text-fill-color: transparent;
		text-fill-color: transparent;
	}

	hr {
		border: none;
		height: 1px;
		width: 80%;
		background: var(--hr-color);
		margin: 2rem auto;
	}

	.team-h4 {
		font-size: 2rem;
		margin: 2rem 0;
		font-weight: 600;
	}

	span.dots {
		user-select: none;
		-webkit-user-select: none;
		font-size: 1.5rem;
		line-height: 1rem;
		opacity: 0.6;
		color: var(--text-secondary);

		&::after {
			content: "•••";
		}
	}

	span.information {
		position: absolute;

		.i {
			display: inline-flex;
			justify-content: center;
			align-items: center;
			color: var(--accent-blue);
			text-align: center;
			font-weight: 600;
			margin-right: 0.3rem;
			user-select: none;
			-webkit-user-select: none;
			border: 1px solid var(--accent-blue);
			border-radius: 50%;
			width: 1.2rem;
			height: 1.2rem;

			&::after {
				content: "i";
				font-size: 1rem;
				line-height: 1rem;
			}
		}

		.tooltip {
			position: absolute;
			opacity: 0;
			visibility: hidden;
			transition: 0.3s var(--easeInOutQuad);
			display: inline-block;
			background: var(--form-bg);
			color: var(--text-primary);
			padding: 0.5rem 1rem;
			border: 1px solid var(--input-border);
			border-radius: 10px;
			border-top-left-radius: 0;
			font-size: 0.9rem;
			max-width: 200px;

			&::after {
				content: "";
				position: absolute;
				bottom: 100%;
				left: 50%;
				transform: translateX(-50%);
				border-width: 5px;
				border-style: solid;
				border-color: transparent transparent var(--form-bg) transparent;
			}
		}

		input.hidden-checkbox {
			display: none;
		}

		input.hidden-checkbox:checked ~ .tooltip {
			opacity: 1;
			visibility: visible;
		}

		input.hidden-checkbox:checked ~ .i {
			background: var(--accent-blue);
			color: var(--form-bg);
		}
	}

	img.image-center {
		display: block;
		margin: 1rem auto;
		width: 100%;
		border-radius: 17px;
		max-height: 300px;
		object-fit: cover;
	}

	img.image-center-no-cut {
		display: block;
		margin: 1rem auto;
		width: 100%;
		border-radius: 17px;
		object-fit: cover;
	}

	.caption-text {
		display: block;
		text-align: center;
		font-size: 0.7rem;
		opacity: 0.6;
		color: var(--text-secondary);
		margin-top: 0rem;
		margin-bottom: 0.5rem;
	}

	.no-bottom-margin {
		margin-bottom: 0;
	}

	.bottom-margin-1 {
		margin-bottom: 1rem;
	}

	.bottom-margin-05 {
		margin-bottom: 0.5rem;
	}

	.no-bottom-padding {
		padding-bottom: 0 !important;
	}

	.flex {
		display: flex;
	}

	.flex.wrap {
		flex-wrap: wrap;
	}

	.center {
		margin: 0 auto;
		justify-content: center;
		align-items: center;
	}

	.no-border {
		border: none !important;
	}

	.year {
		padding: 0.1rem 0.5rem;
		border-radius: 7px;
		background: var(--color-border);
		margin-right: 0.5rem;
		font-size: 12px;
		width: 1rem;
	}

	.people {
		width: 100%;
		max-width: 800px;
		margin: 0 auto;
	}

	.groups {
		width: 90%;
		max-width: 750px;
		margin: 0 auto;
	}

	.group-person {
		display: flex;
		justify-content: start;
		align-items: end;

		h4 {
			color: var(--color-sign);
			font-size: 1.3rem;
			margin: 0;
		}
	}

	.person {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		width: fit-content;
		flex-wrap: wrap;
		margin: 0 auto;

		&.full {
			min-width: 80%;

			.hero {
				transform: translateX(-1rem);
				justify-content: center !important;
			}
		}

		&.half {
			border-left: 1px solid var(--color-border);
			width: 100%;
			margin: 0.25rem;
			min-width: 300px;
			padding-left: 2rem;

			* {
				justify-content: start !important;
				align-items: start !important;
				text-align: left !important;
			}

			.hero-detail {
				margin: 0;
			}

			.hero {
				margin: 0;
				padding-left: 0;
				padding-right: 0;
			}
		}

		.hero {
			display: flex;
			flex-direction: row;
			justify-content: start;
			align-items: end !important;
			width: 100%;
			padding: 1rem 2rem;

			border-bottom: 1px solid var(--color-border);

			h3 {
				margin: 0;
				margin-left: 1.5rem;
			}
		}

		img {
			max-width: 200px;
			flex: 1;
			object-fit: cover;
			user-select: none;

			mask-image: linear-gradient(
				to bottom,
				black 0%,
				black 85%,
				rgba(0, 0, 0, 0.5) 100%
			);
		}

		.hero-detail {
			margin: 0rem 2rem;
			margin-top: 0.5rem;
			width: 100%;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;

			h3 {
				margin-left: 0;
				color: var(--color-sign);
			}
		}
	}
}

@keyframes completed-enter {
	0% {
		top: 20%;
		padding-left: 0;
		padding-right: 0;
		width: 70%;
		backdrop-filter: blur(0);
		-webkit-backdrop-filter: blur(0);
	}

	50% {
		padding-left: 0;
		padding-right: 0;
		backdrop-filter: blur(7px) brightness(1);
		-webkit-backdrop-filter: blur(7px) brightness(1);
	}

	75% {
		backdrop-filter: blur(7px) brightness(1.3);
		-webkit-backdrop-filter: blur(7px) brightness(1.3);
	}

	100% {
		top: 45%;
		padding-left: 1rem;
		padding-right: 1rem;
		width: 70%;
		width: calc(95% - 2rem);

		backdrop-filter: blur(7px) brightness(1);
		-webkit-backdrop-filter: blur(7px) brightness(1);
	}
}

.dashboard {
	--offset-top: 0;
	--offset-left: 13vw;
	background-image: linear-gradient(
		184.98deg,
		var(--bg-start) 2.36%,
		var(--bg-mid) 50%,
		var(--bg-end) 97.64%
	);

	.logo {
		position: fixed;
		top: 0;
		left: 0;
		z-index: 900;
	}

	img {
		-webkit-touch-callout: none;
		-webkit-user-drag: none;
		-webkit-user-select: none;
		user-select: none;
	}

	.magical-background {
		opacity: 1;
		transition: opacity 0.7s ease-in-out;
		pointer-events: none;
		filter: blur(100px);
		overflow: hidden;
		height: 100vh;
		width: 100vw;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 0;

		.ellipse-1 {
			position: absolute;
			width: 234px;
			height: 234px;
			left: -58px;
			top: 257px;
			background: var(--ellipse-1-bg);
		}

		.ellipse-2 {
			position: absolute;
			width: 408px;
			height: 408px;
			left: 42px;
			top: 0px;
			background: var(--ellipse-2-bg);
		}

		.ellipse-3 {
			position: absolute;
			width: 234px;
			height: 234px;
			left: 201px;
			top: 653px;
			background: var(--ellipse-3-bg);
		}
	}

	.qrcode {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, calc(-50% + 2rem));
		width: 75vw;
		max-width: 400px;
		height: fit-content;

		img {
			width: 75vw !important;
			max-width: 400px;
			object-fit: contain;
			user-select: none;
			-webkit-user-drag: none;
			-webkit-user-select: none;
		}

		&::after {
			content: "Show the code to the iMac Cameras";
			display: block;
			text-align: center;
			font-size: 1rem;
			color: var(--text-primary);
			opacity: 0.6;
			width: 100%;
			margin: 1rem auto;
		}
	}

	.stations-outer {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 100%;
		height: 100%;
		overflow: hidden;
	}

	.stations {
		transition: 1s var(--easeInOutQuad);
		width: 100%;
		height: 100%;
		transform: scale(1);

		.station-1 {
			opacity: 1;
			top: -15px;
			left: 0;
		}

		.station-2 {
			top: -30%;
			left: 0;
		}

		.station-3 {
			top: -50%;
			left: 50%;
		}

		.station-4 {
			top: -50%;
			left: 100%;
		}

		.station-5 {
			top: -30%;
			left: 100%;
		}

		.station-6 {
			top: -20%;
			left: 60%;
		}

		.station-7 {
			top: 0;
			left: 60%;
		}
	}

	.next-stop {
		transform: translate(
			calc(13vw + 4.5rem),
			calc(var(--unchanged-offset-top, 0) - 0.5rem)
		);

		p {
			margin: 0;
			font-size: 1rem;
			opacity: 0.6;
			color: var(--text-primary);
		}

		h1 {
			margin: 0;
			font-size: 1.2rem;
			font-weight: 600;
			color: var(--color-sign);
		}
	}

	.station {
		opacity: 0;
		--size: 4rem;
		position: absolute;
		width: var(--size);
		height: var(--size);
		transform: translate(
			calc(var(--offset-left, 13vw) - 0.5rem),
			calc(var(--offset-top, 0))
		);
		background: color(display-p3 1 1 1 / 0.1);
		border: 1px solid color(display-p3 1 1 1 / 0.2);
		border-radius: 50%;
		overflow: hidden;

		img {
			width: 100%;
			height: 100%;
			object-fit: contain;
			opacity: 0.8;
		}
	}

	.lines {
		pointer-events: none;
		position: absolute;
		top: 0%;
		left: 0%;
		width: 100%;
		height: 100%;
		transform: scale(1);
		overflow: hidden;
	}

	.line {
		transition: 0.5s var(--easeInOutQuad);
		position: absolute;
		height: 3px;
		transform: translate(
			calc(var(--offset-left, 13vw) - 0.5rem),
			calc(var(--offset-top, 0) - 5rem)
		);
		background: color(display-p3 0 0.851 1 / 0.39);
		animation: line-grow 0.5s forwards;
	}

	.completed {
		position: absolute;
		flex-direction: column;
		width: calc(95% - 5rem) !important;
		left: 50%;
		top: 45%;
		max-width: 500px;
		transform: translate(-50%, -50%);
		z-index: 999;
		text-align: left;
		border: 1px solid var(--color-border);
		padding: 2.5rem !important;
		border-radius: 17px;
		background: var(--color-border-2);
		backdrop-filter: blur(17px) brightness(0.9) saturate(1.7);
		-webkit-backdrop-filter: blur(17px) brightness(0.9) saturate(1.7);
		animation: completed-enter 1s forwards var(--easeInOutExpo);

		display: none;

		label {
			font-size: 0.8rem;
			color: var(--text-secondary);
			font-weight: 600;
			display: flex;
			flex-direction: column;
			gap: 3pt;

			span {
				display: block;
				font-weight: 400;
				margin-left: 0.3rem;
			}
		}

		input {
			background: white;
			border: none;
			outline: none;
			margin: 0;
			padding: 0.5rem 1rem;
			margin-bottom: 1.2rem;
			border-radius: 7px;
			font-size: 1rem;
			box-sizing: border-box;
			border: 2px solid var(--input-border);
			transition: 0.3s var(--easeInOutQuad);
		}

		input:valid {
			border-bottom: 2px solid lightgreen;
		}

		input:invalid {
			border-bottom: 2px solid red;
		}

		input:placeholder-shown {
			border-bottom: 2px solid var(--input-border);
		}

		h1 {
			margin: 0;
			-webkit-background-clip: text;
			background-clip: text;
			-webkit-text-fill-color: transparent;
			text-fill-color: transparent;
			transition: 1s var(--easeInOutQuad);
			background-image: linear-gradient(
				94.18deg,
				var(--color-h1-gradient) 1.79%,
				var(--color-h1-gradient-mid) 50.13%,
				var(--color-h1-gradient-end) 98.46%
			);
		}

		button {
			border: 1px solid rgb(99, 221, 255);
			background: rgb(251, 251, 251);
			padding: 4pt 12pt;
			font-size: 8pt;
			width: fit-content;
			border-radius: 100px;
			cursor: pointer;
		}

		button[disabled] {
			border: 1px solid white;
			opacity: 0.5;
			cursor: not-allowed;
		}

		&.display {
			display: flex;
		}
	}

	.footer {
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		padding-top: 1rem;
		padding-bottom: 1rem;
		text-align: center;
		p {
			text-align: center;
			font-size: 0.65rem;
			color: var(--disclaimer-text);
		}
	}
}

@keyframes line-grow {
	from {
		width: 0;
	}
	to {
		width: var(--line-length, 100px);
	}
}

@keyframes rainbow {
	0%,
	100% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
}

@keyframes text-grow {
	0%,
	100% {
		text-shadow: 0 0 5px rgba(255, 0, 0, 0.7);
	}
	25% {
		text-shadow: 0 0 1px rgba(255, 255, 0, 0.7);
	}
	50% {
		text-shadow: 0 0 5px rgba(0, 255, 0, 0.7);
	}
	75% {
		text-shadow: 0 0 5px rgba(0, 0, 255, 0.7);
	}
}

.welcome-page {
	background-image: linear-gradient(
		184.98deg,
		var(--bg-start) 2.36%,
		var(--bg-mid) 50%,
		var(--bg-end) 97.64%
	);
	background-attachment: fixed;
	--form-width: 85vw;
	--form-height: 70vh;
	--form-top: 20vh;

	.mask-group {
		position: relative;
		pointer-events: none;
		height: calc(var(--form-height));
		overflow: hidden;
		margin-top: calc(var(--form-top) / 2);
	}

	.form.starts {
		display: flex;
	}

	.form.continues {
		display: none;
	}

	.form-border {
		overflow: hidden;
		pointer-events: none;
		z-index: -1;
		box-sizing: border-box;
		position: relative;
		width: var(--form-width);
		height: var(--form-height);
		left: 50%;
		right: 50%;
		top: calc(-1 * var(--form-height));
		transform: translateX(-50%);

		.border {
			box-sizing: border-box;
			position: absolute;
			width: calc(var(--form-width));
			height: calc(var(--form-height));
			background: linear-gradient(
				180deg,
				var(--border-gradient) 0%,
				var(--border-gradient-transparent) 36%
			);
			border-radius: 34px;
			opacity: 0.1;
		}

		.mask {
			box-sizing: border-box;
			position: absolute;
			width: calc(var(--form-width) - 3px);
			height: calc(var(--form-height) - 3px);
			left: 50%;
			top: 50%;
			transform: translate(-50%, -50%);
			background: var(--form-bg);
			border-radius: 33px;
		}
	}

	.form input,
	.form button,
	.form a,
	.form .button-check {
		pointer-events: auto;
	}

	.loading {
		display: none;
	}

	.form {
		z-index: 1;
		box-sizing: border-box;
		position: relative;
		width: var(--form-width);
		height: var(--form-height);
		left: 50%;
		right: 50%;
		top: 0;
		transform: translateX(-50%);
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 5rem 0;
		padding-bottom: 0;
		user-select: none;
		-webkit-user-select: none;
		background: linear-gradient(
			196.61deg,
			var(--form-gradient) 1.7%,
			var(--form-gradient-transparent) 21.72%,
			var(--form-gradient-transparent) 72.98%
		);
		border-radius: 33px;

		* {
			max-width: 100%;
			overflow: hidden;
		}

		h1,
		.color-h1 {
			position: relative;
			font-style: normal;
			font-weight: 656;
			display: flex;
			align-items: center;
			text-align: center;
			font-size: min(13vw, 13vh);
			background: linear-gradient(
				180deg,
				var(--text-primary) 0%,
				var(--text-secondary) 100%
			);
			-webkit-background-clip: text;
			background-clip: text;
			-webkit-text-fill-color: transparent;
			text-fill-color: transparent;
			margin: 0;
		}

		.color-h1 {
			position: absolute;
			transition: 1s var(--easeInOutQuad);
			background-image: linear-gradient(
				94.18deg,
				var(--color-h1-gradient) 1.79%,
				var(--color-h1-gradient-mid) 50.13%,
				var(--color-h1-gradient-end) 98.46%
			);
			opacity: 0;
			mask-image: linear-gradient(
				to right,
				transparent,
				transparent 50%,
				black 50%,
				black
			);
			-webkit-mask-image: linear-gradient(
				to right,
				transparent,
				transparent 50%,
				black 50%,
				black
			);
			mask-size: 200% 100%;
			mask-position: 0% 0;
		}

		h2 {
			position: relative;
			font-style: normal;
			font-weight: 350;
			display: flex;
			align-items: center;
			text-align: center;
			font-size: min(4vw, 4vh);
			background: linear-gradient(
				180deg,
				var(--text-primary) 0%,
				var(--text-secondary) 100%
			);
			-webkit-background-clip: text;
			background-clip: text;
			-webkit-text-fill-color: transparent;
			text-fill-color: transparent;
			margin: 0;
		}

		.input-group {
			margin-top: 2rem;
			width: 70%;
			max-width: 500px;
			display: flex;
			flex-direction: column;
			align-items: start;
			gap: 0.3rem;

			label {
				margin-left: 0.3rem;
				font-size: 0.9rem;
				color: var(--accent-blue);
			}

			.horizontal-group {
				display: flex;
				width: 100%;
				--check-button-width: 2.3rem;

				input {
					box-sizing: border-box;
					width: calc(100%);
					height: 2rem;
					left: calc(50% - 100% / 2 + 0.5px);
					outline: none;
					font-size: 16px;
					color: var(--text-primary);
					background: linear-gradient(
						90deg,
						var(--input-bg-start) 0%,
						var(--input-bg-end) 100%
					);
					border: 1.5px solid var(--input-border);
					border-radius: 11px;
					padding-left: 0.5rem;
					transition: 0.5s var(--easeInOutExpo);
				}

				input:focus {
					width: calc(100% - var(--check-button-width, 0rem));
				}

				input:focus + .button-check {
					width: var(--check-button-width, 0rem);
					opacity: 1;
				}

				.button-check {
					display: flex;
					justify-content: center;
					align-items: center;
					box-sizing: border-box;
					overflow: hidden;
					width: 0rem;
					height: 2rem;
					margin-left: 0.2rem;
					background: var(--button-bg);
					border-radius: 11px;
					padding: 0;
					opacity: 0;
					transition: 0.5s var(--easeInOutQuad);

					&::after {
						content: "";
						display: block;
						width: 100%;
						height: 100%;
						background: url("../assets/check.svg") no-repeat center;
						background-size: contain;
						opacity: 0.2;
						transition: 0.3s;
					}

					&:active {
						transform: scale(0.95);
						transition: 0.1s var(--easeInOutQuad);
					}
				}

				input:valid + .button-check {
					&::after {
						opacity: 1;
					}

					&:active::after {
						opacity: 0.7;
					}
				}
			}
		}

		.button-start {
			pointer-events: none;
			margin-top: 1rem;
			opacity: 0;

			&,
			* {
				transition: 1s var(--easeInOutExpo);
			}

			.button-border {
				border-radius: 10px;
				--button-gradient-start: 0deg;
				background: conic-gradient(
					from var(--button-gradient-start, 192.81deg) at 50% 50%,
					var(--button-gradient-start) 0deg,
					var(--button-gradient-mid1) 90deg,
					var(--button-gradient-mid2) 180deg,
					var(--button-gradient-end) 270deg,
					var(--button-gradient-start) 360deg
				);
				padding: 1.5px;
			}

			.journey-button {
				pointer-events: none;
				background: linear-gradient(
					90.94deg,
					var(--start-button-bg-start) 0%,
					var(--start-button-bg-mid) 50%,
					var(--start-button-bg-end) 100%
				);
				border-radius: 9px;
				border: none;
				outline: none;
				padding: 0 0rem;
				height: 2.5rem;
				font-size: 1rem;
				color: white;
				font-weight: 600;
				cursor: pointer;
				transition: 0.3s var(--easeInOutQuad);
				display: flex;
				align-items: center;
				justify-content: center;

				.magical {
					display: inline-block;
					font-size: 1rem;
					background: linear-gradient(
						90deg,
						var(--magical-text-start) 0%,
						var(--magical-text-mid) 50%,
						var(--magical-text-end) 100%
					);
					-webkit-background-clip: text;
					background-clip: text;
					-webkit-text-fill-color: transparent;
					text-fill-color: transparent;
					line-height: 1.2;
					transform: translateY(-1rem);
				}

				&::after {
					content: "";
					display: block;
					--scale-factor: 0.7;
					width: calc(1.4rem * var(--scale-factor));
					height: calc(1.1rem * var(--scale-factor));
					margin-left: 0.4rem;
					background: url("../assets/arrow-left.gold.svg") no-repeat
						center;
					background-size: contain;
				}
			}
		}

		.disclaimer {
			position: absolute;
			bottom: 2rem;
			opacity: 0.5;
			margin-top: 2rem;
			font-size: 12px;
			color: var(--disclaimer-text);
			text-align: center;
			width: 70%;
			max-width: 500px;
			font-weight: 300;
			transition: 1s var(--easeInOutQuad);

			a {
				color: var(--accent-blue);
				text-decoration: none;
			}

			a:hover {
				text-decoration: underline;
			}
		}
	}

	.magical-background {
		opacity: 0;
		transition: opacity 0.7s ease-in-out;
		pointer-events: none;
		filter: blur(100px);
		overflow: hidden;
		height: 100vh;
		width: 100vw;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 0;

		.ellipse-1 {
			position: absolute;
			width: 234px;
			height: 234px;
			left: -58px;
			top: 257px;
			background: var(--ellipse-1-bg);
		}

		.ellipse-2 {
			position: absolute;
			width: 408px;
			height: 408px;
			left: 42px;
			top: 0px;
			background: var(--ellipse-2-bg);
		}

		.ellipse-3 {
			position: absolute;
			width: 234px;
			height: 234px;
			left: 201px;
			top: 653px;
			background: var(--ellipse-3-bg);
		}
	}

	&.ready {
		h1 {
			opacity: 0;
			transition: opacity 0.5s ease-in-out;
		}
		.color-h1 {
			opacity: 1;
			mask-position: -100% 0;
		}

		.magical-background {
			opacity: 1;
		}

		.button-start {
			pointer-events: auto;
			margin-top: 3rem;
			opacity: 1;

			.journey-button {
				pointer-events: auto;
				padding: 0 0.5rem;
			}

			.magical {
				font-size: 2rem !important;
				transform: translateY(0) !important;
			}
		}
	}
}

.welcome-page .footer,
.information .footer {
	padding-top: 1rem;
	padding-bottom: 1rem;
	margin-top: 4rem;
	background: var(--color-bg-base);

	p {
		text-align: center;
		font-size: 0.65rem;
		color: var(--disclaimer-text);
	}
}

::-webkit-scrollbar {
	display: none;
}

.information {
	.feedback {
		margin: 20px auto;
		display: block;
		overflow-x: scroll;
	}
	table {
		border-collapse: collapse;
		width: 100%;
		max-width: 600px;
		margin: 20px 0;
		font-family: Arial, sans-serif;
		overflow: scroll;
	}
	th,
	td {
		border: 1px solid var(--color-border);
		padding: 8px;
		text-align: center;
	}
	th {
		background-color: var(--color-border-2);
	}
	td:empty::after {
		content: "\\";
	}

	.highlight {
		background: var(--color-border);
		color: var(--color-sign);
	}

	button {
		border: 1px solid rgb(99, 221, 255);
		background: rgb(251, 251, 251);
		padding: 4pt 12pt;
		font-size: 8pt;
		width: fit-content;
		border-radius: 100px;
		cursor: pointer;
	}

	input {
		background: white;
		border: none;
		outline: none;
		margin: 0;
		padding: 0.2rem 0.4rem;
		margin-bottom: 1.2rem;
		border-radius: 7px;
		font-size: 10pt;
		box-sizing: border-box;
		border: 2px solid var(--input-border);
		transition: 0.3s var(--easeInOutQuad);
	}
}

@media (max-width: 768px) {
	.welcome-page {
		--form-height: 65vh;
	}
}

.logo {
	width: 2rem;
	height: 2rem;
	margin: 2rem;
	display: block;
	overflow: hidden;

	img {
		height: 2rem;
		width: 2rem;
		object-fit: cover;
	}
}

a {
	color: var(--accent-blue);
}

.color-text-secondary {
	color: var(--text-secondary) !important;
}