:root {
	--md-sys-color-primary: rgb(57 96 143);
	--md-sys-color-surface-tint: rgb(57 96 143);
	--md-sys-color-on-primary: rgb(255 255 255);
	--md-sys-color-primary-container: rgb(211 228 255);
	--md-sys-color-on-primary-container: rgb(0 28 56);
	--md-sys-color-secondary: rgb(84 95 112);
	--md-sys-color-on-secondary: rgb(255 255 255);
	--md-sys-color-secondary-container: rgb(215 227 248);
	--md-sys-color-on-secondary-container: rgb(16 28 43);
	--md-sys-color-tertiary: rgb(108 86 119);
	--md-sys-color-on-tertiary: rgb(255 255 255);
	--md-sys-color-tertiary-container: rgb(244 217 255);
	--md-sys-color-on-tertiary-container: rgb(38 20 49);
	--md-sys-color-error: rgb(186 26 26);
	--md-sys-color-on-error: rgb(255 255 255);
	--md-sys-color-error-container: rgb(255 218 214);
	--md-sys-color-on-error-container: rgb(65 0 2);
	--md-sys-color-background: rgb(248 249 255);
	--md-sys-color-on-background: rgb(25 28 32);
	--md-sys-color-surface: rgb(248 249 255);
	--md-sys-color-on-surface: rgb(25 28 32);
	--md-sys-color-surface-variant: rgb(223 226 235);
	--md-sys-color-on-surface-variant: rgb(67 71 78);
	--md-sys-color-outline: rgb(115 119 127);
	--md-sys-color-outline-variant: rgb(195 198 207);
	--md-sys-color-shadow: rgb(0 0 0);
	--md-sys-color-scrim: rgb(0 0 0);
	--md-sys-color-inverse-surface: rgb(46 48 53);
	--md-sys-color-inverse-on-surface: rgb(239 240 247);
	--md-sys-color-inverse-primary: rgb(162 201 254);
	--md-sys-color-primary-fixed: rgb(211 228 255);
	--md-sys-color-on-primary-fixed: rgb(0 28 56);
	--md-sys-color-primary-fixed-dim: rgb(162 201 254);
	--md-sys-color-on-primary-fixed-variant: rgb(29 72 117);
	--md-sys-color-secondary-fixed: rgb(215 227 248);
	--md-sys-color-on-secondary-fixed: rgb(16 28 43);
	--md-sys-color-secondary-fixed-dim: rgb(187 199 219);
	--md-sys-color-on-secondary-fixed-variant: rgb(60 72 88);
	--md-sys-color-tertiary-fixed: rgb(244 217 255);
	--md-sys-color-on-tertiary-fixed: rgb(38 20 49);
	--md-sys-color-tertiary-fixed-dim: rgb(216 189 227);
	--md-sys-color-on-tertiary-fixed-variant: rgb(83 63 95);
	--md-sys-color-surface-dim: rgb(216 218 224);
	--md-sys-color-surface-bright: rgb(248 249 255);
	--md-sys-color-surface-container-lowest: rgb(255 255 255);
	--md-sys-color-surface-container-low: rgb(242 243 250);
	--md-sys-color-surface-container: rgb(236 237 244);
	--md-sys-color-surface-container-high: rgb(231 232 238);
	--md-sys-color-surface-container-highest: rgb(225 226 232);

	/* Varlet CSS Variable overrides to enable Material Design 3 Styling and Theme */
	--color-primary: var(--md-sys-color-primary);
	--color-primary-container: var(--md-sys-color-primary-container);
	--color-on-primary-container: var(--md-sys-color-on-primary-container);
	--color-secondary: var(--md-sys-color-secondary);
	--color-secondary-container: var(--md-sys-color-secondary-container);
	--color-tertiary: var(--md-sys-color-tertiary);
	--color-error: var(--md-sys-color-error);
	--color-error-container: var(--md-sys-color-error-container);
	--color-background: var(--md-sys-color-background);
	--color-surface: var(--md-sys-color-surface);
	--color-surface-container: var(--md-sys-color-surface-container);
	--color-outline: var(--md-sys-color-outline);
	--color-text: var(--md-sys-color-on-background);

	--button-border-radius: 100px;
	--button-primary-color: var(--md-sys-color-primary);
	--button-info-color: var(--md-sys-color-secondary);
	--button-default-color: var(--md-sys-color-surface-container);
	--button-default-text-color: var(--md-sys-color-on-surface);
	--button-outline-border-color: var(--md-sys-color-outline);
	--button-text-primary-color: var(--md-sys-color-primary);
	--input-primary-color: var(--md-sys-color-primary);
	--input-input-text-color: var(--md-sys-color-on-surface);
	--input-label-text-color: var(--md-sys-color-on-surface-variant);
	--input-border-radius: 4px;
}

@media (prefers-color-scheme: dark) {
	:root {
		--md-sys-color-primary: rgb(162 201 254);
		--md-sys-color-surface-tint: rgb(162 201 254);
		--md-sys-color-on-primary: rgb(0 50 91);
		--md-sys-color-primary-container: rgb(29 72 117);
		--md-sys-color-on-primary-container: rgb(211 228 255);
		--md-sys-color-secondary: rgb(187 199 219);
		--md-sys-color-on-secondary: rgb(38 49 65);
		--md-sys-color-secondary-container: rgb(60 72 88);
		--md-sys-color-on-secondary-container: rgb(215 227 248);
		--md-sys-color-tertiary: rgb(216 189 227);
		--md-sys-color-on-tertiary: rgb(60 41 71);
		--md-sys-color-tertiary-container: rgb(83 63 95);
		--md-sys-color-on-tertiary-container: rgb(244 217 255);
		--md-sys-color-error: rgb(255 180 171);
		--md-sys-color-on-error: rgb(105 0 5);
		--md-sys-color-error-container: rgb(147 0 10);
		--md-sys-color-on-error-container: rgb(255 218 214);
		--md-sys-color-background: rgb(17 20 24);
		--md-sys-color-on-background: rgb(225 226 232);
		--md-sys-color-surface: rgb(17 20 24);
		--md-sys-color-on-surface: rgb(225 226 232);
		--md-sys-color-surface-variant: rgb(67 71 78);
		--md-sys-color-on-surface-variant: rgb(195 198 207);
		--md-sys-color-outline: rgb(141 145 153);
		--md-sys-color-outline-variant: rgb(67 71 78);
		--md-sys-color-shadow: rgb(0 0 0);
		--md-sys-color-scrim: rgb(0 0 0);
		--md-sys-color-inverse-surface: rgb(225 226 232);
		--md-sys-color-inverse-on-surface: rgb(46 48 53);
		--md-sys-color-inverse-primary: rgb(57 96 143);
		--md-sys-color-primary-fixed: rgb(211 228 255);
		--md-sys-color-on-primary-fixed: rgb(0 28 56);
		--md-sys-color-primary-fixed-dim: rgb(162 201 254);
		--md-sys-color-on-primary-fixed-variant: rgb(29 72 117);
		--md-sys-color-secondary-fixed: rgb(215 227 248);
		--md-sys-color-on-secondary-fixed: rgb(16 28 43);
		--md-sys-color-secondary-fixed-dim: rgb(187 199 219);
		--md-sys-color-on-secondary-fixed-variant: rgb(60 72 88);
		--md-sys-color-tertiary-fixed: rgb(244 217 255);
		--md-sys-color-on-tertiary-fixed: rgb(38 20 49);
		--md-sys-color-tertiary-fixed-dim: rgb(216 189 227);
		--md-sys-color-on-tertiary-fixed-variant: rgb(83 63 95);
		--md-sys-color-surface-dim: rgb(17 20 24);
		--md-sys-color-surface-bright: rgb(55 57 62);
		--md-sys-color-surface-container-lowest: rgb(11 14 19);
		--md-sys-color-surface-container-low: rgb(25 28 32);
		--md-sys-color-surface-container: rgb(29 32 36);
		--md-sys-color-surface-container-high: rgb(39 42 47);
		--md-sys-color-surface-container-highest: rgb(50 53 58);
	}
}

.md-typescale-display-small,
.md-typescale-display-small-prominent {
	font: var(--md-sys-typescale-display-small-weight, var(--md-ref-typeface-weight-regular, 400)) var(--md-sys-typescale-display-small-size, 2.25rem) / var(--md-sys-typescale-display-small-line-height, 2.75rem) var(--md-sys-typescale-display-small-font, var(--md-ref-typeface-brand, Roboto));
}

.md-typescale-display-medium,
.md-typescale-display-medium-prominent {
	font: var(--md-sys-typescale-display-medium-weight, var(--md-ref-typeface-weight-regular, 400)) var(--md-sys-typescale-display-medium-size, 2.8125rem) / var(--md-sys-typescale-display-medium-line-height, 3.25rem) var(--md-sys-typescale-display-medium-font, var(--md-ref-typeface-brand, Roboto));
}

.md-typescale-display-large,
.md-typescale-display-large-prominent {
	font: var(--md-sys-typescale-display-large-weight, var(--md-ref-typeface-weight-regular, 400)) var(--md-sys-typescale-display-large-size, 3.5625rem) / var(--md-sys-typescale-display-large-line-height, 4rem) var(--md-sys-typescale-display-large-font, var(--md-ref-typeface-brand, Roboto));
}

.md-typescale-headline-small,
.md-typescale-headline-small-prominent {
	font: var(--md-sys-typescale-headline-small-weight, var(--md-ref-typeface-weight-regular, 400)) var(--md-sys-typescale-headline-small-size, 1.5rem) / var(--md-sys-typescale-headline-small-line-height, 2rem) var(--md-sys-typescale-headline-small-font, var(--md-ref-typeface-brand, Roboto));
}

.md-typescale-headline-medium,
.md-typescale-headline-medium-prominent {
	font: var(--md-sys-typescale-headline-medium-weight, var(--md-ref-typeface-weight-regular, 400)) var(--md-sys-typescale-headline-medium-size, 1.75rem) / var(--md-sys-typescale-headline-medium-line-height, 2.25rem) var(--md-sys-typescale-headline-medium-font, var(--md-ref-typeface-brand, Roboto));
}

.md-typescale-headline-large,
.md-typescale-headline-large-prominent {
	font: var(--md-sys-typescale-headline-large-weight, var(--md-ref-typeface-weight-regular, 400)) var(--md-sys-typescale-headline-large-size, 2rem) / var(--md-sys-typescale-headline-large-line-height, 2.5rem) var(--md-sys-typescale-headline-large-font, var(--md-ref-typeface-brand, Roboto));
}

.md-typescale-title-small,
.md-typescale-title-small-prominent {
	font: var(--md-sys-typescale-title-small-weight, var(--md-ref-typeface-weight-medium, 500)) var(--md-sys-typescale-title-small-size, 0.875rem) / var(--md-sys-typescale-title-small-line-height, 1.25rem) var(--md-sys-typescale-title-small-font, var(--md-ref-typeface-plain, Roboto));
}

.md-typescale-title-medium,
.md-typescale-title-medium-prominent {
	font: var(--md-sys-typescale-title-medium-weight, var(--md-ref-typeface-weight-medium, 500)) var(--md-sys-typescale-title-medium-size, 1rem) / var(--md-sys-typescale-title-medium-line-height, 1.5rem) var(--md-sys-typescale-title-medium-font, var(--md-ref-typeface-plain, Roboto));
}

.md-typescale-title-large,
.md-typescale-title-large-prominent {
	font: var(--md-sys-typescale-title-large-weight, var(--md-ref-typeface-weight-regular, 400)) var(--md-sys-typescale-title-large-size, 1.375rem) / var(--md-sys-typescale-title-large-line-height, 1.75rem) var(--md-sys-typescale-title-large-font, var(--md-ref-typeface-brand, Roboto));
}

.md-typescale-body-small,
.md-typescale-body-small-prominent {
	font: var(--md-sys-typescale-body-small-weight, var(--md-ref-typeface-weight-regular, 400)) var(--md-sys-typescale-body-small-size, 0.75rem) / var(--md-sys-typescale-body-small-line-height, 1rem) var(--md-sys-typescale-body-small-font, var(--md-ref-typeface-plain, Roboto));
}

.md-typescale-body-medium,
.md-typescale-body-medium-prominent {
	font: var(--md-sys-typescale-body-medium-weight, var(--md-ref-typeface-weight-regular, 400)) var(--md-sys-typescale-body-medium-size, 0.875rem) / var(--md-sys-typescale-body-medium-line-height, 1.25rem) var(--md-sys-typescale-body-medium-font, var(--md-ref-typeface-plain, Roboto));
}

.md-typescale-body-large,
.md-typescale-body-large-prominent {
	font: var(--md-sys-typescale-body-large-weight, var(--md-ref-typeface-weight-regular, 400)) var(--md-sys-typescale-body-large-size, 1rem) / var(--md-sys-typescale-body-large-line-height, 1.5rem) var(--md-sys-typescale-body-large-font, var(--md-ref-typeface-plain, Roboto));
}

.md-typescale-label-small,
.md-typescale-label-small-prominent {
	font: var(--md-sys-typescale-label-small-weight, var(--md-ref-typeface-weight-medium, 500)) var(--md-sys-typescale-label-small-size, 0.6875rem) / var(--md-sys-typescale-label-small-line-height, 1rem) var(--md-sys-typescale-label-small-font, var(--md-ref-typeface-plain, Roboto));
}

.md-typescale-label-medium,
.md-typescale-label-medium-prominent {
	font: var(--md-sys-typescale-label-medium-weight, var(--md-ref-typeface-weight-medium, 500)) var(--md-sys-typescale-label-medium-size, 0.75rem) / var(--md-sys-typescale-label-medium-line-height, 1rem) var(--md-sys-typescale-label-medium-font, var(--md-ref-typeface-plain, Roboto));
}

.md-typescale-label-medium-prominent {
	font-weight: var(--md-sys-typescale-label-medium-weight-prominent,
			var(--md-ref-typeface-weight-bold, 700));
}

.md-typescale-label-large,
.md-typescale-label-large-prominent {
	font: var(--md-sys-typescale-label-large-weight, var(--md-ref-typeface-weight-medium, 500)) var(--md-sys-typescale-label-large-size, 0.875rem) / var(--md-sys-typescale-label-large-line-height, 1.25rem) var(--md-sys-typescale-label-large-font, var(--md-ref-typeface-plain, Roboto));
}

.md-typescale-label-large-prominent {
	font-weight: var(--md-sys-typescale-label-large-weight-prominent,
			var(--md-ref-typeface-weight-bold, 700));
}

body {
	margin: 0;
	background-color: var(--md-sys-color-surface);
	color: var(--md-sys-color-on-surface);
	font-family: Roboto;
}

.page-enter-active,
.page-leave-active {
	transition:
		opacity 180ms ease,
		transform 220ms cubic-bezier(.2, 0, 0, 1);
}

.page-enter-from {
	opacity: 0;
	transform: translateY(10px);
}

.page-leave-to {
	opacity: 0;
	transform: translateY(-6px);
}

.auth-page {
	--auth-motion-ease: cubic-bezier(.2, 0, 0, 1);
	--auth-motion-duration: 280ms;
}

.auth-page .title {
	animation: auth-rise-in var(--auth-motion-duration) var(--auth-motion-ease) both;
}

.auth-page .title .icon {
	animation: auth-icon-in 360ms var(--auth-motion-ease) both;
}

.auth-page .auth-container,
.auth-page .form-container,
.auth-page .state {
	animation: auth-rise-in 320ms var(--auth-motion-ease) 70ms both;
}

.auth-page .form > *,
.auth-page .provider-buttons > *,
.auth-page .auth-links > *,
.auth-page .divider {
	animation: auth-item-in 280ms var(--auth-motion-ease) both;
}

.auth-page .form > :nth-child(1),
.auth-page .provider-buttons > :nth-child(1),
.auth-page .auth-links > :nth-child(1) {
	animation-delay: 90ms;
}

.auth-page .form > :nth-child(2),
.auth-page .provider-buttons > :nth-child(2),
.auth-page .auth-links > :nth-child(2),
.auth-page .divider {
	animation-delay: 130ms;
}

.auth-page .form > :nth-child(3),
.auth-page .auth-links > :nth-child(3) {
	animation-delay: 170ms;
}

.auth-page .form > :nth-child(4),
.auth-page .auth-links > :nth-child(4) {
	animation-delay: 210ms;
}

.auth-page .error,
.auth-page .success {
	animation: auth-message-in 240ms var(--auth-motion-ease) both;
	transform-origin: top center;
}

.auth-page a,
.auth-page button,
.auth-page .var-button {
	transition:
		color 160ms ease,
		background-color 160ms ease,
		border-color 160ms ease,
		box-shadow 180ms ease,
		opacity 160ms ease,
		transform 180ms var(--auth-motion-ease);
}

.auth-page button:hover,
.auth-page .var-button:hover,
.auth-page .provider-button:hover {
	transform: translateY(-1px);
	box-shadow: 0 3px 10px rgba(0, 0, 0, .12);
}

.auth-page button:active,
.auth-page .var-button:active,
.auth-page .provider-button:active {
	transform: translateY(0);
	box-shadow: 0 1px 4px rgba(0, 0, 0, .10);
}

.auth-page .divider span {
	transform-origin: center;
	animation: auth-divider-in 280ms var(--auth-motion-ease) 140ms both;
}

@keyframes auth-rise-in {
	from {
		opacity: 0;
		transform: translateY(14px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes auth-item-in {
	from {
		opacity: 0;
		transform: translateY(8px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes auth-icon-in {
	from {
		opacity: 0;
		transform: scale(.88) translateY(4px);
	}
	to {
		opacity: 1;
		transform: scale(1) translateY(0);
	}
}

@keyframes auth-message-in {
	from {
		opacity: 0;
		transform: translateY(-6px) scale(.98);
	}
	to {
		opacity: 1;
		transform: translateY(0) scale(1);
	}
}

@keyframes auth-divider-in {
	from {
		opacity: 0;
		transform: scaleX(.2);
	}
	to {
		opacity: 1;
		transform: scaleX(1);
	}
}

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

	.page-enter-from,
	.page-leave-to,
	.auth-page button:hover,
	.auth-page .var-button:hover,
	.auth-page .provider-button:hover,
	.auth-page button:active,
	.auth-page .var-button:active,
	.auth-page .provider-button:active {
		transform: none;
	}
}

h1,
h2,
h3,
h4,
h5,
h6,
p {
	margin: 0;
}