@layer Reset {
	* {
		box-sizing: border-box;
		margin: 0;
		padding: 0;
		field-sizing: content;
		text-decoration-line: inherit;
		text-decoration-thickness: inherit;
		text-decoration-style: inherit;
		text-decoration-color: inherit;
		text-decoration-offset: inherit;
		min-width: 0;
		gap: inherit;
		user-select: inherit;
		scroll-behavior: smooth;
		transition-property: none;
		transform-style: inherit;
		--transformOriginX: center;
		--transformOriginY: center;
		transform-origin: var(--transformOriginX, center) var(--transformOriginY, center);
		transition-duration: inherit;
		transition-timing-function: inherit;
	}
}

:root {
	--usd-green: #6cde07;
	--gbp-purple: #bc3fe0;
	--bitcoin-gold: #f7931a;
	--ethereum-blue: #627eea;
	--dai-yellow: #faba34;
	--usdc-blue: #2775c9;
	--tether-teal: #26a17b;
	--ripple-black: #222222;

	--polygon-purple: #8248e5;
	--optimism-red: #f01a37;
	--binance-gold: #FCD535;
	--avalanche-red: #f9273c;
	--gnosis-teal: #48a9a6;
	--fantom-blue: #1969ff;
	--arbitrum-blue: #28a0f0;
	--metis-blue: #00cfff;
	--skale-black: #000;
	--celo-gold: #fbcc5c;
	--aurora-green: #92D36F;
	--cronos-blue: #002D74;
	--evmos-orange: #ED4E33;
	--rootstock-orange: #ff9100;
	--rootstock-green: #79c600;
	--rootstock-pink: #ff71e1;

	--up-green: #1af73d;
	--down-red: #f7541a;

	--portis-blue: #6db2d8;
	--metamask-orange: #e27625;
	--torus-blue: #0364ff;
	
	--primary-color: var(--ethereum-blue); /* #6790e1; */
	/* --card-background-color: rgba(0, 0, 0, 0.075);
	--card-hover-background-color: rgba(0, 0, 0, 0.100); */
	--card-background-color: rgb(255, 255, 255, 0.4);
	--card-hover-background-color: rgb(255, 255, 255, 0.6);
	--card-border-radius: 0.5rem;
	--card-box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.075);

	--one-column-width: 70em;
	--padding-outer: 1rem;
	--padding-inner: 0.8rem;
	
	--base-fonts: Ubuntu, -apple-system, BlinkMacSystemFont, Segoe UI, Oxygen, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
	--monospace-fonts: 'Fira Code', 'JetBrains Mono', 'Roboto Mono', Menlo, Inconsolata, monospace;

	--overlay-backdrop-filter: blur(20px) contrast(1.1);

	--ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);

	min-height: 100vh;
	min-height: 100dvh;

	/* font-size: 20px;
	font-size: clamp(15px, 1.1vw, 20px); */
	font-size: 16px;
	font-size: clamp(11px, 1.5vw, clamp(14px, 1.05vw, 16px));
	font-family: var(--base-fonts);
	line-height: 1.5;
	letter-spacing: 0.03ch;

	tab-size: 4;

	-webkit-font-feature-settings: "liga" on, "calt" on;
	font-feature-settings: "liga" on, "calt" on;
	font-variant: tabular-nums;

	-webkit-font-smoothing: antialiased;
	/* text-rendering: optimizeLegibility; */
	text-rendering: geometricPrecision;

	word-break: break-word;

	--text-color: rgba(0, 0, 0, 0.8);
	color: var(--text-color);
	--text-decoration-color: 51, 51, 51;
	--text-decoration-opacity: 0.15;
	text-decoration-thickness: 1px;
	text-underline-offset: 12.5%;
	text-decoration-skip-ink: auto;
	text-shadow: 0px 2px 1px rgba(0, 0, 0, 0.1);

	interpolate-size: allow-keywords;

	--global-background-gradient-base-color: #f6f6f6;

	accent-color: var(--primary-color);

	--invert-when-light: invert();
	--invert-when-dark: none;

	--is-light: 1;
	--is-dark: calc(1 - var(--is-light));
	--rgb-light-dark: calc(var(--is-light) * 255), calc(var(--is-light) * 255), calc(var(--is-light) * 255);
	--rgb-light-dark-inverse: calc(var(--is-dark) * 255), calc(var(--is-dark) * 255), calc(var(--is-dark) * 255);

	@media (prefers-color-scheme: dark) {
		&:not([data-color-scheme="light"]) {
			--card-background-color: rgba(255, 255, 255, 0.1);
			--card-hover-background-color: rgba(255, 255, 255, 0.12);
			/* --card-box-shadow: 0px 2px 4px rgba(255, 255, 555, 0.075); */

			--global-background-gradient-base-color: #01002d;

			-webkit-font-smoothing: auto;

			--text-color: #f7fdff;
			--text-decoration-color: 247, 253, 255;

			--invert-when-light: none;
			--invert-when-dark: invert();

			--is-light: 0;
		}
	}
	&[data-color-scheme="dark"] {
		--card-background-color: rgba(255, 255, 255, 0.1);
		--card-hover-background-color: rgba(255, 255, 255, 0.12);
		/* --card-box-shadow: 0px 2px 4px rgba(255, 255, 555, 0.075); */

		--global-background-gradient-base-color: #01002d;

		-webkit-font-smoothing: auto;

		--text-color: #f7fdff;
		--text-decoration-color: 247, 253, 255;

		--invert-when-light: none;
		--invert-when-dark: invert();

		--is-light: 0;
	}

	@media (prefers-reduced-motion: reduce) {
		&:not([data-animations="enabled"]) {
			& * {
				animation: none !important;
				transition: none !important;
			}
		}
	}
	@media (prefers-reduced-motion: no-preference) {
		&[data-animations="disabled"] {
			& * {
				animation: none !important;
				transition: none !important;
			}
		}
	}

	/* Safari */
	@supports (-webkit-hyphens: none) {
		font-synthesis: none;
	}
}


:root {
	overflow: hidden;

	background: linear-gradient(155deg, var(--global-background-gradient-base-color), var(--primary-color, var(--ethereum-blue)) 250%) fixed;
	transition:
		--primary-color 1s var(--ease-out-expo),
		--global-background-gradient-base-color 1s var(--ease-out-expo);
}

body {
	overflow: hidden auto;
	height: 100vh;
	height: 100dvh;
}


:any-link {
	/* color: var(--text-color); */
	color: inherit;
	/* text-shadow: 0 1px 1px; */
	transition-duration: 0.2s;
	transition-property:
		color,
		opacity,
		text-decoration-color,
		text-shadow
	;
	text-decoration-line: underline;
	text-decoration-color: rgba(var(--text-decoration-color), var(--text-decoration-opacity));

	&:is(:hover, :focus):not(:focus-within) {
		--text-decoration-opacity: 0.33;
		opacity: 0.9;
		/* text-shadow: 0 1px 3px; */

		&:has(:any-link:is(:hover, :focus)) {
			--text-decoration-opacity: 0;
			opacity: 1;
		}
	}
}


h1, h2, h3, h4, h5, h6,
h7, h8, h9, h10, h11, h12 {
	font-weight: 600;
	line-height: 1.2;
	text-wrap: balance;

	&:has(:is(strong, b)) {
		font-weight: normal;

		:is(strong, b) {
			font-weight: 600;
		}
	}
}

h1 {
	font-size: 2em;
}
h5 {
	font-size: 0.95em;
}
h6 {
	font-size: 0.9em;
}

:is(h3, h4, h5, h6).row {
	--padding-inner: 1ch;
}

pre, code {
	font-family: var(--monospace-fonts);
	white-space: pre-wrap;
	font-size: 0.75em;
	user-select: all;
}

output {
	font-family: var(--monospace-fonts);
	white-space: pre-wrap;
	word-break: break-word;
	user-select: all;

	&[data-type="text"] {
		font-family: inherit;
	}
}
.monospace {
	font-family: var(--monospace-fonts), var(--base-fonts);
	font-size: 0.95em;
	white-space: nowrap;
}

button,
.button,
::file-selector-button {
	--button-backgroundColor: var(--primary-color);
	--button-fontSize: 1.15em;
	--button-cursor: pointer;

	--button-depth: 0.15em;
	--button-scale: 1;
	--button-glow: 0px;

	&:is(:hover, :focus) {
		--button-scale: 1.015;
	}

	&:focus {
		--button-glow: 5px;
	}

	&:active {
		--button-depth: 0px;
	}

	&.medium {
		--button-fontSize: 0.95em;
	}

	&.small {
		--button-fontSize: 0.7em;
	}

	&.destructive {
		--button-backgroundColor: hsl(17deg 69% 43%);
	}

	&.cancel {
		--button-backgroundColor: #777;
	}

	&.add {
		--button-cursor: copy;
	}

	&:is(a) {
		text-decoration: none;
	}

	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.75ch;

	appearance: none;
	background-color: var(--button-backgroundColor);
	color: #fff;
	border: none;
	border-radius: 0.33em;
	cursor: pointer;
	outline: none;

	padding: 0.3em 0.7em;
	
	font: inherit;
	font-size: var(--button-fontSize);
	font-weight: bold;
	line-height: 1.5;
	text-decoration: none;
	text-shadow: 0px 2px 1px rgba(0, 0, 0, 0.1);

	box-shadow: 0px var(--button-depth) rgba(0, 0, 0, 0.25), 0px var(--button-depth) var(--button-backgroundColor), 0 var(--button-depth) var(--button-glow) var(--button-backgroundColor);
	transform: translateY(calc(-1 * var(--button-depth))) scale(var(--button-scale));

	transition-duration: 0.2s;
	transition-property:
		background-color,
		box-shadow,
		border,
		color,
		filter,
		gap,
		opacity,
		outline,
		text-decoration-color,
		text-shadow,
		transform,
		transform-origin
	;

	cursor: var(--button-cursor);
	user-select: none;
}

input[type="file"] {
	&:is(:hover, :focus)::file-selector-button {
		--button-scale: 1.015;
	}

	&:focus::file-selector-button {
		--button-glow: 5px;
	}

	&:active::file-selector-button {
		--button-depth: 0px;
	}
}


:-placeholder {
	opacity: 0.5;
}

input, select, textarea {
	border: none;
	font: inherit;
	max-width: 100%;
}
input:not([type="file"]), textarea {
	/* background-color: rgba(var(--rgb-light-dark-inverse), 0.975) */
	background-color: rgba(255, 255, 255, 0.975);
	border-radius: 0.5rem;
	padding: 0.3em 0.7em;
	flex-basis: 20rem;
}
/* input.is-valid {
	border: 2px solid green;
} */
input[type="number"] {
	font-family: var(--monospace-fonts);
}

input[type="checkbox"] {
	width: 1.2em;
	height: 1.2em;
	transform: translateY(0.2em);
	/* display: inline-flex;
	align-items: center; */
	flex-basis: auto;
}

input[type="file"] {
	/* overflow: visible; */
	margin: -1rem;
	padding: 1rem;
}

label {
	cursor: pointer;

	& input:is(
		[type="checkbox"],
		[type="radio"]
	) {
		position: fixed;
		opacity: 0;
		pointer-events: none;

		& ~ span {
			background-color: rgba(255, 255, 255, calc(0.2 + var(--is-light) * 0.8));
			padding: 0.2em 0.4em;
			border-radius: 0.25em;
			transition-duration: 0.15s;
			transition-property:
				background-color,
				box-shadow,
				color,
				scale,
				opacity
			;
			cursor: pointer;
			display: inline-flex;
			align-items: center;
			gap: 0.3em;

			&:before {
				font-size: 1.4em;
				line-height: 0;
				speak: none;
				transition-duration: 0.1s;
				transition-timing-function: ease-out;
			}
		}

		&:checked {
			& ~ span {
				/* box-shadow: 0 0 0 1px rgba(var(--rgb-light-dark-inverse), 0.33); */
				box-shadow: 0 0 0 1.5px var(--primary-color);
				scale: 1.025;

				&:before {
					content: "✓⃞";
				}
			}
		}

		&:not(:checked) {
			& ~ span {
				opacity: 0.66;

				&:before {
					content: "⃞";
					content: "□";
					opacity: 0.5;
					/* min-width: 0.9em; */
				}
			}
		}
	}

	&:hover,
	&:focus-within {
		& input:is([type="checkbox"], [type="radio"]) {
			& ~ span {
				scale: 1.02;

				&:not(:checked) {
					opacity: 0.66;
				}
			}
		}
	}

	&:active {
		& input:is([type="checkbox"], [type="radio"]) {
			& ~ span {
				scale: 0.99;
			}

			&:not(:checked) {
				& ~ span:before {
					animation: CheckboxAdd 0s 0.075s forwards;
				}
			}

			&:checked {
				& ~ span:before {
					/* content: "☒"; */
					animation: CheckboxDelete 0s 0.075s forwards;
				}
			}
		}
	}

	& input:is([type="radio"]):not(:checked) {
		& ~ span:before {
			content: "⃝";
		}
	}

	& input:is([type="radio"]):checked {
		& ~ span:before {
			content: "✓⃝";
		}
	}
}

@keyframes CheckboxAdd {
	to {
		content: "+⃞";
	}
}

@keyframes CheckboxDelete {
	to {
		content: "☒";
	}
}



h1 input,
h2 input {
	font-size: 0.7em;
	animation: From 0.3s;
}
@keyframes From {
	from {
		padding: 0;
		background: inherit;
		color: inherit;
		font-size: inherit;
	}
}

select {
	--select-backgroundColor: rgba(255, 255, 255, 0.9);
	--select-chevronIcon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") no-repeat right 0.25em center / 1.25em;
	/* --select-chevronIcon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-12 -16 24 28'%3E%3Ctext text-anchor='middle' dominant-baseline='middle'%3E%26%23x23F7%3B%3C/text%3E%3C/svg%3E") no-repeat right 0.25em center; */

	appearance: none;
	border-radius: 0.5rem;
	padding: 0.15em 0.75em;
	padding-right: 1.725em;

	background: var(--select-backgroundColor) var(--select-chevronIcon);

	&:not(:focus) {
		cursor: context-menu;
	}

	&[style*="--select-leftIcon-url"] {
		background:
			var(--select-chevronIcon),
			var(--select-leftIcon-url) no-repeat left 0.485em center / 1.2em auto
		;
		background-color: var(--select-backgroundColor);

		padding-left: 2.15em;
	}
}

section {
	display: grid;
	gap: var(--padding-inner);
	grid-template-columns: 100%;
}


:disabled,
form:invalid input[type="submit"],
form:invalid button[type="submit"],
.placeholder {
	opacity: 0.33;
	cursor: not-allowed !important;
	touch-action: none;
}


:invalid {
	/* border: red 2px solid; */
	outline-color: red;
}


mark, .mark {
	background: none;
	color: currentColor;
	text-shadow: 1px 1px 0.25rem var(--primary-color);
	text-shadow: 0 0.5px 0.2em var(--primary-color);
	/* text-outline: 1px 2px var(--primary-color); */
}


abbr[title],
time[title] {
	text-decoration: underline dotted 1px rgba(var(--text-decoration-color), var(--text-decoration-opacity));
}

:not(a) > :not(:is(a, button))[title],
a > :not(a):not(:only-child)[title] {
	cursor: help;
}


hr {
	background: none;
	border: none;
	border-bottom: currentColor 1px solid;
	opacity: 0.25;

	flex-basis: 100%;
	grid-column: 1 / -1;
}


ul,
ol {
	&:not(.bulleted) {
		list-style-type: none;
	}

	&:is(ul).bulleted {
		padding-inline-start: 1em;
	}

	&:is(ol).bulleted {
		padding-inline-start: 1.5em;
	}
}

dl {
	@supports not (grid-template-columns: subgrid) {
		&,
		& > div {
			display: grid;
			/* grid-template-columns: minmax(min-content, 1fr) minmax(min-content, 1fr); */
			grid-template-columns: minmax(min-content, 1fr) 1fr;
			align-items: center;
			align-items: start;
			margin: 0 auto;
		}
		& > div {
			grid-column: 1 / -1;
		}
	}

	@supports (grid-template-columns: subgrid) {
		& {
			display: grid;
			grid-template-columns: auto auto;
			align-items: start;
			margin: 0 auto;
		}

		& > div {
			display: grid;
			grid-column: 1 / -1;
			grid-template-columns: subgrid;
		}
	}

	dt {
		color: rgba(var(--rgb-light-dark-inverse), 0.6);
		font-weight: bold;
		text-align: right;
	}
}


iframe {
	border: none;
	width: 100%;
	min-height: 50rem;
}


img {
	display: inline-grid;
	grid-template-areas: 'stack';
	place-items: center;

	font-family: Pally, var(--base-fonts);

	/* font-size: 0; */
	/* visibility: hidden; */
	text-indent: -1000vw;

	position: relative;

	&:after {
		display: flex;
		justify-content: center;
		align-items: center;
		position: absolute;
		inset: 0;

		padding: 0 10%;
		text-align: center;
		content: attr(alt);
		border-radius: inherit;

		font-size: 1.1rem;
		font-weight: bold;
		line-height: 1.25;
		text-decoration: none;

		/* visibility: visible;
		background: inherit; */
		text-indent: initial;

		white-space: pre-line;
		word-break: break-word;

		opacity: 0.85;

		text-shadow: 0 0 1em rgba(var(--rgb-light-dark-inverse), 0.25), 0 0 6em var(--primary-color);
		overflow: hidden;

		@supports (-webkit-background-clip: text) or (background-clip: text) {
			background: linear-gradient(135deg, currentColor, var(--primary-color) 150%);
			-webkit-background-clip: text;
			background-clip: text;
			-webkit-text-fill-color: rgba(var(--rgb-light-dark-inverse), 0.5);
		}
	}
}

source {
	display: none !important;
}

address {
	display: inline;
	font-style: normal;
}


.card {
	display: grid;
	gap: var(--padding-inner);
	align-content: start;
	padding: var(--padding-outer);

	background-image: var(--card-background-image);
	background-color: var(--card-background-color);
	/* background-image: radial-gradient(circle, transparent -75%, var(--card-background-color)); */
	border-radius: var(--card-border-radius);
	box-shadow: var(--card-box-shadow);
	transition-duration: 0.4s;
	transition-property:
		background,
		box-shadow,
		outline,
		opacity,
		scale
	;
	break-inside: avoid;

	&:hover {
		opacity: 1;

		/* background-image: none; */
		background-color: var(--card-hover-background-color);
	}
	/* &:before {
		content: '';
		position: absolute;
		inset: 0;
		background-image: var(--card-background-image);
		background-attachment: fixed;
		opacity: 0.1;
	} */

	&:focus,
	&:target,
	&:is(form):focus-within {
		/* background-color: rgb(var(--rgb-light-dark-inverse), 0.2); */
		box-shadow: var(--card-box-shadow), 0 0 0 2px var(--primary-color) inset;
		outline: none;
	}

	&.backdrop {
		backdrop-filter: var(--overlay-backdrop-filter);
	}

	& .card-annotation {
		opacity: 0.4;
		letter-spacing: 0.2ch;
		font-size: 0.8em;
		text-transform: uppercase;
	}

	& .footer {
		opacity: 0.8;
		font-size: 0.66em;
	}

	& .card-background {
		position: absolute;
		opacity: 0.075;
		width: 13em;
		right: -1.5em;
		top: -2em;
		filter: contrast(10);
		border-radius: 50%;
		z-index: -1;
		pointer-events: none;
		user-select: none;

		& > * {
			font-size: 13em;
		}
	}

	& .cover-image {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		object-fit: contain;
		object-position: center;
		opacity: 0.1;
		pointer-events: none;
		z-index: -1;
	}

	&:is(a) {
		text-decoration: none;
	}
}



.row {
	display: flex;
	align-items: center;
	gap: var(--padding-inner);
	justify-content: space-between;

	&.wrap {
		flex-wrap: wrap;
	}

	&.inline {
		--padding-inner: 0.5ch;

		display: inline-flex;
		align-items: baseline;
		vertical-align: baseline;
	}

	&.with-float {
		--padding-inner: 0.5ch;
		display: inline-block;
		line-height: inherit;

		> :first-child {
			float: inline-start;
			margin-inline-end: var(--padding-inner);
			translate: 0 calc((1lh - 100%) / 2);
		}
	}

	&.flex-fill {
		> * {
			flex: 1 1 auto;
		}
	}
}

.bar {
	display: flex;
	justify-content: safe end;
	align-items: center;
	column-gap: var(--padding-inner);
	row-gap: calc(0.5 * var(--padding-inner));

	&.wrap {
		flex-wrap: wrap;
	}

	& > :first-child {
		flex: 1 auto;
		justify-content: start;
		justify-items: start;
		
		&:is(
			.row.inline,
			h2,
			h3
		) {
			flex: 1;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}

		&:is(a) {
			flex: 0 auto;
			margin-inline-end: auto;
		}
	}

	& > :not(:first-child) {
		flex: 0 0 auto;
	}
}

.stack {
	display: grid;
	grid: "stack";

	&.inline {
		display: inline-grid;
	}

	& > *,
	&::before,
	&::after {
		grid-area: stack;
	}
}

.column {
	display: grid;
	grid-template-columns: 100%;
	align-content: start;
	gap: var(--padding-inner);

	&.inline {
		gap: calc(var(--padding-inner) * 0.25);
	}
}
.column-block {
	--gap: var(--padding-inner);

	display: block;

	& > * + * {
		margin-block-start: var(--gap);
	}

	/* & > :not(:last-child) {
		margin-bottom: var(--padding-inner);
	} */

	&.with-hidden-transitions {
		> * {
			--gapBefore: 0;
			--gapAfter: 0;
			--gapBefore-hidden: var(--gapBefore);
			--gapAfter-hidden: var(--gapAfter);
			--isHidden: 0;
			--offset-hidden: 0;
			
			&[hidden] {
				--isHidden: 1;
				height: 0;
			}

			@starting-style {
				--isHidden: 1;
				height: 0;
			}

			transition-property: display, block-size, margin-block;
			transition-behavior: allow-discrete;
			interpolate-size: allow-keywords;

			margin-block-start: calc(
				(
					(1 - var(--isHidden)) * (
						var(--gapBefore)
					)
					+ var(--isHidden) * (
						var(--gapBefore-hidden)
						+ var(--offset-hidden) * 0.5
					)
				) * var(--gap)
			);
			margin-block-end: calc(
				(
					(1 - var(--isHidden)) * (
						var(--gapAfter)
					)
					+ var(--isHidden) * (
						var(--gapAfter-hidden)
						- var(--offset-hidden) * 0.5
					)
				) * var(--gap)
			);

			/* First */
			& {
				--gapBefore: 0;
				--gapAfter: 1;
				--gapBefore-hidden: -0.5;
				--gapAfter-hidden: 0.5;
				--offset-hidden: -1;
			}

			/* Middle */
			&:where(
				:not([hidden]) ~ *
			) {
				--gapBefore: 1;
				--gapAfter: 1;
				/* sum to -1 to simulate margin collapse between previous element's "end" margin and next element's "start" margin */
				--gapBefore-hidden: -0.5;
				--gapAfter-hidden: -0.5;
				--offset-hidden: 0;
			}

			/* Last */
			&:where(
				:nth-last-child(1 of :not([hidden])),
				:nth-last-child(1 of :not([hidden])) ~ [hidden]
			) {
				--gapBefore: 1;
				--gapAfter: 0;
				--gapBefore-hidden: 0.5;
				--gapAfter-hidden: -0.5;
				--offset-hidden: 1;
			}

			/* Only */
			&:where(
				:not(:not([hidden]) ~ *):not(:has(~ :not([hidden])))
			) {
				--gapBefore: 0;
				--gapAfter: 0;
				--gapBefore-hidden: 0;
				--gapAfter-hidden: 0;
				--offset-hidden: 0;
			}
		}
	}
}


:root:not([data-animations="disabled"]) .scroll-snap-area {
	scroll-snap-type: both proximity;
	scroll-padding: var(--padding-inner);
}

.scrollable {
	max-height: 100%;
	overflow-y: auto;
	padding-right: var(--padding-inner);
	justify-content: start;
}
.scrollable-list {
	max-height: 100%;
	overflow-y: auto;
	grid-auto-columns: minmax(0, 1fr);
	grid-auto-rows: min-content;
	padding-right: var(--padding-inner);
	justify-content: start;

	--resizeVertical-defaultHeight: 30rem;
	--resizeVertical-defaultFocusHeight: max(30rem, 100vh - 25rem);
	resize: vertical;
	/* contain: strict;
	height: 30rem; */


	:root:not([data-animations="disabled"]) & {
		&:hover,
		&:focus-within {
			scroll-snap-type: y proximity;
		}
	}
	&[style*="height: "] {
		transition: none;
	}
	&:not([style*="height: "]) {
		transition: max-height 0.2s var(--ease-out-expo);

		max-height: var(--resizeVertical-defaultHeight);

		&:hover {
			will-change: max-height;
		}

		&:focus-within {
			max-height: var(--resizeVertical-defaultFocusHeight);
		}
	}
	& > *,
	& .scroll-snap-item,
	section {
		scroll-snap-stop: always;
		scroll-snap-align: start;

		.column > hr + & {
			scroll-margin-top: var(--padding-inner);
		}
	}
}

/* .scrollable-list {
	display: block;
	columns: 5;
	height: 100%;
	overflow-x: auto;
} */


.row-scrollable {
	display: flex;
	align-items: center;

	--scroll-fade: var(--padding-outer);

	overflow: auto clip;
	overflow-clip-margin: var(--scroll-fade);

	margin: 0 calc(-1 * var(--scroll-fade));
	padding: 0 var(--scroll-fade);

	mask-image: linear-gradient(
		to right,
		transparent,
		white var(--scroll-fade),
		white calc(100% - var(--scroll-fade)),
		transparent
	);

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

	& > * {
		min-width: max-content;
	}
}


.align-start {
	text-align: left;
	justify-items: start;
	justify-content: start;
	--transformOriginX: left;
}
.align-center {
	text-align: center;
	justify-items: center;
	justify-content: center;
	--transformOriginX: center;
	--transformOriginY: center;
}
.align-end {
	text-align: right;
	justify-items: end;
	justify-content: end;
	--transformOriginX: right;
}
.align-top {
	place-items: start stretch;
	--transformOriginY: top;
}
.align-bottom {
	place-items: end stretch;
	align-content: end;
	--transformOriginY: bottom;
}
.align-stretch {
	place-items: stretch;
}


:root {
	--sticky-height-1: 3.5rem;
	--sticky-height-2: 3rem;
	--sticky-height-3: 3rem;
	--sticky-gap: 0.333rem;
}

.sticky-layout {
	--sticky-level: 1;
	--sticky-top: 0;
	--sticky-height: var(--sticky-height-1);
	--sticky-header-outset: calc(1.5 * var(--padding-outer));
	isolation: isolate;

	& .sticky-layout,
	& .sticky ~ * {
		--sticky-level: 2;
		--sticky-top: calc(var(--sticky-height-1) + var(--sticky-gap));
		--sticky-height: var(--sticky-height-2);
		--sticky-header-outset: calc(0.666 * var(--padding-inner));
	}

	& .sticky-layout {
		& .sticky-layout,
		& .sticky ~ * {
			--sticky-level: 3;
			--sticky-top: calc(var(--sticky-height-1) + var(--sticky-gap) + var(--sticky-height-2) + var(--sticky-gap));
			--sticky-height: var(--sticky-height-2);
			--sticky-header-outset: calc(0.666 * var(--padding-inner));
		}			

		& .sticky-layout {
			--sticky-header-outset: 0em;

			.sticky {
				position: sticky;
				top: calc(var(--sticky-height-1) + var(--sticky-gap) + var(--sticky-height-2) + var(--sticky-gap));
				height: var(--sticky-height-3);
				z-index: 1;
			}

			/* .sticky-layout,
			.sticky ~ * {
				top: calc(var(--sticky-height-1) + var(--sticky-gap) + var(--sticky-height-2) + var(--sticky-gap) + var(--sticky-height-3) + var(--sticky-gap));
			} */
		}
	}

	/* margin-left: var(--sticky-header-outset);
	margin-right: var(--sticky-header-outset); */

	& .sticky {
		position: sticky;
		top: var(--sticky-top);
		height: var(--sticky-height);
		backdrop-filter: var(--overlay-backdrop-filter);
		z-index: calc(10 - var(--sticky-level));

		/* margin: calc(-1 * var(--padding-outer) * 1);
		margin-bottom: 0; */
		/* border-bottom-left-radius: 0;
		border-bottom-right-radius: 0; */

		/* margin-left: calc(-2 * var(--padding-outer));
		margin-right: calc(-2 * var(--padding-outer));
		margin-top: calc(-0.25 * var(--padding-outer)); */

		/* margin-left: calc(-1 * var(--padding-outer) - var(--sticky-header-outset));
		margin-right: calc(-1 * var(--padding-outer) - var(--sticky-header-outset)); */
		/* margin-top: calc(-1 * var(--padding-outer)); */

		/* padding-left: calc(1.25 * var(--padding-outer));
		padding-right: calc(1.25 * var(--padding-outer)); */

		margin-left: calc(-1 * var(--sticky-header-outset));
		margin-right: calc(-1 * var(--sticky-header-outset));

		overflow: hidden;
	}

	& > .sticky {
		/* margin-top: calc(-1 * var(--padding-outer)); */
	}

	& .sticky ~ * {
		/* margin-left: calc(-1 * var(--padding-outer) - var(--sticky-header-outset));
		margin-right: calc(-1 * var(--padding-outer) - var(--sticky-header-outset)); */
	}

	& .sticky-layout {
		&.sticky.card {
			/* background-color: rgba(var(--rgb-light-dark), 0.2); */
			/* backdrop-filter: blur(20px); */
			/* padding-top: 0;
			padding-bottom: 0; */
			align-content: center;
			/* padding-top: 0.66em;
			padding-bottom: 0.66em; */
		}

		& .sticky + * {
			position: sticky;
			top: var(--sticky-top);
		}

		& .sticky-layout {
			--sticky-header-outset: 0em;

			& .sticky {
				position: sticky;
				top: calc(var(--sticky-height-1) + var(--sticky-gap) + var(--sticky-height-2) + var(--sticky-gap));
				height: var(--sticky-height-3);
				z-index: 1;

				/* + * {
					position: sticky;
				} */
			}
		}
	}
}


.sticky-bottom {
	position: sticky;
	bottom: 0;
	z-index: 10;
}


menu,
[role="toolbar"] {
	font-size: 0.8em;
}


.overflow-ellipsis {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}


.slot {
	display: inline-flex;
	align-items: center;
}


.logo {
	font-weight: 600;
	text-transform: uppercase;
	/* font-variant: all-small-caps; */
	letter-spacing: 0.175ch;
	margin-right: -0.175ch;
	/* line-height: 1; */

	font-family: Pally, var(--base-fonts);
	letter-spacing: 0.225ch;
	font-weight: 900;
}
/* .logo {
	font-size: 1em;
	font-weight: 600;
	font-variant: all-small-caps;
	letter-spacing: 0.15ch;
	line-height: 0.9;
	display: inline-block;
	text-align: center;
} */



::-webkit-scrollbar {
	background: transparent;
	width: 5px;
	height: 5px;
}
[style*="animation:"]::-webkit-scrollbar {
	display: none;
}
::-webkit-scrollbar-track {
	background: rgba(255, 255, 255, 0.1);
}
:root::-webkit-scrollbar-button,
body::-webkit-scrollbar-button {
	height: 1.8rem;
}
::-webkit-scrollbar-thumb {
	background: var(--primary-color);
	border-radius: 5px;
}
::-webkit-scrollbar-corner {
	background: var(--primary-color);
	border: none;
}


[draggable="true"] {
	--draggable-transitionProperties: opacity, scale, filter;

	transition-property: var(--draggable-transitionProperties);
	transition-timing-function: var(--ease-out-expo);

	&:hover {
		&:not(:any-link) {
			cursor: grab;

			:root:not(:has([aria-grabbed])) &:active:where(:not(:has([draggable=true]:active))),
			&[aria-grabbed] {
				:hover {
					cursor: inherit !important;
				}
			}
		}

		scale: 1.001;
		filter: brightness(110%);
	}

	&[aria-grabbed="false"]:active {
		cursor: grabbing;

		opacity: 0.8;
		scale: 0.995;
	}

	:root:not(:has([aria-grabbed])) &:active:where(:not(:has([draggable=true]:active))),
	&[aria-grabbed="true"] {
		cursor: grabbing;

		will-change: transform;
		animation: Dragging 0.475s infinite ease-in-out;

		user-select: none;
	}

	:root:not(:has([aria-grabbed])) &:active:where(:has([draggable=true]:active)),
	&:active:where(:has([aria-grabbed="true"])) {
		animation: DraggingParent 0.9s infinite ease-in-out;
	}
}
@keyframes Dragging {
	0% {
		translate: 0 -0.5%;
	}
	50% {
		opacity: 0.66;
		scale: 0.9975;
		translate: 0 0.5%;
	}
	0%, 50%, 100% {
		rotate: 0;
	}
	25% {
		rotate: -0.05deg;
	}
	75% {
		rotate: 0.05deg;
	}
}
@keyframes DraggingParent {
	50% {
		transform: scale(0.999) translateY(-1px);
	}
}

[data-before]:before {
	content: attr(data-before);
}
[data-after]:after {
	content: attr(data-after);
}

[hidden] {
	display: none !important;
}

input[type="search"] {
	padding-right: 0;

	&::-webkit-search-cancel-button {
		margin: 0;
		padding: 0;
		inline-size: 1.4em;
		inline-size: 1lh;

		appearance: none;
		display: list-item !important;
		list-style: inside "✕";

		font-family: var(--monospace-fonts);
		font-size: 1.5em;
		text-align: center;

		transition: 0.15s;
		cursor: pointer;
		opacity: 1 !important;
	}

	&:not(:placeholder-shown)::-webkit-search-cancel-button {
		opacity: 1 !important;
	}
	&:placeholder-shown::-webkit-search-cancel-button {
		opacity: 0 !important;
		font-size: 0 !important;
	}

	&::-webkit-calendar-picker-indicator {
		margin: -1em 0;
		padding: 0;
		inline-size: 2.25em !important;
		block-size: 2.25em !important;

		appearance: none;
		display: list-item !important;
		list-style: inside "▼" !important;
		line-height: 2.25em;
		text-align: center;

		transition: 0.15s;
	}
	&:not(:placeholder-shown)::-webkit-calendar-picker-indicator {
		font-size: 0;
	}
}
