diff --git a/input.css b/input.css
index b520609..f079c59 100644
--- a/input.css
+++ b/input.css
@@ -66,12 +66,6 @@
         font-display: swap;
     }
 
-    h1 {
-        @apply text-2xl;
-        @apply text-black;
-        @apply font-bold;
-    }
-
     ::selection {
         @apply bg-yellow-400 text-black bg-opacity-30 dark:bg-yellow-600 dark:bg-opacity-50 dark:text-white;
     }
@@ -84,7 +78,6 @@
         @supports (font-variation-settings: normal) {
             html {
                 font-feature-settings:
-                    "ss01" 1,
                     "kern" 1,
                     "liga" 1,
                     "cv05" 1,
@@ -96,49 +89,877 @@
             @apply no-underline text-black hover:underline hover:text-gray-800 dark:text-white dark:hover:text-gray-300;
         }
 
-        img {
-            @apply border border-gray-200 rounded dark:border-gray-700;
-        }
-
-        img.icon {
-            @apply border-0 dark:brightness-100 dark:opacity-100;
-        }
-
         label {
-            @apply block mb-2 text-gray-900 text-sm font-bold py-2 uppercase dark:text-gray-100;
+            @apply block text-gray-900 text-sm font-bold py-2 uppercase dark:text-gray-100;
         }
         input {
-            @apply bg-white border border-gray-400 rounded-sm focus:ring-black p-3 dark:bg-gray-800 dark:border-gray-600 dark:text-white dark:focus:ring-gray-400;
+            @apply border border-gray-400 block rounded bg-gray-50 focus:ring-black p-3 dark:bg-gray-800 dark:border-gray-600 dark:text-white dark:focus:ring-gray-400;
         }
         textarea {
-            @apply bg-white border border-gray-400 rounded-sm focus:ring-black p-3 dark:bg-gray-800 dark:border-gray-600 dark:text-white dark:focus:ring-gray-400;
+            @apply border border-gray-400 block rounded bg-gray-50 focus:ring-black p-3 dark:bg-gray-800 dark:border-gray-600 dark:text-white dark:focus:ring-gray-400;
         }
         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-base
-            text-gray-900 before:absolute before:inset-0 before:-z-10
-            before:block before:rounded-sm before:border before:border-gray-200
-            before:bg-white before:drop-shadow-sm
-            before:content-[''] hover:before:border-gray-300
-            hover:before:bg-gray-50
-            hover:before:shadow-[0_2px_2px_0_rgba(20,20,96,0.1),inset_0_-2px_0_0_#f5f5f5]
-            focus:outline-none focus-visible:before:outline
-            focus-visible:before:outline-4 focus-visible:before:outline-gray-500
-            active:before:shadow-[inset_0_2px_2px_0_rgba(20,20,96,0.1)];
+            @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-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;
+        }
+
+        .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 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;
+        }
+
+        .prose input[type="checkbox"] {
+            @apply disabled:accent-blue-500 checked:accent-blue-500 disabled:checked:accent-blue-500;
+        }
+
+        /* 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;
+            @apply py-1 text-red-400 dark:text-red-300;
         }
         .success {
-            @apply py-1 text-black;
+            @apply py-1 text-gray-900 dark:text-gray-100;
         }
     }
+
+}
+
+/* Background */
+.bg {
+    color: #4c4f69;
+    background-color: #eff1f5;
+}
+/* PreWrapper */
+.chroma {
+    color: #4c4f69;
+}
+/* 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 {
+    @apply bg-amber-400/30 dark:bg-amber-500/20;
+}
+
+/* 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;
+    }
+    /* 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.0;
+  --padding-menu: 0.0rem;
+  z-index: 1000;
+}
+
+actor-typeahead::part(handle) {
+  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);
+}
+
+@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::part(handle) {
+    color: #f9fafb;
+  }
 }