@font-face {
	font-family: Roboto;
	font-style: normal;
	font-weight: 400;
	font-stretch: 100%;
	font-display: swap;
	src: url("../fonts/roboto-latin-400.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
	color-scheme: only dark;
	--tryagain-canvas: #030604;
	--tryagain-canvas-soft: rgb(3 6 4 / 0.78);
	--tryagain-ink: #f5fff8;
	--tryagain-muted: #b4c3b9;
	--tryagain-accent: #58f29a;
	--tryagain-accent-soft: rgb(88 242 154 / 0.13);
	--tryagain-accent-glow: rgb(88 242 154 / 0.2);
	--tryagain-aurora-green: rgb(65 255 155 / 0.78);
	--tryagain-aurora-cyan: rgb(47 220 255 / 0.62);
	--tryagain-aurora-pink: rgb(255 84 184 / 0.68);
	--tryagain-aurora-violet: rgb(210 91 255 / 0.55);
	--tryagain-aurora-white: rgb(255 255 255 / 0.72);
	--tryagain-aurora-blend-mode: screen;
	--tryagain-aurora-curtain-opacity: 0.72;
	--tryagain-star-speck: rgb(245 255 248 / 0.14);
	--tryagain-forest-horizon-green: rgb(65 255 155 / 0.14);
	--tryagain-forest-horizon-pink: rgb(255 84 184 / 0.12);
	--tryagain-wordmark-outline: #010302;
}

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

html {
	min-block-size: 100%;
	background: var(--tryagain-canvas);
}

body {
	min-block-size: 100svh;
	margin: 0;
	color: var(--tryagain-ink);
	background: var(--tryagain-canvas);
	font-family: Roboto, Arial, system-ui, sans-serif;
	font-size-adjust: from-font;
	font-synthesis: none;
	text-rendering: optimizeLegibility;
}

button,
a {
	font: inherit;
}

::selection {
	color: var(--tryagain-canvas);
	background: var(--tryagain-accent);
}

.page-shell {
	--tryagain-forest-height: clamp(8rem, 22svh, 13.75rem);
	position: relative;
	display: grid;
	grid-template-rows: minmax(min-content, 1fr) auto;
	min-block-size: 100svh;
	overflow-x: hidden;
	overflow-x: clip;
	isolation: isolate;
}

.page-shell::after {
	position: absolute;
	z-index: 2;
	inset-inline: 0;
	inset-block-end: 0;
	block-size: var(--tryagain-forest-height);
	content: "";
	pointer-events: none;
	background-image:
		radial-gradient(ellipse at 28% 100%, var(--tryagain-forest-horizon-green), transparent 62%),
		radial-gradient(ellipse at 76% 100%, var(--tryagain-forest-horizon-pink), transparent 58%);
	background-position: center bottom, center bottom;
	background-repeat: no-repeat, no-repeat;
	background-size: 100% 88%, 100% 88%;
}

.forest-layer {
	position: absolute;
	z-index: 3;
	inset-inline: 0;
	inset-block-end: 0;
	block-size: var(--tryagain-forest-height);
	overflow: hidden;
	pointer-events: none;
}

.forest-svg {
	display: block;
	inline-size: 100%;
	block-size: 100%;
}

.forest-depth-distant {
	fill: #0b3327;
	opacity: 0.82;
}

.forest-depth-foreground,
.forest-ground,
.forest-ground-arc {
	fill: #010302;
}

.forest-ground-arc {
	display: none;
}

.forest-tree {
	--tryagain-tree-wind-from: -0.9deg;
	--tryagain-tree-wind-rest: 0.12deg;
	--tryagain-tree-wind-to: 1.5deg;
	transform-box: fill-box;
	transform-origin: center bottom;
	rotate: 0deg;
	animation: forest-tree-wind 7.2s ease-in-out -1.4s infinite;
}

.forest-depth-distant .forest-tree {
	--tryagain-tree-wind-from: -0.5deg;
	--tryagain-tree-wind-rest: 0.08deg;
	--tryagain-tree-wind-to: 0.85deg;
}

html[data-motion="paused"] .forest-tree {
	animation-play-state: paused;
}

.forest-depth > g:nth-of-type(7n + 1) .forest-tree {
	animation-duration: 6.1s;
	animation-delay: -1.3s;
}

.forest-depth > g:nth-of-type(7n + 2) .forest-tree {
	animation-duration: 8.1s;
	animation-delay: -5.7s;
}

.forest-depth > g:nth-of-type(7n + 3) .forest-tree {
	animation-duration: 7s;
	animation-delay: -3.4s;
}

.forest-depth > g:nth-of-type(7n + 4) .forest-tree {
	animation-duration: 9s;
	animation-delay: -8.2s;
}

.forest-depth > g:nth-of-type(7n + 5) .forest-tree {
	animation-duration: 6.5s;
	animation-delay: -6.8s;
}

.forest-depth > g:nth-of-type(7n + 6) .forest-tree {
	animation-duration: 8.6s;
	animation-delay: -2.6s;
}

.forest-depth > g:nth-of-type(7n) .forest-tree {
	animation-duration: 7.5s;
	animation-delay: -7.1s;
}

.forest-depth-foreground > g:nth-of-type(5n + 3) .forest-tree {
	--tryagain-tree-wind-from: -1.25deg;
	--tryagain-tree-wind-to: 2deg;
}

.skip-link {
	position: fixed;
	z-index: 20;
	inset-block-start: 0.75rem;
	inset-inline-start: 0.75rem;
	padding: 0.7rem 1rem;
	color: var(--tryagain-canvas);
	background: var(--tryagain-ink);
	border-radius: 999px;
	transform: translateY(calc(-100% - 1rem));
	transition: transform 160ms ease-out;
}

.skip-link:focus-visible {
	transform: translateY(0);
}

.motion-toggle {
	color: var(--tryagain-muted);
	cursor: pointer;
	font-size: 0.95rem;
	line-height: 1.5;
	text-decoration-color: var(--tryagain-accent);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.3em;
	white-space: nowrap;
	transition: color 160ms ease-out, text-decoration-thickness 160ms ease-out;
}

.motion-toggle:hover {
	color: var(--tryagain-ink);
	text-decoration-thickness: 2px;
}

.site-main {
	position: relative;
	display: grid;
	place-items: center;
	min-block-size: 0;
	padding: clamp(2rem, 7vw, 7rem) clamp(1.25rem, 5vw, 5rem);
	overflow: hidden;
	overflow: clip;
	isolation: isolate;
}

.site-main::before {
	position: absolute;
	z-index: 1;
	inset: 8%;
	content: "";
	pointer-events: none;
	background: radial-gradient(ellipse at center, var(--tryagain-canvas) 0 12%, var(--tryagain-canvas-soft) 30%, transparent 68%);
}

.aurora-field {
	position: absolute;
	z-index: 0;
	inset: -18vmax;
	overflow: hidden;
	isolation: isolate;
	pointer-events: none;
}

.aurora-field::before {
	position: absolute;
	inset-block-start: 6%;
	inset-inline: -8%;
	block-size: 58%;
	content: "";
	background: repeating-linear-gradient(
		100deg,
		transparent 0 3.5rem,
		var(--tryagain-aurora-green) 5rem 7.5rem,
		transparent 9rem 13rem,
		var(--tryagain-aurora-cyan) 14.5rem 16.5rem,
		transparent 18rem 23rem,
		var(--tryagain-aurora-pink) 24rem 25.5rem,
		transparent 27rem 31rem
	);
	filter: blur(1.25rem) saturate(145%);
	mix-blend-mode: var(--tryagain-aurora-blend-mode);
	mask-image: linear-gradient(to bottom, black 0, black 34%, transparent 94%);
	opacity: var(--tryagain-aurora-curtain-opacity);
	transform: skewX(-8deg) scaleX(1.08);
	will-change: transform;
	animation: aurora-curtain 21s ease-in-out infinite alternate;
}

.aurora-field::after {
	position: absolute;
	inset: 0;
	content: "";
	background:
		radial-gradient(ellipse at 22% 28%, var(--tryagain-aurora-green), transparent 24%),
		radial-gradient(ellipse at 76% 28%, var(--tryagain-aurora-pink), transparent 30%),
		radial-gradient(ellipse at 82% 70%, var(--tryagain-aurora-violet), transparent 22%);
	mix-blend-mode: var(--tryagain-aurora-blend-mode);
	opacity: 0.3;
}

.aurora-stars {
	position: absolute;
	inset: 0;
	background-image:
		radial-gradient(circle, var(--tryagain-star-speck) 0 1px, transparent 1.4px),
		radial-gradient(circle, var(--tryagain-aurora-green) 0 1px, transparent 1.5px),
		radial-gradient(circle, var(--tryagain-aurora-pink) 0 1px, transparent 1.5px);
	background-position: 0 0, 2.1rem 1.3rem, 1rem 3.4rem;
	background-size: 5.5rem 5.5rem, 7.75rem 7.75rem, 9.25rem 9.25rem;
	mask-image: radial-gradient(ellipse at center, black 10%, transparent 72%);
	opacity: 0.62;
}

.aurora-glow {
	position: absolute;
	inset-block-start: 42%;
	inset-inline-start: 50%;
	inline-size: min(72rem, 86vw);
	block-size: min(34rem, 58vh);
	background: radial-gradient(ellipse at center, var(--tryagain-aurora-green) 0, var(--tryagain-aurora-cyan) 24%, transparent 68%);
	border-radius: 50%;
	filter: blur(1.5rem) saturate(125%);
	mix-blend-mode: var(--tryagain-aurora-blend-mode);
	opacity: 0.24;
	transform: translate(-50%, -50%);
	animation: aurora-breathe 9s ease-in-out infinite alternate;
}

.aurora-ribbon {
	--tryagain-aurora-angle: -8deg;
	--tryagain-aurora-skew: -9deg;
	position: absolute;
	inset-inline-start: -12%;
	inline-size: 124%;
	block-size: 54%;
	background:
		repeating-linear-gradient(
			102deg,
			transparent 0 7%,
			var(--tryagain-aurora-green) 10% 16%,
			transparent 20% 27%,
			var(--tryagain-aurora-cyan) 31% 38%,
			transparent 43% 51%,
			var(--tryagain-aurora-green) 57% 65%,
			transparent 70% 78%,
			var(--tryagain-aurora-pink) 84% 90%,
			transparent 95%
		),
		linear-gradient(180deg, transparent 4%, var(--tryagain-aurora-green) 48%, transparent 96%);
	background-blend-mode: var(--tryagain-aurora-blend-mode), normal;
	border-radius: 48% 52% 46% 54%;
	filter: blur(clamp(1.25rem, 2.5vw, 2.5rem)) saturate(150%);
	mix-blend-mode: var(--tryagain-aurora-blend-mode);
	mask-image: radial-gradient(ellipse 76% 62% at center, black 22%, transparent 78%);
	transform-origin: center;
	will-change: transform;
	animation: aurora-drift 18s ease-in-out infinite alternate;
}

.aurora-ribbon-one {
	inset-block-start: 0;
	opacity: 0.72;
}

.aurora-ribbon-two {
	--tryagain-aurora-angle: 7deg;
	--tryagain-aurora-skew: 8deg;
	inset-block-start: 24%;
	block-size: 46%;
	background:
		repeating-linear-gradient(
			82deg,
			transparent 0 9%,
			var(--tryagain-aurora-pink) 13% 21%,
			transparent 26% 34%,
			var(--tryagain-aurora-green) 39% 47%,
			transparent 52% 61%,
			var(--tryagain-aurora-violet) 66% 74%,
			transparent 81% 100%
		),
		linear-gradient(180deg, transparent 3%, var(--tryagain-aurora-pink) 42%, var(--tryagain-aurora-violet) 64%, transparent 97%);
	opacity: 0.62;
	animation-duration: 24s;
	animation-direction: alternate-reverse;
}

.aurora-ribbon-three {
	--tryagain-aurora-angle: -2deg;
	--tryagain-aurora-skew: -4deg;
	inset-block-start: 8%;
	block-size: 68%;
	background:
		repeating-linear-gradient(110deg, transparent 0 12%, var(--tryagain-aurora-white) 16% 19%, transparent 24% 40%, var(--tryagain-aurora-cyan) 44% 50%, transparent 56% 72%, var(--tryagain-aurora-green) 77% 82%, transparent 88%),
		linear-gradient(180deg, transparent 8%, var(--tryagain-aurora-cyan) 48%, transparent 92%);
	opacity: 0.38;
	animation-duration: 29s;
}

.hero {
	position: relative;
	z-index: 2;
	text-align: center;
	animation: hero-arrival 700ms cubic-bezier(0.2, 0.75, 0.25, 1);
}

.hero-wordmark {
	margin: 0;
	font-size: clamp(2.7rem, 13.5vw, 11.5rem);
	font-weight: 400;
	line-height: 0.9;
	letter-spacing: -0.045em;
	white-space: nowrap;
	-webkit-text-stroke-color: var(--tryagain-wordmark-outline);
	-webkit-text-stroke-width: clamp(1px, 0.13vw, 2px);
	paint-order: stroke fill;
	text-shadow: 0 0.08em 0.5em var(--tryagain-accent-glow);
}

.wordmark-domain {
	color: var(--tryagain-accent);
}

.hero-caption {
	max-inline-size: 34rem;
	margin: clamp(1rem, 3vw, 1.75rem) auto 0;
	color: var(--tryagain-muted);
	font-size: clamp(1rem, 2.1vw, 1.4rem);
	line-height: 1.45;
	letter-spacing: 0.025em;
	text-wrap: balance;
}

.site-footer {
	position: relative;
	z-index: 5;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 0 max(1.25rem, env(safe-area-inset-right)) max(1.25rem, env(safe-area-inset-bottom)) max(1.25rem, env(safe-area-inset-left));
}

.site-footer-link {
	color: var(--tryagain-muted);
	font-size: 0.95rem;
	line-height: 1.5;
	text-decoration-color: var(--tryagain-accent);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.3em;
	transition: color 160ms ease-out, text-decoration-thickness 160ms ease-out;
}

.site-footer-link:hover {
	color: var(--tryagain-ink);
	text-decoration-thickness: 2px;
}

:where(a, button):focus-visible {
	outline: 3px solid var(--tryagain-accent);
	outline-offset: 4px;
}

html[data-motion="paused"] .aurora-ribbon,
html[data-motion="paused"] .aurora-field::before,
html[data-motion="paused"] .aurora-glow {
	animation-play-state: paused;
}

@keyframes forest-tree-wind {
	0%,
	100% {
		rotate: var(--tryagain-tree-wind-from);
	}

	31% {
		rotate: var(--tryagain-tree-wind-rest);
	}

	48% {
		rotate: 0deg;
	}

	72% {
		rotate: var(--tryagain-tree-wind-to);
	}

	87% {
		rotate: var(--tryagain-tree-wind-rest);
	}
}

@keyframes aurora-drift {
	0% {
		transform: translate3d(-5%, -3%, 0) rotate(var(--tryagain-aurora-angle)) skewX(var(--tryagain-aurora-skew)) scaleY(0.92);
	}

	50% {
		transform: translate3d(1%, 3%, 0) rotate(calc(var(--tryagain-aurora-angle) + 2deg)) skewX(calc(var(--tryagain-aurora-skew) - 2deg)) scaleY(1.06);
	}

	100% {
		transform: translate3d(5%, -1%, 0) rotate(calc(var(--tryagain-aurora-angle) - 1deg)) skewX(calc(var(--tryagain-aurora-skew) + 3deg)) scaleY(0.96);
	}
}

@keyframes aurora-curtain {
	from {
		transform: translate3d(-4%, -2%, 0) skewX(-8deg) scaleX(1.08);
	}

	to {
		transform: translate3d(5%, 3%, 0) skewX(7deg) scaleX(0.96);
	}
}

@keyframes hero-arrival {
	from {
		opacity: 0;
		transform: translateY(1rem);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes aurora-breathe {
	from {
		opacity: 0.16;
	}

	to {
		opacity: 0.32;
	}
}

@media (prefers-contrast: more) {
	:root {
		--tryagain-muted: var(--tryagain-ink);
	}

	.aurora-field {
		opacity: 0.52;
	}

	.forest-layer,
	.page-shell::after {
		opacity: 0.72;
	}
}

@media (prefers-reduced-motion: reduce) {
	.skip-link,
	.motion-toggle,
	.site-footer-link {
		transition: none;
	}

	.motion-toggle {
		display: none;
	}

	.aurora-ribbon,
	.aurora-field::before,
	.aurora-glow,
	.hero {
		animation: none;
	}

	.forest-tree {
		animation: none;
		rotate: 0deg;
	}
}

@media (forced-colors: active) {
	.aurora-field,
	.forest-layer,
	.page-shell::after,
	.site-main::before {
		display: none;
	}

	.hero-wordmark {
		-webkit-text-stroke-width: 0;
		paint-order: normal;
		text-shadow: none;
	}

	.wordmark-domain,
	.site-footer-link {
		color: LinkText;
	}

	.motion-toggle {
		color: LinkText;
	}
}

@supports not (mix-blend-mode: screen) {
	.aurora-ribbon {
		opacity: 0.42;
	}
}

@supports not (-webkit-text-stroke: 1px black) {
	.hero-wordmark {
		text-shadow:
			-1px -1px 0 var(--tryagain-wordmark-outline),
			1px -1px 0 var(--tryagain-wordmark-outline),
			-1px 1px 0 var(--tryagain-wordmark-outline),
			1px 1px 0 var(--tryagain-wordmark-outline),
			0 0.08em 0.5em var(--tryagain-accent-glow);
	}
}

@media (max-height: 36rem) {
	.page-shell {
		--tryagain-forest-height: clamp(5.5rem, 20svh, 8rem);
	}
}

@media (max-width: 35rem) {
	.site-main {
		padding-inline: 1rem;
	}

	.site-main::before {
		inset: auto;
		inset-block-start: 50%;
		inset-inline-start: 50%;
		inline-size: 180%;
		block-size: auto;
		aspect-ratio: 2 / 1;
		transform: translate(-50%, -50%);
	}

	.hero-wordmark {
		letter-spacing: -0.04em;
		-webkit-text-stroke-width: 0.65px;
	}

	.forest-ground {
		display: none;
	}

	.forest-ground-arc {
		position: absolute;
		inset-inline: 0;
		inset-block-end: -1px;
		display: block;
		inline-size: 100%;
		block-size: clamp(1.75rem, 8vw, 2.25rem);
	}

	.site-footer {
		gap: 0.75rem;
		padding-block-end: max(1rem, env(safe-area-inset-bottom));
	}

	.site-footer-link,
	.motion-toggle {
		font-size: 0.85rem;
	}
}