.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(--color_a_50)}.token_comment,.token_char,.token_inserted,.token_blockquote,.token_blockquote_punctuation{color:var(--color_b_50)}.token_builtin,.token_class_name,.token_number{color:var(--color_j_50)}.token_attr_value,.token_attr_quote,.token_string,.token_template_punctuation,.token_inline_code,.token_code_punctuation{color:var(--color_h_50)}.token_attr_equals{color:var(--text_50)}.token_selector,.token_function,.token_regex,.token_important,.token_variable{color:var(--color_e_50)}.token_atrule{color:var(--color_f_50)}.token_attr_name,.token_property,.token_decorator,.token_decorator_name,.token_link_text_wrapper,.token_link_text,.token_link_punctuation{color:var(--color_i_50)}.token_special_keyword,.token_namespace,.token_rule{color:var(--color_g_50)}.token_at_keyword,.token_url{color:var(--color_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}li.svelte-8j840{display:flex}a.svelte-8j840:hover{text-decoration:none}a.svelte-8j840:hover .text:where(.svelte-8j840){text-decoration:underline}.menuitem.svelte-8j840{z-index:unset}.pending-animation.svelte-13n46xd span:where(.svelte-13n46xd){font-size:var(--font_size, inherit);display:inline-block;transform:scale3d(var(--scale_x, .4),var(--scale_y, .4),var(--scale_z, .4));animation:svelte-13n46xd-dot var(--animation_duration, var(--duration_5, 1.5s)) infinite paused}.running.svelte-13n46xd span:where(.svelte-13n46xd){animation-play-state:running}@keyframes svelte-13n46xd-dot{0%{transform:scale3d(var(--scale_x, .4),var(--scale_y, .4),var(--scale_z, .4))}71%{transform:scaleZ(1)}to{transform:scale3d(var(--scale_x, .4),var(--scale_y, .4),var(--scale_z, .4))}}.menuitem.svelte-1eiywrc{z-index:unset}.contextmenu-separator.svelte-14jtsvh{height:var(--border_width);margin:var(--space_xs) var(--space_sm);background-color:var(--border_color_10);list-style:none}.contextmenu-root.svelte-tmo2ds{display:contents}.contextmenu.svelte-tmo2ds{--icon_size: var(--icon_size_xs);--contextmenu_width: 320px;position:fixed;left:0;top:0;z-index:var(--contextmenu_z_index, 200);max-width:var(--contextmenu_width);width:100%}.contextmenu.svelte-tmo2ds,.contextmenu.svelte-tmo2ds menu.pane{border:var(--contextmenu_border_width, var(--border_width)) var(--contextmenu_border_style, var(--border_style)) var(--contextmenu_border_color, var(--border_color));border-radius:var(--contextmenu_border_radius, var(--border_radius_xs))}.contextmenu-layout.svelte-tmo2ds{z-index:-200;position:fixed;inset:0}.color-scheme-control.svelte-kk35k4{display:flex;flex-direction:row;justify-content:center}.content.svelte-kk35k4{display:flex;align-items:center;justify-content:center;padding:0 var(--space_lg)}.color-scheme.svelte-kk35k4{border-radius:0}.color-scheme.svelte-kk35k4:first-child{border-top-left-radius:var(--border_radius, var(--border_radius_md));border-bottom-left-radius:var(--border_radius, var(--border_radius_md))}.color-scheme.svelte-kk35k4:last-child{border-top-right-radius:var(--border_radius, var(--border_radius_md));border-bottom-right-radius:var(--border_radius, var(--border_radius_md))}.theme-button.svelte-wyhzjp{flex:1;border-radius:0}li.svelte-wyhzjp:first-child .theme-button:where(.svelte-wyhzjp){border-top-left-radius:var(--border_radius_sm);border-top-right-radius:var(--border_radius_sm)}li.svelte-wyhzjp:last-child .theme-button:where(.svelte-wyhzjp){border-bottom-left-radius:var(--border_radius_sm);border-bottom-right-radius:var(--border_radius_sm)}

/* generated by vite_plugin_fuz_css */

/* Theme Variables */

:root {
	--bg_80: var(--lighten_80);
	--border_color: var(--shade_30);
	--border_color_10: hsl(var(--tint_hue) 60% 20% / 7%);
	--border_color_20: hsl(var(--tint_hue) 60% 20% / 13%);
	--border_color_30: hsl(var(--tint_hue) 60% 20% / 22%);
	--border_radius_md: 2.1rem;
	--border_radius_sm: 1.3rem;
	--border_radius_xs: 0.8rem;
	--border_radius_xs3: 0.3rem;
	--border_style: solid;
	--border_width: var(--border_width_1);
	--border_width_1: 1px;
	--border_width_2: 2px;
	--border_width_3: 3px;
	--border_width_4: 4px;
	--border_width_8: 8px;
	--button_shadow: var(--shadow_inset_bottom_xs) color-mix(in hsl, var(--shadow_color, var(--shadow_color_umbra)) var(--shadow_alpha_30), transparent), var(--shadow_inset_top_xs) color-mix(in hsl, var(--shadow_color_highlight) var(--shadow_alpha_30), transparent);
	--button_shadow_active: var(--shadow_inset_top_sm) color-mix(in hsl, var(--shadow_color, var(--shadow_color_umbra)) var(--shadow_alpha_40), transparent), var(--shadow_inset_bottom_sm) color-mix(in hsl, var(--shadow_color_highlight) var(--shadow_alpha_40), transparent);
	--button_shadow_hover: var(--shadow_inset_bottom_sm) color-mix(in hsl, var(--shadow_color, var(--shadow_color_umbra)) var(--shadow_alpha_40), transparent), var(--shadow_inset_top_sm) color-mix(in hsl, var(--shadow_color_highlight) var(--shadow_alpha_40), transparent);
	--color_a_10: hsl(var(--hue_a) 65% 91%);
	--color_a_40: hsl(var(--hue_a) 60% 62%);
	--color_a_50: hsl(var(--hue_a) 55% 50%);
	--color_b_10: hsl(var(--hue_b) 55% 90%);
	--color_b_40: hsl(var(--hue_b) 50% 49%);
	--color_b_50: hsl(var(--hue_b) 55% 36%);
	--color_c_10: hsl(var(--hue_c) 85% 92%);
	--color_c_40: hsl(var(--hue_c) 70% 63%);
	--color_c_50: hsl(var(--hue_c) 65% 50%);
	--color_d_10: hsl(var(--hue_d) 50% 91%);
	--color_d_40: hsl(var(--hue_d) 50% 62%);
	--color_d_50: hsl(var(--hue_d) 50% 50%);
	--color_e_10: hsl(var(--hue_e) 85% 91%);
	--color_e_40: hsl(var(--hue_e) 70% 50%);
	--color_e_50: hsl(var(--hue_e) 65% 41%);
	--color_f_10: hsl(var(--hue_f) 32% 87%);
	--color_f_40: hsl(var(--hue_f) 42% 41%);
	--color_f_50: hsl(var(--hue_f) 60% 26%);
	--color_g_10: hsl(var(--hue_g) 72% 91%);
	--color_g_40: hsl(var(--hue_g) 72% 65%);
	--color_g_50: hsl(var(--hue_g) 72% 56%);
	--color_h_10: hsl(var(--hue_h) 90% 91%);
	--color_h_40: hsl(var(--hue_h) 90% 62%);
	--color_h_50: hsl(var(--hue_h) 90% 50%);
	--color_i_10: hsl(var(--hue_i) 75% 89%);
	--color_i_40: hsl(var(--hue_i) 75% 47%);
	--color_i_50: hsl(var(--hue_i) 75% 40%);
	--color_j_10: hsl(var(--hue_j) 60% 89%);
	--color_j_40: hsl(var(--hue_j) 55% 47%);
	--color_j_50: hsl(var(--hue_j) 55% 40%);
	--darken_00: #00000000;
	--darken_05: #00000008;
	--darken_10: #0000000f;
	--darken_100: #000000ff;
	--darken_20: #0000001f;
	--darken_30: #00000036;
	--darken_40: #00000052;
	--darken_50: #00000073;
	--darken_60: #000000a6;
	--darken_70: #000000cc;
	--darken_80: #000000e3;
	--darken_90: #000000f5;
	--darken_95: #000000fa;
	--disabled_opacity: 60%;
	--distance_md: 800px;
	--distance_sm: 320px;
	--duration_1: 0.08s;
	--duration_2: 0.2s;
	--duration_3: 0.5s;
	--duration_5: 1.5s;
	--fg_05: var(--darken_05);
	--fg_10: var(--darken_10);
	--fg_20: var(--darken_20);
	--font_family_mono: ui-monospace, monospace;
	--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: 2.04rem;
	--font_size_md: 1.6rem;
	--font_size_sm: 1.3rem;
	--font_size_xl: 2.59rem;
	--font_size_xl2: 3.29rem;
	--font_size_xl3: 4.19rem;
	--hue_a: 210;
	--hue_b: 120;
	--hue_c: 0;
	--hue_d: 260;
	--hue_e: 50;
	--hue_f: 27;
	--hue_g: 335;
	--hue_h: 17;
	--hue_i: 185;
	--hue_j: 155;
	--icon_size_lg: 80px;
	--icon_size_md: 48px;
	--icon_size_xl2: 192px;
	--icon_size_xs: 18px;
	--input_fill: var(--bg_80);
	--input_height: var(--space_xl5);
	--input_height_compact: var(--space_xl4);
	--input_padding_x: var(--space_lg);
	--input_padding_y: 0;
	--input_width_min: 100px;
	--lighten_00: #ffffff00;
	--lighten_05: #ffffff08;
	--lighten_10: #ffffff0f;
	--lighten_100: #ffffffff;
	--lighten_20: #ffffff1f;
	--lighten_30: #ffffff36;
	--lighten_40: #ffffff52;
	--lighten_50: #ffffff73;
	--lighten_60: #ffffffa6;
	--lighten_70: #ffffffcc;
	--lighten_80: #ffffffe3;
	--lighten_90: #fffffff5;
	--lighten_95: #fffffffa;
	--line_height_lg: 1.8;
	--line_height_md: 1.5;
	--line_height_sm: 1.2;
	--link_color: hsl(var(--hue_a) 61% 35%);
	--link_color_selected: var(--text_color);
	--outline_color: var(--color_a_50);
	--outline_style: solid;
	--outline_width: 0;
	--outline_width_active: var(--border_width_1);
	--outline_width_focus: var(--border_width_2);
	--shade_00: hsl(var(--tint_hue) var(--tint_saturation) 96%);
	--shade_10: hsl(var(--tint_hue) var(--tint_saturation) 90%);
	--shade_30: hsl(var(--tint_hue) var(--tint_saturation) 76%);
	--shade_50: hsl(var(--tint_hue) var(--tint_saturation) 53%);
	--shade_max: #000;
	--shade_min: #fff;
	--shadow_alpha_30: 25%;
	--shadow_alpha_40: 36%;
	--shadow_alpha_50: 50%;
	--shadow_alpha_70: 77%;
	--shadow_bottom_md: 0 2.5px 6px 0px;
	--shadow_bottom_sm: 0 1.5px 4px 0px;
	--shadow_bottom_xl: 0 5px 20px 1px;
	--shadow_bottom_xs: 0 1px 3px 0px;
	--shadow_color_highlight: hsl(var(--tint_hue) var(--tint_saturation) 94%);
	--shadow_color_umbra: #000;
	--shadow_inset_bottom_sm: inset 0 -1.5px 4px 0px;
	--shadow_inset_bottom_xs: inset 0 -1px 3px 0px;
	--shadow_inset_top_sm: inset 0 1.5px 4px 0px;
	--shadow_inset_top_xs: inset 0 1px 3px 0px;
	--shadow_inset_xs: inset 0 0 3px 0px;
	--shadow_top_xs: 0 -1px 3px 0px;
	--space_lg: 1.3rem;
	--space_md: 1rem;
	--space_sm: 0.8rem;
	--space_xl: 1.6rem;
	--space_xl2: 2.1rem;
	--space_xl3: 2.6rem;
	--space_xl4: 3.3rem;
	--space_xl5: 4.2rem;
	--space_xl6: 5.4rem;
	--space_xl7: 6.9rem;
	--space_xl9: 11.1rem;
	--space_xs: 0.6rem;
	--space_xs2: 0.4rem;
	--space_xs3: 0.3rem;
	--text_05: hsl(var(--tint_hue) var(--tint_saturation) 94%);
	--text_10: hsl(var(--tint_hue) var(--tint_saturation) 90%);
	--text_50: hsl(var(--tint_hue) var(--tint_saturation) 50%);
	--text_70: hsl(var(--tint_hue) var(--tint_saturation) 32%);
	--text_80: hsl(var(--tint_hue) var(--tint_saturation) 21%);
	--text_color: var(--text_80);
	--text_decoration: none;
	--text_decoration_hover: underline;
	--text_decoration_selected: underline;
	--text_disabled: var(--text_50);
	--tint_hue: var(--hue_f);
	--tint_saturation: 11%;
}

:root.dark {
	--bg_80: var(--darken_80);
	--border_color_10: hsl(var(--tint_hue) 60% 80% / 14%);
	--border_color_20: hsl(var(--tint_hue) 60% 80% / 22%);
	--border_color_30: hsl(var(--tint_hue) 60% 80% / 32%);
	--button_shadow: var(--shadow_inset_top_xs) color-mix(in hsl, var(--shadow_color, var(--shadow_color_umbra)) var(--shadow_alpha_30), transparent), var(--shadow_inset_bottom_xs) color-mix(in hsl, var(--shadow_color_highlight) var(--shadow_alpha_30), transparent);
	--button_shadow_active: var(--shadow_inset_bottom_sm) color-mix(in hsl, var(--shadow_color, var(--shadow_color_umbra)) var(--shadow_alpha_40), transparent), var(--shadow_inset_top_sm) color-mix(in hsl, var(--shadow_color_highlight) var(--shadow_alpha_40), transparent);
	--button_shadow_hover: var(--shadow_inset_top_sm) color-mix(in hsl, var(--shadow_color, var(--shadow_color_umbra)) var(--shadow_alpha_40), transparent), var(--shadow_inset_bottom_sm) color-mix(in hsl, var(--shadow_color_highlight) var(--shadow_alpha_40), transparent);
	--color_a_10: hsl(var(--hue_a) 65% 12%);
	--color_a_40: hsl(var(--hue_a) 60% 40%);
	--color_a_50: hsl(var(--hue_a) 55% 52%);
	--color_b_10: hsl(var(--hue_b) 55% 12%);
	--color_b_40: hsl(var(--hue_b) 50% 44%);
	--color_b_50: hsl(var(--hue_b) 50% 54%);
	--color_c_10: hsl(var(--hue_c) 85% 12%);
	--color_c_40: hsl(var(--hue_c) 70% 40%);
	--color_c_50: hsl(var(--hue_c) 65% 52%);
	--color_d_10: hsl(var(--hue_d) 50% 12%);
	--color_d_40: hsl(var(--hue_d) 50% 40%);
	--color_d_50: hsl(var(--hue_d) 50% 52%);
	--color_e_10: hsl(var(--hue_e) 85% 12%);
	--color_e_40: hsl(var(--hue_e) 70% 44%);
	--color_e_50: hsl(var(--hue_e) 70% 54%);
	--color_f_10: hsl(var(--hue_f) 32% 12%);
	--color_f_40: hsl(var(--hue_f) 40% 46%);
	--color_f_50: hsl(var(--hue_f) 50% 56%);
	--color_g_10: hsl(var(--hue_g) 72% 12%);
	--color_g_40: hsl(var(--hue_g) 72% 38%);
	--color_g_50: hsl(var(--hue_g) 72% 50%);
	--color_h_10: hsl(var(--hue_h) 90% 12%);
	--color_h_40: hsl(var(--hue_h) 90% 40%);
	--color_h_50: hsl(var(--hue_h) 90% 52%);
	--color_i_10: hsl(var(--hue_i) 75% 12%);
	--color_i_40: hsl(var(--hue_i) 75% 46%);
	--color_i_50: hsl(var(--hue_i) 75% 54%);
	--color_j_10: hsl(var(--hue_j) 60% 12%);
	--color_j_40: hsl(var(--hue_j) 55% 46%);
	--color_j_50: hsl(var(--hue_j) 55% 54%);
	--fg_05: var(--lighten_05);
	--fg_10: var(--lighten_10);
	--fg_20: var(--lighten_20);
	--link_color: hsl(var(--hue_a) 61% 58%);
	--shade_00: hsl(var(--tint_hue) var(--tint_saturation) 6%);
	--shade_10: hsl(var(--tint_hue) var(--tint_saturation) 12%);
	--shade_30: hsl(var(--tint_hue) var(--tint_saturation) 26%);
	--shade_50: hsl(var(--tint_hue) var(--tint_saturation) 48%);
	--shade_max: #fff;
	--shade_min: #000;
	--shadow_alpha_30: 37%;
	--shadow_alpha_40: 47%;
	--shadow_alpha_50: 59%;
	--shadow_alpha_70: 83%;
	--shadow_color_highlight: #000;
	--shadow_color_umbra: hsl(var(--tint_hue) var(--tint_saturation) 82%);
	--text_05: hsl(var(--tint_hue) var(--tint_saturation) 10%);
	--text_10: hsl(var(--tint_hue) var(--tint_saturation) 14%);
	--text_70: hsl(var(--tint_hue) var(--tint_saturation) 69%);
	--text_80: hsl(var(--tint_hue) var(--tint_saturation) 80%);
}

/* Base Styles */

*,
::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);
	color: var(--text_color);
	accent-color: var(--color_a_50);
	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: 100vh;
	font-size: 1.6rem; /* matched to `font-size: 62.5%` and same value as the default `--font_size_md`, but this one shouldn't vary */
	font-family: var(--font_family_sans);
	tab-size: 2; /* TODO var */
}

@media (prefers-reduced-motion) {
	:root {
		/* setting to `initial` disables animations but allows for fallbacks (see PendingAnimation)  */
		--duration_6: initial;
		--duration_5: initial;
		--duration_4: initial;
		--duration_3: initial;
		--duration_2: initial;
		--duration_1: initial;
	}
}

: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);
}

: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);
	--outline_color: var(--border_color);
	text-decoration: var(--text_decoration_selected);
}

:where(a:not(.unstyled).selected:active) {
	--outline_color: var(--border_color);
}

: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(--font_family_serif);
	font-size: var(--font_size, inherit);
	line-height: var(--line_height_sm);
	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);
	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: 400;
	margin-bottom: calc(var(--flow_margin, var(--space_lg)) * 2.54);
	margin-top: calc(var(--flow_margin, var(--space_lg)) * 4.15);
}

:where(h3:not(.unstyled)) {
	--font_size: var(--font_size_xl);
	font-weight: 500;
	margin-bottom: calc(var(--flow_margin, var(--space_lg)) * 2);
	margin-top: calc(var(--flow_margin, var(--space_lg)) * 3.23);
}

:where(h4:not(.unstyled)) {
	--font_size: var(--font_size_lg);
	font-weight: 700;
	margin-bottom: calc(var(--flow_margin, var(--space_lg)) * 1.62);
	margin-top: calc(var(--flow_margin, var(--space_lg)) * 2.54);
}

:where(h5:not(.unstyled)) {
	--font_size: var(--font_size_md);
	font-weight: 900;
	margin-bottom: calc(var(--flow_margin, var(--space_lg)) * 1.23);
	margin-top: calc(var(--flow_margin, var(--space_lg)) * 2);
}

:where(h6:not(.unstyled)) {
	--font_size: var(--font_size_sm);
	font-weight: 600;
	margin-bottom: var(--flow_margin, var(--space_lg));
	margin-top: calc(var(--flow_margin, var(--space_lg)) * 1.62);
	text-transform: uppercase;
}

: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)) {
	margin-bottom: var(--space_xl7);
}

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

:where(aside:not(.unstyled)) {
	border-left-color: var(--border_color);
	border-left-style: var(--border_style);
	border-left-width: var(--border_width_3);
	border-radius: var(--border_radius, var(--border_radius_xs));
	padding: var(--space_md);
	color: var(--text_color);
	background-color: var(--fg_10);
}

: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:not(.unstyled)) {
	white-space: pre-wrap;
	font-family: var(--font_family_mono);
	-webkit-hyphens: none;
	hyphens: none;
	color: var(--text_color);
	background-color: var(--fg_05);
	padding: 0 var(--space_xs2);
	border-radius: var(--border_radius, var(--border_radius_xs));
}

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

:where(pre:not(.unstyled)) {
	font-family: var(--font_family_mono);
	color: var(--text_color);
	white-space: pre;
	overflow: auto;
	max-width: 100%;
}

:where(hr:not(.unstyled)) {
	border-top: 1px solid var(--border_color_30);
	border-bottom: 2px solid var(--border_color_30);
	border-left: none;
	border-right: none;
	width: 100%;
	height: 5px;
	margin: var(--space_xl7) 0;
}

:where(fieldset:not(.unstyled)) {
	display: flex;
	flex-direction: column;
}

:where(legend:not(.unstyled)) {
	font-size: var(--font_size_lg);
}

:where(input, textarea, select) {
	font: inherit;
}

:where(:is(input, textarea, select):not(.unstyled)) {
	appearance: none;
	line-height: normal;
	display: block;
	color: var(--text_color);
	background-color: var(--input_fill);
	border-color: var(--border_color);
	border-style: var(--border_style);
	border-width: var(--border_width);
	border-radius: var(--border_radius, var(--border_radius_sm));
	/* TODO --outline_color should default to --hue when available, but can't be set above */
	outline: var(--outline_width) var(--outline_style) var(--outline_color);
	padding: var(--input_padding_y) var(--input_padding_x);
	width: 100%;
	min-width: var(--input_width_min);
	min-height: var(--input_height);
}

:where(textarea:not(.unstyled)) {
	--input_padding_y: var(--space_sm);
	height: 100px;
	resize: vertical;
}

:where(:is(select, option, input[type='color']):not(:disabled)) {
	cursor: pointer;
}

:where(option:not(.unstyled)) {
	color: var(--text_color);
	background-color: var(--shade_00);
}

:where(:is(input, textarea, select):not(.unstyled):hover) {
	--border_color: var(--border_color_20);
}

:where(input[type='checkbox']:not(.unstyled)) {
	cursor: pointer;
	width: var(--input_height_compact);
	height: var(--input_height_compact);
	min-width: var(--input_height_compact);
	min-height: var(--input_height_compact);
	border-radius: var(--border_radius, var(--border_radius_xs));
	--input_padding_x: 0;
	--checkbox_content: var(--checkbox_content_empty, '');
}

:where(input[type='checkbox']:not(.unstyled):checked) {
	--checkbox_content: var(--checkbox_content_checked, '✓'); /* ✔✓ ✗ ✘ */
}

:where(input[type='checkbox']:not(.unstyled))::before {
	content: var(--checkbox_content);
	position: relative;
	left: var(--left);
	top: var(--top);
	width: 100%;
	height: 100%;
	text-align: center;
	line-height: normal;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: var(--overflow, visible);
	font-size: var(--font_size, var(--font_size_xl3));
	color: var(--text_color);
}

:where(input[type='radio']:not(.unstyled)) {
	cursor: pointer;
	width: var(--input_height_compact);
	height: var(--input_height_compact);
	border-radius: 50%;
	min-width: var(--input_height_compact);
	min-height: var(--input_height_compact);
	--input_padding_x: 0;
}

:where(input[type='radio']:not(.unstyled):checked)::before {
	content: '';
	display: block;
	position: relative;
	top: 25%;
	left: 25%;
	width: 50%;
	height: 50%;
	background-color: var(--text_color);
	border-radius: 50%;
}

:where(input[type='range']:not(.unstyled)) {
	--thumb_size: var(--space_xl);
	--thumb_background_color: var(--text_70);
	cursor: pointer;
}

:where(input[type='range']:not(.unstyled):hover:not(:disabled)) {
	--thumb_background_color: var(--color_a_50);
}

:where(input[type='range']:not(.unstyled):disabled:active) {
	--thumb_background_color: var(--color_c_50);
}

:where(input[type='range']:not(.unstyled))::-webkit-slider-thumb {
	appearance: none;
	height: var(--thumb_size);
	width: var(--thumb_size);
	border-radius: 50%;
	background-color: var(--thumb_background_color);
	border: 0;
	/*

	this is the only line that differs between the `moz` one
	CSS stops parsing if it hits an unknown selector like `::-moz-range-thumb` in Webkit/Blink,
	so we need both declarations anyway, and the declarations can't be combined with plain CSS,
	one of the few times I've wanted to reach for PostCSS

	*/
	margin-top: calc(var(--thumb_size) / -2);
}

:where(input[type='range']:not(.unstyled))::-moz-range-thumb {
	appearance: none;
	height: var(--thumb_size);
	width: var(--thumb_size);
	border-radius: 50%;
	background-color: var(--thumb_background_color);
	border: 0;
}

:where(input[type='range']:not(.unstyled))::-webkit-slider-runnable-track {
	width: 100%;
	height: var(--border_width);
	background-color: var(--thumb_background_color);
}

:where(input[type='range']:not(.unstyled))::-moz-range-track {
	width: 100%;
	height: var(--border_width);
	background-color: var(--thumb_background_color);
}

:where(input:not(.unstyled):checked:not(:disabled)) {
	--text_color: var(--color_a_50);
	--border_color: var(--color_a_50);
}

:where(input[type='radio']:not(.unstyled):checked) {
	cursor: default;
}

: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(:is(input, textarea, select):not(.unstyled):disabled) {
	/* TODO ideally these would just set `fill`, but they'd have to go after the button variants, and then duplicate selectors? */
	--input_fill: transparent;
	--border_style: solid dashed;
	opacity: var(--disabled_opacity);
	outline: none;
}

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

:where(:is(input, textarea, select, [contenteditable]):not(.unstyled):active) {
	--outline_width: var(--outline_width_active);
}

:where(label:not(.unstyled)) {
	display: block;
	color: var(--text_color);
	cursor: pointer;
}

:where(:is(label:not(.unstyled) .title)) {
	font-weight: 600;
	margin-bottom: var(--space_xs2);
}

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

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

: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)) {
	--text_color: var(--text_70);
	--button_text_color: var(--text_color);
	--button_fill: color-mix(in hsl, var(--fill, var(--shade_50)) 8%, transparent);
	--button_fill_hover: color-mix(in hsl, var(--fill, var(--shade_50)) 16%, transparent);
	--button_fill_active: color-mix(in hsl, var(--fill, var(--shade_50)) 24%, transparent);
	--button_border_color: var(--border_color);
	/* TODO give real values, 90%? */
	--button_border_color_hover: color-mix(in hsl, var(--border_color) 90%, var(--shade_max));
	--button_border_color_active: color-mix(in hsl, var(--border_color) 80%, var(--shade_max));
	color: var(--button_text_color);
	background-color: var(--button_fill);
	cursor: pointer;
	appearance: none;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	font: inherit;
	font-size: var(--font_size, inherit);
	font-weight: 700;
	line-height: normal;
	min-height: var(--button_min_height, var(--input_height));
	padding: 0 var(--input_padding_x);
	box-shadow: var(--shadow, var(--button_shadow));
	border-width: var(--border_width);
	border-style: var(--border_style);
	border-color: var(--button_border_color);
	border-radius: var(--border_radius, var(--border_radius_sm));
	outline: var(--outline_width) var(--outline_style) var(--outline_color);
}

:where(:is(button, input, textarea, select):not(.unstyled):focus) {
	--border_color: var(--color_a_50);
	--outline_width: var(--outline_width_focus);
}

:where(button:not(.unstyled).color_a) {
	--text_color: var(--color_a_50);
	--fill: var(--color_a_40);
	--border_color: var(--color_a_50);
	--outline_color: var(--color_a_50);
}

:where(button:not(.unstyled).color_b) {
	--text_color: var(--color_b_50);
	--fill: var(--color_b_40);
	--border_color: var(--color_b_50);
	--outline_color: var(--color_b_50);
}

:where(button:not(.unstyled).color_c) {
	--text_color: var(--color_c_50);
	--fill: var(--color_c_40);
	--border_color: var(--color_c_50);
	--outline_color: var(--color_c_50);
}

:where(button:not(.unstyled).color_d) {
	--text_color: var(--color_d_50);
	--fill: var(--color_d_40);
	--border_color: var(--color_d_50);
	--outline_color: var(--color_d_50);
}

:where(button:not(.unstyled).color_e) {
	--text_color: var(--color_e_50);
	--fill: var(--color_e_40);
	--border_color: var(--color_e_50);
	--outline_color: var(--color_e_50);
}

:where(button:not(.unstyled).color_f) {
	--text_color: var(--color_f_50);
	--fill: var(--color_f_40);
	--border_color: var(--color_f_50);
	--outline_color: var(--color_f_50);
}

:where(button:not(.unstyled).color_g) {
	--text_color: var(--color_g_50);
	--fill: var(--color_g_40);
	--border_color: var(--color_g_50);
	--outline_color: var(--color_g_50);
}

:where(button:not(.unstyled).color_h) {
	--text_color: var(--color_h_50);
	--fill: var(--color_h_40);
	--border_color: var(--color_h_50);
	--outline_color: var(--color_h_50);
}

:where(button:not(.unstyled).color_i) {
	--text_color: var(--color_i_50);
	--fill: var(--color_i_40);
	--border_color: var(--color_i_50);
	--outline_color: var(--color_i_50);
}

:where(button:not(.unstyled).color_j) {
	--text_color: var(--color_j_50);
	--fill: var(--color_j_40);
	--border_color: var(--color_j_50);
	--outline_color: var(--color_j_50);
}

:where(button:not(.unstyled):disabled) {
	/* TODO ideally these would just set `fill`, but they'd have to go after the button variants, and then duplicate selectors? */
	--button_fill: transparent;
	--border_style: solid dashed;
	cursor: default;
	box-shadow: none;
	opacity: var(--disabled_opacity);
	outline: none;
}

:where(button:not(.unstyled).selected) {
	--button_text_color: var(--text_05);
	--button_fill: var(--fill, var(--shade_50));
	--button_fill_hover: var(--fill, var(--shade_50));
	--button_fill_active: var(--fill, var(--shade_50));
	--button_border_color: var(--border_color);
}

: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):not(:disabled):hover, button:not(.unstyled):focus) {
	--button_fill: var(--button_fill_hover);
	--button_border_color: var(--button_border_color_hover);
	--shadow: var(--button_shadow_hover);
}

:where(button:not(.unstyled):not(.selected):not(:disabled):hover) {
	/* TODO or set a hover var? make consistent with fill */
	--button_border_color: var(--button_border_color_hover);
	--button_text_color: color-mix(in hsl, var(--text_color) 90%, var(--shade_max));
}

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

:where(button:not(.unstyled):not(:disabled):active) {
	--button_fill: var(--button_fill_active);
	--button_border_color: var(--button_border_color_active);
	--outline_width: var(--outline_width_active);
	--shadow: var(--button_shadow_active);
}

:where(
	:is(input, textarea, select, button):not(.unstyled):disabled:active,
	label:not(.unstyled).disabled:active
) {
	--text_color: var(--color_c_50);
	--border_color: var(--color_c_50);
}

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

:where(button:not(.unstyled):not(.selected):disabled:active) {
	--fill: transparent;
}

: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 */
}

:where(summary:not(.unstyled)) {
	cursor: pointer;
	padding: var(--space_md);
	border-radius: var(--border_radius, var(--border_radius_xs));
}

:where(summary:hover:not(.unstyled)) {
	background-color: var(--fg_10);
}

:where(summary:active:not(.unstyled)) {
	background-color: var(--fg_20);
}

:where(details[open] summary:not(.unstyled)) {
	margin-bottom: var(--space_sm);
}

:where(table) {
	border-collapse: collapse;
}

:where(thead) {
	text-align: left;
}

:where(th) {
	font-weight: bold;
}

:where(th, td) {
	padding: var(--space_xs3) var(--space_sm);
}

:where(tr) {
	border-bottom: 1px solid var(--border_color_10);
}

:where(tr:hover) {
	background-color: var(--fg_10);
}

:where(b, strong) {
	font-weight: bolder;
}

/* Utility Classes */

.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; }
.ellipsis { display: block;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis; }
.selectable {
				--button_fill: color-mix(in hsl, var(--shade_50) 8%, transparent);
				--button_fill_hover: color-mix(in hsl, var(--shade_50) 16%, transparent);
				--button_fill_active: color-mix(in hsl, var(--shade_50) 24%, transparent);
				cursor: pointer;
				background-color: var(--button_fill);
				border-color: var(--border_color_30);
				border-style: var(--border_style);
				border-width: var(--border_width);
			}
			.selectable:hover {
				background-color: var(--button_fill_hover);
				border-color: var(--border_color_20);
			}
			.selectable.selected,
			.selectable:active {
				background-color: var(--button_fill_active);
				border-color: var(--color_a_50);
			}
			.selectable.selected {
				cursor: default;
			}
			.selectable.selected.deselectable:not(:disabled) {
				cursor: pointer;
			}
/* A pane is a box floating over the page, like for dialogs. By default it's opaque, resetting the background to the initial depth. */
.pane { background-color: var(--shade_00);
			box-shadow: var(--pane_shadow, var(--shadow_bottom_md) color-mix(in hsl, var(--shadow_color, var(--shadow_color_umbra)) var(--shadow_alpha_50), transparent));
			border-radius: var(--border_radius, var(--border_radius_xs)); }
/* 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); }
/*
TODO other button variants?
TODO this is slightly strange that it doesn't use --icon_size.
These are used as modifiers to buttons.
*/
.icon_button { width: var(--input_height);
			height: var(--input_height);
			min-width: var(--input_height);
			min-height: var(--input_height);
			flex-shrink: 0;
			line-height: 1;
			font-weight: 900;
			padding: 0; }
/* TODO maybe this belongs with the reset, like `selected`? or does `selected` belong here? */
.plain:not(:hover) {
				--border_color: transparent;
				box-shadow: none;
				--button_fill: transparent;
			}
			.plain:hover, .plain:active {
				--border_color: transparent;
			}
.menuitem {
				--border_color: var(--border_color_30);
				border-radius: 0;
				position: relative;
				z-index: 2;
				cursor: pointer;
				width: 100%;
				min-height: var(--menuitem_min_height, var(--input_height_compact));
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: var(--menuitem_padding, var(--space_xs3) var(--space_xs));
			}
			.menuitem.selected {
				/* TODO different patterns for border and surface? */
				--border_color: var(--color_a_50);
				background-color: var(--fg_10);
				z-index: 1;
				cursor: default;
			}
			.menuitem.selected.deselectable:not(:disabled) {
				cursor: pointer;
			}
			.menuitem:hover {
				--border_color: var(--border_color_30);
				background-color: var(--fg_10);
			}
			.menuitem:active,
			.menuitem.selected:hover {
				--border_color: var(--border_color_30);
				background-color: var(--fg_20);
			}
			.menuitem.plain {
				border: none;
			}
			.menuitem .content {
				display: flex;
				align-items: center;
				flex: 1;
				/* allows the flex children to shrink */
				min-width: 0;
			}
			.menuitem .icon {
				width: var(--icon_size, var(--icon_size_md));
				margin-right: var(--space_sm);
				flex-shrink: 0;
				text-align: center;
				font-weight: 900;
			}
			.menuitem .title {
				margin-right: var(--space_lg);
				flex-shrink: 1;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
				line-height: var(--line_height_lg); /* prevents the bottom of g's and others from being cut off */
			}
.chip {
				font-weight: 500;
				font-size: var(--font_size, inherit);
				padding-left: var(--chip_padding_x, var(--space_xs));
				padding-right: var(--chip_padding_x, var(--space_xs));
				background-color: var(--fg_10);
				border-radius: var(--border_radius, var(--border_radius_xs));
			}
			a.chip {
				font-weight: 600;
			}
			.chip.color_a {
				color: var(--color_a_50);
				background-color: var(--color_a_10);
			}
			.chip.color_b {
				color: var(--color_b_50);
				background-color: var(--color_b_10);
			}
			.chip.color_c {
				color: var(--color_c_50);
				background-color: var(--color_c_10);
			}
			.chip.color_d {
				color: var(--color_d_50);
				background-color: var(--color_d_10);
			}
			.chip.color_e {
				color: var(--color_e_50);
				background-color: var(--color_e_10);
			}
			.chip.color_f {
				color: var(--color_f_50);
				background-color: var(--color_f_10);
			}
			.chip.color_g {
				color: var(--color_g_50);
				background-color: var(--color_g_10);
			}
			.chip.color_h {
				color: var(--color_h_50);
				background-color: var(--color_h_10);
			}
			.chip.color_i {
				color: var(--color_i_50);
				background-color: var(--color_i_10);
			}
			.chip.color_j {
				color: var(--color_j_50);
				background-color: var(--color_j_10);
			}
.font_family_mono { font-family: var(--font_family_mono); }
.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); }
.font_size_xl { font-size: var(--font_size_xl); --font_size: var(--font_size_xl); }
.font_size_xl2 { font-size: var(--font_size_xl2); --font_size: var(--font_size_xl2); }
.text_70 { color: var(--text_70); --text_color: var(--text_70); }
.shade_00 { background-color: var(--shade_00); }
.color_a_50 { color: var(--color_a_50); --text_color: var(--color_a_50); }
.color_b_50 { color: var(--color_b_50); --text_color: var(--color_b_50); }
.color_c_50 { color: var(--color_c_50); --text_color: var(--color_c_50); }
.color_d_50 { color: var(--color_d_50); --text_color: var(--color_d_50); }
.color_e_50 { color: var(--color_e_50); --text_color: var(--color_e_50); }
.color_f_50 { color: var(--color_f_50); --text_color: var(--color_f_50); }
.color_g_50 { color: var(--color_g_50); --text_color: var(--color_g_50); }
.color_h_50 { color: var(--color_h_50); --text_color: var(--color_h_50); }
.color_i_50 { color: var(--color_i_50); --text_color: var(--color_i_50); }
.color_j_50 { color: var(--color_j_50); --text_color: var(--color_j_50); }
.border_radius_sm { border-radius: var(--border_radius_sm); }
.shadow_inset_xs { box-shadow: var(--shadow_inset_xs) color-mix(in hsl, var(--shadow_color, var(--shadow_color_umbra)) var(--shadow_alpha, var(--shadow_alpha_30)), transparent); }
.width\:100\% { width: 100%; }
.height\:100\% { height: 100%; }
.width_atmost_sm { width: 100%; max-width: var(--distance_sm); }
.width_atmost_md { width: 100%; max-width: var(--distance_md); }
.top\:0 { top: 0; }
.right\:0 { right: 0; }
.p_sm { padding: var(--space_sm); }
.p_md { padding: var(--space_md); }
.p_lg { padding: var(--space_lg); }
.p_xl { padding: var(--space_xl); }
.pb_0 { padding-bottom: 0; }
.pb_xl { padding-bottom: var(--space_xl); }
.pl_lg { padding-left: var(--space_lg); }
.pl_xl { padding-left: var(--space_xl); }
.pl_xl2 { padding-left: var(--space_xl2); }
.pl_xl3 { padding-left: var(--space_xl3); }
.px_md { padding-left: var(--space_md);	padding-right: var(--space_md); }
.px_lg { padding-left: var(--space_lg);	padding-right: var(--space_lg); }
.px_xl { padding-left: var(--space_xl);	padding-right: var(--space_xl); }
.py_xs { padding-top: var(--space_xs);	padding-bottom: var(--space_xs); }
.py_md { padding-top: var(--space_md);	padding-bottom: var(--space_md); }
.mt_0 { margin-top: 0; }
.mt_xs { margin-top: var(--space_xs); }
.mt_xl4 { margin-top: var(--space_xl4); }
.mr_xs { margin-right: var(--space_xs); }
.mb_0 { margin-bottom: 0; }
.mb_xs { margin-bottom: var(--space_xs); }
.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_xl5 { margin-bottom: var(--space_xl5); }
.mb_xl7 { margin-bottom: var(--space_xl7); }
.mb_xl9 { margin-bottom: var(--space_xl9); }
.ml_sm { margin-left: var(--space_sm); }
.mx_auto { margin-left: auto;	margin-right: auto; }
.gap_xs2 { gap: var(--space_xs2); }
.gap_md { gap: var(--space_md); }
.align-items\:center { align-items: center; }
.display\:block { display: block; }
.display\:flex { display: flex; }
.display\:inline-flex { display: inline-flex; }
.flex\:1 { flex: 1; }
.font-weight\:400 { font-weight: 400; }
.font-weight\:500 { font-weight: 500; }
.justify-content\:space-between { justify-content: space-between; }
.position\:absolute { position: absolute; }
.position\:relative { position: relative; }
.position\:sticky { position: sticky; }
.text-align\:center { text-align: center; }
.word-break\:break-all { word-break: break-all; }


/* generated by vite_plugin_fuz_css */