/* GramBots — site styles. Values mirror the legacy Tailwind theme. */

:root {
	--neutral-50: oklch(98.5% 0 0);
	--neutral-100: oklch(97% 0 0);
	--neutral-200: oklch(92.2% 0 0);
	--neutral-300: oklch(87% 0 0);
	--neutral-400: oklch(70.8% 0 0);
	--neutral-500: oklch(55.6% 0 0);
	--neutral-600: oklch(43.9% 0 0);
	--neutral-700: oklch(37.1% 0 0);
	--neutral-800: oklch(26.9% 0 0);
	--neutral-900: oklch(20.5% 0 0);
	--neutral-950: oklch(14.5% 0 0);

	--primary-50: #fff7ed;
	--primary-100: #ffedd5;
	--primary-400: #fb923c;
	--primary-500: #f97316;
	--primary-600: #ea580c;
	--primary-700: #c2410c;
	--primary-800: #9a3412;

	--amber-50: oklch(98.7% 0.022 95.277);
	--amber-100: oklch(96.2% 0.059 95.617);
	--amber-300: oklch(87.9% 0.169 91.605);
	--amber-400: oklch(82.8% 0.189 84.429);
	--amber-700: oklch(55.5% 0.163 48.998);
	--red-500: oklch(63.7% 0.237 25.331);

	--radius-md: 0.375rem;
	--radius-lg: 0.5rem;
	--radius-xl: 0.75rem;
	--radius-2xl: 1rem;

	/* System fonts only (Tailwind's default sans stack). */
	--font-sans:
		ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
		"Noto Color Emoji";
}

/* ---------- Reset ---------- */

*,
::before,
::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	border: 0 solid;
}

html {
	line-height: 1.5;
	-webkit-text-size-adjust: 100%;
	tab-size: 4;
	font-family: var(--font-sans);
	-webkit-tap-highlight-color: transparent;
}

h1,
h2,
h3,
h4 {
	font-size: inherit;
	font-weight: inherit;
}

a {
	color: inherit;
	text-decoration: inherit;
}

ol,
ul {
	list-style: none;
}

img,
svg,
video {
	display: block;
	vertical-align: middle;
}

img,
video {
	max-width: 100%;
	height: auto;
}

button,
input,
select,
textarea {
	font: inherit;
	color: inherit;
	letter-spacing: inherit;
	background-color: transparent;
	border-radius: 0;
}

button,
select,
summary {
	cursor: pointer;
}

textarea {
	resize: vertical;
}

input::placeholder,
textarea::placeholder {
	color: var(--neutral-400);
	opacity: 1;
}

[hidden] {
	display: none !important;
}

/* ---------- Utilities ---------- */

.container {
	width: 100%;
	max-width: 64rem;
	margin-inline: auto;
	padding-inline: 1rem;
}

.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.truncate {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.clamp-3 {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	overflow: hidden;
}

.min-w-0 {
	min-width: 0;
}

.shrink-0 {
	flex-shrink: 0;
}

.icon-3 {
	width: 0.75rem;
	height: 0.75rem;
}

.icon-3-5 {
	width: 0.875rem;
	height: 0.875rem;
}

.icon-4 {
	width: 1rem;
	height: 1rem;
}

.icon-4-5 {
	width: 1.125rem;
	height: 1.125rem;
}

.icon-5 {
	width: 1.25rem;
	height: 1.25rem;
}

.icon-6 {
	width: 1.5rem;
	height: 1.5rem;
}

.icon-7 {
	width: 1.75rem;
	height: 1.75rem;
}

.muted {
	color: var(--neutral-500);
}

.muted-strong {
	color: var(--neutral-600);
}

.muted-dark {
	color: var(--neutral-700);
}

.faint {
	color: var(--neutral-400);
}

[dir="rtl"] .flip-rtl {
	transform: scaleX(-1);
}

.category-icon {
	display: inline-flex;
	flex-shrink: 0;
}

.category-icon > svg {
	width: 100%;
	height: 100%;
}

.stack-1,
.stack-2,
.stack-3,
.stack-4,
.stack-5,
.stack-6,
.stack-8,
.stack-10,
.stack-16 {
	display: grid;
}

.stack-1 {
	gap: 0.25rem;
}

.stack-2 {
	gap: 0.5rem;
}

.stack-3 {
	gap: 0.75rem;
}

.stack-4 {
	gap: 1rem;
}

.stack-5 {
	gap: 1.25rem;
}

.stack-6 {
	gap: 1.5rem;
}

.stack-8 {
	gap: 2rem;
}

.stack-10 {
	gap: 2.5rem;
}

.stack-16 {
	gap: 4rem;
}

/* Grid children must be allowed to shrink below their content. */
[class^="stack-"] > *,
[class*=" stack-"] > * {
	min-width: 0;
}

.measure-2xl {
	max-width: 42rem;
}

.measure-3xl {
	max-width: 48rem;
}

/* ---------- Page shell ---------- */

body {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	width: 100%;
	background: white;
	color: var(--neutral-800);
	font-size: 0.875rem;
	line-height: 1.25rem;
}

.site-header {
	background: white;
}

.site-header-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding-block: 1rem;
}

.brand {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 1.125rem;
	line-height: 1.75rem;
	font-weight: 500;
	letter-spacing: -0.025em;
	color: var(--neutral-950);
}

.brand img {
	width: 1.5rem;
	height: 1.5rem;
}

.site-main {
	display: flex;
	flex: 1;
	flex-direction: column;
}

.site-main main {
	flex: 1;
	padding-block: 1.5rem;
}

/* ---------- Type ---------- */

.page-title {
	text-wrap: balance;
	font-size: 1.875rem;
	line-height: 2.25rem;
	font-weight: 700;
	letter-spacing: -0.05em;
	color: var(--neutral-950);
}

.page-title-icon {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

.page-intro {
	text-wrap: balance;
	font-size: 1rem;
	line-height: 1.75rem;
	color: var(--neutral-600);
}

.intro-spaced {
	margin-top: 0.75rem;
}

@media (min-width: 40rem) {
	.page-title {
		font-size: 2.25rem;
		line-height: 2.5rem;
	}

	.page-intro {
		font-size: 1.125rem;
	}
}

/* The categories index uses a lighter, fixed-size heading. */
.page-title.page-title-semibold {
	font-size: 1.875rem;
	line-height: 2.25rem;
	font-weight: 600;
}

.section-title {
	font-size: 1.125rem;
	line-height: 1.75rem;
	font-weight: 600;
	letter-spacing: -0.025em;
	color: var(--neutral-950);
}

.section-title-lg {
	font-size: 1.5rem;
	line-height: 2rem;
	font-weight: 700;
	letter-spacing: -0.05em;
	color: var(--neutral-950);
}

.section-text {
	color: var(--neutral-600);
}

.link-primary {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	font-size: 0.875rem;
	font-weight: 500;
	color: var(--primary-700);
	transition: color 0.15s;
}

.link-primary:hover {
	color: var(--primary-800);
	text-decoration: underline;
}

.empty-state {
	border: 1px solid var(--neutral-200);
	border-radius: var(--radius-lg);
	background: var(--neutral-50);
	padding: 2rem 1rem;
	text-align: center;
	color: var(--neutral-500);
}

.empty-state-start {
	text-align: start;
}

/* ---------- Buttons & form controls ---------- */

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	height: 2.75rem;
	padding-inline: 1rem;
	border-radius: var(--radius-lg);
	font-size: 0.875rem;
	font-weight: 500;
	transition:
		color 0.15s,
		background-color 0.15s,
		border-color 0.15s;
}

.btn-primary {
	background: var(--primary-700);
	color: white;
}

.btn-primary:hover {
	background: var(--primary-800);
}

.btn-secondary {
	border: 1px solid var(--neutral-200);
	background: white;
	color: var(--neutral-700);
}

.btn-secondary:hover {
	border-color: var(--neutral-300);
	color: var(--neutral-950);
}

.btn-sm {
	height: 2.5rem;
}

.btn-xs {
	flex-shrink: 0;
	height: 2rem;
	padding-inline: 0.75rem;
	font-size: 0.75rem;
	line-height: 1rem;
}

.btn:focus-visible,
.btn-ghost:focus-visible {
	outline: none;
	box-shadow: 0 0 0 2px var(--primary-100);
}

.btn-ghost {
	border: 1px solid var(--neutral-200);
	border-radius: var(--radius-lg);
	background: white;
	padding: 0.375rem 0.75rem;
	font-size: 0.75rem;
	line-height: 1rem;
	font-weight: 500;
	color: var(--neutral-600);
	transition:
		color 0.15s,
		border-color 0.15s;
}

.btn-ghost:hover {
	border-color: var(--neutral-300);
	color: var(--neutral-950);
}

.input,
.select,
.textarea {
	border: 1px solid var(--neutral-200);
	border-radius: var(--radius-lg);
	background: white;
	outline: none;
	transition:
		border-color 0.15s,
		box-shadow 0.15s;
}

.input:focus,
.select:focus,
.textarea:focus {
	border-color: var(--neutral-300);
	box-shadow: 0 0 0 2px var(--neutral-200);
}

.select {
	height: 2.25rem;
	flex-shrink: 0;
	padding-inline: 0.75rem;
	font-weight: 500;
	color: var(--neutral-700);
}

.select-sm {
	padding-inline: 0.5rem;
	font-size: 0.75rem;
}

.select-sm:hover {
	border-color: var(--neutral-300);
}

.textarea {
	min-height: 6rem;
	padding: 0.5rem 0.75rem;
	line-height: 1.5rem;
	color: var(--neutral-950);
}

.textarea:focus {
	border-color: var(--neutral-400);
	box-shadow: 0 0 0 2px var(--neutral-100);
}

/* ---------- Avatars ---------- */

.avatar {
	flex-shrink: 0;
	border-radius: 9999px;
	background: var(--neutral-100);
	box-shadow: 0 0 0 1px var(--neutral-200);
	object-fit: cover;
}

.avatar-initial {
	display: grid;
	place-items: center;
	font-weight: 600;
	color: var(--neutral-500);
}

.avatar-xs {
	width: 1.5rem;
	height: 1.5rem;
	font-size: 10px;
}

.avatar-sm {
	width: 2.25rem;
	height: 2.25rem;
	font-size: 0.75rem;
}

.avatar-ad {
	width: 2.5rem;
	height: 2.5rem;
}

.avatar-md {
	width: 4rem;
	height: 4rem;
	font-size: 1.25rem;
}

.avatar-lg {
	width: 5rem;
	height: 5rem;
	font-size: 1.5rem;
}

@media (min-width: 40rem) {
	.avatar-lg {
		width: 6rem;
		height: 6rem;
	}
}

/* ---------- Home ---------- */

.home-hero {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
}

.home-intro {
	margin-top: 0.75rem;
	max-width: 36rem;
}

.home-community {
	display: grid;
	flex-shrink: 0;
	gap: 0.5rem;
}

.home-community p {
	text-align: center;
	font-size: 0.75rem;
	line-height: 1.25rem;
	color: var(--neutral-600);
}

@media (min-width: 48rem) {
	.home-hero {
		flex-direction: row;
		align-items: flex-start;
		justify-content: space-between;
	}

	.home-community {
		width: 18rem;
	}

	.home-community p {
		text-align: start;
	}
}

.section-heading-center {
	max-width: 42rem;
	margin-inline: auto;
	text-align: center;
}

.section-heading-center p {
	margin-top: 0.5rem;
	line-height: 1.5rem;
	color: var(--neutral-600);
}

.top-categories {
	margin-top: 1.25rem;
}

.view-all {
	display: flex;
	justify-content: flex-end;
	margin-top: 1.25rem;
}

/* ---------- Grids & cards ---------- */

.card-grid,
.bot-grid {
	display: grid;
	gap: 1rem;
}

.card-grid-2 {
	display: grid;
	gap: 1rem;
}

.tool-grid,
.how-to-grid {
	display: grid;
	gap: 0.75rem;
}

@media (min-width: 40rem) {
	.card-grid,
	.bot-grid,
	.card-grid-2,
	.tool-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.how-to-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (min-width: 64rem) {
	.card-grid,
	.bot-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.bot-card {
	display: flex;
	height: 100%;
	min-width: 0;
	align-items: center;
	gap: 1rem;
	border: 1px solid var(--neutral-200);
	border-radius: var(--radius-lg);
	background: white;
	padding: 1rem;
	transition:
		background-color 0.15s,
		border-color 0.15s;
}

.bot-card:hover {
	border-color: var(--neutral-300);
	background: var(--neutral-50);
}

.bot-card:focus-visible {
	outline: none;
	box-shadow: 0 0 0 2px var(--neutral-200);
}

.bot-card-featured {
	border-color: var(--amber-300);
	background: color-mix(in oklab, var(--amber-50) 50%, transparent);
}

.bot-card-featured:hover {
	border-color: var(--amber-400);
	background: var(--amber-50);
}

.bot-card-featured:focus-visible {
	box-shadow: 0 0 0 2px var(--amber-100);
}

.bot-card-body {
	min-width: 0;
	flex: 1;
}

.bot-card-name {
	display: flex;
	min-width: 0;
	align-items: center;
	gap: 0.375rem;
	font-size: 1rem;
	line-height: 1.5rem;
	font-weight: 600;
	color: var(--neutral-950);
}

.bot-card-description {
	margin-top: 0.25rem;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
	line-height: 1.5rem;
	color: var(--neutral-600);
}

.badge-featured {
	flex-shrink: 0;
	border-radius: 9999px;
	background: var(--amber-100);
	padding: 0.125rem 0.5rem;
	font-size: 10px;
	line-height: 1rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.025em;
	color: var(--amber-700);
}

.badge-featured-lg {
	padding: 0.25rem 0.625rem;
	font-size: 0.75rem;
	letter-spacing: 0.025em;
}

/* Bordered card with a tinted inner panel (home categories, blog posts). */
.soft-card {
	display: block;
	border: 1px solid var(--neutral-200);
	border-radius: var(--radius-lg);
	padding: 0.25rem;
	transition: border-color 0.15s;
}

.soft-card:hover {
	border-color: var(--neutral-300);
}

.soft-card-inner {
	height: 100%;
	border-radius: var(--radius-md);
	background: var(--neutral-50);
	padding: 1rem;
	transition: background-color 0.15s;
}

.soft-card:hover .soft-card-inner {
	background: color-mix(in oklab, var(--neutral-100) 80%, transparent);
}

.soft-card-column {
	display: flex;
	flex-direction: column;
}

.soft-card-head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 1rem;
}

.soft-card-title {
	display: flex;
	min-width: 0;
	align-items: center;
	gap: 0.5rem;
	font-size: 1rem;
	line-height: 1.5rem;
	font-weight: 600;
	color: var(--neutral-950);
}

.soft-card-text {
	margin-top: 0.75rem;
	line-height: 1.5rem;
	color: var(--neutral-600);
}

.count-pill {
	flex-shrink: 0;
	border: 1px solid var(--neutral-200);
	border-radius: 9999px;
	background: white;
	padding: 0.125rem 0.5rem;
	font-size: 0.75rem;
	line-height: 1rem;
	font-weight: 500;
	font-variant-numeric: tabular-nums;
	color: var(--neutral-500);
}

.category-card {
	display: grid;
	gap: 0.75rem;
	align-content: start;
	border: 1px solid var(--neutral-200);
	border-radius: var(--radius-lg);
	background: white;
	padding: 1rem;
	transition:
		background-color 0.15s,
		border-color 0.15s;
}

.category-card:hover {
	border-color: var(--neutral-300);
	background: var(--neutral-50);
}

.category-card:focus-visible {
	outline: none;
	box-shadow: 0 0 0 2px var(--neutral-200);
}

.category-card-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
}

.category-card-name {
	display: flex;
	min-width: 0;
	align-items: center;
	gap: 0.5rem;
	font-weight: 500;
	color: var(--neutral-950);
}

.category-card-count {
	flex-shrink: 0;
	font-size: 0.75rem;
	line-height: 1rem;
	font-weight: 500;
	font-variant-numeric: tabular-nums;
	color: var(--neutral-500);
	transition: color 0.15s;
}

.category-card:hover .category-card-count {
	color: var(--neutral-950);
}

.category-card-bots {
	display: grid;
	gap: 0.5rem;
}

.category-card-bots li {
	display: flex;
	min-width: 0;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.75rem;
	line-height: 1rem;
	color: var(--neutral-600);
}

.category-card-bots .avatar {
	box-shadow: none;
	border: 1px solid var(--neutral-200);
}

.official-card {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
}

.official-card-main {
	display: flex;
	align-items: center;
	gap: 1rem;
}

.avatar-stack {
	display: flex;
}

.avatar-stack > span {
	position: relative;
}

.avatar-stack > span + span {
	margin-inline-start: -0.75rem;
}

.avatar-stack .avatar {
	border: 1px solid var(--neutral-200);
	box-shadow: 0 0 0 2px white;
}

.group-heading {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 1rem;
}

.group-title {
	font-size: 1.125rem;
	line-height: 1.75rem;
	font-weight: 600;
	letter-spacing: -0.025em;
	color: var(--neutral-950);
}

.group-title a {
	transition: color 0.15s;
}

.group-title a:hover {
	color: var(--neutral-700);
}

.group-description {
	margin-top: 0.25rem;
	max-width: 42rem;
	line-height: 1.5rem;
	color: var(--neutral-600);
}

.breadcrumbs {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.breadcrumbs-slash {
	color: var(--neutral-400);
}

.tool-card {
	border: 1px solid var(--neutral-200);
	border-radius: var(--radius-xl);
	background: white;
	padding: 1.25rem;
	transition:
		background-color 0.15s,
		border-color 0.15s;
}

.tool-card:hover {
	border-color: var(--neutral-300);
	background: var(--neutral-50);
}

.tool-card-name {
	font-size: 1rem;
	line-height: 1.5rem;
	font-weight: 600;
	color: var(--neutral-950);
}

.tool-card-summary {
	margin-top: 0.5rem;
	line-height: 1.5rem;
	color: var(--neutral-600);
}

.read-more {
	margin-top: 0.75rem;
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	font-weight: 500;
	color: var(--primary-700);
	transition: color 0.15s;
}

.soft-card:hover .read-more,
.tool-card:hover .read-more {
	color: var(--primary-800);
}

.post-date {
	font-size: 0.75rem;
	line-height: 1rem;
	font-weight: 500;
	color: var(--neutral-500);
}

.post-title {
	margin-top: 0.5rem;
}

.soft-card-column .soft-card-text {
	margin-top: 0.5rem;
}

/* ---------- Listing controls ---------- */

.listing-controls {
	display: grid;
	gap: 0.75rem;
}

.search-form {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

@media (min-width: 40rem) {
	.search-form {
		flex-direction: row;
		align-items: center;
	}
}

.search-field {
	position: relative;
	min-width: 0;
	flex: 1;
}

.search-icon {
	pointer-events: none;
	position: absolute;
	inset-inline-start: 0.75rem;
	top: 50%;
	width: 1rem;
	height: 1rem;
	transform: translateY(-50%);
	color: var(--neutral-400);
}

.search-field .input {
	height: 2.25rem;
	width: 100%;
	padding-inline: 2.5rem 1rem;
	color: var(--neutral-900);
}

.search-field .input::placeholder {
	color: var(--neutral-500);
}

.chips {
	margin-top: 1rem;
	contain: inline-size;
}

.chips-row {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin-inline: -1rem;
	padding-inline-end: 1rem;
}

.chips-viewport {
	position: relative;
	min-width: 0;
	flex: 1;
}

.chips-scroller {
	display: flex;
	gap: 0.25rem;
	overflow-x: auto;
	padding-inline: 1rem;
	scrollbar-width: none;
}

.chips-scroller::-webkit-scrollbar {
	display: none;
}

.chip {
	display: inline-flex;
	flex-shrink: 0;
	align-items: center;
	gap: 0.375rem;
	height: 1.75rem;
	white-space: nowrap;
	border-radius: 9999px;
	padding-inline: 0.75rem;
	font-size: 0.75rem;
	line-height: 1rem;
	font-weight: 600;
	color: var(--neutral-600);
	transition:
		color 0.15s,
		background-color 0.15s;
}

.chip:hover {
	background: var(--neutral-100);
	color: var(--neutral-950);
}

.chip-active,
.chip-active:hover {
	background: var(--primary-700);
	color: white;
}

.chip-outline {
	gap: 0.25rem;
	border: 1px solid var(--neutral-200);
	padding-inline: 0.75rem 0.5rem;
}

.chips-fade {
	pointer-events: none;
	position: absolute;
	inset-block: 0;
	width: 3.5rem;
	opacity: 0;
	transition: opacity 0.15s;
}

.chips-fade.is-visible {
	opacity: 1;
}

.chips-fade-start {
	inset-inline-start: 0;
	background: linear-gradient(to right, white, transparent);
}

.chips-fade-end {
	inset-inline-end: 0;
	background: linear-gradient(to left, white, transparent);
}

[dir="rtl"] .chips-fade-start {
	background: linear-gradient(to left, white, transparent);
}

[dir="rtl"] .chips-fade-end {
	background: linear-gradient(to right, white, transparent);
}

.bot-results {
	display: contents;
}

.pagination {
	display: flex;
	justify-content: center;
	margin-top: 2rem;
}

.pagination-group {
	display: inline-flex;
	overflow: hidden;
	border: 1px solid var(--neutral-200);
	border-radius: var(--radius-lg);
	background: white;
}

.pagination-link,
.pagination-current {
	display: inline-flex;
	height: 2.5rem;
	align-items: center;
	justify-content: center;
	padding-inline: 1rem;
	font-weight: 500;
}

.pagination-link {
	min-width: 5rem;
	color: var(--neutral-300);
	transition:
		color 0.15s,
		background-color 0.15s;
}

a.pagination-link {
	color: var(--neutral-700);
}

a.pagination-link:hover {
	background: var(--neutral-50);
	color: var(--neutral-950);
}

a.pagination-link:focus-visible {
	outline: none;
	box-shadow: inset 0 0 0 2px var(--neutral-200);
}

.pagination-current {
	min-width: 4rem;
	border-inline: 1px solid var(--neutral-200);
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	color: var(--neutral-950);
}

.pagination-slash {
	padding-inline: 0.25rem;
	color: var(--neutral-300);
}

/* ---------- Ads ---------- */

.ad {
	position: relative;
	border-radius: var(--radius-lg);
	border: 1px solid var(--primary-100);
	background: color-mix(in oklab, var(--primary-50) 50%, transparent);
	transition:
		border-color 0.15s,
		background-color 0.15s;
}

.ad:hover {
	border-color: color-mix(in oklab, var(--primary-400) 60%, transparent);
}

.ad-placeholder {
	border: 1px dashed color-mix(in oklab, var(--primary-400) 50%, transparent);
	background: color-mix(in oklab, var(--primary-50) 60%, transparent);
}

.ad-placeholder:hover {
	border-color: var(--primary-500);
	background: var(--primary-50);
}

.ad-banner {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 1rem;
}

.ad-card {
	display: block;
	padding: 1rem;
}

.ad-card-row {
	display: flex;
	gap: 0.75rem;
}

.ad-label {
	position: absolute;
	inset-inline-end: 0.75rem;
	top: 0.75rem;
	border-radius: 9999px;
	background: var(--primary-100);
	padding: 0.125rem 0.5rem;
	font-size: 10px;
	line-height: 1rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.025em;
	color: var(--primary-700);
}

.ad-body {
	display: block;
	min-width: 0;
}

.ad-banner .ad-body {
	padding-inline-end: 2.5rem;
}

.ad-title {
	display: block;
	font-weight: 600;
	color: var(--neutral-950);
}

.ad-card .ad-title {
	padding-inline-end: 3rem;
}

.ad-description {
	display: block;
	margin-top: 0.125rem;
	font-size: 0.75rem;
	line-height: 1.25rem;
	color: var(--neutral-600);
}

.ad-card .ad-description {
	margin-top: 0.25rem;
}

.ad-cta {
	flex-shrink: 0;
	font-size: 0.75rem;
	line-height: 1rem;
	font-weight: 600;
	color: var(--primary-700);
}

.ad-banner .ad-cta {
	margin-inline: auto 3rem;
}

.ad-card .ad-cta {
	display: inline-block;
	margin-top: 0.5rem;
}

/* ---------- Bot page ---------- */

.bot-layout {
	display: grid;
	gap: 2rem;
}

@media (min-width: 64rem) {
	.bot-layout {
		grid-template-columns: minmax(0, 1fr) 18rem;
		align-items: start;
	}
}

.bot-header {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
}

@media (min-width: 40rem) {
	.bot-header {
		flex-direction: row;
		align-items: center;
	}
}

.bot-title {
	display: flex;
	min-width: 0;
	align-items: center;
	gap: 0.5rem;
	text-wrap: balance;
	font-weight: 700;
	letter-spacing: -0.05em;
	color: var(--neutral-950);
}

.bot-title-text {
	min-width: 0;
	overflow-wrap: break-word;
}

.bot-title-lg {
	font-size: 1.875rem;
	line-height: 2.25rem;
}

.bot-title-md {
	font-size: 1.5rem;
	line-height: 2rem;
}

.bot-title-sm {
	font-size: 1.25rem;
	line-height: 1.75rem;
}

@media (min-width: 40rem) {
	.bot-title-lg {
		font-size: 2.25rem;
		line-height: 2.5rem;
	}

	.bot-title-md {
		font-size: 1.875rem;
		line-height: 2.25rem;
	}

	.bot-title-sm {
		font-size: 1.5rem;
		line-height: 2rem;
	}
}

.bot-meta {
	margin-top: 0.5rem;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.25rem 1rem;
}

.bot-username {
	display: inline-flex;
	font-weight: 500;
	color: var(--neutral-500);
	transition: color 0.15s;
}

.bot-username:hover {
	color: var(--neutral-950);
}

.bot-users {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	color: var(--neutral-600);
}

.bot-short {
	margin-top: 1.5rem;
	max-width: 48rem;
	text-wrap: balance;
	font-size: 1rem;
	line-height: 1.75rem;
	color: var(--neutral-600);
}

@media (min-width: 40rem) {
	.bot-short {
		font-size: 1.125rem;
	}
}

.bot-actions {
	margin-top: 1.5rem;
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

@media (min-width: 40rem) {
	.bot-actions {
		flex-direction: row;
		flex-wrap: wrap;
	}
}

.bot-description {
	margin-top: 2rem;
}

.bot-added {
	margin-top: 1.5rem;
	font-size: 0.75rem;
	line-height: 1rem;
	color: var(--neutral-500);
}

.bot-sidebar {
	display: grid;
	gap: 1rem;
}

@media (min-width: 64rem) {
	.bot-sidebar {
		position: sticky;
		top: 1.5rem;
	}
}

.sidebar-panel {
	display: grid;
	gap: 1.25rem;
	border: 1px solid var(--neutral-200);
	border-radius: var(--radius-lg);
	background: var(--neutral-50);
	padding: 1rem;
}

.sidebar-heading {
	font-size: 0.75rem;
	line-height: 1rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.025em;
	color: var(--neutral-500);
}

.sidebar-panel .sidebar-heading + * {
	margin-top: 0.5rem;
}

.sidebar-website {
	display: inline-flex;
	min-width: 0;
	max-width: 100%;
	align-items: center;
	gap: 0.375rem;
	font-weight: 500;
	color: var(--primary-700);
	transition: color 0.15s;
}

.sidebar-website:hover {
	color: var(--primary-800);
	text-decoration: underline;
}

.pills {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem;
}

.pill {
	display: inline-flex;
	min-height: 1.5rem;
	align-items: center;
	gap: 0.25rem;
	border: 1px solid var(--neutral-200);
	border-radius: 9999px;
	background: white;
	padding-inline: 0.5rem;
	font-size: 10px;
	line-height: 1rem;
	font-weight: 500;
	color: var(--neutral-700);
}

.pill-link {
	gap: 0;
	transition:
		color 0.15s,
		border-color 0.15s;
}

.pill-link:hover {
	border-color: var(--neutral-300);
	color: var(--neutral-950);
}

.pill-icon {
	margin-inline-end: 0.25rem;
}

.similar {
	border: 1px solid var(--neutral-200);
	border-radius: var(--radius-lg);
	background: white;
	padding: 0.75rem;
}

.similar-list {
	margin-top: 0.5rem;
	display: grid;
	gap: 0.5rem;
}

.similar-item {
	display: flex;
	min-width: 0;
	gap: 0.5rem;
	border-radius: var(--radius-md);
	padding: 0.375rem;
	transition: background-color 0.15s;
}

.similar-item:hover {
	background: var(--neutral-50);
}

.similar-name {
	font-size: 0.75rem;
	line-height: 1rem;
	font-weight: 500;
	color: var(--neutral-950);
}

.similar-description {
	margin-top: 0.125rem;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
	font-size: 11px;
	line-height: 1rem;
	color: var(--neutral-500);
}

/* ---------- Screenshot gallery & lightbox ---------- */

.gallery {
	margin-top: 2rem;
}

.gallery-strip {
	display: flex;
	gap: 0.75rem;
	overflow-x: auto;
	padding-bottom: 0.5rem;
	scroll-snap-type: x proximity;
}

.gallery-item {
	position: relative;
	flex-shrink: 0;
	width: 9rem;
	height: 18rem;
	overflow: hidden;
	scroll-snap-align: start;
	border: 1px solid var(--neutral-200);
	border-radius: var(--radius-lg);
	background: var(--neutral-100);
	color: var(--neutral-700);
	outline: none;
	transition: border-color 0.15s;
}

@media (min-width: 40rem) {
	.gallery-item {
		width: 10rem;
		height: 20rem;
	}
}

.gallery-item:hover {
	border-color: var(--neutral-300);
}

.gallery-item:focus-visible {
	box-shadow: 0 0 0 2px var(--neutral-300);
}

.gallery-item img,
.gallery-item video {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.gallery-item img {
	transition: transform 0.2s;
}

.gallery-item:hover img {
	transform: scale(1.02);
}

.gallery-play {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	background: color-mix(in oklab, var(--neutral-950) 20%, transparent);
	color: white;
}

.gallery-play > span {
	display: grid;
	width: 3rem;
	height: 3rem;
	place-items: center;
	border-radius: 9999px;
	background: color-mix(in oklab, var(--neutral-950) 70%, transparent);
}

.lightbox {
	position: fixed;
	inset: 0;
	z-index: 50;
	display: flex;
	align-items: center;
	justify-content: center;
	background: color-mix(in oklab, var(--neutral-950) 90%, transparent);
	padding: 1rem;
}

.lightbox-button {
	position: absolute;
	display: grid;
	width: 2.5rem;
	height: 2.5rem;
	place-items: center;
	border-radius: var(--radius-lg);
	background: rgb(255 255 255 / 0.1);
	color: white;
	transition: background-color 0.15s;
}

.lightbox-button:hover {
	background: rgb(255 255 255 / 0.2);
}

.lightbox-button:focus-visible {
	outline: none;
	box-shadow: 0 0 0 2px rgb(255 255 255 / 0.7);
}

.lightbox-button[disabled] {
	visibility: hidden;
	pointer-events: none;
}

.lightbox-close {
	inset-inline-end: 1rem;
	top: 1rem;
}

.lightbox-prev,
.lightbox-next {
	top: 50%;
	transform: translateY(-50%);
}

.lightbox-prev {
	inset-inline-start: 1rem;
}

.lightbox-next {
	inset-inline-end: 1rem;
}

.lightbox-counter {
	position: absolute;
	bottom: 1rem;
	left: 50%;
	transform: translateX(-50%);
	border-radius: 9999px;
	background: rgb(255 255 255 / 0.1);
	padding: 0.25rem 0.75rem;
	font-size: 0.75rem;
	line-height: 1rem;
	font-weight: 500;
	color: white;
}

.lightbox-media {
	display: grid;
	max-width: 92vw;
	max-height: 88vh;
	place-items: center;
}

.lightbox-media > img,
.lightbox-media > video {
	max-width: 88vw;
	max-height: 82vh;
	border-radius: var(--radius-lg);
	background: black;
	box-shadow: 0 25px 80px rgb(0 0 0 / 0.45);
}

.lightbox-media > img {
	object-fit: contain;
}

/* ---------- Rich text (bot descriptions, blog posts) ---------- */

.rich-text {
	color: var(--neutral-700);
	font-size: 0.95rem;
	line-height: 1.75;
	overflow-wrap: break-word;
}

.rich-text > * + * {
	margin-top: 1rem;
}

.rich-text h1,
.rich-text h2,
.rich-text h3,
.rich-text h4 {
	color: var(--neutral-950);
	font-weight: 700;
	letter-spacing: 0;
	line-height: 1.2;
}

.rich-text h1 {
	font-size: 1.75rem;
}

.rich-text h2 {
	font-size: 1.35rem;
	margin-top: 2rem;
}

.rich-text h3 {
	font-size: 1.1rem;
	margin-top: 1.5rem;
}

.rich-text h4 {
	font-size: 1rem;
	margin-top: 1.25rem;
}

.rich-text ul,
.rich-text ol {
	padding-inline-start: 1.25rem;
}

.rich-text ul {
	list-style: disc;
}

.rich-text ol {
	list-style: decimal;
}

.rich-text li + li {
	margin-top: 0.35rem;
}

.rich-text a {
	color: var(--primary-700);
	font-weight: 500;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.rich-text strong {
	font-weight: 700;
}

.rich-text blockquote {
	border-inline-start: 3px solid var(--neutral-300);
	color: var(--neutral-600);
	padding-inline-start: 1rem;
}

.rich-text code {
	border-radius: var(--radius-md);
	background: var(--neutral-100);
	color: var(--neutral-950);
	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
	font-size: 0.875em;
	padding: 0.15rem 0.35rem;
}

.rich-text pre {
	overflow-x: auto;
	border-radius: var(--radius-lg);
	background: var(--neutral-950);
	color: white;
	padding: 1rem;
}

.rich-text pre code {
	background: transparent;
	color: inherit;
	padding: 0;
}

.rich-text table {
	border-collapse: collapse;
	width: 100%;
}

.rich-text th,
.rich-text td {
	border: 1px solid var(--neutral-200);
	padding: 0.375rem 0.625rem;
	text-align: start;
}

/* ---------- Blog ---------- */

.article {
	max-width: 48rem;
	margin-inline: auto;
}

.back-link {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	font-weight: 500;
	color: var(--neutral-500);
	transition: color 0.15s;
}

.back-link:hover {
	color: var(--neutral-950);
}

.article-header {
	margin-top: 1rem;
}

.article-date {
	margin-top: 0.75rem;
	color: var(--neutral-500);
}

.article-body {
	margin-top: 2rem;
}

/* ---------- Font generator ---------- */

.panel {
	display: grid;
	gap: 0.75rem;
	border: 1px solid var(--neutral-200);
	border-radius: var(--radius-xl);
	background: var(--neutral-50);
	padding: 1rem;
}

.field-label {
	font-size: 0.75rem;
	line-height: 1rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--neutral-500);
}

.panel-toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
}

.panel-target {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.panel-target label {
	font-size: 0.75rem;
	line-height: 1rem;
	color: var(--neutral-600);
}

.hint {
	font-size: 0.75rem;
	line-height: 1.25rem;
	color: var(--neutral-500);
}

.style-card {
	display: flex;
	width: 100%;
	align-items: center;
	gap: 0.75rem;
	border: 1px solid var(--neutral-200);
	border-radius: var(--radius-lg);
	background: white;
	padding: 0.625rem 0.75rem;
	text-align: start;
	transition:
		background-color 0.15s,
		border-color 0.15s;
}

.style-card:hover {
	border-color: var(--neutral-300);
	background: var(--neutral-50);
}

.style-card:focus-visible {
	outline: none;
	box-shadow: 0 0 0 2px var(--primary-100);
}

.style-card-body {
	min-width: 0;
	flex: 1;
}

.style-card-label {
	display: block;
	font-size: 10px;
	line-height: 1rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--neutral-400);
}

.style-card-result {
	display: block;
	margin-top: 0.125rem;
	overflow-wrap: break-word;
	font-size: 1rem;
	line-height: 1.5rem;
	color: var(--neutral-950);
}

.style-card-count {
	flex-shrink: 0;
	font-size: 0.75rem;
	line-height: 1rem;
	font-variant-numeric: tabular-nums;
	color: var(--neutral-400);
}

.style-card-count.is-over {
	font-weight: 500;
	color: var(--red-500);
}

.style-card-copy {
	flex-shrink: 0;
	border: 1px solid var(--neutral-200);
	border-radius: var(--radius-md);
	padding: 0.25rem 0.5rem;
	font-size: 0.75rem;
	line-height: 1rem;
	font-weight: 500;
	color: var(--neutral-600);
	transition:
		color 0.15s,
		border-color 0.15s;
}

.style-card:hover .style-card-copy {
	border-color: var(--neutral-300);
	color: var(--neutral-950);
}

.how-to-step {
	border: 1px solid var(--neutral-200);
	border-radius: var(--radius-lg);
	background: white;
	padding: 1rem;
}

.how-to-step h3 {
	font-weight: 600;
	color: var(--neutral-950);
}

.how-to-step p {
	margin-top: 0.375rem;
	line-height: 1.5rem;
	color: var(--neutral-600);
}

.faq-item {
	border: 1px solid var(--neutral-200);
	border-radius: var(--radius-lg);
	background: white;
	padding: 0.75rem 1rem;
}

.faq-item summary {
	font-weight: 500;
	color: var(--neutral-950);
}

.faq-item p {
	margin-top: 0.5rem;
	line-height: 1.5rem;
	color: var(--neutral-600);
}

/* ---------- Error page ---------- */

.error-page {
	display: grid;
	min-height: 50vh;
	max-width: 36rem;
	margin-inline: auto;
	place-items: center;
	text-align: center;
}

.error-code {
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	color: var(--primary-700);
}

.error-message {
	font-size: 1rem;
	line-height: 1.75rem;
	color: var(--neutral-600);
}

/* ---------- Footer ---------- */

.site-footer {
	margin-top: 3.5rem;
}

.footer-accent {
	height: 2px;
	background: linear-gradient(to right, var(--primary-400), var(--primary-600));
}

.footer-body {
	background: var(--neutral-50);
}

.footer-grid {
	display: grid;
	gap: 2.5rem;
	padding-block: 3rem;
}

@media (min-width: 40rem) {
	.footer-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.footer-about {
		grid-column: span 2;
	}
}

@media (min-width: 64rem) {
	.footer-grid {
		grid-template-columns: 1.6fr 1fr 1fr;
	}

	.footer-about {
		grid-column: span 1;
	}
}

.footer-bubble-row {
	display: flex;
	max-width: 20rem;
	align-items: flex-end;
	gap: 0.625rem;
}

.footer-logo {
	width: 2rem;
	height: 2rem;
	flex-shrink: 0;
	border-radius: 9999px;
}

.footer-bubble {
	border: 1px solid var(--neutral-200);
	border-radius: var(--radius-2xl);
	border-end-start-radius: var(--radius-md);
	background: white;
	padding: 0.625rem 0.875rem;
	box-shadow:
		0 1px 3px 0 rgb(0 0 0 / 0.1),
		0 1px 2px -1px rgb(0 0 0 / 0.1);
}

.footer-bubble p {
	margin-top: 0.125rem;
	line-height: 1.5rem;
	color: var(--neutral-600);
}

.footer-brand {
	font-size: 13px;
	font-weight: 600;
	color: var(--primary-700);
	transition: color 0.15s;
}

.footer-brand:hover {
	color: var(--primary-800);
}

.language-select {
	position: relative;
	margin-top: 1.5rem;
	width: fit-content;
}

.language-select select {
	height: 2.25rem;
	appearance: none;
	border: 1px solid var(--neutral-200);
	border-radius: var(--radius-lg);
	background: white;
	padding-inline: 2rem;
	font-size: 0.75rem;
	font-weight: 500;
	color: var(--neutral-700);
	outline: none;
	transition:
		border-color 0.15s,
		box-shadow 0.15s;
}

.language-select select:hover {
	border-color: var(--neutral-300);
}

.language-select select:focus {
	border-color: var(--neutral-400);
	box-shadow: 0 0 0 2px var(--neutral-200);
}

.language-select-globe,
.language-select-chevron {
	pointer-events: none;
	position: absolute;
	top: 50%;
	width: 1rem;
	height: 1rem;
}

.language-select-globe {
	inset-inline-start: 0.625rem;
	transform: translateY(-50%);
	color: var(--neutral-500);
}

.language-select-chevron {
	inset-inline-end: 0.5rem;
	transform: translateY(-50%) rotate(90deg);
	color: var(--neutral-400);
}

.footer-heading {
	font-size: 0.75rem;
	line-height: 1rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--neutral-500);
}

.footer-heading-spaced {
	margin-top: 2rem;
}

.footer-links {
	margin-top: 1rem;
	display: grid;
	gap: 0.625rem;
}

.footer-links a {
	color: var(--neutral-600);
	transition: color 0.15s;
}

.footer-links a:hover {
	color: var(--neutral-950);
}

.footer-contact {
	margin-top: 1rem;
	line-height: 1.5rem;
	color: var(--neutral-600);
}

.footer-email {
	margin-top: 0.5rem;
	display: inline-block;
	font-weight: 500;
	color: var(--primary-700);
	transition: color 0.15s;
}

.footer-email:hover {
	color: var(--primary-800);
}

.footer-badges {
	border-top: 1px solid var(--neutral-200);
	padding-block: 1.5rem;
}

.footer-badges .footer-heading {
	margin-bottom: 1rem;
	text-align: center;
}

.marquee {
	overflow: hidden;
	mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent);
}

.marquee-track {
	display: flex;
	width: max-content;
	align-items: center;
	gap: 2rem;
	animation: marquee 60s linear infinite;
}

[dir="rtl"] .marquee-track {
	animation-name: marquee-rtl;
}

.marquee:hover .marquee-track {
	animation-play-state: paused;
}

.marquee-track a {
	display: block;
	border-radius: var(--radius-md);
}

.marquee-track a:focus-visible {
	outline: none;
	box-shadow: 0 0 0 2px var(--neutral-300);
}

.marquee-track img {
	height: 2.5rem;
	width: auto;
	max-width: none;
	opacity: 0.6;
	filter: grayscale(100%);
	transition:
		opacity 0.3s,
		filter 0.3s;
}

.marquee-track a:hover img,
.marquee-track a:focus-visible img {
	opacity: 1;
	filter: none;
}

@media (prefers-reduced-motion: reduce) {
	.marquee-track {
		animation: none;
	}
}

@keyframes marquee {
	to {
		transform: translateX(-50%);
	}
}

@keyframes marquee-rtl {
	to {
		transform: translateX(50%);
	}
}

.footer-bottom {
	border-top: 1px solid var(--neutral-200);
}

.footer-bottom-row {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	padding-block: 1.25rem;
	font-size: 0.75rem;
	line-height: 1rem;
	color: var(--neutral-500);
}

@media (min-width: 40rem) {
	.footer-bottom-row {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}
}