@import url("root.css");
@import url("/fonts/SFProDisplay.css");

body > .processing
{
	position: fixed;
	visibility: hidden;
	backface-visibility: hidden;
	opacity: 0;
}

header.titlebar
{
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 40px;
    z-index: 100;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: max-content max-content auto;
    align-items: center;
    transition: var(--animation) transform;
    color: var(--foreground-page);
	pointer-events: none;
}
.header.titlebar:has(.controls)
{
	pointer-events: none;
}
header.titlebar.fullscreen
{
	transform: translateY(-100%);
	padding: 0 20px;
}
header.titlebar.fullscreen.snippet
{
	transform: translateY(0);
	padding: 0 20px;
}
header.titlebar.compact,
header.titlebar.compact.fullscreen,
header.titlebar.compact.fullscreen.snippet
{    
	grid-template-areas: "icon name controls";
	align-content: center;
    height: 41px;
    gap: 20px;
	backdrop-filter: var(--filter-blur);
	-webkit-backdrop-filter: var(--filter-blur);
    padding: 0 9px 0 17px;
}
header.titlebar.compact.fullscreen,
header.titlebar.compact.fullscreen.snippet
{    
    height: calc(41px + env(safe-area-inset-top));
    padding: env(safe-area-inset-top) calc(9px + env(safe-area-inset-right)) 0 calc(17px + env(safe-area-inset-left));
}
	header.titlebar:before,
	header.titlebar:after
	{
	    content: "";
	    display: block;
	    position: absolute;
	    background: transparent;
	    top: 0;
	    width: 100vw;
	    height: 100%;
        z-index: -1;
	    app-region: drag;
	}
	header.titlebar.compact:not(.fullscreen):before
	{
	    background: var(--gray-4);
	}
	header.titlebar.compact:after
	{
	    background: var(--gray-7);
	    opacity: 0.8;
	    border-bottom: 1px solid transparent;
	}
	header.titlebar img.icon 
	{
		width: 16px;
		height: 16px;
		pointer-events: none;    
		margin: 0 8px 0 var(--padding);
		align-self: end;   
		filter: grayscale(1) invert(0.5) brightness(100) brightness(0.55);
	}
	header.titlebar.compact img.icon
	{
		display: block;
		grid-area: icon;
		margin: 0;
		align-self: center;       
		height: 14px;
    	width: 14px;
		filter: grayscale(1) brightness(0);
	}
	[theme=dark]
	header.titlebar.compact img.icon,
	[ad-theme=dark]
	header.titlebar.compact img.icon
	{
		filter: grayscale(1) brightness(10);
	}
	header.titlebar .name 
	{
	    display: inline-grid;
	    grid-auto-flow: column;
	    gap: 8px;
	    padding: 0 var(--padding) 0 0;
	    height: 16px;
	    font-size: 16px;
	    font-family: var(--font-semibold);    
	    color: var(--foreground-description);
	    pointer-events: none;
	    align-self: end;
	    line-height: 1;
	}
	header.titlebar.compact .name 
	{
		display: grid;
		grid-auto-columns: max-content;
		gap: 0;
		grid-area: name;
		align-self: center;  
	    height: 14px;    
		font-size: 14px;
		padding: 0;
		color: var(--foreground-page);    
		font-family: var(--font-semibold);
	}
		header.titlebar .name span 
		{
			display: inline-block;
			height: 16px;
			align-self: end;
		}
	header.titlebar .controls
	{
		-webkit-app-region: drag;
		display: grid;
		grid-auto-flow: column;
		grid-auto-columns: max-content auto max-content;
		grid-template-areas: "primary content secondary";
		position: absolute;
		top: 0;
		left: 320px;
		right: 0;
		height: 60px;
		background: var(--gray-7);
		border-bottom: 1px solid var(--gray-5);
		align-items: center;
		align-content: center;
		padding: var(--padding) calc(100vw - env(titlebar-area-width, 100vw) + calc(var(--padding) - 9px)) var(--padding) calc(var(--padding) - 9px);
		transition: 0.25s opacity;
	}
	header.titlebar.compact .controls
	{
		height: 100%;
		position: relative;
		top: unset;
		left: unset;
		right: unset;
		padding: 0;    
		margin: 0 0 0 -8px;
		background: transparent;
	    border-bottom: 0;
	}
		header.titlebar .controls .primary,
		header.titlebar .controls .secondary
		{
		    display: grid;
		    grid-auto-flow: column;
		    grid-auto-columns: max-content;
			gap: 2px;
		}
		header.titlebar .controls .primary
		{
			grid-area: primary;
		}
		header.titlebar .controls .secondary
		{
			grid-area: secondary;
		}
		header.titlebar .controls .content
		{
			grid-area: content;
		}
		header.titlebar .controls button
		{
		    pointer-events: all;
		    font-size: 16px;
		    min-width: 35px;
		    height: 35px;
		    display: grid;
		    -webkit-app-region: no-drag;
		    align-items: center;
		    justify-content: center;
		}
		header.titlebar .controls *:where(.primary, .secondary) button
		{
			gap: 0.15em;
		}
			header.titlebar .controls *:where(.primary, .secondary) button > .icon ~ span
			{
				font-size: 1em;
			}
			header.titlebar .controls *:where(.primary, .secondary) button > .icon:has(~ span) 
			{
				font-size: 1em;
				font-weight: bold;
			}
		header.titlebar.compact .controls button
		{
			color: var(--foreground-page);
		    font-size: 14px;
		    min-width: 40px;
		    height: 40px;
		}

.root 
{
	background: var(--background-page);
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	overflow: hidden;
	display: grid;
    grid-template-areas: "Navigation Content";
	grid-auto-columns: 320px auto;
}
	.root nav
	{
		background: var(--background-navigation);
		padding: var(--padding);
		box-shadow: inset -10px 0 5px -10px var(--border-sidebar);
		grid-area: Navigation;
	    overflow: hidden;
		position: relative;
	}
	.titlebar + .root nav
	{
		padding-top: calc(20px + var(--padding));
	}
		.root nav h1
		{
			margin-bottom: 1rem;
		}
		.root nav > .desktop
		{
			display: grid;
			grid-template-areas:
				"search"
				"navigation"
				"footer";
			grid-auto-rows: max-content auto max-content;
			height: 100%;
		}
			.root nav > .desktop > input[type=search],
			.root nav > .desktop > label:has(input[type=search])
			{
				grid-area: search;
			}
			.root nav > .desktop > .navigation
			{
				grid-area: navigation;
				overflow-x: hidden;
				overflow-y: auto;
				margin: 0 -30px;
				padding: 0 30px;    
				scrollbar-width: thin;
			}
			.root nav > .desktop > .footer
			{
				grid-area: footer;
			}
		.root nav > .mobile
		{
			display: none;
		}
		.root nav .InputContainer_Textbox:has(input[type=search])
		{
			width: calc(100% + (0.75rem * 2));
			margin: 1em -0.75rem 0;
		}
			.root nav .InputContainer_Textbox:has(input[type=search]):before
			{
				left: 0.75rem;
			}
			.root nav .InputContainer_Textbox input[type=search]
			{
				border: 0;    
				padding: 0.45rem 0.75rem;    
				padding-left: calc(0.75rem + (0.75rem * 2));
			}
		.root nav .account
		{
		    display: grid;
		    grid-auto-flow: column;
		    grid-auto-columns: 50px auto;
		    gap: 0.75rem;
		    border-radius: 10px;
		    align-items: center;
		    background: transparent;
		    padding: 0.5rem 0.75rem;
		    margin: 0 -0.75rem;
		}
		.root nav .account:first-child
		{
			margin-top: 0.5rem;
		}
		.root nav .account:hover
		{
		    background: var(--overlay-6);
		}
		.root nav .account:active
		{
		    background: var(--overlay-5);
		}
			.root nav .account img.picture
			{
				width: 50px;
				height: 50px;
				border-radius: 100%;
			}
			.root nav .account .details
			{
				display: grid;
    			gap: 0.1em;	
			}
				.root nav .account .details .name
				{    
					font-family: var(--font-bold);
    				font-size: calc(0.65* var(--ratio));
				}
				.root nav .account .details .description
				{
    				font-size: calc(0.55* var(--ratio));
    				color: var(--foreground-description);
				}
		.root nav .desktop .navigation > a:first-child
		{
			margin-top: 1rem;
		}
		.root nav a
		{
		    display: grid;
		    grid-auto-flow: column;
		    grid-auto-columns: 1em auto;
		    gap: 1rem;
		    padding: 0.5rem 0.75rem;
		    margin: 0.2em -0.75rem;
		    border-radius: 8px;
			align-items: center;
            transition: 0.05s background-color;
		}
		.root nav a:hover
		{
			background-color: var(--background-input-hover);
		}
		.root nav a:active
		{
			background-color: var(--background-input-active);
		}
		.root nav a.active
		{
		    background-image: linear-gradient(var(--background-input-hover) 100%, transparent 100%);
		}
			.root nav a span
			{
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}
			.root nav a .icon
			{
				font-family: var(--font-icon);
				color: var(--accent);
				justify-self: center;
			}
			.root nav a img
			{
				width: 100%;
				aspect-ratio: 1 / 1;
				border-radius: 100%;
				border: 1px solid var(--border-context);
				transform: scale(1.3);
			}
			.root nav a.active .icon
			{
			}
		.root nav .separator
		{
		    margin: 2rem 0 0;
		    font-family: var(--font-semibold);
		    font-size: calc(0.55* var(--ratio));
		    color: var(--foreground-description);
		}
	.titlebar:has(.controls) + .root .main
	{
		margin-top: 60px;
	}
	.root .main
	{
    	padding: var(--padding);
	    overflow: hidden;
	    overflow-y: auto;
		grid-area: Content;
		z-index: 1;
	}
	.root .main:has(> .activity)
	{
		display: grid;
    	padding: 0;
	    overflow: hidden;    
		grid-auto-rows: 100%;
	}

.activity,
.activity > section
{
	border-radius: inherit;
	background: inherit;
	display: grid;        
	grid-auto-columns: 100%; 
	grid-auto-rows: max-content;
	overflow: hidden;
	overflow-y: auto;
	--titleopacity: 1;
	z-index: 1;
}
.activity:has(> section)
{      
	grid-template-areas: "section";
	grid-auto-rows: 100%;
	overflow: hidden;
}
.activity > section
{
	transform: translateX(100%);
	grid-area: section;
	visibility: hidden;
	transition: 0.6s var(--key-animation) transform, 0.5s filter, 0.1s visibility 0.6s;
}
.activity > section.active
{
	visibility: visible;
	transform: translateX(0%);
	transition: 0.6s var(--key-animation) transform, 0.5s filter, 0s visibility;
}
.activity > section.overlapped
{
	transform: translateX(-30%);
	filter: brightness(0.75);
}
.activity.grid
{
	background: var(--background-activity-grid);
}
	.activity > .header,
	.activity > section > .header
	{
		position: sticky;
		top: 0;
		display: grid;
		grid-template-areas: 
			"a"
			"buttons"
			"title"
			"o";
		grid-auto-rows: env(safe-area-inset-top) 2.25em max-content calc(-20px + var(--padding));
		padding: var(--padding);
		transition: 0.5s var(--key-animation) transform, 0.15s opacity;
		align-items: start;    
		z-index: 50;
		pointer-events: none;
	}
	.activity > .header:has(> .search, > [type=search], > label),
	.activity > section > .header:has(> .search, > [type=search], > label)
	{
		grid-template-areas: 
			"buttons"
			"title"
			"search";
		grid-auto-rows: 2.25em max-content max-content;
	}
	.activity > .header:not(:has(> .search)),
	.activity > section > .header:not(:has(> .search))
	{
		margin-bottom: calc((var(--padding) - 20px) * -1);
	}
	.activity > .header.cascaded,
	.activity > section > .header.cascaded
	{
		grid-template-areas: "buttons";
		grid-auto-rows: 1em;
	}
	.activity > .header.cascaded:has(> .search, > [type=search], > label),
	.activity > section > .header.cascaded:has(> .search, > [type=search], > label)
	{
		grid-template-areas: 
			"buttons"
			"search";
		grid-auto-rows: 1em max-content;
	}
	.activity.searching > .header,
	.activity > section.searching > .header
	{
		transform: translateY(var(--searchtransform));
	}
	.activity:not(.searching) > .header:not(.cascaded),
	.activity > section:not(.searching) > .header:not(.cascaded)
	{    
		top: var(--contenttransform);
	}
		.activity > .header > *,
		.activity > section > .header > *
		{
			pointer-events: all;
		}
		.activity > .header:before,
		.activity > section > .header:before
		{
			content: "";
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			display: block;
			background: var(--background-activity-header);
			opacity: calc(0.3 - var(--titleopacity));
			backdrop-filter: var(--filter-blur);
			z-index: -1;
		}
		.activity.grid > .header:before,
		.activity > section.grid > .header:before
		{
			background: var(--background-activity-header-grid);
		}
		.activity.scrolling > .header:before,
		.activity > section.scrolling > .header:before
		{
			pointer-events: all;
		}
		.activity > .header > .buttons,
		.activity > section > .header > .buttons
		{
			grid-area: buttons;
			display: grid;
			grid-auto-flow: column;
			transition: inherit;
			grid-template-columns: max-content;
			grid-auto-rows: 1em;
			height: 1em;
			align-items: center;
		}
		.activity.searching > .header > .buttons,
		.activity > section.searching > .header > .buttons
		{
			opacity: 0;
		}
		.activity:not(.searching) > .header:not(.cascaded) .buttons,
		.activity > section:not(.searching) > .header:not(.cascaded) .buttons
		{
			position: sticky;
			top: var(--padding);
		}
		.activity > .header > .buttons:has(button:nth-child(3)),
		.activity > section  > .header > .buttons:has(button:nth-child(3))
		{
			grid-template-columns: max-content auto repeat(10, max-content);
		}
		.activity > .header > .buttons:has(> .controls),
		.activity > section > .header > .buttons:has(> .controls)
		{
			grid-template-columns: max-content auto repeat(10, 0);
			gap: 1ch;
		}
			.activity > .header > .buttons.dynamic button,
			.activity > section > .header > .buttons.dynamic button
			{
				--scale: min(calc(0.3 - var(--titleopacity)), 1);
				--color: brightness(var(--scale));
				filter: var(--color);
			}
			[theme=dark] .activity > .header > .buttons.dynamic button,
			.activity > .header > [theme=dark].buttons.dynamic button,
			[theme=dark] .activity > section > .header > .buttons.dynamic button,
			.activity > section > .header > [theme=dark].buttons.dynamic button
			{
				--color: saturate(min(calc(var(--scale) * 2), 1)) brightness(max(calc(3 - var(--scale) * 3), 1));
			}
			.activity > .header > [theme=dark].buttons.dynamic button:hover,
			.activity > section > .header > [theme=dark].buttons.dynamic button:hover
			{
				filter: var(--color) var(--filter-accent-plain-hover);
			}
			.activity > .header > [theme=dark].buttons.dynamic button:active,
			.activity > section > .header > [theme=dark].buttons.dynamic button:active
			{
				filter: var(--color) var(--filter-accent-plain-active);
			}
			.activity > .header > .buttons button,
			.activity > section > .header > .buttons button
			{
				margin: -7px -12px;
				background: transparent;
				color: var(--accent);
				line-height: 1em;
			}
			.activity > .header > .buttons button:has(> .icon:first-child):not(:has(> span:not(.icon))),
			.activity > section > .header > .buttons button:has(> .icon:first-child):not(:has(> span:not(.icon)))
			{
				transform: scale(1.2);
				transform-origin: left;
			}
			.activity > .header > .buttons button:has(> .icon:first-child):not(:has(> span:not(.icon))):not(:first-child),
			.activity > section > .header > .buttons button:has(> .icon:first-child):not(:has(> span:not(.icon))):not(:first-child)
			{
				transform-origin: right;
			}
			.activity > .header > .buttons button:not(:first-child),
			.activity > section > .header > .buttons button:not(:first-child)
			{
				margin-left: 12px;
			}
			.activity > .header > .buttons:not(:has(> div)) button:not(:first-child),
			.activity > section > .header > .buttons:not(:has(> div)) button:not(:first-child)
			{
				opacity: 0;
			}
			.activity > .header > .buttons button:has(> .progressring),
			.activity > section > .header > .buttons button:has(> .progressring)
			{
				position: relative;
			}
				.activity > .header > .buttons button:has(> .progressring) > .progressring,
				.activity > section > .header > .buttons button:has(> .progressring) > .progressring
				{
					width: 1em;
					position: absolute;
					top: 50%;
					left: 50%;
					transform: translate(-50%, -50%);
				}
			:where(.loading .activity > .header, .activity.loading > .header) > .buttons button:has(> .progressring),
			:where(.loading .activity > section > .header, .activity.loading > section > .header, .activity > section.loading > .header) > .buttons button:has(> .progressring)
			{
				pointer-events: none;
			}
				:where(.loading .activity > .header, .activity.loading > .header) > .buttons button:has(> .progressring) > span,
				:where(.loading .activity > section > .header, .activity.loading > section > .header, .activity > section.loading > .header) > .buttons button:has(> .progressring) > span
				{
					opacity: 0.3;
				}
				:not(
					:where(
						.loading .activity > .header, 
						.activity.loading > .header,
						.loading .activity > section > .header, 
						.activity.loading > section > .header, 
						.activity > section.loading > .header
					)
				) > .buttons button:has(> .progressring) > .progressring
				{
					display: none;
				}
			.activity > .header > .buttons button.back,
			.activity > section > .header > .buttons button.back
			{
				gap: 0.15em;
				margin-left: calc(-1ch - 0.15em - 12px);
			}
				.activity > .header > .buttons button.back:before,
				.activity > section > .header > .buttons button.back:before
				{
					content: "\ef38";
					font-family: var(--font-icon);
					font-weight: bold;
				}
			.activity > .header > .buttons > .controls,
			.activity > section > .header > .buttons > .controls
			{    
				display: grid;
				height: calc(var(--padding)* 2 + 1em);
				align-items: center;
			}
		.activity > .header .title,
		.activity > section > .header .title
		{
			grid-area: title;
			position: relative;
			height: calc(100% + 0.25em);
			font-family: var(--font-bold);
			transition: inherit;
			pointer-events: none;
		}
		.activity > .header.cascaded .title,
		.activity > section > .header.cascaded .title
		{
			grid-area: buttons;
			line-height: 1em;
			width: 100%;
		}
		.activity > .header:has(> .buttons > .controls) .title,
		.activity > section > .header:has(> .buttons > .controls) .title
		{
			opacity: 0;
		}
		.activity > .header .title:not([ad-activitytitle]),
		.activity > section > .header .title:not([ad-activitytitle])
		{
			font-size: 2.25em;
			height: 1.25em;
			line-height: 1em;
			opacity: var(--titleopacity);
		}
		.activity > .header.cascaded .title:not([ad-activitytitle]),
		.activity > section > .header.cascaded .title:not([ad-activitytitle])
		{
			font-size: 1em;  
			height: 1.25em;
			line-height: 1em;
			opacity: 0;
			transition: none;
		}
			.activity > .header:not(.cascaded) .title[ad-activitytitle]:before,
			.activity > section > .header:not(.cascaded) .title[ad-activitytitle]:before
			{
				content: attr(ad-activitytitle);
				display: block;
				overflow: hidden;
				font-size: 2.25em;
				height: 100%;
				line-height: 1em;
				opacity: var(--titleopacity);
			}
			.activity > .header .title[ad-activitytitle]:after,
			.activity > section > .header .title[ad-activitytitle]:after
			{
				content: attr(ad-activitytitle);
				display: block;
				position: absolute;
				left: 50%;      
				bottom: calc(20px - var(--padding));
				width: max-content;
				font-family: var(--font-semibold);
				font-size: 1em;    
				height: 1.25em;
				line-height: 1em;
				transform: translate(-50%, 0);
				text-align: center;
				overflow: hidden;
				opacity: calc(0.3 - calc(var(--titleopacity) * 5 / 1));
			}
			.activity > .header.cascaded .title[ad-activitytitle]:after,
			.activity > section > .header.cascaded .title[ad-activitytitle]:after
			{
				top: 0;
				bottom: unset;
			}
			.activity > .header.cascaded .title[ad-activitytitle]:not(.hide):after,
			.activity > section > .header.cascaded .title[ad-activitytitle]:not(.hide):after
			{
				opacity: 1;
			}
			.activity > .header .title[ad-activitytitle].collapsed:after,
			.activity > section > .header .title[ad-activitytitle].collapsed:after
			{
				opacity: 0;
			}
		.activity.searching > .header .title,
		.activity > section.searching > .header .title
		{
			opacity: 0;
		}
		.activity > .header > input,
		.activity > section > .header > input
		{
			border: 0;
			padding: 0.5em 1em 0.5em calc(0.725ch + 2em);
			border-radius: 10px;
			margin: calc(-20px + var(--padding) + 1.25em) 0 10px;
		}
		.activity > .header > label,
		.activity > section > .header > label
		{
			margin: calc(-20px + var(--padding) + 1.25em) 0 10px;
		}
		.activity > .header > label input,
		.activity > section > .header > label input
		{
			border: 0;
			padding: 0.5em 1em 0.5em calc(0.725ch + 2em);
			border-radius: 10px;
		}
		.activity > .header.cascaded > input,
		.activity > .header.cascaded > label input,
		.activity > section > .header.cascaded > input,
		.activity > section > .header.cascaded > label input
		{
			margin-top: 1.5em;
		}
		.activity > .header .search,
		.activity > section > .header .search
		{
			grid-area: search;
			position: relative;
			display: grid;
			grid-auto-flow: column;
			grid-auto-columns: 100%;
			--buttonbar: 0;    
			margin: calc(-20px + var(--padding) + 1.25em) 0 0;
		}
		.activity > .header.cascaded .search,
		.activity > section > .header.cascaded .search
		{
			margin-top: 1.5em;
		}
			.activity > .header .search input[type=search],
			.activity > section > .header .search input[type=search]
			{
				position: relative;
				z-index: 1;
				border: 0;
				padding: 0.5em 1em 0.5em calc(0.725ch + 2em);
				border-radius: 10px;
				width: 100%;
				transition: var(--animation) width;
			}
			.activity.searching > .header .search input[type=search],
			.activity.searching > section > .header .search input[type=search]
			{
				width: calc(100% - var(--searchbutton) - 1em);
			}
			.activity > .header .search button,
			.activity > section > .header .search button
			{    
				position: absolute;
				top: 50%;
				right: 0;
				padding: 0;
				transition: 0.1s opacity;
				transform: translate(0, -50%);
				opacity: 0;
				pointer-events: none;
			}
			.activity.searching > .header .search button,
			.activity > section.searching > .header .search button
			{    
				transition: 0.15s opacity 0.035s;
				opacity: 1;
				pointer-events: all;
			}
	.activity > .content,
	.activity > section > .content
	{
		padding: var(--padding);
		padding-top: 0;
		margin-top: var(--searchtransform);
		transform: translateY(calc(var(--searchtransform) * -1));
		transition: 0.5s var(--key-animation) transform;
	}
	.activity.scrollable:not(:has(> .header.cascaded)) > .content::after,
	.activity > section.scrollable:not(:has(> .header.cascaded)) > .content::after
	{
		content: "";
		display: block;
		height: var(--fillheight);
	}
	.activity.searching > .content,
	.activity > section.searching > .content
	{
		transform: none;
	}
		.activity > .content > section[ad-header],
		.activity > section > .content > section[ad-header]
		{
			margin-bottom: calc(2 * var(--padding));
		}
		.activity > .content > section[ad-header]:last-child,
		.activity > section > .content > section[ad-header]:last-child
		{
			margin-bottom: 0;
		}
			.activity > .content > section[ad-header] > button.header,
			.activity > section > .content > section[ad-header] > button.header
			{
				margin: -7px -12px 7px;
				font-size: 1.2em;
				font-weight: 600;
				gap: 0.2ch;
			}
			.activity > .content > section[ad-header] > button.header:not(.clickable:hover, .clickable:active),
			.activity > section > .content > section[ad-header] > button.header:not(.clickable:hover, .clickable:active)
			{
				background: transparent;
			}
			.activity > .content > section[ad-header] > button.header.clickable::after,
			.activity > section > .content > section[ad-header] > button.header.clickable::after
			{
				content: "\ef59";
				font-family: var(--font-icon);
				font-weight: bold;
				font-size: 0.8em;
				color: var(--foreground-description);
			}


.notifications 
{
	position: fixed;
	top: var(--padding);
	right: var(--padding);
	display: flex;
	gap: 10px;
	flex-direction: column;
	z-index: 105;
}
	.notifications .notification 
	{
	    display: grid;
	    grid-auto-flow: column;
	    grid-auto-columns: auto max-content;
	    background: var(--background-field-blur);
	    backdrop-filter: var(--filter-blur);
	    -webkit-backdrop-filter: var(--filter-blur);
	    color: var(--foreground-page);
	    border-radius: 15px;
	    padding: 12px 15px;
	    gap: 15px;
	    box-shadow: var(--filter-shadow);
	    min-width: 300px;
	    max-width: calc(100vw - (var(--padding) * 2));
	    animation: 0.7s var(--key-animation) notificationIn;
	    align-items: center;
	    overflow: hidden;
	}
	.notifications .notification:has(.icon)
	{
	    grid-auto-columns: 42px auto max-content;
	}
    .notifications .notification.close_auto 
    {
        transform: translateX(calc(100% + var(--padding)));
        animation: 0.7s var(--key-animation) notificationOut_auto;
        pointer-events: none;
    }
    .notifications .notification.close_banner 
    {
        animation: 0.6s var(--key-animation) notificationOut_banner;
        animation-timing-function: cubic-bezier(0, 1, 0, 1);
        opacity: 0;
        pointer-events: none;
    }
    .notifications .notification.close_action 
    {
        animation: 0.6s notificationOut_action;
        animation-timing-function: cubic-bezier(0, 0.5, 0, 0.5);
        opacity: 0;
        pointer-events: none;
    }
		.notifications .notification .icon 
		{
		    font-size: 2.5rem;
		    color: var(--foreground-description);
		}
		.notifications .notification .message 
		{
			max-width: 300px;
		}
		   	.notifications .notification .message .title 
		   	{
			    display: -webkit-box;
				font-family: var(--font-bold);
			    max-height: calc(2*(1em + 5px));
			    overflow: hidden;
			    text-overflow: ellipsis;
			    -webkit-line-clamp: 2;
			    -webkit-box-orient: vertical;
			}
		   	.notifications .notification .message .text 
		   	{
			    display: -webkit-box;
			    max-height: calc(2*(1em + 5px));
			    overflow: hidden;
			    text-overflow: ellipsis;
			    -webkit-line-clamp: 2;
			    -webkit-box-orient: vertical;
			}
		.notifications .notification .actions
		{
			display: none;
		}
		.notifications .notification .actions:has(button) 
		{
		    display: grid;
		    border-left: 1px solid var(--border-context);
		    margin: -15px -15px -15px 0;
		    height: calc(100% + 30px);
		}
		    .notifications .notification .actions button 
		    {
				border-radius: 0;
				border-bottom: 1px solid var(--border-context);
		    }
		    .notifications .notification .actions button:last-child
		    {
				border-bottom: 0;
		    }
@keyframes notificationIn 
{
    0% 
    {
        transform: translateX(calc(100% + var(--padding)));
    }
    100% 
    {
        transform: none;
    }
}
@keyframes notificationOut_auto 
{
    0% 
    {
        transform: none;
    }
    100% 
    {
        transform: translateX(calc(100% + var(--padding)));
        box-shadow: none;
    }
}
@keyframes notificationOut_banner 
{
    0% 
    {
        transform: none;
        opacity: 1;
    }
    80% 
    {
        animation-timing-function: ease-in-out;
        transform: scale(0.95);
        opacity: 1;
    }
    100% 
    {
        transform: scale(0.95);
        opacity: 0;
    }
}
@keyframes notificationOut_action 
{
    0% 
    {
        opacity: 1;
        transform: none;
    }
    20% 
    {
        opacity: 1;
        transform: scale(0.95);
    }
    40% 
    {
        opacity: 1;
        transform: scale(0.95);
        animation-timing-function: cubic-bezier(0.5, 0, 0.9, 0);
    }
    100% 
    {
        opacity: 1;
        transform: scale(0.95) translateX(calc(100% + var(--padding)));
        box-shadow: none;
    }
}


.popover
{
    position: fixed;
    top: 0;
	left: var(--left, unset);    
	right: var(--right, unset);
	bottom: 0;
	width: 375px;
	max-width: 100vw;
    pointer-events: none;
	z-index: 101;
	transition: 
		var(--animation-bounce) transform,
		0.125s opacity 0.05s,
		0.1s visibility 0.35s;
	--padding: 18px;
	visibility: hidden;
}
.popover.opened
{
	pointer-events: all;
	filter: drop-shadow(0 0 1px var(--border-popover)) drop-shadow(0 0 9px #00000030);
	transition: 
		var(--animation-bounce) transform,
		0.125s opacity,
		0.1s visibility 0s;
	visibility: visible;
}
	.popover > .container
	{
		position: fixed;
		top: var(--top, unset);
		bottom: var(--bottom, unset);
		display: grid;
		grid-template-areas: "title" "content";
		grid-auto-rows: max-content auto;
		width: inherit;
		max-width: inherit;
		max-height: 100vh;
		background: var(--background-popover);
		backface-visibility: hidden;
		-webkit-backface-visibility: hidden;
		opacity: 0;
		--origin: 0;
		transition: inherit;
		border-radius: 20px;
		padding: var(--arrow-height) 0 0 0;
		transform: translate3d(var(--origin), 0, 0.1px) scale(0.7);
		--arrow-height: 15px;
		--corner-height: 30px;
		--mask-body-position-y: 15px;
		--mask-body-layout: 
			url(cutouts/popover_cornertopleft.svg), url(cutouts/popover_body.svg), url(cutouts/popover_cornertopright.svg),
			url(cutouts/popover_body.svg),
			url(cutouts/popover_cornerbottomleft.svg), url(cutouts/popover_body.svg), url(cutouts/popover_cornerbottomright.svg);
		--mask-body-size:
			var(--corner-height), calc(100% - var(--corner-height) * 2 + 10px) var(--corner-height), var(--corner-height),
			100% calc(100% - var(--corner-height) * 2 - var(--arrow-height) + 10px),
			var(--corner-height), calc(100% - var(--corner-height) * 2 + 10px) var(--corner-height), var(--corner-height);
		--mask-body-position: 
			0px var(--mask-body-position-y), calc(var(--corner-height) - 5px) var(--mask-body-position-y), 100% var(--mask-body-position-y),
			100% calc(var(--corner-height) + var(--mask-body-position-y) - 5px),
			0px calc(100% - (var(--arrow-height) - var(--mask-body-position-y))), calc(var(--corner-height) - 5px) calc(100% - (var(--arrow-height) - var(--mask-body-position-y))), 100% calc(100% - (var(--arrow-height) - var(--mask-body-position-y)));
		mask-image: var(--mask-body-layout);
		mask-size: var(--mask-body-size);
		mask-position: var(--mask-body-position);
		mask-repeat: no-repeat;
		-webkit-mask-image: var(--mask-body-layout);
		-webkit-mask-size: var(--mask-body-size);
		-webkit-mask-position: var(--mask-body-position);
		-webkit-mask-repeat: no-repeat;
	}
	.popover > .container:has(> .title),
	.popover > .container:has(> .activity)
	{
		background: var(--background-popover-grid);
		--background-activity-header: var(--background-activity-header-grid);
	}
	.popover > .container:has(> .activity)
	{
		grid-template-areas: "content";
		grid-auto-rows: auto;
	}
	.popover.opened > .container
	{
		opacity: 1;
		transform: none;
	}
	.popover.top > .container
	{
		padding: var(--arrow-height) 0 0 0;
		--arrow-left: 0;	
		--mask-body-position-y: var(--arrow-height);		
		mask-image: url(cutouts/popover_arrowup.svg), var(--mask-body-layout);
		mask-size: auto var(--arrow-height), var(--mask-body-size);
		mask-position: var(--arrow-left) 0, var(--mask-body-position);
		mask-repeat: no-repeat;
		-webkit-mask-image: url(cutouts/popover_arrowup.svg), var(--mask-body-layout);
		-webkit-mask-size: auto var(--arrow-height), var(--mask-body-size);
		-webkit-mask-position: var(--arrow-left) 0, var(--mask-body-position);
		-webkit-mask-repeat: no-repeat;
	}
	.popover.top.right > .container
	{
		--origin: -11px;
		--arrow-left: calc(100% - 20px);
		transform-origin: top right;
	}
	.popover.top.center > .container
	{
		--origin: 0;
		--arrow-left: 50%;
		transform-origin: top;
	}
	.popover.top.left > .container
	{
		--origin: 11px;
		--arrow-left: 20px;
		transform-origin: top left;
	}
	.popover.bottom > .container
	{
		padding: 0 0 var(--arrow-height) 0;
		--mask-body-position-y: 0px;
		mask-image: var(--mask-body-layout), url(cutouts/popover_arrowdown.svg);
		mask-size: var(--mask-body-size), auto var(--arrow-height);
		mask-position: var(--mask-body-position), var(--arrow-left) 100%;
		mask-repeat: no-repeat;
		-webkit-mask-image: var(--mask-body-layout), url(cutouts/popover_arrowdown.svg);
		-webkit-mask-size: var(--mask-body-size), auto var(--arrow-height);
		-webkit-mask-position: var(--mask-body-position), var(--arrow-left) 100%;
		-webkit-mask-repeat: no-repeat;
	}
	.popover.bottom.right > .container
	{
		--origin: -11px;
		--arrow-left: calc(100% - 20px);
		transform-origin: bottom right;
	}
	.popover.bottom.center > .container
	{
		--origin: 0;
		--arrow-left: 50%;
		transform-origin: bottom;
	}
	.popover.bottom.left > .container
	{
		--origin: 11px;
		--arrow-left: 20px;
		transform-origin: bottom left;
	}
	.popover > .dim
	{
	    display: block;
	    position: fixed;
	    top: -100vh;
	    left: -100vw;
	    right: -100vw;
	    bottom: -100vh;
	    background: transparent;
	    transition: 0.25s opacity;
	    z-index: -2;
	}
	.popover:not(.left):not(.right):not(.center):not(.top):not(.bottom) > .dim
	{
		background: var(--dim);
	    opacity: 0;
	    transition: 0.25s opacity;
	}
	.popover:not(.left):not(.right):not(.center):not(.top):not(.bottom).opened > .dim
	{
	    opacity: 0.5;
	}
	.popover > .container > .title
	{
		position: relative;
	    text-align: center;
		margin: -15px 0 0;
		padding: 21px 6px 6px 6px;
    	height: 60px;
    	grid-area: title;
		transition: 0.15s background;
		background: transparent;
	}
	.popover > .container > .title.collapsed
	{   
		background: var(--overlay-7);
	}
		.popover > .container > .title > span
		{
		    position: absolute;
		    top: 15px;
		    left: 0;
			right: 0;
			bottom: 0;
		    display: inline-flex;
			font-family: var(--font-semibold);
		    align-items: center;
		    justify-content: center;
			pointer-events: none;
		}
		.popover > .container > .title > .group
		{
			display: inline-grid;
		    align-items: center;
		    justify-content: center;
		    grid-auto-flow: column;
		}
		.popover > .container > .title > button:first-child,
		.popover > .container > .title > .group:first-child
		{
			float: left;
		}
		.popover > .container > .title > button:last-child,
		.popover > .container > .title > .group:last-child
		{
			float: right;
		}
	.popover > .container > .content
	{
		position: relative;
		padding: var(--padding);
		overflow-x: hidden;
		overflow-y: auto;
		max-width: 80vh;
		max-height: var(--max-height);
	    grid-area: content;
		scrollbar-width: thin;
	}
		.popover > .container > .content > .pivot > .pivottabs
		{
			margin: 0 calc(var(--padding) + 10px);
		}
	.popover > .container > .activity
	{
		max-height: var(--max-height);
	}
	.popover > .container > .activity,
	.popover > .container > .activity > section
	{
		scrollbar-width: thin;
	}
	.popover.top > .container > .activity,
	.popover.top > .container > .activity > section
	{
		margin-top: -15px;
		padding-top: 15px;
	}
	.popover.bottom > .container > .activity,
	.popover.bottom > .container > .activity > section
	{
		margin-bottom: -15px;
		padding-bottom: 15px;
	}
		.popover > .container > .activity > .header::before,
		.popover > .container > .activity > section > .header::before
		{
			top: -15px;
		}
		.popover > .container > .activity > .content,
		.popover > .container > .activity > section > .content
		{
			margin-bottom: calc(var(--searchtransform) * -1);
		}
			.popover > .container > .activity > .content > .pivot > .pivottabs,
			.popover > .container > .activity > section > .content > .pivot > .pivottabs
			{
				margin: 0 calc(var(--padding) + 10px);
			}


.sheet
{
    position: fixed;
    top: 50%;
    left: 50%; 
    width: 375px;
    border-radius: 15px;
    background: var(--background-sheet);
    box-shadow: var(--filter-shadow);
    -webkit-backdrop-filter: var(--filter-blur);
    backdrop-filter: var(--filter-blur);
    -webkit-backface-visibility: hidden;
	backface-visibility: hidden;
    z-index: 101;
    opacity: 0;
    pointer-events: none;
	transition: 
		var(--animation-bounce) transform,
		0.125s opacity 0.05s,
		0.1s visibility 0.35s;
	transform: translate3d(-50%, -50%, 0.1px) scale(0.7);
	--padding: 18px;
	visibility: hidden;
}
.sheet.opened
{
	pointer-events: all;
	opacity: 1;
	transition: 
		var(--animation-bounce) transform,
		0.125s opacity,
		0.1s visibility 0s;
    transform:  translate3d(-50%, -50%, 0.1px);
	visibility: visible;
}
	.sheet > .dim
	{
	    display: block;
	    position: fixed;
	    top: -100vh;
	    left: -100vw;
	    right: -100vw;
	    bottom: -100vh;
	    background: var(--dim);
	    opacity: 0;
	    transition: 0.25s opacity;
	    z-index: -2;
	    backdrop-filter: brightness(2.5);
	    -webkit-backdrop-filter: brightness(2.5);
	}
	.sheet.opened > .dim
	{
	    opacity: 0.5;
	}
	.sheet > .control
	{
	    position: absolute;
	    top: 0;
	    left: 0;
	    right: 0;
		z-index: 5;
		height: 35px;
	}
		.sheet > .control > .bar
		{
			display: none;
		}
		.sheet > .control > .close
		{
			display: grid;
		    position: absolute;
		    top: var(--padding);
		    right: var(--padding);
		    background: var(--background-input);
	        backdrop-filter: blur(5px) brightness(1.5) saturate(0.5);
	        -webkit-backdrop-filter: blur(5px) brightness(1.5) saturate(0.5);
		    color: var(--overlay-1);
		    font-family: var(--font-icon);
		    font-size: 9px;
		    border-radius: 100%;
		    width: 25px;
		    height: 25px;
		    align-items: center;
		    justify-content: center;
		    position: absolute;
		}
		[theme=dark]
		.sheet > .control > .close,
		[ad-theme=dark]
		.sheet > .control > .close
		{
	        backdrop-filter: blur(5px) brightness(0.75);
	        -webkit-backdrop-filter: blur(5px) brightness(0.75);
		}
		.sheet > .control > .close:hover
		{
		    background: var(--background-input-hover);
		    color: var(--foreground-page);
		}
		.sheet > .control > .close:active
		{
		    background: var(--background-input-active);
		    color: var(--overlay-1);
		}
			.sheet > .control > .close:after
			{
				content: "\f72c";
			}
	.sheet > .content
	{
		position: relative;
		padding: var(--padding);
		overflow-x: hidden;
		overflow-y: auto;
		max-width: 100vw;
		max-height: calc(100vh - 100px);
		max-height: calc(100dvh - 100px);
		min-height: 350px;
	    border-radius: inherit;
	}
		.sheet > .content > .title
		{
			font-size: 1.325em;
			font-family: var(--font-bold);
		}

.actionsheet
{
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	pointer-events: none;
	z-index: 102;
	transition: var(--animation-bounce) transform, 0.125s opacity;
}
.actionsheet.opened 
{
    pointer-events: all;
}
	.actionsheet > .dim
	{
		display: block;
		position: fixed;
		top: -100vh;
		left: -100vw;
		right: -100vw;
		bottom: -100vh;
		background: rgba(0, 0, 0, 0.6);
		transition: 0.25s opacity;
		z-index: -2;
		opacity: 0;
	}
	.actionsheet.opened > .dim
	{
		opacity: 1;
	}
	.actionsheet > .container 
	{
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%) scale(0.5);
        transition: inherit;
		opacity: 0;
		width: 100%;
		max-width: 320px;
		background: var(--background-context);
		backdrop-filter: var(--filter-blur);
		border-radius: 15px;
		overflow: hidden;
	}
	.actionsheet.opened > .container 
	{
		transform: translate(-50%, -50%);
		opacity: 1;
	}
		.actionsheet > .container > .header
		{
			display: grid;
			padding: 25px 25px;
			justify-content: center;
			text-align: center;
			gap: 0.25em;
			font-size: 1em;
			min-height: 50px;
			align-items: center;
		}
			.actionsheet > .container > .header .title
			{
				font-family: var(--font-bold);
				white-space: pre-wrap;
			}
			.actionsheet > .container > .header .description
			{
				white-space: pre-wrap;
			}
		.actionsheet > .container > .actions
		{
			display: grid;
		}
			.actionsheet > .container > .actions .options,
			.actionsheet > .container > .actions .footer
			{
				display: grid;
			}
				.actionsheet > .container > .actions .options > button,
				.actionsheet > .container > .actions .footer > button
				{
					position: relative;
					font-size: 1em;
					padding: 0.85em 0.75em;
					border-top: 1px solid var(--border-context);
					border-radius: 0;
					background: transparent !important;
				}
				.actionsheet > .container > .actions .options > button.loading > span,
				.actionsheet > .container > .actions .footer > button.loading > span
				{
					opacity: 0.3;
				}
				.actionsheet > .container > .actions .options > button:hover,
				.actionsheet > .container > .actions .footer > button:hover
				{
					background-image: linear-gradient(black 0%, var(--background-list-hover) 0%) !important;
				}
				.actionsheet > .container > .actions .options > button:active,
				.actionsheet > .container > .actions .footer > button:active
				{
					background-image: linear-gradient(black 0%, var(--background-list-active) 0%) !important;
				}
					.actionsheet > .container > .actions .options > button .progressring,
					.actionsheet > .container > .actions .footer > button .progressring
					{
						display: none;
						position: absolute;
						width: 1em;
						top: 50%;
						left: 50%;
						transform: translate(-50%, -50%);
					}
					.actionsheet > .container > .actions .options > button.loading .progressring,
					.actionsheet > .container > .actions .footer > button.loading .progressring
					{
						display: block;
					}

.emojipicker
{

}
	.emojipicker.popover > .container > .title,
	.emojipicker.sheet > .title
	{
		display: grid;    
		height: auto;
		text-align: left;
	}
		.emojipicker .title input[type=search] 
		{
			margin: calc(var(--padding) - 8px) calc(var(--padding) - 10px);
			border: 0;
			padding: 0.45rem 0.75rem;
		}
	.emojipicker.popover > .container > .content,
	.emojipicker.sheet > .content
	{
		display: grid;
		padding: var(--padding);
		padding-top: 0;
		max-height: min(400px, var(--max-height, 400px))
	}
		.emojipicker .content .category
		{
			display: grid;
			gap: 0.5em;
		}
			.emojipicker .content .category .ctitle
			{
				text-transform: uppercase;
				color: var(--foreground-description);
				font-family: var(--font-bold);
				font-size: 0.7em;
				letter-spacing: 0.1em;
			}
			.emojipicker .content .category:not(:first-child) .ctitle
			{
				margin: 2em 0 0;
			}
			.emojipicker .content .category .cemojis
			{
				display: grid;
				grid-auto-flow: row;
				grid-template-columns: repeat(8, 1fr);
			}
			.emojipicker .content .category:not(:has(span)):after
			{
				content: "No results";
				color: var(--foreground-description);
				text-align: center;
			}
				.emojipicker .content .category .cemojis span
				{
					font-size: 180%;
					aspect-ratio: 1;
				}

.list
{
	position: relative;    
	margin: 0.5em 0 2em;
}
	.list > .action
	{
		position: absolute;
		top: 0;
		right: 1em;
		padding: 0;
		font-size: 0.8em;
		text-transform: uppercase;
	}
	.list:before
	{
	    content: attr(ad-header);
	    display: block;
	    margin: 0 1em 0.5em;
	    font-size: 0.8em;
	    text-transform: uppercase;
	    color: var(--foreground-description);
	}
	.list:after
	{
		content: attr(ad-footer);
	    display: block;
	    margin: 0.525em 1em 0;
	    font-size: 0.8em;
	    color: var(--foreground-description);
	}
	.list > *:not(.action)
	{
		position: relative;
		background: var(--background-list);
		padding: 0.3em 1em;
		overflow: hidden;
	}
		.list > *:not(.action).clickable:before
		{
			content: "";
			position: absolute;
			left: 0;
			right: 0;
			bottom: 0;
			top: 0;
			z-index: -1;
		}
		.list > *:not(.action).clickable:hover:before
		{
			background: var(--background-list-hover);
		}
		.list > *:not(.action).clickable:active:before
		{
			background: var(--background-list-active);
		}
		.list > *:not(.action):not(:last-child):after
		{
			content: "";
			position: absolute;
			display: block;
			border-bottom: 1px solid var(--border-context);
			left: 1em;
			right: 0;
			bottom: 0;
		}
		.list > *.iconed:not(:last-child):after
		{
			left: 3.5em;
		}
	.list > .stack
	{
		display: grid;
	    grid-auto-flow: column;
	    grid-auto-columns: auto max-content;
	    align-items: center;
	    min-height: 50px;
		border-radius: 0;
		gap: 0;
		margin: 0;
	}
	.list > .stack.iconed 
	{
		grid-auto-columns: 2em auto max-content;
		padding: 0.3em 1em 0.3em 0.75em;
	}
		.list > .stack.iconed > *:nth-child(2)
		{
			margin-left: 0.75em;
		}
		.list > a.stack > *:nth-child(2)
		{
			display: grid;
			grid-auto-flow: column;
			grid-auto-columns: auto max-content;
		}
			.list > a.stack > *:nth-child(2):after
			{
				content: "\ef4a";
				font-family: var(--font-icon);
				color: var(--foreground-description);
			}
	.list > .stack.vertical 
	{
		grid-auto-flow: row;
		grid-auto-columns: auto;
		padding: 0.75em 1em;
	}
	.list > *:nth-child(2)
	{
		border-radius: 12px 12px 0 0;
	}
	.list > *:last-child
	{
		border-radius: 0 0 12px 12px;
	}
	.list > *:nth-child(2):last-child
	{
		border-radius: 12px;
	}


.pivot
{    
	display: grid;
    grid-auto-flow: row;
    grid-auto-rows: max-content auto;
    overflow: hidden;
    margin: 0 calc(var(--padding) * -1);
}
	.pivot .pivottabs
	{
		display: grid;
	    grid-auto-flow: column;
	    align-items: center;
	    justify-content: center;
	    grid-auto-columns: 1fr;
	    margin: 0 var(--padding);
	    padding: 3px;
	    background: var(--background-pivot-tabs);
	    border-radius: 10px;
	}
		.pivot .pivottabs .pivottitle
		{
			position: relative;
			display: grid;
		    grid-auto-flow: column;
		    align-items: center;
		    justify-content: center;
		    padding: 6px 9px;
		    border-radius: 7px;
			font-size: 0.9em;
		    border: 1px solid transparent;
		}
			.pivot .pivottabs .pivottitle:not(:first-child, :last-child):after
			{
				content: "";
				display: block;
				position: absolute;
				left: -1px;
				right: -1px;
				top: 5px;
				bottom: 5px;
				border-left: 1px solid var(--overlay-6);
				border-right: 1px solid var(--overlay-6);
			}
		.pivot .pivottabs .pivottitle:hover
		{
			background: var(--overlay-6);
		}
		.pivot .pivottabs .pivottitle:active
		{
			background: var(--overlay-5);
		}
		.pivot .pivottabs .pivottitle.active
		{
		    background-image: linear-gradient(var(--background-pivot-title) 100%, transparent 100%);
		    border: 1px solid var(--border-pivot-tabs);
		    box-shadow: 0 1px 0 0 var(--border-pivot-tabs);
		}
	.pivot > .pivotcontent
	{
		display: grid;
	    grid-auto-flow: column;
	    grid-auto-columns: 100%;
	    overflow-x: auto;
	    gap: 50px;
	    scroll-snap-type: x mandatory;
		scroll-behavior: smooth;
		scrollbar-width: none;
	}
		.pivot .pivotcontent .section
		{
			width: 100%;    
			height: 100%;
	    	overflow-y: auto;
	    	overflow-y: overlay;
			scroll-snap-align: center;
			padding: 15px var(--padding) var(--padding);
		}


@media screen and (max-width: 800px)
{
	[theme=light],
	[ad-theme=light]
	{
		--background-navigation: var(--gray-7);
		--border-sidebar: var(--gray-5);
	}
	header.titlebar img.icon,
	header.titlebar .name 
	{
		display: none;
	}
	header.titlebar .controls
	{
	    left: 0;
	    height: auto;
	    padding: calc(var(--padding) - 7px) calc(var(--padding) - 9px) 0;
	    background: transparent;
	    border-bottom: 0;
	}
	.root
	{
	    grid-template-areas: 
	    	"Content" 
	    	"Navigation";
	    grid-auto-columns: auto;
		grid-auto-rows: auto calc(60px + env(safe-area-inset-bottom));
	}	
		.titlebar + .root nav,
		.root nav
		{
			padding: 0;
			box-shadow: inset 0 10px 5px -10px var(--border-sidebar);
		}
		.root nav > .desktop
		{
			display: none;
		}
		.root nav > .mobile
		{
			display: block;
		}
			.root nav .navigation
			{
				display: grid;
				grid-auto-flow: column;
				grid-auto-columns: 1fr;        
				margin-bottom: env(safe-area-inset-bottom);
			}
			.root nav a,
			.root nav a:first-child
			{
				background: transparent !important;
			    margin: 0;
			    color: var(--text-secondary);    
			    grid-auto-flow: row;
    			grid-auto-columns: max-content;
    			grid-auto-rows: 1.35rem max-content;
			    gap: 0.275rem;
			    justify-content: center;
			    overflow: hidden;
				padding: 0.575rem 0.75rem;
			}
			.root nav a.active
			{
				background: transparent;
				color: var(--accent);
			}
				.root nav a span
				{
					font-size: 0.75rem;
					letter-spacing: 0.05em;
					font-family: var(--font-semibold);
				}
				.root nav a .icon
				{
					font-size: 1.25rem;
				    color: var(--text-secondary);
				}
				.root nav a.active .icon
				{
				    color: var(--accent);
				}
		.titlebar:has(.controls) + .root .main 
		{
		    margin-top: 30px;
		}
	.notification
	{
		width: 100vw;
	}


	@keyframes notificationIn 
	{
	    0% 
	    {
	        transform: translateY(calc(-100% - var(--padding)));
	    }
	    100% 
	    {
	        transform: none;
	    }
	}
	@keyframes notificationOut_auto 
	{
	    0% 
	    {
	        transform: none;
	    }
	    100% 
	    {
	        transform: translateY(calc(-100% - var(--padding)));
	        box-shadow: none;
	    }
	}
	@keyframes notificationOut_action 
	{
	    0% 
	    {
	        opacity: 1;
	        transform: none;
	    }
	    20% 
	    {
	        opacity: 1;
	        transform: scale(0.95);
	    }
	    40% 
	    {
	        opacity: 1;
	        transform: scale(0.95);
	        animation-timing-function: cubic-bezier(0.5, 0, 0.9, 0);
	    }
	    100% 
	    {
	        opacity: 1;
	        transform: scale(0.95) translateY(calc(-100% - var(--padding)));
	        box-shadow: none;
	    }
	}
}

@media screen and (max-width: 425px)
{
	:root, 
	[theme=light],
	[ad-theme=light]
	{
		--background-sheet: rgba(255, 255, 255, 1);
	}
	[theme=dark],
	[ad-theme=dark]
	{
		--background-sheet: rgba(30, 30, 30, 1);
	}
	
	.root
	{
		transition: 0.7s var(--key-animation);
	}
	.root.dim
	{
		background: var(--background-page-dim);
		transform: scale(0.95) translate(0, 0px);
    	border-radius: 12px;
	}
	.titlebar:has(~ .root.dim) .controls
	{
		opacity: 0;
	}

	.activity > .header > input,
	.activity > .header > label
	{
		margin: calc(-20px + var(--padding) + 1.25em) 0 0;
	}

	.popover,
	.popover.opened
	{
		left: 0 !important;
		right: 0 !important;
	    width: 100% !important;
		max-width: 100% !important;
		transition: 0.7s var(--key-animation);
		filter: unset;
	}
		.popover:not(.left):not(.right):not(.center):not(.top):not(.bottom).opened > .dim
		{
			opacity: 0;
		}
		.popover > .container,
		.popover.top > .container,
		.popover.bottom > .container
		{
			position: fixed;
			top: 35px !important;
			width: 100% !important;
			height: calc(100vh - 35px);
			height: calc(100dvh - 35px);
			bottom: unset !important;
			border-radius: 15px 15px 0 0 !important;
			opacity: 1;
			transition-property: transform;
			transform-origin: top;
			transform: translateY(calc(100% + 35px));
			mask-image: unset;
			-webkit-mask-image: unset;
			padding: 0;
			overflow: hidden;
			box-shadow: 0 0 10px 0 #00000030;
		}
		.popover.opened > .container
		{
			transform: translateY(0%);
		}
			.popover > .container > .content
			{
				max-height: unset !important;
				padding-bottom: calc(var(--padding) + env(safe-area-inset-bottom));
			}
			.popover > .container > .activity
			{
				max-height: unset !important;
			}
			.popover > .container > .activity > .content,
			.popover > .container > .activity > section > .content
			{
				padding-bottom: calc(var(--padding) + env(safe-area-inset-bottom));
			}
	.sheet
	{
	    position: fixed;
	    top: unset !important;
	    left: 0 !important;
	    width: 100% !important;
	    bottom: 0 !important;
	    border-radius: 15px 15px 0 0 !important;
	    opacity: 1;
		background: var(--background-sheet);
	    transition: 
			0.7s var(--key-animation) transform,
			0.1s visibility 0.7s;
	    transform-origin: top;
	    transform: translateY(calc(100% + 35px));
		-webkit-backdrop-filter: unset;
		backdrop-filter: unset;
	}
	.sheet.opened
	{
	    transform: translateY(0%);
	    transition: 
			0.7s var(--key-animation) transform,
			0.1s visibility 0s;
	}
			.sheet > .control > .bar
			{
		        display: block;
		        position: absolute;
		        top: var(--padding);
		        left: 50%;
		        transform: translate(-50%, -50%);
		        background: var(--overlay-4);
		        backdrop-filter: blur(5px) brightness(10) saturate(0.5);
		        -webkit-backdrop-filter: blur(5px) brightness(10) saturate(0.5);
		        filter: drop-shadow(0px 3px 3px black);
		        width: 50px;
		        height: 5px;
		        border-radius: 5px;
			}
			[theme=dark]
			.sheet > .control > .bar,
			[ad-theme=dark]
			.sheet > .control > .bar
			{
		        backdrop-filter: blur(5px) brightness(0.75) saturate(0.5);
		        -webkit-backdrop-filter: blur(5px) brightness(0.75) saturate(0.5);
			}
			.sheet > .control > .close
			{
			    display: none;
			}
			.sheet > .content
			{
			    padding-top: calc(var(--padding) * 2);
				padding-bottom: calc(var(--padding) + env(safe-area-inset-bottom));
			}
	
	.actionsheet
	{
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		pointer-events: none;
		transition: 0.6s var(--key-animation);
	}
	.actionsheet.opened 
	{
		pointer-events: all;
	}
		.actionsheet > .dim
		{
			display: block;
			position: fixed;
			top: -100vh;
			left: -100vw;
			right: -100vw;
			bottom: -100vh;
			background: rgba(0, 0, 0, 0.6);
			transition: 0.25s opacity;
			z-index: -2;
			opacity: 0;
		}
		.actionsheet.opened > .dim
		{
			opacity: 1;
		}
		.actionsheet > .container 
		{
			top: unset;
			bottom: calc(10px + env(safe-area-inset-bottom));
			left: 10px;
			right: 10px;
			transform: translateY(calc(100% + 10px + env(safe-area-inset-bottom)));
			opacity: 1;
			background: transparent;
			backdrop-filter: unset;
			width: unset;
			max-width: unset;
		}
		.actionsheet.opened > .container 
		{
			transform: translateY(0%);
		}
			.actionsheet > .container > .header
			{
				display: grid;
				background: var(--background-context);
				padding: 15px;
				border-radius: 15px 15px 0 0;
				justify-content: center;
				text-align: center;
				gap: 0.25em;
				backdrop-filter: var(--filter-blur);
				border-bottom: 1px solid var(--border-context);
				letter-spacing: 0.035em;
				font-size: 0.9em;
				min-height: 50px;
				align-items: center;
			}
				.actionsheet > .container > .header .title,
				.actionsheet > .container > .header .description
				{
					opacity: 0.5;
				}
				.actionsheet > .container > .header .title
				{
					font-family: var(--font-semibold);
				}
			.actionsheet > .container > .actions
			{
				gap: 10px;
			}
				.actionsheet > .container > .actions .options,
				.actionsheet > .container > .actions .footer
				{
					background: var(--background-context);
					backdrop-filter: var(--filter-blur);
					border-radius: 0 0 15px 15px;
					overflow: hidden;    
					gap: 0;
				}
				.actionsheet > .container > .actions .footer
				{
					border-radius: 15px;
				}
					.actionsheet > .container > .actions .options > button,
					.actionsheet > .container > .actions .footer > button
					{
						background: transparent;
						font-size: 1.05em;
						padding: 0.95em;
						border-top: unset;
					}
					.actionsheet > .container > .actions .options > button:not(:last-child),
					.actionsheet > .container > .actions .footer > button:not(:last-child)
					{
						border-bottom: 1px solid var(--border-context);
					}
					.actionsheet > .container > .actions .options > button:hover,
					.actionsheet > .container > .actions .footer > button:hover
					{
						background-image: linear-gradient(black 0%, var(--background-list-hover) 0%);
					}
					.actionsheet > .container > .actions .options > button:active,
					.actionsheet > .container > .actions .footer > button:active
					{
						background-image: linear-gradient(black 0%, var(--background-list-active) 0%);
					}
	.emojipicker.sheet > .title
	{
		padding-top: calc(var(--padding) * 2);
	}
		.emojipicker .title input[type=search] 
		{
			margin: 0 var(--padding) var(--padding);
		}
}

@media screen and (display-mode: window-controls-overlay)
{
	header.titlebar:not(:has(.controls)) + .root > .main > .activity > .header
	{
		padding-top: calc(var(--padding) + 10px);
	}
	.notifications
	{
		margin-top: 10px;
	}
}

@media screen and (max-width: 800px) and (display-mode: standalone)
{
	header.titlebar .controls
	{
		padding: calc(var(--padding) - 15px) calc(var(--padding) - 9px) 0;
	}
	header.titlebar:has(.controls) + .root > .main 
	{
		margin-top: 30px;
	}
	.notifications
	{
		margin: -10px;
	}
		.notifications .notification
		{
			max-width: calc(100vw - (var(--padding) * 2) + 20px);
		}
}