From 88ef2aca454a9348b5fa619df792f060d6e35361 Mon Sep 17 00:00:00 2001
From: iamsivin <iamsivin@gmail.com>
Date: Wed, 17 Sep 2025 14:49:51 +0530
Subject: [PATCH] chore: Add setting captain Icon

---
 .../AnimatingImg/AnimatingImg.story.vue       |   6 +
 .../captain/AnimatingImg/Settings.vue         | 757 ++++++++++++++++++
 2 files changed, 763 insertions(+)
 create mode 100644 app/javascript/dashboard/components-next/captain/AnimatingImg/Settings.vue

diff --git a/app/javascript/dashboard/components-next/captain/AnimatingImg/AnimatingImg.story.vue b/app/javascript/dashboard/components-next/captain/AnimatingImg/AnimatingImg.story.vue
index 01d15a4b6..c75e6bd6d 100644
--- a/app/javascript/dashboard/components-next/captain/AnimatingImg/AnimatingImg.story.vue
+++ b/app/javascript/dashboard/components-next/captain/AnimatingImg/AnimatingImg.story.vue
@@ -2,6 +2,7 @@
 import Guardrails from './Guardrails.vue';
 import Scenarios from './Scenarios.vue';
 import ResponseGuidelines from './ResponseGuidelines.vue';
+import Settings from './Settings.vue';
 </script>
 
 <template>
@@ -24,5 +25,10 @@ import ResponseGuidelines from './ResponseGuidelines.vue';
         <ResponseGuidelines class="size-60" />
       </div>
     </Variant>
+    <Variant title="Settings">
+      <div class="p-4 bg-n-background w-full h-full">
+        <Settings class="size-60" />
+      </div>
+    </Variant>
   </Story>
 </template>
diff --git a/app/javascript/dashboard/components-next/captain/AnimatingImg/Settings.vue b/app/javascript/dashboard/components-next/captain/AnimatingImg/Settings.vue
new file mode 100644
index 000000000..e43f9af33
--- /dev/null
+++ b/app/javascript/dashboard/components-next/captain/AnimatingImg/Settings.vue
@@ -0,0 +1,757 @@
+<template>
+  <div
+    class="svg-wrapper relative"
+    :class="{ paused }"
+    :aria-pressed="paused"
+    tabindex="0"
+    @click="toggle"
+  >
+    <div class="absolute z-0">
+      <svg
+        width="auto"
+        height="auto"
+        viewBox="0 0 200 156"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <g opacity="0.5">
+          <g clip-path="url(#clip0_773_34322)">
+            <circle cx="8" cy="3" r="1" class="fill-n-blue-9" />
+            <circle cx="16" cy="3" r="1" class="fill-n-blue-9" />
+            <circle cx="24" cy="3" r="1" class="fill-n-blue-9" />
+            <circle cx="32" cy="3" r="1" class="fill-n-blue-9" />
+            <circle cx="40" cy="3" r="1" class="fill-n-blue-9" />
+            <circle cx="48" cy="3" r="1" class="fill-n-blue-9" />
+            <circle cx="56" cy="3" r="1" class="fill-n-blue-9" />
+            <circle cx="64" cy="3" r="1" class="fill-n-blue-9" />
+            <circle cx="72" cy="3" r="1" class="fill-n-blue-9" />
+            <circle cx="80" cy="3" r="1" class="fill-n-blue-9" />
+            <circle cx="88" cy="3" r="1" class="fill-n-blue-9" />
+            <circle cx="96" cy="3" r="1" class="fill-n-blue-9" />
+            <circle cx="104" cy="3" r="1" class="fill-n-blue-9" />
+            <circle cx="112" cy="3" r="1" class="fill-n-blue-9" />
+            <circle cx="120" cy="3" r="1" class="fill-n-blue-9" />
+            <circle cx="128" cy="3" r="1" class="fill-n-blue-9" />
+            <circle cx="136" cy="3" r="1" class="fill-n-blue-9" />
+            <circle cx="144" cy="3" r="1" class="fill-n-blue-9" />
+            <circle cx="152" cy="3" r="1" class="fill-n-blue-9" />
+            <circle cx="160" cy="3" r="1" class="fill-n-blue-9" />
+            <circle cx="168" cy="3" r="1" class="fill-n-blue-9" />
+            <circle cx="176" cy="3" r="1" class="fill-n-blue-9" />
+            <circle cx="184" cy="3" r="1" class="fill-n-blue-9" />
+            <circle cx="192" cy="3" r="1" class="fill-n-blue-9" />
+            <circle cx="8" cy="9" r="1" class="fill-n-blue-9" />
+            <circle cx="16" cy="9" r="1" class="fill-n-blue-9" />
+            <circle cx="24" cy="9" r="1" class="fill-n-blue-9" />
+            <circle cx="32" cy="9" r="1" class="fill-n-blue-9" />
+            <circle cx="40" cy="9" r="1" class="fill-n-blue-9" />
+            <circle cx="48" cy="9" r="1" class="fill-n-blue-9" />
+            <circle cx="56" cy="9" r="1" class="fill-n-blue-9" />
+            <circle cx="64" cy="9" r="1" class="fill-n-blue-9" />
+            <circle cx="72" cy="9" r="1" class="fill-n-blue-9" />
+            <circle cx="80" cy="9" r="1" class="fill-n-blue-9" />
+            <circle cx="88" cy="9" r="1" class="fill-n-blue-9" />
+            <circle cx="96" cy="9" r="1" class="fill-n-blue-9" />
+            <circle cx="104" cy="9" r="1" class="fill-n-blue-9" />
+            <circle cx="112" cy="9" r="1" class="fill-n-blue-9" />
+            <circle cx="120" cy="9" r="1" class="fill-n-blue-9" />
+            <circle cx="128" cy="9" r="1" class="fill-n-blue-9" />
+            <circle cx="136" cy="9" r="1" class="fill-n-blue-9" />
+            <circle cx="144" cy="9" r="1" class="fill-n-blue-9" />
+            <circle cx="152" cy="9" r="1" class="fill-n-blue-9" />
+            <circle cx="160" cy="9" r="1" class="fill-n-blue-9" />
+            <circle cx="168" cy="9" r="1" class="fill-n-blue-9" />
+            <circle cx="176" cy="9" r="1" class="fill-n-blue-9" />
+            <circle cx="184" cy="9" r="1" class="fill-n-blue-9" />
+            <circle cx="192" cy="9" r="1" class="fill-n-blue-9" />
+            <circle cx="8" cy="15" r="1" class="fill-n-blue-9" />
+            <circle cx="16" cy="15" r="1" class="fill-n-blue-9" />
+            <circle cx="24" cy="15" r="1" class="fill-n-blue-9" />
+            <circle cx="32" cy="15" r="1" class="fill-n-blue-9" />
+            <circle cx="40" cy="15" r="1" class="fill-n-blue-9" />
+            <circle cx="48" cy="15" r="1" class="fill-n-blue-9" />
+            <circle cx="56" cy="15" r="1" class="fill-n-blue-9" />
+            <circle cx="64" cy="15" r="1" class="fill-n-blue-9" />
+            <circle cx="72" cy="15" r="1" class="fill-n-blue-9" />
+            <circle cx="80" cy="15" r="1" class="fill-n-blue-9" />
+            <circle cx="88" cy="15" r="1" class="fill-n-blue-9" />
+            <circle cx="96" cy="15" r="1" class="fill-n-blue-9" />
+            <circle cx="104" cy="15" r="1" class="fill-n-blue-9" />
+            <circle cx="112" cy="15" r="1" class="fill-n-blue-9" />
+            <circle cx="120" cy="15" r="1" class="fill-n-blue-9" />
+            <circle cx="128" cy="15" r="1" class="fill-n-blue-9" />
+            <circle cx="136" cy="15" r="1" class="fill-n-blue-9" />
+            <circle cx="144" cy="15" r="1" class="fill-n-blue-9" />
+            <circle cx="152" cy="15" r="1" class="fill-n-blue-9" />
+            <circle cx="160" cy="15" r="1" class="fill-n-blue-9" />
+            <circle cx="168" cy="15" r="1" class="fill-n-blue-9" />
+            <circle cx="176" cy="15" r="1" class="fill-n-blue-9" />
+            <circle cx="184" cy="15" r="1" class="fill-n-blue-9" />
+            <circle cx="192" cy="15" r="1" class="fill-n-blue-9" />
+            <circle cx="8" cy="21" r="1" class="fill-n-blue-9" />
+            <circle cx="16" cy="21" r="1" class="fill-n-blue-9" />
+            <circle cx="24" cy="21" r="1" class="fill-n-blue-9" />
+            <circle cx="32" cy="21" r="1" class="fill-n-blue-9" />
+            <circle cx="40" cy="21" r="1" class="fill-n-blue-9" />
+            <circle cx="48" cy="21" r="1" class="fill-n-blue-9" />
+            <circle cx="56" cy="21" r="1" class="fill-n-blue-9" />
+            <circle cx="64" cy="21" r="1" class="fill-n-blue-9" />
+            <circle cx="72" cy="21" r="1" class="fill-n-blue-9" />
+            <circle cx="80" cy="21" r="1" class="fill-n-blue-9" />
+            <circle cx="88" cy="21" r="1" class="fill-n-blue-9" />
+            <circle cx="96" cy="21" r="1" class="fill-n-blue-9" />
+            <circle cx="104" cy="21" r="1" class="fill-n-blue-9" />
+            <circle cx="112" cy="21" r="1" class="fill-n-blue-9" />
+            <circle cx="120" cy="21" r="1" class="fill-n-blue-9" />
+            <circle cx="128" cy="21" r="1" class="fill-n-blue-9" />
+            <circle cx="136" cy="21" r="1" class="fill-n-blue-9" />
+            <circle cx="144" cy="21" r="1" class="fill-n-blue-9" />
+            <circle cx="152" cy="21" r="1" class="fill-n-blue-9" />
+            <circle cx="160" cy="21" r="1" class="fill-n-blue-9" />
+            <circle cx="168" cy="21" r="1" class="fill-n-blue-9" />
+            <circle cx="176" cy="21" r="1" class="fill-n-blue-9" />
+            <circle cx="184" cy="21" r="1" class="fill-n-blue-9" />
+            <circle cx="192" cy="21" r="1" class="fill-n-blue-9" />
+            <circle cx="8" cy="27" r="1" class="fill-n-blue-9" />
+            <circle cx="16" cy="27" r="1" class="fill-n-blue-9" />
+            <circle cx="24" cy="27" r="1" class="fill-n-blue-9" />
+            <circle cx="32" cy="27" r="1" class="fill-n-blue-9" />
+            <circle cx="40" cy="27" r="1" class="fill-n-blue-9" />
+            <circle cx="48" cy="27" r="1" class="fill-n-blue-9" />
+            <circle cx="56" cy="27" r="1" class="fill-n-blue-9" />
+            <circle cx="64" cy="27" r="1" class="fill-n-blue-9" />
+            <circle cx="72" cy="27" r="1" class="fill-n-blue-9" />
+            <circle cx="80" cy="27" r="1" class="fill-n-blue-9" />
+            <circle cx="88" cy="27" r="1" class="fill-n-blue-9" />
+            <circle cx="96" cy="27" r="1" class="fill-n-blue-9" />
+            <circle cx="104" cy="27" r="1" class="fill-n-blue-9" />
+            <circle cx="112" cy="27" r="1" class="fill-n-blue-9" />
+            <circle cx="120" cy="27" r="1" class="fill-n-blue-9" />
+            <circle cx="128" cy="27" r="1" class="fill-n-blue-9" />
+            <circle cx="136" cy="27" r="1" class="fill-n-blue-9" />
+            <circle cx="144" cy="27" r="1" class="fill-n-blue-9" />
+            <circle cx="152" cy="27" r="1" class="fill-n-blue-9" />
+            <circle cx="160" cy="27" r="1" class="fill-n-blue-9" />
+            <circle cx="168" cy="27" r="1" class="fill-n-blue-9" />
+            <circle cx="176" cy="27" r="1" class="fill-n-blue-9" />
+            <circle cx="184" cy="27" r="1" class="fill-n-blue-9" />
+            <circle cx="192" cy="27" r="1" class="fill-n-blue-9" />
+            <circle cx="8" cy="33" r="1" class="fill-n-blue-9" />
+            <circle cx="16" cy="33" r="1" class="fill-n-blue-9" />
+            <circle cx="24" cy="33" r="1" class="fill-n-blue-9" />
+            <circle cx="32" cy="33" r="1" class="fill-n-blue-9" />
+            <circle cx="40" cy="33" r="1" class="fill-n-blue-9" />
+            <circle cx="48" cy="33" r="1" class="fill-n-blue-9" />
+            <circle cx="56" cy="33" r="1" class="fill-n-blue-9" />
+            <circle cx="64" cy="33" r="1" class="fill-n-blue-9" />
+            <circle cx="72" cy="33" r="1" class="fill-n-blue-9" />
+            <circle cx="80" cy="33" r="1" class="fill-n-blue-9" />
+            <circle cx="88" cy="33" r="1" class="fill-n-blue-9" />
+            <circle cx="96" cy="33" r="1" class="fill-n-blue-9" />
+            <circle cx="104" cy="33" r="1" class="fill-n-blue-9" />
+            <circle cx="112" cy="33" r="1" class="fill-n-blue-9" />
+            <circle cx="120" cy="33" r="1" class="fill-n-blue-9" />
+            <circle cx="128" cy="33" r="1" class="fill-n-blue-9" />
+            <circle cx="136" cy="33" r="1" class="fill-n-blue-9" />
+            <circle cx="144" cy="33" r="1" class="fill-n-blue-9" />
+            <circle cx="152" cy="33" r="1" class="fill-n-blue-9" />
+            <circle cx="160" cy="33" r="1" class="fill-n-blue-9" />
+            <circle cx="168" cy="33" r="1" class="fill-n-blue-9" />
+            <circle cx="176" cy="33" r="1" class="fill-n-blue-9" />
+            <circle cx="184" cy="33" r="1" class="fill-n-blue-9" />
+            <circle cx="192" cy="33" r="1" class="fill-n-blue-9" />
+            <circle cx="8" cy="39" r="1" class="fill-n-blue-9" />
+            <circle cx="16" cy="39" r="1" class="fill-n-blue-9" />
+            <circle cx="24" cy="39" r="1" class="fill-n-blue-9" />
+            <circle cx="32" cy="39" r="1" class="fill-n-blue-9" />
+            <circle cx="40" cy="39" r="1" class="fill-n-blue-9" />
+            <circle cx="48" cy="39" r="1" class="fill-n-blue-9" />
+            <circle cx="56" cy="39" r="1" class="fill-n-blue-9" />
+            <circle cx="64" cy="39" r="1" class="fill-n-blue-9" />
+            <circle cx="72" cy="39" r="1" class="fill-n-blue-9" />
+            <circle cx="80" cy="39" r="1" class="fill-n-blue-9" />
+            <circle cx="88" cy="39" r="1" class="fill-n-blue-9" />
+            <circle cx="96" cy="39" r="1" class="fill-n-blue-9" />
+            <circle cx="104" cy="39" r="1" class="fill-n-blue-9" />
+            <circle cx="112" cy="39" r="1" class="fill-n-blue-9" />
+            <circle cx="120" cy="39" r="1" class="fill-n-blue-9" />
+            <circle cx="128" cy="39" r="1" class="fill-n-blue-9" />
+            <circle cx="136" cy="39" r="1" class="fill-n-blue-9" />
+            <circle cx="144" cy="39" r="1" class="fill-n-blue-9" />
+            <circle cx="152" cy="39" r="1" class="fill-n-blue-9" />
+            <circle cx="160" cy="39" r="1" class="fill-n-blue-9" />
+            <circle cx="168" cy="39" r="1" class="fill-n-blue-9" />
+            <circle cx="176" cy="39" r="1" class="fill-n-blue-9" />
+            <circle cx="184" cy="39" r="1" class="fill-n-blue-9" />
+            <circle cx="192" cy="39" r="1" class="fill-n-blue-9" />
+            <circle cx="8" cy="45" r="1" class="fill-n-blue-9" />
+            <circle cx="16" cy="45" r="1" class="fill-n-blue-9" />
+            <circle cx="24" cy="45" r="1" class="fill-n-blue-9" />
+            <circle cx="32" cy="45" r="1" class="fill-n-blue-9" />
+            <circle cx="40" cy="45" r="1" class="fill-n-blue-9" />
+            <circle cx="48" cy="45" r="1" class="fill-n-blue-9" />
+            <circle cx="56" cy="45" r="1" class="fill-n-blue-9" />
+            <circle cx="64" cy="45" r="1" class="fill-n-blue-9" />
+            <circle cx="72" cy="45" r="1" class="fill-n-blue-9" />
+            <circle cx="80" cy="45" r="1" class="fill-n-blue-9" />
+            <circle cx="88" cy="45" r="1" class="fill-n-blue-9" />
+            <circle cx="96" cy="45" r="1" class="fill-n-blue-9" />
+            <circle cx="104" cy="45" r="1" class="fill-n-blue-9" />
+            <circle cx="112" cy="45" r="1" class="fill-n-blue-9" />
+            <circle cx="120" cy="45" r="1" class="fill-n-blue-9" />
+            <circle cx="128" cy="45" r="1" class="fill-n-blue-9" />
+            <circle cx="136" cy="45" r="1" class="fill-n-blue-9" />
+            <circle cx="144" cy="45" r="1" class="fill-n-blue-9" />
+            <circle cx="152" cy="45" r="1" class="fill-n-blue-9" />
+            <circle cx="160" cy="45" r="1" class="fill-n-blue-9" />
+            <circle cx="168" cy="45" r="1" class="fill-n-blue-9" />
+            <circle cx="176" cy="45" r="1" class="fill-n-blue-9" />
+            <circle cx="184" cy="45" r="1" class="fill-n-blue-9" />
+            <circle cx="192" cy="45" r="1" class="fill-n-blue-9" />
+            <circle cx="8" cy="51" r="1" class="fill-n-blue-9" />
+            <circle cx="16" cy="51" r="1" class="fill-n-blue-9" />
+            <circle cx="24" cy="51" r="1" class="fill-n-blue-9" />
+            <circle cx="32" cy="51" r="1" class="fill-n-blue-9" />
+            <circle cx="40" cy="51" r="1" class="fill-n-blue-9" />
+            <circle cx="48" cy="51" r="1" class="fill-n-blue-9" />
+            <circle cx="56" cy="51" r="1" class="fill-n-blue-9" />
+            <circle cx="64" cy="51" r="1" class="fill-n-blue-9" />
+            <circle cx="72" cy="51" r="1" class="fill-n-blue-9" />
+            <circle cx="80" cy="51" r="1" class="fill-n-blue-9" />
+            <circle cx="88" cy="51" r="1" class="fill-n-blue-9" />
+            <circle cx="96" cy="51" r="1" class="fill-n-blue-9" />
+            <circle cx="104" cy="51" r="1" class="fill-n-blue-9" />
+            <circle cx="112" cy="51" r="1" class="fill-n-blue-9" />
+            <circle cx="120" cy="51" r="1" class="fill-n-blue-9" />
+            <circle cx="128" cy="51" r="1" class="fill-n-blue-9" />
+            <circle cx="136" cy="51" r="1" class="fill-n-blue-9" />
+            <circle cx="144" cy="51" r="1" class="fill-n-blue-9" />
+            <circle cx="152" cy="51" r="1" class="fill-n-blue-9" />
+            <circle cx="160" cy="51" r="1" class="fill-n-blue-9" />
+            <circle cx="168" cy="51" r="1" class="fill-n-blue-9" />
+            <circle cx="176" cy="51" r="1" class="fill-n-blue-9" />
+            <circle cx="184" cy="51" r="1" class="fill-n-blue-9" />
+            <circle cx="192" cy="51" r="1" class="fill-n-blue-9" />
+            <circle cx="8" cy="57" r="1" class="fill-n-blue-9" />
+            <circle cx="16" cy="57" r="1" class="fill-n-blue-9" />
+            <circle cx="24" cy="57" r="1" class="fill-n-blue-9" />
+            <circle cx="32" cy="57" r="1" class="fill-n-blue-9" />
+            <circle cx="40" cy="57" r="1" class="fill-n-blue-9" />
+            <circle cx="48" cy="57" r="1" class="fill-n-blue-9" />
+            <circle cx="56" cy="57" r="1" class="fill-n-blue-9" />
+            <circle cx="64" cy="57" r="1" class="fill-n-blue-9" />
+            <circle cx="72" cy="57" r="1" class="fill-n-blue-9" />
+            <circle cx="80" cy="57" r="1" class="fill-n-blue-9" />
+            <circle cx="88" cy="57" r="1" class="fill-n-blue-9" />
+            <circle cx="96" cy="57" r="1" class="fill-n-blue-9" />
+            <circle cx="104" cy="57" r="1" class="fill-n-blue-9" />
+            <circle cx="112" cy="57" r="1" class="fill-n-blue-9" />
+            <circle cx="120" cy="57" r="1" class="fill-n-blue-9" />
+            <circle cx="128" cy="57" r="1" class="fill-n-blue-9" />
+            <circle cx="136" cy="57" r="1" class="fill-n-blue-9" />
+            <circle cx="144" cy="57" r="1" class="fill-n-blue-9" />
+            <circle cx="152" cy="57" r="1" class="fill-n-blue-9" />
+            <circle cx="160" cy="57" r="1" class="fill-n-blue-9" />
+            <circle cx="168" cy="57" r="1" class="fill-n-blue-9" />
+            <circle cx="176" cy="57" r="1" class="fill-n-blue-9" />
+            <circle cx="184" cy="57" r="1" class="fill-n-blue-9" />
+            <circle cx="192" cy="57" r="1" class="fill-n-blue-9" />
+            <circle cx="8" cy="63" r="1" class="fill-n-blue-9" />
+            <circle cx="16" cy="63" r="1" class="fill-n-blue-9" />
+            <circle cx="24" cy="63" r="1" class="fill-n-blue-9" />
+            <circle cx="32" cy="63" r="1" class="fill-n-blue-9" />
+            <circle cx="40" cy="63" r="1" class="fill-n-blue-9" />
+            <circle cx="48" cy="63" r="1" class="fill-n-blue-9" />
+            <circle cx="56" cy="63" r="1" class="fill-n-blue-9" />
+            <circle cx="64" cy="63" r="1" class="fill-n-blue-9" />
+            <circle cx="72" cy="63" r="1" class="fill-n-blue-9" />
+            <circle cx="80" cy="63" r="1" class="fill-n-blue-9" />
+            <circle cx="88" cy="63" r="1" class="fill-n-blue-9" />
+            <circle cx="96" cy="63" r="1" class="fill-n-blue-9" />
+            <circle cx="104" cy="63" r="1" class="fill-n-blue-9" />
+            <circle cx="112" cy="63" r="1" class="fill-n-blue-9" />
+            <circle cx="120" cy="63" r="1" class="fill-n-blue-9" />
+            <circle cx="128" cy="63" r="1" class="fill-n-blue-9" />
+            <circle cx="136" cy="63" r="1" class="fill-n-blue-9" />
+            <circle cx="144" cy="63" r="1" class="fill-n-blue-9" />
+            <circle cx="152" cy="63" r="1" class="fill-n-blue-9" />
+            <circle cx="160" cy="63" r="1" class="fill-n-blue-9" />
+            <circle cx="168" cy="63" r="1" class="fill-n-blue-9" />
+            <circle cx="176" cy="63" r="1" class="fill-n-blue-9" />
+            <circle cx="184" cy="63" r="1" class="fill-n-blue-9" />
+            <circle cx="192" cy="63" r="1" class="fill-n-blue-9" />
+            <circle cx="8" cy="69" r="1" class="fill-n-blue-9" />
+            <circle cx="16" cy="69" r="1" class="fill-n-blue-9" />
+            <circle cx="24" cy="69" r="1" class="fill-n-blue-9" />
+            <circle cx="32" cy="69" r="1" class="fill-n-blue-9" />
+            <circle cx="40" cy="69" r="1" class="fill-n-blue-9" />
+            <circle cx="48" cy="69" r="1" class="fill-n-blue-9" />
+            <circle cx="56" cy="69" r="1" class="fill-n-blue-9" />
+            <circle cx="64" cy="69" r="1" class="fill-n-blue-9" />
+            <circle cx="72" cy="69" r="1" class="fill-n-blue-9" />
+            <circle cx="80" cy="69" r="1" class="fill-n-blue-9" />
+            <circle cx="88" cy="69" r="1" class="fill-n-blue-9" />
+            <circle cx="96" cy="69" r="1" class="fill-n-blue-9" />
+            <circle cx="104" cy="69" r="1" class="fill-n-blue-9" />
+            <circle cx="112" cy="69" r="1" class="fill-n-blue-9" />
+            <circle cx="120" cy="69" r="1" class="fill-n-blue-9" />
+            <circle cx="128" cy="69" r="1" class="fill-n-blue-9" />
+            <circle cx="136" cy="69" r="1" class="fill-n-blue-9" />
+            <circle cx="144" cy="69" r="1" class="fill-n-blue-9" />
+            <circle cx="152" cy="69" r="1" class="fill-n-blue-9" />
+            <circle cx="160" cy="69" r="1" class="fill-n-blue-9" />
+            <circle cx="168" cy="69" r="1" class="fill-n-blue-9" />
+            <circle cx="176" cy="69" r="1" class="fill-n-blue-9" />
+            <circle cx="184" cy="69" r="1" class="fill-n-blue-9" />
+            <circle cx="192" cy="69" r="1" class="fill-n-blue-9" />
+            <circle cx="8" cy="75" r="1" class="fill-n-blue-9" />
+            <circle cx="16" cy="75" r="1" class="fill-n-blue-9" />
+            <circle cx="24" cy="75" r="1" class="fill-n-blue-9" />
+            <circle cx="32" cy="75" r="1" class="fill-n-blue-9" />
+            <circle cx="40" cy="75" r="1" class="fill-n-blue-9" />
+            <circle cx="48" cy="75" r="1" class="fill-n-blue-9" />
+            <circle cx="56" cy="75" r="1" class="fill-n-blue-9" />
+            <circle cx="64" cy="75" r="1" class="fill-n-blue-9" />
+            <circle cx="72" cy="75" r="1" class="fill-n-blue-9" />
+            <circle cx="80" cy="75" r="1" class="fill-n-blue-9" />
+            <circle cx="88" cy="75" r="1" class="fill-n-blue-9" />
+            <circle cx="96" cy="75" r="1" class="fill-n-blue-9" />
+            <circle cx="104" cy="75" r="1" class="fill-n-blue-9" />
+            <circle cx="112" cy="75" r="1" class="fill-n-blue-9" />
+            <circle cx="120" cy="75" r="1" class="fill-n-blue-9" />
+            <circle cx="128" cy="75" r="1" class="fill-n-blue-9" />
+            <circle cx="136" cy="75" r="1" class="fill-n-blue-9" />
+            <circle cx="144" cy="75" r="1" class="fill-n-blue-9" />
+            <circle cx="152" cy="75" r="1" class="fill-n-blue-9" />
+            <circle cx="160" cy="75" r="1" class="fill-n-blue-9" />
+            <circle cx="168" cy="75" r="1" class="fill-n-blue-9" />
+            <circle cx="176" cy="75" r="1" class="fill-n-blue-9" />
+            <circle cx="184" cy="75" r="1" class="fill-n-blue-9" />
+            <circle cx="192" cy="75" r="1" class="fill-n-blue-9" />
+            <circle cx="8" cy="81" r="1" class="fill-n-blue-9" />
+            <circle cx="16" cy="81" r="1" class="fill-n-blue-9" />
+            <circle cx="24" cy="81" r="1" class="fill-n-blue-9" />
+            <circle cx="32" cy="81" r="1" class="fill-n-blue-9" />
+            <circle cx="40" cy="81" r="1" class="fill-n-blue-9" />
+            <circle cx="48" cy="81" r="1" class="fill-n-blue-9" />
+            <circle cx="56" cy="81" r="1" class="fill-n-blue-9" />
+            <circle cx="64" cy="81" r="1" class="fill-n-blue-9" />
+            <circle cx="72" cy="81" r="1" class="fill-n-blue-9" />
+            <circle cx="80" cy="81" r="1" class="fill-n-blue-9" />
+            <circle cx="88" cy="81" r="1" class="fill-n-blue-9" />
+            <circle cx="96" cy="81" r="1" class="fill-n-blue-9" />
+            <circle cx="104" cy="81" r="1" class="fill-n-blue-9" />
+            <circle cx="112" cy="81" r="1" class="fill-n-blue-9" />
+            <circle cx="120" cy="81" r="1" class="fill-n-blue-9" />
+            <circle cx="128" cy="81" r="1" class="fill-n-blue-9" />
+            <circle cx="136" cy="81" r="1" class="fill-n-blue-9" />
+            <circle cx="144" cy="81" r="1" class="fill-n-blue-9" />
+            <circle cx="152" cy="81" r="1" class="fill-n-blue-9" />
+            <circle cx="160" cy="81" r="1" class="fill-n-blue-9" />
+            <circle cx="168" cy="81" r="1" class="fill-n-blue-9" />
+            <circle cx="176" cy="81" r="1" class="fill-n-blue-9" />
+            <circle cx="184" cy="81" r="1" class="fill-n-blue-9" />
+            <circle cx="192" cy="81" r="1" class="fill-n-blue-9" />
+            <circle cx="8" cy="87" r="1" class="fill-n-blue-9" />
+            <circle cx="16" cy="87" r="1" class="fill-n-blue-9" />
+            <circle cx="24" cy="87" r="1" class="fill-n-blue-9" />
+            <circle cx="32" cy="87" r="1" class="fill-n-blue-9" />
+            <circle cx="40" cy="87" r="1" class="fill-n-blue-9" />
+            <circle cx="48" cy="87" r="1" class="fill-n-blue-9" />
+            <circle cx="56" cy="87" r="1" class="fill-n-blue-9" />
+            <circle cx="64" cy="87" r="1" class="fill-n-blue-9" />
+            <circle cx="72" cy="87" r="1" class="fill-n-blue-9" />
+            <circle cx="80" cy="87" r="1" class="fill-n-blue-9" />
+            <circle cx="88" cy="87" r="1" class="fill-n-blue-9" />
+            <circle cx="96" cy="87" r="1" class="fill-n-blue-9" />
+            <circle cx="104" cy="87" r="1" class="fill-n-blue-9" />
+            <circle cx="112" cy="87" r="1" class="fill-n-blue-9" />
+            <circle cx="120" cy="87" r="1" class="fill-n-blue-9" />
+            <circle cx="128" cy="87" r="1" class="fill-n-blue-9" />
+            <circle cx="136" cy="87" r="1" class="fill-n-blue-9" />
+            <circle cx="144" cy="87" r="1" class="fill-n-blue-9" />
+            <circle cx="152" cy="87" r="1" class="fill-n-blue-9" />
+            <circle cx="160" cy="87" r="1" class="fill-n-blue-9" />
+            <circle cx="168" cy="87" r="1" class="fill-n-blue-9" />
+            <circle cx="176" cy="87" r="1" class="fill-n-blue-9" />
+            <circle cx="184" cy="87" r="1" class="fill-n-blue-9" />
+            <circle cx="192" cy="87" r="1" class="fill-n-blue-9" />
+            <circle cx="8" cy="93" r="1" class="fill-n-blue-9" />
+            <circle cx="16" cy="93" r="1" class="fill-n-blue-9" />
+            <circle cx="24" cy="93" r="1" class="fill-n-blue-9" />
+            <circle cx="32" cy="93" r="1" class="fill-n-blue-9" />
+            <circle cx="40" cy="93" r="1" class="fill-n-blue-9" />
+            <circle cx="48" cy="93" r="1" class="fill-n-blue-9" />
+            <circle cx="56" cy="93" r="1" class="fill-n-blue-9" />
+            <circle cx="64" cy="93" r="1" class="fill-n-blue-9" />
+            <circle cx="72" cy="93" r="1" class="fill-n-blue-9" />
+            <circle cx="80" cy="93" r="1" class="fill-n-blue-9" />
+            <circle cx="88" cy="93" r="1" class="fill-n-blue-9" />
+            <circle cx="96" cy="93" r="1" class="fill-n-blue-9" />
+            <circle cx="104" cy="93" r="1" class="fill-n-blue-9" />
+            <circle cx="112" cy="93" r="1" class="fill-n-blue-9" />
+            <circle cx="120" cy="93" r="1" class="fill-n-blue-9" />
+            <circle cx="128" cy="93" r="1" class="fill-n-blue-9" />
+            <circle cx="136" cy="93" r="1" class="fill-n-blue-9" />
+            <circle cx="144" cy="93" r="1" class="fill-n-blue-9" />
+            <circle cx="152" cy="93" r="1" class="fill-n-blue-9" />
+            <circle cx="160" cy="93" r="1" class="fill-n-blue-9" />
+            <circle cx="168" cy="93" r="1" class="fill-n-blue-9" />
+            <circle cx="176" cy="93" r="1" class="fill-n-blue-9" />
+            <circle cx="184" cy="93" r="1" class="fill-n-blue-9" />
+            <circle cx="192" cy="93" r="1" class="fill-n-blue-9" />
+            <circle cx="8" cy="99" r="1" class="fill-n-blue-9" />
+            <circle cx="16" cy="99" r="1" class="fill-n-blue-9" />
+            <circle cx="24" cy="99" r="1" class="fill-n-blue-9" />
+            <circle cx="32" cy="99" r="1" class="fill-n-blue-9" />
+            <circle cx="40" cy="99" r="1" class="fill-n-blue-9" />
+            <circle cx="48" cy="99" r="1" class="fill-n-blue-9" />
+            <circle cx="56" cy="99" r="1" class="fill-n-blue-9" />
+            <circle cx="64" cy="99" r="1" class="fill-n-blue-9" />
+            <circle cx="72" cy="99" r="1" class="fill-n-blue-9" />
+            <circle cx="80" cy="99" r="1" class="fill-n-blue-9" />
+            <circle cx="88" cy="99" r="1" class="fill-n-blue-9" />
+            <circle cx="96" cy="99" r="1" class="fill-n-blue-9" />
+            <circle cx="104" cy="99" r="1" class="fill-n-blue-9" />
+            <circle cx="112" cy="99" r="1" class="fill-n-blue-9" />
+            <circle cx="120" cy="99" r="1" class="fill-n-blue-9" />
+            <circle cx="128" cy="99" r="1" class="fill-n-blue-9" />
+            <circle cx="136" cy="99" r="1" class="fill-n-blue-9" />
+            <circle cx="144" cy="99" r="1" class="fill-n-blue-9" />
+            <circle cx="152" cy="99" r="1" class="fill-n-blue-9" />
+            <circle cx="160" cy="99" r="1" class="fill-n-blue-9" />
+            <circle cx="168" cy="99" r="1" class="fill-n-blue-9" />
+            <circle cx="176" cy="99" r="1" class="fill-n-blue-9" />
+            <circle cx="184" cy="99" r="1" class="fill-n-blue-9" />
+            <circle cx="192" cy="99" r="1" class="fill-n-blue-9" />
+            <circle cx="8" cy="105" r="1" class="fill-n-blue-9" />
+            <circle cx="16" cy="105" r="1" class="fill-n-blue-9" />
+            <circle cx="24" cy="105" r="1" class="fill-n-blue-9" />
+            <circle cx="32" cy="105" r="1" class="fill-n-blue-9" />
+            <circle cx="40" cy="105" r="1" class="fill-n-blue-9" />
+            <circle cx="48" cy="105" r="1" class="fill-n-blue-9" />
+            <circle cx="56" cy="105" r="1" class="fill-n-blue-9" />
+            <circle cx="64" cy="105" r="1" class="fill-n-blue-9" />
+            <circle cx="72" cy="105" r="1" class="fill-n-blue-9" />
+            <circle cx="80" cy="105" r="1" class="fill-n-blue-9" />
+            <circle cx="88" cy="105" r="1" class="fill-n-blue-9" />
+            <circle cx="96" cy="105" r="1" class="fill-n-blue-9" />
+            <circle cx="104" cy="105" r="1" class="fill-n-blue-9" />
+            <circle cx="112" cy="105" r="1" class="fill-n-blue-9" />
+            <circle cx="120" cy="105" r="1" class="fill-n-blue-9" />
+            <circle cx="128" cy="105" r="1" class="fill-n-blue-9" />
+            <circle cx="136" cy="105" r="1" class="fill-n-blue-9" />
+            <circle cx="144" cy="105" r="1" class="fill-n-blue-9" />
+            <circle cx="152" cy="105" r="1" class="fill-n-blue-9" />
+            <circle cx="160" cy="105" r="1" class="fill-n-blue-9" />
+            <circle cx="168" cy="105" r="1" class="fill-n-blue-9" />
+            <circle cx="176" cy="105" r="1" class="fill-n-blue-9" />
+            <circle cx="184" cy="105" r="1" class="fill-n-blue-9" />
+            <circle cx="192" cy="105" r="1" class="fill-n-blue-9" />
+            <circle cx="8" cy="111" r="1" class="fill-n-blue-9" />
+            <circle cx="16" cy="111" r="1" class="fill-n-blue-9" />
+            <circle cx="24" cy="111" r="1" class="fill-n-blue-9" />
+            <circle cx="32" cy="111" r="1" class="fill-n-blue-9" />
+            <circle cx="40" cy="111" r="1" class="fill-n-blue-9" />
+            <circle cx="48" cy="111" r="1" class="fill-n-blue-9" />
+            <circle cx="56" cy="111" r="1" class="fill-n-blue-9" />
+            <circle cx="64" cy="111" r="1" class="fill-n-blue-9" />
+            <circle cx="72" cy="111" r="1" class="fill-n-blue-9" />
+            <circle cx="80" cy="111" r="1" class="fill-n-blue-9" />
+            <circle cx="88" cy="111" r="1" class="fill-n-blue-9" />
+            <circle cx="96" cy="111" r="1" class="fill-n-blue-9" />
+            <circle cx="104" cy="111" r="1" class="fill-n-blue-9" />
+            <circle cx="112" cy="111" r="1" class="fill-n-blue-9" />
+            <circle cx="120" cy="111" r="1" class="fill-n-blue-9" />
+            <circle cx="128" cy="111" r="1" class="fill-n-blue-9" />
+            <circle cx="136" cy="111" r="1" class="fill-n-blue-9" />
+            <circle cx="144" cy="111" r="1" class="fill-n-blue-9" />
+            <circle cx="152" cy="111" r="1" class="fill-n-blue-9" />
+            <circle cx="160" cy="111" r="1" class="fill-n-blue-9" />
+            <circle cx="168" cy="111" r="1" class="fill-n-blue-9" />
+            <circle cx="176" cy="111" r="1" class="fill-n-blue-9" />
+            <circle cx="184" cy="111" r="1" class="fill-n-blue-9" />
+            <circle cx="192" cy="111" r="1" class="fill-n-blue-9" />
+            <circle cx="8" cy="117" r="1" class="fill-n-blue-9" />
+            <circle cx="16" cy="117" r="1" class="fill-n-blue-9" />
+            <circle cx="24" cy="117" r="1" class="fill-n-blue-9" />
+            <circle cx="32" cy="117" r="1" class="fill-n-blue-9" />
+            <circle cx="40" cy="117" r="1" class="fill-n-blue-9" />
+            <circle cx="48" cy="117" r="1" class="fill-n-blue-9" />
+            <circle cx="56" cy="117" r="1" class="fill-n-blue-9" />
+            <circle cx="64" cy="117" r="1" class="fill-n-blue-9" />
+            <circle cx="72" cy="117" r="1" class="fill-n-blue-9" />
+            <circle cx="80" cy="117" r="1" class="fill-n-blue-9" />
+            <circle cx="88" cy="117" r="1" class="fill-n-blue-9" />
+            <circle cx="96" cy="117" r="1" class="fill-n-blue-9" />
+            <circle cx="104" cy="117" r="1" class="fill-n-blue-9" />
+            <circle cx="112" cy="117" r="1" class="fill-n-blue-9" />
+            <circle cx="120" cy="117" r="1" class="fill-n-blue-9" />
+            <circle cx="128" cy="117" r="1" class="fill-n-blue-9" />
+            <circle cx="136" cy="117" r="1" class="fill-n-blue-9" />
+            <circle cx="144" cy="117" r="1" class="fill-n-blue-9" />
+            <circle cx="152" cy="117" r="1" class="fill-n-blue-9" />
+            <circle cx="160" cy="117" r="1" class="fill-n-blue-9" />
+            <circle cx="168" cy="117" r="1" class="fill-n-blue-9" />
+            <circle cx="176" cy="117" r="1" class="fill-n-blue-9" />
+            <circle cx="184" cy="117" r="1" class="fill-n-blue-9" />
+            <circle cx="192" cy="117" r="1" class="fill-n-blue-9" />
+            <circle cx="8" cy="123" r="1" class="fill-n-blue-9" />
+            <circle cx="16" cy="123" r="1" class="fill-n-blue-9" />
+            <circle cx="24" cy="123" r="1" class="fill-n-blue-9" />
+            <circle cx="32" cy="123" r="1" class="fill-n-blue-9" />
+            <circle cx="40" cy="123" r="1" class="fill-n-blue-9" />
+            <circle cx="48" cy="123" r="1" class="fill-n-blue-9" />
+            <circle cx="56" cy="123" r="1" class="fill-n-blue-9" />
+            <circle cx="64" cy="123" r="1" class="fill-n-blue-9" />
+            <circle cx="72" cy="123" r="1" class="fill-n-blue-9" />
+            <circle cx="80" cy="123" r="1" class="fill-n-blue-9" />
+            <circle cx="88" cy="123" r="1" class="fill-n-blue-9" />
+            <circle cx="96" cy="123" r="1" class="fill-n-blue-9" />
+            <circle cx="104" cy="123" r="1" class="fill-n-blue-9" />
+            <circle cx="112" cy="123" r="1" class="fill-n-blue-9" />
+            <circle cx="120" cy="123" r="1" class="fill-n-blue-9" />
+            <circle cx="128" cy="123" r="1" class="fill-n-blue-9" />
+            <circle cx="136" cy="123" r="1" class="fill-n-blue-9" />
+            <circle cx="144" cy="123" r="1" class="fill-n-blue-9" />
+            <circle cx="152" cy="123" r="1" class="fill-n-blue-9" />
+            <circle cx="160" cy="123" r="1" class="fill-n-blue-9" />
+            <circle cx="168" cy="123" r="1" class="fill-n-blue-9" />
+            <circle cx="176" cy="123" r="1" class="fill-n-blue-9" />
+            <circle cx="184" cy="123" r="1" class="fill-n-blue-9" />
+            <circle cx="192" cy="123" r="1" class="fill-n-blue-9" />
+            <circle cx="8" cy="129" r="1" class="fill-n-blue-9" />
+            <circle cx="16" cy="129" r="1" class="fill-n-blue-9" />
+            <circle cx="24" cy="129" r="1" class="fill-n-blue-9" />
+            <circle cx="32" cy="129" r="1" class="fill-n-blue-9" />
+            <circle cx="40" cy="129" r="1" class="fill-n-blue-9" />
+            <circle cx="48" cy="129" r="1" class="fill-n-blue-9" />
+            <circle cx="56" cy="129" r="1" class="fill-n-blue-9" />
+            <circle cx="64" cy="129" r="1" class="fill-n-blue-9" />
+            <circle cx="72" cy="129" r="1" class="fill-n-blue-9" />
+            <circle cx="80" cy="129" r="1" class="fill-n-blue-9" />
+            <circle cx="88" cy="129" r="1" class="fill-n-blue-9" />
+            <circle cx="96" cy="129" r="1" class="fill-n-blue-9" />
+            <circle cx="104" cy="129" r="1" class="fill-n-blue-9" />
+            <circle cx="112" cy="129" r="1" class="fill-n-blue-9" />
+            <circle cx="120" cy="129" r="1" class="fill-n-blue-9" />
+            <circle cx="128" cy="129" r="1" class="fill-n-blue-9" />
+            <circle cx="136" cy="129" r="1" class="fill-n-blue-9" />
+            <circle cx="144" cy="129" r="1" class="fill-n-blue-9" />
+            <circle cx="152" cy="129" r="1" class="fill-n-blue-9" />
+            <circle cx="160" cy="129" r="1" class="fill-n-blue-9" />
+            <circle cx="168" cy="129" r="1" class="fill-n-blue-9" />
+            <circle cx="176" cy="129" r="1" class="fill-n-blue-9" />
+            <circle cx="184" cy="129" r="1" class="fill-n-blue-9" />
+            <circle cx="192" cy="129" r="1" class="fill-n-blue-9" />
+            <circle cx="8" cy="135" r="1" class="fill-n-blue-9" />
+            <circle cx="16" cy="135" r="1" class="fill-n-blue-9" />
+            <circle cx="24" cy="135" r="1" class="fill-n-blue-9" />
+            <circle cx="32" cy="135" r="1" class="fill-n-blue-9" />
+            <circle cx="40" cy="135" r="1" class="fill-n-blue-9" />
+            <circle cx="48" cy="135" r="1" class="fill-n-blue-9" />
+            <circle cx="56" cy="135" r="1" class="fill-n-blue-9" />
+            <circle cx="64" cy="135" r="1" class="fill-n-blue-9" />
+            <circle cx="72" cy="135" r="1" class="fill-n-blue-9" />
+            <circle cx="80" cy="135" r="1" class="fill-n-blue-9" />
+            <circle cx="88" cy="135" r="1" class="fill-n-blue-9" />
+            <circle cx="96" cy="135" r="1" class="fill-n-blue-9" />
+            <circle cx="104" cy="135" r="1" class="fill-n-blue-9" />
+            <circle cx="112" cy="135" r="1" class="fill-n-blue-9" />
+            <circle cx="120" cy="135" r="1" class="fill-n-blue-9" />
+            <circle cx="128" cy="135" r="1" class="fill-n-blue-9" />
+            <circle cx="136" cy="135" r="1" class="fill-n-blue-9" />
+            <circle cx="144" cy="135" r="1" class="fill-n-blue-9" />
+            <circle cx="152" cy="135" r="1" class="fill-n-blue-9" />
+            <circle cx="160" cy="135" r="1" class="fill-n-blue-9" />
+            <circle cx="168" cy="135" r="1" class="fill-n-blue-9" />
+            <circle cx="176" cy="135" r="1" class="fill-n-blue-9" />
+            <circle cx="184" cy="135" r="1" class="fill-n-blue-9" />
+            <circle cx="192" cy="135" r="1" class="fill-n-blue-9" />
+            <circle cx="8" cy="141" r="1" class="fill-n-blue-9" />
+            <circle cx="16" cy="141" r="1" class="fill-n-blue-9" />
+            <circle cx="24" cy="141" r="1" class="fill-n-blue-9" />
+            <circle cx="32" cy="141" r="1" class="fill-n-blue-9" />
+            <circle cx="40" cy="141" r="1" class="fill-n-blue-9" />
+            <circle cx="48" cy="141" r="1" class="fill-n-blue-9" />
+            <circle cx="56" cy="141" r="1" class="fill-n-blue-9" />
+            <circle cx="64" cy="141" r="1" class="fill-n-blue-9" />
+            <circle cx="72" cy="141" r="1" class="fill-n-blue-9" />
+            <circle cx="80" cy="141" r="1" class="fill-n-blue-9" />
+            <circle cx="88" cy="141" r="1" class="fill-n-blue-9" />
+            <circle cx="96" cy="141" r="1" class="fill-n-blue-9" />
+            <circle cx="104" cy="141" r="1" class="fill-n-blue-9" />
+            <circle cx="112" cy="141" r="1" class="fill-n-blue-9" />
+            <circle cx="120" cy="141" r="1" class="fill-n-blue-9" />
+            <circle cx="128" cy="141" r="1" class="fill-n-blue-9" />
+            <circle cx="136" cy="141" r="1" class="fill-n-blue-9" />
+            <circle cx="144" cy="141" r="1" class="fill-n-blue-9" />
+            <circle cx="152" cy="141" r="1" class="fill-n-blue-9" />
+            <circle cx="160" cy="141" r="1" class="fill-n-blue-9" />
+            <circle cx="168" cy="141" r="1" class="fill-n-blue-9" />
+            <circle cx="176" cy="141" r="1" class="fill-n-blue-9" />
+            <circle cx="184" cy="141" r="1" class="fill-n-blue-9" />
+            <circle cx="192" cy="141" r="1" class="fill-n-blue-9" />
+            <circle cx="8" cy="147" r="1" class="fill-n-blue-9" />
+            <circle cx="16" cy="147" r="1" class="fill-n-blue-9" />
+            <circle cx="24" cy="147" r="1" class="fill-n-blue-9" />
+            <circle cx="32" cy="147" r="1" class="fill-n-blue-9" />
+            <circle cx="40" cy="147" r="1" class="fill-n-blue-9" />
+            <circle cx="48" cy="147" r="1" class="fill-n-blue-9" />
+            <circle cx="56" cy="147" r="1" class="fill-n-blue-9" />
+            <circle cx="64" cy="147" r="1" class="fill-n-blue-9" />
+            <circle cx="72" cy="147" r="1" class="fill-n-blue-9" />
+            <circle cx="80" cy="147" r="1" class="fill-n-blue-9" />
+            <circle cx="88" cy="147" r="1" class="fill-n-blue-9" />
+            <circle cx="96" cy="147" r="1" class="fill-n-blue-9" />
+            <circle cx="104" cy="147" r="1" class="fill-n-blue-9" />
+            <circle cx="112" cy="147" r="1" class="fill-n-blue-9" />
+            <circle cx="120" cy="147" r="1" class="fill-n-blue-9" />
+            <circle cx="128" cy="147" r="1" class="fill-n-blue-9" />
+            <circle cx="136" cy="147" r="1" class="fill-n-blue-9" />
+            <circle cx="144" cy="147" r="1" class="fill-n-blue-9" />
+            <circle cx="152" cy="147" r="1" class="fill-n-blue-9" />
+            <circle cx="160" cy="147" r="1" class="fill-n-blue-9" />
+            <circle cx="168" cy="147" r="1" class="fill-n-blue-9" />
+            <circle cx="176" cy="147" r="1" class="fill-n-blue-9" />
+            <circle cx="184" cy="147" r="1" class="fill-n-blue-9" />
+            <circle cx="192" cy="147" r="1" class="fill-n-blue-9" />
+            <circle cx="8" cy="153" r="1" class="fill-n-blue-9" />
+            <circle cx="16" cy="153" r="1" class="fill-n-blue-9" />
+            <circle cx="24" cy="153" r="1" class="fill-n-blue-9" />
+            <circle cx="32" cy="153" r="1" class="fill-n-blue-9" />
+            <circle cx="40" cy="153" r="1" class="fill-n-blue-9" />
+            <circle cx="48" cy="153" r="1" class="fill-n-blue-9" />
+            <circle cx="56" cy="153" r="1" class="fill-n-blue-9" />
+            <circle cx="64" cy="153" r="1" class="fill-n-blue-9" />
+            <circle cx="72" cy="153" r="1" class="fill-n-blue-9" />
+            <circle cx="80" cy="153" r="1" class="fill-n-blue-9" />
+            <circle cx="88" cy="153" r="1" class="fill-n-blue-9" />
+            <circle cx="96" cy="153" r="1" class="fill-n-blue-9" />
+            <circle cx="104" cy="153" r="1" class="fill-n-blue-9" />
+            <circle cx="112" cy="153" r="1" class="fill-n-blue-9" />
+            <circle cx="120" cy="153" r="1" class="fill-n-blue-9" />
+            <circle cx="128" cy="153" r="1" class="fill-n-blue-9" />
+            <circle cx="136" cy="153" r="1" class="fill-n-blue-9" />
+            <circle cx="144" cy="153" r="1" class="fill-n-blue-9" />
+            <circle cx="152" cy="153" r="1" class="fill-n-blue-9" />
+            <circle cx="160" cy="153" r="1" class="fill-n-blue-9" />
+            <circle cx="168" cy="153" r="1" class="fill-n-blue-9" />
+            <circle cx="176" cy="153" r="1" class="fill-n-blue-9" />
+            <circle cx="184" cy="153" r="1" class="fill-n-blue-9" />
+            <circle cx="192" cy="153" r="1" class="fill-n-blue-9" />
+            <rect
+              width="200"
+              height="156"
+              fill="url(#paint0_linear_773_34322)"
+            />
+            <rect
+              width="200"
+              height="156"
+              fill="url(#paint1_linear_773_34322)"
+            />
+          </g>
+        </g>
+        <defs>
+          <linearGradient
+            id="paint0_linear_773_34322"
+            x1="100"
+            y1="0"
+            x2="100"
+            y2="156"
+            gradientUnits="userSpaceOnUse"
+          >
+            <stop stop-color="var(--gradient-start)" />
+            <stop
+              offset="0.480769"
+              stop-color="var(--gradient-start)"
+              stop-opacity="0"
+            />
+            <stop offset="1" stop-color="var(--gradient-start)" />
+          </linearGradient>
+          <linearGradient
+            id="paint1_linear_773_34322"
+            x1="0"
+            y1="78"
+            x2="200"
+            y2="78"
+            gradientUnits="userSpaceOnUse"
+          >
+            <stop stop-color="var(--gradient-start)" />
+            <stop
+              offset="0.480769"
+              stop-color="var(--gradient-start)"
+              stop-opacity="0"
+            />
+            <stop offset="1" stop-color="var(--gradient-start)" />
+          </linearGradient>
+          <clipPath id="clip0_773_34322">
+            <rect width="200" height="156" rx="16" fill="white" />
+          </clipPath>
+        </defs>
+      </svg>
+    </div>
+    <svg
+      viewBox="0 0 136 108"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      aria-hidden="false"
+      focusable="false"
+      class="z-10 relative"
+    >
+      <rect width="136" height="108" fill="url(#paint0_radial_797_91519)" />
+      <path
+        d="M58 48.039C58 46.9129 58.9129 46 60.039 46C61.1651 46 62.0779 46.9129 62.0779 48.039V52.7513C62.0779 53.8774 61.1651 54.7902 60.039 54.7902C58.9129 54.7902 58 53.8774 58 52.7513V48.039Z"
+        class="fill-n-slate-10"
+      />
+      <path
+        d="M64.5244 48.039C64.5244 46.9129 65.4373 46 66.5634 46C67.6895 46 68.6024 46.9129 68.6024 48.039V52.7513C68.6024 53.8774 67.6895 54.7902 66.5634 54.7902C65.4373 54.7902 64.5244 53.8774 64.5244 52.7513V48.039Z"
+        class="fill-n-slate-10"
+      />
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M79.1862 40.173C71.5933 39.1017 65.4039 39.0594 57.6405 40.1683C55.678 40.4485 54.3796 40.638 53.3896 40.9273C52.4716 41.1956 51.9496 41.5155 51.5177 41.9981C50.6236 42.9974 50.5057 44.1276 50.3838 48.0695C50.264 51.9436 50.5013 55.4156 50.9507 59.3222C51.1901 61.4039 51.3549 62.8088 51.618 63.8769C51.8676 64.89 52.1694 65.4347 52.5889 65.8518C53.0117 66.2721 53.5536 66.5686 54.5482 66.8091C55.6002 67.0636 56.9806 67.2175 59.032 67.4413C65.6668 68.1652 70.6333 68.1615 77.2927 67.4451C79.369 67.2218 80.7719 67.0678 81.8396 66.815C82.8541 66.5749 83.3995 66.2805 83.8165 65.8722C84.2247 65.4724 84.5366 64.921 84.8071 63.8574C85.0894 62.7477 85.2815 61.2793 85.5594 59.1222C86.0553 55.2735 86.4123 51.8935 86.4262 48.1908C86.4411 44.232 86.3601 43.1056 85.4558 42.0608C85.019 41.5562 84.488 41.2244 83.5491 40.9481C82.5352 40.6497 81.2017 40.4573 79.1862 40.173ZM57.1664 36.849C65.2537 35.6939 71.7606 35.7391 79.6546 36.8529L79.7701 36.8692C81.6392 37.1328 83.2183 37.3555 84.4958 37.7315C85.8745 38.1372 87.0274 38.7532 87.991 39.8665C89.8087 41.9666 89.7969 44.4583 89.7811 47.7688C89.7804 47.9121 89.7797 48.057 89.7792 48.2034C89.7645 52.1184 89.3857 55.6634 88.8849 59.5506L88.8717 59.6535C88.6103 61.682 88.395 63.3537 88.0566 64.6839C87.7008 66.0827 87.169 67.282 86.1624 68.2678C85.1645 69.245 83.9854 69.7528 82.6119 70.0778C81.3149 70.3848 79.7011 70.5584 77.7558 70.7676L77.6513 70.7789C70.7551 71.5207 65.5465 71.5249 58.6684 70.7745L58.5622 70.7629C56.6442 70.5537 55.0471 70.3795 53.7599 70.0681C52.3915 69.7371 51.2202 69.219 50.2249 68.2296C49.2263 67.2369 48.7018 66.0571 48.3623 64.6788C48.0421 63.3788 47.856 61.7601 47.6318 59.8109L47.6197 59.7053C47.1588 55.6989 46.906 52.0546 47.0325 47.9659C47.037 47.8176 47.0414 47.6709 47.0458 47.5257C47.144 44.24 47.2178 41.7754 49.019 39.7623C49.9747 38.6942 51.1043 38.102 52.449 37.7089C53.6962 37.3444 55.2339 37.1249 57.0541 36.865C57.0914 36.8597 57.1288 36.8543 57.1664 36.849Z"
+        class="fill-n-slate-10"
+      />
+      <defs>
+        <radialGradient
+          id="paint0_radial_797_91519"
+          cx="0"
+          cy="0"
+          r="1"
+          gradientUnits="userSpaceOnUse"
+          gradientTransform="translate(68 54) rotate(90) scale(54 68)"
+        >
+          <stop
+            offset="0.527769"
+            stop-color="var(--gradient-end)"
+            stop-opacity="0.9"
+          />
+          <stop offset="1" stop-color="var(--gradient-end)" stop-opacity="0" />
+        </radialGradient>
+      </defs>
+    </svg>
+  </div>
+</template>
+
+<style scoped>
+svg {
+  --gradient-start: #fcfcfd;
+  --gradient-end: #fcfcfd;
+}
+
+body.dark,
+.htw-dark svg {
+  --gradient-start: #121213;
+  --gradient-end: #121213;
+}
+
+.svg-wrapper {
+  display: inline-block;
+  cursor: pointer;
+  user-select: none;
+  -webkit-tap-highlight-color: transparent;
+  outline: none;
+}
+</style>