diff --git a/.yarn/cache/libopenmpt-wasm-https-c2e0cb89a7-ace14fcb0e.zip b/.yarn/cache/libopenmpt-wasm-https-c2e0cb89a7-ace14fcb0e.zip
new file mode 100644
index 000000000..d72f8eade
--- /dev/null
+++ b/.yarn/cache/libopenmpt-wasm-https-c2e0cb89a7-ace14fcb0e.zip
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:a0ff96aad5c05d839f740e4d7941a3e1fa15942be56cad2b354b3ebb02ff29c0
+size 487564
diff --git a/packages/client/src/components/MkAchievements.vue b/packages/client/src/components/MkAchievements.vue
index 55dd403e9..37df89e0e 100644
--- a/packages/client/src/components/MkAchievements.vue
+++ b/packages/client/src/components/MkAchievements.vue
@@ -1,224 +1,225 @@
 <template>
-<div>
-		<div v-if="achievements" class="root">
-		<div v-for="achievement in achievements" :key="achievement" class="_panel achievement">
-			<div class="icon">
-				<div :class="[['iconFrame'], ['iconFrame_' + ACHIEVEMENT_BADGES[achievement.name].frame]]">
-					<div class="iconInner" :style="{ background: ACHIEVEMENT_BADGES[achievement.name].bg }">
-						<img class="iconImg" :src="ACHIEVEMENT_BADGES[achievement.name].img">
+	<div>
+		<div v-if="achievements" :class="'.root'">
+			<div v-for="achievement in achievements" :key="achievement" :class="'.achievement'" class="_panel">
+				<div :class="'.icon'">
+					<div :class="['.iconFrame', ['iconFrame_' + ACHIEVEMENT_BADGES[achievement.name].frame]]">
+						<div :class="['.iconInner']" :style="{ background: ACHIEVEMENT_BADGES[achievement.name].bg }">
+							<img :class="'.iconImg'" :src="ACHIEVEMENT_BADGES[achievement.name].img">
+						</div>
 					</div>
 				</div>
-			</div>
-			<div class="body">
-				<div class="header">
-					<span class="title">{{ i18n.ts._achievements._types['_' + achievement.name].title }}</span>
-					<span class="time">
-						<time v-tooltip="new Date(achievement.unlockedAt).toLocaleString()">{{ new Date(achievement.unlockedAt).getFullYear() }}/{{ new Date(achievement.unlockedAt).getMonth() + 1 }}/{{ new Date(achievement.unlockedAt).getDate() }}</time>
-					</span>
+				<div :class="'.body'">
+					<div :class="'.header'">
+						<span :class="'.title'">{{ i18n.ts._achievements._types['_' + achievement.name].title }}</span>
+						<span :class="'.time'">
+							<time v-tooltip="new Date(achievement.unlockedAt).toLocaleString()">{{ new Date(achievement.unlockedAt).getFullYear() }}/{{ new Date(achievement.unlockedAt).getMonth() + 1 }}/{{ new Date(achievement.unlockedAt).getDate() }}</time>
+						</span>
+					</div>
+					<div :class="'.description'">{{ i18n.ts._achievements._types['_' + achievement.name].description }}</div>
+					<div v-if="i18n.ts._achievements._types['_' + achievement.name].flavor" :class="'.flavor'">{{ i18n.ts._achievements._types['_' + achievement.name].flavor }}</div>
 				</div>
-				<div class="description">{{ i18n.ts._achievements._types['_' + achievement.name].description }}</div>
-				<div v-if="i18n.ts._achievements._types['_' + achievement.name].flavor" class="flavor">{{ i18n.ts._achievements._types['_' + achievement.name].flavor }}</div>
 			</div>
+			<template v-if="withLocked">
+				<div v-for="achievement in lockedAchievements" :key="achievement" :class="['.achievement', '.locked']" class="_panel" @click="achievement === 'clickedClickHere' ? clickHere() : () => {}">
+					<div :class="'.icon'">
+					</div>
+					<div :class="'.body'">
+						<div :class="'.header'">
+							<span :class="'.title'">???</span>
+						</div>
+						<div :class="'.description'">???</div>
+					</div>
+				</div>
+			</template>
+		</div>
+		<div v-else>
+			<MkLoading/>
 		</div>
-		<template v-if="withLocked">
-			<div v-for="achievement in lockedAchievements" :key="achievement" class="_panel achievement locked" @click="achievement === 'clickedClickHere' ? clickHere() : () => {}">
-				<div class="icon">
-				</div>
-				<div class="body">
-					<div class="header">
-						<span class="title">???</span>
-					</div>
-					<div class="description">???</div>
-				</div>
-			</div>
-		</template>
 	</div>
-	<div v-else>
-		<MkLoading/>
-	</div>
-</div>
-</template>
-
-<script lang="ts" setup>
-import * as misskey from 'misskey-js';
-import { onMounted } from 'vue';
-import * as os from '@/os';
-import { i18n } from '@/i18n';
-import { ACHIEVEMENT_TYPES, ACHIEVEMENT_BADGES, claimAchievement } from '@/scripts/achievements';
-
-const props = withDefaults(defineProps<{
-	user: misskey.entities.User;
-	withLocked: boolean;
-}>(), {
-	withLocked: true,
-});
-
-let achievements = $ref();
-const lockedAchievements = $computed(() => ACHIEVEMENT_TYPES.filter(x => !(achievements ?? []).some(a => a.name === x)));
-
-function fetch() {
-	os.api('users/achievements', { userId: props.user.id }).then(res => {
-		achievements = [];
-		for (const t of ACHIEVEMENT_TYPES) {
-			const a = res.find(x => x.name === t);
-			if (a) achievements.push(a);
-		}
-		//achievements = res.sort((a, b) => b.unlockedAt - a.unlockedAt);
+	</template>
+	
+	<script lang="ts" setup>
+	import * as misskey from 'misskey-js';
+	import { onMounted } from 'vue';
+	import * as os from '@/os';
+	import { i18n } from '@/i18n';
+	import { ACHIEVEMENT_TYPES, ACHIEVEMENT_BADGES, claimAchievement } from '@/scripts/achievements';
+	
+	const props = withDefaults(defineProps<{
+		user: misskey.entities.User;
+		withLocked: boolean;
+	}>(), {
+		withLocked: true,
 	});
-}
-
-function clickHere() {
-	claimAchievement('clickedClickHere');
-	fetch();
-}
-
-onMounted(() => {
-	fetch();
-});
-</script>
-
-<style lang="scss" scoped>
-.root {
-	display: grid;
-	grid-template-columns: repeat(auto-fill, min(380px, 100%));
-	grid-gap: 12px;
-	place-content: center;
-}
-
-.achievement {
-	display: flex;
-	padding: 16px;
-
-	&.locked {
-		opacity: 0.5;
+	
+	let achievements = $ref();
+	const lockedAchievements = $computed(() => ACHIEVEMENT_TYPES.filter(x => !(achievements ?? []).some(a => a.name === x)));
+	
+	function fetch() {
+		os.api('users/achievements', { userId: props.user.id }).then(res => {
+			achievements = [];
+			for (const t of ACHIEVEMENT_TYPES) {
+				const a = res.find(x => x.name === t);
+				if (a) achievements.push(a);
+			}
+			//achievements = res.sort((a, b) => b.unlockedAt - a.unlockedAt);
+		});
 	}
-}
-
-.icon {
-	flex-shrink: 0;
-	margin-right: 12px;
-}
-
-@keyframes shine {
-	0% { translate: -30px; }
-	100% { translate: -130px; }
-}
-
-.iconFrame {
-	width: 58px;
-	height: 58px;
-	padding: 6px;
-	border-radius: 100%;
-	box-sizing: border-box;
-	pointer-events: none;
-	user-select: none;
-	filter: drop-shadow(0px 2px 2px #00000044);
-	box-shadow: 0 1px 0px #ffffff88 inset;
-	overflow: clip;
-}
-.iconFrame_bronze {
-	background: linear-gradient(0deg, #703827, #d37566);
-
-	> .iconInner {
-		background: linear-gradient(0deg, #d37566, #703827);
+	
+	function clickHere() {
+		claimAchievement('clickedClickHere');
+		fetch();
 	}
-}
-.iconFrame_silver {
-	background: linear-gradient(0deg, #7c7c7c, #e1e1e1);
-
-	> .iconInner {
-		background: linear-gradient(0deg, #e1e1e1, #7c7c7c);
+	
+	onMounted(() => {
+		fetch();
+	});
+	</script>
+	
+	<style lang="scss" module>
+	.root {
+		display: grid;
+		grid-template-columns: repeat(auto-fill, min(380px, 100%));
+		grid-gap: 12px;
+		place-content: center;
 	}
-}
-.iconFrame_gold {
-	background: linear-gradient(0deg, rgba(255,182,85,1) 0%, rgba(233,133,0,1) 49%, rgba(255,243,93,1) 51%, rgba(255,187,25,1) 100%);
-
-	> .iconInner {
-		background: linear-gradient(0deg, #ffee20, #eb7018);
+	
+	.achievement {
+		display: flex;
+		padding: 16px;
+	
+		&.locked {
+			opacity: 0.5;
+		}
 	}
-
-	&:before {
-		content: "";
-		display: block;
+	
+	.icon {
+		flex-shrink: 0;
+		margin-right: 12px;
+	}
+	
+	@keyframes shine {
+		0% { translate: -30px; }
+		100% { translate: -130px; }
+	}
+	
+	.iconFrame {
+		width: 58px;
+		height: 58px;
+		padding: 6px;
+		border-radius: 100%;
+		box-sizing: border-box;
+		pointer-events: none;
+		user-select: none;
+		filter: drop-shadow(0px 2px 2px #00000044);
+		box-shadow: 0 1px 0px #ffffff88 inset;
+		overflow: clip;
+	}
+	.iconFrame_bronze {
+		background: linear-gradient(0deg, #703827, #d37566);
+	
+		> .iconInner {
+			background: linear-gradient(0deg, #d37566, #703827);
+		}
+	}
+	.iconFrame_silver {
+		background: linear-gradient(0deg, #7c7c7c, #e1e1e1);
+	
+		> .iconInner {
+			background: linear-gradient(0deg, #e1e1e1, #7c7c7c);
+		}
+	}
+	.iconFrame_gold {
+		background: linear-gradient(0deg, rgba(255,182,85,1) 0%, rgba(233,133,0,1) 49%, rgba(255,243,93,1) 51%, rgba(255,187,25,1) 100%);
+	
+		> .iconInner {
+			background: linear-gradient(0deg, #ffee20, #eb7018);
+		}
+	
+		&:before {
+			content: "";
+			display: block;
+			position: absolute;
+		top: 30px;
+		width: 200px;
+		height: 8px;
+		rotate: -45deg;
+		translate: -30px;
+			background: #ffffff88;
+			animation: shine 2s infinite;
+		}
+	}
+	.iconFrame_platinum {
+		background: linear-gradient(0deg, rgba(154,154,154,1) 0%, rgba(226,226,226,1) 49%, rgba(255,255,255,1) 51%, rgba(195,195,195,1) 100%);
+	
+		> .iconInner {
+			background: linear-gradient(0deg, #e1e1e1, #7c7c7c);
+		}
+	
+		&:before {
+			content: "";
+			display: block;
+			position: absolute;
+		top: 30px;
+		width: 200px;
+		height: 8px;
+		rotate: -45deg;
+		translate: -30px;
+			background: #ffffffee;
+			animation: shine 2s infinite;
+		}
+	}
+	
+	.iconInner {
+		position: relative;
+		width: 100%;
+		height: 100%;
+		border-radius: 100%;
+		box-shadow: 0 1px 0px #ffffff88 inset;
+	}
+	
+	.iconImg {
+		width: calc(100% - 12px);
+		height: calc(100% - 12px);
 		position: absolute;
-    top: 30px;
-    width: 200px;
-    height: 8px;
-    rotate: -45deg;
-    translate: -30px;
-		background: #ffffff88;
-		animation: shine 2s infinite;
+		top: 0;
+		right: 0;
+		bottom: 0;
+		left: 0;
+		margin: auto;
+		filter: drop-shadow(0px 1px 2px #000000aa);
 	}
-}
-.iconFrame_platinum {
-	background: linear-gradient(0deg, rgba(154,154,154,1) 0%, rgba(226,226,226,1) 49%, rgba(255,255,255,1) 51%, rgba(195,195,195,1) 100%);
-
-	> .iconInner {
-		background: linear-gradient(0deg, #e1e1e1, #7c7c7c);
+	
+	.body {
+		flex: 1;
+		min-width: 0;
 	}
-
-	&:before {
-		content: "";
-		display: block;
-		position: absolute;
-    top: 30px;
-    width: 200px;
-    height: 8px;
-    rotate: -45deg;
-    translate: -30px;
-		background: #ffffffee;
-		animation: shine 2s infinite;
+	
+	.header {
+		margin-bottom: 8px;
+		display: flex;
 	}
-}
-
-.iconInner {
-	position: relative;
-	width: 100%;
-	height: 100%;
-	border-radius: 100%;
-	box-shadow: 0 1px 0px #ffffff88 inset;
-}
-
-.iconImg {
-	width: calc(100% - 12px);
-	height: calc(100% - 12px);
-	position: absolute;
-	top: 0;
-	right: 0;
-	bottom: 0;
-	left: 0;
-	margin: auto;
-	filter: drop-shadow(0px 1px 2px #000000aa);
-}
-
-.body {
-	flex: 1;
-	min-width: 0;
-}
-
-.header {
-	margin-bottom: 8px;
-	display: flex;
-}
-
-.title {
-	font-weight: bold;
-}
-
-.time {
-	margin-left: auto;
-	font-size: 85%;
-	opacity: 0.7;
-}
-
-.description {
-	font-size: 85%;
-}
-
-.flavor {
-	opacity: 0.7;
-	transform: skewX(-15deg);
-	font-size: 85%;
-	margin-top: 8px;
-}
-</style>
+	
+	.title {
+		font-weight: bold;
+	}
+	
+	.time {
+		margin-left: auto;
+		font-size: 85%;
+		opacity: 0.7;
+	}
+	
+	.description {
+		font-size: 85%;
+	}
+	
+	.flavor {
+		opacity: 0.7;
+		transform: skewX(-15deg);
+		font-size: 85%;
+		margin-top: 8px;
+	}
+	</style>
+	
\ No newline at end of file
diff --git a/packages/client/src/components/MkNotification.vue b/packages/client/src/components/MkNotification.vue
index b99239e76..e6a0a7184 100644
--- a/packages/client/src/components/MkNotification.vue
+++ b/packages/client/src/components/MkNotification.vue
@@ -225,7 +225,7 @@
 			<MkA
 				v-if="notification.type === 'achievementEarned'"
 				class="text"
-				:to="/my/achievements">
+				:to="'/my/achievements'">
 				{{ i18n.ts._achievements._types['_' + notification.achievement].title }}
 			</MkA>
 			<span