colorsbymax 0.2.2 → 0.3.0

package/dist/{ThemeSwitcher-L1GXY55E.js → ThemeSwitcher-CFtLm7PM.js}

@@ -950,19 +950,38 @@ var lift = (hex, min, max = .78) => {
 	const [h, s, l] = hslOf$2(hex);
 	return hsl$1(h, s, Math.min(max, Math.max(min, l)));
 };
+/**
+* Lightens a colour, keeping its hue and saturation, until it reaches `ratio` against `bg`.
+* Lightness alone doesn't guarantee that: a vivid blue or violet at 60% lightness still reads dark.
+*/
+var readOn = (hex, bg, ratio) => {
+	const [h, s, l] = hslOf$2(hex);
+	let out = hex;
+	for (let x = l; contrastRatio(out, bg) < ratio && x < .96; x += .01) out = hsl$1(h, s, x);
+	return out;
+};
+var TEXT = 4.8;
+var ICON = 3.3;
 /** @param {import('./tokens.js').ThemeTokens} t */
 function darkTokens(t) {
-	const primary = lift(t.primary, .58, .7);
-	const onPrimary = luminance(primary) > .18 ? tone(t.background, .08, .3) : "#ffffff";
+	const background = tone(t.background, .08, .3);
+	const secondary = tone(t.secondary, .2, .45);
+	const areaBg = deriveAppTokens({
+		...t,
+		secondary
+	})["app-background"];
+	const lighterBg = luminance(areaBg) > luminance(background) ? areaBg : background;
+	const primary = readOn(lift(t.primary, .58, .7), lighterBg, TEXT);
+	const onPrimary = [background, "#ffffff"].sort((a, b) => contrastRatio(b, primary) - contrastRatio(a, primary))[0];
 	const tokens = {
 		...t,
 		primary,
 		"on-primary": onPrimary,
 		"primary-dark": tone(t["primary-dark"], .82, .7),
-		"primary-alt": lift(t["primary-alt"], .6),
-		background: tone(t.background, .08, .3),
+		"primary-alt": readOn(lift(t["primary-alt"], .6), lighterBg, ICON),
+		background,
 		surface: tone(t.background, .12, .25),
-		secondary: tone(t.secondary, .2, .45),
+		secondary,
 		"on-secondary": tone(t["on-secondary"], .86, .6),
 		accent: tone(t.accent, .17, .45),
 		"on-accent": tone(t["on-accent"], .86, .6),
@@ -971,12 +990,12 @@ function darkTokens(t) {
 		ink: tone(t.ink, .94, .15),
 		"ink-secondary": tone(t["ink-secondary"], .76, .12),
 		"ink-muted": tone(t["ink-muted"], .7, .12),
-		success: lift(t.success, .6),
-		warning: lift(t.warning, .6),
-		danger: lift(t.danger, .66),
-		info: lift(t.info, .66)
+		success: readOn(lift(t.success, .6), background, ICON),
+		warning: readOn(lift(t.warning, .6), background, ICON),
+		danger: readOn(lift(t.danger, .66), background, ICON),
+		info: readOn(lift(t.info, .66), background, ICON)
 	};
-	for (let n = 1; n <= 8; n++) tokens[`data-${n}`] = lift(t[`data-${n}`], .6);
+	for (let n = 1; n <= 8; n++) tokens[`data-${n}`] = readOn(lift(t[`data-${n}`], .6), background, n <= 2 ? TEXT : ICON);
 	const full = {
 		...tokens,
 		...deriveAppTokens(tokens)
@@ -1403,14 +1422,16 @@ function createRecolourer() {
 	const sheet = document.createElement("style");
 	sheet.dataset.colorsbymax = "recolour";
 	document.head.append(sheet);
-	const site = themeFromRoles(inferRoles(collectColors()).roles);
+	const { roles } = inferRoles(collectColors());
+	const site = themeFromRoles(roles);
+	const plain = !roles.primary;
 	const siteBgL = hslOf$1(site.background)[2];
 	const siteInkL = hslOf$1(site.ink)[2];
 	/** Each distinct painted value, keyed "prop|value", plus the background under text and icons. */
 	const entries = /* @__PURE__ */ new Map();
 	let theme = null;
-	const idFor = (prop, value, kind, backdrop = null, role = null) => {
-		const key = `${prop}|${value}|${backdrop ?? ""}|${role ?? ""}`;
+	const idFor = (prop, value, kind, backdrop = null, role = null, accent = false) => {
+		const key = `${prop}|${value}|${backdrop ?? ""}|${role ?? ""}|${accent ? "a" : ""}`;
 		let entry = entries.get(key);
 		if (!entry) {
 			entry = {
@@ -1419,7 +1440,8 @@ function createRecolourer() {
 				value,
 				kind,
 				backdrop,
-				role
+				role,
+				accent
 			};
 			entries.set(key, entry);
 			if (theme) pendingRules += rule(entry);
@@ -1443,9 +1465,11 @@ function createRecolourer() {
 		const cs = getComputedStyle(el);
 		const ids = [];
 		const role = el instanceof SVGElement || !hasOwnText(el) ? "icon" : "text";
+		const ownFill = (parse(cs.backgroundColor)?.alpha ?? 0) >= .5;
+		const accent = plain && !ownFill && (role === "icon" || el.localName === "a");
 		const colour = (prop, css, kind) => {
 			if (!parse(css)) return;
-			ids.push(FOREGROUND.has(prop) ? idFor(prop, css, kind, backdropOf(el), prop === "color" ? role : "icon") : idFor(prop, css, kind));
+			ids.push(FOREGROUND.has(prop) ? idFor(prop, css, kind, backdropOf(el), prop === "color" ? role : "icon", accent) : idFor(prop, css, kind));
 		};
 		colour("background-color", cs.backgroundColor, "bg");
 		colour("color", cs.color, "text");
@@ -1566,7 +1590,12 @@ function createRecolourer() {
 		let value;
 		if (entry.prop === "background-image") value = entry.value.replace(COLOR_IN_GRADIENT, (stop) => mapColour(stop, entry.kind));
 		else if (entry.backdrop) {
-			const fg = mapHex(entry.value, entry.kind);
+			const own = parse(entry.value);
+			const brand = entry.accent && own && hslOf$1(own.hex)[1] < NEUTRAL_SATURATION;
+			const fg = brand ? {
+				hex: theme.primary,
+				alpha: own.alpha
+			} : mapHex(entry.value, entry.kind);
 			const bg = mapHex(entry.backdrop, "bg");
 			const original = {
 				fg: parse(entry.value)?.hex,
@@ -1574,7 +1603,7 @@ function createRecolourer() {
 			};
 			if (fg && bg && original.fg && original.bg) {
 				const aim = entry.role === "text" ? MIN_TEXT_CONTRAST : MIN_ICON_CONTRAST;
-				const target = Math.min(aim, contrastRatio(original.fg, original.bg));
+				const target = brand ? aim : Math.min(aim, contrastRatio(original.fg, original.bg));
 				const lighter = luminance(original.fg) > luminance(original.bg);
 				value = format({
 					...fg,
@@ -1626,6 +1655,113 @@ function createRecolourer() {
 	};
 }
 //#endregion
+//#region src/settings.js
+/**
+* @typedef {Object} PanelSettings
+* @property {'light' | 'dark' | 'system'} mode  Which version of each theme to list; the panel matches it
+* @property {boolean} showPicks
+* @property {boolean} showLibrary
+* @property {boolean} showCustom      "Custom palettes" section
+* @property {boolean} showOverrides   "Override a single colour" section
+* @property {boolean} showImportExport
+* @property {boolean} draggable       Whether the colour button can be dragged
+* @property {boolean} animateDot      Whether the colour button's dot cycles through the theme's colours
+* @property {number | null} panelWidth           Pixels; null is the standard width
+* @property {number | 'full' | null} panelHeight  Pixels, 'full' for all the room there is, or null to fit the content
+* @property {boolean} libraryCollapsed  Whether the library's category chips are folded away
+* @property {boolean} colourLogo  Whether themes re-colour the site's logo too (off keeps its own colours)
+* @property {boolean} hideButton  Hidden on this device from the finish screen (Alt+Shift+C brings it back)
+*/
+/** @type {PanelSettings} */
+var DEFAULT_SETTINGS = {
+	mode: "light",
+	showPicks: true,
+	showLibrary: true,
+	showCustom: true,
+	showOverrides: true,
+	showImportExport: true,
+	draggable: true,
+	animateDot: true,
+	panelWidth: null,
+	panelHeight: null,
+	libraryCollapsed: false,
+	colourLogo: false,
+	hideButton: false
+};
+/** Size presets offered in settings; dragging an edge gives a custom size instead. */
+var PANEL_PRESETS = [
+	{
+		id: "compact",
+		label: "Compact",
+		width: 340,
+		height: null
+	},
+	{
+		id: "standard",
+		label: "Standard",
+		width: null,
+		height: null
+	},
+	{
+		id: "large",
+		label: "Large",
+		width: 560,
+		height: "full"
+	}
+];
+/** @returns {PanelSettings} */
+function loadSettings(storageKey) {
+	try {
+		const saved = JSON.parse(window.localStorage.getItem(`${storageKey}:settings`) || "null");
+		if (!saved || typeof saved !== "object") return DEFAULT_SETTINGS;
+		const out = { ...DEFAULT_SETTINGS };
+		for (const [key, fallback] of Object.entries(DEFAULT_SETTINGS)) if (typeof saved[key] === typeof fallback) out[key] = saved[key];
+		if (![
+			"light",
+			"dark",
+			"system"
+		].includes(out.mode)) out.mode = DEFAULT_SETTINGS.mode;
+		const size = (v) => typeof v === "number" && v > 0 && v < 1e4;
+		out.panelWidth = size(saved.panelWidth) ? saved.panelWidth : null;
+		out.panelHeight = size(saved.panelHeight) || saved.panelHeight === "full" ? saved.panelHeight : null;
+		return out;
+	} catch {
+		return DEFAULT_SETTINGS;
+	}
+}
+function saveSettings(storageKey, settings) {
+	try {
+		window.localStorage.setItem(`${storageKey}:settings`, JSON.stringify(settings));
+	} catch {}
+}
+/** True while the device prefers dark colours. */
+function usePrefersDark() {
+	const query = "(prefers-color-scheme: dark)";
+	const [dark, setDark] = useState(() => window.matchMedia(query).matches);
+	useEffect(() => {
+		const mq = window.matchMedia(query);
+		const update = () => setDark(mq.matches);
+		mq.addEventListener("change", update);
+		return () => mq.removeEventListener("change", update);
+	}, []);
+	return dark;
+}
+/**
+* @typedef {Object} SettingsApi
+* @property {PanelSettings} settings
+* @property {(patch: Partial<PanelSettings>) => void} update
+* @property {() => void} reset
+* @property {'light' | 'dark'} mode        `settings.mode` with "system" resolved
+* @property {(() => void) | null} resetButton  Moves the colour button back to its corner; null when it's there
+*/
+/** @type {import('react').Context<SettingsApi | null>} */
+var SettingsContext = createContext(null);
+function useSettings() {
+	const ctx = useContext(SettingsContext);
+	if (!ctx) throw new Error("useSettings must be used inside the colorsbymax switcher");
+	return ctx;
+}
+//#endregion
 //#region src/storage.js
 var DEFAULT_STORAGE_KEY = "colorsbymax";
 var VERSION = 1;
@@ -1772,6 +1908,8 @@ var newId = () => `custom-${Date.now().toString(36)}-${Math.random().toString(36
 *   Where each token is used on this site, shown in the editors
 * @property {boolean} [scrollbars]  Colour the page's scrollbars from the theme (default true)
 * @property {() => Promise<any>} [pdf]  Enables PDF uploads: pass `loadPdf` from 'colorsbymax/pdf'
+* @property {boolean} [intro]  Bring the colour button in with a short pop and burst of the theme's
+*   colours, a moment after the page loads (default true). Reduced motion fades it in instead.
 * @property {boolean} [hidden]  Hide the colour button and panel; the theme still applies. Use
 *   `hidden: import.meta.env.PROD` to keep it out of production once the colours are chosen.
 * @property {'bottom-right' | 'bottom-left' | 'top-left' | 'top-right'} [position]  Where the colour
@@ -1929,8 +2067,78 @@ function ThemeProvider({ config = {}, children }) {
 			}
 		}))(s);
 	}), []);
+	/** Selects a theme by id; pass the theme itself for library themes and dark twins. */
+	const selectTheme = useCallback((id, theme) => setState((s) => ({
+		...s,
+		activeId: id,
+		snapshot: theme?.library || theme?.derived ? {
+			id: theme.id,
+			name: theme.name,
+			tokens: theme.tokens
+		} : s.snapshot
+	})), []);
+	const [modeSetting, setModeSetting] = useState(() => loadSettings(storageKey).mode);
+	const prefersDark = usePrefersDark();
+	const mode = modeSetting === "system" ? prefersDark ? "dark" : "light" : modeSetting;
+	const modeRef = useRef(mode);
+	modeRef.current = mode;
+	const setMode = useCallback((next) => {
+		if (![
+			"light",
+			"dark",
+			"system"
+		].includes(next)) return;
+		setModeSetting(next);
+		saveSettings(storageKey, {
+			...loadSettings(storageKey),
+			mode: next
+		});
+	}, [storageKey]);
+	useLayoutEffect(() => {
+		if (base.custom) return;
+		if (mode === "dark" && !isDarkTheme(base.tokens)) {
+			const twin = toDark(base);
+			selectTheme(twin.id, twin);
+		} else if (mode === "light" && base.id.endsWith("~dark")) {
+			const lightId = base.id.slice(0, -DARK_SUFFIX.length);
+			const local = allThemes.find((t) => t.id === lightId);
+			if (local) selectTheme(local.id, local);
+			else loadLibrary().then((lib) => {
+				const t = lib.themes.find((x) => x.id === lightId);
+				if (t) selectTheme(t.id, t);
+			}, () => {});
+		}
+	}, [
+		mode,
+		base,
+		allThemes,
+		selectTheme
+	]);
+	useLayoutEffect(() => {
+		const html = document.documentElement;
+		html.dataset.colorsbymaxScheme = mode;
+		html.style.colorScheme = mode;
+		for (const el of document.querySelectorAll("[data-colorsbymax-mode]")) {
+			const want = el.getAttribute("data-colorsbymax-mode");
+			el.setAttribute("aria-pressed", String(want === "toggle" ? mode === "dark" : want === modeSetting));
+		}
+	}, [mode, modeSetting]);
+	useEffect(() => {
+		const onClick = (e) => {
+			const el = e.target.closest?.("[data-colorsbymax-mode]");
+			if (!el) return;
+			const want = el.getAttribute("data-colorsbymax-mode");
+			setMode(want === "toggle" ? modeRef.current === "dark" ? "light" : "dark" : want);
+		};
+		document.addEventListener("click", onClick);
+		return () => document.removeEventListener("click", onClick);
+	}, [setMode]);
 	const api = {
 		state,
+		/** The mode in effect ('light' or 'dark'), the visitor's setting ('system' follows the device), and a setter. */
+		mode,
+		modeSetting,
+		setMode,
 		storageKey,
 		siteName,
 		usage: initialConfig.usage ?? {},
@@ -1938,6 +2146,8 @@ function ThemeProvider({ config = {}, children }) {
 		position: initialConfig.position ?? "bottom-right",
 		/** True when the config hides the switcher (e.g. in production); the theme still applies. */
 		hidden: Boolean(initialConfig.hidden),
+		/** Whether the colour button makes an entrance when it first appears. */
+		intro: initialConfig.intro !== false,
 		/** True when colorsbymax is swapping the page's own colours (the site isn't wired to tokens). */
 		recolouring: Boolean(pageColours),
 		/** Turns re-colouring of the site's logo on or off (the switcher's "Colour the logo" setting). */
@@ -1950,16 +2160,7 @@ function ThemeProvider({ config = {}, children }) {
 		active: base,
 		tokens,
 		issues,
-		/** Selects a theme by id; pass the theme itself for library themes and dark twins. */
-		selectTheme: (id, theme) => setState((s) => ({
-			...s,
-			activeId: id,
-			snapshot: theme?.library || theme?.derived ? {
-				id: theme.id,
-				name: theme.name,
-				tokens: theme.tokens
-			} : s.snapshot
-		})),
+		selectTheme,
 		createCustom: (name) => {
 			const id = newId();
 			setState((s) => ({
@@ -2300,6 +2501,30 @@ var Contrast = icon("contrast", [["circle", {
 	"cy": "12",
 	"r": "10"
 }], ["path", { "d": "M12 18a6 6 0 0 0 0-12v12z" }]]);
+var ClipboardPaste = icon("clipboard-paste", [
+	["path", { "d": "M11 14h10" }],
+	["path", { "d": "M16 4h2a2 2 0 0 1 2 2v1.344" }],
+	["path", { "d": "m17 18 4-4-4-4" }],
+	["path", { "d": "M8 4H6a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h12a2 2 0 0 0 1.793-1.113" }],
+	["rect", {
+		"x": "8",
+		"y": "2",
+		"width": "8",
+		"height": "4",
+		"rx": "1"
+	}]
+]);
+var ToggleRight = icon("toggle-right", [["circle", {
+	"cx": "15",
+	"cy": "12",
+	"r": "3"
+}], ["rect", {
+	"width": "20",
+	"height": "14",
+	"x": "2",
+	"y": "5",
+	"rx": "7"
+}]]);
 /** Images are scaled down to at most this many pixels on their longest side before sampling. */
 var SAMPLE_SIZE = 200;
 /** PDF pages read, from the first. */
@@ -2520,112 +2745,118 @@ var cssSnippet = (tokens) => `:root {\n${TOKEN_KEYS.map((k) => `  --color-${k}:
 var keepPrompt = (name, tokens) => `Update my colorsbymax setup so the colours I chose become my site's default and the colour switcher is hidden in production. In the colorsbymax config (the autoMount({...}) call, or the config passed to <ThemeProvider>), set defaultTheme to { name: ${JSON.stringify(name)}, tokens: ${JSON.stringify(tokens)} } and set hidden: ${VITE_PROD} (use ${NODE_PROD} if this isn't a Vite project). If the site uses import 'colorsbymax/auto', replace it with import { autoMount } from 'colorsbymax/auto' and an autoMount({...}) call with that config. Don't change anything else.`;
 /** @param {boolean} recolouring  true when colorsbymax was swapping the site's hard-coded colours */
 var removePrompt = (tokens, recolouring) => recolouring ? `Remove colorsbymax from this project but keep the colours it currently shows. The site's CSS uses hard-coded colours that colorsbymax was swapping at runtime, so update the site's own CSS to use this palette instead (primary is the main brand colour, background the page, ink the text): ${JSON.stringify(tokens)}. Then uninstall the colorsbymax package and delete its import (import 'colorsbymax/auto', autoMount, ThemeProvider or ThemeSwitcher) and any colorsbymax pre-paint script in index.html.` : `Remove colorsbymax from this project but keep my colours: add these CSS variables to my global stylesheet, replacing any existing --color-* values: ${cssSnippet(tokens)} Then uninstall the colorsbymax package and delete its usage (ThemeProvider, ThemeSwitcher, autoMount or import 'colorsbymax/auto') and any colorsbymax pre-paint script in index.html. Keep colorsbymax/tokens.css only if nothing else needs it.`;
-//#endregion
-//#region src/settings.js
-/**
-* @typedef {Object} PanelSettings
-* @property {'light' | 'dark' | 'system'} mode  Which version of each theme to list; the panel matches it
-* @property {boolean} showPicks
-* @property {boolean} showLibrary
-* @property {boolean} showCustom      "Custom palettes" section
-* @property {boolean} showOverrides   "Override a single colour" section
-* @property {boolean} showImportExport
-* @property {boolean} draggable       Whether the colour button can be dragged
-* @property {boolean} animateDot      Whether the colour button's dot cycles through the theme's colours
-* @property {number | null} panelWidth           Pixels; null is the standard width
-* @property {number | 'full' | null} panelHeight  Pixels, 'full' for all the room there is, or null to fit the content
-* @property {boolean} libraryCollapsed  Whether the library's category chips are folded away
-* @property {boolean} colourLogo  Whether themes re-colour the site's logo too (off keeps its own colours)
-* @property {boolean} hideButton  Hidden on this device from the finish screen (Alt+Shift+C brings it back)
-*/
-/** @type {PanelSettings} */
-var DEFAULT_SETTINGS = {
-	mode: "light",
-	showPicks: true,
-	showLibrary: true,
-	showCustom: true,
-	showOverrides: true,
-	showImportExport: true,
-	draggable: true,
-	animateDot: true,
-	panelWidth: null,
-	panelHeight: null,
-	libraryCollapsed: false,
-	colourLogo: false,
-	hideButton: false
-};
-/** Size presets offered in settings; dragging an edge gives a custom size instead. */
-var PANEL_PRESETS = [
-	{
-		id: "compact",
-		label: "Compact",
-		width: 340,
-		height: null
-	},
-	{
-		id: "standard",
-		label: "Standard",
-		width: null,
-		height: null
-	},
-	{
-		id: "large",
-		label: "Large",
-		width: 560,
-		height: "full"
-	}
-];
-/** @returns {PanelSettings} */
-function loadSettings(storageKey) {
-	try {
-		const saved = JSON.parse(window.localStorage.getItem(`${storageKey}:settings`) || "null");
-		if (!saved || typeof saved !== "object") return DEFAULT_SETTINGS;
-		const out = { ...DEFAULT_SETTINGS };
-		for (const [key, fallback] of Object.entries(DEFAULT_SETTINGS)) if (typeof saved[key] === typeof fallback) out[key] = saved[key];
-		if (![
-			"light",
-			"dark",
-			"system"
-		].includes(out.mode)) out.mode = DEFAULT_SETTINGS.mode;
-		const size = (v) => typeof v === "number" && v > 0 && v < 1e4;
-		out.panelWidth = size(saved.panelWidth) ? saved.panelWidth : null;
-		out.panelHeight = size(saved.panelHeight) || saved.panelHeight === "full" ? saved.panelHeight : null;
-		return out;
-	} catch {
-		return DEFAULT_SETTINGS;
-	}
-}
-function saveSettings(storageKey, settings) {
-	try {
-		window.localStorage.setItem(`${storageKey}:settings`, JSON.stringify(settings));
-	} catch {}
+/** The switch's markup: a sun in light mode, a moon in dark. */
+var TOGGLE_HTML = `<button type="button" class="cbm-mode-toggle" data-colorsbymax-mode="toggle" aria-label="Switch between light and dark mode">
+  <svg class="cbm-mode-sun" viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="4"/><path d="M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M6.34 17.66l-1.41 1.41M19.07 4.93l-1.41 1.41"/></svg>
+  <svg class="cbm-mode-moon" viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z"/></svg>
+</button>`;
+/** Its styles. It takes the colour of the text around it, so it suits any top bar. */
+var TOGGLE_CSS = `.cbm-mode-toggle {
+  display: inline-grid;
+  place-items: center;
+  width: 2.25rem;
+  height: 2.25rem;
+  border: 1px solid currentColor;
+  border-radius: 9999px;
+  background: transparent;
+  color: inherit;
+  opacity: 0.85;
+  cursor: pointer;
 }
-/** True while the device prefers dark colours. */
-function usePrefersDark() {
-	const query = "(prefers-color-scheme: dark)";
-	const [dark, setDark] = useState(() => window.matchMedia(query).matches);
-	useEffect(() => {
-		const mq = window.matchMedia(query);
-		const update = () => setDark(mq.matches);
-		mq.addEventListener("change", update);
-		return () => mq.removeEventListener("change", update);
-	}, []);
-	return dark;
+.cbm-mode-toggle:hover { opacity: 1; }
+.cbm-mode-toggle .cbm-mode-moon,
+html[data-colorsbymax-scheme="dark"] .cbm-mode-toggle .cbm-mode-sun { display: none; }
+html[data-colorsbymax-scheme="dark"] .cbm-mode-toggle .cbm-mode-moon { display: block; }`;
+/** The same switch as a React component. */
+var TOGGLE_REACT = `// ModeToggle.jsx: put <ModeToggle /> in your top bar. colorsbymax makes it work.
+export function ModeToggle() {
+  return (
+    <button type="button" className="cbm-mode-toggle" data-colorsbymax-mode="toggle" aria-label="Switch between light and dark mode">
+      <svg className="cbm-mode-sun" viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
+        <circle cx="12" cy="12" r="4" />
+        <path d="M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M6.34 17.66l-1.41 1.41M19.07 4.93l-1.41 1.41" />
+      </svg>
+      <svg className="cbm-mode-moon" viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
+        <path d="M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z" />
+      </svg>
+    </button>
+  )
+}`;
+/** A prompt for Claude, Cursor or Copilot that adds the switch to the site's top bar. */
+var TOGGLE_PROMPT = `Add a light and dark mode switch to my site's top navigation bar, next to its other links or buttons. The site uses colorsbymax, which makes the switch work: any element with data-colorsbymax-mode="toggle" switches the whole site between light and dark and remembers the visitor's choice. Use this button (as a React component if the nav is React):
+
+${TOGGLE_HTML}
+
+and add these styles to the global stylesheet, adjusting size and spacing to match the nav:
+
+${TOGGLE_CSS}
+
+Don't change anything else.`;
+var PREVIEW = "data-colorsbymax-preview";
+/** Where a switch would go: the page's top bar, or null if it has none. */
+function topBar() {
+	for (const selector of [
+		"header nav",
+		"nav",
+		"[role=\"navigation\"]",
+		"header",
+		"[role=\"banner\"]"
+	]) for (const el of document.querySelectorAll(selector)) {
+		if (el.closest("colorsbymax-root")) continue;
+		const r = el.getBoundingClientRect();
+		if (r.width > 200 && r.height > 12 && r.top < window.innerHeight / 2) return el;
+	}
+	return null;
 }
+/** Whether a preview switch is on the page. */
+var isPreviewing = () => Boolean(document.querySelector(`[${PREVIEW}]`));
 /**
-* @typedef {Object} SettingsApi
-* @property {PanelSettings} settings
-* @property {(patch: Partial<PanelSettings>) => void} update
-* @property {() => void} reset
-* @property {'light' | 'dark'} mode        `settings.mode` with "system" resolved
-* @property {(() => void) | null} resetButton  Moves the colour button back to its corner; null when it's there
+* Puts a switch in the page's top bar (or the top-left corner if it has none) until the next
+* reload. Returns where it went: 'nav' or 'corner'.
 */
-/** @type {import('react').Context<SettingsApi | null>} */
-var SettingsContext = createContext(null);
-function useSettings() {
-	const ctx = useContext(SettingsContext);
-	if (!ctx) throw new Error("useSettings must be used inside the colorsbymax switcher");
-	return ctx;
+function previewToggle() {
+	removePreview();
+	const style = document.createElement("style");
+	style.setAttribute(PREVIEW, "");
+	style.textContent = TOGGLE_CSS;
+	document.head.append(style);
+	const holder = document.createElement("span");
+	holder.innerHTML = TOGGLE_HTML;
+	const button = holder.firstElementChild;
+	button.setAttribute(PREVIEW, "");
+	button.setAttribute("aria-pressed", String(document.documentElement.dataset.colorsbymaxScheme === "dark"));
+	const bar = topBar();
+	if (bar) {
+		button.style.marginInline = "0.5rem";
+		bar.append(button);
+	} else {
+		Object.assign(button.style, {
+			position: "fixed",
+			top: "16px",
+			left: "16px",
+			zIndex: "59",
+			background: "Canvas"
+		});
+		document.body.append(button);
+	}
+	button.animate?.([
+		{
+			transform: "scale(0.4)",
+			opacity: 0
+		},
+		{ transform: "scale(1.15)" },
+		{
+			transform: "scale(1)",
+			opacity: 1
+		}
+	], {
+		duration: 450,
+		easing: "ease-out"
+	});
+	return bar ? "nav" : "corner";
+}
+function removePreview() {
+	for (const el of document.querySelectorAll(`[${PREVIEW}]`)) el.remove();
 }
 //#endregion
 //#region src/ThemePanel.jsx
@@ -2676,7 +2907,7 @@ function useSavedToYours() {
 }
 function ThemePanel() {
 	const theme = useTheme();
-	const { settings, mode, audit } = useSettings();
+	const { settings, mode, audit, update } = useSettings();
 	const overrideCount = Object.keys(theme.state.overrides).length;
 	const [view, setView] = useState("main");
 	const returnFocus = useRef(null);
@@ -2741,33 +2972,73 @@ function ThemePanel() {
 						children: "by mrmaxdesigns"
 					})] }), /* @__PURE__ */ jsxs("div", {
 						className: "flex items-center gap-1",
-						children: [/* @__PURE__ */ jsxs("button", {
-							type: "button",
-							onClick: audit.toggle,
-							className: `${btn} px-2 ${audit.on ? "border-zinc-900 bg-zinc-100" : "border-transparent"}`,
-							"aria-pressed": audit.on,
-							"data-tip": "Audit the page: point out what won’t look right with these colours",
-							children: [/* @__PURE__ */ jsx(ScanSearch, {
-								className: "w-4 h-4",
-								"aria-hidden": "true"
-							}), "Audit"]
-						}), /* @__PURE__ */ jsx("button", {
-							type: "button",
-							onClick: (e) => view === "settings" ? setView("main") : showView("settings", e.currentTarget),
-							className: `${btn} px-1.5 ${view === "settings" ? "border-zinc-900 bg-zinc-100" : "border-transparent"}`,
-							"aria-label": "Panel settings",
-							"aria-pressed": view === "settings",
-							"data-tip": "Panel settings",
-							children: /* @__PURE__ */ jsx(Settings, {
-								className: "w-4 h-4",
-								"aria-hidden": "true"
+						children: [
+							/* @__PURE__ */ jsx("div", {
+								role: "radiogroup",
+								"aria-label": "Theme mode",
+								className: "flex items-center rounded-lg border border-zinc-200 p-0.5",
+								children: MODES.map(({ id, label, Icon }) => {
+									const on = settings.mode === id;
+									return /* @__PURE__ */ jsx("button", {
+										type: "button",
+										role: "radio",
+										"aria-checked": on,
+										"aria-label": label,
+										"data-tip": id === "system" ? "Auto: follow this device" : label,
+										onClick: () => update({ mode: id }),
+										className: `grid h-7 w-7 place-items-center rounded-md cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-zinc-900 ${on ? "bg-zinc-900 text-white" : "text-zinc-600 hover:bg-zinc-100 hover:text-zinc-900"}`,
+										children: /* @__PURE__ */ jsx(Icon, {
+											className: "w-3.5 h-3.5",
+											"aria-hidden": "true"
+										})
+									}, id);
+								})
+							}),
+							/* @__PURE__ */ jsxs("button", {
+								type: "button",
+								onClick: (e) => view === "mode-toggle" ? setView("main") : showView("mode-toggle", e.currentTarget),
+								className: `${btn} shrink-0 whitespace-nowrap px-1.5 @min-[500px]:px-2 ${view === "mode-toggle" ? "border-zinc-900 bg-zinc-100" : "border-transparent"}`,
+								"aria-pressed": view === "mode-toggle",
+								"aria-label": "Add a light and dark switch to your site",
+								"data-tip": "Add a light and dark switch to your site",
+								children: [/* @__PURE__ */ jsx(ToggleRight, {
+									className: "w-4 h-4",
+									"aria-hidden": "true"
+								}), /* @__PURE__ */ jsx("span", {
+									className: "hidden @min-[500px]:inline",
+									children: "Add to site"
+								})]
+							}),
+							/* @__PURE__ */ jsxs("button", {
+								type: "button",
+								onClick: audit.toggle,
+								className: `${btn} px-2 ${audit.on ? "border-zinc-900 bg-zinc-100" : "border-transparent"}`,
+								"aria-pressed": audit.on,
+								"data-tip": "Audit the page: point out what won’t look right with these colours",
+								children: [/* @__PURE__ */ jsx(ScanSearch, {
+									className: "w-4 h-4",
+									"aria-hidden": "true"
+								}), "Audit"]
+							}),
+							/* @__PURE__ */ jsx("button", {
+								type: "button",
+								onClick: (e) => view === "settings" ? setView("main") : showView("settings", e.currentTarget),
+								className: `${btn} px-1.5 ${view === "settings" ? "border-zinc-900 bg-zinc-100" : "border-transparent"}`,
+								"aria-label": "Panel settings",
+								"aria-pressed": view === "settings",
+								"data-tip": "Panel settings",
+								children: /* @__PURE__ */ jsx(Settings, {
+									className: "w-4 h-4",
+									"aria-hidden": "true"
+								})
 							})
-						})]
+						]
 					})]
 				}),
 				view === "contrast" && /* @__PURE__ */ jsx(ContrastView, { onBack: () => setView("main") }),
 				view === "settings" && /* @__PURE__ */ jsx(SettingsView, { onBack: () => setView("main") }),
 				view === "finish" && /* @__PURE__ */ jsx(FinishView, { onBack: () => setView("main") }),
+				view === "mode-toggle" && /* @__PURE__ */ jsx(ModeToggleView, { onBack: () => setView("main") }),
 				/* @__PURE__ */ jsxs("div", {
 					hidden: view !== "main",
 					children: [/* @__PURE__ */ jsxs(ContrastNav.Provider, {
@@ -2882,6 +3153,137 @@ function Toast({ toast, onDismiss }) {
 		]
 	});
 }
+/**
+* "Add to site": a light and dark switch for the site itself. Every theme has a dark version, so any
+* site can switch; this shows the switch, previews it in the page's top bar, and gives the code and
+* an AI-editor prompt to add it for good.
+*/
+function ModeToggleView({ onBack }) {
+	const { settings, update } = useSettings();
+	const { toast } = usePanel();
+	const headingRef = useRef(null);
+	const [previewing, setPreviewing] = useState(isPreviewing);
+	const [tab, setTab] = useState("html");
+	useEffect(() => headingRef.current?.focus(), []);
+	const preview = () => {
+		const where = previewToggle();
+		setPreviewing(true);
+		toast(where === "nav" ? "The switch is in your top bar. Try it; it’s gone when you reload." : "No top bar found, so the switch is in the top-left corner. It’s gone when you reload.");
+	};
+	const stop = () => {
+		removePreview();
+		setPreviewing(false);
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		className: "px-4 py-3 space-y-4",
+		children: [
+			/* @__PURE__ */ jsxs("button", {
+				type: "button",
+				className: `${btn} border-transparent px-1.5`,
+				onClick: onBack,
+				children: [/* @__PURE__ */ jsx(ArrowLeft, {
+					className: "w-3.5 h-3.5",
+					"aria-hidden": "true"
+				}), " Back"]
+			}),
+			/* @__PURE__ */ jsx("h3", {
+				ref: headingRef,
+				tabIndex: -1,
+				className: "text-sm font-semibold focus:outline-none",
+				children: "Add a light and dark switch to your site"
+			}),
+			/* @__PURE__ */ jsx("p", {
+				className: "text-xs text-zinc-600",
+				children: "Every theme has a dark version, so your whole site can switch, even if it never had a dark mode. Put a switch in your top bar and visitors can choose; colorsbymax does the rest and remembers their choice. It keeps working when the colour button is hidden."
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex items-center justify-between gap-3 rounded-xl border border-zinc-200 bg-zinc-50 p-3",
+				children: [/* @__PURE__ */ jsxs("div", {
+					className: "text-xs text-zinc-700",
+					children: [/* @__PURE__ */ jsx("p", {
+						className: "font-semibold text-zinc-900",
+						children: "Try it here first"
+					}), /* @__PURE__ */ jsx("p", { children: previewing ? "The switch is on this page. It’s gone when you reload." : "Puts a working switch in this page’s top bar." })]
+				}), previewing ? /* @__PURE__ */ jsx("button", {
+					type: "button",
+					className: btn,
+					onClick: stop,
+					children: "Remove"
+				}) : /* @__PURE__ */ jsxs("button", {
+					type: "button",
+					className: btnPrimary,
+					onClick: preview,
+					children: [/* @__PURE__ */ jsx(ToggleRight, {
+						className: "w-3.5 h-3.5",
+						"aria-hidden": "true"
+					}), " Preview it"]
+				})]
+			}),
+			/* @__PURE__ */ jsx("div", {
+				role: "radiogroup",
+				"aria-label": "Mode",
+				className: "grid grid-cols-3 gap-2",
+				children: MODES.map(({ id, label, Icon }) => /* @__PURE__ */ jsxs("button", {
+					type: "button",
+					role: "radio",
+					"aria-checked": settings.mode === id,
+					onClick: () => update({ mode: id }),
+					className: `flex h-8 items-center justify-center gap-1.5 rounded-lg border text-xs font-medium cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-zinc-900 ${settings.mode === id ? "border-zinc-900 bg-zinc-900 text-white" : "border-zinc-300 bg-white text-zinc-800 hover:bg-zinc-50"}`,
+					children: [
+						/* @__PURE__ */ jsx(Icon, {
+							className: "w-3.5 h-3.5",
+							"aria-hidden": "true"
+						}),
+						" ",
+						label
+					]
+				}, id))
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "space-y-2",
+				children: [
+					/* @__PURE__ */ jsx("p", {
+						className: "text-xs font-semibold text-zinc-900",
+						children: "Add it for good"
+					}),
+					/* @__PURE__ */ jsx("div", {
+						role: "tablist",
+						"aria-label": "Code for",
+						className: "flex gap-1",
+						children: [["html", "HTML"], ["react", "React"]].map(([id, label]) => /* @__PURE__ */ jsx("button", {
+							type: "button",
+							role: "tab",
+							"aria-selected": tab === id,
+							onClick: () => setTab(id),
+							className: `rounded-md px-2 py-1 text-[11px] font-semibold cursor-pointer ${tab === id ? "bg-zinc-900 text-white" : "text-zinc-600 hover:bg-zinc-100"}`,
+							children: label
+						}, id))
+					}),
+					/* @__PURE__ */ jsx(CopyBlock, {
+						label: tab === "html" ? "In your top bar" : "ModeToggle.jsx",
+						text: tab === "html" ? TOGGLE_HTML : TOGGLE_REACT
+					}),
+					/* @__PURE__ */ jsx(CopyBlock, {
+						label: "In your global stylesheet",
+						text: TOGGLE_CSS
+					}),
+					/* @__PURE__ */ jsx(CopyBlock, {
+						label: "Or ask Claude, Cursor or Copilot",
+						text: TOGGLE_PROMPT,
+						copyLabel: "Copy prompt"
+					})
+				]
+			}),
+			/* @__PURE__ */ jsxs("p", {
+				className: "rounded-lg bg-zinc-100 p-2.5 text-[11px] text-zinc-700",
+				children: [/* @__PURE__ */ jsx("strong", {
+					className: "font-semibold text-zinc-900",
+					children: "Already have a dark mode?"
+				}), " You don’t need this. The theme you pick colours your site well in light and dark, with contrast checked in both."]
+			})
+		]
+	});
+}
 /** Shows code with a copy button. */
 function CopyBlock({ label, text, copyLabel = "Copy" }) {
 	const { toast } = usePanel();
@@ -3556,6 +3958,8 @@ function PresetGrid() {
 	const { toast, reveal } = usePanel();
 	const wrapRef = useRef(null);
 	const pendingScroll = useRef(false);
+	const themesRef = useRef(null);
+	const scrollToThemes = useRef(false);
 	useEffect(() => {
 		if (!reveal) return;
 		setCategory(reveal.group);
@@ -3567,6 +3971,14 @@ function PresetGrid() {
 		pendingScroll.current = true;
 	}, [reveal]);
 	useEffect(() => {
+		if (scrollToThemes.current && themesRef.current) {
+			scrollToThemes.current = false;
+			const still = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+			themesRef.current.scrollIntoView({
+				block: "start",
+				behavior: still ? "auto" : "smooth"
+			});
+		}
 		if (!pendingScroll.current) return;
 		pendingScroll.current = false;
 		const root = wrapRef.current;
@@ -3654,10 +4066,11 @@ function PresetGrid() {
 		"yours"
 	].includes(category));
 	const catInfo = library?.categories.find((c) => c.id === category);
-	const choose = (id) => {
+	const choose = (id, { scroll = false } = {}) => {
 		setCategory(id);
 		setQuery("");
 		setLimit(PAGE_SIZE);
+		scrollToThemes.current = scroll;
 	};
 	const pick = (t) => selectTheme(t.id, t);
 	const surprise = () => {
@@ -3789,7 +4202,7 @@ function PresetGrid() {
 						type: "button",
 						"aria-pressed": on,
 						"data-tip": c.description,
-						onClick: () => choose(c.id),
+						onClick: () => choose(c.id, { scroll: true }),
 						className: `flex h-8 min-w-0 items-center gap-1 rounded-lg border px-2 text-xs font-medium cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-zinc-900 focus-visible:ring-offset-1 ${on ? "border-zinc-900 bg-zinc-900 text-white" : "border-zinc-300 bg-white text-zinc-800 hover:bg-zinc-50"}`,
 						children: [
 							on && /* @__PURE__ */ jsx(Check, {
@@ -3808,6 +4221,10 @@ function PresetGrid() {
 					}, c.id);
 				})
 			})] }),
+			/* @__PURE__ */ jsx("div", {
+				ref: themesRef,
+				className: "scroll-mt-3"
+			}),
 			!q && /* @__PURE__ */ jsx("p", {
 				className: "text-xs text-zinc-600",
 				children: (catInfo ?? chips.find((c) => c.id === category))?.description
@@ -4267,7 +4684,16 @@ var FROM_NOTE = {
 	pdf: "Picked from the colours on the first pages.",
 	"pdf-text": "Found colour codes written in the PDF."
 };
-/** Builds a custom palette from the colours in an uploaded image, or a PDF where the site allows it. */
+var IS_MAC = typeof navigator !== "undefined" && /Mac|iPhone|iPad/.test(navigator.platform || navigator.userAgent);
+/** The paste shortcut, as the visitor's keyboard shows it. */
+var PASTE_KEYS = IS_MAC ? "⌘V" : "Ctrl+V";
+var PASTED = "Pasted image";
+/** The first image (or PDF) in a clipboard's files: a screenshot, or a copied picture. */
+var fileFromClipboard = (data) => [...data?.files ?? []].find((f) => f.type.startsWith("image/") || f.type === "application/pdf");
+/**
+* Builds a custom palette from the colours in an image (uploaded, dropped or pasted from the
+* clipboard), or a PDF where the site allows it.
+*/
 function PaletteFromFile() {
 	const { addPalette, loadPdf } = useTheme();
 	const kinds = loadPdf ? "image or PDF" : "image";
@@ -4278,35 +4704,105 @@ function PaletteFromFile() {
 	const [off, setOff] = useState(() => /* @__PURE__ */ new Set());
 	const [name, setName] = useState("");
 	const [dragOver, setDragOver] = useState(false);
+	const [picture, setPicture] = useState(null);
+	const [flash, setFlash] = useState(false);
 	const fileRef = useRef(null);
+	const zoneRef = useRef(null);
 	const nameId = useId();
 	const chosen = found ? found.colours.filter((c) => !off.has(c)) : [];
 	const preview = useMemo(() => chosen.length ? themeFromPalette(chosen) : null, [chosen.join()]);
-	const read = async (file) => {
+	useEffect(() => () => picture?.url && URL.revokeObjectURL(picture.url), [picture?.url]);
+	useEffect(() => {
+		if (!picture?.pasted) return;
+		const still = window.matchMedia?.("(prefers-reduced-motion: reduce)").matches;
+		zoneRef.current?.scrollIntoView({
+			block: "nearest",
+			behavior: still ? "auto" : "smooth"
+		});
+	}, [picture?.url, picture?.pasted]);
+	useEffect(() => {
+		if (!flash) return;
+		const t = setTimeout(() => setFlash(false), 1200);
+		return () => clearTimeout(t);
+	}, [flash]);
+	/**
+	* @param {string} [label]  what to call the file; pasted images have no useful name
+	* @param {boolean} [pasted]
+	*/
+	const read = async (file, label = file?.name, pasted = false) => {
 		if (!file) return;
 		setBusy(true);
 		setError(null);
+		setFound(null);
+		setPicture({
+			url: file.type.startsWith("image/") ? URL.createObjectURL(file) : null,
+			label,
+			pasted
+		});
 		try {
 			const { colours, from } = await coloursFromFile(file, { loadPdf });
 			if (!colours.length) throw new Error("Couldn’t find any colours in that file.");
 			setFound({
-				fileName: file.name,
+				fileName: label,
 				colours,
 				from
 			});
 			setOff(/* @__PURE__ */ new Set());
-			setName(file.name.replace(/\.[^.]+$/, "").replace(/[-_]+/g, " ").trim().slice(0, 60) || "Uploaded palette");
+			setName(label.replace(/\.[^.]+$/, "").replace(/[-_]+/g, " ").trim().slice(0, 60) || "Uploaded palette");
 		} catch (e) {
-			setFound(null);
+			setPicture(null);
 			setError(e.message || "Couldn’t read that file.");
 		} finally {
 			setBusy(false);
 		}
 	};
+	const clear = () => {
+		setFound(null);
+		setPicture(null);
+	};
+	/** Reads a pasted image, opening Import / export first if it's collapsed, so the result shows. */
+	const readPasted = (file) => {
+		const section = zoneRef.current?.closest("details");
+		if (section && !section.open) section.open = true;
+		setFlash(true);
+		read(file, PASTED, true);
+	};
+	const readPastedRef = useRef(readPasted);
+	readPastedRef.current = readPasted;
+	useEffect(() => {
+		const root = zoneRef.current?.getRootNode();
+		if (!root) return;
+		const onPaste = (e) => {
+			const file = fileFromClipboard(e.clipboardData);
+			if (!file) return;
+			const target = e.composedPath()[0];
+			if (target instanceof HTMLElement && (target.isContentEditable || target.localName === "input" || target.localName === "textarea") && e.clipboardData.types.includes("text/plain")) return;
+			e.preventDefault();
+			readPastedRef.current(file);
+		};
+		root.addEventListener("paste", onPaste);
+		return () => root.removeEventListener("paste", onPaste);
+	}, []);
+	const pasteFromClipboard = async () => {
+		setError(null);
+		if (!navigator.clipboard?.read) {
+			setError(`This browser can’t paste from a button. Press ${PASTE_KEYS} instead.`);
+			return;
+		}
+		try {
+			for (const item of await navigator.clipboard.read()) {
+				const type = item.types.find((t) => t.startsWith("image/"));
+				if (type) return readPasted(new File([await item.getType(type)], PASTED, { type }));
+			}
+			setError("There’s no image on the clipboard. Take a screenshot or copy a picture, then paste.");
+		} catch {
+			setError(`Couldn’t read the clipboard. Press ${PASTE_KEYS} to paste instead.`);
+		}
+	};
 	const create = () => {
 		addPalette(name, preview);
 		savedToYours(name.trim() || "Uploaded palette");
-		setFound(null);
+		clear();
 	};
 	return /* @__PURE__ */ jsxs("div", {
 		className: "space-y-1.5",
@@ -4316,6 +4812,7 @@ function PaletteFromFile() {
 				children: ["Palette from an ", kinds]
 			}),
 			/* @__PURE__ */ jsxs("div", {
+				ref: zoneRef,
 				onDragOver: (e) => {
 					e.preventDefault();
 					setDragOver(true);
@@ -4326,8 +4823,64 @@ function PaletteFromFile() {
 					setDragOver(false);
 					read(e.dataTransfer.files?.[0]);
 				},
-				className: `rounded-xl border border-dashed p-3 text-center ${dragOver ? "border-zinc-900 bg-zinc-100" : "border-zinc-300 bg-zinc-50"}`,
+				className: `rounded-xl border border-dashed p-3 text-center transition-shadow motion-reduce:transition-none ${dragOver || flash ? "border-zinc-900 bg-zinc-100" : "border-zinc-300 bg-zinc-50"} ${flash ? "ring-2 ring-zinc-900 ring-offset-1" : ""}`,
 				children: [
+					picture && /* @__PURE__ */ jsxs("figure", {
+						className: "mb-2.5 flex items-center gap-3 rounded-lg border border-zinc-200 bg-white p-2 text-left",
+						children: [
+							picture.url ? /* @__PURE__ */ jsx("img", {
+								src: picture.url,
+								alt: picture.label,
+								className: "h-16 w-24 shrink-0 rounded-md border border-zinc-200 bg-zinc-100 object-contain",
+								onLoad: (e) => {
+									const { naturalWidth: w, naturalHeight: h, src } = e.currentTarget;
+									setPicture((p) => p && p.url === src ? {
+										...p,
+										size: `${w} × ${h}`
+									} : p);
+								}
+							}) : /* @__PURE__ */ jsx("span", {
+								className: "grid h-16 w-24 shrink-0 place-items-center rounded-md border border-zinc-200 bg-zinc-100 font-mono text-xs font-semibold text-zinc-600",
+								"aria-hidden": "true",
+								children: "PDF"
+							}),
+							/* @__PURE__ */ jsxs("figcaption", {
+								role: "status",
+								className: "min-w-0 flex-1 space-y-0.5 text-[11px] text-zinc-600",
+								children: [
+									/* @__PURE__ */ jsxs("span", {
+										className: "flex items-center gap-1 font-medium text-zinc-900",
+										children: [busy ? /* @__PURE__ */ jsx(Loader2, {
+											className: "w-3.5 h-3.5 animate-spin motion-reduce:animate-none",
+											"aria-hidden": "true"
+										}) : /* @__PURE__ */ jsx(CheckCircle2, {
+											className: "w-3.5 h-3.5 text-emerald-800",
+											"aria-hidden": "true"
+										}), picture.pasted ? "Image pasted" : picture.url ? "Image added" : "PDF added"]
+									}),
+									/* @__PURE__ */ jsxs("span", {
+										className: "block truncate",
+										children: [picture.label, picture.size ? ` · ${picture.size}` : ""]
+									}),
+									/* @__PURE__ */ jsx("span", {
+										className: "block",
+										children: busy ? "Reading its colours…" : "Its colours are below."
+									})
+								]
+							}),
+							/* @__PURE__ */ jsx("button", {
+								type: "button",
+								className: `${btn} shrink-0 border-transparent px-1.5`,
+								onClick: clear,
+								"aria-label": `Remove ${picture.label}`,
+								"data-tip": "Remove",
+								children: /* @__PURE__ */ jsx(X, {
+									className: "w-3.5 h-3.5",
+									"aria-hidden": "true"
+								})
+							})
+						]
+					}),
 					/* @__PURE__ */ jsxs("button", {
 						type: "button",
 						className: btn,
@@ -4340,12 +4893,29 @@ function PaletteFromFile() {
 						}) : /* @__PURE__ */ jsx(ImageUp, {
 							className: "w-3.5 h-3.5",
 							"aria-hidden": "true"
-						}), busy ? "Reading colours…" : `Choose ${kinds}…`]
+						}), busy ? "Reading colours…" : picture ? "Choose another…" : `Choose ${kinds}…`]
 					}),
-					/* @__PURE__ */ jsxs("p", {
+					" ",
+					/* @__PURE__ */ jsxs("button", {
+						type: "button",
+						className: btn,
+						onClick: pasteFromClipboard,
+						disabled: busy,
+						"aria-keyshortcuts": IS_MAC ? "Meta+V" : "Control+V",
+						children: [/* @__PURE__ */ jsx(ClipboardPaste, {
+							className: "w-3.5 h-3.5",
+							"aria-hidden": "true"
+						}), picture ? "Paste another" : "Paste image"]
+					}),
+					!picture && /* @__PURE__ */ jsxs("p", {
 						className: "mt-1.5 text-[11px] text-zinc-600",
 						children: [
-							"or drop one here. A mood board, screenshot or photo",
+							"or drop one here, or press ",
+							/* @__PURE__ */ jsx("kbd", {
+								className: "font-mono",
+								children: PASTE_KEYS
+							}),
+							" to paste a screenshot. A mood board, screenshot or photo",
 							loadPdf ? ", or a brand guide PDF," : "",
 							" works."
 						]
@@ -4431,7 +5001,7 @@ function PaletteFromFile() {
 						}), /* @__PURE__ */ jsx("button", {
 							type: "button",
 							className: btn,
-							onClick: () => setFound(null),
+							onClick: clear,
 							children: "Discard"
 						})]
 					})
@@ -5092,7 +5662,7 @@ function AuditBar({ anchorRect, open, hiddenCount, themeIssues, onRecheck, onClo
 }
 //#endregion
 //#region src/panel-css.generated.js
-var panel_css_generated_default = "/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n@layer properties{@supports (display:block){*,:before,:after,::backdrop{--tw-translate-x:0;--tw-translate-y:0;--tw-translate-z:0;--tw-scale-x:1;--tw-scale-y:1;--tw-scale-z:1;--tw-space-y-reverse:0;--tw-border-style:solid;--tw-leading:initial;--tw-font-weight:initial;--tw-tracking:initial;--tw-ordinal:initial;--tw-slashed-zero:initial;--tw-numeric-figure:initial;--tw-numeric-spacing:initial;--tw-numeric-fraction:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-blur:initial;--tw-brightness:initial;--tw-contrast:initial;--tw-grayscale:initial;--tw-hue-rotate:initial;--tw-invert:initial;--tw-opacity:initial;--tw-saturate:initial;--tw-sepia:initial;--tw-drop-shadow:initial;--tw-drop-shadow-color:initial;--tw-drop-shadow-alpha:100%;--tw-drop-shadow-size:initial;--tw-backdrop-blur:initial;--tw-backdrop-brightness:initial;--tw-backdrop-contrast:initial;--tw-backdrop-grayscale:initial;--tw-backdrop-hue-rotate:initial;--tw-backdrop-invert:initial;--tw-backdrop-opacity:initial;--tw-backdrop-saturate:initial;--tw-backdrop-sepia:initial;--tw-duration:initial;--tw-ease:initial}}}@layer theme{:root,:host{--font-sans:-apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", \"Noto Sans\", Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\";--font-mono:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace;--color-red-600:oklch(57.7% .245 27.325);--color-red-700:oklch(50.5% .213 27.518);--color-amber-50:oklch(98.7% .022 95.277);--color-amber-100:oklch(96.2% .059 95.617);--color-amber-200:oklch(92.4% .12 95.746);--color-amber-300:oklch(87.9% .169 91.605);--color-amber-400:oklch(82.8% .189 84.429);--color-amber-700:oklch(55.5% .163 48.998);--color-amber-800:oklch(47.3% .137 46.201);--color-amber-900:oklch(41.4% .112 45.904);--color-amber-950:oklch(27.9% .077 45.635);--color-emerald-50:oklch(97.9% .021 166.113);--color-emerald-800:oklch(43.2% .095 166.913);--color-emerald-900:oklch(37.8% .077 168.94);--color-sky-50:oklch(97.7% .013 236.62);--color-sky-100:oklch(95.1% .026 236.824);--color-sky-900:oklch(39.1% .09 240.876);--color-zinc-50:oklch(98.5% 0 none);--color-zinc-100:oklch(96.7% .001 286.375);--color-zinc-200:oklch(92% .004 286.32);--color-zinc-300:oklch(87.1% .006 286.286);--color-zinc-400:oklch(70.5% .015 286.067);--color-zinc-500:oklch(55.2% .016 285.938);--color-zinc-600:oklch(44.2% .017 285.786);--color-zinc-700:oklch(37% .013 285.805);--color-zinc-800:oklch(27.4% .006 286.033);--color-zinc-900:oklch(21% .006 285.885);--color-white:#fff;--spacing:4px;--text-xs:12px;--text-xs--line-height:calc(1 / .75);--text-sm:14px;--text-sm--line-height:calc(1.25 / .875);--text-base:16px;--text-base--line-height:calc(1.5 / 1);--font-weight-medium:500;--font-weight-semibold:600;--font-weight-bold:700;--tracking-tight:-.025em;--tracking-normal:0em;--tracking-wide:.025em;--leading-snug:1.375;--radius-md:6px;--radius-lg:8px;--radius-xl:12px;--radius-2xl:16px;--ease-in-out:cubic-bezier(.4, 0, .2, 1);--animate-spin:spin 1s linear infinite;--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4, 0, .2, 1);--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono)}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--default-font-family,-apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", \"Noto Sans\", Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring:where(:not(iframe)){outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab, red, red)){::placeholder{color:color-mix(in oklab, currentcolor 50%, transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}.theme-switcher{letter-spacing:normal;color:var(--color-zinc-900);font-family:Inter,ui-sans-serif,system-ui,sans-serif;font-size:16px;line-height:1.5}}@layer components;@layer utilities{.\\@container{container-type:inline-size}.pointer-events-auto{pointer-events:auto}.pointer-events-none{pointer-events:none}.invisible{visibility:hidden}.visible{visibility:visible}.sr-only{clip-path:inset(50%);white-space:nowrap;border-width:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.absolute{position:absolute}.fixed{position:fixed}.relative{position:relative}.sticky{position:sticky}.inset-x-3{inset-inline:calc(var(--spacing) * 3)}.inset-x-5{inset-inline:calc(var(--spacing) * 5)}.inset-y-5{inset-block:calc(var(--spacing) * 5)}.-top-2{top:calc(var(--spacing) * -2)}.-top-\\[6px\\]{top:-6px}.top-0{top:0}.top-1\\.5{top:calc(var(--spacing) * 1.5)}.top-1\\/2{top:50%}.top-5{top:calc(var(--spacing) * 5)}.top-\\[84px\\]{top:84px}.-right-0\\.5{right:calc(var(--spacing) * -.5)}.-right-2{right:calc(var(--spacing) * -2)}.right-1\\.5{right:calc(var(--spacing) * 1.5)}.right-5{right:calc(var(--spacing) * 5)}.right-6{right:calc(var(--spacing) * 6)}.right-full{right:100%}.-bottom-0\\.5{bottom:calc(var(--spacing) * -.5)}.-bottom-2{bottom:calc(var(--spacing) * -2)}.-bottom-\\[6px\\]{bottom:-6px}.bottom-3{bottom:calc(var(--spacing) * 3)}.bottom-5{bottom:calc(var(--spacing) * 5)}.-left-2{left:calc(var(--spacing) * -2)}.left-5{left:calc(var(--spacing) * 5)}.left-full{left:100%}.z-10{z-index:10}.z-20{z-index:20}.z-30{z-index:30}.z-\\[55\\]{z-index:55}.z-\\[56\\]{z-index:56}.z-\\[57\\]{z-index:57}.z-\\[60\\]{z-index:60}.z-\\[61\\]{z-index:61}.z-\\[62\\]{z-index:62}.z-\\[70\\]{z-index:70}.container{width:100%}@media (min-width:640px){.container{max-width:640px}}@media (min-width:768px){.container{max-width:768px}}@media (min-width:1024px){.container{max-width:1024px}}@media (min-width:1280px){.container{max-width:1280px}}@media (min-width:1536px){.container{max-width:1536px}}.mt-0\\.5{margin-top:calc(var(--spacing) * .5)}.mt-1{margin-top:var(--spacing)}.mt-1\\.5{margin-top:calc(var(--spacing) * 1.5)}.mt-2{margin-top:calc(var(--spacing) * 2)}.mt-2\\.5{margin-top:calc(var(--spacing) * 2.5)}.mt-px{margin-top:1px}.-mr-1{margin-right:calc(var(--spacing) * -1)}.mr-2{margin-right:calc(var(--spacing) * 2)}.mb-1{margin-bottom:var(--spacing)}.ml-2{margin-left:calc(var(--spacing) * 2)}.ml-auto{margin-left:auto}.block{display:block}.flex{display:flex}.grid{display:grid}.hidden{display:none}.inline-flex{display:inline-flex}.h-2\\.5{height:calc(var(--spacing) * 2.5)}.h-3{height:calc(var(--spacing) * 3)}.h-3\\.5{height:calc(var(--spacing) * 3.5)}.h-4{height:calc(var(--spacing) * 4)}.h-5{height:calc(var(--spacing) * 5)}.h-6{height:calc(var(--spacing) * 6)}.h-7{height:calc(var(--spacing) * 7)}.h-8{height:calc(var(--spacing) * 8)}.h-9{height:calc(var(--spacing) * 9)}.h-12{height:calc(var(--spacing) * 12)}.h-px{height:1px}.max-h-40{max-height:calc(var(--spacing) * 40)}.min-h-0{min-height:0}.w-2\\.5{width:calc(var(--spacing) * 2.5)}.w-3{width:calc(var(--spacing) * 3)}.w-3\\.5{width:calc(var(--spacing) * 3.5)}.w-4{width:calc(var(--spacing) * 4)}.w-5{width:calc(var(--spacing) * 5)}.w-6{width:calc(var(--spacing) * 6)}.w-7{width:calc(var(--spacing) * 7)}.w-9{width:calc(var(--spacing) * 9)}.w-16{width:calc(var(--spacing) * 16)}.w-\\[5\\.5rem\\]{width:88px}.w-full{width:100%}.max-w-\\[240px\\]{max-width:240px}.max-w-\\[calc\\(100vw-80px\\)\\]{max-width:calc(100vw - 80px)}.max-w-full{max-width:100%}.min-w-0{min-width:0}.flex-1{flex:1}.shrink-0{flex-shrink:0}.-translate-y-1\\/2{--tw-translate-y:calc(calc(1 / 2 * 100%) * -1);translate:var(--tw-translate-x) var(--tw-translate-y)}.scale-110{--tw-scale-x:110%;--tw-scale-y:110%;--tw-scale-z:110%;scale:var(--tw-scale-x) var(--tw-scale-y)}.rotate-45{rotate:45deg}.rotate-90{rotate:90deg}.animate-spin{animation:var(--animate-spin)}.cursor-ew-resize{cursor:ew-resize}.cursor-grabbing{cursor:grabbing}.cursor-nesw-resize{cursor:nesw-resize}.cursor-ns-resize{cursor:ns-resize}.cursor-nwse-resize{cursor:nwse-resize}.cursor-pointer{cursor:pointer}.touch-none{touch-action:none}.resize{resize:both}.list-decimal{list-style-type:decimal}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.place-items-center{place-items:center}.items-center{align-items:center}.items-start{align-items:flex-start}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.gap-0\\.5{gap:calc(var(--spacing) * .5)}.gap-1{gap:var(--spacing)}.gap-1\\.5{gap:calc(var(--spacing) * 1.5)}.gap-2{gap:calc(var(--spacing) * 2)}.gap-2\\.5{gap:calc(var(--spacing) * 2.5)}.gap-3{gap:calc(var(--spacing) * 3)}:where(.space-y-1>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(var(--spacing) * var(--tw-space-y-reverse));margin-block-end:calc(var(--spacing) * calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-1\\.5>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing) * 1.5) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing) * 1.5) * calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-2>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing) * 2) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-3>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing) * 3) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing) * 3) * calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-4>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing) * 4) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse)))}.truncate{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.overflow-auto{overflow:auto}.overflow-hidden{overflow:hidden}.overflow-y-auto{overflow-y:auto}.overscroll-contain{overscroll-behavior:contain}.rounded{border-radius:4px}.rounded-2xl{border-radius:var(--radius-2xl)}.rounded-\\[inherit\\]{border-radius:inherit}.rounded-full{border-radius:3.40282e38px}.rounded-lg{border-radius:var(--radius-lg)}.rounded-md{border-radius:var(--radius-md)}.rounded-xl{border-radius:var(--radius-xl)}.border{border-style:var(--tw-border-style);border-width:1px}.border-2{border-style:var(--tw-border-style);border-width:2px}.border-t{border-top-style:var(--tw-border-style);border-top-width:1px}.border-r{border-right-style:var(--tw-border-style);border-right-width:1px}.border-b{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.border-l{border-left-style:var(--tw-border-style);border-left-width:1px}.border-dashed{--tw-border-style:dashed;border-style:dashed}.border-amber-300{border-color:var(--color-amber-300)}.border-amber-400{border-color:var(--color-amber-400)}.border-red-600{border-color:var(--color-red-600)}.border-transparent{border-color:#0000}.border-white{border-color:var(--color-white)}.border-zinc-200{border-color:var(--color-zinc-200)}.border-zinc-300{border-color:var(--color-zinc-300)}.border-zinc-900{border-color:var(--color-zinc-900)}.bg-amber-50{background-color:var(--color-amber-50)}.bg-amber-100{background-color:var(--color-amber-100)}.bg-amber-400{background-color:var(--color-amber-400)}.bg-emerald-50{background-color:var(--color-emerald-50)}.bg-sky-50{background-color:var(--color-sky-50)}.bg-sky-100{background-color:var(--color-sky-100)}.bg-white{background-color:var(--color-white)}.bg-white\\/90{background-color:#ffffffe6}@supports (color:color-mix(in lab, red, red)){.bg-white\\/90{background-color:color-mix(in oklab, var(--color-white) 90%, transparent)}}.bg-zinc-50{background-color:var(--color-zinc-50)}.bg-zinc-100{background-color:var(--color-zinc-100)}.bg-zinc-200{background-color:var(--color-zinc-200)}.bg-zinc-900{background-color:var(--color-zinc-900)}.p-0\\.5{padding:calc(var(--spacing) * .5)}.p-2\\.5{padding:calc(var(--spacing) * 2.5)}.p-3{padding:calc(var(--spacing) * 3)}.px-1{padding-inline:var(--spacing)}.px-1\\.5{padding-inline:calc(var(--spacing) * 1.5)}.px-2{padding-inline:calc(var(--spacing) * 2)}.px-2\\.5{padding-inline:calc(var(--spacing) * 2.5)}.px-3{padding-inline:calc(var(--spacing) * 3)}.px-4{padding-inline:calc(var(--spacing) * 4)}.py-0\\.5{padding-block:calc(var(--spacing) * .5)}.py-1{padding-block:var(--spacing)}.py-1\\.5{padding-block:calc(var(--spacing) * 1.5)}.py-2{padding-block:calc(var(--spacing) * 2)}.py-2\\.5{padding-block:calc(var(--spacing) * 2.5)}.py-3{padding-block:calc(var(--spacing) * 3)}.py-5{padding-block:calc(var(--spacing) * 5)}.py-6{padding-block:calc(var(--spacing) * 6)}.pr-1\\.5{padding-right:calc(var(--spacing) * 1.5)}.pr-12{padding-right:calc(var(--spacing) * 12)}.pb-4{padding-bottom:calc(var(--spacing) * 4)}.pl-1{padding-left:var(--spacing)}.pl-3{padding-left:calc(var(--spacing) * 3)}.pl-4{padding-left:calc(var(--spacing) * 4)}.text-center{text-align:center}.text-left{text-align:left}.align-super{vertical-align:super}.font-mono{font-family:var(--font-mono)}.text-base{font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height))}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.text-xs{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height))}.text-\\[10px\\]{font-size:10px}.text-\\[11px\\]{font-size:11px}.leading-snug{--tw-leading:var(--leading-snug);line-height:var(--leading-snug)}.font-bold{--tw-font-weight:var(--font-weight-bold);font-weight:var(--font-weight-bold)}.font-medium{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}.font-semibold{--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}.tracking-normal{--tw-tracking:var(--tracking-normal);letter-spacing:var(--tracking-normal)}.tracking-tight{--tw-tracking:var(--tracking-tight);letter-spacing:var(--tracking-tight)}.tracking-wide{--tw-tracking:var(--tracking-wide);letter-spacing:var(--tracking-wide)}.break-all{word-break:break-all}.whitespace-nowrap{white-space:nowrap}.whitespace-pre-wrap{white-space:pre-wrap}.text-amber-700{color:var(--color-amber-700)}.text-amber-800{color:var(--color-amber-800)}.text-amber-900{color:var(--color-amber-900)}.text-amber-950{color:var(--color-amber-950)}.text-emerald-800{color:var(--color-emerald-800)}.text-emerald-900{color:var(--color-emerald-900)}.text-red-700{color:var(--color-red-700)}.text-sky-900{color:var(--color-sky-900)}.text-white{color:var(--color-white)}.text-zinc-300{color:var(--color-zinc-300)}.text-zinc-500{color:var(--color-zinc-500)}.text-zinc-600{color:var(--color-zinc-600)}.text-zinc-700{color:var(--color-zinc-700)}.text-zinc-800{color:var(--color-zinc-800)}.text-zinc-900{color:var(--color-zinc-900)}.normal-case{text-transform:none}.uppercase{text-transform:uppercase}.tabular-nums{--tw-numeric-spacing:tabular-nums;font-variant-numeric:var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,)}.underline{text-decoration-line:underline}.underline-offset-2{text-underline-offset:2px}.accent-zinc-900{accent-color:var(--color-zinc-900)}.opacity-25{opacity:.25}.opacity-70{opacity:.7}.shadow{--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a), 0 1px 2px -1px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-2xl{--tw-shadow:0 25px 50px -12px var(--tw-shadow-color,#00000040);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-lg{--tw-shadow:0 10px 15px -3px var(--tw-shadow-color,#0000001a), 0 4px 6px -4px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-md{--tw-shadow:0 4px 6px -1px var(--tw-shadow-color,#0000001a), 0 2px 4px -2px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-sm{--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a), 0 1px 2px -1px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-xl{--tw-shadow:0 20px 25px -5px var(--tw-shadow-color,#0000001a), 0 8px 10px -6px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.ring-1{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.ring-2{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.ring-white{--tw-ring-color:var(--color-white)}.ring-zinc-900{--tw-ring-color:var(--color-zinc-900)}.invert{--tw-invert:invert(100%);filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}.filter{filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}.backdrop-blur{--tw-backdrop-blur:blur(8px);-webkit-backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,)}.transition-\\[color\\,background-color\\,box-shadow\\,scale\\]{transition-property:color,background-color,box-shadow,scale;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-colors{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-transform{transition-property:transform,translate,scale,rotate;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.duration-700{--tw-duration:.7s;transition-duration:.7s}.ease-in-out{--tw-ease:var(--ease-in-out);transition-timing-function:var(--ease-in-out)}.select-none{-webkit-user-select:none;user-select:none}.placeholder\\:text-zinc-500::placeholder{color:var(--color-zinc-500)}@media (hover:hover){.hover\\:bg-amber-200:hover{background-color:var(--color-amber-200)}.hover\\:bg-white:hover{background-color:var(--color-white)}.hover\\:bg-zinc-50:hover{background-color:var(--color-zinc-50)}.hover\\:bg-zinc-100:hover{background-color:var(--color-zinc-100)}.hover\\:bg-zinc-200:hover{background-color:var(--color-zinc-200)}.hover\\:bg-zinc-400\\/30:hover{background-color:#9f9fa94d}@supports (color:color-mix(in lab, red, red)){.hover\\:bg-zinc-400\\/30:hover{background-color:color-mix(in oklab, var(--color-zinc-400) 30%, transparent)}}.hover\\:bg-zinc-700:hover{background-color:var(--color-zinc-700)}.hover\\:text-amber-950:hover{color:var(--color-amber-950)}.hover\\:text-zinc-900:hover{color:var(--color-zinc-900)}.hover\\:opacity-100:hover{opacity:1}}.focus\\:outline-none:focus{--tw-outline-style:none;outline-style:none}.focus-visible\\:ring-2:focus-visible{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.focus-visible\\:ring-white:focus-visible{--tw-ring-color:var(--color-white)}.focus-visible\\:ring-zinc-900:focus-visible{--tw-ring-color:var(--color-zinc-900)}.focus-visible\\:ring-offset-1:focus-visible{--tw-ring-offset-width:1px;--tw-ring-offset-shadow:var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)}.focus-visible\\:ring-offset-2:focus-visible{--tw-ring-offset-width:2px;--tw-ring-offset-shadow:var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)}.focus-visible\\:outline-none:focus-visible{--tw-outline-style:none;outline-style:none}.focus-visible\\:ring-inset:focus-visible{--tw-ring-inset:inset}.disabled\\:opacity-50:disabled{opacity:.5}@media (prefers-reduced-motion:reduce){.motion-reduce\\:animate-none{animation:none}.motion-reduce\\:transition-none{transition-property:none}}@media (min-width:1200px){.min-\\[1200px\\]\\:top-\\[27px\\]{top:27px}.min-\\[1200px\\]\\:right-4{right:calc(var(--spacing) * 4)}}@media (min-width:640px){.sm\\:inline{display:inline}}@container (min-width:380px){.\\@min-\\[380px\\]\\:h-10{height:calc(var(--spacing) * 10)}.\\@min-\\[380px\\]\\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.\\@min-\\[380px\\]\\:flex-row{flex-direction:row}.\\@min-\\[380px\\]\\:justify-start{justify-content:flex-start}.\\@min-\\[380px\\]\\:gap-1\\.5{gap:calc(var(--spacing) * 1.5)}}@container (min-width:440px){.\\@min-\\[440px\\]\\:inline{display:inline}.\\@min-\\[440px\\]\\:px-2\\.5{padding-inline:calc(var(--spacing) * 2.5)}}@container (min-width:520px){.\\@min-\\[520px\\]\\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}}}:host{all:initial}.cbm-dark{color-scheme:dark;--color-white:oklch(21% .006 285.885);--color-zinc-50:oklch(24.5% .006 286);--color-zinc-100:oklch(27.4% .006 286.033);--color-zinc-200:oklch(33% .01 285.9);--color-zinc-300:oklch(42% .015 285.8);--color-zinc-400:oklch(52% .016 285.9);--color-zinc-500:oklch(68% .015 286.067);--color-zinc-600:oklch(74% .012 286);--color-zinc-700:oklch(82% .008 286.2);--color-zinc-800:oklch(88% .006 286.3);--color-zinc-900:oklch(96.7% .001 286.375);--color-zinc-950:oklch(98.5% 0 0);--color-amber-50:oklch(27.9% .077 45.635);--color-amber-100:oklch(33% .09 46);--color-amber-200:oklch(41.4% .112 45.904);--color-amber-300:oklch(55.5% .163 48.998);--color-amber-700:oklch(87.9% .169 91.605);--color-amber-800:oklch(92.4% .12 95.746);--color-amber-900:oklch(96.2% .059 95.617);--color-amber-950:oklch(98.7% .022 95.277);--color-emerald-50:oklch(26.2% .051 172.552);--color-emerald-800:oklch(90.5% .093 164.15);--color-emerald-900:oklch(95% .052 163.051);--color-sky-50:oklch(29.3% .066 243.157);--color-sky-100:oklch(39.1% .09 240.876);--color-sky-900:oklch(95.1% .026 236.824);--color-red-600:oklch(70.4% .191 22.216);--color-red-700:oklch(80.8% .114 19.571)}.cbm-dark *{--tw-ring-offset-color:oklch(21% .006 285.885)}.theme-scroll{--cbm-thumb:var(--color-primary,oklch(55.2% .016 285.938))}@supports (color:color-mix(in lab, red, red)){.theme-scroll{--cbm-thumb:color-mix(in srgb, var(--color-primary,var(--color-zinc-500)) 55%, var(--color-white))}}.theme-scroll{--cbm-thumb-hover:var(--color-primary,oklch(55.2% .016 285.938))}@supports (color:color-mix(in lab, red, red)){.theme-scroll{--cbm-thumb-hover:color-mix(in srgb, var(--color-primary,var(--color-zinc-500)) 80%, var(--color-white))}}.theme-scroll{scrollbar-width:thin;scrollbar-color:var(--cbm-thumb) transparent}.theme-scroll:hover{scrollbar-color:var(--cbm-thumb-hover) transparent}.theme-scroll::-webkit-scrollbar{width:6px}.theme-scroll::-webkit-scrollbar-track{background:0 0}.theme-scroll::-webkit-scrollbar-thumb{background:var(--cbm-thumb);border-radius:9999px}.theme-scroll:hover::-webkit-scrollbar-thumb{background:var(--cbm-thumb-hover)}.theme-panel{transform-origin:100% 0;animation:.16s ease-out theme-panel-in}@keyframes theme-panel-in{0%{opacity:0;transform:translateY(-6px)scale(.98)}}.theme-hint{animation:.12s ease-out theme-hint-in}.theme-toast{animation:.18s ease-out theme-toast-in}@keyframes theme-toast-in{0%{opacity:0;transform:translateY(8px)}}@keyframes theme-hint-in{0%{opacity:0}}@media (prefers-reduced-motion:reduce){.theme-panel,.theme-hint,.theme-toast{animation:none}}.theme-panel summary{list-style:none}.theme-panel summary::-webkit-details-marker{display:none}.theme-panel details[open]>summary .theme-chevron{transform:rotate(90deg)}@keyframes spin{to{transform:rotate(360deg)}}";
+var panel_css_generated_default = "/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n@layer properties{@supports (display:block){*,:before,:after,::backdrop{--tw-translate-x:0;--tw-translate-y:0;--tw-translate-z:0;--tw-scale-x:1;--tw-scale-y:1;--tw-scale-z:1;--tw-space-y-reverse:0;--tw-border-style:solid;--tw-leading:initial;--tw-font-weight:initial;--tw-tracking:initial;--tw-ordinal:initial;--tw-slashed-zero:initial;--tw-numeric-figure:initial;--tw-numeric-spacing:initial;--tw-numeric-fraction:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-blur:initial;--tw-brightness:initial;--tw-contrast:initial;--tw-grayscale:initial;--tw-hue-rotate:initial;--tw-invert:initial;--tw-opacity:initial;--tw-saturate:initial;--tw-sepia:initial;--tw-drop-shadow:initial;--tw-drop-shadow-color:initial;--tw-drop-shadow-alpha:100%;--tw-drop-shadow-size:initial;--tw-backdrop-blur:initial;--tw-backdrop-brightness:initial;--tw-backdrop-contrast:initial;--tw-backdrop-grayscale:initial;--tw-backdrop-hue-rotate:initial;--tw-backdrop-invert:initial;--tw-backdrop-opacity:initial;--tw-backdrop-saturate:initial;--tw-backdrop-sepia:initial;--tw-duration:initial;--tw-ease:initial}}}@layer theme{:root,:host{--font-sans:-apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", \"Noto Sans\", Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\";--font-mono:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace;--color-red-600:oklch(57.7% .245 27.325);--color-red-700:oklch(50.5% .213 27.518);--color-amber-50:oklch(98.7% .022 95.277);--color-amber-100:oklch(96.2% .059 95.617);--color-amber-200:oklch(92.4% .12 95.746);--color-amber-300:oklch(87.9% .169 91.605);--color-amber-400:oklch(82.8% .189 84.429);--color-amber-700:oklch(55.5% .163 48.998);--color-amber-800:oklch(47.3% .137 46.201);--color-amber-900:oklch(41.4% .112 45.904);--color-amber-950:oklch(27.9% .077 45.635);--color-emerald-50:oklch(97.9% .021 166.113);--color-emerald-800:oklch(43.2% .095 166.913);--color-emerald-900:oklch(37.8% .077 168.94);--color-sky-50:oklch(97.7% .013 236.62);--color-sky-100:oklch(95.1% .026 236.824);--color-sky-900:oklch(39.1% .09 240.876);--color-zinc-50:oklch(98.5% 0 none);--color-zinc-100:oklch(96.7% .001 286.375);--color-zinc-200:oklch(92% .004 286.32);--color-zinc-300:oklch(87.1% .006 286.286);--color-zinc-400:oklch(70.5% .015 286.067);--color-zinc-500:oklch(55.2% .016 285.938);--color-zinc-600:oklch(44.2% .017 285.786);--color-zinc-700:oklch(37% .013 285.805);--color-zinc-800:oklch(27.4% .006 286.033);--color-zinc-900:oklch(21% .006 285.885);--color-white:#fff;--spacing:4px;--text-xs:12px;--text-xs--line-height:calc(1 / .75);--text-sm:14px;--text-sm--line-height:calc(1.25 / .875);--text-base:16px;--text-base--line-height:calc(1.5 / 1);--font-weight-medium:500;--font-weight-semibold:600;--font-weight-bold:700;--tracking-tight:-.025em;--tracking-normal:0em;--tracking-wide:.025em;--leading-snug:1.375;--radius-md:6px;--radius-lg:8px;--radius-xl:12px;--radius-2xl:16px;--ease-in-out:cubic-bezier(.4, 0, .2, 1);--animate-spin:spin 1s linear infinite;--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4, 0, .2, 1);--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono)}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--default-font-family,-apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", \"Noto Sans\", Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring:where(:not(iframe)){outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab, red, red)){::placeholder{color:color-mix(in oklab, currentcolor 50%, transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}.theme-switcher{letter-spacing:normal;color:var(--color-zinc-900);font-family:Inter,ui-sans-serif,system-ui,sans-serif;font-size:16px;line-height:1.5}}@layer components;@layer utilities{.\\@container{container-type:inline-size}.pointer-events-auto{pointer-events:auto}.pointer-events-none{pointer-events:none}.invisible{visibility:hidden}.visible{visibility:visible}.sr-only{clip-path:inset(50%);white-space:nowrap;border-width:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.absolute{position:absolute}.fixed{position:fixed}.relative{position:relative}.sticky{position:sticky}.inset-0{inset:0}.inset-x-3{inset-inline:calc(var(--spacing) * 3)}.inset-x-5{inset-inline:calc(var(--spacing) * 5)}.inset-y-5{inset-block:calc(var(--spacing) * 5)}.-top-2{top:calc(var(--spacing) * -2)}.-top-\\[6px\\]{top:-6px}.top-0{top:0}.top-1\\.5{top:calc(var(--spacing) * 1.5)}.top-1\\/2{top:50%}.top-5{top:calc(var(--spacing) * 5)}.top-\\[84px\\]{top:84px}.-right-0\\.5{right:calc(var(--spacing) * -.5)}.-right-2{right:calc(var(--spacing) * -2)}.right-1\\.5{right:calc(var(--spacing) * 1.5)}.right-5{right:calc(var(--spacing) * 5)}.right-6{right:calc(var(--spacing) * 6)}.right-full{right:100%}.-bottom-0\\.5{bottom:calc(var(--spacing) * -.5)}.-bottom-2{bottom:calc(var(--spacing) * -2)}.-bottom-\\[6px\\]{bottom:-6px}.bottom-3{bottom:calc(var(--spacing) * 3)}.bottom-5{bottom:calc(var(--spacing) * 5)}.-left-2{left:calc(var(--spacing) * -2)}.left-5{left:calc(var(--spacing) * 5)}.left-full{left:100%}.z-10{z-index:10}.z-20{z-index:20}.z-30{z-index:30}.z-\\[55\\]{z-index:55}.z-\\[56\\]{z-index:56}.z-\\[57\\]{z-index:57}.z-\\[60\\]{z-index:60}.z-\\[61\\]{z-index:61}.z-\\[62\\]{z-index:62}.z-\\[70\\]{z-index:70}.container{width:100%}@media (min-width:640px){.container{max-width:640px}}@media (min-width:768px){.container{max-width:768px}}@media (min-width:1024px){.container{max-width:1024px}}@media (min-width:1280px){.container{max-width:1280px}}@media (min-width:1536px){.container{max-width:1536px}}.mt-0\\.5{margin-top:calc(var(--spacing) * .5)}.mt-1{margin-top:var(--spacing)}.mt-1\\.5{margin-top:calc(var(--spacing) * 1.5)}.mt-2{margin-top:calc(var(--spacing) * 2)}.mt-2\\.5{margin-top:calc(var(--spacing) * 2.5)}.mt-px{margin-top:1px}.-mr-1{margin-right:calc(var(--spacing) * -1)}.mr-2{margin-right:calc(var(--spacing) * 2)}.mb-1{margin-bottom:var(--spacing)}.mb-2\\.5{margin-bottom:calc(var(--spacing) * 2.5)}.ml-2{margin-left:calc(var(--spacing) * 2)}.ml-auto{margin-left:auto}.block{display:block}.flex{display:flex}.grid{display:grid}.hidden{display:none}.inline-flex{display:inline-flex}.h-2\\.5{height:calc(var(--spacing) * 2.5)}.h-3{height:calc(var(--spacing) * 3)}.h-3\\.5{height:calc(var(--spacing) * 3.5)}.h-4{height:calc(var(--spacing) * 4)}.h-5{height:calc(var(--spacing) * 5)}.h-6{height:calc(var(--spacing) * 6)}.h-7{height:calc(var(--spacing) * 7)}.h-8{height:calc(var(--spacing) * 8)}.h-9{height:calc(var(--spacing) * 9)}.h-12{height:calc(var(--spacing) * 12)}.h-16{height:calc(var(--spacing) * 16)}.h-px{height:1px}.max-h-40{max-height:calc(var(--spacing) * 40)}.min-h-0{min-height:0}.w-2\\.5{width:calc(var(--spacing) * 2.5)}.w-3{width:calc(var(--spacing) * 3)}.w-3\\.5{width:calc(var(--spacing) * 3.5)}.w-4{width:calc(var(--spacing) * 4)}.w-5{width:calc(var(--spacing) * 5)}.w-6{width:calc(var(--spacing) * 6)}.w-7{width:calc(var(--spacing) * 7)}.w-9{width:calc(var(--spacing) * 9)}.w-16{width:calc(var(--spacing) * 16)}.w-24{width:calc(var(--spacing) * 24)}.w-\\[5\\.5rem\\]{width:88px}.w-full{width:100%}.max-w-\\[240px\\]{max-width:240px}.max-w-\\[calc\\(100vw-80px\\)\\]{max-width:calc(100vw - 80px)}.max-w-full{max-width:100%}.min-w-0{min-width:0}.flex-1{flex:1}.shrink-0{flex-shrink:0}.-translate-y-1\\/2{--tw-translate-y:calc(calc(1 / 2 * 100%) * -1);translate:var(--tw-translate-x) var(--tw-translate-y)}.scale-110{--tw-scale-x:110%;--tw-scale-y:110%;--tw-scale-z:110%;scale:var(--tw-scale-x) var(--tw-scale-y)}.rotate-45{rotate:45deg}.rotate-90{rotate:90deg}.animate-spin{animation:var(--animate-spin)}.cursor-ew-resize{cursor:ew-resize}.cursor-grabbing{cursor:grabbing}.cursor-nesw-resize{cursor:nesw-resize}.cursor-ns-resize{cursor:ns-resize}.cursor-nwse-resize{cursor:nwse-resize}.cursor-pointer{cursor:pointer}.touch-none{touch-action:none}.resize{resize:both}.scroll-mt-3{scroll-margin-top:calc(var(--spacing) * 3)}.list-decimal{list-style-type:decimal}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.place-items-center{place-items:center}.items-center{align-items:center}.items-start{align-items:flex-start}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.gap-0\\.5{gap:calc(var(--spacing) * .5)}.gap-1{gap:var(--spacing)}.gap-1\\.5{gap:calc(var(--spacing) * 1.5)}.gap-2{gap:calc(var(--spacing) * 2)}.gap-2\\.5{gap:calc(var(--spacing) * 2.5)}.gap-3{gap:calc(var(--spacing) * 3)}:where(.space-y-0\\.5>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing) * .5) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing) * .5) * calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-1>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(var(--spacing) * var(--tw-space-y-reverse));margin-block-end:calc(var(--spacing) * calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-1\\.5>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing) * 1.5) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing) * 1.5) * calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-2>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing) * 2) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-3>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing) * 3) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing) * 3) * calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-4>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing) * 4) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse)))}.truncate{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.overflow-auto{overflow:auto}.overflow-hidden{overflow:hidden}.overflow-y-auto{overflow-y:auto}.overscroll-contain{overscroll-behavior:contain}.rounded{border-radius:4px}.rounded-2xl{border-radius:var(--radius-2xl)}.rounded-\\[inherit\\]{border-radius:inherit}.rounded-full{border-radius:3.40282e38px}.rounded-lg{border-radius:var(--radius-lg)}.rounded-md{border-radius:var(--radius-md)}.rounded-xl{border-radius:var(--radius-xl)}.border{border-style:var(--tw-border-style);border-width:1px}.border-2{border-style:var(--tw-border-style);border-width:2px}.border-t{border-top-style:var(--tw-border-style);border-top-width:1px}.border-r{border-right-style:var(--tw-border-style);border-right-width:1px}.border-b{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.border-l{border-left-style:var(--tw-border-style);border-left-width:1px}.border-dashed{--tw-border-style:dashed;border-style:dashed}.border-amber-300{border-color:var(--color-amber-300)}.border-amber-400{border-color:var(--color-amber-400)}.border-red-600{border-color:var(--color-red-600)}.border-transparent{border-color:#0000}.border-white{border-color:var(--color-white)}.border-zinc-200{border-color:var(--color-zinc-200)}.border-zinc-300{border-color:var(--color-zinc-300)}.border-zinc-900{border-color:var(--color-zinc-900)}.bg-amber-50{background-color:var(--color-amber-50)}.bg-amber-100{background-color:var(--color-amber-100)}.bg-amber-400{background-color:var(--color-amber-400)}.bg-emerald-50{background-color:var(--color-emerald-50)}.bg-sky-50{background-color:var(--color-sky-50)}.bg-sky-100{background-color:var(--color-sky-100)}.bg-white{background-color:var(--color-white)}.bg-white\\/90{background-color:#ffffffe6}@supports (color:color-mix(in lab, red, red)){.bg-white\\/90{background-color:color-mix(in oklab, var(--color-white) 90%, transparent)}}.bg-zinc-50{background-color:var(--color-zinc-50)}.bg-zinc-100{background-color:var(--color-zinc-100)}.bg-zinc-200{background-color:var(--color-zinc-200)}.bg-zinc-900{background-color:var(--color-zinc-900)}.object-contain{object-fit:contain}.p-0\\.5{padding:calc(var(--spacing) * .5)}.p-2{padding:calc(var(--spacing) * 2)}.p-2\\.5{padding:calc(var(--spacing) * 2.5)}.p-3{padding:calc(var(--spacing) * 3)}.px-1{padding-inline:var(--spacing)}.px-1\\.5{padding-inline:calc(var(--spacing) * 1.5)}.px-2{padding-inline:calc(var(--spacing) * 2)}.px-2\\.5{padding-inline:calc(var(--spacing) * 2.5)}.px-3{padding-inline:calc(var(--spacing) * 3)}.px-4{padding-inline:calc(var(--spacing) * 4)}.py-0\\.5{padding-block:calc(var(--spacing) * .5)}.py-1{padding-block:var(--spacing)}.py-1\\.5{padding-block:calc(var(--spacing) * 1.5)}.py-2{padding-block:calc(var(--spacing) * 2)}.py-2\\.5{padding-block:calc(var(--spacing) * 2.5)}.py-3{padding-block:calc(var(--spacing) * 3)}.py-5{padding-block:calc(var(--spacing) * 5)}.py-6{padding-block:calc(var(--spacing) * 6)}.pr-1\\.5{padding-right:calc(var(--spacing) * 1.5)}.pr-12{padding-right:calc(var(--spacing) * 12)}.pb-4{padding-bottom:calc(var(--spacing) * 4)}.pl-1{padding-left:var(--spacing)}.pl-3{padding-left:calc(var(--spacing) * 3)}.pl-4{padding-left:calc(var(--spacing) * 4)}.text-center{text-align:center}.text-left{text-align:left}.align-super{vertical-align:super}.font-mono{font-family:var(--font-mono)}.text-base{font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height))}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.text-xs{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height))}.text-\\[10px\\]{font-size:10px}.text-\\[11px\\]{font-size:11px}.leading-snug{--tw-leading:var(--leading-snug);line-height:var(--leading-snug)}.font-bold{--tw-font-weight:var(--font-weight-bold);font-weight:var(--font-weight-bold)}.font-medium{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}.font-semibold{--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}.tracking-normal{--tw-tracking:var(--tracking-normal);letter-spacing:var(--tracking-normal)}.tracking-tight{--tw-tracking:var(--tracking-tight);letter-spacing:var(--tracking-tight)}.tracking-wide{--tw-tracking:var(--tracking-wide);letter-spacing:var(--tracking-wide)}.break-all{word-break:break-all}.whitespace-nowrap{white-space:nowrap}.whitespace-pre-wrap{white-space:pre-wrap}.text-amber-700{color:var(--color-amber-700)}.text-amber-800{color:var(--color-amber-800)}.text-amber-900{color:var(--color-amber-900)}.text-amber-950{color:var(--color-amber-950)}.text-emerald-800{color:var(--color-emerald-800)}.text-emerald-900{color:var(--color-emerald-900)}.text-red-700{color:var(--color-red-700)}.text-sky-900{color:var(--color-sky-900)}.text-white{color:var(--color-white)}.text-zinc-300{color:var(--color-zinc-300)}.text-zinc-500{color:var(--color-zinc-500)}.text-zinc-600{color:var(--color-zinc-600)}.text-zinc-700{color:var(--color-zinc-700)}.text-zinc-800{color:var(--color-zinc-800)}.text-zinc-900{color:var(--color-zinc-900)}.normal-case{text-transform:none}.uppercase{text-transform:uppercase}.tabular-nums{--tw-numeric-spacing:tabular-nums;font-variant-numeric:var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,)}.underline{text-decoration-line:underline}.underline-offset-2{text-underline-offset:2px}.accent-zinc-900{accent-color:var(--color-zinc-900)}.opacity-25{opacity:.25}.opacity-70{opacity:.7}.shadow{--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a), 0 1px 2px -1px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-2xl{--tw-shadow:0 25px 50px -12px var(--tw-shadow-color,#00000040);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-lg{--tw-shadow:0 10px 15px -3px var(--tw-shadow-color,#0000001a), 0 4px 6px -4px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-md{--tw-shadow:0 4px 6px -1px var(--tw-shadow-color,#0000001a), 0 2px 4px -2px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-sm{--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a), 0 1px 2px -1px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-xl{--tw-shadow:0 20px 25px -5px var(--tw-shadow-color,#0000001a), 0 8px 10px -6px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.ring-1{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.ring-2{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.ring-white{--tw-ring-color:var(--color-white)}.ring-zinc-900{--tw-ring-color:var(--color-zinc-900)}.ring-offset-1{--tw-ring-offset-width:1px;--tw-ring-offset-shadow:var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)}.invert{--tw-invert:invert(100%);filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}.filter{filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}.backdrop-blur{--tw-backdrop-blur:blur(8px);-webkit-backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,)}.transition-\\[color\\,background-color\\,box-shadow\\,scale\\]{transition-property:color,background-color,box-shadow,scale;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-colors{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-shadow{transition-property:box-shadow;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-transform{transition-property:transform,translate,scale,rotate;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.duration-700{--tw-duration:.7s;transition-duration:.7s}.ease-in-out{--tw-ease:var(--ease-in-out);transition-timing-function:var(--ease-in-out)}.select-none{-webkit-user-select:none;user-select:none}.placeholder\\:text-zinc-500::placeholder{color:var(--color-zinc-500)}@media (hover:hover){.hover\\:bg-amber-200:hover{background-color:var(--color-amber-200)}.hover\\:bg-white:hover{background-color:var(--color-white)}.hover\\:bg-zinc-50:hover{background-color:var(--color-zinc-50)}.hover\\:bg-zinc-100:hover{background-color:var(--color-zinc-100)}.hover\\:bg-zinc-200:hover{background-color:var(--color-zinc-200)}.hover\\:bg-zinc-400\\/30:hover{background-color:#9f9fa94d}@supports (color:color-mix(in lab, red, red)){.hover\\:bg-zinc-400\\/30:hover{background-color:color-mix(in oklab, var(--color-zinc-400) 30%, transparent)}}.hover\\:bg-zinc-700:hover{background-color:var(--color-zinc-700)}.hover\\:text-amber-950:hover{color:var(--color-amber-950)}.hover\\:text-zinc-900:hover{color:var(--color-zinc-900)}.hover\\:opacity-100:hover{opacity:1}}.focus\\:outline-none:focus{--tw-outline-style:none;outline-style:none}.focus-visible\\:ring-2:focus-visible{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.focus-visible\\:ring-white:focus-visible{--tw-ring-color:var(--color-white)}.focus-visible\\:ring-zinc-900:focus-visible{--tw-ring-color:var(--color-zinc-900)}.focus-visible\\:ring-offset-1:focus-visible{--tw-ring-offset-width:1px;--tw-ring-offset-shadow:var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)}.focus-visible\\:ring-offset-2:focus-visible{--tw-ring-offset-width:2px;--tw-ring-offset-shadow:var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)}.focus-visible\\:outline-none:focus-visible{--tw-outline-style:none;outline-style:none}.focus-visible\\:ring-inset:focus-visible{--tw-ring-inset:inset}.disabled\\:opacity-50:disabled{opacity:.5}@media (prefers-reduced-motion:reduce){.motion-reduce\\:animate-none{animation:none}.motion-reduce\\:transition-none{transition-property:none}}@media (min-width:1200px){.min-\\[1200px\\]\\:top-\\[27px\\]{top:27px}.min-\\[1200px\\]\\:right-4{right:calc(var(--spacing) * 4)}}@media (min-width:640px){.sm\\:inline{display:inline}}@container (min-width:380px){.\\@min-\\[380px\\]\\:h-10{height:calc(var(--spacing) * 10)}.\\@min-\\[380px\\]\\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.\\@min-\\[380px\\]\\:flex-row{flex-direction:row}.\\@min-\\[380px\\]\\:justify-start{justify-content:flex-start}.\\@min-\\[380px\\]\\:gap-1\\.5{gap:calc(var(--spacing) * 1.5)}}@container (min-width:440px){.\\@min-\\[440px\\]\\:inline{display:inline}.\\@min-\\[440px\\]\\:px-2\\.5{padding-inline:calc(var(--spacing) * 2.5)}}@container (min-width:500px){.\\@min-\\[500px\\]\\:inline{display:inline}.\\@min-\\[500px\\]\\:px-2{padding-inline:calc(var(--spacing) * 2)}}@container (min-width:520px){.\\@min-\\[520px\\]\\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}}}:host{all:initial}.cbm-dark{color-scheme:dark;--color-white:oklch(21% .006 285.885);--color-zinc-50:oklch(24.5% .006 286);--color-zinc-100:oklch(27.4% .006 286.033);--color-zinc-200:oklch(33% .01 285.9);--color-zinc-300:oklch(42% .015 285.8);--color-zinc-400:oklch(52% .016 285.9);--color-zinc-500:oklch(68% .015 286.067);--color-zinc-600:oklch(74% .012 286);--color-zinc-700:oklch(82% .008 286.2);--color-zinc-800:oklch(88% .006 286.3);--color-zinc-900:oklch(96.7% .001 286.375);--color-zinc-950:oklch(98.5% 0 0);--color-amber-50:oklch(27.9% .077 45.635);--color-amber-100:oklch(33% .09 46);--color-amber-200:oklch(41.4% .112 45.904);--color-amber-300:oklch(55.5% .163 48.998);--color-amber-700:oklch(87.9% .169 91.605);--color-amber-800:oklch(92.4% .12 95.746);--color-amber-900:oklch(96.2% .059 95.617);--color-amber-950:oklch(98.7% .022 95.277);--color-emerald-50:oklch(26.2% .051 172.552);--color-emerald-800:oklch(90.5% .093 164.15);--color-emerald-900:oklch(95% .052 163.051);--color-sky-50:oklch(29.3% .066 243.157);--color-sky-100:oklch(39.1% .09 240.876);--color-sky-900:oklch(95.1% .026 236.824);--color-red-600:oklch(70.4% .191 22.216);--color-red-700:oklch(80.8% .114 19.571)}.cbm-dark *{--tw-ring-offset-color:oklch(21% .006 285.885)}.theme-scroll{--cbm-thumb:var(--color-primary,oklch(55.2% .016 285.938))}@supports (color:color-mix(in lab, red, red)){.theme-scroll{--cbm-thumb:color-mix(in srgb, var(--color-primary,var(--color-zinc-500)) 55%, var(--color-white))}}.theme-scroll{--cbm-thumb-hover:var(--color-primary,oklch(55.2% .016 285.938))}@supports (color:color-mix(in lab, red, red)){.theme-scroll{--cbm-thumb-hover:color-mix(in srgb, var(--color-primary,var(--color-zinc-500)) 80%, var(--color-white))}}.theme-scroll{scrollbar-width:thin;scrollbar-color:var(--cbm-thumb) transparent}.theme-scroll:hover{scrollbar-color:var(--cbm-thumb-hover) transparent}.theme-scroll::-webkit-scrollbar{width:6px}.theme-scroll::-webkit-scrollbar-track{background:0 0}.theme-scroll::-webkit-scrollbar-thumb{background:var(--cbm-thumb);border-radius:9999px}.theme-scroll:hover::-webkit-scrollbar-thumb{background:var(--cbm-thumb-hover)}.theme-panel{transform-origin:100% 0;animation:.16s ease-out theme-panel-in}@keyframes theme-panel-in{0%{opacity:0;transform:translateY(-6px)scale(.98)}}.theme-hint{animation:.12s ease-out theme-hint-in}.theme-toast{animation:.18s ease-out theme-toast-in}@keyframes theme-toast-in{0%{opacity:0;transform:translateY(8px)}}@keyframes theme-hint-in{0%{opacity:0}}.theme-arrive{animation:.62s cubic-bezier(.34,1.56,.64,1) both theme-arrive}@keyframes theme-arrive{0%{opacity:0;transform:scale(.2)rotate(-45deg)}60%{opacity:1;transform:scale(1.16)rotate(8deg)}to{transform:scale(1)rotate(0)}}.theme-burst-piece{line-height:0;animation:.95s cubic-bezier(.15,.75,.3,1) both theme-burst-piece;display:block;position:absolute;top:50%;left:50%}@keyframes theme-burst-piece{0%{opacity:0;transform:translate(-50%, -50%) rotate(var(--r)) scale(.3)}12%{opacity:1}65%{opacity:1}to{opacity:0;transform:translate(calc(-50% + var(--x)), calc(-50% + var(--y))) rotate(calc(var(--r) + 150deg)) scale(1)}}.theme-piece-dot{background:currentColor;border-radius:9999px;width:6px;height:6px}.theme-piece-dash{background:currentColor;border-radius:9999px;width:10px;height:3px}@media (prefers-reduced-motion:reduce){.theme-panel,.theme-hint,.theme-toast{animation:none}.theme-arrive{animation:.3s ease-out both theme-hint-in}.theme-burst{display:none}}.theme-panel summary{list-style:none}.theme-panel summary::-webkit-details-marker{display:none}.theme-panel details[open]>summary .theme-chevron{transform:rotate(90deg)}@keyframes spin{to{transform:rotate(360deg)}}";
 //#endregion
 //#region src/ThemeSwitcher.jsx
 var CORNERS = {
@@ -5111,6 +5681,8 @@ var MIN_PANEL_HEIGHT = 260;
 var DRAG_THRESHOLD = 5;
 var HINT_DELAY = 100;
 var DOT_INTERVAL = 1500;
+var INTRO_DELAY = 900;
+var BURST_TIME = 1100;
 var FOCUSABLE = "a[href], button:not([disabled]), input:not([disabled]), textarea:not([disabled]), select:not([disabled]), summary, [tabindex]:not([tabindex=\"-1\"])";
 /** Tag of the element that hosts the switcher's shadow root. The site scan skips it. */
 var HOST_TAG = "colorsbymax-root";
@@ -5139,9 +5711,32 @@ function ThemeSwitcher() {
 	return mount && createPortal(/* @__PURE__ */ jsx(Switcher, {}), mount);
 }
 function Switcher() {
-	const { issues, storageKey, tokens, active, themes, selectTheme, position: requested, setLogoColouring } = useTheme();
+	const { issues, storageKey, tokens, position: requested, setLogoColouring, intro, mode, modeSetting, setMode } = useTheme();
 	const position = CORNERS[requested] ? requested : "bottom-right";
 	const [open, setOpen] = useState(false);
+	const [arrived, setArrived] = useState(!intro);
+	const [entering, setEntering] = useState(false);
+	const [burst, setBurst] = useState(0);
+	const celebrate = () => setBurst((n) => n + 1);
+	useEffect(() => {
+		if (arrived) return;
+		const timer = setTimeout(() => {
+			setArrived(true);
+			setEntering(true);
+			celebrate();
+		}, INTRO_DELAY);
+		return () => clearTimeout(timer);
+	}, []);
+	const [bursting, setBursting] = useState(false);
+	useEffect(() => {
+		if (!burst) return;
+		setBursting(true);
+		const timer = setTimeout(() => {
+			setBursting(false);
+			setEntering(false);
+		}, BURST_TIME);
+		return () => clearTimeout(timer);
+	}, [burst]);
 	const [settings, setSettings] = useState(() => loadSettings(storageKey));
 	useEffect(() => setLogoColouring(settings.colourLogo), [settings.colourLogo, setLogoColouring]);
 	const [auditOn, setAuditOn] = useState(false);
@@ -5179,8 +5774,6 @@ function Switcher() {
 		window.addEventListener("keydown", onKey);
 		return () => window.removeEventListener("keydown", onKey);
 	}, []);
-	const prefersDark = usePrefersDark();
-	const mode = settings.mode === "system" ? prefersDark ? "dark" : "light" : settings.mode;
 	const buttonRef = useRef(null);
 	const panelRef = useRef(null);
 	const layerRef = useRef(null);
@@ -5248,6 +5841,7 @@ function Switcher() {
 	};
 	useEffect(() => {
 		const button = buttonRef.current;
+		if (!button) return;
 		const onEnter = (e) => {
 			if (e.pointerType === "touch" || e.buttons || open || !settings.draggable) return;
 			clearTimeout(hintTimer.current);
@@ -5264,7 +5858,12 @@ function Switcher() {
 			button.removeEventListener("pointerenter", onEnter);
 			button.removeEventListener("pointerleave", onLeave);
 		};
-	}, [open, settings.draggable]);
+	}, [
+		open,
+		settings.draggable,
+		arrived,
+		settings.hideButton
+	]);
 	const close = useCallback(() => {
 		setOpen(false);
 		buttonRef.current?.focus();
@@ -5289,7 +5888,6 @@ function Switcher() {
 		if (!d || d.id !== e.pointerId) return;
 		if (!(e.buttons & 1)) return onDragEnd(e);
 		if (!d.moved && Math.hypot(e.clientX - d.x, e.clientY - d.y) < DRAG_THRESHOLD) return;
-		if (!d.moved) setOpen(false);
 		d.moved = true;
 		d.point = clampToViewport({
 			left: e.clientX - d.dx,
@@ -5313,11 +5911,17 @@ function Switcher() {
 		saveButtonPosition(storageKey, null);
 	};
 	const storeSettings = (next) => {
-		saveSettings(storageKey, next);
+		saveSettings(storageKey, {
+			...next,
+			mode: loadSettings(storageKey).mode
+		});
 		return next;
 	};
 	const settingsApi = {
-		settings,
+		settings: {
+			...settings,
+			mode: modeSetting
+		},
 		mode,
 		audit: {
 			on: auditOn,
@@ -5331,36 +5935,20 @@ function Switcher() {
 				}
 			}
 		},
-		update: (patch) => setSettings((s) => storeSettings({
-			...s,
-			...patch
-		})),
-		reset: () => setSettings(storeSettings(DEFAULT_SETTINGS)),
+		update: ({ mode: nextMode, ...patch }) => {
+			if (nextMode) setMode(nextMode);
+			if (Object.keys(patch).length) setSettings((s) => storeSettings({
+				...s,
+				...patch,
+				mode: nextMode ?? modeSetting
+			}));
+		},
+		reset: () => {
+			setMode(DEFAULT_SETTINGS.mode);
+			setSettings(storeSettings(DEFAULT_SETTINGS));
+		},
 		resetButton: saved ? resetPosition : null
 	};
-	const lastMode = useRef(mode);
-	useEffect(() => {
-		if (lastMode.current === mode) return;
-		lastMode.current = mode;
-		if (active.custom) return;
-		if (mode === "dark" && !isDarkTheme(active.tokens)) {
-			const twin = toDark(active);
-			selectTheme(twin.id, twin);
-		} else if (mode === "light" && active.id.endsWith("~dark")) {
-			const lightId = active.id.slice(0, -DARK_SUFFIX.length);
-			const local = themes.find((t) => t.id === lightId);
-			if (local) selectTheme(local.id, local);
-			else loadLibrary().then((lib) => {
-				const t = lib.themes.find((x) => x.id === lightId);
-				if (t) selectTheme(t.id, t);
-			}, () => {});
-		}
-	}, [
-		mode,
-		active,
-		themes,
-		selectTheme
-	]);
 	useEffect(() => {
 		if (!open) return;
 		const panel = panelRef.current;
@@ -5401,7 +5989,7 @@ function Switcher() {
 			document.removeEventListener("pointerdown", onPointerDown);
 		};
 	}, [open, close]);
-	if (settings.hideButton) return null;
+	if (settings.hideButton || !arrived) return null;
 	return /* @__PURE__ */ jsx(SettingsContext.Provider, {
 		value: settingsApi,
 		children: /* @__PURE__ */ jsxs("div", {
@@ -5421,6 +6009,7 @@ function Switcher() {
 							return;
 						}
 						hideHint();
+						celebrate();
 						if (open) close();
 						else setOpen(true);
 					},
@@ -5430,7 +6019,7 @@ function Switcher() {
 					onPointerCancel: onDragEnd,
 					onLostPointerCapture: onDragEnd,
 					style: placed ?? void 0,
-					className: `theme-switcher fixed z-[60] ${placed ? "" : CORNERS[position]} grid place-items-center w-9 h-9 rounded-full border border-zinc-200 bg-white/90 text-zinc-700 backdrop-blur hover:bg-white hover:text-zinc-900 transition-[color,background-color,box-shadow,scale] select-none ${settings.draggable ? "touch-none" : ""} focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-zinc-900 focus-visible:ring-offset-2 ${dragPoint ? "scale-110 shadow-xl cursor-grabbing" : "shadow-md cursor-pointer"}`,
+					className: `theme-switcher fixed z-[60] ${placed ? "" : CORNERS[position]} grid place-items-center w-9 h-9 rounded-full border border-zinc-200 bg-white/90 text-zinc-700 backdrop-blur hover:bg-white hover:text-zinc-900 transition-[color,background-color,box-shadow,scale] select-none ${settings.draggable ? "touch-none" : ""} focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-zinc-900 focus-visible:ring-offset-2 ${dragPoint ? "scale-110 shadow-xl cursor-grabbing" : "shadow-md cursor-pointer"} ${entering ? "theme-arrive" : ""}`,
 					children: [
 						/* @__PURE__ */ jsx(Palette, {
 							className: "w-4 h-4",
@@ -5440,6 +6029,7 @@ function Switcher() {
 							tokens,
 							animate: settings.animateDot
 						}),
+						bursting && /* @__PURE__ */ jsx(Burst, { tokens }, burst),
 						hint && !open && !dragPoint && /* @__PURE__ */ jsx("span", {
 							"aria-hidden": "true",
 							className: `theme-hint pointer-events-none absolute top-1/2 -translate-y-1/2 whitespace-nowrap rounded-md bg-zinc-900 px-2 py-1 text-[11px] font-medium text-white shadow-lg ${hintOnLeft ? "right-full mr-2" : "left-full ml-2"}`,
@@ -5517,6 +6107,59 @@ function CyclingDot({ tokens, animate }) {
 		style: { backgroundColor: still ? tokens.primary : colours[index % colours.length] }
 	});
 }
+var BURST_KEYS = [
+	"primary",
+	"primary-alt",
+	"data-1",
+	"data-2",
+	"data-3",
+	"data-4",
+	"warning",
+	"data-5"
+];
+var BURST_PIECES = Array.from({ length: 12 }, (_, i) => {
+	const angle = (i * 30 + (i % 2 ? 9 : -6)) * (Math.PI / 180);
+	const distance = 30 + i % 3 * 9;
+	return {
+		x: Math.round(Math.cos(angle) * distance),
+		y: Math.round(Math.sin(angle) * distance),
+		r: Math.round(angle * 180 / Math.PI),
+		shape: [
+			"squiggle",
+			"dot",
+			"dash"
+		][i % 3],
+		delay: i % 4 * 25
+	};
+});
+function Burst({ tokens }) {
+	return /* @__PURE__ */ jsx("span", {
+		"aria-hidden": "true",
+		className: "theme-burst pointer-events-none absolute inset-0",
+		children: BURST_PIECES.map((p, i) => /* @__PURE__ */ jsx("span", {
+			className: `theme-burst-piece ${p.shape === "squiggle" ? "" : `theme-piece-${p.shape}`}`,
+			style: {
+				"--x": `${p.x}px`,
+				"--y": `${p.y}px`,
+				"--r": `${p.r}deg`,
+				color: tokens[BURST_KEYS[i % BURST_KEYS.length]],
+				animationDelay: `${p.delay}ms`
+			},
+			children: p.shape === "squiggle" && /* @__PURE__ */ jsx("svg", {
+				width: "16",
+				height: "10",
+				viewBox: "0 0 16 10",
+				fill: "none",
+				children: /* @__PURE__ */ jsx("path", {
+					d: "M1 5c1.6-3.6 3.4-3.6 4.6 0s3 3.6 4.6 0 3-3.6 4.4 0",
+					stroke: "currentColor",
+					strokeWidth: "2.2",
+					strokeLinecap: "round"
+				})
+			})
+		}, i))
+	});
+}
 function usePrefersReducedMotion() {
 	const query = "(prefers-reduced-motion: reduce)";
 	const [reduce, setReduce] = useState(() => window.matchMedia(query).matches);
@@ -5758,4 +6401,4 @@ function ResizeHandles({ free, onStart, onMove, onEnd, onReset, active }) {
 	}, Object.keys(edges).join("-")));
 }
 //#endregion
-export { PAIRINGS as A, TOKEN_KEYS as C, MIN_CONTRAST_NON_TEXT as D, MIN_CONTRAST_LARGE_TEXT as E, contrastRatio as F, normalizeHex as I, checkTheme as M, fixAll as N, MIN_CONTRAST_TEXT as O, suggestFix as P, TOKEN_GROUPS as S, deriveAppTokens as T, darkTokens as _, rolesFromPalette as a, BASE_TOKENS as b, applyTokens as c, prePaintScript as d, collectColors as f, themeFromRoles as g, suggestThemes as h, dominantColours as i, checkRamp as j, MIN_RAMP_STEP_DELTA_E as k, useTheme as l, inferRoles as m, DEFAULT_SETTINGS as n, themeFromPalette as o, detectSiteName as p, coloursFromFile as r, ThemeProvider as s, ThemeSwitcher as t, DEFAULT_STORAGE_KEY as u, isDarkTheme as v, completeTokens as w, PRESETS as x, toDark as y };
+export { PAIRINGS as A, TOKEN_KEYS as C, MIN_CONTRAST_NON_TEXT as D, MIN_CONTRAST_LARGE_TEXT as E, contrastRatio as F, normalizeHex as I, checkTheme as M, fixAll as N, MIN_CONTRAST_TEXT as O, suggestFix as P, TOKEN_GROUPS as S, deriveAppTokens as T, darkTokens as _, themeFromPalette as a, BASE_TOKENS as b, useTheme as c, DEFAULT_SETTINGS as d, collectColors as f, themeFromRoles as g, suggestThemes as h, rolesFromPalette as i, checkRamp as j, MIN_RAMP_STEP_DELTA_E as k, DEFAULT_STORAGE_KEY as l, inferRoles as m, coloursFromFile as n, ThemeProvider as o, detectSiteName as p, dominantColours as r, applyTokens as s, ThemeSwitcher as t, prePaintScript as u, isDarkTheme as v, completeTokens as w, PRESETS as x, toDark as y };