.docs-catalog-hero
{
	background:
		radial-gradient(circle at 82% 18%, rgba(99, 217, 255, 0.085), transparent 32%),
		#0D0D0F;
}

.docs-catalog-hero-inner
{
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(400px, 0.95fr);
	align-items: end;
	gap: clamp(48px, 8vw, 108px);
	padding-top: clamp(82px, 11vw, 138px);
	padding-bottom: clamp(82px, 11vw, 138px);
}

.docs-catalog-hero-copy
{
	min-width: 0;
}

.docs-catalog-hero h1
{
	font-size: clamp(3.5rem, 7vw, 6.7rem);
}

.docs-catalog-discovery
{
	min-width: 0;
	padding: clamp(22px, 3vw, 30px);
	border: 1px solid var(--surface-border);
	background: rgba(17, 17, 20, 0.88);
	box-shadow: 0 24px 80px rgba(0, 0, 0, 0.24);
}

.docs-catalog-search
{
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center;
	min-height: 58px;
	border: 1px solid #3A3A3E;
	background: #09090B;
	transition: border-color 180ms ease, box-shadow 180ms ease;
}

.docs-catalog-search:focus-within
{
	border-color: var(--accent-cyan);
	box-shadow: 0 0 0 3px rgba(99, 217, 255, 0.12);
}

.docs-catalog-search label
{
	display: inline-flex;
	padding-left: 17px;
	color: var(--accent-cyan);
}

.docs-catalog-search svg
{
	width: 20px;
	height: 20px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.8;
	stroke-linecap: round;
}

.docs-catalog-search input
{
	min-width: 0;
	min-height: 56px;
	padding: 0 13px;
	border: 0;
	outline: 0;
	background: transparent;
	color: var(--text-main);
	font: inherit;
	font-size: 0.94rem;
}

.docs-catalog-search input::placeholder
{
	color: #85857F;
}

.docs-catalog-search kbd
{
	margin-right: 13px;
	padding: 4px 8px;
	border: 1px solid #3A3A3E;
	background: #18181B;
	color: var(--text-muted);
	font-size: 0.68rem;
	font-weight: 800;
}

.docs-catalog-filter-row
{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	margin-top: 18px;
}

.docs-catalog-filters
{
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 7px;
}

.docs-catalog-filters button,
.docs-catalog-empty button
{
	min-height: 40px;
	padding: 0 12px;
	border: 1px solid #3A3A3E;
	border-radius: 999px;
	background: transparent;
	color: var(--text-muted);
	font: inherit;
	font-size: 0.75rem;
	font-weight: 760;
	cursor: pointer;
	transition: border-color 180ms ease, background-color 180ms ease, color 180ms ease;
}

.docs-catalog-filters button:hover,
.docs-catalog-filters button:focus-visible,
.docs-catalog-filters button[aria-pressed="true"],
.docs-catalog-empty button:hover,
.docs-catalog-empty button:focus-visible
{
	border-color: rgba(99, 217, 255, 0.62);
	background: rgba(99, 217, 255, 0.08);
	color: var(--text-main);
}

.docs-catalog-filter-row > p
{
	margin: 0;
	color: #9D9D97;
	font-size: 0.74rem;
	font-weight: 700;
	white-space: nowrap;
}

.docs-catalog-heading
{
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(280px, 0.55fr);
	align-items: end;
	gap: clamp(28px, 6vw, 72px);
	margin-bottom: clamp(34px, 5vw, 52px);
}

.docs-catalog-heading .section-heading
{
	margin-bottom: 0;
}

.docs-catalog-heading > p
{
	margin: 0;
	color: var(--text-muted);
	font-size: 0.9rem;
	line-height: 1.7;
}

.docs-catalog-grid
{
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px;
	border: 0;
}

.docs-catalog-grid .docs-catalog-card
{
	--docs-accent: #63D9FF;
	--docs-accent-rgb: 99, 217, 255;
	position: relative;
	display: flex;
	flex-direction: column;
	min-width: 0;
	min-height: 440px;
	padding: clamp(24px, 3vw, 32px);
	border: 1px solid var(--surface-border);
	background: #111114;
	overflow: hidden;
	transition: border-color 180ms ease, background-color 180ms ease;
}

.docs-catalog-card::before
{
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: var(--docs-accent);
}

.docs-catalog-card:hover,
.docs-catalog-card:focus-within
{
	border-color: rgba(var(--docs-accent-rgb), 0.5);
	background: #141417;
}

.docs-catalog-card[hidden]
{
	display: none;
}

.docs-catalog-grid .docs-catalog-card-fog
{
	--docs-accent: #6ED6E7;
	--docs-accent-rgb: 110, 214, 231;
}

.docs-catalog-grid .docs-catalog-card-apple
{
	--docs-accent: #F08A78;
	--docs-accent-rgb: 240, 138, 120;
}

.docs-catalog-grid .docs-catalog-card-swap
{
	--docs-accent: #7DDC73;
	--docs-accent-rgb: 125, 220, 115;
}

.docs-catalog-grid .docs-catalog-card-grass
{
	--docs-accent: #D5B56B;
	--docs-accent-rgb: 213, 181, 107;
}

.docs-catalog-grid .docs-catalog-card-capture
{
	--docs-accent: #54BDEB;
	--docs-accent-rgb: 84, 189, 235;
}

.docs-catalog-grid .docs-catalog-card-sdk
{
	--docs-accent: #A9A6FF;
	--docs-accent-rgb: 169, 166, 255;
}

.docs-catalog-card-top
{
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
}

.docs-catalog-card .docs-catalog-mark
{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	margin: 0;
	flex: 0 0 auto;
	border: 1px solid rgba(var(--docs-accent-rgb), 0.42);
	border-radius: 15px;
	background: #0B0B0D;
	overflow: hidden;
}

.docs-catalog-card .docs-catalog-mark img
{
	display: block;
	width: 100%;
	height: 100%;
	border-radius: 13px;
	object-fit: cover;
}

.docs-catalog-card-swap .docs-catalog-mark img
{
	object-position: 24% 16%;
}

.docs-catalog-card-grass .docs-catalog-mark img
{
	object-position: 52% 62%;
}

.docs-catalog-card-sdk .docs-catalog-mark img
{
	padding: 7px;
	object-fit: contain;
}

.docs-catalog-kind
{
	margin-top: 8px;
	color: #9D9D97;
	font-size: 0.64rem;
	font-weight: 820;
	letter-spacing: 0.08em;
	text-align: right;
	text-transform: uppercase;
}

.docs-catalog-grid .docs-catalog-card .docs-catalog-version
{
	margin: 32px 0 0;
	color: var(--docs-accent);
	font-size: 0.68rem;
	font-weight: 850;
	letter-spacing: 0.085em;
	text-transform: uppercase;
}

.docs-catalog-card h3
{
	margin: 11px 0 0;
	font-size: clamp(2rem, 3.4vw, 3.1rem);
	line-height: 0.98;
	overflow-wrap: anywhere;
}

.docs-catalog-card .docs-catalog-summary
{
	margin: 17px 0 0;
	font-size: 0.89rem;
	line-height: 1.68;
}

.docs-catalog-card ul
{
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 7px;
	margin: 22px 0 0;
	padding: 0;
	list-style: none;
}

.docs-catalog-card li
{
	padding: 5px 8px;
	border: 1px solid rgba(var(--docs-accent-rgb), 0.24);
	background: rgba(var(--docs-accent-rgb), 0.045);
	color: #B7B7B1;
	font-size: 0.67rem;
	font-weight: 700;
}

.docs-catalog-card .docs-catalog-boundary
{
	margin: 22px 0 0;
	padding-top: 16px;
	border-top: 1px solid var(--surface-border);
	color: #A7A7A1;
	font-size: 0.73rem;
	line-height: 1.55;
}

.docs-catalog-boundary strong
{
	display: block;
	margin-bottom: 4px;
	color: var(--text-soft);
	font-size: 0.62rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.docs-catalog-link
{
	display: inline-flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	min-height: 44px;
	margin-top: auto;
	padding-top: 21px;
	color: var(--docs-accent);
	font-size: 0.8rem;
	font-weight: 800;
	text-decoration: none;
}

.docs-catalog-link:hover,
.docs-catalog-link:focus-visible
{
	color: var(--text-main);
	text-decoration: underline;
	text-underline-offset: 5px;
}

.docs-catalog-link svg
{
	width: 18px;
	height: 18px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.docs-catalog-empty
{
	display: grid;
	justify-items: center;
	gap: 16px;
	margin-top: 14px;
	padding: 54px 24px;
	border: 1px solid var(--surface-border);
	background: #111114;
	text-align: center;
}

.docs-catalog-empty[hidden]
{
	display: none;
}

.docs-catalog-empty p
{
	margin: 0;
	color: var(--text-muted);
}

@media (max-width: 1080px)
{
	.docs-catalog-hero-inner
	{
		grid-template-columns: 1fr;
		align-items: start;
	}

	.docs-catalog-discovery
	{
		width: min(760px, 100%);
	}
}

@media (max-width: 900px)
{
	.docs-catalog-hero-inner
	{
		width: calc(100% - 24px);
	}

	.docs-catalog-hero h1
	{
		font-size: clamp(3rem, 14vw, 5.1rem);
	}

	.docs-catalog-heading
	{
		grid-template-columns: 1fr;
		gap: 18px;
	}

	.docs-catalog-grid
	{
		grid-template-columns: 1fr;
	}

	.docs-catalog-grid .docs-catalog-card
	{
		min-height: 0;
	}

	.docs-catalog-filter-row
	{
		align-items: flex-start;
		flex-direction: column;
		gap: 13px;
	}

	.docs-catalog-filter-row > p
	{
		white-space: normal;
	}
}

@media (max-width: 520px)
{
	.docs-catalog-discovery
	{
		padding: 18px;
	}

	.docs-catalog-search
	{
		grid-template-columns: auto minmax(0, 1fr);
	}

	.docs-catalog-search kbd
	{
		display: none;
	}

	.docs-catalog-filters
	{
		align-items: stretch;
		width: 100%;
	}

	.docs-catalog-filters button
	{
		flex: 1 1 auto;
	}
}

@media (prefers-reduced-motion: reduce)
{
	.docs-catalog-search,
	.docs-catalog-filters button,
	.docs-catalog-empty button,
	.docs-catalog-card
	{
		transition: none;
	}
}