/* ==========================================================================
   PromptSeva
   Mobile-first. One accent colour, one radius scale, one shadow.
   ========================================================================== */

:root {
	--ps-accent: #e8467c;
	--ps-accent-2: #f97b4f;
	--ps-accent-ink: #ffffff;
	--ps-accent-soft: #fdeef3;
	--ps-accent-gradient: linear-gradient(135deg, var(--ps-accent), var(--ps-accent-2));

	--ps-bg: #fffbfa;
	--ps-bg-sunk: #f7f2f1;
	--ps-surface: #ffffff;
	--ps-border: #ece5e3;
	--ps-border-strong: #d9cecb;

	--ps-ink: #201a2e;
	--ps-ink-soft: #5c5468;
	--ps-ink-faint: #8d8494;

	--ps-radius: 16px;
	--ps-radius-sm: 10px;
	--ps-radius-pill: 999px;

	--ps-shadow-card: 0 1px 2px rgba(32, 20, 30, .04), 0 6px 16px rgba(32, 20, 30, .05);
	--ps-shadow: 0 1px 2px rgba(32, 20, 30, .06), 0 8px 24px rgba(32, 20, 30, .07);
	--ps-shadow-hover: 0 4px 10px rgba(32, 20, 30, .1), 0 20px 44px rgba(32, 20, 30, .16);

	--ps-shell: 1180px;
	--ps-gutter: 16px;

	--ps-font: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
		"Noto Sans", "Noto Sans Devanagari", "Noto Sans Gujarati", Helvetica, Arial, sans-serif;
	--ps-font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
		"Noto Sans", "Noto Sans Devanagari", "Noto Sans Gujarati", Helvetica, Arial, sans-serif;
	--ps-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
}

/*
 * Three ways a visitor ends up in dark mode: their OS is set to dark and
 * they've never touched the toggle (the media query, guarded so an explicit
 * "light" choice can still win); they clicked the toggle to dark (the
 * attribute selector, so it wins on a light OS too); or both agree. The
 * tokens are identical in both blocks on purpose — one file, one dark
 * palette, applied through whichever path is active.
 */
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		--ps-bg: #15121a;
		--ps-bg-sunk: #1b1720;
		--ps-surface: #201c27;
		--ps-border: #322c3a;
		--ps-border-strong: #443c4e;

		--ps-ink: #f3f0f6;
		--ps-ink-soft: #b6adc2;
		--ps-ink-faint: #877d92;

		--ps-accent-soft: #3a1e2c;

		--ps-shadow-card: 0 1px 2px rgba(0, 0, 0, .3), 0 6px 16px rgba(0, 0, 0, .28);
		--ps-shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px rgba(0, 0, 0, .35);
		--ps-shadow-hover: 0 4px 10px rgba(0, 0, 0, .45), 0 20px 44px rgba(0, 0, 0, .55);
	}
}

:root[data-theme="dark"] {
	--ps-bg: #15121a;
	--ps-bg-sunk: #1b1720;
	--ps-surface: #201c27;
	--ps-border: #322c3a;
	--ps-border-strong: #443c4e;

	--ps-ink: #f3f0f6;
	--ps-ink-soft: #b6adc2;
	--ps-ink-faint: #877d92;

	--ps-accent-soft: #3a1e2c;

	--ps-shadow-card: 0 1px 2px rgba(0, 0, 0, .3), 0 6px 16px rgba(0, 0, 0, .28);
	--ps-shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px rgba(0, 0, 0, .35);
	--ps-shadow-hover: 0 4px 10px rgba(0, 0, 0, .45), 0 20px 44px rgba(0, 0, 0, .55);
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}

body {
	margin: 0;
	background: var(--ps-bg);
	color: var(--ps-ink);
	font-family: var(--ps-font-body);
	font-size: 16px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

img {
	max-width: 100%;
	height: auto;
	display: block;
}

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

a:hover {
	color: var(--ps-accent);
}

h1, h2, h3 {
	font-family: var(--ps-font);
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -0.02em;
	margin: 0 0 .5em;
}

.ps-logo,
.ps-card__title,
.ps-hero__eyebrow,
.ps-pill,
.ps-copy__label,
.ps-button {
	font-family: var(--ps-font);
}

button {
	font: inherit;
	cursor: pointer;
}

/*
 * Without this, the hidden attribute silently loses to any component that
 * sets its own `display` (e.g. `.ps-card { display: flex }` beats the
 * browser's built-in `[hidden] { display: none }` because both are
 * author-origin... except .ps-card's rule actually comes from THIS
 * stylesheet while [hidden]'s default is user-agent origin, and author
 * always wins over user-agent regardless of specificity). Toggling
 * `el.hidden = true` from JS should always work; this makes sure it does.
 */
[hidden] {
	display: none !important;
}

:focus-visible {
	outline: 2px solid var(--ps-accent);
	outline-offset: 2px;
	border-radius: 4px;
}

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

.ps-skip {
	position: absolute;
	left: -9999px;
	top: 8px;
	z-index: 100;
	padding: 10px 16px;
	background: var(--ps-accent);
	color: var(--ps-accent-ink);
	border-radius: var(--ps-radius-sm);
}

.ps-skip:focus {
	left: 8px;
	color: var(--ps-accent-ink);
}

.ps-shell {
	width: 100%;
	max-width: var(--ps-shell);
	margin-inline: auto;
	padding-inline: var(--ps-gutter);
}

.ps-main {
	padding-block: 20px 48px;
	min-height: 60vh;
}

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */

/*
 * No backdrop-filter here on purpose: combined with position: sticky it
 * makes Chromium's full-page capture (and a phone's own long/scrolling
 * screenshot feature, which works the same way under the hood) freeze this
 * header mid-page and paint a second copy of it over the content below.
 * A solid background gets the same frosted-header look without triggering
 * the extra compositing layer that causes it.
 */
.ps-header {
	position: sticky;
	top: 0;
	z-index: 40;
	background: color-mix(in srgb, var(--ps-bg) 97%, transparent);
	border-bottom: 1px solid transparent;
	box-shadow: 0 0 0 rgba(32, 20, 30, 0);
	transition: box-shadow .2s ease, border-color .2s ease;
}

/* Flat until the page actually scrolls — main.js toggles this once the
   visitor moves past the hero, so the header separates from the content
   instead of sitting flush against it the whole time. */
.ps-header.is-scrolled {
	border-color: var(--ps-border-strong);
	box-shadow: 0 1px 3px rgba(32, 20, 30, .08), 0 10px 26px rgba(32, 20, 30, .1);
}

.ps-header__bar {
	display: flex;
	align-items: center;
	gap: 12px;
	min-height: 60px;
	padding-block: 10px;
}

.ps-header__brand {
	flex: 0 0 auto;
}

.ps-logo {
	font-size: 19px;
	font-weight: 800;
	letter-spacing: -0.02em;
}

.custom-logo {
	max-height: 46px;
	width: auto;
}

.ps-header__actions {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-left: auto;
}

.ps-iconlink {
	position: relative;
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	border-radius: var(--ps-radius-sm);
	color: var(--ps-ink-soft);
}

.ps-iconlink:hover {
	background: var(--ps-bg-sunk);
	color: var(--ps-accent);
}

.ps-iconlink svg {
	width: 20px;
	height: 20px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.7;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* Same look as the anchor-based iconlinks, minus the default button chrome. */
.ps-theme-toggle {
	border: 0;
	background: none;
	font: inherit;
}

.ps-theme-toggle svg {
	width: 19px;
	height: 19px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.7;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* Sun shows in light mode (what you'd switch away from), moon in dark —
   whichever one is showing names where a click takes you. */
.ps-theme-toggle__moon {
	display: none;
}

:root[data-theme="dark"] .ps-theme-toggle__sun {
	display: none;
}

:root[data-theme="dark"] .ps-theme-toggle__moon {
	display: block;
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) .ps-theme-toggle__sun {
		display: none;
	}

	:root:not([data-theme="light"]) .ps-theme-toggle__moon {
		display: block;
	}
}

.ps-iconlink__badge {
	position: absolute;
	top: 2px;
	right: 2px;
	min-width: 16px;
	height: 16px;
	padding: 0 4px;
	border-radius: var(--ps-radius-pill);
	background: var(--ps-accent);
	color: var(--ps-accent-ink);
	font-size: 10px;
	font-weight: 700;
	line-height: 16px;
	text-align: center;
}

/* Language switcher */

.ps-langswitch {
	display: flex;
	padding: 3px;
	gap: 2px;
	background: var(--ps-bg-sunk);
	border-radius: var(--ps-radius-pill);
}

.ps-langswitch__item {
	padding: 5px 10px;
	border-radius: var(--ps-radius-pill);
	color: var(--ps-ink-soft);
	font-size: 13px;
	font-weight: 600;
	line-height: 1;
	white-space: nowrap;
}

.ps-langswitch__item:hover {
	color: var(--ps-ink);
}

.ps-langswitch__item.is-active {
	background: var(--ps-surface);
	color: var(--ps-ink);
	box-shadow: 0 1px 2px rgba(16, 16, 24, .12);
}

/* Burger + nav */

.ps-burger {
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	padding: 0;
	border: 0;
	border-radius: var(--ps-radius-sm);
	background: none;
	color: var(--ps-ink-soft);
}

.ps-burger__lines,
.ps-burger__lines::before,
.ps-burger__lines::after {
	display: block;
	width: 18px;
	height: 2px;
	border-radius: 2px;
	background: currentColor;
	transition: transform .2s ease, opacity .2s ease;
}

.ps-burger__lines::before,
.ps-burger__lines::after {
	content: "";
	position: absolute;
}

.ps-burger__lines::before {
	transform: translateY(-6px);
}

.ps-burger__lines::after {
	transform: translateY(6px);
}

.ps-burger[aria-expanded="true"] .ps-burger__lines {
	background: transparent;
}

.ps-burger[aria-expanded="true"] .ps-burger__lines::before {
	transform: rotate(45deg);
}

.ps-burger[aria-expanded="true"] .ps-burger__lines::after {
	transform: rotate(-45deg);
}

.ps-nav {
	display: none;
	border-top: 1px solid var(--ps-border);
	padding-block: 12px;
}

.ps-nav.is-open {
	display: block;
}

.ps-nav__list {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 18px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ps-nav__list a {
	display: block;
	padding: 8px 0;
	color: var(--ps-ink-soft);
	font-size: 15px;
	font-weight: 600;
}

.ps-nav__list a:hover,
.ps-nav__list .current-menu-item > a {
	color: var(--ps-accent);
}

.ps-nav__list .sub-menu {
	display: flex;
	flex-direction: column;
	width: 100%;
	margin: 0 0 8px;
	padding: 0 0 0 14px;
	list-style: none;
	border-left: 2px solid var(--ps-border);
}

.ps-nav__list .sub-menu a {
	font-size: 14px;
	font-weight: 500;
	padding: 7px 0;
}

.ps-nav__app {
	display: inline-block;
	margin-top: 8px;
	padding: 8px 16px;
	border-radius: var(--ps-radius-pill);
	background: var(--ps-accent-gradient);
	color: var(--ps-accent-ink);
	font-family: var(--ps-font);
	font-size: 14px;
	font-weight: 600;
	box-shadow: 0 4px 12px color-mix(in srgb, var(--ps-accent) 30%, transparent);
}

.ps-nav__app:hover {
	color: var(--ps-accent-ink);
	filter: brightness(1.06);
}

/* --------------------------------------------------------------------------
   Search
   -------------------------------------------------------------------------- */

.ps-search {
	position: relative;
	display: flex;
	align-items: center;
	flex: 1 1 auto;
	min-width: 0;
}

.ps-search--header {
	display: none;
	max-width: 420px;
}

.ps-search__icon {
	position: absolute;
	left: 13px;
	width: 17px;
	height: 17px;
	fill: none;
	stroke: var(--ps-ink-faint);
	stroke-width: 1.8;
	stroke-linecap: round;
	pointer-events: none;
}

.ps-search__input {
	width: 100%;
	padding: 11px 14px 11px 38px;
	border: 1px solid var(--ps-border);
	border-radius: var(--ps-radius-pill);
	background: var(--ps-bg-sunk);
	color: var(--ps-ink);
	font-size: 15px;
	-webkit-appearance: none;
	appearance: none;
}

.ps-search__input::placeholder {
	color: var(--ps-ink-faint);
}

.ps-search__input:focus {
	outline: none;
	border-color: var(--ps-accent);
	background: var(--ps-surface);
	box-shadow: 0 0 0 3px var(--ps-accent-soft);
}

.ps-search--hero {
	max-width: 540px;
	margin-inline: auto;
	margin-top: 22px;
}

.ps-search--hero .ps-search__input {
	padding-block: 14px;
	font-size: 16px;
	background: var(--ps-surface);
	box-shadow: var(--ps-shadow);
}

.ps-search--results,
.ps-search--empty {
	max-width: 480px;
	margin-top: 14px;
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.ps-hero {
	position: relative;
	padding-block: 34px 26px;
	text-align: center;
	overflow: hidden;
	background:
		radial-gradient(55% 100% at 18% 0%, color-mix(in srgb, var(--ps-accent) 16%, transparent) 0%, transparent 60%),
		radial-gradient(50% 90% at 88% 10%, color-mix(in srgb, var(--ps-accent-2) 18%, transparent) 0%, transparent 60%),
		var(--ps-bg);
}

/* Two soft, blurred colour fields drifting behind the hero copy — the kind of
   detail that reads as "designed" rather than "default WordPress". */
.ps-hero::before,
.ps-hero::after {
	content: "";
	position: absolute;
	z-index: 0;
	width: 46vw;
	height: 46vw;
	max-width: 420px;
	max-height: 420px;
	border-radius: 50%;
	filter: blur(60px);
	opacity: .5;
	pointer-events: none;
}

.ps-hero::before {
	top: -18%;
	left: -10%;
	background: var(--ps-accent);
}

.ps-hero::after {
	top: -22%;
	right: -8%;
	background: var(--ps-accent-2);
}

.ps-hero > .ps-shell {
	position: relative;
	z-index: 1;
}

.ps-hero__eyebrow {
	display: inline-block;
	margin: 0 0 14px;
	padding: 5px 13px;
	border-radius: var(--ps-radius-pill);
	background: var(--ps-surface);
	border: 1px solid var(--ps-border);
	color: var(--ps-ink-soft);
	font-size: 13px;
	font-weight: 600;
}

.ps-hero__title {
	max-width: 22ch;
	margin-inline: auto;
	font-size: clamp(28px, 7vw, 46px);
	font-weight: 800;
	letter-spacing: -0.025em;
}

.ps-hero__subtitle {
	max-width: 52ch;
	margin: 0 auto;
	color: var(--ps-ink-soft);
	font-size: clamp(15px, 3.6vw, 18px);
}

/* --------------------------------------------------------------------------
   Pills
   -------------------------------------------------------------------------- */

.ps-pills {
	display: flex;
	gap: 8px;
	margin-block: 22px;
	padding-bottom: 4px;
	overflow-x: auto;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}

.ps-pills::-webkit-scrollbar {
	display: none;
}

.ps-pill {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	flex: 0 0 auto;
	padding: 8px 14px;
	border: 1px solid var(--ps-border);
	border-radius: var(--ps-radius-pill);
	background: var(--ps-surface);
	color: var(--ps-ink-soft);
	font-size: 14px;
	font-weight: 600;
	white-space: nowrap;
}

.ps-pill:hover {
	border-color: var(--ps-border-strong);
	color: var(--ps-ink);
}

.ps-pill.is-active {
	background: var(--ps-accent);
	border-color: var(--ps-accent);
	color: var(--ps-accent-ink);
}

.ps-pill__count {
	color: var(--ps-ink-faint);
	font-size: 12px;
	font-weight: 500;
}

.ps-pill.is-active .ps-pill__count {
	color: inherit;
	opacity: .75;
}

/* --------------------------------------------------------------------------
   Card grid
   -------------------------------------------------------------------------- */

.ps-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px;
	margin-bottom: 32px;
}

/* --------------------------------------------------------------------------
   Blog-style prompt rows — category/collection archives. One prompt per
   row, stacked in a single column (not a grid): a visual card (image +
   colour swatches), then a separate prompt-text card (label + copy
   button up top, like a code block), then a "Read more" button. Matches
   the reference site's layout — distinct cards read more clearly than
   image and text crammed side by side.
   -------------------------------------------------------------------------- */

.ps-rows {
	display: flex;
	flex-direction: column;
	gap: 36px;
	margin-bottom: 32px;
}

.ps-row {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding-bottom: 32px;
	border-bottom: 1px solid var(--ps-border);
}

.ps-row__title {
	margin: 0;
	font-size: clamp(19px, 3.6vw, 24px);
	font-weight: 800;
}

.ps-row__title a {
	color: inherit;
}

.ps-row__copies {
	margin-top: -8px;
	font-size: 13px;
	color: var(--ps-ink-soft);
}

/*
 * Shrink-wrapped to the image rather than filling the row: the photos are
 * portrait, so a full-width frame left a wide empty panel of background on
 * either side of every one.
 */
.ps-row__visual {
	display: table;
	margin: 0 auto;
	max-width: 100%;
	border-radius: var(--ps-radius-lg, var(--ps-radius));
	overflow: hidden;
	border: 1px solid var(--ps-border);
}

.ps-row__media {
	position: relative;
	display: block;
}

/*
 * A fixed height plus object-fit: cover crops the portrait result photos —
 * with "center top" the subject's lower half is simply cut off. Cap the
 * height instead and let the image keep its own ratio, so the whole photo is
 * visible; max-width keeps a tall portrait from running away with the row.
 */
.ps-row__image {
	width: auto;
	max-width: 100%;
	height: auto;
	max-height: 520px;
	display: block;
	margin: 0 auto;
}

/* The frame now shrink-wraps its contents, so a percentage width here would
   collapse to nothing — give the empty state a real size of its own. */
.ps-row__placeholder {
	display: block;
	width: 390px;
	max-width: 100%;
	height: 260px;
	background: var(--ps-bg-sunk);
}

.ps-row__badge {
	position: absolute;
	top: 10px;
	left: 10px;
	padding: 4px 10px;
	border-radius: 999px;
	background: var(--ps-bg);
	font-size: 12px;
	font-weight: 700;
}

.ps-row__swatches {
	padding: 14px 16px;
	border-top: 1px solid var(--ps-border);
	background: var(--ps-bg);
}

.ps-row__swatches-label {
	display: block;
	margin-bottom: 10px;
	font-size: 13px;
	font-weight: 700;
	color: var(--ps-ink-soft);
}

.ps-row__swatches-list {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.ps-row__swatch {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	width: 68px;
	border: none;
	background: none;
	cursor: pointer;
	padding: 0;
}

.ps-row__swatch img,
.ps-row__swatch-color {
	width: 60px;
	height: 60px;
	border-radius: 10px;
	object-fit: cover;
	display: block;
	border: 2px solid var(--ps-border-strong);
	transition: transform 0.12s ease, border-color 0.12s ease;
}

.ps-row__swatch-label {
	font-size: 12px;
	font-weight: 600;
	color: var(--ps-ink-soft);
	text-align: center;
	line-height: 1.2;
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.ps-row__swatch--pending img,
.ps-row__swatch--pending .ps-row__swatch-color {
	opacity: 0.55;
}

.ps-row__swatch:hover img,
.ps-row__swatch:hover .ps-row__swatch-color {
	transform: scale(1.05);
}

.ps-row__swatch.is-active img,
.ps-row__swatch.is-active .ps-row__swatch-color {
	border-color: var(--ps-accent);
	box-shadow: 0 0 0 2px var(--ps-bg), 0 0 0 4px var(--ps-accent);
}

.ps-row__swatch.is-active .ps-row__swatch-label {
	color: var(--ps-accent);
	font-weight: 700;
}

.ps-row__promptcard {
	width: 85%;
	margin-inline: auto;
	border-radius: var(--ps-radius-lg, var(--ps-radius));
	border: 1px solid var(--ps-border);
	overflow: hidden;
}

.ps-row__promptcard-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 12px 16px;
	background: var(--ps-bg-sunk);
	border-bottom: 1px solid var(--ps-border);
}

.ps-row__promptcard-label {
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--ps-ink-soft);
}

.ps-row__prompt {
	margin: 0;
	padding: 18px;
	background: var(--ps-bg);
	font-family: var(--ps-font-body, inherit);
	font-size: 15px;
	line-height: 1.7;
	color: var(--ps-ink-soft);
	white-space: pre-wrap;
	overflow-wrap: anywhere;
	word-break: normal;
	max-width: 100%;
	max-height: 320px;
	overflow-y: auto;
	overflow-x: hidden;
}

.ps-row__readmore {
	display: block;
	text-align: center;
	padding: 13px 20px;
	border-radius: var(--ps-radius);
	background: var(--ps-bg-sunk);
	border: 1px solid var(--ps-border);
	font-weight: 700;
	color: var(--ps-ink);
	transition: background 0.12s ease, border-color 0.12s ease;
}

.ps-row__readmore:hover {
	background: var(--ps-accent-soft, var(--ps-bg-sunk));
	border-color: var(--ps-accent);
	color: var(--ps-accent);
}

@media (max-width: 640px) {
	.ps-row {
		padding-bottom: 26px;
	}

	.ps-row__image {
		max-height: 380px;
	}

	.ps-row__title {
		font-size: 20px;
	}

	.ps-row__prompt {
		font-size: 14.5px;
		max-height: 260px;
	}
}

/* --------------------------------------------------------------------------
   Curated home page sections — Couple Prompts, Ganesh Chaturthi, Prompts
   for Boys/Girls: a heading, a "View all" link, and a horizontally
   scrolling row of cards (a fixed grid would either crop the row awkwardly
   on a phone or force it to wrap into a second, unwanted section).
   -------------------------------------------------------------------------- */

.ps-section {
	margin-block: 8px 34px;
}

.ps-section__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 14px;
}

.ps-section__title {
	margin: 0;
	font-size: 19px;
	font-weight: 750;
}

.ps-section__title--standalone {
	margin-block: 8px 14px;
}

.ps-section__more {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	gap: 4px;
	color: var(--ps-accent);
	font-size: 14px;
	font-weight: 650;
	white-space: nowrap;
}

.ps-section__more:hover {
	color: var(--ps-accent);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.ps-scrollrow {
	display: flex;
	gap: 14px;
	margin: 0 calc(var(--ps-gutter) * -1) 4px;
	padding: 0 var(--ps-gutter) 6px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}

.ps-scrollrow::-webkit-scrollbar {
	display: none;
}

.ps-scrollrow .ps-card {
	flex: 0 0 42vw;
	max-width: 210px;
	scroll-snap-align: start;
}

@media (min-width: 600px) {
	.ps-scrollrow .ps-card {
		flex-basis: 220px;
		max-width: none;
	}
}

.ps-card {
	position: relative;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: 1px solid var(--ps-border);
	border-radius: var(--ps-radius-sm);
	background: var(--ps-surface);
	box-shadow: var(--ps-shadow-card);
	transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

/* The card deliberately does not lift or move on hover. A grid of tall
   portrait cards that each jump up under the cursor reads as twitchy while
   you scan the grid, so the only hover feedback is the shadow and the
   accent-coloured title. `pointer: fine` keeps even that to real mice —
   on touch, a tap would otherwise latch :hover until you tap elsewhere. */
@media (hover: hover) and (pointer: fine) {
	.ps-card:hover {
		border-color: transparent;
		box-shadow: var(--ps-shadow-hover);
	}
}

.ps-card__badge {
	position: absolute;
	top: 10px;
	left: 10px;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 4px 10px;
	border-radius: var(--ps-radius-pill);
	background: var(--ps-accent-gradient);
	color: var(--ps-accent-ink);
	font-family: var(--ps-font);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .02em;
	box-shadow: 0 2px 8px rgba(32, 20, 30, .18);
}

/*
 * The editor-only pin toggle. Sits top-right so it never lands on the
 * "🔥 Pinned" badge in the opposite corner, and is only ever in the markup
 * for someone who can edit the prompt.
 */
.ps-pin {
	position: absolute;
	top: 10px;
	right: 10px;
	z-index: 3;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, .88);
	box-shadow: 0 2px 8px rgba(32, 20, 30, .22);
	cursor: pointer;
	/* Dim until it is pinned, so eight pinned cards read at a glance. */
	opacity: .55;
	filter: grayscale(1);
	transition: opacity .15s ease, filter .15s ease, transform .15s ease;
}

.ps-pin:hover,
.ps-pin:focus-visible {
	opacity: 1;
	filter: none;
	transform: scale(1.08);
}

.ps-pin.is-pinned {
	opacity: 1;
	filter: none;
	background: var(--ps-accent-gradient);
}

.ps-pin[disabled] {
	cursor: wait;
	opacity: .4;
}

.ps-pin__icon {
	font-size: 15px;
	line-height: 1;
}

/*
 * Square corners on the photo itself. The card still clips it to the card's
 * own rounded top edge via .ps-card's overflow: hidden, so nothing pokes out
 * — but the image is no longer given its own arch on top of that.
 */
.ps-card__media {
	position: relative;
	display: block;
	aspect-ratio: 3 / 4;
	background: var(--ps-bg-sunk);
	overflow: hidden;
	border-radius: 0;
}

/* A shimmer while a real photo is still loading — main.js adds .is-loaded
   once the <img> actually has pixels. :has() means this only ever applies
   to a card with a real image; the permanent gradient placeholder used
   when a prompt has no photo at all is untouched. */
.ps-card__media:has(img)::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(
		100deg,
		transparent 30%,
		color-mix(in srgb, var(--ps-ink) 8%, transparent) 50%,
		transparent 70%
	);
	background-size: 200% 100%;
	animation: ps-shimmer 1.4s ease-in-out infinite;
	opacity: 1;
	transition: opacity .25s ease;
	pointer-events: none;
}

/*
 * !important here is deliberate: :has(img) resolves to the specificity of
 * `img` (a bare type selector) per the spec, which loses to .is-loaded's two
 * classes on b-count in some engines but not others — a real cross-browser
 * inconsistency, confirmed by testing this exact pair in the browser rather
 * than reasoning about specificity on paper. Forcing it removes the
 * ambiguity instead of gambling on selector order.
 */
.ps-card__media.is-loaded::before {
	opacity: 0 !important;
}

.ps-card__media:has(img) .ps-card__image {
	opacity: 0;
	transition: opacity .25s ease;
}

.ps-card__media.is-loaded .ps-card__image {
	opacity: 1 !important;
}

@keyframes ps-shimmer {
	0% {
		background-position: 200% 0;
	}

	100% {
		background-position: -200% 0;
	}
}

.ps-card__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .3s ease;
}

/* A faint bottom gradient so a light or busy photo still reads clearly
   against the title below it, plus a soft darkening on hover that gives the
   whole card a pressable, clickable feel rather than a static photograph. */
.ps-card__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(20, 12, 18, .16), transparent 45%);
	opacity: 0;
	transition: opacity .25s ease;
	pointer-events: none;
}

@media (hover: hover) and (pointer: fine) {
	.ps-card:hover .ps-card__media::after {
		opacity: 1;
	}
}

.ps-card__title a {
	transition: color .15s ease;
}

@media (hover: hover) and (pointer: fine) {
	.ps-card:hover .ps-card__title a {
		color: var(--ps-accent);
	}
}

.ps-card__placeholder {
	display: block;
	width: 100%;
	height: 100%;
	background: linear-gradient(135deg, var(--ps-bg-sunk), var(--ps-border));
}

.ps-card__body {
	flex: 1 1 auto;
	padding: 11px 12px 8px;
}

.ps-card__title {
	margin: 0;
	font-size: 14px;
	font-weight: 650;
	line-height: 1.35;
}

.ps-card__title a::after {
	/* Makes the whole card clickable without nesting links. */
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

.ps-card__excerpt {
	margin: 6px 0 0;
	color: var(--ps-ink-soft);
	font-size: 13px;
}

.ps-card__meta {
	margin-top: 5px;
	color: var(--ps-ink-faint);
	font-size: 12px;
}

.ps-card__actions {
	position: relative;
	z-index: 2;
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 0 12px 12px;
}

/* --------------------------------------------------------------------------
   Copy and save buttons
   -------------------------------------------------------------------------- */

.ps-copy {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	border-radius: var(--ps-radius-pill);
	font-weight: 650;
	transition: background .15s ease, color .15s ease, border-color .15s ease;
}

.ps-copy__icon {
	width: 15px;
	height: 15px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
	flex: 0 0 auto;
}

.ps-copy--ghost,
.ps-card__open {
	flex: 1 1 auto;
	padding: 8px 12px;
	border: 1px solid var(--ps-border);
	border-radius: var(--ps-radius-pill);
	background: var(--ps-bg-sunk);
	color: var(--ps-ink-soft);
	font-size: 13px;
	font-weight: 650;
	text-align: center;
}

@media (hover: hover) and (pointer: fine) {
	.ps-copy--ghost:hover,
	.ps-card__open:hover {
		border-color: var(--ps-accent);
		background: var(--ps-accent-soft);
		color: var(--ps-accent);
	}
}

.ps-copy--solid {
	width: auto;
	margin-inline: auto;
	padding: 11px 20px;
	border: 0;
	background: var(--ps-accent-gradient);
	color: var(--ps-accent-ink);
	font-family: var(--ps-font);
	font-size: 14px;
	box-shadow: 0 6px 18px color-mix(in srgb, var(--ps-accent) 35%, transparent);
	transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
}

/* Inside the category-page row card, the copy button sits next to the
   "THE PROMPT" label rather than as the page's main CTA, so it stays
   even more compact than the single-page button. */
.ps-row__promptcard-head .ps-copy--solid {
	width: auto;
	flex: 0 0 auto;
	margin-inline: 0;
	padding: 7px 14px;
	font-size: 12.5px;
}

@media (hover: hover) and (pointer: fine) {
	.ps-copy--solid:hover {
		transform: translateY(-1px);
		filter: brightness(1.05);
		box-shadow: 0 8px 22px color-mix(in srgb, var(--ps-accent) 45%, transparent);
	}
}

.ps-copy--solid:active {
	transform: translateY(0);
}

.ps-copy.is-copied {
	background: color-mix(in srgb, #1fae6b 80%, var(--ps-accent-2) 20%);
	border-color: color-mix(in srgb, #1fae6b 80%, var(--ps-accent-2) 20%);
	color: #fff;
}

.ps-save {
	display: grid;
	place-items: center;
	flex: 0 0 auto;
	width: 34px;
	height: 34px;
	padding: 0;
	border: 1px solid var(--ps-border);
	border-radius: var(--ps-radius-pill);
	background: var(--ps-bg-sunk);
	color: var(--ps-ink-faint);
	transition: color .15s ease, border-color .15s ease, background .15s ease;
}

.ps-save__icon {
	width: 16px;
	height: 16px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.8;
	stroke-linejoin: round;
}

@media (hover: hover) and (pointer: fine) {
	.ps-save:hover {
		border-color: var(--ps-accent);
		color: var(--ps-accent);
	}
}

.ps-save[aria-pressed="true"] {
	border-color: var(--ps-accent);
	background: var(--ps-accent-soft);
	color: var(--ps-accent);
}

.ps-save[aria-pressed="true"] .ps-save__icon {
	fill: currentColor;
}

.ps-save--inline {
	width: 38px;
	height: 38px;
}

/* --------------------------------------------------------------------------
   Single prompt
   -------------------------------------------------------------------------- */

.ps-prompt {
	max-width: 780px;
}

.ps-breadcrumb {
	display: flex;
	flex-wrap: wrap;
	gap: 7px;
	margin-bottom: 14px;
	color: var(--ps-ink-faint);
	font-size: 13px;
}

.ps-prompt__title {
	font-size: clamp(24px, 5.6vw, 34px);
	font-weight: 800;
}

.ps-prompt__meta {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 20px;
	color: var(--ps-ink-faint);
	font-size: 13px;
}

.ps-sharebtn {
	padding: 8px 15px;
	border: 1px solid var(--ps-border);
	border-radius: var(--ps-radius-pill);
	background: var(--ps-bg-sunk);
	color: var(--ps-ink-soft);
	font-size: 13px;
	font-weight: 600;
}

@media (hover: hover) and (pointer: fine) {
	.ps-sharebtn:hover {
		border-color: var(--ps-accent);
		color: var(--ps-accent);
	}
}

/*
 * Result images are portrait, so at full column width they run past a laptop
 * screen and push the copy button — the whole point of the page — below the
 * fold. Cap the figure instead; on a phone this is still edge to edge.
 */
.ps-prompt__figure {
	position: relative;
	display: table;
	max-width: min(420px, 100%);
	margin: 0 auto 22px;
	border-radius: var(--ps-radius);
	overflow: hidden;
}

/*
 * No object-fit: the figure shrink-wraps the photo, so the image keeps its
 * own aspect ratio and nothing is cropped or letterboxed.
 */
.ps-prompt__image {
	display: block;
	width: auto;
	max-width: 100%;
	height: auto;
	max-height: 78vh;
}

/* The same shimmer the cards use, for the single prompt's hero photo. The
   <img> carries width/height attributes, so the browser reserves the right
   box from its aspect ratio and the shimmer fills it rather than collapsing
   to nothing while the photo downloads. */
.ps-prompt__figure:has(img)::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(
		100deg,
		transparent 30%,
		color-mix(in srgb, var(--ps-ink) 8%, transparent) 50%,
		transparent 70%
	);
	background-size: 200% 100%;
	animation: ps-shimmer 1.4s ease-in-out infinite;
	opacity: 1;
	transition: opacity .25s ease;
	pointer-events: none;
}

/* See the note on .ps-card__media.is-loaded — :has(img) resolves to a type
   selector's specificity, so this needs the same !important to win. */
.ps-prompt__figure.is-loaded::before {
	opacity: 0 !important;
}

.ps-prompt__figure:has(img) .ps-prompt__image {
	opacity: 0;
	transition: opacity .25s ease;
}

.ps-prompt__figure.is-loaded .ps-prompt__image {
	opacity: 1 !important;
}

/* The figure paints the placeholder tint the shimmer rides on. */
.ps-prompt__figure:has(img) {
	background: var(--ps-bg-sunk);
}


.ps-prompt__intro {
	color: var(--ps-ink-soft);
	font-size: 17px;
}

.ps-variant-swatches {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
	max-width: 420px;
	margin: -8px auto 22px;
}

.ps-variant-swatches__label {
	font-size: 13px;
	font-weight: 600;
	color: var(--ps-ink-soft);
}

.ps-variant-swatch {
	width: 28px;
	height: 28px;
	border-radius: 50%;
	border: 2px solid var(--ps-border-strong);
	cursor: pointer;
	padding: 0;
	transition: transform 0.12s ease, border-color 0.12s ease;
}

.ps-variant-swatch:hover {
	transform: scale(1.08);
}

.ps-variant-swatch.is-active {
	border-color: var(--ps-accent);
	box-shadow: 0 0 0 2px var(--ps-bg), 0 0 0 4px var(--ps-accent);
}

.ps-prompt__intro p {
	margin: 0 0 1em;
}

/* The prompt box */

.ps-promptbox {
	margin-block: 26px;
	border: 1px solid var(--ps-border);
	border-radius: var(--ps-radius);
	background: var(--ps-bg-sunk);
	overflow: hidden;
}

.ps-promptbox__head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 13px 16px;
	border-bottom: 1px solid var(--ps-border);
	background: var(--ps-surface);
}

.ps-promptbox__title {
	margin: 0;
	font-size: 15px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: var(--ps-ink-soft);
}

.ps-promptbox__langs {
	display: flex;
	gap: 4px;
}

.ps-promptbox__lang {
	padding: 5px 11px;
	border-radius: var(--ps-radius-pill);
	color: var(--ps-ink-faint);
	font-size: 13px;
	font-weight: 600;
}

.ps-promptbox__lang:hover {
	background: var(--ps-bg-sunk);
	color: var(--ps-ink);
}

.ps-promptbox__lang.is-active {
	background: var(--ps-accent-soft);
	color: var(--ps-accent);
}

.ps-promptbox__text {
	margin: 0;
	padding: 18px 16px;
	max-height: 420px;
	overflow-y: auto;
	font-family: var(--ps-mono);
	font-size: 13.5px;
	line-height: 1.75;
	color: var(--ps-ink);
	white-space: pre-wrap;
	word-wrap: break-word;
	-webkit-overflow-scrolling: touch;
}

.ps-promptbox__actions {
	display: flex;
	justify-content: center;
	padding: 14px 16px;
	border-top: 1px solid var(--ps-border);
	background: var(--ps-surface);
}

/* The article — "What this prompt creates" */

.ps-article {
	margin-block: 30px;
}

.ps-article__body {
	color: var(--ps-ink-soft);
	font-size: 17px;
}

.ps-article__body p {
	margin: 0 0 1em;
}

.ps-article__body p:last-child {
	margin-bottom: 0;
}

.ps-article__body h3 {
	color: var(--ps-ink);
	font-size: 18px;
	font-weight: 700;
	margin: 1.4em 0 .6em;
}

.ps-article__body h3:first-child {
	margin-top: 0;
}

.ps-article__body ul {
	margin: 0 0 1em;
	padding-inline-start: 22px;
}

.ps-article__body li {
	margin-bottom: .4em;
}

.ps-article__body li:last-child {
	margin-bottom: 0;
}

.ps-article__body a {
	color: var(--ps-accent);
	text-decoration: underline;
	text-decoration-color: color-mix(in srgb, var(--ps-accent) 40%, transparent);
	text-underline-offset: 2px;
}

.ps-article__body a:hover {
	text-decoration-color: currentColor;
}

/* How to use */

.ps-howto {
	margin-block: 30px;
}

.ps-howto__title,
.ps-related__title,
.ps-article__title,
.ps-faq__title {
	font-size: 21px;
	font-weight: 750;
}

/* FAQ */

.ps-faq {
	margin-block: 30px;
}

.ps-faq__item {
	padding-block: 14px;
	border-bottom: 1px solid var(--ps-border);
}

.ps-faq__item:last-child {
	border-bottom: 0;
	padding-bottom: 0;
}

.ps-faq__question {
	font-size: 16px;
	font-weight: 700;
	margin: 0 0 .4em;
}

.ps-faq__answer {
	margin: 0;
	color: var(--ps-ink-soft);
}

.ps-howto__steps {
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: ps-step;
}

.ps-howto__steps li {
	position: relative;
	counter-increment: ps-step;
	padding: 11px 0 11px 42px;
	border-bottom: 1px solid var(--ps-border);
	color: var(--ps-ink-soft);
}

.ps-howto__steps li:last-child {
	border-bottom: 0;
}

.ps-howto__steps li::before {
	content: counter(ps-step);
	position: absolute;
	left: 0;
	top: 11px;
	display: grid;
	place-items: center;
	width: 26px;
	height: 26px;
	border-radius: var(--ps-radius-pill);
	background: var(--ps-accent-soft);
	color: var(--ps-accent);
	font-size: 13px;
	font-weight: 700;
}

.ps-prompt__credit {
	color: var(--ps-ink-faint);
	font-size: 13px;
}

.ps-prompt__terms {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-block: 22px;
}

.ps-related {
	margin-top: 44px;
	padding-top: 30px;
	border-top: 1px solid var(--ps-border);
}

.ps-related__more {
	text-align: center;
}

/* --------------------------------------------------------------------------
   Archives, pages, empty states
   -------------------------------------------------------------------------- */

.ps-archive__header {
	padding-block: 18px 4px;
}

.ps-archive__header--term {
	position: relative;
	padding: 28px 22px 20px;
	border-radius: var(--ps-radius);
	background:
		radial-gradient(120% 160% at 8% 0%, hsl(var(--ps-term-hue) 85% 92% / 0.9) 0%, transparent 55%),
		var(--ps-bg-sunk);
	border: 1px solid hsl(var(--ps-term-hue) 60% 80% / 0.6);
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) .ps-archive__header--term {
		background:
			radial-gradient(120% 160% at 8% 0%, hsl(var(--ps-term-hue) 55% 22% / 0.9) 0%, transparent 55%),
			var(--ps-bg-sunk);
		border-color: hsl(var(--ps-term-hue) 45% 35% / 0.6);
	}
}

:root[data-theme="dark"] .ps-archive__header--term {
	background:
		radial-gradient(120% 160% at 8% 0%, hsl(var(--ps-term-hue) 55% 22% / 0.9) 0%, transparent 55%),
		var(--ps-bg-sunk);
	border-color: hsl(var(--ps-term-hue) 45% 35% / 0.6);
}

.ps-archive__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin-bottom: 10px;
	border-radius: var(--ps-radius-pill);
	font-size: 22px;
	background: hsl(var(--ps-term-hue) 90% 88% / 0.9);
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) .ps-archive__icon {
		background: hsl(var(--ps-term-hue) 55% 28% / 0.9);
	}
}

:root[data-theme="dark"] .ps-archive__icon {
	background: hsl(var(--ps-term-hue) 55% 28% / 0.9);
}

.ps-archive__title {
	font-size: clamp(24px, 5.6vw, 34px);
	font-weight: 800;
}

.ps-archive__description,
.ps-archive__count {
	margin: 0;
	color: var(--ps-ink-soft);
	font-size: 15px;
}

.ps-archive__subtitle {
	margin: 0;
	color: var(--ps-accent, var(--ps-ink-soft));
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.ps-page {
	max-width: 720px;
}

.ps-faq {
	margin-top: 48px;
	padding-top: 32px;
	border-top: 1px solid var(--ps-border);
}

.ps-faq__title {
	font-size: clamp(20px, 4.5vw, 26px);
	font-weight: 800;
	margin: 0 0 16px;
}

.ps-faq__item {
	border-bottom: 1px solid var(--ps-border);
	padding: 14px 0;
}

.ps-faq__question {
	cursor: pointer;
	font-weight: 600;
	list-style: none;
}

.ps-faq__question::-webkit-details-marker {
	display: none;
}

.ps-faq__question::before {
	content: '+';
	display: inline-block;
	width: 1.2em;
	color: var(--ps-ink-soft);
}

details[open] > .ps-faq__question::before {
	content: '\2212';
}

.ps-faq__answer {
	margin: 10px 0 0;
	color: var(--ps-ink-soft);
	font-size: 15px;
	line-height: 1.6;
}

.ps-more-collections {
	margin-top: 40px;
	padding-top: 28px;
	border-top: 1px solid var(--ps-border);
}

.ps-more-collections__title {
	font-size: clamp(19px, 4vw, 24px);
	font-weight: 800;
	margin: 0 0 16px;
}

.ps-more-collections__list {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.ps-more-collections__pill {
	display: inline-block;
	padding: 10px 18px;
	border-radius: 999px;
	background: var(--ps-bg-sunk);
	border: 1px solid var(--ps-border);
	font-size: 14px;
	font-weight: 600;
	color: var(--ps-ink);
	transition: background 0.12s ease, border-color 0.12s ease;
}

.ps-more-collections__pill:hover {
	background: var(--ps-accent-soft, var(--ps-bg-sunk));
	border-color: var(--ps-accent);
}

.ps-page__title {
	font-size: clamp(26px, 6vw, 36px);
	font-weight: 800;
}

.ps-page__content {
	font-size: 17px;
	color: var(--ps-ink-soft);
}

.ps-page__content h2 {
	margin-top: 1.6em;
	color: var(--ps-ink);
	font-size: 22px;
}

.ps-page__content a {
	color: var(--ps-accent);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.ps-empty {
	padding-block: 40px;
	color: var(--ps-ink-soft);
	text-align: center;
}


.ps-empty--setup,
.ps-empty--404 {
	max-width: 520px;
	margin-inline: auto;
}

.ps-empty--setup h2,
.ps-empty--404 h1 {
	color: var(--ps-ink);
}

.ps-empty .ps-search,
.ps-empty .ps-pills {
	text-align: left;
	margin-inline: auto;
}

.ps-button {
	display: inline-block;
	padding: 12px 24px;
	border-radius: var(--ps-radius-pill);
	background: var(--ps-accent-gradient);
	color: var(--ps-accent-ink);
	font-weight: 650;
	box-shadow: 0 6px 16px color-mix(in srgb, var(--ps-accent) 30%, transparent);
	transition: transform .12s ease, box-shadow .12s ease;
}

.ps-button:hover {
	transform: translateY(-1px);
	box-shadow: 0 8px 20px color-mix(in srgb, var(--ps-accent) 40%, transparent);
}

.ps-button:hover {
	color: var(--ps-accent-ink);
	filter: brightness(1.06);
}

.ps-button--ghost {
	border: 1px solid var(--ps-border);
	background: var(--ps-surface);
	color: var(--ps-ink-soft);
}

.ps-button--ghost:hover {
	border-color: var(--ps-accent);
	background: var(--ps-accent-soft);
	color: var(--ps-accent);
	filter: none;
}

/* --------------------------------------------------------------------------
   Pagination
   -------------------------------------------------------------------------- */

.pagination,
.ps-pagination {
	margin-block: 12px 40px;
}

.pagination .nav-links,
.page-numbers {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 6px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.page-numbers li {
	list-style: none;
}

a.page-numbers,
span.page-numbers {
	display: grid;
	place-items: center;
	min-width: 38px;
	height: 38px;
	padding-inline: 10px;
	border: 1px solid var(--ps-border);
	border-radius: var(--ps-radius-sm);
	background: var(--ps-surface);
	color: var(--ps-ink-soft);
	font-size: 14px;
	font-weight: 600;
}

a.page-numbers:hover {
	border-color: var(--ps-accent);
	color: var(--ps-accent);
}

span.page-numbers.current {
	background: var(--ps-accent);
	border-color: var(--ps-accent);
	color: var(--ps-accent-ink);
}

span.page-numbers.dots {
	border-color: transparent;
	background: none;
}

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

.ps-footer {
	margin-top: 50px;
	padding-block: 34px 26px;
	border-top: 1px solid var(--ps-border);
	background: var(--ps-bg-sunk);
	color: var(--ps-ink-soft);
	font-size: 14px;
}

.ps-footer__widgets {
	display: grid;
	gap: 24px;
	margin-bottom: 24px;
}

.ps-widget__title {
	font-size: 15px;
	font-weight: 700;
	color: var(--ps-ink);
}

.ps-footer__title {
	font-size: 15px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: var(--ps-ink-faint);
}

.ps-footer .ps-pills {
	margin-top: 10px;
}

.ps-social {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	margin: 22px 0 0;
	padding: 0;
	list-style: none;
	font-weight: 600;
}

.ps-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-top: 26px;
	padding-top: 18px;
	border-top: 1px solid var(--ps-border);
}

.ps-footer__copy {
	margin: 0;
	font-size: 13px;
}

.ps-footer__menu {
	display: flex;
	flex-wrap: wrap;
	gap: 18px;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 13px;
}

/* --------------------------------------------------------------------------
   Toast
   -------------------------------------------------------------------------- */

.ps-toast {
	position: fixed;
	left: 50%;
	bottom: 24px;
	z-index: 90;
	transform: translate(-50%, 12px);
	padding: 11px 20px;
	border-radius: var(--ps-radius-pill);
	background: var(--ps-ink);
	color: var(--ps-bg);
	font-size: 14px;
	font-weight: 600;
	box-shadow: var(--ps-shadow-hover);
	opacity: 0;
	transition: opacity .18s ease, transform .18s ease;
	pointer-events: none;
}

.ps-toast.is-visible {
	opacity: 1;
	transform: translate(-50%, 0);
}

/* --------------------------------------------------------------------------
   Wider screens
   -------------------------------------------------------------------------- */

@media (min-width: 600px) {
	:root {
		--ps-gutter: 24px;
	}

	.ps-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 18px;
	}

	.ps-card__title {
		font-size: 15px;
	}
}

@media (min-width: 900px) {
	/* Phones swipe the pill row sideways; on a wide screen a clipped row just
	   looks broken, so let it wrap instead. */
	.ps-pills {
		flex-wrap: wrap;
		overflow-x: visible;
	}

	.ps-grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 20px;
	}

	.ps-burger {
		display: none;
	}

	.ps-nav {
		display: block;
	}

	.ps-nav .ps-shell {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 16px;
	}

	.ps-nav__list {
		gap: 4px 22px;
	}

	/* On a wide screen the submenu becomes a floating panel under its parent.
	   It stays in the DOM (not display:none) so the caret can animate and so
	   keyboard focus can walk into it. */
	.ps-nav__list > .menu-item-has-children {
		position: relative;
	}

	.ps-nav__list .sub-menu {
		position: absolute;
		top: 100%;
		left: -14px;
		z-index: 60;
		display: block;
		width: max-content;
		min-width: 210px;
		max-height: min(70vh, 520px);
		overflow-y: auto;
		margin: 0;
		padding: 8px;
		border: 1px solid var(--ps-border);
		border-left: 1px solid var(--ps-border);
		border-radius: 14px;
		background: var(--ps-surface, #fff);
		box-shadow: 0 18px 40px rgba(15, 15, 35, 0.16);
		opacity: 0;
		visibility: hidden;
		transform: translateY(-6px);
		transition: opacity 0.16s ease, transform 0.16s ease, visibility 0.16s;
	}

	.ps-nav__list > .menu-item-has-children:hover > .sub-menu,
	.ps-nav__list > .menu-item-has-children:focus-within > .sub-menu {
		opacity: 1;
		visibility: visible;
		transform: translateY(0);
	}

	.ps-nav__list .sub-menu a {
		padding: 9px 12px;
		border-radius: 9px;
		white-space: nowrap;
	}

	.ps-nav__list .sub-menu a:hover {
		background: var(--ps-bg-sunk);
	}

	/* A caret marks which items open a panel. */
	.ps-nav__list > .menu-item-has-children > a::after {
		content: "";
		display: inline-block;
		width: 6px;
		height: 6px;
		margin-left: 7px;
		vertical-align: 2px;
		border-right: 2px solid currentColor;
		border-bottom: 2px solid currentColor;
		transform: rotate(45deg) translateY(-2px);
		transition: transform 0.16s ease;
	}

	.ps-nav__list > .menu-item-has-children:hover > a::after {
		transform: rotate(-135deg) translateY(-2px);
	}

	.ps-nav__app {
		margin-top: 0;
	}

	.ps-hero {
		padding-block: 56px 36px;
	}

	.ps-main {
		padding-block: 28px 60px;
	}

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

@media (min-width: 1100px) {
	.ps-grid {
		grid-template-columns: repeat(5, minmax(0, 1fr));
	}
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: .01ms !important;
		transition-duration: .01ms !important;
		scroll-behavior: auto !important;
	}
}

/* --------------------------------------------------------------------------
   Mobile language FAB — thumb-reach language switch on small screens. The
   header already has one; above the phone breakpoint this stays hidden so
   the two don't compete.
   -------------------------------------------------------------------------- */

.ps-lang-fab {
	position: fixed;
	right: 16px;
	bottom: 16px;
	z-index: 50;
}

.ps-lang-fab__button {
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	border: 0;
	border-radius: var(--ps-radius-pill);
	background: var(--ps-accent-gradient);
	color: var(--ps-accent-ink);
	font-family: var(--ps-font);
	font-size: 13px;
	font-weight: 700;
	box-shadow: 0 6px 18px color-mix(in srgb, var(--ps-accent) 40%, transparent);
}

.ps-lang-fab__menu {
	position: absolute;
	right: 0;
	bottom: calc(100% + 10px);
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 8px;
	border-radius: var(--ps-radius);
	background: var(--ps-surface);
	border: 1px solid var(--ps-border);
	box-shadow: var(--ps-shadow-hover);
	opacity: 0;
	transform: translateY(6px) scale(.97);
	transform-origin: bottom right;
	pointer-events: none;
	transition: opacity .15s ease, transform .15s ease;
}

.ps-lang-fab.is-open .ps-lang-fab__menu {
	opacity: 1;
	transform: none;
	pointer-events: auto;
}

.ps-lang-fab__item {
	display: block;
	padding: 9px 16px;
	border-radius: var(--ps-radius-sm);
	color: var(--ps-ink-soft);
	font-size: 14px;
	font-weight: 600;
	white-space: nowrap;
	text-align: right;
}

.ps-lang-fab__item:hover {
	background: var(--ps-bg-sunk);
	color: var(--ps-ink);
}

.ps-lang-fab__item.is-active {
	background: var(--ps-accent-soft);
	color: var(--ps-accent);
}

/* The header switcher is already an easy reach once a screen is wide enough
   to also show the header search bar, so the FAB only earns its place below
   that breakpoint. */
@media (min-width: 768px) {
	.ps-lang-fab {
		display: none;
	}
}

/* No CSS watermark overlay here. An earlier version painted a "PromptSeva"
   chip onto .ps-card__media::after — but that is the same pseudo-element the
   card's hover gradient uses (see .ps-card__media::after above), so this
   block silently overwrote it: the chip showed permanently, and the hover
   rule ended up fading the chip in and out instead of the gradient.
   Watermarking belongs on the generated image, not on a pseudo-element that
   is already spoken for — promptseva_prompt_with_watermark_instruction()
   in the core plugin asks the image model for it. */