Merge branch 'dev' into feature/new-user

2026-01-30 15:31:52 +00:00 · 2025-12-22 17:13:31 +00:00
parent bdd8a4a08d 545a2dc5da
commit e2a9a62c1f
155 changed files with 1675 additions and 907 deletions
@@ -10,7 +10,7 @@ jobs:
    steps:
      - uses: actions/checkout@v6
      - run: zip -r config-default.zip config/_default
-      - uses: actions/upload-artifact@v5
+      - uses: actions/upload-artifact@v6
        with:
          name: config-default
          path: config-default.zip
@@ -38,7 +38,7 @@ jobs:

      - name: Create Pull Request
        if: steps.git-check.outputs.modified == 'true'
-        uses: peter-evans/create-pull-request@v7
+        uses: peter-evans/create-pull-request@v8
        with:
          commit-message: Update Hugo supported version
          title: ⚙️ Update Hugo supported version
@@ -25,7 +25,7 @@ static
 # 
 # This create an unclose node

-layouts/_default/_markup/render-heading.html
+layouts/_default/_markup
 layouts/_default/index.json
 layouts/shortcodes/screenshot.html
 layouts/shortcodes/figure.html
@@ -9,7 +9,6 @@
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
      "Courier New", monospace;
    --spacing: 0.25rem;
-    --container-2xs: 18rem;
    --container-xs: 20rem;
    --container-xl: 36rem;
    --container-3xl: 48rem;
@@ -47,6 +46,7 @@
    --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
    --animate-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
    --blur-sm: 8px;
+    --blur-xl: 24px;
    --blur-2xl: 40px;
    --default-transition-duration: 150ms;
    --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
@@ -518,6 +518,7 @@
      border-top-width: 1px;
      margin-top: 3em;
      margin-bottom: 3em;
+      border: 0.8px solid rgba(var(--color-neutral-300), 1);
    }
    :where(blockquote):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      font-weight: 500;
@@ -614,7 +615,6 @@
      color: var(--tw-prose-code);
      font-weight: 600;
      font-size: 0.875em;
-      background-color: rgba(var(--color-neutral-50), 1);
      padding-top: 3px;
      padding-bottom: 3px;
      padding-left: 5px;
@@ -741,9 +741,9 @@
    --tw-prose-bold: rgba(var(--color-neutral-900), 1);
    --tw-prose-counters: rgba(var(--color-neutral-800), 1);
    --tw-prose-bullets: rgba(var(--color-neutral-500), 1);
-    --tw-prose-hr: rgba(var(--color-neutral-200), 1);
+    --tw-prose-hr: oklch(92.8% 0.006 264.531);
    --tw-prose-quotes: rgba(var(--color-neutral-700), 1);
-    --tw-prose-quote-borders: rgba(var(--color-primary-200), 1);
+    --tw-prose-quote-borders: rgba(var(--color-primary-500), 1);
    --tw-prose-captions: rgba(var(--color-neutral-500), 1);
    --tw-prose-kbd: oklch(21% 0.034 264.665);
    --tw-prose-kbd-shadows: color-mix(in oklab, oklch(21% 0.034 264.665) 10%, transparent);
@@ -759,9 +759,9 @@
    --tw-prose-invert-bold: rgba(var(--color-neutral), 1);
    --tw-prose-invert-counters: rgba(var(--color-neutral-400), 1);
    --tw-prose-invert-bullets: rgba(var(--color-neutral-600), 1);
-    --tw-prose-invert-hr: rgba(var(--color-neutral-500), 1);
+    --tw-prose-invert-hr: oklch(37.3% 0.034 259.733);
    --tw-prose-invert-quotes: rgba(var(--color-neutral-200), 1);
-    --tw-prose-invert-quote-borders: rgba(var(--color-primary-900), 1);
+    --tw-prose-invert-quote-borders: rgba(var(--color-primary-600), 1);
    --tw-prose-invert-captions: rgba(var(--color-neutral-400), 1);
    --tw-prose-invert-kbd: #fff;
    --tw-prose-invert-kbd-shadows: rgb(255 255 255 / 10%);
@@ -1372,6 +1372,9 @@
  .justify-center {
    justify-content: center;
  }
+  .gap-1 {
+    gap: calc(var(--spacing) * 1);
+  }
  .gap-4 {
    gap: calc(var(--spacing) * 4);
  }
@@ -1496,6 +1499,10 @@
    border-top-left-radius: var(--radius-lg);
    border-top-right-radius: var(--radius-lg);
  }
+  .rounded-t-md {
+    border-top-left-radius: var(--radius-md);
+    border-top-right-radius: var(--radius-md);
+  }
  .rounded-b-lg {
    border-bottom-right-radius: var(--radius-lg);
    border-bottom-left-radius: var(--radius-lg);
@@ -1609,8 +1616,8 @@
    :where(mark):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      background-color: rgba(var(--color-primary-400), 1);
    }
-    :where(code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
-      background-color: rgba(var(--color-neutral-700), 1);
+    :where(code:not(pre code)):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+      background-color: color-mix(in oklab, oklch(21% 0.006 285.885) 70%, transparent);
    }
    :where(a.active):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      text-decoration-color: rgba(var(--color-primary-400), 1);
@@ -1618,6 +1625,9 @@
    :where(p.active):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      text-decoration-color: rgba(var(--color-primary-400), 1);
    }
+    :where(hr):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+      border: 0.8px solid rgba(var(--color-neutral-500), 1);
+    }
  }
  .bg-\[\#6d6d6d\] {
    background-color: #6d6d6d;
@@ -1640,6 +1650,12 @@
      background-color: color-mix(in oklab, rgba(var(--color-neutral-100), 1) 50%, transparent);
    }
  }
+  .bg-neutral-100\/75 {
+    background-color: color-mix(in srgb, rgba(rgba(var(--color-neutral-100), 1), 1) 75%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, rgba(var(--color-neutral-100), 1) 75%, transparent);
+    }
+  }
  .bg-neutral-300 {
    background-color: rgba(var(--color-neutral-300), 1);
  }
@@ -2176,6 +2192,11 @@
    -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
    backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
  }
+  .backdrop-blur-xl {
+    --tw-backdrop-blur: blur(var(--blur-xl));
+    -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
+    backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
+  }
  .transition {
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
@@ -2412,6 +2433,13 @@
      }
    }
  }
+  .hover\:bg-neutral-200 {
+    &:hover {
+      @media (hover: hover) {
+        background-color: rgba(var(--color-neutral-200), 1);
+      }
+    }
+  }
  .hover\:bg-primary-100 {
    &:hover {
      @media (hover: hover) {
@@ -2818,11 +2846,6 @@
      margin-top: calc(var(--spacing) * 0);
    }
  }
-  .lg\:ml-auto {
-    @media (width >= 1024px) {
-      margin-left: auto;
-    }
-  }
  .lg\:block {
    @media (width >= 1024px) {
      display: block;
@@ -2858,11 +2881,6 @@
      width: auto;
    }
  }
-  .lg\:max-w-2xs {
-    @media (width >= 1024px) {
-      max-width: var(--container-2xs);
-    }
-  }
  .lg\:max-w-7xl {
    @media (width >= 1024px) {
      max-width: var(--container-7xl);
@@ -3056,8 +3074,8 @@
      :where(mark):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
        background-color: rgba(var(--color-primary-400), 1);
      }
-      :where(code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
-        background-color: rgba(var(--color-neutral-700), 1);
+      :where(code:not(pre code)):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+        background-color: color-mix(in oklab, oklch(21% 0.006 285.885) 70%, transparent);
      }
      :where(a.active):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
        text-decoration-color: rgba(var(--color-primary-400), 1);
@@ -3065,6 +3083,9 @@
      :where(p.active):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
        text-decoration-color: rgba(var(--color-primary-400), 1);
      }
+      :where(hr):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+        border: 0.8px solid rgba(var(--color-neutral-500), 1);
+      }
    }
  }
  .dark\:bg-neutral-400 {
@@ -3095,6 +3116,14 @@
      }
    }
  }
+  .dark\:bg-neutral-800\/60 {
+    &:is(.dark *) {
+      background-color: color-mix(in srgb, rgba(rgba(var(--color-neutral-800), 1), 1) 60%, transparent);
+      @supports (color: color-mix(in lab, red, red)) {
+        background-color: color-mix(in oklab, rgba(var(--color-neutral-800), 1) 60%, transparent);
+      }
+    }
+  }
  .dark\:bg-neutral-900\/50 {
    &:is(.dark *) {
      background-color: color-mix(in srgb, rgba(rgba(var(--color-neutral-900), 1), 1) 50%, transparent);
@@ -3226,6 +3255,15 @@
      }
    }
  }
+  .dark\:hover\:bg-neutral-700 {
+    &:is(.dark *) {
+      &:hover {
+        @media (hover: hover) {
+          background-color: rgba(var(--color-neutral-700), 1);
+        }
+      }
+    }
+  }
  .dark\:hover\:bg-primary-400 {
    &:is(.dark *) {
      &:hover {
@@ -3285,16 +3323,36 @@
  }
 }
@layer utilities {
-  .prose .chroma {
-    position: static;
+  .highlight-wrapper {
+    position: relative;
+    z-index: 0;
+    display: block;
+    overflow: hidden;
    border-radius: var(--radius-md);
-    background-color: rgba(var(--color-neutral-50), 1);
-    color: rgba(var(--color-neutral-700), 1);
+    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+    margin-top: 1.7142857em;
+    margin-bottom: 1.7142857em;
+  }
+  .highlight-wrapper pre, .highlight-wrapper table, .highlight-wrapper div {
+    margin-top: 0;
+    margin-bottom: 0;
+  }
+  .highlight-wrapper:has(.codeblock-title) pre {
+    border-radius: 0;
+  }
+  .codeblock-title {
+    border-bottom-style: var(--tw-border-style);
+    border-bottom-width: 1px;
+    border-color: rgba(var(--color-neutral-200), 1);
+    padding-inline: calc(var(--spacing) * 4);
+    padding-block: calc(var(--spacing) * 2);
    &:is(.dark *) {
-      background-color: rgba(var(--color-neutral-700), 1);
+      border-color: rgba(var(--color-neutral-800), 1);
    }
+    background-color: #fff;
    &:is(.dark *) {
-      color: rgba(var(--color-neutral-200), 1);
+      background-color: #0d1117;
    }
  }
  .chroma .lntd, .chroma .lntd pre {
@@ -3318,134 +3376,535 @@
    margin-inline: calc(var(--spacing) * -4);
    display: block;
    width: auto;
-    background-color: rgba(var(--color-primary-100), 1);
    padding-inline: calc(var(--spacing) * 4);
-    &:is(.dark *) {
-      background-color: rgba(var(--color-primary-900), 1);
-    }
  }
  .chroma .lntd .hl {
    margin: calc(var(--spacing) * 0);
    padding: calc(var(--spacing) * 0);
  }
-  .chroma .lnt, .chroma .ln {
-    margin-right: 0.4em;
-    padding-inline: 0.4em;
-    padding-block: calc(var(--spacing) * 0);
-    color: rgba(var(--color-neutral-600), 1);
-    &:is(.dark *) {
-      color: rgba(var(--color-neutral-300), 1);
+  .chroma:not(:is(table *)) > code {
+    display: block;
+    min-width: max-content;
+  }
+  html:not(.dark) {
+    .bg {
+      background-color: #fff;
+    }
+    .chroma {
+      background-color: #fff;
+    }
+    .chroma .err {
+      color: #f6f8fa;
+      background-color: #82071e;
+    }
+    .chroma .lnlinks {
+      outline: none;
+      text-decoration: none;
+      color: inherit;
+    }
+    .chroma .lntd {
+      vertical-align: top;
+      padding: 0;
+      margin: 0;
+      border: 0;
+    }
+    .chroma .lntable {
+      border-spacing: 0;
+    }
+    .chroma .hl {
+      background-color: #e5e5e5;
+    }
+    .chroma .lnt {
+      white-space: pre;
+      -webkit-user-select: none;
+      user-select: none;
+      margin-right: 0.4em;
+      padding: 0 0.4em 0 0.4em;
+      color: #7f7f7f;
+    }
+    .chroma .ln {
+      white-space: pre;
+      -webkit-user-select: none;
+      user-select: none;
+      margin-right: 0.4em;
+      padding: 0 0.4em 0 0.4em;
+      color: #7f7f7f;
+    }
+    .chroma .line {
+      display: flex;
+    }
+    .chroma .k {
+      color: #cf222e;
+    }
+    .chroma .kc {
+      color: #cf222e;
+    }
+    .chroma .kd {
+      color: #cf222e;
+    }
+    .chroma .kn {
+      color: #cf222e;
+    }
+    .chroma .kp {
+      color: #cf222e;
+    }
+    .chroma .kr {
+      color: #cf222e;
+    }
+    .chroma .kt {
+      color: #cf222e;
+    }
+    .chroma .na {
+      color: #1f2328;
+    }
+    .chroma .nc {
+      color: #1f2328;
+    }
+    .chroma .no {
+      color: #0550ae;
+    }
+    .chroma .nd {
+      color: #0550ae;
+    }
+    .chroma .ni {
+      color: #6639ba;
+    }
+    .chroma .nl {
+      color: #900;
+      font-weight: bold;
+    }
+    .chroma .nn {
+      color: #24292e;
+    }
+    .chroma .nx {
+      color: #1f2328;
+    }
+    .chroma .nt {
+      color: #0550ae;
+    }
+    .chroma .nb {
+      color: #6639ba;
+    }
+    .chroma .bp {
+      color: #6a737d;
+    }
+    .chroma .nv {
+      color: #953800;
+    }
+    .chroma .vc {
+      color: #953800;
+    }
+    .chroma .vg {
+      color: #953800;
+    }
+    .chroma .vi {
+      color: #953800;
+    }
+    .chroma .vm {
+      color: #953800;
+    }
+    .chroma .nf {
+      color: #6639ba;
+    }
+    .chroma .fm {
+      color: #6639ba;
+    }
+    .chroma .s {
+      color: #0a3069;
+    }
+    .chroma .sa {
+      color: #0a3069;
+    }
+    .chroma .sb {
+      color: #0a3069;
+    }
+    .chroma .sc {
+      color: #0a3069;
+    }
+    .chroma .dl {
+      color: #0a3069;
+    }
+    .chroma .sd {
+      color: #0a3069;
+    }
+    .chroma .s2 {
+      color: #0a3069;
+    }
+    .chroma .se {
+      color: #0a3069;
+    }
+    .chroma .sh {
+      color: #0a3069;
+    }
+    .chroma .si {
+      color: #0a3069;
+    }
+    .chroma .sx {
+      color: #0a3069;
+    }
+    .chroma .sr {
+      color: #0a3069;
+    }
+    .chroma .s1 {
+      color: #0a3069;
+    }
+    .chroma .ss {
+      color: #032f62;
+    }
+    .chroma .m {
+      color: #0550ae;
+    }
+    .chroma .mb {
+      color: #0550ae;
+    }
+    .chroma .mf {
+      color: #0550ae;
+    }
+    .chroma .mh {
+      color: #0550ae;
+    }
+    .chroma .mi {
+      color: #0550ae;
+    }
+    .chroma .il {
+      color: #0550ae;
+    }
+    .chroma .mo {
+      color: #0550ae;
+    }
+    .chroma .o {
+      color: #0550ae;
+    }
+    .chroma .ow {
+      color: #0550ae;
+    }
+    .chroma .p {
+      color: #1f2328;
+    }
+    .chroma .c {
+      color: #57606a;
+    }
+    .chroma .ch {
+      color: #57606a;
+    }
+    .chroma .cm {
+      color: #57606a;
+    }
+    .chroma .c1 {
+      color: #57606a;
+    }
+    .chroma .cs {
+      color: #57606a;
+    }
+    .chroma .cp {
+      color: #57606a;
+    }
+    .chroma .cpf {
+      color: #57606a;
+    }
+    .chroma .gd {
+      color: #82071e;
+      background-color: #ffebe9;
+    }
+    .chroma .ge {
+      color: #1f2328;
+    }
+    .chroma .gi {
+      color: #116329;
+      background-color: #dafbe1;
+    }
+    .chroma .go {
+      color: #1f2328;
+    }
+    .chroma .gl {
+      text-decoration: underline;
+    }
+    .chroma .w {
+      color: #fff;
    }
  }
-  .chroma .k, .chroma .kd, .chroma .kn, .chroma .kp, .chroma .kr, .chroma .nc, .chroma .fm, .chroma .nn, .chroma .vc, .chroma .o {
-    color: rgba(var(--color-primary-600), 1);
-    &:is(.dark *) {
-      color: rgba(var(--color-primary-300), 1);
+  html.dark {
+    .bg {
+      color: #e6edf3;
+      background-color: #0d1117;
+    }
+    .chroma {
+      color: #e6edf3;
+      background-color: #0d1117;
+    }
+    .chroma .err {
+      color: #f85149;
+    }
+    .chroma .lnlinks {
+      outline: none;
+      text-decoration: none;
+      color: inherit;
+    }
+    .chroma .lntd {
+      vertical-align: top;
+      padding: 0;
+      margin: 0;
+      border: 0;
+    }
+    .chroma .lntable {
+      border-spacing: 0;
+    }
+    .chroma .hl {
+      background-color: #333;
+    }
+    .chroma .lnt {
+      white-space: pre;
+      -webkit-user-select: none;
+      user-select: none;
+      margin-right: 0.4em;
+      padding: 0 0.4em 0 0.4em;
+      color: #737679;
+    }
+    .chroma .ln {
+      white-space: pre;
+      -webkit-user-select: none;
+      user-select: none;
+      margin-right: 0.4em;
+      padding: 0 0.4em 0 0.4em;
+      color: #6e7681;
+    }
+    .chroma .line {
+      display: flex;
+    }
+    .chroma .k {
+      color: #ff7b72;
+    }
+    .chroma .kc {
+      color: #79c0ff;
+    }
+    .chroma .kd {
+      color: #ff7b72;
+    }
+    .chroma .kn {
+      color: #ff7b72;
+    }
+    .chroma .kp {
+      color: #79c0ff;
+    }
+    .chroma .kr {
+      color: #ff7b72;
+    }
+    .chroma .kt {
+      color: #ff7b72;
+    }
+    .chroma .nc {
+      color: #f0883e;
+      font-weight: bold;
+    }
+    .chroma .no {
+      color: #79c0ff;
+      font-weight: bold;
+    }
+    .chroma .nd {
+      color: #d2a8ff;
+      font-weight: bold;
+    }
+    .chroma .ni {
+      color: #ffa657;
+    }
+    .chroma .ne {
+      color: #f0883e;
+      font-weight: bold;
+    }
+    .chroma .nl {
+      color: #79c0ff;
+      font-weight: bold;
+    }
+    .chroma .nn {
+      color: #ff7b72;
+    }
+    .chroma .py {
+      color: #79c0ff;
+    }
+    .chroma .nt {
+      color: #7ee787;
+    }
+    .chroma .nv {
+      color: #79c0ff;
+    }
+    .chroma .vc {
+      color: #79c0ff;
+    }
+    .chroma .vg {
+      color: #79c0ff;
+    }
+    .chroma .vi {
+      color: #79c0ff;
+    }
+    .chroma .vm {
+      color: #79c0ff;
+    }
+    .chroma .nf {
+      color: #d2a8ff;
+      font-weight: bold;
+    }
+    .chroma .fm {
+      color: #d2a8ff;
+      font-weight: bold;
+    }
+    .chroma .l {
+      color: #a5d6ff;
+    }
+    .chroma .ld {
+      color: #79c0ff;
+    }
+    .chroma .s {
+      color: #a5d6ff;
+    }
+    .chroma .sa {
+      color: #79c0ff;
+    }
+    .chroma .sb {
+      color: #a5d6ff;
+    }
+    .chroma .sc {
+      color: #a5d6ff;
+    }
+    .chroma .dl {
+      color: #79c0ff;
+    }
+    .chroma .sd {
+      color: #a5d6ff;
+    }
+    .chroma .s2 {
+      color: #a5d6ff;
+    }
+    .chroma .se {
+      color: #79c0ff;
+    }
+    .chroma .sh {
+      color: #79c0ff;
+    }
+    .chroma .si {
+      color: #a5d6ff;
+    }
+    .chroma .sx {
+      color: #a5d6ff;
+    }
+    .chroma .sr {
+      color: #79c0ff;
+    }
+    .chroma .s1 {
+      color: #a5d6ff;
+    }
+    .chroma .ss {
+      color: #a5d6ff;
+    }
+    .chroma .m {
+      color: #a5d6ff;
+    }
+    .chroma .mb {
+      color: #a5d6ff;
+    }
+    .chroma .mf {
+      color: #a5d6ff;
+    }
+    .chroma .mh {
+      color: #a5d6ff;
+    }
+    .chroma .mi {
+      color: #a5d6ff;
+    }
+    .chroma .il {
+      color: #a5d6ff;
+    }
+    .chroma .mo {
+      color: #a5d6ff;
+    }
+    .chroma .o {
+      color: #ff7b72;
+      font-weight: bold;
+    }
+    .chroma .ow {
+      color: #ff7b72;
+      font-weight: bold;
+    }
+    .chroma .c {
+      color: #8b949e;
+      font-style: italic;
+    }
+    .chroma .ch {
+      color: #8b949e;
+      font-style: italic;
+    }
+    .chroma .cm {
+      color: #8b949e;
+      font-style: italic;
+    }
+    .chroma .c1 {
+      color: #8b949e;
+      font-style: italic;
+    }
+    .chroma .cs {
+      color: #8b949e;
+      font-weight: bold;
+      font-style: italic;
+    }
+    .chroma .cp {
+      color: #8b949e;
+      font-weight: bold;
+      font-style: italic;
+    }
+    .chroma .cpf {
+      color: #8b949e;
+      font-weight: bold;
+      font-style: italic;
+    }
+    .chroma .gd {
+      color: #ffa198;
+      background-color: #490202;
+    }
+    .chroma .ge {
+      font-style: italic;
+    }
+    .chroma .gr {
+      color: #ffa198;
+    }
+    .chroma .gh {
+      color: #79c0ff;
+      font-weight: bold;
+    }
+    .chroma .gi {
+      color: #56d364;
+      background-color: #0f5323;
+    }
+    .chroma .go {
+      color: #8b949e;
+    }
+    .chroma .gp {
+      color: #8b949e;
+    }
+    .chroma .gs {
+      font-weight: bold;
+    }
+    .chroma .gu {
+      color: #79c0ff;
+    }
+    .chroma .gt {
+      color: #ff7b72;
+    }
+    .chroma .gl {
+      text-decoration: underline;
+    }
+    .chroma .w {
+      color: #6e7681;
    }
  }
-  .chroma .kc {
-    --tw-font-weight: var(--font-weight-semibold);
-    font-weight: var(--font-weight-semibold);
-    color: rgba(var(--color-secondary-400), 1);
-    &:is(.dark *) {
-      color: rgba(var(--color-secondary-500), 1);
-    }
+}
+@layer utilities {
+  .tab__button.tab--active {
+    border-bottom: 2px solid rgb(var(--color-primary-500));
  }
-  .chroma .kt, .chroma .nv, .chroma .vi, .chroma .vm, .chroma .m, .chroma .mb, .chroma .mf, .chroma .mh, .chroma .mi, .chroma .il, .chroma .mo {
-    color: rgba(var(--color-secondary-400), 1);
-    &:is(.dark *) {
-      color: rgba(var(--color-secondary-600), 1);
-    }
+  .tab__panel {
+    display: none;
  }
-  .chroma .n, .chroma .nd, .chroma .ni, .chroma .nl {
-    color: rgba(var(--color-secondary-900), 1);
-    &:is(.dark *) {
-      color: rgba(var(--color-secondary-200), 1);
-    }
-  }
-  .chroma .na, .chroma .nb, .chroma .bp, .chroma .nx, .chroma .py, .chroma .nt {
-    color: rgba(var(--color-secondary-800), 1);
-    &:is(.dark *) {
-      color: rgba(var(--color-secondary-300), 1);
-    }
-  }
-  .chroma .no, .chroma .ne, .chroma .vg {
-    --tw-font-weight: var(--font-weight-semibold);
-    font-weight: var(--font-weight-semibold);
-    color: rgba(var(--color-secondary-400), 1);
-    &:is(.dark *) {
-      color: rgba(var(--color-secondary-500), 1);
-    }
-  }
-  .chroma .nf {
-    color: rgba(var(--color-secondary-600), 1);
-    &:is(.dark *) {
-      color: rgba(var(--color-secondary-500), 1);
-    }
-  }
-  .chroma .l, .chroma .ld, .chroma .s, .chroma .sa, .chroma .sb, .chroma .sc, .chroma .dl, .chroma .sd, .chroma .s2, .chroma .sh, .chroma .si, .chroma .sx, .chroma .s1, .chroma .gi, .chroma .go, .chroma .gp {
-    color: rgba(var(--color-primary-800), 1);
-    &:is(.dark *) {
-      color: rgba(var(--color-primary-400), 1);
-    }
-  }
-  .chroma .se {
-    --tw-font-weight: var(--font-weight-semibold);
-    font-weight: var(--font-weight-semibold);
-    color: rgba(var(--color-secondary-400), 1);
-    &:is(.dark *) {
-      color: rgba(var(--color-secondary-500), 1);
-    }
-  }
-  .chroma .sr, .chroma .ss {
-    --tw-font-weight: var(--font-weight-semibold);
-    font-weight: var(--font-weight-semibold);
-    color: rgba(var(--color-primary-800), 1);
-    &:is(.dark *) {
-      color: rgba(var(--color-primary-400), 1);
-    }
-  }
-  .chroma .ow {
-    --tw-font-weight: var(--font-weight-semibold);
-    font-weight: var(--font-weight-semibold);
-    color: rgba(var(--color-primary-400), 1);
-    &:is(.dark *) {
-      color: rgba(var(--color-primary-600), 1);
-    }
-  }
-  .chroma .c, .chroma .cm, .chroma .c1, .chroma .cs, .chroma .cp, .chroma .cpf {
-    color: rgba(var(--color-neutral-500), 1);
-    font-style: italic;
-    &:is(.dark *) {
-      color: rgba(var(--color-neutral-400), 1);
-    }
-  }
-  .chroma .ch {
-    --tw-font-weight: var(--font-weight-semibold);
-    font-weight: var(--font-weight-semibold);
-    color: rgba(var(--color-neutral-500), 1);
-    font-style: italic;
-    &:is(.dark *) {
-      color: rgba(var(--color-neutral-400), 1);
-    }
-  }
-  .chroma .ge {
-    font-style: italic;
-  }
-  .chroma .gh {
-    --tw-font-weight: var(--font-weight-semibold);
-    font-weight: var(--font-weight-semibold);
-    color: rgba(var(--color-neutral-500), 1);
-  }
-  .chroma .gs {
-    --tw-font-weight: var(--font-weight-semibold);
-    font-weight: var(--font-weight-semibold);
-  }
-  .chroma .gu, .chroma .gt {
-    color: rgba(var(--color-neutral-500), 1);
-  }
-  .chroma .gl {
-    text-decoration-line: underline;
+  .tab__panel.tab--active {
+    display: block;
  }
 }
 #zen-mode-button {
@@ -3522,6 +3981,9 @@ body.zen-mode-enable {
 .dark .ios-toggle::after {
  background: #f5f5f5;
 }
+html.dark {
+  color-scheme: dark;
+}
 body a, body button {
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
@@ -3610,7 +4072,7 @@ button, [role="button"] {
  font-weight: var(--font-weight-normal);
  color: rgba(var(--color-neutral-700), 1);
  &:is(.dark *) {
-    color: rgba(var(--color-neutral-400), 1);
+    color: rgba(var(--color-neutral-300), 1);
  }
 }
 .toc ul > li {
@@ -3618,14 +4080,11 @@ button, [role="button"] {
    margin-right: calc(var(--spacing) * 0);
  }
 }
-.highlight-wrapper {
-  display: block;
-}
 .highlight {
  position: relative;
  z-index: 0;
 }
-.highlight:hover > .copy-button {
+.highlight-wrapper:hover > .copy-button {
  visibility: visible;
 }
 .copy-button {
@@ -3723,6 +4182,16 @@ pre {
 .thumbnail-shadow {
  box-shadow: 5px 5px 20px 1px rgba(0, 0, 0, 0.3);
 }
+@media (width < 853px) {
+  .width-patch {
+    width: 90vw;
+  }
+}
+@media (width >= 853px) {
+  .width-patch {
+    width: 65ch;
+  }
+}
 .anchor {
  display: block;
  position: relative;
@@ -1,8 +1,24 @@
-
 /* -- Chroma Highlight -- */
-/* Background */
-.prose .chroma {
-  @apply static rounded-md text-neutral-700 bg-neutral-50 dark:bg-neutral-700 dark:text-neutral-200;
+/* margins for codeblock title */
+.highlight-wrapper {
+  @apply block relative z-0 overflow-hidden shadow rounded-md;
+  margin-top: 1.7142857em;
+  margin-bottom: 1.7142857em;
+}
+
+.highlight-wrapper pre,
+.highlight-wrapper table, .highlight-wrapper div {
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
+.highlight-wrapper:has(.codeblock-title) pre {
+  @apply rounded-none;
+}
+
+.codeblock-title {
+  @apply px-4 py-2 border-b border-neutral-200 dark:border-neutral-800;
+  @apply bg-white dark:bg-[#0d1117];
 }

 /* LineTableTD */
@@ -19,208 +35,173 @@

 /* LineHighlight */
 .chroma .hl {
-  @apply block w-auto px-4 -mx-4 bg-primary-100 dark:bg-primary-900;
+  @apply block w-auto px-4 -mx-4;
 }

 .chroma .lntd .hl {
  @apply p-0 m-0;
 }

-/* LineNumbersTable */
-/* LineNumbers */
-.chroma .lnt,
-.chroma .ln {
-  @apply text-neutral-600 dark:text-neutral-300 mr-[0.4em] px-[0.4em] py-0;
+/* linenos=inline */
+.chroma:not(:is(table *)) > code {
+  display: block;
+  min-width: max-content;
 }

-/* Keyword */
-/* KeywordDeclaration */
-/* KeywordNamespace */
-/* KeywordPseudo */
-/* KeywordReserved */
-/* NameClass */
-/* NameFunctionMagic */
-/* NameNamespace */
-/* NameVariableClass */
-/* Operator */
-.chroma .k,
-.chroma .kd,
-.chroma .kn,
-.chroma .kp,
-.chroma .kr,
-.chroma .nc,
-.chroma .fm,
-.chroma .nn,
-.chroma .vc,
-.chroma .o {
-  @apply text-primary-600 dark:text-primary-300;
-}
+html:not(.dark) {
+/* Generated using: hugo gen chromastyles --style=github */

-/* KeywordConstant */
-.chroma .kc {
-  @apply font-semibold text-secondary-400 dark:text-secondary-500;
+/* Background */ .bg { background-color:#fff; }
+/* PreWrapper */ .chroma { background-color:#fff; }
+/* Error */ .chroma .err { color:#f6f8fa;background-color:#82071e }
+/* LineLink */ .chroma .lnlinks { outline:none;text-decoration:none;color:inherit }
+/* LineTableTD */ .chroma .lntd { vertical-align:top;padding:0;margin:0;border:0; }
+/* LineTable */ .chroma .lntable { border-spacing:0; }
+/* LineHighlight */ .chroma .hl { background-color:#e5e5e5 }
+/* LineNumbersTable */ .chroma .lnt { white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f }
+/* LineNumbers */ .chroma .ln { white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f }
+/* Line */ .chroma .line { display:flex; }
+/* Keyword */ .chroma .k { color:#cf222e }
+/* KeywordConstant */ .chroma .kc { color:#cf222e }
+/* KeywordDeclaration */ .chroma .kd { color:#cf222e }
+/* KeywordNamespace */ .chroma .kn { color:#cf222e }
+/* KeywordPseudo */ .chroma .kp { color:#cf222e }
+/* KeywordReserved */ .chroma .kr { color:#cf222e }
+/* KeywordType */ .chroma .kt { color:#cf222e }
+/* NameAttribute */ .chroma .na { color:#1f2328 }
+/* NameClass */ .chroma .nc { color:#1f2328 }
+/* NameConstant */ .chroma .no { color:#0550ae }
+/* NameDecorator */ .chroma .nd { color:#0550ae }
+/* NameEntity */ .chroma .ni { color:#6639ba }
+/* NameLabel */ .chroma .nl { color:#900;font-weight:bold }
+/* NameNamespace */ .chroma .nn { color:#24292e }
+/* NameOther */ .chroma .nx { color:#1f2328 }
+/* NameTag */ .chroma .nt { color:#0550ae }
+/* NameBuiltin */ .chroma .nb { color:#6639ba }
+/* NameBuiltinPseudo */ .chroma .bp { color:#6a737d }
+/* NameVariable */ .chroma .nv { color:#953800 }
+/* NameVariableClass */ .chroma .vc { color:#953800 }
+/* NameVariableGlobal */ .chroma .vg { color:#953800 }
+/* NameVariableInstance */ .chroma .vi { color:#953800 }
+/* NameVariableMagic */ .chroma .vm { color:#953800 }
+/* NameFunction */ .chroma .nf { color:#6639ba }
+/* NameFunctionMagic */ .chroma .fm { color:#6639ba }
+/* LiteralString */ .chroma .s { color:#0a3069 }
+/* LiteralStringAffix */ .chroma .sa { color:#0a3069 }
+/* LiteralStringBacktick */ .chroma .sb { color:#0a3069 }
+/* LiteralStringChar */ .chroma .sc { color:#0a3069 }
+/* LiteralStringDelimiter */ .chroma .dl { color:#0a3069 }
+/* LiteralStringDoc */ .chroma .sd { color:#0a3069 }
+/* LiteralStringDouble */ .chroma .s2 { color:#0a3069 }
+/* LiteralStringEscape */ .chroma .se { color:#0a3069 }
+/* LiteralStringHeredoc */ .chroma .sh { color:#0a3069 }
+/* LiteralStringInterpol */ .chroma .si { color:#0a3069 }
+/* LiteralStringOther */ .chroma .sx { color:#0a3069 }
+/* LiteralStringRegex */ .chroma .sr { color:#0a3069 }
+/* LiteralStringSingle */ .chroma .s1 { color:#0a3069 }
+/* LiteralStringSymbol */ .chroma .ss { color:#032f62 }
+/* LiteralNumber */ .chroma .m { color:#0550ae }
+/* LiteralNumberBin */ .chroma .mb { color:#0550ae }
+/* LiteralNumberFloat */ .chroma .mf { color:#0550ae }
+/* LiteralNumberHex */ .chroma .mh { color:#0550ae }
+/* LiteralNumberInteger */ .chroma .mi { color:#0550ae }
+/* LiteralNumberIntegerLong */ .chroma .il { color:#0550ae }
+/* LiteralNumberOct */ .chroma .mo { color:#0550ae }
+/* Operator */ .chroma .o { color:#0550ae }
+/* OperatorWord */ .chroma .ow { color:#0550ae }
+/* Punctuation */ .chroma .p { color:#1f2328 }
+/* Comment */ .chroma .c { color:#57606a }
+/* CommentHashbang */ .chroma .ch { color:#57606a }
+/* CommentMultiline */ .chroma .cm { color:#57606a }
+/* CommentSingle */ .chroma .c1 { color:#57606a }
+/* CommentSpecial */ .chroma .cs { color:#57606a }
+/* CommentPreproc */ .chroma .cp { color:#57606a }
+/* CommentPreprocFile */ .chroma .cpf { color:#57606a }
+/* GenericDeleted */ .chroma .gd { color:#82071e;background-color:#ffebe9 }
+/* GenericEmph */ .chroma .ge { color:#1f2328 }
+/* GenericInserted */ .chroma .gi { color:#116329;background-color:#dafbe1 }
+/* GenericOutput */ .chroma .go { color:#1f2328 }
+/* GenericUnderline */ .chroma .gl { text-decoration:underline }
+/* TextWhitespace */ .chroma .w { color:#fff }
 }
+html.dark {
+/* Generated using: hugo gen chromastyles --style=github-dark */

-/* KeywordType */
-/* NameVariable */
-/* NameVariableInstance */
-/* NameVariableMagic */
-/* LiteralNumber */
-/* LiteralNumberBin */
-/* LiteralNumberFloat */
-/* LiteralNumberHex */
-/* LiteralNumberInteger */
-/* LiteralNumberIntegerLong */
-/* LiteralNumberOct */
-.chroma .kt,
-.chroma .nv,
-.chroma .vi,
-.chroma .vm,
-.chroma .m,
-.chroma .mb,
-.chroma .mf,
-.chroma .mh,
-.chroma .mi,
-.chroma .il,
-.chroma .mo {
-  @apply text-secondary-400 dark:text-secondary-600;
-}
-
-/* Name */
-/* NameDecorator */
-/* NameEntity */
-/* NameLabel */
-.chroma .n,
-.chroma .nd,
-.chroma .ni,
-.chroma .nl {
-  @apply text-secondary-900 dark:text-secondary-200;
-}
-
-/* NameAttribute */
-/* NameBuiltin */
-/* NameBuiltinPseudo */
-/* NameOther */
-/* NameProperty */
-/* NameTag */
-.chroma .na,
-.chroma .nb,
-.chroma .bp,
-.chroma .nx,
-.chroma .py,
-.chroma .nt {
-  @apply text-secondary-800 dark:text-secondary-300;
-}
-
-/* NameConstant */
-/* NameException */
-/* NameVariableGlobal */
-.chroma .no,
-.chroma .ne,
-.chroma .vg {
-  @apply font-semibold text-secondary-400 dark:text-secondary-500;
-}
-
-/* NameFunction */
-.chroma .nf {
-  @apply text-secondary-600 dark:text-secondary-500;
-}
-
-/* Literal */
-/* LiteralDate */
-/* LiteralString */
-/* LiteralStringAffix */
-/* LiteralStringBacktick */
-/* LiteralStringChar */
-/* LiteralStringDelimiter */
-/* LiteralStringDoc */
-/* LiteralStringDouble */
-/* LiteralStringHeredoc */
-/* LiteralStringInterpol */
-/* LiteralStringOther */
-/* LiteralStringSingle */
-/* GenericInserted */
-/* GenericOutput */
-/* GenericPrompt */
-.chroma .l,
-.chroma .ld,
-.chroma .s,
-.chroma .sa,
-.chroma .sb,
-.chroma .sc,
-.chroma .dl,
-.chroma .sd,
-.chroma .s2,
-.chroma .sh,
-.chroma .si,
-.chroma .sx,
-.chroma .s1,
-.chroma .gi,
-.chroma .go,
-.chroma .gp {
-  @apply text-primary-800 dark:text-primary-400;
-}
-
-/* LiteralStringEscape */
-.chroma .se {
-  @apply font-semibold text-secondary-400 dark:text-secondary-500;
-}
-
-/* LiteralStringRegex */
-/* LiteralStringSymbol */
-.chroma .sr,
-.chroma .ss {
-  @apply font-semibold text-primary-800 dark:text-primary-400;
-}
-
-/* OperatorWord */
-.chroma .ow {
-  @apply font-semibold text-primary-400 dark:text-primary-600;
-}
-
-/* Comment */
-/* CommentMultiline */
-/* CommentSingle */
-/* CommentSpecial */
-/* CommentPreproc */
-/* CommentPreprocFile */
-.chroma .c,
-.chroma .cm,
-.chroma .c1,
-.chroma .cs,
-.chroma .cp,
-.chroma .cpf {
-  @apply italic text-neutral-500 dark:text-neutral-400;
-}
-
-/* CommentHashbang */
-.chroma .ch {
-  @apply italic font-semibold text-neutral-500 dark:text-neutral-400;
-}
-
-/* GenericEmph */
-.chroma .ge {
-  @apply italic;
-}
-
-/* GenericHeading */
-.chroma .gh {
-  @apply font-semibold text-neutral-500;
-}
-
-/* GenericStrong */
-.chroma .gs {
-  @apply font-semibold;
-}
-
-/* GenericSubheading */
-/* GenericTraceback */
-.chroma .gu,
-.chroma .gt {
-  @apply text-neutral-500;
-}
-
-/* GenericUnderline */
-.chroma .gl {
-  @apply underline;
+/* Background */ .bg { color:#e6edf3;background-color:#0d1117; }
+/* PreWrapper */ .chroma { color:#e6edf3;background-color:#0d1117; }
+/* Error */ .chroma .err { color:#f85149 }
+/* LineLink */ .chroma .lnlinks { outline:none;text-decoration:none;color:inherit }
+/* LineTableTD */ .chroma .lntd { vertical-align:top;padding:0;margin:0;border:0; }
+/* LineTable */ .chroma .lntable { border-spacing:0; }
+/* LineHighlight */ .chroma .hl { background-color:#333 }
+/* LineNumbersTable */ .chroma .lnt { white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#737679 }
+/* LineNumbers */ .chroma .ln { white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#6e7681 }
+/* Line */ .chroma .line { display:flex; }
+/* Keyword */ .chroma .k { color:#ff7b72 }
+/* KeywordConstant */ .chroma .kc { color:#79c0ff }
+/* KeywordDeclaration */ .chroma .kd { color:#ff7b72 }
+/* KeywordNamespace */ .chroma .kn { color:#ff7b72 }
+/* KeywordPseudo */ .chroma .kp { color:#79c0ff }
+/* KeywordReserved */ .chroma .kr { color:#ff7b72 }
+/* KeywordType */ .chroma .kt { color:#ff7b72 }
+/* NameClass */ .chroma .nc { color:#f0883e;font-weight:bold }
+/* NameConstant */ .chroma .no { color:#79c0ff;font-weight:bold }
+/* NameDecorator */ .chroma .nd { color:#d2a8ff;font-weight:bold }
+/* NameEntity */ .chroma .ni { color:#ffa657 }
+/* NameException */ .chroma .ne { color:#f0883e;font-weight:bold }
+/* NameLabel */ .chroma .nl { color:#79c0ff;font-weight:bold }
+/* NameNamespace */ .chroma .nn { color:#ff7b72 }
+/* NameProperty */ .chroma .py { color:#79c0ff }
+/* NameTag */ .chroma .nt { color:#7ee787 }
+/* NameVariable */ .chroma .nv { color:#79c0ff }
+/* NameVariableClass */ .chroma .vc { color:#79c0ff }
+/* NameVariableGlobal */ .chroma .vg { color:#79c0ff }
+/* NameVariableInstance */ .chroma .vi { color:#79c0ff }
+/* NameVariableMagic */ .chroma .vm { color:#79c0ff }
+/* NameFunction */ .chroma .nf { color:#d2a8ff;font-weight:bold }
+/* NameFunctionMagic */ .chroma .fm { color:#d2a8ff;font-weight:bold }
+/* Literal */ .chroma .l { color:#a5d6ff }
+/* LiteralDate */ .chroma .ld { color:#79c0ff }
+/* LiteralString */ .chroma .s { color:#a5d6ff }
+/* LiteralStringAffix */ .chroma .sa { color:#79c0ff }
+/* LiteralStringBacktick */ .chroma .sb { color:#a5d6ff }
+/* LiteralStringChar */ .chroma .sc { color:#a5d6ff }
+/* LiteralStringDelimiter */ .chroma .dl { color:#79c0ff }
+/* LiteralStringDoc */ .chroma .sd { color:#a5d6ff }
+/* LiteralStringDouble */ .chroma .s2 { color:#a5d6ff }
+/* LiteralStringEscape */ .chroma .se { color:#79c0ff }
+/* LiteralStringHeredoc */ .chroma .sh { color:#79c0ff }
+/* LiteralStringInterpol */ .chroma .si { color:#a5d6ff }
+/* LiteralStringOther */ .chroma .sx { color:#a5d6ff }
+/* LiteralStringRegex */ .chroma .sr { color:#79c0ff }
+/* LiteralStringSingle */ .chroma .s1 { color:#a5d6ff }
+/* LiteralStringSymbol */ .chroma .ss { color:#a5d6ff }
+/* LiteralNumber */ .chroma .m { color:#a5d6ff }
+/* LiteralNumberBin */ .chroma .mb { color:#a5d6ff }
+/* LiteralNumberFloat */ .chroma .mf { color:#a5d6ff }
+/* LiteralNumberHex */ .chroma .mh { color:#a5d6ff }
+/* LiteralNumberInteger */ .chroma .mi { color:#a5d6ff }
+/* LiteralNumberIntegerLong */ .chroma .il { color:#a5d6ff }
+/* LiteralNumberOct */ .chroma .mo { color:#a5d6ff }
+/* Operator */ .chroma .o { color:#ff7b72;font-weight:bold }
+/* OperatorWord */ .chroma .ow { color:#ff7b72;font-weight:bold }
+/* Comment */ .chroma .c { color:#8b949e;font-style:italic }
+/* CommentHashbang */ .chroma .ch { color:#8b949e;font-style:italic }
+/* CommentMultiline */ .chroma .cm { color:#8b949e;font-style:italic }
+/* CommentSingle */ .chroma .c1 { color:#8b949e;font-style:italic }
+/* CommentSpecial */ .chroma .cs { color:#8b949e;font-weight:bold;font-style:italic }
+/* CommentPreproc */ .chroma .cp { color:#8b949e;font-weight:bold;font-style:italic }
+/* CommentPreprocFile */ .chroma .cpf { color:#8b949e;font-weight:bold;font-style:italic }
+/* GenericDeleted */ .chroma .gd { color:#ffa198;background-color:#490202 }
+/* GenericEmph */ .chroma .ge { font-style:italic }
+/* GenericError */ .chroma .gr { color:#ffa198 }
+/* GenericHeading */ .chroma .gh { color:#79c0ff;font-weight:bold }
+/* GenericInserted */ .chroma .gi { color:#56d364;background-color:#0f5323 }
+/* GenericOutput */ .chroma .go { color:#8b949e }
+/* GenericPrompt */ .chroma .gp { color:#8b949e }
+/* GenericStrong */ .chroma .gs { font-weight:bold }
+/* GenericSubheading */ .chroma .gu { color:#79c0ff }
+/* GenericTraceback */ .chroma .gt { color:#ff7b72 }
+/* GenericUnderline */ .chroma .gl { text-decoration:underline }
+/* TextWhitespace */ .chroma .w { color:#6e7681 }
 }
@@ -0,0 +1,9 @@
+.tab__button.tab--active {
+  border-bottom: 2px solid rgb(var(--color-primary-500));
+}
+.tab__panel {
+  display: none;
+}
+.tab__panel.tab--active {
+  display: block;
+}
@@ -4,9 +4,14 @@

@import "tailwindcss";
@import "./components/chroma.css" layer(utilities);
+@import "./components/tabs.css" layer(utilities);
@import "./components/zen-mode.css";
@import "./components/a11y.css";

+html.dark {
+  color-scheme: dark;
+}
+
 body a,
 body button {
  @apply transition-colors;
@@ -82,7 +87,7 @@ button,
 }

 .toc a {
-  @apply font-normal text-neutral-700 dark:text-neutral-400;
+  @apply font-normal text-neutral-700 dark:text-neutral-300;
 }

 .toc ul > li {
@@ -90,15 +95,11 @@ button,
 }

 /* Code Copy */
-.highlight-wrapper {
-  @apply block;
-}
-
 .highlight {
  @apply relative z-0;
 }

-.highlight:hover > .copy-button {
+.highlight-wrapper:hover > .copy-button {
  @apply visible;
 }

@@ -198,6 +199,18 @@ pre {
  box-shadow: 5px 5px 20px 1px rgba(0, 0, 0, 0.3);
 }

+/* placeholder for gallery/carousel */
+@variant max-md {
+  .width-patch {
+    width: 90vw;
+  }
+}
+@variant min-md {
+  .width-patch {
+    width: 65ch;
+  }
+}
+
 .anchor {
  display: block;
  position: relative;
@@ -2,31 +2,26 @@ var scriptBundle = document.getElementById("script-bundle");
 var copyText = scriptBundle?.getAttribute("data-copy") || "Copy";
 var copiedText = scriptBundle?.getAttribute("data-copied") || "Copied";

-function createCopyButton(highlightDiv) {
+function createCopyButton(highlightWrapper) {
  const button = document.createElement("button");
  button.className = "copy-button";
  button.type = "button";
  button.ariaLabel = copyText;
  button.innerText = copyText;
-  button.addEventListener("click", () => copyCodeToClipboard(button, highlightDiv));
-
-  highlightDiv.insertBefore(button, highlightDiv.firstChild);
-  const wrapper = document.createElement("div");
-  wrapper.className = "highlight-wrapper";
-  highlightDiv.parentNode.insertBefore(wrapper, highlightDiv);
-  wrapper.appendChild(highlightDiv);
+  button.addEventListener("click", () => copyCodeToClipboard(button, highlightWrapper));
+  highlightWrapper.insertBefore(button, highlightWrapper.firstChild);
 }

-async function copyCodeToClipboard(button, highlightDiv) {
-  const codeToCopy = getCodeText(highlightDiv);
+async function copyCodeToClipboard(button, highlightWrapper) {
+  const codeToCopy = getCodeText(highlightWrapper);

-  function fallback(codeToCopy, highlightDiv) {
+  function fallback(codeToCopy, highlightWrapper) {
    const textArea = document.createElement("textArea");
    textArea.contentEditable = "true";
    textArea.readOnly = "false";
    textArea.className = "copy-textarea";
    textArea.value = codeToCopy;
-    highlightDiv.insertBefore(textArea, highlightDiv.firstChild);
+    highlightWrapper.insertBefore(textArea, highlightWrapper.firstChild);
    const range = document.createRange();
    range.selectNodeContents(textArea);
    const sel = window.getSelection();
@@ -34,7 +29,7 @@ async function copyCodeToClipboard(button, highlightDiv) {
    sel.addRange(range);
    textArea.setSelectionRange(0, 999999);
    document.execCommand("copy");
-    highlightDiv.removeChild(textArea);
+    highlightWrapper.removeChild(textArea);
  }

  try {
@@ -42,10 +37,10 @@ async function copyCodeToClipboard(button, highlightDiv) {
    if (result.state == "granted" || result.state == "prompt") {
      await navigator.clipboard.writeText(codeToCopy);
    } else {
-      fallback(codeToCopy, highlightDiv);
+      fallback(codeToCopy, highlightWrapper);
    }
  } catch (_) {
-    fallback(codeToCopy, highlightDiv);
+    fallback(codeToCopy, highlightWrapper);
  } finally {
    button.blur();
    button.innerText = copiedText;
@@ -55,7 +50,10 @@ async function copyCodeToClipboard(button, highlightDiv) {
  }
 }

-function getCodeText(highlightDiv) {
+function getCodeText(highlightWrapper) {
+  const highlightDiv = highlightWrapper.querySelector(".highlight");
+  if (!highlightDiv) return "";
+
  const codeBlock = highlightDiv.querySelector("code");
  const inlineLines = codeBlock?.querySelectorAll(".cl"); // linenos=inline
  const tableCodeCell = highlightDiv?.querySelector(".lntable .lntd:last-child code"); // linenos=table
@@ -75,5 +73,5 @@ function getCodeText(highlightDiv) {
 }

 window.addEventListener("DOMContentLoaded", (event) => {
-  document.querySelectorAll(".highlight").forEach((highlightDiv) => createCopyButton(highlightDiv));
+  document.querySelectorAll(".highlight-wrapper").forEach((highlightWrapper) => createCopyButton(highlightWrapper));
 });
@@ -0,0 +1,41 @@
+function initTabs() {
+  tabClickHandler = (event) => {
+    const button = event.target.closest(".tab__button");
+    if (!button) return;
+
+    const container = button.closest(".tab__container");
+    const tabIndex = parseInt(button.dataset.tabIndex);
+    activateTab(container, tabIndex);
+  };
+
+  document.addEventListener("click", tabClickHandler);
+}
+
+function activateTab(container, activeIndex) {
+  const buttons = container.querySelectorAll(".tab__button");
+  const panels = container.querySelectorAll(".tab__panel");
+
+  buttons.forEach((btn, index) => {
+    if (index === activeIndex) {
+      btn.classList.add("tab--active");
+      btn.setAttribute("aria-selected", "true");
+    } else {
+      btn.classList.remove("tab--active");
+      btn.setAttribute("aria-selected", "false");
+    }
+  });
+
+  panels.forEach((panel, index) => {
+    if (index === activeIndex) {
+      panel.classList.add("tab--active");
+    } else {
+      panel.classList.remove("tab--active");
+    }
+  });
+}
+
+if (document.readyState === "loading") {
+  document.addEventListener("DOMContentLoaded", initTabs);
+} else {
+  initTabs();
+}
@@ -2,4 +2,4 @@
 [module.hugoVersion]
 extended = true
 min = "0.141.0"
-max = "0.152.2"
+max = "0.153.1"
@@ -126,7 +126,7 @@ Simply by changing this one value, all the font sizes on your website will be ad

 ### Changing Syntax Highlighting Theme

-Blowfish uses a custom syntax highlighting style, with colors defined in `assets/css/schemes`. To change the syntax highlighting theme, create `assets/css/custom.css` and add the following:
+To change the syntax highlighting theme, create `assets/css/custom.css` and add the following:

 ```css
 .chroma,
@@ -127,7 +127,7 @@ html {

 ### シンタックスハイライトテーマの変更

-Blowfish はカスタム構文ハイライトスタイルを使用しており、色は `assets/css/schemes` に定義されています。構文ハイライトテーマを変更するには、`assets/css/custom.css` を作成し、次の内容を追加してください：
+構文ハイライトテーマを変更するには、`assets/css/custom.css` を作成し、次の内容を追加してください：

 ```css
 .chroma,
@@ -126,7 +126,7 @@ Simply by changing this one value, all the font sizes on your website will be ad

 ### Changing Syntax Highlighting Theme

-Blowfish uses a custom syntax highlighting style, with colors defined in `assets/css/schemes`. To change the syntax highlighting theme, create `assets/css/custom.css` and add the following:
+To change the syntax highlighting theme, create `assets/css/custom.css` and add the following:

 ```css
 .chroma,
@@ -125,7 +125,7 @@ html {

 ### 更换语法高亮主题

-Blowfish 使用自定义的语法高亮样式，颜色定义在 `assets/css/schemes` 中。要更换语法高亮主题，请创建 `assets/css/custom.css`，然后添加以下内容：
+要更换语法高亮主题，请创建 `assets/css/custom.css`，然后添加以下内容：

 ```css
 .chroma,
@@ -714,6 +714,74 @@ You can see some additional Mermaid examples on the [diagrams and flowcharts sam

 <br/><br/><br/>

+## Tabs
+
+The `tabs` shortcode is commonly used to present different variants of a particular step. For example, it can be used to show how to install VS Code on different platforms.
+
+**Example**
+
+`````md
+{{</* tabs */>}}
+
+    {{</* tab label="Windows" */>}}
+    Install using Chocolatey:
+
+    ```pwsh
+    choco install vscode.install
+    ```
+
+    or install using WinGet
+
+    ```pwsh
+    winget install -e --id Microsoft.VisualStudioCode
+    ```
+    {{</* /tab */>}}
+
+    {{</* tab label="macOS" */>}}
+    ```bash
+    brew install --cask visual-studio-code
+    ```
+    {{</* /tab */>}}
+
+    {{</* tab label="Linux" */>}}
+    See [documentation](https://code.visualstudio.com/docs/setup/linux#_install-vs-code-on-linux).
+    {{</* /tab */>}}
+
+{{</* /tabs */>}}
+`````
+
+**Output**
+
+{{< tabs >}}
+
+    {{< tab label="Windows" >}}
+    Install using Chocolatey:
+
+    ```pwsh
+    choco install vscode.install
+    ```
+
+    or install using WinGet
+
+    ```pwsh
+    winget install -e --id Microsoft.VisualStudioCode
+    ```
+    {{< /tab >}}
+
+    {{< tab label="macOS" >}}
+    ```bash
+    brew install --cask visual-studio-code
+    ```
+    {{< /tab >}}
+
+    {{< tab label="Linux" >}}
+    See [documentation](https://code.visualstudio.com/docs/setup/linux#_install-vs-code-on-linux).
+    {{< /tab >}}
+
+{{< /tabs >}}
+
+<br/><br/><br/>
+
 ## Timeline

 The `timeline` creates a visual timeline that can be used in different use-cases, e.g. professional experience, a project's achievements, etc. The `timeline` shortcode relies on the `timelineItem` sub-shortcode to define each item within the main timeline. Each item can have the following properties.
@@ -711,6 +711,74 @@ B-->C[利益]

 <br/><br/><br/>

+## Tabs
+
+`tabs` ショートコードは、特定の手順における異なるバリアントを提示する際によく使用される。例えば、VS Code を各種プラットフォームにインストールする方法を示す場合などに利用できる。
+
+**例**
+
+````md
+{{</* tabs */>}}
+
+    {{</* tab label="Windows" */>}}
+    Chocolatey を使用してインストール:
+
+    ```pwsh
+    choco install vscode.install
+    ```
+
+    または WinGet を使用してインストール
+
+    ```pwsh
+    winget install -e --id Microsoft.VisualStudioCode
+    ```
+    {{</* /tab */>}}
+
+    {{</* tab label="macOS" */>}}
+    ```bash
+    brew install --cask visual-studio-code
+    ```
+    {{</* /tab */>}}
+
+    {{</* tab label="Linux" */>}}
+    [ドキュメント](https://code.visualstudio.com/docs/setup/linux#_install-vs-code-on-linux)を参照。
+    {{</* /tab */>}}
+
+{{</* /tabs */>}}
+````
+
+**出力**
+
+{{< tabs >}}
+
+    {{< tab label="Windows" >}}
+    Chocolatey を使用してインストール:
+
+    ```pwsh
+    choco install vscode.install
+    ```
+
+    または WinGet を使用してインストール
+
+    ```pwsh
+    winget install -e --id Microsoft.VisualStudioCode
+    ```
+    {{< /tab >}}
+
+    {{< tab label="macOS" >}}
+    ```bash
+    brew install --cask visual-studio-codeqweqwe
+    ```
+    {{< /tab >}}
+
+    {{< tab label="Linux" >}}
+    [ドキュメント](https://code.visualstudio.com/docs/setup/linux#_install-vs-code-on-linux)を参照。
+    {{< /tab >}}
+
+{{< /tabs >}}
+
+<br/><br/><br/>
+
 ## タイムライン

 `timeline` は、さまざまなユースケース (例: 職務経歴、プロジェクトの成果など) で使用できる視覚的なタイムラインを作成します。`timeline` ショートコードは、メインタイムライン内の各アイテムを定義するために `timelineItem` サブショートコードに依存しています。各アイテムには、次のプロパティを設定できます。
@@ -720,6 +720,74 @@ You can see some additional Mermaid examples on the [diagrams and flowcharts sam

 <br/><br/><br/>

+## Tabs
+
+The `tabs` shortcode is commonly used to present different variants of a particular step. For example, it can be used to show how to install VS Code on different platforms.
+
+**Example**
+
+`````md
+{{</* tabs */>}}
+
+    {{</* tab label="Windows" */>}}
+    Install using Chocolatey:
+
+    ```pwsh
+    choco install vscode.install
+    ```
+
+    or install using WinGet
+
+    ```pwsh
+    winget install -e --id Microsoft.VisualStudioCode
+    ```
+    {{</* /tab */>}}
+
+    {{</* tab label="macOS" */>}}
+    ```bash
+    brew install --cask visual-studio-code
+    ```
+    {{</* /tab */>}}
+
+    {{</* tab label="Linux" */>}}
+    See [documentation](https://code.visualstudio.com/docs/setup/linux#_install-vs-code-on-linux).
+    {{</* /tab */>}}
+
+{{</* /tabs */>}}
+`````
+
+**Output**
+
+{{< tabs >}}
+
+    {{< tab label="Windows" >}}
+    Install using Chocolatey:
+
+    ```pwsh
+    choco install vscode.install
+    ```
+
+    or install using WinGet
+
+    ```pwsh
+    winget install -e --id Microsoft.VisualStudioCode
+    ```
+    {{< /tab >}}
+
+    {{< tab label="macOS" >}}
+    ```bash
+    brew install --cask visual-studio-code
+    ```
+    {{< /tab >}}
+
+    {{< tab label="Linux" >}}
+    See [documentation](https://code.visualstudio.com/docs/setup/linux#_install-vs-code-on-linux).
+    {{< /tab >}}
+
+{{< /tabs >}}
+
+<br/><br/><br/>
+
 ## Timeline

 The `timeline` creates a visual timeline that can be used in different use-cases, e.g. professional experience, a project's achievements, etc. The `timeline` shortcode relies on the `timelineItem` sub-shortcode to define each item within the main timeline. Each item can have the following properties.
@@ -724,6 +724,74 @@ B-->C[Profit]

 <br/><br/><br/>

+## Tabs
+
+`tabs` 简码常用于呈现某个步骤的不同变体。例如，可用于展示在不同平台上安装 VS Code 的方式。
+
+**示例**
+
+````md
+{{</* tabs */>}}
+
+    {{</* tab label="Windows" */>}}
+    使用 Chocolatey 安装:
+
+    ```pwsh
+    choco install vscode.install
+    ```
+
+    或使用 WinGet 安装
+
+    ```pwsh
+    winget install -e --id Microsoft.VisualStudioCode
+    ```
+    {{</* /tab */>}}
+
+    {{</* tab label="macOS" */>}}
+    ```bash
+    brew install --cask visual-studio-code
+    ```
+    {{</* /tab */>}}
+
+    {{</* tab label="Linux" */>}}
+    参见[文档](https://code.visualstudio.com/docs/setup/linux#_install-vs-code-on-linux)。
+    {{</* /tab */>}}
+
+{{</* /tabs */>}}
+````
+
+**输出**
+
+{{< tabs >}}
+
+    {{< tab label="Windows" >}}
+    使用 Chocolatey 安装:
+
+    ```pwsh
+    choco install vscode.install
+    ```
+
+    或使用 WinGet 安装
+
+    ```pwsh
+    winget install -e --id Microsoft.VisualStudioCode
+    ```
+    {{< /tab >}}
+
+    {{< tab label="macOS" >}}
+    ```bash
+    brew install --cask visual-studio-code
+    ```
+    {{< /tab >}}
+
+    {{< tab label="Linux" >}}
+    参见[文档](https://code.visualstudio.com/docs/setup/linux#_install-vs-code-on-linux)。
+    {{< /tab >}}
+
+{{< /tabs >}}
+
+<br/><br/><br/>
+
 ## 时间线

 `timeline` 创建了一个可视化时间线，用于展示专业经验、项目成就等。 `timeline` 简码依赖于 `timelineItem` 子简码来定义主时间线中的每个项目。每个项目可以具有以下属性。
@@ -65,7 +65,7 @@ Tables aren't part of the core Markdown spec, but Hugo supports supports them ou

 ## Code Blocks

-### Code block with backticks
+### General code block

 ```html
 <!DOCTYPE html>
@@ -80,23 +80,9 @@ Tables aren't part of the core Markdown spec, but Hugo supports supports them ou
 </html>
 ```

-### Code block indented with four spaces
-
-    <!DOCTYPE html>
-    <html lang="en">
-    <head>
-      <meta charset="utf-8">
-      <title>Example HTML5 Document</title>
-    </head>
-    <body>
-      <p>Test</p>
-    </body>
-    </html>
-
-### Code block with Hugo's internal highlight shortcode
-
-{{< highlight html "linenos=table,hl_lines=4 7-9" >}}
+### Code block with title and line highlight

+```html {title="example.html" lineNos=inline hl_lines=[4,"7-9"]}
 <!DOCTYPE html>
 <html lang="en">
 <head>
@@ -107,7 +93,7 @@ Tables aren't part of the core Markdown spec, but Hugo supports supports them ou
  <p>Test</p>
 </body>
 </html>
-{{< /highlight >}}
+```

 ## List Types

@@ -80,34 +80,20 @@ Itatur? Quiatae cullecum rem ent aut odis in re eossequodi nonsequ idebis ne sap
 </html>
 ```

-### 4スペースのインデントによるコードブロック
-
-    <!DOCTYPE html>
-    <html lang="ja">
-    <head>
-      <meta charset="utf-8">
-      <title>HTML5 資料の例</title>
-    </head>
-    <body>
-      <p>テスト</p>
-    </body>
-    </html>
-
-### Hugo 内のショートコード・ハイライトを利用したコードブロック
-
-{{< highlight html "linenos=table,hl_lines=4 7-9" >}}
+### タイトルと行ハイライト機能付きのコードブロック

+```html {title="example.html" lineNos=inline hl_lines=[4,"7-9"]}
 <!DOCTYPE html>
-<html lang="ja">
+<html lang="en">
 <head>
  <meta charset="utf-8">
-  <title>HTML5 資料の例</title>
+  <title>Example HTML5 Document</title>
 </head>
 <body>
-  <p>テスト</p>
+  <p>Test</p>
 </body>
 </html>
-{{< /highlight >}}
+```

 ## リスト形式

@@ -65,7 +65,7 @@ Tables aren't part of the core Markdown spec, but Hugo supports supports them ou

 ## Code Blocks

-### Code block with backticks
+### General code block

 ```html
 <!DOCTYPE html>
@@ -80,23 +80,9 @@ Tables aren't part of the core Markdown spec, but Hugo supports supports them ou
 </html>
 ```

-### Code block indented with four spaces
-
-    <!DOCTYPE html>
-    <html lang="en">
-    <head>
-      <meta charset="utf-8">
-      <title>Example HTML5 Document</title>
-    </head>
-    <body>
-      <p>Test</p>
-    </body>
-    </html>
-
-### Code block with Hugo's internal highlight shortcode
-
-{{< highlight html "linenos=table,hl_lines=4 7-9" >}}
+### Code block with title and line highlight

+```html {title="example.html" lineNos=inline hl_lines=[4,"7-9"]}
 <!DOCTYPE html>
 <html lang="en">
 <head>
@@ -107,7 +93,7 @@ Tables aren't part of the core Markdown spec, but Hugo supports supports them ou
  <p>Test</p>
 </body>
 </html>
-{{< /highlight >}}
+```

 ## List Types

@@ -65,7 +65,7 @@ Itatur? Quiatae cullecum rem ent aut odis in re eossequodi nonsequ idebis ne sap

 ## 代码块

-### 带反引号的代码块
+### 一般的代码块

 ```html
 <!DOCTYPE html>
@@ -80,23 +80,9 @@ Itatur? Quiatae cullecum rem ent aut odis in re eossequodi nonsequ idebis ne sap
 </html>
 ```

-### 缩进四个空格的代码块
-
-    <!DOCTYPE html>
-    <html lang="en">
-    <head>
-      <meta charset="utf-8">
-      <title>Example HTML5 Document</title>
-    </head>
-    <body>
-      <p>Test</p>
-    </body>
-    </html>
-
-### 带有 Hugo 内部高亮简码的代码块
-
-{{< highlight html "linenos=table,hl_lines=4 7-9" >}}
+### 带有标题和行高亮的代码块

+```html {title="example.html" lineNos=inline hl_lines=[4,"7-9"]}
 <!DOCTYPE html>
 <html lang="en">
 <head>
@@ -107,7 +93,7 @@ Itatur? Quiatae cullecum rem ent aut odis in re eossequodi nonsequ idebis ne sap
  <p>Test</p>
 </body>
 </html>
-{{< /highlight >}}
+```

 ## 列表

--- a/Show More
+++ b/Show More