/* generated by vite_plugin_fuz_css */ @layer fuz.base, fuz.preferences, fuz.theme, fuz.utilities; /* Theme Variables */ @layer fuz.base { :root { --accent_00: oklch(var(--palette_lightness_00) calc(var(--palette_chroma_00) * var(--chroma_scale, 1) * var(--accent_chroma_scale, 1)) var(--hue_accent)); --accent_05: oklch(var(--palette_lightness_05) calc(var(--palette_chroma_05) * var(--chroma_scale, 1) * var(--accent_chroma_scale, 1)) var(--hue_accent)); --accent_10: oklch(var(--palette_lightness_10) calc(var(--palette_chroma_10) * var(--chroma_scale, 1) * var(--accent_chroma_scale, 1)) var(--hue_accent)); --accent_100: oklch(var(--palette_lightness_100) calc(var(--palette_chroma_100) * var(--chroma_scale, 1) * var(--accent_chroma_scale, 1)) var(--hue_accent)); --accent_20: oklch(var(--palette_lightness_20) calc(var(--palette_chroma_20) * var(--chroma_scale, 1) * var(--accent_chroma_scale, 1)) var(--hue_accent)); --accent_30: oklch(var(--palette_lightness_30) calc(var(--palette_chroma_30) * var(--chroma_scale, 1) * var(--accent_chroma_scale, 1)) var(--hue_accent)); --accent_40: oklch(var(--palette_lightness_40) calc(var(--palette_chroma_40) * var(--chroma_scale, 1) * var(--accent_chroma_scale, 1)) var(--hue_accent)); --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_80: oklch(var(--palette_lightness_80) calc(var(--palette_chroma_80) * var(--chroma_scale, 1) * var(--accent_chroma_scale, 1)) var(--hue_accent)); --accent_90: oklch(var(--palette_lightness_90) calc(var(--palette_chroma_90) * var(--chroma_scale, 1) * var(--accent_chroma_scale, 1)) var(--hue_accent)); --accent_95: oklch(var(--palette_lightness_95) calc(var(--palette_chroma_95) * 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_00: var(--lighten_00); --bg_05: var(--lighten_05); --bg_10: var(--lighten_10); --bg_100: var(--lighten_100); --bg_20: var(--lighten_20); --bg_30: var(--lighten_30); --bg_40: var(--lighten_40); --bg_50: var(--lighten_50); --bg_60: var(--lighten_60); --bg_70: var(--lighten_70); --bg_80: var(--lighten_80); --bg_90: var(--lighten_90); --bg_95: var(--lighten_95); --border_color: var(--shade_30); --border_color_00: transparent; --border_color_05: oklch(var(--border_color_lightness) var(--border_color_chroma) var(--hue_neutral) / 4%); --border_color_10: oklch(var(--border_color_lightness) var(--border_color_chroma) var(--hue_neutral) / 7%); --border_color_100: oklch(var(--border_color_lightness) var(--border_color_chroma) var(--hue_neutral)); --border_color_20: oklch(var(--border_color_lightness) var(--border_color_chroma) var(--hue_neutral) / 13%); --border_color_30: oklch(var(--border_color_lightness) var(--border_color_chroma) var(--hue_neutral) / 22%); --border_color_40: oklch(var(--border_color_lightness) var(--border_color_chroma) var(--hue_neutral) / 34%); --border_color_50: oklch(var(--border_color_lightness) var(--border_color_chroma) var(--hue_neutral) / 48%); --border_color_60: oklch(var(--border_color_lightness) var(--border_color_chroma) var(--hue_neutral) / 62%); --border_color_70: oklch(var(--border_color_lightness) var(--border_color_chroma) var(--hue_neutral) / 76%); --border_color_80: oklch(var(--border_color_lightness) var(--border_color_chroma) var(--hue_neutral) / 88%); --border_color_90: oklch(var(--border_color_lightness) var(--border_color_chroma) var(--hue_neutral) / 96%); --border_color_95: oklch(var(--border_color_lightness) var(--border_color_chroma) var(--hue_neutral) / 99%); --border_color_chroma: calc(var(--neutral_chroma) * 2.6667); --border_color_lightness: 0.345; --border_radius_lg: max(var(--border_radius_min), calc(3.4rem * var(--radius_scale))); --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_xl: max(var(--border_radius_min), calc(5.5rem * var(--radius_scale))); --border_radius_xs: max(var(--border_radius_min), calc(0.8rem * var(--radius_scale))); --border_radius_xs2: max(var(--border_radius_min), calc(0.5rem * 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_5: 5px; --border_width_6: 6px; --border_width_7: 7px; --border_width_8: 8px; --border_width_9: 9px; --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); --caution_00: oklch(var(--palette_lightness_00) calc(var(--palette_chroma_00) * var(--chroma_scale, 1) * var(--caution_chroma_scale, 1)) var(--hue_caution)); --caution_05: oklch(var(--palette_lightness_05) calc(var(--palette_chroma_05) * var(--chroma_scale, 1) * var(--caution_chroma_scale, 1)) var(--hue_caution)); --caution_10: oklch(var(--palette_lightness_10) calc(var(--palette_chroma_10) * var(--chroma_scale, 1) * var(--caution_chroma_scale, 1)) var(--hue_caution)); --caution_100: oklch(var(--palette_lightness_100) calc(var(--palette_chroma_100) * var(--chroma_scale, 1) * var(--caution_chroma_scale, 1)) var(--hue_caution)); --caution_20: oklch(var(--palette_lightness_20) calc(var(--palette_chroma_20) * var(--chroma_scale, 1) * var(--caution_chroma_scale, 1)) var(--hue_caution)); --caution_30: oklch(var(--palette_lightness_30) calc(var(--palette_chroma_30) * var(--chroma_scale, 1) * var(--caution_chroma_scale, 1)) var(--hue_caution)); --caution_40: oklch(var(--palette_lightness_40) calc(var(--palette_chroma_40) * var(--chroma_scale, 1) * var(--caution_chroma_scale, 1)) var(--hue_caution)); --caution_50: oklch(var(--palette_lightness_50) calc(var(--palette_chroma_50) * var(--chroma_scale, 1) * var(--caution_chroma_scale, 1)) var(--hue_caution)); --caution_60: oklch(var(--palette_lightness_60) calc(var(--palette_chroma_60) * var(--chroma_scale, 1) * var(--caution_chroma_scale, 1)) var(--hue_caution)); --caution_70: oklch(var(--palette_lightness_70) calc(var(--palette_chroma_70) * var(--chroma_scale, 1) * var(--caution_chroma_scale, 1)) var(--hue_caution)); --caution_80: oklch(var(--palette_lightness_80) calc(var(--palette_chroma_80) * var(--chroma_scale, 1) * var(--caution_chroma_scale, 1)) var(--hue_caution)); --caution_90: oklch(var(--palette_lightness_90) calc(var(--palette_chroma_90) * var(--chroma_scale, 1) * var(--caution_chroma_scale, 1)) var(--hue_caution)); --caution_95: oklch(var(--palette_lightness_95) calc(var(--palette_chroma_95) * var(--chroma_scale, 1) * var(--caution_chroma_scale, 1)) var(--hue_caution)); --caution_chroma_scale: 1; --chroma_curve: 1.3; --chroma_scale: 1; --chroma_shape_00: 0; --chroma_shape_05: calc(pow(0.19, var(--chroma_curve))); --chroma_shape_10: calc(pow(0.36, var(--chroma_curve))); --chroma_shape_100: 0; --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))); --chroma_shape_90: calc(pow(0.36, var(--chroma_curve))); --chroma_shape_95: calc(pow(0.19, var(--chroma_curve))); --control_radius: var(--border_radius_sm); --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_lg: 1200px; --distance_md: 800px; --distance_sm: 320px; --distance_xl: 1600px; --distance_xs: 200px; --duration_1: 0.08s; --duration_2: 0.2s; --duration_3: 0.5s; --duration_4: 1s; --duration_5: 1.5s; --duration_6: 3s; --fg_00: var(--darken_00); --fg_05: var(--darken_05); --fg_10: var(--darken_10); --fg_100: var(--darken_100); --fg_20: var(--darken_20); --fg_30: var(--darken_30); --fg_40: var(--darken_40); --fg_50: var(--darken_50); --fg_60: var(--darken_60); --fg_70: var(--darken_70); --fg_80: var(--darken_80); --fg_90: var(--darken_90); --fg_95: var(--darken_95); --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_size_xl4: calc(1.6rem * var(--font_size_scale) * pow(var(--type_scale_ratio), 5)); --font_size_xl5: calc(1.6rem * var(--font_size_scale) * pow(var(--type_scale_ratio), 6)); --font_size_xl6: calc(1.6rem * var(--font_size_scale) * pow(var(--type_scale_ratio), 7)); --font_size_xl7: calc(1.6rem * var(--font_size_scale) * pow(var(--type_scale_ratio), 8)); --font_size_xl8: calc(1.6rem * var(--font_size_scale) * pow(var(--type_scale_ratio), 9)); --font_size_xl9: calc(1.6rem * var(--font_size_scale) * pow(var(--type_scale_ratio), 10)); --font_size_xs: calc(1rem * var(--font_size_scale)); --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_caution: var(--hue_h); --hue_d: 296; --hue_e: 98; --hue_f: 60; --hue_g: 358; --hue_h: 41; --hue_i: 210; --hue_info: var(--hue_i); --hue_j: 180; --hue_negative: var(--hue_c); --hue_neutral: var(--hue_f); --hue_positive: var(--hue_b); --icon_size_lg: 80px; --icon_size_md: 48px; --icon_size_sm: 32px; --icon_size_xl: 128px; --icon_size_xl2: 192px; --icon_size_xl3: 256px; --icon_size_xs: 18px; --info_00: oklch(var(--palette_lightness_00) calc(var(--palette_chroma_00) * var(--chroma_scale, 1) * var(--info_chroma_scale, 1)) var(--hue_info)); --info_05: oklch(var(--palette_lightness_05) calc(var(--palette_chroma_05) * var(--chroma_scale, 1) * var(--info_chroma_scale, 1)) var(--hue_info)); --info_10: oklch(var(--palette_lightness_10) calc(var(--palette_chroma_10) * var(--chroma_scale, 1) * var(--info_chroma_scale, 1)) var(--hue_info)); --info_100: oklch(var(--palette_lightness_100) calc(var(--palette_chroma_100) * var(--chroma_scale, 1) * var(--info_chroma_scale, 1)) var(--hue_info)); --info_20: oklch(var(--palette_lightness_20) calc(var(--palette_chroma_20) * var(--chroma_scale, 1) * var(--info_chroma_scale, 1)) var(--hue_info)); --info_30: oklch(var(--palette_lightness_30) calc(var(--palette_chroma_30) * var(--chroma_scale, 1) * var(--info_chroma_scale, 1)) var(--hue_info)); --info_40: oklch(var(--palette_lightness_40) calc(var(--palette_chroma_40) * var(--chroma_scale, 1) * var(--info_chroma_scale, 1)) var(--hue_info)); --info_50: oklch(var(--palette_lightness_50) calc(var(--palette_chroma_50) * var(--chroma_scale, 1) * var(--info_chroma_scale, 1)) var(--hue_info)); --info_60: oklch(var(--palette_lightness_60) calc(var(--palette_chroma_60) * var(--chroma_scale, 1) * var(--info_chroma_scale, 1)) var(--hue_info)); --info_70: oklch(var(--palette_lightness_70) calc(var(--palette_chroma_70) * var(--chroma_scale, 1) * var(--info_chroma_scale, 1)) var(--hue_info)); --info_80: oklch(var(--palette_lightness_80) calc(var(--palette_chroma_80) * var(--chroma_scale, 1) * var(--info_chroma_scale, 1)) var(--hue_info)); --info_90: oklch(var(--palette_lightness_90) calc(var(--palette_chroma_90) * var(--chroma_scale, 1) * var(--info_chroma_scale, 1)) var(--hue_info)); --info_95: oklch(var(--palette_lightness_95) calc(var(--palette_chroma_95) * var(--chroma_scale, 1) * var(--info_chroma_scale, 1)) var(--hue_info)); --info_chroma_scale: 1; --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; --line_height_xl: 2.2; --line_height_xs: 1; --link_color: var(--accent_60); --link_color_selected: var(--text_color); --negative_00: oklch(var(--palette_lightness_00) calc(var(--palette_chroma_00) * var(--chroma_scale, 1) * var(--negative_chroma_scale, 1)) var(--hue_negative)); --negative_05: oklch(var(--palette_lightness_05) calc(var(--palette_chroma_05) * var(--chroma_scale, 1) * var(--negative_chroma_scale, 1)) var(--hue_negative)); --negative_10: oklch(var(--palette_lightness_10) calc(var(--palette_chroma_10) * var(--chroma_scale, 1) * var(--negative_chroma_scale, 1)) var(--hue_negative)); --negative_100: oklch(var(--palette_lightness_100) calc(var(--palette_chroma_100) * var(--chroma_scale, 1) * var(--negative_chroma_scale, 1)) var(--hue_negative)); --negative_20: oklch(var(--palette_lightness_20) calc(var(--palette_chroma_20) * var(--chroma_scale, 1) * var(--negative_chroma_scale, 1)) var(--hue_negative)); --negative_30: oklch(var(--palette_lightness_30) calc(var(--palette_chroma_30) * var(--chroma_scale, 1) * var(--negative_chroma_scale, 1)) var(--hue_negative)); --negative_40: oklch(var(--palette_lightness_40) calc(var(--palette_chroma_40) * var(--chroma_scale, 1) * var(--negative_chroma_scale, 1)) var(--hue_negative)); --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_60: oklch(var(--palette_lightness_60) calc(var(--palette_chroma_60) * var(--chroma_scale, 1) * var(--negative_chroma_scale, 1)) var(--hue_negative)); --negative_70: oklch(var(--palette_lightness_70) calc(var(--palette_chroma_70) * var(--chroma_scale, 1) * var(--negative_chroma_scale, 1)) var(--hue_negative)); --negative_80: oklch(var(--palette_lightness_80) calc(var(--palette_chroma_80) * var(--chroma_scale, 1) * var(--negative_chroma_scale, 1)) var(--hue_negative)); --negative_90: oklch(var(--palette_lightness_90) calc(var(--palette_chroma_90) * var(--chroma_scale, 1) * var(--negative_chroma_scale, 1)) var(--hue_negative)); --negative_95: oklch(var(--palette_lightness_95) calc(var(--palette_chroma_95) * 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_00: oklch(var(--palette_lightness_00) calc(var(--palette_chroma_00) * var(--chroma_scale, 1) * var(--palette_a_chroma_scale, 1)) var(--hue_a)); --palette_a_05: oklch(var(--palette_lightness_05) calc(var(--palette_chroma_05) * var(--chroma_scale, 1) * var(--palette_a_chroma_scale, 1)) var(--hue_a)); --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_100: oklch(var(--palette_lightness_100) calc(var(--palette_chroma_100) * var(--chroma_scale, 1) * var(--palette_a_chroma_scale, 1)) var(--hue_a)); --palette_a_20: oklch(var(--palette_lightness_20) calc(var(--palette_chroma_20) * var(--chroma_scale, 1) * var(--palette_a_chroma_scale, 1)) var(--hue_a)); --palette_a_30: oklch(var(--palette_lightness_30) calc(var(--palette_chroma_30) * var(--chroma_scale, 1) * var(--palette_a_chroma_scale, 1)) var(--hue_a)); --palette_a_40: oklch(var(--palette_lightness_40) calc(var(--palette_chroma_40) * 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_70: oklch(var(--palette_lightness_70) calc(var(--palette_chroma_70) * var(--chroma_scale, 1) * var(--palette_a_chroma_scale, 1)) var(--hue_a)); --palette_a_80: oklch(var(--palette_lightness_80) calc(var(--palette_chroma_80) * var(--chroma_scale, 1) * var(--palette_a_chroma_scale, 1)) var(--hue_a)); --palette_a_90: oklch(var(--palette_lightness_90) calc(var(--palette_chroma_90) * var(--chroma_scale, 1) * var(--palette_a_chroma_scale, 1)) var(--hue_a)); --palette_a_95: oklch(var(--palette_lightness_95) calc(var(--palette_chroma_95) * var(--chroma_scale, 1) * var(--palette_a_chroma_scale, 1)) var(--hue_a)); --palette_a_chroma_scale: 1; --palette_b_00: oklch(var(--palette_lightness_00) calc(var(--palette_chroma_00) * var(--chroma_scale, 1) * var(--palette_b_chroma_scale, 1)) var(--hue_b)); --palette_b_05: oklch(var(--palette_lightness_05) calc(var(--palette_chroma_05) * var(--chroma_scale, 1) * var(--palette_b_chroma_scale, 1)) var(--hue_b)); --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_100: oklch(var(--palette_lightness_100) calc(var(--palette_chroma_100) * var(--chroma_scale, 1) * var(--palette_b_chroma_scale, 1)) var(--hue_b)); --palette_b_20: oklch(var(--palette_lightness_20) calc(var(--palette_chroma_20) * var(--chroma_scale, 1) * var(--palette_b_chroma_scale, 1)) var(--hue_b)); --palette_b_30: oklch(var(--palette_lightness_30) calc(var(--palette_chroma_30) * var(--chroma_scale, 1) * var(--palette_b_chroma_scale, 1)) var(--hue_b)); --palette_b_40: oklch(var(--palette_lightness_40) calc(var(--palette_chroma_40) * 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_70: oklch(var(--palette_lightness_70) calc(var(--palette_chroma_70) * var(--chroma_scale, 1) * var(--palette_b_chroma_scale, 1)) var(--hue_b)); --palette_b_80: oklch(var(--palette_lightness_80) calc(var(--palette_chroma_80) * var(--chroma_scale, 1) * var(--palette_b_chroma_scale, 1)) var(--hue_b)); --palette_b_90: oklch(var(--palette_lightness_90) calc(var(--palette_chroma_90) * var(--chroma_scale, 1) * var(--palette_b_chroma_scale, 1)) var(--hue_b)); --palette_b_95: oklch(var(--palette_lightness_95) calc(var(--palette_chroma_95) * var(--chroma_scale, 1) * var(--palette_b_chroma_scale, 1)) var(--hue_b)); --palette_b_chroma_scale: 1; --palette_c_00: oklch(var(--palette_lightness_00) calc(var(--palette_chroma_00) * var(--chroma_scale, 1) * var(--palette_c_chroma_scale, 1)) var(--hue_c)); --palette_c_05: oklch(var(--palette_lightness_05) calc(var(--palette_chroma_05) * var(--chroma_scale, 1) * var(--palette_c_chroma_scale, 1)) var(--hue_c)); --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_100: oklch(var(--palette_lightness_100) calc(var(--palette_chroma_100) * var(--chroma_scale, 1) * var(--palette_c_chroma_scale, 1)) var(--hue_c)); --palette_c_20: oklch(var(--palette_lightness_20) calc(var(--palette_chroma_20) * var(--chroma_scale, 1) * var(--palette_c_chroma_scale, 1)) var(--hue_c)); --palette_c_30: oklch(var(--palette_lightness_30) calc(var(--palette_chroma_30) * var(--chroma_scale, 1) * var(--palette_c_chroma_scale, 1)) var(--hue_c)); --palette_c_40: oklch(var(--palette_lightness_40) calc(var(--palette_chroma_40) * 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_70: oklch(var(--palette_lightness_70) calc(var(--palette_chroma_70) * var(--chroma_scale, 1) * var(--palette_c_chroma_scale, 1)) var(--hue_c)); --palette_c_80: oklch(var(--palette_lightness_80) calc(var(--palette_chroma_80) * var(--chroma_scale, 1) * var(--palette_c_chroma_scale, 1)) var(--hue_c)); --palette_c_90: oklch(var(--palette_lightness_90) calc(var(--palette_chroma_90) * var(--chroma_scale, 1) * var(--palette_c_chroma_scale, 1)) var(--hue_c)); --palette_c_95: oklch(var(--palette_lightness_95) calc(var(--palette_chroma_95) * var(--chroma_scale, 1) * var(--palette_c_chroma_scale, 1)) var(--hue_c)); --palette_c_chroma_scale: 1; --palette_chroma_00: min(calc(var(--palette_chroma_min) + (var(--palette_chroma_max) - var(--palette_chroma_min)) * var(--chroma_shape_00)), 0.0072); --palette_chroma_05: min(calc(var(--palette_chroma_min) + (var(--palette_chroma_max) - var(--palette_chroma_min)) * var(--chroma_shape_05)), 0.021); --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_100: min(calc(var(--palette_chroma_min) + (var(--palette_chroma_max) - var(--palette_chroma_min)) * var(--chroma_shape_100)), 0.02); --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_30: min(calc(var(--palette_chroma_min) + (var(--palette_chroma_max) - var(--palette_chroma_min)) * var(--chroma_shape_30)), 0.1235); --palette_chroma_40: min(calc(var(--palette_chroma_min) + (var(--palette_chroma_max) - var(--palette_chroma_min)) * var(--chroma_shape_40)), 0.1179); --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_90: min(calc(var(--palette_chroma_min) + (var(--palette_chroma_max) - var(--palette_chroma_min)) * var(--chroma_shape_90)), 0.0372); --palette_chroma_95: min(calc(var(--palette_chroma_min) + (var(--palette_chroma_max) - var(--palette_chroma_min)) * var(--chroma_shape_95)), 0.0286); --palette_chroma_max: 0.106; --palette_chroma_min: 0.0132; --palette_d_00: oklch(var(--palette_lightness_00) calc(var(--palette_chroma_00) * var(--chroma_scale, 1) * var(--palette_d_chroma_scale, 1)) var(--hue_d)); --palette_d_05: oklch(var(--palette_lightness_05) calc(var(--palette_chroma_05) * var(--chroma_scale, 1) * var(--palette_d_chroma_scale, 1)) var(--hue_d)); --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_100: oklch(var(--palette_lightness_100) calc(var(--palette_chroma_100) * var(--chroma_scale, 1) * var(--palette_d_chroma_scale, 1)) var(--hue_d)); --palette_d_20: oklch(var(--palette_lightness_20) calc(var(--palette_chroma_20) * var(--chroma_scale, 1) * var(--palette_d_chroma_scale, 1)) var(--hue_d)); --palette_d_30: oklch(var(--palette_lightness_30) calc(var(--palette_chroma_30) * var(--chroma_scale, 1) * var(--palette_d_chroma_scale, 1)) var(--hue_d)); --palette_d_40: oklch(var(--palette_lightness_40) calc(var(--palette_chroma_40) * 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_70: oklch(var(--palette_lightness_70) calc(var(--palette_chroma_70) * var(--chroma_scale, 1) * var(--palette_d_chroma_scale, 1)) var(--hue_d)); --palette_d_80: oklch(var(--palette_lightness_80) calc(var(--palette_chroma_80) * var(--chroma_scale, 1) * var(--palette_d_chroma_scale, 1)) var(--hue_d)); --palette_d_90: oklch(var(--palette_lightness_90) calc(var(--palette_chroma_90) * var(--chroma_scale, 1) * var(--palette_d_chroma_scale, 1)) var(--hue_d)); --palette_d_95: oklch(var(--palette_lightness_95) calc(var(--palette_chroma_95) * var(--chroma_scale, 1) * var(--palette_d_chroma_scale, 1)) var(--hue_d)); --palette_d_chroma_scale: 1; --palette_e_00: oklch(var(--palette_lightness_00) calc(var(--palette_chroma_00) * var(--chroma_scale, 1) * var(--palette_e_chroma_scale, 1)) var(--hue_e)); --palette_e_05: oklch(var(--palette_lightness_05) calc(var(--palette_chroma_05) * var(--chroma_scale, 1) * var(--palette_e_chroma_scale, 1)) var(--hue_e)); --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_100: oklch(var(--palette_lightness_100) calc(var(--palette_chroma_100) * var(--chroma_scale, 1) * var(--palette_e_chroma_scale, 1)) var(--hue_e)); --palette_e_20: oklch(var(--palette_lightness_20) calc(var(--palette_chroma_20) * var(--chroma_scale, 1) * var(--palette_e_chroma_scale, 1)) var(--hue_e)); --palette_e_30: oklch(var(--palette_lightness_30) calc(var(--palette_chroma_30) * var(--chroma_scale, 1) * var(--palette_e_chroma_scale, 1)) var(--hue_e)); --palette_e_40: oklch(var(--palette_lightness_40) calc(var(--palette_chroma_40) * 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_70: oklch(var(--palette_lightness_70) calc(var(--palette_chroma_70) * var(--chroma_scale, 1) * var(--palette_e_chroma_scale, 1)) var(--hue_e)); --palette_e_80: oklch(var(--palette_lightness_80) calc(var(--palette_chroma_80) * var(--chroma_scale, 1) * var(--palette_e_chroma_scale, 1)) var(--hue_e)); --palette_e_90: oklch(var(--palette_lightness_90) calc(var(--palette_chroma_90) * var(--chroma_scale, 1) * var(--palette_e_chroma_scale, 1)) var(--hue_e)); --palette_e_95: oklch(var(--palette_lightness_95) calc(var(--palette_chroma_95) * var(--chroma_scale, 1) * var(--palette_e_chroma_scale, 1)) var(--hue_e)); --palette_e_chroma_scale: 1; --palette_f_00: oklch(var(--palette_lightness_00) calc(var(--palette_chroma_00) * var(--chroma_scale, 1) * var(--palette_f_chroma_scale, 1)) var(--hue_f)); --palette_f_05: oklch(var(--palette_lightness_05) calc(var(--palette_chroma_05) * var(--chroma_scale, 1) * var(--palette_f_chroma_scale, 1)) var(--hue_f)); --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_100: oklch(var(--palette_lightness_100) calc(var(--palette_chroma_100) * var(--chroma_scale, 1) * var(--palette_f_chroma_scale, 1)) var(--hue_f)); --palette_f_20: oklch(var(--palette_lightness_20) calc(var(--palette_chroma_20) * var(--chroma_scale, 1) * var(--palette_f_chroma_scale, 1)) var(--hue_f)); --palette_f_30: oklch(var(--palette_lightness_30) calc(var(--palette_chroma_30) * var(--chroma_scale, 1) * var(--palette_f_chroma_scale, 1)) var(--hue_f)); --palette_f_40: oklch(var(--palette_lightness_40) calc(var(--palette_chroma_40) * 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_70: oklch(var(--palette_lightness_70) calc(var(--palette_chroma_70) * var(--chroma_scale, 1) * var(--palette_f_chroma_scale, 1)) var(--hue_f)); --palette_f_80: oklch(var(--palette_lightness_80) calc(var(--palette_chroma_80) * var(--chroma_scale, 1) * var(--palette_f_chroma_scale, 1)) var(--hue_f)); --palette_f_90: oklch(var(--palette_lightness_90) calc(var(--palette_chroma_90) * var(--chroma_scale, 1) * var(--palette_f_chroma_scale, 1)) var(--hue_f)); --palette_f_95: oklch(var(--palette_lightness_95) calc(var(--palette_chroma_95) * var(--chroma_scale, 1) * var(--palette_f_chroma_scale, 1)) var(--hue_f)); --palette_f_chroma_scale: 0.55; --palette_g_00: oklch(var(--palette_lightness_00) calc(var(--palette_chroma_00) * var(--chroma_scale, 1) * var(--palette_g_chroma_scale, 1)) var(--hue_g)); --palette_g_05: oklch(var(--palette_lightness_05) calc(var(--palette_chroma_05) * var(--chroma_scale, 1) * var(--palette_g_chroma_scale, 1)) var(--hue_g)); --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_100: oklch(var(--palette_lightness_100) calc(var(--palette_chroma_100) * var(--chroma_scale, 1) * var(--palette_g_chroma_scale, 1)) var(--hue_g)); --palette_g_20: oklch(var(--palette_lightness_20) calc(var(--palette_chroma_20) * var(--chroma_scale, 1) * var(--palette_g_chroma_scale, 1)) var(--hue_g)); --palette_g_30: oklch(var(--palette_lightness_30) calc(var(--palette_chroma_30) * var(--chroma_scale, 1) * var(--palette_g_chroma_scale, 1)) var(--hue_g)); --palette_g_40: oklch(var(--palette_lightness_40) calc(var(--palette_chroma_40) * 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_70: oklch(var(--palette_lightness_70) calc(var(--palette_chroma_70) * var(--chroma_scale, 1) * var(--palette_g_chroma_scale, 1)) var(--hue_g)); --palette_g_80: oklch(var(--palette_lightness_80) calc(var(--palette_chroma_80) * var(--chroma_scale, 1) * var(--palette_g_chroma_scale, 1)) var(--hue_g)); --palette_g_90: oklch(var(--palette_lightness_90) calc(var(--palette_chroma_90) * var(--chroma_scale, 1) * var(--palette_g_chroma_scale, 1)) var(--hue_g)); --palette_g_95: oklch(var(--palette_lightness_95) calc(var(--palette_chroma_95) * var(--chroma_scale, 1) * var(--palette_g_chroma_scale, 1)) var(--hue_g)); --palette_g_chroma_scale: 1; --palette_h_00: oklch(var(--palette_lightness_00) calc(var(--palette_chroma_00) * var(--chroma_scale, 1) * var(--palette_h_chroma_scale, 1)) var(--hue_h)); --palette_h_05: oklch(var(--palette_lightness_05) calc(var(--palette_chroma_05) * var(--chroma_scale, 1) * var(--palette_h_chroma_scale, 1)) var(--hue_h)); --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_100: oklch(var(--palette_lightness_100) calc(var(--palette_chroma_100) * var(--chroma_scale, 1) * var(--palette_h_chroma_scale, 1)) var(--hue_h)); --palette_h_20: oklch(var(--palette_lightness_20) calc(var(--palette_chroma_20) * var(--chroma_scale, 1) * var(--palette_h_chroma_scale, 1)) var(--hue_h)); --palette_h_30: oklch(var(--palette_lightness_30) calc(var(--palette_chroma_30) * var(--chroma_scale, 1) * var(--palette_h_chroma_scale, 1)) var(--hue_h)); --palette_h_40: oklch(var(--palette_lightness_40) calc(var(--palette_chroma_40) * 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_70: oklch(var(--palette_lightness_70) calc(var(--palette_chroma_70) * var(--chroma_scale, 1) * var(--palette_h_chroma_scale, 1)) var(--hue_h)); --palette_h_80: oklch(var(--palette_lightness_80) calc(var(--palette_chroma_80) * var(--chroma_scale, 1) * var(--palette_h_chroma_scale, 1)) var(--hue_h)); --palette_h_90: oklch(var(--palette_lightness_90) calc(var(--palette_chroma_90) * var(--chroma_scale, 1) * var(--palette_h_chroma_scale, 1)) var(--hue_h)); --palette_h_95: oklch(var(--palette_lightness_95) calc(var(--palette_chroma_95) * var(--chroma_scale, 1) * var(--palette_h_chroma_scale, 1)) var(--hue_h)); --palette_h_chroma_scale: 1; --palette_i_00: oklch(var(--palette_lightness_00) calc(var(--palette_chroma_00) * var(--chroma_scale, 1) * var(--palette_i_chroma_scale, 1)) var(--hue_i)); --palette_i_05: oklch(var(--palette_lightness_05) calc(var(--palette_chroma_05) * var(--chroma_scale, 1) * var(--palette_i_chroma_scale, 1)) var(--hue_i)); --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_100: oklch(var(--palette_lightness_100) calc(var(--palette_chroma_100) * var(--chroma_scale, 1) * var(--palette_i_chroma_scale, 1)) var(--hue_i)); --palette_i_20: oklch(var(--palette_lightness_20) calc(var(--palette_chroma_20) * var(--chroma_scale, 1) * var(--palette_i_chroma_scale, 1)) var(--hue_i)); --palette_i_30: oklch(var(--palette_lightness_30) calc(var(--palette_chroma_30) * var(--chroma_scale, 1) * var(--palette_i_chroma_scale, 1)) var(--hue_i)); --palette_i_40: oklch(var(--palette_lightness_40) calc(var(--palette_chroma_40) * 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_70: oklch(var(--palette_lightness_70) calc(var(--palette_chroma_70) * var(--chroma_scale, 1) * var(--palette_i_chroma_scale, 1)) var(--hue_i)); --palette_i_80: oklch(var(--palette_lightness_80) calc(var(--palette_chroma_80) * var(--chroma_scale, 1) * var(--palette_i_chroma_scale, 1)) var(--hue_i)); --palette_i_90: oklch(var(--palette_lightness_90) calc(var(--palette_chroma_90) * var(--chroma_scale, 1) * var(--palette_i_chroma_scale, 1)) var(--hue_i)); --palette_i_95: oklch(var(--palette_lightness_95) calc(var(--palette_chroma_95) * var(--chroma_scale, 1) * var(--palette_i_chroma_scale, 1)) var(--hue_i)); --palette_i_chroma_scale: 1; --palette_j_00: oklch(var(--palette_lightness_00) calc(var(--palette_chroma_00) * var(--chroma_scale, 1) * var(--palette_j_chroma_scale, 1)) var(--hue_j)); --palette_j_05: oklch(var(--palette_lightness_05) calc(var(--palette_chroma_05) * var(--chroma_scale, 1) * var(--palette_j_chroma_scale, 1)) var(--hue_j)); --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_100: oklch(var(--palette_lightness_100) calc(var(--palette_chroma_100) * var(--chroma_scale, 1) * var(--palette_j_chroma_scale, 1)) var(--hue_j)); --palette_j_20: oklch(var(--palette_lightness_20) calc(var(--palette_chroma_20) * var(--chroma_scale, 1) * var(--palette_j_chroma_scale, 1)) var(--hue_j)); --palette_j_30: oklch(var(--palette_lightness_30) calc(var(--palette_chroma_30) * var(--chroma_scale, 1) * var(--palette_j_chroma_scale, 1)) var(--hue_j)); --palette_j_40: oklch(var(--palette_lightness_40) calc(var(--palette_chroma_40) * 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_70: oklch(var(--palette_lightness_70) calc(var(--palette_chroma_70) * var(--chroma_scale, 1) * var(--palette_j_chroma_scale, 1)) var(--hue_j)); --palette_j_80: oklch(var(--palette_lightness_80) calc(var(--palette_chroma_80) * var(--chroma_scale, 1) * var(--palette_j_chroma_scale, 1)) var(--hue_j)); --palette_j_90: oklch(var(--palette_lightness_90) calc(var(--palette_chroma_90) * var(--chroma_scale, 1) * var(--palette_j_chroma_scale, 1)) var(--hue_j)); --palette_j_95: oklch(var(--palette_lightness_95) calc(var(--palette_chroma_95) * 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_05: calc(var(--palette_lightness_00) + (var(--palette_lightness_100) - var(--palette_lightness_00)) * pow(0.05, var(--palette_lightness_curve))); --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_30: calc(var(--palette_lightness_00) + (var(--palette_lightness_100) - var(--palette_lightness_00)) * pow(0.3, var(--palette_lightness_curve))); --palette_lightness_40: calc(var(--palette_lightness_00) + (var(--palette_lightness_100) - var(--palette_lightness_00)) * pow(0.4, 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_90: calc(var(--palette_lightness_00) + (var(--palette_lightness_100) - var(--palette_lightness_00)) * pow(0.9, var(--palette_lightness_curve))); --palette_lightness_95: calc(var(--palette_lightness_00) + (var(--palette_lightness_100) - var(--palette_lightness_00)) * pow(0.95, 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; --positive_00: oklch(var(--palette_lightness_00) calc(var(--palette_chroma_00) * var(--chroma_scale, 1) * var(--positive_chroma_scale, 1)) var(--hue_positive)); --positive_05: oklch(var(--palette_lightness_05) calc(var(--palette_chroma_05) * var(--chroma_scale, 1) * var(--positive_chroma_scale, 1)) var(--hue_positive)); --positive_10: oklch(var(--palette_lightness_10) calc(var(--palette_chroma_10) * var(--chroma_scale, 1) * var(--positive_chroma_scale, 1)) var(--hue_positive)); --positive_100: oklch(var(--palette_lightness_100) calc(var(--palette_chroma_100) * var(--chroma_scale, 1) * var(--positive_chroma_scale, 1)) var(--hue_positive)); --positive_20: oklch(var(--palette_lightness_20) calc(var(--palette_chroma_20) * var(--chroma_scale, 1) * var(--positive_chroma_scale, 1)) var(--hue_positive)); --positive_30: oklch(var(--palette_lightness_30) calc(var(--palette_chroma_30) * var(--chroma_scale, 1) * var(--positive_chroma_scale, 1)) var(--hue_positive)); --positive_40: oklch(var(--palette_lightness_40) calc(var(--palette_chroma_40) * var(--chroma_scale, 1) * var(--positive_chroma_scale, 1)) var(--hue_positive)); --positive_50: oklch(var(--palette_lightness_50) calc(var(--palette_chroma_50) * var(--chroma_scale, 1) * var(--positive_chroma_scale, 1)) var(--hue_positive)); --positive_60: oklch(var(--palette_lightness_60) calc(var(--palette_chroma_60) * var(--chroma_scale, 1) * var(--positive_chroma_scale, 1)) var(--hue_positive)); --positive_70: oklch(var(--palette_lightness_70) calc(var(--palette_chroma_70) * var(--chroma_scale, 1) * var(--positive_chroma_scale, 1)) var(--hue_positive)); --positive_80: oklch(var(--palette_lightness_80) calc(var(--palette_chroma_80) * var(--chroma_scale, 1) * var(--positive_chroma_scale, 1)) var(--hue_positive)); --positive_90: oklch(var(--palette_lightness_90) calc(var(--palette_chroma_90) * var(--chroma_scale, 1) * var(--positive_chroma_scale, 1)) var(--hue_positive)); --positive_95: oklch(var(--palette_lightness_95) calc(var(--palette_chroma_95) * var(--chroma_scale, 1) * var(--positive_chroma_scale, 1)) var(--hue_positive)); --positive_chroma_scale: 1; --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_10: oklch(var(--shade_lightness_10) calc(var(--neutral_chroma) * var(--chroma_shape_10)) var(--hue_neutral)); --shade_100: oklch(var(--shade_lightness_100) calc(var(--neutral_chroma) * var(--chroma_shape_100)) var(--hue_neutral)); --shade_20: oklch(var(--shade_lightness_20) calc(var(--neutral_chroma) * var(--chroma_shape_20)) 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_70: oklch(var(--shade_lightness_70) calc(var(--neutral_chroma) * var(--chroma_shape_70)) var(--hue_neutral)); --shade_80: oklch(var(--shade_lightness_80) calc(var(--neutral_chroma) * var(--chroma_shape_80)) var(--hue_neutral)); --shade_90: oklch(var(--shade_lightness_90) calc(var(--neutral_chroma) * var(--chroma_shape_90)) var(--hue_neutral)); --shade_95: oklch(var(--shade_lightness_95) calc(var(--neutral_chroma) * var(--chroma_shape_95)) 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_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_20: calc(var(--shade_lightness_00) + (var(--shade_lightness_100) - var(--shade_lightness_00)) * pow(0.2, var(--shade_lightness_curve))); --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_70: calc(var(--shade_lightness_00) + (var(--shade_lightness_100) - var(--shade_lightness_00)) * pow(0.7, var(--shade_lightness_curve))); --shade_lightness_80: calc(var(--shade_lightness_00) + (var(--shade_lightness_100) - var(--shade_lightness_00)) * pow(0.8, var(--shade_lightness_curve))); --shade_lightness_90: calc(var(--shade_lightness_00) + (var(--shade_lightness_100) - var(--shade_lightness_00)) * pow(0.9, var(--shade_lightness_curve))); --shade_lightness_95: calc(var(--shade_lightness_00) + (var(--shade_lightness_100) - var(--shade_lightness_00)) * pow(0.95, var(--shade_lightness_curve))); --shade_lightness_curve: 1.09; --shade_max: #000; --shade_min: #fff; --shadow_alpha_00: 0%; --shadow_alpha_05: calc(6% * var(--shadow_alpha_scale)); --shadow_alpha_10: calc(10% * var(--shadow_alpha_scale)); --shadow_alpha_100: calc(100% * var(--shadow_alpha_scale)); --shadow_alpha_20: calc(16% * var(--shadow_alpha_scale)); --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_60: calc(64% * var(--shadow_alpha_scale)); --shadow_alpha_70: calc(77% * var(--shadow_alpha_scale)); --shadow_alpha_80: calc(88% * var(--shadow_alpha_scale)); --shadow_alpha_90: calc(96% * var(--shadow_alpha_scale)); --shadow_alpha_95: calc(99% * var(--shadow_alpha_scale)); --shadow_alpha_scale: 1; --shadow_bottom_lg: 0 3.5px 10px 0px; --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_glow: oklch(0.955 0.003 var(--hue_neutral)); --shadow_color_highlight: oklch(0.955 0.003 var(--hue_neutral)); --shadow_color_shroud: #000; --shadow_color_umbra: #000; --shadow_inset_bottom_lg: inset 0 -3.5px 10px 0px; --shadow_inset_bottom_md: inset 0 -2.5px 6px 0px; --shadow_inset_bottom_sm: inset 0 -1.5px 4px 0px; --shadow_inset_bottom_xl: inset 0 -5px 20px 1px; --shadow_inset_bottom_xs: inset 0 -1px 3px 0px; --shadow_inset_lg: inset 0 0 10px 0px; --shadow_inset_md: inset 0 0 6px 0px; --shadow_inset_sm: inset 0 0 4px 0px; --shadow_inset_top_lg: inset 0 3.5px 10px 0px; --shadow_inset_top_md: inset 0 2.5px 6px 0px; --shadow_inset_top_sm: inset 0 1.5px 4px 0px; --shadow_inset_top_xl: inset 0 5px 20px 1px; --shadow_inset_top_xs: inset 0 1px 3px 0px; --shadow_inset_xl: inset 0 0 20px 1px; --shadow_inset_xs: inset 0 0 3px 0px; --shadow_lg: 0 0 10px 0px; --shadow_md: 0 0 6px 0px; --shadow_sm: 0 0 4px 0px; --shadow_top_lg: 0 -3.5px 10px 0px; --shadow_top_md: 0 -2.5px 6px 0px; --shadow_top_sm: 0 -1.5px 4px 0px; --shadow_top_xl: 0 -5px 20px 1px; --shadow_top_xs: 0 -1px 3px 0px; --shadow_xl: 0 0 20px 1px; --shadow_xs: 0 0 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_xl10: calc(14.1rem * var(--space_scale)); --space_xl11: calc(17.9rem * var(--space_scale)); --space_xl12: calc(22.8rem * var(--space_scale)); --space_xl13: calc(29rem * var(--space_scale)); --space_xl14: calc(36.9rem * var(--space_scale)); --space_xl15: calc(47rem * 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_xl8: calc(8.7rem * 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)); --space_xs5: calc(0.1rem * var(--space_scale)); --text_00: oklch(var(--text_lightness_00) calc(var(--neutral_chroma) * var(--chroma_shape_00)) var(--hue_neutral)); --text_05: oklch(var(--text_lightness_05) calc(var(--neutral_chroma) * var(--chroma_shape_05)) var(--hue_neutral)); --text_10: oklch(var(--text_lightness_10) calc(var(--neutral_chroma) * var(--chroma_shape_10)) var(--hue_neutral)); --text_100: oklch(var(--text_lightness_100) calc(var(--neutral_chroma) * var(--chroma_shape_100)) var(--hue_neutral)); --text_20: oklch(var(--text_lightness_20) calc(var(--neutral_chroma) * var(--chroma_shape_20)) var(--hue_neutral)); --text_30: oklch(var(--text_lightness_30) calc(var(--neutral_chroma) * var(--chroma_shape_30)) var(--hue_neutral)); --text_40: oklch(var(--text_lightness_40) calc(var(--neutral_chroma) * var(--chroma_shape_40)) var(--hue_neutral)); --text_50: oklch(var(--text_lightness_50) calc(var(--neutral_chroma) * var(--chroma_shape_50)) var(--hue_neutral)); --text_60: oklch(var(--text_lightness_60) calc(var(--neutral_chroma) * var(--chroma_shape_60)) 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_90: oklch(var(--text_lightness_90) calc(var(--neutral_chroma) * var(--chroma_shape_90)) var(--hue_neutral)); --text_95: oklch(var(--text_lightness_95) calc(var(--neutral_chroma) * var(--chroma_shape_95)) 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_05: calc(var(--text_lightness_00) + (var(--text_lightness_100) - var(--text_lightness_00)) * pow(0.05, var(--text_lightness_curve))); --text_lightness_10: calc(var(--text_lightness_00) + (var(--text_lightness_100) - var(--text_lightness_00)) * pow(0.1, var(--text_lightness_curve))); --text_lightness_100: 0.146; --text_lightness_20: calc(var(--text_lightness_00) + (var(--text_lightness_100) - var(--text_lightness_00)) * pow(0.2, var(--text_lightness_curve))); --text_lightness_30: calc(var(--text_lightness_00) + (var(--text_lightness_100) - var(--text_lightness_00)) * pow(0.3, var(--text_lightness_curve))); --text_lightness_40: calc(var(--text_lightness_00) + (var(--text_lightness_100) - var(--text_lightness_00)) * pow(0.4, var(--text_lightness_curve))); --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_60: calc(var(--text_lightness_00) + (var(--text_lightness_100) - var(--text_lightness_00)) * pow(0.6, 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_90: calc(var(--text_lightness_00) + (var(--text_lightness_100) - var(--text_lightness_00)) * pow(0.9, var(--text_lightness_curve))); --text_lightness_95: calc(var(--text_lightness_00) + (var(--text_lightness_100) - var(--text_lightness_00)) * pow(0.95, var(--text_lightness_curve))); --text_lightness_curve: 1.19; --text_max: #000; --text_min: #fff; --type_scale_ratio: 1.272; } :root.dark { --bg_00: var(--darken_00); --bg_05: var(--darken_05); --bg_10: var(--darken_10); --bg_100: var(--darken_100); --bg_20: var(--darken_20); --bg_30: var(--darken_30); --bg_40: var(--darken_40); --bg_50: var(--darken_50); --bg_60: var(--darken_60); --bg_70: var(--darken_70); --bg_80: var(--darken_80); --bg_90: var(--darken_90); --bg_95: var(--darken_95); --border_color_05: oklch(var(--border_color_lightness) var(--border_color_chroma) var(--hue_neutral) / 8%); --border_color_10: oklch(var(--border_color_lightness) var(--border_color_chroma) var(--hue_neutral) / 14%); --border_color_20: oklch(var(--border_color_lightness) var(--border_color_chroma) var(--hue_neutral) / 22%); --border_color_30: oklch(var(--border_color_lightness) var(--border_color_chroma) var(--hue_neutral) / 32%); --border_color_40: oklch(var(--border_color_lightness) var(--border_color_chroma) var(--hue_neutral) / 44%); --border_color_50: oklch(var(--border_color_lightness) var(--border_color_chroma) var(--hue_neutral) / 56%); --border_color_60: oklch(var(--border_color_lightness) var(--border_color_chroma) var(--hue_neutral) / 68%); --border_color_70: oklch(var(--border_color_lightness) var(--border_color_chroma) var(--hue_neutral) / 80%); --border_color_80: oklch(var(--border_color_lightness) var(--border_color_chroma) var(--hue_neutral) / 90%); --border_color_90: oklch(var(--border_color_lightness) var(--border_color_chroma) var(--hue_neutral) / 97%); --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_00: var(--lighten_00); --fg_05: var(--lighten_05); --fg_10: var(--lighten_10); --fg_100: var(--lighten_100); --fg_20: var(--lighten_20); --fg_30: var(--lighten_30); --fg_40: var(--lighten_40); --fg_50: var(--lighten_50); --fg_60: var(--lighten_60); --fg_70: var(--lighten_70); --fg_80: var(--lighten_80); --fg_90: var(--lighten_90); --fg_95: var(--lighten_95); --neutral_chroma: 0.025; --palette_chroma_00: min(calc(var(--palette_chroma_min) + (var(--palette_chroma_max) - var(--palette_chroma_min)) * var(--chroma_shape_00)), 0.0254); --palette_chroma_05: min(calc(var(--palette_chroma_min) + (var(--palette_chroma_max) - var(--palette_chroma_min)) * var(--chroma_shape_05)), 0.04); --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_100: min(calc(var(--palette_chroma_min) + (var(--palette_chroma_max) - var(--palette_chroma_min)) * var(--chroma_shape_100)), 0.0142); --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_30: min(calc(var(--palette_chroma_min) + (var(--palette_chroma_max) - var(--palette_chroma_min)) * var(--chroma_shape_30)), 0.0824); --palette_chroma_40: min(calc(var(--palette_chroma_min) + (var(--palette_chroma_max) - var(--palette_chroma_min)) * var(--chroma_shape_40)), 0.0964); --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_90: min(calc(var(--palette_chroma_min) + (var(--palette_chroma_max) - var(--palette_chroma_min)) * var(--chroma_shape_90)), 0.0465); --palette_chroma_95: min(calc(var(--palette_chroma_min) + (var(--palette_chroma_max) - var(--palette_chroma_min)) * var(--chroma_shape_95)), 0.03); --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; --shade_min: #000; --shadow_alpha_05: calc(13% * var(--shadow_alpha_scale)); --shadow_alpha_10: calc(19% * var(--shadow_alpha_scale)); --shadow_alpha_20: calc(27% * var(--shadow_alpha_scale)); --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_60: calc(71% * var(--shadow_alpha_scale)); --shadow_alpha_70: calc(83% * var(--shadow_alpha_scale)); --shadow_alpha_80: calc(91% * var(--shadow_alpha_scale)); --shadow_alpha_90: calc(98% * var(--shadow_alpha_scale)); --shadow_alpha_95: calc(100% * var(--shadow_alpha_scale)); --shadow_color_glow: oklch(0.863 0.009 var(--hue_neutral)); --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_max: #fff; --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(h6:not(.unstyled)) { --font_size: var(--font_size_sm); font-weight: var(--heading_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):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(fieldset:not(.unstyled)) { display: flex; flex-direction: column; } :where(fieldset) { /* TODO consider a global border reset */ border: 0; } :where(legend:not(.unstyled)) { font-size: var(--font_size_lg); } :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(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: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(audio) { width: 100%; } :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(abbr[title]) { text-decoration: underline dotted; } :where(b, strong) { font-weight: bolder; } :where(kbd, samp) { font-family: var(--font_family_mono); } :where(sub, sup) { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } :where(sub) { bottom: -0.25em; } :where(sup) { top: -0.5em; } :where(progress) { vertical-align: baseline; } } /* 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; } /* like `.box` but uncentered */ .column { display: flex; flex-direction: column; } /* 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); } /* Smallest sizing, two steps down from the default, cascading to children. Works on individual elements or containers. */ .sized_xs { --font_size: var(--font_size_xs); --input_height: var(--space_xl3); --input_height_compact: var(--space_xl2); --input_padding_x: var(--space_sm); --chip_padding_x: var(--space_xs3); --icon_size: var(--icon_size_xs); --menuitem_padding: var(--space_xs5) var(--space_xs3); --flow_margin: var(--space_sm); } /* 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); } /* Default sizing restated explicitly, useful as a cascade reset within a sized parent. */ .sized_md { --font_size: var(--font_size_md); --input_height: var(--space_xl5); --input_height_compact: var(--space_xl4); --input_padding_x: var(--space_lg); --chip_padding_x: var(--space_xs); --icon_size: var(--icon_size_md); --menuitem_padding: var(--space_xs3) var(--space_xs); --flow_margin: var(--space_lg); } /* Larger sizing, one step up from the default, cascading to children. Works on individual elements or containers. */ .sized_lg { --font_size: var(--font_size_lg); --input_height: var(--space_xl6); --input_height_compact: var(--space_xl5); --input_padding_x: var(--space_xl); --chip_padding_x: var(--space_sm); --icon_size: var(--icon_size_lg); --menuitem_padding: var(--space_xs2) var(--space_sm); --flow_margin: var(--space_xl); } /* Largest sizing, two steps up from the default, cascading to children. Works on individual elements or containers. */ .sized_xl { --font_size: var(--font_size_xl); --input_height: var(--space_xl7); --input_height_compact: var(--space_xl6); --input_padding_x: var(--space_xl2); --chip_padding_x: var(--space_md); --icon_size: var(--icon_size_xl); --menuitem_padding: var(--space_xs) var(--space_md); --flow_margin: var(--space_xl2); } /* Flow-aware margin-bottom that responds to --flow_margin overrides from size composites. */ .mb_flow { margin-bottom: var(--flow_margin, var(--space_lg)); } /* 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_sans { font-family: var(--font_family_sans); } .font_family_serif { font-family: var(--font_family_serif); } .font_family_mono { font-family: var(--font_family_mono); } .font_size_sm { font-size: var(--font_size_sm); --font_size: var(--font_size_sm); } .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_xl5 { font-size: var(--font_size_xl5); --font_size: var(--font_size_xl5); } .text_50 { color: var(--text_50); --text_color: var(--text_50); } .text_70 { color: var(--text_70); --text_color: var(--text_70); } .shade_00 { background-color: var(--shade_00); } .shade_20 { background-color: var(--shade_20); } .shade_50 { background-color: var(--shade_50); } .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); } .accent_60 { color: var(--accent_60); --text_color: var(--accent_60); } .positive_60 { color: var(--positive_60); --text_color: var(--positive_60); } .negative_60 { color: var(--negative_60); --text_color: var(--negative_60); } .caution_60 { color: var(--caution_60); --text_color: var(--caution_60); } .info_60 { color: var(--info_60); --text_color: var(--info_60); } .darken_30 { background-color: var(--darken_30); } .lighten_30 { background-color: var(--lighten_30); } .background-color\:transparent { background-color: transparent; } .background-color\:var\(--fg_30\) { background-color: var(--fg_30); } .border_color_00 { border-color: var(--border_color_00); --border_color: var(--border_color_00); } .border_color_05 { border-color: var(--border_color_05); --border_color: var(--border_color_05); } .border_color_10 { border-color: var(--border_color_10); --border_color: var(--border_color_10); } .border_color_20 { border-color: var(--border_color_20); --border_color: var(--border_color_20); } .border_color_30 { border-color: var(--border_color_30); --border_color: var(--border_color_30); } .border_color_40 { border-color: var(--border_color_40); --border_color: var(--border_color_40); } .border_color_50 { border-color: var(--border_color_50); --border_color: var(--border_color_50); } .border_color_60 { border-color: var(--border_color_60); --border_color: var(--border_color_60); } .border_color_70 { border-color: var(--border_color_70); --border_color: var(--border_color_70); } .border_color_80 { border-color: var(--border_color_80); --border_color: var(--border_color_80); } .border_color_90 { border-color: var(--border_color_90); --border_color: var(--border_color_90); } .border_color_95 { border-color: var(--border_color_95); --border_color: var(--border_color_95); } .border_color_100 { border-color: var(--border_color_100); --border_color: var(--border_color_100); } .outline_color_30 { outline-color: var(--shade_30); --outline_color: var(--shade_30); } .outline_width_focus { outline-width: var(--outline_width_focus); } .outline_width_active { outline-width: var(--outline_width_active); } .border_radius_sm { border-radius: var(--border_radius_sm); } .border_radius_md { border-radius: var(--border_radius_md); } .border_radius_lg { border-radius: var(--border_radius_lg); } .border-radius\:0 { border-radius: 0; } .border-radius\:100\% { border-radius: 100%; } .border-radius\:14\% { border-radius: 14%; } .border-radius\:32\% { border-radius: 32%; } .border_top_left_radius_lg { border-top-left-radius: var(--border_radius_lg); } .border-top-left-radius\:26\% { border-top-left-radius: 26%; } .border_top_right_radius_sm { border-top-right-radius: var(--border_radius_sm); } .border-top-right-radius\:100\% { border-top-right-radius: 100%; } .border_bottom_left_radius_md { border-bottom-left-radius: var(--border_radius_md); } .border-bottom-left-radius\:100\% { border-bottom-left-radius: 100%; } .border_bottom_right_radius_xl { border-bottom-right-radius: var(--border_radius_xl); } .border-bottom-right-radius\:77\% { border-bottom-right-radius: 77%; } .shadow_xs { box-shadow: var(--shadow_xs) color-mix(in oklab, var(--shadow_color, var(--shadow_color_umbra)) var(--shadow_alpha, var(--shadow_alpha_30)), transparent); } .shadow_sm { box-shadow: var(--shadow_sm) color-mix(in oklab, var(--shadow_color, var(--shadow_color_umbra)) var(--shadow_alpha, var(--shadow_alpha_40)), transparent); } .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_lg { box-shadow: var(--shadow_lg) color-mix(in oklab, var(--shadow_color, var(--shadow_color_umbra)) var(--shadow_alpha, var(--shadow_alpha_60)), transparent); } .shadow_xl { box-shadow: var(--shadow_xl) color-mix(in oklab, var(--shadow_color, var(--shadow_color_umbra)) var(--shadow_alpha, var(--shadow_alpha_70)), transparent); } .shadow_top_xs { box-shadow: var(--shadow_top_xs) color-mix(in oklab, var(--shadow_color, var(--shadow_color_umbra)) var(--shadow_alpha, var(--shadow_alpha_30)), transparent); } .shadow_top_sm { box-shadow: var(--shadow_top_sm) color-mix(in oklab, var(--shadow_color, var(--shadow_color_umbra)) var(--shadow_alpha, var(--shadow_alpha_40)), transparent); } .shadow_top_md { box-shadow: var(--shadow_top_md) color-mix(in oklab, var(--shadow_color, var(--shadow_color_umbra)) var(--shadow_alpha, var(--shadow_alpha_50)), transparent); } .shadow_top_lg { box-shadow: var(--shadow_top_lg) color-mix(in oklab, var(--shadow_color, var(--shadow_color_umbra)) var(--shadow_alpha, var(--shadow_alpha_60)), transparent); } .shadow_top_xl { box-shadow: var(--shadow_top_xl) color-mix(in oklab, var(--shadow_color, var(--shadow_color_umbra)) var(--shadow_alpha, var(--shadow_alpha_70)), transparent); } .shadow_bottom_xs { box-shadow: var(--shadow_bottom_xs) color-mix(in oklab, var(--shadow_color, var(--shadow_color_umbra)) var(--shadow_alpha, var(--shadow_alpha_30)), 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_bottom_md { box-shadow: var(--shadow_bottom_md) color-mix(in oklab, var(--shadow_color, var(--shadow_color_umbra)) var(--shadow_alpha, var(--shadow_alpha_50)), transparent); } .shadow_bottom_lg { box-shadow: var(--shadow_bottom_lg) color-mix(in oklab, var(--shadow_color, var(--shadow_color_umbra)) var(--shadow_alpha, var(--shadow_alpha_60)), transparent); } .shadow_bottom_xl { box-shadow: var(--shadow_bottom_xl) color-mix(in oklab, var(--shadow_color, var(--shadow_color_umbra)) var(--shadow_alpha, var(--shadow_alpha_70)), 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); } .shadow_inset_sm { box-shadow: var(--shadow_inset_sm) color-mix(in oklab, var(--shadow_color, var(--shadow_color_umbra)) var(--shadow_alpha, var(--shadow_alpha_40)), transparent); } .shadow_inset_md { box-shadow: var(--shadow_inset_md) color-mix(in oklab, var(--shadow_color, var(--shadow_color_umbra)) var(--shadow_alpha, var(--shadow_alpha_50)), transparent); } .shadow_inset_lg { box-shadow: var(--shadow_inset_lg) color-mix(in oklab, var(--shadow_color, var(--shadow_color_umbra)) var(--shadow_alpha, var(--shadow_alpha_60)), transparent); } .shadow_inset_xl { box-shadow: var(--shadow_inset_xl) color-mix(in oklab, var(--shadow_color, var(--shadow_color_umbra)) var(--shadow_alpha, var(--shadow_alpha_70)), transparent); } .shadow_inset_top_xs { box-shadow: var(--shadow_inset_top_xs) color-mix(in oklab, var(--shadow_color, var(--shadow_color_umbra)) var(--shadow_alpha, var(--shadow_alpha_30)), transparent); } .shadow_inset_top_sm { box-shadow: var(--shadow_inset_top_sm) color-mix(in oklab, var(--shadow_color, var(--shadow_color_umbra)) var(--shadow_alpha, var(--shadow_alpha_40)), transparent); } .shadow_inset_top_md { box-shadow: var(--shadow_inset_top_md) color-mix(in oklab, var(--shadow_color, var(--shadow_color_umbra)) var(--shadow_alpha, var(--shadow_alpha_50)), transparent); } .shadow_inset_top_lg { box-shadow: var(--shadow_inset_top_lg) color-mix(in oklab, var(--shadow_color, var(--shadow_color_umbra)) var(--shadow_alpha, var(--shadow_alpha_60)), transparent); } .shadow_inset_top_xl { box-shadow: var(--shadow_inset_top_xl) color-mix(in oklab, var(--shadow_color, var(--shadow_color_umbra)) var(--shadow_alpha, var(--shadow_alpha_70)), transparent); } .shadow_inset_bottom_xs { box-shadow: var(--shadow_inset_bottom_xs) color-mix(in oklab, var(--shadow_color, var(--shadow_color_umbra)) var(--shadow_alpha, var(--shadow_alpha_30)), transparent); } .shadow_inset_bottom_sm { box-shadow: var(--shadow_inset_bottom_sm) color-mix(in oklab, var(--shadow_color, var(--shadow_color_umbra)) var(--shadow_alpha, var(--shadow_alpha_40)), transparent); } .shadow_inset_bottom_md { box-shadow: var(--shadow_inset_bottom_md) color-mix(in oklab, var(--shadow_color, var(--shadow_color_umbra)) var(--shadow_alpha, var(--shadow_alpha_50)), transparent); } .shadow_inset_bottom_lg { box-shadow: var(--shadow_inset_bottom_lg) color-mix(in oklab, var(--shadow_color, var(--shadow_color_umbra)) var(--shadow_alpha, var(--shadow_alpha_60)), transparent); } .shadow_inset_bottom_xl { box-shadow: var(--shadow_inset_bottom_xl) color-mix(in oklab, var(--shadow_color, var(--shadow_color_umbra)) var(--shadow_alpha, var(--shadow_alpha_70)), transparent); } .shadow_color_umbra { --shadow_color: var(--shadow_color_umbra); } .shadow_color_highlight { --shadow_color: var(--shadow_color_highlight); } .shadow_color_glow { --shadow_color: var(--shadow_color_glow); } .shadow_color_shroud { --shadow_color: var(--shadow_color_shroud); } .shadow_alpha_00 { --shadow_alpha: var(--shadow_alpha_00); } .shadow_alpha_05 { --shadow_alpha: var(--shadow_alpha_05); } .shadow_alpha_10 { --shadow_alpha: var(--shadow_alpha_10); } .shadow_alpha_20 { --shadow_alpha: var(--shadow_alpha_20); } .shadow_alpha_30 { --shadow_alpha: var(--shadow_alpha_30); } .shadow_alpha_40 { --shadow_alpha: var(--shadow_alpha_40); } .shadow_alpha_50 { --shadow_alpha: var(--shadow_alpha_50); } .shadow_alpha_60 { --shadow_alpha: var(--shadow_alpha_60); } .shadow_alpha_70 { --shadow_alpha: var(--shadow_alpha_70); } .shadow_alpha_80 { --shadow_alpha: var(--shadow_alpha_80); } .shadow_alpha_90 { --shadow_alpha: var(--shadow_alpha_90); } .shadow_alpha_95 { --shadow_alpha: var(--shadow_alpha_95); } .shadow_alpha_100 { --shadow_alpha: var(--shadow_alpha_100); } .shadow_a_00 { --shadow_color: var(--palette_a_00); } .shadow_a_05 { --shadow_color: var(--palette_a_05); } .shadow_a_10 { --shadow_color: var(--palette_a_10); } .shadow_a_20 { --shadow_color: var(--palette_a_20); } .shadow_a_30 { --shadow_color: var(--palette_a_30); } .shadow_a_40 { --shadow_color: var(--palette_a_40); } .shadow_a_50 { --shadow_color: var(--palette_a_50); } .shadow_a_60 { --shadow_color: var(--palette_a_60); } .shadow_a_70 { --shadow_color: var(--palette_a_70); } .shadow_a_80 { --shadow_color: var(--palette_a_80); } .shadow_a_90 { --shadow_color: var(--palette_a_90); } .shadow_a_95 { --shadow_color: var(--palette_a_95); } .shadow_a_100 { --shadow_color: var(--palette_a_100); } .shadow_b_00 { --shadow_color: var(--palette_b_00); } .shadow_b_05 { --shadow_color: var(--palette_b_05); } .shadow_b_10 { --shadow_color: var(--palette_b_10); } .shadow_b_20 { --shadow_color: var(--palette_b_20); } .shadow_b_30 { --shadow_color: var(--palette_b_30); } .shadow_b_40 { --shadow_color: var(--palette_b_40); } .shadow_b_50 { --shadow_color: var(--palette_b_50); } .shadow_b_60 { --shadow_color: var(--palette_b_60); } .shadow_b_70 { --shadow_color: var(--palette_b_70); } .shadow_b_80 { --shadow_color: var(--palette_b_80); } .shadow_b_90 { --shadow_color: var(--palette_b_90); } .shadow_b_95 { --shadow_color: var(--palette_b_95); } .shadow_b_100 { --shadow_color: var(--palette_b_100); } .shadow_c_00 { --shadow_color: var(--palette_c_00); } .shadow_c_05 { --shadow_color: var(--palette_c_05); } .shadow_c_10 { --shadow_color: var(--palette_c_10); } .shadow_c_20 { --shadow_color: var(--palette_c_20); } .shadow_c_30 { --shadow_color: var(--palette_c_30); } .shadow_c_40 { --shadow_color: var(--palette_c_40); } .shadow_c_50 { --shadow_color: var(--palette_c_50); } .shadow_c_60 { --shadow_color: var(--palette_c_60); } .shadow_c_70 { --shadow_color: var(--palette_c_70); } .shadow_c_80 { --shadow_color: var(--palette_c_80); } .shadow_c_90 { --shadow_color: var(--palette_c_90); } .shadow_c_95 { --shadow_color: var(--palette_c_95); } .shadow_c_100 { --shadow_color: var(--palette_c_100); } .shadow_d_00 { --shadow_color: var(--palette_d_00); } .shadow_d_05 { --shadow_color: var(--palette_d_05); } .shadow_d_10 { --shadow_color: var(--palette_d_10); } .shadow_d_20 { --shadow_color: var(--palette_d_20); } .shadow_d_30 { --shadow_color: var(--palette_d_30); } .shadow_d_40 { --shadow_color: var(--palette_d_40); } .shadow_d_50 { --shadow_color: var(--palette_d_50); } .shadow_d_60 { --shadow_color: var(--palette_d_60); } .shadow_d_70 { --shadow_color: var(--palette_d_70); } .shadow_d_80 { --shadow_color: var(--palette_d_80); } .shadow_d_90 { --shadow_color: var(--palette_d_90); } .shadow_d_95 { --shadow_color: var(--palette_d_95); } .shadow_d_100 { --shadow_color: var(--palette_d_100); } .shadow_e_00 { --shadow_color: var(--palette_e_00); } .shadow_e_05 { --shadow_color: var(--palette_e_05); } .shadow_e_10 { --shadow_color: var(--palette_e_10); } .shadow_e_20 { --shadow_color: var(--palette_e_20); } .shadow_e_30 { --shadow_color: var(--palette_e_30); } .shadow_e_40 { --shadow_color: var(--palette_e_40); } .shadow_e_50 { --shadow_color: var(--palette_e_50); } .shadow_e_60 { --shadow_color: var(--palette_e_60); } .shadow_e_70 { --shadow_color: var(--palette_e_70); } .shadow_e_80 { --shadow_color: var(--palette_e_80); } .shadow_e_90 { --shadow_color: var(--palette_e_90); } .shadow_e_95 { --shadow_color: var(--palette_e_95); } .shadow_e_100 { --shadow_color: var(--palette_e_100); } .shadow_f_00 { --shadow_color: var(--palette_f_00); } .shadow_f_05 { --shadow_color: var(--palette_f_05); } .shadow_f_10 { --shadow_color: var(--palette_f_10); } .shadow_f_20 { --shadow_color: var(--palette_f_20); } .shadow_f_30 { --shadow_color: var(--palette_f_30); } .shadow_f_40 { --shadow_color: var(--palette_f_40); } .shadow_f_50 { --shadow_color: var(--palette_f_50); } .shadow_f_60 { --shadow_color: var(--palette_f_60); } .shadow_f_70 { --shadow_color: var(--palette_f_70); } .shadow_f_80 { --shadow_color: var(--palette_f_80); } .shadow_f_90 { --shadow_color: var(--palette_f_90); } .shadow_f_95 { --shadow_color: var(--palette_f_95); } .shadow_f_100 { --shadow_color: var(--palette_f_100); } .shadow_g_00 { --shadow_color: var(--palette_g_00); } .shadow_g_05 { --shadow_color: var(--palette_g_05); } .shadow_g_10 { --shadow_color: var(--palette_g_10); } .shadow_g_20 { --shadow_color: var(--palette_g_20); } .shadow_g_30 { --shadow_color: var(--palette_g_30); } .shadow_g_40 { --shadow_color: var(--palette_g_40); } .shadow_g_50 { --shadow_color: var(--palette_g_50); } .shadow_g_60 { --shadow_color: var(--palette_g_60); } .shadow_g_70 { --shadow_color: var(--palette_g_70); } .shadow_g_80 { --shadow_color: var(--palette_g_80); } .shadow_g_90 { --shadow_color: var(--palette_g_90); } .shadow_g_95 { --shadow_color: var(--palette_g_95); } .shadow_g_100 { --shadow_color: var(--palette_g_100); } .shadow_h_00 { --shadow_color: var(--palette_h_00); } .shadow_h_05 { --shadow_color: var(--palette_h_05); } .shadow_h_10 { --shadow_color: var(--palette_h_10); } .shadow_h_20 { --shadow_color: var(--palette_h_20); } .shadow_h_30 { --shadow_color: var(--palette_h_30); } .shadow_h_40 { --shadow_color: var(--palette_h_40); } .shadow_h_50 { --shadow_color: var(--palette_h_50); } .shadow_h_60 { --shadow_color: var(--palette_h_60); } .shadow_h_70 { --shadow_color: var(--palette_h_70); } .shadow_h_80 { --shadow_color: var(--palette_h_80); } .shadow_h_90 { --shadow_color: var(--palette_h_90); } .shadow_h_95 { --shadow_color: var(--palette_h_95); } .shadow_h_100 { --shadow_color: var(--palette_h_100); } .shadow_i_00 { --shadow_color: var(--palette_i_00); } .shadow_i_05 { --shadow_color: var(--palette_i_05); } .shadow_i_10 { --shadow_color: var(--palette_i_10); } .shadow_i_20 { --shadow_color: var(--palette_i_20); } .shadow_i_30 { --shadow_color: var(--palette_i_30); } .shadow_i_40 { --shadow_color: var(--palette_i_40); } .shadow_i_50 { --shadow_color: var(--palette_i_50); } .shadow_i_60 { --shadow_color: var(--palette_i_60); } .shadow_i_70 { --shadow_color: var(--palette_i_70); } .shadow_i_80 { --shadow_color: var(--palette_i_80); } .shadow_i_90 { --shadow_color: var(--palette_i_90); } .shadow_i_95 { --shadow_color: var(--palette_i_95); } .shadow_i_100 { --shadow_color: var(--palette_i_100); } .shadow_j_00 { --shadow_color: var(--palette_j_00); } .shadow_j_05 { --shadow_color: var(--palette_j_05); } .shadow_j_10 { --shadow_color: var(--palette_j_10); } .shadow_j_20 { --shadow_color: var(--palette_j_20); } .shadow_j_30 { --shadow_color: var(--palette_j_30); } .shadow_j_40 { --shadow_color: var(--palette_j_40); } .shadow_j_50 { --shadow_color: var(--palette_j_50); } .shadow_j_60 { --shadow_color: var(--palette_j_60); } .shadow_j_70 { --shadow_color: var(--palette_j_70); } .shadow_j_80 { --shadow_color: var(--palette_j_80); } .shadow_j_90 { --shadow_color: var(--palette_j_90); } .shadow_j_95 { --shadow_color: var(--palette_j_95); } .shadow_j_100 { --shadow_color: var(--palette_j_100); } .width\:100\% { width: 100%; } .height\:100\% { height: 100%; } .width_atmost_xs { width: 100%; max-width: var(--distance_xs); } .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_0 { padding: 0; } .p_xs { padding: var(--space_xs); } .p_sm { padding: var(--space_sm); } .p_md { padding: var(--space_md); } .p_lg { padding: var(--space_lg); } .p_xl { padding: var(--space_xl); } .pt_xl2 { padding-top: var(--space_xl2); } .pr_sm { padding-right: var(--space_sm); } .pb_0 { padding-bottom: 0; } .pb_xs3 { padding-bottom: var(--space_xs3); } .pb_xl { padding-bottom: var(--space_xl); } .pl_sm { padding-left: var(--space_sm); } .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_xs4 { padding-left: var(--space_xs4); padding-right: var(--space_xs4); } .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_md { margin-top: var(--space_md); } .mt_lg { margin-top: var(--space_lg); } .mt_xl2 { margin-top: var(--space_xl2); } .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_md { margin-bottom: var(--space_md); } .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; } .mx_xs3 { margin-left: var(--space_xs3); margin-right: var(--space_xs3); } .my_md { margin-top: var(--space_md); margin-bottom: var(--space_md); } .gap_xs2 { gap: var(--space_xs2); } .gap_xs { gap: var(--space_xs); } .gap_sm { gap: var(--space_sm); } .gap_md { gap: var(--space_md); } .gap_lg { gap: var(--space_lg); } .align-items\:center { align-items: center; } .align-items\:flex-end { align-items: flex-end; } .align-items\:flex-start { align-items: flex-start; } .align-items\:start { align-items: start; } .display\:block { display: block; } .display\:flex { display: flex; } .display\:inline { display: inline; } .flex-wrap\:wrap { flex-wrap: wrap; } .flex\:1 { flex: 1; } .font-weight\:100 { font-weight: 100; } .font-weight\:200 { font-weight: 200; } .font-weight\:234 { font-weight: 234; } .font-weight\:300 { font-weight: 300; } .font-weight\:400 { font-weight: 400; } .font-weight\:500 { font-weight: 500; } .font-weight\:555 { font-weight: 555; } .font-weight\:600 { font-weight: 600; } .font-weight\:700 { font-weight: 700; } .font-weight\:800 { font-weight: 800; } .font-weight\:900 { font-weight: 900; } .font-weight\:950 { font-weight: 950; } .font-weight\:997 { font-weight: 997; } .justify-content\:flex-end { justify-content: flex-end; } .justify-content\:space-between { justify-content: space-between; } .outline-style\:solid { outline-style: solid; } .position\:absolute { position: absolute; } .position\:relative { position: relative; } .position\:sticky { position: sticky; } .text-align\:center { text-align: center; } .vertical-align\:middle { vertical-align: middle; } .white-space\:nowrap { white-space: nowrap; } .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}.spiders.svelte-1f7s0me{--width:calc(100% / var(--spider_count));pointer-events:none;z-index:1;grid-template-columns:repeat(var(--spider_count), 1fr);display:grid;position:relative;overflow:hidden}