website: clean up liveline page, fix dark mode, add OG tags

- Remove 5 ChartPlaceholder stubs that were never replaced with real content
- Add OG meta tags (title, description, og:image 1280x800, twitter:card
  summary_large_image) for rich previews on X, Slack, Discord
- Rename PropsTable to ComparisonTable with configurable headers prop,
  fixing the hardcoded 'Prop/Type/Default' headers on comparison tables
- Remove stale Antigravity/Jetski comparison section
- Switch dark mode from .dark class toggle to prefers-color-scheme media
  query via Tailwind @custom-variant. Remove inline JS script from root.tsx,
  update all .dark selectors in liveline.css, liveline-prism.css to use
  @variant dark from globals.css so strategy is defined in one place
- Fix scrollbar colors: light gray on light backgrounds, subtle white on
  dark backgrounds (was using --color-muted which was invisible in both)
- Update remote access section with traforo link, VPN/firewall context,
  MCP env var docs, and more use cases from docs/remote-access.md

website/src/components/markdown.tsx

@@ -478,11 +478,13 @@ export function ChartPlaceholder({ height = 200, label }: { height?: number; lab
    Comparison table
    ========================================================================= */
 
-export function PropsTable({
+export function ComparisonTable({
   title,
+  headers,
   rows,
 }: {
   title?: string;
+  headers: [string, string, string];
   rows: Array<[string, string, string]>;
 }) {
   return (
@@ -511,7 +513,7 @@ export function PropsTable({
       >
         <thead>
           <tr>
-            {["Prop", "Type", "Default"].map((header) => {
+            {headers.map((header) => {
               return (
                 <th
                   key={header}
@@ -532,9 +534,9 @@ export function PropsTable({
           </tr>
         </thead>
         <tbody>
-          {rows.map(([prop, type, def]) => {
+          {rows.map(([feature, them, us]) => {
             return (
-              <tr key={prop}>
+              <tr key={feature}>
                 <td
                   style={{
                     padding: "4.8px 12px 4.8px 0",
@@ -546,7 +548,7 @@ export function PropsTable({
                     whiteSpace: "nowrap",
                   }}
                 >
-                  {prop}
+                  {feature}
                 </td>
                 <td
                   style={{
@@ -559,7 +561,7 @@ export function PropsTable({
                     whiteSpace: "nowrap",
                   }}
                 >
-                  {type}
+                  {them}
                 </td>
                 <td
                   style={{
@@ -571,7 +573,7 @@ export function PropsTable({
                     borderBottom: "1px solid var(--ll-border)",
                   }}
                 >
-                  {def}
+                  {us}
                 </td>
               </tr>
             );