clover's git

the-knife

1	---
2	import type { ComponentProps } from "astro/types";
3	import { Image } from "astro:assets";
4	import iconStable from "../assets/icon.webp";
5	import iconNightly from "../assets/icon-nightly.webp";
6	import Layout from "../layouts/Layout.astro";
7	import { RELEASES_URL } from "../lib/releases";
8	import { ANDROID_PLAY_STORE_URL, IOS_APP_STORE_URL } from "../lib/site";
9
10	const imageProps = {
11	alt: "",
12	densities: [1, 2, 3],
13	format: "webp",
14	quality: 90,
15	decoding: "async",
16	} satisfies Partial<ComponentProps<typeof Image>>;
17	---
18
19	<Layout title="Download — T3 Code" description="Download T3 Code for macOS, Windows, or Linux.">
20	<div class="download-page" id="download-page" data-channel="stable">
21	<!-- The sky lives behind the header and fades to the page. It only shows on the nightly channel. -->
22	<header class="download-head">
23	<div class="sky" aria-hidden="true"></div>
24	<div class="head-inner" data-rise>
25	<span class="head-icon">
26	<Image class="head-icon--stable" src={iconStable} width={64} height={64} loading="eager" {...imageProps} />
27	<Image class="head-icon--nightly" src={iconNightly} width={64} height={64} loading="eager" {...imageProps} />
28	</span>
29	<h1 class="heading">Download T3 Code</h1>
30	</div>
31	<div class="channel-toggle" role="tablist" aria-label="Release channel" data-rise style="--d:90ms">
32	<span class="channel-thumb" aria-hidden="true"></span>
33	<button type="button" role="tab" data-channel="stable" aria-selected="true">Stable</button>
34	<button type="button" role="tab" data-channel="nightly" aria-selected="false">Nightly</button>
35	</div>
36	<p class="head-meta" data-rise style="--d:180ms">
37	<a id="changelog-link" class="changelog-link" href={RELEASES_URL} target="_blank" rel="noopener noreferrer">
38	<span id="version-label">&nbsp;</span><span aria-hidden="true"> &#8599;</span>
39	</a>
40	</p>
41	</header>
42
43	<div class="platforms">
44	<!-- macOS -->
45	<section class="platform-section" data-rise style="--d:240ms">
46	<div class="platform-header">
47	<svg class="platform-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 814 1000" aria-hidden="true"><path fill="currentColor" d="M788.1 340.9c-5.8 4.5-108.2 62.2-108.2 190.5 0 148.4 130.3 200.9 134.2 202.2-.6 3.2-20.7 71.9-68.7 141.9-42.8 61.6-87.5 123.1-155.5 123.1s-85.5-39.5-164-39.5c-76.5 0-103.7 40.8-165.9 40.8s-105.6-57-155.5-127C46.7 790.7 0 663 0 541.8c0-194.4 126.4-297.5 250.8-297.5 66.1 0 121.2 43.4 162.7 43.4 39.5 0 101.1-46 176.3-46 28.5 0 130.9 2.6 198.3 99.2zm-234-181.5c31.1-36.9 53.1-88.1 53.1-139.3 0-7.1-.6-14.3-1.9-20.1-50.6 1.9-110.8 33.7-147.1 75.8-28.5 32.4-55.1 83.6-55.1 135.5 0 7.8 1.3 15.6 1.9 18.1 3.2.6 8.4 1.3 13.6 1.3 45.4 0 102.5-30.4 135.5-71.3z"/></svg>
48	<h2 class="platform-name">macOS</h2>
49	</div>
50	<div class="download-cards">
51	<a class="download-card" data-asset="arm64.dmg" href={RELEASES_URL}>
52	<span class="card-icon">
53	<Image class="card-icon--stable" src={iconStable} width={28} height={28} loading="lazy" {...imageProps} />
54	<Image class="card-icon--nightly" src={iconNightly} width={28} height={28} loading="lazy" {...imageProps} />
55	</span>
56	<span class="card-text">
57	<span class="card-arch">Apple Silicon (arm64)</span>
58	<span class="card-format">.dmg</span>
59	</span>
60	</a>
61	</div>
62	<p class="intel-note">
63	On an Intel Mac? <a data-asset="x64.dmg" href={RELEASES_URL}>Download the x64 build</a>.
64	</p>
65	</section>
66
67	<!-- Windows -->
68	<section class="platform-section" data-rise style="--d:300ms">
69	<div class="platform-header">
70	<svg class="platform-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 88 88" aria-hidden="true"><path fill="currentColor" d="m0 12.402 35.687-4.86.016 34.423-35.67.203zm35.67 33.529.028 34.453L.028 75.48.026 45.7zm4.326-39.025L87.314 0v41.527l-47.318.376zm47.329 39.349-.011 41.34-47.318-6.678-.066-34.739z"/></svg>
71	<h2 class="platform-name">Windows</h2>
72	</div>
73	<div class="download-cards">
74	<a class="download-card" data-asset="x64.exe" href={RELEASES_URL}>
75	<span class="card-icon">
76	<Image class="card-icon--stable" src={iconStable} width={28} height={28} loading="lazy" {...imageProps} />
77	<Image class="card-icon--nightly" src={iconNightly} width={28} height={28} loading="lazy" {...imageProps} />
78	</span>
79	<span class="card-text">
80	<span class="card-arch">Windows 10, 11</span>
81	<span class="card-format">.exe</span>
82	</span>
83	</a>
84	</div>
85	</section>
86
87	<!-- Linux -->
88	<section class="platform-section" data-rise style="--d:360ms">
89	<div class="platform-header">
90	<svg class="platform-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true"><path fill="currentColor" d="M12.504 0c-.155 0-.315.008-.48.021-4.226.333-3.105 4.807-3.17 6.298-.076 1.092-.3 1.953-1.05 3.02-.885 1.051-2.127 2.75-2.716 4.521-.278.832-.41 1.684-.287 2.489a.424.424 0 00-.11.135c-.26.268-.45.6-.663.839-.199.199-.485.267-.797.4-.313.136-.658.269-.864.68-.09.189-.136.394-.132.602 0 .199.027.4.055.536.058.399.116.728.04.97-.249.68-.28 1.145-.106 1.484.174.334.535.47.94.601.81.2 1.91.135 2.774.6.926.466 1.866.67 2.616.47.526-.116.97-.464 1.208-.946.587-.003 1.23-.269 2.26-.334.699-.058 1.574.267 2.577.2.025.134.063.198.114.333l.003.003c.391.778 1.113 1.132 1.884 1.071.771-.06 1.592-.536 2.257-1.306.631-.765 1.683-1.084 2.378-1.503.348-.199.629-.469.649-.853.023-.4-.2-.811-.714-1.376v-.097l-.003-.003c-.17-.2-.25-.535-.338-.926-.085-.401-.182-.786-.492-1.046h-.003c-.059-.054-.123-.067-.188-.135a.357.357 0 00-.19-.064c.431-1.278.264-2.55-.173-3.694-.533-1.41-1.465-2.638-2.175-3.483-.796-1.005-1.576-1.957-1.56-3.368.026-2.152.236-6.133-3.544-6.139zm.529 3.405h.013c.213 0 .396.062.584.198.19.135.33.332.438.533.105.259.158.459.166.724 0-.02.006-.04.006-.06v.105a.086.086 0 01-.004-.021l-.004-.024a1.807 1.807 0 01-.15.706.953.953 0 01-.213.335.71.71 0 00-.088-.042c-.104-.045-.198-.064-.284-.133a1.312 1.312 0 00-.22-.066c.05-.06.146-.133.183-.198.053-.128.082-.264.088-.402v-.02a1.21 1.21 0 00-.061-.4c-.045-.134-.101-.2-.183-.333-.084-.066-.167-.132-.267-.132h-.016c-.093 0-.176.03-.262.132a.8.8 0 00-.205.334 1.18 1.18 0 00-.09.4v.019c.002.089.008.179.02.267-.193-.067-.438-.135-.607-.202a1.635 1.635 0 01-.018-.2v-.02a1.772 1.772 0 01.15-.768c.082-.22.232-.406.43-.533a.985.985 0 01.594-.2zm-2.962.059h.036c.142 0 .27.048.399.135.146.129.264.288.344.465.09.199.14.4.153.667v.004c.007.134.006.2-.002.266v.08c-.03.007-.056.018-.083.024-.152.055-.274.135-.393.2.012-.09.013-.18.003-.267v-.015c-.012-.133-.04-.2-.082-.333a.613.613 0 00-.166-.267.248.248 0 00-.183-.064h-.021c-.071.006-.13.04-.186.132a.552.552 0 00-.12.27.944.944 0 00-.023.33v.015c.012.135.037.2.08.334.046.134.098.2.166.268.01.009.02.018.034.024-.07.057-.117.07-.176.136a.304.304 0 01-.131.068 2.62 2.62 0 01-.275-.402 1.772 1.772 0 01-.155-.667 1.759 1.759 0 01.08-.668 1.43 1.43 0 01.283-.535c.128-.133.26-.2.418-.2zm1.37 1.706c.332 0 .733.065 1.216.399.293.2.523.269 1.052.468h.003c.255.136.405.266.478.399v-.131a.571.571 0 01.016.47c-.123.31-.516.643-1.063.842v.002c-.268.135-.501.333-.775.465-.276.135-.588.292-1.012.267a1.139 1.139 0 01-.448-.067 3.566 3.566 0 01-.322-.198c-.195-.135-.363-.332-.612-.465v-.005h-.005c-.4-.246-.616-.512-.686-.71-.07-.268-.005-.47.193-.6.224-.135.38-.271.483-.336.104-.074.143-.102.176-.131h.002v-.003c.169-.202.436-.47.839-.601.139-.036.294-.065.466-.065zm2.8 2.142c.358 1.417 1.196 3.475 1.735 4.473.286.534.855 1.659 1.102 3.024.156-.005.33.018.513.064.646-1.671-.546-3.467-1.089-3.966-.22-.2-.232-.335-.123-.335.59.534 1.365 1.572 1.646 2.757.13.535.16 1.104.021 1.67.067.028.135.06.205.067 1.032.534 1.413.938 1.23 1.537v-.043c-.06-.003-.12 0-.18 0h-.016c.151-.467-.182-.825-1.065-1.224-.915-.4-1.646-.336-1.77.465-.008.043-.013.066-.018.135-.068.023-.139.053-.209.064-.43.268-.662.669-.793 1.187-.13.533-.17 1.156-.205 1.869v.003c-.02.334-.17.838-.319 1.35-1.5 1.072-3.58 1.538-5.348.334a2.645 2.645 0 00-.402-.533 1.45 1.45 0 00-.275-.333c.182 0 .338-.03.465-.067a.615.615 0 00.314-.334c.108-.267 0-.697-.345-1.163-.345-.467-.931-.995-1.788-1.521-.63-.4-.986-.87-1.15-1.396-.165-.534-.143-1.085-.015-1.645.245-1.07.873-2.11 1.274-2.763.107-.065.037.135-.408.974-.396.751-1.14 2.497-.122 3.854a8.123 8.123 0 01.647-2.876c.564-1.278 1.743-3.504 1.836-5.268.048.036.217.135.289.202.218.133.38.333.59.465.21.201.477.335.876.335.039.003.075.006.11.006.412 0 .73-.134.997-.268.29-.134.52-.334.74-.4h.005c.467-.135.835-.402 1.044-.7zm2.185 8.958c.037.6.343 1.245.882 1.377.588.134 1.434-.333 1.791-.765l.211-.01c.315-.007.577.01.847.268l.003.003c.208.199.305.53.391.876.085.4.154.78.409 1.066.486.527.645.906.636 1.14l.003-.007v.018l-.003-.012c-.015.262-.185.396-.498.595-.63.401-1.746.712-2.457 1.57-.618.737-1.37 1.14-2.036 1.191-.664.053-1.237-.2-1.574-.898l-.005-.003c-.21-.4-.12-1.025.056-1.69.176-.668.428-1.344.463-1.897.037-.714.076-1.335.195-1.814.12-.465.308-.797.641-.984l.045-.022zm-10.814.049h.01c.053 0 .105.005.157.014.376.055.706.333 1.023.752l.91 1.664.003.003c.243.533.754 1.064 1.189 1.637.434.598.77 1.131.729 1.57v.006c-.057.744-.48 1.148-1.125 1.294-.645.135-1.52.002-2.395-.464-.968-.536-2.118-.469-2.857-.602-.369-.066-.61-.2-.723-.4-.11-.2-.113-.602.123-1.23v-.004l.002-.003c.117-.334.03-.752-.027-1.118-.055-.401-.083-.71.043-.94.16-.334.396-.4.69-.533.294-.135.64-.202.915-.47h.002v-.002c.256-.268.445-.601.668-.838.19-.201.38-.336.663-.336zm7.159-9.074c-.435.201-.945.535-1.488.535-.542 0-.97-.267-1.28-.466-.154-.134-.28-.268-.373-.335-.164-.134-.144-.333-.074-.333.109.016.129.134.199.2.096.066.215.2.36.333.292.2.68.467 1.167.467.485 0 1.053-.267 1.398-.466.195-.135.445-.334.648-.467.156-.136.149-.267.279-.267.128.016.034.134-.147.332a8.097 8.097 0 01-.69.468zm-1.082-1.583V5.64c-.006-.02.013-.042.029-.05.074-.043.18-.027.26.004.063 0 .16.067.15.135-.006.049-.085.066-.135.066-.055 0-.092-.043-.141-.068-.052-.018-.146-.008-.163-.065zm-.551 0c-.02.058-.113.049-.166.066-.047.025-.086.068-.14.068-.05 0-.13-.02-.136-.068-.01-.066.088-.133.15-.133.08-.031.184-.047.259-.005.019.009.036.03.03.05v.02h.003z"/></svg>
91	<h2 class="platform-name">Linux</h2>
92	</div>
93	<div class="download-cards">
94	<a class="download-card" data-asset="amd64.deb" href={RELEASES_URL}>
95	<span class="card-icon">
96	<Image class="card-icon--stable" src={iconStable} width={28} height={28} loading="lazy" {...imageProps} />
97	<Image class="card-icon--nightly" src={iconNightly} width={28} height={28} loading="lazy" {...imageProps} />
98	</span>
99	<span class="card-text">
100	<span class="card-arch">Debian, Ubuntu</span>
101	<span class="card-format">.deb</span>
102	</span>
103	</a>
104	<a class="download-card" data-asset="x86_64.AppImage" href={RELEASES_URL}>
105	<span class="card-icon">
106	<Image class="card-icon--stable" src={iconStable} width={28} height={28} loading="lazy" {...imageProps} />
107	<Image class="card-icon--nightly" src={iconNightly} width={28} height={28} loading="lazy" {...imageProps} />
108	</span>
109	<span class="card-text">
110	<span class="card-arch">x86_64</span>
111	<span class="card-format">AppImage</span>
112	</span>
113	</a>
114	</div>
115	<p class="intel-note">
116	On ARM? Download the arm64 <a data-asset="arm64.deb" href={RELEASES_URL}>.deb</a> or
117	<a data-asset="arm64.AppImage" href={RELEASES_URL}>AppImage</a>.
118	</p>
119	</section>
120
121	<!-- Mobile. Stable only, there is no nightly mobile build. -->
122	<section class="platform-section platform-section--mobile" data-rise style="--d:420ms">
123	<div class="platform-header">
124	<svg class="platform-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="7" y="2" width="10" height="20" rx="2.5"/><path d="M11 18.5h2"/></svg>
125	<h2 class="platform-name">Mobile</h2>
126	</div>
127	<div class="download-cards">
128	<a class="download-card" href={IOS_APP_STORE_URL} target="_blank" rel="noopener noreferrer">
129	<span class="card-text">
130	<span class="card-arch">iPhone &amp; iPad</span>
131	<span class="card-format">App Store</span>
132	</span>
133	</a>
134	<a class="download-card" href={ANDROID_PLAY_STORE_URL} target="_blank" rel="noopener noreferrer">
135	<span class="card-text">
136	<span class="card-arch">Android</span>
137	<span class="card-format">Google Play</span>
138	</span>
139	</a>
140	</div>
141	</section>
142
143	<section class="platform-section platform-section--cli" data-rise style="--d:420ms">
144	<div class="platform-header">
145	<svg class="platform-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 7l5 5-5 5M12 17h7"/></svg>
146	<h2 class="platform-name">Terminal</h2>
147	</div>
148	<code class="cli-line cli-line--stable">curl -fsSL https://t3.codes/install.sh | sh</code>
149	<code class="cli-line cli-line--stable">irm https://t3.codes/install.ps1 | iex</code>
150	<code class="cli-line cli-line--nightly">curl -fsSL https://t3.codes/install.sh | T3CODE_CHANNEL=nightly sh</code>
151	<code class="cli-line cli-line--nightly">$env:T3CODE_CHANNEL="nightly"; irm https://t3.codes/install.ps1 | iex</code>
152	<p class="cli-note">Or try it once without installing:</p>
153	<code class="cli-line cli-line--stable">npx t3@latest</code>
154	<code class="cli-line cli-line--nightly">npx t3@nightly</code>
155	</section>
156	</div>
157
158	<p class="releases-link" data-rise style="--d:480ms">
159	All builds are on the{" "}
160	<a id="releases-page-link" href={RELEASES_URL} target="_blank" rel="noopener noreferrer">
161	GitHub releases page<span aria-hidden="true"> &#8599;</span>
162	</a>
163	</p>
164	</div>
165	</Layout>
166
167	<script>
168	import { fetchLatestRelease, RELEASES_URL, NIGHTLY_RELEASES_URL, type ReleaseChannel } from "../lib/releases";
169
170	const page = document.getElementById("download-page")!;
171	const versionLabel = document.getElementById("version-label")!;
172	const changelogLink = document.getElementById("changelog-link") as HTMLAnchorElement;
173	const releasesPageLink = document.getElementById("releases-page-link") as HTMLAnchorElement;
174	const tabs = page.querySelectorAll<HTMLButtonElement>(".channel-toggle button");
175	// Only release-asset links; mobile store cards have no data-asset and keep their href.
176	const cards = page.querySelectorAll<HTMLAnchorElement>("a[data-asset]");
177
178	function readChannel(): ReleaseChannel {
179	return new URLSearchParams(location.search).get("channel") === "nightly" ? "nightly" : "stable";
180	}
181
182	function relativeAge(iso: string): string {
183	const minutes = Math.max(1, Math.round((Date.now() - Date.parse(iso)) / 60_000));
184	if (minutes < 60) return `${minutes} minutes ago`;
185	const hours = Math.round(minutes / 60);
186	if (hours < 48) return `${hours} hours ago`;
187	return `${Math.round(hours / 24)} days ago`;
188	}
189
190	async function load(channel: ReleaseChannel) {
191	const fallback = channel === "nightly" ? NIGHTLY_RELEASES_URL : RELEASES_URL;
192	page.dataset.channel = channel;
193	tabs.forEach((tab) => tab.setAttribute("aria-selected", String(tab.dataset.channel === channel)));
194	releasesPageLink.href = fallback;
195	changelogLink.href = fallback;
196	versionLabel.textContent = "\u00a0";
197	cards.forEach((card) => {
198	card.href = fallback;
199	});
200
201	try {
202	const release = await fetchLatestRelease(channel);
203	// A toggle click while the fetch was in flight wins; drop the stale result.
204	if (page.dataset.channel !== channel) return;
205
206	// Stable shows its version. Nightly shows how fresh the build is; the tag is noise.
207	versionLabel.textContent =
208	channel === "nightly"
209	? `Built ${relativeAge(release.published_at)}`
210	: release.tag_name;
211	if (release.html_url) changelogLink.href = release.html_url;
212	cards.forEach((card) => {
213	const match = (release.assets ?? []).find((a) => a.name.endsWith(`-${card.dataset.asset}`));
214	card.href = match?.browser_download_url ?? fallback;
215	});
216	} catch {
217	if (page.dataset.channel === channel) versionLabel.textContent = "Releases";
218	}
219	}
220
221	tabs.forEach((tab) => {
222	tab.addEventListener("click", () => {
223	const channel = tab.dataset.channel as ReleaseChannel;
224	const url = new URL(location.href);
225	if (channel === "nightly") url.searchParams.set("channel", "nightly");
226	else url.searchParams.delete("channel");
227	history.replaceState(null, "", url);
228	load(channel);
229	});
230	});
231
232	load(readChannel());
233	</script>
234
235	<style>
236	.download-page {
237	flex: 1;
238	display: flex;
239	flex-direction: column;
240	align-items: center;
241	padding: 0 1.5rem 4rem;
242	}
243
244	/* ── Header ── */
245
246	.download-head {
247	position: relative;
248	width: 100%;
249	display: flex;
250	flex-direction: column;
251	align-items: center;
252	padding: 9vh 1.5rem 2.5rem;
253	margin-bottom: 2rem;
254	}
255
256	/* Sky: the nightly DMG backdrop, masked so it dissolves into the page instead of ending at a line. */
257	.sky {
258	position: absolute;
259	top: -80px;
260	bottom: 0;
261	/* Break out of the page padding so the sky spans the full viewport width. */
262	left: 50%;
263	width: 100vw;
264	margin-left: -50vw;
265	z-index: -1;
266	background: url("/nightly-sky.svg") center / cover no-repeat;
267	-webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 45%, transparent 100%);
268	mask-image: linear-gradient(to bottom, #000 0%, #000 45%, transparent 100%);
269	opacity: 0;
270	transform: scale(1.04);
271	transition: opacity 0.9s ease, transform 1.4s cubic-bezier(0.2, 0.7, 0.2, 1);
272	pointer-events: none;
273	}
274
275	.download-page[data-channel="nightly"] .sky {
276	opacity: 1;
277	transform: none;
278	}
279
280	.head-inner {
281	display: flex;
282	align-items: center;
283	gap: 1rem;
284	}
285
286	.head-icon {
287	position: relative;
288	width: 64px;
289	height: 64px;
290	flex-shrink: 0;
291	}
292
293	/* Both channel icons stay mounted and cross-fade, so the title never moves. */
294	.head-icon img,
295	.card-icon img {
296	position: absolute;
297	inset: 0;
298	width: 100%;
299	height: 100%;
300	transition: opacity 0.45s ease;
301	}
302
303	.head-icon--nightly,
304	.card-icon--nightly {
305	opacity: 0;
306	}
307
308	.download-page[data-channel="nightly"] .head-icon--stable,
309	.download-page[data-channel="nightly"] .card-icon--stable {
310	opacity: 0;
311	}
312
313	.download-page[data-channel="nightly"] .head-icon--nightly,
314	.download-page[data-channel="nightly"] .card-icon--nightly {
315	opacity: 1;
316	}
317
318	.heading {
319	font-weight: 500;
320	font-size: clamp(1.75rem, 4vw, 2.75rem);
321	letter-spacing: -0.035em;
322	line-height: 1.15;
323	}
324
325	/* ── Channel toggle ── */
326
327	.channel-toggle {
328	position: relative;
329	display: inline-flex;
330	margin-top: 1.5rem;
331	padding: 3px;
332	border: 1px solid var(--border-strong);
333	border-radius: 999px;
334	background: rgba(255, 255, 255, 0.03);
335	transition: border-color 0.45s ease, background 0.45s ease;
336	}
337
338	.download-page[data-channel="nightly"] .channel-toggle {
339	border-color: rgba(255, 255, 255, 0.22);
340	background: rgba(7, 21, 47, 0.5);
341	}
342
343	/* The thumb slides between the two tabs; both tabs are the same width. */
344	.channel-thumb {
345	position: absolute;
346	top: 3px;
347	bottom: 3px;
348	left: 3px;
349	width: calc(50% - 3px);
350	border-radius: 999px;
351	background: rgba(255, 255, 255, 0.12);
352	transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1), background 0.45s ease;
353	}
354
355	.download-page[data-channel="nightly"] .channel-thumb {
356	transform: translateX(100%);
357	background: rgba(255, 255, 255, 0.16);
358	}
359
360	.channel-toggle button {
361	position: relative;
362	width: 5.5rem;
363	padding: 7px 0;
364	border: 0;
365	border-radius: 999px;
366	background: transparent;
367	color: var(--fg-muted);
368	font: inherit;
369	font-size: 13px;
370	cursor: pointer;
371	transition: color 0.25s ease;
372	}
373
374	.channel-toggle button:hover,
375	.channel-toggle button[aria-selected="true"] {
376	color: var(--fg);
377	}
378
379	.channel-toggle button[aria-selected="true"] {
380	font-weight: 500;
381	}
382
383	.head-meta {
384	margin-top: 1rem;
385	font-size: 0.8rem;
386	min-height: 1.2em;
387	}
388
389	.changelog-link {
390	color: var(--fg-dim);
391	text-decoration: underline;
392	text-decoration-color: transparent;
393	text-underline-offset: 3px;
394	transition: color 0.3s ease, text-decoration-color 0.3s ease;
395	}
396
397	.changelog-link:hover {
398	color: var(--fg);
399	text-decoration-color: var(--fg);
400	}
401
402	.download-page[data-channel="nightly"] .changelog-link {
403	color: #b9bdff;
404	}
405
406	/* ── Platforms ── */
407
408	.platforms {
409	width: 100%;
410	max-width: 720px;
411	display: flex;
412	flex-direction: column;
413	gap: 2.5rem;
414	}
415
416	.platform-section {
417	display: flex;
418	flex-direction: column;
419	gap: 0.75rem;
420	}
421
422	.download-page[data-channel="nightly"] .platform-section--mobile {
423	display: none;
424	}
425
426	/* The CLI ships on both trains; only the install command differs. */
427	.cli-line--nightly,
428	.download-page[data-channel="nightly"] .cli-line--stable {
429	display: none;
430	}
431
432	.download-page[data-channel="nightly"] .cli-line--nightly {
433	display: block;
434	}
435
436	.platform-header {
437	display: flex;
438	align-items: center;
439	gap: 0.6rem;
440	padding-bottom: 0.5rem;
441	border-bottom: 1px solid var(--border);
442	}
443
444	.platform-icon {
445	width: 1.15em;
446	height: 1.15em;
447	color: var(--fg-muted);
448	flex-shrink: 0;
449	}
450
451	.platform-name {
452	font-weight: 500;
453	font-size: 1.1rem;
454	letter-spacing: -0.01em;
455	}
456
457	.cli-note {
458	color: var(--fg-muted);
459	font-size: 0.85rem;
460	margin-top: 0.5rem;
461	}
462
463	.cli-line {
464	align-self: flex-start;
465	font-family: var(--font-mono);
466	font-size: 0.85rem;
467	padding: 0.6rem 0.9rem;
468	border-radius: 10px;
469	border: 1px solid rgba(105, 111, 234, 0.35);
470	background: rgba(21, 20, 67, 0.3);
471	color: var(--fg);
472	}
473
474	/* ── Download cards ── */
475
476	.download-cards {
477	display: grid;
478	grid-template-columns: repeat(2, 1fr);
479	gap: 0.5rem;
480	}
481
482	.download-card {
483	display: flex;
484	align-items: center;
485	gap: 0.75rem;
486	padding: 0.85rem 1rem;
487	border-radius: 10px;
488	border: 1px solid var(--border);
489	background: rgba(255, 255, 255, 0.02);
490	transition: background 0.45s ease, border-color 0.45s ease, transform 0.2s ease;
491	}
492
493	.download-card:hover {
494	background: rgba(255, 255, 255, 0.06);
495	border-color: rgba(255, 255, 255, 0.15);
496	transform: translateY(-1px);
497	}
498
499	.download-card:active {
500	transform: translateY(0);
501	}
502
503	.download-page[data-channel="nightly"] .download-card[data-asset] {
504	border-color: rgba(105, 111, 234, 0.4);
505	background: linear-gradient(135deg, rgba(81, 101, 216, 0.1), rgba(168, 91, 234, 0.06));
506	}
507
508	.download-page[data-channel="nightly"] .download-card[data-asset]:hover {
509	border-color: rgba(105, 111, 234, 0.7);
510	}
511
512	.card-icon {
513	position: relative;
514	width: 28px;
515	height: 28px;
516	flex-shrink: 0;
517	}
518
519	.card-text {
520	display: flex;
521	flex-direction: column;
522	gap: 0.2rem;
523	}
524
525	.card-arch {
526	font-weight: 600;
527	font-size: 0.95rem;
528	}
529
530	.card-format {
531	font-size: 0.8rem;
532	color: var(--fg-dim);
533	transition: color 0.45s ease;
534	}
535
536	.download-page[data-channel="nightly"] .card-format {
537	color: #b6b0ff;
538	}
539
540	.intel-note {
541	font-size: 0.8rem;
542	color: var(--fg-dim);
543	}
544
545	.intel-note a,
546	.releases-link a {
547	color: var(--fg-muted);
548	text-decoration: underline;
549	text-decoration-color: rgba(161, 161, 170, 0.4);
550	text-underline-offset: 3px;
551	transition: color 0.3s ease, text-decoration-color 0.3s ease;
552	}
553
554	.intel-note a:hover,
555	.releases-link a:hover {
556	color: var(--fg);
557	text-decoration-color: var(--fg);
558	}
559
560	/* ── Releases link ── */
561
562	.releases-link {
563	margin-top: 3rem;
564	font-size: 0.825rem;
565	color: var(--fg-dim);
566	}
567
568	/* ── Motion ── */
569
570	@media (prefers-reduced-motion: reduce) {
571	.sky,
572	.head-icon img,
573	.card-icon img,
574	.channel-thumb,
575	.channel-toggle,
576	.download-card {
577	transition: none;
578	}
579	}
580
581	/* ── Mobile ── */
582
583	@media (max-width: 640px) {
584	.download-page {
585	padding: 0 1.25rem 4rem;
586	}
587
588	.download-head {
589	padding: 6vh 1.25rem 2rem;
590	}
591
592	.head-inner {
593	flex-direction: column;
594	text-align: center;
595	}
596
597	.platforms {
598	padding: 0 0.25rem;
599	}
600
601	.download-cards {
602	grid-template-columns: 1fr;
603	}
604	}
605	</style>