feat(version): versions

11 files changed, 1700 insertions, 0 deletions

diff --git a/src/templates/assets/stylesheets/main/extensions/markdown/_admonition.scss b/src/templates/assets/stylesheets/main/extensions/markdown/_admonition.scss
new file mode 100644
index 00000000..bf517989
--- /dev/null
+++ b/src/templates/assets/stylesheets/main/extensions/markdown/_admonition.scss
@@ -0,0 +1,195 @@
+////
+/// Copyright (c) 2016-2023 Martin Donath <martin.donath@squidfunk.com>
+///
+/// Permission is hereby granted, free of charge, to any person obtaining a
+/// copy of this software and associated documentation files (the "Software"),
+/// to deal in the Software without restriction, including without limitation
+/// the rights to use, copy, modify, merge, publish, distribute, sublicense,
+/// and/or sell copies of the Software, and to permit persons to whom the
+/// Software is furnished to do so, subject to the following conditions:
+///
+/// The above copyright notice and this permission notice shall be included in
+/// all copies or substantial portions of the Software.
+///
+/// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+/// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+/// FITNESS FOR A PARTICULAR PURPOSE AND NON-INFRINGEMENT. IN NO EVENT SHALL
+/// THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+/// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+/// FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER
+/// DEALINGS
+////
+
+@use "sass:color";
+@use "sass:list";
+
+// ----------------------------------------------------------------------------
+// Variables
+// ----------------------------------------------------------------------------
+
+/// Admonition flavours
+$admonitions: (
+  "note":     pencil-circle         $clr-blue-a200,
+  "abstract": clipboard-text        $clr-light-blue-a400,
+  "info":     information           $clr-cyan-a700,
+  "tip":      fire                  $clr-teal-a700,
+  "success":  check                 $clr-green-a700,
+  "question": help-circle           $clr-light-green-a700,
+  "warning":  alert                 $clr-orange-a400,
+  "failure":  close                 $clr-red-a200,
+  "danger":   lightning-bolt-circle $clr-red-a400,
+  "bug":      shield-bug            $clr-pink-a400,
+  "example":  test-tube             $clr-deep-purple-a200,
+  "quote":    format-quote-close    $clr-grey
+) !default;
+
+// ----------------------------------------------------------------------------
+// Rules: layout
+// ----------------------------------------------------------------------------
+
+// Admonition variables
+:root {
+  @each $name, $props in $admonitions {
+    --md-admonition-icon--#{$name}:
+      svg-load("material/#{list.nth($props, 1)}.svg");
+  }
+}
+
+// ----------------------------------------------------------------------------
+
+// Scoped in typesetted content to match specificity of regular content
+.md-typeset {
+
+  // Admonition - note that all styles also apply to details tags, which are
+  // rendered as collapsible admonitions with summary elements as titles.
+  .admonition {
+    display: flow-root;
+    padding: 0 px2rem(12px);
+    margin: px2em(20px, 12.8px) 0;
+    font-size: px2rem(12.8px);
+    color: var(--md-admonition-fg-color);
+    background-color: var(--md-admonition-bg-color);
+    border: px2rem(1.5px) solid $clr-blue-a200;
+    border-radius: px2rem(4px);
+    box-shadow: var(--md-shadow-z1);
+    transition: box-shadow 125ms;
+    page-break-inside: avoid;
+
+    // [print]: Omit shadow as it may lead to rendering errors
+    @media print {
+      box-shadow: none;
+    }
+
+    // Admonition on focus
+    &:focus-within {
+      box-shadow: 0 0 0 px2rem(4px) color.adjust($clr-blue-a200, $alpha: -0.9);
+    }
+
+    // Hack: Chrome exhibits a weird issue where it will set nested elements to
+    // content-box. Doesn't happen in other browsers, so looks like a bug.
+    > * {
+      box-sizing: border-box;
+    }
+
+    // Adjust vertical spacing for nested admonitions
+    .admonition {
+      margin-top: 1em;
+      margin-bottom: 1em;
+    }
+
+    // Adjust spacing for contained table wrappers
+    .md-typeset__scrollwrap {
+      margin: 1em px2rem(-12px);
+    }
+
+    // Adjust spacing for contained tables
+    .md-typeset__table {
+      padding: 0 px2rem(12px);
+    }
+
+    // Adjust spacing for single-child tabbed block container
+    > .tabbed-set:only-child {
+      margin-top: 0;
+    }
+
+    // Adjust spacing on last child
+    html & > :last-child {
+      margin-bottom: px2rem(12px);
+    }
+  }
+
+  // Admonition title
+  .admonition-title {
+    position: relative;
+    padding-block: px2rem(8px);
+    padding-inline: px2rem(40px) px2rem(12px);
+    margin-block: 0;
+    margin-inline: px2rem(-12px);
+    font-weight: 700;
+    background-color: color.adjust($clr-blue-a200, $alpha: -0.9);
+    border: none;
+    border-inline-start-width: px2rem(4px);
+    border-start-start-radius: px2rem(2px);
+    border-start-end-radius: px2rem(2px);
+
+    // Adjust spacing for title-only admonitions
+    html &:last-child {
+      margin-bottom: 0;
+    }
+
+    // Admonition icon
+    &::before {
+      position: absolute;
+      top: px2em(10px);
+      width: px2rem(20px);
+      height: px2rem(20px);
+      content: "";
+      background-color: $clr-blue-a200;
+      inset-inline-start: px2rem(12px);
+      mask-image: var(--md-admonition-icon--note);
+      mask-position: center;
+      mask-repeat: no-repeat;
+      mask-size: contain;
+    }
+
+    // Inline code block
+    code {
+      box-shadow: 0 0 0 px2rem(1px) var(--md-default-fg-color--lightest);
+    }
+  }
+}
+
+// ----------------------------------------------------------------------------
+// Rules: flavours
+// ----------------------------------------------------------------------------
+
+// Define admonition flavors
+@each $name, $props in $admonitions {
+  $tint: list.nth($props, 2);
+
+  // Admonition flavour
+  .md-typeset .admonition.#{$name} {
+    border-color: $tint;
+
+    // Admonition on focus
+    &:focus-within {
+      box-shadow: 0 0 0 px2rem(4px) color.adjust($tint, $alpha: -0.9);
+    }
+  }
+
+  // Admonition flavour title
+  .md-typeset .#{$name} > .admonition-title {
+    background-color: color.adjust($tint, $alpha: -0.9);
+
+    // Admonition icon
+    &::before {
+      background-color: $tint;
+      mask-image: var(--md-admonition-icon--#{$name});
+    }
+
+    // Details marker
+    &::after {
+      color: $tint;
+    }
+  }
+}
diff --git a/src/templates/assets/stylesheets/main/extensions/markdown/_footnotes.scss b/src/templates/assets/stylesheets/main/extensions/markdown/_footnotes.scss
new file mode 100644
index 00000000..59447d89
--- /dev/null
+++ b/src/templates/assets/stylesheets/main/extensions/markdown/_footnotes.scss
@@ -0,0 +1,146 @@
+////
+/// Copyright (c) 2016-2023 Martin Donath <martin.donath@squidfunk.com>
+///
+/// Permission is hereby granted, free of charge, to any person obtaining a
+/// copy of this software and associated documentation files (the "Software"),
+/// to deal in the Software without restriction, including without limitation
+/// the rights to use, copy, modify, merge, publish, distribute, sublicense,
+/// and/or sell copies of the Software, and to permit persons to whom the
+/// Software is furnished to do so, subject to the following conditions:
+///
+/// The above copyright notice and this permission notice shall be included in
+/// all copies or substantial portions of the Software.
+///
+/// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+/// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+/// FITNESS FOR A PARTICULAR PURPOSE AND NON-INFRINGEMENT. IN NO EVENT SHALL
+/// THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+/// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+/// FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER
+/// DEALINGS
+////
+
+// ----------------------------------------------------------------------------
+// Rules
+// ----------------------------------------------------------------------------
+
+// Footnotes variables
+:root {
+  --md-footnotes-icon: svg-load("material/keyboard-return.svg");
+}
+
+// ----------------------------------------------------------------------------
+
+// Scoped in typesetted content to match specificity of regular content
+.md-typeset {
+
+  // Footnote container
+  .footnote {
+    font-size: px2rem(12.8px);
+    color: var(--md-default-fg-color--light);
+
+    // Footnote list - omit left indentation
+    > ol {
+      margin-inline-start: 0;
+
+      // Footnote item - footnote items can contain lists, so we need to scope
+      // the spacing adjustments to the top-level footnote item.
+      > li {
+        transition: color 125ms;
+
+        // Darken color on target
+        &:target {
+          color: var(--md-default-fg-color);
+        }
+
+        // Show backreferences on footnote focus without transition
+        &:focus-within .footnote-backref {
+          opacity: 1;
+          transition: none;
+          transform: translateX(0);
+        }
+
+        // Show backreferences on footnote hover/target
+        &:is(:hover, :target) .footnote-backref {
+          opacity: 1;
+          transform: translateX(0);
+        }
+
+        // Adjust spacing on first child
+        > :first-child {
+          margin-top: 0;
+        }
+      }
+    }
+  }
+
+  // Footnote reference
+  .footnote-ref {
+    font-size: px2em(12px, 16px);
+    font-weight: 700;
+
+    // Hack: increase specificity to override default
+    html & {
+      outline-offset: px2rem(2px);
+    }
+  }
+
+  // Show outline for all devices
+  [id^="fnref:"]:target > .footnote-ref {
+    outline: auto;
+  }
+
+  // Footnote backreference
+  .footnote-backref {
+    display: inline-block;
+    // Hack: omit Unicode arrow for replacement with icon
+    font-size: 0;
+    color: var(--md-typeset-a-color);
+    vertical-align: text-bottom;
+    opacity: 0;
+    transition:
+      color     250ms,
+      transform 250ms 250ms,
+      opacity   125ms 250ms;
+    transform: translateX(px2rem(5px));
+
+    // [print]: Show footnote backreferences
+    @media print {
+      color: var(--md-typeset-a-color);
+      opacity: 1;
+      transform: translateX(0);
+    }
+
+    // Adjust for right-to-left languages
+    [dir="rtl"] & {
+      transform: translateX(px2rem(-5px));
+    }
+
+    // Adjust color on hover
+    &:hover {
+      color: var(--md-accent-fg-color);
+    }
+
+    // Footnote backreference icon
+    &::before {
+      display: inline-block;
+      width: px2rem(16px);
+      height: px2rem(16px);
+      content: "";
+      background-color: currentcolor;
+      mask-image: var(--md-footnotes-icon);
+      mask-position: center;
+      mask-repeat: no-repeat;
+      mask-size: contain;
+
+      // Adjust for right-to-left languages
+      [dir="rtl"] & {
+
+        // Flip icon vertically
+        svg {
+          transform: scaleX(-1);
+        }
+      }
+    }
+  }
+}
diff --git a/src/templates/assets/stylesheets/main/extensions/markdown/_toc.scss b/src/templates/assets/stylesheets/main/extensions/markdown/_toc.scss
new file mode 100644
index 00000000..8284a5c0
--- /dev/null
+++ b/src/templates/assets/stylesheets/main/extensions/markdown/_toc.scss
@@ -0,0 +1,92 @@
+////
+/// Copyright (c) 2016-2023 Martin Donath <martin.donath@squidfunk.com>
+///
+/// Permission is hereby granted, free of charge, to any person obtaining a
+/// copy of this software and associated documentation files (the "Software"),
+/// to deal in the Software without restriction, including without limitation
+/// the rights to use, copy, modify, merge, publish, distribute, sublicense,
+/// and/or sell copies of the Software, and to permit persons to whom the
+/// Software is furnished to do so, subject to the following conditions:
+///
+/// The above copyright notice and this permission notice shall be included in
+/// all copies or substantial portions of the Software.
+///
+/// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+/// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+/// FITNESS FOR A PARTICULAR PURPOSE AND NON-INFRINGEMENT. IN NO EVENT SHALL
+/// THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+/// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+/// FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER
+/// DEALINGS
+////
+
+// ----------------------------------------------------------------------------
+// Rules
+// ----------------------------------------------------------------------------
+
+// Scoped in typesetted content to match specificity of regular content
+.md-typeset {
+
+  // Headerlink
+  .headerlink {
+    display: inline-block;
+    margin-inline-start: px2rem(10px);
+    color: var(--md-default-fg-color--lighter);
+    opacity: 0;
+    transition:
+      color   250ms,
+      opacity 125ms;
+
+    // [print]: Hide headerlinks
+    @media print {
+      display: none;
+    }
+  }
+
+  // Show headerlinks on parent hover
+  :is(:hover, :target) > .headerlink,
+  .headerlink:focus {
+    opacity: 1;
+    transition:
+      color   250ms,
+      opacity 125ms;
+  }
+
+  // Adjust color on parent target or focus/hover
+  :target > .headerlink,
+  .headerlink:is(:focus, :hover) {
+    color: var(--md-accent-fg-color);
+  }
+
+  // Adjust scroll margin for all elements with `id` attributes
+  :target {
+    --md-scroll-margin: #{px2rem(48px + 24px)};
+    --md-scroll-offset: #{px2rem(0px)};
+    // Scroll margin is finally ready for prime time - before, we used a hack
+    // for anchor correction based on pseudo elements but those times are gone.
+    scroll-margin-top:
+      calc(
+        var(--md-scroll-margin) -
+        var(--md-scroll-offset)
+      );
+
+    // [screen +]: Sticky navigation tabs
+    @include break-from-device(screen) {
+
+      // Adjust scroll margin for sticky navigation tabs
+      .md-header--lifted ~ .md-container & {
+        --md-scroll-margin: #{px2rem(96px + 24px)};
+      }
+    }
+  }
+
+  // Adjust scroll offset for headlines of level 1-3
+  :is(h1, h2, h3):target {
+    --md-scroll-offset: #{px2rem(4px)};
+  }
+
+  // Adjust scroll offset for headlines of level 4
+  h4:target {
+    --md-scroll-offset: #{px2rem(3px)};
+  }
+}
diff --git a/src/templates/assets/stylesheets/main/extensions/pymdownx/_arithmatex.scss b/src/templates/assets/stylesheets/main/extensions/pymdownx/_arithmatex.scss
new file mode 100644
index 00000000..fe8ffd62
--- /dev/null
+++ b/src/templates/assets/stylesheets/main/extensions/pymdownx/_arithmatex.scss
@@ -0,0 +1,52 @@
+////
+/// Copyright (c) 2016-2023 Martin Donath <martin.donath@squidfunk.com>
+///
+/// Permission is hereby granted, free of charge, to any person obtaining a
+/// copy of this software and associated documentation files (the "Software"),
+/// to deal in the Software without restriction, including without limitation
+/// the rights to use, copy, modify, merge, publish, distribute, sublicense,
+/// and/or sell copies of the Software, and to permit persons to whom the
+/// Software is furnished to do so, subject to the following conditions:
+///
+/// The above copyright notice and this permission notice shall be included in
+/// all copies or substantial portions of the Software.
+///
+/// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+/// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+/// FITNESS FOR A PARTICULAR PURPOSE AND NON-INFRINGEMENT. IN NO EVENT SHALL
+/// THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+/// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+/// FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER
+/// DEALINGS
+////
+
+// ----------------------------------------------------------------------------
+// Rules
+// ----------------------------------------------------------------------------
+
+// Scoped in typesetted content to match specificity of regular content
+.md-typeset {
+
+  // Arithmatex container
+  div.arithmatex {
+    overflow: auto;
+
+    // [mobile -]: Align with body copy
+    @include break-to-device(mobile) {
+      margin: 0 px2rem(-16px);
+    }
+
+    // Arithmatex content
+    > * {
+      width: min-content;
+      padding: 0 px2rem(16px);
+      margin-inline: auto !important; // stylelint-disable-line
+      touch-action: auto;
+
+      // MathJax container - see https://bit.ly/3HR8YJ5
+      mjx-container {
+        margin: 0 !important; // stylelint-disable-line
+      }
+    }
+  }
+}
diff --git a/src/templates/assets/stylesheets/main/extensions/pymdownx/_critic.scss b/src/templates/assets/stylesheets/main/extensions/pymdownx/_critic.scss
new file mode 100644
index 00000000..683705ce
--- /dev/null
+++ b/src/templates/assets/stylesheets/main/extensions/pymdownx/_critic.scss
@@ -0,0 +1,76 @@
+////
+/// Copyright (c) 2016-2023 Martin Donath <martin.donath@squidfunk.com>
+///
+/// Permission is hereby granted, free of charge, to any person obtaining a
+/// copy of this software and associated documentation files (the "Software"),
+/// to deal in the Software without restriction, including without limitation
+/// the rights to use, copy, modify, merge, publish, distribute, sublicense,
+/// and/or sell copies of the Software, and to permit persons to whom the
+/// Software is furnished to do so, subject to the following conditions:
+///
+/// The above copyright notice and this permission notice shall be included in
+/// all copies or substantial portions of the Software.
+///
+/// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+/// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+/// FITNESS FOR A PARTICULAR PURPOSE AND NON-INFRINGEMENT. IN NO EVENT SHALL
+/// THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+/// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+/// FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER
+/// DEALINGS
+////
+
+// ----------------------------------------------------------------------------
+// Rules
+// ----------------------------------------------------------------------------
+
+// Scoped in typesetted content to match specificity of regular content
+.md-typeset {
+
+  // Deletion
+  del.critic {
+    background-color: var(--md-typeset-del-color);
+    box-decoration-break: clone;
+  }
+
+  // Addition
+  ins.critic {
+    background-color: var(--md-typeset-ins-color);
+    box-decoration-break: clone;
+  }
+
+  // Comment
+  .critic.comment {
+    color: var(--md-code-hl-comment-color);
+    box-decoration-break: clone;
+
+    // Comment opening mark
+    &::before {
+      content: "/* ";
+    }
+
+    // Comment closing mark
+    &::after {
+      content: " */";
+    }
+  }
+
+  // Critic block
+  .critic.block {
+    display: block;
+    padding-inline: px2rem(16px);
+    margin: 1em 0;
+    overflow: auto;
+    box-shadow: none;
+
+    // Adjust spacing on first child
+    > :first-child {
+      margin-top: 0.5em;
+    }
+
+    // Adjust spacing on last child
+    > :last-child {
+      margin-bottom: 0.5em;
+    }
+  }
+}
diff --git a/src/templates/assets/stylesheets/main/extensions/pymdownx/_details.scss b/src/templates/assets/stylesheets/main/extensions/pymdownx/_details.scss
new file mode 100644
index 00000000..8eea678a
--- /dev/null
+++ b/src/templates/assets/stylesheets/main/extensions/pymdownx/_details.scss
@@ -0,0 +1,121 @@
+////
+/// Copyright (c) 2016-2023 Martin Donath <martin.donath@squidfunk.com>
+///
+/// Permission is hereby granted, free of charge, to any person obtaining a
+/// copy of this software and associated documentation files (the "Software"),
+/// to deal in the Software without restriction, including without limitation
+/// the rights to use, copy, modify, merge, publish, distribute, sublicense,
+/// and/or sell copies of the Software, and to permit persons to whom the
+/// Software is furnished to do so, subject to the following conditions:
+///
+/// The above copyright notice and this permission notice shall be included in
+/// all copies or substantial portions of the Software.
+///
+/// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+/// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+/// FITNESS FOR A PARTICULAR PURPOSE AND NON-INFRINGEMENT. IN NO EVENT SHALL
+/// THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+/// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+/// FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER
+/// DEALINGS
+////
+
+// ----------------------------------------------------------------------------
+// Rules
+// ----------------------------------------------------------------------------
+
+// Details variables
+:root {
+  --md-details-icon: svg-load("material/chevron-right.svg");
+}
+
+// ----------------------------------------------------------------------------
+
+// Scoped in typesetted content to match specificity of regular content
+.md-typeset {
+
+  // Details
+  details {
+    @extend .admonition;
+
+    display: flow-root;
+    padding-top: 0;
+    overflow: visible;
+
+    // Details title icon - rotate icon on transition to open state
+    &[open] > summary::after {
+      transform: rotate(90deg);
+    }
+
+    // Adjust spacing for details in closed state
+    &:not([open]) {
+      padding-bottom: 0;
+      box-shadow: none;
+
+      // Hack: we cannot set `overflow: hidden` on the `details` element (which
+      // is why we set it to `overflow: visible`, as the outline would not be
+      // visible when focusing. Therefore, we must set the border radius on the
+      // summary explicitly.
+      > summary {
+        border-radius: px2rem(2px);
+      }
+    }
+  }
+
+  // Details title
+  summary {
+    @extend .admonition-title;
+
+    display: block;
+    min-height: px2rem(20px);
+    padding-inline-end: px2rem(36px);
+    cursor: pointer;
+    border-start-start-radius: px2rem(2px);
+    border-start-end-radius: px2rem(2px);
+
+    // Show outline for keyboard devices
+    &.focus-visible {
+      outline-color: var(--md-accent-fg-color);
+      outline-offset: px2rem(4px);
+    }
+
+    // Hide outline for pointer devices
+    &:not(.focus-visible) {
+      outline: none;
+      -webkit-tap-highlight-color: transparent;
+    }
+
+    // Details marker
+    &::after {
+      position: absolute;
+      top: px2em(10px);
+      width: px2rem(20px);
+      height: px2rem(20px);
+      content: "";
+      background-color: currentcolor;
+      transition: transform 250ms;
+      transform: rotate(0deg);
+      inset-inline-end: px2rem(8px);
+      mask-image: var(--md-details-icon);
+      mask-position: center;
+      mask-repeat: no-repeat;
+      mask-size: contain;
+
+      // Adjust for right-to-left languages
+      [dir="rtl"] & {
+        transform: rotate(180deg);
+      }
+    }
+
+    // Hide native details marker - modern
+    &::marker {
+      display: none;
+    }
+
+    // Hide native details marker - legacy, must be split into a seprate rule,
+    // so older browsers don't consider the selector list as invalid
+    &::-webkit-details-marker {
+      display: none;
+    }
+  }
+}
diff --git a/src/templates/assets/stylesheets/main/extensions/pymdownx/_emoji.scss b/src/templates/assets/stylesheets/main/extensions/pymdownx/_emoji.scss
new file mode 100644
index 00000000..8b351013
--- /dev/null
+++ b/src/templates/assets/stylesheets/main/extensions/pymdownx/_emoji.scss
@@ -0,0 +1,43 @@
+////
+/// Copyright (c) 2016-2023 Martin Donath <martin.donath@squidfunk.com>
+///
+/// Permission is hereby granted, free of charge, to any person obtaining a
+/// copy of this software and associated documentation files (the "Software"),
+/// to deal in the Software without restriction, including without limitation
+/// the rights to use, copy, modify, merge, publish, distribute, sublicense,
+/// and/or sell copies of the Software, and to permit persons to whom the
+/// Software is furnished to do so, subject to the following conditions:
+///
+/// The above copyright notice and this permission notice shall be included in
+/// all copies or substantial portions of the Software.
+///
+/// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+/// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+/// FITNESS FOR A PARTICULAR PURPOSE AND NON-INFRINGEMENT. IN NO EVENT SHALL
+/// THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+/// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+/// FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER
+/// DEALINGS
+////
+
+// ----------------------------------------------------------------------------
+// Rules
+// ----------------------------------------------------------------------------
+
+// Scoped in typesetted content to match specificity of regular content
+.md-typeset {
+
+  // Emoji and icon container
+  :is(.emojione, .twemoji, .gemoji) {
+    display: inline-flex;
+    height: px2em(18px);
+    vertical-align: text-top;
+
+    // Icon - inlined via mkdocs-material-extensions
+    svg {
+      width: px2em(18px);
+      max-height: 100%;
+      fill: currentcolor;
+    }
+  }
+}
diff --git a/src/templates/assets/stylesheets/main/extensions/pymdownx/_highlight.scss b/src/templates/assets/stylesheets/main/extensions/pymdownx/_highlight.scss
new file mode 100644
index 00000000..7d297677
--- /dev/null
+++ b/src/templates/assets/stylesheets/main/extensions/pymdownx/_highlight.scss
@@ -0,0 +1,382 @@
+////
+/// Copyright (c) 2016-2023 Martin Donath <martin.donath@squidfunk.com>
+///
+/// Permission is hereby granted, free of charge, to any person obtaining a
+/// copy of this software and associated documentation files (the "Software"),
+/// to deal in the Software without restriction, including without limitation
+/// the rights to use, copy, modify, merge, publish, distribute, sublicense,
+/// and/or sell copies of the Software, and to permit persons to whom the
+/// Software is furnished to do so, subject to the following conditions:
+///
+/// The above copyright notice and this permission notice shall be included in
+/// all copies or substantial portions of the Software.
+///
+/// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+/// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+/// FITNESS FOR A PARTICULAR PURPOSE AND NON-INFRINGEMENT. IN NO EVENT SHALL
+/// THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+/// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+/// FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER
+/// DEALINGS
+////
+
+// ----------------------------------------------------------------------------
+// Rules: syntax highlighting
+// ----------------------------------------------------------------------------
+
+// Code block
+.highlight {
+
+  // .o  = Operator
+  // .ow = Operator, word
+  :is(.o, .ow) {
+    color: var(--md-code-hl-operator-color);
+  }
+
+  .p {  // Punctuation
+    color: var(--md-code-hl-punctuation-color);
+  }
+
+  // .cpf = Comment, preprocessor file
+  // .l   = Literal
+  // .s   = Literal, string
+  // .sb  = Literal, string backticks
+  // .sc  = Literal, string char
+  // .s2  = Literal, string double
+  // .si  = Literal, string interpol
+  // .s1  = Literal, string single
+  // .ss  = Literal, string symbol
+  :is(.cpf, .l, .s, .sb, .sc, .s2, .si, .s1, .ss) {
+    color: var(--md-code-hl-string-color);
+  }
+
+  // .cp = Comment, pre-processor
+  // .se = Literal, string escape
+  // .sh = Literal, string heredoc
+  // .sr = Literal, string regex
+  // .sx = Literal, string other
+  :is(.cp, .se, .sh, .sr, .sx) {
+    color: var(--md-code-hl-special-color);
+  }
+
+  // .m  = Number
+  // .mb = Number, binary
+  // .mf = Number, float
+  // .mh = Number, hex
+  // .mi = Number, integer
+  // .il = Number, integer long
+  // .mo = Number, octal
+  :is(.m, .mb, .mf, .mh, .mi, .il, .mo) {
+    color: var(--md-code-hl-number-color);
+  }
+
+  // .k  = Keyword,
+  // .kd = Keyword, declaration
+  // .kn = Keyword, namespace
+  // .kp = Keyword, pseudo
+  // .kr = Keyword, reserved
+  // .kt = Keyword, type
+  :is(.k, .kd, .kn, .kp, .kr, .kt) {
+    color: var(--md-code-hl-keyword-color);
+  }
+
+  // .kc = Keyword, constant
+  // .n  = Name
+  :is(.kc, .n) {
+    color: var(--md-code-hl-name-color);
+  }
+
+  // .no = Name, constant
+  // .nb = Name, builtin
+  // .bp = Name, builtin pseudo
+  :is(.no, .nb, .bp) {
+    color: var(--md-code-hl-constant-color);
+  }
+
+  // .nc = Name, class
+  // .ne = Name, exception
+  // .nf = Name, function
+  // .nn = Name, namespace
+  :is(.nc, .ne, .nf, .nn) {
+    color: var(--md-code-hl-function-color);
+  }
+
+  // .nd = Name, decorator
+  // .ni = Name, entity
+  // .nl = Name, label
+  // .nt = Name, tag
+  :is(.nd, .ni, .nl, .nt) {
+    color: var(--md-code-hl-keyword-color);
+  }
+
+  // .c  = Comment
+  // .cm = Comment, multiline
+  // .c1 = Comment, single
+  // .ch = Comment, shebang
+  // .cs = Comment, special
+  // .sd = Literal, string doc
+  :is(.c, .cm, .c1, .ch, .cs, .sd) {
+    color: var(--md-code-hl-comment-color);
+  }
+
+  // .na = Name, attribute
+  // .nv = Variable,
+  // .vc = Variable, class
+  // .vg = Variable, global
+  // .vi = Variable, instance
+  :is(.na, .nv, .vc, .vg, .vi) {
+    color: var(--md-code-hl-variable-color);
+  }
+
+  // .ge = Generic, emph
+  // .gr = Generic, error
+  // .gh = Generic, heading
+  // .go = Generic, output
+  // .gp = Generic, prompt
+  // .gs = Generic, strong
+  // .gu = Generic, subheading
+  // .gt = Generic, traceback
+  :is(.ge, .gr, .gh, .go, .gp, .gs, .gu, .gt) {
+    color: var(--md-code-hl-generic-color);
+  }
+
+  // .gd = Diff, delete
+  // .gi = Diff, insert
+  :is(.gd, .gi) {
+    padding: 0 px2em(2px);
+    margin: 0 px2em(-2px);
+    border-radius: px2rem(2px);
+  }
+
+  .gd { // Diff, delete
+    background-color: var(--md-typeset-del-color);
+  }
+
+  .gi { // Diff, insert
+    background-color: var(--md-typeset-ins-color);
+  }
+
+  // Highlighted line
+  .hll {
+    display: block;
+    padding: 0 px2em(16px, 13.6px);
+    margin: 0 px2em(-16px, 13.6px);
+    background-color: var(--md-code-hl-color--light);
+    box-shadow: 2px 0 0 0 var(--md-code-hl-color) inset;
+  }
+
+  // Code block title
+  span.filename {
+    position: relative;
+    display: flow-root;
+    padding: px2em(9px, 13.6px) px2em(16px, 13.6px);
+    margin-top: 1em;
+    font-size: px2em(13.6px);
+    font-weight: 700;
+    background-color: var(--md-code-bg-color);
+    border-bottom: px2rem(1px) solid var(--md-default-fg-color--lightest);
+    border-top-left-radius: px2rem(2px);
+    border-top-right-radius: px2rem(2px);
+
+    // Adjust spacing for code block
+    + pre {
+      margin-top: 0;
+
+      // Remove rounded border on top side
+      > code {
+        border-top-left-radius: 0;
+        border-top-right-radius: 0;
+      }
+    }
+  }
+
+  // Code block line numbers (pymdownx-inline)
+  [data-linenos]::before {
+    position: sticky;
+    left: px2em(-16px, 13.6px);
+    // A `z-index` of 3 is necessary for ensuring that code block annotations
+    // don't overlay line numbers, as active annotations have a `z-index` of 2.
+    z-index: 3;
+    float: left;
+    padding-left: px2em(16px, 13.6px);
+    margin-right: px2em(16px, 13.6px);
+    margin-left: px2em(-16px, 13.6px);
+    color: var(--md-default-fg-color--light);
+    content: attr(data-linenos);
+    user-select: none;
+    background-color: var(--md-code-bg-color);
+    box-shadow: px2rem(-1px) 0 var(--md-default-fg-color--lightest) inset;
+  }
+
+  // Code block line anchors - Chrome and Safari seem to have a strange bug
+  // where scroll margin is not applied to anchors inside code blocks. Setting
+  // positioning to absolute seems to fix the problem. Interestingly, this does
+  // not happen in Firefox. Furthermore we must set `visibility: hidden` or
+  // the copy to clipboard functionality will include an empty line between
+  // each set of lines.
+  code a[id] {
+    position: absolute;
+    visibility: hidden;
+  }
+
+  // Copying in progress - this class is set before the content is copied and
+  // removed after copying is done to mitigate whitespace-related issues.
+  code[data-md-copying] {
+
+    // Temporarily remove highlighted lines - see https://bit.ly/32iVGWh
+    .hll {
+      display: contents;
+    }
+
+    // Temporarily remove annotations
+    .md-annotation {
+      display: none;
+    }
+  }
+}
+
+// ----------------------------------------------------------------------------
+// Rules: layout
+// ----------------------------------------------------------------------------
+
+// Code block with line numbers
+.highlighttable {
+  display: flow-root;
+
+  // Set table elements to block layout, because otherwise the whole flexbox
+  // hacking won't work correctly
+  :is(tbody, td) {
+    display: block;
+    padding: 0;
+  }
+
+  // We need to use flexbox layout, because otherwise it's not possible to
+  // make the code container scroll while keeping the line numbers static
+  tr {
+    display: flex;
+  }
+
+  // The pre tags are nested inside a table, so we need to omit the margin
+  // because it collapses below all the overflows
+  pre {
+    margin: 0;
+  }
+
+  // Code block title container
+  th.filename {
+    flex-grow: 1;
+    padding: 0;
+    text-align: left;
+
+    // Adjust spacing
+    span.filename {
+      margin-top: 0;
+    }
+  }
+
+  // Code block line numbers - disable user selection, so code can be easily
+  // copied without accidentally also copying the line numbers
+  .linenos {
+    padding: px2em(10.5px, 13.6px) px2em(16px, 13.6px);
+    padding-right: 0;
+    font-size: px2em(13.6px);
+    user-select: none;
+    background-color: var(--md-code-bg-color);
+    border-top-left-radius: px2rem(2px);
+    border-bottom-left-radius: px2rem(2px);
+  }
+
+  // Code block line numbers container
+  .linenodiv {
+    padding-right: px2em(8px, 13.6px);
+    box-shadow: px2rem(-1px) 0 var(--md-default-fg-color--lightest) inset;
+
+    // Adjust colors and alignment
+    pre {
+      color: var(--md-default-fg-color--light);
+      text-align: right;
+    }
+  }
+
+  // Code block container - stretch to remaining space
+  .code {
+    flex: 1;
+    min-width: 0;
+  }
+}
+
+// Code block line numbers container
+.linenodiv a {
+  color: inherit;
+}
+
+// ----------------------------------------------------------------------------
+
+// Scoped in typesetted content to match specificity of regular content
+.md-typeset {
+
+  // Code block with line numbers - unfortunately, these selectors need to be
+  // overly specific so they don't bleed into code blocks in annotations.
+  .highlighttable {
+    margin: 1em 0;
+    direction: ltr;
+
+    // Remove rounded borders on code blocks
+    > tbody > tr > .code > div > pre > code {
+      border-top-left-radius: 0;
+      border-bottom-left-radius: 0;
+    }
+  }
+
+  // Code block result container
+  .highlight + .result {
+    padding: 0 px2em(16px);
+    margin-top: calc(-1em + #{px2em(-2px)});
+    overflow: visible;
+    border: px2rem(1px) solid var(--md-code-bg-color);
+    border-top-width: px2rem(2px);
+    border-bottom-right-radius: px2rem(2px);
+    border-bottom-left-radius: px2rem(2px);
+
+    // Clearfix, because we can't use overflow: auto
+    &::after {
+      display: block;
+      clear: both;
+      content: "";
+    }
+  }
+}
+
+// ----------------------------------------------------------------------------
+// Rules: top-level
+// ----------------------------------------------------------------------------
+
+// [mobile -]: Align with body copy
+@include break-to-device(mobile) {
+
+  // Top-level code block
+  .md-content__inner > .highlight {
+    margin: 1em px2rem(-16px);
+
+    // Remove rounded borders
+    > .filename,
+    > pre > code {
+      border-radius: 0;
+    }
+
+    // Code block with line numbers - unfortunately, these selectors need to be
+    // overly specific so they don't bleed into code blocks in annotations.
+    > .highlighttable > tbody > tr > .filename span.filename,
+    > .highlighttable > tbody > tr > .linenos,
+    > .highlighttable > tbody > tr > .code > div > pre > code {
+      border-radius: 0;
+    }
+
+    // Code block result container
+    + .result {
+      margin-inline: px2rem(-16px);
+      border-inline-width: 0;
+      border-radius: 0;
+    }
+  }
+}
diff --git a/src/templates/assets/stylesheets/main/extensions/pymdownx/_keys.scss b/src/templates/assets/stylesheets/main/extensions/pymdownx/_keys.scss
new file mode 100644
index 00000000..8749f08c
--- /dev/null
+++ b/src/templates/assets/stylesheets/main/extensions/pymdownx/_keys.scss
@@ -0,0 +1,115 @@
+////
+/// Copyright (c) 2016-2023 Martin Donath <martin.donath@squidfunk.com>
+///
+/// Permission is hereby granted, free of charge, to any person obtaining a
+/// copy of this software and associated documentation files (the "Software"),
+/// to deal in the Software without restriction, including without limitation
+/// the rights to use, copy, modify, merge, publish, distribute, sublicense,
+/// and/or sell copies of the Software, and to permit persons to whom the
+/// Software is furnished to do so, subject to the following conditions:
+///
+/// The above copyright notice and this permission notice shall be included in
+/// all copies or substantial portions of the Software.
+///
+/// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+/// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+/// FITNESS FOR A PARTICULAR PURPOSE AND NON-INFRINGEMENT. IN NO EVENT SHALL
+/// THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+/// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+/// FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER
+/// DEALINGS
+////
+
+// ----------------------------------------------------------------------------
+// Rules
+// ----------------------------------------------------------------------------
+
+// Scoped in typesetted content to match specificity of regular content
+.md-typeset {
+
+  // Keyboard key
+  .keys {
+
+    // Keyboard key icon
+    kbd:is(::before, ::after) {
+      position: relative;
+      margin: 0;
+      color: inherit;
+      -moz-osx-font-smoothing: initial;
+      -webkit-font-smoothing: initial;
+    }
+
+    // Surrounding text
+    span {
+      padding: 0 px2em(3.2px);
+      color: var(--md-default-fg-color--light);
+    }
+
+    // Define keyboard keys with left icon
+    @each $name, $code in (
+
+      // Modifiers
+      "alt":           "\2387",
+      "left-alt":      "\2387",
+      "right-alt":     "\2387",
+      "command":       "\2318",
+      "left-command":  "\2318",
+      "right-command": "\2318",
+      "control":       "\2303",
+      "left-control":  "\2303",
+      "right-control": "\2303",
+      "meta":          "\25C6",
+      "left-meta":     "\25C6",
+      "right-meta":    "\25C6",
+      "option":        "\2325",
+      "left-option":   "\2325",
+      "right-option":  "\2325",
+      "shift":         "\21E7",
+      "left-shift":    "\21E7",
+      "right-shift":   "\21E7",
+      "super":         "\2756",
+      "left-super":    "\2756",
+      "right-super":   "\2756",
+      "windows":       "\229E",
+      "left-windows":  "\229E",
+      "right-windows": "\229E",
+
+      // Other keys
+      "arrow-down":    "\2193",
+      "arrow-left":    "\2190",
+      "arrow-right":   "\2192",
+      "arrow-up":      "\2191",
+      "backspace":     "\232B",
+      "backtab":       "\21E4",
+      "caps-lock":     "\21EA",
+      "clear":         "\2327",
+      "context-menu":  "\2630",
+      "delete":        "\2326",
+      "eject":         "\23CF",
+      "end":           "\2913",
+      "escape":        "\238B",
+      "home":          "\2912",
+      "insert":        "\2380",
+      "page-down":     "\21DF",
+      "page-up":       "\21DE",
+      "print-screen":  "\2399"
+    ) {
+      .key-#{$name}::before {
+        padding-right: px2em(6.4px);
+        content: $code;
+      }
+    }
+
+    // Define keyboard keys with right icon
+    @each $name, $code in (
+      "tab":           "\21E5",
+      "num-enter":     "\2324",
+      "enter":         "\23CE"
+    ) {
+      .key-#{$name}::after {
+        padding-left: px2em(6.4px);
+        content: $code;
+      }
+    }
+  }
+}
diff --git a/src/templates/assets/stylesheets/main/extensions/pymdownx/_tabbed.scss b/src/templates/assets/stylesheets/main/extensions/pymdownx/_tabbed.scss
new file mode 100644
index 00000000..9df91bfc
--- /dev/null
+++ b/src/templates/assets/stylesheets/main/extensions/pymdownx/_tabbed.scss
@@ -0,0 +1,400 @@
+////
+/// Copyright (c) 2016-2023 Martin Donath <martin.donath@squidfunk.com>
+///
+/// Permission is hereby granted, free of charge, to any person obtaining a
+/// copy of this software and associated documentation files (the "Software"),
+/// to deal in the Software without restriction, including without limitation
+/// the rights to use, copy, modify, merge, publish, distribute, sublicense,
+/// and/or sell copies of the Software, and to permit persons to whom the
+/// Software is furnished to do so, subject to the following conditions:
+///
+/// The above copyright notice and this permission notice shall be included in
+/// all copies or substantial portions of the Software.
+///
+/// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+/// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+/// FITNESS FOR A PARTICULAR PURPOSE AND NON-INFRINGEMENT. IN NO EVENT SHALL
+/// THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+/// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+/// FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER
+/// DEALINGS
+////
+
+// ----------------------------------------------------------------------------
+// Rules
+// ----------------------------------------------------------------------------
+
+// Tabbed variables
+:root {
+  --md-tabbed-icon--prev: svg-load("material/chevron-left.svg");
+  --md-tabbed-icon--next: svg-load("material/chevron-right.svg");
+}
+
+// ----------------------------------------------------------------------------
+
+// Scoped in typesetted content to match specificity of regular content
+.md-typeset {
+
+  // Tabbed container
+  .tabbed-set {
+    position: relative;
+    display: flex;
+    flex-flow: column wrap;
+    margin: 1em 0;
+    border-radius: px2rem(2px);
+
+    // Tab radio button - the Tabbed extension will generate radio buttons with
+    // labels, so tabs can be triggered without the necessity for JavaScript.
+    // This is pretty cool, as it has great accessibility out-of-the box, so
+    // we just hide the radio button and toggle the label color for indication.
+    > input {
+      position: absolute;
+      width: 0;
+      height: 0;
+      opacity: 0;
+
+      // Adjust scroll margin
+      &:target {
+        --md-scroll-offset: #{px2em(10px, 16px)};
+      }
+
+      // Tab label states
+      @for $i from 20 through 1 {
+        &:nth-child(#{$i}) {
+
+          // Tab is active
+          &:checked {
+
+            // Tab label
+            ~ .tabbed-labels > :nth-child(#{$i}) {
+              @extend %tabbed-label;
+            }
+
+            // Tab content
+            ~ .tabbed-content > :nth-child(#{$i}) {
+              @extend %tabbed-content;
+            }
+          }
+
+          // Tab label on keyboard focus
+          &.focus-visible ~ .tabbed-labels > :nth-child(#{$i}) {
+            @extend %tabbed-label-focus-visible;
+          }
+        }
+      }
+
+      // Tab indicator on keyboard focus
+      &.focus-visible ~ .tabbed-labels::before {
+        background-color: var(--md-accent-fg-color);
+      }
+    }
+  }
+
+  // Tabbed labels
+  .tabbed-labels {
+    display: flex;
+    max-width: 100%;
+    overflow: auto;
+    box-shadow: 0 px2rem(-1px) var(--md-default-fg-color--lightest) inset;
+    -ms-overflow-style: none;          // IE, Edge
+    scrollbar-width: none;             // Firefox
+
+    // [print]: Move one layer up for ordering
+    @media print {
+      display: contents;
+    }
+
+    // [screen and no reduced motion]: Disable animation
+    @media screen {
+
+      // [js]: Show animated tab indicator
+      .js & {
+        position: relative;
+
+        // Tab indicator
+        &::before {
+          position: absolute;
+          bottom: 0;
+          left: 0;
+          display: block;
+          width: var(--md-indicator-width);
+          height: 2px;
+          content: "";
+          background: var(--md-default-fg-color);
+          transition:
+            width            225ms,
+            background-color 250ms,
+            transform        250ms;
+          transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+          transform: translateX(var(--md-indicator-x));
+        }
+      }
+    }
+
+    // Webkit scrollbar
+    &::-webkit-scrollbar {
+      display: none;                   // Chrome, Safari
+    }
+
+    // Tab label
+    > label {
+      flex-shrink: 0;
+      width: auto;
+      padding: px2em(10px, 12.8px) 1.25em px2em(8px, 12.8px);
+      font-size: px2rem(12.8px);
+      font-weight: 700;
+      color: var(--md-default-fg-color--light);
+      white-space: nowrap;
+      cursor: pointer;
+      border-bottom: px2rem(2px) solid transparent;
+      border-radius: px2rem(2px) px2rem(2px) 0 0;
+      transition:
+        background-color 250ms,
+        color            250ms;
+      scroll-margin-inline-start: px2rem(20px);
+
+      // [print]: Intersperse labels with containers
+      @media print {
+
+        // Ensure correct order of labels
+        @for $i from 1 through 20 {
+          &:nth-child(#{$i}) {
+            order: $i;
+          }
+        }
+      }
+
+      // Tab label on hover
+      &:hover {
+        color: var(--md-default-fg-color);
+      }
+    }
+  }
+
+  // Tabbed content
+  .tabbed-content {
+    width: 100%;
+
+    // [print]: Move one layer up for ordering
+    @media print {
+      display: contents;
+    }
+  }
+
+  // Tabbed block
+  .tabbed-block {
+    display: none;
+
+    // [print]: Intersperse labels with containers
+    @media print {
+      display: block;
+
+      // Ensure correct order of containers
+      @for $i from 1 through 20 {
+        &:nth-child(#{$i}) {
+          order: $i;
+        }
+      }
+    }
+
+    // Code block is the first child of a tab - remove margin and mirror
+    // previous (now deprecated) SuperFences code block grouping behavior
+    > pre:first-child,
+    > .highlight:first-child > pre {
+      margin: 0;
+
+      // Remove rounded borders on code block
+      > code {
+        border-top-left-radius: 0;
+        border-top-right-radius: 0;
+      }
+    }
+
+    // Code block is the first child of a tab - remove margin and mirror
+    // previous (now deprecated) SuperFences code block grouping behavior
+    > .highlight:first-child {
+
+      // Code block title - remove spacing and rounded borders
+      > .filename {
+        margin: 0;
+        border-top-left-radius: 0;
+        border-top-right-radius: 0;
+      }
+
+      // Code block with line numbers - unfortunately, these selectors need to
+      // be overly specific so they don't bleed into code blocks in annotations.
+      > .highlighttable {
+        margin: 0;
+
+        // Remove rounded borders on line numbers and titles
+        > tbody > tr > .filename span.filename,
+        > tbody > tr > .linenos {
+          margin: 0;
+          border-top-left-radius: 0;
+          border-top-right-radius: 0;
+        }
+
+        // Remove rounded borders on code blocks
+        > tbody > tr > .code > div > pre > code {
+          border-top-left-radius: 0;
+          border-top-right-radius: 0;
+        }
+      }
+
+      // Code block result container - adjust spacing
+      + .result {
+        margin-top: px2em(-2px);
+      }
+    }
+
+    // Adjust spacing for nested tabbed container
+    > .tabbed-set {
+      margin: 0;
+    }
+  }
+
+  // Tabbed button
+  .tabbed-button {
+    display: block;
+    align-self: center;
+    width: px2rem(18px);
+    height: px2rem(18px);
+    margin-top: px2rem(2px);
+    color: var(--md-default-fg-color--light);
+    pointer-events: initial;
+    cursor: pointer;
+    border-radius: 100%;
+    transition: background-color 250ms;
+
+    // Tabbed button on hover
+    &:hover {
+      color: var(--md-accent-fg-color);
+      background-color: var(--md-accent-fg-color--transparent);
+    }
+
+    // Tabbed button icon
+    &::after {
+      display: block;
+      width: 100%;
+      height: 100%;
+      content: "";
+      background-color: currentcolor;
+      transition:
+        background-color 250ms,
+        transform        250ms;
+      mask-image: var(--md-tabbed-icon--prev);
+      mask-position: center;
+      mask-repeat: no-repeat;
+      mask-size: contain;
+    }
+  }
+
+  // Tabbed control
+  .tabbed-control {
+    position: absolute;
+    display: flex;
+    justify-content: start;
+    width: px2rem(24px);
+    height: px2rem(38px);
+    pointer-events: none;
+    background:
+      linear-gradient(
+        to right,
+        var(--md-default-bg-color) 60%,
+        transparent
+      );
+    transition: opacity 125ms;
+
+    // Adjust for right-to-left languages
+    [dir="rtl"] & {
+      transform: rotate(180deg);
+    }
+
+    // Tabbed control is hidden
+    &[hidden] {
+      opacity: 0;
+    }
+
+    // Tabbed control next
+    &--next {
+      right: 0;
+      justify-content: end;
+      background:
+        linear-gradient(
+          to left,
+          var(--md-default-bg-color) 60%,
+          transparent
+        );
+
+      // Tabbed button icon content
+      .tabbed-button::after {
+        mask-image: var(--md-tabbed-icon--next);
+      }
+    }
+  }
+}
+
+// ----------------------------------------------------------------------------
+// Rules: top-level
+// ----------------------------------------------------------------------------
+
+// [mobile -]: Align with body copy
+@include break-to-device(mobile) {
+
+  // Top-level tabbed labels
+  .md-content__inner > .tabbed-set .tabbed-labels {
+    max-width: 100vw;
+    padding-inline-start: px2rem(16px);
+    margin: 0 px2rem(-16px);
+    scroll-padding-inline-start: px2rem(16px);
+
+    // Hack: some browsers ignore the right padding on flex containers,
+    // see https://bit.ly/3lsPS3S
+    &::after {
+      padding-inline-end: px2rem(16px);
+      content: "";
+    }
+
+    // Tabbed control previous
+    ~ .tabbed-control--prev {
+      width: px2rem(40px);
+      padding-inline-start: px2rem(16px);
+      margin-inline-start: px2rem(-16px);
+    }
+
+    // Tabbed control next
+    ~ .tabbed-control--next {
+      width: px2rem(40px);
+      padding-inline-end: px2rem(16px);
+      margin-inline-end: px2rem(-16px);
+    }
+  }
+}
+
+// ----------------------------------------------------------------------------
+// Placeholders: improve colocation for better compression
+// ----------------------------------------------------------------------------
+
+// Tab label placeholder
+%tabbed-label {
+
+  // [screen]: Show active state
+  @media screen {
+    color: var(--md-default-fg-color);
+
+    // [no-js]: Show border (indicator is animated with JavaScript)
+    .no-js & {
+      border-color: var(--md-default-fg-color);
+    }
+  }
+}
+
+// Tab label on keyboard focus placeholder
+%tabbed-label-focus-visible {
+  color: var(--md-accent-fg-color);
+}
+
+// Tab content placeholder
+%tabbed-content {
+  display: block;
+}
diff --git a/src/templates/assets/stylesheets/main/extensions/pymdownx/_tasklist.scss b/src/templates/assets/stylesheets/main/extensions/pymdownx/_tasklist.scss
new file mode 100644
index 00000000..a1d1117c
--- /dev/null
+++ b/src/templates/assets/stylesheets/main/extensions/pymdownx/_tasklist.scss
@@ -0,0 +1,78 @@
+////
+/// Copyright (c) 2016-2023 Martin Donath <martin.donath@squidfunk.com>
+///
+/// Permission is hereby granted, free of charge, to any person obtaining a
+/// copy of this software and associated documentation files (the "Software"),
+/// to deal in the Software without restriction, including without limitation
+/// the rights to use, copy, modify, merge, publish, distribute, sublicense,
+/// and/or sell copies of the Software, and to permit persons to whom the
+/// Software is furnished to do so, subject to the following conditions:
+///
+/// The above copyright notice and this permission notice shall be included in
+/// all copies or substantial portions of the Software.
+///
+/// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+/// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+/// FITNESS FOR A PARTICULAR PURPOSE AND NON-INFRINGEMENT. IN NO EVENT SHALL
+/// THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+/// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+/// FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER
+/// DEALINGS
+////
+
+// ----------------------------------------------------------------------------
+// Rules
+// ----------------------------------------------------------------------------
+
+// Tasklist variables
+:root {
+  --md-tasklist-icon: svg-load("octicons/check-circle-fill-24.svg");
+  --md-tasklist-icon--checked: svg-load("octicons/check-circle-fill-24.svg");
+}
+
+// ----------------------------------------------------------------------------
+
+// Scoped in typesetted content to match specificity of regular content
+.md-typeset {
+
+  // Tasklist item
+  .task-list-item {
+    position: relative;
+    list-style-type: none;
+
+    // Make checkbox items align with normal list items, but position
+    // everything in ems for correct layout at smaller font sizes
+    [type="checkbox"] {
+      position: absolute;
+      top: 0.45em;
+      inset-inline-start: -2em;
+    }
+  }
+
+  // Hide native checkbox, when custom classes are enabled
+  .task-list-control [type="checkbox"] {
+    z-index: -1;
+    opacity: 0;
+  }
+
+  // Tasklist indicator in unchecked state
+  .task-list-indicator::before {
+    position: absolute;
+    top: 0.15em;
+    width: px2em(20px);
+    height: px2em(20px);
+    content: "";
+    background-color: var(--md-default-fg-color--lightest);
+    inset-inline-start: px2em(-24px);
+    mask-image: var(--md-tasklist-icon);
+    mask-position: center;
+    mask-repeat: no-repeat;
+    mask-size: contain;
+  }
+
+  // Tasklist indicator in checked state
+  [type="checkbox"]:checked + .task-list-indicator::before {
+    background-color: $clr-green-a400;
+    mask-image: var(--md-tasklist-icon--checked);
+  }
+}