/* Self-hosted variable fonts (latin subset) */
@font-face {
	font-family: "IBM Plex Sans";
	font-style: normal;
	font-weight: 100 500;
	font-display: swap;
	src: url("./fonts/ibm-plex-sans-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
		U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Space Grotesk";
	font-style: normal;
	font-weight: 200 500;
	font-display: swap;
	src: url("./fonts/space-grotesk-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
		U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "JetBrains Mono";
	font-style: normal;
	font-weight: 100 800;
	font-display: swap;
	src: url("./fonts/jetbrains-mono-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
		U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD;
}

:root {
	--text: #f2f4ff;
	--muted: rgb(111, 134, 163);
	--dim: #666f91;
	--line: rgba(78, 84, 133, 0.315);
	--cyan: #75d2fd;
	--violet: #c6a7ff;
	/* docs group labels and the footer's column heads */
	--groupBlue: #5a82bd;
	--shadow: 0 24px 80px rgba(0, 0, 0, 0.55);
	--mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
		"Liberation Mono", "Courier New", monospace;
	--sans: "IBM Plex Sans", Inter, ui-sans-serif, system-ui, -apple-system,
		BlinkMacSystemFont, "Segoe UI", sans-serif;
	/* Display options: "Space Grotesk", var(--sans)  |  "JetBrains Mono", var(--mono) */
	--display: "JetBrains Mono", var(--mono);
	/* body copy: brighter than --muted, which is for meta/labels */
	--body: #9aa1b5;
}

* {
	box-sizing: border-box;
}
html {
	scroll-behavior: smooth;
}
body {
	margin: 0;
	min-height: 100vh;
	color: var(--text);
	background: radial-gradient(
			circle at 18% 12%,
			rgba(118, 180, 255, 0.055),
			transparent 34rem
		),
		radial-gradient(
			circle at 82% 20%,
			rgba(198, 167, 255, 0.07),
			transparent 30rem
		),
		radial-gradient(
			circle at 55% 72%,
			rgba(183, 131, 255, 0.04),
			transparent 42rem
		),
		linear-gradient(180deg, #090a0f 0%, #010102 52%, #000000 100%);
	font-family: var(--sans);
	overflow-x: hidden;
}

body::before {
	content: "";
	position: fixed;
	inset: 0;
	pointer-events: none;
	opacity: 0.26;
	background-image: linear-gradient(
			rgba(255, 255, 255, 0.04) 1px,
			transparent 1px
		),
		linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
	background-size: 48px 48px;
	mask-image: linear-gradient(to bottom, black, transparent 88%);
}

a {
	color: inherit;
	text-decoration: none;
}
code,
pre {
	font-family: var(--mono);
}
.wrap {
	width: min(1160px, calc(100% - 40px));
	margin: 0 auto;
}

.nav {
	position: sticky;
	top: 0;
	z-index: 20;
	backdrop-filter: blur(18px);
	background: rgba(9, 10, 15, 0.64);
	border-bottom: 1px solid var(--line);
}
.nav-inner {
	height: 68px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
}
.brand {
	display: flex;
	align-items: center;
	gap: 12px;
	font-weight: 600;
	letter-spacing: -0.03em;
	color: var(--muted);
	transition: color 0.15s ease;
}
.brand:hover,
.brand.active {
	color: var(--text);
}
/* The ":" reads as part of the wordmark, so it needs its own breathing room. */
.brand .accent {
	margin-right: 2px;
}
.links {
	display: flex;
	align-items: center;
	gap: 18px;
	color: var(--muted);
	font-size: 14px;
}
.links a:hover {
	color: var(--text);
}
.links .cmd-link {
	font: 14px var(--mono);
	letter-spacing: -0.02em;
}
.links .cmd-link .accent {
	margin-right: 1px;
}
/* Nav accents (the colons) stay quiet until the link is hovered or active. */
.nav .accent {
	color: inherit;
	transition: color 0.15s ease;
}
.nav a:hover .accent,
.nav a.active .accent {
	color: var(--cyan);
}

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 44px;
	padding: 0 18px;
	border: 1px solid var(--line);
	border-radius: 1px;
	background: rgba(255, 255, 255, 0.06);
	color: var(--text);
	font-size: 14px;
	transition: transform 0.18s ease, border-color 0.18s ease,
		background 0.18s ease;
}
.btn:hover {
	border-color: rgba(255, 255, 255, 0.26);
	background: rgba(255, 255, 255, 0.09);
}

.btn.primary {
	width: 32ch;
	justify-content: flex-start;
	position: relative;
	overflow: hidden;

	color: var(--cyan);
	background: rgba(0, 0, 0, 0.34);
	border: none;

	font-family: var(--mono);
	letter-spacing: -0.02em;
}

.hero {
	padding: 46px 0 32px;
}
/* One column: the animated board that used to sit beside the copy is gone,
   and the row of calls to action needs the width. */
.hero-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	align-items: center;
	min-height: 440px;
}
h1,
.hero-title {
	margin: 0 0 20px;
	font-size: clamp(52px, 8.5vw, 90px);
	line-height: 0.86;
	max-width: 860px;
}
/* The h1 at the hero size; the second line sized to end under "tracking" (14
   of the h1's 0.5em characters), so "as code" stands out past it, and the
   third in spaced capitals to end under "code". --s keeps the h1 within the block. */
.hero .hero-title {
	max-width: none;
	margin-bottom: 40px;
	container-type: inline-size;
	line-height: 1.08;
}
.hero-title > * {
	--s: min(90px, 100cqi / 11.15);
	margin: 0;
	font: inherit;
	letter-spacing: -0.1em;
	line-height: inherit;
	white-space: nowrap;
}
.hero-title > :nth-child(1) {
	font-size: var(--s);
}
.hero-title > :nth-child(2) {
	margin-top: calc(var(--s) * 0.12);
	font-size: max(20px, var(--s) * 7 / 15.5);
	color: color-mix(in srgb, var(--text) 75%, transparent);
}
.hero-title > :nth-child(3) {
	margin-top: calc(var(--s) * 0.6);
	font-size: calc(var(--s) * 0.3038);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: color-mix(in srgb, var(--dim) 75%, transparent);
}
/* At its floor the third line's spacing tightens so it keeps to one row. */
@media (max-width: 620px) {
	.hero-title > :nth-child(3) {
		font-size: max(12px, var(--s) * 7 / 34.56);
		letter-spacing: 0.02em;
	}
	/* "as code" on its own line, so --s fits the 14 of "Issue tracking". */
	.hero-title > * {
		--s: min(90px, 100cqi / 7.15);
	}
	.hero-title h1 span {
		display: block;
	}
}
/* Below their floors the two smaller lines wrap rather than shrink further. */
.hero-title > :not(:first-child) {
	white-space: normal;
	text-wrap: balance;
}
.lead {
	max-width: 710px;
	text-wrap: balance;
	margin: 0 0 28px;
	font-size: clamp(16px, 2.2vw, 20px);
	font-weight: 400;
	line-height: 1.55;
	color: var(--text);
}
.lead span {
	color: var(--cyan);
}
.actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	flex-direction: column;
	align-items: flex-start;
}
/* The hero's two calls to action sit side by side, the same height. */
.hero .actions {
	flex-direction: row;
	align-items: stretch;
}
.hero-cta {
	min-height: 48px;
	padding: 0 20px;
	font: 14px var(--mono);
	letter-spacing: -0.02em;
	white-space: nowrap;
}
/* In the install panel the commands are alternatives, so they share a width
   instead of each sizing to its own text and landing ragged. Full width also
   lines them up with the code blocks below, and the text takes the slack so
   "copy" sits at the right edge rather than mid-button. */
.panel .actions {
	align-items: stretch;
}
.panel .copy-cmd-text {
	flex: 1;
}
/* Hero screenshot: the top-left corner of the real board, fading out
   toward the bottom-right so it melts into the page background. */
.hero-shot {
	position: relative;
	align-self: stretch;
	min-height: 300px;
	overflow: hidden;
}
.ascii-board {
	position: absolute;
	top: 6px;
	left: 0;
	margin: 0;
	font: 13px/1.32 var(--mono);
	white-space: pre;
	color: var(--muted);
	/* the ellipse must finish fading before the container clips the board */
	-webkit-mask-image: radial-gradient(
		36% 180% at 0% 80%,
		#000000 42%,
		#00000000 95%
	);
	mask-image: radial-gradient(36% 180% at 0% 80%, #000000 42%, #00000000 95%);
}
.ab-line {
	color: rgba(70, 87, 126, 0.38);
}
.ab-card {
	color: rgba(120, 134, 170, 0.35);
}
.ab-sel {
	color: var(--cyan);
}
.ab-txt {
	color: var(--text);
}
.ab-dim,
.ab-desc {
	color: var(--muted);
	opacity: 0.75;
}
.ab-ref {
	color: rgba(150, 155, 181, 0.55);
}
.ab-tag {
	background: #ff8787;
	color: #14060a;
	border-radius: 3px;
}
.ab-user {
	color: #a78bfa;
}
.ab-sync {
	color: #8fdc8c;
}
.ab-issue {
	background: var(--cyan);
	color: #000;
	border-radius: 3px;
	padding: 0 2px;
}
.ab-cursor {
	color: var(--cyan);
	opacity: 0.9;
	animation: abBlink 1.1s steps(2, end) infinite;
}
@keyframes abBlink {
	50% {
		opacity: 0;
	}
}

.logos {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 12px;
}

section {
	padding: 70px 0;
}
.section-head {
	display: flex;
	justify-content: space-between;
	gap: 24px;
	align-items: last baseline;
	margin-bottom: 32px;
}
h2 {
	margin: 0;
	font-size: clamp(32px, 5vw, 58px);
	line-height: 0.95;
	letter-spacing: -0.075em;
}
.kicker {
	/* Always a label above something, never inline in a sentence — so its own
	   margins apply whether it is written as a div or a span. */
	display: block;
	color: var(--muted);
	font: 12px var(--mono);
	text-transform: uppercase;
	letter-spacing: 0.12em;
	margin-bottom: 12px;
}
/* A kicker used between two blocks rather than at the head of a section. */
.accent {
	color: var(--cyan);
}
.section-head p {
	max-width: 520px;
	margin: 0;
	font-size: 17px;
	color: var(--body);
	line-height: 1.55;
}

.cards {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 40px 56px;
	margin-top: 40px;
}
.cards-two {
	grid-template-columns: repeat(2, 1fr);
}
/* A card is a heading and a paragraph on the page itself: no panel, no
   icon, the space between them doing the separating. */
.card {
	padding: 12px 0 0;
}
.card h3 {
	margin: 0 0 10px;
	font-size: 20px;
	letter-spacing: -0.025em;
}
.card p {
	margin: 0;
	font-size: 17px;
	color: var(--body);
	line-height: 1.55;
}

.panel {
	background: rgb(14 18 30 / 5%);
	padding: 24px;
	overflow: hidden;
}
.panel h3 {
	margin: 0 0 12px;
	font-size: 24px;
	letter-spacing: -0.04em;
}
.panel p {
	margin: 0 0 18px;
	color: var(--muted);
	line-height: 1.58;
}
.code {
	margin: 0;
	padding: 18px;

	background: rgba(0, 0, 0, 0.32);
	border: 1px solid var(--line);
	overflow: auto;
	color: #dbe5ff;
	font-size: 13px;
}
.code .c {
	color: var(--dim);
}
.code .g {
	color: var(--cyan);
}
.code .b {
	color: var(--cyan);
}
.code .p {
	color: var(--violet);
}

/* The model, stated plainly: heading, paragraph, then the points, all on one
   left edge and no wider than a comfortable line. */
.model h3 {
	margin: 0 0 40px;
	font-size: 28px;
	letter-spacing: -0.03em;
}
/* Get started: a note column beside a commands column, every box
   the same width and weight. */
.install h3 {
	margin: 0 0 40px;
	font-size: 28px;
	letter-spacing: -0.03em;
}
.setup {
	display: grid;
	gap: 28px;
	max-width: 920px;
}
.setup-row {
	display: grid;
	grid-template-columns: 240px minmax(0, 1fr);
	gap: 12px 40px;
	align-items: start;
}
.setup-side p {
	margin: 0;
	padding-top: 12px;
	font-size: 16px;
	color: var(--muted);
	line-height: 1.5;
	max-width: 24ch;
	text-wrap: balance;
}
.setup-body {
	display: grid;
	gap: 10px;
	min-width: 0;
}
.setup-body > * {
	min-width: 0;
}
.setup-body .copy-cmd {
	display: flex;
	width: 100%;
}
.setup-body .copy-cmd-text {
	flex: 1;
}
.setup-body .code {
	border-radius: 2px;
	padding: 12px 16px;
	line-height: 24px;
}
.setup-divider,
.docs-group {
	display: flex;
	align-items: center;
	gap: 16px;
	max-width: 920px;
	margin: 48px 0 28px;
	font: 12px var(--mono);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--muted);
}
.setup-divider::after,
.docs-group::after {
	content: "";
	flex: 1;
	height: 1px;
	background: var(--line);
}
@media (max-width: 720px) {
	.setup-row {
		grid-template-columns: minmax(0, 1fr);
	}
	.setup-side p {
		padding-top: 0;
		max-width: none;
	}
}
.points {
	display: grid;
	gap: 28px;
	max-width: 640px;
	margin: 0;
}
.points dt {
	font-weight: 700;
	margin-bottom: 5px;
}
.points dd {
	margin: 0;
	font-size: 17px;
	color: var(--body);
	line-height: 1.5;
}

.media-placeholder > video,
.media-placeholder > img {
	width: 100%;
	display: block;
	border-radius: 4px;
}
.media-placeholder {
	min-height: 360px;
	border-radius: 8px;
	display: grid;
	place-items: center;
	text-align: center;
	padding: 28px;
}
.hero-placeholder {
	min-height: 360px;
	background: rgba(8, 11, 16, 0);
	padding: 0 60px;
	display: grid;
	place-items: center;
	text-align: center;
}
/* The hero clip alone keeps a faint glow, so it lifts off the page where
   the media further down sits flat on it. */
.hero-placeholder > img,
.hero-placeholder > video {
	width: 100%;
	max-width: 1640px;
	border-radius: 8px;
	box-shadow: 0 0 64px rgba(76, 131, 158, 0.22);
}
/* The scrubber still is a near-black strip: no panel, no glow, and its
   edges fade out so it dissolves into the page instead of sitting on it. */
#audit .media-placeholder {
	min-height: 0;
	padding: 0;
	background: none;
}
/* A 2x capture of one pane: shown at its own scale, not stretched to the wrap. */
#monitor .media-placeholder > video {
	max-width: 550px;
	box-shadow: none;
	border-radius: 0;
	/* Encoded with a true-black background, so screened over the page only the
	   log lines remain. */
	mix-blend-mode: screen;
	-webkit-mask-image:
		linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent),
		linear-gradient(180deg, transparent, #000 30%, #000 100%);
	-webkit-mask-composite: source-in;
	mask-image:
		linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent),
		linear-gradient(180deg, transparent, #000 30%, #000 100%);
	mask-composite: intersect;
}
#audit .media-placeholder > img {
	box-shadow: none;
	/* True-black background: screened over the page, black contributes nothing,
	   so the grid and tints show through and only the chart remains. */
	mix-blend-mode: screen;
	-webkit-mask-image:
		linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent),
		linear-gradient(180deg, transparent, #000 15%, #000 90%, transparent);
	-webkit-mask-composite: source-in;
	mask-image:
		linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent),
		linear-gradient(180deg, transparent, #000 15%, #000 90%, transparent);
	mask-composite: intersect;
}
video,
img {
	margin: 40px;
}
aside:not(.docs-layout > aside) {
	box-shadow: 0 0 48px #4c839e55;
}

.footer {
	padding: 56px 0 40px;
	color: var(--muted);
	border-top: 1px solid var(--line);
}
.footer-inner {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 48px;
	flex-wrap: wrap;
	padding-bottom: 40px;
}
.footer-brand {
	max-width: 320px;
}
.footer-brand .brand {
	color: var(--text);
	margin-bottom: 12px;
}
.footer-brand p {
	margin: 0;
	font-size: 14px;
	line-height: 1.55;
}
.footer-cols {
	display: flex;
	align-items: flex-start;
	gap: 64px;
}
.footer-col {
	display: grid;
	gap: 10px;
	font-size: 14px;
}
.footer-col a {
	color: var(--muted);
	transition: color 0.15s ease;
}
.footer-col a:hover {
	color: var(--text);
}
.footer-head {
	font: 12px var(--mono);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--groupBlue);
	margin-bottom: 4px;
}
.footer-foot {
	display: flex;
	justify-content: space-between;
	gap: 24px;
	flex-wrap: wrap;
	padding-top: 24px;
	border-top: 1px solid var(--line);
	font: 12px var(--mono);
	letter-spacing: 0.02em;
}

@media (max-width: 900px) {
	.hero-grid {
		grid-template-columns: minmax(0, 1fr);
	}
	/* No room for the animated board once the hero stacks. */
	.hero-shot {
		display: none;
	}
	.cards,
	.section-head {
		display: block;
	}
	.section-head p {
		margin-top: 16px;
	}
}
@media (max-width: 620px) {
	.wrap {
		width: min(100% - 28px, 1160px);
	}
	/* Keep :docs and :blog visible; tighten the row so everything fits. */
	.links {
		gap: 12px;
	}
	.links .btn {
		min-height: 38px;
		padding: 0 12px;
	}
	.hero {
		padding: 36px 0 32px;
	}
	.hero-grid {
		min-height: 0;
	}
	/* Keep "Issue Tracking." on one line down to 375px-wide phones. */
	h1,
	.hero-title {
		font-size: clamp(40px, 12vw, 52px);
	}
	.cards,
	.logos {
		grid-template-columns: minmax(0, 1fr);
	}
	.footer-inner {
		align-items: start;
		flex-direction: column;
	}
	.actions {
		align-self: stretch;
	}
	.copy-cmd {
		display: flex;
		width: 100%;
	}
}

/* Comparison: spec matrix — one row per capability, one check column
   per tool */
.compare {
	border: 1px solid var(--line);
	border-radius: 8px;
	overflow: hidden;
	background: rgba(255, 255, 255, 0.02);
}
.compare-row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 90px 90px 90px;
	border-top: 1px solid var(--line);
}
.compare-row:first-child {
	border-top: 0;
}
.compare-row > div {
	padding: 13px 18px;
}
.compare-row > div:last-child {
	border-left: 1px solid var(--line);
	background: rgba(34, 161, 220, 0.045);
}
.compare-spec {
	color: var(--body);
}
.compare-check {
	text-align: center;
	font: 18px var(--mono);
	line-height: 1.2;
}
.compare-check.yes {
	color: #8fdc8c;
}
.compare-check.no {
	color: rgba(255, 135, 135, 0.5);
}
.compare-check.partial {
	color: #e5c07b;
}
/* Hovering a row lights up the tools that fulfill the spec */
.compare-row > div {
	transition: color 0.15s ease, background 0.15s ease, text-shadow 0.15s ease;
}
.compare-row:not(.compare-head):hover {
	background: rgba(255, 255, 255, 0.02);
}
.compare-row:not(.compare-head):hover .compare-spec {
	color: var(--text);
}
.compare-row:hover .compare-check.yes {
	color: #b2f0af;
	background: rgba(143, 220, 140, 0.07);
	text-shadow: 0 0 14px rgba(143, 220, 140, 0.55);
}
.compare-row:hover .compare-check.partial {
	color: #ffdf9e;
	background: rgba(229, 192, 123, 0.07);
	text-shadow: 0 0 14px rgba(229, 192, 123, 0.5);
}
.compare-head > div {
	font-family: var(--display);
	font-weight: 500;
	font-size: 15px;
	letter-spacing: -0.02em;
	color: var(--text);
	background: rgba(0, 0, 0, 0.25);
	padding-top: 16px;
	padding-bottom: 16px;
}
.compare-head > div:last-child {
	background: rgba(34, 161, 220, 0.09);
}
@media (max-width: 620px) {
	.compare-row {
		grid-template-columns: minmax(0, 1fr) 46px 46px 46px;
	}
	.compare-row > div {
		padding: 11px 10px;
	}
	.compare-spec,
	.compare-head > div {
		font-size: 13px;
	}
}

/* Copy-to-clipboard command */
/* GitHub button with live star count; hidden once the nav gets tight. */
.github-stars .stars {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding-left: 10px;
	border-left: 1px solid var(--line);
}
.github-stars .star-ico {
	display: block;
}
.github-stars .star-count {
	font: 13px var(--mono);
	letter-spacing: -0.02em;
}
@media (max-width: 900px) {
	.github-stars .stars {
		display: none;
	}
}
.copy-cmd {
	display: inline-flex;
	align-items: stretch;
	max-width: 100%;
	padding: 0 0 0 16px;
	min-height: 48px;
	border: 1px solid var(--line);
	border-radius: 2px;
	background: rgba(0, 0, 0, 0.34);
	color: var(--text);
	font: 14px var(--mono);
	letter-spacing: -0.02em;
	cursor: pointer;
	text-align: left;
	transition: border-color 0.18s ease, background 0.18s ease;
}
/* Border light that follows the pointer; docs/glow.js sets --gx, --gy, --gp. */
.copy-cmd,
.hero-cta {
	position: relative;
}
/* The light replaces the bright hover border. */
.hero-cta:hover {
	border-color: var(--line);
}
.copy-cmd::after,
.hero-cta::after,
.nav::after {
	content: "";
	position: absolute;
	pointer-events: none;
	opacity: calc(var(--gp, 0) * 0.41);
	transition: opacity 140ms ease;
	background: radial-gradient(
		370px circle at var(--gx, -999px) var(--gy, -999px),
		rgb(140, 176, 232),
		transparent 100%
	);
}
.copy-cmd::after,
.hero-cta::after {
	inset: -1px;
	padding: 1px;
	border-radius: inherit;
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
/* The nav has only its bottom edge to light; --gy is measured from it. */
.nav::after {
	left: 0;
	right: 0;
	bottom: -1px;
	height: 1px;
}
/* The command and its label brighten with the border light as the pointer nears. */
.copy-cmd-text {
	color: color-mix(in srgb, var(--text) calc(var(--gp, 0) * 100%), var(--dim));
	transition: color 0.15s;
	font-size: 13px;
	display: block;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	padding: 12px 14px 12px 0;
	line-height: 24px;
}
.copy-cmd-text .accent {
	margin-right: 8px;
}
.copy-cmd-ico {
	flex: none;
	display: inline-flex;
	align-items: center;
	padding: 0 16px;
	color: color-mix(in srgb, var(--text) calc(var(--gp, 0) * 100%), var(--dim));
	transition: color 0.15s;
	border-left: 1px solid var(--line);
	background: rgba(255, 255, 255, 0.04);
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	white-space: nowrap;
	min-width: 90px;
	justify-content: center;
}
.copy-cmd:focus-visible .copy-cmd-text,
.copy-cmd:focus-visible .copy-cmd-ico {
	color: var(--text);
}
.copy-cmd.copied .copy-cmd-ico {
	color: var(--cyan);
}

/* Active nav link */
.links a.active {
	color: var(--text);
}

/* Docs page */
.docs-head {
	padding: 64px 0 8px;
}
.docs-head .kicker {
	margin-bottom: 14px;
}
.docs-head h1 {
	font-size: clamp(40px, 7vw, 80px);
	line-height: 0.9;
	margin: 0 0 18px;
}
.docs-head .lead {
	margin-bottom: 0;
}

.docs-layout {
	display: grid;
	grid-template-columns: 216px minmax(0, 1fr);
	gap: 56px;
	align-items: start;
	padding: 36px 0 90px;
}
.docs-side {
	position: sticky;
	top: 88px;
	display: flex;
	flex-direction: column;
	gap: 2px;
	font: 14px var(--mono);
	border-left: 1px solid var(--line);
	padding-left: 16px;
}
.docs-side a {
	position: relative;
	color: var(--muted);
	padding: 5px 0;
	transition: color 0.15s ease;
}
.docs-side a:hover {
	color: var(--text);
}
.docs-side a.active {
	color: var(--text);
}
.docs-side a.active::before {
	content: "";
	position: absolute;
	left: -17px;
	top: 5px;
	bottom: 5px;
	width: 2px;
	border-radius: 2px;
	background: var(--cyan);
	box-shadow: 0 0 10px rgba(34, 161, 220, 0.6);
}
.docs-side .grp {
	color: var(--groupBlue);
	text-transform: uppercase;
	letter-spacing: 0.12em;
	font-size: 11px;
	margin: 20px 0 4px;
}
.docs-side .grp:first-child {
	margin-top: 0;
}

.docs-content {
	min-width: 0;
	max-width: 780px;
}
/* Marks where the page moves on to the next sidebar group. */
.docs-group {
	max-width: none;
	margin: 12px 0 36px;
	color: var(--groupBlue);
}
.docs-section {
	padding: 0 0 52px;
	scroll-margin-top: 88px;
}
.docs-section h2 {
	font-size: clamp(26px, 4vw, 32px);
	line-height: 1;
	margin: 0 0 16px;
	letter-spacing: -0.045em;
}
.docs-section h3 {
	font-size: 19px;
	margin: 30px 0 10px;
	letter-spacing: -0.02em;
}
.docs-section p {
	color: var(--muted);
	line-height: 1.65;
	margin: 0 0 16px;
}
.docs-section ul,
.docs-section ol {
	color: var(--muted);
	line-height: 1.65;
	padding-left: 20px;
	margin: 0 0 16px;
}
.docs-section li {
	margin-bottom: 8px;
}
.docs-section strong {
	color: var(--text);
	font-weight: 600;
}
.docs-section a.inline {
	color: var(--cyan);
}
.docs-section a.inline:hover {
	text-decoration: underline;
}
.docs-section .code {
	margin: 16px 0;
	border-radius: 2px;
}
.docs-section .copy-cmd {
	display: flex;
	width: 100%;
	margin: 16px 0;
}
.docs-section .copy-cmd-text {
	flex: 1;
}
/* A multi-line block's copy button sits in its top-right corner. */
.code-wrap {
	position: relative;
}
.code-copy {
	position: absolute;
	top: 10px;
	right: 10px;
	padding: 6px 12px;
	border: 1px solid var(--line);
	border-radius: 2px;
	background: rgba(255, 255, 255, 0.04);
	color: var(--dim);
	font: 12px var(--mono);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	cursor: pointer;
	transition: color 0.15s;
}
.code-copy:hover,
.code-copy:focus-visible {
	color: var(--text);
}
.code-copy.copied {
	color: var(--cyan);
}

kbd {
	font: 12px var(--mono);
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid var(--line);
	border-bottom-width: 2px;
	border-radius: 6px;
	padding: 2px 7px;
	color: var(--text);
	white-space: nowrap;
}

.cmd-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 14px;
	margin: 4px 0 10px;
}
.cmd-table th {
	text-align: left;
	color: var(--dim);
	font: 11px var(--mono);
	text-transform: uppercase;
	letter-spacing: 0.1em;
	padding: 0 18px 12px 0;
	border-bottom: 1px solid var(--line);
}
.cmd-table td {
	padding: 13px 18px 13px 0;
	border-bottom: 1px solid var(--line);
	vertical-align: top;
	color: var(--muted);
	line-height: 1.5;
}
.cmd-table td:first-child {
	width: 42%;
	white-space: nowrap;
}
.cmd-table code {
	color: var(--cyan);
	font-size: 13px;
}
.cmd-table .opt {
	color: var(--violet);
}
.cmd-table .arg {
	color: var(--muted);
}

.docs-note {
	border: 1px solid var(--line);
	border-left: 2px solid var(--cyan);
	border-radius: 0 12px 12px 0;
	background: rgba(34, 161, 220, 0.05);
	padding: 14px 18px;
	margin: 0 0 18px;
	color: var(--muted);
	line-height: 1.6;
}
.docs-note strong {
	color: var(--cyan);
}

/* Blog index */
.post-list {
	max-width: 720px;
	margin-inline: auto;
	display: grid;
	gap: 18px;
}
.post {
	display: block;
	overflow: hidden;
	border: 1px solid var(--line);
	border-radius: 10px;
	background: linear-gradient(180deg, rgb(0 128 255 / 3%), rgb(72 0 255 / 4%));
	transition: border-color 0.18s ease, background 0.18s ease;
}
.post:hover {
	border-color: rgba(34, 161, 220, 0.35);
	background: linear-gradient(
		180deg,
		rgba(34, 161, 220, 0.06),
		rgb(72 0 255 / 4%)
	);
}

/* The cover is decorative: the title next to it is the real link. */
.post-cover {
	display: block;
	aspect-ratio: 16 / 7;
	overflow: hidden;
	border-bottom: 1px solid var(--line);
	background: rgba(255, 255, 255, 0.02);
}
.post-cover img {
	margin: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* The covers are dark artwork; ease them back so the card reads first. */
	opacity: 0.82;
	transition: opacity 0.18s ease, transform 0.4s ease;
}
.post:hover .post-cover img {
	opacity: 1;
	transform: scale(1.015);
}

.post-body {
	padding: 24px 28px 26px;
}
.post-meta {
	color: var(--dim);
	font: 12px var(--mono);
	letter-spacing: 0.04em;
	margin-bottom: 10px;
}
.post h2 {
	margin: 0 0 12px;
	font-size: 28px;
	line-height: 1.2;
}
.post h2 a {
	transition: color 0.15s ease;
}
.post h2 a:hover {
	color: var(--cyan);
}
.post p {
	margin: 0;
	color: var(--body);
	line-height: 1.65;
}
.post-more {
	display: inline-block;
	margin-top: 4px;
	color: var(--cyan);
	font: 13px var(--mono);
	transition: color 0.15s ease;
}
.post-more-arrow {
	display: inline-block;
	margin-left: 6px;
	transition: transform 0.18s ease;
}
.post:hover .post-more-arrow {
	transform: translateX(3px);
}
.post-tags {
	margin: 14px 0;
	display: flex;
	flex-wrap: wrap;
	gap: 6px 12px;
}
.post-tag {
	color: var(--violet);
	font: 12px var(--mono);
	opacity: 0.8;
}

/* Article page */
.article {
	max-width: 760px;
	padding: 56px 0 90px;
}
.article-head {
	margin-bottom: 36px;
}
.article-back {
	display: inline-block;
	color: var(--dim);
	font: 12px var(--mono);
	letter-spacing: 0.04em;
	margin-bottom: 22px;
	transition: color 0.15s ease;
}
.article-back:hover {
	color: var(--cyan);
}
.article-head h1 {
	font-size: clamp(34px, 5.4vw, 54px);
	line-height: 1.02;
	margin: 0 0 18px;
}
.article-meta {
	color: var(--dim);
	font: 12px var(--mono);
	letter-spacing: 0.04em;
}
.article-head .post-tags {
	margin-bottom: 0;
}

.article-cover {
	margin: 0 0 42px;
	border: 1px solid var(--line);
	border-radius: 10px;
	overflow: hidden;
	background: rgba(255, 255, 255, 0.02);
}
.article-cover img {
	display: block;
	margin: 0;
	width: 100%;
	height: auto;
}

.article-foot {
	margin-top: 56px;
	padding-top: 26px;
	border-top: 1px solid var(--line);
}
.article-nav {
	display: flex;
	justify-content: space-between;
	gap: 24px;
}
.article-nav-link {
	display: grid;
	gap: 6px;
	max-width: 46%;
	color: var(--dim);
	font: 12px var(--mono);
	letter-spacing: 0.04em;
	transition: color 0.15s ease;
}
.article-nav-link.is-next {
	text-align: right;
	margin-left: auto;
}
.article-nav-title {
	color: var(--muted);
	font-family: var(--sans);
	font-size: 14px;
	letter-spacing: 0;
	line-height: 1.4;
	transition: color 0.15s ease;
}
.comments {
	margin-top: 48px;
	min-height: 240px;
}
.article-nav-link:hover,
.article-nav-link:hover .article-nav-title {
	color: var(--cyan);
}

/* Long-form body copy: wider measure and looser leading than the cards. */
.prose {
	color: var(--body);
	font-size: 17px;
	line-height: 1.75;
}
.prose p {
	margin: 0 0 22px;
}
.prose h2 {
	margin: 52px 0 16px;
	font-size: 27px;
	line-height: 1.2;
	color: var(--text);
}
.prose h3 {
	margin: 40px 0 14px;
	font-size: 20px;
	color: var(--text);
}
.prose ul,
.prose ol {
	margin: 0 0 22px;
	padding-left: 22px;
}
.prose li {
	margin-bottom: 10px;
}
/* A nested list belongs to its parent item, so it drops the block spacing a
   top-level list carries. */
.prose li > ul,
.prose li > ol {
	margin: 8px 0 0;
}
.prose li > ul li:last-child,
.prose li > ol li:last-child {
	margin-bottom: 0;
}
.prose strong {
	color: var(--text);
	font-weight: 600;
}
.prose em {
	color: var(--muted);
}
.prose a {
	color: var(--cyan);
}
.prose a:hover {
	text-decoration: underline;
}
.prose code {
	font-size: 14px;
	color: var(--cyan);
	background: rgba(255, 255, 255, 0.05);
	border: 1px solid var(--line);
	border-radius: 4px;
	padding: 1px 5px;
}
.prose .code {
	margin: 0 0 22px;
	padding: 16px 18px;
	font-size: 13.5px;
	line-height: 1.6;
	border: 1px solid var(--line);
	border-radius: 8px;
	background: rgba(255, 255, 255, 0.03);
	overflow-x: auto;
}
.prose .code code {
	background: none;
	border: 0;
	padding: 0;
	color: inherit;
	font-size: inherit;
}
.prose blockquote {
	margin: 0 0 22px;
	padding: 4px 20px;
	border-left: 2px solid var(--cyan);
	background: rgba(34, 161, 220, 0.05);
	border-radius: 0 8px 8px 0;
	color: var(--muted);
}
/* A "---" in a post is a breath, not a rule: two lines fading out from a small
   outline glyph. The glyph cycles through three motifs borrowed from the rest
   of the site — a commit node, the wordmark's colon, an event diamond — so
   repeated dividers in one post don't read as a repeated stamp. */
.prose hr {
	border: 0;
	height: 16px;
	margin: 52px 0;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 40px;
	background-repeat: no-repeat;
	background-position: center;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='16' viewBox='0 0 20 16'%3E%3Ccircle cx='10' cy='8' r='3.25' fill='none' stroke='%236f86a3' stroke-width='1'/%3E%3C/svg%3E");
}
.prose hr::before,
.prose hr::after {
	content: "";
	height: 1px;
	width: min(150px, 26%);
	background: linear-gradient(90deg, transparent, var(--line));
}
.prose hr::after {
	background: linear-gradient(90deg, var(--line), transparent);
}
.prose hr:nth-of-type(3n + 2) {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='16' viewBox='0 0 20 16'%3E%3Ccircle cx='10' cy='4.6' r='1.5' fill='none' stroke='%236f86a3' stroke-width='1'/%3E%3Ccircle cx='10' cy='11.4' r='1.5' fill='none' stroke='%236f86a3' stroke-width='1'/%3E%3C/svg%3E");
}
.prose hr:nth-of-type(3n) {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='16' viewBox='0 0 20 16'%3E%3Cpath d='M10 3.6 L14.4 8 L10 12.4 L5.6 8 Z' fill='none' stroke='%236f86a3' stroke-width='1' stroke-linejoin='round'/%3E%3C/svg%3E");
}
/* Tables scroll inside their own box so a wide one never widens the page. */
.md-table-wrap {
	margin: 0 0 22px;
	overflow-x: auto;
	border: 1px solid var(--line);
	border-radius: 8px;
}
.md-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 15px;
}
.md-table th,
.md-table td {
	padding: 10px 16px;
	text-align: left;
	border-bottom: 1px solid var(--line);
}
/* Prose wraps rather than forcing a scroll; only the label column is held on
   one line, so the rows stay readable side by side. */
.md-table td:first-child,
.md-table th:first-child {
	white-space: nowrap;
}
.md-table th {
	color: var(--text);
	font: 12px var(--mono);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	background: rgba(255, 255, 255, 0.03);
}
.md-table td {
	color: var(--body);
}
.md-table tbody tr:last-child td {
	border-bottom: 0;
}
.md-table tbody tr:hover td {
	background: rgba(34, 161, 220, 0.04);
}

/* A draft is only reachable by direct link; the badge marks it as unpublished. */
.article-meta .is-draft-badge,
.post.is-draft .post-meta {
	color: var(--violet);
}

.md-figure {
	margin: 0 0 26px;
}
.md-figure img {
	display: block;
	/* Render at the picture's own size, capped to the column: a diagram drawn
	   at 490px shouldn't be blown up to fill the measure. */
	margin-inline: auto;
	width: auto;
	max-width: 100%;
	height: auto;
	border: 1px solid var(--line);
	border-radius: 8px;
}
.md-figure figcaption {
	max-width: 46ch;
	margin: 10px auto 0;
	color: var(--dim);
	font: 12px var(--mono);
	line-height: 1.5;
	text-align: center;
}

@media (max-width: 620px) {
	.post-body {
		padding: 20px 20px 22px;
	}
	.post h2 {
		font-size: 23px;
	}
	.article {
		padding: 36px 0 70px;
	}
	.prose {
		font-size: 16px;
	}
	.article-nav {
		flex-direction: column;
		gap: 22px;
	}
	.article-nav-link,
	.article-nav-link.is-next {
		max-width: none;
		text-align: left;
		margin-left: 0;
	}
}

/* Releases page */
.inline-link {
	color: var(--cyan);
}
.inline-link:hover {
	text-decoration: underline;
}

.rel-wrap {
	padding: 36px 0 90px;
}
.rel-list {
	max-width: 860px;
}
.rel-status {
	color: var(--muted);
	font: 14px var(--mono);
	padding: 24px 0;
}
.release {
	display: grid;
	grid-template-columns: 190px minmax(0, 1fr);
	gap: 40px;
	padding: 38px 0;
	border-top: 1px solid var(--line);
}
.release:last-child {
	border-bottom: 1px solid var(--line);
}
.rel-meta {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
}
.rel-tag {
	font: 600 20px var(--mono);
	letter-spacing: -0.03em;
	color: var(--text);
	transition: color 0.15s ease;
}
.rel-tag:hover {
	color: var(--cyan);
}
.rel-date {
	color: var(--dim);
	font: 12px var(--mono);
	letter-spacing: 0.04em;
}
.rel-badge {
	font: 11px var(--mono);
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--cyan);
	border: 1px solid rgba(34, 161, 220, 0.35);
	background: rgba(34, 161, 220, 0.08);
	border-radius: 3px;
	padding: 3px 8px;
}
.rel-badge.pre {
	color: var(--violet);
	border-color: rgba(198, 167, 255, 0.35);
	background: rgba(198, 167, 255, 0.08);
}
.rel-body {
	min-width: 0;
}
.rel-body h3 {
	margin: 0 0 12px;
	font-size: 19px;
	letter-spacing: -0.02em;
}
.rel-body p {
	color: var(--muted);
	line-height: 1.65;
	margin: 0 0 14px;
}
.rel-body ul {
	color: var(--muted);
	line-height: 1.65;
	padding-left: 20px;
	margin: 0 0 14px;
}
.rel-body li {
	margin-bottom: 8px;
}
.rel-body strong {
	color: var(--text);
	font-weight: 600;
}
.rel-body code {
	font-size: 13px;
	color: var(--cyan);
	background: rgba(255, 255, 255, 0.05);
	border: 1px solid var(--line);
	border-radius: 4px;
	padding: 1px 5px;
}
.rel-empty {
	font: 13px var(--mono);
	color: var(--dim);
}
.rel-gh {
	display: inline-block;
	margin-top: 2px;
	color: var(--dim);
	font: 13px var(--mono);
	transition: color 0.15s ease;
}
.rel-gh:hover {
	color: var(--cyan);
}

/* Markdown blocks (release notes) */
.rel-body ol {
	color: var(--muted);
	line-height: 1.65;
	padding-left: 20px;
	margin: 0 0 14px;
}
.rel-body ol li {
	margin-bottom: 8px;
}
.rel-body blockquote {
	margin: 0 0 14px;
	padding: 4px 16px;
	border-left: 2px solid var(--cyan);
	background: rgba(34, 161, 220, 0.05);
	border-radius: 0 8px 8px 0;
}
.rel-body blockquote p {
	margin: 8px 0;
}
.rel-body .code {
	margin: 0 0 14px;
	font-size: 13px;
	border-radius: 8px;
}
.rel-body .code code {
	background: none;
	border: 0;
	padding: 0;
	color: inherit;
	font-size: inherit;
}
.rel-body hr {
	border: 0;
	border-top: 1px solid var(--line);
	margin: 18px 0;
}

@media (max-width: 860px) {
	.release {
		grid-template-columns: minmax(0, 1fr);
		gap: 16px;
		padding: 30px 0;
	}
	.rel-meta {
		flex-direction: row;
		align-items: center;
		flex-wrap: wrap;
		gap: 12px;
	}
}

@media (max-width: 860px) {
	.docs-layout {
		grid-template-columns: minmax(0, 1fr);
		gap: 0;
	}
	.docs-side {
		position: static;
		border-left: 0;
		border-top: 1px solid var(--line);
		padding: 14px 0 0;
		flex-direction: row;
		flex-wrap: wrap;
		gap: 4px 16px;
		margin-bottom: 32px;
	}
	.docs-side .grp {
		width: 100%;
		margin: 10px 0 0;
	}
	.docs-side a.active::before {
		left: 0;
		right: 0;
		top: auto;
		bottom: 0;
		width: auto;
		height: 2px;
	}
	.cmd-table td:first-child {
		width: auto;
		white-space: normal;
	}
}

/* Typography: Space Grotesk for display, IBM Plex Sans for text.
   Grotesk is naturally tight — relax the Inter-era negative tracking. */
h1,
h2,
h3,
h4,
.brand,
.hero-title {
	font-family: var(--display);
	font-weight: 500;
}
h1,
.hero-title {
	letter-spacing: -0.1em;
	line-height: 0.92;
}
h2 {
	letter-spacing: -0.1em;
}
.docs-section h2 {
	letter-spacing: -0.055em;
}
.card h3,
.panel h3,
.rel-body h3,
.docs-section h3 {
	letter-spacing: -0.03em;
}
.post h2,
.prose h2,
.prose h3 {
	letter-spacing: -0.03em;
}
.lead strong {
	font-weight: 600;
}

/* Expandable command index in the docs sidebar */
.side-cmd-head {
	display: flex;
	align-items: center;
}
.side-cmd-head a {
	flex: 1;
}
.side-caret {
	background: none;
	border: 0;
	padding: 2px 2px 2px 10px;
	cursor: pointer;
	color: var(--dim);
	font: 11px var(--mono);
	line-height: 1;
	transition: color 0.15s ease, transform 0.15s ease;
}
.side-caret:hover {
	color: var(--text);
}
.side-caret.open {
	transform: rotate(90deg);
}
.side-cmds {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0 12px;
	padding: 2px 0 8px 12px;
}
.side-cmds a {
	font-size: 12px;
	padding: 3px 0;
}
.side-cmds a.active {
	color: var(--cyan);
}
.side-cmds a.active::before {
	display: none;
}
.cmd-table tr[id] {
	scroll-margin-top: 88px;
}
.cmd-table tr:target td {
	background: rgba(34, 161, 220, 0.06);
}
.docs-section h3[id] {
	scroll-margin-top: 88px;
}
@media (max-width: 860px) {
	.side-cmd-head {
		width: 100%;
	}
	.side-cmds {
		width: 100%;
		grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
	}
}

/* Mobile media: crop-zoom into the middle (or the busy end) of each shot
   instead of shrinking a wide frame into an unreadable strip. The container
   clips; flex centering overflows the frame evenly on both sides. */
@media (max-width: 620px) {
	.hero-placeholder,
	.media-placeholder {
		min-height: 0;
		padding: 0;
		overflow: hidden;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.hero-placeholder > img,
	.hero-placeholder > video,
	.media-placeholder > img,
	.media-placeholder > video {
		flex: none;
		width: auto;
		max-width: none;
		margin: 0;
		border-radius: 0;
	}
	.hero-placeholder > img,
	.hero-placeholder > video {
		height: 460px;
	}
	.media-placeholder > video {
		height: 260px;
	}
	.media-placeholder > img {
		height: 320px;
	}
	#audit .media-placeholder > img {
		height: 260px;
	}
	/* Anchor each crop where the action is: the scrubbing and the diff panel
	   sit at the right edge, the TUI's breadcrumb and command line at the left. */
	#audit .media-placeholder,
	#diff .media-placeholder {
		justify-content: flex-end;
	}
	#cli .media-placeholder {
		justify-content: flex-start;
	}
}

/* The blog's feed link, under its heading: the nav's command-link voice. */
.feed-link {
	display: inline-block;
	margin-top: 4px;
	color: var(--muted);
	font: 14px var(--mono);
	letter-spacing: -0.02em;
	text-decoration: none;
	transition: color 0.15s ease;
}
.feed-link .accent {
	margin-right: 1px;
	color: inherit;
	transition: color 0.15s ease;
}
.feed-link:hover {
	color: var(--text);
}
.feed-link:hover .accent {
	color: var(--cyan);
}

#repos .media-placeholder {
	min-height: 0;
}
#repos .media-placeholder > picture {
	display: contents;
}
#repos .media-placeholder img {
	width: 100%;
	max-width: 720px;
	height: auto;
	box-shadow: none;
}
@media (max-width: 760px) {
	#repos .media-placeholder img {
		max-width: 440px;
	}
}