fixup: update images

Author: d3lm

docs/tutorialkit.dev/src/content/docs/reference/images/theming-breadcrumb-button.png

@@ -47,7 +47,7 @@ These tokens can be used to style the colors of the tutorial on a high level. Fo
 
 The content refers to the main part of the lesson that contains the text and images.
 
-<Image src={themingContent} alt="Content" width="686" />
+![Content](./images/theming-content.png)
 
 | Token                                    | Description                               |
 | ---------------------------------------- | ----------------------------------------- |
@@ -60,7 +60,7 @@ Callouts are visual elements used to draw attention to specific information or p
 
 For instanceof, here's an example of an info callout.
 
-<Image src={themingCallout} alt="Callout" width="621" />
+![Content](./images/theming-callout.png)
 
 #### Tip
 
@@ -197,7 +197,7 @@ Panels are containers which can be resized and can hold different kind of compon
 
 The panel header is the top part of the panel that contains the title, an icon, and optionally an action button.
 
-<Image src={themingPanelHeader} alt="Panel Header" width="342" />
+<Image src={themingPanelHeader} alt="Panel Header" width="342" densities={[2]} />
 
 | Token                                        | Description                          |
 | -------------------------------------------- | ------------------------------------ |
@@ -243,7 +243,7 @@ The button in the header is shown at the right side of the header of the panel.
 
 The file tree shows the relevant files of the lesson next to the text editor.
 
-<Image src={themingFiletree} alt="File Tree" width="283" />
+<Image src={themingFiletree} alt="File Tree" width="283" densities={[2]} />
 
 | Token                                         | Description                                                            |
 | --------------------------------------------- | ---------------------------------------------------------------------- |
@@ -258,7 +258,7 @@ The file tree shows the relevant files of the lesson next to the text editor.
 
 You can customize the appearance of the files in the file tree using the following tokens.
 
-<Image src={themingFiletreeFile} alt="File Tree File" width="283" />
+<Image src={themingFiletreeFile} alt="File Tree File" width="342" densities={[2]} />
 
 
 | Token                                                 | Description                                          |
@@ -277,7 +277,7 @@ You can customize the appearance of the files in the file tree using the followi
 
 You can customize the appearance of the folders in the file tree using the following tokens.
 
-<Image src={themingFileTreeFolder} alt="File Tree Folder" width="283" />
+<Image src={themingFileTreeFolder} alt="File Tree Folder" width="342" densities={[2]} />
 
 | Token                                                | Description                                            |
 | ---------------------------------------------------- | ------------------------------------------------------ |

docs/tutorialkit.dev/src/content/docs/reference/images/theming-breadcrumb-dropdown.png

@@ -12,6 +12,7 @@ body {
   font-family: 'Inter', sans-serif;
   box-sizing: border-box;
   overscroll-behavior: none;
+
   &::before {
     position: absolute;
     bottom: 0;
@@ -21,18 +22,22 @@ body {
     pointer-events: none;
     z-index: 1;
   }
+
   &:not(:has(#starlight__sidebar)) {
     &::before {
       content: '';
     }
+
     [data-theme='dark'] & {
       background-image: radial-gradient(100% 100% at 50% 0%, transparent 60%, rgba(0, 0, 0, 0.4) 100%);
       &::before {
         background-image: linear-gradient(transparent 60%, rgba(0, 0, 0, 0.8) 100%);
       }
     }
+
     [data-theme='light'] & {
       background-image: radial-gradient(100% 100% at 50% 0%, #fff 60%, #eff0f3 100%);
+
       &::before {
         background-image: linear-gradient(transparent 60%, rgba(255, 255, 255, 0.8) 100%);
       }
@@ -50,7 +55,7 @@ header.header {
   border: none;
 }
 
-// Don't override <a> text color for home page buttons
+// don't override <a> text color for home page buttons
 .sl-markdown-content .simple-page-hero__links a:not(:where(.not-content *)) {
   color: unset;
 }
@@ -166,9 +171,11 @@ site-search button[data-open-modal] {
   box-shadow: 0 4px 6px -2px hsl(0, 0%, 0%, 0.1);
   transition: var(--transition-fast);
   transition-property: color, border-color;
+
   & > span {
     font-size: 0.84rem;
   }
+
   span:not(.link-title) {
     font-size: 0;
   }