-
-
Notifications
You must be signed in to change notification settings - Fork 76
Expand file tree
/
Copy pathindex.html
More file actions
397 lines (363 loc) · 22.7 KB
/
index.html
File metadata and controls
397 lines (363 loc) · 22.7 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tandem Browser — The human-AI symbiotic browser</title>
<meta name="description" content="Tandem Browser is the human-AI symbiotic browser. A local-first browser where humans and AI agents work in shared context, with real sessions, strong security boundaries, and human-in-the-loop workflows.">
<meta property="og:title" content="Tandem Browser">
<meta property="og:description" content="Tandem Browser is the human-AI symbiotic browser. Local-first, shared browser context, real sessions, strong security boundaries.">
<meta property="og:type" content="website">
<meta property="og:url" content="https://tandembrowser.org">
<link rel="canonical" href="https://tandembrowser.org">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&family=Source+Serif+4:ital,opsz,wght@0,8..60,400;0,8..60,600;1,8..60,400&display=swap" rel="stylesheet">
<style>
*{margin:0;padding:0;box-sizing:border-box}
:root{
--bg:#0a0a0b;--bg2:#111113;--bg3:#1a1a1d;
--text:#e8e6e0;--text2:#a8a6a0;--text3:#6a6862;
--accent:#da7756;--accent2:#e89b7d;
--green:#5DCAA5;--blue:#85B7EB;--red:#F09595;
--mono:'JetBrains Mono',monospace;
--serif:'Source Serif 4',Georgia,serif;
--border:#2a2a2d;
}
html{scroll-behavior:smooth;font-size:16px}
body{background:var(--bg);color:var(--text);font-family:var(--mono);line-height:1.7;overflow-x:hidden}
a{color:var(--accent);text-decoration:none;transition:color .2s}
a:hover{color:var(--accent2)}
.grain{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;opacity:.03;z-index:9999;
background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
header{padding:2rem 0;border-bottom:1px solid var(--border)}
.nav{max-width:960px;margin:0 auto;padding:0 2rem;display:flex;justify-content:space-between;align-items:center}
.logo{font-size:1.1rem;font-weight:600;letter-spacing:-.02em;color:var(--text)}
.logo span{color:var(--accent)}
.nav-links{display:flex;gap:1.5rem;font-size:.8rem;color:var(--text2)}
.nav-links a{color:var(--text2)}
.nav-links a:hover{color:var(--text)}
.hero{max-width:960px;margin:0 auto;padding:6rem 2rem 4rem}
.hero-label{font-size:.75rem;color:var(--accent);letter-spacing:.15em;text-transform:uppercase;margin-bottom:1.5rem;
animation:fadeUp .6s ease both}
.hero h1{font-family:var(--serif);font-size:clamp(2rem,5vw,3.2rem);font-weight:600;line-height:1.2;letter-spacing:-.03em;
color:var(--text);margin-bottom:1.5rem;animation:fadeUp .6s ease .1s both}
.hero h1 em{font-style:italic;color:var(--accent)}
.hero p{font-size:.95rem;color:var(--text2);max-width:580px;line-height:1.8;animation:fadeUp .6s ease .2s both}
.hero-stats{display:flex;gap:2.5rem;margin-top:2.5rem;animation:fadeUp .6s ease .3s both}
.stat{display:flex;flex-direction:column}
.stat-num{font-size:1.4rem;font-weight:600;color:var(--text)}
.stat-label{font-size:.7rem;color:var(--text3);text-transform:uppercase;letter-spacing:.1em}
.hero-actions{display:flex;gap:1rem;margin-top:2.5rem;animation:fadeUp .6s ease .4s both;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;gap:.5rem;padding:.7rem 1.4rem;border-radius:4px;font-family:var(--mono);font-size:.8rem;font-weight:500;transition:all .2s}
.btn-primary{background:var(--accent);color:var(--bg);border:1px solid var(--accent)}
.btn-primary:hover{background:var(--accent2);color:var(--bg);border-color:var(--accent2)}
.btn-secondary{background:transparent;color:var(--text2);border:1px solid var(--border)}
.btn-secondary:hover{border-color:var(--text3);color:var(--text)}
.proof-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:.75rem;margin-top:1.5rem;animation:fadeUp .6s ease .45s both}
.proof-card{padding:1rem;border:1px solid var(--border);border-radius:6px;background:var(--bg2)}
.proof-card strong{display:block;font-size:.78rem;color:var(--text);margin-bottom:.25rem}
.proof-card span{font-size:.72rem;color:var(--text3);line-height:1.6}
section{max-width:960px;margin:0 auto;padding:4rem 2rem}
.section-label{font-size:.7rem;color:var(--accent);letter-spacing:.15em;text-transform:uppercase;margin-bottom:.75rem}
.section-title{font-family:var(--serif);font-size:1.6rem;font-weight:600;letter-spacing:-.02em;margin-bottom:1rem}
.audience-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin-top:2rem}
.audience-card{padding:1.25rem;border:1px solid var(--border);border-radius:6px;background:var(--bg2)}
.audience-card h3{font-size:.82rem;font-weight:600;color:var(--text);margin-bottom:.4rem}
.audience-card p{font-size:.76rem;color:var(--text2);line-height:1.7}
.company-line{margin-top:1.25rem;font-size:.82rem;color:var(--text2);max-width:680px}
.company-line strong{color:var(--text)}
.divider{max-width:960px;margin:0 auto;padding:0 2rem}
.divider hr{border:none;border-top:1px solid var(--border)}
.concept{display:grid;grid-template-columns:1fr 1fr;gap:3rem;margin-top:2rem}
.concept-block{padding:1.5rem;border:1px solid var(--border);border-radius:6px;background:var(--bg2)}
.concept-block h3{font-size:.85rem;font-weight:600;margin-bottom:.5rem;color:var(--text)}
.concept-block p{font-size:.8rem;color:var(--text2);line-height:1.7}
.security-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:.75rem;margin-top:2rem}
.sec-layer{padding:1rem;border:1px solid rgba(240,149,149,.15);border-radius:4px;background:rgba(240,149,149,.04)}
.sec-layer .num{font-size:.65rem;color:var(--red);letter-spacing:.1em;text-transform:uppercase;margin-bottom:.25rem}
.sec-layer .name{font-size:.78rem;font-weight:500;color:var(--text)}
.demo-block{margin-top:2rem;padding:1.5rem;background:var(--bg2);border:1px solid var(--border);border-radius:6px;font-size:.8rem}
.demo-block .prompt{color:var(--text3);margin-bottom:.5rem}
.demo-block code{display:block;color:var(--green);padding:.15rem 0;font-size:.78rem}
.demo-block .comment{color:var(--text3);font-style:italic;font-size:.75rem;margin-top:.75rem}
.steps{display:grid;grid-template-columns:1fr;gap:1rem;margin-top:2rem}
.step{display:flex;gap:1rem;padding:1.25rem;border:1px solid var(--border);border-radius:6px;background:var(--bg2)}
.step-num{font-size:1.2rem;font-weight:600;color:var(--accent);min-width:2rem}
.step-content h3{font-size:.85rem;font-weight:500;color:var(--text);margin-bottom:.25rem}
.step-content p{font-size:.78rem;color:var(--text2)}
.step-content code{background:var(--bg3);padding:.15rem .4rem;border-radius:3px;font-size:.75rem;color:var(--green)}
.riders{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:2rem}
.rider{padding:1.25rem;border:1px solid var(--border);border-radius:6px;background:var(--bg2);text-align:center}
.rider-icon{font-size:1.8rem;margin-bottom:.5rem}
.rider h3{font-size:.85rem;font-weight:500;margin-bottom:.25rem}
.rider p{font-size:.75rem;color:var(--text2)}
footer{max-width:960px;margin:0 auto;padding:3rem 2rem;border-top:1px solid var(--border);
display:flex;justify-content:space-between;align-items:center;font-size:.75rem;color:var(--text3)}
footer a{color:var(--text3)}
footer a:hover{color:var(--text2)}
@keyframes fadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:700px){
.concept,.security-grid,.riders,.proof-strip,.audience-grid{grid-template-columns:1fr}
.hero-stats{flex-wrap:wrap;gap:1.5rem}
.nav-links{display:none}
.hero h1{font-size:1.8rem}
}
@media(max-width:500px){
.security-grid{grid-template-columns:1fr 1fr}
.proof-strip{grid-template-columns:1fr}
}
</style>
</head>
<body>
<div class="grain"></div>
<header>
<nav class="nav">
<div class="logo"><span>Tandem</span> Browser</div>
<div class="nav-links">
<a href="#how">How it works</a>
<a href="#security">Security</a>
<a href="/api">API</a>
<a href="#start">Get started</a>
<a href="https://github.com/hydro13/tandem-browser">GitHub</a>
<a href="https://github.com/hydro13/tandem-browser/discussions">Community</a>
<a href="/sponsor.html" style="color:var(--accent)">Sponsor</a>
</div>
</nav>
</header>
<div class="hero">
<div class="hero-label">Open source · MIT license · developer preview · v0.73.1</div>
<h1>Tandem Browser is the <em>human-AI symbiotic browser</em></h1>
<p>A local-first browser where humans and AI agents work in shared context. Same tabs, same sessions, same authenticated browser state, with explicit handoffs when the human needs to step in. Local or remote, one agent or several. Not generic browser automation, an actual shared browser workspace for the web that already exists.</p>
<div class="hero-stats">
<div class="stat"><span class="stat-num">513</span><span class="stat-label">GitHub stars</span></div>
<div class="stat"><span class="stat-num">250</span><span class="stat-label">MCP tools</span></div>
<div class="stat"><span class="stat-num">300+</span><span class="stat-label">HTTP endpoints</span></div>
<div class="stat"><span class="stat-num">8</span><span class="stat-label">Security layers</span></div>
</div>
<div class="hero-actions">
<a href="https://github.com/hydro13/tandem-browser" class="btn btn-primary">View on GitHub →</a>
<a href="/api" class="btn btn-secondary">Read docs</a>
<a href="https://github.com/hydro13/tandem-browser/discussions" class="btn btn-secondary">Join discussions</a>
<a href="/sponsor.html" class="btn btn-secondary" style="border-color:var(--accent);color:var(--accent)">♥ Sponsor</a>
</div>
<div class="proof-strip">
<div class="proof-card"><strong>Human-AI symbiosis</strong><span>Built around humans and agents working together in the same browser, not taking turns through prompts.</span></div>
<div class="proof-card"><strong>Open source, MIT</strong><span>Real public repo, source available now, developer preview, not vaporware.</span></div>
<div class="proof-card"><strong>Works with your AI stack</strong><span>MCP and HTTP for local and remote agents. Connect on the same machine or over a private Tailscale network.</span></div>
<div class="proof-card"><strong>Remote MCP is live</strong><span>Remote agents can now connect over Tailscale through MCP, not just raw HTTP.</span></div>
<div class="proof-card"><strong>Worth watching for teams</strong><span>Shared human-AI browser workflows, not detached automation or brittle wrappers.</span></div>
</div>
</div>
<div class="divider"><hr></div>
<section id="how">
<div class="section-label">Core idea</div>
<div class="section-title">Symbiosis, not automation theater.</div>
<div class="concept">
<div class="concept-block">
<h3>Other AI browsers</h3>
<p>Build API wrappers for 40 services. Gmail wrapper, Slack wrapper, Notion wrapper. Each one is custom code. If they haven't built a wrapper for a site, the AI can't use it.</p>
</div>
<div class="concept-block">
<h3>Tandem Browser</h3>
<p>Uses the accessibility tree, the structure every website already has. The AI reads, clicks, fills, and navigates any site like a human. No wrappers needed. It works on every website that exists.</p>
</div>
</div>
<div class="concept" style="margin-top:1rem">
<div class="concept-block">
<h3>Anti-scraping doesn't apply</h3>
<p>Tandem Browser is a real browser used by a real human. You browse in it daily. The AI rides alongside, using the same session and the same cookies. There is no bot to detect, just a person with an AI copilot.</p>
</div>
<div class="concept-block">
<h3>AI evolves, Tandem Browser evolves</h3>
<p>Smarter Claude? It automatically gets better at using Tandem Browser. New local model via Ollama? Plug it in. Tandem Browser does not chase AI evolution, it is the browser layer AI evolves on.</p>
</div>
</div>
</section>
<div class="divider"><hr></div>
<section>
<div class="section-label">Positioning</div>
<div class="section-title">Tandem Browser and WebMCP solve different layers of the problem</div>
<p style="font-size:.85rem;color:var(--text2);max-width:690px">WebMCP is promising because it helps websites expose cleaner agent actions. Tandem Browser solves a broader problem: how a human and an AI actually work together inside a real browser, across tabs, sessions, and existing sites, with security and governance built in.</p>
<div class="concept" style="margin-top:1.5rem">
<div class="concept-block">
<h3>WebMCP</h3>
<p>Makes individual websites more agent-ready by letting sites expose structured tools. Best fit when the site itself participates.</p>
</div>
<div class="concept-block">
<h3>Tandem Browser</h3>
<p>Makes the browser itself a shared human-AI workspace. Best fit when the real job spans multiple tabs, authenticated sessions, human judgment, and the web as it exists today. This is why Tandem Browser is best understood as the human-AI symbiotic browser.</p>
</div>
</div>
<div class="concept" style="margin-top:1rem">
<div class="concept-block">
<h3>Why that matters</h3>
<p>Tandem Browser does not depend on every site adopting a new protocol before useful work can happen. It gives agents structured access, visibility, and handoffs inside the browser people already use.</p>
</div>
<div class="concept-block">
<h3>Not anti-WebMCP</h3>
<p>If more sites become agent-readable, great. Tandem Browser can benefit from that too. But Tandem Browser's category is shared browser context, local-first control, and human-in-the-loop coordination, not generic site automation.</p>
</div>
</div>
</section>
<div class="divider"><hr></div>
<section>
<div class="section-label">Who this is for</div>
<div class="section-title">Built for people already pushing real AI workflows</div>
<p style="font-size:.85rem;color:var(--text2);max-width:620px">Tandem Browser is for users who want real browser context, not toy abstractions. It fits best when the browser is part of the workflow, not a disposable automation target.</p>
<div class="audience-grid">
<div class="audience-card">
<h3>AI power users</h3>
<p>People who already live with Claude, OpenClaw, local models, or mixed-agent setups and want them operating in the same real browser.</p>
</div>
<div class="audience-card">
<h3>MCP builders</h3>
<p>Teams and developers who want a serious browser surface behind MCP, instead of one more pile of custom wrappers or narrow site-specific integrations.</p>
</div>
<div class="audience-card">
<h3>Privacy-minded operators</h3>
<p>Users who want local-first control, authenticated sessions, and strong security boundaries between the web and the agent layer.</p>
</div>
<div class="audience-card">
<h3>Teams exploring browser agents</h3>
<p>Companies testing secure browser-based AI workflows, human-in-the-loop systems, and real authenticated browser work.</p>
</div>
</div>
<p class="company-line"><strong>For teams exploring secure browser-based AI workflows, Tandem Browser is the human-AI symbiotic browser worth watching.</strong></p>
</section>
<div class="divider"><hr></div>
<section>
<div class="section-label">Multi-agent symbiosis</div>
<div class="section-title">Multiple AI agents + one human. Same browser.</div>
<p style="font-size:.85rem;color:var(--text2);max-width:640px">Tandem Browser supports multiple AI agents and a human working simultaneously in the same browser. Agents can connect locally or remotely over Tailscale. Each gets their own workspace. All share the same tabs, cookies, and sessions. Tab locks prevent conflicts.</p>
<div class="riders">
<div class="rider">
<div class="rider-icon">👤</div>
<h3>Robin (human)</h3>
<p>Default workspace. Browses normally, handles CAPTCHAs and judgment calls.</p>
</div>
<div class="rider">
<div class="rider-icon">🤖</div>
<h3>Kees (OpenClaw)</h3>
<p>Runs on Ollama locally. Has its own workspace for job search automation.</p>
</div>
<div class="rider">
<div class="rider-icon">⚙</div>
<h3>Claude Code on Windows</h3>
<p>Connected remotely over Tailscale via MCP. Works inside its own workspace while sharing the same live browser context.</p>
</div>
</div>
</section>
<div class="divider"><hr></div>
<section>
<div class="section-label">Live demo</div>
<div class="section-title">What agents can do through Tandem Browser now</div>
<div class="demo-block">
<div class="prompt">$ claude via tandem MCP</div>
<code>> Opened Gmail, composed email, filled To/Subject/Body, clicked Send</code>
<code>> Navigated to Coolblue, extracted all MacBook Air M4 prices</code>
<code>> Scrolled X.com profile using PageDown/PageUp</code>
<code>> Read YouTube search results for "tandem browser"</code>
<code>> Read pinboards, screenshots, workspace config</code>
<code>> Drew annotations visible to both human and AI</code>
<div class="comment">No Gmail API. No Coolblue wrapper. Just the accessibility tree, shared browser context, and now remote MCP over Tailscale too.</div>
</div>
</section>
<div class="divider"><hr></div>
<section id="security">
<div class="section-label">Security</div>
<div class="section-title">8-layer security stack. Built in, not bolted on.</div>
<p style="font-size:.85rem;color:var(--text2);max-width:580px;margin-bottom:.5rem">When an AI agent browses with system access, a hidden instruction in a page's HTML is remote code execution without an exploit. Tandem Browser's security sits between every byte of external content and the AI.</p>
<div class="security-grid">
<div class="sec-layer"><div class="num">Layer 1</div><div class="name">NetworkShield</div></div>
<div class="sec-layer"><div class="num">Layer 2</div><div class="name">OutboundGuard</div></div>
<div class="sec-layer"><div class="num">Layer 3</div><div class="name">ContentAnalyzer</div></div>
<div class="sec-layer"><div class="num">Layer 4</div><div class="name">ScriptGuard</div></div>
<div class="sec-layer"><div class="num">Layer 5</div><div class="name">BehaviorMonitor</div></div>
<div class="sec-layer"><div class="num">Layer 6</div><div class="name">Gatekeeper AI</div></div>
<div class="sec-layer"><div class="num">Layer 7</div><div class="name">EvolutionEngine</div></div>
<div class="sec-layer"><div class="num">Layer 8</div><div class="name">PromptInjection</div></div>
</div>
<p style="font-size:.78rem;color:var(--text3);margin-top:1rem">811K+ blocklist entries · YARA-style threat rules · AST fingerprinting · Shannon entropy detection · Confidence-weighted pipeline · 51 automated tests</p>
</section>
<div class="divider"><hr></div>
<section id="start">
<div class="section-label">Get started</div>
<div class="section-title">Up and running in 3 steps</div>
<div class="steps">
<div class="step">
<div class="step-num">1</div>
<div class="step-content">
<h3>Clone and install</h3>
<p><code>git clone https://github.com/hydro13/tandem-browser.git</code><br>
<code>cd tandem-browser && npm install</code></p>
</div>
</div>
<div class="step">
<div class="step-num">2</div>
<div class="step-content">
<h3>Start the browser</h3>
<p><code>npm start</code><br>
The browser opens. The API starts automatically.</p>
</div>
</div>
<div class="step">
<div class="step-num">3</div>
<div class="step-content">
<h3>Connect your AI</h3>
<p>Open Settings → Connected Agents. Choose whether your AI is on this machine or on another machine. Tandem generates the instructions, you paste them into your AI, and the agent discovers the rest through Tandem's own bootstrap surface.</p>
<p style="margin-top:.4rem"><strong>Same machine:</strong> MCP via stdio (250 tools) or HTTP API (300+ endpoints).<br>
<strong>Another machine:</strong> MCP via Streamable HTTP or HTTP API, over a private Tailscale network. Both machines must be on the same tailnet. Tandem is never exposed to the public internet.</p>
</div>
</div>
</div>
</section>
<div class="divider"><hr></div>
<section>
<div class="section-label">Built by</div>
<div class="section-title">Robin Waslander</div>
<p style="font-size:.85rem;color:var(--text2);max-width:580px">AI Architect with 35 years of IT experience. Built Tandem Browser because no browser existed for someone who works <em>with</em> AI, not just uses it as a tool. Tandem Browser is my daily driver. Every feature comes from real frustration, every fix from real use.</p>
<div style="display:flex;gap:1.5rem;margin-top:1.25rem;font-size:.8rem">
<a href="https://github.com/hydro13">GitHub</a>
<a href="https://x.com/Robin_waslander">X / Twitter</a>
<a href="https://linkedin.com/in/robinwaslander">LinkedIn</a>
</div>
</section>
<section>
<div class="section-label">Support</div>
<div class="section-title">Sponsor Tandem Browser</div>
<p style="font-size:.85rem;color:var(--text2);max-width:620px">Tandem Browser is built and maintained full-time by one person. No company, no VC, no ads. Sponsorship keeps the project moving in the places that matter: product development, security maintenance, cross-platform work, docs, and community support.</p>
<div style="display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:2rem;max-width:580px">
<div style="padding:1.25rem;border:1px solid var(--border);border-radius:6px;background:var(--bg2);text-align:center">
<div style="font-size:1.2rem;font-weight:600;color:var(--accent)">$5</div>
<div style="font-size:.7rem;color:var(--text3);margin-top:.25rem">Supporter</div>
</div>
<div style="padding:1.25rem;border:1px solid var(--border);border-radius:6px;background:var(--bg2);text-align:center">
<div style="font-size:1.2rem;font-weight:600;color:var(--accent)">$14</div>
<div style="font-size:.7rem;color:var(--text3);margin-top:.25rem">Power User</div>
</div>
<div style="padding:1.25rem;border:1px solid var(--border);border-radius:6px;background:var(--bg2);text-align:center">
<div style="font-size:1.2rem;font-weight:600;color:var(--accent)">$29</div>
<div style="font-size:.7rem;color:var(--text3);margin-top:.25rem">Champion</div>
</div>
</div>
<p style="font-size:.78rem;color:var(--text3);margin-top:1rem;max-width:620px">If your company cares about secure browser agents, MCP-native workflows, or local-first AI infrastructure, sponsorship helps keep this category moving in the open.</p>
<p style="font-size:.75rem;color:var(--text3);margin-top:.75rem">Company tiers from $49/month. One-time contributions welcome.</p>
<div style="margin-top:1.25rem;display:flex;gap:1rem;flex-wrap:wrap">
<a href="https://github.com/sponsors/hydro13" class="btn btn-primary">♥ Sponsor on GitHub →</a>
<a href="/sponsor.html" class="btn btn-secondary">See sponsor details</a>
</div>
</section>
<div class="divider"><hr></div>
<footer>
<div>© 2026 Tandem Browser · MIT License · tandembrowser.org</div>
<div>
<a href="https://github.com/hydro13/tandem-browser">GitHub</a> ·
<a href="/api">Docs</a> ·
<a href="https://github.com/hydro13/tandem-browser/discussions">Community</a> ·
<a href="/sponsor.html">Sponsor</a> ·
<a href="https://github.com/hydro13/tandem-browser/issues">Issues</a>
</div>
</footer>
</body>
</html>