From 7dbbbe590f367f36d2925e8affe7ec51c9c75e43 Mon Sep 17 00:00:00 2001
From: Prospector <6166773+Prospector@users.noreply.github.com>
Date: Sun, 3 May 2026 11:53:06 -0700
Subject: [PATCH] chore: clean up a bunch of legacy styles (#5973)

* remove unused experimental-styles-within

* remove unused styles

* more cleanup + prepr

* Refactor nearly all legacy buttons to use ButtonStyled

* prepr

* Update MC account selector to modern version

* prepr

---------

Co-authored-by: Calum H. <calum@modrinth.com>
---
 apps/app-frontend/src/App.vue                 |   6 +-
 .../src/components/ui/AccountsCard.vue        | 506 +++++------------
 .../src/components/ui/ExportModal.vue         |  36 +-
 .../src/components/ui/JavaDetectionModal.vue  |  22 +-
 .../src/components/ui/JavaSelector.vue        |  74 +--
 .../src/components/ui/ModpackVersionModal.vue |  21 +-
 .../src/components/ui/URLConfirmModal.vue     |   7 +-
 .../IncompatibilityWarningModal.vue           |  20 +-
 .../ui/install_flow/ModInstallModal.vue       | 418 --------------
 .../ui/modal/ConfirmDeleteInstanceModal.vue   |   2 +-
 .../ui/modal/ModpackAlreadyInstalledModal.vue |   2 +-
 .../settings/ResourceManagementSettings.vue   |  10 +-
 .../src/components/ui/skin/EditSkinModal.vue  |  11 +-
 .../ui/world/modal/AddServerModal.vue         |   2 +-
 .../ui/world/modal/EditServerModal.vue        |   2 +-
 .../app-frontend/src/locales/en-US/index.json |  18 +
 apps/app-frontend/src/pages/Skins.vue         |  39 +-
 .../src/pages/instance/Worlds.vue             |   4 +-
 apps/app-frontend/src/pages/library/Index.vue |  12 +-
 .../src/pages/project/Gallery.vue             |  65 ++-
 .../src/pages/project/Version.vue             |  87 +--
 .../src/pages/project/Versions.vue            |   4 -
 .../api/oauth_utils/auth_code_reply/page.html |   2 +-
 .../src/assets/styles/components.scss         | 519 ++----------------
 apps/frontend/src/components/ui/Modal.vue     |  10 +-
 .../src/components/ui/ModrinthFooter.vue      |   4 +-
 .../src/components/ui/NotificationItem.vue    | 160 +++---
 .../src/components/ui/OptionGroup.vue         |   2 +-
 .../ui/OrganizationProjectTransferModal.vue   |  65 ++-
 .../SubscriptionPaymentFailedBanner.vue       |  12 +-
 .../ui/banner/VerifyEmailBanner.vue           |  26 +-
 .../src/components/ui/charts/ChartDisplay.vue |  34 +-
 .../ui/create/CollectionCreateModal.vue       |   4 +-
 .../ui/create/OrganizationCreateModal.vue     |   4 +-
 .../ui/create/ProjectCreateModal.vue          |   4 +-
 .../ui/dashboard/CreatorWithdrawModal.vue     |  14 +-
 .../ui/moderation/ModerationProjectNags.vue   |  12 +-
 .../ui/moderation/ModerationReportCard.vue    |   4 +-
 .../ui/moderation/ModerationTechRevCard.vue   |   3 -
 .../ui/project-settings/CompatibilityCard.vue |   6 +-
 .../servers/marketing/MedalPlanPromotion.vue  |   4 +-
 .../ui/thread/ConversationThread.vue          | 360 ++++++------
 .../components/ui/thread/ThreadMessage.vue    |  31 +-
 apps/frontend/src/error.vue                   |   2 +-
 apps/frontend/src/layouts/default.vue         |   5 +-
 apps/frontend/src/pages/[type]/[id].vue       |  70 +--
 .../src/pages/[type]/[id]/changelog.vue       |  19 +-
 .../src/pages/[type]/[id]/gallery.vue         | 316 +++++------
 .../src/pages/[type]/[id]/settings.vue        |   2 +-
 .../[type]/[id]/settings/environment.vue      |   2 +-
 .../pages/[type]/[id]/settings/gallery.vue    | 314 +++++------
 .../src/pages/[type]/[id]/settings/index.vue  | 100 ++--
 .../pages/[type]/[id]/settings/license.vue    |   2 +-
 .../src/pages/[type]/[id]/settings/links.vue  |  31 +-
 .../pages/[type]/[id]/settings/members.vue    | 181 +++---
 .../src/pages/[type]/[id]/versions.vue        |   2 +-
 .../frontend/src/pages/admin/billing/[id].vue |   2 +-
 apps/frontend/src/pages/admin/docs.vue        |   4 +-
 apps/frontend/src/pages/admin/emails.vue      | 126 +++--
 .../src/pages/admin/servers/notices.vue       |   2 +-
 .../src/pages/admin/servers/transfers.vue     |   2 +-
 apps/frontend/src/pages/app.vue               | 137 +++--
 apps/frontend/src/pages/auth.vue              |  14 +-
 apps/frontend/src/pages/auth/authorize.vue    |  22 +-
 .../src/pages/auth/reset-password.vue         |  25 +-
 apps/frontend/src/pages/auth/sign-in.vue      |  85 +--
 apps/frontend/src/pages/auth/sign-up.vue      |  77 +--
 apps/frontend/src/pages/auth/verify-email.vue |   8 +-
 apps/frontend/src/pages/auth/welcome.vue      |  11 +-
 apps/frontend/src/pages/collection/[id].vue   |  41 +-
 .../src/pages/dashboard/collections.vue       |  16 +-
 apps/frontend/src/pages/dashboard/index.vue   |  96 +---
 .../src/pages/dashboard/notifications.vue     |  22 +-
 .../src/pages/dashboard/organizations.vue     |  12 +-
 .../frontend/src/pages/dashboard/projects.vue | 155 +++---
 apps/frontend/src/pages/hosting/index.vue     |   4 +-
 apps/frontend/src/pages/index.vue             |   2 +-
 apps/frontend/src/pages/moderation.vue        |   4 +-
 apps/frontend/src/pages/moderation/index.vue  |   2 +-
 .../src/pages/news/article/[slug].vue         |   4 +-
 apps/frontend/src/pages/news/changelog.vue    |   2 +-
 apps/frontend/src/pages/news/index.vue        |   4 +-
 apps/frontend/src/pages/organization/[id].vue |  22 +-
 .../organization/[id]/settings/index.vue      |  54 +-
 .../organization/[id]/settings/members.vue    | 146 ++---
 .../organization/[id]/settings/projects.vue   | 141 ++---
 apps/frontend/src/pages/plus.vue              |  39 +-
 apps/frontend/src/pages/report.vue            |   2 +-
 apps/frontend/src/pages/settings/account.vue  | 324 +++++------
 .../src/pages/settings/applications.vue       | 182 +++---
 .../src/pages/settings/authorizations.vue     |  28 +-
 .../src/pages/settings/billing/index.vue      |  90 +--
 apps/frontend/src/pages/settings/index.vue    |  14 +-
 apps/frontend/src/pages/settings/pats.vue     | 126 +++--
 apps/frontend/src/pages/settings/profile.vue  |  69 +--
 apps/frontend/src/pages/settings/sessions.vue |   9 +-
 apps/frontend/src/pages/user/[id].vue         |   2 +-
 packages/assets/styles/classes.scss           | 146 -----
 packages/ui/src/components/base/Avatar.vue    |   4 +-
 packages/ui/src/components/base/Card.vue      |  10 +-
 .../ui/src/components/base/JoinedButtons.vue  |  19 +-
 .../ui/src/components/base/MarkdownEditor.vue | 115 ++--
 .../src/components/base/MultiStageModal.vue   |   1 -
 .../ui/src/components/base/OptionGroup.vue    |   2 +-
 .../components/base/TeleportOverflowMenu.vue  |   2 +-
 .../components/billing/ResubscribeModal.vue   |   2 +-
 .../billing/ServersGuestPlanModal.vue         |   4 +-
 .../billing/ServersPurchase0Plan.vue          |   2 +-
 .../components/CustomSetupStage.vue           |   4 +-
 .../components/ImportInstanceStage.vue        |   9 +-
 .../components/ModpackStage.vue               |   2 +-
 .../components/modal/ConfirmLeaveModal.vue    |   2 +-
 packages/ui/src/components/modal/NewModal.vue |   2 +-
 .../src/components/modal/OpenInAppModal.vue   |  13 +-
 .../ui/src/components/modal/ShareModal.vue    | 143 ++---
 .../src/components/nav/NotificationPanel.vue  |   2 +-
 .../components/nav/PopupNotificationPanel.vue |   2 +-
 .../components/search/SearchFilterControl.vue |   2 +-
 .../src/components/servers/ServerListing.vue  |   2 -
 .../servers/backups/BackupCreateModal.vue     |   2 +-
 .../servers/backups/BackupDeleteModal.vue     |   2 +-
 .../servers/backups/BackupRenameModal.vue     |   2 +-
 .../servers/backups/BackupRestoreModal.vue    |   2 +-
 .../servers/content/ContentVersionFilter.vue  |   2 +-
 .../components/servers/icons/ServerIcon.vue   |   2 +-
 .../components/servers/labels/Separator.vue   |   2 +-
 .../version/VersionFilterControl.vue          |   2 +-
 .../ui/src/layouts/shared/console/layout.vue  |   2 +-
 .../components/ContentModpackCard.vue         |   6 +-
 .../modals/ConfirmBulkUpdateModal.vue         |   2 +-
 .../modals/ConfirmDeletionModal.vue           |   2 +-
 .../modals/ConfirmModpackUpdateModal.vue      |   2 +-
 .../modals/ConfirmReinstallModal.vue          |   2 +-
 .../components/modals/ConfirmRepairModal.vue  |   2 +-
 .../components/modals/ConfirmUnlinkModal.vue  |   2 +-
 .../components/modals/ContentInstallModal.vue |  13 +-
 .../components/modals/ContentUpdaterModal.vue |   2 +-
 .../src/layouts/shared/content-tab/layout.vue |   4 +-
 .../files-tab/components/FileContextMenu.vue  |   2 +-
 .../files-tab/components/FileNavbar.vue       |   4 +-
 .../components/editor/EditorFindReplace.vue   |   4 +-
 .../components/modals/FileCreateItemModal.vue |   2 +-
 .../components/modals/FileDeleteItemModal.vue |   2 +-
 .../components/modals/FileMoveItemModal.vue   |   2 +-
 .../components/modals/FileRenameItemModal.vue |   2 +-
 .../modals/FileUnsavedChangesModal.vue        |   2 +-
 .../modals/FileUploadConflictModal.vue        |   2 +-
 .../modals/FileUploadZipUrlModal.vue          |   2 +-
 .../shared/installation-settings/layout.vue   |   5 +-
 .../shared/server-settings/pages/network.vue  |   6 +-
 .../wrapped/hosting/manage/backups.vue        |   2 +-
 .../layouts/wrapped/hosting/manage/index.vue  |   2 +-
 .../layouts/wrapped/hosting/manage/root.vue   |   8 +-
 153 files changed, 2596 insertions(+), 3817 deletions(-)
 delete mode 100644 apps/app-frontend/src/components/ui/install_flow/ModInstallModal.vue

diff --git a/apps/app-frontend/src/App.vue b/apps/app-frontend/src/App.vue
index dbdce711c..9e12ac691 100644
--- a/apps/app-frontend/src/App.vue
+++ b/apps/app-frontend/src/App.vue
@@ -1177,7 +1177,7 @@ provideAppUpdateDownloadProgress(appUpdateDownload)
 	<div id="teleports"></div>
 	<div
 		v-if="stateInitialized"
-		class="app-grid-layout experimental-styles-within relative"
+		class="app-grid-layout relative"
 		:class="{ 'disable-advanced-rendering': !themeStore.advancedRendering }"
 	>
 		<Transition name="fade">
@@ -1378,7 +1378,7 @@ provideAppUpdateDownloadProgress(appUpdateDownload)
 	</div>
 	<div
 		v-if="stateInitialized"
-		class="app-contents experimental-styles-within"
+		class="app-contents"
 		:class="{
 			'sidebar-enabled': sidebarVisible,
 			'disable-advanced-rendering': !themeStore.advancedRendering,
@@ -1472,7 +1472,7 @@ provideAppUpdateDownloadProgress(appUpdateDownload)
 					<div class="p-4 border-0 border-b-[1px] border-[--brand-gradient-border] border-solid">
 						<h3 class="text-base text-primary font-medium m-0">Playing as</h3>
 						<suspense>
-							<AccountsCard ref="accounts" mode="small" />
+							<AccountsCard ref="accounts" />
 						</suspense>
 					</div>
 					<div class="p-4 border-0 border-b-[1px] border-[--brand-gradient-border] border-solid">
diff --git a/apps/app-frontend/src/components/ui/AccountsCard.vue b/apps/app-frontend/src/components/ui/AccountsCard.vue
index 493ce451e..7d01d2e67 100644
--- a/apps/app-frontend/src/components/ui/AccountsCard.vue
+++ b/apps/app-frontend/src/components/ui/AccountsCard.vue
@@ -1,81 +1,107 @@
 <template>
 	<div
-		v-if="mode !== 'isolated'"
-		ref="button"
-		class="button-base mt-2 px-3 py-2 bg-button-bg rounded-xl flex items-center gap-2"
-		:class="{ expanded: mode === 'expanded' }"
-		@click="toggleMenu"
+		v-if="accounts.length === 0"
+		class="flex flex-col gap-3 bg-button-bg border border-solid border-surface-5 rounded-xl p-3 mt-2"
 	>
-		<Avatar
-			size="36px"
-			:src="
-				selectedAccount ? avatarUrl : 'https://launcher-files.modrinth.com/assets/steve_head.png'
-			"
-		/>
-		<div class="flex flex-col w-full">
-			<span>{{ selectedAccount ? selectedAccount.profile.name : 'Select account' }}</span>
-			<span class="text-secondary text-xs">Minecraft account</span>
-		</div>
-		<DropdownIcon class="w-5 h-5 shrink-0" />
+		<span>{{ formatMessage(messages.notSignedIn) }}</span>
+		<ButtonStyled color="brand">
+			<button color="primary" :disabled="loginDisabled" @click="login()">
+				<LogInIcon v-if="!loginDisabled" />
+				<SpinnerIcon v-else class="animate-spin" />
+				{{ formatMessage(messages.signInToMinecraft) }}
+			</button>
+		</ButtonStyled>
 	</div>
-	<transition name="fade">
-		<Card
-			v-if="showCard || mode === 'isolated'"
-			ref="card"
-			class="account-card"
-			:class="{ expanded: mode === 'expanded', isolated: mode === 'isolated' }"
-		>
-			<div v-if="selectedAccount" class="selected account">
-				<Avatar size="xs" :src="avatarUrl" />
-				<div>
-					<h4>{{ selectedAccount.profile.name }}</h4>
-					<p>Selected</p>
-				</div>
-				<Button
-					v-tooltip="'Log out'"
-					icon-only
-					color="raised"
-					@click="logout(selectedAccount.profile.id)"
-				>
-					<TrashIcon />
-				</Button>
-			</div>
-			<div v-else class="logged-out account">
-				<h4>Not signed in</h4>
-				<Button
-					v-tooltip="'Log in'"
-					:disabled="loginDisabled"
-					icon-only
-					color="primary"
-					@click="login()"
-				>
-					<LogInIcon v-if="!loginDisabled" />
-					<SpinnerIcon v-else class="animate-spin" />
-				</Button>
-			</div>
-			<div v-if="displayAccounts.length > 0" class="account-group">
-				<div v-for="account in displayAccounts" :key="account.profile.id" class="account-row">
-					<Button class="option account" @click="setAccount(account)">
-						<Avatar :src="getAccountAvatarUrl(account)" class="icon" />
-						<p>{{ account.profile.name }}</p>
-					</Button>
-					<Button v-tooltip="'Log out'" icon-only @click="logout(account.profile.id)">
-						<TrashIcon />
-					</Button>
+	<Accordion
+		v-else
+		class="w-full mt-2 bg-button-bg border border-solid border-surface-5 rounded-xl overflow-clip"
+		button-class="button-base w-full bg-transparent px-3 py-2 border-0 cursor-pointer"
+		:open-by-default="false"
+	>
+		<template #title>
+			<div class="flex gap-2 w-full min-w-0">
+				<Avatar
+					size="36px"
+					:src="
+						selectedAccount
+							? avatarUrl
+							: 'https://launcher-files.modrinth.com/assets/steve_head.png'
+					"
+				/>
+				<div class="flex flex-col items-start w-full min-w-0">
+					<span class="truncate w-full text-left">{{
+						selectedAccount ? selectedAccount.profile.name : formatMessage(messages.selectAccount)
+					}}</span>
+					<span class="text-secondary text-xs">{{ formatMessage(messages.minecraftAccount) }}</span>
 				</div>
 			</div>
-			<Button v-if="accounts.length > 0" @click="login()">
-				<PlusIcon />
-				Add account
-			</Button>
-		</Card>
-	</transition>
+		</template>
+		<div class="bg-button-bg pt-1 pb-2 border border-solid border-surface-5">
+			<template v-if="accounts.length > 0">
+				<div v-for="account in accounts" :key="account.profile.id" class="flex gap-1 items-center">
+					<button
+						class="flex items-center flex-shrink flex-grow overflow-clip gap-2 p-2 border-0 bg-transparent cursor-pointer button-base min-w-0"
+						@click="setAccount(account)"
+					>
+						<RadioButtonCheckedIcon
+							v-if="selectedAccount && selectedAccount.profile.id === account.profile.id"
+							class="w-5 h-5 text-brand shrink-0"
+						/>
+						<RadioButtonIcon v-else class="w-5 h-5 text-secondary shrink-0" />
+						<Avatar :src="getAccountAvatarUrl(account)" size="24px" />
+						<p
+							class="m-0 truncate min-w-0"
+							:class="
+								selectedAccount && selectedAccount.profile.id === account.profile.id
+									? 'text-contrast font-semibold'
+									: 'text-primary'
+							"
+						>
+							{{ account.profile.name }}
+						</p>
+					</button>
+					<ButtonStyled circular color="red" color-fill="none" hover-color-fill="background">
+						<button
+							v-tooltip="formatMessage(messages.removeAccount)"
+							class="mr-2"
+							@click="logout(account.profile.id)"
+						>
+							<TrashIcon />
+						</button>
+					</ButtonStyled>
+				</div>
+			</template>
+			<div class="flex flex-col gap-2 px-2 pt-2">
+				<ButtonStyled v-if="accounts.length > 0" class="w-full">
+					<button :disabled="loginDisabled" @click="login()">
+						<PlusIcon />
+						{{ formatMessage(messages.addAccount) }}
+					</button>
+				</ButtonStyled>
+			</div>
+		</div>
+	</Accordion>
 </template>
 
-<script setup>
-import { DropdownIcon, LogInIcon, PlusIcon, SpinnerIcon, TrashIcon } from '@modrinth/assets'
-import { Avatar, Button, Card, injectNotificationManager } from '@modrinth/ui'
-import { computed, onBeforeUnmount, onMounted, onUnmounted, ref } from 'vue'
+<script setup lang="ts">
+import {
+	LogInIcon,
+	PlusIcon,
+	RadioButtonCheckedIcon,
+	RadioButtonIcon,
+	SpinnerIcon,
+	TrashIcon,
+} from '@modrinth/assets'
+import {
+	Accordion,
+	Avatar,
+	ButtonStyled,
+	defineMessages,
+	injectNotificationManager,
+	useVIntl,
+} from '@modrinth/ui'
+import type { Ref } from 'vue'
+import { computed, onUnmounted, ref } from 'vue'
 
 import { trackEvent } from '@/helpers/analytics'
 import {
@@ -87,34 +113,39 @@ import {
 } from '@/helpers/auth'
 import { process_listener } from '@/helpers/events'
 import { getPlayerHeadUrl } from '@/helpers/rendering/batch-skin-renderer.ts'
+import type { Skin } from '@/helpers/skins'
 import { get_available_skins } from '@/helpers/skins'
 import { handleSevereError } from '@/store/error.js'
 
+const { formatMessage } = useVIntl()
 const { handleError } = injectNotificationManager()
 
-defineProps({
-	mode: {
-		type: String,
-		required: true,
-		default: 'normal',
-	},
-})
+const emit = defineEmits<{
+	change: []
+}>()
 
-const emit = defineEmits(['change'])
+type MinecraftCredential = {
+	profile: {
+		id: string
+		name: string
+	}
+}
 
-const accounts = ref({})
+const accounts: Ref<MinecraftCredential[]> = ref([])
 const loginDisabled = ref(false)
-const defaultUser = ref()
-const equippedSkin = ref(null)
-const headUrlCache = ref(new Map())
+const defaultUser = ref<string | undefined>()
+const equippedSkin = ref<Skin | null>(null)
+const headUrlCache = ref(new Map<string, string>())
 
 async function refreshValues() {
 	defaultUser.value = await get_default_user().catch(handleError)
-	accounts.value = await users().catch(handleError)
+	const userList = await users().catch(handleError)
+	accounts.value = Array.isArray(userList) ? [...userList] : []
+	accounts.value.sort((a, b) => (a.profile?.name ?? '').localeCompare(b.profile?.name ?? ''))
 
 	try {
 		const skins = await get_available_skins()
-		equippedSkin.value = skins.find((skin) => skin.is_equipped)
+		equippedSkin.value = skins.find((skin) => skin.is_equipped) ?? null
 
 		if (equippedSkin.value) {
 			try {
@@ -129,7 +160,7 @@ async function refreshValues() {
 	}
 }
 
-function setLoginDisabled(value) {
+function setLoginDisabled(value: boolean) {
 	loginDisabled.value = value
 }
 
@@ -138,10 +169,11 @@ defineExpose({
 	setLoginDisabled,
 	loginDisabled,
 })
+
 await refreshValues()
 
-const displayAccounts = computed(() =>
-	accounts.value.filter((account) => defaultUser.value !== account.profile.id),
+const selectedAccount = computed(() =>
+	accounts.value.find((account) => account.profile.id === defaultUser.value),
 )
 
 const avatarUrl = computed(() => {
@@ -158,7 +190,7 @@ const avatarUrl = computed(() => {
 	return 'https://launcher-files.modrinth.com/assets/steve_head.png'
 })
 
-function getAccountAvatarUrl(account) {
+function getAccountAvatarUrl(account: MinecraftCredential) {
 	if (
 		account.profile.id === selectedAccount.value?.profile?.id &&
 		equippedSkin.value?.texture_key
@@ -171,13 +203,10 @@ function getAccountAvatarUrl(account) {
 	return `https://mc-heads.net/avatar/${account.profile.id}/128`
 }
 
-const selectedAccount = computed(() =>
-	accounts.value.find((account) => account.profile.id === defaultUser.value),
-)
-
-async function setAccount(account) {
+async function setAccount(account: MinecraftCredential) {
 	defaultUser.value = account.profile.id
 	await set_default_user(account.profile.id).catch(handleError)
+	await refreshValues()
 	emit('change')
 }
 
@@ -187,292 +216,57 @@ async function login() {
 
 	if (loggedIn) {
 		await setAccount(loggedIn)
-		await refreshValues()
 	}
 
 	trackEvent('AccountLogIn')
 	loginDisabled.value = false
 }
 
-const logout = async (id) => {
+async function logout(id: string) {
 	await remove_user(id).catch(handleError)
 	await refreshValues()
 	if (!selectedAccount.value && accounts.value.length > 0) {
 		await setAccount(accounts.value[0])
-		await refreshValues()
 	} else {
 		emit('change')
 	}
 	trackEvent('AccountLogOut')
 }
 
-const showCard = ref(false)
-const card = ref(null)
-const button = ref(null)
-const handleClickOutside = (event) => {
-	const elements = document.elementsFromPoint(event.clientX, event.clientY)
-	if (
-		card.value &&
-		card.value.$el !== event.target &&
-		!elements.includes(card.value.$el) &&
-		!button.value.contains(event.target)
-	) {
-		toggleMenu(false)
-	}
-}
-
-function toggleMenu(override = true) {
-	if (showCard.value || !override) {
-		showCard.value = false
-	} else {
-		showCard.value = true
-	}
-}
-
 const unlisten = await process_listener(async (e) => {
 	if (e.event === 'launched') {
 		await refreshValues()
 	}
 })
 
-onMounted(() => {
-	window.addEventListener('click', handleClickOutside)
-})
-
-onBeforeUnmount(() => {
-	window.removeEventListener('click', handleClickOutside)
-})
-
 onUnmounted(() => {
 	unlisten()
 })
+
+const messages = defineMessages({
+	notSignedIn: {
+		id: 'minecraft-account.not-signed-in',
+		defaultMessage: 'Not signed in',
+	},
+	addAccount: {
+		id: 'minecraft-account.add-account',
+		defaultMessage: 'Add account',
+	},
+	removeAccount: {
+		id: 'minecraft-account.remove-account',
+		defaultMessage: 'Remove account',
+	},
+	selectAccount: {
+		id: 'minecraft-account.select-account',
+		defaultMessage: 'Select account',
+	},
+	minecraftAccount: {
+		id: 'minecraft-account.label',
+		defaultMessage: 'Minecraft account',
+	},
+	signInToMinecraft: {
+		id: 'minecraft-account.sign-in',
+		defaultMessage: 'Sign in to Minecraft',
+	},
+})
 </script>
-
-<style scoped lang="scss">
-.selected {
-	background: var(--color-brand-highlight);
-	border-radius: var(--radius-lg);
-	color: var(--color-contrast);
-	gap: 1rem;
-}
-
-.logged-out {
-	background: var(--color-bg);
-	border-radius: var(--radius-lg);
-	gap: 1rem;
-}
-
-.account {
-	width: max-content;
-	display: flex;
-	align-items: center;
-	text-align: left;
-	padding: 0.5rem 1rem;
-
-	h4,
-	p {
-		margin: 0;
-	}
-}
-
-.account-card {
-	position: fixed;
-	display: flex;
-	flex-direction: column;
-	margin-top: 0.5rem;
-	right: 2rem;
-	z-index: 11;
-	gap: 0.5rem;
-	padding: 1rem;
-	border: 1px solid var(--color-divider);
-	width: max-content;
-	user-select: none;
-	-ms-user-select: none;
-	-webkit-user-select: none;
-	max-height: calc(100vh - 300px);
-	overflow-y: auto;
-
-	&::-webkit-scrollbar-track {
-		border-top-right-radius: 1rem;
-		border-bottom-right-radius: 1rem;
-	}
-
-	&::-webkit-scrollbar {
-		border-top-right-radius: 1rem;
-		border-bottom-right-radius: 1rem;
-	}
-
-	&.hidden {
-		display: none;
-	}
-
-	&.expanded {
-		left: 13.5rem;
-	}
-
-	&.isolated {
-		position: relative;
-		left: 0;
-		top: 0;
-	}
-}
-
-.accounts-title {
-	font-size: 1.2rem;
-	font-weight: bolder;
-}
-
-.account-group {
-	width: 100%;
-	display: flex;
-	flex-direction: column;
-	gap: 0.5rem;
-}
-
-.option {
-	width: calc(100% - 2.25rem);
-	background: var(--color-raised-bg);
-	color: var(--color-base);
-	box-shadow: none;
-
-	img {
-		margin-right: 0.5rem;
-	}
-}
-
-.icon {
-	--size: 1.5rem !important;
-}
-
-.account-row {
-	display: flex;
-	flex-direction: row;
-	gap: 0.5rem;
-	vertical-align: center;
-	justify-content: space-between;
-	padding-right: 1rem;
-}
-
-.fade-enter-active,
-.fade-leave-active {
-	transition:
-		opacity 0.25s ease,
-		translate 0.25s ease,
-		scale 0.25s ease;
-}
-
-.fade-enter-from,
-.fade-leave-to {
-	opacity: 0;
-	translate: 0 -2rem;
-	scale: 0.9;
-}
-
-.avatar-button {
-	display: flex;
-	align-items: center;
-	gap: 0.5rem;
-	color: var(--color-base);
-	background-color: var(--color-button-bg);
-	border-radius: var(--radius-md);
-	width: 100%;
-	padding: 0.5rem 0.75rem;
-	text-align: left;
-
-	&.expanded {
-		border: 1px solid var(--color-divider);
-		padding: 1rem;
-	}
-}
-
-.avatar-text {
-	margin: auto 0 auto 0.25rem;
-	display: flex;
-	flex-direction: column;
-}
-
-.text {
-	width: 6rem;
-	white-space: nowrap;
-	overflow: hidden;
-	text-overflow: ellipsis;
-}
-
-.accounts-text {
-	display: flex;
-	align-items: center;
-	gap: 0.25rem;
-	margin: 0;
-}
-
-.qr-code {
-	background-color: white !important;
-	border-radius: var(--radius-md);
-}
-
-.modal-body {
-	display: flex;
-	flex-direction: row;
-	gap: var(--gap-lg);
-	align-items: center;
-	padding: var(--gap-xl);
-
-	.modal-text {
-		display: flex;
-		flex-direction: column;
-		gap: var(--gap-sm);
-		width: 100%;
-
-		h2,
-		p {
-			margin: 0;
-		}
-
-		.code-text {
-			display: flex;
-			flex-direction: row;
-			gap: var(--gap-xs);
-			align-items: center;
-
-			.code {
-				background-color: var(--color-bg);
-				border-radius: var(--radius-md);
-				border: solid 1px var(--color-button-bg);
-				font-family: var(--mono-font);
-				letter-spacing: var(--gap-md);
-				color: var(--color-contrast);
-				font-size: 2rem;
-				font-weight: bold;
-				padding: var(--gap-sm) 0 var(--gap-sm) var(--gap-md);
-			}
-
-			.btn {
-				width: 2.5rem;
-				height: 2.5rem;
-			}
-		}
-	}
-}
-
-.button-row {
-	display: flex;
-	flex-direction: row;
-}
-
-.modal {
-	position: absolute;
-}
-
-.code {
-	color: var(--color-brand);
-	padding: 0.05rem 0.1rem;
-	// row not column
-	display: flex;
-
-	.card {
-		background: var(--color-base);
-		color: var(--color-contrast);
-		padding: 0.5rem 1rem;
-	}
-}
-</style>
diff --git a/apps/app-frontend/src/components/ui/ExportModal.vue b/apps/app-frontend/src/components/ui/ExportModal.vue
index fa605f320..c6879ada3 100644
--- a/apps/app-frontend/src/components/ui/ExportModal.vue
+++ b/apps/app-frontend/src/components/ui/ExportModal.vue
@@ -1,7 +1,7 @@
 <script setup>
 import { PlusIcon, XIcon } from '@modrinth/assets'
 import {
-	Button,
+	ButtonStyled,
 	Checkbox,
 	commonMessages,
 	defineMessages,
@@ -179,14 +179,12 @@ const exportPack = async () => {
 				<div class="table-head">
 					<div class="table-cell row-wise">
 						{{ formatMessage(messages.selectFilesLabel) }}
-						<Button
-							class="sleek-primary collapsed-button"
-							icon-only
-							@click="() => (showingFiles = !showingFiles)"
-						>
-							<PlusIcon v-if="!showingFiles" />
-							<XIcon v-else />
-						</Button>
+						<ButtonStyled circular>
+							<button @click="() => (showingFiles = !showingFiles)">
+								<PlusIcon v-if="!showingFiles" />
+								<XIcon v-else />
+							</button>
+						</ButtonStyled>
 					</div>
 				</div>
 				<div v-if="showingFiles" class="table-content">
@@ -235,14 +233,18 @@ const exportPack = async () => {
 				</div>
 			</div>
 			<div class="button-row push-right">
-				<Button @click="exportModal.hide">
-					<XIcon />
-					{{ formatMessage(commonMessages.cancelButton) }}
-				</Button>
-				<Button color="primary" @click="exportPack">
-					<PackageIcon />
-					{{ formatMessage(messages.exportButton) }}
-				</Button>
+				<ButtonStyled type="outlined">
+					<button @click="exportModal.hide">
+						<XIcon />
+						{{ formatMessage(commonMessages.cancelButton) }}
+					</button>
+				</ButtonStyled>
+				<ButtonStyled color="brand">
+					<button @click="exportPack">
+						<PackageIcon />
+						{{ formatMessage(messages.exportButton) }}
+					</button>
+				</ButtonStyled>
 			</div>
 		</div>
 	</ModalWrapper>
diff --git a/apps/app-frontend/src/components/ui/JavaDetectionModal.vue b/apps/app-frontend/src/components/ui/JavaDetectionModal.vue
index 472d000f4..844aff52f 100644
--- a/apps/app-frontend/src/components/ui/JavaDetectionModal.vue
+++ b/apps/app-frontend/src/components/ui/JavaDetectionModal.vue
@@ -15,10 +15,12 @@
 						<span>{{ javaInstall.path }}</span>
 					</div>
 					<div class="table-cell table-text manage">
-						<Button v-if="currentSelected.path === javaInstall.path" disabled
-							><CheckIcon /> Selected</Button
-						>
-						<Button v-else @click="setJavaInstall(javaInstall)"><PlusIcon /> Select</Button>
+						<ButtonStyled v-if="currentSelected.path === javaInstall.path">
+							<button disabled><CheckIcon /> Selected</button>
+						</ButtonStyled>
+						<ButtonStyled v-else>
+							<button @click="setJavaInstall(javaInstall)"><PlusIcon /> Select</button>
+						</ButtonStyled>
 					</div>
 				</div>
 				<div v-if="chosenInstallOptions.length === 0" class="table-row entire-row">
@@ -26,17 +28,19 @@
 				</div>
 			</div>
 			<div class="input-group push-right">
-				<Button @click="$refs.detectJavaModal.hide()">
-					<XIcon />
-					Cancel
-				</Button>
+				<ButtonStyled type="outlined">
+					<button @click="$refs.detectJavaModal.hide()">
+						<XIcon />
+						Cancel
+					</button>
+				</ButtonStyled>
 			</div>
 		</div>
 	</ModalWrapper>
 </template>
 <script setup>
 import { CheckIcon, PlusIcon, XIcon } from '@modrinth/assets'
-import { Button, injectNotificationManager } from '@modrinth/ui'
+import { ButtonStyled, injectNotificationManager } from '@modrinth/ui'
 import { ref } from 'vue'
 
 import ModalWrapper from '@/components/ui/modal/ModalWrapper.vue'
diff --git a/apps/app-frontend/src/components/ui/JavaSelector.vue b/apps/app-frontend/src/components/ui/JavaSelector.vue
index 5cffeb16c..505616626 100644
--- a/apps/app-frontend/src/components/ui/JavaSelector.vue
+++ b/apps/app-frontend/src/components/ui/JavaSelector.vue
@@ -17,35 +17,45 @@
 			"
 		/>
 		<span class="installation-buttons">
-			<Button
-				v-if="props.version"
-				:disabled="props.disabled || installingJava"
-				@click="reinstallJava"
-			>
-				<DownloadIcon />
-				{{ installingJava ? 'Installing...' : 'Install recommended' }}
-			</Button>
-			<Button :disabled="props.disabled" @click="autoDetect">
-				<SearchIcon />
-				Detect
-			</Button>
-			<Button :disabled="props.disabled" @click="handleJavaFileInput()">
-				<FolderSearchIcon />
-				Browse
-			</Button>
-			<Button v-if="testingJava" disabled> Testing... </Button>
-			<Button v-else-if="testingJavaSuccess === true">
-				<CheckIcon class="test-success" />
-				Success
-			</Button>
-			<Button v-else-if="testingJavaSuccess === false">
-				<XIcon class="test-fail" />
-				Failed
-			</Button>
-			<Button v-else :disabled="props.disabled" @click="testJava">
-				<PlayIcon />
-				Test
-			</Button>
+			<ButtonStyled v-if="props.version">
+				<button :disabled="props.disabled || installingJava" @click="reinstallJava">
+					<DownloadIcon />
+					{{ installingJava ? 'Installing...' : 'Install recommended' }}
+				</button>
+			</ButtonStyled>
+			<ButtonStyled>
+				<button :disabled="props.disabled" @click="autoDetect">
+					<SearchIcon />
+					Detect
+				</button>
+			</ButtonStyled>
+			<ButtonStyled>
+				<button :disabled="props.disabled" @click="handleJavaFileInput()">
+					<FolderSearchIcon />
+					Browse
+				</button>
+			</ButtonStyled>
+			<ButtonStyled v-if="testingJava">
+				<button disabled>Testing...</button>
+			</ButtonStyled>
+			<ButtonStyled v-else-if="testingJavaSuccess === true">
+				<button disabled>
+					<CheckIcon />
+					Success
+				</button>
+			</ButtonStyled>
+			<ButtonStyled v-else-if="testingJavaSuccess === false">
+				<button disabled>
+					<XIcon />
+					Failed
+				</button>
+			</ButtonStyled>
+			<ButtonStyled v-else>
+				<button :disabled="props.disabled" @click="testJava">
+					<PlayIcon />
+					Test
+				</button>
+			</ButtonStyled>
 		</span>
 	</div>
 </template>
@@ -59,7 +69,7 @@ import {
 	SearchIcon,
 	XIcon,
 } from '@modrinth/assets'
-import { Button, injectNotificationManager, StyledInput } from '@modrinth/ui'
+import { ButtonStyled, injectNotificationManager, StyledInput } from '@modrinth/ui'
 import { open } from '@tauri-apps/plugin-dialog'
 import { ref } from 'vue'
 
@@ -204,10 +214,6 @@ async function reinstallJava() {
 	align-items: center;
 	gap: 0.5rem;
 	margin: 0;
-
-	.btn {
-		width: max-content;
-	}
 }
 
 .test-success {
diff --git a/apps/app-frontend/src/components/ui/ModpackVersionModal.vue b/apps/app-frontend/src/components/ui/ModpackVersionModal.vue
index f804be587..c0014b084 100644
--- a/apps/app-frontend/src/components/ui/ModpackVersionModal.vue
+++ b/apps/app-frontend/src/components/ui/ModpackVersionModal.vue
@@ -1,6 +1,6 @@
 <script setup>
 import { CheckIcon } from '@modrinth/assets'
-import { Badge, Button } from '@modrinth/ui'
+import { Badge, ButtonStyled } from '@modrinth/ui'
 import { computed, ref } from 'vue'
 
 import { SwapIcon } from '@/assets/icons/index.js'
@@ -74,15 +74,18 @@ const onHide = () => {
 							@click="$router.push(`/project/${version.project_id}/version/${version.id}`)"
 						>
 							<div class="table-cell table-text">
-								<Button
-									:color="version.id === installedVersion ? '' : 'primary'"
-									icon-only
-									:disabled="inProgress || installing || version.id === installedVersion"
-									@click.stop="() => switchVersion(version.id)"
+								<ButtonStyled
+									circular
+									:color="version.id === installedVersion ? 'standard' : 'brand'"
 								>
-									<SwapIcon v-if="version.id !== installedVersion" />
-									<CheckIcon v-else />
-								</Button>
+									<button
+										:disabled="inProgress || installing || version.id === installedVersion"
+										@click.stop="() => switchVersion(version.id)"
+									>
+										<SwapIcon v-if="version.id !== installedVersion" />
+										<CheckIcon v-else />
+									</button>
+								</ButtonStyled>
 							</div>
 							<div class="name-cell table-cell table-text">
 								<div class="version-link">
diff --git a/apps/app-frontend/src/components/ui/URLConfirmModal.vue b/apps/app-frontend/src/components/ui/URLConfirmModal.vue
index 0ec7cd0bc..8a48cab8c 100644
--- a/apps/app-frontend/src/components/ui/URLConfirmModal.vue
+++ b/apps/app-frontend/src/components/ui/URLConfirmModal.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { Button, injectNotificationManager, ProjectCard } from '@modrinth/ui'
+import { ButtonStyled, injectNotificationManager, ProjectCard } from '@modrinth/ui'
 import { ref } from 'vue'
 
 import ModalWrapper from '@/components/ui/modal/ModalWrapper.vue'
@@ -12,7 +12,6 @@ const { install: installVersion } = injectContentInstall()
 const confirmModal = ref(null)
 const project = ref(null)
 const version = ref(null)
-const installing = ref(false)
 
 defineExpose({
 	async show(event) {
@@ -70,7 +69,9 @@ async function install() {
 					</p>
 				</div>
 				<div class="button-group">
-					<Button :loading="installing" color="primary" @click="install">Install</Button>
+					<ButtonStyled color="brand">
+						<button @click="install">Install</button>
+					</ButtonStyled>
 				</div>
 			</div>
 		</div>
diff --git a/apps/app-frontend/src/components/ui/install_flow/IncompatibilityWarningModal.vue b/apps/app-frontend/src/components/ui/install_flow/IncompatibilityWarningModal.vue
index dd04ae88b..cfcd48329 100644
--- a/apps/app-frontend/src/components/ui/install_flow/IncompatibilityWarningModal.vue
+++ b/apps/app-frontend/src/components/ui/install_flow/IncompatibilityWarningModal.vue
@@ -34,10 +34,14 @@
 				</tbody>
 			</table>
 			<div class="button-group">
-				<Button @click="() => incompatibleModal.hide()"><XIcon />Cancel</Button>
-				<Button color="primary" :disabled="installing" @click="install()">
-					<DownloadIcon /> {{ installing ? 'Installing' : 'Install' }}
-				</Button>
+				<ButtonStyled type="outlined">
+					<button @click="() => incompatibleModal.hide()"><XIcon />Cancel</button>
+				</ButtonStyled>
+				<ButtonStyled color="brand">
+					<button :disabled="installing" @click="install()">
+						<DownloadIcon /> {{ installing ? 'Installing' : 'Install' }}
+					</button>
+				</ButtonStyled>
 			</div>
 		</div>
 	</ModalWrapper>
@@ -45,7 +49,13 @@
 
 <script setup>
 import { DownloadIcon, XIcon } from '@modrinth/assets'
-import { Button, Combobox, formatLoader, injectNotificationManager, useVIntl } from '@modrinth/ui'
+import {
+	ButtonStyled,
+	Combobox,
+	formatLoader,
+	injectNotificationManager,
+	useVIntl,
+} from '@modrinth/ui'
 import { computed, ref } from 'vue'
 
 import ModalWrapper from '@/components/ui/modal/ModalWrapper.vue'
diff --git a/apps/app-frontend/src/components/ui/install_flow/ModInstallModal.vue b/apps/app-frontend/src/components/ui/install_flow/ModInstallModal.vue
deleted file mode 100644
index 243cc03e2..000000000
--- a/apps/app-frontend/src/components/ui/install_flow/ModInstallModal.vue
+++ /dev/null
@@ -1,418 +0,0 @@
-<script setup>
-import {
-	CheckIcon,
-	DownloadIcon,
-	PlusIcon,
-	RightArrowIcon,
-	SearchIcon,
-	UploadIcon,
-	XIcon,
-} from '@modrinth/assets'
-import { Avatar, Button, Card, injectNotificationManager, StyledInput } from '@modrinth/ui'
-import { convertFileSrc } from '@tauri-apps/api/core'
-import { open } from '@tauri-apps/plugin-dialog'
-import { computed, ref } from 'vue'
-import { useRouter } from 'vue-router'
-
-import ModalWrapper from '@/components/ui/modal/ModalWrapper.vue'
-import { trackEvent } from '@/helpers/analytics'
-import { get_project_v3_many } from '@/helpers/cache.js'
-import {
-	add_project_from_version as installMod,
-	check_installed,
-	create,
-	get,
-	list,
-} from '@/helpers/profile'
-import {
-	findPreferredVersion,
-	installVersionDependencies,
-	isVersionCompatible,
-} from '@/store/install.js'
-
-const { handleError } = injectNotificationManager()
-const router = useRouter()
-
-const versions = ref()
-const project = ref()
-
-const installModal = ref()
-const searchFilter = ref('')
-
-const showCreation = ref(false)
-const icon = ref(null)
-const name = ref(null)
-const display_icon = ref(null)
-const loader = ref(null)
-const gameVersion = ref(null)
-const creatingInstance = ref(false)
-
-const profiles = ref([])
-
-const shownProfiles = computed(() =>
-	profiles.value.filter((profile) => {
-		return profile.name.toLowerCase().includes(searchFilter.value.toLowerCase())
-	}),
-)
-
-const isProfileCompatible = (profile) =>
-	versions.value?.some((version) => isVersionCompatible(version, project.value, profile))
-
-const onInstall = ref(() => {})
-
-defineExpose({
-	show: async (projectVal, versionsVal, callback) => {
-		project.value = projectVal
-		versions.value = versionsVal
-		searchFilter.value = ''
-
-		showCreation.value = false
-		name.value = null
-		icon.value = null
-		display_icon.value = null
-		gameVersion.value = null
-		loader.value = null
-
-		onInstall.value = callback
-
-		const profilesVal = await list().catch(handleError)
-		for (const profile of profilesVal) {
-			profile.installing = false
-			profile.installedMod = await check_installed(profile.path, project.value.id).catch(
-				handleError,
-			)
-		}
-
-		const linkedProjectIds = profilesVal
-			.filter((p) => p.linked_data?.project_id)
-			.map((p) => p.linked_data.project_id)
-		if (linkedProjectIds.length > 0) {
-			const linkedProjects = await get_project_v3_many(linkedProjectIds, 'must_revalidate').catch(
-				() => [],
-			)
-			const serverProjectIds = new Set(
-				linkedProjects.filter((p) => p?.minecraft_server != null).map((p) => p.id),
-			)
-			for (const profile of profilesVal) {
-				profile.isServerInstance = serverProjectIds.has(profile.linked_data?.project_id)
-			}
-		}
-
-		profiles.value = profilesVal
-
-		installModal.value.show()
-
-		trackEvent('ProjectInstallStart', { source: 'ProjectInstallModal' })
-	},
-})
-
-async function install(instance) {
-	instance.installing = true
-	const version = findPreferredVersion(versions.value, project.value, instance)
-
-	if (!version) {
-		instance.installing = false
-		handleError('No compatible version found')
-		return
-	}
-
-	await installMod(instance.path, version.id, 'standalone').catch(handleError)
-	await installVersionDependencies(instance, version).catch(handleError)
-
-	instance.installedMod = true
-	instance.installing = false
-
-	trackEvent('ProjectInstall', {
-		loader: instance.loader,
-		game_version: instance.game_version,
-		id: project.value.id,
-		version_id: version.id,
-		project_type: project.value.project_type,
-		title: project.value.title,
-		source: 'ProjectInstallModal',
-	})
-
-	onInstall.value(version.id)
-}
-
-const toggleCreation = () => {
-	showCreation.value = !showCreation.value
-	name.value = null
-	icon.value = null
-	display_icon.value = null
-	gameVersion.value = null
-	loader.value = null
-
-	if (showCreation.value) {
-		trackEvent('InstanceCreateStart', { source: 'ProjectInstallModal' })
-	}
-}
-
-const upload_icon = async () => {
-	const res = await open({
-		multiple: false,
-		filters: [
-			{
-				name: 'Image',
-				extensions: ['png', 'jpeg'],
-			},
-		],
-	})
-	icon.value = res.path ?? res
-
-	if (!icon.value) return
-	display_icon.value = convertFileSrc(icon.value)
-}
-
-const reset_icon = () => {
-	icon.value = null
-	display_icon.value = null
-}
-
-const createInstance = async () => {
-	creatingInstance.value = true
-
-	const gameVersions = versions.value[0].game_versions
-	const gameVersion = gameVersions[0]
-
-	const loaders = versions.value[0].loaders
-	const loader = loaders.includes('fabric')
-		? 'fabric'
-		: loaders.includes('neoforge')
-			? 'neoforge'
-			: loaders.includes('forge')
-				? 'forge'
-				: loaders.includes('quilt')
-					? 'quilt'
-					: 'vanilla'
-
-	const id = await create(name.value, gameVersion, loader, 'latest', icon.value).catch(handleError)
-
-	await installMod(id, versions.value[0].id, 'standalone').catch(handleError)
-
-	await router.push(`/instance/${encodeURIComponent(id)}/`)
-
-	const instance = await get(id, true)
-	await installVersionDependencies(instance, versions.value[0]).catch(handleError)
-
-	trackEvent('InstanceCreate', {
-		profile_name: name.value,
-		game_version: versions.value[0].game_versions[0],
-		loader: loader,
-		loader_version: 'latest',
-		has_icon: !!icon.value,
-		source: 'ProjectInstallModal',
-	})
-
-	trackEvent('ProjectInstall', {
-		loader: loader,
-		game_version: versions.value[0].game_versions[0],
-		id: project.value,
-		version_id: versions.value[0].id,
-		project_type: project.value.project_type,
-		title: project.value.title,
-		source: 'ProjectInstallModal',
-	})
-
-	onInstall.value(versions.value[0].id)
-
-	if (installModal.value) installModal.value.hide()
-	creatingInstance.value = false
-}
-</script>
-
-<template>
-	<ModalWrapper ref="installModal" header="Install project to instance" :on-hide="onInstall">
-		<div class="modal-body">
-			<StyledInput
-				v-model="searchFilter"
-				:icon="SearchIcon"
-				type="search"
-				placeholder="Search for an instance"
-				autocomplete="off"
-			/>
-			<div class="profiles" :class="{ 'hide-creation': !showCreation }">
-				<div v-for="profile in shownProfiles" :key="profile.name" class="option">
-					<router-link
-						class="btn btn-transparent profile-button"
-						:to="`/instance/${encodeURIComponent(profile.path)}`"
-						@click="installModal.hide()"
-					>
-						<Avatar
-							:src="profile.icon_path ? convertFileSrc(profile.icon_path) : null"
-							class="profile-image"
-						/>
-						{{ profile.name }}
-					</router-link>
-					<div
-						v-tooltip="
-							profile.linked_data?.locked && !profile.installedMod
-								? 'Unpair or unlock an instance to add mods.'
-								: ''
-						"
-					>
-						<Button
-							:disabled="
-								!isProfileCompatible(profile) || profile.installedMod || profile.installing
-							"
-							@click="install(profile)"
-						>
-							<DownloadIcon
-								v-if="isProfileCompatible(profile) && !profile.installedMod && !profile.installing"
-							/>
-							<CheckIcon v-else-if="profile.installedMod" />
-							{{
-								profile.installing
-									? 'Installing...'
-									: profile.installedMod
-										? 'Installed'
-										: !isProfileCompatible(profile)
-											? 'Incompatible'
-											: 'Install'
-							}}
-						</Button>
-					</div>
-				</div>
-			</div>
-			<Card v-if="showCreation" class="creation-card">
-				<div class="creation-container">
-					<div class="creation-icon">
-						<Avatar size="md" class="icon" :src="display_icon" />
-						<div class="creation-icon__description">
-							<Button @click="upload_icon()">
-								<UploadIcon />
-								<span class="no-wrap"> Select icon </span>
-							</Button>
-							<Button :disabled="!display_icon" @click="reset_icon()">
-								<XIcon />
-								<span class="no-wrap"> Remove icon </span>
-							</Button>
-						</div>
-					</div>
-					<div class="creation-settings">
-						<StyledInput
-							v-model="name"
-							autocomplete="off"
-							type="text"
-							placeholder="Name"
-							class="creation-input"
-						/>
-						<Button :disabled="creatingInstance === true || !name" @click="createInstance()">
-							<RightArrowIcon />
-							{{ creatingInstance ? 'Creating...' : 'Create' }}
-						</Button>
-					</div>
-				</div>
-			</Card>
-			<div class="input-group push-right">
-				<Button :color="showCreation ? '' : 'primary'" @click="toggleCreation()">
-					<PlusIcon />
-					{{ showCreation ? 'Hide New Instance' : 'Create new instance' }}
-				</Button>
-				<Button @click="installModal.hide()">Cancel</Button>
-			</div>
-		</div>
-	</ModalWrapper>
-</template>
-
-<style scoped lang="scss">
-.creation-card {
-	display: flex;
-	flex-direction: column;
-	gap: 1rem;
-	margin: 0;
-	background-color: var(--color-bg);
-}
-
-.creation-container {
-	display: flex;
-	flex-direction: row;
-	gap: 1rem;
-}
-
-.creation-icon {
-	display: flex;
-	flex-direction: row;
-	gap: 1rem;
-	align-items: center;
-	flex-grow: 1;
-
-	.creation-icon__description {
-		display: flex;
-		flex-direction: column;
-		gap: 0.5rem;
-	}
-}
-
-.creation-input {
-	width: 100%;
-}
-
-.no-wrap {
-	white-space: nowrap;
-}
-
-.creation-dropdown {
-	width: min-content !important;
-	display: flex;
-	flex-direction: column;
-	gap: 0.5rem;
-}
-
-.creation-settings {
-	width: 100%;
-	margin-left: 0.5rem;
-	display: flex;
-	flex-direction: column;
-	gap: 0.5rem;
-	justify-content: center;
-}
-
-.modal-body {
-	display: flex;
-	flex-direction: column;
-	gap: 1rem;
-	min-width: 350px;
-}
-
-.profiles {
-	max-height: 12rem;
-	overflow-y: auto;
-
-	&.hide-creation {
-		max-height: 21rem;
-	}
-}
-
-.option {
-	width: calc(100%);
-	background: var(--color-raised-bg);
-	color: var(--color-base);
-	box-shadow: none;
-	display: flex;
-	flex-direction: row;
-	justify-content: space-between;
-	align-items: center;
-	gap: 0.5rem;
-
-	img {
-		margin-right: 0.5rem;
-	}
-
-	.name {
-		display: flex;
-		flex-direction: column;
-		justify-content: center;
-	}
-
-	.profile-button {
-		align-content: start;
-		padding: 0.5rem;
-		text-align: left;
-	}
-}
-
-.profile-image {
-	--size: 2rem !important;
-}
-</style>
diff --git a/apps/app-frontend/src/components/ui/modal/ConfirmDeleteInstanceModal.vue b/apps/app-frontend/src/components/ui/modal/ConfirmDeleteInstanceModal.vue
index a2ee2a05c..d6c869ba1 100644
--- a/apps/app-frontend/src/components/ui/modal/ConfirmDeleteInstanceModal.vue
+++ b/apps/app-frontend/src/components/ui/modal/ConfirmDeleteInstanceModal.vue
@@ -7,7 +7,7 @@
 		<template #actions>
 			<div class="flex gap-2 justify-end">
 				<ButtonStyled type="outlined">
-					<button class="!border !border-surface-4" @click="modal?.hide()">
+					<button @click="modal?.hide()">
 						<XIcon />
 						{{ formatMessage(commonMessages.cancelButton) }}
 					</button>
diff --git a/apps/app-frontend/src/components/ui/modal/ModpackAlreadyInstalledModal.vue b/apps/app-frontend/src/components/ui/modal/ModpackAlreadyInstalledModal.vue
index daf238793..1fdf7e60d 100644
--- a/apps/app-frontend/src/components/ui/modal/ModpackAlreadyInstalledModal.vue
+++ b/apps/app-frontend/src/components/ui/modal/ModpackAlreadyInstalledModal.vue
@@ -11,7 +11,7 @@
 		<template #actions>
 			<div class="flex gap-2 justify-end">
 				<ButtonStyled type="outlined">
-					<button class="!border !border-surface-4" @click="handleCancel">
+					<button @click="handleCancel">
 						<XIcon />
 						{{ formatMessage(commonMessages.cancelButton) }}
 					</button>
diff --git a/apps/app-frontend/src/components/ui/settings/ResourceManagementSettings.vue b/apps/app-frontend/src/components/ui/settings/ResourceManagementSettings.vue
index 0a8bf5481..1e0eed363 100644
--- a/apps/app-frontend/src/components/ui/settings/ResourceManagementSettings.vue
+++ b/apps/app-frontend/src/components/ui/settings/ResourceManagementSettings.vue
@@ -1,6 +1,6 @@
 <script setup>
 import { BoxIcon, FolderSearchIcon, TrashIcon } from '@modrinth/assets'
-import { Button, injectNotificationManager, Slider, StyledInput } from '@modrinth/ui'
+import { ButtonStyled, injectNotificationManager, Slider, StyledInput } from '@modrinth/ui'
 import { open } from '@tauri-apps/plugin-dialog'
 import { ref, watch } from 'vue'
 
@@ -73,9 +73,11 @@ async function findLauncherDir() {
 				wrapper-class="w-full"
 			>
 				<template #right>
-					<Button class="ml-1.5" @click="findLauncherDir">
-						<FolderSearchIcon />
-					</Button>
+					<ButtonStyled circular>
+						<button class="ml-1.5" @click="findLauncherDir">
+							<FolderSearchIcon />
+						</button>
+					</ButtonStyled>
 				</template>
 			</StyledInput>
 			<p class="m-0 leading-tight text-secondary">
diff --git a/apps/app-frontend/src/components/ui/skin/EditSkinModal.vue b/apps/app-frontend/src/components/ui/skin/EditSkinModal.vue
index 56d418ce7..5b3a4485c 100644
--- a/apps/app-frontend/src/components/ui/skin/EditSkinModal.vue
+++ b/apps/app-frontend/src/components/ui/skin/EditSkinModal.vue
@@ -25,7 +25,9 @@
 			<div class="flex flex-col gap-4 w-full min-h-[20rem]">
 				<section>
 					<h2 class="text-base font-semibold mb-2">Texture</h2>
-					<Button @click="openUploadSkinModal"> <UploadIcon /> Replace texture </Button>
+					<ButtonStyled>
+						<button @click="openUploadSkinModal"><UploadIcon /> Replace texture</button>
+					</ButtonStyled>
 				</section>
 
 				<section>
@@ -79,7 +81,7 @@
 		</div>
 
 		<div class="flex gap-2 mt-12">
-			<ButtonStyled color="brand" :disabled="disableSave || isSaving">
+			<ButtonStyled color="brand">
 				<button v-tooltip="saveTooltip" :disabled="disableSave || isSaving" @click="save">
 					<SpinnerIcon v-if="isSaving" class="animate-spin" />
 					<CheckIcon v-else-if="mode === 'new'" />
@@ -87,7 +89,9 @@
 					{{ mode === 'new' ? 'Add skin' : 'Save skin' }}
 				</button>
 			</ButtonStyled>
-			<Button :disabled="isSaving" @click="hide"><XIcon />Cancel</Button>
+			<ButtonStyled type="outlined">
+				<button :disabled="isSaving" @click="hide"><XIcon />Cancel</button>
+			</ButtonStyled>
 		</div>
 	</ModalWrapper>
 
@@ -109,7 +113,6 @@ import {
 	XIcon,
 } from '@modrinth/assets'
 import {
-	Button,
 	ButtonStyled,
 	CapeButton,
 	CapeLikeTextButton,
diff --git a/apps/app-frontend/src/components/ui/world/modal/AddServerModal.vue b/apps/app-frontend/src/components/ui/world/modal/AddServerModal.vue
index 5c585de62..0afcc632e 100644
--- a/apps/app-frontend/src/components/ui/world/modal/AddServerModal.vue
+++ b/apps/app-frontend/src/components/ui/world/modal/AddServerModal.vue
@@ -93,7 +93,7 @@ defineExpose({ show, hide })
 		<template #actions>
 			<div class="flex gap-2 justify-end">
 				<ButtonStyled type="outlined">
-					<button class="!border !border-surface-4" @click="hide()">
+					<button @click="hide()">
 						<XIcon />
 						{{ formatMessage(commonMessages.cancelButton) }}
 					</button>
diff --git a/apps/app-frontend/src/components/ui/world/modal/EditServerModal.vue b/apps/app-frontend/src/components/ui/world/modal/EditServerModal.vue
index d3977c2b2..3cdd48b06 100644
--- a/apps/app-frontend/src/components/ui/world/modal/EditServerModal.vue
+++ b/apps/app-frontend/src/components/ui/world/modal/EditServerModal.vue
@@ -106,7 +106,7 @@ const titleMessage = defineMessage({
 		<template #actions>
 			<div class="flex gap-2 justify-end">
 				<ButtonStyled type="outlined">
-					<button class="!border !border-surface-4" @click="hide()">
+					<button @click="hide()">
 						<XIcon />
 						{{ formatMessage(commonMessages.cancelButton) }}
 					</button>
diff --git a/apps/app-frontend/src/locales/en-US/index.json b/apps/app-frontend/src/locales/en-US/index.json
index 266e42aa7..98a1db79b 100644
--- a/apps/app-frontend/src/locales/en-US/index.json
+++ b/apps/app-frontend/src/locales/en-US/index.json
@@ -692,6 +692,24 @@
   "instance.worlds.world_in_use": {
     "message": "World is in use"
   },
+  "minecraft-account.add-account": {
+    "message": "Add account"
+  },
+  "minecraft-account.label": {
+    "message": "Minecraft account"
+  },
+  "minecraft-account.not-signed-in": {
+    "message": "Not signed in"
+  },
+  "minecraft-account.remove-account": {
+    "message": "Remove account"
+  },
+  "minecraft-account.select-account": {
+    "message": "Select account"
+  },
+  "minecraft-account.sign-in": {
+    "message": "Sign in to Minecraft"
+  },
   "search.filter.locked.instance": {
     "message": "Provided by the instance"
   },
diff --git a/apps/app-frontend/src/pages/Skins.vue b/apps/app-frontend/src/pages/Skins.vue
index 49461d2b6..6c03b1773 100644
--- a/apps/app-frontend/src/pages/Skins.vue
+++ b/apps/app-frontend/src/pages/Skins.vue
@@ -9,7 +9,6 @@ import {
 	UpdatedIcon,
 } from '@modrinth/assets'
 import {
-	Button,
 	ButtonStyled,
 	ConfirmModal,
 	injectNotificationManager,
@@ -383,25 +382,25 @@ await Promise.all([loadCapes(), loadSkins(), loadCurrentUser()])
 						@select="changeSkin(skin)"
 					>
 						<template #overlay-buttons>
-							<Button
-								color="green"
-								aria-label="Edit skin"
-								class="pointer-events-auto"
-								@click.stop="(e: MouseEvent) => editSkinModal?.show(e, skin)"
-							>
-								<EditIcon /> Edit
-							</Button>
-							<Button
-								v-show="!skin.is_equipped"
-								v-tooltip="'Delete skin'"
-								aria-label="Delete skin"
-								color="red"
-								class="!rounded-[100%] pointer-events-auto"
-								icon-only
-								@click.stop="() => confirmDeleteSkin(skin)"
-							>
-								<TrashIcon />
-							</Button>
+							<ButtonStyled color="brand">
+								<button
+									aria-label="Edit skin"
+									class="pointer-events-auto"
+									@click.stop="(e: MouseEvent) => editSkinModal?.show(e, skin)"
+								>
+									<EditIcon /> Edit
+								</button>
+							</ButtonStyled>
+							<ButtonStyled v-show="!skin.is_equipped" circular color="red">
+								<button
+									v-tooltip="'Delete skin'"
+									aria-label="Delete skin"
+									class="!rounded-[100%] pointer-events-auto"
+									@click.stop="() => confirmDeleteSkin(skin)"
+								>
+									<TrashIcon />
+								</button>
+							</ButtonStyled>
 						</template>
 					</SkinButton>
 				</div>
diff --git a/apps/app-frontend/src/pages/instance/Worlds.vue b/apps/app-frontend/src/pages/instance/Worlds.vue
index 87074452c..ec7f74517 100644
--- a/apps/app-frontend/src/pages/instance/Worlds.vue
+++ b/apps/app-frontend/src/pages/instance/Worlds.vue
@@ -55,7 +55,7 @@
 				/>
 				<div class="flex gap-2">
 					<ButtonStyled type="outlined">
-						<button class="!h-10 !border-button-bg !border-[1px]" @click="addServerModal?.show()">
+						<button class="!h-10" @click="addServerModal?.show()">
 							<PlusIcon class="size-5" />
 							{{ formatMessage(messages.addServer) }}
 						</button>
@@ -141,7 +141,7 @@
 		>
 			<template #actions>
 				<ButtonStyled type="outlined">
-					<button class="!h-10 !border-button-bg !border-[1px]" @click="addServerModal?.show()">
+					<button class="!h-10" @click="addServerModal?.show()">
 						<PlusIcon class="size-5" />
 						{{ formatMessage(messages.addServer) }}
 					</button>
diff --git a/apps/app-frontend/src/pages/library/Index.vue b/apps/app-frontend/src/pages/library/Index.vue
index 327ab44d9..222aaab16 100644
--- a/apps/app-frontend/src/pages/library/Index.vue
+++ b/apps/app-frontend/src/pages/library/Index.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { PlusIcon } from '@modrinth/assets'
-import { Button, injectNotificationManager, NavTabs } from '@modrinth/ui'
+import { ButtonStyled, injectNotificationManager, NavTabs } from '@modrinth/ui'
 import { inject, onUnmounted, ref, shallowRef } from 'vue'
 import { useRoute } from 'vue-router'
 
@@ -55,10 +55,12 @@ onUnmounted(() => {
 				<NewInstanceImage />
 			</div>
 			<h3>No instances found</h3>
-			<Button color="primary" :disabled="offline" @click="showCreationModal?.()">
-				<PlusIcon />
-				Create new instance
-			</Button>
+			<ButtonStyled color="brand">
+				<button :disabled="offline" @click="showCreationModal?.()">
+					<PlusIcon />
+					Create new instance
+				</button>
+			</ButtonStyled>
 		</div>
 	</div>
 </template>
diff --git a/apps/app-frontend/src/pages/project/Gallery.vue b/apps/app-frontend/src/pages/project/Gallery.vue
index 34ac0f2d9..05a771f92 100644
--- a/apps/app-frontend/src/pages/project/Gallery.vue
+++ b/apps/app-frontend/src/pages/project/Gallery.vue
@@ -39,35 +39,40 @@
 				</div>
 				<div class="controls">
 					<div class="buttons">
-						<Button class="close" icon-only @click="hideImage">
-							<XIcon aria-hidden="true" />
-						</Button>
-						<a
-							class="open btn icon-only"
-							target="_blank"
-							:href="
-								expandedGalleryItem.raw_url
-									? expandedGalleryItem.raw_url
-									: 'https://cdn.modrinth.com/placeholder-banner.svg'
-							"
-						>
-							<ExternalIcon aria-hidden="true" />
-						</a>
-						<Button icon-only @click="zoomedIn = !zoomedIn">
-							<ExpandIcon v-if="!zoomedIn" aria-hidden="true" />
-							<ContractIcon v-else aria-hidden="true" />
-						</Button>
-						<Button
-							v-if="filteredGallery.length > 1"
-							class="previous"
-							icon-only
-							@click="previousImage()"
-						>
-							<LeftArrowIcon aria-hidden="true" />
-						</Button>
-						<Button v-if="filteredGallery.length > 1" class="next" icon-only @click="nextImage()">
-							<RightArrowIcon aria-hidden="true" />
-						</Button>
+						<ButtonStyled circular>
+							<button class="close" @click="hideImage">
+								<XIcon aria-hidden="true" />
+							</button>
+						</ButtonStyled>
+						<ButtonStyled circular>
+							<a
+								class="open btn icon-only"
+								target="_blank"
+								:href="
+									expandedGalleryItem.raw_url
+										? expandedGalleryItem.raw_url
+										: 'https://cdn.modrinth.com/placeholder-banner.svg'
+								"
+							>
+								<ExternalIcon aria-hidden="true" />
+							</a>
+						</ButtonStyled>
+						<ButtonStyled circular>
+							<button @click="zoomedIn = !zoomedIn">
+								<ExpandIcon v-if="!zoomedIn" aria-hidden="true" />
+								<ContractIcon v-else aria-hidden="true" />
+							</button>
+						</ButtonStyled>
+						<ButtonStyled v-if="filteredGallery.length > 1" circular>
+							<button class="previous" @click="previousImage()">
+								<LeftArrowIcon aria-hidden="true" />
+							</button>
+						</ButtonStyled>
+						<ButtonStyled v-if="filteredGallery.length > 1" circular>
+							<button class="next" @click="nextImage()">
+								<RightArrowIcon aria-hidden="true" />
+							</button>
+						</ButtonStyled>
 					</div>
 				</div>
 			</div>
@@ -85,7 +90,7 @@ import {
 	RightArrowIcon,
 	XIcon,
 } from '@modrinth/assets'
-import { Button, Card, useFormatDateTime } from '@modrinth/ui'
+import { ButtonStyled, Card, useFormatDateTime } from '@modrinth/ui'
 import { computed, onMounted, onUnmounted, ref } from 'vue'
 
 import { hide_ads_window, show_ads_window } from '@/helpers/ads.js'
diff --git a/apps/app-frontend/src/pages/project/Version.vue b/apps/app-frontend/src/pages/project/Version.vue
index 9db6001c5..d405bd256 100644
--- a/apps/app-frontend/src/pages/project/Version.vue
+++ b/apps/app-frontend/src/pages/project/Version.vue
@@ -14,34 +14,38 @@
 				<h2>{{ version.name }}</h2>
 			</div>
 			<div class="button-group">
-				<Button
-					color="primary"
-					:action="() => install(version.id)"
-					:disabled="installing || (installed && installedVersion === version.id)"
-				>
-					<DownloadIcon v-if="!installed" />
-					<SwapIcon v-else-if="installedVersion !== version.id" />
-					<CheckIcon v-else />
-					{{
-						installing
-							? 'Installing...'
-							: installed && installedVersion === version.id
-								? 'Installed'
-								: 'Install'
-					}}
-				</Button>
-				<Button>
-					<ReportIcon />
-					Report
-				</Button>
-				<a
-					:href="`https://modrinth.com/mod/${route.params.id}/version/${route.params.version}`"
-					rel="external"
-					class="btn"
-				>
-					<ExternalIcon />
-					Modrinth website
-				</a>
+				<ButtonStyled color="brand">
+					<button
+						:disabled="installing || (installed && installedVersion === version.id)"
+						@click="() => install(version.id)"
+					>
+						<DownloadIcon v-if="!installed" />
+						<SwapIcon v-else-if="installedVersion !== version.id" />
+						<CheckIcon v-else />
+						{{
+							installing
+								? 'Installing...'
+								: installed && installedVersion === version.id
+									? 'Installed'
+									: 'Install'
+						}}
+					</button>
+				</ButtonStyled>
+				<ButtonStyled>
+					<button>
+						<ReportIcon />
+						Report
+					</button>
+				</ButtonStyled>
+				<ButtonStyled>
+					<a
+						:href="`https://modrinth.com/mod/${route.params.id}/version/${route.params.version}`"
+						rel="external"
+					>
+						Modrinth website
+						<ExternalIcon />
+					</a>
+				</ButtonStyled>
 			</div>
 		</Card>
 		<div class="version-container">
@@ -68,16 +72,13 @@
 								<span v-if="file.primary" class="primary-label"> Primary </span>
 							</span>
 						</span>
-						<Button
-							v-if="project.project_type !== 'modpack' || file.primary"
-							class="download"
-							:action="() => install(version.id)"
-							:disabled="installed"
-						>
-							<DownloadIcon v-if="!installed" />
-							<CheckIcon v-else />
-							{{ installed ? 'Installed' : 'Install' }}
-						</Button>
+						<ButtonStyled v-if="project.project_type !== 'modpack' || file.primary" color="brand">
+							<button class="download" :disabled="installed" @click="() => install(version.id)">
+								<DownloadIcon v-if="!installed" />
+								<CheckIcon v-else />
+								{{ installed ? 'Installed' : 'Install' }}
+							</button>
+						</ButtonStyled>
 					</Card>
 				</Card>
 				<Card v-if="displayDependencies.length > 0">
@@ -168,7 +169,15 @@
 
 <script setup>
 import { CheckIcon, DownloadIcon, ExternalIcon, FileIcon, ReportIcon } from '@modrinth/assets'
-import { Avatar, Badge, Breadcrumbs, Button, Card, CopyCode, useFormatDateTime } from '@modrinth/ui'
+import {
+	Avatar,
+	Badge,
+	Breadcrumbs,
+	ButtonStyled,
+	Card,
+	CopyCode,
+	useFormatDateTime,
+} from '@modrinth/ui'
 import { formatBytes, renderString } from '@modrinth/utils'
 import { computed, ref, watch } from 'vue'
 import { useRoute } from 'vue-router'
diff --git a/apps/app-frontend/src/pages/project/Versions.vue b/apps/app-frontend/src/pages/project/Versions.vue
index a28fbe021..0b11e6895 100644
--- a/apps/app-frontend/src/pages/project/Versions.vue
+++ b/apps/app-frontend/src/pages/project/Versions.vue
@@ -134,10 +134,6 @@ const [loaders, gameVersions] = await Promise.all([
 	display: flex;
 	gap: 0.5rem;
 	flex-grow: 1;
-
-	.multiselect {
-		flex-grow: 1;
-	}
 }
 
 .card-row {
diff --git a/apps/app/src/api/oauth_utils/auth_code_reply/page.html b/apps/app/src/api/oauth_utils/auth_code_reply/page.html
index 53024a51a..b82810cfc 100644
--- a/apps/app/src/api/oauth_utils/auth_code_reply/page.html
+++ b/apps/app/src/api/oauth_utils/auth_code_reply/page.html
@@ -1 +1 @@
-<!doctype html><html class=dark-mode lang=en><meta content="width=device-width,initial-scale=1" name=viewport><title>Sign In - Modrinth App</title><style>*,:after,:before,::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-scroll-snap-strictness:proximity;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:#3b82f680;--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000}.\!container{width:100%!important}.container{width:100%}@media (width>=640px){.\!container{max-width:640px!important}.container{max-width:640px}}@media (width>=768px){.\!container{max-width:768px!important}.container{max-width:768px}}@media (width>=1024px){.\!container{max-width:1024px!important}.container{max-width:1024px}}@media (width>=1280px){.\!container{max-width:1280px!important}.container{max-width:1280px}}@media (width>=1536px){.\!container{max-width:1536px!important}.container{max-width:1536px}}.pointer-events-none{pointer-events:none}.pointer-events-auto{pointer-events:auto}.visible{visibility:visible}.invisible{visibility:hidden}.collapse{visibility:collapse}.static{position:static}.\!fixed{position:fixed!important}.fixed{position:fixed}.absolute{position:absolute}.\!relative{position:relative!important}.relative{position:relative}.sticky{position:sticky}.inset-0{inset:0}.inset-\[calc\(-1rem-2px\)_-2rem\]{inset:calc(-1rem - 2px) -2rem}.-right-12{right:-3rem}.-top-12{top:-3rem}.-top-28{top:-7rem}.bottom-0{bottom:0}.bottom-1{bottom:.25rem}.bottom-\[10\%\]{bottom:10%}.bottom-\[18\%\]{bottom:18%}.bottom-\[250px\]{bottom:250px}.left-0{left:0}.left-1\/2{left:50%}.right-0{right:0}.right-2{right:.5rem}.right-8{right:2rem}.top-0{top:0}.top-0\.5{top:.125rem}.top-2{top:.5rem}.top-\[-4rem\]{top:-4rem}.top-\[18\%\]{top:18%}.top-\[3px\]{top:3px}.isolate{isolation:isolate}.-z-10{z-index:-10}.z-10{z-index:10}.z-50{z-index:50}.z-\[1\]{z-index:1}.col-span-2{grid-column:span 2/span 2}.col-span-3{grid-column:span 3/span 3}.col-span-full{grid-column:1/-1}.col-start-1{grid-column-start:1}.row-start-1{grid-row-start:1}.float-end{float:inline-end}.m-0{margin:0}.m-1{margin:.25rem}.m-2{margin:.5rem}.m-6{margin:1.5rem}.\!mx-2{margin-left:.5rem!important;margin-right:.5rem!important}.mx-1{margin-left:.25rem;margin-right:.25rem}.mx-2{margin-left:.5rem;margin-right:.5rem}.mx-3{margin-left:.75rem;margin-right:.75rem}.mx-auto{margin-left:auto;margin-right:auto}.my-0{margin-top:0;margin-bottom:0}.my-0\.5{margin-top:.125rem;margin-bottom:.125rem}.my-1{margin-top:.25rem;margin-bottom:.25rem}.my-2{margin-top:.5rem;margin-bottom:.5rem}.my-4{margin-top:1rem;margin-bottom:1rem}.my-auto{margin-top:auto;margin-bottom:auto}.mb-0{margin-bottom:0}.mb-0\.5{margin-bottom:.125rem}.mb-1{margin-bottom:.25rem}.mb-2{margin-bottom:.5rem}.mb-3{margin-bottom:.75rem}.mb-4{margin-bottom:1rem}.mb-5{margin-bottom:1.25rem}.ml-0{margin-left:0}.ml-0\.5{margin-left:.125rem}.ml-1{margin-left:.25rem}.ml-2{margin-left:.5rem}.ml-3{margin-left:.75rem}.ml-4{margin-left:1rem}.ml-8{margin-left:2rem}.ml-auto{margin-left:auto}.mr-1{margin-right:.25rem}.mr-3{margin-right:.75rem}.mt-0{margin-top:0}.mt-1{margin-top:.25rem}.mt-12{margin-top:3rem}.mt-2{margin-top:.5rem}.mt-3{margin-top:.75rem}.mt-4{margin-top:1rem}.mt-6{margin-top:1.5rem}.mt-9{margin-top:2.25rem}.mt-\[-1px\]{margin-top:-1px}.mt-auto{margin-top:auto}.mt-px{margin-top:1px}.line-clamp-1{-webkit-line-clamp:1;-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}.line-clamp-2{-webkit-line-clamp:2;-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}.line-clamp-3{-webkit-line-clamp:3;-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}.\!block{display:block!important}.block{display:block}.inline-block{display:inline-block}.\!inline{display:inline!important}.inline{display:inline}.\!flex{display:flex!important}.flex{display:flex}.inline-flex{display:inline-flex}.\!table{display:table!important}.table{display:table}.inline-table{display:inline-table}.table-caption{display:table-caption}.table-cell{display:table-cell}.table-column{display:table-column}.table-column-group{display:table-column-group}.table-footer-group{display:table-footer-group}.table-header-group{display:table-header-group}.table-row-group{display:table-row-group}.table-row{display:table-row}.\!grid{display:grid!important}.grid{display:grid}.contents{display:contents}.list-item{display:list-item}.\!hidden{display:none!important}.hidden{display:none}.aspect-\[10\/16\]{aspect-ratio:10/16}.aspect-\[16\/10\]{aspect-ratio:16/10}.aspect-\[2\/1\]{aspect-ratio:2}.aspect-\[5\/7\]{aspect-ratio:5/7}.aspect-square{aspect-ratio:1}.aspect-video{aspect-ratio:16/9}.size-1{width:.25rem;height:.25rem}.size-12{width:3rem;height:3rem}.size-3{width:.75rem;height:.75rem}.size-4{width:1rem;height:1rem}.size-48{width:12rem;height:12rem}.size-5{width:1.25rem;height:1.25rem}.size-6{width:1.5rem;height:1.5rem}.size-8{width:2rem;height:2rem}.size-\[1\.5em\]{width:1.5em;height:1.5em}.\!h-12{height:3rem!important}.\!h-24{height:6rem!important}.h-1{height:.25rem}.h-10{height:2.5rem}.h-12{height:3rem}.h-16{height:4rem}.h-2{height:.5rem}.h-2\.5{height:.625rem}.h-24{height:6rem}.h-28{height:7rem}.h-3{height:.75rem}.h-4{height:1rem}.h-5{height:1.25rem}.h-6{height:1.5rem}.h-8{height:2rem}.h-9{height:2.25rem}.h-\[--_height\]{height:var(--_height)}.h-\[--_size\]{height:var(--_size)}.h-\[--top-bar-height\]{height:var(--top-bar-height)}.h-\[1\.75rem\]{height:1.75rem}.h-\[16rem\]{height:16rem}.h-\[173px\]{height:173px}.h-\[1px\]{height:1px}.h-\[2\.625rem\]{height:2.625rem}.h-\[25rem\]{height:25rem}.h-\[3\.25rem\]{height:3.25rem}.h-\[32rem\]{height:32rem}.h-\[500px\]{height:500px}.h-\[64px\]{height:64px}.h-\[96px\]{height:96px}.h-\[calc\(100\%-0\.5rem\)\]{height:calc(100% - .5rem)}.h-full{height:100%}.h-px{height:1px}.max-h-\[19rem\]{max-height:19rem}.max-h-\[20rem\]{max-height:20rem}.max-h-\[250px\]{max-height:250px}.max-h-\[25rem\]{max-height:25rem}.\!min-h-9{min-height:2.25rem!important}.min-h-9{min-height:2.25rem}.min-h-\[--_size\]{min-height:var(--_size)}.min-h-\[16rem\]{min-height:16rem}.min-h-\[20rem\]{min-height:20rem}.min-h-\[250px\]{min-height:250px}.min-h-\[50vh\]{min-height:50vh}.min-h-\[96px\]{min-height:96px}.\!w-12{width:3rem!important}.\!w-full{width:100%!important}.w-1{width:.25rem}.w-1\/2{width:50%}.w-10{width:2.5rem}.w-12{width:3rem}.w-16{width:4rem}.w-2{width:.5rem}.w-3{width:.75rem}.w-3\/4{width:75%}.w-4{width:1rem}.w-40{width:10rem}.w-5{width:1.25rem}.w-6{width:1.5rem}.w-8{width:2rem}.w-9{width:2.25rem}.w-\[--_size\]{width:var(--_size)}.w-\[--left-bar-width\]{width:var(--left-bar-width)}.w-\[16rem\]{width:16rem}.w-\[2\.625rem\]{width:2.625rem}.w-\[32rem\]{width:32rem}.w-\[36px\]{width:36px}.w-\[40rem\]{width:40rem}.w-\[450px\]{width:450px}.w-\[600px\]{width:600px}.w-\[60px\]{width:60px}.w-\[80px\]{width:80px}.w-\[96px\]{width:96px}.w-auto{width:auto}.w-fit{width:fit-content}.w-full{width:100%}.w-max{width:max-content}.w-px{width:1px}.min-w-0{min-width:0}.min-w-9{min-width:2.25rem}.min-w-\[--_size\]{min-width:var(--_size)}.min-w-\[--_width\]{min-width:var(--_width)}.min-w-\[16rem\]{min-width:16rem}.min-w-\[200px\]{min-width:200px}.min-w-\[20rem\]{min-width:20rem}.min-w-\[300px\]{min-width:300px}.min-w-max{min-width:max-content}.max-w-12{max-width:3rem}.max-w-16{max-width:4rem}.max-w-60{max-width:15rem}.max-w-80{max-width:20rem}.max-w-\[15rem\]{max-width:15rem}.max-w-\[16rem\]{max-width:16rem}.max-w-\[20rem\]{max-width:20rem}.max-w-\[300px\]{max-width:300px}.max-w-\[30rem\]{max-width:30rem}.max-w-\[35rem\]{max-width:35rem}.max-w-\[40rem\]{max-width:40rem}.max-w-\[48rem\]{max-width:48rem}.max-w-\[9rem\]{max-width:9rem}.max-w-full{max-width:100%}.max-w-lg{max-width:32rem}.max-w-xl{max-width:36rem}.flex-1{flex:1}.flex-none{flex:none}.flex-shrink{flex-shrink:1}.flex-shrink-0{flex-shrink:0}.shrink{flex-shrink:1}.shrink-0{flex-shrink:0}.flex-grow,.grow{flex-grow:1}.border-collapse{border-collapse:collapse}.origin-bottom{transform-origin:bottom}.origin-top{transform-origin:top}.-translate-x-1\/2{--tw-translate-x:-50%;transform:translate(var(--tw-translate-x),var(--tw-translate-y))rotate(var(--tw-rotate))skew(var(--tw-skew-x))skewY(var(--tw-skew-y))scaleX(var(--tw-scale-x))scaleY(var(--tw-scale-y))}.translate-x-\[1px\]{--tw-translate-x:1px;transform:translate(var(--tw-translate-x),var(--tw-translate-y))rotate(var(--tw-rotate))skew(var(--tw-skew-x))skewY(var(--tw-skew-y))scaleX(var(--tw-scale-x))scaleY(var(--tw-scale-y))}.translate-x-\[2px\]{--tw-translate-x:2px;transform:translate(var(--tw-translate-x),var(--tw-translate-y))rotate(var(--tw-rotate))skew(var(--tw-skew-x))skewY(var(--tw-skew-y))scaleX(var(--tw-scale-x))scaleY(var(--tw-scale-y))}.translate-y-3{--tw-translate-y:.75rem;transform:translate(var(--tw-translate-x),var(--tw-translate-y))rotate(var(--tw-rotate))skew(var(--tw-skew-x))skewY(var(--tw-skew-y))scaleX(var(--tw-scale-x))scaleY(var(--tw-scale-y))}.translate-y-4{--tw-translate-y:1rem;transform:translate(var(--tw-translate-x),var(--tw-translate-y))rotate(var(--tw-rotate))skew(var(--tw-skew-x))skewY(var(--tw-skew-y))scaleX(var(--tw-scale-x))scaleY(var(--tw-scale-y))}.rotate-180{--tw-rotate:180deg;transform:translate(var(--tw-translate-x),var(--tw-translate-y))rotate(var(--tw-rotate))skew(var(--tw-skew-x))skewY(var(--tw-skew-y))scaleX(var(--tw-scale-x))scaleY(var(--tw-scale-y))}.scale-100{--tw-scale-x:1;--tw-scale-y:1;transform:translate(var(--tw-translate-x),var(--tw-translate-y))rotate(var(--tw-rotate))skew(var(--tw-skew-x))skewY(var(--tw-skew-y))scaleX(var(--tw-scale-x))scaleY(var(--tw-scale-y))}.scale-75{--tw-scale-x:.75;--tw-scale-y:.75;transform:translate(var(--tw-translate-x),var(--tw-translate-y))rotate(var(--tw-rotate))skew(var(--tw-skew-x))skewY(var(--tw-skew-y))scaleX(var(--tw-scale-x))scaleY(var(--tw-scale-y))}.scale-95{--tw-scale-x:.95;--tw-scale-y:.95;transform:translate(var(--tw-translate-x),var(--tw-translate-y))rotate(var(--tw-rotate))skew(var(--tw-skew-x))skewY(var(--tw-skew-y))scaleX(var(--tw-scale-x))scaleY(var(--tw-scale-y))}.scale-\[0\.85\]{--tw-scale-x:.85;--tw-scale-y:.85;transform:translate(var(--tw-translate-x),var(--tw-translate-y))rotate(var(--tw-rotate))skew(var(--tw-skew-x))skewY(var(--tw-skew-y))scaleX(var(--tw-scale-x))scaleY(var(--tw-scale-y))}.\!transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y))rotate(var(--tw-rotate))skew(var(--tw-skew-x))skewY(var(--tw-skew-y))scaleX(var(--tw-scale-x))scaleY(var(--tw-scale-y))!important}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y))rotate(var(--tw-rotate))skew(var(--tw-skew-x))skewY(var(--tw-skew-y))scaleX(var(--tw-scale-x))scaleY(var(--tw-scale-y))}@keyframes pulse{50%{opacity:.5}}.animate-pulse{animation:2s cubic-bezier(.4,0,.6,1) infinite pulse}@keyframes spin{to{transform:rotate(360deg)}}.animate-spin{animation:1s linear infinite spin}.cursor-default{cursor:default}.cursor-grab{cursor:grab}.cursor-help{cursor:help}.cursor-not-allowed{cursor:not-allowed}.cursor-pointer{cursor:pointer}.select-none{-webkit-user-select:none;-moz-user-select:none;user-select:none}.select-all{-webkit-user-select:all;-moz-user-select:all;user-select:all}.resize{resize:both}.list-none{list-style-type:none}.appearance-none{-webkit-appearance:none;-moz-appearance:none;appearance:none}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.grid-cols-\[1fr_auto\]{grid-template-columns:1fr auto}.grid-cols-\[1fr_min-content\]{grid-template-columns:1fr min-content}.grid-cols-\[auto_1fr\]{grid-template-columns:auto 1fr}.grid-cols-\[auto_1fr_auto\]{grid-template-columns:auto 1fr auto}.grid-cols-\[auto_min-content\]{grid-template-columns:auto min-content}.grid-cols-\[auto_minmax\(0\,3fr\)_minmax\(0\,4fr\)_auto\]{grid-template-columns:auto minmax(0,3fr) minmax(0,4fr) auto}.grid-cols-\[min-content\,4fr\,3fr\,2fr\]{grid-template-columns:min-content 4fr 3fr 2fr}.grid-cols-\[min-content\,auto\,auto\,auto\,auto\]{grid-template-columns:min-content auto auto auto auto}.grid-cols-\[min-content_auto_min-content_min-content\]{grid-template-columns:min-content auto min-content min-content}.\!flex-row{flex-direction:row!important}.flex-row{flex-direction:row}.\!flex-col{flex-direction:column!important}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.flex-nowrap{flex-wrap:nowrap}.place-content-center{place-content:center}.place-items-stretch{place-items:stretch stretch}.content-start{align-content:flex-start}.items-start{align-items:flex-start}.items-end{align-items:flex-end}.\!items-center{align-items:center!important}.items-center{align-items:center}.items-baseline{align-items:baseline}.justify-start{justify-content:flex-start}.justify-end{justify-content:flex-end}.justify-center{justify-content:center}.\!justify-between{justify-content:space-between!important}.justify-between{justify-content:space-between}.gap-1{gap:.25rem}.gap-12{gap:3rem}.gap-2{gap:.5rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}.gap-5{gap:1.25rem}.gap-6{gap:1.5rem}.gap-\[--_gap\]{gap:var(--_gap)}.gap-\[0\.5rem\]{gap:.5rem}.gap-\[var\(--gap-md\)\]{gap:var(--gap-md)}.gap-x-8{-moz-column-gap:2rem;column-gap:2rem}.gap-y-6{row-gap:1.5rem}.space-y-4>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(1rem*calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1rem*var(--tw-space-y-reverse))}.divide-y>:not([hidden])~:not([hidden]){--tw-divide-y-reverse:0;border-top-width:calc(1px*calc(1 - var(--tw-divide-y-reverse)));border-bottom-width:calc(1px*var(--tw-divide-y-reverse))}.divide-divider>:not([hidden])~:not([hidden]){border-color:var(--color-divider)}.self-center{align-self:center}.overflow-auto{overflow:auto}.overflow-hidden{overflow:hidden}.overflow-clip{overflow:clip}.overflow-x-auto{overflow-x:auto}.overflow-y-auto{overflow-y:auto}.truncate{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.text-ellipsis{text-overflow:ellipsis}.whitespace-nowrap{white-space:nowrap}.whitespace-pre-wrap{white-space:pre-wrap}.text-wrap{text-wrap:wrap}.text-nowrap{text-wrap:nowrap}.break-words{overflow-wrap:break-word}.break-all{word-break:break-all}.\!rounded-\[100\%\]{border-radius:100%!important}.rounded{border-radius:.25rem}.rounded-2xl{border-radius:1rem}.rounded-3xl{border-radius:1.5rem}.rounded-\[--_radius\]{border-radius:var(--_radius)}.rounded-\[5px\]{border-radius:5px}.rounded-\[inherit\]{border-radius:inherit}.rounded-full{border-radius:9999px}.rounded-lg{border-radius:.5rem}.rounded-md{border-radius:.375rem}.rounded-none{border-radius:0}.rounded-xl{border-radius:.75rem}.rounded-b-none{border-bottom-right-radius:0;border-bottom-left-radius:0}.rounded-b-xl{border-bottom-right-radius:.75rem;border-bottom-left-radius:.75rem}.rounded-t-none{border-top-left-radius:0;border-top-right-radius:0}.rounded-t-xl{border-top-left-radius:.75rem;border-top-right-radius:.75rem}.rounded-tl-\[--radius-xl\]{border-top-left-radius:var(--radius-xl)}.\!border-4{border-width:4px!important}.border{border-width:1px}.border-0{border-width:0}.border-2{border-width:2px}.border-\[1px\]{border-width:1px}.border-b{border-bottom-width:1px}.border-b-2{border-bottom-width:2px}.border-b-\[1px\]{border-bottom-width:1px}.border-l-\[1px\]{border-left-width:1px}.border-r,.border-r-\[1px\]{border-right-width:1px}.border-t{border-top-width:1px}.border-solid{border-style:solid}.border-dashed{border-style:dashed}.border-none{border-style:none}.border-\[--brand-gradient-border\]{border-color:var(--brand-gradient-border)}.border-black{--tw-border-opacity:1;border-color:rgb(0 0 0/var(--tw-border-opacity))}.border-brand{border-color:var(--color-brand)}.border-brand-blue{border-color:var(--color-blue)}.border-brand-orange{border-color:var(--color-orange)}.border-brand-purple{border-color:var(--color-purple)}.border-brand-red{border-color:var(--color-red)}.border-button-border{border-color:var(--color-button-border)}.border-code-bg{border-color:var(--color-code-bg)}.border-divider{border-color:var(--color-divider)}.border-highlight-gray{border-color:var(--color-gray-highlight)}.border-orange{border-color:var(--color-orange)}.border-red{border-color:var(--color-red)}.border-transparent{border-color:#0000}.border-b-button-bg{border-bottom-color:var(--color-button-bg)}.bg-\[--_bg-color\,var\(--color-button-bg\)\]{background-color:var(--_bg-color,var(--color-button-bg))}.bg-\[--_bg\]{background-color:var(--_bg)}.bg-\[--color-button-bg-selected\]{background-color:var(--color-button-bg-selected)}.bg-bg{background-color:var(--color-bg)}.bg-bg-blue{background-color:var(--color-blue-bg)}.bg-bg-green{background-color:var(--color-green-bg)}.bg-bg-orange{background-color:var(--color-orange-bg)}.bg-bg-purple{background-color:var(--color-purple-bg)}.bg-bg-raised{background-color:var(--color-raised-bg)}.bg-bg-red{background-color:var(--color-red-bg)}.bg-black\/10{background-color:#0000001a}.bg-brand{background-color:var(--color-brand)}.bg-brand-highlight{background-color:var(--color-brand-highlight)}.bg-button-bg{background-color:var(--color-button-bg)}.bg-button-bgSelected{background-color:var(--color-button-bg-selected)}.bg-button-border{background-color:var(--color-button-border)}.bg-code-bg{background-color:var(--color-code-bg)}.bg-highlight-red{background-color:var(--color-red-highlight)}.bg-orange{background-color:var(--color-orange)}.bg-purple{background-color:var(--color-purple)}.bg-red{background-color:var(--color-red)}.bg-secondary{background-color:var(--color-secondary)}.bg-table-alternateRow{background-color:var(--color-table-alternate-row)}.bg-tooltip-bg{background-color:var(--color-tooltip-bg)}.bg-transparent{background-color:#0000}.bg-gradient-to-r{background-image:linear-gradient(to right,var(--tw-gradient-stops))}.from-transparent{--tw-gradient-from:transparent var(--tw-gradient-from-position);--tw-gradient-to:#0000 var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.via-green-500{--tw-gradient-to:#22c55e00 var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),#22c55e var(--tw-gradient-via-position),var(--tw-gradient-to)}.to-transparent{--tw-gradient-to:transparent var(--tw-gradient-to-position)}.bg-cover{background-size:cover}.bg-center{background-position:50%}.bg-no-repeat{background-repeat:no-repeat}.stroke-\[3px\]{stroke-width:3px}.object-contain{-o-object-fit:contain;object-fit:contain}.object-cover{-o-object-fit:cover;object-fit:cover}.p-0{padding:0}.p-1{padding:.25rem}.p-2{padding:.5rem}.p-3{padding:.75rem}.p-4{padding:1rem}.p-6{padding:1.5rem}.p-7{padding:1.75rem}.p-8{padding:2rem}.p-\[0\.5rem\]{padding:.5rem}.p-\[3px\]{padding:3px}.px-0{padding-left:0;padding-right:0}.px-1{padding-left:.25rem;padding-right:.25rem}.px-1\.5{padding-left:.375rem;padding-right:.375rem}.px-2{padding-left:.5rem;padding-right:.5rem}.px-3{padding-left:.75rem;padding-right:.75rem}.px-4{padding-left:1rem;padding-right:1rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.px-\[--_padding-x\]{padding-left:var(--_padding-x);padding-right:var(--_padding-x)}.px-\[0\.375rem\]{padding-left:.375rem;padding-right:.375rem}.py-0{padding-top:0;padding-bottom:0}.py-0\.5{padding-top:.125rem;padding-bottom:.125rem}.py-1{padding-top:.25rem;padding-bottom:.25rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.py-3{padding-top:.75rem;padding-bottom:.75rem}.py-40{padding-top:10rem;padding-bottom:10rem}.py-\[--_padding-y\]{padding-top:var(--_padding-y);padding-bottom:var(--_padding-y)}.\!pb-3{padding-bottom:.75rem!important}.\!pt-4{padding-top:1rem!important}.pb-12{padding-bottom:3rem}.pb-4{padding-bottom:1rem}.pb-6{padding-bottom:1.5rem}.pb-8{padding-bottom:2rem}.pl-3{padding-left:.75rem}.pl-4{padding-left:1rem}.pr-2{padding-right:.5rem}.pr-4{padding-right:1rem}.pt-0{padding-top:0}.pt-1{padding-top:.25rem}.pt-2{padding-top:.5rem}.pt-4{padding-top:1rem}.pt-\[25\%\]{padding-top:25%}.pt-\[2px\]{padding-top:2px}.text-left{text-align:left}.text-center{text-align:center}.text-right{text-align:right}.text-justify{text-align:justify}.text-end{text-align:end}.font-mono{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace}.text-2xl{font-size:1.5rem;line-height:2rem}.text-3xl{font-size:1.875rem;line-height:2.25rem}.text-4xl{font-size:2.25rem;line-height:2.5rem}.text-base{font-size:1rem;line-height:1.5rem}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-xl{font-size:1.25rem;line-height:1.75rem}.text-xs{font-size:.75rem;line-height:1rem}.font-\[--_font-weight\]{font-weight:var(--_font-weight)}.font-bold{font-weight:700}.font-extrabold{font-weight:800}.font-medium{font-weight:500}.font-normal{font-weight:400}.font-semibold{font-weight:600}.uppercase{text-transform:uppercase}.lowercase{text-transform:lowercase}.capitalize{text-transform:capitalize}.italic{font-style:italic}.\!ordinal{--tw-ordinal:ordinal!important;font-variant-numeric:var(--tw-ordinal)var(--tw-slashed-zero)var(--tw-numeric-figure)var(--tw-numeric-spacing)var(--tw-numeric-fraction)!important}.ordinal{--tw-ordinal:ordinal;font-variant-numeric:var(--tw-ordinal)var(--tw-slashed-zero)var(--tw-numeric-figure)var(--tw-numeric-spacing)var(--tw-numeric-fraction)}.leading-5{line-height:1.25rem}.leading-\[1\.2\]{line-height:1.2}.leading-none{line-height:1}.leading-normal{line-height:1.5}.leading-tight{line-height:1.25}.\!text-brand-inverted{color:var(--color-accent-contrast)!important}.text-\[--_color\,var\(--color-secondary\)\]{color:var(--_color,var(--color-secondary))}.text-\[--_text\]{color:var(--_text)}.text-\[--color-button-text-selected\]{color:var(--color-button-text-selected)}.text-\[var\(--font-size-md\)\]{color:var(--font-size-md)}.text-brand{color:var(--color-brand)}.text-brand-blue{color:var(--color-blue)}.text-brand-green{color:var(--color-green)}.text-brand-highlight{color:var(--color-brand-highlight)}.text-brand-inverted{color:var(--color-accent-contrast)}.text-brand-orange{color:var(--color-orange)}.text-brand-red{color:var(--color-red)}.text-button-text{color:var(--color-button-text)}.text-button-textSelected{color:var(--color-button-text-selected)}.text-code-text{color:var(--color-code-text)}.text-contrast{color:var(--color-contrast)}.text-heading{color:var(--color-heading)}.text-link{color:var(--color-link)}.text-orange{color:var(--color-orange)}.text-primary{color:var(--color-base)}.text-purple{color:var(--color-purple)}.text-red{color:var(--color-red)}.text-secondary{color:var(--color-secondary)}.text-tooltip-text{color:var(--color-tooltip-text)}.underline{text-decoration-line:underline}.overline{text-decoration-line:overline}.line-through{text-decoration-line:line-through}.antialiased{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.opacity-0{opacity:0}.opacity-100{opacity:1}.opacity-25{opacity:.25}.opacity-40{opacity:.4}.opacity-50{opacity:.5}.opacity-60{opacity:.6}.opacity-80{opacity:.8}.shadow{--tw-shadow:0 1px 3px 0 #0000001a,0 1px 2px -1px #0000001a;--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color),0 1px 2px -1px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-lg{--tw-shadow:0 10px 15px -3px #0000001a,0 4px 6px -4px #0000001a;--tw-shadow-colored:0 10px 15px -3px var(--tw-shadow-color),0 4px 6px -4px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-md{--tw-shadow:0 4px 6px -1px #0000001a,0 2px 4px -2px #0000001a;--tw-shadow-colored:0 4px 6px -1px var(--tw-shadow-color),0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-sm{--tw-shadow:0 1px 2px 0 #0000000d;--tw-shadow-colored:0 1px 2px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-xl{--tw-shadow:0 20px 25px -5px #0000001a,0 8px 10px -6px #0000001a;--tw-shadow-colored:0 20px 25px -5px var(--tw-shadow-color),0 8px 10px -6px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.outline-none{outline-offset:2px;outline:2px solid #0000}.outline{outline-style:solid}.ring{--tw-ring-offset-shadow:var(--tw-ring-inset)0 0 0 var(--tw-ring-offset-width)var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset)0 0 0 calc(3px + var(--tw-ring-offset-width))var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.blur{--tw-blur:blur(8px);filter:var(--tw-blur)var(--tw-brightness)var(--tw-contrast)var(--tw-grayscale)var(--tw-hue-rotate)var(--tw-invert)var(--tw-saturate)var(--tw-sepia)var(--tw-drop-shadow)}.brightness-0{--tw-brightness:brightness(0);filter:var(--tw-blur)var(--tw-brightness)var(--tw-contrast)var(--tw-grayscale)var(--tw-hue-rotate)var(--tw-invert)var(--tw-saturate)var(--tw-sepia)var(--tw-drop-shadow)}.brightness-95{--tw-brightness:brightness(.95);filter:var(--tw-blur)var(--tw-brightness)var(--tw-contrast)var(--tw-grayscale)var(--tw-hue-rotate)var(--tw-invert)var(--tw-saturate)var(--tw-sepia)var(--tw-drop-shadow)}.brightness-\[0\.25\]{--tw-brightness:brightness(.25);filter:var(--tw-blur)var(--tw-brightness)var(--tw-contrast)var(--tw-grayscale)var(--tw-hue-rotate)var(--tw-invert)var(--tw-saturate)var(--tw-sepia)var(--tw-drop-shadow)}.brightness-\[0\.3\]{--tw-brightness:brightness(.3);filter:var(--tw-blur)var(--tw-brightness)var(--tw-contrast)var(--tw-grayscale)var(--tw-hue-rotate)var(--tw-invert)var(--tw-saturate)var(--tw-sepia)var(--tw-drop-shadow)}.contrast-\[0\.8\]{--tw-contrast:contrast(.8);filter:var(--tw-blur)var(--tw-brightness)var(--tw-contrast)var(--tw-grayscale)var(--tw-hue-rotate)var(--tw-invert)var(--tw-saturate)var(--tw-sepia)var(--tw-drop-shadow)}.drop-shadow{--tw-drop-shadow:drop-shadow(0 1px 2px #0000001a)drop-shadow(0 1px 1px #0000000f);filter:var(--tw-blur)var(--tw-brightness)var(--tw-contrast)var(--tw-grayscale)var(--tw-hue-rotate)var(--tw-invert)var(--tw-saturate)var(--tw-sepia)var(--tw-drop-shadow)}.grayscale{--tw-grayscale:grayscale(100%);filter:var(--tw-blur)var(--tw-brightness)var(--tw-contrast)var(--tw-grayscale)var(--tw-hue-rotate)var(--tw-invert)var(--tw-saturate)var(--tw-sepia)var(--tw-drop-shadow)}.invert{--tw-invert:invert(100%);filter:var(--tw-blur)var(--tw-brightness)var(--tw-contrast)var(--tw-grayscale)var(--tw-hue-rotate)var(--tw-invert)var(--tw-saturate)var(--tw-sepia)var(--tw-drop-shadow)}.saturate-\[0\.25\]{--tw-saturate:saturate(.25);filter:var(--tw-blur)var(--tw-brightness)var(--tw-contrast)var(--tw-grayscale)var(--tw-hue-rotate)var(--tw-invert)var(--tw-saturate)var(--tw-sepia)var(--tw-drop-shadow)}.sepia{--tw-sepia:sepia(100%);filter:var(--tw-blur)var(--tw-brightness)var(--tw-contrast)var(--tw-grayscale)var(--tw-hue-rotate)var(--tw-invert)var(--tw-saturate)var(--tw-sepia)var(--tw-drop-shadow)}.\!filter{filter:var(--tw-blur)var(--tw-brightness)var(--tw-contrast)var(--tw-grayscale)var(--tw-hue-rotate)var(--tw-invert)var(--tw-saturate)var(--tw-sepia)var(--tw-drop-shadow)!important}.filter{filter:var(--tw-blur)var(--tw-brightness)var(--tw-contrast)var(--tw-grayscale)var(--tw-hue-rotate)var(--tw-invert)var(--tw-saturate)var(--tw-sepia)var(--tw-drop-shadow)}.backdrop-blur-sm{--tw-backdrop-blur:blur(4px);backdrop-filter:var(--tw-backdrop-blur)var(--tw-backdrop-brightness)var(--tw-backdrop-contrast)var(--tw-backdrop-grayscale)var(--tw-backdrop-hue-rotate)var(--tw-backdrop-invert)var(--tw-backdrop-opacity)var(--tw-backdrop-saturate)var(--tw-backdrop-sepia)}.backdrop-filter{backdrop-filter:var(--tw-backdrop-blur)var(--tw-backdrop-brightness)var(--tw-backdrop-contrast)var(--tw-backdrop-grayscale)var(--tw-backdrop-hue-rotate)var(--tw-backdrop-invert)var(--tw-backdrop-opacity)var(--tw-backdrop-saturate)var(--tw-backdrop-sepia)}.\!transition{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-backdrop-filter,backdrop-filter!important;transition-duration:.15s!important;transition-timing-function:cubic-bezier(.4,0,.2,1)!important}.transition{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-backdrop-filter,backdrop-filter;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1)}.transition-all{transition-property:all;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1)}.transition-colors{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1)}.transition-opacity{transition-property:opacity;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1)}.transition-transform{transition-property:transform;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1)}.duration-100{transition-duration:.1s}.duration-150{transition-duration:.15s}.duration-200{transition-duration:.2s}.duration-300{transition-duration:.3s}.duration-500{transition-duration:.5s}.ease-in{transition-timing-function:cubic-bezier(.4,0,1,1)}.ease-in-out{transition-timing-function:cubic-bezier(.4,0,.2,1)}.ease-out{transition-timing-function:cubic-bezier(0,0,.2,1)}.\[a-zA-Z0-9\:\\\\-\\\\\._\$\]{a-z-a--z0-9:\\-\\.$}.\[backface-visibility\:hidden\]{backface-visibility:hidden}.\[page\:\.enableAnimations\]{page:.enableAnimations}.\[page\:\.setMatrixAt\]{page:.setMatrixAt}.\[transform-style\:preserve-3d\]{transform-style:preserve-3d}.\[transform\:rotateY\(180deg\)\]{transform:rotateY(180deg)}@font-face{font-family:bundled-minecraft-font-mrapp;font-style:normal;font-display:swap;font-weight:400;src:url(https://cdn-raw.modrinth.com/fonts/minecraft/regular.otf)format("opentype")}@font-face{font-family:bundled-minecraft-font-mrapp;font-style:italic;font-display:swap;font-weight:400;src:url(https://cdn-raw.modrinth.com/fonts/minecraft/italic.otf)format("opentype")}@font-face{font-family:bundled-minecraft-font-mrapp;font-style:normal;font-display:swap;font-weight:600;src:url(https://cdn-raw.modrinth.com/fonts/minecraft/bold.otf)format("opentype")}@font-face{font-family:bundled-minecraft-font-mrapp;font-style:italic;font-display:swap;font-weight:600;src:url(https://cdn-raw.modrinth.com/fonts/minecraft/bold-italic.otf)format("opentype")}.font-minecraft{font-family:bundled-minecraft-font-mrapp,monospace}:root{font-family:var(--font-standard,sans-serif),sans-serif;color-scheme:dark;--view-width:calc(100% - 5rem);--expanded-view-width:calc(100% - 13rem)}body{width:100%;height:100%;position:fixed;overflow:hidden}.no-wrap{white-space:nowrap}.no-select{-webkit-user-select:none;-moz-user-select:none;user-select:none}a{color:var(--color-link);text-decoration:none}a:hover{text-decoration:none}input{border:none!important}.badge{border-radius:var(--radius-md);white-space:nowrap;background-color:var(--color-bg);padding-block:var(--gap-sm);padding-inline:var(--gap-lg);align-items:center;width:min-content;display:flex}.badge svg{width:1.1rem;height:1.1rem;margin-right:.5rem}.badge.featured{background-color:var(--color-brand-highlight);color:var(--color-contrast)}*{scrollbar-width:auto;scrollbar-color:var(--color-scrollbar)var(--color-bg)}::-webkit-scrollbar{opacity:.5;border:3px solid #0000;width:16px;-webkit-transition:opacity .2s ease-in-out;transition:opacity .2s ease-in-out}::-webkit-scrollbar:hover{opacity:1}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background-color:var(--color-scrollbar);border-radius:var(--radius-lg);background-clip:content-box;border:5px solid #0000}.highlighted{box-shadow:0 0 1rem var(--color-brand)!important}.gecko{background-color:var(--color-raised-bg);box-shadow:none!important}img{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.card-shadow{box-shadow:var(--shadow-card)}@font-face{font-family:inter;font-style:normal;font-weight:400;font-display:swap;src:url(https://cdn-raw.modrinth.com/fonts/inter/Inter-Regular.woff2?v=3.19)format("woff2"),url(https://cdn-raw.modrinth.com/fonts/inter/Inter-Regular.woff?v=3.19)format("woff")}@font-face{font-family:inter;font-style:normal;font-weight:500;font-display:swap;src:url(https://cdn-raw.modrinth.com/fonts/inter/Inter-Medium.woff2?v=3.19)format("woff2"),url(https://cdn-raw.modrinth.com/fonts/inter/Inter-Medium.woff?v=3.19)format("woff")}@font-face{font-family:inter;font-style:normal;font-weight:600;font-display:swap;src:url(https://cdn-raw.modrinth.com/fonts/inter/Inter-SemiBold.woff2?v=3.19)format("woff2"),url(https://cdn-raw.modrinth.com/fonts/inter/Inter-SemiBold.woff?v=3.19)format("woff")}@font-face{font-family:inter;font-style:normal;font-weight:700;font-display:swap;src:url(https://cdn-raw.modrinth.com/fonts/inter/Inter-Bold.woff2?v=3.19)format("woff2"),url(https://cdn-raw.modrinth.com/fonts/inter/Inter-Bold.woff?v=3.19)format("woff")}@font-face{font-family:inter;font-style:normal;font-weight:800;font-display:swap;src:url(https://cdn-raw.modrinth.com/fonts/inter/Inter-ExtraBold.woff2?v=3.19)format("woff2"),url(https://cdn-raw.modrinth.com/fonts/inter/Inter-ExtraBold.woff?v=3.19)format("woff")}.before\:absolute:before{content:var(--tw-content);position:absolute}.before\:inset-0:before{content:var(--tw-content);inset:0}.before\:transition-all:before{content:var(--tw-content);transition-property:all;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1)}.before\:content-\[\'\'\]:before{--tw-content:"";content:var(--tw-content)}.last\:border-b-0:last-child{border-bottom-width:0}.empty\:hidden:empty{display:none}.hover\:cursor-pointer:hover{cursor:pointer}.hover\:border-inverted:hover{border-color:var(--color-text-inverted)}.hover\:bg-\[--_hover-bg\]:hover{background-color:var(--_hover-bg)}.hover\:bg-button-bg:hover{background-color:var(--color-button-bg)}.hover\:text-\[--_hover-text\]:hover{color:var(--_hover-text)}.hover\:text-contrast:hover{color:var(--color-contrast)}.hover\:text-red:hover{color:var(--color-red)}.hover\:underline:hover{text-decoration-line:underline}.hover\:brightness-125:hover{--tw-brightness:brightness(1.25);filter:var(--tw-blur)var(--tw-brightness)var(--tw-contrast)var(--tw-grayscale)var(--tw-hue-rotate)var(--tw-invert)var(--tw-saturate)var(--tw-sepia)var(--tw-drop-shadow)}.hover\:brightness-75:hover{--tw-brightness:brightness(.75);filter:var(--tw-blur)var(--tw-brightness)var(--tw-contrast)var(--tw-grayscale)var(--tw-hue-rotate)var(--tw-invert)var(--tw-saturate)var(--tw-sepia)var(--tw-drop-shadow)}.hover\:brightness-90:hover{--tw-brightness:brightness(.9);filter:var(--tw-blur)var(--tw-brightness)var(--tw-contrast)var(--tw-grayscale)var(--tw-hue-rotate)var(--tw-invert)var(--tw-saturate)var(--tw-sepia)var(--tw-drop-shadow)}.hover\:brightness-\[--hover-brightness\]:hover{--tw-brightness:brightness(var(--hover-brightness));filter:var(--tw-blur)var(--tw-brightness)var(--tw-contrast)var(--tw-grayscale)var(--tw-hue-rotate)var(--tw-invert)var(--tw-saturate)var(--tw-sepia)var(--tw-drop-shadow)}.hover\:before\:backdrop-brightness-110:hover:before{content:var(--tw-content);--tw-backdrop-brightness:brightness(1.1);backdrop-filter:var(--tw-backdrop-blur)var(--tw-backdrop-brightness)var(--tw-backdrop-contrast)var(--tw-backdrop-grayscale)var(--tw-backdrop-hue-rotate)var(--tw-backdrop-invert)var(--tw-backdrop-opacity)var(--tw-backdrop-saturate)var(--tw-backdrop-sepia)}.focus\:rounded-full:focus{border-radius:9999px}.focus\:border-none:focus{border-style:none}.focus\:outline-none:focus{outline-offset:2px;outline:2px solid #0000}.focus-visible\:bg-\[--_hover-bg\]:focus-visible{background-color:var(--_hover-bg)}.focus-visible\:bg-button-bg:focus-visible{background-color:var(--color-button-bg)}.focus-visible\:text-\[--_hover-text\]:focus-visible{color:var(--_hover-text)}.focus-visible\:text-contrast:focus-visible{color:var(--color-contrast)}.focus-visible\:text-red:focus-visible{color:var(--color-red)}.focus-visible\:brightness-\[--hover-brightness\]:focus-visible{--tw-brightness:brightness(var(--hover-brightness));filter:var(--tw-blur)var(--tw-brightness)var(--tw-contrast)var(--tw-grayscale)var(--tw-hue-rotate)var(--tw-invert)var(--tw-saturate)var(--tw-sepia)var(--tw-drop-shadow)}.active\:scale-95:active,.active\:scale-\[0\.95\]:active{--tw-scale-x:.95;--tw-scale-y:.95;transform:translate(var(--tw-translate-x),var(--tw-translate-y))rotate(var(--tw-rotate))skew(var(--tw-skew-x))skewY(var(--tw-skew-y))scaleX(var(--tw-scale-x))scaleY(var(--tw-scale-y))}.active\:scale-\[0\.96\]:active{--tw-scale-x:.96;--tw-scale-y:.96;transform:translate(var(--tw-translate-x),var(--tw-translate-y))rotate(var(--tw-rotate))skew(var(--tw-skew-x))skewY(var(--tw-skew-y))scaleX(var(--tw-scale-x))scaleY(var(--tw-scale-y))}.active\:scale-\[0\.97\]:active{--tw-scale-x:.97;--tw-scale-y:.97;transform:translate(var(--tw-translate-x),var(--tw-translate-y))rotate(var(--tw-rotate))skew(var(--tw-skew-x))skewY(var(--tw-skew-y))scaleX(var(--tw-scale-x))scaleY(var(--tw-scale-y))}.active\:scale-\[0\.98\]:active{--tw-scale-x:.98;--tw-scale-y:.98;transform:translate(var(--tw-translate-x),var(--tw-translate-y))rotate(var(--tw-rotate))skew(var(--tw-skew-x))skewY(var(--tw-skew-y))scaleX(var(--tw-scale-x))scaleY(var(--tw-scale-y))}.active\:scale-\[0\.99\]:active{--tw-scale-x:.99;--tw-scale-y:.99;transform:translate(var(--tw-translate-x),var(--tw-translate-y))rotate(var(--tw-rotate))skew(var(--tw-skew-x))skewY(var(--tw-skew-y))scaleX(var(--tw-scale-x))scaleY(var(--tw-scale-y))}.active\:brightness-125:active{--tw-brightness:brightness(1.25);filter:var(--tw-blur)var(--tw-brightness)var(--tw-contrast)var(--tw-grayscale)var(--tw-hue-rotate)var(--tw-invert)var(--tw-saturate)var(--tw-sepia)var(--tw-drop-shadow)}.group:focus-within .group-focus-within\:scale-100{--tw-scale-x:1;--tw-scale-y:1;transform:translate(var(--tw-translate-x),var(--tw-translate-y))rotate(var(--tw-rotate))skew(var(--tw-skew-x))skewY(var(--tw-skew-y))scaleX(var(--tw-scale-x))scaleY(var(--tw-scale-y))}.group:focus-within .group-focus-within\:scale-95{--tw-scale-x:.95;--tw-scale-y:.95;transform:translate(var(--tw-translate-x),var(--tw-translate-y))rotate(var(--tw-rotate))skew(var(--tw-skew-x))skewY(var(--tw-skew-y))scaleX(var(--tw-scale-x))scaleY(var(--tw-scale-y))}.group:focus-within .group-focus-within\:opacity-0{opacity:0}.group:focus-within .group-focus-within\:opacity-100{opacity:1}.group:hover .group-hover\:-translate-y-3{--tw-translate-y:-.75rem;transform:translate(var(--tw-translate-x),var(--tw-translate-y))rotate(var(--tw-rotate))skew(var(--tw-skew-x))skewY(var(--tw-skew-y))scaleX(var(--tw-scale-x))scaleY(var(--tw-scale-y))}.group:hover .group-hover\:translate-x-0{--tw-translate-x:0px;transform:translate(var(--tw-translate-x),var(--tw-translate-y))rotate(var(--tw-rotate))skew(var(--tw-skew-x))skewY(var(--tw-skew-y))scaleX(var(--tw-scale-x))scaleY(var(--tw-scale-y))}.group:hover .group-hover\:translate-x-1{--tw-translate-x:.25rem;transform:translate(var(--tw-translate-x),var(--tw-translate-y))rotate(var(--tw-rotate))skew(var(--tw-skew-x))skewY(var(--tw-skew-y))scaleX(var(--tw-scale-x))scaleY(var(--tw-scale-y))}.group:hover .group-hover\:translate-y-0{--tw-translate-y:0px;transform:translate(var(--tw-translate-x),var(--tw-translate-y))rotate(var(--tw-rotate))skew(var(--tw-skew-x))skewY(var(--tw-skew-y))scaleX(var(--tw-scale-x))scaleY(var(--tw-scale-y))}.group:hover .group-hover\:scale-100{--tw-scale-x:1;--tw-scale-y:1;transform:translate(var(--tw-translate-x),var(--tw-translate-y))rotate(var(--tw-rotate))skew(var(--tw-skew-x))skewY(var(--tw-skew-y))scaleX(var(--tw-scale-x))scaleY(var(--tw-scale-y))}.group:hover .group-hover\:scale-95{--tw-scale-x:.95;--tw-scale-y:.95;transform:translate(var(--tw-translate-x),var(--tw-translate-y))rotate(var(--tw-rotate))skew(var(--tw-skew-x))skewY(var(--tw-skew-y))scaleX(var(--tw-scale-x))scaleY(var(--tw-scale-y))}.group:hover .group-hover\:\!bg-brand{background-color:var(--color-brand)!important}.group:hover .group-hover\:\!bg-button-bg{background-color:var(--color-button-bg)!important}.group:hover .group-hover\:text-brand{color:var(--color-brand)}.group:hover .group-hover\:underline{text-decoration-line:underline}.group:hover .group-hover\:opacity-0{opacity:0}.group:hover .group-hover\:opacity-100{opacity:1}.group:hover .group-hover\:brightness-100{--tw-brightness:brightness(1);filter:var(--tw-blur)var(--tw-brightness)var(--tw-contrast)var(--tw-grayscale)var(--tw-hue-rotate)var(--tw-invert)var(--tw-saturate)var(--tw-sepia)var(--tw-drop-shadow)}.group:hover .group-hover\:brightness-125{--tw-brightness:brightness(1.25);filter:var(--tw-blur)var(--tw-brightness)var(--tw-contrast)var(--tw-grayscale)var(--tw-hue-rotate)var(--tw-invert)var(--tw-saturate)var(--tw-sepia)var(--tw-drop-shadow)}.group:hover .group-hover\:brightness-75{--tw-brightness:brightness(.75);filter:var(--tw-blur)var(--tw-brightness)var(--tw-contrast)var(--tw-grayscale)var(--tw-hue-rotate)var(--tw-invert)var(--tw-saturate)var(--tw-sepia)var(--tw-drop-shadow)}.group:hover .group-hover\:\[transform\:rotateY\(180deg\)\]{transform:rotateY(180deg)}.group:active .group-active\:scale-95{--tw-scale-x:.95;--tw-scale-y:.95;transform:translate(var(--tw-translate-x),var(--tw-translate-y))rotate(var(--tw-rotate))skew(var(--tw-skew-x))skewY(var(--tw-skew-y))scaleX(var(--tw-scale-x))scaleY(var(--tw-scale-y))}@supports (grid-template-columns:subgrid){.supports-\[grid-template-columns\:subgrid\]\:col-span-full{grid-column:1/-1}.supports-\[grid-template-columns\:subgrid\]\:grid{display:grid}.supports-\[grid-template-columns\:subgrid\]\:\!grid-cols-subgrid{grid-template-columns:subgrid!important}.supports-\[grid-template-columns\:subgrid\]\:grid-cols-\[1fr_min-content\]{grid-template-columns:1fr min-content}}@media not all and (width>=640px){.max-sm\:\!hidden{display:none!important}.max-sm\:hidden{display:none}.max-sm\:flex-row{flex-direction:row}.max-sm\:justify-start{justify-content:flex-start}.max-sm\:gap-3{gap:.75rem}}@media (width>=640px){.sm\:block{display:block}.sm\:inline{display:inline}.sm\:flex{display:flex}.sm\:contents{display:contents}.sm\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.sm\:grid-cols-\[3fr_2fr\]{grid-template-columns:3fr 2fr}.sm\:grid-cols-\[min-content_1fr_1fr_1fr_min-content\]{grid-template-columns:min-content 1fr 1fr 1fr min-content}.sm\:flex-row{flex-direction:row}.sm\:items-center{align-items:center}.sm\:px-8{padding-left:2rem;padding-right:2rem}}@supports (grid-template-columns:subgrid){@media (width>=640px){.supports-\[grid-template-columns\:subgrid\]\:sm\:grid-cols-\[min-content_auto_auto_auto_min-content\]{grid-template-columns:min-content auto auto auto min-content}}}@media (width>=640px){@media not all and (width>=1280px){.sm\:max-xl\:collapse{visibility:collapse}.sm\:max-xl\:hidden{display:none}}}@media (width>=768px){.md\:right-20{right:5rem}.md\:flex{display:flex}.md\:w-\[600px\]{width:600px}.md\:w-\[650px\]{width:650px}.md\:flex-row{flex-direction:row}.md\:border-r{border-right-width:1px}}@media (width>=1024px){.lg\:grid-cols-5{grid-template-columns:repeat(5,minmax(0,1fr))}.lg\:grid-cols-\[1fr_auto\]{grid-template-columns:1fr auto}}@media (width>=1280px){.xl\:collapse{visibility:collapse}.xl\:contents{display:contents}.xl\:hidden{display:none}.xl\:grid-cols-\[min-content_1fr_1fr_1fr_1fr_1fr_min-content\]{grid-template-columns:min-content 1fr 1fr 1fr 1fr 1fr min-content}.xl\:self-center{align-self:center}}@supports (grid-template-columns:subgrid){@media (width>=1280px){.supports-\[grid-template-columns\:subgrid\]\:xl\:grid-cols-\[min-content_auto_auto_auto_auto_auto_min-content\]{grid-template-columns:min-content auto auto auto auto auto min-content}}}.\[\&\:first-child\>button\]\:pt-4:first-child>button{padding-top:1rem}.\[\&\>a\:hover\]\:underline>a:hover{text-decoration-line:underline}.\[\&\>a\]\:flex>a{display:flex}.\[\&\>a\]\:w-fit>a{width:fit-content}.\[\&\>a\]\:items-center>a{align-items:center}.\[\&\>a\]\:gap-2>a{gap:.5rem}.\[\&\>a\]\:leading-\[1\.2\]>a{line-height:1.2}.\[\&\>a\]\:text-primary>a{color:var(--color-base)}.\[\&\>div\]\:flex>div{display:flex}.\[\&\>div\]\:items-center>div{align-items:center}.\[\&\>div\]\:gap-2>div{gap:.5rem}.\[\&\>svg\.check-icon\]\:hover\:text-brand:hover>svg.check-icon,.\[\&\>svg\.check-icon\]\:focus-visible\:text-brand:focus-visible>svg.check-icon{color:var(--color-brand)}.\[\&\>svg\]\:h-4>svg{height:1rem}.\[\&\>svg\]\:w-4>svg{width:1rem}.\[\&\>svg\]\:shrink-0>svg{flex-shrink:0}.group:hover .group-hover\:\[\&\>svg\]\:\!text-brand-inverted>svg{color:var(--color-accent-contrast)!important}.\[\&_svg\]\:h-full svg{height:100%}.\[\&_svg\]\:w-full svg{width:100%}@media (hover:hover){.\[\@media\(hover\:hover\)\]\:contents{display:contents}.\[\@media\(hover\:hover\)\]\:py-1{padding-top:.25rem;padding-bottom:.25rem}.\[\@media\(hover\:hover\)\]\:opacity-0{opacity:0}}.light,.light-mode,.light-properties,html{--color-bg:#e5e7eb;--color-raised-bg:#fff;--color-super-raised-bg:#e9e9e9;--color-button-bg:#e5e7eb;--color-button-border:#a1a1a159;--color-scrollbar:#96a2b0;--color-divider:#babfc5;--color-divider-dark:#c8cdd3;--color-base:#111827;--color-secondary:#6b7280;--color-contrast:#1a202c;--color-accent-contrast:#fff;--color-red:#cb2245;--color-orange:#e08325;--color-green:#00af5c;--color-blue:#1f68c0;--color-purple:#8e32f3;--color-gray:#595b61;--color-red-highlight:#cb224540;--color-orange-highlight:#e0832540;--color-green-highlight:#00af5c40;--color-blue-highlight:#1f68c040;--color-purple-highlight:#8e32f340;--color-gray-highlight:#595b6140;--color-red-bg:#cb22451a;--color-orange-bg:#e083251a;--color-green-bg:#00af5c1a;--color-blue-bg:#1f68c01a;--color-purple-bg:#8e32f31a;--color-brand:var(--color-green);--color-brand-highlight:var(--color-green-highlight);--color-brand-shadow:#00af5cb3;--shadow-inset-lg:inset 0px -2px 2px #dfe5f11a;--shadow-inset:inset 0px -2px 2px #dfe5f10d;--shadow-inset-sm:inset 0px -1px 2px #dfe5f126;--shadow-raised-lg:0px 2px 4px #11182733;--shadow-raised:.3px .5px .6px hsl(var(--shadow-color)/.15),1px 2px 2.2px -1.7px hsl(var(--shadow-color)/.12),4.4px 8.8px 9.7px -3.4px hsl(var(--shadow-color)/.09);--shadow-floating:#0000 0px 0px 0px 0px,#0000 0px 0px 0px 0px,#0000001a 0px 4px 6px -1px,#0000001a 0px 2px 4px -1px;--shadow-card:#3232641a 0px 2px 4px 0px;--brand-gradient-bg:linear-gradient(0deg,#44b68a2d 0%,#3afa7020 100%);--brand-gradient-strong-bg:linear-gradient(270deg,#44b68a2d 0%,#24e15b1f 100%);--brand-gradient-button:#ffffff80;--brand-gradient-border:#20402026;--brand-gradient-fade-out-color:linear-gradient(to bottom,#d5ebe000,#d0ece0 70%);--color-button-bg-selected:var(--color-brand);--color-button-text-selected:var(--color-accent-contrast);--color-gradient-button-bg:linear-gradient(180deg,#f8f9fa 0%,#dce0e6 100%);--loading-bar-gradient:linear-gradient(to right,var(--color-brand)0%,#00af5c 100%);--color-platform-fabric:#8a7b71;--color-platform-quilt:#8b61b4;--color-platform-forge:#5b6197;--color-platform-neoforge:#dc895c;--color-platform-liteloader:#4c90de;--color-platform-bukkit:#e78362;--color-platform-bungeecord:#c69e39;--color-platform-folia:#6aa54f;--color-platform-paper:#e67e7e;--color-platform-purpur:#7763a3;--color-platform-spigot:#cd7a21;--color-platform-velocity:#4b98b0;--color-platform-waterfall:#5f83cb;--color-platform-sponge:#c49528;--color-platform-ornithe:#6097ca;--color-platform-bta-babric:#5ba938;--color-platform-legacy-fabric:#6879f6;--color-platform-nilloader:#dd5088;--hover-brightness:.9}html{--dark-color-base:#b0bac5;--dark-color-contrast:#ecf9fb;--gap-xs:.25rem;--gap-sm:.5rem;--gap-md:.75rem;--gap-lg:1rem;--gap-xl:1.5rem;--radius-xs:.25rem;--radius-sm:.5rem;--radius-md:.75rem;--radius-lg:1rem;--radius-xl:1.25rem;--radius-max:1000000000px;--color-tooltip-text:var(--dark-color-contrast);--color-tooltip-bg:#000;--color-ad:#7d4ba233;--color-ad-raised:#be8cf380;--color-ad-contrast:black;--color-ad-highlight:var(--color-purple)}.dark,.dark-mode,.oled-mode,:root[data-theme=dark]{--color-bg:#16181c;--color-raised-bg:#26292f;--color-super-raised-bg:#40434a;--color-button-bg:#434956;--color-button-border:#c1bed11f;--color-scrollbar:var(--color-button-bg);--color-divider:var(--color-button-bg);--color-divider-dark:#646c75;--color-base:var(--dark-color-base);--color-secondary:#96a2b0;--color-contrast:var(--dark-color-contrast);--color-accent-contrast:#000;--color-red:#ff496e;--color-orange:#ffa347;--color-green:#1bd96a;--color-blue:#4f9cff;--color-purple:#c78aff;--color-gray:#9fa4b3;--color-red-highlight:#ff496e40;--color-orange-highlight:#ffa34740;--color-green-highlight:#1bd96a40;--color-blue-highlight:#4f9cff40;--color-purple-highlight:#c78aff40;--color-gray-highlight:#9fa4b340;--color-red-bg:#ff496e33;--color-orange-bg:#ffa34733;--color-green-bg:#1bd96a33;--color-blue-bg:#4f9cff33;--color-purple-bg:#c78aff33;--color-brand:var(--color-green);--color-brand-highlight:#1bd96a40;--color-brand-shadow:#1bd96ab3;--shadow-inset-lg:inset 0px -2px 2px #1118271a;--shadow-inset:inset 0px -2px 2px #1118270d;--shadow-inset-sm:inset 0px -1px 1px #11182740;--shadow-raised-lg:0px 2px 4px #11182733;--shadow-raised:0px -2px 4px #1118271a;--shadow-floating:#0000 0px 0px 0px 0px,#0000 0px 0px 0px 0px,#0000001a 0px 4px 6px -1px,#0000000f 0px 2px 4px -1px;--shadow-card:#00000040 0px 2px 4px 0px;--brand-gradient-bg:linear-gradient(0deg,#0e231333 0%,#3789491a 100%);--brand-gradient-strong-bg:linear-gradient(270deg,#09110d 10%,#131f17 100%);--brand-gradient-button:#ffffff14;--brand-gradient-border:#9bffa014;--brand-gradient-fade-out-color:linear-gradient(to bottom,#181e1f00,#171d1e 80%);--color-button-bg-selected:var(--color-brand-highlight);--color-button-text-selected:var(--color-brand);--color-gradient-button-bg:linear-gradient(180deg,#3a3d47 0%,#33363d 100%);--loading-bar-gradient:linear-gradient(to right,var(--color-brand)0%,#1ffa9a 100%);--color-platform-fabric:#dbb69b;--color-platform-quilt:#c796f9;--color-platform-forge:#959eef;--color-platform-neoforge:#f99e6b;--color-platform-liteloader:#7ab0ee;--color-platform-bukkit:#f6af7b;--color-platform-bungeecord:#d2c080;--color-platform-folia:#a5e388;--color-platform-paper:#eaa;--color-platform-purpur:#c3abf7;--color-platform-spigot:#f1cc84;--color-platform-velocity:#83d5ef;--color-platform-waterfall:#78a4fb;--color-platform-sponge:#f9e580;--color-platform-ornithe:#87c7ff;--color-platform-bta-babric:#72cc4a;--color-platform-legacy-fabric:#6879f6;--color-platform-nilloader:#f45e9a;--hover-brightness:1.25;--experimental-color-button-bg:#33363d}.oled-mode{--color-bg:#000;--color-raised-bg:#101013;--color-button-bg:#222329;--color-ad:#0d1828;--brand-gradient-bg:linear-gradient(0deg,#16423326 0%,#3789491a 100%);--brand-gradient-strong-bg:linear-gradient(270deg,#09120e99 10%,#131f1780 100%);--color-gradient-button-bg:linear-gradient(180deg,#1b1b20 0%,#25262b 100%)}.retro-mode{--brand-gradient-strong-bg:#3a3b38}.experimental-styles-within{--color-link:var(--color-blue)!important;--color-link-hover:var(--color-blue)!important;--color-link-active:var(--color-blue)!important}.experimental-styles-within .light,.experimental-styles-within .light-mode,.light .experimental-styles-within,.light-experiments,.light-mode .experimental-styles-within,.light-mode.experimental-styles-within,.light.experimental-styles-within{--color-bg:#ebebeb;--color-raised-bg:#fff;--color-button-bg:#f5f5f5;--color-base:#2c2e31;--color-secondary:#484d54;--color-accent-contrast:#fff}.dark-experiments,.dark-mode:not(.oled-mode) .experimental-styles-within,.dark-mode:not(.oled-mode).experimental-styles-within,.dark:not(.oled-mode) .experimental-styles-within,.dark:not(.oled-mode).experimental-styles-within,.experimental-styles-within .dark-mode:not(.oled-mode),.experimental-styles-within .dark:not(.oled-mode),.experimental-styles-within .oled-mode:not(.oled-mode),.oled-mode:not(.oled-mode) .experimental-styles-within,.oled-mode:not(.oled-mode).experimental-styles-within{--color-button-bg:var(--experimental-color-button-bg)}html{-webkit-text-size-adjust:100%;line-height:1.15}body{margin:0}main{display:block}h1{margin:.67em 0;font-size:2em}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace;font-size:1em}a{background-color:#0000}abbr[title]{text-decoration:underline;border-bottom:none;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace;font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{margin:0;font-family:inherit;font-size:100%;line-height:1.15}button,input{overflow:visible}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted buttontext}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;white-space:normal;max-width:100%;padding:0;display:table}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}template,[hidden]{display:none}.card .label :where(.label__title),.card label :where(.label__title),.universal-body .label :where(.label__title),.universal-body label :where(.label__title),.universal-labels .label :where(.label__title),.universal-labels label :where(.label__title){margin-block:var(--gap-md)var(--gap-sm);color:var(--color-contrast);font-size:1.17rem;font-weight:700;display:block}.card .label :where(.label__title) .required,.card label :where(.label__title) .required,.universal-body .label :where(.label__title) .required,.universal-body label :where(.label__title) .required,.universal-labels .label :where(.label__title) .required,.universal-labels label :where(.label__title) .required{color:var(--color-red)}.card .label :where(.label__title).size-card-header,.card label :where(.label__title).size-card-header,.universal-body .label :where(.label__title).size-card-header,.universal-body label :where(.label__title).size-card-header,.universal-labels .label :where(.label__title).size-card-header,.universal-labels label :where(.label__title).size-card-header{font-size:var(--font-size-xl);margin-bottom:1rem}.card .label :where(.label__description),.card label :where(.label__description),.universal-body .label :where(.label__description),.universal-body label :where(.label__description),.universal-labels .label :where(.label__description),.universal-labels label :where(.label__description){margin-block-end:var(--gap-sm);display:block}.card .label :where(.label__description) .label__subdescription,.card label :where(.label__description) .label__subdescription,.universal-body .label :where(.label__description) .label__subdescription,.universal-body label :where(.label__description) .label__subdescription,.universal-labels .label :where(.label__description) .label__subdescription,.universal-labels label :where(.label__description) .label__subdescription{margin-block-start:var(--gap-md);display:block}.card .label :where(h1,h2,h3,h4),.card label :where(h1,h2,h3,h4),.universal-body .label :where(h1,h2,h3,h4),.universal-body label :where(h1,h2,h3,h4),.universal-labels .label :where(h1,h2,h3,h4),.universal-labels label :where(h1,h2,h3,h4){margin-block:0}.card .multiselect,.universal-body .multiselect{width:15rem}.card>:where(input+*,.input-group+*,.textarea-wrapper+*,.chips+*,.resizable-textarea-wrapper+*,.input-div+*),.universal-body>:where(input+*,.input-group+*,.textarea-wrapper+*,.chips+*,.resizable-textarea-wrapper+*,.input-div+*){margin-block-start:var(--gap-md)}.card :where(button,.button,.btn),.universal-body :where(button,.button,.btn){width:fit-content}.card .input-group input,.universal-body .input-group input{flex-basis:0;width:auto}.card :where(input),.universal-body :where(input){box-sizing:border-box;max-height:40px}.card :where(input):not(.stylized-toggle),.universal-body :where(input):not(.stylized-toggle){max-width:100%}:where(.adjacent-input){align-items:center;gap:var(--gap-sm);margin-bottom:calc(var(--gap-sm) + var(--gap-md));flex-flow:wrap;display:flex}:where(.adjacent-input) .btn,:where(.adjacent-input) .input-group{flex-shrink:0}:where(.adjacent-input) input{flex-shrink:1}:where(.adjacent-input)>:first-child{flex-grow:1;flex-shrink:2;flex-basis:min-content}:where(.adjacent-input) .label .label__title,:where(.adjacent-input) label .label__title{margin-block:0}:where(.adjacent-input) .label .label__description,:where(.adjacent-input) label .label__description{margin-block-end:0}:where(.adjacent-input) .label .label__description:not(:first-child),:where(.adjacent-input) label .label__description:not(:first-child){margin-top:var(--gap-sm)}@media screen and (width<=750px){:where(.adjacent-input):not(:where(.adjacent-input).small){flex-direction:column;align-items:start}:where(.adjacent-input):not(:where(.adjacent-input).small) .stylized-toggle{flex-basis:0}}.card h1,.universal-body h1{align-items:center;display:flex}.card>:first-child,.universal-body>:first-child{margin-block-start:0}.card>:last-child,.universal-body>:last-child{margin-block-end:0}.card :where(.header__row),.universal-body :where(.header__row){gap:var(--gap-sm);flex-flow:wrap;display:flex}.card :where(.header__row) *,.universal-body :where(.header__row) *{flex-shrink:0}.card :where(.header__row) .header__title,.universal-body :where(.header__row) .header__title{flex-grow:1;margin:0}.card :where(.header__row):not(:last-child),.universal-body :where(.header__row):not(:last-child){margin-bottom:var(--gap-md)}.card ol ol,.card ol ul,.card ul ol,.card ul ul,.universal-body ol ol,.universal-body ol ul,.universal-body ul ol,.universal-body ul ul{margin-bottom:0}.input-group{grid-gap:var(--gap-sm);flex-flow:wrap;align-items:center;max-width:100%;display:flex}.input-group .multiselect{width:15rem}.input-group input{flex-shrink:2}.input-group.shrink-first :first-child{flex-grow:1;flex-shrink:2;flex-basis:min-content}.input-group.shrink-first :not(:first-child){flex-shrink:1}.push-right.input-group>:first-child,.push-right:not(.input-group){margin-left:auto;margin-right:0}.input-stack{flex-direction:column;display:flex}.input-stack>*{margin-bottom:var(--gap-md)}.input-stack>.multiselect{width:unset;height:inherit}.standard-body :last-child{margin-bottom:0}.btn,.button-base,.clickable,.stylized-toggle,a{transition:opacity .5s ease-in-out,filter .2s ease-in-out,scale 50ms ease-in-out,outline .2s ease-in-out}.btn:active:not(a:disabled,.clickable:disabled,.button-base:disabled,.stylized-toggle:disabled,.btn:disabled),.button-base:active:not(a:disabled,.clickable:disabled,.button-base:disabled,.stylized-toggle:disabled,.btn:disabled),.clickable:active:not(a:disabled,.clickable:disabled,.button-base:disabled,.stylized-toggle:disabled,.btn:disabled),.stylized-toggle:active:not(a:disabled,.clickable:disabled,.button-base:disabled,.stylized-toggle:disabled,.btn:disabled),a:active:not(a:disabled,.clickable:disabled,.button-base:disabled,.stylized-toggle:disabled,.btn:disabled){scale:.95}.btn,.button-base,.stylized-toggle{border:none;outline:2px solid #0000;font-weight:500}.btn:focus-visible:not(.button-base:disabled):not(.stylized-toggle:disabled):not(.btn:disabled),.btn:hover:not(.button-base:disabled):not(.stylized-toggle:disabled):not(.btn:disabled),.button-base:focus-visible:not(.button-base:disabled):not(.stylized-toggle:disabled):not(.btn:disabled),.button-base:hover:not(.button-base:disabled):not(.stylized-toggle:disabled):not(.btn:disabled),.stylized-toggle:focus-visible:not(.button-base:disabled):not(.stylized-toggle:disabled):not(.btn:disabled),.stylized-toggle:hover:not(.button-base:disabled):not(.stylized-toggle:disabled):not(.btn:disabled){cursor:pointer}.btn:focus-visible:not(.button-base:disabled):not(.stylized-toggle:disabled):not(.btn:disabled):not(.btn-outline.btn-hover-filled,.btn-transparent),.btn:hover:not(.button-base:disabled):not(.stylized-toggle:disabled):not(.btn:disabled):not(.btn-outline.btn-hover-filled,.btn-transparent),.button-base:focus-visible:not(.button-base:disabled):not(.stylized-toggle:disabled):not(.btn:disabled):not(.btn-outline.btn-hover-filled,.btn-transparent),.button-base:hover:not(.button-base:disabled):not(.stylized-toggle:disabled):not(.btn:disabled):not(.btn-outline.btn-hover-filled,.btn-transparent),.stylized-toggle:focus-visible:not(.button-base:disabled):not(.stylized-toggle:disabled):not(.btn:disabled):not(.btn-outline.btn-hover-filled,.btn-transparent),.stylized-toggle:hover:not(.button-base:disabled):not(.stylized-toggle:disabled):not(.btn:disabled):not(.btn-outline.btn-hover-filled,.btn-transparent){filter:brightness(.85)}.btn:active:not(.button-base:disabled,.stylized-toggle:disabled,.btn:disabled,.btn-outline.btn-hover-filled,.btn-transparent),.button-base:active:not(.button-base:disabled,.stylized-toggle:disabled,.btn:disabled,.btn-outline.btn-hover-filled,.btn-transparent),.stylized-toggle:active:not(.button-base:disabled,.stylized-toggle:disabled,.btn:disabled,.btn-outline.btn-hover-filled,.btn-transparent){filter:brightness(.8)}.btn:disabled.quiet-disabled,.button-base:disabled.quiet-disabled,.stylized-toggle:disabled.quiet-disabled{cursor:unset}.btn:disabled:not(.quiet-disabled),.button-base:disabled:not(.quiet-disabled),.button-base[disabled]:not(.quiet-disabled),.stylized-toggle:disabled:not(.quiet-disabled),[disabled].btn:not(.quiet-disabled),[disabled].stylized-toggle:not(.quiet-disabled){cursor:not-allowed;filter:grayscale(50%);opacity:.5;box-shadow:none}.button-within{transition:opacity .5s ease-in-out,filter .2s ease-in-out,transform 50ms ease-in-out,outline .2s ease-in-out}.button-within:focus-visible:not(.button-within.disabled),.button-within:hover:not(.button-within.disabled){filter:brightness(.85)}.button-within:active:not(.button-within.disabled){filter:brightness(.8)}.button-within:active:not(.button-within.disabled) button:not(.button-within:disabled){transform:scale(.95)}.button-within.disabled{cursor:not-allowed;filter:grayscale(50%);opacity:.5;box-shadow:none}.button-within.disabled[disabled],.button-within.disableddisabled{cursor:not-allowed;box-shadow:none}.btn{--_text-color:var(--color-base);--_background-color:var(--color-button-bg);--_accent-color:var(--color-base);--_shadow:var(--shadow-inset-sm),0 0 0 0 transparent;box-sizing:border-box;color:var(--_text-color);background-color:var(--_background-color);box-shadow:var(--_shadow);border-radius:var(--radius-md);padding:var(--gap-sm)var(--gap-lg);cursor:pointer;align-items:center;gap:.5rem;width:fit-content;height:fit-content;line-height:1.25rem;text-decoration:none;display:flex}.btn.btn-outline,.btn.btn-transparent{box-sizing:border-box;box-shadow:none;background-color:#0000;transition:background-color .2s ease-in-out,border-color .2s ease-in-out,color .2s ease-in-out}.btn.btn-transparent{--_accent-color:var(--color-base);color:var(--_accent-color)}.btn.btn-transparent.btn-hover-filled-only{color:var(--color-base)}.btn.btn-transparent:focus-visible:not(.btn.btn-transparent:disabled),.btn.btn-transparent:hover:not(.btn.btn-transparent:disabled){background-color:var(--color-button-bg)}.btn.btn-transparent:focus-visible:not(.btn.btn-transparent:disabled).btn-hover-filled,.btn.btn-transparent:focus-visible:not(.btn.btn-transparent:disabled).btn-hover-filled-only,.btn.btn-transparent:hover:not(.btn.btn-transparent:disabled).btn-hover-filled,.btn.btn-transparent:hover:not(.btn.btn-transparent:disabled).btn-hover-filled-only{color:var(--_text-color);background-color:var(--_background-color)}.btn.btn-outline{--_accent-color:var(--color-contrast);border:2px solid var(--_accent-color);padding-block:calc(var(--gap-sm) - 2px);color:var(--_background-color)}.btn.btn-outline.btn-hover-filled-only{color:var(--color-contrast);border-color:var(--color-contrast)}.btn.btn-outline:focus-visible:not(.btn.btn-outline:disabled).btn-hover-filled,.btn.btn-outline:focus-visible:not(.btn.btn-outline:disabled).btn-hover-filled-only,.btn.btn-outline:hover:not(.btn.btn-outline:disabled).btn-hover-filled,.btn.btn-outline:hover:not(.btn.btn-outline:disabled).btn-hover-filled-only{border-color:var(--_accent-color);color:var(--_text-color);background-color:var(--_background-color)}.btn.btn-danger{--_text-color:var(--color-accent-contrast);--_background-color:var(--color-red);--_accent-color:var(--color-red)}.btn.btn-primary{--_text-color:var(--color-accent-contrast);--_background-color:var(--color-brand);--_accent-color:var(--color-brand)}.btn.btn-secondary{--_text-color:var(--color-contrast);--_background-color:var(--color-brand-highlight);--_accent-color:var(--color-brand-highlight)}.btn.btn-highlight{--_text-color:var(--color-accent-contrast);--_background-color:var(--color-orange);--_accent-color:var(--color-orange)}.btn.btn-red{--_text-color:var(--color-accent-contrast);--_background-color:var(--color-red);--_accent-color:var(--color-red)}.btn.btn-orange{--_text-color:var(--color-accent-contrast);--_background-color:var(--color-orange);--_accent-color:var(--color-orange)}.btn.btn-green{--_text-color:var(--color-accent-contrast);--_background-color:var(--color-green);--_accent-color:var(--color-green)}.btn.btn-blue{--_text-color:var(--color-accent-contrast);--_background-color:var(--color-blue);--_accent-color:var(--color-blue)}.btn.btn-purple{--_text-color:var(--color-accent-contrast);--_background-color:var(--color-purple);--_accent-color:var(--color-purple)}.btn.btn-gray{--_text-color:var(--color-accent-contrast);--_background-color:var(--color-gray);--_accent-color:var(--color-gray)}.btn svg{width:1.25rem;height:1.25rem}.btn .external-icon{width:.75rem;height:.75rem;margin-bottom:auto;margin-right:0}.btn.icon-only,.iconified-input .btn.r-btn{padding:var(--gap-sm)}.btn.transparent,.iconified-input .btn.r-btn{box-shadow:none;background:0 0}.btn.btn-large{padding:12px 16px;font-size:16px;font-weight:700}.btn.btn-large svg{width:1.5rem;height:1.5rem}.btn.btn-large-round{border-radius:50%;padding:.75rem}.btn.btn-dropdown-animation svg:last-child{transition:transform .125s ease-in-out}.btn.btn-dropdown-animation.popout-open svg:last-child{transform:rotate(180deg)}.btn-dropdown-animation svg:last-child{transition:transform .125s ease-in-out}.v-popper--shown .btn-dropdown-animation svg:last-child{transform:rotate(180deg)}.btn-group{grid-gap:var(--gap-sm);flex-wrap:wrap;display:flex}.joined-buttons{gap:1px;display:flex}.joined-buttons>:not(:first-child).btn,.joined-buttons>:not(:first-child)>.btn{border-top-left-radius:0;border-bottom-left-radius:0}.joined-buttons>:not(:last-child).btn,.joined-buttons>:not(:last-child)>.btn{border-top-right-radius:0;border-bottom-right-radius:0}.project-list{gap:var(--gap-md);width:100%;overflow:hidden}.project-list:not(:first-child){margin-top:var(--gap-md)}.project-list:not(:empty){margin-bottom:var(--gap-md)}.project-list.display-mode--list{flex-direction:column;display:flex}.project-list.display-mode--gallery{grid-template-columns:repeat(2,minmax(0,1fr));display:grid}@media screen and (width<=750px){.project-list.display-mode--gallery{grid-template-columns:repeat(1,minmax(0,1fr))}}.project-list.display-mode--grid{grid-template-columns:repeat(3,minmax(0,1fr));display:grid}@media screen and (width<=80rem){.project-list.display-mode--grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media screen and (width<=1024px){.project-list.display-mode--grid{grid-template-columns:repeat(3,minmax(0,1fr))}}@media screen and (width<=860px){.project-list.display-mode--grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media screen and (width<=550px){.project-list.display-mode--grid{flex-direction:column;display:flex}}.base-card,.card,.navigation-card{padding:var(--gap-xl);min-height:var(--font-size-2xl);background-color:var(--color-raised-bg);border-radius:var(--radius-lg);margin-bottom:var(--gap-md);box-shadow:var(--shadow-card);outline:2px solid #0000;position:relative}.base-card .card__overlay,.card .card__overlay,.navigation-card .card__overlay{grid-gap:.5rem;z-index:2;flex-direction:column;align-items:flex-end;display:flex;position:absolute;top:1rem;right:1rem}.base-card:where(.base-card.warning,.warning.navigation-card,.warning.card,.base-card.information,.information.navigation-card,.information.card),.card:where(.base-card.warning,.warning.navigation-card,.warning.card,.base-card.information,.information.navigation-card,.information.card),.navigation-card:where(.base-card.warning,.warning.navigation-card,.warning.card,.base-card.information,.information.navigation-card,.information.card){min-height:0;padding:1.5rem;line-height:1.5}.base-card:where(.base-card.warning,.warning.navigation-card,.warning.card,.base-card.information,.information.navigation-card,.information.card) a,.card:where(.base-card.warning,.warning.navigation-card,.warning.card,.base-card.information,.information.navigation-card,.information.card) a,.navigation-card:where(.base-card.warning,.warning.navigation-card,.warning.card,.base-card.information,.information.navigation-card,.information.card) a{color:var(--color-blue);text-decoration:underline}.navigation-card{padding-inline:var(--gap-xl);padding-block:var(--gap-md);flex-wrap:wrap;justify-content:space-between;align-items:center;row-gap:.5rem;display:flex}.wrap-as-needed{overflow-wrap:break-word;word-wrap:break-word;word-break:break-word;-webkit-hyphens:auto;hyphens:auto}.sr-only{width:0;height:0;position:absolute;overflow:hidden}.card-divider{background-color:var(--color-button-bg);color:var(--color-button-bg);height:1px;margin:var(--gap-sm)0;border:none}.table{border-radius:var(--radius-md);grid-template-rows:repeat(auto-fill,auto);width:100%;display:grid;overflow:hidden}.table .table-row{transition:opacity .5s ease-in-out,filter .2s ease-in-out,scale 50ms ease-in-out,outline .2s ease-in-out;display:grid}.table .table-row.selectable:focus-visible,.table .table-row.selectable:hover{cursor:pointer;filter:brightness(.85)}.table .table-row.selectable:active{filter:brightness(.8);scale:.99}.table .entire-row{align-items:center;grid-template-columns:1fr!important}.table .table-head .table-cell{background-color:var(--color-accent-contrast)}.table .table-cell{height:100%;vertical-align:center;padding:1rem;display:flex}.table .name-cell{padding-left:0}.table .table-text{white-space:nowrap;text-overflow:fade;overflow:hidden}.table .table-row:nth-child(2n) .table-cell{background-color:var(--color-bg)}.textarea-wrapper{flex-direction:column;align-items:stretch;display:flex}.textarea-wrapper textarea{border-radius:var(--radius-sm);resize:none;flex:1;max-width:100%;overflow-y:auto}.resizable-textarea-wrapper{flex-grow:1;width:100%;margin-bottom:0;display:block}.resizable-textarea-wrapper textarea{border-radius:var(--radius-sm);height:100%;width:calc(100% - var(--gap-xl) - var(--gap-sm));resize:vertical}.switch{-webkit-appearance:none;-moz-appearance:none;appearance:none;-webkit-tap-highlight-color:transparent;cursor:pointer}.stylized-toggle{box-sizing:content-box;border-radius:var(--radius-max);background:var(--color-button-bg);min-width:52px;max-width:52px;height:32px;min-height:32px;margin:0;transition:all .2s;display:inline-block;position:relative}.stylized-toggle:after{content:"";background:var(--color-gray);border-radius:50%;outline:2px solid #0000;width:18px;height:18px;transition:all .2s cubic-bezier(.5,.1,.75,1.35);position:absolute;top:7px;left:7px}@media (prefers-reduced-motion){.stylized-toggle:after{transition:none}}.stylized-toggle:checked{background-color:var(--color-brand)}.stylized-toggle:checked:after{background:var(--color-accent-contrast);transform:translate(20px)}.stylized-toggle:hover .stylized-toggle:focus{background:var(--color-button-bg)}.v-popper--theme-dropdown .v-popper__inner,.v-popper--theme-dropdown.v-popper--theme-ribbit-popout .v-popper__inner{border:1px solid var(--color-button-bg)!important;padding:var(--gap-sm)!important;border-radius:var(--radius-md)!important;background-color:var(--color-raised-bg)!important;width:fit-content!important;box-shadow:var(--shadow-floating)!important}.v-popper--theme-dropdown .v-popper__arrow-outer,.v-popper--theme-dropdown.v-popper--theme-ribbit-popout .v-popper__arrow-outer{border-color:var(--color-button-bg)!important}.v-popper--theme-dropdown .v-popper__arrow-inner,.v-popper--theme-dropdown.v-popper--theme-ribbit-popout .v-popper__arrow-inner{border-color:var(--color-raised-bg)!important}.v-popper__popper[data-popper-placement=bottom-end] .v-popper__wrapper{transform-origin:100% 0}.v-popper__popper[data-popper-placement=top-end] .v-popper__wrapper{transform-origin:100% 100%}.v-popper__popper[data-popper-placement=bottom-start] .v-popper__wrapper{transform-origin:0 0}.v-popper__popper[data-popper-placement=top-start] .v-popper__wrapper{transform-origin:0 100%}.v-popper__popper.v-popper__popper--show-from .v-popper__wrapper{opacity:0;transform:scale(.85)}.v-popper__popper.v-popper__popper--show-to .v-popper__wrapper{opacity:1;transition:transform .125s ease-in-out,opacity .125s ease-in-out;transform:scale(1)}.v-popper__popper.v-popper__popper--hide-from .v-popper__wrapper{opacity:1;transition:transform 62.5ms;transform:none}.v-popper--theme-tooltip .v-popper__inner{filter:drop-shadow(5px 5px .8rem #00000059);font-size:.9rem;font-weight:700;line-height:1;background:var(--color-tooltip-bg)!important;color:var(--color-tooltip-text)!important;border-radius:var(--radius-sm)!important;padding:.5rem!important}.v-popper--theme-tooltip .v-popper__arrow-inner,.v-popper--theme-tooltip .v-popper__arrow-outer{border-color:var(--color-tooltip-bg)}.v-popper--theme-dismissable-prompt{z-index:10}.v-popper--theme-dismissable-prompt .v-popper__inner{border:1px solid var(--color-button-border);filter:drop-shadow(5px 5px .8rem #00000059);font-size:.9rem;font-weight:700;line-height:1;background:var(--color-raised-bg)!important;color:var(--color-tooltip-text)!important;border-radius:.75rem!important;padding:.75rem 1rem!important}.v-popper--theme-dismissable-prompt .v-popper__arrow-outer{border-color:var(--color-button-border)}.v-popper--theme-dismissable-prompt .v-popper__arrow-inner{border-color:var(--color-raised-bg)}.markdown-body h1:first-child{margin-block-start:0;padding-block-start:0}.markdown-body blockquote,.markdown-body code,.markdown-body details,.markdown-body dl,.markdown-body ol,.markdown-body p,.markdown-body pre,.markdown-body table,.markdown-body ul{margin-top:0;margin-bottom:16px}.markdown-body li,.markdown-body p{padding:0;line-height:1.5}.markdown-body h1{display:block}.markdown-body h1,.markdown-body h2,.markdown-body h3{color:var(--color-contrast)}.markdown-body h1,.markdown-body h2{border-bottom:1px solid var(--color-divider);padding:10px 0 5px}.markdown-body h1,.markdown-body h2,.markdown-body h3,.markdown-body h4,.markdown-body h5,.markdown-body h6,.markdown-body li,.markdown-body p{word-wrap:break-word;overflow-wrap:anywhere}.markdown-body blockquote{color:var(--color-base);border-left:.25em solid var(--color-button-bg);margin-inline:0;padding:0 1em}.markdown-body a{cursor:pointer;color:var(--color-blue)}.markdown-body a:focus-visible,.markdown-body a:hover{filter:brightness(1.2);text-decoration:none}.markdown-body a:active{filter:brightness(1.1);text-decoration:none}.markdown-body a:active>img{scale:.98}.markdown-body img{max-width:100%;height:auto;display:inline-block}html:not(.dark-mode,.oled-mode) .markdown-body img[src$=\#gh-dark-mode-only],html:is(.dark-mode,.oled-mode) .markdown-body img[src$=\#gh-light-mode-only]{display:none}.markdown-body pre{border-radius:var(--radius-sm);background-color:var(--color-button-bg);margin-top:1rem;padding:14px;overflow-x:auto}.markdown-body pre code{border-radius:0;padding:0;font-size:80%}.markdown-body code{border-radius:var(--radius-sm);background-color:var(--color-button-bg);color:var(--color-contrast);padding:.2em .4em;font-size:80%}.markdown-body hr{color:var(--color-button-bg);margin:20px 0}.markdown-body table{border-collapse:separate;border-spacing:0;border:.1rem solid var(--color-button-bg);border-radius:var(--radius-sm);width:max-content;max-width:100%;line-height:1.5;display:block;overflow:auto}.markdown-body table th{font-weight:600}.markdown-body table td,.markdown-body table th{padding:.4rem .85rem}.markdown-body table tr:nth-child(2n){background-color:var(--color-accent-contrast)}.markdown-body table td:not(:last-of-type),.markdown-body table th:not(:last-of-type){border-right:.1rem solid var(--color-button-bg)}.markdown-body table th,.markdown-body table tr:not(:last-of-type) td{border-bottom:.1rem solid var(--color-button-bg)}.markdown-body details{border:.15rem solid var(--color-button-bg);border-radius:var(--radius-sm);padding:.5rem .5rem 0}.markdown-body details summary{cursor:pointer;background-color:var(--color-button-bg);border-radius:var(--radius-xs);margin:-.5rem -.5rem 0;padding:.5rem .8rem;font-weight:700}.markdown-body details summary:hover{filter:brightness(.85)}.markdown-body details[open]{padding:.5rem}.markdown-body details[open] summary{border-radius:var(--radius-xs)var(--radius-xs)0 0;margin-bottom:.5rem}.markdown-body details[open]>:last-child:not(summary),.markdown-body>:last-child{margin-bottom:0!important}.markdown-body iframe,.markdown-body video{aspect-ratio:16/9;width:850px;max-width:100%;height:auto}@media screen and (width<=1280px){.markdown-body iframe,.markdown-body video{width:100%}}select{-webkit-appearance:none;-moz-appearance:none;appearance:none;color:#000;background:#ccc url(http://dropdown/arrow/url/) 100% no-repeat;border:1px solid #000;border-radius:3px}.goto-link{color:var(--color-blue);align-items:center;gap:3px;display:flex}.goto-link:focus-visible,.goto-link:hover{filter:brightness(1.1);text-decoration:underline}.goto-link:active{filter:brightness(1.2)}.multiselect{outline:2px solid #0000;color:var(--color-base)!important;width:100%!important}.multiselect .multiselect__input:focus-visible{margin-bottom:10px;margin-left:.5rem;box-shadow:none!important;outline:0!important;min-height:0!important;padding:0!important;font-weight:400!important}.multiselect input{box-shadow:none;background:0 0;border:none!important}.multiselect input:focus{box-shadow:none}.multiselect input::-moz-placeholder{color:var(--color-base)}.multiselect input::placeholder{color:var(--color-base)}.multiselect .multiselect__tags{border-radius:var(--radius-md);background:var(--color-button-bg);box-shadow:var(--shadow-inset-sm);cursor:pointer;border:none;padding-top:10px;padding-left:7px;font-size:1rem;transition:background-color .1s ease-in-out}.multiselect .multiselect__tags:active,.multiselect .multiselect__tags:active .multiselect__spinner{filter:brightness(1.25)}.multiselect .multiselect__tags .multiselect__single{background:0 0}.multiselect .multiselect__tags .multiselect__tag{border-radius:var(--radius-md);color:var(--color-base);border:2px solid var(--color-brand);background:0 0}.multiselect .multiselect__tags .multiselect__tag-icon{background:0 0}.multiselect .multiselect__tags .multiselect__tag-icon:after{color:var(--color-contrast)}.multiselect .multiselect__tags .multiselect__placeholder{color:var(--color-base);opacity:.6;margin-bottom:8px;margin-left:.5rem;font-size:1rem;line-height:16px}.multiselect .multiselect__content-wrapper{background:var(--color-button-bg);box-shadow:var(--shadow-inset-sm),var(--shadow-floating);border:none;width:100%;overflow-x:hidden}.multiselect .multiselect__content-wrapper .multiselect__element .multiselect__option--highlight{background:var(--color-button-bg);filter:brightness(1.25);color:var(--color-contrast)}.multiselect .multiselect__content-wrapper .multiselect__element .multiselect__option--selected{background:var(--color-brand);color:var(--color-accent-contrast);font-weight:700}.multiselect .multiselect__spinner{background:var(--color-button-bg)}.multiselect .multiselect__spinner:active{filter:brightness(1.25)}.multiselect.multiselect--disabled,.multiselect.multiselect--disabled .multiselect__current,.multiselect.multiselect--disabled .multiselect__select{background:0 0}.multiselect--above .multiselect__content-wrapper{border-top-left-radius:var(--radius-md)!important;border-top-right-radius:var(--radius-md)!important;border-top:none!important}.preview-radio{border-radius:var(--radius-md);border:1px solid var(--color-divider);background-color:var(--color-button-bg);color:var(--color-base);outline:2px solid #0000;flex-direction:column;padding:0;display:flex;overflow:hidden;width:100%!important}.preview-radio.selected{color:var(--color-contrast)}.preview-radio.selected .label .radio{color:var(--color-brand)}.preview-radio.selected .label .theme-icon{color:var(--color-text)}.preview-radio .preview{background-color:var(--color-bg);outline:2px solid #0000;width:100%;padding:1.5rem}.preview-radio .preview .example-card{outline:2px solid #0000;min-height:0;margin:0;padding:1rem}.preview-radio .label{text-align:left;padding:var(--gap-md)var(--gap-lg);flex-grow:1;align-items:center;display:flex}.preview-radio .label .radio{margin-right:.5rem}.preview-radio .label .theme-icon{color:var(--color-secondary);margin-left:.25rem}*{box-sizing:border-box}body{background-color:var(--color-bg);color:var(--color-base);--font-standard:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Oxygen,Ubuntu,Roboto,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;--mono-font:ui-monospace,SFMono-Regular,SF Mono,Menlo,Consolas,Liberation Mono,monospace;font-family:var(--font-standard);font-size:16px;font-weight:var(--font-weight-regular);--font-size-xxs:.625rem;--font-size-xs:.75rem;--font-size-sm:.875rem;--font-size-nm:1rem;--font-size-md:1.125rem;--font-size-lg:1.25rem;--font-size-xl:1.5rem;--font-size-2xl:2rem;--font-size-3xl:3rem;--font-weight-regular:400;--font-weight-medium:500;--font-weight-bold:700;--font-weight-extrabold:800;--font-weight-text:var(--font-weight-medium);--font-weight-heading:var(--font-weight-extrabold);--font-weight-title:var(--font-weight-extrabold);margin:0;padding:0}a.uncolored{color:inherit}.cm-content,.input-text-inherit,input[type=number],input[type=password],input[type=text],input[type=url],textarea{border-radius:var(--radius-md);box-sizing:border-box;background:var(--color-button-bg);color:var(--color-base);font-weight:var(--font-weight-medium);min-height:36px;box-shadow:var(--shadow-inset-sm),0 0 0 0 transparent;border:none;outline:0;padding:.5rem 1rem;transition:box-shadow .1s ease-in-out;-webkit-appearance:none!important;-moz-appearance:none!important;appearance:none!important}.cm-content:focus,.cm-content:focus-visible,.input-text-inherit:focus,.input-text-inherit:focus-visible,input[type=number]:focus,input[type=number]:focus-visible,input[type=password]:focus,input[type=password]:focus-visible,input[type=text]:focus,input[type=text]:focus-visible,input[type=url]:focus,input[type=url]:focus-visible,textarea:focus,textarea:focus-visible{box-shadow:inset 0 0 0 transparent,0 0 0 .25rem var(--color-brand-shadow);color:var(--color-contrast);outline:0}.cm-content:disabled,.cm-content[disabled],.input-text-inherit:disabled,.input-text-inherit[disabled],input[type=number]:disabled,input[type=number][disabled],input[type=password]:disabled,input[type=password][disabled],input[type=text]:disabled,input[type=text][disabled],input[type=url]:disabled,input[type=url][disabled],textarea:disabled,textarea[disabled]{opacity:.6;pointer-events:none;cursor:not-allowed}.cm-content:focus::-moz-placeholder,.input-text-inherit:focus::-moz-placeholder,input[type=number]:focus::-moz-placeholder,input[type=password]:focus::-moz-placeholder,input[type=text]:focus::-moz-placeholder,input[type=url]:focus::-moz-placeholder,textarea:focus::-moz-placeholder{opacity:.8}.cm-content:focus::placeholder,.input-text-inherit:focus::placeholder,input[type=number]:focus::placeholder,input[type=password]:focus::placeholder,input[type=text]:focus::placeholder,input[type=url]:focus::placeholder,textarea:focus::placeholder{opacity:.8}.cm-content::-moz-placeholder,.input-text-inherit::-moz-placeholder,input[type=number]::-moz-placeholder,input[type=password]::-moz-placeholder,input[type=text]::-moz-placeholder,input[type=url]::-moz-placeholder,textarea::-moz-placeholder{color:var(--color-base);opacity:.6}.cm-content::placeholder,.input-text-inherit::placeholder,input[type=number]::placeholder,input[type=password]::placeholder,input[type=text]::placeholder,input[type=url]::placeholder,textarea::placeholder{color:var(--color-base);opacity:.6}.cm-content{white-space:pre-wrap!important}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.dropdown-input{flex-direction:row;gap:1px;display:flex}.dropdown-input .animated-dropdown{width:unset}.dropdown-input .animated-dropdown .selected{border-radius:var(--radius-md)0 0 var(--radius-md)}.dropdown-input .animated-dropdown .selected.render-down{border-radius:var(--radius-md)0 0 0}.dropdown-input .animated-dropdown .selected.render-up{border-radius:0 0 0 var(--radius-md)}.dropdown-input input{border-radius:0 var(--radius-md)var(--radius-md)0}.iconified-input{align-items:center;display:inline-flex;position:relative}.iconified-input input{width:100%;padding:0 .5rem 0 2.5rem}.iconified-input:focus-within svg{opacity:1;color:var(--color-contrast)}.iconified-input svg{z-index:1;width:1.25rem;height:1.25rem;color:var(--color-base);opacity:.6;position:absolute;left:.75rem}.iconified-input .r-btn{z-index:1;position:absolute;right:.125rem}.iconified-input .r-btn svg{position:relative;left:0}svg{width:1em;height:1em}.chart svg{width:100%;height:100%}.button-animation{transition:opacity .5s ease-in-out,filter .2s ease-in-out,transform 50ms ease-in-out,outline .2s ease-in-out}.button-animation:active:not(.button-animation:disabled){transform:scale(.95)}button:disabled,input:disabled{cursor:not-allowed!important}@media (prefers-reduced-motion){.button-animation,button{transform:none!important}}h1{color:var(--color-contrast)}h2{color:var(--color-contrast);margin-top:0;margin-bottom:1rem}h3{margin-block:var(--gap-md)var(--gap-md);color:var(--color-contrast)}.hljs,.hljs-subst{color:#444}.hljs-comment{color:#888}.hljs-attribute,.hljs-doctag,.hljs-keyword,.hljs-meta-keyword,.hljs-name,.hljs-selector-tag{color:#f58300;font-weight:700}.hljs-deletion,.hljs-number,.hljs-quote,.hljs-selector-class,.hljs-selector-id,.hljs-string,.hljs-template-tag,.hljs-type{color:var(--color-brand)}.hljs-section,.hljs-title{color:#088;font-weight:700}.hljs-link,.hljs-regexp,.hljs-selector-attr,.hljs-selector-pseudo,.hljs-symbol,.hljs-template-variable,.hljs-variable{color:#bc6060}.hljs-literal{color:#78a960}.hljs-addition,.hljs-built_in,.hljs-bullet,.hljs-code{color:#f58300}.hljs-meta{color:#1f7199}.hljs-meta-string{color:#4d99bf}.hljs-emphasis{font-style:italic}.hljs-strong{font-weight:700}pre{border-width:5px;border-color:var(--color-button-bg);background-color:#222;border-radius:2em;padding:1em;overflow-x:hidden}pre code{letter-spacing:-.05em;word-break:normal;padding:.2em;font-family:monospace;line-height:100%}[tabindex="0"]:focus-visible,a:focus-visible,button:focus-visible{border-radius:.25rem;outline:.25rem solid #ea80ff}@font-face{font-family:inter;font-style:normal;font-weight:400;font-display:swap;src:url(https://cdn-raw.modrinth.com/fonts/inter/Inter-Regular.woff2?v=3.19)format("woff2"),url(https://cdn-raw.modrinth.com/fonts/inter/Inter-Regular.woff?v=3.19)format("woff")}@font-face{font-family:inter;font-style:normal;font-weight:500;font-display:swap;src:url(https://cdn-raw.modrinth.com/fonts/inter/Inter-Medium.woff2?v=3.19)format("woff2"),url(https://cdn-raw.modrinth.com/fonts/inter/Inter-Medium.woff?v=3.19)format("woff")}@font-face{font-family:inter;font-style:normal;font-weight:600;font-display:swap;src:url(https://cdn-raw.modrinth.com/fonts/inter/Inter-SemiBold.woff2?v=3.19)format("woff2"),url(https://cdn-raw.modrinth.com/fonts/inter/Inter-SemiBold.woff?v=3.19)format("woff")}@font-face{font-family:inter;font-style:normal;font-weight:700;font-display:swap;src:url(https://cdn-raw.modrinth.com/fonts/inter/Inter-Bold.woff2?v=3.19)format("woff2"),url(https://cdn-raw.modrinth.com/fonts/inter/Inter-Bold.woff?v=3.19)format("woff")}@font-face{font-family:inter;font-style:normal;font-weight:800;font-display:swap;src:url(https://cdn-raw.modrinth.com/fonts/inter/Inter-ExtraBold.woff2?v=3.19)format("woff2"),url(https://cdn-raw.modrinth.com/fonts/inter/Inter-ExtraBold.woff?v=3.19)format("woff")}.accordion-content[data-v-6a5abcd2]{grid-template-rows:0fr;transition:grid-template-rows .3s ease-in-out;display:grid}@media (prefers-reduced-motion){.accordion-content[data-v-6a5abcd2]{transition:none!important}}.accordion-content.open[data-v-6a5abcd2]{grid-template-rows:1fr}.accordion-content>div[data-v-6a5abcd2]{overflow:hidden}.avatar[data-v-66850a31]{height:var(--_size);min-height:var(--_size);width:var(--_size);min-width:var(--_size);--_size:2rem;border:1px solid var(--color-button-border);background-color:var(--color-button-bg);-o-object-fit:contain;object-fit:contain;border-radius:calc(.166667*var(--_size));position:relative}.avatar.circle[data-v-66850a31]{border-radius:50%}.avatar[data-v-66850a31]:not(.no-shadow){box-shadow:var(--shadow-card)}.avatar.no-shadow[data-v-66850a31]{box-shadow:none}.avatar.pixelated[data-v-66850a31]{image-rendering:pixelated}.avatar.raised[data-v-66850a31]{background-color:var(--color-raised-bg)}.avatar.tint[data-v-66850a31]{background-color:color-mix(in oklch,var(--color-button-bg)100%,var(--_tint)5%)}.version-badge[data-v-19fea578]{--badge-color:var(--color-gray);width:fit-content;color:var(--badge-color);align-items:center;font-weight:700;display:flex}.version-badge .circle[data-v-19fea578]{background-color:var(--badge-color);border-radius:50%;width:.5rem;height:.5rem;margin-right:.25rem;display:inline-block}.version-badge svg[data-v-19fea578]{margin-right:.25rem}.version-badge.red[data-v-19fea578],.version-badge.type--closed[data-v-19fea578],.version-badge.type--failed[data-v-19fea578],.version-badge.type--rejected[data-v-19fea578],.version-badge.type--returned[data-v-19fea578],.version-badge.type--withheld[data-v-19fea578]{--badge-color:var(--color-red)}.version-badge.orange[data-v-19fea578],.version-badge.type--moderator[data-v-19fea578],.version-badge.type--pending[data-v-19fea578],.version-badge.type--processing[data-v-19fea578],.version-badge.type--scheduled[data-v-19fea578]{--badge-color:var(--color-orange)}.version-badge.green[data-v-19fea578],.version-badge.type--accepted[data-v-19fea578],.version-badge.type--admin[data-v-19fea578],.version-badge.type--approved-general[data-v-19fea578],.version-badge.type--processed[data-v-19fea578]{--badge-color:var(--color-green)}.version-badge.blue[data-v-19fea578],.version-badge.type--approved[data-v-19fea578],.version-badge.type--creator[data-v-19fea578]{--badge-color:var(--color-blue)}.version-badge.purple[data-v-19fea578],.version-badge.type--unlisted[data-v-19fea578]{--badge-color:var(--color-purple)}.version-badge.gray[data-v-19fea578],.version-badge.type--private[data-v-19fea578]{--badge-color:var(--color-gray)}.version-badge[data-v-19fea578]:first-letter{text-transform:capitalize}:where(button[data-v-c22e7a78]){color:var(--color-base);background:0 0}.btn-wrapper[data-v-0c00cdf8]{display:contents}.btn-wrapper :is(button[data-v-0c00cdf8-s],a[data-v-0c00cdf8-s],.button-like[data-v-0c00cdf8-s]):first-child,.btn-wrapper [data-v-0c00cdf8-s]>:first-child>:first-child>:is(button,a,.button-like):first-child,.btn-wrapper [data-v-0c00cdf8-s]>:first-child>:is(button,a,.button-like):first-child,.btn-wrapper [data-v-0c00cdf8-s]>:is(button,a,.button-like):first-child,.btn-wrapper[data-v-0c00cdf8] :is(button,a,.button-like):first-child{height:var(--_height);min-width:var(--_width);cursor:pointer;justify-content:center;align-items:center;gap:var(--_gap);white-space:nowrap;border-radius:var(--_radius);background-color:var(--_bg);padding-left:var(--_padding-x);padding-right:var(--_padding-x);padding-top:var(--_padding-y);padding-bottom:var(--_padding-y);font-weight:var(--_font-weight);color:var(--_text);border:2px solid #0000;flex-direction:row;transition:scale .125s ease-in-out,background-color .25s ease-in-out,color .25s ease-in-out;display:flex}.btn-wrapper :is(button[data-v-0c00cdf8-s],a[data-v-0c00cdf8-s],.button-like[data-v-0c00cdf8-s]):first-child svg:first-child,.btn-wrapper [data-v-0c00cdf8-s]>:first-child>:first-child>:is(button,a,.button-like):first-child svg:first-child,.btn-wrapper [data-v-0c00cdf8-s]>:first-child>:is(button,a,.button-like):first-child svg:first-child,.btn-wrapper [data-v-0c00cdf8-s]>:is(button,a,.button-like):first-child svg:first-child,.btn-wrapper[data-v-0c00cdf8] :is(button,a,.button-like):first-child svg:first-child{color:var(--_icon,var(--_text));flex-shrink:0;transition:color .25s ease-in-out}.btn-wrapper :is(button[data-v-0c00cdf8-s],a[data-v-0c00cdf8-s],.button-like[data-v-0c00cdf8-s]):first-child.disabled,.btn-wrapper :is(button[data-v-0c00cdf8-s],a[data-v-0c00cdf8-s],.button-like[data-v-0c00cdf8-s]):first-child.looks-disabled,.btn-wrapper :is(button[data-v-0c00cdf8-s],a[data-v-0c00cdf8-s],.button-like[data-v-0c00cdf8-s]):first-child[disabled=true],.btn-wrapper :is(button[data-v-0c00cdf8-s],a[data-v-0c00cdf8-s],.button-like[data-v-0c00cdf8-s]):first-child[disabled],.btn-wrapper [data-v-0c00cdf8-s]>:first-child>:first-child>:is(button,a,.button-like):first-child.disabled,.btn-wrapper [data-v-0c00cdf8-s]>:first-child>:first-child>:is(button,a,.button-like):first-child.looks-disabled,.btn-wrapper [data-v-0c00cdf8-s]>:first-child>:first-child>:is(button,a,.button-like):first-child[disabled=true],.btn-wrapper [data-v-0c00cdf8-s]>:first-child>:first-child>:is(button,a,.button-like):first-child[disabled],.btn-wrapper [data-v-0c00cdf8-s]>:first-child>:is(button,a,.button-like):first-child.disabled,.btn-wrapper [data-v-0c00cdf8-s]>:first-child>:is(button,a,.button-like):first-child.looks-disabled,.btn-wrapper [data-v-0c00cdf8-s]>:first-child>:is(button,a,.button-like):first-child[disabled=true],.btn-wrapper [data-v-0c00cdf8-s]>:first-child>:is(button,a,.button-like):first-child[disabled],.btn-wrapper [data-v-0c00cdf8-s]>:is(button,a,.button-like):first-child.disabled,.btn-wrapper [data-v-0c00cdf8-s]>:is(button,a,.button-like):first-child.looks-disabled,.btn-wrapper [data-v-0c00cdf8-s]>:is(button,a,.button-like):first-child[disabled=true],.btn-wrapper [data-v-0c00cdf8-s]>:is(button,a,.button-like):first-child[disabled],.btn-wrapper[data-v-0c00cdf8] :is(button,a,.button-like):first-child.disabled,.btn-wrapper[data-v-0c00cdf8] :is(button,a,.button-like):first-child.looks-disabled,.btn-wrapper[data-v-0c00cdf8] :is(button,a,.button-like):first-child[disabled=true],.btn-wrapper[data-v-0c00cdf8] :is(button,a,.button-like):first-child[disabled]{opacity:.5}.btn-wrapper :is(button[data-v-0c00cdf8-s],a[data-v-0c00cdf8-s],.button-like[data-v-0c00cdf8-s]):first-child.disabled,.btn-wrapper :is(button[data-v-0c00cdf8-s],a[data-v-0c00cdf8-s],.button-like[data-v-0c00cdf8-s]):first-child[disabled=true],.btn-wrapper :is(button[data-v-0c00cdf8-s],a[data-v-0c00cdf8-s],.button-like[data-v-0c00cdf8-s]):first-child[disabled],.btn-wrapper [data-v-0c00cdf8-s]>:first-child>:first-child>:is(button,a,.button-like):first-child.disabled,.btn-wrapper [data-v-0c00cdf8-s]>:first-child>:first-child>:is(button,a,.button-like):first-child[disabled=true],.btn-wrapper [data-v-0c00cdf8-s]>:first-child>:first-child>:is(button,a,.button-like):first-child[disabled],.btn-wrapper [data-v-0c00cdf8-s]>:first-child>:is(button,a,.button-like):first-child.disabled,.btn-wrapper [data-v-0c00cdf8-s]>:first-child>:is(button,a,.button-like):first-child[disabled=true],.btn-wrapper [data-v-0c00cdf8-s]>:first-child>:is(button,a,.button-like):first-child[disabled],.btn-wrapper [data-v-0c00cdf8-s]>:is(button,a,.button-like):first-child.disabled,.btn-wrapper [data-v-0c00cdf8-s]>:is(button,a,.button-like):first-child[disabled=true],.btn-wrapper [data-v-0c00cdf8-s]>:is(button,a,.button-like):first-child[disabled],.btn-wrapper[data-v-0c00cdf8] :is(button,a,.button-like):first-child.disabled,.btn-wrapper[data-v-0c00cdf8] :is(button,a,.button-like):first-child[disabled=true],.btn-wrapper[data-v-0c00cdf8] :is(button,a,.button-like):first-child[disabled]{cursor:not-allowed}.btn-wrapper :is(button[data-v-0c00cdf8-s],a[data-v-0c00cdf8-s],.button-like[data-v-0c00cdf8-s]):first-child:not([disabled]):not([disabled=true]):not(.disabled):hover,.btn-wrapper [data-v-0c00cdf8-s]>:first-child>:first-child>:is(button,a,.button-like):first-child:not([disabled]):not([disabled=true]):not(.disabled):hover,.btn-wrapper [data-v-0c00cdf8-s]>:first-child>:is(button,a,.button-like):first-child:not([disabled]):not([disabled=true]):not(.disabled):hover,.btn-wrapper [data-v-0c00cdf8-s]>:is(button,a,.button-like):first-child:not([disabled]):not([disabled=true]):not(.disabled):hover,.btn-wrapper[data-v-0c00cdf8] :is(button,a,.button-like):first-child:not([disabled]):not([disabled=true]):not(.disabled):hover,.btn-wrapper :is(button[data-v-0c00cdf8-s],a[data-v-0c00cdf8-s],.button-like[data-v-0c00cdf8-s]):first-child:not([disabled]):not([disabled=true]):not(.disabled):focus-visible,.btn-wrapper [data-v-0c00cdf8-s]>:first-child>:first-child>:is(button,a,.button-like):first-child:not([disabled]):not([disabled=true]):not(.disabled):focus-visible,.btn-wrapper [data-v-0c00cdf8-s]>:first-child>:is(button,a,.button-like):first-child:not([disabled]):not([disabled=true]):not(.disabled):focus-visible,.btn-wrapper [data-v-0c00cdf8-s]>:is(button,a,.button-like):first-child:not([disabled]):not([disabled=true]):not(.disabled):focus-visible,.btn-wrapper[data-v-0c00cdf8] :is(button,a,.button-like):first-child:not([disabled]):not([disabled=true]):not(.disabled):focus-visible{background-color:var(--_hover-bg);color:var(--_hover-text);--tw-brightness:brightness(var(--hover-brightness));filter:var(--tw-blur)var(--tw-brightness)var(--tw-contrast)var(--tw-grayscale)var(--tw-hue-rotate)var(--tw-invert)var(--tw-saturate)var(--tw-sepia)var(--tw-drop-shadow)}.btn-wrapper :is(button[data-v-0c00cdf8-s],a[data-v-0c00cdf8-s],.button-like[data-v-0c00cdf8-s]):first-child:not([disabled]):not([disabled=true]):not(.disabled):active,.btn-wrapper [data-v-0c00cdf8-s]>:first-child>:first-child>:is(button,a,.button-like):first-child:not([disabled]):not([disabled=true]):not(.disabled):active,.btn-wrapper [data-v-0c00cdf8-s]>:first-child>:is(button,a,.button-like):first-child:not([disabled]):not([disabled=true]):not(.disabled):active,.btn-wrapper [data-v-0c00cdf8-s]>:is(button,a,.button-like):first-child:not([disabled]):not([disabled=true]):not(.disabled):active,.btn-wrapper[data-v-0c00cdf8] :is(button,a,.button-like):first-child:not([disabled]):not([disabled=true]):not(.disabled):active{--tw-scale-x:.95;--tw-scale-y:.95;transform:translate(var(--tw-translate-x),var(--tw-translate-y))rotate(var(--tw-rotate))skew(var(--tw-skew-x))skewY(var(--tw-skew-y))scaleX(var(--tw-scale-x))scaleY(var(--tw-scale-y))}.btn-wrapper :is(button[data-v-0c00cdf8-s],a[data-v-0c00cdf8-s],.button-like[data-v-0c00cdf8-s]):first-child:not([disabled]):not([disabled=true]):not(.disabled):focus-visible svg:first-child,.btn-wrapper :is(button[data-v-0c00cdf8-s],a[data-v-0c00cdf8-s],.button-like[data-v-0c00cdf8-s]):first-child:not([disabled]):not([disabled=true]):not(.disabled):hover svg:first-child,.btn-wrapper [data-v-0c00cdf8-s]>:first-child>:first-child>:is(button,a,.button-like):first-child:not([disabled]):not([disabled=true]):not(.disabled):focus-visible svg:first-child,.btn-wrapper [data-v-0c00cdf8-s]>:first-child>:first-child>:is(button,a,.button-like):first-child:not([disabled]):not([disabled=true]):not(.disabled):hover svg:first-child,.btn-wrapper [data-v-0c00cdf8-s]>:first-child>:is(button,a,.button-like):first-child:not([disabled]):not([disabled=true]):not(.disabled):focus-visible svg:first-child,.btn-wrapper [data-v-0c00cdf8-s]>:first-child>:is(button,a,.button-like):first-child:not([disabled]):not([disabled=true]):not(.disabled):hover svg:first-child,.btn-wrapper [data-v-0c00cdf8-s]>:is(button,a,.button-like):first-child:not([disabled]):not([disabled=true]):not(.disabled):focus-visible svg:first-child,.btn-wrapper [data-v-0c00cdf8-s]>:is(button,a,.button-like):first-child:not([disabled]):not([disabled=true]):not(.disabled):hover svg:first-child,.btn-wrapper[data-v-0c00cdf8] :is(button,a,.button-like):first-child:not([disabled]):not([disabled=true]):not(.disabled):focus-visible svg:first-child,.btn-wrapper[data-v-0c00cdf8] :is(button,a,.button-like):first-child:not([disabled]):not([disabled=true]):not(.disabled):hover svg:first-child{color:var(--_hover-icon,var(--_hover-text))}.btn-wrapper.outline :is(button[data-v-0c00cdf8-s],a[data-v-0c00cdf8-s],.button-like[data-v-0c00cdf8-s]):first-child,.btn-wrapper.outline [data-v-0c00cdf8-s]>:first-child>:first-child>:is(button,a,.button-like):first-child,.btn-wrapper.outline [data-v-0c00cdf8-s]>:first-child>:is(button,a,.button-like):first-child,.btn-wrapper.outline [data-v-0c00cdf8-s]>:is(button,a,.button-like):first-child,.btn-wrapper.outline[data-v-0c00cdf8] :is(button,a,.button-like):first-child{border-color:currentColor}.btn-wrapper :is(button[data-v-0c00cdf8-s],a[data-v-0c00cdf8-s],.button-like[data-v-0c00cdf8-s]):first-child>svg:first-child,.btn-wrapper [data-v-0c00cdf8-s]>:first-child>:first-child>:is(button,a,.button-like):first-child>svg:first-child,.btn-wrapper [data-v-0c00cdf8-s]>:first-child>:is(button,a,.button-like):first-child>svg:first-child,.btn-wrapper [data-v-0c00cdf8-s]>:is(button,a,.button-like):first-child>svg:first-child,.btn-wrapper[data-v-0c00cdf8] :is(button,a,.button-like):first-child>svg:first-child{min-width:var(--_icon-size,1rem);min-height:var(--_icon-size,1rem)}.joined-buttons[data-v-0c00cdf8]{gap:1px;display:flex}.joined-buttons>.btn-wrapper:not(:first-child) :is(button[data-v-0c00cdf8-s],a[data-v-0c00cdf8-s],.button-like[data-v-0c00cdf8-s]):first-child,.joined-buttons>.btn-wrapper:not(:first-child) [data-v-0c00cdf8-s]>:first-child>:first-child>:is(button,a,.button-like):first-child,.joined-buttons>.btn-wrapper:not(:first-child) [data-v-0c00cdf8-s]>:first-child>:is(button,a,.button-like):first-child,.joined-buttons>.btn-wrapper:not(:first-child) [data-v-0c00cdf8-s]>:is(button,a,.button-like):first-child,.joined-buttons>.btn-wrapper[data-v-0c00cdf8]:not(:first-child) :is(button,a,.button-like):first-child{border-top-left-radius:0;border-bottom-left-radius:0}.joined-buttons>:not(:last-child) :is(button[data-v-0c00cdf8-s],a[data-v-0c00cdf8-s],.button-like[data-v-0c00cdf8-s]):first-child,.joined-buttons>:not(:last-child) [data-v-0c00cdf8-s]>:first-child>:first-child>:is(button,a,.button-like):first-child,.joined-buttons>:not(:last-child) [data-v-0c00cdf8-s]>:first-child>:is(button,a,.button-like):first-child,.joined-buttons>:not(:last-child) [data-v-0c00cdf8-s]>:is(button,a,.button-like):first-child,.joined-buttons[data-v-0c00cdf8]>:not(:last-child) :is(button,a,.button-like):first-child{border-top-right-radius:0;border-bottom-right-radius:0}.header[data-v-e140e21d]{display:flex}.header[data-v-e140e21d] h1{margin-block:0}.header[data-v-e140e21d]:not(:last-child){margin-bottom:var(--gap-lg)}.btn-group[data-v-e140e21d]{margin-left:auto;margin-right:0}.checkbox-outer[data-v-e5492569]{cursor:pointer;align-items:center;display:flex}.checkbox-outer p[data-v-e5492569]{-webkit-user-select:none;-moz-user-select:none;user-select:none;margin:0;padding:.2rem 0}.checkbox-outer.disabled[data-v-e5492569]{cursor:not-allowed}.checkbox[data-v-e5492569]{cursor:pointer;min-width:1rem;min-height:1rem;color:var(--color-contrast);background-color:var(--color-button-bg);border-radius:var(--radius-xs);box-shadow:var(--shadow-inset-sm),0 0 0 0 transparent;justify-content:center;align-items:center;margin:0 .5rem 0 0;padding:0;display:flex}.checkbox.checked[data-v-e5492569]{background-color:var(--color-brand)}.checkbox.checked svg[data-v-e5492569]{color:var(--color-accent-contrast)}.checkbox svg[data-v-e5492569]{color:var(--color-secondary);stroke-width:.2rem;flex-shrink:0;width:.8rem;height:.8rem}.checkbox.collapsing[data-v-e5492569]{box-shadow:none;background-color:#0000!important}.checkbox.collapsing svg[data-v-e5492569]{color:inherit;width:1rem;height:1rem;transition:transform .25s ease-in-out}@media (prefers-reduced-motion){.checkbox.collapsing svg[data-v-e5492569]{transition:none!important}}.checkbox.collapsing.checked svg[data-v-e5492569]{transform:rotate(180deg)}.checkbox[data-v-e5492569]:disabled{box-shadow:none;cursor:not-allowed}.checkbox-label[data-v-e5492569]{color:var(--color-base)}.chips[data-v-c40dbf5f]{grid-gap:.5rem;flex-wrap:wrap;display:flex}.chips .btn.capitalize[data-v-c40dbf5f]{text-transform:capitalize}.chips .btn svg[data-v-c40dbf5f]{width:1em;height:1em}.chips .btn[data-v-c40dbf5f]:focus-visible{border-radius:.25rem;outline:.25rem solid #ea80ff}.chips .selected[data-v-c40dbf5f]{color:var(--color-contrast);background-color:var(--color-brand-highlight);box-shadow:inset 0 0 0 transparent,0 0 0 2px var(--color-brand)}.accordion-content[data-v-222c3051]{grid-template-rows:0fr;transition:grid-template-rows .3s ease-in-out;display:grid}@media (prefers-reduced-motion){.accordion-content[data-v-222c3051]{transition:none!important}}.accordion-content.open[data-v-222c3051]{grid-template-rows:1fr}.accordion-content>div[data-v-222c3051]{overflow:hidden}.code[data-v-cc49edeb]{color:var(--color-text);grid-gap:.5rem;font-family:var(--mono-font);font-size:var(--font-size-sm);background-color:var(--color-button-bg);-webkit-user-select:text;-moz-user-select:text;user-select:text;border-radius:10px;width:fit-content;margin:0;padding:.25rem .5rem;transition:opacity .5s ease-in-out,filter .2s ease-in-out,transform 50ms ease-in-out,outline .2s ease-in-out;display:inline-flex}@media (prefers-reduced-motion){.code[data-v-cc49edeb]{transition:none!important}}.code svg[data-v-cc49edeb]{width:1em;height:1em}.code[data-v-cc49edeb]:hover{filter:brightness(.85)}.code[data-v-cc49edeb]:active{filter:brightness(.8);transform:scale(.95)}.double-icon[data-v-a08b5a73]{height:fit-content;line-height:0;position:relative}.double-icon .secondary[data-v-a08b5a73]{background-color:var(--color-bg);padding:var(--spacing-card-xs);aspect-ratio:1;border-radius:50%;width:fit-content;height:fit-content;line-height:0;position:absolute;bottom:-4px;right:-4px}.double-icon .secondary svg[data-v-a08b5a73]{width:1rem;height:1rem}.drop-area[data-v-77f3cdf2]{z-index:10;visibility:hidden;background-color:#00000080;width:100%;height:100%;transition:visibility .2s ease-in-out,background-color .1s ease-in-out;display:flex;position:fixed;top:0;left:0}.drop-area[data-v-77f3cdf2]:before{--indent:4rem;content:" ";top:var(--indent);left:var(--indent);width:calc(100% - 2*var(--indent));height:calc(100% - 2*var(--indent));border:.25rem dashed var(--color-button-bg);border-radius:1rem;position:relative}@media (prefers-reduced-motion){.drop-area[data-v-77f3cdf2]{transition:none!important}}.animated-dropdown[data-v-6b38cfe7]{width:20rem;height:40px;display:inline-block;position:relative}.animated-dropdown[data-v-6b38cfe7]:focus{outline:0}.animated-dropdown .selected[data-v-6b38cfe7]{width:100%;height:100%;padding:var(--gap-sm)var(--gap-lg);background-color:var(--color-button-bg);justify-content:space-between;align-items:center;gap:var(--gap-md);cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none;border-radius:var(--radius-md);box-shadow:var(--shadow-inset-sm),0 0 0 0 transparent;transition:all 50ms;display:flex}.animated-dropdown .selected[data-v-6b38cfe7]:not(.render-down):not(.render-up){transition-delay:.2s}.animated-dropdown .selected.disabled[data-v-6b38cfe7]{cursor:not-allowed;filter:grayscale(50%);opacity:.5}.animated-dropdown .selected.render-up[data-v-6b38cfe7]{border-radius:0 0 var(--radius-md)var(--radius-md)}.animated-dropdown .selected.render-down[data-v-6b38cfe7]{border-radius:var(--radius-md)var(--radius-md)0 0}.animated-dropdown .selected[data-v-6b38cfe7]:focus{filter:brightness(1.25);outline:0;transition:filter .1s ease-in-out}.animated-dropdown .selected .arrow[data-v-6b38cfe7]{transition:transform .2s}.animated-dropdown .selected .arrow.rotate[data-v-6b38cfe7]{transform:rotate(180deg)}.animated-dropdown .options[data-v-6b38cfe7]{z-index:10;max-height:var(--af50b67e);box-shadow:var(--shadow-inset-sm),0 0 0 0 transparent;overflow-y:auto}.animated-dropdown .options .option[data-v-6b38cfe7]{background-color:var(--color-button-bg);padding:var(--gap-md);cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none;align-items:center;display:flex}.animated-dropdown .options .option>label[data-v-6b38cfe7]{cursor:pointer}.animated-dropdown .options .option[data-v-6b38cfe7]:hover{filter:brightness(.85);transition:filter .2s ease-in-out}.animated-dropdown .options .option[data-v-6b38cfe7]:focus{filter:brightness(.85);outline:0;transition:filter .2s ease-in-out}.animated-dropdown .options .option.selected-option[data-v-6b38cfe7]{background-color:var(--color-brand);color:var(--color-accent-contrast);font-weight:bolder}.animated-dropdown .options .option input[data-v-6b38cfe7]{display:none}.options-enter-active[data-v-6b38cfe7],.options-leave-active[data-v-6b38cfe7]{transition:transform .2s}.options-enter-from.up[data-v-6b38cfe7],.options-leave-to.up[data-v-6b38cfe7]{transform:translateY(99.999%)}.options-enter-from.down[data-v-6b38cfe7],.options-leave-to.down[data-v-6b38cfe7]{transform:translateY(-99.999%)}.options-enter-to.up[data-v-6b38cfe7],.options-leave-from.up[data-v-6b38cfe7]{transform:translateY(0)}.options-wrapper[data-v-6b38cfe7]{z-index:9;width:100%;position:absolute;overflow:auto}.options-wrapper.up[data-v-6b38cfe7]{border-radius:var(--radius-md)var(--radius-md)0 0;top:0;transform:translateY(-99.999%)}.options-wrapper.down[data-v-6b38cfe7]{border-radius:0 0 var(--radius-md)var(--radius-md)}.environment[data-v-32dd529d]{align-items:center;font-size:1rem;font-weight:700;display:flex;color:var(--color-text)!important}.environment svg[data-v-32dd529d]{margin-right:.2rem}label[data-v-d4f33839]{flex-direction:unset;max-height:unset}label svg[data-v-d4f33839]{height:1rem}label input[data-v-d4f33839]{display:none}label.long-style[data-v-d4f33839]{grid-gap:.5rem;background-color:var(--color-button-bg);border-radius:var(--radius-sm);border:dashed .3rem var(--color-contrast);cursor:pointer;color:var(--color-contrast);justify-content:center;align-items:center;padding:1.5rem 2rem;display:flex}.title[data-v-58575bf3]{z-index:1;color:var(--color-contrast);font-weight:700;position:absolute}.title[data-v-58575bf3]:after{content:"";animation:2s infinite dots-58575bf3}@keyframes dots-58575bf3{25%{content:""}50%{content:"."}75%{content:".."}0%,to{content:"..."}}.placeholder[data-v-58575bf3]{border-radius:var(--radius-lg);opacity:.25;background-color:var(--color-raised-bg);border:1px solid #0000;width:100%;height:4rem;animation:4s ease-in-out infinite pop-58575bf3;position:relative;overflow:hidden}.placeholder[data-v-58575bf3]:before{content:"";background-image:linear-gradient(-45deg,#0000 30%,#c4d9ed13 50%,#0000 70%);animation:4s ease-in-out infinite shimmer-58575bf3;position:absolute;inset:0}.placeholder[data-v-58575bf3]:nth-child(2):before{animation-delay:0s}.placeholder[data-v-58575bf3]:nth-child(3):before{animation-delay:.3s}.placeholder[data-v-58575bf3]:nth-child(4):before{animation-delay:.6s}.placeholder[data-v-58575bf3]:nth-child(2){animation-delay:0s}.placeholder[data-v-58575bf3]:nth-child(3){animation-delay:.3s}.placeholder[data-v-58575bf3]:nth-child(4){animation-delay:.6s}@keyframes pop-58575bf3{0%{opacity:.25;border-color:#0000}50%{opacity:.5;border-color:var(--color-button-bg)}to{opacity:.25;border-color:#0000}}@keyframes shimmer-58575bf3{0%{transform:translate(-80%)}50%,to{transform:translate(80%)}}@property --_top-fade-height{syntax:"<length-percentage>";inherits:false;initial-value:0}@property --_bottom-fade-height{syntax:"<length-percentage>";inherits:false;initial-value:0}.scrollable-pane-wrapper[data-v-7b5e8554]{flex-direction:column;display:flex;position:relative}.wrapper-wrapper[data-v-7b5e8554]{--_fade-height:3rem;-webkit-mask-image:linear-gradient(transparent,#000 var(--_top-fade-height,0),#000 calc(100% - var(--_bottom-fade-height,0)),transparent 100%);mask-image:linear-gradient(transparent,#000 var(--_top-fade-height,0),#000 calc(100% - var(--_bottom-fade-height,0)),transparent 100%);flex-grow:1;transition:--_top-fade-height 50ms linear,--_bottom-fade-height 50ms linear;display:flex;position:relative;overflow:hidden}.wrapper-wrapper.top-fade[data-v-7b5e8554]{--_top-fade-height:var(--_fade-height)}.wrapper-wrapper.bottom-fade[data-v-7b5e8554]{--_bottom-fade-height:var(--_fade-height)}.scrollable-pane[data-v-7b5e8554]{flex-direction:column;gap:.25rem;width:100%;height:100%;display:flex;position:relative;overflow:hidden auto}.tauri-overlay[data-v-8a59c874]{visibility:hidden;z-index:20;width:100%;height:100px;position:fixed;top:0;left:0}.tauri-overlay.shown[data-v-8a59c874]{opacity:1;visibility:visible}.modal-overlay[data-v-8a59c874]{visibility:hidden;z-index:19;width:100%;height:100%;transition:all .3s ease-in-out;position:fixed;top:0;left:0}@media (prefers-reduced-motion){.modal-overlay[data-v-8a59c874]{transition:none!important}}.modal-overlay.shown[data-v-8a59c874]{opacity:1;visibility:visible;backdrop-filter:blur(3px);background:#00000080}.modal-overlay.noblur[data-v-8a59c874]{backdrop-filter:none}.modal-container[data-v-8a59c874]{z-index:21;visibility:hidden;pointer-events:none;justify-content:center;align-items:center;width:100%;height:100%;display:flex;position:fixed;top:0;left:0}.modal-container.shown[data-v-8a59c874]{visibility:visible}.modal-container.shown .modal-body[data-v-8a59c874]{opacity:1;visibility:visible;transform:translateY(0)}.modal-container .modal-body[data-v-8a59c874]{box-shadow:var(--shadow-raised),var(--shadow-inset);border-radius:var(--radius-lg);background-color:var(--color-raised-bg);max-height:calc(100% - 2*var(--gap-lg));pointer-events:auto;visibility:hidden;opacity:0;width:600px;transition:all .25s ease-in-out;position:fixed;overflow-y:visible;transform:translateY(50vh)}.modal-container .modal-body .header[data-v-8a59c874]{background-color:var(--color-bg);padding:var(--gap-md)var(--gap-lg);justify-content:space-between;align-items:center;display:flex}.modal-container .modal-body .header h1[data-v-8a59c874]{font-size:1.25rem;font-weight:700}@media (prefers-reduced-motion){.modal-container .modal-body[data-v-8a59c874]{transition:none!important}}@media screen and (width<=650px){.modal-container .modal-body[data-v-8a59c874]{width:calc(100% - 2*var(--gap-lg))}}.file-input[data-v-36b6b2b4]{background:var(--color-button-bg);border:2px dashed var(--color-gray);border-radius:var(--radius-md);cursor:pointer;width:100%;padding:1.5rem 1.5rem 1.5rem 2.5rem;transition:opacity .5s ease-in-out,filter .2s ease-in-out,scale 50ms ease-in-out,outline .2s ease-in-out}.file-input[data-v-36b6b2b4]:hover{filter:brightness(.85)}.markdown-resource-link[data-v-36b6b2b4]{cursor:pointer;color:var(--color-blue)}.markdown-resource-link[data-v-36b6b2b4]:focus-visible,.markdown-resource-link[data-v-36b6b2b4]:hover{filter:brightness(1.2);text-decoration:none}.markdown-resource-link[data-v-36b6b2b4]:active{filter:brightness(1.1);text-decoration:none}.display-options[data-v-36b6b2b4]{margin-bottom:var(--gap-sm)}.editor-action-row[data-v-36b6b2b4]{margin-bottom:var(--gap-sm);justify-content:space-between;align-items:center;gap:var(--gap-xs);flex-wrap:wrap;display:flex}@media (width<=768px){.editor-action-row[data-v-36b6b2b4]{flex-direction:column;align-items:start}}.editor-actions[data-v-36b6b2b4]{align-items:center;gap:var(--gap-xs);flex-flow:wrap;display:flex}@media (width<=768px){.editor-actions .divider[data-v-36b6b2b4],.editor-actions .mobile-hidden-group[data-v-36b6b2b4]{display:none}}.editor-actions .divider[data-v-36b6b2b4]{background-color:var(--color-button-bg);border-radius:var(--radius-max);width:.125rem;height:1.8rem;margin-inline:var(--gap-xs)}.editor-actions .divider[data-v-36b6b2b4]:first-child{display:none}.resizable-textarea-wrapper textarea[data-v-36b6b2b4]{width:100%;min-height:10rem}.info-blurb[data-v-36b6b2b4]{justify-content:space-between;align-items:center;gap:var(--gap-xs);display:flex}.hide[data-v-36b6b2b4]{display:none}.preview[data-v-36b6b2b4]{place-items:center end;gap:var(--gap-xs);display:flex}.markdown-body-wrapper[data-v-36b6b2b4]{border:1px solid var(--color-button-bg);border-radius:var(--radius-md);width:100%;padding:var(--radius-md);min-height:6rem}.modal-insert[data-v-36b6b2b4]{padding:var(--gap-lg)}.modal-insert .iconified-input[data-v-36b6b2b4]{width:100%}.modal-insert .label[data-v-36b6b2b4]{margin-block:var(--gap-lg)var(--gap-sm);display:block}.modal-insert .label__title[data-v-36b6b2b4]{color:var(--color-contrast);font-size:1.17rem;font-weight:700;display:block}.modal-insert .label__title .required[data-v-36b6b2b4]{color:var(--color-red)}.modal-insert .input-group[data-v-36b6b2b4]{margin-top:var(--gap-lg)}.image-strategy-chips[data-v-36b6b2b4]{justify-content:space-between;align-items:center;gap:var(--gap-xs);padding-bottom:var(--gap-md);display:flex}.btn-input-alternative[data-v-36b6b2b4]{justify-content:space-between;align-items:center;gap:var(--gap-xs);padding-bottom:var(--gap-xs);flex-direction:column;display:flex}.btn-input-alternative .btn[data-v-36b6b2b4]{justify-content:start;align-items:center;width:100%;min-height:4rem;padding-left:2.5rem;display:flex}.cm-disabled[data-v-36b6b2b4]{opacity:.6;pointer-events:none;cursor:not-allowed}[data-v-36b6b2b4] .cm-content{overflow:auto}.vue-notification[data-v-146a7f12]{box-sizing:border-box;text-align:left;margin:0 5px 5px;padding:10px;font-size:12px;background:var(--color-blue)!important;color:var(--color-accent-contrast)!important}.vue-notification.success[data-v-146a7f12]{background:var(--color-green)!important}.vue-notification.warn[data-v-146a7f12]{background:var(--color-orange)!important}.vue-notification.error[data-v-146a7f12]{background:var(--color-red)!important}.vue-notification-group[data-v-146a7f12]{z-index:99999999;width:300px;position:fixed;bottom:25px;right:25px}.vue-notification-group.has-sidebar[data-v-146a7f12]{right:325px}.vue-notification-group .vue-notification-wrapper[data-v-146a7f12]{width:100%;margin-bottom:10px;overflow:hidden}.vue-notification-group .vue-notification-wrapper .vue-notification-template[data-v-146a7f12]{border-radius:var(--radius-md);margin:0}.vue-notification-group .vue-notification-wrapper .vue-notification-template .notification-title[data-v-146a7f12]{font-size:var(--font-size-lg);margin-right:auto;font-weight:600}.vue-notification-group .vue-notification-wrapper .vue-notification-template .notification-content[data-v-146a7f12]{font-size:var(--font-size-md);margin-right:auto}.vue-notification-group .vue-notification-wrapper[data-v-146a7f12]:last-child{margin:0}@media screen and (width<=750px){.vue-notification-group[data-v-146a7f12]{bottom:calc(var(--size-mobile-navbar-height,15px) + 10px)!important}.vue-notification-group.browse-menu-open[data-v-146a7f12]{bottom:calc(var(--size-mobile-navbar-height-expanded,15px) + 10px)!important}}.notifs-enter-active[data-v-146a7f12],.notifs-leave-active[data-v-146a7f12],.notifs-move[data-v-146a7f12]{transition:all .5s}@media (prefers-reduced-motion){.notifs-enter-active[data-v-146a7f12],.notifs-leave-active[data-v-146a7f12],.notifs-move[data-v-146a7f12]{transition:none!important}}.notifs-enter-from[data-v-146a7f12],.notifs-leave-to[data-v-146a7f12]{opacity:0}.dummy-button[data-v-1a57261d]{clip:rect(0 0 0 0);white-space:nowrap;border:none;outline:0;width:0;height:0;margin:0;padding:0;position:absolute;overflow:hidden}.btn[data-v-75bb98a7]{white-space:nowrap;width:100%;box-shadow:none;--text-color:var(--color-base);--background-color:transparent;justify-content:flex-start}.btn[data-v-75bb98a7]:not(:last-child){margin-bottom:var(--gap-xs)}.omorphia__page[data-v-2c627cb8]{flex-direction:column;padding:0 .75rem;display:flex}.omorphia__page .header[data-v-2c627cb8]{grid-area:header}.omorphia__page .sidebar[data-v-2c627cb8]{grid-area:sidebar}.omorphia__page .footer[data-v-2c627cb8]{grid-area:footer}.omorphia__page .content[data-v-2c627cb8]{grid-area:content}@media (width>=1024px){.omorphia__page[data-v-2c627cb8]{-moz-column-gap:.75rem;column-gap:.75rem;max-width:80rem;margin:0 auto}.omorphia__page.has-sidebar[data-v-2c627cb8]{grid-template:"sidebar content""footer content""dummy content"1fr/20rem 1fr;display:grid}.omorphia__page.has-sidebar.has-header[data-v-2c627cb8]{grid-template:"header header""sidebar content""footer content""dummy content"1fr/20rem 1fr}.omorphia__page.has-sidebar.right-sidebar[data-v-2c627cb8]{grid-template:"content sidebar""content footer""content dummy"1fr/1fr 20rem}.omorphia__page.has-sidebar.right-sidebar.has-header[data-v-2c627cb8]{grid-template:"header header""content sidebar""content footer""content dummy"1fr/1fr 20rem}.omorphia__page.has-sidebar .content[data-v-2c627cb8]{max-width:59.25rem}.sidebar[data-v-2c627cb8]{width:20rem;min-width:20rem}}@media (width>=80rem){.omorphia__page.has-sidebar .content[data-v-2c627cb8]{width:59.25rem}}.progress-bar[data-v-da253495]{transition:width .2s ease-in-out}.progress-bar--waiting[data-v-da253495]{animation:1s linear infinite progress-bar-waiting-da253495;position:relative}@keyframes progress-bar-waiting-da253495{0%{width:20%;left:-50%}50%{width:60%}to{width:20%;left:100%}}.categories[data-v-4fd53fd2]{gap:var(--gap-sm);flex-flow:wrap;display:flex}.categories[data-v-4fd53fd2] span{flex-direction:row;align-items:center;display:flex}.categories[data-v-4fd53fd2] span:not(.version-badge){color:var(--color-gray)}.categories[data-v-4fd53fd2] span svg{width:1rem;margin-right:.2rem}.project-card[data-v-d1d51c22]{box-sizing:border-box;margin:0;line-height:1;display:inline-grid;overflow:hidden}.display-mode--list .project-card[data-v-d1d51c22]{-moz-column-gap:var(--gap-md);column-gap:var(--gap-md);row-gap:var(--gap-sm);grid-template:"icon title stats"min-content"icon description stats"1fr"icon tags stats"min-content/min-content 1fr auto;width:100%}@media screen and (width<=750px){.display-mode--list .project-card[data-v-d1d51c22]{grid-template:"icon title"min-content"icon description"1fr"icon tags"min-content"stats stats"min-content/min-content auto}}@media screen and (width<=550px){.display-mode--list .project-card[data-v-d1d51c22]{grid-template:"icon title"min-content"icon description"1fr"tags tags"min-content"stats stats"min-content/min-content auto}}.display-mode--list .project-card h2[data-v-d1d51c22]{margin:0;font-size:1.5rem}.display-mode--gallery .project-card[data-v-d1d51c22],.display-mode--grid .project-card[data-v-d1d51c22]{row-gap:var(--gap-sm);grid-template:"gallery gallery"min-content"icon title"min-content"description description"1fr"tags tags"min-content"stats stats"min-content/min-content 1fr;padding:0 0 1rem}.display-mode--gallery .project-card .gallery[data-v-d1d51c22],.display-mode--grid .project-card .gallery[data-v-d1d51c22]{background-color:var(--color-button-bg);width:100%;height:10rem;display:inline-block}.display-mode--gallery .project-card .gallery.no-image[data-v-d1d51c22],.display-mode--grid .project-card .gallery.no-image[data-v-d1d51c22]{filter:brightness(.7)}.display-mode--gallery .project-card .gallery img[data-v-d1d51c22],.display-mode--grid .project-card .gallery img[data-v-d1d51c22]{box-shadow:none;-o-object-fit:cover;object-fit:cover;width:100%;height:10rem}.display-mode--gallery .project-card .icon[data-v-d1d51c22],.display-mode--grid .project-card .icon[data-v-d1d51c22]{margin-left:var(--gap-lg);z-index:1;margin-top:-3rem}.display-mode--gallery .project-card .icon img[data-v-d1d51c22],.display-mode--gallery .project-card .icon svg[data-v-d1d51c22],.display-mode--grid .project-card .icon img[data-v-d1d51c22],.display-mode--grid .project-card .icon svg[data-v-d1d51c22]{border-radius:var(--radius-lg);box-shadow:-2px -2px 0 2px var(--color-raised-bg),2px -2px 0 2px var(--color-raised-bg)}.display-mode--gallery .project-card .title[data-v-d1d51c22],.display-mode--grid .project-card .title[data-v-d1d51c22]{margin-left:var(--gap-md);margin-right:var(--gap-md);flex-direction:column}.display-mode--gallery .project-card .title .name[data-v-d1d51c22],.display-mode--grid .project-card .title .name[data-v-d1d51c22]{font-size:1.25rem}.display-mode--gallery .project-card .title .status[data-v-d1d51c22],.display-mode--grid .project-card .title .status[data-v-d1d51c22]{margin-top:var(--gap-xs)}.display-mode--gallery .project-card .description[data-v-d1d51c22],.display-mode--gallery .project-card .tags[data-v-d1d51c22],.display-mode--grid .project-card .description[data-v-d1d51c22],.display-mode--grid .project-card .tags[data-v-d1d51c22]{margin-inline:var(--gap-lg)}.display-mode--gallery .project-card .stats[data-v-d1d51c22],.display-mode--grid .project-card .stats[data-v-d1d51c22]{margin-inline:var(--gap-lg);flex-direction:row;align-items:center}.display-mode--gallery .project-card .stats .stat-label[data-v-d1d51c22],.display-mode--grid .project-card .stats .stat-label[data-v-d1d51c22]{display:none}.display-mode--gallery .project-card .stats .buttons[data-v-d1d51c22],.display-mode--grid .project-card .stats .buttons[data-v-d1d51c22]{gap:var(--gap-sm);flex-direction:row;align-items:center}.display-mode--gallery .project-card .stats .buttons[data-v-d1d51c22]>:first-child,.display-mode--grid .project-card .stats .buttons[data-v-d1d51c22]>:first-child{margin-left:auto}.display-mode--gallery .project-card .stats .buttons[data-v-d1d51c22]:first-child>:last-child,.display-mode--grid .project-card .stats .buttons[data-v-d1d51c22]:first-child>:last-child{margin-right:auto}.display-mode--gallery .project-card .stats .buttons:not(:empty)+.date[data-v-d1d51c22],.display-mode--grid .project-card .stats .buttons:not(:empty)+.date[data-v-d1d51c22]{flex-basis:100%}.display-mode--grid .project-card .gallery[data-v-d1d51c22]{display:none}.display-mode--grid .project-card .icon[data-v-d1d51c22]{margin-top:calc(var(--gap-lg) - var(--gap-sm))}.display-mode--grid .project-card .icon img[data-v-d1d51c22],.display-mode--grid .project-card .icon svg[data-v-d1d51c22]{border:none}.display-mode--grid .project-card .title[data-v-d1d51c22]{margin-top:calc(var(--gap-lg) - var(--gap-sm))}.icon[data-v-d1d51c22]{grid-area:icon;align-items:center;display:flex}.gallery[data-v-d1d51c22]{grid-area:gallery;height:10rem;display:none}.title[data-v-d1d51c22]{-moz-column-gap:var(--gap-sm);align-items:baseline;column-gap:var(--gap-sm);word-wrap:anywhere;flex-flow:wrap;grid-area:title;row-gap:0;display:flex}.title h2[data-v-d1d51c22]{color:var(--color-contrast);font-weight:bolder}.title h2[data-v-d1d51c22],.title p[data-v-d1d51c22]{overflow-wrap:anywhere;margin:0}.title svg[data-v-d1d51c22]{width:auto;color:var(--color-special-orange);height:1.5rem;margin-bottom:-.25rem}.title .title-link[data-v-d1d51c22]{text-decoration:underline}.title .title-link[data-v-d1d51c22]:focus-visible,.title .title-link[data-v-d1d51c22]:hover{color:var(--color-heading)}.title .title-link[data-v-d1d51c22]:active{color:var(--color-text-dark)}.stats[data-v-d1d51c22]{align-items:flex-end;gap:var(--gap-md);flex-flow:column wrap;grid-area:stats;display:flex}.stats .stat[data-v-d1d51c22]{align-items:center;gap:var(--gap-xs);--stat-strong-size:1.25rem;flex-direction:row;width:fit-content;display:flex}.stats .stat strong[data-v-d1d51c22]{font-size:var(--stat-strong-size)}.stats .stat p[data-v-d1d51c22]{margin:0}.stats .stat svg[data-v-d1d51c22]{height:var(--stat-strong-size);width:var(--stat-strong-size)}.stats .date[data-v-d1d51c22]{margin-top:auto}@media screen and (width<=750px){.stats[data-v-d1d51c22]{-moz-column-gap:var(--gap-md);column-gap:var(--gap-md);margin-top:var(--gap-xs);flex-direction:row}}@media screen and (width<=600px){.stats[data-v-d1d51c22]{margin-top:0}.stats .stat-label[data-v-d1d51c22]{display:none}}.environment[data-v-d1d51c22]{font-weight:700;color:var(--color-text)!important}.description[data-v-d1d51c22]{grid-area:description;justify-content:flex-start;margin-block:0;display:flex}.tags[data-v-d1d51c22]{flex-direction:row;grid-area:tags;display:flex}@media screen and (width<=550px){.tags[data-v-d1d51c22]{margin-top:var(--gap-xs)}}.buttons[data-v-d1d51c22]{gap:var(--gap-sm);flex-direction:column;flex-grow:1;align-items:flex-end;display:flex}@media screen and (width>=750px){.small-mode[data-v-d1d51c22]{grid-template:"icon title"min-content"icon description"1fr"icon tags"min-content"stats stats"min-content/min-content auto!important}.small-mode .tags[data-v-d1d51c22]{margin-top:var(--gap-xs)!important}.small-mode .stats[data-v-d1d51c22]{flex-direction:row;-moz-column-gap:var(--gap-md)!important;column-gap:var(--gap-md)!important;margin-top:var(--gap-xs)!important}.small-mode .stats .stat-label[data-v-d1d51c22]{display:none!important}}.base-card[data-v-d1d51c22]{padding:var(--gap-lg);background-color:var(--color-raised-bg);border-radius:var(--radius-lg);min-height:2rem;box-shadow:var(--shadow-card);outline:2px solid #0000;position:relative}.base-card .card__overlay[data-v-d1d51c22]{grid-gap:.5rem;z-index:2;flex-direction:column;align-items:flex-end;display:flex;position:absolute;top:1rem;right:1rem}.base-card.warning[data-v-d1d51c22]{border-left:.5rem solid var(--color-banner-side);background-color:var(--color-banner-bg);color:var(--color-banner-text);min-height:0;padding:1.5rem;line-height:1.5}.base-card.warning a[data-v-d1d51c22]{color:var(--color-blue);text-decoration:underline}.base-card.moderation-card[data-v-d1d51c22]{background-color:var(--color-banner-bg)}.radial-header[data-v-8eab98dd]{background-image:radial-gradient(50% 100% at 50% 100%,var(--_radial-bg)10%,#fff0 100%);position:relative}.radial-header[data-v-8eab98dd]:before{content:"";background-image:linear-gradient(90deg,#fff0 0,var(--_radial-border)50%,#fff0 100%);opacity:.8;width:100%;height:1px;position:absolute;bottom:0;left:0}.markdown-body[data-v-a74b05fe]>:first-child{margin-top:0}.root-container[data-v-45ef7c48]{--transition-speed:.2s;flex-direction:row;align-items:center;width:100%;display:flex}@media (prefers-reduced-motion){.root-container[data-v-45ef7c48]{--transition-speed:0s}}.slide-container[data-v-45ef7c48],.slider-component[data-v-45ef7c48]{width:100%;position:relative}.slider-component .slide-container .slider[data-v-45ef7c48]{-webkit-appearance:none;-moz-appearance:none;appearance:none;border-radius:var(--radius-sm);width:100%;height:.25rem;min-height:0;box-shadow:none;background:linear-gradient(to right,var(--color-brand),var(--color-brand)calc((var(--current-value) - var(--min-value))/(var(--max-value) - var(--min-value))*100%),var(--color-base)calc((var(--current-value) - var(--min-value))/(var(--max-value) - var(--min-value))*100%),var(--color-base)100%);vertical-align:middle;background-size:100% 100%;outline:0;padding:0;position:relative}.slider-component .slide-container .slider[data-v-45ef7c48]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;background:var(--color-brand);cursor:pointer;width:.75rem;height:.75rem;-webkit-transition:var(--transition-speed);transition:var(--transition-speed);border-radius:50%}.slider-component .slide-container .slider[data-v-45ef7c48]::-moz-range-thumb{background:var(--color-brand);cursor:pointer;width:.75rem;height:.75rem;-moz-transition:var(--transition-speed);transition:var(--transition-speed);border:none;border-radius:50%}.slider-component .slide-container .slider[data-v-45ef7c48]:hover::-webkit-slider-thumb:not(.disabled){width:1rem;height:1rem;-webkit-transition:var(--transition-speed);transition:var(--transition-speed)}.slider-component .slide-container .slider[data-v-45ef7c48]:hover::-moz-range-thumb:not(.disabled){width:1rem;height:1rem;-moz-transition:var(--transition-speed);transition:var(--transition-speed)}.slider-component .slide-container .snap-points-wrapper[data-v-45ef7c48]{width:100%;height:50%;position:absolute}.slider-component .slide-container .snap-points-wrapper .snap-points[data-v-45ef7c48]{vertical-align:middle;width:calc(100% - .75rem);height:.75rem;display:inline-block;position:relative;left:.375rem}.slider-component .slide-container .snap-points-wrapper .snap-points .snap-point[data-v-45ef7c48]{border-radius:var(--radius-sm);background-color:var(--color-base);width:.25rem;height:100%;display:inline-block;position:absolute;transform:translate(-.125rem)}.slider-component .slide-container .snap-points-wrapper .snap-points .snap-point.green[data-v-45ef7c48]{background-color:var(--color-brand)}.slider-input[data-v-45ef7c48]{width:6rem;margin-left:.75rem}.slider-range[data-v-45ef7c48]{flex-direction:row;justify-content:space-between;margin:0;font-size:.75rem;display:flex}.disabled[data-v-45ef7c48]{opacity:.5;cursor:not-allowed}.smart-clickable[data-v-f559450e]{display:grid}.smart-clickable[data-v-f559450e]>*{grid-area:1/1}.smart-clickable .smart-clickable__contents[data-v-f559450e] .smart-clickable\:allow-pointer-events{pointer-events:all}.smart-clickable.smart-clickable--has-clickable .smart-clickable__contents[data-v-f559450e]{transition:scale .125s ease-out}.smart-clickable.smart-clickable--has-clickable:has(>:first-child:hover,>:first-child:focus-visible) .smart-clickable__contents[data-v-f559450e]{filter:var(--hover-filter-weak)}.smart-clickable.smart-clickable--has-clickable:has(>:first-child:hover,>:first-child:focus-visible) .smart-clickable__contents[data-v-f559450e] .smart-clickable\:underline-on-hover{text-decoration:underline}.smart-clickable.smart-clickable--has-clickable:has(>:first-child:hover,>:first-child:focus-visible) .smart-clickable__contents[data-v-f559450e] .smart-clickable\:highlight-on-hover{filter:brightness(var(--hover-brightness,1.25))}.smart-clickable.smart-clickable--has-clickable:has(>:first-child:active) .smart-clickable__contents[data-v-f559450e]{scale:.97}[data-v-2d2db0e1-s]{width:1.5rem;height:1.5rem;color:var(--color-secondary)}.timeline-indicator[data-v-214e0d19]{background-image:linear-gradient(to bottom,var(--timeline-line-color,var(--color-raised-bg))66%,#fff0 0);z-index:-1;background-repeat:repeat-y;background-size:100% 30px;width:4px;height:calc(100% - 1rem);margin-top:1rem}.timeline-indicator.fade-out-start[data-v-214e0d19]{-webkit-mask-image:linear-gradient(0deg,#000 calc(100% - 15rem),#0000 100%);mask-image:linear-gradient(0deg,#000 calc(100% - 15rem),#0000 100%)}.timeline-indicator.fade-out-end[data-v-214e0d19]{-webkit-mask-image:linear-gradient(#000 calc(100% - 15rem),#0000 100%);mask-image:linear-gradient(#000 calc(100% - 15rem),#0000 100%)}.timeline-indicator.fade-out-start.fade-out-end[data-v-214e0d19]{-webkit-mask-image:linear-gradient(#0000 0,#000,#000 calc(100% - 8rem),#0000 100%);mask-image:linear-gradient(#0000 0,#000,#000 calc(100% - 8rem),#0000 100%)}div[data-v-fa4cb137]{height:5rem}div svg[data-v-fa4cb137]{width:5rem;height:5rem;position:absolute}div svg.rotate[data-v-fa4cb137]{animation:4s linear infinite rotate-fa4cb137}div svg.rotate.inner[data-v-fa4cb137]{animation:6s linear infinite reverse rotate-fa4cb137}@keyframes rotate-fa4cb137{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.animate .ring[data-v-a70813fe]{transform-origin:50%;transform-box:fill-box;transition:transform 2s ease-in-out;animation-fill-mode:forwards}.animate .ring--large[data-v-a70813fe]{animation:1s ease-in-out infinite forwards spin-a70813fe}.animate .ring--small[data-v-a70813fe]{animation:2s ease-in-out infinite reverse spin-a70813fe}@keyframes spin-a70813fe{0%{transform:rotate(0)}to{transform:rotate(360deg)}}[data-v-16c862f9] .changelog-body{word-break:break-word;line-height:1.4}[data-v-16c862f9] .changelog-body h1,[data-v-16c862f9] .changelog-body h2,[data-v-16c862f9] .changelog-body h3,[data-v-16c862f9] .changelog-body h4,[data-v-16c862f9] .changelog-body h5,[data-v-16c862f9] .changelog-body h6{margin:0}[data-v-16c862f9] .changelog-body ul{margin:0;padding-left:1.25rem}[data-v-16c862f9] .changelog-body a{color:var(--color-link)}[data-v-16c862f9] .changelog-body a:focus-visible,[data-v-16c862f9] .changelog-body a:hover{filter:brightness(1.2);text-decoration:underline}[data-v-16c862f9] .changelog-body code{background-color:var(--color-bg);font-size:var(--font-size-sm);border-radius:4px;padding:.125rem .25rem}[data-v-16c862f9] .changelog-body p{margin:0}[data-v-16c862f9] .changelog-body *+p,[data-v-16c862f9] .changelog-body h3+*{margin-top:.5rem}[data-v-16c862f9] .changelog-body *+h3{margin-top:.75rem}[data-v-16c862f9] .changelog-body *+li{margin-top:.5rem}[data-v-16c862f9] .changelog-body li ul li{margin-top:.25rem}[data-v-16c862f9] .changelog-body img{border-radius:var(--radius-md);max-width:100%}.chart[data-v-8f186e67],svg[data-v-8f186e67]{width:100%;height:100%}.bar-chart[data-v-8f186e67]{flex-direction:column;justify-content:center;width:100%;height:100%;display:flex}.title-bar[data-v-8f186e67]{align-items:center;gap:var(--gap-xs);flex-direction:row;display:flex}.toolbar[data-v-8f186e67]{gap:var(--gap-xs);z-index:1;flex-direction:row;margin-left:auto;display:flex}[data-v-8f186e67] .apexcharts-menu,[data-v-8f186e67] .apexcharts-tooltip,[data-v-8f186e67] .apexcharts-yaxistooltip{background:var(--color-raised-bg)!important;border-radius:var(--radius-sm)!important;border:1px solid var(--color-button-bg)!important;box-shadow:var(--shadow-floating)!important;font-size:var(--font-size-nm)!important}[data-v-8f186e67] .apexcharts-grid-borders line{stroke:var(--color-button-bg)!important}[data-v-8f186e67] .apexcharts-xaxistooltip,[data-v-8f186e67] .apexcharts-yaxistooltip{background:var(--color-raised-bg)!important;border-radius:var(--radius-sm)!important;border:1px solid var(--color-button-bg)!important;font-size:var(--font-size-nm)!important;color:var(--color-base)!important}[data-v-8f186e67] .apexcharts-xaxistooltip .apexcharts-xaxistooltip-text,[data-v-8f186e67] .apexcharts-yaxistooltip .apexcharts-xaxistooltip-text{font-size:var(--font-size-nm)!important;color:var(--color-base)!important}[data-v-8f186e67] .apexcharts-yaxistooltip-left:after{border-left-color:var(--color-raised-bg)!important}[data-v-8f186e67] .apexcharts-yaxistooltip-left:before{border-left-color:var(--color-button-bg)!important}[data-v-8f186e67] .apexcharts-xaxistooltip-bottom:after{border-bottom-color:var(--color-raised-bg)!important}[data-v-8f186e67] .apexcharts-xaxistooltip-bottom:before{border-bottom-color:var(--color-button-bg)!important}[data-v-8f186e67] .apexcharts-menu-item{border-radius:var(--radius-sm)!important;padding:var(--gap-xs)var(--gap-sm)!important}[data-v-8f186e67] .apexcharts-menu-item:hover{color:var(--color-accent-contrast)!important;background:var(--color-brand)!important;transition:all .3s!important}[data-v-8f186e67] .apexcharts-tooltip .bar-tooltip{gap:var(--gap-xs);min-width:10rem;padding:var(--gap-sm);flex-direction:column;display:flex}[data-v-8f186e67] .apexcharts-tooltip .bar-tooltip .card-divider{margin:var(--gap-xs)0}[data-v-8f186e67] .apexcharts-tooltip .bar-tooltip .separated-entry{flex-direction:row;justify-content:space-between;align-items:center;display:flex}[data-v-8f186e67] .apexcharts-tooltip .bar-tooltip .title{font-weight:bolder}[data-v-8f186e67] .apexcharts-tooltip .bar-tooltip .label{color:var(--color-contrast)}[data-v-8f186e67] .apexcharts-tooltip .bar-tooltip .value{align-items:center;gap:var(--gap-xs);color:var(--color-base);flex-direction:row;display:flex}[data-v-8f186e67] .apexcharts-tooltip .bar-tooltip .list-entry{font-size:var(--font-size-sm);flex-direction:row;align-items:center;display:flex}[data-v-8f186e67] .apexcharts-tooltip .bar-tooltip .list-entry .value{margin-left:auto}[data-v-8f186e67] .apexcharts-tooltip .bar-tooltip .list-entry .label{margin-right:var(--gap-xl)}[data-v-8f186e67] .apexcharts-tooltip .bar-tooltip .circle{width:.5rem;height:.5rem;margin-right:var(--gap-sm);border-radius:50%;display:inline-block}[data-v-8f186e67] .apexcharts-tooltip .bar-tooltip svg{width:1em;height:1em}.legend[data-v-8f186e67]{align-items:center;gap:var(--gap-md);flex-direction:row;justify-content:center;display:flex}.legend-checkbox[data-v-8f186e67] .checkbox.checked{background-color:var(--color)}.compact-chart[data-v-40286b51]{gap:var(--gap-xs);border:1px solid var(--color-button-bg);border-radius:var(--radius-md);background-color:var(--color-raised-bg);box-shadow:var(--shadow-floating);color:var(--color-base);font-size:var(--font-size-nm);flex-direction:column;width:100%;padding-bottom:0;display:flex}.compact-chart .value[data-v-40286b51]{margin:0}.chart[data-v-40286b51]{width:calc(100% + 3rem);margin:0 -1.5rem .25rem}svg[data-v-40286b51]{width:100%;height:100%}[data-v-40286b51] .apexcharts-menu,[data-v-40286b51] .apexcharts-tooltip,[data-v-40286b51] .apexcharts-yaxistooltip{background:var(--color-raised-bg)!important;border-radius:var(--radius-sm)!important;border:1px solid var(--color-button-bg)!important;box-shadow:var(--shadow-floating)!important;font-size:var(--font-size-nm)!important}[data-v-40286b51] .apexcharts-graphical{width:100%}[data-v-40286b51] .apexcharts-tooltip .bar-tooltip{gap:var(--gap-xs);padding:var(--gap-sm);flex-direction:column;display:flex}[data-v-40286b51] .apexcharts-tooltip .bar-tooltip .card-divider{margin:var(--gap-xs)0}[data-v-40286b51] .apexcharts-tooltip .bar-tooltip .label{flex-direction:row;align-items:center;display:flex}[data-v-40286b51] .apexcharts-tooltip .bar-tooltip .value{align-items:center;gap:var(--gap-xs);color:var(--color-base);flex-direction:row;display:flex}[data-v-40286b51] .apexcharts-tooltip .bar-tooltip .list-entry{justify-content:space-between;align-items:center;gap:var(--gap-md);flex-direction:row;display:flex}[data-v-40286b51] .apexcharts-tooltip .bar-tooltip .circle{width:.5rem;height:.5rem;margin-right:var(--gap-sm);border-radius:50%;display:inline-block}[data-v-40286b51] .apexcharts-tooltip .bar-tooltip svg{width:1em;height:1em}[data-v-40286b51] .apexcharts-tooltip .bar-tooltip .divider{font-size:var(--font-size-lg);font-weight:400}.legend[data-v-40286b51]{align-items:center;gap:var(--gap-md);flex-direction:row;justify-content:center;display:flex}[data-v-40286b51] .apexcharts-grid-borders line{stroke:var(--color-button-bg)!important}[data-v-40286b51] .apexcharts-xaxis line{stroke:none}.legend-checkbox[data-v-40286b51] .checkbox.checked{background-color:var(--color)}.tauri-overlay[data-v-163d50cf]{visibility:hidden;z-index:20;width:100%;height:100px;position:fixed;top:0;left:0}.tauri-overlay.shown[data-v-163d50cf]{opacity:1;visibility:visible}.modal-overlay[data-v-163d50cf]{z-index:19;opacity:0;background:linear-gradient(#1d302b85,#0e151af2);border-radius:180px;transition:all .2s ease-out;position:fixed;inset:-5rem}@media (prefers-reduced-motion){.modal-overlay[data-v-163d50cf]{transition:none!important}}.modal-overlay.shown[data-v-163d50cf]{opacity:1;visibility:visible;backdrop-filter:blur(5px)}.modal-overlay.noblur[data-v-163d50cf]{backdrop-filter:none;filter:none}.modal-overlay.danger[data-v-163d50cf]{background:linear-gradient(#2b121a85,#310a0ff2)}.modal-container[data-v-163d50cf]{z-index:21;visibility:hidden;pointer-events:none;width:100%;height:100%;transform:translate(calc((-50vw + var(--_mouse-x,50vw)*1px)/16),calc((-50vh + var(--_mouse-y,50vh)*1px)/16));justify-content:center;align-items:center;transition:all .2s ease-out;display:flex;position:fixed;top:0;left:0}.modal-container.shown[data-v-163d50cf]{visibility:visible;transform:translate(0)}.modal-container.shown>.modal-body[data-v-163d50cf]{opacity:1;visibility:visible;scale:1}.modal-container>.modal-body[data-v-163d50cf]{max-height:calc(100% - 2*var(--gap-lg));max-width:min(var(--_max-width,60rem),100% - 2*var(--gap-lg));pointer-events:auto;visibility:hidden;opacity:0;width:fit-content;transition:all .2s ease-in-out;position:fixed;overflow:hidden auto;scale:.97;box-shadow:4px 4px 26px 10px #00000014}@media (prefers-reduced-motion){.modal-container>.modal-body[data-v-163d50cf]{transition:none!important}}@media screen and (width<=650px){.modal-container>.modal-body[data-v-163d50cf]{width:calc(100% - 2*var(--gap-lg))}}.share-body[data-v-89753354]{align-items:center;gap:var(--gap-sm);padding:var(--gap-lg);flex-flow:wrap;display:flex}.all-buttons[data-v-89753354]{gap:var(--gap-sm);flex-direction:column;flex-grow:1;justify-content:center;display:flex}.iconified-input[data-v-89753354]{width:100%}.iconified-input input[data-v-89753354]{flex-basis:auto}.button-row[data-v-89753354]{gap:var(--gap-sm);flex-direction:row;display:flex}.button-row .btn[data-v-89753354]{fill:var(--color-contrast);color:var(--color-contrast)}.button-row .btn.reddit[data-v-89753354]{background-color:#ff4500}.button-row .btn.mastodon[data-v-89753354]{background-color:#563acc}.button-row .btn.twitter[data-v-89753354]{background-color:#1da1f2}.qr-wrapper[data-v-89753354]{margin:0 auto;position:relative}.qr-wrapper:hover .copy-button[data-v-89753354]{opacity:1}.qr-code[data-v-89753354]{border-radius:var(--radius-md);background-color:#fff!important}.copy-button[data-v-89753354]{margin:var(--gap-sm);opacity:0;transition:all .2s ease-in-out;position:absolute;top:0;right:0}@media (prefers-reduced-motion){.copy-button[data-v-89753354]{transition:none!important}}.resizable-textarea-wrapper[data-v-89753354]{height:100%;position:relative}.resizable-textarea-wrapper textarea[data-v-89753354]{width:100%;margin:0}.resizable-textarea-wrapper .btn[data-v-89753354]{opacity:1;margin:0}.breadcrumbs[data-v-14259543]{margin-bottom:var(--gap-lg);flex-wrap:wrap;align-items:center;display:flex}.breadcrumbs svg[data-v-14259543]{width:1.25rem;height:1.25rem}.breadcrumbs a.breadcrumb[data-v-14259543]{padding-block:var(--gap-xs)}.breadcrumbs a.breadcrumb.trim[data-v-14259543]{text-overflow:ellipsis;white-space:nowrap}.navigation[data-v-5b06336e]{grid-gap:1rem;flex-flow:wrap;align-items:center;display:flex;position:relative}.navigation .nav-link[data-v-5b06336e]{text-transform:capitalize;font-weight:var(--font-weight-bold);color:var(--color-base);position:relative}.navigation .nav-link[data-v-5b06336e]:hover{color:var(--color-base)}.navigation .nav-link[data-v-5b06336e]:hover:after{opacity:.4}.navigation .nav-link[data-v-5b06336e]:active:after{opacity:.2}.navigation .nav-link.router-link-exact-active[data-v-5b06336e]{color:var(--color-base)}.navigation .nav-link.router-link-exact-active[data-v-5b06336e]:after{opacity:1}.navigation.use-animation .nav-link.is-active[data-v-5b06336e]:after{opacity:0}.navigation .nav-indicator[data-v-5b06336e]{border-radius:var(--radius-max);background-color:var(--color-brand);width:3rem;height:.25rem;transition:all .2s ease-in-out;position:absolute;bottom:-5px;left:0}@media (prefers-reduced-motion){.navigation .nav-indicator[data-v-5b06336e]{transition:none!important}}.omorphia__navstack[data-v-5396aeb5]{flex-direction:column;display:flex}.omorphia__navstack[data-v-5396aeb5] .btn{width:100%;position:relative}.omorphia__navstack[data-v-5396aeb5] .btn.selected{background-color:var(--color-button-bg);font-weight:700}.banner-grid[data-v-24baa655]{padding-block:var(--gap-xl);padding-inline:max(calc((100% - 80rem)/2 + var(--gap-md)),var(--gap-xl));grid-template-areas:"title actions_right""description actions_right""actions actions_right";gap:.5rem;display:grid}.grid-area-\[title\][data-v-24baa655]{grid-area:title}.grid-area-\[description\][data-v-24baa655]{grid-area:description}.grid-area-\[actions\][data-v-24baa655]{grid-area:actions}.grid-area-\[actions_right\][data-v-24baa655]{grid-area:actions_right}.banner-grid a[data-v-24baa655]{color:currentColor;text-decoration-line:underline}div[data-v-3acfd228]{background:linear-gradient(to bottom,var(--_color),transparent);opacity:.075;width:100%;height:60rem}.versions-grid-row[data-v-69edec0c]{grid-template-columns:1fr min-content;gap:1rem;display:grid}@supports (grid-template-columns:subgrid){.versions-grid-row[data-v-69edec0c]{grid-column:1/-1;grid-template-columns:subgrid!important}}@media (width>=640px){.versions-grid-row[data-v-69edec0c]{grid-template-columns:min-content 1fr 1fr 1fr min-content}}@media (width>=1280px){.versions-grid-row[data-v-69edec0c]{grid-template-columns:min-content 1fr 1fr 1fr 1fr 1fr min-content}}.animated-dropdown[data-v-7dd3b8b5]{width:20rem;height:2.5rem;display:inline-block;position:relative}.animated-dropdown[data-v-7dd3b8b5]:focus{outline:0}.animated-dropdown .selected[data-v-7dd3b8b5]{padding:var(--gap-sm)var(--gap-lg);background-color:var(--color-button-bg);justify-content:space-between;align-items:center;gap:var(--gap-md);cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none;border-radius:var(--radius-md);box-shadow:var(--shadow-inset-sm),0 0 0 0 transparent;display:flex}.animated-dropdown .selected.disabled[data-v-7dd3b8b5]{cursor:not-allowed;filter:grayscale(50%);opacity:.5}.animated-dropdown .selected.render-up[data-v-7dd3b8b5]{border-radius:0 0 var(--radius-md)var(--radius-md)}.animated-dropdown .selected.render-down[data-v-7dd3b8b5]{border-radius:var(--radius-md)var(--radius-md)0 0}.animated-dropdown .selected[data-v-7dd3b8b5]:focus{filter:brightness(1.25);outline:0;transition:filter .1s ease-in-out}.animated-dropdown .options[data-v-7dd3b8b5]{z-index:10;max-height:18rem;overflow-y:auto}.animated-dropdown .options .option[data-v-7dd3b8b5]{background-color:var(--color-button-bg);padding:var(--gap-md);cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none;align-items:center;display:flex}.animated-dropdown .options .option[data-v-7dd3b8b5]:hover{filter:brightness(.85);transition:filter .2s ease-in-out}.animated-dropdown .options .option[data-v-7dd3b8b5]:focus{filter:brightness(.85);outline:0;transition:filter .2s ease-in-out}.animated-dropdown .options .option.selected-option[data-v-7dd3b8b5]{background-color:var(--color-brand);color:var(--color-accent-contrast);font-weight:bolder}.animated-dropdown .options .option input[data-v-7dd3b8b5]{display:none}.options-enter-active[data-v-7dd3b8b5],.options-leave-active[data-v-7dd3b8b5]{transition:transform .2s}.options-enter-from.up[data-v-7dd3b8b5],.options-leave-to.up[data-v-7dd3b8b5]{transform:translateY(99.999%)}.options-enter-from.down[data-v-7dd3b8b5],.options-leave-to.down[data-v-7dd3b8b5]{transform:translateY(-99.999%)}.options-enter-to.up[data-v-7dd3b8b5],.options-leave-from.up[data-v-7dd3b8b5]{transform:translateY(0)}.options-wrapper[data-v-7dd3b8b5]{z-index:9;width:100%;position:absolute;overflow:auto}.options-wrapper.up[data-v-7dd3b8b5]{border-radius:var(--radius-md)var(--radius-md)0 0;top:0;transform:translateY(-99.999%)}.options-wrapper.down[data-v-7dd3b8b5]{border-radius:0 0 var(--radius-md)var(--radius-md)}.project-label[data-v-7dd3b8b5]{align-items:center;gap:var(--gap-md);color:var(--color-contrast);flex-direction:row;display:flex}.project-label .title[data-v-7dd3b8b5]{font-weight:700}.iconified-input[data-v-7dd3b8b5]{width:100%}.text-input[data-v-7dd3b8b5]{width:100%;transition:all 50ms;box-shadow:var(--shadow-inset-sm),0 0 0 0 transparent!important}.text-input:focus.down[data-v-7dd3b8b5]{border-radius:var(--radius-md)var(--radius-md)0 0!important}.text-input:focus.up[data-v-7dd3b8b5]{border-radius:0 0 var(--radius-md)var(--radius-md)!important}.text-input[data-v-7dd3b8b5]:not(:focus){transition-delay:.2s}.filter[data-v-c6c08570]{margin-bottom:.5rem}.filter[data-v-c6c08570] .filter-text{align-items:center;display:flex}.filter[data-v-c6c08570] .filter-text .icon{height:1rem}.filter[data-v-c6c08570] .filter-text .icon svg{width:1rem;height:1rem;margin-right:.25rem}.filter span[data-v-c6c08570]{-webkit-user-select:none;-moz-user-select:none;user-select:none}.search-filter-option:has(button:focus-visible) .filter-action-icon[data-v-4f99320d],.search-filter-option:has(button:focus-visible) button[data-v-4f99320d],.search-filter-option:hover .filter-action-icon[data-v-4f99320d],.search-filter-option:hover button[data-v-4f99320d]{opacity:1}.animate-pulse[data-v-635ab3d8]{animation:2s cubic-bezier(.4,0,.6,1) infinite pulse-635ab3d8}@keyframes pulse-635ab3d8{0%,to{scale:1}50%{scale:.95}}.nametag-bg[data-v-4721d479]{background:linear-gradient(308.68deg,#32323233 -52.46%,#64646433 94.75%),#0003;box-shadow:inset -.5px -.5px #00000040,inset .5px .5px #ffffff0d}.magical-cape-transform[data-v-aa194460]{aspect-ratio:10/16;box-sizing:content-box;width:60px;min-height:96px;position:relative;overflow:hidden}.magical-cape-transform img[data-v-aa194460]{-o-object-fit:cover;object-fit:cover;image-rendering:pixelated;transform-origin:7.8125% 25%;width:640%;height:200%;position:absolute;top:-6.25%;left:-10%;scale:1.01}.highlighted-inner-shadow[data-v-aa194460]:before{content:"";z-index:2;position:absolute;inset:0;box-shadow:inset 0 0 4px 4px #0006}@supports (background-color:color-mix(in srgb, transparent, transparent)){.highlighted-glow[data-v-aa194460]:before{box-shadow:inset 0 0 2px 4px color-mix(in srgb,var(--color-brand),transparent 10%)}}.highlighted-glow[data-v-7528e62f]:before{content:"";border-radius:inherit;pointer-events:none;position:absolute;inset:0}@supports (background-color:color-mix(in srgb, transparent, transparent)){.highlighted-glow[data-v-7528e62f]:before{box-shadow:inset 0 0 2px 2px color-mix(in srgb,var(--color-brand),transparent 10%)}}.skeleton-loader[data-v-15c5ad03]{aspect-ratio:5/7}.skeleton[data-v-15c5ad03]{background:linear-gradient(90deg,var(--color-bg)25%,var(--color-raised-bg)50%,var(--color-bg)75%);background-size:200% 100%;animation:1.5s linear infinite wave-15c5ad03}@keyframes wave-15c5ad03{0%{background-position:-200% 0}to{background-position:200% 0}}.skin-btn-bg[data-v-15c5ad03]{background:var(--color-gradient-button-bg)}.skin-btn-bg.selected[data-v-15c5ad03]{background:linear-gradient(157.61deg,var(--color-brand)-76.68%,#1bd96a88 -38.61%,#0c592c99 100.4%),var(--color-bg)}.group:hover .skin-btn-bg.selected[data-v-15c5ad03],.skin-btn-bg.selected[data-v-15c5ad03]:hover{filter:brightness(1.15)}.skin-button__image-parent img[data-v-15c5ad03]{transition:filter .2s ease-in-out}.group:hover .skin-button__image-parent img[data-v-15c5ad03]{filter:drop-shadow(0 2px 4px #0003)}.with-shadow img[data-v-15c5ad03]{filter:drop-shadow(0 4px 8px #0006)}.skin-btn-bg[data-v-600807b2]{background:var(--color-gradient-button-bg)}.skin-btn-bg.selected[data-v-600807b2]{background:linear-gradient(157.61deg,var(--color-brand)-76.68%,#1bd96a88 -38.61%,#0c592c99 100.4%),var(--color-bg)}.group:hover .skin-btn-bg.selected[data-v-600807b2],.skin-btn-bg.selected[data-v-600807b2]:hover{filter:brightness(1.15)}.theme-options[data-v-baf93428]{gap:var(--gap-lg);grid-template-columns:repeat(auto-fit,minmax(10rem,1fr));display:grid}.theme-options .preview .example-card[data-v-baf93428]{outline:2px solid #0000;grid-template:"icon text1""icon text2"/auto 1fr;gap:.5rem;margin:0;padding:1rem;display:grid}.theme-options .preview .example-card .example-icon[data-v-baf93428]{background-color:var(--color-button-bg);border-radius:var(--radius-sm);outline:2px solid #0000;grid-area:icon;width:2rem;height:2rem}.theme-options .preview .example-card .example-text-1[data-v-baf93428],.theme-options .preview .example-card .example-text-2[data-v-baf93428]{border-radius:var(--radius-sm);outline:2px solid #0000;height:.5rem}.theme-options .preview .example-card .example-text-1[data-v-baf93428]{background-color:var(--color-base);grid-area:text1;width:100%}.theme-options .preview .example-card .example-text-2[data-v-baf93428]{background-color:var(--color-secondary);grid-area:text2;width:60%}.brand-gradient-bg[data-v-44cbd907]{background-image:linear-gradient(to top right,var(--color-brand-highlight)-80%,var(--color-bg));--color-button-bg:var(--brand-gradient-button)}.context-menu[data-v-3726e243]{background-color:var(--color-raised-bg);border-radius:var(--radius-md);box-shadow:var(--shadow-floating);border:1px solid var(--color-button-bg);z-index:1000000;padding:var(--gap-sm);margin:0;position:fixed;overflow:hidden}.context-menu .item[data-v-3726e243]{color:var(--color-base);cursor:pointer;align-items:center;gap:var(--gap-sm);padding:var(--gap-sm);border-radius:var(--radius-sm);display:flex}.context-menu .item:active.base[data-v-3726e243],.context-menu .item:hover.base[data-v-3726e243]{background-color:var(--color-button-bg);color:var(--color-contrast)}.context-menu .item:active.primary[data-v-3726e243],.context-menu .item:hover.primary[data-v-3726e243]{background-color:var(--color-brand);color:var(--color-accent-contrast);font-weight:700}.context-menu .item:active.danger[data-v-3726e243],.context-menu .item:hover.danger[data-v-3726e243]{background-color:var(--color-red);color:var(--color-accent-contrast);font-weight:700}.context-menu .item:active.contrast[data-v-3726e243],.context-menu .item:hover.contrast[data-v-3726e243]{background-color:var(--color-orange);color:var(--color-accent-contrast);font-weight:700}.context-menu .divider[data-v-3726e243]{border:1px solid var(--color-button-bg);margin:var(--gap-sm);pointer-events:none}.fade-enter-active[data-v-3726e243],.fade-leave-active[data-v-3726e243]{transition:opacity .2s ease-in-out}.fade-enter-from[data-v-3726e243],.fade-leave-to[data-v-3726e243]{opacity:0}.content[data-v-79bf5c1e]{-ms-overflow-style:none;scrollbar-width:none;flex-direction:column;justify-content:center;align-items:center;gap:1rem;width:100%;display:flex}.content[data-v-79bf5c1e]::-webkit-scrollbar{background:0 0;width:0}.row[data-v-79bf5c1e]{flex-direction:column;align-items:flex-start;width:100%;min-width:100%;display:flex;overflow:hidden}.row[data-v-79bf5c1e]:nth-child(2n){background:var(--color-bg)}.row .header[data-v-79bf5c1e]{gap:var(--gap-xs);flex-direction:row;align-items:center;width:100%;margin-bottom:1rem;display:flex}.row .header a[data-v-79bf5c1e]{font-size:var(--font-size-md);white-space:nowrap;color:var(--color-base);margin:0;font-weight:bolder}.row .header svg[data-v-79bf5c1e]{width:1.25rem;height:1.25rem;color:var(--color-base)}.row .instances[data-v-79bf5c1e]{grid-gap:.75rem;grid-template-columns:repeat(auto-fill,minmax(20rem,1fr));width:100%;display:grid}.row .instances.compact[data-v-79bf5c1e]{grid-template-columns:repeat(auto-fill,minmax(18rem,1fr));gap:.75rem}.row .projects[data-v-79bf5c1e]{grid-gap:.75rem;grid-template-columns:repeat(auto-fill,minmax(18rem,1fr));width:100%;display:grid}.row .projects .item[data-v-79bf5c1e]{width:100%;max-width:100%}.world-item-highlighted[data-v-eb1a7840]{filter:brightness();animation:4s ease-out fade-highlight-eb1a7840;position:relative}.world-item-highlighted[data-v-eb1a7840]:before{content:"";box-shadow:0 0 8px 2px var(--color-brand);border:1.5px solid var(--color-brand);opacity:0;border-radius:.75rem;animation:4s ease-out fade-opacity-eb1a7840;position:absolute;inset:0}@keyframes fade-highlight-eb1a7840{0%{filter:brightness(1.25)}75%{filter:brightness(1.25)}to{filter:brightness()}}@keyframes fade-opacity-eb1a7840{0%{opacity:.5}75%{opacity:.5}to{opacity:0}}.light-mode .motd-renderer[data-v-eb1a7840]{filter:brightness(.75)}.grid-when-huge[data-v-15d8a6d0]{grid-template-columns:repeat(auto-fill,minmax(670px,1fr));display:grid}.navtabs-transition[data-v-44ee76fd]{transition:all .15s cubic-bezier(.4,0,.2,1),opacity .25s cubic-bezier(.5,0,.2,1) 50ms}.skin-layout[data-v-9048f574]{grid-template-columns:minmax(0,1fr) minmax(0,2.5fr);gap:2.5rem;display:grid}@media (width<=700px){.skin-layout[data-v-9048f574]{grid-template-columns:1fr}}.preview-panel[data-v-9048f574]{align-self:start;padding:0 .5rem .5rem;position:sticky;top:1.5rem}.preview-container[data-v-9048f574]{justify-content:center;align-items:center;height:80vh;margin-left:1.25rem;display:flex}@media (width<=700px){.preview-container[data-v-9048f574]{height:50vh}}.skins-container[data-v-9048f574]{padding-top:.5rem}.skin-card-grid[data-v-9048f574]{grid-template-columns:repeat(3,1fr);gap:4px;width:100%;display:grid}@media (width>=1300px){.skin-card-grid[data-v-9048f574]{grid-template-columns:repeat(4,1fr)}}@media (width>=1750px){.skin-card-grid[data-v-9048f574]{grid-template-columns:repeat(5,1fr)}}@media (width>=2050px){.skin-card-grid[data-v-9048f574]{grid-template-columns:repeat(6,1fr)}}.skin-card[data-v-9048f574]{aspect-ratio:.95;box-sizing:border-box;border-radius:10px;width:100%;min-width:0}.root-container[data-v-0df8a438]{flex-direction:row;min-height:100%;display:flex}.project-sidebar[data-v-0df8a438]{-ms-overflow-style:none;scrollbar-width:none;width:calc(300px + 1.5rem);height:fit-content;min-height:calc(100vh - 3.25rem);max-height:calc(100vh - 3.25rem);padding:1rem .5rem 1rem 1rem;position:fixed;overflow-y:auto}.project-sidebar[data-v-0df8a438]::-webkit-scrollbar{background:0 0;width:0}.sidebar-card[data-v-0df8a438]{flex-direction:column;gap:1rem;display:flex}.content-container[data-v-0df8a438]{flex-direction:column;width:100%;margin-left:calc(300px + 1rem);padding:1rem;display:flex}.button-group[data-v-0df8a438]{flex-flow:wrap;gap:.5rem;display:flex}.stats[data-v-0df8a438]{gap:var(--gap-md);flex-flow:column wrap;display:flex}.stats .stat[data-v-0df8a438]{align-items:center;gap:var(--gap-xs);--stat-strong-size:1.25rem;flex-direction:row;width:fit-content;display:flex}.stats .stat strong[data-v-0df8a438]{font-size:var(--stat-strong-size)}.stats .stat p[data-v-0df8a438]{margin:0}.stats .stat svg[data-v-0df8a438]{min-height:var(--stat-strong-size);min-width:var(--stat-strong-size)}.stats .date[data-v-0df8a438]{margin-top:auto}.tabs[data-v-0df8a438]{margin-bottom:var(--gap-md);flex-direction:row;justify-content:space-between;gap:1rem;display:flex}.tabs .tab[data-v-0df8a438]{border-radius:var(--border-radius);cursor:pointer;flex-direction:row;align-items:center;transition:background-color .2s ease-in-out;display:flex}.tabs .tab.router-view-active[data-v-0df8a438],.tabs .tab[data-v-0df8a438]:hover{background-color:var(--color-raised-bg)}.links a[data-v-0df8a438]{color:var(--color-text);border-radius:1rem;align-items:center;display:inline-flex}.links a img[data-v-0df8a438],.links a svg[data-v-0df8a438]{width:1rem;height:1rem}.links a span[data-v-0df8a438]{margin-left:.25rem;line-height:2rem;text-decoration:underline}.links a:focus-visible img[data-v-0df8a438],.links a:focus-visible span[data-v-0df8a438],.links a:focus-visible svg[data-v-0df8a438],.links a:hover img[data-v-0df8a438],.links a:hover span[data-v-0df8a438],.links a:hover svg[data-v-0df8a438]{color:var(--color-heading)}.links a:active img[data-v-0df8a438],.links a:active span[data-v-0df8a438],.links a:active svg[data-v-0df8a438]{color:var(--color-text-dark)}.links a[data-v-0df8a438]:not(:last-child):after{content:"•";margin:0 .25rem}.install-loading[data-v-0df8a438]{width:1rem;height:1rem;margin-right:-1rem;scale:.2}.install-loading[data-v-0df8a438] svg{color:var(--color-contrast)}.project-sidebar-section[data-v-0df8a438]{border-style:solid;border-width:0 0 1px;border-color:var(--brand-gradient-border);flex-direction:column;gap:.5rem;padding:1rem;display:flex}.filter-header[data-v-1ea596e3]{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.5rem;margin-bottom:.5rem;display:flex}.table-row[data-v-1ea596e3]{grid-template-columns:min-content 1fr 1fr 1.5fr}.manage[data-v-1ea596e3]{flex-grow:1;gap:.5rem;display:flex}.manage .multiselect[data-v-1ea596e3]{flex-grow:1}.card-row[data-v-1ea596e3]{background-color:var(--color-raised-bg);justify-content:space-between;align-items:center;display:flex}.mod-card[data-v-1ea596e3]{flex-direction:column;gap:1rem;margin-top:.5rem;display:flex;overflow:hidden}.text-combo[data-v-1ea596e3]{align-items:center;gap:.5rem;display:flex}.select[data-v-1ea596e3]{max-width:20rem;width:100%!important}.version-link[data-v-1ea596e3]{text-wrap:wrap;flex-direction:column;gap:.25rem;display:flex}.version-link .version-badge[data-v-1ea596e3]{flex-wrap:wrap;display:flex}.version-link .version-badge .channel-indicator[data-v-1ea596e3]{margin-right:.5rem}.stacked-text[data-v-1ea596e3]{flex-direction:column;align-items:flex-start;gap:.25rem;display:flex}.download-cell[data-v-1ea596e3]{width:4rem;padding:1rem}.filter-checkbox[data-v-1ea596e3] .checkbox{border:none}.gallery[data-v-0f4c3e5f]{grid-template-columns:repeat(auto-fill,minmax(20rem,1fr));gap:1rem;width:100%;display:grid}.gallery-item[data-v-0f4c3e5f]{flex-direction:column;margin:0;padding:0;display:flex;overflow:hidden}.gallery-item .gallery-image[data-v-0f4c3e5f]{aspect-ratio:2;-o-object-fit:cover;object-fit:cover;-o-object-position:center;object-position:center;width:100%}.gallery-item .gallery-body[data-v-0f4c3e5f]{flex-grow:1;padding:1rem}.gallery-item .gallery-time[data-v-0f4c3e5f]{vertical-align:center;padding:0 1rem 1rem}.expanded-image-modal[data-v-0f4c3e5f]{z-index:11;background-color:#000000b3;justify-content:center;align-items:center;width:100%;height:100%;display:flex;position:fixed;top:0;left:0;overflow:auto}.expanded-image-modal .content[data-v-0f4c3e5f]{width:calc(100vw - 2*var(--gap-lg));height:calc(100vh - 2*var(--gap-lg));position:relative}.expanded-image-modal .content .circle-button[data-v-0f4c3e5f]{max-width:2rem;color:var(--color-button-text);background-color:var(--color-button-bg);border-radius:var(--size-rounded-max);margin:0;padding:.5rem;line-height:1;display:flex;box-shadow:inset 0 -1px 1px #1118271a}.expanded-image-modal .content .circle-button[data-v-0f4c3e5f]:not(:last-child){margin-right:.5rem}.expanded-image-modal .content .circle-button[data-v-0f4c3e5f]:hover{background-color:var(--color-button-bg-hover)!important}.expanded-image-modal .content .circle-button:hover svg[data-v-0f4c3e5f]{color:var(--color-button-text-hover)!important}.expanded-image-modal .content .circle-button[data-v-0f4c3e5f]:active{background-color:var(--color-button-bg-active)!important}.expanded-image-modal .content .circle-button:active svg[data-v-0f4c3e5f]{color:var(--color-button-text-active)!important}.expanded-image-modal .content .circle-button svg[data-v-0f4c3e5f]{width:1rem;height:1rem}.expanded-image-modal .content .image[data-v-0f4c3e5f]{max-width:calc(100vw - 2*var(--gap-lg));max-height:calc(100vh - 2*var(--gap-lg));border-radius:var(--radius-lg);position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.expanded-image-modal .content .image.zoomed-in[data-v-0f4c3e5f]{-o-object-fit:cover;object-fit:cover;width:auto;height:calc(100vh - 2*var(--gap-lg));max-width:calc(100vw - 2*var(--gap-lg))}.expanded-image-modal .content .floating[data-v-0f4c3e5f]{left:50%;bottom:var(--gap-md);align-items:center;gap:var(--gap-md);opacity:1;flex-direction:column;padding:2rem 2rem 0;transition:opacity .25s ease-in-out;display:flex;position:absolute;transform:translate(-50%)}.expanded-image-modal .content .floating[data-v-0f4c3e5f]:not(.expanded-image-modal.content.floating:hover){opacity:.4}.expanded-image-modal .content .floating:not(.expanded-image-modal.content.floating:hover) .text[data-v-0f4c3e5f]{opacity:0;transform:translateY(2.5rem)scale(.8)}.expanded-image-modal .content .floating:not(.expanded-image-modal.content.floating:hover) .controls[data-v-0f4c3e5f]{transform:translateY(.25rem)scale(.9)}.expanded-image-modal .content .floating .text[data-v-0f4c3e5f]{text-shadow:1px 1px 10px #000000d4;flex-direction:column;gap:.5rem;max-width:40rem;margin-bottom:.25rem;transition:opacity .25s ease-in-out,transform .25s ease-in-out;display:flex}.expanded-image-modal .content .floating .text h2[data-v-0f4c3e5f]{color:var(--dark-color-base);text-align:center;margin:0;font-size:1.25rem}.expanded-image-modal .content .floating .text p[data-v-0f4c3e5f]{color:var(--dark-color-base);margin:0}.expanded-image-modal .content .floating .controls[data-v-0f4c3e5f]{background-color:var(--color-raised-bg);padding:var(--gap-md);border-radius:var(--radius-md);transition:opacity .25s ease-in-out,transform .25s ease-in-out}.buttons[data-v-0f4c3e5f]{gap:.5rem;display:flex}.version-container[data-v-a10ff54e]{flex-direction:row;gap:1rem;display:flex}.version-title[data-v-a10ff54e]{margin-bottom:1rem}.version-title h2[data-v-a10ff54e]{font-size:var(--font-size-2xl);color:var(--color-contrast);margin:0;font-weight:700}.dependency[data-v-a10ff54e]{background:var(--color-raised-bg);color:var(--color-base);gap:.5rem;width:100%;padding:.5rem 1rem .5rem .5rem;display:flex}.dependency .title[data-v-a10ff54e]{font-weight:bolder}.dependency[data-v-a10ff54e] svg{margin-right:0!important}.file[data-v-a10ff54e]{background:var(--color-button-bg);color:var(--color-base);flex-direction:row;gap:.5rem;padding:.5rem 1rem;display:flex}.file .download[data-v-a10ff54e]{background-color:var(--color-raised-bg);margin-left:auto}.file .label[data-v-a10ff54e]{gap:.5rem;margin:auto 0;display:flex}.file .label .title[data-v-a10ff54e]{word-break:break-all;font-weight:bolder}.file .label svg[data-v-a10ff54e]{width:1.1rem;min-width:1.1rem;height:1.1rem;min-height:1.1rem;margin:auto 0}.file .label .primary-label[data-v-a10ff54e]{font-style:italic}.primary[data-v-a10ff54e]{background:var(--color-brand-highlight);color:var(--color-contrast)}.button-group[data-v-a10ff54e]{flex-flow:wrap;gap:.5rem;display:flex}.card-title[data-v-a10ff54e]{font-size:var(--font-size-lg);color:var(--color-contrast);margin:0 0 .5rem}.description-cards[data-v-a10ff54e]{width:100%}.metadata-card[data-v-a10ff54e]{width:20rem;height:min-content}.metadata[data-v-a10ff54e]{flex-flow:column wrap;gap:1rem;display:flex}.metadata .metadata-item[data-v-a10ff54e]{flex-direction:column;gap:.5rem;display:flex}.metadata .metadata-item .metadata-label[data-v-a10ff54e]{font-weight:700}.author[data-v-a10ff54e]{color:var(--color-base);background:var(--color-raised-bg);width:100%;box-shadow:none;flex-direction:row;align-items:center;gap:.5rem;padding:.5rem;text-decoration:none;display:flex}.markdown-body img[data-v-a10ff54e],.markdown-body[data-v-a10ff54e] h1,.markdown-body[data-v-a10ff54e] h2,.markdown-body[data-v-a10ff54e] hr{max-width:max(60rem,90%)!important}.markdown-body[data-v-a10ff54e] ol,.markdown-body[data-v-a10ff54e] ul{margin-left:2rem}.copycode[data-v-a10ff54e]{color:var(--color-contrast);border:0}.disabled[data-v-a10ff54e]{vertical-align:center;cursor:not-allowed;border-radius:var(--radius-lg);flex-direction:row;align-items:center;display:flex}.disabled .text[data-v-a10ff54e]{filter:brightness(.5)}.modal-body[data-v-a517f5ae]{gap:var(--gap-md);flex-direction:column;display:flex}.labeled_input[data-v-a517f5ae]{gap:var(--gap-sm);flex-direction:column;display:flex}.labeled_input p[data-v-a517f5ae]{margin:0}.select-checkbox[data-v-a517f5ae]{gap:var(--gap-sm)}.select-checkbox button.checkbox[data-v-a517f5ae]{border:none}.select-checkbox.dropdown[data-v-a517f5ae]{margin-left:auto}.table-content[data-v-a517f5ae]{max-height:18rem;overflow-y:auto}.table[data-v-a517f5ae]{border:1px solid var(--color-bg)}.file-entry[data-v-a517f5ae]{gap:var(--gap-sm);flex-direction:column;display:flex}.file-primary[data-v-a517f5ae]{align-items:center;gap:var(--gap-sm);display:flex}.file-secondary[data-v-a517f5ae]{margin-left:var(--gap-xl);gap:var(--gap-sm);height:100%;vertical-align:center;flex-direction:column;display:flex}.file-secondary-row[data-v-a517f5ae]{align-items:center;gap:var(--gap-sm);display:flex}.button-row[data-v-a517f5ae]{gap:var(--gap-sm);align-items:center;display:flex}.row-wise[data-v-a517f5ae]{flex-direction:row;justify-content:space-between;align-items:center;gap:1rem;display:flex}.textarea-wrapper[data-v-a517f5ae]{height:12rem}.textarea-wrapper textarea[data-v-a517f5ae]{max-height:12rem}.textarea-wrapper .preview[data-v-a517f5ae]{overflow-y:auto}.hovering-icon-shadow[data-v-79138a23]{box-shadow:var(--shadow-inset-sm),var(--shadow-raised)}.filter-header[data-v-20cf5c0d]{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.5rem;margin-bottom:.5rem;display:flex}.with-columns[data-v-20cf5c0d]{grid-template-columns:min-content 1fr 1fr}.scrollable[data-v-20cf5c0d]{max-height:25rem;overflow-y:auto}.card-row[data-v-20cf5c0d]{background-color:var(--color-raised-bg);justify-content:space-between;align-items:center;display:flex}.mod-card[data-v-20cf5c0d]{flex-direction:column;gap:1rem;margin-top:.5rem;display:flex;overflow:hidden}.version-link[data-v-20cf5c0d]{flex-direction:column;gap:.25rem;display:flex}.version-link .version-badge[data-v-20cf5c0d]{flex-wrap:wrap;display:flex}.version-link .version-badge .channel-indicator[data-v-20cf5c0d]{margin-right:.5rem}.stacked-text[data-v-20cf5c0d]{flex-direction:column;align-items:flex-start;gap:.25rem;display:flex}.download-cell[data-v-20cf5c0d]{width:4rem;padding:1rem}.modal-body[data-v-20cf5c0d]{gap:var(--gap-md);flex-direction:column;display:flex}.table[data-v-20cf5c0d]{border:1px solid var(--color-bg)}.auto-detect-modal .table[data-v-03178d90]{padding:.5rem}.auto-detect-modal .table .table-row[data-v-03178d90]{grid-template-columns:1fr 4fr min-content}.auto-detect-modal .table span[data-v-03178d90]{display:inherit;justify-content:center;align-items:center}.manage[data-v-03178d90]{gap:.5rem;display:flex}.installation-input[data-v-d10a045b]{flex-grow:1;width:100%!important}.toggle-setting[data-v-d10a045b]{flex-flow:wrap;justify-content:space-between;align-items:center;gap:.5rem;display:flex}.toggle-setting.compact[data-v-d10a045b]{flex-wrap:wrap}.installation-buttons[data-v-d10a045b]{flex-direction:row;align-items:center;gap:.5rem;margin:0;display:flex}.installation-buttons .btn[data-v-d10a045b]{width:max-content}.test-success[data-v-d10a045b]{color:var(--color-green)}.test-fail[data-v-d10a045b]{color:var(--color-red)}.instance-card[data-v-26139bb7]{flex-direction:column;gap:1rem;display:flex}Button[data-v-26139bb7]{width:100%}.button-group[data-v-26139bb7]{flex-direction:row;gap:.5rem;display:flex}.side-cards[data-v-26139bb7]{-ms-overflow-style:none;scrollbar-width:none;flex-direction:column;width:300px;min-height:calc(100vh - 3.25rem);max-height:calc(100vh - 3.25rem);display:flex;position:fixed;overflow-y:auto}.side-cards[data-v-26139bb7]::-webkit-scrollbar{background:0 0;width:0}.side-cards .card[data-v-26139bb7]{min-height:unset;margin-bottom:0}.instance-nav[data-v-26139bb7]{background:var(--color-raised-bg);flex-direction:column;justify-content:center;align-items:flex-start;gap:.5rem;height:100%;padding:1rem;display:flex}.name[data-v-26139bb7]{color:var(--color-contrast);text-overflow:ellipsis;font-size:1.25rem;overflow:hidden}.metadata[data-v-26139bb7]{text-transform:capitalize}.instance-container[data-v-26139bb7]{flex-direction:row;gap:1rem;min-height:100%;padding:1rem;display:flex;overflow:auto}.instance-info[data-v-26139bb7]{flex-direction:column;width:100%;display:flex}.badge[data-v-26139bb7]{width:fit-content;color:var(--color-orange);align-items:center;font-weight:700;display:flex}.pages-list[data-v-26139bb7]{gap:var(--gap-xs);flex-direction:column;display:flex}.pages-list .btn[data-v-26139bb7]{background:inherit;width:100%;color:var(--color-primary);box-shadow:none;font-size:100%;font-weight:400;transition:all .1s ease-in-out}.pages-list .btn.router-link-exact-active[data-v-26139bb7]{box-shadow:var(--shadow-inset-lg);background:var(--color-button-bg);color:var(--color-contrast)}.pages-list .btn[data-v-26139bb7]:hover{background-color:var(--color-button-bg);color:var(--color-contrast);box-shadow:var(--shadow-inset-lg);text-decoration:none}.pages-list .btn svg[data-v-26139bb7]{width:1.3rem;height:1.3rem}.instance-nav[data-v-26139bb7]{flex-direction:row;justify-content:left;align-items:flex-start;gap:.5rem;width:100%;height:min-content;padding:1rem;display:flex}.instance-button[data-v-26139bb7]{width:fit-content}.actions[data-v-26139bb7]{flex-direction:column;justify-content:flex-start;gap:.5rem;display:flex}.content[data-v-26139bb7]{flex-direction:column;width:calc(100% - 20rem);margin:0 1rem .5rem 20rem;display:flex;overflow:auto}.stats[data-v-26139bb7]{gap:var(--gap-md);flex-flow:column wrap;grid-area:stats;display:flex}.stats .stat[data-v-26139bb7]{align-items:center;gap:var(--gap-xs);--stat-strong-size:1.25rem;flex-direction:row;width:fit-content;display:flex}.stats .stat strong[data-v-26139bb7]{font-size:var(--stat-strong-size)}.stats .stat p[data-v-26139bb7]{margin:0}.stats .stat svg[data-v-26139bb7]{height:var(--stat-strong-size);width:var(--stat-strong-size)}.stats .date[data-v-26139bb7]{margin-top:auto}@media screen and (width<=750px){.stats[data-v-26139bb7]{-moz-column-gap:var(--gap-md);column-gap:var(--gap-md);margin-top:var(--gap-xs);flex-direction:row}}@media screen and (width<=600px){.stats[data-v-26139bb7]{margin-top:0}.stats .stat-label[data-v-26139bb7]{display:none}}.text-input[data-v-a5cf730c]{width:100%}.manage[data-v-a5cf730c]{gap:.5rem;display:flex}.table[data-v-a5cf730c]{border-radius:var(--radius-lg);border:2px solid var(--color-bg);margin-block-start:0}.table-row[data-v-a5cf730c]{grid-template-columns:min-content 2fr 1fr 13.25rem}.table-row.show-options[data-v-a5cf730c]{grid-template-columns:min-content auto}.table-row.show-options .options[data-v-a5cf730c]{align-items:center;gap:var(--gap-md);flex-direction:row;display:flex}.static .table-row[data-v-a5cf730c]{grid-template-columns:4.25rem 1fr 1fr;grid-template-areas:"manage name version"}.static .name-cell[data-v-a5cf730c]{grid-area:name}.static .version[data-v-a5cf730c]{grid-area:version}.static .manage[data-v-a5cf730c]{grid-area:manage;justify-content:center}.table-cell[data-v-a5cf730c]{align-items:center}.card-row[data-v-a5cf730c]{align-items:center;gap:var(--gap-md);background-color:var(--color-raised-bg);justify-content:space-between;display:flex}.mod-card[data-v-a5cf730c]{gap:var(--gap-sm);white-space:nowrap;flex-flow:wrap;justify-content:flex-start;align-items:center;margin-bottom:.5rem;display:flex}.mod-card[data-v-a5cf730c] .dropdown-row .btn{height:2.5rem!important}.mod-card[data-v-a5cf730c] .btn{height:2.5rem}.mod-card .dropdown-input[data-v-a5cf730c]{flex-grow:1}.mod-card .dropdown-input .animated-dropdown[data-v-a5cf730c]{width:unset}.mod-card .dropdown-input .animated-dropdown[data-v-a5cf730c] .selected{border-radius:var(--radius-md)0 0 var(--radius-md)}.mod-card .dropdown-input .iconified-input[data-v-a5cf730c]{width:100%}.mod-card .dropdown-input .iconified-input input[data-v-a5cf730c]{flex-basis:unset}.mod-card .dropdown-input[data-v-a5cf730c] .animated-dropdown .render-down{border-radius:var(--radius-md)0 0 var(--radius-md)!important}.mod-card .dropdown-input[data-v-a5cf730c] .animated-dropdown .options-wrapper{width:unset;border-radius:var(--radius-md);margin-top:.25rem}.mod-card .dropdown-input[data-v-a5cf730c] .animated-dropdown .options{border-radius:var(--radius-md);border:1px solid var(--color)}.list-card[data-v-a5cf730c]{margin-top:.5rem}.text-combo[data-v-a5cf730c]{align-items:center;gap:.5rem;display:flex}.name-cell[data-v-a5cf730c]{padding-left:0}.name-cell .btn[data-v-a5cf730c]{margin-left:var(--gap-sm);min-width:unset}.dropdown[data-v-a5cf730c]{width:7rem!important}.sort[data-v-a5cf730c]{padding-left:.5rem}.second-row[data-v-a5cf730c]{align-items:flex-start;gap:var(--gap-sm);flex-wrap:wrap;display:flex}.second-row .chips[data-v-a5cf730c]{flex-grow:1}.modal-body[data-v-a5cf730c]{padding:var(--gap-lg);flex-direction:column;gap:1rem;display:flex}.modal-body .button-group[data-v-a5cf730c]{justify-content:flex-end;gap:.5rem;display:flex}.modal-body strong[data-v-a5cf730c]{color:var(--color-contrast)}.mod-content[data-v-a5cf730c]{align-items:center;gap:1rem;display:flex}.mod-content .mod-text[data-v-a5cf730c]{flex-direction:column;display:flex}.mod-content .title[data-v-a5cf730c]{color:var(--color-contrast);font-weight:bolder}.actions-cell[data-v-a5cf730c]{align-items:center;gap:.5rem;display:flex}.actions-cell .btn[data-v-a5cf730c]{height:unset;width:unset;padding:0}.actions-cell .btn.trash[data-v-a5cf730c]{color:var(--color-red)}.actions-cell .btn.update[data-v-a5cf730c]{color:var(--color-green)}.actions-cell .btn.share[data-v-a5cf730c]{color:var(--color-blue)}.more-box[data-v-a5cf730c]{background-color:var(--color-bg);padding:var(--gap-lg);display:flex}.more-box .options[data-v-a5cf730c]{gap:var(--gap-md);flex-flow:wrap;flex-grow:1;display:flex}.btn.transparent[data-v-a5cf730c]{height:unset;width:unset;color:var(--color-base);gap:var(--gap-xs);white-space:nowrap;padding:0}.btn.transparent svg[data-v-a5cf730c]{transition:transform .2s ease-in-out;margin-right:0!important}.btn.transparent svg.open[data-v-a5cf730c]{transform:rotate(90deg)}.btn.transparent svg.down[data-v-a5cf730c]{transform:rotate(180deg)}.empty-prompt[data-v-a5cf730c]{justify-content:center;align-items:center;gap:var(--gap-md);flex-direction:column;width:100%;height:100%;margin:auto;display:flex}.empty-prompt .empty-icon svg[data-v-a5cf730c]{width:10rem;height:10rem;color:var(--color-contrast)}.empty-prompt h3[data-v-a5cf730c],.empty-prompt p[data-v-a5cf730c]{margin:0}.select-checkbox button.checkbox{border:none;margin:0}.search-input{background-color:var(--color-raised-bg);min-height:2.25rem}.top-box{background-image:radial-gradient(50% 100% at 50% 100%,var(--color-brand-highlight)10%,#fff0 100%)}.top-box-divider{background-image:linear-gradient(90deg,#fff0 0,var(--color-brand)50%,#fff0 100%);opacity:.8;width:100%;height:1px}.vue-recycle-scroller{position:relative}.vue-recycle-scroller.direction-vertical:not(.page-mode){overflow-y:auto}.vue-recycle-scroller.direction-horizontal:not(.page-mode){overflow-x:auto}.vue-recycle-scroller.direction-horizontal{display:-webkit-box;display:-ms-flexbox;display:flex}.vue-recycle-scroller__slot{-webkit-box-flex:1;-ms-flex:auto 0 0px;flex:none}.vue-recycle-scroller__item-wrapper{-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-box-flex:1;-ms-flex:1;flex:1;position:relative;overflow:hidden}.vue-recycle-scroller.ready .vue-recycle-scroller__item-view{will-change:transform;position:absolute;top:0;left:0}.vue-recycle-scroller.direction-vertical .vue-recycle-scroller__item-wrapper{width:100%}.vue-recycle-scroller.direction-horizontal .vue-recycle-scroller__item-wrapper{height:100%}.vue-recycle-scroller.ready.direction-vertical .vue-recycle-scroller__item-view{width:100%}.vue-recycle-scroller.ready.direction-horizontal .vue-recycle-scroller__item-view{height:100%}.log-card[data-v-c4293fdc]{flex-direction:column;gap:1rem;height:100vh;display:flex}.button-row[data-v-c4293fdc]{flex-direction:row;justify-content:space-between;gap:.5rem;display:flex}.button-group[data-v-c4293fdc]{flex-direction:row;gap:.5rem;display:flex}.log-text[data-v-c4293fdc]{width:100%;height:100%;font-family:var(--mono-font);background-color:var(--color-accent-contrast);color:var(--color-contrast);border-radius:var(--radius-lg);white-space:nowrap;white-space:normal;color-scheme:dark;padding:1.5rem;overflow:auto hidden}.filter-checkbox[data-v-c4293fdc]{margin-bottom:.3rem;font-size:1rem}.filter-checkbox svg[data-v-c4293fdc]{place-self:center;display:flex}.filter-group[data-v-c4293fdc]{flex-direction:row;gap:.5rem;padding:.6rem;display:flex;overflow:auto}.filter-group[data-v-c4293fdc]::-webkit-scrollbar-thumb,.filter-group[data-v-c4293fdc]::-webkit-scrollbar-track{border-radius:10px}[data-v-c4293fdc] .vue-recycle-scroller__item-wrapper{overflow:visible}[data-v-c4293fdc] .vue-recycle-scroller::-webkit-scrollbar-corner{background-color:var(--color-bg);border-radius:0 0 10px}.scroller[data-v-c4293fdc]{height:100%}.user[data-v-c4293fdc]{align-items:center;height:32%;padding:0 12px;display:flex}.progress-bar[data-v-038d689b]{background-color:var(--color-button-bg);border-radius:var(--radius-lg);width:100%;height:.5rem;overflow:hidden}.progress-bar__fill[data-v-038d689b]{background-color:var(--color-brand);height:100%;transition:width .3s}.modal-body[data-v-e11c7cf7]{gap:var(--gap-md);margin-top:var(--gap-lg);flex-direction:column;display:flex}.input-label[data-v-e11c7cf7]{color:var(--color-contrast);margin-bottom:.5rem;font-size:1rem;font-weight:bolder}.text-input[data-v-e11c7cf7]{width:20rem}.image-upload[data-v-e11c7cf7]{gap:1rem;display:flex}.image-input[data-v-e11c7cf7]{flex-direction:column;justify-content:center;gap:.5rem;display:flex}.warning[data-v-e11c7cf7]{font-style:italic}.versions[data-v-e11c7cf7]{flex-direction:row;gap:1rem;display:flex}[data-v-e11c7cf7] button.checkbox{border:none}.selector[data-v-e11c7cf7]{max-width:20rem}.labeled-divider[data-v-e11c7cf7]{text-align:center}.labeled-divider[data-v-e11c7cf7]:after{background-color:var(--color-raised-bg);content:"Or";color:var(--color-base);padding:var(--gap-sm);position:relative;top:-.5rem}.info[data-v-e11c7cf7]{flex-direction:row;align-items:center;gap:.5rem;display:flex}.modal-header[data-v-e11c7cf7]{flex-direction:row;justify-content:space-between;align-items:center;padding-bottom:0;display:flex}.path-selection[data-v-e11c7cf7]{padding:var(--gap-xl);background-color:var(--color-bg);border-radius:var(--radius-lg);gap:var(--gap-md);flex-direction:column;display:flex}.path-selection h3[data-v-e11c7cf7]{margin:0}.path-selection .path-input[data-v-e11c7cf7]{align-items:center;gap:var(--gap-sm);flex-direction:row;width:100%;display:flex}.path-selection .path-input .iconified-input[data-v-e11c7cf7]{flex-grow:1}.path-selection .path-input .iconified-input[data-v-e11c7cf7] input{flex-basis:auto;width:100%}.table[data-v-e11c7cf7]{border:1px solid var(--color-bg)}.table-row[data-v-e11c7cf7]{grid-template-columns:min-content auto}.table-content[data-v-e11c7cf7]{height:calc(90px + 10rem);max-height:calc(90px + 10rem);overflow-y:auto}.select-checkbox button.checkbox[data-v-e11c7cf7]{border:none}.button-row[data-v-e11c7cf7]{justify-content:space-between;align-items:center;gap:var(--gap-md);flex-direction:row;display:flex}.button-row .transparent[data-v-e11c7cf7]{padding:var(--gap-sm)0}.empty[data-v-e11c7cf7]{color:var(--color-contrast);justify-content:center;align-items:center;font-size:1.5rem;font-weight:bolder;display:flex}.card-divider[data-v-e11c7cf7]{margin:var(--gap-md)var(--gap-lg)0 var(--gap-lg)}.no-instance[data-v-1de8f9c3]{justify-content:center;align-items:center;gap:var(--gap-md);flex-direction:column;height:100%;display:flex}.no-instance h3[data-v-1de8f9c3],.no-instance p[data-v-1de8f9c3]{margin:0}.no-instance .icon svg[data-v-1de8f9c3]{width:10rem;height:10rem}.row[data-v-465c8d75]{flex-direction:column;align-items:flex-start;width:100%;display:flex}.row .divider[data-v-465c8d75]{justify-content:space-between;align-items:center;gap:1rem;width:100%;margin-bottom:1rem;display:flex}.row .divider p[data-v-465c8d75]{white-space:nowrap;color:var(--color-contrast);margin:0;font-size:1rem}.row .divider hr[data-v-465c8d75]{background-color:var(--color-gray);border:none;width:100%;height:1px}.header[data-v-465c8d75]{justify-content:space-between;gap:1rem;align-items:inherit;flex-flow:wrap;width:calc(100% - 2rem);padding:1rem;display:flex;margin:1rem 1rem 0!important}.header .iconified-input[data-v-465c8d75]{flex-grow:1}.header .iconified-input input[data-v-465c8d75]{min-width:100%}.header .sort-dropdown[data-v-465c8d75]{width:10rem}.header .filter-dropdown[data-v-465c8d75]{width:15rem}.header .group-dropdown[data-v-465c8d75]{width:10rem}.header .labeled_button[data-v-465c8d75]{white-space:nowrap;flex-direction:row;align-items:center;gap:.5rem;display:flex}.instances[data-v-465c8d75]{scroll-behavior:smooth;grid-template-columns:repeat(auto-fill,minmax(16rem,1fr));gap:.75rem;width:100%;margin-right:auto;display:grid;overflow-y:auto}.selected[data-v-189ee336]{background:var(--color-brand-highlight);border-radius:var(--radius-lg);color:var(--color-contrast);gap:1rem}.logged-out[data-v-189ee336]{background:var(--color-bg);border-radius:var(--radius-lg);gap:1rem}.account[data-v-189ee336]{text-align:left;align-items:center;width:max-content;padding:.5rem 1rem;display:flex}.account h4[data-v-189ee336],.account p[data-v-189ee336]{margin:0}.account-card[data-v-189ee336]{z-index:11;border:1px solid var(--color-button-bg);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;flex-direction:column;gap:.5rem;width:max-content;max-height:98vh;margin-top:.5rem;padding:1rem;display:flex;position:fixed;right:2rem;overflow-y:auto}.account-card[data-v-189ee336]::-webkit-scrollbar-track{border-top-right-radius:1rem;border-bottom-right-radius:1rem}.account-card[data-v-189ee336]::-webkit-scrollbar{border-top-right-radius:1rem;border-bottom-right-radius:1rem}.account-card.hidden[data-v-189ee336]{display:none}.account-card.expanded[data-v-189ee336]{left:13.5rem}.account-card.isolated[data-v-189ee336]{position:relative;top:0;left:0}.accounts-title[data-v-189ee336]{font-size:1.2rem;font-weight:bolder}.account-group[data-v-189ee336]{flex-direction:column;gap:.5rem;width:100%;display:flex}.option[data-v-189ee336]{background:var(--color-raised-bg);width:calc(100% - 2.25rem);color:var(--color-base);box-shadow:none}.option img[data-v-189ee336]{margin-right:.5rem}.icon[data-v-189ee336]{--size:1.5rem!important}.account-row[data-v-189ee336]{vertical-align:center;flex-direction:row;justify-content:space-between;gap:.5rem;padding-right:1rem;display:flex}.fade-enter-active[data-v-189ee336],.fade-leave-active[data-v-189ee336]{transition:opacity .25s,translate .25s,scale .25s}.fade-enter-from[data-v-189ee336],.fade-leave-to[data-v-189ee336]{opacity:0;translate:0 -2rem;scale:.9}.avatar-button[data-v-189ee336]{color:var(--color-base);background-color:var(--color-button-bg);border-radius:var(--radius-md);text-align:left;align-items:center;gap:.5rem;width:100%;padding:.5rem .75rem;display:flex}.avatar-button.expanded[data-v-189ee336]{border:1px solid var(--color-button-bg);padding:1rem}.avatar-text[data-v-189ee336]{flex-direction:column;margin:auto 0 auto .25rem;display:flex}.text[data-v-189ee336]{white-space:nowrap;text-overflow:ellipsis;width:6rem;overflow:hidden}.accounts-text[data-v-189ee336]{align-items:center;gap:.25rem;margin:0;display:flex}.qr-code[data-v-189ee336]{border-radius:var(--radius-md);background-color:#fff!important}.modal-body[data-v-189ee336]{gap:var(--gap-lg);padding:var(--gap-xl);flex-direction:row;align-items:center;display:flex}.modal-body .modal-text[data-v-189ee336]{gap:var(--gap-sm);flex-direction:column;width:100%;display:flex}.modal-body .modal-text h2[data-v-189ee336],.modal-body .modal-text p[data-v-189ee336]{margin:0}.modal-body .modal-text .code-text[data-v-189ee336]{gap:var(--gap-xs);flex-direction:row;align-items:center;display:flex}.modal-body .modal-text .code-text .code[data-v-189ee336]{background-color:var(--color-bg);border-radius:var(--radius-md);border:solid 1px var(--color-button-bg);font-family:var(--mono-font);letter-spacing:var(--gap-md);color:var(--color-contrast);padding:var(--gap-sm)0 var(--gap-sm)var(--gap-md);font-size:2rem;font-weight:700}.modal-body .modal-text .code-text .btn[data-v-189ee336]{width:2.5rem;height:2.5rem}.button-row[data-v-189ee336]{flex-direction:row;display:flex}.modal[data-v-189ee336]{position:absolute}.code[data-v-189ee336]{color:var(--color-brand);padding:.05rem .1rem;display:flex}.code .card[data-v-189ee336]{background:var(--color-base);color:var(--color-contrast);padding:.5rem 1rem}.action-groups[data-v-7095a984]{align-items:center;gap:var(--gap-md);flex-direction:row;display:flex}.arrow[data-v-7095a984]{align-items:center;transition:transform .2s ease-in-out;display:flex}.arrow.rotate[data-v-7095a984]{transform:rotate(180deg)}.status[data-v-7095a984]{border-radius:var(--radius-md);border:1px solid var(--color-button-bg);padding:var(--gap-sm)var(--gap-lg);flex-direction:row;align-items:center;gap:.5rem;display:flex}.running-text[data-v-7095a984]{gap:var(--gap-xs);white-space:nowrap;-webkit-user-select:none;-moz-user-select:none;user-select:none;flex-direction:row;display:flex;overflow:hidden}.running-text.clickable[data-v-7095a984]:hover{cursor:pointer}.circle[data-v-7095a984]{border-radius:50%;width:.5rem;height:.5rem;margin-right:.25rem;display:inline-block}.circle.running[data-v-7095a984]{background-color:var(--color-brand)}.circle.stopped[data-v-7095a984]{background-color:var(--color-base)}.icon-button[data-v-7095a984]{box-shadow:none;background-color:#0000;width:1.25rem!important;height:1.25rem!important}.icon-button svg[data-v-7095a984]{min-width:1.25rem}.icon-button.stop[data-v-7095a984]{color:var(--color-red)}.info-card[data-v-7095a984]{z-index:9;background-color:var(--color-raised-bg);width:20rem;box-shadow:var(--shadow-raised);border:1px solid var(--color-button-bg);flex-direction:column;gap:1rem;transition:all .2s ease-in-out;display:flex;position:absolute;top:3.5rem;right:.5rem;overflow:auto}.info-card.hidden[data-v-7095a984]{transform:translateY(-100%)}.loading-option[data-v-7095a984]{flex-direction:row;align-items:center;gap:.5rem;margin:0;padding:0;display:flex}.loading-option[data-v-7095a984] :hover{background-color:var(--color-raised-bg-hover)}.loading-text[data-v-7095a984]{flex-direction:column;margin:0;padding:0;display:flex}.loading-text .row[data-v-7095a984]{flex-direction:row;align-items:center;gap:.5rem;display:flex}.loading-icon[data-v-7095a984]{width:2.25rem;height:2.25rem;display:block}.loading-icon[data-v-7095a984] svg{width:2.25rem;height:2.25rem;left:1rem}.download-enter-active[data-v-7095a984],.download-leave-active[data-v-7095a984]{transition:opacity .3s}.download-enter-from[data-v-7095a984],.download-leave-to[data-v-7095a984]{opacity:0}.progress-bar[data-v-7095a984]{width:100%}.info-text[data-v-7095a984]{flex-direction:column;align-items:flex-start;gap:.5rem;margin:0;padding:0;display:flex}.info-title[data-v-7095a984]{margin:0}.profile-button[data-v-7095a984]{align-items:center;gap:var(--gap-sm);background-color:var(--color-raised-bg);width:100%;box-shadow:none;flex-direction:row;display:flex}.profile-button .text[data-v-7095a984]{margin-right:auto}.profile-card[data-v-7095a984]{z-index:9;background-color:var(--color-raised-bg);box-shadow:var(--shadow-raised);border:1px solid var(--color-button-bg);padding:var(--gap-md);flex-direction:column;transition:all .2s ease-in-out;display:flex;position:absolute;top:3.5rem;right:.5rem;overflow:auto}.profile-card.hidden[data-v-7095a984]{transform:translateY(-100%)}.link[data-v-7095a984]{align-items:center;gap:var(--gap-sm);color:var(--color-text);flex-direction:row;margin:0;text-decoration:none;display:flex}.splash-screen[data-v-362e4671]{opacity:1;transition:opacity .25s ease-in-out}.splash-screen.fade-out[data-v-362e4671]{opacity:0}.app-buttons[data-v-362e4671]{z-index:9999;display:flex;position:absolute;right:0}.app-logo-wrapper[data-v-362e4671]{z-index:9998;flex-direction:column;justify-content:center;align-items:center;gap:1rem;width:100%;height:100vh;display:flex;position:absolute}.app-logo[data-v-362e4671]{width:fit-content;height:2.25rem}.loading-bar[data-v-362e4671]{max-width:20rem}.gradient-bg[data-v-362e4671]{z-index:9997;background:linear-gradient(#42835c46,#11232b80 97.29%),linear-gradient(#16181ca3,#16181ca3);width:100vw;height:100vh;position:absolute}.cube-bg[data-v-362e4671]{opacity:.8;z-index:9996;background:#16181c url(/assets/cube-FjxyQgGa.png) 50%/contain no-repeat;width:180vw;height:180vh;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.base-bg[data-v-362e4671]{background:var(--color-bg);z-index:9995;width:100%;height:100%;position:absolute;top:0;left:0}.light-mode{--color-orange-bg:#ffa34733}.dark-mode,.oled-mode{--color-orange-bg:#e0832533}.cta-button[data-v-90ead110]{justify-content:center;align-items:center;gap:.5rem;padding:.5rem;display:flex}.warning-banner[data-v-90ead110]{padding:var(--gap-lg);background-color:var(--color-orange-bg);border:2px solid var(--color-orange);border-radius:var(--radius-md);flex-direction:column;gap:.5rem;margin-bottom:1rem;display:flex}.warning-banner__title[data-v-90ead110]{align-items:center;gap:.5rem;font-weight:700;display:flex}.warning-banner__title svg[data-v-90ead110]{color:var(--color-orange);width:1.5rem;height:1.5rem}.modal-body[data-v-90ead110]{gap:var(--gap-md);flex-direction:column;display:flex}.markdown-body[data-v-90ead110]{overflow:auto}.loading-indicator-bar[data-v-65cd5b29]:before{content:"";width:var(--_width);background-image:radial-gradient(80% 100% at 20% 0,var(--color-brand)0,transparent 80%);opacity:calc(var(--_opacity)*.1);z-index:5;transition:width .1s ease-in-out,opacity .1s ease-out;position:absolute;inset:0}.modal-body[data-v-4efe8246]{justify-content:center;align-items:center;gap:var(--gap-md);flex-direction:column;display:flex}.button-row[data-v-4efe8246]{justify-content:space-between;align-items:center;gap:var(--gap-md);flex-direction:row;width:100%;display:flex}.button-group[data-v-4efe8246]{gap:var(--gap-sm);flex-direction:row;display:flex}.project-card[data-v-4efe8246]{background-color:var(--color-bg);width:100%}.project-card[data-v-4efe8246] .badge{border:1px solid var(--color-raised-bg);background-color:var(--color-accent-contrast)}.creation-card[data-v-f4b19ae1]{background-color:var(--color-bg);flex-direction:column;gap:1rem;margin:0;display:flex}.creation-container[data-v-f4b19ae1]{flex-direction:row;gap:1rem;display:flex}.creation-icon[data-v-f4b19ae1]{flex-direction:row;flex-grow:1;align-items:center;gap:1rem;display:flex}.creation-icon .creation-icon__description[data-v-f4b19ae1]{flex-direction:column;gap:.5rem;display:flex}.creation-input[data-v-f4b19ae1]{width:100%}.no-wrap[data-v-f4b19ae1]{white-space:nowrap}.creation-dropdown[data-v-f4b19ae1]{flex-direction:column;gap:.5rem;display:flex;width:min-content!important}.creation-settings[data-v-f4b19ae1]{flex-direction:column;justify-content:center;gap:.5rem;width:100%;margin-left:.5rem;display:flex}.modal-body[data-v-f4b19ae1]{flex-direction:column;gap:1rem;min-width:350px;display:flex}.profiles[data-v-f4b19ae1]{max-height:12rem;overflow-y:auto}.profiles.hide-creation[data-v-f4b19ae1]{max-height:21rem}.option[data-v-f4b19ae1]{background:var(--color-raised-bg);width:100%;color:var(--color-base);box-shadow:none;flex-direction:row;justify-content:space-between;align-items:center;gap:.5rem;display:flex}.option img[data-v-f4b19ae1]{margin-right:.5rem}.option .name[data-v-f4b19ae1]{flex-direction:column;justify-content:center;display:flex}.option .profile-button[data-v-f4b19ae1]{text-align:left;align-content:start;padding:.5rem}.profile-image[data-v-f4b19ae1]{--size:2rem!important}.data[data-v-bd65ebe5]{text-transform:capitalize}table[data-v-bd65ebe5]{border-radius:var(--radius-lg);border-collapse:collapse;width:100%;box-shadow:0 0 0 1px var(--color-button-bg)}th[data-v-bd65ebe5]{text-align:left;background-color:var(--color-bg);border-bottom:1px solid var(--color-button-bg);padding:1rem;overflow:hidden}th[data-v-bd65ebe5]:first-child{border-top-left-radius:var(--radius-lg);border-right:1px solid var(--color-button-bg)}th[data-v-bd65ebe5]:last-child{border-top-right-radius:var(--radius-lg)}td[data-v-bd65ebe5]{padding:1rem}td[data-v-bd65ebe5]:first-child{border-right:1px solid var(--color-button-bg)}.button-group[data-v-bd65ebe5]{justify-content:flex-end;gap:1rem;display:flex}.modal-body[data-v-bd65ebe5]{flex-direction:column;gap:1rem;display:flex}.modal-body[data-v-bd65ebe5] .animated-dropdown .options{max-height:13.375rem}.modal-body[data-v-c93701e0]{flex-direction:column;gap:1rem;display:flex}.router-link-active svg[data-v-1148ee8d],.subpage-active svg[data-v-1148ee8d]{filter:drop-shadow(0 0 .5rem #000)}.router-link-active[data-v-1148ee8d]{background-color:var(--color-button-bg-selected);color:var(--color-button-text-selected)}.subpage-active[data-v-1148ee8d]{background-color:var(--color-button-bg);color:var(--color-contrast)}.light .dark-image[data-v-c6d474b9],.light-mode .dark-image[data-v-c6d474b9]{display:none}.light .light-image[data-v-c6d474b9],.light-mode .light-image[data-v-c6d474b9]{display:block}.window-controls[data-v-98234b02]{z-index:20;flex-direction:row;align-items:center;display:none}.window-controls .titlebar-button[data-v-98234b02]{cursor:pointer;color:var(--color-base);width:3rem;height:100%;box-shadow:none;background-color:#0000;justify-content:center;align-items:center;transition:all .1s ease-in-out;display:flex;position:relative}.window-controls .titlebar-button[data-v-98234b02]:last-child{width:3.75rem;padding-right:.75rem}.window-controls .titlebar-button svg[data-v-98234b02]{width:1.25rem;height:1.25rem}.window-controls .titlebar-button[data-v-98234b02]:before{content:"";aspect-ratio:1;z-index:-1;background-color:#0000;border-radius:999999px;width:3rem;height:3rem;margin-block:auto;transition:all .2s ease-in-out;position:absolute;scale:.9}.window-controls .titlebar-button.close[data-v-98234b02]:active,.window-controls .titlebar-button.close[data-v-98234b02]:hover{color:var(--color-accent-contrast)}.window-controls .titlebar-button.close[data-v-98234b02]:active:before,.window-controls .titlebar-button.close[data-v-98234b02]:hover:before{background-color:var(--color-red)}.window-controls .titlebar-button[data-v-98234b02]:active,.window-controls .titlebar-button[data-v-98234b02]:hover{color:var(--color-contrast)}.window-controls .titlebar-button[data-v-98234b02]:active:before,.window-controls .titlebar-button[data-v-98234b02]:hover:before{background-color:var(--color-button-bg);scale:1}.app-contents[data-v-98234b02],.app-grid-layout[data-v-98234b02]{--top-bar-height:3rem;--left-bar-width:4rem;--right-bar-width:300px}.app-grid-layout[data-v-98234b02]{background-color:var(--color-raised-bg);grid-template:"status status""nav dummy"1fr/auto 1fr;height:100vh;display:grid;position:relative}.app-grid-navbar[data-v-98234b02]{grid-area:nav}.app-grid-statusbar[data-v-98234b02]{grid-area:status}[data-tauri-drag-region][data-v-98234b02]{-webkit-app-region:drag}[data-tauri-drag-region-exclude][data-v-98234b02]{-webkit-app-region:no-drag}.app-contents[data-v-98234b02]{z-index:1;left:var(--left-bar-width);top:var(--top-bar-height);height:calc(100vh - var(--top-bar-height));background-color:var(--color-bg);border-top-left-radius:var(--radius-xl);grid-template-columns:1fr 0;display:grid;position:absolute;bottom:0;right:0}.app-contents.sidebar-enabled[data-v-98234b02]{grid-template-columns:1fr 300px}.loading-indicator-container[data-v-98234b02]{border-top-left-radius:var(--radius-xl);overflow:hidden}.app-sidebar[data-v-98234b02]{width:300px;height:calc(100vh - var(--top-bar-height));background:var(--brand-gradient-bg);--color-button-bg:var(--brand-gradient-button);--color-button-bg-hover:var(--brand-gradient-border);--color-divider:var(--brand-gradient-border);--color-divider-dark:var(--brand-gradient-border);position:relative;overflow:visible}.app-sidebar[data-v-98234b02]:after{content:"";background:var(--brand-gradient-fade-out-color);pointer-events:none;height:5rem;position:absolute;bottom:250px;left:0;right:0}.app-sidebar.has-plus[data-v-98234b02]:after{display:none}.app-sidebar[data-v-98234b02]:before{content:"";pointer-events:none;width:2rem;position:absolute;top:0;bottom:0;left:-2rem;box-shadow:inset -15px 0 15px -15px #0003}.app-viewport[data-v-98234b02]{flex-grow:1;height:100%;overflow:hidden auto}.app-contents[data-v-98234b02]:before{z-index:1;content:"";left:var(--left-bar-width);top:var(--top-bar-height);right:calc(-1*var(--left-bar-width));bottom:calc(-1*var(--left-bar-width));border-radius:var(--radius-xl);pointer-events:none;position:fixed;box-shadow:inset 1px 1px 15px #0003,inset 1px 1px 1px #ffffff3b}.sidebar-teleport-content[data-v-98234b02]{display:contents}.sidebar-default-content[data-v-98234b02]{display:none}.sidebar-teleport-content:empty+.sidebar-default-content.sidebar-enabled[data-v-98234b02]{display:contents}.mac .app-grid-statusbar{padding-left:5rem}.windows .fake-appbar{height:2.5rem!important}.windows .window-controls{display:flex!important}.windows .info-card,.windows .profile-card{right:8rem}fieldset[disabled] .multiselect{pointer-events:none}.multiselect__spinner{background:#fff;width:40px;height:38px;display:block;position:absolute;top:1px;right:1px}.multiselect__spinner:after,.multiselect__spinner:before{content:"";border:2px solid #0000;border-top-color:#41b883;border-radius:100%;width:16px;height:16px;margin:-8px 0 0 -8px;position:absolute;top:50%;left:50%;box-shadow:0 0 0 1px #0000}.multiselect__spinner:before{animation:2.4s cubic-bezier(.41,.26,.2,.62) infinite spinning}.multiselect__spinner:after{animation:2.4s cubic-bezier(.51,.09,.21,.8) infinite spinning}.multiselect__loading-enter-active,.multiselect__loading-leave-active{opacity:1;transition:opacity .4s ease-in-out}.multiselect__loading-enter,.multiselect__loading-leave-active{opacity:0}.multiselect,.multiselect__input,.multiselect__single{touch-action:manipulation;font-family:inherit;font-size:16px}.multiselect{box-sizing:content-box;text-align:left;color:#35495e;width:100%;min-height:40px;display:block;position:relative}.multiselect *{box-sizing:border-box}.multiselect:focus{outline:0}.multiselect--disabled{pointer-events:none;opacity:.6;background:#ededed}.multiselect--active{z-index:50}.multiselect--active:not(.multiselect--above) .multiselect__current,.multiselect--active:not(.multiselect--above) .multiselect__input,.multiselect--active:not(.multiselect--above) .multiselect__tags{border-bottom-right-radius:0;border-bottom-left-radius:0}.multiselect--active .multiselect__select{transform:rotate(180deg)}.multiselect--above.multiselect--active .multiselect__current,.multiselect--above.multiselect--active .multiselect__input,.multiselect--above.multiselect--active .multiselect__tags{border-top-left-radius:0;border-top-right-radius:0}.multiselect__input,.multiselect__single{box-sizing:border-box;vertical-align:top;background:#fff;border:none;border-radius:5px;width:100%;min-height:20px;margin-bottom:8px;padding:0 0 0 5px;line-height:20px;transition:border .1s;display:inline-block;position:relative}.multiselect__input::-moz-placeholder{color:#35495e}.multiselect__input::placeholder{color:#35495e}.multiselect__tag~.multiselect__input,.multiselect__tag~.multiselect__single{width:auto}.multiselect__input:hover,.multiselect__single:hover{border-color:#cfcfcf}.multiselect__input:focus,.multiselect__single:focus{border-color:#a8a8a8;outline:0}.multiselect__single{margin-bottom:8px;padding-left:5px}.multiselect__tags-wrap{display:inline}.multiselect__tags{background:#fff;border:1px solid #e8e8e8;border-radius:5px;min-height:40px;padding:8px 40px 0 8px;font-size:14px;display:block}.multiselect__tag{color:#fff;white-space:nowrap;text-overflow:ellipsis;background:#41b883;border-radius:5px;max-width:100%;margin-bottom:5px;margin-right:10px;padding:4px 26px 4px 10px;line-height:1;display:inline-block;position:relative;overflow:hidden}.multiselect__tag-icon{cursor:pointer;font-weight:700;font-style:initial;text-align:center;border-radius:5px;width:22px;margin-left:7px;line-height:22px;transition:all .2s;position:absolute;top:0;bottom:0;right:0}.multiselect__tag-icon:after{content:"×";color:#266d4d;font-size:14px}.multiselect__tag-icon:focus:after,.multiselect__tag-icon:hover:after{color:#fff}.multiselect__current{box-sizing:border-box;white-space:nowrap;cursor:pointer;border:1px solid #e8e8e8;border-radius:5px;min-height:40px;margin:0;padding:8px 30px 0 12px;line-height:16px;text-decoration:none;display:block;overflow:hidden}.multiselect__select{box-sizing:border-box;text-align:center;cursor:pointer;width:40px;height:38px;margin:0;padding:4px 8px;line-height:16px;text-decoration:none;transition:transform .2s;display:block;position:absolute;top:1px;right:1px}.multiselect__select:before{color:#999;content:"";border:5px solid #0000;border-top-color:#999;border-bottom-width:0;margin-top:4px;position:relative;top:65%;right:0}.multiselect__placeholder{color:#adadad;margin-bottom:10px;padding-top:2px;display:inline-block}.multiselect--active .multiselect__placeholder{display:none}.multiselect__content-wrapper{z-index:50;-webkit-overflow-scrolling:touch;background:#fff;border:1px solid #e8e8e8;border-top:none;border-bottom-right-radius:5px;border-bottom-left-radius:5px;width:100%;max-height:240px;display:block;position:absolute;overflow:auto}.multiselect__content{vertical-align:top;min-width:100%;margin:0;padding:0;list-style:none;display:inline-block}.multiselect--above .multiselect__content-wrapper{border-top:1px solid #e8e8e8;border-bottom:none;border-radius:5px 5px 0 0;bottom:100%}.multiselect__content::-webkit-scrollbar{display:none}.multiselect__element{display:block}.multiselect__option{text-transform:none;vertical-align:middle;cursor:pointer;white-space:nowrap;min-height:40px;padding:12px;line-height:16px;text-decoration:none;display:block;position:relative}.multiselect__option:after{padding-left:20px;padding-right:12px;font-size:13px;line-height:40px;position:absolute;top:0;right:0}.multiselect__option--highlight{color:#fff;background:#41b883;outline:0}.multiselect__option--highlight:after{content:attr(data-select);color:#fff;background:#41b883}.multiselect__option--selected{color:#35495e;background:#f3f3f3;font-weight:700}.multiselect__option--selected:after{content:attr(data-selected);color:silver;background:inherit}.multiselect__option--selected.multiselect__option--highlight{color:#fff;background:#ff6a6a}.multiselect__option--selected.multiselect__option--highlight:after{content:attr(data-deselect);color:#fff;background:#ff6a6a}.multiselect--disabled .multiselect__current,.multiselect--disabled .multiselect__select{color:#a6a6a6;background:#ededed}.multiselect__option--disabled{cursor:text;pointer-events:none;color:#a6a6a6!important;background:#ededed!important}.multiselect__option--group{color:#35495e;background:#ededed}.multiselect__option--group.multiselect__option--highlight{color:#fff;background:#35495e}.multiselect__option--group.multiselect__option--highlight:after{background:#35495e}.multiselect__option--disabled.multiselect__option--highlight{background:#dedede}.multiselect__option--group-selected.multiselect__option--highlight{color:#fff;background:#ff6a6a}.multiselect__option--group-selected.multiselect__option--highlight:after{content:attr(data-deselect);color:#fff;background:#ff6a6a}.multiselect-enter-active,.multiselect-leave-active{transition:all .15s}.multiselect-enter,.multiselect-leave-active{opacity:0}.multiselect__strong{vertical-align:top;margin-bottom:8px;line-height:20px;display:inline-block}[dir=rtl] .multiselect{text-align:right}[dir=rtl] .multiselect__select{left:1px;right:auto}[dir=rtl] .multiselect__tags{padding:8px 8px 0 40px}[dir=rtl] .multiselect__content{text-align:right}[dir=rtl] .multiselect__option:after{left:0;right:auto}[dir=rtl] .multiselect__clear{left:12px;right:auto}[dir=rtl] .multiselect__spinner{left:1px;right:auto}@keyframes spinning{0%{transform:rotate(0)}to{transform:rotate(2turn)}}.resize-observer[data-v-b329ee4c]{z-index:-1;pointer-events:none;opacity:0;background-color:#0000;border:none;width:100%;height:100%;display:block;position:absolute;top:0;left:0;overflow:hidden}.resize-observer[data-v-b329ee4c] object{pointer-events:none;z-index:-1;width:100%;height:100%;display:block;position:absolute;top:0;left:0;overflow:hidden}.v-popper__popper{z-index:10000;outline:0;top:0;left:0}.v-popper__popper.v-popper__popper--hidden{visibility:hidden;opacity:0;pointer-events:none;transition:opacity .15s,visibility .15s}.v-popper__popper.v-popper__popper--shown{visibility:visible;opacity:1;transition:opacity .15s}.v-popper__popper.v-popper__popper--skip-transition,.v-popper__popper.v-popper__popper--skip-transition>.v-popper__wrapper{transition:none!important}.v-popper__backdrop{width:100%;height:100%;display:none;position:absolute;top:0;left:0}.v-popper__inner{box-sizing:border-box;position:relative;overflow-y:auto}.v-popper__inner>div{z-index:1;max-width:inherit;max-height:inherit;position:relative}.v-popper__arrow-container{width:10px;height:10px;position:absolute}.v-popper__popper--arrow-overflow .v-popper__arrow-container,.v-popper__popper--no-positioning .v-popper__arrow-container{display:none}.v-popper__arrow-inner,.v-popper__arrow-outer{border-style:solid;width:0;height:0;position:absolute;top:0;left:0}.v-popper__arrow-inner{visibility:hidden;border-width:7px}.v-popper__arrow-outer{border-width:6px}.v-popper__popper[data-popper-placement^=bottom] .v-popper__arrow-inner,.v-popper__popper[data-popper-placement^=top] .v-popper__arrow-inner{left:-2px}.v-popper__popper[data-popper-placement^=bottom] .v-popper__arrow-outer,.v-popper__popper[data-popper-placement^=top] .v-popper__arrow-outer{left:-1px}.v-popper__popper[data-popper-placement^=top] .v-popper__arrow-inner,.v-popper__popper[data-popper-placement^=top] .v-popper__arrow-outer{border-bottom-width:0;border-bottom-color:#0000!important;border-left-color:#0000!important;border-right-color:#0000!important}.v-popper__popper[data-popper-placement^=top] .v-popper__arrow-inner{top:-2px}.v-popper__popper[data-popper-placement^=bottom] .v-popper__arrow-container{top:0}.v-popper__popper[data-popper-placement^=bottom] .v-popper__arrow-inner,.v-popper__popper[data-popper-placement^=bottom] .v-popper__arrow-outer{border-top-width:0;border-top-color:#0000!important;border-left-color:#0000!important;border-right-color:#0000!important}.v-popper__popper[data-popper-placement^=bottom] .v-popper__arrow-inner{top:-4px}.v-popper__popper[data-popper-placement^=bottom] .v-popper__arrow-outer{top:-6px}.v-popper__popper[data-popper-placement^=left] .v-popper__arrow-inner,.v-popper__popper[data-popper-placement^=right] .v-popper__arrow-inner{top:-2px}.v-popper__popper[data-popper-placement^=left] .v-popper__arrow-outer,.v-popper__popper[data-popper-placement^=right] .v-popper__arrow-outer{top:-1px}.v-popper__popper[data-popper-placement^=right] .v-popper__arrow-inner,.v-popper__popper[data-popper-placement^=right] .v-popper__arrow-outer{border-left-width:0;border-top-color:#0000!important;border-bottom-color:#0000!important;border-left-color:#0000!important}.v-popper__popper[data-popper-placement^=right] .v-popper__arrow-inner{left:-4px}.v-popper__popper[data-popper-placement^=right] .v-popper__arrow-outer{left:-6px}.v-popper__popper[data-popper-placement^=left] .v-popper__arrow-container{right:-10px}.v-popper__popper[data-popper-placement^=left] .v-popper__arrow-inner,.v-popper__popper[data-popper-placement^=left] .v-popper__arrow-outer{border-right-width:0;border-top-color:#0000!important;border-bottom-color:#0000!important;border-right-color:#0000!important}.v-popper__popper[data-popper-placement^=left] .v-popper__arrow-inner{left:-2px}.v-popper--theme-tooltip .v-popper__inner{color:#fff;background:#000c;border-radius:6px;padding:7px 12px 6px}.v-popper--theme-tooltip .v-popper__arrow-outer{border-color:#000c}.v-popper--theme-dropdown .v-popper__inner{color:#000;background:#fff;border:1px solid #ddd;border-radius:6px;box-shadow:0 6px 30px #0000001a}.v-popper--theme-dropdown .v-popper__arrow-inner{visibility:visible;border-color:#fff}.v-popper--theme-dropdown .v-popper__arrow-outer{border-color:#ddd}</style><body style=overflow:hidden><div id=app><div class="experimental-styles-within modal-container shown" data-v-163d50cf><div class="flex bg-bg-raised flex-col modal-body rounded-2xl" data-v-163d50cf><div class="items-center border-0 border-b-[1px] border-divider border-solid gap-12 grid grid-cols-[auto_min-content] max-w-full p-6"><div class="flex break-words gap-3 items-center min-w-0 text-wrap"><span class="font-extrabold text-contrast text-lg">{{title}}</span></div></div><div class="p-6 overflow-y-auto"><div class=modal-body><div class=markdown-body><p>{{message}}</div></div></div></div></div></div><script>window.close()</script>
+<!doctype html><html class=dark-mode lang=en><meta content="width=device-width,initial-scale=1" name=viewport><title>Sign In - Modrinth App</title><style>*,:after,:before,::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-scroll-snap-strictness:proximity;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:#3b82f680;--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000}.\!container{width:100%!important}.container{width:100%}@media (width>=640px){.\!container{max-width:640px!important}.container{max-width:640px}}@media (width>=768px){.\!container{max-width:768px!important}.container{max-width:768px}}@media (width>=1024px){.\!container{max-width:1024px!important}.container{max-width:1024px}}@media (width>=1280px){.\!container{max-width:1280px!important}.container{max-width:1280px}}@media (width>=1536px){.\!container{max-width:1536px!important}.container{max-width:1536px}}.pointer-events-none{pointer-events:none}.pointer-events-auto{pointer-events:auto}.visible{visibility:visible}.invisible{visibility:hidden}.collapse{visibility:collapse}.static{position:static}.\!fixed{position:fixed!important}.fixed{position:fixed}.absolute{position:absolute}.\!relative{position:relative!important}.relative{position:relative}.sticky{position:sticky}.inset-0{inset:0}.inset-\[calc\(-1rem-2px\)_-2rem\]{inset:calc(-1rem - 2px) -2rem}.-right-12{right:-3rem}.-top-12{top:-3rem}.-top-28{top:-7rem}.bottom-0{bottom:0}.bottom-1{bottom:.25rem}.bottom-\[10\%\]{bottom:10%}.bottom-\[18\%\]{bottom:18%}.bottom-\[250px\]{bottom:250px}.left-0{left:0}.left-1\/2{left:50%}.right-0{right:0}.right-2{right:.5rem}.right-8{right:2rem}.top-0{top:0}.top-0\.5{top:.125rem}.top-2{top:.5rem}.top-\[-4rem\]{top:-4rem}.top-\[18\%\]{top:18%}.top-\[3px\]{top:3px}.isolate{isolation:isolate}.-z-10{z-index:-10}.z-10{z-index:10}.z-50{z-index:50}.z-\[1\]{z-index:1}.col-span-2{grid-column:span 2/span 2}.col-span-3{grid-column:span 3/span 3}.col-span-full{grid-column:1/-1}.col-start-1{grid-column-start:1}.row-start-1{grid-row-start:1}.float-end{float:inline-end}.m-0{margin:0}.m-1{margin:.25rem}.m-2{margin:.5rem}.m-6{margin:1.5rem}.\!mx-2{margin-left:.5rem!important;margin-right:.5rem!important}.mx-1{margin-left:.25rem;margin-right:.25rem}.mx-2{margin-left:.5rem;margin-right:.5rem}.mx-3{margin-left:.75rem;margin-right:.75rem}.mx-auto{margin-left:auto;margin-right:auto}.my-0{margin-top:0;margin-bottom:0}.my-0\.5{margin-top:.125rem;margin-bottom:.125rem}.my-1{margin-top:.25rem;margin-bottom:.25rem}.my-2{margin-top:.5rem;margin-bottom:.5rem}.my-4{margin-top:1rem;margin-bottom:1rem}.my-auto{margin-top:auto;margin-bottom:auto}.mb-0{margin-bottom:0}.mb-0\.5{margin-bottom:.125rem}.mb-1{margin-bottom:.25rem}.mb-2{margin-bottom:.5rem}.mb-3{margin-bottom:.75rem}.mb-4{margin-bottom:1rem}.mb-5{margin-bottom:1.25rem}.ml-0{margin-left:0}.ml-0\.5{margin-left:.125rem}.ml-1{margin-left:.25rem}.ml-2{margin-left:.5rem}.ml-3{margin-left:.75rem}.ml-4{margin-left:1rem}.ml-8{margin-left:2rem}.ml-auto{margin-left:auto}.mr-1{margin-right:.25rem}.mr-3{margin-right:.75rem}.mt-0{margin-top:0}.mt-1{margin-top:.25rem}.mt-12{margin-top:3rem}.mt-2{margin-top:.5rem}.mt-3{margin-top:.75rem}.mt-4{margin-top:1rem}.mt-6{margin-top:1.5rem}.mt-9{margin-top:2.25rem}.mt-\[-1px\]{margin-top:-1px}.mt-auto{margin-top:auto}.mt-px{margin-top:1px}.line-clamp-1{-webkit-line-clamp:1;-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}.line-clamp-2{-webkit-line-clamp:2;-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}.line-clamp-3{-webkit-line-clamp:3;-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}.\!block{display:block!important}.block{display:block}.inline-block{display:inline-block}.\!inline{display:inline!important}.inline{display:inline}.\!flex{display:flex!important}.flex{display:flex}.inline-flex{display:inline-flex}.\!table{display:table!important}.table{display:table}.inline-table{display:inline-table}.table-caption{display:table-caption}.table-cell{display:table-cell}.table-column{display:table-column}.table-column-group{display:table-column-group}.table-footer-group{display:table-footer-group}.table-header-group{display:table-header-group}.table-row-group{display:table-row-group}.table-row{display:table-row}.\!grid{display:grid!important}.grid{display:grid}.contents{display:contents}.list-item{display:list-item}.\!hidden{display:none!important}.hidden{display:none}.aspect-\[10\/16\]{aspect-ratio:10/16}.aspect-\[16\/10\]{aspect-ratio:16/10}.aspect-\[2\/1\]{aspect-ratio:2}.aspect-\[5\/7\]{aspect-ratio:5/7}.aspect-square{aspect-ratio:1}.aspect-video{aspect-ratio:16/9}.size-1{width:.25rem;height:.25rem}.size-12{width:3rem;height:3rem}.size-3{width:.75rem;height:.75rem}.size-4{width:1rem;height:1rem}.size-48{width:12rem;height:12rem}.size-5{width:1.25rem;height:1.25rem}.size-6{width:1.5rem;height:1.5rem}.size-8{width:2rem;height:2rem}.size-\[1\.5em\]{width:1.5em;height:1.5em}.\!h-12{height:3rem!important}.\!h-24{height:6rem!important}.h-1{height:.25rem}.h-10{height:2.5rem}.h-12{height:3rem}.h-16{height:4rem}.h-2{height:.5rem}.h-2\.5{height:.625rem}.h-24{height:6rem}.h-28{height:7rem}.h-3{height:.75rem}.h-4{height:1rem}.h-5{height:1.25rem}.h-6{height:1.5rem}.h-8{height:2rem}.h-9{height:2.25rem}.h-\[--_height\]{height:var(--_height)}.h-\[--_size\]{height:var(--_size)}.h-\[--top-bar-height\]{height:var(--top-bar-height)}.h-\[1\.75rem\]{height:1.75rem}.h-\[16rem\]{height:16rem}.h-\[173px\]{height:173px}.h-\[1px\]{height:1px}.h-\[2\.625rem\]{height:2.625rem}.h-\[25rem\]{height:25rem}.h-\[3\.25rem\]{height:3.25rem}.h-\[32rem\]{height:32rem}.h-\[500px\]{height:500px}.h-\[64px\]{height:64px}.h-\[96px\]{height:96px}.h-\[calc\(100\%-0\.5rem\)\]{height:calc(100% - .5rem)}.h-full{height:100%}.h-px{height:1px}.max-h-\[19rem\]{max-height:19rem}.max-h-\[20rem\]{max-height:20rem}.max-h-\[250px\]{max-height:250px}.max-h-\[25rem\]{max-height:25rem}.\!min-h-9{min-height:2.25rem!important}.min-h-9{min-height:2.25rem}.min-h-\[--_size\]{min-height:var(--_size)}.min-h-\[16rem\]{min-height:16rem}.min-h-\[20rem\]{min-height:20rem}.min-h-\[250px\]{min-height:250px}.min-h-\[50vh\]{min-height:50vh}.min-h-\[96px\]{min-height:96px}.\!w-12{width:3rem!important}.\!w-full{width:100%!important}.w-1{width:.25rem}.w-1\/2{width:50%}.w-10{width:2.5rem}.w-12{width:3rem}.w-16{width:4rem}.w-2{width:.5rem}.w-3{width:.75rem}.w-3\/4{width:75%}.w-4{width:1rem}.w-40{width:10rem}.w-5{width:1.25rem}.w-6{width:1.5rem}.w-8{width:2rem}.w-9{width:2.25rem}.w-\[--_size\]{width:var(--_size)}.w-\[--left-bar-width\]{width:var(--left-bar-width)}.w-\[16rem\]{width:16rem}.w-\[2\.625rem\]{width:2.625rem}.w-\[32rem\]{width:32rem}.w-\[36px\]{width:36px}.w-\[40rem\]{width:40rem}.w-\[450px\]{width:450px}.w-\[600px\]{width:600px}.w-\[60px\]{width:60px}.w-\[80px\]{width:80px}.w-\[96px\]{width:96px}.w-auto{width:auto}.w-fit{width:fit-content}.w-full{width:100%}.w-max{width:max-content}.w-px{width:1px}.min-w-0{min-width:0}.min-w-9{min-width:2.25rem}.min-w-\[--_size\]{min-width:var(--_size)}.min-w-\[--_width\]{min-width:var(--_width)}.min-w-\[16rem\]{min-width:16rem}.min-w-\[200px\]{min-width:200px}.min-w-\[20rem\]{min-width:20rem}.min-w-\[300px\]{min-width:300px}.min-w-max{min-width:max-content}.max-w-12{max-width:3rem}.max-w-16{max-width:4rem}.max-w-60{max-width:15rem}.max-w-80{max-width:20rem}.max-w-\[15rem\]{max-width:15rem}.max-w-\[16rem\]{max-width:16rem}.max-w-\[20rem\]{max-width:20rem}.max-w-\[300px\]{max-width:300px}.max-w-\[30rem\]{max-width:30rem}.max-w-\[35rem\]{max-width:35rem}.max-w-\[40rem\]{max-width:40rem}.max-w-\[48rem\]{max-width:48rem}.max-w-\[9rem\]{max-width:9rem}.max-w-full{max-width:100%}.max-w-lg{max-width:32rem}.max-w-xl{max-width:36rem}.flex-1{flex:1}.flex-none{flex:none}.flex-shrink{flex-shrink:1}.flex-shrink-0{flex-shrink:0}.shrink{flex-shrink:1}.shrink-0{flex-shrink:0}.flex-grow,.grow{flex-grow:1}.border-collapse{border-collapse:collapse}.origin-bottom{transform-origin:bottom}.origin-top{transform-origin:top}.-translate-x-1\/2{--tw-translate-x:-50%;transform:translate(var(--tw-translate-x),var(--tw-translate-y))rotate(var(--tw-rotate))skew(var(--tw-skew-x))skewY(var(--tw-skew-y))scaleX(var(--tw-scale-x))scaleY(var(--tw-scale-y))}.translate-x-\[1px\]{--tw-translate-x:1px;transform:translate(var(--tw-translate-x),var(--tw-translate-y))rotate(var(--tw-rotate))skew(var(--tw-skew-x))skewY(var(--tw-skew-y))scaleX(var(--tw-scale-x))scaleY(var(--tw-scale-y))}.translate-x-\[2px\]{--tw-translate-x:2px;transform:translate(var(--tw-translate-x),var(--tw-translate-y))rotate(var(--tw-rotate))skew(var(--tw-skew-x))skewY(var(--tw-skew-y))scaleX(var(--tw-scale-x))scaleY(var(--tw-scale-y))}.translate-y-3{--tw-translate-y:.75rem;transform:translate(var(--tw-translate-x),var(--tw-translate-y))rotate(var(--tw-rotate))skew(var(--tw-skew-x))skewY(var(--tw-skew-y))scaleX(var(--tw-scale-x))scaleY(var(--tw-scale-y))}.translate-y-4{--tw-translate-y:1rem;transform:translate(var(--tw-translate-x),var(--tw-translate-y))rotate(var(--tw-rotate))skew(var(--tw-skew-x))skewY(var(--tw-skew-y))scaleX(var(--tw-scale-x))scaleY(var(--tw-scale-y))}.rotate-180{--tw-rotate:180deg;transform:translate(var(--tw-translate-x),var(--tw-translate-y))rotate(var(--tw-rotate))skew(var(--tw-skew-x))skewY(var(--tw-skew-y))scaleX(var(--tw-scale-x))scaleY(var(--tw-scale-y))}.scale-100{--tw-scale-x:1;--tw-scale-y:1;transform:translate(var(--tw-translate-x),var(--tw-translate-y))rotate(var(--tw-rotate))skew(var(--tw-skew-x))skewY(var(--tw-skew-y))scaleX(var(--tw-scale-x))scaleY(var(--tw-scale-y))}.scale-75{--tw-scale-x:.75;--tw-scale-y:.75;transform:translate(var(--tw-translate-x),var(--tw-translate-y))rotate(var(--tw-rotate))skew(var(--tw-skew-x))skewY(var(--tw-skew-y))scaleX(var(--tw-scale-x))scaleY(var(--tw-scale-y))}.scale-95{--tw-scale-x:.95;--tw-scale-y:.95;transform:translate(var(--tw-translate-x),var(--tw-translate-y))rotate(var(--tw-rotate))skew(var(--tw-skew-x))skewY(var(--tw-skew-y))scaleX(var(--tw-scale-x))scaleY(var(--tw-scale-y))}.scale-\[0\.85\]{--tw-scale-x:.85;--tw-scale-y:.85;transform:translate(var(--tw-translate-x),var(--tw-translate-y))rotate(var(--tw-rotate))skew(var(--tw-skew-x))skewY(var(--tw-skew-y))scaleX(var(--tw-scale-x))scaleY(var(--tw-scale-y))}.\!transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y))rotate(var(--tw-rotate))skew(var(--tw-skew-x))skewY(var(--tw-skew-y))scaleX(var(--tw-scale-x))scaleY(var(--tw-scale-y))!important}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y))rotate(var(--tw-rotate))skew(var(--tw-skew-x))skewY(var(--tw-skew-y))scaleX(var(--tw-scale-x))scaleY(var(--tw-scale-y))}@keyframes pulse{50%{opacity:.5}}.animate-pulse{animation:2s cubic-bezier(.4,0,.6,1) infinite pulse}@keyframes spin{to{transform:rotate(360deg)}}.animate-spin{animation:1s linear infinite spin}.cursor-default{cursor:default}.cursor-grab{cursor:grab}.cursor-help{cursor:help}.cursor-not-allowed{cursor:not-allowed}.cursor-pointer{cursor:pointer}.select-none{-webkit-user-select:none;-moz-user-select:none;user-select:none}.select-all{-webkit-user-select:all;-moz-user-select:all;user-select:all}.resize{resize:both}.list-none{list-style-type:none}.appearance-none{-webkit-appearance:none;-moz-appearance:none;appearance:none}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.grid-cols-\[1fr_auto\]{grid-template-columns:1fr auto}.grid-cols-\[1fr_min-content\]{grid-template-columns:1fr min-content}.grid-cols-\[auto_1fr\]{grid-template-columns:auto 1fr}.grid-cols-\[auto_1fr_auto\]{grid-template-columns:auto 1fr auto}.grid-cols-\[auto_min-content\]{grid-template-columns:auto min-content}.grid-cols-\[auto_minmax\(0\,3fr\)_minmax\(0\,4fr\)_auto\]{grid-template-columns:auto minmax(0,3fr) minmax(0,4fr) auto}.grid-cols-\[min-content\,4fr\,3fr\,2fr\]{grid-template-columns:min-content 4fr 3fr 2fr}.grid-cols-\[min-content\,auto\,auto\,auto\,auto\]{grid-template-columns:min-content auto auto auto auto}.grid-cols-\[min-content_auto_min-content_min-content\]{grid-template-columns:min-content auto min-content min-content}.\!flex-row{flex-direction:row!important}.flex-row{flex-direction:row}.\!flex-col{flex-direction:column!important}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.flex-nowrap{flex-wrap:nowrap}.place-content-center{place-content:center}.place-items-stretch{place-items:stretch stretch}.content-start{align-content:flex-start}.items-start{align-items:flex-start}.items-end{align-items:flex-end}.\!items-center{align-items:center!important}.items-center{align-items:center}.items-baseline{align-items:baseline}.justify-start{justify-content:flex-start}.justify-end{justify-content:flex-end}.justify-center{justify-content:center}.\!justify-between{justify-content:space-between!important}.justify-between{justify-content:space-between}.gap-1{gap:.25rem}.gap-12{gap:3rem}.gap-2{gap:.5rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}.gap-5{gap:1.25rem}.gap-6{gap:1.5rem}.gap-\[--_gap\]{gap:var(--_gap)}.gap-\[0\.5rem\]{gap:.5rem}.gap-\[var\(--gap-md\)\]{gap:var(--gap-md)}.gap-x-8{-moz-column-gap:2rem;column-gap:2rem}.gap-y-6{row-gap:1.5rem}.space-y-4>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(1rem*calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1rem*var(--tw-space-y-reverse))}.divide-y>:not([hidden])~:not([hidden]){--tw-divide-y-reverse:0;border-top-width:calc(1px*calc(1 - var(--tw-divide-y-reverse)));border-bottom-width:calc(1px*var(--tw-divide-y-reverse))}.divide-divider>:not([hidden])~:not([hidden]){border-color:var(--color-divider)}.self-center{align-self:center}.overflow-auto{overflow:auto}.overflow-hidden{overflow:hidden}.overflow-clip{overflow:clip}.overflow-x-auto{overflow-x:auto}.overflow-y-auto{overflow-y:auto}.truncate{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.text-ellipsis{text-overflow:ellipsis}.whitespace-nowrap{white-space:nowrap}.whitespace-pre-wrap{white-space:pre-wrap}.text-wrap{text-wrap:wrap}.text-nowrap{text-wrap:nowrap}.break-words{overflow-wrap:break-word}.break-all{word-break:break-all}.\!rounded-\[100\%\]{border-radius:100%!important}.rounded{border-radius:.25rem}.rounded-2xl{border-radius:1rem}.rounded-3xl{border-radius:1.5rem}.rounded-\[--_radius\]{border-radius:var(--_radius)}.rounded-\[5px\]{border-radius:5px}.rounded-\[inherit\]{border-radius:inherit}.rounded-full{border-radius:9999px}.rounded-lg{border-radius:.5rem}.rounded-md{border-radius:.375rem}.rounded-none{border-radius:0}.rounded-xl{border-radius:.75rem}.rounded-b-none{border-bottom-right-radius:0;border-bottom-left-radius:0}.rounded-b-xl{border-bottom-right-radius:.75rem;border-bottom-left-radius:.75rem}.rounded-t-none{border-top-left-radius:0;border-top-right-radius:0}.rounded-t-xl{border-top-left-radius:.75rem;border-top-right-radius:.75rem}.rounded-tl-\[--radius-xl\]{border-top-left-radius:var(--radius-xl)}.\!border-4{border-width:4px!important}.border{border-width:1px}.border-0{border-width:0}.border-2{border-width:2px}.border-\[1px\]{border-width:1px}.border-b{border-bottom-width:1px}.border-b-2{border-bottom-width:2px}.border-b-\[1px\]{border-bottom-width:1px}.border-l-\[1px\]{border-left-width:1px}.border-r,.border-r-\[1px\]{border-right-width:1px}.border-t{border-top-width:1px}.border-solid{border-style:solid}.border-dashed{border-style:dashed}.border-none{border-style:none}.border-\[--brand-gradient-border\]{border-color:var(--brand-gradient-border)}.border-black{--tw-border-opacity:1;border-color:rgb(0 0 0/var(--tw-border-opacity))}.border-brand{border-color:var(--color-brand)}.border-brand-blue{border-color:var(--color-blue)}.border-brand-orange{border-color:var(--color-orange)}.border-brand-purple{border-color:var(--color-purple)}.border-brand-red{border-color:var(--color-red)}.border-button-border{border-color:var(--color-button-border)}.border-code-bg{border-color:var(--color-code-bg)}.border-divider{border-color:var(--color-divider)}.border-highlight-gray{border-color:var(--color-gray-highlight)}.border-orange{border-color:var(--color-orange)}.border-red{border-color:var(--color-red)}.border-transparent{border-color:#0000}.border-b-button-bg{border-bottom-color:var(--color-button-bg)}.bg-\[--_bg-color\,var\(--color-button-bg\)\]{background-color:var(--_bg-color,var(--color-button-bg))}.bg-\[--_bg\]{background-color:var(--_bg)}.bg-\[--color-button-bg-selected\]{background-color:var(--color-button-bg-selected)}.bg-bg{background-color:var(--color-bg)}.bg-bg-blue{background-color:var(--color-blue-bg)}.bg-bg-green{background-color:var(--color-green-bg)}.bg-bg-orange{background-color:var(--color-orange-bg)}.bg-bg-purple{background-color:var(--color-purple-bg)}.bg-bg-raised{background-color:var(--color-raised-bg)}.bg-bg-red{background-color:var(--color-red-bg)}.bg-black\/10{background-color:#0000001a}.bg-brand{background-color:var(--color-brand)}.bg-brand-highlight{background-color:var(--color-brand-highlight)}.bg-button-bg{background-color:var(--color-button-bg)}.bg-button-bgSelected{background-color:var(--color-button-bg-selected)}.bg-button-border{background-color:var(--color-button-border)}.bg-code-bg{background-color:var(--color-code-bg)}.bg-highlight-red{background-color:var(--color-red-highlight)}.bg-orange{background-color:var(--color-orange)}.bg-purple{background-color:var(--color-purple)}.bg-red{background-color:var(--color-red)}.bg-secondary{background-color:var(--color-secondary)}.bg-table-alternateRow{background-color:var(--color-table-alternate-row)}.bg-tooltip-bg{background-color:var(--color-tooltip-bg)}.bg-transparent{background-color:#0000}.bg-gradient-to-r{background-image:linear-gradient(to right,var(--tw-gradient-stops))}.from-transparent{--tw-gradient-from:transparent var(--tw-gradient-from-position);--tw-gradient-to:#0000 var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.via-green-500{--tw-gradient-to:#22c55e00 var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),#22c55e var(--tw-gradient-via-position),var(--tw-gradient-to)}.to-transparent{--tw-gradient-to:transparent var(--tw-gradient-to-position)}.bg-cover{background-size:cover}.bg-center{background-position:50%}.bg-no-repeat{background-repeat:no-repeat}.stroke-\[3px\]{stroke-width:3px}.object-contain{-o-object-fit:contain;object-fit:contain}.object-cover{-o-object-fit:cover;object-fit:cover}.p-0{padding:0}.p-1{padding:.25rem}.p-2{padding:.5rem}.p-3{padding:.75rem}.p-4{padding:1rem}.p-6{padding:1.5rem}.p-7{padding:1.75rem}.p-8{padding:2rem}.p-\[0\.5rem\]{padding:.5rem}.p-\[3px\]{padding:3px}.px-0{padding-left:0;padding-right:0}.px-1{padding-left:.25rem;padding-right:.25rem}.px-1\.5{padding-left:.375rem;padding-right:.375rem}.px-2{padding-left:.5rem;padding-right:.5rem}.px-3{padding-left:.75rem;padding-right:.75rem}.px-4{padding-left:1rem;padding-right:1rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.px-\[--_padding-x\]{padding-left:var(--_padding-x);padding-right:var(--_padding-x)}.px-\[0\.375rem\]{padding-left:.375rem;padding-right:.375rem}.py-0{padding-top:0;padding-bottom:0}.py-0\.5{padding-top:.125rem;padding-bottom:.125rem}.py-1{padding-top:.25rem;padding-bottom:.25rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.py-3{padding-top:.75rem;padding-bottom:.75rem}.py-40{padding-top:10rem;padding-bottom:10rem}.py-\[--_padding-y\]{padding-top:var(--_padding-y);padding-bottom:var(--_padding-y)}.\!pb-3{padding-bottom:.75rem!important}.\!pt-4{padding-top:1rem!important}.pb-12{padding-bottom:3rem}.pb-4{padding-bottom:1rem}.pb-6{padding-bottom:1.5rem}.pb-8{padding-bottom:2rem}.pl-3{padding-left:.75rem}.pl-4{padding-left:1rem}.pr-2{padding-right:.5rem}.pr-4{padding-right:1rem}.pt-0{padding-top:0}.pt-1{padding-top:.25rem}.pt-2{padding-top:.5rem}.pt-4{padding-top:1rem}.pt-\[25\%\]{padding-top:25%}.pt-\[2px\]{padding-top:2px}.text-left{text-align:left}.text-center{text-align:center}.text-right{text-align:right}.text-justify{text-align:justify}.text-end{text-align:end}.font-mono{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace}.text-2xl{font-size:1.5rem;line-height:2rem}.text-3xl{font-size:1.875rem;line-height:2.25rem}.text-4xl{font-size:2.25rem;line-height:2.5rem}.text-base{font-size:1rem;line-height:1.5rem}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-xl{font-size:1.25rem;line-height:1.75rem}.text-xs{font-size:.75rem;line-height:1rem}.font-\[--_font-weight\]{font-weight:var(--_font-weight)}.font-bold{font-weight:700}.font-extrabold{font-weight:800}.font-medium{font-weight:500}.font-normal{font-weight:400}.font-semibold{font-weight:600}.uppercase{text-transform:uppercase}.lowercase{text-transform:lowercase}.capitalize{text-transform:capitalize}.italic{font-style:italic}.\!ordinal{--tw-ordinal:ordinal!important;font-variant-numeric:var(--tw-ordinal)var(--tw-slashed-zero)var(--tw-numeric-figure)var(--tw-numeric-spacing)var(--tw-numeric-fraction)!important}.ordinal{--tw-ordinal:ordinal;font-variant-numeric:var(--tw-ordinal)var(--tw-slashed-zero)var(--tw-numeric-figure)var(--tw-numeric-spacing)var(--tw-numeric-fraction)}.leading-5{line-height:1.25rem}.leading-\[1\.2\]{line-height:1.2}.leading-none{line-height:1}.leading-normal{line-height:1.5}.leading-tight{line-height:1.25}.\!text-brand-inverted{color:var(--color-accent-contrast)!important}.text-\[--_color\,var\(--color-secondary\)\]{color:var(--_color,var(--color-secondary))}.text-\[--_text\]{color:var(--_text)}.text-\[--color-button-text-selected\]{color:var(--color-button-text-selected)}.text-\[var\(--font-size-md\)\]{color:var(--font-size-md)}.text-brand{color:var(--color-brand)}.text-brand-blue{color:var(--color-blue)}.text-brand-green{color:var(--color-green)}.text-brand-highlight{color:var(--color-brand-highlight)}.text-brand-inverted{color:var(--color-accent-contrast)}.text-brand-orange{color:var(--color-orange)}.text-brand-red{color:var(--color-red)}.text-button-text{color:var(--color-button-text)}.text-button-textSelected{color:var(--color-button-text-selected)}.text-code-text{color:var(--color-code-text)}.text-contrast{color:var(--color-contrast)}.text-heading{color:var(--color-heading)}.text-link{color:var(--color-link)}.text-orange{color:var(--color-orange)}.text-primary{color:var(--color-base)}.text-purple{color:var(--color-purple)}.text-red{color:var(--color-red)}.text-secondary{color:var(--color-secondary)}.text-tooltip-text{color:var(--color-tooltip-text)}.underline{text-decoration-line:underline}.overline{text-decoration-line:overline}.line-through{text-decoration-line:line-through}.antialiased{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.opacity-0{opacity:0}.opacity-100{opacity:1}.opacity-25{opacity:.25}.opacity-40{opacity:.4}.opacity-50{opacity:.5}.opacity-60{opacity:.6}.opacity-80{opacity:.8}.shadow{--tw-shadow:0 1px 3px 0 #0000001a,0 1px 2px -1px #0000001a;--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color),0 1px 2px -1px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-lg{--tw-shadow:0 10px 15px -3px #0000001a,0 4px 6px -4px #0000001a;--tw-shadow-colored:0 10px 15px -3px var(--tw-shadow-color),0 4px 6px -4px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-md{--tw-shadow:0 4px 6px -1px #0000001a,0 2px 4px -2px #0000001a;--tw-shadow-colored:0 4px 6px -1px var(--tw-shadow-color),0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-sm{--tw-shadow:0 1px 2px 0 #0000000d;--tw-shadow-colored:0 1px 2px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-xl{--tw-shadow:0 20px 25px -5px #0000001a,0 8px 10px -6px #0000001a;--tw-shadow-colored:0 20px 25px -5px var(--tw-shadow-color),0 8px 10px -6px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.outline-none{outline-offset:2px;outline:2px solid #0000}.outline{outline-style:solid}.ring{--tw-ring-offset-shadow:var(--tw-ring-inset)0 0 0 var(--tw-ring-offset-width)var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset)0 0 0 calc(3px + var(--tw-ring-offset-width))var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.blur{--tw-blur:blur(8px);filter:var(--tw-blur)var(--tw-brightness)var(--tw-contrast)var(--tw-grayscale)var(--tw-hue-rotate)var(--tw-invert)var(--tw-saturate)var(--tw-sepia)var(--tw-drop-shadow)}.brightness-0{--tw-brightness:brightness(0);filter:var(--tw-blur)var(--tw-brightness)var(--tw-contrast)var(--tw-grayscale)var(--tw-hue-rotate)var(--tw-invert)var(--tw-saturate)var(--tw-sepia)var(--tw-drop-shadow)}.brightness-95{--tw-brightness:brightness(.95);filter:var(--tw-blur)var(--tw-brightness)var(--tw-contrast)var(--tw-grayscale)var(--tw-hue-rotate)var(--tw-invert)var(--tw-saturate)var(--tw-sepia)var(--tw-drop-shadow)}.brightness-\[0\.25\]{--tw-brightness:brightness(.25);filter:var(--tw-blur)var(--tw-brightness)var(--tw-contrast)var(--tw-grayscale)var(--tw-hue-rotate)var(--tw-invert)var(--tw-saturate)var(--tw-sepia)var(--tw-drop-shadow)}.brightness-\[0\.3\]{--tw-brightness:brightness(.3);filter:var(--tw-blur)var(--tw-brightness)var(--tw-contrast)var(--tw-grayscale)var(--tw-hue-rotate)var(--tw-invert)var(--tw-saturate)var(--tw-sepia)var(--tw-drop-shadow)}.contrast-\[0\.8\]{--tw-contrast:contrast(.8);filter:var(--tw-blur)var(--tw-brightness)var(--tw-contrast)var(--tw-grayscale)var(--tw-hue-rotate)var(--tw-invert)var(--tw-saturate)var(--tw-sepia)var(--tw-drop-shadow)}.drop-shadow{--tw-drop-shadow:drop-shadow(0 1px 2px #0000001a)drop-shadow(0 1px 1px #0000000f);filter:var(--tw-blur)var(--tw-brightness)var(--tw-contrast)var(--tw-grayscale)var(--tw-hue-rotate)var(--tw-invert)var(--tw-saturate)var(--tw-sepia)var(--tw-drop-shadow)}.grayscale{--tw-grayscale:grayscale(100%);filter:var(--tw-blur)var(--tw-brightness)var(--tw-contrast)var(--tw-grayscale)var(--tw-hue-rotate)var(--tw-invert)var(--tw-saturate)var(--tw-sepia)var(--tw-drop-shadow)}.invert{--tw-invert:invert(100%);filter:var(--tw-blur)var(--tw-brightness)var(--tw-contrast)var(--tw-grayscale)var(--tw-hue-rotate)var(--tw-invert)var(--tw-saturate)var(--tw-sepia)var(--tw-drop-shadow)}.saturate-\[0\.25\]{--tw-saturate:saturate(.25);filter:var(--tw-blur)var(--tw-brightness)var(--tw-contrast)var(--tw-grayscale)var(--tw-hue-rotate)var(--tw-invert)var(--tw-saturate)var(--tw-sepia)var(--tw-drop-shadow)}.sepia{--tw-sepia:sepia(100%);filter:var(--tw-blur)var(--tw-brightness)var(--tw-contrast)var(--tw-grayscale)var(--tw-hue-rotate)var(--tw-invert)var(--tw-saturate)var(--tw-sepia)var(--tw-drop-shadow)}.\!filter{filter:var(--tw-blur)var(--tw-brightness)var(--tw-contrast)var(--tw-grayscale)var(--tw-hue-rotate)var(--tw-invert)var(--tw-saturate)var(--tw-sepia)var(--tw-drop-shadow)!important}.filter{filter:var(--tw-blur)var(--tw-brightness)var(--tw-contrast)var(--tw-grayscale)var(--tw-hue-rotate)var(--tw-invert)var(--tw-saturate)var(--tw-sepia)var(--tw-drop-shadow)}.backdrop-blur-sm{--tw-backdrop-blur:blur(4px);backdrop-filter:var(--tw-backdrop-blur)var(--tw-backdrop-brightness)var(--tw-backdrop-contrast)var(--tw-backdrop-grayscale)var(--tw-backdrop-hue-rotate)var(--tw-backdrop-invert)var(--tw-backdrop-opacity)var(--tw-backdrop-saturate)var(--tw-backdrop-sepia)}.backdrop-filter{backdrop-filter:var(--tw-backdrop-blur)var(--tw-backdrop-brightness)var(--tw-backdrop-contrast)var(--tw-backdrop-grayscale)var(--tw-backdrop-hue-rotate)var(--tw-backdrop-invert)var(--tw-backdrop-opacity)var(--tw-backdrop-saturate)var(--tw-backdrop-sepia)}.\!transition{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-backdrop-filter,backdrop-filter!important;transition-duration:.15s!important;transition-timing-function:cubic-bezier(.4,0,.2,1)!important}.transition{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-backdrop-filter,backdrop-filter;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1)}.transition-all{transition-property:all;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1)}.transition-colors{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1)}.transition-opacity{transition-property:opacity;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1)}.transition-transform{transition-property:transform;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1)}.duration-100{transition-duration:.1s}.duration-150{transition-duration:.15s}.duration-200{transition-duration:.2s}.duration-300{transition-duration:.3s}.duration-500{transition-duration:.5s}.ease-in{transition-timing-function:cubic-bezier(.4,0,1,1)}.ease-in-out{transition-timing-function:cubic-bezier(.4,0,.2,1)}.ease-out{transition-timing-function:cubic-bezier(0,0,.2,1)}.\[a-zA-Z0-9\:\\\\-\\\\\._\$\]{a-z-a--z0-9:\\-\\.$}.\[backface-visibility\:hidden\]{backface-visibility:hidden}.\[page\:\.enableAnimations\]{page:.enableAnimations}.\[page\:\.setMatrixAt\]{page:.setMatrixAt}.\[transform-style\:preserve-3d\]{transform-style:preserve-3d}.\[transform\:rotateY\(180deg\)\]{transform:rotateY(180deg)}@font-face{font-family:bundled-minecraft-font-mrapp;font-style:normal;font-display:swap;font-weight:400;src:url(https://cdn-raw.modrinth.com/fonts/minecraft/regular.otf)format("opentype")}@font-face{font-family:bundled-minecraft-font-mrapp;font-style:italic;font-display:swap;font-weight:400;src:url(https://cdn-raw.modrinth.com/fonts/minecraft/italic.otf)format("opentype")}@font-face{font-family:bundled-minecraft-font-mrapp;font-style:normal;font-display:swap;font-weight:600;src:url(https://cdn-raw.modrinth.com/fonts/minecraft/bold.otf)format("opentype")}@font-face{font-family:bundled-minecraft-font-mrapp;font-style:italic;font-display:swap;font-weight:600;src:url(https://cdn-raw.modrinth.com/fonts/minecraft/bold-italic.otf)format("opentype")}.font-minecraft{font-family:bundled-minecraft-font-mrapp,monospace}:root{font-family:var(--font-standard,sans-serif),sans-serif;color-scheme:dark;--view-width:calc(100% - 5rem);--expanded-view-width:calc(100% - 13rem)}body{width:100%;height:100%;position:fixed;overflow:hidden}.no-wrap{white-space:nowrap}.no-select{-webkit-user-select:none;-moz-user-select:none;user-select:none}a{color:var(--color-link);text-decoration:none}a:hover{text-decoration:none}input{border:none!important}.badge{border-radius:var(--radius-md);white-space:nowrap;background-color:var(--color-bg);padding-block:var(--gap-sm);padding-inline:var(--gap-lg);align-items:center;width:min-content;display:flex}.badge svg{width:1.1rem;height:1.1rem;margin-right:.5rem}.badge.featured{background-color:var(--color-brand-highlight);color:var(--color-contrast)}*{scrollbar-width:auto;scrollbar-color:var(--color-scrollbar)var(--color-bg)}::-webkit-scrollbar{opacity:.5;border:3px solid #0000;width:16px;-webkit-transition:opacity .2s ease-in-out;transition:opacity .2s ease-in-out}::-webkit-scrollbar:hover{opacity:1}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background-color:var(--color-scrollbar);border-radius:var(--radius-lg);background-clip:content-box;border:5px solid #0000}.highlighted{box-shadow:0 0 1rem var(--color-brand)!important}.gecko{background-color:var(--color-raised-bg);box-shadow:none!important}img{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.card-shadow{box-shadow:var(--shadow-card)}@font-face{font-family:inter;font-style:normal;font-weight:400;font-display:swap;src:url(https://cdn-raw.modrinth.com/fonts/inter/Inter-Regular.woff2?v=3.19)format("woff2"),url(https://cdn-raw.modrinth.com/fonts/inter/Inter-Regular.woff?v=3.19)format("woff")}@font-face{font-family:inter;font-style:normal;font-weight:500;font-display:swap;src:url(https://cdn-raw.modrinth.com/fonts/inter/Inter-Medium.woff2?v=3.19)format("woff2"),url(https://cdn-raw.modrinth.com/fonts/inter/Inter-Medium.woff?v=3.19)format("woff")}@font-face{font-family:inter;font-style:normal;font-weight:600;font-display:swap;src:url(https://cdn-raw.modrinth.com/fonts/inter/Inter-SemiBold.woff2?v=3.19)format("woff2"),url(https://cdn-raw.modrinth.com/fonts/inter/Inter-SemiBold.woff?v=3.19)format("woff")}@font-face{font-family:inter;font-style:normal;font-weight:700;font-display:swap;src:url(https://cdn-raw.modrinth.com/fonts/inter/Inter-Bold.woff2?v=3.19)format("woff2"),url(https://cdn-raw.modrinth.com/fonts/inter/Inter-Bold.woff?v=3.19)format("woff")}@font-face{font-family:inter;font-style:normal;font-weight:800;font-display:swap;src:url(https://cdn-raw.modrinth.com/fonts/inter/Inter-ExtraBold.woff2?v=3.19)format("woff2"),url(https://cdn-raw.modrinth.com/fonts/inter/Inter-ExtraBold.woff?v=3.19)format("woff")}.before\:absolute:before{content:var(--tw-content);position:absolute}.before\:inset-0:before{content:var(--tw-content);inset:0}.before\:transition-all:before{content:var(--tw-content);transition-property:all;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1)}.before\:content-\[\'\'\]:before{--tw-content:"";content:var(--tw-content)}.last\:border-b-0:last-child{border-bottom-width:0}.empty\:hidden:empty{display:none}.hover\:cursor-pointer:hover{cursor:pointer}.hover\:border-inverted:hover{border-color:var(--color-text-inverted)}.hover\:bg-\[--_hover-bg\]:hover{background-color:var(--_hover-bg)}.hover\:bg-button-bg:hover{background-color:var(--color-button-bg)}.hover\:text-\[--_hover-text\]:hover{color:var(--_hover-text)}.hover\:text-contrast:hover{color:var(--color-contrast)}.hover\:text-red:hover{color:var(--color-red)}.hover\:underline:hover{text-decoration-line:underline}.hover\:brightness-125:hover{--tw-brightness:brightness(1.25);filter:var(--tw-blur)var(--tw-brightness)var(--tw-contrast)var(--tw-grayscale)var(--tw-hue-rotate)var(--tw-invert)var(--tw-saturate)var(--tw-sepia)var(--tw-drop-shadow)}.hover\:brightness-75:hover{--tw-brightness:brightness(.75);filter:var(--tw-blur)var(--tw-brightness)var(--tw-contrast)var(--tw-grayscale)var(--tw-hue-rotate)var(--tw-invert)var(--tw-saturate)var(--tw-sepia)var(--tw-drop-shadow)}.hover\:brightness-90:hover{--tw-brightness:brightness(.9);filter:var(--tw-blur)var(--tw-brightness)var(--tw-contrast)var(--tw-grayscale)var(--tw-hue-rotate)var(--tw-invert)var(--tw-saturate)var(--tw-sepia)var(--tw-drop-shadow)}.hover\:brightness-\[--hover-brightness\]:hover{--tw-brightness:brightness(var(--hover-brightness));filter:var(--tw-blur)var(--tw-brightness)var(--tw-contrast)var(--tw-grayscale)var(--tw-hue-rotate)var(--tw-invert)var(--tw-saturate)var(--tw-sepia)var(--tw-drop-shadow)}.hover\:before\:backdrop-brightness-110:hover:before{content:var(--tw-content);--tw-backdrop-brightness:brightness(1.1);backdrop-filter:var(--tw-backdrop-blur)var(--tw-backdrop-brightness)var(--tw-backdrop-contrast)var(--tw-backdrop-grayscale)var(--tw-backdrop-hue-rotate)var(--tw-backdrop-invert)var(--tw-backdrop-opacity)var(--tw-backdrop-saturate)var(--tw-backdrop-sepia)}.focus\:rounded-full:focus{border-radius:9999px}.focus\:border-none:focus{border-style:none}.focus\:outline-none:focus{outline-offset:2px;outline:2px solid #0000}.focus-visible\:bg-\[--_hover-bg\]:focus-visible{background-color:var(--_hover-bg)}.focus-visible\:bg-button-bg:focus-visible{background-color:var(--color-button-bg)}.focus-visible\:text-\[--_hover-text\]:focus-visible{color:var(--_hover-text)}.focus-visible\:text-contrast:focus-visible{color:var(--color-contrast)}.focus-visible\:text-red:focus-visible{color:var(--color-red)}.focus-visible\:brightness-\[--hover-brightness\]:focus-visible{--tw-brightness:brightness(var(--hover-brightness));filter:var(--tw-blur)var(--tw-brightness)var(--tw-contrast)var(--tw-grayscale)var(--tw-hue-rotate)var(--tw-invert)var(--tw-saturate)var(--tw-sepia)var(--tw-drop-shadow)}.active\:scale-95:active,.active\:scale-\[0\.95\]:active{--tw-scale-x:.95;--tw-scale-y:.95;transform:translate(var(--tw-translate-x),var(--tw-translate-y))rotate(var(--tw-rotate))skew(var(--tw-skew-x))skewY(var(--tw-skew-y))scaleX(var(--tw-scale-x))scaleY(var(--tw-scale-y))}.active\:scale-\[0\.96\]:active{--tw-scale-x:.96;--tw-scale-y:.96;transform:translate(var(--tw-translate-x),var(--tw-translate-y))rotate(var(--tw-rotate))skew(var(--tw-skew-x))skewY(var(--tw-skew-y))scaleX(var(--tw-scale-x))scaleY(var(--tw-scale-y))}.active\:scale-\[0\.97\]:active{--tw-scale-x:.97;--tw-scale-y:.97;transform:translate(var(--tw-translate-x),var(--tw-translate-y))rotate(var(--tw-rotate))skew(var(--tw-skew-x))skewY(var(--tw-skew-y))scaleX(var(--tw-scale-x))scaleY(var(--tw-scale-y))}.active\:scale-\[0\.98\]:active{--tw-scale-x:.98;--tw-scale-y:.98;transform:translate(var(--tw-translate-x),var(--tw-translate-y))rotate(var(--tw-rotate))skew(var(--tw-skew-x))skewY(var(--tw-skew-y))scaleX(var(--tw-scale-x))scaleY(var(--tw-scale-y))}.active\:scale-\[0\.99\]:active{--tw-scale-x:.99;--tw-scale-y:.99;transform:translate(var(--tw-translate-x),var(--tw-translate-y))rotate(var(--tw-rotate))skew(var(--tw-skew-x))skewY(var(--tw-skew-y))scaleX(var(--tw-scale-x))scaleY(var(--tw-scale-y))}.active\:brightness-125:active{--tw-brightness:brightness(1.25);filter:var(--tw-blur)var(--tw-brightness)var(--tw-contrast)var(--tw-grayscale)var(--tw-hue-rotate)var(--tw-invert)var(--tw-saturate)var(--tw-sepia)var(--tw-drop-shadow)}.group:focus-within .group-focus-within\:scale-100{--tw-scale-x:1;--tw-scale-y:1;transform:translate(var(--tw-translate-x),var(--tw-translate-y))rotate(var(--tw-rotate))skew(var(--tw-skew-x))skewY(var(--tw-skew-y))scaleX(var(--tw-scale-x))scaleY(var(--tw-scale-y))}.group:focus-within .group-focus-within\:scale-95{--tw-scale-x:.95;--tw-scale-y:.95;transform:translate(var(--tw-translate-x),var(--tw-translate-y))rotate(var(--tw-rotate))skew(var(--tw-skew-x))skewY(var(--tw-skew-y))scaleX(var(--tw-scale-x))scaleY(var(--tw-scale-y))}.group:focus-within .group-focus-within\:opacity-0{opacity:0}.group:focus-within .group-focus-within\:opacity-100{opacity:1}.group:hover .group-hover\:-translate-y-3{--tw-translate-y:-.75rem;transform:translate(var(--tw-translate-x),var(--tw-translate-y))rotate(var(--tw-rotate))skew(var(--tw-skew-x))skewY(var(--tw-skew-y))scaleX(var(--tw-scale-x))scaleY(var(--tw-scale-y))}.group:hover .group-hover\:translate-x-0{--tw-translate-x:0px;transform:translate(var(--tw-translate-x),var(--tw-translate-y))rotate(var(--tw-rotate))skew(var(--tw-skew-x))skewY(var(--tw-skew-y))scaleX(var(--tw-scale-x))scaleY(var(--tw-scale-y))}.group:hover .group-hover\:translate-x-1{--tw-translate-x:.25rem;transform:translate(var(--tw-translate-x),var(--tw-translate-y))rotate(var(--tw-rotate))skew(var(--tw-skew-x))skewY(var(--tw-skew-y))scaleX(var(--tw-scale-x))scaleY(var(--tw-scale-y))}.group:hover .group-hover\:translate-y-0{--tw-translate-y:0px;transform:translate(var(--tw-translate-x),var(--tw-translate-y))rotate(var(--tw-rotate))skew(var(--tw-skew-x))skewY(var(--tw-skew-y))scaleX(var(--tw-scale-x))scaleY(var(--tw-scale-y))}.group:hover .group-hover\:scale-100{--tw-scale-x:1;--tw-scale-y:1;transform:translate(var(--tw-translate-x),var(--tw-translate-y))rotate(var(--tw-rotate))skew(var(--tw-skew-x))skewY(var(--tw-skew-y))scaleX(var(--tw-scale-x))scaleY(var(--tw-scale-y))}.group:hover .group-hover\:scale-95{--tw-scale-x:.95;--tw-scale-y:.95;transform:translate(var(--tw-translate-x),var(--tw-translate-y))rotate(var(--tw-rotate))skew(var(--tw-skew-x))skewY(var(--tw-skew-y))scaleX(var(--tw-scale-x))scaleY(var(--tw-scale-y))}.group:hover .group-hover\:\!bg-brand{background-color:var(--color-brand)!important}.group:hover .group-hover\:\!bg-button-bg{background-color:var(--color-button-bg)!important}.group:hover .group-hover\:text-brand{color:var(--color-brand)}.group:hover .group-hover\:underline{text-decoration-line:underline}.group:hover .group-hover\:opacity-0{opacity:0}.group:hover .group-hover\:opacity-100{opacity:1}.group:hover .group-hover\:brightness-100{--tw-brightness:brightness(1);filter:var(--tw-blur)var(--tw-brightness)var(--tw-contrast)var(--tw-grayscale)var(--tw-hue-rotate)var(--tw-invert)var(--tw-saturate)var(--tw-sepia)var(--tw-drop-shadow)}.group:hover .group-hover\:brightness-125{--tw-brightness:brightness(1.25);filter:var(--tw-blur)var(--tw-brightness)var(--tw-contrast)var(--tw-grayscale)var(--tw-hue-rotate)var(--tw-invert)var(--tw-saturate)var(--tw-sepia)var(--tw-drop-shadow)}.group:hover .group-hover\:brightness-75{--tw-brightness:brightness(.75);filter:var(--tw-blur)var(--tw-brightness)var(--tw-contrast)var(--tw-grayscale)var(--tw-hue-rotate)var(--tw-invert)var(--tw-saturate)var(--tw-sepia)var(--tw-drop-shadow)}.group:hover .group-hover\:\[transform\:rotateY\(180deg\)\]{transform:rotateY(180deg)}.group:active .group-active\:scale-95{--tw-scale-x:.95;--tw-scale-y:.95;transform:translate(var(--tw-translate-x),var(--tw-translate-y))rotate(var(--tw-rotate))skew(var(--tw-skew-x))skewY(var(--tw-skew-y))scaleX(var(--tw-scale-x))scaleY(var(--tw-scale-y))}@supports (grid-template-columns:subgrid){.supports-\[grid-template-columns\:subgrid\]\:col-span-full{grid-column:1/-1}.supports-\[grid-template-columns\:subgrid\]\:grid{display:grid}.supports-\[grid-template-columns\:subgrid\]\:\!grid-cols-subgrid{grid-template-columns:subgrid!important}.supports-\[grid-template-columns\:subgrid\]\:grid-cols-\[1fr_min-content\]{grid-template-columns:1fr min-content}}@media not all and (width>=640px){.max-sm\:\!hidden{display:none!important}.max-sm\:hidden{display:none}.max-sm\:flex-row{flex-direction:row}.max-sm\:justify-start{justify-content:flex-start}.max-sm\:gap-3{gap:.75rem}}@media (width>=640px){.sm\:block{display:block}.sm\:inline{display:inline}.sm\:flex{display:flex}.sm\:contents{display:contents}.sm\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.sm\:grid-cols-\[3fr_2fr\]{grid-template-columns:3fr 2fr}.sm\:grid-cols-\[min-content_1fr_1fr_1fr_min-content\]{grid-template-columns:min-content 1fr 1fr 1fr min-content}.sm\:flex-row{flex-direction:row}.sm\:items-center{align-items:center}.sm\:px-8{padding-left:2rem;padding-right:2rem}}@supports (grid-template-columns:subgrid){@media (width>=640px){.supports-\[grid-template-columns\:subgrid\]\:sm\:grid-cols-\[min-content_auto_auto_auto_min-content\]{grid-template-columns:min-content auto auto auto min-content}}}@media (width>=640px){@media not all and (width>=1280px){.sm\:max-xl\:collapse{visibility:collapse}.sm\:max-xl\:hidden{display:none}}}@media (width>=768px){.md\:right-20{right:5rem}.md\:flex{display:flex}.md\:w-\[600px\]{width:600px}.md\:w-\[650px\]{width:650px}.md\:flex-row{flex-direction:row}.md\:border-r{border-right-width:1px}}@media (width>=1024px){.lg\:grid-cols-5{grid-template-columns:repeat(5,minmax(0,1fr))}.lg\:grid-cols-\[1fr_auto\]{grid-template-columns:1fr auto}}@media (width>=1280px){.xl\:collapse{visibility:collapse}.xl\:contents{display:contents}.xl\:hidden{display:none}.xl\:grid-cols-\[min-content_1fr_1fr_1fr_1fr_1fr_min-content\]{grid-template-columns:min-content 1fr 1fr 1fr 1fr 1fr min-content}.xl\:self-center{align-self:center}}@supports (grid-template-columns:subgrid){@media (width>=1280px){.supports-\[grid-template-columns\:subgrid\]\:xl\:grid-cols-\[min-content_auto_auto_auto_auto_auto_min-content\]{grid-template-columns:min-content auto auto auto auto auto min-content}}}.\[\&\:first-child\>button\]\:pt-4:first-child>button{padding-top:1rem}.\[\&\>a\:hover\]\:underline>a:hover{text-decoration-line:underline}.\[\&\>a\]\:flex>a{display:flex}.\[\&\>a\]\:w-fit>a{width:fit-content}.\[\&\>a\]\:items-center>a{align-items:center}.\[\&\>a\]\:gap-2>a{gap:.5rem}.\[\&\>a\]\:leading-\[1\.2\]>a{line-height:1.2}.\[\&\>a\]\:text-primary>a{color:var(--color-base)}.\[\&\>div\]\:flex>div{display:flex}.\[\&\>div\]\:items-center>div{align-items:center}.\[\&\>div\]\:gap-2>div{gap:.5rem}.\[\&\>svg\.check-icon\]\:hover\:text-brand:hover>svg.check-icon,.\[\&\>svg\.check-icon\]\:focus-visible\:text-brand:focus-visible>svg.check-icon{color:var(--color-brand)}.\[\&\>svg\]\:h-4>svg{height:1rem}.\[\&\>svg\]\:w-4>svg{width:1rem}.\[\&\>svg\]\:shrink-0>svg{flex-shrink:0}.group:hover .group-hover\:\[\&\>svg\]\:\!text-brand-inverted>svg{color:var(--color-accent-contrast)!important}.\[\&_svg\]\:h-full svg{height:100%}.\[\&_svg\]\:w-full svg{width:100%}@media (hover:hover){.\[\@media\(hover\:hover\)\]\:contents{display:contents}.\[\@media\(hover\:hover\)\]\:py-1{padding-top:.25rem;padding-bottom:.25rem}.\[\@media\(hover\:hover\)\]\:opacity-0{opacity:0}}.light,.light-mode,.light-properties,html{--color-bg:#e5e7eb;--color-raised-bg:#fff;--color-super-raised-bg:#e9e9e9;--color-button-bg:#e5e7eb;--color-button-border:#a1a1a159;--color-scrollbar:#96a2b0;--color-divider:#babfc5;--color-divider-dark:#c8cdd3;--color-base:#111827;--color-secondary:#6b7280;--color-contrast:#1a202c;--color-accent-contrast:#fff;--color-red:#cb2245;--color-orange:#e08325;--color-green:#00af5c;--color-blue:#1f68c0;--color-purple:#8e32f3;--color-gray:#595b61;--color-red-highlight:#cb224540;--color-orange-highlight:#e0832540;--color-green-highlight:#00af5c40;--color-blue-highlight:#1f68c040;--color-purple-highlight:#8e32f340;--color-gray-highlight:#595b6140;--color-red-bg:#cb22451a;--color-orange-bg:#e083251a;--color-green-bg:#00af5c1a;--color-blue-bg:#1f68c01a;--color-purple-bg:#8e32f31a;--color-brand:var(--color-green);--color-brand-highlight:var(--color-green-highlight);--color-brand-shadow:#00af5cb3;--shadow-inset-lg:inset 0px -2px 2px #dfe5f11a;--shadow-inset:inset 0px -2px 2px #dfe5f10d;--shadow-inset-sm:inset 0px -1px 2px #dfe5f126;--shadow-raised-lg:0px 2px 4px #11182733;--shadow-raised:.3px .5px .6px hsl(var(--shadow-color)/.15),1px 2px 2.2px -1.7px hsl(var(--shadow-color)/.12),4.4px 8.8px 9.7px -3.4px hsl(var(--shadow-color)/.09);--shadow-floating:#0000 0px 0px 0px 0px,#0000 0px 0px 0px 0px,#0000001a 0px 4px 6px -1px,#0000001a 0px 2px 4px -1px;--shadow-card:#3232641a 0px 2px 4px 0px;--brand-gradient-bg:linear-gradient(0deg,#44b68a2d 0%,#3afa7020 100%);--brand-gradient-strong-bg:linear-gradient(270deg,#44b68a2d 0%,#24e15b1f 100%);--brand-gradient-button:#ffffff80;--brand-gradient-border:#20402026;--brand-gradient-fade-out-color:linear-gradient(to bottom,#d5ebe000,#d0ece0 70%);--color-button-bg-selected:var(--color-brand);--color-button-text-selected:var(--color-accent-contrast);--color-gradient-button-bg:linear-gradient(180deg,#f8f9fa 0%,#dce0e6 100%);--loading-bar-gradient:linear-gradient(to right,var(--color-brand)0%,#00af5c 100%);--color-platform-fabric:#8a7b71;--color-platform-quilt:#8b61b4;--color-platform-forge:#5b6197;--color-platform-neoforge:#dc895c;--color-platform-liteloader:#4c90de;--color-platform-bukkit:#e78362;--color-platform-bungeecord:#c69e39;--color-platform-folia:#6aa54f;--color-platform-paper:#e67e7e;--color-platform-purpur:#7763a3;--color-platform-spigot:#cd7a21;--color-platform-velocity:#4b98b0;--color-platform-waterfall:#5f83cb;--color-platform-sponge:#c49528;--color-platform-ornithe:#6097ca;--color-platform-bta-babric:#5ba938;--color-platform-legacy-fabric:#6879f6;--color-platform-nilloader:#dd5088;--hover-brightness:.9}html{--dark-color-base:#b0bac5;--dark-color-contrast:#ecf9fb;--gap-xs:.25rem;--gap-sm:.5rem;--gap-md:.75rem;--gap-lg:1rem;--gap-xl:1.5rem;--radius-xs:.25rem;--radius-sm:.5rem;--radius-md:.75rem;--radius-lg:1rem;--radius-xl:1.25rem;--radius-max:1000000000px;--color-tooltip-text:var(--dark-color-contrast);--color-tooltip-bg:#000;--color-ad:#7d4ba233;--color-ad-raised:#be8cf380;--color-ad-contrast:black;--color-ad-highlight:var(--color-purple)}.dark,.dark-mode,.oled-mode,:root[data-theme=dark]{--color-bg:#16181c;--color-raised-bg:#26292f;--color-super-raised-bg:#40434a;--color-button-bg:#434956;--color-button-border:#c1bed11f;--color-scrollbar:var(--color-button-bg);--color-divider:var(--color-button-bg);--color-divider-dark:#646c75;--color-base:var(--dark-color-base);--color-secondary:#96a2b0;--color-contrast:var(--dark-color-contrast);--color-accent-contrast:#000;--color-red:#ff496e;--color-orange:#ffa347;--color-green:#1bd96a;--color-blue:#4f9cff;--color-purple:#c78aff;--color-gray:#9fa4b3;--color-red-highlight:#ff496e40;--color-orange-highlight:#ffa34740;--color-green-highlight:#1bd96a40;--color-blue-highlight:#4f9cff40;--color-purple-highlight:#c78aff40;--color-gray-highlight:#9fa4b340;--color-red-bg:#ff496e33;--color-orange-bg:#ffa34733;--color-green-bg:#1bd96a33;--color-blue-bg:#4f9cff33;--color-purple-bg:#c78aff33;--color-brand:var(--color-green);--color-brand-highlight:#1bd96a40;--color-brand-shadow:#1bd96ab3;--shadow-inset-lg:inset 0px -2px 2px #1118271a;--shadow-inset:inset 0px -2px 2px #1118270d;--shadow-inset-sm:inset 0px -1px 1px #11182740;--shadow-raised-lg:0px 2px 4px #11182733;--shadow-raised:0px -2px 4px #1118271a;--shadow-floating:#0000 0px 0px 0px 0px,#0000 0px 0px 0px 0px,#0000001a 0px 4px 6px -1px,#0000000f 0px 2px 4px -1px;--shadow-card:#00000040 0px 2px 4px 0px;--brand-gradient-bg:linear-gradient(0deg,#0e231333 0%,#3789491a 100%);--brand-gradient-strong-bg:linear-gradient(270deg,#09110d 10%,#131f17 100%);--brand-gradient-button:#ffffff14;--brand-gradient-border:#9bffa014;--brand-gradient-fade-out-color:linear-gradient(to bottom,#181e1f00,#171d1e 80%);--color-button-bg-selected:var(--color-brand-highlight);--color-button-text-selected:var(--color-brand);--color-gradient-button-bg:linear-gradient(180deg,#3a3d47 0%,#33363d 100%);--loading-bar-gradient:linear-gradient(to right,var(--color-brand)0%,#1ffa9a 100%);--color-platform-fabric:#dbb69b;--color-platform-quilt:#c796f9;--color-platform-forge:#959eef;--color-platform-neoforge:#f99e6b;--color-platform-liteloader:#7ab0ee;--color-platform-bukkit:#f6af7b;--color-platform-bungeecord:#d2c080;--color-platform-folia:#a5e388;--color-platform-paper:#eaa;--color-platform-purpur:#c3abf7;--color-platform-spigot:#f1cc84;--color-platform-velocity:#83d5ef;--color-platform-waterfall:#78a4fb;--color-platform-sponge:#f9e580;--color-platform-ornithe:#87c7ff;--color-platform-bta-babric:#72cc4a;--color-platform-legacy-fabric:#6879f6;--color-platform-nilloader:#f45e9a;--hover-brightness:1.25;--experimental-color-button-bg:#33363d}.oled-mode{--color-bg:#000;--color-raised-bg:#101013;--color-button-bg:#222329;--color-ad:#0d1828;--brand-gradient-bg:linear-gradient(0deg,#16423326 0%,#3789491a 100%);--brand-gradient-strong-bg:linear-gradient(270deg,#09120e99 10%,#131f1780 100%);--color-gradient-button-bg:linear-gradient(180deg,#1b1b20 0%,#25262b 100%)}.retro-mode{--brand-gradient-strong-bg:#3a3b38}html{-webkit-text-size-adjust:100%;line-height:1.15}body{margin:0}main{display:block}h1{margin:.67em 0;font-size:2em}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace;font-size:1em}a{background-color:#0000}abbr[title]{text-decoration:underline;border-bottom:none;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace;font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{margin:0;font-family:inherit;font-size:100%;line-height:1.15}button,input{overflow:visible}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted buttontext}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;white-space:normal;max-width:100%;padding:0;display:table}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}template,[hidden]{display:none}.card .label :where(.label__title),.card label :where(.label__title),.universal-body .label :where(.label__title),.universal-body label :where(.label__title),.universal-labels .label :where(.label__title),.universal-labels label :where(.label__title){margin-block:var(--gap-md)var(--gap-sm);color:var(--color-contrast);font-size:1.17rem;font-weight:700;display:block}.card .label :where(.label__title) .required,.card label :where(.label__title) .required,.universal-body .label :where(.label__title) .required,.universal-body label :where(.label__title) .required,.universal-labels .label :where(.label__title) .required,.universal-labels label :where(.label__title) .required{color:var(--color-red)}.card .label :where(.label__title).size-card-header,.card label :where(.label__title).size-card-header,.universal-body .label :where(.label__title).size-card-header,.universal-body label :where(.label__title).size-card-header,.universal-labels .label :where(.label__title).size-card-header,.universal-labels label :where(.label__title).size-card-header{font-size:var(--font-size-xl);margin-bottom:1rem}.card .label :where(.label__description),.card label :where(.label__description),.universal-body .label :where(.label__description),.universal-body label :where(.label__description),.universal-labels .label :where(.label__description),.universal-labels label :where(.label__description){margin-block-end:var(--gap-sm);display:block}.card .label :where(.label__description) .label__subdescription,.card label :where(.label__description) .label__subdescription,.universal-body .label :where(.label__description) .label__subdescription,.universal-body label :where(.label__description) .label__subdescription,.universal-labels .label :where(.label__description) .label__subdescription,.universal-labels label :where(.label__description) .label__subdescription{margin-block-start:var(--gap-md);display:block}.card .label :where(h1,h2,h3,h4),.card label :where(h1,h2,h3,h4),.universal-body .label :where(h1,h2,h3,h4),.universal-body label :where(h1,h2,h3,h4),.universal-labels .label :where(h1,h2,h3,h4),.universal-labels label :where(h1,h2,h3,h4){margin-block:0}.card .multiselect,.universal-body .multiselect{width:15rem}.card>:where(input+*,.input-group+*,.textarea-wrapper+*,.chips+*,.resizable-textarea-wrapper+*,.input-div+*),.universal-body>:where(input+*,.input-group+*,.textarea-wrapper+*,.chips+*,.resizable-textarea-wrapper+*,.input-div+*){margin-block-start:var(--gap-md)}.card :where(button,.button,.btn),.universal-body :where(button,.button,.btn){width:fit-content}.card .input-group input,.universal-body .input-group input{flex-basis:0;width:auto}.card :where(input),.universal-body :where(input){box-sizing:border-box;max-height:40px}.card :where(input):not(.stylized-toggle),.universal-body :where(input):not(.stylized-toggle){max-width:100%}:where(.adjacent-input){align-items:center;gap:var(--gap-sm);margin-bottom:calc(var(--gap-sm) + var(--gap-md));flex-flow:wrap;display:flex}:where(.adjacent-input) .btn,:where(.adjacent-input) .input-group{flex-shrink:0}:where(.adjacent-input) input{flex-shrink:1}:where(.adjacent-input)>:first-child{flex-grow:1;flex-shrink:2;flex-basis:min-content}:where(.adjacent-input) .label .label__title,:where(.adjacent-input) label .label__title{margin-block:0}:where(.adjacent-input) .label .label__description,:where(.adjacent-input) label .label__description{margin-block-end:0}:where(.adjacent-input) .label .label__description:not(:first-child),:where(.adjacent-input) label .label__description:not(:first-child){margin-top:var(--gap-sm)}@media screen and (width<=750px){:where(.adjacent-input):not(:where(.adjacent-input).small){flex-direction:column;align-items:start}:where(.adjacent-input):not(:where(.adjacent-input).small) .stylized-toggle{flex-basis:0}}.card h1,.universal-body h1{align-items:center;display:flex}.card>:first-child,.universal-body>:first-child{margin-block-start:0}.card>:last-child,.universal-body>:last-child{margin-block-end:0}.card :where(.header__row),.universal-body :where(.header__row){gap:var(--gap-sm);flex-flow:wrap;display:flex}.card :where(.header__row) *,.universal-body :where(.header__row) *{flex-shrink:0}.card :where(.header__row) .header__title,.universal-body :where(.header__row) .header__title{flex-grow:1;margin:0}.card :where(.header__row):not(:last-child),.universal-body :where(.header__row):not(:last-child){margin-bottom:var(--gap-md)}.card ol ol,.card ol ul,.card ul ol,.card ul ul,.universal-body ol ol,.universal-body ol ul,.universal-body ul ol,.universal-body ul ul{margin-bottom:0}.input-group{grid-gap:var(--gap-sm);flex-flow:wrap;align-items:center;max-width:100%;display:flex}.input-group .multiselect{width:15rem}.input-group input{flex-shrink:2}.input-group.shrink-first :first-child{flex-grow:1;flex-shrink:2;flex-basis:min-content}.input-group.shrink-first :not(:first-child){flex-shrink:1}.push-right.input-group>:first-child,.push-right:not(.input-group){margin-left:auto;margin-right:0}.input-stack{flex-direction:column;display:flex}.input-stack>*{margin-bottom:var(--gap-md)}.input-stack>.multiselect{width:unset;height:inherit}.standard-body :last-child{margin-bottom:0}.btn,.button-base,.clickable,.stylized-toggle,a{transition:opacity .5s ease-in-out,filter .2s ease-in-out,scale 50ms ease-in-out,outline .2s ease-in-out}.btn:active:not(a:disabled,.clickable:disabled,.button-base:disabled,.stylized-toggle:disabled,.btn:disabled),.button-base:active:not(a:disabled,.clickable:disabled,.button-base:disabled,.stylized-toggle:disabled,.btn:disabled),.clickable:active:not(a:disabled,.clickable:disabled,.button-base:disabled,.stylized-toggle:disabled,.btn:disabled),.stylized-toggle:active:not(a:disabled,.clickable:disabled,.button-base:disabled,.stylized-toggle:disabled,.btn:disabled),a:active:not(a:disabled,.clickable:disabled,.button-base:disabled,.stylized-toggle:disabled,.btn:disabled){scale:.95}.btn,.button-base,.stylized-toggle{border:none;outline:2px solid #0000;font-weight:500}.btn:focus-visible:not(.button-base:disabled):not(.stylized-toggle:disabled):not(.btn:disabled),.btn:hover:not(.button-base:disabled):not(.stylized-toggle:disabled):not(.btn:disabled),.button-base:focus-visible:not(.button-base:disabled):not(.stylized-toggle:disabled):not(.btn:disabled),.button-base:hover:not(.button-base:disabled):not(.stylized-toggle:disabled):not(.btn:disabled),.stylized-toggle:focus-visible:not(.button-base:disabled):not(.stylized-toggle:disabled):not(.btn:disabled),.stylized-toggle:hover:not(.button-base:disabled):not(.stylized-toggle:disabled):not(.btn:disabled){cursor:pointer}.btn:focus-visible:not(.button-base:disabled):not(.stylized-toggle:disabled):not(.btn:disabled):not(.btn-outline.btn-hover-filled,.btn-transparent),.btn:hover:not(.button-base:disabled):not(.stylized-toggle:disabled):not(.btn:disabled):not(.btn-outline.btn-hover-filled,.btn-transparent),.button-base:focus-visible:not(.button-base:disabled):not(.stylized-toggle:disabled):not(.btn:disabled):not(.btn-outline.btn-hover-filled,.btn-transparent),.button-base:hover:not(.button-base:disabled):not(.stylized-toggle:disabled):not(.btn:disabled):not(.btn-outline.btn-hover-filled,.btn-transparent),.stylized-toggle:focus-visible:not(.button-base:disabled):not(.stylized-toggle:disabled):not(.btn:disabled):not(.btn-outline.btn-hover-filled,.btn-transparent),.stylized-toggle:hover:not(.button-base:disabled):not(.stylized-toggle:disabled):not(.btn:disabled):not(.btn-outline.btn-hover-filled,.btn-transparent){filter:brightness(.85)}.btn:active:not(.button-base:disabled,.stylized-toggle:disabled,.btn:disabled,.btn-outline.btn-hover-filled,.btn-transparent),.button-base:active:not(.button-base:disabled,.stylized-toggle:disabled,.btn:disabled,.btn-outline.btn-hover-filled,.btn-transparent),.stylized-toggle:active:not(.button-base:disabled,.stylized-toggle:disabled,.btn:disabled,.btn-outline.btn-hover-filled,.btn-transparent){filter:brightness(.8)}.btn:disabled.quiet-disabled,.button-base:disabled.quiet-disabled,.stylized-toggle:disabled.quiet-disabled{cursor:unset}.btn:disabled:not(.quiet-disabled),.button-base:disabled:not(.quiet-disabled),.button-base[disabled]:not(.quiet-disabled),.stylized-toggle:disabled:not(.quiet-disabled),[disabled].btn:not(.quiet-disabled),[disabled].stylized-toggle:not(.quiet-disabled){cursor:not-allowed;filter:grayscale(50%);opacity:.5;box-shadow:none}.button-within{transition:opacity .5s ease-in-out,filter .2s ease-in-out,transform 50ms ease-in-out,outline .2s ease-in-out}.button-within:focus-visible:not(.button-within.disabled),.button-within:hover:not(.button-within.disabled){filter:brightness(.85)}.button-within:active:not(.button-within.disabled){filter:brightness(.8)}.button-within:active:not(.button-within.disabled) button:not(.button-within:disabled){transform:scale(.95)}.button-within.disabled{cursor:not-allowed;filter:grayscale(50%);opacity:.5;box-shadow:none}.button-within.disabled[disabled],.button-within.disableddisabled{cursor:not-allowed;box-shadow:none}.btn{--_text-color:var(--color-base);--_background-color:var(--color-button-bg);--_accent-color:var(--color-base);--_shadow:var(--shadow-inset-sm),0 0 0 0 transparent;box-sizing:border-box;color:var(--_text-color);background-color:var(--_background-color);box-shadow:var(--_shadow);border-radius:var(--radius-md);padding:var(--gap-sm)var(--gap-lg);cursor:pointer;align-items:center;gap:.5rem;width:fit-content;height:fit-content;line-height:1.25rem;text-decoration:none;display:flex}.btn.btn-outline,.btn.btn-transparent{box-sizing:border-box;box-shadow:none;background-color:#0000;transition:background-color .2s ease-in-out,border-color .2s ease-in-out,color .2s ease-in-out}.btn.btn-transparent{--_accent-color:var(--color-base);color:var(--_accent-color)}.btn.btn-transparent.btn-hover-filled-only{color:var(--color-base)}.btn.btn-transparent:focus-visible:not(.btn.btn-transparent:disabled),.btn.btn-transparent:hover:not(.btn.btn-transparent:disabled){background-color:var(--color-button-bg)}.btn.btn-transparent:focus-visible:not(.btn.btn-transparent:disabled).btn-hover-filled,.btn.btn-transparent:focus-visible:not(.btn.btn-transparent:disabled).btn-hover-filled-only,.btn.btn-transparent:hover:not(.btn.btn-transparent:disabled).btn-hover-filled,.btn.btn-transparent:hover:not(.btn.btn-transparent:disabled).btn-hover-filled-only{color:var(--_text-color);background-color:var(--_background-color)}.btn.btn-outline{--_accent-color:var(--color-contrast);border:2px solid var(--_accent-color);padding-block:calc(var(--gap-sm) - 2px);color:var(--_background-color)}.btn.btn-outline.btn-hover-filled-only{color:var(--color-contrast);border-color:var(--color-contrast)}.btn.btn-outline:focus-visible:not(.btn.btn-outline:disabled).btn-hover-filled,.btn.btn-outline:focus-visible:not(.btn.btn-outline:disabled).btn-hover-filled-only,.btn.btn-outline:hover:not(.btn.btn-outline:disabled).btn-hover-filled,.btn.btn-outline:hover:not(.btn.btn-outline:disabled).btn-hover-filled-only{border-color:var(--_accent-color);color:var(--_text-color);background-color:var(--_background-color)}.btn.btn-danger{--_text-color:var(--color-accent-contrast);--_background-color:var(--color-red);--_accent-color:var(--color-red)}.btn.btn-primary{--_text-color:var(--color-accent-contrast);--_background-color:var(--color-brand);--_accent-color:var(--color-brand)}.btn.btn-secondary{--_text-color:var(--color-contrast);--_background-color:var(--color-brand-highlight);--_accent-color:var(--color-brand-highlight)}.btn.btn-highlight{--_text-color:var(--color-accent-contrast);--_background-color:var(--color-orange);--_accent-color:var(--color-orange)}.btn.btn-red{--_text-color:var(--color-accent-contrast);--_background-color:var(--color-red);--_accent-color:var(--color-red)}.btn.btn-orange{--_text-color:var(--color-accent-contrast);--_background-color:var(--color-orange);--_accent-color:var(--color-orange)}.btn.btn-green{--_text-color:var(--color-accent-contrast);--_background-color:var(--color-green);--_accent-color:var(--color-green)}.btn.btn-blue{--_text-color:var(--color-accent-contrast);--_background-color:var(--color-blue);--_accent-color:var(--color-blue)}.btn.btn-purple{--_text-color:var(--color-accent-contrast);--_background-color:var(--color-purple);--_accent-color:var(--color-purple)}.btn.btn-gray{--_text-color:var(--color-accent-contrast);--_background-color:var(--color-gray);--_accent-color:var(--color-gray)}.btn svg{width:1.25rem;height:1.25rem}.btn .external-icon{width:.75rem;height:.75rem;margin-bottom:auto;margin-right:0}.btn.icon-only,.iconified-input .btn.r-btn{padding:var(--gap-sm)}.btn.transparent,.iconified-input .btn.r-btn{box-shadow:none;background:0 0}.btn.btn-large{padding:12px 16px;font-size:16px;font-weight:700}.btn.btn-large svg{width:1.5rem;height:1.5rem}.btn.btn-large-round{border-radius:50%;padding:.75rem}.btn.btn-dropdown-animation svg:last-child{transition:transform .125s ease-in-out}.btn.btn-dropdown-animation.popout-open svg:last-child{transform:rotate(180deg)}.btn-dropdown-animation svg:last-child{transition:transform .125s ease-in-out}.v-popper--shown .btn-dropdown-animation svg:last-child{transform:rotate(180deg)}.btn-group{grid-gap:var(--gap-sm);flex-wrap:wrap;display:flex}.joined-buttons{gap:1px;display:flex}.joined-buttons>:not(:first-child).btn,.joined-buttons>:not(:first-child)>.btn{border-top-left-radius:0;border-bottom-left-radius:0}.joined-buttons>:not(:last-child).btn,.joined-buttons>:not(:last-child)>.btn{border-top-right-radius:0;border-bottom-right-radius:0}.project-list{gap:var(--gap-md);width:100%;overflow:hidden}.project-list:not(:first-child){margin-top:var(--gap-md)}.project-list:not(:empty){margin-bottom:var(--gap-md)}.project-list.display-mode--list{flex-direction:column;display:flex}.project-list.display-mode--gallery{grid-template-columns:repeat(2,minmax(0,1fr));display:grid}@media screen and (width<=750px){.project-list.display-mode--gallery{grid-template-columns:repeat(1,minmax(0,1fr))}}.project-list.display-mode--grid{grid-template-columns:repeat(3,minmax(0,1fr));display:grid}@media screen and (width<=80rem){.project-list.display-mode--grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media screen and (width<=1024px){.project-list.display-mode--grid{grid-template-columns:repeat(3,minmax(0,1fr))}}@media screen and (width<=860px){.project-list.display-mode--grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media screen and (width<=550px){.project-list.display-mode--grid{flex-direction:column;display:flex}}.base-card,.card,.navigation-card{padding:var(--gap-xl);min-height:var(--font-size-2xl);background-color:var(--color-raised-bg);border-radius:var(--radius-lg);margin-bottom:var(--gap-md);box-shadow:var(--shadow-card);outline:2px solid #0000;position:relative}.base-card .card__overlay,.card .card__overlay,.navigation-card .card__overlay{grid-gap:.5rem;z-index:2;flex-direction:column;align-items:flex-end;display:flex;position:absolute;top:1rem;right:1rem}.base-card:where(.base-card.warning,.warning.navigation-card,.warning.card,.base-card.information,.information.navigation-card,.information.card),.card:where(.base-card.warning,.warning.navigation-card,.warning.card,.base-card.information,.information.navigation-card,.information.card),.navigation-card:where(.base-card.warning,.warning.navigation-card,.warning.card,.base-card.information,.information.navigation-card,.information.card){min-height:0;padding:1.5rem;line-height:1.5}.base-card:where(.base-card.warning,.warning.navigation-card,.warning.card,.base-card.information,.information.navigation-card,.information.card) a,.card:where(.base-card.warning,.warning.navigation-card,.warning.card,.base-card.information,.information.navigation-card,.information.card) a,.navigation-card:where(.base-card.warning,.warning.navigation-card,.warning.card,.base-card.information,.information.navigation-card,.information.card) a{color:var(--color-blue);text-decoration:underline}.navigation-card{padding-inline:var(--gap-xl);padding-block:var(--gap-md);flex-wrap:wrap;justify-content:space-between;align-items:center;row-gap:.5rem;display:flex}.wrap-as-needed{overflow-wrap:break-word;word-wrap:break-word;word-break:break-word;-webkit-hyphens:auto;hyphens:auto}.sr-only{width:0;height:0;position:absolute;overflow:hidden}.card-divider{background-color:var(--color-button-bg);color:var(--color-button-bg);height:1px;margin:var(--gap-sm)0;border:none}.table{border-radius:var(--radius-md);grid-template-rows:repeat(auto-fill,auto);width:100%;display:grid;overflow:hidden}.table .table-row{transition:opacity .5s ease-in-out,filter .2s ease-in-out,scale 50ms ease-in-out,outline .2s ease-in-out;display:grid}.table .table-row.selectable:focus-visible,.table .table-row.selectable:hover{cursor:pointer;filter:brightness(.85)}.table .table-row.selectable:active{filter:brightness(.8);scale:.99}.table .entire-row{align-items:center;grid-template-columns:1fr!important}.table .table-head .table-cell{background-color:var(--color-accent-contrast)}.table .table-cell{height:100%;vertical-align:center;padding:1rem;display:flex}.table .name-cell{padding-left:0}.table .table-text{white-space:nowrap;text-overflow:fade;overflow:hidden}.table .table-row:nth-child(2n) .table-cell{background-color:var(--color-bg)}.textarea-wrapper{flex-direction:column;align-items:stretch;display:flex}.textarea-wrapper textarea{border-radius:var(--radius-sm);resize:none;flex:1;max-width:100%;overflow-y:auto}.resizable-textarea-wrapper{flex-grow:1;width:100%;margin-bottom:0;display:block}.resizable-textarea-wrapper textarea{border-radius:var(--radius-sm);height:100%;width:calc(100% - var(--gap-xl) - var(--gap-sm));resize:vertical}.switch{-webkit-appearance:none;-moz-appearance:none;appearance:none;-webkit-tap-highlight-color:transparent;cursor:pointer}.stylized-toggle{box-sizing:content-box;border-radius:var(--radius-max);background:var(--color-button-bg);min-width:52px;max-width:52px;height:32px;min-height:32px;margin:0;transition:all .2s;display:inline-block;position:relative}.stylized-toggle:after{content:"";background:var(--color-gray);border-radius:50%;outline:2px solid #0000;width:18px;height:18px;transition:all .2s cubic-bezier(.5,.1,.75,1.35);position:absolute;top:7px;left:7px}@media (prefers-reduced-motion){.stylized-toggle:after{transition:none}}.stylized-toggle:checked{background-color:var(--color-brand)}.stylized-toggle:checked:after{background:var(--color-accent-contrast);transform:translate(20px)}.stylized-toggle:hover .stylized-toggle:focus{background:var(--color-button-bg)}.v-popper--theme-dropdown .v-popper__inner,.v-popper--theme-dropdown.v-popper--theme-ribbit-popout .v-popper__inner{border:1px solid var(--color-button-bg)!important;padding:var(--gap-sm)!important;border-radius:var(--radius-md)!important;background-color:var(--color-raised-bg)!important;width:fit-content!important;box-shadow:var(--shadow-floating)!important}.v-popper--theme-dropdown .v-popper__arrow-outer,.v-popper--theme-dropdown.v-popper--theme-ribbit-popout .v-popper__arrow-outer{border-color:var(--color-button-bg)!important}.v-popper--theme-dropdown .v-popper__arrow-inner,.v-popper--theme-dropdown.v-popper--theme-ribbit-popout .v-popper__arrow-inner{border-color:var(--color-raised-bg)!important}.v-popper__popper[data-popper-placement=bottom-end] .v-popper__wrapper{transform-origin:100% 0}.v-popper__popper[data-popper-placement=top-end] .v-popper__wrapper{transform-origin:100% 100%}.v-popper__popper[data-popper-placement=bottom-start] .v-popper__wrapper{transform-origin:0 0}.v-popper__popper[data-popper-placement=top-start] .v-popper__wrapper{transform-origin:0 100%}.v-popper__popper.v-popper__popper--show-from .v-popper__wrapper{opacity:0;transform:scale(.85)}.v-popper__popper.v-popper__popper--show-to .v-popper__wrapper{opacity:1;transition:transform .125s ease-in-out,opacity .125s ease-in-out;transform:scale(1)}.v-popper__popper.v-popper__popper--hide-from .v-popper__wrapper{opacity:1;transition:transform 62.5ms;transform:none}.v-popper--theme-tooltip .v-popper__inner{filter:drop-shadow(5px 5px .8rem #00000059);font-size:.9rem;font-weight:700;line-height:1;background:var(--color-tooltip-bg)!important;color:var(--color-tooltip-text)!important;border-radius:var(--radius-sm)!important;padding:.5rem!important}.v-popper--theme-tooltip .v-popper__arrow-inner,.v-popper--theme-tooltip .v-popper__arrow-outer{border-color:var(--color-tooltip-bg)}.v-popper--theme-dismissable-prompt{z-index:10}.v-popper--theme-dismissable-prompt .v-popper__inner{border:1px solid var(--color-button-border);filter:drop-shadow(5px 5px .8rem #00000059);font-size:.9rem;font-weight:700;line-height:1;background:var(--color-raised-bg)!important;color:var(--color-tooltip-text)!important;border-radius:.75rem!important;padding:.75rem 1rem!important}.v-popper--theme-dismissable-prompt .v-popper__arrow-outer{border-color:var(--color-button-border)}.v-popper--theme-dismissable-prompt .v-popper__arrow-inner{border-color:var(--color-raised-bg)}.markdown-body h1:first-child{margin-block-start:0;padding-block-start:0}.markdown-body blockquote,.markdown-body code,.markdown-body details,.markdown-body dl,.markdown-body ol,.markdown-body p,.markdown-body pre,.markdown-body table,.markdown-body ul{margin-top:0;margin-bottom:16px}.markdown-body li,.markdown-body p{padding:0;line-height:1.5}.markdown-body h1{display:block}.markdown-body h1,.markdown-body h2,.markdown-body h3{color:var(--color-contrast)}.markdown-body h1,.markdown-body h2{border-bottom:1px solid var(--color-divider);padding:10px 0 5px}.markdown-body h1,.markdown-body h2,.markdown-body h3,.markdown-body h4,.markdown-body h5,.markdown-body h6,.markdown-body li,.markdown-body p{word-wrap:break-word;overflow-wrap:anywhere}.markdown-body blockquote{color:var(--color-base);border-left:.25em solid var(--color-button-bg);margin-inline:0;padding:0 1em}.markdown-body a{cursor:pointer;color:var(--color-blue)}.markdown-body a:focus-visible,.markdown-body a:hover{filter:brightness(1.2);text-decoration:none}.markdown-body a:active{filter:brightness(1.1);text-decoration:none}.markdown-body a:active>img{scale:.98}.markdown-body img{max-width:100%;height:auto;display:inline-block}html:not(.dark-mode,.oled-mode) .markdown-body img[src$=\#gh-dark-mode-only],html:is(.dark-mode,.oled-mode) .markdown-body img[src$=\#gh-light-mode-only]{display:none}.markdown-body pre{border-radius:var(--radius-sm);background-color:var(--color-button-bg);margin-top:1rem;padding:14px;overflow-x:auto}.markdown-body pre code{border-radius:0;padding:0;font-size:80%}.markdown-body code{border-radius:var(--radius-sm);background-color:var(--color-button-bg);color:var(--color-contrast);padding:.2em .4em;font-size:80%}.markdown-body hr{color:var(--color-button-bg);margin:20px 0}.markdown-body table{border-collapse:separate;border-spacing:0;border:.1rem solid var(--color-button-bg);border-radius:var(--radius-sm);width:max-content;max-width:100%;line-height:1.5;display:block;overflow:auto}.markdown-body table th{font-weight:600}.markdown-body table td,.markdown-body table th{padding:.4rem .85rem}.markdown-body table tr:nth-child(2n){background-color:var(--color-accent-contrast)}.markdown-body table td:not(:last-of-type),.markdown-body table th:not(:last-of-type){border-right:.1rem solid var(--color-button-bg)}.markdown-body table th,.markdown-body table tr:not(:last-of-type) td{border-bottom:.1rem solid var(--color-button-bg)}.markdown-body details{border:.15rem solid var(--color-button-bg);border-radius:var(--radius-sm);padding:.5rem .5rem 0}.markdown-body details summary{cursor:pointer;background-color:var(--color-button-bg);border-radius:var(--radius-xs);margin:-.5rem -.5rem 0;padding:.5rem .8rem;font-weight:700}.markdown-body details summary:hover{filter:brightness(.85)}.markdown-body details[open]{padding:.5rem}.markdown-body details[open] summary{border-radius:var(--radius-xs)var(--radius-xs)0 0;margin-bottom:.5rem}.markdown-body details[open]>:last-child:not(summary),.markdown-body>:last-child{margin-bottom:0!important}.markdown-body iframe,.markdown-body video{aspect-ratio:16/9;width:850px;max-width:100%;height:auto}@media screen and (width<=1280px){.markdown-body iframe,.markdown-body video{width:100%}}select{-webkit-appearance:none;-moz-appearance:none;appearance:none;color:#000;background:#ccc url(http://dropdown/arrow/url/) 100% no-repeat;border:1px solid #000;border-radius:3px}.goto-link{color:var(--color-blue);align-items:center;gap:3px;display:flex}.goto-link:focus-visible,.goto-link:hover{filter:brightness(1.1);text-decoration:underline}.goto-link:active{filter:brightness(1.2)}.multiselect{outline:2px solid #0000;color:var(--color-base)!important;width:100%!important}.multiselect .multiselect__input:focus-visible{margin-bottom:10px;margin-left:.5rem;box-shadow:none!important;outline:0!important;min-height:0!important;padding:0!important;font-weight:400!important}.multiselect input{box-shadow:none;background:0 0;border:none!important}.multiselect input:focus{box-shadow:none}.multiselect input::-moz-placeholder{color:var(--color-base)}.multiselect input::placeholder{color:var(--color-base)}.multiselect .multiselect__tags{border-radius:var(--radius-md);background:var(--color-button-bg);box-shadow:var(--shadow-inset-sm);cursor:pointer;border:none;padding-top:10px;padding-left:7px;font-size:1rem;transition:background-color .1s ease-in-out}.multiselect .multiselect__tags:active,.multiselect .multiselect__tags:active .multiselect__spinner{filter:brightness(1.25)}.multiselect .multiselect__tags .multiselect__single{background:0 0}.multiselect .multiselect__tags .multiselect__tag{border-radius:var(--radius-md);color:var(--color-base);border:2px solid var(--color-brand);background:0 0}.multiselect .multiselect__tags .multiselect__tag-icon{background:0 0}.multiselect .multiselect__tags .multiselect__tag-icon:after{color:var(--color-contrast)}.multiselect .multiselect__tags .multiselect__placeholder{color:var(--color-base);opacity:.6;margin-bottom:8px;margin-left:.5rem;font-size:1rem;line-height:16px}.multiselect .multiselect__content-wrapper{background:var(--color-button-bg);box-shadow:var(--shadow-inset-sm),var(--shadow-floating);border:none;width:100%;overflow-x:hidden}.multiselect .multiselect__content-wrapper .multiselect__element .multiselect__option--highlight{background:var(--color-button-bg);filter:brightness(1.25);color:var(--color-contrast)}.multiselect .multiselect__content-wrapper .multiselect__element .multiselect__option--selected{background:var(--color-brand);color:var(--color-accent-contrast);font-weight:700}.multiselect .multiselect__spinner{background:var(--color-button-bg)}.multiselect .multiselect__spinner:active{filter:brightness(1.25)}.multiselect.multiselect--disabled,.multiselect.multiselect--disabled .multiselect__current,.multiselect.multiselect--disabled .multiselect__select{background:0 0}.multiselect--above .multiselect__content-wrapper{border-top-left-radius:var(--radius-md)!important;border-top-right-radius:var(--radius-md)!important;border-top:none!important}.preview-radio{border-radius:var(--radius-md);border:1px solid var(--color-divider);background-color:var(--color-button-bg);color:var(--color-base);outline:2px solid #0000;flex-direction:column;padding:0;display:flex;overflow:hidden;width:100%!important}.preview-radio.selected{color:var(--color-contrast)}.preview-radio.selected .label .radio{color:var(--color-brand)}.preview-radio.selected .label .theme-icon{color:var(--color-text)}.preview-radio .preview{background-color:var(--color-bg);outline:2px solid #0000;width:100%;padding:1.5rem}.preview-radio .preview .example-card{outline:2px solid #0000;min-height:0;margin:0;padding:1rem}.preview-radio .label{text-align:left;padding:var(--gap-md)var(--gap-lg);flex-grow:1;align-items:center;display:flex}.preview-radio .label .radio{margin-right:.5rem}.preview-radio .label .theme-icon{color:var(--color-secondary);margin-left:.25rem}*{box-sizing:border-box}body{background-color:var(--color-bg);color:var(--color-base);--font-standard:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Oxygen,Ubuntu,Roboto,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;--mono-font:ui-monospace,SFMono-Regular,SF Mono,Menlo,Consolas,Liberation Mono,monospace;font-family:var(--font-standard);font-size:16px;font-weight:var(--font-weight-regular);--font-size-xxs:.625rem;--font-size-xs:.75rem;--font-size-sm:.875rem;--font-size-nm:1rem;--font-size-md:1.125rem;--font-size-lg:1.25rem;--font-size-xl:1.5rem;--font-size-2xl:2rem;--font-size-3xl:3rem;--font-weight-regular:400;--font-weight-medium:500;--font-weight-bold:700;--font-weight-extrabold:800;--font-weight-text:var(--font-weight-medium);--font-weight-heading:var(--font-weight-extrabold);--font-weight-title:var(--font-weight-extrabold);margin:0;padding:0}a.uncolored{color:inherit}.cm-content,.input-text-inherit,input[type=number],input[type=password],input[type=text],input[type=url],textarea{border-radius:var(--radius-md);box-sizing:border-box;background:var(--color-button-bg);color:var(--color-base);font-weight:var(--font-weight-medium);min-height:36px;box-shadow:var(--shadow-inset-sm),0 0 0 0 transparent;border:none;outline:0;padding:.5rem 1rem;transition:box-shadow .1s ease-in-out;-webkit-appearance:none!important;-moz-appearance:none!important;appearance:none!important}.cm-content:focus,.cm-content:focus-visible,.input-text-inherit:focus,.input-text-inherit:focus-visible,input[type=number]:focus,input[type=number]:focus-visible,input[type=password]:focus,input[type=password]:focus-visible,input[type=text]:focus,input[type=text]:focus-visible,input[type=url]:focus,input[type=url]:focus-visible,textarea:focus,textarea:focus-visible{box-shadow:inset 0 0 0 transparent,0 0 0 .25rem var(--color-brand-shadow);color:var(--color-contrast);outline:0}.cm-content:disabled,.cm-content[disabled],.input-text-inherit:disabled,.input-text-inherit[disabled],input[type=number]:disabled,input[type=number][disabled],input[type=password]:disabled,input[type=password][disabled],input[type=text]:disabled,input[type=text][disabled],input[type=url]:disabled,input[type=url][disabled],textarea:disabled,textarea[disabled]{opacity:.6;pointer-events:none;cursor:not-allowed}.cm-content:focus::-moz-placeholder,.input-text-inherit:focus::-moz-placeholder,input[type=number]:focus::-moz-placeholder,input[type=password]:focus::-moz-placeholder,input[type=text]:focus::-moz-placeholder,input[type=url]:focus::-moz-placeholder,textarea:focus::-moz-placeholder{opacity:.8}.cm-content:focus::placeholder,.input-text-inherit:focus::placeholder,input[type=number]:focus::placeholder,input[type=password]:focus::placeholder,input[type=text]:focus::placeholder,input[type=url]:focus::placeholder,textarea:focus::placeholder{opacity:.8}.cm-content::-moz-placeholder,.input-text-inherit::-moz-placeholder,input[type=number]::-moz-placeholder,input[type=password]::-moz-placeholder,input[type=text]::-moz-placeholder,input[type=url]::-moz-placeholder,textarea::-moz-placeholder{color:var(--color-base);opacity:.6}.cm-content::placeholder,.input-text-inherit::placeholder,input[type=number]::placeholder,input[type=password]::placeholder,input[type=text]::placeholder,input[type=url]::placeholder,textarea::placeholder{color:var(--color-base);opacity:.6}.cm-content{white-space:pre-wrap!important}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.dropdown-input{flex-direction:row;gap:1px;display:flex}.dropdown-input .animated-dropdown{width:unset}.dropdown-input .animated-dropdown .selected{border-radius:var(--radius-md)0 0 var(--radius-md)}.dropdown-input .animated-dropdown .selected.render-down{border-radius:var(--radius-md)0 0 0}.dropdown-input .animated-dropdown .selected.render-up{border-radius:0 0 0 var(--radius-md)}.dropdown-input input{border-radius:0 var(--radius-md)var(--radius-md)0}.iconified-input{align-items:center;display:inline-flex;position:relative}.iconified-input input{width:100%;padding:0 .5rem 0 2.5rem}.iconified-input:focus-within svg{opacity:1;color:var(--color-contrast)}.iconified-input svg{z-index:1;width:1.25rem;height:1.25rem;color:var(--color-base);opacity:.6;position:absolute;left:.75rem}.iconified-input .r-btn{z-index:1;position:absolute;right:.125rem}.iconified-input .r-btn svg{position:relative;left:0}svg{width:1em;height:1em}.chart svg{width:100%;height:100%}.button-animation{transition:opacity .5s ease-in-out,filter .2s ease-in-out,transform 50ms ease-in-out,outline .2s ease-in-out}.button-animation:active:not(.button-animation:disabled){transform:scale(.95)}button:disabled,input:disabled{cursor:not-allowed!important}@media (prefers-reduced-motion){.button-animation,button{transform:none!important}}h1{color:var(--color-contrast)}h2{color:var(--color-contrast);margin-top:0;margin-bottom:1rem}h3{margin-block:var(--gap-md)var(--gap-md);color:var(--color-contrast)}.hljs,.hljs-subst{color:#444}.hljs-comment{color:#888}.hljs-attribute,.hljs-doctag,.hljs-keyword,.hljs-meta-keyword,.hljs-name,.hljs-selector-tag{color:#f58300;font-weight:700}.hljs-deletion,.hljs-number,.hljs-quote,.hljs-selector-class,.hljs-selector-id,.hljs-string,.hljs-template-tag,.hljs-type{color:var(--color-brand)}.hljs-section,.hljs-title{color:#088;font-weight:700}.hljs-link,.hljs-regexp,.hljs-selector-attr,.hljs-selector-pseudo,.hljs-symbol,.hljs-template-variable,.hljs-variable{color:#bc6060}.hljs-literal{color:#78a960}.hljs-addition,.hljs-built_in,.hljs-bullet,.hljs-code{color:#f58300}.hljs-meta{color:#1f7199}.hljs-meta-string{color:#4d99bf}.hljs-emphasis{font-style:italic}.hljs-strong{font-weight:700}pre{border-width:5px;border-color:var(--color-button-bg);background-color:#222;border-radius:2em;padding:1em;overflow-x:hidden}pre code{letter-spacing:-.05em;word-break:normal;padding:.2em;font-family:monospace;line-height:100%}[tabindex="0"]:focus-visible,a:focus-visible,button:focus-visible{border-radius:.25rem;outline:.25rem solid #ea80ff}@font-face{font-family:inter;font-style:normal;font-weight:400;font-display:swap;src:url(https://cdn-raw.modrinth.com/fonts/inter/Inter-Regular.woff2?v=3.19)format("woff2"),url(https://cdn-raw.modrinth.com/fonts/inter/Inter-Regular.woff?v=3.19)format("woff")}@font-face{font-family:inter;font-style:normal;font-weight:500;font-display:swap;src:url(https://cdn-raw.modrinth.com/fonts/inter/Inter-Medium.woff2?v=3.19)format("woff2"),url(https://cdn-raw.modrinth.com/fonts/inter/Inter-Medium.woff?v=3.19)format("woff")}@font-face{font-family:inter;font-style:normal;font-weight:600;font-display:swap;src:url(https://cdn-raw.modrinth.com/fonts/inter/Inter-SemiBold.woff2?v=3.19)format("woff2"),url(https://cdn-raw.modrinth.com/fonts/inter/Inter-SemiBold.woff?v=3.19)format("woff")}@font-face{font-family:inter;font-style:normal;font-weight:700;font-display:swap;src:url(https://cdn-raw.modrinth.com/fonts/inter/Inter-Bold.woff2?v=3.19)format("woff2"),url(https://cdn-raw.modrinth.com/fonts/inter/Inter-Bold.woff?v=3.19)format("woff")}@font-face{font-family:inter;font-style:normal;font-weight:800;font-display:swap;src:url(https://cdn-raw.modrinth.com/fonts/inter/Inter-ExtraBold.woff2?v=3.19)format("woff2"),url(https://cdn-raw.modrinth.com/fonts/inter/Inter-ExtraBold.woff?v=3.19)format("woff")}.accordion-content[data-v-6a5abcd2]{grid-template-rows:0fr;transition:grid-template-rows .3s ease-in-out;display:grid}@media (prefers-reduced-motion){.accordion-content[data-v-6a5abcd2]{transition:none!important}}.accordion-content.open[data-v-6a5abcd2]{grid-template-rows:1fr}.accordion-content>div[data-v-6a5abcd2]{overflow:hidden}.avatar[data-v-66850a31]{height:var(--_size);min-height:var(--_size);width:var(--_size);min-width:var(--_size);--_size:2rem;border:1px solid var(--color-button-border);background-color:var(--color-button-bg);-o-object-fit:contain;object-fit:contain;border-radius:calc(.166667*var(--_size));position:relative}.avatar.circle[data-v-66850a31]{border-radius:50%}.avatar[data-v-66850a31]:not(.no-shadow){box-shadow:var(--shadow-card)}.avatar.no-shadow[data-v-66850a31]{box-shadow:none}.avatar.pixelated[data-v-66850a31]{image-rendering:pixelated}.avatar.raised[data-v-66850a31]{background-color:var(--color-raised-bg)}.avatar.tint[data-v-66850a31]{background-color:color-mix(in oklch,var(--color-button-bg)100%,var(--_tint)5%)}.version-badge[data-v-19fea578]{--badge-color:var(--color-gray);width:fit-content;color:var(--badge-color);align-items:center;font-weight:700;display:flex}.version-badge .circle[data-v-19fea578]{background-color:var(--badge-color);border-radius:50%;width:.5rem;height:.5rem;margin-right:.25rem;display:inline-block}.version-badge svg[data-v-19fea578]{margin-right:.25rem}.version-badge.red[data-v-19fea578],.version-badge.type--closed[data-v-19fea578],.version-badge.type--failed[data-v-19fea578],.version-badge.type--rejected[data-v-19fea578],.version-badge.type--returned[data-v-19fea578],.version-badge.type--withheld[data-v-19fea578]{--badge-color:var(--color-red)}.version-badge.orange[data-v-19fea578],.version-badge.type--moderator[data-v-19fea578],.version-badge.type--pending[data-v-19fea578],.version-badge.type--processing[data-v-19fea578],.version-badge.type--scheduled[data-v-19fea578]{--badge-color:var(--color-orange)}.version-badge.green[data-v-19fea578],.version-badge.type--accepted[data-v-19fea578],.version-badge.type--admin[data-v-19fea578],.version-badge.type--approved-general[data-v-19fea578],.version-badge.type--processed[data-v-19fea578]{--badge-color:var(--color-green)}.version-badge.blue[data-v-19fea578],.version-badge.type--approved[data-v-19fea578],.version-badge.type--creator[data-v-19fea578]{--badge-color:var(--color-blue)}.version-badge.purple[data-v-19fea578],.version-badge.type--unlisted[data-v-19fea578]{--badge-color:var(--color-purple)}.version-badge.gray[data-v-19fea578],.version-badge.type--private[data-v-19fea578]{--badge-color:var(--color-gray)}.version-badge[data-v-19fea578]:first-letter{text-transform:capitalize}:where(button[data-v-c22e7a78]){color:var(--color-base);background:0 0}.btn-wrapper[data-v-0c00cdf8]{display:contents}.btn-wrapper :is(button[data-v-0c00cdf8-s],a[data-v-0c00cdf8-s],.button-like[data-v-0c00cdf8-s]):first-child,.btn-wrapper [data-v-0c00cdf8-s]>:first-child>:first-child>:is(button,a,.button-like):first-child,.btn-wrapper [data-v-0c00cdf8-s]>:first-child>:is(button,a,.button-like):first-child,.btn-wrapper [data-v-0c00cdf8-s]>:is(button,a,.button-like):first-child,.btn-wrapper[data-v-0c00cdf8] :is(button,a,.button-like):first-child{height:var(--_height);min-width:var(--_width);cursor:pointer;justify-content:center;align-items:center;gap:var(--_gap);white-space:nowrap;border-radius:var(--_radius);background-color:var(--_bg);padding-left:var(--_padding-x);padding-right:var(--_padding-x);padding-top:var(--_padding-y);padding-bottom:var(--_padding-y);font-weight:var(--_font-weight);color:var(--_text);border:2px solid #0000;flex-direction:row;transition:scale .125s ease-in-out,background-color .25s ease-in-out,color .25s ease-in-out;display:flex}.btn-wrapper :is(button[data-v-0c00cdf8-s],a[data-v-0c00cdf8-s],.button-like[data-v-0c00cdf8-s]):first-child svg:first-child,.btn-wrapper [data-v-0c00cdf8-s]>:first-child>:first-child>:is(button,a,.button-like):first-child svg:first-child,.btn-wrapper [data-v-0c00cdf8-s]>:first-child>:is(button,a,.button-like):first-child svg:first-child,.btn-wrapper [data-v-0c00cdf8-s]>:is(button,a,.button-like):first-child svg:first-child,.btn-wrapper[data-v-0c00cdf8] :is(button,a,.button-like):first-child svg:first-child{color:var(--_icon,var(--_text));flex-shrink:0;transition:color .25s ease-in-out}.btn-wrapper :is(button[data-v-0c00cdf8-s],a[data-v-0c00cdf8-s],.button-like[data-v-0c00cdf8-s]):first-child.disabled,.btn-wrapper :is(button[data-v-0c00cdf8-s],a[data-v-0c00cdf8-s],.button-like[data-v-0c00cdf8-s]):first-child.looks-disabled,.btn-wrapper :is(button[data-v-0c00cdf8-s],a[data-v-0c00cdf8-s],.button-like[data-v-0c00cdf8-s]):first-child[disabled=true],.btn-wrapper :is(button[data-v-0c00cdf8-s],a[data-v-0c00cdf8-s],.button-like[data-v-0c00cdf8-s]):first-child[disabled],.btn-wrapper [data-v-0c00cdf8-s]>:first-child>:first-child>:is(button,a,.button-like):first-child.disabled,.btn-wrapper [data-v-0c00cdf8-s]>:first-child>:first-child>:is(button,a,.button-like):first-child.looks-disabled,.btn-wrapper [data-v-0c00cdf8-s]>:first-child>:first-child>:is(button,a,.button-like):first-child[disabled=true],.btn-wrapper [data-v-0c00cdf8-s]>:first-child>:first-child>:is(button,a,.button-like):first-child[disabled],.btn-wrapper [data-v-0c00cdf8-s]>:first-child>:is(button,a,.button-like):first-child.disabled,.btn-wrapper [data-v-0c00cdf8-s]>:first-child>:is(button,a,.button-like):first-child.looks-disabled,.btn-wrapper [data-v-0c00cdf8-s]>:first-child>:is(button,a,.button-like):first-child[disabled=true],.btn-wrapper [data-v-0c00cdf8-s]>:first-child>:is(button,a,.button-like):first-child[disabled],.btn-wrapper [data-v-0c00cdf8-s]>:is(button,a,.button-like):first-child.disabled,.btn-wrapper [data-v-0c00cdf8-s]>:is(button,a,.button-like):first-child.looks-disabled,.btn-wrapper [data-v-0c00cdf8-s]>:is(button,a,.button-like):first-child[disabled=true],.btn-wrapper [data-v-0c00cdf8-s]>:is(button,a,.button-like):first-child[disabled],.btn-wrapper[data-v-0c00cdf8] :is(button,a,.button-like):first-child.disabled,.btn-wrapper[data-v-0c00cdf8] :is(button,a,.button-like):first-child.looks-disabled,.btn-wrapper[data-v-0c00cdf8] :is(button,a,.button-like):first-child[disabled=true],.btn-wrapper[data-v-0c00cdf8] :is(button,a,.button-like):first-child[disabled]{opacity:.5}.btn-wrapper :is(button[data-v-0c00cdf8-s],a[data-v-0c00cdf8-s],.button-like[data-v-0c00cdf8-s]):first-child.disabled,.btn-wrapper :is(button[data-v-0c00cdf8-s],a[data-v-0c00cdf8-s],.button-like[data-v-0c00cdf8-s]):first-child[disabled=true],.btn-wrapper :is(button[data-v-0c00cdf8-s],a[data-v-0c00cdf8-s],.button-like[data-v-0c00cdf8-s]):first-child[disabled],.btn-wrapper [data-v-0c00cdf8-s]>:first-child>:first-child>:is(button,a,.button-like):first-child.disabled,.btn-wrapper [data-v-0c00cdf8-s]>:first-child>:first-child>:is(button,a,.button-like):first-child[disabled=true],.btn-wrapper [data-v-0c00cdf8-s]>:first-child>:first-child>:is(button,a,.button-like):first-child[disabled],.btn-wrapper [data-v-0c00cdf8-s]>:first-child>:is(button,a,.button-like):first-child.disabled,.btn-wrapper [data-v-0c00cdf8-s]>:first-child>:is(button,a,.button-like):first-child[disabled=true],.btn-wrapper [data-v-0c00cdf8-s]>:first-child>:is(button,a,.button-like):first-child[disabled],.btn-wrapper [data-v-0c00cdf8-s]>:is(button,a,.button-like):first-child.disabled,.btn-wrapper [data-v-0c00cdf8-s]>:is(button,a,.button-like):first-child[disabled=true],.btn-wrapper [data-v-0c00cdf8-s]>:is(button,a,.button-like):first-child[disabled],.btn-wrapper[data-v-0c00cdf8] :is(button,a,.button-like):first-child.disabled,.btn-wrapper[data-v-0c00cdf8] :is(button,a,.button-like):first-child[disabled=true],.btn-wrapper[data-v-0c00cdf8] :is(button,a,.button-like):first-child[disabled]{cursor:not-allowed}.btn-wrapper :is(button[data-v-0c00cdf8-s],a[data-v-0c00cdf8-s],.button-like[data-v-0c00cdf8-s]):first-child:not([disabled]):not([disabled=true]):not(.disabled):hover,.btn-wrapper [data-v-0c00cdf8-s]>:first-child>:first-child>:is(button,a,.button-like):first-child:not([disabled]):not([disabled=true]):not(.disabled):hover,.btn-wrapper [data-v-0c00cdf8-s]>:first-child>:is(button,a,.button-like):first-child:not([disabled]):not([disabled=true]):not(.disabled):hover,.btn-wrapper [data-v-0c00cdf8-s]>:is(button,a,.button-like):first-child:not([disabled]):not([disabled=true]):not(.disabled):hover,.btn-wrapper[data-v-0c00cdf8] :is(button,a,.button-like):first-child:not([disabled]):not([disabled=true]):not(.disabled):hover,.btn-wrapper :is(button[data-v-0c00cdf8-s],a[data-v-0c00cdf8-s],.button-like[data-v-0c00cdf8-s]):first-child:not([disabled]):not([disabled=true]):not(.disabled):focus-visible,.btn-wrapper [data-v-0c00cdf8-s]>:first-child>:first-child>:is(button,a,.button-like):first-child:not([disabled]):not([disabled=true]):not(.disabled):focus-visible,.btn-wrapper [data-v-0c00cdf8-s]>:first-child>:is(button,a,.button-like):first-child:not([disabled]):not([disabled=true]):not(.disabled):focus-visible,.btn-wrapper [data-v-0c00cdf8-s]>:is(button,a,.button-like):first-child:not([disabled]):not([disabled=true]):not(.disabled):focus-visible,.btn-wrapper[data-v-0c00cdf8] :is(button,a,.button-like):first-child:not([disabled]):not([disabled=true]):not(.disabled):focus-visible{background-color:var(--_hover-bg);color:var(--_hover-text);--tw-brightness:brightness(var(--hover-brightness));filter:var(--tw-blur)var(--tw-brightness)var(--tw-contrast)var(--tw-grayscale)var(--tw-hue-rotate)var(--tw-invert)var(--tw-saturate)var(--tw-sepia)var(--tw-drop-shadow)}.btn-wrapper :is(button[data-v-0c00cdf8-s],a[data-v-0c00cdf8-s],.button-like[data-v-0c00cdf8-s]):first-child:not([disabled]):not([disabled=true]):not(.disabled):active,.btn-wrapper [data-v-0c00cdf8-s]>:first-child>:first-child>:is(button,a,.button-like):first-child:not([disabled]):not([disabled=true]):not(.disabled):active,.btn-wrapper [data-v-0c00cdf8-s]>:first-child>:is(button,a,.button-like):first-child:not([disabled]):not([disabled=true]):not(.disabled):active,.btn-wrapper [data-v-0c00cdf8-s]>:is(button,a,.button-like):first-child:not([disabled]):not([disabled=true]):not(.disabled):active,.btn-wrapper[data-v-0c00cdf8] :is(button,a,.button-like):first-child:not([disabled]):not([disabled=true]):not(.disabled):active{--tw-scale-x:.95;--tw-scale-y:.95;transform:translate(var(--tw-translate-x),var(--tw-translate-y))rotate(var(--tw-rotate))skew(var(--tw-skew-x))skewY(var(--tw-skew-y))scaleX(var(--tw-scale-x))scaleY(var(--tw-scale-y))}.btn-wrapper :is(button[data-v-0c00cdf8-s],a[data-v-0c00cdf8-s],.button-like[data-v-0c00cdf8-s]):first-child:not([disabled]):not([disabled=true]):not(.disabled):focus-visible svg:first-child,.btn-wrapper :is(button[data-v-0c00cdf8-s],a[data-v-0c00cdf8-s],.button-like[data-v-0c00cdf8-s]):first-child:not([disabled]):not([disabled=true]):not(.disabled):hover svg:first-child,.btn-wrapper [data-v-0c00cdf8-s]>:first-child>:first-child>:is(button,a,.button-like):first-child:not([disabled]):not([disabled=true]):not(.disabled):focus-visible svg:first-child,.btn-wrapper [data-v-0c00cdf8-s]>:first-child>:first-child>:is(button,a,.button-like):first-child:not([disabled]):not([disabled=true]):not(.disabled):hover svg:first-child,.btn-wrapper [data-v-0c00cdf8-s]>:first-child>:is(button,a,.button-like):first-child:not([disabled]):not([disabled=true]):not(.disabled):focus-visible svg:first-child,.btn-wrapper [data-v-0c00cdf8-s]>:first-child>:is(button,a,.button-like):first-child:not([disabled]):not([disabled=true]):not(.disabled):hover svg:first-child,.btn-wrapper [data-v-0c00cdf8-s]>:is(button,a,.button-like):first-child:not([disabled]):not([disabled=true]):not(.disabled):focus-visible svg:first-child,.btn-wrapper [data-v-0c00cdf8-s]>:is(button,a,.button-like):first-child:not([disabled]):not([disabled=true]):not(.disabled):hover svg:first-child,.btn-wrapper[data-v-0c00cdf8] :is(button,a,.button-like):first-child:not([disabled]):not([disabled=true]):not(.disabled):focus-visible svg:first-child,.btn-wrapper[data-v-0c00cdf8] :is(button,a,.button-like):first-child:not([disabled]):not([disabled=true]):not(.disabled):hover svg:first-child{color:var(--_hover-icon,var(--_hover-text))}.btn-wrapper.outline :is(button[data-v-0c00cdf8-s],a[data-v-0c00cdf8-s],.button-like[data-v-0c00cdf8-s]):first-child,.btn-wrapper.outline [data-v-0c00cdf8-s]>:first-child>:first-child>:is(button,a,.button-like):first-child,.btn-wrapper.outline [data-v-0c00cdf8-s]>:first-child>:is(button,a,.button-like):first-child,.btn-wrapper.outline [data-v-0c00cdf8-s]>:is(button,a,.button-like):first-child,.btn-wrapper.outline[data-v-0c00cdf8] :is(button,a,.button-like):first-child{border-color:currentColor}.btn-wrapper :is(button[data-v-0c00cdf8-s],a[data-v-0c00cdf8-s],.button-like[data-v-0c00cdf8-s]):first-child>svg:first-child,.btn-wrapper [data-v-0c00cdf8-s]>:first-child>:first-child>:is(button,a,.button-like):first-child>svg:first-child,.btn-wrapper [data-v-0c00cdf8-s]>:first-child>:is(button,a,.button-like):first-child>svg:first-child,.btn-wrapper [data-v-0c00cdf8-s]>:is(button,a,.button-like):first-child>svg:first-child,.btn-wrapper[data-v-0c00cdf8] :is(button,a,.button-like):first-child>svg:first-child{min-width:var(--_icon-size,1rem);min-height:var(--_icon-size,1rem)}.joined-buttons[data-v-0c00cdf8]{gap:1px;display:flex}.joined-buttons>.btn-wrapper:not(:first-child) :is(button[data-v-0c00cdf8-s],a[data-v-0c00cdf8-s],.button-like[data-v-0c00cdf8-s]):first-child,.joined-buttons>.btn-wrapper:not(:first-child) [data-v-0c00cdf8-s]>:first-child>:first-child>:is(button,a,.button-like):first-child,.joined-buttons>.btn-wrapper:not(:first-child) [data-v-0c00cdf8-s]>:first-child>:is(button,a,.button-like):first-child,.joined-buttons>.btn-wrapper:not(:first-child) [data-v-0c00cdf8-s]>:is(button,a,.button-like):first-child,.joined-buttons>.btn-wrapper[data-v-0c00cdf8]:not(:first-child) :is(button,a,.button-like):first-child{border-top-left-radius:0;border-bottom-left-radius:0}.joined-buttons>:not(:last-child) :is(button[data-v-0c00cdf8-s],a[data-v-0c00cdf8-s],.button-like[data-v-0c00cdf8-s]):first-child,.joined-buttons>:not(:last-child) [data-v-0c00cdf8-s]>:first-child>:first-child>:is(button,a,.button-like):first-child,.joined-buttons>:not(:last-child) [data-v-0c00cdf8-s]>:first-child>:is(button,a,.button-like):first-child,.joined-buttons>:not(:last-child) [data-v-0c00cdf8-s]>:is(button,a,.button-like):first-child,.joined-buttons[data-v-0c00cdf8]>:not(:last-child) :is(button,a,.button-like):first-child{border-top-right-radius:0;border-bottom-right-radius:0}.header[data-v-e140e21d]{display:flex}.header[data-v-e140e21d] h1{margin-block:0}.header[data-v-e140e21d]:not(:last-child){margin-bottom:var(--gap-lg)}.btn-group[data-v-e140e21d]{margin-left:auto;margin-right:0}.checkbox-outer[data-v-e5492569]{cursor:pointer;align-items:center;display:flex}.checkbox-outer p[data-v-e5492569]{-webkit-user-select:none;-moz-user-select:none;user-select:none;margin:0;padding:.2rem 0}.checkbox-outer.disabled[data-v-e5492569]{cursor:not-allowed}.checkbox[data-v-e5492569]{cursor:pointer;min-width:1rem;min-height:1rem;color:var(--color-contrast);background-color:var(--color-button-bg);border-radius:var(--radius-xs);box-shadow:var(--shadow-inset-sm),0 0 0 0 transparent;justify-content:center;align-items:center;margin:0 .5rem 0 0;padding:0;display:flex}.checkbox.checked[data-v-e5492569]{background-color:var(--color-brand)}.checkbox.checked svg[data-v-e5492569]{color:var(--color-accent-contrast)}.checkbox svg[data-v-e5492569]{color:var(--color-secondary);stroke-width:.2rem;flex-shrink:0;width:.8rem;height:.8rem}.checkbox.collapsing[data-v-e5492569]{box-shadow:none;background-color:#0000!important}.checkbox.collapsing svg[data-v-e5492569]{color:inherit;width:1rem;height:1rem;transition:transform .25s ease-in-out}@media (prefers-reduced-motion){.checkbox.collapsing svg[data-v-e5492569]{transition:none!important}}.checkbox.collapsing.checked svg[data-v-e5492569]{transform:rotate(180deg)}.checkbox[data-v-e5492569]:disabled{box-shadow:none;cursor:not-allowed}.checkbox-label[data-v-e5492569]{color:var(--color-base)}.chips[data-v-c40dbf5f]{grid-gap:.5rem;flex-wrap:wrap;display:flex}.chips .btn.capitalize[data-v-c40dbf5f]{text-transform:capitalize}.chips .btn svg[data-v-c40dbf5f]{width:1em;height:1em}.chips .btn[data-v-c40dbf5f]:focus-visible{border-radius:.25rem;outline:.25rem solid #ea80ff}.chips .selected[data-v-c40dbf5f]{color:var(--color-contrast);background-color:var(--color-brand-highlight);box-shadow:inset 0 0 0 transparent,0 0 0 2px var(--color-brand)}.accordion-content[data-v-222c3051]{grid-template-rows:0fr;transition:grid-template-rows .3s ease-in-out;display:grid}@media (prefers-reduced-motion){.accordion-content[data-v-222c3051]{transition:none!important}}.accordion-content.open[data-v-222c3051]{grid-template-rows:1fr}.accordion-content>div[data-v-222c3051]{overflow:hidden}.code[data-v-cc49edeb]{color:var(--color-text);grid-gap:.5rem;font-family:var(--mono-font);font-size:var(--font-size-sm);background-color:var(--color-button-bg);-webkit-user-select:text;-moz-user-select:text;user-select:text;border-radius:10px;width:fit-content;margin:0;padding:.25rem .5rem;transition:opacity .5s ease-in-out,filter .2s ease-in-out,transform 50ms ease-in-out,outline .2s ease-in-out;display:inline-flex}@media (prefers-reduced-motion){.code[data-v-cc49edeb]{transition:none!important}}.code svg[data-v-cc49edeb]{width:1em;height:1em}.code[data-v-cc49edeb]:hover{filter:brightness(.85)}.code[data-v-cc49edeb]:active{filter:brightness(.8);transform:scale(.95)}.double-icon[data-v-a08b5a73]{height:fit-content;line-height:0;position:relative}.double-icon .secondary[data-v-a08b5a73]{background-color:var(--color-bg);padding:var(--spacing-card-xs);aspect-ratio:1;border-radius:50%;width:fit-content;height:fit-content;line-height:0;position:absolute;bottom:-4px;right:-4px}.double-icon .secondary svg[data-v-a08b5a73]{width:1rem;height:1rem}.drop-area[data-v-77f3cdf2]{z-index:10;visibility:hidden;background-color:#00000080;width:100%;height:100%;transition:visibility .2s ease-in-out,background-color .1s ease-in-out;display:flex;position:fixed;top:0;left:0}.drop-area[data-v-77f3cdf2]:before{--indent:4rem;content:" ";top:var(--indent);left:var(--indent);width:calc(100% - 2*var(--indent));height:calc(100% - 2*var(--indent));border:.25rem dashed var(--color-button-bg);border-radius:1rem;position:relative}@media (prefers-reduced-motion){.drop-area[data-v-77f3cdf2]{transition:none!important}}.animated-dropdown[data-v-6b38cfe7]{width:20rem;height:40px;display:inline-block;position:relative}.animated-dropdown[data-v-6b38cfe7]:focus{outline:0}.animated-dropdown .selected[data-v-6b38cfe7]{width:100%;height:100%;padding:var(--gap-sm)var(--gap-lg);background-color:var(--color-button-bg);justify-content:space-between;align-items:center;gap:var(--gap-md);cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none;border-radius:var(--radius-md);box-shadow:var(--shadow-inset-sm),0 0 0 0 transparent;transition:all 50ms;display:flex}.animated-dropdown .selected[data-v-6b38cfe7]:not(.render-down):not(.render-up){transition-delay:.2s}.animated-dropdown .selected.disabled[data-v-6b38cfe7]{cursor:not-allowed;filter:grayscale(50%);opacity:.5}.animated-dropdown .selected.render-up[data-v-6b38cfe7]{border-radius:0 0 var(--radius-md)var(--radius-md)}.animated-dropdown .selected.render-down[data-v-6b38cfe7]{border-radius:var(--radius-md)var(--radius-md)0 0}.animated-dropdown .selected[data-v-6b38cfe7]:focus{filter:brightness(1.25);outline:0;transition:filter .1s ease-in-out}.animated-dropdown .selected .arrow[data-v-6b38cfe7]{transition:transform .2s}.animated-dropdown .selected .arrow.rotate[data-v-6b38cfe7]{transform:rotate(180deg)}.animated-dropdown .options[data-v-6b38cfe7]{z-index:10;max-height:var(--af50b67e);box-shadow:var(--shadow-inset-sm),0 0 0 0 transparent;overflow-y:auto}.animated-dropdown .options .option[data-v-6b38cfe7]{background-color:var(--color-button-bg);padding:var(--gap-md);cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none;align-items:center;display:flex}.animated-dropdown .options .option>label[data-v-6b38cfe7]{cursor:pointer}.animated-dropdown .options .option[data-v-6b38cfe7]:hover{filter:brightness(.85);transition:filter .2s ease-in-out}.animated-dropdown .options .option[data-v-6b38cfe7]:focus{filter:brightness(.85);outline:0;transition:filter .2s ease-in-out}.animated-dropdown .options .option.selected-option[data-v-6b38cfe7]{background-color:var(--color-brand);color:var(--color-accent-contrast);font-weight:bolder}.animated-dropdown .options .option input[data-v-6b38cfe7]{display:none}.options-enter-active[data-v-6b38cfe7],.options-leave-active[data-v-6b38cfe7]{transition:transform .2s}.options-enter-from.up[data-v-6b38cfe7],.options-leave-to.up[data-v-6b38cfe7]{transform:translateY(99.999%)}.options-enter-from.down[data-v-6b38cfe7],.options-leave-to.down[data-v-6b38cfe7]{transform:translateY(-99.999%)}.options-enter-to.up[data-v-6b38cfe7],.options-leave-from.up[data-v-6b38cfe7]{transform:translateY(0)}.options-wrapper[data-v-6b38cfe7]{z-index:9;width:100%;position:absolute;overflow:auto}.options-wrapper.up[data-v-6b38cfe7]{border-radius:var(--radius-md)var(--radius-md)0 0;top:0;transform:translateY(-99.999%)}.options-wrapper.down[data-v-6b38cfe7]{border-radius:0 0 var(--radius-md)var(--radius-md)}.environment[data-v-32dd529d]{align-items:center;font-size:1rem;font-weight:700;display:flex;color:var(--color-text)!important}.environment svg[data-v-32dd529d]{margin-right:.2rem}label[data-v-d4f33839]{flex-direction:unset;max-height:unset}label svg[data-v-d4f33839]{height:1rem}label input[data-v-d4f33839]{display:none}label.long-style[data-v-d4f33839]{grid-gap:.5rem;background-color:var(--color-button-bg);border-radius:var(--radius-sm);border:dashed .3rem var(--color-contrast);cursor:pointer;color:var(--color-contrast);justify-content:center;align-items:center;padding:1.5rem 2rem;display:flex}.title[data-v-58575bf3]{z-index:1;color:var(--color-contrast);font-weight:700;position:absolute}.title[data-v-58575bf3]:after{content:"";animation:2s infinite dots-58575bf3}@keyframes dots-58575bf3{25%{content:""}50%{content:"."}75%{content:".."}0%,to{content:"..."}}.placeholder[data-v-58575bf3]{border-radius:var(--radius-lg);opacity:.25;background-color:var(--color-raised-bg);border:1px solid #0000;width:100%;height:4rem;animation:4s ease-in-out infinite pop-58575bf3;position:relative;overflow:hidden}.placeholder[data-v-58575bf3]:before{content:"";background-image:linear-gradient(-45deg,#0000 30%,#c4d9ed13 50%,#0000 70%);animation:4s ease-in-out infinite shimmer-58575bf3;position:absolute;inset:0}.placeholder[data-v-58575bf3]:nth-child(2):before{animation-delay:0s}.placeholder[data-v-58575bf3]:nth-child(3):before{animation-delay:.3s}.placeholder[data-v-58575bf3]:nth-child(4):before{animation-delay:.6s}.placeholder[data-v-58575bf3]:nth-child(2){animation-delay:0s}.placeholder[data-v-58575bf3]:nth-child(3){animation-delay:.3s}.placeholder[data-v-58575bf3]:nth-child(4){animation-delay:.6s}@keyframes pop-58575bf3{0%{opacity:.25;border-color:#0000}50%{opacity:.5;border-color:var(--color-button-bg)}to{opacity:.25;border-color:#0000}}@keyframes shimmer-58575bf3{0%{transform:translate(-80%)}50%,to{transform:translate(80%)}}@property --_top-fade-height{syntax:"<length-percentage>";inherits:false;initial-value:0}@property --_bottom-fade-height{syntax:"<length-percentage>";inherits:false;initial-value:0}.scrollable-pane-wrapper[data-v-7b5e8554]{flex-direction:column;display:flex;position:relative}.wrapper-wrapper[data-v-7b5e8554]{--_fade-height:3rem;-webkit-mask-image:linear-gradient(transparent,#000 var(--_top-fade-height,0),#000 calc(100% - var(--_bottom-fade-height,0)),transparent 100%);mask-image:linear-gradient(transparent,#000 var(--_top-fade-height,0),#000 calc(100% - var(--_bottom-fade-height,0)),transparent 100%);flex-grow:1;transition:--_top-fade-height 50ms linear,--_bottom-fade-height 50ms linear;display:flex;position:relative;overflow:hidden}.wrapper-wrapper.top-fade[data-v-7b5e8554]{--_top-fade-height:var(--_fade-height)}.wrapper-wrapper.bottom-fade[data-v-7b5e8554]{--_bottom-fade-height:var(--_fade-height)}.scrollable-pane[data-v-7b5e8554]{flex-direction:column;gap:.25rem;width:100%;height:100%;display:flex;position:relative;overflow:hidden auto}.tauri-overlay[data-v-8a59c874]{visibility:hidden;z-index:20;width:100%;height:100px;position:fixed;top:0;left:0}.tauri-overlay.shown[data-v-8a59c874]{opacity:1;visibility:visible}.modal-overlay[data-v-8a59c874]{visibility:hidden;z-index:19;width:100%;height:100%;transition:all .3s ease-in-out;position:fixed;top:0;left:0}@media (prefers-reduced-motion){.modal-overlay[data-v-8a59c874]{transition:none!important}}.modal-overlay.shown[data-v-8a59c874]{opacity:1;visibility:visible;backdrop-filter:blur(3px);background:#00000080}.modal-overlay.noblur[data-v-8a59c874]{backdrop-filter:none}.modal-container[data-v-8a59c874]{z-index:21;visibility:hidden;pointer-events:none;justify-content:center;align-items:center;width:100%;height:100%;display:flex;position:fixed;top:0;left:0}.modal-container.shown[data-v-8a59c874]{visibility:visible}.modal-container.shown .modal-body[data-v-8a59c874]{opacity:1;visibility:visible;transform:translateY(0)}.modal-container .modal-body[data-v-8a59c874]{box-shadow:var(--shadow-raised),var(--shadow-inset);border-radius:var(--radius-lg);background-color:var(--color-raised-bg);max-height:calc(100% - 2*var(--gap-lg));pointer-events:auto;visibility:hidden;opacity:0;width:600px;transition:all .25s ease-in-out;position:fixed;overflow-y:visible;transform:translateY(50vh)}.modal-container .modal-body .header[data-v-8a59c874]{background-color:var(--color-bg);padding:var(--gap-md)var(--gap-lg);justify-content:space-between;align-items:center;display:flex}.modal-container .modal-body .header h1[data-v-8a59c874]{font-size:1.25rem;font-weight:700}@media (prefers-reduced-motion){.modal-container .modal-body[data-v-8a59c874]{transition:none!important}}@media screen and (width<=650px){.modal-container .modal-body[data-v-8a59c874]{width:calc(100% - 2*var(--gap-lg))}}.file-input[data-v-36b6b2b4]{background:var(--color-button-bg);border:2px dashed var(--color-gray);border-radius:var(--radius-md);cursor:pointer;width:100%;padding:1.5rem 1.5rem 1.5rem 2.5rem;transition:opacity .5s ease-in-out,filter .2s ease-in-out,scale 50ms ease-in-out,outline .2s ease-in-out}.file-input[data-v-36b6b2b4]:hover{filter:brightness(.85)}.markdown-resource-link[data-v-36b6b2b4]{cursor:pointer;color:var(--color-blue)}.markdown-resource-link[data-v-36b6b2b4]:focus-visible,.markdown-resource-link[data-v-36b6b2b4]:hover{filter:brightness(1.2);text-decoration:none}.markdown-resource-link[data-v-36b6b2b4]:active{filter:brightness(1.1);text-decoration:none}.display-options[data-v-36b6b2b4]{margin-bottom:var(--gap-sm)}.editor-action-row[data-v-36b6b2b4]{margin-bottom:var(--gap-sm);justify-content:space-between;align-items:center;gap:var(--gap-xs);flex-wrap:wrap;display:flex}@media (width<=768px){.editor-action-row[data-v-36b6b2b4]{flex-direction:column;align-items:start}}.editor-actions[data-v-36b6b2b4]{align-items:center;gap:var(--gap-xs);flex-flow:wrap;display:flex}@media (width<=768px){.editor-actions .divider[data-v-36b6b2b4],.editor-actions .mobile-hidden-group[data-v-36b6b2b4]{display:none}}.editor-actions .divider[data-v-36b6b2b4]{background-color:var(--color-button-bg);border-radius:var(--radius-max);width:.125rem;height:1.8rem;margin-inline:var(--gap-xs)}.editor-actions .divider[data-v-36b6b2b4]:first-child{display:none}.resizable-textarea-wrapper textarea[data-v-36b6b2b4]{width:100%;min-height:10rem}.info-blurb[data-v-36b6b2b4]{justify-content:space-between;align-items:center;gap:var(--gap-xs);display:flex}.hide[data-v-36b6b2b4]{display:none}.preview[data-v-36b6b2b4]{place-items:center end;gap:var(--gap-xs);display:flex}.markdown-body-wrapper[data-v-36b6b2b4]{border:1px solid var(--color-button-bg);border-radius:var(--radius-md);width:100%;padding:var(--radius-md);min-height:6rem}.modal-insert[data-v-36b6b2b4]{padding:var(--gap-lg)}.modal-insert .iconified-input[data-v-36b6b2b4]{width:100%}.modal-insert .label[data-v-36b6b2b4]{margin-block:var(--gap-lg)var(--gap-sm);display:block}.modal-insert .label__title[data-v-36b6b2b4]{color:var(--color-contrast);font-size:1.17rem;font-weight:700;display:block}.modal-insert .label__title .required[data-v-36b6b2b4]{color:var(--color-red)}.modal-insert .input-group[data-v-36b6b2b4]{margin-top:var(--gap-lg)}.image-strategy-chips[data-v-36b6b2b4]{justify-content:space-between;align-items:center;gap:var(--gap-xs);padding-bottom:var(--gap-md);display:flex}.btn-input-alternative[data-v-36b6b2b4]{justify-content:space-between;align-items:center;gap:var(--gap-xs);padding-bottom:var(--gap-xs);flex-direction:column;display:flex}.btn-input-alternative .btn[data-v-36b6b2b4]{justify-content:start;align-items:center;width:100%;min-height:4rem;padding-left:2.5rem;display:flex}.cm-disabled[data-v-36b6b2b4]{opacity:.6;pointer-events:none;cursor:not-allowed}[data-v-36b6b2b4] .cm-content{overflow:auto}.vue-notification[data-v-146a7f12]{box-sizing:border-box;text-align:left;margin:0 5px 5px;padding:10px;font-size:12px;background:var(--color-blue)!important;color:var(--color-accent-contrast)!important}.vue-notification.success[data-v-146a7f12]{background:var(--color-green)!important}.vue-notification.warn[data-v-146a7f12]{background:var(--color-orange)!important}.vue-notification.error[data-v-146a7f12]{background:var(--color-red)!important}.vue-notification-group[data-v-146a7f12]{z-index:99999999;width:300px;position:fixed;bottom:25px;right:25px}.vue-notification-group.has-sidebar[data-v-146a7f12]{right:325px}.vue-notification-group .vue-notification-wrapper[data-v-146a7f12]{width:100%;margin-bottom:10px;overflow:hidden}.vue-notification-group .vue-notification-wrapper .vue-notification-template[data-v-146a7f12]{border-radius:var(--radius-md);margin:0}.vue-notification-group .vue-notification-wrapper .vue-notification-template .notification-title[data-v-146a7f12]{font-size:var(--font-size-lg);margin-right:auto;font-weight:600}.vue-notification-group .vue-notification-wrapper .vue-notification-template .notification-content[data-v-146a7f12]{font-size:var(--font-size-md);margin-right:auto}.vue-notification-group .vue-notification-wrapper[data-v-146a7f12]:last-child{margin:0}@media screen and (width<=750px){.vue-notification-group[data-v-146a7f12]{bottom:calc(var(--size-mobile-navbar-height,15px) + 10px)!important}.vue-notification-group.browse-menu-open[data-v-146a7f12]{bottom:calc(var(--size-mobile-navbar-height-expanded,15px) + 10px)!important}}.notifs-enter-active[data-v-146a7f12],.notifs-leave-active[data-v-146a7f12],.notifs-move[data-v-146a7f12]{transition:all .5s}@media (prefers-reduced-motion){.notifs-enter-active[data-v-146a7f12],.notifs-leave-active[data-v-146a7f12],.notifs-move[data-v-146a7f12]{transition:none!important}}.notifs-enter-from[data-v-146a7f12],.notifs-leave-to[data-v-146a7f12]{opacity:0}.dummy-button[data-v-1a57261d]{clip:rect(0 0 0 0);white-space:nowrap;border:none;outline:0;width:0;height:0;margin:0;padding:0;position:absolute;overflow:hidden}.btn[data-v-75bb98a7]{white-space:nowrap;width:100%;box-shadow:none;--text-color:var(--color-base);--background-color:transparent;justify-content:flex-start}.btn[data-v-75bb98a7]:not(:last-child){margin-bottom:var(--gap-xs)}.omorphia__page[data-v-2c627cb8]{flex-direction:column;padding:0 .75rem;display:flex}.omorphia__page .header[data-v-2c627cb8]{grid-area:header}.omorphia__page .sidebar[data-v-2c627cb8]{grid-area:sidebar}.omorphia__page .footer[data-v-2c627cb8]{grid-area:footer}.omorphia__page .content[data-v-2c627cb8]{grid-area:content}@media (width>=1024px){.omorphia__page[data-v-2c627cb8]{-moz-column-gap:.75rem;column-gap:.75rem;max-width:80rem;margin:0 auto}.omorphia__page.has-sidebar[data-v-2c627cb8]{grid-template:"sidebar content""footer content""dummy content"1fr/20rem 1fr;display:grid}.omorphia__page.has-sidebar.has-header[data-v-2c627cb8]{grid-template:"header header""sidebar content""footer content""dummy content"1fr/20rem 1fr}.omorphia__page.has-sidebar.right-sidebar[data-v-2c627cb8]{grid-template:"content sidebar""content footer""content dummy"1fr/1fr 20rem}.omorphia__page.has-sidebar.right-sidebar.has-header[data-v-2c627cb8]{grid-template:"header header""content sidebar""content footer""content dummy"1fr/1fr 20rem}.omorphia__page.has-sidebar .content[data-v-2c627cb8]{max-width:59.25rem}.sidebar[data-v-2c627cb8]{width:20rem;min-width:20rem}}@media (width>=80rem){.omorphia__page.has-sidebar .content[data-v-2c627cb8]{width:59.25rem}}.progress-bar[data-v-da253495]{transition:width .2s ease-in-out}.progress-bar--waiting[data-v-da253495]{animation:1s linear infinite progress-bar-waiting-da253495;position:relative}@keyframes progress-bar-waiting-da253495{0%{width:20%;left:-50%}50%{width:60%}to{width:20%;left:100%}}.categories[data-v-4fd53fd2]{gap:var(--gap-sm);flex-flow:wrap;display:flex}.categories[data-v-4fd53fd2] span{flex-direction:row;align-items:center;display:flex}.categories[data-v-4fd53fd2] span:not(.version-badge){color:var(--color-gray)}.categories[data-v-4fd53fd2] span svg{width:1rem;margin-right:.2rem}.project-card[data-v-d1d51c22]{box-sizing:border-box;margin:0;line-height:1;display:inline-grid;overflow:hidden}.display-mode--list .project-card[data-v-d1d51c22]{-moz-column-gap:var(--gap-md);column-gap:var(--gap-md);row-gap:var(--gap-sm);grid-template:"icon title stats"min-content"icon description stats"1fr"icon tags stats"min-content/min-content 1fr auto;width:100%}@media screen and (width<=750px){.display-mode--list .project-card[data-v-d1d51c22]{grid-template:"icon title"min-content"icon description"1fr"icon tags"min-content"stats stats"min-content/min-content auto}}@media screen and (width<=550px){.display-mode--list .project-card[data-v-d1d51c22]{grid-template:"icon title"min-content"icon description"1fr"tags tags"min-content"stats stats"min-content/min-content auto}}.display-mode--list .project-card h2[data-v-d1d51c22]{margin:0;font-size:1.5rem}.display-mode--gallery .project-card[data-v-d1d51c22],.display-mode--grid .project-card[data-v-d1d51c22]{row-gap:var(--gap-sm);grid-template:"gallery gallery"min-content"icon title"min-content"description description"1fr"tags tags"min-content"stats stats"min-content/min-content 1fr;padding:0 0 1rem}.display-mode--gallery .project-card .gallery[data-v-d1d51c22],.display-mode--grid .project-card .gallery[data-v-d1d51c22]{background-color:var(--color-button-bg);width:100%;height:10rem;display:inline-block}.display-mode--gallery .project-card .gallery.no-image[data-v-d1d51c22],.display-mode--grid .project-card .gallery.no-image[data-v-d1d51c22]{filter:brightness(.7)}.display-mode--gallery .project-card .gallery img[data-v-d1d51c22],.display-mode--grid .project-card .gallery img[data-v-d1d51c22]{box-shadow:none;-o-object-fit:cover;object-fit:cover;width:100%;height:10rem}.display-mode--gallery .project-card .icon[data-v-d1d51c22],.display-mode--grid .project-card .icon[data-v-d1d51c22]{margin-left:var(--gap-lg);z-index:1;margin-top:-3rem}.display-mode--gallery .project-card .icon img[data-v-d1d51c22],.display-mode--gallery .project-card .icon svg[data-v-d1d51c22],.display-mode--grid .project-card .icon img[data-v-d1d51c22],.display-mode--grid .project-card .icon svg[data-v-d1d51c22]{border-radius:var(--radius-lg);box-shadow:-2px -2px 0 2px var(--color-raised-bg),2px -2px 0 2px var(--color-raised-bg)}.display-mode--gallery .project-card .title[data-v-d1d51c22],.display-mode--grid .project-card .title[data-v-d1d51c22]{margin-left:var(--gap-md);margin-right:var(--gap-md);flex-direction:column}.display-mode--gallery .project-card .title .name[data-v-d1d51c22],.display-mode--grid .project-card .title .name[data-v-d1d51c22]{font-size:1.25rem}.display-mode--gallery .project-card .title .status[data-v-d1d51c22],.display-mode--grid .project-card .title .status[data-v-d1d51c22]{margin-top:var(--gap-xs)}.display-mode--gallery .project-card .description[data-v-d1d51c22],.display-mode--gallery .project-card .tags[data-v-d1d51c22],.display-mode--grid .project-card .description[data-v-d1d51c22],.display-mode--grid .project-card .tags[data-v-d1d51c22]{margin-inline:var(--gap-lg)}.display-mode--gallery .project-card .stats[data-v-d1d51c22],.display-mode--grid .project-card .stats[data-v-d1d51c22]{margin-inline:var(--gap-lg);flex-direction:row;align-items:center}.display-mode--gallery .project-card .stats .stat-label[data-v-d1d51c22],.display-mode--grid .project-card .stats .stat-label[data-v-d1d51c22]{display:none}.display-mode--gallery .project-card .stats .buttons[data-v-d1d51c22],.display-mode--grid .project-card .stats .buttons[data-v-d1d51c22]{gap:var(--gap-sm);flex-direction:row;align-items:center}.display-mode--gallery .project-card .stats .buttons[data-v-d1d51c22]>:first-child,.display-mode--grid .project-card .stats .buttons[data-v-d1d51c22]>:first-child{margin-left:auto}.display-mode--gallery .project-card .stats .buttons[data-v-d1d51c22]:first-child>:last-child,.display-mode--grid .project-card .stats .buttons[data-v-d1d51c22]:first-child>:last-child{margin-right:auto}.display-mode--gallery .project-card .stats .buttons:not(:empty)+.date[data-v-d1d51c22],.display-mode--grid .project-card .stats .buttons:not(:empty)+.date[data-v-d1d51c22]{flex-basis:100%}.display-mode--grid .project-card .gallery[data-v-d1d51c22]{display:none}.display-mode--grid .project-card .icon[data-v-d1d51c22]{margin-top:calc(var(--gap-lg) - var(--gap-sm))}.display-mode--grid .project-card .icon img[data-v-d1d51c22],.display-mode--grid .project-card .icon svg[data-v-d1d51c22]{border:none}.display-mode--grid .project-card .title[data-v-d1d51c22]{margin-top:calc(var(--gap-lg) - var(--gap-sm))}.icon[data-v-d1d51c22]{grid-area:icon;align-items:center;display:flex}.gallery[data-v-d1d51c22]{grid-area:gallery;height:10rem;display:none}.title[data-v-d1d51c22]{-moz-column-gap:var(--gap-sm);align-items:baseline;column-gap:var(--gap-sm);word-wrap:anywhere;flex-flow:wrap;grid-area:title;row-gap:0;display:flex}.title h2[data-v-d1d51c22]{color:var(--color-contrast);font-weight:bolder}.title h2[data-v-d1d51c22],.title p[data-v-d1d51c22]{overflow-wrap:anywhere;margin:0}.title svg[data-v-d1d51c22]{width:auto;color:var(--color-special-orange);height:1.5rem;margin-bottom:-.25rem}.title .title-link[data-v-d1d51c22]{text-decoration:underline}.title .title-link[data-v-d1d51c22]:focus-visible,.title .title-link[data-v-d1d51c22]:hover{color:var(--color-heading)}.title .title-link[data-v-d1d51c22]:active{color:var(--color-text-dark)}.stats[data-v-d1d51c22]{align-items:flex-end;gap:var(--gap-md);flex-flow:column wrap;grid-area:stats;display:flex}.stats .stat[data-v-d1d51c22]{align-items:center;gap:var(--gap-xs);--stat-strong-size:1.25rem;flex-direction:row;width:fit-content;display:flex}.stats .stat strong[data-v-d1d51c22]{font-size:var(--stat-strong-size)}.stats .stat p[data-v-d1d51c22]{margin:0}.stats .stat svg[data-v-d1d51c22]{height:var(--stat-strong-size);width:var(--stat-strong-size)}.stats .date[data-v-d1d51c22]{margin-top:auto}@media screen and (width<=750px){.stats[data-v-d1d51c22]{-moz-column-gap:var(--gap-md);column-gap:var(--gap-md);margin-top:var(--gap-xs);flex-direction:row}}@media screen and (width<=600px){.stats[data-v-d1d51c22]{margin-top:0}.stats .stat-label[data-v-d1d51c22]{display:none}}.environment[data-v-d1d51c22]{font-weight:700;color:var(--color-text)!important}.description[data-v-d1d51c22]{grid-area:description;justify-content:flex-start;margin-block:0;display:flex}.tags[data-v-d1d51c22]{flex-direction:row;grid-area:tags;display:flex}@media screen and (width<=550px){.tags[data-v-d1d51c22]{margin-top:var(--gap-xs)}}.buttons[data-v-d1d51c22]{gap:var(--gap-sm);flex-direction:column;flex-grow:1;align-items:flex-end;display:flex}@media screen and (width>=750px){.small-mode[data-v-d1d51c22]{grid-template:"icon title"min-content"icon description"1fr"icon tags"min-content"stats stats"min-content/min-content auto!important}.small-mode .tags[data-v-d1d51c22]{margin-top:var(--gap-xs)!important}.small-mode .stats[data-v-d1d51c22]{flex-direction:row;-moz-column-gap:var(--gap-md)!important;column-gap:var(--gap-md)!important;margin-top:var(--gap-xs)!important}.small-mode .stats .stat-label[data-v-d1d51c22]{display:none!important}}.base-card[data-v-d1d51c22]{padding:var(--gap-lg);background-color:var(--color-raised-bg);border-radius:var(--radius-lg);min-height:2rem;box-shadow:var(--shadow-card);outline:2px solid #0000;position:relative}.base-card .card__overlay[data-v-d1d51c22]{grid-gap:.5rem;z-index:2;flex-direction:column;align-items:flex-end;display:flex;position:absolute;top:1rem;right:1rem}.base-card.warning[data-v-d1d51c22]{border-left:.5rem solid var(--color-banner-side);background-color:var(--color-banner-bg);color:var(--color-banner-text);min-height:0;padding:1.5rem;line-height:1.5}.base-card.warning a[data-v-d1d51c22]{color:var(--color-blue);text-decoration:underline}.base-card.moderation-card[data-v-d1d51c22]{background-color:var(--color-banner-bg)}.radial-header[data-v-8eab98dd]{background-image:radial-gradient(50% 100% at 50% 100%,var(--_radial-bg)10%,#fff0 100%);position:relative}.radial-header[data-v-8eab98dd]:before{content:"";background-image:linear-gradient(90deg,#fff0 0,var(--_radial-border)50%,#fff0 100%);opacity:.8;width:100%;height:1px;position:absolute;bottom:0;left:0}.markdown-body[data-v-a74b05fe]>:first-child{margin-top:0}.root-container[data-v-45ef7c48]{--transition-speed:.2s;flex-direction:row;align-items:center;width:100%;display:flex}@media (prefers-reduced-motion){.root-container[data-v-45ef7c48]{--transition-speed:0s}}.slide-container[data-v-45ef7c48],.slider-component[data-v-45ef7c48]{width:100%;position:relative}.slider-component .slide-container .slider[data-v-45ef7c48]{-webkit-appearance:none;-moz-appearance:none;appearance:none;border-radius:var(--radius-sm);width:100%;height:.25rem;min-height:0;box-shadow:none;background:linear-gradient(to right,var(--color-brand),var(--color-brand)calc((var(--current-value) - var(--min-value))/(var(--max-value) - var(--min-value))*100%),var(--color-base)calc((var(--current-value) - var(--min-value))/(var(--max-value) - var(--min-value))*100%),var(--color-base)100%);vertical-align:middle;background-size:100% 100%;outline:0;padding:0;position:relative}.slider-component .slide-container .slider[data-v-45ef7c48]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;background:var(--color-brand);cursor:pointer;width:.75rem;height:.75rem;-webkit-transition:var(--transition-speed);transition:var(--transition-speed);border-radius:50%}.slider-component .slide-container .slider[data-v-45ef7c48]::-moz-range-thumb{background:var(--color-brand);cursor:pointer;width:.75rem;height:.75rem;-moz-transition:var(--transition-speed);transition:var(--transition-speed);border:none;border-radius:50%}.slider-component .slide-container .slider[data-v-45ef7c48]:hover::-webkit-slider-thumb:not(.disabled){width:1rem;height:1rem;-webkit-transition:var(--transition-speed);transition:var(--transition-speed)}.slider-component .slide-container .slider[data-v-45ef7c48]:hover::-moz-range-thumb:not(.disabled){width:1rem;height:1rem;-moz-transition:var(--transition-speed);transition:var(--transition-speed)}.slider-component .slide-container .snap-points-wrapper[data-v-45ef7c48]{width:100%;height:50%;position:absolute}.slider-component .slide-container .snap-points-wrapper .snap-points[data-v-45ef7c48]{vertical-align:middle;width:calc(100% - .75rem);height:.75rem;display:inline-block;position:relative;left:.375rem}.slider-component .slide-container .snap-points-wrapper .snap-points .snap-point[data-v-45ef7c48]{border-radius:var(--radius-sm);background-color:var(--color-base);width:.25rem;height:100%;display:inline-block;position:absolute;transform:translate(-.125rem)}.slider-component .slide-container .snap-points-wrapper .snap-points .snap-point.green[data-v-45ef7c48]{background-color:var(--color-brand)}.slider-input[data-v-45ef7c48]{width:6rem;margin-left:.75rem}.slider-range[data-v-45ef7c48]{flex-direction:row;justify-content:space-between;margin:0;font-size:.75rem;display:flex}.disabled[data-v-45ef7c48]{opacity:.5;cursor:not-allowed}.smart-clickable[data-v-f559450e]{display:grid}.smart-clickable[data-v-f559450e]>*{grid-area:1/1}.smart-clickable .smart-clickable__contents[data-v-f559450e] .smart-clickable\:allow-pointer-events{pointer-events:all}.smart-clickable.smart-clickable--has-clickable .smart-clickable__contents[data-v-f559450e]{transition:scale .125s ease-out}.smart-clickable.smart-clickable--has-clickable:has(>:first-child:hover,>:first-child:focus-visible) .smart-clickable__contents[data-v-f559450e]{filter:var(--hover-filter-weak)}.smart-clickable.smart-clickable--has-clickable:has(>:first-child:hover,>:first-child:focus-visible) .smart-clickable__contents[data-v-f559450e] .smart-clickable\:underline-on-hover{text-decoration:underline}.smart-clickable.smart-clickable--has-clickable:has(>:first-child:hover,>:first-child:focus-visible) .smart-clickable__contents[data-v-f559450e] .smart-clickable\:highlight-on-hover{filter:brightness(var(--hover-brightness,1.25))}.smart-clickable.smart-clickable--has-clickable:has(>:first-child:active) .smart-clickable__contents[data-v-f559450e]{scale:.97}[data-v-2d2db0e1-s]{width:1.5rem;height:1.5rem;color:var(--color-secondary)}.timeline-indicator[data-v-214e0d19]{background-image:linear-gradient(to bottom,var(--timeline-line-color,var(--color-raised-bg))66%,#fff0 0);z-index:-1;background-repeat:repeat-y;background-size:100% 30px;width:4px;height:calc(100% - 1rem);margin-top:1rem}.timeline-indicator.fade-out-start[data-v-214e0d19]{-webkit-mask-image:linear-gradient(0deg,#000 calc(100% - 15rem),#0000 100%);mask-image:linear-gradient(0deg,#000 calc(100% - 15rem),#0000 100%)}.timeline-indicator.fade-out-end[data-v-214e0d19]{-webkit-mask-image:linear-gradient(#000 calc(100% - 15rem),#0000 100%);mask-image:linear-gradient(#000 calc(100% - 15rem),#0000 100%)}.timeline-indicator.fade-out-start.fade-out-end[data-v-214e0d19]{-webkit-mask-image:linear-gradient(#0000 0,#000,#000 calc(100% - 8rem),#0000 100%);mask-image:linear-gradient(#0000 0,#000,#000 calc(100% - 8rem),#0000 100%)}div[data-v-fa4cb137]{height:5rem}div svg[data-v-fa4cb137]{width:5rem;height:5rem;position:absolute}div svg.rotate[data-v-fa4cb137]{animation:4s linear infinite rotate-fa4cb137}div svg.rotate.inner[data-v-fa4cb137]{animation:6s linear infinite reverse rotate-fa4cb137}@keyframes rotate-fa4cb137{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.animate .ring[data-v-a70813fe]{transform-origin:50%;transform-box:fill-box;transition:transform 2s ease-in-out;animation-fill-mode:forwards}.animate .ring--large[data-v-a70813fe]{animation:1s ease-in-out infinite forwards spin-a70813fe}.animate .ring--small[data-v-a70813fe]{animation:2s ease-in-out infinite reverse spin-a70813fe}@keyframes spin-a70813fe{0%{transform:rotate(0)}to{transform:rotate(360deg)}}[data-v-16c862f9] .changelog-body{word-break:break-word;line-height:1.4}[data-v-16c862f9] .changelog-body h1,[data-v-16c862f9] .changelog-body h2,[data-v-16c862f9] .changelog-body h3,[data-v-16c862f9] .changelog-body h4,[data-v-16c862f9] .changelog-body h5,[data-v-16c862f9] .changelog-body h6{margin:0}[data-v-16c862f9] .changelog-body ul{margin:0;padding-left:1.25rem}[data-v-16c862f9] .changelog-body a{color:var(--color-link)}[data-v-16c862f9] .changelog-body a:focus-visible,[data-v-16c862f9] .changelog-body a:hover{filter:brightness(1.2);text-decoration:underline}[data-v-16c862f9] .changelog-body code{background-color:var(--color-bg);font-size:var(--font-size-sm);border-radius:4px;padding:.125rem .25rem}[data-v-16c862f9] .changelog-body p{margin:0}[data-v-16c862f9] .changelog-body *+p,[data-v-16c862f9] .changelog-body h3+*{margin-top:.5rem}[data-v-16c862f9] .changelog-body *+h3{margin-top:.75rem}[data-v-16c862f9] .changelog-body *+li{margin-top:.5rem}[data-v-16c862f9] .changelog-body li ul li{margin-top:.25rem}[data-v-16c862f9] .changelog-body img{border-radius:var(--radius-md);max-width:100%}.chart[data-v-8f186e67],svg[data-v-8f186e67]{width:100%;height:100%}.bar-chart[data-v-8f186e67]{flex-direction:column;justify-content:center;width:100%;height:100%;display:flex}.title-bar[data-v-8f186e67]{align-items:center;gap:var(--gap-xs);flex-direction:row;display:flex}.toolbar[data-v-8f186e67]{gap:var(--gap-xs);z-index:1;flex-direction:row;margin-left:auto;display:flex}[data-v-8f186e67] .apexcharts-menu,[data-v-8f186e67] .apexcharts-tooltip,[data-v-8f186e67] .apexcharts-yaxistooltip{background:var(--color-raised-bg)!important;border-radius:var(--radius-sm)!important;border:1px solid var(--color-button-bg)!important;box-shadow:var(--shadow-floating)!important;font-size:var(--font-size-nm)!important}[data-v-8f186e67] .apexcharts-grid-borders line{stroke:var(--color-button-bg)!important}[data-v-8f186e67] .apexcharts-xaxistooltip,[data-v-8f186e67] .apexcharts-yaxistooltip{background:var(--color-raised-bg)!important;border-radius:var(--radius-sm)!important;border:1px solid var(--color-button-bg)!important;font-size:var(--font-size-nm)!important;color:var(--color-base)!important}[data-v-8f186e67] .apexcharts-xaxistooltip .apexcharts-xaxistooltip-text,[data-v-8f186e67] .apexcharts-yaxistooltip .apexcharts-xaxistooltip-text{font-size:var(--font-size-nm)!important;color:var(--color-base)!important}[data-v-8f186e67] .apexcharts-yaxistooltip-left:after{border-left-color:var(--color-raised-bg)!important}[data-v-8f186e67] .apexcharts-yaxistooltip-left:before{border-left-color:var(--color-button-bg)!important}[data-v-8f186e67] .apexcharts-xaxistooltip-bottom:after{border-bottom-color:var(--color-raised-bg)!important}[data-v-8f186e67] .apexcharts-xaxistooltip-bottom:before{border-bottom-color:var(--color-button-bg)!important}[data-v-8f186e67] .apexcharts-menu-item{border-radius:var(--radius-sm)!important;padding:var(--gap-xs)var(--gap-sm)!important}[data-v-8f186e67] .apexcharts-menu-item:hover{color:var(--color-accent-contrast)!important;background:var(--color-brand)!important;transition:all .3s!important}[data-v-8f186e67] .apexcharts-tooltip .bar-tooltip{gap:var(--gap-xs);min-width:10rem;padding:var(--gap-sm);flex-direction:column;display:flex}[data-v-8f186e67] .apexcharts-tooltip .bar-tooltip .card-divider{margin:var(--gap-xs)0}[data-v-8f186e67] .apexcharts-tooltip .bar-tooltip .separated-entry{flex-direction:row;justify-content:space-between;align-items:center;display:flex}[data-v-8f186e67] .apexcharts-tooltip .bar-tooltip .title{font-weight:bolder}[data-v-8f186e67] .apexcharts-tooltip .bar-tooltip .label{color:var(--color-contrast)}[data-v-8f186e67] .apexcharts-tooltip .bar-tooltip .value{align-items:center;gap:var(--gap-xs);color:var(--color-base);flex-direction:row;display:flex}[data-v-8f186e67] .apexcharts-tooltip .bar-tooltip .list-entry{font-size:var(--font-size-sm);flex-direction:row;align-items:center;display:flex}[data-v-8f186e67] .apexcharts-tooltip .bar-tooltip .list-entry .value{margin-left:auto}[data-v-8f186e67] .apexcharts-tooltip .bar-tooltip .list-entry .label{margin-right:var(--gap-xl)}[data-v-8f186e67] .apexcharts-tooltip .bar-tooltip .circle{width:.5rem;height:.5rem;margin-right:var(--gap-sm);border-radius:50%;display:inline-block}[data-v-8f186e67] .apexcharts-tooltip .bar-tooltip svg{width:1em;height:1em}.legend[data-v-8f186e67]{align-items:center;gap:var(--gap-md);flex-direction:row;justify-content:center;display:flex}.legend-checkbox[data-v-8f186e67] .checkbox.checked{background-color:var(--color)}.compact-chart[data-v-40286b51]{gap:var(--gap-xs);border:1px solid var(--color-button-bg);border-radius:var(--radius-md);background-color:var(--color-raised-bg);box-shadow:var(--shadow-floating);color:var(--color-base);font-size:var(--font-size-nm);flex-direction:column;width:100%;padding-bottom:0;display:flex}.compact-chart .value[data-v-40286b51]{margin:0}.chart[data-v-40286b51]{width:calc(100% + 3rem);margin:0 -1.5rem .25rem}svg[data-v-40286b51]{width:100%;height:100%}[data-v-40286b51] .apexcharts-menu,[data-v-40286b51] .apexcharts-tooltip,[data-v-40286b51] .apexcharts-yaxistooltip{background:var(--color-raised-bg)!important;border-radius:var(--radius-sm)!important;border:1px solid var(--color-button-bg)!important;box-shadow:var(--shadow-floating)!important;font-size:var(--font-size-nm)!important}[data-v-40286b51] .apexcharts-graphical{width:100%}[data-v-40286b51] .apexcharts-tooltip .bar-tooltip{gap:var(--gap-xs);padding:var(--gap-sm);flex-direction:column;display:flex}[data-v-40286b51] .apexcharts-tooltip .bar-tooltip .card-divider{margin:var(--gap-xs)0}[data-v-40286b51] .apexcharts-tooltip .bar-tooltip .label{flex-direction:row;align-items:center;display:flex}[data-v-40286b51] .apexcharts-tooltip .bar-tooltip .value{align-items:center;gap:var(--gap-xs);color:var(--color-base);flex-direction:row;display:flex}[data-v-40286b51] .apexcharts-tooltip .bar-tooltip .list-entry{justify-content:space-between;align-items:center;gap:var(--gap-md);flex-direction:row;display:flex}[data-v-40286b51] .apexcharts-tooltip .bar-tooltip .circle{width:.5rem;height:.5rem;margin-right:var(--gap-sm);border-radius:50%;display:inline-block}[data-v-40286b51] .apexcharts-tooltip .bar-tooltip svg{width:1em;height:1em}[data-v-40286b51] .apexcharts-tooltip .bar-tooltip .divider{font-size:var(--font-size-lg);font-weight:400}.legend[data-v-40286b51]{align-items:center;gap:var(--gap-md);flex-direction:row;justify-content:center;display:flex}[data-v-40286b51] .apexcharts-grid-borders line{stroke:var(--color-button-bg)!important}[data-v-40286b51] .apexcharts-xaxis line{stroke:none}.legend-checkbox[data-v-40286b51] .checkbox.checked{background-color:var(--color)}.tauri-overlay[data-v-163d50cf]{visibility:hidden;z-index:20;width:100%;height:100px;position:fixed;top:0;left:0}.tauri-overlay.shown[data-v-163d50cf]{opacity:1;visibility:visible}.modal-overlay[data-v-163d50cf]{z-index:19;opacity:0;background:linear-gradient(#1d302b85,#0e151af2);border-radius:180px;transition:all .2s ease-out;position:fixed;inset:-5rem}@media (prefers-reduced-motion){.modal-overlay[data-v-163d50cf]{transition:none!important}}.modal-overlay.shown[data-v-163d50cf]{opacity:1;visibility:visible;backdrop-filter:blur(5px)}.modal-overlay.noblur[data-v-163d50cf]{backdrop-filter:none;filter:none}.modal-overlay.danger[data-v-163d50cf]{background:linear-gradient(#2b121a85,#310a0ff2)}.modal-container[data-v-163d50cf]{z-index:21;visibility:hidden;pointer-events:none;width:100%;height:100%;transform:translate(calc((-50vw + var(--_mouse-x,50vw)*1px)/16),calc((-50vh + var(--_mouse-y,50vh)*1px)/16));justify-content:center;align-items:center;transition:all .2s ease-out;display:flex;position:fixed;top:0;left:0}.modal-container.shown[data-v-163d50cf]{visibility:visible;transform:translate(0)}.modal-container.shown>.modal-body[data-v-163d50cf]{opacity:1;visibility:visible;scale:1}.modal-container>.modal-body[data-v-163d50cf]{max-height:calc(100% - 2*var(--gap-lg));max-width:min(var(--_max-width,60rem),100% - 2*var(--gap-lg));pointer-events:auto;visibility:hidden;opacity:0;width:fit-content;transition:all .2s ease-in-out;position:fixed;overflow:hidden auto;scale:.97;box-shadow:4px 4px 26px 10px #00000014}@media (prefers-reduced-motion){.modal-container>.modal-body[data-v-163d50cf]{transition:none!important}}@media screen and (width<=650px){.modal-container>.modal-body[data-v-163d50cf]{width:calc(100% - 2*var(--gap-lg))}}.share-body[data-v-89753354]{align-items:center;gap:var(--gap-sm);padding:var(--gap-lg);flex-flow:wrap;display:flex}.all-buttons[data-v-89753354]{gap:var(--gap-sm);flex-direction:column;flex-grow:1;justify-content:center;display:flex}.iconified-input[data-v-89753354]{width:100%}.iconified-input input[data-v-89753354]{flex-basis:auto}.button-row[data-v-89753354]{gap:var(--gap-sm);flex-direction:row;display:flex}.button-row .btn[data-v-89753354]{fill:var(--color-contrast);color:var(--color-contrast)}.button-row .btn.reddit[data-v-89753354]{background-color:#ff4500}.button-row .btn.mastodon[data-v-89753354]{background-color:#563acc}.button-row .btn.twitter[data-v-89753354]{background-color:#1da1f2}.qr-wrapper[data-v-89753354]{margin:0 auto;position:relative}.qr-wrapper:hover .copy-button[data-v-89753354]{opacity:1}.qr-code[data-v-89753354]{border-radius:var(--radius-md);background-color:#fff!important}.copy-button[data-v-89753354]{margin:var(--gap-sm);opacity:0;transition:all .2s ease-in-out;position:absolute;top:0;right:0}@media (prefers-reduced-motion){.copy-button[data-v-89753354]{transition:none!important}}.resizable-textarea-wrapper[data-v-89753354]{height:100%;position:relative}.resizable-textarea-wrapper textarea[data-v-89753354]{width:100%;margin:0}.resizable-textarea-wrapper .btn[data-v-89753354]{opacity:1;margin:0}.breadcrumbs[data-v-14259543]{margin-bottom:var(--gap-lg);flex-wrap:wrap;align-items:center;display:flex}.breadcrumbs svg[data-v-14259543]{width:1.25rem;height:1.25rem}.breadcrumbs a.breadcrumb[data-v-14259543]{padding-block:var(--gap-xs)}.breadcrumbs a.breadcrumb.trim[data-v-14259543]{text-overflow:ellipsis;white-space:nowrap}.navigation[data-v-5b06336e]{grid-gap:1rem;flex-flow:wrap;align-items:center;display:flex;position:relative}.navigation .nav-link[data-v-5b06336e]{text-transform:capitalize;font-weight:var(--font-weight-bold);color:var(--color-base);position:relative}.navigation .nav-link[data-v-5b06336e]:hover{color:var(--color-base)}.navigation .nav-link[data-v-5b06336e]:hover:after{opacity:.4}.navigation .nav-link[data-v-5b06336e]:active:after{opacity:.2}.navigation .nav-link.router-link-exact-active[data-v-5b06336e]{color:var(--color-base)}.navigation .nav-link.router-link-exact-active[data-v-5b06336e]:after{opacity:1}.navigation.use-animation .nav-link.is-active[data-v-5b06336e]:after{opacity:0}.navigation .nav-indicator[data-v-5b06336e]{border-radius:var(--radius-max);background-color:var(--color-brand);width:3rem;height:.25rem;transition:all .2s ease-in-out;position:absolute;bottom:-5px;left:0}@media (prefers-reduced-motion){.navigation .nav-indicator[data-v-5b06336e]{transition:none!important}}.omorphia__navstack[data-v-5396aeb5]{flex-direction:column;display:flex}.omorphia__navstack[data-v-5396aeb5] .btn{width:100%;position:relative}.omorphia__navstack[data-v-5396aeb5] .btn.selected{background-color:var(--color-button-bg);font-weight:700}.banner-grid[data-v-24baa655]{padding-block:var(--gap-xl);padding-inline:max(calc((100% - 80rem)/2 + var(--gap-md)),var(--gap-xl));grid-template-areas:"title actions_right""description actions_right""actions actions_right";gap:.5rem;display:grid}.grid-area-\[title\][data-v-24baa655]{grid-area:title}.grid-area-\[description\][data-v-24baa655]{grid-area:description}.grid-area-\[actions\][data-v-24baa655]{grid-area:actions}.grid-area-\[actions_right\][data-v-24baa655]{grid-area:actions_right}.banner-grid a[data-v-24baa655]{color:currentColor;text-decoration-line:underline}div[data-v-3acfd228]{background:linear-gradient(to bottom,var(--_color),transparent);opacity:.075;width:100%;height:60rem}.versions-grid-row[data-v-69edec0c]{grid-template-columns:1fr min-content;gap:1rem;display:grid}@supports (grid-template-columns:subgrid){.versions-grid-row[data-v-69edec0c]{grid-column:1/-1;grid-template-columns:subgrid!important}}@media (width>=640px){.versions-grid-row[data-v-69edec0c]{grid-template-columns:min-content 1fr 1fr 1fr min-content}}@media (width>=1280px){.versions-grid-row[data-v-69edec0c]{grid-template-columns:min-content 1fr 1fr 1fr 1fr 1fr min-content}}.animated-dropdown[data-v-7dd3b8b5]{width:20rem;height:2.5rem;display:inline-block;position:relative}.animated-dropdown[data-v-7dd3b8b5]:focus{outline:0}.animated-dropdown .selected[data-v-7dd3b8b5]{padding:var(--gap-sm)var(--gap-lg);background-color:var(--color-button-bg);justify-content:space-between;align-items:center;gap:var(--gap-md);cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none;border-radius:var(--radius-md);box-shadow:var(--shadow-inset-sm),0 0 0 0 transparent;display:flex}.animated-dropdown .selected.disabled[data-v-7dd3b8b5]{cursor:not-allowed;filter:grayscale(50%);opacity:.5}.animated-dropdown .selected.render-up[data-v-7dd3b8b5]{border-radius:0 0 var(--radius-md)var(--radius-md)}.animated-dropdown .selected.render-down[data-v-7dd3b8b5]{border-radius:var(--radius-md)var(--radius-md)0 0}.animated-dropdown .selected[data-v-7dd3b8b5]:focus{filter:brightness(1.25);outline:0;transition:filter .1s ease-in-out}.animated-dropdown .options[data-v-7dd3b8b5]{z-index:10;max-height:18rem;overflow-y:auto}.animated-dropdown .options .option[data-v-7dd3b8b5]{background-color:var(--color-button-bg);padding:var(--gap-md);cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none;align-items:center;display:flex}.animated-dropdown .options .option[data-v-7dd3b8b5]:hover{filter:brightness(.85);transition:filter .2s ease-in-out}.animated-dropdown .options .option[data-v-7dd3b8b5]:focus{filter:brightness(.85);outline:0;transition:filter .2s ease-in-out}.animated-dropdown .options .option.selected-option[data-v-7dd3b8b5]{background-color:var(--color-brand);color:var(--color-accent-contrast);font-weight:bolder}.animated-dropdown .options .option input[data-v-7dd3b8b5]{display:none}.options-enter-active[data-v-7dd3b8b5],.options-leave-active[data-v-7dd3b8b5]{transition:transform .2s}.options-enter-from.up[data-v-7dd3b8b5],.options-leave-to.up[data-v-7dd3b8b5]{transform:translateY(99.999%)}.options-enter-from.down[data-v-7dd3b8b5],.options-leave-to.down[data-v-7dd3b8b5]{transform:translateY(-99.999%)}.options-enter-to.up[data-v-7dd3b8b5],.options-leave-from.up[data-v-7dd3b8b5]{transform:translateY(0)}.options-wrapper[data-v-7dd3b8b5]{z-index:9;width:100%;position:absolute;overflow:auto}.options-wrapper.up[data-v-7dd3b8b5]{border-radius:var(--radius-md)var(--radius-md)0 0;top:0;transform:translateY(-99.999%)}.options-wrapper.down[data-v-7dd3b8b5]{border-radius:0 0 var(--radius-md)var(--radius-md)}.project-label[data-v-7dd3b8b5]{align-items:center;gap:var(--gap-md);color:var(--color-contrast);flex-direction:row;display:flex}.project-label .title[data-v-7dd3b8b5]{font-weight:700}.iconified-input[data-v-7dd3b8b5]{width:100%}.text-input[data-v-7dd3b8b5]{width:100%;transition:all 50ms;box-shadow:var(--shadow-inset-sm),0 0 0 0 transparent!important}.text-input:focus.down[data-v-7dd3b8b5]{border-radius:var(--radius-md)var(--radius-md)0 0!important}.text-input:focus.up[data-v-7dd3b8b5]{border-radius:0 0 var(--radius-md)var(--radius-md)!important}.text-input[data-v-7dd3b8b5]:not(:focus){transition-delay:.2s}.filter[data-v-c6c08570]{margin-bottom:.5rem}.filter[data-v-c6c08570] .filter-text{align-items:center;display:flex}.filter[data-v-c6c08570] .filter-text .icon{height:1rem}.filter[data-v-c6c08570] .filter-text .icon svg{width:1rem;height:1rem;margin-right:.25rem}.filter span[data-v-c6c08570]{-webkit-user-select:none;-moz-user-select:none;user-select:none}.search-filter-option:has(button:focus-visible) .filter-action-icon[data-v-4f99320d],.search-filter-option:has(button:focus-visible) button[data-v-4f99320d],.search-filter-option:hover .filter-action-icon[data-v-4f99320d],.search-filter-option:hover button[data-v-4f99320d]{opacity:1}.animate-pulse[data-v-635ab3d8]{animation:2s cubic-bezier(.4,0,.6,1) infinite pulse-635ab3d8}@keyframes pulse-635ab3d8{0%,to{scale:1}50%{scale:.95}}.nametag-bg[data-v-4721d479]{background:linear-gradient(308.68deg,#32323233 -52.46%,#64646433 94.75%),#0003;box-shadow:inset -.5px -.5px #00000040,inset .5px .5px #ffffff0d}.magical-cape-transform[data-v-aa194460]{aspect-ratio:10/16;box-sizing:content-box;width:60px;min-height:96px;position:relative;overflow:hidden}.magical-cape-transform img[data-v-aa194460]{-o-object-fit:cover;object-fit:cover;image-rendering:pixelated;transform-origin:7.8125% 25%;width:640%;height:200%;position:absolute;top:-6.25%;left:-10%;scale:1.01}.highlighted-inner-shadow[data-v-aa194460]:before{content:"";z-index:2;position:absolute;inset:0;box-shadow:inset 0 0 4px 4px #0006}@supports (background-color:color-mix(in srgb, transparent, transparent)){.highlighted-glow[data-v-aa194460]:before{box-shadow:inset 0 0 2px 4px color-mix(in srgb,var(--color-brand),transparent 10%)}}.highlighted-glow[data-v-7528e62f]:before{content:"";border-radius:inherit;pointer-events:none;position:absolute;inset:0}@supports (background-color:color-mix(in srgb, transparent, transparent)){.highlighted-glow[data-v-7528e62f]:before{box-shadow:inset 0 0 2px 2px color-mix(in srgb,var(--color-brand),transparent 10%)}}.skeleton-loader[data-v-15c5ad03]{aspect-ratio:5/7}.skeleton[data-v-15c5ad03]{background:linear-gradient(90deg,var(--color-bg)25%,var(--color-raised-bg)50%,var(--color-bg)75%);background-size:200% 100%;animation:1.5s linear infinite wave-15c5ad03}@keyframes wave-15c5ad03{0%{background-position:-200% 0}to{background-position:200% 0}}.skin-btn-bg[data-v-15c5ad03]{background:var(--color-gradient-button-bg)}.skin-btn-bg.selected[data-v-15c5ad03]{background:linear-gradient(157.61deg,var(--color-brand)-76.68%,#1bd96a88 -38.61%,#0c592c99 100.4%),var(--color-bg)}.group:hover .skin-btn-bg.selected[data-v-15c5ad03],.skin-btn-bg.selected[data-v-15c5ad03]:hover{filter:brightness(1.15)}.skin-button__image-parent img[data-v-15c5ad03]{transition:filter .2s ease-in-out}.group:hover .skin-button__image-parent img[data-v-15c5ad03]{filter:drop-shadow(0 2px 4px #0003)}.with-shadow img[data-v-15c5ad03]{filter:drop-shadow(0 4px 8px #0006)}.skin-btn-bg[data-v-600807b2]{background:var(--color-gradient-button-bg)}.skin-btn-bg.selected[data-v-600807b2]{background:linear-gradient(157.61deg,var(--color-brand)-76.68%,#1bd96a88 -38.61%,#0c592c99 100.4%),var(--color-bg)}.group:hover .skin-btn-bg.selected[data-v-600807b2],.skin-btn-bg.selected[data-v-600807b2]:hover{filter:brightness(1.15)}.theme-options[data-v-baf93428]{gap:var(--gap-lg);grid-template-columns:repeat(auto-fit,minmax(10rem,1fr));display:grid}.theme-options .preview .example-card[data-v-baf93428]{outline:2px solid #0000;grid-template:"icon text1""icon text2"/auto 1fr;gap:.5rem;margin:0;padding:1rem;display:grid}.theme-options .preview .example-card .example-icon[data-v-baf93428]{background-color:var(--color-button-bg);border-radius:var(--radius-sm);outline:2px solid #0000;grid-area:icon;width:2rem;height:2rem}.theme-options .preview .example-card .example-text-1[data-v-baf93428],.theme-options .preview .example-card .example-text-2[data-v-baf93428]{border-radius:var(--radius-sm);outline:2px solid #0000;height:.5rem}.theme-options .preview .example-card .example-text-1[data-v-baf93428]{background-color:var(--color-base);grid-area:text1;width:100%}.theme-options .preview .example-card .example-text-2[data-v-baf93428]{background-color:var(--color-secondary);grid-area:text2;width:60%}.brand-gradient-bg[data-v-44cbd907]{background-image:linear-gradient(to top right,var(--color-brand-highlight)-80%,var(--color-bg));--color-button-bg:var(--brand-gradient-button)}.context-menu[data-v-3726e243]{background-color:var(--color-raised-bg);border-radius:var(--radius-md);box-shadow:var(--shadow-floating);border:1px solid var(--color-button-bg);z-index:1000000;padding:var(--gap-sm);margin:0;position:fixed;overflow:hidden}.context-menu .item[data-v-3726e243]{color:var(--color-base);cursor:pointer;align-items:center;gap:var(--gap-sm);padding:var(--gap-sm);border-radius:var(--radius-sm);display:flex}.context-menu .item:active.base[data-v-3726e243],.context-menu .item:hover.base[data-v-3726e243]{background-color:var(--color-button-bg);color:var(--color-contrast)}.context-menu .item:active.primary[data-v-3726e243],.context-menu .item:hover.primary[data-v-3726e243]{background-color:var(--color-brand);color:var(--color-accent-contrast);font-weight:700}.context-menu .item:active.danger[data-v-3726e243],.context-menu .item:hover.danger[data-v-3726e243]{background-color:var(--color-red);color:var(--color-accent-contrast);font-weight:700}.context-menu .item:active.contrast[data-v-3726e243],.context-menu .item:hover.contrast[data-v-3726e243]{background-color:var(--color-orange);color:var(--color-accent-contrast);font-weight:700}.context-menu .divider[data-v-3726e243]{border:1px solid var(--color-button-bg);margin:var(--gap-sm);pointer-events:none}.fade-enter-active[data-v-3726e243],.fade-leave-active[data-v-3726e243]{transition:opacity .2s ease-in-out}.fade-enter-from[data-v-3726e243],.fade-leave-to[data-v-3726e243]{opacity:0}.content[data-v-79bf5c1e]{-ms-overflow-style:none;scrollbar-width:none;flex-direction:column;justify-content:center;align-items:center;gap:1rem;width:100%;display:flex}.content[data-v-79bf5c1e]::-webkit-scrollbar{background:0 0;width:0}.row[data-v-79bf5c1e]{flex-direction:column;align-items:flex-start;width:100%;min-width:100%;display:flex;overflow:hidden}.row[data-v-79bf5c1e]:nth-child(2n){background:var(--color-bg)}.row .header[data-v-79bf5c1e]{gap:var(--gap-xs);flex-direction:row;align-items:center;width:100%;margin-bottom:1rem;display:flex}.row .header a[data-v-79bf5c1e]{font-size:var(--font-size-md);white-space:nowrap;color:var(--color-base);margin:0;font-weight:bolder}.row .header svg[data-v-79bf5c1e]{width:1.25rem;height:1.25rem;color:var(--color-base)}.row .instances[data-v-79bf5c1e]{grid-gap:.75rem;grid-template-columns:repeat(auto-fill,minmax(20rem,1fr));width:100%;display:grid}.row .instances.compact[data-v-79bf5c1e]{grid-template-columns:repeat(auto-fill,minmax(18rem,1fr));gap:.75rem}.row .projects[data-v-79bf5c1e]{grid-gap:.75rem;grid-template-columns:repeat(auto-fill,minmax(18rem,1fr));width:100%;display:grid}.row .projects .item[data-v-79bf5c1e]{width:100%;max-width:100%}.world-item-highlighted[data-v-eb1a7840]{filter:brightness();animation:4s ease-out fade-highlight-eb1a7840;position:relative}.world-item-highlighted[data-v-eb1a7840]:before{content:"";box-shadow:0 0 8px 2px var(--color-brand);border:1.5px solid var(--color-brand);opacity:0;border-radius:.75rem;animation:4s ease-out fade-opacity-eb1a7840;position:absolute;inset:0}@keyframes fade-highlight-eb1a7840{0%{filter:brightness(1.25)}75%{filter:brightness(1.25)}to{filter:brightness()}}@keyframes fade-opacity-eb1a7840{0%{opacity:.5}75%{opacity:.5}to{opacity:0}}.light-mode .motd-renderer[data-v-eb1a7840]{filter:brightness(.75)}.grid-when-huge[data-v-15d8a6d0]{grid-template-columns:repeat(auto-fill,minmax(670px,1fr));display:grid}.navtabs-transition[data-v-44ee76fd]{transition:all .15s cubic-bezier(.4,0,.2,1),opacity .25s cubic-bezier(.5,0,.2,1) 50ms}.skin-layout[data-v-9048f574]{grid-template-columns:minmax(0,1fr) minmax(0,2.5fr);gap:2.5rem;display:grid}@media (width<=700px){.skin-layout[data-v-9048f574]{grid-template-columns:1fr}}.preview-panel[data-v-9048f574]{align-self:start;padding:0 .5rem .5rem;position:sticky;top:1.5rem}.preview-container[data-v-9048f574]{justify-content:center;align-items:center;height:80vh;margin-left:1.25rem;display:flex}@media (width<=700px){.preview-container[data-v-9048f574]{height:50vh}}.skins-container[data-v-9048f574]{padding-top:.5rem}.skin-card-grid[data-v-9048f574]{grid-template-columns:repeat(3,1fr);gap:4px;width:100%;display:grid}@media (width>=1300px){.skin-card-grid[data-v-9048f574]{grid-template-columns:repeat(4,1fr)}}@media (width>=1750px){.skin-card-grid[data-v-9048f574]{grid-template-columns:repeat(5,1fr)}}@media (width>=2050px){.skin-card-grid[data-v-9048f574]{grid-template-columns:repeat(6,1fr)}}.skin-card[data-v-9048f574]{aspect-ratio:.95;box-sizing:border-box;border-radius:10px;width:100%;min-width:0}.root-container[data-v-0df8a438]{flex-direction:row;min-height:100%;display:flex}.project-sidebar[data-v-0df8a438]{-ms-overflow-style:none;scrollbar-width:none;width:calc(300px + 1.5rem);height:fit-content;min-height:calc(100vh - 3.25rem);max-height:calc(100vh - 3.25rem);padding:1rem .5rem 1rem 1rem;position:fixed;overflow-y:auto}.project-sidebar[data-v-0df8a438]::-webkit-scrollbar{background:0 0;width:0}.sidebar-card[data-v-0df8a438]{flex-direction:column;gap:1rem;display:flex}.content-container[data-v-0df8a438]{flex-direction:column;width:100%;margin-left:calc(300px + 1rem);padding:1rem;display:flex}.button-group[data-v-0df8a438]{flex-flow:wrap;gap:.5rem;display:flex}.stats[data-v-0df8a438]{gap:var(--gap-md);flex-flow:column wrap;display:flex}.stats .stat[data-v-0df8a438]{align-items:center;gap:var(--gap-xs);--stat-strong-size:1.25rem;flex-direction:row;width:fit-content;display:flex}.stats .stat strong[data-v-0df8a438]{font-size:var(--stat-strong-size)}.stats .stat p[data-v-0df8a438]{margin:0}.stats .stat svg[data-v-0df8a438]{min-height:var(--stat-strong-size);min-width:var(--stat-strong-size)}.stats .date[data-v-0df8a438]{margin-top:auto}.tabs[data-v-0df8a438]{margin-bottom:var(--gap-md);flex-direction:row;justify-content:space-between;gap:1rem;display:flex}.tabs .tab[data-v-0df8a438]{border-radius:var(--border-radius);cursor:pointer;flex-direction:row;align-items:center;transition:background-color .2s ease-in-out;display:flex}.tabs .tab.router-view-active[data-v-0df8a438],.tabs .tab[data-v-0df8a438]:hover{background-color:var(--color-raised-bg)}.links a[data-v-0df8a438]{color:var(--color-text);border-radius:1rem;align-items:center;display:inline-flex}.links a img[data-v-0df8a438],.links a svg[data-v-0df8a438]{width:1rem;height:1rem}.links a span[data-v-0df8a438]{margin-left:.25rem;line-height:2rem;text-decoration:underline}.links a:focus-visible img[data-v-0df8a438],.links a:focus-visible span[data-v-0df8a438],.links a:focus-visible svg[data-v-0df8a438],.links a:hover img[data-v-0df8a438],.links a:hover span[data-v-0df8a438],.links a:hover svg[data-v-0df8a438]{color:var(--color-heading)}.links a:active img[data-v-0df8a438],.links a:active span[data-v-0df8a438],.links a:active svg[data-v-0df8a438]{color:var(--color-text-dark)}.links a[data-v-0df8a438]:not(:last-child):after{content:"•";margin:0 .25rem}.install-loading[data-v-0df8a438]{width:1rem;height:1rem;margin-right:-1rem;scale:.2}.install-loading[data-v-0df8a438] svg{color:var(--color-contrast)}.project-sidebar-section[data-v-0df8a438]{border-style:solid;border-width:0 0 1px;border-color:var(--brand-gradient-border);flex-direction:column;gap:.5rem;padding:1rem;display:flex}.filter-header[data-v-1ea596e3]{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.5rem;margin-bottom:.5rem;display:flex}.table-row[data-v-1ea596e3]{grid-template-columns:min-content 1fr 1fr 1.5fr}.manage[data-v-1ea596e3]{flex-grow:1;gap:.5rem;display:flex}.manage .multiselect[data-v-1ea596e3]{flex-grow:1}.card-row[data-v-1ea596e3]{background-color:var(--color-raised-bg);justify-content:space-between;align-items:center;display:flex}.mod-card[data-v-1ea596e3]{flex-direction:column;gap:1rem;margin-top:.5rem;display:flex;overflow:hidden}.text-combo[data-v-1ea596e3]{align-items:center;gap:.5rem;display:flex}.select[data-v-1ea596e3]{max-width:20rem;width:100%!important}.version-link[data-v-1ea596e3]{text-wrap:wrap;flex-direction:column;gap:.25rem;display:flex}.version-link .version-badge[data-v-1ea596e3]{flex-wrap:wrap;display:flex}.version-link .version-badge .channel-indicator[data-v-1ea596e3]{margin-right:.5rem}.stacked-text[data-v-1ea596e3]{flex-direction:column;align-items:flex-start;gap:.25rem;display:flex}.download-cell[data-v-1ea596e3]{width:4rem;padding:1rem}.filter-checkbox[data-v-1ea596e3] .checkbox{border:none}.gallery[data-v-0f4c3e5f]{grid-template-columns:repeat(auto-fill,minmax(20rem,1fr));gap:1rem;width:100%;display:grid}.gallery-item[data-v-0f4c3e5f]{flex-direction:column;margin:0;padding:0;display:flex;overflow:hidden}.gallery-item .gallery-image[data-v-0f4c3e5f]{aspect-ratio:2;-o-object-fit:cover;object-fit:cover;-o-object-position:center;object-position:center;width:100%}.gallery-item .gallery-body[data-v-0f4c3e5f]{flex-grow:1;padding:1rem}.gallery-item .gallery-time[data-v-0f4c3e5f]{vertical-align:center;padding:0 1rem 1rem}.expanded-image-modal[data-v-0f4c3e5f]{z-index:11;background-color:#000000b3;justify-content:center;align-items:center;width:100%;height:100%;display:flex;position:fixed;top:0;left:0;overflow:auto}.expanded-image-modal .content[data-v-0f4c3e5f]{width:calc(100vw - 2*var(--gap-lg));height:calc(100vh - 2*var(--gap-lg));position:relative}.expanded-image-modal .content .circle-button[data-v-0f4c3e5f]{max-width:2rem;color:var(--color-button-text);background-color:var(--color-button-bg);border-radius:var(--size-rounded-max);margin:0;padding:.5rem;line-height:1;display:flex;box-shadow:inset 0 -1px 1px #1118271a}.expanded-image-modal .content .circle-button[data-v-0f4c3e5f]:not(:last-child){margin-right:.5rem}.expanded-image-modal .content .circle-button[data-v-0f4c3e5f]:hover{background-color:var(--color-button-bg-hover)!important}.expanded-image-modal .content .circle-button:hover svg[data-v-0f4c3e5f]{color:var(--color-button-text-hover)!important}.expanded-image-modal .content .circle-button[data-v-0f4c3e5f]:active{background-color:var(--color-button-bg-active)!important}.expanded-image-modal .content .circle-button:active svg[data-v-0f4c3e5f]{color:var(--color-button-text-active)!important}.expanded-image-modal .content .circle-button svg[data-v-0f4c3e5f]{width:1rem;height:1rem}.expanded-image-modal .content .image[data-v-0f4c3e5f]{max-width:calc(100vw - 2*var(--gap-lg));max-height:calc(100vh - 2*var(--gap-lg));border-radius:var(--radius-lg);position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.expanded-image-modal .content .image.zoomed-in[data-v-0f4c3e5f]{-o-object-fit:cover;object-fit:cover;width:auto;height:calc(100vh - 2*var(--gap-lg));max-width:calc(100vw - 2*var(--gap-lg))}.expanded-image-modal .content .floating[data-v-0f4c3e5f]{left:50%;bottom:var(--gap-md);align-items:center;gap:var(--gap-md);opacity:1;flex-direction:column;padding:2rem 2rem 0;transition:opacity .25s ease-in-out;display:flex;position:absolute;transform:translate(-50%)}.expanded-image-modal .content .floating[data-v-0f4c3e5f]:not(.expanded-image-modal.content.floating:hover){opacity:.4}.expanded-image-modal .content .floating:not(.expanded-image-modal.content.floating:hover) .text[data-v-0f4c3e5f]{opacity:0;transform:translateY(2.5rem)scale(.8)}.expanded-image-modal .content .floating:not(.expanded-image-modal.content.floating:hover) .controls[data-v-0f4c3e5f]{transform:translateY(.25rem)scale(.9)}.expanded-image-modal .content .floating .text[data-v-0f4c3e5f]{text-shadow:1px 1px 10px #000000d4;flex-direction:column;gap:.5rem;max-width:40rem;margin-bottom:.25rem;transition:opacity .25s ease-in-out,transform .25s ease-in-out;display:flex}.expanded-image-modal .content .floating .text h2[data-v-0f4c3e5f]{color:var(--dark-color-base);text-align:center;margin:0;font-size:1.25rem}.expanded-image-modal .content .floating .text p[data-v-0f4c3e5f]{color:var(--dark-color-base);margin:0}.expanded-image-modal .content .floating .controls[data-v-0f4c3e5f]{background-color:var(--color-raised-bg);padding:var(--gap-md);border-radius:var(--radius-md);transition:opacity .25s ease-in-out,transform .25s ease-in-out}.buttons[data-v-0f4c3e5f]{gap:.5rem;display:flex}.version-container[data-v-a10ff54e]{flex-direction:row;gap:1rem;display:flex}.version-title[data-v-a10ff54e]{margin-bottom:1rem}.version-title h2[data-v-a10ff54e]{font-size:var(--font-size-2xl);color:var(--color-contrast);margin:0;font-weight:700}.dependency[data-v-a10ff54e]{background:var(--color-raised-bg);color:var(--color-base);gap:.5rem;width:100%;padding:.5rem 1rem .5rem .5rem;display:flex}.dependency .title[data-v-a10ff54e]{font-weight:bolder}.dependency[data-v-a10ff54e] svg{margin-right:0!important}.file[data-v-a10ff54e]{background:var(--color-button-bg);color:var(--color-base);flex-direction:row;gap:.5rem;padding:.5rem 1rem;display:flex}.file .download[data-v-a10ff54e]{background-color:var(--color-raised-bg);margin-left:auto}.file .label[data-v-a10ff54e]{gap:.5rem;margin:auto 0;display:flex}.file .label .title[data-v-a10ff54e]{word-break:break-all;font-weight:bolder}.file .label svg[data-v-a10ff54e]{width:1.1rem;min-width:1.1rem;height:1.1rem;min-height:1.1rem;margin:auto 0}.file .label .primary-label[data-v-a10ff54e]{font-style:italic}.primary[data-v-a10ff54e]{background:var(--color-brand-highlight);color:var(--color-contrast)}.button-group[data-v-a10ff54e]{flex-flow:wrap;gap:.5rem;display:flex}.card-title[data-v-a10ff54e]{font-size:var(--font-size-lg);color:var(--color-contrast);margin:0 0 .5rem}.description-cards[data-v-a10ff54e]{width:100%}.metadata-card[data-v-a10ff54e]{width:20rem;height:min-content}.metadata[data-v-a10ff54e]{flex-flow:column wrap;gap:1rem;display:flex}.metadata .metadata-item[data-v-a10ff54e]{flex-direction:column;gap:.5rem;display:flex}.metadata .metadata-item .metadata-label[data-v-a10ff54e]{font-weight:700}.author[data-v-a10ff54e]{color:var(--color-base);background:var(--color-raised-bg);width:100%;box-shadow:none;flex-direction:row;align-items:center;gap:.5rem;padding:.5rem;text-decoration:none;display:flex}.markdown-body img[data-v-a10ff54e],.markdown-body[data-v-a10ff54e] h1,.markdown-body[data-v-a10ff54e] h2,.markdown-body[data-v-a10ff54e] hr{max-width:max(60rem,90%)!important}.markdown-body[data-v-a10ff54e] ol,.markdown-body[data-v-a10ff54e] ul{margin-left:2rem}.copycode[data-v-a10ff54e]{color:var(--color-contrast);border:0}.disabled[data-v-a10ff54e]{vertical-align:center;cursor:not-allowed;border-radius:var(--radius-lg);flex-direction:row;align-items:center;display:flex}.disabled .text[data-v-a10ff54e]{filter:brightness(.5)}.modal-body[data-v-a517f5ae]{gap:var(--gap-md);flex-direction:column;display:flex}.labeled_input[data-v-a517f5ae]{gap:var(--gap-sm);flex-direction:column;display:flex}.labeled_input p[data-v-a517f5ae]{margin:0}.select-checkbox[data-v-a517f5ae]{gap:var(--gap-sm)}.select-checkbox button.checkbox[data-v-a517f5ae]{border:none}.select-checkbox.dropdown[data-v-a517f5ae]{margin-left:auto}.table-content[data-v-a517f5ae]{max-height:18rem;overflow-y:auto}.table[data-v-a517f5ae]{border:1px solid var(--color-bg)}.file-entry[data-v-a517f5ae]{gap:var(--gap-sm);flex-direction:column;display:flex}.file-primary[data-v-a517f5ae]{align-items:center;gap:var(--gap-sm);display:flex}.file-secondary[data-v-a517f5ae]{margin-left:var(--gap-xl);gap:var(--gap-sm);height:100%;vertical-align:center;flex-direction:column;display:flex}.file-secondary-row[data-v-a517f5ae]{align-items:center;gap:var(--gap-sm);display:flex}.button-row[data-v-a517f5ae]{gap:var(--gap-sm);align-items:center;display:flex}.row-wise[data-v-a517f5ae]{flex-direction:row;justify-content:space-between;align-items:center;gap:1rem;display:flex}.textarea-wrapper[data-v-a517f5ae]{height:12rem}.textarea-wrapper textarea[data-v-a517f5ae]{max-height:12rem}.textarea-wrapper .preview[data-v-a517f5ae]{overflow-y:auto}.hovering-icon-shadow[data-v-79138a23]{box-shadow:var(--shadow-inset-sm),var(--shadow-raised)}.filter-header[data-v-20cf5c0d]{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.5rem;margin-bottom:.5rem;display:flex}.with-columns[data-v-20cf5c0d]{grid-template-columns:min-content 1fr 1fr}.scrollable[data-v-20cf5c0d]{max-height:25rem;overflow-y:auto}.card-row[data-v-20cf5c0d]{background-color:var(--color-raised-bg);justify-content:space-between;align-items:center;display:flex}.mod-card[data-v-20cf5c0d]{flex-direction:column;gap:1rem;margin-top:.5rem;display:flex;overflow:hidden}.version-link[data-v-20cf5c0d]{flex-direction:column;gap:.25rem;display:flex}.version-link .version-badge[data-v-20cf5c0d]{flex-wrap:wrap;display:flex}.version-link .version-badge .channel-indicator[data-v-20cf5c0d]{margin-right:.5rem}.stacked-text[data-v-20cf5c0d]{flex-direction:column;align-items:flex-start;gap:.25rem;display:flex}.download-cell[data-v-20cf5c0d]{width:4rem;padding:1rem}.modal-body[data-v-20cf5c0d]{gap:var(--gap-md);flex-direction:column;display:flex}.table[data-v-20cf5c0d]{border:1px solid var(--color-bg)}.auto-detect-modal .table[data-v-03178d90]{padding:.5rem}.auto-detect-modal .table .table-row[data-v-03178d90]{grid-template-columns:1fr 4fr min-content}.auto-detect-modal .table span[data-v-03178d90]{display:inherit;justify-content:center;align-items:center}.manage[data-v-03178d90]{gap:.5rem;display:flex}.installation-input[data-v-d10a045b]{flex-grow:1;width:100%!important}.toggle-setting[data-v-d10a045b]{flex-flow:wrap;justify-content:space-between;align-items:center;gap:.5rem;display:flex}.toggle-setting.compact[data-v-d10a045b]{flex-wrap:wrap}.installation-buttons[data-v-d10a045b]{flex-direction:row;align-items:center;gap:.5rem;margin:0;display:flex}.installation-buttons .btn[data-v-d10a045b]{width:max-content}.test-success[data-v-d10a045b]{color:var(--color-green)}.test-fail[data-v-d10a045b]{color:var(--color-red)}.instance-card[data-v-26139bb7]{flex-direction:column;gap:1rem;display:flex}Button[data-v-26139bb7]{width:100%}.button-group[data-v-26139bb7]{flex-direction:row;gap:.5rem;display:flex}.side-cards[data-v-26139bb7]{-ms-overflow-style:none;scrollbar-width:none;flex-direction:column;width:300px;min-height:calc(100vh - 3.25rem);max-height:calc(100vh - 3.25rem);display:flex;position:fixed;overflow-y:auto}.side-cards[data-v-26139bb7]::-webkit-scrollbar{background:0 0;width:0}.side-cards .card[data-v-26139bb7]{min-height:unset;margin-bottom:0}.instance-nav[data-v-26139bb7]{background:var(--color-raised-bg);flex-direction:column;justify-content:center;align-items:flex-start;gap:.5rem;height:100%;padding:1rem;display:flex}.name[data-v-26139bb7]{color:var(--color-contrast);text-overflow:ellipsis;font-size:1.25rem;overflow:hidden}.metadata[data-v-26139bb7]{text-transform:capitalize}.instance-container[data-v-26139bb7]{flex-direction:row;gap:1rem;min-height:100%;padding:1rem;display:flex;overflow:auto}.instance-info[data-v-26139bb7]{flex-direction:column;width:100%;display:flex}.badge[data-v-26139bb7]{width:fit-content;color:var(--color-orange);align-items:center;font-weight:700;display:flex}.pages-list[data-v-26139bb7]{gap:var(--gap-xs);flex-direction:column;display:flex}.pages-list .btn[data-v-26139bb7]{background:inherit;width:100%;color:var(--color-primary);box-shadow:none;font-size:100%;font-weight:400;transition:all .1s ease-in-out}.pages-list .btn.router-link-exact-active[data-v-26139bb7]{box-shadow:var(--shadow-inset-lg);background:var(--color-button-bg);color:var(--color-contrast)}.pages-list .btn[data-v-26139bb7]:hover{background-color:var(--color-button-bg);color:var(--color-contrast);box-shadow:var(--shadow-inset-lg);text-decoration:none}.pages-list .btn svg[data-v-26139bb7]{width:1.3rem;height:1.3rem}.instance-nav[data-v-26139bb7]{flex-direction:row;justify-content:left;align-items:flex-start;gap:.5rem;width:100%;height:min-content;padding:1rem;display:flex}.instance-button[data-v-26139bb7]{width:fit-content}.actions[data-v-26139bb7]{flex-direction:column;justify-content:flex-start;gap:.5rem;display:flex}.content[data-v-26139bb7]{flex-direction:column;width:calc(100% - 20rem);margin:0 1rem .5rem 20rem;display:flex;overflow:auto}.stats[data-v-26139bb7]{gap:var(--gap-md);flex-flow:column wrap;grid-area:stats;display:flex}.stats .stat[data-v-26139bb7]{align-items:center;gap:var(--gap-xs);--stat-strong-size:1.25rem;flex-direction:row;width:fit-content;display:flex}.stats .stat strong[data-v-26139bb7]{font-size:var(--stat-strong-size)}.stats .stat p[data-v-26139bb7]{margin:0}.stats .stat svg[data-v-26139bb7]{height:var(--stat-strong-size);width:var(--stat-strong-size)}.stats .date[data-v-26139bb7]{margin-top:auto}@media screen and (width<=750px){.stats[data-v-26139bb7]{-moz-column-gap:var(--gap-md);column-gap:var(--gap-md);margin-top:var(--gap-xs);flex-direction:row}}@media screen and (width<=600px){.stats[data-v-26139bb7]{margin-top:0}.stats .stat-label[data-v-26139bb7]{display:none}}.text-input[data-v-a5cf730c]{width:100%}.manage[data-v-a5cf730c]{gap:.5rem;display:flex}.table[data-v-a5cf730c]{border-radius:var(--radius-lg);border:2px solid var(--color-bg);margin-block-start:0}.table-row[data-v-a5cf730c]{grid-template-columns:min-content 2fr 1fr 13.25rem}.table-row.show-options[data-v-a5cf730c]{grid-template-columns:min-content auto}.table-row.show-options .options[data-v-a5cf730c]{align-items:center;gap:var(--gap-md);flex-direction:row;display:flex}.static .table-row[data-v-a5cf730c]{grid-template-columns:4.25rem 1fr 1fr;grid-template-areas:"manage name version"}.static .name-cell[data-v-a5cf730c]{grid-area:name}.static .version[data-v-a5cf730c]{grid-area:version}.static .manage[data-v-a5cf730c]{grid-area:manage;justify-content:center}.table-cell[data-v-a5cf730c]{align-items:center}.card-row[data-v-a5cf730c]{align-items:center;gap:var(--gap-md);background-color:var(--color-raised-bg);justify-content:space-between;display:flex}.mod-card[data-v-a5cf730c]{gap:var(--gap-sm);white-space:nowrap;flex-flow:wrap;justify-content:flex-start;align-items:center;margin-bottom:.5rem;display:flex}.mod-card[data-v-a5cf730c] .dropdown-row .btn{height:2.5rem!important}.mod-card[data-v-a5cf730c] .btn{height:2.5rem}.mod-card .dropdown-input[data-v-a5cf730c]{flex-grow:1}.mod-card .dropdown-input .animated-dropdown[data-v-a5cf730c]{width:unset}.mod-card .dropdown-input .animated-dropdown[data-v-a5cf730c] .selected{border-radius:var(--radius-md)0 0 var(--radius-md)}.mod-card .dropdown-input .iconified-input[data-v-a5cf730c]{width:100%}.mod-card .dropdown-input .iconified-input input[data-v-a5cf730c]{flex-basis:unset}.mod-card .dropdown-input[data-v-a5cf730c] .animated-dropdown .render-down{border-radius:var(--radius-md)0 0 var(--radius-md)!important}.mod-card .dropdown-input[data-v-a5cf730c] .animated-dropdown .options-wrapper{width:unset;border-radius:var(--radius-md);margin-top:.25rem}.mod-card .dropdown-input[data-v-a5cf730c] .animated-dropdown .options{border-radius:var(--radius-md);border:1px solid var(--color)}.list-card[data-v-a5cf730c]{margin-top:.5rem}.text-combo[data-v-a5cf730c]{align-items:center;gap:.5rem;display:flex}.name-cell[data-v-a5cf730c]{padding-left:0}.name-cell .btn[data-v-a5cf730c]{margin-left:var(--gap-sm);min-width:unset}.dropdown[data-v-a5cf730c]{width:7rem!important}.sort[data-v-a5cf730c]{padding-left:.5rem}.second-row[data-v-a5cf730c]{align-items:flex-start;gap:var(--gap-sm);flex-wrap:wrap;display:flex}.second-row .chips[data-v-a5cf730c]{flex-grow:1}.modal-body[data-v-a5cf730c]{padding:var(--gap-lg);flex-direction:column;gap:1rem;display:flex}.modal-body .button-group[data-v-a5cf730c]{justify-content:flex-end;gap:.5rem;display:flex}.modal-body strong[data-v-a5cf730c]{color:var(--color-contrast)}.mod-content[data-v-a5cf730c]{align-items:center;gap:1rem;display:flex}.mod-content .mod-text[data-v-a5cf730c]{flex-direction:column;display:flex}.mod-content .title[data-v-a5cf730c]{color:var(--color-contrast);font-weight:bolder}.actions-cell[data-v-a5cf730c]{align-items:center;gap:.5rem;display:flex}.actions-cell .btn[data-v-a5cf730c]{height:unset;width:unset;padding:0}.actions-cell .btn.trash[data-v-a5cf730c]{color:var(--color-red)}.actions-cell .btn.update[data-v-a5cf730c]{color:var(--color-green)}.actions-cell .btn.share[data-v-a5cf730c]{color:var(--color-blue)}.more-box[data-v-a5cf730c]{background-color:var(--color-bg);padding:var(--gap-lg);display:flex}.more-box .options[data-v-a5cf730c]{gap:var(--gap-md);flex-flow:wrap;flex-grow:1;display:flex}.btn.transparent[data-v-a5cf730c]{height:unset;width:unset;color:var(--color-base);gap:var(--gap-xs);white-space:nowrap;padding:0}.btn.transparent svg[data-v-a5cf730c]{transition:transform .2s ease-in-out;margin-right:0!important}.btn.transparent svg.open[data-v-a5cf730c]{transform:rotate(90deg)}.btn.transparent svg.down[data-v-a5cf730c]{transform:rotate(180deg)}.empty-prompt[data-v-a5cf730c]{justify-content:center;align-items:center;gap:var(--gap-md);flex-direction:column;width:100%;height:100%;margin:auto;display:flex}.empty-prompt .empty-icon svg[data-v-a5cf730c]{width:10rem;height:10rem;color:var(--color-contrast)}.empty-prompt h3[data-v-a5cf730c],.empty-prompt p[data-v-a5cf730c]{margin:0}.select-checkbox button.checkbox{border:none;margin:0}.search-input{background-color:var(--color-raised-bg);min-height:2.25rem}.top-box{background-image:radial-gradient(50% 100% at 50% 100%,var(--color-brand-highlight)10%,#fff0 100%)}.top-box-divider{background-image:linear-gradient(90deg,#fff0 0,var(--color-brand)50%,#fff0 100%);opacity:.8;width:100%;height:1px}.vue-recycle-scroller{position:relative}.vue-recycle-scroller.direction-vertical:not(.page-mode){overflow-y:auto}.vue-recycle-scroller.direction-horizontal:not(.page-mode){overflow-x:auto}.vue-recycle-scroller.direction-horizontal{display:-webkit-box;display:-ms-flexbox;display:flex}.vue-recycle-scroller__slot{-webkit-box-flex:1;-ms-flex:auto 0 0px;flex:none}.vue-recycle-scroller__item-wrapper{-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-box-flex:1;-ms-flex:1;flex:1;position:relative;overflow:hidden}.vue-recycle-scroller.ready .vue-recycle-scroller__item-view{will-change:transform;position:absolute;top:0;left:0}.vue-recycle-scroller.direction-vertical .vue-recycle-scroller__item-wrapper{width:100%}.vue-recycle-scroller.direction-horizontal .vue-recycle-scroller__item-wrapper{height:100%}.vue-recycle-scroller.ready.direction-vertical .vue-recycle-scroller__item-view{width:100%}.vue-recycle-scroller.ready.direction-horizontal .vue-recycle-scroller__item-view{height:100%}.log-card[data-v-c4293fdc]{flex-direction:column;gap:1rem;height:100vh;display:flex}.button-row[data-v-c4293fdc]{flex-direction:row;justify-content:space-between;gap:.5rem;display:flex}.button-group[data-v-c4293fdc]{flex-direction:row;gap:.5rem;display:flex}.log-text[data-v-c4293fdc]{width:100%;height:100%;font-family:var(--mono-font);background-color:var(--color-accent-contrast);color:var(--color-contrast);border-radius:var(--radius-lg);white-space:nowrap;white-space:normal;color-scheme:dark;padding:1.5rem;overflow:auto hidden}.filter-checkbox[data-v-c4293fdc]{margin-bottom:.3rem;font-size:1rem}.filter-checkbox svg[data-v-c4293fdc]{place-self:center;display:flex}.filter-group[data-v-c4293fdc]{flex-direction:row;gap:.5rem;padding:.6rem;display:flex;overflow:auto}.filter-group[data-v-c4293fdc]::-webkit-scrollbar-thumb,.filter-group[data-v-c4293fdc]::-webkit-scrollbar-track{border-radius:10px}[data-v-c4293fdc] .vue-recycle-scroller__item-wrapper{overflow:visible}[data-v-c4293fdc] .vue-recycle-scroller::-webkit-scrollbar-corner{background-color:var(--color-bg);border-radius:0 0 10px}.scroller[data-v-c4293fdc]{height:100%}.user[data-v-c4293fdc]{align-items:center;height:32%;padding:0 12px;display:flex}.progress-bar[data-v-038d689b]{background-color:var(--color-button-bg);border-radius:var(--radius-lg);width:100%;height:.5rem;overflow:hidden}.progress-bar__fill[data-v-038d689b]{background-color:var(--color-brand);height:100%;transition:width .3s}.modal-body[data-v-e11c7cf7]{gap:var(--gap-md);margin-top:var(--gap-lg);flex-direction:column;display:flex}.input-label[data-v-e11c7cf7]{color:var(--color-contrast);margin-bottom:.5rem;font-size:1rem;font-weight:bolder}.text-input[data-v-e11c7cf7]{width:20rem}.image-upload[data-v-e11c7cf7]{gap:1rem;display:flex}.image-input[data-v-e11c7cf7]{flex-direction:column;justify-content:center;gap:.5rem;display:flex}.warning[data-v-e11c7cf7]{font-style:italic}.versions[data-v-e11c7cf7]{flex-direction:row;gap:1rem;display:flex}[data-v-e11c7cf7] button.checkbox{border:none}.selector[data-v-e11c7cf7]{max-width:20rem}.labeled-divider[data-v-e11c7cf7]{text-align:center}.labeled-divider[data-v-e11c7cf7]:after{background-color:var(--color-raised-bg);content:"Or";color:var(--color-base);padding:var(--gap-sm);position:relative;top:-.5rem}.info[data-v-e11c7cf7]{flex-direction:row;align-items:center;gap:.5rem;display:flex}.modal-header[data-v-e11c7cf7]{flex-direction:row;justify-content:space-between;align-items:center;padding-bottom:0;display:flex}.path-selection[data-v-e11c7cf7]{padding:var(--gap-xl);background-color:var(--color-bg);border-radius:var(--radius-lg);gap:var(--gap-md);flex-direction:column;display:flex}.path-selection h3[data-v-e11c7cf7]{margin:0}.path-selection .path-input[data-v-e11c7cf7]{align-items:center;gap:var(--gap-sm);flex-direction:row;width:100%;display:flex}.path-selection .path-input .iconified-input[data-v-e11c7cf7]{flex-grow:1}.path-selection .path-input .iconified-input[data-v-e11c7cf7] input{flex-basis:auto;width:100%}.table[data-v-e11c7cf7]{border:1px solid var(--color-bg)}.table-row[data-v-e11c7cf7]{grid-template-columns:min-content auto}.table-content[data-v-e11c7cf7]{height:calc(90px + 10rem);max-height:calc(90px + 10rem);overflow-y:auto}.select-checkbox button.checkbox[data-v-e11c7cf7]{border:none}.button-row[data-v-e11c7cf7]{justify-content:space-between;align-items:center;gap:var(--gap-md);flex-direction:row;display:flex}.button-row .transparent[data-v-e11c7cf7]{padding:var(--gap-sm)0}.empty[data-v-e11c7cf7]{color:var(--color-contrast);justify-content:center;align-items:center;font-size:1.5rem;font-weight:bolder;display:flex}.card-divider[data-v-e11c7cf7]{margin:var(--gap-md)var(--gap-lg)0 var(--gap-lg)}.no-instance[data-v-1de8f9c3]{justify-content:center;align-items:center;gap:var(--gap-md);flex-direction:column;height:100%;display:flex}.no-instance h3[data-v-1de8f9c3],.no-instance p[data-v-1de8f9c3]{margin:0}.no-instance .icon svg[data-v-1de8f9c3]{width:10rem;height:10rem}.row[data-v-465c8d75]{flex-direction:column;align-items:flex-start;width:100%;display:flex}.row .divider[data-v-465c8d75]{justify-content:space-between;align-items:center;gap:1rem;width:100%;margin-bottom:1rem;display:flex}.row .divider p[data-v-465c8d75]{white-space:nowrap;color:var(--color-contrast);margin:0;font-size:1rem}.row .divider hr[data-v-465c8d75]{background-color:var(--color-gray);border:none;width:100%;height:1px}.header[data-v-465c8d75]{justify-content:space-between;gap:1rem;align-items:inherit;flex-flow:wrap;width:calc(100% - 2rem);padding:1rem;display:flex;margin:1rem 1rem 0!important}.header .iconified-input[data-v-465c8d75]{flex-grow:1}.header .iconified-input input[data-v-465c8d75]{min-width:100%}.header .sort-dropdown[data-v-465c8d75]{width:10rem}.header .filter-dropdown[data-v-465c8d75]{width:15rem}.header .group-dropdown[data-v-465c8d75]{width:10rem}.header .labeled_button[data-v-465c8d75]{white-space:nowrap;flex-direction:row;align-items:center;gap:.5rem;display:flex}.instances[data-v-465c8d75]{scroll-behavior:smooth;grid-template-columns:repeat(auto-fill,minmax(16rem,1fr));gap:.75rem;width:100%;margin-right:auto;display:grid;overflow-y:auto}.selected[data-v-189ee336]{background:var(--color-brand-highlight);border-radius:var(--radius-lg);color:var(--color-contrast);gap:1rem}.logged-out[data-v-189ee336]{background:var(--color-bg);border-radius:var(--radius-lg);gap:1rem}.account[data-v-189ee336]{text-align:left;align-items:center;width:max-content;padding:.5rem 1rem;display:flex}.account h4[data-v-189ee336],.account p[data-v-189ee336]{margin:0}.account-card[data-v-189ee336]{z-index:11;border:1px solid var(--color-button-bg);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;flex-direction:column;gap:.5rem;width:max-content;max-height:98vh;margin-top:.5rem;padding:1rem;display:flex;position:fixed;right:2rem;overflow-y:auto}.account-card[data-v-189ee336]::-webkit-scrollbar-track{border-top-right-radius:1rem;border-bottom-right-radius:1rem}.account-card[data-v-189ee336]::-webkit-scrollbar{border-top-right-radius:1rem;border-bottom-right-radius:1rem}.account-card.hidden[data-v-189ee336]{display:none}.account-card.expanded[data-v-189ee336]{left:13.5rem}.account-card.isolated[data-v-189ee336]{position:relative;top:0;left:0}.accounts-title[data-v-189ee336]{font-size:1.2rem;font-weight:bolder}.account-group[data-v-189ee336]{flex-direction:column;gap:.5rem;width:100%;display:flex}.option[data-v-189ee336]{background:var(--color-raised-bg);width:calc(100% - 2.25rem);color:var(--color-base);box-shadow:none}.option img[data-v-189ee336]{margin-right:.5rem}.icon[data-v-189ee336]{--size:1.5rem!important}.account-row[data-v-189ee336]{vertical-align:center;flex-direction:row;justify-content:space-between;gap:.5rem;padding-right:1rem;display:flex}.fade-enter-active[data-v-189ee336],.fade-leave-active[data-v-189ee336]{transition:opacity .25s,translate .25s,scale .25s}.fade-enter-from[data-v-189ee336],.fade-leave-to[data-v-189ee336]{opacity:0;translate:0 -2rem;scale:.9}.avatar-button[data-v-189ee336]{color:var(--color-base);background-color:var(--color-button-bg);border-radius:var(--radius-md);text-align:left;align-items:center;gap:.5rem;width:100%;padding:.5rem .75rem;display:flex}.avatar-button.expanded[data-v-189ee336]{border:1px solid var(--color-button-bg);padding:1rem}.avatar-text[data-v-189ee336]{flex-direction:column;margin:auto 0 auto .25rem;display:flex}.text[data-v-189ee336]{white-space:nowrap;text-overflow:ellipsis;width:6rem;overflow:hidden}.accounts-text[data-v-189ee336]{align-items:center;gap:.25rem;margin:0;display:flex}.qr-code[data-v-189ee336]{border-radius:var(--radius-md);background-color:#fff!important}.modal-body[data-v-189ee336]{gap:var(--gap-lg);padding:var(--gap-xl);flex-direction:row;align-items:center;display:flex}.modal-body .modal-text[data-v-189ee336]{gap:var(--gap-sm);flex-direction:column;width:100%;display:flex}.modal-body .modal-text h2[data-v-189ee336],.modal-body .modal-text p[data-v-189ee336]{margin:0}.modal-body .modal-text .code-text[data-v-189ee336]{gap:var(--gap-xs);flex-direction:row;align-items:center;display:flex}.modal-body .modal-text .code-text .code[data-v-189ee336]{background-color:var(--color-bg);border-radius:var(--radius-md);border:solid 1px var(--color-button-bg);font-family:var(--mono-font);letter-spacing:var(--gap-md);color:var(--color-contrast);padding:var(--gap-sm)0 var(--gap-sm)var(--gap-md);font-size:2rem;font-weight:700}.modal-body .modal-text .code-text .btn[data-v-189ee336]{width:2.5rem;height:2.5rem}.button-row[data-v-189ee336]{flex-direction:row;display:flex}.modal[data-v-189ee336]{position:absolute}.code[data-v-189ee336]{color:var(--color-brand);padding:.05rem .1rem;display:flex}.code .card[data-v-189ee336]{background:var(--color-base);color:var(--color-contrast);padding:.5rem 1rem}.action-groups[data-v-7095a984]{align-items:center;gap:var(--gap-md);flex-direction:row;display:flex}.arrow[data-v-7095a984]{align-items:center;transition:transform .2s ease-in-out;display:flex}.arrow.rotate[data-v-7095a984]{transform:rotate(180deg)}.status[data-v-7095a984]{border-radius:var(--radius-md);border:1px solid var(--color-button-bg);padding:var(--gap-sm)var(--gap-lg);flex-direction:row;align-items:center;gap:.5rem;display:flex}.running-text[data-v-7095a984]{gap:var(--gap-xs);white-space:nowrap;-webkit-user-select:none;-moz-user-select:none;user-select:none;flex-direction:row;display:flex;overflow:hidden}.running-text.clickable[data-v-7095a984]:hover{cursor:pointer}.circle[data-v-7095a984]{border-radius:50%;width:.5rem;height:.5rem;margin-right:.25rem;display:inline-block}.circle.running[data-v-7095a984]{background-color:var(--color-brand)}.circle.stopped[data-v-7095a984]{background-color:var(--color-base)}.icon-button[data-v-7095a984]{box-shadow:none;background-color:#0000;width:1.25rem!important;height:1.25rem!important}.icon-button svg[data-v-7095a984]{min-width:1.25rem}.icon-button.stop[data-v-7095a984]{color:var(--color-red)}.info-card[data-v-7095a984]{z-index:9;background-color:var(--color-raised-bg);width:20rem;box-shadow:var(--shadow-raised);border:1px solid var(--color-button-bg);flex-direction:column;gap:1rem;transition:all .2s ease-in-out;display:flex;position:absolute;top:3.5rem;right:.5rem;overflow:auto}.info-card.hidden[data-v-7095a984]{transform:translateY(-100%)}.loading-option[data-v-7095a984]{flex-direction:row;align-items:center;gap:.5rem;margin:0;padding:0;display:flex}.loading-option[data-v-7095a984] :hover{background-color:var(--color-raised-bg-hover)}.loading-text[data-v-7095a984]{flex-direction:column;margin:0;padding:0;display:flex}.loading-text .row[data-v-7095a984]{flex-direction:row;align-items:center;gap:.5rem;display:flex}.loading-icon[data-v-7095a984]{width:2.25rem;height:2.25rem;display:block}.loading-icon[data-v-7095a984] svg{width:2.25rem;height:2.25rem;left:1rem}.download-enter-active[data-v-7095a984],.download-leave-active[data-v-7095a984]{transition:opacity .3s}.download-enter-from[data-v-7095a984],.download-leave-to[data-v-7095a984]{opacity:0}.progress-bar[data-v-7095a984]{width:100%}.info-text[data-v-7095a984]{flex-direction:column;align-items:flex-start;gap:.5rem;margin:0;padding:0;display:flex}.info-title[data-v-7095a984]{margin:0}.profile-button[data-v-7095a984]{align-items:center;gap:var(--gap-sm);background-color:var(--color-raised-bg);width:100%;box-shadow:none;flex-direction:row;display:flex}.profile-button .text[data-v-7095a984]{margin-right:auto}.profile-card[data-v-7095a984]{z-index:9;background-color:var(--color-raised-bg);box-shadow:var(--shadow-raised);border:1px solid var(--color-button-bg);padding:var(--gap-md);flex-direction:column;transition:all .2s ease-in-out;display:flex;position:absolute;top:3.5rem;right:.5rem;overflow:auto}.profile-card.hidden[data-v-7095a984]{transform:translateY(-100%)}.link[data-v-7095a984]{align-items:center;gap:var(--gap-sm);color:var(--color-text);flex-direction:row;margin:0;text-decoration:none;display:flex}.splash-screen[data-v-362e4671]{opacity:1;transition:opacity .25s ease-in-out}.splash-screen.fade-out[data-v-362e4671]{opacity:0}.app-buttons[data-v-362e4671]{z-index:9999;display:flex;position:absolute;right:0}.app-logo-wrapper[data-v-362e4671]{z-index:9998;flex-direction:column;justify-content:center;align-items:center;gap:1rem;width:100%;height:100vh;display:flex;position:absolute}.app-logo[data-v-362e4671]{width:fit-content;height:2.25rem}.loading-bar[data-v-362e4671]{max-width:20rem}.gradient-bg[data-v-362e4671]{z-index:9997;background:linear-gradient(#42835c46,#11232b80 97.29%),linear-gradient(#16181ca3,#16181ca3);width:100vw;height:100vh;position:absolute}.cube-bg[data-v-362e4671]{opacity:.8;z-index:9996;background:#16181c url(/assets/cube-FjxyQgGa.png) 50%/contain no-repeat;width:180vw;height:180vh;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.base-bg[data-v-362e4671]{background:var(--color-bg);z-index:9995;width:100%;height:100%;position:absolute;top:0;left:0}.light-mode{--color-orange-bg:#ffa34733}.dark-mode,.oled-mode{--color-orange-bg:#e0832533}.cta-button[data-v-90ead110]{justify-content:center;align-items:center;gap:.5rem;padding:.5rem;display:flex}.warning-banner[data-v-90ead110]{padding:var(--gap-lg);background-color:var(--color-orange-bg);border:2px solid var(--color-orange);border-radius:var(--radius-md);flex-direction:column;gap:.5rem;margin-bottom:1rem;display:flex}.warning-banner__title[data-v-90ead110]{align-items:center;gap:.5rem;font-weight:700;display:flex}.warning-banner__title svg[data-v-90ead110]{color:var(--color-orange);width:1.5rem;height:1.5rem}.modal-body[data-v-90ead110]{gap:var(--gap-md);flex-direction:column;display:flex}.markdown-body[data-v-90ead110]{overflow:auto}.loading-indicator-bar[data-v-65cd5b29]:before{content:"";width:var(--_width);background-image:radial-gradient(80% 100% at 20% 0,var(--color-brand)0,transparent 80%);opacity:calc(var(--_opacity)*.1);z-index:5;transition:width .1s ease-in-out,opacity .1s ease-out;position:absolute;inset:0}.modal-body[data-v-4efe8246]{justify-content:center;align-items:center;gap:var(--gap-md);flex-direction:column;display:flex}.button-row[data-v-4efe8246]{justify-content:space-between;align-items:center;gap:var(--gap-md);flex-direction:row;width:100%;display:flex}.button-group[data-v-4efe8246]{gap:var(--gap-sm);flex-direction:row;display:flex}.project-card[data-v-4efe8246]{background-color:var(--color-bg);width:100%}.project-card[data-v-4efe8246] .badge{border:1px solid var(--color-raised-bg);background-color:var(--color-accent-contrast)}.creation-card[data-v-f4b19ae1]{background-color:var(--color-bg);flex-direction:column;gap:1rem;margin:0;display:flex}.creation-container[data-v-f4b19ae1]{flex-direction:row;gap:1rem;display:flex}.creation-icon[data-v-f4b19ae1]{flex-direction:row;flex-grow:1;align-items:center;gap:1rem;display:flex}.creation-icon .creation-icon__description[data-v-f4b19ae1]{flex-direction:column;gap:.5rem;display:flex}.creation-input[data-v-f4b19ae1]{width:100%}.no-wrap[data-v-f4b19ae1]{white-space:nowrap}.creation-dropdown[data-v-f4b19ae1]{flex-direction:column;gap:.5rem;display:flex;width:min-content!important}.creation-settings[data-v-f4b19ae1]{flex-direction:column;justify-content:center;gap:.5rem;width:100%;margin-left:.5rem;display:flex}.modal-body[data-v-f4b19ae1]{flex-direction:column;gap:1rem;min-width:350px;display:flex}.profiles[data-v-f4b19ae1]{max-height:12rem;overflow-y:auto}.profiles.hide-creation[data-v-f4b19ae1]{max-height:21rem}.option[data-v-f4b19ae1]{background:var(--color-raised-bg);width:100%;color:var(--color-base);box-shadow:none;flex-direction:row;justify-content:space-between;align-items:center;gap:.5rem;display:flex}.option img[data-v-f4b19ae1]{margin-right:.5rem}.option .name[data-v-f4b19ae1]{flex-direction:column;justify-content:center;display:flex}.option .profile-button[data-v-f4b19ae1]{text-align:left;align-content:start;padding:.5rem}.profile-image[data-v-f4b19ae1]{--size:2rem!important}.data[data-v-bd65ebe5]{text-transform:capitalize}table[data-v-bd65ebe5]{border-radius:var(--radius-lg);border-collapse:collapse;width:100%;box-shadow:0 0 0 1px var(--color-button-bg)}th[data-v-bd65ebe5]{text-align:left;background-color:var(--color-bg);border-bottom:1px solid var(--color-button-bg);padding:1rem;overflow:hidden}th[data-v-bd65ebe5]:first-child{border-top-left-radius:var(--radius-lg);border-right:1px solid var(--color-button-bg)}th[data-v-bd65ebe5]:last-child{border-top-right-radius:var(--radius-lg)}td[data-v-bd65ebe5]{padding:1rem}td[data-v-bd65ebe5]:first-child{border-right:1px solid var(--color-button-bg)}.button-group[data-v-bd65ebe5]{justify-content:flex-end;gap:1rem;display:flex}.modal-body[data-v-bd65ebe5]{flex-direction:column;gap:1rem;display:flex}.modal-body[data-v-bd65ebe5] .animated-dropdown .options{max-height:13.375rem}.modal-body[data-v-c93701e0]{flex-direction:column;gap:1rem;display:flex}.router-link-active svg[data-v-1148ee8d],.subpage-active svg[data-v-1148ee8d]{filter:drop-shadow(0 0 .5rem #000)}.router-link-active[data-v-1148ee8d]{background-color:var(--color-button-bg-selected);color:var(--color-button-text-selected)}.subpage-active[data-v-1148ee8d]{background-color:var(--color-button-bg);color:var(--color-contrast)}.light .dark-image[data-v-c6d474b9],.light-mode .dark-image[data-v-c6d474b9]{display:none}.light .light-image[data-v-c6d474b9],.light-mode .light-image[data-v-c6d474b9]{display:block}.window-controls[data-v-98234b02]{z-index:20;flex-direction:row;align-items:center;display:none}.window-controls .titlebar-button[data-v-98234b02]{cursor:pointer;color:var(--color-base);width:3rem;height:100%;box-shadow:none;background-color:#0000;justify-content:center;align-items:center;transition:all .1s ease-in-out;display:flex;position:relative}.window-controls .titlebar-button[data-v-98234b02]:last-child{width:3.75rem;padding-right:.75rem}.window-controls .titlebar-button svg[data-v-98234b02]{width:1.25rem;height:1.25rem}.window-controls .titlebar-button[data-v-98234b02]:before{content:"";aspect-ratio:1;z-index:-1;background-color:#0000;border-radius:999999px;width:3rem;height:3rem;margin-block:auto;transition:all .2s ease-in-out;position:absolute;scale:.9}.window-controls .titlebar-button.close[data-v-98234b02]:active,.window-controls .titlebar-button.close[data-v-98234b02]:hover{color:var(--color-accent-contrast)}.window-controls .titlebar-button.close[data-v-98234b02]:active:before,.window-controls .titlebar-button.close[data-v-98234b02]:hover:before{background-color:var(--color-red)}.window-controls .titlebar-button[data-v-98234b02]:active,.window-controls .titlebar-button[data-v-98234b02]:hover{color:var(--color-contrast)}.window-controls .titlebar-button[data-v-98234b02]:active:before,.window-controls .titlebar-button[data-v-98234b02]:hover:before{background-color:var(--color-button-bg);scale:1}.app-contents[data-v-98234b02],.app-grid-layout[data-v-98234b02]{--top-bar-height:3rem;--left-bar-width:4rem;--right-bar-width:300px}.app-grid-layout[data-v-98234b02]{background-color:var(--color-raised-bg);grid-template:"status status""nav dummy"1fr/auto 1fr;height:100vh;display:grid;position:relative}.app-grid-navbar[data-v-98234b02]{grid-area:nav}.app-grid-statusbar[data-v-98234b02]{grid-area:status}[data-tauri-drag-region][data-v-98234b02]{-webkit-app-region:drag}[data-tauri-drag-region-exclude][data-v-98234b02]{-webkit-app-region:no-drag}.app-contents[data-v-98234b02]{z-index:1;left:var(--left-bar-width);top:var(--top-bar-height);height:calc(100vh - var(--top-bar-height));background-color:var(--color-bg);border-top-left-radius:var(--radius-xl);grid-template-columns:1fr 0;display:grid;position:absolute;bottom:0;right:0}.app-contents.sidebar-enabled[data-v-98234b02]{grid-template-columns:1fr 300px}.loading-indicator-container[data-v-98234b02]{border-top-left-radius:var(--radius-xl);overflow:hidden}.app-sidebar[data-v-98234b02]{width:300px;height:calc(100vh - var(--top-bar-height));background:var(--brand-gradient-bg);--color-button-bg:var(--brand-gradient-button);--color-button-bg-hover:var(--brand-gradient-border);--color-divider:var(--brand-gradient-border);--color-divider-dark:var(--brand-gradient-border);position:relative;overflow:visible}.app-sidebar[data-v-98234b02]:after{content:"";background:var(--brand-gradient-fade-out-color);pointer-events:none;height:5rem;position:absolute;bottom:250px;left:0;right:0}.app-sidebar.has-plus[data-v-98234b02]:after{display:none}.app-sidebar[data-v-98234b02]:before{content:"";pointer-events:none;width:2rem;position:absolute;top:0;bottom:0;left:-2rem;box-shadow:inset -15px 0 15px -15px #0003}.app-viewport[data-v-98234b02]{flex-grow:1;height:100%;overflow:hidden auto}.app-contents[data-v-98234b02]:before{z-index:1;content:"";left:var(--left-bar-width);top:var(--top-bar-height);right:calc(-1*var(--left-bar-width));bottom:calc(-1*var(--left-bar-width));border-radius:var(--radius-xl);pointer-events:none;position:fixed;box-shadow:inset 1px 1px 15px #0003,inset 1px 1px 1px #ffffff3b}.sidebar-teleport-content[data-v-98234b02]{display:contents}.sidebar-default-content[data-v-98234b02]{display:none}.sidebar-teleport-content:empty+.sidebar-default-content.sidebar-enabled[data-v-98234b02]{display:contents}.mac .app-grid-statusbar{padding-left:5rem}.windows .fake-appbar{height:2.5rem!important}.windows .window-controls{display:flex!important}.windows .info-card,.windows .profile-card{right:8rem}fieldset[disabled] .multiselect{pointer-events:none}.multiselect__spinner{background:#fff;width:40px;height:38px;display:block;position:absolute;top:1px;right:1px}.multiselect__spinner:after,.multiselect__spinner:before{content:"";border:2px solid #0000;border-top-color:#41b883;border-radius:100%;width:16px;height:16px;margin:-8px 0 0 -8px;position:absolute;top:50%;left:50%;box-shadow:0 0 0 1px #0000}.multiselect__spinner:before{animation:2.4s cubic-bezier(.41,.26,.2,.62) infinite spinning}.multiselect__spinner:after{animation:2.4s cubic-bezier(.51,.09,.21,.8) infinite spinning}.multiselect__loading-enter-active,.multiselect__loading-leave-active{opacity:1;transition:opacity .4s ease-in-out}.multiselect__loading-enter,.multiselect__loading-leave-active{opacity:0}.multiselect,.multiselect__input,.multiselect__single{touch-action:manipulation;font-family:inherit;font-size:16px}.multiselect{box-sizing:content-box;text-align:left;color:#35495e;width:100%;min-height:40px;display:block;position:relative}.multiselect *{box-sizing:border-box}.multiselect:focus{outline:0}.multiselect--disabled{pointer-events:none;opacity:.6;background:#ededed}.multiselect--active{z-index:50}.multiselect--active:not(.multiselect--above) .multiselect__current,.multiselect--active:not(.multiselect--above) .multiselect__input,.multiselect--active:not(.multiselect--above) .multiselect__tags{border-bottom-right-radius:0;border-bottom-left-radius:0}.multiselect--active .multiselect__select{transform:rotate(180deg)}.multiselect--above.multiselect--active .multiselect__current,.multiselect--above.multiselect--active .multiselect__input,.multiselect--above.multiselect--active .multiselect__tags{border-top-left-radius:0;border-top-right-radius:0}.multiselect__input,.multiselect__single{box-sizing:border-box;vertical-align:top;background:#fff;border:none;border-radius:5px;width:100%;min-height:20px;margin-bottom:8px;padding:0 0 0 5px;line-height:20px;transition:border .1s;display:inline-block;position:relative}.multiselect__input::-moz-placeholder{color:#35495e}.multiselect__input::placeholder{color:#35495e}.multiselect__tag~.multiselect__input,.multiselect__tag~.multiselect__single{width:auto}.multiselect__input:hover,.multiselect__single:hover{border-color:#cfcfcf}.multiselect__input:focus,.multiselect__single:focus{border-color:#a8a8a8;outline:0}.multiselect__single{margin-bottom:8px;padding-left:5px}.multiselect__tags-wrap{display:inline}.multiselect__tags{background:#fff;border:1px solid #e8e8e8;border-radius:5px;min-height:40px;padding:8px 40px 0 8px;font-size:14px;display:block}.multiselect__tag{color:#fff;white-space:nowrap;text-overflow:ellipsis;background:#41b883;border-radius:5px;max-width:100%;margin-bottom:5px;margin-right:10px;padding:4px 26px 4px 10px;line-height:1;display:inline-block;position:relative;overflow:hidden}.multiselect__tag-icon{cursor:pointer;font-weight:700;font-style:initial;text-align:center;border-radius:5px;width:22px;margin-left:7px;line-height:22px;transition:all .2s;position:absolute;top:0;bottom:0;right:0}.multiselect__tag-icon:after{content:"×";color:#266d4d;font-size:14px}.multiselect__tag-icon:focus:after,.multiselect__tag-icon:hover:after{color:#fff}.multiselect__current{box-sizing:border-box;white-space:nowrap;cursor:pointer;border:1px solid #e8e8e8;border-radius:5px;min-height:40px;margin:0;padding:8px 30px 0 12px;line-height:16px;text-decoration:none;display:block;overflow:hidden}.multiselect__select{box-sizing:border-box;text-align:center;cursor:pointer;width:40px;height:38px;margin:0;padding:4px 8px;line-height:16px;text-decoration:none;transition:transform .2s;display:block;position:absolute;top:1px;right:1px}.multiselect__select:before{color:#999;content:"";border:5px solid #0000;border-top-color:#999;border-bottom-width:0;margin-top:4px;position:relative;top:65%;right:0}.multiselect__placeholder{color:#adadad;margin-bottom:10px;padding-top:2px;display:inline-block}.multiselect--active .multiselect__placeholder{display:none}.multiselect__content-wrapper{z-index:50;-webkit-overflow-scrolling:touch;background:#fff;border:1px solid #e8e8e8;border-top:none;border-bottom-right-radius:5px;border-bottom-left-radius:5px;width:100%;max-height:240px;display:block;position:absolute;overflow:auto}.multiselect__content{vertical-align:top;min-width:100%;margin:0;padding:0;list-style:none;display:inline-block}.multiselect--above .multiselect__content-wrapper{border-top:1px solid #e8e8e8;border-bottom:none;border-radius:5px 5px 0 0;bottom:100%}.multiselect__content::-webkit-scrollbar{display:none}.multiselect__element{display:block}.multiselect__option{text-transform:none;vertical-align:middle;cursor:pointer;white-space:nowrap;min-height:40px;padding:12px;line-height:16px;text-decoration:none;display:block;position:relative}.multiselect__option:after{padding-left:20px;padding-right:12px;font-size:13px;line-height:40px;position:absolute;top:0;right:0}.multiselect__option--highlight{color:#fff;background:#41b883;outline:0}.multiselect__option--highlight:after{content:attr(data-select);color:#fff;background:#41b883}.multiselect__option--selected{color:#35495e;background:#f3f3f3;font-weight:700}.multiselect__option--selected:after{content:attr(data-selected);color:silver;background:inherit}.multiselect__option--selected.multiselect__option--highlight{color:#fff;background:#ff6a6a}.multiselect__option--selected.multiselect__option--highlight:after{content:attr(data-deselect);color:#fff;background:#ff6a6a}.multiselect--disabled .multiselect__current,.multiselect--disabled .multiselect__select{color:#a6a6a6;background:#ededed}.multiselect__option--disabled{cursor:text;pointer-events:none;color:#a6a6a6!important;background:#ededed!important}.multiselect__option--group{color:#35495e;background:#ededed}.multiselect__option--group.multiselect__option--highlight{color:#fff;background:#35495e}.multiselect__option--group.multiselect__option--highlight:after{background:#35495e}.multiselect__option--disabled.multiselect__option--highlight{background:#dedede}.multiselect__option--group-selected.multiselect__option--highlight{color:#fff;background:#ff6a6a}.multiselect__option--group-selected.multiselect__option--highlight:after{content:attr(data-deselect);color:#fff;background:#ff6a6a}.multiselect-enter-active,.multiselect-leave-active{transition:all .15s}.multiselect-enter,.multiselect-leave-active{opacity:0}.multiselect__strong{vertical-align:top;margin-bottom:8px;line-height:20px;display:inline-block}[dir=rtl] .multiselect{text-align:right}[dir=rtl] .multiselect__select{left:1px;right:auto}[dir=rtl] .multiselect__tags{padding:8px 8px 0 40px}[dir=rtl] .multiselect__content{text-align:right}[dir=rtl] .multiselect__option:after{left:0;right:auto}[dir=rtl] .multiselect__clear{left:12px;right:auto}[dir=rtl] .multiselect__spinner{left:1px;right:auto}@keyframes spinning{0%{transform:rotate(0)}to{transform:rotate(2turn)}}.resize-observer[data-v-b329ee4c]{z-index:-1;pointer-events:none;opacity:0;background-color:#0000;border:none;width:100%;height:100%;display:block;position:absolute;top:0;left:0;overflow:hidden}.resize-observer[data-v-b329ee4c] object{pointer-events:none;z-index:-1;width:100%;height:100%;display:block;position:absolute;top:0;left:0;overflow:hidden}.v-popper__popper{z-index:10000;outline:0;top:0;left:0}.v-popper__popper.v-popper__popper--hidden{visibility:hidden;opacity:0;pointer-events:none;transition:opacity .15s,visibility .15s}.v-popper__popper.v-popper__popper--shown{visibility:visible;opacity:1;transition:opacity .15s}.v-popper__popper.v-popper__popper--skip-transition,.v-popper__popper.v-popper__popper--skip-transition>.v-popper__wrapper{transition:none!important}.v-popper__backdrop{width:100%;height:100%;display:none;position:absolute;top:0;left:0}.v-popper__inner{box-sizing:border-box;position:relative;overflow-y:auto}.v-popper__inner>div{z-index:1;max-width:inherit;max-height:inherit;position:relative}.v-popper__arrow-container{width:10px;height:10px;position:absolute}.v-popper__popper--arrow-overflow .v-popper__arrow-container,.v-popper__popper--no-positioning .v-popper__arrow-container{display:none}.v-popper__arrow-inner,.v-popper__arrow-outer{border-style:solid;width:0;height:0;position:absolute;top:0;left:0}.v-popper__arrow-inner{visibility:hidden;border-width:7px}.v-popper__arrow-outer{border-width:6px}.v-popper__popper[data-popper-placement^=bottom] .v-popper__arrow-inner,.v-popper__popper[data-popper-placement^=top] .v-popper__arrow-inner{left:-2px}.v-popper__popper[data-popper-placement^=bottom] .v-popper__arrow-outer,.v-popper__popper[data-popper-placement^=top] .v-popper__arrow-outer{left:-1px}.v-popper__popper[data-popper-placement^=top] .v-popper__arrow-inner,.v-popper__popper[data-popper-placement^=top] .v-popper__arrow-outer{border-bottom-width:0;border-bottom-color:#0000!important;border-left-color:#0000!important;border-right-color:#0000!important}.v-popper__popper[data-popper-placement^=top] .v-popper__arrow-inner{top:-2px}.v-popper__popper[data-popper-placement^=bottom] .v-popper__arrow-container{top:0}.v-popper__popper[data-popper-placement^=bottom] .v-popper__arrow-inner,.v-popper__popper[data-popper-placement^=bottom] .v-popper__arrow-outer{border-top-width:0;border-top-color:#0000!important;border-left-color:#0000!important;border-right-color:#0000!important}.v-popper__popper[data-popper-placement^=bottom] .v-popper__arrow-inner{top:-4px}.v-popper__popper[data-popper-placement^=bottom] .v-popper__arrow-outer{top:-6px}.v-popper__popper[data-popper-placement^=left] .v-popper__arrow-inner,.v-popper__popper[data-popper-placement^=right] .v-popper__arrow-inner{top:-2px}.v-popper__popper[data-popper-placement^=left] .v-popper__arrow-outer,.v-popper__popper[data-popper-placement^=right] .v-popper__arrow-outer{top:-1px}.v-popper__popper[data-popper-placement^=right] .v-popper__arrow-inner,.v-popper__popper[data-popper-placement^=right] .v-popper__arrow-outer{border-left-width:0;border-top-color:#0000!important;border-bottom-color:#0000!important;border-left-color:#0000!important}.v-popper__popper[data-popper-placement^=right] .v-popper__arrow-inner{left:-4px}.v-popper__popper[data-popper-placement^=right] .v-popper__arrow-outer{left:-6px}.v-popper__popper[data-popper-placement^=left] .v-popper__arrow-container{right:-10px}.v-popper__popper[data-popper-placement^=left] .v-popper__arrow-inner,.v-popper__popper[data-popper-placement^=left] .v-popper__arrow-outer{border-right-width:0;border-top-color:#0000!important;border-bottom-color:#0000!important;border-right-color:#0000!important}.v-popper__popper[data-popper-placement^=left] .v-popper__arrow-inner{left:-2px}.v-popper--theme-tooltip .v-popper__inner{color:#fff;background:#000c;border-radius:6px;padding:7px 12px 6px}.v-popper--theme-tooltip .v-popper__arrow-outer{border-color:#000c}.v-popper--theme-dropdown .v-popper__inner{color:#000;background:#fff;border:1px solid #ddd;border-radius:6px;box-shadow:0 6px 30px #0000001a}.v-popper--theme-dropdown .v-popper__arrow-inner{visibility:visible;border-color:#fff}.v-popper--theme-dropdown .v-popper__arrow-outer{border-color:#ddd}</style><body style=overflow:hidden><div id=app><div class="modal-container shown" data-v-163d50cf><div class="flex bg-bg-raised flex-col modal-body rounded-2xl" data-v-163d50cf><div class="items-center border-0 border-b-[1px] border-divider border-solid gap-12 grid grid-cols-[auto_min-content] max-w-full p-6"><div class="flex break-words gap-3 items-center min-w-0 text-wrap"><span class="font-extrabold text-contrast text-lg">{{title}}</span></div></div><div class="p-6 overflow-y-auto"><div class=modal-body><div class=markdown-body><p>{{message}}</div></div></div></div></div></div><script>window.close()</script>
diff --git a/apps/frontend/src/assets/styles/components.scss b/apps/frontend/src/assets/styles/components.scss
index b04291d4c..cb9f0e2f8 100644
--- a/apps/frontend/src/assets/styles/components.scss
+++ b/apps/frontend/src/assets/styles/components.scss
@@ -1,64 +1,8 @@
-/*
-  Base components
-*/
-
-.known-error .multiselect__tags {
-	border-color: var(--color-red) !important;
-	background-color: var(--color-warning-bg) !important;
-
-	&::placeholder {
-		color: var(--color-warning-text);
-	}
-}
-
-.grid-display {
-	display: grid;
-	grid-gap: var(--spacing-card-md);
-	grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
-
-	.grid-display__item {
-		display: flex;
-		flex-grow: 1;
-		flex-direction: column;
-		justify-content: flex-start;
-		background-color: var(--color-bg);
-		border-radius: var(--size-rounded-card);
-		padding: var(--spacing-card-lg);
-		gap: var(--spacing-card-md);
-		outline: 1px solid transparent;
-
-		.label {
-			color: var(--color-heading);
-			font-weight: bold;
-			font-size: 1rem;
-		}
-
-		.value {
-			color: var(--color-text-primary);
-			font-weight: bold;
-			font-size: 2rem;
-		}
-
-		.goto-link {
-			margin-top: auto;
-		}
-	}
-
-	&.width-12 {
-		grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
-	}
-
-	&.width-16 {
-		grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
-	}
-}
-
 /*
   Cards and body styling
 */
 .base-card {
-	@extend .padding-lg;
-
+	padding: var(--spacing-card-lg);
 	position: relative;
 
 	background-color: var(--color-raised-bg);
@@ -129,73 +73,9 @@
 	}
 }
 
-.padding-lg {
-	padding: var(--spacing-card-lg);
-}
-
-.padding-bg {
-	padding: var(--spacing-card-bg);
-}
-
-.padding-md {
-	padding: var(--spacing-card-md);
-}
-
-.padding-sm {
-	padding: var(--spacing-card-sm);
-}
-
-.padding-0 {
-	padding: 0;
-}
-
-.padding-block-lg {
-	padding-block: var(--spacing-card-lg);
-}
-
-.padding-block-bg {
-	padding-block: var(--spacing-card-bg);
-}
-
-.padding-block-md {
-	padding-block: var(--spacing-card-md);
-}
-
-.padding-block-sm {
-	padding-block: var(--spacing-card-sm);
-}
-
-.padding-block-0 {
-	padding-block: 0;
-}
-
-.padding-inline-lg {
-	padding-inline: var(--spacing-card-lg);
-}
-
-.padding-inline-bg {
-	padding-inline: var(--spacing-card-bg);
-}
-
-.padding-inline-md {
-	padding-inline: var(--spacing-card-md);
-}
-
-.padding-inline-sm {
-	padding-inline: var(--spacing-card-sm);
-}
-
-.padding-inline-0 {
-	padding-inline: 0;
-}
-
 .universal-body {
 	@extend .universal-labels;
 
-	.multiselect {
-		width: 15rem;
-	}
-
 	> :where(input + *, .input-group + *, .chips + *, .input-div + *) {
 		&:not(:empty) {
 			margin-block-start: var(--spacing-card-md);
@@ -340,19 +220,6 @@
 	}
 }
 
-.navigation-card {
-	@extend .base-card;
-	@extend .padding-inline-lg;
-	@extend .padding-block-md;
-
-	align-items: center;
-	display: flex;
-	justify-content: space-between;
-	flex-wrap: wrap;
-	row-gap: 0.5rem;
-	min-height: 3.75rem;
-}
-
 /*
   Other
  */
@@ -372,19 +239,6 @@
 	}
 }
 
-.title-link {
-	text-decoration: underline;
-
-	&:focus-visible,
-	&:hover {
-		color: var(--color-heading);
-	}
-
-	&:active {
-		color: var(--color-text-primary);
-	}
-}
-
 .button-base {
 	@extend .button-animation;
 	font-weight: 500;
@@ -455,36 +309,6 @@ tr.button-transparent {
 	}
 }
 
-.button-within {
-	transition:
-		opacity 0.5s ease-in-out,
-		filter 0.2s ease-in-out,
-		transform 0.05s ease-in-out,
-		outline 0.2s ease-in-out;
-
-	&:focus-visible:not(&.disabled),
-	&:hover:not(&.disabled) {
-		filter: brightness(0.85);
-	}
-
-	&:active:not(&.disabled) {
-		filter: brightness(0.8);
-	}
-
-	&.disabled {
-		cursor: not-allowed;
-		filter: grayscale(50%);
-		opacity: 0.5;
-		box-shadow: none;
-
-		&disabled,
-		&[disabled='true'] {
-			cursor: not-allowed;
-			box-shadow: none;
-		}
-	}
-}
-
 .button-color-base {
 	box-sizing: border-box;
 	--text-color: var(--color-button-text);
@@ -536,10 +360,6 @@ tr.button-transparent {
 		background: none;
 		box-shadow: none;
 	}
-
-	&.bold-button {
-		font-weight: bold;
-	}
 }
 
 .square-button {
@@ -570,24 +390,6 @@ tr.button-transparent {
 	flex-shrink: 0;
 }
 
-.header-button {
-	@extend .iconified-button;
-
-	box-sizing: content-box;
-	min-height: unset;
-	border-radius: var(--size-rounded-max);
-	white-space: nowrap;
-	padding: 0.5rem 0.75rem;
-	max-height: 1.75rem;
-
-	svg {
-		vertical-align: middle;
-		margin-right: 0.5rem;
-		height: 1.25rem;
-		width: 1.25rem;
-	}
-}
-
 .raised-button {
 	--background-color: var(--color-raised-bg);
 	box-shadow: var(--shadow-inset-sm), var(--shadow-raised);
@@ -608,11 +410,6 @@ tr.button-transparent {
 	--text-color: var(--color-brand-inverted);
 }
 
-.alt-brand-button {
-	--background-color: var(--color-brand-highlight);
-	--text-color: var(--color-text);
-}
-
 .button-group {
 	display: flex;
 	grid-gap: var(--spacing-card-sm);
@@ -621,21 +418,6 @@ tr.button-transparent {
 	justify-content: right;
 }
 
-.multiselect--above .multiselect__content-wrapper {
-	border-top: none !important;
-	border-top-left-radius: var(--size-rounded-card) !important;
-	border-top-right-radius: var(--size-rounded-card) !important;
-}
-
-.known-error .multiselect__tags {
-	border-color: var(--color-red) !important;
-	background-color: var(--color-warning-bg) !important;
-
-	&::placeholder {
-		color: var(--color-warning-text);
-	}
-}
-
 .error {
 	display: flex;
 	flex-direction: column;
@@ -707,36 +489,6 @@ textarea.known-error {
 	color: var(--color-link-active);
 }
 
-h1 {
-	.beta-badge {
-		font-size: 0.4em;
-	}
-}
-
-.beta-badge {
-	font-size: 0.7em;
-	padding: 0.2rem 0.4rem;
-	background-color: transparent;
-	box-sizing: border-box;
-	border: 2px solid var(--color-text);
-	color: var(--color-text);
-	border-radius: var(--size-rounded-max);
-	margin-left: 0.5rem;
-	font-weight: bold;
-}
-
-.router-link-exact-active,
-h1,
-h2,
-h3 {
-	.beta-badge {
-		background-color: var(--color-button-text-active);
-		box-sizing: border-box;
-		border-color: transparent;
-		color: var(--color-raised-bg);
-	}
-}
-
 @media (prefers-reduced-motion) {
 	.button-animation,
 	button {
@@ -751,7 +503,6 @@ h3 {
 }
 
 .full-width-inputs {
-	.multiselect,
 	input,
 	.iconified-input {
 		width: 100%;
@@ -774,10 +525,6 @@ button {
 	max-width: 100%;
 	align-items: center;
 
-	.multiselect {
-		width: 15rem;
-	}
-
 	input {
 		flex-shrink: 2;
 	}
@@ -799,20 +546,6 @@ button {
 	}
 }
 
-.input-stack {
-	display: flex;
-	flex-direction: column;
-
-	> *:not(:last-child) {
-		margin-bottom: var(--spacing-card-sm);
-	}
-
-	> .multiselect {
-		width: unset;
-		height: inherit;
-	}
-}
-
 .text-input-wrapper {
 	display: flex;
 	flex-direction: row;
@@ -844,22 +577,6 @@ button {
 		user-select: none;
 	}
 
-	.text-input-wrapper__after {
-		display: flex;
-		color: var(--color-text);
-		padding: 0.5rem 1rem 0.5rem 0;
-		font-weight: var(--font-weight-medium);
-		min-height: 36px;
-		box-sizing: border-box;
-		width: fit-content;
-		align-items: center;
-		filter: grayscale(50%);
-		opacity: 0.5;
-		box-shadow: none;
-		flex-shrink: 0;
-		user-select: none;
-	}
-
 	input,
 	textarea {
 		border-radius: 0;
@@ -880,30 +597,6 @@ button {
 	}
 }
 
-.primary-stat {
-	align-items: center;
-	display: flex;
-	margin-bottom: 0.6rem;
-
-	.primary-stat__icon {
-		height: 1rem;
-		width: 1rem;
-	}
-
-	.primary-stat__text {
-		margin-left: 0.4rem;
-	}
-
-	.primary-stat__counter {
-		font-size: var(--font-size-lg);
-		font-weight: bold;
-	}
-
-	&.no-margin {
-		margin: 0;
-	}
-}
-
 .project-list {
 	width: 100%;
 	gap: var(--spacing-card-md);
@@ -1033,181 +726,87 @@ a.iconified-link {
 	}
 }
 
-a.subtle-link {
-	&:focus-visible,
-	&:hover {
-		text-decoration: underline;
-		filter: var(--hover-filter);
-	}
-
-	&:active {
-		filter: var(--active-filter);
-	}
-}
-
 .inline-svg svg,
 svg.inline-svg {
 	vertical-align: middle;
 }
 
 // START STUFF FOR OMORPHIA
-.experimental-styles-within {
-	.tag-list {
-		display: flex;
-		flex-wrap: wrap;
-		gap: var(--gap-4);
+.tag-list {
+	display: flex;
+	flex-wrap: wrap;
+	gap: var(--gap-4);
+}
+
+.flex-card {
+	display: flex;
+	flex-direction: column;
+	gap: var(--gap-12);
+	padding: var(--gap-16);
+
+	h2 {
+		font-size: var(--text-18);
+		font-weight: var(--weight-extrabold);
+		color: var(--color-contrast);
+		line-height: initial;
+		margin: 0;
 	}
 
-	.tag-list__item {
-		background-color: var(--_bg-color, var(--color-button-bg));
-		padding: var(--gap-4) var(--gap-8);
-		border-radius: var(--radius-max);
+	h3 {
+		font-size: var(--text-16);
 		font-weight: var(--weight-bold);
-		font-size: var(--text-14);
-		display: flex;
-		gap: var(--gap-4);
-		align-items: center;
-		vertical-align: middle;
-		color: var(--_color, var(--color-secondary));
-
-		svg {
-			width: var(--icon-14);
-			height: var(--icon-14);
-			display: flex;
-		}
-	}
-
-	.status-list {
-		display: flex;
-		flex-direction: column;
-		gap: var(--gap-8);
-		padding-left: var(--gap-6);
-
 		color: var(--color-base);
-		font-weight: var(--weight-bold);
+		margin: 0;
 	}
 
-	.status-list__item {
-		display: flex;
-		align-items: center;
-		gap: var(--gap-4);
-
-		svg {
-			width: var(--icon-16);
-			height: var(--icon-16);
-			margin-right: var(--gap-4);
-		}
-
-		span {
-			color: var(--color-secondary);
-			font-style: italic;
-			font-weight: var(--weight-normal);
-		}
-	}
-
-	.status-list__item--color-green svg {
-		color: var(--color-green);
-	}
-
-	.status-list__item--color-orange svg {
-		color: var(--color-orange);
-	}
-
-	.status-list__item--color-red svg {
-		color: var(--color-red);
-	}
-
-	.status-list__item--color-blue svg {
-		color: var(--color-blue);
-	}
-
-	.status-list__item--color-purple svg {
-		color: var(--color-purple);
-	}
-
-	&.flex-card,
-	.flex-card {
+	> section {
 		display: flex;
 		flex-direction: column;
-		gap: var(--gap-12);
-		padding: var(--gap-16);
-
-		h2 {
-			font-size: var(--text-18);
-			font-weight: var(--weight-extrabold);
-			color: var(--color-contrast);
-			line-height: initial;
-			margin: 0;
-		}
-
-		h3 {
-			font-size: var(--text-16);
-			font-weight: var(--weight-bold);
-			color: var(--color-base);
-			margin: 0;
-		}
-
-		> section {
-			display: flex;
-			flex-direction: column;
-			gap: var(--gap-8);
-		}
-	}
-
-	.list-style {
-		display: flex;
-		flex-direction: column;
-		gap: var(--gap-12);
-		font-weight: var(--weight-bold);
-
-		hr {
-			width: 100%;
-			border-color: var(--color-button-border);
-			margin-block: var(--gap-2);
-		}
-	}
-
-	.iconified-list-item {
-		display: flex;
 		gap: var(--gap-8);
-		vertical-align: middle;
-		align-items: center;
-		width: fit-content;
+	}
+}
 
-		svg {
-			width: var(--icon-16);
-			height: var(--icon-16);
-		}
+.list-style {
+	display: flex;
+	flex-direction: column;
+	gap: var(--gap-12);
+	font-weight: var(--weight-bold);
 
-		> svg:first-child {
-			flex-shrink: 0;
-		}
+	hr {
+		width: 100%;
+		border-color: var(--color-button-border);
+		margin-block: var(--gap-2);
+	}
+}
+
+.iconified-list-item {
+	display: flex;
+	gap: var(--gap-8);
+	vertical-align: middle;
+	align-items: center;
+	width: fit-content;
+
+	svg {
+		width: var(--icon-16);
+		height: var(--icon-16);
 	}
 
-	.links-list {
-		@extend .list-style;
-
-		> a {
-			@extend .iconified-list-item;
-
-			&:hover {
-				text-decoration: underline;
-			}
-		}
+	> svg:first-child {
+		flex-shrink: 0;
 	}
+}
 
-	.details-list {
-		@extend .list-style;
-	}
+.details-list {
+	@extend .list-style;
+}
 
-	.details-list__item {
-		@extend .iconified-list-item;
+.details-list__item {
+	@extend .iconified-list-item;
 
-		.details-list__item__text--style-secondary {
-			color: var(--color-secondary);
-			font-weight: var(--weight-normal);
-			font-size: var(--text-14);
-		}
+	.details-list__item__text--style-secondary {
+		color: var(--color-secondary);
+		font-weight: var(--weight-normal);
+		font-size: var(--text-14);
 	}
 }
 
diff --git a/apps/frontend/src/components/ui/Modal.vue b/apps/frontend/src/components/ui/Modal.vue
index 0a15a66e0..c6a9aa665 100644
--- a/apps/frontend/src/components/ui/Modal.vue
+++ b/apps/frontend/src/components/ui/Modal.vue
@@ -12,9 +12,11 @@
 			<div class="modal-body">
 				<div v-if="header" class="header">
 					<strong>{{ header }}</strong>
-					<button class="iconified-button icon-only transparent" @click="hide">
-						<XIcon />
-					</button>
+					<ButtonStyled circular type="transparent">
+						<button @click="hide">
+							<XIcon />
+						</button>
+					</ButtonStyled>
 				</div>
 				<div class="content">
 					<slot />
@@ -27,9 +29,11 @@
 
 <script>
 import { XIcon } from '@modrinth/assets'
+import { ButtonStyled } from '@modrinth/ui'
 
 export default {
 	components: {
+		ButtonStyled,
 		XIcon,
 	},
 	props: {
diff --git a/apps/frontend/src/components/ui/ModrinthFooter.vue b/apps/frontend/src/components/ui/ModrinthFooter.vue
index a4bd85c65..73109a3e5 100644
--- a/apps/frontend/src/components/ui/ModrinthFooter.vue
+++ b/apps/frontend/src/components/ui/ModrinthFooter.vue
@@ -223,9 +223,7 @@ function developerModeIncrement() {
 </script>
 
 <template>
-	<footer
-		class="footer-brand-background experimental-styles-within border-0 border-t-[1px] border-solid"
-	>
+	<footer class="footer-brand-background border-0 border-t-[1px] border-solid">
 		<div class="mx-auto flex max-w-screen-xl flex-col gap-6 p-6 pb-20 sm:px-12 md:py-12">
 			<div
 				class="grid grid-cols-1 gap-4 text-primary md:grid-cols-[1fr_2fr] lg:grid-cols-[auto_auto_auto_auto_auto]"
diff --git a/apps/frontend/src/components/ui/NotificationItem.vue b/apps/frontend/src/components/ui/NotificationItem.vue
index bf6fac681..420e85242 100644
--- a/apps/frontend/src/components/ui/NotificationItem.vue
+++ b/apps/frontend/src/components/ui/NotificationItem.vue
@@ -199,47 +199,9 @@
 		</span>
 		<div v-if="compact" class="notification__actions">
 			<template v-if="type === 'team_invite' || type === 'organization_invite'">
-				<button
-					v-tooltip="`Accept`"
-					class="iconified-button square-button brand-button button-transparent"
-					@click="
-						() => {
-							acceptTeamInvite(notification.body.team_id)
-							read()
-						}
-					"
-				>
-					<CheckIcon />
-				</button>
-				<button
-					v-tooltip="`Decline`"
-					class="iconified-button square-button danger-button button-transparent"
-					@click="
-						() => {
-							removeSelfFromTeam(notification.body.team_id)
-							read()
-						}
-					"
-				>
-					<XIcon />
-				</button>
-			</template>
-			<button
-				v-else-if="!notification.read"
-				v-tooltip="`Mark as read`"
-				class="iconified-button square-button button-transparent"
-				@click="read()"
-			>
-				<XIcon />
-			</button>
-		</div>
-		<div v-else class="notification__actions">
-			<div v-if="type !== null" class="input-group">
-				<template
-					v-if="(type === 'team_invite' || type === 'organization_invite') && !notification.read"
-				>
+				<ButtonStyled circular color="brand" type="transparent">
 					<button
-						class="iconified-button brand-button"
+						v-tooltip="`Accept`"
 						@click="
 							() => {
 								acceptTeamInvite(notification.body.team_id)
@@ -248,10 +210,11 @@
 						"
 					>
 						<CheckIcon />
-						Accept
 					</button>
+				</ButtonStyled>
+				<ButtonStyled circular color="red" type="transparent">
 					<button
-						class="iconified-button danger-button"
+						v-tooltip="`Decline`"
 						@click="
 							() => {
 								removeSelfFromTeam(notification.body.team_id)
@@ -260,51 +223,75 @@
 						"
 					>
 						<XIcon />
-						Decline
 					</button>
-				</template>
-				<button
-					v-else-if="!notification.read"
-					class="iconified-button"
-					:class="{ 'raised-button': raised }"
-					@click="read()"
-				>
-					<CheckIcon />
-					Mark as read
+				</ButtonStyled>
+			</template>
+			<ButtonStyled v-else-if="!notification.read" circular type="transparent">
+				<button v-tooltip="`Mark as read`" @click="read()">
+					<XIcon />
 				</button>
+			</ButtonStyled>
+		</div>
+		<div v-else class="notification__actions">
+			<div v-if="type !== null" class="input-group">
+				<template
+					v-if="(type === 'team_invite' || type === 'organization_invite') && !notification.read"
+				>
+					<ButtonStyled color="brand">
+						<button
+							@click="
+								() => {
+									acceptTeamInvite(notification.body.team_id)
+									read()
+								}
+							"
+						>
+							<CheckIcon />
+							Accept
+						</button>
+					</ButtonStyled>
+					<ButtonStyled color="red">
+						<button
+							@click="
+								() => {
+									removeSelfFromTeam(notification.body.team_id)
+									read()
+								}
+							"
+						>
+							<XIcon />
+							Decline
+						</button>
+					</ButtonStyled>
+				</template>
+				<ButtonStyled v-else-if="!notification.read">
+					<button @click="read()">
+						<CheckIcon />
+						Mark as read
+					</button>
+				</ButtonStyled>
 				<CopyCode v-if="flags.developerMode" :text="notification.id" />
 			</div>
 			<div v-else class="input-group">
-				<nuxt-link
-					v-if="notification.link && notification.link !== '#'"
-					class="iconified-button"
-					:class="{ 'raised-button': raised }"
-					:to="notification.link"
-					target="_blank"
-				>
-					<ExternalIcon />
-					Open link
-				</nuxt-link>
-				<button
-					v-for="(action, actionIndex) in notification.actions"
-					:key="actionIndex"
-					class="iconified-button"
-					:class="{ 'raised-button': raised }"
-					@click="performAction(notification, actionIndex)"
-				>
-					<CheckIcon v-if="action.title === 'Accept'" />
-					<XIcon v-else-if="action.title === 'Deny'" />
-					{{ action.title }}
-				</button>
-				<button
-					v-if="notification.actions.length === 0 && !notification.read"
-					class="iconified-button"
-					:class="{ 'raised-button': raised }"
-					@click="performAction(notification, null)"
-				>
-					<CheckIcon />
-					Mark as read
-				</button>
+				<ButtonStyled v-if="notification.link && notification.link !== '#'">
+					<nuxt-link :to="notification.link" target="_blank">
+						<ExternalIcon />
+						Open link
+					</nuxt-link>
+				</ButtonStyled>
+				<ButtonStyled v-for="(action, actionIndex) in notification.actions" :key="actionIndex">
+					<button @click="performAction(notification, actionIndex)">
+						<CheckIcon v-if="action.title === 'Accept'" />
+						<XIcon v-else-if="action.title === 'Deny'" />
+						{{ action.title }}
+					</button>
+				</ButtonStyled>
+				<ButtonStyled v-if="notification.actions.length === 0 && !notification.read">
+					<button @click="performAction(notification, null)">
+						<CheckIcon />
+						Mark as read
+					</button>
+				</ButtonStyled>
 				<CopyCode v-if="flags.developerMode" :text="notification.id" />
 			</div>
 		</div>
@@ -325,6 +312,7 @@ import {
 } from '@modrinth/assets'
 import {
 	Avatar,
+	ButtonStyled,
 	Categories,
 	CopyCode,
 	DoubleIcon,
@@ -594,10 +582,6 @@ function getLoaderCategories(ver) {
 		gap: var(--spacing-card-sm);
 	}
 
-	.notification__actions .iconified-button.square-button svg {
-		margin-right: 0;
-	}
-
 	.unknown-type {
 		color: var(--color-red);
 	}
@@ -618,4 +602,8 @@ function getLoaderCategories(ver) {
 		color: var(--color-blue);
 	}
 }
+
+.title-link {
+	@apply underline hover:brightness-[--hover-brightness];
+}
 </style>
diff --git a/apps/frontend/src/components/ui/OptionGroup.vue b/apps/frontend/src/components/ui/OptionGroup.vue
index 556e2cdbb..36313921e 100644
--- a/apps/frontend/src/components/ui/OptionGroup.vue
+++ b/apps/frontend/src/components/ui/OptionGroup.vue
@@ -1,7 +1,7 @@
 <template>
 	<nav
 		ref="scrollContainer"
-		class="card-shadow experimental-styles-within relative flex w-fit overflow-x-auto rounded-full bg-bg-raised p-1 text-sm font-bold"
+		class="card-shadow relative flex w-fit overflow-x-auto rounded-full bg-bg-raised p-1 text-sm font-bold"
 	>
 		<button
 			v-for="(option, index) in options"
diff --git a/apps/frontend/src/components/ui/OrganizationProjectTransferModal.vue b/apps/frontend/src/components/ui/OrganizationProjectTransferModal.vue
index dadf0577a..eec7645fa 100644
--- a/apps/frontend/src/components/ui/OrganizationProjectTransferModal.vue
+++ b/apps/frontend/src/components/ui/OrganizationProjectTransferModal.vue
@@ -67,50 +67,55 @@
 						</div>
 
 						<div class="table-cell">
-							<nuxt-link
-								class="btn icon-only"
-								:to="`/project/${project.slug ? project.slug : project.id}/settings`"
-							>
-								<SettingsIcon />
-							</nuxt-link>
+							<ButtonStyled circular>
+								<nuxt-link :to="`/project/${project.slug ? project.slug : project.id}/settings`">
+									<SettingsIcon />
+								</nuxt-link>
+							</ButtonStyled>
 						</div>
 					</div>
 				</div>
 				<div class="push-right input-group">
-					<Button @click="$refs.modalOpen?.hide()">
-						<XIcon />
-						Cancel
-					</Button>
-					<Button :disabled="!selectedProjects?.length" color="primary" @click="onSubmitHandler()">
-						<TransferIcon />
-						<span>
-							Transfer
+					<ButtonStyled type="outlined">
+						<button @click="$refs.modalOpen?.hide()">
+							<XIcon />
+							Cancel
+						</button>
+					</ButtonStyled>
+					<ButtonStyled color="brand">
+						<button :disabled="!selectedProjects?.length" @click="onSubmitHandler()">
+							<TransferIcon />
 							<span>
-								{{
-									selectedProjects.length === props.projects.length
-										? 'All'
-										: selectedProjects.length
-								}}
+								Transfer
+								<span>
+									{{
+										selectedProjects.length === props.projects.length
+											? 'All'
+											: selectedProjects.length
+									}}
+								</span>
+								<span>
+									{{ ' ' }}
+									{{ selectedProjects.length === 1 ? 'project' : 'projects' }}
+								</span>
 							</span>
-							<span>
-								{{ ' ' }}
-								{{ selectedProjects.length === 1 ? 'project' : 'projects' }}
-							</span>
-						</span>
-					</Button>
+						</button>
+					</ButtonStyled>
 				</div>
 			</div>
 		</Modal>
-		<Button @click="$refs.modalOpen?.show()">
-			<TransferIcon />
-			<span>Transfer projects</span>
-		</Button>
+		<ButtonStyled>
+			<button @click="$refs.modalOpen?.show()">
+				<TransferIcon />
+				<span>Transfer projects</span>
+			</button>
+		</ButtonStyled>
 	</div>
 </template>
 
 <script setup>
 import { BoxIcon, SettingsIcon, TransferIcon, XIcon } from '@modrinth/assets'
-import { Avatar, Button, Checkbox, CopyCode, Modal } from '@modrinth/ui'
+import { Avatar, ButtonStyled, Checkbox, CopyCode, Modal } from '@modrinth/ui'
 import { formatProjectType } from '@modrinth/utils'
 
 const EDIT_DETAILS = 1 << 2
diff --git a/apps/frontend/src/components/ui/banner/SubscriptionPaymentFailedBanner.vue b/apps/frontend/src/components/ui/banner/SubscriptionPaymentFailedBanner.vue
index a1a38c0d2..91f628585 100644
--- a/apps/frontend/src/components/ui/banner/SubscriptionPaymentFailedBanner.vue
+++ b/apps/frontend/src/components/ui/banner/SubscriptionPaymentFailedBanner.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { SettingsIcon } from '@modrinth/assets'
-import { defineMessages, PagewideBanner, useVIntl } from '@modrinth/ui'
+import { ButtonStyled, defineMessages, PagewideBanner, useVIntl } from '@modrinth/ui'
 
 const { formatMessage } = useVIntl()
 
@@ -30,10 +30,12 @@ const messages = defineMessages({
 			<span>{{ formatMessage(messages.description) }}</span>
 		</template>
 		<template #actions>
-			<nuxt-link class="btn" to="/settings/billing">
-				<SettingsIcon aria-hidden="true" />
-				{{ formatMessage(messages.action) }}
-			</nuxt-link>
+			<ButtonStyled>
+				<nuxt-link to="/settings/billing">
+					<SettingsIcon aria-hidden="true" />
+					{{ formatMessage(messages.action) }}
+				</nuxt-link>
+			</ButtonStyled>
 		</template>
 	</PagewideBanner>
 </template>
diff --git a/apps/frontend/src/components/ui/banner/VerifyEmailBanner.vue b/apps/frontend/src/components/ui/banner/VerifyEmailBanner.vue
index a5ee58bc6..c33f2a16b 100644
--- a/apps/frontend/src/components/ui/banner/VerifyEmailBanner.vue
+++ b/apps/frontend/src/components/ui/banner/VerifyEmailBanner.vue
@@ -1,6 +1,12 @@
 <script setup lang="ts">
 import { SettingsIcon } from '@modrinth/assets'
-import { defineMessages, injectNotificationManager, PagewideBanner, useVIntl } from '@modrinth/ui'
+import {
+	ButtonStyled,
+	defineMessages,
+	injectNotificationManager,
+	PagewideBanner,
+	useVIntl,
+} from '@modrinth/ui'
 import { FetchError } from 'ofetch'
 
 const { addNotification } = injectNotificationManager()
@@ -91,13 +97,17 @@ async function handleResendEmailVerification() {
 			</span>
 		</template>
 		<template #actions>
-			<button v-if="hasEmail" class="btn" @click="handleResendEmailVerification">
-				{{ formatMessage(verifyEmailBannerMessages.action) }}
-			</button>
-			<nuxt-link v-else class="btn" to="/settings/account">
-				<SettingsIcon aria-hidden="true" />
-				{{ formatMessage(addEmailBannerMessages.action) }}
-			</nuxt-link>
+			<ButtonStyled v-if="hasEmail">
+				<button @click="handleResendEmailVerification">
+					{{ formatMessage(verifyEmailBannerMessages.action) }}
+				</button>
+			</ButtonStyled>
+			<ButtonStyled v-else>
+				<nuxt-link to="/settings/account">
+					<SettingsIcon aria-hidden="true" />
+					{{ formatMessage(addEmailBannerMessages.action) }}
+				</nuxt-link>
+			</ButtonStyled>
 		</template>
 	</PagewideBanner>
 </template>
diff --git a/apps/frontend/src/components/ui/charts/ChartDisplay.vue b/apps/frontend/src/components/ui/charts/ChartDisplay.vue
index ba1855c96..ea6670f93 100644
--- a/apps/frontend/src/components/ui/charts/ChartDisplay.vue
+++ b/apps/frontend/src/components/ui/charts/ChartDisplay.vue
@@ -81,15 +81,21 @@
 							</span>
 						</h2>
 						<div class="chart-controls__buttons">
-							<Button v-tooltip="'Toggle project colors'" icon-only @click="onToggleColors">
-								<PaletteIcon />
-							</Button>
-							<Button v-tooltip="'Download this data as CSV'" icon-only @click="onDownloadSetAsCSV">
-								<DownloadIcon />
-							</Button>
-							<Button v-tooltip="'Refresh the chart'" icon-only @click="resetCharts">
-								<UpdatedIcon />
-							</Button>
+							<ButtonStyled circular type="outlined">
+								<button v-tooltip="'Toggle project colors'" @click="onToggleColors">
+									<PaletteIcon />
+								</button>
+							</ButtonStyled>
+							<ButtonStyled circular type="outlined">
+								<button v-tooltip="'Download this data as CSV'" @click="onDownloadSetAsCSV">
+									<DownloadIcon />
+								</button>
+							</ButtonStyled>
+							<ButtonStyled circular type="outlined">
+								<button v-tooltip="'Refresh the chart'" @click="resetCharts">
+									<UpdatedIcon />
+								</button>
+							</ButtonStyled>
 							<DropdownSelect
 								v-model="selectedRange"
 								class="range-dropdown"
@@ -156,8 +162,8 @@
 								<template v-for="project in selectedDataSetProjects" :key="project">
 									<button
 										v-tooltip="project.title"
-										:class="`legend__item button-base btn-transparent ${
-											!projectIsOnDisplay(project.id) ? 'btn-dimmed' : ''
+										:class="`legend__item button-base legend__item-transparent ${
+											!projectIsOnDisplay(project.id) ? 'legend__item-dimmed' : ''
 										}`"
 										@click="
 											() =>
@@ -311,7 +317,7 @@
 <script setup lang="ts">
 import { DownloadIcon, PaletteIcon, UpdatedIcon } from '@modrinth/assets'
 import {
-	Button,
+	ButtonStyled,
 	Card,
 	DropdownSelect,
 	useCompactNumber,
@@ -842,7 +848,7 @@ const defaultRanges: RangeObject[] = [
 	}
 }
 
-.btn-transparent {
+.legend__item-transparent {
 	background-color: transparent;
 	border: none;
 	cursor: pointer;
@@ -851,7 +857,7 @@ const defaultRanges: RangeObject[] = [
 	font-weight: var(--font-weight-regular);
 }
 
-.btn-dimmed {
+.legend__item-dimmed {
 	opacity: 0.5;
 }
 
diff --git a/apps/frontend/src/components/ui/create/CollectionCreateModal.vue b/apps/frontend/src/components/ui/create/CollectionCreateModal.vue
index e745f2c18..50c4e96aa 100644
--- a/apps/frontend/src/components/ui/create/CollectionCreateModal.vue
+++ b/apps/frontend/src/components/ui/create/CollectionCreateModal.vue
@@ -38,13 +38,13 @@
 				{{ formatMessage(messages.collectionInfo, { count: projectIds.length }) }}
 			</p>
 			<div class="flex justify-end gap-2">
-				<ButtonStyled class="w-24">
+				<ButtonStyled type="outlined">
 					<button @click="modal.hide()">
 						<XIcon aria-hidden="true" />
 						{{ formatMessage(commonMessages.cancelButton) }}
 					</button>
 				</ButtonStyled>
-				<ButtonStyled color="brand" class="w-36">
+				<ButtonStyled color="brand">
 					<button :disabled="hasHitLimit" @click="create">
 						<PlusIcon aria-hidden="true" />
 						{{ formatMessage(messages.createCollection) }}
diff --git a/apps/frontend/src/components/ui/create/OrganizationCreateModal.vue b/apps/frontend/src/components/ui/create/OrganizationCreateModal.vue
index 8fe041807..2d209bb19 100644
--- a/apps/frontend/src/components/ui/create/OrganizationCreateModal.vue
+++ b/apps/frontend/src/components/ui/create/OrganizationCreateModal.vue
@@ -59,13 +59,13 @@
 				{{ formatMessage(messages.ownershipInfo) }}
 			</p>
 			<div class="flex justify-end gap-2">
-				<ButtonStyled class="w-24">
+				<ButtonStyled type="outlined">
 					<button @click="hide">
 						<XIcon aria-hidden="true" />
 						{{ formatMessage(commonMessages.cancelButton) }}
 					</button>
 				</ButtonStyled>
-				<ButtonStyled color="brand" class="w-40">
+				<ButtonStyled color="brand">
 					<button :disabled="hasHitLimit" @click="createOrganization">
 						<PlusIcon aria-hidden="true" />
 						{{ formatMessage(messages.createOrganization) }}
diff --git a/apps/frontend/src/components/ui/create/ProjectCreateModal.vue b/apps/frontend/src/components/ui/create/ProjectCreateModal.vue
index 77f51ac7b..01ad8a1ba 100644
--- a/apps/frontend/src/components/ui/create/ProjectCreateModal.vue
+++ b/apps/frontend/src/components/ui/create/ProjectCreateModal.vue
@@ -110,13 +110,13 @@
 				<span>{{ formatMessage(messages.summaryDescription) }}</span>
 			</div>
 			<div class="flex justify-end gap-2.5">
-				<ButtonStyled class="w-24">
+				<ButtonStyled type="outlined">
 					<button @click="cancel">
 						<XIcon aria-hidden="true" />
 						{{ formatMessage(commonMessages.cancelButton) }}
 					</button>
 				</ButtonStyled>
-				<ButtonStyled color="brand" class="w-32">
+				<ButtonStyled color="brand">
 					<button v-tooltip="missingFieldsTooltip" :disabled="disableCreate" @click="createProject">
 						<PlusIcon aria-hidden="true" />
 						{{ formatMessage(messages.createProject) }}
diff --git a/apps/frontend/src/components/ui/dashboard/CreatorWithdrawModal.vue b/apps/frontend/src/components/ui/dashboard/CreatorWithdrawModal.vue
index 3ea995009..e30793bcd 100644
--- a/apps/frontend/src/components/ui/dashboard/CreatorWithdrawModal.vue
+++ b/apps/frontend/src/components/ui/dashboard/CreatorWithdrawModal.vue
@@ -58,24 +58,20 @@
 		</div>
 		<template #actions>
 			<div v-if="currentStage === 'completion'" class="mt-4 flex w-full gap-3">
-				<ButtonStyled class="flex-1">
-					<button class="w-full text-contrast" @click="handleClose">
+				<ButtonStyled>
+					<button class="w-full flex-1 text-contrast" @click="handleClose">
 						{{ formatMessage(commonMessages.closeButton) }}
 					</button>
 				</ButtonStyled>
-				<ButtonStyled class="flex-1">
-					<button class="w-full text-contrast" @click="handleViewTransactions">
+				<ButtonStyled>
+					<button class="w-full flex-1 text-contrast" @click="handleViewTransactions">
 						{{ formatMessage(messages.transactionsButton) }}
 					</button>
 				</ButtonStyled>
 			</div>
 			<div v-else class="mt-4 flex flex-col justify-end gap-2 sm:flex-row">
 				<ButtonStyled type="outlined">
-					<button
-						class="!border-surface-5"
-						:disabled="leftButtonConfig.disabled"
-						@click="leftButtonConfig.handler"
-					>
+					<button :disabled="leftButtonConfig.disabled" @click="leftButtonConfig.handler">
 						<component :is="leftButtonConfig.icon" />
 						{{ leftButtonConfig.label }}
 					</button>
diff --git a/apps/frontend/src/components/ui/moderation/ModerationProjectNags.vue b/apps/frontend/src/components/ui/moderation/ModerationProjectNags.vue
index 29626d8b4..5f316b31d 100644
--- a/apps/frontend/src/components/ui/moderation/ModerationProjectNags.vue
+++ b/apps/frontend/src/components/ui/moderation/ModerationProjectNags.vue
@@ -30,9 +30,13 @@
 				</ButtonStyled>
 			</div>
 		</div>
-		<div v-if="!collapsed" class="grid-display width-16 mt-4">
-			<div v-for="nag in visibleNags" :key="nag.id" class="grid-display__item">
-				<span class="flex items-center gap-2 font-semibold">
+		<div v-if="!collapsed" class="mt-4 grid grid-cols-[repeat(auto-fit,minmax(15rem,1fr))] gap-2">
+			<div
+				v-for="nag in visibleNags"
+				:key="nag.id"
+				class="flex flex-col gap-3 rounded-2xl border border-solid border-surface-5 bg-surface-2 p-4"
+			>
+				<span class="flex items-center gap-2 font-medium text-contrast">
 					<component
 						:is="nag.icon || getDefaultIcon(nag.status)"
 						v-tooltip="getStatusTooltip(nag.status)"
@@ -52,7 +56,7 @@
 					:to="`/${project.project_type}/${project.slug ? project.slug : project.id}/${
 						nag.link.path
 					}`"
-					class="goto-link"
+					class="goto-link mt-auto"
 				>
 					{{ getFormattedMessage(nag.link.title) }}
 					<ChevronRightIcon aria-hidden="true" class="featured-header-chevron" />
diff --git a/apps/frontend/src/components/ui/moderation/ModerationReportCard.vue b/apps/frontend/src/components/ui/moderation/ModerationReportCard.vue
index 6b2ab8da6..6d2148206 100644
--- a/apps/frontend/src/components/ui/moderation/ModerationReportCard.vue
+++ b/apps/frontend/src/components/ui/moderation/ModerationReportCard.vue
@@ -154,8 +154,8 @@
 					@update-thread="updateThread"
 				>
 					<template #closedActions>
-						<ButtonStyled v-if="isStaff(auth.user)" color="green" class="mt-2">
-							<button class="w-full gap-2 sm:w-auto" @click="reopenReport()">
+						<ButtonStyled v-if="isStaff(auth.user)" color="green">
+							<button class="mt-2 w-full gap-2 sm:w-auto" @click="reopenReport()">
 								<CheckCircleIcon class="size-4" />
 								Reopen Thread
 							</button>
diff --git a/apps/frontend/src/components/ui/moderation/ModerationTechRevCard.vue b/apps/frontend/src/components/ui/moderation/ModerationTechRevCard.vue
index 3430739bb..a7287bb47 100644
--- a/apps/frontend/src/components/ui/moderation/ModerationTechRevCard.vue
+++ b/apps/frontend/src/components/ui/moderation/ModerationTechRevCard.vue
@@ -1201,7 +1201,6 @@ async function handleSubmitReview(verdict: 'safe' | 'unsafe') {
 								:href="file.download_url"
 								:title="`Download ${file.file_name}`"
 								:download="file.file_name"
-								class="!border-px !border-surface-4"
 								tabindex="0"
 							>
 								<DownloadIcon /> Download
@@ -1362,7 +1361,6 @@ async function handleSubmitReview(verdict: 'safe' | 'unsafe') {
 												"
 											>
 												<button
-													class="!border-[1px]"
 													:disabled="updatingDetails.has(flag.detail.id)"
 													@click="updateDetailStatus(flag.detail.id, 'safe')"
 												>
@@ -1379,7 +1377,6 @@ async function handleSubmitReview(verdict: 'safe' | 'unsafe') {
 												"
 											>
 												<button
-													class="!border-[1px]"
 													:disabled="updatingDetails.has(flag.detail.id)"
 													@click="updateDetailStatus(flag.detail.id, 'unsafe')"
 												>
diff --git a/apps/frontend/src/components/ui/project-settings/CompatibilityCard.vue b/apps/frontend/src/components/ui/project-settings/CompatibilityCard.vue
index bfa435514..54be708d2 100644
--- a/apps/frontend/src/components/ui/project-settings/CompatibilityCard.vue
+++ b/apps/frontend/src/components/ui/project-settings/CompatibilityCard.vue
@@ -40,11 +40,7 @@
 					</div>
 				</div>
 				<ButtonStyled v-if="content" type="outlined">
-					<button
-						class="!border-[1px]"
-						:disabled="!hasPermission"
-						@click="handleSwitchCompatibility"
-					>
+					<button :disabled="!hasPermission" @click="handleSwitchCompatibility">
 						<ArrowLeftRightIcon />
 						Switch type
 					</button>
diff --git a/apps/frontend/src/components/ui/servers/marketing/MedalPlanPromotion.vue b/apps/frontend/src/components/ui/servers/marketing/MedalPlanPromotion.vue
index 1c233781d..7e2fe3d6d 100644
--- a/apps/frontend/src/components/ui/servers/marketing/MedalPlanPromotion.vue
+++ b/apps/frontend/src/components/ui/servers/marketing/MedalPlanPromotion.vue
@@ -21,10 +21,10 @@
 				</span>
 			</div>
 		</div>
-		<ButtonStyled color="medal-promo" type="outlined" size="large" class="z-10 my-auto mt-2">
+		<ButtonStyled color="medal-promo" type="outlined" size="large">
 			<nuxt-link
 				to="https://medal.tv/modrinth"
-				class="z-10 flex w-full items-center justify-center gap-1 md:mt-0 md:w-auto"
+				class="z-10 my-auto mt-2 flex w-full items-center justify-center gap-1 md:mt-0 md:w-auto"
 				>{{ formatMessage(messages.learnMoreButton) }} <ExternalIcon
 			/></nuxt-link>
 		</ButtonStyled>
diff --git a/apps/frontend/src/components/ui/thread/ConversationThread.vue b/apps/frontend/src/components/ui/thread/ConversationThread.vue
index dff63b26e..d6fb4db00 100644
--- a/apps/frontend/src/components/ui/thread/ConversationThread.vue
+++ b/apps/frontend/src/components/ui/thread/ConversationThread.vue
@@ -23,14 +23,12 @@
 					I confirm that I have properly addressed the moderators' comments.
 				</Checkbox>
 				<div class="input-group push-right">
-					<button
-						class="iconified-button moderation-button"
-						:disabled="!submissionConfirmation"
-						@click="resubmit()"
-					>
-						<ScaleIcon aria-hidden="true" />
-						Resubmit for review
-					</button>
+					<ButtonStyled color="orange">
+						<button :disabled="!submissionConfirmation" @click="resubmit()">
+							<ScaleIcon aria-hidden="true" />
+							Resubmit for review
+						</button>
+					</ButtonStyled>
 				</div>
 			</div>
 		</Modal>
@@ -55,14 +53,12 @@
 					I acknowledge that the moderators do not actively monitor the thread.
 				</Checkbox>
 				<div class="input-group push-right">
-					<button
-						class="btn btn-primary"
-						:disabled="!replyConfirmation"
-						@click="sendReplyFromModal()"
-					>
-						<ReplyIcon aria-hidden="true" />
-						Reply to thread
-					</button>
+					<ButtonStyled color="brand">
+						<button :disabled="!replyConfirmation" @click="sendReplyFromModal()">
+							<ReplyIcon aria-hidden="true" />
+							Reply to thread
+						</button>
+					</ButtonStyled>
 				</div>
 			</div>
 		</Modal>
@@ -85,10 +81,12 @@
 		</div>
 		<template v-if="report && report.closed">
 			<p>This thread is closed and new messages cannot be sent to it.</p>
-			<button v-if="isStaff(auth.user)" class="iconified-button" @click="reopenReport()">
-				<CheckCircleIcon aria-hidden="true" />
-				Reopen thread
-			</button>
+			<ButtonStyled v-if="isStaff(auth.user)">
+				<button @click="reopenReport()">
+					<CheckCircleIcon aria-hidden="true" />
+					Reopen thread
+				</button>
+			</ButtonStyled>
 		</template>
 		<template v-else-if="!report || !report.closed">
 			<div class="markdown-editor-spacing">
@@ -99,196 +97,175 @@
 				/>
 			</div>
 			<div class="input-group">
-				<button
-					v-if="sortedMessages.length > 0"
-					class="btn btn-primary"
-					:disabled="!replyBody"
-					@click="isApproved(project) && !isStaff(auth.user) ? openReplyModal() : sendReply()"
-				>
-					<ReplyIcon aria-hidden="true" />
-					Reply
-				</button>
-				<button
-					v-else
-					class="btn btn-primary"
-					:disabled="!replyBody"
-					@click="isApproved(project) && !isStaff(auth.user) ? openReplyModal() : sendReply()"
-				>
-					<SendIcon aria-hidden="true" />
-					Send
-				</button>
-				<button
-					v-if="isStaff(auth.user)"
-					class="btn"
-					:disabled="!replyBody"
-					@click="sendReply(null, true)"
-				>
-					<ScaleIcon aria-hidden="true" />
-					Add private note
-				</button>
+				<ButtonStyled color="brand">
+					<button
+						v-if="sortedMessages.length > 0"
+						:disabled="!replyBody"
+						@click="isApproved(project) && !isStaff(auth.user) ? openReplyModal() : sendReply()"
+					>
+						<ReplyIcon aria-hidden="true" />
+						Reply
+					</button>
+					<button
+						v-else
+						:disabled="!replyBody"
+						@click="isApproved(project) && !isStaff(auth.user) ? openReplyModal() : sendReply()"
+					>
+						<SendIcon aria-hidden="true" />
+						Send
+					</button>
+				</ButtonStyled>
+				<ButtonStyled v-if="isStaff(auth.user)">
+					<button :disabled="!replyBody" @click="sendReply(null, true)">
+						<ScaleIcon aria-hidden="true" />
+						Add private note
+					</button>
+				</ButtonStyled>
 				<template v-if="currentMember && !isStaff(auth.user)">
 					<template v-if="isRejected(project)">
-						<button
-							v-if="replyBody"
-							class="iconified-button moderation-button"
-							@click="openResubmitModal(true)"
-						>
-							<ScaleIcon aria-hidden="true" />
-							Resubmit for review with reply
-						</button>
-						<button
-							v-else
-							class="iconified-button moderation-button"
-							@click="openResubmitModal(false)"
-						>
-							<ScaleIcon aria-hidden="true" />
-							Resubmit for review
-						</button>
+						<ButtonStyled color="orange">
+							<button v-if="replyBody" @click="openResubmitModal(true)">
+								<ScaleIcon aria-hidden="true" />
+								Resubmit for review with reply
+							</button>
+							<button v-else @click="openResubmitModal(false)">
+								<ScaleIcon aria-hidden="true" />
+								Resubmit for review
+							</button>
+						</ButtonStyled>
 					</template>
 				</template>
 				<div class="spacer"></div>
 				<div class="input-group extra-options">
 					<template v-if="report">
 						<template v-if="isStaff(auth.user)">
-							<button
-								v-if="replyBody"
-								class="iconified-button danger-button"
-								@click="closeReport(true)"
-							>
-								<CheckCircleIcon aria-hidden="true" />
-								Close with reply
-							</button>
-							<button v-else class="iconified-button danger-button" @click="closeReport()">
-								<CheckCircleIcon aria-hidden="true" />
-								Close thread
-							</button>
+							<ButtonStyled color="red">
+								<button v-if="replyBody" @click="closeReport(true)">
+									<CheckCircleIcon aria-hidden="true" />
+									Close with reply
+								</button>
+								<button v-else @click="closeReport()">
+									<CheckCircleIcon aria-hidden="true" />
+									Close thread
+								</button>
+							</ButtonStyled>
 						</template>
 					</template>
 					<template v-if="project">
 						<template v-if="isStaff(auth.user)">
-							<button
-								v-if="replyBody"
-								class="btn btn-green"
-								:disabled="isApproved(project)"
-								@click="sendReply(requestedStatus)"
-							>
-								<CheckIcon aria-hidden="true" />
-								Approve with reply
-							</button>
-							<button
-								v-else
-								class="btn btn-green"
-								:disabled="isApproved(project)"
-								@click="setStatus(requestedStatus)"
-							>
-								<CheckIcon aria-hidden="true" />
-								Approve
-							</button>
+							<ButtonStyled v-if="replyBody" color="green">
+								<button :disabled="isApproved(project)" @click="sendReply(requestedStatus)">
+									<CheckIcon aria-hidden="true" />
+									Approve with reply
+								</button>
+							</ButtonStyled>
+							<ButtonStyled v-else color="green">
+								<button :disabled="isApproved(project)" @click="setStatus(requestedStatus)">
+									<CheckIcon aria-hidden="true" />
+									Approve
+								</button>
+							</ButtonStyled>
 							<div class="joined-buttons">
-								<button
-									v-if="replyBody"
-									class="btn btn-danger"
-									:disabled="project.status === 'rejected'"
-									@click="sendReply('rejected')"
-								>
-									<XIcon aria-hidden="true" />
-									Reject with reply
-								</button>
-								<button
-									v-else
-									class="btn btn-danger"
-									:disabled="project.status === 'rejected'"
-									@click="setStatus('rejected')"
-								>
-									<XIcon aria-hidden="true" />
-									Reject
-								</button>
-								<OverflowMenu
-									class="btn btn-danger btn-dropdown-animation icon-only"
-									:options="
-										replyBody
-											? [
-													{
-														id: 'withhold-reply',
-														color: 'danger',
-														action: () => {
-															sendReply('withheld')
+								<ButtonStyled v-if="replyBody" color="red">
+									<button :disabled="project.status === 'rejected'" @click="sendReply('rejected')">
+										<XIcon aria-hidden="true" />
+										Reject with reply
+									</button>
+								</ButtonStyled>
+								<ButtonStyled v-else color="red">
+									<button :disabled="project.status === 'rejected'" @click="setStatus('rejected')">
+										<XIcon aria-hidden="true" />
+										Reject
+									</button>
+								</ButtonStyled>
+								<ButtonStyled color="red">
+									<OverflowMenu
+										class="btn-dropdown-animation"
+										:options="
+											replyBody
+												? [
+														{
+															id: 'withhold-reply',
+															color: 'danger',
+															action: () => {
+																sendReply('withheld')
+															},
+															hoverFilled: true,
+															disabled: project.status === 'withheld',
 														},
-														hoverFilled: true,
-														disabled: project.status === 'withheld',
-													},
-													{
-														id: 'set-to-draft-reply',
-														action: () => {
-															sendReply('draft')
+														{
+															id: 'set-to-draft-reply',
+															action: () => {
+																sendReply('draft')
+															},
+															hoverFilled: true,
+															disabled: project.status === 'draft',
 														},
-														hoverFilled: true,
-														disabled: project.status === 'draft',
-													},
-													{
-														id: 'send-to-review-reply',
-														action: () => {
-															sendReply('processing', true)
+														{
+															id: 'send-to-review-reply',
+															action: () => {
+																sendReply('processing', true)
+															},
+															hoverFilled: true,
+															disabled: project.status === 'processing',
 														},
-														hoverFilled: true,
-														disabled: project.status === 'processing',
-													},
-												]
-											: [
-													{
-														id: 'withhold',
-														color: 'danger',
-														action: () => {
-															setStatus('withheld')
+													]
+												: [
+														{
+															id: 'withhold',
+															color: 'danger',
+															action: () => {
+																setStatus('withheld')
+															},
+															hoverFilled: true,
+															disabled: project.status === 'withheld',
 														},
-														hoverFilled: true,
-														disabled: project.status === 'withheld',
-													},
-													{
-														id: 'set-to-draft',
-														action: () => {
-															setStatus('draft')
+														{
+															id: 'set-to-draft',
+															action: () => {
+																setStatus('draft')
+															},
+															hoverFilled: true,
+															disabled: project.status === 'draft',
 														},
-														hoverFilled: true,
-														disabled: project.status === 'draft',
-													},
-													{
-														id: 'send-to-review',
-														action: () => {
-															setStatus('processing')
+														{
+															id: 'send-to-review',
+															action: () => {
+																setStatus('processing')
+															},
+															hoverFilled: true,
+															disabled: project.status === 'processing',
 														},
-														hoverFilled: true,
-														disabled: project.status === 'processing',
-													},
-												]
-									"
-								>
-									<DropdownIcon style="rotate: 180deg" aria-hidden="true" />
-									<template #withhold-reply>
-										<EyeOffIcon aria-hidden="true" />
-										Withhold with reply
-									</template>
-									<template #withhold>
-										<EyeOffIcon aria-hidden="true" />
-										Withhold
-									</template>
-									<template #set-to-draft-reply>
-										<FileTextIcon aria-hidden="true" />
-										Set to draft with reply
-									</template>
-									<template #set-to-draft>
-										<FileTextIcon aria-hidden="true" />
-										Set to draft
-									</template>
-									<template #send-to-review-reply>
-										<ScaleIcon aria-hidden="true" />
-										Send to review with reply
-									</template>
-									<template #send-to-review>
-										<ScaleIcon aria-hidden="true" />
-										Send to review
-									</template>
-								</OverflowMenu>
+													]
+										"
+									>
+										<DropdownIcon aria-hidden="true" />
+										<template #withhold-reply>
+											<EyeOffIcon aria-hidden="true" />
+											Withhold with reply
+										</template>
+										<template #withhold>
+											<EyeOffIcon aria-hidden="true" />
+											Withhold
+										</template>
+										<template #set-to-draft-reply>
+											<FileTextIcon aria-hidden="true" />
+											Set to draft with reply
+										</template>
+										<template #set-to-draft>
+											<FileTextIcon aria-hidden="true" />
+											Set to draft
+										</template>
+										<template #send-to-review-reply>
+											<ScaleIcon aria-hidden="true" />
+											Send to review with reply
+										</template>
+										<template #send-to-review>
+											<ScaleIcon aria-hidden="true" />
+											Send to review
+										</template>
+									</OverflowMenu>
+								</ButtonStyled>
 							</div>
 						</template>
 					</template>
@@ -311,6 +288,7 @@ import {
 	XIcon,
 } from '@modrinth/assets'
 import {
+	ButtonStyled,
 	Checkbox,
 	CopyCode,
 	injectNotificationManager,
diff --git a/apps/frontend/src/components/ui/thread/ThreadMessage.vue b/apps/frontend/src/components/ui/thread/ThreadMessage.vue
index 527ec594d..750187244 100644
--- a/apps/frontend/src/components/ui/thread/ThreadMessage.vue
+++ b/apps/frontend/src/components/ui/thread/ThreadMessage.vue
@@ -104,20 +104,22 @@
 			</span>
 		</span>
 		<div v-if="isStaff(auth.user) && message.author_id === auth.user.id" class="message__actions">
-			<OverflowMenu
-				class="btn btn-transparent icon-only"
-				:options="[
-					{
-						id: 'delete',
-						action: () => deleteMessage(),
-						color: 'red',
-						hoverFilled: true,
-					},
-				]"
-			>
-				<MoreHorizontalIcon />
-				<template #delete> <TrashIcon /> Delete </template>
-			</OverflowMenu>
+			<ButtonStyled circular type="transparent">
+				<OverflowMenu
+					class="btn-dropdown-animation"
+					:options="[
+						{
+							id: 'delete',
+							action: () => deleteMessage(),
+							color: 'red',
+							hoverFilled: true,
+						},
+					]"
+				>
+					<MoreHorizontalIcon />
+					<template #delete> <TrashIcon /> Delete </template>
+				</OverflowMenu>
+			</ButtonStyled>
 		</div>
 	</div>
 </template>
@@ -135,6 +137,7 @@ import {
 	AutoLink,
 	Avatar,
 	Badge,
+	ButtonStyled,
 	OverflowMenu,
 	useFormatDateTime,
 	useRelativeTime,
diff --git a/apps/frontend/src/error.vue b/apps/frontend/src/error.vue
index 4e5d50474..653e623c4 100644
--- a/apps/frontend/src/error.vue
+++ b/apps/frontend/src/error.vue
@@ -2,7 +2,7 @@
 	<NuxtLayout>
 		<LoadingBar />
 		<NotificationPanel />
-		<div class="main experimental-styles-within">
+		<div class="main">
 			<div v-if="is404" class="error-graphic">
 				<Logo404 />
 			</div>
diff --git a/apps/frontend/src/layouts/default.vue b/apps/frontend/src/layouts/default.vue
index f0bf30299..97c220481 100644
--- a/apps/frontend/src/layouts/default.vue
+++ b/apps/frontend/src/layouts/default.vue
@@ -54,7 +54,7 @@
 			:api-url="config.public.apiBaseUrl"
 		/>
 		<header
-			class="experimental-styles-within desktop-only relative z-[5] mx-auto grid max-w-[1280px] grid-cols-[1fr_auto] items-center gap-2 px-6 py-4 lg:grid-cols-[auto_1fr_auto]"
+			class="desktop-only relative z-[5] mx-auto grid max-w-[1280px] grid-cols-[1fr_auto] items-center gap-2 px-6 py-4 lg:grid-cols-[auto_1fr_auto]"
 		>
 			<div>
 				<NuxtLink
@@ -1298,7 +1298,8 @@ const { cycle: changeTheme } = useTheme()
 			justify-content: center;
 			padding: 1rem;
 
-			.iconified-button {
+			> button,
+			> a {
 				width: 100%;
 				max-width: 500px;
 				padding: 0.75rem;
diff --git a/apps/frontend/src/pages/[type]/[id].vue b/apps/frontend/src/pages/[type]/[id].vue
index 7e6644f12..6d9006284 100644
--- a/apps/frontend/src/pages/[type]/[id].vue
+++ b/apps/frontend/src/pages/[type]/[id].vue
@@ -45,15 +45,7 @@
 			</div>
 		</div>
 
-		<div v-else class="experimental-styles-within">
-			<NewModal ref="settingsModal">
-				<template #title>
-					<Avatar :src="project.icon_url" :alt="project.title" class="icon" size="32px" />
-					<span class="text-lg font-extrabold text-contrast">
-						{{ formatMessage(messages.settingsTitle) }}
-					</span>
-				</template>
-			</NewModal>
+		<div v-else>
 			<NewModal
 				ref="modalLicense"
 				:header="project.license.name ? project.license.name : formatMessage(messages.licenseTitle)"
@@ -464,30 +456,19 @@
 						:member="!!currentMember"
 					>
 						<template #actions>
-							<ButtonStyled
-								v-if="auth.user && currentMember"
-								size="large"
-								color="brand"
-								class="lg:!hidden"
-								circular
-							>
+							<ButtonStyled v-if="auth.user && currentMember" size="large" color="brand" circular>
 								<nuxt-link
 									v-tooltip="'Edit project'"
 									:to="`/${project.project_type}/${project.slug ? project.slug : project.id}/settings`"
-									class="!font-bold"
+									class="!font-bold lg:!hidden"
 								>
 									<SettingsIcon aria-hidden="true" />
 								</nuxt-link>
 							</ButtonStyled>
-							<ButtonStyled
-								v-if="auth.user && currentMember"
-								size="large"
-								color="brand"
-								class="max-lg:!hidden"
-							>
+							<ButtonStyled v-if="auth.user && currentMember" size="large" color="brand">
 								<nuxt-link
 									:to="`/${project.project_type}/${project.slug ? project.slug : project.id}/settings`"
-									class="!font-bold"
+									class="!font-bold max-lg:!hidden"
 								>
 									<SettingsIcon aria-hidden="true" />
 									Edit project
@@ -594,7 +575,7 @@
 									</nuxt-link>
 								</ButtonStyled>
 								<template #popper>
-									<div class="experimental-styles-within grid grid-cols-[min-content] gap-1">
+									<div class="grid grid-cols-[min-content] gap-1">
 										<div class="flex min-w-60 items-center justify-between gap-4">
 											<h3
 												class="m-0 flex items-center gap-2 whitespace-nowrap text-base font-bold text-contrast"
@@ -724,13 +705,15 @@
 										<div v-else class="menu-text">
 											<p class="popout-text">{{ formatMessage(messages.noCollectionsFound) }}</p>
 										</div>
-										<button
-											class="btn collection-button"
-											@click="(event) => $refs.modal_collection.show(event)"
-										>
-											<PlusIcon aria-hidden="true" />
-											{{ formatMessage(messages.createNewCollection) }}
-										</button>
+										<ButtonStyled>
+											<button
+												class="mx-3 mb-3"
+												@click="(event) => $refs.modal_collection.show(event)"
+											>
+												<PlusIcon aria-hidden="true" />
+												{{ formatMessage(messages.createNewCollection) }}
+											</button>
+										</ButtonStyled>
 									</template>
 								</PopoutMenu>
 								<nuxt-link v-else v-tooltip="'Save'" :to="signInRouteObj" aria-label="Save">
@@ -890,32 +873,29 @@
 						:supported-versions="serverSupportedVersions"
 						:loaders="serverModpackLoaders"
 						:status-online="projectV3?.minecraft_java_server?.ping?.data != null"
-						class="card flex-card experimental-styles-within"
+						class="card flex-card"
 					/>
 					<ProjectSidebarCompatibility
 						v-if="projectV3Loaded && !isServerProject"
 						:project="project"
 						:tags="tags"
 						:project-v3="projectV3"
-						class="card flex-card experimental-styles-within"
+						class="card flex-card"
 					/>
 					<AdPlaceholder v-if="!auth.user && tags.approvedStatuses.includes(project.status)" />
 					<ProjectSidebarLinks
 						:project="project"
 						:project-v3="projectV3"
 						:link-target="$external()"
-						class="card flex-card experimental-styles-within"
-					/>
-					<ProjectSidebarTags
-						:project="project"
-						class="card flex-card experimental-styles-within"
+						class="card flex-card"
 					/>
+					<ProjectSidebarTags :project="project" class="card flex-card" />
 					<ProjectSidebarCreators
 						:organization="organization"
 						:members="members"
 						:org-link="(slug) => `/organization/${slug}`"
 						:user-link="(username) => `/user/${username}`"
-						class="card flex-card experimental-styles-within"
+						class="card flex-card"
 					/>
 					<!-- TODO: Finish license modal and enable -->
 					<ProjectSidebarDetails
@@ -924,9 +904,9 @@
 						:has-versions="versions.length > 0"
 						:link-target="$external()"
 						:show-followers="isServerProject"
-						class="card flex-card experimental-styles-within"
+						class="card flex-card"
 					/>
-					<div class="card flex-card experimental-styles-within">
+					<div class="card flex-card">
 						<h2>{{ formatMessage(detailsMessages.title) }}</h2>
 
 						<div class="details-list">
@@ -1177,7 +1157,6 @@ const formatDateTime = useFormatDateTime({
 
 const debug = useDebugLogger('DownloadModal')
 
-const settingsModal = ref()
 const downloadModal = ref()
 const openInAppModal = ref()
 const overTheTopDownloadAnimation = ref()
@@ -2748,11 +2727,6 @@ provideProjectPageContext({
 	color: var(--color-secondary);
 }
 
-.collection-button {
-	margin: var(--gap-sm) var(--gap-md);
-	white-space: nowrap;
-}
-
 .menu-text {
 	padding: 0 var(--gap-md);
 	font-size: var(--font-size-nm);
diff --git a/apps/frontend/src/pages/[type]/[id]/changelog.vue b/apps/frontend/src/pages/[type]/[id]/changelog.vue
index e2f366b8e..37dfa4aae 100644
--- a/apps/frontend/src/pages/[type]/[id]/changelog.vue
+++ b/apps/frontend/src/pages/[type]/[id]/changelog.vue
@@ -53,14 +53,16 @@
 										{{ formatDate(version.date_published) }}</span
 									>
 								</div>
-								<a
-									:href="version.primaryFile?.url"
-									class="iconified-button download"
-									:title="`Download ${version.name}`"
-								>
-									<DownloadIcon aria-hidden="true" />
-									Download
-								</a>
+								<ButtonStyled color="brand" type="transparent">
+									<a
+										class="ml-auto"
+										:href="version.primaryFile?.url"
+										:title="`Download ${version.name}`"
+									>
+										<DownloadIcon aria-hidden="true" />
+										Download
+									</a>
+								</ButtonStyled>
 							</div>
 							<div
 								v-if="version.changelog && !version.duplicate"
@@ -87,6 +89,7 @@
 <script setup>
 import { DownloadIcon, SpinnerIcon } from '@modrinth/assets'
 import {
+	ButtonStyled,
 	injectModrinthClient,
 	injectProjectPageContext,
 	Pagination,
diff --git a/apps/frontend/src/pages/[type]/[id]/gallery.vue b/apps/frontend/src/pages/[type]/[id]/gallery.vue
index 591843ade..801a86017 100644
--- a/apps/frontend/src/pages/[type]/[id]/gallery.vue
+++ b/apps/frontend/src/pages/[type]/[id]/gallery.vue
@@ -10,23 +10,24 @@
 					<div class="file-header">
 						<ImageIcon aria-hidden="true" />
 						<strong>{{ editFile ? editFile.name : 'Current image' }}</strong>
-						<FileInput
-							v-if="editIndex === -1"
-							class="iconified-button raised-button"
-							prompt="Replace"
-							:accept="acceptFileTypes"
-							:max-size="5242880"
-							should-always-reset
-							aria-label="Replace image"
-							@change="
-								(x) => {
-									editFile = x[0]
-									showPreviewImage()
-								}
-							"
-						>
-							<TransferIcon aria-hidden="true" />
-						</FileInput>
+						<ButtonStyled v-if="editIndex === -1" type="outlined">
+							<FileInput
+								class="button-like"
+								prompt="Replace"
+								:accept="acceptFileTypes"
+								:max-size="5242880"
+								should-always-reset
+								aria-label="Replace image"
+								@change="
+									(x) => {
+										editFile = x[0]
+										showPreviewImage()
+									}
+								"
+							>
+								<TransferIcon aria-hidden="true" />
+							</FileInput>
+						</ButtonStyled>
 					</div>
 					<img
 						:src="
@@ -68,53 +69,42 @@
 					placeholder="Enter order index..."
 				/>
 				<label for="gallery-image-featured">
-					<span class="label__title">Featured</span>
+					<span class="label__title">Banner image</span>
 					<span class="label__description">
-						A featured gallery image shows up in search and your project card. Only one gallery
-						image can be featured.
+						You can feature one image on your project to be used as a banner image.
 					</span>
 				</label>
-				<button
-					v-if="!editFeatured"
-					id="gallery-image-featured"
-					class="iconified-button"
-					@click="editFeatured = true"
-				>
-					<StarIcon aria-hidden="true" />
-					Feature image
-				</button>
-				<button
-					v-else
-					id="gallery-image-featured"
-					class="iconified-button"
-					@click="editFeatured = false"
-				>
-					<StarIcon fill="currentColor" aria-hidden="true" />
-					Unfeature image
-				</button>
+				<ButtonStyled v-if="!editFeatured">
+					<button id="gallery-image-featured" class="w-fit" @click="editFeatured = true">
+						<StarIcon aria-hidden="true" />
+						Set as banner
+					</button>
+				</ButtonStyled>
+				<ButtonStyled v-else>
+					<button id="gallery-image-featured" class="w-fit" @click="editFeatured = false">
+						<StarIcon fill="currentColor" aria-hidden="true" />
+						Unset as banner
+					</button>
+				</ButtonStyled>
 				<div class="button-group">
-					<button class="iconified-button" @click="modalEditItem?.hide()">
-						<XIcon aria-hidden="true" />
-						Cancel
-					</button>
-					<button
-						v-if="editIndex === -1"
-						class="iconified-button brand-button"
-						:disabled="shouldPreventActions"
-						@click="createGalleryItem"
-					>
-						<PlusIcon aria-hidden="true" />
-						Add gallery image
-					</button>
-					<button
-						v-else
-						class="iconified-button brand-button"
-						:disabled="shouldPreventActions"
-						@click="editGalleryItem"
-					>
-						<SaveIcon aria-hidden="true" />
-						Save changes
-					</button>
+					<ButtonStyled type="outlined">
+						<button @click="modalEditItem?.hide()">
+							<XIcon aria-hidden="true" />
+							Cancel
+						</button>
+					</ButtonStyled>
+					<ButtonStyled v-if="editIndex === -1" color="brand">
+						<button :disabled="shouldPreventActions" @click="createGalleryItem">
+							<PlusIcon aria-hidden="true" />
+							Add gallery image
+						</button>
+					</ButtonStyled>
+					<ButtonStyled v-else color="brand">
+						<button :disabled="shouldPreventActions" @click="editGalleryItem">
+							<SaveIcon aria-hidden="true" />
+							Save changes
+						</button>
+					</ButtonStyled>
 				</div>
 			</div>
 		</Modal>
@@ -155,39 +145,41 @@
 						</p>
 					</div>
 					<div class="controls">
-						<div class="buttons">
-							<button class="close circle-button" @click="expandedGalleryItem = null">
-								<XIcon aria-hidden="true" />
-							</button>
-							<a
-								class="open circle-button"
-								target="_blank"
-								:href="
-									expandedGalleryItem?.raw_url
-										? expandedGalleryItem?.raw_url
-										: 'https://cdn.modrinth.com/placeholder-banner.svg'
-								"
-							>
-								<ExternalIcon aria-hidden="true" />
-							</a>
-							<button class="circle-button" @click="zoomedIn = !zoomedIn">
-								<ExpandIcon v-if="!zoomedIn" aria-hidden="true" />
-								<ContractIcon v-else aria-hidden="true" />
-							</button>
-							<button
-								v-if="filteredGallery.length > 1"
-								class="previous circle-button"
-								@click="previousImage()"
-							>
-								<LeftArrowIcon aria-hidden="true" />
-							</button>
-							<button
-								v-if="filteredGallery.length > 1"
-								class="next circle-button"
-								@click="nextImage()"
-							>
-								<RightArrowIcon aria-hidden="true" />
-							</button>
+						<div class="flex gap-2">
+							<ButtonStyled circular>
+								<button class="close" @click="expandedGalleryItem = null">
+									<XIcon aria-hidden="true" />
+								</button>
+							</ButtonStyled>
+							<ButtonStyled circular>
+								<a
+									class="open"
+									target="_blank"
+									:href="
+										expandedGalleryItem?.raw_url
+											? expandedGalleryItem?.raw_url
+											: 'https://cdn.modrinth.com/placeholder-banner.svg'
+									"
+								>
+									<ExternalIcon aria-hidden="true" />
+								</a>
+							</ButtonStyled>
+							<ButtonStyled circular>
+								<button @click="zoomedIn = !zoomedIn">
+									<ExpandIcon v-if="!zoomedIn" aria-hidden="true" />
+									<ContractIcon v-else aria-hidden="true" />
+								</button>
+							</ButtonStyled>
+							<ButtonStyled v-if="filteredGallery.length > 1" circular>
+								<button class="previous" @click="previousImage()">
+									<LeftArrowIcon aria-hidden="true" />
+								</button>
+							</ButtonStyled>
+							<ButtonStyled v-if="filteredGallery.length > 1" circular>
+								<button class="next" @click="nextImage()">
+									<RightArrowIcon aria-hidden="true" />
+								</button>
+							</ButtonStyled>
 						</div>
 					</div>
 				</div>
@@ -195,17 +187,19 @@
 		</div>
 
 		<div v-if="currentMember && filteredGallery.length" class="card header-buttons">
-			<FileInput
-				:max-size="5242880"
-				:accept="acceptFileTypes"
-				prompt="Upload an image"
-				aria-label="Upload an image"
-				class="iconified-button brand-button"
-				:disabled="!isPermission(currentMember?.permissions, 1 << 2)"
-				@change="handleFiles"
-			>
-				<UploadIcon aria-hidden="true" />
-			</FileInput>
+			<ButtonStyled color="brand">
+				<FileInput
+					:max-size="5242880"
+					:accept="acceptFileTypes"
+					prompt="Upload an image"
+					aria-label="Upload an image"
+					class="button-like"
+					:disabled="!isPermission(currentMember?.permissions, 1 << 2)"
+					@change="handleFiles"
+				>
+					<UploadIcon aria-hidden="true" />
+				</FileInput>
+			</ButtonStyled>
 			<span class="indicator">
 				<InfoIcon aria-hidden="true" /> Click to choose an image or drag one onto this page
 			</span>
@@ -239,35 +233,37 @@
 						{{ formatDate(item.created) }}
 					</div>
 					<div v-if="currentMember" class="gallery-buttons input-group">
-						<button
-							class="iconified-button"
-							@click="
-								() => {
-									resetEdit()
-									editIndex = index
-									editTitle = item.title ?? ''
-									editDescription = item.description ?? ''
-									editFeatured = item.featured
-									editOrder = item.ordering
-									modalEditItem?.show()
-								}
-							"
-						>
-							<EditIcon aria-hidden="true" />
-							Edit
-						</button>
-						<button
-							class="iconified-button"
-							@click="
-								() => {
-									deleteIndex = index
-									modalConfirm?.show()
-								}
-							"
-						>
-							<TrashIcon aria-hidden="true" />
-							Remove
-						</button>
+						<ButtonStyled>
+							<button
+								@click="
+									() => {
+										resetEdit()
+										editIndex = index
+										editTitle = item.title ?? ''
+										editDescription = item.description ?? ''
+										editFeatured = item.featured
+										editOrder = item.ordering
+										modalEditItem?.show()
+									}
+								"
+							>
+								<EditIcon aria-hidden="true" />
+								Edit
+							</button>
+						</ButtonStyled>
+						<ButtonStyled>
+							<button
+								@click="
+									() => {
+										deleteIndex = index
+										modalConfirm?.show()
+									}
+								"
+							>
+								<TrashIcon aria-hidden="true" />
+								Remove
+							</button>
+						</ButtonStyled>
 					</div>
 				</div>
 			</div>
@@ -304,6 +300,7 @@ import {
 	XIcon,
 } from '@modrinth/assets'
 import {
+	ButtonStyled,
 	ConfirmModal,
 	DropArea,
 	FileInput,
@@ -541,43 +538,6 @@ async function deleteGalleryImage() {
 		width: calc(100vw - 2 * var(--spacing-card-lg));
 		height: calc(100vh - 2 * var(--spacing-card-lg));
 
-		.circle-button {
-			padding: 0.5rem;
-			line-height: 1;
-			display: flex;
-			max-width: 2rem;
-			color: var(--color-button-text);
-			background-color: var(--color-button-bg);
-			border-radius: var(--size-rounded-max);
-			margin: 0;
-			box-shadow: inset 0px -1px 1px rgb(17 24 39 / 10%);
-
-			&:not(:last-child) {
-				margin-right: 0.5rem;
-			}
-
-			&:hover {
-				background-color: var(--color-button-bg-hover) !important;
-
-				svg {
-					color: var(--color-button-text-hover) !important;
-				}
-			}
-
-			&:active {
-				background-color: var(--color-button-bg-active) !important;
-
-				svg {
-					color: var(--color-button-text-active) !important;
-				}
-			}
-
-			svg {
-				height: 1rem;
-				width: 1rem;
-			}
-		}
-
 		.image {
 			position: absolute;
 			left: 50%;
@@ -653,14 +613,6 @@ async function deleteGalleryImage() {
 	}
 }
 
-.buttons {
-	display: flex;
-
-	button {
-		margin-right: 0.5rem;
-	}
-}
-
 .items {
 	display: grid;
 	grid-template-rows: 1fr;
@@ -762,10 +714,6 @@ async function deleteGalleryImage() {
 			strong {
 				word-wrap: anywhere;
 			}
-
-			.iconified-button {
-				margin-left: auto;
-			}
 		}
 
 		img {
@@ -778,8 +726,4 @@ async function deleteGalleryImage() {
 		}
 	}
 }
-
-.brand-button {
-	color: var(--color-accent-contrast);
-}
 </style>
diff --git a/apps/frontend/src/pages/[type]/[id]/settings.vue b/apps/frontend/src/pages/[type]/[id]/settings.vue
index 9b51e4bb8..ebf5745c9 100644
--- a/apps/frontend/src/pages/[type]/[id]/settings.vue
+++ b/apps/frontend/src/pages/[type]/[id]/settings.vue
@@ -152,7 +152,7 @@ watch(route, () => {
 			@toggle-collapsed="() => (collapsedChecklist = !collapsedChecklist)"
 			@set-processing="setProcessing"
 		/>
-		<div class="experimental-styles-within grid gap-4 lg:grid-cols-[1fr_3fr]">
+		<div class="grid gap-4 lg:grid-cols-[1fr_3fr]">
 			<div>
 				<NavStack :items="navItems" />
 			</div>
diff --git a/apps/frontend/src/pages/[type]/[id]/settings/environment.vue b/apps/frontend/src/pages/[type]/[id]/settings/environment.vue
index c164c91e0..84e4ec6cb 100644
--- a/apps/frontend/src/pages/[type]/[id]/settings/environment.vue
+++ b/apps/frontend/src/pages/[type]/[id]/settings/environment.vue
@@ -1,6 +1,6 @@
 <template>
 	<LoadingIndicator v-if="!projectV3" class="py-6" />
-	<div v-else-if="showEnvironmentMigration" class="card experimental-styles-within">
+	<div v-else-if="showEnvironmentMigration" class="card">
 		<h2 class="m-0 mb-2 block text-lg font-extrabold text-contrast">Project environment</h2>
 		<EnvironmentMigration />
 	</div>
diff --git a/apps/frontend/src/pages/[type]/[id]/settings/gallery.vue b/apps/frontend/src/pages/[type]/[id]/settings/gallery.vue
index bd8b67008..cf135ac42 100644
--- a/apps/frontend/src/pages/[type]/[id]/settings/gallery.vue
+++ b/apps/frontend/src/pages/[type]/[id]/settings/gallery.vue
@@ -10,23 +10,24 @@
 					<div class="file-header">
 						<ImageIcon aria-hidden="true" />
 						<strong>{{ editFile ? editFile.name : 'Current image' }}</strong>
-						<FileInput
-							v-if="editIndex === -1"
-							class="iconified-button raised-button"
-							prompt="Replace"
-							:accept="acceptFileTypes"
-							:max-size="5242880"
-							should-always-reset
-							aria-label="Replace image"
-							@change="
-								(x) => {
-									editFile = x[0]
-									showPreviewImage()
-								}
-							"
-						>
-							<TransferIcon aria-hidden="true" />
-						</FileInput>
+						<ButtonStyled v-if="editIndex === -1" type="outlined">
+							<FileInput
+								class="button-like"
+								prompt="Replace"
+								:accept="acceptFileTypes"
+								:max-size="5242880"
+								should-always-reset
+								aria-label="Replace image"
+								@change="
+									(x) => {
+										editFile = x[0]
+										showPreviewImage()
+									}
+								"
+							>
+								<TransferIcon aria-hidden="true" />
+							</FileInput>
+						</ButtonStyled>
 					</div>
 					<img
 						:src="
@@ -68,53 +69,42 @@
 					placeholder="Enter order index..."
 				/>
 				<label for="gallery-image-featured">
-					<span class="label__title">Featured</span>
+					<span class="label__title">Banner image</span>
 					<span class="label__description">
-						A featured gallery image shows up in search and your project card. Only one gallery
-						image can be featured.
+						You can feature one image on your project to be used as a banner image.
 					</span>
 				</label>
-				<button
-					v-if="!editFeatured"
-					id="gallery-image-featured"
-					class="iconified-button"
-					@click="editFeatured = true"
-				>
-					<StarIcon aria-hidden="true" />
-					Feature image
-				</button>
-				<button
-					v-else
-					id="gallery-image-featured"
-					class="iconified-button"
-					@click="editFeatured = false"
-				>
-					<StarIcon fill="currentColor" aria-hidden="true" />
-					Unfeature image
-				</button>
+				<ButtonStyled v-if="!editFeatured">
+					<button id="gallery-image-featured" class="w-fit" @click="editFeatured = true">
+						<StarIcon aria-hidden="true" />
+						Set as banner
+					</button>
+				</ButtonStyled>
+				<ButtonStyled v-else>
+					<button id="gallery-image-featured" class="w-fit" @click="editFeatured = false">
+						<StarIcon fill="currentColor" aria-hidden="true" />
+						Unset as banner
+					</button>
+				</ButtonStyled>
 				<div class="button-group">
-					<button class="iconified-button" @click="modal_edit_item.hide()">
-						<XIcon aria-hidden="true" />
-						Cancel
-					</button>
-					<button
-						v-if="editIndex === -1"
-						class="iconified-button brand-button"
-						:disabled="shouldPreventActions"
-						@click="createGalleryItem"
-					>
-						<PlusIcon aria-hidden="true" />
-						Add gallery image
-					</button>
-					<button
-						v-else
-						class="iconified-button brand-button"
-						:disabled="shouldPreventActions"
-						@click="editGalleryItem"
-					>
-						<SaveIcon aria-hidden="true" />
-						Save changes
-					</button>
+					<ButtonStyled type="outlined">
+						<button @click="modal_edit_item.hide()">
+							<XIcon aria-hidden="true" />
+							Cancel
+						</button>
+					</ButtonStyled>
+					<ButtonStyled v-if="editIndex === -1" color="brand">
+						<button :disabled="shouldPreventActions" @click="createGalleryItem">
+							<PlusIcon aria-hidden="true" />
+							Add gallery image
+						</button>
+					</ButtonStyled>
+					<ButtonStyled v-else color="brand">
+						<button :disabled="shouldPreventActions" @click="editGalleryItem">
+							<SaveIcon aria-hidden="true" />
+							Save changes
+						</button>
+					</ButtonStyled>
 				</div>
 			</div>
 		</Modal>
@@ -155,56 +145,60 @@
 						</p>
 					</div>
 					<div class="controls">
-						<div class="buttons">
-							<button class="close circle-button" @click="expandedGalleryItem = null">
-								<XIcon aria-hidden="true" />
-							</button>
-							<a
-								class="open circle-button"
-								target="_blank"
-								:href="
-									expandedGalleryItem.raw_url
-										? expandedGalleryItem.raw_url
-										: 'https://cdn.modrinth.com/placeholder-banner.svg'
-								"
-							>
-								<ExternalIcon aria-hidden="true" />
-							</a>
-							<button class="circle-button" @click="zoomedIn = !zoomedIn">
-								<ExpandIcon v-if="!zoomedIn" aria-hidden="true" />
-								<ContractIcon v-else aria-hidden="true" />
-							</button>
-							<button
-								v-if="filteredGallery.length > 1"
-								class="previous circle-button"
-								@click="previousImage()"
-							>
-								<LeftArrowIcon aria-hidden="true" />
-							</button>
-							<button
-								v-if="filteredGallery.length > 1"
-								class="next circle-button"
-								@click="nextImage()"
-							>
-								<RightArrowIcon aria-hidden="true" />
-							</button>
+						<div class="flex gap-2">
+							<ButtonStyled circular>
+								<button class="close" @click="expandedGalleryItem = null">
+									<XIcon aria-hidden="true" />
+								</button>
+							</ButtonStyled>
+							<ButtonStyled circular>
+								<a
+									class="open"
+									target="_blank"
+									:href="
+										expandedGalleryItem.raw_url
+											? expandedGalleryItem.raw_url
+											: 'https://cdn.modrinth.com/placeholder-banner.svg'
+									"
+								>
+									<ExternalIcon aria-hidden="true" />
+								</a>
+							</ButtonStyled>
+							<ButtonStyled circular>
+								<button @click="zoomedIn = !zoomedIn">
+									<ExpandIcon v-if="!zoomedIn" aria-hidden="true" />
+									<ContractIcon v-else aria-hidden="true" />
+								</button>
+							</ButtonStyled>
+							<ButtonStyled v-if="filteredGallery.length > 1" circular>
+								<button class="previous" @click="previousImage()">
+									<LeftArrowIcon aria-hidden="true" />
+								</button>
+							</ButtonStyled>
+							<ButtonStyled v-if="filteredGallery.length > 1" circular>
+								<button class="next" @click="nextImage()">
+									<RightArrowIcon aria-hidden="true" />
+								</button>
+							</ButtonStyled>
 						</div>
 					</div>
 				</div>
 			</div>
 		</div>
 		<div v-if="currentMember" class="card header-buttons">
-			<FileInput
-				:max-size="5242880"
-				:accept="acceptFileTypes"
-				prompt="Upload an image"
-				aria-label="Upload an image"
-				class="iconified-button brand-button"
-				:disabled="!isPermission(currentMember?.permissions, 1 << 2)"
-				@change="handleFiles"
-			>
-				<UploadIcon aria-hidden="true" />
-			</FileInput>
+			<ButtonStyled color="brand">
+				<FileInput
+					:max-size="5242880"
+					:accept="acceptFileTypes"
+					prompt="Upload an image"
+					aria-label="Upload an image"
+					class="button-like"
+					:disabled="!isPermission(currentMember?.permissions, 1 << 2)"
+					@change="handleFiles"
+				>
+					<UploadIcon aria-hidden="true" />
+				</FileInput>
+			</ButtonStyled>
 			<span class="indicator">
 				<InfoIcon aria-hidden="true" /> Click to choose an image or drag one onto this page
 			</span>
@@ -238,35 +232,37 @@
 						{{ formatDate(item.created) }}
 					</div>
 					<div v-if="currentMember" class="gallery-buttons input-group">
-						<button
-							class="iconified-button"
-							@click="
-								() => {
-									resetEdit()
-									editIndex = index
-									editTitle = item.title
-									editDescription = item.description
-									editFeatured = item.featured
-									editOrder = item.ordering
-									modal_edit_item.show()
-								}
-							"
-						>
-							<EditIcon aria-hidden="true" />
-							Edit
-						</button>
-						<button
-							class="iconified-button"
-							@click="
-								() => {
-									deleteIndex = index
-									modal_confirm.show()
-								}
-							"
-						>
-							<TrashIcon aria-hidden="true" />
-							Remove
-						</button>
+						<ButtonStyled>
+							<button
+								@click="
+									() => {
+										resetEdit()
+										editIndex = index
+										editTitle = item.title
+										editDescription = item.description
+										editFeatured = item.featured
+										editOrder = item.ordering
+										modal_edit_item.show()
+									}
+								"
+							>
+								<EditIcon aria-hidden="true" />
+								Edit
+							</button>
+						</ButtonStyled>
+						<ButtonStyled>
+							<button
+								@click="
+									() => {
+										deleteIndex = index
+										modal_confirm.show()
+									}
+								"
+							>
+								<TrashIcon aria-hidden="true" />
+								Remove
+							</button>
+						</ButtonStyled>
 					</div>
 				</div>
 			</div>
@@ -294,6 +290,7 @@ import {
 	XIcon,
 } from '@modrinth/assets'
 import {
+	ButtonStyled,
 	ConfirmModal,
 	DropArea,
 	FileInput,
@@ -501,43 +498,6 @@ onUnmounted(() => {
 		width: calc(100vw - 2 * var(--spacing-card-lg));
 		height: calc(100vh - 2 * var(--spacing-card-lg));
 
-		.circle-button {
-			padding: 0.5rem;
-			line-height: 1;
-			display: flex;
-			max-width: 2rem;
-			color: var(--color-button-text);
-			background-color: var(--color-button-bg);
-			border-radius: var(--size-rounded-max);
-			margin: 0;
-			box-shadow: inset 0px -1px 1px rgb(17 24 39 / 10%);
-
-			&:not(:last-child) {
-				margin-right: 0.5rem;
-			}
-
-			&:hover {
-				background-color: var(--color-button-bg-hover) !important;
-
-				svg {
-					color: var(--color-button-text-hover) !important;
-				}
-			}
-
-			&:active {
-				background-color: var(--color-button-bg-active) !important;
-
-				svg {
-					color: var(--color-button-text-active) !important;
-				}
-			}
-
-			svg {
-				height: 1rem;
-				width: 1rem;
-			}
-		}
-
 		.image {
 			position: absolute;
 			left: 50%;
@@ -613,14 +573,6 @@ onUnmounted(() => {
 	}
 }
 
-.buttons {
-	display: flex;
-
-	button {
-		margin-right: 0.5rem;
-	}
-}
-
 .items {
 	display: grid;
 	grid-template-rows: 1fr;
@@ -723,7 +675,7 @@ onUnmounted(() => {
 				word-wrap: anywhere;
 			}
 
-			.iconified-button {
+			label.button-like {
 				margin-left: auto;
 			}
 		}
@@ -738,8 +690,4 @@ onUnmounted(() => {
 		}
 	}
 }
-
-.brand-button {
-	color: var(--color-accent-contrast);
-}
 </style>
diff --git a/apps/frontend/src/pages/[type]/[id]/settings/index.vue b/apps/frontend/src/pages/[type]/[id]/settings/index.vue
index e78a94564..e5e4f32d8 100644
--- a/apps/frontend/src/pages/[type]/[id]/settings/index.vue
+++ b/apps/frontend/src/pages/[type]/[id]/settings/index.vue
@@ -81,29 +81,28 @@
 							size="md"
 							class="project__icon"
 						/>
-						<div class="input-stack">
-							<FileInput
-								id="project-icon"
-								:max-size="262144000"
-								:show-icon="true"
-								accept="image/png,image/jpeg,image/gif,image/webp"
-								class="choose-image iconified-button"
-								prompt="Upload icon"
-								aria-label="Upload icon"
-								:disabled="!hasPermission"
-								@change="showPreviewImage"
-							>
-								<UploadIcon aria-hidden="true" />
-							</FileInput>
-							<button
-								v-if="!deletedIcon && (previewImage || project.icon_url)"
-								class="iconified-button"
-								:disabled="!hasPermission"
-								@click="markIconForDeletion"
-							>
-								<TrashIcon aria-hidden="true" />
-								Remove icon
-							</button>
+						<div class="flex flex-col gap-2">
+							<ButtonStyled>
+								<FileInput
+									id="project-icon"
+									:max-size="262144000"
+									:show-icon="true"
+									accept="image/png,image/jpeg,image/gif,image/webp"
+									class="button-like choose-image"
+									prompt="Upload icon"
+									aria-label="Upload icon"
+									:disabled="!hasPermission"
+									@change="showPreviewImage"
+								>
+									<UploadIcon aria-hidden="true" />
+								</FileInput>
+							</ButtonStyled>
+							<ButtonStyled v-if="!deletedIcon && (previewImage || project.icon_url)">
+								<button :disabled="!hasPermission" @click="markIconForDeletion">
+									<TrashIcon aria-hidden="true" />
+									Remove icon
+								</button>
+							</ButtonStyled>
 						</div>
 					</div>
 				</div>
@@ -157,26 +156,25 @@
 							</label>
 						</div>
 						<div class="mt-2 flex items-center gap-2">
-							<FileInput
-								:max-size="524288"
-								:show-icon="true"
-								accept="image/png,image/jpeg,image/gif,image/webp"
-								class="iconified-button"
-								prompt="Upload banner"
-								:disabled="!hasPermission"
-								@change="showBannerPreview"
-							>
-								<UploadIcon aria-hidden="true" />
-							</FileInput>
-							<button
-								v-if="!deletedBanner && (bannerPreview || bannerGalleryImage?.url)"
-								class="iconified-button"
-								:disabled="!hasPermission"
-								@click="markBannerForDeletion"
-							>
-								<TrashIcon aria-hidden="true" />
-								Remove banner
-							</button>
+							<ButtonStyled>
+								<FileInput
+									:max-size="524288"
+									:show-icon="true"
+									accept="image/png,image/jpeg,image/gif,image/webp"
+									class="button-like"
+									prompt="Upload banner"
+									:disabled="!hasPermission"
+									@change="showBannerPreview"
+								>
+									<UploadIcon aria-hidden="true" />
+								</FileInput>
+							</ButtonStyled>
+							<ButtonStyled v-if="!deletedBanner && (bannerPreview || bannerGalleryImage?.url)">
+								<button :disabled="!hasPermission" @click="markBannerForDeletion">
+									<TrashIcon aria-hidden="true" />
+									Remove banner
+								</button>
+							</ButtonStyled>
 						</div>
 						<div class="mt-2 text-secondary">Gif, 468×60px recommended.</div>
 					</div>
@@ -285,15 +283,12 @@
 				Removes your project from Modrinth's servers and search. Clicking on this will delete your
 				project, so be extra careful!
 			</p>
-			<button
-				type="button"
-				class="iconified-button danger-button"
-				:disabled="!hasDeletePermission"
-				@click="$refs.modal_confirm.show()"
-			>
-				<TrashIcon aria-hidden="true" />
-				Delete project
-			</button>
+			<ButtonStyled color="red">
+				<button :disabled="!hasDeletePermission" @click="$refs.modal_confirm.show()">
+					<TrashIcon aria-hidden="true" />
+					Delete project
+				</button>
+			</ButtonStyled>
 		</section>
 		<UnsavedChangesPopup
 			:original="original"
@@ -319,6 +314,7 @@ import {
 import { MIN_SUMMARY_CHARS } from '@modrinth/moderation'
 import {
 	Avatar,
+	ButtonStyled,
 	Combobox,
 	ConfirmLeaveModal,
 	ConfirmModal,
diff --git a/apps/frontend/src/pages/[type]/[id]/settings/license.vue b/apps/frontend/src/pages/[type]/[id]/settings/license.vue
index 682b60ecf..34e2f3564 100644
--- a/apps/frontend/src/pages/[type]/[id]/settings/license.vue
+++ b/apps/frontend/src/pages/[type]/[id]/settings/license.vue
@@ -104,7 +104,7 @@
 					>
 				</label>
 
-				<div class="input-stack w-1/2">
+				<div class="flex w-1/2 flex-col gap-2">
 					<StyledInput
 						v-if="!current.nonSpdxLicense"
 						id="license-spdx"
diff --git a/apps/frontend/src/pages/[type]/[id]/settings/links.vue b/apps/frontend/src/pages/[type]/[id]/settings/links.vue
index 5615a23b4..090260dde 100644
--- a/apps/frontend/src/pages/[type]/[id]/settings/links.vue
+++ b/apps/frontend/src/pages/[type]/[id]/settings/links.vue
@@ -105,15 +105,12 @@
 				/>
 			</div>
 			<div class="button-group">
-				<button
-					type="button"
-					class="iconified-button brand-button"
-					:disabled="!hasServerChanges"
-					@click="saveServerChanges()"
-				>
-					<SaveIcon />
-					Save changes
-				</button>
+				<ButtonStyled color="brand">
+					<button :disabled="!hasServerChanges" @click="saveServerChanges()">
+						<SaveIcon />
+						Save changes
+					</button>
+				</ButtonStyled>
 			</div>
 		</section>
 
@@ -275,15 +272,12 @@
 				/>
 			</div>
 			<div class="button-group">
-				<button
-					type="button"
-					class="iconified-button brand-button"
-					:disabled="!hasChanges"
-					@click="saveChanges()"
-				>
-					<SaveIcon />
-					Save changes
-				</button>
+				<ButtonStyled color="brand">
+					<button :disabled="!hasChanges" @click="saveChanges()">
+						<SaveIcon />
+						Save changes
+					</button>
+				</ButtonStyled>
 			</div>
 		</section>
 	</div>
@@ -293,6 +287,7 @@
 import { SaveIcon, TriangleAlertIcon } from '@modrinth/assets'
 import { commonLinkDomains, isCommonUrl, isDiscordUrl, isLinkShortener } from '@modrinth/moderation'
 import {
+	ButtonStyled,
 	DropdownSelect,
 	injectModrinthClient,
 	injectNotificationManager,
diff --git a/apps/frontend/src/pages/[type]/[id]/settings/members.vue b/apps/frontend/src/pages/[type]/[id]/settings/members.vue
index a039d1497..e6ed7a5a5 100644
--- a/apps/frontend/src/pages/[type]/[id]/settings/members.vue
+++ b/apps/frontend/src/pages/[type]/[id]/settings/members.vue
@@ -41,31 +41,33 @@
 					@keypress.enter="inviteTeamMember()"
 				/>
 				<label for="username" class="hidden">Username</label>
-				<button
-					class="iconified-button brand-button"
-					:disabled="(currentMember?.permissions & MANAGE_INVITES) !== MANAGE_INVITES"
-					@click="inviteTeamMember()"
-				>
-					<UserPlusIcon />
-					Invite
-				</button>
+				<ButtonStyled color="brand">
+					<button
+						:disabled="(currentMember?.permissions & MANAGE_INVITES) !== MANAGE_INVITES"
+						@click="inviteTeamMember()"
+					>
+						<UserPlusIcon />
+						Invite
+					</button>
+				</ButtonStyled>
 			</div>
 			<div class="adjacent-input">
 				<span class="label">
 					<span class="label__title">Leave project</span>
 					<span class="label__description"> Remove yourself as a member of this project. </span>
 				</span>
-				<button
-					class="iconified-button danger-button"
-					:disabled="currentMember?.is_owner"
-					:title="
-						currentMember?.is_owner ? 'You cannot leave the project if you are the owner!' : ''
-					"
-					@click="leaveProject()"
-				>
-					<UserXIcon />
-					Leave project
-				</button>
+				<ButtonStyled color="red">
+					<button
+						:disabled="currentMember?.is_owner"
+						:title="
+							currentMember?.is_owner ? 'You cannot leave the project if you are the owner!' : ''
+						"
+						@click="leaveProject()"
+					>
+						<UserXIcon />
+						Leave project
+					</button>
+				</ButtonStyled>
 			</div>
 		</Card>
 		<div
@@ -88,16 +90,18 @@
 				<div class="side-buttons">
 					<Badge v-if="member.accepted" type="accepted" />
 					<Badge v-else type="pending" />
-					<button
-						class="square-button dropdown-icon"
-						@click="
-							openTeamMembers.indexOf(member.user.id) === -1
-								? openTeamMembers.push(member.user.id)
-								: (openTeamMembers = openTeamMembers.filter((it) => it !== member.user.id))
-						"
-					>
-						<DropdownIcon />
-					</button>
+					<ButtonStyled circular>
+						<button
+							class="dropdown-icon"
+							@click="
+								openTeamMembers.indexOf(member.user.id) === -1
+									? openTeamMembers.push(member.user.id)
+									: (openTeamMembers = openTeamMembers.filter((it) => it !== member.user.id))
+							"
+						>
+							<DropdownIcon />
+						</button>
+					</ButtonStyled>
 				</div>
 			</div>
 			<div class="content">
@@ -225,31 +229,30 @@
 					</div>
 				</template>
 				<div class="input-group">
-					<button
-						class="iconified-button brand-button"
-						:disabled="(currentMember?.permissions & EDIT_MEMBER) !== EDIT_MEMBER"
-						@click="updateTeamMember(index)"
-					>
-						<SaveIcon />
-						Save changes
-					</button>
-					<button
-						v-if="!member.is_owner"
-						class="iconified-button danger-button"
-						:disabled="(currentMember?.permissions & EDIT_MEMBER) !== EDIT_MEMBER"
-						@click="removeTeamMember(index)"
-					>
-						<UserXIcon />
-						Remove member
-					</button>
-					<button
-						v-if="!member.is_owner && currentMember?.is_owner && member.accepted"
-						class="iconified-button"
-						@click="openTransferModal(index, $event)"
-					>
-						<TransferIcon />
-						Transfer ownership
-					</button>
+					<ButtonStyled color="brand">
+						<button
+							:disabled="(currentMember?.permissions & EDIT_MEMBER) !== EDIT_MEMBER"
+							@click="updateTeamMember(index)"
+						>
+							<SaveIcon />
+							Save changes
+						</button>
+					</ButtonStyled>
+					<ButtonStyled v-if="!member.is_owner" color="red">
+						<button
+							:disabled="(currentMember?.permissions & EDIT_MEMBER) !== EDIT_MEMBER"
+							@click="removeTeamMember(index)"
+						>
+							<UserXIcon />
+							Remove member
+						</button>
+					</ButtonStyled>
+					<ButtonStyled v-if="!member.is_owner && currentMember?.is_owner && member.accepted">
+						<button @click="openTransferModal(index, $event)">
+							<TransferIcon />
+							Transfer ownership
+						</button>
+					</ButtonStyled>
 				</div>
 			</div>
 		</div>
@@ -305,19 +308,19 @@
 					force-direction="up"
 					:disabled="!currentMember?.is_owner || organizationOptions.length === 0"
 				/>
-				<button
-					class="btn btn-primary"
-					:disabled="!selectedOrganization"
-					@click="openTransferToOrgModal($event)"
-				>
-					<CheckIcon />
-					<span class="w-max"> Transfer management </span>
-				</button>
+				<ButtonStyled color="brand">
+					<button :disabled="!selectedOrganization" @click="openTransferToOrgModal($event)">
+						<CheckIcon />
+						<span class="w-max"> Transfer management </span>
+					</button>
+				</ButtonStyled>
 			</div>
-			<button v-if="organization" class="btn" @click="$refs.modal_remove.show()">
-				<OrganizationIcon />
-				Remove from organization
-			</button>
+			<ButtonStyled v-if="organization">
+				<button @click="$refs.modal_remove.show()">
+					<OrganizationIcon />
+					Remove from organization
+				</button>
+			</ButtonStyled>
 		</section>
 		<div
 			v-for="(member, index) in allOrgMembers"
@@ -339,16 +342,18 @@
 				<div class="side-buttons">
 					<Badge v-if="member.accepted" type="accepted" />
 					<Badge v-else type="pending" />
-					<button
-						class="square-button dropdown-icon"
-						@click="
-							openTeamMembers.indexOf(member.user.id) === -1
-								? openTeamMembers.push(member.user.id)
-								: (openTeamMembers = openTeamMembers.filter((it) => it !== member.user.id))
-						"
-					>
-						<DropdownIcon />
-					</button>
+					<ButtonStyled circular>
+						<button
+							class="dropdown-icon"
+							@click="
+								openTeamMembers.indexOf(member.user.id) === -1
+									? openTeamMembers.push(member.user.id)
+									: (openTeamMembers = openTeamMembers.filter((it) => it !== member.user.id))
+							"
+						>
+							<DropdownIcon />
+						</button>
+					</ButtonStyled>
 				</div>
 			</div>
 			<div class="content">
@@ -522,17 +527,18 @@
 
 					we don't allow clicking the button in that last case.
 					-->
-					<button
-						class="iconified-button brand-button"
-						:disabled="
-							(currentMember?.permissions & EDIT_MEMBER) !== EDIT_MEMBER ||
-							(!allOrgMembers[index].oldOverride && !allOrgMembers[index].override)
-						"
-						@click="updateOrgMember(index)"
-					>
-						<SaveIcon />
-						Save changes
-					</button>
+					<ButtonStyled color="brand">
+						<button
+							:disabled="
+								(currentMember?.permissions & EDIT_MEMBER) !== EDIT_MEMBER ||
+								(!allOrgMembers[index].oldOverride && !allOrgMembers[index].override)
+							"
+							@click="updateOrgMember(index)"
+						>
+							<SaveIcon />
+							Save changes
+						</button>
+					</ButtonStyled>
 				</div>
 			</div>
 		</div>
@@ -554,6 +560,7 @@ import {
 import {
 	Avatar,
 	Badge,
+	ButtonStyled,
 	Card,
 	Checkbox,
 	Combobox,
diff --git a/apps/frontend/src/pages/[type]/[id]/versions.vue b/apps/frontend/src/pages/[type]/[id]/versions.vue
index 3d67f1ac8..79513b55e 100644
--- a/apps/frontend/src/pages/[type]/[id]/versions.vue
+++ b/apps/frontend/src/pages/[type]/[id]/versions.vue
@@ -1,5 +1,5 @@
 <template>
-	<section class="experimental-styles-within overflow-visible">
+	<section class="overflow-visible">
 		<!-- Loading state -->
 		<div
 			v-if="versionsLoading && !versions?.length"
diff --git a/apps/frontend/src/pages/admin/billing/[id].vue b/apps/frontend/src/pages/admin/billing/[id].vue
index 8b00a8fea..5582c7ff1 100644
--- a/apps/frontend/src/pages/admin/billing/[id].vue
+++ b/apps/frontend/src/pages/admin/billing/[id].vue
@@ -132,7 +132,7 @@
 			</div>
 		</div>
 	</NewModal>
-	<div class="page experimental-styles-within">
+	<div class="page">
 		<div
 			class="mb-4 flex items-center justify-between border-0 border-b border-solid border-divider pb-4"
 		>
diff --git a/apps/frontend/src/pages/admin/docs.vue b/apps/frontend/src/pages/admin/docs.vue
index dc71482a6..557caf30f 100644
--- a/apps/frontend/src/pages/admin/docs.vue
+++ b/apps/frontend/src/pages/admin/docs.vue
@@ -96,8 +96,8 @@ onMounted(() => {
 						</div>
 
 						<div class="mt-auto flex gap-2">
-							<ButtonStyled color="brand" class="flex-1">
-								<button class="w-full justify-center" @click="openPreview(id)">
+							<ButtonStyled color="brand">
+								<button class="w-full flex-1 justify-center" @click="openPreview(id)">
 									<PlayIcon class="h-4 w-4" aria-hidden="true" />
 									Preview
 								</button>
diff --git a/apps/frontend/src/pages/admin/emails.vue b/apps/frontend/src/pages/admin/emails.vue
index 3b7674b4c..24a788f67 100644
--- a/apps/frontend/src/pages/admin/emails.vue
+++ b/apps/frontend/src/pages/admin/emails.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { CopyIcon, LibraryIcon, PlayIcon, SearchIcon } from '@modrinth/assets'
-import { ButtonStyled, Card, NewModal, StyledInput } from '@modrinth/ui'
+import { ButtonStyled, NewModal, StyledInput } from '@modrinth/ui'
 import { computed, onMounted, ref } from 'vue'
 
 import emails from '~/templates/emails'
@@ -178,84 +178,82 @@ onMounted(() => {
 					</div>
 
 					<div class="input-group mt-4">
-						<button class="iconified-button transparent" type="button" @click="closePreview">
-							Close
-						</button>
+						<ButtonStyled type="transparent">
+							<button @click="closePreview">Close</button>
+						</ButtonStyled>
 					</div>
 				</div>
 			</div>
 		</NewModal>
 		<div class="normal-page__content">
-			<Card class="mb-6 flex flex-col gap-4">
-				<div class="flex flex-wrap items-center gap-3">
-					<StyledInput
-						id="email-search"
-						v-model="query"
-						type="search"
-						:icon="SearchIcon"
-						placeholder="Search templates..."
-						wrapper-class="w-72"
-					/>
+			<div class="flex flex-wrap items-center gap-3">
+				<StyledInput
+					id="email-search"
+					v-model="query"
+					type="search"
+					:icon="SearchIcon"
+					placeholder="Search templates..."
+					wrapper-class="w-72"
+				/>
 
-					<ButtonStyled color="brand">
-						<button :disabled="filtered.length === 0" @click="openAll">
-							<LibraryIcon class="h-4 w-4" aria-hidden="true" />
-							Open all ({{ counts.shown }})
-						</button>
-					</ButtonStyled>
+				<ButtonStyled color="brand">
+					<button :disabled="filtered.length === 0" @click="openAll">
+						<LibraryIcon class="h-4 w-4" aria-hidden="true" />
+						Open all ({{ counts.shown }})
+					</button>
+				</ButtonStyled>
 
-					<span class="text-sm text-secondary">
-						Showing <span class="font-medium text-contrast">{{ counts.shown }}</span> of
-						<span class="font-medium text-contrast">{{ counts.total }}</span>
-					</span>
-				</div>
+				<span class="text-sm text-secondary">
+					Showing <span class="font-medium text-contrast">{{ counts.shown }}</span> of
+					<span class="font-medium text-contrast">{{ counts.total }}</span>
+				</span>
+			</div>
 
-				<div
-					v-if="filtered.length === 0"
-					class="rounded-lg border border-dashed border-divider px-6 py-10 text-center text-sm text-secondary"
+			<div
+				v-if="filtered.length === 0"
+				class="mt-4 border-0 border-b border-solid border-surface-4 pb-4"
+			>
+				No templates match your search.
+			</div>
+
+			<ul v-else class="m-0 mt-4 grid gap-3 p-0 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
+				<li
+					v-for="id in filtered"
+					:key="id"
+					class="group flex flex-col justify-between rounded-2xl border border-solid border-surface-4 bg-surface-3 p-4 shadow-sm transition hover:shadow"
 				>
-					No templates match your search.
-				</div>
-
-				<ul v-else class="grid gap-4 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
-					<li
-						v-for="id in filtered"
-						:key="id"
-						class="hover:border-green/70 group flex flex-col justify-between rounded-lg border border-divider bg-button-bg p-4 shadow-sm transition hover:shadow"
-					>
-						<div class="mb-3">
-							<div class="font-mono text-sm font-semibold tracking-tight text-contrast">
-								{{ id }}
-							</div>
-							<div class="mt-1 truncate text-xs text-secondary">
-								/_internal/templates/email/{{ id }}
-							</div>
+					<div class="mb-3">
+						<div class="font-mono text-sm font-semibold tracking-tight text-contrast">
+							{{ id }}
 						</div>
-
-						<div class="mt-auto flex gap-2">
-							<ButtonStyled color="brand" class="flex-1">
-								<button class="w-full justify-center" @click="openPreview(id, $event)">
-									<PlayIcon class="h-4 w-4" aria-hidden="true" />
-									Preview
-								</button>
-							</ButtonStyled>
-
-							<ButtonStyled>
-								<button class="justify-center" title="Copy preview URL" @click="copy(id)">
-									<CopyIcon class="h-4 w-4" aria-hidden="true" />
-								</button>
-							</ButtonStyled>
+						<div class="mt-1 truncate text-xs text-secondary">
+							/_internal/templates/email/{{ id }}
 						</div>
-					</li>
-				</ul>
-			</Card>
+					</div>
 
-			<p class="mt-2 text-xs text-secondary">
+					<div class="mt-auto flex gap-2">
+						<ButtonStyled color="brand">
+							<button @click="openPreview(id, $event)">
+								<PlayIcon aria-hidden="true" />
+								Preview
+							</button>
+						</ButtonStyled>
+
+						<ButtonStyled circular type="outlined">
+							<button title="Copy preview URL" @click="copy(id)">
+								<CopyIcon aria-hidden="true" />
+							</button>
+						</ButtonStyled>
+					</div>
+				</li>
+			</ul>
+
+			<p class="mt-4">
 				All templates come from
-				<code class="rounded bg-code-bg px-1 py-0.5 text-[11px] text-code-text"
+				<code class="rounded bg-code-bg px-1 py-0.5 text-sm text-code-text"
 					>src/emails/index.ts</code
 				>. Popouts render via
-				<code class="rounded bg-code-bg px-1 py-0.5 text-[11px] text-code-text"
+				<code class="rounded bg-code-bg px-1 py-0.5 text-sm text-code-text"
 					>/_internal/templates/email/[template]</code
 				>.
 			</p>
diff --git a/apps/frontend/src/pages/admin/servers/notices.vue b/apps/frontend/src/pages/admin/servers/notices.vue
index 9e5536a25..8cc36c9c6 100644
--- a/apps/frontend/src/pages/admin/servers/notices.vue
+++ b/apps/frontend/src/pages/admin/servers/notices.vue
@@ -120,7 +120,7 @@
 		</div>
 	</NewModal>
 	<AssignNoticeModal ref="assignNoticeModal" @close="refreshNotices" />
-	<div class="page experimental-styles-within">
+	<div class="page">
 		<div
 			class="mb-6 flex items-end justify-between border-0 border-b border-solid border-divider pb-4"
 		>
diff --git a/apps/frontend/src/pages/admin/servers/transfers.vue b/apps/frontend/src/pages/admin/servers/transfers.vue
index c706aabbf..04627f488 100644
--- a/apps/frontend/src/pages/admin/servers/transfers.vue
+++ b/apps/frontend/src/pages/admin/servers/transfers.vue
@@ -8,7 +8,7 @@
 		proceed-label="Cancel transfer"
 		@proceed="confirmCancel"
 	/>
-	<div class="experimental-styles-within mx-auto max-w-[78.5rem] p-4">
+	<div class="mx-auto max-w-[78.5rem] p-4">
 		<div
 			class="mb-6 flex items-end justify-between border-0 border-b border-solid border-divider pb-4"
 		>
diff --git a/apps/frontend/src/pages/app.vue b/apps/frontend/src/pages/app.vue
index 17edbdc53..9d2f3edd8 100644
--- a/apps/frontend/src/pages/app.vue
+++ b/apps/frontend/src/pages/app.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import {
+	ArrowDownIcon,
 	BoxIcon,
 	DownloadIcon,
 	EditIcon,
@@ -13,6 +14,7 @@ import {
 	Accordion,
 	Avatar,
 	Badge,
+	ButtonStyled,
 	Checkbox,
 	commonMessages,
 	defineMessages,
@@ -541,67 +543,67 @@ useSeoMeta({
 				{{ formatMessage(messages.description) }}
 			</h2>
 			<div class="button-group">
-				<button
-					v-if="os"
-					class="iconified-button brand-button btn btn-large"
-					rel="noopener nofollow"
-					@click="handleDownload"
-				>
-					<svg
-						v-if="os === 'Linux'"
-						class="light-icon"
-						width="45"
-						height="46"
-						viewBox="0 0 45 46"
-						xmlns="http://www.w3.org/2000/svg"
-					>
-						<path
-							id="Subtract"
-							fill-rule="evenodd"
-							clip-rule="evenodd"
-							d="M23.5477 0H23.5461C23.2284 0 22.9077 0.0163711 22.5876 0.0415902C20.4638 0.208942 18.8991 0.910133 17.7996 2.0082C16.7124 3.09404 16.1751 4.47323 15.9172 5.82868C15.6602 7.18017 15.6685 8.57463 15.7244 9.76049C15.7464 10.2267 15.7737 10.6424 15.7981 11.0129L15.7981 11.0129C15.8393 11.6392 15.8719 12.1361 15.856 12.5288C15.7269 14.3647 15.3652 15.7513 14.1358 17.5116C12.4894 19.4715 10.1353 22.6851 9.00147 26.0938C8.50987 27.5652 8.23247 29.1259 8.37804 30.6595C8.14194 30.9205 7.94151 31.1909 7.77396 31.4209L7.69935 31.5235C7.53577 31.7486 7.41036 31.9212 7.28343 32.0672C7.22885 32.1165 7.13829 32.1747 6.95723 32.2529C6.85646 32.2965 6.74665 32.3386 6.60714 32.3918L6.60229 32.3937L6.60063 32.3943C6.4689 32.4446 6.31402 32.5038 6.15349 32.5722L6.14713 32.575C6.11461 32.5891 6.08029 32.6038 6.04439 32.6191L6.04194 32.6201C5.49857 32.8521 4.5956 33.2374 4.06765 34.2907L4.06313 34.2998L4.05878 34.3089C3.83111 34.787 3.71086 35.3126 3.71965 35.8518C3.72044 36.2784 3.77526 36.6973 3.83488 36.9965L3.8573 37.1494C3.90153 37.4502 3.93607 37.685 3.9521 37.8975C3.96952 38.1284 3.9557 38.2416 3.94333 38.2911C3.47501 39.5811 3.29341 40.7747 3.80981 41.7808L3.81261 41.7862C4.34311 42.8045 5.41437 43.1509 6.09597 43.3713L6.14873 43.3884L6.1831 43.3968C6.76559 43.5407 7.45296 43.6219 8.08651 43.6967L8.08657 43.6967C8.33286 43.7258 8.57102 43.7539 8.79172 43.7844C9.65223 43.9032 10.4057 44.0681 11.0346 44.4066L11.0467 44.4131L11.0589 44.4193C12.8487 45.3199 14.8309 45.8073 16.5413 45.3594C17.5947 45.1214 18.5098 44.4944 19.1114 43.6161C19.5314 43.5681 19.9501 43.481 20.3513 43.3976L20.4887 43.3691C21.1456 43.2333 21.8552 43.0939 22.7255 43.039L22.7353 43.0384L22.7452 43.0376C23.2171 42.9984 23.7676 43.0823 24.5478 43.2012L24.6654 43.2192C25.2572 43.3092 25.9398 43.4072 26.6797 43.4223L26.7366 43.5729L26.7865 43.6228C27.7132 45.3272 29.3865 46.1223 31.1344 45.9841C32.8861 45.8473 34.6161 44.7911 35.9501 43.2465L35.9575 43.2379L35.9647 43.2291C36.4178 42.6799 37.0511 42.2572 37.7983 41.8603C38.1016 41.6992 38.4052 41.5515 38.7175 41.3996L38.7179 41.3994L38.936 41.2932C39.3111 41.1099 39.7022 40.9143 40.0596 40.6996C40.783 40.2838 41.6765 39.5491 41.7413 38.3282C41.8014 37.2663 41.2531 36.3256 40.4338 35.3719V35.1588L40.1744 34.8993C40.1374 34.8477 40.0795 34.7411 40.0113 34.5353C39.934 34.302 39.8672 34.0188 39.7856 33.6562C39.6368 32.9545 39.4127 31.9102 38.5493 31.186L38.3995 31.0604C38.9576 28.7316 38.5908 26.4633 37.8259 24.46C36.7898 21.7201 34.9984 19.3692 33.6785 17.7973L33.6778 17.7965C32.1849 15.9116 31.019 14.4397 31.0434 12.2669C31.0453 12.1131 31.0478 11.9522 31.0504 11.7849C31.0801 9.87812 31.1226 7.15021 30.3612 4.83914C29.9387 3.55665 29.2488 2.33019 28.115 1.42642C26.9706 0.514298 25.4646 0.00304389 23.5477 0ZM22.666 1.0385C22.9685 1.01467 23.2618 1 23.546 1C30.2102 1.01058 30.1098 7.76032 30.0499 11.7866C30.0475 11.9472 30.0452 12.1035 30.0433 12.2548C30.0146 14.7849 31.382 16.51 32.8074 18.3084C32.8393 18.3487 32.8713 18.3891 32.9033 18.4295C34.205 19.9787 35.9137 22.23 36.8908 24.815C37.692 26.9123 37.9982 29.2443 37.208 31.5873C37.3329 31.5924 37.4538 31.6331 37.5563 31.7047C37.6223 31.7737 37.6877 31.8118 37.7513 31.8488C37.8026 31.8787 37.8527 31.908 37.901 31.9522H37.9065C38.4748 32.4288 38.6527 33.1347 38.8085 33.8698C38.9698 34.5867 39.1165 35.2008 39.4282 35.5675L39.4337 35.573V35.7508C40.376 36.7867 40.7848 37.5402 40.7427 38.2735C40.706 38.9775 40.1908 39.4725 39.5528 39.8373C39.1757 40.0647 38.7412 40.276 38.2863 40.4973C37.2045 41.0234 36.0076 41.6055 35.1932 42.5928C33.974 44.0045 32.4688 44.8772 31.0553 44.9872C29.6418 45.099 28.3182 44.45 27.6013 43.0237L27.5958 43.0182C27.5697 42.949 27.5454 42.89 27.523 42.8356C27.4653 42.6951 27.4199 42.5847 27.3868 42.4077C26.4008 42.4735 25.4823 42.3328 24.6448 42.2044C23.9204 42.0934 23.2567 41.9917 22.6623 42.041C21.6653 42.1039 20.8661 42.2696 20.1753 42.4127C19.5578 42.5407 19.027 42.6507 18.519 42.6533C18.0827 43.537 17.2687 44.175 16.3043 44.3877C14.9293 44.7543 13.206 44.3803 11.5083 43.526C10.4773 42.9711 9.26303 42.8279 8.13135 42.6944C7.52434 42.6228 6.9411 42.554 6.42267 42.426C5.68017 42.1858 5.01833 41.9365 4.69933 41.3242C4.38033 40.7027 4.43716 39.8502 4.89366 38.6035C5.02207 38.1946 4.94184 37.6503 4.84524 36.995C4.83702 36.9392 4.82868 36.8826 4.82033 36.8252C4.769 36.5758 4.7195 36.2073 4.7195 35.8425C4.71216 35.4612 4.7965 35.0853 4.9615 34.7388C5.32126 34.021 5.91228 33.7658 6.46354 33.5276C6.49097 33.5158 6.5183 33.504 6.5455 33.4922C6.68913 33.4309 6.82976 33.3772 6.96561 33.3253C7.37077 33.1706 7.73344 33.0321 8.00667 32.7588C8.17742 32.5672 8.34012 32.343 8.50901 32.1103C8.72634 31.8108 8.95394 31.4971 9.22217 31.2207C9.27154 31.1251 9.34021 31.0408 9.42383 30.9732C9.19833 29.4973 9.44033 27.9353 9.95 26.41C11.0298 23.1632 13.3068 20.0483 14.9293 18.1215C16.3043 16.1653 16.715 14.5868 16.8543 12.5848C16.8738 12.1381 16.8352 11.5454 16.7908 10.8636C16.5636 7.37332 16.1844 1.54924 22.666 1.0385ZM24.5397 7.2425H24.5158C24.1226 7.24289 23.7402 7.3698 23.4268 7.60733C23.065 7.83891 22.7883 8.18188 22.6385 8.5845C22.4431 9.02748 22.3491 9.50854 22.3635 9.9925V10.0292C22.367 10.1519 22.378 10.2744 22.3965 10.3958C22.582 10.4694 22.8174 10.5436 23.0524 10.6176C23.2099 10.6673 23.3673 10.7169 23.5093 10.7662C23.4873 10.6048 23.4763 10.4398 23.4727 10.2767V10.2418C23.4845 9.98963 23.5403 9.74144 23.6377 9.5085C23.7102 9.27639 23.8394 9.06596 24.0135 8.89617C24.1712 8.70917 24.3233 8.65417 24.4938 8.65417H24.5232C24.7047 8.65417 24.8557 8.77281 25.0081 8.89261L25.0127 8.89617C25.0488 8.95476 25.0822 9.00626 25.1132 9.0541C25.2112 9.20535 25.2855 9.32003 25.3482 9.50667C25.4263 9.7431 25.4641 9.99101 25.46 10.24V10.2767C25.449 10.5297 25.3958 10.779 25.2987 11.0137C25.2573 11.0863 25.1757 11.1644 25.0976 11.2393C25.0476 11.2872 24.9989 11.3337 24.9632 11.3767C25.1009 11.4051 25.2359 11.4456 25.3665 11.4977C25.4774 11.5867 25.5956 11.6303 25.7223 11.6771C25.7757 11.6968 25.8306 11.717 25.8872 11.7415C25.9426 11.7634 25.9966 11.7892 26.0485 11.8185C26.2203 11.6435 26.3534 11.4342 26.439 11.2043C26.6168 10.7958 26.7103 10.3555 26.714 9.91L26.7213 9.954C26.7222 9.96709 26.7246 9.98002 26.7287 9.9925V9.8C26.7287 9.81833 26.7259 9.83667 26.7232 9.855C26.7204 9.87333 26.7177 9.89167 26.7177 9.91C26.703 9.42417 26.6058 9.0575 26.4133 8.58267C26.2153 8.21417 25.9587 7.853 25.6103 7.6055C25.2657 7.35617 24.9302 7.2425 24.5397 7.2425ZM19.1515 7.35067H19.0855C18.7958 7.35067 18.5538 7.4735 18.3192 7.71733C18.0782 8.00351 17.9013 8.33795 17.8003 8.69817C17.6731 9.09315 17.6233 9.50898 17.6537 9.92283C17.668 10.345 17.7645 10.7604 17.9378 11.1457C18.0826 11.4065 18.2514 11.6532 18.442 11.8827C18.5311 11.8615 18.6136 11.8187 18.6822 11.758C18.748 11.6843 18.8058 11.6467 18.8698 11.6049C18.9109 11.578 18.9547 11.5495 19.0048 11.5087C18.9792 11.4977 18.9608 11.4812 18.9425 11.4647C18.8178 11.34 18.7225 11.219 18.6382 10.9733C18.6295 10.9464 18.6213 10.9211 18.6135 10.8969C18.5496 10.7 18.5111 10.5814 18.4915 10.361V10.3335C18.4698 10.1309 18.4841 9.92611 18.5337 9.7285C18.5607 9.54657 18.6367 9.37544 18.7537 9.2335C18.8563 9.06483 18.9645 9.0025 19.0947 8.9915H19.1332C19.1941 8.98752 19.2552 8.99587 19.3129 9.01602C19.3705 9.03618 19.4235 9.06775 19.4687 9.10883C19.6109 9.24277 19.7158 9.41148 19.773 9.59833C19.7858 9.63881 19.7979 9.67596 19.8092 9.71087C19.8662 9.88628 19.905 10.0055 19.9233 10.2088V10.2363C19.9417 10.3958 19.9398 10.5608 19.9178 10.7258C19.9701 10.6973 20.0226 10.6672 20.0762 10.6365C20.2463 10.5391 20.4264 10.4359 20.6383 10.3592C20.6632 10.3536 20.6875 10.3458 20.7126 10.3378C20.7375 10.3298 20.7631 10.3216 20.7905 10.3152V10.1685C20.8052 10.0475 20.807 9.9265 20.7942 9.68083V9.6735C20.7703 9.184 20.6787 8.8155 20.5137 8.45067C20.367 8.12617 20.1507 7.83467 19.883 7.59817C19.6465 7.43867 19.4118 7.35067 19.1515 7.35067ZM23.8265 11.2098C22.941 10.5975 22.2058 10.4783 21.5972 10.4783H21.599C21.2837 10.4783 20.9995 10.5315 20.7447 10.5975C20.0058 10.8377 19.5163 11.329 19.2065 11.6993V11.7048H19.2028C19.1423 11.758 19.0708 11.8093 18.8802 11.945C18.8088 11.99 18.7236 12.0537 18.623 12.1287C18.4574 12.2523 18.2501 12.407 17.9947 12.561C17.6317 12.7993 17.5125 13.1697 17.6408 13.661C17.7692 14.024 18.1652 14.5117 18.8985 14.9627H18.9077V14.9718C19.1865 15.1208 19.4099 15.3135 19.6231 15.4973C19.7589 15.6145 19.8905 15.728 20.0297 15.8243C20.2199 15.9557 20.4169 16.0769 20.62 16.1873C20.8828 16.2829 21.1621 16.3246 21.4413 16.3102C22.2045 16.3552 22.7698 16.0785 23.269 15.8342L23.2967 15.8207C23.5576 15.695 23.7982 15.5366 24.0381 15.3788C24.2601 15.2327 24.4814 15.0871 24.7175 14.9682V14.9645C25.7203 14.5997 26.4408 13.9892 26.6663 13.4208C26.7229 13.2834 26.7496 13.1354 26.7445 12.9868C26.7394 12.8383 26.7028 12.6925 26.637 12.5592V12.7993C26.5032 12.5555 26.2282 12.3172 25.7607 12.0678H25.7552C25.6086 12.0127 25.4746 11.963 25.3509 11.9171C24.6553 11.6593 24.2825 11.5211 23.8265 11.2098ZM29.9113 22.6058C28.9232 20.7762 27.3868 17.0032 26.7305 14.4053H26.7287C26.3455 14.9517 25.6708 15.4412 24.8147 15.6887H24.8055C24.5824 15.7556 24.3538 15.8976 24.104 16.0528C23.9021 16.1782 23.6865 16.3122 23.4488 16.422C22.9593 16.6677 22.3763 16.9133 21.621 16.9133C21.5616 16.9133 21.5005 16.9086 21.435 16.9035L21.4193 16.9023C20.6878 16.9023 20.1983 16.6567 19.8133 16.2882C19.626 16.1704 19.4595 16.0231 19.2918 15.8748C19.115 15.7184 18.9368 15.5608 18.7317 15.4357C18.6433 15.3534 18.4753 15.2449 18.3474 15.1624C18.2843 15.1216 18.2309 15.0872 18.2018 15.0653C18.0598 17.7587 16.5369 21.0396 15.4344 23.4147C15.2131 23.8914 15.0087 24.3316 14.8358 24.7233C14.1222 26.3938 13.7202 28.1808 13.6497 29.996C11.7833 27.5082 13.1473 24.3072 13.8733 22.9303C14.6892 21.3922 14.8175 21.0255 14.6213 21.1447C13.8862 22.3418 12.7348 24.2485 12.2857 26.2102C12.051 27.2368 12.0107 28.247 12.3132 29.226C12.6138 30.1903 13.2665 31.052 14.4215 31.7853C15.9927 32.7497 17.067 33.7177 17.6995 34.5738C18.332 35.4282 18.53 36.2165 18.332 36.706C18.2262 36.9767 18.02 37.196 17.7563 37.3183C17.5235 37.3862 17.2375 37.4412 16.9038 37.4412C17.1014 37.6184 17.2714 37.8241 17.408 38.0517C17.694 38.345 17.9416 38.6733 18.145 39.0288C21.3863 41.2362 25.1997 40.3818 27.9497 38.4165C27.9605 38.3792 27.9714 38.3419 27.9822 38.3047C28.2443 37.4049 28.4993 36.5295 28.5345 35.9415V35.936C28.5987 34.6288 28.672 33.4867 28.9103 32.5095C29.1505 31.5598 29.5758 30.8247 30.3642 30.3333C30.4616 30.318 30.56 30.2827 30.6563 30.2481C30.6869 30.2371 30.7173 30.2262 30.7473 30.216C30.7558 30.0996 30.7642 30.0546 30.7769 29.9868C30.778 29.9809 30.7792 29.9748 30.7803 29.9685C31.0077 28.5 32.3478 28.3827 34.0253 29.116C35.6442 29.8475 36.2547 30.5038 35.9778 31.36H36.0072C36.0438 31.36 36.0805 31.3594 36.1172 31.3588C36.1905 31.3576 36.2638 31.3563 36.3372 31.36V31.4388C36.6727 30.3407 35.9742 29.6 34.0822 28.621C33.9694 28.6097 33.8595 28.5631 33.7512 28.5171C33.7362 28.5108 33.7213 28.5044 33.7063 28.4982C33.9612 27.4605 33.9062 26.4173 33.6678 25.4365C33.1527 23.264 31.7318 21.361 30.6502 20.382C30.4503 20.382 30.4723 20.6295 30.8757 20.9962C31.8712 21.911 34.0565 25.2037 32.8722 28.2672C32.5367 28.1828 32.2177 28.1407 31.9317 28.1498C31.4788 25.6473 30.4357 23.5848 29.9113 22.6058ZM32.3533 33.3528C31.3652 33.1108 30.8042 31.9283 30.7363 30.8283V30.832L30.6538 30.8723C30.0433 31.2152 29.6987 31.8238 29.4787 32.6763C29.2605 33.5545 29.189 34.693 29.1212 36.002C29.0756 36.7223 28.8292 37.5563 28.5746 38.4181C28.4709 38.7694 28.3658 39.1252 28.2723 39.4798C27.9497 40.699 27.7847 41.8448 28.1697 42.5782L28.1788 42.5837C28.7967 43.8633 29.8472 44.3272 31.0645 44.23C32.2855 44.1365 33.6642 43.3977 34.7972 42.0465C35.7047 40.9513 36.9722 40.3422 38.0484 39.8251C38.5178 39.5996 38.9508 39.3915 39.3017 39.1682C39.8755 38.8033 40.1872 38.5595 40.2147 38.0792L40.2202 38.0993V38.0663L40.2147 38.0792C40.2312 37.6502 39.9397 36.9553 39.0487 35.9892C38.6065 35.4932 38.4694 34.8431 38.324 34.1536C38.3156 34.1142 38.3073 34.0745 38.2988 34.0348C38.1412 33.4005 37.9633 32.7937 37.582 32.4288L37.5765 32.4233C37.0815 31.9503 36.6012 31.9192 36.0237 31.932L35.6368 31.9503C34.9823 32.7423 33.4313 33.5985 32.3533 33.3528ZM10.929 30.9182H10.9107C10.3918 30.9182 10.0435 31.1657 9.69517 31.5342C9.5004 31.7412 9.31978 31.9881 9.13328 32.2431C8.92831 32.5233 8.71624 32.8132 8.4705 33.0705V33.0742H8.46683C8.1027 33.429 7.67066 33.5917 7.25569 33.7479C7.0961 33.808 6.93904 33.8671 6.78933 33.9358C6.72367 33.9655 6.65958 33.9934 6.59713 34.0206C6.14698 34.2164 5.78193 34.3753 5.52433 34.913C5.29333 35.3347 5.34467 35.9012 5.4455 36.6363C5.45614 36.7047 5.46735 36.774 5.47868 36.844C5.57861 37.4618 5.68765 38.136 5.495 38.686L5.49133 38.6915V38.6988C5.05867 39.8502 5.06417 40.5872 5.26583 40.9538C5.473 41.3205 5.91483 41.5662 6.59133 41.6872C6.96665 41.7547 7.39979 41.7941 7.86764 41.8367C9.08866 41.9478 10.5461 42.0804 11.8292 42.7908C13.4333 43.6452 15.0375 43.889 16.22 43.6415C17.4025 43.3738 18.178 42.6332 18.2825 41.2692V41.2582C18.3577 40.4533 17.7417 39.4762 16.946 38.3798C16.7146 38.075 16.4714 37.7766 16.2319 37.4828C15.6462 36.764 15.0824 36.0723 14.7662 35.3787L14.7607 35.3732L13.0923 32.3225C12.5112 31.5543 11.9062 31.0447 11.2168 30.9438C11.1215 30.9273 11.0262 30.9182 10.929 30.9182ZM23.5083 14.5427C23.6897 14.4504 23.8657 14.3609 24.0355 14.2825L24.0337 14.2843C24.4698 14.0202 24.892 13.7339 25.2987 13.4263C25.6305 13.0633 25.8028 12.847 25.5682 12.8177C25.4293 12.8177 25.3757 12.8992 25.2985 13.0166C25.2433 13.1007 25.176 13.2031 25.0567 13.3072C24.8433 13.4469 24.6017 13.6265 24.3669 13.8009C24.1922 13.9307 24.0212 14.0577 23.8687 14.1633C23.2362 14.5282 22.1948 15.0177 21.3057 15.0177C20.4161 15.0177 19.7068 14.5318 19.1721 14.1656L19.1662 14.1615C19.0678 14.0713 18.976 13.9809 18.8905 13.8966C18.7447 13.753 18.6171 13.6272 18.5062 13.551C18.4612 13.5086 18.4274 13.4544 18.394 13.4007C18.332 13.3013 18.2711 13.2034 18.1413 13.1843C18.013 13.1843 17.9763 13.5492 18.277 13.7948C18.3752 13.8656 18.4936 13.9772 18.6302 14.106C18.7307 14.2008 18.8412 14.3049 18.9608 14.409C19.5292 14.7738 20.3138 15.2633 21.3075 15.2633C22.0911 15.2633 22.8372 14.8839 23.5083 14.5427ZM22.0518 11.34V11.3803C22.0735 11.4531 22.1637 11.4663 22.2486 11.4788C22.2856 11.4842 22.3217 11.4895 22.3507 11.4995C22.3795 11.5142 22.4061 11.5324 22.4323 11.5502C22.4875 11.5879 22.5407 11.6242 22.6092 11.6242C22.7008 11.6242 22.8457 11.593 22.8567 11.5032C22.875 11.3785 22.6972 11.2557 22.5817 11.2557C22.435 11.1988 22.2407 11.1695 22.105 11.2483C22.0757 11.263 22.0408 11.3033 22.0518 11.34ZM20.8356 11.482C20.9223 11.4694 21.0157 11.4557 21.0417 11.3803V11.3767H21.0362V11.34C21.0472 11.3033 21.016 11.2648 20.9812 11.2483C20.8437 11.1713 20.653 11.2007 20.5063 11.2575C20.3927 11.2575 20.213 11.3803 20.2313 11.5013C20.2423 11.5893 20.389 11.626 20.4807 11.626C20.5494 11.626 20.6048 11.588 20.6612 11.5495C20.686 11.5325 20.711 11.5154 20.7373 11.5013C20.7656 11.4923 20.8 11.4872 20.8356 11.482Z"
-							fill="white"
-						/>
-					</svg>
-					<svg
-						v-if="os === 'Linux'"
-						class="dark-icon"
-						role="img"
-						viewBox="0 0 24 24"
-						xmlns="http://www.w3.org/2000/svg"
-					>
-						<path
-							d="M12.504 0c-.155 0-.315.008-.48.021-4.226.333-3.105 4.807-3.17 6.298-.076 1.092-.3 1.953-1.05 3.02-.885 1.051-2.127 2.75-2.716 4.521-.278.832-.41 1.684-.287 2.489a.424.424 0 00-.11.135c-.26.268-.45.6-.663.839-.199.199-.485.267-.797.4-.313.136-.658.269-.864.68-.09.189-.136.394-.132.602 0 .199.027.4.055.536.058.399.116.728.04.97-.249.68-.28 1.145-.106 1.484.174.334.535.47.94.601.81.2 1.91.135 2.774.6.926.466 1.866.67 2.616.47.526-.116.97-.464 1.208-.946.587-.003 1.23-.269 2.26-.334.699-.058 1.574.267 2.577.2.025.134.063.198.114.333l.003.003c.391.778 1.113 1.132 1.884 1.071.771-.06 1.592-.536 2.257-1.306.631-.765 1.683-1.084 2.378-1.503.348-.199.629-.469.649-.853.023-.4-.2-.811-.714-1.376v-.097l-.003-.003c-.17-.2-.25-.535-.338-.926-.085-.401-.182-.786-.492-1.046h-.003c-.059-.054-.123-.067-.188-.135a.357.357 0 00-.19-.064c.431-1.278.264-2.55-.173-3.694-.533-1.41-1.465-2.638-2.175-3.483-.796-1.005-1.576-1.957-1.56-3.368.026-2.152.236-6.133-3.544-6.139zm.529 3.405h.013c.213 0 .396.062.584.198.19.135.33.332.438.533.105.259.158.459.166.724 0-.02.006-.04.006-.06v.105a.086.086 0 01-.004-.021l-.004-.024a1.807 1.807 0 01-.15.706.953.953 0 01-.213.335.71.71 0 00-.088-.042c-.104-.045-.198-.064-.284-.133a1.312 1.312 0 00-.22-.066c.05-.06.146-.133.183-.198.053-.128.082-.264.088-.402v-.02a1.21 1.21 0 00-.061-.4c-.045-.134-.101-.2-.183-.333-.084-.066-.167-.132-.267-.132h-.016c-.093 0-.176.03-.262.132a.8.8 0 00-.205.334 1.18 1.18 0 00-.09.4v.019c.002.089.008.179.02.267-.193-.067-.438-.135-.607-.202a1.635 1.635 0 01-.018-.2v-.02a1.772 1.772 0 01.15-.768c.082-.22.232-.406.43-.533a.985.985 0 01.594-.2zm-2.962.059h.036c.142 0 .27.048.399.135.146.129.264.288.344.465.09.199.14.4.153.667v.004c.007.134.006.2-.002.266v.08c-.03.007-.056.018-.083.024-.152.055-.274.135-.393.2.012-.09.013-.18.003-.267v-.015c-.012-.133-.04-.2-.082-.333a.613.613 0 00-.166-.267.248.248 0 00-.183-.064h-.021c-.071.006-.13.04-.186.132a.552.552 0 00-.12.27.944.944 0 00-.023.33v.015c.012.135.037.2.08.334.046.134.098.2.166.268.01.009.02.018.034.024-.07.057-.117.07-.176.136a.304.304 0 01-.131.068 2.62 2.62 0 01-.275-.402 1.772 1.772 0 01-.155-.667 1.759 1.759 0 01.08-.668 1.43 1.43 0 01.283-.535c.128-.133.26-.2.418-.2zm1.37 1.706c.332 0 .733.065 1.216.399.293.2.523.269 1.052.468h.003c.255.136.405.266.478.399v-.131a.571.571 0 01.016.47c-.123.31-.516.643-1.063.842v.002c-.268.135-.501.333-.775.465-.276.135-.588.292-1.012.267a1.139 1.139 0 01-.448-.067 3.566 3.566 0 01-.322-.198c-.195-.135-.363-.332-.612-.465v-.005h-.005c-.4-.246-.616-.512-.686-.71-.07-.268-.005-.47.193-.6.224-.135.38-.271.483-.336.104-.074.143-.102.176-.131h.002v-.003c.169-.202.436-.47.839-.601.139-.036.294-.065.466-.065zm2.8 2.142c.358 1.417 1.196 3.475 1.735 4.473.286.534.855 1.659 1.102 3.024.156-.005.33.018.513.064.646-1.671-.546-3.467-1.089-3.966-.22-.2-.232-.335-.123-.335.59.534 1.365 1.572 1.646 2.757.13.535.16 1.104.021 1.67.067.028.135.06.205.067 1.032.534 1.413.938 1.23 1.537v-.043c-.06-.003-.12 0-.18 0h-.016c.151-.467-.182-.825-1.065-1.224-.915-.4-1.646-.336-1.77.465-.008.043-.013.066-.018.135-.068.023-.139.053-.209.064-.43.268-.662.669-.793 1.187-.13.533-.17 1.156-.205 1.869v.003c-.02.334-.17.838-.319 1.35-1.5 1.072-3.58 1.538-5.348.334a2.645 2.645 0 00-.402-.533 1.45 1.45 0 00-.275-.333c.182 0 .338-.03.465-.067a.615.615 0 00.314-.334c.108-.267 0-.697-.345-1.163-.345-.467-.931-.995-1.788-1.521-.63-.4-.986-.87-1.15-1.396-.165-.534-.143-1.085-.015-1.645.245-1.07.873-2.11 1.274-2.763.107-.065.037.135-.408.974-.396.751-1.14 2.497-.122 3.854a8.123 8.123 0 01.647-2.876c.564-1.278 1.743-3.504 1.836-5.268.048.036.217.135.289.202.218.133.38.333.59.465.21.201.477.335.876.335.039.003.075.006.11.006.412 0 .73-.134.997-.268.29-.134.52-.334.74-.4h.005c.467-.135.835-.402 1.044-.7zm2.185 8.958c.037.6.343 1.245.882 1.377.588.134 1.434-.333 1.791-.765l.211-.01c.315-.007.577.01.847.268l.003.003c.208.199.305.53.391.876.085.4.154.78.409 1.066.486.527.645.906.636 1.14l.003-.007v.018l-.003-.012c-.015.262-.185.396-.498.595-.63.401-1.746.712-2.457 1.57-.618.737-1.37 1.14-2.036 1.191-.664.053-1.237-.2-1.574-.898l-.005-.003c-.21-.4-.12-1.025.056-1.69.176-.668.428-1.344.463-1.897.037-.714.076-1.335.195-1.814.12-.465.308-.797.641-.984l.045-.022zm-10.814.049h.01c.053 0 .105.005.157.014.376.055.706.333 1.023.752l.91 1.664.003.003c.243.533.754 1.064 1.189 1.637.434.598.77 1.131.729 1.57v.006c-.057.744-.48 1.148-1.125 1.294-.645.135-1.52.002-2.395-.464-.968-.536-2.118-.469-2.857-.602-.369-.066-.61-.2-.723-.4-.11-.2-.113-.602.123-1.23v-.004l.002-.003c.117-.334.03-.752-.027-1.118-.055-.401-.083-.71.043-.94.16-.334.396-.4.69-.533.294-.135.64-.202.915-.47h.002v-.002c.256-.268.445-.601.668-.838.19-.201.38-.336.663-.336zm7.159-9.074c-.435.201-.945.535-1.488.535-.542 0-.97-.267-1.28-.466-.154-.134-.28-.268-.373-.335-.164-.134-.144-.333-.074-.333.109.016.129.134.199.2.096.066.215.2.36.333.292.2.68.467 1.167.467.485 0 1.053-.267 1.398-.466.195-.135.445-.334.648-.467.156-.136.149-.267.279-.267.128.016.034.134-.147.332a8.097 8.097 0 01-.69.468zm-1.082-1.583V5.64c-.006-.02.013-.042.029-.05.074-.043.18-.027.26.004.063 0 .16.067.15.135-.006.049-.085.066-.135.066-.055 0-.092-.043-.141-.068-.052-.018-.146-.008-.163-.065zm-.551 0c-.02.058-.113.049-.166.066-.047.025-.086.068-.14.068-.05 0-.13-.02-.136-.068-.01-.066.088-.133.15-.133.08-.031.184-.047.259-.005.019.009.036.03.03.05v.02h.003z"
-						/>
-					</svg>
-					<svg
-						v-else-if="os === 'Windows'"
-						xmlns="http://www.w3.org/2000/svg"
-						viewBox="0 0 4875 4875"
-						fill="currentColor"
-					>
-						<path
-							d="M0 0h2311v2310H0zm2564 0h2311v2310H2564zM0 2564h2311v2311H0zm2564 0h2311v2311H2564"
-						/>
-					</svg>
-					<svg
-						v-else-if="os === 'Mac'"
-						xmlns="http://www.w3.org/2000/svg"
-						width="44"
-						height="44"
-						viewBox="0 0 44 44"
-						fill="none"
-					>
-						<path
-							d="M33.5752 37.7889C31.3308 39.8664 28.8802 39.5384 26.5212 38.5543C24.0248 37.5484 21.7345 37.5046 19.1007 38.5543C15.8027 39.9102 14.0621 39.5165 12.0924 37.7889C0.915868 26.789 2.56487 10.0377 15.253 9.42536C18.3449 9.57844 20.4978 11.0436 22.3071 11.1748C25.0096 10.65 27.5976 9.14107 30.4834 9.33789C33.9417 9.60031 36.5526 10.9124 38.2703 13.2742C31.1247 17.3637 32.8195 26.3516 39.3697 28.8665C38.0642 32.1468 36.3694 35.4052 33.5523 37.8108L33.5752 37.7889ZM22.078 9.29415C21.7345 4.41745 25.8799 0.393635 30.6437 0C31.3079 5.6421 25.2844 9.84086 22.078 9.29415Z"
+				<ButtonStyled v-if="os" color="brand" size="large">
+					<button rel="noopener nofollow" @click="handleDownload">
+						<svg
+							v-if="os === 'Linux'"
+							class="light-icon"
+							width="45"
+							height="46"
+							viewBox="0 0 45 46"
+							xmlns="http://www.w3.org/2000/svg"
+						>
+							<path
+								id="Subtract"
+								fill-rule="evenodd"
+								clip-rule="evenodd"
+								d="M23.5477 0H23.5461C23.2284 0 22.9077 0.0163711 22.5876 0.0415902C20.4638 0.208942 18.8991 0.910133 17.7996 2.0082C16.7124 3.09404 16.1751 4.47323 15.9172 5.82868C15.6602 7.18017 15.6685 8.57463 15.7244 9.76049C15.7464 10.2267 15.7737 10.6424 15.7981 11.0129L15.7981 11.0129C15.8393 11.6392 15.8719 12.1361 15.856 12.5288C15.7269 14.3647 15.3652 15.7513 14.1358 17.5116C12.4894 19.4715 10.1353 22.6851 9.00147 26.0938C8.50987 27.5652 8.23247 29.1259 8.37804 30.6595C8.14194 30.9205 7.94151 31.1909 7.77396 31.4209L7.69935 31.5235C7.53577 31.7486 7.41036 31.9212 7.28343 32.0672C7.22885 32.1165 7.13829 32.1747 6.95723 32.2529C6.85646 32.2965 6.74665 32.3386 6.60714 32.3918L6.60229 32.3937L6.60063 32.3943C6.4689 32.4446 6.31402 32.5038 6.15349 32.5722L6.14713 32.575C6.11461 32.5891 6.08029 32.6038 6.04439 32.6191L6.04194 32.6201C5.49857 32.8521 4.5956 33.2374 4.06765 34.2907L4.06313 34.2998L4.05878 34.3089C3.83111 34.787 3.71086 35.3126 3.71965 35.8518C3.72044 36.2784 3.77526 36.6973 3.83488 36.9965L3.8573 37.1494C3.90153 37.4502 3.93607 37.685 3.9521 37.8975C3.96952 38.1284 3.9557 38.2416 3.94333 38.2911C3.47501 39.5811 3.29341 40.7747 3.80981 41.7808L3.81261 41.7862C4.34311 42.8045 5.41437 43.1509 6.09597 43.3713L6.14873 43.3884L6.1831 43.3968C6.76559 43.5407 7.45296 43.6219 8.08651 43.6967L8.08657 43.6967C8.33286 43.7258 8.57102 43.7539 8.79172 43.7844C9.65223 43.9032 10.4057 44.0681 11.0346 44.4066L11.0467 44.4131L11.0589 44.4193C12.8487 45.3199 14.8309 45.8073 16.5413 45.3594C17.5947 45.1214 18.5098 44.4944 19.1114 43.6161C19.5314 43.5681 19.9501 43.481 20.3513 43.3976L20.4887 43.3691C21.1456 43.2333 21.8552 43.0939 22.7255 43.039L22.7353 43.0384L22.7452 43.0376C23.2171 42.9984 23.7676 43.0823 24.5478 43.2012L24.6654 43.2192C25.2572 43.3092 25.9398 43.4072 26.6797 43.4223L26.7366 43.5729L26.7865 43.6228C27.7132 45.3272 29.3865 46.1223 31.1344 45.9841C32.8861 45.8473 34.6161 44.7911 35.9501 43.2465L35.9575 43.2379L35.9647 43.2291C36.4178 42.6799 37.0511 42.2572 37.7983 41.8603C38.1016 41.6992 38.4052 41.5515 38.7175 41.3996L38.7179 41.3994L38.936 41.2932C39.3111 41.1099 39.7022 40.9143 40.0596 40.6996C40.783 40.2838 41.6765 39.5491 41.7413 38.3282C41.8014 37.2663 41.2531 36.3256 40.4338 35.3719V35.1588L40.1744 34.8993C40.1374 34.8477 40.0795 34.7411 40.0113 34.5353C39.934 34.302 39.8672 34.0188 39.7856 33.6562C39.6368 32.9545 39.4127 31.9102 38.5493 31.186L38.3995 31.0604C38.9576 28.7316 38.5908 26.4633 37.8259 24.46C36.7898 21.7201 34.9984 19.3692 33.6785 17.7973L33.6778 17.7965C32.1849 15.9116 31.019 14.4397 31.0434 12.2669C31.0453 12.1131 31.0478 11.9522 31.0504 11.7849C31.0801 9.87812 31.1226 7.15021 30.3612 4.83914C29.9387 3.55665 29.2488 2.33019 28.115 1.42642C26.9706 0.514298 25.4646 0.00304389 23.5477 0ZM22.666 1.0385C22.9685 1.01467 23.2618 1 23.546 1C30.2102 1.01058 30.1098 7.76032 30.0499 11.7866C30.0475 11.9472 30.0452 12.1035 30.0433 12.2548C30.0146 14.7849 31.382 16.51 32.8074 18.3084C32.8393 18.3487 32.8713 18.3891 32.9033 18.4295C34.205 19.9787 35.9137 22.23 36.8908 24.815C37.692 26.9123 37.9982 29.2443 37.208 31.5873C37.3329 31.5924 37.4538 31.6331 37.5563 31.7047C37.6223 31.7737 37.6877 31.8118 37.7513 31.8488C37.8026 31.8787 37.8527 31.908 37.901 31.9522H37.9065C38.4748 32.4288 38.6527 33.1347 38.8085 33.8698C38.9698 34.5867 39.1165 35.2008 39.4282 35.5675L39.4337 35.573V35.7508C40.376 36.7867 40.7848 37.5402 40.7427 38.2735C40.706 38.9775 40.1908 39.4725 39.5528 39.8373C39.1757 40.0647 38.7412 40.276 38.2863 40.4973C37.2045 41.0234 36.0076 41.6055 35.1932 42.5928C33.974 44.0045 32.4688 44.8772 31.0553 44.9872C29.6418 45.099 28.3182 44.45 27.6013 43.0237L27.5958 43.0182C27.5697 42.949 27.5454 42.89 27.523 42.8356C27.4653 42.6951 27.4199 42.5847 27.3868 42.4077C26.4008 42.4735 25.4823 42.3328 24.6448 42.2044C23.9204 42.0934 23.2567 41.9917 22.6623 42.041C21.6653 42.1039 20.8661 42.2696 20.1753 42.4127C19.5578 42.5407 19.027 42.6507 18.519 42.6533C18.0827 43.537 17.2687 44.175 16.3043 44.3877C14.9293 44.7543 13.206 44.3803 11.5083 43.526C10.4773 42.9711 9.26303 42.8279 8.13135 42.6944C7.52434 42.6228 6.9411 42.554 6.42267 42.426C5.68017 42.1858 5.01833 41.9365 4.69933 41.3242C4.38033 40.7027 4.43716 39.8502 4.89366 38.6035C5.02207 38.1946 4.94184 37.6503 4.84524 36.995C4.83702 36.9392 4.82868 36.8826 4.82033 36.8252C4.769 36.5758 4.7195 36.2073 4.7195 35.8425C4.71216 35.4612 4.7965 35.0853 4.9615 34.7388C5.32126 34.021 5.91228 33.7658 6.46354 33.5276C6.49097 33.5158 6.5183 33.504 6.5455 33.4922C6.68913 33.4309 6.82976 33.3772 6.96561 33.3253C7.37077 33.1706 7.73344 33.0321 8.00667 32.7588C8.17742 32.5672 8.34012 32.343 8.50901 32.1103C8.72634 31.8108 8.95394 31.4971 9.22217 31.2207C9.27154 31.1251 9.34021 31.0408 9.42383 30.9732C9.19833 29.4973 9.44033 27.9353 9.95 26.41C11.0298 23.1632 13.3068 20.0483 14.9293 18.1215C16.3043 16.1653 16.715 14.5868 16.8543 12.5848C16.8738 12.1381 16.8352 11.5454 16.7908 10.8636C16.5636 7.37332 16.1844 1.54924 22.666 1.0385ZM24.5397 7.2425H24.5158C24.1226 7.24289 23.7402 7.3698 23.4268 7.60733C23.065 7.83891 22.7883 8.18188 22.6385 8.5845C22.4431 9.02748 22.3491 9.50854 22.3635 9.9925V10.0292C22.367 10.1519 22.378 10.2744 22.3965 10.3958C22.582 10.4694 22.8174 10.5436 23.0524 10.6176C23.2099 10.6673 23.3673 10.7169 23.5093 10.7662C23.4873 10.6048 23.4763 10.4398 23.4727 10.2767V10.2418C23.4845 9.98963 23.5403 9.74144 23.6377 9.5085C23.7102 9.27639 23.8394 9.06596 24.0135 8.89617C24.1712 8.70917 24.3233 8.65417 24.4938 8.65417H24.5232C24.7047 8.65417 24.8557 8.77281 25.0081 8.89261L25.0127 8.89617C25.0488 8.95476 25.0822 9.00626 25.1132 9.0541C25.2112 9.20535 25.2855 9.32003 25.3482 9.50667C25.4263 9.7431 25.4641 9.99101 25.46 10.24V10.2767C25.449 10.5297 25.3958 10.779 25.2987 11.0137C25.2573 11.0863 25.1757 11.1644 25.0976 11.2393C25.0476 11.2872 24.9989 11.3337 24.9632 11.3767C25.1009 11.4051 25.2359 11.4456 25.3665 11.4977C25.4774 11.5867 25.5956 11.6303 25.7223 11.6771C25.7757 11.6968 25.8306 11.717 25.8872 11.7415C25.9426 11.7634 25.9966 11.7892 26.0485 11.8185C26.2203 11.6435 26.3534 11.4342 26.439 11.2043C26.6168 10.7958 26.7103 10.3555 26.714 9.91L26.7213 9.954C26.7222 9.96709 26.7246 9.98002 26.7287 9.9925V9.8C26.7287 9.81833 26.7259 9.83667 26.7232 9.855C26.7204 9.87333 26.7177 9.89167 26.7177 9.91C26.703 9.42417 26.6058 9.0575 26.4133 8.58267C26.2153 8.21417 25.9587 7.853 25.6103 7.6055C25.2657 7.35617 24.9302 7.2425 24.5397 7.2425ZM19.1515 7.35067H19.0855C18.7958 7.35067 18.5538 7.4735 18.3192 7.71733C18.0782 8.00351 17.9013 8.33795 17.8003 8.69817C17.6731 9.09315 17.6233 9.50898 17.6537 9.92283C17.668 10.345 17.7645 10.7604 17.9378 11.1457C18.0826 11.4065 18.2514 11.6532 18.442 11.8827C18.5311 11.8615 18.6136 11.8187 18.6822 11.758C18.748 11.6843 18.8058 11.6467 18.8698 11.6049C18.9109 11.578 18.9547 11.5495 19.0048 11.5087C18.9792 11.4977 18.9608 11.4812 18.9425 11.4647C18.8178 11.34 18.7225 11.219 18.6382 10.9733C18.6295 10.9464 18.6213 10.9211 18.6135 10.8969C18.5496 10.7 18.5111 10.5814 18.4915 10.361V10.3335C18.4698 10.1309 18.4841 9.92611 18.5337 9.7285C18.5607 9.54657 18.6367 9.37544 18.7537 9.2335C18.8563 9.06483 18.9645 9.0025 19.0947 8.9915H19.1332C19.1941 8.98752 19.2552 8.99587 19.3129 9.01602C19.3705 9.03618 19.4235 9.06775 19.4687 9.10883C19.6109 9.24277 19.7158 9.41148 19.773 9.59833C19.7858 9.63881 19.7979 9.67596 19.8092 9.71087C19.8662 9.88628 19.905 10.0055 19.9233 10.2088V10.2363C19.9417 10.3958 19.9398 10.5608 19.9178 10.7258C19.9701 10.6973 20.0226 10.6672 20.0762 10.6365C20.2463 10.5391 20.4264 10.4359 20.6383 10.3592C20.6632 10.3536 20.6875 10.3458 20.7126 10.3378C20.7375 10.3298 20.7631 10.3216 20.7905 10.3152V10.1685C20.8052 10.0475 20.807 9.9265 20.7942 9.68083V9.6735C20.7703 9.184 20.6787 8.8155 20.5137 8.45067C20.367 8.12617 20.1507 7.83467 19.883 7.59817C19.6465 7.43867 19.4118 7.35067 19.1515 7.35067ZM23.8265 11.2098C22.941 10.5975 22.2058 10.4783 21.5972 10.4783H21.599C21.2837 10.4783 20.9995 10.5315 20.7447 10.5975C20.0058 10.8377 19.5163 11.329 19.2065 11.6993V11.7048H19.2028C19.1423 11.758 19.0708 11.8093 18.8802 11.945C18.8088 11.99 18.7236 12.0537 18.623 12.1287C18.4574 12.2523 18.2501 12.407 17.9947 12.561C17.6317 12.7993 17.5125 13.1697 17.6408 13.661C17.7692 14.024 18.1652 14.5117 18.8985 14.9627H18.9077V14.9718C19.1865 15.1208 19.4099 15.3135 19.6231 15.4973C19.7589 15.6145 19.8905 15.728 20.0297 15.8243C20.2199 15.9557 20.4169 16.0769 20.62 16.1873C20.8828 16.2829 21.1621 16.3246 21.4413 16.3102C22.2045 16.3552 22.7698 16.0785 23.269 15.8342L23.2967 15.8207C23.5576 15.695 23.7982 15.5366 24.0381 15.3788C24.2601 15.2327 24.4814 15.0871 24.7175 14.9682V14.9645C25.7203 14.5997 26.4408 13.9892 26.6663 13.4208C26.7229 13.2834 26.7496 13.1354 26.7445 12.9868C26.7394 12.8383 26.7028 12.6925 26.637 12.5592V12.7993C26.5032 12.5555 26.2282 12.3172 25.7607 12.0678H25.7552C25.6086 12.0127 25.4746 11.963 25.3509 11.9171C24.6553 11.6593 24.2825 11.5211 23.8265 11.2098ZM29.9113 22.6058C28.9232 20.7762 27.3868 17.0032 26.7305 14.4053H26.7287C26.3455 14.9517 25.6708 15.4412 24.8147 15.6887H24.8055C24.5824 15.7556 24.3538 15.8976 24.104 16.0528C23.9021 16.1782 23.6865 16.3122 23.4488 16.422C22.9593 16.6677 22.3763 16.9133 21.621 16.9133C21.5616 16.9133 21.5005 16.9086 21.435 16.9035L21.4193 16.9023C20.6878 16.9023 20.1983 16.6567 19.8133 16.2882C19.626 16.1704 19.4595 16.0231 19.2918 15.8748C19.115 15.7184 18.9368 15.5608 18.7317 15.4357C18.6433 15.3534 18.4753 15.2449 18.3474 15.1624C18.2843 15.1216 18.2309 15.0872 18.2018 15.0653C18.0598 17.7587 16.5369 21.0396 15.4344 23.4147C15.2131 23.8914 15.0087 24.3316 14.8358 24.7233C14.1222 26.3938 13.7202 28.1808 13.6497 29.996C11.7833 27.5082 13.1473 24.3072 13.8733 22.9303C14.6892 21.3922 14.8175 21.0255 14.6213 21.1447C13.8862 22.3418 12.7348 24.2485 12.2857 26.2102C12.051 27.2368 12.0107 28.247 12.3132 29.226C12.6138 30.1903 13.2665 31.052 14.4215 31.7853C15.9927 32.7497 17.067 33.7177 17.6995 34.5738C18.332 35.4282 18.53 36.2165 18.332 36.706C18.2262 36.9767 18.02 37.196 17.7563 37.3183C17.5235 37.3862 17.2375 37.4412 16.9038 37.4412C17.1014 37.6184 17.2714 37.8241 17.408 38.0517C17.694 38.345 17.9416 38.6733 18.145 39.0288C21.3863 41.2362 25.1997 40.3818 27.9497 38.4165C27.9605 38.3792 27.9714 38.3419 27.9822 38.3047C28.2443 37.4049 28.4993 36.5295 28.5345 35.9415V35.936C28.5987 34.6288 28.672 33.4867 28.9103 32.5095C29.1505 31.5598 29.5758 30.8247 30.3642 30.3333C30.4616 30.318 30.56 30.2827 30.6563 30.2481C30.6869 30.2371 30.7173 30.2262 30.7473 30.216C30.7558 30.0996 30.7642 30.0546 30.7769 29.9868C30.778 29.9809 30.7792 29.9748 30.7803 29.9685C31.0077 28.5 32.3478 28.3827 34.0253 29.116C35.6442 29.8475 36.2547 30.5038 35.9778 31.36H36.0072C36.0438 31.36 36.0805 31.3594 36.1172 31.3588C36.1905 31.3576 36.2638 31.3563 36.3372 31.36V31.4388C36.6727 30.3407 35.9742 29.6 34.0822 28.621C33.9694 28.6097 33.8595 28.5631 33.7512 28.5171C33.7362 28.5108 33.7213 28.5044 33.7063 28.4982C33.9612 27.4605 33.9062 26.4173 33.6678 25.4365C33.1527 23.264 31.7318 21.361 30.6502 20.382C30.4503 20.382 30.4723 20.6295 30.8757 20.9962C31.8712 21.911 34.0565 25.2037 32.8722 28.2672C32.5367 28.1828 32.2177 28.1407 31.9317 28.1498C31.4788 25.6473 30.4357 23.5848 29.9113 22.6058ZM32.3533 33.3528C31.3652 33.1108 30.8042 31.9283 30.7363 30.8283V30.832L30.6538 30.8723C30.0433 31.2152 29.6987 31.8238 29.4787 32.6763C29.2605 33.5545 29.189 34.693 29.1212 36.002C29.0756 36.7223 28.8292 37.5563 28.5746 38.4181C28.4709 38.7694 28.3658 39.1252 28.2723 39.4798C27.9497 40.699 27.7847 41.8448 28.1697 42.5782L28.1788 42.5837C28.7967 43.8633 29.8472 44.3272 31.0645 44.23C32.2855 44.1365 33.6642 43.3977 34.7972 42.0465C35.7047 40.9513 36.9722 40.3422 38.0484 39.8251C38.5178 39.5996 38.9508 39.3915 39.3017 39.1682C39.8755 38.8033 40.1872 38.5595 40.2147 38.0792L40.2202 38.0993V38.0663L40.2147 38.0792C40.2312 37.6502 39.9397 36.9553 39.0487 35.9892C38.6065 35.4932 38.4694 34.8431 38.324 34.1536C38.3156 34.1142 38.3073 34.0745 38.2988 34.0348C38.1412 33.4005 37.9633 32.7937 37.582 32.4288L37.5765 32.4233C37.0815 31.9503 36.6012 31.9192 36.0237 31.932L35.6368 31.9503C34.9823 32.7423 33.4313 33.5985 32.3533 33.3528ZM10.929 30.9182H10.9107C10.3918 30.9182 10.0435 31.1657 9.69517 31.5342C9.5004 31.7412 9.31978 31.9881 9.13328 32.2431C8.92831 32.5233 8.71624 32.8132 8.4705 33.0705V33.0742H8.46683C8.1027 33.429 7.67066 33.5917 7.25569 33.7479C7.0961 33.808 6.93904 33.8671 6.78933 33.9358C6.72367 33.9655 6.65958 33.9934 6.59713 34.0206C6.14698 34.2164 5.78193 34.3753 5.52433 34.913C5.29333 35.3347 5.34467 35.9012 5.4455 36.6363C5.45614 36.7047 5.46735 36.774 5.47868 36.844C5.57861 37.4618 5.68765 38.136 5.495 38.686L5.49133 38.6915V38.6988C5.05867 39.8502 5.06417 40.5872 5.26583 40.9538C5.473 41.3205 5.91483 41.5662 6.59133 41.6872C6.96665 41.7547 7.39979 41.7941 7.86764 41.8367C9.08866 41.9478 10.5461 42.0804 11.8292 42.7908C13.4333 43.6452 15.0375 43.889 16.22 43.6415C17.4025 43.3738 18.178 42.6332 18.2825 41.2692V41.2582C18.3577 40.4533 17.7417 39.4762 16.946 38.3798C16.7146 38.075 16.4714 37.7766 16.2319 37.4828C15.6462 36.764 15.0824 36.0723 14.7662 35.3787L14.7607 35.3732L13.0923 32.3225C12.5112 31.5543 11.9062 31.0447 11.2168 30.9438C11.1215 30.9273 11.0262 30.9182 10.929 30.9182ZM23.5083 14.5427C23.6897 14.4504 23.8657 14.3609 24.0355 14.2825L24.0337 14.2843C24.4698 14.0202 24.892 13.7339 25.2987 13.4263C25.6305 13.0633 25.8028 12.847 25.5682 12.8177C25.4293 12.8177 25.3757 12.8992 25.2985 13.0166C25.2433 13.1007 25.176 13.2031 25.0567 13.3072C24.8433 13.4469 24.6017 13.6265 24.3669 13.8009C24.1922 13.9307 24.0212 14.0577 23.8687 14.1633C23.2362 14.5282 22.1948 15.0177 21.3057 15.0177C20.4161 15.0177 19.7068 14.5318 19.1721 14.1656L19.1662 14.1615C19.0678 14.0713 18.976 13.9809 18.8905 13.8966C18.7447 13.753 18.6171 13.6272 18.5062 13.551C18.4612 13.5086 18.4274 13.4544 18.394 13.4007C18.332 13.3013 18.2711 13.2034 18.1413 13.1843C18.013 13.1843 17.9763 13.5492 18.277 13.7948C18.3752 13.8656 18.4936 13.9772 18.6302 14.106C18.7307 14.2008 18.8412 14.3049 18.9608 14.409C19.5292 14.7738 20.3138 15.2633 21.3075 15.2633C22.0911 15.2633 22.8372 14.8839 23.5083 14.5427ZM22.0518 11.34V11.3803C22.0735 11.4531 22.1637 11.4663 22.2486 11.4788C22.2856 11.4842 22.3217 11.4895 22.3507 11.4995C22.3795 11.5142 22.4061 11.5324 22.4323 11.5502C22.4875 11.5879 22.5407 11.6242 22.6092 11.6242C22.7008 11.6242 22.8457 11.593 22.8567 11.5032C22.875 11.3785 22.6972 11.2557 22.5817 11.2557C22.435 11.1988 22.2407 11.1695 22.105 11.2483C22.0757 11.263 22.0408 11.3033 22.0518 11.34ZM20.8356 11.482C20.9223 11.4694 21.0157 11.4557 21.0417 11.3803V11.3767H21.0362V11.34C21.0472 11.3033 21.016 11.2648 20.9812 11.2483C20.8437 11.1713 20.653 11.2007 20.5063 11.2575C20.3927 11.2575 20.213 11.3803 20.2313 11.5013C20.2423 11.5893 20.389 11.626 20.4807 11.626C20.5494 11.626 20.6048 11.588 20.6612 11.5495C20.686 11.5325 20.711 11.5154 20.7373 11.5013C20.7656 11.4923 20.8 11.4872 20.8356 11.482Z"
+								fill="white"
+							/>
+						</svg>
+						<svg
+							v-if="os === 'Linux'"
+							class="dark-icon"
+							role="img"
+							viewBox="0 0 24 24"
+							xmlns="http://www.w3.org/2000/svg"
+						>
+							<path
+								d="M12.504 0c-.155 0-.315.008-.48.021-4.226.333-3.105 4.807-3.17 6.298-.076 1.092-.3 1.953-1.05 3.02-.885 1.051-2.127 2.75-2.716 4.521-.278.832-.41 1.684-.287 2.489a.424.424 0 00-.11.135c-.26.268-.45.6-.663.839-.199.199-.485.267-.797.4-.313.136-.658.269-.864.68-.09.189-.136.394-.132.602 0 .199.027.4.055.536.058.399.116.728.04.97-.249.68-.28 1.145-.106 1.484.174.334.535.47.94.601.81.2 1.91.135 2.774.6.926.466 1.866.67 2.616.47.526-.116.97-.464 1.208-.946.587-.003 1.23-.269 2.26-.334.699-.058 1.574.267 2.577.2.025.134.063.198.114.333l.003.003c.391.778 1.113 1.132 1.884 1.071.771-.06 1.592-.536 2.257-1.306.631-.765 1.683-1.084 2.378-1.503.348-.199.629-.469.649-.853.023-.4-.2-.811-.714-1.376v-.097l-.003-.003c-.17-.2-.25-.535-.338-.926-.085-.401-.182-.786-.492-1.046h-.003c-.059-.054-.123-.067-.188-.135a.357.357 0 00-.19-.064c.431-1.278.264-2.55-.173-3.694-.533-1.41-1.465-2.638-2.175-3.483-.796-1.005-1.576-1.957-1.56-3.368.026-2.152.236-6.133-3.544-6.139zm.529 3.405h.013c.213 0 .396.062.584.198.19.135.33.332.438.533.105.259.158.459.166.724 0-.02.006-.04.006-.06v.105a.086.086 0 01-.004-.021l-.004-.024a1.807 1.807 0 01-.15.706.953.953 0 01-.213.335.71.71 0 00-.088-.042c-.104-.045-.198-.064-.284-.133a1.312 1.312 0 00-.22-.066c.05-.06.146-.133.183-.198.053-.128.082-.264.088-.402v-.02a1.21 1.21 0 00-.061-.4c-.045-.134-.101-.2-.183-.333-.084-.066-.167-.132-.267-.132h-.016c-.093 0-.176.03-.262.132a.8.8 0 00-.205.334 1.18 1.18 0 00-.09.4v.019c.002.089.008.179.02.267-.193-.067-.438-.135-.607-.202a1.635 1.635 0 01-.018-.2v-.02a1.772 1.772 0 01.15-.768c.082-.22.232-.406.43-.533a.985.985 0 01.594-.2zm-2.962.059h.036c.142 0 .27.048.399.135.146.129.264.288.344.465.09.199.14.4.153.667v.004c.007.134.006.2-.002.266v.08c-.03.007-.056.018-.083.024-.152.055-.274.135-.393.2.012-.09.013-.18.003-.267v-.015c-.012-.133-.04-.2-.082-.333a.613.613 0 00-.166-.267.248.248 0 00-.183-.064h-.021c-.071.006-.13.04-.186.132a.552.552 0 00-.12.27.944.944 0 00-.023.33v.015c.012.135.037.2.08.334.046.134.098.2.166.268.01.009.02.018.034.024-.07.057-.117.07-.176.136a.304.304 0 01-.131.068 2.62 2.62 0 01-.275-.402 1.772 1.772 0 01-.155-.667 1.759 1.759 0 01.08-.668 1.43 1.43 0 01.283-.535c.128-.133.26-.2.418-.2zm1.37 1.706c.332 0 .733.065 1.216.399.293.2.523.269 1.052.468h.003c.255.136.405.266.478.399v-.131a.571.571 0 01.016.47c-.123.31-.516.643-1.063.842v.002c-.268.135-.501.333-.775.465-.276.135-.588.292-1.012.267a1.139 1.139 0 01-.448-.067 3.566 3.566 0 01-.322-.198c-.195-.135-.363-.332-.612-.465v-.005h-.005c-.4-.246-.616-.512-.686-.71-.07-.268-.005-.47.193-.6.224-.135.38-.271.483-.336.104-.074.143-.102.176-.131h.002v-.003c.169-.202.436-.47.839-.601.139-.036.294-.065.466-.065zm2.8 2.142c.358 1.417 1.196 3.475 1.735 4.473.286.534.855 1.659 1.102 3.024.156-.005.33.018.513.064.646-1.671-.546-3.467-1.089-3.966-.22-.2-.232-.335-.123-.335.59.534 1.365 1.572 1.646 2.757.13.535.16 1.104.021 1.67.067.028.135.06.205.067 1.032.534 1.413.938 1.23 1.537v-.043c-.06-.003-.12 0-.18 0h-.016c.151-.467-.182-.825-1.065-1.224-.915-.4-1.646-.336-1.77.465-.008.043-.013.066-.018.135-.068.023-.139.053-.209.064-.43.268-.662.669-.793 1.187-.13.533-.17 1.156-.205 1.869v.003c-.02.334-.17.838-.319 1.35-1.5 1.072-3.58 1.538-5.348.334a2.645 2.645 0 00-.402-.533 1.45 1.45 0 00-.275-.333c.182 0 .338-.03.465-.067a.615.615 0 00.314-.334c.108-.267 0-.697-.345-1.163-.345-.467-.931-.995-1.788-1.521-.63-.4-.986-.87-1.15-1.396-.165-.534-.143-1.085-.015-1.645.245-1.07.873-2.11 1.274-2.763.107-.065.037.135-.408.974-.396.751-1.14 2.497-.122 3.854a8.123 8.123 0 01.647-2.876c.564-1.278 1.743-3.504 1.836-5.268.048.036.217.135.289.202.218.133.38.333.59.465.21.201.477.335.876.335.039.003.075.006.11.006.412 0 .73-.134.997-.268.29-.134.52-.334.74-.4h.005c.467-.135.835-.402 1.044-.7zm2.185 8.958c.037.6.343 1.245.882 1.377.588.134 1.434-.333 1.791-.765l.211-.01c.315-.007.577.01.847.268l.003.003c.208.199.305.53.391.876.085.4.154.78.409 1.066.486.527.645.906.636 1.14l.003-.007v.018l-.003-.012c-.015.262-.185.396-.498.595-.63.401-1.746.712-2.457 1.57-.618.737-1.37 1.14-2.036 1.191-.664.053-1.237-.2-1.574-.898l-.005-.003c-.21-.4-.12-1.025.056-1.69.176-.668.428-1.344.463-1.897.037-.714.076-1.335.195-1.814.12-.465.308-.797.641-.984l.045-.022zm-10.814.049h.01c.053 0 .105.005.157.014.376.055.706.333 1.023.752l.91 1.664.003.003c.243.533.754 1.064 1.189 1.637.434.598.77 1.131.729 1.57v.006c-.057.744-.48 1.148-1.125 1.294-.645.135-1.52.002-2.395-.464-.968-.536-2.118-.469-2.857-.602-.369-.066-.61-.2-.723-.4-.11-.2-.113-.602.123-1.23v-.004l.002-.003c.117-.334.03-.752-.027-1.118-.055-.401-.083-.71.043-.94.16-.334.396-.4.69-.533.294-.135.64-.202.915-.47h.002v-.002c.256-.268.445-.601.668-.838.19-.201.38-.336.663-.336zm7.159-9.074c-.435.201-.945.535-1.488.535-.542 0-.97-.267-1.28-.466-.154-.134-.28-.268-.373-.335-.164-.134-.144-.333-.074-.333.109.016.129.134.199.2.096.066.215.2.36.333.292.2.68.467 1.167.467.485 0 1.053-.267 1.398-.466.195-.135.445-.334.648-.467.156-.136.149-.267.279-.267.128.016.034.134-.147.332a8.097 8.097 0 01-.69.468zm-1.082-1.583V5.64c-.006-.02.013-.042.029-.05.074-.043.18-.027.26.004.063 0 .16.067.15.135-.006.049-.085.066-.135.066-.055 0-.092-.043-.141-.068-.052-.018-.146-.008-.163-.065zm-.551 0c-.02.058-.113.049-.166.066-.047.025-.086.068-.14.068-.05 0-.13-.02-.136-.068-.01-.066.088-.133.15-.133.08-.031.184-.047.259-.005.019.009.036.03.03.05v.02h.003z"
+							/>
+						</svg>
+						<svg
+							v-else-if="os === 'Windows'"
+							xmlns="http://www.w3.org/2000/svg"
+							viewBox="0 0 4875 4875"
 							fill="currentColor"
-						/>
-					</svg>
-					{{ formatMessage(messages.downloadModrinthAppButton) }}
-				</button>
-				<button class="iconified-button outline-button btn btn-large" @click="scrollToSection">
-					{{ formatMessage(messages.moreDownloadOptions) }}
-				</button>
+						>
+							<path
+								d="M0 0h2311v2310H0zm2564 0h2311v2310H2564zM0 2564h2311v2311H0zm2564 0h2311v2311H2564"
+							/>
+						</svg>
+						<svg
+							v-else-if="os === 'Mac'"
+							xmlns="http://www.w3.org/2000/svg"
+							width="44"
+							height="44"
+							viewBox="0 0 44 44"
+							fill="none"
+						>
+							<path
+								d="M33.5752 37.7889C31.3308 39.8664 28.8802 39.5384 26.5212 38.5543C24.0248 37.5484 21.7345 37.5046 19.1007 38.5543C15.8027 39.9102 14.0621 39.5165 12.0924 37.7889C0.915868 26.789 2.56487 10.0377 15.253 9.42536C18.3449 9.57844 20.4978 11.0436 22.3071 11.1748C25.0096 10.65 27.5976 9.14107 30.4834 9.33789C33.9417 9.60031 36.5526 10.9124 38.2703 13.2742C31.1247 17.3637 32.8195 26.3516 39.3697 28.8665C38.0642 32.1468 36.3694 35.4052 33.5523 37.8108L33.5752 37.7889ZM22.078 9.29415C21.7345 4.41745 25.8799 0.393635 30.6437 0C31.3079 5.6421 25.2844 9.84086 22.078 9.29415Z"
+								fill="currentColor"
+							/>
+						</svg>
+						{{ formatMessage(messages.downloadModrinthAppButton) }}
+					</button>
+				</ButtonStyled>
+				<ButtonStyled type="outlined" size="large">
+					<button @click="scrollToSection">
+						<ArrowDownIcon />
+						{{ formatMessage(messages.moreDownloadOptions) }}
+					</button>
+				</ButtonStyled>
 			</div>
 			<img src="https://cdn-raw.modrinth.com/app-landing/app-screenshot.webp" alt="" />
 			<div class="bottom-transition" />
@@ -644,9 +646,11 @@ useSeoMeta({
 							<div class="cell">{{ mod.version }}</div>
 							<div class="cell check">
 								<Checkbox :model-value="true" tabindex="-1" />
-								<button class="btn icon-only transparent" tabindex="-1">
-									<TrashIcon />
-								</button>
+								<ButtonStyled circular type="transparent">
+									<button tabindex="-1">
+										<TrashIcon />
+									</button>
+								</ButtonStyled>
 							</div>
 						</div>
 					</div>
@@ -1278,12 +1282,6 @@ useSeoMeta({
 		margin: 0 auto;
 		justify-content: center;
 		mask-image: none;
-
-		.outline-button {
-			color: var(--landing-color-heading);
-			background: none;
-			border: 1px var(--landing-color-heading) solid;
-		}
 	}
 
 	img {
@@ -2052,7 +2050,6 @@ useSeoMeta({
 	background: rgba(59, 63, 85, 0.15);
 	box-shadow: 2px 2px 12px 0px rgba(0, 0, 0, 0.16);
 
-	.btn,
 	button {
 		&:hover {
 			cursor: default !important;
diff --git a/apps/frontend/src/pages/auth.vue b/apps/frontend/src/pages/auth.vue
index 205866bce..f861e7d7a 100644
--- a/apps/frontend/src/pages/auth.vue
+++ b/apps/frontend/src/pages/auth.vue
@@ -31,17 +31,19 @@ useSeoMeta({
 	margin: 0;
 }
 
-.auth-container .btn {
+.auth-container .btn-wrapper :is(a, button) {
 	font-weight: 700;
 	min-height: 2.5rem;
 	text-decoration: none;
 }
 
-.centered-btn {
+.centered-btn :is(a, button),
+.centered-btn:is(a, button) {
 	margin-inline: auto;
 }
 
-.btn.continue-btn svg {
+.continue-btn :is(a, button) svg,
+.continue-btn:is(a, button) svg {
 	margin: 0 0 0 0.5rem;
 }
 
@@ -52,19 +54,19 @@ useSeoMeta({
 	width: 100%;
 }
 
-.third-party .btn {
+.third-party a {
 	width: 100%;
 	vertical-align: middle;
 }
 
-.third-party .btn svg {
+.third-party a svg {
 	margin-right: var(--gap-sm);
 	width: 1.25rem;
 	height: 1.25rem;
 }
 
 @media screen and (max-width: 25.5rem) {
-	.third-party .btn {
+	.third-party a {
 		grid-column: 1 / 3;
 	}
 }
diff --git a/apps/frontend/src/pages/auth/authorize.vue b/apps/frontend/src/pages/auth/authorize.vue
index c411819eb..6662c9f2f 100644
--- a/apps/frontend/src/pages/auth/authorize.vue
+++ b/apps/frontend/src/pages/auth/authorize.vue
@@ -55,14 +55,18 @@
 				</div>
 			</div>
 			<div class="button-row">
-				<Button class="wide-button" large :action="onReject" :disabled="pending">
-					<XIcon />
-					{{ formatMessage(messages.decline) }}
-				</Button>
-				<Button class="wide-button" color="primary" large :action="onAuthorize" :disabled="pending">
-					<CheckIcon />
-					{{ formatMessage(messages.authorize) }}
-				</Button>
+				<ButtonStyled size="large">
+					<button class="wide-button" :disabled="pending" @click="onReject">
+						<XIcon />
+						{{ formatMessage(messages.decline) }}
+					</button>
+				</ButtonStyled>
+				<ButtonStyled color="brand" size="large">
+					<button class="wide-button" :disabled="pending" @click="onAuthorize">
+						<CheckIcon />
+						{{ formatMessage(messages.authorize) }}
+					</button>
+				</ButtonStyled>
 			</div>
 			<div class="redirection-notice">
 				<p class="redirect-instructions">
@@ -83,7 +87,7 @@
 import { CheckIcon, XIcon } from '@modrinth/assets'
 import {
 	Avatar,
-	Button,
+	ButtonStyled,
 	commonMessages,
 	defineMessages,
 	injectModrinthClient,
diff --git a/apps/frontend/src/pages/auth/reset-password.vue b/apps/frontend/src/pages/auth/reset-password.vue
index 365a9063f..1b8e8522c 100644
--- a/apps/frontend/src/pages/auth/reset-password.vue
+++ b/apps/frontend/src/pages/auth/reset-password.vue
@@ -22,13 +22,15 @@
 
 				<HCaptcha v-if="globals?.captcha_enabled" ref="captcha" v-model="token" />
 
-				<button
-					class="btn btn-primary centered-btn"
-					:disabled="globals?.captcha_enabled ? !token : false"
-					@click="recovery"
-				>
-					<SendIcon /> {{ formatMessage(methodChoiceMessages.action) }}
-				</button>
+				<ButtonStyled color="brand">
+					<button
+						class="mx-auto"
+						:disabled="globals?.captcha_enabled ? !token : false"
+						@click="recovery"
+					>
+						<SendIcon /> {{ formatMessage(methodChoiceMessages.action) }}
+					</button>
+				</ButtonStyled>
 			</template>
 			<template v-else-if="step === 'passed_challenge'">
 				<p>{{ formatMessage(postChallengeMessages.description) }}</p>
@@ -57,9 +59,11 @@
 					wrapper-class="w-full"
 				/>
 
-				<button class="auth-form__input btn btn-primary continue-btn" @click="changePassword">
-					{{ formatMessage(postChallengeMessages.action) }}
-				</button>
+				<ButtonStyled color="brand">
+					<button class="auth-form__input continue-btn" @click="changePassword">
+						{{ formatMessage(postChallengeMessages.action) }}
+					</button>
+				</ButtonStyled>
 			</template>
 		</section>
 	</div>
@@ -67,6 +71,7 @@
 <script setup>
 import { KeyIcon, MailIcon, SendIcon } from '@modrinth/assets'
 import {
+	ButtonStyled,
 	commonMessages,
 	defineMessages,
 	injectModrinthClient,
diff --git a/apps/frontend/src/pages/auth/sign-in.vue b/apps/frontend/src/pages/auth/sign-in.vue
index 352bf041f..d241f5b87 100644
--- a/apps/frontend/src/pages/auth/sign-in.vue
+++ b/apps/frontend/src/pages/auth/sign-in.vue
@@ -23,38 +23,52 @@
 				@keyup.enter="begin2FASignIn"
 			/>
 
-			<button class="btn btn-primary continue-btn" @click="begin2FASignIn">
-				{{ formatMessage(commonMessages.signInButton) }} <RightArrowIcon />
-			</button>
+			<ButtonStyled color="brand">
+				<button class="continue-btn" @click="begin2FASignIn">
+					{{ formatMessage(commonMessages.signInButton) }} <RightArrowIcon />
+				</button>
+			</ButtonStyled>
 		</template>
 		<template v-else>
 			<h1>{{ formatMessage(messages.signInWithLabel) }}</h1>
 
 			<section class="third-party">
-				<a class="btn" :href="getAuthUrl('discord', redirectTarget)">
-					<DiscordColorIcon />
-					<span>Discord</span>
-				</a>
-				<a class="btn" :href="getAuthUrl('github', redirectTarget)">
-					<GitHubColorIcon />
-					<span>GitHub</span>
-				</a>
-				<a class="btn" :href="getAuthUrl('microsoft', redirectTarget)">
-					<MicrosoftColorIcon />
-					<span>Microsoft</span>
-				</a>
-				<a class="btn" :href="getAuthUrl('google', redirectTarget)">
-					<GoogleColorIcon />
-					<span>Google</span>
-				</a>
-				<a class="btn" :href="getAuthUrl('steam', redirectTarget)">
-					<SteamColorIcon />
-					<span>Steam</span>
-				</a>
-				<a class="btn" :href="getAuthUrl('gitlab', redirectTarget)">
-					<GitLabColorIcon />
-					<span>GitLab</span>
-				</a>
+				<ButtonStyled>
+					<a :href="getAuthUrl('discord', redirectTarget)">
+						<DiscordColorIcon />
+						<span>Discord</span>
+					</a>
+				</ButtonStyled>
+				<ButtonStyled>
+					<a :href="getAuthUrl('github', redirectTarget)">
+						<GitHubColorIcon />
+						<span>GitHub</span>
+					</a>
+				</ButtonStyled>
+				<ButtonStyled>
+					<a :href="getAuthUrl('microsoft', redirectTarget)">
+						<MicrosoftColorIcon />
+						<span>Microsoft</span>
+					</a>
+				</ButtonStyled>
+				<ButtonStyled>
+					<a :href="getAuthUrl('google', redirectTarget)">
+						<GoogleColorIcon />
+						<span>Google</span>
+					</a>
+				</ButtonStyled>
+				<ButtonStyled>
+					<a :href="getAuthUrl('steam', redirectTarget)">
+						<SteamColorIcon />
+						<span>Steam</span>
+					</a>
+				</ButtonStyled>
+				<ButtonStyled>
+					<a :href="getAuthUrl('gitlab', redirectTarget)">
+						<GitLabColorIcon />
+						<span>GitLab</span>
+					</a>
+				</ButtonStyled>
 			</section>
 
 			<h1>{{ formatMessage(messages.usePasswordLabel) }}</h1>
@@ -85,13 +99,15 @@
 
 				<HCaptcha v-if="globals?.captcha_enabled" ref="captcha" v-model="token" />
 
-				<button
-					class="btn btn-primary continue-btn centered-btn"
-					:disabled="globals?.captcha_enabled ? !token : false"
-					@click="beginPasswordSignIn()"
-				>
-					{{ formatMessage(commonMessages.signInButton) }} <RightArrowIcon />
-				</button>
+				<ButtonStyled color="brand">
+					<button
+						class="continue-btn centered-btn"
+						:disabled="globals?.captcha_enabled ? !token : false"
+						@click="beginPasswordSignIn()"
+					>
+						{{ formatMessage(commonMessages.signInButton) }} <RightArrowIcon />
+					</button>
+				</ButtonStyled>
 
 				<div class="auth-form__additional-options">
 					<IntlFormatted :message-id="messages.additionalOptionsLabel">
@@ -137,6 +153,7 @@ import {
 	SteamColorIcon,
 } from '@modrinth/assets'
 import {
+	ButtonStyled,
 	commonMessages,
 	defineMessages,
 	injectModrinthClient,
diff --git a/apps/frontend/src/pages/auth/sign-up.vue b/apps/frontend/src/pages/auth/sign-up.vue
index c36e55f9b..1032886df 100644
--- a/apps/frontend/src/pages/auth/sign-up.vue
+++ b/apps/frontend/src/pages/auth/sign-up.vue
@@ -3,30 +3,42 @@
 		<h1>{{ formatMessage(messages.signUpWithTitle) }}</h1>
 
 		<section class="third-party">
-			<a class="btn discord-btn" :href="getAuthUrl('discord', redirectTarget)">
-				<DiscordColorIcon />
-				<span>Discord</span>
-			</a>
-			<a class="btn" :href="getAuthUrl('github', redirectTarget)">
-				<GitHubColorIcon />
-				<span>GitHub</span>
-			</a>
-			<a class="btn" :href="getAuthUrl('microsoft', redirectTarget)">
-				<MicrosoftColorIcon />
-				<span>Microsoft</span>
-			</a>
-			<a class="btn" :href="getAuthUrl('google', redirectTarget)">
-				<GoogleColorIcon />
-				<span>Google</span>
-			</a>
-			<a class="btn" :href="getAuthUrl('steam', redirectTarget)">
-				<SteamColorIcon />
-				<span>Steam</span>
-			</a>
-			<a class="btn" :href="getAuthUrl('gitlab', redirectTarget)">
-				<GitLabColorIcon />
-				<span>GitLab</span>
-			</a>
+			<ButtonStyled>
+				<a class="discord-btn" :href="getAuthUrl('discord', redirectTarget)">
+					<DiscordColorIcon />
+					<span>Discord</span>
+				</a>
+			</ButtonStyled>
+			<ButtonStyled>
+				<a :href="getAuthUrl('github', redirectTarget)">
+					<GitHubColorIcon />
+					<span>GitHub</span>
+				</a>
+			</ButtonStyled>
+			<ButtonStyled>
+				<a :href="getAuthUrl('microsoft', redirectTarget)">
+					<MicrosoftColorIcon />
+					<span>Microsoft</span>
+				</a>
+			</ButtonStyled>
+			<ButtonStyled>
+				<a :href="getAuthUrl('google', redirectTarget)">
+					<GoogleColorIcon />
+					<span>Google</span>
+				</a>
+			</ButtonStyled>
+			<ButtonStyled>
+				<a :href="getAuthUrl('steam', redirectTarget)">
+					<SteamColorIcon />
+					<span>Steam</span>
+				</a>
+			</ButtonStyled>
+			<ButtonStyled>
+				<a :href="getAuthUrl('gitlab', redirectTarget)">
+					<GitLabColorIcon />
+					<span>GitLab</span>
+				</a>
+			</ButtonStyled>
 		</section>
 
 		<h1>{{ formatMessage(messages.createAccountTitle) }}</h1>
@@ -100,13 +112,15 @@
 
 			<HCaptcha v-if="globals?.captcha_enabled" ref="captcha" v-model="token" />
 
-			<button
-				class="btn btn-primary continue-btn centered-btn"
-				:disabled="globals?.captcha_enabled ? !token : false"
-				@click="createAccount"
-			>
-				{{ formatMessage(messages.createAccountButton) }} <RightArrowIcon />
-			</button>
+			<ButtonStyled color="brand">
+				<button
+					class="continue-btn centered-btn"
+					:disabled="globals?.captcha_enabled ? !token : false"
+					@click="createAccount"
+				>
+					{{ formatMessage(messages.createAccountButton) }} <RightArrowIcon />
+				</button>
+			</ButtonStyled>
 
 			<div class="auth-form__additional-options">
 				{{ formatMessage(messages.alreadyHaveAccountLabel) }}
@@ -138,6 +152,7 @@ import {
 	UserIcon,
 } from '@modrinth/assets'
 import {
+	ButtonStyled,
 	Checkbox,
 	commonMessages,
 	defineMessages,
diff --git a/apps/frontend/src/pages/auth/verify-email.vue b/apps/frontend/src/pages/auth/verify-email.vue
index 4cb039cd8..27b6bc694 100644
--- a/apps/frontend/src/pages/auth/verify-email.vue
+++ b/apps/frontend/src/pages/auth/verify-email.vue
@@ -6,9 +6,11 @@
 			<section class="auth-form">
 				<p>{{ formatMessage(alreadyVerifiedMessages.description) }}</p>
 
-				<NuxtLink class="btn" to="/settings/account">
-					<SettingsIcon /> {{ formatMessage(messages.accountSettings) }}
-				</NuxtLink>
+				<ButtonStyled>
+					<NuxtLink to="/settings/account">
+						<SettingsIcon /> {{ formatMessage(messages.accountSettings) }}
+					</NuxtLink>
+				</ButtonStyled>
 			</section>
 		</template>
 
diff --git a/apps/frontend/src/pages/auth/welcome.vue b/apps/frontend/src/pages/auth/welcome.vue
index 42d7985d7..fe0b85243 100644
--- a/apps/frontend/src/pages/auth/welcome.vue
+++ b/apps/frontend/src/pages/auth/welcome.vue
@@ -24,10 +24,12 @@
 				:description="formatMessage(messages.subscribeCheckbox)"
 			/>
 
-			<button class="btn btn-primary centered-btn" @click="continueSignUp">
-				{{ formatMessage(commonMessages.continueButton) }}
-				<RightArrowIcon />
-			</button>
+			<ButtonStyled color="brand">
+				<button class="centered-btn" @click="continueSignUp">
+					{{ formatMessage(commonMessages.continueButton) }}
+					<RightArrowIcon />
+				</button>
+			</ButtonStyled>
 
 			<p class="tos-text">
 				<IntlFormatted :message-id="messages.tosLabel">
@@ -50,6 +52,7 @@
 <script setup>
 import { RightArrowIcon, WavingRinthbot } from '@modrinth/assets'
 import {
+	ButtonStyled,
 	Checkbox,
 	commonMessages,
 	defineMessages,
diff --git a/apps/frontend/src/pages/collection/[id].vue b/apps/frontend/src/pages/collection/[id].vue
index 5c8b8b2f8..6b6fd3326 100644
--- a/apps/frontend/src/pages/collection/[id].vue
+++ b/apps/frontend/src/pages/collection/[id].vue
@@ -116,14 +116,14 @@
 					</RadioButtons>
 				</div>
 				<div class="flex justify-end gap-2">
-					<ButtonStyled class="w-24">
-						<button @click="() => editModal?.hide()">
+					<ButtonStyled>
+						<button class="w-24" @click="() => editModal?.hide()">
 							<XIcon aria-hidden="true" />
 							{{ formatMessage(commonMessages.cancelButton) }}
 						</button>
 					</ButtonStyled>
-					<ButtonStyled color="brand" class="w-36">
-						<button :disabled="saving" @click="save()">
+					<ButtonStyled color="brand">
+						<button class="w-36" :disabled="saving" @click="save()">
 							<SpinnerIcon v-if="saving" class="animate-spin" aria-hidden="true" />
 							<SaveIcon v-else aria-hidden="true" />
 							{{
@@ -193,7 +193,7 @@
 										}"
 									>
 										<template #stat="{ children }">
-											<span class="primary-stat__counter">
+											<span>
 												<component :is="() => normalizeChildren(children)" />
 											</span>
 										</template>
@@ -333,24 +333,19 @@
 					"
 				>
 					<template v-if="canEdit || collection.id === 'following'" #actions>
-						<button
-							v-if="canEdit"
-							class="iconified-button remove-btn"
-							:disabled="removing"
-							@click="() => removeProject(project)"
-						>
-							<SpinnerIcon v-if="removing" class="animate-spin" aria-hidden="true" />
-							<XIcon v-else aria-hidden="true" />
-							{{ formatMessage(messages.removeProjectButton) }}
-						</button>
-						<button
-							v-if="collection.id === 'following'"
-							class="iconified-button"
-							@click="unfollowProject(project)"
-						>
-							<HeartMinusIcon aria-hidden="true" />
-							{{ formatMessage(messages.unfollowProjectButton) }}
-						</button>
+						<ButtonStyled v-if="canEdit">
+							<button class="remove-btn" :disabled="removing" @click="() => removeProject(project)">
+								<SpinnerIcon v-if="removing" class="animate-spin" aria-hidden="true" />
+								<XIcon v-else aria-hidden="true" />
+								{{ formatMessage(messages.removeProjectButton) }}
+							</button>
+						</ButtonStyled>
+						<ButtonStyled v-if="collection.id === 'following'">
+							<button @click="unfollowProject(project)">
+								<HeartMinusIcon aria-hidden="true" />
+								{{ formatMessage(messages.unfollowProjectButton) }}
+							</button>
+						</ButtonStyled>
 					</template>
 				</ProjectCard>
 			</ProjectCardList>
diff --git a/apps/frontend/src/pages/dashboard/collections.vue b/apps/frontend/src/pages/dashboard/collections.vue
index 56ae3783d..a2bf61191 100644
--- a/apps/frontend/src/pages/dashboard/collections.vue
+++ b/apps/frontend/src/pages/dashboard/collections.vue
@@ -30,14 +30,12 @@
 					<span class="font-semibold text-secondary">{{ selected }}</span>
 				</DropdownSelect>
 
-				<Button
-					color="primary"
-					class="ml-auto"
-					@click="(event) => $refs.modal_creation.show(event)"
-				>
-					<PlusIcon aria-hidden="true" />
-					{{ formatMessage(messages.createNewButton) }}
-				</Button>
+				<ButtonStyled color="brand">
+					<button class="ml-auto" @click="(event) => $refs.modal_creation.show(event)">
+						<PlusIcon aria-hidden="true" />
+						{{ formatMessage(messages.createNewButton) }}
+					</button>
+				</ButtonStyled>
 			</div>
 		</div>
 		<div class="collections-grid">
@@ -146,7 +144,7 @@ import {
 } from '@modrinth/assets'
 import {
 	Avatar,
-	Button,
+	ButtonStyled,
 	commonMessages,
 	defineMessages,
 	DropdownSelect,
diff --git a/apps/frontend/src/pages/dashboard/index.vue b/apps/frontend/src/pages/dashboard/index.vue
index af3637b09..c394cd4b3 100644
--- a/apps/frontend/src/pages/dashboard/index.vue
+++ b/apps/frontend/src/pages/dashboard/index.vue
@@ -1,5 +1,5 @@
 <template>
-	<div class="dashboard-overview">
+	<div>
 		<section class="universal-card dashboard-header">
 			<Avatar :src="auth.user.avatar_url" size="md" circle :alt="auth.user.username" />
 			<div class="username">
@@ -12,7 +12,7 @@
 				</NuxtLink>
 			</div>
 		</section>
-		<div class="dashboard-notifications">
+		<div>
 			<section class="universal-card">
 				<div class="header__row">
 					<h2 class="header__title text-2xl">
@@ -50,44 +50,12 @@
 				</template>
 				<div v-else class="universal-body">
 					<p>{{ formatMessage(messages.noUnreadNotifications) }}</p>
-					<nuxt-link class="iconified-button !mt-4" to="/dashboard/notifications/history">
-						<HistoryIcon />
-						{{ formatMessage(messages.viewNotificationHistory) }}
-					</nuxt-link>
-				</div>
-			</section>
-		</div>
-
-		<div class="dashboard-analytics">
-			<section class="universal-card">
-				<h2>{{ formatMessage(commonMessages.analyticsButton) }}</h2>
-				<div class="grid-display">
-					<div class="grid-display__item">
-						<div class="label">{{ formatMessage(messages.totalDownloads) }}</div>
-						<div class="value">
-							{{ $formatNumber(projects.reduce((agg, x) => agg + x.downloads, 0)) }}
-						</div>
-						<span>{{
-							formatMessage(messages.fromProjects, { count: downloadsProjectCount })
-						}}</span>
-						<!--          <NuxtLink class="goto-link" to="/dashboard/analytics"-->
-						<!--            >View breakdown-->
-						<!--            <ChevronRightIcon-->
-						<!--              class="featured-header-chevron"-->
-						<!--              aria-hidden="true"-->
-						<!--          /></NuxtLink>-->
-					</div>
-					<div class="grid-display__item">
-						<div class="label">{{ formatMessage(messages.totalFollowers) }}</div>
-						<div class="value">
-							{{ $formatNumber(projects.reduce((agg, x) => agg + x.followers, 0)) }}
-						</div>
-						<span>
-							<span>{{
-								formatMessage(messages.fromProjects, { count: followersProjectCount })
-							}}</span>
-						</span>
-					</div>
+					<ButtonStyled>
+						<nuxt-link to="/dashboard/notifications/history" class="!mt-4 w-fit">
+							<HistoryIcon />
+							{{ formatMessage(messages.viewNotificationHistory) }}
+						</nuxt-link>
+					</ButtonStyled>
 				</div>
 			</section>
 		</div>
@@ -97,6 +65,7 @@
 import { ChevronRightIcon, HistoryIcon } from '@modrinth/assets'
 import {
 	Avatar,
+	ButtonStyled,
 	commonMessages,
 	defineMessages,
 	injectModrinthClient,
@@ -152,19 +121,6 @@ useHead({
 const auth = await useAuth()
 const client = injectModrinthClient()
 
-const { data: projects } = useQuery({
-	queryKey: computed(() => ['user', auth.value?.user?.id, 'projects']),
-	queryFn: () => client.labrinth.users_v2.getProjects(auth.value?.user?.id),
-	placeholderData: [],
-})
-
-const downloadsProjectCount = computed(
-	() => projects.value.filter((project) => project.downloads > 0).length,
-)
-const followersProjectCount = computed(
-	() => projects.value.filter((project) => project.followers > 0).length,
-)
-
 const { data, refetch } = useQuery({
 	queryKey: computed(() => ['user', auth.value?.user?.id, 'notifications']),
 	queryFn: async () => {
@@ -190,40 +146,6 @@ const notifications = computed(() => {
 const extraNotifs = computed(() => (data.value ? data.value.extraNotifs : 0))
 </script>
 <style lang="scss">
-.dashboard-overview {
-	display: grid;
-	grid-template:
-		'header header'
-		'notifications analytics' / 1fr auto;
-	gap: var(--spacing-card-md);
-
-	> .universal-card {
-		margin: 0;
-	}
-
-	@media screen and (max-width: 750px) {
-		display: flex;
-		flex-direction: column;
-	}
-}
-
-.dashboard-notifications {
-	grid-area: notifications;
-	//display: flex;
-	//flex-direction: column;
-	//gap: var(--spacing-card-md);
-
-	a.view-more-notifs {
-		display: flex;
-		width: fit-content;
-		margin-left: auto;
-	}
-}
-
-.dashboard-analytics {
-	grid-area: analytics;
-}
-
 .dashboard-header {
 	display: flex;
 	gap: var(--spacing-card-bg);
diff --git a/apps/frontend/src/pages/dashboard/notifications.vue b/apps/frontend/src/pages/dashboard/notifications.vue
index f56d216e4..dbf11ee9b 100644
--- a/apps/frontend/src/pages/dashboard/notifications.vue
+++ b/apps/frontend/src/pages/dashboard/notifications.vue
@@ -21,14 +21,18 @@
 					</h2>
 				</div>
 				<template v-if="!history">
-					<Button v-if="data.hasRead" @click="updateRoute()">
-						<HistoryIcon />
-						{{ formatMessage(messages.viewHistory) }}
-					</Button>
-					<Button v-if="notifications.length > 0" color="danger" @click="readAll()">
-						<CheckCheckIcon />
-						{{ formatMessage(messages.markAllAsRead) }}
-					</Button>
+					<ButtonStyled v-if="data.hasRead">
+						<button @click="updateRoute()">
+							<HistoryIcon />
+							{{ formatMessage(messages.viewHistory) }}
+						</button>
+					</ButtonStyled>
+					<ButtonStyled v-if="notifications.length > 0" color="red">
+						<button @click="readAll()">
+							<CheckCheckIcon />
+							{{ formatMessage(messages.markAllAsRead) }}
+						</button>
+					</ButtonStyled>
 				</template>
 			</div>
 			<Chips
@@ -67,7 +71,7 @@
 <script setup>
 import { CheckCheckIcon, HistoryIcon } from '@modrinth/assets'
 import {
-	Button,
+	ButtonStyled,
 	Chips,
 	commonMessages,
 	defineMessages,
diff --git a/apps/frontend/src/pages/dashboard/organizations.vue b/apps/frontend/src/pages/dashboard/organizations.vue
index d2d1cc755..adeb5d221 100644
--- a/apps/frontend/src/pages/dashboard/organizations.vue
+++ b/apps/frontend/src/pages/dashboard/organizations.vue
@@ -5,10 +5,12 @@
 			<div class="header__row">
 				<h2 class="header__title text-2xl">{{ formatMessage(messages.organizationsTitle) }}</h2>
 				<div class="input-group">
-					<button class="iconified-button brand-button" @click="openCreateOrgModal">
-						<PlusIcon aria-hidden="true" />
-						{{ formatMessage(messages.createOrganization) }}
-					</button>
+					<ButtonStyled color="brand">
+						<button @click="openCreateOrgModal">
+							<PlusIcon aria-hidden="true" />
+							{{ formatMessage(messages.createOrganization) }}
+						</button>
+					</ButtonStyled>
 				</div>
 			</div>
 			<template v-if="orgs?.length > 0">
@@ -51,7 +53,7 @@
 
 <script setup>
 import { PlusIcon, UsersIcon } from '@modrinth/assets'
-import { Avatar, defineMessages, injectModrinthClient, useVIntl } from '@modrinth/ui'
+import { Avatar, ButtonStyled, defineMessages, injectModrinthClient, useVIntl } from '@modrinth/ui'
 import { useQuery } from '@tanstack/vue-query'
 
 import OrganizationCreateModal from '~/components/ui/create/OrganizationCreateModal.vue'
diff --git a/apps/frontend/src/pages/dashboard/projects.vue b/apps/frontend/src/pages/dashboard/projects.vue
index f1332e4ed..9a8021ed8 100644
--- a/apps/frontend/src/pages/dashboard/projects.vue
+++ b/apps/frontend/src/pages/dashboard/projects.vue
@@ -7,68 +7,77 @@
 					<label for="issue-tracker-input" :title="formatMessage(messages.issueTrackerDescription)">
 						<span class="label__title">{{ formatMessage(messages.issueTrackerLabel) }}</span>
 					</label>
-					<div class="input-group shrink-first">
+					<div class="flex gap-2">
 						<StyledInput
 							id="issue-tracker-input"
 							v-model="editLinks.issues.val"
 							:disabled="editLinks.issues.clear"
 							type="url"
+							class="w-full"
 							:placeholder="getLinkInputPlaceholder(editLinks.issues.clear)"
 							:maxlength="2048"
 						/>
-						<button
-							v-tooltip="formatMessage(messages.clearLinkLabel)"
-							:aria-label="formatMessage(messages.clearLinkLabel)"
-							class="square-button label-button"
-							:data-active="editLinks.issues.clear"
-							@click="editLinks.issues.clear = !editLinks.issues.clear"
-						>
-							<TrashIcon />
-						</button>
+						<ButtonStyled circular>
+							<button
+								v-tooltip="formatMessage(messages.clearLinkLabel)"
+								class="label-button"
+								:aria-label="formatMessage(messages.clearLinkLabel)"
+								:data-active="editLinks.issues.clear"
+								@click="editLinks.issues.clear = !editLinks.issues.clear"
+							>
+								<TrashIcon />
+							</button>
+						</ButtonStyled>
 					</div>
 					<label for="source-code-input" :title="formatMessage(messages.sourceCodeDescription)">
 						<span class="label__title">{{ formatMessage(messages.sourceCodeLabel) }}</span>
 					</label>
-					<div class="input-group shrink-first">
+					<div class="flex gap-2">
 						<StyledInput
 							id="source-code-input"
 							v-model="editLinks.source.val"
 							:disabled="editLinks.source.clear"
 							type="url"
+							class="w-full"
 							:maxlength="2048"
 							:placeholder="getLinkInputPlaceholder(editLinks.source.clear)"
 						/>
-						<button
-							v-tooltip="formatMessage(messages.clearLinkLabel)"
-							:aria-label="formatMessage(messages.clearLinkLabel)"
-							class="square-button label-button"
-							:data-active="editLinks.source.clear"
-							@click="editLinks.source.clear = !editLinks.source.clear"
-						>
-							<TrashIcon />
-						</button>
+						<ButtonStyled circular>
+							<button
+								v-tooltip="formatMessage(messages.clearLinkLabel)"
+								class="label-button"
+								:aria-label="formatMessage(messages.clearLinkLabel)"
+								:data-active="editLinks.source.clear"
+								@click="editLinks.source.clear = !editLinks.source.clear"
+							>
+								<TrashIcon />
+							</button>
+						</ButtonStyled>
 					</div>
 					<label for="wiki-page-input" :title="formatMessage(messages.wikiPageDescription)">
 						<span class="label__title">{{ formatMessage(messages.wikiPageLabel) }}</span>
 					</label>
-					<div class="input-group shrink-first">
+					<div class="flex gap-2">
 						<StyledInput
 							id="wiki-page-input"
 							v-model="editLinks.wiki.val"
 							:disabled="editLinks.wiki.clear"
 							type="url"
+							class="w-full"
 							:maxlength="2048"
 							:placeholder="getLinkInputPlaceholder(editLinks.wiki.clear)"
 						/>
-						<button
-							v-tooltip="formatMessage(messages.clearLinkLabel)"
-							:aria-label="formatMessage(messages.clearLinkLabel)"
-							class="square-button label-button"
-							:data-active="editLinks.wiki.clear"
-							@click="editLinks.wiki.clear = !editLinks.wiki.clear"
-						>
-							<TrashIcon />
-						</button>
+						<ButtonStyled circular>
+							<button
+								v-tooltip="formatMessage(messages.clearLinkLabel)"
+								class="label-button"
+								:aria-label="formatMessage(messages.clearLinkLabel)"
+								:data-active="editLinks.wiki.clear"
+								@click="editLinks.wiki.clear = !editLinks.wiki.clear"
+							>
+								<TrashIcon />
+							</button>
+						</ButtonStyled>
 					</div>
 					<label
 						for="discord-invite-input"
@@ -76,24 +85,27 @@
 					>
 						<span class="label__title">{{ formatMessage(messages.discordInviteLabel) }}</span>
 					</label>
-					<div class="input-group shrink-first">
+					<div class="flex gap-2">
 						<StyledInput
 							id="discord-invite-input"
 							v-model="editLinks.discord.val"
 							:disabled="editLinks.discord.clear"
+							class="w-full"
 							type="url"
 							:maxlength="2048"
 							:placeholder="getLinkInputPlaceholder(editLinks.discord.clear, true)"
 						/>
-						<button
-							v-tooltip="formatMessage(messages.clearLinkLabel)"
-							:aria-label="formatMessage(messages.clearLinkLabel)"
-							class="square-button label-button"
-							:data-active="editLinks.discord.clear"
-							@click="editLinks.discord.clear = !editLinks.discord.clear"
-						>
-							<TrashIcon />
-						</button>
+						<ButtonStyled circular>
+							<button
+								v-tooltip="formatMessage(messages.clearLinkLabel)"
+								class="label-button"
+								:aria-label="formatMessage(messages.clearLinkLabel)"
+								:data-active="editLinks.discord.clear"
+								@click="editLinks.discord.clear = !editLinks.discord.clear"
+							>
+								<TrashIcon />
+							</button>
+						</ButtonStyled>
 					</div>
 				</section>
 				<p>
@@ -128,15 +140,19 @@
 					:label="formatMessage(messages.showAllProjects)"
 					:description="formatMessage(messages.showAllProjects)"
 				/>
-				<div class="push-right input-group">
-					<button class="iconified-button" @click="$refs.editLinksModal.hide()">
-						<XIcon />
-						{{ formatMessage(commonMessages.cancelButton) }}
-					</button>
-					<button class="iconified-button brand-button" @click="bulkEditLinks()">
-						<SaveIcon />
-						{{ formatMessage(commonMessages.saveChangesButton) }}
-					</button>
+				<div class="input-group ml-auto mt-4">
+					<ButtonStyled type="outlined">
+						<button @click="$refs.editLinksModal.hide()">
+							<XIcon />
+							{{ formatMessage(commonMessages.cancelButton) }}
+						</button>
+					</ButtonStyled>
+					<ButtonStyled color="brand">
+						<button @click="bulkEditLinks()">
+							<SaveIcon />
+							{{ formatMessage(commonMessages.saveChangesButton) }}
+						</button>
+					</ButtonStyled>
 				</div>
 			</div>
 		</NewModal>
@@ -145,10 +161,12 @@
 			<div class="header__row">
 				<h2 class="header__title text-2xl">{{ formatMessage(messages.headTitle) }}</h2>
 				<div class="input-group">
-					<button class="iconified-button brand-button" @click="$refs.modal_creation.show($event)">
-						<PlusIcon />
-						{{ formatMessage(commonMessages.createAProjectButton) }}
-					</button>
+					<ButtonStyled color="brand">
+						<button @click="$refs.modal_creation.show($event)">
+							<PlusIcon />
+							{{ formatMessage(commonMessages.createAProjectButton) }}
+						</button>
+					</ButtonStyled>
 				</div>
 			</div>
 			<p v-if="projects.length < 1">
@@ -157,14 +175,12 @@
 			<template v-else>
 				<p>{{ formatMessage(messages.bulkEditHint) }}</p>
 				<div class="input-group">
-					<button
-						class="iconified-button"
-						:disabled="selectedProjects.length === 0"
-						@click="$refs.editLinksModal.show()"
-					>
-						<EditIcon />
-						{{ formatMessage(messages.editLinksButton) }}
-					</button>
+					<ButtonStyled>
+						<button :disabled="selectedProjects.length === 0" @click="$refs.editLinksModal.show()">
+							<EditIcon />
+							{{ formatMessage(messages.editLinksButton) }}
+						</button>
+					</ButtonStyled>
 					<div class="push-right">
 						<div class="labeled-control-row">
 							{{ formatMessage(commonMessages.sortByLabel) }}
@@ -175,14 +191,15 @@
 								:options="sortOptions"
 								@update:model-value="projects = updateSort(projects, sortBy, descending)"
 							/>
-							<button
-								v-tooltip="formatMessage(descending ? messages.descending : messages.ascending)"
-								class="square-button"
-								@click="updateDescending()"
-							>
-								<SortDescIcon v-if="descending" />
-								<SortAscIcon v-else />
-							</button>
+							<ButtonStyled circular>
+								<button
+									v-tooltip="formatMessage(descending ? messages.descending : messages.ascending)"
+									@click="updateDescending()"
+								>
+									<SortDescIcon v-if="descending" />
+									<SortAscIcon v-else />
+								</button>
+							</ButtonStyled>
 						</div>
 					</div>
 				</div>
diff --git a/apps/frontend/src/pages/hosting/index.vue b/apps/frontend/src/pages/hosting/index.vue
index 2e33dbea6..8130053d8 100644
--- a/apps/frontend/src/pages/hosting/index.vue
+++ b/apps/frontend/src/pages/hosting/index.vue
@@ -603,9 +603,7 @@
 						</h2>
 					</div>
 
-					<div
-						class="experimental-styles-within flex w-full flex-col-reverse gap-2 md:w-auto md:flex-col md:items-center"
-					>
+					<div class="flex w-full flex-col-reverse gap-2 md:w-auto md:flex-col md:items-center">
 						<ButtonStyled color="standard" size="large">
 							<button class="w-full md:w-fit" @click="selectProduct('custom')">
 								{{ formatMessage(messages.getStartedButton) }}
diff --git a/apps/frontend/src/pages/index.vue b/apps/frontend/src/pages/index.vue
index 2cd3973c8..4b11e1d53 100644
--- a/apps/frontend/src/pages/index.vue
+++ b/apps/frontend/src/pages/index.vue
@@ -208,7 +208,7 @@
 						<p>
 							<IntlFormatted :message-id="messages.playWithLauncherDescription">
 								<template #link="{ children }">
-									<nuxt-link class="title-link" to="/app">
+									<nuxt-link class="underline hover:brightness-[--hover-brightness]" to="/app">
 										<component :is="() => children" />
 									</nuxt-link>
 								</template>
diff --git a/apps/frontend/src/pages/moderation.vue b/apps/frontend/src/pages/moderation.vue
index 0fc5b7468..1fab4216d 100644
--- a/apps/frontend/src/pages/moderation.vue
+++ b/apps/frontend/src/pages/moderation.vue
@@ -1,7 +1,5 @@
 <template>
-	<div
-		class="experimental-styles-within relative mx-auto mb-6 flex min-h-screen w-full max-w-[1280px] flex-col px-6"
-	>
+	<div class="relative mx-auto mb-6 flex min-h-screen w-full max-w-[1280px] flex-col px-6">
 		<h1>Moderation</h1>
 		<NavTabs :links="moderationLinks" class="mb-4 hidden sm:flex" />
 		<div class="mb-4 sm:hidden">
diff --git a/apps/frontend/src/pages/moderation/index.vue b/apps/frontend/src/pages/moderation/index.vue
index 15f8cf301..db08572ec 100644
--- a/apps/frontend/src/pages/moderation/index.vue
+++ b/apps/frontend/src/pages/moderation/index.vue
@@ -57,7 +57,7 @@
 					</Combobox>
 				</div>
 
-				<ButtonStyled color="orange" class="w-full sm:w-auto">
+				<ButtonStyled color="orange">
 					<button
 						class="flex !h-[40px] w-full items-center justify-center gap-2 sm:w-auto"
 						:disabled="paginatedProjects?.length === 0"
diff --git a/apps/frontend/src/pages/news/article/[slug].vue b/apps/frontend/src/pages/news/article/[slug].vue
index 7ec7c9fd0..204c71159 100644
--- a/apps/frontend/src/pages/news/article/[slug].vue
+++ b/apps/frontend/src/pages/news/article/[slug].vue
@@ -108,7 +108,7 @@ onMounted(() => {
 </script>
 
 <template>
-	<div class="page experimental-styles-within py-6">
+	<div class="page py-6">
 		<div
 			class="flex flex-wrap items-center justify-between gap-4 border-0 border-b-[1px] border-solid border-divider px-6 pb-6"
 		>
@@ -122,7 +122,7 @@ onMounted(() => {
 						<RssIcon />
 					</a>
 				</ButtonStyled>
-				<ButtonStyled circular icon-only>
+				<ButtonStyled circular>
 					<a v-tooltip="`Changelog`" href="/news/changelog" aria-label="Changelog">
 						<GitGraphIcon />
 					</a>
diff --git a/apps/frontend/src/pages/news/changelog.vue b/apps/frontend/src/pages/news/changelog.vue
index 25702e065..b59fb4f7a 100644
--- a/apps/frontend/src/pages/news/changelog.vue
+++ b/apps/frontend/src/pages/news/changelog.vue
@@ -1,5 +1,5 @@
 <template>
-	<div class="page experimental-styles-within">
+	<div class="page">
 		<h1 class="m-0 text-3xl font-extrabold">Changelog</h1>
 		<p class="my-3">Keep up-to-date on what's new with Modrinth.</p>
 		<NuxtPage />
diff --git a/apps/frontend/src/pages/news/index.vue b/apps/frontend/src/pages/news/index.vue
index 865e46655..b15e1ee82 100644
--- a/apps/frontend/src/pages/news/index.vue
+++ b/apps/frontend/src/pages/news/index.vue
@@ -41,7 +41,7 @@ useSeoMeta({
 </script>
 
 <template>
-	<div class="page experimental-styles-within py-6">
+	<div class="page py-6">
 		<div class="flex flex-wrap items-center justify-between gap-4 px-6">
 			<div>
 				<h1 class="m-0 text-3xl font-extrabold">News</h1>
@@ -53,7 +53,7 @@ useSeoMeta({
 						<RssIcon />
 					</a>
 				</ButtonStyled>
-				<ButtonStyled circular icon-only>
+				<ButtonStyled circular>
 					<a v-tooltip="`Changelog`" href="/news/changelog" aria-label="Changelog">
 						<GitGraphIcon />
 					</a>
diff --git a/apps/frontend/src/pages/organization/[id].vue b/apps/frontend/src/pages/organization/[id].vue
index 14996a7ea..de13f2df5 100644
--- a/apps/frontend/src/pages/organization/[id].vue
+++ b/apps/frontend/src/pages/organization/[id].vue
@@ -4,7 +4,7 @@
 	</div>
 	<div
 		v-else-if="organization"
-		class="experimental-styles-within new-page sidebar"
+		class="new-page sidebar"
 		:class="{ 'alt-layout': cosmetics.leftContentLayout || routeHasSettings }"
 	>
 		<ModalCreation ref="modal_creation" :organization-id="organization.id" />
@@ -176,14 +176,18 @@
 					<h2>Invitation to join {{ organization.name }}</h2>
 					<p>You have been invited to join {{ organization.name }}.</p>
 					<div class="input-group">
-						<button class="iconified-button brand-button" @click="onAcceptInvite">
-							<CheckIcon />
-							Accept
-						</button>
-						<button class="iconified-button danger-button" @click="onDeclineInvite">
-							<XIcon />
-							Decline
-						</button>
+						<ButtonStyled color="brand">
+							<button @click="onAcceptInvite">
+								<CheckIcon />
+								Accept
+							</button>
+						</ButtonStyled>
+						<ButtonStyled color="red">
+							<button @click="onDeclineInvite">
+								<XIcon />
+								Decline
+							</button>
+						</ButtonStyled>
 					</div>
 				</div>
 				<div v-if="navLinks.length > 2" class="mb-4 max-w-full overflow-x-auto">
diff --git a/apps/frontend/src/pages/organization/[id]/settings/index.vue b/apps/frontend/src/pages/organization/[id]/settings/index.vue
index 340dc4162..8d4fc9c57 100644
--- a/apps/frontend/src/pages/organization/[id]/settings/index.vue
+++ b/apps/frontend/src/pages/organization/[id]/settings/index.vue
@@ -2,7 +2,7 @@
 import { TrashIcon, UploadIcon } from '@modrinth/assets'
 import {
 	Avatar,
-	Button,
+	ButtonStyled,
 	ConfirmModal,
 	FileInput,
 	injectNotificationManager,
@@ -161,27 +161,27 @@ const onDeleteOrganization = useClientTry(async () => {
 					size="md"
 					class="project__icon"
 				/>
-				<div class="input-stack">
-					<FileInput
-						id="project-icon"
-						:max-size="262144"
-						:show-icon="true"
-						accept="image/png,image/jpeg,image/gif,image/webp"
-						class="btn"
-						prompt="Upload icon"
-						:disabled="!hasPermission"
-						@change="showPreviewImage"
-					>
-						<UploadIcon />
-					</FileInput>
-					<Button
-						v-if="!deletedIcon && (previewImage || organization.icon_url)"
-						:disabled="!hasPermission"
-						@click="markIconForDeletion"
-					>
-						<TrashIcon />
-						Remove icon
-					</Button>
+				<div class="flex flex-col gap-2">
+					<ButtonStyled>
+						<FileInput
+							id="project-icon"
+							:max-size="262144"
+							:show-icon="true"
+							accept="image/png,image/jpeg,image/gif,image/webp"
+							class="button-like"
+							prompt="Upload icon"
+							:disabled="!hasPermission"
+							@change="showPreviewImage"
+						>
+							<UploadIcon />
+						</FileInput>
+					</ButtonStyled>
+					<ButtonStyled v-if="!deletedIcon && (previewImage || organization.icon_url)">
+						<button :disabled="!hasPermission" @click="markIconForDeletion">
+							<TrashIcon />
+							Remove icon
+						</button>
+					</ButtonStyled>
 				</div>
 			</div>
 
@@ -231,10 +231,12 @@ const onDeleteOrganization = useClientTry(async () => {
 				Deleting your organization will transfer all of its projects to the organization owner. This
 				action cannot be undone.
 			</p>
-			<Button color="danger" @click="() => $refs.modal_deletion.show()">
-				<TrashIcon />
-				Delete organization
-			</Button>
+			<ButtonStyled color="red">
+				<button @click="() => $refs.modal_deletion.show()">
+					<TrashIcon />
+					Delete organization
+				</button>
+			</ButtonStyled>
 		</div>
 		<UnsavedChangesPopup
 			:original="originalState"
diff --git a/apps/frontend/src/pages/organization/[id]/settings/members.vue b/apps/frontend/src/pages/organization/[id]/settings/members.vue
index d2cd032f0..59efe57a5 100644
--- a/apps/frontend/src/pages/organization/[id]/settings/members.vue
+++ b/apps/frontend/src/pages/organization/[id]/settings/members.vue
@@ -43,19 +43,20 @@
 					@keypress.enter="() => onInviteTeamMember(organization.team, currentUsername)"
 				/>
 				<label for="username" class="hidden">Username</label>
-				<Button
-					color="primary"
-					:disabled="
-						!isPermission(
-							currentMember.organization_permissions,
-							organizationPermissions.MANAGE_INVITES,
-						)
-					"
-					@click="() => onInviteTeamMember(organization.team_id, currentUsername)"
-				>
-					<UserPlusIcon />
-					Invite
-				</Button>
+				<ButtonStyled color="brand">
+					<button
+						:disabled="
+							!isPermission(
+								currentMember.organization_permissions,
+								organizationPermissions.MANAGE_INVITES,
+							)
+						"
+						@click="() => onInviteTeamMember(organization.team_id, currentUsername)"
+					>
+						<UserPlusIcon />
+						Invite
+					</button>
+				</ButtonStyled>
 			</div>
 			<div class="adjacent-input">
 				<span class="label">
@@ -64,14 +65,15 @@
 						Remove yourself as a member of this organization.
 					</span>
 				</span>
-				<Button
-					color="danger"
-					:disabled="currentMember.is_owner"
-					@click="() => onLeaveProject(organization.team_id, auth.user.id)"
-				>
-					<UserRemoveIcon />
-					Leave organization
-				</Button>
+				<ButtonStyled color="red">
+					<button
+						:disabled="currentMember.is_owner"
+						@click="() => onLeaveProject(organization.team_id, auth.user.id)"
+					>
+						<UserRemoveIcon />
+						Leave organization
+					</button>
+				</ButtonStyled>
 			</div>
 		</div>
 		<div
@@ -94,18 +96,18 @@
 				<div class="side-buttons">
 					<Badge v-if="member.accepted" type="accepted" />
 					<Badge v-else type="pending" />
-					<Button
-						icon-only
-						transparent
-						class="dropdown-icon"
-						@click="
-							openTeamMembers.indexOf(member.user.id) === -1
-								? openTeamMembers.push(member.user.id)
-								: (openTeamMembers = openTeamMembers.filter((it) => it !== member.user.id))
-						"
-					>
-						<DropdownIcon />
-					</Button>
+					<ButtonStyled circular type="transparent">
+						<button
+							class="dropdown-icon"
+							@click="
+								openTeamMembers.indexOf(member.user.id) === -1
+									? openTeamMembers.push(member.user.id)
+									: (openTeamMembers = openTeamMembers.filter((it) => it !== member.user.id))
+							"
+						>
+							<DropdownIcon />
+						</button>
+					</ButtonStyled>
 				</div>
 			</div>
 			<div class="content">
@@ -188,44 +190,44 @@
 					</div>
 				</template>
 				<div class="input-group">
-					<Button
-						color="primary"
-						:disabled="
-							!isPermission(
-								currentMember.organization_permissions,
-								organizationPermissions.EDIT_MEMBER,
-							)
-						"
-						@click="onUpdateTeamMember(organization.team_id, member)"
-					>
-						<SaveIcon />
-						Save changes
-					</Button>
-					<Button
-						v-if="!member.is_owner"
-						color="danger"
-						:disabled="
-							!isPermission(
-								currentMember.organization_permissions,
-								organizationPermissions.EDIT_MEMBER,
-							) &&
-							!isPermission(
-								currentMember.organization_permissions,
-								organizationPermissions.REMOVE_MEMBER,
-							)
-						"
-						@click="onRemoveMember(organization.team_id, member)"
-					>
-						<UserRemoveIcon />
-						Remove member
-					</Button>
-					<Button
-						v-if="!member.is_owner && currentMember.is_owner && member.accepted"
-						@click="(e) => openTransferModal(member, e)"
-					>
-						<TransferIcon />
-						Transfer ownership
-					</Button>
+					<ButtonStyled color="brand">
+						<button
+							:disabled="
+								!isPermission(
+									currentMember.organization_permissions,
+									organizationPermissions.EDIT_MEMBER,
+								)
+							"
+							@click="onUpdateTeamMember(organization.team_id, member)"
+						>
+							<SaveIcon />
+							Save changes
+						</button>
+					</ButtonStyled>
+					<ButtonStyled v-if="!member.is_owner" color="red">
+						<button
+							:disabled="
+								!isPermission(
+									currentMember.organization_permissions,
+									organizationPermissions.EDIT_MEMBER,
+								) &&
+								!isPermission(
+									currentMember.organization_permissions,
+									organizationPermissions.REMOVE_MEMBER,
+								)
+							"
+							@click="onRemoveMember(organization.team_id, member)"
+						>
+							<UserRemoveIcon />
+							Remove member
+						</button>
+					</ButtonStyled>
+					<ButtonStyled v-if="!member.is_owner && currentMember.is_owner && member.accepted">
+						<button @click="(e) => openTransferModal(member, e)">
+							<TransferIcon />
+							Transfer ownership
+						</button>
+					</ButtonStyled>
 				</div>
 			</div>
 		</div>
@@ -244,7 +246,7 @@ import {
 import {
 	Avatar,
 	Badge,
-	Button,
+	ButtonStyled,
 	Checkbox,
 	injectNotificationManager,
 	StyledInput,
diff --git a/apps/frontend/src/pages/organization/[id]/settings/projects.vue b/apps/frontend/src/pages/organization/[id]/settings/projects.vue
index 232a92e87..3c04393d2 100644
--- a/apps/frontend/src/pages/organization/[id]/settings/projects.vue
+++ b/apps/frontend/src/pages/organization/[id]/settings/projects.vue
@@ -25,15 +25,17 @@
 							"
 							:maxlength="2048"
 						/>
-						<button
-							v-tooltip="'Clear link'"
-							aria-label="Clear link"
-							class="square-button label-button"
-							:data-active="editLinks.issues.clear"
-							@click="editLinks.issues.clear = !editLinks.issues.clear"
-						>
-							<TrashIcon />
-						</button>
+						<ButtonStyled circular>
+							<button
+								v-tooltip="'Clear link'"
+								class="label-button"
+								aria-label="Clear link"
+								:data-active="editLinks.issues.clear"
+								@click="editLinks.issues.clear = !editLinks.issues.clear"
+							>
+								<TrashIcon />
+							</button>
+						</ButtonStyled>
 					</div>
 					<label
 						for="source-code-input"
@@ -52,15 +54,17 @@
 								editLinks.source.clear ? 'Existing link will be cleared' : 'Enter a valid URL'
 							"
 						/>
-						<button
-							v-tooltip="'Clear link'"
-							aria-label="Clear link"
-							class="square-button label-button"
-							:data-active="editLinks.source.clear"
-							@click="editLinks.source.clear = !editLinks.source.clear"
-						>
-							<TrashIcon />
-						</button>
+						<ButtonStyled circular>
+							<button
+								v-tooltip="'Clear link'"
+								class="label-button"
+								aria-label="Clear link"
+								:data-active="editLinks.source.clear"
+								@click="editLinks.source.clear = !editLinks.source.clear"
+							>
+								<TrashIcon />
+							</button>
+						</ButtonStyled>
 					</div>
 					<label
 						for="wiki-page-input"
@@ -79,15 +83,17 @@
 								editLinks.wiki.clear ? 'Existing link will be cleared' : 'Enter a valid URL'
 							"
 						/>
-						<button
-							v-tooltip="'Clear link'"
-							aria-label="Clear link"
-							class="square-button label-button"
-							:data-active="editLinks.wiki.clear"
-							@click="editLinks.wiki.clear = !editLinks.wiki.clear"
-						>
-							<TrashIcon />
-						</button>
+						<ButtonStyled circular>
+							<button
+								v-tooltip="'Clear link'"
+								class="label-button"
+								aria-label="Clear link"
+								:data-active="editLinks.wiki.clear"
+								@click="editLinks.wiki.clear = !editLinks.wiki.clear"
+							>
+								<TrashIcon />
+							</button>
+						</ButtonStyled>
 					</div>
 					<label for="discord-invite-input" title="An invitation link to your Discord server.">
 						<span class="label__title">Discord invite</span>
@@ -105,15 +111,17 @@
 									: 'Enter a valid Discord invite URL'
 							"
 						/>
-						<button
-							v-tooltip="'Clear link'"
-							aria-label="Clear link"
-							class="square-button label-button"
-							:data-active="editLinks.discord.clear"
-							@click="editLinks.discord.clear = !editLinks.discord.clear"
-						>
-							<TrashIcon />
-						</button>
+						<ButtonStyled circular>
+							<button
+								v-tooltip="'Clear link'"
+								class="label-button"
+								aria-label="Clear link"
+								:data-active="editLinks.discord.clear"
+								@click="editLinks.discord.clear = !editLinks.discord.clear"
+							>
+								<TrashIcon />
+							</button>
+						</ButtonStyled>
 					</div>
 				</section>
 				<p>
@@ -143,14 +151,18 @@
 					description="Show all projects"
 				/>
 				<div class="push-right input-group">
-					<button class="iconified-button" @click="$refs.editLinksModal.hide()">
-						<XIcon />
-						Cancel
-					</button>
-					<button class="iconified-button brand-button" @click="onBulkEditLinks">
-						<SaveIcon />
-						Save changes
-					</button>
+					<ButtonStyled>
+						<button @click="$refs.editLinksModal.hide()">
+							<XIcon />
+							Cancel
+						</button>
+					</ButtonStyled>
+					<ButtonStyled color="brand">
+						<button @click="onBulkEditLinks">
+							<SaveIcon />
+							Save changes
+						</button>
+					</ButtonStyled>
 				</div>
 			</div>
 		</NewModal>
@@ -159,10 +171,12 @@
 			<div class="header__row">
 				<h2 class="header__title text-2xl">Projects</h2>
 				<div class="input-group">
-					<button class="iconified-button brand-button" @click="$refs.modal_creation.show($event)">
-						<PlusIcon />
-						{{ formatMessage(commonMessages.createAProjectButton) }}
-					</button>
+					<ButtonStyled color="brand">
+						<button @click="$refs.modal_creation.show($event)">
+							<PlusIcon />
+							{{ formatMessage(commonMessages.createAProjectButton) }}
+						</button>
+					</ButtonStyled>
 					<OrganizationProjectTransferModal
 						:projects="usersOwnedProjects || []"
 						@submit="onProjectTransferSubmit"
@@ -175,14 +189,12 @@
 			<template v-else>
 				<p>You can edit multiple projects at once by selecting them below.</p>
 				<div class="input-group">
-					<button
-						class="iconified-button"
-						:disabled="selectedProjects.length === 0"
-						@click="$refs.editLinksModal.show()"
-					>
-						<EditIcon />
-						Edit links
-					</button>
+					<ButtonStyled>
+						<button :disabled="selectedProjects.length === 0" @click="$refs.editLinksModal.show()">
+							<EditIcon />
+							Edit links
+						</button>
+					</ButtonStyled>
 					<div class="push-right">
 						<div class="labeled-control-row">
 							Sort by
@@ -193,14 +205,15 @@
 								:options="sortOptions"
 								@change="sortedProjects = updateSort(sortedProjects, sortBy, descending)"
 							/>
-							<button
-								v-tooltip="descending ? 'Descending' : 'Ascending'"
-								class="square-button"
-								@click="updateDescending()"
-							>
-								<SortDescIcon v-if="descending" />
-								<SortAscIcon v-else />
-							</button>
+							<ButtonStyled circular>
+								<button
+									v-tooltip="descending ? 'Descending' : 'Ascending'"
+									@click="updateDescending()"
+								>
+									<SortDescIcon v-if="descending" />
+									<SortAscIcon v-else />
+								</button>
+							</ButtonStyled>
 						</div>
 					</div>
 				</div>
diff --git a/apps/frontend/src/pages/plus.vue b/apps/frontend/src/pages/plus.vue
index b968ada05..d1a390f3c 100644
--- a/apps/frontend/src/pages/plus.vue
+++ b/apps/frontend/src/pages/plus.vue
@@ -38,24 +38,24 @@
 				{{ calculateSavings(price.prices.intervals.monthly, price.prices.intervals.yearly) }}% with
 				annual billing!
 			</p>
-			<nuxt-link
+			<ButtonStyled
 				v-if="auth.user && isPermission(auth.user.badges, 1 << 0)"
-				to="/settings/billing"
-				class="btn btn-purple btn-large"
+				color="purple"
+				size="large"
 			>
-				<SettingsIcon aria-hidden="true" />
-				Manage subscription
-			</nuxt-link>
-			<button v-else-if="auth.user" class="btn btn-purple btn-large" @click="purchaseModal.show()">
-				Subscribe
-			</button>
-			<nuxt-link
-				v-else
-				:to="`/auth/sign-in?redirect=${encodeURIComponent('/plus?showModal=true')}`"
-				class="btn btn-purple btn-large"
-			>
-				Subscribe
-			</nuxt-link>
+				<nuxt-link to="/settings/billing">
+					<SettingsIcon aria-hidden="true" />
+					Manage subscription
+				</nuxt-link>
+			</ButtonStyled>
+			<ButtonStyled v-else-if="auth.user" color="purple" size="large">
+				<button @click="purchaseModal.show()">Subscribe</button>
+			</ButtonStyled>
+			<ButtonStyled v-else color="purple" size="large">
+				<nuxt-link :to="`/auth/sign-in?redirect=${encodeURIComponent('/plus?showModal=true')}`">
+					Subscribe
+				</nuxt-link>
+			</ButtonStyled>
 		</div>
 	</div>
 	<div class="perks-hero">
@@ -86,7 +86,12 @@
 </template>
 <script setup>
 import { HeartIcon, ModrinthPlusIcon, SettingsIcon, SparklesIcon, StarIcon } from '@modrinth/assets'
-import { injectNotificationManager, PurchaseModal, useFormatPrice } from '@modrinth/ui'
+import {
+	ButtonStyled,
+	injectNotificationManager,
+	PurchaseModal,
+	useFormatPrice,
+} from '@modrinth/ui'
 import { calculateSavings, getCurrency } from '@modrinth/utils'
 
 import { useBaseFetch } from '@/composables/fetch.js'
diff --git a/apps/frontend/src/pages/report.vue b/apps/frontend/src/pages/report.vue
index 1f009cf55..83ae37da8 100644
--- a/apps/frontend/src/pages/report.vue
+++ b/apps/frontend/src/pages/report.vue
@@ -1,6 +1,6 @@
 <template>
 	<div class="page">
-		<div class="experimental-styles-within flex flex-col gap-2">
+		<div class="flex flex-col gap-2">
 			<RadialHeader class="top-box mb-2 flex flex-col items-center justify-center" color="orange">
 				<ScaleIcon class="h-12 w-12 text-brand-orange" />
 				<h1 class="m-3 gap-2 text-3xl font-extrabold">
diff --git a/apps/frontend/src/pages/settings/account.vue b/apps/frontend/src/pages/settings/account.vue
index 44c767bf7..a55c31617 100644
--- a/apps/frontend/src/pages/settings/account.vue
+++ b/apps/frontend/src/pages/settings/account.vue
@@ -27,19 +27,18 @@
 					@keyup.enter="saveEmail()"
 				/>
 				<div class="input-group push-right">
-					<button class="iconified-button" @click="$refs.changeEmailModal.hide()">
-						<XIcon />
-						{{ formatMessage(commonMessages.cancelButton) }}
-					</button>
-					<button
-						type="button"
-						class="iconified-button brand-button"
-						:disabled="!email"
-						@click="saveEmail()"
-					>
-						<SaveIcon />
-						{{ formatMessage(messages.saveEmailButton) }}
-					</button>
+					<ButtonStyled>
+						<button @click="$refs.changeEmailModal.hide()">
+							<XIcon />
+							{{ formatMessage(commonMessages.cancelButton) }}
+						</button>
+					</ButtonStyled>
+					<ButtonStyled color="brand">
+						<button :disabled="!email" @click="saveEmail()">
+							<SaveIcon />
+							{{ formatMessage(messages.saveEmailButton) }}
+						</button>
+					</ButtonStyled>
 				</div>
 			</div>
 		</Modal>
@@ -108,44 +107,43 @@
 				</template>
 				<p></p>
 				<div class="input-group push-right">
-					<button class="iconified-button" @click="$refs.managePasswordModal.hide()">
-						<XIcon />
-						{{ formatMessage(commonMessages.cancelButton) }}
-					</button>
-					<template v-if="removePasswordMode">
-						<button
-							type="button"
-							class="iconified-button danger-button"
-							:disabled="!oldPassword"
-							@click="savePassword"
-						>
-							<TrashIcon />
-							{{ formatMessage(messages.removePasswordButton) }}
+					<ButtonStyled>
+						<button @click="$refs.managePasswordModal.hide()">
+							<XIcon />
+							{{ formatMessage(commonMessages.cancelButton) }}
 						</button>
+					</ButtonStyled>
+					<template v-if="removePasswordMode">
+						<ButtonStyled color="red">
+							<button :disabled="!oldPassword" @click="savePassword">
+								<TrashIcon />
+								{{ formatMessage(messages.removePasswordButton) }}
+							</button>
+						</ButtonStyled>
 					</template>
 					<template v-else>
-						<button
+						<ButtonStyled
 							v-if="auth.user.has_password && auth.user.auth_providers.length > 0"
-							type="button"
-							class="iconified-button danger-button"
-							@click="removePasswordMode = true"
+							color="red"
 						>
-							<TrashIcon />
-							{{ formatMessage(messages.removePasswordButton) }}
-						</button>
-						<button
-							type="button"
-							class="iconified-button brand-button"
-							:disabled="
-								newPassword.length == 0 ||
-								(auth.user.has_password && oldPassword.length == 0) ||
-								newPassword !== confirmNewPassword
-							"
-							@click="savePassword"
-						>
-							<SaveIcon />
-							{{ formatMessage(messages.savePasswordButton) }}
-						</button>
+							<button @click="removePasswordMode = true">
+								<TrashIcon />
+								{{ formatMessage(messages.removePasswordButton) }}
+							</button>
+						</ButtonStyled>
+						<ButtonStyled color="brand">
+							<button
+								:disabled="
+									newPassword.length == 0 ||
+									(auth.user.has_password && oldPassword.length == 0) ||
+									newPassword !== confirmNewPassword
+								"
+								@click="savePassword"
+							>
+								<SaveIcon />
+								{{ formatMessage(messages.savePasswordButton) }}
+							</button>
+						</ButtonStyled>
 					</template>
 				</div>
 			</div>
@@ -173,14 +171,18 @@
 						{{ formatMessage(messages.twoFactorIncorrectError) }}
 					</p>
 					<div class="input-group push-right">
-						<button class="iconified-button" @click="$refs.manageTwoFactorModal.hide()">
-							<XIcon />
-							{{ formatMessage(commonMessages.cancelButton) }}
-						</button>
-						<button class="iconified-button danger-button" @click="removeTwoFactor">
-							<TrashIcon />
-							{{ formatMessage(messages.twoFactorRemoveButton) }}
-						</button>
+						<ButtonStyled>
+							<button @click="$refs.manageTwoFactorModal.hide()">
+								<XIcon />
+								{{ formatMessage(commonMessages.cancelButton) }}
+							</button>
+						</ButtonStyled>
+						<ButtonStyled color="red">
+							<button @click="removeTwoFactor">
+								<TrashIcon />
+								{{ formatMessage(messages.twoFactorRemoveButton) }}
+							</button>
+						</ButtonStyled>
 					</div>
 				</template>
 				<template v-else>
@@ -247,34 +249,30 @@
 						</ul>
 					</template>
 					<div class="input-group push-right">
-						<button v-if="twoFactorStep === 1" class="iconified-button" @click="twoFactorStep = 0">
-							<LeftArrowIcon />
-							{{ formatMessage(commonMessages.backButton) }}
-						</button>
-						<button
-							v-if="twoFactorStep !== 2"
-							class="iconified-button"
-							@click="$refs.manageTwoFactorModal.hide()"
-						>
-							<XIcon />
-							{{ formatMessage(commonMessages.cancelButton) }}
-						</button>
-						<button
-							v-if="twoFactorStep <= 1"
-							class="iconified-button brand-button"
-							@click="twoFactorStep === 1 ? verifyTwoFactorCode() : (twoFactorStep = 1)"
-						>
-							<RightArrowIcon />
-							{{ formatMessage(commonMessages.continueButton) }}
-						</button>
-						<button
-							v-if="twoFactorStep === 2"
-							class="iconified-button brand-button"
-							@click="$refs.manageTwoFactorModal.hide()"
-						>
-							<CheckIcon />
-							{{ formatMessage(messages.completeSetupButton) }}
-						</button>
+						<ButtonStyled v-if="twoFactorStep === 1">
+							<button @click="twoFactorStep = 0">
+								<LeftArrowIcon />
+								{{ formatMessage(commonMessages.backButton) }}
+							</button>
+						</ButtonStyled>
+						<ButtonStyled v-if="twoFactorStep !== 2">
+							<button @click="$refs.manageTwoFactorModal.hide()">
+								<XIcon />
+								{{ formatMessage(commonMessages.cancelButton) }}
+							</button>
+						</ButtonStyled>
+						<ButtonStyled v-if="twoFactorStep <= 1" color="brand">
+							<button @click="twoFactorStep === 1 ? verifyTwoFactorCode() : (twoFactorStep = 1)">
+								<RightArrowIcon />
+								{{ formatMessage(commonMessages.continueButton) }}
+							</button>
+						</ButtonStyled>
+						<ButtonStyled v-if="twoFactorStep === 2" color="brand">
+							<button @click="$refs.manageTwoFactorModal.hide()">
+								<CheckIcon />
+								{{ formatMessage(messages.completeSetupButton) }}
+							</button>
+						</ButtonStyled>
 					</div>
 				</template>
 			</div>
@@ -295,29 +293,27 @@
 							<span><component :is="provider.icon" /> {{ provider.display }}</span>
 						</div>
 						<div class="table-text manage table-cell">
-							<button
-								v-if="auth.user.auth_providers.includes(provider.id)"
-								class="btn"
-								@click="handleRemoveAuthProvider(provider.id)"
-							>
-								<TrashIcon /> {{ formatMessage(commonMessages.removeButton) }}
-							</button>
-							<a
-								v-else
-								class="btn"
-								:href="`${getAuthUrl(provider.id, '/settings/account')}&token=${auth.token}`"
-							>
-								<ExternalIcon /> {{ formatMessage(messages.providerAddButton) }}
-							</a>
+							<ButtonStyled v-if="auth.user.auth_providers.includes(provider.id)">
+								<button @click="handleRemoveAuthProvider(provider.id)">
+									<TrashIcon /> {{ formatMessage(commonMessages.removeButton) }}
+								</button>
+							</ButtonStyled>
+							<ButtonStyled v-else>
+								<a :href="`${getAuthUrl(provider.id, '/settings/account')}&token=${auth.token}`">
+									<ExternalIcon /> {{ formatMessage(messages.providerAddButton) }}
+								</a>
+							</ButtonStyled>
 						</div>
 					</div>
 				</div>
 				<p></p>
 				<div class="input-group push-right">
-					<button class="iconified-button" @click="$refs.manageProvidersModal.hide()">
-						<XIcon />
-						{{ formatMessage(commonMessages.closeButton) }}
-					</button>
+					<ButtonStyled>
+						<button @click="$refs.manageProvidersModal.hide()">
+							<XIcon />
+							{{ formatMessage(commonMessages.closeButton) }}
+						</button>
+					</ButtonStyled>
 				</div>
 			</div>
 		</Modal>
@@ -332,16 +328,18 @@
 					}}</span>
 				</label>
 				<div>
-					<button class="iconified-button" @click="$refs.changeEmailModal.show()">
-						<template v-if="auth.user.email">
-							<EditIcon />
-							{{ formatMessage(messages.changeEmailButton) }}
-						</template>
-						<template v-else>
-							<PlusIcon />
-							{{ formatMessage(messages.addEmailButton) }}
-						</template>
-					</button>
+					<ButtonStyled>
+						<button @click="$refs.changeEmailModal.show()">
+							<template v-if="auth.user.email">
+								<EditIcon />
+								{{ formatMessage(messages.changeEmailButton) }}
+							</template>
+							<template v-else>
+								<PlusIcon />
+								{{ formatMessage(messages.addEmailButton) }}
+							</template>
+						</button>
+					</ButtonStyled>
 				</div>
 			</div>
 			<div class="adjacent-input">
@@ -359,24 +357,25 @@
 					</span>
 				</label>
 				<div>
-					<button
-						class="iconified-button"
-						@click="
-							() => {
-								oldPassword = ''
-								newPassword = ''
-								confirmNewPassword = ''
-								removePasswordMode = false
-								$refs.managePasswordModal.show()
-							}
-						"
-					>
-						<KeyIcon />
-						<template v-if="auth.user.has_password">{{
-							formatMessage(messages.changePasswordButton)
-						}}</template>
-						<template v-else> {{ formatMessage(messages.addPasswordButton) }} </template>
-					</button>
+					<ButtonStyled>
+						<button
+							@click="
+								() => {
+									oldPassword = ''
+									newPassword = ''
+									confirmNewPassword = ''
+									removePasswordMode = false
+									$refs.managePasswordModal.show()
+								}
+							"
+						>
+							<KeyIcon />
+							<template v-if="auth.user.has_password">{{
+								formatMessage(messages.changePasswordButton)
+							}}</template>
+							<template v-else> {{ formatMessage(messages.addPasswordButton) }} </template>
+						</button>
+					</ButtonStyled>
 				</div>
 			</div>
 			<div class="adjacent-input">
@@ -387,14 +386,16 @@
 					}}</span>
 				</label>
 				<div>
-					<button class="iconified-button" @click="showTwoFactorModal">
-						<template v-if="auth.user.has_totp">
-							<TrashIcon /> {{ formatMessage(messages.twoFactorRemoveButton) }}
-						</template>
-						<template v-else>
-							<PlusIcon /> {{ formatMessage(messages.twoFactorSetupButton) }}
-						</template>
-					</button>
+					<ButtonStyled>
+						<button @click="showTwoFactorModal">
+							<template v-if="auth.user.has_totp">
+								<TrashIcon /> {{ formatMessage(messages.twoFactorRemoveButton) }}
+							</template>
+							<template v-else>
+								<PlusIcon /> {{ formatMessage(messages.twoFactorSetupButton) }}
+							</template>
+						</button>
+					</ButtonStyled>
 				</div>
 			</div>
 			<div class="adjacent-input">
@@ -405,9 +406,11 @@
 					}}</span>
 				</label>
 				<div>
-					<button class="iconified-button" @click="$refs.manageProvidersModal.show()">
-						<SettingsIcon /> {{ formatMessage(messages.manageProvidersButton) }}
-					</button>
+					<ButtonStyled>
+						<button @click="$refs.manageProvidersModal.show()">
+							<SettingsIcon /> {{ formatMessage(messages.manageProvidersButton) }}
+						</button>
+					</ButtonStyled>
 				</div>
 			</div>
 		</section>
@@ -415,31 +418,33 @@
 		<section id="data-export" class="universal-card">
 			<h2>{{ formatMessage(messages.dataExportTitle) }}</h2>
 			<p>{{ formatMessage(messages.dataExportDescription) }}</p>
-			<a v-if="generated" class="iconified-button" :href="generated" download="export.json">
-				<DownloadIcon />
-				{{ formatMessage(messages.downloadExportButton) }}
-			</a>
-			<button v-else class="iconified-button" :disabled="generatingExport" @click="exportData">
-				<template v-if="generatingExport">
-					<UpdatedIcon /> {{ formatMessage(messages.generatingExportButton) }}
-				</template>
-				<template v-else>
-					<UpdatedIcon /> {{ formatMessage(messages.generateExportButton) }}
-				</template>
-			</button>
+			<ButtonStyled v-if="generated">
+				<a :href="generated" download="export.json">
+					<DownloadIcon />
+					{{ formatMessage(messages.downloadExportButton) }}
+				</a>
+			</ButtonStyled>
+			<ButtonStyled v-else>
+				<button :disabled="generatingExport" @click="exportData">
+					<template v-if="generatingExport">
+						<UpdatedIcon /> {{ formatMessage(messages.generatingExportButton) }}
+					</template>
+					<template v-else>
+						<UpdatedIcon /> {{ formatMessage(messages.generateExportButton) }}
+					</template>
+				</button>
+			</ButtonStyled>
 		</section>
 
 		<section id="delete-account" class="universal-card">
 			<h2>{{ formatMessage(messages.deleteAccountSectionTitle) }}</h2>
 			<p>{{ formatMessage(messages.deleteAccountSectionDescription) }}</p>
-			<button
-				type="button"
-				class="iconified-button danger-button"
-				@click="$refs.modal_confirm.show()"
-			>
-				<TrashIcon />
-				{{ formatMessage(messages.deleteAccountButton) }}
-			</button>
+			<ButtonStyled color="red">
+				<button type="button" @click="$refs.modal_confirm.show()">
+					<TrashIcon />
+					{{ formatMessage(messages.deleteAccountButton) }}
+				</button>
+			</ButtonStyled>
 		</section>
 	</div>
 </template>
@@ -460,6 +465,7 @@ import {
 	XIcon,
 } from '@modrinth/assets'
 import {
+	ButtonStyled,
 	commonMessages,
 	ConfirmModal,
 	defineMessages,
diff --git a/apps/frontend/src/pages/settings/applications.vue b/apps/frontend/src/pages/settings/applications.vue
index 4cf333ba3..bfb1e5db0 100644
--- a/apps/frontend/src/pages/settings/applications.vue
+++ b/apps/frontend/src/pages/settings/applications.vue
@@ -24,15 +24,17 @@
 				</label>
 				<div v-if="editingId" class="icon-submission">
 					<Avatar size="md" :src="icon" />
-					<FileInput
-						:max-size="262144"
-						class="btn"
-						:prompt="formatMessage(messages.uploadIcon)"
-						accept="image/png,image/jpeg,image/gif,image/webp"
-						@change="onImageSelection"
-					>
-						<UploadIcon />
-					</FileInput>
+					<ButtonStyled>
+						<FileInput
+							:max-size="262144"
+							class="button-like"
+							:prompt="formatMessage(messages.uploadIcon)"
+							accept="image/png,image/jpeg,image/gif,image/webp"
+							@change="onImageSelection"
+						>
+							<UploadIcon />
+						</FileInput>
+					</ButtonStyled>
 				</div>
 				<label v-if="editingId" for="app-url">
 					<span class="label__title">{{ formatMessage(messages.urlLabel) }}</span>
@@ -94,51 +96,46 @@
 								autocomplete="off"
 								:placeholder="formatMessage(messages.redirectUriPlaceholder)"
 							/>
-							<Button v-if="index !== 0" icon-only @click="() => redirectUris.splice(index, 1)">
-								<TrashIcon />
-							</Button>
-							<Button
-								v-if="index === 0"
-								color="primary"
-								icon-only
-								@click="() => redirectUris.push('')"
-							>
-								<PlusIcon /> {{ formatMessage(messages.addMore) }}
-							</Button>
+							<ButtonStyled v-if="index !== 0" circular>
+								<button @click="() => redirectUris.splice(index, 1)">
+									<TrashIcon />
+								</button>
+							</ButtonStyled>
+							<ButtonStyled v-if="index === 0" color="brand">
+								<button @click="() => redirectUris.push('')">
+									<PlusIcon /> {{ formatMessage(messages.addMore) }}
+								</button>
+							</ButtonStyled>
 						</div>
 					</div>
 					<div v-if="redirectUris.length <= 0">
-						<Button color="primary" icon-only @click="() => redirectUris.push('')">
-							<PlusIcon /> {{ formatMessage(messages.addRedirectUri) }}
-						</Button>
+						<ButtonStyled color="brand">
+							<button @click="() => redirectUris.push('')">
+								<PlusIcon /> {{ formatMessage(messages.addRedirectUri) }}
+							</button>
+						</ButtonStyled>
 					</div>
 				</div>
 
 				<div class="submit-row input-group push-right">
-					<button class="iconified-button" @click="$refs.appModal.hide()">
-						<XIcon />
-						{{ formatMessage(messages.cancel) }}
-					</button>
-					<button
-						v-if="editingId"
-						:disabled="!canSubmit"
-						type="button"
-						class="iconified-button brand-button"
-						@click="editApp"
-					>
-						<SaveIcon />
-						{{ formatMessage(messages.saveChanges) }}
-					</button>
-					<button
-						v-else
-						:disabled="!canSubmit"
-						type="button"
-						class="iconified-button brand-button"
-						@click="createApp"
-					>
-						<PlusIcon />
-						{{ formatMessage(messages.createApp) }}
-					</button>
+					<ButtonStyled>
+						<button @click="$refs.appModal.hide()">
+							<XIcon />
+							{{ formatMessage(messages.cancel) }}
+						</button>
+					</ButtonStyled>
+					<ButtonStyled v-if="editingId" color="brand">
+						<button :disabled="!canSubmit" @click="editApp">
+							<SaveIcon />
+							{{ formatMessage(messages.saveChanges) }}
+						</button>
+					</ButtonStyled>
+					<ButtonStyled v-else color="brand">
+						<button :disabled="!canSubmit" @click="createApp">
+							<PlusIcon />
+							{{ formatMessage(messages.createApp) }}
+						</button>
+					</ButtonStyled>
 				</div>
 			</div>
 		</Modal>
@@ -147,22 +144,22 @@
 			<div class="header__title">
 				<h2 class="text-2xl">{{ formatMessage(commonSettingsMessages.applications) }}</h2>
 			</div>
-			<button
-				class="btn btn-primary"
-				@click="
-					() => {
-						name = null
-						icon = null
-						scopesVal = 0
-						redirectUris = ['']
-						editingId = null
-						expires = null
-						$refs.appModal.show()
-					}
-				"
-			>
-				<PlusIcon /> {{ formatMessage(messages.newApplication) }}
-			</button>
+			<ButtonStyled color="brand">
+				<button
+					@click="
+						() => {
+							name = null
+							icon = null
+							scopesVal = 0
+							redirectUris = ['']
+							editingId = null
+							$refs.appModal.show()
+						}
+					"
+				>
+					<PlusIcon /> {{ formatMessage(messages.newApplication) }}
+				</button>
+			</ButtonStyled>
 		</div>
 		<p>
 			<IntlFormatted :message-id="messages.descriptionIntro">
@@ -210,34 +207,35 @@
 				</div>
 			</div>
 			<div class="input-group">
-				<Button
-					icon-only
-					@click="
-						() => {
-							setForm({
-								...app,
-								redirect_uris: app.redirect_uris.map((u) => u.uri) || [],
-							})
-							$refs.appModal.show()
-						}
-					"
-				>
-					<EditIcon />
-					{{ formatMessage(messages.edit) }}
-				</Button>
-				<Button
-					color="danger"
-					icon-only
-					@click="
-						() => {
-							editingId = app.id
-							$refs.modal_confirm.show()
-						}
-					"
-				>
-					<TrashIcon />
-					{{ formatMessage(messages.delete) }}
-				</Button>
+				<ButtonStyled>
+					<button
+						@click="
+							() => {
+								setForm({
+									...app,
+									redirect_uris: app.redirect_uris.map((u) => u.uri) || [],
+								})
+								$refs.appModal.show()
+							}
+						"
+					>
+						<EditIcon />
+						{{ formatMessage(messages.edit) }}
+					</button>
+				</ButtonStyled>
+				<ButtonStyled color="red">
+					<button
+						@click="
+							() => {
+								editingId = app.id
+								$refs.modal_confirm.show()
+							}
+						"
+					>
+						<TrashIcon />
+						{{ formatMessage(messages.delete) }}
+					</button>
+				</ButtonStyled>
 			</div>
 		</div>
 	</div>
@@ -246,7 +244,7 @@
 import { EditIcon, PlusIcon, SaveIcon, TrashIcon, UploadIcon, XIcon } from '@modrinth/assets'
 import {
 	Avatar,
-	Button,
+	ButtonStyled,
 	Checkbox,
 	commonMessages,
 	commonSettingsMessages,
diff --git a/apps/frontend/src/pages/settings/authorizations.vue b/apps/frontend/src/pages/settings/authorizations.vue
index 134254170..5c5df7636 100644
--- a/apps/frontend/src/pages/settings/authorizations.vue
+++ b/apps/frontend/src/pages/settings/authorizations.vue
@@ -69,19 +69,19 @@
 			</div>
 
 			<div class="input-group">
-				<Button
-					color="danger"
-					icon-only
-					@click="
-						() => {
-							revokingId = authorization.app_id
-							$refs.modal_confirm.show()
-						}
-					"
-				>
-					<TrashIcon />
-					{{ formatMessage(messages.revokeAction) }}
-				</Button>
+				<ButtonStyled color="red">
+					<button
+						@click="
+							() => {
+								revokingId = authorization.app_id
+								$refs.modal_confirm.show()
+							}
+						"
+					>
+						<TrashIcon />
+						{{ formatMessage(messages.revokeAction) }}
+					</button>
+				</ButtonStyled>
 			</div>
 		</div>
 	</div>
@@ -90,7 +90,7 @@
 import { CheckIcon, TrashIcon } from '@modrinth/assets'
 import {
 	Avatar,
-	Button,
+	ButtonStyled,
 	commonMessages,
 	commonSettingsMessages,
 	ConfirmModal,
diff --git a/apps/frontend/src/pages/settings/billing/index.vue b/apps/frontend/src/pages/settings/billing/index.vue
index e218ef0ea..b400b0e57 100644
--- a/apps/frontend/src/pages/settings/billing/index.vue
+++ b/apps/frontend/src/pages/settings/billing/index.vue
@@ -1,7 +1,7 @@
 <template>
 	<ServersUpgradeModalWrapper ref="upgradeModal" />
 	<ResubscribeModal ref="pyroResubscribeModal" @resubscribe="handlePyroResubscribeConfirm" />
-	<section class="universal-card experimental-styles-within">
+	<section class="universal-card">
 		<h2>{{ formatMessage(messages.subscriptionTitle) }}</h2>
 		<p>{{ formatMessage(messages.subscriptionDescription) }}</p>
 		<div class="universal-card recessed">
@@ -533,7 +533,7 @@
 		</div>
 	</section>
 
-	<section class="universal-card experimental-styles-within">
+	<section class="universal-card">
 		<ConfirmModal
 			ref="modal_confirm"
 			:title="formatMessage(deleteModalMessages.title)"
@@ -573,12 +573,16 @@
 			<div class="header__title">
 				<h2 class="text-2xl">{{ formatMessage(messages.paymentMethodTitle) }}</h2>
 			</div>
-			<nuxt-link class="btn" to="/settings/billing/charges">
-				<HistoryIcon /> {{ formatMessage(messages.paymentMethodHistory) }}
-			</nuxt-link>
-			<button class="btn" @click="addPaymentMethod">
-				<PlusIcon /> {{ formatMessage(messages.paymentMethodAdd) }}
-			</button>
+			<ButtonStyled>
+				<nuxt-link to="/settings/billing/charges">
+					<HistoryIcon /> {{ formatMessage(messages.paymentMethodHistory) }}
+				</nuxt-link>
+			</ButtonStyled>
+			<ButtonStyled>
+				<button @click="addPaymentMethod">
+					<PlusIcon /> {{ formatMessage(messages.paymentMethodAdd) }}
+				</button>
+			</ButtonStyled>
 		</div>
 		<div
 			v-if="!paymentMethods || paymentMethods.length === 0"
@@ -637,41 +641,43 @@
 						</div>
 					</div>
 				</div>
-				<OverflowMenu
-					:dropdown-id="`${baseId}-payment-method-overflow-${index}`"
-					class="btn icon-only transparent"
-					:options="
-						[
-							{
-								id: 'primary',
-								action: () => editPaymentMethod(index, true),
-							},
-							{
-								id: 'remove',
-								action: () => {
-									removePaymentMethodIndex = index
-									$refs.modal_confirm.show()
+				<ButtonStyled circular type="transparent">
+					<OverflowMenu
+						:dropdown-id="`${baseId}-payment-method-overflow-${index}`"
+						class="btn-dropdown-animation !w-10"
+						:options="
+							[
+								{
+									id: 'primary',
+									action: () => editPaymentMethod(index, true),
 								},
-								color: 'red',
-								hoverOnly: true,
-							},
-						].slice(primaryPaymentMethodId === method.id ? 1 : 0, 2)
-					"
-				>
-					<MoreVerticalIcon />
-					<template #primary>
-						<StarIcon />
-						{{ formatMessage(messages.paymentMethodMakePrimary) }}
-					</template>
-					<template #edit>
-						<EditIcon />
-						{{ formatMessage(commonMessages.editButton) }}
-					</template>
-					<template #remove>
-						<TrashIcon />
-						{{ formatMessage(commonMessages.deleteLabel) }}
-					</template>
-				</OverflowMenu>
+								{
+									id: 'remove',
+									action: () => {
+										removePaymentMethodIndex = index
+										$refs.modal_confirm.show()
+									},
+									color: 'red',
+									hoverOnly: true,
+								},
+							].slice(primaryPaymentMethodId === method.id ? 1 : 0, 2)
+						"
+					>
+						<MoreVerticalIcon />
+						<template #primary>
+							<StarIcon />
+							{{ formatMessage(messages.paymentMethodMakePrimary) }}
+						</template>
+						<template #edit>
+							<EditIcon />
+							{{ formatMessage(commonMessages.editButton) }}
+						</template>
+						<template #remove>
+							<TrashIcon />
+							{{ formatMessage(commonMessages.deleteLabel) }}
+						</template>
+					</OverflowMenu>
+				</ButtonStyled>
 			</div>
 		</div>
 	</section>
diff --git a/apps/frontend/src/pages/settings/index.vue b/apps/frontend/src/pages/settings/index.vue
index 1591f1e31..9ce6e58f1 100644
--- a/apps/frontend/src/pages/settings/index.vue
+++ b/apps/frontend/src/pages/settings/index.vue
@@ -9,9 +9,11 @@
 					</strong>
 				</template>
 			</IntlFormatted>
-			<Button :action="() => disableDeveloperMode()">
-				{{ formatMessage(developerModeBanner.deactivate) }}
-			</Button>
+			<ButtonStyled color="red" type="highlight">
+				<button class="mt-3" @click="disableDeveloperMode()">
+					{{ formatMessage(developerModeBanner.deactivate) }}
+				</button>
+			</ButtonStyled>
 		</MessageBanner>
 		<section class="universal-card">
 			<h2 class="text-2xl">{{ formatMessage(colorTheme.title) }}</h2>
@@ -178,7 +180,7 @@
 <script setup lang="ts">
 import { CodeIcon, RadioButtonCheckedIcon, RadioButtonIcon } from '@modrinth/assets'
 import {
-	Button,
+	ButtonStyled,
 	defineMessages,
 	injectNotificationManager,
 	IntlFormatted,
@@ -506,9 +508,5 @@ const listTypes = computed(() => {
 		margin-bottom: 2px;
 		margin-right: 0.5rem;
 	}
-
-	.btn {
-		margin-top: var(--gap-sm);
-	}
 }
 </style>
diff --git a/apps/frontend/src/pages/settings/pats.vue b/apps/frontend/src/pages/settings/pats.vue
index 264988874..019317476 100644
--- a/apps/frontend/src/pages/settings/pats.vue
+++ b/apps/frontend/src/pages/settings/pats.vue
@@ -66,31 +66,25 @@
 					<p></p>
 				</div>
 
-				<div class="input-group push-right">
-					<button class="iconified-button" @click="$refs.patModal.hide()">
-						<XIcon />
-						{{ formatMessage(commonMessages.cancelButton) }}
-					</button>
-					<button
-						v-if="editPatId !== null"
-						:disabled="loading || !name || !expires"
-						type="button"
-						class="iconified-button brand-button"
-						@click="editPat"
-					>
-						<SaveIcon />
-						{{ formatMessage(commonMessages.saveChangesButton) }}
-					</button>
-					<button
-						v-else
-						:disabled="loading || !name || !expires"
-						type="button"
-						class="iconified-button brand-button"
-						@click="createPat"
-					>
-						<PlusIcon />
-						{{ formatMessage(createModalMessages.action) }}
-					</button>
+				<div class="ml-auto flex gap-2">
+					<ButtonStyled type="outlined">
+						<button @click="$refs.patModal.hide()">
+							<XIcon />
+							{{ formatMessage(commonMessages.cancelButton) }}
+						</button>
+					</ButtonStyled>
+					<ButtonStyled v-if="editPatId !== null" color="brand">
+						<button :disabled="loading || !name || !expires" @click="editPat">
+							<SaveIcon />
+							{{ formatMessage(commonMessages.saveChangesButton) }}
+						</button>
+					</ButtonStyled>
+					<ButtonStyled v-else color="brand">
+						<button :disabled="loading || !name || !expires" @click="createPat">
+							<PlusIcon />
+							{{ formatMessage(createModalMessages.action) }}
+						</button>
+					</ButtonStyled>
 				</div>
 			</div>
 		</NewModal>
@@ -99,20 +93,21 @@
 			<div class="header__title">
 				<h2 class="text-2xl">{{ formatMessage(commonSettingsMessages.pats) }}</h2>
 			</div>
-			<button
-				class="btn btn-primary"
-				@click="
-					() => {
-						name = null
-						scopesVal = 0
-						expires = null
-						editPatId = null
-						$refs.patModal.show()
-					}
-				"
-			>
-				<PlusIcon /> {{ formatMessage(messages.create) }}
-			</button>
+			<ButtonStyled color="brand">
+				<button
+					@click="
+						() => {
+							name = null
+							scopesVal = 0
+							expires = null
+							editPatId = null
+							$refs.patModal.show()
+						}
+					"
+				>
+					<PlusIcon /> {{ formatMessage(messages.create) }}
+				</button>
+			</ButtonStyled>
 		</div>
 		<p>
 			<IntlFormatted :message-id="messages.description">
@@ -172,31 +167,33 @@
 				</div>
 			</div>
 			<div class="token-actions ml-auto flex flex-col gap-2">
-				<button
-					class="iconified-button raised-button"
-					@click="
-						() => {
-							editPatId = pat.id
-							name = pat.name
-							scopesVal = pat.scopes
-							expires = $dayjs(pat.expires).format('YYYY-MM-DD')
-							$refs.patModal.show()
-						}
-					"
-				>
-					<EditIcon /> {{ formatMessage(tokenMessages.edit) }}
-				</button>
-				<button
-					class="iconified-button raised-button"
-					@click="
-						() => {
-							deletePatIndex = pat.id
-							$refs.modal_confirm.show()
-						}
-					"
-				>
-					<TrashIcon /> {{ formatMessage(tokenMessages.revoke) }}
-				</button>
+				<ButtonStyled>
+					<button
+						@click="
+							() => {
+								editPatId = pat.id
+								name = pat.name
+								scopesVal = pat.scopes
+								expires = $dayjs(pat.expires).format('YYYY-MM-DD')
+								$refs.patModal.show()
+							}
+						"
+					>
+						<EditIcon /> {{ formatMessage(tokenMessages.edit) }}
+					</button>
+				</ButtonStyled>
+				<ButtonStyled>
+					<button
+						@click="
+							() => {
+								deletePatIndex = pat.id
+								$refs.modal_confirm.show()
+							}
+						"
+					>
+						<TrashIcon /> {{ formatMessage(tokenMessages.revoke) }}
+					</button>
+				</ButtonStyled>
 			</div>
 		</div>
 	</div>
@@ -204,6 +201,7 @@
 <script setup>
 import { EditIcon, PlusIcon, SaveIcon, TrashIcon, XIcon } from '@modrinth/assets'
 import {
+	ButtonStyled,
 	Checkbox,
 	commonMessages,
 	commonSettingsMessages,
diff --git a/apps/frontend/src/pages/settings/profile.vue b/apps/frontend/src/pages/settings/profile.vue
index 3e62e9477..b936f655a 100644
--- a/apps/frontend/src/pages/settings/profile.vue
+++ b/apps/frontend/src/pages/settings/profile.vue
@@ -21,33 +21,38 @@
 					circle
 					:alt="auth.user.username"
 				/>
-				<div class="input-stack">
-					<FileInput
-						:max-size="262144"
-						:show-icon="true"
-						class="btn"
-						:prompt="formatMessage(commonMessages.uploadImageButton)"
-						accept="image/png,image/jpeg,image/gif,image/webp"
-						@change="showPreviewImage"
-					>
-						<UploadIcon />
-					</FileInput>
-					<Button v-if="avatarUrl !== null" :action="removePreviewImage">
-						<TrashIcon />
-						{{ formatMessage(commonMessages.removeImageButton) }}
-					</Button>
-					<Button
-						v-if="previewImage"
-						:action="
-							() => {
-								icon = null
-								previewImage = null
-							}
-						"
-					>
-						<UndoIcon />
-						{{ formatMessage(commonMessages.resetButton) }}
-					</Button>
+				<div class="flex flex-col gap-2">
+					<ButtonStyled>
+						<FileInput
+							:max-size="262144"
+							:show-icon="true"
+							class="button-like"
+							:prompt="formatMessage(commonMessages.uploadImageButton)"
+							accept="image/png,image/jpeg,image/gif,image/webp"
+							@change="showPreviewImage"
+						>
+							<UploadIcon />
+						</FileInput>
+					</ButtonStyled>
+					<ButtonStyled v-if="avatarUrl !== null">
+						<button @click="removePreviewImage">
+							<TrashIcon />
+							{{ formatMessage(commonMessages.removeImageButton) }}
+						</button>
+					</ButtonStyled>
+					<ButtonStyled v-if="previewImage">
+						<button
+							@click="
+								() => {
+									icon = null
+									previewImage = null
+								}
+							"
+						>
+							<UndoIcon />
+							{{ formatMessage(commonMessages.resetButton) }}
+						</button>
+					</ButtonStyled>
 				</div>
 			</div>
 			<label for="username-field">
@@ -65,9 +70,11 @@
 			</label>
 			<StyledInput id="bio-field" v-model="current.bio" multiline />
 			<div class="input-group mt-4">
-				<Button :link="`/user/${auth.user.username}`">
-					<UserIcon /> {{ formatMessage(commonMessages.visitYourProfile) }}
-				</Button>
+				<ButtonStyled>
+					<NuxtLink :to="`/user/${auth.user.username}`">
+						<UserIcon /> {{ formatMessage(commonMessages.visitYourProfile) }}
+					</NuxtLink>
+				</ButtonStyled>
 			</div>
 		</section>
 		<UnsavedChangesPopup
@@ -84,7 +91,7 @@
 import { TrashIcon, UndoIcon, UploadIcon, UserIcon } from '@modrinth/assets'
 import {
 	Avatar,
-	Button,
+	ButtonStyled,
 	commonMessages,
 	defineMessages,
 	FileInput,
diff --git a/apps/frontend/src/pages/settings/sessions.vue b/apps/frontend/src/pages/settings/sessions.vue
index c1af16b31..993844a10 100644
--- a/apps/frontend/src/pages/settings/sessions.vue
+++ b/apps/frontend/src/pages/settings/sessions.vue
@@ -34,9 +34,11 @@
 			</div>
 			<div class="input-group">
 				<i v-if="session.current">{{ formatMessage(messages.currentSessionLabel) }}</i>
-				<button v-else class="iconified-button raised-button" @click="revokeSession(session.id)">
-					<XIcon /> {{ formatMessage(messages.revokeSessionButton) }}
-				</button>
+				<ButtonStyled v-else>
+					<button @click="revokeSession(session.id)">
+						<XIcon /> {{ formatMessage(messages.revokeSessionButton) }}
+					</button>
+				</ButtonStyled>
 			</div>
 		</div>
 	</div>
@@ -44,6 +46,7 @@
 <script setup>
 import { XIcon } from '@modrinth/assets'
 import {
+	ButtonStyled,
 	commonMessages,
 	commonSettingsMessages,
 	defineMessages,
diff --git a/apps/frontend/src/pages/user/[id].vue b/apps/frontend/src/pages/user/[id].vue
index dd9d19786..c66dba967 100644
--- a/apps/frontend/src/pages/user/[id].vue
+++ b/apps/frontend/src/pages/user/[id].vue
@@ -1,5 +1,5 @@
 <template>
-	<div v-if="user" class="experimental-styles-within">
+	<div v-if="user">
 		<ModalCreation ref="modal_creation" />
 		<CollectionCreateModal ref="modal_collection_creation" />
 		<NewModal ref="editRoleModal" header="Edit role">
diff --git a/packages/assets/styles/classes.scss b/packages/assets/styles/classes.scss
index 222de98a6..5d41c6fbc 100644
--- a/packages/assets/styles/classes.scss
+++ b/packages/assets/styles/classes.scss
@@ -41,10 +41,6 @@
 .universal-body {
 	@extend .universal-labels;
 
-	.multiselect {
-		width: 15rem;
-	}
-
 	> :where(input + *, .input-group + *, .chips + *, .input-div + *) {
 		margin-block-start: var(--gap-md);
 	}
@@ -162,10 +158,6 @@
 	max-width: 100%;
 	align-items: center;
 
-	.multiselect {
-		width: 15rem;
-	}
-
 	input {
 		flex-shrink: 2;
 	}
@@ -189,20 +181,6 @@
 	margin-right: 0;
 }
 
-.input-stack {
-	display: flex;
-	flex-direction: column;
-
-	> * {
-		margin-bottom: var(--gap-md);
-	}
-
-	> .multiselect {
-		width: unset;
-		height: inherit;
-	}
-}
-
 .standard-body {
 	:last-child {
 		margin-bottom: 0;
@@ -1020,130 +998,6 @@ select {
 	filter: brightness(1.2);
 }
 
-.multiselect {
-	color: var(--color-base) !important;
-	outline: 2px solid transparent;
-	width: 100% !important;
-
-	.multiselect__input:focus-visible {
-		outline: none !important;
-		box-shadow: none !important;
-		padding: 0 !important;
-		min-height: 0 !important;
-		font-weight: normal !important;
-		margin-left: 0.5rem;
-		margin-bottom: 10px;
-	}
-
-	input {
-		background: transparent;
-		box-shadow: none;
-		border: none !important;
-
-		&:focus {
-			box-shadow: none;
-		}
-	}
-
-	input::placeholder {
-		color: var(--color-base);
-	}
-
-	.multiselect__tags {
-		border-radius: var(--radius-md);
-		background: var(--color-button-bg);
-		box-shadow: var(--shadow-inset-sm);
-		border: none;
-		cursor: pointer;
-		padding-left: 7px;
-		padding-top: 10px;
-		font-size: 1rem;
-
-		transition: background-color 0.1s ease-in-out;
-
-		&:active {
-			filter: brightness(1.25);
-
-			.multiselect__spinner {
-				filter: brightness(1.25);
-			}
-		}
-
-		.multiselect__single {
-			background: transparent;
-		}
-
-		.multiselect__tag {
-			border-radius: var(--radius-md);
-			color: var(--color-base);
-			background: transparent;
-			border: 2px solid var(--color-brand);
-		}
-
-		.multiselect__tag-icon {
-			background: transparent;
-
-			&:after {
-				color: var(--color-contrast);
-			}
-		}
-
-		.multiselect__placeholder {
-			color: var(--color-base);
-			margin-left: 0.5rem;
-			margin-bottom: 8px;
-			opacity: 0.6;
-			font-size: 1rem;
-			line-height: 16px;
-		}
-	}
-
-	.multiselect__content-wrapper {
-		background: var(--color-button-bg);
-		border: none;
-		overflow-x: hidden;
-		box-shadow: var(--shadow-inset-sm), var(--shadow-floating);
-		width: 100%;
-
-		.multiselect__element {
-			.multiselect__option--highlight {
-				background: var(--color-button-bg);
-				filter: brightness(1.25);
-				color: var(--color-contrast);
-			}
-
-			.multiselect__option--selected {
-				background: var(--color-brand);
-				font-weight: bold;
-				color: var(--color-accent-contrast);
-			}
-		}
-	}
-
-	.multiselect__spinner {
-		background: var(--color-button-bg);
-
-		&:active {
-			filter: brightness(1.25);
-		}
-	}
-
-	&.multiselect--disabled {
-		background: none;
-
-		.multiselect__current,
-		.multiselect__select {
-			background: none;
-		}
-	}
-}
-
-.multiselect--above .multiselect__content-wrapper {
-	border-top: none !important;
-	border-top-left-radius: var(--radius-md) !important;
-	border-top-right-radius: var(--radius-md) !important;
-}
-
 .preview-radio {
 	width: 100% !important;
 	border-radius: var(--radius-md);
diff --git a/packages/ui/src/components/base/Avatar.vue b/packages/ui/src/components/base/Avatar.vue
index 6115fcd6e..d0d5a4782 100644
--- a/packages/ui/src/components/base/Avatar.vue
+++ b/packages/ui/src/components/base/Avatar.vue
@@ -2,7 +2,7 @@
 	<img
 		v-if="src && !failed"
 		ref="img"
-		class="`experimental-styles-within avatar shrink-0"
+		class="avatar shrink-0"
 		:style="`--_size: ${cssSize}`"
 		:class="{
 			circle: circle,
@@ -18,7 +18,7 @@
 	/>
 	<svg
 		v-else
-		class="`experimental-styles-within avatar shrink-0"
+		class="avatar shrink-0"
 		:style="`--_size: ${cssSize}${tint ? `;--_tint:oklch(50% 75% ${tint})` : ''}`"
 		:class="{
 			tint: tint,
diff --git a/packages/ui/src/components/base/Card.vue b/packages/ui/src/components/base/Card.vue
index cde64118a..f52f4533b 100644
--- a/packages/ui/src/components/base/Card.vue
+++ b/packages/ui/src/components/base/Card.vue
@@ -2,7 +2,7 @@
 import { DropdownIcon } from '@modrinth/assets'
 import { reactive } from 'vue'
 
-import Button from './Button.vue'
+import ButtonStyled from './ButtonStyled.vue'
 
 const props = defineProps({
 	collapsible: {
@@ -33,9 +33,11 @@ function toggleCollapsed() {
 		<div v-if="!!$slots.header || collapsible" class="header">
 			<slot name="header"></slot>
 			<div v-if="collapsible" class="btn-group">
-				<Button :action="toggleCollapsed">
-					<DropdownIcon :style="{ transform: `rotate(${state.collapsed ? 0 : 180}deg)` }" />
-				</Button>
+				<ButtonStyled circular>
+					<button @click="toggleCollapsed">
+						<DropdownIcon :style="{ transform: `rotate(${state.collapsed ? 0 : 180}deg)` }" />
+					</button>
+				</ButtonStyled>
 			</div>
 		</div>
 		<slot v-if="!state.collapsed" />
diff --git a/packages/ui/src/components/base/JoinedButtons.vue b/packages/ui/src/components/base/JoinedButtons.vue
index e48d494c4..2c56d5041 100644
--- a/packages/ui/src/components/base/JoinedButtons.vue
+++ b/packages/ui/src/components/base/JoinedButtons.vue
@@ -1,21 +1,16 @@
 <template>
 	<div class="joined-buttons">
-		<ButtonStyled
-			:color="color"
-			:size="size"
-			:class="{ 'joined-buttons__primary--muted': primaryMuted }"
-		>
-			<button :disabled="primaryDisabledResolved" @click="handlePrimaryAction">
+		<ButtonStyled :color="color" :size="size">
+			<button
+				:class="{ 'joined-buttons__primary--muted': primaryMuted }"
+				:disabled="primaryDisabledResolved"
+				@click="handlePrimaryAction"
+			>
 				<component :is="primaryAction.icon" v-if="primaryAction.icon" aria-hidden="true" />
 				{{ primaryAction.label }}
 			</button>
 		</ButtonStyled>
-		<ButtonStyled
-			v-if="dropdownActions.length > 0"
-			:color="color"
-			:size="size"
-			class="joined-buttons__dropdown"
-		>
+		<ButtonStyled v-if="dropdownActions.length > 0" :color="color" :size="size">
 			<OverflowMenu
 				class="btn-dropdown-animation !w-10"
 				:options="dropdownOptions"
diff --git a/packages/ui/src/components/base/MarkdownEditor.vue b/packages/ui/src/components/base/MarkdownEditor.vue
index ecda073a9..fd799e239 100644
--- a/packages/ui/src/components/base/MarkdownEditor.vue
+++ b/packages/ui/src/components/base/MarkdownEditor.vue
@@ -43,19 +43,23 @@
 					v-html="renderHighlightedString(linkMarkdown)"
 				/>
 			</div>
-			<div class="input-group push-right">
-				<Button :action="() => linkModal?.hide()"><XIcon /> Cancel</Button>
-				<Button
-					color="primary"
-					:disabled="!!linkValidationErrorMessage || !linkUrl"
-					:action="
-						() => {
-							if (editor) markdownCommands.replaceSelection(editor, linkMarkdown)
-							linkModal?.hide()
-						}
-					"
-					><PlusIcon /> Insert</Button
-				>
+			<div class="flex gap-2 justify-end mt-4">
+				<ButtonStyled type="outlined">
+					<button @click="() => linkModal?.hide()"><XIcon /> Cancel</button>
+				</ButtonStyled>
+				<ButtonStyled color="brand">
+					<button
+						:disabled="!!linkValidationErrorMessage || !linkUrl"
+						@click="
+							() => {
+								if (editor) markdownCommands.replaceSelection(editor, linkMarkdown)
+								linkModal?.hide()
+							}
+						"
+					>
+						<PlusIcon /> Insert
+					</button>
+				</ButtonStyled>
 			</div>
 		</div>
 	</NewModal>
@@ -125,20 +129,23 @@
 					v-html="renderHighlightedString(imageMarkdown)"
 				/>
 			</div>
-			<div class="input-group push-right">
-				<Button :action="() => imageModal?.hide()"><XIcon /> Cancel</Button>
-				<Button
-					color="primary"
-					:disabled="!canInsertImage"
-					:action="
-						() => {
-							if (editor) markdownCommands.replaceSelection(editor, imageMarkdown)
-							imageModal?.hide()
-						}
-					"
-				>
-					<PlusIcon /> Insert
-				</Button>
+			<div class="flex gap-2 justify-end mt-4">
+				<ButtonStyled type="outlined">
+					<button @click="() => imageModal?.hide()"><XIcon /> Cancel</button>
+				</ButtonStyled>
+				<ButtonStyled color="brand">
+					<button
+						:disabled="!canInsertImage"
+						@click="
+							() => {
+								if (editor) markdownCommands.replaceSelection(editor, imageMarkdown)
+								imageModal?.hide()
+							}
+						"
+					>
+						<PlusIcon /> Insert
+					</button>
+				</ButtonStyled>
 			</div>
 		</div>
 	</NewModal>
@@ -176,20 +183,23 @@
 					v-html="renderHighlightedString(videoMarkdown)"
 				/>
 			</div>
-			<div class="input-group push-right">
-				<Button :action="() => videoModal?.hide()"><XIcon /> Cancel</Button>
-				<Button
-					color="primary"
-					:disabled="!!linkValidationErrorMessage || !linkUrl"
-					:action="
-						() => {
-							if (editor) markdownCommands.replaceSelection(editor, videoMarkdown)
-							videoModal?.hide()
-						}
-					"
-				>
-					<PlusIcon /> Insert
-				</Button>
+			<div class="flex gap-2 justify-end mt-4">
+				<ButtonStyled type="outlined">
+					<button @click="() => videoModal?.hide()"><XIcon /> Cancel</button>
+				</ButtonStyled>
+				<ButtonStyled color="brand">
+					<button
+						:disabled="!!linkValidationErrorMessage || !linkUrl"
+						@click="
+							() => {
+								if (editor) markdownCommands.replaceSelection(editor, videoMarkdown)
+								videoModal?.hide()
+							}
+						"
+					>
+						<PlusIcon /> Insert
+					</button>
+				</ButtonStyled>
 			</div>
 		</div>
 	</NewModal>
@@ -202,16 +212,17 @@
 				>
 					<div class="divider"></div>
 					<template v-for="button in buttonGroup.buttons" :key="button.label">
-						<Button
-							v-tooltip="button.label"
-							icon-only
-							:aria-label="button.label"
-							:class="{ 'mobile-hidden-group': !!buttonGroup.hideOnMobile }"
-							:action="() => button.action(editor)"
-							:disabled="previewMode || disabled"
-						>
-							<component :is="button.icon" />
-						</Button>
+						<ButtonStyled circular>
+							<button
+								v-tooltip="button.label"
+								:aria-label="button.label"
+								:class="{ 'mobile-hidden-group': !!buttonGroup.hideOnMobile }"
+								:disabled="previewMode || disabled"
+								@click="() => button.action(editor)"
+							>
+								<component :is="button.icon" />
+							</button>
+						</ButtonStyled>
 					</template>
 				</template>
 				<div class="preview">
@@ -288,7 +299,7 @@ import { renderHighlightedString } from '@modrinth/utils/highlightjs'
 import { type Component, computed, onBeforeUnmount, onMounted, ref, toRef, watch } from 'vue'
 
 import NewModal from '../modal/NewModal.vue'
-import Button from './Button.vue'
+import ButtonStyled from './ButtonStyled.vue'
 import Chips from './Chips.vue'
 import FileInput from './FileInput.vue'
 import StyledInput from './StyledInput.vue'
diff --git a/packages/ui/src/components/base/MultiStageModal.vue b/packages/ui/src/components/base/MultiStageModal.vue
index 82910ae3f..6fc774505 100644
--- a/packages/ui/src/components/base/MultiStageModal.vue
+++ b/packages/ui/src/components/base/MultiStageModal.vue
@@ -74,7 +74,6 @@
 			>
 				<ButtonStyled v-if="leftButtonConfig" type="outlined">
 					<button
-						class="!border-surface-5 !shadow-none"
 						:class="leftButtonConfig.buttonClass"
 						:disabled="leftButtonConfig.disabled"
 						@click="leftButtonConfig.onClick"
diff --git a/packages/ui/src/components/base/OptionGroup.vue b/packages/ui/src/components/base/OptionGroup.vue
index d14c4e0a7..bdb70a5c4 100644
--- a/packages/ui/src/components/base/OptionGroup.vue
+++ b/packages/ui/src/components/base/OptionGroup.vue
@@ -1,7 +1,7 @@
 <template>
 	<nav
 		ref="scrollContainer"
-		class="card-shadow experimental-styles-within relative flex w-fit overflow-x-auto rounded-full bg-bg-raised p-1 text-sm font-bold"
+		class="card-shadow relative flex w-fit overflow-x-auto rounded-full bg-bg-raised p-1 text-sm font-bold"
 	>
 		<button
 			v-for="(option, index) in options"
diff --git a/packages/ui/src/components/base/TeleportOverflowMenu.vue b/packages/ui/src/components/base/TeleportOverflowMenu.vue
index fbef7ff8c..20d5b354d 100644
--- a/packages/ui/src/components/base/TeleportOverflowMenu.vue
+++ b/packages/ui/src/components/base/TeleportOverflowMenu.vue
@@ -26,7 +26,7 @@
 					v-if="isOpen"
 					ref="menuRef"
 					data-pyro-telepopover-root
-					class="experimental-styles-within fixed isolate z-[9999] flex w-fit flex-col gap-2 overflow-hidden rounded-2xl border-[1px] border-solid border-surface-5 bg-bg-raised p-2 shadow-lg"
+					class="fixed isolate z-[9999] flex w-fit flex-col gap-2 overflow-hidden rounded-2xl border-[1px] border-solid border-surface-5 bg-bg-raised p-2 shadow-lg"
 					:style="menuStyle"
 					role="menu"
 					tabindex="-1"
diff --git a/packages/ui/src/components/billing/ResubscribeModal.vue b/packages/ui/src/components/billing/ResubscribeModal.vue
index 2bf3f4222..6954700bf 100644
--- a/packages/ui/src/components/billing/ResubscribeModal.vue
+++ b/packages/ui/src/components/billing/ResubscribeModal.vue
@@ -79,7 +79,7 @@
 		<template #actions>
 			<div class="flex justify-end gap-2">
 				<ButtonStyled type="outlined">
-					<button class="!border !border-surface-5" @click="handleCancel">
+					<button @click="handleCancel">
 						<XIcon />
 						{{ formatMessage(messages.cancelButton) }}
 					</button>
diff --git a/packages/ui/src/components/billing/ServersGuestPlanModal.vue b/packages/ui/src/components/billing/ServersGuestPlanModal.vue
index 4fbec6446..f99f2ecc5 100644
--- a/packages/ui/src/components/billing/ServersGuestPlanModal.vue
+++ b/packages/ui/src/components/billing/ServersGuestPlanModal.vue
@@ -155,8 +155,8 @@ defineExpose({
 							<div class="font-semibold text-contrast">Sign in to continue your purchase</div>
 							<div class="">You need a Modrinth account to add your billing details.</div>
 						</div>
-						<ButtonStyled color="brand" class="mt-2">
-							<button @click="continueToAuth">
+						<ButtonStyled color="brand">
+							<button class="mt-2" @click="continueToAuth">
 								Sign in or create an account
 								<ExternalIcon class="size-4" />
 							</button>
diff --git a/packages/ui/src/components/billing/ServersPurchase0Plan.vue b/packages/ui/src/components/billing/ServersPurchase0Plan.vue
index cec037c84..622de56d7 100644
--- a/packages/ui/src/components/billing/ServersPurchase0Plan.vue
+++ b/packages/ui/src/components/billing/ServersPurchase0Plan.vue
@@ -212,7 +212,7 @@ function selectCustom() {
 				</div>
 			</div>
 			<div class="w-full">
-				<ButtonStyled color="blue" class="w-full">
+				<ButtonStyled color="blue">
 					<button
 						class="w-full"
 						:disabled="existingPlan?.id === plansByRam.small.id"
diff --git a/packages/ui/src/components/flows/creation-flow-modal/components/CustomSetupStage.vue b/packages/ui/src/components/flows/creation-flow-modal/components/CustomSetupStage.vue
index a1c428832..5a82fd14e 100644
--- a/packages/ui/src/components/flows/creation-flow-modal/components/CustomSetupStage.vue
+++ b/packages/ui/src/components/flows/creation-flow-modal/components/CustomSetupStage.vue
@@ -5,13 +5,13 @@
 			<Avatar :src="ctx.instanceIconUrl.value ?? undefined" size="5rem" />
 			<div class="flex flex-col gap-2">
 				<ButtonStyled type="outlined">
-					<button class="!border-surface-5" @click="triggerIconInput">
+					<button @click="triggerIconInput">
 						<UploadIcon />
 						{{ formatMessage(messages.selectIcon) }}
 					</button>
 				</ButtonStyled>
 				<ButtonStyled type="outlined">
-					<button class="!border-surface-5" :disabled="!ctx.instanceIcon.value" @click="removeIcon">
+					<button :disabled="!ctx.instanceIcon.value" @click="removeIcon">
 						<XIcon />
 						{{ formatMessage(messages.removeIcon) }}
 					</button>
diff --git a/packages/ui/src/components/flows/creation-flow-modal/components/ImportInstanceStage.vue b/packages/ui/src/components/flows/creation-flow-modal/components/ImportInstanceStage.vue
index 1e56011c9..6351399bd 100644
--- a/packages/ui/src/components/flows/creation-flow-modal/components/ImportInstanceStage.vue
+++ b/packages/ui/src/components/flows/creation-flow-modal/components/ImportInstanceStage.vue
@@ -83,10 +83,11 @@
 				</ButtonStyled>
 			</div>
 			<div v-else class="flex items-center gap-2">
-				<ButtonStyled icon-only
-					><button class="!shadow-none" @click="browseForLauncherPath">
-						<FolderSearchIcon class="size-5" /></button
-				></ButtonStyled>
+				<ButtonStyled circular>
+					<button class="!shadow-none" @click="browseForLauncherPath">
+						<FolderSearchIcon />
+					</button>
+				</ButtonStyled>
 				<StyledInput
 					v-model="newLauncherPath"
 					:placeholder="formatMessage(messages.launcherPathPlaceholder)"
diff --git a/packages/ui/src/components/flows/creation-flow-modal/components/ModpackStage.vue b/packages/ui/src/components/flows/creation-flow-modal/components/ModpackStage.vue
index f111b13ac..5bb9697dd 100644
--- a/packages/ui/src/components/flows/creation-flow-modal/components/ModpackStage.vue
+++ b/packages/ui/src/components/flows/creation-flow-modal/components/ModpackStage.vue
@@ -29,7 +29,7 @@
 		</div>
 		<div class="flex gap-3">
 			<ButtonStyled type="outlined">
-				<button class="flex-1 !border-surface-4" @click="triggerFileInput">
+				<button class="flex-1" @click="triggerFileInput">
 					<ImportIcon />
 					{{ formatMessage(messages.importModpack) }}
 				</button>
diff --git a/packages/ui/src/components/modal/ConfirmLeaveModal.vue b/packages/ui/src/components/modal/ConfirmLeaveModal.vue
index b1ee34ff7..cba7b8468 100644
--- a/packages/ui/src/components/modal/ConfirmLeaveModal.vue
+++ b/packages/ui/src/components/modal/ConfirmLeaveModal.vue
@@ -9,7 +9,7 @@
 		<template #actions>
 			<div class="flex justify-end gap-2">
 				<ButtonStyled type="outlined">
-					<button class="!border !border-surface-4" @click="cancel">
+					<button @click="cancel">
 						<XIcon />
 						{{ localizeIfPossible(stayLabel) }}
 					</button>
diff --git a/packages/ui/src/components/modal/NewModal.vue b/packages/ui/src/components/modal/NewModal.vue
index 9cef975ee..d51eaa1fc 100644
--- a/packages/ui/src/components/modal/NewModal.vue
+++ b/packages/ui/src/components/modal/NewModal.vue
@@ -18,7 +18,7 @@
 				]"
 				@click="() => (closeOnClickOutside && closable ? hide() : {})"
 			/>
-			<div class="modal-container experimental-styles-within" :class="{ shown: visible }">
+			<div class="modal-container" :class="{ shown: visible }">
 				<div
 					ref="modalBodyRef"
 					role="dialog"
diff --git a/packages/ui/src/components/modal/OpenInAppModal.vue b/packages/ui/src/components/modal/OpenInAppModal.vue
index 747e7c090..9ca6c9d99 100644
--- a/packages/ui/src/components/modal/OpenInAppModal.vue
+++ b/packages/ui/src/components/modal/OpenInAppModal.vue
@@ -88,14 +88,19 @@
 					formatMessage(messages.openingAutomatically)
 				}}</span>
 				<div v-else class="grid grid-cols-2 gap-2 w-full">
-					<ButtonStyled class="flex-1">
-						<button @click="hide">
+					<ButtonStyled>
+						<button class="flex-1" @click="hide">
 							<XIcon />
 							{{ formatMessage(commonMessages.closeButton) }}
 						</button>
 					</ButtonStyled>
-					<ButtonStyled color="green" class="flex-1">
-						<a href="https://modrinth.com/app" target="_blank" rel="noopener noreferrer">
+					<ButtonStyled color="brand">
+						<a
+							class="flex-1"
+							href="https://modrinth.com/app"
+							target="_blank"
+							rel="noopener noreferrer"
+						>
 							<DownloadIcon />
 							{{ formatMessage(messages.getApp) }}
 						</a>
diff --git a/packages/ui/src/components/modal/ShareModal.vue b/packages/ui/src/components/modal/ShareModal.vue
index 8c2d2ee92..907cb2681 100644
--- a/packages/ui/src/components/modal/ShareModal.vue
+++ b/packages/ui/src/components/modal/ShareModal.vue
@@ -14,7 +14,7 @@ import { computed, nextTick, ref } from 'vue'
 
 import { injectNotificationManager } from '#ui/providers'
 
-import { Button, ButtonStyled, NewModal, StyledInput } from '../index'
+import { ButtonStyled, NewModal, StyledInput } from '../index'
 
 const props = defineProps({
 	header: {
@@ -148,15 +148,15 @@ defineExpose({
 
 <template>
 	<NewModal ref="shareModal" :header="header" :noblur="noblur" :on-hide="onHide">
-		<div class="flex flex-row flex-wrap items-center gap-2">
+		<div class="flex flex-col flex-wrap items-center gap-2">
 			<div v-if="link" class="group relative mx-auto">
 				<div ref="qrCode">
 					<QrcodeVue :value="url" class="!bg-white rounded-[var(--radius-md)]" margin="3" />
 				</div>
-				<ButtonStyled circular>
+				<ButtonStyled circular type="transparent">
 					<button
 						v-tooltip="'Copy QR code'"
-						class="absolute top-0 right-0 m-2 opacity-0 transition-all duration-200 ease-in-out group-hover:opacity-100 group-focus-within:opacity-100 motion-reduce:transition-none"
+						class="absolute top-0 right-0 m-2"
 						aria-label="Copy QR code"
 						@click="copyImage"
 					>
@@ -164,17 +164,25 @@ defineExpose({
 					</button>
 				</ButtonStyled>
 			</div>
-			<StyledInput v-else v-model="content" multiline resize="vertical" wrapper-class="h-full">
+			<StyledInput
+				v-else
+				v-model="content"
+				multiline
+				resize="vertical"
+				wrapper-class="h-full w-[30rem]"
+			>
 				<template #right>
-					<button
-						v-tooltip="'Copy Text'"
-						type="button"
-						aria-label="Copy Text"
-						class="absolute top-0 right-0 m-2 grid h-10 w-10 cursor-pointer place-content-center rounded-lg border-none bg-button-bg text-primary transition-all hover:bg-button-bg-hover hover:brightness-125 active:scale-95"
-						@click="copyText"
-					>
-						<ClipboardCopyIcon class="h-5 w-5" aria-hidden="true" />
-					</button>
+					<ButtonStyled circular type="transparent">
+						<button
+							v-tooltip="'Copy Text'"
+							type="button"
+							aria-label="Copy Text"
+							class="absolute top-0 right-0 m-2"
+							@click="copyText"
+						>
+							<ClipboardCopyIcon class="h-5 w-5" aria-hidden="true" />
+						</button>
+					</ButtonStyled>
 				</template>
 			</StyledInput>
 			<div class="flex flex-grow flex-col justify-center gap-2">
@@ -199,56 +207,63 @@ defineExpose({
 						<ExternalIcon aria-hidden="true" />
 					</a>
 				</ButtonStyled>
-				<div v-if="socialButtons" class="flex flex-row gap-2">
-					<Button v-if="canShare" v-tooltip="'Share'" aria-label="Share" icon-only @click="share">
-						<ShareIcon aria-hidden="true" />
-					</Button>
-					<a
-						v-tooltip="'Send as an email'"
-						class="btn icon-only fill-contrast text-contrast"
-						:href="sendEmail"
-						:target="targetParameter"
-						aria-label="Send as an email"
-					>
-						<MailIcon aria-hidden="true" />
-					</a>
-					<a
-						v-if="link"
-						v-tooltip="'Open link in browser'"
-						class="btn icon-only fill-contrast text-contrast"
-						:target="targetParameter"
-						:href="url"
-						aria-label="Open link in browser"
-					>
-						<GlobeIcon aria-hidden="true" />
-					</a>
-					<a
-						v-tooltip="'Toot about it'"
-						class="btn icon-only fill-contrast text-contrast bg-[#563acc]"
-						:target="targetParameter"
-						:href="sendToot"
-						aria-label="Toot about it"
-					>
-						<MastodonIcon aria-hidden="true" />
-					</a>
-					<a
-						v-tooltip="'Tweet about it'"
-						class="btn icon-only fill-contrast text-contrast bg-[#1da1f2]"
-						:target="targetParameter"
-						:href="sendTweet"
-						aria-label="Tweet about it"
-					>
-						<TwitterIcon aria-hidden="true" />
-					</a>
-					<a
-						v-tooltip="'Share on Reddit'"
-						class="btn icon-only fill-contrast text-contrast bg-[#ff4500]"
-						:target="targetParameter"
-						:href="postOnReddit"
-						aria-label="Share on Reddit"
-					>
-						<RedditIcon aria-hidden="true" />
-					</a>
+				<div v-if="socialButtons" class="flex flex-row gap-1">
+					<ButtonStyled v-if="canShare" circular>
+						<button v-tooltip="'Share'" aria-label="Share" @click="share">
+							<ShareIcon aria-hidden="true" />
+						</button>
+					</ButtonStyled>
+					<ButtonStyled circular>
+						<a
+							v-tooltip="'Send as an email'"
+							:href="sendEmail"
+							:target="targetParameter"
+							aria-label="Send as an email"
+						>
+							<MailIcon aria-hidden="true" />
+						</a>
+					</ButtonStyled>
+					<ButtonStyled circular>
+						<a
+							v-if="link"
+							v-tooltip="'Open link in browser'"
+							:target="targetParameter"
+							:href="url"
+							aria-label="Open link in browser"
+						>
+							<GlobeIcon aria-hidden="true" />
+						</a>
+					</ButtonStyled>
+					<ButtonStyled circular>
+						<a
+							v-tooltip="'Toot about it'"
+							:target="targetParameter"
+							:href="sendToot"
+							aria-label="Toot about it"
+						>
+							<MastodonIcon aria-hidden="true" />
+						</a>
+					</ButtonStyled>
+					<ButtonStyled circular>
+						<a
+							v-tooltip="'Tweet about it'"
+							:target="targetParameter"
+							:href="sendTweet"
+							aria-label="Tweet about it"
+						>
+							<TwitterIcon aria-hidden="true" />
+						</a>
+					</ButtonStyled>
+					<ButtonStyled circular>
+						<a
+							v-tooltip="'Share on Reddit'"
+							:target="targetParameter"
+							:href="postOnReddit"
+							aria-label="Share on Reddit"
+						>
+							<RedditIcon aria-hidden="true" />
+						</a>
+					</ButtonStyled>
 				</div>
 			</div>
 		</div>
diff --git a/packages/ui/src/components/nav/NotificationPanel.vue b/packages/ui/src/components/nav/NotificationPanel.vue
index 5c5de11a8..40f6084aa 100644
--- a/packages/ui/src/components/nav/NotificationPanel.vue
+++ b/packages/ui/src/components/nav/NotificationPanel.vue
@@ -1,6 +1,6 @@
 <template>
 	<div
-		class="vue-notification-group experimental-styles-within"
+		class="vue-notification-group"
 		:class="{
 			'intercom-present': isIntercomPresent,
 			'location-left': notificationLocation === 'left',
diff --git a/packages/ui/src/components/nav/PopupNotificationPanel.vue b/packages/ui/src/components/nav/PopupNotificationPanel.vue
index d443f752b..aeb9d7412 100644
--- a/packages/ui/src/components/nav/PopupNotificationPanel.vue
+++ b/packages/ui/src/components/nav/PopupNotificationPanel.vue
@@ -1,6 +1,6 @@
 <template>
 	<div
-		class="popup-notification-group experimental-styles-within"
+		class="popup-notification-group"
 		:class="{
 			'has-sidebar': hasSidebar,
 		}"
diff --git a/packages/ui/src/components/search/SearchFilterControl.vue b/packages/ui/src/components/search/SearchFilterControl.vue
index c87e6c15b..72389cbf5 100644
--- a/packages/ui/src/components/search/SearchFilterControl.vue
+++ b/packages/ui/src/components/search/SearchFilterControl.vue
@@ -1,5 +1,5 @@
 <template>
-	<div class="experimental-styles-within flex flex-wrap items-center gap-1 empty:hidden">
+	<div class="flex flex-wrap items-center gap-1 empty:hidden">
 		<TagItem
 			v-if="selectedItems.length > 1"
 			class="transition-transform active:scale-[0.95]"
diff --git a/packages/ui/src/components/servers/ServerListing.vue b/packages/ui/src/components/servers/ServerListing.vue
index b14a44429..744c9f74d 100644
--- a/packages/ui/src/components/servers/ServerListing.vue
+++ b/packages/ui/src/components/servers/ServerListing.vue
@@ -174,7 +174,6 @@
 				>
 					<button
 						v-tooltip="formatMessage(messages.downloadLatestBackupTooltip)"
-						class="!border-surface-4"
 						data-server-listing-button
 						@click="onDownloadBackup"
 					>
@@ -184,7 +183,6 @@
 				<ButtonStyled v-if="noticeButtons.copyId" type="outlined">
 					<button
 						v-tooltip="formatMessage(messages.copyCodeToClipboardTooltip)"
-						class="!border-surface-4"
 						data-server-listing-button
 						@click="copyToClipboard(server_id)"
 					>
diff --git a/packages/ui/src/components/servers/backups/BackupCreateModal.vue b/packages/ui/src/components/servers/backups/BackupCreateModal.vue
index ded244ba2..bd9e53c4a 100644
--- a/packages/ui/src/components/servers/backups/BackupCreateModal.vue
+++ b/packages/ui/src/components/servers/backups/BackupCreateModal.vue
@@ -47,7 +47,7 @@
 		<template #actions>
 			<div class="flex gap-2 justify-end">
 				<ButtonStyled type="outlined">
-					<button class="!border !border-surface-4" @click="hideModal">
+					<button @click="hideModal">
 						<XIcon />
 						Cancel
 					</button>
diff --git a/packages/ui/src/components/servers/backups/BackupDeleteModal.vue b/packages/ui/src/components/servers/backups/BackupDeleteModal.vue
index fa861d001..fcbe9bc44 100644
--- a/packages/ui/src/components/servers/backups/BackupDeleteModal.vue
+++ b/packages/ui/src/components/servers/backups/BackupDeleteModal.vue
@@ -61,7 +61,7 @@
 		<template #actions>
 			<div class="flex justify-end gap-2">
 				<ButtonStyled type="outlined">
-					<button class="!border !border-surface-4" @click="modal?.hide()">
+					<button @click="modal?.hide()">
 						<XIcon />
 						{{ formatMessage(commonMessages.cancelButton) }}
 					</button>
diff --git a/packages/ui/src/components/servers/backups/BackupRenameModal.vue b/packages/ui/src/components/servers/backups/BackupRenameModal.vue
index b06ffc7c0..eaed166ea 100644
--- a/packages/ui/src/components/servers/backups/BackupRenameModal.vue
+++ b/packages/ui/src/components/servers/backups/BackupRenameModal.vue
@@ -23,7 +23,7 @@
 		<template #actions>
 			<div class="flex gap-2 justify-end">
 				<ButtonStyled type="outlined">
-					<button class="!border !border-surface-4" @click="hide">
+					<button @click="hide">
 						<XIcon />
 						Cancel
 					</button>
diff --git a/packages/ui/src/components/servers/backups/BackupRestoreModal.vue b/packages/ui/src/components/servers/backups/BackupRestoreModal.vue
index 2892bbe06..975c27f65 100644
--- a/packages/ui/src/components/servers/backups/BackupRestoreModal.vue
+++ b/packages/ui/src/components/servers/backups/BackupRestoreModal.vue
@@ -18,7 +18,7 @@
 		<template #actions>
 			<div class="flex gap-2 justify-end">
 				<ButtonStyled type="outlined">
-					<button class="!border !border-surface-4" @click="modal?.hide()">
+					<button @click="modal?.hide()">
 						<XIcon />
 						Cancel
 					</button>
diff --git a/packages/ui/src/components/servers/content/ContentVersionFilter.vue b/packages/ui/src/components/servers/content/ContentVersionFilter.vue
index e60cb5f9b..6ae4693a5 100644
--- a/packages/ui/src/components/servers/content/ContentVersionFilter.vue
+++ b/packages/ui/src/components/servers/content/ContentVersionFilter.vue
@@ -1,5 +1,5 @@
 <template>
-	<div class="experimental-styles-within flex w-full flex-col items-center gap-2">
+	<div class="flex w-full flex-col items-center gap-2">
 		<ManySelect
 			v-model="selectedPlatforms"
 			:tooltip="
diff --git a/packages/ui/src/components/servers/icons/ServerIcon.vue b/packages/ui/src/components/servers/icons/ServerIcon.vue
index 1cbaae5ea..3a31f1d71 100644
--- a/packages/ui/src/components/servers/icons/ServerIcon.vue
+++ b/packages/ui/src/components/servers/icons/ServerIcon.vue
@@ -1,6 +1,6 @@
 <template>
 	<div
-		class="experimental-styles-within relative flex size-16 shrink-0 overflow-hidden rounded-2xl border-[1px] border-solid border-button-border bg-button-bg shadow-sm"
+		class="relative flex size-16 shrink-0 overflow-hidden rounded-2xl border-[1px] border-solid border-button-border bg-button-bg shadow-sm"
 	>
 		<template v-if="hasMounted">
 			<img
diff --git a/packages/ui/src/components/servers/labels/Separator.vue b/packages/ui/src/components/servers/labels/Separator.vue
index f434629a3..6b859a566 100644
--- a/packages/ui/src/components/servers/labels/Separator.vue
+++ b/packages/ui/src/components/servers/labels/Separator.vue
@@ -1,3 +1,3 @@
 <template>
-	<div class="experimental-styles-within h-1.5 w-1.5 bg-button-border rounded-full"></div>
+	<div class="h-1.5 w-1.5 bg-button-border rounded-full"></div>
 </template>
diff --git a/packages/ui/src/components/version/VersionFilterControl.vue b/packages/ui/src/components/version/VersionFilterControl.vue
index 2476bfcb6..01c21b2ff 100644
--- a/packages/ui/src/components/version/VersionFilterControl.vue
+++ b/packages/ui/src/components/version/VersionFilterControl.vue
@@ -1,5 +1,5 @@
 <template>
-	<div class="experimental-styles-within flex flex-col gap-3">
+	<div class="flex flex-col gap-3">
 		<div class="flex flex-wrap items-center gap-2">
 			<ManySelect
 				v-model="selectedPlatforms"
diff --git a/packages/ui/src/layouts/shared/console/layout.vue b/packages/ui/src/layouts/shared/console/layout.vue
index a927148da..3ed874bf2 100644
--- a/packages/ui/src/layouts/shared/console/layout.vue
+++ b/packages/ui/src/layouts/shared/console/layout.vue
@@ -76,7 +76,7 @@
 		<template #actions>
 			<div class="flex justify-end gap-2">
 				<ButtonStyled type="outlined">
-					<button class="!border !border-surface-4" @click="deleteModal?.hide()">
+					<button @click="deleteModal?.hide()">
 						<XIcon />
 						Cancel
 					</button>
diff --git a/packages/ui/src/layouts/shared/content-tab/components/ContentModpackCard.vue b/packages/ui/src/layouts/shared/content-tab/components/ContentModpackCard.vue
index 8852af0ac..0efb1b9f1 100644
--- a/packages/ui/src/layouts/shared/content-tab/components/ContentModpackCard.vue
+++ b/packages/ui/src/layouts/shared/content-tab/components/ContentModpackCard.vue
@@ -242,7 +242,7 @@ onUnmounted(() => {
 								</button>
 							</ButtonStyled>
 							<template #popper>
-								<div class="experimental-styles-within grid grid-cols-[min-content] gap-1">
+								<div class="grid grid-cols-[min-content] gap-1">
 									<div class="flex min-w-48 items-center justify-between gap-8">
 										<h3 class="m-0 whitespace-nowrap text-base font-bold text-contrast">
 											{{ formatMessage(messages.contentHintTitle) }}
@@ -265,7 +265,6 @@ onUnmounted(() => {
 
 						<ButtonStyled v-if="hasSettingsListener" type="outlined" circular>
 							<button
-								class="!border !border-surface-4"
 								@click="
 									() => {
 										emit('settings')
@@ -301,7 +300,6 @@ onUnmounted(() => {
 							><TeleportOverflowMenu
 								:options="collapsedOptions"
 								class="flex @[700px]:hidden"
-								btn-class="!border-surface-4 !border"
 								@open="emit('dismiss-content-hint')"
 							>
 								<MoreVerticalIcon class="size-5" />
@@ -316,7 +314,7 @@ onUnmounted(() => {
 							</TeleportOverflowMenu></ButtonStyled
 						>
 						<template #popper>
-							<div class="experimental-styles-within grid grid-cols-[min-content] gap-1">
+							<div class="grid grid-cols-[min-content] gap-1">
 								<div class="flex min-w-48 items-center justify-between gap-8">
 									<h3 class="m-0 whitespace-nowrap text-base font-bold text-contrast">
 										{{ formatMessage(messages.contentHintTitle) }}
diff --git a/packages/ui/src/layouts/shared/content-tab/components/modals/ConfirmBulkUpdateModal.vue b/packages/ui/src/layouts/shared/content-tab/components/modals/ConfirmBulkUpdateModal.vue
index 4cddbc452..33bb748cc 100644
--- a/packages/ui/src/layouts/shared/content-tab/components/modals/ConfirmBulkUpdateModal.vue
+++ b/packages/ui/src/layouts/shared/content-tab/components/modals/ConfirmBulkUpdateModal.vue
@@ -21,7 +21,7 @@
 		<template #actions>
 			<div class="flex gap-2 justify-end">
 				<ButtonStyled type="outlined">
-					<button class="!border !border-surface-4" @click="modal?.hide()">
+					<button @click="modal?.hide()">
 						<XIcon />
 						{{ formatMessage(commonMessages.cancelButton) }}
 					</button>
diff --git a/packages/ui/src/layouts/shared/content-tab/components/modals/ConfirmDeletionModal.vue b/packages/ui/src/layouts/shared/content-tab/components/modals/ConfirmDeletionModal.vue
index d21453622..107b33c2d 100644
--- a/packages/ui/src/layouts/shared/content-tab/components/modals/ConfirmDeletionModal.vue
+++ b/packages/ui/src/layouts/shared/content-tab/components/modals/ConfirmDeletionModal.vue
@@ -23,7 +23,7 @@
 		<template #actions>
 			<div class="flex gap-2 justify-end">
 				<ButtonStyled type="outlined">
-					<button class="!border !border-surface-4" @click="modal?.hide()">
+					<button @click="modal?.hide()">
 						<XIcon />
 						{{ formatMessage(commonMessages.cancelButton) }}
 					</button>
diff --git a/packages/ui/src/layouts/shared/content-tab/components/modals/ConfirmModpackUpdateModal.vue b/packages/ui/src/layouts/shared/content-tab/components/modals/ConfirmModpackUpdateModal.vue
index 0fd4ddc5e..26be19f84 100644
--- a/packages/ui/src/layouts/shared/content-tab/components/modals/ConfirmModpackUpdateModal.vue
+++ b/packages/ui/src/layouts/shared/content-tab/components/modals/ConfirmModpackUpdateModal.vue
@@ -29,7 +29,7 @@
 		<template #actions>
 			<div class="flex gap-2 justify-end">
 				<ButtonStyled type="outlined">
-					<button class="!border !border-surface-4" @click="handleCancel">
+					<button @click="handleCancel">
 						<XIcon />
 						{{ formatMessage(commonMessages.cancelButton) }}
 					</button>
diff --git a/packages/ui/src/layouts/shared/content-tab/components/modals/ConfirmReinstallModal.vue b/packages/ui/src/layouts/shared/content-tab/components/modals/ConfirmReinstallModal.vue
index 30b559887..22b3c55c5 100644
--- a/packages/ui/src/layouts/shared/content-tab/components/modals/ConfirmReinstallModal.vue
+++ b/packages/ui/src/layouts/shared/content-tab/components/modals/ConfirmReinstallModal.vue
@@ -20,7 +20,7 @@
 		<template #actions>
 			<div class="flex gap-2 justify-end">
 				<ButtonStyled type="outlined">
-					<button class="!border !border-surface-4" @click="modal?.hide()">
+					<button @click="modal?.hide()">
 						<XIcon />
 						{{ formatMessage(commonMessages.cancelButton) }}
 					</button>
diff --git a/packages/ui/src/layouts/shared/content-tab/components/modals/ConfirmRepairModal.vue b/packages/ui/src/layouts/shared/content-tab/components/modals/ConfirmRepairModal.vue
index e7811ff70..9e03594ff 100644
--- a/packages/ui/src/layouts/shared/content-tab/components/modals/ConfirmRepairModal.vue
+++ b/packages/ui/src/layouts/shared/content-tab/components/modals/ConfirmRepairModal.vue
@@ -11,7 +11,7 @@
 		<template #actions>
 			<div class="flex gap-2 justify-end">
 				<ButtonStyled type="outlined">
-					<button class="!border !border-surface-4" @click="modal?.hide()">
+					<button @click="modal?.hide()">
 						<XIcon />
 						{{ formatMessage(commonMessages.cancelButton) }}
 					</button>
diff --git a/packages/ui/src/layouts/shared/content-tab/components/modals/ConfirmUnlinkModal.vue b/packages/ui/src/layouts/shared/content-tab/components/modals/ConfirmUnlinkModal.vue
index d71e9ae1c..369a52db3 100644
--- a/packages/ui/src/layouts/shared/content-tab/components/modals/ConfirmUnlinkModal.vue
+++ b/packages/ui/src/layouts/shared/content-tab/components/modals/ConfirmUnlinkModal.vue
@@ -20,7 +20,7 @@
 		<template #actions>
 			<div class="flex gap-2 justify-end">
 				<ButtonStyled type="outlined">
-					<button class="!border !border-surface-4" @click="modal?.hide()">
+					<button @click="modal?.hide()">
 						<XIcon />
 						{{ formatMessage(commonMessages.cancelButton) }}
 					</button>
diff --git a/packages/ui/src/layouts/shared/content-tab/components/modals/ContentInstallModal.vue b/packages/ui/src/layouts/shared/content-tab/components/modals/ContentInstallModal.vue
index 71c24ec3f..946d80c76 100644
--- a/packages/ui/src/layouts/shared/content-tab/components/modals/ContentInstallModal.vue
+++ b/packages/ui/src/layouts/shared/content-tab/components/modals/ContentInstallModal.vue
@@ -70,7 +70,6 @@
 				<ButtonStyled type="outlined" circular>
 					<button
 						v-tooltip="`${hideUninstallable ? 'Show' : 'Hide'} unavailable`"
-						class="!border-surface-4 !border"
 						@click="hideUninstallable = !hideUninstallable"
 					>
 						<EyeOffIcon v-if="hideUninstallable" />
@@ -134,17 +133,13 @@
 				<Avatar :src="iconPreviewUrl ?? undefined" size="5rem" rounded="2xl" />
 				<div class="flex flex-col gap-2">
 					<ButtonStyled type="outlined">
-						<button class="!border-surface-4 !border" @click="selectIcon">
+						<button @click="selectIcon">
 							<UploadIcon />
 							{{ formatMessage(messages.selectIcon) }}
 						</button>
 					</ButtonStyled>
 					<ButtonStyled type="outlined">
-						<button
-							class="!border-surface-4 !border"
-							:disabled="!iconPreviewUrl"
-							@click="removeIcon"
-						>
+						<button :disabled="!iconPreviewUrl" @click="removeIcon">
 							<XIcon />
 							{{ formatMessage(messages.removeIcon) }}
 						</button>
@@ -213,7 +208,7 @@
 					</span>
 				</div>
 				<ButtonStyled type="outlined">
-					<button class="!border-surface-4 !border" @click="modal?.hide()">
+					<button @click="modal?.hide()">
 						<XIcon />
 						{{ formatMessage(commonMessages.cancelButton) }}
 					</button>
@@ -222,7 +217,7 @@
 
 			<div v-else class="flex items-center justify-end gap-2">
 				<ButtonStyled type="outlined">
-					<button class="!border-surface-4 !border" @click="modal?.hide()">
+					<button @click="modal?.hide()">
 						<XIcon />
 						{{ formatMessage(commonMessages.cancelButton) }}
 					</button>
diff --git a/packages/ui/src/layouts/shared/content-tab/components/modals/ContentUpdaterModal.vue b/packages/ui/src/layouts/shared/content-tab/components/modals/ContentUpdaterModal.vue
index 9fec5158c..8684c5728 100644
--- a/packages/ui/src/layouts/shared/content-tab/components/modals/ContentUpdaterModal.vue
+++ b/packages/ui/src/layouts/shared/content-tab/components/modals/ContentUpdaterModal.vue
@@ -205,7 +205,7 @@
 			</div>
 			<div class="flex flex-row gap-2 shrink-0">
 				<ButtonStyled type="outlined">
-					<button class="!border-[1px] !border-surface-4" @click="handleCancel">
+					<button @click="handleCancel">
 						<XIcon />
 						{{ formatMessage(commonMessages.cancelButton) }}
 					</button>
diff --git a/packages/ui/src/layouts/shared/content-tab/layout.vue b/packages/ui/src/layouts/shared/content-tab/layout.vue
index 3c06a5d8c..bb9574409 100644
--- a/packages/ui/src/layouts/shared/content-tab/layout.vue
+++ b/packages/ui/src/layouts/shared/content-tab/layout.vue
@@ -582,7 +582,7 @@ const confirmUnlinkModal = ref<InstanceType<typeof ConfirmUnlinkModal>>()
 											(ctx.disableAddContent?.value ? ctx.disableAddContentTooltip : undefined)
 										"
 										:disabled="ctx.isBusy.value || ctx.disableAddContent?.value"
-										class="!h-10 !border-button-bg !border-[1px]"
+										class="!h-10"
 										@click="ctx.uploadFiles"
 									>
 										<FolderOpenIcon class="size-5" />
@@ -722,7 +722,7 @@ const confirmUnlinkModal = ref<InstanceType<typeof ConfirmUnlinkModal>>()
 									(ctx.disableAddContent?.value ? ctx.disableAddContentTooltip : undefined)
 								"
 								:disabled="ctx.isBusy.value || ctx.disableAddContent?.value"
-								class="!h-10 !border-button-bg !border-[1px]"
+								class="!h-10"
 								@click="ctx.uploadFiles"
 							>
 								<FolderOpenIcon class="size-5" />
diff --git a/packages/ui/src/layouts/shared/files-tab/components/FileContextMenu.vue b/packages/ui/src/layouts/shared/files-tab/components/FileContextMenu.vue
index 233ff1237..f0b49c09a 100644
--- a/packages/ui/src/layouts/shared/files-tab/components/FileContextMenu.vue
+++ b/packages/ui/src/layouts/shared/files-tab/components/FileContextMenu.vue
@@ -11,7 +11,7 @@
 			<div
 				v-if="visible"
 				ref="menuRef"
-				class="experimental-styles-within fixed isolate z-[9999] flex w-fit min-w-[180px] flex-col gap-2 overflow-hidden rounded-2xl border border-solid border-surface-5 bg-bg-raised p-2 shadow-lg"
+				class="fixed isolate z-[9999] flex w-fit min-w-[180px] flex-col gap-2 overflow-hidden rounded-2xl border border-solid border-surface-5 bg-bg-raised p-2 shadow-lg"
 				:style="{ left: `${position.x}px`, top: `${position.y}px` }"
 				role="menu"
 				tabindex="-1"
diff --git a/packages/ui/src/layouts/shared/files-tab/components/FileNavbar.vue b/packages/ui/src/layouts/shared/files-tab/components/FileNavbar.vue
index f6e48bab7..7f245fa7e 100644
--- a/packages/ui/src/layouts/shared/files-tab/components/FileNavbar.vue
+++ b/packages/ui/src/layouts/shared/files-tab/components/FileNavbar.vue
@@ -114,7 +114,7 @@
 				<ButtonStyled v-if="showRefreshButton" type="outlined">
 					<button
 						type="button"
-						class="flex !h-10 items-center gap-2 !border-[1px] !border-surface-5"
+						class="flex !h-10 items-center gap-2"
 						:disabled="refreshing"
 						@click="handleRefresh"
 					>
@@ -135,7 +135,7 @@
 						:aria-label="formatMessage(messages.createNew)"
 						:disabled="disabled"
 						:tooltip="disabled ? disabledTooltip : undefined"
-						class="!h-10 justify-center gap-2 !border-[1px] !border-surface-5"
+						class="!h-10 justify-center gap-2"
 						:options="[
 							{ id: 'file', action: () => $emit('create', 'file') },
 							{ id: 'directory', action: () => $emit('create', 'directory') },
diff --git a/packages/ui/src/layouts/shared/files-tab/components/editor/EditorFindReplace.vue b/packages/ui/src/layouts/shared/files-tab/components/editor/EditorFindReplace.vue
index 2eb1d23af..c460e8869 100644
--- a/packages/ui/src/layouts/shared/files-tab/components/editor/EditorFindReplace.vue
+++ b/packages/ui/src/layouts/shared/files-tab/components/editor/EditorFindReplace.vue
@@ -94,7 +94,7 @@
 				</div>
 				<ButtonStyled type="outlined">
 					<button
-						class="!h-8 whitespace-nowrap !border !border-surface-5 px-2 text-sm disabled:opacity-50"
+						class="!h-8 whitespace-nowrap px-2 text-sm disabled:opacity-50"
 						:disabled="findMatchCount === 0"
 						@click="emit('replace', replaceQuery)"
 					>
@@ -103,7 +103,7 @@
 				</ButtonStyled>
 				<ButtonStyled type="outlined">
 					<button
-						class="!h-8 whitespace-nowrap !border !border-surface-5 px-2 text-sm disabled:opacity-50"
+						class="!h-8 whitespace-nowrap px-2 text-sm disabled:opacity-50"
 						:disabled="findMatchCount === 0"
 						@click="emit('replaceAll', replaceQuery)"
 					>
diff --git a/packages/ui/src/layouts/shared/files-tab/components/modals/FileCreateItemModal.vue b/packages/ui/src/layouts/shared/files-tab/components/modals/FileCreateItemModal.vue
index 461ab5eca..bb6c0c2a5 100644
--- a/packages/ui/src/layouts/shared/files-tab/components/modals/FileCreateItemModal.vue
+++ b/packages/ui/src/layouts/shared/files-tab/components/modals/FileCreateItemModal.vue
@@ -21,7 +21,7 @@
 		<template #actions>
 			<div class="flex gap-2 justify-end">
 				<ButtonStyled type="outlined">
-					<button class="!border !border-surface-4" @click="hide">
+					<button @click="hide">
 						<XIcon class="h-5 w-5" />
 						{{ formatMessage(commonMessages.cancelButton) }}
 					</button>
diff --git a/packages/ui/src/layouts/shared/files-tab/components/modals/FileDeleteItemModal.vue b/packages/ui/src/layouts/shared/files-tab/components/modals/FileDeleteItemModal.vue
index 7c705476d..cbfecb962 100644
--- a/packages/ui/src/layouts/shared/files-tab/components/modals/FileDeleteItemModal.vue
+++ b/packages/ui/src/layouts/shared/files-tab/components/modals/FileDeleteItemModal.vue
@@ -7,7 +7,7 @@
 		<template #actions>
 			<div class="flex gap-2 justify-end">
 				<ButtonStyled type="outlined">
-					<button class="!border !border-surface-4" @click="hide">
+					<button @click="hide">
 						<XIcon class="h-5 w-5" />
 						{{ formatMessage(commonMessages.cancelButton) }}
 					</button>
diff --git a/packages/ui/src/layouts/shared/files-tab/components/modals/FileMoveItemModal.vue b/packages/ui/src/layouts/shared/files-tab/components/modals/FileMoveItemModal.vue
index a01771c80..266dc7574 100644
--- a/packages/ui/src/layouts/shared/files-tab/components/modals/FileMoveItemModal.vue
+++ b/packages/ui/src/layouts/shared/files-tab/components/modals/FileMoveItemModal.vue
@@ -26,7 +26,7 @@
 		<template #actions>
 			<div class="flex gap-2 justify-end">
 				<ButtonStyled type="outlined">
-					<button class="!border !border-surface-4" @click="hide">
+					<button @click="hide">
 						<XIcon class="h-5 w-5" />
 						{{ formatMessage(commonMessages.cancelButton) }}
 					</button>
diff --git a/packages/ui/src/layouts/shared/files-tab/components/modals/FileRenameItemModal.vue b/packages/ui/src/layouts/shared/files-tab/components/modals/FileRenameItemModal.vue
index 186230f7c..44cbdbe54 100644
--- a/packages/ui/src/layouts/shared/files-tab/components/modals/FileRenameItemModal.vue
+++ b/packages/ui/src/layouts/shared/files-tab/components/modals/FileRenameItemModal.vue
@@ -14,7 +14,7 @@
 		<template #actions>
 			<div class="flex gap-2 justify-end">
 				<ButtonStyled type="outlined">
-					<button class="!border !border-surface-4" @click="hide">
+					<button @click="hide">
 						<XIcon class="h-5 w-5" />
 						{{ formatMessage(commonMessages.cancelButton) }}
 					</button>
diff --git a/packages/ui/src/layouts/shared/files-tab/components/modals/FileUnsavedChangesModal.vue b/packages/ui/src/layouts/shared/files-tab/components/modals/FileUnsavedChangesModal.vue
index a18634e14..9a1bb53dc 100644
--- a/packages/ui/src/layouts/shared/files-tab/components/modals/FileUnsavedChangesModal.vue
+++ b/packages/ui/src/layouts/shared/files-tab/components/modals/FileUnsavedChangesModal.vue
@@ -6,7 +6,7 @@
 		<template #actions>
 			<div class="flex justify-end gap-2">
 				<ButtonStyled type="outlined">
-					<button class="!border !border-surface-4" @click="handleCancel">
+					<button @click="handleCancel">
 						<XIcon />
 						{{ formatMessage(commonMessages.cancelButton) }}
 					</button>
diff --git a/packages/ui/src/layouts/shared/files-tab/components/modals/FileUploadConflictModal.vue b/packages/ui/src/layouts/shared/files-tab/components/modals/FileUploadConflictModal.vue
index 9050d6739..1e3d7fb3d 100644
--- a/packages/ui/src/layouts/shared/files-tab/components/modals/FileUploadConflictModal.vue
+++ b/packages/ui/src/layouts/shared/files-tab/components/modals/FileUploadConflictModal.vue
@@ -54,7 +54,7 @@
 		<template #actions>
 			<div class="flex justify-end gap-2 pt-4">
 				<ButtonStyled type="outlined">
-					<button class="!border !border-surface-4" @click="hide">
+					<button @click="hide">
 						<XIcon />
 						{{ formatMessage(commonMessages.cancelButton) }}
 					</button>
diff --git a/packages/ui/src/layouts/shared/files-tab/components/modals/FileUploadZipUrlModal.vue b/packages/ui/src/layouts/shared/files-tab/components/modals/FileUploadZipUrlModal.vue
index 1a6824ae8..9e5b4f31f 100644
--- a/packages/ui/src/layouts/shared/files-tab/components/modals/FileUploadZipUrlModal.vue
+++ b/packages/ui/src/layouts/shared/files-tab/components/modals/FileUploadZipUrlModal.vue
@@ -63,7 +63,7 @@
 		<template #actions>
 			<div class="flex w-full items-center justify-end gap-2">
 				<ButtonStyled type="outlined">
-					<button type="button" class="!border !border-surface-4" @click="hide">
+					<button type="button" @click="hide">
 						<XIcon />
 						{{
 							submitted
diff --git a/packages/ui/src/layouts/shared/installation-settings/layout.vue b/packages/ui/src/layouts/shared/installation-settings/layout.vue
index 68e9f8d19..4dee5e96c 100644
--- a/packages/ui/src/layouts/shared/installation-settings/layout.vue
+++ b/packages/ui/src/layouts/shared/installation-settings/layout.vue
@@ -635,10 +635,7 @@ const messages = defineMessages({
 								</button>
 							</ButtonStyled>
 							<ButtonStyled type="outlined">
-								<button
-									class="!border !border-surface-5 !shadow-none"
-									@click="form.cancelEditing()"
-								>
+								<button @click="form.cancelEditing()">
 									<XIcon />
 									{{ formatMessage(commonMessages.cancelButton) }}
 								</button>
diff --git a/packages/ui/src/layouts/shared/server-settings/pages/network.vue b/packages/ui/src/layouts/shared/server-settings/pages/network.vue
index 6145a721c..64906262f 100644
--- a/packages/ui/src/layouts/shared/server-settings/pages/network.vue
+++ b/packages/ui/src/layouts/shared/server-settings/pages/network.vue
@@ -97,18 +97,18 @@
 							</template>
 							<template #cell-actions="{ row }">
 								<div class="flex items-center justify-end gap-2">
-									<ButtonStyled icon-only type="transparent" circular>
+									<ButtonStyled type="transparent" circular>
 										<button @click="copyText(`${serverIP}:${row.port}`)">
 											<CopyIcon />
 										</button>
 									</ButtonStyled>
 									<template v-if="!row.primary">
-										<ButtonStyled icon-only type="transparent" circular>
+										<ButtonStyled type="transparent" circular>
 											<button @click="showEditAllocationModal(row.port)">
 												<PencilIcon />
 											</button>
 										</ButtonStyled>
-										<ButtonStyled icon-only type="outlined" circular color="red">
+										<ButtonStyled type="outlined" circular color="red">
 											<button @click="showConfirmDeleteModal(row.port)">
 												<TrashIcon />
 											</button>
diff --git a/packages/ui/src/layouts/wrapped/hosting/manage/backups.vue b/packages/ui/src/layouts/wrapped/hosting/manage/backups.vue
index 949f26ad9..a45354795 100644
--- a/packages/ui/src/layouts/wrapped/hosting/manage/backups.vue
+++ b/packages/ui/src/layouts/wrapped/hosting/manage/backups.vue
@@ -100,7 +100,7 @@
 						>
 							<template #actions>
 								<ButtonStyled type="outlined">
-									<button class="!border !border-surface-4" @click="clearBackupFilters">
+									<button @click="clearBackupFilters">
 										{{ formatMessage(messages.clearFilters) }}
 									</button>
 								</ButtonStyled>
diff --git a/packages/ui/src/layouts/wrapped/hosting/manage/index.vue b/packages/ui/src/layouts/wrapped/hosting/manage/index.vue
index a5bf18e62..9699b004b 100644
--- a/packages/ui/src/layouts/wrapped/hosting/manage/index.vue
+++ b/packages/ui/src/layouts/wrapped/hosting/manage/index.vue
@@ -1,7 +1,7 @@
 <template>
 	<div
 		data-pyro-server-list-root
-		class="experimental-styles-within relative mx-auto mb-6 flex w-full flex-col p-6"
+		class="relative mx-auto mb-6 flex w-full flex-col p-6"
 		:class="serverList.length ? 'min-h-screen' : 'min-h-[calc(100vh-4.5rem)]'"
 	>
 		<ServersGuestPlanModal
diff --git a/packages/ui/src/layouts/wrapped/hosting/manage/root.vue b/packages/ui/src/layouts/wrapped/hosting/manage/root.vue
index f9159ad08..c4db8e47c 100644
--- a/packages/ui/src/layouts/wrapped/hosting/manage/root.vue
+++ b/packages/ui/src/layouts/wrapped/hosting/manage/root.vue
@@ -1,7 +1,7 @@
 <template>
 	<div
 		v-if="filteredNotices.length > 0"
-		class="experimental-styles-within relative mx-auto mb-4 flex w-full min-w-0 flex-col gap-3 px-6"
+		class="relative mx-auto mb-4 flex w-full min-w-0 flex-col gap-3 px-6"
 		:class="{
 			'max-w-[1280px]': isNuxt,
 		}"
@@ -99,7 +99,7 @@
 	<div
 		v-else-if="serverData"
 		data-pyro-server-manager-root
-		class="experimental-styles-within relative mx-auto box-border flex w-full min-w-0 flex-col gap-4 px-6 transition-all duration-300"
+		class="relative mx-auto box-border flex w-full min-w-0 flex-col gap-4 px-6 transition-all duration-300"
 		:style="{
 			'--server-bg-image': serverImage
 				? `url(${serverImage})`
@@ -144,7 +144,7 @@
 								</button>
 							</ButtonStyled>
 							<template #popper>
-								<div class="experimental-styles-within grid grid-cols-[min-content] gap-1">
+								<div class="grid grid-cols-[min-content] gap-1">
 									<div class="flex min-w-48 items-center justify-between gap-8">
 										<h3 class="m-0 whitespace-nowrap text-base font-bold text-contrast">
 											{{ formatMessage(settingsHintMessages.title) }}
@@ -321,7 +321,7 @@
 	</div>
 	<div
 		v-if="showAdvancedDebugInfo"
-		class="experimental-styles-within relative mx-auto mt-6 box-border w-full min-w-0 max-w-[1280px] px-6"
+		class="relative mx-auto mt-6 box-border w-full min-w-0 max-w-[1280px] px-6"
 	>
 		<h2 class="m-0 text-lg font-extrabold text-contrast">Server data</h2>
 		<pre class="markdown-body w-full overflow-auto rounded-2xl bg-bg-raised p-4 text-sm">{{