.token_processing_instruction,.token_doctype,.token_cdata,.token_punctuation{color:var(--text_50)}.token_tag,.token_constant,.token_symbol,.token_deleted,.token_keyword,.token_null,.token_boolean,.token_interpolation_punctuation,.token_heading,.token_heading_punctuation,.token_tag_punctuation{color:var(--color_a_50)}.token_comment,.token_char,.token_inserted,.token_blockquote,.token_blockquote_punctuation{color:var(--color_b_50)}.token_builtin,.token_class_name,.token_number{color:var(--color_j_50)}.token_attr_value,.token_attr_quote,.token_string,.token_template_punctuation,.token_inline_code,.token_code_punctuation{color:var(--color_h_50)}.token_attr_equals{color:var(--text_50)}.token_selector,.token_function,.token_regex,.token_important,.token_variable{color:var(--color_e_50)}.token_atrule{color:var(--color_f_50)}.token_attr_name,.token_property,.token_decorator,.token_decorator_name,.token_link_text_wrapper,.token_link_text,.token_link_punctuation{color:var(--color_i_50)}.token_special_keyword,.token_namespace,.token_rule{color:var(--color_g_50)}.token_at_keyword,.token_url{color:var(--color_d_50)}.token_url{text-decoration:underline}.token_strikethrough{text-decoration:line-through}.token_important,.token_bold{font-weight:700}.token_italic{font-style:italic}.spiders.svelte-1f7s0me{--width: calc(100% / var(--spider_count));pointer-events:none;position:relative;z-index:1;overflow:hidden;display:grid;grid-template-columns:repeat(var(--spider_count),1fr)} /* generated by vite_plugin_fuz_css */ /* Theme Variables */ :root { --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: hsl(var(--tint_hue) 60% 20% / 4%); --border_color_10: hsl(var(--tint_hue) 60% 20% / 7%); --border_color_100: hsl(var(--tint_hue) 60% 20%); --border_color_20: hsl(var(--tint_hue) 60% 20% / 13%); --border_color_30: hsl(var(--tint_hue) 60% 20% / 22%); --border_color_40: hsl(var(--tint_hue) 60% 20% / 34%); --border_color_50: hsl(var(--tint_hue) 60% 20% / 48%); --border_color_60: hsl(var(--tint_hue) 60% 20% / 62%); --border_color_70: hsl(var(--tint_hue) 60% 20% / 76%); --border_color_80: hsl(var(--tint_hue) 60% 20% / 88%); --border_color_90: hsl(var(--tint_hue) 60% 20% / 96%); --border_color_95: hsl(var(--tint_hue) 60% 20% / 99%); --border_radius_lg: 3.4rem; --border_radius_md: 2.1rem; --border_radius_sm: 1.3rem; --border_radius_xl: 5.5rem; --border_radius_xs: 0.8rem; --border_radius_xs2: 0.5rem; --border_radius_xs3: 0.3rem; --border_style: solid; --border_width: var(--border_width_1); --border_width_1: 1px; --border_width_2: 2px; --border_width_3: 3px; --border_width_4: 4px; --border_width_5: 5px; --border_width_6: 6px; --border_width_7: 7px; --border_width_8: 8px; --border_width_9: 9px; --button_shadow: var(--shadow_inset_bottom_xs) color-mix(in hsl, var(--shadow_color, var(--shadow_color_umbra)) var(--shadow_alpha_30), transparent), var(--shadow_inset_top_xs) color-mix(in hsl, var(--shadow_color_highlight) var(--shadow_alpha_30), transparent); --button_shadow_active: var(--shadow_inset_top_sm) color-mix(in hsl, var(--shadow_color, var(--shadow_color_umbra)) var(--shadow_alpha_40), transparent), var(--shadow_inset_bottom_sm) color-mix(in hsl, var(--shadow_color_highlight) var(--shadow_alpha_40), transparent); --button_shadow_hover: var(--shadow_inset_bottom_sm) color-mix(in hsl, var(--shadow_color, var(--shadow_color_umbra)) var(--shadow_alpha_40), transparent), var(--shadow_inset_top_sm) color-mix(in hsl, var(--shadow_color_highlight) var(--shadow_alpha_40), transparent); --color_a_00: hsl(var(--hue_a) 70% 98%); --color_a_00_dark: hsl(var(--hue_a) 70% 4%); --color_a_00_light: hsl(var(--hue_a) 70% 98%); --color_a_05: hsl(var(--hue_a) 68% 95%); --color_a_05_dark: hsl(var(--hue_a) 68% 8%); --color_a_05_light: hsl(var(--hue_a) 68% 95%); --color_a_10: hsl(var(--hue_a) 65% 91%); --color_a_100: hsl(var(--hue_a) 55% 2%); --color_a_100_dark: hsl(var(--hue_a) 55% 96%); --color_a_100_light: hsl(var(--hue_a) 55% 2%); --color_a_10_dark: hsl(var(--hue_a) 65% 12%); --color_a_10_light: hsl(var(--hue_a) 65% 91%); --color_a_20: hsl(var(--hue_a) 62% 84%); --color_a_20_dark: hsl(var(--hue_a) 62% 18%); --color_a_20_light: hsl(var(--hue_a) 62% 84%); --color_a_30: hsl(var(--hue_a) 60% 73%); --color_a_30_dark: hsl(var(--hue_a) 60% 28%); --color_a_30_light: hsl(var(--hue_a) 60% 73%); --color_a_40: hsl(var(--hue_a) 60% 62%); --color_a_40_dark: hsl(var(--hue_a) 60% 40%); --color_a_40_light: hsl(var(--hue_a) 60% 62%); --color_a_50: hsl(var(--hue_a) 55% 50%); --color_a_50_dark: hsl(var(--hue_a) 55% 52%); --color_a_50_light: hsl(var(--hue_a) 55% 50%); --color_a_60: hsl(var(--hue_a) 55% 40%); --color_a_60_dark: hsl(var(--hue_a) 55% 62%); --color_a_60_light: hsl(var(--hue_a) 55% 40%); --color_a_70: hsl(var(--hue_a) 55% 30%); --color_a_70_dark: hsl(var(--hue_a) 55% 72%); --color_a_70_light: hsl(var(--hue_a) 55% 30%); --color_a_80: hsl(var(--hue_a) 55% 20%); --color_a_80_dark: hsl(var(--hue_a) 55% 82%); --color_a_80_light: hsl(var(--hue_a) 55% 20%); --color_a_90: hsl(var(--hue_a) 55% 10%); --color_a_90_dark: hsl(var(--hue_a) 55% 88%); --color_a_90_light: hsl(var(--hue_a) 55% 10%); --color_a_95: hsl(var(--hue_a) 55% 5%); --color_a_95_dark: hsl(var(--hue_a) 55% 92%); --color_a_95_light: hsl(var(--hue_a) 55% 5%); --color_b_00: hsl(var(--hue_b) 55% 98%); --color_b_00_dark: hsl(var(--hue_b) 55% 4%); --color_b_00_light: hsl(var(--hue_b) 55% 98%); --color_b_05: hsl(var(--hue_b) 52% 94%); --color_b_05_dark: hsl(var(--hue_b) 52% 8%); --color_b_05_light: hsl(var(--hue_b) 52% 94%); --color_b_10: hsl(var(--hue_b) 55% 90%); --color_b_100: hsl(var(--hue_b) 80% 2%); --color_b_100_dark: hsl(var(--hue_b) 80% 96%); --color_b_100_light: hsl(var(--hue_b) 80% 2%); --color_b_10_dark: hsl(var(--hue_b) 55% 12%); --color_b_10_light: hsl(var(--hue_b) 55% 90%); --color_b_20: hsl(var(--hue_b) 50% 77%); --color_b_20_dark: hsl(var(--hue_b) 50% 20%); --color_b_20_light: hsl(var(--hue_b) 50% 77%); --color_b_30: hsl(var(--hue_b) 50% 63%); --color_b_30_dark: hsl(var(--hue_b) 50% 32%); --color_b_30_light: hsl(var(--hue_b) 50% 63%); --color_b_40: hsl(var(--hue_b) 50% 49%); --color_b_40_dark: hsl(var(--hue_b) 50% 44%); --color_b_40_light: hsl(var(--hue_b) 50% 49%); --color_b_50: hsl(var(--hue_b) 55% 36%); --color_b_50_dark: hsl(var(--hue_b) 50% 54%); --color_b_50_light: hsl(var(--hue_b) 55% 36%); --color_b_60: hsl(var(--hue_b) 60% 25%); --color_b_60_dark: hsl(var(--hue_b) 55% 66%); --color_b_60_light: hsl(var(--hue_b) 60% 25%); --color_b_70: hsl(var(--hue_b) 65% 18%); --color_b_70_dark: hsl(var(--hue_b) 60% 76%); --color_b_70_light: hsl(var(--hue_b) 65% 18%); --color_b_80: hsl(var(--hue_b) 70% 12%); --color_b_80_dark: hsl(var(--hue_b) 65% 84%); --color_b_80_light: hsl(var(--hue_b) 70% 12%); --color_b_90: hsl(var(--hue_b) 75% 7%); --color_b_90_dark: hsl(var(--hue_b) 75% 88%); --color_b_90_light: hsl(var(--hue_b) 75% 7%); --color_b_95: hsl(var(--hue_b) 78% 4%); --color_b_95_dark: hsl(var(--hue_b) 78% 92%); --color_b_95_light: hsl(var(--hue_b) 78% 4%); --color_c_00: hsl(var(--hue_c) 90% 98%); --color_c_00_dark: hsl(var(--hue_c) 90% 4%); --color_c_00_light: hsl(var(--hue_c) 90% 98%); --color_c_05: hsl(var(--hue_c) 88% 96%); --color_c_05_dark: hsl(var(--hue_c) 88% 8%); --color_c_05_light: hsl(var(--hue_c) 88% 96%); --color_c_10: hsl(var(--hue_c) 85% 92%); --color_c_100: hsl(var(--hue_c) 65% 2%); --color_c_100_dark: hsl(var(--hue_c) 65% 96%); --color_c_100_light: hsl(var(--hue_c) 65% 2%); --color_c_10_dark: hsl(var(--hue_c) 85% 12%); --color_c_10_light: hsl(var(--hue_c) 85% 92%); --color_c_20: hsl(var(--hue_c) 80% 84%); --color_c_20_dark: hsl(var(--hue_c) 80% 18%); --color_c_20_light: hsl(var(--hue_c) 80% 84%); --color_c_30: hsl(var(--hue_c) 75% 73%); --color_c_30_dark: hsl(var(--hue_c) 75% 28%); --color_c_30_light: hsl(var(--hue_c) 75% 73%); --color_c_40: hsl(var(--hue_c) 70% 63%); --color_c_40_dark: hsl(var(--hue_c) 70% 40%); --color_c_40_light: hsl(var(--hue_c) 70% 63%); --color_c_50: hsl(var(--hue_c) 65% 50%); --color_c_50_dark: hsl(var(--hue_c) 65% 52%); --color_c_50_light: hsl(var(--hue_c) 65% 50%); --color_c_60: hsl(var(--hue_c) 65% 40%); --color_c_60_dark: hsl(var(--hue_c) 65% 62%); --color_c_60_light: hsl(var(--hue_c) 65% 40%); --color_c_70: hsl(var(--hue_c) 65% 30%); --color_c_70_dark: hsl(var(--hue_c) 65% 72%); --color_c_70_light: hsl(var(--hue_c) 65% 30%); --color_c_80: hsl(var(--hue_c) 65% 20%); --color_c_80_dark: hsl(var(--hue_c) 65% 82%); --color_c_80_light: hsl(var(--hue_c) 65% 20%); --color_c_90: hsl(var(--hue_c) 65% 10%); --color_c_90_dark: hsl(var(--hue_c) 65% 88%); --color_c_90_light: hsl(var(--hue_c) 65% 10%); --color_c_95: hsl(var(--hue_c) 65% 5%); --color_c_95_dark: hsl(var(--hue_c) 65% 92%); --color_c_95_light: hsl(var(--hue_c) 65% 5%); --color_d_00: hsl(var(--hue_d) 55% 98%); --color_d_00_dark: hsl(var(--hue_d) 55% 4%); --color_d_00_light: hsl(var(--hue_d) 55% 98%); --color_d_05: hsl(var(--hue_d) 52% 95%); --color_d_05_dark: hsl(var(--hue_d) 52% 8%); --color_d_05_light: hsl(var(--hue_d) 52% 95%); --color_d_10: hsl(var(--hue_d) 50% 91%); --color_d_100: hsl(var(--hue_d) 50% 2%); --color_d_100_dark: hsl(var(--hue_d) 50% 96%); --color_d_100_light: hsl(var(--hue_d) 50% 2%); --color_d_10_dark: hsl(var(--hue_d) 50% 12%); --color_d_10_light: hsl(var(--hue_d) 50% 91%); --color_d_20: hsl(var(--hue_d) 50% 82%); --color_d_20_dark: hsl(var(--hue_d) 50% 20%); --color_d_20_light: hsl(var(--hue_d) 50% 82%); --color_d_30: hsl(var(--hue_d) 50% 72%); --color_d_30_dark: hsl(var(--hue_d) 50% 30%); --color_d_30_light: hsl(var(--hue_d) 50% 72%); --color_d_40: hsl(var(--hue_d) 50% 62%); --color_d_40_dark: hsl(var(--hue_d) 50% 40%); --color_d_40_light: hsl(var(--hue_d) 50% 62%); --color_d_50: hsl(var(--hue_d) 50% 50%); --color_d_50_dark: hsl(var(--hue_d) 50% 52%); --color_d_50_light: hsl(var(--hue_d) 50% 50%); --color_d_60: hsl(var(--hue_d) 50% 40%); --color_d_60_dark: hsl(var(--hue_d) 50% 62%); --color_d_60_light: hsl(var(--hue_d) 50% 40%); --color_d_70: hsl(var(--hue_d) 50% 30%); --color_d_70_dark: hsl(var(--hue_d) 50% 72%); --color_d_70_light: hsl(var(--hue_d) 50% 30%); --color_d_80: hsl(var(--hue_d) 50% 20%); --color_d_80_dark: hsl(var(--hue_d) 50% 82%); --color_d_80_light: hsl(var(--hue_d) 50% 20%); --color_d_90: hsl(var(--hue_d) 50% 10%); --color_d_90_dark: hsl(var(--hue_d) 50% 88%); --color_d_90_light: hsl(var(--hue_d) 50% 10%); --color_d_95: hsl(var(--hue_d) 50% 5%); --color_d_95_dark: hsl(var(--hue_d) 50% 92%); --color_d_95_light: hsl(var(--hue_d) 50% 5%); --color_e_00: hsl(var(--hue_e) 90% 98%); --color_e_00_dark: hsl(var(--hue_e) 90% 4%); --color_e_00_light: hsl(var(--hue_e) 90% 98%); --color_e_05: hsl(var(--hue_e) 88% 95%); --color_e_05_dark: hsl(var(--hue_e) 88% 8%); --color_e_05_light: hsl(var(--hue_e) 88% 95%); --color_e_10: hsl(var(--hue_e) 85% 91%); --color_e_100: hsl(var(--hue_e) 90% 2%); --color_e_100_dark: hsl(var(--hue_e) 90% 96%); --color_e_100_light: hsl(var(--hue_e) 90% 2%); --color_e_10_dark: hsl(var(--hue_e) 85% 12%); --color_e_10_light: hsl(var(--hue_e) 85% 91%); --color_e_20: hsl(var(--hue_e) 80% 79%); --color_e_20_dark: hsl(var(--hue_e) 80% 20%); --color_e_20_light: hsl(var(--hue_e) 80% 79%); --color_e_30: hsl(var(--hue_e) 75% 65%); --color_e_30_dark: hsl(var(--hue_e) 75% 32%); --color_e_30_light: hsl(var(--hue_e) 75% 65%); --color_e_40: hsl(var(--hue_e) 70% 50%); --color_e_40_dark: hsl(var(--hue_e) 70% 44%); --color_e_40_light: hsl(var(--hue_e) 70% 50%); --color_e_50: hsl(var(--hue_e) 65% 41%); --color_e_50_dark: hsl(var(--hue_e) 70% 54%); --color_e_50_light: hsl(var(--hue_e) 65% 41%); --color_e_60: hsl(var(--hue_e) 70% 34%); --color_e_60_dark: hsl(var(--hue_e) 70% 66%); --color_e_60_light: hsl(var(--hue_e) 70% 34%); --color_e_70: hsl(var(--hue_e) 75% 26%); --color_e_70_dark: hsl(var(--hue_e) 75% 76%); --color_e_70_light: hsl(var(--hue_e) 75% 26%); --color_e_80: hsl(var(--hue_e) 80% 18%); --color_e_80_dark: hsl(var(--hue_e) 80% 84%); --color_e_80_light: hsl(var(--hue_e) 80% 18%); --color_e_90: hsl(var(--hue_e) 85% 10%); --color_e_90_dark: hsl(var(--hue_e) 85% 88%); --color_e_90_light: hsl(var(--hue_e) 85% 10%); --color_e_95: hsl(var(--hue_e) 88% 5%); --color_e_95_dark: hsl(var(--hue_e) 88% 92%); --color_e_95_light: hsl(var(--hue_e) 88% 5%); --color_f_00: hsl(var(--hue_f) 30% 98%); --color_f_00_dark: hsl(var(--hue_f) 30% 4%); --color_f_00_light: hsl(var(--hue_f) 30% 98%); --color_f_05: hsl(var(--hue_f) 30% 92%); --color_f_05_dark: hsl(var(--hue_f) 30% 8%); --color_f_05_light: hsl(var(--hue_f) 30% 92%); --color_f_10: hsl(var(--hue_f) 32% 87%); --color_f_100: hsl(var(--hue_f) 85% 2%); --color_f_100_dark: hsl(var(--hue_f) 85% 96%); --color_f_100_light: hsl(var(--hue_f) 85% 2%); --color_f_10_dark: hsl(var(--hue_f) 32% 12%); --color_f_10_light: hsl(var(--hue_f) 32% 87%); --color_f_20: hsl(var(--hue_f) 32% 72%); --color_f_20_dark: hsl(var(--hue_f) 32% 22%); --color_f_20_light: hsl(var(--hue_f) 32% 72%); --color_f_30: hsl(var(--hue_f) 32% 57%); --color_f_30_dark: hsl(var(--hue_f) 32% 34%); --color_f_30_light: hsl(var(--hue_f) 32% 57%); --color_f_40: hsl(var(--hue_f) 42% 41%); --color_f_40_dark: hsl(var(--hue_f) 40% 46%); --color_f_40_light: hsl(var(--hue_f) 42% 41%); --color_f_50: hsl(var(--hue_f) 60% 26%); --color_f_50_dark: hsl(var(--hue_f) 50% 56%); --color_f_50_light: hsl(var(--hue_f) 60% 26%); --color_f_60: hsl(var(--hue_f) 65% 18%); --color_f_60_dark: hsl(var(--hue_f) 55% 68%); --color_f_60_light: hsl(var(--hue_f) 65% 18%); --color_f_70: hsl(var(--hue_f) 70% 14%); --color_f_70_dark: hsl(var(--hue_f) 50% 78%); --color_f_70_light: hsl(var(--hue_f) 70% 14%); --color_f_80: hsl(var(--hue_f) 75% 10%); --color_f_80_dark: hsl(var(--hue_f) 45% 86%); --color_f_80_light: hsl(var(--hue_f) 75% 10%); --color_f_90: hsl(var(--hue_f) 80% 6%); --color_f_90_dark: hsl(var(--hue_f) 80% 88%); --color_f_90_light: hsl(var(--hue_f) 80% 6%); --color_f_95: hsl(var(--hue_f) 82% 3%); --color_f_95_dark: hsl(var(--hue_f) 82% 92%); --color_f_95_light: hsl(var(--hue_f) 82% 3%); --color_g_00: hsl(var(--hue_g) 75% 98%); --color_g_00_dark: hsl(var(--hue_g) 75% 4%); --color_g_00_light: hsl(var(--hue_g) 75% 98%); --color_g_05: hsl(var(--hue_g) 74% 95%); --color_g_05_dark: hsl(var(--hue_g) 74% 8%); --color_g_05_light: hsl(var(--hue_g) 74% 95%); --color_g_10: hsl(var(--hue_g) 72% 91%); --color_g_100: hsl(var(--hue_g) 72% 2%); --color_g_100_dark: hsl(var(--hue_g) 72% 96%); --color_g_100_light: hsl(var(--hue_g) 72% 2%); --color_g_10_dark: hsl(var(--hue_g) 72% 12%); --color_g_10_light: hsl(var(--hue_g) 72% 91%); --color_g_20: hsl(var(--hue_g) 72% 83%); --color_g_20_dark: hsl(var(--hue_g) 72% 18%); --color_g_20_light: hsl(var(--hue_g) 72% 83%); --color_g_30: hsl(var(--hue_g) 72% 74%); --color_g_30_dark: hsl(var(--hue_g) 72% 28%); --color_g_30_light: hsl(var(--hue_g) 72% 74%); --color_g_40: hsl(var(--hue_g) 72% 65%); --color_g_40_dark: hsl(var(--hue_g) 72% 38%); --color_g_40_light: hsl(var(--hue_g) 72% 65%); --color_g_50: hsl(var(--hue_g) 72% 56%); --color_g_50_dark: hsl(var(--hue_g) 72% 50%); --color_g_50_light: hsl(var(--hue_g) 72% 56%); --color_g_60: hsl(var(--hue_g) 72% 44%); --color_g_60_dark: hsl(var(--hue_g) 72% 60%); --color_g_60_light: hsl(var(--hue_g) 72% 44%); --color_g_70: hsl(var(--hue_g) 72% 32%); --color_g_70_dark: hsl(var(--hue_g) 72% 70%); --color_g_70_light: hsl(var(--hue_g) 72% 32%); --color_g_80: hsl(var(--hue_g) 72% 20%); --color_g_80_dark: hsl(var(--hue_g) 72% 82%); --color_g_80_light: hsl(var(--hue_g) 72% 20%); --color_g_90: hsl(var(--hue_g) 72% 10%); --color_g_90_dark: hsl(var(--hue_g) 72% 88%); --color_g_90_light: hsl(var(--hue_g) 72% 10%); --color_g_95: hsl(var(--hue_g) 72% 5%); --color_g_95_dark: hsl(var(--hue_g) 72% 92%); --color_g_95_light: hsl(var(--hue_g) 72% 5%); --color_h_00: hsl(var(--hue_h) 95% 98%); --color_h_00_dark: hsl(var(--hue_h) 95% 4%); --color_h_00_light: hsl(var(--hue_h) 95% 98%); --color_h_05: hsl(var(--hue_h) 92% 95%); --color_h_05_dark: hsl(var(--hue_h) 92% 8%); --color_h_05_light: hsl(var(--hue_h) 92% 95%); --color_h_10: hsl(var(--hue_h) 90% 91%); --color_h_100: hsl(var(--hue_h) 90% 2%); --color_h_100_dark: hsl(var(--hue_h) 90% 96%); --color_h_100_light: hsl(var(--hue_h) 90% 2%); --color_h_10_dark: hsl(var(--hue_h) 90% 12%); --color_h_10_light: hsl(var(--hue_h) 90% 91%); --color_h_20: hsl(var(--hue_h) 90% 82%); --color_h_20_dark: hsl(var(--hue_h) 90% 18%); --color_h_20_light: hsl(var(--hue_h) 90% 82%); --color_h_30: hsl(var(--hue_h) 90% 72%); --color_h_30_dark: hsl(var(--hue_h) 90% 28%); --color_h_30_light: hsl(var(--hue_h) 90% 72%); --color_h_40: hsl(var(--hue_h) 90% 62%); --color_h_40_dark: hsl(var(--hue_h) 90% 40%); --color_h_40_light: hsl(var(--hue_h) 90% 62%); --color_h_50: hsl(var(--hue_h) 90% 50%); --color_h_50_dark: hsl(var(--hue_h) 90% 52%); --color_h_50_light: hsl(var(--hue_h) 90% 50%); --color_h_60: hsl(var(--hue_h) 90% 40%); --color_h_60_dark: hsl(var(--hue_h) 90% 62%); --color_h_60_light: hsl(var(--hue_h) 90% 40%); --color_h_70: hsl(var(--hue_h) 90% 30%); --color_h_70_dark: hsl(var(--hue_h) 90% 72%); --color_h_70_light: hsl(var(--hue_h) 90% 30%); --color_h_80: hsl(var(--hue_h) 90% 20%); --color_h_80_dark: hsl(var(--hue_h) 90% 82%); --color_h_80_light: hsl(var(--hue_h) 90% 20%); --color_h_90: hsl(var(--hue_h) 90% 10%); --color_h_90_dark: hsl(var(--hue_h) 90% 88%); --color_h_90_light: hsl(var(--hue_h) 90% 10%); --color_h_95: hsl(var(--hue_h) 90% 5%); --color_h_95_dark: hsl(var(--hue_h) 90% 92%); --color_h_95_light: hsl(var(--hue_h) 90% 5%); --color_i_00: hsl(var(--hue_i) 80% 98%); --color_i_00_dark: hsl(var(--hue_i) 80% 4%); --color_i_00_light: hsl(var(--hue_i) 80% 98%); --color_i_05: hsl(var(--hue_i) 77% 94%); --color_i_05_dark: hsl(var(--hue_i) 77% 8%); --color_i_05_light: hsl(var(--hue_i) 77% 94%); --color_i_10: hsl(var(--hue_i) 75% 89%); --color_i_100: hsl(var(--hue_i) 75% 2%); --color_i_100_dark: hsl(var(--hue_i) 75% 96%); --color_i_100_light: hsl(var(--hue_i) 75% 2%); --color_i_10_dark: hsl(var(--hue_i) 75% 12%); --color_i_10_light: hsl(var(--hue_i) 75% 89%); --color_i_20: hsl(var(--hue_i) 75% 77%); --color_i_20_dark: hsl(var(--hue_i) 75% 20%); --color_i_20_light: hsl(var(--hue_i) 75% 77%); --color_i_30: hsl(var(--hue_i) 75% 60%); --color_i_30_dark: hsl(var(--hue_i) 75% 34%); --color_i_30_light: hsl(var(--hue_i) 75% 60%); --color_i_40: hsl(var(--hue_i) 75% 47%); --color_i_40_dark: hsl(var(--hue_i) 75% 46%); --color_i_40_light: hsl(var(--hue_i) 75% 47%); --color_i_50: hsl(var(--hue_i) 75% 40%); --color_i_50_dark: hsl(var(--hue_i) 75% 54%); --color_i_50_light: hsl(var(--hue_i) 75% 40%); --color_i_60: hsl(var(--hue_i) 75% 33%); --color_i_60_dark: hsl(var(--hue_i) 75% 66%); --color_i_60_light: hsl(var(--hue_i) 75% 33%); --color_i_70: hsl(var(--hue_i) 75% 25%); --color_i_70_dark: hsl(var(--hue_i) 75% 76%); --color_i_70_light: hsl(var(--hue_i) 75% 25%); --color_i_80: hsl(var(--hue_i) 75% 18%); --color_i_80_dark: hsl(var(--hue_i) 75% 84%); --color_i_80_light: hsl(var(--hue_i) 75% 18%); --color_i_90: hsl(var(--hue_i) 75% 10%); --color_i_90_dark: hsl(var(--hue_i) 75% 88%); --color_i_90_light: hsl(var(--hue_i) 75% 10%); --color_i_95: hsl(var(--hue_i) 75% 5%); --color_i_95_dark: hsl(var(--hue_i) 75% 92%); --color_i_95_light: hsl(var(--hue_i) 75% 5%); --color_j_00: hsl(var(--hue_j) 65% 98%); --color_j_00_dark: hsl(var(--hue_j) 65% 4%); --color_j_00_light: hsl(var(--hue_j) 65% 98%); --color_j_05: hsl(var(--hue_j) 62% 94%); --color_j_05_dark: hsl(var(--hue_j) 62% 8%); --color_j_05_light: hsl(var(--hue_j) 62% 94%); --color_j_10: hsl(var(--hue_j) 60% 89%); --color_j_100: hsl(var(--hue_j) 80% 2%); --color_j_100_dark: hsl(var(--hue_j) 80% 96%); --color_j_100_light: hsl(var(--hue_j) 80% 2%); --color_j_10_dark: hsl(var(--hue_j) 60% 12%); --color_j_10_light: hsl(var(--hue_j) 60% 89%); --color_j_20: hsl(var(--hue_j) 58% 77%); --color_j_20_dark: hsl(var(--hue_j) 58% 20%); --color_j_20_light: hsl(var(--hue_j) 58% 77%); --color_j_30: hsl(var(--hue_j) 55% 60%); --color_j_30_dark: hsl(var(--hue_j) 55% 34%); --color_j_30_light: hsl(var(--hue_j) 55% 60%); --color_j_40: hsl(var(--hue_j) 55% 47%); --color_j_40_dark: hsl(var(--hue_j) 55% 46%); --color_j_40_light: hsl(var(--hue_j) 55% 47%); --color_j_50: hsl(var(--hue_j) 55% 40%); --color_j_50_dark: hsl(var(--hue_j) 55% 54%); --color_j_50_light: hsl(var(--hue_j) 55% 40%); --color_j_60: hsl(var(--hue_j) 60% 33%); --color_j_60_dark: hsl(var(--hue_j) 60% 66%); --color_j_60_light: hsl(var(--hue_j) 60% 33%); --color_j_70: hsl(var(--hue_j) 65% 25%); --color_j_70_dark: hsl(var(--hue_j) 65% 76%); --color_j_70_light: hsl(var(--hue_j) 65% 25%); --color_j_80: hsl(var(--hue_j) 70% 18%); --color_j_80_dark: hsl(var(--hue_j) 70% 84%); --color_j_80_light: hsl(var(--hue_j) 70% 18%); --color_j_90: hsl(var(--hue_j) 75% 10%); --color_j_90_dark: hsl(var(--hue_j) 75% 88%); --color_j_90_light: hsl(var(--hue_j) 75% 10%); --color_j_95: hsl(var(--hue_j) 78% 5%); --color_j_95_dark: hsl(var(--hue_j) 78% 92%); --color_j_95_light: hsl(var(--hue_j) 78% 5%); --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_mono: ui-monospace, monospace; --font_family_sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'; --font_family_serif: Georgia, serif; --font_size_lg: 2.04rem; --font_size_md: 1.6rem; --font_size_sm: 1.3rem; --font_size_xl: 2.59rem; --font_size_xl2: 3.29rem; --font_size_xl3: 4.19rem; --font_size_xl4: 5.33rem; --font_size_xl5: 6.78rem; --font_size_xl6: 8.62rem; --font_size_xl7: 10.97rem; --font_size_xl8: 13.95rem; --font_size_xl9: 17.74rem; --font_size_xs: 1rem; --hue_a: 210; --hue_b: 120; --hue_c: 0; --hue_d: 260; --hue_e: 50; --hue_f: 27; --hue_g: 335; --hue_h: 17; --hue_i: 185; --hue_j: 155; --icon_size_lg: 80px; --icon_size_md: 48px; --icon_size_sm: 32px; --icon_size_xl: 128px; --icon_size_xl2: 192px; --icon_size_xl3: 256px; --icon_size_xs: 18px; --input_fill: var(--bg_80); --input_height: var(--space_xl5); --input_height_compact: var(--space_xl4); --input_padding_x: var(--space_lg); --input_padding_y: 0; --input_width_min: 100px; --lighten_00: #ffffff00; --lighten_05: #ffffff08; --lighten_10: #ffffff0f; --lighten_100: #ffffffff; --lighten_20: #ffffff1f; --lighten_30: #ffffff36; --lighten_40: #ffffff52; --lighten_50: #ffffff73; --lighten_60: #ffffffa6; --lighten_70: #ffffffcc; --lighten_80: #ffffffe3; --lighten_90: #fffffff5; --lighten_95: #fffffffa; --line_height_lg: 1.8; --line_height_md: 1.5; --line_height_sm: 1.2; --line_height_xl: 2.2; --line_height_xs: 1; --link_color: hsl(var(--hue_a) 61% 35%); --link_color_selected: var(--text_color); --outline_color: var(--color_a_50); --outline_style: solid; --outline_width: 0; --outline_width_active: var(--border_width_1); --outline_width_focus: var(--border_width_2); --shade_00: hsl(var(--tint_hue) var(--tint_saturation) 96%); --shade_00_dark: hsl(var(--tint_hue) var(--tint_saturation) 6%); --shade_00_light: hsl(var(--tint_hue) var(--tint_saturation) 96%); --shade_05: hsl(var(--tint_hue) var(--tint_saturation) 93%); --shade_05_dark: hsl(var(--tint_hue) var(--tint_saturation) 9%); --shade_05_light: hsl(var(--tint_hue) var(--tint_saturation) 93%); --shade_10: hsl(var(--tint_hue) var(--tint_saturation) 90%); --shade_100: hsl(var(--tint_hue) var(--tint_saturation) 6%); --shade_100_dark: hsl(var(--tint_hue) var(--tint_saturation) 96%); --shade_100_light: hsl(var(--tint_hue) var(--tint_saturation) 6%); --shade_10_dark: hsl(var(--tint_hue) var(--tint_saturation) 12%); --shade_10_light: hsl(var(--tint_hue) var(--tint_saturation) 90%); --shade_20: hsl(var(--tint_hue) var(--tint_saturation) 84%); --shade_20_dark: hsl(var(--tint_hue) var(--tint_saturation) 17%); --shade_20_light: hsl(var(--tint_hue) var(--tint_saturation) 84%); --shade_30: hsl(var(--tint_hue) var(--tint_saturation) 76%); --shade_30_dark: hsl(var(--tint_hue) var(--tint_saturation) 26%); --shade_30_light: hsl(var(--tint_hue) var(--tint_saturation) 76%); --shade_40: hsl(var(--tint_hue) var(--tint_saturation) 65%); --shade_40_dark: hsl(var(--tint_hue) var(--tint_saturation) 36%); --shade_40_light: hsl(var(--tint_hue) var(--tint_saturation) 65%); --shade_50: hsl(var(--tint_hue) var(--tint_saturation) 53%); --shade_50_dark: hsl(var(--tint_hue) var(--tint_saturation) 48%); --shade_50_light: hsl(var(--tint_hue) var(--tint_saturation) 53%); --shade_60: hsl(var(--tint_hue) var(--tint_saturation) 34%); --shade_60_dark: hsl(var(--tint_hue) var(--tint_saturation) 67%); --shade_60_light: hsl(var(--tint_hue) var(--tint_saturation) 34%); --shade_70: hsl(var(--tint_hue) var(--tint_saturation) 19%); --shade_70_dark: hsl(var(--tint_hue) var(--tint_saturation) 81%); --shade_70_light: hsl(var(--tint_hue) var(--tint_saturation) 19%); --shade_80: hsl(var(--tint_hue) var(--tint_saturation) 13%); --shade_80_dark: hsl(var(--tint_hue) var(--tint_saturation) 87%); --shade_80_light: hsl(var(--tint_hue) var(--tint_saturation) 13%); --shade_90: hsl(var(--tint_hue) var(--tint_saturation) 10%); --shade_90_dark: hsl(var(--tint_hue) var(--tint_saturation) 90%); --shade_90_light: hsl(var(--tint_hue) var(--tint_saturation) 10%); --shade_95: hsl(var(--tint_hue) var(--tint_saturation) 8%); --shade_95_dark: hsl(var(--tint_hue) var(--tint_saturation) 92%); --shade_95_light: hsl(var(--tint_hue) var(--tint_saturation) 8%); --shade_max: #000; --shade_min: #fff; --shadow_alpha_00: 0%; --shadow_alpha_05: 6%; --shadow_alpha_10: 10%; --shadow_alpha_100: 100%; --shadow_alpha_20: 16%; --shadow_alpha_30: 25%; --shadow_alpha_40: 36%; --shadow_alpha_50: 50%; --shadow_alpha_60: 64%; --shadow_alpha_70: 77%; --shadow_alpha_80: 88%; --shadow_alpha_90: 96%; --shadow_alpha_95: 99%; --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: hsl(var(--tint_hue) var(--tint_saturation) 94%); --shadow_color_highlight: hsl(var(--tint_hue) var(--tint_saturation) 94%); --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: 1.3rem; --space_md: 1rem; --space_sm: 0.8rem; --space_xl: 1.6rem; --space_xl10: 14.1rem; --space_xl11: 17.9rem; --space_xl12: 22.8rem; --space_xl13: 29rem; --space_xl14: 36.9rem; --space_xl15: 47rem; --space_xl2: 2.1rem; --space_xl3: 2.6rem; --space_xl4: 3.3rem; --space_xl5: 4.2rem; --space_xl6: 5.4rem; --space_xl7: 6.9rem; --space_xl8: 8.7rem; --space_xl9: 11.1rem; --space_xs: 0.6rem; --space_xs2: 0.4rem; --space_xs3: 0.3rem; --space_xs4: 0.2rem; --space_xs5: 0.1rem; --text_00: hsl(var(--tint_hue) var(--tint_saturation) 96%); --text_05: hsl(var(--tint_hue) var(--tint_saturation) 94%); --text_10: hsl(var(--tint_hue) var(--tint_saturation) 90%); --text_100: hsl(var(--tint_hue) var(--tint_saturation) 4%); --text_20: hsl(var(--tint_hue) var(--tint_saturation) 82%); --text_30: hsl(var(--tint_hue) var(--tint_saturation) 70%); --text_40: hsl(var(--tint_hue) var(--tint_saturation) 59%); --text_50: hsl(var(--tint_hue) var(--tint_saturation) 50%); --text_60: hsl(var(--tint_hue) var(--tint_saturation) 41%); --text_70: hsl(var(--tint_hue) var(--tint_saturation) 32%); --text_80: hsl(var(--tint_hue) var(--tint_saturation) 21%); --text_90: hsl(var(--tint_hue) var(--tint_saturation) 13%); --text_95: hsl(var(--tint_hue) var(--tint_saturation) 8%); --text_color: var(--text_80); --text_decoration: none; --text_decoration_hover: underline; --text_decoration_selected: underline; --text_disabled: var(--text_50); --text_max: #000; --text_min: #fff; --tint_hue: var(--hue_f); --tint_saturation: 11%; } :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: hsl(var(--tint_hue) 60% 80% / 8%); --border_color_10: hsl(var(--tint_hue) 60% 80% / 14%); --border_color_100: hsl(var(--tint_hue) 60% 80%); --border_color_20: hsl(var(--tint_hue) 60% 80% / 22%); --border_color_30: hsl(var(--tint_hue) 60% 80% / 32%); --border_color_40: hsl(var(--tint_hue) 60% 80% / 44%); --border_color_50: hsl(var(--tint_hue) 60% 80% / 56%); --border_color_60: hsl(var(--tint_hue) 60% 80% / 68%); --border_color_70: hsl(var(--tint_hue) 60% 80% / 80%); --border_color_80: hsl(var(--tint_hue) 60% 80% / 90%); --border_color_90: hsl(var(--tint_hue) 60% 80% / 97%); --border_color_95: hsl(var(--tint_hue) 60% 80% / 99%); --button_shadow: var(--shadow_inset_top_xs) color-mix(in hsl, var(--shadow_color, var(--shadow_color_umbra)) var(--shadow_alpha_30), transparent), var(--shadow_inset_bottom_xs) color-mix(in hsl, var(--shadow_color_highlight) var(--shadow_alpha_30), transparent); --button_shadow_active: var(--shadow_inset_bottom_sm) color-mix(in hsl, var(--shadow_color, var(--shadow_color_umbra)) var(--shadow_alpha_40), transparent), var(--shadow_inset_top_sm) color-mix(in hsl, var(--shadow_color_highlight) var(--shadow_alpha_40), transparent); --button_shadow_hover: var(--shadow_inset_top_sm) color-mix(in hsl, var(--shadow_color, var(--shadow_color_umbra)) var(--shadow_alpha_40), transparent), var(--shadow_inset_bottom_sm) color-mix(in hsl, var(--shadow_color_highlight) var(--shadow_alpha_40), transparent); --color_a_00: hsl(var(--hue_a) 70% 4%); --color_a_05: hsl(var(--hue_a) 68% 8%); --color_a_10: hsl(var(--hue_a) 65% 12%); --color_a_100: hsl(var(--hue_a) 55% 96%); --color_a_20: hsl(var(--hue_a) 62% 18%); --color_a_30: hsl(var(--hue_a) 60% 28%); --color_a_40: hsl(var(--hue_a) 60% 40%); --color_a_50: hsl(var(--hue_a) 55% 52%); --color_a_60: hsl(var(--hue_a) 55% 62%); --color_a_70: hsl(var(--hue_a) 55% 72%); --color_a_80: hsl(var(--hue_a) 55% 82%); --color_a_90: hsl(var(--hue_a) 55% 88%); --color_a_95: hsl(var(--hue_a) 55% 92%); --color_b_00: hsl(var(--hue_b) 55% 4%); --color_b_05: hsl(var(--hue_b) 52% 8%); --color_b_10: hsl(var(--hue_b) 55% 12%); --color_b_100: hsl(var(--hue_b) 80% 96%); --color_b_20: hsl(var(--hue_b) 50% 20%); --color_b_30: hsl(var(--hue_b) 50% 32%); --color_b_40: hsl(var(--hue_b) 50% 44%); --color_b_50: hsl(var(--hue_b) 50% 54%); --color_b_60: hsl(var(--hue_b) 55% 66%); --color_b_70: hsl(var(--hue_b) 60% 76%); --color_b_80: hsl(var(--hue_b) 65% 84%); --color_b_90: hsl(var(--hue_b) 75% 88%); --color_b_95: hsl(var(--hue_b) 78% 92%); --color_c_00: hsl(var(--hue_c) 90% 4%); --color_c_05: hsl(var(--hue_c) 88% 8%); --color_c_10: hsl(var(--hue_c) 85% 12%); --color_c_100: hsl(var(--hue_c) 65% 96%); --color_c_20: hsl(var(--hue_c) 80% 18%); --color_c_30: hsl(var(--hue_c) 75% 28%); --color_c_40: hsl(var(--hue_c) 70% 40%); --color_c_50: hsl(var(--hue_c) 65% 52%); --color_c_60: hsl(var(--hue_c) 65% 62%); --color_c_70: hsl(var(--hue_c) 65% 72%); --color_c_80: hsl(var(--hue_c) 65% 82%); --color_c_90: hsl(var(--hue_c) 65% 88%); --color_c_95: hsl(var(--hue_c) 65% 92%); --color_d_00: hsl(var(--hue_d) 55% 4%); --color_d_05: hsl(var(--hue_d) 52% 8%); --color_d_10: hsl(var(--hue_d) 50% 12%); --color_d_100: hsl(var(--hue_d) 50% 96%); --color_d_20: hsl(var(--hue_d) 50% 20%); --color_d_30: hsl(var(--hue_d) 50% 30%); --color_d_40: hsl(var(--hue_d) 50% 40%); --color_d_50: hsl(var(--hue_d) 50% 52%); --color_d_60: hsl(var(--hue_d) 50% 62%); --color_d_70: hsl(var(--hue_d) 50% 72%); --color_d_80: hsl(var(--hue_d) 50% 82%); --color_d_90: hsl(var(--hue_d) 50% 88%); --color_d_95: hsl(var(--hue_d) 50% 92%); --color_e_00: hsl(var(--hue_e) 90% 4%); --color_e_05: hsl(var(--hue_e) 88% 8%); --color_e_10: hsl(var(--hue_e) 85% 12%); --color_e_100: hsl(var(--hue_e) 90% 96%); --color_e_20: hsl(var(--hue_e) 80% 20%); --color_e_30: hsl(var(--hue_e) 75% 32%); --color_e_40: hsl(var(--hue_e) 70% 44%); --color_e_50: hsl(var(--hue_e) 70% 54%); --color_e_60: hsl(var(--hue_e) 70% 66%); --color_e_70: hsl(var(--hue_e) 75% 76%); --color_e_80: hsl(var(--hue_e) 80% 84%); --color_e_90: hsl(var(--hue_e) 85% 88%); --color_e_95: hsl(var(--hue_e) 88% 92%); --color_f_00: hsl(var(--hue_f) 30% 4%); --color_f_05: hsl(var(--hue_f) 30% 8%); --color_f_10: hsl(var(--hue_f) 32% 12%); --color_f_100: hsl(var(--hue_f) 85% 96%); --color_f_20: hsl(var(--hue_f) 32% 22%); --color_f_30: hsl(var(--hue_f) 32% 34%); --color_f_40: hsl(var(--hue_f) 40% 46%); --color_f_50: hsl(var(--hue_f) 50% 56%); --color_f_60: hsl(var(--hue_f) 55% 68%); --color_f_70: hsl(var(--hue_f) 50% 78%); --color_f_80: hsl(var(--hue_f) 45% 86%); --color_f_90: hsl(var(--hue_f) 80% 88%); --color_f_95: hsl(var(--hue_f) 82% 92%); --color_g_00: hsl(var(--hue_g) 75% 4%); --color_g_05: hsl(var(--hue_g) 74% 8%); --color_g_10: hsl(var(--hue_g) 72% 12%); --color_g_100: hsl(var(--hue_g) 72% 96%); --color_g_20: hsl(var(--hue_g) 72% 18%); --color_g_30: hsl(var(--hue_g) 72% 28%); --color_g_40: hsl(var(--hue_g) 72% 38%); --color_g_50: hsl(var(--hue_g) 72% 50%); --color_g_60: hsl(var(--hue_g) 72% 60%); --color_g_70: hsl(var(--hue_g) 72% 70%); --color_g_80: hsl(var(--hue_g) 72% 82%); --color_g_90: hsl(var(--hue_g) 72% 88%); --color_g_95: hsl(var(--hue_g) 72% 92%); --color_h_00: hsl(var(--hue_h) 95% 4%); --color_h_05: hsl(var(--hue_h) 92% 8%); --color_h_10: hsl(var(--hue_h) 90% 12%); --color_h_100: hsl(var(--hue_h) 90% 96%); --color_h_20: hsl(var(--hue_h) 90% 18%); --color_h_30: hsl(var(--hue_h) 90% 28%); --color_h_40: hsl(var(--hue_h) 90% 40%); --color_h_50: hsl(var(--hue_h) 90% 52%); --color_h_60: hsl(var(--hue_h) 90% 62%); --color_h_70: hsl(var(--hue_h) 90% 72%); --color_h_80: hsl(var(--hue_h) 90% 82%); --color_h_90: hsl(var(--hue_h) 90% 88%); --color_h_95: hsl(var(--hue_h) 90% 92%); --color_i_00: hsl(var(--hue_i) 80% 4%); --color_i_05: hsl(var(--hue_i) 77% 8%); --color_i_10: hsl(var(--hue_i) 75% 12%); --color_i_100: hsl(var(--hue_i) 75% 96%); --color_i_20: hsl(var(--hue_i) 75% 20%); --color_i_30: hsl(var(--hue_i) 75% 34%); --color_i_40: hsl(var(--hue_i) 75% 46%); --color_i_50: hsl(var(--hue_i) 75% 54%); --color_i_60: hsl(var(--hue_i) 75% 66%); --color_i_70: hsl(var(--hue_i) 75% 76%); --color_i_80: hsl(var(--hue_i) 75% 84%); --color_i_90: hsl(var(--hue_i) 75% 88%); --color_i_95: hsl(var(--hue_i) 75% 92%); --color_j_00: hsl(var(--hue_j) 65% 4%); --color_j_05: hsl(var(--hue_j) 62% 8%); --color_j_10: hsl(var(--hue_j) 60% 12%); --color_j_100: hsl(var(--hue_j) 80% 96%); --color_j_20: hsl(var(--hue_j) 58% 20%); --color_j_30: hsl(var(--hue_j) 55% 34%); --color_j_40: hsl(var(--hue_j) 55% 46%); --color_j_50: hsl(var(--hue_j) 55% 54%); --color_j_60: hsl(var(--hue_j) 60% 66%); --color_j_70: hsl(var(--hue_j) 65% 76%); --color_j_80: hsl(var(--hue_j) 70% 84%); --color_j_90: hsl(var(--hue_j) 75% 88%); --color_j_95: hsl(var(--hue_j) 78% 92%); --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); --link_color: hsl(var(--hue_a) 61% 58%); --shade_00: hsl(var(--tint_hue) var(--tint_saturation) 6%); --shade_05: hsl(var(--tint_hue) var(--tint_saturation) 9%); --shade_10: hsl(var(--tint_hue) var(--tint_saturation) 12%); --shade_100: hsl(var(--tint_hue) var(--tint_saturation) 96%); --shade_20: hsl(var(--tint_hue) var(--tint_saturation) 17%); --shade_30: hsl(var(--tint_hue) var(--tint_saturation) 26%); --shade_40: hsl(var(--tint_hue) var(--tint_saturation) 36%); --shade_50: hsl(var(--tint_hue) var(--tint_saturation) 48%); --shade_60: hsl(var(--tint_hue) var(--tint_saturation) 67%); --shade_70: hsl(var(--tint_hue) var(--tint_saturation) 81%); --shade_80: hsl(var(--tint_hue) var(--tint_saturation) 87%); --shade_90: hsl(var(--tint_hue) var(--tint_saturation) 90%); --shade_95: hsl(var(--tint_hue) var(--tint_saturation) 92%); --shade_max: #fff; --shade_min: #000; --shadow_alpha_05: 13%; --shadow_alpha_10: 19%; --shadow_alpha_20: 27%; --shadow_alpha_30: 37%; --shadow_alpha_40: 47%; --shadow_alpha_50: 59%; --shadow_alpha_60: 71%; --shadow_alpha_70: 83%; --shadow_alpha_80: 91%; --shadow_alpha_90: 98%; --shadow_alpha_95: 100%; --shadow_color_glow: hsl(var(--tint_hue) var(--tint_saturation) 82%); --shadow_color_highlight: #000; --shadow_color_umbra: hsl(var(--tint_hue) var(--tint_saturation) 82%); --text_00: hsl(var(--tint_hue) var(--tint_saturation) 4%); --text_05: hsl(var(--tint_hue) var(--tint_saturation) 10%); --text_10: hsl(var(--tint_hue) var(--tint_saturation) 14%); --text_100: hsl(var(--tint_hue) var(--tint_saturation) 96%); --text_20: hsl(var(--tint_hue) var(--tint_saturation) 22%); --text_30: hsl(var(--tint_hue) var(--tint_saturation) 30%); --text_40: hsl(var(--tint_hue) var(--tint_saturation) 40%); --text_60: hsl(var(--tint_hue) var(--tint_saturation) 58%); --text_70: hsl(var(--tint_hue) var(--tint_saturation) 69%); --text_80: hsl(var(--tint_hue) var(--tint_saturation) 80%); --text_90: hsl(var(--tint_hue) var(--tint_saturation) 87%); --text_95: hsl(var(--tint_hue) var(--tint_saturation) 92%); --text_max: #fff; --text_min: #000; } /* Base Styles */ *, ::before, ::after, ::backdrop { box-sizing: border-box; border: 0 solid; margin: 0; padding: 0; } :root, :host { color-scheme: light dark; /* overridden by `:root.dark` and `:root.light` added in the `head` */ background-color: var(--shade_00); color: var(--text_color); accent-color: var(--color_a_50); line-height: var(--line_height_md); font-size: 62.5%; /* see `body.font-size`, using `rem` font size units with a base 16px */ /* @source https://kilianvalkhof.com/2022/css-html/your-css-reset-needs-text-size-adjust-probably/ */ -moz-text-size-adjust: none; -webkit-text-size-adjust: none; text-size-adjust: none; -webkit-tap-highlight-color: transparent; } :root.dark { color-scheme: dark; } :root.light { color-scheme: light; } body { min-height: 100vh; font-size: 1.6rem; /* matched to `font-size: 62.5%` and same value as the default `--font_size_md`, but this one shouldn't vary */ font-family: var(--font_family_sans); tab-size: 2; /* TODO var */ } @media (prefers-reduced-motion) { :root { /* setting to `initial` disables animations but allows for fallbacks (see PendingAnimation) */ --duration_6: initial; --duration_5: initial; --duration_4: initial; --duration_3: initial; --duration_2: initial; --duration_1: initial; } } :where(a:not(.unstyled)) { cursor: pointer; /* TODO should the generic be --link_color or --color? */ --text_color: var(--link_color); color: var(--text_color); font-weight: 700; text-decoration: var(--text_decoration); border-radius: var(--border_radius, var(--border_radius_xs3)); outline: var(--outline_width) var(--outline_style) var(--outline_color); } :where(a:not(.unstyled):hover) { text-decoration: var(--text_decoration_hover); } :where(a:not(.unstyled):focus) { --outline_width: var(--outline_width_focus); } :where(a:not(.unstyled):active) { --outline_width: var(--outline_width_active); } :where(a:not(.unstyled).selected) { --text_color: var(--link_color_selected); --outline_color: var(--border_color); text-decoration: var(--text_decoration_selected); } :where(a:not(.unstyled).selected:active) { --outline_color: var(--border_color); } :where(:is(ul, ol, menu):not(.unstyled)) { padding-left: var(--space_xl4); } :where(.unstyled:is(ul, ol, menu)) { list-style: none; } :where(:is(h1, h2, h3, h4, h5, h6, .heading):not(.unstyled)) { font-family: var(--font_family_serif); font-size: var(--font_size, inherit); line-height: var(--line_height_sm); text-wrap: balance; /* @see https://developer.mozilla.org/en-US/docs/Web/CSS/text-wrap#balance */ /* TODO use this pattern elsewhere? provides API to components like `MdnLogo` */ overflow-wrap: break-word; /* TODO @many is this best? `anywhere` instead? what about adding elsewhere? */ } :where(h1:not(.unstyled)) { --font_size: var(--font_size_xl3); font-weight: 300; margin-bottom: calc(var(--flow_margin, var(--space_lg)) * 3.23); /* somewhat strange to omit only this one, but generally seems to be the desired behavior */ /* margin-top: calc(var(--flow_margin, var(--space_lg)) * 5.28); */ } :where(h2:not(.unstyled)) { --font_size: var(--font_size_xl2); font-weight: 400; margin-bottom: calc(var(--flow_margin, var(--space_lg)) * 2.54); margin-top: calc(var(--flow_margin, var(--space_lg)) * 4.15); } :where(h3:not(.unstyled)) { --font_size: var(--font_size_xl); font-weight: 500; margin-bottom: calc(var(--flow_margin, var(--space_lg)) * 2); margin-top: calc(var(--flow_margin, var(--space_lg)) * 3.23); } :where(h4:not(.unstyled)) { --font_size: var(--font_size_lg); font-weight: 700; margin-bottom: calc(var(--flow_margin, var(--space_lg)) * 1.62); margin-top: calc(var(--flow_margin, var(--space_lg)) * 2.54); } :where(h5:not(.unstyled)) { --font_size: var(--font_size_md); font-weight: 900; margin-bottom: calc(var(--flow_margin, var(--space_lg)) * 1.23); margin-top: calc(var(--flow_margin, var(--space_lg)) * 2); } :where(h6:not(.unstyled)) { --font_size: var(--font_size_sm); font-weight: 600; margin-bottom: var(--flow_margin, var(--space_lg)); margin-top: calc(var(--flow_margin, var(--space_lg)) * 1.62); text-transform: uppercase; } :where(p) { overflow-wrap: break-word; /* TODO @many is this best? `anywhere` instead? what about adding elsewhere? */ } :where( :is( p, ul, ol, menu, form, fieldset, table, details, textarea, select, label, pre, blockquote, aside, nav, legend ):not(:last-child):not(.unstyled) ) { margin-bottom: var(--flow_margin, var(--space_lg)); } :where(section:not(:last-child)) { margin-bottom: var(--space_xl7); } :where(.row > *) { margin: 0; } :where(aside:not(.unstyled)) { border-left-color: var(--border_color); border-left-style: var(--border_style); border-left-width: var(--border_width_3); border-radius: var(--border_radius, var(--border_radius_xs)); padding: var(--space_md); color: var(--text_color); background-color: var(--fg_10); } :where(blockquote:not(.unstyled)) { border-left-color: var(--border_color); border-left-style: var(--border_style); border-left-width: var(--border_width_8); padding: var(--space_md); color: var(--text_color); } :where(code:not(.unstyled)) { white-space: pre-wrap; font-family: var(--font_family_mono); -webkit-hyphens: none; hyphens: none; color: var(--text_color); background-color: var(--fg_05); padding: 0 var(--space_xs2); border-radius: var(--border_radius, var(--border_radius_xs)); } :where(code.inline, p code) { display: inline-block; vertical-align: baseline; } :where(pre:not(.unstyled)) { font-family: var(--font_family_mono); color: var(--text_color); white-space: pre; overflow: auto; max-width: 100%; } :where(hr:not(.unstyled)) { border-top: 1px solid var(--border_color_30); border-bottom: 2px solid var(--border_color_30); border-left: none; border-right: none; width: 100%; height: 5px; margin: var(--space_xl7) 0; } :where(fieldset:not(.unstyled)) { display: flex; flex-direction: column; } :where(fieldset) { /* TODO consider a global border reset */ border: 0; } :where(legend:not(.unstyled)) { font-size: var(--font_size_lg); } :where(input, textarea, select) { font: inherit; } :where(:is(input, textarea, select):not(.unstyled)) { appearance: none; line-height: normal; display: block; color: var(--text_color); background-color: var(--input_fill); border-color: var(--border_color); border-style: var(--border_style); border-width: var(--border_width); border-radius: var(--border_radius, var(--border_radius_sm)); /* TODO --outline_color should default to --hue when available, but can't be set above */ outline: var(--outline_width) var(--outline_style) var(--outline_color); padding: var(--input_padding_y) var(--input_padding_x); width: 100%; min-width: var(--input_width_min); min-height: var(--input_height); } :where(textarea:not(.unstyled)) { --input_padding_y: var(--space_sm); height: 100px; resize: vertical; } :where(:is(select, option, input[type='color']):not(:disabled)) { cursor: pointer; } :where(option:not(.unstyled)) { color: var(--text_color); background-color: var(--shade_00); } :where(:is(input, textarea, select):not(.unstyled):hover) { --border_color: var(--border_color_20); } :where(input[type='checkbox']:not(.unstyled)) { cursor: pointer; width: var(--input_height_compact); height: var(--input_height_compact); min-width: var(--input_height_compact); min-height: var(--input_height_compact); border-radius: var(--border_radius, var(--border_radius_xs)); --input_padding_x: 0; --checkbox_content: var(--checkbox_content_empty, ''); } :where(input[type='checkbox']:not(.unstyled):checked) { --checkbox_content: var(--checkbox_content_checked, '✓'); /* ✔✓ ✗ ✘ */ } :where(input[type='checkbox']:not(.unstyled))::before { content: var(--checkbox_content); position: relative; left: var(--left); top: var(--top); width: 100%; height: 100%; text-align: center; line-height: normal; display: flex; align-items: center; justify-content: center; overflow: var(--overflow, visible); font-size: var(--font_size, var(--font_size_xl3)); color: var(--text_color); } :where(input[type='radio']:not(.unstyled)) { cursor: pointer; width: var(--input_height_compact); height: var(--input_height_compact); border-radius: 50%; min-width: var(--input_height_compact); min-height: var(--input_height_compact); --input_padding_x: 0; } :where(input[type='radio']:not(.unstyled):checked)::before { content: ''; display: block; position: relative; top: 25%; left: 25%; width: 50%; height: 50%; background-color: var(--text_color); border-radius: 50%; } :where(input[type='range']:not(.unstyled)) { --thumb_size: var(--space_xl); --thumb_background_color: var(--text_70); cursor: pointer; } :where(input[type='range']:not(.unstyled):hover:not(:disabled)) { --thumb_background_color: var(--color_a_50); } :where(input[type='range']:not(.unstyled):disabled:active) { --thumb_background_color: var(--color_c_50); } :where(input[type='range']:not(.unstyled))::-webkit-slider-thumb { appearance: none; height: var(--thumb_size); width: var(--thumb_size); border-radius: 50%; background-color: var(--thumb_background_color); border: 0; /* this is the only line that differs between the `moz` one CSS stops parsing if it hits an unknown selector like `::-moz-range-thumb` in Webkit/Blink, so we need both declarations anyway, and the declarations can't be combined with plain CSS, one of the few times I've wanted to reach for PostCSS */ margin-top: calc(var(--thumb_size) / -2); } :where(input[type='range']:not(.unstyled))::-moz-range-thumb { appearance: none; height: var(--thumb_size); width: var(--thumb_size); border-radius: 50%; background-color: var(--thumb_background_color); border: 0; } :where(input[type='range']:not(.unstyled))::-webkit-slider-runnable-track { width: 100%; height: var(--border_width); background-color: var(--thumb_background_color); } :where(input[type='range']:not(.unstyled))::-moz-range-track { width: 100%; height: var(--border_width); background-color: var(--thumb_background_color); } :where(input:not(.unstyled):checked:not(:disabled)) { --text_color: var(--color_a_50); --border_color: var(--color_a_50); } :where(input[type='radio']:not(.unstyled):checked) { cursor: default; } :where( :is(input, textarea, select):not(.unstyled).inline, p :is(input, textarea, select):not(.unstyled) ) { display: inline-block; margin-left: var(--space_lg); /* TODO ideally `width` here would be set to a minimum and have an API to increase size -- buttons can grow automatically, but how can inputs? only with js? */ width: var(--input_width_min); } :where(:is(input, textarea, select):not(.unstyled):disabled) { /* TODO ideally these would just set `fill`, but they'd have to go after the button variants, and then duplicate selectors? */ --input_fill: transparent; --border_style: solid dashed; opacity: var(--disabled_opacity); outline: none; } :where([contenteditable]:not(.unstyled):focus-visible) { --outline_width: var(--outline_width_focus); outline: var(--outline_width) var(--outline_style) var(--outline_color); } :where(:is(input, textarea, select, [contenteditable]):not(.unstyled):active) { --outline_width: var(--outline_width_active); } :where(label:not(.unstyled)) { display: block; color: var(--text_color); cursor: pointer; } :where(:is(label:not(.unstyled) .title)) { font-weight: 600; margin-bottom: var(--space_xs2); } :where(label.selected:not(.unstyled)) { cursor: default; --text_color: var(--color_a_50); } :where(label.disabled:not(.unstyled)) { cursor: default; --text_color: var(--text_disabled); } :where(label.row:not(.unstyled)) { justify-content: flex-start; } :where(label.row:not(.unstyled) :is(input[type='checkbox'], input[type='radio']):not(.unstyled)) { margin-right: var(--space_md); } :where(button:not(.unstyled)) { --text_color: var(--text_70); --button_text_color: var(--text_color); --button_fill: color-mix(in hsl, var(--fill, var(--shade_50)) 8%, transparent); --button_fill_hover: color-mix(in hsl, var(--fill, var(--shade_50)) 16%, transparent); --button_fill_active: color-mix(in hsl, var(--fill, var(--shade_50)) 24%, transparent); --button_border_color: var(--border_color); /* TODO give real values, 90%? */ --button_border_color_hover: color-mix(in hsl, var(--border_color) 90%, var(--shade_max)); --button_border_color_active: color-mix(in hsl, var(--border_color) 80%, var(--shade_max)); color: var(--button_text_color); background-color: var(--button_fill); cursor: pointer; appearance: none; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; font: inherit; font-size: var(--font_size, inherit); font-weight: 700; line-height: normal; min-height: var(--button_min_height, var(--input_height)); padding: 0 var(--input_padding_x); box-shadow: var(--shadow, var(--button_shadow)); border-width: var(--border_width); border-style: var(--border_style); border-color: var(--button_border_color); border-radius: var(--border_radius, var(--border_radius_sm)); outline: var(--outline_width) var(--outline_style) var(--outline_color); } :where(:is(button, input, textarea, select):not(.unstyled):focus) { --border_color: var(--color_a_50); --outline_width: var(--outline_width_focus); } :where(button:not(.unstyled).color_a) { --text_color: var(--color_a_50); --fill: var(--color_a_40); --border_color: var(--color_a_50); --outline_color: var(--color_a_50); } :where(button:not(.unstyled).color_b) { --text_color: var(--color_b_50); --fill: var(--color_b_40); --border_color: var(--color_b_50); --outline_color: var(--color_b_50); } :where(button:not(.unstyled).color_c) { --text_color: var(--color_c_50); --fill: var(--color_c_40); --border_color: var(--color_c_50); --outline_color: var(--color_c_50); } :where(button:not(.unstyled).color_d) { --text_color: var(--color_d_50); --fill: var(--color_d_40); --border_color: var(--color_d_50); --outline_color: var(--color_d_50); } :where(button:not(.unstyled).color_e) { --text_color: var(--color_e_50); --fill: var(--color_e_40); --border_color: var(--color_e_50); --outline_color: var(--color_e_50); } :where(button:not(.unstyled).color_f) { --text_color: var(--color_f_50); --fill: var(--color_f_40); --border_color: var(--color_f_50); --outline_color: var(--color_f_50); } :where(button:not(.unstyled).color_g) { --text_color: var(--color_g_50); --fill: var(--color_g_40); --border_color: var(--color_g_50); --outline_color: var(--color_g_50); } :where(button:not(.unstyled).color_h) { --text_color: var(--color_h_50); --fill: var(--color_h_40); --border_color: var(--color_h_50); --outline_color: var(--color_h_50); } :where(button:not(.unstyled).color_i) { --text_color: var(--color_i_50); --fill: var(--color_i_40); --border_color: var(--color_i_50); --outline_color: var(--color_i_50); } :where(button:not(.unstyled).color_j) { --text_color: var(--color_j_50); --fill: var(--color_j_40); --border_color: var(--color_j_50); --outline_color: var(--color_j_50); } :where(button:not(.unstyled):disabled) { /* TODO ideally these would just set `fill`, but they'd have to go after the button variants, and then duplicate selectors? */ --button_fill: transparent; --border_style: solid dashed; cursor: default; box-shadow: none; opacity: var(--disabled_opacity); outline: none; } :where(button:not(.unstyled).selected) { --button_text_color: var(--text_05); --button_fill: var(--fill, var(--shade_50)); --button_fill_hover: var(--fill, var(--shade_50)); --button_fill_active: var(--fill, var(--shade_50)); --button_border_color: var(--border_color); } :where(button:not(.unstyled).selected:not(.deselectable)) { --button_border_color_hover: var(--border_color); --button_border_color_active: var(--border_color); cursor: default; box-shadow: none; } :where(button:not(.unstyled):not(:disabled):hover, button:not(.unstyled):focus) { --button_fill: var(--button_fill_hover); --button_border_color: var(--button_border_color_hover); --shadow: var(--button_shadow_hover); } :where(button:not(.unstyled):not(.selected):not(:disabled):hover) { /* TODO or set a hover var? make consistent with fill */ --button_border_color: var(--button_border_color_hover); --button_text_color: color-mix(in hsl, var(--text_color) 90%, var(--shade_max)); } :where(button:not(.unstyled).selected.deselectable:not(:disabled):hover) { --button_text_color: var(--shade_min); } :where(button:not(.unstyled):not(:disabled):active) { --button_fill: var(--button_fill_active); --button_border_color: var(--button_border_color_active); --outline_width: var(--outline_width_active); --shadow: var(--button_shadow_active); } :where( :is(input, textarea, select, button):not(.unstyled):disabled:active, label:not(.unstyled).disabled:active ) { --text_color: var(--color_c_50); --border_color: var(--color_c_50); } :where(button:not(.unstyled).selected:disabled:active) { --text_color: var(--text_10); --fill: var(--color_c_40); } :where(button:not(.unstyled):not(.selected):disabled:active) { --fill: transparent; } :where(button:not(.unstyled).selected:not(.deselectable):active) { --outline_width: var(--outline_width_focus); } :where(button:not(.unstyled).inline, p button:not(.unstyled)) { display: inline-block; /* TODO this increases paragraph line spacing */ min-height: var(--button_min_height, var(--input_height_compact)); } :where(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(summary:not(.unstyled)) { cursor: pointer; padding: var(--space_md); border-radius: var(--border_radius, var(--border_radius_xs)); } :where(summary:hover:not(.unstyled)) { background-color: var(--fg_10); } :where(summary:active:not(.unstyled)) { background-color: var(--fg_20); } :where(details[open] summary:not(.unstyled)) { margin-bottom: var(--space_sm); } :where(table) { border-collapse: collapse; } :where(thead) { text-align: left; } :where(th) { font-weight: bold; } :where(th, td) { padding: var(--space_xs3) var(--space_sm); } :where(tr) { border-bottom: 1px solid var(--border_color_10); } :where(tr:hover) { background-color: var(--fg_10); } :where(b, strong) { font-weight: bolder; } :where(sub, sup) { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } :where(sub) { bottom: -0.25em; } :where(sup) { top: -0.5em; } /* Utility Classes */ .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, var(--shadow_bottom_md) color-mix(in hsl, var(--shadow_color, var(--shadow_color_umbra)) var(--shadow_alpha_50), transparent)); border-radius: var(--border_radius, var(--border_radius_xs)); } /* A panel is a box embedded into the page, useful for visually isolating content. */ .panel { border-radius: var(--border_radius, var(--border_radius_xs)); background-color: var(--fg_10); } /* Smallest sizing, two steps down from the default, cascading to children. Works on individual elements or containers. */ .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. */ .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. */ .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. */ .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. */ .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); } /* TODO other button variants? TODO this is slightly strange that it doesn't use --icon_size. These are used as modifiers to buttons. */ .icon_button { width: var(--input_height); height: var(--input_height); min-width: var(--input_height); min-height: var(--input_height); flex-shrink: 0; line-height: 1; font-weight: 900; padding: 0; } /* TODO maybe this belongs with the reset, like `selected`? or does `selected` belong here? */ .plain:not(:hover) { --border_color: transparent; box-shadow: none; --button_fill: transparent; } .plain:hover, .plain:active { --border_color: transparent; } .menuitem { --border_color: var(--border_color_30); border-radius: 0; position: relative; z-index: 2; cursor: pointer; width: 100%; min-height: var(--menuitem_min_height, var(--input_height_compact)); display: flex; justify-content: space-between; align-items: center; padding: var(--menuitem_padding, var(--space_xs3) var(--space_xs)); } .menuitem.selected { /* TODO different patterns for border and surface? */ --border_color: var(--color_a_50); background-color: var(--fg_10); z-index: 1; cursor: default; } .menuitem.selected.deselectable:not(:disabled) { cursor: pointer; } .menuitem:hover { --border_color: var(--border_color_30); background-color: var(--fg_10); } .menuitem:active, .menuitem.selected:hover { --border_color: var(--border_color_30); background-color: var(--fg_20); } .menuitem.plain { border: none; } .menuitem .content { display: flex; align-items: center; flex: 1; /* allows the flex children to shrink */ min-width: 0; } .menuitem .icon { width: var(--icon_size, var(--icon_size_md)); margin-right: var(--space_sm); flex-shrink: 0; text-align: center; font-weight: 900; } .menuitem .title { margin-right: var(--space_lg); flex-shrink: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; line-height: var(--line_height_lg); /* prevents the bottom of g's and others from being cut off */ } .chip { font-weight: 500; font-size: var(--font_size, inherit); padding-left: var(--chip_padding_x, var(--space_xs)); padding-right: var(--chip_padding_x, var(--space_xs)); background-color: var(--fg_10); border-radius: var(--border_radius, var(--border_radius_xs)); } a.chip { font-weight: 600; } .chip.color_a { color: var(--color_a_50); background-color: var(--color_a_10); } .chip.color_b { color: var(--color_b_50); background-color: var(--color_b_10); } .chip.color_c { color: var(--color_c_50); background-color: var(--color_c_10); } .chip.color_d { color: var(--color_d_50); background-color: var(--color_d_10); } .chip.color_e { color: var(--color_e_50); background-color: var(--color_e_10); } .chip.color_f { color: var(--color_f_50); background-color: var(--color_f_10); } .chip.color_g { color: var(--color_g_50); background-color: var(--color_g_10); } .chip.color_h { color: var(--color_h_50); background-color: var(--color_h_10); } .chip.color_i { color: var(--color_i_50); background-color: var(--color_i_10); } .chip.color_j { color: var(--color_j_50); background-color: var(--color_j_10); } .font_family_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_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(--color_a_50); --text_color: var(--color_a_50); } .color_b_50 { color: var(--color_b_50); --text_color: var(--color_b_50); } .color_c_50 { color: var(--color_c_50); --text_color: var(--color_c_50); } .color_d_50 { color: var(--color_d_50); --text_color: var(--color_d_50); } .color_e_50 { color: var(--color_e_50); --text_color: var(--color_e_50); } .color_f_50 { color: var(--color_f_50); --text_color: var(--color_f_50); } .color_g_50 { color: var(--color_g_50); --text_color: var(--color_g_50); } .color_h_50 { color: var(--color_h_50); --text_color: var(--color_h_50); } .color_i_50 { color: var(--color_i_50); --text_color: var(--color_i_50); } .color_j_50 { color: var(--color_j_50); --text_color: var(--color_j_50); } .darken_00 { background-color: var(--darken_00); } .darken_05 { background-color: var(--darken_05); } .darken_10 { background-color: var(--darken_10); } .darken_20 { background-color: var(--darken_20); } .darken_30 { background-color: var(--darken_30); } .darken_40 { background-color: var(--darken_40); } .darken_50 { background-color: var(--darken_50); } .darken_60 { background-color: var(--darken_60); } .darken_70 { background-color: var(--darken_70); } .darken_80 { background-color: var(--darken_80); } .darken_90 { background-color: var(--darken_90); } .darken_95 { background-color: var(--darken_95); } .darken_100 { background-color: var(--darken_100); } .lighten_00 { background-color: var(--lighten_00); } .lighten_05 { background-color: var(--lighten_05); } .lighten_10 { background-color: var(--lighten_10); } .lighten_20 { background-color: var(--lighten_20); } .lighten_30 { background-color: var(--lighten_30); } .lighten_40 { background-color: var(--lighten_40); } .lighten_50 { background-color: var(--lighten_50); } .lighten_60 { background-color: var(--lighten_60); } .lighten_70 { background-color: var(--lighten_70); } .lighten_80 { background-color: var(--lighten_80); } .lighten_90 { background-color: var(--lighten_90); } .lighten_95 { background-color: var(--lighten_95); } .lighten_100 { background-color: var(--lighten_100); } .fg_00 { background-color: var(--fg_00); } .fg_05 { background-color: var(--fg_05); } .fg_10 { background-color: var(--fg_10); } .fg_20 { background-color: var(--fg_20); } .fg_30 { background-color: var(--fg_30); } .fg_40 { background-color: var(--fg_40); } .fg_50 { background-color: var(--fg_50); } .fg_60 { background-color: var(--fg_60); } .fg_70 { background-color: var(--fg_70); } .fg_80 { background-color: var(--fg_80); } .fg_90 { background-color: var(--fg_90); } .fg_95 { background-color: var(--fg_95); } .fg_100 { background-color: var(--fg_100); } .bg_00 { background-color: var(--bg_00); } .bg_05 { background-color: var(--bg_05); } .bg_10 { background-color: var(--bg_10); } .bg_20 { background-color: var(--bg_20); } .bg_30 { background-color: var(--bg_30); } .bg_40 { background-color: var(--bg_40); } .bg_50 { background-color: var(--bg_50); } .bg_60 { background-color: var(--bg_60); } .bg_70 { background-color: var(--bg_70); } .bg_80 { background-color: var(--bg_80); } .bg_90 { background-color: var(--bg_90); } .bg_95 { background-color: var(--bg_95); } .bg_100 { background-color: var(--bg_100); } .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_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 hsl, 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 hsl, 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 hsl, 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 hsl, 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 hsl, 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 hsl, 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 hsl, 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 hsl, 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 hsl, 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 hsl, 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 hsl, 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 hsl, 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 hsl, 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 hsl, 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 hsl, 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 hsl, 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 hsl, 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 hsl, 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 hsl, 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 hsl, 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 hsl, 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 hsl, 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 hsl, 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 hsl, 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 hsl, 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 hsl, 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 hsl, 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 hsl, 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 hsl, 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 hsl, 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_color_a_00 { --shadow_color: var(--color_a_00); } .shadow_color_a_05 { --shadow_color: var(--color_a_05); } .shadow_color_a_10 { --shadow_color: var(--color_a_10); } .shadow_color_a_20 { --shadow_color: var(--color_a_20); } .shadow_color_a_30 { --shadow_color: var(--color_a_30); } .shadow_color_a_40 { --shadow_color: var(--color_a_40); } .shadow_color_a_50 { --shadow_color: var(--color_a_50); } .shadow_color_a_60 { --shadow_color: var(--color_a_60); } .shadow_color_a_70 { --shadow_color: var(--color_a_70); } .shadow_color_a_80 { --shadow_color: var(--color_a_80); } .shadow_color_a_90 { --shadow_color: var(--color_a_90); } .shadow_color_a_95 { --shadow_color: var(--color_a_95); } .shadow_color_a_100 { --shadow_color: var(--color_a_100); } .shadow_color_b_00 { --shadow_color: var(--color_b_00); } .shadow_color_b_05 { --shadow_color: var(--color_b_05); } .shadow_color_b_10 { --shadow_color: var(--color_b_10); } .shadow_color_b_20 { --shadow_color: var(--color_b_20); } .shadow_color_b_30 { --shadow_color: var(--color_b_30); } .shadow_color_b_40 { --shadow_color: var(--color_b_40); } .shadow_color_b_50 { --shadow_color: var(--color_b_50); } .shadow_color_b_60 { --shadow_color: var(--color_b_60); } .shadow_color_b_70 { --shadow_color: var(--color_b_70); } .shadow_color_b_80 { --shadow_color: var(--color_b_80); } .shadow_color_b_90 { --shadow_color: var(--color_b_90); } .shadow_color_b_95 { --shadow_color: var(--color_b_95); } .shadow_color_b_100 { --shadow_color: var(--color_b_100); } .shadow_color_c_00 { --shadow_color: var(--color_c_00); } .shadow_color_c_05 { --shadow_color: var(--color_c_05); } .shadow_color_c_10 { --shadow_color: var(--color_c_10); } .shadow_color_c_20 { --shadow_color: var(--color_c_20); } .shadow_color_c_30 { --shadow_color: var(--color_c_30); } .shadow_color_c_40 { --shadow_color: var(--color_c_40); } .shadow_color_c_50 { --shadow_color: var(--color_c_50); } .shadow_color_c_60 { --shadow_color: var(--color_c_60); } .shadow_color_c_70 { --shadow_color: var(--color_c_70); } .shadow_color_c_80 { --shadow_color: var(--color_c_80); } .shadow_color_c_90 { --shadow_color: var(--color_c_90); } .shadow_color_c_95 { --shadow_color: var(--color_c_95); } .shadow_color_c_100 { --shadow_color: var(--color_c_100); } .shadow_color_d_00 { --shadow_color: var(--color_d_00); } .shadow_color_d_05 { --shadow_color: var(--color_d_05); } .shadow_color_d_10 { --shadow_color: var(--color_d_10); } .shadow_color_d_20 { --shadow_color: var(--color_d_20); } .shadow_color_d_30 { --shadow_color: var(--color_d_30); } .shadow_color_d_40 { --shadow_color: var(--color_d_40); } .shadow_color_d_50 { --shadow_color: var(--color_d_50); } .shadow_color_d_60 { --shadow_color: var(--color_d_60); } .shadow_color_d_70 { --shadow_color: var(--color_d_70); } .shadow_color_d_80 { --shadow_color: var(--color_d_80); } .shadow_color_d_90 { --shadow_color: var(--color_d_90); } .shadow_color_d_95 { --shadow_color: var(--color_d_95); } .shadow_color_d_100 { --shadow_color: var(--color_d_100); } .shadow_color_e_00 { --shadow_color: var(--color_e_00); } .shadow_color_e_05 { --shadow_color: var(--color_e_05); } .shadow_color_e_10 { --shadow_color: var(--color_e_10); } .shadow_color_e_20 { --shadow_color: var(--color_e_20); } .shadow_color_e_30 { --shadow_color: var(--color_e_30); } .shadow_color_e_40 { --shadow_color: var(--color_e_40); } .shadow_color_e_50 { --shadow_color: var(--color_e_50); } .shadow_color_e_60 { --shadow_color: var(--color_e_60); } .shadow_color_e_70 { --shadow_color: var(--color_e_70); } .shadow_color_e_80 { --shadow_color: var(--color_e_80); } .shadow_color_e_90 { --shadow_color: var(--color_e_90); } .shadow_color_e_95 { --shadow_color: var(--color_e_95); } .shadow_color_e_100 { --shadow_color: var(--color_e_100); } .shadow_color_f_00 { --shadow_color: var(--color_f_00); } .shadow_color_f_05 { --shadow_color: var(--color_f_05); } .shadow_color_f_10 { --shadow_color: var(--color_f_10); } .shadow_color_f_20 { --shadow_color: var(--color_f_20); } .shadow_color_f_30 { --shadow_color: var(--color_f_30); } .shadow_color_f_40 { --shadow_color: var(--color_f_40); } .shadow_color_f_50 { --shadow_color: var(--color_f_50); } .shadow_color_f_60 { --shadow_color: var(--color_f_60); } .shadow_color_f_70 { --shadow_color: var(--color_f_70); } .shadow_color_f_80 { --shadow_color: var(--color_f_80); } .shadow_color_f_90 { --shadow_color: var(--color_f_90); } .shadow_color_f_95 { --shadow_color: var(--color_f_95); } .shadow_color_f_100 { --shadow_color: var(--color_f_100); } .shadow_color_g_00 { --shadow_color: var(--color_g_00); } .shadow_color_g_05 { --shadow_color: var(--color_g_05); } .shadow_color_g_10 { --shadow_color: var(--color_g_10); } .shadow_color_g_20 { --shadow_color: var(--color_g_20); } .shadow_color_g_30 { --shadow_color: var(--color_g_30); } .shadow_color_g_40 { --shadow_color: var(--color_g_40); } .shadow_color_g_50 { --shadow_color: var(--color_g_50); } .shadow_color_g_60 { --shadow_color: var(--color_g_60); } .shadow_color_g_70 { --shadow_color: var(--color_g_70); } .shadow_color_g_80 { --shadow_color: var(--color_g_80); } .shadow_color_g_90 { --shadow_color: var(--color_g_90); } .shadow_color_g_95 { --shadow_color: var(--color_g_95); } .shadow_color_g_100 { --shadow_color: var(--color_g_100); } .shadow_color_h_00 { --shadow_color: var(--color_h_00); } .shadow_color_h_05 { --shadow_color: var(--color_h_05); } .shadow_color_h_10 { --shadow_color: var(--color_h_10); } .shadow_color_h_20 { --shadow_color: var(--color_h_20); } .shadow_color_h_30 { --shadow_color: var(--color_h_30); } .shadow_color_h_40 { --shadow_color: var(--color_h_40); } .shadow_color_h_50 { --shadow_color: var(--color_h_50); } .shadow_color_h_60 { --shadow_color: var(--color_h_60); } .shadow_color_h_70 { --shadow_color: var(--color_h_70); } .shadow_color_h_80 { --shadow_color: var(--color_h_80); } .shadow_color_h_90 { --shadow_color: var(--color_h_90); } .shadow_color_h_95 { --shadow_color: var(--color_h_95); } .shadow_color_h_100 { --shadow_color: var(--color_h_100); } .shadow_color_i_00 { --shadow_color: var(--color_i_00); } .shadow_color_i_05 { --shadow_color: var(--color_i_05); } .shadow_color_i_10 { --shadow_color: var(--color_i_10); } .shadow_color_i_20 { --shadow_color: var(--color_i_20); } .shadow_color_i_30 { --shadow_color: var(--color_i_30); } .shadow_color_i_40 { --shadow_color: var(--color_i_40); } .shadow_color_i_50 { --shadow_color: var(--color_i_50); } .shadow_color_i_60 { --shadow_color: var(--color_i_60); } .shadow_color_i_70 { --shadow_color: var(--color_i_70); } .shadow_color_i_80 { --shadow_color: var(--color_i_80); } .shadow_color_i_90 { --shadow_color: var(--color_i_90); } .shadow_color_i_95 { --shadow_color: var(--color_i_95); } .shadow_color_i_100 { --shadow_color: var(--color_i_100); } .shadow_color_j_00 { --shadow_color: var(--color_j_00); } .shadow_color_j_05 { --shadow_color: var(--color_j_05); } .shadow_color_j_10 { --shadow_color: var(--color_j_10); } .shadow_color_j_20 { --shadow_color: var(--color_j_20); } .shadow_color_j_30 { --shadow_color: var(--color_j_30); } .shadow_color_j_40 { --shadow_color: var(--color_j_40); } .shadow_color_j_50 { --shadow_color: var(--color_j_50); } .shadow_color_j_60 { --shadow_color: var(--color_j_60); } .shadow_color_j_70 { --shadow_color: var(--color_j_70); } .shadow_color_j_80 { --shadow_color: var(--color_j_80); } .shadow_color_j_90 { --shadow_color: var(--color_j_90); } .shadow_color_j_95 { --shadow_color: var(--color_j_95); } .shadow_color_j_100 { --shadow_color: var(--color_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_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_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\: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\: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 */