liveline: match benji.org inline code style with ::before background pill

Inline code now uses a subtle rgba(0,0,0,0.04) background pill via a ::before
pseudo-element with absolute inset and 4px border-radius, matching
benji.org/liveline exactly. Dark mode uses rgba(255,255,255,0.08).
Moved styles from inline to CSS class .ll-inline-code.

website/src/routes/liveline.tsx

@@ -382,16 +382,7 @@ function CodeBlock({ children, lang = "jsx" }: { children: string; lang?: string
 
 function InlineCode({ children }: { children: React.ReactNode }) {
   return (
-    <code
+    <code className="ll-inline-code">
-      style={{
-        fontFamily: "var(--ll-font-code)",
-        fontSize: "12.25px",
-        fontWeight: 475,
-        lineHeight: "12.25px",
-        letterSpacing: "-0.09px",
-        padding: "0 4px",
-      }}
-    >
       {children}
     </code>
   );

website/src/styles/liveline.css

@@ -96,10 +96,9 @@
   --ll-fade-12: rgba(255, 255, 255, 0);
 }
 
-/* Dark mode overrides — uses @variant dark so it follows whatever
+/* Dark mode overrides — plain CSS, not processed by Tailwind.
-   strategy is configured in @custom-variant dark (globals.css) */
+   Uses .dark ancestor selector matching @custom-variant dark in globals.css */
-@variant dark {
+.dark .liveline-page {
-  .liveline-page {
   --ll-text-primary: rgba(255, 255, 255, 0.9);
   --ll-text-secondary: rgba(255, 255, 255, 0.45);
   --ll-text-tertiary: rgba(255, 255, 255, 0.25);
@@ -143,7 +142,6 @@
   --ll-fade-10: rgba(17, 17, 17, 0.008);
   --ll-fade-11: rgba(17, 17, 17, 0.002);
   --ll-fade-12: rgba(17, 17, 17, 0);
-  }
 }
 
 @supports (color: color(display-p3 1 1 1)) {
@@ -213,6 +211,41 @@
   }
 }
 
+/* ========================================================================
+   Inline code — subtle background pill via ::before pseudo-element.
+   Matches benji.org/liveline: position relative, ::before with absolute
+   inset creates a pill that extends slightly above/below the text.
+   ======================================================================== */
+
+.ll-inline-code {
+  position: relative;
+  display: inline-block;
+  font-family: var(--ll-font-code);
+  font-size: 12.6px;
+  font-weight: 460;
+  line-height: 12.6px;
+  letter-spacing: -0.09px;
+  padding: 1.6px 3.2px;
+  color: rgba(0, 0, 0, 0.75);
+}
+
+.ll-inline-code::before {
+  content: "";
+  position: absolute;
+  inset: -1.26px 0;
+  background: rgba(0, 0, 0, 0.04);
+  border-radius: 4px;
+  z-index: -1;
+}
+
+.dark .ll-inline-code {
+  color: rgba(255, 255, 255, 0.75);
+}
+
+.dark .ll-inline-code::before {
+  background: rgba(255, 255, 255, 0.08);
+}
+
 /* ========================================================================
    Header fade gradient
    ======================================================================== */