Commit b2e15185aee22bfdee78806f2734b0a4de9c2c77 | the-knife

author	Theo Browne <me@t3.gg> 2026-09-05 21:47:54-07:00
committer	GitHub <noreply@github.com> 2026-09-05 21:47:54-07:00
log	b2e15185aee22bfdee78806f2734b0a4de9c2c77
tree	0414bd9c03cab9393a23501079dcbeb6147fe0a7
parent	84aebb72f306f17bed680e1241dab9ab8e8df741
signature	Signed by PGP key B5690EEEBB952194

feat(marketing): add a Windows 95 landing page (#10286)

36 files changed, 1678 insertions(+), 0 deletions(-)

apps/marketing/public/95/providers/antigravity-320.webp created

Binary files /dev/null and b/apps/marketing/public/95/providers/antigravity-320.webp differ

apps/marketing/public/95/providers/antigravity-640.webp created

Binary files /dev/null and b/apps/marketing/public/95/providers/antigravity-640.webp differ

apps/marketing/public/95/providers/antigravity-960.webp created

Binary files /dev/null and b/apps/marketing/public/95/providers/antigravity-960.webp differ

apps/marketing/public/95/providers/claude-code-320.webp created

Binary files /dev/null and b/apps/marketing/public/95/providers/claude-code-320.webp differ

apps/marketing/public/95/providers/claude-code-640.webp created

Binary files /dev/null and b/apps/marketing/public/95/providers/claude-code-640.webp differ

apps/marketing/public/95/providers/claude-code-960.webp created

Binary files /dev/null and b/apps/marketing/public/95/providers/claude-code-960.webp differ

apps/marketing/public/95/providers/codex-320.webp created

Binary files /dev/null and b/apps/marketing/public/95/providers/codex-320.webp differ

apps/marketing/public/95/providers/codex-640.webp created

Binary files /dev/null and b/apps/marketing/public/95/providers/codex-640.webp differ

apps/marketing/public/95/providers/codex-960.webp created

Binary files /dev/null and b/apps/marketing/public/95/providers/codex-960.webp differ

apps/marketing/public/95/providers/cursor-320.webp created

Binary files /dev/null and b/apps/marketing/public/95/providers/cursor-320.webp differ

apps/marketing/public/95/providers/cursor-640.webp created

Binary files /dev/null and b/apps/marketing/public/95/providers/cursor-640.webp differ

apps/marketing/public/95/providers/cursor-960.webp created

Binary files /dev/null and b/apps/marketing/public/95/providers/cursor-960.webp differ

apps/marketing/public/95/providers/grok-320.webp created

Binary files /dev/null and b/apps/marketing/public/95/providers/grok-320.webp differ

apps/marketing/public/95/providers/grok-640.webp created

Binary files /dev/null and b/apps/marketing/public/95/providers/grok-640.webp differ

apps/marketing/public/95/providers/grok-960.webp created

Binary files /dev/null and b/apps/marketing/public/95/providers/grok-960.webp differ

apps/marketing/public/95/providers/opencode-320.webp created

Binary files /dev/null and b/apps/marketing/public/95/providers/opencode-320.webp differ

apps/marketing/public/95/providers/opencode-640.webp created

Binary files /dev/null and b/apps/marketing/public/95/providers/opencode-640.webp differ

apps/marketing/public/95/providers/opencode-960.webp created

Binary files /dev/null and b/apps/marketing/public/95/providers/opencode-960.webp differ

apps/marketing/public/95/t3-code-concepts/t3-code-chrome.webp created

Binary files /dev/null and b/apps/marketing/public/95/t3-code-concepts/t3-code-chrome.webp differ

apps/marketing/public/95/t3-code-concepts/t3-code-desktop.webp created

Binary files /dev/null and b/apps/marketing/public/95/t3-code-concepts/t3-code-desktop.webp differ

apps/marketing/public/95/t3-code-concepts/t3-code-lime-320.webp created

Binary files /dev/null and b/apps/marketing/public/95/t3-code-concepts/t3-code-lime-320.webp differ

apps/marketing/public/95/t3-code-concepts/t3-code-lime-640.webp created

Binary files /dev/null and b/apps/marketing/public/95/t3-code-concepts/t3-code-lime-640.webp differ

apps/marketing/public/95/t3-code-concepts/t3-code-lime.webp created

Binary files /dev/null and b/apps/marketing/public/95/t3-code-concepts/t3-code-lime.webp differ

apps/marketing/public/95/t3-code-concepts/t3-code-nightly-clouds-320.webp created

Binary files /dev/null and b/apps/marketing/public/95/t3-code-concepts/t3-code-nightly-clouds-320.webp differ

apps/marketing/public/95/t3-code-concepts/t3-code-nightly-clouds-640.webp created

Binary files /dev/null and b/apps/marketing/public/95/t3-code-concepts/t3-code-nightly-clouds-640.webp differ

apps/marketing/public/95/t3-code-concepts/t3-code-nightly-clouds.webp created

Binary files /dev/null and b/apps/marketing/public/95/t3-code-concepts/t3-code-nightly-clouds.webp differ

apps/marketing/public/95/t3-code-concepts/t3-code-nightly-foil-320.webp created

Binary files /dev/null and b/apps/marketing/public/95/t3-code-concepts/t3-code-nightly-foil-320.webp differ

apps/marketing/public/95/t3-code-concepts/t3-code-nightly-foil-640.webp created

Binary files /dev/null and b/apps/marketing/public/95/t3-code-concepts/t3-code-nightly-foil-640.webp differ

apps/marketing/public/95/t3-code-concepts/t3-code-nightly-foil.webp created

Binary files /dev/null and b/apps/marketing/public/95/t3-code-concepts/t3-code-nightly-foil.webp differ

apps/marketing/public/95/t3-code-concepts/t3-code-nightly-lavender-320.webp created

Binary files /dev/null and b/apps/marketing/public/95/t3-code-concepts/t3-code-nightly-lavender-320.webp differ

apps/marketing/public/95/t3-code-concepts/t3-code-nightly-lavender-640.webp created

Binary files /dev/null and b/apps/marketing/public/95/t3-code-concepts/t3-code-nightly-lavender-640.webp differ

apps/marketing/public/95/t3-code-concepts/t3-code-nightly-lavender.webp created

Binary files /dev/null and b/apps/marketing/public/95/t3-code-concepts/t3-code-nightly-lavender.webp differ

apps/marketing/src/components/RetroBox.astro created+23

...	...	@@ -0,0 +1,23 @@
	1	---
	2	interface Props {
	3	image: string;
	4	alt: string;
	5	sizes: string;
	6	eager?: boolean;
	7	}
	8
	9	const { image, alt, sizes, eager = false } = Astro.props;
	10	const base = `/95/t3-code-concepts/${image}`;
	11	---
	12
	13	<img
	14	src={`${base}-640.webp`}
	15	srcset={`${base}-320.webp 320w, ${base}-640.webp 640w, ${base}.webp 960w`}
	16	{sizes}
	17	{alt}
	18	width="960"
	19	height="1200"
	20	loading={eager ? "eager" : "lazy"}
	21	fetchpriority={eager ? "high" : "auto"}
	22	decoding="async"
	23	/>

apps/marketing/src/components/RetroIcon.astro created+57

...	...	@@ -0,0 +1,57 @@
	1	---
	2	interface Props {
	3	name: "computer" \| "disk" \| "globe" \| "bin" \| "folder" \| "cursor";
	4	size?: number;
	5	}
	6
	7	const { name, size = 32 } = Astro.props;
	8	---
	9
	10	<svg width={size} height={size} viewBox="0 0 32 32" fill="none" shape-rendering="crispEdges" aria-hidden="true">
	11	{name === "computer" && <>
	12	<path fill="#000" d="M3 2h25v22H3zM10 24h11v3h7v4H3v-4h7z" />
	13	<path fill="#c0c0c0" d="M3 2h23v20H3zM12 22h7v5h7v2H4v-2h8z" />
	14	<path fill="#fff" d="M3 2h23v2H5v18H3zM4 27h22v1H4z" />
	15	<path fill="#808080" d="M6 5h17v14H6zM5 20h20v2H5z" />
	16	<path fill="#000080" d="M8 7h15v10H8z" />
	17	<path fill="#51e5cf" d="M9 8h13v2H9zM9 11h5v4H9z" />
	18	<path fill="#fff" d="M16 11h5v1h-5zM16 14h4v1h-4z" />
	19	<path fill="#baff00" d="M21 20h2v1h-2z" />
	20	</>}
	21	{name === "disk" && <>
	22	<path fill="#000" d="M3 2h23l4 4v24H3z" />
	23	<path fill="#4747b8" d="M3 2h22l3 3v23H3z" />
	24	<path fill="#9c9cff" d="M3 2h2v26H3zM5 2h20v2H5z" />
	25	<path fill="#c0c0c0" d="M8 3h14v9H8z" />
	26	<path fill="#fff" d="M8 3h2v9H8z" />
	27	<path fill="#000" d="M17 4h4v6h-4z" />
	28	<path fill="#fff" d="M7 16h17v12H7z" />
	29	<path fill="#ff65b3" d="M7 16h17v3H7z" />
	30	<path fill="#808080" d="M10 21h11v1H10zM10 24h8v1h-8z" />
	31	</>}
	32	{name === "globe" && <>
	33	<path fill="#000" d="M11 1h10v2h5v5h3v16h-4v5h-5v2H10v-3H5v-5H2V10h3V5h6z" />
	34	<path fill="#5353dd" d="M11 2h9v2h5v5h3v13h-4v5h-5v3h-8v-3H6v-5H3V11h3V6h5z" />
	35	<path fill="#80ffff" d="M11 3h8v2h-7v3H8v5H5v-3h2V6h4z" />
	36	<path fill="#00ba80" d="M14 5h7v4h4v5h-6v-3h-5zM7 13h7v3h6v4h-4v6h-5v-5H7zM23 21h3v3h-3z" />
	37	<path fill="#baff00" d="M14 5h6v2h-6zM7 13h6v2H7z" />
	38	</>}
	39	{name === "bin" && <>
	40	<path fill="#000" d="M6 8h21v3h-2v18H8V11H6zM10 3h12v3h5v3H5V6h5z" />
	41	<path fill="#c0c0c0" d="M7 10h17v18H9V13H7zM7 6h17v3H7zM12 3h7v3h-7z" />
	42	<path fill="#fff" d="M9 11h2v15H9zM7 6h17v1H7zM13 12h2v13h-2zM18 12h2v13h-2z" />
	43	<path fill="#808080" d="M15 12h2v13h-2zM20 12h2v13h-2zM11 27h13v2H11z" />
	44	<path fill="#2f986b" d="M13 15h7v2h-4v2h-3zM12 20h3v2h5v2h-8zM20 18h2v4h-2z" />
	45	</>}
	46	{name === "folder" && <>
	47	<path fill="#000" d="M2 6h12v3h15v20H2z" />
	48	<path fill="#e3ba3f" d="M2 6h11v3h14v18H2z" />
	49	<path fill="#fff4a0" d="M2 6h11v2H4v18H2z" />
	50	<path fill="#fff4a0" d="M5 13h25v3h-2v6h-2v5H3v-8h2z" />
	51	<path fill="#e3ba3f" d="M6 15h23v1h-2v6h-2v4H5v-7h1z" />
	52	</>}
	53	{name === "cursor" && <>
	54	<path fill="#000" d="M5 1h3v3h3v3h3v3h3v3h3v3h3v3h3v4H16l5 8h-7l-5-9-4 4z" />
	55	<path fill="#fff" d="M7 5v16l4-4 6 12h2l-6-12h10z" />
	56	</>}
	57	</svg>

apps/marketing/src/pages/95.astro created+354

...	...	@@ -0,0 +1,354 @@
	1	---
	2	import RetroIcon from "../components/RetroIcon.astro";
	3	import RetroBox from "../components/RetroBox.astro";
	4	import { GITHUB_REPOSITORY_URL, MARKETING_STATS } from "../lib/site";
	5	import "../styles/retro.css";
	6
	7	const agents = [
	8	{
	9	name: "Claude Code",
	10	slug: "claude-code",
	11	caption: "Now with manners.",
	12	artwork: "Cream and orange software box with a bow-tied desktop computer and a gold PLEASE sticker.",
	13	},
	14	{
	15	name: "Codex",
	16	slug: "codex",
	17	caption: "Some assembly automated.",
	18	artwork: "Silver and green software box with a robot hand stacking glowing code blocks.",
	19	},
	20	{
	21	name: "Cursor",
	22	slug: "cursor",
	23	caption: "Point. Click. Question everything.",
	24	artwork: "Black and chrome software box with an enormous silver arrow and lightning bolts.",
	25	},
	26	{
	27	name: "Grok",
	28	slug: "grok",
	29	caption: "Adult supervision sold separately.",
	30	artwork: "Black and red software box with a spacecraft and an UH OH sticker.",
	31	},
	32	{
	33	name: "OpenCode",
	34	slug: "opencode",
	35	caption: "Please copy this floppy.",
	36	artwork: "Purple shareware box with floppy disks spilling from an open carton.",
	37	},
	38	{
	39	name: "Antigravity",
	40	slug: "antigravity",
	41	caption: "System requirement: no gravity.",
	42	artwork: "Blue and violet software box with a floating chrome triangle and metallic spheres.",
	43	},
	44	];
	45	const userDigits = MARKETING_STATS.users.replaceAll(",", "").padStart(7, "0").split("");
	46	---
	47
	48	<!doctype html>
	49	<html lang="en">
	50	<head>
	51	<meta charset="UTF-8" />
	52	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	53	<meta name="description" content="Introducing T3 Code. All your coding agents in one happy little window. Free, open source, and available without six CD-ROMs." />
	54	<meta name="theme-color" content="#000000" />
	55	<link rel="icon" href="/favicon.ico" sizes="48x48" />
	56	<title>T3 Code '95 \| The future is now. Like, right now.</title>
	57	</head>
	58	<body>
	59	<a class="skip-link retro-button" href="#main-content">Skip to the sales pitch</a>
	60
	61	<nav class="desktop-icons" aria-label="Desktop shortcuts">
	62	<a href="/" class="desktop-icon"><RetroIcon name="computer" /><span>My Computer</span></a>
	63	<a href="/download" class="desktop-icon"><RetroIcon name="disk" /><span>Install T3 Code</span></a>
	64	<a href={GITHUB_REPOSITORY_URL} class="desktop-icon"><RetroIcon name="globe" /><span>Network<br />Neighborhood</span></a>
	65	<button type="button" class="desktop-icon" data-dialog="recycle"><RetroIcon name="bin" /><span>Bad Ideas</span></button>
	66	</nav>
	67
	68	<div class="desktop">
	69	<div class="browser-window raised" id="sales-window">
	70	<header class="window-title" id="window-title" tabindex="0" aria-label="Move browser window. Drag or use arrow keys. Double-click to maximize.">
	71	<span class="window-name"><RetroIcon name="globe" size={18} /><span>T3 Code '95 - Internet Explorer</span></span>
	72	<div class="window-controls">
	73	<button class="retro-button window-control" type="button" id="minimize" aria-label="Minimize window"><span aria-hidden="true">_</span></button>
	74	<button class="retro-button window-control" type="button" id="maximize" aria-label="Maximize window" aria-pressed="false"><span class="maximize-icon" aria-hidden="true"></span></button>
	75	<button class="retro-button window-control" type="button" data-dialog="close" aria-label="Close window"><span aria-hidden="true">×</span></button>
	76	</div>
	77	</header>
	78
	79	<nav class="browser-menu" aria-label="Page navigation">
	80	<a href="#nightly"><u>N</u>ightly</a>
	81	<a href="#features"><u>F</u>eatures</a>
	82	<a href="#agents"><u>A</u>gents</a>
	83	<a href="#order"><u>O</u>rder now</a>
	84	<a href={GITHUB_REPOSITORY_URL}><u>S</u>ource</a>
	85	<button type="button" data-dialog="help"><u>H</u>elp</button>
	86	</nav>
	87
	88	<div class="address-bar">
	89	<span>Address</span>
	90	<div class="address-field sunken"><RetroIcon name="globe" size={16} /><span>https://t3.codes/95</span></div>
	91	<a class="retro-button address-go" href="/">Go <span aria-hidden="true">↗</span></a>
	92	</div>
	93
	94	<main id="main-content" tabindex="0">
	95	<section class="hero" aria-labelledby="hero-title">
	96	<div class="hero-copy">
	97	<h1 id="hero-title">All your agents.<br />One happy<br /><span>little window.</span></h1>
	98	<p class="hero-explanation">Your coding agents in one free, open-source app.<br />You bring the subscriptions. We bring the buttons.</p>
	99	<div class="platform-line"><span>AVAILABLE FOR</span><strong>Windows</strong><b>·</b><strong>macOS</strong><b>·</b><strong>Linux</strong></div>
	100	</div>
	101
	102	<div class="edition-packages" aria-label="Choose Stable or Nightly">
	103	<a class="hero-package" href="/download" aria-label="Download T3 Code stable">
	104	<RetroBox image="t3-code-lime" alt="T3 Code in a lime and teal software box." sizes="(max-width: 620px) 38vw, 170px" eager />
	105	<span class="retro-button edition-download">Get Stable <span aria-hidden="true">↗</span></span>
	106	</a>
	107	<a class="hero-package nightly-package" id="nightly" href={`${GITHUB_REPOSITORY_URL}/releases?q=nightly&expanded=true`} aria-label="Download T3 Code Nightly preview builds">
	108	<RetroBox image="t3-code-nightly-clouds" alt="T3 Code Nightly in a navy box with violet clouds." sizes="(max-width: 620px) 38vw, 170px" eager />
	109	<span class="retro-button edition-download">Get Nightly <span aria-hidden="true">↗</span></span>
	110	</a>
	111	</div>
	112	</section>
	113
	114	<section class="agents-section" id="agents" aria-labelledby="agents-title">
	115	<div class="section-heading"><h2 id="agents-title">Bring your favorite agents.</h2></div>
	116	<div class="agent-list">
	117	{agents.map((agent, index) => (
	118	<figure class="agent">
	119	<img
	120	class="agent-box"
	121	src={`/95/providers/${agent.slug}-640.webp`}
	122	srcset={[320, 640, 960].map((width) => `/95/providers/${agent.slug}-${width}.webp ${width}w`).join(", ")}
	123	sizes="auto, (max-width: 620px) 43vw, (max-width: 1100px) 27vw, 280px"
	124	alt={agent.artwork}
	125	width="640"
	126	height="800"
	127	loading={index < 3 ? "eager" : "lazy"}
	128	decoding="async"
	129	/>
	130	<figcaption>
	131	<h3>{agent.name}</h3>
	132	<p>{agent.caption}</p>
	133	</figcaption>
	134	</figure>
	135	))}
	136	</div>
	137	<p class="agents-note">Use the providers and subscriptions you already have. Provider charges still apply.</p>
	138	<p class="agents-note">Parody packaging. No actual boxes for sale.</p>
	139	</section>
	140
	141	<section class="features-section" id="features" aria-labelledby="features-title">
	142	<div class="section-heading"><h2 id="features-title">Inside every copy.</h2></div>
	143	<div class="feature-grid">
	144	<article class="feature-window raised">
	145	<div class="feature-titlebar"><span>01_multitasking.exe</span><span aria-hidden="true">■</span></div>
	146	<div class="feature-body"><RetroIcon name="computer" size={38} /><h3>More agents.<br />Less window aerobics.</h3><p>Run agents side by side. Keep your threads, terminals, and diffs together. Reclaim your Alt-Tab finger.</p></div>
	147	</article>
	148	<article class="feature-window raised">
	149	<div class="feature-titlebar"><span>02_remote_access.exe</span><span aria-hidden="true">■</span></div>
	150	<div class="feature-body"><RetroIcon name="globe" size={38} /><h3>Your computer.<br />Now over there.</h3><p>Connect from the web, desktop, or mobile. Your agents keep working on your machine. You may approach the couch.</p></div>
	151	</article>
	152	<article class="feature-window raised">
	153	<div class="feature-titlebar"><span>03_source_code.txt</span><span aria-hidden="true">■</span></div>
	154	<div class="feature-body"><RetroIcon name="folder" size={38} /><h3>We left the<br />source code in.</h3><p>Read it. Change it. Fork the whole thing. It's MIT licensed, because your tools should actually be yours.</p><a class="feature-tag" href={GITHUB_REPOSITORY_URL}>View source <span aria-hidden="true">↗</span></a></div>
	155	</article>
	156	<article class="feature-window raised">
	157	<div class="feature-titlebar"><span>04_terminal.exe</span><span aria-hidden="true">■</span></div>
	158	<div class="feature-body"><RetroIcon name="computer" size={38} /><h3>A terminal.<br />Right where you work.</h3><p>Run commands alongside your agents. Keep the output with the project.</p></div>
	159	</article>
	160	<article class="feature-window raised">
	161	<div class="feature-titlebar"><span>05_changes.diff</span><span aria-hidden="true">■</span></div>
	162	<div class="feature-body"><RetroIcon name="folder" size={38} /><h3>See what<br />actually changed.</h3><p>Inspect file diffs and review the work before you ship it.</p></div>
	163	</article>
	164	<article class="feature-window raised">
	165	<div class="feature-titlebar"><span>06_checkpoint.bak</span><span aria-hidden="true">■</span></div>
	166	<div class="feature-body"><RetroIcon name="disk" size={38} /><h3>A way<br />back.</h3><p>Use turn checkpoints to inspect changes and restore earlier work.</p></div>
	167	</article>
	168	</div>
	169	</section>
	170
	171	<section class="order-section" id="order" aria-labelledby="order-title">
	172	<div class="order-pitch"><h2 id="order-title">For just <span>0 easy payments</span><br />of absolutely nothing.</h2><p>Get the app. Keep your subscriptions.</p><a class="retro-button primary-cta" href="/download"><RetroIcon name="disk" size={25} /><span>GET T3 CODE. IT'S FREE.</span><span aria-hidden="true">→</span></a><p class="offer-note">T3 Code is free. Your AI provider may charge for use.</p></div>
	173	<div class="run-window raised"><div class="window-title"><span>Run</span><RetroIcon name="computer" size={18} /></div><div class="run-body"><p>Too cool for an installer?</p><label for="run-command">Type this in your terminal.</label><div class="command-row"><input id="run-command" class="sunken" value="npx t3" readonly spellcheck="false" aria-label="Terminal command" /><button type="button" class="retro-button" id="copy-command">Copy</button></div><p class="command-feedback" id="command-feedback" role="status">Node.js required. Modem optional.</p><div class="run-divider"></div><b>System requirements</b><ul><li>A modern computer</li><li>A supported coding agent</li><li>A dream, ideally a small one</li></ul><p class="requirements-note">Does not actually run on Windows 95.</p></div></div>
	174	</section>
	175
	176	<section class="faq-section" aria-labelledby="faq-title">
	177	<h2 id="faq-title">Questions</h2>
	178	<details><summary>Wait. Is this a real product?</summary><p>Yes. T3 Code is a real, free, open-source app used by {MARKETING_STATS.users} developers. The packaging is a joke. The app is not. <a href="/">Visit the regular website.</a></p></details>
	179	<details><summary>Does this replace my Claude or Codex subscription?</summary><p>No. T3 Code connects to the coding agents you already use. Keep your provider accounts and subscriptions. T3 Code gives you one app to work with them.</p></details>
	180	<details><summary>Will it run on Windows 95?</summary><p>Absolutely not. We brought back the look, not the driver problems. <a href="/download">Get a build for a current version of Windows, macOS, or Linux.</a></p></details>
	181	<details><summary>Where do I mail my check?</summary><p>Please do not mail us a check for zero dollars. Just download the app. The entire accounts department is a download button.</p></details>
	182	</section>
	183
	184	<footer class="site-footer">
	185	<div class="visitor-counter"><div class="counter-digits" aria-label={`${MARKETING_STATS.users} users`}>{userDigits.map((digit) => <span aria-hidden="true">{digit}</span>)}</div><span>developers use T3 Code.</span></div>
	186	<p>© {new Date().getFullYear()} T3 Tools Inc.</p>
	187	<nav aria-label="Footer"><a href="/">Back to the present</a><a href={GITHUB_REPOSITORY_URL}>GitHub</a><a href="/privacy-policy">Privacy</a><a href="/terms-of-service">Terms</a></nav>
	188	</footer>
	189	</main>
	190
	191	<div class="browser-status"><span class="sunken">Done.</span><span class="sunken"><RetroIcon name="globe" size={14} /> Internet</span><span class="resize-grip" aria-hidden="true"></span></div>
	192	</div>
	193
	194	<div class="minimized-message" id="minimized-message" hidden><RetroIcon name="computer" size={64} /><h1>The future is minimized.</h1><p>Your productivity is one click away.</p><button type="button" class="retro-button" data-restore>Restore T3 Code '95</button></div>
	195	</div>
	196
	197	<div class="taskbar raised">
	198	<details class="start-menu" id="start-menu"><summary class="retro-button start-button"><span class="start-mark" aria-hidden="true"><i></i><i></i><i></i><i></i></span>Start</summary><nav class="start-panel raised" aria-label="Start menu"><div class="start-brand">T3 CODE <b>95</b></div><div><a href="/download"><RetroIcon name="disk" size={24} />Install T3 Code</a><button type="button" data-restore><RetroIcon name="computer" size={24} />Restore the future</button><a href={GITHUB_REPOSITORY_URL}><RetroIcon name="folder" size={24} />Explore source code</a><a href="/"><RetroIcon name="globe" size={24} />Return to the present</a></div></nav></details>
	199	<span class="taskbar-divider" aria-hidden="true"></span>
	200	<button class="task-button sunken" type="button" data-restore><RetroIcon name="globe" size={20} /><span>T3 Code '95</span></button>
	201	<div class="taskbar-clock sunken"><span aria-hidden="true">◷</span><span>4:04 PM</span></div>
	202	</div>
	203
	204	<dialog class="retro-dialog raised" id="sales-dialog" aria-labelledby="dialog-title" aria-describedby="dialog-message"><div class="window-title"><span id="dialog-title">T3 Code '95</span><button type="button" class="retro-button window-control" data-dismiss aria-label="Close dialog">×</button></div><div class="dialog-content"><RetroIcon name="computer" size={42} /><p id="dialog-message"></p></div><div class="dialog-actions"><button class="retro-button" type="button" data-dismiss autofocus>OK, fine.</button><a class="retro-button" href="/download">Get T3 Code</a></div></dialog>
	205
	206	<script>
	207	const salesWindow = document.querySelector<HTMLElement>("#sales-window");
	208	const minimizedMessage = document.querySelector<HTMLElement>("#minimized-message");
	209	const minimizeButton = document.querySelector<HTMLButtonElement>("#minimize");
	210	const maximizeButton = document.querySelector<HTMLButtonElement>("#maximize");
	211	const startMenu = document.querySelector<HTMLDetailsElement>("#start-menu");
	212	const taskButton = document.querySelector<HTMLButtonElement>(".task-button");
	213	const titleBar = document.querySelector<HTMLElement>("#window-title");
	214	const taskbar = document.querySelector<HTMLElement>(".taskbar");
	215	let windowX = 0;
	216	let windowY = 0;
	217
	218	// Keep the entire window above the taskbar, including after a viewport resize.
	219	function moveWindow(x: number, y: number) {
	220	if (!salesWindow \|\| document.body.classList.contains("maximized")) return;
	221	const rect = salesWindow.getBoundingClientRect();
	222	const originX = rect.left - windowX;
	223	const originY = rect.top - windowY;
	224	const bottom = taskbar?.getBoundingClientRect().top ?? window.innerHeight;
	225	windowX = Math.max(-originX, Math.min(x, window.innerWidth - rect.width - originX));
	226	windowY = Math.max(-originY, Math.min(y, bottom - rect.height - originY));
	227	salesWindow.style.setProperty("--window-x", `${windowX}px`);
	228	salesWindow.style.setProperty("--window-y", `${windowY}px`);
	229	}
	230
	231	function toggleMaximize() {
	232	if (!maximizeButton) return;
	233	const maximized = document.body.classList.toggle("maximized");
	234	maximizeButton.setAttribute("aria-pressed", String(maximized));
	235	maximizeButton.setAttribute("aria-label", maximized ? "Restore window size" : "Maximize window");
	236	if (!maximized) moveWindow(windowX, windowY);
	237	}
	238
	239	if (titleBar && salesWindow) {
	240	let drag: { pointerId: number; startX: number; startY: number; x: number; y: number } \| undefined;
	241
	242	titleBar.addEventListener("pointerdown", (event) => {
	243	if (!event.isPrimary \|\| event.button !== 0 \|\| document.body.classList.contains("maximized")) return;
	244	if (event.target instanceof Element && event.target.closest("button")) return;
	245	drag = { pointerId: event.pointerId, startX: event.clientX, startY: event.clientY, x: windowX, y: windowY };
	246	titleBar.focus({ preventScroll: true });
	247	titleBar.setPointerCapture(event.pointerId);
	248	titleBar.classList.add("dragging");
	249	});
	250	titleBar.addEventListener("pointermove", (event) => {
	251	if (!drag \|\| event.pointerId !== drag.pointerId) return;
	252	moveWindow(drag.x + event.clientX - drag.startX, drag.y + event.clientY - drag.startY);
	253	});
	254	const stopDrag = () => {
	255	drag = undefined;
	256	titleBar.classList.remove("dragging");
	257	};
	258	titleBar.addEventListener("pointerup", stopDrag);
	259	titleBar.addEventListener("pointercancel", stopDrag);
	260	titleBar.addEventListener("lostpointercapture", stopDrag);
	261	titleBar.addEventListener("dblclick", (event) => {
	262	if (event.target instanceof Element && event.target.closest("button")) return;
	263	toggleMaximize();
	264	});
	265	titleBar.addEventListener("keydown", (event) => {
	266	if (event.target !== titleBar \|\| event.altKey \|\| event.ctrlKey \|\| event.metaKey) return;
	267	const step = event.shiftKey ? 1 : 10;
	268	switch (event.key) {
	269	case "ArrowLeft": moveWindow(windowX - step, windowY); break;
	270	case "ArrowRight": moveWindow(windowX + step, windowY); break;
	271	case "ArrowUp": moveWindow(windowX, windowY - step); break;
	272	case "ArrowDown": moveWindow(windowX, windowY + step); break;
	273	default: return;
	274	}
	275	event.preventDefault();
	276	});
	277	}
	278
	279	window.addEventListener("resize", () => {
	280	if (!salesWindow?.hidden) moveWindow(windowX, windowY);
	281	});
	282
	283	minimizeButton?.addEventListener("click", () => {
	284	if (!salesWindow \|\| !minimizedMessage) return;
	285	salesWindow.hidden = true;
	286	minimizedMessage.hidden = false;
	287	taskButton?.focus();
	288	});
	289
	290	document.querySelectorAll<HTMLButtonElement>("[data-restore]").forEach((button) => {
	291	button.addEventListener("click", () => {
	292	if (!salesWindow \|\| !minimizedMessage) return;
	293	salesWindow.hidden = false;
	294	minimizedMessage.hidden = true;
	295	if (startMenu) startMenu.open = false;
	296	moveWindow(windowX, windowY);
	297	minimizeButton?.focus({ preventScroll: true });
	298	});
	299	});
	300
	301	maximizeButton?.addEventListener("click", toggleMaximize);
	302
	303	const messages = {
	304	recycle: { title: "Recycle Bin", message: "Contents: 47 abandoned side projects, 12 startup ideas, and one very ambitious TODO comment. T3 Code cannot fix your commitment issues. But it can help you ship." },
	305	close: { title: "Close the future?", message: "You are about to return to a world with too many terminal windows. Are you sure? Our sales department would prefer that you download T3 Code." },
	306	help: { title: "Windows Help", message: "It looks like you're trying to ship software. Have you tried putting all your coding agents in one app? Click Get T3 Code. No paperclip will follow you home." },
	307	};
	308	const dialog = document.querySelector<HTMLDialogElement>("#sales-dialog");
	309	const dialogTitle = document.querySelector<HTMLElement>("#dialog-title");
	310	const dialogMessage = document.querySelector<HTMLElement>("#dialog-message");
	311
	312	document.querySelectorAll<HTMLButtonElement>("[data-dialog]").forEach((button) => {
	313	button.addEventListener("click", () => {
	314	const kind = button.dataset.dialog;
	315	if (!dialog \|\| !dialogTitle \|\| !dialogMessage) return;
	316	if (kind !== "recycle" && kind !== "close" && kind !== "help") return;
	317	dialogTitle.textContent = messages[kind].title;
	318	dialogMessage.textContent = messages[kind].message;
	319	dialog.showModal();
	320	});
	321	});
	322	document.querySelectorAll<HTMLButtonElement>("[data-dismiss]").forEach((button) => {
	323	button.addEventListener("click", () => dialog?.close());
	324	});
	325
	326	document.addEventListener("keydown", (event) => {
	327	if (event.key === "Escape" && startMenu?.open) {
	328	startMenu.open = false;
	329	startMenu.querySelector("summary")?.focus();
	330	}
	331	});
	332	document.addEventListener("click", (event) => {
	333	if (startMenu?.open && event.target instanceof Node && !startMenu.contains(event.target)) {
	334	startMenu.open = false;
	335	}
	336	});
	337
	338	const copyButton = document.querySelector<HTMLButtonElement>("#copy-command");
	339	const command = document.querySelector<HTMLInputElement>("#run-command");
	340	const feedback = document.querySelector<HTMLElement>("#command-feedback");
	341	copyButton?.addEventListener("click", async () => {
	342	if (!command \|\| !feedback) return;
	343	try {
	344	await navigator.clipboard.writeText(command.value);
	345	feedback.textContent = "Copied! Paste it in your terminal. Welcome to the future.";
	346	} catch {
	347	command.focus();
	348	command.select();
	349	feedback.textContent = "Select and copy the command, then paste it in your terminal.";
	350	}
	351	});
	352	</script>
	353	</body>
	354	</html>

apps/marketing/src/styles/retro.css created+1244

...	...	@@ -0,0 +1,1244 @@
	1	/* This page has its own document so the retro styles do not affect other pages. */
	2	:root {
	3	color-scheme: dark;
	4	font-family: Tahoma, Verdana, Arial, sans-serif;
	5	color: #fff;
	6	background: #000;
	7	--silver: #c0c0c0;
	8	--yellow: #eaff00;
	9	--pink: #ff79bd;
	10	--navy: #000080;
	11	}
	12
	13	* {
	14	box-sizing: border-box;
	15	}
	16	body {
	17	margin: 0;
	18	min-width: 320px;
	19	height: 100dvh;
	20	overflow: hidden;
	21	}
	22	button,
	23	input {
	24	font: inherit;
	25	}
	26	button,
	27	a,
	28	summary {
	29	-webkit-tap-highlight-color: transparent;
	30	}
	31	button,
	32	summary {
	33	cursor: pointer;
	34	}
	35	button {
	36	color: inherit;
	37	}
	38	a {
	39	color: inherit;
	40	}
	41	button {
	42	border-radius: 0;
	43	}
	44	svg {
	45	flex-shrink: 0;
	46	}
	47	[hidden] {
	48	display: none !important;
	49	}
	50	:focus-visible {
	51	outline: 2px dashed var(--pink);
	52	outline-offset: 4px;
	53	}
	54	section {
	55	scroll-margin-top: 24px;
	56	}
	57	.skip-link {
	58	position: fixed;
	59	top: -80px;
	60	left: 12px;
	61	z-index: 100;
	62	}
	63	.skip-link:focus {
	64	top: 12px;
	65	}
	66	.raised {
	67	border: 2px solid;
	68	border-color: #fff #333 #333 #fff;
	69	box-shadow:
	70	inset -1px -1px #808080,
	71	inset 1px 1px #dfdfdf;
	72	}
	73	.sunken {
	74	border: 2px solid;
	75	border-color: #808080 #fff #fff #808080;
	76	box-shadow: inset 1px 1px #000;
	77	}
	78	.retro-button {
	79	display: inline-flex;
	80	align-items: center;
	81	justify-content: center;
	82	gap: 9px;
	83	border: 2px solid;
	84	border-color: #fff #000 #000 #fff;
	85	box-shadow:
	86	inset -1px -1px #808080,
	87	inset 1px 1px #dfdfdf;
	88	padding: 8px 16px;
	89	background: var(--silver);
	90	color: #000;
	91	text-decoration: none;
	92	font-size: 12px;
	93	font-weight: 700;
	94	}
	95	.retro-button:active {
	96	border-color: #000 #fff #fff #000;
	97	box-shadow: inset 1px 1px #808080;
	98	}
	99	.retro-button:hover {
	100	background: #d7d7d7;
	101	}
	102	.desktop {
	103	position: fixed;
	104	inset: 0 0 42px;
	105	z-index: 1;
	106	max-width: 1280px;
	107	margin: 0 auto;
	108	padding: 28px 30px 40px 112px;
	109	pointer-events: none;
	110	}
	111	.desktop-icons {
	112	position: absolute;
	113	top: 37px;
	114	left: max(10px, calc((100vw - 1280px) / 2 + 10px));
	115	width: 83px;
	116	display: grid;
	117	gap: 29px;
	118	}
	119	.desktop-icon {
	120	display: flex;
	121	flex-direction: column;
	122	align-items: center;
	123	gap: 7px;
	124	border: 0;
	125	background: none;
	126	color: #fff;
	127	text-align: center;
	128	text-decoration: none;
	129	font-size: 11px;
	130	line-height: 1.4;
	131	padding: 3px 0;
	132	}
	133	.desktop-icon:hover span,
	134	.desktop-icon:focus-visible span {
	135	background: var(--navy);
	136	}
	137	.browser-window {
	138	display: flex;
	139	flex-direction: column;
	140	height: 100%;
	141	min-height: 0;
	142	padding: 3px;
	143	background: var(--silver);
	144	pointer-events: auto;
	145	transform: translate(var(--window-x, 0px), var(--window-y, 0px));
	146	}
	147	.browser-window > :not(main) {
	148	flex-shrink: 0;
	149	}
	150	#window-title {
	151	cursor: grab;
	152	touch-action: none;
	153	user-select: none;
	154	}
	155	#window-title.dragging {
	156	cursor: grabbing;
	157	}
	158	#window-title:focus-visible {
	159	outline-offset: -2px;
	160	}
	161	.window-title {
	162	display: flex;
	163	align-items: center;
	164	justify-content: space-between;
	165	gap: 12px;
	166	min-height: 27px;
	167	padding: 3px 4px 3px 6px;
	168	background: linear-gradient(90deg, #000080, #2253a4);
	169	color: #fff;
	170	font-size: 12px;
	171	font-weight: 700;
	172	}
	173	.window-name {
	174	min-width: 0;
	175	display: flex;
	176	align-items: center;
	177	gap: 7px;
	178	}
	179	.window-name > span {
	180	overflow: hidden;
	181	white-space: nowrap;
	182	text-overflow: ellipsis;
	183	}
	184	.window-controls {
	185	display: flex;
	186	gap: 3px;
	187	}
	188	.window-control {
	189	width: 20px;
	190	height: 20px;
	191	min-width: 20px;
	192	padding: 0;
	193	font:
	194	700 18px Arial,
	195	sans-serif;
	196	}
	197	.window-control:first-child {
	198	font-size: 17px;
	199	}
	200	.maximize-icon {
	201	width: 10px;
	202	height: 10px;
	203	border: 1px solid #000;
	204	border-top-width: 3px;
	205	}
	206	.browser-menu {
	207	display: flex;
	208	align-items: center;
	209	gap: 2px;
	210	padding: 3px 4px;
	211	color: #000;
	212	}
	213	.browser-menu > a,
	214	.browser-menu > button {
	215	padding: 5px 8px;
	216	border: 0;
	217	background: none;
	218	text-decoration: none;
	219	font-size: 11px;
	220	}
	221	.browser-menu > a:hover,
	222	.browser-menu > button:hover {
	223	color: #fff;
	224	background: var(--navy);
	225	}
	226	.address-bar {
	227	display: flex;
	228	align-items: center;
	229	gap: 9px;
	230	padding: 4px 7px 9px;
	231	color: #000;
	232	font-size: 11px;
	233	}
	234	.address-field {
	235	display: flex;
	236	align-items: center;
	237	gap: 7px;
	238	flex: 1;
	239	padding: 4px 6px;
	240	background: #fff;
	241	min-width: 0;
	242	}
	243	.address-field > span {
	244	overflow: hidden;
	245	text-overflow: ellipsis;
	246	white-space: nowrap;
	247	}
	248	.address-go {
	249	align-self: stretch;
	250	padding: 2px 9px;
	251	font-weight: 400;
	252	}
	253	main {
	254	flex: 1;
	255	min-height: 0;
	256	overflow: auto;
	257	overscroll-behavior: contain;
	258	border: 2px solid;
	259	border-color: #555 #fff #fff #555;
	260	background: #000;
	261	}
	262	main::-webkit-scrollbar {
	263	width: 16px;
	264	height: 16px;
	265	}
	266	main::-webkit-scrollbar-track,
	267	main::-webkit-scrollbar-corner {
	268	background: #dfdfdf;
	269	}
	270	main::-webkit-scrollbar-thumb {
	271	border: 2px solid;
	272	border-color: #fff #333 #333 #fff;
	273	background: var(--silver);
	274	box-shadow: inset -1px -1px #808080;
	275	}
	276	.hero {
	277	display: grid;
	278	grid-template-columns: 1.1fr 1fr;
	279	align-items: center;
	280	padding: 16px 35px 20px;
	281	gap: 8px;
	282	}
	283	.hero h1 {
	284	font-size: clamp(36px, 3.4vw, 48px);
	285	letter-spacing: -2px;
	286	}
	287	.hero .hero-explanation {
	288	margin: 14px 0 0;
	289	}
	290	.edition-packages {
	291	display: grid;
	292	grid-template-columns: repeat(2, minmax(0, 1fr));
	293	gap: 16px;
	294	align-items: end;
	295	}
	296	.hero-package {
	297	display: block;
	298	width: min(100%, 170px);
	299	margin: 0 auto;
	300	text-decoration: none;
	301	}
	302	.hero-package > img {
	303	display: block;
	304	width: 100%;
	305	height: auto;
	306	}
	307	.hero-package > .edition-download {
	308	display: flex;
	309	justify-content: center;
	310	padding: 6px 8px;
	311	margin-top: 4px;
	312	font-size: 11px;
	313	background: var(--yellow);
	314	}
	315	.nightly-package > .edition-download {
	316	background: #c9bdff;
	317	}
	318	h1 {
	319	margin: 0;
	320	font:
	321	900 clamp(40px, 4.7vw, 62px)/0.99 Arial,
	322	Helvetica,
	323	sans-serif;
	324	letter-spacing: -3.3px;
	325	}
	326	h1 > span {
	327	color: var(--yellow);
	328	}
	329	.hero-explanation {
	330	max-width: 360px;
	331	margin: 0 0 23px;
	332	font-size: 12px;
	333	line-height: 1.7;
	334	color: #c0c0c0;
	335	}
	336	.primary-cta {
	337	padding: 13px 17px;
	338	gap: 12px;
	339	background: var(--yellow);
	340	border-color: #ffffd1 #737c00 #737c00 #ffffd1;
	341	box-shadow:
	342	inset -1px -1px #a3b000,
	343	inset 1px 1px #ffffbd;
	344	font:
	345	900 13px Arial,
	346	sans-serif;
	347	letter-spacing: 0.3px;
	348	}
	349	.primary-cta > span:last-child {
	350	font-size: 22px;
	351	margin-left: 8px;
	352	}
	353	.primary-cta:hover {
	354	background: #f2ff73;
	355	}
	356	.platform-line {
	357	display: flex;
	358	margin-top: 16px;
	359	flex-wrap: wrap;
	360	align-items: center;
	361	gap: 11px;
	362	font-size: 10px;
	363	}
	364	.platform-line > span {
	365	font:
	366	8px "Courier New",
	367	monospace;
	368	color: #ababab;
	369	letter-spacing: 0.5px;
	370	}
	371	.platform-line > strong {
	372	font-weight: 400;
	373	}
	374	.platform-line > b {
	375	color: #656565;
	376	}
	377	.box-95 {
	378	position: absolute;
	379	right: 9px;
	380	bottom: -6px;
	381	font:
	382	italic 900 75px Arial,
	383	sans-serif;
	384	color: var(--yellow);
	385	letter-spacing: -6px;
	386	}
	387	.agents-section {
	388	padding: 14px 35px 24px;
	389	border-top: 1px solid #363636;
	390	border-bottom: 1px solid #363636;
	391	}
	392	.agent-list {
	393	display: grid;
	394	grid-template-columns: repeat(3, minmax(0, 1fr));
	395	gap: 26px 20px;
	396	margin: 10px 0 24px;
	397	}
	398	.agent {
	399	min-width: 0;
	400	margin: 0;
	401	text-align: center;
	402	}
	403	.agent-box {
	404	display: block;
	405	width: 100%;
	406	max-width: 200px;
	407	height: auto;
	408	margin: 0 auto;
	409	object-fit: contain;
	410	}
	411	.agents-section > .section-heading {
	412	margin-bottom: 0;
	413	}
	414	.agent > figcaption {
	415	padding: 12px 4px 0;
	416	border-top: 3px ridge #777;
	417	}
	418	.agent h3 {
	419	margin: 0 0 6px;
	420	font-size: 14px;
	421	}
	422	.agent p {
	423	max-width: 27ch;
	424	margin: 0 auto;
	425	color: var(--yellow);
	426	font:
	427	11px/1.5 "Courier New",
	428	monospace;
	429	}
	430	.agents-note {
	431	margin: 0;
	432	color: #aaa;
	433	font:
	434	9px/1.5 "Courier New",
	435	monospace;
	436	}
	437	.features-section {
	438	padding: 33px 35px 38px;
	439	}
	440	.section-heading {
	441	display: flex;
	442	justify-content: space-between;
	443	align-items: baseline;
	444	gap: 20px;
	445	margin-bottom: 21px;
	446	}
	447	.section-heading h2 {
	448	font:
	449	900 20px/1.2 Arial,
	450	sans-serif;
	451	letter-spacing: -0.6px;
	452	margin: 0;
	453	}
	454	.section-heading h2 > span {
	455	color: var(--yellow);
	456	}
	457	.section-heading > span {
	458	font:
	459	8px/1.5 "Courier New",
	460	monospace;
	461	color: #aaa;
	462	text-align: right;
	463	}
	464	.feature-grid {
	465	display: grid;
	466	grid-template-columns: repeat(3, 1fr);
	467	gap: 15px;
	468	}
	469	.feature-window {
	470	min-width: 0;
	471	padding: 3px;
	472	background: var(--silver);
	473	}
	474	.feature-titlebar {
	475	display: flex;
	476	justify-content: space-between;
	477	gap: 5px;
	478	padding: 5px 6px;
	479	background: #393939;
	480	font:
	481	9px "Courier New",
	482	monospace;
	483	}
	484	.feature-body {
	485	background: #0b0b0b;
	486	padding: 18px 15px 17px;
	487	display: flex;
	488	flex-direction: column;
	489	align-items: flex-start;
	490	height: calc(100% - 21px);
	491	}
	492	.feature-body h3 {
	493	font:
	494	700 18px/1.15 Arial,
	495	sans-serif;
	496	margin: 16px 0 12px;
	497	letter-spacing: -0.3px;
	498	}
	499	.feature-body p {
	500	margin: 0 0 22px;
	501	color: #c0c0c0;
	502	font-size: 11px;
	503	line-height: 1.7;
	504	}
	505	.feature-tag {
	506	display: block;
	507	margin-top: auto;
	508	color: var(--yellow);
	509	font:
	510	700 8px/1.6 "Courier New",
	511	monospace;
	512	letter-spacing: 0.3px;
	513	text-decoration: none;
	514	}
	515	a.feature-tag {
	516	text-decoration: underline;
	517	text-underline-offset: 3px;
	518	}
	519	.order-section {
	520	position: relative;
	521	display: grid;
	522	grid-template-columns: 1.35fr 1fr;
	523	gap: 45px;
	524	padding: 32px 35px;
	525	border-top: 1px solid #546124;
	526	border-bottom: 1px solid #546124;
	527	background: #121707;
	528	align-items: center;
	529	}
	530	.order-pitch h2 {
	531	font:
	532	900 30px/1.1 Arial,
	533	sans-serif;
	534	letter-spacing: -1px;
	535	margin: 15px 0 12px;
	536	}
	537	.order-pitch h2 > span {
	538	color: var(--yellow);
	539	}
	540	.order-pitch > p {
	541	font-size: 11px;
	542	line-height: 1.6;
	543	margin: 0 0 23px;
	544	}
	545	.order-pitch .offer-note {
	546	color: #b9bea9;
	547	font:
	548	9px/1.7 "Courier New",
	549	monospace;
	550	margin: 13px 0 0;
	551	}
	552	.run-window {
	553	padding: 3px;
	554	background: var(--silver);
	555	color: #000;
	556	}
	557	.run-window .window-title {
	558	min-height: 23px;
	559	font-size: 11px;
	560	}
	561	.run-body {
	562	padding: 14px 13px;
	563	font-size: 11px;
	564	}
	565	.run-body > p:first-child {
	566	margin: 0 0 14px;
	567	font-weight: 700;
	568	}
	569	.run-body label {
	570	font-size: 10px;
	571	}
	572	.command-row {
	573	display: flex;
	574	gap: 7px;
	575	margin-top: 7px;
	576	}
	577	.command-row input {
	578	width: 0;
	579	min-width: 0;
	580	flex: 1;
	581	border-radius: 0;
	582	padding: 7px 8px;
	583	background: #fff;
	584	color: #000;
	585	font:
	586	700 15px "Courier New",
	587	monospace;
	588	}
	589	.command-row button {
	590	padding: 5px 12px;
	591	}
	592	.command-feedback {
	593	min-height: 27px;
	594	margin: 8px 0 10px;
	595	font:
	596	9px/1.5 "Courier New",
	597	monospace;
	598	}
	599	.run-divider {
	600	border-top: 1px solid #808080;
	601	border-bottom: 1px solid #fff;
	602	margin: 0 0 13px;
	603	}
	604	.run-body > b {
	605	font-size: 10px;
	606	}
	607	.run-body ul {
	608	padding-left: 17px;
	609	margin: 7px 0 10px;
	610	font-size: 10px;
	611	line-height: 1.8;
	612	}
	613	.requirements-note {
	614	font:
	615	8px "Courier New",
	616	monospace;
	617	margin-bottom: 0;
	618	}
	619	.faq-section {
	620	padding: 34px 35px;
	621	}
	622	.faq-section > h2 {
	623	margin: 0 0 20px;
	624	color: var(--pink);
	625	font:
	626	700 11px "Courier New",
	627	monospace;
	628	}
	629	.faq-section > details {
	630	border-top: 1px dotted #626262;
	631	}
	632	.faq-section > details:last-child {
	633	border-bottom: 1px dotted #626262;
	634	}
	635	.faq-section summary {
	636	padding: 13px 2px;
	637	font-size: 12px;
	638	}
	639	.faq-section summary::marker {
	640	color: var(--yellow);
	641	}
	642	.faq-section details p {
	643	margin: 0;
	644	padding: 0 20px 16px;
	645	color: #c0c0c0;
	646	font-size: 11px;
	647	line-height: 1.7;
	648	max-width: 740px;
	649	}
	650	.faq-section a {
	651	color: var(--yellow);
	652	text-underline-offset: 3px;
	653	}
	654	.site-footer {
	655	margin: 0 35px;
	656	padding: 25px 0 27px;
	657	text-align: center;
	658	border-top: 1px solid #363636;
	659	}
	660	.visitor-counter {
	661	display: flex;
	662	align-items: center;
	663	justify-content: center;
	664	flex-wrap: wrap;
	665	gap: 12px;
	666	font:
	667	9px "Courier New",
	668	monospace;
	669	color: #c0c0c0;
	670	}
	671	.counter-digits {
	672	display: inline-flex;
	673	gap: 2px;
	674	padding: 3px;
	675	border: 2px inset #666;
	676	background: #141414;
	677	}
	678	.counter-digits > span {
	679	display: block;
	680	padding: 2px 4px;
	681	background: #252b1a;
	682	color: var(--yellow);
	683	font:
	684	700 15px "Courier New",
	685	monospace;
	686	}
	687	.site-footer > p {
	688	color: #b0b0b0;
	689	font:
	690	9px/1.6 "Courier New",
	691	monospace;
	692	margin: 0 0 10px;
	693	}
	694	.site-footer nav {
	695	display: flex;
	696	flex-wrap: wrap;
	697	gap: 18px;
	698	justify-content: center;
	699	font:
	700	9px "Courier New",
	701	monospace;
	702	}
	703	.site-footer nav a {
	704	color: var(--pink);
	705	text-underline-offset: 3px;
	706	}
	707	.browser-status {
	708	display: flex;
	709	align-items: stretch;
	710	gap: 4px;
	711	height: 24px;
	712	padding-top: 4px;
	713	color: #000;
	714	font-size: 10px;
	715	}
	716	.browser-status > span {
	717	display: flex;
	718	align-items: center;
	719	gap: 4px;
	720	padding: 2px 4px;
	721	}
	722	.browser-status > span:first-child {
	723	flex: 1;
	724	}
	725	.browser-status > span:nth-child(2) {
	726	min-width: 120px;
	727	}
	728	.resize-grip {
	729	width: 13px;
	730	background: repeating-linear-gradient(135deg, transparent 0 2px, #808080 2px 3px, #fff 3px 4px);
	731	clip-path: polygon(100% 0, 100% 100%, 0 100%);
	732	}
	733	.taskbar {
	734	position: fixed;
	735	z-index: 10;
	736	left: 0;
	737	right: 0;
	738	bottom: 0;
	739	min-height: 40px;
	740	padding: 3px 5px;
	741	background: var(--silver);
	742	color: #000;
	743	display: flex;
	744	align-items: center;
	745	gap: 8px;
	746	}
	747	.start-menu {
	748	position: relative;
	749	}
	750	.start-button {
	751	gap: 7px;
	752	padding: 4px 8px;
	753	min-height: 30px;
	754	font-size: 14px;
	755	list-style: none;
	756	}
	757	.start-button::-webkit-details-marker {
	758	display: none;
	759	}
	760	.start-mark {
	761	display: grid;
	762	grid-template-columns: 8px 8px;
	763	gap: 2px;
	764	transform: skewY(-8deg);
	765	}
	766	.start-mark i {
	767	width: 8px;
	768	height: 8px;
	769	background: #f3433c;
	770	}
	771	.start-mark i:nth-child(2) {
	772	background: #75b53c;
	773	}
	774	.start-mark i:nth-child(3) {
	775	background: #347be3;
	776	}
	777	.start-mark i:nth-child(4) {
	778	background: #ffe348;
	779	}
	780	.start-panel {
	781	position: absolute;
	782	bottom: calc(100% + 5px);
	783	left: -1px;
	784	display: flex;
	785	width: 253px;
	786	padding: 3px;
	787	background: var(--silver);
	788	}
	789	.start-brand {
	790	writing-mode: vertical-rl;
	791	transform: rotate(180deg);
	792	background: #808080;
	793	color: #dedede;
	794	padding: 12px 8px;
	795	font:
	796	900 18px Arial,
	797	sans-serif;
	798	white-space: nowrap;
	799	}
	800	.start-brand b {
	801	color: #fff;
	802	}
	803	.start-panel > div:last-child {
	804	flex: 1;
	805	}
	806	.start-panel a,
	807	.start-panel button {
	808	display: flex;
	809	align-items: center;
	810	gap: 10px;
	811	padding: 12px 10px;
	812	width: 100%;
	813	background: none;
	814	border: 0;
	815	color: #000;
	816	text-decoration: none;
	817	font-size: 11px;
	818	text-align: left;
	819	}
	820	.start-panel a:hover,
	821	.start-panel button:hover {
	822	background: var(--navy);
	823	color: #fff;
	824	}
	825	.taskbar-divider {
	826	align-self: stretch;
	827	border-left: 1px solid #808080;
	828	border-right: 1px solid #fff;
	829	}
	830	.task-button {
	831	display: flex;
	832	align-items: center;
	833	gap: 8px;
	834	background: #d7d7d7;
	835	color: #000;
	836	padding: 3px 8px;
	837	min-height: 29px;
	838	min-width: 170px;
	839	font-size: 11px;
	840	font-weight: 700;
	841	text-align: left;
	842	}
	843	.taskbar-clock {
	844	margin-left: auto;
	845	display: flex;
	846	align-items: center;
	847	justify-content: center;
	848	gap: 9px;
	849	padding: 4px 10px;
	850	min-height: 29px;
	851	font-size: 11px;
	852	white-space: nowrap;
	853	}
	854	.taskbar-clock > span:first-child {
	855	font-size: 16px;
	856	}
	857	.maximized .desktop {
	858	max-width: none;
	859	padding: 0;
	860	}
	861	.maximized .browser-window {
	862	transform: none;
	863	}
	864	.maximized #window-title {
	865	cursor: default;
	866	}
	867	.minimized-message {
	868	height: 100%;
	869	pointer-events: auto;
	870	display: flex;
	871	flex-direction: column;
	872	align-items: center;
	873	justify-content: center;
	874	gap: 15px;
	875	text-align: center;
	876	}
	877	.minimized-message h1 {
	878	font:
	879	700 25px Arial,
	880	sans-serif;
	881	letter-spacing: -0.5px;
	882	}
	883	.minimized-message p {
	884	font:
	885	12px "Courier New",
	886	monospace;
	887	margin: 0 0 10px;
	888	}
	889	.retro-dialog {
	890	width: min(440px, calc(100vw - 32px));
	891	padding: 3px;
	892	background: var(--silver);
	893	color: #000;
	894	}
	895	.retro-dialog::backdrop {
	896	background: #000b;
	897	}
	898	.dialog-content {
	899	display: flex;
	900	align-items: center;
	901	gap: 20px;
	902	padding: 22px 20px 13px;
	903	}
	904	.dialog-content > p {
	905	font-size: 12px;
	906	line-height: 1.7;
	907	margin: 0;
	908	}
	909	.dialog-actions {
	910	display: flex;
	911	justify-content: flex-end;
	912	gap: 8px;
	913	padding: 8px 16px 17px;
	914	}
	915
	916	@media (min-width: 1450px) {
	917	.maximized .hero {
	918	grid-template-columns: 1fr 1fr;
	919	padding-left: 65px;
	920	padding-right: 65px;
	921	}
	922	.maximized h1 {
	923	font-size: 76px;
	924	}
	925	}
	926
	927	@media (max-width: 1100px) {
	928	.desktop {
	929	padding-left: 98px;
	930	padding-right: 15px;
	931	}
	932	.hero {
	933	padding-left: 25px;
	934	padding-right: 25px;
	935	}
	936	h1 {
	937	font-size: 47px;
	938	letter-spacing: -2.6px;
	939	}
	940	.order-section {
	941	gap: 23px;
	942	}
	943	.order-pitch h2 {
	944	font-size: 27px;
	945	}
	946	.feature-grid {
	947	gap: 10px;
	948	}
	949	.feature-body {
	950	padding: 15px 11px;
	951	}
	952	}
	953
	954	@media (max-width: 820px) {
	955	.desktop {
	956	padding: 14px 12px;
	957	}
	958	.desktop-icons {
	959	display: none;
	960	}
	961	.hero {
	962	grid-template-columns: 1.1fr 0.9fr;
	963	gap: 0;
	964	padding-top: 29px;
	965	}
	966	h1 {
	967	font-size: 44px;
	968	}
	969	.hero-explanation {
	970	max-width: 295px;
	971	}
	972	.primary-cta {
	973	font-size: 11px;
	974	gap: 7px;
	975	padding: 12px;
	976	}
	977	.primary-cta > span:last-child {
	978	margin-left: 3px;
	979	}
	980	.section-heading {
	981	display: block;
	982	}
	983	.section-heading > span {
	984	display: block;
	985	text-align: left;
	986	margin-top: 8px;
	987	}
	988	.agents-section,
	989	.features-section,
	990	.order-section,
	991	.faq-section {
	992	padding-left: 25px;
	993	padding-right: 25px;
	994	}
	995	.site-footer {
	996	margin-left: 25px;
	997	margin-right: 25px;
	998	}
	999	.feature-body h3 {
	1000	font-size: 16px;
	1001	}
	1002	.taskbar-clock {
	1003	margin-left: auto;
	1004	}
	1005	}
	1006
	1007	@media (max-width: 620px) {
	1008	.browser-menu {
	1009	flex-wrap: wrap;
	1010	}
	1011	.hero-package {
	1012	width: min(100%, 160px);
	1013	}
	1014	.edition-packages {
	1015	width: 100%;
	1016	margin-top: 12px;
	1017	}
	1018	.desktop {
	1019	padding: 9px 7px;
	1020	}
	1021	.window-name {
	1022	font-size: 10px;
	1023	}
	1024	.window-controls {
	1025	gap: 2px;
	1026	}
	1027	.browser-menu {
	1028	gap: 0;
	1029	}
	1030	.browser-menu > a,
	1031	.browser-menu > button {
	1032	padding: 6px 7px;
	1033	font-size: 10px;
	1034	}
	1035	.address-bar {
	1036	padding: 3px 4px 7px;
	1037	gap: 6px;
	1038	font-size: 10px;
	1039	}
	1040	.address-go {
	1041	font-size: 10px;
	1042	}
	1043	.hero {
	1044	display: flex;
	1045	flex-direction: column;
	1046	align-items: stretch;
	1047	padding: 29px 20px 15px;
	1048	}
	1049	h1 {
	1050	font-size: clamp(41px, 10.5vw, 63px);
	1051	letter-spacing: -2.5px;
	1052	}
	1053	.hero-explanation {
	1054	max-width: 420px;
	1055	font-size: 11px;
	1056	}
	1057	.primary-cta {
	1058	font-size: 12px;
	1059	padding: 12px 15px;
	1060	gap: 10px;
	1061	}
	1062	.platform-line {
	1063	font-size: 9px;
	1064	gap: 9px;
	1065	}
	1066	.agents-section,
	1067	.features-section,
	1068	.order-section,
	1069	.faq-section {
	1070	padding: 25px 20px;
	1071	}
	1072	.agent-list {
	1073	grid-template-columns: repeat(2, minmax(0, 1fr));
	1074	gap: 22px 12px;
	1075	margin-top: 20px;
	1076	}
	1077	.agent h3 {
	1078	font-size: 13px;
	1079	}
	1080	.agent p {
	1081	font-size: 10px;
	1082	}
	1083	.agents-note {
	1084	font-size: 8px;
	1085	}
	1086	.section-heading h2 {
	1087	font-size: 20px;
	1088	}
	1089	.section-heading h2 > span {
	1090	display: block;
	1091	}
	1092	.feature-grid {
	1093	grid-template-columns: 1fr;
	1094	gap: 17px;
	1095	}
	1096	.feature-body {
	1097	padding: 17px;
	1098	height: auto;
	1099	}
	1100	.feature-body h3 {
	1101	font-size: 21px;
	1102	margin-top: 13px;
	1103	}
	1104	.feature-body p {
	1105	font-size: 12px;
	1106	margin-bottom: 18px;
	1107	}
	1108	.feature-tag {
	1109	font-size: 9px;
	1110	}
	1111	.feature-titlebar {
	1112	font-size: 10px;
	1113	}
	1114	.order-section {
	1115	grid-template-columns: 1fr;
	1116	gap: 25px;
	1117	}
	1118	.order-pitch h2 {
	1119	font-size: 29px;
	1120	}
	1121	.order-pitch > p {
	1122	font-size: 11px;
	1123	}
	1124	.run-body {
	1125	padding: 16px;
	1126	}
	1127	.command-feedback {
	1128	min-height: 15px;
	1129	}
	1130	.faq-section h2 {
	1131	font-size: 10px;
	1132	line-height: 1.5;
	1133	}
	1134	.faq-section summary {
	1135	font-size: 11px;
	1136	line-height: 1.5;
	1137	}
	1138	.site-footer {
	1139	margin-left: 20px;
	1140	margin-right: 20px;
	1141	}
	1142	.visitor-counter {
	1143	font-size: 8px;
	1144	}
	1145	.site-footer > p {
	1146	font-size: 8px;
	1147	}
	1148	.site-footer nav {
	1149	font-size: 8px;
	1150	gap: 15px;
	1151	}
	1152	.browser-status {
	1153	font-size: 8px;
	1154	height: 26px;
	1155	}
	1156	.browser-status > span:nth-child(2) {
	1157	min-width: 67px;
	1158	}
	1159	.browser-status > span:first-child {
	1160	white-space: nowrap;
	1161	overflow: hidden;
	1162	}
	1163	.resize-grip {
	1164	display: none !important;
	1165	}
	1166	.taskbar {
	1167	gap: 6px;
	1168	}
	1169	.task-button {
	1170	min-width: 0;
	1171	flex: 1;
	1172	max-width: 170px;
	1173	}
	1174	.taskbar-clock {
	1175	padding: 4px 7px;
	1176	gap: 5px;
	1177	font-size: 10px;
	1178	}
	1179	.dialog-content {
	1180	padding: 19px 13px 10px;
	1181	gap: 12px;
	1182	}
	1183	}
	1184
	1185	@media (max-width: 620px) {
	1186	.hero {
	1187	padding-top: 14px;
	1188	padding-bottom: 14px;
	1189	}
	1190	.hero h1 {
	1191	font-size: 30px;
	1192	}
	1193	.hero-package {
	1194	max-width: 120px;
	1195	}
	1196	.hero .platform-line {
	1197	display: none;
	1198	}
	1199	.agents-section {
	1200	padding-top: 14px;
	1201	}
	1202	.agents-section .agent-list {
	1203	margin-top: 8px;
	1204	}
	1205	}
	1206
	1207	@media (min-width: 821px) and (max-height: 820px) {
	1208	.hero {
	1209	padding-top: 10px;
	1210	padding-bottom: 12px;
	1211	}
	1212	.hero h1 {
	1213	font-size: 40px;
	1214	}
	1215	.hero-package {
	1216	max-width: 140px;
	1217	}
	1218	.agent-box {
	1219	max-width: 180px;
	1220	}
	1221	.agents-section {
	1222	padding-top: 8px;
	1223	}
	1224	}
	1225
	1226	@media (max-width: 360px) {
	1227	.hero-package {
	1228	max-width: 110px;
	1229	}
	1230	.hero,
	1231	.agents-section,
	1232	.features-section,
	1233	.order-section,
	1234	.faq-section {
	1235	padding-left: 14px;
	1236	padding-right: 14px;
	1237	}
	1238	.primary-cta {
	1239	font-size: 10px;
	1240	}
	1241	.taskbar-clock > span:first-child {
	1242	display: none;
	1243	}
	1244	}