diff --git a/appview/pages/templates/repo/branches.html b/appview/pages/templates/repo/branches.html
index bf03af60..bffd9631 100644
--- a/appview/pages/templates/repo/branches.html
+++ b/appview/pages/templates/repo/branches.html
@@ -3,54 +3,99 @@
 {{ end }}
 
 {{ define "repoContent" }}
-  <section>
-    <header class="font-bold text-sm mb-4 uppercase dark:text-white">
-        Branches
-    </header>
+<section id="branches-table" class="overflow-x-auto">
+  <h2 class="font-bold text-sm mb-4 uppercase dark:text-white">
+      Branches
+  </h2>
 
-    <div class="overflow-x-auto">
-      <table class="min-w-full table-auto">
-        <tbody>
-          {{ range .Branches }}
-          <tr>
-            <td class="whitespace-nowrap">
-              <a href="/{{ $.RepoInfo.FullName }}/tree/{{ .Name | urlquery }}" class="no-underline hover:underline flex items-center gap-2">
-                <span>
-                  {{ .Name }}
-                </span>
-                {{ if .IsDefault }}
-                  <span class="
-                    text-sm rounded
-                    bg-gray-100 dark:bg-gray-700 text-black dark:text-white
-                    font-mono
-                    px-2 mx-1/2
-                    inline-flex items-center
-                    ">
-                    default
-                  </span>
-                {{ end }}
-              </a>
-            </td>
-            <td class="whitespace-nowrap hidden md:table-cell">
-              {{ if .Commit }}
-              <a href="/{{ $.RepoInfo.FullName }}/commits/{{ .Name | urlquery }}" class="font-mono">{{ slice  .Commit.Hash.String 0 8 }}</a>
-              {{ end }}
-            </td>
-            <td class="whitespace-nowrap hidden md:table-cell">
-              {{ if .Commit }}
-                {{ $messageParts := splitN .Commit.Message "\n\n" 2 }}
-                {{ index $messageParts 0 }}
-              {{ end }}
-            </td>
-            <td class="whitespace-nowrap">
-              {{ if .Commit }}
-                {{ .Commit.Author.When | timeFmt  }}
-              {{ end }}
-            </td>
-          </tr>
+  <!-- desktop view (hidden on small screens) -->
+  <table class="w-full border-collapse hidden md:table">
+    <thead>
+      <tr>
+        <th class="py-2 text-sm text-left text-gray-700 dark:text-gray-300 uppercase font-bold">Name</th>
+        <th class="py-2 text-sm text-left text-gray-700 dark:text-gray-300 uppercase font-bold">Commit</th>
+        <th class="py-2 text-sm text-left text-gray-700 dark:text-gray-300 uppercase font-bold">Message</th>
+        <th class="py-2 text-sm text-left text-gray-700 dark:text-gray-300 uppercase font-bold">Date</th>
+      </tr>
+    </thead>
+    <tbody>
+      {{ range $index, $branch := .Branches }}
+      <tr class="{{ if ne $index (sub (len $.Branches) 1) }}border-b border-gray-200 dark:border-gray-700{{ end }}">
+        <td class="py-3 whitespace-nowrap">
+          <a href="/{{ $.RepoInfo.FullName }}/tree/{{ .Name | urlquery }}" class="no-underline hover:underline flex items-center gap-2">
+            <span class="dark:text-white">
+              {{ .Name }}
+            </span>
+            {{ if .IsDefault }}
+              <span class="
+                text-sm rounded
+                bg-gray-100 dark:bg-gray-700 text-black dark:text-white
+                font-mono
+                px-2 mx-1/2
+                inline-flex items-center
+                ">
+                default
+              </span>
+            {{ end }}
+          </a>
+        </td>
+        <td class="py-3 whitespace-nowrap">
+          {{ if .Commit }}
+            <a href="/{{ $.RepoInfo.FullName }}/commits/{{ .Name | urlquery }}" class="font-mono text-gray-700 dark:text-gray-300 no-underline hover:underline">{{ slice .Commit.Hash.String 0 8 }}</a>
           {{ end }}
-        </tbody>
-      </table>
+        </td>
+        <td class="py-3 whitespace-nowrap">
+          {{ if .Commit }}
+            {{ $messageParts := splitN .Commit.Message "\n\n" 2 }}
+            <span class="text-gray-700 dark:text-gray-300">{{ index $messageParts 0 }}</span>
+          {{ end }}
+        </td>
+        <td class="py-3 whitespace-nowrap text-gray-500 dark:text-gray-400">
+          {{ if .Commit }}
+            {{ .Commit.Author.When | timeFmt }}
+          {{ end }}
+        </td>
+      </tr>
+      {{ end }}
+    </tbody>
+  </table>
+
+  <!-- mobile view (visible only on small screens) -->
+  <div class="md:hidden">
+    {{ range $index, $branch := .Branches }}
+    <div class="relative p-2 {{ if ne $index (sub (len $.Branches) 1) }}border-b border-gray-200 dark:border-gray-700{{ end }}">
+      <div class="flex items-center justify-between">
+        <a href="/{{ $.RepoInfo.FullName }}/tree/{{ .Name | urlquery }}" class="no-underline hover:underline flex items-center gap-2">
+          <span class="dark:text-white font-medium">
+            {{ .Name }}
+          </span>
+          {{ if .IsDefault }}
+            <span class="
+              text-xs rounded
+              bg-gray-100 dark:bg-gray-700 text-black dark:text-white
+              font-mono
+              px-2
+              inline-flex items-center
+              ">
+              default
+            </span>
+          {{ end }}
+        </a>
+      </div>
+
+      {{ if .Commit }}
+      <div class="text-xs text-gray-500 dark:text-gray-400 mt-1 flex items-center">
+        <span class="font-mono">
+          <a href="/{{ $.RepoInfo.FullName }}/commits/{{ .Name | urlquery }}" class="text-gray-500 dark:text-gray-400 no-underline hover:underline">
+            {{ slice .Commit.Hash.String 0 8 }}
+          </a>
+        </span>
+        <div class="inline-block px-1 select-none after:content-['·']"></div>
+        <span>{{ .Commit.Author.When | timeFmt }}</span>
+      </div>
+      {{ end }}
     </div>
-  </section>
+    {{ end }}
+  </div>
+</section>
 {{ end }}
diff --git a/appview/pages/templates/repo/log.html b/appview/pages/templates/repo/log.html
index d6ae3627..a80beefe 100644
--- a/appview/pages/templates/repo/log.html
+++ b/appview/pages/templates/repo/log.html
@@ -2,21 +2,25 @@
 
 {{ define "repoContent" }}
 <section id="commit-table" class="overflow-x-auto">
+    <h2 class="font-bold text-sm mb-4 uppercase dark:text-white">
+       commits 
+    </h2>
+
     <!-- desktop view (hidden on small screens) -->
     <table class="w-full border-collapse hidden md:table">
         <thead>
             <tr>
-                <th class="px-4 py-2 text-sm text-left text-gray-700 dark:text-gray-300 uppercase font-bold">Author</th>
-                <th class="px-4 py-2 text-sm text-left text-gray-700 dark:text-gray-300 uppercase font-bold">Commit</th>
-                <th class="px-4 py-2 text-sm text-left text-gray-700 dark:text-gray-300 uppercase font-bold">Message</th>
-                <th class="px-4 py-2 text-sm text-left text-gray-700 dark:text-gray-300 uppercase font-bold">Date</th>
+                <th class="py-2 text-sm text-left text-gray-700 dark:text-gray-300 uppercase font-bold">Author</th>
+                <th class="py-2 text-sm text-left text-gray-700 dark:text-gray-300 uppercase font-bold">Commit</th>
+                <th class="py-2 text-sm text-left text-gray-700 dark:text-gray-300 uppercase font-bold">Message</th>
+                <th class="py-2 text-sm text-left text-gray-700 dark:text-gray-300 uppercase font-bold">Date</th>
             </tr>
         </thead>
         <tbody>
             {{ range $index, $commit := .Commits }}
                 {{ $messageParts := splitN $commit.Message "\n\n" 2 }}
-                <tr class="border-b border-gray-200 dark:border-gray-700">
-                    <td class="px-4 py-3 align-top">
+                <tr class="{{ if ne $index (sub (len $.Commits) 1) }}border-b border-gray-200 dark:border-gray-700{{ end }}">
+                    <td class=" py-3 align-top">
                         {{ $didOrHandle := index $.EmailToDidOrHandle $commit.Author.Email }}
                         {{ if $didOrHandle }}
                             <a href="/{{ $didOrHandle }}" class="text-gray-700 dark:text-gray-300 no-underline hover:underline">{{ $didOrHandle }}</a>
@@ -24,7 +28,7 @@
                             <a href="mailto:{{ $commit.Author.Email }}" class="text-gray-700 dark:text-gray-300 no-underline hover:underline">{{ $commit.Author.Name }}</a>
                         {{ end }}
                     </td>
-                    <td class="px-4 py-3 align-top font-mono flex items-end">
+                    <td class=" py-3 align-top font-mono flex items-end">
                         <a href="/{{ $.RepoInfo.FullName }}/commit/{{ $commit.Hash.String }}" class="text-gray-700 dark:text-gray-300 no-underline hover:underline">{{ slice $commit.Hash.String 0 8 }}</a>
                         <div class="inline-flex">
                             <button class="p-1 mx-1 hover:bg-gray-100 dark:hover:bg-gray-700 rounded" 
@@ -37,7 +41,7 @@
                             </a>
                         </div>
                     </td>
-                    <td class="px-4 py-3 align-top">
+                    <td class=" py-3 align-top">
                       <div>
                           <a href="/{{ $.RepoInfo.FullName }}/commit/{{ $commit.Hash.String }}" class="dark:text-white no-underline hover:underline">{{ index $messageParts 0 }}</a>
                           {{ if gt (len $messageParts) 1 }} 
@@ -46,7 +50,7 @@
                           {{ end }}
                       </div>
                     </td>
-                    <td class="px-4 py-3 align-top text-gray-500 dark:text-gray-400">{{ timeFmt $commit.Author.When }}</td>
+                    <td class=" py-3 align-top text-gray-500 dark:text-gray-400">{{ timeFmt $commit.Author.When }}</td>
                 </tr>
             {{ end }}
         </tbody>
@@ -54,9 +58,8 @@
 
     <!-- mobile view (visible only on small screens) -->
     <div class="md:hidden">
-        <h2 class="p-2 text-sm text-left text-gray-700 dark:text-gray-300 uppercase font-bold">commits</h2>
-        {{ range $commit := .Commits }}
-            <div class="relative p-2 border-b border-gray-200 dark:border-gray-700">
+        {{ range $index, $commit := .Commits }}
+            <div class="relative p-2 {{ if ne $index (sub (len $.Commits) 1) }}border-b border-gray-200 dark:border-gray-700{{ end }}">
                 <div id="commit-message">
                     {{ $messageParts := splitN $commit.Message "\n\n" 2 }}
                     <div class="text-base cursor-pointer">
diff --git a/appview/pages/templates/repo/tags.html b/appview/pages/templates/repo/tags.html
index 484be64f..0b070c04 100644
--- a/appview/pages/templates/repo/tags.html
+++ b/appview/pages/templates/repo/tags.html
@@ -4,6 +4,7 @@
 
 {{ define "repoContent" }}
   <section>
+    <h2 class="mb-4 text-sm text-left text-gray-700 dark:text-gray-300 uppercase font-bold">tags</h2>
     <div class="flex flex-col py-2 gap-12 md:gap-0">
       {{ range .Tags }}
       <div class="md:grid md:grid-cols-12 md:items-start flex flex-col">
diff --git a/input.css b/input.css
index c60cb9aa..b45afd97 100644
--- a/input.css
+++ b/input.css
@@ -96,160 +96,680 @@
     }
 }
 
-/* Background */ .bg { color: #4c4f69; background-color: #eff1f5; }
-/* PreWrapper */ .chroma { color: #4c4f69; background-color: #eff1f5; }
-/* Error */ .chroma .err { color: #d20f39 }
-/* 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: #bcc0cc }
-/* 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 }
-/* 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 }
-/* Line */ .chroma .line { display: flex; }
-/* Keyword */ .chroma .k { color: #8839ef }
-/* KeywordConstant */ .chroma .kc { color: #fe640b }
-/* KeywordDeclaration */ .chroma .kd { color: #d20f39 }
-/* KeywordNamespace */ .chroma .kn { color: #179299 }
-/* KeywordPseudo */ .chroma .kp { color: #8839ef }
-/* KeywordReserved */ .chroma .kr { color: #8839ef }
-/* KeywordType */ .chroma .kt { color: #d20f39 }
-/* NameAttribute */ .chroma .na { color: #1e66f5 }
-/* NameBuiltin */ .chroma .nb { color: #04a5e5 }
-/* NameBuiltinPseudo */ .chroma .bp { color: #04a5e5 }
-/* NameClass */ .chroma .nc { color: #df8e1d }
-/* NameConstant */ .chroma .no { color: #df8e1d }
-/* NameDecorator */ .chroma .nd { color: #1e66f5; font-weight: bold }
-/* NameEntity */ .chroma .ni { color: #179299 }
-/* NameException */ .chroma .ne { color: #fe640b }
-/* NameFunction */ .chroma .nf { color: #1e66f5 }
-/* NameFunctionMagic */ .chroma .fm { color: #1e66f5 }
-/* NameLabel */ .chroma .nl { color: #04a5e5 }
-/* NameNamespace */ .chroma .nn { color: #fe640b }
-/* NameProperty */ .chroma .py { color: #fe640b }
-/* NameTag */ .chroma .nt { color: #8839ef }
-/* NameVariable */ .chroma .nv { color: #dc8a78 }
-/* NameVariableClass */ .chroma .vc { color: #dc8a78 }
-/* NameVariableGlobal */ .chroma .vg { color: #dc8a78 }
-/* NameVariableInstance */ .chroma .vi { color: #dc8a78 }
-/* NameVariableMagic */ .chroma .vm { color: #dc8a78 }
-/* LiteralString */ .chroma .s { color: #40a02b }
-/* LiteralStringAffix */ .chroma .sa { color: #d20f39 }
-/* LiteralStringBacktick */ .chroma .sb { color: #40a02b }
-/* LiteralStringChar */ .chroma .sc { color: #40a02b }
-/* LiteralStringDelimiter */ .chroma .dl { color: #1e66f5 }
-/* LiteralStringDoc */ .chroma .sd { color: #9ca0b0 }
-/* LiteralStringDouble */ .chroma .s2 { color: #40a02b }
-/* LiteralStringEscape */ .chroma .se { color: #1e66f5 }
-/* LiteralStringHeredoc */ .chroma .sh { color: #9ca0b0 }
-/* LiteralStringInterpol */ .chroma .si { color: #40a02b }
-/* LiteralStringOther */ .chroma .sx { color: #40a02b }
-/* LiteralStringRegex */ .chroma .sr { color: #179299 }
-/* LiteralStringSingle */ .chroma .s1 { color: #40a02b }
-/* LiteralStringSymbol */ .chroma .ss { color: #40a02b }
-/* LiteralNumber */ .chroma .m { color: #fe640b }
-/* LiteralNumberBin */ .chroma .mb { color: #fe640b }
-/* LiteralNumberFloat */ .chroma .mf { color: #fe640b }
-/* LiteralNumberHex */ .chroma .mh { color: #fe640b }
-/* LiteralNumberInteger */ .chroma .mi { color: #fe640b }
-/* LiteralNumberIntegerLong */ .chroma .il { color: #fe640b }
-/* LiteralNumberOct */ .chroma .mo { color: #fe640b }
-/* Operator */ .chroma .o { color: #04a5e5; font-weight: bold }
-/* OperatorWord */ .chroma .ow { color: #04a5e5; font-weight: bold }
-/* Comment */ .chroma .c { color: #9ca0b0; font-style: italic }
-/* CommentHashbang */ .chroma .ch { color: #9ca0b0; font-style: italic }
-/* CommentMultiline */ .chroma .cm { color: #9ca0b0; font-style: italic }
-/* CommentSingle */ .chroma .c1 { color: #9ca0b0; font-style: italic }
-/* CommentSpecial */ .chroma .cs { color: #9ca0b0; font-style: italic }
-/* CommentPreproc */ .chroma .cp { color: #9ca0b0; font-style: italic }
-/* CommentPreprocFile */ .chroma .cpf { color: #9ca0b0; font-weight: bold; font-style: italic }
-/* GenericDeleted */ .chroma .gd { color: #d20f39; background-color: oklch(93.6% 0.032 17.717) }
-/* GenericEmph */ .chroma .ge { font-style: italic }
-/* GenericError */ .chroma .gr { color: #d20f39 }
-/* GenericHeading */ .chroma .gh { color: #fe640b; font-weight: bold }
-/* GenericInserted */ .chroma .gi { color: #40a02b; background-color: oklch(96.2% 0.044 156.743) }
-/* GenericStrong */ .chroma .gs { font-weight: bold }
-/* GenericSubheading */ .chroma .gu { color: #fe640b; font-weight: bold }
-/* GenericTraceback */ .chroma .gt { color: #d20f39 }
-/* GenericUnderline */ .chroma .gl { text-decoration: underline }
+/* Background */
+.bg {
+    color: #4c4f69;
+    background-color: #eff1f5;
+}
+/* PreWrapper */
+.chroma {
+    color: #4c4f69;
+    background-color: #eff1f5;
+}
+/* Error */
+.chroma .err {
+    color: #d20f39;
+}
+/* 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: #bcc0cc;
+}
+/* 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;
+}
+/* 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;
+}
+/* Line */
+.chroma .line {
+    display: flex;
+}
+/* Keyword */
+.chroma .k {
+    color: #8839ef;
+}
+/* KeywordConstant */
+.chroma .kc {
+    color: #fe640b;
+}
+/* KeywordDeclaration */
+.chroma .kd {
+    color: #d20f39;
+}
+/* KeywordNamespace */
+.chroma .kn {
+    color: #179299;
+}
+/* KeywordPseudo */
+.chroma .kp {
+    color: #8839ef;
+}
+/* KeywordReserved */
+.chroma .kr {
+    color: #8839ef;
+}
+/* KeywordType */
+.chroma .kt {
+    color: #d20f39;
+}
+/* NameAttribute */
+.chroma .na {
+    color: #1e66f5;
+}
+/* NameBuiltin */
+.chroma .nb {
+    color: #04a5e5;
+}
+/* NameBuiltinPseudo */
+.chroma .bp {
+    color: #04a5e5;
+}
+/* NameClass */
+.chroma .nc {
+    color: #df8e1d;
+}
+/* NameConstant */
+.chroma .no {
+    color: #df8e1d;
+}
+/* NameDecorator */
+.chroma .nd {
+    color: #1e66f5;
+    font-weight: bold;
+}
+/* NameEntity */
+.chroma .ni {
+    color: #179299;
+}
+/* NameException */
+.chroma .ne {
+    color: #fe640b;
+}
+/* NameFunction */
+.chroma .nf {
+    color: #1e66f5;
+}
+/* NameFunctionMagic */
+.chroma .fm {
+    color: #1e66f5;
+}
+/* NameLabel */
+.chroma .nl {
+    color: #04a5e5;
+}
+/* NameNamespace */
+.chroma .nn {
+    color: #fe640b;
+}
+/* NameProperty */
+.chroma .py {
+    color: #fe640b;
+}
+/* NameTag */
+.chroma .nt {
+    color: #8839ef;
+}
+/* NameVariable */
+.chroma .nv {
+    color: #dc8a78;
+}
+/* NameVariableClass */
+.chroma .vc {
+    color: #dc8a78;
+}
+/* NameVariableGlobal */
+.chroma .vg {
+    color: #dc8a78;
+}
+/* NameVariableInstance */
+.chroma .vi {
+    color: #dc8a78;
+}
+/* NameVariableMagic */
+.chroma .vm {
+    color: #dc8a78;
+}
+/* LiteralString */
+.chroma .s {
+    color: #40a02b;
+}
+/* LiteralStringAffix */
+.chroma .sa {
+    color: #d20f39;
+}
+/* LiteralStringBacktick */
+.chroma .sb {
+    color: #40a02b;
+}
+/* LiteralStringChar */
+.chroma .sc {
+    color: #40a02b;
+}
+/* LiteralStringDelimiter */
+.chroma .dl {
+    color: #1e66f5;
+}
+/* LiteralStringDoc */
+.chroma .sd {
+    color: #9ca0b0;
+}
+/* LiteralStringDouble */
+.chroma .s2 {
+    color: #40a02b;
+}
+/* LiteralStringEscape */
+.chroma .se {
+    color: #1e66f5;
+}
+/* LiteralStringHeredoc */
+.chroma .sh {
+    color: #9ca0b0;
+}
+/* LiteralStringInterpol */
+.chroma .si {
+    color: #40a02b;
+}
+/* LiteralStringOther */
+.chroma .sx {
+    color: #40a02b;
+}
+/* LiteralStringRegex */
+.chroma .sr {
+    color: #179299;
+}
+/* LiteralStringSingle */
+.chroma .s1 {
+    color: #40a02b;
+}
+/* LiteralStringSymbol */
+.chroma .ss {
+    color: #40a02b;
+}
+/* LiteralNumber */
+.chroma .m {
+    color: #fe640b;
+}
+/* LiteralNumberBin */
+.chroma .mb {
+    color: #fe640b;
+}
+/* LiteralNumberFloat */
+.chroma .mf {
+    color: #fe640b;
+}
+/* LiteralNumberHex */
+.chroma .mh {
+    color: #fe640b;
+}
+/* LiteralNumberInteger */
+.chroma .mi {
+    color: #fe640b;
+}
+/* LiteralNumberIntegerLong */
+.chroma .il {
+    color: #fe640b;
+}
+/* LiteralNumberOct */
+.chroma .mo {
+    color: #fe640b;
+}
+/* Operator */
+.chroma .o {
+    color: #04a5e5;
+    font-weight: bold;
+}
+/* OperatorWord */
+.chroma .ow {
+    color: #04a5e5;
+    font-weight: bold;
+}
+/* Comment */
+.chroma .c {
+    color: #9ca0b0;
+    font-style: italic;
+}
+/* CommentHashbang */
+.chroma .ch {
+    color: #9ca0b0;
+    font-style: italic;
+}
+/* CommentMultiline */
+.chroma .cm {
+    color: #9ca0b0;
+    font-style: italic;
+}
+/* CommentSingle */
+.chroma .c1 {
+    color: #9ca0b0;
+    font-style: italic;
+}
+/* CommentSpecial */
+.chroma .cs {
+    color: #9ca0b0;
+    font-style: italic;
+}
+/* CommentPreproc */
+.chroma .cp {
+    color: #9ca0b0;
+    font-style: italic;
+}
+/* CommentPreprocFile */
+.chroma .cpf {
+    color: #9ca0b0;
+    font-weight: bold;
+    font-style: italic;
+}
+/* GenericDeleted */
+.chroma .gd {
+    color: #d20f39;
+    background-color: oklch(93.6% 0.032 17.717);
+}
+/* GenericEmph */
+.chroma .ge {
+    font-style: italic;
+}
+/* GenericError */
+.chroma .gr {
+    color: #d20f39;
+}
+/* GenericHeading */
+.chroma .gh {
+    color: #fe640b;
+    font-weight: bold;
+}
+/* GenericInserted */
+.chroma .gi {
+    color: #40a02b;
+    background-color: oklch(96.2% 0.044 156.743);
+}
+/* GenericStrong */
+.chroma .gs {
+    font-weight: bold;
+}
+/* GenericSubheading */
+.chroma .gu {
+    color: #fe640b;
+    font-weight: bold;
+}
+/* GenericTraceback */
+.chroma .gt {
+    color: #d20f39;
+}
+/* GenericUnderline */
+.chroma .gl {
+    text-decoration: underline;
+}
 
 @media (prefers-color-scheme: dark) {
-/* Background */ .bg { color: #cad3f5; background-color: #24273a; }
-/* PreWrapper */ .chroma { color: #cad3f5; background-color: #24273a; }
-/* 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;
+        background-color: #24273a;
+    }
+    /* 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;
+    }
 }
 
 .chroma .line:has(.ln:target) {
-  @apply bg-amber-400/30 dark:bg-amber-500/20
+    @apply bg-amber-400/30 dark:bg-amber-500/20;
 }