/*
 * Media queries: @media does not accept variables, so each one is repeated verbatim.
 *   48rem  wide layout: documentation contents beside the page
 *   prefers-color-scheme: dark  white logo in the header and the footer
 *   prefers-reduced-motion: reduce  no transition
 */

:root {
	color-scheme: light dark;

	--color-tailwind-0: #ffffff;
	--color-tailwind-50: #e6ffff;
	--color-tailwind-100: #b8ffff;
	--color-tailwind-200: #8affff;
	--color-tailwind-300: #5cffff;
	--color-tailwind-400: #2effff;
	--color-tailwind-500: #00ffff;
	--color-tailwind-600: #00d1d1;
	--color-tailwind-700: #00a3a3;
	--color-tailwind-800: #007575;
	--color-tailwind-900: #004747;
	--color-tailwind-950: #001a1a;
	--color-tailwind-1000: #000000;

	--color-harmonies-red: #d10000;
	--color-harmonies-orange: #d16900;
	--color-harmonies-yellow: #d1d100;
	--color-harmonies-lime: #69d100;
	--color-harmonies-green: #00d169;
	--color-harmonies-cyan: #00d1d1;
	--color-harmonies-azure: #0069d1;
	--color-harmonies-blue: #0000d1;
	--color-harmonies-violet: #6900d1;
	--color-harmonies-magenta: #d100d1;
	--color-harmonies-rose: #d10069;

	--color-shadows-50: #007575;
	--color-shadows-100: #096a6a;
	--color-shadows-200: #0f5f5f;
	--color-shadows-300: #125454;
	--color-shadows-400: #134a4a;
	--color-shadows-500: #14403f;
	--color-shadows-600: #133635;
	--color-shadows-700: #122c2c;
	--color-shadows-800: #112322;
	--color-shadows-900: #0e1a19;
	--color-shadows-950: #07100f;

	--color-tints-50: #ebf2f2;
	--color-tints-100: #d6e5e4;
	--color-tints-200: #c2d8d7;
	--color-tints-300: #aecbcb;
	--color-tints-400: #9abfbe;
	--color-tints-500: #86b2b1;
	--color-tints-600: #71a6a5;
	--color-tints-700: #5d9999;
	--color-tints-800: #478d8d;
	--color-tints-900: #2d8181;
	--color-tints-950: #007575;

	--color-tones-50: #007575;
	--color-tones-100: #217676;
	--color-tones-200: #327877;
	--color-tones-300: #3f7978;
	--color-tones-400: #4a7a79;
	--color-tones-500: #547b7a;
	--color-tones-600: #5e7c7c;
	--color-tones-700: #677d7d;
	--color-tones-800: #6f7e7e;
	--color-tones-900: #787f7f;
	--color-tones-950: #808080;

	--color-texts-50: #f2f2f2;
	--color-texts-100: #dadada;
	--color-texts-200: #c2c2c2;
	--color-texts-300: #aaaaaa;
	--color-texts-400: #919191;
	--color-texts-500: #797979;
	--color-texts-600: #616161;
	--color-texts-700: #494949;
	--color-texts-800: #303030;
	--color-texts-900: #181818;
	--color-texts-950: #000000;

	--font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
	--font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
	--font-weight-light: 300;
	--font-weight-regular: 400;
	--font-weight-medium: 500;
	--font-weight-semibold: 600;
	--font-size-small: 0.875rem;
	--font-size-body: 1rem;
	--font-size-heading-3: 1.125rem;
	--font-size-heading-2: 1.375rem;
	--font-size-heading-1: 2rem;
	--font-size-title: 2.5rem;
	--font-size-code: 0.875em;
	--line-height-body: 1.6;
	--line-height-heading: 1.25;
	--letter-spacing-heading: -0.02em;

	--space-1: 0.25rem;
	--space-2: 0.5rem;
	--space-3: 0.75rem;
	--space-4: 1rem;
	--space-6: 1.5rem;
	--space-8: 2rem;
	--space-12: 3rem;

	--width-page: 72rem;
	--width-prose: 44rem;
	--width-toc: 13rem;
	--width-entry: 22rem;
	--width-card: 25rem;
	--target-size: 2.75rem;
	--target-size-compact: 2rem;

	--border-width: 1px;
	--focus-width: 2px;
	--focus-offset: 2px;
	--underline-offset: 0.2em;
	--duration: 0.2s;
	--radius-inline: 0.25rem;

	--page-margin: 30px;
	--content-inset: 20px;
	--header-content: 1250px;
	--header-height: 75px;
	--logo-height: 20px;
	--logo-nudge: 20px;
	--sign-in-nudge: -20px;
	--sign-in-trim: 12px;
	--sign-in-size: calc(var(--font-size-body) - 2px);
	--mark-height: 40px;
	--mark-nudge: -5px;
	--footer-menu-above: 35px;
	--footer-menu-below: 30px;
	--globe-size: calc(var(--font-size-body) / 0.875);
	--globe-gap: 0.4em;
	--lang-drop: 5px;

	--button-height: calc(var(--target-size) + 8px);
	--button-padding: 30px;
	--button-radius: 5px;
	--button-gap: 10px;
	--icon-size: 0.8125em;
	--icon-gap: 0.267578125em;
	--icon-shift: -4px;
	--icon-lift: -1px;
	--arrow-gap: 0.25rem;
	--arrow-size: 0.75em;
	--glyph-top: 286;
	--glyph-left: 230;
	--glyph-width: 408;
	--glyph-height: 369;
	--chevron-width: 0.375em;
	--chevron-tip: 0.3046875em;
	--shaft-width: 0.428571em;

	--strength-height: 4px;
	--strength-radius: 2px;
	--strength-icon: 1.125em;
	--strength-line: 1lh;

	--backdrop-blur: 5px;
	--veil-opacity: 0.25;
	--width-register: calc(var(--width-card) * 5 / 4);
	--input-outline: 3px;
	--check-size: 1.5rem;
	--check-mark: 1rem;
	--eye-icon: 1.25rem;
}

@font-face {
	font-family: "Inter";
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url("/fonts/inter-latin-wght-normal.woff2") format("woff2");
}

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

html {
	text-size-adjust: 100%;
}

body {
	display: flex;
	flex-direction: column;
	min-height: 100dvh;
	margin: 0;
	background: light-dark(var(--color-tailwind-0), var(--color-tailwind-1000));
	color: light-dark(var(--color-tailwind-950), var(--color-tailwind-50));
	font-family: var(--font-sans);
	font-size: var(--font-size-body);
	font-weight: var(--font-weight-regular);
	line-height: var(--line-height-body);
}

a,
button,
input,
textarea,
select {
	transition:
		background-color var(--duration),
		color var(--duration),
		border-color var(--duration);
}

a {
	color: inherit;
	text-decoration-thickness: var(--border-width);
	text-underline-offset: var(--underline-offset);
}

:focus-visible {
	outline: var(--focus-width) solid
		light-dark(var(--color-tailwind-800), var(--color-tailwind-600));
	outline-offset: var(--focus-offset);
}

@media (prefers-reduced-motion: reduce) {
	a,
	button,
	input,
	textarea,
	select {
		transition: none;
	}
}

.fold {
	display: flex;
	flex-direction: column;
	height: 100dvh;
}

.sheet {
	display: flex;
	flex-direction: column;
	width: min(100% - 2 * var(--page-margin), var(--header-content));
	margin-inline: auto;
	border-inline: var(--border-width) solid
		light-dark(var(--color-tints-100), var(--color-tailwind-950));
}

.fold .sheet {
	flex: 1;
	min-height: 0;
}

.entry {
	display: grid;
	flex: 1;
	min-height: 0;
	place-items: center;
	padding: var(--space-8) var(--content-inset);
}

.entry-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--button-gap);
}

.entry-inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-3);
	width: 100%;
	max-width: var(--width-entry);
}

.entry-title {
	margin: 0 0 var(--space-6);
	font-size: var(--font-size-title);
	font-weight: var(--font-weight-semibold);
	letter-spacing: var(--letter-spacing-heading);
	line-height: var(--line-height-heading);
	text-align: center;
}

.footer-menu {
	padding-block: var(--footer-menu-above) var(--footer-menu-below);
	padding-inline: var(--content-inset);
	border-top: var(--border-width) solid
		light-dark(var(--color-tints-100), var(--color-tailwind-950));
	font-size: var(--font-size-small);
	text-align: center;
}

.footer-doc {
	color: light-dark(var(--color-texts-600), var(--color-texts-400));
	text-decoration: none;
}

.footer-doc:hover {
	color: light-dark(var(--color-texts-950), var(--color-texts-50));
}

.footer-meta {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
	padding-top: calc(var(--content-inset) * 2);
	padding-bottom: var(--page-margin);
	padding-inline: var(--content-inset);
	border-top: var(--border-width) dashed
		light-dark(var(--color-tints-100), var(--color-tailwind-950));
	font-size: var(--font-size-small);
}

.footer-main {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.footer-text {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
}

.footer-lang {
	display: inline-flex;
	align-items: center;
	gap: var(--globe-gap);
	color: var(--color-tailwind-800);
	font-size: var(--font-size-small);
	font-weight: var(--font-weight-semibold);
	text-decoration: none;
	transform: translateY(var(--lang-drop));
}

.footer-globe {
	width: var(--globe-size);
	height: var(--globe-size);
}

.footer-mark {
	--glyph-top: 345;
	--glyph-left: 430;
	--glyph-width: 408;
	--glyph-height: 606;
	display: block;
	overflow: hidden;
	flex-shrink: 0;
	height: var(--mark-height);
	width: calc(var(--mark-height) * var(--glyph-width) / var(--glyph-height));
	position: absolute;
	top: 50%;
	inset-inline-end: var(--content-inset);
	transform: translate(var(--mark-nudge), -50%);
	text-decoration: none;
}

.footer-mark img {
	display: block;
	max-width: none;
	height: auto;
	width: calc(var(--mark-height) * 1254 / var(--glyph-height));
	margin-top: calc(
		var(--mark-height) *
		var(--glyph-top) /
		var(--glyph-height) *
		-1
	);
	margin-inline-start: calc(
		var(--mark-height) *
		var(--glyph-left) /
		var(--glyph-height) *
		-1
	);
}

.footer-mark .footer-mark-dark {
	display: none;
}

@media (prefers-color-scheme: dark) {
	.footer-mark {
		--glyph-top: 307;
		--glyph-left: 391;
		--glyph-width: 522;
		--glyph-height: 743;
	}

	.footer-mark .footer-mark-light {
		display: none;
	}

	.footer-mark .footer-mark-dark {
		display: block;
	}
}

.footer-legal {
	margin: 0;
	color: light-dark(var(--color-texts-950), var(--color-tailwind-0));
	font-size: var(--font-size-small);
	font-weight: var(--font-weight-light);
}

.docs {
	display: grid;
	gap: var(--space-6);
	max-width: var(--width-page);
	margin-inline: auto;
	padding: var(--space-6) var(--space-4) var(--space-12);
}

@media (width >= 48rem) {
	.docs {
		grid-template-columns: var(--width-toc) minmax(0, 1fr);
		gap: var(--space-12);
		padding-top: var(--space-8);
	}
}

.button {
	display: flex;
	align-items: center;
	justify-content: center;
	width: fit-content;
	align-self: center;
	gap: var(--icon-gap);
	min-height: var(--button-height);
	padding-inline: var(--button-padding);
	border: var(--border-width) solid transparent;
	border-radius: var(--button-radius);
	font: inherit;
	font-weight: var(--font-weight-medium);
	white-space: nowrap;
	text-decoration: none;
}

.button-1 {
	background: var(--color-tailwind-800);
	color: var(--color-tailwind-0);
}

.button-1:hover {
	background: light-dark(var(--color-shadows-100), var(--color-tones-100));
}

.button-2 {
	background: light-dark(
		color-mix(in srgb, var(--color-tailwind-0) 25%, transparent),
		color-mix(in srgb, var(--color-tailwind-1000) 25%, transparent)
	);
	color: light-dark(var(--color-shadows-100), var(--color-tailwind-0));
	border-color: light-dark(
		color-mix(in srgb, var(--color-shadows-100) 50%, transparent),
		color-mix(in srgb, var(--color-tailwind-0) 25%, transparent)
	);
}

.header .button-2 {
	min-height: calc(var(--button-height) - var(--sign-in-trim));
	font-size: var(--sign-in-size);
	transform: translateX(var(--sign-in-nudge));
}

.button-2:hover {
	border-color: light-dark(
		var(--color-shadows-100),
		color-mix(in srgb, var(--color-tailwind-0) 50%, transparent)
	);
}

.button-3:hover {
	background: light-dark(var(--color-tailwind-100), var(--color-tailwind-900));
}

.button-icon {
	flex-shrink: 0;
	width: var(--icon-size);
	height: var(--icon-size);
	transform: translate(var(--icon-shift), var(--icon-lift));
}

.button-arrow {
	position: relative;
	display: flex;
	align-items: center;
	width: var(--chevron-width);
	height: var(--arrow-size);
	margin-inline-start: var(--arrow-gap);
}

.button-chevron {
	width: var(--chevron-width);
	height: var(--arrow-size);
	transition: transform var(--duration);
}

.button-shaft {
	position: absolute;
	inset-inline-start: 0;
	top: 0;
	width: 0;
	height: var(--arrow-size);
	overflow: hidden;
	transition: width var(--duration);
}

.button-shaft svg,
.button-chevron {
	display: block;
}

.button-shaft svg {
	width: calc(var(--shaft-width) + var(--chevron-tip));
	height: var(--arrow-size);
}

.button-1:hover .button-chevron {
	transform: translateX(var(--shaft-width));
}

.button-1:hover .button-shaft {
	width: calc(var(--shaft-width) + var(--chevron-tip));
}

@media (prefers-reduced-motion: reduce) {
	.button-chevron,
	.button-shaft {
		transition: none;
	}
}

.header {
	display: flex;
	box-sizing: border-box;
	min-height: var(--header-height);
	border-bottom: var(--border-width) solid
		light-dark(var(--color-tints-100), var(--color-tailwind-950));
}

.header-bar {
	display: flex;
	flex: 1;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-4);
	width: 100%;
	max-width: calc(var(--header-content) + 2 * var(--page-margin));
	margin-inline: auto;
	padding-inline: var(--page-margin);
}

.header-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-4);
	max-width: var(--width-page);
	min-height: var(--header-height);
	margin-inline: auto;
	padding-inline: var(--space-4);
}

.brand {
	font-weight: var(--font-weight-semibold);
	letter-spacing: var(--letter-spacing-heading);
	text-decoration: none;
}

.brand:has(.brand-logo) {
	display: block;
	overflow: hidden;
	height: var(--logo-height);
	width: calc(var(--logo-height) * 1212 / 369);
	transform: translateX(var(--logo-nudge));
}

.brand-logo {
	display: block;
	max-width: none;
	height: auto;
	width: calc(var(--logo-height) * 1672 / var(--glyph-height));
	margin-top: calc(
		var(--logo-height) *
		var(--glyph-top) /
		var(--glyph-height) *
		-1
	);
	margin-inline-start: calc(
		var(--logo-height) *
		var(--glyph-left) /
		var(--glyph-height) *
		-1
	);
}

.brand-logo-light {
	--glyph-top: 286;
	--glyph-left: 230;
	--glyph-height: 369;
}

.brand-logo-dark {
	--glyph-top: 303;
	--glyph-left: 262;
	--glyph-height: 353;
	display: none;
}

@media (prefers-color-scheme: dark) {
	.brand-logo-light {
		display: none;
	}

	.brand-logo-dark {
		display: block;
	}
}

.brand-suffix {
	color: light-dark(var(--color-texts-600), var(--color-texts-400));
	font-weight: var(--font-weight-regular);
}

.header-nav {
	display: flex;
	gap: var(--space-4);
	font-size: var(--font-size-small);
}

.header-nav a {
	display: inline-flex;
	align-items: center;
	min-height: var(--target-size);
	color: light-dark(var(--color-texts-600), var(--color-texts-400));
	text-decoration: none;
}

.header-nav a:hover {
	color: light-dark(var(--color-tailwind-950), var(--color-tailwind-50));
}

.toc {
	font-size: var(--font-size-small);
}

.toc ul {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-1);
	margin: 0;
	padding: 0;
	list-style: none;
}

.toc a {
	display: flex;
	align-items: center;
	min-height: var(--target-size-compact);
	padding-inline: var(--space-3);
	border-radius: var(--button-radius);
	color: light-dark(var(--color-texts-600), var(--color-texts-400));
	text-decoration: none;
}

.toc a:hover {
	background: light-dark(var(--color-tailwind-100), var(--color-tailwind-900));
	color: light-dark(var(--color-tailwind-950), var(--color-tailwind-50));
}

.toc a[aria-current="page"] {
	background: light-dark(var(--color-tailwind-100), var(--color-tailwind-900));
	color: light-dark(var(--color-tailwind-950), var(--color-tailwind-50));
	font-weight: var(--font-weight-medium);
}

@media (width >= 48rem) {
	.toc ul {
		flex-direction: column;
		flex-wrap: nowrap;
	}
}

.prose {
	max-width: var(--width-prose);
}

.prose h1,
.prose h2,
.prose h3 {
	font-weight: var(--font-weight-semibold);
	letter-spacing: var(--letter-spacing-heading);
	line-height: var(--line-height-heading);
}

.prose h1 {
	margin: 0 0 var(--space-6);
	font-size: var(--font-size-heading-1);
}

.prose h2 {
	margin: var(--space-12) 0 var(--space-4);
	font-size: var(--font-size-heading-2);
}

.prose h3 {
	margin: var(--space-8) 0 var(--space-3);
	font-size: var(--font-size-heading-3);
}

.prose p,
.prose ul,
.prose ol {
	margin: 0 0 var(--space-4);
}

.prose ul,
.prose ol {
	padding-left: var(--space-6);
}

.prose li + li {
	margin-top: var(--space-2);
}

.prose strong {
	font-weight: var(--font-weight-semibold);
}

.prose code {
	padding-inline: var(--space-1);
	border-radius: var(--radius-inline);
	background: light-dark(var(--color-tailwind-100), var(--color-tailwind-900));
	font-family: var(--font-mono);
	font-size: var(--font-size-code);
}

.table {
	margin: 0 0 var(--space-6);
	overflow-x: auto;
	border: var(--border-width) solid
		light-dark(var(--color-tints-100), var(--color-tailwind-950));
	border-radius: var(--button-radius);
}

.table table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--font-size-small);
}

.table th,
.table td {
	padding: var(--space-2) var(--space-3);
	text-align: left;
	vertical-align: top;
}

.table th {
	background: light-dark(var(--color-tailwind-100), var(--color-tailwind-900));
	font-weight: var(--font-weight-medium);
}

.table tr + tr td,
.table thead + tbody td {
	border-top: var(--border-width) solid
		light-dark(var(--color-tints-100), var(--color-tailwind-950));
}

.note {
	margin: 0 0 var(--space-6);
	padding: var(--space-3) var(--space-4);
	border: var(--border-width) solid
		light-dark(var(--color-tints-100), var(--color-tailwind-950));
	border-radius: var(--button-radius);
	background: light-dark(var(--color-tailwind-100), var(--color-tailwind-900));
}

.note > :last-child {
	margin-bottom: 0;
}

.card-stack {
	display: flex;
	flex-direction: column;
	gap: var(--space-6);
	width: 100%;
	max-width: var(--width-card);
}

.card-brand {
	align-self: center;
	font-size: var(--font-size-heading-2);
	font-weight: var(--font-weight-semibold);
	letter-spacing: var(--letter-spacing-heading);
	line-height: var(--line-height-heading);
	text-decoration: none;
}

.card {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
	padding: var(--space-8) var(--space-6);
	border: var(--border-width) solid
		light-dark(var(--color-tints-100), var(--color-tailwind-950));
	border-radius: var(--button-radius);
	background: light-dark(var(--color-tailwind-0), var(--color-tailwind-1000));
}

.card-title {
	margin: 0 0 var(--space-2);
	font-size: var(--font-size-heading-2);
	font-weight: var(--font-weight-semibold);
	letter-spacing: var(--letter-spacing-heading);
	line-height: var(--line-height-heading);
}

.card-heading {
	margin: 0;
	font-size: var(--font-size-heading-3);
	font-weight: var(--font-weight-semibold);
	line-height: var(--line-height-heading);
}

.card-text {
	margin: 0;
	color: light-dark(var(--color-texts-600), var(--color-texts-400));
}

.card-links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--space-2) var(--space-6);
	margin: 0;
	color: light-dark(var(--color-texts-600), var(--color-texts-400));
	font-size: var(--font-size-small);
}

.card-links a {
	display: inline-flex;
	align-items: center;
	min-height: var(--target-size);
	color: light-dark(var(--color-tailwind-950), var(--color-tailwind-50));
}

.form {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
}

.field {
	display: flex;
	flex-direction: column;
	gap: var(--space-1);
}

.field-head {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: var(--space-4);
}

.field-label {
	font-size: var(--font-size-small);
	font-weight: var(--font-weight-medium);
}

.field-head a {
	color: light-dark(var(--color-texts-600), var(--color-texts-400));
	font-size: var(--font-size-small);
}

.field:not(:has(.input:user-valid, .input:user-invalid))
	:is(.strength-area, .strength-verdict) {
	display: none;
}

.strength {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	padding-top: var(--space-1);
}

.strength-bar {
	display: flex;
	gap: var(--space-2);
}

.strength-step {
	flex: 1;
	height: var(--strength-height);
	border-radius: var(--strength-radius);
	background: light-dark(var(--color-tints-100), var(--color-tailwind-950));
}

.strength-weak .strength-step:first-child {
	background: var(--color-harmonies-red);
}

.strength-acceptable .strength-step:not(:last-child),
.strength-strong .strength-step {
	background: var(--color-harmonies-green);
}

.strength-message {
	display: flex;
	align-items: flex-start;
	gap: var(--space-2);
	margin: 0;
	color: light-dark(var(--color-texts-600), var(--color-texts-400));
	font-size: var(--font-size-small);
}

.strength-icon {
	flex: none;
	width: var(--strength-icon);
	height: var(--strength-line);
}

.strength-tick {
	stroke: light-dark(var(--color-tailwind-0), var(--color-tailwind-1000));
}

.strength-word {
	color: light-dark(var(--color-texts-600), var(--color-texts-400));
	font-size: var(--font-size-small);
}

.strength-weak .strength-message,
.strength-word-weak {
	color: var(--color-harmonies-red);
}

.strength-word-strong {
	color: var(--color-harmonies-green);
}

.input {
	min-height: var(--target-size);
	padding-inline: var(--space-3);
	border: var(--border-width) solid
		light-dark(
			color-mix(in srgb, var(--color-shadows-100) 50%, transparent),
			color-mix(in srgb, var(--color-tailwind-0) 25%, transparent)
		);
	border-radius: var(--button-radius);
	background: light-dark(var(--color-tailwind-0), var(--color-tailwind-1000));
	color: light-dark(var(--color-tailwind-950), var(--color-tailwind-50));
	font: inherit;
}

.check {
	display: flex;
	align-items: flex-start;
	gap: var(--space-3);
	font-size: var(--font-size-small);
}

.check input {
	flex: none;
	width: var(--space-4);
	height: var(--space-4);
	margin: var(--space-1) 0 0;
	accent-color: var(--color-tailwind-800);
}

.form-note {
	margin: 0;
	color: light-dark(var(--color-texts-600), var(--color-texts-400));
	font-size: var(--font-size-small);
}

.form-error {
	margin: 0;
	color: light-dark(var(--color-texts-950), var(--color-tailwind-0));
	font-size: var(--font-size-small);
	font-weight: var(--font-weight-medium);
}

.list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.list-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: var(--space-4);
	padding-block: var(--space-3);
	border-top: var(--border-width) solid
		light-dark(var(--color-tints-100), var(--color-tailwind-950));
}

.list-item:first-child {
	border-top: 0;
}

.list-title {
	margin: 0;
	font-weight: var(--font-weight-medium);
}

.list-meta {
	margin: 0;
	color: light-dark(var(--color-texts-600), var(--color-texts-400));
	font-size: var(--font-size-small);
}

.list-tag {
	flex: none;
	color: light-dark(var(--color-texts-600), var(--color-texts-400));
	font-size: var(--font-size-small);
}

.register-backdrop {
	position: fixed;
	inset: 0;
	z-index: 0;
	overflow: hidden;
	pointer-events: none;
	background: light-dark(var(--color-tailwind-0), var(--color-tailwind-1000));
}

.register-backdrop-image {
	position: absolute;
	inset: calc(var(--space-4) * -1);
	background-image: url("/dashboard-kedrel-light.png");
	background-repeat: no-repeat;
	background-position: center;
	background-size: calc(100% - 2 * var(--space-4)) auto;
	filter: blur(var(--backdrop-blur));
}

.register-backdrop-veil {
	position: absolute;
	inset: 0;
	background: light-dark(var(--color-tailwind-950), var(--color-tailwind-50));
	opacity: var(--veil-opacity);
}

@media (prefers-color-scheme: dark) {
	.register-backdrop-image {
		background-image: url("/dashboard-kedrel-dark.png");
	}
}

.auth {
	position: relative;
	z-index: 1;
}

.auth .card-stack {
	max-width: var(--width-register);
}

.auth .card {
	padding: calc(var(--space-8) * 2) var(--space-12);
	box-shadow:
		0 0 0 var(--border-width)
		light-dark(
			color-mix(in srgb, var(--color-tailwind-950) 6%, transparent),
			color-mix(in srgb, var(--color-tailwind-0) 16%, transparent)
		),
		0 var(--space-2) var(--space-4)
		light-dark(
			color-mix(in srgb, var(--color-tailwind-950) 12%, transparent),
			color-mix(in srgb, var(--color-tailwind-1000) 55%, transparent)
		),
		0 var(--space-8) var(--space-12)
		light-dark(
			color-mix(in srgb, var(--color-tailwind-950) 24%, transparent),
			color-mix(in srgb, var(--color-tailwind-1000) 72%, transparent)
		);
}

.auth .card-title {
	color: light-dark(var(--color-texts-800), var(--color-texts-100));
}

.auth .check,
.auth .auth-or {
	color: light-dark(var(--color-texts-700), var(--color-texts-300));
}

.auth .check a {
	color: var(--color-tailwind-800);
	text-decoration: none;
}

.auth .check a:hover {
	color: light-dark(var(--color-texts-950), var(--color-texts-50));
}

.auth .button {
	width: 100%;
	min-height: var(--target-size);
}

.auth .button-1,
.auth .button-1:hover {
	background: var(--color-tints-500);
	color: var(--color-tailwind-0);
}

.auth .form:valid .button-1,
.auth .form:valid .button-1:hover {
	background: var(--color-tailwind-800);
	cursor: pointer;
}

.auth .button-2,
.auth .button-2:hover {
	color: light-dark(var(--color-tailwind-1000), var(--color-tailwind-0));
}

.auth .google-label,
.auth .method-label {
	transform: translateY(var(--icon-lift));
}

.auth .field-head a {
	color: var(--color-tailwind-800);
	text-decoration: none;
}

.auth .field-head a:hover {
	text-decoration: underline;
}

.auth .check-control {
	position: relative;
	flex: none;
	width: var(--check-size);
	height: var(--check-size);
	margin-top: var(--space-1);
}

.auth .check input {
	cursor: pointer;
	appearance: none;
	width: var(--check-size);
	height: var(--check-size);
	margin: 0;
	border: var(--border-width) solid
		light-dark(
			color-mix(in srgb, var(--color-shadows-100) 50%, transparent),
			color-mix(in srgb, var(--color-tailwind-0) 25%, transparent)
		);
	border-radius: var(--button-radius);
	background: light-dark(var(--color-tailwind-0), var(--color-tailwind-1000));
}

.auth .check input:checked,
.auth .check input:checked:hover {
	border-color: var(--color-tailwind-800);
	background: var(--color-tailwind-800);
}

.check-mark {
	display: none;
	position: absolute;
	inset: 0;
	width: var(--check-mark);
	height: var(--check-mark);
	margin: auto;
	color: var(--color-tailwind-0);
	pointer-events: none;
}

.auth .check:has(input:checked) .check-mark {
	display: block;
}

.auth .auth-or {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	margin: 0;
	font-size: var(--font-size-small);
}

.auth .auth-or::before,
.auth .auth-or::after {
	content: "";
	flex: 1;
	height: var(--border-width);
	background: light-dark(
		color-mix(in srgb, var(--color-shadows-100) 50%, transparent),
		color-mix(in srgb, var(--color-tailwind-0) 25%, transparent)
	);
}

.auth .card-links {
	align-items: baseline;
	gap: var(--space-1);
}

.auth .card-links a {
	min-height: 0;
	color: var(--color-tailwind-800);
	text-decoration: none;
}

.auth .card-links a:hover {
	text-decoration: underline;
}

.auth .email-error {
	display: none;
}

.auth .field:has(.input:user-invalid:not(:placeholder-shown)) .email-error {
	display: block;
}

.auth .input {
	outline: var(--input-outline) solid transparent;
	outline-offset: calc(var(--input-outline) * -1);
	transition:
		background-color var(--duration),
		color var(--duration),
		border-color var(--duration),
		outline-color var(--duration),
		outline-offset var(--duration);
}

.auth .input:focus {
	outline-color: var(--color-tints-500);
	outline-offset: 0;
}

.auth .input:user-invalid:not(:placeholder-shown) {
	border-color: var(--color-harmonies-red);
}

.auth .input:user-invalid:not(:placeholder-shown):focus {
	outline-color: transparent;
	outline-offset: calc(var(--input-outline) * -1);
}

.password {
	position: relative;
}

.password .input {
	width: 100%;
}

.password:has(.eye) .input {
	padding-inline-end: var(--target-size);
}

.eye {
	position: absolute;
	top: 0;
	inset-inline-end: 0;
	display: none;
	place-items: center;
	width: var(--target-size);
	height: 100%;
	padding: 0;
	border: 0;
	background: none;
	color: light-dark(var(--color-texts-700), var(--color-texts-300));
	cursor: pointer;
}

.password:not(:has(input:placeholder-shown)) .eye {
	display: grid;
}

.eye svg {
	width: var(--eye-icon);
	height: var(--eye-icon);
}

.eye .eye-shut,
.eye[aria-pressed="true"] .eye-open {
	display: none;
}

.eye[aria-pressed="true"] .eye-shut {
	display: block;
}

.auth-foot {
	margin: var(--space-2) 0 0;
	padding: var(--space-4);
	border-radius: var(--button-radius);
	background: light-dark(var(--color-texts-50), var(--color-texts-900));
	color: light-dark(var(--color-texts-800), var(--color-texts-100));
	font-size: var(--font-size-small);
	text-align: center;
}

.auth-foot a {
	color: var(--color-tailwind-800);
	text-decoration: none;
}

.auth-foot a:hover {
	text-decoration: underline;
}

.auth-note {
	margin: 0;
	color: light-dark(var(--color-texts-700), var(--color-texts-300));
	font-size: var(--font-size-small);
	line-height: 1.75;
	text-align: center;
}

.auth-note a,
.auth-note button {
	display: inline;
	padding: 0;
	border: 0;
	background: none;
	color: var(--color-tailwind-800);
	font: inherit;
	font-size: inherit;
	line-height: inherit;
	text-decoration: none;
	cursor: pointer;
}

.auth-note a:hover,
.auth-note button:hover {
	text-decoration: underline;
}

@media (prefers-reduced-motion: reduce) {
	.auth .input {
		transition: none;
	}
}