/**
 * FG Art Instagram Studio — front-end styles.
 *
 * Design note: the directories are pads of ready-to-take ideas, so every idea
 * sits on a slip with a perforated edge — you tear one off and paste it. That
 * perforation is the one loud idea; everything around it stays quiet so the
 * Unicode glyphs remain the most decorative thing on the page.
 *
 * Every selector is scoped under .fgai so it cannot touch the theme or the
 * other plugins running on this site.
 */
.fgai {
	--fgai-violet: #6d3be0;
	--fgai-coral:  #ff5a7e;
	--fgai-width:  85%;

	--fgai-ink:    #1b1425;
	--fgai-body:   #4a4159;
	--fgai-muted:  #7d7490;
	--fgai-paper:  #ffffff;
	--fgai-mist:   #f7f4fc;
	--fgai-line:   #e7e0f3;
	--fgai-line-2: #d7cdea;

	box-sizing: border-box;
	color: var(--fgai-ink);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans", "Helvetica Neue", Arial, sans-serif;
	font-size: 15px;
	line-height: 1.5;
	-webkit-text-size-adjust: 100%;
}
.fgai *,
.fgai *::before,
.fgai *::after {
	box-sizing: inherit;
}
/* Full-bleed break-out: sit at 85% of the viewport on desktop even inside a
   narrow theme container, and go edge-to-edge on phones. --fgai-sbw is the
   scrollbar width, measured once in JS, so this never creates a sideways
   scroll on Windows. */
.fgai .fgai-breakout, .fgai.fgai-breakout {
	width: calc(100vw - var(--fgai-sbw, 0px));
	max-width: calc(100vw - var(--fgai-sbw, 0px));
	margin-inline: calc(50% - (100vw - var(--fgai-sbw, 0px)) / 2);
	padding-inline: calc((100% - var(--fgai-width)) / 2);
}
.fgai .fgai-app, .fgai.fgai-app,
.fgai .fgai-hub, .fgai.fgai-hub,
.fgai .fgai-nav, .fgai.fgai-nav {
	margin-block: 1.6em;
	margin-top: 1.6em;
	margin-bottom: 1.6em;
}
/* The [hidden] attribute must beat our own layout rules.
   A UA stylesheet's [hidden] { display: none } loses to ANY author rule that
   sets display — so .fgai-drawer { display: flex } would leave the drawer
   permanently on screen. Scoped to our own subtree so the theme is untouched. */
.fgai[hidden],
.fgai [hidden] {
	display: none !important;
}

/* Neve dims focused links to 0.9 opacity ("a:focus"). Our hub tiles are links,
   and a tile fading on keyboard focus reads as a bug rather than a focus cue —
   the focus ring is the cue. Tiles only; .fgai-sub uses opacity to animate in. */
.fgai a[class~="fgai-tile"]:focus,
.fgai a[class~="fgai-tile"]:hover,
.fgai a[class~="fgai-cat"]:focus,
.fgai a[class~="fgai-cat"]:hover {
	opacity: 1;
}

/* Pages created before 1.0.6 stored a bare <p class="fgai-lede"> that sits
   outside the .fgai root, so the scoped rules could not reach it and the theme
   styled it instead. An attribute selector gets the specificity back without
   needing an ancestor, so those pages are fixed with no rebuild. */
p[class~="fgai-lede"][class],
h2[class~="fgai-h"][class] {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans", "Helvetica Neue", Arial, sans-serif;
	color: var(--fgai-body, #4a4159);
	margin: 0 0 1em;
	padding: 0;
	line-height: 1.55;
	letter-spacing: normal;
	text-transform: none;
}

p[class~="fgai-lede"][class] {
	max-width: 62ch;
	font-size: 15px;
}

h2[class~="fgai-h"][class] {
	clear: none;
	color: var(--fgai-ink, #1b1425);
	font-size: 1.15rem;
	font-weight: 700;
	margin: 1.6em 0 0.6em;
}


/* ==========================================================================
   Theme armour.

   A WordPress theme styles every button, list, link and heading that appears
   inside our markup, and Neve's rules ("
   .nv-content-wrap ol li", ".entry-content button") are more specific than a
   bare ".fgai-cat" — so the theme won and the plugin looked nothing like it
   does standalone. Two fixes:

     1. every component selector above is scoped to the .fgai root, giving it
        two classes, which outranks the theme's one-class-plus-elements rules;
     2. this block strips inherited decoration so components start from a known
        state. It sits BEFORE the components and matches at the same strength,
        so anything a component sets still wins on source order.

   Note it is a descendant selector: the root element itself is untouched, and
   outline is deliberately not reset so focus rings survive.
   ========================================================================== */

.fgai [class*="fgai-"] {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	border: 0 none currentColor;
	border-radius: 0;
	background: none;
	color: inherit;
	font-family: inherit;
	font-size: inherit;
	font-weight: inherit;
	font-style: normal;
	line-height: inherit;
	letter-spacing: normal;
	word-spacing: normal;
	text-transform: none;
	text-decoration: none;
	text-shadow: none;
	text-align: inherit;
	list-style: none;
	box-shadow: none;
	float: none;
	clear: none;
	min-width: 0;
	min-height: 0;
	max-width: none;
	width: auto;
	height: auto;
	-webkit-appearance: none;
	appearance: none;
	-webkit-box-shadow: none;
}

.fgai ol[class*="fgai-"],
.fgai ul[class*="fgai-"] {
	list-style: none;
}

.fgai li[class*="fgai-"]::marker {
	content: none;
}

.fgai li[class*="fgai-"]::before {
	content: none;
	display: none;
}

.fgai button[class*="fgai-"],
.fgai a[class*="fgai-"] {
	cursor: pointer;
	text-decoration: none;
	box-shadow: none;
}

.fgai textarea[class*="fgai-"],
.fgai input[class*="fgai-"] {
	-webkit-appearance: none;
	appearance: none;
	resize: none;
	box-shadow: none;
}


.fgai .fgai-h, .fgai.fgai-h {
	margin: 0 0 0.6em;
	font-size: 1.15rem;
	font-weight: 700;
	letter-spacing: -0.01em;
	color: var(--fgai-ink);
}
/* Intro paragraph on generated pages (a plain theme element, kept subtle). */
.fgai .fgai-lede, .fgai.fgai-lede {
	max-width: 62ch;
	color: #4a4159;
}
/* ==========================================================================
   Category navigation — a two-level slider.
   Row 1: the four categories. Row 2: whatever the active category contains.
   Both rows scroll horizontally rather than wrapping, so the bar keeps the
   same height on a phone as on a desktop.
   ========================================================================== */
.fgai .fgai-nav, .fgai.fgai-nav {
	margin-block: 1.6em;
	margin-top: 1.6em;
	margin-bottom: 1.6em;
}
.fgai .fgai-rail, .fgai.fgai-rail {
	display: flex;
	align-items: center;
	gap: 6px;
}
.fgai .fgai-cat-track, .fgai.fgai-cat-track {
	display: flex;
	gap: 8px;
	flex: 1;
	overflow-x: auto;
	padding: 3px;
	scroll-behavior: smooth;
	scroll-snap-type: x proximity;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}
.fgai .fgai-cat-track::-webkit-scrollbar, .fgai.fgai-cat-track::-webkit-scrollbar {
	display: none;
}
.fgai .fgai-cat, .fgai.fgai-cat {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	flex: 0 0 auto;
	scroll-snap-align: start;
	padding: 9px 16px;
	border: 1px solid var(--fgai-line);
	border-radius: 999px;
	background: var(--fgai-paper);
	color: var(--fgai-body);
	font: inherit;
	font-size: 14px;
	font-weight: 600;
	white-space: nowrap;
	cursor: pointer;
	transition: color .15s ease, border-color .15s ease, transform .15s ease;
}
.fgai .fgai-cat:hover, .fgai.fgai-cat:hover {
	color: var(--fgai-violet);
	border-color: var(--fgai-violet);
	transform: translateY(-1px);
}
.fgai .fgai-cat-glyph, .fgai.fgai-cat-glyph {
	font-size: 15px;
	line-height: 1;
}
/* The active category keeps a gradient hairline plus an underline that reads
   as the slider's position marker. */
.fgai .fgai-cat.is-on, .fgai.fgai-cat.is-on {
	color: var(--fgai-ink);
	border-color: transparent;
	background:
		linear-gradient(var(--fgai-paper), var(--fgai-paper)) padding-box,
		linear-gradient(100deg, var(--fgai-violet), var(--fgai-coral)) border-box;
}
.fgai .fgai-cat.is-on::after, .fgai.fgai-cat.is-on::after {
	content: "";
	position: absolute;
	left: 20%;
	right: 20%;
	bottom: -4px;
	height: 3px;
	border-radius: 3px;
	background: linear-gradient(100deg, var(--fgai-violet), var(--fgai-coral));
}
/* Category 1 is a tool, not a destination — it stays filled so the difference
   is visible before anything is clicked. */
.fgai .fgai-cat.is-tool, .fgai.fgai-cat.is-tool {
	background: linear-gradient(100deg, var(--fgai-violet), var(--fgai-coral));
	border-color: transparent;
	color: #fff;
}
.fgai .fgai-cat.is-tool:hover, .fgai.fgai-cat.is-tool:hover {
	color: #fff;
	border-color: transparent;
}
.fgai .fgai-rail-arrow, .fgai.fgai-rail-arrow {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border: 1px solid var(--fgai-line);
	border-radius: 50%;
	background: var(--fgai-paper);
	color: var(--fgai-muted);
	font-size: 19px;
	line-height: 1;
	cursor: pointer;
	transition: color .15s ease, border-color .15s ease;
}
.fgai .fgai-rail-arrow:hover, .fgai.fgai-rail-arrow:hover {
	color: var(--fgai-violet);
	border-color: var(--fgai-violet);
}
/* ---- Row 2: subcategories of the open category -------------------------- */
.fgai .fgai-sub-track, .fgai.fgai-sub-track {
	display: flex;
	gap: 7px;
	overflow-x: auto;
	margin-top: 12px;
	padding: 3px;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}
.fgai .fgai-sub-track::-webkit-scrollbar, .fgai.fgai-sub-track::-webkit-scrollbar {
	display: none;
}
.fgai .fgai-sub, .fgai.fgai-sub {
	flex: 0 0 auto;
	padding: 6px 14px;
	border: 1px dashed var(--fgai-line-2);
	border-radius: 999px;
	background: transparent;
	color: var(--fgai-body);
	font: inherit;
	font-size: 13px;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	opacity: 0;
	transform: translateY(4px);
	animation: fgai-cascade .24s ease forwards;
	transition: color .15s ease, border-color .15s ease;
}
.fgai .fgai-sub:hover, .fgai.fgai-sub:hover,
.fgai .fgai-sub:focus-visible, .fgai.fgai-sub:focus-visible {
	color: var(--fgai-violet);
	border-color: var(--fgai-violet);
	text-decoration: none;
}
/* The page you are on. */
.fgai .fgai-sub.is-on, .fgai.fgai-sub.is-on {
	background: linear-gradient(100deg, var(--fgai-violet), var(--fgai-coral));
	border-style: solid;
	border-color: transparent;
	color: #fff;
}
.fgai .fgai-sub.is-hub, .fgai.fgai-sub.is-hub {
	border-style: solid;
}
@keyframes fgai-cascade {
	to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
	.fgai .fgai-sub, .fgai.fgai-sub { animation: none; opacity: 1; transform: none;
	}
	.fgai .fgai-cat-track, .fgai.fgai-cat-track { scroll-behavior: auto;
	}
}
/* ==========================================================================
   Category 1 — the styler
   ========================================================================== */
.fgai .fgai-console, .fgai.fgai-console {
	background: var(--fgai-mist);
	border: 1px solid var(--fgai-line);
	border-radius: 16px;
	padding: 14px;
}
.fgai .fgai-field, .fgai.fgai-field {
	position: relative;
	display: block;
}
.fgai .fgai-input, .fgai.fgai-input {
	display: block;
	width: 100%;
	resize: vertical;
	padding: 13px 58px 13px 15px;
	border: 1px solid var(--fgai-line-2);
	border-radius: 11px;
	background: var(--fgai-paper);
	color: var(--fgai-ink);
	font: inherit;
	font-size: 16px; /* 16px stops iOS zooming on focus */
	line-height: 1.45;
}
.fgai .fgai-input:focus, .fgai.fgai-input:focus {
	outline: 2px solid var(--fgai-violet);
	outline-offset: 1px;
	border-color: transparent;
}
.fgai .fgai-len, .fgai.fgai-len {
	position: absolute;
	right: 12px;
	top: 12px;
	min-width: 26px;
	padding: 2px 6px;
	border-radius: 6px;
	background: var(--fgai-mist);
	color: var(--fgai-muted);
	font-size: 11px;
	font-weight: 700;
	text-align: center;
	font-variant-numeric: tabular-nums;
}
.fgai .fgai-rail, .fgai.fgai-rail {
	display: flex;
	gap: 7px;
	margin-top: 12px;
	overflow-x: auto;
	padding-bottom: 4px;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}
.fgai .fgai-rail::-webkit-scrollbar, .fgai.fgai-rail::-webkit-scrollbar {
	display: none;
}
.fgai .fgai-chip, .fgai.fgai-chip {
	flex: 0 0 auto;
	padding: 8px 14px;
	border: 1px solid var(--fgai-line-2);
	border-radius: 999px;
	background: var(--fgai-paper);
	color: var(--fgai-body);
	font: inherit;
	font-size: 14px;
	line-height: 1.2;
	cursor: pointer;
	white-space: nowrap;
	transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.fgai .fgai-chip:hover, .fgai.fgai-chip:hover {
	border-color: var(--fgai-violet);
}
.fgai .fgai-chip.is-on, .fgai.fgai-chip.is-on {
	background: var(--fgai-ink);
	border-color: var(--fgai-ink);
	color: #fff;
}
.fgai .fgai-hint, .fgai.fgai-hint {
	margin: 14px 0 0;
	color: var(--fgai-muted);
	font-size: 14px;
}
/* Result cards: 3 / 2 / 1 columns. */
.fgai .fgai-grid, .fgai.fgai-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 10px;
	margin-top: 14px;
}
.fgai .fgai-card, .fgai.fgai-card {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	width: 100%;
	min-height: 54px;
	padding: 12px 14px;
	border: 1px solid var(--fgai-line);
	border-radius: 12px;
	background: var(--fgai-paper);
	color: var(--fgai-ink);
	font: inherit;
	text-align: left;
	cursor: pointer;
	transition: border-color 0.15s ease, transform 0.12s ease, box-shadow 0.15s ease;
}
.fgai .fgai-card:hover, .fgai.fgai-card:hover {
	border-color: var(--fgai-violet);
	box-shadow: 0 6px 20px -14px rgba(45, 20, 90, 0.5);
}
.fgai .fgai-card:active, .fgai.fgai-card:active {
	transform: translateY(1px);
}
/* Short text must not wrap onto a second line; long text scrolls instead. */
.fgai .fgai-card-text, .fgai.fgai-card-text {
	flex: 1 1 auto;
	min-width: 0;
	overflow-x: auto;
	white-space: nowrap;
	font-size: 17px;
	line-height: 1.6;
	scrollbar-width: none;
	font-family: "Segoe UI Symbol", "Segoe UI Emoji", "Apple Color Emoji", "Noto Sans Symbols 2", "Noto Color Emoji", inherit;
}
.fgai .fgai-card-text::-webkit-scrollbar, .fgai.fgai-card-text::-webkit-scrollbar {
	display: none;
}
.fgai .fgai-card-act, .fgai.fgai-card-act {
	flex: 0 0 auto;
	color: var(--fgai-muted);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	opacity: 0;
	transition: opacity 0.15s ease;
}
.fgai .fgai-card:hover .fgai-card-act, .fgai.fgai-card:hover .fgai-card-act,
.fgai .fgai-card:focus-visible .fgai-card-act, .fgai.fgai-card:focus-visible .fgai-card-act {
	opacity: 1;
}
.fgai .fgai-card.is-copied, .fgai.fgai-card.is-copied,
.fgai .fgai-slip-copy.is-copied, .fgai.fgai-slip-copy.is-copied {
	border-color: var(--fgai-violet);
	background: linear-gradient(100deg, rgba(109, 59, 224, 0.09), rgba(255, 90, 126, 0.09));
}
.fgai .fgai-card.is-copied .fgai-card-act::before, .fgai.fgai-card.is-copied .fgai-card-act::before,
.fgai .fgai-slip-copy.is-copied .fgai-slip-act::before, .fgai.fgai-slip-copy.is-copied .fgai-slip-act::before {
	content: "✓ ";
	color: var(--fgai-violet);
}
.fgai .fgai-more, .fgai.fgai-more {
	display: block;
	width: 100%;
	margin-top: 14px;
	padding: 13px 18px;
	border: 1px dashed var(--fgai-line-2);
	border-radius: 12px;
	background: transparent;
	color: var(--fgai-violet);
	font: inherit;
	font-weight: 700;
	cursor: pointer;
	transition: background 0.15s ease, border-color 0.15s ease;
}
.fgai .fgai-more:hover, .fgai.fgai-more:hover {
	background: var(--fgai-mist);
	border-color: var(--fgai-violet);
}
/* ==========================================================================
   Categories 2-4 — the idea slips
   ========================================================================== */
.fgai .fgai-toolbar, .fgai.fgai-toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 12px;
}
.fgai .fgai-status, .fgai.fgai-status {
	margin: 0;
	color: var(--fgai-muted);
	font-size: 12px;
}
.fgai .fgai-num, .fgai.fgai-num {
	color: var(--fgai-ink);
	font-weight: 800;
}
.fgai .fgai-btn, .fgai.fgai-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	flex: 0 0 auto;
	padding: 8px 15px;
	border: 1px solid var(--fgai-line-2);
	border-radius: 999px;
	background: var(--fgai-paper);
	color: var(--fgai-body);
	font: inherit;
	font-size: 13px;
	font-weight: 700;
	cursor: pointer;
	transition: border-color 0.15s ease, color 0.15s ease;
}
.fgai .fgai-btn:hover, .fgai.fgai-btn:hover {
	border-color: var(--fgai-violet);
	color: var(--fgai-violet);
}
.fgai .fgai-slips, .fgai.fgai-slips {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.fgai .fgai-slips li::marker, .fgai.fgai-slips li::marker {
	content: none;
}
/* The signature: a torn-off slip. The perforation is a dotted rule, and the
   left corners are square where the paper would have been attached. */
.fgai .fgai-slip, .fgai.fgai-slip {
	position: relative;
	display: flex;
	align-items: stretch;
	background: var(--fgai-paper);
	border: 1px solid var(--fgai-line);
	border-radius: 14px;
	overflow: hidden;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.fgai .fgai-slip:hover, .fgai.fgai-slip:hover {
	border-color: var(--fgai-violet);
	box-shadow: 0 8px 22px -16px rgba(45, 20, 90, 0.55);
}
.fgai .fgai-slip-copy, .fgai.fgai-slip-copy {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 13px 12px 13px 22px;
	border: 0;
	background: transparent;
	color: var(--fgai-ink);
	font: inherit;
	text-align: left;
	cursor: pointer;
}
.fgai .fgai-slip-text, .fgai.fgai-slip-text {
	flex: 1 1 auto;
	min-width: 0;
	font-size: 15px;
	line-height: 1.55;
	overflow-wrap: anywhere;
	font-family: "Segoe UI Symbol", "Segoe UI Emoji", "Apple Color Emoji", "Noto Sans Symbols 2", "Noto Color Emoji", inherit;
}
.fgai .fgai-slip.is-multi .fgai-slip-text, .fgai.fgai-slip.is-multi .fgai-slip-text {
	white-space: normal;
}
.fgai .fgai-slip-act, .fgai.fgai-slip-act {
	flex: 0 0 auto;
	align-self: flex-end;
	color: var(--fgai-muted);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	opacity: 0;
	transition: opacity 0.15s ease;
}
.fgai .fgai-slip:hover .fgai-slip-act, .fgai.fgai-slip:hover .fgai-slip-act,
.fgai .fgai-slip-copy:focus-visible .fgai-slip-act, .fgai.fgai-slip-copy:focus-visible .fgai-slip-act {
	opacity: 1;
}
.fgai .fgai-ideas.is-busy, .fgai.fgai-ideas.is-busy {
	opacity: 0.55;
	pointer-events: none;
}
.fgai .fgai-empty-admin, .fgai.fgai-empty-admin {
	padding: 12px 14px;
	border: 1px dashed #d7cdea;
	border-radius: 10px;
	background: #faf8ff;
	color: #6b5f86;
	font-size: 14px;
}
/* ==========================================================================
   Subcategory grid
   ========================================================================== */
.fgai .fgai-hub-grid, .fgai.fgai-hub-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.fgai .fgai-hub-grid li::marker, .fgai.fgai-hub-grid li::marker {
	content: none;
}
.fgai .fgai-tile, .fgai.fgai-tile {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding: 12px 14px;
	border: 1px solid var(--fgai-line);
	border-radius: 12px;
	background: var(--fgai-paper);
	color: var(--fgai-ink);
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
	transition: border-color 0.15s ease, color 0.15s ease, transform 0.12s ease;
}
.fgai .fgai-tile:hover, .fgai.fgai-tile:hover {
	border-color: var(--fgai-violet);
	color: var(--fgai-violet);
	text-decoration: none;
	transform: translateY(-1px);
}
.fgai .fgai-tile-n, .fgai.fgai-tile-n {
	flex: 0 0 auto;
	color: var(--fgai-muted);
	font-size: 11px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}
/* ==========================================================================
   Styler drawer
   ========================================================================== */
.fgai .fgai-drawer, .fgai.fgai-drawer {
	position: fixed;
	inset: 0;
	margin: 0;
	padding: 0;
	z-index: 99990;
	display: flex;
	align-items: flex-start;
	justify-content: center;
}
.fgai .fgai-drawer[hidden], .fgai.fgai-drawer[hidden] {
	display: none;
}
.fgai .fgai-drawer-scrim, .fgai.fgai-drawer-scrim {
	position: absolute;
	inset: 0;
	background: rgba(20, 12, 35, 0.5);
	backdrop-filter: blur(2px);
}
.fgai .fgai-drawer-panel, .fgai.fgai-drawer-panel {
	position: relative;
	width: min(720px, 100%);
	max-height: 88vh;
	overflow-y: auto;
	padding: 18px 16px 22px;
	border-radius: 0 0 22px 22px;
	background: var(--fgai-paper);
	box-shadow: 0 20px 54px -18px rgba(30, 10, 60, 0.5);
	animation: fgai-drop 0.24s cubic-bezier(0.22, 0.61, 0.36, 1);
}
@keyframes fgai-rise {
	from { transform: translateY(18px); opacity: 0; }
	to   { transform: none; opacity: 1; }
}
.fgai .fgai-drawer-panel .fgai-app, .fgai.fgai-drawer-panel .fgai-app {
	margin-block: 0;
	margin-top: 0;
	margin-bottom: 0;
}
/* Never break out of the drawer, whatever the global setting is. */
.fgai .fgai-drawer-panel .fgai-breakout, .fgai.fgai-drawer-panel .fgai-breakout {
	width: auto;
	max-width: none;
	margin-inline: 0;
	padding-inline: 0;
}
.fgai .fgai-drawer-x, .fgai.fgai-drawer-x {
	position: absolute;
	top: 10px;
	right: 12px;
	width: 34px;
	height: 34px;
	border: 0;
	border-radius: 50%;
	background: var(--fgai-mist);
	color: var(--fgai-body);
	font-size: 21px;
	line-height: 1;
	cursor: pointer;
}
.fgai .fgai-drawer-x:hover, .fgai.fgai-drawer-x:hover {
	background: var(--fgai-violet);
	color: #fff;
}
.fgai .fgai-locked, .fgai.fgai-locked {
	overflow: hidden;
}
/* ==========================================================================
   Toast
   ========================================================================== */
.fgai .fgai-toast, .fgai.fgai-toast {
	position: fixed;
	left: 50%;
	bottom: 26px;
	z-index: 99999;
	transform: translate(-50%, 14px);
	padding: 11px 18px;
	border-radius: 999px;
	background: #1b1425;
	color: #fff;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	font-size: 14px;
	font-weight: 600;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.18s ease, transform 0.18s ease;
}
.fgai .fgai-toast.is-on, .fgai.fgai-toast.is-on {
	opacity: 1;
	transform: translate(-50%, 0);
}
/* ==========================================================================
   Focus & motion
   ========================================================================== */
.fgai button:focus-visible,
.fgai a:focus-visible {
	outline: 2px solid var(--fgai-violet);
	outline-offset: 2px;
	border-radius: 8px;
}
@media (prefers-reduced-motion: reduce) {
	.fgai *,
.fgai .fgai-toast, .fgai.fgai-toast,
.fgai .fgai-drawer-panel, .fgai.fgai-drawer-panel {
		animation: none !important;
		transition: none !important;
	}
}
/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1024px) {
	.fgai .fgai-grid, .fgai.fgai-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}
@media (max-width: 640px) {
	.fgai {
		--fgai-width: 100%;
	}
	.fgai .fgai-breakout, .fgai.fgai-breakout {
		padding-inline: 14px;
	}
	.fgai .fgai-grid, .fgai.fgai-grid {
		grid-template-columns: minmax(0, 1fr);
	}
	.fgai .fgai-slips, .fgai.fgai-slips {
		grid-template-columns: minmax(0, 1fr);
	}
	/* Give the shuffle button the whole row on a phone. */
	.fgai .fgai-status .fgai-tip, .fgai.fgai-status .fgai-tip {
		display: none;
	}
	.fgai .fgai-console, .fgai.fgai-console {
		padding: 12px;
	}
	.fgai .fgai-card-act, .fgai.fgai-card-act,
.fgai .fgai-slip-act, .fgai.fgai-slip-act {
		display: none;
	}
	.fgai .fgai-drawer-panel, .fgai.fgai-drawer-panel {
		padding: 16px 12px 20px;
	}
}
/* ==========================================================================
   Dark themes — follow the theme rather than forcing a light card.
   ========================================================================== */
@media (prefers-color-scheme: dark) {
	.fgai {
		--fgai-ink:    #f3effa;
		--fgai-body:   #cdc5dd;
		--fgai-muted:  #9d94b3;
		--fgai-paper:  #221c31;
		--fgai-mist:   #1a1526;
		--fgai-line:   #362e4b;
		--fgai-line-2: #473d61;
	}
	.fgai .fgai-cat.is-on, .fgai.fgai-cat.is-on {
		color: #fff;
	}
	.fgai .fgai-toast, .fgai.fgai-toast {
		background: #362e4b;
	}
}
/* ---------------------------------------------------------------------------
   [fgai_preview] — the pre-launch audit view. Admin-only, deliberately plain:
   it is a checklist, not a page design.
   ------------------------------------------------------------------------ */
.fgai .fgai-preview, .fgai.fgai-preview {
	--fgai-pv-line: color-mix(in srgb, var(--fgai-ink) 12%, transparent);
}
.fgai .fgai-pv-flag, .fgai.fgai-pv-flag {
	margin: 0 0 22px;
	padding: 10px 14px;
	border-radius: 10px;
	background: color-mix(in srgb, var(--fgai-accent2) 12%, transparent);
	border: 1px dashed color-mix(in srgb, var(--fgai-accent2) 45%, transparent);
	font-size: 13.5px;
	font-weight: 600;
	color: var(--fgai-ink);
}
.fgai .fgai-pv-cat, .fgai.fgai-pv-cat {
	display: flex;
	align-items: baseline;
	gap: 10px;
	flex-wrap: wrap;
	margin: 40px 0 16px;
	padding-bottom: 10px;
	border-bottom: 2px solid var(--fgai-accent);
	font-size: 22px;
	line-height: 1.25;
}
.fgai .fgai-pv-cat:first-of-type, .fgai.fgai-pv-cat:first-of-type {
	margin-top: 8px;
}
.fgai .fgai-pv-num, .fgai.fgai-pv-num {
	display: inline-grid;
	place-items: center;
	width: 27px;
	height: 27px;
	border-radius: 50%;
	background: var(--fgai-accent);
	color: #fff;
	font-size: 14px;
	font-weight: 700;
}
.fgai .fgai-pv-cat em, .fgai.fgai-pv-cat em {
	font-style: normal;
	font-size: 13px;
	font-weight: 400;
	opacity: .62;
}
.fgai .fgai-pv-sub, .fgai.fgai-pv-sub {
	margin: 0 0 22px;
	padding: 0 0 18px;
	border-bottom: 1px solid var(--fgai-pv-line);
}
.fgai .fgai-pv-sub-h, .fgai.fgai-pv-sub-h {
	display: flex;
	align-items: center;
	gap: 9px;
	flex-wrap: wrap;
	margin: 0 0 10px;
	font-size: 15.5px;
}
.fgai .fgai-pv-sub-h code, .fgai.fgai-pv-sub-h code {
	font-size: 11.5px;
	opacity: .55;
	background: none;
	padding: 0;
}
.fgai .fgai-pv-n, .fgai.fgai-pv-n {
	min-width: 30px;
	padding: 1px 8px;
	border-radius: 999px;
	background: color-mix(in srgb, var(--fgai-accent) 14%, transparent);
	font-size: 11.5px;
	font-weight: 700;
	text-align: center;
}
.fgai .fgai-pv-n.is-low, .fgai.fgai-pv-n.is-low {
	background: color-mix(in srgb, var(--fgai-accent2) 22%, transparent);
}
.fgai .fgai-pv-empty, .fgai.fgai-pv-empty {
	margin: 0;
	font-size: 13.5px;
	opacity: .6;
}
@media (max-width: 640px) {
	.fgai .fgai-pv-cat, .fgai.fgai-pv-cat { font-size: 19px;
	}
	.fgai .fgai-pv-sub-h code, .fgai.fgai-pv-sub-h code { width: 100%;
	}
}

/* ==========================================================================
   v2 — sticky navigation, copy feedback, live preview
   ========================================================================== */

/* The slider pins to the top; the toolbar pins directly under it. Both offsets
   come from JS because the slider's height changes when chips wrap and because
   the admin bar is 32px when logged in. */


/* A hairline that only appears once the bar has actually stuck, so it does not
   draw a line across the page at rest. */
.fgai .fgai-nav.is-sticky::after,
.fgai.fgai-nav.is-sticky::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 1px;
	background: var(--fgai-line);
	opacity: 0;
	transition: opacity 0.15s ease;
}

.fgai .fgai-nav.is-stuck::after,
.fgai.fgai-nav.is-stuck::after {
	opacity: 1;
}

.fgai .fgai-tools, .fgai.fgai-tools {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	flex: 0 0 auto;
}

.fgai .fgai-live.is-on, .fgai.fgai-live.is-on {
	background: linear-gradient(100deg, var(--fgai-violet), var(--fgai-coral));
	border-color: transparent;
	color: #fff;
}

/* ---- copy feedback ------------------------------------------------------ */

.fgai .fgai-slip.is-copied, .fgai.fgai-slip.is-copied {
	border-color: var(--fgai-violet);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--fgai-violet) 16%, transparent);
}

.fgai .fgai-slip.is-copied .fgai-slip-act,
.fgai .fgai-card.is-copied .fgai-card-act {
	background: linear-gradient(100deg, var(--fgai-violet), var(--fgai-coral));
	color: #fff;
	opacity: 1;
}

.fgai .fgai-card.is-copied, .fgai.fgai-card.is-copied {
	border-color: var(--fgai-violet);
}

@keyframes fgai-pop {
	0%   { transform: scale(1); }
	40%  { transform: scale(1.03); }
	100% { transform: scale(1); }
}

.fgai .fgai-slip.is-copied, .fgai .fgai-card.is-copied {
	animation: fgai-pop 0.28s ease;
}

/* ---- the ideas list while the router swaps it --------------------------- */

.fgai .fgai-ideas.is-loading .fgai-slips,
.fgai.fgai-ideas.is-loading .fgai-slips {
	opacity: 0.35;
	transition: opacity 0.18s ease;
	pointer-events: none;
}

/* ---- live preview ------------------------------------------------------- */

.fgai .fgai-live-panel, .fgai.fgai-live-panel {
	margin: 12px 0 18px;
	padding: 14px;
	border: 1px solid var(--fgai-line);
	border-radius: 16px;
	background: var(--fgai-mist);
}

.fgai .fgai-live-head, .fgai.fgai-live-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 10px;
}

.fgai .fgai-live-title, .fgai.fgai-live-title {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--fgai-muted);
}

.fgai .fgai-live-x, .fgai.fgai-live-x {
	width: 26px;
	height: 26px;
	border-radius: 50%;
	border: 1px solid var(--fgai-line);
	background: var(--fgai-paper);
	color: var(--fgai-muted);
	font-size: 17px;
	line-height: 1;
	cursor: pointer;
}

/* A phone-shaped card, not a full device mock — enough context to judge how a
   name or bio will read, without pretending to be Instagram. */
.fgai .fgai-phone, .fgai.fgai-phone {
	max-width: 330px;
	margin: 0 auto;
	padding: 14px;
	border: 1px solid var(--fgai-line);
	border-radius: 20px;
	background: var(--fgai-paper);
}

.fgai .fgai-ph-top, .fgai.fgai-ph-top {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 10px;
}

.fgai .fgai-ph-avatar, .fgai.fgai-ph-avatar {
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--fgai-violet), var(--fgai-coral));
	flex: 0 0 auto;
}

.fgai .fgai-ph-stats, .fgai.fgai-ph-stats {
	font-size: 12px;
	color: var(--fgai-muted);
}

.fgai .fgai-ph-stats b, .fgai.fgai-ph-stats b {
	color: var(--fgai-ink);
	font-weight: 700;
}

.fgai .fgai-ph-name, .fgai.fgai-ph-name {
	margin: 0 0 3px;
	font-size: 14px;
	font-weight: 700;
	color: var(--fgai-ink);
	overflow-wrap: anywhere;
}

.fgai .fgai-ph-bio, .fgai.fgai-ph-bio {
	margin: 0 0 12px;
	font-size: 13px;
	line-height: 1.5;
	color: var(--fgai-body);
	overflow-wrap: anywhere;
}

.fgai .fgai-ph-post, .fgai.fgai-ph-post {
	border-top: 1px solid var(--fgai-line);
	padding-top: 10px;
}

.fgai .fgai-ph-img, .fgai.fgai-ph-img {
	height: 116px;
	border-radius: 12px;
	background:
		repeating-linear-gradient(45deg,
			var(--fgai-mist) 0 10px,
			color-mix(in srgb, var(--fgai-violet) 7%, var(--fgai-mist)) 10px 20px);
	margin-bottom: 8px;
}

.fgai .fgai-ph-cap, .fgai.fgai-ph-cap {
	margin: 0;
	font-size: 13px;
	line-height: 1.5;
	color: var(--fgai-body);
	overflow-wrap: anywhere;
}

.fgai .fgai-ph-cap b, .fgai.fgai-ph-cap b {
	color: var(--fgai-ink);
	font-weight: 700;
}

@media (max-width: 640px) {
	.fgai .fgai-nav.is-sticky, .fgai.fgai-nav.is-sticky { padding-block: 6px; }
	.fgai .fgai-phone, .fgai.fgai-phone { max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
	.fgai .fgai-slip.is-copied, .fgai .fgai-card.is-copied { animation: none; }
}

/* ==========================================================================
   v2.1 — multi-line cards and the dress-up strip
   ========================================================================== */

/* A 6-line bio is a block of text, not a chip. Multi-line slips get room to
   breathe, a wider column, and their line breaks preserved. */
.fgai .fgai-slips, .fgai.fgai-slips {
	align-items: start;
}

.fgai .fgai-slip.is-multi, .fgai.fgai-slip.is-multi {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	padding: 0;
}

.fgai .fgai-slip.is-multi .fgai-slip-copy {
	display: block;
	width: 100%;
	text-align: left;
	padding: 14px 14px 10px 18px;
}

.fgai .fgai-slip.is-multi .fgai-slip-text {
	display: block;
	white-space: normal;
	overflow: visible;
	line-height: 1.72;
	font-size: 14.5px;
	overflow-wrap: anywhere;
}

/* The pencil moves to the strip on multi-line cards so it stops squeezing
   the text column. */

.fgai .fgai-slip.is-multi { position: relative; }

.fgai .fgai-slip.is-multi .fgai-slip-act {
	align-self: flex-start;
	margin: 0 0 0 18px;
}

/* Give long bios a taller, narrower column so a 6-line bio is not a stripe. */
@media (min-width: 900px) {
	.fgai .fgai-slips, .fgai.fgai-slips {
		grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	}
}

/* Decorated bios often use combining marks and box characters that need a
   little extra room between lines to avoid clipping. */
.fgai .fgai-slip.is-dressed .fgai-slip-text {
	line-height: 1.95;
}


/* ==========================================================================
   Per-card slider

   The control belongs on the card it changes. A shared control at the end of
   the list made people scroll to find it and never told them the cards were
   swipeable at all — so the affordance sits under each card instead.
   ========================================================================== */

.fgai .fgai-stage, .fgai.fgai-stage {
	position: relative;
	display: block;
	overflow: hidden;
	min-height: 1.5em;
}

.fgai .fgai-stage .fgai-slip-text {
	display: block;
	transition: transform 0.26s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.2s ease;
}



/* ---- the swipe strip under each card ------------------------------------ */

.fgai .fgai-swipe, .fgai.fgai-swipe {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	margin-top: auto;
	padding: 6px 8px 7px 16px;
	border-top: 1px solid var(--fgai-line);
	border-radius: 0 0 14px 14px;
	background: linear-gradient(
		180deg,
		transparent,
		color-mix(in srgb, var(--fgai-violet) 5%, transparent)
	);
}

.fgai .fgai-swipe-b, .fgai.fgai-swipe-b {
	flex: 0 0 auto;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	border: 1px solid transparent;
	background: var(--fgai-paper);
	color: var(--fgai-muted);
	font-size: 15px;
	line-height: 1;
	cursor: pointer;
	transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.fgai .fgai-swipe-b:hover,
.fgai .fgai-swipe-b:focus-visible {
	color: #fff;
	border-color: transparent;
	background: linear-gradient(100deg, var(--fgai-violet), var(--fgai-coral));
}

.fgai .fgai-swipe-mid, .fgai.fgai-swipe-mid {
	flex: 1 1 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-width: 0;
}

/* Three short dashes reading as a track — a swipe cue without a word for it. */
.fgai .fgai-swipe-rail, .fgai.fgai-swipe-rail {
	display: inline-flex;
	align-items: center;
	gap: 3px;
}

.fgai .fgai-swipe-rail i, .fgai.fgai-swipe-rail i {
	display: block;
	width: 9px;
	height: 2px;
	border-radius: 2px;
	background: var(--fgai-line-2);
}

.fgai .fgai-slip.is-dressed .fgai-swipe-rail i:nth-child(2) {
	background: var(--fgai-violet);
	width: 13px;
}

.fgai .fgai-swipe-of, .fgai.fgai-swipe-of {
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.08em;
	color: var(--fgai-muted);
	font-variant-numeric: tabular-nums;
	font-feature-settings: "tnum" 1;
}

.fgai .fgai-slip.is-dressed .fgai-swipe-of { color: var(--fgai-violet); }

.fgai .fgai-slip, .fgai.fgai-slip {
	display: flex;
	flex-direction: column;
}

.fgai .fgai-slip .fgai-slip-copy { flex: 1 1 auto; }

@media (prefers-reduced-motion: reduce) {
	.fgai .fgai-stage .fgai-slip-text { transition: none; }
}

/* An ad occupies a grid cell of its own so it never overlaps a card. */
.fgai .fgai-ad, .fgai.fgai-ad {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 90px;
	padding: 8px;
	border: 1px dashed var(--fgai-line);
	border-radius: 14px;
	background: var(--fgai-mist);
	overflow: hidden;
}

.fgai .fgai-ad-in, .fgai.fgai-ad-in {
	width: 100%;
	max-width: 100%;
	overflow: hidden;
}

.fgai .fgai-ad:empty, .fgai .fgai-ad-in:empty { display: none; }

/* ==========================================================================
   Live preview — a floating panel

   Parked under the toolbar it was useless: scroll to the cards and it is off
   screen, which is the moment you actually want it. It now docks to the
   viewport, stays put while you scroll, and can be dragged by its header if
   it covers the card you are looking at.
   ========================================================================== */

.fgai .fgai-live-pop, .fgai.fgai-live-pop {
	position: fixed;
	right: 18px;
	bottom: 18px;
	z-index: 99980;
	width: min(330px, calc(100vw - 32px));
	max-height: min(72vh, 620px);
	overflow: auto;
	margin: 0;
	padding: 12px;
	border: 1px solid var(--fgai-line);
	border-radius: 18px;
	background: var(--fgai-paper);
	box-shadow: 0 18px 44px -12px rgba(24, 12, 48, 0.32),
	            0 2px 8px rgba(24, 12, 48, 0.08);
	animation: fgai-pop-in 0.22s cubic-bezier(0.22, 0.61, 0.36, 1);
}

@keyframes fgai-pop-in {
	from { opacity: 0; transform: translateY(14px) scale(0.98); }
	to   { opacity: 1; transform: translateY(0) scale(1); }
}

.fgai .fgai-live-pop.is-dragging {
	animation: none;
	cursor: grabbing;
	user-select: none;
	box-shadow: 0 26px 60px -14px rgba(24, 12, 48, 0.4);
}

.fgai .fgai-live-pop .fgai-live-head {
	cursor: grab;
	position: sticky;
	top: -12px;
	margin: -12px -12px 10px;
	padding: 12px;
	background: var(--fgai-paper);
	border-radius: 18px 18px 0 0;
	border-bottom: 1px solid var(--fgai-line);
}

.fgai .fgai-live-pop.is-dragging .fgai-live-head { cursor: grabbing; }

/* On a phone it sits along the bottom edge like a sheet. */
@media (max-width: 640px) {
	.fgai .fgai-live-pop, .fgai.fgai-live-pop {
		left: 12px;
		right: 12px;
		bottom: 12px;
		width: auto;
		max-height: 62vh;
		border-radius: 20px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.fgai .fgai-live-pop { animation: none; }
}


/* ==========================================================================
   Sticky bar, card polish
   ========================================================================== */



/* Sticky silently fails inside any ancestor with overflow other than visible,
   which is common in theme containers. Our own roots must never do that. */
.fgai, .fgai-app, .fgai-ideas, .fgai-nav, .fgai-slips {
	overflow: visible;
}

/* ---- cards ------------------------------------------------------------- */

.fgai .fgai-slip, .fgai.fgai-slip {
	border-radius: 14px;
	box-shadow: 0 1px 2px rgba(24, 12, 48, 0.05),
	            0 8px 18px -14px rgba(24, 12, 48, 0.28);
	transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}

.fgai .fgai-slip:hover, .fgai.fgai-slip:hover {
	transform: translateY(-2px);
	box-shadow: 0 2px 4px rgba(24, 12, 48, 0.06),
	            0 16px 30px -16px rgba(24, 12, 48, 0.38);
}

.fgai .fgai-slip .fgai-swipe { border-radius: 0 0 14px 14px; }

.fgai .fgai-card, .fgai.fgai-card {
	border-radius: 14px;
	box-shadow: 0 1px 2px rgba(24, 12, 48, 0.05),
	            0 8px 18px -14px rgba(24, 12, 48, 0.26);
}

@media (prefers-reduced-motion: reduce) {
	.fgai .fgai-slip:hover { transform: none; }
}

/* ---- live preview: a real-looking profile ------------------------------- */

.fgai .fgai-ph-avatar, .fgai.fgai-ph-avatar {
	background-size: cover;
	background-position: center;
	border: 2px solid var(--fgai-paper);
	box-shadow: 0 0 0 2px color-mix(in srgb, var(--fgai-coral) 60%, transparent);
}

.fgai .fgai-ph-handle, .fgai.fgai-ph-handle {
	margin: 0 0 6px;
	font-size: 13px;
	font-weight: 600;
	color: var(--fgai-muted);
}

.fgai .fgai-ph-link, .fgai.fgai-ph-link {
	margin: 0 0 10px;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--fgai-violet);
	overflow-wrap: anywhere;
}

.fgai .fgai-ph-actions, .fgai.fgai-ph-actions {
	display: flex;
	gap: 6px;
	margin: 0 0 12px;
}

.fgai .fgai-ph-actions span, .fgai.fgai-ph-actions span {
	flex: 1 1 0;
	padding: 6px 0;
	border-radius: 8px;
	background: var(--fgai-mist);
	font-size: 12px;
	font-weight: 700;
	text-align: center;
	color: var(--fgai-ink);
}

.fgai .fgai-ph-actions span:first-child {
	background: linear-gradient(100deg, var(--fgai-violet), var(--fgai-coral));
	color: #fff;
}

.fgai .fgai-ph-img, .fgai.fgai-ph-img {
	background-size: cover;
	background-position: center;
}

/* The bio placeholder greys out until something has been tapped. */
.fgai .fgai-live-pop:not(.is-filled) .fgai-ph-bio {
	color: var(--fgai-muted);
	font-style: italic;
}


/* One text node sliding out and back. No second layer exists, so two clicks in
   quick succession cannot leave anything stranded on the card. */
.fgai .fgai-slip-text {
	transition: transform 0.13s ease, opacity 0.13s ease;
}

.fgai .fgai-slip-text.fgai-out-left  { transform: translateX(-14%); opacity: 0; }
.fgai .fgai-slip-text.fgai-out-right { transform: translateX(14%);  opacity: 0; }
.fgai .fgai-slip-text.fgai-in-left   { transform: translateX(-14%); opacity: 0; }
.fgai .fgai-slip-text.fgai-in-right  { transform: translateX(14%);  opacity: 0; }

.fgai .fgai-stage {
	position: relative;
	display: block;
	overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
	.fgai .fgai-slip-text { transition: none; }
}


/* ==========================================================================
   The pinned bar
   ========================================================================== */

.fgai-pinbar {
	position: fixed;
	left: 0;
	right: 0;
	z-index: 99960;
	padding: 8px 14px 10px;
	border-radius: 0 0 18px 18px;
	background: color-mix(in srgb, var(--fgai-paper) 90%, transparent);
	-webkit-backdrop-filter: saturate(1.7) blur(12px);
	backdrop-filter: saturate(1.7) blur(12px);
	box-shadow: 0 10px 26px -14px rgba(24, 12, 48, 0.4),
	            0 1px 0 rgba(24, 12, 48, 0.06);
	animation: fgai-pin-in 0.18s ease;
}

@keyframes fgai-pin-in {
	from { transform: translateY(-8px); opacity: 0; }
	to   { transform: translateY(0); opacity: 1; }
}

/* Inside the pinned bar the two rows sit tight together. */
.fgai-pinbar .fgai-nav { margin: 0 0 6px; }
.fgai-pinbar .fgai-toolbar { margin: 0; }

/* The bar is already full width, so the break-out trick must switch off or it
   would push itself sideways by another half viewport. */
.fgai-pinbar .fgai-breakout {
	width: auto;
	max-width: none;
	margin-inline: 0;
	padding-inline: 0;
}

.fgai-ph-space { display: block; }

@media (max-width: 640px) {
	.fgai-pinbar { padding: 6px 10px 8px; border-radius: 0 0 14px 14px; }
	.fgai-pinbar .fgai-nav { margin-bottom: 4px; }
}

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


/* The styler drops in from the top of the window: it is opened from the bar at
   the top of the page, so it should arrive from the direction you pressed. */
@keyframes fgai-drop {
	from { transform: translateY(-14px); opacity: 0; }
	to   { transform: translateY(0); opacity: 1; }
}

/* Cards read cleaner without the perforation: even corners, one hairline, and
   the text left to be the only decorated thing on the card. */
.fgai .fgai-slip-copy, .fgai.fgai-slip-copy {
	padding-left: 14px;
}

.fgai .fgai-swipe, .fgai.fgai-swipe {
	padding-left: 10px;
}

/* the "new" flag */
.fgai .fgai-slip { position: relative; }

.fgai .fgai-new, .fgai.fgai-new {
	position: absolute;
	top: 7px;
	right: 8px;
	z-index: 2;
	padding: 2px 7px;
	border-radius: 999px;
	background: linear-gradient(100deg, var(--fgai-violet), var(--fgai-coral));
	color: #fff;
	font-size: 9px;
	font-weight: 800;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	line-height: 1.6;
	box-shadow: 0 4px 10px -4px rgba(109, 59, 224, 0.7);
}

.fgai .fgai-slip.is-new .fgai-slip-copy { padding-top: 22px; }

@media (prefers-reduced-motion: reduce) {
	.fgai .fgai-drawer-panel { animation: none; }
}