@kentcdodds/invisible-software

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Invisible software</title>
<script>{ const d = location.pathname.endsWith('/') ? location.pathname : location.pathname + '/'; const b = document.createElement('base'); b.href = d; document.head.append(b) }</script>
<link rel="icon" href="c/icons/favicon.ico">
<style>
@font-face { font-family: Inter; src: url(c/fonts/inter/InterVariable.woff2) format('woff2'); font-weight: 100 900; }
html, body { margin: 0; height: 100%; font-family: Inter, system-ui, sans-serif; background: #fafafa; color: #111; }
main { min-height: 100%; display: grid; place-content: center; gap: 28px; padding: 40px; box-sizing: border-box; text-align: center; }
h1 { margin: 0; font-size: 44px; letter-spacing: -0.02em; }
nav { display: flex; gap: 18px; justify-content: center; flex-wrap: wrap; }
a { display: block; width: 260px; padding: 26px 24px; border-radius: 18px; background: #fff; box-shadow: 0 1px 3px rgb(0 0 0 / .08), 0 8px 24px rgb(0 0 0 / .05); color: inherit; text-decoration: none; text-align: left; }
a:hover { box-shadow: 0 1px 3px rgb(0 0 0 / .12), 0 12px 32px rgb(0 0 0 / .09); }
a b { display: block; font-size: 22px; margin-bottom: 6px; }
a span { color: #666; font-size: 15px; line-height: 1.4; }
</style>
</head>
<body>
<main>
	<h1>Invisible software</h1>
	<nav>
		<a href="demo"><b>Demo →</b><span>The phone-only story: Victoria, Max, Grok Bot, ChatGPT and Muse.</span></a>
		<a href="graph"><b>Graph →</b><span>AI agents keep getting better at engineering work.</span></a>
	</nav>
</main>
</body>
</html>