/* 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;
	--backdrop_color: var(--darken_60);
	--background_image: none;
	--bg_80: var(--lighten_80);
	--border_color: var(--shade_30);
	--border_color_10: oklch(var(--border_color_lightness) var(--border_color_chroma) var(--hue_neutral) / 7%);
	--border_color_30: oklch(var(--border_color_lightness) var(--border_color_chroma) var(--hue_neutral) / 22%);
	--border_color_chroma: calc(var(--neutral_chroma) * 2.6667);
	--border_color_lightness: 0.345;
	--border_radius_md: max(var(--border_radius_min), calc(2.1rem * var(--radius_scale)));
	--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_3: 3px;
	--border_width_4: 4px;
	--border_width_8: 8px;
	--button_border_style: var(--border_style);
	--button_border_style_active: var(--button_border_style);
	--button_shadow: var(--shadow_inset_bottom_xs) color-mix(in oklab, var(--shadow_color_umbra) var(--shadow_alpha_30), transparent), var(--shadow_inset_top_xs) color-mix(in oklab, var(--shadow_color_highlight) var(--shadow_alpha_30), transparent);
	--button_shadow_active: var(--shadow_inset_top_sm) color-mix(in oklab, var(--shadow_color_umbra) var(--shadow_alpha_40), transparent), var(--shadow_inset_bottom_sm) color-mix(in oklab, var(--shadow_color_highlight) var(--shadow_alpha_40), transparent);
	--button_shadow_hover: var(--shadow_inset_bottom_sm) color-mix(in oklab, var(--shadow_color_umbra) var(--shadow_alpha_40), transparent), var(--shadow_inset_top_sm) color-mix(in oklab, var(--shadow_color_highlight) var(--shadow_alpha_40), transparent);
	--caret_color: var(--accent_50);
	--chroma_curve: 1.3;
	--chroma_scale: 1;
	--chroma_shape_00: 0;
	--chroma_shape_10: calc(pow(0.36, 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)));
	--control_radius: var(--border_radius_sm);
	--darken_05: #00000008;
	--darken_10: #0000000f;
	--darken_20: #0000001f;
	--darken_60: #000000a6;
	--darken_80: #000000e3;
	--disabled_opacity: 60%;
	--distance_md: 800px;
	--distance_sm: 320px;
	--duration_2: 0.2s;
	--fg_05: var(--darken_05);
	--fg_10: var(--darken_10);
	--fg_20: var(--darken_20);
	--font_family: var(--font_family_sans);
	--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: 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_sm: calc(1.3rem * var(--font_size_scale));
	--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_md: 48px;
	--icon_size_sm: 32px;
	--icon_size_xl2: 192px;
	--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_05: #ffffff08;
	--lighten_10: #ffffff0f;
	--lighten_20: #ffffff1f;
	--lighten_80: #ffffffe3;
	--line_height_lg: 1.8;
	--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_10: oklch(var(--palette_lightness_10) calc(var(--palette_chroma_10) * var(--chroma_scale, 1) * var(--palette_a_chroma_scale, 1)) var(--hue_a));
	--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_60: oklch(var(--palette_lightness_60) calc(var(--palette_chroma_60) * var(--chroma_scale, 1) * var(--palette_a_chroma_scale, 1)) var(--hue_a));
	--palette_a_chroma_scale: 1;
	--palette_b_10: oklch(var(--palette_lightness_10) calc(var(--palette_chroma_10) * var(--chroma_scale, 1) * var(--palette_b_chroma_scale, 1)) var(--hue_b));
	--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_60: oklch(var(--palette_lightness_60) calc(var(--palette_chroma_60) * var(--chroma_scale, 1) * var(--palette_b_chroma_scale, 1)) var(--hue_b));
	--palette_b_chroma_scale: 1;
	--palette_c_10: oklch(var(--palette_lightness_10) calc(var(--palette_chroma_10) * var(--chroma_scale, 1) * var(--palette_c_chroma_scale, 1)) var(--hue_c));
	--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_60: oklch(var(--palette_lightness_60) calc(var(--palette_chroma_60) * var(--chroma_scale, 1) * var(--palette_c_chroma_scale, 1)) var(--hue_c));
	--palette_c_chroma_scale: 1;
	--palette_chroma_10: min(calc(var(--palette_chroma_min) + (var(--palette_chroma_max) - var(--palette_chroma_min)) * var(--chroma_shape_10)), 0.0382);
	--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_10: oklch(var(--palette_lightness_10) calc(var(--palette_chroma_10) * var(--chroma_scale, 1) * var(--palette_d_chroma_scale, 1)) var(--hue_d));
	--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_60: oklch(var(--palette_lightness_60) calc(var(--palette_chroma_60) * var(--chroma_scale, 1) * var(--palette_d_chroma_scale, 1)) var(--hue_d));
	--palette_d_chroma_scale: 1;
	--palette_e_10: oklch(var(--palette_lightness_10) calc(var(--palette_chroma_10) * var(--chroma_scale, 1) * var(--palette_e_chroma_scale, 1)) var(--hue_e));
	--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_60: oklch(var(--palette_lightness_60) calc(var(--palette_chroma_60) * var(--chroma_scale, 1) * var(--palette_e_chroma_scale, 1)) var(--hue_e));
	--palette_e_chroma_scale: 1;
	--palette_f_10: oklch(var(--palette_lightness_10) calc(var(--palette_chroma_10) * var(--chroma_scale, 1) * var(--palette_f_chroma_scale, 1)) var(--hue_f));
	--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_60: oklch(var(--palette_lightness_60) calc(var(--palette_chroma_60) * var(--chroma_scale, 1) * var(--palette_f_chroma_scale, 1)) var(--hue_f));
	--palette_f_chroma_scale: 0.55;
	--palette_g_10: oklch(var(--palette_lightness_10) calc(var(--palette_chroma_10) * var(--chroma_scale, 1) * var(--palette_g_chroma_scale, 1)) var(--hue_g));
	--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_60: oklch(var(--palette_lightness_60) calc(var(--palette_chroma_60) * var(--chroma_scale, 1) * var(--palette_g_chroma_scale, 1)) var(--hue_g));
	--palette_g_chroma_scale: 1;
	--palette_h_10: oklch(var(--palette_lightness_10) calc(var(--palette_chroma_10) * var(--chroma_scale, 1) * var(--palette_h_chroma_scale, 1)) var(--hue_h));
	--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_60: oklch(var(--palette_lightness_60) calc(var(--palette_chroma_60) * var(--chroma_scale, 1) * var(--palette_h_chroma_scale, 1)) var(--hue_h));
	--palette_h_chroma_scale: 1;
	--palette_i_10: oklch(var(--palette_lightness_10) calc(var(--palette_chroma_10) * var(--chroma_scale, 1) * var(--palette_i_chroma_scale, 1)) var(--hue_i));
	--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_60: oklch(var(--palette_lightness_60) calc(var(--palette_chroma_60) * var(--chroma_scale, 1) * var(--palette_i_chroma_scale, 1)) var(--hue_i));
	--palette_i_chroma_scale: 1;
	--palette_j_10: oklch(var(--palette_lightness_10) calc(var(--palette_chroma_10) * var(--chroma_scale, 1) * var(--palette_j_chroma_scale, 1)) var(--hue_j));
	--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_60: oklch(var(--palette_lightness_60) calc(var(--palette_chroma_60) * 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_10: calc(var(--palette_lightness_00) + (var(--palette_lightness_100) - var(--palette_lightness_00)) * pow(0.1, var(--palette_lightness_curve)));
	--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;
	--pane_shadow: var(--shadow_bottom_md) color-mix(in oklab, var(--shadow_color_umbra) var(--shadow_alpha_50), transparent);
	--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_10: oklch(var(--shade_lightness_10) calc(var(--neutral_chroma) * var(--chroma_shape_10)) 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_10: calc(var(--shade_lightness_00) + (var(--shade_lightness_100) - var(--shade_lightness_00)) * pow(0.1, 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;
	--shade_max: #000;
	--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_70: calc(77% * var(--shadow_alpha_scale));
	--shadow_alpha_scale: 1;
	--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: oklch(0.955 0.003 var(--hue_neutral));
	--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: 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_xl5: calc(4.2rem * var(--space_scale));
	--space_xl6: calc(5.4rem * var(--space_scale));
	--space_xl7: calc(6.9rem * 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));
	--space_xs3: calc(0.3rem * var(--space_scale));
	--space_xs4: calc(0.2rem * 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_disabled: var(--text_50);
	--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 {
	--bg_80: var(--darken_80);
	--border_color_10: oklch(var(--border_color_lightness) var(--border_color_chroma) var(--hue_neutral) / 14%);
	--border_color_30: oklch(var(--border_color_lightness) var(--border_color_chroma) var(--hue_neutral) / 32%);
	--border_color_chroma: calc(var(--neutral_chroma) * 2.12);
	--border_color_lightness: 0.857;
	--button_shadow: var(--shadow_inset_top_xs) color-mix(in oklab, var(--shadow_color_umbra) var(--shadow_alpha_30), transparent), var(--shadow_inset_bottom_xs) color-mix(in oklab, var(--shadow_color_highlight) var(--shadow_alpha_30), transparent);
	--button_shadow_active: var(--shadow_inset_bottom_sm) color-mix(in oklab, var(--shadow_color_umbra) var(--shadow_alpha_40), transparent), var(--shadow_inset_top_sm) color-mix(in oklab, var(--shadow_color_highlight) var(--shadow_alpha_40), transparent);
	--button_shadow_hover: var(--shadow_inset_top_sm) color-mix(in oklab, var(--shadow_color_umbra) var(--shadow_alpha_40), transparent), var(--shadow_inset_bottom_sm) color-mix(in oklab, var(--shadow_color_highlight) var(--shadow_alpha_40), transparent);
	--chroma_curve: 1.27;
	--fg_05: var(--lighten_05);
	--fg_10: var(--lighten_10);
	--fg_20: var(--lighten_20);
	--neutral_chroma: 0.025;
	--palette_chroma_10: min(calc(var(--palette_chroma_min) + (var(--palette_chroma_max) - var(--palette_chroma_min)) * var(--chroma_shape_10)), 0.0501);
	--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;
	--shade_max: #fff;
	--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_alpha_70: calc(83% * var(--shadow_alpha_scale));
	--shadow_color_highlight: #000;
	--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);
	}

:where(input, textarea)::placeholder {
		opacity: 1;
		color: color-mix(in oklab, currentcolor 50%, transparent);
	}

:where(input)::file-selector-button {
		font: inherit;
		cursor: pointer;
	}

:where(dialog:not(.unstyled))::backdrop {
		/* same default dim as fuz_ui's Dialog, themable through one variable,
			then its default `--darken_60` for a variable set without it. Older
			browsers don't let ::backdrop inherit custom properties from the
			page, so the last fallback is that value as a literal */
		background-color: var(--backdrop_color, var(--darken_60, #000000a6));
	}

[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(h3:not(.unstyled)) {
		--font_size: var(--font_size_xl);
		font-weight: var(--heading_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: var(--heading_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: var(--heading_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(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(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(button, input, textarea, select) {
		font: inherit;
	}

:where(:is(input, textarea, select):not(.unstyled)) {
		appearance: none;
		line-height: normal;
		display: block;
		color: var(--text_color);
		caret-color: var(--caret_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(--control_radius));
		outline: var(--outline_width) var(--outline_style) var(--outline_color);
		outline-offset: var(--outline_offset);
		padding: var(--input_padding_y) var(--input_padding_x);
		width: 100%;
		min-width: var(--input_width_min);
		min-height: var(--input_height);
	}

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

:where(:is(input, textarea, select):not(.unstyled):hover:not(:disabled)) {
		/* hover previews the focus color - the element color when set (an
			outline_* class), else the accent intent; focus then adds the outline
			at the same color, escalating visibility (buttons hover through
			--button_border_color_hover instead) */
		--border_color: var(--outline_color);
	}

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

:where(input[type='range']:not(.unstyled):disabled:active) {
		--thumb_background_color: var(--negative_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(--accent_50);
		--border_color: var(--accent_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);
		outline-offset: var(--outline_offset);
	}

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

:where([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(--accent_60);
	}

: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 oklab, var(--fill, var(--shade_50)) 8%, transparent);
		--button_fill_hover: color-mix(in oklab, var(--fill, var(--shade_50)) 16%, transparent);
		--button_fill_active: color-mix(in oklab, 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 oklab, var(--border_color) 90%, var(--shade_max));
		--button_border_color_active: color-mix(in oklab, 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-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(--button_border_style);
		border-color: var(--button_border_color);
		border-radius: var(--border_radius, var(--control_radius));
		outline: var(--outline_width) var(--outline_style) var(--outline_color);
		outline-offset: var(--outline_offset);
	}

:where(:is(button, input, textarea, select):not(.unstyled):focus) {
		/* follows the element color when set (an outline_* class; on buttons,
			.palette_*), else the accent intent */
		--border_color: var(--outline_color);
		--outline_width: var(--outline_width_focus);
	}

:where(button:not(.unstyled).palette_a) {
		--text_color: var(--palette_a_60);
		--fill: var(--palette_a_60);
		--border_color: var(--palette_a_60);
		--outline_color: var(--palette_a_60);
	}

:where(button:not(.unstyled).palette_b) {
		--text_color: var(--palette_b_60);
		--fill: var(--palette_b_60);
		--border_color: var(--palette_b_60);
		--outline_color: var(--palette_b_60);
	}

:where(button:not(.unstyled).palette_c) {
		--text_color: var(--palette_c_60);
		--fill: var(--palette_c_60);
		--border_color: var(--palette_c_60);
		--outline_color: var(--palette_c_60);
	}

:where(button:not(.unstyled).palette_d) {
		--text_color: var(--palette_d_60);
		--fill: var(--palette_d_60);
		--border_color: var(--palette_d_60);
		--outline_color: var(--palette_d_60);
	}

:where(button:not(.unstyled).palette_e) {
		--text_color: var(--palette_e_60);
		--fill: var(--palette_e_60);
		--border_color: var(--palette_e_60);
		--outline_color: var(--palette_e_60);
	}

:where(button:not(.unstyled).palette_f) {
		--text_color: var(--palette_f_60);
		--fill: var(--palette_f_60);
		--border_color: var(--palette_f_60);
		--outline_color: var(--palette_f_60);
	}

:where(button:not(.unstyled).palette_g) {
		--text_color: var(--palette_g_60);
		--fill: var(--palette_g_60);
		--border_color: var(--palette_g_60);
		--outline_color: var(--palette_g_60);
	}

:where(button:not(.unstyled).palette_h) {
		--text_color: var(--palette_h_60);
		--fill: var(--palette_h_60);
		--border_color: var(--palette_h_60);
		--outline_color: var(--palette_h_60);
	}

:where(button:not(.unstyled).palette_i) {
		--text_color: var(--palette_i_60);
		--fill: var(--palette_i_60);
		--border_color: var(--palette_i_60);
		--outline_color: var(--palette_i_60);
	}

:where(button:not(.unstyled).palette_j) {
		--text_color: var(--palette_j_60);
		--fill: var(--palette_j_60);
		--border_color: var(--palette_j_60);
		--outline_color: var(--palette_j_60);
	}

: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;
		--button_border_style: solid dashed;
		cursor: default;
		box-shadow: none;
		opacity: var(--disabled_opacity);
		outline: none;
	}

: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):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) {
		--button_text_color: color-mix(in oklab, var(--text_color) 90%, var(--shade_max));
	}

:where(button:not(.unstyled).selected.deselectable:not(:disabled):hover) {
		--button_text_color: var(--text_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);
		/* set on the property, not the variable - a variable pointing back at
			`--button_border_style` would be a cycle */
		border-style: var(--button_border_style_active);
	}

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

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

: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(small) {
		font-size: var(--font_size_sm);
	}

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

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

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

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

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

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

/* 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; }
.ellipsis { display: block;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis; }
/* 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);
			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);
			box-shadow: var(--panel_shadow); }
/* Smaller sizing, one step down from the default, cascading to children. Works on individual elements or containers. */
.sized_sm { --font_size: var(--font_size_sm);
			--input_height: var(--space_xl4);
			--input_height_compact: var(--space_xl3);
			--input_padding_x: var(--space_md);
			--chip_padding_x: var(--space_xs2);
			--icon_size: var(--icon_size_sm);
			--menuitem_padding: var(--space_xs4) var(--space_xs2);
			--flow_margin: var(--space_md); }
/*
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(.selected) {
				--border_color: transparent;
			}
			.plain:not(.selected, :hover) {
				box-shadow: none;
				--button_fill: transparent;
			}
.menuitem {
				--border_color: var(--border_color_30);
				border-radius: 0;
				position: relative;
				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(--accent_50);
				background-color: var(--fg_10);
				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, revert-layer); /* without a size context, the element's base size wins */
				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.palette_a {
				color: var(--palette_a_60);
				--text_color: var(--palette_a_60);
				background-color: var(--palette_a_10);
			}
			.chip.palette_b {
				color: var(--palette_b_60);
				--text_color: var(--palette_b_60);
				background-color: var(--palette_b_10);
			}
			.chip.palette_c {
				color: var(--palette_c_60);
				--text_color: var(--palette_c_60);
				background-color: var(--palette_c_10);
			}
			.chip.palette_d {
				color: var(--palette_d_60);
				--text_color: var(--palette_d_60);
				background-color: var(--palette_d_10);
			}
			.chip.palette_e {
				color: var(--palette_e_60);
				--text_color: var(--palette_e_60);
				background-color: var(--palette_e_10);
			}
			.chip.palette_f {
				color: var(--palette_f_60);
				--text_color: var(--palette_f_60);
				background-color: var(--palette_f_10);
			}
			.chip.palette_g {
				color: var(--palette_g_60);
				--text_color: var(--palette_g_60);
				background-color: var(--palette_g_10);
			}
			.chip.palette_h {
				color: var(--palette_h_60);
				--text_color: var(--palette_h_60);
				background-color: var(--palette_h_10);
			}
			.chip.palette_i {
				color: var(--palette_i_60);
				--text_color: var(--palette_i_60);
				background-color: var(--palette_i_10);
			}
			.chip.palette_j {
				color: var(--palette_j_60);
				--text_color: var(--palette_j_60);
				background-color: var(--palette_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); }
.text_70 { color: var(--text_70); --text_color: var(--text_70); }
.shade_00 { background-color: var(--shade_00); }
.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_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%; }
.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_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_xl4 { margin-top: var(--space_xl4); }
.mt_xl5 { margin-top: var(--space_xl5); }
.mr_xs { margin-right: 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_xl9 { margin-bottom: var(--space_xl9); }
.my_xl3 { margin-top: var(--space_xl3);	margin-bottom: var(--space_xl3); }
.gap_xs2 { gap: var(--space_xs2); }
.gap_md { gap: var(--space_md); }
.display\:block { display: block; }
.display\:flex { display: flex; }
.flex-wrap\:wrap { flex-wrap: wrap; }
.flex\:1 { flex: 1; }
.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 */
.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}