/* Test Comment for CI/CD */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
	display: block;
}

ol, ul {
	list-style: none;
}

blockquote, q {
	quotes: none;
}

*, *:before, *:after {
	box-sizing: border-box;
}

:root {
	--bg-base: #06131f;
	--bg-deep: #071a2d;
	--bg-accent: #0f8b8d;
	--bg-highlight: #f4b860;
	--text-main: rgba(255, 255, 255, 0.94);
	--text-muted: rgba(255, 255, 255, 0.72);
	--panel-border: rgba(255, 255, 255, 0.18);
	--panel-fill: rgba(4, 16, 28, 0.30);
	--icon-fill: rgba(255, 255, 255, 0.08);
	--icon-fill-hover: rgba(255, 255, 255, 0.18);
	--icon-fill-active: rgba(255, 255, 255, 0.28);
	--shadow-soft: 0 2rem 5rem rgba(0, 0, 0, 0.35);
}

body, input, select, textarea {
	color: var(--text-main);
	font-family: "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	font-size: 15pt;
	font-weight: 300;
	letter-spacing: -0.025em;
	line-height: 1.75em;
}

html, body {
	min-height: 100%;
}

body {
	background:
		radial-gradient(circle at top, rgba(15, 139, 141, 0.22), transparent 42%),
		linear-gradient(160deg, var(--bg-base) 0%, var(--bg-deep) 48%, #02060d 100%);
	min-height: 100vh;
	min-height: 100dvh;
	overflow-x: hidden;
	overflow-y: auto;
}

a {
	transition: border-color 0.2s ease-in-out;
	border-bottom: dotted 1px rgba(255, 255, 255, 0.45);
	color: inherit;
	text-decoration: none;
}

a:hover {
	border-color: transparent;
}

a:focus-visible {
	outline: 3px solid var(--bg-highlight);
	outline-offset: 4px;
}

.icon {
	position: relative;
	text-decoration: none;
}

.icon svg {
	fill: currentColor;
	height: 1.6rem;
	width: 1.6rem;
}

@keyframes wrapper {
	0% {
		opacity: 0;
		transform: scale(0.985);
	}

	100% {
		opacity: 1;
		transform: scale(1);
	}
}

@keyframes header {
	0% {
		transform: translate3d(0, 1.25rem, 0);
		opacity: 0;
	}

	100% {
		transform: translate3d(0, 0, 0);
		opacity: 1;
	}
}

@keyframes nav-icons {
	0% {
		transform: translate3d(0, 0.75rem, 0);
		opacity: 0;
	}

	100% {
		transform: translate3d(0, 0, 0);
		opacity: 1;
	}
}

@keyframes drift {
	0% {
		transform: translate3d(0, 0, 0) scale(1) rotate(0deg);
	}

	30% {
		transform: translate3d(3vw, -2.5vh, 0) scale(1.1) rotate(6deg);
	}

	65% {
		transform: translate3d(-2vw, 2vh, 0) scale(0.94) rotate(-5deg);
	}

	100% {
		transform: translate3d(-4vw, 1.5vh, 0) scale(1.04) rotate(3deg);
	}
}

@keyframes drift-alt {
	0% {
		transform: translate3d(0, 0, 0) scale(1) rotate(0deg);
	}

	35% {
		transform: translate3d(-4vw, 2.5vh, 0) scale(1.08) rotate(-7deg);
	}

	70% {
		transform: translate3d(1.5vw, -2vh, 0) scale(0.96) rotate(5deg);
	}

	100% {
		transform: translate3d(3vw, -3vh, 0) scale(1.05) rotate(-2deg);
	}
}

@keyframes pan-grid {
	0% {
		transform: perspective(100vh) rotateX(72deg) translate3d(0, 0, 0);
	}

	100% {
		transform: perspective(100vh) rotateX(72deg) translate3d(0, 6rem, 0);
	}
}

@keyframes pulse {
	0% {
		opacity: 0.24;
	}

	50% {
		opacity: 0.48;
	}

	100% {
		opacity: 0.24;
	}
}

@keyframes shimmer {
	0% {
		transform: translate3d(-8%, 0, 0) rotate(0deg);
		opacity: 0.16;
	}

	50% {
		transform: translate3d(6%, -2%, 0) rotate(6deg);
		opacity: 0.3;
	}

	100% {
		transform: translate3d(-5%, 3%, 0) rotate(-4deg);
		opacity: 0.18;
	}
}

@keyframes noise {
	0% {
		transform: translate3d(0, 0, 0);
	}

	25% {
		transform: translate3d(-1.5%, 1%, 0);
	}

	50% {
		transform: translate3d(1.25%, -1.25%, 0);
	}

	75% {
		transform: translate3d(0.75%, 1.5%, 0);
	}

	100% {
		transform: translate3d(0, 0, 0);
	}
}

.animated-background,
.animated-background > div {
	position: fixed;
	inset: 0;
}

.animated-background {
	overflow: hidden;
	z-index: -2;
}

.animated-background__gradient {
	background:
		radial-gradient(circle at 18% 20%, rgba(59, 130, 246, 0.3), transparent 28%),
		radial-gradient(circle at 82% 24%, rgba(244, 184, 96, 0.2), transparent 24%),
		radial-gradient(circle at 52% 78%, rgba(15, 139, 141, 0.26), transparent 30%),
		conic-gradient(from 180deg at 50% 50%, rgba(255, 255, 255, 0.02), rgba(86, 182, 194, 0.08), rgba(255, 255, 255, 0.02)),
		linear-gradient(135deg, rgba(6, 19, 31, 0.86), rgba(7, 26, 45, 0.68));
	filter: saturate(125%);
	animation: pulse 9s ease-in-out infinite;
}

.animated-background__gradient:after {
	content: "";
	position: absolute;
	inset: -12%;
	background:
		radial-gradient(circle at 25% 35%, rgba(255, 255, 255, 0.12), transparent 18%),
		radial-gradient(circle at 70% 60%, rgba(86, 182, 194, 0.16), transparent 22%),
		linear-gradient(120deg, transparent 20%, rgba(255, 255, 255, 0.08) 48%, transparent 76%);
	mix-blend-mode: screen;
	filter: blur(36px);
	animation: shimmer 11s ease-in-out infinite alternate;
}

.animated-background__grid {
	top: 45%;
	height: 70vh;
	background-image:
		linear-gradient(rgba(255, 255, 255, 0.12) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, 0.09) 1px, transparent 1px),
		radial-gradient(circle at center, rgba(94, 234, 212, 0.22), transparent 55%);
	background-size: 4rem 4rem, 4rem 4rem, 100% 100%;
	mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.95) 22%, rgba(0, 0, 0, 0));
	opacity: 0.42;
	transform-origin: center top;
	animation: pan-grid 9s linear infinite;
}

.animated-background__glow {
	border-radius: 50%;
	filter: blur(80px);
	mix-blend-mode: screen;
	opacity: 0.5;
}

.animated-background__glow--one {
	top: -10%;
	left: -8%;
	width: 34rem;
	height: 34rem;
	background: radial-gradient(circle, rgba(32, 197, 203, 0.7), rgba(32, 197, 203, 0));
	animation: drift 12s ease-in-out infinite alternate;
}

.animated-background__glow--two {
	top: 12%;
	right: -10%;
	width: 28rem;
	height: 28rem;
	background: radial-gradient(circle, rgba(63, 131, 248, 0.62), rgba(63, 131, 248, 0));
	animation: drift-alt 14s ease-in-out infinite alternate;
}

.animated-background__glow--three {
	bottom: -18%;
	left: 28%;
	width: 36rem;
	height: 36rem;
	background: radial-gradient(circle, rgba(244, 184, 96, 0.42), rgba(244, 184, 96, 0));
	animation: drift 16s ease-in-out infinite alternate-reverse;
}

.animated-background__noise {
	background-image:
		linear-gradient(rgba(255, 255, 255, 0.025), rgba(255, 255, 255, 0.025)),
		repeating-linear-gradient(
			0deg,
			rgba(255, 255, 255, 0.03) 0,
			rgba(255, 255, 255, 0.03) 1px,
			transparent 1px,
			transparent 3px
		);
	opacity: 0.2;
	animation: noise 0.22s steps(2) infinite;
}

#wrapper {
	animation: wrapper 1.4s ease forwards;
	min-height: 100vh;
	min-height: 100dvh;
	opacity: 0;
	width: 100%;
}

#main {
	align-items: center;
	display: flex;
	justify-content: center;
	min-height: 100vh;
	min-height: 100dvh;
	padding: 2rem;
	text-align: center;
	width: 100%;
}

#main > .content-shell {
	color: var(--text-main);
	display: block;
	max-width: 44rem;
	width: 100%;
}

#header {
	animation: header 1s 0.35s ease forwards;
	background: linear-gradient(180deg, rgba(9, 23, 36, 0.20), rgba(9, 23, 36, 0.36));
	backdrop-filter: blur(18px);
	border: 1px solid var(--panel-border);
	border-radius: 1.75rem;
	box-shadow: var(--shadow-soft);
	cursor: default;
	display: inline-block;
	opacity: 0;
	padding: 2.75rem 2.5rem 2.25rem;
	position: relative;
	width: 100%;
}

#header:before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	padding: 1px;
	background: linear-gradient(135deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.02));
	-webkit-mask:
		linear-gradient(#fff 0 0) content-box,
		linear-gradient(#fff 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
	pointer-events: none;
}

#header h1 {
	font-size: 4.35em;
	font-weight: 900;
	letter-spacing: -0.05em;
	line-height: 0.95em;
	text-shadow: 0 0.08em 1.2em rgba(0, 0, 0, 0.32);
}

#header p {
	color: var(--text-muted);
	font-size: 1.25em;
	margin: 0.9em auto 0;
	max-width: 32rem;
}

#header nav {
	margin: 1.9em 0 0;
}

#header nav ul {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	justify-content: center;
}

#header nav li {
	animation: nav-icons 0.55s ease forwards;
	opacity: 0;
}

#header nav li:nth-child(1) {
	animation-delay: 0.9s;
}

#header nav li:nth-child(2) {
	animation-delay: 1.05s;
}

#header nav li:nth-child(3) {
	animation-delay: 1.2s;
}

#header nav a {
	-webkit-tap-highlight-color: transparent;
	-webkit-touch-callout: none;
	align-items: center;
	background: var(--icon-fill);
	border: 1px solid rgba(255, 255, 255, 0.22);
	border-radius: 999px;
	display: inline-flex;
	height: 4.2rem;
	justify-content: center;
	width: 4.2rem;
}

#header nav a:hover {
	background: var(--icon-fill-hover);
	border-color: rgba(255, 255, 255, 0.34);
	transform: translateY(-2px);
}

#header nav a:active {
	background: var(--icon-fill-active);
	transform: translateY(0);
}

#footer {
	color: rgba(255, 255, 255, 0.62);
	cursor: default;
	font-size: 0.9rem;
	letter-spacing: 0.08em;
	margin-top: 1rem;
	text-align: center;
	text-transform: uppercase;
}

.home-link {
	margin-top: 1.5rem;
}

.home-link a {
	border-bottom-style: solid;
	font-weight: 600;
}

@media screen and (max-width: 1280px) {
	body, input, select, textarea {
		font-size: 13pt;
	}

	.animated-background__glow--one {
		width: 30rem;
		height: 30rem;
	}

	.animated-background__glow--three {
		width: 30rem;
		height: 30rem;
	}
}

@media screen and (max-width: 736px) {
	body, input, select, textarea {
		font-size: 11pt;
	}

	#main {
		padding: 1.25rem;
	}

	#header {
		padding: 2rem 1.4rem 1.75rem;
	}

	#header h1 {
		font-size: 2.9em;
	}

	#header p {
		font-size: 1.05em;
		line-height: 1.6em;
	}

	#header nav ul {
		gap: 0.75rem;
	}

	#header nav a {
		height: 3.7rem;
		width: 3.7rem;
	}

	.animated-background__grid {
		top: 52%;
		height: 60vh;
		background-size: 3.25rem 3.25rem, 3.25rem 3.25rem, 100% 100%;
		animation-duration: 18s;
	}

	.animated-background__gradient {
		animation-duration: 16s;
	}

	.animated-background__glow {
		filter: blur(60px);
	}

	.animated-background__glow--three,
	.animated-background__noise {
		display: none;
	}
}

@media screen and (max-width: 480px) {
	#header h1 {
		font-size: 2.35em;
	}

	#header p {
		max-width: 18rem;
	}

	#footer {
		font-size: 0.8rem;
	}

	.animated-background__glow--one {
		left: -20%;
	}

	.animated-background__glow--two {
		right: -22%;
	}
}

@media (prefers-reduced-motion: reduce) {
	*, *:before, *:after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}