diff --git a/composer.lock b/composer.lock
index da34fb5..215091d 100644
--- a/composer.lock
+++ b/composer.lock
@@ -116,12 +116,12 @@
             "source": {
                 "type": "git",
                 "url": "https://github.com/erusev/parsedown-extra.git",
-                "reference": "fd33d68349630d18d56367712a64445a6e0bc83e"
+                "reference": "cd57cf183be7b56e90498091c0a7955ad4df223c"
             },
             "dist": {
                 "type": "zip",
-                "url": "https://api.github.com/repos/erusev/parsedown-extra/zipball/fd33d68349630d18d56367712a64445a6e0bc83e",
-                "reference": "fd33d68349630d18d56367712a64445a6e0bc83e",
+                "url": "https://api.github.com/repos/erusev/parsedown-extra/zipball/cd57cf183be7b56e90498091c0a7955ad4df223c",
+                "reference": "cd57cf183be7b56e90498091c0a7955ad4df223c",
                 "shasum": ""
             },
             "require": {
@@ -163,7 +163,7 @@
                 "issues": "https://github.com/erusev/parsedown-extra/issues",
                 "source": "https://github.com/erusev/parsedown-extra/tree/master"
             },
-            "time": "2021-10-25T08:46:29+00:00"
+            "time": "2024-09-29T09:07:37+00:00"
         },
         {
             "name": "fig/http-message-util",
@@ -406,16 +406,16 @@
         },
         {
             "name": "laravel/serializable-closure",
-            "version": "v1.3.4",
+            "version": "v1.3.5",
             "source": {
                 "type": "git",
                 "url": "https://github.com/laravel/serializable-closure.git",
-                "reference": "61b87392d986dc49ad5ef64e75b1ff5fee24ef81"
+                "reference": "1dc4a3dbfa2b7628a3114e43e32120cce7cdda9c"
             },
             "dist": {
                 "type": "zip",
-                "url": "https://api.github.com/repos/laravel/serializable-closure/zipball/61b87392d986dc49ad5ef64e75b1ff5fee24ef81",
-                "reference": "61b87392d986dc49ad5ef64e75b1ff5fee24ef81",
+                "url": "https://api.github.com/repos/laravel/serializable-closure/zipball/1dc4a3dbfa2b7628a3114e43e32120cce7cdda9c",
+                "reference": "1dc4a3dbfa2b7628a3114e43e32120cce7cdda9c",
                 "shasum": ""
             },
             "require": {
@@ -463,7 +463,7 @@
                 "issues": "https://github.com/laravel/serializable-closure/issues",
                 "source": "https://github.com/laravel/serializable-closure"
             },
-            "time": "2024-08-02T07:48:17+00:00"
+            "time": "2024-09-23T13:33:08+00:00"
         },
         {
             "name": "nikic/fast-route",
@@ -1452,16 +1452,16 @@
         },
         {
             "name": "slim/twig-view",
-            "version": "3.4.0",
+            "version": "3.4.1",
             "source": {
                 "type": "git",
                 "url": "https://github.com/slimphp/Twig-View.git",
-                "reference": "1b351536b9a07ed90a3563ee9d71a987c5d74610"
+                "reference": "b4268d87d0e327feba5f88d32031e9123655b909"
             },
             "dist": {
                 "type": "zip",
-                "url": "https://api.github.com/repos/slimphp/Twig-View/zipball/1b351536b9a07ed90a3563ee9d71a987c5d74610",
-                "reference": "1b351536b9a07ed90a3563ee9d71a987c5d74610",
+                "url": "https://api.github.com/repos/slimphp/Twig-View/zipball/b4268d87d0e327feba5f88d32031e9123655b909",
+                "reference": "b4268d87d0e327feba5f88d32031e9123655b909",
                 "shasum": ""
             },
             "require": {
@@ -1469,12 +1469,12 @@
                 "psr/http-message": "^1.1 || ^2.0",
                 "slim/slim": "^4.12",
                 "symfony/polyfill-php81": "^1.29",
-                "twig/twig": "^3.8"
+                "twig/twig": "^3.11"
             },
             "require-dev": {
                 "phpspec/prophecy-phpunit": "^2.0",
                 "phpstan/phpstan": "^1.10.59",
-                "phpunit/phpunit": "^9.6",
+                "phpunit/phpunit": "^9.6 || ^10",
                 "psr/http-factory": "^1.0",
                 "squizlabs/php_codesniffer": "^3.9"
             },
@@ -1511,9 +1511,9 @@
             ],
             "support": {
                 "issues": "https://github.com/slimphp/Twig-View/issues",
-                "source": "https://github.com/slimphp/Twig-View/tree/3.4.0"
+                "source": "https://github.com/slimphp/Twig-View/tree/3.4.1"
             },
-            "time": "2024-04-28T20:36:39+00:00"
+            "time": "2024-09-26T05:42:02+00:00"
         },
         {
             "name": "symfony/deprecation-contracts",
@@ -2126,16 +2126,16 @@
         },
         {
             "name": "symfony/yaml",
-            "version": "v5.4.43",
+            "version": "v5.4.44",
             "source": {
                 "type": "git",
                 "url": "https://github.com/symfony/yaml.git",
-                "reference": "62f96e1cfd4cf518882a36bfedcf1fe4093c1299"
+                "reference": "7025b964f123bbf1896d7563db6ec7f1f63e918a"
             },
             "dist": {
                 "type": "zip",
-                "url": "https://api.github.com/repos/symfony/yaml/zipball/62f96e1cfd4cf518882a36bfedcf1fe4093c1299",
-                "reference": "62f96e1cfd4cf518882a36bfedcf1fe4093c1299",
+                "url": "https://api.github.com/repos/symfony/yaml/zipball/7025b964f123bbf1896d7563db6ec7f1f63e918a",
+                "reference": "7025b964f123bbf1896d7563db6ec7f1f63e918a",
                 "shasum": ""
             },
             "require": {
@@ -2181,7 +2181,7 @@
             "description": "Loads and dumps YAML files",
             "homepage": "https://symfony.com",
             "support": {
-                "source": "https://github.com/symfony/yaml/tree/v5.4.43"
+                "source": "https://github.com/symfony/yaml/tree/v5.4.44"
             },
             "funding": [
                 {
@@ -2197,7 +2197,7 @@
                     "type": "tidelift"
                 }
             ],
-            "time": "2024-08-11T17:40:32+00:00"
+            "time": "2024-09-16T14:36:56+00:00"
         },
         {
             "name": "twig/twig",
diff --git a/system/typemill/Extensions/MediaExtension.php b/system/typemill/Extensions/MediaExtension.php
new file mode 100644
index 0000000..1f1f6f1
--- /dev/null
+++ b/system/typemill/Extensions/MediaExtension.php
@@ -0,0 +1,114 @@
+<?php
+
+namespace Typemill\Extensions;
+
+use \Symfony\Component\EventDispatcher\EventSubscriberInterface;
+
+class MediaExtension implements EventSubscriberInterface
+{
+    private $rootpath;
+
+    private $baseurl;
+
+    function __construct($rootpath, $baseurl)
+    {
+        $this->rootpath = $rootpath;
+        $this->baseurl = $baseurl;
+    }
+
+    public static function getSubscribedEvents()
+    {
+        return [
+            'onShortcodeFound'          => 'onShortcodeFound',
+        ];
+    }
+
+    public function onShortcodeFound($shortcode)
+    {
+        $shortcodeArray = $shortcode->getData();
+
+        if(is_array($shortcodeArray) && $shortcodeArray['name'] == 'video' && isset($shortcodeArray['params']['path']))
+        {
+            $relUrl = $shortcodeArray['params']['path'];
+            $relUrl = '/' . trim($relUrl, '/');
+
+            # Convert the relative URL to an absolute file path
+            $filePath = $this->rootpath . $relUrl;
+
+            # check file exists 
+            if(!file_exists($filePath))
+            {
+                $html = '<p style="color:red">File not found</p>';
+            }
+            else
+            {
+                # Get file extension using pathinfo()
+                $fileInfo = pathinfo($filePath);
+                $extension = strtolower($fileInfo['extension']);  // Get file extension and convert to lowercase
+                $absUrl = $this->baseurl . $relUrl;
+                
+                # Determine the correct file type for the video tag
+                $type = '';
+                switch ($extension) {
+                    case 'mp4':
+                        $type = 'mp4';
+                        break;
+                    case 'webm':
+                        $type = 'webm';
+                        break;
+                    case 'ogg':
+                        $type = 'ogg';
+                        break;
+                    default:
+                        $html = '<p style="color:red">Unsupported file type</p>';
+                        return;  // Exit if file type is not supported
+                }
+
+                $width  = $shortcodeArray['params']['width'] ?? '500';
+                if (!preg_match('/^(\d+)(px|%)?$/', $width))
+                {
+                    $width = '500';
+                }
+
+                $preload  = 'none';
+                if(isset($shortcodeArray['params']['preload']) && ($shortcodeArray['params']['preload'] == 'auto' or $shortcodeArray['params']['preload'] == 'metadata'))
+                {
+                   $preload = $shortcodeArray['params']['preload'];
+                }
+
+                $poster = '';
+
+                if(isset($shortcodeArray['params']['poster']))
+                {
+                    $relImgUrl = $shortcodeArray['params']['poster'];
+                    $relImgUrl = '/' . trim($relImgUrl, '/');
+                 
+                    # Convert the relative URL to an absolute file path
+                    $imgPath = $this->rootpath . $relImgUrl;
+
+                    # check file exists 
+                    if(file_exists($imgPath))
+                    {
+                        $absImgUrl = $this->baseurl . $relImgUrl;
+                        $poster = ' poster="' . $absImgUrl . '"';
+                    }
+                }
+
+                $html = '<video 
+                            controls 
+                            width = "' . $width . '" 
+                            preload = "' . $preload . '"
+                            ' . $poster . '
+                            class = "center"
+                        >
+                          <source src="' . $absUrl . '" type="video/' . $type . '" />
+                          Download the
+                          <a href="' . $absUrl . '">' . $type . '</a>
+                          video.
+                        </video>';
+            }
+
+            $shortcode->setData($html);
+        }
+    }
+}
\ No newline at end of file
diff --git a/system/typemill/author/css/custom.css b/system/typemill/author/css/custom.css
index f30904b..95f52ec 100644
--- a/system/typemill/author/css/custom.css
+++ b/system/typemill/author/css/custom.css
@@ -409,7 +409,7 @@
 .blox-preview .notice3:before{ content: "!!!"; }
 .blox-preview .notice4:before{ content: "!!!!"; }
 
-.blox-preview img, img.uploadPreview{
+.blox-preview video, .blox-preview audio, .blox-preview img, img.uploadPreview{
   display: block;
   margin: auto;
   max-width: 100%;
diff --git a/system/typemill/author/css/output.css b/system/typemill/author/css/output.css
index 569cb67..a87f392 100644
--- a/system/typemill/author/css/output.css
+++ b/system/typemill/author/css/output.css
@@ -1,5 +1,5 @@
 /*
-! tailwindcss v3.1.6 | MIT License | https://tailwindcss.com
+! tailwindcss v3.4.4 | MIT License | https://tailwindcss.com
 */
 
 /*
@@ -30,9 +30,13 @@
 2. Prevent adjustments of font size after orientation changes in iOS.
 3. Use a more readable tab size.
 4. Use the user's configured `sans` font-family by default.
+5. Use the user's configured `sans` font-feature-settings by default.
+6. Use the user's configured `sans` font-variation-settings by default.
+7. Disable tap highlights on iOS
 */
 
-html {
+html,
+:host {
   line-height: 1.5;
   /* 1 */
   -webkit-text-size-adjust: 100%;
@@ -42,8 +46,14 @@ html {
   -o-tab-size: 4;
      tab-size: 4;
   /* 3 */
-  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
   /* 4 */
+  font-feature-settings: normal;
+  /* 5 */
+  font-variation-settings: normal;
+  /* 6 */
+  -webkit-tap-highlight-color: transparent;
+  /* 7 */
 }
 
 /*
@@ -115,8 +125,10 @@ strong {
 }
 
 /*
-1. Use the user's configured `mono` font family by default.
-2. Correct the odd `em` font sizing in all browsers.
+1. Use the user's configured `mono` font-family by default.
+2. Use the user's configured `mono` font-feature-settings by default.
+3. Use the user's configured `mono` font-variation-settings by default.
+4. Correct the odd `em` font sizing in all browsers.
 */
 
 code,
@@ -125,8 +137,12 @@ samp,
 pre {
   font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
   /* 1 */
-  font-size: 1em;
+  font-feature-settings: normal;
   /* 2 */
+  font-variation-settings: normal;
+  /* 3 */
+  font-size: 1em;
+  /* 4 */
 }
 
 /*
@@ -185,12 +201,18 @@ select,
 textarea {
   font-family: inherit;
   /* 1 */
+  font-feature-settings: inherit;
+  /* 1 */
+  font-variation-settings: inherit;
+  /* 1 */
   font-size: 100%;
   /* 1 */
   font-weight: inherit;
   /* 1 */
   line-height: inherit;
   /* 1 */
+  letter-spacing: inherit;
+  /* 1 */
   color: inherit;
   /* 1 */
   margin: 0;
@@ -214,9 +236,9 @@ select {
 */
 
 button,
-[type='button'],
-[type='reset'],
-[type='submit'] {
+input:where([type='button']),
+input:where([type='reset']),
+input:where([type='submit']) {
   -webkit-appearance: button;
   /* 1 */
   background-color: transparent;
@@ -335,6 +357,14 @@ menu {
   padding: 0;
 }
 
+/*
+Reset default styling for dialogs.
+*/
+
+dialog {
+  padding: 0;
+}
+
 /*
 Prevent resizing textareas horizontally by default.
 */
@@ -355,13 +385,6 @@ input::-moz-placeholder, textarea::-moz-placeholder {
   /* 2 */
 }
 
-input:-ms-input-placeholder, textarea:-ms-input-placeholder {
-  opacity: 1;
-  /* 1 */
-  color: #9ca3af;
-  /* 2 */
-}
-
 input::placeholder,
 textarea::placeholder {
   opacity: 1;
@@ -417,6 +440,12 @@ video {
   height: auto;
 }
 
+/* Make elements with the HTML hidden attribute stay hidden by default */
+
+[hidden] {
+  display: none;
+}
+
 *, ::before, ::after {
   --tw-border-spacing-x: 0;
   --tw-border-spacing-y: 0;
@@ -431,6 +460,9 @@ video {
   --tw-pan-y:  ;
   --tw-pinch-zoom:  ;
   --tw-scroll-snap-strictness: proximity;
+  --tw-gradient-from-position:  ;
+  --tw-gradient-via-position:  ;
+  --tw-gradient-to-position:  ;
   --tw-ordinal:  ;
   --tw-slashed-zero:  ;
   --tw-numeric-figure:  ;
@@ -462,53 +494,10 @@ video {
   --tw-backdrop-opacity:  ;
   --tw-backdrop-saturate:  ;
   --tw-backdrop-sepia:  ;
-}
-
-::-webkit-backdrop {
-  --tw-border-spacing-x: 0;
-  --tw-border-spacing-y: 0;
-  --tw-translate-x: 0;
-  --tw-translate-y: 0;
-  --tw-rotate: 0;
-  --tw-skew-x: 0;
-  --tw-skew-y: 0;
-  --tw-scale-x: 1;
-  --tw-scale-y: 1;
-  --tw-pan-x:  ;
-  --tw-pan-y:  ;
-  --tw-pinch-zoom:  ;
-  --tw-scroll-snap-strictness: proximity;
-  --tw-ordinal:  ;
-  --tw-slashed-zero:  ;
-  --tw-numeric-figure:  ;
-  --tw-numeric-spacing:  ;
-  --tw-numeric-fraction:  ;
-  --tw-ring-inset:  ;
-  --tw-ring-offset-width: 0px;
-  --tw-ring-offset-color: #fff;
-  --tw-ring-color: rgb(59 130 246 / 0.5);
-  --tw-ring-offset-shadow: 0 0 #0000;
-  --tw-ring-shadow: 0 0 #0000;
-  --tw-shadow: 0 0 #0000;
-  --tw-shadow-colored: 0 0 #0000;
-  --tw-blur:  ;
-  --tw-brightness:  ;
-  --tw-contrast:  ;
-  --tw-grayscale:  ;
-  --tw-hue-rotate:  ;
-  --tw-invert:  ;
-  --tw-saturate:  ;
-  --tw-sepia:  ;
-  --tw-drop-shadow:  ;
-  --tw-backdrop-blur:  ;
-  --tw-backdrop-brightness:  ;
-  --tw-backdrop-contrast:  ;
-  --tw-backdrop-grayscale:  ;
-  --tw-backdrop-hue-rotate:  ;
-  --tw-backdrop-invert:  ;
-  --tw-backdrop-opacity:  ;
-  --tw-backdrop-saturate:  ;
-  --tw-backdrop-sepia:  ;
+  --tw-contain-size:  ;
+  --tw-contain-layout:  ;
+  --tw-contain-paint:  ;
+  --tw-contain-style:  ;
 }
 
 ::backdrop {
@@ -525,6 +514,9 @@ video {
   --tw-pan-y:  ;
   --tw-pinch-zoom:  ;
   --tw-scroll-snap-strictness: proximity;
+  --tw-gradient-from-position:  ;
+  --tw-gradient-via-position:  ;
+  --tw-gradient-to-position:  ;
   --tw-ordinal:  ;
   --tw-slashed-zero:  ;
   --tw-numeric-figure:  ;
@@ -556,64 +548,68 @@ video {
   --tw-backdrop-opacity:  ;
   --tw-backdrop-saturate:  ;
   --tw-backdrop-sepia:  ;
-}
-
-.container {
-  width: 100%;
+  --tw-contain-size:  ;
+  --tw-contain-layout:  ;
+  --tw-contain-paint:  ;
+  --tw-contain-style:  ;
 }
 
 .\!container {
   width: 100% !important;
 }
 
-@media (min-width: 640px) {
-  .container {
-    max-width: 640px;
-  }
+.container {
+  width: 100%;
+}
 
+@media (min-width: 640px) {
   .\!container {
     max-width: 640px !important;
   }
+
+  .container {
+    max-width: 640px;
+  }
 }
 
 @media (min-width: 768px) {
-  .container {
-    max-width: 768px;
-  }
-
   .\!container {
     max-width: 768px !important;
   }
+
+  .container {
+    max-width: 768px;
+  }
 }
 
 @media (min-width: 1024px) {
-  .container {
-    max-width: 1024px;
-  }
-
   .\!container {
     max-width: 1024px !important;
   }
+
+  .container {
+    max-width: 1024px;
+  }
 }
 
 @media (min-width: 1280px) {
-  .container {
-    max-width: 1280px;
-  }
-
   .\!container {
     max-width: 1280px !important;
   }
+
+  .container {
+    max-width: 1280px;
+  }
 }
 
 @media (min-width: 1536px) {
-  .container {
-    max-width: 1536px;
-  }
-
   .\!container {
     max-width: 1536px !important;
   }
+
+  .container {
+    max-width: 1536px;
+  }
 }
 
 .pointer-events-none {
@@ -628,6 +624,10 @@ video {
   visibility: hidden;
 }
 
+.collapse {
+  visibility: collapse;
+}
+
 .static {
   position: static;
 }
@@ -645,20 +645,11 @@ video {
 }
 
 .sticky {
-  position: -webkit-sticky;
   position: sticky;
 }
 
 .inset-0 {
-  top: 0px;
-  right: 0px;
-  bottom: 0px;
-  left: 0px;
-}
-
-.inset-y-0 {
-  top: 0px;
-  bottom: 0px;
+  inset: 0px;
 }
 
 .inset-x-0 {
@@ -666,26 +657,39 @@ video {
   right: 0px;
 }
 
-.bottom-0 {
+.inset-y-0 {
+  top: 0px;
   bottom: 0px;
 }
 
-.top-3 {
-  top: 0.75rem;
+.-bottom-3 {
+  bottom: -0.75rem;
 }
 
 .-left-5 {
   left: -1.25rem;
 }
 
-.top-0 {
-  top: 0px;
+.-top-3 {
+  top: -0.75rem;
+}
+
+.bottom-0 {
+  bottom: 0px;
+}
+
+.bottom-3 {
+  bottom: 0.75rem;
 }
 
 .left-0 {
   left: 0px;
 }
 
+.left-1\/2 {
+  left: 50%;
+}
+
 .left-12 {
   left: 3rem;
 }
@@ -694,30 +698,22 @@ video {
   right: 0px;
 }
 
-.-top-3 {
-  top: -0.75rem;
-}
-
-.left-1\/2 {
-  left: 50%;
-}
-
-.-bottom-3 {
-  bottom: -0.75rem;
-}
-
 .right-4 {
   right: 1rem;
 }
 
-.bottom-3 {
-  bottom: 0.75rem;
+.top-0 {
+  top: 0px;
 }
 
 .top-10 {
   top: 2.5rem;
 }
 
+.top-3 {
+  top: 0.75rem;
+}
+
 .z-10 {
   z-index: 10;
 }
@@ -742,10 +738,6 @@ video {
   margin: 0px;
 }
 
-.m-auto {
-  margin: auto;
-}
-
 .m-1 {
   margin: 0.25rem;
 }
@@ -754,19 +746,8 @@ video {
   margin: 0.5rem;
 }
 
-.my-2 {
-  margin-top: 0.5rem;
-  margin-bottom: 0.5rem;
-}
-
-.my-5 {
-  margin-top: 1.25rem;
-  margin-bottom: 1.25rem;
-}
-
-.my-px {
-  margin-top: 1px;
-  margin-bottom: 1px;
+.m-auto {
+  margin: auto;
 }
 
 .mx-auto {
@@ -774,16 +755,16 @@ video {
   margin-right: auto;
 }
 
-.my-8 {
-  margin-top: 2rem;
-  margin-bottom: 2rem;
-}
-
 .my-1 {
   margin-top: 0.25rem;
   margin-bottom: 0.25rem;
 }
 
+.my-2 {
+  margin-top: 0.5rem;
+  margin-bottom: 0.5rem;
+}
+
 .my-3 {
   margin-top: 0.75rem;
   margin-bottom: 0.75rem;
@@ -794,110 +775,125 @@ video {
   margin-bottom: 1rem;
 }
 
-.mr-2 {
-  margin-right: 0.5rem;
+.my-5 {
+  margin-top: 1.25rem;
+  margin-bottom: 1.25rem;
 }
 
-.mt-6 {
-  margin-top: 1.5rem;
+.my-8 {
+  margin-top: 2rem;
+  margin-bottom: 2rem;
+}
+
+.my-px {
+  margin-top: 1px;
+  margin-bottom: 1px;
 }
 
 .mb-1 {
   margin-bottom: 0.25rem;
 }
 
-.mb-2 {
-  margin-bottom: 0.5rem;
-}
-
-.mt-3 {
-  margin-top: 0.75rem;
-}
-
-.ml-4 {
-  margin-left: 1rem;
-}
-
-.mb-4 {
-  margin-bottom: 1rem;
-}
-
-.mr-1 {
-  margin-right: 0.25rem;
-}
-
-.ml-1 {
-  margin-left: 0.25rem;
-}
-
-.mt-2 {
-  margin-top: 0.5rem;
-}
-
-.ml-2 {
-  margin-left: 0.5rem;
+.mb-10 {
+  margin-bottom: 2.5rem;
 }
 
 .mb-16 {
   margin-bottom: 4rem;
 }
 
-.mr-3 {
-  margin-right: 0.75rem;
-}
-
-.mb-8 {
-  margin-bottom: 2rem;
-}
-
-.mt-1 {
-  margin-top: 0.25rem;
-}
-
-.mt-5 {
-  margin-top: 1.25rem;
-}
-
-.mb-5 {
-  margin-bottom: 1.25rem;
+.mb-2 {
+  margin-bottom: 0.5rem;
 }
 
 .mb-3 {
   margin-bottom: 0.75rem;
 }
 
-.ml-5 {
-  margin-left: 1.25rem;
+.mb-4 {
+  margin-bottom: 1rem;
 }
 
-.mr-5 {
-  margin-right: 1.25rem;
+.mb-5 {
+  margin-bottom: 1.25rem;
 }
 
-.mb-10 {
-  margin-bottom: 2.5rem;
+.mb-8 {
+  margin-bottom: 2rem;
 }
 
-.mt-8 {
-  margin-top: 2rem;
+.ml-1 {
+  margin-left: 0.25rem;
+}
+
+.ml-2 {
+  margin-left: 0.5rem;
 }
 
 .ml-3 {
   margin-left: 0.75rem;
 }
 
+.ml-4 {
+  margin-left: 1rem;
+}
+
+.ml-5 {
+  margin-left: 1.25rem;
+}
+
+.mr-1 {
+  margin-right: 0.25rem;
+}
+
+.mr-2 {
+  margin-right: 0.5rem;
+}
+
+.mr-3 {
+  margin-right: 0.75rem;
+}
+
+.mr-5 {
+  margin-right: 1.25rem;
+}
+
+.mt-1 {
+  margin-top: 0.25rem;
+}
+
+.mt-2 {
+  margin-top: 0.5rem;
+}
+
+.mt-3 {
+  margin-top: 0.75rem;
+}
+
 .mt-4 {
   margin-top: 1rem;
 }
 
-.mt-auto {
-  margin-top: auto;
+.mt-5 {
+  margin-top: 1.25rem;
+}
+
+.mt-6 {
+  margin-top: 1.5rem;
 }
 
 .mt-7 {
   margin-top: 1.75rem;
 }
 
+.mt-8 {
+  margin-top: 2rem;
+}
+
+.mt-auto {
+  margin-top: auto;
+}
+
 .block {
   display: block;
 }
@@ -934,48 +930,48 @@ video {
   display: none;
 }
 
-.h-6 {
-  height: 1.5rem;
-}
-
-.h-24 {
-  height: 6rem;
-}
-
-.h-5 {
-  height: 1.25rem;
+.h-0 {
+  height: 0px;
 }
 
 .h-12 {
   height: 3rem;
 }
 
-.h-80 {
-  height: 20rem;
-}
-
-.h-8 {
-  height: 2rem;
-}
-
-.h-full {
-  height: 100%;
+.h-24 {
+  height: 6rem;
 }
 
 .h-32 {
   height: 8rem;
 }
 
-.h-0 {
-  height: 0px;
+.h-40 {
+  height: 10rem;
 }
 
 .h-48 {
   height: 12rem;
 }
 
-.h-40 {
-  height: 10rem;
+.h-5 {
+  height: 1.25rem;
+}
+
+.h-6 {
+  height: 1.5rem;
+}
+
+.h-8 {
+  height: 2rem;
+}
+
+.h-80 {
+  height: 20rem;
+}
+
+.h-full {
+  height: 100%;
 }
 
 .max-h-80 {
@@ -986,8 +982,80 @@ video {
   min-height: 100vh;
 }
 
-.w-full {
-  width: 100%;
+.w-0 {
+  width: 0px;
+}
+
+.w-1\/2 {
+  width: 50%;
+}
+
+.w-1\/3 {
+  width: 33.333333%;
+}
+
+.w-1\/4 {
+  width: 25%;
+}
+
+.w-1\/5 {
+  width: 20%;
+}
+
+.w-1\/6 {
+  width: 16.666667%;
+}
+
+.w-10 {
+  width: 2.5rem;
+}
+
+.w-11\/12 {
+  width: 91.666667%;
+}
+
+.w-16 {
+  width: 4rem;
+}
+
+.w-2\/3 {
+  width: 66.666667%;
+}
+
+.w-2\/5 {
+  width: 40%;
+}
+
+.w-20 {
+  width: 5rem;
+}
+
+.w-24 {
+  width: 6rem;
+}
+
+.w-3\/4 {
+  width: 75%;
+}
+
+.w-3\/5 {
+  width: 60%;
+}
+
+.w-32 {
+  width: 8rem;
+}
+
+.w-4\/5 {
+  width: 80%;
+}
+
+.w-5 {
+  width: 1.25rem;
+}
+
+.w-5\/6 {
+  width: 83.333333%;
 }
 
 .w-54rem {
@@ -998,92 +1066,36 @@ video {
   width: 1.5rem;
 }
 
-.w-32 {
-  width: 8rem;
-}
-
-.w-1\/2 {
-  width: 50%;
-}
-
-.w-1\/5 {
-  width: 20%;
-}
-
-.w-4\/5 {
-  width: 80%;
-}
-
-.w-2\/5 {
-  width: 40%;
-}
-
-.w-16 {
-  width: 4rem;
-}
-
-.w-5 {
-  width: 1.25rem;
-}
-
-.w-20 {
-  width: 5rem;
-}
-
-.w-1\/4 {
-  width: 25%;
-}
-
-.w-2\/3 {
-  width: 66.666667%;
-}
-
-.w-1\/3 {
-  width: 33.333333%;
-}
-
-.w-80 {
-  width: 20rem;
-}
-
-.w-1\/6 {
-  width: 16.666667%;
-}
-
-.w-5\/6 {
-  width: 83.333333%;
-}
-
-.w-3\/5 {
-  width: 60%;
+.w-60 {
+  width: 15rem;
 }
 
 .w-7 {
   width: 1.75rem;
 }
 
-.w-3\/4 {
-  width: 75%;
+.w-8 {
+  width: 2rem;
 }
 
-.w-60 {
-  width: 15rem;
+.w-80 {
+  width: 20rem;
 }
 
-.w-0 {
-  width: 0px;
+.w-full {
+  width: 100%;
 }
 
-.w-24 {
-  width: 6rem;
+.max-w-4xl {
+  max-width: 56rem;
 }
 
-.w-11\/12 {
-  width: 91.666667%;
+.max-w-6xl {
+  max-width: 72rem;
 }
 
-.w-10 {
-  width: 2.5rem;
+.max-w-7xl {
+  max-width: 80rem;
 }
 
 .max-w-md {
@@ -1094,18 +1106,6 @@ video {
   max-width: 20rem;
 }
 
-.max-w-4xl {
-  max-width: 56rem;
-}
-
-.max-w-7xl {
-  max-width: 80rem;
-}
-
-.max-w-6xl {
-  max-width: 72rem;
-}
-
 .flex-1 {
   flex: 1 1 0%;
 }
@@ -1131,12 +1131,6 @@ video {
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
 
-@-webkit-keyframes spin {
-  to {
-    transform: rotate(360deg);
-  }
-}
-
 @keyframes spin {
   to {
     transform: rotate(360deg);
@@ -1144,8 +1138,7 @@ video {
 }
 
 .animate-spin {
-  -webkit-animation: spin 1s linear infinite;
-          animation: spin 1s linear infinite;
+  animation: spin 1s linear infinite;
 }
 
 .cursor-pointer {
@@ -1244,16 +1237,16 @@ video {
   border-width: 2px;
 }
 
-.border-y {
-  border-top-width: 1px;
-  border-bottom-width: 1px;
-}
-
 .border-x-8 {
   border-left-width: 8px;
   border-right-width: 8px;
 }
 
+.border-y {
+  border-top-width: 1px;
+  border-bottom-width: 1px;
+}
+
 .border-b {
   border-bottom-width: 1px;
 }
@@ -1262,42 +1255,42 @@ video {
   border-bottom-width: 2px;
 }
 
-.border-t {
-  border-top-width: 1px;
-}
-
-.border-r-2 {
-  border-right-width: 2px;
-}
-
-.border-r {
-  border-right-width: 1px;
-}
-
-.border-l {
-  border-left-width: 1px;
-}
-
-.border-l-4 {
-  border-left-width: 4px;
+.border-b-4 {
+  border-bottom-width: 4px;
 }
 
 .border-b-8 {
   border-bottom-width: 8px;
 }
 
-.border-t-8 {
-  border-top-width: 8px;
-}
-
-.border-b-4 {
-  border-bottom-width: 4px;
+.border-l {
+  border-left-width: 1px;
 }
 
 .border-l-2 {
   border-left-width: 2px;
 }
 
+.border-l-4 {
+  border-left-width: 4px;
+}
+
+.border-r {
+  border-right-width: 1px;
+}
+
+.border-r-2 {
+  border-right-width: 2px;
+}
+
+.border-t {
+  border-top-width: 1px;
+}
+
+.border-t-8 {
+  border-top-width: 8px;
+}
+
 .border-solid {
   border-style: solid;
 }
@@ -1306,64 +1299,29 @@ video {
   border-style: dotted;
 }
 
+.border-cyan-500 {
+  --tw-border-opacity: 1;
+  border-color: rgb(6 182 212 / var(--tw-border-opacity));
+}
+
 .border-gray-300 {
   --tw-border-opacity: 1;
   border-color: rgb(209 213 219 / var(--tw-border-opacity));
 }
 
-.border-stone-50 {
-  --tw-border-opacity: 1;
-  border-color: rgb(250 250 249 / var(--tw-border-opacity));
-}
-
-.border-white {
-  --tw-border-opacity: 1;
-  border-color: rgb(255 255 255 / var(--tw-border-opacity));
-}
-
-.border-stone-200 {
-  --tw-border-opacity: 1;
-  border-color: rgb(231 229 228 / var(--tw-border-opacity));
-}
-
-.border-stone-700 {
-  --tw-border-opacity: 1;
-  border-color: rgb(68 64 60 / var(--tw-border-opacity));
-}
-
-.border-stone-300 {
-  --tw-border-opacity: 1;
-  border-color: rgb(214 211 209 / var(--tw-border-opacity));
-}
-
-.border-teal-500 {
-  --tw-border-opacity: 1;
-  border-color: rgb(20 184 166 / var(--tw-border-opacity));
-}
-
-.border-yellow-400 {
-  --tw-border-opacity: 1;
-  border-color: rgb(250 204 21 / var(--tw-border-opacity));
-}
-
-.border-rose-500 {
-  --tw-border-opacity: 1;
-  border-color: rgb(244 63 94 / var(--tw-border-opacity));
-}
-
 .border-red-500 {
   --tw-border-opacity: 1;
   border-color: rgb(239 68 68 / var(--tw-border-opacity));
 }
 
-.border-yellow-500 {
+.border-rose-100 {
   --tw-border-opacity: 1;
-  border-color: rgb(234 179 8 / var(--tw-border-opacity));
+  border-color: rgb(255 228 230 / var(--tw-border-opacity));
 }
 
-.border-cyan-500 {
+.border-rose-500 {
   --tw-border-opacity: 1;
-  border-color: rgb(6 182 212 / var(--tw-border-opacity));
+  border-color: rgb(244 63 94 / var(--tw-border-opacity));
 }
 
 .border-slate-200 {
@@ -1371,78 +1329,78 @@ video {
   border-color: rgb(226 232 240 / var(--tw-border-opacity));
 }
 
-.border-rose-100 {
-  --tw-border-opacity: 1;
-  border-color: rgb(255 228 230 / var(--tw-border-opacity));
-}
-
 .border-stone-100 {
   --tw-border-opacity: 1;
   border-color: rgb(245 245 244 / var(--tw-border-opacity));
 }
 
+.border-stone-200 {
+  --tw-border-opacity: 1;
+  border-color: rgb(231 229 228 / var(--tw-border-opacity));
+}
+
+.border-stone-300 {
+  --tw-border-opacity: 1;
+  border-color: rgb(214 211 209 / var(--tw-border-opacity));
+}
+
+.border-stone-50 {
+  --tw-border-opacity: 1;
+  border-color: rgb(250 250 249 / var(--tw-border-opacity));
+}
+
+.border-stone-700 {
+  --tw-border-opacity: 1;
+  border-color: rgb(68 64 60 / var(--tw-border-opacity));
+}
+
+.border-teal-500 {
+  --tw-border-opacity: 1;
+  border-color: rgb(20 184 166 / var(--tw-border-opacity));
+}
+
+.border-white {
+  --tw-border-opacity: 1;
+  border-color: rgb(255 255 255 / var(--tw-border-opacity));
+}
+
+.border-yellow-400 {
+  --tw-border-opacity: 1;
+  border-color: rgb(250 204 21 / var(--tw-border-opacity));
+}
+
+.border-yellow-500 {
+  --tw-border-opacity: 1;
+  border-color: rgb(234 179 8 / var(--tw-border-opacity));
+}
+
 .border-x-transparent {
   border-left-color: transparent;
   border-right-color: transparent;
 }
 
+.border-b-black {
+  --tw-border-opacity: 1;
+  border-bottom-color: rgb(0 0 0 / var(--tw-border-opacity));
+}
+
 .border-b-white {
   --tw-border-opacity: 1;
   border-bottom-color: rgb(255 255 255 / var(--tw-border-opacity));
 }
 
-.border-t-white {
-  --tw-border-opacity: 1;
-  border-top-color: rgb(255 255 255 / var(--tw-border-opacity));
-}
-
 .border-t-black {
   --tw-border-opacity: 1;
   border-top-color: rgb(0 0 0 / var(--tw-border-opacity));
 }
 
-.border-b-black {
+.border-t-white {
   --tw-border-opacity: 1;
-  border-bottom-color: rgb(0 0 0 / var(--tw-border-opacity));
+  border-top-color: rgb(255 255 255 / var(--tw-border-opacity));
 }
 
-.bg-teal-600 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(13 148 136 / var(--tw-bg-opacity));
-}
-
-.bg-white {
-  --tw-bg-opacity: 1;
-  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
-}
-
-.bg-stone-50 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(250 250 249 / var(--tw-bg-opacity));
-}
-
-.bg-stone-100 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(245 245 244 / var(--tw-bg-opacity));
-}
-
-.bg-transparent {
-  background-color: transparent;
-}
-
-.bg-stone-200 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(231 229 228 / var(--tw-bg-opacity));
-}
-
-.bg-stone-700 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(68 64 60 / var(--tw-bg-opacity));
-}
-
-.bg-teal-500 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(20 184 166 / var(--tw-bg-opacity));
+.bg-black\/75 {
+  background-color: rgb(0 0 0 / 0.75);
 }
 
 .bg-red-100 {
@@ -1450,14 +1408,9 @@ video {
   background-color: rgb(254 226 226 / var(--tw-bg-opacity));
 }
 
-.bg-stone-600 {
+.bg-rose-400 {
   --tw-bg-opacity: 1;
-  background-color: rgb(87 83 78 / var(--tw-bg-opacity));
-}
-
-.bg-stone-900 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(28 25 23 / var(--tw-bg-opacity));
+  background-color: rgb(251 113 133 / var(--tw-bg-opacity));
 }
 
 .bg-rose-500 {
@@ -1465,8 +1418,58 @@ video {
   background-color: rgb(244 63 94 / var(--tw-bg-opacity));
 }
 
-.bg-black\/75 {
-  background-color: rgb(0 0 0 / 0.75);
+.bg-stone-100 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(245 245 244 / var(--tw-bg-opacity));
+}
+
+.bg-stone-200 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(231 229 228 / var(--tw-bg-opacity));
+}
+
+.bg-stone-50 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(250 250 249 / var(--tw-bg-opacity));
+}
+
+.bg-stone-500 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(120 113 108 / var(--tw-bg-opacity));
+}
+
+.bg-stone-600 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(87 83 78 / var(--tw-bg-opacity));
+}
+
+.bg-stone-700 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(68 64 60 / var(--tw-bg-opacity));
+}
+
+.bg-stone-900 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(28 25 23 / var(--tw-bg-opacity));
+}
+
+.bg-teal-500 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(20 184 166 / var(--tw-bg-opacity));
+}
+
+.bg-teal-600 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(13 148 136 / var(--tw-bg-opacity));
+}
+
+.bg-transparent {
+  background-color: transparent;
+}
+
+.bg-white {
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
 }
 
 .bg-yellow-500 {
@@ -1474,11 +1477,6 @@ video {
   background-color: rgb(234 179 8 / var(--tw-bg-opacity));
 }
 
-.bg-stone-300 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(214 211 209 / var(--tw-bg-opacity));
-}
-
 .bg-opacity-90 {
   --tw-bg-opacity: 0.9;
 }
@@ -1491,16 +1489,24 @@ video {
   background-clip: padding-box;
 }
 
-.p-5 {
-  padding: 1.25rem;
+.p-1 {
+  padding: 0.25rem;
+}
+
+.p-2 {
+  padding: 0.5rem;
 }
 
 .p-3 {
   padding: 0.75rem;
 }
 
-.p-2 {
-  padding: 0.5rem;
+.p-4 {
+  padding: 1rem;
+}
+
+.p-5 {
+  padding: 1.25rem;
 }
 
 .p-6 {
@@ -1511,52 +1517,9 @@ video {
   padding: 2rem;
 }
 
-.p-1 {
-  padding: 0.25rem;
-}
-
-.p-4 {
-  padding: 1rem;
-}
-
-.py-5 {
-  padding-top: 1.25rem;
-  padding-bottom: 1.25rem;
-}
-
-.px-3 {
-  padding-left: 0.75rem;
-  padding-right: 0.75rem;
-}
-
-.py-3 {
-  padding-top: 0.75rem;
-  padding-bottom: 0.75rem;
-}
-
-.py-2 {
-  padding-top: 0.5rem;
-  padding-bottom: 0.5rem;
-}
-
-.py-1\.5 {
-  padding-top: 0.375rem;
-  padding-bottom: 0.375rem;
-}
-
-.py-1 {
-  padding-top: 0.25rem;
-  padding-bottom: 0.25rem;
-}
-
-.py-4 {
-  padding-top: 1rem;
-  padding-bottom: 1rem;
-}
-
-.px-4 {
-  padding-left: 1rem;
-  padding-right: 1rem;
+.px-1 {
+  padding-left: 0.25rem;
+  padding-right: 0.25rem;
 }
 
 .px-12 {
@@ -1564,14 +1527,9 @@ video {
   padding-right: 3rem;
 }
 
-.py-8 {
-  padding-top: 2rem;
-  padding-bottom: 2rem;
-}
-
-.px-6 {
-  padding-left: 1.5rem;
-  padding-right: 1.5rem;
+.px-16 {
+  padding-left: 4rem;
+  padding-right: 4rem;
 }
 
 .px-2 {
@@ -1579,19 +1537,14 @@ video {
   padding-right: 0.5rem;
 }
 
-.px-1 {
-  padding-left: 0.25rem;
-  padding-right: 0.25rem;
+.px-3 {
+  padding-left: 0.75rem;
+  padding-right: 0.75rem;
 }
 
-.py-10 {
-  padding-top: 2.5rem;
-  padding-bottom: 2.5rem;
-}
-
-.px-8 {
-  padding-left: 2rem;
-  padding-right: 2rem;
+.px-4 {
+  padding-left: 1rem;
+  padding-right: 1rem;
 }
 
 .px-5 {
@@ -1599,9 +1552,29 @@ video {
   padding-right: 1.25rem;
 }
 
-.px-16 {
-  padding-left: 4rem;
-  padding-right: 4rem;
+.px-6 {
+  padding-left: 1.5rem;
+  padding-right: 1.5rem;
+}
+
+.px-8 {
+  padding-left: 2rem;
+  padding-right: 2rem;
+}
+
+.py-1 {
+  padding-top: 0.25rem;
+  padding-bottom: 0.25rem;
+}
+
+.py-1\.5 {
+  padding-top: 0.375rem;
+  padding-bottom: 0.375rem;
+}
+
+.py-10 {
+  padding-top: 2.5rem;
+  padding-bottom: 2.5rem;
 }
 
 .py-16 {
@@ -1609,34 +1582,67 @@ video {
   padding-bottom: 4rem;
 }
 
-.pl-4 {
-  padding-left: 1rem;
+.py-2 {
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
 }
 
-.pr-6 {
-  padding-right: 1.5rem;
+.py-3 {
+  padding-top: 0.75rem;
+  padding-bottom: 0.75rem;
 }
 
-.pl-10 {
-  padding-left: 2.5rem;
+.py-4 {
+  padding-top: 1rem;
+  padding-bottom: 1rem;
 }
 
-.pr-2 {
-  padding-right: 0.5rem;
+.py-5 {
+  padding-top: 1.25rem;
+  padding-bottom: 1.25rem;
+}
+
+.py-8 {
+  padding-top: 2rem;
+  padding-bottom: 2rem;
+}
+
+.pb-3 {
+  padding-bottom: 0.75rem;
+}
+
+.pb-4 {
+  padding-bottom: 1rem;
 }
 
 .pb-6 {
   padding-bottom: 1.5rem;
 }
 
-.pl-3 {
-  padding-left: 0.75rem;
+.pl-10 {
+  padding-left: 2.5rem;
+}
+
+.pl-12 {
+  padding-left: 3rem;
 }
 
 .pl-2 {
   padding-left: 0.5rem;
 }
 
+.pl-24 {
+  padding-left: 6rem;
+}
+
+.pl-3 {
+  padding-left: 0.75rem;
+}
+
+.pl-4 {
+  padding-left: 1rem;
+}
+
 .pl-6 {
   padding-left: 1.5rem;
 }
@@ -1649,14 +1655,6 @@ video {
   padding-left: 2.25rem;
 }
 
-.pl-12 {
-  padding-left: 3rem;
-}
-
-.pl-24 {
-  padding-left: 6rem;
-}
-
 .pr-1 {
   padding-right: 0.25rem;
 }
@@ -1665,30 +1663,30 @@ video {
   padding-right: 2.5rem;
 }
 
+.pr-2 {
+  padding-right: 0.5rem;
+}
+
 .pr-3 {
   padding-right: 0.75rem;
 }
 
-.pb-4 {
-  padding-bottom: 1rem;
+.pr-6 {
+  padding-right: 1.5rem;
 }
 
 .pt-2 {
   padding-top: 0.5rem;
 }
 
-.pt-6 {
-  padding-top: 1.5rem;
-}
-
-.pb-3 {
-  padding-bottom: 0.75rem;
-}
-
 .pt-3 {
   padding-top: 0.75rem;
 }
 
+.pt-6 {
+  padding-top: 1.5rem;
+}
+
 .text-left {
   text-align: left;
 }
@@ -1713,11 +1711,36 @@ video {
   font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
 }
 
+.text-2xl {
+  font-size: 1.5rem;
+  line-height: 2rem;
+}
+
+.text-3xl {
+  font-size: 1.875rem;
+  line-height: 2.25rem;
+}
+
 .text-4xl {
   font-size: 2.25rem;
   line-height: 2.5rem;
 }
 
+.text-base {
+  font-size: 1rem;
+  line-height: 1.5rem;
+}
+
+.text-lg {
+  font-size: 1.125rem;
+  line-height: 1.75rem;
+}
+
+.text-sm {
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+}
+
 .text-xl {
   font-size: 1.25rem;
   line-height: 1.75rem;
@@ -1728,31 +1751,6 @@ video {
   line-height: 1rem;
 }
 
-.text-base {
-  font-size: 1rem;
-  line-height: 1.5rem;
-}
-
-.text-sm {
-  font-size: 0.875rem;
-  line-height: 1.25rem;
-}
-
-.text-2xl {
-  font-size: 1.5rem;
-  line-height: 2rem;
-}
-
-.text-lg {
-  font-size: 1.125rem;
-  line-height: 1.75rem;
-}
-
-.text-3xl {
-  font-size: 1.875rem;
-  line-height: 2.25rem;
-}
-
 .font-bold {
   font-weight: 700;
 }
@@ -1781,9 +1779,14 @@ video {
   line-height: 1.25;
 }
 
-.text-white {
+.text-black {
   --tw-text-opacity: 1;
-  color: rgb(255 255 255 / var(--tw-text-opacity));
+  color: rgb(0 0 0 / var(--tw-text-opacity));
+}
+
+.text-gray-500 {
+  --tw-text-opacity: 1;
+  color: rgb(107 114 128 / var(--tw-text-opacity));
 }
 
 .text-gray-700 {
@@ -1791,14 +1794,9 @@ video {
   color: rgb(55 65 81 / var(--tw-text-opacity));
 }
 
-.text-stone-50 {
+.text-red-500 {
   --tw-text-opacity: 1;
-  color: rgb(250 250 249 / var(--tw-text-opacity));
-}
-
-.text-teal-600 {
-  --tw-text-opacity: 1;
-  color: rgb(13 148 136 / var(--tw-text-opacity));
+  color: rgb(239 68 68 / var(--tw-text-opacity));
 }
 
 .text-rose-300 {
@@ -1806,14 +1804,29 @@ video {
   color: rgb(253 164 175 / var(--tw-text-opacity));
 }
 
+.text-rose-500 {
+  --tw-text-opacity: 1;
+  color: rgb(244 63 94 / var(--tw-text-opacity));
+}
+
+.text-stone-200 {
+  --tw-text-opacity: 1;
+  color: rgb(231 229 228 / var(--tw-text-opacity));
+}
+
+.text-stone-300 {
+  --tw-text-opacity: 1;
+  color: rgb(214 211 209 / var(--tw-text-opacity));
+}
+
 .text-stone-400 {
   --tw-text-opacity: 1;
   color: rgb(168 162 158 / var(--tw-text-opacity));
 }
 
-.text-stone-900 {
+.text-stone-50 {
   --tw-text-opacity: 1;
-  color: rgb(28 25 23 / var(--tw-text-opacity));
+  color: rgb(250 250 249 / var(--tw-text-opacity));
 }
 
 .text-stone-500 {
@@ -1826,19 +1839,9 @@ video {
   color: rgb(68 64 60 / var(--tw-text-opacity));
 }
 
-.text-stone-300 {
+.text-stone-900 {
   --tw-text-opacity: 1;
-  color: rgb(214 211 209 / var(--tw-text-opacity));
-}
-
-.text-red-500 {
-  --tw-text-opacity: 1;
-  color: rgb(239 68 68 / var(--tw-text-opacity));
-}
-
-.text-gray-500 {
-  --tw-text-opacity: 1;
-  color: rgb(107 114 128 / var(--tw-text-opacity));
+  color: rgb(28 25 23 / var(--tw-text-opacity));
 }
 
 .text-teal-300 {
@@ -1851,24 +1854,18 @@ video {
   color: rgb(20 184 166 / var(--tw-text-opacity));
 }
 
-.text-stone-200 {
+.text-teal-600 {
   --tw-text-opacity: 1;
-  color: rgb(231 229 228 / var(--tw-text-opacity));
+  color: rgb(13 148 136 / var(--tw-text-opacity));
 }
 
-.text-black {
+.text-white {
   --tw-text-opacity: 1;
-  color: rgb(0 0 0 / var(--tw-text-opacity));
-}
-
-.text-rose-500 {
-  --tw-text-opacity: 1;
-  color: rgb(244 63 94 / var(--tw-text-opacity));
+  color: rgb(255 255 255 / var(--tw-text-opacity));
 }
 
 .underline {
-  -webkit-text-decoration-line: underline;
-          text-decoration-line: underline;
+  text-decoration-line: underline;
 }
 
 .caret-white {
@@ -1883,17 +1880,17 @@ video {
   opacity: 0;
 }
 
-.opacity-75 {
-  opacity: 0.75;
-}
-
 .opacity-25 {
   opacity: 0.25;
 }
 
-.shadow-md {
-  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
-  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
+.opacity-75 {
+  opacity: 0.75;
+}
+
+.shadow {
+  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
+  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 
@@ -1903,9 +1900,9 @@ video {
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 
-.shadow {
-  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
-  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
+.shadow-md {
+  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 
@@ -1918,23 +1915,26 @@ video {
   outline-style: solid;
 }
 
-.blur {
-  --tw-blur: blur(8px);
-  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
+.\!filter {
+  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow) !important;
 }
 
 .filter {
   filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
 }
 
-.\!filter {
-  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow) !important;
+.\!transition {
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter !important;
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter !important;
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter !important;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important;
+  transition-duration: 150ms !important;
 }
 
 .transition {
-  transition-property: color, background-color, border-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-text-decoration-color, -webkit-backdrop-filter;
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
   transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
-  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-text-decoration-color, -webkit-backdrop-filter;
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
   transition-duration: 150ms;
 }
@@ -1945,14 +1945,6 @@ video {
   transition-duration: 150ms;
 }
 
-.\!transition {
-  transition-property: color, background-color, border-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-text-decoration-color, -webkit-backdrop-filter !important;
-  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter !important;
-  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-text-decoration-color, -webkit-backdrop-filter !important;
-  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important;
-  transition-duration: 150ms !important;
-}
-
 .duration-100 {
   transition-duration: 100ms;
 }
@@ -1961,6 +1953,11 @@ video {
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
 }
 
+.hover\:border-rose-500:hover {
+  --tw-border-opacity: 1;
+  border-color: rgb(244 63 94 / var(--tw-border-opacity));
+}
+
 .hover\:border-stone-700:hover {
   --tw-border-opacity: 1;
   border-color: rgb(68 64 60 / var(--tw-border-opacity));
@@ -1971,24 +1968,24 @@ video {
   border-color: rgb(20 184 166 / var(--tw-border-opacity));
 }
 
-.hover\:border-rose-500:hover {
-  --tw-border-opacity: 1;
-  border-color: rgb(244 63 94 / var(--tw-border-opacity));
+.hover\:bg-rose-500:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(244 63 94 / var(--tw-bg-opacity));
 }
 
-.hover\:bg-stone-50:hover {
+.hover\:bg-rose-600:hover {
   --tw-bg-opacity: 1;
-  background-color: rgb(250 250 249 / var(--tw-bg-opacity));
+  background-color: rgb(225 29 72 / var(--tw-bg-opacity));
 }
 
-.hover\:bg-teal-700:hover {
+.hover\:bg-rose-700:hover {
   --tw-bg-opacity: 1;
-  background-color: rgb(15 118 110 / var(--tw-bg-opacity));
+  background-color: rgb(190 18 60 / var(--tw-bg-opacity));
 }
 
-.hover\:bg-teal-500:hover {
+.hover\:bg-stone-100:hover {
   --tw-bg-opacity: 1;
-  background-color: rgb(20 184 166 / var(--tw-bg-opacity));
+  background-color: rgb(245 245 244 / var(--tw-bg-opacity));
 }
 
 .hover\:bg-stone-200:hover {
@@ -1996,14 +1993,19 @@ video {
   background-color: rgb(231 229 228 / var(--tw-bg-opacity));
 }
 
-.hover\:bg-rose-500:hover {
+.hover\:bg-stone-300:hover {
   --tw-bg-opacity: 1;
-  background-color: rgb(244 63 94 / var(--tw-bg-opacity));
+  background-color: rgb(214 211 209 / var(--tw-bg-opacity));
 }
 
-.hover\:bg-stone-100:hover {
+.hover\:bg-stone-50:hover {
   --tw-bg-opacity: 1;
-  background-color: rgb(245 245 244 / var(--tw-bg-opacity));
+  background-color: rgb(250 250 249 / var(--tw-bg-opacity));
+}
+
+.hover\:bg-stone-600:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(87 83 78 / var(--tw-bg-opacity));
 }
 
 .hover\:bg-stone-700:hover {
@@ -2016,14 +2018,9 @@ video {
   background-color: rgb(28 25 23 / var(--tw-bg-opacity));
 }
 
-.hover\:bg-stone-300:hover {
+.hover\:bg-teal-500:hover {
   --tw-bg-opacity: 1;
-  background-color: rgb(214 211 209 / var(--tw-bg-opacity));
-}
-
-.hover\:bg-rose-700:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(190 18 60 / var(--tw-bg-opacity));
+  background-color: rgb(20 184 166 / var(--tw-bg-opacity));
 }
 
 .hover\:bg-teal-600:hover {
@@ -2031,29 +2028,19 @@ video {
   background-color: rgb(13 148 136 / var(--tw-bg-opacity));
 }
 
+.hover\:bg-teal-700:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(15 118 110 / var(--tw-bg-opacity));
+}
+
 .hover\:bg-yellow-600:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(202 138 4 / var(--tw-bg-opacity));
 }
 
-.hover\:bg-rose-600:hover {
+.hover\:bg-stone-800:hover {
   --tw-bg-opacity: 1;
-  background-color: rgb(225 29 72 / var(--tw-bg-opacity));
-}
-
-.hover\:text-stone-800:hover {
-  --tw-text-opacity: 1;
-  color: rgb(41 37 36 / var(--tw-text-opacity));
-}
-
-.hover\:text-stone-50:hover {
-  --tw-text-opacity: 1;
-  color: rgb(250 250 249 / var(--tw-text-opacity));
-}
-
-.hover\:text-white:hover {
-  --tw-text-opacity: 1;
-  color: rgb(255 255 255 / var(--tw-text-opacity));
+  background-color: rgb(41 37 36 / var(--tw-bg-opacity));
 }
 
 .hover\:text-stone-100:hover {
@@ -2061,14 +2048,28 @@ video {
   color: rgb(245 245 244 / var(--tw-text-opacity));
 }
 
+.hover\:text-stone-50:hover {
+  --tw-text-opacity: 1;
+  color: rgb(250 250 249 / var(--tw-text-opacity));
+}
+
 .hover\:text-stone-700:hover {
   --tw-text-opacity: 1;
   color: rgb(68 64 60 / var(--tw-text-opacity));
 }
 
+.hover\:text-stone-800:hover {
+  --tw-text-opacity: 1;
+  color: rgb(41 37 36 / var(--tw-text-opacity));
+}
+
+.hover\:text-white:hover {
+  --tw-text-opacity: 1;
+  color: rgb(255 255 255 / var(--tw-text-opacity));
+}
+
 .hover\:underline:hover {
-  -webkit-text-decoration-line: underline;
-          text-decoration-line: underline;
+  text-decoration-line: underline;
 }
 
 .hover\:opacity-100:hover {
@@ -2086,11 +2087,6 @@ video {
   border-color: rgb(37 99 235 / var(--tw-border-opacity));
 }
 
-.focus\:bg-white:focus {
-  --tw-bg-opacity: 1;
-  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
-}
-
 .focus\:bg-stone-200:focus {
   --tw-bg-opacity: 1;
   background-color: rgb(231 229 228 / var(--tw-bg-opacity));
@@ -2101,6 +2097,11 @@ video {
   background-color: rgb(250 250 249 / var(--tw-bg-opacity));
 }
 
+.focus\:bg-white:focus {
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
+}
+
 .focus\:text-gray-700:focus {
   --tw-text-opacity: 1;
   color: rgb(55 65 81 / var(--tw-text-opacity));
@@ -2131,179 +2132,184 @@ video {
   background-color: rgb(231 229 228 / var(--tw-bg-opacity));
 }
 
-.disabled\:text-stone-900:disabled {
-  --tw-text-opacity: 1;
-  color: rgb(28 25 23 / var(--tw-text-opacity));
-}
-
 .disabled\:text-stone-800:disabled {
   --tw-text-opacity: 1;
   color: rgb(41 37 36 / var(--tw-text-opacity));
 }
 
+.disabled\:text-stone-900:disabled {
+  --tw-text-opacity: 1;
+  color: rgb(28 25 23 / var(--tw-text-opacity));
+}
+
 .group:hover .group-hover\:visible {
   visibility: visible;
 }
 
-.dark .dark\:border {
+.dark\:border:is(.dark *) {
   border-width: 1px;
 }
 
-.dark .dark\:border-0 {
+.dark\:border-0:is(.dark *) {
   border-width: 0px;
 }
 
-.dark .dark\:border-stone-600 {
+.dark\:border-stone-200:is(.dark *) {
+  --tw-border-opacity: 1;
+  border-color: rgb(231 229 228 / var(--tw-border-opacity));
+}
+
+.dark\:border-stone-600:is(.dark *) {
   --tw-border-opacity: 1;
   border-color: rgb(87 83 78 / var(--tw-border-opacity));
 }
 
-.dark .dark\:border-stone-700 {
+.dark\:border-stone-700:is(.dark *) {
   --tw-border-opacity: 1;
   border-color: rgb(68 64 60 / var(--tw-border-opacity));
 }
 
-.dark .dark\:border-stone-900 {
+.dark\:border-stone-900:is(.dark *) {
   --tw-border-opacity: 1;
   border-color: rgb(28 25 23 / var(--tw-border-opacity));
 }
 
-.dark .dark\:border-stone-200 {
-  --tw-border-opacity: 1;
-  border-color: rgb(231 229 228 / var(--tw-border-opacity));
+.dark\:bg-stone-200:is(.dark *) {
+  --tw-bg-opacity: 1;
+  background-color: rgb(231 229 228 / var(--tw-bg-opacity));
 }
 
-.dark .dark\:bg-stone-700 {
+.dark\:bg-stone-600:is(.dark *) {
+  --tw-bg-opacity: 1;
+  background-color: rgb(87 83 78 / var(--tw-bg-opacity));
+}
+
+.dark\:bg-stone-700:is(.dark *) {
   --tw-bg-opacity: 1;
   background-color: rgb(68 64 60 / var(--tw-bg-opacity));
 }
 
-.dark .dark\:bg-stone-600 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(87 83 78 / var(--tw-bg-opacity));
-}
-
-.dark .dark\:bg-stone-900 {
+.dark\:bg-stone-900:is(.dark *) {
   --tw-bg-opacity: 1;
   background-color: rgb(28 25 23 / var(--tw-bg-opacity));
 }
 
-.dark .dark\:bg-stone-200 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(231 229 228 / var(--tw-bg-opacity));
-}
-
-.dark .dark\:text-stone-200 {
-  --tw-text-opacity: 1;
-  color: rgb(231 229 228 / var(--tw-text-opacity));
-}
-
-.dark .dark\:text-stone-900 {
-  --tw-text-opacity: 1;
-  color: rgb(28 25 23 / var(--tw-text-opacity));
-}
-
-.dark .dark\:text-stone-600 {
-  --tw-text-opacity: 1;
-  color: rgb(87 83 78 / var(--tw-text-opacity));
-}
-
-.dark .dark\:text-gray-400 {
+.dark\:text-gray-400:is(.dark *) {
   --tw-text-opacity: 1;
   color: rgb(156 163 175 / var(--tw-text-opacity));
 }
 
-.dark .dark\:text-stone-300 {
+.dark\:text-stone-200:is(.dark *) {
+  --tw-text-opacity: 1;
+  color: rgb(231 229 228 / var(--tw-text-opacity));
+}
+
+.dark\:text-stone-300:is(.dark *) {
   --tw-text-opacity: 1;
   color: rgb(214 211 209 / var(--tw-text-opacity));
 }
 
-.dark .dark\:text-stone-50 {
+.dark\:text-stone-50:is(.dark *) {
   --tw-text-opacity: 1;
   color: rgb(250 250 249 / var(--tw-text-opacity));
 }
 
-.dark .hover\:dark\:border-stone-200:hover {
-  --tw-border-opacity: 1;
-  border-color: rgb(231 229 228 / var(--tw-border-opacity));
+.dark\:text-stone-600:is(.dark *) {
+  --tw-text-opacity: 1;
+  color: rgb(87 83 78 / var(--tw-text-opacity));
 }
 
-.dark .hover\:dark\:border-rose-500:hover {
+.dark\:text-stone-900:is(.dark *) {
+  --tw-text-opacity: 1;
+  color: rgb(28 25 23 / var(--tw-text-opacity));
+}
+
+.hover\:dark\:border-rose-500:is(.dark *):hover {
   --tw-border-opacity: 1;
   border-color: rgb(244 63 94 / var(--tw-border-opacity));
 }
 
-.dark .hover\:dark\:border-stone-600:hover {
+.hover\:dark\:border-stone-200:is(.dark *):hover {
+  --tw-border-opacity: 1;
+  border-color: rgb(231 229 228 / var(--tw-border-opacity));
+}
+
+.hover\:dark\:border-stone-600:is(.dark *):hover {
   --tw-border-opacity: 1;
   border-color: rgb(87 83 78 / var(--tw-border-opacity));
 }
 
-.dark .hover\:dark\:bg-teal-500:hover {
+.dark\:hover\:bg-stone-200:hover:is(.dark *) {
+  --tw-bg-opacity: 1;
+  background-color: rgb(231 229 228 / var(--tw-bg-opacity));
+}
+
+.dark\:hover\:bg-teal-500:hover:is(.dark *) {
   --tw-bg-opacity: 1;
   background-color: rgb(20 184 166 / var(--tw-bg-opacity));
 }
 
-.dark .hover\:dark\:bg-rose-500:hover {
+.hover\:dark\:bg-rose-500:is(.dark *):hover {
   --tw-bg-opacity: 1;
   background-color: rgb(244 63 94 / var(--tw-bg-opacity));
 }
 
-.dark .hover\:dark\:bg-stone-900:hover {
+.hover\:dark\:bg-stone-200:is(.dark *):hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(231 229 228 / var(--tw-bg-opacity));
+}
+
+.hover\:dark\:bg-stone-500:is(.dark *):hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(120 113 108 / var(--tw-bg-opacity));
+}
+
+.hover\:dark\:bg-stone-600:is(.dark *):hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(87 83 78 / var(--tw-bg-opacity));
+}
+
+.hover\:dark\:bg-stone-900:is(.dark *):hover {
   --tw-bg-opacity: 1;
   background-color: rgb(28 25 23 / var(--tw-bg-opacity));
 }
 
-.dark .hover\:dark\:bg-stone-600:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(87 83 78 / var(--tw-bg-opacity));
-}
-
-.dark .dark\:hover\:bg-stone-200:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(231 229 228 / var(--tw-bg-opacity));
-}
-
-.dark .hover\:dark\:bg-stone-200:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(231 229 228 / var(--tw-bg-opacity));
-}
-
-.dark .dark\:hover\:bg-teal-500:hover {
+.hover\:dark\:bg-teal-500:is(.dark *):hover {
   --tw-bg-opacity: 1;
   background-color: rgb(20 184 166 / var(--tw-bg-opacity));
 }
 
-.dark .hover\:dark\:text-stone-900:hover {
+.hover\:dark\:text-stone-900:is(.dark *):hover {
   --tw-text-opacity: 1;
   color: rgb(28 25 23 / var(--tw-text-opacity));
 }
 
-.dark .focus\:dark\:border-stone-600:focus {
+.focus\:dark\:border-stone-600:is(.dark *):focus {
   --tw-border-opacity: 1;
   border-color: rgb(87 83 78 / var(--tw-border-opacity));
 }
 
-.dark .focus\:dark\:text-stone-900:focus {
+.focus\:dark\:text-stone-900:is(.dark *):focus {
   --tw-text-opacity: 1;
   color: rgb(28 25 23 / var(--tw-text-opacity));
 }
 
-.dark .active\:dark\:border-stone-600:active {
+.active\:dark\:border-stone-600:is(.dark *):active {
   --tw-border-opacity: 1;
   border-color: rgb(87 83 78 / var(--tw-border-opacity));
 }
 
-.dark .active\:dark\:text-stone-900:active {
+.active\:dark\:text-stone-900:is(.dark *):active {
   --tw-text-opacity: 1;
   color: rgb(28 25 23 / var(--tw-text-opacity));
 }
 
-.dark .disabled\:dark\:bg-stone-600:disabled {
+.disabled\:dark\:bg-stone-600:is(.dark *):disabled {
   --tw-bg-opacity: 1;
   background-color: rgb(87 83 78 / var(--tw-bg-opacity));
 }
 
-.dark .disabled\:dark\:text-stone-200:disabled {
+.disabled\:dark\:text-stone-200:is(.dark *):disabled {
   --tw-text-opacity: 1;
   color: rgb(231 229 228 / var(--tw-text-opacity));
 }
@@ -2343,16 +2349,16 @@ video {
     width: 50%;
   }
 
-  .lg\:w-half {
-    width: 48%;
+  .lg\:w-1\/4 {
+    width: 25%;
   }
 
   .lg\:w-3\/4 {
     width: 75%;
   }
 
-  .lg\:w-1\/4 {
-    width: 25%;
+  .lg\:w-half {
+    width: 48%;
   }
 
   .lg\:flex-row {
@@ -2377,14 +2383,14 @@ video {
     padding-right: 1rem;
   }
 
-  .lg\:pt-4 {
-    padding-top: 1rem;
-  }
-
   .lg\:pb-3 {
     padding-bottom: 0.75rem;
   }
 
+  .lg\:pt-4 {
+    padding-top: 1rem;
+  }
+
   .lg\:text-black {
     --tw-text-opacity: 1;
     color: rgb(0 0 0 / var(--tw-text-opacity));
diff --git a/system/typemill/author/js/vue-blox-components.js b/system/typemill/author/js/vue-blox-components.js
index 2b523db..68c70f0 100644
--- a/system/typemill/author/js/vue-blox-components.js
+++ b/system/typemill/author/js/vue-blox-components.js
@@ -2306,128 +2306,338 @@ bloxeditor.component('file-component', {
 
 bloxeditor.component('video-component', {
 	props: ['markdown', 'disabled', 'index'],
-	template: `<div class="video dropbox p-8">
-					<div class="absolute top-3 -left-5 text-stone-400">
-						<svg class="icon icon-play">
-							<use xlink:href="#icon-play"></use>
-						</svg>
+	components: {
+		medialib: medialib
+	},
+	template: `<div class="dropbox">
+				<input type="hidden" ref="markdown" :value="markdown" :disabled="disabled" @input="updatemarkdown" />
+				<div class="flex">
+					<div class="imageupload relative w-1/2 border-r border-dotted border-stone-700">
+						<input type="file"  name="file" accept="video/mp4,video/webm,video/ogg" class="opacity-0 w-full h-24 absolute cursor-pointer z-10" @change="onFileChange( $event )" />
+						<p class="text-center p-6">
+							<svg class="icon icon-upload">
+								<use xlink:href="#icon-upload"></use>
+							</svg> 
+							{{ $filters.translate('upload video') }}
+						</p>
 					</div>
-					<div class="flex mt-2 mb-2">
-						<label class="w-1/5 py-2" for="video">{{ $filters.translate('Link to youtube') }}: </label> 
-						<input class="w-4/5 p-2 bg-stone-200 text-stone-900" type="url" ref="markdown" placeholder="https://www.youtube.com/watch?v=" :value="markdown" :disabled="disabled" @input="updatemarkdown($event.target.value)">
+					<button class="imageselect w-1/2 text-center p-6" @click.prevent="openmedialib('files')">
+						<svg class="icon icon-paperclip baseline">
+							<use xlink:href="#icon-paperclip"></use>
+						</svg> 
+						{{ $filters.translate('select from medialib') }}
+					</button>
+				</div>
+
+				<Transition name="initial" appear>
+					<div v-if="showmedialib == 'files'" class="fixed top-0 left-0 right-0 bottom-0 bg-stone-100 z-50">
+						<button class="w-full bg-stone-200 hover:bg-rose-500 hover:text-white p-2 transition duration-100" @click.prevent="showmedialib = false">{{ $filters.translate('close library') }}</button>
+						<medialib parentcomponent="files" @addFromMedialibEvent="addFromMedialibFunction"></medialib>
 					</div>
-			</div>`,
+				</Transition>
+				<Transition name="initial" appear>
+					<div v-if="showmedialib == 'images'" class="fixed top-0 left-0 right-0 bottom-0 bg-stone-100 z-50">
+						<button class="w-full bg-stone-200 hover:bg-rose-500 hover:text-white p-2 transition duration-100" @click.prevent="showmedialib = false">{{ $filters.translate('close library') }}</button>
+						<medialib parentcomponent="images" @addFromMedialibEvent="addFromMedialibFunction"></medialib>
+					</div>
+				</Transition>
+
+				<div class="absolute top-3 -left-5 text-stone-400">
+					<svg class="icon icon-paperclip">
+						<use xlink:href="#icon-paperclip"></use>
+					</svg>
+				</div>
+				<div v-if="load" class="loadwrapper"><span class="load"></span></div>
+				<div class="imgmeta p-8" v-if="filemeta">
+					<input 
+						title 		= "fileid" 
+						type 		= "hidden" 
+						placeholder = "id" 
+						v-model 	= "fileid" 
+						@input 		= "createmarkdown" 
+						max 		= "140" 
+						/>
+					<div class="flex mb-2">
+						<label class="w-1/5 py-2" for="path">{{ $filters.translate('Path') }}: </label>
+						<input class="w-4/5 p-2 bg-stone-200 text-stone-900" name="path" type="text" readonly="true" v-model="fileurl" />
+					</div>
+					<div class="flex mb-2">
+						<label class="w-1/5 py-2" for="width">{{ $filters.translate('Width') }}: </label>
+						<input class="w-4/5 p-2 bg-stone-200 text-stone-900" name="width" type="text" placeholder="500" v-model="width" @input="createmarkdown" />
+					</div>
+					<div class="flex mb-2">
+					    <label class="w-1/5 py-2" for="videopreload">{{ $filters.translate('Preload') }}: </label>
+					    <select class="w-4/5 p-2 bg-stone-200 text-stone-900" name="videopreload" v-model="preload" @change="createmarkdown">
+					        <option value="none">none</option>
+					        <option value="metadata">metadata</option>
+					        <option value="auto">auto</option>
+					    </select>
+					</div>
+					<div class="flex mb-2">
+						<label class="w-1/5 py-2" for="imagepath">{{ $filters.translate('Image') }}: </label>
+						<div class="flex w-4/5 justify-between">
+							<button @click.prevent="deleteImage()" class="w-8 bg-rose-500 dark:bg-stone-600 hover:bg-rose-600 hover:dark:bg-rose-500 text-white">x</button>
+							<input class="w-full p-2 bg-stone-200 text-stone-900" name="path" type="text" readonly="true" v-model="imageurl" />
+							<button @click.prevent="openmedialib('images')" class="w-8 bg-stone-600 dark:bg-stone-600 hover:bg-stone-800 hover:dark:bg-stone-500 text-white"><svg class="icon icon-image"><use xlink:href="#icon-image"></use></svg></button>
+						</div>
+					</div>
+				</div>
+  			</div>`,
 	data: function(){
 		return {
-			edited: false,
-			url: false,
-			videoid: false,
-			param: false,
-			path: false,
-			provider: false,
-			providerurl: false,
-			compmarkdown: '',
+			maxsize: 100, // megabyte
+			showmedialib: false,
+			load: false,
+			filemeta: false,
+			fileextension: '',
+			allowedImageExtensions: ['webp', 'png', 'svg', 'jpg', 'jpeg'],
+			allowedExtensions: ['mp4', 'webm', 'ogg'],
+			fileurl: '',
+			width: '500',
+			fileid: '',
+			imageurl: '',
+			savefile: false,
+			mediatypes: 'files',
+			preload: 'none',
 		}
 	},
-	mounted: function(){
+	mounted: function() {
+	    eventBus.$on('beforeSave', this.beforeSave);
 
-		eventBus.$on('beforeSave', this.beforeSave );
+	    this.$refs.markdown.focus();
 
-		this.$refs.markdown.focus();
+	    if (this.markdown) 
+	    {
+	        this.filemeta = true;
 
-		if(this.markdown)
-		{
-			this.parseImageMarkdown(this.markdown);
-		}
+	        var fileurl = this.markdown.match(/path="(.*?)"/);
+	        if (fileurl && fileurl[1]) 
+	        {
+	            this.fileurl = fileurl[1];
+	        }
+
+	        var width = this.markdown.match(/width="(.*?)"/);
+	        if (width && width[1]) 
+	        {
+	            this.width = width[1];
+	        } 
+
+	        var preload = this.markdown.match(/preload="(.*?)"/);
+	        if (preload && preload[1]) 
+	        {
+	            this.preload = preload[1];
+	        } 
+
+	        var poster = this.markdown.match(/poster="(.*?)"/);
+	        if (poster && poster[1]) 
+	        {
+	            this.imageurl = poster[1];
+	        } 
+	    }
 	},
 	methods: {
-		generateMarkdown()
+		addFromMedialibFunction(file)
 		{
-			this.compmarkdown = '![' + this.provider + '-video](' + this.path + ' "click to load video"){#' + this.videoid + ' .' + this.provider + '}';
+		    this.showmedialib  = false;
+		    this.savefile      = false;
+		    this.filemeta      = true;
+
+		    if (typeof file === 'string')
+		    {
+		        let fileExtension = file.split('.').pop().toLowerCase();
+
+		        if (this.allowedImageExtensions.includes(fileExtension))
+		        {
+		            this.imageurl = file;
+		        }
+		        else 
+		        {
+		            let message = "Unsupported file type. Please select an image with format webp, png, jpg, jpeg. svg.";
+		            eventBus.$emit('publishermessage', message);
+		            return;
+		        }
+		    } 
+		    else if (this.allowedExtensions.includes(file.info.extension.toLowerCase()))
+		    {
+		        this.filetitle    = file.name;
+		        this.fileextension = file.info.extension.toLowerCase();
+		        this.fileurl       = file.url;
+		    }
+		    else 
+		    {
+		        let message = "Unsupported file type. Please select a valid video file (webm, mp4, ogg).";
+		        eventBus.$emit('publishermessage', message);
+		        return;
+		    }
+
+		    this.createmarkdown();
 		},
-		parseImageMarkdown(imageMarkdown)
+		openmedialib(type)
 		{
-			let regexpurl = /\((.*)(".*")\)/;
-			let match = imageMarkdown.match(regexpurl);
-			let imageUrl = match[1];
-
-			let regexprov = /live\/(.*?)-/;
-			let matchprov = imageUrl.match(regexprov);
-			this.provider = matchprov[1];
-
-			if(this.provider == 'youtube')
-			{
-				this.providerurl = "https://www.youtube.com/watch";
-				this.param = "v=";
-			}
-
-			let videoid = imageMarkdown.match(/#.*? /);
-			if(videoid)
-			{
-				this.videoid = videoid[0].trim().substring(1);
-			}
-			
-			this.updatemarkdown(this.providerurl + "?" + this.param + this.videoid);
+			this.showmedialib = type;
 		},
-		parseUrl(url)
+		deleteImage()
 		{
-			let urlparts = url.split('?');
-			let urlParams = new URLSearchParams(urlparts[1]);
-
-			this.providerurl = urlparts[0];
-
-			if(urlParams.has("v"))
+			this.imageurl = '';
+		},
+		isChecked(classname)
+		{
+			if(this.fileclass == classname)
 			{
-				this.param 		= "v=";
-				this.videoid 	= urlParams.get("v");
-				this.provider 	= "youtube";
-			}
-			if(this.provider != "youtube")
-			{
-				this.updatemarkdown("");
-				let message = this.$filters.translate("We only support youtube right now.");
-				eventBus.$emit('publishermessage', message);
+				return ' checked';
 			}
 		},
-		updatemarkdown(url)
+		updatemarkdown(event, url)
 		{
-			this.edited = true;
-			this.url = url;
-			this.parseUrl(url);
-			this.generateMarkdown();
-			this.$emit('updateMarkdownEvent', url);
+			this.$emit('updateMarkdownEvent', event.target.value);
+		},
+		createmarkdown()
+		{
+		    var errors = false;
+		    var filemarkdown = false;
+
+		    if (this.fileurl !== '')
+		    {
+		        if (this.fileurl.length < 101)
+		        {
+		            var width 	= this.width ? ' width="' + this.width + '"' : '';
+		            var preload = this.preload ? ' preload="' + this.preload + '"' : ' preload="none"';
+		            var poster 	= this.imageurl ? ' poster="' + this.imageurl + '"' : '';
+
+		            filemarkdown = '[:video path="' + this.fileurl + '"' + width + preload + poster + ' :]';
+		        } 
+		        else 
+		        {
+		            errors = this.$filters.translate('Maximum size of file link is 100 characters');
+		        }
+		    }
+
+		    if (errors) 
+		    {
+		        eventBus.$emit('publishermessage', this.$filters.translate(errors));
+		    } 
+		    else if (filemarkdown) 
+		    {
+		        this.$emit('updateMarkdownEvent', filemarkdown);
+		        this.compmarkdown = filemarkdown;
+		    }
+		},
+		onFileChange( e )
+		{
+			if(e.target.files.length > 0)
+			{
+				let uploadedFile = e.target.files[0];
+
+		        let allowedVideoTypes = ['video/mp4', 'video/webm', 'video/ogg'];
+		        if (!allowedVideoTypes.includes(uploadedFile.type)) {
+		            let message = "Unsupported file type. Please select a video file (mp4, webm, ogg).";
+		            eventBus.$emit('publishermessage', message);
+		            return;
+		        }
+
+				let size = uploadedFile.size / 1024 / 1024;
+				
+				if (size > this.maxsize)
+				{
+					let message = "The maximal size of a file is " + this.maxsize + " MB";
+					eventBus.$emit('publishermessage', message);
+					return;
+				}
+				else
+				{
+					self = this;
+					
+					self.load = true;
+
+					let reader = new FileReader();
+					reader.readAsDataURL(uploadedFile);
+					reader.onload = function(e) {
+						
+						tmaxios.post('/api/v1/file',{
+							'url':				data.urlinfo.route,
+							'file':				e.target.result,
+							'name': 			uploadedFile.name, 
+						})
+						.then(function (response) {
+
+							self.load = false;
+
+							self.filemeta 			= true;
+							self.savefile 			= true;
+							self.filetitle 			= response.data.fileinfo.title;
+							self.fileextension 		= response.data.fileinfo.extension;
+							self.fileurl 			= response.data.filepath;
+							self.selectedrole 		= '';
+							
+							self.createmarkdown();
+				    	})
+						.catch(function (error)
+						{
+							self.load = false;
+							if(error.response)
+							{
+								let message = self.$filters.translate(error.response.data.message);
+								eventBus.$emit('publishermessage', message);
+							}
+						});
+					}
+				}
+			}
 		},
 		beforeSave()
 		{
-			if(!this.edited)
+			/* publish file before you save markdown */
+
+			if(!this.fileurl)
 			{
-				eventBus.$emit('closeComponents');
+				let message = this.$filters.translate('file is missing.');
+				eventBus.$emit('publishermessage', message);
+
 				return;
 			}
-			var self = this;
 
-			tmaxios.post('/api/v1/video',{
-				'url':				data.urlinfo.route,
-				'videourl': 		this.url,
-				'provider':  		this.provider,
-				'providerurl': 		this.providerurl,
-				'videoid': 			this.videoid,
-			})
-			.then(function (response)
+		    const fileExtension = this.fileurl.split('.').pop().toLowerCase();
+
+		    if (!this.allowedExtensions.includes(fileExtension))
+		    {
+		        let message = this.$filters.translate('Unsupported file format. Only MP4, WebM, and OGG files are allowed.');
+		        eventBus.$emit('publishermessage', message);
+		        
+		        return;
+		    }
+
+			if(!this.savefile)
 			{
-				self.path = response.data.path;
-				self.$emit('saveBlockEvent');
-			})
-			.catch(function (error)
+				this.createmarkdown();
+				this.$emit('saveBlockEvent');
+			}
+			else
 			{
-				if(error.response)
+				var self = this;
+
+		        tmaxios.put('/api/v1/file',{
+					'url':			data.urlinfo.route,
+					'file': 		this.fileurl,
+				})
+				.then(function (response)
 				{
-					let message = self.$filters.translate(error.response.data.message);
-					eventBus.$emit('publishermessage', message);
-				}
-			});
-		},
-	},
+					self.fileurl = response.data.path;
+
+					self.createmarkdown();
+
+					self.$emit('saveBlockEvent');
+				})
+				.catch(function (error)
+				{
+					if(error.response)
+					{
+						let message = self.$filters.translate(error.response.data.message);
+						eventBus.$emit('publishermessage', message);
+					}
+				});
+			}
+		},		
+	}
 })
 
 bloxeditor.component('shortcode-component', {
@@ -2593,4 +2803,131 @@ bloxeditor.component('shortcode-component', {
 			this.$emit('updateMarkdownEvent', event.target.value);
 		},
 	},
-})
\ No newline at end of file
+})
+
+/* deprecated, use embed plugin instead */
+bloxeditor.component('youtube-component', {
+	props: ['markdown', 'disabled', 'index'],
+	template: `<div class="video dropbox p-8">
+					<div class="absolute top-3 -left-5 text-stone-400">
+						<svg class="icon icon-play">
+							<use xlink:href="#icon-play"></use>
+						</svg>
+					</div>
+					<div class="flex mt-2 mb-2">
+						<label class="w-1/5 py-2" for="video">{{ $filters.translate('Link to youtube') }}: </label> 
+						<input class="w-4/5 p-2 bg-stone-200 text-stone-900" type="url" ref="markdown" placeholder="https://www.youtube.com/watch?v=" :value="markdown" :disabled="disabled" @input="updatemarkdown($event.target.value)">
+					</div>
+			</div>`,
+	data: function(){
+		return {
+			edited: false,
+			url: false,
+			videoid: false,
+			param: false,
+			path: false,
+			provider: false,
+			providerurl: false,
+			compmarkdown: '',
+		}
+	},
+	mounted: function(){
+
+		eventBus.$on('beforeSave', this.beforeSave );
+
+		this.$refs.markdown.focus();
+
+		if(this.markdown)
+		{
+			this.parseImageMarkdown(this.markdown);
+		}
+	},
+	methods: {
+		generateMarkdown()
+		{
+			this.compmarkdown = '![' + this.provider + '-video](' + this.path + ' "click to load video"){#' + this.videoid + ' .' + this.provider + '}';
+		},
+		parseImageMarkdown(imageMarkdown)
+		{
+			let regexpurl = /\((.*)(".*")\)/;
+			let match = imageMarkdown.match(regexpurl);
+			let imageUrl = match[1];
+
+			let regexprov = /live\/(.*?)-/;
+			let matchprov = imageUrl.match(regexprov);
+			this.provider = matchprov[1];
+
+			if(this.provider == 'youtube')
+			{
+				this.providerurl = "https://www.youtube.com/watch";
+				this.param = "v=";
+			}
+
+			let videoid = imageMarkdown.match(/#.*? /);
+			if(videoid)
+			{
+				this.videoid = videoid[0].trim().substring(1);
+			}
+			
+			this.updatemarkdown(this.providerurl + "?" + this.param + this.videoid);
+		},
+		parseUrl(url)
+		{
+			let urlparts = url.split('?');
+			let urlParams = new URLSearchParams(urlparts[1]);
+
+			this.providerurl = urlparts[0];
+
+			if(urlParams.has("v"))
+			{
+				this.param 		= "v=";
+				this.videoid 	= urlParams.get("v");
+				this.provider 	= "youtube";
+			}
+			if(this.provider != "youtube")
+			{
+				this.updatemarkdown("");
+				let message = this.$filters.translate("We only support youtube right now.");
+				eventBus.$emit('publishermessage', message);
+			}
+		},
+		updatemarkdown(url)
+		{
+			this.edited = true;
+			this.url = url;
+			this.parseUrl(url);
+			this.generateMarkdown();
+			this.$emit('updateMarkdownEvent', url);
+		},
+		beforeSave()
+		{
+			if(!this.edited)
+			{
+				eventBus.$emit('closeComponents');
+				return;
+			}
+			var self = this;
+
+			tmaxios.post('/api/v1/video',{
+				'url':				data.urlinfo.route,
+				'videourl': 		this.url,
+				'provider':  		this.provider,
+				'providerurl': 		this.providerurl,
+				'videoid': 			this.videoid,
+			})
+			.then(function (response)
+			{
+				self.path = response.data.path;
+				self.$emit('saveBlockEvent');
+			})
+			.catch(function (error)
+			{
+				if(error.response)
+				{
+					let message = self.$filters.translate(error.response.data.message);
+					eventBus.$emit('publishermessage', message);
+				}
+			});
+		},
+	},
+})
diff --git a/system/typemill/author/js/vue-blox-config.js b/system/typemill/author/js/vue-blox-config.js
index 3609268..6f8f211 100644
--- a/system/typemill/author/js/vue-blox-config.js
+++ b/system/typemill/author/js/vue-blox-config.js
@@ -49,21 +49,12 @@ const determiner = {
 		}
 		return false;
 	},
-	/*
-	video: function(block,lines,firstChar,secondChar,thirdChar){
-		if( (firstChar == '!' && secondChar == '[' && lines[0].indexOf('.youtube') != -1) || (firstChar == '[' && secondChar == '!' && lines[0].indexOf('.youtube') != -1) )
-		{
-			return "video-component";
-		}
-		return false;
-	},
-	*/
 	image: function(block,lines,firstChar,secondChar,thirdChar){
 		if( (firstChar == '!' && secondChar == '[' ) || (firstChar == '[' && secondChar == '!' && thirdChar == '[') )
 		{
 			if(block.indexOf("-video") != -1)
 			{
-				return "video-component";
+				return "youtube-component";
 			}
 			return "image-component";
 		}
@@ -76,6 +67,13 @@ const determiner = {
 		}
 		return false;
 	},
+	video: function(block,lines,firstChar,secondChar,thirdChar){
+		if (lines[0].startsWith('[:video'))
+		{
+		    return "video-component";
+		}
+		return false;
+	},
 	code: function(block,lines,firstChar,secondChar,thirdChar){
 		if( firstChar == '`' && secondChar == '`' && thirdChar == '`')
 		{
@@ -115,22 +113,23 @@ const bloxFormats = {
 			quote: { label: '<svg class="icon icon-quotes-left"><use xlink:href="#icon-quotes-left"></use></svg>', title: 'Quote', component: 'quote-component' },
 			notice: { label: '<svg class="icon icon-exclamation-circle"><use xlink:href="#icon-exclamation-circle"></use></svg>', title: 'Notice', component: 'notice-component' },
 			image: { label: '<svg class="icon icon-image"><use xlink:href="#icon-image"></use></svg>', title: 'Image', component: 'image-component' },
-			video: { label: '<svg class="icon icon-play"><use xlink:href="#icon-play"></use></svg>', title: 'Video', component: 'video-component' },
+			video: { label: '<svg class="icon icon-film"><use xlink:href="#icon-film"></use></svg>', title: 'Video', component: 'video-component' },
 			file: { label: '<svg class="icon icon-paperclip"><use xlink:href="#icon-paperclip"></use></svg>', title: 'File', component: 'file-component' },
 			toc: { label: '<svg class="icon icon-list-alt"><use xlink:href="#icon-list-alt"></use></svg>', title: 'Table of Contents', component: 'toc-component' },
 			hr: { label: '<svg class="icon icon-pagebreak"><use xlink:href="#icon-pagebreak"></use></svg>', title: 'Horizontal Line', component: 'hr-component' },
 			definition: { label: '<svg class="icon icon-dots-two-vertical"><use xlink:href="#icon-dots-two-vertical"></use></svg>', title: 'Definition List', component: 'definition-component' },
 			code: { label: '<svg class="icon icon-embed"><use xlink:href="#icon-embed"></use></svg>', title: 'Code', component: 'code-component' },
 			shortcode: { label: '<svg class="icon icon-square-brackets"><use xlink:href="#icon-square-brackets"></use></svg>', title: 'Shortcode', component: 'shortcode-component' },
+			youtube: { label: '<svg class="icon icon-play"><use xlink:href="#icon-play"></use></svg>', title: 'YouTube', component: 'youtube-component' },
 };
 
 const formatConfig = data.settings.formats;
-const activeFormats = [];
+const activeFormats = {};
 
-for(var i = 0; i < formatConfig.length; i++)
+for (const format in bloxFormats)
 {
-	if(bloxFormats[formatConfig[i]] !== undefined)
-	{
-		activeFormats.push(bloxFormats[formatConfig[i]]);
-	}
-}
+  if (formatConfig.includes(format))
+  {
+    activeFormats[format] = bloxFormats[format];
+  }
+}
\ No newline at end of file
diff --git a/system/typemill/author/js/vue-blox.js b/system/typemill/author/js/vue-blox.js
index d0b45ce..da835c0 100644
--- a/system/typemill/author/js/vue-blox.js
+++ b/system/typemill/author/js/vue-blox.js
@@ -173,7 +173,7 @@ bloxeditor.component('content-block', {
 
 			componentType: 		false,
 			updatedmarkdown: 	false,
-			formats: 			bloxFormats,
+			formats: 			activeFormats,
 			hasUnsafedContent: 	false,
 			countUpdates: 		0
 		}
@@ -269,7 +269,6 @@ bloxeditor.component('content-block', {
 
 			let markdown 	= this.element.markdown;
 			let lines 		= markdown.split("\n");
-			let blockType 	= 'markdown-component';
 
 			for (var method in determiner) 
 			{
@@ -277,11 +276,11 @@ bloxeditor.component('content-block', {
 
 				if(specialBlock)
 				{
-					blockType = specialBlock;
+					return specialBlock;
 				}
 			}
 
-			return blockType;
+			return 'markdown-component';
 		},
 		updateMarkdownFunction(value)
 		{
@@ -433,7 +432,7 @@ bloxeditor.component('new-block',{
 	`,
 	data: function () {
 		return {
-			formats: bloxFormats,
+			formats: activeFormats,
 			componentType: false,
 			disabled: false,
 			newblockmarkdown: '',
diff --git a/system/typemill/author/js/vue-medialib.js b/system/typemill/author/js/vue-medialib.js
index 43b7e93..c49c2c0 100644
--- a/system/typemill/author/js/vue-medialib.js
+++ b/system/typemill/author/js/vue-medialib.js
@@ -252,12 +252,12 @@ const medialib = {
 		if(this.parentcomponent == 'files')
 		{
 			this.showFiles();
-			this.active = 'pageFiles';
+/*			this.active = 'pageFiles'; */
 		}
 		if(this.parentcomponent == 'images')
 		{
 			this.showImages();
-			this.active = 'pageImages';
+/*			this.active = 'pageImages'; */
 		}
 	},
 	computed: {
diff --git a/system/typemill/author/partials/symbols.twig b/system/typemill/author/partials/symbols.twig
index 051727a..317d941 100644
--- a/system/typemill/author/partials/symbols.twig
+++ b/system/typemill/author/partials/symbols.twig
@@ -42,6 +42,10 @@
 					<title>{{ translate('VIDEO') }}</title>
 					<path d="M30.662 5.003c-4.488-0.645-9.448-1.003-14.662-1.003s-10.174 0.358-14.662 1.003c-0.86 3.366-1.338 7.086-1.338 10.997s0.477 7.63 1.338 10.997c4.489 0.645 9.448 1.003 14.662 1.003s10.174-0.358 14.662-1.003c0.86-3.366 1.338-7.086 1.338-10.997s-0.477-7.63-1.338-10.997zM12 22v-12l10 6-10 6z"></path>
 				</symbol>
+				<symbol id="icon-film" viewBox="0 0 32 32">
+					<title>{{ translate('VIDEO') }}</title>
+					<path d="M0 4v24h32v-24h-32zM6 26h-4v-4h4v4zM6 18h-4v-4h4v4zM6 10h-4v-4h4v4zM24 26h-16v-20h16v20zM30 26h-4v-4h4v4zM30 18h-4v-4h4v4zM30 10h-4v-4h4v4zM12 10v12l8-6z"></path>
+				</symbol>
 				<symbol id="icon-quotes-left" viewBox="0 0 32 32">
 					<title>{{ translate('QUOTES') }}</title>
 					<path d="M7.031 14c3.866 0 7 3.134 7 7s-3.134 7-7 7-7-3.134-7-7l-0.031-1c0-7.732 6.268-14 14-14v4c-2.671 0-5.182 1.040-7.071 2.929-0.364 0.364-0.695 0.751-0.995 1.157 0.357-0.056 0.724-0.086 1.097-0.086zM25.031 14c3.866 0 7 3.134 7 7s-3.134 7-7 7-7-3.134-7-7l-0.031-1c0-7.732 6.268-14 14-14v4c-2.671 0-5.182 1.040-7.071 2.929-0.364 0.364-0.695 0.751-0.995 1.157 0.358-0.056 0.724-0.086 1.097-0.086z"></path>
diff --git a/system/typemill/settings/system.yaml b/system/typemill/settings/system.yaml
index e24e6e5..ed05967 100644
--- a/system/typemill/settings/system.yaml
+++ b/system/typemill/settings/system.yaml
@@ -132,6 +132,7 @@ fieldsetwriting:
         'definition': 'definition list'
         'code': 'code'
         'shortcode': 'shortcode'
+        'youtube': 'YouTube (deprecated)'
     headlineanchors:
       type: checkbox
       label: 'Headline anchors'
diff --git a/system/typemill/system.php b/system/typemill/system.php
index a02daa8..182be3b 100644
--- a/system/typemill/system.php
+++ b/system/typemill/system.php
@@ -33,6 +33,7 @@ use Typemill\Middleware\FlashMessages;
 use Typemill\Middleware\AssetMiddleware;
 use Typemill\Middleware\SecurityMiddleware;
 use Typemill\Middleware\CustomHeadersMiddleware;
+use Typemill\Extensions\MediaExtension;
 use Typemill\Extensions\TwigCsrfExtension;
 use Typemill\Extensions\TwigUrlExtension;
 use Typemill\Extensions\TwigUserExtension;
@@ -222,6 +223,9 @@ if(isset($updateSettings))
 	$settingsModel->updateSettings($pluginSettings, 'plugins');
 }
 
+# add media extension to integrate video/audio with shortcodes
+$dispatcher->addSubscriber(new MediaExtension($settings['rootPath'], $urlinfo['baseurl']));
+
 # add final settings to the container
 $container->set('settings', function() use ($settings){ return $settings; });
 
diff --git a/themes/cyanine/css/style.css b/themes/cyanine/css/style.css
index 6e3e6e2..78e3652 100644
--- a/themes/cyanine/css/style.css
+++ b/themes/cyanine/css/style.css
@@ -140,7 +140,7 @@ img, figure,figure img{
 	height: auto;
 	aspect-ratio: attr(width) / attr(height);
 }
-figure{
+figure, video, audio{
 	display: table;
 	margin: 2em auto;
 	padding: 0;