index.crepus

google-fonts "JetBrains Mono"

div min-h-screen overflow-x-hidden antialiased crepus-twilight-page text-sm leading-relaxed
	a href="#main-content" skip-link
		"Skip to main content"
	div max-w-4xl mx-auto px-5 sm:px-8 lg:px-10
		header flex flex-wrap items-center justify-between gap-4 py-6 sm:py-8 crepus-entrance crepus-e1
			a href="./index.html" flex items-center gap-2.5 no-underline shrink-0 crepus-t-text hover:opacity-80 transition-opacity
				img src="./static/favicon.svg" alt="" width="28" height="28" w-7 h-7 shrink-0 rounded
				span text-sm font-semibold tracking-tight
					"crepuscularity"
			nav aria-label="Primary" flex flex-wrap items-center gap-x-5 gap-y-1 text-xs
				a href="./docs/index.html" nav-link
					"Docs"
				a href="./docs/cli.html" nav-link
					"CLI"
				a href="./docs/lite.html" nav-link
					"Lite"
				a href="https://crates.io/crates/crepuscularity" nav-link rel="noopener noreferrer" target="_blank"
					"Crates"
				a href="https://github.com/tschk/crepuscularity" nav-link rel="noopener noreferrer" target="_blank"
					"GitHub"

		main id="main-content" flex flex-col
			section pt-8 pb-14 sm:pt-12 sm:pb-20 crepus-entrance crepus-e2
				h1 text-2xl sm:text-3xl md:text-4xl font-semibold crepus-t-text tracking-tight leading-tight max-w-2xl mb-5 text-pretty
					"UI templates that compile "
					span crepus-t-accent
						"everywhere"
				p crepus-t-muted leading-relaxed max-w-2xl mb-7
					span
						"Describe interfaces in "
					code crepus-t-text
						".crepus"
					span
						" — indentation or JSX-style input, same AST — and target native GPUI, static WASM sites, HTML, Manifest V3 extensions, native iOS and Android apps, RGB565 embedded displays, or LVGL Pro XML from one CLI."
				div flex flex-wrap items-center gap-3 mb-10
					a href="./docs/index.html" btn-primary
						"Browse documentation"
						span aria-hidden="true"
							"→"
					a href="./docs/cli.html" btn-ghost
						"CLI reference"
				div rounded border overflow-hidden crepus-t-border crepus-t-card mb-8
					div px-4 py-2 border-b crepus-t-border text-[11px] uppercase tracking-[0.2em] crepus-t-muted
						"terminal"
					pre text-[11px] sm:text-xs leading-relaxed p-4 m-0 crepus-t-pre whitespace-pre overflow-x-auto
						"# New desktop app
$ crepus new my-app && crepus dev

# WASM site (this page)
$ crepus web new my-web && crepus web dev

# Browser extension
$ crepus webext new my-ext && crepus webext dev

# Native mobile apps (iOS / Android)
$ crepus native new my-app && crepus native build

# SwiftUI apps (macOS / iOS)
$ crepus aurora new my-ios && crepus aurora dev
"
				div flex flex-col gap-3
					h2 label-eyebrow
						"One toolchain"
					ul flex flex-wrap gap-x-4 gap-y-1.5 list-none p-0 m-0 text-xs crepus-t-muted
						li target-chip
							"Desktop"
						li target-chip
							"Internet"
						li target-chip
							"Chrome"
						li target-chip
							"Mobile"
						li target-chip
							"Embedded"
						li target-chip
							"LVGL"
					p text-xs crepus-t-muted leading-relaxed m-0 max-w-2xl
						"Crepuscularity Lite: a GPUI + V8 desktop shell as a drop in replacement for Electron to work as native apps."
					a href="./docs/lite.html" guide-link
						span
							"Crepuscularity Lite guide"
						span guide-link-arrow aria-hidden="true"
							"→"

			section py-12 sm:py-16 border-t crepus-t-border crepus-entrance crepus-e4
				h2 label-eyebrow mb-5
					"Why it's different"
				p text-lg sm:text-xl font-medium crepus-t-text leading-snug max-w-2xl mb-4
					slot-rotate interval={3000} slot-lede
						"Hot-reloadable templates on GPUI."
						"No JS bundler for extensions."
						"Compile-time view! or full runtime parse."
						"Ship static dist/ to any CDN."
				p crepus-t-muted leading-relaxed max-w-2xl mb-4
					"The same parser and evaluator back the macro, the WASM renderer, and the dev server — so what you author is what ships."
				p text-xs crepus-t-muted leading-relaxed max-w-2xl mb-10
					"Crepuscularity is a compiler surface, runtime surface, and target manifest in one workspace. Templates stay declarative, target-specific renderers stay explicit, and the CLI keeps build outputs reproducible across app shells, websites, extensions, terminals, panels, and generated UI artifacts."
				div grid gap-x-8 gap-y-7 sm:grid-cols-2
					div feature-item
						h3 feature-title
							"Shared AST"
						p feature-body
							"Indent and JSX-style input parse into the same node tree, so components, control flow, includes, slots, and defaults travel together."
					div feature-item
						h3 feature-title
							"Target manifests"
						p feature-body
							"`crepus.toml` describes build outputs for web, webext, native IR, LVGL, and embedded snapshots without splitting the project model."
					div feature-item
						h3 feature-title
							"Runtime or compile time"
						p feature-body
							"Use `view!` when the UI is static, or parse templates at runtime when includes, hot reload, or external files matter."
					div feature-item
						h3 feature-title
							"Renderer contracts"
						p feature-body
							"Each backend maps the same template semantics into its native output: GPUI styles, HTML, Ratatui widgets, JSON IR, RGB565, or XML."
					div feature-item
						h3 feature-title
							"Framework-owned docs"
						p feature-body
							"Markdown guides and this landing page are built by the same docs-site pipeline, so the public site exercises the framework it documents."
					div feature-item
						h3 feature-title
							"Small host boundary"
						p feature-body
							"Apps keep ownership of state, event loops, firmware drivers, and platform APIs while Crepuscularity owns template parsing and rendering."

			section py-12 sm:py-16 border-t crepus-t-border crepus-entrance crepus-e5
				h2 label-eyebrow mb-4
					"Three ways to write the same tree"
				p crepus-t-muted max-w-2xl m-0 mb-2
					"Indent DSL, TSX-shaped tags, or GPUI's compile-time macro — one AST, your pick."
				p text-xs crepus-t-muted max-w-2xl m-0 mb-8
					"Curly braces in snippets use Unicode ｛ ｝ where the real sources use ASCII so this page stays valid .crepus."
				div flex flex-col gap-4
					div code-panel
						p code-panel-label
							"Indent · .crepus"
						pre code-panel-pre
							"div flex gap-3\n  button @click=\"handle_click\" text-blue-500\n    \"Click me\"\n  input type=\"text\" value=｛input_value｝ placeholder=\"Type here\""
					div code-panel
						p code-panel-label
							"JSX-style tags"
						pre code-panel-pre
							"<div class=\"flex gap-3\">\n  <button @click=\"handle_click\" class=\"text-blue-500\">Click me</button>\n  <input type=\"text\" value=｛input_value｝ placeholder=\"Type here\" />\n</div>"
					div code-panel
						p code-panel-label
							"GPUI · view!"
						pre code-panel-pre
							"view!(cx, div().flex().gap_3().child(\n  button().on_click(cx, handle_click).label(\"Click me\").text_color(gpui::blue())\n).child(\n  text_input().text(input_value).placeholder(\"Type here\")\n))"

			section py-12 sm:py-16 border-t crepus-t-border crepus-entrance crepus-e5 data-downloads-widget="true" data-downloads-state="loading"
				div flex flex-col sm:flex-row sm:items-end sm:justify-between gap-4 mb-8
					div
						p label-eyebrow mb-3
							"Live crates.io signal"
						h2 text-lg sm:text-xl font-semibold crepus-t-text mb-2
							"All Crepuscularity downloads"
						p text-xs crepus-t-muted m-0 max-w-2xl leading-relaxed
							"All-time and daily downloads across every published crate whose name starts with crepuscularity, fetched live from crates.io and rolled into one overall graph."
					a href="https://crates.io/search?q=crepuscularity" btn-ghost shrink-0 rel="noopener noreferrer" target="_blank"
						"Open crates.io"
				div downloads-panel rounded border p-4 sm:p-5 crepus-t-border crepus-t-card
					div grid gap-3 sm:grid-cols-3 mb-5
						div downloads-stat
							span label-eyebrow
								"Total"
							strong text-2xl sm:text-3xl font-semibold crepus-t-text leading-none data-downloads-total="true"
								"…"
						div downloads-stat
							span label-eyebrow
								"Recent"
							strong text-2xl sm:text-3xl font-semibold crepus-t-text leading-none data-downloads-recent="true"
								"…"
						div downloads-stat
							span label-eyebrow
								"Crates"
							strong text-2xl sm:text-3xl font-semibold crepus-t-text leading-none data-downloads-crates="true"
								"…"
					div grid lg:grid-cols-[minmax(0,1fr)_minmax(240px,320px)] gap-4 items-stretch
						div downloads-graph-shell rounded border crepus-t-border overflow-hidden min-h-[260px]
							div downloads-graph-header flex items-center justify-between gap-3 px-4 py-2.5 border-b crepus-t-border
								span label-eyebrow
									"Cumulative history"
								span text-xs crepus-t-muted data-downloads-peak="true"
									"Loading"
							div downloads-graph p-3 sm:p-4 data-downloads-graph="true"
								div downloads-skeleton
						div downloads-crate-list rounded border crepus-t-border overflow-hidden max-h-[420px] overflow-y-auto data-downloads-list="true"
							div downloads-crate-row
								span
									strong
										"Loading crates"
									small
										"crates.io"
								b
									"…"
					p text-xs crepus-t-muted mt-4 mb-0 data-downloads-status="true"
						"Loading live crates.io download history…"

			section py-12 sm:py-16 border-t crepus-t-border crepus-entrance crepus-e5
				h2 label-eyebrow mb-5
					"Native UI from one source"
				div grid gap-8 lg:grid-cols-2 items-start
					div flex flex-col gap-4
						p text-base sm:text-lg font-medium crepus-t-text leading-snug m-0
							"Aurorality transforms .crepus templates into native SwiftUI views for macOS and iOS — no WebView, no JavaScript bridge."
						p text-xs crepus-t-muted m-0 leading-relaxed
							"Semantic tags like navigationstack, sidebar, list, and menu compile to their SwiftUI equivalents. Add eventSink callbacks for app-state integration, wire Rust backends through UniFFI, and hot-reload through the same crepus dev pipeline that serves GPUI and WASM targets."
						div code-panel
							p code-panel-label
								"SwiftUI engine"
							pre code-panel-pre
								"navigationsplitview\n  sidebar\n    section header=\"Conversations\"\n      for conv in {conversations}\n        item @click=\"select:{conv.id}\"\n          span \"{conv.title}\"\n  detail\n    vstack gap-3 p-4\n      textfield bind=draft placeholder=\"Message\"\n      button button-prominent @click=\"send\"\n        \"Send\""
					div flex flex-col gap-5
						h3 label-eyebrow m-0
							"Capabilities"
						div flex flex-col gap-5
							div feature-item
								h4 feature-title
									"Semantic native tags"
								p feature-body
									"navigationstack, sidebar, form, picker, sf-*, and more — all compile to direct SwiftUI views."
							div feature-item
								h4 feature-title
									"macOS chrome"
								p feature-body
									"Root-level menubar and dockbadge for native menu commands and dock badges."
							div feature-item
								h4 feature-title
									"Hot-reload IR & swiftgen"
								p feature-body
									"crepus dev pushes JSON IR updates or re-runs swiftgen on save — same dev loop as every other target."
							div feature-item
								h4 feature-title
									"Rust ↔ Swift bridge"
								p feature-body
									"Plug Rust backends through UniFFI with eventSink wiring for shared state models."
						a href="./docs/aurorality.html" guide-link
							span
								"Aurorality guide"
							span guide-link-arrow aria-hidden="true"
								"→"

			section py-12 sm:py-16 border-t crepus-t-border
				div flex flex-wrap items-end justify-between gap-4 mb-7
					div
						h2 label-eyebrow mb-3
							"Documentation"
						p text-xs crepus-t-muted m-0 max-w-xl
							"Guides are edited as Markdown in the repo and published as HTML alongside this landing page."
					a href="./docs/index.html" guide-link
						span
							"View all"
						span guide-link-arrow aria-hidden="true"
							"→"
				div flex flex-col
					a href="./docs/dsl.html" doc-row
						span doc-file
							"dsl.md"
						span doc-name
							"DSL reference"
						span doc-desc
							"Syntax, flow, attributes"
					a href="./docs/components.html" doc-row
						span doc-file
							"components.md"
						span doc-name
							"Components"
						span doc-desc
							"Includes & slots"
					a href="./docs/cli.html" doc-row
						span doc-file
							"cli.md"
						span doc-name
							"CLI"
						span doc-desc
							"Commands & flags"
					a href="./docs/webext.html" doc-row
						span doc-file
							"webext.md"
						span doc-name
							"Extensions"
						span doc-desc
							"MV3 toolchain"
					a href="./docs/aurorality.html" doc-row
						span doc-file
							"aurorality.md"
						span doc-name
							"Aurorality"
						span doc-desc
							"SwiftUI engine"
					a href="./docs/embedded.html" doc-row
						span doc-file
							"embedded.md"
						span doc-name
							"Embedded"
						span doc-desc
							"RGB565 framebuffer"
					a href="./docs/lvgl.html" doc-row
						span doc-file
							"lvgl.md"
						span doc-name
							"LVGL"
						span doc-desc
							"Panel XML"
					a href="./docs/ide-extensions.html" doc-row
						span doc-file
							"ide-extensions.md"
						span doc-name
							"IDE extensions"
						span doc-desc
							"Editor workflow"

		footer border-t py-8 sm:py-10 crepus-t-border crepus-entrance crepus-e6 footer-row
			div flex flex-col gap-1.5
				a href="./index.html" flex items-center gap-2 no-underline crepus-t-text hover:opacity-80 transition-opacity
					img src="./static/favicon.svg" alt="" width="24" height="24" loading="lazy" w-6 h-6 shrink-0 rounded
					span text-xs font-medium
						"crepuscularity"
				span text-xs crepus-t-muted
					"ISC — built with crepuscularity + moonshine"
			nav aria-label="Footer" flex flex-wrap gap-x-5 gap-y-2 text-xs items-center justify-start sm:justify-end
				a href="./docs/index.html" nav-link
					"Docs"
				a href="https://crates.io/crates/crepuscularity" nav-link rel="noopener noreferrer" target="_blank"
					"Crates"
				a href="./docs/lite.html" nav-link
					"Lite"
				a href="https://github.com/tschk/crepuscularity" nav-link rel="noopener noreferrer" target="_blank"
					"GitHub"

<style>
:root {
  color-scheme: dark;
  --cp-bg: #09090b;
  --cp-fg: #e4e4e7;
  --cp-strong: #fafafa;
  --cp-muted: #8b8b93;
  --cp-border: #27272a;
  --cp-elevated: #101012;
  --cp-code: #0c0c0e;
  --cp-accent: #d8a15f;
}
.crepus-twilight-page {
  background-color: var(--cp-bg);
  color: var(--cp-fg);
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-feature-settings: 'liga' 0;
  touch-action: manipulation;
}
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 50;
  padding: 0.5rem 0.9rem;
  background: var(--cp-strong);
  color: var(--cp-bg);
  font-size: 0.75rem;
  font-weight: 600;
  text-decoration: none;
}
.skip-link:focus-visible {
  left: 0.5rem;
  top: 0.5rem;
}
[id] { scroll-margin-top: 2rem; }
.crepus-t-text { color: var(--cp-strong); }
.crepus-t-muted { color: var(--cp-muted); }
.crepus-t-accent { color: var(--cp-accent); }
.crepus-t-border { border-color: var(--cp-border) !important; }
.crepus-t-card { background-color: var(--cp-elevated); }
.crepus-t-pre { background-color: var(--cp-code); color: var(--cp-fg); }
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--cp-accent);
  outline-offset: 2px;
  border-radius: 2px;
}
.nav-link {
  color: var(--cp-muted);
  text-decoration: none;
  transition: color 160ms ease;
}
.nav-link:hover { color: var(--cp-strong); }
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.9rem;
  border: 1px solid var(--cp-strong);
  border-radius: 3px;
  background: var(--cp-strong);
  color: var(--cp-bg);
  font-size: 0.75rem;
  font-weight: 600;
  text-decoration: none;
  transition: background-color 160ms ease, color 160ms ease;
}
.btn-primary:hover { background: #ffffff; border-color: #ffffff; }
.btn-ghost {
  display: inline-flex;
  align-items: center;
  padding: 0.5rem 0.9rem;
  border: 1px solid var(--cp-border);
  border-radius: 3px;
  color: var(--cp-fg);
  font-size: 0.75rem;
  font-weight: 500;
  text-decoration: none;
  transition: border-color 160ms ease, color 160ms ease;
}
.btn-ghost:hover { border-color: var(--cp-muted); color: var(--cp-strong); }
.label-eyebrow {
  margin: 0;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cp-muted);
}
.target-chip {
  border-left: 1px solid var(--cp-border);
  padding-left: 0.6rem;
  color: var(--cp-fg);
}
.feature-item { display: flex; flex-direction: column; gap: 0.35rem; }
.feature-title {
  margin: 0;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--cp-strong);
}
.feature-body {
  margin: 0;
  font-size: 0.75rem;
  line-height: 1.7;
  color: var(--cp-muted);
}
.code-panel {
  display: flex;
  flex-direction: column;
  min-width: 0;
  border: 1px solid var(--cp-border);
  border-radius: 4px;
  overflow: hidden;
}
.code-panel-label {
  margin: 0;
  padding: 0.55rem 0.9rem;
  border-bottom: 1px solid var(--cp-border);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cp-muted);
}
.code-panel-pre {
  margin: 0;
  flex: 1;
  padding: 0.9rem;
  background: var(--cp-code);
  color: var(--cp-fg);
  font-size: 0.75rem;
  line-height: 1.75;
  white-space: pre;
  overflow-x: auto;
}
.doc-row {
  display: grid;
  grid-template-columns: minmax(9rem, 12rem) minmax(0, 1fr);
  align-items: baseline;
  gap: 0.25rem 1.25rem;
  padding: 0.85rem 0;
  border-top: 1px solid var(--cp-border);
  text-decoration: none;
  color: var(--cp-fg);
  transition: color 160ms ease;
}
.doc-row:last-child { border-bottom: 1px solid var(--cp-border); }
.doc-file {
  font-size: 0.75rem;
  color: var(--cp-muted);
  transition: color 160ms ease;
}
.doc-name {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--cp-strong);
}
.doc-desc {
  grid-column: 2;
  font-size: 0.75rem;
  color: var(--cp-muted);
}
.doc-row:hover .doc-file { color: var(--cp-accent); }
@media (max-width: 640px) {
  .doc-row { grid-template-columns: minmax(0, 1fr); }
  .doc-desc { grid-column: 1; }
}
.guide-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  width: fit-content;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--cp-strong);
  text-decoration: none;
}
.guide-link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -0.16rem;
  height: 1px;
  background: var(--cp-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 220ms cubic-bezier(0.16, 1, 0.3, 1);
}
.guide-link:hover::after,
.guide-link:focus-visible::after {
  transform: scaleX(1);
}
.guide-link-arrow {
  display: inline-block;
  transition: transform 220ms cubic-bezier(0.16, 1, 0.3, 1);
}
.guide-link:hover .guide-link-arrow,
.guide-link:focus-visible .guide-link-arrow {
  transform: translateX(0.22rem);
}
@keyframes crepus-rise {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}
.crepus-entrance { animation: crepus-rise 700ms cubic-bezier(0.16, 1, 0.3, 1) both; }
.crepus-e1 { animation-delay: 0.02s; }
.crepus-e2 { animation-delay: 0.08s; }
.crepus-e3 { animation-delay: 0.14s; }
.crepus-e4 { animation-delay: 0.2s; }
.crepus-e5 { animation-delay: 0.26s; }
.crepus-e6 { animation-delay: 0.32s; }
.downloads-panel { position: relative; overflow: hidden; }
.downloads-panel > * { position: relative; z-index: 1; }
.downloads-stat {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: 0.9rem;
  border: 1px solid var(--cp-border);
  border-radius: 4px;
}
.downloads-number-slot {
  display: inline-block;
  align-items: baseline;
  width: max-content;
  max-width: max-content;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.downloads-slot-char {
  display: inline-block;
  min-width: 0.34ch;
  text-align: center;
  white-space: pre;
}
.downloads-slot-changed {
  animation: downloads-slot-in 420ms cubic-bezier(0.16, 1, 0.3, 1) both;
}
.downloads-graph-shell,
.downloads-crate-list {
  background: var(--cp-code);
}
.downloads-panel,
[data-downloads-graph] {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}
[data-downloads-graph] {
  touch-action: none;
}
.downloads-graph svg {
  width: 100%;
  min-height: 220px;
  display: block;
  overflow: visible;
}
.downloads-area {
  fill: color-mix(in srgb, var(--cp-accent) 16%, transparent);
}
.downloads-graph[data-downloads-graph-hovering="true"] .downloads-area {
  fill: color-mix(in srgb, var(--cp-muted) 16%, transparent);
}
.downloads-area-active {
  fill: color-mix(in srgb, var(--cp-accent) 16%, transparent);
}
.downloads-line {
  fill: none;
  stroke: var(--cp-accent);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.downloads-graph[data-downloads-graph-hovering="true"] .downloads-line {
  stroke: color-mix(in srgb, var(--cp-muted) 70%, transparent);
}
.downloads-line-active {
  fill: none;
  stroke: var(--cp-accent);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.downloads-hover-dot {
  fill: var(--cp-bg);
  stroke: var(--cp-accent);
  stroke-width: 2;
  pointer-events: none;
}
.downloads-hit {
  fill: transparent;
  stroke: none;
  cursor: crosshair;
  pointer-events: all;
}
.downloads-axis {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 0.75rem;
  color: var(--cp-muted);
  font-size: 0.6875rem;
}
.downloads-crate-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.7rem 0.9rem;
  color: var(--cp-fg);
  text-decoration: none;
  border-bottom: 1px solid var(--cp-border);
  transition: background-color 160ms ease;
}
.downloads-crate-row:visited,
.downloads-crate-row:active {
  color: var(--cp-fg);
}
.downloads-crate-row:focus-visible {
  color: var(--cp-fg);
  outline: 1px solid var(--cp-accent);
  outline-offset: -1px;
}
.downloads-crate-row:last-child {
  border-bottom: 0;
}
.downloads-crate-row:hover {
  background: color-mix(in srgb, var(--cp-accent) 8%, transparent);
}
.downloads-crate-row > span {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.downloads-crate-row > span > strong {
  font-size: 0.75rem;
  font-weight: 600;
  overflow-wrap: anywhere;
}
.downloads-crate-row > span > small {
  color: var(--cp-muted);
  font-size: 0.6875rem;
}
.downloads-crate-row:visited > span > small,
.downloads-crate-row:active > span > small,
.downloads-crate-row:focus-visible > span > small {
  color: var(--cp-muted);
}
.downloads-crate-row b {
  display: block;
  flex: 0 0 auto;
  min-width: 7ch;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--cp-accent);
  text-align: right;
  white-space: nowrap;
  overflow: visible;
  font-variant-numeric: tabular-nums;
}
.downloads-crate-row:visited b,
.downloads-crate-row:active b,
.downloads-crate-row:focus-visible b {
  color: var(--cp-accent);
}
.downloads-overall-row {
  background: color-mix(in srgb, var(--cp-accent) 10%, transparent);
}
.downloads-skeleton {
  min-height: 220px;
  border-radius: 4px;
  background:
    linear-gradient(110deg, transparent 0%, color-mix(in srgb, var(--cp-fg) 8%, transparent) 44%, transparent 58%);
  background-size: 220% 100%;
  animation: downloads-loading 1.4s ease-in-out infinite;
}
[data-downloads-state="error"] .downloads-skeleton {
  animation: none;
  opacity: 0.35;
}
@keyframes downloads-loading {
  to { background-position: -220% 0; }
}
@keyframes downloads-slot-in {
  from {
    opacity: 1;
    transform: translateY(-0.75em);
  }
  62% {
    opacity: 1;
    transform: translateY(0.12em);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@media (prefers-reduced-motion: reduce) {
  .crepus-entrance,
  .downloads-skeleton,
  .downloads-slot-changed {
    animation: none;
  }
  .guide-link::after,
  .guide-link-arrow {
    transition: none;
  }
}
</style>

.slot-lede text-[var(--cp-strong)] font-medium
.footer-row flex flex-col sm:flex-row justify-between gap-4 sm:gap-6 sm:items-center