From a78cb83e0c1f1b43f7e802df1f0419e873159645 Mon Sep 17 00:00:00 2001
From: Denis Ergin <denis.ergin@outlook.de>
Date: Tue, 3 Dec 2024 11:56:59 +0100
Subject: [PATCH] feat(slides): css major part 2

---
 package.json                                  |    6 +-
 pnpm-lock.yaml                                | 1033 ++++++++---------
 public/favicon-blue.svg                       |    3 +
 public/favicon-dark.svg                       |    3 +
 .../css-additional-styles/animations.astro    |  132 +++
 .../css-additional-styles/background.astro    |  274 +++++
 .../css-additional-styles/css-functions.astro |   68 ++
 .../css-additional-styles/filters.astro       |  106 ++
 .../slides/css-additional-styles/index.astro  |  542 +++++++++
 .../css-additional-styles/list-styles.astro   |   59 +
 .../css-additional-styles/overflow.astro      |   58 +
 .../css-additional-styles/positioning.astro   |  251 ++++
 .../css-additional-styles/scroll-snap.astro   |    9 +
 .../css-additional-styles/shadows.astro       |  130 +++
 .../css-additional-styles/specials.astro      |  190 +++
 .../slides/css-additional-styles/title.astro  |    4 +
 .../css-additional-styles/transform.astro     |  223 ++++
 .../css-additional-styles/transitions.astro   |   84 ++
 .../css-additional-styles/variables.astro     |   81 ++
 .../css-additional-styles/z-index.astro       |   29 +
 src/pages/playground/flexbox.astro            |    8 +
 src/pages/slides/css-more-of-styles.astro     |    8 +
 22 files changed, 2772 insertions(+), 529 deletions(-)
 create mode 100644 public/favicon-blue.svg
 create mode 100644 public/favicon-dark.svg
 create mode 100644 src/components/slides/css-additional-styles/animations.astro
 create mode 100644 src/components/slides/css-additional-styles/background.astro
 create mode 100644 src/components/slides/css-additional-styles/css-functions.astro
 create mode 100644 src/components/slides/css-additional-styles/filters.astro
 create mode 100644 src/components/slides/css-additional-styles/index.astro
 create mode 100644 src/components/slides/css-additional-styles/list-styles.astro
 create mode 100644 src/components/slides/css-additional-styles/overflow.astro
 create mode 100644 src/components/slides/css-additional-styles/positioning.astro
 create mode 100644 src/components/slides/css-additional-styles/scroll-snap.astro
 create mode 100644 src/components/slides/css-additional-styles/shadows.astro
 create mode 100644 src/components/slides/css-additional-styles/specials.astro
 create mode 100644 src/components/slides/css-additional-styles/title.astro
 create mode 100644 src/components/slides/css-additional-styles/transform.astro
 create mode 100644 src/components/slides/css-additional-styles/transitions.astro
 create mode 100644 src/components/slides/css-additional-styles/variables.astro
 create mode 100644 src/components/slides/css-additional-styles/z-index.astro
 create mode 100644 src/pages/playground/flexbox.astro
 create mode 100644 src/pages/slides/css-more-of-styles.astro

diff --git a/package.json b/package.json
index d7a1088..fde4788 100644
--- a/package.json
+++ b/package.json
@@ -10,9 +10,9 @@
     "astro": "astro"
   },
   "dependencies": {
-    "@astrojs/check": "^0.9.2",
-    "@astrojs/mdx": "^3.1.8",
-    "astro": "^4.13.3",
+    "@astrojs/check": "^0.9.4",
+    "@astrojs/mdx": "^3.1.9",
+    "astro": "^4.16.13",
     "astro-icon": "^1.1.1",
     "reveal.js": "^5.1.0"
   },
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index e0cf3d0..5b35930 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -9,14 +9,14 @@ importers:
   .:
     dependencies:
       '@astrojs/check':
-        specifier: ^0.9.2
-        version: 0.9.3(typescript@5.6.2)
+        specifier: ^0.9.4
+        version: 0.9.4(typescript@5.6.2)
       '@astrojs/mdx':
-        specifier: ^3.1.8
-        version: 3.1.8(astro@4.15.6(@types/node@22.5.5)(rollup@4.21.3)(sass@1.78.0)(typescript@5.6.2))
+        specifier: ^3.1.9
+        version: 3.1.9(astro@4.16.13(@types/node@22.5.5)(rollup@4.21.3)(sass@1.78.0)(typescript@5.6.2))
       astro:
-        specifier: ^4.13.3
-        version: 4.15.6(@types/node@22.5.5)(rollup@4.21.3)(sass@1.78.0)(typescript@5.6.2)
+        specifier: ^4.16.13
+        version: 4.16.13(@types/node@22.5.5)(rollup@4.21.3)(sass@1.78.0)(typescript@5.6.2)
       astro-icon:
         specifier: ^1.1.1
         version: 1.1.1
@@ -46,8 +46,8 @@ packages:
   '@antfu/utils@0.7.10':
     resolution: {integrity: sha512-+562v9k4aI80m1+VuMHehNJWLOFjBnXn3tdOitzD0il5b7smkSBal4+a3oKiQTbrwMmN/TBUMDvbdoWDehgOww==}
 
-  '@astrojs/check@0.9.3':
-    resolution: {integrity: sha512-I6Dz45bMI5YRbp4yK2LKWsHH3/kkHRGdPGruGkLap6pqxhdcNh7oCgN04Ac+haDfc9ow5BYPGPmEhkwef15GQQ==}
+  '@astrojs/check@0.9.4':
+    resolution: {integrity: sha512-IOheHwCtpUfvogHHsvu0AbeRZEnjJg3MopdLddkJE70mULItS/Vh37BHcI00mcOJcH1vhD3odbpvWokpxam7xA==}
     hasBin: true
     peerDependencies:
       typescript: ^5.0.0
@@ -58,8 +58,8 @@ packages:
   '@astrojs/internal-helpers@0.4.1':
     resolution: {integrity: sha512-bMf9jFihO8YP940uD70SI/RDzIhUHJAolWVcO1v5PUivxGKvfLZTLTVVxEYzGYyPsA3ivdLNqMnL5VgmQySa+g==}
 
-  '@astrojs/language-server@2.14.2':
-    resolution: {integrity: sha512-daUJ/+/2pPF3eGG4tVdXKyw0tabUDrJKwLzU8VTuNhEHIn3VZAIES6VT3+mX0lmKcMiKM8/bjZdfY+fPfmnsMA==}
+  '@astrojs/language-server@2.15.4':
+    resolution: {integrity: sha512-JivzASqTPR2bao9BWsSc/woPHH7OGSGc9aMxXL4U6egVTqBycB3ZHdBJPuOCVtcGLrzdWTosAqVPz1BVoxE0+A==}
     hasBin: true
     peerDependencies:
       prettier: ^3.0.0
@@ -70,14 +70,11 @@ packages:
       prettier-plugin-astro:
         optional: true
 
-  '@astrojs/markdown-remark@5.2.0':
-    resolution: {integrity: sha512-vWGM24KZXz11jR3JO+oqYU3T2qpuOi4uGivJ9SQLCAI01+vEkHC60YJMRvHPc+hwd60F7euNs1PeOEixIIiNQw==}
-
   '@astrojs/markdown-remark@5.3.0':
     resolution: {integrity: sha512-r0Ikqr0e6ozPb5bvhup1qdWnSPUvQu6tub4ZLYaKyG50BXZ0ej6FhGz3GpChKpH7kglRFPObJd/bDyf2VM9pkg==}
 
-  '@astrojs/mdx@3.1.8':
-    resolution: {integrity: sha512-4o/+pvgoLFG0eG96cFs4t3NzZAIAOYu57fKAprWHXJrnq/qdBV0av6BYDjoESxvxNILUYoj8sdZVWtlPWVDLog==}
+  '@astrojs/mdx@3.1.9':
+    resolution: {integrity: sha512-3jPD4Bff6lIA20RQoonnZkRtZ9T3i0HFm6fcDF7BMsKIZ+xBP2KXzQWiuGu62lrVCmU612N+SQVGl5e0fI+zWg==}
     engines: {node: ^18.17.1 || ^20.3.0 || >=21.0.0}
     peerDependencies:
       astro: ^4.8.0
@@ -90,69 +87,61 @@ packages:
     resolution: {integrity: sha512-/ca/+D8MIKEC8/A9cSaPUqQNZm+Es/ZinRv0ZAzvu2ios7POQSsVD+VOj7/hypWNsNM3T7RpfgNq7H2TU1KEHA==}
     engines: {node: ^18.17.1 || ^20.3.0 || >=21.0.0}
 
-  '@astrojs/yaml2ts@0.2.1':
-    resolution: {integrity: sha512-CBaNwDQJz20E5WxzQh4thLVfhB3JEEGz72wRA+oJp6fQR37QLAqXZJU0mHC+yqMOQ6oj0GfRPJrz6hjf+zm6zA==}
+  '@astrojs/yaml2ts@0.2.2':
+    resolution: {integrity: sha512-GOfvSr5Nqy2z5XiwqTouBBpy5FyI6DEe+/g/Mk5am9SjILN1S5fOEvYK0GuWHg98yS/dobP4m8qyqw/URW35fQ==}
 
-  '@babel/code-frame@7.24.7':
-    resolution: {integrity: sha512-BcYH1CVJBO9tvyIZ2jVeXgSIMvGZ2FDRvDdOIVQyuklNKSsx+eppDEBq/g47Ayw+RqNFE+URvOShmf+f/qwAlA==}
+  '@babel/code-frame@7.26.2':
+    resolution: {integrity: sha512-RJlIHRueQgwWitWgF8OdFYGZX328Ax5BCemNGlqHfplnRT9ESi8JkFlvaVYbS+UubVY6dpv87Fs2u5M29iNFVQ==}
     engines: {node: '>=6.9.0'}
 
-  '@babel/compat-data@7.25.4':
-    resolution: {integrity: sha512-+LGRog6RAsCJrrrg/IO6LGmpphNe5DiK30dGjCoxxeGv49B10/3XYGxPsAwrDlMFcFEvdAUavDT8r9k/hSyQqQ==}
+  '@babel/compat-data@7.26.2':
+    resolution: {integrity: sha512-Z0WgzSEa+aUcdiJuCIqgujCshpMWgUpgOxXotrYPSA53hA3qopNaqcJpyr0hVb1FeWdnqFA35/fUtXgBK8srQg==}
     engines: {node: '>=6.9.0'}
 
-  '@babel/core@7.25.2':
-    resolution: {integrity: sha512-BBt3opiCOxUr9euZ5/ro/Xv8/V7yJ5bjYMqG/C1YAo8MIKAnumZalCN+msbci3Pigy4lIQfPUpfMM27HMGaYEA==}
+  '@babel/core@7.26.0':
+    resolution: {integrity: sha512-i1SLeK+DzNnQ3LL/CswPCa/E5u4lh1k6IAEphON8F+cXt0t9euTshDru0q7/IqMa1PMPz5RnHuHscF8/ZJsStg==}
     engines: {node: '>=6.9.0'}
 
-  '@babel/generator@7.25.6':
-    resolution: {integrity: sha512-VPC82gr1seXOpkjAAKoLhP50vx4vGNlF4msF64dSFq1P8RfB+QAuJWGHPXXPc8QyfVWwwB/TNNU4+ayZmHNbZw==}
+  '@babel/generator@7.26.2':
+    resolution: {integrity: sha512-zevQbhbau95nkoxSq3f/DC/SC+EEOUZd3DYqfSkMhY2/wfSeaHV1Ew4vk8e+x8lja31IbyuUa2uQ3JONqKbysw==}
     engines: {node: '>=6.9.0'}
 
-  '@babel/helper-annotate-as-pure@7.24.7':
-    resolution: {integrity: sha512-BaDeOonYvhdKw+JoMVkAixAAJzG2jVPIwWoKBPdYuY9b452e2rPuI9QPYh3KpofZ3pW2akOmwZLOiOsHMiqRAg==}
+  '@babel/helper-annotate-as-pure@7.25.9':
+    resolution: {integrity: sha512-gv7320KBUFJz1RnylIg5WWYPRXKZ884AGkYpgpWW02TH66Dl+HaC1t1CKd0z3R4b6hdYEcmrNZHUmfCP+1u3/g==}
     engines: {node: '>=6.9.0'}
 
-  '@babel/helper-compilation-targets@7.25.2':
-    resolution: {integrity: sha512-U2U5LsSaZ7TAt3cfaymQ8WHh0pxvdHoEk6HVpaexxixjyEquMh0L0YNJNM6CTGKMXV1iksi0iZkGw4AcFkPaaw==}
+  '@babel/helper-compilation-targets@7.25.9':
+    resolution: {integrity: sha512-j9Db8Suy6yV/VHa4qzrj9yZfZxhLWQdVnRlXxmKLYlhWUVB1sB2G5sxuWYXk/whHD9iW76PmNzxZ4UCnTQTVEQ==}
     engines: {node: '>=6.9.0'}
 
-  '@babel/helper-module-imports@7.24.7':
-    resolution: {integrity: sha512-8AyH3C+74cgCVVXow/myrynrAGv+nTVg5vKu2nZph9x7RcRwzmh0VFallJuFTZ9mx6u4eSdXZfcOzSqTUm0HCA==}
+  '@babel/helper-module-imports@7.25.9':
+    resolution: {integrity: sha512-tnUA4RsrmflIM6W6RFTLFSXITtl0wKjgpnLgXyowocVPrbYrLUXSBXDgTs8BlbmIzIdlBySRQjINYs2BAkiLtw==}
     engines: {node: '>=6.9.0'}
 
-  '@babel/helper-module-transforms@7.25.2':
-    resolution: {integrity: sha512-BjyRAbix6j/wv83ftcVJmBt72QtHI56C7JXZoG2xATiLpmoC7dpd8WnkikExHDVPpi/3qCmO6WY1EaXOluiecQ==}
+  '@babel/helper-module-transforms@7.26.0':
+    resolution: {integrity: sha512-xO+xu6B5K2czEnQye6BHA7DolFFmS3LB7stHZFaOLb1pAwO1HWLS8fXA+eh0A2yIvltPVmx3eNNDBJA2SLHXFw==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0
 
-  '@babel/helper-plugin-utils@7.24.8':
-    resolution: {integrity: sha512-FFWx5142D8h2Mgr/iPVGH5G7w6jDn4jUSpZTyDnQO0Yn7Ks2Kuz6Pci8H6MPCoUJegd/UZQ3tAvfLCxQSnWWwg==}
+  '@babel/helper-plugin-utils@7.25.9':
+    resolution: {integrity: sha512-kSMlyUVdWe25rEsRGviIgOWnoT/nfABVWlqt9N19/dIPWViAOW2s9wznP5tURbs/IDuNk4gPy3YdYRgH3uxhBw==}
     engines: {node: '>=6.9.0'}
 
-  '@babel/helper-simple-access@7.24.7':
-    resolution: {integrity: sha512-zBAIvbCMh5Ts+b86r/CjU+4XGYIs+R1j951gxI3KmmxBMhCg4oQMsv6ZXQ64XOm/cvzfU1FmoCyt6+owc5QMYg==}
+  '@babel/helper-string-parser@7.25.9':
+    resolution: {integrity: sha512-4A/SCr/2KLd5jrtOMFzaKjVtAei3+2r/NChoBNoZ3EyP/+GlhoaEGoWOZUmFmoITP7zOJyHIMm+DYRd8o3PvHA==}
     engines: {node: '>=6.9.0'}
 
-  '@babel/helper-string-parser@7.24.8':
-    resolution: {integrity: sha512-pO9KhhRcuUyGnJWwyEgnRJTSIZHiT+vMD0kPeD+so0l7mxkMT19g3pjY9GTnHySck/hDzq+dtW/4VgnMkippsQ==}
+  '@babel/helper-validator-identifier@7.25.9':
+    resolution: {integrity: sha512-Ed61U6XJc3CVRfkERJWDz4dJwKe7iLmmJsbOGu9wSloNSFttHV0I8g6UAgb7qnK5ly5bGLPd4oXZlxCdANBOWQ==}
     engines: {node: '>=6.9.0'}
 
-  '@babel/helper-validator-identifier@7.24.7':
-    resolution: {integrity: sha512-rR+PBcQ1SMQDDyF6X0wxtG8QyLCgUB0eRAGguqRLfkCA87l7yAP7ehq8SNj96OOGTO8OBV70KhuFYcIkHXOg0w==}
+  '@babel/helper-validator-option@7.25.9':
+    resolution: {integrity: sha512-e/zv1co8pp55dNdEcCynfj9X7nyUKUXoUEwfXqaZt0omVOmDe9oOTdKStH4GmAw6zxMFs50ZayuMfHDKlO7Tfw==}
     engines: {node: '>=6.9.0'}
 
-  '@babel/helper-validator-option@7.24.8':
-    resolution: {integrity: sha512-xb8t9tD1MHLungh/AIoWYN+gVHaB9kwlu8gffXGSt3FFEIT7RjS+xWbc2vUD1UTZdIpKj/ab3rdqJ7ufngyi2Q==}
-    engines: {node: '>=6.9.0'}
-
-  '@babel/helpers@7.25.6':
-    resolution: {integrity: sha512-Xg0tn4HcfTijTwfDwYlvVCl43V6h4KyVVX2aEm4qdO/PC6L2YvzLHFdmxhoeSA3eslcE6+ZVXHgWwopXYLNq4Q==}
-    engines: {node: '>=6.9.0'}
-
-  '@babel/highlight@7.24.7':
-    resolution: {integrity: sha512-EStJpq4OuY8xYfhGVXngigBJRWxftKX9ksiGDnmlY3o7B/V7KIAc9X4oiK87uPJSc/vs5L869bem5fhZa8caZw==}
+  '@babel/helpers@7.26.0':
+    resolution: {integrity: sha512-tbhNuIxNcVb21pInl3ZSjksLCvgdZy9KwJ8brv993QtIVKJBBkYXz4q4ZbAv31GdnC+R90np23L5FbEBlthAEw==}
     engines: {node: '>=6.9.0'}
 
   '@babel/parser@7.25.6':
@@ -160,28 +149,33 @@ packages:
     engines: {node: '>=6.0.0'}
     hasBin: true
 
-  '@babel/plugin-syntax-jsx@7.24.7':
-    resolution: {integrity: sha512-6ddciUPe/mpMnOKv/U+RSd2vvVy+Yw/JfBB0ZHYjEZt9NLHmCUylNYlsbqCCS1Bffjlb0fCwC9Vqz+sBz6PsiQ==}
+  '@babel/parser@7.26.2':
+    resolution: {integrity: sha512-DWMCZH9WA4Maitz2q21SRKHo9QXZxkDsbNZoVD62gusNtNBBqDg9i7uOhASfTfIGNzW+O+r7+jAlM8dwphcJKQ==}
+    engines: {node: '>=6.0.0'}
+    hasBin: true
+
+  '@babel/plugin-syntax-jsx@7.25.9':
+    resolution: {integrity: sha512-ld6oezHQMZsZfp6pWtbjaNDF2tiiCYYDqQszHt5VV437lewP9aSi2Of99CK0D0XB21k7FLgnLcmQKyKzynfeAA==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
-  '@babel/plugin-transform-react-jsx@7.25.2':
-    resolution: {integrity: sha512-KQsqEAVBpU82NM/B/N9j9WOdphom1SZH3R+2V7INrQUH+V9EBFwZsEJl8eBIVeQE62FxJCc70jzEZwqU7RcVqA==}
+  '@babel/plugin-transform-react-jsx@7.25.9':
+    resolution: {integrity: sha512-s5XwpQYCqGerXl+Pu6VDL3x0j2d82eiV77UJ8a2mDHAW7j9SWRqQ2y1fNo1Z74CdcYipl5Z41zvjj4Nfzq36rw==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
-  '@babel/template@7.25.0':
-    resolution: {integrity: sha512-aOOgh1/5XzKvg1jvVz7AVrx2piJ2XBi227DHmbY6y+bM9H2FlN+IfecYu4Xl0cNiiVejlsCri89LUsbj8vJD9Q==}
+  '@babel/template@7.25.9':
+    resolution: {integrity: sha512-9DGttpmPvIxBb/2uwpVo3dqJ+O6RooAFOS+lB+xDqoE2PVCE8nfoHMdZLpfCQRLwvohzXISPZcgxt80xLfsuwg==}
     engines: {node: '>=6.9.0'}
 
-  '@babel/traverse@7.25.6':
-    resolution: {integrity: sha512-9Vrcx5ZW6UwK5tvqsj0nGpp/XzqthkT0dqIc9g1AdtygFToNtTF67XzYS//dm+SAK9cp3B9R4ZO/46p63SCjlQ==}
+  '@babel/traverse@7.25.9':
+    resolution: {integrity: sha512-ZCuvfwOwlz/bawvAuvcj8rrithP2/N55Tzz342AkTvq4qaWbGfmCk/tKhNaV2cthijKrPAA8SRJV5WWe7IBMJw==}
     engines: {node: '>=6.9.0'}
 
-  '@babel/types@7.25.6':
-    resolution: {integrity: sha512-/l42B1qxpG6RdfYf343Uw1vmDjeNhneUXtzhojE7pDgfpEypmRhI6j1kr17XCVv4Cgl9HdAiQY2x0GwKm7rWCw==}
+  '@babel/types@7.26.0':
+    resolution: {integrity: sha512-Z/yiTPj+lDVnF7lWeKCIJzaIkI0vYO87dMpZ4bg4TDrFe4XXLFWL1TbXU27gBP3QccxV9mZICCrnjnYlJjXHOA==}
     engines: {node: '>=6.9.0'}
 
   '@emmetio/abbreviation@2.3.3':
@@ -478,8 +472,8 @@ packages:
   '@jridgewell/trace-mapping@0.3.25':
     resolution: {integrity: sha512-vNk6aEwybGtawWmy/PzwnGDOjCkLWSD2wqvjGGAgOAwCGWySYXfYoxt00IJkTF+8Lb57DwOb3Aa0o9CApepiYQ==}
 
-  '@mdx-js/mdx@3.0.1':
-    resolution: {integrity: sha512-eIQ4QTrOWyL3LWEe/bu6Taqzq2HQvHcyTMaOrI95P2/LmJE7AsfPfgJGuFLPVqBUE1BC1rik3VIhU+s9u72arA==}
+  '@mdx-js/mdx@3.1.0':
+    resolution: {integrity: sha512-/QxEhPAvGwbQmy1Px8F899L5Uc2KZ6JtXwlCgJmjSTBedwOZkByYcBG4GceIGPXRDsmfxhHazuS+hlOShRLeDw==}
 
   '@nodelib/fs.scandir@2.1.5':
     resolution: {integrity: sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==}
@@ -493,11 +487,11 @@ packages:
     resolution: {integrity: sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==}
     engines: {node: '>= 8'}
 
-  '@oslojs/encoding@0.4.1':
-    resolution: {integrity: sha512-hkjo6MuIK/kQR5CrGNdAPZhS01ZCXuWDRJ187zh6qqF2+yMHZpD9fAYpX8q2bOO6Ryhl3XpCT6kUX76N8hhm4Q==}
+  '@oslojs/encoding@1.1.0':
+    resolution: {integrity: sha512-70wQhgYmndg4GCPxPPxPGevRKqTIJ2Nh4OkiMWmDAVYsTQ+Ta7Sq+rPevXyXGdzr30/qZBnyOalCszoMxlyldQ==}
 
-  '@rollup/pluginutils@5.1.0':
-    resolution: {integrity: sha512-XTIWOPPcpvyKI6L1NHo0lFlCyznUEyPmPY1mc3KpPVDYulHSTvyeLNVW00QTLIAFNhR3kYnJTQHeGqU4M3n09g==}
+  '@rollup/pluginutils@5.1.3':
+    resolution: {integrity: sha512-Pnsb6f32CD2W3uCaLZIzDmeFyQ2b8UWMFI7xtwUezpcGBDVDW6y9XgAWIlARiGAo6eNF5FK5aQTr0LFyNyqq5A==}
     engines: {node: '>=14.0.0'}
     peerDependencies:
       rollup: ^1.20.0||^2.0.0||^3.0.0||^4.0.0
@@ -585,32 +579,29 @@ packages:
     cpu: [x64]
     os: [win32]
 
-  '@shikijs/core@1.17.7':
-    resolution: {integrity: sha512-ZnIDxFu/yvje3Q8owSHaEHd+bu/jdWhHAaJ17ggjXofHx5rc4bhpCSW+OjC6smUBi5s5dd023jWtZ1gzMu/yrw==}
-
   '@shikijs/core@1.22.0':
     resolution: {integrity: sha512-S8sMe4q71TJAW+qG93s5VaiihujRK6rqDFqBnxqvga/3LvqHEnxqBIOPkt//IdXVtHkQWKu4nOQNk0uBGicU7Q==}
 
-  '@shikijs/engine-javascript@1.17.7':
-    resolution: {integrity: sha512-wwSf7lKPsm+hiYQdX+1WfOXujtnUG6fnN4rCmExxa4vo+OTmvZ9B1eKauilvol/LHUPrQgW12G3gzem7pY5ckw==}
+  '@shikijs/core@1.23.1':
+    resolution: {integrity: sha512-NuOVgwcHgVC6jBVH5V7iblziw6iQbWWHrj5IlZI3Fqu2yx9awH7OIQkXIcsHsUmY19ckwSgUMgrqExEyP5A0TA==}
 
   '@shikijs/engine-javascript@1.22.0':
     resolution: {integrity: sha512-AeEtF4Gcck2dwBqCFUKYfsCq0s+eEbCEbkUuFou53NZ0sTGnJnJ/05KHQFZxpii5HMXbocV9URYVowOP2wH5kw==}
 
-  '@shikijs/engine-oniguruma@1.17.7':
-    resolution: {integrity: sha512-pvSYGnVeEIconU28NEzBXqSQC/GILbuNbAHwMoSfdTBrobKAsV1vq2K4cAgiaW1TJceLV9QMGGh18hi7cCzbVQ==}
+  '@shikijs/engine-javascript@1.23.1':
+    resolution: {integrity: sha512-i/LdEwT5k3FVu07SiApRFwRcSJs5QM9+tod5vYCPig1Ywi8GR30zcujbxGQFJHwYD7A5BUqagi8o5KS+LEVgBg==}
 
   '@shikijs/engine-oniguruma@1.22.0':
     resolution: {integrity: sha512-5iBVjhu/DYs1HB0BKsRRFipRrD7rqjxlWTj4F2Pf+nQSPqc3kcyqFFeZXnBMzDf0HdqaFVvhDRAGiYNvyLP+Mw==}
 
-  '@shikijs/types@1.17.7':
-    resolution: {integrity: sha512-+qA4UyhWLH2q4EFd+0z4K7GpERDU+c+CN2XYD3sC+zjvAr5iuwD1nToXZMt1YODshjkEGEDV86G7j66bKjqDdg==}
+  '@shikijs/engine-oniguruma@1.23.1':
+    resolution: {integrity: sha512-KQ+lgeJJ5m2ISbUZudLR1qHeH3MnSs2mjFg7bnencgs5jDVPeJ2NVDJ3N5ZHbcTsOIh0qIueyAJnwg7lg7kwXQ==}
 
   '@shikijs/types@1.22.0':
     resolution: {integrity: sha512-Fw/Nr7FGFhlQqHfxzZY8Cwtwk5E9nKDUgeLjZgt3UuhcM3yJR9xj3ZGNravZZok8XmEZMiYkSMTPlPkULB8nww==}
 
-  '@shikijs/vscode-textmate@9.2.2':
-    resolution: {integrity: sha512-TMp15K+GGYrWlZM8+Lnj9EaHEFmOen0WJBrfa17hF7taDOYthuPPV0GWzfd/9iMij0akS/8Yw2ikquH7uVi/fg==}
+  '@shikijs/types@1.23.1':
+    resolution: {integrity: sha512-98A5hGyEhzzAgQh2dAeHKrWW4HfCMeoFER2z16p5eJ+vmPeF6lZ/elEne6/UCU551F/WqkopqRsr1l2Yu6+A0g==}
 
   '@shikijs/vscode-textmate@9.3.0':
     resolution: {integrity: sha512-jn7/7ky30idSkd/O5yDBfAnVt+JJpepofP/POZ1iMOxK59cOfqIgg/Dj0eFsjOTMw+4ycJN0uhZH/Eb0bs/EUA==}
@@ -682,25 +673,25 @@ packages:
   '@ungap/structured-clone@1.2.0':
     resolution: {integrity: sha512-zuVdFrMJiuCDQUMCzQaD6KL28MjnqqN8XnAqiEq9PNm/hCPTSGfrXCOfwj1ow4LFb/tNymJPwsNbVePc1xFqrQ==}
 
-  '@volar/kit@2.4.5':
-    resolution: {integrity: sha512-ZzyErW5UiDfiIuJ/lpqc2Kx5PHDGDZ/bPlPJYpRcxlrn8Z8aDhRlsLHkNKcNiH65TmNahk2kbLaiejiqu6BD3A==}
+  '@volar/kit@2.4.10':
+    resolution: {integrity: sha512-ul+rLeO9RlFDgkY/FhPWMnpFqAsjvjkKz8VZeOY5YCJMwTblmmSBlNJtFNxSBx9t/k1q80nEthLyxiJ50ZbIAg==}
     peerDependencies:
       typescript: '*'
 
-  '@volar/language-core@2.4.5':
-    resolution: {integrity: sha512-F4tA0DCO5Q1F5mScHmca0umsi2ufKULAnMOVBfMsZdT4myhVl4WdKRwCaKcfOkIEuyrAVvtq1ESBdZ+rSyLVww==}
+  '@volar/language-core@2.4.10':
+    resolution: {integrity: sha512-hG3Z13+nJmGaT+fnQzAkS0hjJRa2FCeqZt6Bd+oGNhUkQ+mTFsDETg5rqUTxyzIh5pSOGY7FHCWUS8G82AzLCA==}
 
-  '@volar/language-server@2.4.5':
-    resolution: {integrity: sha512-l5PswE0JzCtstTlwBUpikeSa3lNUBJhTuWtj9KclZTGi2Uex4RcqGOhTiDsUUtvdv/hEuYCxGq1EdJJPlQsD/g==}
+  '@volar/language-server@2.4.10':
+    resolution: {integrity: sha512-odQsgrJh8hOXfxkSj/BSnpjThb2/KDhbxZnG/XAEx6E3QGDQv4hAOz9GWuKoNs0tkjgwphQGIwDMT1JYaTgRJw==}
 
-  '@volar/language-service@2.4.5':
-    resolution: {integrity: sha512-xiFlL0aViGg6JhwAXyohPrdlID13uom8WQg6DWYaV8ob8RRy+zoLlBUI8SpQctwlWEO9poyrYK01revijAwkcw==}
+  '@volar/language-service@2.4.10':
+    resolution: {integrity: sha512-VxUiWS11rnRzakkqw5x1LPhsz+RBfD0CrrFarLGW2/voliYXEdCuSOM3r8JyNRvMvP4uwhD38ccAdTcULQEAIQ==}
 
-  '@volar/source-map@2.4.5':
-    resolution: {integrity: sha512-varwD7RaKE2J/Z+Zu6j3mNNJbNT394qIxXwdvz/4ao/vxOfyClZpSDtLKkwWmecinkOVos5+PWkWraelfMLfpw==}
+  '@volar/source-map@2.4.10':
+    resolution: {integrity: sha512-OCV+b5ihV0RF3A7vEvNyHPi4G4kFa6ukPmyVocmqm5QzOd8r5yAtiNvaPEjl8dNvgC/lj4JPryeeHLdXd62rWA==}
 
-  '@volar/typescript@2.4.5':
-    resolution: {integrity: sha512-mcT1mHvLljAEtHviVcBuOyAwwMKz1ibXTi5uYtP/pf4XxoAzpdkQ+Br2IC0NPCvLCbjPZmbf3I0udndkfB1CDg==}
+  '@volar/typescript@2.4.10':
+    resolution: {integrity: sha512-F8ZtBMhSXyYKuBfGpYwqA5rsONnOwAVvjyE7KPYJ7wgZqo2roASqNWUnianOomJX5u1cxeRooHV59N0PhvEOgw==}
 
   '@vscode/emmet-helper@2.9.3':
     resolution: {integrity: sha512-rB39LHWWPQYYlYfpv9qCoZOVioPCftKXXqrsyqN1mTWZM6dTnONT63Db+03vgrBbHzJN45IrgS/AGxw9iiqfEw==}
@@ -718,6 +709,11 @@ packages:
     engines: {node: '>=0.4.0'}
     hasBin: true
 
+  acorn@8.14.0:
+    resolution: {integrity: sha512-cl669nCJTZBsL97OF4kUQm5g5hC2uihk0NxY3WENAC0TYdILVkAyHymAntgxGkl7K+t0cXIrH5siy5S4XkFycA==}
+    engines: {node: '>=0.4.0'}
+    hasBin: true
+
   ajv@8.17.1:
     resolution: {integrity: sha512-B/gBuNg5SiMTrPkC+A2+cW0RszwxYmn6VYxB/inlBStS5nx6xHIt/ehKRhIMhqusl7a8LjQoZnjCs5vhwxOQ1g==}
 
@@ -732,10 +728,6 @@ packages:
     resolution: {integrity: sha512-7HSX4QQb4CspciLpVFwyRe79O3xsIZDDLER21kERQ71oaPodF8jL725AgJMFAYbooIqolJoRLuM81SpeUkpkvA==}
     engines: {node: '>=12'}
 
-  ansi-styles@3.2.1:
-    resolution: {integrity: sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==}
-    engines: {node: '>=4'}
-
   ansi-styles@4.3.0:
     resolution: {integrity: sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==}
     engines: {node: '>=8'}
@@ -754,8 +746,8 @@ packages:
   argparse@2.0.1:
     resolution: {integrity: sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==}
 
-  aria-query@5.3.1:
-    resolution: {integrity: sha512-Z/ZeOgVl7bcSYZ/u/rh0fOpvEpq//LZmdbkXyc7syVzjPAhfOa9ebsdTSjEBDU4vs5nC98Kfduj1uFo0qyET3g==}
+  aria-query@5.3.2:
+    resolution: {integrity: sha512-COROpnaoap1E2F000S62r6A60uHZnmlvomhfyT2DlTcrY1OrBKn2UhH7qn5wTC9zMvD0AY7csdPSNwKP+7WiQw==}
     engines: {node: '>= 0.4'}
 
   array-iterate@2.0.1:
@@ -768,8 +760,8 @@ packages:
   astro-icon@1.1.1:
     resolution: {integrity: sha512-HKBesWk2Faw/0+klLX+epQVqdTfSzZz/9+5vxXUjTJaN/HnpDf608gRPgHh7ZtwBPNJMEFoU5GLegxoDcT56OQ==}
 
-  astro@4.15.6:
-    resolution: {integrity: sha512-SWcUNwm8CiVRaIbh4w5byh62BNihpsovlCd4ElvC7cL/53D24HcI7AaGFsPrromCamQklwQmIan/QS7x/3lLuQ==}
+  astro@4.16.13:
+    resolution: {integrity: sha512-Mtd76+BC0zLWqoXpf9xc731AhdH4MNh5JFHYdLRvSH0Nqn48hA64dPGh/cWsJvh/DZFmC0NTZusM1Qq2gyNaVg==}
     engines: {node: ^18.17.1 || ^20.3.0 || >=21.0.0, npm: '>=9.6.5', pnpm: '>=7.1.0'}
     hasBin: true
 
@@ -796,36 +788,32 @@ packages:
   boolbase@1.0.0:
     resolution: {integrity: sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==}
 
-  boxen@7.1.1:
-    resolution: {integrity: sha512-2hCgjEmP8YLWQ130n2FerGv7rYpfBmnmp9Uy2Le1vge6X3gZIfSmEzP5QTDElFxcvVcXlEn8Aq6MU/PZygIOog==}
-    engines: {node: '>=14.16'}
+  boxen@8.0.1:
+    resolution: {integrity: sha512-F3PH5k5juxom4xktynS7MoFY+NUWH5LC4CnH11YB8NPew+HLpmBLCybSAEyb2F+4pRXhuhWqFesoQd6DAyc2hw==}
+    engines: {node: '>=18'}
 
   braces@3.0.3:
     resolution: {integrity: sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==}
     engines: {node: '>=8'}
 
-  browserslist@4.23.3:
-    resolution: {integrity: sha512-btwCFJVjI4YWDNfau8RhZ+B1Q/VLoUITrm3RlP6y1tYGWIOa+InuYiRGXUBXo8nA1qKmHMyLB/iVQg5TT4eFoA==}
+  browserslist@4.24.2:
+    resolution: {integrity: sha512-ZIc+Q62revdMcqC6aChtW4jz3My3klmCO1fEmINZY/8J3EpBg5/A/D0AKmBveUh6pgoeycoMkVMko84tuYS+Gg==}
     engines: {node: ^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7}
     hasBin: true
 
   buffer-crc32@0.2.13:
     resolution: {integrity: sha512-VO9Ht/+p3SN7SKWqcrgEzjGbRSJYTx+Q1pTQC0wrWqHx0vpJraQ6GtHx8tvcg1rlK1byhU5gccxgOgj7B0TDkQ==}
 
-  camelcase@7.0.1:
-    resolution: {integrity: sha512-xlx1yCK2Oc1APsPXDL2LdlNP6+uu8OCDdhOBSVT279M/S+y75O30C2VuD8T2ogdePBBl7PfPF4504tnLgX3zfw==}
-    engines: {node: '>=14.16'}
+  camelcase@8.0.0:
+    resolution: {integrity: sha512-8WB3Jcas3swSvjIeA2yvCJ+Miyz5l1ZmB6HFb9R1317dt9LCQoswg/BGrmAmkWVEszSrrg4RwmO46qIm2OEnSA==}
+    engines: {node: '>=16'}
 
-  caniuse-lite@1.0.30001660:
-    resolution: {integrity: sha512-GacvNTTuATm26qC74pt+ad1fW15mlQ/zuTzzY1ZoIzECTP8HURDfF43kNxPgf7H1jmelCBQTTbBNxdSXOA7Bqg==}
+  caniuse-lite@1.0.30001680:
+    resolution: {integrity: sha512-rPQy70G6AGUMnbwS1z6Xg+RkHYPAi18ihs47GH0jcxIG7wArmPgY3XbS2sRdBbxJljp3thdT8BIqv9ccCypiPA==}
 
   ccount@2.0.1:
     resolution: {integrity: sha512-eyrF0jiFpY+3drT6383f1qhkbGsLSifNAjA61IUjZjmLCWjItY6LB9ft9YhoDgwfmclB2zhu51Lc7+95b8NRAg==}
 
-  chalk@2.4.2:
-    resolution: {integrity: sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==}
-    engines: {node: '>=4'}
-
   chalk@5.3.0:
     resolution: {integrity: sha512-dLitG79d+GV1Nb/VYcCDFivJeK1hiukt9QjRNVOsUtTy1rR1YJsmpGGTZ3qJos+uw7WmWF4wUwBd9jxjocFC2w==}
     engines: {node: ^12.17.0 || ^14.13 || >=16.0.0}
@@ -853,6 +841,10 @@ packages:
     resolution: {integrity: sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==}
     engines: {node: '>= 8.10.0'}
 
+  chokidar@4.0.1:
+    resolution: {integrity: sha512-n8enUVCED/KVRQlab1hr3MVpcVMvxtZjmEa956u+4YijlmQED223XMSYj2tLuKvr4jcCTzNNMpQDUer72MMmzA==}
+    engines: {node: '>= 14.16.0'}
+
   chownr@2.0.0:
     resolution: {integrity: sha512-bIomtDF5KGpdogkLd9VspvFzk9KfpyyGlS8YFVZl7TGPBHL5snIOnxeshwVgPteQ9b4Eydl+pVbIyE1DcvCWgQ==}
     engines: {node: '>=10'}
@@ -884,16 +876,10 @@ packages:
   collapse-white-space@2.1.0:
     resolution: {integrity: sha512-loKTxY1zCOuG4j9f6EPnuyyYkf58RnhhWTvRoZEokgB+WbdXehfjFviyOVYkqzEWz1Q5kRiZdBYS5SwxbQYwzw==}
 
-  color-convert@1.9.3:
-    resolution: {integrity: sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==}
-
   color-convert@2.0.1:
     resolution: {integrity: sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==}
     engines: {node: '>=7.0.0'}
 
-  color-name@1.1.3:
-    resolution: {integrity: sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==}
-
   color-name@1.1.4:
     resolution: {integrity: sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==}
 
@@ -924,8 +910,8 @@ packages:
   convert-source-map@2.0.0:
     resolution: {integrity: sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==}
 
-  cookie@0.6.0:
-    resolution: {integrity: sha512-U71cyTamuh1CRNCfpGY6to28lxvNwPG4Guz/EVjgf3Jmzv0vlDp1atT9eS5dDjMYHucpHbWns6Lwf3BKz6svdw==}
+  cookie@0.7.2:
+    resolution: {integrity: sha512-yki5XnKuf750l50uGTllt6kKILY4nQ1eNIQatoXEByZ5dWgnKqbnqmTrBE5B4N7lrMJKQ2ytWMiTO2o0v6Ew/w==}
     engines: {node: '>= 0.6'}
 
   css-select@5.1.0:
@@ -980,8 +966,8 @@ packages:
     resolution: {integrity: sha512-KxektNH63SrbfUyDiwXqRb1rLwKt33AmMv+5Nhsw1kqZ13SJBRTgZHtGbE+hH3a1mVW1cz+4pqSWVPAtLVXTzQ==}
     engines: {node: '>=18'}
 
-  devalue@5.0.0:
-    resolution: {integrity: sha512-gO+/OMXF7488D+u3ue+G7Y4AA3ZmUnB3eHJXmBTgNHvr4ZNzl36A0ZtG+XCRNYCkYx/bFmw4qtkoFLa+wSrwAA==}
+  devalue@5.1.1:
+    resolution: {integrity: sha512-maua5KUiapvEwiEAe+XnlZ3Rh0GD+qI1J/nb9vrJc3muPXvcF/8gXYTWF76+5DAqHyDUtOIImEuo0YKE9mshVw==}
 
   devlop@1.1.0:
     resolution: {integrity: sha512-RWmIqhcFf1lRYBvNmr7qTNuyCt/7/ns2jbpp1+PalgE/rDQcBT0fioSMUpJ93irlUhC5hrg4cYqe6U+0ImW0rA==}
@@ -1010,24 +996,21 @@ packages:
     resolution: {integrity: sha512-2QF/g9/zTaPDc3BjNcVTGoBbXBgYfMTTceLaYcFJ/W9kggFUkhxD/hMEeuLKbugyef9SqAx8cpgwlIP/jinUTA==}
     engines: {node: '>=4'}
 
-  eastasianwidth@0.2.0:
-    resolution: {integrity: sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==}
-
-  electron-to-chromium@1.5.24:
-    resolution: {integrity: sha512-0x0wLCmpdKFCi9ulhvYZebgcPmHTkFVUfU2wzDykadkslKwT4oAmDTHEKLnlrDsMGZe4B+ksn8quZfZjYsBetA==}
+  electron-to-chromium@1.5.63:
+    resolution: {integrity: sha512-ddeXKuY9BHo/mw145axlyWjlJ1UBt4WK3AlvkT7W2AbqfRQoacVoRUCF6wL3uIx/8wT9oLKXzI+rFqHHscByaA==}
 
   emmet@2.4.7:
     resolution: {integrity: sha512-O5O5QNqtdlnQM2bmKHtJgyChcrFMgQuulI+WdiOw2NArzprUqqxUW6bgYtKvzKgrsYpuLWalOkdhNP+1jluhCA==}
 
+  emoji-regex-xs@1.0.0:
+    resolution: {integrity: sha512-LRlerrMYoIDrT6jgpeZ2YYl/L8EulRTt5hQcYjy5AInh7HWXKimpqx68aknBFpGL2+/IcogTcaydJEgaTmOpDg==}
+
   emoji-regex@10.4.0:
     resolution: {integrity: sha512-EC+0oUMY1Rqm4O6LLrgjtYDvcVYTy7chDnM4Q7030tP4Kwj3u/pR6gP9ygnp2CJMK5Gq+9Q2oqmrFJAz01DXjw==}
 
   emoji-regex@8.0.0:
     resolution: {integrity: sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==}
 
-  emoji-regex@9.2.2:
-    resolution: {integrity: sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==}
-
   encoding-sniffer@0.2.0:
     resolution: {integrity: sha512-ju7Wq1kg04I3HtiYIOrUrdfdDvkyO9s5XM8QAj/bN61Yo/Vb4vgJxy5vi4Yxk01gWHbrofpPtpxM8bKger9jhg==}
 
@@ -1041,6 +1024,12 @@ packages:
   es-module-lexer@1.5.4:
     resolution: {integrity: sha512-MVNK56NiMrOwitFB7cqDwq0CQutbw+0BvLshJSse0MUNU+y1FC3bUS/AQg7oUng+/wKrrki7JfmwtVHkVfPLlw==}
 
+  esast-util-from-estree@2.0.0:
+    resolution: {integrity: sha512-4CyanoAudUSBAn5K13H4JhsMH6L9ZP7XbLVe/dKybkxMO7eDyLsT8UHl9TRNrU2Gr9nz+FovfSIjuXWJ81uVwQ==}
+
+  esast-util-from-js@2.0.1:
+    resolution: {integrity: sha512-8Ja+rNJ0Lt56Pcf3TAmpBZjmx8ZcK5Ts4cAzIOjsjevg9oSXJnl6SUQ2EevU8tv3h6ZLWmoKL5H4fgWvdvfETw==}
+
   esbuild@0.21.5:
     resolution: {integrity: sha512-mg3OPMV4hXywwpoDxu3Qda5xCKQi+vCTZq8S9J/EpkhB2HzKXq4SNFZE3+NK93JYxc8VMSep+lOUSC/RVKaBqw==}
     engines: {node: '>=12'}
@@ -1050,10 +1039,6 @@ packages:
     resolution: {integrity: sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA==}
     engines: {node: '>=6'}
 
-  escape-string-regexp@1.0.5:
-    resolution: {integrity: sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==}
-    engines: {node: '>=0.8.0'}
-
   escape-string-regexp@5.0.0:
     resolution: {integrity: sha512-/veY75JbMK4j1yjvuUxuVsiS/hr/4iHs9FTT6cgTexxdE0Ly/glccBAkloH/DofkjRbZU3bnoj38mOmhkZ0lHw==}
     engines: {node: '>=12'}
@@ -1072,6 +1057,9 @@ packages:
   estree-util-is-identifier-name@3.0.0:
     resolution: {integrity: sha512-hFtqIDZTIUZ9BXLb8y4pYGyk6+wekIivNVTcmvk8NoOh+VeRn5y6cEHzbURrWbfp1fIqdVipilzj+lfaadNZmg==}
 
+  estree-util-scope@1.0.0:
+    resolution: {integrity: sha512-2CAASclonf+JFWBNJPndcOpA8EMJwa0Q8LUFJEKqXLW6+qBvbFZuF5gItbQOs/umBUkjviCSDCbBwU2cXbmrhQ==}
+
   estree-util-to-js@2.0.0:
     resolution: {integrity: sha512-WDF+xj5rRWmD5tj6bIqRi6CkLIXbbNQUcxQHzGysQzvHmdYG2G7p/Tf0J0gpxGgkeMZNTIjT/AoSvC9Xehcgdg==}
 
@@ -1190,10 +1178,6 @@ packages:
     resolution: {integrity: sha512-5v6yZd4JK3eMI3FqqCouswVqwugaA9r4dNZB1wwcmrD02QkV5H0y7XBQW8QwQqEaZY1pM9aqORSORhJRdNK44Q==}
     engines: {node: '>=6.0'}
 
-  has-flag@3.0.0:
-    resolution: {integrity: sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==}
-    engines: {node: '>=4'}
-
   hast-util-from-html@2.0.3:
     resolution: {integrity: sha512-CUSRHXyKjzHov8yKsQjGOElXy/3EKpyX56ELnkHH34vDVw1N1XSQ1ZcAvTyAPtGqLTuKP/uxM+aLkSPqF/EtMw==}
 
@@ -1315,9 +1299,6 @@ packages:
     resolution: {integrity: sha512-+Pgi+vMuUNkJyExiMBt5IlFoMyKnr5zhJ4Uspz58WOhBF5QoIZkFyNHIbBAtHwzVAgk5RtndVNsDRN61/mmDqg==}
     engines: {node: '>=12'}
 
-  is-reference@3.0.2:
-    resolution: {integrity: sha512-v3rht/LgVcsdZa3O2Nqs+NMowLOxeOm7Ay9+/ARQ2F+qEoANRcqrjAZKGN0v8ymUetZGgkp26LTnGT7H0Qo9Pg==}
-
   is-unicode-supported@1.3.0:
     resolution: {integrity: sha512-43r2mRvz+8JRIKnWJ+3j8JtjRKZ6GmjzfaE/qiBJnikNnYv/6bagRJ1kUhNk8R5EX/GkobD+r+sfxCPJsiKBLQ==}
     engines: {node: '>=12'}
@@ -1341,9 +1322,9 @@ packages:
     resolution: {integrity: sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==}
     hasBin: true
 
-  jsesc@2.5.2:
-    resolution: {integrity: sha512-OYu7XEzjkCQ3C5Ps3QIZsQfNpqoJyZZA99wd9aWd05NCtC5pWOkShK2mkL6HXQR6/Cy2lbNdPlZBpuQHXE63gA==}
-    engines: {node: '>=4'}
+  jsesc@3.0.2:
+    resolution: {integrity: sha512-xKqzzWXDttJuOcawBt4KnKHHIf5oQ/Cxax+0PWFG+DFDgHNAdi+TXECADI+RYiFUMmx8792xsMbbgXj4CwnP4g==}
+    engines: {node: '>=6'}
     hasBin: true
 
   json-schema-traverse@1.0.0:
@@ -1400,8 +1381,8 @@ packages:
   lru-cache@5.1.1:
     resolution: {integrity: sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==}
 
-  magic-string@0.30.11:
-    resolution: {integrity: sha512-+Wri9p0QHMy+545hKww7YAu5NyzF8iomPL/RQazugQ9+Ez4Ic3mERMd8ZTX5rfK944j+560ZJi8iAwgak1Ac7A==}
+  magic-string@0.30.13:
+    resolution: {integrity: sha512-8rYBO+MsWkgjDSOvLomYnzhdwEG51olQ4zL5KXnNJWV5MNmrb4rTZdrtkhxjnD/QyZUqR/Z/XDsUs/4ej2nx0g==}
 
   magicast@0.3.5:
     resolution: {integrity: sha512-L0WhttDl+2BOsybvEOLK7fW3UA0OQ0IQ2d6Zl2x/a6vVRs3bAY0ECOSHHeL5jD+SbOpOCUEi0y1DgHEn9Qn1AQ==}
@@ -1658,11 +1639,14 @@ packages:
     resolution: {integrity: sha512-VXJjc87FScF88uafS3JllDgvAm+c/Slfz06lorj2uAY34rlUu0Nt+v8wreiImcrgAjjIHp1rXpTDlLOGw29WwQ==}
     engines: {node: '>=18'}
 
+  oniguruma-to-es@0.4.1:
+    resolution: {integrity: sha512-rNcEohFz095QKGRovP/yqPIKc+nP+Sjs4YTHMv33nMePGKrq/r2eu9Yh4646M5XluGJsUnmwoXuiXE69KDs+fQ==}
+
   oniguruma-to-js@0.4.3:
     resolution: {integrity: sha512-X0jWUcAlxORhOqqBREgPMgnshB7ZGYszBNspP+tS9hPD3l13CdaXcHbgImoHUHlrvGx/7AvFEkTRhAGYh+jzjQ==}
 
-  ora@8.1.0:
-    resolution: {integrity: sha512-GQEkNkH/GHOhPFXcqZs3IDahXEQcQxsSjEkK4KvEEST4t7eNzoMjxTzef+EZ+JluDEV+Raoi3WQ2CflnRdSVnQ==}
+  ora@8.1.1:
+    resolution: {integrity: sha512-YWielGi1XzG1UTvOaCFaNgEnuhZVMSHYkW/FQ7UX8O26PtlpdM84c0f7wLPlkvx2RfiQmnzd61d/MGxmpQeJPw==}
     engines: {node: '>=18'}
 
   p-limit@2.3.0:
@@ -1714,18 +1698,12 @@ packages:
     resolution: {integrity: sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==}
     engines: {node: '>=8'}
 
-  path-to-regexp@6.2.2:
-    resolution: {integrity: sha512-GQX3SSMokngb36+whdpRXE+3f9V8UzyAorlYvOGx87ufGHehNTn5lCxrKtLyZ4Yl/wEKnNnr98ZzOwwDZV5ogw==}
-
   pathe@1.1.2:
     resolution: {integrity: sha512-whLdWMYL2TwI08hn8/ZqAbrVemu0LNaNNJZX73O6qaIdCTfXutsLhMkjdENX0qhsQ9uIimo4/aQOmXkoon2nDQ==}
 
   pend@1.2.0:
     resolution: {integrity: sha512-F3asv42UuXchdzt+xXqfW1OGlVBe+mxa2mqI0pg5yAHZPvFmY3Y6drSf/GQ1A86WgWEN9Kzh/WrgKa6iGcHXLg==}
 
-  periscopic@3.1.0:
-    resolution: {integrity: sha512-vKiQ8RRtkl9P+r/+oefh25C3fhybptkHKCZSPlcXiJux2tJF55GnEj3BVn4A5gKfq9NWWXXrxkHBwVPUfH0opw==}
-
   picocolors@1.1.0:
     resolution: {integrity: sha512-TQ92mBOW0l3LeMeyLV6mzy/kWr8lkd/hp3mTg7wYK7zJhuBStmGMBG0BdeDZS/dZx1IukaX6Bk11zcln25o1Aw==}
 
@@ -1733,6 +1711,10 @@ packages:
     resolution: {integrity: sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==}
     engines: {node: '>=8.6'}
 
+  picomatch@4.0.2:
+    resolution: {integrity: sha512-M7BAV6Rlcy5u+m6oPhAPFgJTzAioX/6B0DxyvDlo9l8+T3nLKbrczg2WLUyzd45L8RqfUMyGPzekbMvX2Ldkwg==}
+    engines: {node: '>=12'}
+
   pify@4.0.1:
     resolution: {integrity: sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g==}
     engines: {node: '>=6'}
@@ -1781,23 +1763,48 @@ packages:
     resolution: {integrity: sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==}
     engines: {node: '>=8.10.0'}
 
+  readdirp@4.0.2:
+    resolution: {integrity: sha512-yDMz9g+VaZkqBYS/ozoBJwaBhTbZo3UNYQHNRw1D3UFQB8oHB4uS/tAODO+ZLjGWmUbKnIlOWO+aaIiAxrUWHA==}
+    engines: {node: '>= 14.16.0'}
+
+  recma-build-jsx@1.0.0:
+    resolution: {integrity: sha512-8GtdyqaBcDfva+GUKDr3nev3VpKAhup1+RvkMvUxURHpW7QyIvk9F5wz7Vzo06CEMSilw6uArgRqhpiUcWp8ew==}
+
+  recma-jsx@1.0.0:
+    resolution: {integrity: sha512-5vwkv65qWwYxg+Atz95acp8DMu1JDSqdGkA2Of1j6rCreyFUE/gp15fC8MnGEuG1W68UKjM6x6+YTWIh7hZM/Q==}
+
+  recma-parse@1.0.0:
+    resolution: {integrity: sha512-OYLsIGBB5Y5wjnSnQW6t3Xg7q3fQ7FWbw/vcXtORTnyaSFscOtABg+7Pnz6YZ6c27fG1/aN8CjfwoUEUIdwqWQ==}
+
+  recma-stringify@1.0.0:
+    resolution: {integrity: sha512-cjwII1MdIIVloKvC9ErQ+OgAtwHBmcZ0Bg4ciz78FtbT8In39aAYbaA7zvxQ61xVMSPE8WxhLwLbhif4Js2C+g==}
+
+  regex-recursion@4.2.1:
+    resolution: {integrity: sha512-QHNZyZAeKdndD1G3bKAbBEKOSSK4KOHQrAJ01N1LJeb0SoH4DJIeFhp0uUpETgONifS4+P3sOgoA1dhzgrQvhA==}
+
+  regex-utilities@2.3.0:
+    resolution: {integrity: sha512-8VhliFJAWRaUiVvREIiW2NXXTmHs4vMNnSzuJVhscgmGav3g9VDxLrQndI3dZZVVdp0ZO/5v0xmX516/7M9cng==}
+
   regex@4.3.2:
     resolution: {integrity: sha512-kK/AA3A9K6q2js89+VMymcboLOlF5lZRCYJv3gzszXFHBr6kO6qLGzbm+UIugBEV8SMMKCTR59txoY6ctRHYVw==}
 
+  regex@5.0.2:
+    resolution: {integrity: sha512-/pczGbKIQgfTMRV0XjABvc5RzLqQmwqxLHdQao2RTXPk+pmTXB2P0IaUHYdYyk412YLwUIkaeMd5T+RzVgTqnQ==}
+
   rehype-parse@9.0.0:
     resolution: {integrity: sha512-WG7nfvmWWkCR++KEkZevZb/uw41E8TsH4DsY9UxsTbIXCVGbAs4S+r8FrQ+OtH5EEQAs+5UxKC42VinkmpA1Yw==}
 
   rehype-raw@7.0.0:
     resolution: {integrity: sha512-/aE8hCfKlQeA8LmyeyQvQF3eBiLRGNlfBJEvWH7ivp9sBqs7TNqBL5X3v157rM4IFETqDnIOO+z5M/biZbo9Ww==}
 
-  rehype-stringify@10.0.0:
-    resolution: {integrity: sha512-1TX1i048LooI9QoecrXy7nGFFbFSufxVRAfc6Y9YMRAi56l+oB0zP51mLSV312uRuvVLPV1opSlJmslozR1XHQ==}
+  rehype-recma@1.0.0:
+    resolution: {integrity: sha512-lqA4rGUf1JmacCNWWZx0Wv1dHqMwxzsDWYMTowuplHF3xH0N/MmrZ/G3BDZnzAkRmxDadujCjaKM2hqYdCBOGw==}
 
   rehype-stringify@10.0.1:
     resolution: {integrity: sha512-k9ecfXHmIPuFVI61B9DeLPN0qFHfawM6RsuX48hoqlaKSF61RskNjSm1lI8PhBEM0MRdLxVVm4WmTqJQccH9mA==}
 
-  rehype@13.0.1:
-    resolution: {integrity: sha512-AcSLS2mItY+0fYu9xKxOu1LhUZeBZZBx8//5HKzF+0XP+eP8+6a5MXn2+DW2kfXR6Dtp1FEXMVrjyKAcvcU8vg==}
+  rehype@13.0.2:
+    resolution: {integrity: sha512-j31mdaRFrwFRUIlxGeuPXXKWQxet52RBQRvCmzl5eCefn/KGbomK5GMHNMsOJf55fgo3qw5tST5neDuarDYR2A==}
 
   remark-gfm@4.0.0:
     resolution: {integrity: sha512-U92vJgBPkbw4Zfu/IiW2oTZLSL3Zpv+uI7My2eq8JxKgqraFdU8YUGicEJCEgSbeaG+QDFqIcwwfMTOEelPxuA==}
@@ -1808,9 +1815,6 @@ packages:
   remark-parse@11.0.0:
     resolution: {integrity: sha512-FCxlKLNGknS5ba/1lmpYijMUzX2esxW5xQqjWxw2eHFfS2MSdaHVINFmhjo+qN1WhZhNimq0dZATN9pH0IDrpA==}
 
-  remark-rehype@11.1.0:
-    resolution: {integrity: sha512-z3tJrAs2kIs1AqIIy6pzHmAHlF1hWQ+OdY4/hv+Wxe35EhyLKcajL33iUEn3ScxtFox9nUvRufR/Zre8Q08H/g==}
-
   remark-rehype@11.1.1:
     resolution: {integrity: sha512-g/osARvjkBXb6Wo0XvAeXQohVta8i84ACbenPpoSsxTOQH/Ae0/RGP4WZgnMH5pMLpsj4FG7OHmcIcXxpza8eQ==}
 
@@ -1892,12 +1896,12 @@ packages:
     resolution: {integrity: sha512-haPVm1EkS9pgvHrQ/F3Xy+hgcuMV0Wm9vfIBSiwZ05k+xgb0PkBQpGsAA/oWdDobNaZTH5ppvHtzCFbnSEwHVw==}
     engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
 
-  shiki@1.17.7:
-    resolution: {integrity: sha512-Zf6hNtWhFyF4XP5OOsXkBTEx9JFPiN0TQx4wSe+Vqeuczewgk2vT4IZhF4gka55uelm052BD5BaHavNqUNZd+A==}
-
   shiki@1.22.0:
     resolution: {integrity: sha512-/t5LlhNs+UOKQCYBtl5ZsH/Vclz73GIqT2yQsCBygr8L/ppTdmpL4w3kPLoZJbMKVWtoG77Ue1feOjZfDxvMkw==}
 
+  shiki@1.23.1:
+    resolution: {integrity: sha512-8kxV9TH4pXgdKGxNOkrSMydn1Xf6It8lsle0fiqxf7a1149K1WGtdOu3Zb91T5r1JpvRPxqxU3C2XdZZXQnrig==}
+
   signal-exit@4.1.0:
     resolution: {integrity: sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==}
     engines: {node: '>=14'}
@@ -1930,10 +1934,6 @@ packages:
     resolution: {integrity: sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==}
     engines: {node: '>=8'}
 
-  string-width@5.1.2:
-    resolution: {integrity: sha512-HnLOCR3vjcY8beoNLtcjZ5/nxn2afmME6lhrDrebokqMap+XbeW8n9TXpPDOqdGK5qcI3oT0GKTW6wC7EMiVqA==}
-    engines: {node: '>=12'}
-
   string-width@7.2.0:
     resolution: {integrity: sha512-tsaTIkKW9b4N+AEj+SVA+WhJzV7/zMhcSu78mLKWSk7cXMOSHsBKFWUs0fWwq8QyK3MgJBQRX6Gbi4kYbdvGkQ==}
     engines: {node: '>=18'}
@@ -1963,10 +1963,6 @@ packages:
   style-to-object@1.0.8:
     resolution: {integrity: sha512-xT47I/Eo0rwJmaXC4oilDGDWLohVhR6o/xAQcPQN8q6QBuZVL8qMYL85kLmST5cPjAorwvqIA4qXTRQoYHaL6g==}
 
-  supports-color@5.5.0:
-    resolution: {integrity: sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==}
-    engines: {node: '>=4'}
-
   svgo@3.3.2:
     resolution: {integrity: sha512-OoohrmuUlBs8B8o6MB2Aevn+pRIH9zDALSR+6hhqVfa6fRwG/Qw9VUMSMW9VNg2CFc/MTIfabtdOVl9ODIJjpw==}
     engines: {node: '>=14.0.0'}
@@ -1979,9 +1975,8 @@ packages:
   tinyexec@0.3.0:
     resolution: {integrity: sha512-tVGE0mVJPGb0chKhqmsoosjsS+qUnJVGJpZgsHYQcGoPlG3B51R3PouqTgEGH2Dc9jjFyOqOpix6ZHNMXp1FZg==}
 
-  to-fast-properties@2.0.0:
-    resolution: {integrity: sha512-/OaKK0xYrs3DmxRYqL/yDc+FxFUVYhDlXMhRmv3z915w2HF1tnN1omB354j8VUGO/hbRzyD6Y3sA7v7GS/ceog==}
-    engines: {node: '>=4'}
+  tinyexec@0.3.1:
+    resolution: {integrity: sha512-WiCJLEECkO18gwqIp6+hJg0//p23HXp4S+gGtAKu3mI2F2/sXC4FvHvXvB0zJVVaTPhx1/tOwdbRsa1sOBIKqQ==}
 
   to-regex-range@5.0.1:
     resolution: {integrity: sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==}
@@ -1993,8 +1988,8 @@ packages:
   trough@2.2.0:
     resolution: {integrity: sha512-tmMpK00BjZiUyVyvrBK7knerNgmgvcV/KLVyuma/SC+TQN167GrMRciANTz09+k3zW8L8t60jWO1GpfkZdjTaw==}
 
-  tsconfck@3.1.3:
-    resolution: {integrity: sha512-ulNZP1SVpRDesxeMLON/LtWM8HIgAJEIVpVVhBM6gsmvQ8+Rh+ZG7FWGvHh7Ah3pRABwVJWklWCr/BTZSv0xnQ==}
+  tsconfck@3.1.4:
+    resolution: {integrity: sha512-kdqWFGVJqe+KGYvlSO9NIaWn9jT1Ny4oKVzAJsKii5eoE9snzTJzL4+MMVOMn+fikWGFmKEylcXL710V/kIPJQ==}
     engines: {node: ^18 || >=20}
     hasBin: true
     peerDependencies:
@@ -2006,9 +2001,9 @@ packages:
   tslib@2.7.0:
     resolution: {integrity: sha512-gLXCKdN1/j47AiHiOkJN69hJmcbGTHI0ImLmbYLHykhgeN0jVGola9yVjFgzCUklsZQMW55o+dW7IXv3RCXDzA==}
 
-  type-fest@2.19.0:
-    resolution: {integrity: sha512-RAH822pAdBgcNMAfWnCBU3CFZcfZ/i1eZjwFU/dsLKumyuuP3niueg2UAukXYF0E2AAoc82ZSSf9J0WQBinzHA==}
-    engines: {node: '>=12.20'}
+  type-fest@4.27.0:
+    resolution: {integrity: sha512-3IMSWgP7C5KSQqmo1wjhKrwsvXAtF33jO3QY+Uy++ia7hqvgSK6iXbbg5PbDBc1P2ZbNEDgejOrN4YooXvhwCw==}
+    engines: {node: '>=16'}
 
   typesafe-path@0.2.2:
     resolution: {integrity: sha512-OJabfkAg1WLZSqJAJ0Z6Sdt3utnbzr/jh+NAHoyWHJe8CMSy79Gm085094M9nvTPy22KzTVn5Zq5mbapCI/hPA==}
@@ -2064,8 +2059,8 @@ packages:
   unist-util-visit@5.0.0:
     resolution: {integrity: sha512-MR04uvD+07cwl/yhVuVWAtw+3GOR/knlL55Nd/wAdblk27GCVt3lqpTivy/tkJcZoNPzTwS1Y+KMojlLDhoTzg==}
 
-  update-browserslist-db@1.1.0:
-    resolution: {integrity: sha512-EdRAaAyk2cUE1wOf2DkEhzxqOQvFOoRJFNS6NeyJ01Gp2beMRpBAINjM2iDXE3KCuKhwnvHIQCJm6ThL2Z+HzQ==}
+  update-browserslist-db@1.1.1:
+    resolution: {integrity: sha512-R8UzCaa9Az+38REPiJ1tXlImTJXlVfgHZsglwBD/k6nj76ctsH1E3q4doGrukiLQd3sGQYu56r5+lo5r94l29A==}
     hasBin: true
     peerDependencies:
       browserslist: '>= 4.21.0'
@@ -2079,8 +2074,8 @@ packages:
   vfile@6.0.3:
     resolution: {integrity: sha512-KzIbH/9tXat2u30jf+smMwFCsno4wHVdNmzFyL+T/L3UGqqk6JKfVqOFOZEpZSHADH1k40ab6NUIXZq422ov3Q==}
 
-  vite@5.4.6:
-    resolution: {integrity: sha512-IeL5f8OO5nylsgzd9tq4qD2QqI0k2CQLGrWD0rCN0EQJZpBK5vJAx0I+GDkMOXxQX/OfFHMuLIx6ddAxGX/k+Q==}
+  vite@5.4.11:
+    resolution: {integrity: sha512-c7jFQRklXua0mTzneGW9QVyxFjUgwcihC4bXEtujIo2ouWCe1Ajt/amn2PCxYnhYfd5k09JX3SB7OYWFKYqj8Q==}
     engines: {node: ^18.0.0 || >=20.0.0}
     hasBin: true
     peerDependencies:
@@ -2110,40 +2105,40 @@ packages:
       terser:
         optional: true
 
-  vitefu@1.0.2:
-    resolution: {integrity: sha512-0/iAvbXyM3RiPPJ4lyD4w6Mjgtf4ejTK6TPvTNG3H32PLwuT0N/ZjJLiXug7ETE/LWtTeHw9WRv7uX/tIKYyKg==}
+  vitefu@1.0.3:
+    resolution: {integrity: sha512-iKKfOMBHob2WxEJbqbJjHAkmYgvFDPhuqrO82om83S8RLk+17FtyMBfcyeH8GqD0ihShtkMW/zzJgiA51hCNCQ==}
     peerDependencies:
-      vite: ^3.0.0 || ^4.0.0 || ^5.0.0
+      vite: ^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0-beta.0
     peerDependenciesMeta:
       vite:
         optional: true
 
-  volar-service-css@0.0.61:
-    resolution: {integrity: sha512-Ct9L/w+IB1JU8F4jofcNCGoHy6TF83aiapfZq9A0qYYpq+Kk5dH+ONS+rVZSsuhsunq8UvAuF8Gk6B8IFLfniw==}
+  volar-service-css@0.0.62:
+    resolution: {integrity: sha512-JwNyKsH3F8PuzZYuqPf+2e+4CTU8YoyUHEHVnoXNlrLe7wy9U3biomZ56llN69Ris7TTy/+DEX41yVxQpM4qvg==}
     peerDependencies:
       '@volar/language-service': ~2.4.0
     peerDependenciesMeta:
       '@volar/language-service':
         optional: true
 
-  volar-service-emmet@0.0.61:
-    resolution: {integrity: sha512-iiYqBxjjcekqrRruw4COQHZME6EZYWVbkHjHDbULpml3g8HGJHzpAMkj9tXNCPxf36A+f1oUYjsvZt36qPg4cg==}
+  volar-service-emmet@0.0.62:
+    resolution: {integrity: sha512-U4dxWDBWz7Pi4plpbXf4J4Z/ss6kBO3TYrACxWNsE29abu75QzVS0paxDDhI6bhqpbDFXlpsDhZ9aXVFpnfGRQ==}
     peerDependencies:
       '@volar/language-service': ~2.4.0
     peerDependenciesMeta:
       '@volar/language-service':
         optional: true
 
-  volar-service-html@0.0.61:
-    resolution: {integrity: sha512-yFE+YmmgqIL5HI4ORqP++IYb1QaGcv+xBboI0WkCxJJ/M35HZj7f5rbT3eQ24ECLXFbFCFanckwyWJVz5KmN3Q==}
+  volar-service-html@0.0.62:
+    resolution: {integrity: sha512-Zw01aJsZRh4GTGUjveyfEzEqpULQUdQH79KNEiKVYHZyuGtdBRYCHlrus1sueSNMxwwkuF5WnOHfvBzafs8yyQ==}
     peerDependencies:
       '@volar/language-service': ~2.4.0
     peerDependenciesMeta:
       '@volar/language-service':
         optional: true
 
-  volar-service-prettier@0.0.61:
-    resolution: {integrity: sha512-F612nql5I0IS8HxXemCGvOR2Uxd4XooIwqYVUvk7WSBxP/+xu1jYvE3QJ7EVpl8Ty3S4SxPXYiYTsG3bi+gzIQ==}
+  volar-service-prettier@0.0.62:
+    resolution: {integrity: sha512-h2yk1RqRTE+vkYZaI9KYuwpDfOQRrTEMvoHol0yW4GFKc75wWQRrb5n/5abDrzMPrkQbSip8JH2AXbvrRtYh4w==}
     peerDependencies:
       '@volar/language-service': ~2.4.0
       prettier: ^2.2 || ^3.0
@@ -2153,24 +2148,24 @@ packages:
       prettier:
         optional: true
 
-  volar-service-typescript-twoslash-queries@0.0.61:
-    resolution: {integrity: sha512-99FICGrEF0r1E2tV+SvprHPw9Knyg7BdW2fUch0tf59kG+KG+Tj4tL6tUg+cy8f23O/VXlmsWFMIE+bx1dXPnQ==}
+  volar-service-typescript-twoslash-queries@0.0.62:
+    resolution: {integrity: sha512-KxFt4zydyJYYI0kFAcWPTh4u0Ha36TASPZkAnNY784GtgajerUqM80nX/W1d0wVhmcOFfAxkVsf/Ed+tiYU7ng==}
     peerDependencies:
       '@volar/language-service': ~2.4.0
     peerDependenciesMeta:
       '@volar/language-service':
         optional: true
 
-  volar-service-typescript@0.0.61:
-    resolution: {integrity: sha512-4kRHxVbW7wFBHZWRU6yWxTgiKETBDIJNwmJUAWeP0mHaKpnDGj/astdRFKqGFRYVeEYl45lcUPhdJyrzanjsdQ==}
+  volar-service-typescript@0.0.62:
+    resolution: {integrity: sha512-p7MPi71q7KOsH0eAbZwPBiKPp9B2+qrdHAd6VY5oTo9BUXatsOAdakTm9Yf0DUj6uWBAaOT01BSeVOPwucMV1g==}
     peerDependencies:
       '@volar/language-service': ~2.4.0
     peerDependenciesMeta:
       '@volar/language-service':
         optional: true
 
-  volar-service-yaml@0.0.61:
-    resolution: {integrity: sha512-L+gbDiLDQQ1rZUbJ3mf3doDsoQUa8OZM/xdpk/unMg1Vz24Zmi2Ign8GrZyBD7bRoIQDwOH9gdktGDKzRPpUNw==}
+  volar-service-yaml@0.0.62:
+    resolution: {integrity: sha512-k7gvv7sk3wa+nGll3MaSKyjwQsJjIGCHFjVkl3wjaSP2nouKyn9aokGmqjrl39mi88Oy49giog2GkZH526wjig==}
     peerDependencies:
       '@volar/language-service': ~2.4.0
     peerDependenciesMeta:
@@ -2246,17 +2241,17 @@ packages:
     resolution: {integrity: sha512-ysVYmw6+ZBhx3+ZkcPwRuJi38ZOTLJJ33PSHaitLxSKUMsh0LkKd0nC69zZCwt5D+AYUcMK2hhw4yWny20vSGg==}
     engines: {node: '>=18.12'}
 
-  widest-line@4.0.1:
-    resolution: {integrity: sha512-o0cyEG0e8GPzT4iGHphIOh0cJOV8fivsXxddQasHPHfoZf1ZexrfeA21w2NaEN1RHE+fXlfISmOE8R9N3u3Qig==}
-    engines: {node: '>=12'}
+  widest-line@5.0.0:
+    resolution: {integrity: sha512-c9bZp7b5YtRj2wOe6dlj32MK+Bx/M/d+9VB2SHM1OtsUHR0aV0tdP6DWh/iMt0kWi1t5g1Iudu6hQRNd1A4PVA==}
+    engines: {node: '>=18'}
 
   wrap-ansi@7.0.0:
     resolution: {integrity: sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==}
     engines: {node: '>=10'}
 
-  wrap-ansi@8.1.0:
-    resolution: {integrity: sha512-si7QWI6zUMq56bESFvagtmzMdGOtoxfR+Sez11Mobfc7tm+VkUckk9bW2UeffTGVUbOksxmSw0AA2gs8g71NCQ==}
-    engines: {node: '>=12'}
+  wrap-ansi@9.0.0:
+    resolution: {integrity: sha512-G8ura3S+3Z2G+mkgNRq8dqaFZAuxfsxpBB8OCTGRTCtp+l/v9nbFNmCUP1BZMts3G1142MsZfn6eeUKrr4PD1Q==}
+    engines: {node: '>=18'}
 
   wrappy@1.0.2:
     resolution: {integrity: sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==}
@@ -2302,8 +2297,8 @@ packages:
     resolution: {integrity: sha512-b4JR1PFR10y1mKjhHY9LaGo6tmrgjit7hxVIeAmyMw3jegXR4dhYqLaQF5zMXZxY7tLpMyJeLjr1C4rLmkVe8g==}
     engines: {node: '>=12.20'}
 
-  zod-to-json-schema@3.23.3:
-    resolution: {integrity: sha512-TYWChTxKQbRJp5ST22o/Irt9KC5nj7CdBKYB/AosCRdj/wxEMvv4NNaj9XVUHDOIp53ZxArGhnw5HMZziPFjog==}
+  zod-to-json-schema@3.23.5:
+    resolution: {integrity: sha512-5wlSS0bXfF/BrL4jPAbz9da5hDlDptdEppYfe+x4eIJ7jioqKG9uUxOwPzqof09u/XeVdrgFu29lZi+8XNDJtA==}
     peerDependencies:
       zod: ^3.23.3
 
@@ -2333,11 +2328,10 @@ snapshots:
 
   '@antfu/utils@0.7.10': {}
 
-  '@astrojs/check@0.9.3(typescript@5.6.2)':
+  '@astrojs/check@0.9.4(typescript@5.6.2)':
     dependencies:
-      '@astrojs/language-server': 2.14.2(typescript@5.6.2)
-      chokidar: 3.6.0
-      fast-glob: 3.3.2
+      '@astrojs/language-server': 2.15.4(typescript@5.6.2)
+      chokidar: 4.0.1
       kleur: 4.1.5
       typescript: 5.6.2
       yargs: 17.7.2
@@ -2349,53 +2343,29 @@ snapshots:
 
   '@astrojs/internal-helpers@0.4.1': {}
 
-  '@astrojs/language-server@2.14.2(typescript@5.6.2)':
+  '@astrojs/language-server@2.15.4(typescript@5.6.2)':
     dependencies:
       '@astrojs/compiler': 2.10.3
-      '@astrojs/yaml2ts': 0.2.1
+      '@astrojs/yaml2ts': 0.2.2
       '@jridgewell/sourcemap-codec': 1.5.0
-      '@volar/kit': 2.4.5(typescript@5.6.2)
-      '@volar/language-core': 2.4.5
-      '@volar/language-server': 2.4.5
-      '@volar/language-service': 2.4.5
-      '@volar/typescript': 2.4.5
+      '@volar/kit': 2.4.10(typescript@5.6.2)
+      '@volar/language-core': 2.4.10
+      '@volar/language-server': 2.4.10
+      '@volar/language-service': 2.4.10
       fast-glob: 3.3.2
       muggle-string: 0.4.1
-      volar-service-css: 0.0.61(@volar/language-service@2.4.5)
-      volar-service-emmet: 0.0.61(@volar/language-service@2.4.5)
-      volar-service-html: 0.0.61(@volar/language-service@2.4.5)
-      volar-service-prettier: 0.0.61(@volar/language-service@2.4.5)
-      volar-service-typescript: 0.0.61(@volar/language-service@2.4.5)
-      volar-service-typescript-twoslash-queries: 0.0.61(@volar/language-service@2.4.5)
-      volar-service-yaml: 0.0.61(@volar/language-service@2.4.5)
+      volar-service-css: 0.0.62(@volar/language-service@2.4.10)
+      volar-service-emmet: 0.0.62(@volar/language-service@2.4.10)
+      volar-service-html: 0.0.62(@volar/language-service@2.4.10)
+      volar-service-prettier: 0.0.62(@volar/language-service@2.4.10)
+      volar-service-typescript: 0.0.62(@volar/language-service@2.4.10)
+      volar-service-typescript-twoslash-queries: 0.0.62(@volar/language-service@2.4.10)
+      volar-service-yaml: 0.0.62(@volar/language-service@2.4.10)
       vscode-html-languageservice: 5.3.1
       vscode-uri: 3.0.8
     transitivePeerDependencies:
       - typescript
 
-  '@astrojs/markdown-remark@5.2.0':
-    dependencies:
-      '@astrojs/prism': 3.1.0
-      github-slugger: 2.0.0
-      hast-util-from-html: 2.0.3
-      hast-util-to-text: 4.0.2
-      import-meta-resolve: 4.1.0
-      mdast-util-definitions: 6.0.0
-      rehype-raw: 7.0.0
-      rehype-stringify: 10.0.0
-      remark-gfm: 4.0.0
-      remark-parse: 11.0.0
-      remark-rehype: 11.1.0
-      remark-smartypants: 3.0.2
-      shiki: 1.17.7
-      unified: 11.0.5
-      unist-util-remove-position: 5.0.0
-      unist-util-visit: 5.0.0
-      unist-util-visit-parents: 6.0.1
-      vfile: 6.0.3
-    transitivePeerDependencies:
-      - supports-color
-
   '@astrojs/markdown-remark@5.3.0':
     dependencies:
       '@astrojs/prism': 3.1.0
@@ -2419,12 +2389,12 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@astrojs/mdx@3.1.8(astro@4.15.6(@types/node@22.5.5)(rollup@4.21.3)(sass@1.78.0)(typescript@5.6.2))':
+  '@astrojs/mdx@3.1.9(astro@4.16.13(@types/node@22.5.5)(rollup@4.21.3)(sass@1.78.0)(typescript@5.6.2))':
     dependencies:
       '@astrojs/markdown-remark': 5.3.0
-      '@mdx-js/mdx': 3.0.1
-      acorn: 8.12.1
-      astro: 4.15.6(@types/node@22.5.5)(rollup@4.21.3)(sass@1.78.0)(typescript@5.6.2)
+      '@mdx-js/mdx': 3.1.0(acorn@8.14.0)
+      acorn: 8.14.0
+      astro: 4.16.13(@types/node@22.5.5)(rollup@4.21.3)(sass@1.78.0)(typescript@5.6.2)
       es-module-lexer: 1.5.4
       estree-util-visit: 2.0.0
       gray-matter: 4.0.3
@@ -2455,29 +2425,30 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@astrojs/yaml2ts@0.2.1':
+  '@astrojs/yaml2ts@0.2.2':
     dependencies:
       yaml: 2.5.1
 
-  '@babel/code-frame@7.24.7':
+  '@babel/code-frame@7.26.2':
     dependencies:
-      '@babel/highlight': 7.24.7
+      '@babel/helper-validator-identifier': 7.25.9
+      js-tokens: 4.0.0
       picocolors: 1.1.0
 
-  '@babel/compat-data@7.25.4': {}
+  '@babel/compat-data@7.26.2': {}
 
-  '@babel/core@7.25.2':
+  '@babel/core@7.26.0':
     dependencies:
       '@ampproject/remapping': 2.3.0
-      '@babel/code-frame': 7.24.7
-      '@babel/generator': 7.25.6
-      '@babel/helper-compilation-targets': 7.25.2
-      '@babel/helper-module-transforms': 7.25.2(@babel/core@7.25.2)
-      '@babel/helpers': 7.25.6
-      '@babel/parser': 7.25.6
-      '@babel/template': 7.25.0
-      '@babel/traverse': 7.25.6
-      '@babel/types': 7.25.6
+      '@babel/code-frame': 7.26.2
+      '@babel/generator': 7.26.2
+      '@babel/helper-compilation-targets': 7.25.9
+      '@babel/helper-module-transforms': 7.26.0(@babel/core@7.26.0)
+      '@babel/helpers': 7.26.0
+      '@babel/parser': 7.26.2
+      '@babel/template': 7.25.9
+      '@babel/traverse': 7.25.9
+      '@babel/types': 7.26.0
       convert-source-map: 2.0.0
       debug: 4.3.7
       gensync: 1.0.0-beta.2
@@ -2486,112 +2457,101 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/generator@7.25.6':
+  '@babel/generator@7.26.2':
     dependencies:
-      '@babel/types': 7.25.6
+      '@babel/parser': 7.26.2
+      '@babel/types': 7.26.0
       '@jridgewell/gen-mapping': 0.3.5
       '@jridgewell/trace-mapping': 0.3.25
-      jsesc: 2.5.2
+      jsesc: 3.0.2
 
-  '@babel/helper-annotate-as-pure@7.24.7':
+  '@babel/helper-annotate-as-pure@7.25.9':
     dependencies:
-      '@babel/types': 7.25.6
+      '@babel/types': 7.26.0
 
-  '@babel/helper-compilation-targets@7.25.2':
+  '@babel/helper-compilation-targets@7.25.9':
     dependencies:
-      '@babel/compat-data': 7.25.4
-      '@babel/helper-validator-option': 7.24.8
-      browserslist: 4.23.3
+      '@babel/compat-data': 7.26.2
+      '@babel/helper-validator-option': 7.25.9
+      browserslist: 4.24.2
       lru-cache: 5.1.1
       semver: 6.3.1
 
-  '@babel/helper-module-imports@7.24.7':
+  '@babel/helper-module-imports@7.25.9':
     dependencies:
-      '@babel/traverse': 7.25.6
-      '@babel/types': 7.25.6
+      '@babel/traverse': 7.25.9
+      '@babel/types': 7.26.0
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/helper-module-transforms@7.25.2(@babel/core@7.25.2)':
+  '@babel/helper-module-transforms@7.26.0(@babel/core@7.26.0)':
     dependencies:
-      '@babel/core': 7.25.2
-      '@babel/helper-module-imports': 7.24.7
-      '@babel/helper-simple-access': 7.24.7
-      '@babel/helper-validator-identifier': 7.24.7
-      '@babel/traverse': 7.25.6
+      '@babel/core': 7.26.0
+      '@babel/helper-module-imports': 7.25.9
+      '@babel/helper-validator-identifier': 7.25.9
+      '@babel/traverse': 7.25.9
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/helper-plugin-utils@7.24.8': {}
+  '@babel/helper-plugin-utils@7.25.9': {}
 
-  '@babel/helper-simple-access@7.24.7':
+  '@babel/helper-string-parser@7.25.9': {}
+
+  '@babel/helper-validator-identifier@7.25.9': {}
+
+  '@babel/helper-validator-option@7.25.9': {}
+
+  '@babel/helpers@7.26.0':
     dependencies:
-      '@babel/traverse': 7.25.6
-      '@babel/types': 7.25.6
-    transitivePeerDependencies:
-      - supports-color
-
-  '@babel/helper-string-parser@7.24.8': {}
-
-  '@babel/helper-validator-identifier@7.24.7': {}
-
-  '@babel/helper-validator-option@7.24.8': {}
-
-  '@babel/helpers@7.25.6':
-    dependencies:
-      '@babel/template': 7.25.0
-      '@babel/types': 7.25.6
-
-  '@babel/highlight@7.24.7':
-    dependencies:
-      '@babel/helper-validator-identifier': 7.24.7
-      chalk: 2.4.2
-      js-tokens: 4.0.0
-      picocolors: 1.1.0
+      '@babel/template': 7.25.9
+      '@babel/types': 7.26.0
 
   '@babel/parser@7.25.6':
     dependencies:
-      '@babel/types': 7.25.6
+      '@babel/types': 7.26.0
 
-  '@babel/plugin-syntax-jsx@7.24.7(@babel/core@7.25.2)':
+  '@babel/parser@7.26.2':
     dependencies:
-      '@babel/core': 7.25.2
-      '@babel/helper-plugin-utils': 7.24.8
+      '@babel/types': 7.26.0
 
-  '@babel/plugin-transform-react-jsx@7.25.2(@babel/core@7.25.2)':
+  '@babel/plugin-syntax-jsx@7.25.9(@babel/core@7.26.0)':
     dependencies:
-      '@babel/core': 7.25.2
-      '@babel/helper-annotate-as-pure': 7.24.7
-      '@babel/helper-module-imports': 7.24.7
-      '@babel/helper-plugin-utils': 7.24.8
-      '@babel/plugin-syntax-jsx': 7.24.7(@babel/core@7.25.2)
-      '@babel/types': 7.25.6
+      '@babel/core': 7.26.0
+      '@babel/helper-plugin-utils': 7.25.9
+
+  '@babel/plugin-transform-react-jsx@7.25.9(@babel/core@7.26.0)':
+    dependencies:
+      '@babel/core': 7.26.0
+      '@babel/helper-annotate-as-pure': 7.25.9
+      '@babel/helper-module-imports': 7.25.9
+      '@babel/helper-plugin-utils': 7.25.9
+      '@babel/plugin-syntax-jsx': 7.25.9(@babel/core@7.26.0)
+      '@babel/types': 7.26.0
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/template@7.25.0':
+  '@babel/template@7.25.9':
     dependencies:
-      '@babel/code-frame': 7.24.7
-      '@babel/parser': 7.25.6
-      '@babel/types': 7.25.6
+      '@babel/code-frame': 7.26.2
+      '@babel/parser': 7.26.2
+      '@babel/types': 7.26.0
 
-  '@babel/traverse@7.25.6':
+  '@babel/traverse@7.25.9':
     dependencies:
-      '@babel/code-frame': 7.24.7
-      '@babel/generator': 7.25.6
-      '@babel/parser': 7.25.6
-      '@babel/template': 7.25.0
-      '@babel/types': 7.25.6
+      '@babel/code-frame': 7.26.2
+      '@babel/generator': 7.26.2
+      '@babel/parser': 7.26.2
+      '@babel/template': 7.25.9
+      '@babel/types': 7.26.0
       debug: 4.3.7
       globals: 11.12.0
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/types@7.25.6':
+  '@babel/types@7.26.0':
     dependencies:
-      '@babel/helper-string-parser': 7.24.8
-      '@babel/helper-validator-identifier': 7.24.7
-      to-fast-properties: 2.0.0
+      '@babel/helper-string-parser': 7.25.9
+      '@babel/helper-validator-identifier': 7.25.9
 
   '@emmetio/abbreviation@2.3.3':
     dependencies:
@@ -2813,7 +2773,7 @@ snapshots:
       '@jridgewell/resolve-uri': 3.1.2
       '@jridgewell/sourcemap-codec': 1.5.0
 
-  '@mdx-js/mdx@3.0.1':
+  '@mdx-js/mdx@3.1.0(acorn@8.14.0)':
     dependencies:
       '@types/estree': 1.0.5
       '@types/estree-jsx': 1.0.5
@@ -2821,17 +2781,18 @@ snapshots:
       '@types/mdx': 2.0.13
       collapse-white-space: 2.1.0
       devlop: 1.1.0
-      estree-util-build-jsx: 3.0.1
       estree-util-is-identifier-name: 3.0.0
-      estree-util-to-js: 2.0.0
+      estree-util-scope: 1.0.0
       estree-walker: 3.0.3
-      hast-util-to-estree: 3.1.0
       hast-util-to-jsx-runtime: 2.3.2
       markdown-extensions: 2.0.0
-      periscopic: 3.1.0
+      recma-build-jsx: 1.0.0
+      recma-jsx: 1.0.0(acorn@8.14.0)
+      recma-stringify: 1.0.0
+      rehype-recma: 1.0.0
       remark-mdx: 3.0.1
       remark-parse: 11.0.0
-      remark-rehype: 11.1.0
+      remark-rehype: 11.1.1
       source-map: 0.7.4
       unified: 11.0.5
       unist-util-position-from-estree: 2.0.0
@@ -2839,6 +2800,7 @@ snapshots:
       unist-util-visit: 5.0.0
       vfile: 6.0.3
     transitivePeerDependencies:
+      - acorn
       - supports-color
 
   '@nodelib/fs.scandir@2.1.5':
@@ -2853,13 +2815,13 @@ snapshots:
       '@nodelib/fs.scandir': 2.1.5
       fastq: 1.17.1
 
-  '@oslojs/encoding@0.4.1': {}
+  '@oslojs/encoding@1.1.0': {}
 
-  '@rollup/pluginutils@5.1.0(rollup@4.21.3)':
+  '@rollup/pluginutils@5.1.3(rollup@4.21.3)':
     dependencies:
       '@types/estree': 1.0.5
       estree-walker: 2.0.2
-      picomatch: 2.3.1
+      picomatch: 4.0.2
     optionalDependencies:
       rollup: 4.21.3
 
@@ -2911,15 +2873,6 @@ snapshots:
   '@rollup/rollup-win32-x64-msvc@4.21.3':
     optional: true
 
-  '@shikijs/core@1.17.7':
-    dependencies:
-      '@shikijs/engine-javascript': 1.17.7
-      '@shikijs/engine-oniguruma': 1.17.7
-      '@shikijs/types': 1.17.7
-      '@shikijs/vscode-textmate': 9.2.2
-      '@types/hast': 3.0.4
-      hast-util-to-html: 9.0.3
-
   '@shikijs/core@1.22.0':
     dependencies:
       '@shikijs/engine-javascript': 1.22.0
@@ -2929,11 +2882,14 @@ snapshots:
       '@types/hast': 3.0.4
       hast-util-to-html: 9.0.3
 
-  '@shikijs/engine-javascript@1.17.7':
+  '@shikijs/core@1.23.1':
     dependencies:
-      '@shikijs/types': 1.17.7
-      '@shikijs/vscode-textmate': 9.2.2
-      oniguruma-to-js: 0.4.3
+      '@shikijs/engine-javascript': 1.23.1
+      '@shikijs/engine-oniguruma': 1.23.1
+      '@shikijs/types': 1.23.1
+      '@shikijs/vscode-textmate': 9.3.0
+      '@types/hast': 3.0.4
+      hast-util-to-html: 9.0.3
 
   '@shikijs/engine-javascript@1.22.0':
     dependencies:
@@ -2941,27 +2897,31 @@ snapshots:
       '@shikijs/vscode-textmate': 9.3.0
       oniguruma-to-js: 0.4.3
 
-  '@shikijs/engine-oniguruma@1.17.7':
+  '@shikijs/engine-javascript@1.23.1':
     dependencies:
-      '@shikijs/types': 1.17.7
-      '@shikijs/vscode-textmate': 9.2.2
+      '@shikijs/types': 1.23.1
+      '@shikijs/vscode-textmate': 9.3.0
+      oniguruma-to-es: 0.4.1
 
   '@shikijs/engine-oniguruma@1.22.0':
     dependencies:
       '@shikijs/types': 1.22.0
       '@shikijs/vscode-textmate': 9.3.0
 
-  '@shikijs/types@1.17.7':
+  '@shikijs/engine-oniguruma@1.23.1':
     dependencies:
-      '@shikijs/vscode-textmate': 9.2.2
-      '@types/hast': 3.0.4
+      '@shikijs/types': 1.23.1
+      '@shikijs/vscode-textmate': 9.3.0
 
   '@shikijs/types@1.22.0':
     dependencies:
       '@shikijs/vscode-textmate': 9.3.0
       '@types/hast': 3.0.4
 
-  '@shikijs/vscode-textmate@9.2.2': {}
+  '@shikijs/types@1.23.1':
+    dependencies:
+      '@shikijs/vscode-textmate': 9.3.0
+      '@types/hast': 3.0.4
 
   '@shikijs/vscode-textmate@9.3.0': {}
 
@@ -2974,23 +2934,23 @@ snapshots:
   '@types/babel__core@7.20.5':
     dependencies:
       '@babel/parser': 7.25.6
-      '@babel/types': 7.25.6
+      '@babel/types': 7.26.0
       '@types/babel__generator': 7.6.8
       '@types/babel__template': 7.4.4
       '@types/babel__traverse': 7.20.6
 
   '@types/babel__generator@7.6.8':
     dependencies:
-      '@babel/types': 7.25.6
+      '@babel/types': 7.26.0
 
   '@types/babel__template@7.4.4':
     dependencies:
       '@babel/parser': 7.25.6
-      '@babel/types': 7.25.6
+      '@babel/types': 7.26.0
 
   '@types/babel__traverse@7.20.6':
     dependencies:
-      '@babel/types': 7.25.6
+      '@babel/types': 7.26.0
 
   '@types/cookie@0.6.0': {}
 
@@ -3042,24 +3002,24 @@ snapshots:
 
   '@ungap/structured-clone@1.2.0': {}
 
-  '@volar/kit@2.4.5(typescript@5.6.2)':
+  '@volar/kit@2.4.10(typescript@5.6.2)':
     dependencies:
-      '@volar/language-service': 2.4.5
-      '@volar/typescript': 2.4.5
+      '@volar/language-service': 2.4.10
+      '@volar/typescript': 2.4.10
       typesafe-path: 0.2.2
       typescript: 5.6.2
       vscode-languageserver-textdocument: 1.0.12
       vscode-uri: 3.0.8
 
-  '@volar/language-core@2.4.5':
+  '@volar/language-core@2.4.10':
     dependencies:
-      '@volar/source-map': 2.4.5
+      '@volar/source-map': 2.4.10
 
-  '@volar/language-server@2.4.5':
+  '@volar/language-server@2.4.10':
     dependencies:
-      '@volar/language-core': 2.4.5
-      '@volar/language-service': 2.4.5
-      '@volar/typescript': 2.4.5
+      '@volar/language-core': 2.4.10
+      '@volar/language-service': 2.4.10
+      '@volar/typescript': 2.4.10
       path-browserify: 1.0.1
       request-light: 0.7.0
       vscode-languageserver: 9.0.1
@@ -3067,18 +3027,18 @@ snapshots:
       vscode-languageserver-textdocument: 1.0.12
       vscode-uri: 3.0.8
 
-  '@volar/language-service@2.4.5':
+  '@volar/language-service@2.4.10':
     dependencies:
-      '@volar/language-core': 2.4.5
+      '@volar/language-core': 2.4.10
       vscode-languageserver-protocol: 3.17.5
       vscode-languageserver-textdocument: 1.0.12
       vscode-uri: 3.0.8
 
-  '@volar/source-map@2.4.5': {}
+  '@volar/source-map@2.4.10': {}
 
-  '@volar/typescript@2.4.5':
+  '@volar/typescript@2.4.10':
     dependencies:
-      '@volar/language-core': 2.4.5
+      '@volar/language-core': 2.4.10
       path-browserify: 1.0.1
       vscode-uri: 3.0.8
 
@@ -3092,12 +3052,14 @@ snapshots:
 
   '@vscode/l10n@0.0.18': {}
 
-  acorn-jsx@5.3.2(acorn@8.12.1):
+  acorn-jsx@5.3.2(acorn@8.14.0):
     dependencies:
-      acorn: 8.12.1
+      acorn: 8.14.0
 
   acorn@8.12.1: {}
 
+  acorn@8.14.0: {}
+
   ajv@8.17.1:
     dependencies:
       fast-deep-equal: 3.1.3
@@ -3113,10 +3075,6 @@ snapshots:
 
   ansi-regex@6.1.0: {}
 
-  ansi-styles@3.2.1:
-    dependencies:
-      color-convert: 1.9.3
-
   ansi-styles@4.3.0:
     dependencies:
       color-convert: 2.0.1
@@ -3134,7 +3092,7 @@ snapshots:
 
   argparse@2.0.1: {}
 
-  aria-query@5.3.1: {}
+  aria-query@5.3.2: {}
 
   array-iterate@2.0.1: {}
 
@@ -3149,31 +3107,31 @@ snapshots:
       - debug
       - supports-color
 
-  astro@4.15.6(@types/node@22.5.5)(rollup@4.21.3)(sass@1.78.0)(typescript@5.6.2):
+  astro@4.16.13(@types/node@22.5.5)(rollup@4.21.3)(sass@1.78.0)(typescript@5.6.2):
     dependencies:
       '@astrojs/compiler': 2.10.3
       '@astrojs/internal-helpers': 0.4.1
-      '@astrojs/markdown-remark': 5.2.0
+      '@astrojs/markdown-remark': 5.3.0
       '@astrojs/telemetry': 3.1.0
-      '@babel/core': 7.25.2
-      '@babel/plugin-transform-react-jsx': 7.25.2(@babel/core@7.25.2)
-      '@babel/types': 7.25.6
-      '@oslojs/encoding': 0.4.1
-      '@rollup/pluginutils': 5.1.0(rollup@4.21.3)
+      '@babel/core': 7.26.0
+      '@babel/plugin-transform-react-jsx': 7.25.9(@babel/core@7.26.0)
+      '@babel/types': 7.26.0
+      '@oslojs/encoding': 1.1.0
+      '@rollup/pluginutils': 5.1.3(rollup@4.21.3)
       '@types/babel__core': 7.20.5
       '@types/cookie': 0.6.0
-      acorn: 8.12.1
-      aria-query: 5.3.1
+      acorn: 8.14.0
+      aria-query: 5.3.2
       axobject-query: 4.1.0
-      boxen: 7.1.1
+      boxen: 8.0.1
       ci-info: 4.0.0
       clsx: 2.1.1
       common-ancestor-path: 1.0.1
-      cookie: 0.6.0
+      cookie: 0.7.2
       cssesc: 3.0.0
       debug: 4.3.7
       deterministic-object-hash: 2.0.2
-      devalue: 5.0.0
+      devalue: 5.1.1
       diff: 5.2.0
       dlv: 1.1.3
       dset: 3.1.4
@@ -3181,7 +3139,6 @@ snapshots:
       esbuild: 0.21.5
       estree-walker: 3.0.3
       fast-glob: 3.3.2
-      fastq: 1.17.1
       flattie: 1.1.1
       github-slugger: 2.0.0
       gray-matter: 4.0.3
@@ -3189,33 +3146,30 @@ snapshots:
       http-cache-semantics: 4.1.1
       js-yaml: 4.1.0
       kleur: 4.1.5
-      magic-string: 0.30.11
+      magic-string: 0.30.13
       magicast: 0.3.5
       micromatch: 4.0.8
       mrmime: 2.0.0
       neotraverse: 0.6.18
-      ora: 8.1.0
+      ora: 8.1.1
       p-limit: 6.1.0
       p-queue: 8.0.1
-      path-to-regexp: 6.2.2
       preferred-pm: 4.0.0
       prompts: 2.4.2
-      rehype: 13.0.1
+      rehype: 13.0.2
       semver: 7.6.3
-      shiki: 1.17.7
-      string-width: 7.2.0
-      strip-ansi: 7.1.0
-      tinyexec: 0.3.0
-      tsconfck: 3.1.3(typescript@5.6.2)
+      shiki: 1.23.1
+      tinyexec: 0.3.1
+      tsconfck: 3.1.4(typescript@5.6.2)
       unist-util-visit: 5.0.0
       vfile: 6.0.3
-      vite: 5.4.6(@types/node@22.5.5)(sass@1.78.0)
-      vitefu: 1.0.2(vite@5.4.6(@types/node@22.5.5)(sass@1.78.0))
+      vite: 5.4.11(@types/node@22.5.5)(sass@1.78.0)
+      vitefu: 1.0.3(vite@5.4.11(@types/node@22.5.5)(sass@1.78.0))
       which-pm: 3.0.0
       xxhash-wasm: 1.0.2
       yargs-parser: 21.1.1
       zod: 3.23.8
-      zod-to-json-schema: 3.23.3(zod@3.23.8)
+      zod-to-json-schema: 3.23.5(zod@3.23.8)
       zod-to-ts: 1.2.0(typescript@5.6.2)(zod@3.23.8)
     optionalDependencies:
       sharp: 0.33.5
@@ -3252,42 +3206,36 @@ snapshots:
 
   boolbase@1.0.0: {}
 
-  boxen@7.1.1:
+  boxen@8.0.1:
     dependencies:
       ansi-align: 3.0.1
-      camelcase: 7.0.1
+      camelcase: 8.0.0
       chalk: 5.3.0
       cli-boxes: 3.0.0
-      string-width: 5.1.2
-      type-fest: 2.19.0
-      widest-line: 4.0.1
-      wrap-ansi: 8.1.0
+      string-width: 7.2.0
+      type-fest: 4.27.0
+      widest-line: 5.0.0
+      wrap-ansi: 9.0.0
 
   braces@3.0.3:
     dependencies:
       fill-range: 7.1.1
 
-  browserslist@4.23.3:
+  browserslist@4.24.2:
     dependencies:
-      caniuse-lite: 1.0.30001660
-      electron-to-chromium: 1.5.24
+      caniuse-lite: 1.0.30001680
+      electron-to-chromium: 1.5.63
       node-releases: 2.0.18
-      update-browserslist-db: 1.1.0(browserslist@4.23.3)
+      update-browserslist-db: 1.1.1(browserslist@4.24.2)
 
   buffer-crc32@0.2.13: {}
 
-  camelcase@7.0.1: {}
+  camelcase@8.0.0: {}
 
-  caniuse-lite@1.0.30001660: {}
+  caniuse-lite@1.0.30001680: {}
 
   ccount@2.0.1: {}
 
-  chalk@2.4.2:
-    dependencies:
-      ansi-styles: 3.2.1
-      escape-string-regexp: 1.0.5
-      supports-color: 5.5.0
-
   chalk@5.3.0: {}
 
   character-entities-html4@2.1.0: {}
@@ -3333,6 +3281,10 @@ snapshots:
     optionalDependencies:
       fsevents: 2.3.3
 
+  chokidar@4.0.1:
+    dependencies:
+      readdirp: 4.0.2
+
   chownr@2.0.0: {}
 
   ci-info@4.0.0: {}
@@ -3355,16 +3307,10 @@ snapshots:
 
   collapse-white-space@2.1.0: {}
 
-  color-convert@1.9.3:
-    dependencies:
-      color-name: 1.1.3
-
   color-convert@2.0.1:
     dependencies:
       color-name: 1.1.4
 
-  color-name@1.1.3: {}
-
   color-name@1.1.4: {}
 
   color-string@1.9.1:
@@ -3393,7 +3339,7 @@ snapshots:
 
   convert-source-map@2.0.0: {}
 
-  cookie@0.6.0: {}
+  cookie@0.7.2: {}
 
   css-select@5.1.0:
     dependencies:
@@ -3440,7 +3386,7 @@ snapshots:
     dependencies:
       base-64: 1.0.0
 
-  devalue@5.0.0: {}
+  devalue@5.1.1: {}
 
   devlop@1.1.0:
     dependencies:
@@ -3470,21 +3416,19 @@ snapshots:
 
   dset@3.1.4: {}
 
-  eastasianwidth@0.2.0: {}
-
-  electron-to-chromium@1.5.24: {}
+  electron-to-chromium@1.5.63: {}
 
   emmet@2.4.7:
     dependencies:
       '@emmetio/abbreviation': 2.3.3
       '@emmetio/css-abbreviation': 2.1.8
 
+  emoji-regex-xs@1.0.0: {}
+
   emoji-regex@10.4.0: {}
 
   emoji-regex@8.0.0: {}
 
-  emoji-regex@9.2.2: {}
-
   encoding-sniffer@0.2.0:
     dependencies:
       iconv-lite: 0.6.3
@@ -3498,6 +3442,20 @@ snapshots:
 
   es-module-lexer@1.5.4: {}
 
+  esast-util-from-estree@2.0.0:
+    dependencies:
+      '@types/estree-jsx': 1.0.5
+      devlop: 1.1.0
+      estree-util-visit: 2.0.0
+      unist-util-position-from-estree: 2.0.0
+
+  esast-util-from-js@2.0.1:
+    dependencies:
+      '@types/estree-jsx': 1.0.5
+      acorn: 8.14.0
+      esast-util-from-estree: 2.0.0
+      vfile-message: 4.0.2
+
   esbuild@0.21.5:
     optionalDependencies:
       '@esbuild/aix-ppc64': 0.21.5
@@ -3526,8 +3484,6 @@ snapshots:
 
   escalade@3.2.0: {}
 
-  escape-string-regexp@1.0.5: {}
-
   escape-string-regexp@5.0.0: {}
 
   esprima@4.0.1: {}
@@ -3545,6 +3501,11 @@ snapshots:
 
   estree-util-is-identifier-name@3.0.0: {}
 
+  estree-util-scope@1.0.0:
+    dependencies:
+      '@types/estree': 1.0.5
+      devlop: 1.1.0
+
   estree-util-to-js@2.0.0:
     dependencies:
       '@types/estree-jsx': 1.0.5
@@ -3660,8 +3621,6 @@ snapshots:
       section-matter: 1.0.0
       strip-bom-string: 1.0.0
 
-  has-flag@3.0.0: {}
-
   hast-util-from-html@2.0.3:
     dependencies:
       '@types/hast': 3.0.4
@@ -3855,10 +3814,6 @@ snapshots:
 
   is-plain-obj@4.1.0: {}
 
-  is-reference@3.0.2:
-    dependencies:
-      '@types/estree': 1.0.5
-
   is-unicode-supported@1.3.0: {}
 
   is-unicode-supported@2.1.0: {}
@@ -3878,7 +3833,7 @@ snapshots:
     dependencies:
       argparse: 2.0.1
 
-  jsesc@2.5.2: {}
+  jsesc@3.0.2: {}
 
   json-schema-traverse@1.0.0: {}
 
@@ -3925,14 +3880,14 @@ snapshots:
     dependencies:
       yallist: 3.1.1
 
-  magic-string@0.30.11:
+  magic-string@0.30.13:
     dependencies:
       '@jridgewell/sourcemap-codec': 1.5.0
 
   magicast@0.3.5:
     dependencies:
       '@babel/parser': 7.25.6
-      '@babel/types': 7.25.6
+      '@babel/types': 7.26.0
       source-map-js: 1.2.1
 
   markdown-extensions@2.0.0: {}
@@ -4233,8 +4188,8 @@ snapshots:
 
   micromark-extension-mdxjs@3.0.0:
     dependencies:
-      acorn: 8.12.1
-      acorn-jsx: 5.3.2(acorn@8.12.1)
+      acorn: 8.14.0
+      acorn-jsx: 5.3.2(acorn@8.14.0)
       micromark-extension-mdx-expression: 3.0.0
       micromark-extension-mdx-jsx: 3.0.1
       micromark-extension-mdx-md: 2.0.0
@@ -4444,11 +4399,17 @@ snapshots:
     dependencies:
       mimic-function: 5.0.1
 
+  oniguruma-to-es@0.4.1:
+    dependencies:
+      emoji-regex-xs: 1.0.0
+      regex: 5.0.2
+      regex-recursion: 4.2.1
+
   oniguruma-to-js@0.4.3:
     dependencies:
       regex: 4.3.2
 
-  ora@8.1.0:
+  ora@8.1.1:
     dependencies:
       chalk: 5.3.0
       cli-cursor: 5.0.0
@@ -4520,22 +4481,16 @@ snapshots:
 
   path-exists@4.0.0: {}
 
-  path-to-regexp@6.2.2: {}
-
   pathe@1.1.2: {}
 
   pend@1.2.0: {}
 
-  periscopic@3.1.0:
-    dependencies:
-      '@types/estree': 1.0.5
-      estree-walker: 3.0.3
-      is-reference: 3.0.2
-
   picocolors@1.1.0: {}
 
   picomatch@2.3.1: {}
 
+  picomatch@4.0.2: {}
+
   pify@4.0.1: {}
 
   pkg-dir@4.2.0:
@@ -4585,8 +4540,50 @@ snapshots:
     dependencies:
       picomatch: 2.3.1
 
+  readdirp@4.0.2: {}
+
+  recma-build-jsx@1.0.0:
+    dependencies:
+      '@types/estree': 1.0.5
+      estree-util-build-jsx: 3.0.1
+      vfile: 6.0.3
+
+  recma-jsx@1.0.0(acorn@8.14.0):
+    dependencies:
+      acorn-jsx: 5.3.2(acorn@8.14.0)
+      estree-util-to-js: 2.0.0
+      recma-parse: 1.0.0
+      recma-stringify: 1.0.0
+      unified: 11.0.5
+    transitivePeerDependencies:
+      - acorn
+
+  recma-parse@1.0.0:
+    dependencies:
+      '@types/estree': 1.0.5
+      esast-util-from-js: 2.0.1
+      unified: 11.0.5
+      vfile: 6.0.3
+
+  recma-stringify@1.0.0:
+    dependencies:
+      '@types/estree': 1.0.5
+      estree-util-to-js: 2.0.0
+      unified: 11.0.5
+      vfile: 6.0.3
+
+  regex-recursion@4.2.1:
+    dependencies:
+      regex-utilities: 2.3.0
+
+  regex-utilities@2.3.0: {}
+
   regex@4.3.2: {}
 
+  regex@5.0.2:
+    dependencies:
+      regex-utilities: 2.3.0
+
   rehype-parse@9.0.0:
     dependencies:
       '@types/hast': 3.0.4
@@ -4599,11 +4596,13 @@ snapshots:
       hast-util-raw: 9.0.4
       vfile: 6.0.3
 
-  rehype-stringify@10.0.0:
+  rehype-recma@1.0.0:
     dependencies:
+      '@types/estree': 1.0.5
       '@types/hast': 3.0.4
-      hast-util-to-html: 9.0.3
-      unified: 11.0.5
+      hast-util-to-estree: 3.1.0
+    transitivePeerDependencies:
+      - supports-color
 
   rehype-stringify@10.0.1:
     dependencies:
@@ -4611,11 +4610,11 @@ snapshots:
       hast-util-to-html: 9.0.3
       unified: 11.0.5
 
-  rehype@13.0.1:
+  rehype@13.0.2:
     dependencies:
       '@types/hast': 3.0.4
       rehype-parse: 9.0.0
-      rehype-stringify: 10.0.0
+      rehype-stringify: 10.0.1
       unified: 11.0.5
 
   remark-gfm@4.0.0:
@@ -4645,14 +4644,6 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  remark-rehype@11.1.0:
-    dependencies:
-      '@types/hast': 3.0.4
-      '@types/mdast': 4.0.4
-      mdast-util-to-hast: 13.2.0
-      unified: 11.0.5
-      vfile: 6.0.3
-
   remark-rehype@11.1.1:
     dependencies:
       '@types/hast': 3.0.4
@@ -4786,15 +4777,6 @@ snapshots:
       '@img/sharp-win32-x64': 0.33.5
     optional: true
 
-  shiki@1.17.7:
-    dependencies:
-      '@shikijs/core': 1.17.7
-      '@shikijs/engine-javascript': 1.17.7
-      '@shikijs/engine-oniguruma': 1.17.7
-      '@shikijs/types': 1.17.7
-      '@shikijs/vscode-textmate': 9.2.2
-      '@types/hast': 3.0.4
-
   shiki@1.22.0:
     dependencies:
       '@shikijs/core': 1.22.0
@@ -4804,6 +4786,15 @@ snapshots:
       '@shikijs/vscode-textmate': 9.3.0
       '@types/hast': 3.0.4
 
+  shiki@1.23.1:
+    dependencies:
+      '@shikijs/core': 1.23.1
+      '@shikijs/engine-javascript': 1.23.1
+      '@shikijs/engine-oniguruma': 1.23.1
+      '@shikijs/types': 1.23.1
+      '@shikijs/vscode-textmate': 9.3.0
+      '@types/hast': 3.0.4
+
   signal-exit@4.1.0: {}
 
   simple-swizzle@0.2.2:
@@ -4829,12 +4820,6 @@ snapshots:
       is-fullwidth-code-point: 3.0.0
       strip-ansi: 6.0.1
 
-  string-width@5.1.2:
-    dependencies:
-      eastasianwidth: 0.2.0
-      emoji-regex: 9.2.2
-      strip-ansi: 7.1.0
-
   string-width@7.2.0:
     dependencies:
       emoji-regex: 10.4.0
@@ -4866,10 +4851,6 @@ snapshots:
     dependencies:
       inline-style-parser: 0.2.4
 
-  supports-color@5.5.0:
-    dependencies:
-      has-flag: 3.0.0
-
   svgo@3.3.2:
     dependencies:
       '@trysound/sax': 0.2.0
@@ -4891,7 +4872,7 @@ snapshots:
 
   tinyexec@0.3.0: {}
 
-  to-fast-properties@2.0.0: {}
+  tinyexec@0.3.1: {}
 
   to-regex-range@5.0.1:
     dependencies:
@@ -4901,14 +4882,14 @@ snapshots:
 
   trough@2.2.0: {}
 
-  tsconfck@3.1.3(typescript@5.6.2):
+  tsconfck@3.1.4(typescript@5.6.2):
     optionalDependencies:
       typescript: 5.6.2
 
   tslib@2.7.0:
     optional: true
 
-  type-fest@2.19.0: {}
+  type-fest@4.27.0: {}
 
   typesafe-path@0.2.2: {}
 
@@ -4980,9 +4961,9 @@ snapshots:
       unist-util-is: 6.0.0
       unist-util-visit-parents: 6.0.1
 
-  update-browserslist-db@1.1.0(browserslist@4.23.3):
+  update-browserslist-db@1.1.1(browserslist@4.24.2):
     dependencies:
-      browserslist: 4.23.3
+      browserslist: 4.24.2
       escalade: 3.2.0
       picocolors: 1.1.0
 
@@ -5001,7 +4982,7 @@ snapshots:
       '@types/unist': 3.0.3
       vfile-message: 4.0.2
 
-  vite@5.4.6(@types/node@22.5.5)(sass@1.78.0):
+  vite@5.4.11(@types/node@22.5.5)(sass@1.78.0):
     dependencies:
       esbuild: 0.21.5
       postcss: 8.4.47
@@ -5011,48 +4992,48 @@ snapshots:
       fsevents: 2.3.3
       sass: 1.78.0
 
-  vitefu@1.0.2(vite@5.4.6(@types/node@22.5.5)(sass@1.78.0)):
+  vitefu@1.0.3(vite@5.4.11(@types/node@22.5.5)(sass@1.78.0)):
     optionalDependencies:
-      vite: 5.4.6(@types/node@22.5.5)(sass@1.78.0)
+      vite: 5.4.11(@types/node@22.5.5)(sass@1.78.0)
 
-  volar-service-css@0.0.61(@volar/language-service@2.4.5):
+  volar-service-css@0.0.62(@volar/language-service@2.4.10):
     dependencies:
       vscode-css-languageservice: 6.3.1
       vscode-languageserver-textdocument: 1.0.12
       vscode-uri: 3.0.8
     optionalDependencies:
-      '@volar/language-service': 2.4.5
+      '@volar/language-service': 2.4.10
 
-  volar-service-emmet@0.0.61(@volar/language-service@2.4.5):
+  volar-service-emmet@0.0.62(@volar/language-service@2.4.10):
     dependencies:
       '@emmetio/css-parser': 0.4.0
       '@emmetio/html-matcher': 1.3.0
       '@vscode/emmet-helper': 2.9.3
       vscode-uri: 3.0.8
     optionalDependencies:
-      '@volar/language-service': 2.4.5
+      '@volar/language-service': 2.4.10
 
-  volar-service-html@0.0.61(@volar/language-service@2.4.5):
+  volar-service-html@0.0.62(@volar/language-service@2.4.10):
     dependencies:
       vscode-html-languageservice: 5.3.1
       vscode-languageserver-textdocument: 1.0.12
       vscode-uri: 3.0.8
     optionalDependencies:
-      '@volar/language-service': 2.4.5
+      '@volar/language-service': 2.4.10
 
-  volar-service-prettier@0.0.61(@volar/language-service@2.4.5):
+  volar-service-prettier@0.0.62(@volar/language-service@2.4.10):
     dependencies:
       vscode-uri: 3.0.8
     optionalDependencies:
-      '@volar/language-service': 2.4.5
+      '@volar/language-service': 2.4.10
 
-  volar-service-typescript-twoslash-queries@0.0.61(@volar/language-service@2.4.5):
+  volar-service-typescript-twoslash-queries@0.0.62(@volar/language-service@2.4.10):
     dependencies:
       vscode-uri: 3.0.8
     optionalDependencies:
-      '@volar/language-service': 2.4.5
+      '@volar/language-service': 2.4.10
 
-  volar-service-typescript@0.0.61(@volar/language-service@2.4.5):
+  volar-service-typescript@0.0.62(@volar/language-service@2.4.10):
     dependencies:
       path-browserify: 1.0.1
       semver: 7.6.3
@@ -5061,14 +5042,14 @@ snapshots:
       vscode-nls: 5.2.0
       vscode-uri: 3.0.8
     optionalDependencies:
-      '@volar/language-service': 2.4.5
+      '@volar/language-service': 2.4.10
 
-  volar-service-yaml@0.0.61(@volar/language-service@2.4.5):
+  volar-service-yaml@0.0.62(@volar/language-service@2.4.10):
     dependencies:
       vscode-uri: 3.0.8
       yaml-language-server: 1.15.0
     optionalDependencies:
-      '@volar/language-service': 2.4.5
+      '@volar/language-service': 2.4.10
 
   vscode-css-languageservice@6.3.1:
     dependencies:
@@ -5140,9 +5121,9 @@ snapshots:
     dependencies:
       load-yaml-file: 0.2.0
 
-  widest-line@4.0.1:
+  widest-line@5.0.0:
     dependencies:
-      string-width: 5.1.2
+      string-width: 7.2.0
 
   wrap-ansi@7.0.0:
     dependencies:
@@ -5150,10 +5131,10 @@ snapshots:
       string-width: 4.2.3
       strip-ansi: 6.0.1
 
-  wrap-ansi@8.1.0:
+  wrap-ansi@9.0.0:
     dependencies:
       ansi-styles: 6.2.1
-      string-width: 5.1.2
+      string-width: 7.2.0
       strip-ansi: 7.1.0
 
   wrappy@1.0.2: {}
@@ -5204,7 +5185,7 @@ snapshots:
 
   yocto-queue@1.1.1: {}
 
-  zod-to-json-schema@3.23.3(zod@3.23.8):
+  zod-to-json-schema@3.23.5(zod@3.23.8):
     dependencies:
       zod: 3.23.8
 
diff --git a/public/favicon-blue.svg b/public/favicon-blue.svg
new file mode 100644
index 0000000..b85dbf8
--- /dev/null
+++ b/public/favicon-blue.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="blue" viewBox="20 10 88 115">
+    <path d="M50.4 78.5a75.1 75.1 0 0 0-28.5 6.9l24.2-65.7c.7-2 1.9-3.2 3.4-3.2h29c1.5 0 2.7 1.2 3.4 3.2l24.2 65.7s-11.6-7-28.5-7L67 45.5c-.4-1.7-1.6-2.8-2.9-2.8-1.3 0-2.5 1.1-2.9 2.7L50.4 78.5Zm-1.1 28.2Zm-4.2-20.2c-2 6.6-.6 15.8 4.2 20.2a17.5 17.5 0 0 1 .2-.7 5.5 5.5 0 0 1 5.7-4.5c2.8.1 4.3 1.5 4.7 4.7.2 1.1.2 2.3.2 3.5v.4c0 2.7.7 5.2 2.2 7.4a13 13 0 0 0 5.7 4.9v-.3l-.2-.3c-1.8-5.6-.5-9.5 4.4-12.8l1.5-1a73 73 0 0 0 3.2-2.2 16 16 0 0 0 6.8-11.4c.3-2 .1-4-.6-6l-.8.6-1.6 1a37 37 0 0 1-22.4 2.7c-5-.7-9.7-2-13.2-6.2Z" />
+</svg>
diff --git a/public/favicon-dark.svg b/public/favicon-dark.svg
new file mode 100644
index 0000000..69f3ecc
--- /dev/null
+++ b/public/favicon-dark.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="black" viewBox="20 10 88 115">
+    <path d="M50.4 78.5a75.1 75.1 0 0 0-28.5 6.9l24.2-65.7c.7-2 1.9-3.2 3.4-3.2h29c1.5 0 2.7 1.2 3.4 3.2l24.2 65.7s-11.6-7-28.5-7L67 45.5c-.4-1.7-1.6-2.8-2.9-2.8-1.3 0-2.5 1.1-2.9 2.7L50.4 78.5Zm-1.1 28.2Zm-4.2-20.2c-2 6.6-.6 15.8 4.2 20.2a17.5 17.5 0 0 1 .2-.7 5.5 5.5 0 0 1 5.7-4.5c2.8.1 4.3 1.5 4.7 4.7.2 1.1.2 2.3.2 3.5v.4c0 2.7.7 5.2 2.2 7.4a13 13 0 0 0 5.7 4.9v-.3l-.2-.3c-1.8-5.6-.5-9.5 4.4-12.8l1.5-1a73 73 0 0 0 3.2-2.2 16 16 0 0 0 6.8-11.4c.3-2 .1-4-.6-6l-.8.6-1.6 1a37 37 0 0 1-22.4 2.7c-5-.7-9.7-2-13.2-6.2Z" />
+</svg>
diff --git a/src/components/slides/css-additional-styles/animations.astro b/src/components/slides/css-additional-styles/animations.astro
new file mode 100644
index 0000000..96a5eb4
--- /dev/null
+++ b/src/components/slides/css-additional-styles/animations.astro
@@ -0,0 +1,132 @@
+<section>
+  <section>
+    <h2>Animations</h2>
+  </section>
+
+  <section>
+    <p>Animationen stellen eine Erweiterung zu transitions dar</p>
+    <p>Bei einer Animation kann man mehrere Schritte angeben um die Animation auszuführen</p>
+    <p>Sie lassen komplexere Szenarien zu und müssen nicht auf einen Zustandsübergang von HTML-Attributen warten</p>
+    <p>Sie können "einmalig" oder wiederholend programmiert werden</p>
+  </section>
+
+  <section>
+    <h3>keyframes</h3>
+  </section>
+
+  <section>
+    <p>Eine Animation besteht im Grund aus <code>keyframes</code></p>
+    <p>Sie geben an, zu welchem "Zeitpunkt" in der Animation ein bestimmter CSS-Style "erreicht" wird</p>
+    <p>Wir können keyframes mit den keywords "to" und "from" verwenden um 2 Fixpunkte (Start &amp; Ende) zu erhalten</p>
+    <p>Alternativ können wir auch 0% bis 100% verwenden um die Animation feiner zu steuern</p>
+  </section>
+
+  <section>
+    <pre class="css"><code data-trim data-line-numbers is:raw>
+      @keyframes rotate {
+        from {
+          transform: rotate(0deg);
+        }
+        to {
+          transform: rotate(360deg);
+        }
+      }
+    </code></pre>
+  </section>
+
+  <section>
+    <pre class="css"><code data-trim data-line-numbers is:raw>
+      .animate-rotate {
+        animation-name: rotate;
+        animation-duration: 666ms;
+        animation-iteration-count: infinite;
+        animation-timing-function: linear;
+      }
+    </code></pre>
+  </section>
+
+  <section class="apply-styles animation">
+    <div class="center">
+      <div class="loading animate-rotate"></div>
+    </div>
+  </section>
+
+  <section>
+    <p><code>animation-name</code></p>
+    <p>Dies ist der Name der über die Keyframes vergeben wurde</p>
+  </section>
+
+  <section>
+    <p><code>animation-duration</code></p>
+    <p>Gibt an, wie lange ein Animationsdurchlauf (from -> to, beziehungsweise von 0% zu 100%) dauern soll.</p>
+    <p>Kann in einer Zeiteinheit wie 500ms oder 0.5s angegeben werden.</p>
+  </section>
+
+  <section>
+    <p><code>animation-iteration-count</code></p>
+    <p>Gibt an, wie oft die Animation abgespielt werden soll, bis der Endzustand dauerhaft angezeigt wird.</p>
+    <p>Verwenden sie <code>infinite</code>, damit die Animation nie endet</p>
+  </section>
+
+  <section>
+    <p><code>animation-timing-duration</code></p>
+    <p>Ähnlich zur Timing-Funktion bei transitions. Hier kann auch wieder aus vorhandenen keywords oder aus speziellen Funktionen wie <code>cubic-bezier</code> eine eigene Timing-Funktion angegeben werden.</p>
+  </section>
+
+  <section>
+    <p><code>animation-delay</code></p>
+    <p>Zur Angabe wie lange das Abspielen einer Animation herausgezögert werden soll</p>
+  </section>
+
+  <section>
+    <p><code>animation-direction</code></p>
+    <p>Nutzen Sie <code>reverse</code> um die Animation rückwärts abzuspielen (Effektiv werden from und to vertauscht)</p>
+  </section>
+  
+  <section>
+    <p><code>alternate</code></p>
+    <p>Kann dazu verwendet werden um eine Animation zwischen 0% und 100% und dann wieder zu 0% abzuspielen.</p>
+  </section>
+
+  <section>
+    <pre class="css"><code data-trim data-line-numbers is:raw>
+      @keyframes alternating {
+        0% {
+          width: 20%;
+          left: 0;
+        }
+        50% {
+          width: 38%;
+        }
+        100% {
+          width: 20%;
+          left: 80%;
+        }
+      }
+    </code></pre>
+  </section>
+
+  <section>
+    <pre class="css"><code data-trim data-line-numbers is:raw>
+      .alternating-bar {
+        position: absolute;
+        border-radius: 50px;
+        height: 100px;
+        
+        left: 0;
+        width: 20%;
+        background: navy;
+  
+        animation: alternating 3s ease-in-out infinite alternate;
+      }
+    </code></pre>
+  </section>
+
+  <section class="apply-styles animation">
+    <div class="center">
+      <div class="alternating-bar">
+
+      </div>
+    </div>
+  </section>
+</section>
\ No newline at end of file
diff --git a/src/components/slides/css-additional-styles/background.astro b/src/components/slides/css-additional-styles/background.astro
new file mode 100644
index 0000000..3352d61
--- /dev/null
+++ b/src/components/slides/css-additional-styles/background.astro
@@ -0,0 +1,274 @@
+<section>
+  <section>
+    <h2>Background</h2>
+  </section>
+
+  <section>
+    <p>Bisher haben wir zur Gestaltung von Hintergründen das Style-Attribut <code>background-color</code> kennen gelernt.</p>
+    <p>Es gibt aber noch ein Umfangreicheres Angebot um einen Hintergrund zu gestallten: <code>background</code></p>
+  </section>
+
+  <section class="apply-styles">
+    <p>Beginnen wir erstmal einfach, wir können wie gewohnt Farben vergeben:</p>
+    <pre class="css"><code data-trim data-line-numbers is:raw>
+      .bg-color {
+        background: darkkhaki;
+      }
+    </code></pre>
+    <div class="bg">
+      <div class="container bg-color"></div>
+    </div>
+  </section>
+
+  <section class="apply-styles">
+    <p>Wir können aber auch direkt Bilder von CSS aus laden und anzeigen:</p>
+    <pre class="css"><code data-trim data-line-numbers is:raw>
+      .bg-image {
+        background: url('cat.png');
+      }
+    </code></pre>
+
+    <div class="bg">
+      <div class="container bg-img"></div>
+    </div>
+  </section>
+
+  <section class="apply-styles">
+    <p>Nun sehen wir, das Bild ist größer als der Container der das Bild anzeigen soll.</p>
+    <p>Das kann man aber beheben mit dem Attribut <code>background-size</code></p>
+    <pre class="css"><code data-trim data-line-numbers is:raw>
+      .bg-cover {
+        background-size: cover;
+      }
+    </code></pre>
+    <div class="bg">
+      <div class="container bg-img bg-cover"></div>
+    </div>
+  </section>
+
+  <section>
+    <p>Weitere Optionen für <code>background-size</code>:</p>
+    <ul>
+      <li>contain</li>
+      <li>&lt;width&gt; (height: auto)</li>
+      <li>&lt;width&gt; &lt;height&gt;</li>
+    </ul>
+  </section>
+
+  <section class="apply-styles">
+    <p><code>background-size: contain</code></p>
+    <div class="bg">
+      <div class="container bg-img bg-contain"></div>
+    </div>
+  </section>
+
+  <section>
+    <p>Mit contain sehen wir, dass das Bild sich zu wiederholen scheint.</p>
+    <p>Das ist ein "Feature" von <code>background</code>, eines das wir steuern können.</p>
+    <pre class="css"><code data-trim data-line-numbers is:raw>
+      .bg-no-repeat {
+        background-repeat: no-repeat;
+      }
+    </code></pre>
+  </section>
+
+  <section class="apply-styles">
+    <p>Hat es Funktioniert?</p>
+    <div class="bg">
+      <div class="container bg-img bg-contain bg-no-repeat"></div>
+    </div>
+  </section>
+
+  <section class="apply-styles">
+    <p>Testen wir es mit einem weiteren Feature aus: Mehrere Backgrounds:</p>
+    <pre class="css"><code data-trim data-line-numbers is:raw>
+      .bg-multi {
+        background: url("/images/cat.png"), orange;
+        background-repeat: no-repeat;
+        background-size: contain;
+        height: 600px;
+      }
+    </code></pre>
+    <div class="bg">
+      <div class="container bg-multi"></div>
+    </div>
+  </section>
+
+  <section>
+    <p><code>background-repeat</code> kann alternativ 3 andere Werte annehmen:</p>
+    <ul>
+      <li>repeat (in beide Richtungen)</li>
+      <li>repeat-x (entlang der X-Achse)</li>
+      <li>repeat-y (entlang der Y-Achse)</li>
+    </ul>
+  </section>
+
+  <section>
+    <p>Positionierung des Hintergrundes mit <code>background-position</code></p>
+    <p>Das Bild kann im Container frei bewegt werden, ein Überhang wird "abgeschnitten", wie man es auch bisher gesehen hat.</p>
+    <pre class="css"><code data-trim data-line-numbers is:raw>
+      .bg-center {
+        background-position: center;
+      }
+    </code></pre>
+  </section>
+
+  <section class="apply-styles">
+    <div class="bg">
+      <div class="container bg-center"></div>
+    </div>
+  </section>
+
+  <section class="apply-styles">
+    <pre class="css"><code data-trim data-line-numbers is:raw>
+      .bg-top-right {
+        background-position: top right;
+      }
+    </code></pre>
+    <div class="bg">
+      <div class="container bg-top-right"></div>
+    </div>
+  </section>
+
+  <section class="apply-styles">
+    <pre class="css"><code data-trim data-line-numbers is:raw>
+      .bg-20-80 {
+        background-position: 20% 80%;
+      }
+    </code></pre>
+    <div class="bg">
+      <div class="container bg-20-80"></div>
+    </div>
+  </section>
+
+  <section>
+    <p>CSS wäre nicht CSS, wenn wir das nicht alles in einer Regel vereinen können:</p>
+    <pre class="css"><code data-trim data-line-numbers is:raw>
+      .bg-easy {
+        background:
+          repeat-y 20% 80%/200px 200px url("/images/cat.png"),
+          orange;
+      }
+    </code></pre>
+  </section>
+
+  <section class="apply-styles">
+    <div class="bg">
+      <div class="container bg-easy"></div>
+    </div>
+  </section>
+
+  <section>
+    <p>Hintergründe in Bunt</p>
+    <p>Mithilfe von CSS-Funktionen</p>
+  </section>
+
+  <section>
+    <p>CSS bietet einige Funktionen um Gradienten-Hintergründe zu erstellen:</p>
+    <ul style="font-family: monospace;">
+      <li>(repeating)-linear-gradient</li>
+      <li>(repeating)-radial-gradient</li>
+      <li>(repeating)-conic-gradient</li>
+    </ul>
+  </section>
+
+  <section>
+    <p>Diese können in beliebiger Art und Weise kombiniert werden, um Eindrucksvolle Muster zu erstellen.</p>
+  </section>
+
+  <section class="apply-styles">
+    <p>Fangen wir einfach an, mit der Funktion <code>linear-gradient</code>, geben wir an in welche Richtung der Gradient wandern soll, welche Farbe beginnt und welche Endet:</p>
+    <pre class="css"><code data-trim data-line-numbers is:raw>
+      .linear-rbp {
+        background: linear-gradient(to right, blue, pink);
+      }
+    </code></pre>
+    <div class="bg">
+      <div class="container gradients linear-rbp"></div>
+    </div>
+  </section>
+
+  <section class="apply-styles">
+    <p>Wir können anstatt einer genauen Richtungsangabe auch eine Grad-Angabe machen</p>
+    <pre class="css"><code data-trim data-line-numbers is:raw>
+      .linear-72bp {
+        background: linear-gradient(72deg, blue, pink);
+      }
+    </code></pre>
+    <div class="bg">
+      <div class="container gradients linear-72bp"></div>
+    </div>
+  </section>
+
+  <section class="apply-styles">
+    <p>Es können auch beliebig viele Farben angegeben werden</p>
+    <pre class="css"><code data-trim data-line-numbers is:raw>
+      .linear-rainbow {
+        background: linear-gradient(
+          45deg, red, orange, yellow, green, blue, violet, pink
+        );
+      }
+    </code></pre>
+    <div class="bg">
+      <div class="container gradients linear-rainbow"></div>
+    </div>
+  </section>
+
+  <section class="apply-styles">
+    <p>Zu guter letzt, können wir auch die Breite der einzelnen Farb-Gradiente festlegen</p>
+    <pre class="css"><code data-trim data-line-numbers is:raw>
+      .linear-stops {
+        background: linear-gradient(
+          to bottom, darkgoldenrod -500px, black 350px, darkgoldenrod
+        );
+      }
+    </code></pre>
+    <div class="bg">
+      <div class="container gradients linear-stops"></div>
+    </div>
+  </section>
+
+  <section class="apply-styles">
+    <p>Schauen wir uns kurz die anderen beiden Gradienten-Varianten an:</p>
+    <pre class="css"><code data-trim data-line-numbers is:raw>
+      .radial {
+        background: radial-gradient(red 10px, yellow 30%, royalblue 50%);
+        border-radius: 50%;
+      }
+    </code></pre>
+    <div class="bg">
+      <div class="container gradients radial"></div>
+    </div>
+  </section>
+
+  <section class="apply-styles">
+    <p>Und <code>conic-gradient</code>'s</p>
+    <pre class="css"><code data-trim data-line-numbers is:raw>
+      .conic {
+        background: conic-gradient(
+          from -45deg, red, blue, yellow, green
+        ); 
+      }
+    </code></pre>
+    <div class="bg">
+      <div class="container gradients conic"></div>
+    </div>
+  </section>
+
+  <section class="apply-styles">
+    <p>Die zuvor "Repeating" Varianten, lassen es wie vielleicht schon denkbar zu, die Gradienten über einen größeren Bildschirmbereich wiederholend "zu malen"</p>
+    <pre class="css"><code data-trim data-line-numbers is:raw>
+      .conic-repeating {
+        background: repeating-radial-gradient(
+          black,
+          black 20px,
+          white 20px,
+          white 40px,
+        );
+      }
+    </code></pre>
+    <div class="bg">
+      <div class="container gradients conic-repeating"></div>
+    </div>
+  </section>
+</section>
\ No newline at end of file
diff --git a/src/components/slides/css-additional-styles/css-functions.astro b/src/components/slides/css-additional-styles/css-functions.astro
new file mode 100644
index 0000000..f755b82
--- /dev/null
+++ b/src/components/slides/css-additional-styles/css-functions.astro
@@ -0,0 +1,68 @@
+<section>
+  <section>
+    <h2>CSS-Functions</h2>
+  </section>
+
+  <section>
+    <p>CSS bietet CSS-Funktionen, um uns den Alltag in bestimmten Situationen zu erleichtern.</p>
+  </section>
+
+  <section>
+    <h3>calc</h3>
+  </section>
+
+  <section>
+    <p>Die <code>calc</code>-Funktion hilft uns mit numerischen Einheiten (Längen, Zeit, Winkel, Prozente, etc) zu arbeiten.</p>
+    <p>Mithilfe dieser können wir auch zwischen Einheiten eines gleichen "Typs" rechnen</p>
+
+    <pre class="css"><code data-trim data-line-numbers is:raw>
+      width: calc(10px + 100px);
+      width: calc(50% - 30px);
+      width: calc(5rem * 3);
+    </code></pre>
+  </section>
+
+  <section>
+    <h3>min &amp; max</h3>
+  </section>
+
+  <section>
+    <p>Mit diesen beiden Funktionen kann jeweils der niedrigste oder höchste Wert aus einer Liste von Werten verwendet werden.</p>
+    <p>Dies ist zu großen Teilen für Fluid Layouts (Layouts die auf allen Arten von Display-Größen funktionieren) hilfreich.</p>
+  </section>
+
+  <section>
+    <p>Sorgt dafür, dass das Element mit der entsprechenden Klasse mindestens 200px breit ist, aber größer werden kann, wenn das Display größer als 666px ist (30% von 666px entsprechen 200px)</p>
+    <pre class="css"><code data-trim data-line-numbers is:raw>
+      .min-200-or-30% {
+        width: min(200px, 30%);
+      }
+    </code></pre>
+  </section>
+
+  <section>
+    <h3>clamp</h3>
+  </section>
+
+  <section>
+    <p><code>clamp</code> bildet einen Weg um minimale, maximale und gewünschte Werte zu erreichen.</p>
+  </section>
+
+  <section>
+    <code>clamp(&lt;min&gt; &lt;preferred&gt; &lt;max&gt;)</code>
+  </section>
+
+  <section>
+    <p>Solange es möglich ist, versucht der Browser den <code>preferred</code> Wert zu verwenden.</p>
+    <p>Fällt der präferierte Wert unter das minimum, so wird sichergestellt, dass das minimum verwendet wird.</p>
+    <p>Andersherum gilt dies auch für das maximum.</p>
+  </section>
+
+  <section>
+    <p>Versuche den Wert auf 40% der möglichen Breite zu halten, bleib aber mindestens 200px und maximal 400px breit.</p>
+    <pre class="css"><code data-trim data-line-numbers is:raw>
+      width: clamp(200px, 50%, 400px);
+    </code></pre>
+  </section>
+
+</section>
\ No newline at end of file
diff --git a/src/components/slides/css-additional-styles/filters.astro b/src/components/slides/css-additional-styles/filters.astro
new file mode 100644
index 0000000..9a64e3a
--- /dev/null
+++ b/src/components/slides/css-additional-styles/filters.astro
@@ -0,0 +1,106 @@
+<section>
+  <section>
+    <h2>Filter</h2>
+  </section>
+
+  <section>
+    <p>Mithilfe von Filtern können wir grafische Effekt auf Elemente anwenden.</p>
+    <p>Die Filter können miteinander kombiniert werden. Wir verwenden auch hierfür CSS-Funktionen</p>
+  </section>
+
+  <section class="apply-styles filter">
+    <p>Wir werden folgendes SVG-Bild: verwenden</p>
+    <img src="/favicon-blue.svg" alt="">
+  </section>
+  
+  <section>
+    <h3>blur</h3>
+  </section>
+  
+  <section class="apply-styles filter">
+    <pre class="css"><code data-trim data-line-numbers is:raw>
+      .blur {
+        filter: blur(10px);
+      }
+    </code></pre>
+    <img src="/favicon-blue.svg" alt="" class="blur">
+  </section>
+
+  <section>
+    <h3>contrast</h3>
+  </section>
+
+  <section class="apply-styles filter">
+    <pre class="css"><code data-trim data-line-numbers is:raw>
+      .contrast {
+        filter: contrast(0.5);
+      }
+    </code></pre>
+    <img src="/favicon-blue.svg" alt="" class="contrast">
+  </section>
+
+  <section>
+    <h3>grayscale</h3>
+  </section>
+
+  <section class="apply-styles filter">
+    <pre class="css"><code data-trim data-line-numbers is:raw>
+      .gray {
+        filter: grayscale(0.7);
+      }
+    </code></pre>
+    <img src="/favicon-blue.svg" alt="" class="gray">
+  </section>
+
+  <section>
+    <h3>drop-shadow</h3>
+  </section>
+
+  <section class="apply-styles filter">
+    <pre class="css"><code data-trim data-line-numbers is:raw>
+      .drop-shadow {
+        filter: drop-shadow(5px 5px 10px red);
+      }
+    </code></pre>
+    <img src="/favicon-blue.svg" alt="" class="drop-shadow">
+  </section>
+
+  <section>
+    <h3>hue-rotate</h3>
+  </section>
+
+  <section class="apply-styles filter">
+    <pre class="css"><code data-trim data-line-numbers is:raw>
+      .hue-rotate {
+        filter: hue-rotate(90deg);
+      }
+    </code></pre>
+    <img src="/favicon-blue.svg" alt="" class="hue-rotate">
+  </section>
+
+  <section>
+    <h3>opacity</h3>
+  </section>
+
+  <section class="apply-styles filter">
+    <pre class="css"><code data-trim data-line-numbers is:raw>
+      .opaque {
+        filter: opacity(0.3);
+      }
+    </code></pre>
+    <img src="/favicon-blue.svg" alt="" class="opaque">
+  </section>
+
+  <section>
+    <h3>Weitere Filter-Funktionen</h3>
+  </section>
+
+  <section>
+    <ul>
+      <li>brightness</li>
+      <li>invert</li>
+      <li>saturate</li>
+      <li>sepia</li>
+    </ul>
+  </section>
+</section>
\ No newline at end of file
diff --git a/src/components/slides/css-additional-styles/index.astro b/src/components/slides/css-additional-styles/index.astro
new file mode 100644
index 0000000..5821be1
--- /dev/null
+++ b/src/components/slides/css-additional-styles/index.astro
@@ -0,0 +1,542 @@
+---
+import Title from "./title.astro";
+import Animations from "./animations.astro";
+import Background from "./background.astro";
+import CssFunctions from "./css-functions.astro";
+import Filters from "./filters.astro";
+import ListStyles from "./list-styles.astro";
+import Overflow from "./overflow.astro";
+import Positioning from './positioning.astro';
+// import ScrollSnap from "./scroll-snap.astro";
+import Shadows from "./shadows.astro";
+import Specials from "./specials.astro";
+import Transform from "./transform.astro";
+import Transitions from "./transitions.astro";
+import Variables from "./variables.astro";
+import ZIndex from "./z-index.astro";
+---
+
+<div class="slides">
+  <Title />
+  <Background />
+  <ListStyles />
+  <Positioning />
+  <ZIndex />
+  <Overflow />
+  <Shadows />
+  <Transform />
+  <Transitions />
+  <Animations />
+  <!-- <ScrollSnap /> -->
+  <CssFunctions />
+  <Filters />
+  <Variables />
+  <Specials />
+</div>
+
+<style lang="scss" is:global>
+.apply-styles {
+  &.special {
+    .center {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+    .square {
+      width: 250px;
+      height: 250px;
+    }
+    .box {
+      background: linear-gradient(45deg, #00ff8c, #1b5cff);
+    }
+
+    .circle {
+      clip-path: circle(50%);
+    }
+  
+    .clip {
+      font-size: 12rem;
+      font-weight: bold;
+      background-clip: text;
+      color: transparent;
+    }
+
+    .quarter-circle {
+      clip-path: ellipse(100% 100% at 0 100%);
+    }
+
+    .dome {
+      clip-path: path('M0 250 L0,125 C0,-30 250,-30 250,125 L250 250 z');
+    }
+  }
+
+  &.filter {
+    img {
+      height: 40vh;
+    }
+
+    .blur {
+      filter: blur(10px);
+    }
+
+    .contrast {
+      filter: contrast(0.5);
+    }
+
+    .gray {
+      filter: grayscale(0.7);
+    }
+
+    .drop-shadow {
+      filter: drop-shadow(5px 5px 10px red);
+    }
+
+    .hue-rotate {
+      filter: hue-rotate(90deg);
+    }
+
+    .opaque {
+      filter: opacity(0.3);
+    }
+  }
+
+  &.animation {
+    .center {
+      position: relative;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+
+    @keyframes alternating {
+        0% {
+          width: 20%;
+          left: 0;
+        }
+        50% {
+          width: 38%;
+        }
+        100% {
+          width: 20%;
+          left: 80%;
+        }
+      }
+
+    .alternating-bar {
+      position: absolute;
+      border-radius: 50px;
+      height: 100px;
+      
+      left: 0;
+      width: 20%;
+      background: navy;
+
+      animation: alternating 3s ease-in-out infinite alternate;
+    }
+
+    .loading {
+      width: 250px;
+      height: 250px;
+      border-top: 16px solid black;
+      border-left: 16px solid black;
+      border-radius: 50%;
+    }
+
+    .animate-rotate {
+      animation-name: rotate;
+      animation-duration: 666ms;
+      animation-iteration-count: infinite;
+      animation-timing-function: linear;
+    }
+
+    @keyframes rotate {
+      from {
+        transform: rotate(0deg);
+      }
+      to {
+        transform: rotate(360deg);
+      }
+    }
+  }
+
+  &.transition {
+    .container {
+      display: flex;
+      justify-content: center;
+
+      &.grid {
+        display: grid;
+        grid-template-columns: repeat(2, 1fr);
+        gap: 2rem;
+      }
+    }
+    .box {
+      height: 200px;
+      border: 4px solid black;
+      border-radius: 2rem;
+      padding: 2rem;
+    }
+
+    .color {
+      background-color: white;
+      color: black;
+      transition:
+        background-color 250ms linear,
+        color 250ms linear
+      ;
+      
+      &:hover {
+        background-color: black;
+        color: white;
+      }
+    }
+
+    .color-alone {
+      background-color: white;
+      color: black;
+      
+    }
+    .container:hover .color-alone {
+      background-color: black;
+      color: white;
+    }
+
+    .linear {
+      transition: all 1s linear;
+    }
+    .ease-in {
+      transition: all 1s ease-in;
+    }
+    .ease-out {
+      transition: all 1s ease-out;
+    }
+    .ease-in-out {
+      transition: all 1s ease-in-out;
+    }
+  }
+
+  &.transform {
+    .grid {
+      display: grid;
+      grid-template-columns: repeat(3, 1fr);
+      grid-auto-rows: minmax(200px, auto);
+      :nth-child(even) {
+        background-color: #f99;
+      }
+      :nth-child(odd) {
+        background-color: #99f;
+      }
+      div {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+      }
+    }
+
+    .translate {
+      transform: translate(300px, 300px);
+    }
+
+    .scale-up {
+      transform: scale(1.5);
+    }
+
+    .scale-down {
+      transform: scale(0.7);
+    }
+
+    .rotate {
+      transform: rotate(90deg);
+    }
+
+    .skew {
+      transform: skew(30deg, 15deg);
+    }
+
+    .rotate-and-translate {
+      transform: rotate(45deg) translateX(400px);
+      border: red 8px solid;
+    }
+    .translate-and-rotate {
+      transform: translateX(400px) rotate(45deg);
+      border: blue 8px solid;
+    }
+
+    .absolute {
+      position: relative;
+      height: 250px;
+      img {
+        position: absolute;
+        top: 0;
+        left: 0;
+      }
+    }
+  }
+
+  &.shadow {
+    .helper {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+    .box {
+      border: 3px dashed navy;
+      height: 100px;
+      width: 100px;
+    }
+
+    .x-only {
+      box-shadow: 10px 0 0 black;
+    }
+
+    .x-and-y {
+      box-shadow: 10px 10px 0 black;
+    }
+
+    .blurred {
+      box-shadow: 10px 10px 10px black;
+    }
+
+    .very-blurred {
+      box-shadow: 10px 10px 100px black;
+    }
+
+    .spread {
+      box-shadow: 10px 10px 100px 50px black;
+    }
+
+    .inset {
+      box-shadow: 5px 5px 20px black inset;
+    }
+
+    .text {
+      text-shadow: 1px 2px 3px red;
+    }
+  }
+
+  .bg {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    .container {
+      width: 450px;
+      height: 450px;
+    }
+
+    .bg-color {
+      background: darkkhaki;
+    }
+
+    .bg-img {
+      background: url("/images/cat.png");
+    }
+
+    .bg-cover {
+      background-size: cover;
+    }
+
+    .bg-contain {
+      background-size: contain;
+      height: 600px;
+    }
+
+    .bg-no-repeat {
+      background-repeat: no-repeat;
+    }
+
+    .bg-multi {
+      background: url("/images/cat.png"), orange;
+      background-repeat: no-repeat;
+      background-size: contain;
+      height: 600px;
+    }
+
+    .bg-easy {
+      background:
+        repeat-y 20% 80%/200px 200px url("/images/cat.png"),
+        orange;
+    }
+
+    .bg-center {
+      background: url("/images/cat.png"), orange;
+      background-position: center;
+      background-size: 200px 200px;
+      background-repeat: no-repeat;
+    }
+
+    .bg-top-right {
+      background: url("/images/cat.png"), orange;
+      background-position: top right;
+      background-size: 200px 200px;
+      background-repeat: no-repeat;
+    }
+
+    .bg-20-80 {
+      background: url("/images/cat.png"), orange;
+      background-position: 20% 80%;
+      background-size: 200px 200px;
+      background-repeat: no-repeat;
+    }
+
+    .gradients {
+      &.linear-rbp {
+        background: linear-gradient(to right, blue, pink);
+      }
+
+      &.linear-72bp {
+        background: linear-gradient(72deg, blue, pink);
+      }
+
+      &.linear-rainbow {
+        background: linear-gradient(45deg, red, orange, yellow, green, blue, violet, pink);
+      }
+
+      &.linear-stops {
+        background: linear-gradient(
+          to bottom, darkgoldenrod -500px, black 350px, darkgoldenrod
+        );
+      }
+
+      &.radial {
+        background: radial-gradient(red 10px, yellow 30%, royalblue 50%);
+        border-radius: 50%;
+      }
+
+      &.conic {
+        background: conic-gradient(from -45deg, red, blue, yellow, green);
+      }
+
+      &.conic-repeating {
+        background: repeating-radial-gradient(
+          black,
+          black 20px,
+          white 20px,
+          white 40px,
+        );
+      }
+    }
+  }
+
+  .list-styles {
+    .disc {
+      list-style-type: disc;
+    }
+    .circle {
+      list-style-type: circle;
+    }
+    .square {
+      list-style-type: square;
+    }
+    .kannada {
+      list-style-type: kannada;
+    }
+    &.hashtag {
+      list-style: "#";
+    }
+    &.custom {
+      list-style: url("/favicon-dark.svg");
+    }
+  }
+
+  .position {
+    &.relative {
+      position: relative;
+    }
+
+    &.box {
+      background-color: #99f8;
+      height: 500px;
+      border: 2px solid black;
+    }
+
+    .absolute {
+      position: absolute;
+      background-color: #5005;
+    }
+
+    .one, .two, .three {
+      width: 70%;
+      height: 70%;
+      background-color: white;
+    }
+
+    .one {
+      z-index: 1;
+    }
+
+    .two {
+      right: 0;
+    }
+
+    .three {
+      bottom: 0;
+    }
+
+    .top-left {
+      top: 0;
+      left: 0;
+    }
+
+    .wide {
+      width: 100%;
+    }
+
+    &.sticky-container {
+      height: 550px;
+      overflow-y: scroll;
+
+      .ad {
+        background: #f99;
+        height: 200px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+
+        position: sticky;
+        top: 0;
+      }
+
+      .negative-top {
+        top: -100px;
+      }
+
+      .two-way {
+        top: 0;
+        bottom: 0;
+      }
+    }
+  }
+
+  &.pos-tooltip {
+    .element {
+      position: relative;
+      display: inline;
+      border-bottom: 4px dashed black;
+
+      .tooltip {
+        background-color: lightblue;
+        border-radius: 20px;
+
+        width: 200px;
+        padding: 2rem;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
+        position: absolute;
+        top: -300px;
+        // Halbe Breite + padding;
+        left: calc(50% - 132px);
+      }
+    }
+  }
+
+  &.overflow {
+    .element {
+      height: 250px;
+      background-color: #f336;
+    }
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/components/slides/css-additional-styles/list-styles.astro b/src/components/slides/css-additional-styles/list-styles.astro
new file mode 100644
index 0000000..b0546cc
--- /dev/null
+++ b/src/components/slides/css-additional-styles/list-styles.astro
@@ -0,0 +1,59 @@
+<section>
+  <section>
+    <h2>Ein Kurzausflug zurück zu Listen</h2>
+  </section>
+
+  <section>
+    <p>Beim Kennenlernen von HTML haben wir die Elemente <code>ul &amp; li</code> gesehen um Listen darzustellen.</p>
+    <p>Natürlich ist es mit CSS möglich, die "Aufzählungspunkte" die durch den Browser gerendert werden, nach den eigenen Wünschen anzupassen.</p>
+  </section>
+
+  <section>
+    <p>Dafür haben wir eine Liste an vordefinierten "Assets".</p>
+    <p>Für mehr Kreative Freiheit können wir aber ein beliebiges UTF-8 Zeichen verwenden.</p>
+    <p>Und wenn uns das auch nicht reicht, können wir eine eigene Liste an Zeichen erstellen, die die Zeichen "durchgeht"</p>
+  </section>
+
+  <section class="apply-styles">
+    <p>Vordefinierte Symboliken</p>
+    <ul class="list-styles">
+      <li class="disc">disc</li>
+      <li class="circle">circle</li>
+      <li class="square">square</li>
+      <li class="kannada">kannada</li>
+    </ul>
+  </section>
+
+  <section class="apply-styles">
+    <p>Wir können eigene UTF-8 Zeichen verwenden:</p>
+    <pre class="css"><code data-trim data-line-numbers is:raw>
+      .hashtag {
+        list-style: "#";
+      }
+    </code></pre>
+
+    <ul class="list-styles hashtag">
+      <li>Eins</li>
+      <li>Zwei</li>
+      <li>Drei</li>
+      <li>Vier</li>
+      <li>Fünf</li>
+    </ul>
+  </section>
+
+  <section class="apply-styles">
+    <p>Und zu guter letzt: Wir können auch eigene Bilder verwenden</p>
+    <pre class="css"><code data-trim data-line-numbers is:raw>
+      .custom {
+        list-style: url("/favicon-dark.svg");
+      }
+    </code></pre>
+    <ul class="list-styles custom">
+      <li>Eins</li>
+      <li>Zwei</li>
+      <li>Drei</li>
+      <li>Vier</li>
+      <li>Fünf</li>
+    </ul>
+  </section>
+</section>
\ No newline at end of file
diff --git a/src/components/slides/css-additional-styles/overflow.astro b/src/components/slides/css-additional-styles/overflow.astro
new file mode 100644
index 0000000..8f4e6e4
--- /dev/null
+++ b/src/components/slides/css-additional-styles/overflow.astro
@@ -0,0 +1,58 @@
+<section>
+  <section>
+    <h2>Overflow</h2>
+  </section>
+
+  <section>
+    <p>Ohne weitere Einstellungen haben wir gelernt, dass ein Element immer so groß ist, wie der innere Inhalt Platz benötigt.</p>
+    <p>Wir können das Verhalten überschreiben in dem wir dem Element eine feste Höhe geben. Das Verhalten für "overflowing" Inhalt kann dann mit der CSS-Regel <code>overflow</code> beeinflusst werden.</p>
+  </section>
+
+  <section>
+    <pre class="css"><code data-trim data-line-numbers is:raw>
+      .overflow {
+        overflow:
+          | visible
+          | hidden
+          | scroll
+          | auto;
+      }
+    </code></pre>
+  </section>
+
+  <section class="apply-styles overflow">
+    <h3>visible</h3>
+    <p>Inhalt ist außerhalb des restriktierten Elementes sichtbar</p>
+    <p class="element" style="overflow: visible;">
+      Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellat dignissimos corrupti nesciunt delectus totam assumenda, in omnis. Impedit quos quasi, porro reiciendis fugit quibusdam beatae non pariatur deleniti quis in!
+      Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dicta, fugit qui harum ratione cumque, labore odit dolores maxime consequuntur quos aliquid est cum tempore vero? Doloribus facilis molestias ducimus voluptatem?
+    </p>
+  </section>
+
+  <section class="apply-styles overflow">
+    <h3>hidden</h3>
+    <p>Inhalt außerhalb der Element-Box ist nicht mehr sichtbar. Box ist nicht scrollbar.</p>
+    <p class="element" style="overflow: hidden;">
+      Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellat dignissimos corrupti nesciunt delectus totam assumenda, in omnis. Impedit quos quasi, porro reiciendis fugit quibusdam beatae non pariatur deleniti quis in!
+      Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dicta, fugit qui harum ratione cumque, labore odit dolores maxime consequuntur quos aliquid est cum tempore vero? Doloribus facilis molestias ducimus voluptatem?
+    </p>
+  </section>
+
+  <section class="apply-styles overflow">
+    <h3>scroll</h3>
+    <p>Inhalt außerhalb der Element-Box ist nicht mehr sichtbar. Box hat immer eine Scrollbar und kann ggf. gescrolled werden.</p>
+    <p class="element" style="overflow: scroll;">
+      Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellat dignissimos corrupti nesciunt delectus totam assumenda, in omnis. Impedit quos quasi, porro reiciendis fugit quibusdam beatae non pariatur deleniti quis in!
+      Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dicta, fugit qui harum ratione cumque, labore odit dolores maxime consequuntur quos aliquid est cum tempore vero? Doloribus facilis molestias ducimus voluptatem?
+    </p>
+  </section>
+
+  <section class="apply-styles overflow">
+    <h3>auto</h3>
+    <p>Intelligente Automatik. Im Gegensatz zu scroll ist nur dann eine Scrollbar sichtbar, wenn der Inhalt außerhalb der Box des Elementes ist. Inhalt außerhalb ist nicht sichtbar und die Box ist scrollbar</p>
+    <p class="element" style="overflow: auto;">
+      Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellat dignissimos corrupti nesciunt delectus totam assumenda, in omnis. Impedit quos quasi, porro reiciendis fugit quibusdam beatae non pariatur deleniti quis in!
+      Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dicta, fugit qui harum ratione cumque, labore odit dolores maxime consequuntur quos aliquid est cum tempore vero? Doloribus facilis molestias ducimus voluptatem?
+    </p>
+  </section>
+</section>
\ No newline at end of file
diff --git a/src/components/slides/css-additional-styles/positioning.astro b/src/components/slides/css-additional-styles/positioning.astro
new file mode 100644
index 0000000..3026174
--- /dev/null
+++ b/src/components/slides/css-additional-styles/positioning.astro
@@ -0,0 +1,251 @@
+<section>
+  <section>
+    <h2>Positionierung</h2>
+  </section>
+
+  <section>
+    <p>Neben den Layout-Mechaniken des CSS-Grids und der Flexbox haben wir manchmal die notwendigkeit, Elemente präzise innerhalb eines Containers oder des Viewports zu platzieren.</p>
+    <p>Beispiele dafür sind Tooltips, Notifications (oder auch Toast-Messages), Modale und weitere...</p>
+  </section>
+
+  <section>
+    <pre class="css"><code data-trim data-line-numbers is:raw>
+      position:
+        | static
+        | relative
+        | absolute
+        | fixed
+        | sticky;
+    </code></pre>
+  </section>
+
+  <section>
+    <h3>Static</h3>
+  </section>
+
+  <section>
+    <p>Standardmäßig sind alle Elemente in einem Web-Dokument <code>static</code> positioniert.</p>
+    <p>Die Positionierung im gerenderten Dokument verhält sich so, wie wir es bisher kennen gelernt haben.</p>
+  </section>
+
+  <section>
+    <h3>Relative &amp; Absolute</h3>
+  </section>
+
+  <section>
+    <p>Beginnen wir mit dem "wichtigeren" Wert: <code>absolute</code></p>
+    <p>Sobald ein Element als <code>absolute</code> definiert ist, befindet es sich nicht mehr im Normalen Flow des Dokumentes.</p>
+    <p>Die absolute Positionierung lässt sich nun mittels CSS <code>left, right, top, bottom</code> (und <code>z-index</code>) beeinflussen.</p>
+  </section>
+
+  <section>
+    <p>Ein Absolut positioniertes Elementes orientiert sich dabei in einem Relativ platzierten Element. Existiert keins, wird es frei innerhalb des Dokumentes positioniert (document-root).</p>
+    <pre class="css"><code data-trim data-line-numbers is:raw>
+      .relative {
+        position: relative;
+      }
+  
+      .box {
+        background-color: #99f8;
+        height: 500px;
+        border: 2px solid black;
+      }
+  
+      .absolute {
+        position: absolute;
+        background-color: #5005;
+      }
+    </code></pre>
+  </section>
+
+  <section class="apply-styles">
+    <div class="position relative box">
+      Ich befinde mich in einem relativen Container!
+      <div class="absolute">
+        Ich bin absolute positioniert!
+      </div>
+    </div>
+  </section>
+
+  <section>
+    <p>Innerhalb des relativen Containers versucht der Browser den Inhalt immernoch lesbar anzuzeigen. Wir können das Verhalten (die Positionierung) nun "überschreiben"</p>
+    <pre class="css"><code data-trim data-line-numbers is:raw>
+      .top-left {
+        top: 0;
+        left: 0;
+      }
+    </code></pre>
+  </section>
+
+  <section class="apply-styles">
+    <div class="position relative box">
+      Ich befinde mich in einem relativen Container!
+      <div class="absolute top-left">
+        Ich bin absolute positioniert!
+      </div>
+    </div>
+  </section>
+
+  <section>
+    <p>Wir sehen auch, dass sich das absolute Element wie ein Inline-Element verhält: es nimmt nur den Platz ein der den Content benötigt.</p>
+    <p>Wir können aber auch diese Werte weiterhin modifizieren.</p>
+    <pre class="css"><code data-trim data-line-numbers is:raw>
+      .wide {
+        width: 100%;
+      }
+    </code></pre>
+  </section>
+
+  <section class="apply-styles">
+    <div class="position relative box">
+      Ich befinde mich in einem relativen Container!
+      <div class="absolute wide">
+        Ich bin absolute positioniert! (und 100% breit!)
+      </div>
+    </div>
+  </section>
+
+  <section>
+    <p>Ein klassischer Fall: Das Tooltip</p>
+  </section>
+
+  <section>
+    <p>Das HTML:</p>
+    <pre class="html"><code data-trim data-line-numbers>
+      &lt;div class="element"&gt;
+        DHBW
+        &lt;div class="tooltip"&gt;
+          Duale Hochschule Baden Württemberg
+        &lt;/div&gt;
+      &lt;/div&gt;
+    </code></pre>
+  </section>
+
+  <section>
+    <p>Das CSS</p>
+    <pre class="css"><code data-trim data-line-numbers is:raw>
+      .element {
+        position: relative;
+        display: inline;
+        border-bottom: 4px dashed black;
+      }
+
+      .tooltip {
+        background-color: lightblue;
+        border-radius: 20px;
+
+        width: 200px;
+        padding: 2rem;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
+        position: absolute;
+        top: -300px;
+        /* Halbe Breite + padding */
+        left: calc(50% - 132px);
+      }
+    </code></pre>
+  </section>
+
+  <section class="apply-styles pos-tooltip">
+    <div class="element">
+      DHBW
+      <div class="tooltip">
+        Duale Hochschule Baden Württemberg
+      </div>
+    </div>
+  </section>
+
+  <section>
+    <p>Wir sehen auch relativ schnell bei absoluten Elementen, dass deutlich mehr CSS notwendig wird und wir mehr Kalkulationen miteinbeziehen müssen um ein Absolutes Element zentriert darzustellen.</p>
+    <p>Besonders die korrekte Platzierung ist ein Feature in der Web-Entwicklung das durch den Browser stark vereinfacht wird.</p>
+  </section>
+
+  <section>
+    <h3>Fixed</h3>
+  </section>
+
+  <section>
+    <p>Elemente die mit <code>fixed</code> positioniert werden, werden Innerhalb des Viewports "fixiert" platziert.</p>
+    <p>Das Element befindet sich dann dauerhaft an der festgelegten Position. Scrollen durch den User beeinflusst die Position nicht, der Inhalt wird immer an der gleichen Stelle stehen bleiben</p>
+    <p>Aufgrund der "persistenz" kann aber hier in den Folien kein Beispiel gezeigt werden.</p>
+  </section>
+
+  <section>
+    <p><code>fixed</code> Elemente werden wie auch schon bei absolut positioniert Elementen durch <code>top, bottom, left, right</code> beeinflusst.</p>
+  </section>
+
+  <section>
+    <h3>Sticky</h3>
+  </section>
+
+  <section>
+    <p>Sticky Elemente sind ein tolles "Convenience Feature" dass es in CSS gibt.</p>
+    <p>Die Positionierung sorgt dafür, dass Elemente in einem scrollbaren Container an einer spezifizierten Stelle "kleben" bleiben.</p>
+  </section>
+
+  <section class="apply-styles">
+    <div class="position sticky-container">
+      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Hic quod, quas aperiam ea nihil quam a, repellendus sunt ratione aut molestiae expedita repudiandae temporibus labore, beatae dolorem deserunt voluptas! Optio.</p>
+      <div class="ad">Hier könnte Ihre Werbung stehen!</div>
+      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Officia laborum qui amet reprehenderit magni natus vel sapiente tempora ab aliquam iure fugiat commodi consequuntur iusto, est soluta iste! Sed, dolor?</p>
+      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae, vitae enim earum nam similique beatae mollitia illum incidunt quibusdam officia sunt quaerat quos at sequi, porro voluptatibus corrupti omnis provident!</p>
+      <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Incidunt voluptatibus nulla beatae, quaerat excepturi nesciunt perspiciatis optio sit, et eos exercitationem possimus porro expedita. Vitae, et? Soluta dolor incidunt iusto.</p>
+    </div>
+  </section>
+
+  <section>
+    <pre class="css"><code data-trim data-line-numbers is:raw>
+      .container {
+        height: 550px;
+        overflow-y: scroll;
+  
+        .sticky-ad {
+          background: #f99;
+          height: 200px;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+  
+          position: sticky;
+          top: 0;
+        }
+      }
+    </code></pre>
+  </section>
+
+  <section>
+    <p>Zwingend zur Definition von "sticky", muss auch angegeben "wann" der Container "gesticked" werden soll. In diesem Beispiel wurde das durch <code>top: 0;</code> definiert.</p>
+    <p>Damit wurde dem Browser mitgeteilt, dass das Element am oberen Rand des Scrollbaren Containers "gesticked" werden soll.</p>
+  </section>
+  
+  <section>
+    <p>Negative Sorgen dafür das der Container ein Stück weit mit-scrollt bis er sticky wird</p>
+    <p><code>top: -100px;</code></p>
+  </section>
+
+  <section class="apply-styles">
+    <div class="position sticky-container">
+      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Hic quod, quas aperiam ea nihil quam a, repellendus sunt ratione aut molestiae expedita repudiandae temporibus labore, beatae dolorem deserunt voluptas! Optio.</p>
+      <div class="ad negative-top">Hier könnte Ihre Werbung stehen!</div>
+      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Officia laborum qui amet reprehenderit magni natus vel sapiente tempora ab aliquam iure fugiat commodi consequuntur iusto, est soluta iste! Sed, dolor?</p>
+      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae, vitae enim earum nam similique beatae mollitia illum incidunt quibusdam officia sunt quaerat quos at sequi, porro voluptatibus corrupti omnis provident!</p>
+      <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Incidunt voluptatibus nulla beatae, quaerat excepturi nesciunt perspiciatis optio sit, et eos exercitationem possimus porro expedita. Vitae, et? Soluta dolor incidunt iusto.</p>
+    </div>
+  </section>
+
+  <section>
+    <p>Wir können auch sowohl <code>top</code> als auch <code>bottom</code> auf <code>0</code> setzten, um den Container in beide Richtungen sticky zu machen.</p>
+  </section>
+
+  <section class="apply-styles">
+    <div class="position sticky-container">
+      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Hic quod, quas aperiam ea nihil quam a, repellendus sunt ratione aut molestiae expedita repudiandae temporibus labore, beatae dolorem deserunt voluptas! Optio.</p>
+      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Officia laborum qui amet reprehenderit magni natus vel sapiente tempora ab aliquam iure fugiat commodi consequuntur iusto, est soluta iste! Sed, dolor?</p>
+      <div class="ad two-way">Hier könnte Ihre Werbung stehen!</div>
+      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae, vitae enim earum nam similique beatae mollitia illum incidunt quibusdam officia sunt quaerat quos at sequi, porro voluptatibus corrupti omnis provident!</p>
+      <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Incidunt voluptatibus nulla beatae, quaerat excepturi nesciunt perspiciatis optio sit, et eos exercitationem possimus porro expedita. Vitae, et? Soluta dolor incidunt iusto.</p>
+    </div>
+  </section>
+</section>
\ No newline at end of file
diff --git a/src/components/slides/css-additional-styles/scroll-snap.astro b/src/components/slides/css-additional-styles/scroll-snap.astro
new file mode 100644
index 0000000..88197f6
--- /dev/null
+++ b/src/components/slides/css-additional-styles/scroll-snap.astro
@@ -0,0 +1,9 @@
+<section>
+  <section>
+    <h2>Scroll Snap</h2>
+  </section>
+
+  <section>
+    <p></p>
+  </section>
+</section>
\ No newline at end of file
diff --git a/src/components/slides/css-additional-styles/shadows.astro b/src/components/slides/css-additional-styles/shadows.astro
new file mode 100644
index 0000000..d9a501d
--- /dev/null
+++ b/src/components/slides/css-additional-styles/shadows.astro
@@ -0,0 +1,130 @@
+<section>
+  <section>
+    <h2>Schatten</h2>
+  </section>
+
+  <section>
+    <p>Im User Interface Design werden Schattierungen von Elementen dazu verwendet um eine visuelle Tiefe zu erzeugen (abgegrenzt zu Flat-Design)</p>
+  </section>
+
+  <section>
+    <h3>Box-Shadow</h3>
+  </section>
+
+  <section>
+    <p>Wie der Name erahnen lässt, erzeugt der Box-Shadow eine Schattierung um die Box des Selektierten HTML-Elementes.</p>
+    <p>Die "einzige" Beeinflussung kann höchstens durch <code>border0-radius</code> hervorgerufen werden.</p>
+  </section>
+
+  <section>
+    <pre class="css"><code data-trim data-line-numbers is:raw>
+      .shadow {
+        box-shadow:
+          &lt;offset-x&gt;
+          &lt;offset-y&gt; 
+          &lt;blur-radius&gt; /* optional */
+          &lt;spread-radius&gt; /* optional */
+          &lt;color&gt;
+          inset; /* optional */ 
+      }
+    </code></pre>
+  </section>
+
+  <section class="apply-styles shadow">
+    <p><code>offset-x</code> bestimmt, in welche Richtung der X-Achse die Schattierung erzeugt werden soll</p>
+    <pre class="css"><code data-trim data-line-numbers is:raw>
+      .only-x {
+        box-shadow: 10px 0 0 black;
+      }
+    </code></pre>
+    <div class="helper">
+      <div class="box x-only">
+      </div>
+    </div>
+  </section>
+
+  <section class="apply-styles shadow">
+    <p><code>offset-y</code> bestimmt die Schattierung entlang der Y-Achse</p>
+    <pre class="css"><code data-trim data-line-numbers is:raw>
+      .x-and-y {
+        box-shadow: 10px 10px 0 black;
+      }
+    </code></pre>
+    <div class="helper">
+      <div class="box x-and-y"></div>
+    </div>
+  </section>
+
+  <section class="apply-styles shadow">
+    <p><code>blur</code> erzeugt ein weich-machen der Schattierung</p>
+    <pre class="css"><code data-trim data-line-numbers is:raw>
+      .blurred {
+        box-shadow: 10px 10px 10px black;
+      }
+    </code></pre>
+
+    <div class="helper">
+      <div class="box blurred"></div>
+    </div>
+  </section>
+
+  <section class="apply-styles shadow">
+    <p>Je höher der <code>blur</code>-Wert ist, umso "größer" und weicher wird auch die Schattierung:</p>
+    <pre class="css"><code data-trim data-line-numbers is:raw>
+      .very-blurred {
+        box-shadow: 10px 10px 100px black;
+      }
+    </code></pre>
+    <div class="helper">
+      <div class="box very-blurred"></div>
+    </div>
+  </section>
+
+  <section class="apply-styles shadow">
+    <p>Diesen <code>spread</code> erreichen wir aber auch durch den 4 Nummerischen Wert den man angeben kann:</p>
+    <pre class="css"><code data-trim data-line-numbers is:raw>
+      .spread {
+        box-shadow: 10px 10px 100px 50px black;
+      }
+    </code></pre>
+    <div class="helper">
+      <div class="box spread"></div>
+    </div>
+  </section>
+
+  <section>
+    <p>In den meisten Fällen ist der Spread-Wert weniger genutzt</p>
+  </section>
+
+  <section class="apply-styles shadow">
+    <p>Zu guter letzt: Wir können die Schattierung auch nach innen kehren, indem wir das keyword <code>inset</code> verwenden</p>
+    <pre class="css"><code data-trim data-line-numbers is:raw>
+      .inset {
+        box-shadow: 5px 5px 20px black inset;
+      }
+    </code></pre>
+    <div class="helper">
+      <div class="box inset"></div>
+    </div>
+  </section>
+
+  <section>
+    <h3>Text-Shadow</h3>
+  </section>
+
+  <section class="apply-styles shadow">
+    <p>Parallel zum BOX-Shadow, können wir auch eine Text-Schattierung erzeugen, die Syntax ist gleich, kennt aber keinen spread oder inset</p>
+    <pre class="css"><code data-trim data-line-numbers is:raw>
+      .text {
+        text-shadow: 1px 2px 3px red;
+      }
+    </code></pre>
+    <div class="text">
+      Hallo Welt!
+    </div>
+  </section>
+
+  <section>
+    <p>Bitte verwendet den text-shadow mit Vorsicht. Falsch Verwendet leidet die Lesbarkeit.</p>
+  </section>
+</section>
\ No newline at end of file
diff --git a/src/components/slides/css-additional-styles/specials.astro b/src/components/slides/css-additional-styles/specials.astro
new file mode 100644
index 0000000..e9a8903
--- /dev/null
+++ b/src/components/slides/css-additional-styles/specials.astro
@@ -0,0 +1,190 @@
+<section>
+  <section>
+    <h2>Spezielle Sachen</h2>
+  </section>
+
+  <section>
+    <p>Hier nun noch ein paar letzte Interessante CSS-Styles, sowie ein Ausblick, was nach CSS kommt</p>
+  </section>
+
+  <section>
+    <h3>Clip</h3>
+  </section>
+
+  <section>
+    <p>Clipping bedeutet für uns in diesem Kontext, dass wir den Inhalt eines Elementes mithilfe von Formen so modifizieren, dass nur ein Teil des visuellen Inhalts sichtbar ist.</p>
+    <p>Damit haben wir die Möglichkeit Interessante visuelle Effekte zu erzielen.</p>
+  </section>
+
+  <section>
+    <pre class="css"><code data-trim data-line-numbers is:raw>
+      .clipped-text {
+        background: linear-gradient(45deg, #00ff8c, #1b5cff);
+        background-clip: text;
+        color: transparent;
+      }
+    </code></pre>
+  </section>
+
+  <section class="apply-styles special">
+    <div class="clip box">
+      DHBW
+    </div>
+  </section>
+
+  <section>
+    <p>Nun, das war ein etwas speziellerer Anwendungsfall</p>
+    <p>Eigentlich gibt es eine bestimmte Style-Eigenschaft, genannt "clip"</p>
+  </section>
+
+  <section class="apply-styles special">
+    <div class="center">
+      <div class="box square"></div>
+    </div>
+  </section>
+
+  <section>
+    <pre class="css"><code data-trim data-line-numbers is:raw>
+      .circle {
+        clip-path: circle(50%);
+      }
+    </code></pre>
+  </section>
+
+  <section class="apply-styles special">
+    <div class="center">
+      <div class="box circle square"></div>
+    </div>
+  </section>
+
+  <section class="apply-styles special">
+    <pre class="css"><code data-trim data-line-numbers is:raw>
+      .quarter-circle {
+        clip-path: ellipse(100% 100% at 0 100%);
+      }
+    </code></pre>
+    <div class="center">
+      <div class="box square quarter-circle"></div>
+    </div>
+  </section>
+
+  <section class="apply-styles special">
+    <pre class="css"><code data-trim data-line-numbers is:raw>
+      .dome {
+        clip-path: path('M0 250 L0,125 C0,-30 250,-30 250,125 L250 250 z');
+      }
+    </code></pre>
+    <div class="center">
+      <div class="box square dome"></div>
+    </div>
+  </section>
+
+  <section>
+    <h3>Was kommt "nach" CSS?</h3>
+  </section>
+
+  <section>
+    <p>CSS selber ist sehr vielseitig und mächtig.</p>
+    <p>Durch den W3C entwickelen sich die Features weiter und neue kommen regelmäßig hinzu.</p>
+    <p>Die "Ideen" zu den Weiterentwicklungen kommen dabei manchmal von anderen Sprachen / Frameworks.</p>
+  </section>
+
+  <section>
+    <p>Eine dieser Sprachen ist SASS/SCSS</p>
+    <p>SASS = "Syntactically Awesome Style Sheet"</p>
+    <p>SCSS = "Syntactically Correct Style Sheet"</p>
+  </section>
+
+  <section>
+    <p>SASS hat einige Ideen produziert, von der die Entwickler-Community nicht begeistert war und diese nochmals "weiterentwickelt" hat</p>
+    <p>Daraus entstand SCSS (mit dessen wir uns kurz hier befassen)</p>
+  </section>
+
+  <section>
+    <p>SASS/SCSS wurde (unter anderem) erschaffen um das schreiben von CSS-Selektoren zu vereinfachen.</p>
+    <p>Eine der Features war <code>nesting</code> (mittlerweile auch zu bestimmten Teilen in CSS-Feature-Set enthalten)</p>
+  </section>
+
+  <section>
+    <p>Neben nesting gibt es weitere Konzepte:</p>
+    <ul>
+      <li>Variablen</li>
+      <li>Konditionen und Loops</li>
+      <li>Funktionen</li>
+      <li>mehr...</li>
+    </ul>
+  </section>
+
+  <section>
+    <p>Allerdings gibt es ein Problem:</p>
+    <p>Moderne Browser verstehen nicht alle Sachen die in SCSS geschehen.</p>
+    <p>Das bedeutet SCSS muss in "normales" CSS übersetzt werden damit es funktioniert.</p>
+  </section>
+
+  <section>
+    <p>BEM</p>
+    <p>BEM ist ein Konzept HTML-Klassen so zu strukturieren, damit (immer) ersichtlich ist, was die Klasse "bezwecken" will.</p>
+    <p>BEM steht für "Block Element Modifier" und beschreibt so seine CSS-Klassen.</p>
+  </section>
+
+  <section>
+    <p><code>block</code> beschreibt das "root"-Element das gestyled werden soll (z.B. button, header, container, menu)</p>
+    <hr>
+    <p><code>element</code> beschreibt einen Teil des Blocks, also ein inneres Element (z.B. header-subtitle, menu-item, button-label)</p>
+    <hr>
+    <p><code>modifier</code> beschreibt eine Modifikation zu einem Block oder Element (z.B. disabled, fixed, danger, big)</p>
+  </section>
+
+  <section>
+    <p>Der Aufbau einer BEM-Klasse sieht folgendermaßen aus</p>
+    <p><code>.&lt;block&gt;__&lt;element&gt;--&lt;modifier&gt;</code></p>
+    <p>Ziel ist es außerdem, Klassen zu erstellen, die nicht miteinander "kollidieren"</p>
+  </section>
+  
+  <section>
+    <pre class="css"><code data-trim data-line-numbers is:raw>
+      .button__label--error {}
+      .button--error {}
+      .heading--h3 {}
+      .heading__main--h3 {}
+      .input--required {}
+      .card__image {}
+    </code></pre>
+  </section>
+
+  <section>
+    <p>SCSS hilft beim Aufbau von BEM-Klassen in sehr großem Umfang</p>
+    <pre class="scss"><code data-trim data-line-numbers is:raw>
+      .button {
+        &__label {
+          &--error {
+            color: red;
+          }
+        }
+      }
+    </code></pre>
+  </section>
+
+  <section>
+    <p>Tailwind</p>
+    <p>Tailwind ist eine Bibliothek. Sie unterstützt die Entwicklung indem es eine Reihe an vordefinierten CSS-Klassen gibt, die die HTML-Elemente modifizieren.</p>
+  </section>
+
+  <section>
+    <pre class="html"><code data-trim data-line-numbers is:raw>
+      <div class="flex rounded-xl p-8 md:p-0">
+        Hier könnte Ihre Werbung stehen!
+      </div>
+    </code></pre>
+  </section>
+
+  <section>
+    <p>Nachteile</p>
+    <ul>
+      <li>"Überladen" von HTML-Elementen mit Klassen-Namen</li>
+      <li>Hoher Lernaufwand für die ganzen Klassennamen</li>
+      <li>Kann bei vielen Klassen sehr verwirrend sein</li>
+      <li>Man braucht nur einen Bruchteil des CSS (aber dafür gibt es wiederum Lösungen)</li>
+    </ul>
+  </section>
+</section>
\ No newline at end of file
diff --git a/src/components/slides/css-additional-styles/title.astro b/src/components/slides/css-additional-styles/title.astro
new file mode 100644
index 0000000..80c338d
--- /dev/null
+++ b/src/components/slides/css-additional-styles/title.astro
@@ -0,0 +1,4 @@
+<section>
+  <h1>CSS - Mehr Styles und Features</h1>
+  <p>Nun kommt das restliche wichtige Zeug</p>
+</section>
\ No newline at end of file
diff --git a/src/components/slides/css-additional-styles/transform.astro b/src/components/slides/css-additional-styles/transform.astro
new file mode 100644
index 0000000..b3bd26c
--- /dev/null
+++ b/src/components/slides/css-additional-styles/transform.astro
@@ -0,0 +1,223 @@
+<section>
+  <section>
+    <h2>Transform</h2>
+  </section>
+  
+  <section>
+    <p>In CSS sind transforms eine Reihe von Modifikationen an ein HTML-Element.</p>
+    <p>Diese Modifikationen beinhalten hauptsächlich Skalierung, "Translation", Rotation und Skewing</p>
+    <p>Die einzelnen Anwendungen werden durch CSS-Funktionen auf dem <code>transform</code>-CSS-Style beschrieben</p>
+    <p>Es können mehrere transforms auf ein Element angewandt werden.</p>
+  </section>
+
+  <section>
+    <h3>translate</h3>
+  </section>
+
+  <section>
+    <p>Mit <code>translate</code> kann das Element im Viewport verschoben werden ohne die Bounding-Box des Parents zu modifizieren.</p>
+    <p>Das heißt wir haben die Möglichkeit ein Element außerhalb des Parents zu "verschieben" ohne das "umliegende" Elemente beeinflusst werden.</p>
+  </section>
+
+  <section class="apply-styles transform">
+    <p>Wir testen heute mit einem 3x3 Grid. In der Mitte ein Bild</p>
+    <div class="grid">
+      <div></div>
+      <div></div>
+      <div></div>
+      <div></div>
+      <div>
+        <img src="/images/cat-w250.png" alt="a cat"/>
+      </div>
+      <div></div>
+      <div></div>
+      <div></div>
+      <div></div>
+    </div>
+  </section>
+
+  <section>
+    <p>Nun verschieben wir das Bild mittels <code>transform: translate()</code></p>
+    <pre class="css"><code data-trim data-line-numbers is:raw>
+      .translate {
+        transform: translate(300px, 300px);
+      }
+    </code></pre>
+  </section>
+
+  <section class="apply-styles transform">
+    <div class="grid">
+      <div></div>
+      <div></div>
+      <div></div>
+      <div></div>
+      <div>
+        <img class="translate" src="/images/cat-w250.png" alt="a cat"/>
+      </div>
+      <div></div>
+      <div></div>
+      <div></div>
+      <div></div>
+    </div>
+  </section>
+
+  <section>
+    <p>Es gibt zudem Funktionen für einzelne Richtung: <code>translateX, translateY, translateZ</code>.</p>
+    <p>Moment. <code>translateZ</code>? Ja, mit CSS kann man mittlerweile auch in einem 3-Dimensionalem Space rendern. Aber wir werden uns dieses Themengebiet nicht näher ansehen.</p>
+  </section>
+
+  <section>
+    <h3>scale</h3>
+  </section>
+
+  <section>
+    <p>Mithilfe von <code>scale</code>, können wir angezeigte Inhalte skalieren. Effektiv können wir hiermit also Inhalte vergrößern oder verkleinern.</p>
+    <p>Wenn der CSS-Funktion <code>scale</code> nur ein Wert übergeben wird, so wird das Element entsprechend seines Seitenverhältnisses skaliert.</p>
+  </section>
+
+  <section>
+    <pre class="css"><code data-trim data-line-numbers is:raw>
+      .scale-up {
+        transform: scale(1.5);
+      }
+      .scale-down {
+        transform: scale(0.7);
+      }
+    </code></pre>
+  </section>
+
+  <section>
+    <p>Wenn wir skalieren, dann ist der Wert "1" der Ausgangszustand.</p>
+    <p>Werte zwischen 0 und 1 verkleinern das Bild.</p>
+    <p>Werte über 1 vergrößern das Bild.</p>
+  </section>
+
+  <section class="apply-styles transform">
+    .scale-up
+    <div class="grid">
+      <div></div>
+      <div></div>
+      <div></div>
+      <div></div>
+      <div>
+        <img class="scale-up" src="/images/cat-w250.png" alt="a cat"/>
+      </div>
+      <div></div>
+      <div></div>
+      <div></div>
+      <div></div>
+    </div>
+  </section>
+
+  <section class="apply-styles transform">
+    .scale-down
+    <div class="grid">
+      <div></div>
+      <div></div>
+      <div></div>
+      <div></div>
+      <div>
+        <img class="scale-down" src="/images/cat-w250.png" alt="a cat"/>
+      </div>
+      <div></div>
+      <div></div>
+      <div></div>
+      <div></div>
+    </div>
+  </section>
+
+  <section>
+    <h3>rotate</h3>
+  </section>
+
+  <section>
+    <p>Wir der Name vielleicht schon erahnen lässt, dient <code>rotate</code> dazu, ein Element zu drehen.</p>
+  </section>
+
+  <section>
+    <pre class="css"><code data-trim data-line-numbers is:raw>
+      .rotate {
+        transform: rotate(90deg);
+        /* Man kann auch die Einheit "turn" verwenden 
+          (halbe Umdrehung im Uhrzeigersinn) */
+        /* transform: rotate(0.5turn) */ 
+      }
+    </code></pre>
+  </section>
+
+  <section class="apply-styles transform">
+    .rotate
+    <div class="grid">
+      <div></div>
+      <div></div>
+      <div></div>
+      <div></div>
+      <div>
+        <img class="rotate" src="/images/cat-w250.png" alt="a cat"/>
+      </div>
+      <div></div>
+      <div></div>
+      <div></div>
+      <div></div>
+    </div>
+  </section>
+
+  <section>
+    <h3>skew</h3>
+  </section>
+
+  <section>
+    <p>Mit <code>skew</code> verzerren wir Inhalt indem auf die X oder Y-Achse eine rotation erzeugt wird.</p>
+  </section>
+
+  <section>
+    <pre class="css"><code data-trim data-line-numbers is:raw>
+      .skew {
+        transform: skew(30deg, 15deg);
+      }
+    </code></pre>
+  </section>
+
+  <section class="apply-styles transform">
+    .skew
+    <div class="grid">
+      <div></div>
+      <div></div>
+      <div></div>
+      <div></div>
+      <div>
+        <img class="skew" src="/images/cat-w250.png" alt="a cat"/>
+      </div>
+      <div></div>
+      <div></div>
+      <div></div>
+      <div></div>
+    </div>
+  </section>
+
+  <section>
+    <p>Ein letztes Wort zu <code>transform</code>: Die Reihenfolge ist wichtig!</p>
+  </section>
+
+  <section>
+    <pre class="css"><code data-trim data-line-numbers is:raw>
+      .rotate-and-translate {
+        transform: rotate(45deg) translateX(400px);
+        border: red 8px solid;
+      }
+      .translate-and-rotate {
+        transform: translateX(400px) rotate(45deg);
+        border: blue 8px solid;
+      }
+    </code></pre>
+  </section>
+
+  <section class="apply-styles transform">
+    <div class="absolute">
+      <img src="/images/cat-w250.png" alt="a cat">
+      <img class="rotate-and-translate" src="/images/cat-w250.png" alt="a cat">
+      <img class="translate-and-rotate" src="/images/cat-w250.png" alt="a cat">
+    </div>
+  </section>
+
+</section>
\ No newline at end of file
diff --git a/src/components/slides/css-additional-styles/transitions.astro b/src/components/slides/css-additional-styles/transitions.astro
new file mode 100644
index 0000000..ef663ba
--- /dev/null
+++ b/src/components/slides/css-additional-styles/transitions.astro
@@ -0,0 +1,84 @@
+<section>
+  <section>
+    <h2>Transitions</h2>
+  </section>
+
+  <section>
+    <p>transitions bieten uns die Möglichkeit, einen Zustandsübergang in CSS im Rahmen einer flüssigen Überleitung zu definieren.</p>
+    <p>Ein Zustandsübergang beschreibt hierbei eine beliebige Änderung der HTML-Attribute an einem Element (z.B. hinzufügen oder entfernen einer Klasse, Meta-Attribute wie <code>:hover</code> und andere).</p>
+  </section>
+
+  <section>
+    <p>In einer transition wird definiert welches Style-Attribut eine Überleitung erhält, eine <code>timing-funktion</code> und über welche Zeitraum die transition verläuft</p>
+    <p>Es können verschiedene transitions für verschiedene Style-Attribute vergeben werden, oder alle Änderungen mit dem keyword <code>all</code> "getracked" werden.</p>
+  </section>
+
+  <section>
+    <pre class="css"><code data-trim data-line-numbers is:raw>
+      .color {
+        background-color: white;
+        color: black;
+        /** Zustandsänderung über 250ms für bg & fg */
+        transition:
+          background-color 250ms linear,
+          color 250ms linear
+        ;
+      }
+
+      /** Invertiere Farben, wenn der Mauszeiger überm Element */
+      .color:hover {
+        background-color: black;
+        color: white;
+      }
+    </code></pre>
+  </section>
+
+  <section class="apply-styles transition">
+    <div class="container">
+      <div class="box color">
+        Hallo Welt!
+      </div>
+    </div>
+  </section>
+
+  <section>
+    <p>Während <code>linear</code> den Übergang "linear" (also ohne "smoothing") animiert, können wir auch keywords wie <code>ease-in, ease-out, ease-in-out</code> verwenden.</p>
+    <p>Easing sorgt dafür, dass der Anfang und/oder das Ende der transition einen "Ramp-Up" hat (die Animation verläuft dann langsam und baut sich auf).</p>
+    <p>Es kann aber auch eine eigene Übergangsfunktion mit CSS-Funktionen <code>(cubic-bezier, steps)</code> definiert werden.</p>
+  </section>
+
+  <section>
+    <pre class="css"><code data-trim data-line-numbers is:raw>
+      .linear {
+        transition: all 1s linear;
+      }
+      .ease-in {
+        transition: all 1s ease-in;
+      }
+      .ease-out {
+        transition: all 1s ease-out;
+      }
+      .ease-in-out {
+        transition: all 1s ease-in-out;
+      }
+    </code></pre>
+  </section>
+
+  <section class="apply-styles transition">
+    <div class="container grid">
+      <div class="box color-alone linear">
+        Linear
+      </div>
+      <div class="box color-alone ease-in">
+        Ease-In
+      </div>
+      <div class="box color-alone ease-out">
+        Ease-Out
+      </div>
+      <div class="box color-alone ease-in-out">
+        Ease-In-Out
+      </div>
+    </div>
+  </section>
+
+</section>
\ No newline at end of file
diff --git a/src/components/slides/css-additional-styles/variables.astro b/src/components/slides/css-additional-styles/variables.astro
new file mode 100644
index 0000000..c2887a2
--- /dev/null
+++ b/src/components/slides/css-additional-styles/variables.astro
@@ -0,0 +1,81 @@
+<section>
+  <section>
+    <h2>CSS-Variablen</h2>
+  </section>
+
+  <section>
+    <p>Variablen in CSS sind ein "relativ neues Feature" (ist eigentlich seit 2017 von allen großen Browsern supported)</p>
+    <p>Es taucht unter Umständen auch unter dem Namen "Custom Properties" auf</p>
+    <p>Hilft uns, eine "Single Source of Truth" zu haben.</p>
+  </section>
+
+  <section>
+    <p>Variablen sind auch teil der Vererbungskette von CSS und können somit überschrieben werden.</p>
+    <p>Als Inhalt kann vieles verwendet werden: Farben, Einheiten und mehr.</p>
+  </section>
+
+  <section>
+    <p>Nicht als Variable deklariert werden können:</p>
+    <ul>
+      <li>Bedingungen für <code>media-queries</code></li>
+      <li>Keyframes</li>
+      <li>Strings für <code>url(...)</code></li>
+    </ul>
+  </section>
+
+  <section>
+    <p>Definition von Variablen</p>
+    <pre class="css"><code data-trim data-line-numbers is:raw>
+      :root {
+        --main-bg-color: #f99;
+      }
+    </code></pre>
+    <p><code>:root</code> ist eine spezielle Pseudo-Klasse die als Selektor für das HTML-Tag fungiert aber eine höhere Spezifität hat.</p>
+    <p>Dies erlaubt es uns, die Variable z.B. mittels HTMl-Klassen zu überschreiben (nützlich für z.B. Themes)</p>
+  </section>
+
+  <section>
+    <p>Variablen sind mit zwei Minus-Zeichen am Anfang gekennzeichnet</p>
+  </section>
+
+  <section>
+    <p>Verwendung von Variablen</p>
+    <pre class="css"><code data-trim data-line-numbers is:raw>
+      .element {
+        background-color: var(--main-bg-color);
+      }
+    </code></pre>
+    <p>Um den Wert in der Variable zu verwenden, müssen wir die spezielle CSS-Funktion <code>var(...)</code> benutzen.</p>
+  </section>
+
+  <section>
+    <p>Aber was, falls eine Variable nicht definiert sein sollte?</p>
+    <pre class="css"><code data-trim data-line-numbers is:raw>
+      .element {
+        background-color: var(
+          --gibts-nicht, --main-bg-color, white
+        );
+      }
+    </code></pre>
+
+    <p>In diesem Beispiel würde der Background auf #f99 gestellt werden, dies ist der erste existierende Wert.</p>
+    <p>Sollte auch --main-bg-color nicht definiert sein, würde der Hintergrund auf "white" gestellt werden.</p>
+  </section>
+
+  <section>
+    <p>Überschreiben von Variablen</p>
+    <pre class="css"><code data-trim data-line-numbers is:raw>
+      :root {
+        --bg: black;
+      }
+      .make-it-white {
+        --bg: white;
+      }
+    </code></pre>
+  </section>
+
+  <section>
+    <p>Inhalte die <code>var(--bg);</code> innerhalb von Elementen mit der Klasse "make-it-white" verwenden, würden einen weißen Hintergrund erhalten.</p>
+    <p>Außerhalb würden die Werte als Schwarz in der Variable enthalten sein.</p>
+  </section>
+</section>
\ No newline at end of file
diff --git a/src/components/slides/css-additional-styles/z-index.astro b/src/components/slides/css-additional-styles/z-index.astro
new file mode 100644
index 0000000..eb674d1
--- /dev/null
+++ b/src/components/slides/css-additional-styles/z-index.astro
@@ -0,0 +1,29 @@
+<section>
+  <section>
+    <h2>Z-Index</h2>
+  </section>
+
+  <section>
+    <p>Mit der Einführung des CSS-Grid und den Positionierungs-Mechanismen "absolute" und "fixed" haben wir auch ein "neues" Problem kreiert: Elemente die sich gegenseitig überlappen können und ggf. Inhalte blockieren.</p>
+    <p>So gesehen müssen wir nun mit einer dritten Dimension arbeiten um Inhalte "vor" anderen Inhalten zu platzieren falls nötig.</p>
+  </section>
+
+  <section>
+    <p>In CSS wird das mithilfe des Style-Attributes <code>z-index</code> gelöst.</p>
+    <p>Wenn 2 Elemente mit einem z-index übereinander liegen, "gewinnt" das Element mit dem höheren z-index.</p>
+  </section>
+
+  <section>
+    <pre class=""><code data-trim data-line-numbers>
+    
+    </code></pre>
+  </section>
+
+  <section class="apply-styles">
+    <div class="position relative box">
+      <div class="absolute one">Erstes Element: Index 1</div>
+      <div class="absolute two">Zweites Element: Kein Index</div>
+      <div class="absolute three">Drittes Kind: Kein Index</div>
+    </div>
+  </section>
+</section>
\ No newline at end of file
diff --git a/src/pages/playground/flexbox.astro b/src/pages/playground/flexbox.astro
new file mode 100644
index 0000000..02e8566
--- /dev/null
+++ b/src/pages/playground/flexbox.astro
@@ -0,0 +1,8 @@
+---
+import Layout from '../../layouts/Layout.astro';
+// import Playground from '../../components/special/FlexboxPlayground';
+---
+
+<Layout title="Flexbox Playground">
+  <!-- <Playground /> -->
+</Layout>
\ No newline at end of file
diff --git a/src/pages/slides/css-more-of-styles.astro b/src/pages/slides/css-more-of-styles.astro
new file mode 100644
index 0000000..7c2995f
--- /dev/null
+++ b/src/pages/slides/css-more-of-styles.astro
@@ -0,0 +1,8 @@
+---
+import Reveal from "../../layouts/Reveal.astro";
+import Slides from '../../components/slides/css-additional-styles/index.astro';
+---
+
+<Reveal title="CSS - Mehr zu den Stylings">
+  <Slides />
+</Reveal>
\ No newline at end of file