/* The embedded tool lives on other people's pages: its own card, same palette as the main site. */
:root {
	--bg: #0b0820;
	--ink: #f5f3ff;
	--muted: #b9b3dd;
	--line: rgba(255, 255, 255, 0.14);
	--field: rgba(255, 255, 255, 0.06);
	--cyan: #22d3ee;
	--grad: linear-gradient(120deg, #22d3ee, #8b5cf6 45%, #ec4899 75%, #fb923c);
	--space-sm: 0.5rem;
	--space-md: 1rem;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
	background: var(--bg);
	color: var(--ink);
	font: 15px/1.5 "Be Vietnam Pro", system-ui, -apple-system, "Segoe UI", sans-serif;
	padding: var(--space-md);
	border-radius: 16px;
	min-height: 100vh;
}
form { display: grid; gap: var(--space-sm); }
h1 { margin: 0; font-size: 18px; }
label { color: var(--muted); font-size: 14px; }
textarea {
	width: 100%;
	resize: vertical;
	background: var(--field);
	color: var(--ink);
	border: 1px solid var(--line);
	border-radius: 12px;
	padding: var(--space-sm);
	font: inherit;
}
button {
	justify-self: start;
	border: 0;
	border-radius: 99px;
	padding: 10px 18px;
	font: 700 15px/1 inherit;
	color: #fff;
	background: var(--grad);
	cursor: pointer;
}
button:disabled { opacity: 0.6; cursor: wait; }
#embed-msg { margin: 0; color: var(--muted); min-height: 1.5em; }
pre {
	margin: 0;
	white-space: pre-wrap;
	word-break: break-word;
	background: var(--field);
	border: 1px solid var(--line);
	border-radius: 12px;
	padding: var(--space-sm);
	font: inherit;
}
a { color: var(--cyan); }
footer { margin-top: var(--space-md); font-size: 13px; }