Updated Wiki content

developer-reference/How-to-build.md

@@ -128,11 +128,11 @@ How to building with Visual Studio on Windows 64-bit.
 
         ![vs_cmd](https://github.com/OrcaSlicer/OrcaSlicer_WIKI/blob/main/images/develop/vs_cmd.png?raw=true)
 
-        > [!NOTE]
+> [!NOTE]
-        > The build process will take a long time depending on your system but even with high-end hardware it can take up to 40 minutes.
+> The build process will take a long time depending on your system but even with high-end hardware it can take up to 40 minutes.
 
-        > [!TIP]
+> [!TIP]
-        > If you encounter issues, you can try to uninstall ZLIB from your Vcpkg library.
+> If you encounter issues, you can try to uninstall ZLIB from your Vcpkg library.
 
 3. If successful, you will find the Visual Studio solution file in:
 
@@ -167,12 +167,15 @@ How to building with Visual Studio on Windows 64-bit.
 >    ```
 >
 >    _(Note: the exact path may vary depending on your Windows SDK version.)_
+>
 > 2. In Visual Studio 2022, open the **libslic3r_gui** project properties:  
 >    Go to **Configuration Properties > C/C++ > Preprocessor > Preprocessor Definitions**  
 >    ➕ Add: `HAS_WIN10SDK`
+>
 > 3. In Visual Studio 2022, open the **OrcaSlicer_app_gui** project properties:  
 >    Go to **Configuration Properties > C/C++ > General > Additional Include Directories**  
 >    ➕ Add the path to the `winrt` folder from step 1.
+>
 > 4. Build the solution.
 
 ## MacOS 64-bit

developer-reference/Localization_guide.md

@@ -82,8 +82,8 @@ If you add new file resource, add it to the list of files containing macro `L()`
    msgen -o new.po old.po
    ```
 
-    > [!NOTE]
+> [!NOTE]
-    > In this Catalog it will be totally same strings for initial text and translated.
+> In this Catalog it will be totally same strings for initial text and translated.
 
 When you have Catalog to translation open POT or PO file in PoEdit and start translating.
 

mkdocs.yml

@@ -16,6 +16,8 @@ theme:
   logo: assets/images/OrcaSlicer.png
   favicon: assets/images/OrcaSlicer.ico
   features:
+      - navigation.instant         # Enable instant loading (SPA behavior)
+      - navigation.instant.progress # Show progress bar on slow connections
       - content.code.copy  # Enables the copy-to-clipboard button
       - search.suggest
       - search.highlight

web_extras/extra.css

@@ -1,59 +1,201 @@
 @import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap');
 @import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400&display=swap');
 
+/* ============================================================================
+   DESIGN TOKENS - Foundation variables for consistent theming
+   ============================================================================ */
+
 :root {
-  --md-text-font: "Noto Sans", sans-serif;  /* Body text, headings */
+    /* ========================================
-  --md-code-font: "Roboto Mono", monospace; /* Body text, headings */
+     Typography
+     ======================================== */
+    --md-text-font: "Noto Sans", sans-serif;
+    --md-code-font: "Roboto Mono", monospace;
+
+    /* ========================================
+     Font Sizes
+     ======================================== */
+    --font-size-xxs: 0.5rem;
+    --font-size-xs: 0.75rem;
+    --font-size-sm: 0.875rem;
+    --font-size-base: 1rem;
+    --font-size-lg: 1.125rem;
+    --font-size-xl: 1.25rem;
+    --font-size-2xl: 1.5rem;
+
+    /* ========================================
+     Spacing Scale (8pt grid)
+     Use these instead of arbitrary values
+     ======================================== */
+    --space-0: 0;
+    --space-0_5: 0.125rem;
+    /* 2px */
+    --space-1: 0.25rem;
+    /* 4px */
+    --space-2: 0.5rem;
+    /* 8px */
+    --space-3: 0.75rem;
+    /* 12px */
+    --space-4: 1rem;
+    /* 16px */
+    --space-5: 1.25rem;
+    /* 20px */
+    --space-6: 1.5rem;
+    /* 24px */
+    --space-8: 2rem;
+    /* 32px */
+    --space-10: 2.5rem;
+    /* 40px */
+    --space-12: 3rem;
+    /* 48px */
+    --space-16: 4rem;
+    /* 64px */
+
+    /* ========================================
+     Border Radius Scale
+     ======================================== */
+    --radius-none: 0;
+    --radius-sm: 0.125rem;
+    /* 2px */
+    --radius-md: 0.25rem;
+    /* 4px */
+    --radius-lg: 0.5rem;
+    /* 8px */
+    --radius-xl: 1rem;
+    /* 16px */
+    --radius-full: 9999px;
+
+    /* ========================================
+     Shadows
+     ======================================== */
+    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+
+    /* ========================================
+     Transitions
+     ======================================== */
+    --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
+    --transition-base: 250ms cubic-bezier(0.4, 0, 0.2, 1);
+    --transition-slow: 350ms cubic-bezier(0.4, 0, 0.2, 1);
+    --transition-xslow: 1000ms cubic-bezier(0.4, 0, 0.2, 1);
+
+    /* Reset for reduced motion preference */
+    @media (prefers-reduced-motion: reduce) {
+        --transition-fast: 0ms;
+        --transition-base: 0ms;
+        --transition-slow: 0ms;
+        --transition-xslow: 0ms;
+    }
+
 }
 
+/* ============================================================================
+   COLOR SYSTEM - Theme colors for light and dark modes
+   ============================================================================ */
+
 :root,
-[data-md-color-scheme=default],
+[data-md-color-scheme=default] {
-[data-md-color-scheme=slate]{
+    /* ========================================
-  /* Primary color (used in both light and dark) */
+     Brand Colors (Light Mode)
-  --md-primary-fg-color:               #009688;
+     ======================================== */
-  --md-primary-fg-color--light:        #009688;
+    --md-primary-fg-color: #009688;
-  --md-primary-fg-color--dark:         #00675B;
+    --md-primary-fg-color--light: #009688;
+    --md-primary-fg-color--dark: #00675B;
+    --md-accent-fg-color: #009688;
 
-  /* Accent color */
+    /* ========================================
-  --md-accent-fg-color:                #009688;
+     Derived Colors (color-mix based)
+     ======================================== */
+    --color-primary-hover: color-mix(in srgb, var(--md-primary-fg-color) 80%, black);
+    --color-primary-subtle: color-mix(in srgb, var(--md-primary-fg-color) 8%, transparent);
+    --color-primary-muted: color-mix(in srgb, var(--md-primary-fg-color) 15%, transparent);
 
-  --md-typeset-a-color:                var(--md-primary-fg-color--light) !important;
+    /* ========================================
-
+     Semantic Colors
-  --md-footer-bg-color:                var(--md-primary-fg-color) !important;
+     ======================================== */
-  --md-footer-fg-color:                #FFFFFF;
+    --md-typeset-a-color: var(--md-primary-fg-color) !important;
-
+    --md-default-fg-color--link: var(--md-primary-fg-color);
-  /* --md-code-bg-color:                  #F2F2F2; */
+    --md-accent-fg-color--transparent: color-mix(in srgb, var(--md-primary-fg-color) 10%, transparent);
-
+    --md-footer-bg-color: var(--md-primary-fg-color) !important;
-  /* Use single color for codes. otherwise some parts gCodes etc. is hard to read */
+    --md-footer-fg-color: #FFFFFF;
-  /* --md-code-hl-color:                  var(--md-code-fg-color); */
-  /* --md-code-hl-number-color:           var(--md-code-fg-color); */
-  /* --md-code-hl-special-color:          var(--md-code-fg-color); */
-  /* --md-code-hl-function-color:         var(--md-code-fg-color); */
-  /* --md-code-hl-constant-color:         var(--md-code-fg-color); *//* variables, gcodes */
-  /* --md-code-hl-keyword-color:          var(--md-code-fg-color); */
-  /* --md-code-hl-string-color:           var(--md-code-fg-color); */
-  /* --md-code-hl-name-color:             var(--md-code-fg-color); */
-  /* --md-code-hl-color--light:           var(--md-default-fg-color--light); */
-  /* --md-code-hl-operator-color:         var(--md-default-fg-color--light); */
-  /* --md-code-hl-punctuation-color:      var(--md-default-fg-color--light); */
-  /* --md-code-hl-comment-color:          var(--md-default-fg-color--light); */
-  /* --md-code-hl-generic-color:          var(--md-default-fg-color--light); */
-  /* --md-code-hl-variable-color:         var(--md-default-fg-color--light); */
 }
 
-[data-md-color-scheme=slate]{
+[data-md-color-scheme=slate] {
-  --md-default-bg-color:               #2D2D31;
+    /* ========================================
-  --md-default-fg-color:               #EFEFF0;
+     Brand Colors (Dark Mode)
-  --md-primary-fg-color:               #00675B;
+     ======================================== */
-  --md-footer-bg-color--dark:          #00000052;
+    --md-default-bg-color: #2D2D31;
-  --md-code-bg-color:                  #242428;
+    --md-default-fg-color: #EFEFF0;
+    --md-primary-fg-color: #14B8A6;
+    --md-accent-fg-color: #14B8A6;
+    --md-primary-fg-color--light: #14B8A6;
+    --md-primary-fg-color--dark: #00867b;
+
+    /* ========================================
+     Derived Colors (color-mix based)
+     ======================================== */
+    --color-primary-hover: color-mix(in srgb, var(--md-primary-fg-color) 60%, white);
+    --color-primary-subtle: color-mix(in srgb, var(--md-primary-fg-color) 12%, transparent);
+    --color-primary-muted: color-mix(in srgb, var(--md-primary-fg-color) 20%, transparent);
+
+    /* ========================================
+     Component Colors
+     ======================================== */
+    --md-typeset-a-color: var(--md-primary-fg-color) !important;
+    --md-default-fg-color--link: var(--md-primary-fg-color);
+    --md-accent-fg-color--transparent: color-mix(in srgb, var(--md-primary-fg-color) 15%, transparent);
+    --md-footer-bg-color--dark: #00000052;
+    --md-code-bg-color: #242428;
 }
 
+/* ============================================================================
+   GLOBAL ACCESSIBILITY & BEHAVIOR
+   ============================================================================ */
+
+/* Smooth scrolling with reduced motion support */
+html {
+    scroll-behavior: smooth;
+}
+
+@media (prefers-reduced-motion: reduce) {
+    html {
+        scroll-behavior: auto;
+    }
+
+    *,
+    *::before,
+    *::after {
+        animation-duration: 0.01ms !important;
+        animation-iteration-count: 1 !important;
+        transition-duration: 0.01ms !important;
+    }
+}
+
+/* Global focus ring for keyboard navigation */
+:focus-visible {
+    outline: 2px solid var(--md-accent-fg-color);
+    outline-offset: 2px;
+    border-radius: var(--radius-sm);
+}
+
+:focus:not(:focus-visible) {
+    outline: none;
+}
+
+/* ============================================================================
+   COMPONENT STYLES
+   ============================================================================ */
+
 /* /////// HEADER */
 
+.md-header {
+    background-color: light-dark(var(--md-primary-fg-color--light), var(--md-primary-fg-color--dark));
+}
+
 /* Reduce vertical margin on logo to make header more compact */
 .md-header__button.md-logo {
-    margin: 0 .2rem;
+    margin: 0 var(--space-1);
 }
 
 /* Increase size of logo on header */
@@ -64,25 +206,101 @@
 
 /* Reduce margin between logo and title */
 [dir=ltr] .md-header__title {
-    margin-left: 0.5rem;
+    margin-left: var(--space-2);
+}
+
+/* Header button interactions */
+.md-header__button {
+    transition: background-color var(--transition-fast), transform var(--transition-fast);
+    border-radius: var(--radius-md);
+}
+
+.md-header__button:hover {
+    background-color: color-mix(in srgb, currentColor 10%, transparent);
+}
+
+.md-header__button:active {
+    transform: scale(0.95);
 }
 
 /* /////// SIDEBARS */
 
+.md-nav__link[for],
+.md-nav__link[href] {
+    text-decoration: underline transparent;
+    transition: var(--transition-fast);
+
+    &:hover {
+        color: var(--color-primary-hover);
+        text-decoration: underline var(--color-primary-hover);
+        transition: var(--transition-base);
+    }
+
+    &:focus-visible {
+        color: var(--color-primary-hover);
+    }
+
+    &:focus:not(:focus-visible) {
+        /* resets clicked nav items to prevent focus styles from persisting */
+        color: unset;
+    }
+}
+
+/* Enhanced TOC active section indicator */
+.md-nav--secondary .md-nav__link {
+    transition: all var(--transition-base);
+    border-radius: var(--radius-md);
+    padding: 0 var(--space-3) 0 var(--space-5);
+    position: relative;
+    margin-left: calc(-1 * var(--space-1));
+}
+
+.md-nav--secondary .md-nav__link--active {
+    color: var(--md-primary-fg-color);
+    background-color: var(--color-primary-subtle);
+}
+
+.md-nav--secondary .md-nav__link--active::before {
+    content: '';
+    position: absolute;
+    left: var(--space-1);
+    top: 50%;
+    transform: translateY(-50%);
+    width: 3px;
+    height: 65%;
+    background-color: var(--md-primary-fg-color);
+    border-radius: var(--radius-full);
+}
+
 /* Use bold font on selected navigation bar item */
 .md-nav__item .md-nav__link--active {
-    font-weight: 600;
+    color: var(--md-primary-fg-color);
+    scale: 1.02;
+}
+
+/* Reset TOC styling for mobile/tablet (drawer mode) */
+@media screen and (max-width: 76.24em) {
+    .md-nav--secondary .md-nav__link {
+        padding: var(--space-2) var(--space-4);
+        margin-left: 0;
+    }
+
+    .md-nav--secondary .md-nav__link--active::before {
+        left: 0;
+    }
 }
 
 @media screen and (min-width: 76.25em) {
+
     /* Hide title on left sidebar */
     .md-nav--primary .md-nav__title[for=__drawer] {
-        display:none;
+        display: none;
     }
+
     /* Remove leftover margin for first item*/
-	.md-nav--primary>.md-nav__list>.md-nav__item:first-of-type>a{
+    .md-nav--primary>.md-nav__list>.md-nav__item:first-of-type>a {
-		margin-top: 0 !important;
+        margin-top: 0 !important;
-	}
+    }
 }
 
 /* Fixes unnecassary scrollbars on sidebars */
@@ -98,64 +316,86 @@
 /* /////// TITLES */
 
 /* Use bolder titles */
-.md-typeset h1{ font-weight: 550}
+.md-typeset h1 {
-.md-typeset h2{ font-weight: 550}
+    font-weight: 550
-.md-typeset h3{ font-weight: 550}
+}
-.md-typeset h4{ font-weight: 700}
+
+.md-typeset h2 {
+    font-weight: 550
+}
+
+.md-typeset h3 {
+    font-weight: 550
+}
+
+.md-typeset h4 {
+    font-weight: 700
+}
 
 /* Match color of titles */
 .md-typeset h1,
 .md-typeset h2,
 .md-typeset h3,
 .md-typeset h4 {
-    color:var(--md-typeset-color);
+    color: var(--md-typeset-color);
 }
 
 /* Reduce margins after headers / titles */
 .md-typeset h1 {
-	margin-bottom: 0 !important;
+    margin-bottom: 0 !important;
-	margin-block-end: 0.4em;
+    margin-block-end: var(--space-2);
-}
-.md-typeset h2 {
-	margin-bottom: 0 !important;
-	margin-top: 1.0em !important;
-	margin-block-end: 0.4em;
-}
-.md-typeset h3 {
-	margin-bottom: 0 !important;
-	margin-top: 1.0em !important;
-	margin-block-end: 0.3em;
-}
-.md-typeset h4 {
-	margin-bottom: 0 !important;
-	margin-block-end: 0.2em;
-}
-h1 + p,
-h2 + p,
-h3 + p,
-h4 + p{
-    margin-block-start: 0.4em;
 }
 
-h1 + ul, h2 + ul, h3 + ul, h4 + ul,
+.md-typeset h2 {
-h1 + ol, h2 + ol, h3 + ol, h4 + ol{
+    margin-bottom: 0 !important;
-    margin-top: 0.4em !important;
+    margin-top: var(--space-4) !important;
+    margin-block-end: var(--space-2);
+}
+
+.md-typeset h3 {
+    margin-bottom: 0 !important;
+    margin-top: var(--space-4) !important;
+    margin-block-end: var(--space-1);
+}
+
+.md-typeset h4 {
+    margin-bottom: 0 !important;
+    margin-block-end: var(--space-1);
+}
+
+h1+p,
+h2+p,
+h3+p,
+h4+p {
+    margin-block-start: var(--space-2);
+}
+
+h1+ul,
+h2+ul,
+h3+ul,
+h4+ul,
+h1+ol,
+h2+ol,
+h3+ol,
+h4+ol {
+    margin-top: var(--space-2) !important;
 }
 
 /* Add thin borders for separation */
-.md-typeset  h2,
+.md-typeset h2,
-.md-typeset  h3 {
+.md-typeset h3 {
     display: flex;
     align-items: center;
     width: 100%;
 }
-.md-typeset  h2::after,
+
-.md-typeset  h3::after {
+.md-typeset h2::after,
+.md-typeset h3::after {
     content: '';
     flex: 1;
-    height: 0.1em;
+    height: 1px;
     background-color: var(--md-typeset-table-color);
-    margin-left: 0.2em;
+    margin-left: var(--space-1);
 }
 
 /* /////// Images */
@@ -165,25 +405,43 @@ h1 + ol, h2 + ol, h3 + ol, h4 + ol{
     vertical-align: middle;
 }
 
-img[height="22"] { /* Text icons */
+img[height="22"] {
+    /* Text icons */
     height: 22px;
 }
-img[height="45"] { /* Patterns table */
+
+img[height="45"] {
+    /* Patterns table */
     height: 45px;
 }
-img[height="200"] { /* Calibrations guide preview */
+
+img[height="200"] {
+    /* Calibrations guide preview */
     height: 200px;
 }
 
 /* /////// LINKS */
 
-/* Make hyperlinks slightly bolder */
+.md-typeset a {
-.md-typeset a{
     font-weight: 500;
 }
-/* Show underline on links while hovering */
+
-.md-typeset a:hover {
+.md-typeset a,
-    text-decoration: underline;
+.md-typeset a::before {
+    transition: var(--transition-fast);
+    text-decoration: underline transparent;
+
+    &:hover,
+    &:focus-visible {
+        color: var(--color-primary-hover);
+        transition: var(--transition-base);
+        text-decoration: underline var(--color-primary-hover);
+    }
+
+    &:focus:not(:focus-visible) {
+        color: unset;
+        text-decoration: underline transparent;
+    }
 }
 
 /* /////// LISTS / BULLETS */
@@ -191,14 +449,13 @@ img[height="200"] { /* Calibrations guide preview */
 /* Reduce left margin for bullets */
 [dir=ltr] .md-typeset ol li,
 [dir=ltr] .md-typeset ul li {
-    margin-left: 0.5em;
+    margin-left: var(--space-2);
 }
 
-
 /* Reduce line height on lists */
 .md-typeset ol li,
 .md-typeset ul li {
-    margin-bottom: .3em;
+    margin-bottom: var(--space-1);
 }
 
 /* Use circle instead disc as list item marker. just less distracting */
@@ -217,80 +474,80 @@ img[height="200"] { /* Calibrations guide preview */
 /* Use regular font size on annotions */
 .md-typeset .admonition,
 .md-typeset details {
-    font-size: .8rem;
+    font-size: var(--font-size-xs);
 }
 
 .md-typeset .admonition,
 .md-typeset details {
     background-color: var(--md-admonition-bg-color);
     border: none;
-    border-left: 0.3rem solid #448aff;
+    border-left: var(--space-1) solid #448aff;
-    border-radius: 0;
+    border-radius: var(--radius-none);
-    margin: 1.2em 0;
+    margin: var(--space-5) 0;
+    border-radius: var(--radius-lg);
+    box-shadow: var(--shadow-lg);
 }
 
 .md-typeset .admonition-title,
 .md-typeset summary {
     background-color: transparent !important;
     padding-bottom: 0 !important;
-    padding-top: .2rem !important;
+    padding-top: var(--space-1) !important;
 }
 
 .md-typeset .admonition-title:before,
 .md-typeset summary:before {
-    top: .4em !important;
+    top: var(--space-2) !important;
-}
-
-.md-typeset .admonition>:last-child,
-.md-typeset details>:last-child {
-    margin-bottom: .4rem;
 }
 
 .md-typeset .admonition>:last-child,
 .md-typeset details>:last-child {
     margin-bottom: 0;
-    margin-block-start: 0.3em;
+    margin-block-start: var(--space-1);
-    margin-block-end: 0.2em;
+    margin-block-end: var(--space-1);
 }
 
 .md-typeset .admonition.warning,
 .md-typeset details.warning {
     border-color: #ff9100;
-    background-color: #ff910005;
+    background-color: color-mix(in srgb, #ff9100 3%, transparent);
 }
 
 .md-typeset .admonition.warning .admonition-title,
-.md-typeset details.warning summary{
+.md-typeset details.warning summary {
     color: #ff9100;
 }
 
 .md-typeset .admonition.note,
 .md-typeset details.note {
     border-color: #448aff;
-    background-color: #448aff05;
+    background-color: color-mix(in srgb, #448aff 3%, transparent);
 }
+
 .md-typeset .admonition.note .admonition-title,
-.md-typeset details.note summary{
+.md-typeset details.note summary {
     color: #448aff;
 }
 
 .md-typeset .admonition.tip,
 .md-typeset details.tip {
     border-color: #00bfa5;
-    background-color: #00bfa505;
+    background-color: color-mix(in srgb, #00bfa5 3%, transparent);
 }
+
 .md-typeset .admonition.tip .admonition-title,
-.md-typeset details.tip summary{
+.md-typeset details.tip summary {
     color: #00bfa5;
 }
 
 .md-typeset .admonition.danger,
 .md-typeset details.danger {
     border-color: #ff1744;
-    background-color: #ff174405;
+    background-color: color-mix(in srgb, #ff1744 3%, transparent);
 }
+
 .md-typeset .admonition.danger .admonition-title,
-.md-typeset details.danger summary{
+.md-typeset details.danger summary {
     color: #ff1744;
 }
 
@@ -298,7 +555,7 @@ img[height="200"] { /* Calibrations guide preview */
 
 /* Slighly reduce table cell height */
 .md-typeset table:not([class]) td {
-    padding: .75em 1.25em;
+    padding: var(--space-3) var(--space-5);
     vertical-align: middle;
 }
 
@@ -313,6 +570,15 @@ img[height="200"] { /* Calibrations guide preview */
     vertical-align: middle;
 }
 
+/* Hover effect on table rows */
+.md-typeset table:not([class]) tbody tr {
+    transition: background-color var(--transition-fast);
+}
+
+.md-typeset table:not([class]) tbody tr:hover {
+    background-color: var(--color-primary-subtle);
+}
+
 /* Keep pattern icons fixed at 45px inside tables */
 .md-typeset table img[alt^="param_"] {
     max-width: none;
@@ -321,9 +587,28 @@ img[height="200"] { /* Calibrations guide preview */
     height: 45px !important;
 }
 
+/* /////// CODE BLOCKS */
+
+/* Subtle hover effect on code blocks */
+.md-typeset pre,
+.md-typeset .highlight {
+    transition: box-shadow var(--transition-base), transform var(--transition-base);
+    border-radius: var(--radius-md);
+}
+
+.md-typeset pre:hover,
+.md-typeset .highlight:hover {
+    box-shadow: var(--shadow-md);
+    transform: translateY(-1px);
+}
+
+.md-typeset pre code {
+    border-radius: var(--radius-md);
+}
+
 /* /////// FOOTER */
 /* Fixes sidebar content rendering over footer when all items expanded */
-.md-footer{
+.md-footer {
     z-index: 10;
 }
 
@@ -331,7 +616,7 @@ img[height="200"] { /* Calibrations guide preview */
 /* :has selector might not work on old browsers */
 /* using ~body required to get elements properly */
 head:has(link[rel="canonical"][href$="keyboard-shortcuts.html"])~body td>code {
-  background-color: transparent;
+    background-color: transparent;
-  color: var(--md-typeset-color);
+    color: var(--md-typeset-color);
-  font-weight: 550;
+    font-weight: 550;
 }