From 8c6710947c408efd9882eb6d0496c442596f5b4e Mon Sep 17 00:00:00 2001
From: nighca <nighca@live.cn>
Date: Thu, 27 Jun 2024 10:38:48 +0800
Subject: [PATCH] details

---
 .../asset/preprocessing/PreprocessModal.vue   |  38 ++-
 .../preprocessing/common/ProcessDetail.vue    |   2 +-
 .../preprocessing/original-thumbnail.svg      | 280 ++++++++++++++++++
 .../split-sprite-sheet/SplitSpriteSheet.vue   |  14 +-
 4 files changed, 313 insertions(+), 21 deletions(-)
 create mode 100644 spx-gui/src/components/asset/preprocessing/original-thumbnail.svg

diff --git a/spx-gui/src/components/asset/preprocessing/PreprocessModal.vue b/spx-gui/src/components/asset/preprocessing/PreprocessModal.vue
index c55d5586c..dfa878c50 100644
--- a/spx-gui/src/components/asset/preprocessing/PreprocessModal.vue
+++ b/spx-gui/src/components/asset/preprocessing/PreprocessModal.vue
@@ -9,7 +9,7 @@
     <main class="main">
       <div class="sider">
         <ProcessItem
-          :img-src="supportedMethods[0].thumbnail"
+          :img-src="originalThumbnail"
           :name="$t({ en: 'Original', zh: '原图' })"
           :applied="false"
           :active="activeMethod == null"
@@ -20,7 +20,7 @@
           :key="method.value"
           :img-src="method.thumbnail"
           :name="$t(method.name)"
-          :applied="isApplied(method.value)"
+          :applied="isMethodApplied(method.value)"
           :active="activeMethod === method.value"
           @click="handleMethodClick(method.value)"
         />
@@ -43,7 +43,7 @@
           :key="method.value"
           :active="activeMethod === method.value"
           :input="getMethodInput(method.value)"
-          :applied="isApplied(method.value)"
+          :applied="isMethodApplied(method.value)"
           @applied="(output) => handleMethodApplied(method.value, output)"
           @cancel="cancelMethod(method.value)"
         />
@@ -78,15 +78,16 @@
 
 <script lang="ts" setup>
 import { defineProps, ref, shallowReactive, shallowRef, watch } from 'vue'
-import { UIButton, UIFormModal } from '@/components/ui'
-import { Costume } from '@/models/costume'
+import { stripExt } from '@/utils/path'
 import type { LocaleMessage } from '@/utils/i18n'
+import { Costume } from '@/models/costume'
 import { File } from '@/models/common/file'
-import { stripExt } from '@/utils/path'
-import CostumeItem from './CostumeItem.vue'
+import { UIButton, UIFormModal } from '@/components/ui'
 import ProcessItem from './common/ProcessItem.vue'
 import ImgPreview from './common/ImgPreview.vue'
 import ProcessDetail from './common/ProcessDetail.vue'
+import CostumeItem from './CostumeItem.vue'
+import originalThumbnail from './original-thumbnail.svg'
 import SplitSpriteSheet from './split-sprite-sheet/SplitSpriteSheet.vue'
 import splitSpriteSheetThumbnail from './split-sprite-sheet/thumbnail.svg'
 
@@ -109,6 +110,10 @@ enum Method {
 
 // TODO: calculate `supportedMethods` based on input information.
 // for example, exclude SplitSpriteSheet if there are more than one files
+/**
+ * All supported methods for preprocessing.
+ * The order of methods is the order of applying.
+ */
 const supportedMethods = [
   {
     value: Method.SplitSpriteSheet,
@@ -119,14 +124,17 @@ const supportedMethods = [
 ]
 
 const activeMethod = ref<Method | null>(null)
-
 function handleMethodClick(method: Method | null) {
   activeMethod.value = method
 }
 
 type Output = File[]
 
-/** Apply output corresponding to supportedMethods */
+/**
+ * Outputs for supportedMethods.
+ * If the method is not applied, the corresponding output is `null`.
+ * The output of the previous method is the input of the next method.
+ */
 const outputs = shallowReactive<Array<Output | null>>([])
 
 function getMethodInput(method: Method): File[] {
@@ -138,14 +146,14 @@ function getMethodInput(method: Method): File[] {
   return props.files
 }
 
-function isApplied(method: Method) {
+function isMethodApplied(method: Method) {
   const idx = supportedMethods.findIndex((m) => m.value === method)
   return outputs[idx] != null
 }
 
 function handleMethodApplied(method: Method, output: File[]) {
   const idx = supportedMethods.findIndex((m) => m.value === method)
-  // process methods should be applied in order, so we need to remove the following outputs
+  // methods are applied in order, so we need to unapply the following methods, as thier inputs have changed
   outputs.splice(idx)
   outputs.push(output)
   updateCostumes(output)
@@ -182,6 +190,10 @@ async function handleCostumeClick(costume: Costume) {
   else selectedCostumes.splice(index, 1)
 }
 
+function handleConfirm() {
+  emit('resolved', selectedCostumes)
+}
+
 watch(
   () => props.files,
   async (files) => {
@@ -190,10 +202,6 @@ watch(
   },
   { immediate: true }
 )
-
-function handleConfirm() {
-  emit('resolved', selectedCostumes)
-}
 </script>
 
 <style lang="scss" scoped>
diff --git a/spx-gui/src/components/asset/preprocessing/common/ProcessDetail.vue b/spx-gui/src/components/asset/preprocessing/common/ProcessDetail.vue
index e329ac38f..a3535de8f 100644
--- a/spx-gui/src/components/asset/preprocessing/common/ProcessDetail.vue
+++ b/spx-gui/src/components/asset/preprocessing/common/ProcessDetail.vue
@@ -76,6 +76,6 @@ main {
   overflow-y: auto;
 
   border-radius: var(--ui-border-radius-1);
-  background-color: var(--ui-color-grey-200);
+  background-color: var(--ui-color-grey-300);
 }
 </style>
diff --git a/spx-gui/src/components/asset/preprocessing/original-thumbnail.svg b/spx-gui/src/components/asset/preprocessing/original-thumbnail.svg
new file mode 100644
index 000000000..ce61465c0
--- /dev/null
+++ b/spx-gui/src/components/asset/preprocessing/original-thumbnail.svg
@@ -0,0 +1,280 @@
+<svg width="88" height="66" viewBox="0 0 88 66" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <g clip-path="url(#clip0_1826_31828)">
+  <rect width="88" height="66" fill="url(#paint0_linear_1826_31828)"/>
+  <path d="M58.9565 55.2635C58.4019 57.4301 56.6985 57.0249 54.3857 56.269C57.5937 56.4567 58.9565 55.2635 58.9565 55.2635Z" fill="#231C1D"/>
+  <path d="M54.2447 42.6894L53.6205 41.9631C51.5341 40.7279 49.6938 42.099 46.8912 42.2744C44.1284 42.4473 42.2831 41.8792 40.3758 43.2873L39.7242 43.5986C39.7242 43.5986 31.3835 47.8823 31.6222 51.6274C31.7242 53.248 33.4301 53.3345 34.2085 53.1319C34.9322 52.9442 35.611 52.2277 36.1034 51.5731C36.0036 52.26 35.972 52.9551 36.0089 53.6482C36.6456 63.7226 41.3083 55.3306 47.6969 54.9328C54.0855 54.5351 59.6883 61.0595 59.1362 52.2154C59.0822 51.4819 58.9522 50.7558 58.7483 50.0488C58.4892 49.2369 58.1862 48.4394 57.8406 47.6599C57.3999 46.6295 56.8638 45.6421 56.2391 44.7102C55.7257 43.9041 55.0459 43.2153 54.2447 42.6894Z" fill="#07BEFF"/>
+  <mask id="mask0_1826_31828" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="31" y="41" width="29" height="18">
+  <path d="M54.2447 42.6894L53.6205 41.9631C51.5341 40.7279 49.6938 42.099 46.8912 42.2744C44.1284 42.4473 42.2831 41.8792 40.3758 43.2873L39.7242 43.5986C39.7242 43.5986 31.3835 47.8823 31.6222 51.6274C31.7242 53.248 33.4301 53.3345 34.2085 53.1319C34.9322 52.9442 35.611 52.2277 36.1034 51.5731C36.0036 52.26 35.972 52.9551 36.0089 53.6482C36.6456 63.7226 41.3083 55.3306 47.6969 54.9328C54.0855 54.5351 59.6883 61.0595 59.1362 52.2154C59.0822 51.4819 58.9522 50.7558 58.7483 50.0488C58.4892 49.2369 58.1862 48.4394 57.8406 47.6599C57.3999 46.6295 56.8638 45.6421 56.2391 44.7102C55.7257 43.9041 55.0459 43.2153 54.2447 42.6894Z" fill="#0CA1DD"/>
+  <path d="M54.2447 42.6894L53.6205 41.9631C51.5341 40.7279 49.6938 42.099 46.8912 42.2744C44.1284 42.4473 42.2831 41.8792 40.3758 43.2873L39.7242 43.5986C39.7242 43.5986 31.3835 47.8823 31.6222 51.6274C31.7242 53.248 33.4301 53.3345 34.2085 53.1319C34.9322 52.9442 35.611 52.2277 36.1034 51.5731C36.0036 52.26 35.972 52.9551 36.0089 53.6482C36.6456 63.7226 41.3083 55.3306 47.6969 54.9328C54.0855 54.5351 59.6883 61.0595 59.1362 52.2154C59.0822 51.4819 58.9522 50.7558 58.7483 50.0488C58.4892 49.2369 58.1862 48.4394 57.8406 47.6599C57.3999 46.6295 56.8638 45.6421 56.2391 44.7102C55.7257 43.9041 55.0459 43.2153 54.2447 42.6894Z" fill="#07BEFF"/>
+  </mask>
+  <g mask="url(#mask0_1826_31828)">
+  <g filter="url(#filter0_f_1826_31828)">
+  <path d="M55.2936 45.0739C56.7186 47.2824 57.201 48.7029 57.3353 50.825C57.8948 59.679 53.2768 54.0884 46.8907 54.4862C42.9466 54.7332 40.4002 58.0238 36.6948 57.2852C38.2018 61.0822 42.2827 55.2718 47.689 54.9333C54.0726 54.5331 59.7152 61.06 59.1283 52.2159C58.8697 48.488 55.0947 44.7651 55.2936 45.0739Z" fill="url(#paint1_linear_1826_31828)"/>
+  </g>
+  <g filter="url(#filter1_f_1826_31828)">
+  <path d="M36.4544 49.3158C35.7531 50.6004 34.8032 51.4404 33.3882 51.806C32.7977 51.9533 32.1742 51.8939 31.6226 51.638C31.732 53.2487 33.4305 53.3352 34.2088 53.1203C35.6213 52.7546 36.902 50.2126 36.902 50.2126L38.3668 46.1216C38.3668 46.1216 37.1532 48.0287 36.4544 49.3158Z" fill="url(#paint2_linear_1826_31828)"/>
+  </g>
+  <g filter="url(#filter2_f_1826_31828)">
+  <path d="M36.0051 53.7801C36.0051 53.7801 44.98 54.5213 54.4821 51.8779C54.4821 51.8779 43.3636 55.1982 36.117 54.8251L36.0051 53.7801Z" fill="url(#paint3_linear_1826_31828)"/>
+  </g>
+  </g>
+  <path d="M31.7933 50.4657C31.6546 50.8366 31.5937 51.2317 31.6143 51.6268C31.7162 53.2474 33.4222 53.3339 34.2005 53.1313C34.5721 53.0151 34.9122 52.8166 35.1953 52.5507C32.788 52.2963 32.0196 51.0092 31.7933 50.4657Z" fill="#020333"/>
+  <path d="M25.1765 21.7787C25.1765 21.7787 20.1582 29.3233 17.0298 29.4814C17.0298 29.4814 17.0497 33.3699 21.3643 33.7108C25.6789 34.0517 26.9074 23.0287 25.1765 21.7787Z" fill="white"/>
+  <path d="M24.382 24.0326C24.382 24.0326 21.3978 29.7146 19.1597 30.1173C19.1597 30.1173 19.4904 32.8051 22.6188 32.642C25.7472 32.479 25.7273 24.7367 24.382 24.0326Z" fill="#0CA1DD"/>
+  <path d="M60.7 16.2299C60.7 16.2299 67.8122 21.8847 70.8362 21.0744C70.8362 21.0744 72.0199 24.78 68.0211 26.4204C64.0223 28.0608 59.4391 17.9395 60.7 16.2299Z" fill="white"/>
+  <path d="M62.152 18.1219C62.152 18.1219 66.7625 22.623 69.0106 22.3217C69.0106 22.3217 69.5278 24.9823 66.5014 25.7802C63.475 26.5782 61.0901 19.1941 62.152 18.1219Z" fill="#0CA1DD"/>
+  <path d="M15.7291 11.2589C15.7291 11.2589 21.9312 18.2255 35.6658 13.4106L25.6962 21.81C25.6962 21.81 15.2119 21.1628 15.003 11.9135C14.993 11.9259 14.9657 10.6907 15.7291 11.2589Z" fill="#07BEFF"/>
+  <path d="M66.8355 3.26218C66.8355 3.26218 63.0904 11.7826 48.5302 11.3973L60.621 16.3579C60.621 16.3579 70.3991 12.5386 67.7407 3.67227C67.7407 3.67227 67.3876 2.48894 66.8355 3.26218Z" fill="#07BEFF"/>
+  <path d="M66.7756 23.4755C71.1997 30.8349 68.7651 38.9823 46.6325 42.4483C24.316 45.939 19.6756 38.9131 21.5681 30.5582C23.657 21.3312 29.2398 13.537 41.7112 11.5854C54.1825 9.63376 61.8841 15.338 66.7756 23.4755Z" fill="#07BEFF"/>
+  <mask id="mask1_1826_31828" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="15" y="3" width="54" height="41">
+  <path d="M15.7291 11.2589C15.7291 11.2589 21.9312 18.2255 35.6658 13.4106L25.6962 21.81C25.6962 21.81 15.2119 21.1628 15.003 11.9135C14.993 11.9259 14.9657 10.6907 15.7291 11.2589Z" fill="url(#paint4_linear_1826_31828)"/>
+  <path d="M66.8355 3.26218C66.8355 3.26218 63.0904 11.7826 48.5302 11.3973L60.621 16.3579C60.621 16.3579 70.3991 12.5386 67.7407 3.67227C67.7407 3.67227 67.3876 2.48894 66.8355 3.26218Z" fill="url(#paint5_linear_1826_31828)"/>
+  <path d="M66.7756 23.4755C71.1997 30.8349 68.7651 38.9823 46.6325 42.4483C24.316 45.939 19.6756 38.9131 21.5681 30.5582C23.657 21.3312 29.2398 13.537 41.7112 11.5854C54.1825 9.63376 61.8841 15.338 66.7756 23.4755Z" fill="url(#paint6_linear_1826_31828)"/>
+  </mask>
+  <g mask="url(#mask1_1826_31828)">
+  <g filter="url(#filter3_f_1826_31828)">
+  <path d="M33.6691 14.7461L27.2333 19.173C27.2333 19.173 16.6843 18.6394 15.2071 11.1788C14.9833 11.3715 14.9932 11.9199 14.9932 11.9199C15.2121 21.1691 25.6865 21.8164 25.6865 21.8164L35.6561 13.417C34.0322 13.9802 35.0891 14.4718 33.6691 14.7461Z" fill="url(#paint7_linear_1826_31828)" fill-opacity="0.5"/>
+  </g>
+  <g filter="url(#filter4_f_1826_31828)">
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M67.3978 3.0789C67.5585 3.2463 67.6762 3.44966 67.741 3.6718C70.1833 11.8176 62.1283 15.695 60.8031 16.2714C63.1625 18.2633 65.128 20.7314 66.777 23.4746C71.2011 30.834 68.7739 38.9814 46.6339 42.4474C24.3298 45.9381 19.6894 38.9123 21.5819 30.5474C23.6583 21.3204 29.2412 13.5287 41.725 11.5746C45.0138 11.0598 47.9691 11.0774 50.6276 11.5314C50.8772 11.5323 51.1785 11.5106 51.6464 11.4487L59.8703 13.7585C59.8703 13.7585 68.1737 10.5247 67.3978 3.0789ZM49.393 11.7408C47.0067 11.4015 44.3716 11.4123 41.6477 11.8385C32.3644 13.2911 24.1704 20.6801 25.0607 26.3003C25.951 31.9205 35.5873 33.6202 44.8706 32.1676C54.1563 30.715 60.9577 24.9886 60.0699 19.3733C59.8109 17.7352 58.9253 16.2879 57.5701 15.0957L49.393 11.7408Z" fill="url(#paint8_linear_1826_31828)"/>
+  </g>
+  </g>
+  <path d="M68.0073 26.0338C66.9579 23.7116 65.5901 18.0815 43.3084 21.5673C22.2675 24.8603 21.7627 30.3002 21.2156 32.8991C20.7183 40.1596 26.4379 45.6069 46.6208 42.4497C66.2293 39.3839 70.3822 32.6446 68.0073 26.0338Z" fill="white"/>
+  <mask id="mask2_1826_31828" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="21" y="20" width="48" height="24">
+  <path d="M68.0073 26.0338C66.9579 23.7116 65.5901 18.0815 43.3084 21.5673C22.2675 24.8603 21.7627 30.3002 21.2156 32.8991C20.7183 40.1596 26.4379 45.6069 46.6208 42.4497C66.2293 39.3839 70.3822 32.6446 68.0073 26.0338Z" fill="white"/>
+  </mask>
+  <g mask="url(#mask2_1826_31828)">
+  <g filter="url(#filter5_f_1826_31828)">
+  <path d="M68.0073 26.0353C67.3409 24.553 66.5426 21.7466 60.3355 20.7881C62.4617 22.1369 62.9591 23.9132 63.3819 24.9878C65.5329 31.7395 62.3449 38.4195 46.3771 40.9171C29.9642 43.4888 23.3468 39.4348 23.5234 32.1051C23.68 30.9909 23.8815 28.6613 25.3164 26.9419C21.0714 30.2004 21.5538 31.2898 21.2156 32.8931C20.7183 40.1537 26.4379 45.601 46.6208 42.4438C66.2293 39.3854 70.3822 32.6461 68.0073 26.0353Z" fill="url(#paint9_linear_1826_31828)"/>
+  </g>
+  </g>
+  <g filter="url(#filter6_i_1826_31828)">
+  <path d="M40.0172 29.5696C39.8258 30.8641 38.1323 31.6892 36.2373 31.4126C34.3424 31.1359 32.9572 29.8611 33.1512 28.5666C33.3452 27.2721 35.0337 26.447 36.9311 26.7237C38.8286 27.0004 40.2087 28.2801 40.0172 29.5696Z" fill="#F1F6FF"/>
+  </g>
+  <g filter="url(#filter7_i_1826_31828)">
+  <path d="M50.9419 27.8687C51.5238 29.0422 53.3889 29.3115 55.1073 28.469C56.8257 27.6266 57.7483 25.9986 57.1639 24.8178C56.5795 23.6369 54.7169 23.375 52.996 24.2175C51.2751 25.0599 50.355 26.6953 50.9419 27.8687Z" fill="#F1F6FF"/>
+  </g>
+  <path d="M57.59 47.0076C57.59 47.0076 62.397 38.6897 60.686 36.1871C59.3879 34.2824 56.3839 38.1141 56.3839 38.1141C56.3839 38.1141 54.0488 40.8933 52.6885 41.7876" fill="#07BEFF"/>
+  <path d="M39.9996 43.211C38.6449 43.8061 37.3387 44.5049 36.0929 45.301C34.7517 46.2229 33.464 47.2192 32.2358 48.2852C32.8595 49.98 34.3301 51.2272 36.1128 51.5734C36.1128 51.5734 35.8914 53.2088 35.792 53.6584C35.6925 54.108 49.9667 54.1525 59.0759 50.3752L57.9046 46.3954L60.0209 45.9013C60.0209 45.9013 60.4362 44.7105 59.1505 42.5613C58.2392 41.1312 57.131 39.8348 55.858 38.7099C55.858 38.7099 53.5776 40.7875 52.4063 41.2297C52.0507 41.3631 51.7075 41.4274 50.8048 41.7238C49.9021 42.0203 50.7302 43.5618 46.8483 44.1621C43.9437 44.6093 42.7426 43.4655 42.0413 43.1739C41.5837 42.9664 40.5318 43.3024 39.9996 43.211Z" fill="white"/>
+  <path d="M39.7984 44.0161C39.7984 44.0161 47.796 46.1629 53.8911 42.062L54.5675 42.5116C54.5675 42.5116 48.8479 47.3808 39.3135 44.5621L39.7984 44.0161Z" fill="#006EB7"/>
+  <path d="M38.259 45.8211C38.259 45.8211 48.1739 47.7975 55.6094 43.6941L56.2436 44.3364C56.2436 44.3364 49.4123 48.8449 37.5925 46.6808L38.259 45.8211Z" fill="#006EB7"/>
+  <path d="M36.7669 47.7254C36.7669 47.7254 48.5593 49.7413 57.1214 45.4502L57.6188 46.2284C57.6188 46.2284 49.6958 50.9222 36.4014 48.6988L36.7669 47.7254Z" fill="#006EB7"/>
+  <path d="M36.2328 49.7769C36.2328 49.7769 49.3158 51.3407 58.0918 47.2398L58.2783 47.9488C58.2783 47.9488 50.0917 52.277 36.1208 50.8145L36.2328 49.7769Z" fill="#006EB7"/>
+  <path d="M36.0553 52.0284C36.0553 52.0284 49.6333 52.6361 58.5982 48.8563L58.8245 49.6246C58.8245 49.6246 50.1505 53.565 35.926 52.9251L36.0553 52.0284Z" fill="#006EB7"/>
+  <path d="M39.0054 43.6496C39.0073 43.975 39.1126 44.2914 39.3063 44.5538L38.5603 45.3295C38.5603 45.3295 38.1475 44.2845 38.1848 44.0622L39.0054 43.6496Z" fill="#006EB7"/>
+  <path d="M37.359 44.5565C37.359 44.5565 37.7618 45.7448 38.0603 46.0733L37.3863 47.017C37.3863 47.017 36.4961 45.1914 36.5334 44.9666L37.359 44.5565Z" fill="#006EB7"/>
+  <path d="M35.6828 45.6282C35.6828 45.6282 36.4289 47.5378 36.7348 47.8664L36.2697 49.0868C36.2697 49.0868 34.8299 46.4138 34.8672 46.189C35.1287 45.9876 35.401 45.8004 35.6828 45.6282Z" fill="#006EB7"/>
+  <path d="M33.979 46.8429C33.979 46.8429 34.3048 48.3598 36.2321 49.9779L36.1077 50.9216C36.1077 50.9216 33.4046 49.5802 33.228 47.4284C33.4625 47.214 33.7136 47.0182 33.979 46.8429Z" fill="#006EB7"/>
+  <path d="M55.4361 39.0828C55.4361 39.0828 59.7681 42.6402 59.5692 46.0222L58.8679 46.1951C58.8679 46.1951 58.6416 42.2671 54.7373 39.6534L55.4361 39.0828Z" fill="#006EB7"/>
+  <path d="M54.2596 40.0028C54.2596 40.0028 58.2161 43.7331 58.5419 46.2974L57.9152 46.4457C57.9152 46.4457 57.1393 43.2341 53.5583 40.5759L54.2596 40.0028Z" fill="#006EB7"/>
+  <path d="M52.7829 41.0229C52.7829 41.0229 55.6701 42.9992 56.339 44.5555C56.339 44.5555 54.0114 41.8381 52.1587 41.3218L52.7829 41.0229Z" fill="#006EB7"/>
+  <path d="M42.0427 43.1568C41.692 43.0086 40.9957 43.1568 40.4437 43.2111L40.2124 43.4582C41.3672 43.7681 42.5553 43.939 43.7511 43.9671C42.923 43.7126 42.4132 43.3198 42.0427 43.1568Z" fill="#006EB7"/>
+  <path d="M52.847 41.0132C52.7049 41.0924 52.5579 41.1625 52.4069 41.2232C52.0512 41.3566 51.7081 41.4208 50.8053 41.7172C50.3552 41.8655 50.3403 42.3299 49.9399 42.8314C50.5567 42.6165 52.2949 41.984 52.8545 41.5196C53.1429 41.2849 53.0484 41.1219 52.847 41.0132Z" fill="#006EB7"/>
+  <g filter="url(#filter8_f_1826_31828)">
+  <path d="M50.1805 51.0932C49.2504 49.2157 47.8752 46.9429 47.2137 46.6637C46.5522 46.3846 46.3458 46.2956 46.3458 46.2956L45.8709 46.0338C46.1433 45.7312 46.3521 45.3776 46.4851 44.9937C50.2153 43.8721 52.8637 41.0534 52.8637 41.0534C51.2722 41.6018 48.6188 42.422 48.6188 42.422C47.7932 42.9754 46.7686 43.7733 46.2663 44.1711C45.8485 44.0797 44.9383 44.1859 44.2296 44.297C43.1727 43.803 41.8273 43.0347 41.8273 43.0347L40.1811 43.1656L39.5444 43.504C40.0965 44.4552 42.2526 44.9863 43.3045 45.174C43.6054 45.5924 43.9744 45.9581 44.3962 46.2561H44.4111C44.0505 46.6415 43.2373 47.5308 42.9464 48.0546C42.5659 48.7364 42.6728 48.9736 42.4142 49.5837C42.1556 50.1939 41.5612 50.3619 41.6831 51.2192C41.6831 51.2192 41.9989 50.1841 43.021 49.984C43.7322 49.8505 44.9557 48.7487 45.3934 47.5555C45.554 48.2635 45.6374 48.9865 45.6421 49.7122C45.7465 52.2246 49.5737 52.2172 50.2103 53.0794C50.4341 53.3808 52.0605 54.117 52.0605 54.117C51.2896 53.7291 51.113 52.9707 50.1805 51.0932Z" fill="#A3070F" fill-opacity="0.5"/>
+  </g>
+  <path d="M41.9053 42.9885C41.9053 42.9885 43.6933 43.9001 44.79 44.325L44.0589 45.1329C44.0589 45.1329 40.4356 44.7845 39.6423 43.5444L40.2665 43.1812L41.9053 42.9885Z" fill="#E50A15"/>
+  <path d="M43.4024 44.3563C43.4024 44.3563 45.9265 43.7362 46.5084 43.9685C47.0903 44.2007 46.2423 45.8657 45.8544 45.9818C45.4664 46.098 44.9293 46.2931 44.611 46.098C44.2927 45.9028 42.8851 44.8207 43.4024 44.3563Z" fill="#E50A15"/>
+  <path d="M48.6643 42.0909C48.6643 42.0909 51.2257 41.6215 52.7949 41.0089C50.9393 42.7323 48.7351 44.0428 46.3292 44.8528L46.0805 44.1932C46.0805 44.1932 47.5577 42.9086 48.6643 42.0909Z" fill="#E50A15"/>
+  <path d="M44.795 45.9127C44.795 45.9127 43.5839 47.2665 43.2358 47.9656C42.8876 48.6647 42.9871 48.8945 42.7658 49.5146C42.5444 50.1346 41.9476 50.3273 42.1043 51.1796C42.1043 51.1796 42.3778 50.1346 43.3899 49.9024C44.4021 49.6702 46.3915 47.3851 45.6131 45.8336L44.795 45.9127Z" fill="#E50A15"/>
+  <path d="M45.7998 45.6807L46.5458 46.0562C46.5458 46.0562 46.7199 46.2711 47.4286 46.3897C48.7615 46.6145 49.5722 48.8601 50.5794 50.6907C51.5865 52.5213 51.8004 53.2797 52.5987 53.6552C52.5987 53.6552 50.9425 52.9882 50.7062 52.6942C50.0348 51.8592 46.2101 52.0272 45.9987 49.5222C45.7873 47.0172 45.3795 46.8616 45.3795 46.8616C45.3795 46.8616 45.5461 45.8042 45.7998 45.6807Z" fill="#E50A15"/>
+  <mask id="mask3_1826_31828" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="39" y="41" width="14" height="13">
+  <path d="M41.9053 42.9885C41.9053 42.9885 43.6933 43.9001 44.79 44.325L44.0589 45.1329C44.0589 45.1329 40.4356 44.7845 39.6423 43.5444L40.2665 43.1812L41.9053 42.9885Z" fill="#E50A15"/>
+  <path d="M43.4024 44.3563C43.4024 44.3563 45.9265 43.7362 46.5084 43.9685C47.0903 44.2007 46.2423 45.8657 45.8544 45.9818C45.4664 46.098 44.9293 46.2931 44.611 46.098C44.2927 45.9028 42.8851 44.8207 43.4024 44.3563Z" fill="#E50A15"/>
+  <path d="M48.6643 42.0909C48.6643 42.0909 51.2257 41.6215 52.7949 41.0089C50.9393 42.7323 48.7351 44.0428 46.3292 44.8528L46.0805 44.1932C46.0805 44.1932 47.5577 42.9086 48.6643 42.0909Z" fill="#E50A15"/>
+  <path d="M44.795 45.9127C44.795 45.9127 43.5839 47.2665 43.2358 47.9656C42.8876 48.6647 42.9871 48.8945 42.7658 49.5146C42.5444 50.1346 41.9476 50.3273 42.1043 51.1796C42.1043 51.1796 42.3778 50.1346 43.3899 49.9024C44.4021 49.6702 46.3915 47.3851 45.6131 45.8336L44.795 45.9127Z" fill="#E50A15"/>
+  <path d="M45.7998 45.6807L46.5458 46.0562C46.5458 46.0562 46.7199 46.2711 47.4286 46.3897C48.7615 46.6145 49.5722 48.8601 50.5794 50.6907C51.5865 52.5213 51.8004 53.2797 52.5987 53.6552C52.5987 53.6552 50.9425 52.9882 50.7062 52.6942C50.0348 51.8592 46.2101 52.0272 45.9987 49.5222C45.7873 47.0172 45.3795 46.8616 45.3795 46.8616C45.3795 46.8616 45.5461 45.8042 45.7998 45.6807Z" fill="#E50A15"/>
+  </mask>
+  <g mask="url(#mask3_1826_31828)">
+  <g filter="url(#filter9_f_1826_31828)">
+  <path d="M43.4796 45.0623C43.7921 45.5086 44.4092 45.9789 44.6104 46.0978C44.6327 46.111 44.6564 46.1222 44.6814 46.1316C44.6415 46.1463 44.602 46.1618 44.5628 46.1784C44.0656 46.7327 43.6211 47.3314 43.2349 47.967C43.0249 48.3812 42.9767 48.6312 42.9256 48.8962C42.8908 49.0769 42.8546 49.2645 42.7649 49.5159C42.6876 49.7039 42.5829 49.8796 42.454 50.0372C42.5037 50.1558 43.3617 49.5802 43.302 48.555C43.2745 48.119 43.5168 47.9107 43.7606 47.701C43.9797 47.5125 44.2 47.3231 44.2271 46.9665C44.2579 46.553 44.7465 46.2989 45.1801 46.1534C45.399 46.1198 45.6294 46.0499 45.8207 45.9918L45.8538 45.9817C45.9258 45.9539 45.9893 45.9079 46.0379 45.8483C45.9483 45.8433 45.8414 45.8409 45.7195 45.8458C43.9241 45.9002 44.7945 44.0869 44.7945 44.0869L44.7497 44.0745C44.2458 44.1646 43.7778 44.271 43.551 44.3225C43.4981 44.3345 43.4582 44.3436 43.4342 44.3487C43.4305 44.3523 43.4268 44.3558 43.4232 44.3594C41.7703 44.151 40.3348 43.6419 41.5796 43.0247L40.2665 43.1853L39.6423 43.5484C40.2372 44.4746 42.4231 44.905 43.4796 45.0623Z" fill="url(#paint10_linear_1826_31828)"/>
+  <path d="M49.9724 52.2353C49.6609 51.6744 48.9506 51.43 48.263 51.1934C47.4576 50.9163 46.6835 50.6499 46.6178 49.8983C46.5088 48.9881 46.1832 48.1166 45.6678 47.3563V47.381C45.8579 48.0793 45.9737 48.7955 46.0135 49.5179C46.1528 51.1733 47.8718 51.6623 49.2154 52.0445C49.5019 52.126 49.7714 52.2027 50.0048 52.2848C49.9953 52.2675 49.9845 52.2509 49.9724 52.2353Z" fill="url(#paint11_linear_1826_31828)"/>
+  </g>
+  <g filter="url(#filter10_f_1826_31828)">
+  <path d="M46.5547 44.2628C46.605 44.4228 46.6318 44.5892 46.6343 44.7568C47.4924 44.4575 48.3242 44.0881 49.1211 43.6526C48.2059 44.0108 47.164 44.3443 46.5547 44.2628Z" fill="url(#paint12_linear_1826_31828)"/>
+  </g>
+  </g>
+  <g filter="url(#filter11_f_1826_31828)">
+  <path d="M50.0293 41.8217C50.0293 41.8217 48.8083 42.7728 48.49 43.2595C48.1717 43.7462 50.2556 41.9527 50.5565 41.6735L50.0293 41.8217Z" fill="url(#paint13_linear_1826_31828)"/>
+  </g>
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M55.4603 56.5996C57.3055 57.1134 58.6136 57.0813 59.0239 55.0062C57.9347 56.2117 56.4128 56.5279 55.4603 56.5996ZM36.6187 57.1807C37.3423 59.0484 38.6081 58.7865 40.3016 57.9219C38.3147 58.0157 37.2055 57.576 36.6187 57.1807Z" fill="#020333"/>
+  <path d="M60.6857 36.1872C60.1038 35.3349 59.1936 35.6338 58.3381 36.2218C58.4227 37.0692 58.8852 37.998 60.3276 38.4625C60.5367 38.5299 60.7527 38.5738 60.9717 38.5934C61.1234 37.6052 61.0711 36.748 60.6857 36.1872Z" fill="#020333"/>
+  <path d="M35.964 44.0778L38.2021 45.9726L34.3277 49.5918L31.4629 47.0151C31.4629 47.0151 33.8925 44.4434 35.964 44.0778Z" fill="white"/>
+  <path d="M34.8923 44.9261L36.6381 46.7271L37.1504 46.3071L35.4991 44.5926L34.8923 44.9261Z" fill="#E50012"/>
+  <path d="M33.8464 45.6208L35.6419 47.449L36.1865 47.0463L34.396 45.2577L33.8464 45.6208Z" fill="#E50012"/>
+  <path d="M32.8782 46.3962L34.6786 48.2194L35.1909 47.7896L33.3357 45.9565L32.8782 46.3962Z" fill="#E50012"/>
+  <g filter="url(#filter12_di_1826_31828)">
+  <path d="M46.5578 17.9012C46.9184 17.8312 47.2678 18.0648 47.3382 18.4229C47.4154 18.8152 47.798 19.071 48.1929 18.9943C48.5877 18.9177 48.8452 18.5376 48.7681 18.1453C48.5433 17.0027 47.4286 16.2574 46.2783 16.4808C45.1281 16.7041 44.3779 17.8114 44.6027 18.9541C44.6799 19.3463 45.0626 19.6021 45.4574 19.5255C45.8522 19.4488 46.1098 19.0687 46.0326 18.6765C45.9621 18.3183 46.1973 17.9712 46.5578 17.9012Z" fill="#020333"/>
+  <path d="M38.6927 19.5161C38.4679 19.4394 38.219 19.4878 38.0398 19.6428C37.8606 19.7979 37.7783 20.0361 37.8239 20.2678C37.9011 20.6601 37.6436 21.0402 37.2487 21.1169C36.8539 21.1935 36.4713 20.9377 36.3941 20.5455C36.2487 19.8063 36.5112 19.0462 37.0829 18.5515C37.6545 18.0568 38.4485 17.9027 39.1656 18.1471C39.8826 18.3916 40.414 18.9975 40.5594 19.7367C40.6366 20.1289 40.3791 20.509 39.9842 20.5857C39.5894 20.6624 39.2067 20.4066 39.1296 20.0143C39.084 19.7826 38.9174 19.5927 38.6927 19.5161Z" fill="#020333"/>
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M56.7829 14.6843C55.398 11.4945 51.9489 9.54327 48.3541 10.1679C45.3941 10.6822 43.014 12.8503 42.2289 15.7094C40.5598 13.3549 37.62 12.0354 34.5753 12.5643C31.4964 13.099 29.0451 15.4236 28.3643 18.454C28.2657 18.893 28.207 19.3342 28.1866 19.7733L23.5551 22.3081C23.1415 22.5344 22.991 23.051 23.2188 23.4618C23.4467 23.8727 23.9666 24.0222 24.3802 23.7959L28.3292 21.6346C28.7118 23.529 29.8087 25.2527 31.465 26.4082C34.0228 28.1927 37.4108 28.2709 40.0491 26.6063C41.7073 25.5601 42.8641 23.955 43.3612 22.1476C43.8664 22.8621 44.4993 23.4976 45.2455 24.0178C47.8051 25.8022 51.1947 25.879 53.8334 24.2123C56.4482 22.5607 57.8152 19.5197 57.3137 16.4876L62.0939 17.24C62.5603 17.3134 62.9982 16.9973 63.0721 16.534C63.146 16.0708 62.8279 15.6357 62.3615 15.5623L56.7829 14.6843ZM48.6415 11.8003C51.9378 11.2276 55.0777 13.4166 55.6564 16.6908C56.0804 19.0901 55.0076 21.5068 52.9384 22.8138C50.8691 24.1208 48.211 24.0606 46.2038 22.6613C44.1966 21.262 43.2357 18.7992 43.7694 16.4216C44.303 14.0441 46.226 12.22 48.6415 11.8003ZM34.8626 14.1967C38.1589 13.6241 41.2984 15.8145 41.875 19.0891C42.2972 21.4873 41.2236 23.9021 39.1548 25.2073C37.086 26.5126 34.4294 26.4513 32.4238 25.0521C30.4182 23.6528 29.4586 21.1911 29.9924 18.815C30.5263 16.4388 32.4484 14.616 34.8626 14.1967Z" fill="#020333"/>
+  </g>
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M32.03 14.3582C32.0756 14.4612 32.0287 14.5814 31.925 14.6268C31.8228 14.6715 31.6108 14.83 31.3689 15.0736C31.1331 15.3111 30.8909 15.6075 30.7224 15.9052C30.6669 16.0032 30.5419 16.038 30.4431 15.9829C30.3444 15.9278 30.3094 15.8036 30.3649 15.7055C30.556 15.3679 30.8233 15.043 31.0769 14.7875C31.3246 14.538 31.5821 14.3317 31.7596 14.2539C31.8633 14.2086 31.9843 14.2553 32.03 14.3582Z" fill="white"/>
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M46.5802 11.6996C46.6133 11.8072 46.5524 11.9211 46.4441 11.9541C46.3373 11.9865 46.108 12.1191 45.8389 12.3327C45.5766 12.541 45.301 12.807 45.0984 13.0829C45.0316 13.1738 44.9033 13.1938 44.8118 13.1274C44.7203 13.0611 44.7003 12.9337 44.767 12.8428C44.9968 12.5299 45.3007 12.2385 45.5829 12.0145C45.8584 11.7957 46.1386 11.6209 46.3241 11.5645C46.4323 11.5315 46.547 11.5921 46.5802 11.6996Z" fill="white"/>
+  <path d="M20.7578 14.2109C19.5417 14.952 18.9673 15.6437 18.634 16.9283C18.634 16.9283 19.2881 15.0385 21.6853 14.4925C21.3621 14.4011 21.0537 14.3097 20.7578 14.2109Z" fill="#020333"/>
+  <path d="M24.8831 15.036C23.7043 15.5968 22.3366 17.6522 22.645 19.3963C22.645 19.3963 23.1423 16.0637 26.3528 15.1052C25.848 15.1002 25.3556 15.0755 24.8831 15.036Z" fill="#020333"/>
+  <path d="M17.6315 12.7555C17.2824 12.9602 16.9901 13.248 16.781 13.593C17.0729 13.2345 17.494 13.0032 17.9548 12.9482C17.8429 12.884 17.7359 12.8198 17.6315 12.7555Z" fill="#020333"/>
+  <path d="M62.9642 7.60896C64.3544 7.94741 65.1128 8.4242 65.8241 9.54083C65.8241 9.54083 64.618 7.94247 62.1685 8.1574C62.447 7.97458 62.7131 7.79177 62.9642 7.60896Z" fill="#020333"/>
+  <path d="M59.2949 9.65364C60.588 9.82657 62.5277 11.3656 62.7764 13.1122C62.7764 13.1122 61.2595 10.0958 57.9197 10.1477C58.4021 10.0069 58.8547 9.83398 59.2949 9.65364Z" fill="#020333"/>
+  <path d="M65.4879 5.26721C65.8836 5.35636 66.251 5.54137 66.5572 5.80576C66.168 5.55605 65.6959 5.46739 65.2417 5.55872C65.3287 5.45496 65.4108 5.35862 65.4879 5.26721Z" fill="#020333"/>
+  </g>
+  <defs>
+  <filter id="filter0_f_1826_31828" x="29.395" y="37.7561" width="37.0752" height="28.1114" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+  <feFlood flood-opacity="0" result="BackgroundImageFix"/>
+  <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+  <feGaussianBlur stdDeviation="3.6499" result="effect1_foregroundBlur_1826_31828"/>
+  </filter>
+  <filter id="filter1_f_1826_31828" x="23.634" y="38.133" width="22.7213" height="23.0616" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+  <feFlood flood-opacity="0" result="BackgroundImageFix"/>
+  <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+  <feGaussianBlur stdDeviation="3.99428" result="effect1_foregroundBlur_1826_31828"/>
+  </filter>
+  <filter id="filter2_f_1826_31828" x="28.7053" y="44.5781" width="33.0767" height="17.5761" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+  <feFlood flood-opacity="0" result="BackgroundImageFix"/>
+  <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+  <feGaussianBlur stdDeviation="3.6499" result="effect1_foregroundBlur_1826_31828"/>
+  </filter>
+  <filter id="filter3_f_1826_31828" x="7.0046" y="3.19021" width="36.64" height="26.6147" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+  <feFlood flood-opacity="0" result="BackgroundImageFix"/>
+  <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+  <feGaussianBlur stdDeviation="3.99428" result="effect1_foregroundBlur_1826_31828"/>
+  </filter>
+  <filter id="filter4_f_1826_31828" x="13.2109" y="-4.90966" width="63.39" height="56.2619" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+  <feFlood flood-opacity="0" result="BackgroundImageFix"/>
+  <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+  <feGaussianBlur stdDeviation="3.99428" result="effect1_foregroundBlur_1826_31828"/>
+  </filter>
+  <filter id="filter5_f_1826_31828" x="13.1977" y="12.7995" width="63.4005" height="38.5489" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+  <feFlood flood-opacity="0" result="BackgroundImageFix"/>
+  <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+  <feGaussianBlur stdDeviation="3.99428" result="effect1_foregroundBlur_1826_31828"/>
+  </filter>
+  <filter id="filter6_i_1826_31828" x="33.1331" y="26.6703" width="6.90186" height="12.7843" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+  <feFlood flood-opacity="0" result="BackgroundImageFix"/>
+  <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+  <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+  <feOffset dy="7.98856"/>
+  <feGaussianBlur stdDeviation="3.99428"/>
+  <feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+  <feColorMatrix type="matrix" values="0 0 0 0 0.803922 0 0 0 0 0.85098 0 0 0 0 0.945098 0 0 0 0.4 0"/>
+  <feBlend mode="normal" in2="shape" result="effect1_innerShadow_1826_31828"/>
+  </filter>
+  <filter id="filter7_i_1826_31828" x="50.7649" y="23.7247" width="6.57446" height="13.2236" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+  <feFlood flood-opacity="0" result="BackgroundImageFix"/>
+  <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+  <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+  <feOffset dy="7.98856"/>
+  <feGaussianBlur stdDeviation="3.99428"/>
+  <feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+  <feColorMatrix type="matrix" values="0 0 0 0 0.803922 0 0 0 0 0.85098 0 0 0 0 0.945098 0 0 0 0.4 0"/>
+  <feBlend mode="normal" in2="shape" result="effect1_innerShadow_1826_31828"/>
+  </filter>
+  <filter id="filter8_f_1826_31828" x="31.5559" y="33.0648" width="29.2965" height="29.0407" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+  <feFlood flood-opacity="0" result="BackgroundImageFix"/>
+  <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+  <feGaussianBlur stdDeviation="3.99428" result="effect1_foregroundBlur_1826_31828"/>
+  </filter>
+  <filter id="filter9_f_1826_31828" x="35.6481" y="39.0304" width="18.3511" height="17.2486" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+  <feFlood flood-opacity="0" result="BackgroundImageFix"/>
+  <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+  <feGaussianBlur stdDeviation="1.99714" result="effect1_foregroundBlur_1826_31828"/>
+  </filter>
+  <filter id="filter10_f_1826_31828" x="42.5604" y="39.6583" width="10.555" height="9.09284" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+  <feFlood flood-opacity="0" result="BackgroundImageFix"/>
+  <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+  <feGaussianBlur stdDeviation="1.99714" result="effect1_foregroundBlur_1826_31828"/>
+  </filter>
+  <filter id="filter11_f_1826_31828" x="44.4628" y="37.6792" width="10.0882" height="9.65783" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+  <feFlood flood-opacity="0" result="BackgroundImageFix"/>
+  <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+  <feGaussianBlur stdDeviation="1.99714" result="effect1_foregroundBlur_1826_31828"/>
+  </filter>
+  <filter id="filter12_di_1826_31828" x="15.8127" y="10.0518" width="54.5698" height="32.3505" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+  <feFlood flood-opacity="0" result="BackgroundImageFix"/>
+  <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+  <feOffset dy="7.29981"/>
+  <feGaussianBlur stdDeviation="3.6499"/>
+  <feComposite in2="hardAlpha" operator="out"/>
+  <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0"/>
+  <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_1826_31828"/>
+  <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_1826_31828" result="shape"/>
+  <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+  <feOffset dy="7.29981"/>
+  <feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+  <feColorMatrix type="matrix" values="0 0 0 0 0.642205 0 0 0 0 0.642205 0 0 0 0 0.642205 0 0 0 0.09 0"/>
+  <feBlend mode="normal" in2="shape" result="effect2_innerShadow_1826_31828"/>
+  </filter>
+  <linearGradient id="paint0_linear_1826_31828" x1="22.0552" y1="9.97876e-08" x2="27.6544" y2="67.3587" gradientUnits="userSpaceOnUse">
+  <stop stop-color="#FFB55C"/>
+  <stop offset="0.618553" stop-color="#FFD39E"/>
+  <stop offset="1" stop-color="#FFD9A9"/>
+  </linearGradient>
+  <linearGradient id="paint1_linear_1826_31828" x1="59.2415" y1="49.5076" x2="36.6899" y2="56.2281" gradientUnits="userSpaceOnUse">
+  <stop stop-color="#0B77C5" stop-opacity="0.81"/>
+  <stop offset="0.940905" stop-color="#0B77C5"/>
+  </linearGradient>
+  <linearGradient id="paint2_linear_1826_31828" x1="38.3881" y1="48.4556" x2="31.2284" y2="49.6768" gradientUnits="userSpaceOnUse">
+  <stop stop-color="#0B77C5"/>
+  <stop offset="0.526332" stop-color="#0B84CC"/>
+  <stop offset="0.988259" stop-color="#0B63CB"/>
+  </linearGradient>
+  <linearGradient id="paint3_linear_1826_31828" x1="54.5406" y1="52.8586" x2="45.5164" y2="62.8948" gradientUnits="userSpaceOnUse">
+  <stop stop-color="#0B77C5"/>
+  <stop offset="0.940905" stop-color="#0B77C5"/>
+  </linearGradient>
+  <linearGradient id="paint4_linear_1826_31828" x1="38.711" y1="15.8192" x2="44.9919" y2="42.6177" gradientUnits="userSpaceOnUse">
+  <stop stop-color="#36C1F9"/>
+  <stop offset="1" stop-color="#0CA1DD"/>
+  </linearGradient>
+  <linearGradient id="paint5_linear_1826_31828" x1="44.3897" y1="18.9868" x2="50.7976" y2="40.5973" gradientUnits="userSpaceOnUse">
+  <stop stop-color="#1FB3EF"/>
+  <stop offset="1" stop-color="#0CA1DD"/>
+  </linearGradient>
+  <linearGradient id="paint6_linear_1826_31828" x1="42.3573" y1="11.2006" x2="47.8929" y2="43.3774" gradientUnits="userSpaceOnUse">
+  <stop stop-color="#15B0EF"/>
+  <stop offset="1" stop-color="#0CA1DD"/>
+  </linearGradient>
+  <linearGradient id="paint7_linear_1826_31828" x1="35.7215" y1="14.6835" x2="15.0249" y2="16.8826" gradientUnits="userSpaceOnUse">
+  <stop stop-color="#0B77C5"/>
+  <stop offset="0.11208" stop-color="#1D9FDC"/>
+  <stop offset="0.246758" stop-color="#0889DD"/>
+  <stop offset="1" stop-color="#088ADD"/>
+  </linearGradient>
+  <linearGradient id="paint8_linear_1826_31828" x1="68.7624" y1="16.3513" x2="20.9343" y2="19.4306" gradientUnits="userSpaceOnUse">
+  <stop offset="0.0162613" stop-color="#0B77C5"/>
+  <stop offset="0.11208" stop-color="#1D9FDC"/>
+  <stop offset="0.246758" stop-color="#0889DD"/>
+  <stop offset="0.758052" stop-color="#0B90C5"/>
+  <stop offset="1" stop-color="#088ADD"/>
+  </linearGradient>
+  <linearGradient id="paint9_linear_1826_31828" x1="68.7598" y1="28.2247" x2="21.349" y2="33.6737" gradientUnits="userSpaceOnUse">
+  <stop stop-color="#F4F6FE"/>
+  <stop offset="0.11208" stop-color="#D2DFFD"/>
+  <stop offset="0.246758" stop-color="white"/>
+  <stop offset="0.758052" stop-color="#CBD8F1"/>
+  <stop offset="1" stop-color="#E5ECFF"/>
+  </linearGradient>
+  <linearGradient id="paint10_linear_1826_31828" x1="41.4475" y1="43.8017" x2="43.7256" y2="52.57" gradientUnits="userSpaceOnUse">
+  <stop stop-color="#C71019"/>
+  <stop offset="0.277822" stop-color="#BA0D15"/>
+  <stop offset="1" stop-color="#99040B"/>
+  </linearGradient>
+  <linearGradient id="paint11_linear_1826_31828" x1="41.4475" y1="43.8017" x2="43.7256" y2="52.57" gradientUnits="userSpaceOnUse">
+  <stop stop-color="#C71019"/>
+  <stop offset="0.277822" stop-color="#BA0D15"/>
+  <stop offset="1" stop-color="#99040B"/>
+  </linearGradient>
+  <linearGradient id="paint12_linear_1826_31828" x1="47.0018" y1="43.7452" x2="47.1393" y2="44.8442" gradientUnits="userSpaceOnUse">
+  <stop stop-color="#C71019"/>
+  <stop offset="0.277822" stop-color="#BA0D15"/>
+  <stop offset="1" stop-color="#99040B"/>
+  </linearGradient>
+  <linearGradient id="paint13_linear_1826_31828" x1="48.8228" y1="41.8136" x2="49.193" y2="43.4153" gradientUnits="userSpaceOnUse">
+  <stop stop-color="#C71019"/>
+  <stop offset="0.277822" stop-color="#BA0D15"/>
+  <stop offset="1" stop-color="#99040B"/>
+  </linearGradient>
+  <clipPath id="clip0_1826_31828">
+  <rect width="88" height="66" rx="8" fill="white"/>
+  </clipPath>
+  </defs>
+</svg>
diff --git a/spx-gui/src/components/asset/preprocessing/split-sprite-sheet/SplitSpriteSheet.vue b/spx-gui/src/components/asset/preprocessing/split-sprite-sheet/SplitSpriteSheet.vue
index e9482feb0..c9f8ee060 100644
--- a/spx-gui/src/components/asset/preprocessing/split-sprite-sheet/SplitSpriteSheet.vue
+++ b/spx-gui/src/components/asset/preprocessing/split-sprite-sheet/SplitSpriteSheet.vue
@@ -34,15 +34,14 @@ const props = defineProps<{
   applied: boolean
 }>()
 
-// SplitSpriteSheet is supposed to take at most one file
-const file = computed(() => props.input[0])
-const [imgRef] = useFileImg(file)
-
 const emit = defineEmits<{
   applied: [File[]]
   cancel: []
 }>()
 
+// SplitSpriteSheet is supposed to take at most one file
+const file = computed(() => props.input[0])
+const [imgRef] = useFileImg(file)
 const bgColor = ref<Color | null>(null)
 const rowNum = ref(1)
 const colNum = ref(1)
@@ -85,7 +84,8 @@ function drawGrid() {
   ctx.clearRect(0, 0, canvas.width, canvas.height)
   ctx.drawImage(img, 0, 0)
   ctx.strokeStyle = uiVariables.color.grey[800]
-  ctx.lineWidth = 1
+  const scale = canvas.width / canvas.getBoundingClientRect().width
+  ctx.lineWidth = Math.max(1, Math.round(scale))
   for (let i = 1; i < rowNum.value; i++) {
     const y = Math.round((i * canvas.height) / rowNum.value)
     ctx.beginPath()
@@ -104,6 +104,10 @@ function drawGrid() {
   }
 }
 
+/**
+ * If current preview-state different from the applied output.
+ * When the user changed the row/col number, the preview-state is dirty, until the the changes are applied again.
+ */
 const dirty = ref(false)
 
 watch([rowNum, colNum], async () => {