#app-root .ui-btn,
#app-root .ui-nav-item,
#app-root .ui-subtab,
#app-root .ui-taskbar__btn,
#app-root .ui-desktop-icon,
#app-root .ui-desktop-icon__glyph,
#app-root .ui-context-menu__item,
.ui-context-menu__item,
#app-root .ui-win-cap,
#app-root .ui-win-dot,
#app-root .ui-input,
#app-root .ui-textarea,
#app-root .ui-select,
#app-root .ui-invite-code-btn,
#app-root .ui-admin-board-card,
#app-root .ui-forum-board,
#app-root .ui-forum-thread-list__item,
#app-root .ui-user-directory-list .ui-row,
#app-root .ui-shout-row,
#app-root .ui-voice-channel,
#app-root .ui-colour-picker__swatchrow-item,
#app-root .ui-check input {
	transition:
		color var(--ui-motion-fast) var(--ui-motion-ease),
		background var(--ui-motion-med) var(--ui-motion-ease),
		background-color var(--ui-motion-med) var(--ui-motion-ease),
		border-color var(--ui-motion-fast) var(--ui-motion-ease),
		box-shadow var(--ui-motion-med) var(--ui-motion-ease),
		transform var(--ui-motion-fast) var(--ui-motion-ease),
		opacity var(--ui-motion-med) var(--ui-motion-ease),
		filter var(--ui-motion-med) var(--ui-motion-ease);
}

#app-root .ui-group {
	transition:
		border-color var(--ui-motion-med) var(--ui-motion-ease),
		box-shadow var(--ui-motion-med) var(--ui-motion-ease),
		background var(--ui-motion-med) var(--ui-motion-ease);
}

#app-root .ui-group__legend {
	transition: color var(--ui-motion-fast) var(--ui-motion-ease);
}

#app-root .ui-btn:hover:not(:disabled) {
	border-color: var(--ui-hover-border);
	color: var(--ui-text-bright);
	background: var(--ui-btn-hover-grad);
	box-shadow:
		inset 0 1px 0 color-mix(in srgb, var(--ui-edge-hi) 80%, var(--ui-accent) 20%),
		0 0 0 1px color-mix(in srgb, var(--ui-accent) 18%, transparent),
		0 4px 14px color-mix(in srgb, var(--ui-accent-glow) 55%, transparent);
}

#app-root .ui-btn:active:not(:disabled) {
	transform: translateY(1px);
	box-shadow: inset 0 2px 4px var(--ui-button-active-shadow);
}

#app-root .ui-btn:disabled {
	opacity: 0.55;
	cursor: default;
}

#app-root .ui-btn--danger:hover:not(:disabled) {
	border-color: var(--ui-danger);
	color: var(--ui-danger);
	background: linear-gradient(
		180deg,
		color-mix(in srgb, var(--ui-danger) 18%, var(--ui-bg-hover)) 0%,
		color-mix(in srgb, var(--ui-danger) 8%, var(--ui-bg-panel)) 100%
	);
	box-shadow: 0 0 12px var(--ui-danger-glow);
}

#app-root .ui-btn.ui-btn--active:hover:not(:disabled) {
	background: color-mix(in srgb, var(--ui-accent) 22%, var(--ui-accent-fill));
}

#app-root .ui-nav-item:hover {
	color: var(--ui-text-bright);
	background: var(--ui-hover-grad);
	border-color: color-mix(in srgb, var(--ui-accent) 28%, transparent);
}

#app-root .ui-nav-item--active,
#app-root .ui-nav-item[aria-current="page"] {
	background: linear-gradient(
		90deg,
		var(--ui-accent-fill) 0%,
		color-mix(in srgb, var(--ui-accent) 4%, transparent) 100%
	);
	background-size: 220% 100%;
	background-position: 0 0;
	animation: ui-nav-wipe 320ms var(--ui-motion-ease-out) both;
}

#app-root .ui-nav-item--active .ui-nav-item__icon {
	animation: ui-nav-icon-tick 320ms var(--ui-motion-ease-out) both;
}

#app-root .ui-subtab:hover {
	color: var(--ui-text-bright);
	background: var(--ui-hover-wash);
}

#app-root .ui-subtab--active {
	background: linear-gradient(
		180deg,
		var(--ui-accent-fill) 0%,
		transparent 100%
	);
	animation: ui-subtab-pop 260ms var(--ui-motion-ease-out) both;
}

#app-root .ui-input:hover,
#app-root .ui-textarea:hover,
#app-root .ui-select:hover {
	border-color: color-mix(in srgb, var(--ui-accent) 30%, var(--ui-border-mid));
}

#app-root .ui-input:focus,
#app-root .ui-textarea:focus,
#app-root .ui-select:focus {
	border-color: var(--ui-hover-border);
	box-shadow:
		0 0 0 1px color-mix(in srgb, var(--ui-accent) 25%, transparent),
		0 0 12px color-mix(in srgb, var(--ui-accent-glow) 50%, transparent);
	outline: none;
}

:root[data-ui-theme="default"] #app-root .ui-group:hover {
	border-color: color-mix(in srgb, var(--ui-accent) 22%, var(--ui-border-inner));
	box-shadow:
		inset 1px 1px 0 var(--ui-edge-hi),
		inset -1px -1px 0 var(--ui-edge-lo),
		0 0 0 1px color-mix(in srgb, var(--ui-accent) 10%, transparent),
		0 8px 24px color-mix(in srgb, var(--ui-window-shadow) 35%, transparent);
}

#app-root .ui-group:hover > .ui-group__legend {
	color: var(--ui-accent);
}

#app-root .ui-user-directory-list .ui-row,
#app-root .ui-shout-row,
#app-root .ui-forum-thread-list__item,
#app-root .ui-admin-board-card,
#app-root .ui-voice-channel {
	position: relative;
}

#app-root .ui-user-directory-list .ui-row:hover,
#app-root .ui-shout-row:hover,
#app-root .ui-forum-thread-list__item:hover,
#app-root .ui-admin-board-card:hover,
#app-root .ui-voice-channel:hover {
	background: var(--ui-hover-grad);
	border-color: color-mix(in srgb, var(--ui-accent) 25%, var(--ui-border-mid));
	box-shadow: inset 2px 0 0 var(--ui-accent);
}

#app-root .ui-invite-code-btn:hover {
	color: var(--ui-accent);
	background: var(--ui-hover-wash);
	border-color: var(--ui-hover-border);
}

#app-root .ui-forum-board:hover {
	border-color: color-mix(in srgb, var(--ui-accent) 28%, var(--ui-border-mid));
	box-shadow: 0 0 0 1px color-mix(in srgb, var(--ui-accent) 12%, transparent);
}

#app-root .ui-desktop-icon:hover .ui-desktop-icon__glyph,
#app-root .ui-desktop-icon:focus-visible .ui-desktop-icon__glyph {
	transform: translateY(-2px);
	border-color: var(--ui-hover-border);
	background: var(--ui-hover-grad);
	box-shadow:
		0 0 0 1px color-mix(in srgb, var(--ui-accent) 30%, transparent),
		0 10px 22px color-mix(in srgb, var(--ui-accent-glow) 45%, transparent);
}

#app-root .ui-desktop-icon:hover .ui-desktop-icon__label,
#app-root .ui-desktop-icon:focus-visible .ui-desktop-icon__label {
	color: var(--ui-text-bright);
}

#app-root .ui-taskbar__btn:hover {
	color: var(--ui-text-bright);
	background: var(--ui-hover-grad);
	border-color: color-mix(in srgb, var(--ui-accent) 30%, transparent);
}

#app-root .ui-taskbar__btn--active {
	background: linear-gradient(
		180deg,
		var(--ui-accent-fill) 0%,
		color-mix(in srgb, var(--ui-accent) 6%, transparent) 100%
	);
}

#app-root .ui-window {
	animation: ui-window-in var(--ui-motion-slow) var(--ui-motion-ease-out) both;
}

#app-root .ui-header {
	transition: background var(--ui-motion-med) var(--ui-motion-ease);
}

#app-root .ui-window:hover > .ui-header {
	background: linear-gradient(
		180deg,
		color-mix(in srgb, var(--ui-accent) 8%, transparent) 0%,
		transparent 100%
	),
		var(--ui-header-bg);
}

#app-root .ui-win-cap:hover,
#app-root .ui-win-dot:hover {
	filter: brightness(1.08);
	transform: scale(1.06);
}

#app-root .ui-modal-back {
	animation: ui-fade-in var(--ui-motion-med) var(--ui-motion-ease) both;
}

#app-root .ui-modal {
	animation: ui-pop-in var(--ui-motion-slow) var(--ui-motion-ease-out) both;
}

#app-root .ui-toast {
	animation: ui-toast-in var(--ui-motion-slow) var(--ui-motion-ease-out) both;
}

#app-root .ui-context-menu,
.ui-context-menu {
	animation: ui-pop-in var(--ui-motion-fast) var(--ui-motion-ease-out) both;
}

#app-root .ui-context-menu__item:hover,
#app-root .ui-context-menu__item:focus-visible,
.ui-context-menu__item:hover,
.ui-context-menu__item:focus-visible {
	background: var(--ui-hover-grad);
}

#app-root .ui-colour-picker__swatchrow-item:hover {
	transform: scale(1.12);
	box-shadow: 0 0 0 2px var(--ui-accent-glow);
}

#app-root .ui-check:hover input {
	border-color: var(--ui-hover-border);
}

#app-root .ui-section-head__title {
	transition: color var(--ui-motion-fast) var(--ui-motion-ease);
}

#app-root .ui-page:hover .ui-section-head__title,
#app-root .ui-admin-page:hover .ui-section-head__title {
	color: color-mix(in srgb, var(--ui-accent) 35%, var(--ui-text-bright));
}

#app-root .ui-sidebar {
	transition: width var(--ui-motion-slow) var(--ui-motion-ease);
}

#app-root .ui-nav-item__label,
#app-root .ui-sidebar__collapse-label {
	transition:
		opacity var(--ui-motion-med) var(--ui-motion-ease),
		max-width var(--ui-motion-slow) var(--ui-motion-ease),
		transform var(--ui-motion-med) var(--ui-motion-ease);
	max-width: 140px;
	opacity: 1;
}

#app-root .ui-window--nav-collapsed .ui-nav-item__label,
#app-root .ui-window--nav-collapsed .ui-sidebar__collapse-label {
	max-width: 0;
	opacity: 0;
	transform: translateX(-4px);
}

#app-root .ui-sidebar__collapse-icon svg {
	transition: transform var(--ui-motion-slow) var(--ui-motion-ease);
}

#app-root .ui-nav-item__icon {
	transition:
		color var(--ui-motion-fast) var(--ui-motion-ease),
		transform var(--ui-motion-fast) var(--ui-motion-ease);
}

#app-root .ui-nav-item:hover .ui-nav-item__icon,
#app-root .ui-nav-item--active .ui-nav-item__icon {
	color: var(--ui-accent);
	transform: scale(1.06);
}

#app-root .ui-forum-board__title {
	transition:
		color var(--ui-motion-fast) var(--ui-motion-ease),
		text-shadow var(--ui-motion-med) var(--ui-motion-ease);
}

#app-root .ui-forum-board__title:hover {
	text-shadow: 0 0 14px var(--ui-accent-glow);
}

#app-root .ui-view-anim {
	position: relative;
	transform-origin: 50% 0;
}

#app-root .ui-view-anim--loading {
	animation: ui-view-arrive var(--ui-motion-med) var(--ui-motion-ease-out) both;
}

#app-root .ui-view-anim--ready {
	animation: ui-view-settle 260ms var(--ui-motion-ease-out) both;
}

#app-root .ui-view-anim::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 28%;
	height: 1px;
	background: linear-gradient(
		90deg,
		transparent 0%,
		color-mix(in srgb, var(--ui-accent) 55%, transparent) 55%,
		color-mix(in srgb, var(--ui-accent) 85%, transparent) 100%
	);
	box-shadow: 0 0 6px var(--ui-accent-glow);
	opacity: 0;
	pointer-events: none;
	z-index: 6;
	animation: ui-view-rail 900ms linear infinite;
	transition: opacity 300ms var(--ui-motion-ease-out);
}

#app-root .ui-view-anim--loading::before {
	opacity: 1;
}

#app-root .ui-view-anim::after {
	content: "";
	position: absolute;
	inset: 0;
	opacity: 0;
	pointer-events: none;
	z-index: 5;
	background: linear-gradient(
		100deg,
		transparent 30%,
		color-mix(in srgb, var(--ui-accent) 6%, transparent) 50%,
		transparent 70%
	);
	animation: ui-view-shimmer 1.4s linear infinite;
	transition: opacity 380ms var(--ui-motion-ease-out);
}

#app-root .ui-view-anim--loading::after {
	opacity: 1;
}

#app-root .ui-view-anim--loading > .ui-group,
#app-root .ui-view-anim--loading .ui-page > *,
#app-root .ui-view-anim--loading .ui-page--snap > *,
#app-root .ui-view-anim--loading .ui-admin-page > * {
	animation: ui-view-hold var(--ui-motion-med) var(--ui-motion-ease-out) both;
}

#app-root .ui-view-anim--ready > .ui-group,
#app-root .ui-view-anim--ready .ui-page > *,
#app-root .ui-view-anim--ready .ui-page--snap > *,
#app-root .ui-view-anim--ready .ui-admin-page > * {
	animation: ui-view-rise 280ms var(--ui-motion-ease-out) both;
}

#app-root .ui-view-anim .ui-page > :nth-child(2),
#app-root .ui-view-anim .ui-page--snap > :nth-child(2),
#app-root .ui-view-anim .ui-admin-page > :nth-child(2) {
	animation-delay: 35ms;
}

#app-root .ui-view-anim .ui-page > :nth-child(3),
#app-root .ui-view-anim .ui-page--snap > :nth-child(3),
#app-root .ui-view-anim .ui-admin-page > :nth-child(3) {
	animation-delay: 70ms;
}

#app-root .ui-view-anim .ui-page > :nth-child(n + 4),
#app-root .ui-view-anim .ui-page--snap > :nth-child(n + 4),
#app-root .ui-view-anim .ui-admin-page > :nth-child(n + 4) {
	animation-delay: 100ms;
}

#app-root .ui-view-anim--ready .ui-section-head__title {
	animation: ui-title-resolve 380ms var(--ui-motion-ease-out);
}

#app-root .ui-hint {
	transition:
		opacity 320ms var(--ui-motion-ease-out),
		transform 320ms var(--ui-motion-ease-out),
		visibility 320ms var(--ui-motion-ease-out);
}

#app-root .ui-sidebar__collapse {
	transition:
		color var(--ui-motion-fast) var(--ui-motion-ease),
		background var(--ui-motion-med) var(--ui-motion-ease);
}

@keyframes ui-fade-in {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

@keyframes ui-pop-in {
	from {
		opacity: 0;
		transform: translateY(6px) scale(0.98);
	}
	to {
		opacity: 1;
		transform: translateY(0) scale(1);
	}
}

@keyframes ui-window-in {
	from {
		opacity: 0;
		transform: translateY(8px) scale(0.985);
	}
	to {
		opacity: 1;
		transform: translateY(0) scale(1);
	}
}

@keyframes ui-view-arrive {
	from {
		opacity: 0;
		transform: translate3d(0, 5px, 0) scale(0.995);
	}
	to {
		opacity: 1;
		transform: translate3d(0, 1px, 0) scale(0.999);
	}
}

@keyframes ui-view-settle {
	from {
		transform: translate3d(0, 1px, 0) scale(0.999);
	}
	to {
		transform: none;
	}
}

@keyframes ui-view-hold {
	from {
		opacity: 0;
		transform: translate3d(0, 4px, 0);
	}
	to {
		opacity: 0.7;
		transform: translate3d(0, 2px, 0);
	}
}

@keyframes ui-view-rise {
	from {
		opacity: 0.7;
		transform: translate3d(0, 2px, 0);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

@keyframes ui-view-rail {
	from {
		transform: translate3d(-104%, 0, 0);
	}
	to {
		transform: translate3d(361%, 0, 0);
	}
}

@keyframes ui-view-shimmer {
	from {
		transform: translate3d(-72%, 0, 0);
	}
	to {
		transform: translate3d(72%, 0, 0);
	}
}

@keyframes ui-title-resolve {
	0% {
		opacity: 0.7;
		text-shadow: 0 0 8px var(--ui-accent-glow);
	}
	45% {
		opacity: 1;
		text-shadow: 0 0 6px var(--ui-accent-glow);
	}
	100% {
		opacity: 1;
		text-shadow: 0 0 0 transparent;
	}
}

@keyframes ui-nav-wipe {
	from {
		background-position: 100% 0;
	}
	to {
		background-position: 0 0;
	}
}

@keyframes ui-nav-icon-tick {
	0% {
		opacity: 0.7;
		transform: translate3d(-2px, 0, 0) scale(1);
	}
	58% {
		opacity: 1;
		transform: translate3d(0, 0, 0) scale(1.1);
	}
	100% {
		opacity: 1;
		transform: translate3d(0, 0, 0) scale(1.06);
	}
}

@keyframes ui-subtab-pop {
	0% {
		transform: translate3d(0, 1px, 0);
	}
	100% {
		transform: none;
	}
}

@keyframes ui-toast-in {
	from {
		opacity: 0;
		transform: translateX(12px);
	}
	to {
		opacity: 1;
		transform: translateX(0);
	}
}

:root[data-ui-motion="reduced"] #app-root *,
:root[data-ui-motion="reduced"] #app-root *::before,
:root[data-ui-motion="reduced"] #app-root *::after {
	animation-duration: 0.01ms !important;
	animation-iteration-count: 1 !important;
	transition-duration: 0.01ms !important;
}

:root[data-ui-motion="reduced"] #app-root .ui-view-anim::before,
:root[data-ui-motion="reduced"] #app-root .ui-view-anim::after {
	display: none !important;
}

:root[data-ui-motion="reduced"] #app-root .ui-view-anim > .ui-group,
:root[data-ui-motion="reduced"] #app-root .ui-view-anim .ui-page > *,
:root[data-ui-motion="reduced"] #app-root .ui-view-anim .ui-page--snap > *,
:root[data-ui-motion="reduced"] #app-root .ui-view-anim .ui-admin-page > * {
	opacity: 1 !important;
	transform: none !important;
}

@media (prefers-reduced-motion: reduce) {
	#app-root .ui-btn,
	#app-root .ui-nav-item,
	#app-root .ui-subtab,
	#app-root .ui-taskbar__btn,
	#app-root .ui-desktop-icon,
	#app-root .ui-desktop-icon__glyph,
	#app-root .ui-context-menu__item,
	.ui-context-menu__item,
	#app-root .ui-win-cap,
	#app-root .ui-win-dot,
	#app-root .ui-input,
	#app-root .ui-textarea,
	#app-root .ui-select,
	#app-root .ui-invite-code-btn,
	#app-root .ui-admin-board-card,
	#app-root .ui-forum-board,
	#app-root .ui-forum-thread-list__item,
	#app-root .ui-user-directory-list .ui-row,
	#app-root .ui-shout-row,
	#app-root .ui-voice-channel,
	#app-root .ui-colour-picker__swatchrow-item,
	#app-root .ui-check input,
	#app-root .ui-group,
	#app-root .ui-group__legend,
	#app-root .ui-header,
	#app-root .ui-section-head__title,
	#app-root .ui-sidebar,
	#app-root .ui-nav-item__label,
	#app-root .ui-sidebar__collapse-label,
	#app-root .ui-sidebar__collapse-icon svg,
	#app-root .ui-nav-item__icon,
	#app-root .ui-forum-board__title,
	#app-root .ui-sidebar__collapse {
		transition: none !important;
	}

	#app-root .ui-window,
	#app-root .ui-modal-back,
	#app-root .ui-modal,
	#app-root .ui-toast,
	#app-root .ui-context-menu,
	.ui-context-menu,
	#app-root .ui-view-anim,
	#app-root .ui-view-anim::before,
	#app-root .ui-view-anim::after,
	#app-root .ui-view-anim > .ui-group,
	#app-root .ui-view-anim .ui-page > *,
	#app-root .ui-view-anim .ui-page--snap > *,
	#app-root .ui-view-anim .ui-admin-page > *,
	#app-root .ui-view-anim .ui-section-head__title,
	#app-root .ui-nav-item--active,
	#app-root .ui-nav-item[aria-current="page"],
	#app-root .ui-nav-item--active .ui-nav-item__icon,
	#app-root .ui-subtab--active {
		animation: none !important;
	}

	#app-root .ui-view-anim::before,
	#app-root .ui-view-anim::after {
		display: none !important;
	}

	#app-root .ui-view-anim > .ui-group,
	#app-root .ui-view-anim .ui-page > *,
	#app-root .ui-view-anim .ui-page--snap > *,
	#app-root .ui-view-anim .ui-admin-page > * {
		opacity: 1 !important;
		transform: none !important;
	}

	#app-root .ui-street__bob,
	#app-root .ui-street__held,
	#app-root .ui-street__bubble {
		animation: none !important;
	}

	#app-root .ui-street {
		transition: none !important;
	}

	#app-root .ui-hint {
		transition: none !important;
		transform: none !important;
	}

	#app-root .ui-street__walker--synced {
		transition: none !important;
	}

	#app-root .ui-btn:active:not(:disabled),
	#app-root .ui-desktop-icon:hover .ui-desktop-icon__glyph,
	#app-root .ui-win-cap:hover,
	#app-root .ui-win-dot:hover,
	#app-root .ui-colour-picker__swatchrow-item:hover,
	#app-root .ui-nav-item:hover .ui-nav-item__icon,
	#app-root .ui-nav-item--active .ui-nav-item__icon {
		transform: none !important;
	}
}