From acd63a92351f9241c88341f777a9b4f918c4fca4 Mon Sep 17 00:00:00 2001
From: "Tommy D. Rossi" <beats.by.morse@gmail.com>
Date: Fri, 20 Feb 2026 12:53:21 +0100
Subject: [PATCH] liveline: add Link component, OL, remove BackButton, dedent
 code blocks, spacing tweaks

- Add A (link) component with --ll-accent color, bright #58a6ff in dark mode
- Add OL (ordered list) component for numbered steps
- Remove BackButton from EditorialPage
- Use string-dedent for all CodeBlock strings, properly indented in source
- Getting started steps as OL with clickable Chrome Web Store link
- Star on GitHub link in intro paragraph
- Inline heading rule (flex + 1px line) replaces separate Divider
- Heading padding 24px top/bottom, article gap 32px
- Sidebar TOC item spacing increased to 5px
- Centered image captions
---
 website/src/components/markdown.tsx |  45 ++-
 website/src/routes/liveline.tsx     | 581 +++++++++++++++-------------
 website/src/styles/liveline.css     |   4 +
 3 files changed, 353 insertions(+), 277 deletions(-)

diff --git a/website/src/components/markdown.tsx b/website/src/components/markdown.tsx
index a3bffda..0014a03 100644
--- a/website/src/components/markdown.tsx
+++ b/website/src/components/markdown.tsx
@@ -114,7 +114,7 @@ export function TableOfContents({
                 fontWeight: 475,
                 lineHeight: "15.6px",
                 letterSpacing: "-0.04px",
-                padding: "3px 0",
+                padding: "5px 0",
                 color: defaultColor,
                 fontFamily: "var(--ll-font-primary)",
                 transition: "color 0.15s ease",
@@ -249,6 +249,29 @@ export function Caption({ children }: { children: React.ReactNode }) {
   );
 }
 
+export function A({ href, children }: { href: string; children: React.ReactNode }) {
+  return (
+    <a
+      href={href}
+      target="_blank"
+      rel="noopener noreferrer"
+      style={{
+        color: "var(--ll-accent, #0969da)",
+        fontWeight: 600,
+        textDecoration: "none",
+      }}
+      onMouseEnter={(e) => {
+        e.currentTarget.style.textDecoration = "underline";
+      }}
+      onMouseLeave={(e) => {
+        e.currentTarget.style.textDecoration = "none";
+      }}
+    >
+      {children}
+    </a>
+  );
+}
+
 export function Code({ children }: { children: React.ReactNode }) {
   return (
     <code className="ll-inline-code">
@@ -278,6 +301,25 @@ export function Section({ id, title, children }: { id: string; title: string; ch
   );
 }
 
+export function OL({ children }: { children: React.ReactNode }) {
+  return (
+    <ol
+      className="m-0 pl-5"
+      style={{
+        fontFamily: "var(--ll-font-primary)",
+        fontSize: "14px",
+        fontWeight: 475,
+        lineHeight: "20px",
+        letterSpacing: "-0.09px",
+        color: "var(--ll-text-primary)",
+        listStyleType: "decimal",
+      }}
+    >
+      {children}
+    </ol>
+  );
+}
+
 export function List({ children }: { children: React.ReactNode }) {
   return (
     <ul
@@ -564,7 +606,6 @@ export function EditorialPage({
         textRendering: "optimizeLegibility",
       }}
     >
-      <BackButton />
       <TableOfContents items={toc} logo={logo} />
 
       <div
diff --git a/website/src/routes/liveline.tsx b/website/src/routes/liveline.tsx
index aa634e4..63d7aad 100644
--- a/website/src/routes/liveline.tsx
+++ b/website/src/routes/liveline.tsx
@@ -4,11 +4,13 @@
  * Styles from liveline.css and liveline-prism.css.
  */
 
+import dedent from "string-dedent";
 import "website/src/styles/liveline.css";
 import "website/src/styles/liveline-prism.css";
 import {
   EditorialPage,
   P,
+  A,
   Code,
   Caption,
   CodeBlock,
@@ -16,6 +18,7 @@ import {
   Section,
   PropsTable,
   List,
+  OL,
   Li,
 } from "website/src/components/markdown";
 
@@ -40,7 +43,8 @@ export default function LivelinePage() {
       <P>
         Playwriter lets you control your Chrome browser with the full
         Playwright API. A Chrome extension, a local relay, and a CLI. No new
-        browser windows, no Chrome flags, no context bloat.
+        browser windows, no Chrome flags, no context bloat.{" "}
+        <A href="https://github.com/remorses/playwriter">Star on GitHub</A>.
       </P>
 
       <ChartPlaceholder height={300} label="demo" />
@@ -59,375 +63,402 @@ export default function LivelinePage() {
 
       <Section id="getting-started" title="Getting started">
 
-      <P>
-        Three steps. Extension, icon click, then you&apos;re automating.
-      </P>
+        <P>
+          Three steps. Extension, icon click, then you&apos;re automating.
+        </P>
 
-      <CodeBlock lang="bash">{`# 1. Install the Chrome extension
-#    https://chromewebstore.google.com/detail/playwriter-mcp/jfeammnjpkecdekppnclgkkffahnhfhe
+        <OL>
+          <Li>
+            Install the{" "}
+            <A href="https://chromewebstore.google.com/detail/playwriter-mcp/jfeammnjpkecdekppnclgkkffahnhfhe">Chrome extension</A>
+          </Li>
+          <Li>Click the extension icon on a tab — it turns green</Li>
+          <Li>Install CLI and run your first command:</Li>
+        </OL>
 
-# 2. Click the extension icon on a tab — it turns green
+        <CodeBlock lang="bash">{dedent`
+          npm i -g playwriter
+          playwriter -s 1 -e "await page.goto('https://example.com')"
+        `}</CodeBlock>
 
-# 3. Install CLI and run your first command
-npm i -g playwriter
-playwriter -s 1 -e "await page.goto('https://example.com')"`}</CodeBlock>
+        <P>
+          The extension connects your browser to a local WebSocket relay on{" "}
+          <Code>localhost:19988</Code>. The CLI sends Playwright
+          code through the relay. No remote servers, no accounts, nothing
+          leaves your machine.
+        </P>
 
-      <P>
-        The extension connects your browser to a local WebSocket relay on{" "}
-        <Code>localhost:19988</Code>. The CLI sends Playwright
-        code through the relay. No remote servers, no accounts, nothing
-        leaves your machine.
-      </P>
+        <CodeBlock lang="bash">{dedent`
+          playwriter session new              # new sandbox, outputs id (e.g. 1)
+          playwriter -s 1 -e "await page.goto('https://example.com')"
+          playwriter -s 1 -e "console.log(await snapshot({ page }))"
+          playwriter -s 1 -e "await page.locator('aria-ref=e5').click()"
+        `}</CodeBlock>
 
-      <CodeBlock lang="bash">{`playwriter session new              # new sandbox, outputs id (e.g. 1)
-playwriter -s 1 -e "await page.goto('https://example.com')"
-playwriter -s 1 -e "console.log(await snapshot({ page }))"
-playwriter -s 1 -e "await page.locator('aria-ref=e5').click()"`}</CodeBlock>
-
-      <ChartPlaceholder height={200} label="getting started" />
-      <Caption>
-        Extension icon green = connected. Gray = not attached to this tab.
-      </Caption>
+        <ChartPlaceholder height={200} label="getting started" />
+        <Caption>
+          Extension icon green = connected. Gray = not attached to this tab.
+        </Caption>
 
       </Section>
 
       <Section id="how-it-works" title="How it works">
 
-      <P>
-        The extension uses <Code>chrome.debugger</Code> to
-        attach to tabs where you clicked the icon. It opens a WebSocket
-        connection to a local relay server. The CLI (or MCP, or your own
-        Playwright script) connects to the same relay. CDP commands flow
-        through; the extension forwards them to Chrome and sends responses
-        back.
-      </P>
+        <P>
+          The extension uses <Code>chrome.debugger</Code> to
+          attach to tabs where you clicked the icon. It opens a WebSocket
+          connection to a local relay server. The CLI (or MCP, or your own
+          Playwright script) connects to the same relay. CDP commands flow
+          through; the extension forwards them to Chrome and sends responses
+          back.
+        </P>
 
-      <CodeBlock lang="bash">{`┌─────────────────────┐     ┌──────────────────────┐     ┌─────────────────┐
-│   BROWSER           │     │   LOCALHOST          │     │   CLIENT        │
-│                     │     │                      │     │                 │
-│  ┌───────────────┐  │     │ WebSocket Server     │     │  ┌───────────┐  │
-│  │   Extension   │<───────┬───>  :19988          │     │  │ CLI / MCP │  │
-│  └───────┬───────┘  │ WS  │                      │     │  └───────────┘  │
-│          │          │     │  /extension          │     │        │        │
-│    chrome.debugger  │     │       │              │     │        v        │
-│          v          │     │       v              │     │  ┌────────────┐ │
-│  ┌───────────────┐  │     │  /cdp/:id <───────────────>│  │ execute    │ │
-│  │ Tab 1 (green) │  │     └──────────────────────┘  WS │  └────────────┘ │
-│  │ Tab 2 (green) │  │                                  │        │        │
-│  │ Tab 3 (gray)  │  │     Tab 3 not controlled         │ Playwright API  │
-└─────────────────────┘     (extension not clicked)      └─────────────────┘`}</CodeBlock>
+        <CodeBlock lang="bash">{dedent`
+          ┌─────────────────────┐     ┌──────────────────────┐     ┌─────────────────┐
+          │   BROWSER           │     │   LOCALHOST          │     │   CLIENT        │
+          │                     │     │                      │     │                 │
+          │  ┌───────────────┐  │     │ WebSocket Server     │     │  ┌───────────┐  │
+          │  │   Extension   │<───────┬───>  :19988          │     │  │ CLI / MCP │  │
+          │  └───────┬───────┘  │ WS  │                      │     │  └───────────┘  │
+          │          │          │     │  /extension          │     │        │        │
+          │    chrome.debugger  │     │       │              │     │        v        │
+          │          v          │     │       v              │     │  ┌────────────┐ │
+          │  ┌───────────────┐  │     │  /cdp/:id <───────────────>│  │ execute    │ │
+          │  │ Tab 1 (green) │  │     └──────────────────────┘  WS │  └────────────┘ │
+          │  │ Tab 2 (green) │  │                                  │        │        │
+          │  │ Tab 3 (gray)  │  │     Tab 3 not controlled         │ Playwright API  │
+          └─────────────────────┘     (extension not clicked)      └─────────────────┘
+        `}</CodeBlock>
 
-      <P>
-        No Chrome restart required. No <Code>--remote-debugging-port</Code>{" "}
-        flags. The extension handles the CDP attachment transparently, and
-        the relay multiplexes sessions so multiple agents or CLI instances
-        can work with the same browser simultaneously.
-      </P>
+        <P>
+          No Chrome restart required. No <Code>--remote-debugging-port</Code>{" "}
+          flags. The extension handles the CDP attachment transparently, and
+          the relay multiplexes sessions so multiple agents or CLI instances
+          can work with the same browser simultaneously.
+        </P>
 
       </Section>
 
       <Section id="snapshots" title="Accessibility snapshots">
 
-      <P>
-        The core feedback loop is <strong>observe &rarr; act &rarr; observe</strong>.
-        Accessibility snapshots are the primary way to read page state. They return
-        the full interactive element tree as text, with Playwright locators attached
-        to every element.
-      </P>
+        <P>
+          The core feedback loop is <strong>observe &rarr; act &rarr; observe</strong>.
+          Accessibility snapshots are the primary way to read page state. They return
+          the full interactive element tree as text, with Playwright locators attached
+          to every element.
+        </P>
 
-      <CodeBlock lang="bash">{`playwriter -s 1 -e "await snapshot({ page })"
+        <CodeBlock lang="bash">{dedent`
+          playwriter -s 1 -e "await snapshot({ page })"
 
-# Output:
-# - banner:
-#     - link "Home" [id="nav-home"]
-#     - navigation:
-#         - link "Docs" [data-testid="docs-link"]
-#         - link "Blog" role=link[name="Blog"]`}</CodeBlock>
+          # Output:
+          # - banner:
+          #     - link "Home" [id="nav-home"]
+          #     - navigation:
+          #         - link "Docs" [data-testid="docs-link"]
+          #         - link "Blog" role=link[name="Blog"]
+        `}</CodeBlock>
 
-      <P>
-        Each line ends with a locator you can pass directly to{" "}
-        <Code>page.locator()</Code>. Subsequent calls return a
-        diff, so you only see what changed. Use{" "}
-        <Code>search</Code> to filter large pages.
-      </P>
+        <P>
+          Each line ends with a locator you can pass directly to{" "}
+          <Code>page.locator()</Code>. Subsequent calls return a
+          diff, so you only see what changed. Use{" "}
+          <Code>search</Code> to filter large pages.
+        </P>
 
-      <CodeBlock lang="bash">{`# Search for specific elements
-playwriter -s 1 -e "await snapshot({ page, search: /button|submit/i })"
+        <CodeBlock lang="bash">{dedent`
+          # Search for specific elements
+          playwriter -s 1 -e "await snapshot({ page, search: /button|submit/i })"
 
-# Always print URL first, then snapshot — pages can redirect
-playwriter -s 1 -e "console.log('URL:', page.url()); await snapshot({ page }).then(console.log)"`}</CodeBlock>
+          # Always print URL first, then snapshot — pages can redirect
+          playwriter -s 1 -e "console.log('URL:', page.url()); await snapshot({ page }).then(console.log)"
+        `}</CodeBlock>
 
-      <P>
-        Snapshots are text. They cost a fraction of what screenshots cost in
-        tokens. Use them as your primary debugging tool. Only reach for
-        screenshots when spatial layout matters &mdash; grids, dashboards, maps.
-      </P>
+        <P>
+          Snapshots are text. They cost a fraction of what screenshots cost in
+          tokens. Use them as your primary debugging tool. Only reach for
+          screenshots when spatial layout matters &mdash; grids, dashboards, maps.
+        </P>
 
-      <ChartPlaceholder height={200} label="snapshot" />
-      <Caption>
-        Accessibility tree as text. 5&ndash;20KB vs 100KB+ for screenshots.
-      </Caption>
+        <ChartPlaceholder height={200} label="snapshot" />
+        <Caption>
+          Accessibility tree as text. 5&ndash;20KB vs 100KB+ for screenshots.
+        </Caption>
 
       </Section>
 
       <Section id="visual-labels" title="Visual labels">
 
-      <P>
-        For pages where spatial layout matters,{" "}
-        <Code>screenshotWithAccessibilityLabels</Code> overlays
-        Vimium-style labels on every interactive element. Take a screenshot,
-        read the labels, click by reference.
-      </P>
+        <P>
+          For pages where spatial layout matters,{" "}
+          <Code>screenshotWithAccessibilityLabels</Code> overlays
+          Vimium-style labels on every interactive element. Take a screenshot,
+          read the labels, click by reference.
+        </P>
 
-      <CodeBlock lang="bash">{`playwriter -s 1 -e "await screenshotWithAccessibilityLabels({ page })"
-# Returns screenshot + accessibility snapshot with aria-ref selectors
+        <CodeBlock lang="bash">{dedent`
+          playwriter -s 1 -e "await screenshotWithAccessibilityLabels({ page })"
+          # Returns screenshot + accessibility snapshot with aria-ref selectors
 
-playwriter -s 1 -e "await page.locator('aria-ref=e5').click()"`}</CodeBlock>
+          playwriter -s 1 -e "await page.locator('aria-ref=e5').click()"
+        `}</CodeBlock>
 
-      <P>
-        Labels are color-coded by element type: yellow for links, orange for
-        buttons, coral for inputs, pink for checkboxes, peach for sliders,
-        salmon for menus, amber for tabs. The ref system is shared with{" "}
-        <Code>snapshot()</Code>, so you can switch between text
-        and visual modes freely.
-      </P>
+        <P>
+          Labels are color-coded by element type: yellow for links, orange for
+          buttons, coral for inputs, pink for checkboxes, peach for sliders,
+          salmon for menus, amber for tabs. The ref system is shared with{" "}
+          <Code>snapshot()</Code>, so you can switch between text
+          and visual modes freely.
+        </P>
 
-      <ChartPlaceholder height={260} label="visual labels" />
-      <Caption>
-        Vimium-style labels. Screenshot + snapshot in one call.
-      </Caption>
+        <ChartPlaceholder height={260} label="visual labels" />
+        <Caption>
+          Vimium-style labels. Screenshot + snapshot in one call.
+        </Caption>
 
       </Section>
 
       <Section id="sessions" title="Sessions">
 
-      <P>
-        Each session runs in an isolated sandbox with its own{" "}
-        <Code>state</Code> object. Variables, pages, listeners
-        persist between calls within a session. Different sessions get
-        different state. Browser tabs are shared.
-      </P>
+        <P>
+          Each session runs in an isolated sandbox with its own{" "}
+          <Code>state</Code> object. Variables, pages, listeners
+          persist between calls within a session. Different sessions get
+          different state. Browser tabs are shared.
+        </P>
 
-      <CodeBlock lang="bash">{`playwriter session new    # => 1
-playwriter session new    # => 2
-playwriter session list   # shows sessions + state keys
+        <CodeBlock lang="bash">{dedent`
+          playwriter session new    # => 1
+          playwriter session new    # => 2
+          playwriter session list   # shows sessions + state keys
 
-# Session 1 stores data
-playwriter -s 1 -e "state.users = await page.$$eval('.user', els => els.map(e => e.textContent))"
+          # Session 1 stores data
+          playwriter -s 1 -e "state.users = await page.$$eval('.user', els => els.map(e => e.textContent))"
 
-# Session 2 can't see it
-playwriter -s 2 -e "console.log(state.users)"  # undefined`}</CodeBlock>
+          # Session 2 can't see it
+          playwriter -s 2 -e "console.log(state.users)"  # undefined
+        `}</CodeBlock>
 
-      <P>
-        Create your own page to avoid interference from other agents. Reuse
-        an existing <Code>about:blank</Code> tab or create a
-        fresh one, and store it in <Code>state</Code>.
-      </P>
+        <P>
+          Create your own page to avoid interference from other agents. Reuse
+          an existing <Code>about:blank</Code> tab or create a
+          fresh one, and store it in <Code>state</Code>.
+        </P>
 
-      <CodeBlock lang="bash">{`playwriter -s 1 -e "state.myPage = context.pages().find(p => p.url() === 'about:blank') ?? await context.newPage(); await state.myPage.goto('https://example.com')"
+        <CodeBlock lang="bash">{dedent`
+          playwriter -s 1 -e "state.myPage = context.pages().find(p => p.url() === 'about:blank') ?? await context.newPage(); await state.myPage.goto('https://example.com')"
 
-# All subsequent calls use state.myPage
-playwriter -s 1 -e "console.log(await state.myPage.title())"`}</CodeBlock>
+          # All subsequent calls use state.myPage
+          playwriter -s 1 -e "console.log(await state.myPage.title())"
+        `}</CodeBlock>
 
       </Section>
 
       <Section id="debugger-and-editor" title="Debugger & editor">
 
-      <P>
-        Full Chrome DevTools Protocol access. Set breakpoints, step through
-        code, inspect variables at runtime. Live-edit page scripts and CSS
-        without reloading.
-      </P>
+        <P>
+          Full Chrome DevTools Protocol access. Set breakpoints, step through
+          code, inspect variables at runtime. Live-edit page scripts and CSS
+          without reloading.
+        </P>
 
-      <CodeBlock lang="bash">{`# Set breakpoints and debug
-playwriter -s 1 -e "state.cdp = await getCDPSession({ page }); state.dbg = createDebugger({ cdp: state.cdp }); await state.dbg.enable()"
-playwriter -s 1 -e "state.scripts = await state.dbg.listScripts({ search: 'app' }); console.log(state.scripts.map(s => s.url))"
-playwriter -s 1 -e "await state.dbg.setBreakpoint({ file: state.scripts[0].url, line: 42 })"
+        <CodeBlock lang="bash">{dedent`
+          # Set breakpoints and debug
+          playwriter -s 1 -e "state.cdp = await getCDPSession({ page }); state.dbg = createDebugger({ cdp: state.cdp }); await state.dbg.enable()"
+          playwriter -s 1 -e "state.scripts = await state.dbg.listScripts({ search: 'app' }); console.log(state.scripts.map(s => s.url))"
+          playwriter -s 1 -e "await state.dbg.setBreakpoint({ file: state.scripts[0].url, line: 42 })"
 
-# Live edit page code
-playwriter -s 1 -e "state.editor = createEditor({ cdp: state.cdp }); await state.editor.enable()"
-playwriter -s 1 -e "await state.editor.edit({ url: 'https://example.com/app.js', oldString: 'const DEBUG = false', newString: 'const DEBUG = true' })"`}</CodeBlock>
+          # Live edit page code
+          playwriter -s 1 -e "state.editor = createEditor({ cdp: state.cdp }); await state.editor.enable()"
+          playwriter -s 1 -e "await state.editor.edit({ url: 'https://example.com/app.js', oldString: 'const DEBUG = false', newString: 'const DEBUG = true' })"
+        `}</CodeBlock>
 
-      <P>
-        Edits are in-memory and persist until the page reloads. Useful for
-        toggling debug flags, patching broken code, or testing quick fixes
-        without touching source files. The editor also supports{" "}
-        <Code>grep</Code> across all loaded scripts.
-      </P>
+        <P>
+          Edits are in-memory and persist until the page reloads. Useful for
+          toggling debug flags, patching broken code, or testing quick fixes
+          without touching source files. The editor also supports{" "}
+          <Code>grep</Code> across all loaded scripts.
+        </P>
 
-      <ChartPlaceholder height={200} label="debugger" />
-      <Caption>
-        Breakpoints, stepping, variable inspection &mdash; from the CLI.
-      </Caption>
+        <ChartPlaceholder height={200} label="debugger" />
+        <Caption>
+          Breakpoints, stepping, variable inspection &mdash; from the CLI.
+        </Caption>
 
       </Section>
 
       <Section id="network-interception" title="Network interception">
 
-      <P>
-        Intercept requests and responses to reverse-engineer APIs, scrape
-        data, or debug network issues. Store captured data in{" "}
-        <Code>state</Code> and analyze across calls.
-      </P>
+        <P>
+          Intercept requests and responses to reverse-engineer APIs, scrape
+          data, or debug network issues. Store captured data in{" "}
+          <Code>state</Code> and analyze across calls.
+        </P>
 
-      <CodeBlock lang="bash">{`# Start intercepting
-playwriter -s 1 -e "state.responses = []; page.on('response', async res => { if (res.url().includes('/api/')) { try { state.responses.push({ url: res.url(), status: res.status(), body: await res.json() }); } catch {} } })"
+        <CodeBlock lang="bash">{dedent`
+          # Start intercepting
+          playwriter -s 1 -e "state.responses = []; page.on('response', async res => { if (res.url().includes('/api/')) { try { state.responses.push({ url: res.url(), status: res.status(), body: await res.json() }); } catch {} } })"
 
-# Trigger actions, then analyze
-playwriter -s 1 -e "await page.click('button.load-more')"
-playwriter -s 1 -e "console.log('Captured', state.responses.length, 'API calls'); state.responses.forEach(r => console.log(r.status, r.url.slice(0, 80)))"
+          # Trigger actions, then analyze
+          playwriter -s 1 -e "await page.click('button.load-more')"
+          playwriter -s 1 -e "console.log('Captured', state.responses.length, 'API calls'); state.responses.forEach(r => console.log(r.status, r.url.slice(0, 80)))"
 
-# Replay an API call directly
-playwriter -s 1 -e "const data = await page.evaluate(async (url) => { const res = await fetch(url); return res.json(); }, state.responses[0].url); console.log(data)"`}</CodeBlock>
+          # Replay an API call directly
+          playwriter -s 1 -e "const data = await page.evaluate(async (url) => { const res = await fetch(url); return res.json(); }, state.responses[0].url); console.log(data)"
+        `}</CodeBlock>
 
-      <P>
-        This is faster than scrolling through DOM. Capture the real API
-        calls, inspect their schemas, and replay them with different
-        parameters. Works for pagination, authenticated endpoints, and
-        anything behind JavaScript rendering.
-      </P>
+        <P>
+          This is faster than scrolling through DOM. Capture the real API
+          calls, inspect their schemas, and replay them with different
+          parameters. Works for pagination, authenticated endpoints, and
+          anything behind JavaScript rendering.
+        </P>
 
       </Section>
 
       <Section id="screen-recording" title="Screen recording">
 
-      <P>
-        Record the active tab as video using{" "}
-        <Code>chrome.tabCapture</Code>. The recording runs in
-        the extension context, so it survives page navigation. Video is saved
-        as MP4.
-      </P>
+        <P>
+          Record the active tab as video using{" "}
+          <Code>chrome.tabCapture</Code>. The recording runs in
+          the extension context, so it survives page navigation. Video is saved
+          as MP4.
+        </P>
 
-      <CodeBlock lang="bash">{`# Start recording
-playwriter -s 1 -e "await startRecording({ page, outputPath: './recording.mp4', frameRate: 30 })"
+        <CodeBlock lang="bash">{dedent`
+          # Start recording
+          playwriter -s 1 -e "await startRecording({ page, outputPath: './recording.mp4', frameRate: 30 })"
 
-# Navigate, interact — recording continues
-playwriter -s 1 -e "await page.click('a'); await page.waitForLoadState('domcontentloaded')"
-playwriter -s 1 -e "await page.goBack()"
+          # Navigate, interact — recording continues
+          playwriter -s 1 -e "await page.click('a'); await page.waitForLoadState('domcontentloaded')"
+          playwriter -s 1 -e "await page.goBack()"
 
-# Stop and save
-playwriter -s 1 -e "const { path, duration, size } = await stopRecording({ page }); console.log(path, duration + 'ms', size + ' bytes')"`}</CodeBlock>
+          # Stop and save
+          playwriter -s 1 -e "const { path, duration, size } = await stopRecording({ page }); console.log(path, duration + 'ms', size + ' bytes')"
+        `}</CodeBlock>
 
-      <P>
-        Unlike <Code>getDisplayMedia</Code>, this approach
-        persists across navigations because the extension holds the{" "}
-        <Code>MediaRecorder</Code>, not the page. You can also
-        check recording status with <Code>isRecording</Code> or
-        cancel without saving with <Code>cancelRecording</Code>.
-      </P>
+        <P>
+          Unlike <Code>getDisplayMedia</Code>, this approach
+          persists across navigations because the extension holds the{" "}
+          <Code>MediaRecorder</Code>, not the page. You can also
+          check recording status with <Code>isRecording</Code> or
+          cancel without saving with <Code>cancelRecording</Code>.
+        </P>
 
-      <ChartPlaceholder height={200} label="recording" />
-      <Caption>
-        Native tab capture. 30&ndash;60fps. Survives navigation.
-      </Caption>
+        <ChartPlaceholder height={200} label="recording" />
+        <Caption>
+          Native tab capture. 30&ndash;60fps. Survives navigation.
+        </Caption>
 
       </Section>
 
       <Section id="comparison" title="Comparison">
 
-      <P>
-        How Playwriter compares to other browser automation approaches.
-      </P>
+        <P>
+          How Playwriter compares to other browser automation approaches.
+        </P>
 
-      <PropsTable
-        title="vs Playwright MCP"
-        rows={[
-          ["Browser", "Spawns new Chrome", "Uses your Chrome"],
-          ["Extensions", "None", "Your existing ones"],
-          ["Login state", "Fresh", "Already logged in"],
-          ["Bot detection", "Always detected", "Can bypass"],
-          ["Collaboration", "Separate window", "Same browser as user"],
-        ]}
-      />
+        <PropsTable
+          title="vs Playwright MCP"
+          rows={[
+            ["Browser", "Spawns new Chrome", "Uses your Chrome"],
+            ["Extensions", "None", "Your existing ones"],
+            ["Login state", "Fresh", "Already logged in"],
+            ["Bot detection", "Always detected", "Can bypass"],
+            ["Collaboration", "Separate window", "Same browser as user"],
+          ]}
+        />
 
-      <PropsTable
-        title="vs BrowserMCP"
-        rows={[
-          ["Tools", "12+ dedicated tools", "1 execute tool"],
-          ["API", "Limited actions", "Full Playwright"],
-          ["Context usage", "High (tool schemas)", "Low"],
-          ["LLM knowledge", "Must learn tools", "Already knows Playwright"],
-        ]}
-      />
+        <PropsTable
+          title="vs BrowserMCP"
+          rows={[
+            ["Tools", "12+ dedicated tools", "1 execute tool"],
+            ["API", "Limited actions", "Full Playwright"],
+            ["Context usage", "High (tool schemas)", "Low"],
+            ["LLM knowledge", "Must learn tools", "Already knows Playwright"],
+          ]}
+        />
 
-      <PropsTable
-        title="vs Antigravity (Jetski)"
-        rows={[
-          ["Tools", "17+ tools", "1 tool"],
-          ["Subagent", "Spawns for each task", "Direct execution"],
-          ["Latency", "High (agent overhead)", "Low"],
-        ]}
-      />
+        <PropsTable
+          title="vs Antigravity (Jetski)"
+          rows={[
+            ["Tools", "17+ tools", "1 tool"],
+            ["Subagent", "Spawns for each task", "Direct execution"],
+            ["Latency", "High (agent overhead)", "Low"],
+          ]}
+        />
 
-      <PropsTable
-        title="vs Claude Browser Extension"
-        rows={[
-          ["Agent support", "Claude only", "Any MCP client"],
-          ["Windows WSL", "No", "Yes"],
-          ["Context method", "Screenshots (100KB+)", "A11y snapshots (5\u201320KB)"],
-          ["Playwright API", "No", "Full"],
-          ["Debugger", "No", "Yes"],
-          ["Live code editing", "No", "Yes"],
-          ["Network interception", "Limited", "Full"],
-          ["Raw CDP access", "No", "Yes"],
-        ]}
-      />
+        <PropsTable
+          title="vs Claude Browser Extension"
+          rows={[
+            ["Agent support", "Claude only", "Any MCP client"],
+            ["Windows WSL", "No", "Yes"],
+            ["Context method", "Screenshots (100KB+)", "A11y snapshots (5\u201320KB)"],
+            ["Playwright API", "No", "Full"],
+            ["Debugger", "No", "Yes"],
+            ["Live code editing", "No", "Yes"],
+            ["Network interception", "Limited", "Full"],
+            ["Raw CDP access", "No", "Yes"],
+          ]}
+        />
 
       </Section>
 
       <Section id="remote-access" title="Remote access">
 
-      <P>
-        Control Chrome on a remote machine over the internet using tunnels.
-        Run the relay on the host, expose it through a tunnel, and connect
-        from anywhere.
-      </P>
+        <P>
+          Control Chrome on a remote machine over the internet using tunnels.
+          Run the relay on the host, expose it through a tunnel, and connect
+          from anywhere.
+        </P>
 
-      <CodeBlock lang="bash">{`# On the host machine
-npx -y traforo -p 19988 -t my-machine -- npx -y playwriter serve --token <secret>
+        <CodeBlock lang="bash">{dedent`
+          # On the host machine
+          npx -y traforo -p 19988 -t my-machine -- npx -y playwriter serve --token <secret>
 
-# From anywhere
-export PLAYWRITER_HOST=https://my-machine-tunnel.traforo.dev
-export PLAYWRITER_TOKEN=<secret>
-playwriter -s 1 -e "await page.goto('https://example.com')"`}</CodeBlock>
+          # From anywhere
+          export PLAYWRITER_HOST=https://my-machine-tunnel.traforo.dev
+          export PLAYWRITER_TOKEN=<secret>
+          playwriter -s 1 -e "await page.goto('https://example.com')"
+        `}</CodeBlock>
 
-      <P>
-        Also works on a LAN without tunnels &mdash; just set{" "}
-        <Code>PLAYWRITER_HOST=192.168.1.10</Code>. Use cases
-        include controlling a headless Mac mini, providing remote user
-        support, and multi-machine automation.
-      </P>
+        <P>
+          Also works on a LAN without tunnels &mdash; just set{" "}
+          <Code>PLAYWRITER_HOST=192.168.1.10</Code>. Use cases
+          include controlling a headless Mac mini, providing remote user
+          support, and multi-machine automation.
+        </P>
 
       </Section>
 
       <Section id="security" title="Security">
 
-      <P>
-        Playwriter is local by default. The relay runs on{" "}
-        <Code>localhost:19988</Code> and only accepts connections
-        from the extension. There&apos;s no remote server, no account, no
-        telemetry.
-      </P>
+        <P>
+          Playwriter is local by default. The relay runs on{" "}
+          <Code>localhost:19988</Code> and only accepts connections
+          from the extension. There&apos;s no remote server, no account, no
+          telemetry.
+        </P>
 
-      <List>
-        <Li>
-          <strong>Local only</strong> &mdash; WebSocket server binds to
-          localhost. Nothing leaves your machine.
-        </Li>
-        <Li>
-          <strong>Origin validation</strong> &mdash; only the Playwriter
-          extension origin is accepted. Browsers cannot spoof the Origin
-          header, so malicious websites cannot connect.
-        </Li>
-        <Li>
-          <strong>Explicit consent</strong> &mdash; only tabs where you
-          clicked the extension icon are controlled. No background access.
-        </Li>
-        <Li>
-          <strong>Visible automation</strong> &mdash; Chrome shows an
-          automation banner on controlled tabs.
-        </Li>
-      </List>
+        <List>
+          <Li>
+            <strong>Local only</strong> &mdash; WebSocket server binds to
+            localhost. Nothing leaves your machine.
+          </Li>
+          <Li>
+            <strong>Origin validation</strong> &mdash; only the Playwriter
+            extension origin is accepted. Browsers cannot spoof the Origin
+            header, so malicious websites cannot connect.
+          </Li>
+          <Li>
+            <strong>Explicit consent</strong> &mdash; only tabs where you
+            clicked the extension icon are controlled. No background access.
+          </Li>
+          <Li>
+            <strong>Visible automation</strong> &mdash; Chrome shows an
+            automation banner on controlled tabs.
+          </Li>
+        </List>
 
       </Section>
 
diff --git a/website/src/styles/liveline.css b/website/src/styles/liveline.css
index 5f5a17a..92aa190 100644
--- a/website/src/styles/liveline.css
+++ b/website/src/styles/liveline.css
@@ -79,6 +79,9 @@
     rgba(0, 0, 0, 0.04) 0px 4px 16px,
     rgba(0, 0, 0, 0.06) 0px 0px 0px 1px inset;
 
+  /* Link accent color */
+  --ll-accent: #0969da;
+
   /* P3 accent colors (wider gamut) */
   --ll-primary: #3e9fff;
   --ll-secondary: #f09637;
@@ -130,6 +133,7 @@
     rgba(255, 255, 255, 0.02) 0px 4px 16px,
     rgba(255, 255, 255, 0.06) 0px 0px 0px 1px inset;
 
+  --ll-accent: #58a6ff;
   --ll-primary: #60a5fa;
   --ll-secondary: #f5a623;