/* generated by vite_plugin_fuz_css */

@layer fuz.base, fuz.preferences, fuz.theme, fuz.utilities;

/* Theme Variables */

@layer fuz.base {
:root {
	--accent_50: oklch(var(--palette_lightness_50) calc(var(--palette_chroma_50) * var(--chroma_scale, 1) * var(--accent_chroma_scale, 1)) var(--hue_accent));
	--accent_60: oklch(var(--palette_lightness_60) calc(var(--palette_chroma_60) * var(--chroma_scale, 1) * var(--accent_chroma_scale, 1)) var(--hue_accent));
	--accent_70: oklch(var(--palette_lightness_70) calc(var(--palette_chroma_70) * var(--chroma_scale, 1) * var(--accent_chroma_scale, 1)) var(--hue_accent));
	--accent_chroma_scale: 1;
	--background_image: none;
	--border_color: var(--shade_30);
	--border_radius_min: 0rem;
	--border_radius_sm: max(var(--border_radius_min), calc(1.3rem * var(--radius_scale)));
	--border_radius_xs: max(var(--border_radius_min), calc(0.8rem * var(--radius_scale)));
	--border_radius_xs3: max(var(--border_radius_min), calc(0.3rem * var(--radius_scale)));
	--border_style: solid;
	--border_width: var(--border_width_1);
	--border_width_1: 1px;
	--border_width_2: 2px;
	--border_width_4: 4px;
	--border_width_8: 8px;
	--chroma_curve: 1.3;
	--chroma_scale: 1;
	--chroma_shape_00: 0;
	--chroma_shape_05: calc(pow(0.19, var(--chroma_curve)));
	--chroma_shape_20: calc(pow(0.64, var(--chroma_curve)));
	--chroma_shape_30: calc(pow(0.84, var(--chroma_curve)));
	--chroma_shape_40: calc(pow(0.96, var(--chroma_curve)));
	--chroma_shape_50: 1;
	--chroma_shape_60: calc(pow(0.96, var(--chroma_curve)));
	--chroma_shape_70: calc(pow(0.84, var(--chroma_curve)));
	--chroma_shape_80: calc(pow(0.64, var(--chroma_curve)));
	--darken_10: #0000000f;
	--distance_md: 800px;
	--distance_sm: 320px;
	--fg_10: var(--darken_10);
	--font_family: var(--font_family_sans);
	--font_family_sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
	--font_family_serif: Georgia, serif;
	--font_size_lg: calc(1.6rem * var(--font_size_scale) * pow(var(--type_scale_ratio), 1));
	--font_size_md: calc(1.6rem * var(--font_size_scale));
	--font_size_scale: 1;
	--font_size_xl: calc(1.6rem * var(--font_size_scale) * pow(var(--type_scale_ratio), 2));
	--font_size_xl2: calc(1.6rem * var(--font_size_scale) * pow(var(--type_scale_ratio), 3));
	--font_size_xl3: calc(1.6rem * var(--font_size_scale) * pow(var(--type_scale_ratio), 4));
	--font_weight: 400;
	--heading_font_family: var(--font_family_serif);
	--heading_letter_spacing: normal;
	--hue_a: 250;
	--hue_accent: var(--hue_a);
	--hue_b: 144;
	--hue_c: 29;
	--hue_d: 296;
	--hue_e: 98;
	--hue_f: 60;
	--hue_g: 358;
	--hue_h: 41;
	--hue_i: 210;
	--hue_j: 180;
	--hue_negative: var(--hue_c);
	--hue_neutral: var(--hue_f);
	--icon_size_lg: 80px;
	--icon_size_xl: 128px;
	--icon_size_xl2: 192px;
	--input_height_compact: var(--space_xl4);
	--input_width_min: 100px;
	--lighten_10: #ffffff0f;
	--line_height_md: 1.5;
	--line_height_sm: 1.2;
	--link_color: var(--accent_60);
	--link_color_selected: var(--text_color);
	--negative_50: oklch(var(--palette_lightness_50) calc(var(--palette_chroma_50) * var(--chroma_scale, 1) * var(--negative_chroma_scale, 1)) var(--hue_negative));
	--negative_chroma_scale: 1;
	--neutral_chroma: 0.024;
	--outline_color: var(--accent_50);
	--outline_offset: 1px;
	--outline_style: solid;
	--outline_width: 0;
	--outline_width_active: var(--border_width_1);
	--outline_width_focus: var(--border_width_2);
	--palette_a_50: oklch(var(--palette_lightness_50) calc(var(--palette_chroma_50) * var(--chroma_scale, 1) * var(--palette_a_chroma_scale, 1)) var(--hue_a));
	--palette_a_chroma_scale: 1;
	--palette_b_50: oklch(var(--palette_lightness_50) calc(var(--palette_chroma_50) * var(--chroma_scale, 1) * var(--palette_b_chroma_scale, 1)) var(--hue_b));
	--palette_b_chroma_scale: 1;
	--palette_c_50: oklch(var(--palette_lightness_50) calc(var(--palette_chroma_50) * var(--chroma_scale, 1) * var(--palette_c_chroma_scale, 1)) var(--hue_c));
	--palette_c_chroma_scale: 1;
	--palette_chroma_20: min(calc(var(--palette_chroma_min) + (var(--palette_chroma_max) - var(--palette_chroma_min)) * var(--chroma_shape_20)), 0.078);
	--palette_chroma_50: min(calc(var(--palette_chroma_min) + (var(--palette_chroma_max) - var(--palette_chroma_min)) * var(--chroma_shape_50)), 0.1026);
	--palette_chroma_60: min(calc(var(--palette_chroma_min) + (var(--palette_chroma_max) - var(--palette_chroma_min)) * var(--chroma_shape_60)), 0.0868);
	--palette_chroma_70: min(calc(var(--palette_chroma_min) + (var(--palette_chroma_max) - var(--palette_chroma_min)) * var(--chroma_shape_70)), 0.0706);
	--palette_chroma_80: min(calc(var(--palette_chroma_min) + (var(--palette_chroma_max) - var(--palette_chroma_min)) * var(--chroma_shape_80)), 0.054);
	--palette_chroma_max: 0.106;
	--palette_chroma_min: 0.0132;
	--palette_d_50: oklch(var(--palette_lightness_50) calc(var(--palette_chroma_50) * var(--chroma_scale, 1) * var(--palette_d_chroma_scale, 1)) var(--hue_d));
	--palette_d_chroma_scale: 1;
	--palette_e_50: oklch(var(--palette_lightness_50) calc(var(--palette_chroma_50) * var(--chroma_scale, 1) * var(--palette_e_chroma_scale, 1)) var(--hue_e));
	--palette_e_chroma_scale: 1;
	--palette_f_50: oklch(var(--palette_lightness_50) calc(var(--palette_chroma_50) * var(--chroma_scale, 1) * var(--palette_f_chroma_scale, 1)) var(--hue_f));
	--palette_f_chroma_scale: 0.55;
	--palette_g_50: oklch(var(--palette_lightness_50) calc(var(--palette_chroma_50) * var(--chroma_scale, 1) * var(--palette_g_chroma_scale, 1)) var(--hue_g));
	--palette_g_chroma_scale: 1;
	--palette_h_50: oklch(var(--palette_lightness_50) calc(var(--palette_chroma_50) * var(--chroma_scale, 1) * var(--palette_h_chroma_scale, 1)) var(--hue_h));
	--palette_h_chroma_scale: 1;
	--palette_i_50: oklch(var(--palette_lightness_50) calc(var(--palette_chroma_50) * var(--chroma_scale, 1) * var(--palette_i_chroma_scale, 1)) var(--hue_i));
	--palette_i_chroma_scale: 1;
	--palette_j_50: oklch(var(--palette_lightness_50) calc(var(--palette_chroma_50) * var(--chroma_scale, 1) * var(--palette_j_chroma_scale, 1)) var(--hue_j));
	--palette_j_chroma_scale: 1;
	--palette_lightness_00: 0.985;
	--palette_lightness_100: 0.116;
	--palette_lightness_20: calc(var(--palette_lightness_00) + (var(--palette_lightness_100) - var(--palette_lightness_00)) * pow(0.2, var(--palette_lightness_curve)));
	--palette_lightness_50: calc(var(--palette_lightness_00) + (var(--palette_lightness_100) - var(--palette_lightness_00)) * pow(0.5, var(--palette_lightness_curve)));
	--palette_lightness_60: calc(var(--palette_lightness_00) + (var(--palette_lightness_100) - var(--palette_lightness_00)) * pow(0.6, var(--palette_lightness_curve)));
	--palette_lightness_70: calc(var(--palette_lightness_00) + (var(--palette_lightness_100) - var(--palette_lightness_00)) * pow(0.7, var(--palette_lightness_curve)));
	--palette_lightness_80: calc(var(--palette_lightness_00) + (var(--palette_lightness_100) - var(--palette_lightness_00)) * pow(0.8, var(--palette_lightness_curve)));
	--palette_lightness_curve: 1.15;
	--panel_shadow: none;
	--radius_scale: 1;
	--scrollbar_thumb_color: var(--shade_40);
	--scrollbar_track_color: transparent;
	--selection_color: oklch(var(--palette_lightness_20) calc(var(--palette_chroma_20) * var(--chroma_scale, 1) * var(--accent_chroma_scale, 1)) var(--hue_accent) / 40%);
	--shade_00: oklch(var(--shade_lightness_00) calc(var(--neutral_chroma) * var(--chroma_shape_00) + var(--shade_chroma_00)) var(--hue_neutral));
	--shade_05: oklch(var(--shade_lightness_05) calc(var(--neutral_chroma) * var(--chroma_shape_05)) var(--hue_neutral));
	--shade_30: oklch(var(--shade_lightness_30) calc(var(--neutral_chroma) * var(--chroma_shape_30)) var(--hue_neutral));
	--shade_40: oklch(var(--shade_lightness_40) calc(var(--neutral_chroma) * var(--chroma_shape_40)) var(--hue_neutral));
	--shade_50: oklch(var(--shade_lightness_50) calc(var(--neutral_chroma) * var(--chroma_shape_50)) var(--hue_neutral));
	--shade_60: oklch(var(--shade_lightness_60) calc(var(--neutral_chroma) * var(--chroma_shape_60)) var(--hue_neutral));
	--shade_chroma_00: 0;
	--shade_lightness_00: 0.97;
	--shade_lightness_05: calc(var(--shade_lightness_00) + (var(--shade_lightness_100) - var(--shade_lightness_00)) * pow(0.05, var(--shade_lightness_curve)));
	--shade_lightness_100: 0.171;
	--shade_lightness_30: calc(var(--shade_lightness_00) + (var(--shade_lightness_100) - var(--shade_lightness_00)) * pow(0.3, var(--shade_lightness_curve)));
	--shade_lightness_40: calc(var(--shade_lightness_00) + (var(--shade_lightness_100) - var(--shade_lightness_00)) * pow(0.4, var(--shade_lightness_curve)));
	--shade_lightness_50: calc(var(--shade_lightness_00) + (var(--shade_lightness_100) - var(--shade_lightness_00)) * pow(0.5, var(--shade_lightness_curve)));
	--shade_lightness_60: calc(var(--shade_lightness_00) + (var(--shade_lightness_100) - var(--shade_lightness_00)) * pow(0.6, var(--shade_lightness_curve)));
	--shade_lightness_curve: 1.09;
	--shadow_alpha_30: calc(25% * var(--shadow_alpha_scale));
	--shadow_alpha_40: calc(36% * var(--shadow_alpha_scale));
	--shadow_alpha_50: calc(50% * var(--shadow_alpha_scale));
	--shadow_alpha_scale: 1;
	--shadow_bottom_sm: 0 1.5px 4px 0px;
	--shadow_bottom_xs: 0 1px 3px 0px;
	--shadow_color_umbra: #000;
	--shadow_inset_xs: inset 0 0 3px 0px;
	--shadow_md: 0 0 6px 0px;
	--shadow_top_xs: 0 -1px 3px 0px;
	--space_lg: calc(1.3rem * var(--space_scale));
	--space_md: calc(1rem * var(--space_scale));
	--space_scale: 1;
	--space_sm: calc(0.8rem * var(--space_scale));
	--space_xl: calc(1.6rem * var(--space_scale));
	--space_xl2: calc(2.1rem * var(--space_scale));
	--space_xl3: calc(2.6rem * var(--space_scale));
	--space_xl4: calc(3.3rem * var(--space_scale));
	--space_xl9: calc(11.1rem * var(--space_scale));
	--space_xs: calc(0.6rem * var(--space_scale));
	--space_xs2: calc(0.4rem * var(--space_scale));
	--text_00: oklch(var(--text_lightness_00) calc(var(--neutral_chroma) * var(--chroma_shape_00)) var(--hue_neutral));
	--text_50: oklch(var(--text_lightness_50) calc(var(--neutral_chroma) * var(--chroma_shape_50)) var(--hue_neutral));
	--text_70: oklch(var(--text_lightness_70) calc(var(--neutral_chroma) * var(--chroma_shape_70)) var(--hue_neutral));
	--text_80: oklch(var(--text_lightness_80) calc(var(--neutral_chroma) * var(--chroma_shape_80)) var(--hue_neutral));
	--text_color: var(--text_80);
	--text_decoration: none;
	--text_decoration_hover: underline;
	--text_decoration_selected: underline;
	--text_lightness_00: 0.97;
	--text_lightness_100: 0.146;
	--text_lightness_50: calc(var(--text_lightness_00) + (var(--text_lightness_100) - var(--text_lightness_00)) * pow(0.5, var(--text_lightness_curve)));
	--text_lightness_70: calc(var(--text_lightness_00) + (var(--text_lightness_100) - var(--text_lightness_00)) * pow(0.7, var(--text_lightness_curve)));
	--text_lightness_80: calc(var(--text_lightness_00) + (var(--text_lightness_100) - var(--text_lightness_00)) * pow(0.8, var(--text_lightness_curve)));
	--text_lightness_curve: 1.19;
	--text_min: #fff;
	--type_scale_ratio: 1.272;
}

:root.dark {
	--chroma_curve: 1.27;
	--fg_10: var(--lighten_10);
	--neutral_chroma: 0.025;
	--palette_chroma_20: min(calc(var(--palette_chroma_min) + (var(--palette_chroma_max) - var(--palette_chroma_min)) * var(--chroma_shape_20)), 0.0673);
	--palette_chroma_50: min(calc(var(--palette_chroma_min) + (var(--palette_chroma_max) - var(--palette_chroma_min)) * var(--chroma_shape_50)), 0.1095);
	--palette_chroma_60: min(calc(var(--palette_chroma_min) + (var(--palette_chroma_max) - var(--palette_chroma_min)) * var(--chroma_shape_60)), 0.122);
	--palette_chroma_70: min(calc(var(--palette_chroma_min) + (var(--palette_chroma_max) - var(--palette_chroma_min)) * var(--chroma_shape_70)), 0.1189);
	--palette_chroma_80: min(calc(var(--palette_chroma_min) + (var(--palette_chroma_max) - var(--palette_chroma_min)) * var(--chroma_shape_80)), 0.0812);
	--palette_chroma_max: 0.1088;
	--palette_chroma_min: 0.0214;
	--palette_lightness_00: 0.147;
	--palette_lightness_100: 0.971;
	--palette_lightness_curve: 0.76;
	--selection_color: oklch(var(--palette_lightness_80) calc(var(--palette_chroma_80) * var(--chroma_scale, 1) * var(--accent_chroma_scale, 1)) var(--hue_accent) / 40%);
	--shade_lightness_00: 0.171;
	--shade_lightness_100: 0.97;
	--shade_lightness_curve: 0.92;
	--shadow_alpha_30: calc(37% * var(--shadow_alpha_scale));
	--shadow_alpha_40: calc(47% * var(--shadow_alpha_scale));
	--shadow_alpha_50: calc(59% * var(--shadow_alpha_scale));
	--shadow_color_umbra: oklch(0.863 0.009 var(--hue_neutral));
	--text_lightness_00: 0.146;
	--text_lightness_100: 0.97;
	--text_lightness_curve: 0.87;
	--text_min: #000;
}
}

/* Base Styles */

@layer fuz.base {
*,
	::before,
	::after,
	::backdrop {
		box-sizing: border-box;
		border: 0 solid;
		margin: 0;
		padding: 0;
	}

:root,
	:host {
		color-scheme: light dark; /* overridden by `:root.dark` and `:root.light` added in the `head` */
		background-color: var(--shade_00);
		background-image: var(--background_image);
		color: var(--text_color);
		accent-color: var(--accent_50);
		scrollbar-color: var(--scrollbar_thumb_color) var(--scrollbar_track_color);
		line-height: var(--line_height_md);
		font-size: 62.5%; /* see `body.font-size`, using `rem` font size units with a base 16px */
		/* @source https://kilianvalkhof.com/2022/css-html/your-css-reset-needs-text-size-adjust-probably/ */
		-moz-text-size-adjust: none;
		-webkit-text-size-adjust: none;
		text-size-adjust: none;
		-webkit-tap-highlight-color: transparent;
	}

:root.dark {
		color-scheme: dark;
	}

:root.light {
		color-scheme: light;
	}

body {
		min-height: 100svh; /* the small viewport, so the floor never scrolls a short page under a mobile toolbar */
		font-size: var(--font_size_md, 1.6rem); /* rem against `font-size: 62.5%`; the token follows `--font_size_scale` */
		font-family: var(--font_family);
		font-weight: var(--font_weight);
		tab-size: 2; /* TODO var */
	}

::selection {
		background-color: var(--selection_color);
	}

[hidden]:where(:not([hidden='until-found'])) {
		display: none !important;
	}

:where(a:not(.unstyled)) {
		cursor: pointer;
		/* TODO should the generic be --link_color or --color? */
		--text_color: var(--link_color);
		color: var(--text_color);
		font-weight: 700;
		text-decoration: var(--text_decoration);
		border-radius: var(--border_radius, var(--border_radius_xs3));
		outline: var(--outline_width) var(--outline_style) var(--outline_color);
		/* gap between border and ring so the same-color pair reads as two
			shapes instead of one thick band */
		outline-offset: var(--outline_offset);
	}

:where(a:not(.unstyled):hover) {
		text-decoration: var(--text_decoration_hover);
	}

:where(a:not(.unstyled):focus) {
		--outline_width: var(--outline_width_focus);
	}

:where(a:not(.unstyled):active) {
		--outline_width: var(--outline_width_active);
	}

:where(a:not(.unstyled).selected) {
		--text_color: var(--link_color_selected);
		text-decoration: var(--text_decoration_selected);
	}

:where(:is(ul, ol, menu):not(.unstyled)) {
		padding-left: var(--space_xl4);
	}

:where(.unstyled:is(ul, ol, menu)) {
		list-style: none;
	}

:where(:is(h1, h2, h3, h4, h5, h6, .heading):not(.unstyled)) {
		font-family: var(--heading_font_family);
		font-size: var(--font_size, inherit);
		line-height: var(--line_height_sm);
		letter-spacing: var(--heading_letter_spacing);
		text-wrap: balance; /* @see https://developer.mozilla.org/en-US/docs/Web/CSS/text-wrap#balance */
		/* TODO use this pattern elsewhere? provides API to components like `MdnLogo` */
		overflow-wrap: break-word; /* TODO @many is this best? `anywhere` instead? what about adding elsewhere? */
	}

:where(h1:not(.unstyled)) {
		--font_size: var(--font_size_xl3);
		/* --heading_font_weight is a hook with per-tier fallbacks: setting it
		flattens the weight ladder deliberately (display-heavy themes) */
		font-weight: var(--heading_font_weight, 300);
		margin-bottom: calc(var(--flow_margin, var(--space_lg)) * 3.23);
		/* somewhat strange to omit only this one, but generally seems to be the desired behavior */
		/* margin-top: calc(var(--flow_margin, var(--space_lg)) * 5.28); */
	}

:where(h2:not(.unstyled)) {
		--font_size: var(--font_size_xl2);
		font-weight: var(--heading_font_weight, 400);
		margin-bottom: calc(var(--flow_margin, var(--space_lg)) * 2.54);
		margin-top: calc(var(--flow_margin, var(--space_lg)) * 4.15);
	}

:where(p) {
		overflow-wrap: break-word; /* TODO @many is this best? `anywhere` instead? what about adding elsewhere? */
	}

:where(
		:is(
			p,
			ul,
			ol,
			menu,
			form,
			fieldset,
			table,
			details,
			textarea,
			select,
			label,
			pre,
			blockquote,
			aside,
			nav,
			legend
		):not(:last-child):not(.unstyled)
	) {
		margin-bottom: var(--flow_margin, var(--space_lg));
	}

:where(section:not(:last-child):not(.unstyled)) {
		margin-bottom: calc(var(--flow_margin, var(--space_lg)) * 5.31);
	}

:where(.row > *) {
		margin: 0;
	}

:where(blockquote:not(.unstyled)) {
		border-left-color: var(--border_color);
		border-left-style: var(--border_style);
		border-left-width: var(--border_width_8);
		padding: var(--space_md);
		color: var(--text_color);
	}

:where(code.inline, p code) {
		display: inline-block;
		vertical-align: baseline;
	}

:where(
		:is(input, textarea, select):not(.unstyled).inline,
		p :is(input, textarea, select):not(.unstyled)
	) {
		display: inline-block;
		margin-left: var(--space_lg);
		/* TODO ideally `width` here would be set to a minimum and have an API to increase size --
	buttons can grow automatically, but how can inputs? only with js?
	 */
		width: var(--input_width_min);
	}

:where([contenteditable]:not(.unstyled):focus-visible) {
		--outline_width: var(--outline_width_focus);
		outline: var(--outline_width) var(--outline_style) var(--outline_color);
		outline-offset: var(--outline_offset);
	}

:where([contenteditable]:not(.unstyled):active) {
		--outline_width: var(--outline_width_active);
	}

:where(label.selected:not(.unstyled)) {
		cursor: default;
		--text_color: var(--accent_60);
	}

:where(label.row:not(.unstyled)) {
		justify-content: flex-start;
	}

:where(label.row:not(.unstyled) :is(input[type='checkbox'], input[type='radio']):not(.unstyled)) {
		margin-right: var(--space_md);
	}

:where(button:not(.unstyled).selected) {
		/* text_00 is the ramp endpoint: contrast themes bending
			--text_lightness_curve move the near-background stops toward the fill,
			but can never move an endpoint, so inverse text stays readable */
		--button_text_color: var(--text_00);
		--button_fill: var(--fill, var(--shade_60));
		--button_fill_hover: var(--fill, var(--shade_60));
		--button_fill_active: var(--fill, var(--shade_60));
	}

:where(button:not(.unstyled).selected:not(.deselectable)) {
		--button_border_color_hover: var(--border_color);
		--button_border_color_active: var(--border_color);
		cursor: default;
		box-shadow: none;
	}

:where(button:not(.unstyled).selected.deselectable:not(:disabled):hover) {
		--button_text_color: var(--text_min);
	}

:where(button:not(.unstyled).selected:disabled:active) {
		--text_color: var(--text_00);
		--fill: var(--negative_50);
	}

:where(button:not(.unstyled).selected:not(.deselectable):active) {
		--outline_width: var(--outline_width_focus);
	}

:where(button:not(.unstyled).inline, p button:not(.unstyled)) {
		display: inline-block;
		/* TODO this increases paragraph line spacing */
		min-height: var(--button_min_height, var(--input_height_compact));
	}

:where(img, picture, canvas, svg, video) {
		display: block;
		max-width: 100%; /* shrink to fit */
		height: auto; /* preserve aspect ratio */
	}
}

/* User-Preference Mappings */

@layer fuz.preferences {
@media (prefers-reduced-motion) {
		:root {
			/* setting to `initial` disables animations but allows for fallbacks (see PendingAnimation);
				`!important` because a theme may set durations and must not re-enable motion the
				user turned off - in a layer it outranks every `:root` declaration, layered or not,
				while an element further down can still set its own duration */
			--duration_6: initial !important;
			--duration_5: initial !important;
			--duration_4: initial !important;
			--duration_3: initial !important;
			--duration_2: initial !important;
			--duration_1: initial !important;
		}
	}

@media (prefers-contrast: more) {
		:root {
			--shade_lightness_00: 1;
			--text_lightness_curve: 0.8;
			--border_color: var(--shade_50);
			--link_color: var(--accent_70);
			--panel_shadow: 0 0 0 var(--border_width) var(--border_color);
		}
		:root.dark {
			--shade_lightness_00: 0.12;
			--text_lightness_curve: 0.6;
		}
	}
}

/* Utility Classes */

@layer fuz.utilities {
.box { display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center; }
/* can be used to override the direction of a `.box` */
.row { display: flex;
			flex-direction: row;
			align-items: center; }
/* A panel is a box embedded into the page, useful for visually isolating content. */
.panel { border-radius: var(--border_radius, var(--border_radius_xs));
			background-color: var(--fg_10);
			box-shadow: var(--panel_shadow); }
.font_size_md { font-size: var(--font_size_md); --font_size: var(--font_size_md); }
.font_size_lg { font-size: var(--font_size_lg); --font_size: var(--font_size_lg); }
.text_70 { color: var(--text_70); --text_color: var(--text_70); }
.shade_00 { background-color: var(--shade_00); }
.shade_05 { background-color: var(--shade_05); }
.color_a_50 { color: var(--palette_a_50); --text_color: var(--palette_a_50); }
.color_b_50 { color: var(--palette_b_50); --text_color: var(--palette_b_50); }
.color_c_50 { color: var(--palette_c_50); --text_color: var(--palette_c_50); }
.color_d_50 { color: var(--palette_d_50); --text_color: var(--palette_d_50); }
.color_e_50 { color: var(--palette_e_50); --text_color: var(--palette_e_50); }
.color_f_50 { color: var(--palette_f_50); --text_color: var(--palette_f_50); }
.color_g_50 { color: var(--palette_g_50); --text_color: var(--palette_g_50); }
.color_h_50 { color: var(--palette_h_50); --text_color: var(--palette_h_50); }
.color_i_50 { color: var(--palette_i_50); --text_color: var(--palette_i_50); }
.color_j_50 { color: var(--palette_j_50); --text_color: var(--palette_j_50); }
.border_radius_sm { border-radius: var(--border_radius_sm); }
.shadow_md { box-shadow: var(--shadow_md) color-mix(in oklab, var(--shadow_color, var(--shadow_color_umbra)) var(--shadow_alpha, var(--shadow_alpha_50)), transparent); }
.shadow_bottom_sm { box-shadow: var(--shadow_bottom_sm) color-mix(in oklab, var(--shadow_color, var(--shadow_color_umbra)) var(--shadow_alpha, var(--shadow_alpha_40)), transparent); }
.shadow_inset_xs { box-shadow: var(--shadow_inset_xs) color-mix(in oklab, var(--shadow_color, var(--shadow_color_umbra)) var(--shadow_alpha, var(--shadow_alpha_30)), transparent); }
.width\:100\% { width: 100%; }
.width_atmost_sm { width: 100%; max-width: var(--distance_sm); }
.width_atmost_md { width: 100%; max-width: var(--distance_md); }
.p_xs2 { padding: var(--space_xs2); }
.p_sm { padding: var(--space_sm); }
.p_lg { padding: var(--space_lg); }
.pt_xl { padding-top: var(--space_xl); }
.pb_xl9 { padding-bottom: var(--space_xl9); }
.pl_lg { padding-left: var(--space_lg); }
.px_md { padding-left: var(--space_md);	padding-right: var(--space_md); }
.px_xl { padding-left: var(--space_xl);	padding-right: var(--space_xl); }
.py_xs { padding-top: var(--space_xs);	padding-bottom: var(--space_xs); }
.mt_0 { margin-top: 0; }
.mt_xl2 { margin-top: var(--space_xl2); }
.mb_0 { margin-bottom: 0; }
.mb_sm { margin-bottom: var(--space_sm); }
.mb_lg { margin-bottom: var(--space_lg); }
.mb_xl2 { margin-bottom: var(--space_xl2); }
.mb_xl3 { margin-bottom: var(--space_xl3); }
.mb_xl9 { margin-bottom: var(--space_xl9); }
.font-weight\:500 { font-weight: 500; }

}

/* generated by vite_plugin_fuz_css */
.token_processing_instruction,.token_doctype,.token_cdata,.token_punctuation{color:var(--text_50)}.token_tag,.token_constant,.token_symbol,.token_deleted,.token_keyword,.token_null,.token_boolean,.token_interpolation_punctuation,.token_heading,.token_heading_punctuation,.token_tag_punctuation{color:var(--palette_a_50)}.token_comment,.token_char,.token_inserted,.token_blockquote,.token_blockquote_punctuation{color:var(--palette_b_50)}.token_builtin,.token_class_name,.token_number{color:var(--palette_j_50)}.token_attr_value,.token_attr_quote,.token_string,.token_template_punctuation,.token_inline_code,.token_code_punctuation{color:var(--palette_h_50)}.token_attr_equals{color:var(--text_50)}.token_selector,.token_function,.token_regex,.token_important,.token_variable{color:var(--palette_e_50)}.token_atrule{color:var(--palette_f_50)}.token_attr_name,.token_property,.token_decorator,.token_decorator_name,.token_link_text_wrapper,.token_link_text,.token_link_punctuation{color:var(--palette_i_50)}.token_special_keyword,.token_namespace,.token_rule{color:var(--palette_g_50)}.token_at_keyword,.token_url{color:var(--palette_d_50)}.token_url{text-decoration:underline}.token_strikethrough{text-decoration:line-through}.token_important,.token_bold{font-weight:700}.token_italic{font-style:italic}