From 82b6fd55fd5aec53455f8bc631b9d7be21d81ff2 Mon Sep 17 00:00:00 2001
From: eti <eti@eti.tf>
Date: Thu, 7 May 2026 13:33:02 +0200
Subject: [PATCH] appview: add reusable btn-group component aligned with design
 system ver

Active items use @apply btn so border, shadow, and color tokens
stay in sync with the base component automatically.

Signed-off-by: eti <eti@eti.tf>
---
 .../templates/fragments/tabSelector.html      |    8 +-
 .../pages/templates/repo/fragments/diff.html  |    2 +-
 .../templates/repo/fragments/diffOpts.html    |   10 +-
 .../repo/pulls/fragments/pullStepDetails.html |   13 +-
 .../repo/pulls/fragments/pullStepReview.html  |    4 +-
 .../templates/user/settings/profile.html      |    4 +-
 input.css                                     | 2009 +++++++++--------
 7 files changed, 1109 insertions(+), 941 deletions(-)

diff --git a/appview/pages/templates/fragments/tabSelector.html b/appview/pages/templates/fragments/tabSelector.html
index 889526ba..666ef02f 100644
--- a/appview/pages/templates/fragments/tabSelector.html
+++ b/appview/pages/templates/fragments/tabSelector.html
@@ -4,9 +4,7 @@
   {{ $active := .Active }}
   {{ $include := .Include }}
   {{ $form := .Form }}
-  <div class="flex justify-between divide-x divide-gray-200 dark:divide-gray-700 rounded border border-gray-200 dark:border-gray-700 overflow-hidden">
-    {{ $activeTab := "bg-white dark:bg-gray-700 shadow-sm" }}
-    {{ $inactiveTab := "bg-gray-100 dark:bg-gray-800 shadow-inner" }}
+  <div class="btn-group">
     {{ range $index, $value := $all }}
       {{ $isActive := eq $value.Key $active }}
       {{ if $form }}
@@ -18,7 +16,7 @@
          hx-push-url="true"
          hx-target="body"
          hx-on:htmx:config-request="if(!event.detail.parameters.q) delete event.detail.parameters.q"
-         class="p-2 whitespace-nowrap flex justify-center items-center gap-2 text-sm w-full hover:no-underline text-center {{ if $isActive }} {{$activeTab }} {{ else }} {{ $inactiveTab }} {{ end }}">
+         class="btn-group-item {{ if $isActive }}active{{ end }}">
        {{ if $value.Icon }}
          {{ i $value.Icon "size-4" }}
        {{ end }}
@@ -38,7 +36,7 @@
          hx-target="body"
          hx-on:htmx:config-request="if(!event.detail.parameters.q) delete event.detail.parameters.q"
          {{ end }}
-         class="p-2 whitespace-nowrap flex justify-center items-center gap-2 text-sm w-full block hover:no-underline text-center {{ if $isActive }} {{$activeTab }} {{ else }} {{ $inactiveTab }} {{ end }}">
+         class="btn-group-item {{ if $isActive }}active{{ end }}">
        {{ if $value.Icon }}
          {{ i $value.Icon "size-4" }}
        {{ end }}
diff --git a/appview/pages/templates/repo/fragments/diff.html b/appview/pages/templates/repo/fragments/diff.html
index 6ea77ac0..1ee4dcdc 100644
--- a/appview/pages/templates/repo/fragments/diff.html
+++ b/appview/pages/templates/repo/fragments/diff.html
@@ -231,7 +231,7 @@
   <label
     title="Expand/Collapse diffs"
     for="collapseToggle"
-    class="btn font-normal normal-case p-2"
+    class="btn font-normal normal-case"
   >
     <input type="checkbox" id="collapseToggle" class="peer/collapse hidden" checked/>
     <span class="peer-checked/collapse:hidden inline-flex items-center gap-2">
diff --git a/appview/pages/templates/repo/fragments/diffOpts.html b/appview/pages/templates/repo/fragments/diffOpts.html
index ee14a900..650932d6 100644
--- a/appview/pages/templates/repo/fragments/diffOpts.html
+++ b/appview/pages/templates/repo/fragments/diffOpts.html
@@ -4,16 +4,14 @@
     {{ $active = "split" }}
   {{ end }}
 
-  {{ $activeTab := "bg-white dark:bg-gray-800 shadow-sm cursor-default" }}
-  {{ $inactiveTab := "hover:text-gray-900 dark:hover:text-white" }}
   {{ $usePost := ne .RefreshUrl "" }}
   {{ $target := .Target }}
   {{ if eq $target "" }}{{ $target = "#diff-files" }}{{ end }}
   {{ $field := .Field }}
   {{ if eq $field "" }}{{ $field = "diff" }}{{ end }}
 
-  <div class="inline-flex items-center gap-1 p-1 bg-slate-100 dark:bg-gray-900 rounded-md text-gray-600 dark:text-gray-300 border dark:border-gray-700"
-       hx-on::before-request="const t=event.target.closest('button'); if(!t||t.classList.contains('shadow-sm'))return event.preventDefault(); this.querySelectorAll('button').forEach(b => { const active=b===t; b.classList.toggle('bg-white',active); b.classList.toggle('dark:bg-gray-800',active); b.classList.toggle('shadow-sm',active); b.classList.toggle('cursor-default',active); b.classList.toggle('hover:text-gray-900',!active); b.classList.toggle('dark:hover:text-white',!active); })">
+  <div class="btn-group"
+       hx-on::before-request="const t=event.target.closest('button');if(!t||t.classList.contains('active'))return event.preventDefault();this.querySelectorAll('button').forEach(b=>b.classList.toggle('active',b===t))">
     <button
        {{ if $usePost }}
        hx-post="{{ .RefreshUrl }}"
@@ -27,7 +25,7 @@
        hx-select="{{ $target }}"
        hx-swap="outerHTML"
        hx-indicator="this"
-       class="group flex items-center justify-center gap-2 px-3 py-1 text-sm whitespace-nowrap rounded hover:no-underline {{ if eq $active "unified" }} {{ $activeTab }} {{ else }} {{ $inactiveTab }} {{ end }}">
+       class="group btn-group-item {{ if eq $active "unified" }}active{{ end }}">
       {{ i "square-split-vertical" "size-4 inline group-[.htmx-request]:hidden" }}
       {{ i "loader-circle" "size-4 animate-spin hidden group-[.htmx-request]:inline" }}
       unified
@@ -45,7 +43,7 @@
        hx-select="{{ $target }}"
        hx-swap="outerHTML"
        hx-indicator="this"
-       class="group flex items-center justify-center gap-2 px-3 py-1 text-sm whitespace-nowrap rounded hover:no-underline {{ if eq $active "split" }} {{ $activeTab }} {{ else }} {{ $inactiveTab }} {{ end }}">
+       class="group btn-group-item {{ if eq $active "split" }}active{{ end }}">
       {{ i "square-split-horizontal" "size-4 inline group-[.htmx-request]:hidden" }}
       {{ i "loader-circle" "size-4 animate-spin hidden group-[.htmx-request]:inline" }}
       split
diff --git a/appview/pages/templates/repo/pulls/fragments/pullStepDetails.html b/appview/pages/templates/repo/pulls/fragments/pullStepDetails.html
index f1aebbce..61c63ef7 100644
--- a/appview/pages/templates/repo/pulls/fragments/pullStepDetails.html
+++ b/appview/pages/templates/repo/pulls/fragments/pullStepDetails.html
@@ -53,23 +53,20 @@
     {{ $placeholder := .Placeholder }}
     {{ $previewUrl := .PreviewUrl }}
     <div class="flex flex-col gap-2" data-md-editor="{{ $id }}">
-        {{ $tabClasses := "group flex items-center gap-2 px-3 py-1 text-sm whitespace-nowrap rounded hover:no-underline data-[active=true]:bg-white data-[active=true]:dark:bg-gray-800 data-[active=true]:shadow-sm data-[active=true]:cursor-default data-[active=false]:hover:text-gray-900 data-[active=false]:dark:hover:text-white" }}
-        <div class="inline-flex items-center gap-1 p-1 bg-slate-100 dark:bg-gray-900 rounded-md text-gray-600 dark:text-gray-300 self-start border dark:border-gray-700">
+        <div class="btn-group self-start text-gray-600 dark:text-gray-300">
             <button type="button" data-md-mode="write"
-                data-active="true"
-                class="{{ $tabClasses }}">
-                {{ i "pencil" "w-3.5 h-3.5 inline group-[.htmx-request]:hidden" }}
+                class="btn-group-item active group">
+                {{ i "pencil" "w-3.5 h-3.5" }}
                 Write
             </button>
             <button type="button" data-md-mode="preview"
-                data-active="false"
                 hx-post="{{ $previewUrl }}"
                 hx-vals='js:{body: document.querySelector("[data-md-editor=\"{{ $id }}\"] textarea").value}'
                 hx-params="body"
                 hx-target="[data-md-editor='{{ $id }}'] [data-md-preview]"
                 hx-swap="innerHTML"
                 hx-indicator="this"
-                class="{{ $tabClasses }}">
+                class="btn-group-item group">
                 {{ i "eye" "w-3.5 h-3.5 inline group-[.htmx-request]:hidden" }}
                 {{ i "loader-circle" "w-3.5 h-3.5 animate-spin hidden group-[.htmx-request]:inline" }}
                 Preview
@@ -138,7 +135,7 @@
                 p.classList.toggle('hidden', p.dataset.mdPanel !== mode);
             });
             editor.querySelectorAll('[data-md-mode]').forEach(b => {
-                b.dataset.active = (b === btn) ? 'true' : 'false';
+                b.classList.toggle('active', b === btn);
             });
         });
     })();
diff --git a/appview/pages/templates/repo/pulls/fragments/pullStepReview.html b/appview/pages/templates/repo/pulls/fragments/pullStepReview.html
index 2079a5ae..11fc78bc 100644
--- a/appview/pages/templates/repo/pulls/fragments/pullStepReview.html
+++ b/appview/pages/templates/repo/pulls/fragments/pullStepReview.html
@@ -265,7 +265,7 @@
 
             <div class="flex-grow"></div>
 
-            <label title="Expand/Collapse diffs" for="{{ $colId }}" class="btn font-normal normal-case p-2">
+            <label title="Expand/Collapse diffs" for="{{ $colId }}" class="btn font-normal normal-case">
                 <input type="checkbox" id="{{ $colId }}" class="peer/collapse hidden"/>
                 <span class="peer-checked/collapse:hidden inline-flex items-center gap-2">
                     {{ i "unfold-vertical" "w-4 h-4" }}
@@ -436,7 +436,7 @@
 
             <div class="flex-grow"></div>
 
-            <label title="Expand/Collapse diffs" for="composeCollapseToggle" class="btn font-normal normal-case p-2">
+            <label title="Expand/Collapse diffs" for="composeCollapseToggle" class="btn font-normal normal-case">
                 <input type="checkbox" id="composeCollapseToggle" class="peer/collapse hidden"/>
                 <span class="peer-checked/collapse:hidden inline-flex items-center gap-2">
                     {{ i "unfold-vertical" "w-4 h-4" }}
diff --git a/appview/pages/templates/user/settings/profile.html b/appview/pages/templates/user/settings/profile.html
index d5462a86..0a876633 100644
--- a/appview/pages/templates/user/settings/profile.html
+++ b/appview/pages/templates/user/settings/profile.html
@@ -160,7 +160,7 @@
         <button
           popovertarget="deactivate-modal"
           popovertargetaction="toggle"
-          class="btn flex items-center gap-2 text-sm text-amber-600 hover:text-amber-700 dark:text-amber-400 dark:hover:text-amber-300 border-amber-300 dark:border-amber-600 cursor-pointer">
+          class="btn flex items-center gap-2 text-sm text-amber-600 hover:text-amber-700 dark:text-amber-400 dark:hover:text-amber-300 cursor-pointer">
           {{ i "pause" "size-4" }}
           deactivate account
         </button>
@@ -168,7 +168,7 @@
       <button
         popovertarget="delete-modal"
         popovertargetaction="toggle"
-        class="btn flex items-center gap-2 text-sm text-red-600 hover:text-red-700 dark:text-red-400 dark:hover:text-red-300 border-red-300 dark:border-red-600 cursor-pointer">
+        class="btn flex items-center gap-2 text-sm text-red-600 hover:text-red-700 dark:text-red-400 dark:hover:text-red-300 cursor-pointer">
         {{ i "trash-2" "size-4" }}
         delete account
       </button>
diff --git a/input.css b/input.css
index 67bc2719..1482c752 100644
--- a/input.css
+++ b/input.css
@@ -2,107 +2,107 @@
 @tailwind components;
 @tailwind utilities;
 @layer base {
-    @font-face {
-        font-family: "InterVariable";
-        src: url("/static/fonts/InterVariable.woff2") format("woff2");
-        font-weight: normal;
-        font-style: normal;
-        font-display: swap;
-    }
-
-    @font-face {
-        font-family: "InterVariable";
-        src: url("/static/fonts/InterVariable-Italic.woff2") format("woff2");
-        font-weight: normal;
-        font-style: italic;
-        font-display: swap;
-    }
-
-    @font-face {
-        font-family: "InterVariable";
-        src: url("/static/fonts/InterDisplay-Bold.woff2") format("woff2");
-        font-weight: bold;
-        font-style: normal;
-        font-display: swap;
-    }
-
-    @font-face {
-        font-family: "InterVariable";
-        src: url("/static/fonts/InterDisplay-BoldItalic.woff2") format("woff2");
-        font-weight: bold;
-        font-style: italic;
-        font-display: swap;
-    }
-
-    @font-face {
-        font-family: "IBMPlexMono";
-        src: url("/static/fonts/IBMPlexMono-Regular.woff2") format("woff2");
-        font-weight: normal;
-        font-style: normal;
-        font-display: swap;
-    }
-
-    @font-face {
-        font-family: "IBMPlexMono";
-        src: url("/static/fonts/IBMPlexMono-Italic.woff2") format("woff2");
-        font-weight: normal;
-        font-style: italic;
-        font-display: swap;
-    }
-
-    @font-face {
-        font-family: "IBMPlexMono";
-        src: url("/static/fonts/IBMPlexMono-Bold.woff2") format("woff2");
-        font-weight: bold;
-        font-style: normal;
-        font-display: swap;
-    }
-
-    @font-face {
-        font-family: "IBMPlexMono";
-        src: url("/static/fonts/IBMPlexMono-BoldItalic.woff2") format("woff2");
-        font-weight: bold;
-        font-style: italic;
-        font-display: swap;
-    }
-
-    ::selection {
-        @apply bg-yellow-400 text-black bg-opacity-30 dark:bg-yellow-600 dark:bg-opacity-50 dark:text-white;
-    }
-
-    @layer base {
-        html {
-            font-size: 14px;
-            scrollbar-gutter: stable;
-        }
-        @supports (font-variation-settings: normal) {
-            html {
-                font-feature-settings:
-                    "kern" 1,
-                    "liga" 1,
-                    "cv05" 1,
-                    "tnum" 1;
-            }
-        }
-
-        a {
-            @apply no-underline text-black hover:underline hover:text-gray-800 dark:text-white dark:hover:text-gray-300;
-        }
-
-        label {
-            @apply block text-gray-900 text-sm py-2 dark:text-gray-100;
-        }
-        
-        input,
-        textarea {
-            @apply block rounded p-3
+  @font-face {
+    font-family: "InterVariable";
+    src: url("/static/fonts/InterVariable.woff2") format("woff2");
+    font-weight: normal;
+    font-style: normal;
+    font-display: swap;
+  }
+
+  @font-face {
+    font-family: "InterVariable";
+    src: url("/static/fonts/InterVariable-Italic.woff2") format("woff2");
+    font-weight: normal;
+    font-style: italic;
+    font-display: swap;
+  }
+
+  @font-face {
+    font-family: "InterVariable";
+    src: url("/static/fonts/InterDisplay-Bold.woff2") format("woff2");
+    font-weight: bold;
+    font-style: normal;
+    font-display: swap;
+  }
+
+  @font-face {
+    font-family: "InterVariable";
+    src: url("/static/fonts/InterDisplay-BoldItalic.woff2") format("woff2");
+    font-weight: bold;
+    font-style: italic;
+    font-display: swap;
+  }
+
+  @font-face {
+    font-family: "IBMPlexMono";
+    src: url("/static/fonts/IBMPlexMono-Regular.woff2") format("woff2");
+    font-weight: normal;
+    font-style: normal;
+    font-display: swap;
+  }
+
+  @font-face {
+    font-family: "IBMPlexMono";
+    src: url("/static/fonts/IBMPlexMono-Italic.woff2") format("woff2");
+    font-weight: normal;
+    font-style: italic;
+    font-display: swap;
+  }
+
+  @font-face {
+    font-family: "IBMPlexMono";
+    src: url("/static/fonts/IBMPlexMono-Bold.woff2") format("woff2");
+    font-weight: bold;
+    font-style: normal;
+    font-display: swap;
+  }
+
+  @font-face {
+    font-family: "IBMPlexMono";
+    src: url("/static/fonts/IBMPlexMono-BoldItalic.woff2") format("woff2");
+    font-weight: bold;
+    font-style: italic;
+    font-display: swap;
+  }
+
+  ::selection {
+    @apply bg-yellow-400 text-black bg-opacity-30 dark:bg-yellow-600 dark:bg-opacity-50 dark:text-white;
+  }
+
+  @layer base {
+    html {
+      font-size: 14px;
+      scrollbar-gutter: stable;
+    }
+    @supports (font-variation-settings: normal) {
+      html {
+        font-feature-settings:
+          "kern" 1,
+          "liga" 1,
+          "cv05" 1,
+          "tnum" 1;
+      }
+    }
+
+    a {
+      @apply no-underline text-black hover:underline hover:text-gray-800 dark:text-white dark:hover:text-gray-300;
+    }
+
+    label {
+      @apply block text-gray-900 text-sm py-2 dark:text-gray-100;
+    }
+
+    input,
+    textarea {
+      @apply block rounded p-3
             bg-gray-50 dark:bg-gray-800 dark:text-white
             border border-gray-300 dark:border-gray-600
             focus:outline-none focus:ring-1 focus:ring-gray-400 dark:focus:ring-gray-500;
-        }
-        
-        input[type="checkbox"] {
-            @apply appearance-none size-4 p-0 rounded
+    }
+
+    input[type="checkbox"] {
+      @apply appearance-none size-4 p-0 rounded
             bg-transparent border border-gray-200
             hover:bg-gray-100
             checked:bg-gray-900 checked:border-transparent
@@ -121,33 +121,33 @@
             dark:disabled:checked:bg-gray-500 dark:disabled:checked:border-transparent
             dark:disabled:indeterminate:bg-gray-700 dark:disabled:indeterminate:border-gray-600
             focus:outline-none focus:ring-1 focus:ring-gray-400 dark:focus:ring-gray-500;
-            background-position: center;
-            background-repeat: no-repeat;
-            background-size: 12px;
-        }
-        input[type="checkbox"]:checked {
-            background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none'><path d='M10 3 4.5 8.5 2 6' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>");
-        }
-        input[type="checkbox"]:indeterminate {
-            background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none'><path d='M2.5 6h7' stroke='white' stroke-width='1.5' stroke-linecap='round'/></svg>");
-        }
-        input[type="checkbox"]:disabled:indeterminate {
-            background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none'><path d='M2.5 6h7' stroke='rgb(156,163,175)' stroke-width='1.5' stroke-linecap='round'/></svg>");
-        }
-        @media (prefers-color-scheme: dark) {
-            input[type="checkbox"]:checked {
-                background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none'><path d='M10 3 4.5 8.5 2 6' stroke='rgb(17,24,39)' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>");
-            }
-            input[type="checkbox"]:indeterminate {
-                background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none'><path d='M2.5 6h7' stroke='rgb(17,24,39)' stroke-width='1.5' stroke-linecap='round'/></svg>");
-            }
-            input[type="checkbox"]:disabled:indeterminate {
-                background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none'><path d='M2.5 6h7' stroke='rgb(107,114,128)' stroke-width='1.5' stroke-linecap='round'/></svg>");
-            }
-        }
-        
-        input[type="radio"] {
-            @apply appearance-none size-4 p-0 rounded-full bg-transparent border
+      background-position: center;
+      background-repeat: no-repeat;
+      background-size: 12px;
+    }
+    input[type="checkbox"]:checked {
+      background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none'><path d='M10 3 4.5 8.5 2 6' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>");
+    }
+    input[type="checkbox"]:indeterminate {
+      background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none'><path d='M2.5 6h7' stroke='white' stroke-width='1.5' stroke-linecap='round'/></svg>");
+    }
+    input[type="checkbox"]:disabled:indeterminate {
+      background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none'><path d='M2.5 6h7' stroke='rgb(156,163,175)' stroke-width='1.5' stroke-linecap='round'/></svg>");
+    }
+    @media (prefers-color-scheme: dark) {
+      input[type="checkbox"]:checked {
+        background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none'><path d='M10 3 4.5 8.5 2 6' stroke='rgb(17,24,39)' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>");
+      }
+      input[type="checkbox"]:indeterminate {
+        background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none'><path d='M2.5 6h7' stroke='rgb(17,24,39)' stroke-width='1.5' stroke-linecap='round'/></svg>");
+      }
+      input[type="checkbox"]:disabled:indeterminate {
+        background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none'><path d='M2.5 6h7' stroke='rgb(107,114,128)' stroke-width='1.5' stroke-linecap='round'/></svg>");
+      }
+    }
+
+    input[type="radio"] {
+      @apply appearance-none size-4 p-0 rounded-full bg-transparent border
                         
             border-gray-400 hover:border-gray-900
             hover:bg-gray-200
@@ -168,995 +168,1037 @@
             
             focus:outline-none focus:ring-1
             focus:ring-gray-400 dark:focus:ring-gray-500;
-            
-            background-position: center;
-            background-repeat: no-repeat;
-            background-size: 8px;
-        }
-        input[type="radio"]:checked {
-            background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><circle cx='6' cy='6' r='4.5' fill='rgb(17,24,39)'/></svg>");
-        }
-        input[type="radio"]:disabled:checked {
-            background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><circle cx='6' cy='6' r='4.5' fill='rgb(209,213,219)'/></svg>");
-        }
-        @media (prefers-color-scheme: dark) {
-            input[type="radio"]:checked {
-                background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><circle cx='6' cy='6' r='4.5' fill='rgb(243,244,246)'/></svg>");
-            }
-            input[type="radio"]:disabled:checked {
-                background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><circle cx='6' cy='6' r='4.5' fill='rgb(107,114,128)'/></svg>");
-            }
-        }
-
-        details summary::-webkit-details-marker {
-            display: none;
-        }
-
-        code {
-            @apply font-mono rounded bg-gray-100 dark:bg-gray-700 text-black dark:text-white;
-        }
-    }
-
-    @layer components {
-        .btn {
-            @apply relative z-10 inline-flex min-h-[30px] cursor-pointer items-center justify-center
-          bg-transparent px-2 pb-[0.2rem] text-sm text-gray-900
-          before:absolute before:inset-0 before:-z-10 before:block before:rounded
-          before:border before:border-gray-200 before:bg-white
-          before:shadow-[inset_0_-2px_0_0_rgba(0,0,0,0.1),0_1px_0_0_rgba(0,0,0,0.04)]
-          before:content-[''] before:transition-all before:duration-150 before:ease-in-out
-          hover:before:shadow-[inset_0_-2px_0_0_rgba(0,0,0,0.15),0_2px_1px_0_rgba(0,0,0,0.06)]
-          hover:before:bg-gray-50
-          dark:hover:before:bg-gray-700
-          active:before:shadow-[inset_0_2px_2px_0_rgba(0,0,0,0.1)]
-          focus:outline-none focus-visible:before:outline focus-visible:before:outline-2 focus-visible:before:outline-gray-400
-          disabled:cursor-not-allowed disabled:opacity-50
-          dark:text-gray-100 dark:before:bg-gray-800 dark:before:border-gray-700;
-        }
-
-        .btn-flat {
-            @apply relative z-10 inline-flex min-h-[30px] cursor-pointer items-center justify-center
-          bg-transparent px-2 pb-[0.2rem] text-sm text-gray-900
-          before:absolute before:inset-0 before:-z-10 before:block before:rounded
-          before:border before:border-gray-200 before:bg-white
-          before:content-[''] before:transition-all before:duration-150 before:ease-in-out
-          hover:before:bg-gray-50
-          dark:hover:before:bg-gray-700
-          focus:outline-none focus-visible:before:outline focus-visible:before:outline-2 focus-visible:before:outline-gray-400
-          disabled:cursor-not-allowed disabled:opacity-50
-          dark:text-gray-100 dark:before:bg-gray-800 dark:before:border-gray-700;
-        }
-
-        .btn-create {
-            @apply btn text-white
-          before:bg-green-600 hover:before:bg-green-700
-          dark:before:bg-green-700 dark:hover:before:bg-green-800
-          before:border before:border-green-700 hover:before:border-green-800
-          focus-visible:before:outline-green-500
-          disabled:before:bg-green-400 dark:disabled:before:bg-green-600;
-        }
-
-        .btn-cancel {
-            @apply btn text-white
-          before:bg-red-600 hover:before:bg-red-700
-          dark:before:bg-red-700 dark:hover:before:bg-red-800
-          before:border before:border-red-700 hover:before:border-red-800
-          focus-visible:before:outline-red-500
-          disabled:before:bg-red-400 dark:disabled:before:bg-red-600;
-        }
-
-        .prose {
-            overflow-wrap: anywhere;
-        }
-
-        .prose td,
-        .prose th {
-            overflow-wrap: normal;
-        }
-
-        .prose hr {
-            @apply my-2;
-        }
-
-        .prose li:has(input) {
-            @apply list-none;
-        }
-
-        .prose ul:has(input) {
-            @apply pl-2;
-        }
-
-        .prose .heading .anchor {
-            @apply no-underline mx-2 opacity-0;
-        }
-
-        .prose .heading:hover .anchor {
-            @apply opacity-70;
-        }
-
-        .prose .heading .anchor:hover {
-            @apply opacity-70;
-        }
-
-        .prose h1:target,
-        .prose h2:target,
-        .prose h3:target,
-        .prose h4:target,
-        .prose h5:target,
-        .prose h6:target {
-            @apply bg-yellow-200/30 dark:bg-yellow-600/30;
-        }
-
-        .prose a.footnote-backref {
-            @apply no-underline;
-        }
-
-        .prose a.mention {
-            @apply no-underline hover:underline font-bold;
-        }
-
-        .prose li {
-            @apply my-0 py-0;
-        }
-
-        .prose ul,
-        .prose ol {
-            @apply my-1 py-0;
-        }
-
-        .prose img {
-            display: inline;
-            margin: 0;
-            vertical-align: middle;
-        }
-
-        .prose input {
-            @apply inline-block my-0 mb-1 mx-1;
-
-            &[type="checkbox"] {
-                @apply m-0 mr-1;
-            }
-        }
-
-
-        /* Mermaid diagrams */
-        .prose pre.mermaid {
-            @apply flex justify-center my-4 overflow-x-auto bg-transparent border-0;
-        }
-
-        /* Base callout */
-        details[data-callout] {
-            @apply border-l-4 pl-3 py-2 text-gray-800 dark:text-gray-200 my-4;
-        }
-
-        details[data-callout] > summary {
-            @apply font-bold cursor-pointer mb-1;
-        }
-
-        details[data-callout] > .callout-content {
-            @apply text-sm leading-snug;
-        }
-
-        /* Note (blue) */
-        details[data-callout="note" i] {
-            @apply border-blue-400 dark:border-blue-500;
-        }
-        details[data-callout="note" i] > summary {
-            @apply text-blue-700 dark:text-blue-400;
-        }
-
-        /* Important (purple) */
-        details[data-callout="important" i] {
-            @apply border-purple-400 dark:border-purple-500;
-        }
-        details[data-callout="important" i] > summary {
-            @apply text-purple-700 dark:text-purple-400;
-        }
-
-        /* Warning (yellow) */
-        details[data-callout="warning" i] {
-            @apply border-yellow-400 dark:border-yellow-500;
-        }
-        details[data-callout="warning" i] > summary {
-            @apply text-yellow-700 dark:text-yellow-400;
-        }
-
-        /* Caution (red) */
-        details[data-callout="caution" i] {
-            @apply border-red-400 dark:border-red-500;
-        }
-        details[data-callout="caution" i] > summary {
-            @apply text-red-700 dark:text-red-400;
-        }
-
-        /* Tip (green) */
-        details[data-callout="tip" i] {
-            @apply border-green-400 dark:border-green-500;
-        }
-        details[data-callout="tip" i] > summary {
-            @apply text-green-700 dark:text-green-400;
-        }
-
-        /* Optional: hide the disclosure arrow like GitHub */
-        details[data-callout] > summary::-webkit-details-marker {
-            display: none;
-        }
-    }
-    @layer utilities {
-        .error {
-            @apply py-1 text-red-400 dark:text-red-300;
-        }
-        .success {
-            @apply py-1 text-gray-900 dark:text-gray-100;
-        }
-
-        @keyframes scroll {
-          0%   { transform: translateX(0); }
-          100% { transform: translateX(-50%); }
-        }
-
-        .animate-marquee {
-          animation: scroll 60s linear infinite;
-        }
-
-        .animate-marquee:hover {
-          animation-play-state: paused;
-        }
-
-        @media (prefers-reduced-motion: reduce) {
-          .animate-marquee {
-            animation: none;
-            transform: none;
-          }
-        }
-
-        @keyframes progress {
-          from { width: 0%; }
-          to { width: 100%; }
-        }
-
-        .animate-progress {
-          animation: progress 10s linear forwards;
-        }
-
-        @keyframes fadeIn {
-          from { opacity: 0; }
-          to { opacity: 1; }
-        }
-
-        @keyframes fadeOut {
-          from { opacity: 1; }
-          to { opacity: 0; }
-        }
-
-        .animate-fadein {
-          animation: fadeIn 0.25s ease-in forwards;
-        }
-
-        .animate-fadeout {
-          animation: fadeOut 0.25s ease-out forwards;
-        }
+
+      background-position: center;
+      background-repeat: no-repeat;
+      background-size: 8px;
+    }
+    input[type="radio"]:checked {
+      background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><circle cx='6' cy='6' r='4.5' fill='rgb(17,24,39)'/></svg>");
+    }
+    input[type="radio"]:disabled:checked {
+      background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><circle cx='6' cy='6' r='4.5' fill='rgb(209,213,219)'/></svg>");
+    }
+    @media (prefers-color-scheme: dark) {
+      input[type="radio"]:checked {
+        background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><circle cx='6' cy='6' r='4.5' fill='rgb(243,244,246)'/></svg>");
+      }
+      input[type="radio"]:disabled:checked {
+        background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><circle cx='6' cy='6' r='4.5' fill='rgb(107,114,128)'/></svg>");
+      }
+    }
+
+    details summary::-webkit-details-marker {
+      display: none;
+    }
+
+    code {
+      @apply font-mono rounded bg-gray-100 dark:bg-gray-700 text-black dark:text-white;
+    }
+  }
+
+  @layer components {
+    .btn {
+      @apply relative z-10 inline-flex overflow-hidden items-center justify-center
+          min-h-[32px] px-2 py-[6px]
+          rounded border border-gray-200 dark:border-gray-700
+          bg-white dark:bg-gray-800
+          text-sm text-gray-900 dark:text-gray-100
+          transition-all duration-150 ease-in-out
+          outline-transparent cursor-pointer
+          focus-visible:outline focus-visible:outline-2 focus-visible:outline-gray-400 dark:focus-visible:outline-gray-600;
+
+      @apply before:absolute before:inset-0 before:-z-10 before:block before:rounded-sm before:content-['']
+          before:transition-all before:duration-150 before:ease-in-out
+          before:shadow-[inset_0_-2px_0_0_theme(colors.gray.200)] dark:before:shadow-[inset_0_-2px_0_0_theme(colors.gray.900)];
+
+      @apply hover:bg-gray-50 dark:hover:bg-gray-700
+          hover:before:shadow-[inset_0_-2px_0_0_theme(colors.gray.300)] dark:hover:before:shadow-[inset_0_-2px_0_0_theme(colors.gray.800)]
+          active:before:shadow-[inset_0_2px_2px_0_theme(colors.gray.200)] dark:active:before:shadow-[inset_0_2px_2px_0_theme(colors.gray.900)]
+          disabled:cursor-not-allowed disabled:opacity-50;
+    }
+
+    .btn-flat {
+      @apply inline-flex items-center justify-center
+          min-h-7 px-2 py-[6px]
+          dark:bg-gray-800 dark:border-gray-700
+          text-sm text-gray-900 dark:text-gray-100 cursor-pointer
+          focus:outline-none
+          focus-visible:outline focus-visible:outline-2 focus-visible:outline-gray-400
+          dark:hover:text-gray-400
+          disabled:cursor-not-allowed disabled:opacity-50;
+    }
+
+    .btn-create {
+      @apply btn text-white
+          bg-green-600 hover:bg-green-700 dark:bg-green-700 dark:hover:bg-green-800
+          border border-green-700 hover:border-green-800
+          focus-visible:outline-green-500
+          disabled:bg-green-400 dark:disabled:bg-green-600
+          before:shadow-[inset_0_-2px_0_0_theme(colors.gray.900/25%)]
+          hover:before:shadow-[inset_0_-2px_0_0_theme(colors.gray.900/25%)]
+          active:before:shadow-[inset_0_2px_2px_0_theme(colors.gray.900/50%)];
+    }
+
+    .btn-cancel {
+      @apply btn text-white
+          bg-red-600 hover:bg-red-700 dark:bg-red-700 dark:hover:bg-red-800
+          border border-red-700 hover:border-red-800
+          focus-visible:outline-red-500
+          disabled:bg-red-400 dark:disabled:bg-red-600;
+    }
+
+    .btn-group {
+      @apply inline-flex items-center
+          max-h-[32px]
+          rounded border border-gray-200 dark:border-gray-700
+          divide-x divide-gray-200 dark:divide-gray-700
+          overflow-hidden;
+    }
+
+    .btn-group-item {
+      @apply btn-flat min-h-[30px] gap-1.5
+          bg-gray-50 dark:bg-gray-900
+          border-y-0
+          hover:text-gray-600 dark:hover:text-gray-400;
+    }
+
+    .btn-group-item.active {
+      @apply btn min-h-[30px] rounded-none border-y-0
+          before:border-none before:rounded-none before:bg-inherit;
+
+      &:first-child {
+        @apply border-none before:rounded-l-sm;
+      }
+      &:last-child {
+        @apply border-y-0 border-r-0 border-l before:rounded-r-sm;
+      }
+    }
+
+    .prose {
+      overflow-wrap: anywhere;
+    }
+
+    .prose td,
+    .prose th {
+      overflow-wrap: normal;
+    }
+
+    .prose hr {
+      @apply my-2;
+    }
+
+    .prose li:has(input) {
+      @apply list-none;
+    }
+
+    .prose ul:has(input) {
+      @apply pl-2;
+    }
+
+    .prose .heading .anchor {
+      @apply no-underline mx-2 opacity-0;
+    }
+
+    .prose .heading:hover .anchor {
+      @apply opacity-70;
+    }
+
+    .prose .heading .anchor:hover {
+      @apply opacity-70;
+    }
+
+    .prose h1:target,
+    .prose h2:target,
+    .prose h3:target,
+    .prose h4:target,
+    .prose h5:target,
+    .prose h6:target {
+      @apply bg-yellow-200/30 dark:bg-yellow-600/30;
+    }
+
+    .prose a.footnote-backref {
+      @apply no-underline;
+    }
+
+    .prose a.mention {
+      @apply no-underline hover:underline font-bold;
     }
+
+    .prose li {
+      @apply my-0 py-0;
+    }
+
+    .prose ul,
+    .prose ol {
+      @apply my-1 py-0;
+    }
+
+    .prose img {
+      display: inline;
+      margin: 0;
+      vertical-align: middle;
+    }
+
+    .prose input {
+      @apply inline-block my-0 mb-1 mx-1;
+    }
+
+    /* Mermaid diagrams */
+    .prose pre.mermaid {
+      @apply flex justify-center my-4 overflow-x-auto bg-transparent border-0;
+    }
+
+    /* Base callout */
+    details[data-callout] {
+      @apply border-l-4 pl-3 py-2 text-gray-800 dark:text-gray-200 my-4;
+    }
+
+    details[data-callout] > summary {
+      @apply font-bold cursor-pointer mb-1;
+    }
+
+    details[data-callout] > .callout-content {
+      @apply text-sm leading-snug;
+    }
+
+    /* Note (blue) */
+    details[data-callout="note" i] {
+      @apply border-blue-400 dark:border-blue-500;
+    }
+    details[data-callout="note" i] > summary {
+      @apply text-blue-700 dark:text-blue-400;
+    }
+
+    /* Important (purple) */
+    details[data-callout="important" i] {
+      @apply border-purple-400 dark:border-purple-500;
+    }
+    details[data-callout="important" i] > summary {
+      @apply text-purple-700 dark:text-purple-400;
+    }
+
+    /* Warning (yellow) */
+    details[data-callout="warning" i] {
+      @apply border-yellow-400 dark:border-yellow-500;
+    }
+    details[data-callout="warning" i] > summary {
+      @apply text-yellow-700 dark:text-yellow-400;
+    }
+
+    /* Caution (red) */
+    details[data-callout="caution" i] {
+      @apply border-red-400 dark:border-red-500;
+    }
+    details[data-callout="caution" i] > summary {
+      @apply text-red-700 dark:text-red-400;
+    }
+
+    /* Tip (green) */
+    details[data-callout="tip" i] {
+      @apply border-green-400 dark:border-green-500;
+    }
+    details[data-callout="tip" i] > summary {
+      @apply text-green-700 dark:text-green-400;
+    }
+
+    /* Optional: hide the disclosure arrow like GitHub */
+    details[data-callout] > summary::-webkit-details-marker {
+      display: none;
+    }
+  }
+  @layer utilities {
+    .error {
+      @apply py-1 text-red-400 dark:text-red-300;
+    }
+    .success {
+      @apply py-1 text-gray-900 dark:text-gray-100;
+    }
+
+    @keyframes scroll {
+      0% {
+        transform: translateX(0);
+      }
+      100% {
+        transform: translateX(-50%);
+      }
+    }
+
+    .animate-marquee {
+      animation: scroll 60s linear infinite;
+    }
+
+    .animate-marquee:hover {
+      animation-play-state: paused;
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      .animate-marquee {
+        animation: none;
+        transform: none;
+      }
+    }
+
+    @keyframes progress {
+      from {
+        width: 0%;
+      }
+      to {
+        width: 100%;
+      }
+    }
+
+    .animate-progress {
+      animation: progress 10s linear forwards;
+    }
+
+    @keyframes fadeIn {
+      from {
+        opacity: 0;
+      }
+      to {
+        opacity: 1;
+      }
+    }
+
+    @keyframes fadeOut {
+      from {
+        opacity: 1;
+      }
+      to {
+        opacity: 0;
+      }
+    }
+
+    .animate-fadein {
+      animation: fadeIn 0.25s ease-in forwards;
+    }
+
+    .animate-fadeout {
+      animation: fadeOut 0.25s ease-out forwards;
+    }
+  }
 }
 
 /* Background */
 .bg {
-    color: #4c4f69;
-    background-color: #eff1f5;
+  color: #4c4f69;
+  background-color: #eff1f5;
 }
 /* PreWrapper */
 .chroma {
-    color: #4c4f69;
+  color: #4c4f69;
 }
 /* Error */
 .chroma .err {
-    color: #d20f39;
+  color: #d20f39;
 }
 /* LineLink */
 .chroma .lnlinks {
-    outline: none;
-    text-decoration: none;
-    color: inherit;
+  outline: none;
+  text-decoration: none;
+  color: inherit;
 }
 /* LineTableTD */
 .chroma .lntd {
-    vertical-align: top;
-    padding: 0;
-    margin: 0;
-    border: 0;
+  vertical-align: top;
+  padding: 0;
+  margin: 0;
+  border: 0;
 }
 /* LineTable */
 .chroma .lntable {
-    border-spacing: 0;
-    padding: 0;
-    margin: 0;
-    border: 0;
+  border-spacing: 0;
+  padding: 0;
+  margin: 0;
+  border: 0;
 }
 /* LineHighlight */
 .chroma .hl {
-    @apply bg-amber-400/30 dark:bg-amber-500/20;
+  @apply bg-amber-400/30 dark:bg-amber-500/20;
 }
 
-.line-quote-hl, .line-range-hl {
-    @apply !bg-yellow-200/30 dark:!bg-yellow-700/30;
+.line-quote-hl,
+.line-range-hl {
+  @apply !bg-yellow-200/30 dark:!bg-yellow-700/30;
 }
 
 :is(.line-quote-hl, .line-range-hl) > .min-w-\[3\.5rem\] {
-    @apply !bg-yellow-200/30 dark:!bg-yellow-700/30;
+  @apply !bg-yellow-200/30 dark:!bg-yellow-700/30;
 }
 
 :is(.line-quote-hl, .line-range-hl) > .min-w-\[3\.5rem\] a {
-    @apply !text-black dark:!text-white;
+  @apply !text-black dark:!text-white;
 }
 
 /* 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: #8c8fa1;
+  white-space: pre;
+  -webkit-user-select: none;
+  user-select: none;
+  margin-right: 0.4em;
+  padding: 0 0.4em 0 0.4em;
+  color: #8c8fa1;
 }
 /* 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: #8c8fa1;
+  white-space: pre;
+  -webkit-user-select: none;
+  user-select: none;
+  margin-right: 0.4em;
+  padding: 0 0.4em 0 0.4em;
+  color: #8c8fa1;
 }
 /* Line */
 .chroma .line {
-    display: flex;
+  display: flex;
 }
 /* Keyword */
 .chroma .k {
-    color: #8839ef;
+  color: #8839ef;
 }
 /* KeywordConstant */
 .chroma .kc {
-    color: #fe640b;
+  color: #fe640b;
 }
 /* KeywordDeclaration */
 .chroma .kd {
-    color: #d20f39;
+  color: #d20f39;
 }
 /* KeywordNamespace */
 .chroma .kn {
-    color: #179299;
+  color: #179299;
 }
 /* KeywordPseudo */
 .chroma .kp {
-    color: #8839ef;
+  color: #8839ef;
 }
 /* KeywordReserved */
 .chroma .kr {
-    color: #8839ef;
+  color: #8839ef;
 }
 /* KeywordType */
 .chroma .kt {
-    color: #d20f39;
+  color: #d20f39;
 }
 /* NameAttribute */
 .chroma .na {
-    color: #1e66f5;
+  color: #1e66f5;
 }
 /* NameBuiltin */
 .chroma .nb {
-    color: #04a5e5;
+  color: #04a5e5;
 }
 /* NameBuiltinPseudo */
 .chroma .bp {
-    color: #04a5e5;
+  color: #04a5e5;
 }
 /* NameClass */
 .chroma .nc {
-    color: #df8e1d;
+  color: #df8e1d;
 }
 /* NameConstant */
 .chroma .no {
-    color: #df8e1d;
+  color: #df8e1d;
 }
 /* NameDecorator */
 .chroma .nd {
-    color: #1e66f5;
-    font-weight: bold;
+  color: #1e66f5;
+  font-weight: bold;
 }
 /* NameEntity */
 .chroma .ni {
-    color: #179299;
+  color: #179299;
 }
 /* NameException */
 .chroma .ne {
-    color: #fe640b;
+  color: #fe640b;
 }
 /* NameFunction */
 .chroma .nf {
-    color: #1e66f5;
+  color: #1e66f5;
 }
 /* NameFunctionMagic */
 .chroma .fm {
-    color: #1e66f5;
+  color: #1e66f5;
 }
 /* NameLabel */
 .chroma .nl {
-    color: #04a5e5;
+  color: #04a5e5;
 }
 /* NameNamespace */
 .chroma .nn {
-    color: #fe640b;
+  color: #fe640b;
 }
 /* NameProperty */
 .chroma .py {
-    color: #fe640b;
+  color: #fe640b;
 }
 /* NameTag */
 .chroma .nt {
-    color: #8839ef;
+  color: #8839ef;
 }
 /* NameVariable */
 .chroma .nv {
-    color: #dc8a78;
+  color: #dc8a78;
 }
 /* NameVariableClass */
 .chroma .vc {
-    color: #dc8a78;
+  color: #dc8a78;
 }
 /* NameVariableGlobal */
 .chroma .vg {
-    color: #dc8a78;
+  color: #dc8a78;
 }
 /* NameVariableInstance */
 .chroma .vi {
-    color: #dc8a78;
+  color: #dc8a78;
 }
 /* NameVariableMagic */
 .chroma .vm {
-    color: #dc8a78;
+  color: #dc8a78;
 }
 /* LiteralString */
 .chroma .s {
-    color: #40a02b;
+  color: #40a02b;
 }
 /* LiteralStringAffix */
 .chroma .sa {
-    color: #d20f39;
+  color: #d20f39;
 }
 /* LiteralStringBacktick */
 .chroma .sb {
-    color: #40a02b;
+  color: #40a02b;
 }
 /* LiteralStringChar */
 .chroma .sc {
-    color: #40a02b;
+  color: #40a02b;
 }
 /* LiteralStringDelimiter */
 .chroma .dl {
-    color: #1e66f5;
+  color: #1e66f5;
 }
 /* LiteralStringDoc */
 .chroma .sd {
-    color: #9ca0b0;
+  color: #9ca0b0;
 }
 /* LiteralStringDouble */
 .chroma .s2 {
-    color: #40a02b;
+  color: #40a02b;
 }
 /* LiteralStringEscape */
 .chroma .se {
-    color: #1e66f5;
+  color: #1e66f5;
 }
 /* LiteralStringHeredoc */
 .chroma .sh {
-    color: #9ca0b0;
+  color: #9ca0b0;
 }
 /* LiteralStringInterpol */
 .chroma .si {
-    color: #40a02b;
+  color: #40a02b;
 }
 /* LiteralStringOther */
 .chroma .sx {
-    color: #40a02b;
+  color: #40a02b;
 }
 /* LiteralStringRegex */
 .chroma .sr {
-    color: #179299;
+  color: #179299;
 }
 /* LiteralStringSingle */
 .chroma .s1 {
-    color: #40a02b;
+  color: #40a02b;
 }
 /* LiteralStringSymbol */
 .chroma .ss {
-    color: #40a02b;
+  color: #40a02b;
 }
 /* LiteralNumber */
 .chroma .m {
-    color: #fe640b;
+  color: #fe640b;
 }
 /* LiteralNumberBin */
 .chroma .mb {
-    color: #fe640b;
+  color: #fe640b;
 }
 /* LiteralNumberFloat */
 .chroma .mf {
-    color: #fe640b;
+  color: #fe640b;
 }
 /* LiteralNumberHex */
 .chroma .mh {
-    color: #fe640b;
+  color: #fe640b;
 }
 /* LiteralNumberInteger */
 .chroma .mi {
-    color: #fe640b;
+  color: #fe640b;
 }
 /* LiteralNumberIntegerLong */
 .chroma .il {
-    color: #fe640b;
+  color: #fe640b;
 }
 /* LiteralNumberOct */
 .chroma .mo {
-    color: #fe640b;
+  color: #fe640b;
 }
 /* Operator */
 .chroma .o {
-    color: #04a5e5;
-    font-weight: bold;
+  color: #04a5e5;
+  font-weight: bold;
 }
 /* OperatorWord */
 .chroma .ow {
-    color: #04a5e5;
-    font-weight: bold;
+  color: #04a5e5;
+  font-weight: bold;
 }
 /* Comment */
 .chroma .c {
-    color: #9ca0b0;
-    font-style: italic;
+  color: #9ca0b0;
+  font-style: italic;
 }
 /* CommentHashbang */
 .chroma .ch {
-    color: #9ca0b0;
-    font-style: italic;
+  color: #9ca0b0;
+  font-style: italic;
 }
 /* CommentMultiline */
 .chroma .cm {
-    color: #9ca0b0;
-    font-style: italic;
+  color: #9ca0b0;
+  font-style: italic;
 }
 /* CommentSingle */
 .chroma .c1 {
-    color: #9ca0b0;
-    font-style: italic;
+  color: #9ca0b0;
+  font-style: italic;
 }
 /* CommentSpecial */
 .chroma .cs {
-    color: #9ca0b0;
-    font-style: italic;
+  color: #9ca0b0;
+  font-style: italic;
 }
 /* CommentPreproc */
 .chroma .cp {
-    color: #9ca0b0;
-    font-style: italic;
+  color: #9ca0b0;
+  font-style: italic;
 }
 /* CommentPreprocFile */
 .chroma .cpf {
-    color: #9ca0b0;
-    font-weight: bold;
-    font-style: italic;
+  color: #9ca0b0;
+  font-weight: bold;
+  font-style: italic;
 }
 /* GenericDeleted */
 .chroma .gd {
-    color: #d20f39;
-    background-color: oklch(93.6% 0.032 17.717);
+  color: #d20f39;
+  background-color: oklch(93.6% 0.032 17.717);
 }
 /* GenericEmph */
 .chroma .ge {
-    font-style: italic;
+  font-style: italic;
 }
 /* GenericError */
 .chroma .gr {
-    color: #d20f39;
+  color: #d20f39;
 }
 /* GenericHeading */
 .chroma .gh {
-    color: #fe640b;
-    font-weight: bold;
+  color: #fe640b;
+  font-weight: bold;
 }
 /* GenericInserted */
 .chroma .gi {
-    color: #40a02b;
-    background-color: oklch(96.2% 0.044 156.743);
+  color: #40a02b;
+  background-color: oklch(96.2% 0.044 156.743);
 }
 /* GenericStrong */
 .chroma .gs {
-    font-weight: bold;
+  font-weight: bold;
 }
 /* GenericSubheading */
 .chroma .gu {
-    color: #fe640b;
-    font-weight: bold;
+  color: #fe640b;
+  font-weight: bold;
 }
 /* GenericTraceback */
 .chroma .gt {
-    color: #d20f39;
+  color: #d20f39;
 }
 /* GenericUnderline */
 .chroma .gl {
-    text-decoration: underline;
+  text-decoration: underline;
 }
 
 @media (prefers-color-scheme: dark) {
-    /* Background */
-    .bg {
-        color: #cad3f5;
-        background-color: #24273a;
-    }
-    /* PreWrapper */
-    .chroma {
-        color: #cad3f5;
-    }
-    /* Error */
-    .chroma .err {
-        color: #ed8796;
-    }
-    /* 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;
-        padding: 0;
-        margin: 0;
-        border: 0;
-    }
-    /* LineHighlight */
-    .chroma .hl {
-        background-color: #494d64;
-    }
-    /* 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: #8087a2;
-    }
-    /* 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: #8087a2;
-    }
-    /* Line */
-    .chroma .line {
-        display: flex;
-    }
-    /* Keyword */
-    .chroma .k {
-        color: #c6a0f6;
-    }
-    /* KeywordConstant */
-    .chroma .kc {
-        color: #f5a97f;
-    }
-    /* KeywordDeclaration */
-    .chroma .kd {
-        color: #ed8796;
-    }
-    /* KeywordNamespace */
-    .chroma .kn {
-        color: #8bd5ca;
-    }
-    /* KeywordPseudo */
-    .chroma .kp {
-        color: #c6a0f6;
-    }
-    /* KeywordReserved */
-    .chroma .kr {
-        color: #c6a0f6;
-    }
-    /* KeywordType */
-    .chroma .kt {
-        color: #ed8796;
-    }
-    /* NameAttribute */
-    .chroma .na {
-        color: #8aadf4;
-    }
-    /* NameBuiltin */
-    .chroma .nb {
-        color: #91d7e3;
-    }
-    /* NameBuiltinPseudo */
-    .chroma .bp {
-        color: #91d7e3;
-    }
-    /* NameClass */
-    .chroma .nc {
-        color: #eed49f;
-    }
-    /* NameConstant */
-    .chroma .no {
-        color: #eed49f;
-    }
-    /* NameDecorator */
-    .chroma .nd {
-        color: #8aadf4;
-        font-weight: bold;
-    }
-    /* NameEntity */
-    .chroma .ni {
-        color: #8bd5ca;
-    }
-    /* NameException */
-    .chroma .ne {
-        color: #f5a97f;
-    }
-    /* NameFunction */
-    .chroma .nf {
-        color: #8aadf4;
-    }
-    /* NameFunctionMagic */
-    .chroma .fm {
-        color: #8aadf4;
-    }
-    /* NameLabel */
-    .chroma .nl {
-        color: #91d7e3;
-    }
-    /* NameNamespace */
-    .chroma .nn {
-        color: #f5a97f;
-    }
-    /* NameProperty */
-    .chroma .py {
-        color: #f5a97f;
-    }
-    /* NameTag */
-    .chroma .nt {
-        color: #c6a0f6;
-    }
-    /* NameVariable */
-    .chroma .nv {
-        color: #f4dbd6;
-    }
-    /* NameVariableClass */
-    .chroma .vc {
-        color: #f4dbd6;
-    }
-    /* NameVariableGlobal */
-    .chroma .vg {
-        color: #f4dbd6;
-    }
-    /* NameVariableInstance */
-    .chroma .vi {
-        color: #f4dbd6;
-    }
-    /* NameVariableMagic */
-    .chroma .vm {
-        color: #f4dbd6;
-    }
-    /* LiteralString */
-    .chroma .s {
-        color: #a6da95;
-    }
-    /* LiteralStringAffix */
-    .chroma .sa {
-        color: #ed8796;
-    }
-    /* LiteralStringBacktick */
-    .chroma .sb {
-        color: #a6da95;
-    }
-    /* LiteralStringChar */
-    .chroma .sc {
-        color: #a6da95;
-    }
-    /* LiteralStringDelimiter */
-    .chroma .dl {
-        color: #8aadf4;
-    }
-    /* LiteralStringDoc */
-    .chroma .sd {
-        color: #6e738d;
-    }
-    /* LiteralStringDouble */
-    .chroma .s2 {
-        color: #a6da95;
-    }
-    /* LiteralStringEscape */
-    .chroma .se {
-        color: #8aadf4;
-    }
-    /* LiteralStringHeredoc */
-    .chroma .sh {
-        color: #6e738d;
-    }
-    /* LiteralStringInterpol */
-    .chroma .si {
-        color: #a6da95;
-    }
-    /* LiteralStringOther */
-    .chroma .sx {
-        color: #a6da95;
-    }
-    /* LiteralStringRegex */
-    .chroma .sr {
-        color: #8bd5ca;
-    }
-    /* LiteralStringSingle */
-    .chroma .s1 {
-        color: #a6da95;
-    }
-    /* LiteralStringSymbol */
-    .chroma .ss {
-        color: #a6da95;
-    }
-    /* LiteralNumber */
-    .chroma .m {
-        color: #f5a97f;
-    }
-    /* LiteralNumberBin */
-    .chroma .mb {
-        color: #f5a97f;
-    }
-    /* LiteralNumberFloat */
-    .chroma .mf {
-        color: #f5a97f;
-    }
-    /* LiteralNumberHex */
-    .chroma .mh {
-        color: #f5a97f;
-    }
-    /* LiteralNumberInteger */
-    .chroma .mi {
-        color: #f5a97f;
-    }
-    /* LiteralNumberIntegerLong */
-    .chroma .il {
-        color: #f5a97f;
-    }
-    /* LiteralNumberOct */
-    .chroma .mo {
-        color: #f5a97f;
-    }
-    /* Operator */
-    .chroma .o {
-        color: #91d7e3;
-        font-weight: bold;
-    }
-    /* OperatorWord */
-    .chroma .ow {
-        color: #91d7e3;
-        font-weight: bold;
-    }
-    /* Comment */
-    .chroma .c {
-        color: #6e738d;
-        font-style: italic;
-    }
-    /* CommentHashbang */
-    .chroma .ch {
-        color: #6e738d;
-        font-style: italic;
-    }
-    /* CommentMultiline */
-    .chroma .cm {
-        color: #6e738d;
-        font-style: italic;
-    }
-    /* CommentSingle */
-    .chroma .c1 {
-        color: #6e738d;
-        font-style: italic;
-    }
-    /* CommentSpecial */
-    .chroma .cs {
-        color: #6e738d;
-        font-style: italic;
-    }
-    /* CommentPreproc */
-    .chroma .cp {
-        color: #6e738d;
-        font-style: italic;
-    }
-    /* CommentPreprocFile */
-    .chroma .cpf {
-        color: #6e738d;
-        font-weight: bold;
-        font-style: italic;
-    }
-    /* GenericDeleted */
-    .chroma .gd {
-        color: #ed8796;
-        background-color: oklch(44.4% 0.177 26.899 / 0.5);
-    }
-    /* GenericEmph */
-    .chroma .ge {
-        font-style: italic;
-    }
-    /* GenericError */
-    .chroma .gr {
-        color: #ed8796;
-    }
-    /* GenericHeading */
-    .chroma .gh {
-        color: #f5a97f;
-        font-weight: bold;
-    }
-    /* GenericInserted */
-    .chroma .gi {
-        color: #a6da95;
-        background-color: oklch(44.8% 0.119 151.328 / 0.5);
-    }
-    /* GenericStrong */
-    .chroma .gs {
-        font-weight: bold;
-    }
-    /* GenericSubheading */
-    .chroma .gu {
-        color: #f5a97f;
-        font-weight: bold;
-    }
-    /* GenericTraceback */
-    .chroma .gt {
-        color: #ed8796;
-    }
-    /* GenericUnderline */
-    .chroma .gl {
-        text-decoration: underline;
-    }
+  /* Background */
+  .bg {
+    color: #cad3f5;
+    background-color: #24273a;
+  }
+  /* PreWrapper */
+  .chroma {
+    color: #cad3f5;
+  }
+  /* Error */
+  .chroma .err {
+    color: #ed8796;
+  }
+  /* 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;
+    padding: 0;
+    margin: 0;
+    border: 0;
+  }
+  /* LineHighlight */
+  .chroma .hl {
+    background-color: #494d64;
+  }
+  /* 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: #8087a2;
+  }
+  /* 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: #8087a2;
+  }
+  /* Line */
+  .chroma .line {
+    display: flex;
+  }
+  /* Keyword */
+  .chroma .k {
+    color: #c6a0f6;
+  }
+  /* KeywordConstant */
+  .chroma .kc {
+    color: #f5a97f;
+  }
+  /* KeywordDeclaration */
+  .chroma .kd {
+    color: #ed8796;
+  }
+  /* KeywordNamespace */
+  .chroma .kn {
+    color: #8bd5ca;
+  }
+  /* KeywordPseudo */
+  .chroma .kp {
+    color: #c6a0f6;
+  }
+  /* KeywordReserved */
+  .chroma .kr {
+    color: #c6a0f6;
+  }
+  /* KeywordType */
+  .chroma .kt {
+    color: #ed8796;
+  }
+  /* NameAttribute */
+  .chroma .na {
+    color: #8aadf4;
+  }
+  /* NameBuiltin */
+  .chroma .nb {
+    color: #91d7e3;
+  }
+  /* NameBuiltinPseudo */
+  .chroma .bp {
+    color: #91d7e3;
+  }
+  /* NameClass */
+  .chroma .nc {
+    color: #eed49f;
+  }
+  /* NameConstant */
+  .chroma .no {
+    color: #eed49f;
+  }
+  /* NameDecorator */
+  .chroma .nd {
+    color: #8aadf4;
+    font-weight: bold;
+  }
+  /* NameEntity */
+  .chroma .ni {
+    color: #8bd5ca;
+  }
+  /* NameException */
+  .chroma .ne {
+    color: #f5a97f;
+  }
+  /* NameFunction */
+  .chroma .nf {
+    color: #8aadf4;
+  }
+  /* NameFunctionMagic */
+  .chroma .fm {
+    color: #8aadf4;
+  }
+  /* NameLabel */
+  .chroma .nl {
+    color: #91d7e3;
+  }
+  /* NameNamespace */
+  .chroma .nn {
+    color: #f5a97f;
+  }
+  /* NameProperty */
+  .chroma .py {
+    color: #f5a97f;
+  }
+  /* NameTag */
+  .chroma .nt {
+    color: #c6a0f6;
+  }
+  /* NameVariable */
+  .chroma .nv {
+    color: #f4dbd6;
+  }
+  /* NameVariableClass */
+  .chroma .vc {
+    color: #f4dbd6;
+  }
+  /* NameVariableGlobal */
+  .chroma .vg {
+    color: #f4dbd6;
+  }
+  /* NameVariableInstance */
+  .chroma .vi {
+    color: #f4dbd6;
+  }
+  /* NameVariableMagic */
+  .chroma .vm {
+    color: #f4dbd6;
+  }
+  /* LiteralString */
+  .chroma .s {
+    color: #a6da95;
+  }
+  /* LiteralStringAffix */
+  .chroma .sa {
+    color: #ed8796;
+  }
+  /* LiteralStringBacktick */
+  .chroma .sb {
+    color: #a6da95;
+  }
+  /* LiteralStringChar */
+  .chroma .sc {
+    color: #a6da95;
+  }
+  /* LiteralStringDelimiter */
+  .chroma .dl {
+    color: #8aadf4;
+  }
+  /* LiteralStringDoc */
+  .chroma .sd {
+    color: #6e738d;
+  }
+  /* LiteralStringDouble */
+  .chroma .s2 {
+    color: #a6da95;
+  }
+  /* LiteralStringEscape */
+  .chroma .se {
+    color: #8aadf4;
+  }
+  /* LiteralStringHeredoc */
+  .chroma .sh {
+    color: #6e738d;
+  }
+  /* LiteralStringInterpol */
+  .chroma .si {
+    color: #a6da95;
+  }
+  /* LiteralStringOther */
+  .chroma .sx {
+    color: #a6da95;
+  }
+  /* LiteralStringRegex */
+  .chroma .sr {
+    color: #8bd5ca;
+  }
+  /* LiteralStringSingle */
+  .chroma .s1 {
+    color: #a6da95;
+  }
+  /* LiteralStringSymbol */
+  .chroma .ss {
+    color: #a6da95;
+  }
+  /* LiteralNumber */
+  .chroma .m {
+    color: #f5a97f;
+  }
+  /* LiteralNumberBin */
+  .chroma .mb {
+    color: #f5a97f;
+  }
+  /* LiteralNumberFloat */
+  .chroma .mf {
+    color: #f5a97f;
+  }
+  /* LiteralNumberHex */
+  .chroma .mh {
+    color: #f5a97f;
+  }
+  /* LiteralNumberInteger */
+  .chroma .mi {
+    color: #f5a97f;
+  }
+  /* LiteralNumberIntegerLong */
+  .chroma .il {
+    color: #f5a97f;
+  }
+  /* LiteralNumberOct */
+  .chroma .mo {
+    color: #f5a97f;
+  }
+  /* Operator */
+  .chroma .o {
+    color: #91d7e3;
+    font-weight: bold;
+  }
+  /* OperatorWord */
+  .chroma .ow {
+    color: #91d7e3;
+    font-weight: bold;
+  }
+  /* Comment */
+  .chroma .c {
+    color: #6e738d;
+    font-style: italic;
+  }
+  /* CommentHashbang */
+  .chroma .ch {
+    color: #6e738d;
+    font-style: italic;
+  }
+  /* CommentMultiline */
+  .chroma .cm {
+    color: #6e738d;
+    font-style: italic;
+  }
+  /* CommentSingle */
+  .chroma .c1 {
+    color: #6e738d;
+    font-style: italic;
+  }
+  /* CommentSpecial */
+  .chroma .cs {
+    color: #6e738d;
+    font-style: italic;
+  }
+  /* CommentPreproc */
+  .chroma .cp {
+    color: #6e738d;
+    font-style: italic;
+  }
+  /* CommentPreprocFile */
+  .chroma .cpf {
+    color: #6e738d;
+    font-weight: bold;
+    font-style: italic;
+  }
+  /* GenericDeleted */
+  .chroma .gd {
+    color: #ed8796;
+    background-color: oklch(44.4% 0.177 26.899 / 0.5);
+  }
+  /* GenericEmph */
+  .chroma .ge {
+    font-style: italic;
+  }
+  /* GenericError */
+  .chroma .gr {
+    color: #ed8796;
+  }
+  /* GenericHeading */
+  .chroma .gh {
+    color: #f5a97f;
+    font-weight: bold;
+  }
+  /* GenericInserted */
+  .chroma .gi {
+    color: #a6da95;
+    background-color: oklch(44.8% 0.119 151.328 / 0.5);
+  }
+  /* GenericStrong */
+  .chroma .gs {
+    font-weight: bold;
+  }
+  /* GenericSubheading */
+  .chroma .gu {
+    color: #f5a97f;
+    font-weight: bold;
+  }
+  /* GenericTraceback */
+  .chroma .gt {
+    color: #ed8796;
+  }
+  /* GenericUnderline */
+  .chroma .gl {
+    text-decoration: underline;
+  }
 }
 
 actor-typeahead {
-    --color-background: #ffffff;
-    --color-border: #d1d5db;
-    --color-shadow: #000000;
-    --color-hover: #f9fafb;
-    --color-avatar-fallback: #e5e7eb;
-    --radius: 0;
-    --padding-menu: 0rem;
-    z-index: 1000;
+  --color-background: #ffffff;
+  --color-border: #d1d5db;
+  --color-shadow: #000000;
+  --color-hover: #f9fafb;
+  --color-avatar-fallback: #e5e7eb;
+  --radius: 0;
+  --padding-menu: 0rem;
+  z-index: 1000;
 }
 
 actor-typeahead::part(handle) {
-    color: #111827;
+  color: #111827;
 }
 
 actor-typeahead::part(menu) {
-    box-shadow:
-        0 4px 6px -1px rgb(0 0 0 / 0.1),
-        0 2px 4px -2px rgb(0 0 0 / 0.1);
+  box-shadow:
+    0 4px 6px -1px rgb(0 0 0 / 0.1),
+    0 2px 4px -2px rgb(0 0 0 / 0.1);
 }
 
 @media (prefers-color-scheme: dark) {
-    actor-typeahead {
-        --color-background: #1f2937;
-        --color-border: #4b5563;
-        --color-shadow: #000000;
-        --color-hover: #374151;
-        --color-avatar-fallback: #4b5563;
-    }
+  actor-typeahead {
+    --color-background: #1f2937;
+    --color-border: #4b5563;
+    --color-shadow: #000000;
+    --color-hover: #374151;
+    --color-avatar-fallback: #4b5563;
+  }
 
-    actor-typeahead::part(handle) {
-        color: #f9fafb;
-    }
+  actor-typeahead::part(handle) {
+    color: #f9fafb;
+  }
 }
 
 @layer utilities {
@@ -1195,59 +1237,192 @@ actor-typeahead::part(menu) {
     background-color: rgba(34, 197, 94, 0.1);
   }
 
-  .hit-area-1 { --hit-area-t: -0.25rem; --hit-area-r: -0.25rem; --hit-area-b: -0.25rem; --hit-area-l: -0.25rem; }
-  .hit-area-2 { --hit-area-t: -0.5rem; --hit-area-r: -0.5rem; --hit-area-b: -0.5rem; --hit-area-l: -0.5rem; }
-  .hit-area-4 { --hit-area-t: -1rem; --hit-area-r: -1rem; --hit-area-b: -1rem; --hit-area-l: -1rem; }
-  .hit-area-6 { --hit-area-t: -1.5rem; --hit-area-r: -1.5rem; --hit-area-b: -1.5rem; --hit-area-l: -1.5rem; }
-  .hit-area-8 { --hit-area-t: -2rem; --hit-area-r: -2rem; --hit-area-b: -2rem; --hit-area-l: -2rem; }
-  .hit-area-10 { --hit-area-t: -2.5rem; --hit-area-r: -2.5rem; --hit-area-b: -2.5rem; --hit-area-l: -2.5rem; }
-  .hit-area-12 { --hit-area-t: -3rem; --hit-area-r: -3rem; --hit-area-b: -3rem; --hit-area-l: -3rem; }
-
-  .hit-area-l-1 { --hit-area-l: -0.25rem; }
-  .hit-area-l-2 { --hit-area-l: -0.5rem; }
-  .hit-area-l-4 { --hit-area-l: -1rem; }
-  .hit-area-l-6 { --hit-area-l: -1.5rem; }
-  .hit-area-l-8 { --hit-area-l: -2rem; }
-  .hit-area-l-10 { --hit-area-l: -2.5rem; }
-  .hit-area-l-12 { --hit-area-l: -3rem; }
-
-  .hit-area-r-1 { --hit-area-r: -0.25rem; }
-  .hit-area-r-2 { --hit-area-r: -0.5rem; }
-  .hit-area-r-4 { --hit-area-r: -1rem; }
-  .hit-area-r-6 { --hit-area-r: -1.5rem; }
-  .hit-area-r-8 { --hit-area-r: -2rem; }
-  .hit-area-r-10 { --hit-area-r: -2.5rem; }
-  .hit-area-r-12 { --hit-area-r: -3rem; }
-
-  .hit-area-t-1 { --hit-area-t: -0.25rem; }
-  .hit-area-t-2 { --hit-area-t: -0.5rem; }
-  .hit-area-t-4 { --hit-area-t: -1rem; }
-  .hit-area-t-6 { --hit-area-t: -1.5rem; }
-  .hit-area-t-8 { --hit-area-t: -2rem; }
-  .hit-area-t-10 { --hit-area-t: -2.5rem; }
-  .hit-area-t-12 { --hit-area-t: -3rem; }
-
-  .hit-area-b-1 { --hit-area-b: -0.25rem; }
-  .hit-area-b-2 { --hit-area-b: -0.5rem; }
-  .hit-area-b-4 { --hit-area-b: -1rem; }
-  .hit-area-b-6 { --hit-area-b: -1.5rem; }
-  .hit-area-b-8 { --hit-area-b: -2rem; }
-  .hit-area-b-10 { --hit-area-b: -2.5rem; }
-  .hit-area-b-12 { --hit-area-b: -3rem; }
-
-  .hit-area-x-1 { --hit-area-l: -0.25rem; --hit-area-r: -0.25rem; }
-  .hit-area-x-2 { --hit-area-l: -0.5rem; --hit-area-r: -0.5rem; }
-  .hit-area-x-4 { --hit-area-l: -1rem; --hit-area-r: -1rem; }
-  .hit-area-x-6 { --hit-area-l: -1.5rem; --hit-area-r: -1.5rem; }
-  .hit-area-x-8 { --hit-area-l: -2rem; --hit-area-r: -2rem; }
-  .hit-area-x-10 { --hit-area-l: -2.5rem; --hit-area-r: -2.5rem; }
-  .hit-area-x-12 { --hit-area-l: -3rem; --hit-area-r: -3rem; }
-
-  .hit-area-y-1 { --hit-area-t: -0.25rem; --hit-area-b: -0.25rem; }
-  .hit-area-y-2 { --hit-area-t: -0.5rem; --hit-area-b: -0.5rem; }
-  .hit-area-y-4 { --hit-area-t: -1rem; --hit-area-b: -1rem; }
-  .hit-area-y-6 { --hit-area-t: -1.5rem; --hit-area-b: -1.5rem; }
-  .hit-area-y-8 { --hit-area-t: -2rem; --hit-area-b: -2rem; }
-  .hit-area-y-10 { --hit-area-t: -2.5rem; --hit-area-b: -2.5rem; }
-  .hit-area-y-12 { --hit-area-t: -3rem; --hit-area-b: -3rem; }
+  .hit-area-1 {
+    --hit-area-t: -0.25rem;
+    --hit-area-r: -0.25rem;
+    --hit-area-b: -0.25rem;
+    --hit-area-l: -0.25rem;
+  }
+  .hit-area-2 {
+    --hit-area-t: -0.5rem;
+    --hit-area-r: -0.5rem;
+    --hit-area-b: -0.5rem;
+    --hit-area-l: -0.5rem;
+  }
+  .hit-area-4 {
+    --hit-area-t: -1rem;
+    --hit-area-r: -1rem;
+    --hit-area-b: -1rem;
+    --hit-area-l: -1rem;
+  }
+  .hit-area-6 {
+    --hit-area-t: -1.5rem;
+    --hit-area-r: -1.5rem;
+    --hit-area-b: -1.5rem;
+    --hit-area-l: -1.5rem;
+  }
+  .hit-area-8 {
+    --hit-area-t: -2rem;
+    --hit-area-r: -2rem;
+    --hit-area-b: -2rem;
+    --hit-area-l: -2rem;
+  }
+  .hit-area-10 {
+    --hit-area-t: -2.5rem;
+    --hit-area-r: -2.5rem;
+    --hit-area-b: -2.5rem;
+    --hit-area-l: -2.5rem;
+  }
+  .hit-area-12 {
+    --hit-area-t: -3rem;
+    --hit-area-r: -3rem;
+    --hit-area-b: -3rem;
+    --hit-area-l: -3rem;
+  }
+
+  .hit-area-l-1 {
+    --hit-area-l: -0.25rem;
+  }
+  .hit-area-l-2 {
+    --hit-area-l: -0.5rem;
+  }
+  .hit-area-l-4 {
+    --hit-area-l: -1rem;
+  }
+  .hit-area-l-6 {
+    --hit-area-l: -1.5rem;
+  }
+  .hit-area-l-8 {
+    --hit-area-l: -2rem;
+  }
+  .hit-area-l-10 {
+    --hit-area-l: -2.5rem;
+  }
+  .hit-area-l-12 {
+    --hit-area-l: -3rem;
+  }
+
+  .hit-area-r-1 {
+    --hit-area-r: -0.25rem;
+  }
+  .hit-area-r-2 {
+    --hit-area-r: -0.5rem;
+  }
+  .hit-area-r-4 {
+    --hit-area-r: -1rem;
+  }
+  .hit-area-r-6 {
+    --hit-area-r: -1.5rem;
+  }
+  .hit-area-r-8 {
+    --hit-area-r: -2rem;
+  }
+  .hit-area-r-10 {
+    --hit-area-r: -2.5rem;
+  }
+  .hit-area-r-12 {
+    --hit-area-r: -3rem;
+  }
+
+  .hit-area-t-1 {
+    --hit-area-t: -0.25rem;
+  }
+  .hit-area-t-2 {
+    --hit-area-t: -0.5rem;
+  }
+  .hit-area-t-4 {
+    --hit-area-t: -1rem;
+  }
+  .hit-area-t-6 {
+    --hit-area-t: -1.5rem;
+  }
+  .hit-area-t-8 {
+    --hit-area-t: -2rem;
+  }
+  .hit-area-t-10 {
+    --hit-area-t: -2.5rem;
+  }
+  .hit-area-t-12 {
+    --hit-area-t: -3rem;
+  }
+
+  .hit-area-b-1 {
+    --hit-area-b: -0.25rem;
+  }
+  .hit-area-b-2 {
+    --hit-area-b: -0.5rem;
+  }
+  .hit-area-b-4 {
+    --hit-area-b: -1rem;
+  }
+  .hit-area-b-6 {
+    --hit-area-b: -1.5rem;
+  }
+  .hit-area-b-8 {
+    --hit-area-b: -2rem;
+  }
+  .hit-area-b-10 {
+    --hit-area-b: -2.5rem;
+  }
+  .hit-area-b-12 {
+    --hit-area-b: -3rem;
+  }
+
+  .hit-area-x-1 {
+    --hit-area-l: -0.25rem;
+    --hit-area-r: -0.25rem;
+  }
+  .hit-area-x-2 {
+    --hit-area-l: -0.5rem;
+    --hit-area-r: -0.5rem;
+  }
+  .hit-area-x-4 {
+    --hit-area-l: -1rem;
+    --hit-area-r: -1rem;
+  }
+  .hit-area-x-6 {
+    --hit-area-l: -1.5rem;
+    --hit-area-r: -1.5rem;
+  }
+  .hit-area-x-8 {
+    --hit-area-l: -2rem;
+    --hit-area-r: -2rem;
+  }
+  .hit-area-x-10 {
+    --hit-area-l: -2.5rem;
+    --hit-area-r: -2.5rem;
+  }
+  .hit-area-x-12 {
+    --hit-area-l: -3rem;
+    --hit-area-r: -3rem;
+  }
+
+  .hit-area-y-1 {
+    --hit-area-t: -0.25rem;
+    --hit-area-b: -0.25rem;
+  }
+  .hit-area-y-2 {
+    --hit-area-t: -0.5rem;
+    --hit-area-b: -0.5rem;
+  }
+  .hit-area-y-4 {
+    --hit-area-t: -1rem;
+    --hit-area-b: -1rem;
+  }
+  .hit-area-y-6 {
+    --hit-area-t: -1.5rem;
+    --hit-area-b: -1.5rem;
+  }
+  .hit-area-y-8 {
+    --hit-area-t: -2rem;
+    --hit-area-b: -2rem;
+  }
+  .hit-area-y-10 {
+    --hit-area-t: -2.5rem;
+    --hit-area-b: -2.5rem;
+  }
+  .hit-area-y-12 {
+    --hit-area-t: -3rem;
+    --hit-area-b: -3rem;
+  }
 }
-- 
2.51.2