Merge remote-tracking branch 'misskey-original/develop' into develop

# Conflicts:
#	packages/backend/src/core/QueryService.ts
#	packages/backend/src/server/api/endpoints/drive/files/attached-notes.ts
#	packages/backend/src/server/api/endpoints/hashtags/users.ts
#	packages/backend/src/server/api/endpoints/notes/create.ts
#	packages/frontend/src/pages/emojis.emoji.vue

.github/workflows/changelog-check.yml

@@ -0,0 +1,43 @@
+name: Check the description in CHANGELOG.md
+
+on:
+  pull_request:
+    branches:
+      - master
+      - develop
+
+jobs:
+  check-changelog:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout head
+        uses: actions/checkout@v4.1.1
+      - name: Setup Node.js
+        uses: actions/setup-node@v4.0.1
+        with:
+          node-version-file: '.node-version'
+
+      - name: Checkout base
+        run: |
+          mkdir _base
+          cp -r .git _base/.git
+          cd _base
+          git fetch --depth 1 origin ${{ github.base_ref }}
+          git checkout origin/${{ github.base_ref }} CHANGELOG.md
+
+      - name: Copy to Checker directory for CHANGELOG-base.md
+        run: cp _base/CHANGELOG.md scripts/changelog-checker/CHANGELOG-base.md
+      - name: Copy to Checker directory for CHANGELOG-head.md
+        run: cp CHANGELOG.md scripts/changelog-checker/CHANGELOG-head.md
+      - name: diff
+        continue-on-error: true
+        run: diff -u CHANGELOG-base.md CHANGELOG-head.md
+        working-directory: scripts/changelog-checker
+
+      - name: Setup Checker
+        run: npm install
+        working-directory: scripts/changelog-checker
+      - name: Run Checker
+        run: npm run run
+        working-directory: scripts/changelog-checker

.github/workflows/check-misskey-js-autogen.yml

@@ -0,0 +1,127 @@
+name: Check Misskey JS autogen
+
+on:
+  pull_request:
+    branches:
+      - master
+      - develop
+    paths:
+      - packages/backend/**
+
+jobs:
+  check-misskey-js-autogen:
+    runs-on: ubuntu-latest
+    permissions:
+      pull-requests: write
+
+    env:
+      api_json_names: "api-base.json api-head.json"
+
+    steps:
+      - name: checkout
+        uses: actions/checkout@v4
+        with:
+          submodules: true
+
+      - name: setup pnpm
+        uses: pnpm/action-setup@v2
+        with:
+          version: 8
+
+      - name: setup node
+        id: setup-node
+        uses: actions/setup-node@v4
+        with:
+          node-version-file: '.node-version'
+          cache: pnpm
+
+      - name: install dependencies
+        run: pnpm i --frozen-lockfile
+
+      - name: wait get-api-diff
+        uses: lewagon/wait-on-check-action@v1.3.3
+        with:
+          ref: ${{ github.event.pull_request.head.sha }}
+          check-regexp: get-from-misskey .+
+          repo-token: ${{ secrets.GITHUB_TOKEN }}
+          wait-interval: 30
+
+      - name: Download artifact
+        uses: actions/github-script@v7
+        with:
+          script: |
+            const fs = require('fs');
+
+            const workflows = await github.rest.actions.listWorkflowRunsForRepo({
+              owner: context.repo.owner,
+              repo: context.repo.repo,
+              head_sha: `${{ github.event.pull_request.head.sha }}`
+            }).then(x => x.data.workflow_runs);
+
+            console.log(workflows.map(x => ({name: x.name, title: x.display_title})));
+
+            const run_id = workflows.find(x => x.name.includes("Get api.json from Misskey")).id;
+
+            let allArtifacts = await github.rest.actions.listWorkflowRunArtifacts({
+               owner: context.repo.owner,
+               repo: context.repo.repo,
+               run_id: run_id,
+            });
+
+            let matchArtifacts = allArtifacts.data.artifacts.filter((artifact) => {
+              return artifact.name.startsWith("api-artifact-") || artifact.name == "api-artifact"
+            });
+
+            await Promise.all(matchArtifacts.map(async (artifact) => {
+              let download = await github.rest.actions.downloadArtifact({
+                owner: context.repo.owner,
+                repo: context.repo.repo,
+                artifact_id: artifact.id,
+                archive_format: 'zip',
+              });
+              await fs.promises.writeFile(`${process.env.GITHUB_WORKSPACE}/${artifact.name}.zip`, Buffer.from(download.data));
+            }));
+
+      - name: unzip artifacts
+        run: |-
+          find . -mindepth 1 -maxdepth 1 -type f -name '*.zip' -exec unzip {} -d . ';'
+          ls -la
+
+      - name: build autogen
+        run: |-
+          for name in $(echo $api_json_names)
+          do
+            checksum=$(mktemp)
+            mv $name packages/misskey-js/generator/api.json
+
+            cd packages/misskey-js/generator
+            pnpm run generate
+            find built -type f -exec sh -c 'echo $(sed -E "s/^\s+\*\s+generatedAt:.+$//" {} | sha256sum | cut -d" " -f 1) {}' \; > $checksum
+            cd ../../..
+            cp $checksum ${name}_checksum
+          done
+
+      - name: check update for type definitions
+        run: diff $(echo -n ${api_json_names} | awk -v RS=" " '{ printf "%s_checksum ", $0 }')
+
+      - name: send message
+        if: failure()
+        uses: thollander/actions-comment-pull-request@v2
+        with:
+          comment_tag: check-misskey-js-autogen
+          message: |-
+            Thank you for sending us a great Pull Request! 👍
+            Please regenerate misskey-js type definitions! 🙏
+
+            example:
+            ```sh
+            pnpm run build-misskey-js-with-types
+            ```
+
+      - name: send message
+        if: success()
+        uses: thollander/actions-comment-pull-request@v2
+        with:
+          comment_tag: check-misskey-js-autogen
+          mode: delete
+          message: "Thank you!"

.github/workflows/validate-api-json.yml

@@ -33,8 +33,8 @@ jobs:
       with:
         node-version: ${{ matrix.node-version }}
         cache: 'pnpm'
-    - name: Install swagger-cli
-      run: npm i -g swagger-cli
+    - name: Install Redocly CLI
+      run: npm i -g @redocly/cli
     - run: corepack enable
     - run: pnpm i --frozen-lockfile
     - name: Check pnpm-lock.yaml
@@ -44,4 +44,4 @@ jobs:
     - name: Build and generate
       run: pnpm build && pnpm --filter backend generate-api-json
     - name: Validation
-      run: swagger-cli validate ./packages/backend/built/api.json
+      run: npx @redocly/cli lint --extends=minimal ./packages/backend/built/api.json

CHANGELOG.md

@@ -20,12 +20,16 @@
 
 ### Client
 - Feat: 新しいゲームを追加
+- Feat: 音声・映像プレイヤーを追加
+- Feat: 絵文字の詳細ダイアログを追加
+- Feat: 枠線をつけるMFM`$[border.width=1,style=solid,color=fff,radius=0 ...]`を追加
 - Enhance: ハッシュタグ入力時に、本文の末尾の行に何も書かれていない場合は新たにスペースを追加しないように
 - Enhance: チャンネルノートのピン留めをノートのメニューからできるように
 - Enhance: 管理者の場合はAPI tokenの発行画面で管理機能に関する権限を付与できるように
 - Enhance: AiScriptを0.17.0に更新　[CHANGELOG](https://github.com/aiscript-dev/aiscript/blob/bb89d132b633a622d3cb0eff0d0cc7e476c0cfdd/CHANGELOG.md)
   - 配列の範囲外・非整数のインデックスへの代入が完全禁止になるので注意
 - Enhance: 絵文字ピッカー・オートコンプリートで、完全一致した絵文字を優先的に表示するように
+- Enhance: Playの説明欄にMFMを使えるように
 - Fix: ネイティブモードの絵文字がモノクロにならないように
 - Fix: v2023.12.0で追加された「モデレーターがユーザーのアイコンもしくはバナー画像を未設定状態にできる機能」が管理画面上で正しく表示されていない問題を修正
 - Fix: AiScriptの`readline`関数が不正な値を返すことがある問題のv2023.12.0時点での修正がPlay以外に適用されていないのを修正
@@ -35,7 +39,12 @@
 - Enhance: 連合先のレートリミットに引っかかった際にリトライするようになりました
 - Enhance: ActivityPub Deliver queueでBodyを事前処理するように (#12916)
 - Enhance: クリップをエクスポートできるように
+- Enhance: `/files`のファイルに対してHTTP Rangeリクエストを行えるように
+- Enhance: `api.json`のOpenAPI Specificationを3.1.0に更新
 - Fix: `drive/files/update`でファイル名のバリデーションが機能していない問題を修正
+- Fix: `notes/create`で、`text`が空白文字のみで構成されているか`null`であって、かつ`text`だけであるリクエストに対するレスポンスが400になるように変更
+- Fix: `notes/create`で、`text`が空白文字のみで構成されていてかつリノート、ファイルまたは投票を含んでいるリクエストに対するレスポンスの`text`が`""`から`null`になるように変更
+- Fix: ipv4とipv6の両方が利用可能な環境でallowedPrivateNetworksが設定されていた場合プライベートipの検証ができていなかった問題を修正
 
 ## 2023.12.2
 

locales/index.d.ts

@@ -1104,6 +1104,8 @@ export interface Locale {
     "noteIdOrUrl": string;
     "video": string;
     "videos": string;
+    "audio": string;
+    "audioFiles": string;
     "dataSaver": string;
     "cellularWithDataSaver": string;
     "UltimateDataSaver": string;

locales/ja-JP.yml

@@ -1101,6 +1101,8 @@ limitWidthOfReaction: "リアクションの最大横幅を制限し、縮小し
 noteIdOrUrl: "ノートIDまたはURL"
 video: "動画"
 videos: "動画"
+audio: "音声"
+audioFiles: "音声"
 dataSaver: "データセーバー"
 cellularWithDataSaver: "モバイルデータ通信でデータセーバーをオンにする"
 UltimateDataSaver: "究極のデータセーバー"

packages/backend/migration/1705222772858-optimize-note-index-for-array-column.js

@@ -0,0 +1,24 @@
+/*
+ * SPDX-FileCopyrightText: syuilo and other misskey contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+
+export class OptimizeNoteIndexForArrayColumns1705222772858 {
+    name = 'OptimizeNoteIndexForArrayColumns1705222772858'
+
+    async up(queryRunner) {
+        await queryRunner.query(`DROP INDEX "public"."IDX_796a8c03959361f97dc2be1d5c"`);
+        await queryRunner.query(`DROP INDEX "public"."IDX_54ebcb6d27222913b908d56fd8"`);
+        await queryRunner.query(`DROP INDEX "public"."IDX_88937d94d7443d9a99a76fa5c0"`);
+        await queryRunner.query(`DROP INDEX "public"."IDX_51c063b6a133a9cb87145450f5"`);
+        await queryRunner.query(`CREATE INDEX "IDX_NOTE_FILE_IDS" ON "note" using gin ("fileIds")`)
+    }
+
+    async down(queryRunner) {
+        await queryRunner.query(`DROP INDEX "IDX_NOTE_FILE_IDS"`)
+        await queryRunner.query(`CREATE INDEX "IDX_51c063b6a133a9cb87145450f5" ON "note" ("fileIds") `);
+        await queryRunner.query(`CREATE INDEX "IDX_88937d94d7443d9a99a76fa5c0" ON "note" ("tags") `);
+        await queryRunner.query(`CREATE INDEX "IDX_54ebcb6d27222913b908d56fd8" ON "note" ("mentions") `);
+        await queryRunner.query(`CREATE INDEX "IDX_796a8c03959361f97dc2be1d5c" ON "note" ("visibleUserIds") `);
+    }
+}

packages/backend/src/core/DownloadService.ts

@@ -145,7 +145,8 @@ export class DownloadService {
 		const parsedIp = ipaddr.parse(ip);
 
 		for (const net of this.config.allowedPrivateNetworks ?? []) {
-			if (parsedIp.match(ipaddr.parseCIDR(net))) {
+			const cidr = ipaddr.parseCIDR(net);
+			if (cidr[0].kind() === parsedIp.kind() && parsedIp.match(ipaddr.parseCIDR(net))) {
 				return false;
 			}
 		}

packages/backend/src/core/NoteCreateService.ts

@@ -294,6 +294,9 @@ export class NoteCreateService implements OnApplicationShutdown {
 				data.text = data.text.slice(0, DB_MAX_NOTE_TEXT_LENGTH);
 			}
 			data.text = data.text.trim();
+			if (data.text === '') {
+				data.text = null;
+			}
 		} else {
 			data.text = null;
 		}

packages/backend/src/core/QueryService.ts

@@ -212,8 +212,8 @@ export class QueryService {
 				// または 自分自身
 					.orWhere('note.userId = :meId')
 				// または 自分宛て
-					.orWhere(':meId IN (SELECT unnest(note.visibleUserIds))')
-					.orWhere(':meId IN (SELECT unnest(note.mentions))')
+					.orWhere(':meIdAsList <@ note.visibleUserIds')
+					.orWhere(':meIdAsList <@ note.mentions')
 					.orWhere(new Brackets(qb => {
 						qb
 						// または フォロワー宛ての投稿であり、
@@ -228,7 +228,7 @@ export class QueryService {
 					}));
 			}));
 
-			q.setParameters({ meId: me.id });
+			q.setParameters({ meId: me.id, meIdAsList: [me.id] });
 		}
 	}
 

packages/backend/src/models/Note.ts

@@ -11,9 +11,6 @@ import { MiChannel } from './Channel.js';
 import type { MiDriveFile } from './DriveFile.js';
 
 @Entity('note')
-@Index('IDX_NOTE_TAGS', { synchronize: false })
-@Index('IDX_NOTE_MENTIONS', { synchronize: false })
-@Index('IDX_NOTE_VISIBLE_USER_IDS', { synchronize: false })
 export class MiNote {
 	@PrimaryColumn(id())
 	public id: string;
@@ -137,7 +134,7 @@ export class MiNote {
 	})
 	public url: string | null;
 
-	@Index()
+	@Index('IDX_NOTE_FILE_IDS', { synchronize: false })
 	@Column({
 		...id(),
 		array: true, default: '{}',
@@ -149,14 +146,14 @@ export class MiNote {
 	})
 	public attachedFileTypes: string[];
 
-	@Index()
+	@Index('IDX_NOTE_VISIBLE_USER_IDS', { synchronize: false })
 	@Column({
 		...id(),
 		array: true, default: '{}',
 	})
 	public visibleUserIds: MiUser['id'][];
 
-	@Index()
+	@Index('IDX_NOTE_MENTIONS', { synchronize: false })
 	@Column({
 		...id(),
 		array: true, default: '{}',
@@ -178,7 +175,7 @@ export class MiNote {
 	})
 	public emojis: string[];
 
-	@Index()
+	@Index('IDX_NOTE_TAGS', { synchronize: false })
 	@Column('varchar', {
 		length: 128, array: true, default: '{}',
 	})

packages/backend/src/server/FileServerService.ts

@@ -168,11 +168,35 @@ export class FileServerService {
 				}
 
 				if (!image) {
-					image = {
-						data: fs.createReadStream(file.path),
-						ext: file.ext,
-						type: file.mime,
-					};
+					if (request.headers.range && file.file.size > 0) {
+						const range = request.headers.range as string;
+						const parts = range.replace(/bytes=/, '').split('-');
+						const start = parseInt(parts[0], 10);
+						let end = parts[1] ? parseInt(parts[1], 10) : file.file.size - 1;
+						if (end > file.file.size) {
+							end = file.file.size - 1;
+						}
+						const chunksize = end - start + 1;
+
+						image = {
+							data: fs.createReadStream(file.path, {
+								start,
+								end,
+							}),
+							ext: file.ext,
+							type: file.mime,
+						};
+
+						reply.header('Content-Range', `bytes ${start}-${end}/${file.file.size}`);
+						reply.header('Accept-Ranges', 'bytes');
+						reply.header('Content-Length', chunksize);
+					} else {
+						image = {
+							data: fs.createReadStream(file.path),
+							ext: file.ext,
+							type: file.mime,
+						};
+					}
 				}
 
 				if ('pipe' in image.data && typeof image.data.pipe === 'function') {
@@ -203,11 +227,54 @@ export class FileServerService {
 				reply.header('Content-Type', FILE_TYPE_BROWSERSAFE.includes(file.mime) ? file.mime : 'application/octet-stream');
 				reply.header('Cache-Control', 'max-age=31536000, immutable');
 				reply.header('Content-Disposition', contentDisposition('inline', filename));
+
+				if (request.headers.range && file.file.size > 0) {
+					const range = request.headers.range as string;
+					const parts = range.replace(/bytes=/, '').split('-');
+					const start = parseInt(parts[0], 10);
+					let end = parts[1] ? parseInt(parts[1], 10) : file.file.size - 1;
+					if (end > file.file.size) {
+						end = file.file.size - 1;
+					}
+					const chunksize = end - start + 1;
+					const fileStream = fs.createReadStream(file.path, {
+						start,
+						end,
+					});
+					reply.header('Content-Range', `bytes ${start}-${end}/${file.file.size}`);
+					reply.header('Accept-Ranges', 'bytes');
+					reply.header('Content-Length', chunksize);
+					reply.code(206);
+					return fileStream;
+				}
+
 				return fs.createReadStream(file.path);
 			} else {
 				reply.header('Content-Type', FILE_TYPE_BROWSERSAFE.includes(file.file.type) ? file.file.type : 'application/octet-stream');
 				reply.header('Cache-Control', 'max-age=31536000, immutable');
 				reply.header('Content-Disposition', contentDisposition('inline', file.filename));
+
+				if (request.headers.range && file.file.size > 0) {
+					const range = request.headers.range as string;
+					const parts = range.replace(/bytes=/, '').split('-');
+					const start = parseInt(parts[0], 10);
+					let end = parts[1] ? parseInt(parts[1], 10) : file.file.size - 1;
+					console.log(end);
+					if (end > file.file.size) {
+						end = file.file.size - 1;
+					}
+					const chunksize = end - start + 1;
+					const fileStream = fs.createReadStream(file.path, {
+						start,
+						end,
+					});
+					reply.header('Content-Range', `bytes ${start}-${end}/${file.file.size}`);
+					reply.header('Accept-Ranges', 'bytes');
+					reply.header('Content-Length', chunksize);
+					reply.code(206);
+					return fileStream;
+				}
+
 				return fs.createReadStream(file.path);
 			}
 		} catch (e) {
@@ -362,11 +429,35 @@ export class FileServerService {
 			}
 
 			if (!image) {
-				image = {
-					data: fs.createReadStream(file.path),
-					ext: file.ext,
-					type: file.mime,
-				};
+				if (request.headers.range && file.file && file.file.size > 0) {
+					const range = request.headers.range as string;
+					const parts = range.replace(/bytes=/, '').split('-');
+					const start = parseInt(parts[0], 10);
+					let end = parts[1] ? parseInt(parts[1], 10) : file.file.size - 1;
+					if (end > file.file.size) {
+						end = file.file.size - 1;
+					}
+					const chunksize = end - start + 1;
+
+					image = {
+						data: fs.createReadStream(file.path, {
+							start,
+							end,
+						}),
+						ext: file.ext,
+						type: file.mime,
+					};
+
+					reply.header('Content-Range', `bytes ${start}-${end}/${file.file.size}`);
+					reply.header('Accept-Ranges', 'bytes');
+					reply.header('Content-Length', chunksize);
+				} else {
+					image = {
+						data: fs.createReadStream(file.path),
+						ext: file.ext,
+						type: file.mime,
+					};
+				}
 			}
 
 			if ('cleanup' in file) {

packages/backend/src/server/api/endpoints/drive/files.ts

@@ -36,7 +36,7 @@ export const paramDef = {
 		untilId: { type: 'string', format: 'misskey:id' },
 		folderId: { type: 'string', format: 'misskey:id', nullable: true, default: null },
 		type: { type: 'string', nullable: true, pattern: /^[a-zA-Z\/\-*]+$/.toString().slice(1, -1) },
-		sort: { type: 'string', nullable: true, enum: ['+createdAt', '-createdAt', '+name', '-name', '+size', '-size'] },
+		sort: { type: 'string', nullable: true, enum: ['+createdAt', '-createdAt', '+name', '-name', '+size', '-size', null] },
 	},
 	required: [],
 } as const;

packages/backend/src/server/api/endpoints/federation/instances.ts

@@ -60,6 +60,7 @@ export const paramDef = {
 				'-firstRetrievedAt',
 				'+latestRequestReceivedAt',
 				'-latestRequestReceivedAt',
+				null,
 			],
 		},
 	},

packages/backend/src/server/api/endpoints/hashtags/users.ts

@@ -6,6 +6,7 @@
 import { Inject, Injectable } from '@nestjs/common';
 import { Endpoint } from '@/server/api/endpoint-base.js';
 import type { UsersRepository } from '@/models/_.js';
+import { safeForSql } from "@/misc/safe-for-sql.js";
 import { normalizeForSearch } from '@/misc/normalize-for-search.js';
 import { UserEntityService } from '@/core/entities/UserEntityService.js';
 import { DI } from '@/di-symbols.js';
@@ -47,8 +48,9 @@ export default class extends Endpoint<typeof meta, typeof paramDef> { // eslint-
 		private userEntityService: UserEntityService,
 	) {
 		super(meta, paramDef, async (ps, me) => {
+			if (!safeForSql(normalizeForSearch(ps.tag))) throw new Error('Injection');
 			const query = this.usersRepository.createQueryBuilder('user')
-				.where(':tag IN (user.tags)', { tag: normalizeForSearch(ps.tag) })
+				.where(':tag <@ user.tags', { tag: [normalizeForSearch(ps.tag)] })
 				.andWhere('user.isSuspended = FALSE');
 
 			const recent = new Date(Date.now() - (1000 * 60 * 60 * 24 * 5));

packages/backend/src/server/api/endpoints/i/2fa/register-key.ts

@@ -103,13 +103,13 @@ export const meta = {
 							items: {
 								type: 'string',
 								enum: [
-									"ble",
-									"cable",
-									"hybrid",
-									"internal",
-									"nfc",
-									"smart-card",
-									"usb",
+									'ble',
+									'cable',
+									'hybrid',
+									'internal',
+									'nfc',
+									'smart-card',
+									'usb',
 								],
 							},
 						},
@@ -123,8 +123,8 @@ export const meta = {
 					authenticatorAttachment: {
 						type: 'string',
 						enum: [
-							"cross-platform",
-							"platform",
+							'cross-platform',
+							'platform',
 						],
 					},
 					requireResidentKey: {
@@ -133,9 +133,9 @@ export const meta = {
 					userVerification: {
 						type: 'string',
 						enum: [
-							"discouraged",
-							"preferred",
-							"required",
+							'discouraged',
+							'preferred',
+							'required',
 						],
 					},
 				},
@@ -144,10 +144,11 @@ export const meta = {
 				type: 'string',
 				nullable: true,
 				enum: [
-					"direct",
-					"enterprise",
-					"indirect",
-					"none",
+					'direct',
+					'enterprise',
+					'indirect',
+					'none',
+					null,
 				],
 			},
 			extensions: {

packages/backend/src/server/api/endpoints/notes/create.test.ts

@@ -34,11 +34,10 @@ describe('api:notes/create', () => {
 					.toBe(VALID);
 			});
 
-			// TODO
-			//test('null post', () => {
-			//	expect(v({ text: null }))
-			//		.toBe(INVALID);
-			//});
+			test('null post', () => {
+				expect(v({ text: null }))
+					.toBe(INVALID);
+			});
 
 			test('0 characters post', () => {
 				expect(v({ text: '' }))
@@ -49,6 +48,11 @@ describe('api:notes/create', () => {
 				expect(v({ text: await tooLong }))
 					.toBe(INVALID);
 			});
+
+			test('whitespace-only post', () => {
+				expect(v({ text: ' ' }))
+					.toBe(INVALID);
+			});
 		});
 
 		describe('cw', () => {

packages/backend/src/server/api/endpoints/notes/create.ts

@@ -213,14 +213,36 @@ export const paramDef = {
 		},
 	},
 	// (re)note with text, files and poll are optional
-	anyOf: [
-		{ required: ['text'] },
-		{ required: ['renoteId'] },
-		{ required: ['fileIds'] },
-		{ required: ['mediaIds'] },
-		{ required: ['poll'] },
-		{ required: ['schedule'] },
-	],
+	if: {
+		properties: {
+			renoteId: {
+				type: 'null',
+			},
+			fileIds: {
+				type: 'null',
+			},
+			mediaIds: {
+				type: 'null',
+			},
+			poll: {
+				type: 'null',
+			},
+			schedule:{
+				type: 'null'
+			}
+		},
+	},
+	then: {
+		properties: {
+			text: {
+				type: 'string',
+				minLength: 1,
+				maxLength: MAX_NOTE_TEXT_LENGTH,
+				pattern: '[^\\s]+',
+			},
+		},
+		required: ['text'],
+	},
 } as const;
 
 @Injectable()

packages/backend/src/server/api/endpoints/notes/mentions.ts

@@ -61,9 +61,9 @@ export default class extends Endpoint<typeof meta, typeof paramDef> { // eslint-
 
 			const query = this.queryService.makePaginationQuery(this.notesRepository.createQueryBuilder('note'), ps.sinceId, ps.untilId)
 				.andWhere(new Brackets(qb => {
-					qb
-						.where(`'{"${me.id}"}' <@ note.mentions`)
-						.orWhere(`'{"${me.id}"}' <@ note.visibleUserIds`);
+					qb // このmeIdAsListパラメータはqueryServiceのgenerateVisibilityQueryでセットされる
+						.where(':meIdAsList <@ note.mentions')
+						.orWhere(':meIdAsList <@ note.visibleUserIds');
 				}))
 				// Avoid scanning primary key index
 				.orderBy('CONCAT(note.id)', 'DESC')

packages/backend/src/server/api/endpoints/notes/search-by-tag.ts

@@ -87,14 +87,14 @@ export default class extends Endpoint<typeof meta, typeof paramDef> { // eslint-
 			try {
 				if (ps.tag) {
 					if (!safeForSql(normalizeForSearch(ps.tag))) throw new Error('Injection');
-					query.andWhere(`'{"${normalizeForSearch(ps.tag)}"}' <@ note.tags`);
+					query.andWhere(':tag <@ note.tags', { tag: [normalizeForSearch(ps.tag)] });
 				} else {
 					query.andWhere(new Brackets(qb => {
 						for (const tags of ps.query!) {
 							qb.orWhere(new Brackets(qb => {
 								for (const tag of tags) {
 									if (!safeForSql(normalizeForSearch(tag))) throw new Error('Injection');
-									qb.andWhere(`'{"${normalizeForSearch(tag)}"}' <@ note.tags`);
+									qb.andWhere(':tag <@ note.tags', { tag: [normalizeForSearch(tag)] });
 								}
 							}));
 						}

packages/backend/src/server/api/openapi/gen-spec.ts

@@ -10,7 +10,7 @@ import { schemas, convertSchemaToOpenApiSchema } from './schemas.js';
 
 export function genOpenapiSpec(config: Config) {
 	const spec = {
-		openapi: '3.0.0',
+		openapi: '3.1.0',
 
 		info: {
 			version: config.version,
@@ -56,7 +56,7 @@ export function genOpenapiSpec(config: Config) {
 			}
 		}
 
-		const resSchema = endpoint.meta.res ? convertSchemaToOpenApiSchema(endpoint.meta.res) : {};
+		const resSchema = endpoint.meta.res ? convertSchemaToOpenApiSchema(endpoint.meta.res, 'res') : {};
 
 		let desc = (endpoint.meta.description ? endpoint.meta.description : 'No description provided.') + '\n\n';
 
@@ -71,7 +71,7 @@ export function genOpenapiSpec(config: Config) {
 		}
 
 		const requestType = endpoint.meta.requireFile ? 'multipart/form-data' : 'application/json';
-		const schema = { ...endpoint.params };
+		const schema = { ...convertSchemaToOpenApiSchema(endpoint.params, 'param') };
 
 		if (endpoint.meta.requireFile) {
 			schema.properties = {
@@ -210,7 +210,9 @@ export function genOpenapiSpec(config: Config) {
 		};
 
 		spec.paths['/' + endpoint.name] = {
-			...(endpoint.meta.allowGet ? { get: info } : {}),
+			...(endpoint.meta.allowGet ? {
+				get: info,
+			} : {}),
 			post: info,
 		};
 	}

packages/backend/src/server/api/openapi/schemas.ts

@@ -6,32 +6,35 @@
 import type { Schema } from '@/misc/json-schema.js';
 import { refs } from '@/misc/json-schema.js';
 
-export function convertSchemaToOpenApiSchema(schema: Schema) {
-	// optional, refはスキーマ定義に含まれないので分離しておく
+export function convertSchemaToOpenApiSchema(schema: Schema, type: 'param' | 'res') {
+	// optional, nullable, refはスキーマ定義に含まれないので分離しておく
 	// eslint-disable-next-line @typescript-eslint/no-unused-vars
-	const { optional, ref, ...res }: any = schema;
+	const { optional, nullable, ref, ...res }: any = schema;
 
 	if (schema.type === 'object' && schema.properties) {
-		const required = Object.entries(schema.properties).filter(([k, v]) => !v.optional).map(([k]) => k);
-		if (required.length > 0) {
+		if (type === 'res') {
+			const required = Object.entries(schema.properties).filter(([k, v]) => !v.optional).map(([k]) => k);
+			if (required.length > 0) {
 			// 空配列は許可されない
-			res.required = required;
+				res.required = required;
+			}
 		}
 
 		for (const k of Object.keys(schema.properties)) {
-			res.properties[k] = convertSchemaToOpenApiSchema(schema.properties[k]);
+			res.properties[k] = convertSchemaToOpenApiSchema(schema.properties[k], type);
 		}
 	}
 
 	if (schema.type === 'array' && schema.items) {
-		res.items = convertSchemaToOpenApiSchema(schema.items);
+		res.items = convertSchemaToOpenApiSchema(schema.items, type);
 	}
 
-	if (schema.anyOf) res.anyOf = schema.anyOf.map(convertSchemaToOpenApiSchema);
-	if (schema.oneOf) res.oneOf = schema.oneOf.map(convertSchemaToOpenApiSchema);
-	if (schema.allOf) res.allOf = schema.allOf.map(convertSchemaToOpenApiSchema);
+	for (const o of ['anyOf', 'oneOf', 'allOf'] as const) {
+		// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+		if (o in schema) res[o] = schema[o]!.map(schema => convertSchemaToOpenApiSchema(schema, type));
+	}
 
-	if (schema.ref) {
+	if (type === 'res' && schema.ref) {
 		const $ref = `#/components/schemas/${schema.ref}`;
 		if (schema.nullable || schema.optional) {
 			res.allOf = [{ $ref }];
@@ -40,6 +43,14 @@ export function convertSchemaToOpenApiSchema(schema: Schema) {
 		}
 	}
 
+	if (schema.nullable) {
+		if (Array.isArray(schema.type) && !schema.type.includes('null')) {
+			res.type.push('null');
+		} else if (typeof schema.type === 'string') {
+			res.type = [res.type, 'null'];
+		}
+	}
+
 	return res;
 }
 
@@ -72,6 +83,6 @@ export const schemas = {
 	},
 
 	...Object.fromEntries(
-		Object.entries(refs).map(([key, schema]) => [key, convertSchemaToOpenApiSchema(schema)]),
+		Object.entries(refs).map(([key, schema]) => [key, convertSchemaToOpenApiSchema(schema, 'res')]),
 	),
 };

packages/backend/test/e2e/drive.ts

@@ -0,0 +1,95 @@
+/*
+ * SPDX-FileCopyrightText: syuilo and other misskey contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+
+process.env.NODE_ENV = 'test';
+
+import * as assert from 'assert';
+import { MiNote } from '@/models/Note.js';
+import { api, initTestDb, makeStreamCatcher, post, signup, uploadFile } from '../utils.js';
+import type * as misskey from 'misskey-js';
+import type{ Repository } from 'typeorm'
+import type { Packed } from '@/misc/json-schema.js';
+
+
+describe('Drive', () => {
+	let Notes: Repository<MiNote>;
+
+	let alice: misskey.entities.SignupResponse;
+	let bob: misskey.entities.SignupResponse;
+
+	beforeAll(async () => {
+		const connection = await initTestDb(true);
+		Notes = connection.getRepository(MiNote);
+		alice = await signup({ username: 'alice' });
+		bob = await signup({ username: 'bob' });
+	}, 1000 * 60 * 2);
+
+	test('ファイルURLからアップロードできる', async () => {
+		// utils.js uploadUrl の処理だがAPIレスポンスも見るためここで同様の処理を書いている
+
+		const marker = Math.random().toString();
+
+		const url = 'https://raw.githubusercontent.com/misskey-dev/misskey/develop/packages/backend/test/resources/Lenna.jpg'
+
+		const catcher = makeStreamCatcher(
+			alice,
+			'main',
+			(msg) => msg.type === 'urlUploadFinished' && msg.body.marker === marker,
+			(msg) => msg.body.file as Packed<'DriveFile'>,
+			10 * 1000);
+
+		const res = await api('drive/files/upload-from-url', {
+			url,
+			marker,
+			force: true,
+		}, alice);
+
+		const file = await catcher;
+
+		assert.strictEqual(res.status, 204);
+		assert.strictEqual(file.name, 'Lenna.jpg');
+		assert.strictEqual(file.type, 'image/jpeg');
+	})
+
+	test('ローカルからアップロードできる', async () => {
+		// APIレスポンスを直接使用するので utils.js uploadFile が通過することで成功とする
+
+		const res = await uploadFile(alice, { path: 'Lenna.jpg', name: 'テスト画像' });
+
+		assert.strictEqual(res.body?.name, 'テスト画像.jpg');
+		assert.strictEqual(res.body?.type, 'image/jpeg');
+	})
+
+	test('添付ノート一覧を取得できる', async () => {
+		const ids = (await Promise.all([uploadFile(alice), uploadFile(alice), uploadFile(alice)])).map(elm => elm.body!.id)
+
+		const note0 = await post(alice, { fileIds: [ids[0]] });
+		const note1 = await post(alice, { fileIds: [ids[0], ids[1]] });
+
+		const attached0 = await api('drive/files/attached-notes', { fileId: ids[0] }, alice);
+		assert.strictEqual(attached0.body.length, 2);
+		assert.strictEqual(attached0.body[0].id, note1.id)
+		assert.strictEqual(attached0.body[1].id, note0.id)
+
+		const attached1 = await api('drive/files/attached-notes', { fileId: ids[1] }, alice);
+		assert.strictEqual(attached1.body.length, 1);
+		assert.strictEqual(attached1.body[0].id, note1.id)
+
+		const attached2 = await api('drive/files/attached-notes', { fileId: ids[2] }, alice);
+		assert.strictEqual(attached2.body.length, 0)
+	})
+
+	test('添付ノート一覧は他の人から見えない', async () => {
+		const file = await uploadFile(alice);
+
+		await post(alice, { fileIds: [file.body!.id] });
+
+		const res = await api('drive/files/attached-notes', { fileId: file.body!.id }, bob);
+		assert.strictEqual(res.status, 400);
+		assert.strictEqual('error' in res.body, true);
+
+	})
+});
+

packages/backend/test/e2e/note.ts

@@ -136,6 +136,19 @@ describe('Note', () => {
 		assert.strictEqual(res.body.createdNote.renote.text, bobPost.text);
 	});
 
+	test('引用renoteで空白文字のみで構成されたtextにするとレスポンスがtext: nullになる', async () => {
+		const bobPost = await post(bob, {
+			text: 'test',
+		});
+		const res = await api('/notes/create', {
+			text: ' ',
+			renoteId: bobPost.id,
+		}, alice);
+
+		assert.strictEqual(res.status, 200);
+		assert.strictEqual(res.body.createdNote.text, null);
+	});
+
 	test('visibility: followersでrenoteできる', async () => {
 		const createRes = await api('/notes/create', {
 			text: 'test',

packages/backend/test/utils.ts

@@ -16,6 +16,7 @@ import { DEFAULT_POLICIES } from '@/core/RoleService.js';
 import { entities } from '../src/postgres.js';
 import { loadConfig } from '../src/config.js';
 import type * as misskey from 'misskey-js';
+import { Packed } from '@/misc/json-schema.js';
 
 export { server as startServer, jobQueue as startJobQueue } from '@/boot/common.js';
 
@@ -114,6 +115,20 @@ export function randomString(chars = 'abcdefghijklmnopqrstuvwxyz0123456789', len
 	return randomString;
 }
 
+/**
+ * @brief プロミスにタイムアウト追加
+ * @param p 待ち対象プロミス
+ * @param timeout 待機ミリ秒
+ */
+function timeoutPromise<T>(p: Promise<T>, timeout: number): Promise<T> {
+	return Promise.race([
+		p,
+		new Promise((reject) =>{
+			setTimeout(() => { reject(new Error('timed out')); }, timeout)
+		}) as never
+	]);
+}
+
 export const signup = async (params?: Partial<misskey.Endpoints['signup']['req']>): Promise<NonNullable<misskey.Endpoints['signup']['res']>> => {
 	const q = Object.assign({
 		username: randomString(),
@@ -320,17 +335,16 @@ export const uploadFile = async (user?: UserToken, { path, name, blob }: UploadO
 	};
 };
 
-export const uploadUrl = async (user: UserToken, url: string) => {
-	let resolve: unknown;
-	const file = new Promise(ok => resolve = ok);
+export const uploadUrl = async (user: UserToken, url: string): Promise<Packed<'DriveFile'>> => {
 	const marker = Math.random().toString();
 
-	const ws = await connectStream(user, 'main', (msg) => {
-		if (msg.type === 'urlUploadFinished' && msg.body.marker === marker) {
-			ws.close();
-			resolve(msg.body.file);
-		}
-	});
+	const catcher = makeStreamCatcher(
+		user,
+		'main',
+		(msg) => msg.type === 'urlUploadFinished' && msg.body.marker === marker,
+		(msg) => msg.body.file as Packed<'DriveFile'>,
+		60 * 1000
+	);
 
 	await api('drive/files/upload-from-url', {
 		url,
@@ -338,7 +352,7 @@ export const uploadUrl = async (user: UserToken, url: string) => {
 		force: true,
 	}, user);
 
-	return file;
+	return catcher;
 };
 
 export function connectStream(user: UserToken, channel: string, listener: (message: Record<string, any>) => any, params?: any): Promise<WebSocket> {
@@ -410,6 +424,35 @@ export const waitFire = async (user: UserToken, channel: string, trgr: () => any
 	});
 };
 
+/**
+ * @brief WebSocketストリームから特定条件の通知を拾うプロミスを生成
+ * @param user ユーザー認証情報
+ * @param channel チャンネル
+ * @param cond 条件
+ * @param extractor 取り出し処理
+ * @param timeout ミリ秒タイムアウト
+ * @returns 時間内に正常に処理できた場合に通知からextractorを通した値を得る
+ */
+export function makeStreamCatcher<T>(
+		user: UserToken,
+		channel: string,
+		cond: (message: Record<string, any>) => boolean,
+		extractor: (message: Record<string, any>) => T,
+		timeout = 60 * 1000): Promise<T> {
+	let ws: WebSocket
+	const p = new Promise<T>(async (resolve) => {
+		ws = await connectStream(user, channel, (msg) => {
+			if (cond(msg)) {
+				resolve(extractor(msg))
+			}
+		});
+	}).finally(() => {
+		ws?.close();
+	});
+
+	return timeoutPromise(p, timeout);
+}
+
 export type SimpleGetResponse = {
 	status: number,
 	body: any | JSDOM | null,

packages/frontend/assets/drop-and-fusion/sweets_monos/candy_color.svg

@@ -0,0 +1,86 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M13 3.99998C13 2.89998 12.2135 2.08134 11.0625 1.9375C9.875 1.78909 9.10938 2.49997 8.51562 3.57811C8.20282 4.14611 7.69531 4.34368 7.13281 4.15621C6.07292 3.80295 5.07886 3.24214 4.07812 4.38277C3.35156 5.21089 3.46006 6.16444 4.07812 7.07811C4.4375 7.60936 4.46599 8.50491 3.85938 8.85154C2.98438 9.35154 2.01562 9.89998 2.01562 11C2.01562 12.5937 3.22812 13.375 4.32812 13.375L13 13V3.99998Z" fill="url(#paint0_linear_18_32303)"/>
+<path d="M13 3.99998C13 2.89998 12.2135 2.08134 11.0625 1.9375C9.875 1.78909 9.10938 2.49997 8.51562 3.57811C8.20282 4.14611 7.69531 4.34368 7.13281 4.15621C6.07292 3.80295 5.07886 3.24214 4.07812 4.38277C3.35156 5.21089 3.46006 6.16444 4.07812 7.07811C4.4375 7.60936 4.46599 8.50491 3.85938 8.85154C2.98438 9.35154 2.01562 9.89998 2.01562 11C2.01562 12.5937 3.22812 13.375 4.32812 13.375L13 13V3.99998Z" fill="url(#paint1_radial_18_32303)"/>
+<path d="M13 3.99998C13 2.89998 12.2135 2.08134 11.0625 1.9375C9.875 1.78909 9.10938 2.49997 8.51562 3.57811C8.20282 4.14611 7.69531 4.34368 7.13281 4.15621C6.07292 3.80295 5.07886 3.24214 4.07812 4.38277C3.35156 5.21089 3.46006 6.16444 4.07812 7.07811C4.4375 7.60936 4.46599 8.50491 3.85938 8.85154C2.98438 9.35154 2.01562 9.89998 2.01562 11C2.01562 12.5937 3.22812 13.375 4.32812 13.375L13 13V3.99998Z" fill="url(#paint2_radial_18_32303)"/>
+<path d="M16 26C21.5228 26 26 21.5228 26 16C26 10.4772 21.5228 6 16 6C10.4772 6 6 10.4772 6 16C6 21.5228 10.4772 26 16 26Z" fill="url(#paint3_radial_18_32303)"/>
+<path d="M16 26C21.5228 26 26 21.5228 26 16C26 10.4772 21.5228 6 16 6C10.4772 6 6 10.4772 6 16C6 21.5228 10.4772 26 16 26Z" fill="url(#paint4_radial_18_32303)"/>
+<path d="M16 26C21.5228 26 26 21.5228 26 16C26 10.4772 21.5228 6 16 6C10.4772 6 6 10.4772 6 16C6 21.5228 10.4772 26 16 26Z" fill="url(#paint5_radial_18_32303)"/>
+<path d="M13.2344 13.0156C16.5007 9.6733 23.0156 8.23438 25.625 13.2695C25.3867 12.4766 24.7656 10.5391 23.0156 8.87496C19.5156 5.98433 13.8416 7.95125 10.5937 11.5937C8.46307 13.9833 5.57031 19.7031 9.61719 23.6992C10.4609 24.3555 11.8437 25.4844 14.1719 25.8281C6.98438 22.6875 10.3465 15.9707 13.2344 13.0156Z" fill="url(#paint6_linear_18_32303)"/>
+<path d="M19.1094 24.1719C15.2031 24 15.2701 20.2321 17.2812 17.9766C20.6387 14.211 24.2891 16.0156 24.2187 19.0703H25.1808C26.4349 14.6766 23.3913 12.9922 20.9375 12.9922C17.3586 12.9922 14.1562 16.1094 13.2266 19.4609C12.4375 22.6406 14.2266 26.375 19.1094 25.125V24.1719Z" fill="#C62561"/>
+<path d="M19.1094 24.1719C15.2031 24 15.2701 20.2321 17.2812 17.9766C20.6387 14.211 24.2891 16.0156 24.2187 19.0703H25.1808C26.4349 14.6766 23.3913 12.9922 20.9375 12.9922C17.3586 12.9922 14.1562 16.1094 13.2266 19.4609C12.4375 22.6406 14.2266 26.375 19.1094 25.125V24.1719Z" fill="url(#paint7_radial_18_32303)"/>
+<path d="M19 28C19 29.1 19.9 30 21 30C22.1 30 23 29.1 23 28C23 27.2 23.97 26.8 24.54 27.36L24.59 27.41C25.37 28.19 26.64 28.19 27.42 27.41C28.2 26.63 28.2 25.36 27.42 24.58L27.37 24.53C26.8 23.97 27.2 23 28 23C29.1 23 30 22.1 30 21C30 19.9 29.1 19 28 19H22.5C20.57 19 19 20.57 19 22.5V28Z" fill="url(#paint8_linear_18_32303)"/>
+<path d="M8.85156 9.00391C6.21406 11.6414 5.88281 14.8047 6.03906 16.8672C6.03906 16.8672 5.95968 12.9153 9.29687 9.57814C12.6341 6.24095 16.4219 6.01561 16.4219 6.01561C14.3125 5.89846 11.4891 6.36641 8.85156 9.00391Z" fill="#A72D36"/>
+<g filter="url(#filter0_f_18_32303)">
+<path d="M26.6641 24.0547C27.1367 24.0039 26.6094 23.2812 27.211 22.1406C26.4844 22.6484 26.1914 24.1055 26.6641 24.0547Z" fill="#E75372"/>
+</g>
+<g filter="url(#filter1_f_18_32303)">
+<path d="M27.7196 25.3724C27.9826 25.8229 27.9149 26.8411 26.9618 27.263C25.7243 27.6943 26.9514 26.1823 27.7196 25.3724Z" fill="url(#paint9_radial_18_32303)"/>
+</g>
+<g filter="url(#filter2_f_18_32303)">
+<path d="M29.5156 19.9688C29.8385 20.4434 30.125 21.5352 28.75 22.1618C27.925 22.5377 28.6927 20.9656 29.5156 19.9688Z" fill="url(#paint10_radial_18_32303)"/>
+</g>
+<defs>
+<filter id="filter0_f_18_32303" x="26.0343" y="21.7406" width="1.57663" height="2.71534" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="0.2" result="effect1_foregroundBlur_18_32303"/>
+</filter>
+<filter id="filter1_f_18_32303" x="26.1843" y="25.1224" width="1.91805" height="2.46649" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="0.125" result="effect1_foregroundBlur_18_32303"/>
+</filter>
+<filter id="filter2_f_18_32303" x="27.996" y="19.5687" width="2.18687" height="3.04994" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="0.2" result="effect1_foregroundBlur_18_32303"/>
+</filter>
+<linearGradient id="paint0_linear_18_32303" x1="2.01562" y1="7.64644" x2="13" y2="7.64644" gradientUnits="userSpaceOnUse">
+<stop stop-color="#AA1C3D"/>
+<stop offset="1" stop-color="#C31D45"/>
+</linearGradient>
+<radialGradient id="paint1_radial_18_32303" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(8 11.1875) rotate(123.69) scale(5.18298 4.96914)">
+<stop stop-color="#951731"/>
+<stop offset="1" stop-color="#9D1934" stop-opacity="0"/>
+</radialGradient>
+<radialGradient id="paint2_radial_18_32303" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(13.2187 4.40625) rotate(90) scale(5.0625 1.3908)">
+<stop stop-color="#EC516B"/>
+<stop offset="1" stop-color="#EB506C" stop-opacity="0"/>
+</radialGradient>
+<radialGradient id="paint3_radial_18_32303" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(21.8125 11.8125) rotate(161.633) scale(16.6613)">
+<stop stop-color="#FFD95A"/>
+<stop offset="0.423359" stop-color="#EEB53D"/>
+<stop offset="0.787547" stop-color="#CA8631"/>
+<stop offset="1" stop-color="#B28341"/>
+</radialGradient>
+<radialGradient id="paint4_radial_18_32303" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(15.625 26.6875) rotate(104.903) scale(8.01975 13.7205)">
+<stop stop-color="#CD7677"/>
+<stop offset="1" stop-color="#CE7A85" stop-opacity="0"/>
+</radialGradient>
+<radialGradient id="paint5_radial_18_32303" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(20.0625 22.0625) rotate(151.844) scale(5.03309 3.80247)">
+<stop stop-color="#CF771E"/>
+<stop offset="1" stop-color="#C96D2E" stop-opacity="0"/>
+</radialGradient>
+<linearGradient id="paint6_linear_18_32303" x1="24.0625" y1="9.8125" x2="9.6875" y2="23.875" gradientUnits="userSpaceOnUse">
+<stop stop-color="#F54353"/>
+<stop offset="0.485245" stop-color="#C01C47"/>
+<stop offset="1" stop-color="#C2355A"/>
+</linearGradient>
+<radialGradient id="paint7_radial_18_32303" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(21.625 12.5625) rotate(73.1132) scale(7.31544 7.34222)">
+<stop offset="0.341752" stop-color="#F25271"/>
+<stop offset="1" stop-color="#F15372" stop-opacity="0"/>
+</radialGradient>
+<linearGradient id="paint8_linear_18_32303" x1="20.3125" y1="20.3125" x2="27.5" y2="27.75" gradientUnits="userSpaceOnUse">
+<stop stop-color="#BF242E"/>
+<stop offset="1" stop-color="#CF1E51"/>
+</linearGradient>
+<radialGradient id="paint9_radial_18_32303" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(27.8524 26.1536) rotate(118.896) scale(1.8218 1.06121)">
+<stop stop-color="#ED5372"/>
+<stop offset="1" stop-color="#ED5372" stop-opacity="0"/>
+</radialGradient>
+<radialGradient id="paint10_radial_18_32303" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(29.7828 21.2031) rotate(120.115) scale(1.71599 0.933717)">
+<stop stop-color="#ED5372"/>
+<stop offset="1" stop-color="#ED5372" stop-opacity="0"/>
+</radialGradient>
+</defs>
+</svg>

packages/frontend/assets/drop-and-fusion/sweets_monos/chocolate_bar_color.svg

@@ -0,0 +1,316 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10.9844 22.625L2.875 14.4531C1.5547 13.1328 2.04687 11.8125 2.62501 11.2344L11.1875 2.71876C12.211 1.69532 13.375 1.89065 14.3125 2.82815L22.375 10.8281L10.9844 22.625Z" fill="#8A584C"/>
+<path d="M10.9844 22.625L2.875 14.4531C1.5547 13.1328 2.04687 11.8125 2.62501 11.2344L11.1875 2.71876C12.211 1.69532 13.375 1.89065 14.3125 2.82815L22.375 10.8281L10.9844 22.625Z" fill="url(#paint0_radial_18_32062)"/>
+<path d="M10.9844 22.625L2.875 14.4531C1.5547 13.1328 2.04687 11.8125 2.62501 11.2344L11.1875 2.71876C12.211 1.69532 13.375 1.89065 14.3125 2.82815L22.375 10.8281L10.9844 22.625Z" fill="url(#paint1_radial_18_32062)"/>
+<path d="M10.9844 22.625L2.875 14.4531C1.5547 13.1328 2.04687 11.8125 2.62501 11.2344L11.1875 2.71876C12.211 1.69532 13.375 1.89065 14.3125 2.82815L22.375 10.8281L10.9844 22.625Z" fill="url(#paint2_radial_18_32062)"/>
+<g filter="url(#filter0_f_18_32062)">
+<path d="M6.46309 9.72343C6.47658 9.71056 6.49039 9.6979 6.50466 9.6859C7.03753 9.23812 7.71518 9.24807 8.23887 9.69368C8.24699 9.70059 8.25463 9.70742 8.26249 9.71463C8.36319 9.80688 9.10895 10.4917 9.67969 11.0625C10.2582 11.641 10.9331 12.3785 11.0077 12.4602C11.0125 12.4654 11.0169 12.4703 11.0215 12.4756C11.4733 12.9952 11.5049 13.6871 11.0259 14.2228C11.0184 14.2312 11.0113 14.2392 11.0039 14.2477C10.9204 14.3435 10.357 14.9867 9.67969 15.664C9.02564 16.3181 8.40257 16.8978 8.2741 17.0168C8.25775 17.0319 8.24131 17.0464 8.22388 17.0602C7.64411 17.5221 7.00112 17.4542 6.48458 17C6.48373 16.9993 6.48346 16.999 6.48261 16.9983C6.45576 16.9747 5.65368 16.2708 5.04688 15.664C4.44065 15.0578 3.74501 14.2642 3.72049 14.2362C3.71971 14.2353 3.71942 14.235 3.71865 14.2341C3.25359 13.6982 3.26579 12.9793 3.70954 12.4791C3.71632 12.4715 3.72307 12.4642 3.73012 12.4568C3.82368 12.3587 4.53588 11.6125 5.08595 11.0625C5.62082 10.5276 6.33466 9.84586 6.46309 9.72343Z" fill="#824534"/>
+<path d="M6.46309 9.72343C6.47658 9.71056 6.49039 9.6979 6.50466 9.6859C7.03753 9.23812 7.71518 9.24807 8.23887 9.69368C8.24699 9.70059 8.25463 9.70742 8.26249 9.71463C8.36319 9.80688 9.10895 10.4917 9.67969 11.0625C10.2582 11.641 10.9331 12.3785 11.0077 12.4602C11.0125 12.4654 11.0169 12.4703 11.0215 12.4756C11.4733 12.9952 11.5049 13.6871 11.0259 14.2228C11.0184 14.2312 11.0113 14.2392 11.0039 14.2477C10.9204 14.3435 10.357 14.9867 9.67969 15.664C9.02564 16.3181 8.40257 16.8978 8.2741 17.0168C8.25775 17.0319 8.24131 17.0464 8.22388 17.0602C7.64411 17.5221 7.00112 17.4542 6.48458 17C6.48373 16.9993 6.48346 16.999 6.48261 16.9983C6.45576 16.9747 5.65368 16.2708 5.04688 15.664C4.44065 15.0578 3.74501 14.2642 3.72049 14.2362C3.71971 14.2353 3.71942 14.235 3.71865 14.2341C3.25359 13.6982 3.26579 12.9793 3.70954 12.4791C3.71632 12.4715 3.72307 12.4642 3.73012 12.4568C3.82368 12.3587 4.53588 11.6125 5.08595 11.0625C5.62082 10.5276 6.33466 9.84586 6.46309 9.72343Z" fill="url(#paint3_linear_18_32062)"/>
+<path d="M6.46309 9.72343C6.47658 9.71056 6.49039 9.6979 6.50466 9.6859C7.03753 9.23812 7.71518 9.24807 8.23887 9.69368C8.24699 9.70059 8.25463 9.70742 8.26249 9.71463C8.36319 9.80688 9.10895 10.4917 9.67969 11.0625C10.2582 11.641 10.9331 12.3785 11.0077 12.4602C11.0125 12.4654 11.0169 12.4703 11.0215 12.4756C11.4733 12.9952 11.5049 13.6871 11.0259 14.2228C11.0184 14.2312 11.0113 14.2392 11.0039 14.2477C10.9204 14.3435 10.357 14.9867 9.67969 15.664C9.02564 16.3181 8.40257 16.8978 8.2741 17.0168C8.25775 17.0319 8.24131 17.0464 8.22388 17.0602C7.64411 17.5221 7.00112 17.4542 6.48458 17C6.48373 16.9993 6.48346 16.999 6.48261 16.9983C6.45576 16.9747 5.65368 16.2708 5.04688 15.664C4.44065 15.0578 3.74501 14.2642 3.72049 14.2362C3.71971 14.2353 3.71942 14.235 3.71865 14.2341C3.25359 13.6982 3.26579 12.9793 3.70954 12.4791C3.71632 12.4715 3.72307 12.4642 3.73012 12.4568C3.82368 12.3587 4.53588 11.6125 5.08595 11.0625C5.62082 10.5276 6.33466 9.84586 6.46309 9.72343Z" fill="#7B3E41"/>
+</g>
+<path d="M6.77559 9.16093C6.78908 9.14806 6.80289 9.1354 6.81716 9.1234C7.35003 8.67562 8.02768 8.68557 8.55137 9.13118C8.55949 9.13809 8.56713 9.14492 8.57499 9.15213C8.67569 9.24438 9.42145 9.92923 9.99219 10.5C10.5707 11.0785 11.2456 11.816 11.3202 11.8977C11.325 11.9029 11.3294 11.9078 11.334 11.9131C11.7858 12.4327 11.8174 13.1246 11.3384 13.6603C11.3309 13.6687 11.3238 13.6767 11.3164 13.6852C11.2329 13.781 10.6695 14.4242 9.99219 15.1015C9.33814 15.7556 8.71507 16.3353 8.5866 16.4543C8.57025 16.4694 8.55381 16.4839 8.53638 16.4977C7.95661 16.9596 7.31362 16.8917 6.79708 16.4375C6.79623 16.4368 6.79596 16.4365 6.79511 16.4358C6.76826 16.4122 5.96618 15.7083 5.35938 15.1015C4.75315 14.4953 4.05751 13.7017 4.03299 13.6737C4.03221 13.6728 4.03192 13.6725 4.03115 13.6716C3.56609 13.1357 3.57829 12.4168 4.02204 11.9166C4.02882 11.909 4.03557 11.9017 4.04262 11.8943C4.13618 11.7962 4.84838 11.05 5.39845 10.5C5.93332 9.96511 6.64716 9.28336 6.77559 9.16093Z" fill="#824534"/>
+<path d="M6.77559 9.16093C6.78908 9.14806 6.80289 9.1354 6.81716 9.1234C7.35003 8.67562 8.02768 8.68557 8.55137 9.13118C8.55949 9.13809 8.56713 9.14492 8.57499 9.15213C8.67569 9.24438 9.42145 9.92923 9.99219 10.5C10.5707 11.0785 11.2456 11.816 11.3202 11.8977C11.325 11.9029 11.3294 11.9078 11.334 11.9131C11.7858 12.4327 11.8174 13.1246 11.3384 13.6603C11.3309 13.6687 11.3238 13.6767 11.3164 13.6852C11.2329 13.781 10.6695 14.4242 9.99219 15.1015C9.33814 15.7556 8.71507 16.3353 8.5866 16.4543C8.57025 16.4694 8.55381 16.4839 8.53638 16.4977C7.95661 16.9596 7.31362 16.8917 6.79708 16.4375C6.79623 16.4368 6.79596 16.4365 6.79511 16.4358C6.76826 16.4122 5.96618 15.7083 5.35938 15.1015C4.75315 14.4953 4.05751 13.7017 4.03299 13.6737C4.03221 13.6728 4.03192 13.6725 4.03115 13.6716C3.56609 13.1357 3.57829 12.4168 4.02204 11.9166C4.02882 11.909 4.03557 11.9017 4.04262 11.8943C4.13618 11.7962 4.84838 11.05 5.39845 10.5C5.93332 9.96511 6.64716 9.28336 6.77559 9.16093Z" fill="url(#paint4_linear_18_32062)"/>
+<path d="M6.77559 9.16093C6.78908 9.14806 6.80289 9.1354 6.81716 9.1234C7.35003 8.67562 8.02768 8.68557 8.55137 9.13118C8.55949 9.13809 8.56713 9.14492 8.57499 9.15213C8.67569 9.24438 9.42145 9.92923 9.99219 10.5C10.5707 11.0785 11.2456 11.816 11.3202 11.8977C11.325 11.9029 11.3294 11.9078 11.334 11.9131C11.7858 12.4327 11.8174 13.1246 11.3384 13.6603C11.3309 13.6687 11.3238 13.6767 11.3164 13.6852C11.2329 13.781 10.6695 14.4242 9.99219 15.1015C9.33814 15.7556 8.71507 16.3353 8.5866 16.4543C8.57025 16.4694 8.55381 16.4839 8.53638 16.4977C7.95661 16.9596 7.31362 16.8917 6.79708 16.4375C6.79623 16.4368 6.79596 16.4365 6.79511 16.4358C6.76826 16.4122 5.96618 15.7083 5.35938 15.1015C4.75315 14.4953 4.05751 13.7017 4.03299 13.6737C4.03221 13.6728 4.03192 13.6725 4.03115 13.6716C3.56609 13.1357 3.57829 12.4168 4.02204 11.9166C4.02882 11.909 4.03557 11.9017 4.04262 11.8943C4.13618 11.7962 4.84838 11.05 5.39845 10.5C5.93332 9.96511 6.64716 9.28336 6.77559 9.16093Z" fill="url(#paint5_linear_18_32062)"/>
+<path d="M6.77559 9.16093C6.78908 9.14806 6.80289 9.1354 6.81716 9.1234C7.35003 8.67562 8.02768 8.68557 8.55137 9.13118C8.55949 9.13809 8.56713 9.14492 8.57499 9.15213C8.67569 9.24438 9.42145 9.92923 9.99219 10.5C10.5707 11.0785 11.2456 11.816 11.3202 11.8977C11.325 11.9029 11.3294 11.9078 11.334 11.9131C11.7858 12.4327 11.8174 13.1246 11.3384 13.6603C11.3309 13.6687 11.3238 13.6767 11.3164 13.6852C11.2329 13.781 10.6695 14.4242 9.99219 15.1015C9.33814 15.7556 8.71507 16.3353 8.5866 16.4543C8.57025 16.4694 8.55381 16.4839 8.53638 16.4977C7.95661 16.9596 7.31362 16.8917 6.79708 16.4375C6.79623 16.4368 6.79596 16.4365 6.79511 16.4358C6.76826 16.4122 5.96618 15.7083 5.35938 15.1015C4.75315 14.4953 4.05751 13.7017 4.03299 13.6737C4.03221 13.6728 4.03192 13.6725 4.03115 13.6716C3.56609 13.1357 3.57829 12.4168 4.02204 11.9166C4.02882 11.909 4.03557 11.9017 4.04262 11.8943C4.13618 11.7962 4.84838 11.05 5.39845 10.5C5.93332 9.96511 6.64716 9.28336 6.77559 9.16093Z" fill="url(#paint6_linear_18_32062)"/>
+<path d="M6.77559 9.16093C6.78908 9.14806 6.80289 9.1354 6.81716 9.1234C7.35003 8.67562 8.02768 8.68557 8.55137 9.13118C8.55949 9.13809 8.56713 9.14492 8.57499 9.15213C8.67569 9.24438 9.42145 9.92923 9.99219 10.5C10.5707 11.0785 11.2456 11.816 11.3202 11.8977C11.325 11.9029 11.3294 11.9078 11.334 11.9131C11.7858 12.4327 11.8174 13.1246 11.3384 13.6603C11.3309 13.6687 11.3238 13.6767 11.3164 13.6852C11.2329 13.781 10.6695 14.4242 9.99219 15.1015C9.33814 15.7556 8.71507 16.3353 8.5866 16.4543C8.57025 16.4694 8.55381 16.4839 8.53638 16.4977C7.95661 16.9596 7.31362 16.8917 6.79708 16.4375C6.79623 16.4368 6.79596 16.4365 6.79511 16.4358C6.76826 16.4122 5.96618 15.7083 5.35938 15.1015C4.75315 14.4953 4.05751 13.7017 4.03299 13.6737C4.03221 13.6728 4.03192 13.6725 4.03115 13.6716C3.56609 13.1357 3.57829 12.4168 4.02204 11.9166C4.02882 11.909 4.03557 11.9017 4.04262 11.8943C4.13618 11.7962 4.84838 11.05 5.39845 10.5C5.93332 9.96511 6.64716 9.28336 6.77559 9.16093Z" fill="url(#paint7_linear_18_32062)"/>
+<g filter="url(#filter1_f_18_32062)">
+<path d="M4.39003 13.1845C4.2339 13.0047 4.22852 12.7406 4.38087 12.5576C4.67465 12.2047 5.19322 11.6037 5.80061 10.9963C6.40743 10.3895 7.00484 9.87436 7.35569 9.58263C7.53818 9.43089 7.80117 9.43597 7.98065 9.59126C8.38765 9.94341 9.10397 10.5727 9.55267 11.0214C9.99768 11.4664 10.6204 12.1747 10.9741 12.5834C11.1334 12.7674 11.1344 13.0384 10.9761 13.2233C10.6339 13.6226 10.0351 14.3086 9.57032 14.7734C9.1059 15.2379 8.42064 15.836 8.02119 16.1783C7.8359 16.3371 7.56387 16.3355 7.37965 16.1754C6.96194 15.8126 6.23492 15.1724 5.8183 14.7558C5.39836 14.3359 4.7513 13.6006 4.39003 13.1845Z" fill="url(#paint8_linear_18_32062)"/>
+<path d="M4.39003 13.1845C4.2339 13.0047 4.22852 12.7406 4.38087 12.5576C4.67465 12.2047 5.19322 11.6037 5.80061 10.9963C6.40743 10.3895 7.00484 9.87436 7.35569 9.58263C7.53818 9.43089 7.80117 9.43597 7.98065 9.59126C8.38765 9.94341 9.10397 10.5727 9.55267 11.0214C9.99768 11.4664 10.6204 12.1747 10.9741 12.5834C11.1334 12.7674 11.1344 13.0384 10.9761 13.2233C10.6339 13.6226 10.0351 14.3086 9.57032 14.7734C9.1059 15.2379 8.42064 15.836 8.02119 16.1783C7.8359 16.3371 7.56387 16.3355 7.37965 16.1754C6.96194 15.8126 6.23492 15.1724 5.8183 14.7558C5.39836 14.3359 4.7513 13.6006 4.39003 13.1845Z" fill="url(#paint9_linear_18_32062)"/>
+<path d="M4.39003 13.1845C4.2339 13.0047 4.22852 12.7406 4.38087 12.5576C4.67465 12.2047 5.19322 11.6037 5.80061 10.9963C6.40743 10.3895 7.00484 9.87436 7.35569 9.58263C7.53818 9.43089 7.80117 9.43597 7.98065 9.59126C8.38765 9.94341 9.10397 10.5727 9.55267 11.0214C9.99768 11.4664 10.6204 12.1747 10.9741 12.5834C11.1334 12.7674 11.1344 13.0384 10.9761 13.2233C10.6339 13.6226 10.0351 14.3086 9.57032 14.7734C9.1059 15.2379 8.42064 15.836 8.02119 16.1783C7.8359 16.3371 7.56387 16.3355 7.37965 16.1754C6.96194 15.8126 6.23492 15.1724 5.8183 14.7558C5.39836 14.3359 4.7513 13.6006 4.39003 13.1845Z" fill="url(#paint10_linear_18_32062)"/>
+</g>
+<path d="M11.9631 4.00468C11.9766 3.99181 11.9904 3.97915 12.0047 3.96715C12.5375 3.51937 13.2152 3.52932 13.7389 3.97493C13.747 3.98184 13.7546 3.98867 13.7625 3.99588C13.8632 4.08813 14.6089 4.77298 15.1797 5.34373C15.7582 5.92224 16.4331 6.6597 16.5077 6.74144C16.5125 6.74663 16.5169 6.75157 16.5215 6.75687C16.9733 7.27646 17.0049 7.96838 16.5259 8.50405C16.5184 8.51244 16.5113 8.52045 16.5039 8.52893C16.4204 8.62477 15.857 9.26797 15.1797 9.94529C14.5256 10.5993 13.9026 11.179 13.7741 11.298C13.7577 11.3132 13.7413 11.3276 13.7239 11.3415C13.1441 11.8034 12.5011 11.7354 11.9846 11.2813C11.9837 11.2805 11.9835 11.2803 11.9826 11.2795C11.9558 11.256 11.1537 10.5521 10.5469 9.94529C9.94065 9.33906 9.24501 8.54543 9.22049 8.51743C9.21971 8.51654 9.21942 8.51621 9.21865 8.51531C8.75359 7.97944 8.76579 7.26059 9.20954 6.76036C9.21632 6.75271 9.22307 6.74549 9.23012 6.73809C9.32368 6.63994 10.0359 5.89379 10.5859 5.34373C11.1208 4.80886 11.8347 4.12711 11.9631 4.00468Z" fill="#824534"/>
+<path d="M11.9631 4.00468C11.9766 3.99181 11.9904 3.97915 12.0047 3.96715C12.5375 3.51937 13.2152 3.52932 13.7389 3.97493C13.747 3.98184 13.7546 3.98867 13.7625 3.99588C13.8632 4.08813 14.6089 4.77298 15.1797 5.34373C15.7582 5.92224 16.4331 6.6597 16.5077 6.74144C16.5125 6.74663 16.5169 6.75157 16.5215 6.75687C16.9733 7.27646 17.0049 7.96838 16.5259 8.50405C16.5184 8.51244 16.5113 8.52045 16.5039 8.52893C16.4204 8.62477 15.857 9.26797 15.1797 9.94529C14.5256 10.5993 13.9026 11.179 13.7741 11.298C13.7577 11.3132 13.7413 11.3276 13.7239 11.3415C13.1441 11.8034 12.5011 11.7354 11.9846 11.2813C11.9837 11.2805 11.9835 11.2803 11.9826 11.2795C11.9558 11.256 11.1537 10.5521 10.5469 9.94529C9.94065 9.33906 9.24501 8.54543 9.22049 8.51743C9.21971 8.51654 9.21942 8.51621 9.21865 8.51531C8.75359 7.97944 8.76579 7.26059 9.20954 6.76036C9.21632 6.75271 9.22307 6.74549 9.23012 6.73809C9.32368 6.63994 10.0359 5.89379 10.5859 5.34373C11.1208 4.80886 11.8347 4.12711 11.9631 4.00468Z" fill="url(#paint11_linear_18_32062)"/>
+<path d="M11.9631 4.00468C11.9766 3.99181 11.9904 3.97915 12.0047 3.96715C12.5375 3.51937 13.2152 3.52932 13.7389 3.97493C13.747 3.98184 13.7546 3.98867 13.7625 3.99588C13.8632 4.08813 14.6089 4.77298 15.1797 5.34373C15.7582 5.92224 16.4331 6.6597 16.5077 6.74144C16.5125 6.74663 16.5169 6.75157 16.5215 6.75687C16.9733 7.27646 17.0049 7.96838 16.5259 8.50405C16.5184 8.51244 16.5113 8.52045 16.5039 8.52893C16.4204 8.62477 15.857 9.26797 15.1797 9.94529C14.5256 10.5993 13.9026 11.179 13.7741 11.298C13.7577 11.3132 13.7413 11.3276 13.7239 11.3415C13.1441 11.8034 12.5011 11.7354 11.9846 11.2813C11.9837 11.2805 11.9835 11.2803 11.9826 11.2795C11.9558 11.256 11.1537 10.5521 10.5469 9.94529C9.94065 9.33906 9.24501 8.54543 9.22049 8.51743C9.21971 8.51654 9.21942 8.51621 9.21865 8.51531C8.75359 7.97944 8.76579 7.26059 9.20954 6.76036C9.21632 6.75271 9.22307 6.74549 9.23012 6.73809C9.32368 6.63994 10.0359 5.89379 10.5859 5.34373C11.1208 4.80886 11.8347 4.12711 11.9631 4.00468Z" fill="url(#paint12_linear_18_32062)"/>
+<path d="M11.9631 4.00468C11.9766 3.99181 11.9904 3.97915 12.0047 3.96715C12.5375 3.51937 13.2152 3.52932 13.7389 3.97493C13.747 3.98184 13.7546 3.98867 13.7625 3.99588C13.8632 4.08813 14.6089 4.77298 15.1797 5.34373C15.7582 5.92224 16.4331 6.6597 16.5077 6.74144C16.5125 6.74663 16.5169 6.75157 16.5215 6.75687C16.9733 7.27646 17.0049 7.96838 16.5259 8.50405C16.5184 8.51244 16.5113 8.52045 16.5039 8.52893C16.4204 8.62477 15.857 9.26797 15.1797 9.94529C14.5256 10.5993 13.9026 11.179 13.7741 11.298C13.7577 11.3132 13.7413 11.3276 13.7239 11.3415C13.1441 11.8034 12.5011 11.7354 11.9846 11.2813C11.9837 11.2805 11.9835 11.2803 11.9826 11.2795C11.9558 11.256 11.1537 10.5521 10.5469 9.94529C9.94065 9.33906 9.24501 8.54543 9.22049 8.51743C9.21971 8.51654 9.21942 8.51621 9.21865 8.51531C8.75359 7.97944 8.76579 7.26059 9.20954 6.76036C9.21632 6.75271 9.22307 6.74549 9.23012 6.73809C9.32368 6.63994 10.0359 5.89379 10.5859 5.34373C11.1208 4.80886 11.8347 4.12711 11.9631 4.00468Z" fill="url(#paint13_linear_18_32062)"/>
+<path d="M11.9631 4.00468C11.9766 3.99181 11.9904 3.97915 12.0047 3.96715C12.5375 3.51937 13.2152 3.52932 13.7389 3.97493C13.747 3.98184 13.7546 3.98867 13.7625 3.99588C13.8632 4.08813 14.6089 4.77298 15.1797 5.34373C15.7582 5.92224 16.4331 6.6597 16.5077 6.74144C16.5125 6.74663 16.5169 6.75157 16.5215 6.75687C16.9733 7.27646 17.0049 7.96838 16.5259 8.50405C16.5184 8.51244 16.5113 8.52045 16.5039 8.52893C16.4204 8.62477 15.857 9.26797 15.1797 9.94529C14.5256 10.5993 13.9026 11.179 13.7741 11.298C13.7577 11.3132 13.7413 11.3276 13.7239 11.3415C13.1441 11.8034 12.5011 11.7354 11.9846 11.2813C11.9837 11.2805 11.9835 11.2803 11.9826 11.2795C11.9558 11.256 11.1537 10.5521 10.5469 9.94529C9.94065 9.33906 9.24501 8.54543 9.22049 8.51743C9.21971 8.51654 9.21942 8.51621 9.21865 8.51531C8.75359 7.97944 8.76579 7.26059 9.20954 6.76036C9.21632 6.75271 9.22307 6.74549 9.23012 6.73809C9.32368 6.63994 10.0359 5.89379 10.5859 5.34373C11.1208 4.80886 11.8347 4.12711 11.9631 4.00468Z" fill="url(#paint14_linear_18_32062)"/>
+<g filter="url(#filter2_f_18_32062)">
+<path d="M9.58023 8.02622C9.42436 7.84587 9.41986 7.5814 9.5728 7.39856C9.87588 7.03625 10.4173 6.41088 11.0507 5.7774C11.6836 5.1445 12.3052 4.60674 12.6654 4.30578C12.8477 4.15346 13.1111 4.15764 13.2911 4.31264C13.699 4.66392 14.4166 5.29158 14.8652 5.74017C15.3102 6.18519 15.9315 6.89491 16.2843 7.30448C16.4432 7.48892 16.4434 7.76006 16.2846 7.94456C15.9316 8.35465 15.3048 9.0702 14.8203 9.55468C14.3362 10.0388 13.6215 10.6649 13.2112 11.018C13.0263 11.1772 12.7541 11.1764 12.5695 11.0168C12.1509 10.6549 11.4224 10.0161 11.0058 9.59953C10.586 9.17972 9.94063 8.44325 9.58023 8.02622Z" fill="url(#paint15_linear_18_32062)"/>
+<path d="M9.58023 8.02622C9.42436 7.84587 9.41986 7.5814 9.5728 7.39856C9.87588 7.03625 10.4173 6.41088 11.0507 5.7774C11.6836 5.1445 12.3052 4.60674 12.6654 4.30578C12.8477 4.15346 13.1111 4.15764 13.2911 4.31264C13.699 4.66392 14.4166 5.29158 14.8652 5.74017C15.3102 6.18519 15.9315 6.89491 16.2843 7.30448C16.4432 7.48892 16.4434 7.76006 16.2846 7.94456C15.9316 8.35465 15.3048 9.0702 14.8203 9.55468C14.3362 10.0388 13.6215 10.6649 13.2112 11.018C13.0263 11.1772 12.7541 11.1764 12.5695 11.0168C12.1509 10.6549 11.4224 10.0161 11.0058 9.59953C10.586 9.17972 9.94063 8.44325 9.58023 8.02622Z" fill="url(#paint16_linear_18_32062)"/>
+<path d="M9.58023 8.02622C9.42436 7.84587 9.41986 7.5814 9.5728 7.39856C9.87588 7.03625 10.4173 6.41088 11.0507 5.7774C11.6836 5.1445 12.3052 4.60674 12.6654 4.30578C12.8477 4.15346 13.1111 4.15764 13.2911 4.31264C13.699 4.66392 14.4166 5.29158 14.8652 5.74017C15.3102 6.18519 15.9315 6.89491 16.2843 7.30448C16.4432 7.48892 16.4434 7.76006 16.2846 7.94456C15.9316 8.35465 15.3048 9.0702 14.8203 9.55468C14.3362 10.0388 13.6215 10.6649 13.2112 11.018C13.0263 11.1772 12.7541 11.1764 12.5695 11.0168C12.1509 10.6549 11.4224 10.0161 11.0058 9.59953C10.586 9.17972 9.94063 8.44325 9.58023 8.02622Z" fill="url(#paint17_linear_18_32062)"/>
+</g>
+<g filter="url(#filter3_f_18_32062)">
+<path d="M17.0902 9.92832C17.1037 9.91546 17.1175 9.90279 17.1318 9.8908C17.6646 9.44301 18.3423 9.45297 18.866 9.89858C18.8741 9.90549 18.8818 9.91232 18.8896 9.91952C18.9903 10.0118 19.7361 10.6966 20.3068 11.2674C20.8853 11.8459 21.5602 12.5833 21.6349 12.6651C21.6396 12.6703 21.644 12.6752 21.6486 12.6805C22.1004 13.2001 22.132 13.892 21.6531 14.4277C21.6456 14.4361 21.6384 14.4441 21.631 14.4526C21.5476 14.5484 20.9841 15.1916 20.3068 15.8689C19.6528 16.523 19.0297 17.1027 18.9012 17.2217C18.8849 17.2368 18.8684 17.2513 18.851 17.2651C18.2712 17.727 17.6282 17.6591 17.1117 17.2049C17.1109 17.2042 17.1106 17.2039 17.1097 17.2032C17.0829 17.1796 16.2808 16.4757 15.674 15.8689C15.0678 15.2627 14.3721 14.4691 14.3476 14.4411C14.3468 14.4402 14.3465 14.4399 14.3458 14.439C13.8807 13.9031 13.8929 13.1842 14.3367 12.684C14.3434 12.6764 14.3502 12.6691 14.3572 12.6617C14.4508 12.5636 15.163 11.8174 15.7131 11.2674C16.2479 10.7325 16.9618 10.0508 17.0902 9.92832Z" fill="#824534"/>
+<path d="M17.0902 9.92832C17.1037 9.91546 17.1175 9.90279 17.1318 9.8908C17.6646 9.44301 18.3423 9.45297 18.866 9.89858C18.8741 9.90549 18.8818 9.91232 18.8896 9.91952C18.9903 10.0118 19.7361 10.6966 20.3068 11.2674C20.8853 11.8459 21.5602 12.5833 21.6349 12.6651C21.6396 12.6703 21.644 12.6752 21.6486 12.6805C22.1004 13.2001 22.132 13.892 21.6531 14.4277C21.6456 14.4361 21.6384 14.4441 21.631 14.4526C21.5476 14.5484 20.9841 15.1916 20.3068 15.8689C19.6528 16.523 19.0297 17.1027 18.9012 17.2217C18.8849 17.2368 18.8684 17.2513 18.851 17.2651C18.2712 17.727 17.6282 17.6591 17.1117 17.2049C17.1109 17.2042 17.1106 17.2039 17.1097 17.2032C17.0829 17.1796 16.2808 16.4757 15.674 15.8689C15.0678 15.2627 14.3721 14.4691 14.3476 14.4411C14.3468 14.4402 14.3465 14.4399 14.3458 14.439C13.8807 13.9031 13.8929 13.1842 14.3367 12.684C14.3434 12.6764 14.3502 12.6691 14.3572 12.6617C14.4508 12.5636 15.163 11.8174 15.7131 11.2674C16.2479 10.7325 16.9618 10.0508 17.0902 9.92832Z" fill="url(#paint18_linear_18_32062)"/>
+<path d="M17.0902 9.92832C17.1037 9.91546 17.1175 9.90279 17.1318 9.8908C17.6646 9.44301 18.3423 9.45297 18.866 9.89858C18.8741 9.90549 18.8818 9.91232 18.8896 9.91952C18.9903 10.0118 19.7361 10.6966 20.3068 11.2674C20.8853 11.8459 21.5602 12.5833 21.6349 12.6651C21.6396 12.6703 21.644 12.6752 21.6486 12.6805C22.1004 13.2001 22.132 13.892 21.6531 14.4277C21.6456 14.4361 21.6384 14.4441 21.631 14.4526C21.5476 14.5484 20.9841 15.1916 20.3068 15.8689C19.6528 16.523 19.0297 17.1027 18.9012 17.2217C18.8849 17.2368 18.8684 17.2513 18.851 17.2651C18.2712 17.727 17.6282 17.6591 17.1117 17.2049C17.1109 17.2042 17.1106 17.2039 17.1097 17.2032C17.0829 17.1796 16.2808 16.4757 15.674 15.8689C15.0678 15.2627 14.3721 14.4691 14.3476 14.4411C14.3468 14.4402 14.3465 14.4399 14.3458 14.439C13.8807 13.9031 13.8929 13.1842 14.3367 12.684C14.3434 12.6764 14.3502 12.6691 14.3572 12.6617C14.4508 12.5636 15.163 11.8174 15.7131 11.2674C16.2479 10.7325 16.9618 10.0508 17.0902 9.92832Z" fill="url(#paint19_linear_18_32062)"/>
+<path d="M17.0902 9.92832C17.1037 9.91546 17.1175 9.90279 17.1318 9.8908C17.6646 9.44301 18.3423 9.45297 18.866 9.89858C18.8741 9.90549 18.8818 9.91232 18.8896 9.91952C18.9903 10.0118 19.7361 10.6966 20.3068 11.2674C20.8853 11.8459 21.5602 12.5833 21.6349 12.6651C21.6396 12.6703 21.644 12.6752 21.6486 12.6805C22.1004 13.2001 22.132 13.892 21.6531 14.4277C21.6456 14.4361 21.6384 14.4441 21.631 14.4526C21.5476 14.5484 20.9841 15.1916 20.3068 15.8689C19.6528 16.523 19.0297 17.1027 18.9012 17.2217C18.8849 17.2368 18.8684 17.2513 18.851 17.2651C18.2712 17.727 17.6282 17.6591 17.1117 17.2049C17.1109 17.2042 17.1106 17.2039 17.1097 17.2032C17.0829 17.1796 16.2808 16.4757 15.674 15.8689C15.0678 15.2627 14.3721 14.4691 14.3476 14.4411C14.3468 14.4402 14.3465 14.4399 14.3458 14.439C13.8807 13.9031 13.8929 13.1842 14.3367 12.684C14.3434 12.6764 14.3502 12.6691 14.3572 12.6617C14.4508 12.5636 15.163 11.8174 15.7131 11.2674C16.2479 10.7325 16.9618 10.0508 17.0902 9.92832Z" fill="url(#paint20_linear_18_32062)"/>
+<path d="M17.0902 9.92832C17.1037 9.91546 17.1175 9.90279 17.1318 9.8908C17.6646 9.44301 18.3423 9.45297 18.866 9.89858C18.8741 9.90549 18.8818 9.91232 18.8896 9.91952C18.9903 10.0118 19.7361 10.6966 20.3068 11.2674C20.8853 11.8459 21.5602 12.5833 21.6349 12.6651C21.6396 12.6703 21.644 12.6752 21.6486 12.6805C22.1004 13.2001 22.132 13.892 21.6531 14.4277C21.6456 14.4361 21.6384 14.4441 21.631 14.4526C21.5476 14.5484 20.9841 15.1916 20.3068 15.8689C19.6528 16.523 19.0297 17.1027 18.9012 17.2217C18.8849 17.2368 18.8684 17.2513 18.851 17.2651C18.2712 17.727 17.6282 17.6591 17.1117 17.2049C17.1109 17.2042 17.1106 17.2039 17.1097 17.2032C17.0829 17.1796 16.2808 16.4757 15.674 15.8689C15.0678 15.2627 14.3721 14.4691 14.3476 14.4411C14.3468 14.4402 14.3465 14.4399 14.3458 14.439C13.8807 13.9031 13.8929 13.1842 14.3367 12.684C14.3434 12.6764 14.3502 12.6691 14.3572 12.6617C14.4508 12.5636 15.163 11.8174 15.7131 11.2674C16.2479 10.7325 16.9618 10.0508 17.0902 9.92832Z" fill="#613534"/>
+</g>
+<path d="M17.4943 9.47343C17.5078 9.46056 17.5216 9.4479 17.5359 9.4359C18.0688 8.98812 18.7464 8.99807 19.2701 9.44368C19.2782 9.45059 19.2859 9.45742 19.2937 9.46463C19.3944 9.55688 20.1402 10.2417 20.7109 10.8125C21.2895 11.391 21.9643 12.1285 22.039 12.2102C22.0437 12.2154 22.0482 12.2203 22.0528 12.2256C22.5046 12.7452 22.5361 13.4371 22.0572 13.9728C22.0497 13.9812 22.0425 13.9892 22.0351 13.9977C21.9517 14.0935 21.3883 14.7367 20.7109 15.414C20.0569 16.0681 19.4338 16.6478 19.3053 16.7668C19.289 16.7819 19.2726 16.7964 19.2551 16.8102C18.6754 17.2721 18.0324 17.2042 17.5158 16.75C17.515 16.7493 17.5147 16.749 17.5139 16.7483C17.487 16.7247 16.6849 16.0208 16.0781 15.414C15.4719 14.8078 14.7763 14.0142 14.7517 13.9862C14.751 13.9853 14.7507 13.985 14.7499 13.9841C14.2848 13.4482 14.297 12.7293 14.7408 12.2291C14.7476 12.2215 14.7543 12.2142 14.7614 12.2068C14.8549 12.1087 15.5671 11.3625 16.1172 10.8125C16.6521 10.2776 17.3659 9.59586 17.4943 9.47343Z" fill="#824534"/>
+<path d="M17.4943 9.47343C17.5078 9.46056 17.5216 9.4479 17.5359 9.4359C18.0688 8.98812 18.7464 8.99807 19.2701 9.44368C19.2782 9.45059 19.2859 9.45742 19.2937 9.46463C19.3944 9.55688 20.1402 10.2417 20.7109 10.8125C21.2895 11.391 21.9643 12.1285 22.039 12.2102C22.0437 12.2154 22.0482 12.2203 22.0528 12.2256C22.5046 12.7452 22.5361 13.4371 22.0572 13.9728C22.0497 13.9812 22.0425 13.9892 22.0351 13.9977C21.9517 14.0935 21.3883 14.7367 20.7109 15.414C20.0569 16.0681 19.4338 16.6478 19.3053 16.7668C19.289 16.7819 19.2726 16.7964 19.2551 16.8102C18.6754 17.2721 18.0324 17.2042 17.5158 16.75C17.515 16.7493 17.5147 16.749 17.5139 16.7483C17.487 16.7247 16.6849 16.0208 16.0781 15.414C15.4719 14.8078 14.7763 14.0142 14.7517 13.9862C14.751 13.9853 14.7507 13.985 14.7499 13.9841C14.2848 13.4482 14.297 12.7293 14.7408 12.2291C14.7476 12.2215 14.7543 12.2142 14.7614 12.2068C14.8549 12.1087 15.5671 11.3625 16.1172 10.8125C16.6521 10.2776 17.3659 9.59586 17.4943 9.47343Z" fill="url(#paint21_linear_18_32062)"/>
+<path d="M17.4943 9.47343C17.5078 9.46056 17.5216 9.4479 17.5359 9.4359C18.0688 8.98812 18.7464 8.99807 19.2701 9.44368C19.2782 9.45059 19.2859 9.45742 19.2937 9.46463C19.3944 9.55688 20.1402 10.2417 20.7109 10.8125C21.2895 11.391 21.9643 12.1285 22.039 12.2102C22.0437 12.2154 22.0482 12.2203 22.0528 12.2256C22.5046 12.7452 22.5361 13.4371 22.0572 13.9728C22.0497 13.9812 22.0425 13.9892 22.0351 13.9977C21.9517 14.0935 21.3883 14.7367 20.7109 15.414C20.0569 16.0681 19.4338 16.6478 19.3053 16.7668C19.289 16.7819 19.2726 16.7964 19.2551 16.8102C18.6754 17.2721 18.0324 17.2042 17.5158 16.75C17.515 16.7493 17.5147 16.749 17.5139 16.7483C17.487 16.7247 16.6849 16.0208 16.0781 15.414C15.4719 14.8078 14.7763 14.0142 14.7517 13.9862C14.751 13.9853 14.7507 13.985 14.7499 13.9841C14.2848 13.4482 14.297 12.7293 14.7408 12.2291C14.7476 12.2215 14.7543 12.2142 14.7614 12.2068C14.8549 12.1087 15.5671 11.3625 16.1172 10.8125C16.6521 10.2776 17.3659 9.59586 17.4943 9.47343Z" fill="url(#paint22_linear_18_32062)"/>
+<path d="M17.4943 9.47343C17.5078 9.46056 17.5216 9.4479 17.5359 9.4359C18.0688 8.98812 18.7464 8.99807 19.2701 9.44368C19.2782 9.45059 19.2859 9.45742 19.2937 9.46463C19.3944 9.55688 20.1402 10.2417 20.7109 10.8125C21.2895 11.391 21.9643 12.1285 22.039 12.2102C22.0437 12.2154 22.0482 12.2203 22.0528 12.2256C22.5046 12.7452 22.5361 13.4371 22.0572 13.9728C22.0497 13.9812 22.0425 13.9892 22.0351 13.9977C21.9517 14.0935 21.3883 14.7367 20.7109 15.414C20.0569 16.0681 19.4338 16.6478 19.3053 16.7668C19.289 16.7819 19.2726 16.7964 19.2551 16.8102C18.6754 17.2721 18.0324 17.2042 17.5158 16.75C17.515 16.7493 17.5147 16.749 17.5139 16.7483C17.487 16.7247 16.6849 16.0208 16.0781 15.414C15.4719 14.8078 14.7763 14.0142 14.7517 13.9862C14.751 13.9853 14.7507 13.985 14.7499 13.9841C14.2848 13.4482 14.297 12.7293 14.7408 12.2291C14.7476 12.2215 14.7543 12.2142 14.7614 12.2068C14.8549 12.1087 15.5671 11.3625 16.1172 10.8125C16.6521 10.2776 17.3659 9.59586 17.4943 9.47343Z" fill="url(#paint23_linear_18_32062)"/>
+<path d="M17.4943 9.47343C17.5078 9.46056 17.5216 9.4479 17.5359 9.4359C18.0688 8.98812 18.7464 8.99807 19.2701 9.44368C19.2782 9.45059 19.2859 9.45742 19.2937 9.46463C19.3944 9.55688 20.1402 10.2417 20.7109 10.8125C21.2895 11.391 21.9643 12.1285 22.039 12.2102C22.0437 12.2154 22.0482 12.2203 22.0528 12.2256C22.5046 12.7452 22.5361 13.4371 22.0572 13.9728C22.0497 13.9812 22.0425 13.9892 22.0351 13.9977C21.9517 14.0935 21.3883 14.7367 20.7109 15.414C20.0569 16.0681 19.4338 16.6478 19.3053 16.7668C19.289 16.7819 19.2726 16.7964 19.2551 16.8102C18.6754 17.2721 18.0324 17.2042 17.5158 16.75C17.515 16.7493 17.5147 16.749 17.5139 16.7483C17.487 16.7247 16.6849 16.0208 16.0781 15.414C15.4719 14.8078 14.7763 14.0142 14.7517 13.9862C14.751 13.9853 14.7507 13.985 14.7499 13.9841C14.2848 13.4482 14.297 12.7293 14.7408 12.2291C14.7476 12.2215 14.7543 12.2142 14.7614 12.2068C14.8549 12.1087 15.5671 11.3625 16.1172 10.8125C16.6521 10.2776 17.3659 9.59586 17.4943 9.47343Z" fill="url(#paint24_linear_18_32062)"/>
+<g filter="url(#filter4_f_18_32062)">
+<path d="M15.1088 13.497C14.9527 13.3172 14.9473 13.0531 15.0996 12.8701C15.3934 12.5172 15.912 11.9162 16.5194 11.3088C17.1262 10.702 17.7236 10.1869 18.0744 9.89513C18.2569 9.74339 18.5199 9.74847 18.6994 9.90376C19.1064 10.2559 19.8227 10.8852 20.2714 11.3339C20.7164 11.7789 21.3391 12.4872 21.6929 12.8959C21.8522 13.0799 21.8532 13.3509 21.6948 13.5358C21.3526 13.9351 20.7539 14.6211 20.2891 15.0859C19.8246 15.5504 19.1394 16.1485 18.7399 16.4908C18.5546 16.6496 18.2826 16.648 18.0984 16.4879C17.6807 16.1251 16.9537 15.4849 16.537 15.0683C16.1171 14.6484 15.4701 13.9131 15.1088 13.497Z" fill="url(#paint25_linear_18_32062)"/>
+<path d="M15.1088 13.497C14.9527 13.3172 14.9473 13.0531 15.0996 12.8701C15.3934 12.5172 15.912 11.9162 16.5194 11.3088C17.1262 10.702 17.7236 10.1869 18.0744 9.89513C18.2569 9.74339 18.5199 9.74847 18.6994 9.90376C19.1064 10.2559 19.8227 10.8852 20.2714 11.3339C20.7164 11.7789 21.3391 12.4872 21.6929 12.8959C21.8522 13.0799 21.8532 13.3509 21.6948 13.5358C21.3526 13.9351 20.7539 14.6211 20.2891 15.0859C19.8246 15.5504 19.1394 16.1485 18.7399 16.4908C18.5546 16.6496 18.2826 16.648 18.0984 16.4879C17.6807 16.1251 16.9537 15.4849 16.537 15.0683C16.1171 14.6484 15.4701 13.9131 15.1088 13.497Z" fill="url(#paint26_linear_18_32062)"/>
+<path d="M15.1088 13.497C14.9527 13.3172 14.9473 13.0531 15.0996 12.8701C15.3934 12.5172 15.912 11.9162 16.5194 11.3088C17.1262 10.702 17.7236 10.1869 18.0744 9.89513C18.2569 9.74339 18.5199 9.74847 18.6994 9.90376C19.1064 10.2559 19.8227 10.8852 20.2714 11.3339C20.7164 11.7789 21.3391 12.4872 21.6929 12.8959C21.8522 13.0799 21.8532 13.3509 21.6948 13.5358C21.3526 13.9351 20.7539 14.6211 20.2891 15.0859C19.8246 15.5504 19.1394 16.1485 18.7399 16.4908C18.5546 16.6496 18.2826 16.648 18.0984 16.4879C17.6807 16.1251 16.9537 15.4849 16.537 15.0683C16.1171 14.6484 15.4701 13.9131 15.1088 13.497Z" fill="url(#paint27_linear_18_32062)"/>
+</g>
+<g filter="url(#filter5_f_18_32062)">
+<path d="M11.9631 15.1578C11.9766 15.1449 11.9904 15.1322 12.0047 15.1202C12.5375 14.6724 13.2152 14.6824 13.7389 15.128C13.747 15.1349 13.7546 15.1418 13.7625 15.149C13.8632 15.2412 14.6089 15.9261 15.1797 16.4968C15.7582 17.0753 16.4331 17.8128 16.5077 17.8945C16.5125 17.8997 16.5169 17.9046 16.5215 17.91C16.9733 18.4295 17.0049 19.1215 16.5259 19.6571C16.5184 19.6655 16.5113 19.6735 16.5039 19.682C16.4204 19.7779 15.857 20.421 15.1797 21.0984C14.5256 21.7524 13.9026 22.3321 13.7741 22.4511C13.7577 22.4662 13.7413 22.4807 13.7239 22.4946C13.1441 22.9565 12.5011 22.8885 11.9846 22.4344C11.9837 22.4336 11.9835 22.4334 11.9826 22.4326C11.9558 22.4091 11.1537 21.7052 10.5469 21.0984C9.94065 20.4921 9.24501 19.6985 9.22049 19.6705C9.21971 19.6696 9.21942 19.6693 9.21865 19.6684C8.75359 19.1325 8.76579 18.4137 9.20954 17.9134C9.21632 17.9058 9.22307 17.8986 9.23012 17.8912C9.32368 17.793 10.0359 17.0469 10.5859 16.4968C11.1208 15.9619 11.8347 15.2802 11.9631 15.1578Z" fill="url(#paint28_linear_18_32062)"/>
+</g>
+<path d="M12.3225 14.6766C12.336 14.6637 12.3498 14.651 12.364 14.639C12.8969 14.1912 13.5746 14.2012 14.0982 14.6468C14.1064 14.6537 14.114 14.6605 14.1219 14.6678C14.2226 14.76 14.9683 15.4449 15.5391 16.0156C16.1176 16.5941 16.7925 17.3316 16.8671 17.4133C16.8719 17.4185 16.8763 17.4234 16.8809 17.4287C17.3327 17.9483 17.3642 18.6403 16.8853 19.1759C16.8778 19.1843 16.8707 19.1923 16.8633 19.2008C16.7798 19.2966 16.2164 19.9398 15.5391 20.6172C14.885 21.2712 14.2619 21.8509 14.1335 21.9699C14.1171 21.985 14.1007 21.9995 14.0833 22.0134C13.5035 22.4753 12.8605 22.4073 12.344 21.9531C12.3431 21.9524 12.3428 21.9522 12.342 21.9514C12.3151 21.9279 11.5131 21.224 10.9063 20.6172C10.3 20.0109 9.60438 19.2173 9.57986 19.1893C9.57908 19.1884 9.5788 19.1881 9.57802 19.1872C9.11297 18.6513 9.12517 17.9325 9.56892 17.4322C9.5757 17.4246 9.58244 17.4174 9.58949 17.41C9.68306 17.3118 10.3953 16.5657 10.9453 16.0156C11.4802 15.4807 12.194 14.799 12.3225 14.6766Z" fill="#824534"/>
+<path d="M12.3225 14.6766C12.336 14.6637 12.3498 14.651 12.364 14.639C12.8969 14.1912 13.5746 14.2012 14.0982 14.6468C14.1064 14.6537 14.114 14.6605 14.1219 14.6678C14.2226 14.76 14.9683 15.4449 15.5391 16.0156C16.1176 16.5941 16.7925 17.3316 16.8671 17.4133C16.8719 17.4185 16.8763 17.4234 16.8809 17.4287C17.3327 17.9483 17.3642 18.6403 16.8853 19.1759C16.8778 19.1843 16.8707 19.1923 16.8633 19.2008C16.7798 19.2966 16.2164 19.9398 15.5391 20.6172C14.885 21.2712 14.2619 21.8509 14.1335 21.9699C14.1171 21.985 14.1007 21.9995 14.0833 22.0134C13.5035 22.4753 12.8605 22.4073 12.344 21.9531C12.3431 21.9524 12.3428 21.9522 12.342 21.9514C12.3151 21.9279 11.5131 21.224 10.9063 20.6172C10.3 20.0109 9.60438 19.2173 9.57986 19.1893C9.57908 19.1884 9.5788 19.1881 9.57802 19.1872C9.11297 18.6513 9.12517 17.9325 9.56892 17.4322C9.5757 17.4246 9.58244 17.4174 9.58949 17.41C9.68306 17.3118 10.3953 16.5657 10.9453 16.0156C11.4802 15.4807 12.194 14.799 12.3225 14.6766Z" fill="url(#paint29_linear_18_32062)"/>
+<path d="M12.3225 14.6766C12.336 14.6637 12.3498 14.651 12.364 14.639C12.8969 14.1912 13.5746 14.2012 14.0982 14.6468C14.1064 14.6537 14.114 14.6605 14.1219 14.6678C14.2226 14.76 14.9683 15.4449 15.5391 16.0156C16.1176 16.5941 16.7925 17.3316 16.8671 17.4133C16.8719 17.4185 16.8763 17.4234 16.8809 17.4287C17.3327 17.9483 17.3642 18.6403 16.8853 19.1759C16.8778 19.1843 16.8707 19.1923 16.8633 19.2008C16.7798 19.2966 16.2164 19.9398 15.5391 20.6172C14.885 21.2712 14.2619 21.8509 14.1335 21.9699C14.1171 21.985 14.1007 21.9995 14.0833 22.0134C13.5035 22.4753 12.8605 22.4073 12.344 21.9531C12.3431 21.9524 12.3428 21.9522 12.342 21.9514C12.3151 21.9279 11.5131 21.224 10.9063 20.6172C10.3 20.0109 9.60438 19.2173 9.57986 19.1893C9.57908 19.1884 9.5788 19.1881 9.57802 19.1872C9.11297 18.6513 9.12517 17.9325 9.56892 17.4322C9.5757 17.4246 9.58244 17.4174 9.58949 17.41C9.68306 17.3118 10.3953 16.5657 10.9453 16.0156C11.4802 15.4807 12.194 14.799 12.3225 14.6766Z" fill="url(#paint30_linear_18_32062)"/>
+<path d="M12.3225 14.6766C12.336 14.6637 12.3498 14.651 12.364 14.639C12.8969 14.1912 13.5746 14.2012 14.0982 14.6468C14.1064 14.6537 14.114 14.6605 14.1219 14.6678C14.2226 14.76 14.9683 15.4449 15.5391 16.0156C16.1176 16.5941 16.7925 17.3316 16.8671 17.4133C16.8719 17.4185 16.8763 17.4234 16.8809 17.4287C17.3327 17.9483 17.3642 18.6403 16.8853 19.1759C16.8778 19.1843 16.8707 19.1923 16.8633 19.2008C16.7798 19.2966 16.2164 19.9398 15.5391 20.6172C14.885 21.2712 14.2619 21.8509 14.1335 21.9699C14.1171 21.985 14.1007 21.9995 14.0833 22.0134C13.5035 22.4753 12.8605 22.4073 12.344 21.9531C12.3431 21.9524 12.3428 21.9522 12.342 21.9514C12.3151 21.9279 11.5131 21.224 10.9063 20.6172C10.3 20.0109 9.60438 19.2173 9.57986 19.1893C9.57908 19.1884 9.5788 19.1881 9.57802 19.1872C9.11297 18.6513 9.12517 17.9325 9.56892 17.4322C9.5757 17.4246 9.58244 17.4174 9.58949 17.41C9.68306 17.3118 10.3953 16.5657 10.9453 16.0156C11.4802 15.4807 12.194 14.799 12.3225 14.6766Z" fill="url(#paint31_linear_18_32062)"/>
+<path d="M12.3225 14.6766C12.336 14.6637 12.3498 14.651 12.364 14.639C12.8969 14.1912 13.5746 14.2012 14.0982 14.6468C14.1064 14.6537 14.114 14.6605 14.1219 14.6678C14.2226 14.76 14.9683 15.4449 15.5391 16.0156C16.1176 16.5941 16.7925 17.3316 16.8671 17.4133C16.8719 17.4185 16.8763 17.4234 16.8809 17.4287C17.3327 17.9483 17.3642 18.6403 16.8853 19.1759C16.8778 19.1843 16.8707 19.1923 16.8633 19.2008C16.7798 19.2966 16.2164 19.9398 15.5391 20.6172C14.885 21.2712 14.2619 21.8509 14.1335 21.9699C14.1171 21.985 14.1007 21.9995 14.0833 22.0134C13.5035 22.4753 12.8605 22.4073 12.344 21.9531C12.3431 21.9524 12.3428 21.9522 12.342 21.9514C12.3151 21.9279 11.5131 21.224 10.9063 20.6172C10.3 20.0109 9.60438 19.2173 9.57986 19.1893C9.57908 19.1884 9.5788 19.1881 9.57802 19.1872C9.11297 18.6513 9.12517 17.9325 9.56892 17.4322C9.5757 17.4246 9.58244 17.4174 9.58949 17.41C9.68306 17.3118 10.3953 16.5657 10.9453 16.0156C11.4802 15.4807 12.194 14.799 12.3225 14.6766Z" fill="url(#paint32_linear_18_32062)"/>
+<g filter="url(#filter6_f_18_32062)">
+<path d="M9.93691 18.7001C9.78078 18.5203 9.77539 18.2563 9.92775 18.0732C10.2215 17.7203 10.7401 17.1193 11.3475 16.5119C11.9543 15.9051 12.5517 15.39 12.9026 15.0983C13.0851 14.9465 13.348 14.9516 13.5275 15.1069C13.9345 15.459 14.6508 16.0883 15.0995 16.537C15.5446 16.9821 16.1672 17.6903 16.521 18.099C16.6803 18.283 16.6813 18.5541 16.5229 18.7389C16.1808 19.1382 15.582 19.8242 15.1172 20.2891C14.6528 20.7535 13.9675 21.3516 13.5681 21.6939C13.3828 21.8527 13.1107 21.8511 12.9265 21.6911C12.5088 21.3282 11.7818 20.688 11.3652 20.2714C10.9452 19.8515 10.2982 19.1162 9.93691 18.7001Z" fill="url(#paint33_linear_18_32062)"/>
+<path d="M9.93691 18.7001C9.78078 18.5203 9.77539 18.2563 9.92775 18.0732C10.2215 17.7203 10.7401 17.1193 11.3475 16.5119C11.9543 15.9051 12.5517 15.39 12.9026 15.0983C13.0851 14.9465 13.348 14.9516 13.5275 15.1069C13.9345 15.459 14.6508 16.0883 15.0995 16.537C15.5446 16.9821 16.1672 17.6903 16.521 18.099C16.6803 18.283 16.6813 18.5541 16.5229 18.7389C16.1808 19.1382 15.582 19.8242 15.1172 20.2891C14.6528 20.7535 13.9675 21.3516 13.5681 21.6939C13.3828 21.8527 13.1107 21.8511 12.9265 21.6911C12.5088 21.3282 11.7818 20.688 11.3652 20.2714C10.9452 19.8515 10.2982 19.1162 9.93691 18.7001Z" fill="url(#paint34_linear_18_32062)"/>
+<path d="M9.93691 18.7001C9.78078 18.5203 9.77539 18.2563 9.92775 18.0732C10.2215 17.7203 10.7401 17.1193 11.3475 16.5119C11.9543 15.9051 12.5517 15.39 12.9026 15.0983C13.0851 14.9465 13.348 14.9516 13.5275 15.1069C13.9345 15.459 14.6508 16.0883 15.0995 16.537C15.5446 16.9821 16.1672 17.6903 16.521 18.099C16.6803 18.283 16.6813 18.5541 16.5229 18.7389C16.1808 19.1382 15.582 19.8242 15.1172 20.2891C14.6528 20.7535 13.9675 21.3516 13.5681 21.6939C13.3828 21.8527 13.1107 21.8511 12.9265 21.6911C12.5088 21.3282 11.7818 20.688 11.3652 20.2714C10.9452 19.8515 10.2982 19.1162 9.93691 18.7001Z" fill="url(#paint35_linear_18_32062)"/>
+</g>
+<path d="M10.2578 21.7831C10.2578 21.7831 16.5546 28.3456 17.664 29.33C18.7734 30.3144 19.9921 30.1269 20.9453 29.33C21.8984 28.5331 28.3203 22.0956 29.3359 21.0331C30.3515 19.9706 30.0703 18.5488 29.1796 17.6581C28.289 16.7675 21.7109 10.2519 21.7109 10.2519L10.2578 21.7831Z" fill="url(#paint36_linear_18_32062)"/>
+<path d="M10.2578 21.7831C10.2578 21.7831 16.5546 28.3456 17.664 29.33C18.7734 30.3144 19.9921 30.1269 20.9453 29.33C21.8984 28.5331 28.3203 22.0956 29.3359 21.0331C30.3515 19.9706 30.0703 18.5488 29.1796 17.6581C28.289 16.7675 21.7109 10.2519 21.7109 10.2519L10.2578 21.7831Z" fill="url(#paint37_linear_18_32062)"/>
+<g filter="url(#filter7_f_18_32062)">
+<path d="M12.1329 21.5234C12.1329 21.5234 16.8586 26.498 17.8978 27.4201C18.937 28.3421 19.376 28.869 20.2688 28.1226C21.1616 27.3762 27.1771 21.3461 28.1284 20.3508C29.0798 19.3556 28.6577 18.7408 27.8235 17.9066C26.9892 17.0723 22 12.1416 22 12.1416L12.1329 21.5234Z" fill="#D3245A"/>
+<path d="M12.1329 21.5234C12.1329 21.5234 16.8586 26.498 17.8978 27.4201C18.937 28.3421 19.376 28.869 20.2688 28.1226C21.1616 27.3762 27.1771 21.3461 28.1284 20.3508C29.0798 19.3556 28.6577 18.7408 27.8235 17.9066C26.9892 17.0723 22 12.1416 22 12.1416L12.1329 21.5234Z" fill="url(#paint38_linear_18_32062)"/>
+<path d="M12.1329 21.5234C12.1329 21.5234 16.8586 26.498 17.8978 27.4201C18.937 28.3421 19.376 28.869 20.2688 28.1226C21.1616 27.3762 27.1771 21.3461 28.1284 20.3508C29.0798 19.3556 28.6577 18.7408 27.8235 17.9066C26.9892 17.0723 22 12.1416 22 12.1416L12.1329 21.5234Z" fill="url(#paint39_linear_18_32062)"/>
+</g>
+<g filter="url(#filter8_f_18_32062)">
+<path d="M22.4907 12.0862C22.4907 12.0862 14.132 23.4293 13.8188 23.7425C13.5057 24.0557 13.2494 24.1126 12.8223 23.8422C12.3952 23.5717 11.0855 22.0342 10.872 21.7922C10.6584 21.5501 10.6653 21.2495 10.9466 20.987C11.2279 20.7244 21.1525 10.8406 21.1525 10.8406C21.3127 10.6804 21.6015 10.7222 21.7291 10.8406C21.7291 10.8406 22.3128 11.3388 22.4907 11.5168C22.6687 11.6948 22.5818 11.9587 22.4907 12.0862Z" fill="#572916"/>
+</g>
+<path d="M23.2266 11.5469C23.2266 11.5469 13.7188 24.4531 13.375 24.7969C13.0312 25.1406 12.75 25.2031 12.2812 24.9063C11.8125 24.6094 10.375 22.9219 10.1406 22.6563C9.90625 22.3906 9.91374 22.0606 10.2225 21.7725C10.5312 21.4844 21.7578 10.1797 21.7578 10.1797C21.9336 10.0039 22.2506 10.0497 22.3906 10.1797C22.3906 10.1797 23.0312 10.7266 23.2266 10.9219C23.4219 11.1172 23.3266 11.4069 23.2266 11.5469Z" fill="url(#paint40_linear_18_32062)"/>
+<g filter="url(#filter9_f_18_32062)">
+<path d="M22.875 11.2812C22.875 10.8281 22.375 10.3438 21.9219 10.5C21.4688 10.6562 16.5 16.2812 16.5 16.2812L18.0781 17.5468C19.6615 15.651 22.875 11.7422 22.875 11.2812Z" fill="url(#paint41_linear_18_32062)"/>
+</g>
+<defs>
+<filter id="filter0_f_18_32062" x="2.37329" y="8.35474" width="9.99959" height="10.0206" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="0.5" result="effect1_foregroundBlur_18_32062"/>
+</filter>
+<filter id="filter1_f_18_32062" x="4.0197" y="9.22174" width="7.32452" height="7.32471" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="0.125" result="effect1_foregroundBlur_18_32062"/>
+</filter>
+<filter id="filter2_f_18_32062" x="9.21066" y="3.94391" width="7.44289" height="7.44305" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="0.125" result="effect1_foregroundBlur_18_32062"/>
+</filter>
+<filter id="filter3_f_18_32062" x="13.0004" y="8.55963" width="9.99959" height="10.0206" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="0.5" result="effect1_foregroundBlur_18_32062"/>
+</filter>
+<filter id="filter4_f_18_32062" x="14.7384" y="9.53424" width="7.32452" height="7.32471" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="0.125" result="effect1_foregroundBlur_18_32062"/>
+</filter>
+<filter id="filter5_f_18_32062" x="7.87329" y="13.7891" width="9.99959" height="10.0206" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="0.5" result="effect1_foregroundBlur_18_32062"/>
+</filter>
+<filter id="filter6_f_18_32062" x="9.56657" y="14.7374" width="7.32452" height="7.32471" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="0.125" result="effect1_foregroundBlur_18_32062"/>
+</filter>
+<filter id="filter7_f_18_32062" x="11.1329" y="11.1417" width="18.5395" height="18.3354" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="0.5" result="effect1_foregroundBlur_18_32062"/>
+</filter>
+<filter id="filter8_f_18_32062" x="9.72244" y="9.73553" width="13.8717" height="15.2796" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="0.5" result="effect1_foregroundBlur_18_32062"/>
+</filter>
+<filter id="filter9_f_18_32062" x="16" y="9.97003" width="7.375" height="8.07678" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="0.25" result="effect1_foregroundBlur_18_32062"/>
+</filter>
+<radialGradient id="paint0_radial_18_32062" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(6.375 5.875) rotate(135) scale(12.3302 6.13734)">
+<stop stop-color="#735040"/>
+<stop offset="1" stop-color="#724A3A" stop-opacity="0"/>
+</radialGradient>
+<radialGradient id="paint1_radial_18_32062" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(4.03125 18.9062) rotate(45) scale(11.5596 8.97142)">
+<stop stop-color="#834D4F"/>
+<stop offset="1" stop-color="#834B4D" stop-opacity="0"/>
+</radialGradient>
+<radialGradient id="paint2_radial_18_32062" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(17.5 6.6875) rotate(45) scale(10.1647 3.13779)">
+<stop stop-color="#AC7A64"/>
+<stop offset="1" stop-color="#AC7A63" stop-opacity="0"/>
+</radialGradient>
+<linearGradient id="paint3_linear_18_32062" x1="6.59375" y1="14.8125" x2="5.3125" y2="16.0937" gradientUnits="userSpaceOnUse">
+<stop stop-color="#835355" stop-opacity="0"/>
+<stop offset="0.542683" stop-color="#825254"/>
+</linearGradient>
+<linearGradient id="paint4_linear_18_32062" x1="6.90625" y1="14.25" x2="5.625" y2="15.5312" gradientUnits="userSpaceOnUse">
+<stop stop-color="#835355" stop-opacity="0"/>
+<stop offset="0.542683" stop-color="#825254"/>
+</linearGradient>
+<linearGradient id="paint5_linear_18_32062" x1="9.55469" y1="11.6016" x2="10.375" y2="10.7813" gradientUnits="userSpaceOnUse">
+<stop stop-color="#91634B" stop-opacity="0"/>
+<stop offset="0.257143" stop-color="#8E5E45"/>
+<stop offset="0.971429" stop-color="#79452B"/>
+</linearGradient>
+<linearGradient id="paint6_linear_18_32062" x1="5.3125" y1="10.5625" x2="6.25781" y2="11.5078" gradientUnits="userSpaceOnUse">
+<stop stop-color="#754A38"/>
+<stop offset="0.198347" stop-color="#764B38"/>
+<stop offset="1" stop-color="#8A5648" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint7_linear_18_32062" x1="10.4375" y1="15.0313" x2="9.54687" y2="14.1406" gradientUnits="userSpaceOnUse">
+<stop offset="0.192983" stop-color="#7F4131"/>
+<stop offset="0.508772" stop-color="#884B3F"/>
+<stop offset="1" stop-color="#905452" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint8_linear_18_32062" x1="4.71562" y1="13.599" x2="10.6952" y2="13.5756" gradientUnits="userSpaceOnUse">
+<stop stop-color="#865345"/>
+<stop offset="1" stop-color="#945C4E"/>
+</linearGradient>
+<linearGradient id="paint9_linear_18_32062" x1="5.9333" y1="14.7546" x2="9.4925" y2="11.2617" gradientUnits="userSpaceOnUse">
+<stop offset="0.0276698" stop-color="#7F4A40"/>
+<stop offset="0.183829" stop-color="#844A45" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint10_linear_18_32062" x1="9.61" y1="11.1453" x2="6.4587" y2="14.2966" gradientUnits="userSpaceOnUse">
+<stop offset="0.0194806" stop-color="#9B705C"/>
+<stop offset="0.204546" stop-color="#9B705C" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint11_linear_18_32062" x1="12.0937" y1="9.09375" x2="10.8125" y2="10.375" gradientUnits="userSpaceOnUse">
+<stop offset="0.402439" stop-color="#7A3C35" stop-opacity="0"/>
+<stop offset="0.865854" stop-color="#783930"/>
+<stop offset="1" stop-color="#713126"/>
+</linearGradient>
+<linearGradient id="paint12_linear_18_32062" x1="14.6562" y1="6.46875" x2="15.5625" y2="5.625" gradientUnits="userSpaceOnUse">
+<stop stop-color="#A87760" stop-opacity="0"/>
+<stop offset="0.342675" stop-color="#A8775F"/>
+<stop offset="1" stop-color="#A3735A"/>
+</linearGradient>
+<linearGradient id="paint13_linear_18_32062" x1="10.5" y1="5.40625" x2="11.4453" y2="6.35156" gradientUnits="userSpaceOnUse">
+<stop stop-color="#754A38"/>
+<stop offset="0.198347" stop-color="#764B38"/>
+<stop offset="1" stop-color="#8A5648" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint14_linear_18_32062" x1="15.625" y1="9.875" x2="14.7344" y2="8.98438" gradientUnits="userSpaceOnUse">
+<stop offset="0.192983" stop-color="#7F4131"/>
+<stop offset="0.508772" stop-color="#884B3F"/>
+<stop offset="1" stop-color="#905452" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint15_linear_18_32062" x1="9.90402" y1="8.44186" x2="15.9816" y2="8.5181" gradientUnits="userSpaceOnUse">
+<stop stop-color="#8B5A4A"/>
+<stop offset="1" stop-color="#9B6351"/>
+</linearGradient>
+<linearGradient id="paint16_linear_18_32062" x1="11.1227" y1="9.59642" x2="13.8559" y2="6.86243" gradientUnits="userSpaceOnUse">
+<stop offset="0.0276698" stop-color="#804643"/>
+<stop offset="0.183829" stop-color="#874B4F" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint17_linear_18_32062" x1="14.9214" y1="5.86515" x2="12.6745" y2="8.00623" gradientUnits="userSpaceOnUse">
+<stop offset="0.0194806" stop-color="#9B705C"/>
+<stop offset="0.204546" stop-color="#9B705C" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint18_linear_18_32062" x1="17.2209" y1="15.0174" x2="15.9396" y2="16.2986" gradientUnits="userSpaceOnUse">
+<stop offset="0.109756" stop-color="#6D3F3D" stop-opacity="0"/>
+<stop offset="0.670732" stop-color="#643026"/>
+<stop offset="1" stop-color="#5D2A1F"/>
+</linearGradient>
+<linearGradient id="paint19_linear_18_32062" x1="19.8693" y1="12.369" x2="20.6896" y2="11.5486" gradientUnits="userSpaceOnUse">
+<stop stop-color="#91634B" stop-opacity="0"/>
+<stop offset="0.257143" stop-color="#8E5E45"/>
+<stop offset="0.971429" stop-color="#79452B"/>
+</linearGradient>
+<linearGradient id="paint20_linear_18_32062" x1="15.6271" y1="11.3299" x2="16.5724" y2="12.2752" gradientUnits="userSpaceOnUse">
+<stop stop-color="#733821"/>
+<stop offset="0.198347" stop-color="#773D25"/>
+<stop offset="1" stop-color="#7F4B35" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint21_linear_18_32062" x1="17.625" y1="14.5625" x2="16.3437" y2="15.8437" gradientUnits="userSpaceOnUse">
+<stop offset="0.109756" stop-color="#6D3F3D" stop-opacity="0"/>
+<stop offset="0.670732" stop-color="#643026"/>
+<stop offset="1" stop-color="#5D2A1F"/>
+</linearGradient>
+<linearGradient id="paint22_linear_18_32062" x1="20.2734" y1="11.9141" x2="21.0938" y2="11.0938" gradientUnits="userSpaceOnUse">
+<stop stop-color="#91634B" stop-opacity="0"/>
+<stop offset="0.257143" stop-color="#8E5E45"/>
+<stop offset="0.971429" stop-color="#79452B"/>
+</linearGradient>
+<linearGradient id="paint23_linear_18_32062" x1="16.0312" y1="10.875" x2="16.9766" y2="11.8203" gradientUnits="userSpaceOnUse">
+<stop stop-color="#733821"/>
+<stop offset="0.198347" stop-color="#773D25"/>
+<stop offset="1" stop-color="#7F4B35" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint24_linear_18_32062" x1="21.1562" y1="15.3438" x2="20.2656" y2="14.4531" gradientUnits="userSpaceOnUse">
+<stop offset="0.192983" stop-color="#7F4131"/>
+<stop offset="0.508772" stop-color="#884B3F"/>
+<stop offset="1" stop-color="#905452" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint25_linear_18_32062" x1="15.4344" y1="13.9115" x2="21.414" y2="13.8881" gradientUnits="userSpaceOnUse">
+<stop stop-color="#865345"/>
+<stop offset="1" stop-color="#945C4E"/>
+</linearGradient>
+<linearGradient id="paint26_linear_18_32062" x1="16.652" y1="15.0671" x2="20.2113" y2="11.5742" gradientUnits="userSpaceOnUse">
+<stop offset="0.0276698" stop-color="#7F4A40"/>
+<stop offset="0.183829" stop-color="#844A45" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint27_linear_18_32062" x1="20.3288" y1="11.4578" x2="17.1775" y2="14.6091" gradientUnits="userSpaceOnUse">
+<stop offset="0.0194806" stop-color="#9B705C"/>
+<stop offset="0.204546" stop-color="#9B705C" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint28_linear_18_32062" x1="11.375" y1="21.375" x2="9.21875" y2="19.2188" gradientUnits="userSpaceOnUse">
+<stop stop-color="#64342F"/>
+<stop offset="1" stop-color="#773C41"/>
+</linearGradient>
+<linearGradient id="paint29_linear_18_32062" x1="12.4531" y1="19.7656" x2="11.1719" y2="21.0469" gradientUnits="userSpaceOnUse">
+<stop stop-color="#835355" stop-opacity="0"/>
+<stop offset="0.542683" stop-color="#825254"/>
+</linearGradient>
+<linearGradient id="paint30_linear_18_32062" x1="15.1016" y1="17.1172" x2="15.9219" y2="16.2969" gradientUnits="userSpaceOnUse">
+<stop stop-color="#91634B" stop-opacity="0"/>
+<stop offset="0.257143" stop-color="#8E5E45"/>
+<stop offset="0.971429" stop-color="#79452B"/>
+</linearGradient>
+<linearGradient id="paint31_linear_18_32062" x1="10.8594" y1="16.0781" x2="11.8047" y2="17.0234" gradientUnits="userSpaceOnUse">
+<stop stop-color="#733821"/>
+<stop offset="0.198347" stop-color="#783F28"/>
+<stop offset="1" stop-color="#7E4934" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint32_linear_18_32062" x1="15.9844" y1="20.5469" x2="15.0937" y2="19.6563" gradientUnits="userSpaceOnUse">
+<stop offset="0.192983" stop-color="#7F4131"/>
+<stop offset="0.508772" stop-color="#884B3F"/>
+<stop offset="1" stop-color="#905452" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint33_linear_18_32062" x1="10.2625" y1="19.1146" x2="16.2421" y2="19.0912" gradientUnits="userSpaceOnUse">
+<stop stop-color="#865345"/>
+<stop offset="1" stop-color="#945C4E"/>
+</linearGradient>
+<linearGradient id="paint34_linear_18_32062" x1="11.4802" y1="20.2702" x2="15.0394" y2="16.7774" gradientUnits="userSpaceOnUse">
+<stop offset="0.0276698" stop-color="#7F4A40"/>
+<stop offset="0.183829" stop-color="#844A45" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint35_linear_18_32062" x1="15.1569" y1="16.6609" x2="12.0056" y2="19.8122" gradientUnits="userSpaceOnUse">
+<stop offset="0.0194806" stop-color="#9B705C"/>
+<stop offset="0.204546" stop-color="#9B705C" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint36_linear_18_32062" x1="26.9375" y1="16.3125" x2="15.75" y2="27.5" gradientUnits="userSpaceOnUse">
+<stop stop-color="#ED4253"/>
+<stop offset="1" stop-color="#C41959"/>
+</linearGradient>
+<linearGradient id="paint37_linear_18_32062" x1="25.9375" y1="25.125" x2="22.6875" y2="21.875" gradientUnits="userSpaceOnUse">
+<stop stop-color="#D61E58"/>
+<stop offset="0.932692" stop-color="#D71D59" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint38_linear_18_32062" x1="25.75" y1="15.125" x2="22.8437" y2="18.0312" gradientUnits="userSpaceOnUse">
+<stop offset="0.0860215" stop-color="#EA4B6C"/>
+<stop offset="0.693548" stop-color="#EC4B6C" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint39_linear_18_32062" x1="17.4375" y1="18.5" x2="18.8438" y2="19.5313" gradientUnits="userSpaceOnUse">
+<stop offset="0.384393" stop-color="#B3154F"/>
+<stop offset="0.766859" stop-color="#B71550" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint40_linear_18_32062" x1="23.3401" y1="11.4724" x2="11.25" y2="23.625" gradientUnits="userSpaceOnUse">
+<stop stop-color="#C1C1C2"/>
+<stop offset="0.0875295" stop-color="#ADABB2"/>
+<stop offset="0.198407" stop-color="#B1A4C2"/>
+<stop offset="0.757899" stop-color="#B3A5C6"/>
+<stop offset="0.879116" stop-color="#A892C1"/>
+<stop offset="1" stop-color="#A485C3"/>
+</linearGradient>
+<linearGradient id="paint41_linear_18_32062" x1="22.25" y1="10.7831" x2="16.5" y2="16.5331" gradientUnits="userSpaceOnUse">
+<stop stop-color="#D4D1DB"/>
+<stop offset="1" stop-color="#B3A6C5" stop-opacity="0"/>
+</linearGradient>
+</defs>
+</svg>

packages/frontend/assets/drop-and-fusion/sweets_monos/cookie_color.svg

@@ -0,0 +1,116 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M2 16C2 25.29 8.27 30 16 30C23.73 30 30 25.26 30 16C30 6.57 23.73 2 16 2C8.27 2 2 6.43 2 16Z" fill="#DDB78F"/>
+<path d="M2 16C2 25.29 8.27 30 16 30C23.73 30 30 25.26 30 16C30 6.57 23.73 2 16 2C8.27 2 2 6.43 2 16Z" fill="url(#paint0_radial_18_31720)"/>
+<path d="M2 16C2 25.29 8.27 30 16 30C23.73 30 30 25.26 30 16C30 6.57 23.73 2 16 2C8.27 2 2 6.43 2 16Z" fill="url(#paint1_radial_18_31720)"/>
+<path d="M2 16C2 25.29 8.27 30 16 30C23.73 30 30 25.26 30 16C30 6.57 23.73 2 16 2C8.27 2 2 6.43 2 16Z" fill="url(#paint2_radial_18_31720)"/>
+<path d="M26.92 14.61L26.96 13.99C27 13.42 26.52 12.94 25.95 12.98L25.34 13.02C25.1 13.03 24.85 13.11 24.63 13.24C24.01 13.63 23.76 14.42 24.04 15.09C24.38 15.89 25.32 16.23 26.09 15.85C26.59 15.62 26.88 15.13 26.92 14.61Z" fill="#6F434A"/>
+<g filter="url(#filter0_f_18_31720)">
+<path d="M26.7344 13.875C26.7688 13.3847 26.4531 13.25 26.0156 13.25C25.5781 13.25 25.1653 13.4633 24.8125 13.6718C24.2792 14.0073 23.9955 14.43 24.2364 15.0063C24.5288 15.6944 25.0877 15.7019 25.75 15.375C26.3626 15.0932 26.5801 14.4399 26.7344 13.875Z" fill="url(#paint3_radial_18_31720)"/>
+</g>
+<path d="M19.89 8.32001L20.51 8.36001C21.08 8.40001 21.56 7.92001 21.52 7.35001L21.48 6.74001C21.47 6.50001 21.39 6.25001 21.26 6.03001C20.87 5.41001 20.08 5.16001 19.41 5.44001C18.61 5.78001 18.27 6.72001 18.65 7.49001C18.88 7.99001 19.37 8.28001 19.89 8.32001Z" fill="#6F434A"/>
+<g filter="url(#filter1_f_18_31720)">
+<path d="M20.0001 7.68832L20.4808 7.71707C20.9227 7.74582 21.2948 7.40083 21.2638 6.99115L21.2328 6.55273C21.2251 6.38023 21.163 6.20055 21.0622 6.04243C20.7599 5.59681 20.1474 5.41713 19.6279 5.61837C19.0077 5.86274 18.7441 6.53835 19.0387 7.09178C19.217 7.45114 19.5969 7.65957 20.0001 7.68832Z" fill="url(#paint4_radial_18_31720)"/>
+</g>
+<path d="M10.67 23.75L10.62 24.52C10.57 25.23 11.16 25.82 11.87 25.77L12.63 25.72C12.93 25.7 13.23 25.61 13.51 25.44C14.28 24.96 14.59 23.98 14.24 23.14C13.82 22.14 12.65 21.72 11.7 22.2C11.08 22.51 10.71 23.11 10.67 23.75Z" fill="#6F434A"/>
+<g filter="url(#filter2_f_18_31720)">
+<path d="M10.9819 23.765L10.9402 24.4071C10.8985 24.9991 11.3905 25.4911 11.9825 25.4494L12.6162 25.4077C12.8664 25.3911 13.1165 25.316 13.35 25.1743C13.9921 24.774 14.2506 23.9568 13.9587 23.2564C13.6085 22.4225 12.6329 22.0723 11.8407 22.4726C11.3238 22.7311 11.0152 23.2314 10.9819 23.765Z" fill="url(#paint5_radial_18_31720)"/>
+</g>
+<path d="M20.4 15.19L20.43 14.73C20.53 13.22 19.28 11.97 17.76 12.06L17.31 12.09C16.86 12.11 16.41 12.24 15.99 12.49C14.75 13.22 14.22 14.78 14.77 16.11C15.42 17.7 17.27 18.37 18.78 17.62C19.76 17.15 20.34 16.2 20.4 15.19Z" fill="#6F434A"/>
+<g filter="url(#filter3_f_18_31720)">
+<path d="M20.024 14.9836L20.0483 14.6099C20.1296 13.3833 19.1142 12.368 17.8795 12.4411L17.514 12.4655C17.1485 12.4817 16.7829 12.5873 16.4418 12.7904C15.4345 13.3833 15.004 14.6505 15.4508 15.7309C15.9788 17.0224 17.4815 17.5666 18.7081 16.9574C19.5041 16.5756 19.9752 15.804 20.024 14.9836Z" fill="url(#paint6_radial_18_31720)"/>
+</g>
+<path d="M7.68 9.41994L7.65 8.99994C7.57 7.62994 8.7 6.48994 10.07 6.57994L10.48 6.60994C10.89 6.62994 11.3 6.74994 11.68 6.96994C12.81 7.62994 13.28 9.04994 12.79 10.2599C12.2 11.6999 10.52 12.3099 9.15 11.6299C8.27 11.1899 7.74 10.3299 7.68 9.41994Z" fill="url(#paint7_radial_18_31720)"/>
+<g filter="url(#filter4_f_18_31720)">
+<path d="M8.15663 9.38764L8.13206 9.04363C8.06654 7.92149 8.99209 6.98774 10.1142 7.06146L10.45 7.08603C10.7859 7.10241 11.2825 7.0698 11.5938 7.25C12.5193 7.79059 12.8076 8.94642 12.4062 9.9375C11.923 11.117 10.4828 11.7548 9.36068 11.1978C8.63989 10.8374 8.20578 10.133 8.15663 9.38764Z" fill="url(#paint8_radial_18_31720)"/>
+</g>
+<path d="M24.26 22.82L24.28 23.18C24.36 24.35 23.38 25.33 22.21 25.25L21.86 25.23C21.51 25.21 21.16 25.11 20.83 24.92C19.86 24.35 19.46 23.14 19.88 22.11C20.39 20.88 21.82 20.35 23 20.94C23.76 21.3 24.21 22.03 24.26 22.82Z" fill="#6F434A"/>
+<g filter="url(#filter5_f_18_31720)">
+<path d="M24.0262 22.7197L24.043 23.0224C24.1103 24.0064 23.2861 24.8306 22.3021 24.7633L22.0078 24.7465C21.7134 24.7297 21.4191 24.6456 21.1415 24.4858C20.3258 24.0064 19.9893 22.9888 20.3426 22.1226C20.7715 21.0881 21.9741 20.6424 22.9665 21.1386C23.6057 21.4413 23.9842 22.0553 24.0262 22.7197Z" fill="url(#paint9_radial_18_31720)"/>
+</g>
+<path d="M5.90999 17.54L5.86999 16.92C5.82999 16.35 6.30999 15.87 6.87999 15.91L7.48999 15.95C7.72999 15.96 7.97999 16.04 8.19999 16.17C8.81999 16.56 9.06999 17.35 8.78999 18.02C8.44999 18.82 7.50999 19.16 6.73999 18.78C6.23999 18.55 5.93999 18.06 5.90999 17.54Z" fill="#6F434A"/>
+<g filter="url(#filter6_f_18_31720)">
+<path d="M6.21167 17.5158L6.17985 17.0226C6.14803 16.5691 6.52991 16.1872 6.9834 16.219L7.46872 16.2508C7.65966 16.2588 7.85856 16.3224 8.03359 16.4259C8.52686 16.7362 8.72576 17.3647 8.50299 17.8977C8.23249 18.5342 7.48463 18.8047 6.87202 18.5024C6.47422 18.3194 6.23554 17.9296 6.21167 17.5158Z" fill="url(#paint10_radial_18_31720)"/>
+</g>
+<defs>
+<filter id="filter0_f_18_31720" x="23.6498" y="12.75" width="3.58717" height="3.33459" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="0.25" result="effect1_foregroundBlur_18_31720"/>
+</filter>
+<filter id="filter1_f_18_31720" x="18.4181" y="5.03638" width="3.34752" height="3.18237" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="0.25" result="effect1_foregroundBlur_18_31720"/>
+</filter>
+<filter id="filter2_f_18_31720" x="10.4377" y="21.807" width="4.14041" height="4.1449" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="0.25" result="effect1_foregroundBlur_18_31720"/>
+</filter>
+<filter id="filter3_f_18_31720" x="14.7748" y="11.9374" width="5.77806" height="5.76941" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="0.25" result="effect1_foregroundBlur_18_31720"/>
+</filter>
+<filter id="filter4_f_18_31720" x="7.62878" y="6.55737" width="5.45396" height="5.34436" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="0.25" result="effect1_foregroundBlur_18_31720"/>
+</filter>
+<filter id="filter5_f_18_31720" x="19.7031" y="20.4355" width="4.84375" height="4.83167" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="0.25" result="effect1_foregroundBlur_18_31720"/>
+</filter>
+<filter id="filter6_f_18_31720" x="5.67799" y="15.7172" width="3.41576" height="3.40894" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="0.25" result="effect1_foregroundBlur_18_31720"/>
+</filter>
+<radialGradient id="paint0_radial_18_31720" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(23.4375 7.8125) rotate(119.554) scale(20.9077)">
+<stop stop-color="#FFDAAE"/>
+<stop offset="1" stop-color="#D59077" stop-opacity="0"/>
+</radialGradient>
+<radialGradient id="paint1_radial_18_31720" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(17.375 16) rotate(83.2902) scale(17.1172 16.2696)">
+<stop offset="0.772068" stop-color="#BF9E7A" stop-opacity="0"/>
+<stop offset="1" stop-color="#C4A47E"/>
+</radialGradient>
+<radialGradient id="paint2_radial_18_31720" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(19.375 6.5) rotate(92.6808) scale(37.4159)">
+<stop offset="0.324983" stop-color="#E9AB8B" stop-opacity="0"/>
+<stop offset="0.505034" stop-color="#DE9A80"/>
+<stop offset="0.656015" stop-color="#D07067"/>
+</radialGradient>
+<radialGradient id="paint3_radial_18_31720" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(26.6119 13.3594) rotate(140.104) scale(2.75277 2.61177)">
+<stop offset="0.175443" stop-color="#886562"/>
+<stop offset="1" stop-color="#8E6C67" stop-opacity="0"/>
+</radialGradient>
+<radialGradient id="paint4_radial_18_31720" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(21.2656 7.41039) rotate(-149.903) scale(2.90043 2.79159)">
+<stop offset="0.175443" stop-color="#886562"/>
+<stop offset="1" stop-color="#8E6C67" stop-opacity="0"/>
+</radialGradient>
+<radialGradient id="paint5_radial_18_31720" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(11.1292 25.2582) rotate(-41.0159) scale(3.90831 4.00044)">
+<stop offset="0.469854" stop-color="#896764" stop-opacity="0"/>
+<stop offset="0.935135" stop-color="#896763"/>
+</radialGradient>
+<radialGradient id="paint6_radial_18_31720" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(15.2748 16) rotate(-21.7768) scale(5.55942 5.69235)">
+<stop offset="0.388269" stop-color="#896764" stop-opacity="0"/>
+<stop offset="0.935135" stop-color="#896763"/>
+</radialGradient>
+<radialGradient id="paint7_radial_18_31720" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(11.125 8.875) rotate(123.403) scale(3.63294 3.63565)">
+<stop stop-color="#7D5755"/>
+<stop offset="1" stop-color="#60383B"/>
+</radialGradient>
+<radialGradient id="paint8_radial_18_31720" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(8.12878 9.5625) rotate(-3.96087) scale(4.82023 4.82383)">
+<stop offset="0.596528" stop-color="#896764" stop-opacity="0"/>
+<stop offset="0.935135" stop-color="#896763"/>
+</radialGradient>
+<radialGradient id="paint9_radial_18_31720" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(20.4375 24.5313) rotate(-40.886) scale(4.77422 4.88362)">
+<stop offset="0.469854" stop-color="#896764" stop-opacity="0"/>
+<stop offset="0.935135" stop-color="#896763"/>
+</radialGradient>
+<radialGradient id="paint10_radial_18_31720" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(6.3253 18.4778) rotate(-40.8959) scale(3.00101 3.06992)">
+<stop offset="0.469854" stop-color="#896764" stop-opacity="0"/>
+<stop offset="0.935135" stop-color="#896763"/>
+</radialGradient>
+</defs>
+</svg>

packages/frontend/assets/drop-and-fusion/sweets_monos/custard_color.svg

@@ -0,0 +1,22 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="32px" height="32px" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
+    <g transform="matrix(1,0,0,1,0,-6.5)">
+        <path d="M7.97,16.47L5.61,26L26.38,26L24.08,16.48C23.88,15.61 23.1,15 22.21,15L9.84,15C8.96,15 8.18,15.61 7.97,16.47Z" style="fill:url(#_Linear1);fill-rule:nonzero;"/>
+        <path d="M9.84,15C8.96,15 8.18,15.61 7.97,16.47L7.34,19L24.7,19L24.09,16.48C23.88,15.61 23.1,15 22.21,15L9.84,15Z" style="fill:url(#_Linear2);fill-rule:nonzero;"/>
+        <path d="M4,28C5.28,29.28 7.02,30 8.83,30L23.17,30C24.98,30 26.72,29.28 28,28L4,28Z" style="fill:url(#_Linear3);fill-rule:nonzero;"/>
+        <path d="M4,28C5.28,29.28 7.02,30 8.83,30L23.17,30C24.98,30 26.72,29.28 28,28L4,28Z" style="fill:url(#_Linear4);fill-rule:nonzero;"/>
+        <path d="M29,28L3,28C2.45,28 2,27.55 2,27C2,26.45 2.45,26 3,26L29,26C29.55,26 30,26.45 30,27C30,27.55 29.55,28 29,28Z" style="fill:url(#_Linear5);fill-rule:nonzero;"/>
+        <path d="M29,28L3,28C2.45,28 2,27.55 2,27C2,26.45 2.45,26 3,26L29,26C29.55,26 30,26.45 30,27C30,27.55 29.55,28 29,28Z" style="fill:url(#_Radial6);fill-rule:nonzero;"/>
+        <path d="M29,28L3,28C2.45,28 2,27.55 2,27C2,26.45 2.45,26 3,26L29,26C29.55,26 30,26.45 30,27C30,27.55 29.55,28 29,28Z" style="fill:url(#_Radial7);fill-rule:nonzero;"/>
+    </g>
+    <defs>
+        <linearGradient id="_Linear1" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(20.77,0,0,20.77,5.61,26)"><stop offset="0" style="stop-color:rgb(148,107,83);stop-opacity:1"/><stop offset="0.25" style="stop-color:rgb(166,108,58);stop-opacity:1"/><stop offset="0.54" style="stop-color:rgb(204,139,83);stop-opacity:1"/><stop offset="0.75" style="stop-color:rgb(224,165,108);stop-opacity:1"/><stop offset="0.86" style="stop-color:rgb(230,165,103);stop-opacity:1"/><stop offset="1" style="stop-color:rgb(204,153,104);stop-opacity:1"/></linearGradient>
+        <linearGradient id="_Linear2" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(16.8875,0,0,16.8875,7.8125,17.3125)"><stop offset="0" style="stop-color:rgb(113,76,64);stop-opacity:1"/><stop offset="0.25" style="stop-color:rgb(122,74,57);stop-opacity:1"/><stop offset="0.49" style="stop-color:rgb(149,95,75);stop-opacity:1"/><stop offset="0.78" style="stop-color:rgb(180,128,107);stop-opacity:1"/><stop offset="1" style="stop-color:rgb(172,121,98);stop-opacity:1"/></linearGradient>
+        <linearGradient id="_Linear3" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(23.625,0,0,23.625,4.375,30)"><stop offset="0" style="stop-color:rgb(173,153,193);stop-opacity:1"/><stop offset="1" style="stop-color:rgb(173,150,195);stop-opacity:1"/></linearGradient>
+        <linearGradient id="_Linear4" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(-0.0313,1.9219,-1.9219,-0.0313,16.2813,26.5469)"><stop offset="0" style="stop-color:rgb(152,131,172);stop-opacity:1"/><stop offset="0.73" style="stop-color:rgb(152,131,172);stop-opacity:1"/><stop offset="1" style="stop-color:rgb(156,132,180);stop-opacity:0"/></linearGradient>
+        <linearGradient id="_Linear5" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(28.3125,0,0,28.3125,2,27)"><stop offset="0" style="stop-color:rgb(134,133,137);stop-opacity:1"/><stop offset="0.51" style="stop-color:rgb(172,170,172);stop-opacity:1"/><stop offset="1" style="stop-color:rgb(188,185,194);stop-opacity:1"/></linearGradient>
+        <radialGradient id="_Radial6" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="matrix(-2.99107e-16,0.78125,-14.5,-5.55142e-15,26.1875,26.7187)"><stop offset="0" style="stop-color:rgb(221,218,228);stop-opacity:1"/><stop offset="1" style="stop-color:rgb(222,219,228);stop-opacity:0"/></radialGradient>
+        <radialGradient id="_Radial7" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="matrix(-5.98214e-16,1.5625,-60.1813,-2.30408e-14,11.1875,28)"><stop offset="0" style="stop-color:rgb(175,152,197);stop-opacity:1"/><stop offset="1" style="stop-color:rgb(174,152,197);stop-opacity:0"/></radialGradient>
+    </defs>
+</svg>

packages/frontend/assets/drop-and-fusion/sweets_monos/doughnut_color.svg

@@ -0,0 +1,272 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M27.32 14C25.67 9.34 21.22 6 16 6C10.78 6 6.33 9.34 4.68 14H4V18C4 24.63 9.37 30 16 30C22.63 30 28 24.63 28 18V14H27.32ZM20.5 17.64C20.5 19.85 18.71 21.64 16.5 21.64H15.5C13.29 21.64 11.5 19.85 11.5 17.64C11.5 15.43 13.29 14 15.5 14H16.5C18.71 14 20.5 15.43 20.5 17.64Z" fill="url(#paint0_linear_18_31224)"/>
+<path d="M27.32 14C25.67 9.34 21.22 6 16 6C10.78 6 6.33 9.34 4.68 14H4V18C4 24.63 9.37 30 16 30C22.63 30 28 24.63 28 18V14H27.32ZM20.5 17.64C20.5 19.85 18.71 21.64 16.5 21.64H15.5C13.29 21.64 11.5 19.85 11.5 17.64C11.5 15.43 13.29 14 15.5 14H16.5C18.71 14 20.5 15.43 20.5 17.64Z" fill="url(#paint1_radial_18_31224)"/>
+<path d="M27.32 14C25.67 9.34 21.22 6 16 6C10.78 6 6.33 9.34 4.68 14H4V18C4 24.63 9.37 30 16 30C22.63 30 28 24.63 28 18V14H27.32ZM20.5 17.64C20.5 19.85 18.71 21.64 16.5 21.64H15.5C13.29 21.64 11.5 19.85 11.5 17.64C11.5 15.43 13.29 14 15.5 14H16.5C18.71 14 20.5 15.43 20.5 17.64Z" fill="url(#paint2_radial_18_31224)"/>
+<path d="M16 2C9.37 2 3.8125 7.37 3.8125 14C3.8125 20.63 8.96875 26.3438 16 26.3438C23.0312 26.3438 28.25 20.63 28.25 14C28.25 7.37 22.63 2 16 2ZM20.5 14C20.5 16.21 18.71 18 16.5 18H15.5C13.29 18 11.5 16.21 11.5 14C11.5 12 13.29 10.2812 15.5 10.2812H16.5C18.71 10.2812 20.5 11.9688 20.5 14Z" fill="url(#paint3_radial_18_31224)"/>
+<path d="M16 2C9.37 2 3.8125 7.37 3.8125 14C3.8125 20.63 8.96875 26.3438 16 26.3438C23.0312 26.3438 28.25 20.63 28.25 14C28.25 7.37 22.63 2 16 2ZM20.5 14C20.5 16.21 18.71 18 16.5 18H15.5C13.29 18 11.5 16.21 11.5 14C11.5 12 13.29 10.2812 15.5 10.2812H16.5C18.71 10.2812 20.5 11.9688 20.5 14Z" fill="url(#paint4_radial_18_31224)"/>
+<path d="M16 2C9.37 2 3.8125 7.37 3.8125 14C3.8125 20.63 8.96875 26.3438 16 26.3438C23.0312 26.3438 28.25 20.63 28.25 14C28.25 7.37 22.63 2 16 2ZM20.5 14C20.5 16.21 18.71 18 16.5 18H15.5C13.29 18 11.5 16.21 11.5 14C11.5 12 13.29 10.2812 15.5 10.2812H16.5C18.71 10.2812 20.5 11.9688 20.5 14Z" fill="url(#paint5_radial_18_31224)"/>
+<g filter="url(#filter0_f_18_31224)">
+<path d="M24.4825 11.3693C24.6825 11.1693 24.6825 10.8293 24.4825 10.6293L23.7025 9.84934C23.5025 9.64934 23.1625 9.64934 22.9625 9.84934C22.7625 10.0493 22.7625 10.3893 22.9625 10.5893L23.7425 11.3693C23.9425 11.5793 24.2825 11.5793 24.4825 11.3693Z" fill="#783C43"/>
+</g>
+<g filter="url(#filter1_f_18_31224)">
+<path d="M23.0563 16.19C22.8563 15.99 22.8563 15.65 23.0563 15.45L23.8363 14.67C24.0363 14.47 24.3763 14.47 24.5763 14.67C24.7763 14.87 24.7763 15.21 24.5763 15.41L23.7963 16.19C23.5963 16.4 23.2563 16.4 23.0563 16.19Z" fill="#733D42"/>
+</g>
+<g filter="url(#filter2_f_18_31224)">
+<path d="M21.7019 20.335C21.9019 20.135 21.9019 19.795 21.7019 19.595L20.9219 18.815C20.7219 18.615 20.3819 18.615 20.1819 18.815C19.9819 19.015 19.9819 19.355 20.1819 19.555L20.9619 20.335C21.1619 20.545 21.5019 20.545 21.7019 20.335Z" fill="#7E3B46"/>
+</g>
+<g filter="url(#filter3_f_18_31224)">
+<path d="M14.0331 23.2882C13.8331 23.0882 13.8331 22.7482 14.0331 22.5482L14.8131 21.7682C15.0131 21.5682 15.3531 21.5682 15.5531 21.7682C15.7531 21.9682 15.7531 22.3082 15.5531 22.5082L14.7731 23.2882C14.5731 23.4982 14.2331 23.4982 14.0331 23.2882Z" fill="#823C46"/>
+</g>
+<path d="M24.7525 11.2912C24.5525 11.4912 24.2125 11.4912 24.0125 11.2912L23.2325 10.5112C23.0325 10.3112 23.0325 9.97122 23.2325 9.77122C23.4325 9.57122 23.7725 9.57122 23.9725 9.77122L24.7525 10.5512C24.9625 10.7512 24.9625 11.0912 24.7525 11.2912Z" fill="url(#paint6_linear_18_31224)"/>
+<path d="M24.7525 11.2912C24.5525 11.4912 24.2125 11.4912 24.0125 11.2912L23.2325 10.5112C23.0325 10.3112 23.0325 9.97122 23.2325 9.77122C23.4325 9.57122 23.7725 9.57122 23.9725 9.77122L24.7525 10.5512C24.9625 10.7512 24.9625 11.0912 24.7525 11.2912Z" fill="url(#paint7_radial_18_31224)"/>
+<g filter="url(#filter4_f_18_31224)">
+<path d="M15.9156 6.40181C15.7156 6.20181 15.7156 5.86181 15.9156 5.66181L16.6956 4.88181C16.8956 4.68181 17.2356 4.68181 17.4356 4.88181C17.6356 5.08181 17.6356 5.42181 17.4356 5.62181L16.6556 6.40181C16.4556 6.61181 16.1156 6.61181 15.9156 6.40181Z" fill="#67383D"/>
+</g>
+<g filter="url(#filter5_f_18_31224)">
+<path d="M20.9781 8.42061C20.7781 8.22061 20.7781 7.88061 20.9781 7.68061L21.7581 6.90061C21.9581 6.70061 22.2981 6.70061 22.4981 6.90061C22.6981 7.10061 22.6981 7.44061 22.4981 7.64061L21.7181 8.42061C21.5181 8.63061 21.1781 8.63061 20.9781 8.42061Z" fill="#6B3C40"/>
+</g>
+<path d="M16.15 6.27999C15.95 6.07999 15.95 5.73999 16.15 5.53999L16.93 4.75999C17.13 4.55999 17.47 4.55999 17.67 4.75999C17.87 4.95999 17.87 5.29999 17.67 5.49999L16.89 6.27999C16.69 6.48999 16.35 6.48999 16.15 6.27999Z" fill="url(#paint8_linear_18_31224)"/>
+<path d="M16.15 6.27999C15.95 6.07999 15.95 5.73999 16.15 5.53999L16.93 4.75999C17.13 4.55999 17.47 4.55999 17.67 4.75999C17.87 4.95999 17.87 5.29999 17.67 5.49999L16.89 6.27999C16.69 6.48999 16.35 6.48999 16.15 6.27999Z" fill="url(#paint9_radial_18_31224)"/>
+<g filter="url(#filter6_f_18_31224)">
+<path d="M8.06003 9.36556C7.86003 9.16556 7.86003 8.82556 8.06003 8.62556L8.84003 7.84556C9.04003 7.64556 9.38003 7.64556 9.58003 7.84556C9.78003 8.04556 9.78003 8.38556 9.58003 8.58556L8.80003 9.36556C8.60003 9.56556 8.26003 9.56556 8.06003 9.36556Z" fill="#62393D"/>
+</g>
+<path d="M8.33378 9.25618C8.13378 9.05618 8.13378 8.71618 8.33378 8.51618L9.11378 7.73618C9.31378 7.53618 9.65378 7.53618 9.85378 7.73618C10.0538 7.93618 10.0538 8.27618 9.85378 8.47618L9.07378 9.25618C8.87378 9.45618 8.53378 9.45618 8.33378 9.25618Z" fill="url(#paint10_linear_18_31224)"/>
+<path d="M8.33378 9.25618C8.13378 9.05618 8.13378 8.71618 8.33378 8.51618L9.11378 7.73618C9.31378 7.53618 9.65378 7.53618 9.85378 7.73618C10.0538 7.93618 10.0538 8.27618 9.85378 8.47618L9.07378 9.25618C8.87378 9.45618 8.53378 9.45618 8.33378 9.25618Z" fill="url(#paint11_radial_18_31224)"/>
+<path d="M14.33 23.1975C14.13 22.9975 14.13 22.6575 14.33 22.4575L15.11 21.6775C15.31 21.4775 15.65 21.4775 15.85 21.6775C16.05 21.8775 16.05 22.2175 15.85 22.4175L15.07 23.1975C14.87 23.4075 14.53 23.4075 14.33 23.1975Z" fill="url(#paint12_linear_18_31224)"/>
+<path d="M14.33 23.1975C14.13 22.9975 14.13 22.6575 14.33 22.4575L15.11 21.6775C15.31 21.4775 15.65 21.4775 15.85 21.6775C16.05 21.8775 16.05 22.2175 15.85 22.4175L15.07 23.1975C14.87 23.4075 14.53 23.4075 14.33 23.1975Z" fill="url(#paint13_radial_18_31224)"/>
+<path d="M21.8425 20.1624C21.6425 20.3624 21.3025 20.3624 21.1025 20.1624L20.3225 19.3824C20.1225 19.1824 20.1225 18.8424 20.3225 18.6424C20.5225 18.4424 20.8625 18.4424 21.0625 18.6424L21.8425 19.4224C22.0525 19.6224 22.0525 19.9624 21.8425 20.1624Z" fill="url(#paint14_linear_18_31224)"/>
+<path d="M21.8425 20.1624C21.6425 20.3624 21.3025 20.3624 21.1025 20.1624L20.3225 19.3824C20.1225 19.1824 20.1225 18.8424 20.3225 18.6424C20.5225 18.4424 20.8625 18.4424 21.0625 18.6424L21.8425 19.4224C22.0525 19.6224 22.0525 19.9624 21.8425 20.1624Z" fill="url(#paint15_radial_18_31224)"/>
+<path d="M23.24 16.1037C23.04 15.9037 23.04 15.5637 23.24 15.3637L24.02 14.5837C24.22 14.3837 24.56 14.3837 24.76 14.5837C24.96 14.7837 24.96 15.1237 24.76 15.3237L23.98 16.1037C23.78 16.3137 23.44 16.3137 23.24 16.1037Z" fill="url(#paint16_linear_18_31224)"/>
+<path d="M23.24 16.1037C23.04 15.9037 23.04 15.5637 23.24 15.3637L24.02 14.5837C24.22 14.3837 24.56 14.3837 24.76 14.5837C24.96 14.7837 24.96 15.1237 24.76 15.3237L23.98 16.1037C23.78 16.3137 23.44 16.3137 23.24 16.1037Z" fill="url(#paint17_radial_18_31224)"/>
+<g filter="url(#filter7_f_18_31224)">
+<path d="M11.618 21.2525C11.418 21.4525 11.078 21.4525 10.878 21.2525L10.098 20.4725C9.89801 20.2725 9.89801 19.9325 10.098 19.7325C10.298 19.5325 10.638 19.5325 10.838 19.7325L11.618 20.5125C11.828 20.7125 11.828 21.0525 11.618 21.2525Z" fill="#693D49"/>
+</g>
+<path d="M11.8375 21.0725C11.6375 21.2725 11.2975 21.2725 11.0975 21.0725L10.3175 20.2925C10.1175 20.0925 10.1175 19.7525 10.3175 19.5525C10.5175 19.3525 10.8575 19.3525 11.0575 19.5525L11.8375 20.3325C12.0475 20.5325 12.0475 20.8725 11.8375 21.0725Z" fill="url(#paint18_linear_18_31224)"/>
+<path d="M11.8375 21.0725C11.6375 21.2725 11.2975 21.2725 11.0975 21.0725L10.3175 20.2925C10.1175 20.0925 10.1175 19.7525 10.3175 19.5525C10.5175 19.3525 10.8575 19.3525 11.0575 19.5525L11.8375 20.3325C12.0475 20.5325 12.0475 20.8725 11.8375 21.0725Z" fill="url(#paint19_radial_18_31224)"/>
+<g filter="url(#filter8_f_18_31224)">
+<path d="M6.05543 14.1662C5.85543 13.9662 5.85543 13.6262 6.05543 13.4262L6.83543 12.6462C7.03543 12.4462 7.37543 12.4462 7.57543 12.6462C7.77543 12.8462 7.77543 13.1862 7.57543 13.3862L6.79543 14.1662C6.59543 14.3762 6.25543 14.3762 6.05543 14.1662Z" fill="#5A3840"/>
+</g>
+<g filter="url(#filter9_f_18_31224)">
+<path d="M12.5852 7.31929C12.3852 7.51929 12.0452 7.51929 11.8452 7.31929L11.0552 6.53929C10.8552 6.33929 10.8552 5.99929 11.0552 5.79929C11.2552 5.59929 11.5952 5.59929 11.7952 5.79929L12.5752 6.57929C12.7852 6.77929 12.7852 7.11929 12.5852 7.31929Z" fill="#5A3840"/>
+</g>
+<path d="M12.7613 7.19747C12.5613 7.39747 12.2213 7.39747 12.0213 7.19747L11.2313 6.41747C11.0313 6.21747 11.0313 5.87747 11.2313 5.67747C11.4313 5.47747 11.7713 5.47747 11.9713 5.67747L12.7513 6.45747C12.9613 6.65747 12.9613 6.99747 12.7613 7.19747Z" fill="url(#paint20_linear_18_31224)"/>
+<path d="M12.7613 7.19747C12.5613 7.39747 12.2213 7.39747 12.0213 7.19747L11.2313 6.41747C11.0313 6.21747 11.0313 5.87747 11.2313 5.67747C11.4313 5.47747 11.7713 5.47747 11.9713 5.67747L12.7513 6.45747C12.9613 6.65747 12.9613 6.99747 12.7613 7.19747Z" fill="url(#paint21_radial_18_31224)"/>
+<path d="M6.33379 14.0725C6.13379 13.8725 6.13379 13.5325 6.33379 13.3325L7.11379 12.5525C7.31379 12.3525 7.65379 12.3525 7.85379 12.5525C8.05379 12.7525 8.05379 13.0925 7.85379 13.2925L7.07379 14.0725C6.87379 14.2825 6.53379 14.2825 6.33379 14.0725Z" fill="url(#paint22_linear_18_31224)"/>
+<path d="M6.33379 14.0725C6.13379 13.8725 6.13379 13.5325 6.33379 13.3325L7.11379 12.5525C7.31379 12.3525 7.65379 12.3525 7.85379 12.5525C8.05379 12.7525 8.05379 13.0925 7.85379 13.2925L7.07379 14.0725C6.87379 14.2825 6.53379 14.2825 6.33379 14.0725Z" fill="url(#paint23_radial_18_31224)"/>
+<path d="M21.2363 8.3387C21.0363 8.1387 21.0363 7.7987 21.2363 7.5987L22.0163 6.8187C22.2163 6.6187 22.5563 6.6187 22.7563 6.8187C22.9563 7.0187 22.9563 7.3587 22.7563 7.5587L21.9763 8.3387C21.7763 8.5487 21.4363 8.5487 21.2363 8.3387Z" fill="url(#paint24_linear_18_31224)"/>
+<path d="M21.2363 8.3387C21.0363 8.1387 21.0363 7.7987 21.2363 7.5987L22.0163 6.8187C22.2163 6.6187 22.5563 6.6187 22.7563 6.8187C22.9563 7.0187 22.9563 7.3587 22.7563 7.5587L21.9763 8.3387C21.7763 8.5487 21.4363 8.5487 21.2363 8.3387Z" fill="url(#paint25_radial_18_31224)"/>
+<g filter="url(#filter10_f_18_31224)">
+<path d="M10.5019 17.4825C10.3019 17.6825 9.96191 17.6825 9.76191 17.4825L8.98191 16.7025C8.78191 16.5025 8.78191 16.1625 8.98191 15.9625C9.18191 15.7625 9.52191 15.7625 9.72191 15.9625L10.5019 16.7425C10.7119 16.9425 10.7119 17.2725 10.5019 17.4825Z" fill="#6F3A43"/>
+</g>
+<path d="M10.76 17.2638C10.56 17.4638 10.22 17.4638 10.02 17.2638L9.24003 16.4837C9.04003 16.2837 9.04003 15.9438 9.24003 15.7438C9.44003 15.5438 9.78003 15.5438 9.98003 15.7438L10.76 16.5237C10.97 16.7237 10.97 17.0538 10.76 17.2638Z" fill="url(#paint26_linear_18_31224)"/>
+<path d="M10.76 17.2638C10.56 17.4638 10.22 17.4638 10.02 17.2638L9.24003 16.4837C9.04003 16.2837 9.04003 15.9438 9.24003 15.7438C9.44003 15.5438 9.78003 15.5438 9.98003 15.7438L10.76 16.5237C10.97 16.7237 10.97 17.0538 10.76 17.2638Z" fill="url(#paint27_radial_18_31224)"/>
+<g filter="url(#filter11_f_18_31224)">
+<path d="M10.5781 10.4844C8.93209 13.1078 11.0312 15.5938 11.0312 15.5938C10.5298 14.3629 10.6853 12.5943 11.2031 11.5156C12.1052 9.63666 13.4219 8.45318 16.3125 8.25C13.5781 7.85943 11.7593 8.60176 10.5781 10.4844Z" fill="url(#paint28_radial_18_31224)"/>
+</g>
+<g filter="url(#filter12_f_18_31224)">
+<path d="M25.375 20.1875C20.625 25.75 12.6875 23.6874 12.6875 23.6874C19.2953 23.6874 22.2286 22.608 24.75 19.1249C27.2714 15.6417 26.9375 9.6874 24.125 5.65623C27.375 8.99994 28.6902 16.3051 25.375 20.1875Z" fill="url(#paint29_radial_18_31224)"/>
+</g>
+<defs>
+<filter id="filter0_f_18_31224" x="22.5625" y="9.44934" width="2.32001" height="2.32751" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="0.125" result="effect1_foregroundBlur_18_31224"/>
+</filter>
+<filter id="filter1_f_18_31224" x="22.6563" y="14.27" width="2.32001" height="2.32751" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="0.125" result="effect1_foregroundBlur_18_31224"/>
+</filter>
+<filter id="filter2_f_18_31224" x="19.7819" y="18.415" width="2.32001" height="2.32751" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="0.125" result="effect1_foregroundBlur_18_31224"/>
+</filter>
+<filter id="filter3_f_18_31224" x="13.6331" y="21.3682" width="2.32001" height="2.32751" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="0.125" result="effect1_foregroundBlur_18_31224"/>
+</filter>
+<filter id="filter4_f_18_31224" x="15.5156" y="4.48181" width="2.32001" height="2.32751" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="0.125" result="effect1_foregroundBlur_18_31224"/>
+</filter>
+<filter id="filter5_f_18_31224" x="20.5781" y="6.50061" width="2.32001" height="2.32751" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="0.125" result="effect1_foregroundBlur_18_31224"/>
+</filter>
+<filter id="filter6_f_18_31224" x="7.66003" y="7.44556" width="2.32001" height="2.31995" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="0.125" result="effect1_foregroundBlur_18_31224"/>
+</filter>
+<filter id="filter7_f_18_31224" x="9.69801" y="19.3325" width="2.3275" height="2.31995" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="0.125" result="effect1_foregroundBlur_18_31224"/>
+</filter>
+<filter id="filter8_f_18_31224" x="5.65543" y="12.2462" width="2.32001" height="2.32751" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="0.125" result="effect1_foregroundBlur_18_31224"/>
+</filter>
+<filter id="filter9_f_18_31224" x="10.6552" y="5.39929" width="2.32877" height="2.31995" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="0.125" result="effect1_foregroundBlur_18_31224"/>
+</filter>
+<filter id="filter10_f_18_31224" x="8.58191" y="15.5625" width="2.3275" height="2.31995" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="0.125" result="effect1_foregroundBlur_18_31224"/>
+</filter>
+<filter id="filter11_f_18_31224" x="8.94801" y="7.14905" width="8.36449" height="9.4447" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="0.5" result="effect1_foregroundBlur_18_31224"/>
+</filter>
+<filter id="filter12_f_18_31224" x="11.6875" y="4.65625" width="16.6161" height="20.4052" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="0.5" result="effect1_foregroundBlur_18_31224"/>
+</filter>
+<linearGradient id="paint0_linear_18_31224" x1="3.5625" y1="20.5625" x2="28.375" y2="20.5625" gradientUnits="userSpaceOnUse">
+<stop stop-color="#BE8A63"/>
+<stop offset="0.183879" stop-color="#DF8777"/>
+<stop offset="0.463476" stop-color="#F28886"/>
+<stop offset="0.803526" stop-color="#F0AE9C"/>
+<stop offset="1" stop-color="#EAC891"/>
+</linearGradient>
+<radialGradient id="paint1_radial_18_31224" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(16.75 11.6875) rotate(97.5709) scale(9.96184 9.16466)">
+<stop offset="0.405405" stop-color="#F48F75"/>
+<stop offset="0.598905" stop-color="#FFA85B"/>
+<stop offset="0.954955" stop-color="#FFA85B" stop-opacity="0"/>
+</radialGradient>
+<radialGradient id="paint2_radial_18_31224" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(15.6875 16.6875) rotate(90) scale(5.1875 5.88997)">
+<stop offset="0.53012" stop-color="#CD777A"/>
+<stop offset="1" stop-color="#D47A70" stop-opacity="0"/>
+</radialGradient>
+<radialGradient id="paint3_radial_18_31224" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(23.875 20.125) rotate(-135.234) scale(21.6553 18.6519)">
+<stop offset="0.393247" stop-color="#AB6B59"/>
+<stop offset="0.912271" stop-color="#7E4C42"/>
+<stop offset="1" stop-color="#664946"/>
+</radialGradient>
+<radialGradient id="paint4_radial_18_31224" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(16.875 13) rotate(88.698) scale(5.50142 5.67515)">
+<stop offset="0.686112" stop-color="#854D42"/>
+<stop offset="1" stop-color="#844C43" stop-opacity="0"/>
+</radialGradient>
+<radialGradient id="paint5_radial_18_31224" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(16.3125 9.75) rotate(90) scale(17.9375 19.5)">
+<stop offset="0.790941" stop-color="#A15B79" stop-opacity="0"/>
+<stop offset="0.9144" stop-color="#A15B75"/>
+</radialGradient>
+<linearGradient id="paint6_linear_18_31224" x1="23.5634" y1="10.9375" x2="24.3447" y2="10.1568" gradientUnits="userSpaceOnUse">
+<stop stop-color="#D256BC"/>
+<stop offset="0.501103" stop-color="#FF73E1"/>
+<stop offset="1" stop-color="#FF82E8"/>
+</linearGradient>
+<radialGradient id="paint7_radial_18_31224" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(24.7111 10.8047) rotate(138.898) scale(0.404057 0.258873)">
+<stop stop-color="#FF94FF"/>
+<stop offset="1" stop-color="#FF94FF" stop-opacity="0"/>
+</radialGradient>
+<linearGradient id="paint8_linear_18_31224" x1="16.5937" y1="5.125" x2="17.2812" y2="5.90625" gradientUnits="userSpaceOnUse">
+<stop stop-color="#F66EC9"/>
+<stop offset="0.498647" stop-color="#FF8AF5"/>
+<stop offset="1" stop-color="#FF72DB"/>
+</linearGradient>
+<radialGradient id="paint9_radial_18_31224" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(17.3281 5.03125) rotate(135) scale(1.5026 0.85995)">
+<stop offset="0.636927" stop-color="#E55DC8" stop-opacity="0"/>
+<stop offset="1" stop-color="#DB5BC1"/>
+</radialGradient>
+<linearGradient id="paint10_linear_18_31224" x1="8.77753" y1="8.09908" x2="9.46184" y2="8.87992" gradientUnits="userSpaceOnUse">
+<stop stop-color="#F66EC9"/>
+<stop offset="0.498647" stop-color="#FF8AF5"/>
+<stop offset="1" stop-color="#FF72DB"/>
+</linearGradient>
+<radialGradient id="paint11_radial_18_31224" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(9.5119 8.00572) rotate(135.118) scale(1.49952 0.85818)">
+<stop offset="0.636927" stop-color="#E55DC8" stop-opacity="0"/>
+<stop offset="1" stop-color="#DB5BC1"/>
+</radialGradient>
+<linearGradient id="paint12_linear_18_31224" x1="14.7737" y1="22.0425" x2="15.4612" y2="22.8237" gradientUnits="userSpaceOnUse">
+<stop stop-color="#F66EC9"/>
+<stop offset="0.498647" stop-color="#FF8AF5"/>
+<stop offset="1" stop-color="#FF72DB"/>
+</linearGradient>
+<radialGradient id="paint13_radial_18_31224" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(15.5081 21.9487) rotate(135) scale(1.5026 0.85995)">
+<stop offset="0.636927" stop-color="#E55DC8" stop-opacity="0"/>
+<stop offset="1" stop-color="#DB5BC1"/>
+</radialGradient>
+<linearGradient id="paint14_linear_18_31224" x1="20.6534" y1="19.8087" x2="21.4347" y2="19.028" gradientUnits="userSpaceOnUse">
+<stop stop-color="#D256BC"/>
+<stop offset="0.501103" stop-color="#FF73E1"/>
+<stop offset="1" stop-color="#FF82E8"/>
+</linearGradient>
+<radialGradient id="paint15_radial_18_31224" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(21.8011 19.6759) rotate(138.898) scale(0.404057 0.258873)">
+<stop stop-color="#FF94FF"/>
+<stop offset="1" stop-color="#FF94FF" stop-opacity="0"/>
+</radialGradient>
+<linearGradient id="paint16_linear_18_31224" x1="23.6838" y1="14.9487" x2="24.3713" y2="15.73" gradientUnits="userSpaceOnUse">
+<stop stop-color="#22A4FA"/>
+<stop offset="0.498647" stop-color="#49C0FF"/>
+<stop offset="1" stop-color="#2AB1FF"/>
+</linearGradient>
+<radialGradient id="paint17_radial_18_31224" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(24.4182 14.855) rotate(133.986) scale(1.69913 1.74052)">
+<stop offset="0.658529" stop-color="#2A77DD" stop-opacity="0"/>
+<stop offset="1" stop-color="#2B73DA"/>
+</radialGradient>
+<linearGradient id="paint18_linear_18_31224" x1="10.6484" y1="20.7187" x2="11.4297" y2="19.938" gradientUnits="userSpaceOnUse">
+<stop stop-color="#2A61B8"/>
+<stop offset="0.501103" stop-color="#25A1FF"/>
+<stop offset="1" stop-color="#2DBFFF"/>
+</linearGradient>
+<radialGradient id="paint19_radial_18_31224" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(11.796 20.5859) rotate(138.898) scale(0.404057 0.258873)">
+<stop stop-color="#4FC9FF"/>
+<stop offset="1" stop-color="#50CBFF" stop-opacity="0"/>
+</radialGradient>
+<linearGradient id="paint20_linear_18_31224" x1="11.5625" y1="6.84375" x2="12.3438" y2="6.0625" gradientUnits="userSpaceOnUse">
+<stop stop-color="#2A61B8"/>
+<stop offset="0.501103" stop-color="#25A1FF"/>
+<stop offset="1" stop-color="#2DBFFF"/>
+</linearGradient>
+<radialGradient id="paint21_radial_18_31224" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(12.7109 6.71094) rotate(138.918) scale(0.404217 0.258951)">
+<stop stop-color="#4FC9FF"/>
+<stop offset="1" stop-color="#50CBFF" stop-opacity="0"/>
+</radialGradient>
+<linearGradient id="paint22_linear_18_31224" x1="6.77754" y1="12.9175" x2="7.46504" y2="13.6987" gradientUnits="userSpaceOnUse">
+<stop stop-color="#22A4FA"/>
+<stop offset="0.498647" stop-color="#49C0FF"/>
+<stop offset="1" stop-color="#2AB1FF"/>
+</linearGradient>
+<radialGradient id="paint23_radial_18_31224" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(7.51192 12.8237) rotate(133.986) scale(1.69913 1.74052)">
+<stop offset="0.658529" stop-color="#2A77DD" stop-opacity="0"/>
+<stop offset="1" stop-color="#2B73DA"/>
+</radialGradient>
+<linearGradient id="paint24_linear_18_31224" x1="21.68" y1="7.18372" x2="22.3675" y2="7.96497" gradientUnits="userSpaceOnUse">
+<stop stop-color="#22A4FA"/>
+<stop offset="0.498647" stop-color="#49C0FF"/>
+<stop offset="1" stop-color="#2AB1FF"/>
+</linearGradient>
+<radialGradient id="paint25_radial_18_31224" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(22.4144 7.08997) rotate(133.986) scale(1.69913 1.74052)">
+<stop offset="0.658529" stop-color="#2A77DD" stop-opacity="0"/>
+<stop offset="1" stop-color="#2B73DA"/>
+</radialGradient>
+<linearGradient id="paint26_linear_18_31224" x1="9.57092" y1="16.91" x2="10.3522" y2="16.1293" gradientUnits="userSpaceOnUse">
+<stop stop-color="#D256BC"/>
+<stop offset="0.501103" stop-color="#FF73E1"/>
+<stop offset="1" stop-color="#FF82E8"/>
+</linearGradient>
+<radialGradient id="paint27_radial_18_31224" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(10.7186 16.7772) rotate(138.898) scale(0.404057 0.258873)">
+<stop stop-color="#FF94FF"/>
+<stop offset="1" stop-color="#FF94FF" stop-opacity="0"/>
+</radialGradient>
+<radialGradient id="paint28_radial_18_31224" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(12.1875 10.4375) rotate(47.0901) scale(6.05863 29.5218)">
+<stop stop-color="#C79A91"/>
+<stop offset="1" stop-color="#C79A91" stop-opacity="0"/>
+</radialGradient>
+<radialGradient id="paint29_radial_18_31224" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(25.25 19.0625) rotate(-157.529) scale(15.083 71.364)">
+<stop stop-color="#CF9689"/>
+<stop offset="1" stop-color="#D1988A" stop-opacity="0"/>
+</radialGradient>
+</defs>
+</svg>

packages/frontend/assets/drop-and-fusion/sweets_monos/lollipop_color.svg

@@ -0,0 +1,112 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M28.25 28.25L16.5 17" stroke="url(#paint0_linear_18_29825)" stroke-width="3.5" stroke-linecap="round" stroke-linejoin="round"/>
+<mask id="mask0_18_29825" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="14" y="15" width="16" height="15">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M15.236 15.7898C15.9044 15.0916 17.0121 15.0676 17.7103 15.736L29.4603 26.986C30.1584 27.6544 30.1824 28.7621 29.514 29.4603C28.8456 30.1584 27.7379 30.1824 27.0398 29.514L15.2898 18.264C14.5916 17.5956 14.5676 16.4879 15.236 15.7898Z" fill="#212121"/>
+</mask>
+<g mask="url(#mask0_18_29825)">
+<g filter="url(#filter0_f_18_29825)">
+<path d="M29 27.5L17.25 16.25" stroke="#FFE5C1" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+</g>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M15.236 15.7898C15.9044 15.0916 17.0121 15.0676 17.7103 15.736L29.4603 26.986C30.1584 27.6544 30.1824 28.7621 29.514 29.4603C28.8456 30.1584 27.7379 30.1824 27.0398 29.514L15.2898 18.264C14.5916 17.5956 14.5676 16.4879 15.236 15.7898Z" fill="url(#paint1_linear_18_29825)"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M3.38559 6.91832C4.28822 5.39149 5.58521 4.12544 7.13636 3.26038C13.3511 6.72017 12 12 12 12C9.95937 8.79099 8.01466 7.26385 3.38559 6.91832Z" fill="url(#paint2_linear_18_29825)"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M2.00043 11.9068C2.01725 10.0646 2.53218 8.34146 3.41704 6.86548C10.2965 6.96669 12 12 12 12C8.66694 10.2518 6.29 9.90635 2.00043 11.9068Z" fill="url(#paint3_linear_18_29825)"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M3.29277 16.9213C2.4698 15.4683 2 13.789 2 12C2 11.9479 2.0004 11.8959 2.00119 11.844C8.00872 8.49337 12 12 12 12C8.21727 12.0949 5.9829 13.1457 3.29277 16.9213Z" fill="url(#paint4_linear_18_29825)"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M6.92097 20.6159C5.39375 19.7137 4.12726 18.417 3.26172 16.866C6.78909 10.9586 12 12 12 12C8.7792 13.9043 7.41959 16.0271 6.92097 20.6159Z" fill="url(#paint5_linear_18_29825)"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M6.86548 20.583C6.96669 13.7035 12 12 12 12C10.173 15.2975 9.97217 17.7746 11.9074 21.9996C10.065 21.9829 8.34163 21.4679 6.86548 20.583Z" fill="url(#paint6_linear_18_29825)"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M11.844 21.9988C8.49337 15.9913 12 12 12 12C12.1732 15.8368 13.1795 18.105 16.9204 20.7077C15.4676 21.5304 13.7887 22 12 22C11.9479 22 11.8959 21.9996 11.844 21.9988Z" fill="url(#paint7_linear_18_29825)"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M16.8661 20.7383C10.9586 17.2109 12 12 12 12C14.0949 15.3202 15.9729 16.7474 20.6143 17.0819C19.7121 18.6078 18.4161 19.8733 16.8661 20.7383Z" fill="url(#paint8_linear_18_29825)"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M20.583 17.1345C13.7035 17.0333 12 12 12 12C15.3417 13.8027 17.8524 14.0929 21.9996 12.0944C21.9825 13.9361 21.4676 15.6589 20.583 17.1345Z" fill="url(#paint9_linear_18_29825)"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M21.9988 12.156C21.9996 12.1041 22 12.0521 22 12C22 10.2115 21.5305 8.53271 20.708 7.08008C18.0379 10.9644 15.7923 11.8814 12 12C12 12 15.9913 15.5066 21.9988 12.156Z" fill="url(#paint10_linear_18_29825)"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M17.0816 3.3855C18.6076 4.28766 19.8732 5.58378 20.7383 7.13389C17.2109 13.0414 12 12 12 12C15.1071 10.0716 16.7119 8.22757 17.0816 3.3855Z" fill="url(#paint11_linear_18_29825)"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M17.1345 3.41708C15.6593 2.53265 13.9371 2.0178 12.096 2.00049C14.2371 6.27017 13.7353 8.83597 12 12C12 12 17.0333 10.2965 17.1345 3.41708Z" fill="url(#paint12_linear_18_29825)"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12.156 2.00119C12.1041 2.0004 12.0521 2 12 2C10.213 2 8.53548 2.46873 7.08368 3.28996C11.2283 5.87922 12.1157 8.21834 12 12C12 12 15.5066 8.00872 12.156 2.00119Z" fill="url(#paint13_linear_18_29825)"/>
+<mask id="mask1_18_29825" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="2" y="2" width="20" height="20">
+<circle cx="12" cy="12" r="10" fill="black"/>
+</mask>
+<g mask="url(#mask1_18_29825)">
+<g filter="url(#filter1_f_18_29825)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22ZM2.125 12C2.125 6.54619 6.54619 2.125 12 2.125C17.4538 2.125 21.875 6.54619 21.875 12C21.875 17.4538 17.4538 21.875 12 21.875C6.54619 21.875 2.125 17.4538 2.125 12Z" fill="black" fill-opacity="0.32"/>
+</g>
+</g>
+<defs>
+<filter id="filter0_f_18_29825" x="15.75" y="14.75" width="14.75" height="14.25" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="0.5" result="effect1_foregroundBlur_18_29825"/>
+</filter>
+<filter id="filter1_f_18_29825" x="1.5" y="1.5" width="21" height="21" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="0.25" result="effect1_foregroundBlur_18_29825"/>
+</filter>
+<linearGradient id="paint0_linear_18_29825" x1="25.0221" y1="22.7615" x2="22.5" y2="25.5" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FDDAB2"/>
+<stop offset="0.442708" stop-color="#EA9BB3"/>
+<stop offset="0.677083" stop-color="#E37DC3"/>
+<stop offset="1" stop-color="#C969AB"/>
+</linearGradient>
+<linearGradient id="paint1_linear_18_29825" x1="14.5" y1="15.5" x2="22.5" y2="23.5" gradientUnits="userSpaceOnUse">
+<stop stop-color="#B05C92"/>
+<stop offset="0.765625" stop-color="#B05C92" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint2_linear_18_29825" x1="5.5" y1="4.50003" x2="12" y2="12" gradientUnits="userSpaceOnUse">
+<stop stop-color="#5E9BEB"/>
+<stop offset="0.526042" stop-color="#6FA0F3"/>
+<stop offset="1" stop-color="#7EA4F4"/>
+</linearGradient>
+<linearGradient id="paint3_linear_18_29825" x1="12" y1="12" x2="2.5" y2="9" gradientUnits="userSpaceOnUse">
+<stop stop-color="#7DC3A2"/>
+<stop offset="0.515625" stop-color="#71C398"/>
+<stop offset="1" stop-color="#74D099"/>
+</linearGradient>
+<linearGradient id="paint4_linear_18_29825" x1="12" y1="12" x2="2" y2="14" gradientUnits="userSpaceOnUse">
+<stop stop-color="#EAC27C"/>
+<stop offset="0.489583" stop-color="#EBC16A"/>
+<stop offset="1" stop-color="#FFE885"/>
+</linearGradient>
+<linearGradient id="paint5_linear_18_29825" x1="12" y1="12" x2="4.5" y2="18.5" gradientUnits="userSpaceOnUse">
+<stop stop-color="#ED8876"/>
+<stop offset="0.442708" stop-color="#FE8765"/>
+<stop offset="1" stop-color="#FF916D"/>
+</linearGradient>
+<linearGradient id="paint6_linear_18_29825" x1="12" y1="12" x2="9" y2="21.5" gradientUnits="userSpaceOnUse">
+<stop stop-color="#BD4C97"/>
+<stop offset="0.515625" stop-color="#B93A90"/>
+<stop offset="1" stop-color="#B83A8B"/>
+</linearGradient>
+<linearGradient id="paint7_linear_18_29825" x1="12" y1="12" x2="13.6573" y2="22" gradientUnits="userSpaceOnUse">
+<stop stop-color="#B976DB"/>
+<stop offset="0.510417" stop-color="#AF64D6"/>
+<stop offset="1" stop-color="#9B4BC5"/>
+</linearGradient>
+<linearGradient id="paint8_linear_18_29825" x1="19" y1="19.5" x2="12" y2="12" gradientUnits="userSpaceOnUse">
+<stop stop-color="#5E92F8"/>
+<stop offset="0.5" stop-color="#6D95F1"/>
+<stop offset="1" stop-color="#7CA0F2"/>
+</linearGradient>
+<linearGradient id="paint9_linear_18_29825" x1="21.5" y1="15" x2="12" y2="12" gradientUnits="userSpaceOnUse">
+<stop stop-color="#90F7BA"/>
+<stop offset="0.526042" stop-color="#76C5A0"/>
+<stop offset="1" stop-color="#7EC1A4"/>
+</linearGradient>
+<linearGradient id="paint10_linear_18_29825" x1="21.5" y1="10" x2="12" y2="12" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FFFF90"/>
+<stop offset="0.515625" stop-color="#FFD677"/>
+<stop offset="1" stop-color="#EDC47E"/>
+</linearGradient>
+<linearGradient id="paint11_linear_18_29825" x1="19.5" y1="5.49997" x2="12" y2="12" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FFB281"/>
+<stop offset="0.5" stop-color="#FF9372"/>
+<stop offset="1" stop-color="#F18C79"/>
+</linearGradient>
+<linearGradient id="paint12_linear_18_29825" x1="15" y1="2.50003" x2="12" y2="12" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FC70BD"/>
+<stop offset="1" stop-color="#C2509A"/>
+</linearGradient>
+<linearGradient id="paint13_linear_18_29825" x1="9.5" y1="2.5" x2="12" y2="12" gradientUnits="userSpaceOnUse">
+<stop stop-color="#DB8BFB"/>
+<stop offset="1" stop-color="#BC79DD"/>
+</linearGradient>
+</defs>
+</svg>

packages/frontend/assets/drop-and-fusion/sweets_monos/pancakes_color.svg

@@ -0,0 +1,92 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="32px" height="32px" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;">
+    <g transform="matrix(1,0,0,1,0,0.3089)">
+        <path d="M21.357,12.066L10.653,12.066C5.871,12.066 2,15.947 2,20.729C2,25.511 5.871,29.382 10.653,29.382L21.347,29.382C26.129,29.382 30,25.511 30,20.729C30.01,15.947 26.139,12.066 21.357,12.066Z" style="fill:url(#_Linear1);fill-rule:nonzero;"/>
+        <g>
+            <path d="M21.283,12.484L10.758,12.484C6.057,12.484 2.25,16.155 2.25,20.677C2.25,25.198 6.057,28.859 10.758,28.859L21.273,28.859C25.975,28.859 29.781,25.198 29.781,20.677C29.791,16.155 25.985,12.484 21.283,12.484Z" style="fill:url(#_Linear2);fill-rule:nonzero;"/>
+        </g>
+        <g>
+            <path d="M21.417,14.823L10.593,14.823L4.011,16.714L4.011,19.275C4.011,22.916 6.962,25.857 10.593,25.857L21.407,25.857C25.048,25.857 27.989,22.906 27.989,19.275L27.989,16.714L21.417,14.823Z" style="fill:url(#_Linear3);fill-rule:nonzero;"/>
+        </g>
+        <path d="M21.417,14.287L10.593,14.287L4.011,16.177L4.011,18.738C4.011,22.38 6.962,25.321 10.593,25.321L21.407,25.321C25.048,25.321 27.989,22.37 27.989,18.738L27.989,16.177L21.417,14.287Z" style="fill:url(#_Linear4);fill-rule:nonzero;"/>
+        <path d="M21.417,9.195L10.593,9.195C6.952,9.195 4.011,12.146 4.011,15.777C4.011,19.419 6.962,22.36 10.593,22.36L21.407,22.36C25.048,22.36 27.989,19.409 27.989,15.777C27.999,12.136 25.048,9.195 21.417,9.195Z" style="fill:url(#_Linear5);fill-rule:nonzero;"/>
+        <path d="M21.417,9.195L10.593,9.195C6.952,9.195 4.011,12.146 4.011,15.777C4.011,19.419 6.962,22.36 10.593,22.36L21.407,22.36C25.048,22.36 27.989,19.409 27.989,15.777C27.999,12.136 25.048,9.195 21.417,9.195Z" style="fill:url(#_Radial6);fill-rule:nonzero;"/>
+        <path d="M21.417,9.195L10.593,9.195C6.952,9.195 4.011,12.146 4.011,15.777C4.011,19.419 6.962,22.36 10.593,22.36L21.407,22.36C25.048,22.36 27.989,19.409 27.989,15.777C27.999,12.136 25.048,9.195 21.417,9.195Z" style="fill:url(#_Radial7);fill-rule:nonzero;"/>
+        <path d="M21.417,8.515L10.593,8.515L4.011,10.416L4.011,12.977C4.011,16.618 6.962,19.559 10.593,19.559L21.407,19.559C25.048,19.559 27.989,16.608 27.989,12.977L27.989,10.416L21.417,8.515Z" style="fill:url(#_Linear8);fill-rule:nonzero;"/>
+        <path d="M21.416,3.422L10.592,3.422C6.951,3.422 4.01,6.374 4.01,10.005C4.01,13.646 6.961,16.587 10.592,16.587L21.406,16.587C25.048,16.587 27.989,13.636 27.989,10.005C27.999,6.374 25.048,3.422 21.416,3.422Z" style="fill:url(#_Linear9);fill-rule:nonzero;"/>
+        <g>
+            <path d="M18.375,3.579L10.687,3.579C7.109,3.579 4.219,6.53 4.219,10.161C4.219,13.802 7.119,16.743 10.687,16.743L18.375,16.743L18.375,3.579Z" style="fill:url(#_Linear10);fill-rule:nonzero;"/>
+            <path d="M18.375,3.579L10.687,3.579C7.109,3.579 4.219,6.53 4.219,10.161C4.219,13.802 7.119,16.743 10.687,16.743L18.375,16.743L18.375,3.579Z" style="fill:url(#_Radial11);fill-rule:nonzero;"/>
+            <path d="M18.375,3.579L10.687,3.579C7.109,3.579 4.219,6.53 4.219,10.161C4.219,13.802 7.119,16.743 10.687,16.743L18.375,16.743L18.375,3.579Z" style="fill:url(#_Radial12);fill-rule:nonzero;"/>
+        </g>
+        <path d="M19.436,6.204L12.564,6.204C10.523,6.204 8.872,7.855 8.872,9.895C8.872,11.566 9.983,12.986 11.513,13.437C11.974,13.577 12.284,14.007 12.284,14.487L12.284,20.299C12.284,21.009 12.834,21.61 13.544,21.63C14.264,21.64 14.855,21.059 14.855,20.349L14.855,14.677C14.855,14.077 15.335,13.597 15.935,13.597C16.535,13.597 17.015,14.077 17.015,14.677L17.015,16.328C17.015,17.038 17.566,17.638 18.276,17.658C18.996,17.668 19.586,17.088 19.586,16.378L19.586,14.537C19.586,14.047 19.906,13.607 20.387,13.477C21.977,13.066 23.148,11.616 23.148,9.905C23.138,7.855 21.477,6.204 19.436,6.204Z" style="fill:url(#_Radial13);fill-rule:nonzero;"/>
+        <path d="M19.436,6.204L12.564,6.204C10.523,6.204 8.872,7.855 8.872,9.895C8.872,11.566 9.983,12.986 11.513,13.437C11.974,13.577 12.284,14.007 12.284,14.487L12.284,20.299C12.284,21.009 12.834,21.61 13.544,21.63C14.264,21.64 14.855,21.059 14.855,20.349L14.855,14.677C14.855,14.077 15.335,13.597 15.935,13.597C16.535,13.597 17.015,14.077 17.015,14.677L17.015,16.328C17.015,17.038 17.566,17.638 18.276,17.658C18.996,17.668 19.586,17.088 19.586,16.378L19.586,14.537C19.586,14.047 19.906,13.607 20.387,13.477C21.977,13.066 23.148,11.616 23.148,9.905C23.138,7.855 21.477,6.204 19.436,6.204Z" style="fill:rgb(136,71,52);fill-rule:nonzero;"/>
+        <path d="M19.436,6.204L12.564,6.204C10.523,6.204 8.872,7.855 8.872,9.895C8.872,11.566 9.983,12.986 11.513,13.437C11.974,13.577 12.284,14.007 12.284,14.487L12.284,20.299C12.284,21.009 12.834,21.61 13.544,21.63C14.264,21.64 14.855,21.059 14.855,20.349L14.855,14.677C14.855,14.077 15.335,13.597 15.935,13.597C16.535,13.597 17.015,14.077 17.015,14.677L17.015,16.328C17.015,17.038 17.566,17.638 18.276,17.658C18.996,17.668 19.586,17.088 19.586,16.378L19.586,14.537C19.586,14.047 19.906,13.607 20.387,13.477C21.977,13.066 23.148,11.616 23.148,9.905C23.138,7.855 21.477,6.204 19.436,6.204Z" style="fill:url(#_Linear14);fill-rule:nonzero;"/>
+        <g>
+            <path d="M8.953,9.805C8.953,11.4 10.107,12.552 11.606,12.982C12.057,13.115 12.361,13.526 12.361,13.985L12.361,19.964C12.361,20.642 12.9,21.2 13.595,21.219C14.3,21.228 14.75,20.85 14.75,20.172L14.75,14.079C14.75,13.505 15.349,13.047 15.937,13.047C16.524,13.047 17.156,13.505 17.156,14.079L17.156,16.219C17.156,16.897 17.533,17.497 18.229,17.516C18.934,17.525 19.512,16.897 19.512,16.219L19.512,14.059C19.512,13.591 19.826,13.171 20.296,13.047C21.854,12.655 23.094,11.439 23.094,9.805C23.094,3.859 8.953,3.947 8.953,9.805Z" style="fill:url(#_Radial15);fill-rule:nonzero;"/>
+            <path d="M8.953,9.805C8.953,11.4 10.107,12.552 11.606,12.982C12.057,13.115 12.361,13.526 12.361,13.985L12.361,19.964C12.361,20.642 12.9,21.2 13.595,21.219C14.3,21.228 14.75,20.85 14.75,20.172L14.75,14.079C14.75,13.505 15.349,13.047 15.937,13.047C16.524,13.047 17.156,13.505 17.156,14.079L17.156,16.219C17.156,16.897 17.533,17.497 18.229,17.516C18.934,17.525 19.512,16.897 19.512,16.219L19.512,14.059C19.512,13.591 19.826,13.171 20.296,13.047C21.854,12.655 23.094,11.439 23.094,9.805C23.094,3.859 8.953,3.947 8.953,9.805Z" style="fill:url(#_Radial16);fill-rule:nonzero;"/>
+            <path d="M8.953,9.805C8.953,11.4 10.107,12.552 11.606,12.982C12.057,13.115 12.361,13.526 12.361,13.985L12.361,19.964C12.361,20.642 12.9,21.2 13.595,21.219C14.3,21.228 14.75,20.85 14.75,20.172L14.75,14.079C14.75,13.505 15.349,13.047 15.937,13.047C16.524,13.047 17.156,13.505 17.156,14.079L17.156,16.219C17.156,16.897 17.533,17.497 18.229,17.516C18.934,17.525 19.512,16.897 19.512,16.219L19.512,14.059C19.512,13.591 19.826,13.171 20.296,13.047C21.854,12.655 23.094,11.439 23.094,9.805C23.094,3.859 8.953,3.947 8.953,9.805Z" style="fill:url(#_Radial17);fill-rule:nonzero;"/>
+            <path d="M8.953,9.805C8.953,11.4 10.107,12.552 11.606,12.982C12.057,13.115 12.361,13.526 12.361,13.985L12.361,19.964C12.361,20.642 12.9,21.2 13.595,21.219C14.3,21.228 14.75,20.85 14.75,20.172L14.75,14.079C14.75,13.505 15.349,13.047 15.937,13.047C16.524,13.047 17.156,13.505 17.156,14.079L17.156,16.219C17.156,16.897 17.533,17.497 18.229,17.516C18.934,17.525 19.512,16.897 19.512,16.219L19.512,14.059C19.512,13.591 19.826,13.171 20.296,13.047C21.854,12.655 23.094,11.439 23.094,9.805C23.094,3.859 8.953,3.947 8.953,9.805Z" style="fill:url(#_Radial18);fill-rule:nonzero;"/>
+            <path d="M8.953,9.805C8.953,11.4 10.107,12.552 11.606,12.982C12.057,13.115 12.361,13.526 12.361,13.985L12.361,19.964C12.361,20.642 12.9,21.2 13.595,21.219C14.3,21.228 14.75,20.85 14.75,20.172L14.75,14.079C14.75,13.505 15.349,13.047 15.937,13.047C16.524,13.047 17.156,13.505 17.156,14.079L17.156,16.219C17.156,16.897 17.533,17.497 18.229,17.516C18.934,17.525 19.512,16.897 19.512,16.219L19.512,14.059C19.512,13.591 19.826,13.171 20.296,13.047C21.854,12.655 23.094,11.439 23.094,9.805C23.094,3.859 8.953,3.947 8.953,9.805Z" style="fill:url(#_Radial19);fill-rule:nonzero;"/>
+            <path d="M8.953,9.805C8.953,11.4 10.107,12.552 11.606,12.982C12.057,13.115 12.361,13.526 12.361,13.985L12.361,19.964C12.361,20.642 12.9,21.2 13.595,21.219C14.3,21.228 14.75,20.85 14.75,20.172L14.75,14.079C14.75,13.505 15.349,13.047 15.937,13.047C16.524,13.047 17.156,13.505 17.156,14.079L17.156,16.219C17.156,16.897 17.533,17.497 18.229,17.516C18.934,17.525 19.512,16.897 19.512,16.219L19.512,14.059C19.512,13.591 19.826,13.171 20.296,13.047C21.854,12.655 23.094,11.439 23.094,9.805C23.094,3.859 8.953,3.947 8.953,9.805Z" style="fill:url(#_Radial20);fill-rule:nonzero;"/>
+            <path d="M8.953,9.805C8.953,11.4 10.107,12.552 11.606,12.982C12.057,13.115 12.361,13.526 12.361,13.985L12.361,19.964C12.361,20.642 12.9,21.2 13.595,21.219C14.3,21.228 14.75,20.85 14.75,20.172L14.75,14.079C14.75,13.505 15.349,13.047 15.937,13.047C16.524,13.047 17.156,13.505 17.156,14.079L17.156,16.219C17.156,16.897 17.533,17.497 18.229,17.516C18.934,17.525 19.512,16.897 19.512,16.219L19.512,14.059C19.512,13.591 19.826,13.171 20.296,13.047C21.854,12.655 23.094,11.439 23.094,9.805C23.094,3.859 8.953,3.947 8.953,9.805Z" style="fill:url(#_Radial21);fill-rule:nonzero;"/>
+        </g>
+        <g>
+            <path d="M11.479,7.266L11.479,7.641C11.479,8.062 11.671,8.484 12.055,8.721L15.092,10.511C15.659,10.871 16.361,10.871 16.918,10.511L19.955,8.721C20.339,8.474 20.531,8.052 20.531,7.641L20.531,7.266L11.479,7.266Z" style="fill:rgb(115,57,25);fill-rule:nonzero;"/>
+        </g>
+        <path d="M17.406,5.113L16.955,4.843C16.365,4.492 15.635,4.492 15.055,4.843L14.605,5.113L11.293,5.113L11.293,7.213C11.293,7.624 11.493,8.034 11.894,8.264L15.055,10.134C15.645,10.485 16.375,10.485 16.955,10.134L20.116,8.264C20.517,8.024 20.717,7.614 20.717,7.213L20.717,5.113L17.406,5.113Z" style="fill:url(#_Linear22);fill-rule:nonzero;"/>
+        <path d="M17.406,5.113L16.955,4.843C16.365,4.492 15.635,4.492 15.055,4.843L14.605,5.113L11.293,5.113L11.293,7.213C11.293,7.624 11.493,8.034 11.894,8.264L15.055,10.134C15.645,10.485 16.375,10.485 16.955,10.134L20.116,8.264C20.517,8.024 20.717,7.614 20.717,7.213L20.717,5.113L17.406,5.113Z" style="fill:url(#_Radial23);fill-rule:nonzero;"/>
+        <path d="M15.055,2.263L11.894,4.133C11.093,4.603 11.093,5.764 11.894,6.244L15.055,8.115C15.645,8.465 16.375,8.465 16.955,8.115L20.116,6.244C20.917,5.774 20.917,4.613 20.116,4.133L16.955,2.263C16.365,1.912 15.645,1.912 15.055,2.263Z" style="fill:url(#_Linear24);fill-rule:nonzero;"/>
+        <circle cx="22.492" cy="26.922" r="1.492" style="fill:url(#_Radial25);"/>
+        <circle cx="24.52" cy="25.857" r="0.536" style="fill:url(#_Radial26);"/>
+        <g>
+            <path d="M19.516,13.375C20.234,12.75 22.984,11.922 22.75,9.375C22.125,11.156 21.731,11.677 20.125,12.031C18.922,12.297 18.844,13.234 18.844,13.719L18.953,16.766L19.281,16.766C19.369,16.237 19.18,13.667 19.516,13.375Z" style="fill:url(#_Radial27);fill-rule:nonzero;"/>
+        </g>
+        <g>
+            <path d="M13.828,17.047C13.828,17.185 13.94,17.297 14.078,17.297C14.216,17.297 14.328,17.185 14.328,17.047L13.828,17.047ZM17.283,14.283C17.283,14.421 17.395,14.533 17.533,14.533C17.671,14.533 17.783,14.421 17.783,14.283L17.283,14.283ZM14.328,17.047L14.328,14.283L13.828,14.283L13.828,17.047L14.328,17.047ZM14.328,14.283C14.328,13.975 14.487,13.586 14.769,13.271C15.048,12.958 15.418,12.75 15.813,12.75L15.813,12.25C15.238,12.25 14.741,12.551 14.396,12.938C14.052,13.322 13.828,13.825 13.828,14.283L14.328,14.283ZM15.813,12.75C16.201,12.75 16.568,12.968 16.847,13.291C17.128,13.617 17.283,14.007 17.283,14.283L17.783,14.283C17.783,13.855 17.561,13.354 17.225,12.964C16.886,12.572 16.393,12.25 15.813,12.25L15.813,12.75Z" style="fill:url(#_Linear28);fill-rule:nonzero;"/>
+        </g>
+        <g>
+            <path d="M21.359,16.438C23.75,16.438 27.094,14.859 27.75,11.453" style="fill:none;fill-rule:nonzero;stroke:url(#_Radial29);stroke-width:0.3px;"/>
+        </g>
+        <g>
+            <path d="M23.782,28.281C26,27.688 28.781,25.406 29.625,21.469" style="fill:none;fill-rule:nonzero;stroke:url(#_Radial30);stroke-width:0.3px;"/>
+        </g>
+        <g>
+            <path d="M20.695,5.273C20.695,5.555 20.506,5.938 20.156,6.188C19.806,6.438 17.74,7.563 16.594,8.219C16.345,8.361 15.773,8.453 15.258,8.094" style="fill:none;fill-rule:nonzero;stroke:url(#_Radial31);stroke-width:0.3px;"/>
+        </g>
+    </g>
+    <defs>
+        <linearGradient id="_Linear1" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(28,0,0,28,2,21.125)"><stop offset="0" style="stop-color:rgb(187,183,188);stop-opacity:1"/><stop offset="0.1" style="stop-color:rgb(173,149,194);stop-opacity:1"/><stop offset="0.23" style="stop-color:rgb(195,160,226);stop-opacity:1"/><stop offset="0.8" style="stop-color:rgb(201,166,231);stop-opacity:1"/><stop offset="1" style="stop-color:rgb(216,208,223);stop-opacity:1"/></linearGradient>
+        <linearGradient id="_Linear2" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(27.3125,0,0,27.3125,2.8125,20.125)"><stop offset="0" style="stop-color:rgb(190,180,182);stop-opacity:1"/><stop offset="0.16" style="stop-color:rgb(219,206,213);stop-opacity:1"/><stop offset="0.49" style="stop-color:rgb(223,205,210);stop-opacity:1"/><stop offset="0.82" style="stop-color:rgb(223,209,214);stop-opacity:1"/><stop offset="1" style="stop-color:rgb(227,216,205);stop-opacity:1"/></linearGradient>
+        <linearGradient id="_Linear3" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(7.18837e-16,11.7395,-11.7395,7.18837e-16,16,14.823)"><stop offset="0" style="stop-color:rgb(180,157,159);stop-opacity:1"/><stop offset="0.89" style="stop-color:rgb(180,157,159);stop-opacity:1"/><stop offset="1" style="stop-color:rgb(180,157,159);stop-opacity:0"/></linearGradient>
+        <linearGradient id="_Linear4" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(23.9786,0,0,23.9786,4.01074,19.1875)"><stop offset="0" style="stop-color:rgb(184,140,67);stop-opacity:1"/><stop offset="0.16" style="stop-color:rgb(198,144,57);stop-opacity:1"/><stop offset="0.33" style="stop-color:rgb(217,159,63);stop-opacity:1"/><stop offset="0.76" style="stop-color:rgb(217,167,52);stop-opacity:1"/><stop offset="1" style="stop-color:rgb(236,211,76);stop-opacity:1"/></linearGradient>
+        <linearGradient id="_Linear5" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(23.4268,0,0,23.4268,4.5625,17.875)"><stop offset="0" style="stop-color:rgb(169,110,68);stop-opacity:1"/><stop offset="0.15" style="stop-color:rgb(184,120,76);stop-opacity:1"/><stop offset="0.34" style="stop-color:rgb(186,119,75);stop-opacity:1"/><stop offset="0.59" style="stop-color:rgb(214,140,86);stop-opacity:1"/><stop offset="0.82" style="stop-color:rgb(227,152,93);stop-opacity:1"/><stop offset="1" style="stop-color:rgb(234,173,116);stop-opacity:1"/></linearGradient>
+        <radialGradient id="_Radial6" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="matrix(-2.04736e-15,5.34759,-13.25,-5.07285e-15,16,15.7774)"><stop offset="0" style="stop-color:rgb(153,81,44);stop-opacity:1"/><stop offset="0.66" style="stop-color:rgb(153,81,44);stop-opacity:1"/><stop offset="1" style="stop-color:rgb(166,87,47);stop-opacity:0"/></radialGradient>
+        <radialGradient id="_Radial7" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="matrix(2.875,0,0,2.85976,12.25,19.5)"><stop offset="0" style="stop-color:rgb(147,74,40);stop-opacity:1"/><stop offset="1" style="stop-color:rgb(147,74,40);stop-opacity:0"/></radialGradient>
+        <linearGradient id="_Linear8" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(23.4268,0,0,23.4268,4.5625,13.625)"><stop offset="0" style="stop-color:rgb(178,140,76);stop-opacity:1"/><stop offset="0.13" style="stop-color:rgb(185,127,51);stop-opacity:1"/><stop offset="0.28" style="stop-color:rgb(189,118,40);stop-opacity:1"/><stop offset="0.49" style="stop-color:rgb(195,124,40);stop-opacity:1"/><stop offset="0.59" style="stop-color:rgb(208,135,38);stop-opacity:1"/><stop offset="0.7" style="stop-color:rgb(214,146,45);stop-opacity:1"/><stop offset="0.82" style="stop-color:rgb(222,169,51);stop-opacity:1"/><stop offset="1" style="stop-color:rgb(229,206,83);stop-opacity:1"/></linearGradient>
+        <linearGradient id="_Linear9" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(23.3636,0,0,23.3636,4.625,8.8125)"><stop offset="0" style="stop-color:rgb(204,162,117);stop-opacity:1"/><stop offset="0.14" style="stop-color:rgb(214,168,122);stop-opacity:1"/><stop offset="0.72" style="stop-color:rgb(225,177,124);stop-opacity:1"/><stop offset="1" style="stop-color:rgb(230,178,125);stop-opacity:1"/></linearGradient>
+        <linearGradient id="_Linear10" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(19.3405,0,0,19.3405,7.22204,7.96546)"><stop offset="0" style="stop-color:rgb(212,167,120);stop-opacity:1"/><stop offset="0.06" style="stop-color:rgb(212,167,120);stop-opacity:1"/><stop offset="1" style="stop-color:rgb(231,178,125);stop-opacity:1"/></linearGradient>
+        <radialGradient id="_Radial11" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="matrix(4.5,4.3125,-3.88579,4.05475,9.875,9.8125)"><stop offset="0" style="stop-color:rgb(179,130,88);stop-opacity:1"/><stop offset="0.77" style="stop-color:rgb(187,143,101);stop-opacity:0"/><stop offset="1" style="stop-color:rgb(187,143,101);stop-opacity:0"/></radialGradient>
+        <radialGradient id="_Radial12" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="matrix(2.375,0,0,4.25084,12.8125,15.4375)"><stop offset="0" style="stop-color:rgb(175,119,78);stop-opacity:1"/><stop offset="1" style="stop-color:rgb(175,119,78);stop-opacity:0"/></radialGradient>
+        <radialGradient id="_Radial13" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="matrix(-12.4374,5.12507,-4.74283,-11.5098,20.5,10.0625)"><stop offset="0" style="stop-color:rgb(157,98,60);stop-opacity:1"/><stop offset="0.03" style="stop-color:rgb(157,98,60);stop-opacity:1"/><stop offset="1" style="stop-color:rgb(130,82,62);stop-opacity:1"/></radialGradient>
+        <linearGradient id="_Linear14" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(13.5225,0,0,13.5225,9.625,11.875)"><stop offset="0" style="stop-color:rgb(128,75,51);stop-opacity:1"/><stop offset="1" style="stop-color:rgb(159,94,62);stop-opacity:1"/></linearGradient>
+        <radialGradient id="_Radial15" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="matrix(-12.1805,4.89355,-4.44716,-11.0694,20.4072,9.95537)"><stop offset="0" style="stop-color:rgb(157,98,60);stop-opacity:1"/><stop offset="0.03" style="stop-color:rgb(157,98,60);stop-opacity:1"/><stop offset="1" style="stop-color:rgb(130,82,62);stop-opacity:1"/></radialGradient>
+        <radialGradient id="_Radial16" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="matrix(3.45827,1.87983,-1.00439,1.84774,13.6437,9.00053)"><stop offset="0" style="stop-color:rgb(118,67,38);stop-opacity:1"/><stop offset="1" style="stop-color:rgb(115,62,33);stop-opacity:0"/></radialGradient>
+        <radialGradient id="_Radial17" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="matrix(-3.62501,4.18749,-4.06664,-3.5204,10.75,6.75)"><stop offset="0" style="stop-color:rgb(114,77,61);stop-opacity:1"/><stop offset="1" style="stop-color:rgb(114,76,59);stop-opacity:0"/></radialGradient>
+        <radialGradient id="_Radial18" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="matrix(-2.37499,-0.625018,0.413551,-1.57144,18.6563,17.6875)"><stop offset="0" style="stop-color:rgb(138,70,84);stop-opacity:1"/><stop offset="1" style="stop-color:rgb(140,71,86);stop-opacity:0"/></radialGradient>
+        <radialGradient id="_Radial19" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="matrix(-1.29214e-15,-3.375,1.27037,-4.8637e-16,13.1562,19.875)"><stop offset="0" style="stop-color:rgb(136,75,79);stop-opacity:1"/><stop offset="1" style="stop-color:rgb(134,68,83);stop-opacity:0"/></radialGradient>
+        <radialGradient id="_Radial20" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="matrix(-0.1875,1.09374,-0.673499,-0.115457,13.9063,16.0625)"><stop offset="0" style="stop-color:rgb(163,118,101);stop-opacity:1"/><stop offset="1" style="stop-color:rgb(165,120,103);stop-opacity:0"/></radialGradient>
+        <radialGradient id="_Radial21" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="matrix(-0.281246,0.937501,-0.651233,-0.195367,18.8906,15.7344)"><stop offset="0" style="stop-color:rgb(166,121,104);stop-opacity:1"/><stop offset="1" style="stop-color:rgb(168,123,104);stop-opacity:0"/></radialGradient>
+        <linearGradient id="_Linear22" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(9.2792,0,0,9.2792,11.4375,7.48849)"><stop offset="0" style="stop-color:rgb(199,162,43);stop-opacity:1"/><stop offset="1" style="stop-color:rgb(232,193,46);stop-opacity:1"/></linearGradient>
+        <radialGradient id="_Radial23" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="matrix(-1.14857e-15,3,-3.44251,-1.31799e-15,16.005,10.9375)"><stop offset="0" style="stop-color:rgb(219,165,41);stop-opacity:1"/><stop offset="1" style="stop-color:rgb(217,163,43);stop-opacity:0"/></radialGradient>
+        <linearGradient id="_Linear24" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(3.1641,5.02344,-5.02344,3.1641,14.3984,2.60156)"><stop offset="0" style="stop-color:rgb(207,186,58);stop-opacity:1"/><stop offset="0.01" style="stop-color:rgb(207,186,58);stop-opacity:1"/><stop offset="0.09" style="stop-color:rgb(213,193,55);stop-opacity:1"/><stop offset="0.93" style="stop-color:rgb(231,206,55);stop-opacity:1"/><stop offset="1" style="stop-color:rgb(231,206,55);stop-opacity:1"/></linearGradient>
+        <radialGradient id="_Radial25" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="matrix(-2.98437,2.28517e-15,-2.16435e-15,-2.82658,23.5774,26.9224)"><stop offset="0" style="stop-color:rgb(160,103,64);stop-opacity:1"/><stop offset="0.71" style="stop-color:rgb(142,81,46);stop-opacity:1"/><stop offset="1" style="stop-color:rgb(142,81,46);stop-opacity:1"/></radialGradient>
+        <radialGradient id="_Radial26" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="matrix(-1.07227,8.21052e-16,-7.77636e-16,-1.01557,24.9104,25.8569)"><stop offset="0" style="stop-color:rgb(160,103,64);stop-opacity:1"/><stop offset="0.71" style="stop-color:rgb(142,81,46);stop-opacity:1"/><stop offset="1" style="stop-color:rgb(142,81,46);stop-opacity:1"/></radialGradient>
+        <radialGradient id="_Radial27" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="matrix(-2.98808e-15,7.80469,-4.14003,-1.58504e-15,20.8039,13.0703)"><stop offset="0" style="stop-color:rgb(173,124,104);stop-opacity:1"/><stop offset="1" style="stop-color:rgb(172,123,101);stop-opacity:0"/></radialGradient>
+        <linearGradient id="_Linear28" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(3.7188,0,0,3.7188,14.0312,13.5027)"><stop offset="0" style="stop-color:rgb(162,119,100);stop-opacity:1"/><stop offset="0.46" style="stop-color:rgb(156,111,94);stop-opacity:1"/><stop offset="0.62" style="stop-color:rgb(111,63,46);stop-opacity:1"/><stop offset="1" style="stop-color:rgb(111,63,46);stop-opacity:1"/></linearGradient>
+        <radialGradient id="_Radial29" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="matrix(2.53125,-2.40625,1.27457,1.34078,25.7188,14.5)"><stop offset="0" style="stop-color:rgb(239,185,146);stop-opacity:1"/><stop offset="0.45" style="stop-color:rgb(241,189,146);stop-opacity:1"/><stop offset="0.99" style="stop-color:rgb(240,188,143);stop-opacity:0"/><stop offset="1" style="stop-color:rgb(240,188,143);stop-opacity:0"/></radialGradient>
+        <radialGradient id="_Radial30" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="matrix(3.50413,-4.40625,2.33395,1.8561,26.9687,25.875)"><stop offset="0" style="stop-color:rgb(235,225,240);stop-opacity:1"/><stop offset="0.45" style="stop-color:rgb(235,226,240);stop-opacity:1"/><stop offset="0.99" style="stop-color:rgb(232,223,236);stop-opacity:0"/><stop offset="1" style="stop-color:rgb(232,223,236);stop-opacity:0"/></radialGradient>
+        <radialGradient id="_Radial31" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="matrix(2.88719,-1.6592,0.823999,1.43385,18.1875,7.3125)"><stop offset="0" style="stop-color:rgb(240,209,81);stop-opacity:1"/><stop offset="0.45" style="stop-color:rgb(242,211,89);stop-opacity:1"/><stop offset="0.99" style="stop-color:rgb(243,211,87);stop-opacity:0"/><stop offset="1" style="stop-color:rgb(243,211,87);stop-opacity:0"/></radialGradient>
+    </defs>
+</svg>

packages/frontend/assets/drop-and-fusion/sweets_monos/shaved_ice_color.svg

@@ -0,0 +1,161 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M16 22C21.5228 22 26 17.5228 26 12C26 6.47715 21.5228 2 16 2C10.4772 2 6 6.47715 6 12C6 17.5228 10.4772 22 16 22Z" fill="#CDA3AF"/>
+<path d="M16 22C21.5228 22 26 17.5228 26 12C26 6.47715 21.5228 2 16 2C10.4772 2 6 6.47715 6 12C6 17.5228 10.4772 22 16 22Z" fill="url(#paint0_radial_18_28637)"/>
+<g filter="url(#filter0_f_18_28637)">
+<path d="M8.80999 13.595C9.03999 12.855 9.72999 12.375 10.49 12.375C11.25 12.375 12.3325 12.865 12.5625 13.585C13.0725 15.205 14.19 15.7188 15.98 15.7188C17.77 15.7188 18.9275 15.205 19.4375 13.595C19.6675 12.865 20.71 12.385 21.47 12.385H21.51C22.27 12.385 23.2387 12.4987 23.4688 13.2188C23.8088 14.2888 24.0838 14.6337 25.0938 15.0938C23.5238 2.90129 7.99999 6.46882 8.80999 13.595Z" fill="#E17CA3"/>
+<path d="M8.80999 13.595C9.03999 12.855 9.72999 12.375 10.49 12.375C11.25 12.375 12.3325 12.865 12.5625 13.585C13.0725 15.205 14.19 15.7188 15.98 15.7188C17.77 15.7188 18.9275 15.205 19.4375 13.595C19.6675 12.865 20.71 12.385 21.47 12.385H21.51C22.27 12.385 23.2387 12.4987 23.4688 13.2188C23.8088 14.2888 24.0838 14.6337 25.0938 15.0938C23.5238 2.90129 7.99999 6.46882 8.80999 13.595Z" fill="url(#paint1_radial_18_28637)"/>
+<path d="M8.80999 13.595C9.03999 12.855 9.72999 12.375 10.49 12.375C11.25 12.375 12.3325 12.865 12.5625 13.585C13.0725 15.205 14.19 15.7188 15.98 15.7188C17.77 15.7188 18.9275 15.205 19.4375 13.595C19.6675 12.865 20.71 12.385 21.47 12.385H21.51C22.27 12.385 23.2387 12.4987 23.4688 13.2188C23.8088 14.2888 24.0838 14.6337 25.0938 15.0938C23.5238 2.90129 7.99999 6.46882 8.80999 13.595Z" fill="url(#paint2_linear_18_28637)"/>
+<path d="M8.80999 13.595C9.03999 12.855 9.72999 12.375 10.49 12.375C11.25 12.375 12.3325 12.865 12.5625 13.585C13.0725 15.205 14.19 15.7188 15.98 15.7188C17.77 15.7188 18.9275 15.205 19.4375 13.595C19.6675 12.865 20.71 12.385 21.47 12.385H21.51C22.27 12.385 23.2387 12.4987 23.4688 13.2188C23.8088 14.2888 24.0838 14.6337 25.0938 15.0938C23.5238 2.90129 7.99999 6.46882 8.80999 13.595Z" fill="url(#paint3_radial_18_28637)"/>
+<path d="M8.80999 13.595C9.03999 12.855 9.72999 12.375 10.49 12.375C11.25 12.375 12.3325 12.865 12.5625 13.585C13.0725 15.205 14.19 15.7188 15.98 15.7188C17.77 15.7188 18.9275 15.205 19.4375 13.595C19.6675 12.865 20.71 12.385 21.47 12.385H21.51C22.27 12.385 23.2387 12.4987 23.4688 13.2188C23.8088 14.2888 24.0838 14.6337 25.0938 15.0938C23.5238 2.90129 7.99999 6.46882 8.80999 13.595Z" fill="url(#paint4_radial_18_28637)"/>
+<path d="M8.80999 13.595C9.03999 12.855 9.72999 12.375 10.49 12.375C11.25 12.375 12.3325 12.865 12.5625 13.585C13.0725 15.205 14.19 15.7188 15.98 15.7188C17.77 15.7188 18.9275 15.205 19.4375 13.595C19.6675 12.865 20.71 12.385 21.47 12.385H21.51C22.27 12.385 23.2387 12.4987 23.4688 13.2188C23.8088 14.2888 24.0838 14.6337 25.0938 15.0938C23.5238 2.90129 7.99999 6.46882 8.80999 13.595Z" fill="url(#paint5_linear_18_28637)"/>
+</g>
+<path d="M16 2C10.48 2 6 6.48 6 12C6 13.28 6.24 14.5 6.68 15.63C7.69 15.16 8.47 14.29 8.81 13.22C9.04 12.48 9.73 12 10.49 12C11.25 12 11.94 12.49 12.17 13.21C12.68 14.83 14.19 16 15.98 16C17.77 16 19.28 14.83 19.79 13.22C20.02 12.49 20.71 12.01 21.47 12.01H21.51C22.27 12.01 22.96 12.5 23.19 13.22C23.53 14.29 24.31 15.17 25.32 15.63C25.76 14.5 26 13.28 26 12C25.99 6.48 21.52 2 16 2Z" fill="#E17CA3"/>
+<path d="M16 2C10.48 2 6 6.48 6 12C6 13.28 6.24 14.5 6.68 15.63C7.69 15.16 8.47 14.29 8.81 13.22C9.04 12.48 9.73 12 10.49 12C11.25 12 11.94 12.49 12.17 13.21C12.68 14.83 14.19 16 15.98 16C17.77 16 19.28 14.83 19.79 13.22C20.02 12.49 20.71 12.01 21.47 12.01H21.51C22.27 12.01 22.96 12.5 23.19 13.22C23.53 14.29 24.31 15.17 25.32 15.63C25.76 14.5 26 13.28 26 12C25.99 6.48 21.52 2 16 2Z" fill="url(#paint6_radial_18_28637)"/>
+<path d="M16 2C10.48 2 6 6.48 6 12C6 13.28 6.24 14.5 6.68 15.63C7.69 15.16 8.47 14.29 8.81 13.22C9.04 12.48 9.73 12 10.49 12C11.25 12 11.94 12.49 12.17 13.21C12.68 14.83 14.19 16 15.98 16C17.77 16 19.28 14.83 19.79 13.22C20.02 12.49 20.71 12.01 21.47 12.01H21.51C22.27 12.01 22.96 12.5 23.19 13.22C23.53 14.29 24.31 15.17 25.32 15.63C25.76 14.5 26 13.28 26 12C25.99 6.48 21.52 2 16 2Z" fill="url(#paint7_linear_18_28637)"/>
+<path d="M16 2C10.48 2 6 6.48 6 12C6 13.28 6.24 14.5 6.68 15.63C7.69 15.16 8.47 14.29 8.81 13.22C9.04 12.48 9.73 12 10.49 12C11.25 12 11.94 12.49 12.17 13.21C12.68 14.83 14.19 16 15.98 16C17.77 16 19.28 14.83 19.79 13.22C20.02 12.49 20.71 12.01 21.47 12.01H21.51C22.27 12.01 22.96 12.5 23.19 13.22C23.53 14.29 24.31 15.17 25.32 15.63C25.76 14.5 26 13.28 26 12C25.99 6.48 21.52 2 16 2Z" fill="url(#paint8_radial_18_28637)"/>
+<path d="M16 2C10.48 2 6 6.48 6 12C6 13.28 6.24 14.5 6.68 15.63C7.69 15.16 8.47 14.29 8.81 13.22C9.04 12.48 9.73 12 10.49 12C11.25 12 11.94 12.49 12.17 13.21C12.68 14.83 14.19 16 15.98 16C17.77 16 19.28 14.83 19.79 13.22C20.02 12.49 20.71 12.01 21.47 12.01H21.51C22.27 12.01 22.96 12.5 23.19 13.22C23.53 14.29 24.31 15.17 25.32 15.63C25.76 14.5 26 13.28 26 12C25.99 6.48 21.52 2 16 2Z" fill="url(#paint9_radial_18_28637)"/>
+<path d="M16 2C10.48 2 6 6.48 6 12C6 13.28 6.24 14.5 6.68 15.63C7.69 15.16 8.47 14.29 8.81 13.22C9.04 12.48 9.73 12 10.49 12C11.25 12 11.94 12.49 12.17 13.21C12.68 14.83 14.19 16 15.98 16C17.77 16 19.28 14.83 19.79 13.22C20.02 12.49 20.71 12.01 21.47 12.01H21.51C22.27 12.01 22.96 12.5 23.19 13.22C23.53 14.29 24.31 15.17 25.32 15.63C25.76 14.5 26 13.28 26 12C25.99 6.48 21.52 2 16 2Z" fill="url(#paint10_radial_18_28637)"/>
+<path d="M25.1 8C25.76 8 26.19 8.69 25.9 9.28L21.65 18H19.67L24.3 8.5C24.45 8.19 24.77 8 25.1 8Z" fill="url(#paint11_linear_18_28637)"/>
+<g filter="url(#filter1_f_18_28637)">
+<path d="M20.5625 18.4688L25.2812 8.90625" stroke="url(#paint12_linear_18_28637)" stroke-width="0.75" stroke-linecap="round"/>
+</g>
+<path d="M8 18L15.41 29.68C15.68 30.11 16.32 30.11 16.59 29.68L24 18H8Z" fill="url(#paint13_radial_18_28637)"/>
+<path d="M8 18L15.41 29.68C15.68 30.11 16.32 30.11 16.59 29.68L24 18H8Z" fill="url(#paint14_linear_18_28637)"/>
+<g filter="url(#filter2_f_18_28637)">
+<path d="M13.2962 6.15625C13.591 6.15625 13.83 5.97477 13.83 5.67999C13.83 5.38521 13.591 5.07812 13.2962 5.07812C13.0015 5.07812 12.4219 5.59584 12.4219 5.89062C12.4219 6.18541 13.0015 6.15625 13.2962 6.15625Z" fill="url(#paint15_radial_18_28637)"/>
+</g>
+<g filter="url(#filter3_f_18_28637)">
+<path d="M11.2962 7.23523C11.591 7.23523 11.83 7.05375 11.83 6.75897C11.83 6.46419 11.591 6.1571 11.2962 6.1571C11.0015 6.1571 10.4219 6.67482 10.4219 6.9696C10.4219 7.26438 11.0015 7.23523 11.2962 7.23523Z" fill="url(#paint16_radial_18_28637)"/>
+</g>
+<g filter="url(#filter4_f_18_28637)">
+<path d="M13.2962 8.2179C13.591 8.2179 13.83 8.03641 13.83 7.74163C13.83 7.44685 13.591 7.13977 13.2962 7.13977C13.0015 7.13977 12.4219 7.65749 12.4219 7.95227C12.4219 8.24705 13.0015 8.2179 13.2962 8.2179Z" fill="url(#paint17_radial_18_28637)"/>
+</g>
+<path d="M13.4837 6.05748C13.7785 6.05748 14.0175 5.81852 14.0175 5.52374C14.0175 5.22896 13.7785 4.98999 13.4837 4.98999C13.189 4.98999 12.95 5.22896 12.95 5.52374C12.95 5.81852 13.189 6.05748 13.4837 6.05748Z" fill="url(#paint18_radial_18_28637)"/>
+<path d="M11.4994 7.04186C11.7941 7.04186 12.0331 6.80289 12.0331 6.50811C12.0331 6.21333 11.7941 5.97437 11.4994 5.97437C11.2046 5.97437 10.9656 6.21333 10.9656 6.50811C10.9656 6.80289 11.2046 7.04186 11.4994 7.04186Z" fill="#E5D6EB"/>
+<path d="M11.4994 7.04186C11.7941 7.04186 12.0331 6.80289 12.0331 6.50811C12.0331 6.21333 11.7941 5.97437 11.4994 5.97437C11.2046 5.97437 10.9656 6.21333 10.9656 6.50811C10.9656 6.80289 11.2046 7.04186 11.4994 7.04186Z" fill="url(#paint19_radial_18_28637)"/>
+<path d="M13.4837 8.10936C13.7785 8.10936 14.0175 7.8704 14.0175 7.57562C14.0175 7.28084 13.7785 7.04187 13.4837 7.04187C13.189 7.04187 12.95 7.28084 12.95 7.57562C12.95 7.8704 13.189 8.10936 13.4837 8.10936Z" fill="url(#paint20_radial_18_28637)"/>
+<g filter="url(#filter5_f_18_28637)">
+<ellipse cx="25.4492" cy="8.65625" rx="0.324167" ry="0.34375" fill="#74D8FF"/>
+</g>
+<defs>
+<filter id="filter0_f_18_28637" x="7.77939" y="6.07935" width="18.3144" height="10.6394" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="0.5" result="effect1_foregroundBlur_18_28637"/>
+</filter>
+<filter id="filter1_f_18_28637" x="19.4374" y="7.78113" width="6.9689" height="11.8127" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="0.375" result="effect1_foregroundBlur_18_28637"/>
+</filter>
+<filter id="filter2_f_18_28637" x="12.1719" y="4.82812" width="1.90811" height="1.57898" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="0.125" result="effect1_foregroundBlur_18_28637"/>
+</filter>
+<filter id="filter3_f_18_28637" x="10.1719" y="5.9071" width="1.90811" height="1.57898" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="0.125" result="effect1_foregroundBlur_18_28637"/>
+</filter>
+<filter id="filter4_f_18_28637" x="12.1719" y="6.88977" width="1.90811" height="1.57898" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="0.125" result="effect1_foregroundBlur_18_28637"/>
+</filter>
+<filter id="filter5_f_18_28637" x="24.625" y="7.8125" width="1.64833" height="1.6875" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="0.25" result="effect1_foregroundBlur_18_28637"/>
+</filter>
+<radialGradient id="paint0_radial_18_28637" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(21 12) rotate(119.358) scale(11.4735)">
+<stop stop-color="#FFEDE4"/>
+<stop offset="0.451632" stop-color="#FFDBDF"/>
+<stop offset="1" stop-color="#D8AEBD" stop-opacity="0"/>
+</radialGradient>
+<radialGradient id="paint1_radial_18_28637" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(21 7.75) rotate(129.523) scale(12.9639 14.3163)">
+<stop stop-color="#FFBAEA"/>
+<stop offset="0.451156" stop-color="#FF97E4"/>
+<stop offset="1" stop-color="#FF83E1" stop-opacity="0"/>
+</radialGradient>
+<linearGradient id="paint2_linear_18_28637" x1="16" y1="2.375" x2="10" y2="17.125" gradientUnits="userSpaceOnUse">
+<stop offset="0.399003" stop-color="#FF80E1" stop-opacity="0"/>
+<stop offset="0.953305" stop-color="#E153BB"/>
+</linearGradient>
+<radialGradient id="paint3_radial_18_28637" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(25.25 14.5) rotate(140.793) scale(6.1301 2.87771)">
+<stop stop-color="#FF74DE"/>
+<stop offset="1" stop-color="#FF73DB" stop-opacity="0"/>
+</radialGradient>
+<radialGradient id="paint4_radial_18_28637" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(10.5 16.375) scale(5.5 8.8125)">
+<stop offset="0.465909" stop-color="#DB62C1"/>
+<stop offset="0.545455" stop-color="#DE60C3" stop-opacity="0"/>
+</radialGradient>
+<linearGradient id="paint5_linear_18_28637" x1="22" y1="13.1875" x2="8.77939" y2="13.1875" gradientUnits="userSpaceOnUse">
+<stop stop-color="#E9B4AF"/>
+<stop offset="0.888764" stop-color="#C9939B"/>
+</linearGradient>
+<radialGradient id="paint6_radial_18_28637" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(21 7.375) rotate(129.523) scale(12.9639 14.3163)">
+<stop stop-color="#FFBAEA"/>
+<stop offset="0.451156" stop-color="#FF97E4"/>
+<stop offset="1" stop-color="#FF83E1" stop-opacity="0"/>
+</radialGradient>
+<linearGradient id="paint7_linear_18_28637" x1="16" y1="2" x2="10" y2="16.75" gradientUnits="userSpaceOnUse">
+<stop offset="0.399003" stop-color="#FF80E1" stop-opacity="0"/>
+<stop offset="0.953305" stop-color="#E153BB"/>
+</linearGradient>
+<radialGradient id="paint8_radial_18_28637" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(25.25 14.125) rotate(140.793) scale(6.1301 2.87771)">
+<stop stop-color="#FF74DE"/>
+<stop offset="1" stop-color="#FF73DB" stop-opacity="0"/>
+</radialGradient>
+<radialGradient id="paint9_radial_18_28637" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(10.5 16) scale(5.5 8.8125)">
+<stop offset="0.465909" stop-color="#DB62C1"/>
+<stop offset="0.545455" stop-color="#DE60C3" stop-opacity="0"/>
+</radialGradient>
+<radialGradient id="paint10_radial_18_28637" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(21.6875 15.5625) scale(4.9375 8.07417)">
+<stop offset="0.414524" stop-color="#FF67CC"/>
+<stop offset="0.50886" stop-color="#DE60C3" stop-opacity="0"/>
+</radialGradient>
+<linearGradient id="paint11_linear_18_28637" x1="20.0625" y1="18" x2="24.875" y2="8" gradientUnits="userSpaceOnUse">
+<stop stop-color="#2E9CF8"/>
+<stop offset="1" stop-color="#42B6F8"/>
+</linearGradient>
+<linearGradient id="paint12_linear_18_28637" x1="25.1875" y1="9.4375" x2="20.4063" y2="18.5" gradientUnits="userSpaceOnUse">
+<stop stop-color="#5AC6FF"/>
+<stop offset="1" stop-color="#3FACFF"/>
+</linearGradient>
+<radialGradient id="paint13_radial_18_28637" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(10.875 25.25) rotate(-31.6755) scale(13.8067 26.8563)">
+<stop offset="0.137131" stop-color="#518EF4"/>
+<stop offset="0.415574" stop-color="#60BCFF"/>
+<stop offset="0.680287" stop-color="#62D2FF"/>
+<stop offset="1" stop-color="#5FD4FF"/>
+</radialGradient>
+<linearGradient id="paint14_linear_18_28637" x1="20.8125" y1="23.3125" x2="19.875" y2="22.6875" gradientUnits="userSpaceOnUse">
+<stop offset="0.138462" stop-color="#64BDFF"/>
+<stop offset="1" stop-color="#64B6FF" stop-opacity="0"/>
+</linearGradient>
+<radialGradient id="paint15_radial_18_28637" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(13.2031 5.61759) rotate(153.418) scale(1.20556 1.11753)">
+<stop stop-color="#CD7BA2"/>
+<stop offset="1" stop-color="#CD7BA2" stop-opacity="0"/>
+</radialGradient>
+<radialGradient id="paint16_radial_18_28637" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(11.2031 6.69656) rotate(153.418) scale(1.20556 1.11753)">
+<stop stop-color="#CD7BA2"/>
+<stop offset="1" stop-color="#CD7BA2" stop-opacity="0"/>
+</radialGradient>
+<radialGradient id="paint17_radial_18_28637" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(13.2031 7.67923) rotate(153.418) scale(1.20556 1.11753)">
+<stop offset="0.0843161" stop-color="#CB71AE"/>
+<stop offset="1" stop-color="#CD7BA2" stop-opacity="0"/>
+</radialGradient>
+<radialGradient id="paint18_radial_18_28637" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(13.7188 5.29688) rotate(123.32) scale(0.910235)">
+<stop offset="0.159787" stop-color="#FBEDFD"/>
+<stop offset="0.854934" stop-color="#E2C9E5"/>
+</radialGradient>
+<radialGradient id="paint19_radial_18_28637" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(11.7344 6.28125) rotate(123.32) scale(0.910235)">
+<stop offset="0.159787" stop-color="#FBEDFD"/>
+<stop offset="0.854934" stop-color="#E2C9E5"/>
+</radialGradient>
+<radialGradient id="paint20_radial_18_28637" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(13.7188 7.34875) rotate(123.32) scale(0.910235)">
+<stop offset="0.159787" stop-color="#FBEDFD"/>
+<stop offset="0.854934" stop-color="#E2C9E5"/>
+</radialGradient>
+</defs>
+</svg>

packages/frontend/assets/drop-and-fusion/sweets_monos/shortcake_color.svg

@@ -0,0 +1,48 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="32px" height="32px" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
+    <g transform="matrix(1,0,0,1,0,0.528489)">
+        <path d="M3.627,29.819L28.256,22.752L29.044,22.028L29.044,7.978L28.022,5.999L2.073,13.343L2.073,28.287C2.073,29.512 2.568,30.072 3.627,29.819Z" style="fill:url(#_Linear1);fill-rule:nonzero;"/>
+        <path d="M3.627,29.819L28.256,22.752L29.044,22.028L29.044,7.978L28.022,5.999L2.073,13.343L2.073,28.287C2.073,29.512 2.568,30.072 3.627,29.819Z" style="fill:url(#_Linear2);fill-rule:nonzero;"/>
+        <path d="M3.627,29.819L28.256,22.752L29.044,22.028L29.044,7.978L28.022,5.999L2.073,13.343L2.073,28.287C2.073,29.512 2.568,30.072 3.627,29.819Z" style="fill:url(#_Linear3);fill-rule:nonzero;"/>
+        <path d="M3.627,29.819L28.256,22.752L29.044,22.028L29.044,7.978L28.022,5.999L2.073,13.343L2.073,28.287C2.073,29.512 2.568,30.072 3.627,29.819Z" style="fill:url(#_Linear4);fill-rule:nonzero;"/>
+        <path d="M3.627,29.819L28.256,22.752L29.044,22.028L29.044,7.978L28.022,5.999L2.073,13.343L2.073,28.287C2.073,29.512 2.568,30.072 3.627,29.819Z" style="fill:url(#_Linear5);fill-rule:nonzero;"/>
+        <path d="M13.034,2.508L3.064,11.731C1.118,13.393 2.129,14.542 3.998,14.13L27.024,7.524C27.616,7.383 27.99,7.338 27.99,8.023L27.99,12.042C27.99,12.73 28.054,13.088 27.616,13.226C27.616,13.226 5.411,19.92 4.933,20.05C4.455,20.18 3.393,20.378 3.064,20.33C2.734,20.282 2.316,20.05 2.129,20.05C1.942,20.05 1.942,20.158 1.942,20.673L1.942,22.84C1.942,23.003 2.083,23.108 2.083,23.108C2.61,23.445 3.335,23.59 3.998,23.415L27.243,16.685C27.616,16.591 27.99,16.841 27.99,17.308L27.99,22.606C27.99,22.928 28.185,22.945 28.322,22.928C29.314,22.642 30,22.055 30,21.047L30,8.023C30,7.17 29.383,5.745 27.99,5.312L16.96,2.726C15.913,2.508 13.888,1.847 13.034,2.508Z" style="fill:url(#_Linear6);fill-rule:nonzero;"/>
+        <path d="M13.034,2.508L3.064,11.731C1.118,13.393 2.129,14.542 3.998,14.13L27.024,7.524C27.616,7.383 27.99,7.338 27.99,8.023L27.99,12.042C27.99,12.73 28.054,13.088 27.616,13.226C27.616,13.226 5.411,19.92 4.933,20.05C4.455,20.18 3.393,20.378 3.064,20.33C2.734,20.282 2.316,20.05 2.129,20.05C1.942,20.05 1.942,20.158 1.942,20.673L1.942,22.84C1.942,23.003 2.083,23.108 2.083,23.108C2.61,23.445 3.335,23.59 3.998,23.415L27.243,16.685C27.616,16.591 27.99,16.841 27.99,17.308L27.99,22.606C27.99,22.928 28.185,22.945 28.322,22.928C29.314,22.642 30,22.055 30,21.047L30,8.023C30,7.17 29.383,5.745 27.99,5.312L16.96,2.726C15.913,2.508 13.888,1.847 13.034,2.508Z" style="fill:url(#_Linear7);fill-rule:nonzero;"/>
+        <path d="M13.034,2.508L3.064,11.731C1.118,13.393 2.129,14.542 3.998,14.13L27.024,7.524C27.616,7.383 27.99,7.338 27.99,8.023L27.99,12.042C27.99,12.73 28.054,13.088 27.616,13.226C27.616,13.226 5.411,19.92 4.933,20.05C4.455,20.18 3.393,20.378 3.064,20.33C2.734,20.282 2.316,20.05 2.129,20.05C1.942,20.05 1.942,20.158 1.942,20.673L1.942,22.84C1.942,23.003 2.083,23.108 2.083,23.108C2.61,23.445 3.335,23.59 3.998,23.415L27.243,16.685C27.616,16.591 27.99,16.841 27.99,17.308L27.99,22.606C27.99,22.928 28.185,22.945 28.322,22.928C29.314,22.642 30,22.055 30,21.047L30,8.023C30,7.17 29.383,5.745 27.99,5.312L16.96,2.726C15.913,2.508 13.888,1.847 13.034,2.508Z" style="fill:url(#_Linear8);fill-rule:nonzero;"/>
+        <path d="M13.034,2.508L3.064,11.731C1.118,13.393 2.129,14.542 3.998,14.13L27.024,7.524C27.616,7.383 27.99,7.338 27.99,8.023L27.99,12.042C27.99,12.73 28.054,13.088 27.616,13.226C27.616,13.226 5.411,19.92 4.933,20.05C4.455,20.18 3.393,20.378 3.064,20.33C2.734,20.282 2.316,20.05 2.129,20.05C1.942,20.05 1.942,20.158 1.942,20.673L1.942,22.84C1.942,23.003 2.083,23.108 2.083,23.108C2.61,23.445 3.335,23.59 3.998,23.415L27.243,16.685C27.616,16.591 27.99,16.841 27.99,17.308L27.99,22.606C27.99,22.928 28.185,22.945 28.322,22.928C29.314,22.642 30,22.055 30,21.047L30,8.023C30,7.17 29.383,5.745 27.99,5.312L16.96,2.726C15.913,2.508 13.888,1.847 13.034,2.508Z" style="fill:url(#_Linear9);fill-rule:nonzero;"/>
+        <path d="M13.034,2.508L3.064,11.731C1.118,13.393 2.129,14.542 3.998,14.13L27.024,7.524C27.616,7.383 27.99,7.338 27.99,8.023L27.99,12.042C27.99,12.73 28.054,13.088 27.616,13.226C27.616,13.226 5.411,19.92 4.933,20.05C4.455,20.18 3.393,20.378 3.064,20.33C2.734,20.282 2.316,20.05 2.129,20.05C1.942,20.05 1.942,20.158 1.942,20.673L1.942,22.84C1.942,23.003 2.083,23.108 2.083,23.108C2.61,23.445 3.335,23.59 3.998,23.415L27.243,16.685C27.616,16.591 27.99,16.841 27.99,17.308L27.99,22.606C27.99,22.928 28.185,22.945 28.322,22.928C29.314,22.642 30,22.055 30,21.047L30,8.023C30,7.17 29.383,5.745 27.99,5.312L16.96,2.726C15.913,2.508 13.888,1.847 13.034,2.508Z" style="fill:url(#_Radial10);fill-rule:nonzero;"/>
+        <path d="M13.034,2.508L3.064,11.731C1.118,13.393 2.129,14.542 3.998,14.13L27.024,7.524C27.616,7.383 27.99,7.338 27.99,8.023L27.99,12.042C27.99,12.73 28.054,13.088 27.616,13.226C27.616,13.226 5.411,19.92 4.933,20.05C4.455,20.18 3.393,20.378 3.064,20.33C2.734,20.282 2.316,20.05 2.129,20.05C1.942,20.05 1.942,20.158 1.942,20.673L1.942,22.84C1.942,23.003 2.083,23.108 2.083,23.108C2.61,23.445 3.335,23.59 3.998,23.415L27.243,16.685C27.616,16.591 27.99,16.841 27.99,17.308L27.99,22.606C27.99,22.928 28.185,22.945 28.322,22.928C29.314,22.642 30,22.055 30,21.047L30,8.023C30,7.17 29.383,5.745 27.99,5.312L16.96,2.726C15.913,2.508 13.888,1.847 13.034,2.508Z" style="fill:url(#_Linear11);fill-rule:nonzero;"/>
+        <path d="M13.034,2.508L3.064,11.731C1.118,13.393 2.129,14.542 3.998,14.13L27.024,7.524C27.616,7.383 27.99,7.338 27.99,8.023L27.99,12.042C27.99,12.73 28.054,13.088 27.616,13.226C27.616,13.226 5.411,19.92 4.933,20.05C4.455,20.18 3.393,20.378 3.064,20.33C2.734,20.282 2.316,20.05 2.129,20.05C1.942,20.05 1.942,20.158 1.942,20.673L1.942,22.84C1.942,23.003 2.083,23.108 2.083,23.108C2.61,23.445 3.335,23.59 3.998,23.415L27.243,16.685C27.616,16.591 27.99,16.841 27.99,17.308L27.99,22.606C27.99,22.928 28.185,22.945 28.322,22.928C29.314,22.642 30,22.055 30,21.047L30,8.023C30,7.17 29.383,5.745 27.99,5.312L16.96,2.726C15.913,2.508 13.888,1.847 13.034,2.508Z" style="fill:url(#_Linear12);fill-rule:nonzero;"/>
+        <path d="M13.034,2.508L3.064,11.731C1.118,13.393 2.129,14.542 3.998,14.13L27.024,7.524C27.616,7.383 27.99,7.338 27.99,8.023L27.99,12.042C27.99,12.73 28.054,13.088 27.616,13.226C27.616,13.226 5.411,19.92 4.933,20.05C4.455,20.18 3.393,20.378 3.064,20.33C2.734,20.282 2.316,20.05 2.129,20.05C1.942,20.05 1.942,20.158 1.942,20.673L1.942,22.84C1.942,23.003 2.083,23.108 2.083,23.108C2.61,23.445 3.335,23.59 3.998,23.415L27.243,16.685C27.616,16.591 27.99,16.841 27.99,17.308L27.99,22.606C27.99,22.928 28.185,22.945 28.322,22.928C29.314,22.642 30,22.055 30,21.047L30,8.023C30,7.17 29.383,5.745 27.99,5.312L16.96,2.726C15.913,2.508 13.888,1.847 13.034,2.508Z" style="fill:url(#_Radial13);fill-rule:nonzero;"/>
+        <g>
+            <path d="M12.664,7.578C12.024,7.578 11.803,7.217 11.891,6.554C12.556,-2.951 20.734,7.578 14.627,7.578L12.664,7.578Z" style="fill:rgb(213,45,38);fill-rule:nonzero;"/>
+            <path d="M12.664,7.578C12.024,7.578 11.803,7.217 11.891,6.554C12.556,-2.951 20.734,7.578 14.627,7.578L12.664,7.578Z" style="fill:rgb(162,56,40);fill-rule:nonzero;"/>
+        </g>
+        <path d="M12.024,4.517C12.15,3.889 12.359,2.115 14.54,1.681L16.896,2.888L17.754,5.463C16.95,7.624 15.291,7.47 14.627,7.47L12.664,7.47C12.024,7.47 11.66,7.106 11.748,6.437L12.024,4.517Z" style="fill:rgb(213,45,38);fill-rule:nonzero;"/>
+        <path d="M12.024,4.517C12.15,3.889 12.359,2.115 14.54,1.681L16.896,2.888L17.754,5.463C16.95,7.624 15.291,7.47 14.627,7.47L12.664,7.47C12.024,7.47 11.66,7.106 11.748,6.437L12.024,4.517Z" style="fill:url(#_Radial14);fill-rule:nonzero;"/>
+        <g>
+            <path d="M16.898,4.469C16.459,3.974 16.542,3.199 16.542,3.199C16.542,3.199 15.848,3.183 15.5,2.805C13.208,0.515 16.006,2.044 16.727,2.687C17.664,3.523 17.828,4.992 17.828,4.992C17.751,5.087 17.984,5.484 17.734,5.344C17.484,5.203 16.898,4.469 16.898,4.469Z" style="fill:rgb(141,197,39);fill-rule:nonzero;"/>
+            <path d="M16.898,4.469C16.459,3.974 16.542,3.199 16.542,3.199C16.542,3.199 15.848,3.183 15.5,2.805C13.208,0.515 16.006,2.044 16.727,2.687C17.664,3.523 17.828,4.992 17.828,4.992C17.751,5.087 17.984,5.484 17.734,5.344C17.484,5.203 16.898,4.469 16.898,4.469Z" style="fill:rgb(103,42,23);fill-rule:nonzero;"/>
+        </g>
+        <path d="M16.94,4.372C16.5,3.877 16.62,3.121 16.62,3.121C16.62,3.121 15.906,3.121 15.558,2.743L14.365,1.507C14.301,1.419 14.365,1.323 14.453,1.259C14.453,1.259 15.154,0.728 16.242,1.419C16.844,1.863 17.988,3.281 18.278,3.877C18.805,4.777 18.132,5.55 18.132,5.55C18.055,5.645 17.965,5.672 17.856,5.55L16.94,4.372Z" style="fill:rgb(141,197,39);fill-rule:nonzero;"/>
+        <path d="M16.94,4.372C16.5,3.877 16.62,3.121 16.62,3.121C16.62,3.121 15.906,3.121 15.558,2.743L14.365,1.507C14.301,1.419 14.365,1.323 14.453,1.259C14.453,1.259 15.154,0.728 16.242,1.419C16.844,1.863 17.988,3.281 18.278,3.877C18.805,4.777 18.132,5.55 18.132,5.55C18.055,5.645 17.965,5.672 17.856,5.55L16.94,4.372Z" style="fill:url(#_Radial15);fill-rule:nonzero;"/>
+    </g>
+    <defs>
+        <linearGradient id="_Linear1" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(24.25,-0.0312,0.0312,24.25,1.6875,18.4687)"><stop offset="0" style="stop-color:rgb(202,149,127);stop-opacity:1"/><stop offset="0.01" style="stop-color:rgb(202,149,127);stop-opacity:1"/><stop offset="0.05" style="stop-color:rgb(255,180,164);stop-opacity:1"/><stop offset="0.08" style="stop-color:rgb(255,214,176);stop-opacity:1"/><stop offset="0.14" style="stop-color:rgb(255,217,176);stop-opacity:1"/><stop offset="0.52" style="stop-color:rgb(255,193,138);stop-opacity:1"/><stop offset="0.92" style="stop-color:rgb(255,157,80);stop-opacity:1"/><stop offset="1" style="stop-color:rgb(255,157,80);stop-opacity:1"/></linearGradient>
+        <linearGradient id="_Linear2" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(1.5583,5.125,-5.125,1.5583,14,21.6875)"><stop offset="0" style="stop-color:rgb(255,179,123);stop-opacity:0"/><stop offset="0.78" style="stop-color:rgb(255,179,123);stop-opacity:0"/><stop offset="0.89" style="stop-color:rgb(255,156,129);stop-opacity:1"/><stop offset="0.93" style="stop-color:rgb(246,127,157);stop-opacity:1"/><stop offset="1" style="stop-color:rgb(246,127,157);stop-opacity:1"/></linearGradient>
+        <linearGradient id="_Linear3" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(1.125,4.0625,-4.0625,1.125,19.875,15.1875)"><stop offset="0" style="stop-color:rgb(240,132,86);stop-opacity:0"/><stop offset="0.26" style="stop-color:rgb(240,132,86);stop-opacity:0"/><stop offset="0.76" style="stop-color:rgb(228,121,75);stop-opacity:1"/><stop offset="0.92" style="stop-color:rgb(228,121,75);stop-opacity:0"/><stop offset="1" style="stop-color:rgb(228,121,75);stop-opacity:0"/></linearGradient>
+        <linearGradient id="_Linear4" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(0.8792,3.125,-3.125,0.8792,15.5583,8.0625)"><stop offset="0" style="stop-color:rgb(240,132,86);stop-opacity:0"/><stop offset="0.26" style="stop-color:rgb(240,132,86);stop-opacity:0"/><stop offset="0.76" style="stop-color:rgb(228,121,75);stop-opacity:1"/><stop offset="0.92" style="stop-color:rgb(228,121,75);stop-opacity:0"/><stop offset="1" style="stop-color:rgb(228,121,75);stop-opacity:0"/></linearGradient>
+        <linearGradient id="_Linear5" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(1.92737,0,0,1.92737,2.07263,20.5)"><stop offset="0" style="stop-color:rgb(194,150,119);stop-opacity:1"/><stop offset="0.58" style="stop-color:rgb(254,179,163);stop-opacity:1"/><stop offset="1" style="stop-color:rgb(255,206,177);stop-opacity:0"/></linearGradient>
+        <linearGradient id="_Linear6" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(6.6562,22.5312,-22.5312,6.6562,10.9688,3.46875)"><stop offset="0" style="stop-color:rgb(243,207,162);stop-opacity:1"/><stop offset="0.26" style="stop-color:rgb(243,207,162);stop-opacity:1"/><stop offset="0.3" style="stop-color:rgb(255,240,203);stop-opacity:1"/><stop offset="0.32" style="stop-color:rgb(255,213,206);stop-opacity:1"/><stop offset="0.55" style="stop-color:rgb(255,214,207);stop-opacity:1"/><stop offset="0.6" style="stop-color:rgb(255,254,226);stop-opacity:1"/><stop offset="0.62" style="stop-color:rgb(255,228,229);stop-opacity:1"/><stop offset="0.97" style="stop-color:rgb(255,227,227);stop-opacity:1"/><stop offset="1" style="stop-color:rgb(249,170,224);stop-opacity:1"/></linearGradient>
+        <linearGradient id="_Linear7" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(1.74547,0,0,1.74547,1.94203,21.625)"><stop offset="0" style="stop-color:rgb(198,156,155);stop-opacity:1"/><stop offset="0.14" style="stop-color:rgb(221,164,181);stop-opacity:1"/><stop offset="1" style="stop-color:rgb(248,182,211);stop-opacity:0"/></linearGradient>
+        <linearGradient id="_Linear8" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(0.45313,0.48438,-0.48438,0.45313,8.5,6.54687)"><stop offset="0" style="stop-color:rgb(183,162,135);stop-opacity:1"/><stop offset="0.82" style="stop-color:rgb(207,177,140);stop-opacity:0"/><stop offset="1" style="stop-color:rgb(207,177,140);stop-opacity:0"/></linearGradient>
+        <linearGradient id="_Linear9" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(-0.0782,0.35156,-0.35156,-0.0782,21.2969,3.67188)"><stop offset="0" style="stop-color:rgb(183,162,135);stop-opacity:1"/><stop offset="0.82" style="stop-color:rgb(207,177,140);stop-opacity:0"/><stop offset="1" style="stop-color:rgb(207,177,140);stop-opacity:0"/></linearGradient>
+        <radialGradient id="_Radial10" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="matrix(-2.53191e-15,6.61319,-3.0625,-1.1725e-15,28.9375,12.8556)"><stop offset="0" style="stop-color:rgb(255,222,211);stop-opacity:1"/><stop offset="1" style="stop-color:rgb(255,222,213);stop-opacity:0"/></radialGradient>
+        <linearGradient id="_Linear11" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(-2.4375,2.98508e-16,-2.98508e-16,-2.4375,30,12.8556)"><stop offset="0" style="stop-color:rgb(214,192,170);stop-opacity:1"/><stop offset="0.04" style="stop-color:rgb(246,212,188);stop-opacity:1"/><stop offset="0.19" style="stop-color:rgb(255,222,212);stop-opacity:1"/><stop offset="1" style="stop-color:rgb(255,222,211);stop-opacity:0"/></linearGradient>
+        <linearGradient id="_Linear12" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(0.9218,2.2343,-2.2343,0.9218,27.6094,20.9844)"><stop offset="0" style="stop-color:rgb(255,214,227);stop-opacity:0"/><stop offset="0.29" style="stop-color:rgb(255,214,227);stop-opacity:0"/><stop offset="0.59" style="stop-color:rgb(244,168,220);stop-opacity:0"/><stop offset="0.95" style="stop-color:rgb(229,150,221);stop-opacity:1"/><stop offset="1" style="stop-color:rgb(229,150,221);stop-opacity:1"/></linearGradient>
+        <radialGradient id="_Radial13" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="matrix(0.0624985,1.78125,-4.40342,0.154502,13.8281,6.6875)"><stop offset="0" style="stop-color:rgb(178,129,98);stop-opacity:1"/><stop offset="0.52" style="stop-color:rgb(178,129,98);stop-opacity:1"/><stop offset="1" style="stop-color:rgb(194,154,121);stop-opacity:0"/></radialGradient>
+        <radialGradient id="_Radial14" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="matrix(-1.81247,4.09702,-4.25876,-1.88402,16.1875,3.375)"><stop offset="0" style="stop-color:rgb(255,106,131);stop-opacity:1"/><stop offset="0.14" style="stop-color:rgb(255,106,131);stop-opacity:1"/><stop offset="0.52" style="stop-color:rgb(238,45,71);stop-opacity:1"/><stop offset="1" style="stop-color:rgb(243,47,89);stop-opacity:0"/></radialGradient>
+        <radialGradient id="_Radial15" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="matrix(-8.743e-16,2.28362,-2.07009,-7.92548e-16,16.4093,3.34783)"><stop offset="0" style="stop-color:rgb(177,235,103);stop-opacity:1"/><stop offset="0.9" style="stop-color:rgb(175,234,99);stop-opacity:0"/><stop offset="1" style="stop-color:rgb(175,234,99);stop-opacity:0"/></radialGradient>
+    </defs>
+</svg>

packages/frontend/assets/drop-and-fusion/sweets_monos/soft_ice_cream_color.svg

@@ -0,0 +1,140 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M14.8021 18.0831H14.0721H12.0221H11.2921V20.1093C11.2921 20.1093 11.7321 20.0387 11.9421 20.2907C12.0521 20.4218 12.0321 20.7444 12.0321 20.7444C12.0321 21.3189 12.4921 21.7726 13.0521 21.7726C13.6121 21.7726 14.0721 21.3089 14.0721 20.7444C14.0721 20.7444 14.0621 20.3411 14.1821 20.1395C14.3321 19.8774 14.6121 19.8674 14.6121 19.8674L14.8021 18.0831Z" fill="url(#paint0_radial_18_28477)"/>
+<path d="M15.7121 22.6293H10.7021L11.5221 29.2319C11.5721 29.6654 11.9421 29.988 12.3721 29.988H15.7221H19.9821C20.4121 29.988 20.7721 29.6654 20.8321 29.2319L21.6521 22.6293H15.7121Z" fill="url(#paint1_linear_18_28477)"/>
+<path d="M15.7121 22.6293H10.7021L11.5221 29.2319C11.5721 29.6654 11.9421 29.988 12.3721 29.988H15.7221H19.9821C20.4121 29.988 20.7721 29.6654 20.8321 29.2319L21.6521 22.6293H15.7121Z" fill="url(#paint2_linear_18_28477)"/>
+<g opacity="0.5">
+<path d="M19.8421 22.6293H18.4421L16.2321 24.857L14.0221 22.6293H12.6221L10.9021 24.3631L11.2221 26.9739L12.6721 28.4356L11.5921 29.5243C11.7321 29.7964 12.0221 29.988 12.3521 29.988H12.4221L13.3121 29.0908L14.2021 29.988H15.4921L13.9821 28.4356L16.2421 26.1574L18.5021 28.4356L16.9621 29.988H18.2521L19.1421 29.0908L20.0321 29.988C20.3721 29.9678 20.6521 29.746 20.7721 29.4335L19.7821 28.4356L21.0821 27.1251L21.2621 25.6433L19.1321 27.7904L16.8721 25.5123L19.1321 23.2341L21.2921 25.4115L21.4321 24.2522L19.8421 22.6293ZM13.3321 27.7804L11.0721 25.5022L13.3321 23.224L15.5921 25.5022L13.3321 27.7804Z" fill="url(#paint3_linear_18_28477)"/>
+<path d="M19.8421 22.6293H18.4421L16.2321 24.857L14.0221 22.6293H12.6221L10.9021 24.3631L11.2221 26.9739L12.6721 28.4356L11.5921 29.5243C11.7321 29.7964 12.0221 29.988 12.3521 29.988H12.4221L13.3121 29.0908L14.2021 29.988H15.4921L13.9821 28.4356L16.2421 26.1574L18.5021 28.4356L16.9621 29.988H18.2521L19.1421 29.0908L20.0321 29.988C20.3721 29.9678 20.6521 29.746 20.7721 29.4335L19.7821 28.4356L21.0821 27.1251L21.2621 25.6433L19.1321 27.7904L16.8721 25.5123L19.1321 23.2341L21.2921 25.4115L21.4321 24.2522L19.8421 22.6293ZM13.3321 27.7804L11.0721 25.5022L13.3321 23.224L15.5921 25.5022L13.3321 27.7804Z" fill="url(#paint4_linear_18_28477)"/>
+</g>
+<path d="M21.8359 7.40625C21.8359 6.46094 20.5156 5.81254 19.7969 5.81254H18.6719C18.5019 5.82262 18 5.69535 18 5.31254C18 5.31254 17.9531 4.30926 17.9531 3.78129C17.9531 3.25331 17.6791 2.46623 16.7891 2.54688C16.0391 2.61744 15.7821 3.31528 15.7221 3.6177C15.6621 3.95035 15.4288 4.43069 14.9688 4.77342C14.0188 5.47905 11.1641 6.59373 11.1641 6.59373C10.3227 6.87643 9.64311 7.8143 9.71094 8.70311C9.71094 9.14752 10.0234 9.55505 10.0234 9.87498C10.0234 10.1949 9.41406 10.3672 9.41406 10.3672L22.0156 9.35938C22.0156 9.35938 21.5547 9.07812 21.5547 8.74219C21.5547 8.46094 21.8359 8.17188 21.8359 7.40625Z" fill="url(#paint5_linear_18_28477)"/>
+<path d="M21.8359 7.40625C21.8359 6.46094 20.5156 5.81254 19.7969 5.81254H18.6719C18.5019 5.82262 18 5.69535 18 5.31254C18 5.31254 17.9531 4.30926 17.9531 3.78129C17.9531 3.25331 17.6791 2.46623 16.7891 2.54688C16.0391 2.61744 15.7821 3.31528 15.7221 3.6177C15.6621 3.95035 15.4288 4.43069 14.9688 4.77342C14.0188 5.47905 11.1641 6.59373 11.1641 6.59373C10.3227 6.87643 9.64311 7.8143 9.71094 8.70311C9.71094 9.14752 10.0234 9.55505 10.0234 9.87498C10.0234 10.1949 9.41406 10.3672 9.41406 10.3672L22.0156 9.35938C22.0156 9.35938 21.5547 9.07812 21.5547 8.74219C21.5547 8.46094 21.8359 8.17188 21.8359 7.40625Z" fill="url(#paint6_radial_18_28477)"/>
+<path d="M21.8359 7.40625C21.8359 6.46094 20.5156 5.81254 19.7969 5.81254H18.6719C18.5019 5.82262 18 5.69535 18 5.31254C18 5.31254 17.9531 4.30926 17.9531 3.78129C17.9531 3.25331 17.6791 2.46623 16.7891 2.54688C16.0391 2.61744 15.7821 3.31528 15.7221 3.6177C15.6621 3.95035 15.4288 4.43069 14.9688 4.77342C14.0188 5.47905 11.1641 6.59373 11.1641 6.59373C10.3227 6.87643 9.64311 7.8143 9.71094 8.70311C9.71094 9.14752 10.0234 9.55505 10.0234 9.87498C10.0234 10.1949 9.41406 10.3672 9.41406 10.3672L22.0156 9.35938C22.0156 9.35938 21.5547 9.07812 21.5547 8.74219C21.5547 8.46094 21.8359 8.17188 21.8359 7.40625Z" fill="url(#paint7_radial_18_28477)"/>
+<path d="M21.8359 7.40625C21.8359 6.46094 20.5156 5.81254 19.7969 5.81254H18.6719C18.5019 5.82262 18 5.69535 18 5.31254C18 5.31254 17.9531 4.30926 17.9531 3.78129C17.9531 3.25331 17.6791 2.46623 16.7891 2.54688C16.0391 2.61744 15.7821 3.31528 15.7221 3.6177C15.6621 3.95035 15.4288 4.43069 14.9688 4.77342C14.0188 5.47905 11.1641 6.59373 11.1641 6.59373C10.3227 6.87643 9.64311 7.8143 9.71094 8.70311C9.71094 9.14752 10.0234 9.55505 10.0234 9.87498C10.0234 10.1949 9.41406 10.3672 9.41406 10.3672L22.0156 9.35938C22.0156 9.35938 21.5547 9.07812 21.5547 8.74219C21.5547 8.46094 21.8359 8.17188 21.8359 7.40625Z" fill="url(#paint8_radial_18_28477)"/>
+<path d="M21.3021 9.24249C19.7917 9.36788 9.8621 10.2505 9.8621 10.2505C8.5021 10.3715 7.59375 11.5468 7.59375 12.6484C7.59375 13.4453 7.99999 13.6406 7.99999 14.1171C7.99999 14.5937 7.59375 14.7265 7.59375 14.7265L24.1953 13.6406C24.1953 13.6406 23.7882 13.375 23.7882 12.7696C23.7882 12.3984 24.0625 12.2656 24.0625 11.5469C24.0625 10.2734 22.8125 9.11711 21.3021 9.24249Z" fill="url(#paint9_linear_18_28477)"/>
+<path d="M21.3021 9.24249C19.7917 9.36788 9.8621 10.2505 9.8621 10.2505C8.5021 10.3715 7.59375 11.5468 7.59375 12.6484C7.59375 13.4453 7.99999 13.6406 7.99999 14.1171C7.99999 14.5937 7.59375 14.7265 7.59375 14.7265L24.1953 13.6406C24.1953 13.6406 23.7882 13.375 23.7882 12.7696C23.7882 12.3984 24.0625 12.2656 24.0625 11.5469C24.0625 10.2734 22.8125 9.11711 21.3021 9.24249Z" fill="url(#paint10_radial_18_28477)"/>
+<path d="M21.3021 9.24249C19.7917 9.36788 9.8621 10.2505 9.8621 10.2505C8.5021 10.3715 7.59375 11.5468 7.59375 12.6484C7.59375 13.4453 7.99999 13.6406 7.99999 14.1171C7.99999 14.5937 7.59375 14.7265 7.59375 14.7265L24.1953 13.6406C24.1953 13.6406 23.7882 13.375 23.7882 12.7696C23.7882 12.3984 24.0625 12.2656 24.0625 11.5469C24.0625 10.2734 22.8125 9.11711 21.3021 9.24249Z" fill="url(#paint11_radial_18_28477)"/>
+<path d="M25.7721 15.956C25.6221 14.2827 24.1621 13.0428 22.5021 13.1839L8.54211 14.4137C6.88211 14.5649 5.65211 16.0367 5.79211 17.71C5.94211 19.3834 7.40211 20.6233 9.06211 20.4821L17.1021 19.7765C17.3721 19.7563 20.5221 19.4741 20.7621 19.4539L23.0221 19.2523C24.6821 19.1011 25.9121 17.6294 25.7721 15.956Z" fill="url(#paint12_radial_18_28477)"/>
+<path d="M22.2221 22.6294H10.2521C9.7821 22.6294 9.39211 22.2463 9.39211 21.7624V20.2605L23.0721 19.202V21.7624C23.0821 22.2463 22.6921 22.6294 22.2221 22.6294Z" fill="url(#paint13_linear_18_28477)"/>
+<path d="M22.2221 22.6294H10.2521C9.7821 22.6294 9.39211 22.2463 9.39211 21.7624V20.2605L23.0721 19.202V21.7624C23.0821 22.2463 22.6921 22.6294 22.2221 22.6294Z" fill="url(#paint14_linear_18_28477)"/>
+<g filter="url(#filter0_f_18_28477)">
+<path d="M22.5021 13.7943C19.496 14.0591 12.4038 17.4238 10.1094 19.4374C9.64133 19.8482 10.8122 20.1392 11.4175 20.4009C11.7187 20.5312 11.768 20.9875 11.8125 21.1249C11.9463 21.5384 12.3125 21.8749 12.8125 21.8749C13.3125 21.8749 13.8047 21.3327 13.8047 21.039C13.8047 20.8374 13.7109 20.4791 14.8437 20.4009C15.9766 20.3228 16.8518 20.2724 20.8125 19.9634C24.7732 19.6545 22.8858 16.4166 22.5021 13.7943Z" fill="url(#paint15_linear_18_28477)"/>
+<path d="M22.5021 13.7943C19.496 14.0591 12.4038 17.4238 10.1094 19.4374C9.64133 19.8482 10.8122 20.1392 11.4175 20.4009C11.7187 20.5312 11.768 20.9875 11.8125 21.1249C11.9463 21.5384 12.3125 21.8749 12.8125 21.8749C13.3125 21.8749 13.8047 21.3327 13.8047 21.039C13.8047 20.8374 13.7109 20.4791 14.8437 20.4009C15.9766 20.3228 16.8518 20.2724 20.8125 19.9634C24.7732 19.6545 22.8858 16.4166 22.5021 13.7943Z" fill="url(#paint16_radial_18_28477)"/>
+<path d="M22.5021 13.7943C19.496 14.0591 12.4038 17.4238 10.1094 19.4374C9.64133 19.8482 10.8122 20.1392 11.4175 20.4009C11.7187 20.5312 11.768 20.9875 11.8125 21.1249C11.9463 21.5384 12.3125 21.8749 12.8125 21.8749C13.3125 21.8749 13.8047 21.3327 13.8047 21.039C13.8047 20.8374 13.7109 20.4791 14.8437 20.4009C15.9766 20.3228 16.8518 20.2724 20.8125 19.9634C24.7732 19.6545 22.8858 16.4166 22.5021 13.7943Z" fill="#C67B4D"/>
+</g>
+<path d="M25.7721 15.956C25.6221 14.2827 24.1621 13.0428 22.5021 13.1839L8.54211 14.4137C6.88211 14.5649 5.65211 16.0367 5.79211 17.71C5.94211 19.3834 7.40211 20.6233 9.06211 20.4821L11.3921 20.2805C11.6121 20.2604 11.8021 20.4418 11.8021 20.6636L11.8321 20.8551C11.8321 21.3591 12.2421 21.7724 12.7421 21.7724C13.2421 21.7724 13.6521 21.3591 13.6521 20.8551L13.6221 20.4317C13.6221 20.2301 13.7721 20.0688 13.9721 20.0487L17.0921 19.7765C17.3621 19.7563 20.5121 19.4741 20.7521 19.4539L23.0121 19.2523C24.6821 19.1011 25.9121 17.6294 25.7721 15.956Z" fill="url(#paint17_linear_18_28477)"/>
+<path d="M25.7721 15.956C25.6221 14.2827 24.1621 13.0428 22.5021 13.1839L8.54211 14.4137C6.88211 14.5649 5.65211 16.0367 5.79211 17.71C5.94211 19.3834 7.40211 20.6233 9.06211 20.4821L11.3921 20.2805C11.6121 20.2604 11.8021 20.4418 11.8021 20.6636L11.8321 20.8551C11.8321 21.3591 12.2421 21.7724 12.7421 21.7724C13.2421 21.7724 13.6521 21.3591 13.6521 20.8551L13.6221 20.4317C13.6221 20.2301 13.7721 20.0688 13.9721 20.0487L17.0921 19.7765C17.3621 19.7563 20.5121 19.4741 20.7521 19.4539L23.0121 19.2523C24.6821 19.1011 25.9121 17.6294 25.7721 15.956Z" fill="url(#paint18_radial_18_28477)"/>
+<path d="M25.7721 15.956C25.6221 14.2827 24.1621 13.0428 22.5021 13.1839L8.54211 14.4137C6.88211 14.5649 5.65211 16.0367 5.79211 17.71C5.94211 19.3834 7.40211 20.6233 9.06211 20.4821L11.3921 20.2805C11.6121 20.2604 11.8021 20.4418 11.8021 20.6636L11.8321 20.8551C11.8321 21.3591 12.2421 21.7724 12.7421 21.7724C13.2421 21.7724 13.6521 21.3591 13.6521 20.8551L13.6221 20.4317C13.6221 20.2301 13.7721 20.0688 13.9721 20.0487L17.0921 19.7765C17.3621 19.7563 20.5121 19.4741 20.7521 19.4539L23.0121 19.2523C24.6821 19.1011 25.9121 17.6294 25.7721 15.956Z" fill="url(#paint19_radial_18_28477)"/>
+<path d="M25.7721 15.956C25.6221 14.2827 24.1621 13.0428 22.5021 13.1839L8.54211 14.4137C6.88211 14.5649 5.65211 16.0367 5.79211 17.71C5.94211 19.3834 7.40211 20.6233 9.06211 20.4821L11.3921 20.2805C11.6121 20.2604 11.8021 20.4418 11.8021 20.6636L11.8321 20.8551C11.8321 21.3591 12.2421 21.7724 12.7421 21.7724C13.2421 21.7724 13.6521 21.3591 13.6521 20.8551L13.6221 20.4317C13.6221 20.2301 13.7721 20.0688 13.9721 20.0487L17.0921 19.7765C17.3621 19.7563 20.5121 19.4741 20.7521 19.4539L23.0121 19.2523C24.6821 19.1011 25.9121 17.6294 25.7721 15.956Z" fill="url(#paint20_radial_18_28477)"/>
+<defs>
+<filter id="filter0_f_18_28477" x="9.00156" y="12.7943" width="15.2857" height="10.0806" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="0.5" result="effect1_foregroundBlur_18_28477"/>
+</filter>
+<radialGradient id="paint0_radial_18_28477" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(13.046 19.9264) scale(1.7953 1.80973)">
+<stop stop-color="#FFE0A8"/>
+<stop offset="1" stop-color="#FFDEA3"/>
+</radialGradient>
+<linearGradient id="paint1_linear_18_28477" x1="11.125" y1="26.75" x2="21.25" y2="26.75" gradientUnits="userSpaceOnUse">
+<stop stop-color="#C5987C"/>
+<stop offset="0.216049" stop-color="#CC8953"/>
+<stop offset="0.567901" stop-color="#EAA36E"/>
+<stop offset="1" stop-color="#FCBD73"/>
+</linearGradient>
+<linearGradient id="paint2_linear_18_28477" x1="16.1771" y1="22.6293" x2="16.1771" y2="29.988" gradientUnits="userSpaceOnUse">
+<stop offset="0.882728" stop-color="#C8746A" stop-opacity="0"/>
+<stop offset="1" stop-color="#BE6D82"/>
+</linearGradient>
+<linearGradient id="paint3_linear_18_28477" x1="10.9021" y1="25.75" x2="21.4321" y2="25.75" gradientUnits="userSpaceOnUse">
+<stop stop-color="#D4A789"/>
+<stop offset="0.424775" stop-color="#FAB88D"/>
+<stop offset="0.757159" stop-color="#FFF0C9"/>
+<stop offset="1" stop-color="#F9CF9A"/>
+</linearGradient>
+<linearGradient id="paint4_linear_18_28477" x1="16.1671" y1="22.6293" x2="16.1671" y2="29.988" gradientUnits="userSpaceOnUse">
+<stop offset="0.916702" stop-color="#E09A80" stop-opacity="0"/>
+<stop offset="1" stop-color="#CA7D95"/>
+</linearGradient>
+<linearGradient id="paint5_linear_18_28477" x1="16.25" y1="9.84375" x2="15.5977" y2="3.19204" gradientUnits="userSpaceOnUse">
+<stop offset="0.0275603" stop-color="#FFE4A8"/>
+<stop offset="0.143815" stop-color="#FFD59B"/>
+<stop offset="0.250725" stop-color="#FEDCAB"/>
+</linearGradient>
+<radialGradient id="paint6_radial_18_28477" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(20.9375 6.875) rotate(115.278) scale(2.48825 4.09612)">
+<stop stop-color="#FFF6BA"/>
+<stop offset="1" stop-color="#FFE5B1" stop-opacity="0"/>
+</radialGradient>
+<radialGradient id="paint7_radial_18_28477" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(17.1875 8.0625) rotate(82.6476) scale(5.86069 10.89)">
+<stop offset="0.45355" stop-color="#E0BB89" stop-opacity="0"/>
+<stop offset="0.662231" stop-color="#E6BE8D"/>
+</radialGradient>
+<radialGradient id="paint8_radial_18_28477" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(17.9063 4.46875) rotate(177.089) scale(3.69226 9.43834)">
+<stop offset="0.128265" stop-color="#FFF8BA"/>
+<stop offset="0.347135" stop-color="#FFE0AF"/>
+<stop offset="0.645989" stop-color="#FAD8A6" stop-opacity="0"/>
+</radialGradient>
+<linearGradient id="paint9_linear_18_28477" x1="16.9054" y1="13.754" x2="16.5214" y2="9.54913" gradientUnits="userSpaceOnUse">
+<stop offset="0.0571005" stop-color="#FFE4A8"/>
+<stop offset="0.157977" stop-color="#FFD59B"/>
+<stop offset="0.356286" stop-color="#FFDEA7"/>
+<stop offset="0.846352" stop-color="#FFE1A8"/>
+<stop offset="0.968133" stop-color="#FDD594"/>
+</linearGradient>
+<radialGradient id="paint10_radial_18_28477" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(20.4375 10.9375) rotate(174.189) scale(14.198 7.83563)">
+<stop offset="0.685205" stop-color="#FED29C" stop-opacity="0"/>
+<stop offset="0.780293" stop-color="#F9C994"/>
+<stop offset="0.880128" stop-color="#E4B783"/>
+</radialGradient>
+<radialGradient id="paint11_radial_18_28477" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(22.875 10.5625) rotate(123.275) scale(2.39221 3.65631)">
+<stop stop-color="#FFF8BD"/>
+<stop offset="1" stop-color="#FFE7B1" stop-opacity="0"/>
+</radialGradient>
+<radialGradient id="paint12_radial_18_28477" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(15.7821 16.8319) scale(7.523 7.58349)">
+<stop offset="0.00558659" stop-color="#FFF5D4"/>
+<stop offset="1" stop-color="#FFDEA3"/>
+</radialGradient>
+<linearGradient id="paint13_linear_18_28477" x1="9.39211" y1="21.625" x2="22.625" y2="21.625" gradientUnits="userSpaceOnUse">
+<stop stop-color="#D2AD8C"/>
+<stop offset="0.0884459" stop-color="#D19870"/>
+<stop offset="0.319877" stop-color="#EAA26B"/>
+<stop offset="0.744954" stop-color="#F8BA81"/>
+<stop offset="1" stop-color="#F8C589"/>
+</linearGradient>
+<linearGradient id="paint14_linear_18_28477" x1="16.2322" y1="19.202" x2="16.2322" y2="22.6294" gradientUnits="userSpaceOnUse">
+<stop offset="0.798134" stop-color="#DB9176" stop-opacity="0"/>
+<stop offset="0.89843" stop-color="#E19978"/>
+<stop offset="1" stop-color="#C97758"/>
+</linearGradient>
+<linearGradient id="paint15_linear_18_28477" x1="17" y1="20.9855" x2="16.5625" y2="14.2355" gradientUnits="userSpaceOnUse">
+<stop offset="0.029796" stop-color="#D89387"/>
+<stop offset="0.312982" stop-color="#F8C6A3"/>
+<stop offset="0.577315" stop-color="#FFDBA7"/>
+<stop offset="0.840851" stop-color="#FFE0A6"/>
+<stop offset="0.978024" stop-color="#FDD594"/>
+</linearGradient>
+<radialGradient id="paint16_radial_18_28477" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(18.5625 16.048) rotate(83.3255) scale(5.91509 13.7581)">
+<stop offset="0.720443" stop-color="#E1AE83" stop-opacity="0"/>
+<stop offset="1" stop-color="#E7B286"/>
+</radialGradient>
+<linearGradient id="paint17_linear_18_28477" x1="17" y1="20.375" x2="16.5625" y2="13.625" gradientUnits="userSpaceOnUse">
+<stop offset="0.029796" stop-color="#D89387"/>
+<stop offset="0.312982" stop-color="#F8C6A3"/>
+<stop offset="0.577315" stop-color="#FFDBA7"/>
+<stop offset="0.840851" stop-color="#FFE0A6"/>
+<stop offset="0.978024" stop-color="#FDD594"/>
+</linearGradient>
+<radialGradient id="paint18_radial_18_28477" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(18.5625 15.4375) rotate(83.3255) scale(5.91509 13.7581)">
+<stop offset="0.720443" stop-color="#E1AE83" stop-opacity="0"/>
+<stop offset="0.925198" stop-color="#E7B286"/>
+</radialGradient>
+<radialGradient id="paint19_radial_18_28477" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(24.3125 14.9375) rotate(113.929) scale(2.7736 3.64835)">
+<stop stop-color="#FFF8BD"/>
+<stop offset="1" stop-color="#FFEEB6" stop-opacity="0"/>
+</radialGradient>
+<radialGradient id="paint20_radial_18_28477" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(13.3125 20.8437) rotate(-5.0796) scale(1.41179 2.5081)">
+<stop offset="0.197452" stop-color="#FFD4A8"/>
+<stop offset="0.407382" stop-color="#FDC59F"/>
+<stop offset="0.831214" stop-color="#FBC49E" stop-opacity="0"/>
+</radialGradient>
+</defs>
+</svg>

packages/frontend/assets/drop-and-fusion/sweets_monos/verts/candy_color.svg

@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="100%" height="100%" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
+    <path d="M12,1.918L4,4L2.016,12L6,13.375L6,18L8,22L12,25.372L16.008,26L19,25.372L20,30L28,27L30,20L25.473,19L26,15L24,10L20,7L16.008,6L13,6L12,1.918Z"/>
+</svg>

packages/frontend/assets/drop-and-fusion/sweets_monos/verts/chocolate_bar_color.svg

@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="32px" height="32px" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
+    <path d="M12,2.034L2.035,12L2.035,14L18,30L20,30L29.982,20L29.982,18L14,2.034L12,2.034Z"/>
+</svg>

packages/frontend/assets/drop-and-fusion/sweets_monos/verts/custard_color.svg

@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="100%" height="100%" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
+    <path d="M9,15L23,15L30,27L25.7,30L6.34,30L2,27L9,15Z"/>
+</svg>

packages/frontend/assets/drop-and-fusion/sweets_monos/verts/doughnut_color.svg

@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="32px" height="32px" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
+    <path d="M15,2L11,3L8,5L7,6L5,9L4,12L4,20L5,23L7,26L11,29L14,30L18,30L21,29L25,26L27,23L28,20L28,12L27,9L25,6L24,5L21,3L17,2L15,2Z"/>
+</svg>

packages/frontend/assets/drop-and-fusion/sweets_monos/verts/lollipop_color.svg

@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="32px" height="32px" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
+    <path d="M12,2L7,3L3,7L2,12L3,16L5,19L8,21L12,22L18,21L27,30L30,30L30,27L21,18L22,14.25L22,11L21,8L19,5L16.5,3L12,2Z"/>
+</svg>

packages/frontend/assets/drop-and-fusion/sweets_monos/verts/pancakes_color.svg

@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="32px" height="32px" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
+    <path d="M15,2L14,3L8,4L6,5L4,8L4.011,15L2,19L2,22.36L3,25L5,28L10,30L22,30L27,28L29,25L30,22L30,19L27.989,15L27.989,8L26,5L24,4L18,3L17,2L15,2Z"/>
+</svg>

packages/frontend/assets/drop-and-fusion/sweets_monos/verts/shaved_ice_color.svg

@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="32px" height="32px" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
+    <path d="M15,2L11,3L8,6L7,8L6,11L6,13L7,16L8,18L15,30L17,30L24,18L25,16L26,13L26,11L25,8L24,6L21,3L17,2L15,2Z"/>
+</svg>

packages/frontend/assets/drop-and-fusion/sweets_monos/verts/shortcake_color.svg

@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="32px" height="32px" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
+    <path d="M14,2L2,13L2,31L30,23L30,7L29,6L20,4L17,3L16,2L14,2Z"/>
+</svg>

packages/frontend/assets/drop-and-fusion/sweets_monos/verts/soft_ice_cream_color.svg

@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="32px" height="32px" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
+    <path d="M17,2.541L14.078,5.402L10,7L10,10.367L8,11L8,14L5.781,16.265L6.594,19.627L9.414,20.916L12,29.988L21,29.988L22.016,22.629L23.072,21.772L23.072,19.202L25.783,17.473L25.783,14.727L24,13.173L24,10.367L22,9.233L22.016,6.454L18,5L17,2.541Z"/>
+</svg>

packages/frontend/src/components/MkCustomEmojiDetailedDialog.vue

@@ -0,0 +1,102 @@
+<!--
+SPDX-FileCopyrightText: syuilo and other misskey contributors
+SPDX-License-Identifier: AGPL-3.0-only
+-->
+
+<template>
+  <MkModalWindow ref="dialogEl" @close="cancel()" @closed="$emit('closed')">
+    <template #header>:{{ emoji.name }}:</template>
+    <template #default>
+      <MkSpacer>
+        <div style="display: flex; flex-direction: column; gap: 1em;">
+          <div :class="$style.emojiImgWrapper">
+            <MkCustomEmoji :name="emoji.name" :normal="true" style="height: 100%;"></MkCustomEmoji>
+          </div>
+          <MkKeyValue>
+            <template #key>{{ i18n.ts.name }}</template>
+            <template #value>{{ emoji.name }}</template>
+          </MkKeyValue>
+          <MkKeyValue>
+            <template #key>{{ i18n.ts.tags }}</template>
+            <template #value>
+              <div v-if="emoji.aliases.length === 0">{{ i18n.ts.none }}</div>
+              <div v-else :class="$style.aliases">
+                <span v-for="alias in emoji.aliases" :key="alias" :class="$style.alias">
+                  {{ alias }}
+                </span>
+              </div>
+            </template>
+          </MkKeyValue>
+          <MkKeyValue>
+            <template #key>{{ i18n.ts.category }}</template>
+            <template #value>{{ emoji.category ?? i18n.ts.none }}</template>
+          </MkKeyValue>
+          <MkKeyValue>
+            <template #key>{{ i18n.ts.sensitive }}</template>
+            <template #value>{{ emoji.isSensitive ? i18n.ts.yes : i18n.ts.no }}</template>
+          </MkKeyValue>
+          <MkKeyValue>
+            <template #key>{{ i18n.ts.localOnly }}</template>
+            <template #value>{{ emoji.localOnly ? i18n.ts.yes : i18n.ts.no }}</template>
+          </MkKeyValue>
+          <MkKeyValue>
+            <template #key>{{ i18n.ts.license }}</template>
+            <template #value>{{ emoji.license ?? i18n.ts.none }}</template>
+          </MkKeyValue>
+          <MkKeyValue :copy="emoji.url">
+            <template #key>{{ i18n.ts.emojiUrl }}</template>
+            <template #value>
+              <a :href="emoji.url" target="_blank">{{ emoji.url }}</a>
+            </template>
+          </MkKeyValue>
+        </div>
+      </MkSpacer>
+    </template>
+  </MkModalWindow>
+</template>
+
+<script lang="ts" setup>
+import * as Misskey from 'misskey-js';
+import { defineProps, shallowRef } from 'vue';
+import { i18n } from '@/i18n.js';
+import MkModalWindow from '@/components/MkModalWindow.vue';
+import MkKeyValue from '@/components/MkKeyValue.vue';
+const props = defineProps<{
+  emoji: Misskey.entities.EmojiDetailed,
+}>();
+const emit = defineEmits<{
+	(ev: 'ok', cropped: Misskey.entities.DriveFile): void;
+	(ev: 'cancel'): void;
+	(ev: 'closed'): void;
+}>();
+const dialogEl = shallowRef<InstanceType<typeof MkModalWindow>>();
+const cancel = () => {
+	emit('cancel');
+	dialogEl.value!.close();
+};
+</script>
+
+<style lang="scss" module>
+.emojiImgWrapper {
+  max-width: 100%;
+  height: 40cqh;
+  background-image: repeating-linear-gradient(45deg, transparent, transparent 8px, var(--X5) 8px, var(--X5) 14px);
+  border-radius: var(--radius);
+  margin: auto;
+  overflow-y: hidden;
+}
+
+.aliases {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 3px;
+}
+
+.alias {
+  display: inline-block;
+  padding: 3px 10px;
+  background-color: var(--X5);
+  border: solid 1px var(--divider);
+  border-radius: var(--radius);
+}
+</style>

packages/frontend/src/components/MkFlashPreview.vue

@@ -9,7 +9,9 @@ SPDX-License-Identifier: AGPL-3.0-only
 		<header>
 			<h1 :title="flash.title">{{ flash.title }}</h1>
 		</header>
-		<p v-if="flash.summary" :title="flash.summary">{{ flash.summary.length > 85 ? flash.summary.slice(0, 85) + '…' : flash.summary }}</p>
+		<p v-if="flash.summary" :title="flash.summary">
+			<Mfm class="summaryMfm" :text="flash.summary" :plain="true" :nowrap="true"/>
+		</p>
 		<footer>
 			<img class="icon" :src="flash.user.avatarUrl"/>
 			<p>{{ userName(flash.user) }}</p>
@@ -54,6 +56,12 @@ const props = defineProps<{
 			margin: 0;
 			color: var(--urlPreviewText);
 			font-size: 0.8em;
+			overflow: clip;
+
+			> .summaryMfm {
+				display: block;
+				width: 100%;
+			}
 		}
 
 		> footer {

packages/frontend/src/components/MkMediaAudio.vue

@@ -0,0 +1,363 @@
+<!--
+SPDX-FileCopyrightText: syuilo and other misskey contributors
+SPDX-License-Identifier: AGPL-3.0-only
+-->
+
+<template>
+<div
+	:class="[
+		$style.audioContainer,
+		(audio.isSensitive && defaultStore.state.highlightSensitiveMedia) && $style.sensitive,
+	]"
+	@contextmenu.stop
+>
+	<button v-if="hide" :class="$style.hidden" @click="hide = false">
+		<div :class="$style.hiddenTextWrapper">
+			<b v-if="audio.isSensitive" style="display: block;"><i class="ti ti-eye-exclamation"></i> {{ i18n.ts.sensitive }}{{ defaultStore.state.dataSaver.media ? ` (${i18n.ts.audio}${audio.size ? ' ' + bytes(audio.size) : ''})` : '' }}</b>
+			<b v-else style="display: block;"><i class="ti ti-music"></i> {{ defaultStore.state.dataSaver.media && audio.size ? bytes(audio.size) : i18n.ts.audio }}</b>
+			<span style="display: block;">{{ i18n.ts.clickToShow }}</span>
+		</div>
+	</button>
+	<div v-else :class="$style.audioControls">
+		<audio
+			ref="audioEl"
+			preload="metadata"
+			:class="$style.audio"
+		>
+			<source :src="audio.url">
+		</audio>
+		<div :class="[$style.controlsChild, $style.controlsLeft]">
+			<button class="_button" :class="$style.controlButton" @click="togglePlayPause">
+				<i v-if="isPlaying" class="ti ti-player-pause-filled"></i>
+				<i v-else class="ti ti-player-play-filled"></i>
+			</button>
+		</div>
+		<div :class="[$style.controlsChild, $style.controlsRight]">
+			<button class="_button" :class="$style.controlButton" @click="showMenu">
+				<i class="ti ti-settings"></i>
+			</button>
+		</div>
+		<div :class="[$style.controlsChild, $style.controlsTime]">{{ hms(elapsedTimeMs) }}</div>
+		<div :class="[$style.controlsChild, $style.controlsVolume]">
+			<button class="_button" :class="$style.controlButton" @click="toggleMute">
+				<i v-if="volume === 0" class="ti ti-volume-3"></i>
+				<i v-else class="ti ti-volume"></i>
+			</button>
+			<MkMediaRange
+				v-model="volume"
+				:class="$style.volumeSeekbar"
+			/>
+		</div>
+		<MkMediaRange
+			v-model="rangePercent"
+			:class="$style.seekbarRoot"
+			:buffer="bufferedDataRatio"
+		/>
+	</div>
+</div>
+</template>
+
+<script lang="ts" setup>
+import { shallowRef, watch, computed, ref, onDeactivated, onActivated, onMounted } from 'vue';
+import * as Misskey from 'misskey-js';
+import type { MenuItem } from '@/types/menu.js';
+import { defaultStore } from '@/store.js';
+import { i18n } from '@/i18n.js';
+import * as os from '@/os.js';
+import bytes from '@/filters/bytes.js';
+import { hms } from '@/filters/hms.js';
+import MkMediaRange from '@/components/MkMediaRange.vue';
+import { iAmModerator } from '@/account.js';
+
+const props = defineProps<{
+	audio: Misskey.entities.DriveFile;
+}>();
+
+const audioEl = shallowRef<HTMLAudioElement>();
+
+// eslint-disable-next-line vue/no-setup-props-destructure
+const hide = ref((defaultStore.state.nsfw === 'force' || defaultStore.state.dataSaver.media) ? true : (props.audio.isSensitive && defaultStore.state.nsfw !== 'ignore'));
+
+// Menu
+const menuShowing = ref(false);
+
+function showMenu(ev: MouseEvent) {
+	let menu: MenuItem[] = [];
+
+	menu = [
+		// TODO: 再生キューに追加
+		{
+			text: i18n.ts.hide,
+			icon: 'ti ti-eye-off',
+			action: () => {
+				hide.value = true;
+			},
+		},
+	];
+
+	if (iAmModerator) {
+		menu.push({
+			type: 'divider',
+		}, {
+			text: props.audio.isSensitive ? i18n.ts.unmarkAsSensitive : i18n.ts.markAsSensitive,
+			icon: props.audio.isSensitive ? 'ti ti-eye' : 'ti ti-eye-exclamation',
+			danger: true,
+			action: () => toggleSensitive(props.audio),
+		});
+	}
+
+	menuShowing.value = true;
+	os.popupMenu(menu, ev.currentTarget ?? ev.target, {
+		align: 'right',
+		onClosing: () => {
+			menuShowing.value = false;
+		},
+	});
+}
+
+function toggleSensitive(file: Misskey.entities.DriveFile) {
+	os.apiWithDialog('drive/files/update', {
+		fileId: file.id,
+		isSensitive: !file.isSensitive,
+	});
+}
+
+// MediaControl: Common State
+const oncePlayed = ref(false);
+const isReady = ref(false);
+const isPlaying = ref(false);
+const isActuallyPlaying = ref(false);
+const elapsedTimeMs = ref(0);
+const durationMs = ref(0);
+const rangePercent = computed({
+	get: () => {
+		return (elapsedTimeMs.value / durationMs.value) || 0;
+	},
+	set: (to) => {
+		if (!audioEl.value) return;
+		audioEl.value.currentTime = to * durationMs.value / 1000;
+	},
+});
+const volume = ref(.5);
+const bufferedEnd = ref(0);
+const bufferedDataRatio = computed(() => {
+	if (!audioEl.value) return 0;
+	return bufferedEnd.value / audioEl.value.duration;
+});
+
+// MediaControl Events
+function togglePlayPause() {
+	if (!isReady.value || !audioEl.value) return;
+
+	if (isPlaying.value) {
+		audioEl.value.pause();
+		isPlaying.value = false;
+	} else {
+		audioEl.value.play();
+		isPlaying.value = true;
+		oncePlayed.value = true;
+	}
+}
+
+function toggleMute() {
+	if (volume.value === 0) {
+		volume.value = .5;
+	} else {
+		volume.value = 0;
+	}
+}
+
+let onceInit = false;
+let stopAudioElWatch: () => void;
+
+function init() {
+	if (onceInit) return;
+	onceInit = true;
+
+	stopAudioElWatch = watch(audioEl, () => {
+		if (audioEl.value) {
+			isReady.value = true;
+
+			function updateMediaTick() {
+				if (audioEl.value) {
+					try {
+						bufferedEnd.value = audioEl.value.buffered.end(0);
+					} catch (err) {
+						bufferedEnd.value = 0;
+					}
+
+					elapsedTimeMs.value = audioEl.value.currentTime * 1000;
+				}
+				window.requestAnimationFrame(updateMediaTick);
+			}
+
+			updateMediaTick();
+
+			audioEl.value.addEventListener('play', () => {
+				isActuallyPlaying.value = true;
+			});
+
+			audioEl.value.addEventListener('pause', () => {
+				isActuallyPlaying.value = false;
+				isPlaying.value = false;
+			});
+
+			audioEl.value.addEventListener('ended', () => {
+				oncePlayed.value = false;
+				isActuallyPlaying.value = false;
+				isPlaying.value = false;
+			});
+			
+			durationMs.value = audioEl.value.duration * 1000;
+			audioEl.value.addEventListener('durationchange', () => {
+				if (audioEl.value) {
+					durationMs.value = audioEl.value.duration * 1000;
+				}
+			});
+
+			audioEl.value.volume = volume.value;
+		}
+	}, {
+		immediate: true,
+	});
+}
+
+watch(volume, (to) => {
+	if (audioEl.value) audioEl.value.volume = to;
+});
+
+onMounted(() => {
+	init();
+});
+
+onActivated(() => {
+	init();
+});
+
+onDeactivated(() => {
+	isReady.value = false;
+	isPlaying.value = false;
+	isActuallyPlaying.value = false;
+	elapsedTimeMs.value = 0;
+	durationMs.value = 0;
+	bufferedEnd.value = 0;
+	hide.value = (defaultStore.state.nsfw === 'force' || defaultStore.state.dataSaver.media) ? true : (props.audio.isSensitive && defaultStore.state.nsfw !== 'ignore');
+	stopAudioElWatch();
+	onceInit = false;
+});
+</script>
+
+<style lang="scss" module>
+.audioContainer {
+	container-type: inline-size;
+	position: relative;
+	border: .5px solid var(--divider);
+	border-radius: var(--radius);
+	overflow: clip;
+}
+
+.sensitive {
+	position: relative;
+
+	&::after {
+		content: "";
+		position: absolute;
+		top: 0;
+		left: 0;
+		width: 100%;
+		height: 100%;
+		pointer-events: none;
+		border-radius: inherit;
+		box-shadow: inset 0 0 0 4px var(--warn);
+	}
+}
+
+.hidden {
+	width: 100%;
+	background: none;
+	border: none;
+	outline: none;
+	font: inherit;
+	color: inherit;
+	cursor: pointer;
+	padding: 12px 0;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	background: #000;
+}
+
+.hiddenTextWrapper {
+	text-align: center;
+	font-size: 0.8em;
+	color: #fff;
+}
+
+.audioControls {
+	display: grid;
+	grid-template-areas:
+		"left time . volume right"
+		"seekbar seekbar seekbar seekbar seekbar";
+	grid-template-columns: auto auto 1fr auto auto;
+	align-items: center;
+	gap: 4px 8px;
+	padding: 10px;
+}
+
+.controlsChild {
+	display: flex;
+	align-items: center;
+	gap: 4px;
+
+	.controlButton {
+		padding: 6px;
+		border-radius: calc(var(--radius) / 2);
+		font-size: 1.05rem;
+
+		&:hover {
+			color: var(--accent);
+			background-color: var(--accentedBg);
+		}
+	}
+}
+
+.controlsLeft {
+	grid-area: left;
+}
+
+.controlsRight {
+	grid-area: right;
+}
+
+.controlsTime {
+	grid-area: time;
+	font-size: .9rem;
+}
+
+.controlsVolume {
+	grid-area: volume;
+
+	.volumeSeekbar {
+		display: none;
+	}
+}
+
+.seekbarRoot {
+	grid-area: seekbar;
+}
+
+@container (min-width: 500px) {
+	.audioControls {
+		grid-template-areas: "left seekbar time volume right";
+		grid-template-columns: auto 1fr auto auto auto;
+	}
+
+	.controlsVolume {
+		.volumeSeekbar {
+			max-width: 90px;
+			display: block;
+			flex-grow: 1;
+		}
+	}
+}
+</style>

packages/frontend/src/components/MkMediaBanner.vue

@@ -5,20 +5,12 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 <template>
 <div :class="$style.root">
-	<div v-if="media.isSensitive && hide" :class="$style.sensitive" @click="hide = false">
+	<MkMediaAudio v-if="media.type.startsWith('audio') && media.type !== 'audio/midi'" :audio="media"/>
+	<div v-else-if="media.isSensitive && hide" :class="$style.sensitive" @click="hide = false">
 		<span style="font-size: 1.6em;"><i class="ti ti-alert-triangle"></i></span>
 		<b>{{ i18n.ts.sensitive }}</b>
 		<span>{{ i18n.ts.clickToShow }}</span>
 	</div>
-	<div v-else-if="media.type.startsWith('audio') && media.type !== 'audio/midi'" :class="$style.audio">
-		<audio
-			ref="audioEl"
-			:src="media.url"
-			:title="media.name"
-			controls
-			preload="metadata"
-		/>
-	</div>
 	<a
 		v-else :class="$style.download"
 		:href="media.url"
@@ -35,6 +27,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 import { shallowRef, watch, ref } from 'vue';
 import * as Misskey from 'misskey-js';
 import { i18n } from '@/i18n.js';
+import MkMediaAudio from '@/components/MkMediaAudio.vue';
 
 const props = withDefaults(defineProps<{
 	media: Misskey.entities.DriveFile;

packages/frontend/src/components/MkMediaRange.vue

@@ -0,0 +1,150 @@
+<!--
+SPDX-FileCopyrightText: syuilo and other misskey contributors
+SPDX-License-Identifier: AGPL-3.0-only
+-->
+
+<!-- Media系専用のinput range -->
+<template>
+<div :class="$style.controlsSeekbar" :style="sliderBgWhite ? '--sliderBg: rgba(255,255,255,.25);' : '--sliderBg: var(--scrollbarHandle);'">
+	<progress v-if="buffer !== undefined" :class="$style.buffer" :value="isNaN(buffer) ? 0 : buffer" min="0" max="1">{{ Math.round(buffer * 100) }}% buffered</progress>
+	<input v-model="model" :class="$style.seek" :style="`--value: ${modelValue * 100}%;`" type="range" min="0" max="1" step="any" @change="emit('dragEnded', modelValue)"/>
+</div>
+</template>
+
+<script setup lang="ts">
+import { computed, ModelRef } from 'vue';
+
+withDefaults(defineProps<{
+	buffer?: number;
+	sliderBgWhite?: boolean;
+}>(), {
+	buffer: undefined,
+	sliderBgWhite: false,
+});
+
+const emit = defineEmits<{
+	(ev: 'dragEnded', value: number): void;
+}>();
+
+// eslint-disable-next-line no-undef
+const model = defineModel({ required: true }) as ModelRef<string | number>;
+const modelValue = computed({
+	get: () => typeof model.value === 'number' ? model.value : parseFloat(model.value),
+	set: v => { model.value = v; },
+});
+</script>
+
+<style lang="scss" module>
+.controlsSeekbar {
+	position: relative;
+}
+
+.seek {
+	position: relative;
+	-webkit-appearance: none;
+	appearance: none;
+	background: transparent;
+	border: 0;
+	border-radius: 26px;
+	color: var(--accent);
+	display: block;
+	height: 19px;
+	margin: 0;
+	min-width: 0;
+	padding: 0;
+	transition: box-shadow .3s ease;
+	width: 100%;
+
+	&::-webkit-slider-runnable-track {
+		background-color: var(--sliderBg);
+		background-image: linear-gradient(to right,currentColor var(--value,0),transparent var(--value,0));
+		border: 0;
+		border-radius: 99rem;
+		height: 5px;
+		transition: box-shadow .3s ease;
+		user-select: none;
+	}
+
+	&::-moz-range-track {
+		background: transparent;
+		border: 0;
+		border-radius: 99rem;
+		height: 5px;
+		transition: box-shadow .3s ease;
+		user-select: none;
+		background-color: var(--sliderBg);
+	}
+
+	&::-webkit-slider-thumb {
+		-webkit-appearance: none;
+		appearance: none;
+		background: #fff;
+		border: 0;
+		border-radius: 100%;
+		box-shadow: 0 1px 1px rgba(35, 40, 47, .15),0 0 0 1px rgba(35, 40, 47, .2);
+		height: 13px;
+		margin-top: -4px;
+		position: relative;
+		transition: all .2s ease;
+		width: 13px;
+
+		&:active {
+			box-shadow: 0 1px 1px rgba(35, 40, 47, .15), 0 0 0 1px rgba(35, 40, 47, .15), 0 0 0 3px rgba(255, 255, 255, .5);
+		}
+	}
+
+	&::-moz-range-thumb {
+		background: #fff;
+		border: 0;
+		border-radius: 100%;
+		box-shadow: 0 1px 1px rgba(35, 40, 47, .15),0 0 0 1px rgba(35, 40, 47, .2);
+		height: 13px;
+		position: relative;
+		transition: all .2s ease;
+		width: 13px;
+
+		&:active {
+			box-shadow: 0 1px 1px rgba(35, 40, 47, .15), 0 0 0 1px rgba(35, 40, 47, .15), 0 0 0 3px rgba(255, 255, 255, .5);
+		}
+	}
+
+	&::-moz-range-progress {
+		background: currentColor;
+		border-radius: 99rem;
+		height: 5px;
+	}
+}
+
+.buffer {
+	appearance: none;
+	background: transparent;
+	color: var(--sliderBg);
+	border: 0;
+	border-radius: 99rem;
+	height: 5px;
+	left: 0;
+	margin-top: -2.5px;
+	padding: 0;
+	position: absolute;
+	top: 50%;
+	width: 100%;
+
+	&::-webkit-progress-bar {
+		background: transparent;
+	}
+
+	&::-webkit-progress-value {
+		background: currentColor;
+		border-radius: 100px;
+		min-width: 5px;
+		transition: width .2s ease;
+	}
+
+	&::-moz-progress-bar {
+		background: currentColor;
+		border-radius: 100px;
+		min-width: 5px;
+		transition: width .2s ease;
+	}
+}
+</style>

packages/frontend/src/components/MkMediaVideo.vue

@@ -4,68 +4,345 @@ SPDX-License-Identifier: AGPL-3.0-only
 -->
 
 <template>
-<div v-if="hide" :class="[$style.hidden, (video.isSensitive && defaultStore.state.highlightSensitiveMedia) && $style.sensitiveContainer]" @click="hide = false">
-	<!-- 【注意】dataSaverMode が有効になっている際には、hide が false になるまでサムネイルや動画を読み込まないようにすること -->
-	<div :class="$style.sensitive">
-		<b v-if="video.isSensitive" style="display: block;"><i class="ti ti-alert-triangle"></i> {{ i18n.ts.sensitive }}{{ defaultStore.state.dataSaver.media ? ` (${i18n.ts.video}${video.size ? ' ' + bytes(video.size) : ''})` : '' }}</b>
-		<b v-else style="display: block;"><i class="ti ti-movie"></i> {{ defaultStore.state.dataSaver.media && video.size ? bytes(video.size) : i18n.ts.video }}</b>
-		<span>{{ i18n.ts.clickToShow }}</span>
-	</div>
-</div>
-<div v-else :class="[$style.visible, (video.isSensitive && defaultStore.state.highlightSensitiveMedia) && $style.sensitiveContainer]">
-	<video
-		ref="videoEl"
-		:class="$style.video"
-		:poster="video.thumbnailUrl"
-		:title="video.comment"
-		:alt="video.comment"
-		preload="none"
-		controls
-		@contextmenu.stop
-	>
-		<source
-			:src="video.url"
+<div
+	ref="playerEl"
+	:class="[
+		$style.videoContainer,
+		controlsShowing && $style.active,
+		(video.isSensitive && defaultStore.state.highlightSensitiveMedia) && $style.sensitive,
+	]"
+	@mouseover="onMouseOver"
+	@mouseleave="onMouseLeave"
+	@contextmenu.stop
+>
+	<button v-if="hide" :class="$style.hidden" @click="hide = false">
+		<div :class="$style.hiddenTextWrapper">
+			<b v-if="video.isSensitive" style="display: block;"><i class="ti ti-eye-exclamation"></i> {{ i18n.ts.sensitive }}{{ defaultStore.state.dataSaver.media ? ` (${i18n.ts.video}${video.size ? ' ' + bytes(video.size) : ''})` : '' }}</b>
+			<b v-else style="display: block;"><i class="ti ti-photo"></i> {{ defaultStore.state.dataSaver.media && video.size ? bytes(video.size) : i18n.ts.video }}</b>
+			<span style="display: block;">{{ i18n.ts.clickToShow }}</span>
+		</div>
+	</button>
+	<div v-else :class="$style.videoRoot" @click.self="togglePlayPause">
+		<video
+			ref="videoEl"
+			:class="$style.video"
+			:poster="video.thumbnailUrl ?? undefined"
+			:title="video.comment ?? undefined"
+			:alt="video.comment"
+			preload="metadata"
+			playsinline
 		>
-	</video>
-	<i class="ti ti-eye-off" :class="$style.hide" @click="hide = true"></i>
+			<source :src="video.url">
+		</video>
+		<button v-if="isReady && !isPlaying" class="_button" :class="$style.videoOverlayPlayButton" @click="togglePlayPause"><i class="ti ti-player-play-filled"></i></button>
+		<div v-else-if="!isActuallyPlaying" :class="$style.videoLoading">
+			<MkLoading/>
+		</div>
+		<i class="ti ti-eye-off" :class="$style.hide" @click="hide = true"></i>
+		<div :class="$style.indicators">
+			<div v-if="video.comment" :class="$style.indicator">ALT</div>
+			<div v-if="video.isSensitive" :class="$style.indicator" style="color: var(--warn);" :title="i18n.ts.sensitive"><i class="ti ti-eye-exclamation"></i></div>
+		</div>
+		<div :class="$style.videoControls" @click.self="togglePlayPause">
+			<div :class="[$style.controlsChild, $style.controlsLeft]">
+				<button class="_button" :class="$style.controlButton" @click="togglePlayPause">
+					<i v-if="isPlaying" class="ti ti-player-pause-filled"></i>
+					<i v-else class="ti ti-player-play-filled"></i>
+				</button>
+			</div>
+			<div :class="[$style.controlsChild, $style.controlsRight]">
+				<button class="_button" :class="$style.controlButton" @click="showMenu">
+					<i class="ti ti-settings"></i>
+				</button>
+				<button class="_button" :class="$style.controlButton" @click="toggleFullscreen">
+					<i v-if="isFullscreen" class="ti ti-arrows-minimize"></i>
+					<i v-else class="ti ti-arrows-maximize"></i>
+				</button>
+			</div>
+			<div :class="[$style.controlsChild, $style.controlsTime]">{{ hms(elapsedTimeMs) }}</div>
+			<div :class="[$style.controlsChild, $style.controlsVolume]">
+				<button class="_button" :class="$style.controlButton" @click="toggleMute">
+					<i v-if="volume === 0" class="ti ti-volume-3"></i>
+					<i v-else class="ti ti-volume"></i>
+				</button>
+				<MkMediaRange
+					v-model="volume"
+					:sliderBgWhite="true"
+					:class="$style.volumeSeekbar"
+				/>
+			</div>
+			<MkMediaRange
+				v-model="rangePercent"
+				:sliderBgWhite="true"
+				:class="$style.seekbarRoot"
+				:buffer="bufferedDataRatio"
+			/>
+		</div>
+	</div>
 </div>
 </template>
 
 <script lang="ts" setup>
-import { ref, shallowRef, watch } from 'vue';
+import { ref, shallowRef, computed, watch, onDeactivated, onActivated, onMounted } from 'vue';
 import * as Misskey from 'misskey-js';
+import type { MenuItem } from '@/types/menu.js';
 import bytes from '@/filters/bytes.js';
+import { hms } from '@/filters/hms.js';
 import { defaultStore } from '@/store.js';
 import { i18n } from '@/i18n.js';
+import * as os from '@/os.js';
+import { isFullscreenNotSupported } from '@/scripts/device-kind.js';
 import hasAudio from '@/scripts/media-has-audio.js';
+import MkMediaRange from '@/components/MkMediaRange.vue';
+import { iAmModerator } from '@/account.js';
 
 const props = defineProps<{
 	video: Misskey.entities.DriveFile;
 }>();
 
+// eslint-disable-next-line vue/no-setup-props-destructure
 const hide = ref((defaultStore.state.nsfw === 'force' || defaultStore.state.dataSaver.media) ? true : (props.video.isSensitive && defaultStore.state.nsfw !== 'ignore'));
 
-const videoEl = shallowRef<HTMLVideoElement>();
+// Menu
+const menuShowing = ref(false);
 
-watch(videoEl, () => {
-	if (videoEl.value) {
-		videoEl.value.volume = 0.3;
-		hasAudio(videoEl.value).then(had => {
-			if (!had) {
-				videoEl.value.loop = videoEl.value.muted = true;
-				videoEl.value.play();
-			}
+function showMenu(ev: MouseEvent) {
+	let menu: MenuItem[] = [];
+
+	menu = [
+		// TODO: 再生キューに追加
+		{
+			text: i18n.ts.hide,
+			icon: 'ti ti-eye-off',
+			action: () => {
+				hide.value = true;
+			},
+		},
+	];
+
+	if (iAmModerator) {
+		menu.push({
+			type: 'divider',
+		}, {
+			text: props.video.isSensitive ? i18n.ts.unmarkAsSensitive : i18n.ts.markAsSensitive,
+			icon: props.video.isSensitive ? 'ti ti-eye' : 'ti ti-eye-exclamation',
+			danger: true,
+			action: () => toggleSensitive(props.video),
 		});
 	}
+
+	menuShowing.value = true;
+	os.popupMenu(menu, ev.currentTarget ?? ev.target, {
+		align: 'right',
+		onClosing: () => {
+			menuShowing.value = false;
+		},
+	});
+}
+
+function toggleSensitive(file: Misskey.entities.DriveFile) {
+	os.apiWithDialog('drive/files/update', {
+		fileId: file.id,
+		isSensitive: !file.isSensitive,
+	});
+}
+
+// MediaControl: Video State
+const videoEl = shallowRef<HTMLVideoElement>();
+const playerEl = shallowRef<HTMLDivElement>();
+const isHoverring = ref(false);
+const controlsShowing = computed(() => {
+	if (!oncePlayed.value) return true;
+	if (isHoverring.value) return true;
+	if (menuShowing.value) return true;
+	return false;
+});
+const isFullscreen = ref(false);
+let controlStateTimer: string | number;
+
+// MediaControl: Common State
+const oncePlayed = ref(false);
+const isReady = ref(false);
+const isPlaying = ref(false);
+const isActuallyPlaying = ref(false);
+const elapsedTimeMs = ref(0);
+const durationMs = ref(0);
+const rangePercent = computed({
+	get: () => {
+		return (elapsedTimeMs.value / durationMs.value) || 0;
+	},
+	set: (to) => {
+		if (!videoEl.value) return;
+		videoEl.value.currentTime = to * durationMs.value / 1000;
+	},
+});
+const volume = ref(.5);
+const bufferedEnd = ref(0);
+const bufferedDataRatio = computed(() => {
+	if (!videoEl.value) return 0;
+	return bufferedEnd.value / videoEl.value.duration;
+});
+
+// MediaControl Events
+function onMouseOver() {
+	if (controlStateTimer) {
+		clearTimeout(controlStateTimer);
+	}
+	isHoverring.value = true;
+}
+
+function onMouseLeave() {
+	controlStateTimer = window.setTimeout(() => {
+		isHoverring.value = false;
+	}, 100);
+}
+
+function togglePlayPause() {
+	if (!isReady.value || !videoEl.value) return;
+
+	if (isPlaying.value) {
+		videoEl.value.pause();
+		isPlaying.value = false;
+	} else {
+		videoEl.value.play();
+		isPlaying.value = true;
+		oncePlayed.value = true;
+	}
+}
+
+function toggleFullscreen() {
+	if (isFullscreenNotSupported && videoEl.value) {
+		if (isFullscreen.value) {
+			// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+			//@ts-ignore
+			videoEl.value.webkitExitFullscreen();
+			isFullscreen.value = false;
+		} else {
+			// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+			//@ts-ignore
+			videoEl.value.webkitEnterFullscreen();
+			isFullscreen.value = true;
+		}
+	} else if (playerEl.value) {
+		if (isFullscreen.value) {
+			document.exitFullscreen();
+			isFullscreen.value = false;
+		} else {
+			playerEl.value.requestFullscreen({ navigationUI: 'hide' });
+			isFullscreen.value = true;
+		}
+	}
+}
+
+function toggleMute() {
+	if (volume.value === 0) {
+		volume.value = .5;
+	} else {
+		volume.value = 0;
+	}
+}
+
+let onceInit = false;
+let stopVideoElWatch: () => void;
+
+function init() {
+	if (onceInit) return;
+	onceInit = true;
+
+	stopVideoElWatch = watch(videoEl, () => {
+		if (videoEl.value) {
+			isReady.value = true;
+
+			function updateMediaTick() {
+				if (videoEl.value) {
+					try {
+						bufferedEnd.value = videoEl.value.buffered.end(0);
+					} catch (err) {
+						bufferedEnd.value = 0;
+					}
+
+					elapsedTimeMs.value = videoEl.value.currentTime * 1000;
+				}
+				window.requestAnimationFrame(updateMediaTick);
+			}
+
+			updateMediaTick();
+
+			videoEl.value.addEventListener('play', () => {
+				isActuallyPlaying.value = true;
+			});
+
+			videoEl.value.addEventListener('pause', () => {
+				isActuallyPlaying.value = false;
+				isPlaying.value = false;
+			});
+
+			videoEl.value.addEventListener('ended', () => {
+				oncePlayed.value = false;
+				isActuallyPlaying.value = false;
+				isPlaying.value = false;
+			});
+
+			durationMs.value = videoEl.value.duration * 1000;
+			videoEl.value.addEventListener('durationchange', () => {
+				if (videoEl.value) {
+					durationMs.value = videoEl.value.duration * 1000;
+				}
+			});
+
+			videoEl.value.volume = volume.value;
+			hasAudio(videoEl.value).then(had => {
+				if (!had && videoEl.value) {
+					videoEl.value.loop = videoEl.value.muted = true;
+					videoEl.value.play();
+				}
+			});
+		}
+	}, {
+		immediate: true,
+	});
+}
+
+watch(volume, (to) => {
+	if (videoEl.value) videoEl.value.volume = to;
+});
+
+watch(hide, (to) => {
+	if (to && isFullscreen.value) {
+		document.exitFullscreen();
+		isFullscreen.value = false;
+	}
+});
+
+onMounted(() => {
+	init();
+});
+
+onActivated(() => {
+	init();
+});
+
+onDeactivated(() => {
+	isReady.value = false;
+	isPlaying.value = false;
+	isActuallyPlaying.value = false;
+	elapsedTimeMs.value = 0;
+	durationMs.value = 0;
+	bufferedEnd.value = 0;
+	hide.value = (defaultStore.state.nsfw === 'force' || defaultStore.state.dataSaver.media) ? true : (props.video.isSensitive && defaultStore.state.nsfw !== 'ignore');
+	stopVideoElWatch();
+	onceInit = false;
 });
 </script>
 
 <style lang="scss" module>
-.visible {
+.videoContainer {
+	container-type: inline-size;
 	position: relative;
+	overflow: clip;
 }
 
-.sensitiveContainer {
+.sensitive {
 	position: relative;
 
 	&::after {
@@ -81,44 +358,197 @@ watch(videoEl, () => {
 	}
 }
 
+.indicators {
+	display: inline-flex;
+	position: absolute;
+	top: 10px;
+	left: 10px;
+	pointer-events: none;
+	opacity: .5;
+	gap: 6px;
+}
+
+.indicator {
+	/* Hardcode to black because either --bg or --fg makes it hard to read in dark/light mode */
+	background-color: black;
+	border-radius: 6px;
+	color: var(--accentLighten);
+	display: inline-block;
+	font-weight: bold;
+	font-size: 0.8em;
+	padding: 2px 5px;
+}
+
 .hide {
 	display: block;
 	position: absolute;
 	border-radius: 6px;
 	background-color: var(--fg);
 	color: var(--accentLighten);
-	font-size: 14px;
+	font-size: 12px;
 	opacity: .5;
-	padding: 3px 6px;
+	padding: 5px 8px;
 	text-align: center;
 	cursor: pointer;
 	top: 12px;
 	right: 12px;
 }
 
-.video {
-	display: flex;
-	justify-content: center;
-	align-items: center;
-	font-size: 3.5em;
-	overflow: hidden;
-	background-position: center;
-	background-size: cover;
+.hidden {
 	width: 100%;
-	height: 100%;
+	background: none;
+	border: none;
+	outline: none;
+	font: inherit;
+	color: inherit;
+	cursor: pointer;
+	padding: 120px 0;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	background: #000;
 }
 
-.hidden {
-	display: flex;
-	justify-content: center;
-	align-items: center;
-	background: #111;
+.hiddenTextWrapper {
+	text-align: center;
+	font-size: 0.8em;
 	color: #fff;
 }
 
-.sensitive {
-	display: table-cell;
-	text-align: center;
-	font-size: 12px;
+.videoRoot {
+	background: #000;
+	position: relative;
+	width: 100%;
+	height: 100%;
+	object-fit: contain;
+}
+
+.video {
+	display: block;
+	height: 100%;
+	width: 100%;
+	pointer-events: none;
+}
+
+.videoOverlayPlayButton {
+	position: absolute;
+	top: 50%;
+	left: 50%;
+	transform: translate(-50%,-50%);
+
+	opacity: 0;
+	transition: opacity .4s ease-in-out;
+
+	background: var(--accent);
+	color: #fff;
+	padding: 1rem;
+	border-radius: 99rem;
+
+	font-size: 1.1rem;
+}
+
+.videoLoading {
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
+
+.videoControls {
+	display: grid;
+	grid-template-areas:
+		"left time . volume right"
+		"seekbar seekbar seekbar seekbar seekbar";
+	grid-template-columns: auto auto 1fr auto auto;
+	align-items: center;
+	gap: 4px 8px;
+	pointer-events: none;
+
+	padding: 35px 10px 10px 10px;
+	background: linear-gradient(rgba(0, 0, 0, 0),rgba(0, 0, 0, .75));
+
+	position: absolute;
+	left: 0;
+	right: 0;
+	bottom: 0;
+
+	transform: translateY(100%);
+	pointer-events: none;
+	opacity: 0;
+	transition: opacity .4s ease-in-out, transform .4s ease-in-out;
+}
+
+.active {
+	.videoControls {
+		transform: translateY(0);
+		opacity: 1;
+		pointer-events: auto;
+	}
+
+	.videoOverlayPlayButton {
+		opacity: 1;
+	}
+}
+
+.controlsChild {
+	display: flex;
+	align-items: center;
+	gap: 4px;
+	color: #fff;
+
+	.controlButton {
+		padding: 6px;
+		border-radius: calc(var(--radius) / 2);
+		transition: background-color .2s ease-in-out;
+		font-size: 1.05rem;
+
+		&:hover {
+			background-color: var(--accent);
+		}
+	}
+}
+
+.controlsLeft {
+	grid-area: left;
+}
+
+.controlsRight {
+	grid-area: right;
+}
+
+.controlsTime {
+	grid-area: time;
+	font-size: .9rem;
+}
+
+.controlsVolume {
+	grid-area: volume;
+
+	.volumeSeekbar {
+		display: none;
+	}
+}
+
+.seekbarRoot {
+	grid-area: seekbar;
+}
+
+@container (min-width: 500px) {
+	.videoControls {
+		grid-template-areas: "left seekbar time volume right";
+		grid-template-columns: auto 1fr auto auto auto;
+	}
+
+	.controlsVolume {
+		.volumeSeekbar {
+			max-width: 90px;
+			display: block;
+			flex-grow: 1;
+		}
+	}
 }
 </style>

packages/frontend/src/components/MkReactionsViewer.reaction.vue

@@ -10,6 +10,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 	class="_button"
 	:class="[$style.root, { [$style.gamingDark]: gamingType === 'dark',[$style.gamingLight]: gamingType === 'light' ,[$style.reacted]: note.myReaction == reaction, [$style.canToggle]: canToggle, [$style.small]: defaultStore.state.reactionsDisplaySize === 'small', [$style.large]: defaultStore.state.reactionsDisplaySize === 'large' }]"
 	@click="toggleReaction()"
+	@contextmenu.prevent.stop="menu"
 >
 	<MkReactionIcon :class="defaultStore.state.limitWidthOfReaction ? $style.limitWidth : ''" :reaction="reaction" :emojiUrl="note.reactionEmojis[reaction.substring(1, reaction.length - 1)]"/>
 	<span :class="[$style.count,{ [$style.gamingDark]: gamingType === 'dark',[$style.gamingLight]: gamingType === 'light'}]">{{ count }}</span>
@@ -21,6 +22,7 @@ import {computed, inject, onMounted, ref, shallowRef, watch} from 'vue';
 import * as Misskey from 'misskey-js';
 import XDetails from '@/components/MkReactionsViewer.details.vue';
 import MkReactionIcon from '@/components/MkReactionIcon.vue';
+import MkCustomEmojiDetailedDialog from './MkCustomEmojiDetailedDialog.vue';
 import * as os from '@/os.js';
 import { misskeyApi, misskeyApiGet } from '@/scripts/misskey-api.js';
 import { useTooltip } from '@/scripts/use-tooltip.js';
@@ -100,6 +102,22 @@ async function toggleReaction() {
 	}
 }
 
+async function menu(ev) {
+	if (!canToggle.value) return;
+	if (!props.reaction.includes(":")) return;
+	os.popupMenu([{
+		text: i18n.ts.info,
+		icon: 'ti ti-info-circle',
+		action: async () => {
+			os.popup(MkCustomEmojiDetailedDialog, {
+				emoji: await misskeyApiGet('emoji', {
+					name: props.reaction.replace(/:/g, '').replace(/@\./, ''),
+				}),
+			});
+		},
+	}], ev.currentTarget ?? ev.target);
+}
+
 function anime() {
 	if (document.hidden) return;
 	if (!defaultStore.state.animation) return;

packages/frontend/src/components/global/MkCustomEmoji.vue

@@ -24,9 +24,11 @@ import { getProxiedImageUrl, getStaticImageUrl } from '@/scripts/media-proxy.js'
 import { defaultStore } from '@/store.js';
 import { customEmojisMap } from '@/custom-emojis.js';
 import * as os from '@/os.js';
+import { misskeyApiGet } from '@/scripts/misskey-api.js';
 import copyToClipboard from '@/scripts/copy-to-clipboard.js';
 import * as sound from '@/scripts/sound.js';
 import { i18n } from '@/i18n.js';
+import MkCustomEmojiDetailedDialog from '@/components/MkCustomEmojiDetailedDialog.vue';
 
 const props = defineProps<{
 	name: string;
@@ -101,7 +103,19 @@ function onClick(ev: MouseEvent) {
 				react(`:${props.name}:`);
 				sound.playMisskeySfx('reaction');
 			},
-		}] : [])], ev.currentTarget ?? ev.target);
+		}] : []), {
+			text: i18n.ts.info,
+			icon: 'ti ti-info-circle',
+			action: async () => {
+				os.popup(MkCustomEmojiDetailedDialog, {
+					emoji: await misskeyApiGet('emoji', {
+						name: customEmojiName.value,
+					}),
+				}, {
+					anchor: ev.target,
+				});
+			},
+		}], ev.currentTarget ?? ev.target);
 	}
 }
 </script>

packages/frontend/src/components/global/MkMisskeyFlavoredMarkdown.ts

@@ -95,7 +95,12 @@ export default function(props: MfmProps, context: SetupContext<MfmEvents>) {
 		if (t == null || typeof t === 'boolean') return null;
 		return t.match(/^[0-9.]+s$/) ? t : null;
 	};
-
+	
+	const validColor = (c: string | null | undefined): string | null => {
+		if (c == null) return null;
+		return c.match(/^[0-9a-f]{3,6}$/i) ? c : null;
+	};
+	
 	const useAnim = defaultStore.state.advancedMfm && defaultStore.state.animatedMfm;
 
 	/**
@@ -290,17 +295,30 @@ export default function(props: MfmProps, context: SetupContext<MfmEvents>) {
 						break;
 					}
 					case 'fg': {
-						let color = token.props.args.color;
-						if (!/^[0-9a-f]{3,6}$/i.test(color)) color = 'f00';
+						let color = validColor(token.props.args.color);
+						color = color ?? 'f00';
 						style = `color: #${color}; overflow-wrap: anywhere;`;
 						break;
 					}
 					case 'bg': {
-						let color = token.props.args.color;
-						if (!/^[0-9a-f]{3,6}$/i.test(color)) color = 'f00';
+						let color = validColor(token.props.args.color);
+						color = color ?? 'f00';
 						style = `background-color: #${color}; overflow-wrap: anywhere;`;
 						break;
 					}
+					case 'border': {
+						let color = validColor(token.props.args.color);
+						color = color ? `#${color}` : 'var(--accent)';
+						let b_style = token.props.args.style;
+						if (
+							!['hidden', 'dotted', 'dashed', 'solid', 'double', 'groove', 'ridge', 'inset', 'outset']
+								.includes(b_style)
+						) b_style = 'solid';
+						const width = parseFloat(token.props.args.width ?? '1');
+						const radius = parseFloat(token.props.args.radius ?? '0');
+						style = `border: ${width}px ${b_style} ${color}; border-radius: ${radius}px`;
+						break;
+					}
 					case 'ruby': {
 						if (token.children.length === 1) {
 							const child = token.children[0];

packages/frontend/src/const.ts

@@ -112,4 +112,4 @@ export const DEFAULT_SERVER_ERROR_IMAGE_URL = 'https://xn--931a.moe/assets/error
 export const DEFAULT_NOT_FOUND_IMAGE_URL = 'https://xn--931a.moe/assets/not-found.jpg';
 export const DEFAULT_INFO_IMAGE_URL = 'https://xn--931a.moe/assets/info.jpg';
 
-export const MFM_TAGS = ['tada', 'jelly', 'twitch', 'shake', 'spin', 'jump', 'bounce', 'flip', 'x2', 'x3', 'x4', 'scale', 'position', 'fg', 'bg', 'font', 'blur', 'rainbow', 'sparkle', 'rotate', 'ruby', 'unixtime'];
+export const MFM_TAGS = ['tada', 'jelly', 'twitch', 'shake', 'spin', 'jump', 'bounce', 'flip', 'x2', 'x3', 'x4', 'scale', 'position', 'fg', 'bg', 'border', 'font', 'blur', 'rainbow', 'sparkle', 'rotate', 'ruby', 'unixtime'];

packages/frontend/src/filters/hms.ts

@@ -0,0 +1,65 @@
+/*
+ * SPDX-FileCopyrightText: syuilo and other misskey contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+
+import { i18n } from '@/i18n.js';
+
+export function hms(ms: number, options: {
+	textFormat?: 'colon' | 'locale';
+	enableSeconds?: boolean;
+	enableMs?: boolean;
+}) {
+	const _options = {
+		textFormat: 'colon',
+		enableSeconds: true,
+		enableMs: false,
+		...options,
+	};
+
+	const res: {
+		h?: string;
+		m?: string;
+		s?: string;
+		ms?: string;
+	} = {};
+
+	// ミリ秒を秒に変換
+	let seconds = Math.floor(ms / 1000);
+
+	// 小数点以下の値（２位まで）
+	const mili = ms - seconds * 1000;
+
+	// 時間を計算
+	const hours = Math.floor(seconds / 3600);
+	res.h = format(hours);
+	seconds %= 3600;
+
+	// 分を計算
+	const minutes = Math.floor(seconds / 60);
+	res.m = format(minutes);
+	seconds %= 60;
+
+	// 残った秒数を取得
+	seconds = seconds % 60;
+	res.s = format(seconds);
+
+	// ミリ秒を取得
+	res.ms = format(Math.floor(mili / 10));
+
+	// 結果を返す
+	if (_options.textFormat === 'locale') {
+		res.h += i18n.ts._time.hour;
+		res.m += i18n.ts._time.minute;
+		res.s += i18n.ts._time.second;
+	}
+	return [
+		res.h.startsWith('00') ? undefined : res.h,
+		res.m,
+		(_options.enableSeconds ? res.s : undefined),
+	].filter(v => v !== undefined).join(_options.textFormat === 'colon' ? ':' : ' ') + (_options.enableMs ? _options.textFormat === 'colon' ? `.${res.ms}` : ` ${res.ms}` : '');
+}
+
+function format(n: number) {
+	return n.toString().padStart(2, '0');
+}

packages/frontend/src/global/router/definition.ts

@@ -523,6 +523,10 @@ const routes = [{
 	path: '/timeline/antenna/:antennaId',
 	component: page(() => import('@/pages/antenna-timeline.vue')),
 	loginRequired: true,
+}, {
+	path: '/games',
+	component: page(() => import('@/pages/games.vue')),
+	loginRequired: true,
 }, {
 	path: '/clicker',
 	component: page(() => import('@/pages/clicker.vue')),

packages/frontend/src/navbar.ts

@@ -4,6 +4,7 @@
  */
 
 import { computed, reactive } from 'vue';
+import { clearCache } from './scripts/clear-cache.js';
 import { $i } from '@/account.js';
 import { miLocalStorage } from '@/local-storage.js';
 import { openInstanceMenu, openToolsMenu } from '@/ui/_common_/common.js';
@@ -12,7 +13,6 @@ import * as os from '@/os.js';
 import { i18n } from '@/i18n.js';
 import { ui } from '@/config.js';
 import { unisonReload } from '@/scripts/unison-reload.js';
-import { clearCache } from './scripts/clear-cache.js';
 
 export const navbarItemDef = reactive({
 	notifications: {
@@ -117,6 +117,11 @@ export const navbarItemDef = reactive({
 		show: computed(() => $i != null),
 		to: '/my/achievements',
 	},
+	games: {
+		title: 'Misskey Games',
+		icon: 'ti ti-device-gamepad',
+		to: '/games',
+	},
 	ui: {
 		title: i18n.ts.switchUi,
 		icon: 'ti ti-devices',

packages/frontend/src/pages/drop-and-fusion.vue

@@ -4,16 +4,16 @@ SPDX-License-Identifier: AGPL-3.0-only
 -->
 
 <template>
-<MkSpacer :contentMax="800">
-	<Transition
-		:enterActiveClass="$style.transition_zoom_enterActive"
-		:leaveActiveClass="$style.transition_zoom_leaveActive"
-		:enterFromClass="$style.transition_zoom_enterFrom"
-		:leaveToClass="$style.transition_zoom_leaveTo"
-		:moveClass="$style.transition_zoom_move"
-		mode="out-in"
-	>
-		<div v-if="!gameStarted" :class="$style.root">
+<Transition
+	:enterActiveClass="$style.transition_zoom_enterActive"
+	:leaveActiveClass="$style.transition_zoom_leaveActive"
+	:enterFromClass="$style.transition_zoom_enterFrom"
+	:leaveToClass="$style.transition_zoom_leaveTo"
+	:moveClass="$style.transition_zoom_move"
+	mode="out-in"
+>
+	<MkSpacer v-if="!gameStarted" :contentMax="800">
+		<div :class="$style.root">
 			<div class="_gaps">
 				<div :class="$style.frame" style="text-align: center;">
 					<div :class="$style.frameInner">
@@ -27,6 +27,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 								<option value="normal">NORMAL</option>
 								<option value="square">SQUARE</option>
 								<option value="yen">YEN</option>
+								<option value="sweets">SWEETS</option>
 							</MkSelect>
 							<MkButton primary gradate large rounded inline @click="start">{{ i18n.ts.start }}</MkButton>
 						</div>
@@ -48,7 +49,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 								<div v-for="r in ranking" :key="r.id" :class="$style.rankingRecord">
 									<MkAvatar :link="true" style="width: 24px; height: 24px; margin-right: 4px;" :user="r.user"/>
 									<MkUserName :user="r.user" :nowrap="true"/>
-									<b style="margin-left: auto;">{{ r.score.toLocaleString() }} {{ gameMode === 'yen' ? '円' : 'pt' }}</b>
+									<b style="margin-left: auto;">{{ r.score.toLocaleString() }} {{ getScoreUnit(gameMode) }}</b>
 								</div>
 							</div>
 							<div v-else>{{ i18n.ts.loading }}</div>
@@ -78,15 +79,13 @@ SPDX-License-Identifier: AGPL-3.0-only
 				</div>
 			</div>
 		</div>
-		<div v-else>
-			<XGame :gameMode="gameMode" :mute="mute" @end="onGameEnd"/>
-		</div>
-	</Transition>
-</MkSpacer>
+	</MkSpacer>
+	<XGame v-else :gameMode="gameMode" :mute="mute" @end="onGameEnd"/>
+</Transition>
 </template>
 
 <script lang="ts" setup>
-import { ref, watch } from 'vue';
+import { computed, ref, watch } from 'vue';
 import XGame from './drop-and-fusion.game.vue';
 import { definePageMetadata } from '@/scripts/page-metadata.js';
 import MkButton from '@/components/MkButton.vue';
@@ -95,7 +94,7 @@ import MkSelect from '@/components/MkSelect.vue';
 import MkSwitch from '@/components/MkSwitch.vue';
 import { misskeyApiGet } from '@/scripts/misskey-api.js';
 
-const gameMode = ref<'normal' | 'square' | 'yen'>('normal');
+const gameMode = ref<'normal' | 'square' | 'yen' | 'sweets'>('normal');
 const gameStarted = ref(false);
 const mute = ref(false);
 const ranking = ref(null);
@@ -104,6 +103,14 @@ watch(gameMode, async () => {
 	ranking.value = await misskeyApiGet('bubble-game/ranking', { gameMode: gameMode.value });
 }, { immediate: true });
 
+function getScoreUnit(gameMode: string) {
+	return gameMode === 'normal' ? 'pt' :
+		gameMode === 'square' ? 'pt' :
+		gameMode === 'yen' ? '円' :
+		gameMode === 'sweets' ? 'kcal' :
+		'' as never;
+}
+
 async function start() {
 	gameStarted.value = true;
 }

packages/frontend/src/pages/emojis.emoji.vue

@@ -22,17 +22,14 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 <script lang="ts" setup>
 import * as os from '@/os.js';
+import * as Misskey from 'misskey-js';
 import { misskeyApiGet } from '@/scripts/misskey-api.js';
 import copyToClipboard from '@/scripts/copy-to-clipboard.js';
 import { i18n } from '@/i18n.js';
+import MkCustomEmojiDetailedDialog from '@/components/MkCustomEmojiDetailedDialog.vue';
 
 const props = defineProps<{
-  emoji: {
-    name: string;
-    aliases: string[];
-    category: string;
-    url: string;
-  };
+  emoji: Misskey.entities.EmojiSimple;
   request?: boolean;
 }>();
 
@@ -50,12 +47,13 @@ function menu(ev) {
 	}, {
 		text: i18n.ts.info,
 		icon: 'ti ti-info-circle',
-		action: () => {
-			misskeyApiGet('emoji', { name: props.emoji.name }).then(res => {
-				os.alert({
-					type: 'info',
-					text: `License: ${res.license}`,
-				});
+		action: async () => {
+			os.popup(MkCustomEmojiDetailedDialog, {
+				emoji: await misskeyApiGet('emoji', {
+					name: props.emoji.name,
+				})
+			}, {
+				anchor: ev.target,
 			});
 		},
 	}], ev.currentTarget ?? ev.target);

packages/frontend/src/pages/flash/flash-edit.vue

@@ -11,7 +11,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 			<MkInput v-model="title">
 				<template #label>{{ i18n.ts._play.title }}</template>
 			</MkInput>
-			<MkTextarea v-model="summary">
+			<MkTextarea v-model="summary" :mfmAutocomplete="true" :mfmPreview="true">
 				<template #label>{{ i18n.ts._play.summary }}</template>
 			</MkTextarea>
 			<MkButton primary @click="selectPreset">{{ i18n.ts.selectFromPresets }}<i class="ti ti-chevron-down"></i></MkButton>

packages/frontend/src/pages/flash/flash.vue

@@ -25,7 +25,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 					<div v-else :class="$style.ready">
 						<div class="_panel main">
 							<div class="title">{{ flash.title }}</div>
-							<div class="summary">{{ flash.summary }}</div>
+							<div class="summary"><Mfm :text="flash.summary"/></div>
 							<MkButton class="start" gradate rounded large @click="start">Play</MkButton>
 							<div class="info">
 								<span v-tooltip="i18n.ts.numberOfLikes"><i class="ti ti-heart"></i> {{ flash.likedCount }}</span>

packages/frontend/src/pages/games.vue

@@ -0,0 +1,27 @@
+<!--
+SPDX-FileCopyrightText: syuilo and other misskey contributors
+SPDX-License-Identifier: AGPL-3.0-only
+-->
+
+<template>
+<MkStickyContainer>
+	<template #header><MkPageHeader/></template>
+	<MkSpacer :contentMax="800">
+		<div class="_panel">
+			<MkA to="/bubble-game">
+				<img src="/client-assets/drop-and-fusion/logo.png" style="display: block; max-width: 100%; max-height: 200px; margin: auto;"/>
+			</MkA>
+		</div>
+	</MkSpacer>
+</MkStickyContainer>
+</template>
+
+<script lang="ts" setup>
+import { i18n } from '@/i18n.js';
+import { definePageMetadata } from '@/scripts/page-metadata.js';
+
+definePageMetadata({
+	title: 'Misskey Games',
+	icon: 'ti ti-device-gamepad',
+});
+</script>

packages/frontend/src/pages/settings/general.vue

@@ -222,9 +222,11 @@ SPDX-License-Identifier: AGPL-3.0-only
 		<div class="_gaps">
 			<MkFolder>
 				<template #label>{{ i18n.ts.additionalEmojiDictionary }}</template>
-				<div v-for="lang in emojiIndexLangs" class="_buttons">
-					<MkButton @click="downloadEmojiIndex(lang)"><i class="ti ti-download"></i> {{ lang }}{{ defaultStore.reactiveState.additionalUnicodeEmojiIndexes.value[lang] ? ` (${ i18n.ts.installed })` : '' }}</MkButton>
-					<MkButton v-if="defaultStore.reactiveState.additionalUnicodeEmojiIndexes.value[lang]" danger @click="removeEmojiIndex(lang)"><i class="ti ti-trash"></i> {{ i18n.ts.remove }}</MkButton>
+				<div class="_buttons">
+					<template v-for="lang in emojiIndexLangs" :key="lang">
+						<MkButton v-if="defaultStore.reactiveState.additionalUnicodeEmojiIndexes.value[lang]" danger @click="removeEmojiIndex(lang)"><i class="ti ti-trash"></i> {{ i18n.ts.remove }} ({{ getEmojiIndexLangName(lang) }})</MkButton>
+						<MkButton v-else @click="downloadEmojiIndex(lang)"><i class="ti ti-download"></i> {{ getEmojiIndexLangName(lang) }}{{ defaultStore.reactiveState.additionalUnicodeEmojiIndexes.value[lang] ? ` (${ i18n.ts.installed })` : '' }}</MkButton>
+					</template>
 				</div>
 			</MkFolder>
 			<FormLink to="/settings/deck">{{ i18n.ts.deck }}</FormLink>
@@ -396,15 +398,29 @@ watch([
 	await reloadAsk();
 });
 
-const emojiIndexLangs = ['en-US'];
+const emojiIndexLangs = ['en-US', 'ja-JP', 'ja-JP_hira'] as const;
 
-function downloadEmojiIndex(lang: string) {
+function getEmojiIndexLangName(targetLang: typeof emojiIndexLangs[number]) {
+	if (langs.find(x => x[0] === targetLang)) {
+		return langs.find(x => x[0] === targetLang)![1];
+	} else {
+		// 絵文字辞書限定の言語定義
+		switch (targetLang) {
+			case 'ja-JP_hira': return 'ひらがな';
+			default: return targetLang;
+		}
+	}
+}
+
+function downloadEmojiIndex(lang: typeof emojiIndexLangs[number]) {
 	async function main() {
 		const currentIndexes = defaultStore.state.additionalUnicodeEmojiIndexes;
 
 		function download() {
 			switch (lang) {
 				case 'en-US': return import('../../unicode-emoji-indexes/en-US.json').then(x => x.default);
+				case 'ja-JP': return import('../../unicode-emoji-indexes/ja-JP.json').then(x => x.default);
+				case 'ja-JP_hira': return import('../../unicode-emoji-indexes/ja-JP_hira.json').then(x => x.default);
 				default: throw new Error('unrecognized lang: ' + lang);
 			}
 		}

packages/frontend/src/scripts/device-kind.ts

@@ -11,6 +11,13 @@ const ua = navigator.userAgent.toLowerCase();
 const isTablet = /ipad/.test(ua) || (/mobile|iphone|android/.test(ua) && window.innerWidth > 700);
 const isSmartphone = !isTablet && /mobile|iphone|android/.test(ua);
 
+const isIPhone = /iphone|ipod/gi.test(ua) && navigator.maxTouchPoints > 1;
+// navigator.platform may be deprecated but this check is still required
+const isIPadOS = navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 1;
+const isIos = /ipad|iphone|ipod/gi.test(ua) && navigator.maxTouchPoints > 1;
+
+export const isFullscreenNotSupported = isIPhone || isIos;
+
 export const deviceKind: 'smartphone' | 'tablet' | 'desktop' = defaultStore.state.overridedDeviceKind ? defaultStore.state.overridedDeviceKind
 	: isSmartphone ? 'smartphone'
 	: isTablet ? 'tablet'

packages/frontend/src/ui/_common_/common.ts

@@ -27,11 +27,6 @@ function toolsMenuItems(): MenuItem[] {
 		to: '/clicker',
 		text: '●👈',
 		icon: 'ti ti-cookie',
-	}, {
-		type: 'link',
-		to: '/bubble-game',
-		text: i18n.ts.bubbleGame,
-		icon: 'ti ti-apple',
 	}, ($i && ($i.isAdmin || $i.policies.canManageCustomEmojis)) ? {
 		type: 'link',
 		to: '/custom-emojis-manager',