:root {
	color-scheme: light dark;
	--diaper-sait: env(safe-area-inset-top);
	--diaper-sair: env(safe-area-inset-right);
	--diaper-saib: env(safe-area-inset-bottom);
	--diaper-sail: env(safe-area-inset-left);
	--diaper-default-duration: 0.4s;
	--diaper-duration: var(--diaper-default-duration);
	--diaper-backdrop-color: black;
	--diaper-backdrop-opacity: 0.25;
	--diaper-light: #fcfcfc;
	--diaper-dark: #222222;
	--diaper-lighter: hsl(from var(--diaper-light) h s 90%);
	--diaper-darker: hsl(from var(--diaper-dark) h s 11%);
	--diaper-fg: light-dark(var(--diaper-dark), var(--diaper-light));
	--diaper-bg: light-dark(var(--diaper-light), var(--diaper-dark));
	--diaper-fg-tinted: light-dark(var(--diaper-darker), var(--diaper-lighter));
	--diaper-bg-tinted: light-dark(var(--diaper-lighter), var(--diaper-darker));
	--diaper-radius: 1rem;
	/* --diaper-easing: cubic-bezier(0.33, 1, 0.68, 1); */
	--diaper-easing: cubic-bezier(0.22, 1, 0.36, 1);
	/* --diaper-easing: linear(
		0,
		0.012 0.9%,
		0.049 2%,
		0.409 9.3%,
		0.513 11.9%,
		0.606 14.7%,
		0.691 17.9%,
		0.762 21.3%,
		0.82 25%,
		0.868 29.1%,
		0.907 33.6%,
		0.937 38.7%,
		0.976 51.3%,
		0.994 68.8%,
		1
	); */
}

html {
	background-color: black;
	min-height: calc(100% + var(--diaper-sait));
	padding-bottom: env(var(--diaper-saib));
	overscroll-behavior-y: none;
}
body {
	--diaper-progress: 1;
	--diaper-roundness: calc((1 - var(--diaper-progress)) * var(--diaper-radius));
	transition: scale, clip-path;
	transition-duration: var(--diaper-duration);
	transform-origin: bottom;
	transition-timing-function: var(--diaper-easing);
	scale: calc(0.94 + var(--diaper-progress) * 0.06);
	clip-path: inset(0 round var(--diaper-roundness) var(--diaper-roundness) 0 0);
	/* background-color: var(--diaper-bg-tinted);
	color: var(--diaper-fg-tinted); */
	margin: 0;
	position: fixed;
	inset: 0;
	overscroll-behavior-y: none;
	/* min-height: calc(100% + env(safe-area-inset-top)); */
}

dialog[data-diaper] {
	--diaper-progress: 1;
	--diaper-backdrop-progress: 1;
	--diaper-shadow-color: rgba(0 0 0 / 0.1);
	--diaper-overdrag-fill-color: var(--diaper-bg);
	width: 100%;
	margin-bottom: 0;
	margin-top: auto;
	margin-inline: auto;
	padding: 0;
	max-width: 100%;
	max-height: 100%;
	box-sizing: border-box;
	border: none;
	outline: none;
	border-radius: var(--diaper-radius) var(--diaper-radius) 0 0;
	background-color: var(--diaper-bg);
	color: var(--diaper-fg);
	box-shadow:
		0 -4px 6px -1px var(--diaper-shadow-color),
		0 50px 0 var(--diaper-overdrag-fill-color);
	transition-property: transform, translate, scale;
	transition-duration: var(--diaper-duration);
	transition-timing-function: var(--diaper-easing);
	/* transition-timing-function: cubic-bezier(0.32, 0.72, 0, 1); */
	transform-origin: top;
	overflow: clip;
	overscroll-behavior-y: none;
	display: flex;
	flex-direction: column;
	will-change: transform, translate, scale;
	backface-visibility: hidden; /* prevent flicker on iOS */
	contain: strict; /* isolates the element */
	position: fixed;
	inset: 0;
	@starting-style {
		translate: 0 100%;
	}
	&[open] {
		max-width: 48rem;
		/* only top 2 dialogs have backdrop and box-shadow */
		&:not(:nth-last-of-type(-n + 2)) {
			--diaper-backdrop-opacity: 0;
			--diaper-shadow-color: #0000;
		}
		&:not(:last-of-type) {
			scale: calc(0.94 + var(--diaper-progress) * 0.06);
			transform: translateY(calc(var(--diaper-progress) * 8px - 8px));
		}
		&::backdrop {
			background-color: var(--diaper-backdrop-color);
			opacity: calc((1 - var(--diaper-backdrop-progress)) * var(--diaper-backdrop-opacity));
			transition: opacity;
			transition-duration: var(--diaper-duration);
			transition-timing-function: var(--diaper-easing);
			will-change: opacity;
		}
	}
}

	main.svelte-1s2mazd {
		display: grid;
		grid-template-areas: 'content';
		height: 100%;
	}
	section.svelte-1s2mazd {
		grid-area: content;
		transition-property: opacity, visibility;
		transition-duration: 0.9s;
		transition-behavior: allow-discrete;
		visibility: hidden;
		opacity: 0;
		&[data-visible] {
			visibility: visible;
			opacity: 1;
		}
		height: fit-content;
		max-height: 100%;
	}
	.handle.svelte-1s2mazd {
		width: 52px;
		height: 6px;
		background-color: #aaa7;
		border-radius: 3px;
		margin-inline: auto;
	}
	.headerOverlaysContent.svelte-1s2mazd {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		z-index: 50;
		backdrop-filter: blur(8px);
	}

	dialog.svelte-wwnxrq {
		position: relative;
		overflow: clip;
		width: 100%;
		max-width: 48rem;
		margin-inline: auto;
		padding: 0rem;
		border-radius: var(--diaper-radius);
		margin-top: calc(env(safe-area-inset-top) + 2rem);
		margin-bottom: calc(env(safe-area-inset-bottom) + 2rem);
		box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
		background-color: var(--diaper-bg);
		color: var(--diaper-fg);
		transition: transform var(--diaper-duration) var(--diaper-easing);
		transform: translateY(100vh);
		&[open] {
			transform: translateY(0);
			@starting-style {
				transform: translateY(100vh);
			}
		}
		&[data-closed] {
			transform: translateY(100vh);
		}
	}
	.dialog-container.svelte-wwnxrq {
		margin: 0;
		position: fixed;
		inset: 0;
		overflow-y: auto;
		scrollbar-width: none;
		scrollbar-color: transparent transparent;
		-webkit-scrollbar: hidden;
	}
	.dialog-backdrop.svelte-wwnxrq {
		margin: 0;
		position: fixed;
		inset: 0;
		background-color: rgba(0, 0, 0, 0.5);
		transition: opacity var(--diaper-duration) var(--diaper-easing);
		opacity: 1;
		@starting-style {
			opacity: 0;
		}
		&[data-closed] {
			opacity: 0;
		}
	}